kiru 0.50.0-preview.0 → 0.50.0-preview.1

package/src/components/lazy.ts

@@ -1,18 +1,7 @@
 import { createElement } from "../element.js"
 import { __DEV__ } from "../env.js"
-import { KiruError } from "../error.js"
-import { node, renderMode } from "../globals.js"
-import { useContext } from "../hooks/useContext.js"
-import { useRef } from "../hooks/useRef.js"
+import { renderMode } from "../globals.js"
 import { useRequestUpdate } from "../hooks/utils.js"
-import { hydrationStack } from "../hydration.js"
-import { flushSync, nextIdle } from "../scheduler.js"
-import {
-  HYDRATION_BOUNDARY_MARKER,
-  HydrationBoundaryContext,
-} from "../ssr/hydrationBoundary.js"
-import { noop } from "../utils/index.js"
-import type { SomeDom } from "../types.utils"
 
 interface FCModule {
   default: Kiru.FC<any>
@@ -25,7 +14,6 @@ type InferLazyImportProps<T extends LazyImportValue> = T extends FCModule
   : Kiru.InferProps<T>
 
 interface LazyState {
-  fn: string
   promise: Promise<LazyImportValue>
   result: Kiru.FC | null
 }
@@ -40,191 +28,46 @@ const lazyCache: Map<string, LazyState> =
       (window.__KIRU_LAZY_CACHE ??= new Map<string, LazyState>())
     : new Map<string, LazyState>()
 
-function consumeHydrationBoundaryChildren(parentNode: Kiru.VNode): {
-  parent: HTMLElement
-  childNodes: Node[]
-  startIndex: number
-} {
-  const boundaryStart = hydrationStack.currentChild()
-  if (
-    boundaryStart?.nodeType !== Node.COMMENT_NODE ||
-    boundaryStart.nodeValue !== HYDRATION_BOUNDARY_MARKER
-  ) {
-    throw new KiruError({
-      message: "Invalid HydrationBoundary node. This is likely a bug in Kiru.",
-      fatal: true,
-      vNode: parentNode,
-    })
-  }
-  const parent = boundaryStart.parentElement!
-  const childNodes: Node[] = []
-  const isBoundaryEnd = (n: Node) => {
-    return (
-      n.nodeType === Node.COMMENT_NODE &&
-      n.nodeValue === "/" + HYDRATION_BOUNDARY_MARKER
-    )
-  }
-  let n = boundaryStart.nextSibling
-  boundaryStart.remove()
-  const startIndex =
-    hydrationStack.childIdxStack[hydrationStack.childIdxStack.length - 1]
-  while (n && !isBoundaryEnd(n)) {
-    childNodes.push(n)
-    hydrationStack.bumpChildIndex()
-    n = n.nextSibling
-  }
-  const boundaryEnd = hydrationStack.currentChild()
-  if (!isBoundaryEnd(boundaryEnd)) {
-    throw new KiruError({
-      message: "Invalid HydrationBoundary node. This is likely a bug in Kiru.",
-      fatal: true,
-      vNode: parentNode,
-    })
-  }
-  boundaryEnd.remove()
-  return { parent, childNodes, startIndex }
-}
-
 export function lazy<T extends LazyImportValue>(
   componentPromiseFn: () => Promise<T>
 ): Kiru.FC<LazyComponentProps<T>> {
   function LazyComponent(props: LazyComponentProps<T>) {
     const { fallback = null, ...rest } = props
-    const hydrationCtx = useContext(HydrationBoundaryContext, false)
-    const needsHydration = useRef(
-      hydrationCtx && renderMode.current === "hydrate"
-    )
-    const abortHydration = useRef(noop)
     const requestUpdate = useRequestUpdate()
     if (renderMode.current === "string" || renderMode.current === "stream") {
       return fallback
     }
 
-    const fn = componentPromiseFn.toString()
-    const withoutQuery = removeQueryString(fn)
-    const cachedState = lazyCache.get(withoutQuery)
-    if (!cachedState || cachedState.fn !== fn) {
+    const fn = removeQueryString(componentPromiseFn.toString())
+    const cachedState = lazyCache.get(fn)
+
+    if (!cachedState) {
       const promise = componentPromiseFn()
       const state: LazyState = {
-        fn,
         promise,
         result: null,
       }
-      lazyCache.set(withoutQuery, state)
-
-      const ready = promise.then((componentOrModule) => {
+      lazyCache.set(fn, state)
+      promise.then((componentOrModule) => {
         state.result =
           typeof componentOrModule === "function"
             ? componentOrModule
             : componentOrModule.default
+        requestUpdate()
       })
-
-      if (!needsHydration.current) {
-        ready.then(() => requestUpdate())
-        return fallback
-      }
-
-      const thisNode = node.current!
-
-      abortHydration.current = () => {
-        for (const child of childNodes) {
-          if (child instanceof Element) {
-            hydrationStack.resetEvents(child)
-          }
-          child.parentNode?.removeChild(child)
-        }
-        needsHydration.current = false
-        delete thisNode.lastChildDom
-      }
-
-      if (__DEV__) {
-        window.__kiru?.HMRContext?.onHmr(() => {
-          if (needsHydration.current) {
-            abortHydration.current()
-          }
-        })
-      }
-
-      const { parent, childNodes, startIndex } =
-        consumeHydrationBoundaryChildren(thisNode)
-
-      thisNode.lastChildDom = childNodes[childNodes.length - 1] as SomeDom
-
-      for (const child of childNodes) {
-        if (child instanceof Element) {
-          hydrationStack.captureEvents(child)
-        }
-      }
-      const hydrate = () => {
-        if (needsHydration.current === false) return
-
-        nextIdle(() => {
-          delete thisNode.lastChildDom
-          needsHydration.current = false
-          hydrationStack.push(parent)
-          hydrationStack.childIdxStack[
-            hydrationStack.childIdxStack.length - 1
-          ] = startIndex
-          const prev = renderMode.current
-          /**
-           * must call requestUpdate before setting renderMode
-           * to hydrate, otherwise the update will be postponed
-           * and flushSync will have no effect
-           */
-          requestUpdate()
-          renderMode.current = "hydrate"
-          flushSync()
-          renderMode.current = prev
-          for (const child of childNodes) {
-            if (child instanceof Element) {
-              hydrationStack.releaseEvents(child)
-            }
-          }
-        })
-      }
-
-      /**
-       * once the promise resolves, we need to act according
-       * to the HydrationBoundaryContext 'mode'.
-       *
-       * - with 'eager', we just hydrate the children immediately
-       * - with 'lazy', we'll wait for user interaction before hydrating
-       */
-
-      if (hydrationCtx.mode === "eager") {
-        ready.then(hydrate)
-        return null
-      }
-      const interactionEvents = hydrationCtx.events
-      const onInteraction = (e: Event) => {
-        const tgt = e.target
-        if (
-          tgt instanceof Element &&
-          childNodes.some((child) => child.contains(tgt))
-        ) {
-          interactionEvents.forEach((evtName) => {
-            window.removeEventListener(evtName, onInteraction)
-          })
-          ready.then(hydrate)
-        }
-      }
-      interactionEvents.forEach((evtName) => {
-        window.addEventListener(evtName, onInteraction)
-      })
-
-      return null
+      return fallback
     }
 
     if (cachedState.result === null) {
       cachedState.promise.then(requestUpdate)
       return fallback
     }
-    if (needsHydration.current) {
-      abortHydration.current()
+    if (__DEV__) {
+      return createElement(cachedState.result, rest)
     }
     return createElement(cachedState.result, rest)
   }
-  LazyComponent.displayName = "Kiru.lazy"
+  LazyComponent.displayName = "Kaioken.lazy"
   return LazyComponent
 }
 

package/src/components/suspense.ts

@@ -11,7 +11,7 @@ import { getCurrentVNode } from "../utils/index.js"
 import { $SUSPENSE_THROW, PREFETCHED_DATA_EVENT } from "../constants.js"
 import { Signal, useSignal } from "../signals/index.js"
 
-export type { SuspenseProps, UsePromiseState }
+export type { SuspenseProps, UsePromiseCallbackContext, UsePromiseState }
 export { Suspense, isSuspenseThrowValue, usePromise }
 
 type StatefulPromiseValues<T extends readonly Kiru.StatefulPromise<unknown>[]> =
@@ -46,9 +46,7 @@ function Suspense<
     case "stream":
     case "string":
       throw {
-        fallback,
-        pendingData: promiseArray,
-        [$SUSPENSE_THROW]: true,
+        [$SUSPENSE_THROW]: { fallback, pending: promiseArray },
       } satisfies SuspenseThrowValue
 
     case "dom":
@@ -68,9 +66,10 @@ function Suspense<
 }
 
 interface SuspenseThrowValue {
-  fallback?: JSX.Element
-  pendingData?: Kiru.StatefulPromise<unknown>[]
-  [$SUSPENSE_THROW]: true
+  [$SUSPENSE_THROW]: {
+    fallback?: JSX.Element
+    pending: Kiru.StatefulPromise<unknown>[]
+  }
 }
 
 /**
@@ -113,7 +112,6 @@ function resolveHydrationPromise<T>(
       }
     }
 
-    console.log("listening for prefetch event")
     window.addEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
     signal.addEventListener("abort", () => {
       window.removeEventListener(PREFETCHED_DATA_EVENT, onDataEvent)
@@ -124,7 +122,7 @@ function resolveHydrationPromise<T>(
 
 const nodeToPromiseIndex = new WeakMap<Kiru.VNode, number>()
 
-interface UsePromiseContext {
+interface UsePromiseCallbackContext {
   signal: AbortSignal
 }
 
@@ -135,7 +133,7 @@ interface UsePromiseState<T> {
 }
 
 function usePromise<T>(
-  callback: (ctx: UsePromiseContext) => Promise<T>,
+  callback: (ctx: UsePromiseCallbackContext) => Promise<T>,
   deps: unknown[]
 ): UsePromiseState<T> {
   const id = useId()

package/src/constants.ts

@@ -7,7 +7,6 @@ export {
   $HMR_ACCEPT,
   $MEMO,
   $ERROR_BOUNDARY,
-  $HYDRATION_BOUNDARY,
   $SUSPENSE_THROW,
   CONSECUTIVE_DIRTY_LIMIT,
   PREFETCHED_DATA_EVENT,
@@ -31,7 +30,6 @@ const $KIRU_ERROR = Symbol.for("kiru.error")
 const $HMR_ACCEPT = Symbol.for("kiru.hmrAccept")
 const $MEMO = Symbol.for("kiru.memo")
 const $ERROR_BOUNDARY = Symbol.for("kiru.errorBoundary")
-const $HYDRATION_BOUNDARY = Symbol.for("kiru.hydrationBoundary")
 const $SUSPENSE_THROW = Symbol.for("kiru.suspenseThrow")
 
 const CONSECUTIVE_DIRTY_LIMIT = 50

package/src/hmr.ts

@@ -51,6 +51,7 @@ type HotVarRegistrationEntry = {
 export function createHMRContext() {
   type FilePath = string
   const moduleMap = new Map<FilePath, ModuleMemory>()
+  let currentModuleFilePath: string | null = null
   let currentModuleMemory: ModuleMemory | null = null
   let isModuleReplacementExecution = false
   const isReplacement = () => isModuleReplacementExecution
@@ -75,6 +76,7 @@ export function createHMRContext() {
       while (onHmrCallbacks.length) onHmrCallbacks.shift()!()
     }
     currentModuleMemory = mod!
+    currentModuleFilePath = filePath
   }
 
   const register = (
@@ -150,6 +152,9 @@ export function createHMRContext() {
       currentModuleMemory.unnamedWatchers.length = tmpUnnamedWatchers.length
       tmpUnnamedWatchers.length = 0
     }
+
+    currentModuleMemory = null
+    currentModuleFilePath = null
   }
 
   const signals = {
@@ -171,5 +176,8 @@ export function createHMRContext() {
     isReplacement,
     signals,
     onHmr,
+    getCurrentFilePath() {
+      return currentModuleFilePath
+    },
   }
 }

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,148 +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 {
-  $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
-}
+import { recursiveRender, RecursiveRenderContext } from "./recursiveRender.js"
 
 export function renderToString(element: JSX.Element) {
   const prev = renderMode.current
   renderMode.current = "string"
-  const parts: string[] = [""]
-  const ctx: StringRenderContext = {
+  let result = ""
+  const ctx: RecursiveRenderContext = {
     write(chunk) {
-      parts[parts.length - 1] += chunk
-    },
-    beginNewBoundary() {
-      parts.push("")
-      return parts.length - 1
-    },
-    resetBoundary(idx) {
-      parts[idx] = ""
+      result += chunk
     },
   }
-  renderToString_internal(ctx, Fragment({ children: element }), null, 0)
+  recursiveRender(ctx, Fragment({ children: element }), null, 0)
   renderMode.current = prev
-  return parts.join("")
-}
-
-function renderToString_internal(
-  ctx: StringRenderContext,
-  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) => renderToString_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 { type, props = {} } = el
-  if (type === "#text") {
-    return ctx.write(encodeHtmlEntities(props.nodeValue ?? ""))
-  }
-
-  const children = props.children
-  if (isExoticType(type)) {
-    if (type === $HYDRATION_BOUNDARY) {
-      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
-    }
-
-    renderToString_internal(ctx, children, el, idx)
-    return
-  }
-
-  if (typeof type !== "string") {
-    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)
-  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) => renderToString_internal(ctx, c, el, i))
-  } else {
-    renderToString_internal(ctx, children, el, 0)
-  }
-  ctx.write(`</${type}>`)
+  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
+  }
+}