kiru 0.54.0-preview.0 → 0.54.0

package/src/router/utils/index.ts

@@ -1,27 +1,19 @@
 import { createElement } from "../../element.js"
 import { __DEV__ } from "../../env.js"
-import { resolveNavguard } from "../guard.js"
 import type {
-  DefaultComponentModule,
   FormattedViteImportMap,
-  GuardModule,
   RouteMatch,
   ViteImportMap,
 } from "../types.internal"
-import { OnBeforeEnterHook, OnBeforeLeaveHook } from "../types.js"
 
 export {
   formatViteImportMap,
   matchRoute,
   match404Route,
-  matchModules,
+  matchLayouts,
   normalizePrefixPath,
   parseQuery,
   wrapWithLayouts,
-  runBeforeLeaveHooks,
-  runBeforeEnterHooks,
-  runBeforeEachGuards,
-  runAfterEachGuards,
 }
 
 function formatViteImportMap(
@@ -41,7 +33,7 @@ function formatViteImportMap(
     }
 
     let specificity = 0
-    let k = key.slice(dirIndex + dir.length)
+    let k = baseUrl + key.slice(dirIndex + dir.length)
     while (k.startsWith("/")) {
       k = k.slice(1)
     }
@@ -95,7 +87,7 @@ function formatViteImportMap(
 
     return {
       ...acc,
-      [baseUrl + segments.join("/")]: value,
+      [segments.join("/")]: value,
     }
   }, {})
 }
@@ -185,20 +177,23 @@ function match404Route(
   return null
 }
 
