kiru 0.54.4 → 1.1.0

package/src/components/transition.ts

@@ -1,12 +1,11 @@
-import { useCallback } from "../hooks/useCallback.js"
-import { useEffect } from "../hooks/useEffect.js"
-import { useLayoutEffect } from "../hooks/useLayoutEffect.js"
-import { useRef } from "../hooks/useRef.js"
-import { useState } from "../hooks/useState.js"
+import { onCleanup } from "../hooks/onCleanup.js"
+import { signal, Signal } from "../signals/base.js"
+import { effect } from "../signals/effect.js"
+import { unwrap } from "../signals/utils.js"
 
 export type TransitionState = "entering" | "entered" | "exiting" | "exited"
 interface TransitionProps {
-  in: boolean
+  in: boolean | Signal<boolean>
   /**
    * Initial state of the transition
    * @default "exited"
@@ -22,43 +21,42 @@ interface TransitionProps {
   onTransitionEnd?: (state: "entered" | "exited") => void
 }
 
-export function Transition(props: TransitionProps) {
-  const [tState, setTState] = useState<TransitionState>(
-    props.initialState || "exited"
-  )
-  const timeoutRef = useRef<number | null>(null)
+export const Transition: Kiru.FC<TransitionProps> = (props) => {
+  const tState = signal<TransitionState>(props.initialState || "exited")
+  let timeoutRef: number | undefined
 
-  useLayoutEffect(() => {
-    if (props.in && tState !== "entered" && tState !== "entering") {
+  const setTransitionState = (transitionState: TransitionState) => {
+    clearTimeout(timeoutRef)
+    tState.value = transitionState
+    if (transitionState === "entered" || transitionState === "exited") {
+      if (props.onTransitionEnd) props.onTransitionEnd(transitionState)
+    }
+  }
+
+  const queueStateChange = (transitionState: "entered" | "exited") => {
+    timeoutRef = window.setTimeout(
+      () => setTransitionState(transitionState),
+      getTiming(transitionState, props.duration)
+    )
+  }
+
+  effect(() => {
+    const newIn = unwrap(props.in, true)
+    const current = tState.peek()
+    if (newIn && current !== "entered" && current !== "entering") {
       setTransitionState("entering")
       queueStateChange("entered")
-    } else if (!props.in && tState !== "exited" && tState !== "exiting") {
+    } else if (!newIn && current !== "exited" && current !== "exiting") {
       setTransitionState("exiting")
       queueStateChange("exited")
     }
-  }, [props.in, tState])
+  })
 
-  useEffect(() => () => clearTimeout(timeoutRef.current), [])
+  onCleanup(() => clearTimeout(timeoutRef))
 
-  const setTransitionState = useCallback((transitionState: TransitionState) => {
-    clearTimeout(timeoutRef.current)
-    setTState(transitionState)
-    if (transitionState === "entered" || transitionState === "exited") {
-      if (props.onTransitionEnd) props.onTransitionEnd(transitionState)
-    }
-  }, [])
-
-  const queueStateChange = useCallback(
-    (transitionState: "entered" | "exited") => {
-      timeoutRef.current = window.setTimeout(
-        () => setTransitionState(transitionState),
-        getTiming(transitionState, props.duration)
-      )
-    },
-    [props.duration]
-  )
-
-  return props.element(tState)
+  return (newProps) => {
+    return newProps.element(tState.value)
+  }
 }
 
 const defaultDuration = 150
@@ -74,7 +72,3 @@ function getTiming(
       return duration?.out ?? defaultDuration
   }
 }
-
-function clearTimeout(id: number | null) {
-  if (id != null) window.clearTimeout(id)
-}

package/src/constants.ts

@@ -1,11 +1,9 @@
 export {
   $SIGNAL,
   $CONTEXT,
-  $CONTEXT_PROVIDER,
   $FRAGMENT,
   $KIRU_ERROR,
   $HMR_ACCEPT,
-  $MEMO,
   $ERROR_BOUNDARY,
   $STREAM_DATA,
   $DEV_FILE_LINK,
@@ -16,8 +14,6 @@ export {
   FLAG_PLACEMENT,
   FLAG_DELETION,
   FLAG_STATIC_DOM,
-  FLAG_MEMO,
-  FLAG_NOOP,
   FLAG_DIRTY,
 }
 
@@ -25,11 +21,9 @@ export { voidElements, svgTags, booleanAttributes, snakeCaseAttributes }
 
 const $SIGNAL = Symbol.for("kiru.signal")
 const $CONTEXT = Symbol.for("kiru.context")
-const $CONTEXT_PROVIDER = Symbol.for("kiru.contextProvider")
 const $FRAGMENT = Symbol.for("kiru.fragment")
 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 $STREAM_DATA = Symbol.for("kiru.streamData")
 const $DEV_FILE_LINK = Symbol.for("kiru.devFileLink")
@@ -41,8 +35,6 @@ const FLAG_UPDATE = 1 << 1
 const FLAG_PLACEMENT = 1 << 2
 const FLAG_DELETION = 1 << 3
 const FLAG_STATIC_DOM = 1 << 4
-const FLAG_MEMO = 1 << 5
-const FLAG_NOOP = 1 << 6
 const FLAG_DIRTY = 1 << 7
 
 const EVENT_PREFIX_REGEX = /^on:?/

package/src/context.ts

@@ -1,30 +1,37 @@
-import { $CONTEXT, $CONTEXT_PROVIDER } from "./constants.js"
+import { $CONTEXT } from "./constants.js"
 import { createElement } from "./element.js"
-import { useState } from "./hooks/useState.js"
+import type { ContextNode } from "./types.utils.js"
+import { node } from "./globals.js"
 
 export function createContext<T>(defaultValue: T): Kiru.Context<T> {
-  const ctx: Kiru.Context<T> = {
-    [$CONTEXT]: true,
-    Provider: ({ value, children }: Kiru.ProviderProps<T>) => {
-      const [dependents] = useState(() => new Set<Kiru.VNode>())
-      return createElement(
-        $CONTEXT_PROVIDER,
-        { value, ctx, dependents },
-        typeof children === "function" ? children(value) : children
-      )
-    },
-    default: () => defaultValue,
-    set displayName(name: string) {
-      this.Provider.displayName = name
-    },
-    get displayName() {
-      return this.Provider.displayName || "Anonymous Context"
-    },
-  }
+  const Context: Kiru.Context<T> = Object.assign(
+    ({ value, children }: Kiru.ContextProps<T>) =>
+      createElement($CONTEXT, { value, ctx: Context }, children),
+    { [$CONTEXT]: () => defaultValue }
+  )
+  Context.displayName = "Anonymous Context"
+  return Context
+}
 
-  return ctx
+function getContextValue<T>(vNode: Kiru.VNode, context: Kiru.Context<T>): T {
+  let n = vNode.parent
+  while (n) {
+    if (n.type === $CONTEXT) {
+      const provider = n as ContextNode<unknown>
+      const { ctx, value } = provider.props
+      if (ctx === context) {
+        return value as T
+      }
+    }
+    n = n.parent
+  }
+  return context[$CONTEXT]()
 }
 
-export function isContext<T>(thing: unknown): thing is Kiru.Context<T> {
-  return typeof thing === "object" && !!thing && $CONTEXT in thing
+export function useContext<T>(context: Kiru.Context<T>): T {
+  const n = node.current
+  if (!n) {
+    throw new Error("useContext must be called inside a Kiru component")
+  }
+  return getContextValue(n, context)
 }

package/src/devtools.ts

@@ -0,0 +1,18 @@
+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" 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
+}