kiru 0.54.4 → 1.1.0

package/src/hooks/usePromise.ts

@@ -1,126 +0,0 @@
-import { STREAMED_DATA_EVENT } from "../constants.js"
-import { hydrationMode, renderMode } from "../globals.js"
-import { Signal, useSignal } from "../signals/base.js"
-import { cleanupHook, depsRequireChange, useHook } from "./utils.js"
-import { useId } from "./useId.js"
-
-export { usePromise }
-
-const nodeToPromiseIndex = new WeakMap<Kiru.VNode, number>()
-
-type UsePromiseResult<T> = Kiru.StatefulPromise<T> & {
-  refresh: () => void
-  isPending: Signal<boolean>
-}
-
-function usePromise<T>(
-  callback: (signal: AbortSignal) => Promise<T>,
-  deps: unknown[]
-): UsePromiseResult<T> {
-  const id = useId()
-  const isPending = useSignal(true)
-
-  return useHook(
-    "usePromise",
-    {} as {
-      promise: UsePromiseResult<T>
-      abortController?: AbortController
-      deps?: unknown[]
-    },
-    ({ hook, isInit, vNode, update }) => {
-      if (isInit || depsRequireChange(deps, hook.deps)) {
-        isPending.value = true
-        hook.deps = deps
-        cleanupHook(hook)
-
-        const controller = (hook.abortController = new AbortController())
-        hook.cleanup = () => controller.abort()
-
-        const index = nodeToPromiseIndex.get(vNode) ?? 0
-        nodeToPromiseIndex.set(vNode, index + 1)
-
-        const promiseId = `${id}:data:${index}`
-
-        let promise: Promise<T>
-        if (renderMode.current === "string") {
-          // if we're rendering to a string, there's no need to fire the callback
-          promise = Promise.resolve() as Promise<T>
-        } else if (
-          renderMode.current === "hydrate" &&
-          hydrationMode.current === "dynamic"
-        ) {
-          // if we're hydrating and the hydration mode is not static,
-          // we need to resolve the promise from cache/event
-          promise = resolveDeferredPromise<T>(promiseId, controller.signal)
-        } else {
-          // dom / stream / (hydrate + static)
-          promise = callback(controller.signal)
-        }
-
-        const state: Kiru.PromiseState<T> = { id: promiseId, state: "pending" }
-        const statefulPromise: Kiru.StatefulPromise<T> = (hook.promise =
-          Object.assign(promise, state, {
-            isPending,
-            refresh: () => {
-              hook.deps = undefined
-              update()
-            },
-          }))
-
-        statefulPromise
-          .then((value) => {
-            statefulPromise.state = "fulfilled"
-            statefulPromise.value = value
-            isPending.value = false
-          })
-          .catch((error) => {
-            statefulPromise.state = "rejected"
-            statefulPromise.error =
-              error instanceof Error ? error : new Error(error)
-          })
-      }
-      return hook.promise
-    }
-  )
-}
-
-interface DeferredPromiseEventDetail<T> {
-  id: string
-  data?: T
-  error?: string
-}
-
-function resolveDeferredPromise<T>(
-  id: string,
-  signal: AbortSignal
-): Promise<T> {
-  return new Promise<T>((resolve, reject) => {
-    const deferralCache: Map<string, { data?: T; error?: string }> = // @ts-ignore
-      (window[STREAMED_DATA_EVENT] ??= new Map())
-
-    const existing = deferralCache.get(id)
-    if (existing) {
-      const { data, error } = existing
-      deferralCache.delete(id)
-      if (error) return reject(error)
-      return resolve(data!)
-    }
-
-    const onDataEvent = (event: Event) => {
-      const { detail } = event as CustomEvent<DeferredPromiseEventDetail<T>>
-      if (detail.id === id) {
-        deferralCache.delete(id)
-        window.removeEventListener(STREAMED_DATA_EVENT, onDataEvent)
-        const { data, error } = detail
-        if (error) return reject(error)
-        resolve(data!)
-      }
-    }
-
-    window.addEventListener(STREAMED_DATA_EVENT, onDataEvent)
-    signal.addEventListener("abort", () => {
-      window.removeEventListener(STREAMED_DATA_EVENT, onDataEvent)
-      reject()
-    })
-  })
-}

