@fictjs/runtime 0.0.7 → 0.0.9

package/src/dom.ts

@@ -25,7 +25,14 @@ import {
   type AttributeSetter,
   type BindingHandle,
 } from './binding'
-import { Properties, ChildProperties, Aliases, getPropAlias, SVGNamespace } from './constants'
+import {
+  Properties,
+  ChildProperties,
+  Aliases,
+  getPropAlias,
+  SVGElements,
+  SVGNamespace,
+} from './constants'
 import { __fictPushContext, __fictPopContext } from './hooks'
 import { Fragment } from './jsx'
 import {
@@ -43,6 +50,11 @@ import { createPropsProxy, unwrapProps } from './props'
 import { untrack } from './scheduler'
 import type { DOMElement, FictNode, FictVNode, RefObject } from './types'
 
+type NamespaceContext = 'svg' | 'mathml' | null
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+const MATHML_NS = 'http://www.w3.org/1998/Math/MathML'
+
 // ============================================================================
 // Main Render Function
 // ============================================================================
@@ -104,6 +116,19 @@ export function render(view: () => FictNode, container: HTMLElement): () => void
  * - Reactive values (functions returning any of the above)
  */
 export function createElement(node: FictNode): DOMElement {
+  return createElementWithContext(node, null)
+}
+
+function resolveNamespace(tagName: string, namespace: NamespaceContext): NamespaceContext {
+  if (tagName === 'svg') return 'svg'
+  if (tagName === 'math') return 'mathml'
+  if (namespace === 'mathml') return 'mathml'
+  if (namespace === 'svg') return 'svg'
+  if (SVGElements.has(tagName)) return 'svg'
+  return null
+}
+
+function createElementWithContext(node: FictNode, namespace: NamespaceContext): DOMElement {
   // Already a DOM node - pass through
   if (node instanceof Node) {
     return node
@@ -118,7 +143,12 @@ export function createElement(node: FictNode): DOMElement {
   if (typeof node === 'object' && node !== null && !(node instanceof Node)) {
     // Handle BindingHandle (createList, createConditional, etc)
     if ('marker' in node) {
-      return createElement((node as { marker: unknown }).marker as FictNode)
+      const handle = node as { marker: unknown; dispose?: () => void }
+      // Register dispose cleanup if available
+      if (typeof handle.dispose === 'function') {
+        registerRootCleanup(handle.dispose)
+      }
+      return createElement(handle.marker as FictNode)
     }
 
     const nodeRecord = node as unknown as Record<PropertyKey, unknown>
@@ -134,7 +164,7 @@ export function createElement(node: FictNode): DOMElement {
   if (Array.isArray(node)) {
     const frag = document.createDocumentFragment()
     for (const child of node) {
-      appendChildNode(frag, child)
+      appendChildNode(frag, child, namespace)
     }
     return frag
   }
@@ -186,7 +216,7 @@ export function createElement(node: FictNode): DOMElement {
       __fictPushContext()
       const rendered = vnode.type(props)
       __fictPopContext()
-      return createElement(rendered as FictNode)
+      return createElementWithContext(rendered as FictNode, namespace)
     } catch (err) {
       __fictPopContext()
       if (handleSuspend(err as any)) {
@@ -201,15 +231,26 @@ export function createElement(node: FictNode): DOMElement {
   if (vnode.type === Fragment) {
     const frag = document.createDocumentFragment()
     const children = vnode.props?.children as FictNode | FictNode[] | undefined
-    appendChildren(frag, children)
+    appendChildren(frag, children, namespace)
     return frag
   }
 
   // HTML Element
   const tagName = typeof vnode.type === 'string' ? vnode.type : 'div'
-  const el = document.createElement(tagName)
-  applyProps(el, vnode.props ?? {})
-  return el
+  const resolvedNamespace = resolveNamespace(tagName, namespace)
+  const el =
+    resolvedNamespace === 'svg'
+      ? document.createElementNS(SVG_NS, tagName)
+      : resolvedNamespace === 'mathml'
+        ? document.createElementNS(MATHML_NS, tagName)
+        : document.createElement(tagName)
+  applyProps(el, vnode.props ?? {}, resolvedNamespace === 'svg')
+  appendChildren(
+    el as unknown as ParentNode & Node,
+    vnode.props?.children as FictNode | FictNode[] | undefined,
+    tagName === 'foreignObject' ? null : resolvedNamespace,
+  )
+  return el as DOMElement
 }
 
 /**
@@ -231,7 +272,7 @@ export function template(
 
   const create = (): Node => {
     const t = isMathML
-      ? document.createElementNS('http://www.w3.org/1998/Math/MathML', 'template')
+      ? document.createElementNS(MATHML_NS, 'template')
       : document.createElement('template')
     t.innerHTML = html
 
@@ -279,7 +320,11 @@ function isBindingHandle(node: unknown): node is BindingHandle {
 /**
  * Append a child node to a parent, handling all node types including reactive values.
  */
-function appendChildNode(parent: HTMLElement | DocumentFragment, child: FictNode): void {
+function appendChildNode(
+  parent: ParentNode & Node,
+  child: FictNode,
+  namespace: NamespaceContext,
+): void {
   // Skip nullish values
   if (child === null || child === undefined || child === false) {
     return
@@ -287,7 +332,7 @@ function appendChildNode(parent: HTMLElement | DocumentFragment, child: FictNode
 
   // Handle BindingHandle (recursive)
   if (isBindingHandle(child)) {
-    appendChildNode(parent, child.marker)
+    appendChildNode(parent, child.marker, namespace)
     // Flush pending nodes now that markers are in the DOM
     child.flush?.()
     return
@@ -296,14 +341,14 @@ function appendChildNode(parent: HTMLElement | DocumentFragment, child: FictNode
   // Handle getter function (recursive)
   if (typeof child === 'function' && (child as () => FictNode).length === 0) {
     const childGetter = child as () => FictNode
-    createChildBinding(parent as HTMLElement | DocumentFragment, childGetter, createElement)
+    createChildBinding(parent, childGetter, node => createElementWithContext(node, namespace))
     return
   }
 
   // Static child - create element and append
   if (Array.isArray(child)) {
     for (const item of child) {
-      appendChildNode(parent, item)
+      appendChildNode(parent, item, namespace)
     }
     return
   }
@@ -313,14 +358,14 @@ function appendChildNode(parent: HTMLElement | DocumentFragment, child: FictNode
   if (typeof child !== 'object' || child === null) {
     domNode = document.createTextNode(String(child ?? ''))
   } else {
-    domNode = createElement(child as any) as Node
+    domNode = createElementWithContext(child as any, namespace) as Node
   }
 
   // Handle DocumentFragment manually to avoid JSDOM issues
   if (domNode.nodeType === 11) {
     const children = Array.from(domNode.childNodes)
     for (const node of children) {
-      appendChildNode(parent, node)
+      appendChildNode(parent, node as FictNode, namespace)
     }
     return
   }
@@ -345,19 +390,20 @@ function appendChildNode(parent: HTMLElement | DocumentFragment, child: FictNode
  * Append multiple children, handling arrays and nested structures.
  */
 function appendChildren(
-  parent: HTMLElement | DocumentFragment,
+  parent: ParentNode & Node,
   children: FictNode | FictNode[] | undefined,
+  namespace: NamespaceContext,
 ): void {
   if (children === undefined) return
 
   if (Array.isArray(children)) {
     for (const child of children) {
-      appendChildren(parent, child)
+      appendChildren(parent, child, namespace)
     }
     return
   }
 
-  appendChildNode(parent, children)
+  appendChildNode(parent, children, namespace)
 }
 
 // ============================================================================
@@ -368,10 +414,10 @@ function appendChildren(
  * Apply a ref to an element, supporting both callback and object refs.
  * Both types are automatically cleaned up on unmount.
  */
-function applyRef(el: HTMLElement, value: unknown): void {
+function applyRef(el: Element, value: unknown): void {
   if (typeof value === 'function') {
     // Callback ref
-    const refFn = value as (el: HTMLElement | null) => void
+    const refFn = value as (el: Element | null) => void
     refFn(el)
 
     // Match React behavior: call ref(null) on unmount
@@ -382,7 +428,7 @@ function applyRef(el: HTMLElement, value: unknown): void {
     }
   } else if (value && typeof value === 'object' && 'current' in value) {
     // Object ref
-    const refObj = value as RefObject<HTMLElement>
+    const refObj = value as RefObject<Element>
     refObj.current = el
 
     // Auto-cleanup on unmount
@@ -402,7 +448,7 @@ function applyRef(el: HTMLElement, value: unknown): void {
  * Apply props to an HTML element, setting up reactive bindings as needed.
  * Uses comprehensive property constants for correct attribute/property handling.
  */
-function applyProps(el: HTMLElement, props: Record<string, unknown>, isSVG = false): void {
+function applyProps(el: Element, props: Record<string, unknown>, isSVG = false): void {
   props = unwrapProps(props)
   const tagName = el.tagName
 
@@ -545,10 +591,6 @@ function applyProps(el: HTMLElement, props: Record<string, unknown>, isSVG = fal
     const attrName = Aliases[key] || key
     createAttributeBinding(el, attrName, value as MaybeReactive<unknown>, setAttribute)
   }
-
-  // Handle children
-  const children = props.children as FictNode | FictNode[] | undefined
-  appendChildren(el, children)
 }
 
 /**
@@ -565,7 +607,7 @@ function toPropertyName(name: string): string {
 /**
  * Set an attribute on an element, handling various value types.
  */
-const setAttribute: AttributeSetter = (el: HTMLElement, key: string, value: unknown): void => {
+const setAttribute: AttributeSetter = (el: Element, key: string, value: unknown): void => {
   // Remove attribute for nullish/false values
   if (value === undefined || value === null || value === false) {
     el.removeAttribute(key)
@@ -598,7 +640,7 @@ const setAttribute: AttributeSetter = (el: HTMLElement, key: string, value: unkn
 /**
  * Set a property on an element, ensuring nullish values clear sensibly.
  */
-const setProperty: AttributeSetter = (el: HTMLElement, key: string, value: unknown): void => {
+const setProperty: AttributeSetter = (el: Element, key: string, value: unknown): void => {
   if (value === undefined || value === null) {
     const fallback = key === 'checked' || key === 'selected' ? false : ''
     ;(el as unknown as Record<string, unknown>)[key] = fallback
@@ -610,7 +652,7 @@ const setProperty: AttributeSetter = (el: HTMLElement, key: string, value: unkno
     for (const k in value as Record<string, string>) {
       const v = (value as Record<string, string>)[k]
       if (v !== undefined) {
-        ;(el.style as unknown as Record<string, string>)[k] = String(v)
+        ;((el as HTMLElement).style as unknown as Record<string, string>)[k] = String(v)
       }
     }
     return
@@ -622,14 +664,14 @@ const setProperty: AttributeSetter = (el: HTMLElement, key: string, value: unkno
 /**
  * Set innerHTML on an element (used for dangerouslySetInnerHTML)
  */
-const setInnerHTML: AttributeSetter = (el: HTMLElement, _key: string, value: unknown): void => {
-  el.innerHTML = value == null ? '' : String(value)
+const setInnerHTML: AttributeSetter = (el: Element, _key: string, value: unknown): void => {
+  ;(el as HTMLElement).innerHTML = value == null ? '' : String(value)
 }
 
 /**
  * Set a boolean attribute on an element (empty string when true, removed when false)
  */
-const setBoolAttribute: AttributeSetter = (el: HTMLElement, key: string, value: unknown): void => {
+const setBoolAttribute: AttributeSetter = (el: Element, key: string, value: unknown): void => {
   if (value) {
     el.setAttribute(key, '')
   } else {
@@ -640,7 +682,7 @@ const setBoolAttribute: AttributeSetter = (el: HTMLElement, key: string, value:
 /**
  * Set an attribute with a namespace (for SVG xlink:href, etc.)
  */
-function setAttributeNS(el: HTMLElement, namespace: string, name: string, value: unknown): void {
+function setAttributeNS(el: Element, namespace: string, name: string, value: unknown): void {
   if (value == null) {
     el.removeAttributeNS(namespace, name)
   } else {

package/src/error-boundary.ts

@@ -4,6 +4,7 @@ import {
   createRootContext,
   destroyRoot,
   flushOnMount,
+  getCurrentRoot,
   pushRoot,
   popRoot,
   registerErrorHandler,
@@ -24,6 +25,7 @@ export function ErrorBoundary(props: ErrorBoundaryProps): FictNode {
   fragment.appendChild(marker)
 
   const currentView = createSignal<FictNode | null>(props.children ?? null)
+  const hostRoot = getCurrentRoot()
 
   let cleanup: (() => void) | undefined
   let activeNodes: Node[] = []
@@ -52,7 +54,7 @@ export function ErrorBoundary(props: ErrorBoundaryProps): FictNode {
       return
     }
 
-    const root = createRootContext()
+    const root = createRootContext(hostRoot)
     const prev = pushRoot(root)
     let nodes: Node[] = []
     try {

package/src/list-helpers.ts

@@ -11,6 +11,7 @@ import {
   createRootContext,
   destroyRoot,
   flushOnMount,
+  getCurrentRoot,
   popRoot,
   pushRoot,
   type RootContext,
@@ -200,7 +201,7 @@ function removeBlockRange(block: MarkerBlock): void {
   }
 }
 
-function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
+export function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
   let current = initialValue
   let version = 0
   const track = createSignal(version)
@@ -243,6 +244,16 @@ export function createKeyedListContainer<T = unknown>(): KeyedListContainer<T> {
     container.nextBlocks.clear()
 
     // Remove nodes (including markers)
+    // Check if markers are still in DOM before using Range
+    if (!startMarker.parentNode || !endMarker.parentNode) {
+      // Markers already removed, nothing to do
+      container.currentNodes = []
+      container.nextNodes = []
+      container.orderedBlocks.length = 0
+      container.nextOrderedBlocks.length = 0
+      container.orderedIndexByKey.clear()
+      return
+    }
     const range = document.createRange()
     range.setStartBefore(startMarker)
     range.setEndAfter(endMarker)
@@ -292,6 +303,7 @@ export function createKeyedBlock<T>(
   index: number,
   render: (item: Signal<T>, index: Signal<number>, key: string | number) => Node[],
   needsIndex = true,
+  hostRoot?: RootContext,
 ): KeyedBlock<T> {
   // Use versioned signal for all item types; avoid diffing proxy overhead for objects
   const itemSig = createVersionedSignalAccessor(item)
@@ -303,7 +315,7 @@ export function createKeyedBlock<T>(
         index = next as number
         return index
       }) as Signal<number>)
-  const root = createRootContext()
+  const root = createRootContext(hostRoot)
   const prevRoot = pushRoot(root)
 
   // Isolate child effects from the outer effect (e.g., performDiff) by clearing activeSub.
@@ -399,6 +411,7 @@ function createFineGrainedKeyedList<T>(
   needsIndex: boolean,
 ): KeyedListBinding {
   const container = createKeyedListContainer<T>()
+  const hostRoot = getCurrentRoot()
   const fragment = document.createDocumentFragment()
   fragment.append(container.startMarker, container.endMarker)
   let pendingItems: T[] | null = null
@@ -491,7 +504,7 @@ function createFineGrainedKeyedList<T>(
           }
 
           // Create new block
-          block = createKeyedBlock(key, item, index, renderItem, needsIndex)
+          block = createKeyedBlock(key, item, index, renderItem, needsIndex, hostRoot)
         }
 
         const resolvedBlock = block!

package/src/ref.ts

@@ -20,6 +20,6 @@ import type { RefObject } from './types'
  * }
  * ```
  */
-export function createRef<T extends HTMLElement = HTMLElement>(): RefObject<T> {
+export function createRef<T extends Element = HTMLElement>(): RefObject<T> {
   return { current: null }
 }

package/src/store.ts

@@ -2,6 +2,7 @@ import { signal, batch, type SignalAccessor } from './signal'
 
 const PROXY = Symbol('fict:store-proxy')
 const TARGET = Symbol('fict:store-target')
+const ITERATE_KEY = Symbol('fict:iterate')
 
 // ============================================================================
 // Store (Deep Proxy)
@@ -57,22 +58,43 @@ function wrap<T>(value: T): T {
       // Recursively wrap objects
       return wrap(value)
     },
+    has(target, prop) {
+      const result = Reflect.has(target, prop)
+      track(target, prop)
+      return result
+    },
+    ownKeys(target) {
+      track(target, ITERATE_KEY)
+      return Reflect.ownKeys(target)
+    },
+    getOwnPropertyDescriptor(target, prop) {
+      track(target, prop)
+      return Reflect.getOwnPropertyDescriptor(target, prop)
+    },
     set(target, prop, value, receiver) {
       if (prop === PROXY || prop === TARGET) return false
 
+      const hadKey = Object.prototype.hasOwnProperty.call(target, prop)
       const oldValue = Reflect.get(target, prop, receiver)
       if (oldValue === value) return true
 
       const result = Reflect.set(target, prop, value, receiver)
       if (result) {
         trigger(target, prop)
+        if (!hadKey) {
+          trigger(target, ITERATE_KEY)
+        }
       }
       return result
     },
     deleteProperty(target, prop) {
+      const hadKey = Object.prototype.hasOwnProperty.call(target, prop)
       const result = Reflect.deleteProperty(target, prop)
       if (result) {
         trigger(target, prop)
+        if (hadKey) {
+          trigger(target, ITERATE_KEY)
+        }
       }
       return result
     },
@@ -99,7 +121,9 @@ function track(target: object, prop: string | symbol) {
 
   let s = signals.get(prop)
   if (!s) {
-    s = signal(getLastValue(target, prop))
+    const initial =
+      prop === ITERATE_KEY ? (Reflect.ownKeys(target).length as number) : getLastValue(target, prop)
+    s = signal(initial)
     signals.set(prop, s)
   }
   s() // subscribe
@@ -110,7 +134,11 @@ function trigger(target: object, prop: string | symbol) {
   if (signals) {
     const s = signals.get(prop)
     if (s) {
-      s(getLastValue(target, prop)) // notify with new value
+      if (prop === ITERATE_KEY) {
+        s(Reflect.ownKeys(target).length)
+      } else {
+        s(getLastValue(target, prop)) // notify with new value
+      }
     }
   }
 }

package/src/types.ts

@@ -128,15 +128,15 @@ export interface DOMEventHandlers {
 // ============================================================================
 
 /** Ref callback type */
-export type RefCallback<T extends HTMLElement = HTMLElement> = (element: T) => void
+export type RefCallback<T extends Element = HTMLElement> = (element: T) => void
 
 /** Ref object type (for future use with createRef) */
-export interface RefObject<T extends HTMLElement = HTMLElement> {
+export interface RefObject<T extends Element = HTMLElement> {
   current: T | null
 }
 
 /** Ref type that can be either callback or object */
-export type Ref<T extends HTMLElement = HTMLElement> = RefCallback<T> | RefObject<T>
+export type Ref<T extends Element = HTMLElement> = RefCallback<T> | RefObject<T>
 
 // ============================================================================
 // Style Types