kiru 0.44.4

package/src/hooks/useAsync.ts

@@ -0,0 +1,136 @@
+import { __DEV__ } from "../env.js"
+import { noop } from "../utils.js"
+import { depsRequireChange, sideEffectsEnabled, useHook } from "./utils.js"
+
+export type UseAsyncState<T> = (
+  | /** loading*/ {
+      data: null
+      loading: true
+      error: null
+    }
+  | /** loaded */ {
+      data: T
+      loading: false
+      error: null
+    }
+  | /** error */ {
+      data: null
+      loading: false
+      error: UseAsyncError
+    }
+) & {
+  invalidate: () => void
+}
+
+export type UseAsyncCallbackContext = {
+  abortSignal: AbortSignal
+}
+
+export class UseAsyncError extends Error {
+  constructor(message: unknown) {
+    super(message instanceof Error ? message.message : String(message))
+    this.name = "UseAsyncError"
+    this.cause = message
+  }
+}
+
+type AsyncTaskState<T> = {
+  data: T | null
+  loading: boolean
+  error: Error | null
+  abortController: AbortController
+}
+/**
+ * Runs an asynchronous function on initial render, or when a value provided in the [dependency
+ * array](https://kaioken.dev/docs/hooks/dependency-arrays) has changed.
+ *
+ * @see https://kaioken.dev/docs/hooks/useAsync
+ */
+export function useAsync<T>(
+  func: (ctx: UseAsyncCallbackContext) => Promise<T>,
+  deps: unknown[]
+): UseAsyncState<T> {
+  if (!sideEffectsEnabled())
+    return {
+      data: null,
+      loading: true,
+      error: null,
+      invalidate: noop,
+    }
+  return useHook(
+    "useAsync",
+    {
+      deps,
+      id: 0,
+      task: null as any as AsyncTaskState<T>,
+      load: noop as (
+        func: (ctx: UseAsyncCallbackContext) => Promise<T>
+      ) => void,
+    },
+    ({ hook, isInit, isHMR, update }) => {
+      if (__DEV__) {
+        hook.dev = { devtools: { get: () => ({ value: hook.task }) } }
+        if (isHMR) {
+          isInit = true
+        }
+      }
+      if (isInit) {
+        hook.cleanup = () => abortTask(hook.task)
+        hook.load = (func) => {
+          let invalidated = false
+          const abortController = new AbortController()
+          abortController.signal.addEventListener("abort", () => {
+            invalidated = true
+          })
+          const id = ++hook.id
+          const task: AsyncTaskState<T> = (hook.task = {
+            abortController,
+            data: null,
+            loading: true,
+            error: null,
+          })
+          func({ abortSignal: abortController.signal })
+            .then((result: T) => {
+              if (id !== hook.id) abortTask(task)
+              if (invalidated) return
+
+              task.data = result
+              task.loading = false
+              task.error = null
+              update()
+            })
+            .catch((error) => {
+              if (id !== hook.id) abortTask(task)
+              if (invalidated) return
+
+              task.data = null
+              task.loading = false
+              task.error = new UseAsyncError(error)
+              update()
+            })
+        }
+      }
+
+      if (isInit || depsRequireChange(deps, hook.deps)) {
+        abortTask(hook.task)
+        hook.deps = deps
+        hook.load(func)
+      }
+
+      const { abortController, ...rest } = hook.task
+      return {
+        ...rest,
+        invalidate: () => {
+          abortTask(hook.task)
+          hook.load(func)
+          update()
+        },
+      } as UseAsyncState<T>
+    }
+  )
+}
+
+function abortTask<T>(task: AsyncTaskState<T> | null): void {
+  if (task === null || task.abortController.signal.aborted) return
+  task.abortController.abort()
+}

package/src/hooks/useCallback.ts

