kiru 0.46.1 → 0.47.1

package/src/scheduler.ts

@@ -7,6 +7,7 @@ import {
   $CONTEXT_PROVIDER,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
+  FLAG_MEMO,
 } from "./constants.js"
 import { commitDeletion, commitWork, createDom, hydrateDom } from "./dom.js"
 import { __DEV__ } from "./env.js"
@@ -31,7 +32,7 @@ let appCtx: AppContext | null
 let nextUnitOfWork: VNode | null = null
 let treesInProgress: VNode[] = []
 let currentTreeIndex = 0
-let isRunning = false
+let isRunningOrQueued = false
 let nextIdleEffects: (() => void)[] = []
 let deletions: VNode[] = []
 let isImmediateEffectsMode = false
@@ -41,20 +42,27 @@ let consecutiveDirtyCount = 0
 let pendingContextChanges = new Set<ContextProviderNode<any>>()
 let preEffects: Array<Function> = []
 let postEffects: Array<Function> = []
+let animationFrameHandle = -1
 
 /**
- * Runs a function after any existing work has been completed, or if the scheduler is already idle.
+ * Runs a function after any existing work has been completed,
+ * or immediately if the scheduler is already idle.
  */
-export function nextIdle(fn: () => void, wakeUpIfIdle = true) {
-  nextIdleEffects.push(fn)
-  if (wakeUpIfIdle) wake()
+export function nextIdle(fn: () => void) {
+  if (isRunningOrQueued) {
+    nextIdleEffects.push(fn)
+    return
+  }
+  fn()
 }
 
 /**
  * Syncronously flushes any pending work.
  */
 export function flushSync() {
-  workLoop()
+  if (!isRunningOrQueued) return
+  window.cancelAnimationFrame(animationFrameHandle)
+  doWork()
 }
 
 /**
@@ -65,33 +73,22 @@ export function requestUpdate(vNode: VNode): void {
   if (renderMode.current === "hydrate") {
     return nextIdle(() => {
       vNode.flags & FLAG_DELETION || queueUpdate(vNode)
-    }, false)
+    })
   }
   queueUpdate(vNode)
 }
 
-export function requestDelete(vNode: VNode): void {
-  if (vNode.flags & FLAG_DELETION) return
-  if (renderMode.current === "hydrate") {
-    return nextIdle(() => {
-      vNode.flags & FLAG_DELETION || queueDelete(vNode)
-    }, false)
-  }
-  queueDelete(vNode)
-}
-
-function queueWorkLoop() {
-  queueMicrotask(workLoop)
-}
-
-function wake() {
-  if (isRunning) return
-  isRunning = true
-  queueWorkLoop()
+function queueBeginWork() {
+  if (isRunningOrQueued) return
+  isRunningOrQueued = true
+  animationFrameHandle = window.requestAnimationFrame(doWork)
 }
 
-function sleep() {
-  isRunning = false
+function onWorkFinished() {
+  isRunningOrQueued = false
+  while (nextIdleEffects.length) {
+    nextIdleEffects.shift()!()
+  }
 }
 
 function queueUpdate(vNode: VNode) {
@@ -117,7 +114,7 @@ function queueUpdate(vNode: VNode) {
   if (nextUnitOfWork === null) {
     treesInProgress.push(vNode)
     nextUnitOfWork = vNode
-    return wake()
+    return queueBeginWork()
   }
 
   for (let i = 0; i < treesInProgress.length; i++) {
@@ -202,7 +199,7 @@ function queueDelete(vNode: VNode) {
   deletions.push(vNode)
 }
 
-function workLoop(): void {
+function doWork(): void {
   if (__DEV__) {
     const n = nextUnitOfWork ?? deletions[0] ?? treesInProgress[0]
     if (n) {
@@ -220,55 +217,40 @@ function workLoop(): void {
       queueBlockedContextDependencyRoots()
   }
 
-  if (!nextUnitOfWork && (deletions.length || treesInProgress.length)) {
-    while (deletions.length) {
-      commitDeletion(deletions.shift()!)
-    }
-    const workRoots = [...treesInProgress]
-    treesInProgress.length = 0
-    currentTreeIndex = 0
-    for (const root of workRoots) {
-      commitWork(root)
-    }
-
-    isImmediateEffectsMode = true
-    flushEffects(preEffects)
-    isImmediateEffectsMode = false
+  while (deletions.length) {
+    commitDeletion(deletions.shift()!)
+  }
+  const workRoots = [...treesInProgress]
+  treesInProgress.length = 0
+  currentTreeIndex = 0
+  for (const root of workRoots) {
+    commitWork(root)
+  }
 
-    if (immediateEffectDirtiedRender) {
-      checkForTooManyConsecutiveDirtyRenders()
-      flushEffects(postEffects)
-      immediateEffectDirtiedRender = false
-      consecutiveDirtyCount++
-      if (__DEV__) {
-        window.__kiru?.profilingContext?.endTick(appCtx!)
-        window.__kiru?.profilingContext?.emit("updateDirtied", appCtx!)
-      }
-      return flushSync()
-    }
-    consecutiveDirtyCount = 0
+  isImmediateEffectsMode = true
+  flushEffects(preEffects)
+  isImmediateEffectsMode = false
 
+  if (immediateEffectDirtiedRender) {
+    checkForTooManyConsecutiveDirtyRenders()
     flushEffects(postEffects)
+    immediateEffectDirtiedRender = false
+    consecutiveDirtyCount++
     if (__DEV__) {
-      window.__kiru!.emit("update", appCtx!)
-      window.__kiru?.profilingContext?.emit("update", appCtx!)
+      window.__kiru?.profilingContext?.endTick(appCtx!)
+      window.__kiru?.profilingContext?.emit("updateDirtied", appCtx!)
     }
+    return flushSync()
   }
+  consecutiveDirtyCount = 0
 
-  if (!nextUnitOfWork) {
-    sleep()
-    while (nextIdleEffects.length) {
-      nextIdleEffects.shift()!()
-    }
-    if (__DEV__) {
-      if (appCtx) {
-        window.__kiru?.profilingContext?.endTick(appCtx)
-      }
-    }
-    return
+  onWorkFinished()
+  flushEffects(postEffects)
+  if (__DEV__) {
+    window.__kiru!.emit("update", appCtx!)
+    window.__kiru?.profilingContext?.emit("update", appCtx!)
+    window.__kiru?.profilingContext?.endTick(appCtx!)
   }
-
-  queueWorkLoop()
 }
 
 function queueBlockedContextDependencyRoots(): VNode | null {
@@ -382,8 +364,8 @@ function performUnitOfWork(vNode: VNode): VNode | void {
 }
 
 function updateFunctionComponent(vNode: FunctionVNode) {
-  const { type, props, subs, prev, isMemoized } = vNode
-  if (isMemoized) {
+  const { type, props, subs, prev, flags } = vNode
+  if (flags & FLAG_MEMO) {
     vNode.memoizedProps = props
     if (
       prev?.memoizedProps &&

package/src/signals/base.ts

@@ -1,13 +1,13 @@
+import { latest, safeStringify, sideEffectsEnabled } from "../utils.js"
 import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
 import { __DEV__ } from "../env.js"
-import type { HMRAccept } from "../hmr.js"
-import { latest, safeStringify, sideEffectsEnabled } from "../utils.js"
-import { tracking, signalSubsMap } from "./globals.js"
-import { type SignalSubscriber, ReadonlySignal } from "./types.js"
 import { node } from "../globals.js"
 import { useHook } from "../hooks/utils.js"
 import { generateRandomID } from "../generateId.js"
 import { requestUpdate } from "../scheduler.js"
+import { tracking, signalSubsMap } from "./globals.js"
+import type { SignalSubscriber, ReadonlySignal } from "./types.js"
+import type { HMRAccept } from "../hmr.js"
 
 export class Signal<T> {
   [$SIGNAL] = true;

package/src/signals/computed.ts

@@ -1,11 +1,11 @@
 import { __DEV__ } from "../env.js"
-import { Signal } from "./index.js"
-import { effectQueue, signalSubsMap } from "./globals.js"
 import { $HMR_ACCEPT } from "../constants.js"
-import type { HMRAccept } from "../hmr.js"
 import { useHook } from "../hooks/utils.js"
-import { executeWithTracking } from "./effect.js"
 import { latest } from "../utils.js"
+import { effectQueue, signalSubsMap } from "./globals.js"
+import { executeWithTracking } from "./effect.js"
+import { Signal } from "./base.js"
+import type { HMRAccept } from "../hmr.js"
 
 export class ComputedSignal<T> extends Signal<T> {
   protected $getter: (prev?: T) => T

package/src/signals/effect.ts

@@ -1,7 +1,8 @@
 import { node } from "../globals.js"
 import { sideEffectsEnabled } from "../utils.js"
 import { tracking, effectQueue } from "./globals.js"
-import type { Signal } from "./index.js"
+import { tick } from "./utils.js"
+import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 
 type TrackedExecutionContext<T, Deps extends readonly Signal<unknown>[]> = {
@@ -42,8 +43,8 @@ export function executeWithTracking<T, Deps extends readonly Signal<unknown>[]>(
     }
 
     const effect = () => {
-      if (!effectQueue.has(id)) {
-        queueMicrotask(() => effectQueue.get(id)?.())
+      if (!effectQueue.size) {
+        queueMicrotask(tick)
       }
       effectQueue.set(id, onDepChanged)
     }

package/src/signals/globals.ts

@@ -1,4 +1,4 @@
-import type { Signal } from "./index.js"
+import type { Signal } from "./base.js"
 import type { SignalSubscriber } from "./types.js"
 
 export const tracking = {

package/src/signals/jsx.ts

@@ -1,4 +1,4 @@
-import type { Signal } from "./index.js"
+import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 
 type InferArraySignalItemType<T extends Signal<any[]>> = T extends Signal<

package/src/signals/types.ts

@@ -1,4 +1,4 @@
-import { type Signal } from "./index.js"
+import type { Signal } from "./base.js"
 
 export type ReadonlySignal<T> = Signal<T> & {
   readonly value: T

package/src/signals/utils.ts

@@ -1,4 +1,4 @@
-import { Signal } from "./index.js"
+import { Signal } from "./base.js"
 import { effectQueue } from "./globals.js"
 
 export function unwrap<T>(value: T | Signal<T>, reactive = false): T {

package/src/ssr/client.ts

@@ -3,27 +3,21 @@ import { hydrationStack } from "../hydration.js"
 import { renderMode } from "../globals.js"
 import { mount } from "../index.js"
 
-export function hydrate<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
-  container: AppContextOptions,
-  appProps?: T
-): Promise<AppContext<T>>
-
-export function hydrate<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
+export function hydrate(
+  children: JSX.Element,
   container: HTMLElement,
-  appProps?: T
-): Promise<AppContext<T>>
-
-export function hydrate<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
-  optionsOrRoot: HTMLElement | AppContextOptions,
-  appProps = {} as T
-) {
+  options?: AppContextOptions
+): AppContext {
   hydrationStack.clear()
+
   const prevRenderMode = renderMode.current
   renderMode.current = "hydrate"
-  return mount(appFunc, optionsOrRoot as any, appProps).finally(() => {
-    renderMode.current = prevRenderMode
-  })
+  hydrationStack.captureEvents(container)
+
+  const app = mount(children, container, options)
+
+  renderMode.current = prevRenderMode
+  hydrationStack.releaseEvents(container)
+
+  return app
 }

package/src/ssr/server.ts

@@ -1,6 +1,5 @@
 import { Readable } from "node:stream"
 import { Fragment } from "../element.js"
-import { AppContext, createAppContext } from "../appContext.js"
 import { renderMode, node } from "../globals.js"
 import {
   isVNode,
@@ -14,30 +13,21 @@ import { assertValidElementProps } from "../props.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./hydrationBoundary.js"
 import { __DEV__ } from "../env.js"
 
-type RequestState = {
-  stream: Readable
-  ctx: AppContext
-}
-
-export function renderToReadableStream<T extends Record<string, unknown>>(
-  appFunc: (props: T) => JSX.Element,
-  appProps = {} as T
-): Readable {
+export function renderToReadableStream(element: JSX.Element): Readable {
   const prev = renderMode.current
   renderMode.current = "stream"
-  const state: RequestState = {
-    stream: new Readable(),
-    ctx: createAppContext(appFunc, appProps, { rootType: Fragment }),
-  }
-  renderToStream_internal(state, state.ctx.rootNode, null, 0)
-  state.stream.push(null)
+  const stream = new Readable()
+  const rootNode = Fragment({ children: element })
+
+  renderToStream_internal(stream, rootNode, null, 0)
+  stream.push(null)
   renderMode.current = prev
 
-  return state.stream
+  return stream
 }
 
 function renderToStream_internal(
-  state: RequestState,
+  stream: Readable,
   el: unknown,
   parent: Kiru.VNode | null,
   idx: number
@@ -46,23 +36,23 @@ function renderToStream_internal(
   if (el === undefined) return
   if (typeof el === "boolean") return
   if (typeof el === "string") {
-    state.stream.push(encodeHtmlEntities(el))
+    stream.push(encodeHtmlEntities(el))
     return
   }
   if (typeof el === "number" || typeof el === "bigint") {
-    state.stream.push(el.toString())
+    stream.push(el.toString())
     return
   }
   if (el instanceof Array) {
-    el.forEach((c, i) => renderToStream_internal(state, c, parent, i))
+    el.forEach((c, i) => renderToStream_internal(stream, c, parent, i))
     return
   }
   if (Signal.isSignal(el)) {
-    state.stream.push(String(el.peek()))
+    stream.push(String(el.peek()))
     return
   }
   if (!isVNode(el)) {
-    state.stream.push(String(el))
+    stream.push(String(el))
     return
   }
   el.parent = parent
@@ -72,35 +62,35 @@ function renderToStream_internal(
   const children = props.children
   const type = el.type
   if (type === "#text") {
-    state.stream.push(encodeHtmlEntities(props.nodeValue ?? ""))
+    stream.push(encodeHtmlEntities(props.nodeValue ?? ""))
     return
   }
   if (isExoticType(type)) {
     if (type === $HYDRATION_BOUNDARY) {
-      state.stream.push(`<!--${HYDRATION_BOUNDARY_MARKER}-->`)
-      renderToStream_internal(state, children, el, idx)
-      state.stream.push(`<!--/${HYDRATION_BOUNDARY_MARKER}-->`)
+      stream.push(`<!--${HYDRATION_BOUNDARY_MARKER}-->`)
+      renderToStream_internal(stream, children, el, idx)
+      stream.push(`<!--/${HYDRATION_BOUNDARY_MARKER}-->`)
       return
     }
-    return renderToStream_internal(state, children, el, idx)
+    return renderToStream_internal(stream, children, el, idx)
   }
 
   if (typeof type !== "string") {
     node.current = el
     const res = type(props)
     node.current = null
-    return renderToStream_internal(state, res, parent, idx)
+    return renderToStream_internal(stream, res, parent, idx)
   }
 
   if (__DEV__) {
     assertValidElementProps(el)
   }
   const attrs = propsToElementAttributes(props)
-  state.stream.push(`<${type}${attrs.length ? ` ${attrs}` : ""}>`)
+  stream.push(`<${type}${attrs.length ? ` ${attrs}` : ""}>`)
 
   if (!voidElements.has(type)) {
     if ("innerHTML" in props) {
-      state.stream.push(
+      stream.push(
         String(
           Signal.isSignal(props.innerHTML)
             ? props.innerHTML.peek()
@@ -109,12 +99,12 @@ function renderToStream_internal(
       )
     } else {
       if (Array.isArray(children)) {
-        children.forEach((c, i) => renderToStream_internal(state, c, el, i))
+        children.forEach((c, i) => renderToStream_internal(stream, c, el, i))
       } else {
-        renderToStream_internal(state, children, el, 0)
+        renderToStream_internal(stream, children, el, 0)
       }
     }
 
-    state.stream.push(`</${type}>`)
+    stream.push(`</${type}>`)
   }
 }

package/src/types.ts

@@ -194,7 +194,6 @@ declare global {
       effects?: Array<Function>
       immediateEffects?: Array<Function>
       memoizedProps?: Record<string, any>
-      isMemoized?: boolean
       arePropsEqual?: (
         prev: Record<string, any>,
         next: Record<string, any>

package/src/utils.ts

@@ -8,6 +8,7 @@ import {
   FLAG_HAS_MEMO_ANCESTOR,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
+  FLAG_MEMO,
   REGEX_UNIT,
 } from "./constants.js"
 import { unwrap } from "./signals/utils.js"
@@ -162,8 +163,9 @@ function willMemoBlockUpdate(root: VNode, target: VNode): boolean {
 
   while (node && node !== root && node.flags & FLAG_HAS_MEMO_ANCESTOR) {
     const parent = node.parent
+    if (!parent) return false
     if (
-      parent?.isMemoized &&
+      parent.flags & FLAG_MEMO &&
       parent.prev?.memoizedProps &&
       parent.arePropsEqual!(parent.prev.memoizedProps, parent.props)
     ) {