javascript

javascript
let installed = false;

function notify(message, level = "error") {
  document.dispatchEvent(
    new CustomEvent("flash:show", { detail: { message, level } })
  );

Turbo Drive lifecycle: attach global error handler

rails turbo hotwire
by codesnips 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["wrapper", "template", "anchor"]

  add(event) {

Stimulus: nested fields add/remove without re-rendering

rails stimulus hotwire
by codesnips 4 tabs
javascript
import React, { createContext, useContext, useReducer, useState } from 'react';

// 1. Basic Context
const UserContext = createContext(null);

function UserProvider({ children }) {

State management with Context API and Redux patterns

react redux state-management
by Alex Chang 2 tabs
javascript
import { useState, useEffect, useCallback } from 'react';

export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {
    if (typeof window === 'undefined') return initialValue;
    try {

Persist a React Shopping Cart to localStorage with a Context Provider

javascript react context
by codesnips 3 tabs
erb
<%# locals: item %>
<button
  type="button"
  class="toggle-btn"
  data-controller="toggle"
  data-action="click->toggle#toggle"

Optimistic toggle button with Stimulus “revert on failure”

rails hotwire stimulus
by codesnips 3 tabs
ruby
class Task < ApplicationRecord
  POSITION_GAP = 1024

  belongs_to :board

  scope :ordered, -> { order(:position) }

Reorder a list server-side and reflect instantly with Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
javascript
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["field"];

  connect() {

Autofocus first input when a Turbo modal opens (Stimulus)

rails hotwire stimulus
by codesnips 3 tabs
javascript
function encodeCursor(row) {
  if (!row) return null;
  const payload = JSON.stringify({ t: row.created_at, id: row.id });
  return Buffer.from(payload, 'utf8').toString('base64url');
}

Cursor-Paginated REST Endpoint With a React Load More Button

react pagination cursor
by codesnips 4 tabs
ruby
module FlashHelper
  FLASH_CLASSES = {
    "notice" => "flash--success",
    "alert"  => "flash--error",
    "error"  => "flash--error"
  }.freeze

Turbo Stream flash messages without custom JS

rails hotwire turbo
by codesnips 4 tabs
javascript
class ApiError extends Error {
  constructor(statusCode, message, code) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.code = code || null;

Centralized Async Error Handling in Express With asyncHandler and Error Middleware

express nodejs error-handling
by codesnips 4 tabs
javascript
class BatchLoader {
  constructor(batchFn, { cacheKeyFn = (k) => k } = {}) {
    this.batchFn = batchFn;
    this.cacheKeyFn = cacheKeyFn;
    this.cache = new Map();
    this.queue = [];

Coalescing Concurrent Reads with a DataLoader-Style Batch Loader in Node

dataloader batching graphql
by codesnips 3 tabs
javascript
import { Controller } from "@hotwired/stimulus"
import { NotificationsApi } from "notifications_api"

export default class extends Controller {
  static targets = ["notification"]
  static values = {

Stimulus: intersection observer for “mark as read”

rails stimulus hotwire
by codesnips 3 tabs