kiru 0.44.4

package/src/ssr/client.ts

@@ -0,0 +1,29 @@
+import type { AppContext, AppContextOptions } from "../appContext"
+import { hydrationStack } from "../hydration.js"
+import { renderMode } from "../globals.js"
+import { mount } from "../index.js"
+
+export function hydrate<T extends Record<string, unknown>>(
+  appFunc: (props: T) => JSX.Element,
+  container: AppContextOptions,
+  appProps?: T
+): Promise<AppContext<T>>
+
+export function hydrate<T extends Record<string, unknown>>(
+  appFunc: (props: T) => JSX.Element,
+  container: HTMLElement,
+  appProps?: T
+): Promise<AppContext<T>>
+
+export function hydrate<T extends Record<string, unknown>>(
+  appFunc: (props: T) => JSX.Element,
+  optionsOrRoot: HTMLElement | AppContextOptions,
+  appProps = {} as T
+) {
+  hydrationStack.clear()
+  const prevRenderMode = renderMode.current
+  renderMode.current = "hydrate"
+  return mount(appFunc, optionsOrRoot as any, appProps).finally(() => {
+    renderMode.current = prevRenderMode
+  })
+}

package/src/ssr/hydrationBoundary.ts

@@ -0,0 +1,63 @@
+import { createContext } from "../context.js"
+import { $HYDRATION_BOUNDARY } from "../constants.js"
+import { createElement, Fragment } from "../element.js"
+import { renderMode } from "../globals.js"
+
+type EventsArray = (keyof GlobalEventHandlersEventMap)[]
+
+export const HYDRATION_BOUNDARY_MARKER = "kaioken:h-boundary"
+export const DEFAULT_INTERACTION_EVENTS = [
+  "pointerdown",
+  "keydown",
+  "focus",
+  "input",
+] as const satisfies EventsArray
+
+export type HydrationBoundaryMode = "eager" | "interaction"
+export type HydrationBoundaryProps<T extends HydrationBoundaryMode> = {
+  /**
+   * Determines the strategy to use when hydrating the boundary.
+   * - `eager`: hydrate immediately.
+   * - `interaction`: hydrate upon the first user interaction.
+   * @default "eager"
+   */
+  mode?: T
+  children: JSX.Children
+} & (T extends "interaction"
+  ? {
+      /**
+       * List of events that will trigger the hydration.
+       * @default ["pointerdown", "keydown", "focus", "input"]
+       */
+      events?: EventsArray
+    }
+  : {})
+
+export const HydrationBoundaryContext = createContext<{
+  mode: HydrationBoundaryMode
+  events: string[]
+}>(null!)
+
+export function Experimental_HydrationBoundary<T extends HydrationBoundaryMode>(
+  props: HydrationBoundaryProps<T>
+) {
+  const provider = createElement(
+    HydrationBoundaryContext.Provider,
+    {
+      value: {
+        mode: props.mode || "eager",
+        // @ts-expect-error this is fine
+        events: props.events ?? DEFAULT_INTERACTION_EVENTS,
+      },
+    },
+    createElement($HYDRATION_BOUNDARY, props)
+  )
+  if (renderMode.current === "string" || renderMode.current === "stream") {
+    /**
+     * in order to ensure consistent tree structure, we're simulating
+     * the generated loader + wrapper components here.
+     */
+    return Fragment({ children: Fragment({ children: provider }) })
+  }
+  return provider
+}

package/src/ssr/index.ts

@@ -0,0 +1 @@
+export * from "./hydrationBoundary.js"

package/src/ssr/server.ts

