@fictjs/runtime 0.0.8 → 0.0.10

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,22 @@ 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; flush?: () => void }
+      // Register dispose cleanup if available
+      if (typeof handle.dispose === 'function') {
+        registerRootCleanup(handle.dispose)
+      }
+      if (typeof handle.flush === 'function') {
+        const runFlush = () => handle.flush && handle.flush()
+        if (typeof queueMicrotask === 'function') {
+          queueMicrotask(runFlush)
+        } else {
+          Promise.resolve()
+            .then(runFlush)
+            .catch(() => undefined)
+        }
+      }
+      return createElement(handle.marker as FictNode)
     }
 
     const nodeRecord = node as unknown as Record<PropertyKey, unknown>
@@ -134,7 +174,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
   }
@@ -180,20 +220,20 @@ export function createElement(node: FictNode): DOMElement {
           })
 
     const props = createPropsProxy(baseProps)
+    // Create a fresh hook context for this component instance.
+    // This preserves slot state across re-renders driven by __fictRender.
+    __fictPushContext()
     try {
-      // Create a fresh hook context for this component instance.
-      // This preserves slot state across re-renders driven by __fictRender.
-      __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)) {
         return document.createComment('fict:suspend')
       }
       handleError(err, { source: 'render', componentName: vnode.type.name })
       throw err
+    } finally {
+      __fictPopContext()
     }
   }
 
@@ -201,15 +241,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 +282,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 +330,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 +342,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 +351,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 +368,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 +400,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 +424,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 +438,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 +458,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 +601,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 +617,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 +650,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 +662,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 +674,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 +692,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/effect.ts

@@ -61,7 +61,8 @@ export function createRenderEffect(fn: Effect): () => void {
         cleanup = maybeCleanup
       }
     } catch (err) {
-      if (handleError(err, { source: 'effect' }, rootForError)) {
+      const handled = handleError(err, { source: 'effect' }, rootForError)
+      if (handled) {
         return
       }
       throw err

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/hooks.ts

@@ -5,18 +5,26 @@ import { createSignal, type SignalAccessor, type ComputedAccessor } from './sign
 interface HookContext {
   slots: unknown[]
   cursor: number
+  rendering?: boolean
 }
 
 const ctxStack: HookContext[] = []
 
+function assertRenderContext(ctx: HookContext, hookName: string): void {
+  if (!ctx.rendering) {
+    throw new Error(`${hookName} can only be used during render execution`)
+  }
+}
+
 export function __fictUseContext(): HookContext {
   if (ctxStack.length === 0) {
-    const ctx: HookContext = { slots: [], cursor: 0 }
+    const ctx: HookContext = { slots: [], cursor: 0, rendering: true }
     ctxStack.push(ctx)
     return ctx
   }
   const ctx = ctxStack[ctxStack.length - 1]!
   ctx.cursor = 0
+  ctx.rendering = true
   return ctx
 }
 
@@ -35,6 +43,7 @@ export function __fictResetContext(): void {
 }
 
 export function __fictUseSignal<T>(ctx: HookContext, initial: T, slot?: number): SignalAccessor<T> {
+  assertRenderContext(ctx, '__fictUseSignal')
   const index = slot ?? ctx.cursor++
   if (!ctx.slots[index]) {
     ctx.slots[index] = createSignal(initial)
@@ -47,6 +56,7 @@ export function __fictUseMemo<T>(
   fn: () => T,
   slot?: number,
 ): ComputedAccessor<T> {
+  assertRenderContext(ctx, '__fictUseMemo')
   const index = slot ?? ctx.cursor++
   if (!ctx.slots[index]) {
     ctx.slots[index] = createMemo(fn)
@@ -55,6 +65,7 @@ export function __fictUseMemo<T>(
 }
 
 export function __fictUseEffect(ctx: HookContext, fn: () => void, slot?: number): void {
+  assertRenderContext(ctx, '__fictUseEffect')
   const index = slot ?? ctx.cursor++
   if (!ctx.slots[index]) {
     ctx.slots[index] = createEffect(fn)
@@ -64,9 +75,11 @@ export function __fictUseEffect(ctx: HookContext, fn: () => void, slot?: number)
 export function __fictRender<T>(ctx: HookContext, fn: () => T): T {
   ctxStack.push(ctx)
   ctx.cursor = 0
+  ctx.rendering = true
   try {
     return fn()
   } finally {
+    ctx.rendering = false
     ctxStack.pop()
   }
 }