itsMapleLeaf

function CreateTodoButton() {
  const submit = CreateTodoAction.useSubmit()
  const isSubmitting = CreateTodoAction.useSubmissions().length > 0
  const params = useParams()

  return (
    <button
      type="button"
      title="Create Todo"
      disabled={isSubmitting}

itsMapleLeaf

I think it's fair to expect divergence with an API that was made for browsers being mimicked elsewhere; here it's more about faithfulness and predictability

node-fetch, cross-fetch, undici fetch, deno fetch, etc. these are all faithful to the original API, and behave in ways that wouldn't surprise you if you're familiar with fetch. the more unfamiliar nooks and crannies of the API (e.g. ReadableStream) is sort of a rats nest unfortunately 😅 but that's beside the point

here's the difference with Next.js: now I'm not writing fetch with fetch in mind, I'm writing fetch with Next.js's caching behaviors in mind, and a hidden fetch call multiple levels down in the stack can unexpectedly change that behavior in potentially unexpected ways

happy to be convinced otherwise though. I know y'all give this a lot of thought, but this was just really out of left field for me 🫠

itsMapleLeaf

type JsonValue =
  | string
  | number
  | boolean
  | null
  | JsonValue[]
  | JsonObject

type JsonObject = { [key: string]: JsonValue }

itsMapleLeaf

const { contextBridge } = require('electron')

const versionsGlobal = {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
}

contextBridge.exposeInMainWorld('versions', versionsGlobal)

itsMapleLeaf

import { useRef, useState } from "react"
import { useEvent } from "./use-event"

export function useTimer(duration: number) {
  const [running, setRunning] = useState(false)
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()

  const start = useEvent(() => {
    clearTimeout(timeoutRef.current)
    setRunning(true)

itsMapleLeaf

import { useCallback, useLayoutEffect, useRef } from "react"

export function useEvent<Args extends unknown[], Return>(
  callback: (...args: Args) => Return,
) {
  const ref = useRef((...args: Args): Return => {
    throw new Error("Attempt to call event callback during render")
  })

  useLayoutEffect(() => {

itsMapleLeaf

function Example() {
  const [store] = useState(() => createStore())

  useEffect(() => {
    store.connect()
    return () => store.disconnect()
  }, [store])

  // do the thing with store, assuming it updates
}

itsMapleLeaf

❯ nixpacks build .
=== Building (nixpacks v0.1.7) ===
=> Packages
    -> nodejs-16_x
    -> nodePackages.pnpm { nodejs = nodejs-16_x }
=> Install
    -> pnpm i --frozen-lockfile
=> Build
    -> pnpm run build
=> Start

itsMapleLeaf

import { useEffect } from "react"

export function useWindowEvent<Event extends keyof WindowEventMap>(
  event: Event,
  handler: (event: WindowEventMap[Event]) => void,
  options?: boolean | AddEventListenerOptions,
) {
  useEffect(() => {
    window.addEventListener(event, handler, options)
    return () => {

itsMapleLeaf

import { useState, useTransition } from "react"

export function NoteScreen({ noteId }) {
  const [resource, setResource] = useState(() =>
    createResource(getNote(noteId)),
  )
  const note = resource.read()

  const [text, setText] = useState(note.text)
  const [pending, startTransition] = useTransition()