-function matchModules<T = DefaultComponentModule>(
-  modules: FormattedViteImportMap<T>,
+function matchLayouts(
+  layouts: FormattedViteImportMap,
   routeSegments: string[]
 ) {
-  return ["/", ...routeSegments].reduce((acc, _, i) => {
-    const modulePath = "/" + routeSegments.slice(0, i).join("/")
-    const module = modules[modulePath]
+  return ["/", ...routeSegments].reduce(
+    (acc, _, i) => {
+      const layoutPath = routeSegments.slice(0, i).join("/")
+      const layout = layouts[layoutPath]
 
-    if (!module) {
-      return acc
-    }
+      if (!layout) {
+        return acc
+      }
 
-    return [...acc, module]
-  }, [] as FormattedViteImportMap<T>[string][])
+      return [...acc, layout]
+    },
+    [] as FormattedViteImportMap[string][]
+  )
 }
 
 function normalizePrefixPath(path: string) {
@@ -247,61 +242,3 @@ function wrapWithLayouts(
     createElement(page, props)
   )
 }
-
-function runBeforeLeaveHooks(
-  hooks: OnBeforeLeaveHook[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-): false | void {
-  for (const hook of hooks) {
-    const res = hook(context, to, from)
-    if (res === false) {
-      return false
-    }
-  }
-}
-
-async function runBeforeEnterHooks(
-  hooks: OnBeforeEnterHook[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-) {
-  for (const hook of hooks) {
-    const result = await hook(context, to, from)
-    if (typeof result === "string") {
-      return result
-    }
-  }
-
-  return null
-}
-
-async function runBeforeEachGuards(
-  guardModules: GuardModule[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-): Promise<string | null> {
-  const beforeHooks = guardModules
-    .map((guardModule) => resolveNavguard(guardModule)?.beforeEach)
-    .filter((x) => typeof x === "function")
-
-  return runBeforeEnterHooks(beforeHooks, context, to, from)
-}
-
-async function runAfterEachGuards(
-  guardModules: GuardModule[],
-  context: Kiru.RequestContext,
-  to: string,
-  from: string = to
-): Promise<void> {
-  const afterHooks = guardModules
-    .map((guardModule) => resolveNavguard(guardModule)?.afterEach)
-    .filter((x) => typeof x === "function")
-
-  for (const hook of afterHooks) {
-    await hook(context, to, from)
-  }
-}

package/src/scheduler.ts

@@ -7,6 +7,7 @@ import type {
 import {
   $CONTEXT_PROVIDER,
   $ERROR_BOUNDARY,
+  $MEMO,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
   FLAG_DIRTY,
@@ -33,8 +34,11 @@ import {
   isExoticType,
   getVNodeAppContext,
   findParentErrorBoundary,
+  call,
 } from "./utils/index.js"
 import type { AppContext } from "./appContext"
+import type { MemoFn } from "./components/memo"
+import { isHmrUpdate } from "./hmr.js"
 
 type VNode = Kiru.VNode
 
@@ -55,7 +59,7 @@ let animationFrameHandle = -1
  * Runs a function after any existing work has been completed,
  * or immediately if the scheduler is already idle.
  */
-export function nextIdle(fn: () => void) {
+export function nextIdle(fn: () => void): void {
   if (isRunningOrQueued) {
     nextIdleEffects.push(fn)
     return
@@ -66,13 +70,13 @@ export function nextIdle(fn: () => void) {
 /**
  * Syncronously flushes any pending work.
  */
-export function flushSync() {
+export function flushSync(): void {
   if (!isRunningOrQueued) return
   window.cancelAnimationFrame(animationFrameHandle)
   doWork()
 }
 
-export function renderRootSync(rootNode: VNode) {
+export function renderRootSync(rootNode: VNode): void {
   rootNode.flags |= FLAG_DIRTY
   treesInProgress.push(rootNode)
 
@@ -90,20 +94,20 @@ export function requestUpdate(vNode: VNode): void {
   queueUpdate(vNode)
 }
 
-function queueBeginWork() {
+function queueBeginWork(): void {
   if (isRunningOrQueued) return
   isRunningOrQueued = true
   animationFrameHandle = window.requestAnimationFrame(doWork)
 }
 
-function onWorkFinished() {
+function onWorkFinished(): void {
   isRunningOrQueued = false
   while (nextIdleEffects.length) {
     nextIdleEffects.shift()!()
   }
 }
 
-function queueUpdate(vNode: VNode) {
+function queueUpdate(vNode: VNode): void {
   // In immediate effect mode (useLayoutEffect), immediately mark the render as dirty
   if (isImmediateEffectsMode) {
     immediateEffectDirtiedRender = true
@@ -129,12 +133,12 @@ function queueUpdate(vNode: VNode) {
   treesInProgress.push(vNode)
 }
 
-function queueDelete(vNode: VNode) {
+function queueDelete(vNode: VNode): void {
   traverseApply(vNode, (n) => (n.flags |= FLAG_DELETION))
   deletions.push(vNode)
 }
 
-const depthSort = (a: VNode, b: VNode) => b.depth - a.depth
+const depthSort = (a: VNode, b: VNode): number => b.depth - a.depth
 
 let currentWorkRoot: VNode | null = null
 
@@ -163,7 +167,7 @@ function doWork(): void {
     const flags = currentWorkRoot.flags
     if (flags & FLAG_DELETION) continue
     if (flags & FLAG_DIRTY) {
-      let n: VNode | void = currentWorkRoot
+      let n: VNode | null = currentWorkRoot
       while ((n = performUnitOfWork(n))) {}
 
       while (deletions.length) {
@@ -194,7 +198,7 @@ function doWork(): void {
   consecutiveDirtyCount = 0
 
   onWorkFinished()
-  flushEffects(postEffects)
+  queueMicrotask(() => flushEffects(postEffects))
   if (__DEV__) {
     window.__kiru.emit("update", appCtx!)
     window.__kiru.profilingContext?.emit("update", appCtx!)
@@ -202,15 +206,57 @@ function doWork(): void {
   }
 }
 
-function performUnitOfWork(vNode: VNode): VNode | void {
-  let renderChild = true
+function performUnitOfWork(vNode: VNode): VNode | null {
+  const next = updateVNode(vNode)
+
+  if (vNode.deletions !== null) {
+    vNode.deletions.forEach(queueDelete)
+    vNode.deletions = null
+  }
+
+  if (next) {
+    return next
+  }
+
+  let nextNode: VNode | null = vNode
+  while (nextNode) {
+    // queue effects upon ascent
+    if (nextNode.immediateEffects) {
+      preEffects.push(...nextNode.immediateEffects)
+      nextNode.immediateEffects = undefined
+    }
+    if (nextNode.effects) {
+      postEffects.push(...nextNode.effects)
+      nextNode.effects = undefined
+    }
+
+    if (nextNode === currentWorkRoot) return null
+    if (nextNode.sibling) {
+      return nextNode.sibling
+    }
+
+    nextNode = nextNode.parent
+    if (renderMode.current === "hydrate" && nextNode?.dom) {
+      hydrationStack.pop()
+    }
+  }
+
+  return null
+}
+
+function updateVNode(vNode: VNode): VNode | null {
+  const { type, props, prev, flags } = vNode
+  if (__DEV__ && isHmrUpdate()) {
+  } else if ((flags & FLAG_DIRTY) === 0 && props === prev?.props) {
+    return null
+  }
   try {
-    if (typeof vNode.type === "string") {
-      updateHostComponent(vNode as DomVNode)
-    } else if (isExoticType(vNode.type)) {
-      updateExoticComponent(vNode)
+    if (typeof type === "string") {
+      return updateHostComponent(vNode as DomVNode)
+    } else if (isExoticType(type)) {
+      return updateExoticComponent(vNode)
     } else {
-      renderChild = updateFunctionComponent(vNode as FunctionVNode)
+      return updateFunctionComponent(vNode as FunctionVNode)
     }
   } catch (error) {
     if (__DEV__) {
@@ -243,47 +289,16 @@ function performUnitOfWork(vNode: VNode): VNode | void {
         throw error
       }
       console.error(error)
-      return
+      return vNode.child
     }
     setTimeout(() => {
       throw error
     })
   }
-
-  if (vNode.deletions !== null) {
-    vNode.deletions.forEach(queueDelete)
-    vNode.deletions = null
-  }
-
-  if (renderChild && vNode.child) {
-    return vNode.child
-  }
-
-  let nextNode: VNode | null = vNode
-  while (nextNode) {
-    // queue effects upon ascent
-    if (nextNode.immediateEffects) {
-      preEffects.push(...nextNode.immediateEffects)
-      nextNode.immediateEffects = undefined
-    }
-    if (nextNode.effects) {
-      postEffects.push(...nextNode.effects)
-      nextNode.effects = undefined
-    }
-
-    if (nextNode === currentWorkRoot) return
-    if (nextNode.sibling) {
-      return nextNode.sibling
-    }
-
-    nextNode = nextNode.parent
-    if (renderMode.current === "hydrate" && nextNode?.dom) {
-      hydrationStack.pop()
-    }
-  }
+  return null
 }
 
-function updateExoticComponent(vNode: VNode) {
+function updateExoticComponent(vNode: VNode): VNode | null {
   const { props, type } = vNode
   let children = props.children
 
@@ -309,20 +324,19 @@ function updateExoticComponent(vNode: VNode) {
     }
   }
 
-  vNode.child = reconcileChildren(vNode, children)
+  return (vNode.child = reconcileChildren(vNode, children))
 }
 
-function updateFunctionComponent(vNode: FunctionVNode) {
+function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
   const { type, props, subs, prev, flags } = vNode
   if (flags & FLAG_MEMO) {
-    vNode.memoizedProps = props
     if (
-      prev?.memoizedProps &&
-      vNode.arePropsEqual!(prev.memoizedProps, props) &&
-      !vNode.hmrUpdated
+      prev &&
+      (type as MemoFn)[$MEMO](prev.props, props) &&
+      !(__DEV__ && isHmrUpdate())
     ) {
       vNode.flags |= FLAG_NOOP
-      return false
+      return null
     }
     vNode.flags &= ~FLAG_NOOP
   }
@@ -345,14 +359,14 @@ function updateFunctionComponent(vNode: FunctionVNode) {
        * and not clearing the entire set.
        */
       if (subs) {
-        subs.forEach((unsub) => unsub())
+        subs.forEach(call)
         subs.clear()
       }
 
       if (__DEV__) {
         newChild = latest(type)(props)
 
-        if (vNode.hmrUpdated && vNode.hooks && vNode.hookSig) {
+        if (isHmrUpdate() && vNode.hooks && vNode.hookSig) {
           const len = vNode.hooks.length
           if (hookIndex.current < len) {
             // clean up any hooks that were removed
@@ -365,7 +379,6 @@ function updateFunctionComponent(vNode: FunctionVNode) {
           }
         }
 
-        delete vNode.hmrUpdated
         if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
           throw new KiruError({
             message:
@@ -378,14 +391,14 @@ function updateFunctionComponent(vNode: FunctionVNode) {
       }
       newChild = type(props)
     } while (isRenderDirtied)
-    vNode.child = reconcileChildren(vNode, newChild)
-    return true
+
+    return (vNode.child = reconcileChildren(vNode, newChild))
   } finally {
     node.current = null
   }
 }
 
-function updateHostComponent(vNode: DomVNode) {
+function updateHostComponent(vNode: DomVNode): VNode | null {
   const { props, type } = vNode
   if (__DEV__) {
     assertValidElementProps(vNode)
@@ -396,10 +409,8 @@ function updateHostComponent(vNode: DomVNode) {
     } else {
       vNode.dom = createDom(vNode)
     }
-    if (__DEV__) {
-      if (vNode.dom instanceof Element) {
-        vNode.dom.__kiruNode = vNode
-      }
+    if (__DEV__ && vNode.dom instanceof Element) {
+      vNode.dom.__kiruNode = vNode
     }
   }
   // text should _never_ have children
@@ -409,9 +420,11 @@ function updateHostComponent(vNode: DomVNode) {
       hydrationStack.push(vNode.dom!)
     }
   }
+
+  return vNode.child
 }
 
-function checkForTooManyConsecutiveDirtyRenders() {
+function checkForTooManyConsecutiveDirtyRenders(): void {
   if (consecutiveDirtyCount > CONSECUTIVE_DIRTY_LIMIT) {
     throw new KiruError(
       "Maximum update depth exceeded. This can happen when a component repeatedly calls setState during render or in useLayoutEffect. Kiru limits the number of nested updates to prevent infinite loops."
@@ -419,7 +432,7 @@ function checkForTooManyConsecutiveDirtyRenders() {
   }
 }
 
-function flushEffects(effectArr: Function[]) {
+function flushEffects(effectArr: Function[]): void {
   for (let i = 0; i < effectArr.length; i++) {
     effectArr[i]()
   }

package/src/signals/base.ts

@@ -17,7 +17,6 @@ export class Signal<T> {
   [$SIGNAL] = true;
   [$HMR_ACCEPT]?: HMRAccept<Signal<any>>
   displayName?: string
-  private onBeforeRead?: () => void
   protected $subs?: Set<SignalSubscriber<any>>
   protected $id: string
   protected $value: T
@@ -60,7 +59,6 @@ export class Signal<T> {
   }
 
   get value() {
-    this.onBeforeRead?.()
     if (__DEV__) {
       const tgt = latest(this)
       Signal.entangle(tgt)
@@ -86,7 +84,6 @@ export class Signal<T> {
   }
 
   peek() {
-    this.onBeforeRead?.()
     if (__DEV__) {
       return latest(this).$value
     }
@@ -105,7 +102,6 @@ export class Signal<T> {
   }
 
   toString() {
-    this.onBeforeRead?.()
     if (__DEV__) {
       const tgt = latest(this)
       Signal.entangle(tgt)
@@ -192,10 +188,6 @@ export class Signal<T> {
     ;(vNode.subs ??= new Set()).add(unsub)
   }
 
-  static configure(signal: Signal<any>, onBeforeRead?: () => void) {
-    signal.onBeforeRead = onBeforeRead
-  }
-
   static dispose(signal: Signal<any>) {
     signal.$isDisposed = true
     if (__DEV__) {

package/src/signals/computed.ts

@@ -1,7 +1,7 @@
 import { __DEV__ } from "../env.js"
 import { $HMR_ACCEPT } from "../constants.js"
 import { depsRequireChange, useHook } from "../hooks/utils.js"
-import { latest } from "../utils/index.js"
+import { call, latest } from "../utils/index.js"
 import { effectQueue, signalSubsMap } from "./globals.js"
 import { executeWithTracking } from "./effect.js"
 import { Signal } from "./base.js"
@@ -32,28 +32,23 @@ export class ComputedSignal<T> extends Signal<T> {
         destroy: () => {},
       } satisfies HMRAccept<ComputedSignal<T>>
     }
-    Signal.configure(this, () => {
-      if (!this.$isDirty) return
-      if (__DEV__) {
-        /**
-         * This is a safeguard for dev-mode only, where a 'read' on an
-         * already-disposed signal during HMR update => `dom.setSignalProp`
-         * would throw due to invalid subs-map access.
-         *
-         * Perhaps in future we could handle this better by carrying over
-         * the previous signal's ID and not disposing it / deleting the
-         * map entry.
-         */
-        if (this.$isDisposed) return
-      }
-      ComputedSignal.run(this)
-    })
   }
 
   get value() {
+    this.ensureNotDirty()
     return super.value
   }
 
+  toString() {
+    this.ensureNotDirty()
+    return super.toString()
+  }
+
+  peek() {
+    this.ensureNotDirty()
+    return super.peek()
+  }
+
   // @ts-expect-error
   set value(next: T) {}
 
@@ -83,7 +78,7 @@ export class ComputedSignal<T> extends Signal<T> {
     const { $id, $unsubs } = latest(computed)
 
     effectQueue.delete($id)
-    $unsubs.forEach((unsub) => unsub())
+    $unsubs.forEach(call)
     $unsubs.clear()
     computed.$isDirty = true
   }
@@ -111,6 +106,23 @@ export class ComputedSignal<T> extends Signal<T> {
     $computed.sneak(value)
     $computed.$isDirty = false
   }
+
+  private ensureNotDirty() {
+    if (!this.$isDirty) return
+    if (__DEV__) {
+      /**
+       * This is a safeguard for dev-mode only, where a 'read' on an
+       * already-disposed signal during HMR update => `dom.setSignalProp`
+       * would throw due to invalid subs-map access.
+       *
+       * Perhaps in future we could handle this better by carrying over
+       * the previous signal's ID and not disposing it / deleting the
+       * map entry.
+       */
+      if (this.$isDisposed) return
+    }
+    ComputedSignal.run(this)
+  }
 }
 
 export function computed<T>(

package/src/signals/for.ts

@@ -1,25 +1,30 @@
 import type { Signal } from "./base.js"
+import { unwrap } from "./utils.js"
 
-type InferArraySignalItemType<T extends Signal<any[]>> = T extends Signal<
-  infer V
->
-  ? V extends Array<infer W>
-    ? W
-    : never
-  : never
+type InferArraySignalItemType<T extends Signal<any[]> | readonly unknown[]> =
+  T extends Signal<infer V>
+    ? V extends Array<infer W>
+      ? W
+      : never
+    : T extends unknown[]
+      ? T[number]
+      : never
 
-type ForProps<T extends Signal<any[]>, U = InferArraySignalItemType<T>> = {
+type ForProps<
+  T extends Signal<any[]> | readonly unknown[],
+  U = InferArraySignalItemType<T>,
+> = {
   each: T
   fallback?: JSX.Element
   children: (value: U, index: number, array: U[]) => JSX.Element
 }
 
-export function For<T extends Signal<any[]>>({
+export function For<T extends Signal<any[]> | unknown[]>({
   each,
   fallback,
   children,
 }: ForProps<T>) {
-  const items = each.value
+  const items = unwrap(each, true)
   if (items.length === 0) return fallback
   return items.map(children)
 }

package/src/signals/utils.ts

@@ -1,3 +1,4 @@
+import { call } from "../utils/index.js"
 import { Signal } from "./base.js"
 import { effectQueue } from "./globals.js"
 
@@ -7,6 +8,6 @@ export function unwrap<T>(value: T | Signal<T>, reactive = false): T {
 }
 
 export const tick = () => {
-  effectQueue.forEach((fn) => fn())
+  effectQueue.forEach(call)
   effectQueue.clear()
 }