kiru 0.49.0 → 0.50.0-preview.0

package/src/renderToString.ts

@@ -8,75 +8,141 @@ import {
   assertValidElementProps,
 } from "./utils/index.js"
 import { Signal } from "./signals/base.js"
-import { $HYDRATION_BOUNDARY, voidElements } from "./constants.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,
@@ -30,6 +32,7 @@ import {
   traverseApply,
   isExoticType,
   getVNodeAppContext,
+  findParentErrorBoundary,
 } from "./utils/index.js"
 import type { AppContext } from "./appContext"
 
@@ -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/ssr/server.ts

@@ -1,6 +1,6 @@
 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,
@@ -9,102 +9,194 @@ import {
   assertValidElementProps,
 } from "../utils/index.js"
 import { Signal } from "../signals/base.js"
-import { $HYDRATION_BOUNDARY, voidElements } from "../constants.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}>`)
 }

package/src/types.ts

@@ -2,6 +2,7 @@ import type { ReadonlySignal, Signal as SignalClass } from "./signals"
 import type {
   $CONTEXT,
   $CONTEXT_PROVIDER,
+  $ERROR_BOUNDARY,
   $FRAGMENT,
   $HYDRATION_BOUNDARY,
 } from "./constants"
@@ -167,6 +168,15 @@ declare global {
 
     type Ref<T> = RefCallback<T> | RefObject<T> | null | undefined
 
+    interface PromiseState<T> {
+      id: string
+      state: "pending" | "fulfilled" | "rejected"
+      value?: T
+      error?: Error
+    }
+
+    interface StatefulPromise<T> extends Promise<T>, PromiseState<T> {}
+
     type RenderMode = "dom" | "hydrate" | "string" | "stream"
 
     type StateSetter<T> = T | ((prev: T) => T)
@@ -176,6 +186,7 @@ declare global {
     type ExoticSymbol =
       | typeof $FRAGMENT
       | typeof $CONTEXT_PROVIDER
+      | typeof $ERROR_BOUNDARY
       | typeof $HYDRATION_BOUNDARY
 
     interface VNode {

package/src/types.utils.ts

@@ -1,10 +1,12 @@
 import type {
   $CONTEXT_PROVIDER,
+  $ERROR_BOUNDARY,
   $FRAGMENT,
   $HYDRATION_BOUNDARY,
 } from "./constants"
 import type { HydrationBoundaryMode } from "./ssr/hydrationBoundary"
 import type { Signal } from "./signals"
+import type { ErrorBoundaryProps } from "./components/errorBoundary"
 
 export type SomeElement = HTMLElement | SVGElement
 export type SomeDom = HTMLElement | SVGElement | Text
@@ -33,6 +35,12 @@ export interface ContextProviderNode<T> extends Kiru.VNode {
   }
 }
 
+export interface ErrorBoundaryNode extends Kiru.VNode {
+  type: typeof $ERROR_BOUNDARY
+  props: ErrorBoundaryProps
+  error?: Error
+}
+
 export interface HydrationBoundaryNode extends Kiru.VNode {
   type: typeof $HYDRATION_BOUNDARY
   props: Kiru.VNode["props"] & {

package/src/utils/format.ts

@@ -1,9 +1,5 @@
 import { unwrap } from "../signals/index.js"
-import {
-  booleanAttributes,
-  REGEX_UNIT,
-  snakeCaseAttributes,
-} from "../constants.js"
+import { booleanAttributes, snakeCaseAttributes } from "../constants.js"
 
 export {
   className,
@@ -16,18 +12,26 @@ export {
   safeStringify,
 }
 
+const REGEX_AMP = /&/g
+const REGEX_LT = /</g
+const REGEX_GT = />/g
+const REGEX_SQT = /'/g
+const REGEX_DBLQT = /"/g
+const REGEX_SLASH = /\//g
+const REGEX_ALPHA_UPPER = /[A-Z]/g
+
 function className(...classes: (string | false | null | undefined)[]): string {
   return classes.filter(Boolean).join(" ")
 }
 
 function encodeHtmlEntities(text: string): string {
   return text
-    .replace(REGEX_UNIT.AMP_G, "&amp;")
-    .replace(REGEX_UNIT.LT_G, "&lt;")
-    .replace(REGEX_UNIT.GT_G, "&gt;")
-    .replace(REGEX_UNIT.DBLQT_G, "&quot;")
-    .replace(REGEX_UNIT.SQT_G, "&#039;")
-    .replace(REGEX_UNIT.SLASH_G, "&#47;")
+    .replace(REGEX_AMP, "&amp;")
+    .replace(REGEX_LT, "&lt;")
+    .replace(REGEX_GT, "&gt;")
+    .replace(REGEX_DBLQT, "&quot;")
+    .replace(REGEX_SQT, "&#039;")
+    .replace(REGEX_SLASH, "&#47;")
 }
 
 const propFilters = {
@@ -77,7 +81,7 @@ function propToHtmlAttr(key: string): string {
 function styleObjectToString(obj: Partial<CSSStyleDeclaration>): string {
   let cssString = ""
   for (const key in obj) {
-    const cssKey = key.replace(REGEX_UNIT.ALPHA_UPPER_G, "-$&").toLowerCase()
+    const cssKey = key.replace(REGEX_ALPHA_UPPER, "-$&").toLowerCase()
     cssString += `${cssKey}:${obj[key]};`
   }
   return cssString

package/src/utils/runtime.ts

@@ -7,7 +7,7 @@ export { latest, sideEffectsEnabled }
  * This is a no-op in production. It is used to get the latest
  * iteration of a component or signal after HMR has happened.
  */
-function latest<T>(thing: T): T {
+function latest<T extends Exclude<object, null>>(thing: T): T {
   let tgt: any = thing
   if (__DEV__) {
     while ("__next" in tgt) {