kiru 0.54.0-preview.1 → 0.54.1

package/src/hooks/utils.ts

@@ -3,6 +3,7 @@ import { __DEV__ } from "../env.js"
 import { hookIndex, node } from "../globals.js"
 import { noop } from "../utils/index.js"
 import { requestUpdate } from "../scheduler.js"
+import { isHmrUpdate } from "../hmr.js"
 export {
   cleanupHook,
   depsRequireChange,
@@ -115,17 +116,16 @@ function useHook<
 ): ReturnType<U> {
   const vNode = getVNodeOrError(hookName)
 
-  if (__DEV__) {
-    if (
-      currentHookName !== null &&
-      !nestedHookWarnings.has(hookName + currentHookName)
-    ) {
-      nestedHookWarnings.add(hookName + currentHookName)
-      throw new KiruError({
-        message: `Nested primitive "useHook" calls are not supported. "${hookName}" was called inside "${currentHookName}". Strange will most certainly happen.`,
-        vNode,
-      })
-    }
+  if (
+    __DEV__ &&
+    currentHookName !== null &&
+    !nestedHookWarnings.has(hookName + currentHookName)
+  ) {
+    nestedHookWarnings.add(hookName + currentHookName)
+    throw new KiruError({
+      message: `Nested primitive "useHook" calls are not supported. "${hookName}" was called inside "${currentHookName}". Strange will most certainly happen.`,
+      vNode,
+    })
   }
 
   const queueEffect = (callback: Function, opts?: { immediate?: boolean }) => {
@@ -177,7 +177,7 @@ function useHook<
       const res = (callback as HookCallback<T>)({
         hook,
         isInit: !oldHook,
-        isHMR: vNode.hmrUpdated,
+        isHMR: isHmrUpdate(),
         update: () => requestUpdate(vNode),
         queueEffect,
         vNode,

package/src/hydration.ts

@@ -1,67 +1,31 @@
 import type { MaybeDom, SomeDom } from "./types.utils"
 
+const parents: SomeDom[] = []
+const childIdx: number[] = []
+
 export const hydrationStack = {
-  parentStack: [] as Array<SomeDom>,
-  childIdxStack: [] as Array<number>,
-  eventDeferrals: new Map<Element, Array<() => void>>(),
-  parent: function () {
-    return this.parentStack[this.parentStack.length - 1]
-  },
-  clear: function () {
-    this.parentStack.length = 0
-    this.childIdxStack.length = 0
-  },
-  pop: function () {
-    this.parentStack.pop()
-    this.childIdxStack.pop()
-  },
-  push: function (el: SomeDom) {
-    this.parentStack.push(el)
-    this.childIdxStack.push(0)
+  bumpChildIndex() {
+    childIdx[childIdx.length - 1]++
   },
-  currentChild: function () {
-    return this.parentStack[this.parentStack.length - 1].childNodes[
-      this.childIdxStack[this.childIdxStack.length - 1]
-    ]
+  getCurrentChild(): MaybeDom {
+    const idx = childIdx[childIdx.length - 1]
+    // @ts-expect-error TODO: We're ignoring the possibility of encountering comment or cdata nodes.
+    // Not really a problem for now since we don't render those but should be checked anyway.
+    return this.getCurrentParent().childNodes[idx]
   },
-  nextChild: function () {
-    return this.parentStack[this.parentStack.length - 1].childNodes[
-      this.childIdxStack[this.childIdxStack.length - 1]++
-    ] as MaybeDom
+  getCurrentParent() {
+    return parents[parents.length - 1]
   },
-  bumpChildIndex: function () {
-    this.childIdxStack[this.childIdxStack.length - 1]++
+  clear() {
+    parents.length = 0
+    childIdx.length = 0
   },
-  captureEvents: function (element: Element) {
-    toggleEvtListeners(element, true)
-    this.eventDeferrals.set(element, [])
+  pop() {
+    parents.pop()
+    childIdx.pop()
   },
-  resetEvents: function (element: Element) {
-    this.eventDeferrals.delete(element)
+  push(el: SomeDom) {
+    parents.push(el)
+    childIdx.push(0)
   },
-  releaseEvents: function (element: Element) {
-    toggleEvtListeners(element, false)
-    const events = this.eventDeferrals.get(element)
-    while (events?.length) events.shift()!()
-  },
-}
-
-const captureEvent = (e: Event) => {
-  const t = e.target
-  if (!e.isTrusted || !t) return
-  hydrationStack.eventDeferrals
-    .get(t as Element)
-    ?.push(() => t.dispatchEvent(e))
-}
-const toggleEvtListeners = (element: Element, value: boolean) => {
-  for (const key in element) {
-    if (key.startsWith("on")) {
-      const eventType = key.substring(2)
-      element[value ? "addEventListener" : "removeEventListener"](
-        eventType,
-        captureEvent,
-        { passive: true }
-      )
-    }
-  }
 }

package/src/index.ts

@@ -16,5 +16,5 @@ export * from "./store.js"
 
 // @ts-ignore
 if ("window" in globalThis && !globalThis.__KIRU_DEVTOOLS__) {
-  window.__kiru ??= createKiruGlobalContext()
+  globalThis.window.__kiru ??= createKiruGlobalContext()
 }

package/src/reconciler.ts

@@ -1,6 +1,5 @@
 import {
   $FRAGMENT,
-  $MEMO,
   FLAG_MEMO,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
@@ -221,10 +220,8 @@ function updateTextNode(
 
 function updateNode(parent: VNode, oldChild: VNode | null, newChild: KElement) {
   let { type, props, key } = newChild
-  if (__DEV__) {
-    if (typeof type === "function") {
-      type = latest(type)
-    }
+  if (__DEV__ && typeof type === "function") {
+    type = latest(type)
   }
   if (type === $FRAGMENT) {
     return updateFragment(
@@ -499,7 +496,6 @@ function createVNode(
 
   if (typeof type === "function" && isMemoFn(type)) {
     node.flags |= FLAG_MEMO
-    node.arePropsEqual = type[$MEMO].arePropsEqual
   }
 
   if (__DEV__ && "window" in globalThis) {

package/src/recursiveRender.ts

@@ -6,6 +6,7 @@ import {
   isExoticType,
   assertValidElementProps,
   isPrimitiveChild,
+  isValidTextChild,
 } from "./utils/index.js"
 import { isStreamDataThrowValue } from "./utils/promise.js"
 import { Signal } from "./signals/base.js"
@@ -40,17 +41,17 @@ function render(
   }
   if (Signal.isSignal(el)) {
     const value = el.peek()
-    if (__DEV__) {
-      if (!isPrimitiveChild(value)) {
-        if (__DEV__) {
-          console.error(
-            `[kiru]: expected primitive child but received ${value}`
-          )
-        }
-        return
+    if (!isPrimitiveChild(value)) {
+      if (__DEV__) {
+        console.error(`[kiru]: expected primitive child but received ${value}`)
       }
+      return
     }
-    return ctx.write(encodeHtmlEntities(String(value)))
+
+    if (isValidTextChild(value)) {
+      ctx.write(encodeHtmlEntities(String(value)))
+    }
+    return
   }
   if (!isVNode(el)) {
     return

package/src/renderToString.ts

@@ -1,6 +1,5 @@
 import { renderMode } from "./globals.js"
 import { Fragment } from "./element.js"
-import { __DEV__ } from "./env.js"
 import { headlessRender, HeadlessRenderContext } from "./recursiveRender.js"
 
 export function renderToString(element: JSX.Element) {

package/src/router/client/index.ts

@@ -1,91 +1,45 @@
+// initClient({ dir, baseUrl, pages, layouts })
+
 import { createElement } from "../../element.js"
 import { hydrate } from "../../ssr/client.js"
 import { FileRouter } from "../fileRouter.js"
-import { toArray } from "../../utils/format.js"
-import { resolveStreamedPromise } from "../../utils/promise.js"
 import {
-  matchModules,
+  matchLayouts,
   matchRoute,
   match404Route,
   parseQuery,
-  runBeforeEachGuards,
-  runAfterEachGuards,
-  runBeforeEnterHooks,
 } from "../utils/index.js"
-import type {
-  FormattedViteImportMap,
-  GuardModule,
-  PageModule,
-} from "../types.internal"
+import type { FormattedViteImportMap, PageModule } from "../types.internal"
 import type { FileRouterConfig, FileRouterPreloadConfig } from "../types"
-import {
-  fileRouterInstance,
-  fileRouterRoute,
-  requestContext,
-  routerCache,
-} from "../globals.js"
+import { fileRouterInstance, fileRouterRoute, routerCache } from "../globals.js"
 import { FileRouterController } from "../fileRouterController.js"
 import { FileRouterDataLoadError } from "../errors.js"
 import { __DEV__ } from "../../env.js"
 import { RouterCache } from "../cache.js"
-import { RequestContext } from "../context.js"
-import { PAGE_DATA_PROMISE_ID } from "../constants.js"
-import { AsyncTaskState } from "../../types.js"
 
 interface InitClientOptions {
   dir: string
   baseUrl: string
-  pages: FormattedViteImportMap<PageModule>
+  pages: FormattedViteImportMap
   layouts: FormattedViteImportMap
-  guards?: FormattedViteImportMap<GuardModule>
   transition: boolean
-  hydrationMode?: Kiru.HydrationMode
 }
 
 export async function initClient(options: InitClientOptions) {
   routerCache.current = new RouterCache()
-  const {
-    dir,
-    baseUrl,
-    pages,
-    layouts,
-    guards,
-    transition,
-    hydrationMode = "static",
-  } = options
+  const { dir, baseUrl, pages, layouts, transition } = options
 
-  try {
-    requestContext.current = JSON.parse(
-      document.querySelector("[k-request-context]")!.innerHTML
-    )
-  } catch {}
-
-  const preloaded = await preparePreloadConfig(
-    options,
-    false,
-    hydrationMode === "dynamic"
-  )
   const config: FileRouterConfig = {
     dir,
     baseUrl,
     pages,
     layouts,
-    guards,
     transition,
-    preloaded,
+    preloaded: await preparePreloadConfig(options),
   }
 
-  const children = createElement(FileRouter, { config })
-
-  const app =
-    hydrationMode === "static"
-      ? children
-      : createElement(RequestContext.Provider, {
-          value: requestContext.current,
-          children,
-        })
-
-  hydrate(app, document.body, { hydrationMode })
+  const app = createElement(FileRouter, { config })
+  hydrate(app, document.body, { hydrationMode: "static" })
 
   if (__DEV__) {
     onLoadedDev()
@@ -94,8 +48,7 @@ export async function initClient(options: InitClientOptions) {
 
 async function preparePreloadConfig(
   options: InitClientOptions,
-  isStatic404 = false,
-  isSSR = false
+  isStatic404 = false
 ): Promise<FileRouterPreloadConfig> {
   let pageProps = {}
   let cacheData: null | { value: unknown } = null
@@ -115,25 +68,7 @@ async function preparePreloadConfig(
     throw new Error(`No route defined (path: ${url.pathname}).`)
   }
 
-  const layoutEntries = matchModules(options.layouts, routeMatch.routeSegments)
-
-  // Load and run guards before loading page
-  // if SSR, do we even need to do this?
-  let guardModules: GuardModule[] = []
-  if (options.guards) {
-    const guardEntries = matchModules(options.guards, routeMatch.routeSegments)
-    guardModules = await Promise.all(guardEntries.map((entry) => entry.load()))
-
-    const redirectPath = await runBeforeEachGuards(
-      guardModules,
-      { ...requestContext.current },
-      url.pathname
-    )
-    if (redirectPath !== null) {
-      window.location.href = redirectPath
-    }
-  }
-
+  const layoutEntries = matchLayouts(options.layouts, routeMatch.routeSegments)
   fileRouterInstance.current = new FileRouterController()
   fileRouterRoute.current = routeMatch.route
   const [page, ...layouts] = await Promise.all([
@@ -142,26 +77,6 @@ async function preparePreloadConfig(
   ])
   fileRouterRoute.current = null
 
-  const onBeforeEnter = page.config?.hooks?.onBeforeEnter
-  if (onBeforeEnter) {
-    const redirectPath = await runBeforeEnterHooks(
-      toArray(onBeforeEnter),
-      { ...requestContext.current },
-      url.pathname
-    )
-    if (redirectPath !== null) {
-      window.location.href = redirectPath
-      // @ts-ignore
-      return
-    }
-  }
-
-  const query = parseQuery(window.location.search)
-
-  let pagePropsPromise:
-    | Promise<AsyncTaskState<unknown, FileRouterDataLoadError>>
-    | undefined
-
   // Check if page has static props pre-loaded at build time
   if (page.__KIRU_STATIC_PROPS__) {
     const staticProps = page.__KIRU_STATIC_PROPS__[window.location.pathname]
@@ -180,39 +95,26 @@ async function preparePreloadConfig(
     pageProps = { loading: true, data: null, error: null }
 
     const loader = page.config.loader
-    if (isSSR) {
-      pagePropsPromise = resolveStreamedPromise(PAGE_DATA_PROMISE_ID)
-        .then((data) => ({ data, error: null, loading: false } as const))
-        .catch((error) => ({ data: null, error, loading: false } as const))
-    } else if (!loader.static && loader.cache) {
+    // Check cache first if caching is enabled
+    if (loader.mode !== "static" && loader.cache) {
       const cacheKey = {
         path: window.location.pathname,
         params: routeMatch.params,
-        query,
+        query: parseQuery(url.search),
       }
 
       cacheData = routerCache.current!.get(cacheKey, loader.cache)
     }
   }
 
-  window.__kiru.on("mount", () => {
-    runAfterEachGuards(
-      guardModules,
-      { ...requestContext.current },
-      url.pathname
-    )
-  })
-
   return {
     pages: options.pages,
     layouts: options.layouts,
-    guards: options.guards,
     page: page,
     pageProps: pageProps,
-    pagePropsPromise,
     pageLayouts: layouts,
     params: routeMatch.params,
-    query: query,
+    query: parseQuery(url.search),
     route: routeMatch.route,
     cacheData,
   }

package/src/router/context.ts

@@ -1,6 +1,6 @@
-import { useContext } from "../hooks/index.js"
 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 ReloadOptions {
@@ -17,6 +17,11 @@ export interface ReloadOptions {
 }
 
 export interface FileRouterContextType {
+  /**
+   * The base URL of the router
+   * @default "/"
+   */
+  baseUrl: string
   /**
    * Invalidate cached loader data for the given paths
    * @example
@@ -74,9 +79,3 @@ if (__DEV__) {
 export function useFileRouter(): FileRouterContextType {
   return useContext(RouterContext)
 }
-
-export const RequestContext = createContext<Kiru.RequestContext>({})
-
-export function useRequestContext() {
-  return useContext(RequestContext)
-}

package/src/router/fileRouter.ts

@@ -26,12 +26,8 @@ export interface FileRouterProps {
 
 export function FileRouter({ config }: FileRouterProps): JSX.Element {
   const [controller] = useState(() => {
-    if (fileRouterInstance.current && !config.preloaded) {
-      throw new Error(
-        "[kiru/router]: FileRouter cannot be instantiated more than once at a time."
-      )
-    }
-    const router = (fileRouterInstance.current ??= new FileRouterController())
+    fileRouterInstance.current?.dispose()
+    const router = (fileRouterInstance.current = new FileRouterController())
     router.init(config)
     return router
   })