kiru 0.48.3 → 0.50.0-preview.0

package/src/reconciler.ts

@@ -1,5 +1,5 @@
 import { $FRAGMENT, FLAG_PLACEMENT, FLAG_UPDATE } from "./constants.js"
-import { getVNodeAppContext, isVNode, latest } from "./utils.js"
+import { getVNodeAppContext, isVNode, latest } from "./utils/index.js"
 import { Signal } from "./signals/base.js"
 import { __DEV__ } from "./env.js"
 import { createElement, Fragment } from "./element.js"
@@ -150,11 +150,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
 function updateSlot(parent: VNode, oldChild: VNode | null, child: unknown) {
   // Update the node if the keys match, otherwise return null.
   const key = oldChild?.props.key
-  if (
-    (typeof child === "string" && child !== "") ||
-    typeof child === "number" ||
-    typeof child === "bigint"
-  ) {
+  if (isValidTextNodeValue(child)) {
     if (key !== undefined) return null
     if (
       oldChild?.type === "#text" &&
@@ -272,11 +268,7 @@ function updateFragment(
 }
 
 function createChild(parent: VNode, child: unknown): VNode | null {
-  if (
-    (typeof child === "string" && child !== "") ||
-    typeof child === "number" ||
-    typeof child === "bigint"
-  ) {
+  if (isValidTextNodeValue(child)) {
     if (__DEV__) {
       dev_emitCreateNode()
     }
@@ -438,6 +430,16 @@ function updateFromMap(
   return null
 }
 
+function isValidTextNodeValue(
+  value: unknown
+): value is string | number | bigint {
+  return (
+    (typeof value === "string" && value !== "") ||
+    typeof value === "number" ||
+    typeof value === "bigint"
+  )
+}
+
 function propsChanged(oldProps: VNode["props"], newProps: VNode["props"]) {
   const aKeys = Object.keys(oldProps)
   const bKeys = Object.keys(newProps)

package/src/renderToString.ts

@@ -5,78 +5,144 @@ import {
   encodeHtmlEntities,
   propsToElementAttributes,
   isExoticType,
-} from "./utils.js"
+  assertValidElementProps,
+} from "./utils/index.js"
 import { Signal } from "./signals/base.js"
-import { $HYDRATION_BOUNDARY, voidElements } from "./constants.js"
-import { assertValidElementProps } from "./props.js"
+import {
+  $ERROR_BOUNDARY,
+  $HYDRATION_BOUNDARY,
+  voidElements,
+} from "./constants.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./ssr/hydrationBoundary.js"
 import { __DEV__ } from "./env.js"
+import { ErrorBoundaryNode } from "./types.utils.js"
+import { isSuspenseThrowValue } from "./components/suspense.js"
+
+interface StringRenderContext {
+  write(chunk: string): void
+  beginNewBoundary(): number
+  resetBoundary(idx: number): void
+}
 
 export function renderToString(element: JSX.Element) {
   const prev = renderMode.current
   renderMode.current = "string"
-  const rootNode = Fragment({ children: element })
-  const res = renderToString_internal(rootNode, null, 0)
+  const parts: string[] = [""]
+  const ctx: StringRenderContext = {
+    write(chunk) {
+      parts[parts.length - 1] += chunk
+    },
+    beginNewBoundary() {
+      parts.push("")
+      return parts.length - 1
+    },
+    resetBoundary(idx) {
+      parts[idx] = ""
+    },
+  }
+  renderToString_internal(ctx, Fragment({ children: element }), null, 0)
   renderMode.current = prev
-  return res
+  return parts.join("")
 }
 
 function renderToString_internal(
+  ctx: StringRenderContext,
   el: unknown,
   parent: Kiru.VNode | null,
   idx: number
-): string {
-  if (el === null) return ""
-  if (el === undefined) return ""
-  if (typeof el === "boolean") return ""
-  if (typeof el === "string") return encodeHtmlEntities(el)
-  if (typeof el === "number" || typeof el === "bigint") return el.toString()
+): void {
+  if (el === null) return
+  if (el === undefined) return
+  if (typeof el === "boolean") return
+  if (typeof el === "string") {
+    return ctx.write(encodeHtmlEntities(el))
+  }
+  if (typeof el === "number" || typeof el === "bigint") {
+    return ctx.write(el.toString())
+  }
   if (el instanceof Array) {
-    return el.map((c, i) => renderToString_internal(c, parent, i)).join("")
+    return el.forEach((c, i) => renderToString_internal(ctx, c, parent, i))
+  }
+  if (Signal.isSignal(el)) {
+    return ctx.write(String(el.peek()))
+  }
+  if (!isVNode(el)) {
+    return ctx.write(String(el))
   }
-  if (Signal.isSignal(el)) return String(el.peek())
-  if (!isVNode(el)) return String(el)
   el.parent = parent
   el.depth = (parent?.depth ?? -1) + 1
   el.index = idx
-  const props = el.props ?? {}
-  const type = el.type
-  if (type === "#text") return encodeHtmlEntities(props.nodeValue ?? "")
+  const { type, props = {} } = el
+  if (type === "#text") {
+    return ctx.write(encodeHtmlEntities(props.nodeValue ?? ""))
+  }
 
   const children = props.children
   if (isExoticType(type)) {
     if (type === $HYDRATION_BOUNDARY) {
-      return `<!--${HYDRATION_BOUNDARY_MARKER}-->${renderToString_internal(
-        children,
-        el,
-        idx
-      )}<!--/${HYDRATION_BOUNDARY_MARKER}-->`
+      ctx.write(`<!--${HYDRATION_BOUNDARY_MARKER}-->`)
+      renderToString_internal(ctx, children, el, idx)
+      ctx.write(`<!--/${HYDRATION_BOUNDARY_MARKER}-->`)
+      return
+    }
+
+    if (type === $ERROR_BOUNDARY) {
+      const boundaryIdx = ctx.beginNewBoundary()
+      try {
+        renderToString_internal(ctx, children, el, idx)
+      } catch (error) {
+        if (isSuspenseThrowValue(error)) {
+          throw error
+        }
+        ctx.resetBoundary(boundaryIdx)
+        const e = error instanceof Error ? error : new Error(String(error))
+        const { fallback, onError } = props as ErrorBoundaryNode["props"]
+        onError?.(e)
+        const fallbackContent =
+          typeof fallback === "function" ? fallback(e) : fallback
+        renderToString_internal(ctx, fallbackContent, el, 0)
+      }
+      return
     }
 
-    return renderToString_internal(children, el, idx)
+    renderToString_internal(ctx, children, el, idx)
+    return
   }
 
   if (typeof type !== "string") {
-    node.current = el
-    const res = type(props)
-    node.current = null
-    return renderToString_internal(res, el, idx)
+    try {
+      node.current = el
+      const res = type(props)
+      renderToString_internal(ctx, res, el, idx)
+      return
+    } catch (error) {
+      if (isSuspenseThrowValue(error)) {
+        return renderToString_internal(ctx, error.fallback, el, 0)
+      }
+      throw error
+    } finally {
+      node.current = null
+    }
   }
 
-  if (__DEV__) {
-    assertValidElementProps(el)
-  }
+  if (__DEV__) assertValidElementProps(el)
   const attrs = propsToElementAttributes(props)
-  const inner =
-    "innerHTML" in props
-      ? Signal.isSignal(props.innerHTML)
-        ? props.innerHTML.peek()
-        : props.innerHTML
-      : Array.isArray(children)
-      ? children.map((c, i) => renderToString_internal(c, el, i)).join("")
-      : renderToString_internal(children, el, 0)
+  ctx.write(`<${type}${attrs.length ? ` ${attrs}` : ""}>`)
+
+  if (voidElements.has(type)) return
 
-  return `<${type}${attrs.length ? ` ${attrs}` : ""}>${
-    voidElements.has(type) ? "" : `${inner}</${type}>`
-  }`
+  if ("innerHTML" in props) {
+    ctx.write(
+      String(
+        Signal.isSignal(props.innerHTML)
+          ? props.innerHTML.peek()
+          : props.innerHTML
+      )
+    )
+  } else if (Array.isArray(children)) {
+    children.forEach((c, i) => renderToString_internal(ctx, c, el, i))
+  } else {
+    renderToString_internal(ctx, children, el, 0)
+  }
+  ctx.write(`</${type}>`)
 }

package/src/scheduler.ts

@@ -1,10 +1,12 @@
 import type {
   ContextProviderNode,
   DomVNode,
+  ErrorBoundaryNode,
   FunctionVNode,
 } from "./types.utils"
 import {
   $CONTEXT_PROVIDER,
+  $ERROR_BOUNDARY,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
   FLAG_DIRTY,
@@ -23,14 +25,15 @@ import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
 import { hookIndex, node, renderMode } from "./globals.js"
 import { hydrationStack } from "./hydration.js"
-import { assertValidElementProps } from "./props.js"
+import { assertValidElementProps } from "./utils/index.js"
 import { reconcileChildren } from "./reconciler.js"
 import {
   latest,
   traverseApply,
   isExoticType,
   getVNodeAppContext,
-} from "./utils.js"
+  findParentErrorBoundary,
+} from "./utils/index.js"
 import type { AppContext } from "./appContext"
 
 type VNode = Kiru.VNode
@@ -202,21 +205,10 @@ function doWork(): void {
 function performUnitOfWork(vNode: VNode): VNode | void {
   let renderChild = true
   try {
-    const { props } = vNode
     if (typeof vNode.type === "string") {
       updateHostComponent(vNode as DomVNode)
     } else if (isExoticType(vNode.type)) {
-      if (vNode?.type === $CONTEXT_PROVIDER) {
-        const {
-          props: { dependents, value },
-          prev,
-        } = vNode as ContextProviderNode<unknown>
-
-        if (dependents.size && prev && prev.props.value !== value) {
-          dependents.forEach(queueUpdate)
-        }
-      }
-      vNode.child = reconcileChildren(vNode, props.children)
+      updateExoticComponent(vNode)
     } else {
       renderChild = updateFunctionComponent(vNode as FunctionVNode)
     }
@@ -229,6 +221,18 @@ function performUnitOfWork(vNode: VNode): VNode | void {
       )
     }
 
+    const handler = findParentErrorBoundary(vNode)
+    if (handler) {
+      const e = (handler.error =
+        error instanceof Error ? error : new Error(String(error)))
+
+      handler.props.onError?.(e)
+      if (handler.depth < currentWorkRoot!.depth) {
+        currentWorkRoot = handler
+      }
+      return handler
+    }
+
     if (KiruError.isKiruError(error)) {
       if (error.customNodeStack) {
         setTimeout(() => {
@@ -279,6 +283,35 @@ function performUnitOfWork(vNode: VNode): VNode | void {
   }
 }
 
+function updateExoticComponent(vNode: VNode) {
+  const { props, type } = vNode
+  let children = props.children
+
+  if (type === $CONTEXT_PROVIDER) {
+    const {
+      props: { dependents, value },
+      prev,
+    } = vNode as ContextProviderNode<unknown>
+
+    if (dependents.size && prev && prev.props.value !== value) {
+      dependents.forEach(queueUpdate)
+    }
+  } else if (type === $ERROR_BOUNDARY) {
+    const n = vNode as ErrorBoundaryNode
+    const { error } = n
+    if (error) {
+      children =
+        typeof props.fallback === "function"
+          ? props.fallback(error)
+          : props.fallback
+
+      delete n.error
+    }
+  }
+
+  vNode.child = reconcileChildren(vNode, children)
+}
+
 function updateFunctionComponent(vNode: FunctionVNode) {
   const { type, props, subs, prev, flags } = vNode
   if (flags & FLAG_MEMO) {
@@ -318,6 +351,20 @@ function updateFunctionComponent(vNode: FunctionVNode) {
 
       if (__DEV__) {
         newChild = latest(type)(props)
+
+        if (vNode.hmrUpdated && vNode.hooks && vNode.hookSig) {
+          const len = vNode.hooks.length
+          if (hookIndex.current < len) {
+            // clean up any hooks that were removed
+            for (let i = hookIndex.current; i < len; i++) {
+              const hook = vNode.hooks[i]
+              hook.cleanup?.()
+            }
+            vNode.hooks.length = hookIndex.current
+            vNode.hookSig.length = hookIndex.current
+          }
+        }
+
         delete vNode.hmrUpdated
         if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
           throw new KiruError({

package/src/signals/base.ts

@@ -1,9 +1,13 @@
-import { latest, safeStringify, sideEffectsEnabled } from "../utils.js"
+import {
+  latest,
+  safeStringify,
+  sideEffectsEnabled,
+  generateRandomID,
+} from "../utils/index.js"
 import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
 import { __DEV__ } from "../env.js"
 import { node } from "../globals.js"
 import { useHook } from "../hooks/utils.js"
-import { generateRandomID } from "../generateId.js"
 import { requestUpdate } from "../scheduler.js"
 import { tracking, signalSubsMap } from "./globals.js"
 import type { SignalSubscriber, ReadonlySignal } from "./types.js"

package/src/signals/computed.ts

@@ -1,7 +1,7 @@
 import { __DEV__ } from "../env.js"
 import { $HMR_ACCEPT } from "../constants.js"
 import { useHook } from "../hooks/utils.js"
-import { latest } from "../utils.js"
+import { latest } from "../utils/index.js"
 import { effectQueue, signalSubsMap } from "./globals.js"
 import { executeWithTracking } from "./effect.js"
 import { Signal } from "./base.js"

package/src/signals/effect.ts

@@ -1,5 +1,5 @@
 import { node } from "../globals.js"
-import { sideEffectsEnabled } from "../utils.js"
+import { sideEffectsEnabled } from "../utils/index.js"
 import { tracking, effectQueue } from "./globals.js"
 import { tick } from "./utils.js"
 import type { Signal } from "./base.js"

package/src/signals/watch.ts

@@ -1,11 +1,10 @@
 import { __DEV__ } from "../env.js"
 import type { HMRAccept } from "../hmr.js"
 import { $HMR_ACCEPT } from "../constants.js"
-import { sideEffectsEnabled, useHook } from "../hooks/utils.js"
+import { useHook } from "../hooks/utils.js"
 import { effectQueue } from "./globals.js"
-import { generateRandomID } from "../generateId.js"
 import { executeWithTracking } from "./effect.js"
-import { latest } from "../utils.js"
+import { latest, sideEffectsEnabled, generateRandomID } from "../utils/index.js"
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 

package/src/ssr/server.ts

@@ -1,110 +1,202 @@
 import { Readable } from "node:stream"
 import { Fragment } from "../element.js"
-import { renderMode, node } from "../globals.js"
+import { renderMode, node, hookIndex } from "../globals.js"
 import {
   isVNode,
   encodeHtmlEntities,
   propsToElementAttributes,
   isExoticType,
-} from "../utils.js"
+  assertValidElementProps,
+} from "../utils/index.js"
 import { Signal } from "../signals/base.js"
-import { $HYDRATION_BOUNDARY, voidElements } from "../constants.js"
-import { assertValidElementProps } from "../props.js"
+import {
+  $HYDRATION_BOUNDARY,
+  $ERROR_BOUNDARY,
+  PREFETCHED_DATA_EVENT,
+  voidElements,
+} from "../constants.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./hydrationBoundary.js"
 import { __DEV__ } from "../env.js"
+import type { ErrorBoundaryNode } from "../types.utils"
+import { isSuspenseThrowValue } from "../components/suspense.js"
 
-export function renderToReadableStream(element: JSX.Element): Readable {
-  const prev = renderMode.current
-  renderMode.current = "stream"
-  const stream = new Readable()
+interface ServerRenderContext {
+  write: (chunk: string) => void
+  queuePendingData: (data: Kiru.StatefulPromise<unknown>[]) => void
+}
+
+const PREFETCH_EVENTS_SETUP = `
+<script type="text/javascript">
+const d = document,
+  m = (window["${PREFETCHED_DATA_EVENT}"] ??= new Map());
+d.querySelectorAll("[x-data]").forEach((p) => {
+  const id = p.getAttribute("id");
+  const { data, error } = JSON.parse(p.innerHTML);
+  m.set(id, { data, error });
+  const event = new CustomEvent("${PREFETCHED_DATA_EVENT}", { detail: { id, data, error } });
+  window.dispatchEvent(event);
+  p.remove();
+});
+d.currentScript.remove()
+</script>
+`
+
+export function renderToReadableStream(element: JSX.Element): {
+  immediate: string
+  stream: Readable
+} {
+  const stream = new Readable({ read() {} })
   const rootNode = Fragment({ children: element })
+  const prefetchPromises = new Set<Kiru.StatefulPromise<unknown>>()
+  const pendingWritePromises: Promise<unknown>[] = []
 
-  renderToStream_internal(stream, rootNode, null, 0)
-  stream.push(null)
+  let immediate = ""
+
+  const ctx: ServerRenderContext = {
+    write: (chunk) => (immediate += chunk),
+    queuePendingData(data) {
+      for (const promise of data) {
+        if (prefetchPromises.has(promise)) continue
+        prefetchPromises.add(promise)
+
+        const writePromise = promise
+          .then(() => ({ data: promise.value }))
+          .catch(() => ({ error: promise.error?.message }))
+          .then((value) => {
+            const content = JSON.stringify(value)
+            stream.push(
+              `<script id="${promise.id}" x-data type="application/json">${content}</script>`
+            )
+          })
+
+        pendingWritePromises.push(writePromise)
+      }
+    },
+  }
+
+  const prev = renderMode.current
+  renderMode.current = "stream"
+  renderToStream_internal(ctx, rootNode, null, 0)
   renderMode.current = prev
 
-  return stream
+  if (pendingWritePromises.length > 0) {
+    Promise.all(pendingWritePromises).then(() => {
+      stream.push(PREFETCH_EVENTS_SETUP)
+      stream.push(null)
+    })
+  } else {
+    stream.push(null)
+  }
+
+  return { immediate, stream }
 }
 
 function renderToStream_internal(
-  stream: Readable,
+  ctx: ServerRenderContext,
   el: unknown,
   parent: Kiru.VNode | null,
   idx: number
 ): void {
-  if (el === null) return
-  if (el === undefined) return
-  if (typeof el === "boolean") return
-  if (typeof el === "string") {
-    stream.push(encodeHtmlEntities(el))
-    return
-  }
-  if (typeof el === "number" || typeof el === "bigint") {
-    stream.push(el.toString())
-    return
-  }
-  if (el instanceof Array) {
-    el.forEach((c, i) => renderToStream_internal(stream, c, parent, i))
-    return
-  }
-  if (Signal.isSignal(el)) {
-    stream.push(String(el.peek()))
-    return
-  }
-  if (!isVNode(el)) {
-    stream.push(String(el))
-    return
-  }
+  if (el === null || el === undefined || typeof el === "boolean") return
+  if (typeof el === "string") return ctx.write(encodeHtmlEntities(el))
+  if (typeof el === "number" || typeof el === "bigint")
+    return ctx.write(el.toString())
+  if (el instanceof Array)
+    return el.forEach((c, i) => renderToStream_internal(ctx, c, parent, i))
+  if (Signal.isSignal(el)) return ctx.write(String(el.peek()))
+  if (!isVNode(el)) return ctx.write(String(el))
+
   el.parent = parent
   el.depth = (parent?.depth ?? -1) + 1
   el.index = idx
-  const props = el.props ?? {}
+  const { type, props = {} } = el
   const children = props.children
-  const type = el.type
-  if (type === "#text") {
-    stream.push(encodeHtmlEntities(props.nodeValue ?? ""))
-    return
-  }
+
+  if (type === "#text")
+    return ctx.write(encodeHtmlEntities(props.nodeValue ?? ""))
+
   if (isExoticType(type)) {
     if (type === $HYDRATION_BOUNDARY) {
-      stream.push(`<!--${HYDRATION_BOUNDARY_MARKER}-->`)
-      renderToStream_internal(stream, children, el, idx)
-      stream.push(`<!--/${HYDRATION_BOUNDARY_MARKER}-->`)
+      ctx.write(`<!--${HYDRATION_BOUNDARY_MARKER}-->`)
+      renderToStream_internal(ctx, children, el, idx)
+      ctx.write(`<!--/${HYDRATION_BOUNDARY_MARKER}-->`)
+      return
+    }
+
+    if (type === $ERROR_BOUNDARY) {
+      let boundaryBuffer = ""
+      const localPromises = new Set<Kiru.StatefulPromise<unknown>>()
+
+      const boundaryCtx: ServerRenderContext = {
+        write(chunk) {
+          boundaryBuffer += chunk
+        },
+        queuePendingData(data) {
+          data.forEach((p) => localPromises.add(p))
+        },
+      }
+
+      try {
+        renderToStream_internal(boundaryCtx, children, el, idx)
+        // flush successful render
+        ctx.write(boundaryBuffer)
+        // merge local promises into global queue
+        ctx.queuePendingData([...localPromises])
+      } catch (error) {
+        if (isSuspenseThrowValue(error)) {
+          throw error
+        }
+        const e = error instanceof Error ? error : new Error(String(error))
+        const { fallback, onError } = props as ErrorBoundaryNode["props"]
+        onError?.(e)
+        const fallbackContent =
+          typeof fallback === "function" ? fallback(e) : fallback
+        renderToStream_internal(ctx, fallbackContent, el, 0)
+      }
       return
     }
-    return renderToStream_internal(stream, children, el, idx)
+
+    // other exotic types
+    return renderToStream_internal(ctx, children, el, idx)
   }
 
   if (typeof type !== "string") {
-    node.current = el
-    const res = type(props)
-    node.current = null
-    return renderToStream_internal(stream, res, parent, idx)
+    try {
+      hookIndex.current = 0
+      node.current = el
+      const res = type(props)
+      return renderToStream_internal(ctx, res, el, idx)
+    } catch (error) {
+      if (isSuspenseThrowValue(error)) {
+        const { fallback, pendingData } = error
+        if (pendingData) ctx.queuePendingData(pendingData)
+        renderToStream_internal(ctx, fallback, el, 0)
+        return
+      }
+      throw error
+    } finally {
+      node.current = null
+    }
   }
 
-  if (__DEV__) {
-    assertValidElementProps(el)
-  }
+  if (__DEV__) assertValidElementProps(el)
   const attrs = propsToElementAttributes(props)
-  stream.push(`<${type}${attrs.length ? ` ${attrs}` : ""}>`)
-
-  if (!voidElements.has(type)) {
-    if ("innerHTML" in props) {
-      stream.push(
-        String(
-          Signal.isSignal(props.innerHTML)
-            ? props.innerHTML.peek()
-            : props.innerHTML
-        )
-      )
-    } else {
-      if (Array.isArray(children)) {
-        children.forEach((c, i) => renderToStream_internal(stream, c, el, i))
-      } else {
-        renderToStream_internal(stream, children, el, 0)
-      }
-    }
+  ctx.write(`<${type}${attrs.length ? ` ${attrs}` : ""}>`)
 
-    stream.push(`</${type}>`)
+  if (voidElements.has(type)) return
+
+  if ("innerHTML" in props) {
+    ctx.write(
+      String(
+        Signal.isSignal(props.innerHTML)
+          ? props.innerHTML.peek()
+          : props.innerHTML
+      )
+    )
+  } else if (Array.isArray(children)) {
+    children.forEach((c, i) => renderToStream_internal(ctx, c, el, i))
+  } else {
+    renderToStream_internal(ctx, children, el, 0)
   }
+  ctx.write(`</${type}>`)
 }