kiru 1.0.1 → 1.1.0

package/src/scheduler.ts

@@ -6,18 +6,13 @@ import {
   FLAG_DIRTY,
 } from "./constants.js"
 import {
+  captureFocus,
   commitDeletion,
   commitWork,
   createDom,
   hydrateDom,
-  onAfterFlushDomChanges,
-  onBeforeFlushDomChanges,
-} from "./dom.js"
-import { __DEV__ } from "./env.js"
-import { KiruError } from "./error.js"
-import { node, renderMode } from "./globals.js"
-import { hydrationStack } from "./hydration.js"
-import { reconcileChildren } from "./reconciler.js"
+  reinstateFocus,
+} from "./dom/index.js"
 import {
   assertValidElementProps,
   latest,
@@ -28,8 +23,13 @@ import {
   call,
   propsChanged,
 } from "./utils/index.js"
-import type { AppHandle } from "./appHandle"
+import { __DEV__ } from "./env.js"
+import { KiruError } from "./error.js"
+import { node, postEffectCleanups, renderMode, setups } from "./globals.js"
+import { hydrationStack } from "./hydration.js"
+import { reconcileChildren } from "./reconciler.js"
 import { isHmrUpdate } from "./hmr.js"
+import type { AppHandle } from "./appHandle"
 
 type VNode = Kiru.VNode
 
@@ -93,21 +93,8 @@ export function useRequestUpdate(): () => void {
   return () => requestUpdate(n)
 }
 
-function queueBeginWork(): void {
-  if (isRunningOrQueued) return
-  isRunningOrQueued = true
-  animationFrameHandle = window.requestAnimationFrame(doWork)
-}
-
-function onWorkFinished(): void {
-  isRunningOrQueued = false
-  while (nextIdleEffects.length) {
-    nextIdleEffects.shift()!()
-  }
-}
-
 function queueUpdate(vNode: VNode): void {
-  // In immediate effect mode (useLayoutEffect), immediately mark the render as dirty
+  // In immediate effect mode (onBeforeMount), immediately mark the render as dirty
   if (isImmediateEffectsMode) {
     immediateEffectDirtiedRender = true
   }
@@ -126,7 +113,12 @@ function queueUpdate(vNode: VNode): void {
 
   if (!treesInProgress.length) {
     treesInProgress.push(vNode)
-    return queueBeginWork()
+
+    if (!isRunningOrQueued) {
+      isRunningOrQueued = true
+      animationFrameHandle = window.requestAnimationFrame(doWork)
+    }
+    return
   }
 
   treesInProgress.push(vNode)
@@ -154,7 +146,7 @@ function doWork(): void {
 
   let len = 1
 
-  onBeforeFlushDomChanges()
+  captureFocus()
   while (treesInProgress.length) {
     if (treesInProgress.length > len) {
       treesInProgress.sort(depthSort)
@@ -177,7 +169,7 @@ function doWork(): void {
       currentWorkRoot.flags &= ~FLAG_DIRTY
     }
   }
-  onAfterFlushDomChanges()
+  reinstateFocus()
 
   isImmediateEffectsMode = true
   flushEffects(preEffects)
@@ -196,8 +188,14 @@ function doWork(): void {
   }
   consecutiveDirtyCount = 0
 
-  onWorkFinished()
-  queueMicrotask(() => flushEffects(postEffects))
+  isRunningOrQueued = false
+  while (nextIdleEffects.length) {
+    nextIdleEffects.shift()!()
+  }
+  queueMicrotask(() => {
+    flushEffects(postEffectCleanups)
+    flushEffects(postEffects)
+  })
   if (__DEV__) {
     window.__kiru.emit("update", app!)
     window.__kiru.profilingContext?.emit("update", app!)
@@ -324,6 +322,9 @@ function updateExoticComponent(vNode: VNode): VNode | null {
 function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
   const { type, props, subs } = vNode
 
+  /** Only sync prop-derived signals when update came from parent (new props), not from internal subscription (e.g. signal). */
+  const shouldSyncProps = (vNode.flags & FLAG_DIRTY) === 0
+
   try {
     node.current = vNode
     let newChild
@@ -346,34 +347,26 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
         subs.clear()
       }
 
-      if (__DEV__) {
-        if (isHmrUpdate()) {
-          const { hooks } = vNode
-          if (vNode.cleanups) {
-            Object.values(vNode.cleanups).forEach(call)
-            delete vNode.cleanups
-          }
-          if (hooks) {
-            const { preCleanups, postCleanups } = hooks
-            preCleanups.forEach(call)
-            postCleanups.forEach(call)
-            preCleanups.length = postCleanups.length = 0
-          }
-          delete vNode.render
+      if (__DEV__ && isHmrUpdate()) {
+        const { hooks, cleanups } = vNode
+        if (cleanups) {
+          Object.values(cleanups).forEach(call)
+          delete vNode.cleanups
         }
-
-        if (vNode.render) {
-          newChild = vNode.render(props)
-        } else {
-          newChild = latest(type)(props)
-          if (typeof newChild === "function") {
-            vNode.subs?.forEach(call)
-            vNode.render = newChild as (props: any) => unknown
-            newChild = vNode.render(props)
-          }
+        if (hooks) {
+          const { preCleanups, postCleanups } = hooks
+          preCleanups.forEach(call)
+          postCleanups.forEach(call)
+          preCleanups.length = postCleanups.length = 0
         }
+        delete vNode.propSyncs
+        delete vNode.render
+      }
 
-        if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
+      newChild = renderFunctionComponent(vNode, type, props, shouldSyncProps)
+
+      if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
+        if (__DEV__) {
           throw new KiruError({
             message:
               "Too many re-renders. Kiru limits the number of renders to prevent an infinite loop.",
@@ -381,17 +374,7 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
             vNode,
           })
         }
-        continue
-      }
-
-      if (vNode.render) {
-        newChild = vNode.render(props)
-      } else {
-        newChild = type(props)
-        if (typeof newChild === "function") {
-          vNode.render = newChild as (props: any) => unknown
-          newChild = vNode.render(props)
-        }
+        break
       }
     } while (isRenderDirtied)
 
@@ -401,6 +384,38 @@ function updateFunctionComponent(vNode: FunctionVNode): VNode | null {
   }
 }
 
+function renderFunctionComponent(
+  vNode: FunctionVNode,
+  type: Function,
+  props: Record<string, unknown>,
+  shouldSyncProps: boolean
+): unknown {
+  const { render, propSyncs } = vNode
+
+  if (render) {
+    if (shouldSyncProps) {
+      const p = { ...props }
+      propSyncs?.forEach((sync) => sync(p))
+    }
+    return render(props)
+  }
+
+  let newChild = latest(type)(props)
+  if (typeof newChild === "function") {
+    vNode.subs?.forEach(call) // unsub from signals observered during setup
+    vNode.render = newChild
+    if (shouldSyncProps) {
+      const p = { ...props }
+      propSyncs?.forEach((sync) => sync(p))
+    }
+    newChild = newChild(props)
+  } else if (__DEV__ && setups.has(vNode)) {
+    throw new Error("setup() must not be called inside a render function")
+  }
+
+  return newChild
+}
+
 function updateHostComponent(vNode: DomVNode): VNode | null {
   const { props, type } = vNode
   if (__DEV__) {

package/src/signals/base.ts

@@ -6,7 +6,7 @@ import {
   registerVNodeCleanup,
 } from "../utils/index.js"
 import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
-import { __DEV__ } from "../env.js"
+import { __DEV__, isBrowser } from "../env.js"
 import { node } from "../globals.js"
 import { requestUpdate } from "../scheduler.js"
 import { signalSubsMap } from "./globals.js"
@@ -39,7 +39,7 @@ export class Signal<T> {
           return this as Signal<any>
         },
         inject: (prev) => {
-          if ("window" in globalThis) window.__kiru.devtools?.untrack(prev)
+          if (isBrowser) window.__kiru.devtools?.untrack(prev)
           signalSubsMap.get(this.$id)?.clear?.()
           signalSubsMap.delete(this.$id)
           this.$id = prev.$id
@@ -201,7 +201,7 @@ export class Signal<T> {
     signal.$isDisposed = true
     if (__DEV__) {
       signalSubsMap.delete(signal.$id)
-      if ("window" in globalThis) window.__kiru.devtools?.untrack(signal)
+      if (isBrowser) window.__kiru.devtools?.untrack(signal)
       return
     }
     signal.$subs!.clear()

package/src/signals/effect.ts

@@ -1,4 +1,4 @@
-import { __DEV__ } from "../env.js"
+import { __DEV__, isBrowser } from "../env.js"
 import { effectQueue } from "./globals.js"
 import { executeWithTracking } from "./tracking.js"
 import {
@@ -6,6 +6,7 @@ import {
   generateRandomID,
   call,
   registerVNodeCleanup,
+  sideEffectsEnabled,
 } from "../utils/index.js"
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
@@ -31,11 +32,12 @@ export class Effect<const Deps extends readonly Signal<unknown>[] = []> {
     this.unsubs = new Map()
     this.isRunning = false
     this.cleanup = null
-    if (__DEV__ && "window" in globalThis) {
+    if (__DEV__ && isBrowser) {
       window.__kiru.HMRContext!.moduleEffects.push(this)
     }
     const n = node.current
     if (n) {
+      if (!sideEffectsEnabled()) return // prevent side effects in non-browser environments
       registerVNodeCleanup(n, this.id, this.stop.bind(this))
     }
     this.start()
@@ -49,11 +51,7 @@ export class Effect<const Deps extends readonly Signal<unknown>[] = []> {
     this.isRunning = true
 
     // postpone execution during HMR
-    if (
-      __DEV__ &&
-      "window" in globalThis &&
-      window.__kiru.HMRContext?.isReplacement()
-    ) {
+    if (__DEV__ && isBrowser && window.__kiru.HMRContext?.isReplacement()) {
       return queueMicrotask(() => {
         if (this.isRunning) {
           Effect.run(this as Effect)

package/src/signals/tracking.ts

@@ -5,10 +5,11 @@ import { tick } from "./utils.js"
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 
+export type TrackingStackObservations = Map<string, Signal<unknown>>
 export const tracking = {
   enabled: true,
-  stack: new Array<Map<string, Signal<unknown>>>(),
-  current: function (): Map<string, Signal<unknown>> | undefined {
+  stack: new Array<TrackingStackObservations>(),
+  current: function (): TrackingStackObservations | undefined {
     return this.stack[this.stack.length - 1]
   },
 }

package/src/statefulPromise.ts

@@ -1,7 +1,7 @@
 import { $STREAM_DATA, STREAMED_DATA_EVENT } from "./constants.js"
 import { hydrationMode, node, renderMode } from "./globals.js"
 import { Signal, signal } from "./signals/base.js"
-import { getVNodeId } from "./utils/vdom.js"
+import { createVNodeId } from "./utils/vdom.js"
 import { onCleanup } from "./hooks/onCleanup.js"
 
 export interface StreamDataThrowValue {
@@ -42,7 +42,7 @@ export function statefulPromise<T>(
   if (!vNode) {
     throw new Error("statefulPromise must be called inside a Kiru component")
   }
-  const id = getVNodeId(vNode)
+  const id = createVNodeId(vNode)
   const isPending = signal(true)
 
   isPending.value = true

package/src/types.dom.ts

@@ -153,8 +153,8 @@ type AllStyleRules = Omit<
 type StyleObject = Prettify<
   Partial<{
     [Key in keyof AllStyleRules & string]: Key extends NumericStyleKeys
-      ? number | string
-      : AllStyleRules[Key]
+      ? Signalable<number | string | undefined>
+      : Signalable<AllStyleRules[Key] | undefined>
   }>
 >
 

package/src/types.ts

@@ -162,7 +162,11 @@ declare global {
       | typeof $ERROR_BOUNDARY
 
     interface Element {
-      type: Function | ExoticSymbol | "#text" | (string & {})
+      type:
+        | (Function & { displayName?: string })
+        | ExoticSymbol
+        | "#text"
+        | (string & {})
       key: JSX.ElementKey | null
       props: {
         [key: string]: any
@@ -193,6 +197,8 @@ declare global {
         post: LifecycleHookCallback[]
         postCleanups: (() => void)[]
       }
+      /** Run before each render with current props to sync prop-derived signals */
+      propSyncs?: ((props: VNode["props"]) => void)[]
       render?: (props: VNode["props"]) => unknown
     }
     interface VNodeSnapshot {

package/src/utils/format.ts

@@ -84,8 +84,10 @@ function propToHtmlAttr(key: string): string {
 function styleObjectToString(obj: Partial<CSSStyleDeclaration>): string {
   let cssString = ""
   for (const key in obj) {
+    const val = unwrap((obj as Record<string, unknown>)[key])
+    if (val === null || val === undefined) continue
     const cssKey = key.replace(REGEX_ALPHA_UPPER, "-$&").toLowerCase()
-    cssString += `${cssKey}:${obj[key]};`
+    cssString += `${cssKey}:${val};`
   }
   return cssString
 }

package/src/utils/vdom.ts

@@ -31,7 +31,7 @@ export {
   findParentErrorBoundary,
   assertValidElementProps,
   normalizeElementKey,
-  getVNodeId,
+  createVNodeId,
   registerVNodeCleanup,
   propsChanged,
 }
@@ -186,7 +186,7 @@ function normalizeElementKey(thing: unknown): JSX.ElementKey | null {
   return null
 }
 
-function getVNodeId(vNode: Kiru.VNode): string {
+function createVNodeId(vNode: Kiru.VNode): string {
   const accumulator: number[] = []
   let n: Kiru.VNode | null = vNode
   while (n) {

package/src/viewTransitions.ts

@@ -1,4 +1,5 @@
 import { flushSync } from "./scheduler.js"
+import { isBrowser } from "./env.js"
 
 export namespace ViewTransitions {
   type ViewTransitionJob = () => Promise<void>
@@ -8,7 +9,7 @@ export namespace ViewTransitions {
   let scheduled = false
   let transition: ViewTransition | null = null
   const supported =
-    "window" in globalThis && typeof document.startViewTransition === "function"
+    isBrowser && typeof document.startViewTransition === "function"
 
   export function run<T>(
     callback: () => T | Promise<T>,

package/dist/dom.d.ts

@@ -1,10 +0,0 @@
-import type { DomVNode, SomeDom } from "./types.utils";
-export { commitWork, onBeforeFlushDomChanges, onAfterFlushDomChanges, commitDeletion, createDom, hydrateDom, };
-type VNode = Kiru.VNode;
-declare function onBeforeFlushDomChanges(): void;
-declare function onAfterFlushDomChanges(): void;
-declare function createDom(vNode: DomVNode): SomeDom;
-declare function hydrateDom(vNode: VNode): void;
-declare function commitWork(vNode: VNode): void;
-declare function commitDeletion(vNode: VNode): void;
-//# sourceMappingURL=dom.d.ts.map

package/dist/dom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,QAAQ,EAGR,OAAO,EAER,MAAM,eAAe,CAAA;AAGtB,OAAO,EACL,UAAU,EACV,uBAAuB,EACvB,sBAAsB,EACtB,cAAc,EACd,SAAS,EACT,UAAU,GACX,CAAA;AAED,KAAK,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;AAiBvB,iBAAS,uBAAuB,SAM/B;AAED,iBAAS,sBAAsB,SAa9B;AAED,iBAAS,SAAS,CAAC,KAAK,EAAE,QAAQ,GAAG,OAAO,CAU3C;AA0TD,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,QA+C/B;AAuND,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,QAa/B;AA6CD,iBAAS,cAAc,CAAC,KAAK,EAAE,KAAK,QA8CnC"}