@fictjs/runtime 0.10.0 → 0.12.0

package/dist/index.dev.js

@@ -207,7 +207,13 @@ function setRootSuspendDevtools(root, suspended) {
   hook?.rootSuspend?.(id, suspended);
 }
 function createRootContext(parent) {
-  const root = { parent, cleanups: [], destroyCallbacks: [], suspended: false };
+  const root = {
+    parent,
+    ownerDocument: parent?.ownerDocument,
+    cleanups: [],
+    destroyCallbacks: [],
+    suspended: false
+  };
   registerRootDevtools(root);
   return root;
 }
@@ -1926,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;
@@ -1947,7 +1953,7 @@ function toNodeArray(node) {
       }
       const result = [];
       for (const item of node) {
-        result.push(...toNodeArray(item));
+        result.push(...toNodeArray(item, ownerDocument));
       }
       return result;
     }
@@ -1974,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) {
@@ -2351,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(() => {
@@ -2365,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);
@@ -2474,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) {
@@ -2542,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;
@@ -2556,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);
         }
@@ -2844,6 +2852,7 @@ function annotateComponentElements(elements, componentId, componentName) {
 }
 function render(view, container) {
   const root = createRootContext();
+  root.ownerDocument = container.ownerDocument ?? document;
   const prev = pushRoot(root);
   let dom = void 0;
   try {
@@ -2870,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";
@@ -2880,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) {
@@ -2911,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") {
@@ -2979,8 +2991,8 @@ function createElementWithContext(node, namespace) {
         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) {
           ;
@@ -3003,7 +3015,7 @@ function createElementWithContext(node, namespace) {
         }
         return host;
       }
-      const componentRoot = createElementWithContext(rendered, namespace);
+      const componentRoot = createElementWithContext(rendered, namespace, ownerDocument);
       if (hook && componentId !== void 0) {
         mountElements = collectComponentMountElements(componentRoot);
         annotateComponentElements(mountElements, componentId, componentName);
@@ -3011,7 +3023,7 @@ function createElementWithContext(node, namespace) {
       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;
@@ -3020,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;
   }
@@ -3089,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") {
@@ -3313,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;
@@ -3345,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);
@@ -3423,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) {
@@ -3446,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);
@@ -3477,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;
@@ -3599,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 = [];
@@ -3620,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);