package/src/hooks/useReducer.ts

@@ -1,50 +0,0 @@
-import { __DEV__ } from "../env.js"
-import { noop, sideEffectsEnabled } from "../utils/index.js"
-import { useHook } from "./utils.js"
-
-/**
- * Creates 'dispatcher-driven' state.
- *
- * @see https://kirujs.dev/docs/hooks/useReducer
- */
-export function useReducer<T, A>(
-  reducer: (state: T, action: A) => T,
-  state: T
-): readonly [T, (action: A) => void] {
-  if (!sideEffectsEnabled()) return [state, noop]
-
-  return useHook(
-    "useReducer",
-    { state, dispatch: noop as (action: A) => void },
-    ({ hook, isInit, isHMR, update }) => {
-      if (__DEV__) {
-        if (isInit) {
-          hook.dev = {
-            devtools: {
-              get: () => ({ value: hook.state }),
-              set: ({ value }) => (hook.state = value),
-            } satisfies Kiru.HookDevtoolsProvisions<{ value: T }>,
-            initialArgs: [reducer, state],
-          }
-        }
-        if (isHMR) {
-          const [r, s] = hook.dev!.initialArgs
-          if (r !== reducer || s !== state) {
-            hook.state = state
-            isInit = true
-            hook.dev!.initialArgs = [reducer, state]
-          }
-        }
-      }
-      if (isInit) {
-        hook.dispatch = (action: A) => {
-          const newState = reducer(hook.state, action)
-          if (Object.is(hook.state, newState)) return
-          hook.state = newState
-          update()
-        }
-      }
-      return [hook.state, hook.dispatch] as const
-    }
-  )
-}

package/src/hooks/useRef.ts

@@ -1,40 +0,0 @@
-import { __DEV__ } from "../env.js"
-import { sideEffectsEnabled } from "../utils/index.js"
-import { useHook } from "./utils.js"
-/**
- * Creates a ref object. Useful for persisting values between renders or getting
- * a reference to an element.
- *
- * @see https://kirujs.dev/docs/hooks/useRef
- */
-export function useRef<T>(initialValue: T): Kiru.RefObject<T>
-export function useRef<T>(initialValue: T | null): Kiru.RefObject<T | null>
-export function useRef<T = undefined>(): Kiru.RefObject<T | undefined>
-export function useRef<T>(initialValue?: T | null) {
-  if (!sideEffectsEnabled()) return { current: initialValue }
-  return useHook(
-    "useRef",
-    { ref: { current: initialValue } },
-    ({ hook, isInit, isHMR }) => {
-      if (__DEV__) {
-        if (isInit) {
-          hook.dev = {
-            devtools: {
-              get: () => ({ value: hook.ref.current! }),
-              set: ({ value }) => (hook.ref.current = value),
-            } satisfies Kiru.HookDevtoolsProvisions<{ value: T }>,
-            initialArgs: [hook.ref.current],
-          }
-        }
-        if (isHMR) {
-          const [v] = hook.dev!.initialArgs
-          if (v !== initialValue) {
-            hook.ref = { current: initialValue }
-            hook.dev!.initialArgs = [initialValue]
-          }
-        }
-      }
-      return hook.ref
-    }
-  )
-}

package/src/hooks/useState.ts

