@fictjs/runtime 0.9.0 → 0.11.0

package/dist/index.dev.js

@@ -181,8 +181,41 @@ var currentRoot;
 var currentEffectCleanups;
 var globalErrorHandlers = /* @__PURE__ */ new WeakMap();
 var globalSuspenseHandlers = /* @__PURE__ */ new WeakMap();
+var rootDevtoolsIds = /* @__PURE__ */ new WeakMap();
+var nextRootDevtoolsId = 0;
+function registerRootDevtools(root) {
+  if (!isDev2) return;
+  const hook = getDevtoolsHook();
+  if (!hook?.registerRoot) return;
+  const id = ++nextRootDevtoolsId;
+  rootDevtoolsIds.set(root, id);
+  hook.registerRoot(id);
+}
+function disposeRootDevtools(root) {
+  if (!isDev2) return;
+  const id = rootDevtoolsIds.get(root);
+  if (id === void 0) return;
+  const hook = getDevtoolsHook();
+  hook?.disposeRoot?.(id);
+  rootDevtoolsIds.delete(root);
+}
+function setRootSuspendDevtools(root, suspended) {
+  if (!isDev2) return;
+  const id = rootDevtoolsIds.get(root);
+  if (id === void 0) return;
+  const hook = getDevtoolsHook();
+  hook?.rootSuspend?.(id, suspended);
+}
 function createRootContext(parent) {
-  return { parent, cleanups: [], destroyCallbacks: [], suspended: false };
+  const root = {
+    parent,
+    ownerDocument: parent?.ownerDocument,
+    cleanups: [],
+    destroyCallbacks: [],
+    suspended: false
+  };
+  registerRootDevtools(root);
+  return root;
 }
 function pushRoot(root) {
   if (!enterRootGuard(root)) {
@@ -262,6 +295,7 @@ function destroyRoot(root) {
   if (globalSuspenseHandlers.has(root)) {
     globalSuspenseHandlers.delete(root);
   }
+  disposeRootDevtools(root);
 }
 function createRoot(fn, options2) {
   const parent = options2?.inherit ? currentRoot : void 0;
@@ -398,7 +432,10 @@ function handleSuspend(token, startRoot) {
         const handler = handlers[i];
         const handled = handler(token);
         if (handled !== false) {
-          if (originRoot) originRoot.suspended = true;
+          if (originRoot) {
+            originRoot.suspended = true;
+            setRootSuspendDevtools(originRoot, true);
+          }
           return true;
         }
       }
@@ -411,7 +448,10 @@ function handleSuspend(token, startRoot) {
       const handler = globalForRoot[i];
       const handled = handler(token);
       if (handled !== false) {
-        if (originRoot) originRoot.suspended = true;
+        if (originRoot) {
+          originRoot.suspended = true;
+          setRootSuspendDevtools(originRoot, true);
+        }
         return true;
       }
     }
@@ -420,7 +460,7 @@ function handleSuspend(token, startRoot) {
 }
 
 // src/effect.ts
-function createEffect(fn) {
+function createEffect(fn, options2) {
   let cleanups = [];
   const rootForError = getCurrentRoot();
   const doCleanup = () => {
@@ -447,7 +487,7 @@ function createEffect(fn) {
     });
     cleanups = bucket;
   };
-  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options2);
   const teardown = () => {
     runCleanupList(cleanups);
     disposeEffect();
@@ -455,7 +495,7 @@ function createEffect(fn) {
   registerRootCleanup(teardown);
   return teardown;
 }
-function createRenderEffect(fn) {
+function createRenderEffect(fn, options2) {
   let cleanup;
   const rootForError = getCurrentRoot();
   const doCleanup = () => {
@@ -481,7 +521,7 @@ function createRenderEffect(fn) {
       throw err;
     }
   };
-  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError);
+  const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options2);
   const teardown = () => {
     if (cleanup) {
       cleanup();
@@ -759,6 +799,15 @@ function purgeDeps(sub) {
   while (dep !== void 0) dep = unlink(dep, sub);
 }
 function disposeNode(node) {
+  if (isDev4) {
+    if ("fn" in node && typeof node.fn === "function") {
+      disposeEffectDevtools(node);
+    } else if ("getter" in node && typeof node.getter === "function") {
+      disposeComputedDevtools(node);
+    } else if ("currentValue" in node) {
+      disposeSignalDevtools(node);
+    }
+  }
   node.depsTail = void 0;
   node.flags = 0;
   purgeDeps(node);
@@ -812,6 +861,7 @@ function runEffect(e) {
   const flags = e.flags;
   const runCleanup = () => {
     if (!e.runCleanup) return;
+    if (isDev4) effectCleanupDevtools(e);
     inCleanup = true;
     activeCleanupFlushId = currentFlushId;
     try {
@@ -824,7 +874,6 @@ function runEffect(e) {
   if (flags & Dirty) {
     runCleanup();
     ++cycle;
-    if (isDev4) effectRunDevtools(e);
     e.depsTail = void 0;
     e.flags = WatchingRunning;
     const prevSub = activeSub;
@@ -862,7 +911,6 @@ function runEffect(e) {
     if (isDirty) {
       runCleanup();
       ++cycle;
-      if (isDev4) effectRunDevtools(e);
       e.depsTail = void 0;
       e.flags = WatchingRunning;
       const prevSub = activeSub;
@@ -896,19 +944,30 @@ function scheduleFlush() {
 }
 function flush() {
   beginFlushGuard();
+  let flushReported = false;
+  const finishFlush = () => {
+    if (flushReported && isDev4) {
+      flushEndDevtools();
+    }
+    endFlushGuard();
+  };
   if (batchDepth > 0) {
     scheduleFlush();
-    endFlushGuard();
+    finishFlush();
     return;
   }
   const hasWork = highPriorityQueue.length > 0 || lowPriorityQueue.length > 0;
   if (!hasWork) {
     flushScheduled = false;
-    endFlushGuard();
+    finishFlush();
     return;
   }
   currentFlushId++;
   flushScheduled = false;
+  if (isDev4) {
+    flushStartDevtools();
+    flushReported = true;
+  }
   let highIndex = 0;
   while (highIndex < highPriorityQueue.length) {
     const e = highPriorityQueue[highIndex];
@@ -928,7 +987,7 @@ function flush() {
       highPriorityQueue.length = 0;
       lowPriorityQueue.length = 0;
       flushScheduled = false;
-      endFlushGuard();
+      finishFlush();
       return;
     }
     highIndex++;
@@ -943,7 +1002,7 @@ function flush() {
         lowPriorityQueue.length -= lowIndex;
       }
       scheduleFlush();
-      endFlushGuard();
+      finishFlush();
       return;
     }
     const e = lowPriorityQueue[lowIndex];
@@ -963,14 +1022,14 @@ function flush() {
       highPriorityQueue.length = 0;
       lowPriorityQueue.length = 0;
       flushScheduled = false;
-      endFlushGuard();
+      finishFlush();
       return;
     }
     lowIndex++;
     runEffect(e);
   }
   lowPriorityQueue.length = 0;
-  endFlushGuard();
+  finishFlush();
 }
 function signal(initialValue, options2) {
   const s = {
@@ -1043,6 +1102,7 @@ function computed(getter, options2) {
   if (options2?.equals !== void 0) c.equals = options2.equals;
   if (options2?.name !== void 0) c.name = options2.name;
   if (options2?.devToolsSource !== void 0) c.devToolsSource = options2.devToolsSource;
+  if (options2?.internal === true) c.devToolsInternal = true;
   if (isDev4) registerComputedDevtools(c);
   const bound = computedOper.bind(
     c
@@ -1093,7 +1153,7 @@ function computedOper() {
   if (activeSub !== void 0) link(this, activeSub, cycle);
   return this.value;
 }
-function effectWithCleanup(fn, cleanupRunner, root) {
+function effectWithCleanup(fn, cleanupRunner, root, options2) {
   const e = {
     fn,
     subs: void 0,
@@ -1102,6 +1162,8 @@ function effectWithCleanup(fn, cleanupRunner, root) {
     depsTail: void 0,
     flags: WatchingRunning,
     runCleanup: cleanupRunner,
+    ...options2?.name !== void 0 ? { name: options2.name } : {},
+    ...options2?.devToolsSource !== void 0 ? { devToolsSource: options2.devToolsSource } : {},
     __id: void 0
   };
   const resolvedRoot = root ?? getCurrentRoot();
@@ -1109,14 +1171,14 @@ function effectWithCleanup(fn, cleanupRunner, root) {
     e.root = resolvedRoot;
   }
   if (isDev4) registerEffectDevtools(e);
+  e.fn = wrapEffectFnWithDevtoolsTiming(e, fn);
   const prevSub = activeSub;
   if (prevSub !== void 0) link(e, prevSub, 0);
   activeSub = e;
   let didThrow = false;
   let thrown;
   try {
-    if (isDev4) effectRunDevtools(e);
-    fn();
+    e.fn();
   } catch (err) {
     didThrow = true;
     thrown = err;
@@ -1137,7 +1199,11 @@ function effectOper() {
   disposeNode(this);
 }
 function batch(fn) {
+  const enteringOuterBatch = batchDepth === 0;
   ++batchDepth;
+  if (enteringOuterBatch && isDev4) {
+    batchStartDevtools();
+  }
   let result;
   let error;
   try {
@@ -1147,6 +1213,9 @@ function batch(fn) {
   } finally {
     --batchDepth;
     if (batchDepth === 0) {
+      if (isDev4) {
+        batchEndDevtools();
+      }
       try {
         flush();
       } catch (flushErr) {
@@ -1195,18 +1264,49 @@ function setTransitionContext(value) {
 var registerSignalDevtools = () => void 0;
 var updateSignalDevtools = () => {
 };
+var disposeSignalDevtools = () => {
+};
 var registerComputedDevtools = () => void 0;
 var updateComputedDevtools = () => {
 };
+var disposeComputedDevtools = () => {
+};
 var registerEffectDevtools = () => void 0;
 var effectRunDevtools = () => {
 };
+var wrapEffectFnWithDevtoolsTiming = (_node, fn) => fn;
+var effectCleanupDevtools = () => {
+};
+var disposeEffectDevtools = () => {
+};
 var trackDependencyDevtools = () => {
 };
 var untrackDependencyDevtools = () => {
 };
+var batchStartDevtools = () => {
+};
+var batchEndDevtools = () => {
+};
+var flushStartDevtools = () => {
+};
+var flushEndDevtools = () => {
+};
+var clearDevtoolsSignalSetters = () => {
+};
 if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
   let nextDevtoolsId = 0;
+  const getSignalSetterMap = () => {
+    if (typeof globalThis === "undefined") return void 0;
+    const global = globalThis;
+    if (!global.__FICT_DEVTOOLS_SIGNALS__) {
+      global.__FICT_DEVTOOLS_SIGNALS__ = /* @__PURE__ */ new Map();
+    }
+    return global.__FICT_DEVTOOLS_SIGNALS__;
+  };
+  const getExistingSignalSetterMap = () => {
+    if (typeof globalThis === "undefined") return void 0;
+    return globalThis.__FICT_DEVTOOLS_SIGNALS__;
+  };
   registerSignalDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
@@ -1218,6 +1318,9 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     if (ownerId !== void 0) options2.ownerId = ownerId;
     hook.registerSignal(id, node.currentValue, options2);
     node.__id = id;
+    getSignalSetterMap()?.set(id, (value) => {
+      signalOper.call(node, value);
+    });
     return id;
   };
   updateSignalDevtools = (node, value) => {
@@ -1226,9 +1329,19 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     const id = node.__id;
     if (id) hook.updateSignal(id, value);
   };
+  disposeSignalDevtools = (node) => {
+    const identifiable = node;
+    const id = identifiable.__id;
+    if (!id) return;
+    const hook = getDevtoolsHook();
+    hook?.disposeSignal?.(id);
+    getExistingSignalSetterMap()?.delete(id);
+    delete identifiable.__id;
+  };
   registerComputedDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
+    if (node.devToolsInternal) return void 0;
     const id = ++nextDevtoolsId;
     const options2 = {};
     if (node.name !== void 0) options2.name = node.name;
@@ -1246,20 +1359,55 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     const id = node.__id;
     if (id) hook.updateComputed(id, value);
   };
+  disposeComputedDevtools = (node) => {
+    const identifiable = node;
+    const id = identifiable.__id;
+    if (!id) return;
+    const hook = getDevtoolsHook();
+    hook?.disposeComputed?.(id);
+    delete identifiable.__id;
+  };
   registerEffectDevtools = (node) => {
     const hook = getDevtoolsHook();
     if (!hook) return void 0;
     const id = ++nextDevtoolsId;
+    const options2 = {};
     const ownerId = __fictGetCurrentComponentId();
-    hook.registerEffect(id, ownerId !== void 0 ? { ownerId } : void 0);
+    if (ownerId !== void 0) options2.ownerId = ownerId;
+    if (node.devToolsSource !== void 0) options2.source = node.devToolsSource;
+    hook.registerEffect(id, Object.keys(options2).length > 0 ? options2 : void 0);
     node.__id = id;
     return id;
   };
-  effectRunDevtools = (node) => {
+  effectRunDevtools = (node, duration) => {
     const hook = getDevtoolsHook();
     if (!hook) return;
     const id = node.__id;
-    if (id) hook.effectRun(id);
+    if (id) hook.effectRun(id, duration);
+  };
+  wrapEffectFnWithDevtoolsTiming = (node, fn) => {
+    return () => {
+      const startedAt = performance.now();
+      try {
+        fn();
+      } finally {
+        effectRunDevtools(node, performance.now() - startedAt);
+      }
+    };
+  };
+  effectCleanupDevtools = (node) => {
+    const hook = getDevtoolsHook();
+    if (!hook) return;
+    const id = node.__id;
+    if (id) hook.effectCleanup?.(id);
+  };
+  disposeEffectDevtools = (node) => {
+    const identifiable = node;
+    const id = identifiable.__id;
+    if (!id) return;
+    const hook = getDevtoolsHook();
+    hook?.disposeEffect?.(id);
+    delete identifiable.__id;
   };
   trackDependencyDevtools = (dep, sub) => {
     const hook = getDevtoolsHook();
@@ -1275,6 +1423,25 @@ if (true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "p
     const subId = sub.__id;
     if (depId && subId) hook.untrackDependency(subId, depId);
   };
+  batchStartDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.batchStart?.();
+  };
+  batchEndDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.batchEnd?.();
+  };
+  flushStartDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.flushStart?.();
+  };
+  flushEndDevtools = () => {
+    const hook = getDevtoolsHook();
+    hook?.flushEnd?.();
+  };
+  clearDevtoolsSignalSetters = () => {
+    getExistingSignalSetterMap()?.clear();
+  };
 }
 
 // src/memo.ts
@@ -1331,7 +1498,11 @@ function useTransition() {
       throw thrown;
     }
     if (result && typeof result.then === "function") {
-      Promise.resolve(result).finally(() => {
+      void Promise.resolve(result).catch((error) => {
+        if (typeof console !== "undefined" && typeof console.error === "function") {
+          console.error("[fict/transition] Async transition failed.", error);
+        }
+      }).finally(() => {
         endPending();
       });
       return;
@@ -1761,7 +1932,7 @@ function withHydration(root, fn) {
 }
 
 // src/node-ops.ts
-function toNodeArray(node) {
+function toNodeArray(node, ownerDocument = document) {
   try {
     if (Array.isArray(node)) {
       let allNodes = true;
@@ -1782,7 +1953,7 @@ function toNodeArray(node) {
       }
       const result = [];
       for (const item of node) {
-        result.push(...toNodeArray(item));
+        result.push(...toNodeArray(item, ownerDocument));
       }
       return result;
     }
@@ -1809,14 +1980,14 @@ function toNodeArray(node) {
   }
   try {
     if (typeof node === "object" && node !== null && "marker" in node) {
-      return toNodeArray(node.marker);
+      return toNodeArray(node.marker, ownerDocument);
     }
   } catch {
   }
   try {
-    return [document.createTextNode(String(node))];
+    return [ownerDocument.createTextNode(String(node))];
   } catch {
-    return [document.createTextNode("")];
+    return [ownerDocument.createTextNode("")];
   }
 }
 function insertNodesBefore(parent, nodes, anchor) {
@@ -2186,7 +2357,7 @@ function applyClass(el, value, prev) {
   return prevState;
 }
 function createChildBinding(parent, getValue, createElementFn) {
-  const marker = document.createComment("fict:child");
+  const marker = (parent.ownerDocument ?? document).createComment("fict:child");
   parent.appendChild(marker);
   const hostRoot = getCurrentRoot();
   const dispose = createRenderEffect(() => {
@@ -2200,7 +2371,7 @@ function createChildBinding(parent, getValue, createElementFn) {
         return;
       }
       const output = createElementFn(value);
-      nodes = toNodeArray(output);
+      nodes = toNodeArray(output, marker.ownerDocument ?? parent.ownerDocument ?? document);
       const parentNode = marker.parentNode;
       if (parentNode) {
         insertNodesBefore(parentNode, nodes, marker);
@@ -2309,7 +2480,7 @@ function globalEventHandler(e) {
   Object.defineProperty(e, "currentTarget", {
     configurable: true,
     get() {
-      return node || document;
+      return node || oriCurrentTarget || asNode(oriTarget)?.ownerDocument || document;
     }
   });
   if (e.composedPath) {
@@ -2377,7 +2548,8 @@ function bindEvent(el, eventName, handler, options2) {
 }
 function createPortal(container, render2, createElementFn) {
   const parentRoot = getCurrentRoot();
-  const marker = document.createComment("fict:portal");
+  const markerOwnerDocument = container.ownerDocument ?? document;
+  const marker = markerOwnerDocument.createComment("fict:portal");
   container.appendChild(marker);
   let currentNodes = [];
   let currentRoot2 = null;
@@ -2391,13 +2563,14 @@ function createPortal(container, render2, createElementFn) {
       currentNodes = [];
     }
     const root = createRootContext(parentRoot);
+    root.ownerDocument = container.ownerDocument ?? parentRoot?.ownerDocument ?? document;
     const prev = pushRoot(root);
     let handledError = false;
     try {
       const output = render2();
       if (output != null && output !== false) {
         const el = createElementFn(output);
-        const nodes = toNodeArray(el);
+        const nodes = toNodeArray(el, markerOwnerDocument);
         if (marker.parentNode) {
           insertNodesBefore(marker.parentNode, nodes, marker);
         }
@@ -2651,8 +2824,35 @@ var SVG_NS = "http://www.w3.org/2000/svg";
 var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
 var isDev7 = true ? true : typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 var nextComponentId = 1;
+function collectComponentMountElements(node) {
+  if (node instanceof DocumentFragment) {
+    return Array.from(node.childNodes).filter(
+      (child) => child instanceof HTMLElement
+    );
+  }
+  if (node instanceof HTMLElement) {
+    if (node.hasAttribute("data-fict-host")) {
+      const children = Array.from(node.children).filter(
+        (child) => child instanceof HTMLElement
+      );
+      if (children.length > 0) return children;
+    }
+    return [node];
+  }
+  return [];
+}
+function annotateComponentElements(elements, componentId, componentName) {
+  for (const element of elements) {
+    element.setAttribute("data-fict-component", componentName);
+    element.setAttribute("data-fict-component-id", String(componentId));
+    const annotated = element;
+    annotated.__fict_component_id__ = componentId;
+    annotated.__fict_component_name__ = componentName;
+  }
+}
 function render(view, container) {
   const root = createRootContext();
+  root.ownerDocument = container.ownerDocument ?? document;
   const prev = pushRoot(root);
   let dom = void 0;
   try {
@@ -2679,7 +2879,7 @@ function render(view, container) {
   return teardown;
 }
 function createElement(node) {
-  return createElementWithContext(node, null);
+  return createElementWithContext(node, null, resolveOwnerDocument());
 }
 function resolveNamespace(tagName, namespace) {
   if (tagName === "svg") return "svg";
@@ -2689,22 +2889,25 @@ function resolveNamespace(tagName, namespace) {
   if (isDev7 && SVGElements.has(tagName)) return "svg";
   return null;
 }
-function createElementWithContext(node, namespace) {
+function resolveOwnerDocument(ownerDocument) {
+  return ownerDocument ?? getCurrentRoot()?.ownerDocument ?? document;
+}
+function createElementWithContext(node, namespace, ownerDocument) {
   if (node instanceof Node) {
     return node;
   }
   if (node === null || node === void 0 || node === false) {
-    return document.createTextNode("");
+    return ownerDocument.createTextNode("");
   }
   if (isReactive(node)) {
     const resolved = node();
     if (resolved === node) {
-      return document.createTextNode("");
+      return ownerDocument.createTextNode("");
     }
-    return createElementWithContext(resolved, namespace);
+    return createElementWithContext(resolved, namespace, ownerDocument);
   }
   if (typeof node === "function") {
-    return document.createTextNode("");
+    return ownerDocument.createTextNode("");
   }
   if (typeof node === "object" && node !== null && !(node instanceof Node)) {
     if ("marker" in node) {
@@ -2720,21 +2923,21 @@ function createElementWithContext(node, namespace) {
           Promise.resolve().then(runFlush).catch(() => void 0);
         }
       }
-      return createElement(handle.marker);
+      return createElementWithContext(handle.marker, namespace, ownerDocument);
     }
   }
   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;
   }
   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("");
   }
   const vnode = node;
   if (typeof vnode.type === "function") {
@@ -2762,10 +2965,11 @@ function createElementWithContext(node, namespace) {
     });
     const props = createPropsProxy(baseProps);
     const hook = isDev7 ? getDevtoolsHook() : void 0;
+    const componentName = vnode.type.name || "Anonymous";
     const parentId = hook ? __fictGetCurrentComponentId() : void 0;
     const componentId = hook ? nextComponentId++ : void 0;
     if (hook?.registerComponent && componentId !== void 0) {
-      hook.registerComponent(componentId, vnode.type.name || "Anonymous", parentId);
+      hook.registerComponent(componentId, componentName, parentId);
     }
     const ctx = __fictPushContext();
     if (componentId !== void 0) {
@@ -2776,15 +2980,19 @@ function createElementWithContext(node, namespace) {
     }
     try {
       const rendered = vnode.type(props);
+      let mountElements;
+      if (hook && componentId !== void 0) {
+        hook.componentRender?.(componentId);
+      }
       if (hook && componentId !== void 0) {
         onMount(() => {
-          hook.componentMount?.(componentId);
+          hook.componentMount?.(componentId, mountElements);
         });
         onCleanup(() => hook.componentUnmount?.(componentId));
       }
       if (__fictIsResumable() && !__fictIsHydrating()) {
-        const content = createElementWithContext(rendered, namespace);
-        const host = namespace === "svg" ? document.createElementNS(SVG_NS, "fict-host") : namespace === "mathml" ? document.createElementNS(MATHML_NS, "fict-host") : document.createElement("fict-host");
+        const content = createElementWithContext(rendered, namespace, ownerDocument);
+        const host = namespace === "svg" ? ownerDocument.createElementNS(SVG_NS, "fict-host") : namespace === "mathml" ? ownerDocument.createElementNS(MATHML_NS, "fict-host") : ownerDocument.createElement("fict-host");
         host.setAttribute("data-fict-host", "");
         if (namespace === null && host.style) {
           ;
@@ -2801,12 +3009,21 @@ function createElementWithContext(node, namespace) {
         } else {
           host.appendChild(content);
         }
+        if (hook && componentId !== void 0) {
+          mountElements = collectComponentMountElements(host);
+          annotateComponentElements(mountElements, componentId, componentName);
+        }
         return host;
       }
-      return createElementWithContext(rendered, namespace);
+      const componentRoot = createElementWithContext(rendered, namespace, ownerDocument);
+      if (hook && componentId !== void 0) {
+        mountElements = collectComponentMountElements(componentRoot);
+        annotateComponentElements(mountElements, componentId, componentName);
+      }
+      return componentRoot;
     } catch (err) {
       if (handleSuspend(err)) {
-        return document.createComment("fict:suspend");
+        return ownerDocument.createComment("fict:suspend");
       }
       handleError(err, { source: "render", componentName: vnode.type.name });
       throw err;
@@ -2815,58 +3032,64 @@ function createElementWithContext(node, namespace) {
     }
   }
   if (vnode.type === Fragment) {
-    const frag = document.createDocumentFragment();
+    const frag = ownerDocument.createDocumentFragment();
     const children = vnode.props?.children;
-    appendChildren(frag, children, namespace);
+    appendChildren(frag, children, namespace, ownerDocument);
     return frag;
   }
   const tagName = typeof vnode.type === "string" ? vnode.type : "div";
   const resolvedNamespace = resolveNamespace(tagName, namespace);
-  const el = resolvedNamespace === "svg" ? document.createElementNS(SVG_NS, tagName) : resolvedNamespace === "mathml" ? document.createElementNS(MATHML_NS, tagName) : document.createElement(tagName);
+  const el = resolvedNamespace === "svg" ? ownerDocument.createElementNS(SVG_NS, tagName) : resolvedNamespace === "mathml" ? ownerDocument.createElementNS(MATHML_NS, tagName) : ownerDocument.createElement(tagName);
   applyProps(el, vnode.props ?? {}, resolvedNamespace === "svg");
   appendChildren(
     el,
     vnode.props?.children,
-    tagName === "foreignObject" ? null : resolvedNamespace
+    tagName === "foreignObject" ? null : resolvedNamespace,
+    ownerDocument
   );
   return el;
 }
 function isBindingHandle(node) {
   return node !== null && typeof node === "object" && "marker" in node && "dispose" in node && typeof node.dispose === "function";
 }
-function appendChildNode(parent, child, namespace) {
+function appendChildNode(parent, child, namespace, ownerDocument) {
+  const parentOwnerDocument = parent.ownerDocument ?? ownerDocument;
   if (child === null || child === void 0 || child === false) {
     return;
   }
   if (isBindingHandle(child)) {
-    appendChildNode(parent, child.marker, namespace);
+    appendChildNode(parent, child.marker, namespace, parentOwnerDocument);
     child.flush?.();
     return;
   }
   if (typeof child === "function") {
     const childGetter = child;
     if (isReactive(childGetter)) {
-      createChildBinding(parent, childGetter, (node) => createElementWithContext(node, namespace));
+      createChildBinding(
+        parent,
+        childGetter,
+        (node) => createElementWithContext(node, namespace, parentOwnerDocument)
+      );
       return;
     }
     return;
   }
   if (Array.isArray(child)) {
     for (const item of child) {
-      appendChildNode(parent, item, namespace);
+      appendChildNode(parent, item, namespace, parentOwnerDocument);
     }
     return;
   }
   let domNode;
   if (typeof child !== "object" || child === null) {
-    domNode = document.createTextNode(String(child ?? ""));
+    domNode = parentOwnerDocument.createTextNode(String(child ?? ""));
   } else {
-    domNode = createElementWithContext(child, namespace);
+    domNode = createElementWithContext(child, namespace, parentOwnerDocument);
   }
   if (domNode.nodeType === 11) {
     const children = Array.from(domNode.childNodes);
     for (const node of children) {
-      appendChildNode(parent, node, namespace);
+      appendChildNode(parent, node, namespace, parentOwnerDocument);
     }
     return;
   }
@@ -2884,15 +3107,15 @@ function appendChildNode(parent, child, namespace) {
     throw e;
   }
 }
-function appendChildren(parent, children, namespace) {
+function appendChildren(parent, children, namespace, ownerDocument) {
   if (children === void 0) 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);
 }
 function applyRef(el, value) {
   if (typeof value === "function") {
@@ -3108,10 +3331,11 @@ function eventNameFromProp(key) {
 
 // src/error-boundary.ts
 function ErrorBoundary(props) {
-  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;
   let activeNodes = [];
   let renderingFallback = false;
@@ -3140,7 +3364,7 @@ function ErrorBoundary(props) {
     let nodes = [];
     try {
       const output = createElement(value);
-      nodes = toNodeArray(output);
+      nodes = toNodeArray(output, markerOwnerDocument);
       const parentNode = marker.parentNode;
       if (parentNode) {
         insertNodesBefore(parentNode, nodes, marker);
@@ -3218,6 +3442,7 @@ function Suspense(props) {
   let resolvedOnce = false;
   let epoch = 0;
   const hostRoot = getCurrentRoot();
+  const markerOwnerDocument = hostRoot?.ownerDocument ?? document;
   const toFallback = (err) => typeof props.fallback === "function" ? props.fallback(err) : props.fallback;
   const renderView = (view) => {
     if (cleanup) {
@@ -3241,7 +3466,7 @@ function Suspense(props) {
         boundaryPushed = true;
       }
       const output = createElement(view);
-      nodes = toNodeArray(output);
+      nodes = toNodeArray(output, markerOwnerDocument);
       const suspendedAttempt = root.suspended || nodes.length > 0 && nodes.every((node) => node instanceof Comment && node.data === "fict:suspend");
       if (suspendedAttempt) {
         popRoot(prev);
@@ -3272,9 +3497,9 @@ function Suspense(props) {
     };
     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;
@@ -3394,8 +3619,9 @@ function createContext(defaultValue) {
     const providerRoot = createRootContext(hostRoot);
     const contextMap = getContextMap(providerRoot);
     contextMap.set(id, props.value);
-    const fragment = document.createDocumentFragment();
-    const marker = document.createComment("fict:ctx");
+    const markerOwnerDocument = providerRoot.ownerDocument ?? hostRoot?.ownerDocument ?? document;
+    const fragment = markerOwnerDocument.createDocumentFragment();
+    const marker = markerOwnerDocument.createComment("fict:ctx");
     fragment.appendChild(marker);
     let cleanup;
     let activeNodes = [];
@@ -3415,7 +3641,7 @@ function createContext(defaultValue) {
       let nodes = [];
       try {
         const output = createElement(children);
-        nodes = toNodeArray(output);
+        nodes = toNodeArray(output, markerOwnerDocument);
         const parentNode = marker.parentNode;
         if (parentNode) {
           insertNodesBefore(parentNode, nodes, marker);