kiru 0.46.1 → 0.47.0

package/src/scheduler.ts

@@ -31,7 +31,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 +41,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 +72,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 +113,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 +198,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 +216,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 {

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,
@@ -8,36 +7,27 @@ import {
   propsToElementAttributes,
   isExoticType,
 } from "../utils.js"
-import { Signal } from "../signals/base.js"
+import { Signal } from "../signals/index.js"
 import { $HYDRATION_BOUNDARY, voidElements } from "../constants.js"
 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/swr.ts

@@ -1,6 +1,6 @@
 import { __DEV__ } from "./env.js"
 import { useHook } from "./hooks/utils.js"
-import { Signal } from "./signals/base.js"
+import { Signal } from "./signals/index.js"
 import {
   noop,
   deepCompare,

package/src/utils.ts

@@ -10,7 +10,7 @@ import {
   FLAG_UPDATE,
   REGEX_UNIT,
 } from "./constants.js"
-import { unwrap } from "./signals/utils.js"
+import { unwrap } from "./signals/index.js"
 import { __DEV__ } from "./env.js"
 import type { AppContext } from "./appContext"