@@ -1,62 +0,0 @@
-import { __DEV__ } from "../env.js"
-import { noop, sideEffectsEnabled } from "../utils/index.js"
-import { useHook } from "./utils.js"
-
-/**
- * Creates a stateful value, and returns the current value and a function to update it.
- *
- * @see https://kirujs.dev/docs/hooks/useState
- */
-export function useState<T>(
-  initial: T | (() => T)
-): readonly [T, (value: Kiru.StateSetter<T>) => void] {
-  if (!sideEffectsEnabled()) {
-    return [
-      typeof initial === "function" ? (initial as Function)() : initial,
-      noop,
-    ]
-  }
-  return useHook(
-    "useState",
-    {
-      state: undefined as T,
-      dispatch: noop as (value: Kiru.StateSetter<T>) => void,
-    },
-    ({ hook, isInit, update, isHMR }) => {
-      if (__DEV__) {
-        if (isInit) {
-          hook.dev = {
-            devtools: {
-              get: () => ({ value: hook.state }),
-              set: ({ value }) => (hook.state = value),
-            } satisfies Kiru.HookDevtoolsProvisions<{ value: T }>,
-            initialArgs: [initial],
-          }
-        }
-        if (isHMR) {
-          const [v] = hook.dev!.initialArgs
-          if (v !== initial) {
-            isInit = true
-            hook.dev!.initialArgs = [initial]
-          }
-        }
-      }
-
-      if (isInit) {
-        hook.state =
-          typeof initial === "function" ? (initial as Function)() : initial
-        hook.dispatch = (setter: Kiru.StateSetter<T>) => {
-          const newState =
-            typeof setter === "function"
-              ? (setter as Function)(hook.state)
-              : setter
-          if (Object.is(hook.state, newState)) return
-          hook.state = newState
-          update()
-        }
-      }
-
-      return [hook.state, hook.dispatch] as const
-    }
-  )
-}

package/src/hooks/useSyncExternalStore.ts

@@ -1,59 +0,0 @@
-import { node } from "../globals.js"
-import { KiruError } from "../error.js"
-import { noop, sideEffectsEnabled } from "../utils/index.js"
-import { useHook } from "./utils.js"
-import { __DEV__ } from "../env.js"
-
-/**
- * Allows you to use a generic external store as long as it provides
- * a subscribe function and a way to get its current state.
- *
- * @see https://kirujs.dev/docs/hooks/useSyncExternalStore
- */
-export function useSyncExternalStore<T>(
-  subscribe: (callback: () => void) => () => void,
-  getState: () => T,
-  getServerState?: () => T
-): T {
-  if (!sideEffectsEnabled()) {
-    if (getServerState === undefined) {
-      throw new KiruError({
-        message:
-          "useSyncExternalStore must receive a getServerSnapshot function if the component is rendered on the server.",
-        vNode: node.current!,
-      })
-    }
-    return getServerState()
-  }
-
-  return useHook(
-    "useSyncExternalStore",
-    {
-      state: null as T,
-      unsubscribe: noop as () => void,
-      subscribe,
-    },
-    ({ hook, isInit, update }) => {
-      if (__DEV__) {
-        hook.dev = {
-          devtools: { get: () => ({ value: hook.state }) },
-        }
-      }
-      if (isInit || hook.subscribe !== subscribe) {
-        hook.state = getState()
-        hook.subscribe = subscribe
-        hook.unsubscribe = subscribe(() => {
-          const newState = getState()
-          if (Object.is(hook.state, newState)) return
-          hook.state = newState
-          update()
-        })
-        hook.cleanup = () => {
-          hook.unsubscribe()
-          hook.unsubscribe = noop
-        }
-      }
-      return hook.state
-    }
-  )
-}

package/src/hooks/useViewTransition.ts

@@ -1,25 +0,0 @@
-import { flushSync } from "../scheduler.js"
-import { node } from "../globals.js"
-import { noop, sideEffectsEnabled } from "../utils/index.js"
-
-/**
- * Allows you to easily use the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition)
- * by wrapping the `callback` in a `document.startViewTransition` call.
- *
- * Falls back to the regular `callback` if not supported.
- *
- * @see https://kirujs.dev/docs/hooks/useViewTransition
- */
-export function useViewTransition() {
-  if (!sideEffectsEnabled()) return noop
-  return (callback: () => void) => {
-    if (node.current) {
-      throw new Error("useViewTransition can't be called during rendering.")
-    }
-    if (!document.startViewTransition) return callback()
-    document.startViewTransition(() => {
-      callback()
-      flushSync()
-    })
-  }
-}

package/src/signals/watch.ts