@@ -0,0 +1,124 @@
+import { Readable } from "node:stream"
+import { Fragment } from "../element.js"
+import { AppContext, createAppContext } from "../appContext.js"
+import { renderMode, ctx, node, nodeToCtxMap } from "../globals.js"
+import {
+  isVNode,
+  encodeHtmlEntities,
+  propsToElementAttributes,
+  isExoticType,
+} from "../utils.js"
+import { Signal } from "../signals/base.js"
+import { $HYDRATION_BOUNDARY, voidElements } from "../constants.js"
+import { assertValidElementProps } from "../props.js"
+import { HYDRATION_BOUNDARY_MARKER } from "./hydrationBoundary.js"
+import { __DEV__ } from "../env.js"
+
+type RequestState = {
+  stream: Readable
+  ctx: AppContext
+}
+
+export function renderToReadableStream<T extends Record<string, unknown>>(
+  appFunc: (props: T) => JSX.Element,
+  appProps = {} as T
+): Readable {
+  const prev = renderMode.current
+  renderMode.current = "stream"
+  const state: RequestState = {
+    stream: new Readable(),
+    ctx: createAppContext(appFunc, appProps, { rootType: Fragment }),
+  }
+  const prevCtx = ctx.current
+  ctx.current = state.ctx
+  renderToStream_internal(state, state.ctx.rootNode, null, 0)
+  state.stream.push(null)
+  renderMode.current = prev
+  ctx.current = prevCtx
+
+  return state.stream
+}
+
+function renderToStream_internal(
+  state: RequestState,
+  el: unknown,
+  parent: Kaioken.VNode | null,
+  idx: number
+): void {
+  if (el === null) return
+  if (el === undefined) return
+  if (typeof el === "boolean") return
+  if (typeof el === "string") {
+    state.stream.push(encodeHtmlEntities(el))
+    return
+  }
+  if (typeof el === "number" || typeof el === "bigint") {
+    state.stream.push(el.toString())
+    return
+  }
+  if (el instanceof Array) {
+    el.forEach((c, i) => renderToStream_internal(state, c, parent, i))
+    return
+  }
+  if (Signal.isSignal(el)) {
+    state.stream.push(String(el.peek()))
+    return
+  }
+  if (!isVNode(el)) {
+    state.stream.push(String(el))
+    return
+  }
+  el.parent = parent
+  el.depth = (parent?.depth ?? -1) + 1
+  el.index = idx
+  const props = el.props ?? {}
+  const children = props.children
+  const type = el.type
+  if (type === "#text") {
+    state.stream.push(encodeHtmlEntities(props.nodeValue ?? ""))
+    return
+  }
+  if (isExoticType(type)) {
+    if (type === $HYDRATION_BOUNDARY) {
+      state.stream.push(`<!--${HYDRATION_BOUNDARY_MARKER}-->`)
+      renderToStream_internal(state, children, el, idx)
+      state.stream.push(`<!--/${HYDRATION_BOUNDARY_MARKER}-->`)
+      return
+    }
+    return renderToStream_internal(state, children, el, idx)
+  }
+
+  if (typeof type !== "string") {
+    nodeToCtxMap.set(el, state.ctx)
+    node.current = el
+    const res = type(props)
+    node.current = null
+    return renderToStream_internal(state, res, parent, idx)
+  }
+
+  if (__DEV__) {
+    assertValidElementProps(el)
+  }
+  const attrs = propsToElementAttributes(props)
+  state.stream.push(`<${type}${attrs.length ? ` ${attrs}` : ""}>`)
+
+  if (!voidElements.has(type)) {
+    if ("innerHTML" in props) {
+      state.stream.push(
+        String(
+          Signal.isSignal(props.innerHTML)
+            ? props.innerHTML.peek()
+            : props.innerHTML
+        )
+      )
+    } else {
+      if (Array.isArray(children)) {
+        children.forEach((c, i) => renderToStream_internal(state, c, el, i))
+      } else {
+        renderToStream_internal(state, children, el, 0)
+      }
+    }
+
+    state.stream.push(`</${type}>`)
+  }
+}

package/src/store.ts