@@ -0,0 +1,31 @@
+import { __DEV__ } from "../env.js"
+import { depsRequireChange, useHook, sideEffectsEnabled } from "./utils.js"
+
+/**
+ * Creates a memoized callback function.
+ *
+ * @see https://kaioken.dev/docs/hooks/useCallback
+ */
+export function useCallback<T extends Function>(
+  callback: T,
+  deps: unknown[]
+): T {
+  if (!sideEffectsEnabled()) return callback
+  return useHook("useCallback", { callback, deps }, ({ hook, isHMR }) => {
+    if (__DEV__) {
+      hook.dev = {
+        devtools: {
+          get: () => ({ callback: hook.callback, dependencies: hook.deps }),
+        },
+      }
+      if (isHMR) {
+        hook.deps = []
+      }
+    }
+    if (depsRequireChange(deps, hook.deps)) {
+      hook.deps = deps
+      hook.callback = callback
+    }
+    return hook.callback
+  })
+}

package/src/hooks/useContext.ts

@@ -0,0 +1,79 @@
+import type { ContextProviderNode } from "../types.utils.js"
+import { type HookCallbackState, useHook } from "./utils.js"
+import { __DEV__ } from "../env.js"
+import { $CONTEXT_PROVIDER } from "../constants.js"
+
+type UseContextHookState<T> = {
+  provider?: ContextProviderNode<T>
+  context: Kaioken.Context<T>
+  warnIfNotFound: boolean
+}
+
+/**
+ * Gets the current value of a context provider created by the context.
+ *
+ * @see https://kaioken.dev/docs/hooks/useContext
+ */
+export function useContext<T>(
+  context: Kaioken.Context<T>,
+  warnIfNotFound = true
+): T {
+  return useHook(
+    "useContext",
+    {
+      context,
+      warnIfNotFound,
+    } satisfies UseContextHookState<T>,
+    useContextCallback as typeof useContextCallback<T>
+  )
+}
+
+const useContextCallback = <T>({
+  hook,
+  isInit,
+  vNode,
+}: HookCallbackState<UseContextHookState<T>>) => {
+  if (__DEV__) {
+    hook.dev = {
+      devtools: {
+        get: () => ({
+          contextName: hook.context.Provider.displayName || "",
+          value: hook.provider
+            ? hook.provider.props.value
+            : hook.context.default(),
+        }),
+      },
+    }
+  }
+  if (isInit) {
+    let n = vNode.parent
+    while (n) {
+      if (n.type === $CONTEXT_PROVIDER) {
+        const provider = n as ContextProviderNode<T>
+        const { ctx, value, dependents } = provider.props
+        if (ctx === hook.context) {
+          dependents.add(vNode)
+          hook.cleanup = () => dependents.delete(vNode)
+          hook.provider = provider
+          return value
+        }
+      }
+      n = n.parent
+    }
+  }
+  if (!hook.provider) {
+    if (__DEV__) {
+      hook.warnIfNotFound && warnProviderNotFound(hook.context)
+    }
+    return hook.context.default()
+  }
+  return hook.provider.props.value
+}
+
+const contextsNotFound = new Set<Kaioken.Context<any>>()
+function warnProviderNotFound(ctx: Kaioken.Context<any>) {
+  if (!contextsNotFound.has(ctx)) {
+    contextsNotFound.add(ctx)
+    console.warn("[kaioken]: Unable to find context provider")
+  }
+}

package/src/hooks/useEffect.ts

@@ -0,0 +1,44 @@
+import { __DEV__ } from "../env.js"
+import {
+  cleanupHook,
+  depsRequireChange,
+  sideEffectsEnabled,
+  useHook,
+} from "./utils.js"
+
+/**
+ * Runs a function after the component is rendered, or when a value provided in the optional [dependency
+ * array](https://kaioken.dev/docs/hooks/dependency-arrays) has changed.
+ *
+ * @see https://kaioken.dev/docs/hooks/useEffect
+ * */
+export function useEffect(
+  callback: () => void | (() => void),
+  deps?: unknown[]
+): void {
+  if (!sideEffectsEnabled()) return
+  return useHook(
+    "useEffect",
+    { deps },
+    ({ hook, isInit, isHMR, queueEffect }) => {
+      if (__DEV__) {
+        hook.dev = {
+          devtools: { get: () => ({ callback, dependencies: hook.deps }) },
+        }
+        if (isHMR) {
+          isInit = true
+        }
+      }
+      if (isInit || depsRequireChange(deps, hook.deps)) {
+        hook.deps = deps
+        cleanupHook(hook)
+        queueEffect(() => {
+          const cleanup = callback()
+          if (typeof cleanup === "function") {
+            hook.cleanup = cleanup
+          }
+        })
+      }
+    }
+  )
+}