@@ -1,139 +0,0 @@
-import { __DEV__ } from "../env.js"
-import { useHook } from "../hooks/utils.js"
-import { effectQueue } from "./globals.js"
-import { executeWithTracking } from "./effect.js"
-import {
-  latest,
-  sideEffectsEnabled,
-  generateRandomID,
-  call,
-} from "../utils/index.js"
-import type { Signal } from "./base.js"
-import type { SignalValues } from "./types.js"
-
-type WatchCallbackReturn = (() => void) | void
-
-export class WatchEffect<const Deps extends readonly Signal<unknown>[] = []> {
-  protected id: string
-  protected getter: (...values: SignalValues<Deps>) => WatchCallbackReturn
-  protected deps?: Deps
-  protected unsubs: Map<string, Function>
-  protected cleanup: (() => void) | null
-  protected isRunning?: boolean
-
-  constructor(
-    getter: (...values: SignalValues<Deps>) => WatchCallbackReturn,
-    deps?: Deps
-  ) {
-    this.id = generateRandomID()
-    this.getter = getter
-    this.deps = deps
-    this.unsubs = new Map()
-    this.isRunning = false
-    this.cleanup = null
-    if (__DEV__ && "window" in globalThis) {
-      const { isWaitingForNextWatchCall, pushWatch } =
-        window.__kiru.HMRContext!.signals
-
-      if (isWaitingForNextWatchCall()) {
-        pushWatch(this as WatchEffect)
-      }
-    }
-    this.start()
-  }
-
-  start() {
-    if (this.isRunning) {
-      return
-    }
-
-    this.isRunning = true
-
-    // postpone execution during HMR
-    if (
-      __DEV__ &&
-      "window" in globalThis &&
-      window.__kiru.HMRContext?.isReplacement()
-    ) {
-      return queueMicrotask(() => {
-        if (this.isRunning) {
-          WatchEffect.run(this as WatchEffect)
-        }
-      })
-    }
-    WatchEffect.run(this as WatchEffect)
-  }
-
-  stop() {
-    effectQueue.delete(this.id)
-    this.unsubs.forEach(call)
-    this.unsubs.clear()
-    this.cleanup?.()
-    this.cleanup = null
-    this.isRunning = false
-  }
-
-  private static run(watchEffect: WatchEffect) {
-    const effect = latest(watchEffect)
-    const { id, getter, unsubs: subs, deps } = effect
-
-    effect.cleanup =
-      executeWithTracking({
-        id,
-        subs,
-        fn: getter,
-        deps,
-        onDepChanged: () => {
-          effect.cleanup?.()
-          WatchEffect.run(effect)
-        },
-      }) ?? null
-  }
-}
-
-export function watch(getter: () => WatchCallbackReturn): WatchEffect
-export function watch<const Deps extends readonly Signal<unknown>[]>(
-  dependencies: Deps,
-  getter: (...values: SignalValues<Deps>) => WatchCallbackReturn
-): WatchEffect<Deps>
-export function watch<const Deps extends readonly Signal<unknown>[]>(
-  depsOrGetter: Deps | (() => WatchCallbackReturn),
-  getter?: (...values: SignalValues<Deps>) => WatchCallbackReturn
-): WatchEffect<Deps> | WatchEffect {
-  if (typeof depsOrGetter === "function") {
-    return new WatchEffect<[]>(depsOrGetter)
-  }
-  const dependencies = depsOrGetter
-  const effectGetter = getter!
-  return new WatchEffect(effectGetter, dependencies)
-}
-
-export function useWatch(getter: () => WatchCallbackReturn): WatchEffect
-export function useWatch<const Deps extends readonly Signal<unknown>[]>(
-  dependencies: Deps,
-  getter: (...values: SignalValues<Deps>) => WatchCallbackReturn
-): WatchEffect<Deps> | undefined
-
-export function useWatch<const Deps extends readonly Signal<unknown>[]>(
-  depsOrGetter: Deps | (() => WatchCallbackReturn),
-  getter?: (...values: SignalValues<Deps>) => WatchCallbackReturn
-): WatchEffect<Deps> | WatchEffect | undefined {
-  if (!sideEffectsEnabled()) return
-
-  return useHook(
-    "useWatch",
-    { watcher: null as any as WatchEffect<Deps> },
-    ({ hook, isInit, isHMR }) => {
-      if (__DEV__ && isHMR) {
-        hook.cleanup?.()
-        isInit = true
-      }
-      if (isInit) {
-        const watcher = (hook.watcher = watch(depsOrGetter as Deps, getter!))
-        hook.cleanup = () => watcher.stop()
-      }
-
-      return hook.watcher
-    }
-  )
-}