kiru 0.47.1 → 0.48.1

package/src/dom.ts

@@ -3,16 +3,16 @@ import {
   commitSnapshot,
   propFilters,
   propToHtmlAttr,
-  postOrderApply,
   getVNodeAppContext,
 } from "./utils.js"
 import {
   booleanAttributes,
-  FLAG_DELETION,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
   FLAG_STATIC_DOM,
   svgTags,
+  FLAG_NOOP,
+  EVENT_PREFIX_REGEX,
 } from "./constants.js"
 import { Signal } from "./signals/base.js"
 import { unwrap } from "./signals/utils.js"
@@ -30,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?: DomVNode
+  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) {
@@ -82,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",
@@ -170,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(
@@ -551,7 +546,7 @@ function placeDom(vNode: DomVNode, hostNode: HostNode) {
   const { node: parentVNodeWithDom, lastChild } = hostNode
   const dom = vNode.dom
   if (lastChild) {
-    lastChild.dom.after(dom)
+    lastChild.after(dom)
     return
   }
   // TODO: we can probably skip the 'next sibling search' if we're appending
@@ -605,76 +600,49 @@ function commitWork(vNode: VNode) {
   if (renderMode.current === "hydrate") {
     return traverseApply(vNode, commitSnapshot)
   }
-  handlePrePlacementFocusPersistence()
-
-  const hostNodes: HostNode[] = []
-  let currentHostNode: HostNode
-  const placementScopes: PlacementScope[] = []
-  let currentPlacementScope: PlacementScope | undefined
-
-  postOrderApply(vNode, {
-    onDescent: (node) => {
-      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
-        }
-      } else if (node.flags & FLAG_PLACEMENT) {
-        currentPlacementScope = { parent: node, active: true }
-        placementScopes.push(currentPlacementScope)
-      }
-    },
-    onAscent: (node) => {
-      let inheritsPlacement = false
-      if (currentPlacementScope?.child === node) {
-        currentPlacementScope.active = true
-        inheritsPlacement = true
-      }
-      if (node.flags & FLAG_DELETION) {
-        return commitDeletion(node)
-      }
-      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)
-    },
-    onBeforeAscent(node) {
-      if (currentPlacementScope?.parent === node) {
-        placementScopes.pop()
-        currentPlacementScope = placementScopes[placementScopes.length - 1]
+  const host: HostNode = {
+    node: vNode.dom ? (vNode as ElementVNode) : getDomParent(vNode),
+  }
+  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)
+}
+
+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)
       }
-      if (currentHostNode?.node === node.parent) {
-        hostNodes.pop()
-        currentHostNode = hostNodes[hostNodes.length - 1]
+      commitSnapshot(child)
+      child = child.sibling
+      continue
+    }
+
+    if (child.dom) {
+      commitWork_impl(child, { node: child as ElementVNode }, false)
+      if (!(child.flags & FLAG_STATIC_DOM)) {
+        commitDom(child as DomVNode, currentHostNode, inheritsPlacement)
       }
-    },
-  })
+    } else {
+      commitWork_impl(
+        child,
+        currentHostNode,
+        (child.flags & FLAG_PLACEMENT) > 0 || inheritsPlacement
+      )
+    }
 
-  handlePostPlacementFocusPersistence()
+    commitSnapshot(child)
+    child = child.sibling
+  }
 }
 
 function commitDom(
@@ -692,7 +660,7 @@ function commitDom(
   if (!vNode.prev || vNode.flags & FLAG_UPDATE) {
     updateDom(vNode)
   }
-  hostNode.lastChild = vNode
+  hostNode.lastChild = vNode.dom
 }
 
 function commitDeletion(vNode: VNode) {
@@ -711,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) {
@@ -730,3 +702,42 @@ function commitDeletion(vNode: VNode) {
 
   vNode.parent = null
 }
+
+function placeAndCommitNoopChildren(
+  parent: VNode,
+  currentHostNode: HostNode
+): void {
+  if (!parent.child) return
+
+  const domChildren: SomeDom[] = []
+  collectDomNodes(parent.child, domChildren)
+  if (domChildren.length === 0) return
+
+  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]
+}
+
+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
 }

package/src/reconciler.ts

@@ -1,10 +1,4 @@
-import {
-  $FRAGMENT,
-  FLAG_HAS_MEMO_ANCESTOR,
-  FLAG_MEMO,
-  FLAG_PLACEMENT,
-  FLAG_UPDATE,
-} from "./constants.js"
+import { $FRAGMENT, FLAG_PLACEMENT, FLAG_UPDATE } from "./constants.js"
 import { getVNodeAppContext, isVNode, latest } from "./utils.js"
 import { Signal } from "./signals/base.js"
 import { __DEV__ } from "./env.js"
@@ -32,7 +26,6 @@ export function reconcileChildren(parent: VNode, children: unknown) {
 }
 
 function reconcileSingleChild(parent: VNode, child: unknown) {
-  const deletions: VNode[] = (parent.deletions = [])
   const oldChild = parent.child
   if (oldChild === null) {
     return createChild(parent, child)
@@ -60,13 +53,12 @@ function reconcileSingleChild(parent: VNode, child: unknown) {
       }
       placeChild(newNode, 0, 0)
     }
-    existingChildren.forEach((child) => deletions.push(child))
+    existingChildren.forEach((child) => deleteChild(parent, child))
     return newNode
   }
 }
 
 function reconcileChildrenArray(parent: VNode, children: unknown[]) {
-  const deletions: VNode[] = (parent.deletions = [])
   let resultingChild: VNode | null = null
   let prevNewChild: VNode | null = null
 
@@ -90,7 +82,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
       break
     }
     if (oldChild && !newChild.prev) {
-      deletions.push(oldChild)
+      deleteChild(parent, oldChild)
     }
     lastPlacedIndex = placeChild(newChild, lastPlacedIndex, newIdx)
     if (prevNewChild === null) {
@@ -151,7 +143,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
     }
   }
 
-  existingChildren.forEach((child) => deletions.push(child))
+  existingChildren.forEach((child) => deleteChild(parent, child))
   return resultingChild
 }
 
@@ -460,9 +452,6 @@ function propsChanged(oldProps: VNode["props"], newProps: VNode["props"]) {
 function setParent(child: VNode, parent: VNode) {
   child.parent = parent
   child.depth = parent.depth + 1
-  if (parent.flags & (FLAG_MEMO | FLAG_HAS_MEMO_ANCESTOR)) {
-    child.flags |= FLAG_HAS_MEMO_ANCESTOR
-  }
 }
 
 function dev_emitUpdateNode() {
@@ -490,9 +479,17 @@ function mapRemainingChildren(child: VNode | null) {
   return map
 }
 
+function deleteChild(parent: VNode, child: VNode) {
+  if (parent.deletions === null) {
+    parent.deletions = [child]
+  } else {
+    parent.deletions.push(child)
+  }
+}
+
 function deleteRemainingChildren(parent: VNode, child: VNode | null) {
   while (child) {
-    parent.deletions!.push(child)
+    deleteChild(parent, child)
     child = child.sibling
   }
 }