@@ -0,0 +1,241 @@
+import type { Prettify } from "./types.utils.js"
+import { __DEV__ } from "./env.js"
+import { sideEffectsEnabled, useHook } from "./hooks/utils.js"
+import { safeStringify, shallowCompare } from "./utils.js"
+import { $HMR_ACCEPT } from "./constants.js"
+import { HMRAccept } from "./hmr.js"
+
+export { createStore }
+export type { Store, MethodFactory }
+
+type MethodFactory<T> = (
+  setState: (setter: Kaioken.StateSetter<T>) => void,
+  getState: () => T
+) => Record<string, Function>
+
+type StoreHook<T, U extends Record<string, Function>> = {
+  <R>(sliceFn: (state: T) => R): Prettify<{ value: R } & U>
+  <
+    F extends null | ((state: T) => unknown),
+    R extends F extends Function ? ReturnType<F> : T
+  >(
+    sliceFn: F,
+    equality: (prev: R, next: R, compare: typeof shallowCompare) => boolean
+  ): Prettify<{ value: R } & U>
+  (): Prettify<{ value: T } & U>
+}
+
+type Subscribe<T> = {
+  (fn: (value: T) => void): () => void
+  <R>(sliceFn: (value: T) => R, fn: (value: R) => void): () => void
+}
+
+type Store<T, U extends Record<string, Function>> = StoreHook<T, U> & {
+  getState: () => T
+  setState: (setter: Kaioken.StateSetter<T>) => void
+  methods: U
+  subscribe: Subscribe<T>
+}
+
+type NodeState = {
+  update: () => void
+  slices: {
+    sliceFn: Function | null
+    eq:
+      | ((prev: any, next: any, compare: typeof shallowCompare) => boolean)
+      | undefined
+    value: any
+  }[]
+}
+
+type InternalStoreState<T, U extends MethodFactory<T>> = {
+  value: T
+  epoch: number
+  subscribers: Set<Kaioken.VNode | Function>
+  nodeStateMap: WeakMap<Kaioken.VNode, NodeState>
+  methods: ReturnType<U>
+}
+
+function createStore<T, U extends MethodFactory<T>>(
+  initial: T,
+  methodFactory: U
+): Store<T, ReturnType<U>> {
+  const state = {
+    $initial: null as string | null,
+    current: {
+      value: initial,
+      epoch: 0,
+      subscribers: new Set<Kaioken.VNode | Function>(),
+      nodeStateMap: new WeakMap<Kaioken.VNode, NodeState>(),
+      methods: null as any as ReturnType<U>,
+    } satisfies InternalStoreState<T, U>,
+  }
+  if (__DEV__) {
+    state.$initial = safeStringify(initial)
+  }
+
+  const getState = () => state.current.value
+
+  const setState = (setter: Kaioken.StateSetter<T>) => {
+    state.current.value =
+      typeof setter === "function"
+        ? (setter as Function)(state.current.value)
+        : setter
+
+    const { value, subscribers, nodeStateMap } = state.current
+
+    subscribers.forEach((n) => {
+      if (typeof n === "function") return n(value)
+      const nodeState = nodeStateMap.get(n)
+      if (!nodeState) return
+      const { slices, update } = nodeState
+      let computeChanged = slices.length === 0
+
+      for (let i = 0; i < slices.length; i++) {
+        const slice = slices[i]
+        if (!slice) continue
+        const { sliceFn, eq, value: sliceVal } = slice
+        const newSliceVal = sliceFn === null ? value : sliceFn(value)
+        slices[i] = { sliceFn, eq, value: newSliceVal }
+
+        if (computeChanged) continue
+        if (eq && eq(sliceVal, newSliceVal, shallowCompare)) {
+          continue
+        } else if (!eq && shallowCompare(sliceVal, newSliceVal)) {
+          continue
+        }
+
+        computeChanged = true
+      }
+      if (computeChanged) {
+        update()
+      }
+    })
+    state.current.epoch++
+  }
+  state.current.methods = methodFactory(setState, getState) as ReturnType<U>
+
+  function useStore<R>(
+    sliceFn: null | ((state: T) => R) = null,
+    equality?: (prev: R, next: R, compare: typeof shallowCompare) => boolean
+  ) {
+    if (!sideEffectsEnabled()) {
+      return {
+        value: sliceFn ? sliceFn(state.current.value) : state.current.value,
+        ...state.current.methods,
+      }
+    }
+    return useHook(
+      "useStore",
+      { value: null as any as T | R, lastChangeSync: -1 },
+      ({ hook, isInit, isHMR, vNode, index, update }) => {
+        if (__DEV__) {
+          if (isInit) {
+            hook.dev = {
+              devtools: {
+                get: () => ({ value: hook.value }),
+              },
+              initialArgs: [sliceFn, equality],
+            }
+          }
+          if (isHMR) {
+            const [fn, eq] = hook.dev!.initialArgs
+            if (fn !== sliceFn || eq !== equality) {
+              isInit = true
+              hook.dev!.initialArgs = [sliceFn, equality]
+            }
+          }
+        }
+        const { subscribers, nodeStateMap, epoch, value, methods } =
+          state.current
+
+        const nodeState = nodeStateMap.get(vNode) ?? {
+          slices: [],
+          update,
+        }
+        let slice: (typeof nodeState.slices)[number]
+        if (isInit || !nodeState.slices[index]) {
+          subscribers.add(vNode)
+          hook.lastChangeSync = epoch
+          hook.value = sliceFn === null ? value : sliceFn(value)
+          slice = nodeState.slices[index] = {
+            sliceFn,
+            eq: equality,
+            value: hook.value,
+          }
+          nodeStateMap.set(vNode, nodeState)
+
+          hook.cleanup = () => {
+            nodeStateMap.delete(vNode)
+            subscribers.delete(vNode)
+          }
+        } else {
+          slice = nodeState.slices[index]
+          if (slice.sliceFn !== sliceFn) {
+            slice.value = hook.value = sliceFn ? sliceFn(value) : value
+            slice.sliceFn = sliceFn
+          }
+          slice.eq = equality
+        }
+
+        if (hook.lastChangeSync !== epoch) {
+          hook.value = slice ? slice.value : state.current.value
+          hook.lastChangeSync = epoch
+        }
+
+        return { value: hook.value, ...methods }
+      }
+    )
+  }
+
+  const store = Object.assign(useStore, {
+    get getState() {
+      return getState
+    },
+    get setState() {
+      return setState
+    },
+    get methods() {
+      return { ...state.current.methods }
+    },
+    subscribe: ((sliceOrCb, cb) => {
+      if (cb === undefined) {
+        state.current.subscribers.add(sliceOrCb)
+        return () => (state.current.subscribers.delete(sliceOrCb), void 0)
+      }
+
+      const selection = {
+        current: null as ReturnType<typeof sliceOrCb> | null,
+      }
+      const sliceWrapper = (newState: T) => {
+        const next = sliceOrCb(newState)
+        if (shallowCompare(next, selection.current)) return
+        selection.current = next
+        cb(next)
+      }
+      state.current.subscribers.add(sliceWrapper)
+      return () => (state.current.subscribers.delete(sliceWrapper), void 0)
+    }) as Subscribe<T>,
+  })
+
+  if (__DEV__) {
+    return Object.assign(store, {
+      [$HMR_ACCEPT]: {
+        provide: () => state,
+        inject: (prev) => {
+          state.current = prev.current
+          state.current.methods = methodFactory(
+            setState,
+            getState
+          ) as ReturnType<U>
+          if (state.$initial !== prev.$initial) {
+            setState(initial)
+          }
+        },
+        destroy: () => {},
+      } satisfies HMRAccept<typeof state>,
+    })
+  }
+
+  return store
+}