package/src/hooks/useEffectEvent.ts

@@ -0,0 +1,24 @@
+import { node } from "../globals.js"
+import { __DEV__ } from "../env.js"
+import { sideEffectsEnabled, useHook } from "./utils.js"
+
+/**
+ * Wraps a function to be called within effects and other callbacks.
+ * The function will be called with the same arguments as the original function.
+ *
+ * @see https://kaioken.dev/docs/hooks/useEffectEvent
+ */
+export function useEffectEvent<T extends Function>(callback: T): T {
+  if (!sideEffectsEnabled()) return callback
+  return useHook("useEffectEvent", { callback }, ({ hook }) => {
+    hook.callback = callback
+    return function () {
+      if (node.current) {
+        throw new Error(
+          "A function wrapped in useEffectEvent can't be called during rendering."
+        )
+      }
+      return hook.callback.apply(void 0, arguments)
+    } as any as T
+  })
+}

package/src/hooks/useId.ts

@@ -0,0 +1,42 @@
+import { __DEV__ } from "../env.js"
+import { HookCallback, useHook } from "./utils.js"
+
+/**
+ * Creates a unique id for the current node. This is derived based on the node's position in your application tree.
+ * Useful for assigning predictable ids to elements.
+ *
+ * @see https://kaioken.dev/docs/hooks/useId
+ */
+export function useId(): string {
+  return useHook("useId", createUseIdState, useIdCallback)
+}
+
+type UseIdState = {
+  id: string
+  idx: number
+}
+
+const createUseIdState = (): UseIdState => ({
+  id: "",
+  idx: 0,
+})
+
+const useIdCallback: HookCallback<UseIdState> = ({ hook, isInit, vNode }) => {
+  if (__DEV__) {
+    hook.dev = {
+      devtools: { get: () => ({ id: hook.id }) },
+    }
+  }
+  if (isInit || vNode.index !== hook.idx) {
+    hook.idx = vNode.index
+    const accumulator: number[] = []
+    let n: Kaioken.VNode | null = vNode
+    while (n) {
+      accumulator.push(n.index)
+      accumulator.push(n.depth)
+      n = n.parent
+    }
+    hook.id = `k:${BigInt(accumulator.join("")).toString(36)}`
+  }
+  return hook.id
+}

package/src/hooks/useLayoutEffect.ts

@@ -0,0 +1,47 @@
+import { __DEV__ } from "../env.js"
+import {
+  cleanupHook,
+  depsRequireChange,
+  sideEffectsEnabled,
+  useHook,
+} from "./utils.js"
+
+/**
+ * Runs a function before the component is rendered, or when a value provided in the optional [dependency
+ * array](https://kaioken.dev/docs/hooks/dependency-arrays) has changed.
+ *
+ * @see https://kaioken.dev/docs/hooks/useLayoutEffect
+ * */
+export function useLayoutEffect(
+  callback: () => void | (() => void),
+  deps?: unknown[]
+): void {
+  if (!sideEffectsEnabled()) return
+  return useHook(
+    "useLayoutEffect",
+    { deps },
+    ({ hook, isInit, isHMR, queueEffect }) => {
+      if (__DEV__) {
+        hook.dev = {
+          devtools: { get: () => ({ callback, dependencies: hook.deps }) },
+        }
+        if (isHMR) {
+          isInit = true
+        }
+      }
+      if (isInit || depsRequireChange(deps, hook.deps)) {
+        hook.deps = deps
+        cleanupHook(hook)
+        queueEffect(
+          () => {
+            const cleanup = callback()
+            if (typeof cleanup === "function") {
+              hook.cleanup = cleanup
+            }
+          },
+          { immediate: true }
+        )
+      }
+    }
+  )
+}

package/src/hooks/useMemo.ts

