kiru 1.0.1 → 1.1.0

package/src/devtools.ts

@@ -2,15 +2,17 @@ import type { DebuggerEntry } from "./globalContext"
 
 export namespace DevTools {
   export const track = (signal: Kiru.Signal<unknown>, label?: string) => {
+    if (!("window" in globalThis)) return
     window.__kiru.devtools?.track(signal, label)
   }
   export const untrack = (signal: Kiru.Signal<unknown>) => {
+    if (!("window" in globalThis)) return
     window.__kiru.devtools?.untrack(signal)
   }
   export const subscribe = (
     callback: (entries: Set<DebuggerEntry>) => void
   ) => {
-    if (!window.__kiru.devtools) return () => {}
-    return window.__kiru.devtools?.subscribe(callback)
+    if (!("window" in globalThis) || !window.__kiru.devtools) return () => {}
+    return window.__kiru.devtools.subscribe(callback)
   }
 }

package/src/dom/commit.ts

@@ -0,0 +1,133 @@
+import {
+  traverseApply,
+  commitSnapshot,
+  getVNodeApp,
+  setRef,
+  call,
+} from "../utils/index.js"
+import { FLAG_PLACEMENT, FLAG_STATIC_DOM, FLAG_UPDATE } from "../constants.js"
+import { __DEV__ } from "../env.js"
+import { postEffectCleanups, renderMode } from "../globals.js"
+import { isHmrUpdate } from "../hmr.js"
+import { unmountDomProps, updateDomProps } from "./props.js"
+import { HostNode, getDomParent, placeDom } from "./nodes.js"
+import type { AppHandle } from "../appHandle.js"
+import type { DomVNode, ElementVNode } from "../types.utils"
+
+export { commitWork, commitDeletion }
+
+type VNode = Kiru.VNode
+
+function commitWork(vNode: VNode) {
+  if (renderMode.current === "hydrate") {
+    return traverseApply(vNode, commitSnapshot)
+  }
+
+  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.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
+      )
+    }
+
+    commitSnapshot(child)
+    child = child.sibling
+  }
+}
+
+function commitDom(
+  vNode: DomVNode,
+  hostNode: HostNode,
+  inheritsPlacement: boolean
+) {
+  if (
+    inheritsPlacement ||
+    !vNode.dom.isConnected ||
+    vNode.flags & FLAG_PLACEMENT
+  ) {
+    placeDom(vNode, hostNode)
+  }
+  // During HMR we want to fully unmount previous props (events, signal
+  // subscriptions, style listeners, refs, etc.) before applying the new ones,
+  // so that we don't merge stale props with the new shape.
+  if (__DEV__ && vNode.prev && isHmrUpdate()) {
+    const { dom, prev, cleanups } = vNode
+    unmountDomProps(vNode, dom, prev.props, cleanups)
+    vNode.prev = null
+  }
+  if (!vNode.prev || vNode.flags & FLAG_UPDATE) {
+    updateDomProps(vNode)
+  }
+  hostNode.lastChild = vNode.dom
+}
+
+function commitDeletion(vNode: VNode) {
+  if (vNode === vNode.parent?.child) {
+    vNode.parent.child = vNode.sibling
+  }
+  let app: AppHandle
+  if (__DEV__) {
+    app = getVNodeApp(vNode)!
+  }
+  traverseApply(vNode, (node) => {
+    const {
+      subs,
+      cleanups,
+      dom,
+      props: { ref },
+      hooks,
+    } = node
+
+    subs?.forEach((unsub) => unsub())
+    if (cleanups) Object.values(cleanups).forEach((c) => c())
+    if (hooks) {
+      const { preCleanups, postCleanups } = hooks
+
+      postEffectCleanups.push(...postCleanups)
+      preCleanups.forEach(call)
+      preCleanups.length = postCleanups.length = 0
+    }
+
+    if (__DEV__) {
+      window.__kiru.profilingContext?.emit("removeNode", app)
+      if (dom instanceof Element) {
+        delete dom.__kiruNode
+      }
+    }
+
+    if (dom) {
+      if (dom.isConnected && !(node.flags & FLAG_STATIC_DOM)) {
+        dom.remove()
+      }
+      if (ref) {
+        setRef(ref, null)
+      }
+      delete node.dom
+    }
+  })
+
+  vNode.parent = null
+}

