kiru 0.50.5 → 0.50.7

package/dist/utils/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../src/utils/dom.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,gBAAgB,CAAC,KAAc;IAC7C,OAAO,CACL,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,QAAQ;QACzB,OAAO,KAAK,KAAK,SAAS;QAC1B,KAAK,KAAK,SAAS;QACnB,KAAK,KAAK,IAAI,CACf,CAAA;AACH,CAAC"}

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./compare.js";
+export * from "./dom.js";
 export * from "./format.js";
 export * from "./runtime.js";
 export * from "./vdom.js";

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAE/B,eAAO,MAAM,IAAI,YAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAE/B,eAAO,MAAM,IAAI,YAA0B,CAAA"}

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./compare.js";
+export * from "./dom.js";
 export * from "./format.js";
 export * from "./runtime.js";
 export * from "./vdom.js";

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAE/B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAE/B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kiru",
-  "version": "0.50.5",
+  "version": "0.50.7",
   "description": "A batteries-included, easy-to-use rendering library with a tiny footprint",
   "main": "dist/index.js",
   "type": "module",

package/src/components/suspense.ts

@@ -1,18 +1,10 @@
-import { requestUpdate } from "../scheduler.js"
-import { renderMode } from "../globals.js"
-import {
-  cleanupHook,
-  depsRequireChange,
-  useHook,
-  useId,
-} from "../hooks/index.js"
+import { $SUSPENSE_THROW } from "../constants.js"
 import { __DEV__ } from "../env.js"
-import { getCurrentVNode } from "../utils/index.js"
-import { $SUSPENSE_THROW, PREFETCHED_DATA_EVENT } from "../constants.js"
-import { Signal, useSignal } from "../signals/base.js"
+import { renderMode, node } from "../globals.js"
+import { requestUpdate } from "../scheduler.js"
 
