@fictjs/runtime 0.10.0 → 0.12.0

package/src/dom.ts

@@ -123,6 +123,7 @@ function annotateComponentElements(
  */
 export function render(view: () => FictNode, container: HTMLElement): () => void {
   const root = createRootContext()
+  root.ownerDocument = container.ownerDocument ?? document
   const prev = pushRoot(root)
   let dom: DOMElement = undefined as unknown as DOMElement
   try {
@@ -166,6 +167,7 @@ export function render(view: () => FictNode, container: HTMLElement): () => void
  */
 export function hydrateComponent(view: () => FictNode, container: HTMLElement): () => void {
   const root = createRootContext()
+  root.ownerDocument = container.ownerDocument ?? document
   const prev = pushRoot(root)
 
   // Enable hydration flags for bindings that check __fictIsHydrating()
@@ -209,7 +211,7 @@ export function hydrateComponent(view: () => FictNode, container: HTMLElement):
  * - Reactive values (functions returning any of the above)
  */
 export function createElement(node: FictNode): DOMElement {
-  return createElementWithContext(node, null)
+  return createElementWithContext(node, null, resolveOwnerDocument())
 }
 
 function resolveNamespace(tagName: string, namespace: NamespaceContext): NamespaceContext {
@@ -221,7 +223,15 @@ function resolveNamespace(tagName: string, namespace: NamespaceContext): Namespa
   return null
 }
 
-function createElementWithContext(node: FictNode, namespace: NamespaceContext): DOMElement {
+function resolveOwnerDocument(ownerDocument?: Document): Document {
+  return ownerDocument ?? getCurrentRoot()?.ownerDocument ?? document
+}
+
+function createElementWithContext(
+  node: FictNode,
+  namespace: NamespaceContext,
+  ownerDocument: Document,
+): DOMElement {
   // Already a DOM node - pass through
   if (node instanceof Node) {
     return node
@@ -229,22 +239,22 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
 
   // Null/undefined/false - empty placeholder
   if (node === null || node === undefined || node === false) {
-    return document.createTextNode('')
+    return ownerDocument.createTextNode('')
   }
 
   // Reactive getter function - resolve to actual node
   if (isReactive(node)) {
     const resolved = (node as () => FictNode)()
     if (resolved === node) {
-      return document.createTextNode('')
+      return ownerDocument.createTextNode('')
     }
-    return createElementWithContext(resolved, namespace)
+    return createElementWithContext(resolved, namespace, ownerDocument)
   }
 
   // Non-reactive function values are not valid DOM nodes.
   // Keep callback values inert instead of stringifying function source.
   if (typeof node === 'function') {
-    return document.createTextNode('')
+    return ownerDocument.createTextNode('')
   }
 
   if (typeof node === 'object' && node !== null && !(node instanceof Node)) {
@@ -265,26 +275,26 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
             .catch(() => undefined)
         }
       }
-      return createElement(handle.marker as FictNode)
+      return createElementWithContext(handle.marker as FictNode, namespace, ownerDocument)
     }
   }
 
   // Array - create fragment
   if (Array.isArray(node)) {
-    const frag = document.createDocumentFragment()
+    const frag = ownerDocument.createDocumentFragment()
     for (const child of node) {
-      appendChildNode(frag, child, namespace)
+      appendChildNode(frag, child, namespace, ownerDocument)
     }
     return frag
   }
 
   // Primitive values - text node
   if (typeof node === 'string' || typeof node === 'number') {
-    return document.createTextNode(String(node))
+    return ownerDocument.createTextNode(String(node))
   }
 
   if (typeof node === 'boolean') {
-    return document.createTextNode('')
+    return ownerDocument.createTextNode('')
   }
 
   // VNode
@@ -355,13 +365,13 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
         onCleanup(() => hook.componentUnmount?.(componentId))
       }
       if (__fictIsResumable() && !__fictIsHydrating()) {
-        const content = createElementWithContext(rendered as FictNode, namespace)
+        const content = createElementWithContext(rendered as FictNode, namespace, ownerDocument)
         const host =
           namespace === 'svg'
-            ? document.createElementNS(SVG_NS, 'fict-host')
+            ? ownerDocument.createElementNS(SVG_NS, 'fict-host')
             : namespace === 'mathml'
-              ? document.createElementNS(MATHML_NS, 'fict-host')
-              : document.createElement('fict-host')
+              ? ownerDocument.createElementNS(MATHML_NS, 'fict-host')
+              : ownerDocument.createElement('fict-host')
         host.setAttribute('data-fict-host', '')
         if (namespace === null && (host as HTMLElement).style) {
           ;(host as HTMLElement).style.display = 'contents'
@@ -384,7 +394,7 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
         }
         return host as DOMElement
       }
-      const componentRoot = createElementWithContext(rendered as FictNode, namespace)
+      const componentRoot = createElementWithContext(rendered as FictNode, namespace, ownerDocument)
       if (hook && componentId !== undefined) {
         mountElements = collectComponentMountElements(componentRoot)
         annotateComponentElements(mountElements, componentId, componentName)
@@ -392,7 +402,7 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
       return componentRoot
     } catch (err) {
       if (handleSuspend(err as any)) {
-        return document.createComment('fict:suspend')
+        return ownerDocument.createComment('fict:suspend')
       }
       handleError(err, { source: 'render', componentName: vnode.type.name })
       throw err
@@ -403,9 +413,9 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
 
   // Fragment
   if (vnode.type === Fragment) {
-    const frag = document.createDocumentFragment()
+    const frag = ownerDocument.createDocumentFragment()
     const children = vnode.props?.children as FictNode | FictNode[] | undefined
-    appendChildren(frag, children, namespace)
+    appendChildren(frag, children, namespace, ownerDocument)
     return frag
   }
 
@@ -414,15 +424,16 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
   const resolvedNamespace = resolveNamespace(tagName, namespace)
   const el =
     resolvedNamespace === 'svg'
-      ? document.createElementNS(SVG_NS, tagName)
+      ? ownerDocument.createElementNS(SVG_NS, tagName)
       : resolvedNamespace === 'mathml'
-        ? document.createElementNS(MATHML_NS, tagName)
-        : document.createElement(tagName)
+        ? ownerDocument.createElementNS(MATHML_NS, tagName)
+        : ownerDocument.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,
+    ownerDocument,
   )
   return el as DOMElement
 }
@@ -442,10 +453,10 @@ export function template(
   isSVG?: boolean,
   isMathML?: boolean,
 ): () => Node {
-  let node: Node | null = null
+  const nodeByDocument = new WeakMap<Document, Node>()
 
-  const create = (): Node => {
-    const t = document.createElement('template')
+  const create = (ownerDocument: Document): Node => {
+    const t = ownerDocument.createElement('template')
 
     if (isSVG) {
       // fix: Wrap HTML in <svg> to parse content in SVG namespace
@@ -463,7 +474,7 @@ export function template(
         return wrapper.firstChild!
       }
       // Preserve all root nodes by returning a fragment
-      const fragment = document.createDocumentFragment()
+      const fragment = ownerDocument.createDocumentFragment()
       fragment.append(...Array.from(wrapper.childNodes))
       return fragment
     }
@@ -483,7 +494,7 @@ export function template(
         return wrapper.firstChild!
       }
       // Preserve all root nodes by returning a fragment
-      const fragment = document.createDocumentFragment()
+      const fragment = ownerDocument.createDocumentFragment()
       fragment.append(...Array.from(wrapper.childNodes))
       return fragment
     }
@@ -504,17 +515,26 @@ export function template(
     return content
   }
 
+  const getBase = (ownerDocument: Document): Node => {
+    const cached = nodeByDocument.get(ownerDocument)
+    if (cached) return cached
+    const created = create(ownerDocument)
+    nodeByDocument.set(ownerDocument, created)
+    return created
+  }
+
   // Create the cloning function
   const fn = isImportNode
     ? () =>
         untrack(() => {
-          const base = node || (node = create())
+          const ownerDocument = resolveOwnerDocument()
+          const base = getBase(ownerDocument)
           return isHydratingActive()
-            ? claimNodes(base, () => document.importNode(base, true))
-            : document.importNode(base, true)
+            ? claimNodes(base, () => ownerDocument.importNode(base, true))
+            : ownerDocument.importNode(base, true)
         })
     : () => {
-        const base = node || (node = create())
+        const base = getBase(resolveOwnerDocument())
         return isHydratingActive()
           ? claimNodes(base, () => base.cloneNode(true))
           : base.cloneNode(true)
@@ -553,7 +573,10 @@ function appendChildNode(
   parent: ParentNode & Node,
   child: FictNode,
   namespace: NamespaceContext,
+  ownerDocument: Document,
 ): void {
+  const parentOwnerDocument = parent.ownerDocument ?? ownerDocument
+
   // Skip nullish values
   if (child === null || child === undefined || child === false) {
     return
@@ -561,7 +584,7 @@ function appendChildNode(
 
   // Handle BindingHandle (recursive)
   if (isBindingHandle(child)) {
-    appendChildNode(parent, child.marker, namespace)
+    appendChildNode(parent, child.marker, namespace, parentOwnerDocument)
     // Flush pending nodes now that markers are in the DOM
     child.flush?.()
     return
@@ -573,7 +596,9 @@ function appendChildNode(
   if (typeof child === 'function') {
     const childGetter = child as () => FictNode
     if (isReactive(childGetter)) {
-      createChildBinding(parent, childGetter, node => createElementWithContext(node, namespace))
+      createChildBinding(parent, childGetter, node =>
+        createElementWithContext(node, namespace, parentOwnerDocument),
+      )
       return
     }
     return
@@ -582,7 +607,7 @@ function appendChildNode(
   // Static child - create element and append
   if (Array.isArray(child)) {
     for (const item of child) {
-      appendChildNode(parent, item, namespace)
+      appendChildNode(parent, item, namespace, parentOwnerDocument)
     }
     return
   }
@@ -590,16 +615,16 @@ function appendChildNode(
   // Cast to Node for remaining logic
   let domNode: Node
   if (typeof child !== 'object' || child === null) {
-    domNode = document.createTextNode(String(child ?? ''))
+    domNode = parentOwnerDocument.createTextNode(String(child ?? ''))
   } else {
-    domNode = createElementWithContext(child as any, namespace) as Node
+    domNode = createElementWithContext(child as any, namespace, parentOwnerDocument) 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 as FictNode, namespace)
+      appendChildNode(parent, node as FictNode, namespace, parentOwnerDocument)
     }
     return
   }
@@ -627,17 +652,18 @@ function appendChildren(
   parent: ParentNode & Node,
   children: FictNode | FictNode[] | undefined,
   namespace: NamespaceContext,
+  ownerDocument: Document,
 ): void {
   if (children === undefined) return
 
   if (Array.isArray(children)) {
     for (const child of children) {
-      appendChildren(parent, child, namespace)
+      appendChildren(parent, child, namespace, ownerDocument)
     }
     return
   }
 
-  appendChildNode(parent, children, namespace)
+  appendChildNode(parent, children, namespace, ownerDocument)
 }
 
 // ============================================================================

package/src/error-boundary.ts

@@ -19,11 +19,11 @@ interface ErrorBoundaryProps extends BaseProps {
 }
 
 export function ErrorBoundary(props: ErrorBoundaryProps): FictNode {
-  const fragment = document.createDocumentFragment()
-  const marker = document.createComment('fict:error-boundary')
-  fragment.appendChild(marker)
-
   const hostRoot = getCurrentRoot()
+  const markerOwnerDocument = hostRoot?.ownerDocument ?? document
+  const fragment = markerOwnerDocument.createDocumentFragment()
+  const marker = markerOwnerDocument.createComment('fict:error-boundary')
+  fragment.appendChild(marker)
 
   let cleanup: (() => void) | undefined
   let activeNodes: Node[] = []
@@ -58,7 +58,7 @@ export function ErrorBoundary(props: ErrorBoundaryProps): FictNode {
     let nodes: Node[] = []
     try {
       const output = createElement(value)
-      nodes = toNodeArray(output)
+      nodes = toNodeArray(output, markerOwnerDocument)
       const parentNode = marker.parentNode as (ParentNode & Node) | null
       if (parentNode) {
         insertNodesBefore(parentNode, nodes, marker)

package/src/lifecycle.ts

@@ -11,6 +11,7 @@ type LifecycleFn = () => void | Cleanup
 
 export interface RootContext {
   parent?: RootContext | undefined
+  ownerDocument?: Document | undefined
   onMountCallbacks?: LifecycleFn[]
   cleanups: Cleanup[]
   destroyCallbacks: Cleanup[]
@@ -60,7 +61,13 @@ function setRootSuspendDevtools(root: RootContext, suspended: boolean): void {
 }
 
 export function createRootContext(parent?: RootContext): RootContext {
-  const root = { parent, cleanups: [], destroyCallbacks: [], suspended: false }
+  const root = {
+    parent,
+    ownerDocument: parent?.ownerDocument,
+    cleanups: [],
+    destroyCallbacks: [],
+    suspended: false,
+  }
   registerRootDevtools(root)
   return root
 }

package/src/list-helpers.ts

@@ -203,9 +203,12 @@ export function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
 function createKeyedListContainer<T = unknown>(
   startOverride?: Comment,
   endOverride?: Comment,
+  defaultOwnerDocument?: Document,
 ): KeyedListContainer<T> {
-  const startMarker = startOverride ?? document.createComment('fict:list:start')
-  const endMarker = endOverride ?? document.createComment('fict:list:end')
+  const markerOwnerDocument =
+    startOverride?.ownerDocument ?? endOverride?.ownerDocument ?? defaultOwnerDocument ?? document
+  const startMarker = startOverride ?? markerOwnerDocument.createComment('fict:list:start')
+  const endMarker = endOverride ?? markerOwnerDocument.createComment('fict:list:end')
 
   const dispose = () => {
     // Clean up all blocks
@@ -228,7 +231,9 @@ function createKeyedListContainer<T = unknown>(
       container.orderedIndexByKey.clear()
       return
     }
-    const range = document.createRange()
+    const rangeOwnerDocument =
+      startMarker.ownerDocument ?? endMarker.ownerDocument ?? markerOwnerDocument
+    const range = rangeOwnerDocument.createRange()
     range.setStartBefore(startMarker)
     range.setEndAfter(endMarker)
     range.deleteContents()
@@ -284,12 +289,13 @@ function createKeyedBlock<T>(
 
   const indexSig = needsIndex
     ? createSignal<number>(index)
-    : (((next?: number) => {
+    : (function indexSignal(next?: number) {
         if (arguments.length === 0) return index
         index = next as number
         return index
-      }) as Signal<number>)
+      } as Signal<number>)
   const root = createRootContext(hostRoot)
+  const nodeOwnerDocument = root.ownerDocument ?? hostRoot?.ownerDocument ?? document
   const prevRoot = pushRoot(root)
   // maintaining proper cleanup chain. The scope will be disposed when
   // the root is destroyed, ensuring nested effects are properly cleaned up.
@@ -310,10 +316,10 @@ function createKeyedBlock<T>(
         rendered instanceof Node ||
         (Array.isArray(rendered) && rendered.every(n => n instanceof Node))
       ) {
-        nodes = toNodeArray(rendered)
+        nodes = toNodeArray(rendered, nodeOwnerDocument)
       } else {
         const element = createElement(rendered as unknown as FictNode)
-        nodes = toNodeArray(element)
+        nodes = toNodeArray(element, nodeOwnerDocument)
       }
     })
 
@@ -500,10 +506,18 @@ function createFineGrainedKeyedList<T>(
   startOverride?: Comment,
   endOverride?: Comment,
 ): KeyedListBinding {
-  const container = createKeyedListContainer<T>(startOverride, endOverride)
   const hostRoot = getCurrentRoot()
+  const container = createKeyedListContainer<T>(
+    startOverride,
+    endOverride,
+    hostRoot?.ownerDocument ?? document,
+  )
+  const markerOwnerDocument =
+    container.startMarker.ownerDocument ?? hostRoot?.ownerDocument ?? document
   const useProvided = !!(startOverride && endOverride)
-  const fragment = useProvided ? container.startMarker : document.createDocumentFragment()
+  const fragment = useProvided
+    ? container.startMarker
+    : markerOwnerDocument.createDocumentFragment()
   if (!useProvided) {
     ;(fragment as DocumentFragment).append(container.startMarker, container.endMarker)
   }
@@ -580,7 +594,7 @@ function createFineGrainedKeyedList<T>(
         withHydrationRange(
           container.startMarker.nextSibling,
           container.endMarker,
-          parent.ownerDocument ?? document,
+          parent.ownerDocument ?? markerOwnerDocument,
           () => {
             for (let index = 0; index < newItems.length; index++) {
               const item = newItems[index]!
@@ -632,7 +646,7 @@ function createFineGrainedKeyedList<T>(
             destroyRoot(block.root)
           }
           // Use Range.deleteContents for efficient bulk DOM removal
-          const range = document.createRange()
+          const range = (parent.ownerDocument ?? markerOwnerDocument).createRange()
           range.setStartAfter(container.startMarker)
           range.setEndBefore(container.endMarker)
           range.deleteContents()
@@ -934,7 +948,7 @@ function createFineGrainedKeyedList<T>(
 
   const waitForConnection = () => {
     if (connectObserver || typeof MutationObserver === 'undefined') return
-    const root = container.startMarker.getRootNode?.() ?? document
+    const root = container.startMarker.getRootNode?.() ?? markerOwnerDocument
     const shadowRoot =
       root && root.nodeType === 11 && isShadowRoot(root as Node) ? (root as ShadowRoot) : null
     connectObserver = new MutationObserver(() => {
@@ -946,7 +960,10 @@ function createFineGrainedKeyedList<T>(
         }
       }
     })
-    connectObserver.observe(document, { childList: true, subtree: true })
+    connectObserver.observe(markerOwnerDocument, { childList: true, subtree: true })
+    if (root && root.nodeType === 11) {
+      connectObserver.observe(root as Node, { childList: true, subtree: true })
+    }
     if (shadowRoot) {
       connectObserver.observe(shadowRoot, { childList: true, subtree: true })
     }

package/src/loader.ts

@@ -447,19 +447,20 @@ function setupHoverPrefetch(doc: Document, delay: number): () => void {
 }
 
 function prefetchElementQrls(el: Element): void {
+  const ownerDocument = el.ownerDocument ?? (typeof document !== 'undefined' ? document : undefined)
   // Prefetch event handler QRLs
   const eventAttrs = ['on:click', 'on:input', 'on:change', 'on:submit', 'on:keydown', 'on:keyup']
   for (const attr of eventAttrs) {
     const qrl = el.getAttribute(attr)
     if (qrl) {
-      prefetchQrl(qrl)
+      prefetchQrl(qrl, ownerDocument)
     }
   }
 
   // Prefetch resume handler QRL
   const resumeQrl = el.getAttribute('data-fict-h')
   if (resumeQrl) {
-    prefetchQrl(resumeQrl)
+    prefetchQrl(resumeQrl, ownerDocument)
   }
 
   // Also check children for nested QRLs
@@ -470,17 +471,17 @@ function prefetchElementQrls(el: Element): void {
     for (const attr of eventAttrs) {
       const qrl = child.getAttribute(attr)
       if (qrl) {
-        prefetchQrl(qrl)
+        prefetchQrl(qrl, ownerDocument)
       }
     }
     const childResumeQrl = child.getAttribute('data-fict-h')
     if (childResumeQrl) {
-      prefetchQrl(childResumeQrl)
+      prefetchQrl(childResumeQrl, ownerDocument)
     }
   })
 }
 
-function prefetchQrl(qrl: string): void {
+function prefetchQrl(qrl: string, ownerDocument?: Document): void {
   const { url } = parseQrl(qrl)
   if (!url || prefetchedUrls.has(url)) return
 
@@ -490,12 +491,13 @@ function prefetchQrl(qrl: string): void {
   const resolvedUrl = resolveModuleUrl(url)
 
   // Use modulepreload link for best browser support
-  if (typeof document !== 'undefined') {
-    const link = document.createElement('link')
+  const doc = ownerDocument ?? (typeof document !== 'undefined' ? document : undefined)
+  if (doc) {
+    const link = doc.createElement('link')
     link.rel = 'modulepreload'
     link.href = resolvedUrl
     link.crossOrigin = 'anonymous'
-    document.head.appendChild(link)
+    doc.head?.appendChild(link)
   }
 }
 

package/src/node-ops.ts

@@ -7,7 +7,10 @@
  * Convert a value to a flat array of DOM nodes.
  * Defensively handles proxies and non-DOM values.
  */
-export function toNodeArray(node: Node | Node[] | unknown): Node[] {
+export function toNodeArray(
+  node: Node | Node[] | unknown,
+  ownerDocument: Document = document,
+): Node[] {
   try {
     if (Array.isArray(node)) {
       // Preserve original array reference when it's already a flat Node array
@@ -29,7 +32,7 @@ export function toNodeArray(node: Node | Node[] | unknown): Node[] {
       }
       const result: Node[] = []
       for (const item of node) {
-        result.push(...toNodeArray(item))
+        result.push(...toNodeArray(item, ownerDocument))
       }
       return result
     }
@@ -62,7 +65,7 @@ export function toNodeArray(node: Node | Node[] | unknown): Node[] {
   try {
     // Duck-type BindingHandle-like values
     if (typeof node === 'object' && node !== null && 'marker' in node) {
-      return toNodeArray((node as { marker: unknown }).marker)
+      return toNodeArray((node as { marker: unknown }).marker, ownerDocument)
     }
   } catch {
     // Ignore property check error
@@ -70,9 +73,9 @@ export function toNodeArray(node: Node | Node[] | unknown): Node[] {
 
   // Primitive fallback
   try {
-    return [document.createTextNode(String(node))]
+    return [ownerDocument.createTextNode(String(node))]
   } catch {
-    return [document.createTextNode('')]
+    return [ownerDocument.createTextNode('')]
   }
 }
 

package/src/suspense.ts

@@ -55,6 +55,7 @@ export function Suspense(props: SuspenseProps): FictNode {
   let resolvedOnce = false
   let epoch = 0
   const hostRoot = getCurrentRoot()
+  const markerOwnerDocument = hostRoot?.ownerDocument ?? document
 
   const toFallback = (err?: unknown) =>
     typeof props.fallback === 'function'
@@ -85,7 +86,7 @@ export function Suspense(props: SuspenseProps): FictNode {
         boundaryPushed = true
       }
       const output = createElement(view)
-      nodes = toNodeArray(output)
+      nodes = toNodeArray(output, markerOwnerDocument)
       // Suspended view: child threw a suspense token and was handled upstream.
       // Avoid replacing existing fallback content; tear down this attempt.
       const suspendedAttempt =
@@ -123,9 +124,9 @@ export function Suspense(props: SuspenseProps): FictNode {
     activeNodes = nodes
   }
 
-  const fragment = document.createDocumentFragment()
-  const startMarker = document.createComment('fict:suspense-start')
-  const endMarker = document.createComment('fict:suspense-end')
+  const fragment = markerOwnerDocument.createDocumentFragment()
+  const startMarker = markerOwnerDocument.createComment('fict:suspense-start')
+  const endMarker = markerOwnerDocument.createComment('fict:suspense-end')
   fragment.appendChild(startMarker)
   fragment.appendChild(endMarker)
   let cleanup: (() => void) | undefined