package/src/dom/focus.ts

@@ -0,0 +1,34 @@
+let focussedElement: HTMLElement | null = null
+
+export function captureFocus() {
+  const el = document.activeElement
+  if (el === document.body || !(el instanceof HTMLElement)) {
+    return
+  }
+  el.addEventListener("blur", placementBlurHandler)
+  focussedElement = el
+}
+
+export function reinstateFocus() {
+  if (focussedElement) {
+    focussedElement.removeEventListener("blur", placementBlurHandler)
+    if (focussedElement.isConnected) focussedElement.focus()
+    focussedElement = null
+  }
+}
+
+export function wrapFocusEventHandler(callback: (event: FocusEvent) => void) {
+  return (event: FocusEvent) => {
+    if (focussedElement) {
+      event.preventDefault()
+      event.stopPropagation()
+      return
+    }
+    callback(event)
+  }
+}
+
+function placementBlurHandler(event: FocusEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+}

package/src/dom/index.ts

@@ -0,0 +1,3 @@
+export { commitDeletion, commitWork } from "./commit.js"
+export { reinstateFocus, captureFocus } from "./focus.js"
+export { createDom, hydrateDom } from "./nodes.js"

package/src/dom/nodes.ts

@@ -0,0 +1,204 @@
+import { svgTags, FLAG_PLACEMENT, FLAG_STATIC_DOM } from "../constants.js"
+import { Signal } from "../signals/base.js"
+import { unwrap } from "../signals/utils.js"
+import { hydrationStack } from "../hydration.js"
+import {
+  getVNodeApp,
+  isValidTextChild,
+  registerVNodeCleanup,
+} from "../utils/index.js"
+import { KiruError } from "../error.js"
+import { __DEV__, isBrowser } from "../env.js"
+import type { DomVNode, ElementVNode, MaybeDom, SomeDom } from "../types.utils"
+
+export { createDom, hydrateDom, getDomParent, placeDom }
+
+type VNode = Kiru.VNode
+
+export type HostNode = {
+  node: ElementVNode
+  lastChild?: SomeDom
+}
+
+function createDom(vNode: DomVNode): SomeDom {
+  const t = vNode.type
+  const dom =
+    t == "#text"
+      ? createTextNode(vNode)
+      : svgTags.has(t)
+      ? document.createElementNS("http://www.w3.org/2000/svg", t)
+      : document.createElement(t)
+
+  return dom
+}
+
+function hydrateDom(vNode: VNode) {
+  const dom =
+    vNode.type === "#text"
+      ? getOrCreateTextNode(vNode)
+      : hydrationStack.getCurrentChild()
+
+  hydrationStack.bumpChildIndex()
+
+  if (!dom) {
+    throw new KiruError({
+      message: `Hydration mismatch - no node found`,
+      vNode,
+    })
+  }
+  let nodeName = dom.nodeName
+  if (!svgTags.has(nodeName)) {
+    nodeName = nodeName.toLowerCase()
+  }
+  if ((vNode.type as string) !== nodeName) {
+    throw new KiruError({
+      message: `Hydration mismatch - expected node of type ${vNode.type.toString()} but received ${nodeName}`,
+      vNode,
+    })
+  }
+  vNode.dom = dom
+  if (vNode.type !== "#text" && !(vNode.flags & FLAG_STATIC_DOM)) {
+    // updateDom is called later during commit phase
+    return
+  }
+  if (Signal.isSignal(vNode.props.nodeValue)) {
+    subTextNode(vNode, dom as Text, vNode.props.nodeValue)
+  }
+
+  let prev = vNode
+  let sibling = vNode.sibling
+  while (sibling && sibling.type === "#text") {
+    const sib = sibling
+    hydrationStack.bumpChildIndex()
+    const prevText = String(unwrap(prev.props.nodeValue) ?? "")
+    const dom = (prev.dom as Text).splitText(prevText.length)
+    sib.dom = dom
+    if (Signal.isSignal(sib.props.nodeValue)) {
+      subTextNode(sib, dom, sib.props.nodeValue)
+    }
+    prev = sibling
+    sibling = sibling.sibling
+  }
+}
+
+function getDomParent(vNode: VNode): ElementVNode {
+  let parentNode: VNode | null = vNode.parent
+  let parentNodeElement = parentNode?.dom
+  while (parentNode && !parentNodeElement) {
+    parentNode = parentNode.parent
+    parentNodeElement = parentNode?.dom
+  }
+
+  if (!parentNodeElement || !parentNode) {
+    if (!vNode.parent && vNode.dom) {
+      return vNode as ElementVNode
+    }
+
+    throw new KiruError({
+      message: "No DOM parent found while attempting to place node.",
+      vNode: vNode,
+    })
+  }
+  return parentNode as ElementVNode
+}
+
+function placeDom(vNode: DomVNode, hostNode: HostNode) {
+  const { node: parentVNodeWithDom, lastChild } = hostNode
+  const dom = vNode.dom
+  if (lastChild) {
+    lastChild.after(dom)
+    return
+  }
+  const nextSiblingDom = getNextSiblingDom(vNode, parentVNodeWithDom)
+  if (nextSiblingDom) {
+    parentVNodeWithDom.dom.insertBefore(dom, nextSiblingDom)
+    return
+  }
+
+  parentVNodeWithDom.dom.appendChild(dom)
+}
+
+function getNextSiblingDom(vNode: VNode, parent: ElementVNode): MaybeDom {
+  let node: VNode | null = vNode
+
+  while (node) {
+    let sibling = node.sibling
+
+    while (sibling) {
+      if (!(sibling.flags & (FLAG_PLACEMENT | FLAG_STATIC_DOM))) {
+        const dom = findFirstHostDom(sibling)
+        if (dom?.isConnected) return dom
+      }
+      sibling = sibling.sibling
+    }
+
+    node = node.parent
+    if (!node || node.flags & FLAG_STATIC_DOM || node === parent) {
+      return
+    }
+  }
+
+  return
+}
+
+function findFirstHostDom(vNode: VNode): MaybeDom {
+  let node: VNode | null = vNode
+  while (node) {
+    if (node.dom) return node.dom
+    if (node.flags & FLAG_STATIC_DOM) return
+    node = node.child
+  }
+  return
+}
+
+function getOrCreateTextNode(vNode: VNode): MaybeDom {
+  const sig = vNode.props.nodeValue
+  if (!Signal.isSignal(sig)) {
+    return hydrationStack.getCurrentChild()
+  }
+
+  const value = sig.peek()
+  if (isValidTextChild(value)) {
+    return hydrationStack.getCurrentChild()
+  }
+
+  const dom = createSignalTextNode(vNode, sig)
+  const currentChild = hydrationStack.getCurrentChild()
+
+  if (!currentChild) {
+    return hydrationStack.getCurrentParent().appendChild(dom)
+  }
+
+  currentChild.before(dom)
+  return dom
+}
+
+function subTextNode(vNode: VNode, textNode: Text, signal: Signal<string>) {
+  const cleanup = signal.subscribe((value, prev) => {
+    if (value === prev) return
+    textNode.nodeValue = value
+    if (__DEV__ && isBrowser) {
+      window.__kiru?.profilingContext?.emit(
+        "signalTextUpdate",
+        getVNodeApp(vNode)!
+      )
+    }
+  })
+  registerVNodeCleanup(vNode, "nodeValue", cleanup)
+}
+
+function createTextNode(vNode: VNode): Text {
+  const { nodeValue } = vNode.props
+  if (Signal.isSignal(nodeValue)) {
+    return createSignalTextNode(vNode, nodeValue)
+  }
+
+  return document.createTextNode(nodeValue)
+}
+
+function createSignalTextNode(vNode: VNode, nodeValue: Signal<string>): Text {
+  const value = nodeValue.peek() ?? ""
+  const textNode = document.createTextNode(value)
+  subTextNode(vNode, textNode, nodeValue)
+  return textNode
+}