kiru 0.48.0 → 0.48.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kiru",
-  "version": "0.48.0",
+  "version": "0.48.2",
   "description": "A batteries-included, easy-to-use rendering library with a tiny footprint",
   "main": "dist/index.js",
   "type": "module",

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 { requestUpdate, flushSync } from "./scheduler.js"
+import { renderRootSync } from "./scheduler.js"
 
 type VNode = Kiru.VNode
 
@@ -53,14 +53,12 @@ export function mount(
 
   function render(children: JSX.Element) {
     rootNode.props.children = children
-    requestUpdate(rootNode)
-    flushSync()
+    renderRootSync(rootNode)
   }
 
   function unmount() {
     rootNode.props.children = null
-    requestUpdate(rootNode)
-    flushSync()
+    renderRootSync(rootNode)
     if (__DEV__) {
       delete container.__kiruNode
       delete rootNode.app

package/src/constants.ts

@@ -9,6 +9,7 @@ export {
   $HYDRATION_BOUNDARY,
   CONSECUTIVE_DIRTY_LIMIT,
   REGEX_UNIT,
+  EVENT_PREFIX_REGEX,
   FLAG_UPDATE,
   FLAG_PLACEMENT,
   FLAG_DELETION,
@@ -50,6 +51,8 @@ const REGEX_UNIT = {
   ALPHA_UPPER_G: /[A-Z]/g,
 } as const
 
+const EVENT_PREFIX_REGEX = /^on:?/
+
 const voidElements = new Set([
   "area",
   "base",

package/src/customEvents.ts

@@ -0,0 +1,22 @@
+export class CustomEvents {
+  private constructor() {}
+
+  static on<K extends keyof Kiru.CustomEvents & string>(
+    type: K,
+    callback: (event: CustomEvent<Kiru.CustomEvents[K]>) => void
+  ) {
+    window.addEventListener(type, callback as unknown as EventListener)
+    return () =>
+      window.removeEventListener(type, callback as unknown as EventListener)
+  }
+
+  static dispatch<K extends keyof Kiru.CustomEvents & string>(
+    type: K,
+    detail: Kiru.CustomEvents[K],
+    target?: Element
+  ) {
+    ;(target || document).dispatchEvent(
+      new CustomEvent(type, { detail, bubbles: true })
+    )
+  }
+}

package/src/dom.ts

@@ -12,6 +12,7 @@ import {
   FLAG_STATIC_DOM,
   svgTags,
   FLAG_NOOP,
+  EVENT_PREFIX_REGEX,
 } from "./constants.js"
 import { Signal } from "./signals/base.js"
 import { unwrap } from "./signals/utils.js"
@@ -29,17 +30,47 @@ import type {
 } from "./types.utils"
 import type { AppContext } from "./appContext.js"
 
-export { commitWork, commitDeletion, createDom, hydrateDom }
+export {
+  commitWork,
+  onBeforeFlushDomChanges,
+  onAfterFlushDomChanges,
+  commitDeletion,
+  createDom,
+  hydrateDom,
+}
 
 type VNode = Kiru.VNode
 type HostNode = {
   node: ElementVNode
   lastChild?: SomeDom
 }
-type PlacementScope = {
-  parent: VNode
-  active: boolean
-  child?: VNode
+
+let persistingFocus = false
+let didBlurActiveElement = false
+const placementBlurHandler = (event: Event) => {
+  event.preventDefault()
+  event.stopPropagation()
+  didBlurActiveElement = true
+}
+
+let currentActiveElement: Element | null = null
+function onBeforeFlushDomChanges() {
+  persistingFocus = true
+  currentActiveElement = document.activeElement
+  if (currentActiveElement && currentActiveElement !== document.body) {
+    currentActiveElement.addEventListener("blur", placementBlurHandler)
+  }
+}
+
+function onAfterFlushDomChanges() {
+  if (didBlurActiveElement) {
+    currentActiveElement!.removeEventListener("blur", placementBlurHandler)
+    if (currentActiveElement!.isConnected) {
+      ;(currentActiveElement as any).focus()
+    }
+    didBlurActiveElement = false
+  }
+  persistingFocus = false
 }
 
 function setDomRef(ref: Kiru.Ref<SomeDom | null>, value: SomeDom | null) {
@@ -81,42 +112,6 @@ function createTextNode(vNode: VNode): Text {
   return textNode
 }
 
-/**
- * toggled when we fire a focus event on an element
- * persist focus when the currently focused element is moved.
- */
-let persistingFocus = false
-
-// gets set prior to dom commits
-let currentActiveElement: Element | null = null
-
-let didBlurActiveElement = false
-const placementBlurHandler = (event: Event) => {
-  event.preventDefault()
-  event.stopPropagation()
-  didBlurActiveElement = true
-}
-
-function handlePrePlacementFocusPersistence() {
-  persistingFocus = true
-  currentActiveElement = document.activeElement
-  if (currentActiveElement && currentActiveElement !== document.body) {
-    currentActiveElement.addEventListener("blur", placementBlurHandler)
-  }
-}
-
-function handlePostPlacementFocusPersistence() {
-  if (!didBlurActiveElement) {
-    persistingFocus = false
-    return
-  }
-  currentActiveElement?.removeEventListener("blur", placementBlurHandler)
-  if (currentActiveElement?.isConnected) {
-    if ("focus" in currentActiveElement) (currentActiveElement as any).focus()
-  }
-  persistingFocus = false
-}
-
 function wrapFocusEventHandler(
   vNode: VNode,
   evtName: "focus" | "blur",
@@ -169,7 +164,8 @@ function updateDom(vNode: VNode) {
 
     if (propFilters.isEvent(key)) {
       if (prev !== next || renderMode.current === "hydrate") {
-        const evtName = key.toLowerCase().substring(2)
+        const evtName = key.replace(EVENT_PREFIX_REGEX, "")
+
         const isFocusEvent = evtName === "focus" || evtName === "blur"
         if (key in prevProps) {
           dom.removeEventListener(
@@ -604,128 +600,49 @@ function commitWork(vNode: VNode) {
   if (renderMode.current === "hydrate") {
     return traverseApply(vNode, commitSnapshot)
   }
-  handlePrePlacementFocusPersistence()
-
-  const hostNodes: HostNode[] = []
-  let currentHostNode: HostNode | undefined
-  const placementScopes: PlacementScope[] = []
-  let currentPlacementScope: PlacementScope | undefined
 
-  const root = vNode
-  const rootChild = root.child
-
-  const onAscent = (node: VNode) => {
-    let inheritsPlacement = false
-    if (currentPlacementScope?.child === node) {
-      currentPlacementScope.active = true
-      inheritsPlacement = true
-    }
-    if (node.dom) {
-      if (!currentHostNode) {
-        currentHostNode = { node: getDomParent(node) }
-        hostNodes.push(currentHostNode)
-      }
-      if (!(node.flags & FLAG_STATIC_DOM)) {
-        commitDom(node as DomVNode, currentHostNode, inheritsPlacement)
-      }
-    }
-    commitSnapshot(node)
+  const host: HostNode = {
+    node: vNode.dom ? (vNode as ElementVNode) : getDomParent(vNode),
   }
-
-  if (!rootChild) {
-    onAscent(root)
-    return
+  commitWork_impl(vNode, host, (vNode.flags & FLAG_PLACEMENT) > 0)
+  if (vNode.dom && !(vNode.flags & FLAG_STATIC_DOM)) {
+    commitDom(vNode as DomVNode, host, false)
   }
+  commitSnapshot(vNode)
+}
 
-  const onDescent = (node: VNode) => {
-    if (node.dom) {
-      // collect host nodes as we go
-      currentHostNode = { node: node as ElementVNode }
-      hostNodes.push(currentHostNode)
-
-      if (node.prev && "innerHTML" in node.prev.props) {
-        /**
-         * We need to update innerHTML during descent in cases
-         * where we previously set innerHTML on this element but
-         * now we provide children. Setting innerHTML _after_
-         * appending children will yeet em into the abyss.
-         */
-        delete node.props.innerHTML
-        setInnerHTML(node.dom as SomeElement, "")
-        // remove innerHTML from prev to prevent our ascension pass from doing this again
-        delete node.prev.props.innerHTML
-      }
-
-      if (currentPlacementScope?.active) {
-        currentPlacementScope.child = node
-        // prevent scope applying to descendants of this element node
-        currentPlacementScope.active = false
+function commitWork_impl(
+  vNode: VNode,
+  currentHostNode: HostNode,
+  inheritsPlacement: boolean
+) {
+  let child: VNode | null = vNode.child
+  while (child) {
+    if (child.flags & FLAG_NOOP) {
+      if (child.flags & FLAG_PLACEMENT) {
+        placeAndCommitNoopChildren(child, currentHostNode)
       }
-    } else if (node.flags & FLAG_PLACEMENT) {
-      currentPlacementScope = { parent: node, active: true }
-      placementScopes.push(currentPlacementScope)
+      commitSnapshot(child)
+      child = child.sibling
+      continue
     }
-  }
 
-  onDescent(root)
-  let branch = rootChild
-  while (branch) {
-    let c = branch
-    while (c) {
-      if (!c.child) break
-      if (c.flags & FLAG_NOOP) {
-        if (c.flags & FLAG_PLACEMENT) {
-          const directDomChildren = findDirectDomChildren(c)
-          if (directDomChildren.length === 0) {
-            break
-          }
-          if (!currentHostNode) {
-            currentHostNode = { node: getDomParent(c) }
-            hostNodes.push(currentHostNode)
-          }
-          const { node, lastChild } = currentHostNode
-          if (lastChild) {
-            lastChild.after(...directDomChildren)
-          } else {
-            const nextSiblingDom = getNextSiblingDom(c, node)
-            const parentDom = node.dom
-            if (nextSiblingDom) {
-              const [first, ...rest] = directDomChildren
-              parentDom.insertBefore(first, nextSiblingDom)
-              first.after(...rest)
-            } else {
-              parentDom.append(...directDomChildren)
-            }
-          }
-          currentHostNode.lastChild =
-            directDomChildren[directDomChildren.length - 1]
-        }
-        break
+    if (child.dom) {
+      commitWork_impl(child, { node: child as ElementVNode }, false)
+      if (!(child.flags & FLAG_STATIC_DOM)) {
+        commitDom(child as DomVNode, currentHostNode, inheritsPlacement)
       }
-      onDescent(c)
-      c = c.child
+    } else {
+      commitWork_impl(
+        child,
+        currentHostNode,
+        (child.flags & FLAG_PLACEMENT) > 0 || inheritsPlacement
+      )
     }
 
-    while (c && c !== root) {
-      onAscent(c)
-      if (c.sibling) {
-        branch = c.sibling
-        break
-      }
-      if (currentPlacementScope?.parent === c) {
-        placementScopes.pop()
-        currentPlacementScope = placementScopes[placementScopes.length - 1]
-      }
-      if (currentHostNode?.node === c.parent) {
-        hostNodes.pop()
-        currentHostNode = hostNodes[hostNodes.length - 1]
-      }
-      c = c.parent!
-    }
-    if (c === root) break
+    commitSnapshot(child)
+    child = child.sibling
   }
-  onAscent(root)
-  handlePostPlacementFocusPersistence()
 }
 
 function commitDom(
@@ -762,12 +679,16 @@ function commitDeletion(vNode: VNode) {
       dom,
       props: { ref },
     } = node
+
     subs?.forEach((unsub) => unsub())
     if (cleanups) Object.values(cleanups).forEach((c) => c())
     while (hooks?.length) hooks.pop()!.cleanup?.()
 
     if (__DEV__) {
       window.__kiru?.profilingContext?.emit("removeNode", ctx)
+      if (dom instanceof Element) {
+        delete dom.__kiruNode
+      }
     }
 
     if (dom) {
@@ -782,24 +703,41 @@ function commitDeletion(vNode: VNode) {
   vNode.parent = null
 }
 
-function findDirectDomChildren(vNode: VNode): SomeDom[] {
+function placeAndCommitNoopChildren(
+  parent: VNode,
+  currentHostNode: HostNode
+): void {
+  if (!parent.child) return
+
   const domChildren: SomeDom[] = []
+  collectDomNodes(parent.child, domChildren)
+  if (domChildren.length === 0) return
 
-  function collectDomNodes(node: VNode | null): void {
-    while (node) {
-      if (node.dom) {
-        // Found a DOM node, add it to the collection
-        domChildren.push(node.dom)
-      } else if (node.child) {
-        // This is a component or fragment, traverse its children
-        collectDomNodes(node.child)
-      }
-      node = node.sibling
+  const { node, lastChild } = currentHostNode
+  if (lastChild) {
+    lastChild.after(...domChildren)
+  } else {
+    const nextSiblingDom = getNextSiblingDom(parent, node)
+    const parentDom = node.dom
+    if (nextSiblingDom) {
+      const [first, ...rest] = domChildren
+      parentDom.insertBefore(first, nextSiblingDom)
+      first.after(...rest)
+    } else {
+      parentDom.append(...domChildren)
     }
   }
+  currentHostNode.lastChild = domChildren[domChildren.length - 1]
+}
 
-  // Start collecting from the memo's children
-  collectDomNodes(vNode.child)
-
-  return domChildren
+function collectDomNodes(firstChild: VNode, children: SomeDom[]): void {
+  let child: VNode | null = firstChild
+  while (child) {
+    if (child.dom) {
+      children.push(child.dom)
+    } else if (child.child) {
+      collectDomNodes(child.child, children)
+    }
+    child = child.sibling
+  }
 }

package/src/globalContext.ts

@@ -1,8 +1,9 @@
-import type { AppContext } from "./appContext"
 import { __DEV__ } from "./env.js"
 import { createHMRContext } from "./hmr.js"
 import { createProfilingContext } from "./profiling.js"
-import { Store } from "./store"
+import type { AppContext } from "./appContext"
+import type { Store } from "./store"
+import type { SWRCache } from "./swr"
 
 export { createKiruGlobalContext, type GlobalKiruEvent, type KiruGlobalContext }
 
@@ -75,7 +76,7 @@ interface KiruGlobalContext {
   stores?: ReactiveMap<Store<any, any>>
   HMRContext?: ReturnType<typeof createHMRContext>
   profilingContext?: ReturnType<typeof createProfilingContext>
-  globalState: Record<symbol, any>
+  SWRGlobalCache?: SWRCache
   emit<T extends Evt>(event: T["name"], ctx: AppContext, data?: T["data"]): void
   on<T extends Evt>(
     event: T["name"],
@@ -93,8 +94,6 @@ function createKiruGlobalContext(): KiruGlobalContext {
     GlobalKiruEvent,
     Set<(ctx: AppContext, data?: Evt["data"]) => void>
   >()
-  const globalState: Record<symbol, any> = {}
-
   let stores: ReactiveMap<Store<any, any>> | undefined
   let HMRContext: ReturnType<typeof createHMRContext> | undefined
   let profilingContext: ReturnType<typeof createProfilingContext> | undefined
@@ -137,7 +136,6 @@ function createKiruGlobalContext(): KiruGlobalContext {
     get profilingContext() {
       return profilingContext
     },
-    globalState,
     emit,
     on,
     off,

package/src/hooks/useAsync.ts

@@ -1,24 +1,9 @@
 import { __DEV__ } from "../env.js"
 import { noop } from "../utils.js"
 import { depsRequireChange, sideEffectsEnabled, useHook } from "./utils.js"
+import type { AsyncTaskState } from "../types.utils.js"
 
-export type UseAsyncState<T> = (
-  | /** loading*/ {
-      data: null
-      loading: true
-      error: null
-    }
-  | /** loaded */ {
-      data: T
-      loading: false
-      error: null
-    }
-  | /** error */ {
-      data: null
-      loading: false
-      error: UseAsyncError
-    }
-) & {
+export type UseAsyncState<T> = AsyncTaskState<T, UseAsyncError> & {
   invalidate: () => void
 }
 
@@ -34,7 +19,7 @@ export class UseAsyncError extends Error {
   }
 }
 
-type AsyncTaskState<T> = {
+type InternalTaskState<T> = {
   data: T | null
   loading: boolean
   error: Error | null
@@ -62,10 +47,8 @@ export function useAsync<T>(
     {
       deps,
       id: 0,
-      task: null as any as AsyncTaskState<T>,
-      load: noop as (
-        func: (ctx: UseAsyncCallbackContext) => Promise<T>
-      ) => void,
+      task: null as any as InternalTaskState<T>,
+      load: noop as (func: (ctx: UseAsyncCallbackContext) => Promise<T>) => void,
     },
     ({ hook, isInit, isHMR, update }) => {
       if (__DEV__) {
@@ -83,7 +66,7 @@ export function useAsync<T>(
             invalidated = true
           })
           const id = ++hook.id
-          const task: AsyncTaskState<T> = (hook.task = {
+          const task: InternalTaskState<T> = (hook.task = {
             abortController,
             data: null,
             loading: true,
@@ -130,7 +113,7 @@ export function useAsync<T>(
   )
 }
 
-function abortTask<T>(task: AsyncTaskState<T> | null): void {
+function abortTask<T>(task: InternalTaskState<T> | null): void {
   if (task === null || task.abortController.signal.aborted) return
   task.abortController.abort()
 }

package/src/index.ts

@@ -1,11 +1,12 @@
-import { createKiruGlobalContext } from "./globalContext.js"
 import { __DEV__ } from "./env.js"
+import { createKiruGlobalContext } from "./globalContext.js"
 
 export type * from "./types"
 export * from "./signals/index.js"
 export * from "./appContext.js"
-export * from "./context.js"
 export * from "./cloneVNode.js"
+export * from "./context.js"
+export * from "./customEvents.js"
 export * from "./element.js"
 export * from "./hooks/index.js"
 export * from "./lazy.js"
@@ -16,6 +17,8 @@ export { nextIdle, flushSync, requestUpdate } from "./scheduler.js"
 export * from "./store.js"
 export * from "./transition.js"
 
-if ("window" in globalThis) {
-  globalThis.window.__kiru ??= createKiruGlobalContext()
+if (__DEV__) {
+  if ("window" in globalThis) {
+    globalThis.window.__kiru ??= createKiruGlobalContext()
+  }
 }

package/src/lazy.ts

@@ -14,13 +14,17 @@ import {
 import type { SomeDom } from "./types.utils"
 import { noop } from "./utils.js"
 
-type FCModule = { default: Kiru.FC<any> }
+interface FCModule {
+  default: Kiru.FC<any>
+}
+
 type LazyImportValue = Kiru.FC<any> | FCModule
+
 type InferLazyImportProps<T extends LazyImportValue> = T extends FCModule
   ? Kiru.InferProps<T["default"]>
   : Kiru.InferProps<T>
 
-type LazyState = {
+interface LazyState {
   fn: string
   promise: Promise<LazyImportValue>
   result: Kiru.FC | null

package/src/portal.ts

@@ -5,7 +5,7 @@ import { renderMode } from "./globals.js"
 import { useVNode } from "./hooks/utils.js"
 import { nextIdle, requestUpdate } from "./scheduler.js"
 
-type PortalProps = {
+interface PortalProps {
   children?: JSX.Children
   container: HTMLElement | (() => HTMLElement)
 }

package/src/profiling.ts

@@ -14,7 +14,7 @@ const ProfilingEvents = [
 
 export type ProfilingEvent = (typeof ProfilingEvents)[number]
 
-type TickTS = {
+interface TickTS {
   start: number
   end: number
 }