@@ -0,0 +1,33 @@
+import { __DEV__ } from "../env.js"
+import { depsRequireChange, sideEffectsEnabled, useHook } from "./utils.js"
+
+/**
+ * Creates a memoized value that only changes when the [dependency
+ * array](https://kaioken.dev/docs/hooks/dependency-arrays) has changed.
+ *
+ * @see https://kaioken.dev/docs/hooks/useMemo
+ */
+export function useMemo<T>(factory: () => T, deps: unknown[]): T {
+  if (!sideEffectsEnabled()) return factory()
+  return useHook(
+    "useMemo",
+    { deps, value: undefined as T },
+    ({ hook, isInit, isHMR }) => {
+      if (__DEV__) {
+        hook.dev = {
+          devtools: {
+            get: () => ({ value: hook.value, dependencies: hook.deps }),
+          },
+        }
+        if (isHMR) {
+          isInit = true
+        }
+      }
+      if (isInit || depsRequireChange(deps, hook.deps)) {
+        hook.deps = deps
+        hook.value = factory()
+      }
+      return hook.value
+    }
+  )
+}

package/src/hooks/useReducer.ts

@@ -0,0 +1,50 @@
+import { __DEV__ } from "../env.js"
+import { noop } from "../utils.js"
+import { sideEffectsEnabled, useHook } from "./utils.js"
+
+/**
+ * Creates 'dispatcher-driven' state.
+ *
+ * @see https://kaioken.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 Kaioken.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

@@ -0,0 +1,40 @@
+import { __DEV__ } from "../env.js"
+import { sideEffectsEnabled, useHook } from "./utils.js"
+
+/**
+ * Creates a ref object. Useful for persisting values between renders or getting
+ * a reference to an element.
+ *
+ * @see https://kaioken.dev/docs/hooks/useRef
+ */
+export function useRef<T>(initialValue: T): Kaioken.MutableRefObject<T>
+export function useRef<T>(initialValue: T | null): Kaioken.RefObject<T>
+export function useRef<T = undefined>(): Kaioken.MutableRefObject<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 Kaioken.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

@@ -0,0 +1,62 @@
+import { __DEV__ } from "../env.js"
+import { noop } from "../utils.js"
+import { sideEffectsEnabled, useHook } from "./utils.js"
+
+/**
+ * Creates a stateful value, and returns the current value and a function to update it.
+ *
+ * @see https://kaioken.dev/docs/hooks/useState
+ */
+export function useState<T>(
+  initial: T | (() => T)
+): readonly [T, (value: Kaioken.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: Kaioken.StateSetter<T>) => void,
+    },
+    ({ hook, isInit, update, isHMR }) => {
+      if (__DEV__) {
+        if (isInit) {
+          hook.dev = {
+            devtools: {
+              get: () => ({ value: hook.state }),
+              set: ({ value }) => (hook.state = value),
+            } satisfies Kaioken.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: Kaioken.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

@@ -0,0 +1,59 @@
+import { node } from "../globals.js"
+import { KaiokenError } from "../error.js"
+import { noop } from "../utils.js"
+import { sideEffectsEnabled, 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://kaioken.dev/docs/hooks/useSyncExternalStore
+ */
+export function useSyncExternalStore<T>(
+  subscribe: (callback: () => void) => () => void,
+  getState: () => T,
+  getServerState?: () => T
+): T {
+  if (!sideEffectsEnabled()) {
+    if (getServerState === undefined) {
+      throw new KaiokenError({
+        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

@@ -0,0 +1,26 @@
+import { ctx, node } from "../globals.js"
+import { noop } from "../utils.js"
+import { sideEffectsEnabled } from "./utils.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://kaioken.dev/docs/hooks/useViewTransition
+ */
+export function useViewTransition() {
+  if (!sideEffectsEnabled()) return noop
+  const appCtx = ctx.current
+  return (callback: () => void) => {
+    if (node.current) {
+      throw new Error("useViewTransition can't be called during rendering.")
+    }
+    if (!document.startViewTransition) return callback()
+    document.startViewTransition(() => {
+      callback()
+      appCtx.flushSync()
+    })
+  }
+}