-export type { SuspenseProps, UsePromiseCallbackContext, UsePromiseState }
-export { Suspense, isSuspenseThrowValue, usePromise }
+export { Suspense, isSuspenseThrowValue }
+export type { SuspenseProps }
 
 type StatefulPromiseValues<T extends readonly Kiru.StatefulPromise<unknown>[]> =
   {
@@ -54,7 +46,7 @@ function Suspense<
       for (const p of promiseArray) {
         if (p.state === "rejected") throw p.error
         if (p.state === "pending") {
-          const n = getCurrentVNode()!
+          const n = node.current!
           Promise.allSettled(promiseArray).then(() => requestUpdate(n))
           return fallback
         }
@@ -78,114 +70,3 @@ interface SuspenseThrowValue {
 function isSuspenseThrowValue(value: unknown): value is SuspenseThrowValue {
   return typeof value === "object" && !!value && $SUSPENSE_THROW in value
 }
-
-interface PromiseResolveEventDetail<T> {
-  id: string
-  data?: T
-  error?: string
-}
-
-function resolveHydrationPromise<T>(
-  id: string,
-  signal: AbortSignal
-): Promise<T> {
-  return new Promise<T>((resolve, reject) => {
-    const prefetchCache: Map<string, { data?: T; error?: string }> = // @ts-ignore
-      (window[PREFETCHED_DATA_EVENT] ??= new Map())
-
-    const existing = prefetchCache.get(id)
-    if (existing) {
-      const { data, error } = existing
-      prefetchCache.delete(id)
-      if (error) return reject(error)
-      return resolve(data!)
-    }
-
-    const onDataEvent = (event: Event) => {
-      const { detail } = event as CustomEvent<PromiseResolveEventDetail<T>>
-      if (detail.id === id) {
-        prefetchCache.delete(id)
-        window.removeEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
-        const { data, error } = detail
-        if (error) return reject(error)
-        resolve(data!)
-      }
-    }
-
-    window.addEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
-    signal.addEventListener("abort", () => {
-      window.removeEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
-      reject()
-    })
-  })
-}
-
-const nodeToPromiseIndex = new WeakMap<Kiru.VNode, number>()
-
-interface UsePromiseCallbackContext {
-  signal: AbortSignal
-}
-
-interface UsePromiseState<T> {
-  data: Kiru.StatefulPromise<T>
-  refresh: () => void
-  pending: Signal<boolean>
-}
-
-function usePromise<T>(
-  callback: (ctx: UsePromiseCallbackContext) => Promise<T>,
-  deps: unknown[]
-): UsePromiseState<T> {
-  const id = useId()
-  const pending = useSignal(true)
-
-  return useHook(
-    "usePromise",
-    {} as {
-      promise: Kiru.StatefulPromise<T>
-      abortController?: AbortController
-      deps?: unknown[]
-    },
-    ({ hook, isInit, vNode }) => {
-      if (isInit || depsRequireChange(deps, hook.deps)) {
-        pending.value = true
-        hook.deps = deps
-        cleanupHook(hook)
-
-        const controller = (hook.abortController = new AbortController())
-        hook.cleanup = () => controller.abort()
-
-        const index = nodeToPromiseIndex.get(vNode) ?? 0
-        nodeToPromiseIndex.set(vNode, index + 1)
-
-        const promiseId = `${id}:data:${index}`
-        const state: Kiru.PromiseState<T> = { id: promiseId, state: "pending" }
-        const promise =
-          renderMode.current === "hydrate"
-            ? resolveHydrationPromise<T>(promiseId, controller.signal)
-            : callback({ signal: controller.signal })
-
-        const p = (hook.promise = Object.assign(promise, state))
-        p.then((value) => {
-          p.state = "fulfilled"
-          p.value = value
-        })
-          .catch((error) => {
-            p.state = "rejected"
-            p.error = error instanceof Error ? error : new Error(error)
-          })
-          .finally(() => {
-            pending.value = false
-          })
-      }
-      return {
-        data: hook.promise,
-        refresh: () => {
-          hook.deps = undefined
-          requestUpdate(vNode)
-        },
-        pending,
-      }
-    }
-  )
-}

package/src/dom.ts

@@ -4,6 +4,7 @@ import {
   propFilters,
   propToHtmlAttr,
   getVNodeAppContext,
+  isPrimitiveChild,
 } from "./utils/index.js"
 import {
   booleanAttributes,
@@ -339,13 +340,36 @@ function subTextNode(vNode: VNode, textNode: Text, signal: Signal<string>) {
   })
 }
 
+function tryHydrateNullableSignalChild(vNode: VNode): MaybeDom {
+  if (vNode.type !== "#text" || !Signal.isSignal(vNode.props.nodeValue)) {
+    return
+  }
+  const value = unwrap(vNode.props.nodeValue)
+  if (!isPrimitiveChild(value)) {
+    if (__DEV__) {
+      console.error(
+        `[kiru]: Hydration mismatch - expected primitive child but received ${value}`
+      )
+    }
+    return
+  }
+  const dom = createTextNode(vNode)
+  const parent = hydrationStack.parent()
+  if (parent) {
+    parent.appendChild(dom)
+  }
+  return dom
+}
+
 function hydrateDom(vNode: VNode) {
-  const dom = hydrationStack.nextChild()
-  if (!dom)
+  const dom = hydrationStack.nextChild() ?? tryHydrateNullableSignalChild(vNode)
+
+  if (!dom) {
     throw new KiruError({
       message: `Hydration mismatch - no node found`,
       vNode,
     })
+  }
   let nodeName = dom.nodeName
   if (!svgTags.has(nodeName)) {
     nodeName = nodeName.toLowerCase()

package/src/hooks/index.ts

@@ -6,6 +6,7 @@ export * from "./useEffectEvent.js"
 export * from "./useId.js"
 export * from "./useLayoutEffect.js"
 export * from "./useMemo.js"
+export * from "./usePromise.js"
 export * from "./useReducer.js"
 export * from "./useRef.js"
 export * from "./useState.js"

package/src/hooks/usePromise.ts

@@ -0,0 +1,121 @@
+import { PREFETCHED_DATA_EVENT } from "../constants.js"
+import { __DEV__ } from "../env.js"
+import { renderMode } from "../globals.js"
+import { requestUpdate } from "../scheduler.js"
+import { Signal, useSignal } from "../signals/base.js"
+import { cleanupHook, depsRequireChange, useHook } from "./utils.js"
+import { useId } from "./useId.js"
+
+export { usePromise }
+export type { UsePromiseCallbackContext, UsePromiseState }
+
+const nodeToPromiseIndex = new WeakMap<Kiru.VNode, number>()
+
+interface UsePromiseCallbackContext {
+  signal: AbortSignal
+}
+
+interface UsePromiseState<T> {
+  data: Kiru.StatefulPromise<T>
+  refresh: () => void
+  pending: Signal<boolean>
+}
+
+function usePromise<T>(
+  callback: (ctx: UsePromiseCallbackContext) => Promise<T>,
+  deps: unknown[]
+): UsePromiseState<T> {
+  const id = useId()
+  const pending = useSignal(true)
+
+  return useHook(
+    "usePromise",
+    {} as {
+      promise: Kiru.StatefulPromise<T>
+      abortController?: AbortController
+      deps?: unknown[]
+    },
+    ({ hook, isInit, vNode }) => {
+      if (isInit || depsRequireChange(deps, hook.deps)) {
+        pending.value = true
+        hook.deps = deps
+        cleanupHook(hook)
+
+        const controller = (hook.abortController = new AbortController())
+        hook.cleanup = () => controller.abort()
+
+        const index = nodeToPromiseIndex.get(vNode) ?? 0
+        nodeToPromiseIndex.set(vNode, index + 1)
+
+        const promiseId = `${id}:data:${index}`
+        const state: Kiru.PromiseState<T> = { id: promiseId, state: "pending" }
+        const promise =
+          renderMode.current === "hydrate"
+            ? resolvePrefetchedPromise<T>(promiseId, controller.signal)
+            : callback({ signal: controller.signal })
+
+        const p = (hook.promise = Object.assign(promise, state))
+        p.then((value) => {
+          p.state = "fulfilled"
+          p.value = value
+        })
+          .catch((error) => {
+            p.state = "rejected"
+            p.error = error instanceof Error ? error : new Error(error)
+          })
+          .finally(() => {
+            pending.value = false
+          })
+      }
+      return {
+        data: hook.promise,
+        refresh: () => {
+          hook.deps = undefined
+          requestUpdate(vNode)
+        },
+        pending,
+      }
+    }
+  )
+}
+
+interface PrefetchedPromiseEventDetail<T> {
+  id: string
+  data?: T
+  error?: string
+}
+
+function resolvePrefetchedPromise<T>(
+  id: string,
+  signal: AbortSignal
+): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const prefetchCache: Map<string, { data?: T; error?: string }> = // @ts-ignore
+      (window[PREFETCHED_DATA_EVENT] ??= new Map())
+
+    const existing = prefetchCache.get(id)
+    if (existing) {
+      const { data, error } = existing
+      prefetchCache.delete(id)
+      if (error) return reject(error)
+      return resolve(data!)
+    }
+
+    const onDataEvent = (event: Event) => {
+      const { detail } = event as CustomEvent<PrefetchedPromiseEventDetail<T>>
+      if (detail.id === id) {
+        prefetchCache.delete(id)
+        window.removeEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
+        const { data, error } = detail
+        if (error) return reject(error)
+        resolve(data!)
+      }
+    }
+
+    window.addEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
+    signal.addEventListener("abort", () => {
+      window.removeEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
+      reject()
+    })
+  })
+}

package/src/recursiveRender.ts

@@ -5,6 +5,7 @@ import {
   propsToElementAttributes,
   isExoticType,
   assertValidElementProps,
+  isPrimitiveChild,
 } from "./utils/index.js"
 import { Signal } from "./signals/base.js"
 import { $ERROR_BOUNDARY, voidElements, $SUSPENSE_THROW } from "./constants.js"
@@ -36,10 +37,21 @@ export function recursiveRender(
     return el.forEach((c, i) => recursiveRender(ctx, c, parent, i))
   }
   if (Signal.isSignal(el)) {
-    return ctx.write(String(el.peek()))
+    const value = el.peek()
+    if (__DEV__) {
+      if (!isPrimitiveChild(value)) {
+        if (__DEV__) {
+          console.error(
+            `[kiru]: expected primitive child but received ${value}`
+          )
+        }
+        return
+      }
+    }
+    return ctx.write(encodeHtmlEntities(String(value)))
   }
   if (!isVNode(el)) {
-    return ctx.write(String(el))
+    return
   }
   el.parent = parent
   el.depth = (parent?.depth ?? -1) + 1

package/src/router/context.ts

@@ -8,6 +8,7 @@ export interface FileRouterContextType {
    * The current router state
    */
   state: RouterState
+
   /**
    * Navigate to a new route, optionally replacing the current route
    * in the history stack or triggering a view transition
@@ -16,10 +17,17 @@ export interface FileRouterContextType {
     path: string,
     options?: { replace?: boolean; transition?: boolean }
   ) => Promise<void>
+
+  /**
+   * Prefetch a route module and its dependencies to be loaded in the background
+   */
+  prefetchRouteModules: (path: string) => void
+
   /**
    * Reload the current route, optionally triggering a view transition
    */
   reload: (options?: { transition?: boolean }) => Promise<void>
+
   /**
    * Set the current query parameters
    */

package/src/router/fileRouter.ts

@@ -30,7 +30,7 @@ export function FileRouter(props: FileRouterProps): JSX.Element {
 
   return createElement(
     RouterContext.Provider,
-    { value: controller.getContextValue() },
+    { value: controller.contextValue },
     controller.getChildren()
   )
 }