kiru 0.49.2 → 0.50.0-preview.1

package/src/recursiveRender.ts

@@ -0,0 +1,127 @@
+import { node, hookIndex } from "./globals.js"
+import {
+  isVNode,
+  encodeHtmlEntities,
+  propsToElementAttributes,
+  isExoticType,
+  assertValidElementProps,
+} from "./utils/index.js"
+import { Signal } from "./signals/base.js"
+import { $ERROR_BOUNDARY, voidElements, $SUSPENSE_THROW } from "./constants.js"
+import { __DEV__ } from "./env.js"
+import { isSuspenseThrowValue } from "./components/suspense.js"
+import type { ErrorBoundaryNode } from "./types.utils"
+
+export interface RecursiveRenderContext {
+  write(chunk: string): void
+  onPending?: (data: Kiru.StatefulPromise<unknown>[]) => void
+}
+
+export function recursiveRender(
+  ctx: RecursiveRenderContext,
+  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") {
+    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) => recursiveRender(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 { type, props = {} } = el
+  if (type === "#text") {
+    return ctx.write(encodeHtmlEntities(props.nodeValue ?? ""))
+  }
+
+  const children = props.children
+  if (isExoticType(type)) {
+    if (type === $ERROR_BOUNDARY) {
+      let boundaryBuffer = ""
+      const pending = new Set<Kiru.StatefulPromise<unknown>>()
+      const boundaryCtx: RecursiveRenderContext = {
+        write(chunk) {
+          boundaryBuffer += chunk
+        },
+        onPending(data) {
+          data.forEach((p) => pending.add(p))
+        },
+      }
+      try {
+        recursiveRender(boundaryCtx, children, el, idx)
+        // flush successful render
+        ctx.write(boundaryBuffer)
+        ctx.onPending?.([...pending])
+      } 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
+        recursiveRender(ctx, fallbackContent, el, 0)
+      }
+      return
+    }
+
+    recursiveRender(ctx, children, el, idx)
+    return
+  }
+
+  if (typeof type !== "string") {
+    try {
+      hookIndex.current = 0
+      node.current = el
+      const res = type(props)
+      recursiveRender(ctx, res, el, idx)
+      return
+    } catch (error) {
+      if (isSuspenseThrowValue(error)) {
+        const { fallback, pending } = error[$SUSPENSE_THROW]
+        ctx.onPending?.(pending)
+        return recursiveRender(ctx, fallback, el, 0)
+      }
+      throw error
+    } finally {
+      node.current = null
+    }
+  }
+
+  if (__DEV__) assertValidElementProps(el)
+  const attrs = propsToElementAttributes(props)
+  ctx.write(`<${type}${attrs.length ? ` ${attrs}` : ""}>`)
+
+  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) => recursiveRender(ctx, c, el, i))
+  } else {
+    recursiveRender(ctx, children, el, 0)
+  }
+  ctx.write(`</${type}>`)
+}

package/src/renderToString.ts

@@ -1,81 +1,18 @@
-import { node, renderMode } from "./globals.js"
+import { renderMode } from "./globals.js"
 import { Fragment } from "./element.js"
-import {
-  isVNode,
-  encodeHtmlEntities,
-  propsToElementAttributes,
-  isExoticType,
-  assertValidElementProps,
-} from "./utils/index.js"
-import { Signal } from "./signals/base.js"
-import { $HYDRATION_BOUNDARY, voidElements } from "./constants.js"
-import { HYDRATION_BOUNDARY_MARKER } from "./ssr/hydrationBoundary.js"
 import { __DEV__ } from "./env.js"
+import { recursiveRender, RecursiveRenderContext } from "./recursiveRender.js"
 
 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)
-  renderMode.current = prev
-  return res
-}
-
-function renderToString_internal(
-  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()
-  if (el instanceof Array) {
-    return el.map((c, i) => renderToString_internal(c, parent, i)).join("")
-  }
-  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 { type, props = {} } = el
-  if (type === "#text") return 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}-->`
-    }
-
-    return renderToString_internal(children, el, idx)
+  let result = ""
+  const ctx: RecursiveRenderContext = {
+    write(chunk) {
+      result += chunk
+    },
   }
-
-  if (typeof type !== "string") {
-    node.current = el
-    const res = type(props)
-    node.current = null
-    return renderToString_internal(res, el, idx)
-  }
-
-  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)
-
-  return `<${type}${attrs.length ? ` ${attrs}` : ""}>${
-    voidElements.has(type) ? "" : `${inner}</${type}>`
-  }`
+  recursiveRender(ctx, Fragment({ children: element }), null, 0)
+  renderMode.current = prev
+  return result
 }

package/src/router/config.ts

@@ -0,0 +1,15 @@
+import { __DEV__ } from "../env.js"
+import { fileRouterInstance } from "./globals.js"
+import type { PageConfig } from "./types"
+
+export function definePageConfig<T extends PageConfig>(config: T): T {
+  if (__DEV__) {
+    const filePath = window.__kiru?.HMRContext?.getCurrentFilePath()
+    const fileRouter = fileRouterInstance.current
+    if (filePath && fileRouter) {
+      fileRouter.onPageConfigDefined(filePath, config)
+    }
+  }
+
+  return config
+}

package/src/router/context.ts

@@ -0,0 +1,23 @@
+import { createContext } from "../context.js"
+import { __DEV__ } from "../env.js"
+import { useContext } from "../hooks/index.js"
+import type { RouteQuery, RouterState } from "./types.js"
+
+export interface FileRouterContextType {
+  state: RouterState
+  navigate: (
+    path: string,
+    options?: { replace?: boolean; transition?: boolean }
+  ) => Promise<void>
+  reload: (options?: { transition?: boolean }) => Promise<void>
+  setQuery: (query: RouteQuery) => void
+}
+
+export const RouterContext = createContext<FileRouterContextType>(null!)
+if (__DEV__) {
+  RouterContext.displayName = "RouterContext"
+}
+
+export function useFileRouter(): FileRouterContextType {
+  return useContext(RouterContext)
+}

package/src/router/errors.ts

@@ -0,0 +1,6 @@
+export class FileRouterDataLoadError extends Error {
+  constructor(cause: unknown) {
+    super("An error occurred while loading route data")
+    this.cause = cause
+  }
+}