kiru 0.52.4 → 0.53.0

package/src/appContext.ts

@@ -1,7 +1,7 @@
 import { FLAG_STATIC_DOM } from "./constants.js"
-import { createElement } from "./element.js"
 import { __DEV__ } from "./env.js"
-import { renderRootSync } from "./scheduler.js"
+import { renderRootSync, requestUpdate } from "./scheduler.js"
+import { createVNode } from "./vNode.js"
 
 type VNode = Kiru.VNode
 
@@ -34,19 +34,11 @@ export function mount(
       )
     }
   }
-  const rootNode = createElement(container.nodeName.toLowerCase(), {})
-  if (__DEV__) {
-    container.__kiruNode = rootNode
-  }
-
-  rootNode.dom = container
-  rootNode.flags |= FLAG_STATIC_DOM
-
+  const rootNode = createRootNode(container)
   const id = appId++
-  const name = options?.name ?? `App-${id}`
   const appContext: AppContext = {
     id,
-    name,
+    name: options?.name ?? `App-${id}`,
     rootNode,
     render,
     unmount,
@@ -72,7 +64,7 @@ export function mount(
   }
 
   render(children)
-  window.__kiru.emit("mount", appContext)
+  window.__kiru.emit("mount", appContext, requestUpdate)
   if (__DEV__) {
     queueMicrotask(() => {
       window.dispatchEvent(new Event("kiru:ready"))
@@ -81,3 +73,13 @@ export function mount(
 
   return appContext
 }
+
+function createRootNode(container: HTMLElement): Kiru.VNode {
+  const node = createVNode(container.nodeName.toLowerCase())
+  node.flags |= FLAG_STATIC_DOM
+  node.dom = container
+  if (__DEV__) {
+    container.__kiruNode = node
+  }
+  return node
+}

package/src/components/derive.ts

@@ -0,0 +1,121 @@
+import { node } from "../globals.js"
+import { $STREAM_DATA } from "../constants.js"
+import { requestUpdate } from "../scheduler.js"
+import { useRef } from "../hooks/index.js"
+import { Signal } from "../signals/index.js"
+import { sideEffectsEnabled } from "../utils/index.js"
+import type { RecordHas } from "../types.utils"
+import { isStatefulPromise, StreamDataThrowValue } from "../utils/promise.js"
+
+export type Derivable =
+  | Kiru.Signal<unknown>
+  | Kiru.StatefulPromise<unknown>
+  | Record<string, Kiru.Signal<unknown> | Kiru.StatefulPromise<unknown>>
+
+type InnerOf<T> = T extends Kiru.Signal<infer V>
+  ? V
+  : T extends Kiru.StatefulPromise<infer P>
+  ? P
+  : never
+
+type UnwrapDerive<T extends Derivable> = T extends
+  | Kiru.Signal<unknown>
+  | Kiru.StatefulPromise<any>
+  ? InnerOf<T>
+  : { [K in keyof T]: InnerOf<T[K]> }
+
+type RecordHasPromise<T extends Record<string, any>> = RecordHas<
+  T,
+  Kiru.StatefulPromise<any>
+>
+
+type ChildFn<T> = (value: T) => JSX.Children
+type ChildFnWithStale<T> = (value: T, isStale: boolean) => JSX.Children
+
+export type DeriveFallbackMode = "swr" | "fallback"
+
+export interface DeriveProps<
+  T extends Derivable,
+  Mode extends DeriveFallbackMode = "fallback"
+> {
+  from: T
+  mode?: Mode
+  children: T extends Kiru.StatefulPromise<infer U>
+    ? Mode extends "swr"
+      ? ChildFnWithStale<U>
+      : ChildFn<U>
+    : T extends Record<string, any>
+    ? RecordHasPromise<T> extends true
+      ? Mode extends "swr"
+        ? ChildFnWithStale<UnwrapDerive<T>>
+        : ChildFn<UnwrapDerive<T>>
+      : ChildFn<UnwrapDerive<T>>
+    : ChildFn<UnwrapDerive<T>>
+  fallback?: T extends Kiru.StatefulPromise<any>
+    ? JSX.Element
+    : T extends Record<string, any>
+    ? RecordHasPromise<T> extends true
+      ? JSX.Element
+      : never
+    : never
+}
+
+export function Derive<
+  T extends Derivable,
+  U extends DeriveFallbackMode = "swr"
+>(props: DeriveProps<T, U>) {
+  const { from, children, fallback, mode } = props
+  const prevSuccess = useRef<UnwrapDerive<T> | null>(null)
+
+  const promises = new Set<Kiru.StatefulPromise<any>>()
+  let value: UnwrapDerive<T>
+
+  if (isStatefulPromise(from)) {
+    promises.add(from)
+    value = from.value as UnwrapDerive<T>
+  } else if (Signal.isSignal(from)) {
+    value = from.value as UnwrapDerive<T>
+  } else {
+    const out: Record<string, any> = {}
+    for (const key in from) {
+      const v = from[key]
+      if (isStatefulPromise(v)) promises.add(v)
+      out[key] = (v as Signal<unknown> | Kiru.StatefulPromise<unknown>).value
+    }
+    value = out as UnwrapDerive<T>
+  }
+
+  if (promises.size === 0) {
+    return (children as ChildFn<UnwrapDerive<T>>)(value)
+  }
+
+  if (!sideEffectsEnabled()) {
+    throw {
+      [$STREAM_DATA]: {
+        fallback,
+        data: Array.from(promises),
+      },
+    } satisfies StreamDataThrowValue
+  }
+
+  for (const p of promises) {
+    if (p.state === "rejected") {
+      throw p.error
+    }
+    if (p.state === "pending") {
+      const nodeRef = node.current!
+      Promise.allSettled(promises).then(() => requestUpdate(nodeRef))
+
+      if (mode !== "fallback" && prevSuccess.current) {
+        return (children as ChildFnWithStale<UnwrapDerive<T>>)(
+          prevSuccess.current,
+          true
+        )
+      }
+      return fallback
+    }
+  }
+
+  prevSuccess.current = value
+  return (children as ChildFnWithStale<UnwrapDerive<T>>)(value, false)
+}

package/src/components/index.ts

@@ -1,6 +1,6 @@
 export { ErrorBoundary, type ErrorBoundaryProps } from "./errorBoundary.js"
+export * from "./derive.js"
 export * from "./lazy.js"
 export { memo } from "./memo.js"
 export * from "./portal.js"
-export * from "./suspense.js"
 export * from "./transition.js"

package/src/components/memo.ts

@@ -15,7 +15,8 @@ function _arePropsEqual<T extends Record<string, unknown>>(
   return true
 }
 
-export type MemoFn = Function & {
+export interface MemoFn<T extends Record<string, unknown> = {}> {
+  (props: T): JSX.Element
   [$MEMO]: {
     arePropsEqual: (
       prevProps: Record<string, unknown>,
@@ -39,7 +40,7 @@ export function memo<T extends Record<string, unknown> = {}>(
   )
 }
 
-export function isMemoFn(fn: any): fn is MemoFn {
+export function isMemoFn(fn: Function & { [$MEMO]?: any }): fn is MemoFn {
   return (
     typeof fn === "function" && typeof fn[$MEMO]?.arePropsEqual === "function"
   )

package/src/constants.ts

@@ -7,10 +7,10 @@ export {
   $HMR_ACCEPT,
   $MEMO,
   $ERROR_BOUNDARY,
-  $SUSPENSE_THROW,
+  $STREAM_DATA,
   $DEV_FILE_LINK,
   CONSECUTIVE_DIRTY_LIMIT,
-  PREFETCHED_DATA_EVENT,
+  STREAMED_DATA_EVENT,
   EVENT_PREFIX_REGEX,
   FLAG_UPDATE,
   FLAG_PLACEMENT,
@@ -31,11 +31,11 @@ const $KIRU_ERROR = Symbol.for("kiru.error")
 const $HMR_ACCEPT = Symbol.for("kiru.hmrAccept")
 const $MEMO = Symbol.for("kiru.memo")
 const $ERROR_BOUNDARY = Symbol.for("kiru.errorBoundary")
-const $SUSPENSE_THROW = Symbol.for("kiru.suspenseThrow")
+const $STREAM_DATA = Symbol.for("kiru.streamData")
 const $DEV_FILE_LINK = Symbol.for("kiru.devFileLink")
 
 const CONSECUTIVE_DIRTY_LIMIT = 50
-const PREFETCHED_DATA_EVENT = "kiru:prefetched"
+const STREAMED_DATA_EVENT = "kiru:deferred"
 
 const FLAG_UPDATE = 1 << 1
 const FLAG_PLACEMENT = 1 << 2

package/src/dom.ts

@@ -4,6 +4,7 @@ import {
   propFilters,
   propToHtmlAttr,
   getVNodeAppContext,
+  setRef,
 } from "./utils/index.js"
 import {
   booleanAttributes,
@@ -73,21 +74,6 @@ function onAfterFlushDomChanges() {
   persistingFocus = false
 }
 
-function setDomRef(ref: Kiru.Ref<SomeDom | null>, value: SomeDom | null) {
-  if (typeof ref === "function") {
-    ref(value)
-    return
-  }
-  if (Signal.isSignal(ref)) {
-    ref.sneak(value)
-    ref.notify({
-      filter: (sub) => typeof sub === "function",
-    })
-    return
-  }
-  ;(ref as Kiru.MutableRefObject<SomeDom | null>).current = value
-}
-
 function createDom(vNode: DomVNode): SomeDom {
   const t = vNode.type
   const dom =
@@ -139,75 +125,85 @@ const vNodeToWrappedFocusEventHandlersMap = new WeakMap<
   WrappedFocusEventMap
 >()
 
-function updateDom(vNode: VNode) {
-  const dom = vNode.dom as SomeDom
-  const prevProps: Record<string, any> = vNode.prev?.props ?? {}
-  const nextProps: Record<string, any> = vNode.props ?? {}
-  const keys = new Set([...Object.keys(prevProps), ...Object.keys(nextProps)])
+function updateDom(vNode: DomVNode) {
+  const { dom, prev, props, cleanups } = vNode
+  const prevProps = prev?.props ?? {}
+  const nextProps = props ?? {}
   const isHydration = renderMode.current === "hydrate"
 
-  keys.forEach((key) => {
-    const prev = prevProps[key],
-      next = nextProps[key]
-    if (propFilters.internalProps.includes(key) && key !== "innerHTML") {
-      if (key === "ref" && prev !== next) {
-        if (prev) {
-          setDomRef(prev, null)
-        }
-        if (next) {
-          setDomRef(next, dom)
-        }
-      }
-      return
+  // TEXT NODE SHORT-PATH
+  if (dom instanceof Text) {
+    const nextVal = nextProps.nodeValue
+    if (!Signal.isSignal(nextVal) && dom.nodeValue !== nextVal) {
+      dom.nodeValue = nextVal
     }
+    return
+  }
+
+  const keys: string[] = []
+  for (const k in prevProps) keys.push(k)
+  for (const k in nextProps) {
+    if (!(k in prevProps)) keys.push(k)
+  }
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const prevVal = prevProps[key]
+    const nextVal = nextProps[key]
 
     if (propFilters.isEvent(key)) {
-      if (prev !== next || renderMode.current === "hydrate") {
+      if (prevVal !== nextVal || isHydration) {
         const evtName = key.replace(EVENT_PREFIX_REGEX, "")
+        const isFocus = evtName === "focus" || evtName === "blur"
+        const wrappedMap = vNodeToWrappedFocusEventHandlersMap.get(vNode)
 
-        const isFocusEvent = evtName === "focus" || evtName === "blur"
         if (key in prevProps) {
           dom.removeEventListener(
             evtName,
-            isFocusEvent
-              ? vNodeToWrappedFocusEventHandlersMap.get(vNode)?.[evtName]
-              : prev
+            isFocus ? wrappedMap?.[evtName] : prevVal
           )
         }
+
         if (key in nextProps) {
           dom.addEventListener(
             evtName,
-            isFocusEvent ? wrapFocusEventHandler(vNode, evtName, next) : next
+            isFocus ? wrapFocusEventHandler(vNode, evtName, nextVal) : nextVal
           )
         }
       }
-      return
+      continue
     }
 
-    if (!(dom instanceof Text)) {
-      if (prev === next || (isHydration && dom.getAttribute(key) === next)) {
-        return
-      }
+    if (propFilters.isInternalProp(key) && key !== "innerHTML") {
+      continue
+    }
 
-      if (Signal.isSignal(prev) && vNode.cleanups) {
-        const v = vNode.cleanups[key]
-        v && (v(), delete vNode.cleanups[key])
-      }
-      if (Signal.isSignal(next)) {
-        return setSignalProp(vNode, dom, key, next, prev)
-      }
-      setProp(dom, key, next, prev)
-      return
+    if (prevVal === nextVal) {
+      continue
     }
-    if (Signal.isSignal(next)) {
-      // signal textNodes are handled via 'subTextNode'.
-      return
+
+    if (Signal.isSignal(prevVal) && cleanups) {
+      const disposer = cleanups[key]
+      if (disposer) {
+        disposer()
+        delete cleanups[key]
+      }
     }
-    // text node
-    if (dom.nodeValue !== next) {
-      dom.nodeValue = next
+
+    if (Signal.isSignal(nextVal)) {
+      setSignalProp(vNode, dom, key, nextVal, prevVal)
+      continue
     }
-  })
+
+    setProp(dom, key, nextVal, prevVal)
+  }
+
+  const prevRef = prevProps.ref
+  const nextRef = nextProps.ref
+  if (prevRef !== nextRef) {
+    if (prevRef) setRef(prevRef, null)
+    if (nextRef) setRef(nextRef, dom)
+  }
 }
 
 function deriveSelectElementValue(dom: HTMLSelectElement) {
@@ -248,6 +244,7 @@ function setSignalProp(
   const [modifier, attr] = key.split(":")
   if (modifier !== "bind") {
     cleanups[key] = signal.subscribe((value, prev) => {
+      if (value === prev) return
       setProp(dom, key, value, prev)
       if (__DEV__) {
         window.__kiru.profilingContext?.emit(
@@ -257,7 +254,11 @@ function setSignalProp(
       }
     })
 
-    return setProp(dom, key, signal.peek(), unwrap(prevValue))
+    const value = signal.peek()
+    const prev = unwrap(prevValue)
+    if (value === prev) return
+    setProp(dom, key, value, prev)
+    return
   }
 
   const evtName = bindAttrToEventMap[attr]
@@ -285,7 +286,7 @@ function setSignalProp(
 
   const setSigFromElement = (val: any) => {
     signal.sneak(val)
-    signal.notify({ filter: (sub) => sub !== signalUpdateCallback })
+    signal.notify((sub) => sub !== signalUpdateCallback)
   }
 
   let evtHandler: (evt: Event) => void
@@ -323,7 +324,10 @@ function setSignalProp(
     unsub()
   }
 
-  return setProp(dom, attr, signal.peek(), unwrap(prevValue))
+  const value = signal.peek()
+  const prev = unwrap(prevValue)
+  if (value === prev) return
+  setProp(dom, attr, value, prev)
 }
 
 function subTextNode(vNode: VNode, textNode: Text, signal: Signal<string>) {
@@ -373,7 +377,7 @@ function hydrateDom(vNode: VNode) {
   }
   vNode.dom = dom
   if (vNode.type !== "#text" && !(vNode.flags & FLAG_STATIC_DOM)) {
-    updateDom(vNode)
+    updateDom(vNode as DomVNode)
     return
   }
   if (Signal.isSignal(vNode.props.nodeValue)) {
@@ -449,7 +453,6 @@ function setProp(
   value: unknown,
   prev: unknown
 ) {
-  if (value === prev) return
   switch (key) {
     case "style":
       return setStyleProp(element, value, prev)
@@ -706,10 +709,12 @@ function commitDeletion(vNode: VNode) {
     }
 
     if (dom) {
-      if (ref) setDomRef(ref as Kiru.Ref<SomeDom>, null)
       if (dom.isConnected && !(node.flags & FLAG_STATIC_DOM)) {
         dom.remove()
       }
+      if (ref) {
+        setRef(ref, null)
+      }
       delete node.dom
     }
   })

package/src/element.ts

@@ -1,46 +1,29 @@
-import { $FRAGMENT, $MEMO, FLAG_MEMO } from "./constants.js"
-import { isMemoFn } from "./components/memo.js"
-import { isValidElementKeyProp, isValidElementRefProp } from "./utils/index.js"
+import { $FRAGMENT } from "./constants.js"
+import { normalizeElementKey } from "./utils/index.js"
 
 export function createElement<T extends Kiru.VNode["type"]>(
   type: T,
   props: null | Record<string, unknown> = null,
   ...children: unknown[]
-): Kiru.VNode {
-  if ((type as any) === Fragment) {
-    return Fragment({ children: children as any, ...props })
-  }
-  const node: Kiru.VNode = {
-    type,
-    flags: 0,
-    index: 0,
-    depth: 0,
-    props: {},
-    parent: null,
-    sibling: null,
-    child: null,
-    prev: null,
-    deletions: null,
-  }
-  if (isMemoFn(type)) {
-    node.flags |= FLAG_MEMO
-    node.arePropsEqual = type[$MEMO].arePropsEqual
+): Kiru.Element {
+  if ((type as unknown) === Fragment) {
+    type = $FRAGMENT as T
   }
+  const p = props === null ? {} : props
+  const key = normalizeElementKey(p.key)
 
-  if (props !== null) {
-    const { key, ref, ...rest } = props
-    if (isValidElementKeyProp(key)) node.props.key = key.toString()
-    if (isValidElementRefProp(ref)) node.props.ref = ref
-    Object.assign(node.props, rest)
+  const len = children.length
+  if (len === 1) {
+    p.children = children[0]
+  } else if (len > 1) {
+    p.children = children
   }
 
-  const _children =
-    children.length === 1 ? children[0] : children.length > 1 ? children : null
-  if (_children !== null) {
-    node.props.children = _children
+  return {
+    type,
+    key,
+    props: p,
   }
-
-  return node
 }
 
 export function Fragment({
@@ -49,6 +32,10 @@ export function Fragment({
 }: {
   children: JSX.Children
   key?: JSX.ElementKey
-}): Kiru.VNode {
-  return createElement($FRAGMENT, key ? { key } : null, children)
+}): Kiru.Element {
+  return {
+    type: $FRAGMENT,
+    key: normalizeElementKey(key),
+    props: { children },
+  }
 }

package/src/globalContext.ts

@@ -6,6 +6,7 @@ import type { FileRouterController } from "./router/fileRouterController"
 import type { AppContext } from "./appContext"
 import type { Store } from "./store"
 import type { SWRCache } from "./swr"
+import type { requestUpdate } from "./index.js"
 
 export { createKiruGlobalContext, type GlobalKiruEvent, type KiruGlobalContext }
 
@@ -56,7 +57,7 @@ function createReactiveMap<V>(): ReactiveMap<V> {
 type Evt =
   | {
       name: "mount"
-      data?: undefined
+      data?: typeof requestUpdate
     }
   | {
       name: "unmount"
@@ -73,6 +74,10 @@ type Evt =
 
 type GlobalKiruEvent = Evt["name"]
 
+interface SchedulerInterface {
+  requestUpdate: (vNode: Kiru.VNode) => void
+}
+
 interface KiruGlobalContext {
   readonly apps: AppContext[]
   emit<T extends Evt>(event: T["name"], ctx: AppContext, data?: T["data"]): void
@@ -91,10 +96,15 @@ interface KiruGlobalContext {
   fileRouterInstance?: {
     current: FileRouterController | null
   }
+  getSchedulerInterface?: (app: AppContext) => SchedulerInterface | null
 }
 
 function createKiruGlobalContext(): KiruGlobalContext {
   const contexts = new Set<AppContext>()
+  const contextToSchedulerInterface = new WeakMap<
+    AppContext,
+    SchedulerInterface
+  >()
   const listeners = new Map<
     GlobalKiruEvent,
     Set<(ctx: AppContext, data?: Evt["data"]) => void>
@@ -134,14 +144,25 @@ function createKiruGlobalContext(): KiruGlobalContext {
   }
 
   // Initialize event listeners
-  on("mount", (ctx) => contexts.add(ctx))
-  on("unmount", (ctx) => contexts.delete(ctx))
+  on("mount", (ctx, requestUpdate) => {
+    contexts.add(ctx)
+    if (requestUpdate && typeof requestUpdate === "function") {
+      contextToSchedulerInterface.set(ctx, { requestUpdate })
+    }
+  })
+  on("unmount", (ctx) => {
+    contexts.delete(ctx)
+    contextToSchedulerInterface.delete(ctx)
+  })
 
   if (__DEV__) {
     globalContext.HMRContext = createHMRContext()
     globalContext.profilingContext = createProfilingContext()
     globalContext.stores = createReactiveMap()
     globalContext.fileRouterInstance = fileRouterInstance
+    globalContext.getSchedulerInterface = (app) => {
+      return contextToSchedulerInterface.get(app) ?? null
+    }
   }
 
   return globalContext