marko 6.0.0-next.3.27 → 6.0.0-next.3.29

package/dist/common/compat-meta.d.ts

@@ -1,2 +1,3 @@
 export declare const RENDERER_REGISTER_ID: string;
 export declare const SET_SCOPE_REGISTER_ID: string;
+export declare const RENDER_BODY_ID: string;

package/dist/debug/dom.js

@@ -789,25 +789,12 @@ function toValueProp(it) {
 }
 
 // src/dom/parse-html.ts
-var parser = /* @__PURE__ */ document.createElement("template");
-function parseHTML(html2) {
-  parser.innerHTML = html2;
-  return parser.content;
-}
-function parseHTMLOrSingleNode(html2) {
-  const content = parseHTML(html2);
-  if (content.firstChild) {
-    if (content.firstChild === content.lastChild && // If the firstChild is a comment it's possible its
-    // a single replaced node, in which case the walker can't replace
-    // the node itself.
-    content.firstChild.nodeType !== 8) {
-      return content.firstChild;
-    }
-    const fragment = new DocumentFragment();
-    fragment.appendChild(content);
-    return fragment;
-  }
-  return new Text();
+var parsers = {};
+function parseHTML(html2, ns) {
+  const parser = parsers[ns] ||= document.createElementNS(ns, "template");
+  const content = (parser.innerHTML = html2, parser.content || parser);
+  if (!content.firstChild) content.appendChild(new Text());
+  return content;
 }
 
 // src/dom/dom.ts
@@ -983,14 +970,18 @@ function attrsEvents(scope, nodeAccessor) {
 }
 function html(scope, value2, accessor) {
   const firstChild = scope[accessor];
+  const parentNode = firstChild.parentNode;
   const lastChild = scope[accessor + "-" /* DynamicPlaceholderLastChild */] || firstChild;
   const newContent = parseHTML(
-    value2 || value2 === 0 ? value2 + "" : "<!>"
-    // TODO: is the comment needed
+    value2 || value2 === 0 ? value2 + "" : "",
+    parentNode.namespaceURI
+  );
+  insertChildNodes(
+    parentNode,
+    firstChild,
+    scope[accessor] = newContent.firstChild,
+    scope[accessor + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild
   );
-  scope[accessor] = newContent.firstChild;
-  scope[accessor + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild;
-  firstChild.parentNode.insertBefore(newContent, firstChild);
   removeChildNodes(firstChild, lastChild);
 }
 function props(scope, nodeIndex, index) {
@@ -1040,6 +1031,21 @@ function removeChildNodes(startNode, endNode) {
     current = next;
   }
 }
+function insertChildNodes(parentNode, referenceNode, startNode, endNode) {
+  parentNode.insertBefore(toInsertNode(startNode, endNode), referenceNode);
+}
+function toInsertNode(startNode, endNode) {
+  if (startNode === endNode) return startNode;
+  const parent = new DocumentFragment();
+  const stop = endNode.nextSibling;
+  let current = startNode;
+  while (current !== stop) {
+    const next = current.nextSibling;
+    parent.appendChild(current);
+    current = next;
+  }
+  return parent;
+}
 
 // src/dom/scope.ts
 var pendingScopes = [];
@@ -1084,13 +1090,12 @@ function removeAndDestroyBranch(branch) {
   removeChildNodes(branch.___startNode, branch.___endNode);
 }
 function insertBranchBefore(branch, parentNode, nextSibling) {
-  let current = branch.___startNode;
-  const stop = branch.___endNode.nextSibling;
-  while (current !== stop) {
-    const next = current.nextSibling;
-    parentNode.insertBefore(current, nextSibling);
-    current = next;
-  }
+  insertChildNodes(
+    parentNode,
+    nextSibling,
+    branch.___startNode,
+    branch.___endNode
+  );
 }
 
 // src/dom/reconcile.ts
@@ -1333,7 +1338,7 @@ function getDebugKey(index, node) {
 }
 
 // src/dom/renderer.ts
-function createBranchScopeWithRenderer(renderer, $global, parentScope) {
+function createBranchScopeWithRenderer(renderer, $global, parentScope, parentNode) {
   const branch = createBranch(
     $global,
     renderer.___owner || parentScope,
@@ -1342,19 +1347,23 @@ function createBranchScopeWithRenderer(renderer, $global, parentScope) {
   if (true) {
     branch.___renderer = renderer;
   }
-  initBranch(renderer, branch);
+  initBranch(renderer, branch, parentNode);
   return branch;
 }
-function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope) {
+function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope, parentNode) {
   if (typeof tagNameOrRenderer !== "string") {
     return createBranchScopeWithRenderer(
       tagNameOrRenderer,
       $global,
-      parentScope
+      parentScope,
+      parentNode
     );
   }
   const branch = createBranch($global, parentScope, parentScope);
-  branch[true ? `#${tagNameOrRenderer}/0` : 0] = branch.___startNode = branch.___endNode = document.createElement(tagNameOrRenderer);
+  branch[true ? `#${tagNameOrRenderer}/0` : 0] = branch.___startNode = branch.___endNode = document.createElementNS(
+    tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI,
+    tagNameOrRenderer
+  );
   return branch;
 }
 function createBranch($global, ownerScope, parentScope) {
@@ -1371,19 +1380,15 @@ function createBranch($global, ownerScope, parentScope) {
   }
   return branch;
 }
-function initBranch(renderer, branch) {
-  const dom = renderer.___clone();
-  walk(
-    dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom,
-    renderer.___walks,
-    branch
-  );
-  branch.___startNode = dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom;
-  branch.___endNode = dom.nodeType === 11 /* DocumentFragment */ ? dom.lastChild : dom;
+function initBranch(renderer, branch, parentNode) {
+  const clone = renderer.___clone(parentNode.namespaceURI);
+  const cloneParent = clone.parentNode;
+  walk(cloneParent?.firstChild || clone, renderer.___walks, branch);
+  branch.___startNode = cloneParent?.firstChild || clone;
+  branch.___endNode = cloneParent?.lastChild || clone;
   if (renderer.___setup) {
     queueRender(branch, renderer.___setup);
   }
-  return dom;
 }
 function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
   return (scope, attrsOrOp) => {
@@ -1441,10 +1446,18 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
 function createRenderer(template, walks, setup, getArgs) {
   return createRendererWithOwner(template, walks, setup, getArgs)();
 }
-function _clone() {
-  return (this.___sourceNode ||= parseHTMLOrSingleNode(
-    this.___template
-  )).cloneNode(true);
+function _clone(ns) {
+  return ((cloneCache[ns] ||= {})[this.___template] ||= createCloneableHTML(
+    this.___template,
+    ns
+  ))();
+}
+var cloneCache = {};
+function createCloneableHTML(html2, ns) {
+  const { firstChild, lastChild } = parseHTML(html2, ns);
+  const parent = document.createElementNS(ns, "t");
+  insertChildNodes(parent, null, firstChild, lastChild);
+  return firstChild === lastChild && firstChild.nodeType < 8 /* Comment */ ? () => firstChild.cloneNode(true) : () => parent.cloneNode(true).firstChild;
 }
 
 // src/dom/control-flow.ts
@@ -1475,7 +1488,12 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
 };
 function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]);
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : getEmptyBranch(scope[nodeAccessor]);
+  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+    newRenderer,
+    scope.$global,
+    scope,
+    prevBranch.___endNode.parentNode
+  ) : getEmptyBranch(scope[nodeAccessor]);
   insertBranchBefore(
     newBranch,
     prevBranch.___endNode.parentNode,
@@ -1512,7 +1530,12 @@ var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersecti
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
   const referenceNode = scope[nodeAccessor];
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : void 0;
+  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+    newRenderer,
+    scope.$global,
+    scope,
+    referenceNode
+  ) : void 0;
   referenceNode.textContent = "";
   if (newBranch) {
     insertBranchBefore(newBranch, referenceNode, null);
@@ -1573,18 +1596,23 @@ function loop(nodeAccessor, renderer, forEach) {
       return;
     }
     const referenceNode = scope[nodeAccessor];
-    const referenceIsMarker = referenceNode.nodeType === 8 || referenceNode.nodeType === 3;
+    const referenceIsMarker = referenceNode.nodeType > 1 /* Element */;
     const oldMap = scope[nodeAccessor + "(" /* LoopScopeMap */] || (referenceIsMarker ? emptyMarkerMap : emptyMap);
     const oldArray = scope[nodeAccessor + "!" /* LoopScopeArray */] || Array.from(oldMap.values());
+    const parentNode = referenceIsMarker ? referenceNode.parentNode || oldArray[0].___startNode.parentNode : referenceNode;
     let newMap;
     let newArray;
     let afterReference;
-    let parentNode;
     let needsReconciliation = true;
     forEach(valueOrOp, (key, args) => {
       let branch = oldMap.get(key);
       if (!branch) {
-        branch = createBranchScopeWithRenderer(renderer, scope.$global, scope);
+        branch = createBranchScopeWithRenderer(
+          renderer,
+          scope.$global,
+          scope,
+          parentNode
+        );
       } else {
       }
       if (params) {
@@ -1618,10 +1646,8 @@ function loop(nodeAccessor, renderer, forEach) {
         }
         const oldLastChild = oldArray[oldArray.length - 1];
         afterReference = oldLastChild.___endNode.nextSibling;
-        parentNode = oldLastChild.___startNode.parentNode;
       } else {
         afterReference = null;
-        parentNode = referenceNode;
       }
       reconcile(parentNode, oldArray, newArray, afterReference);
     }
@@ -1943,16 +1969,18 @@ function abort(ctrl) {
 var prefix = true ? "$compat_" : "$C_";
 var RENDERER_REGISTER_ID = prefix + (true ? "renderer" : "r");
 var SET_SCOPE_REGISTER_ID = prefix + (true ? "setScope" : "s");
+var RENDER_BODY_ID = prefix + (true ? "renderBody" : "b");
 
 // src/dom/compat.ts
 var classIdToBranch = /* @__PURE__ */ new Map();
 var compat = {
   patchConditionals,
   queueEffect,
-  init() {
+  init(warp10Noop) {
     register(SET_SCOPE_REGISTER_ID, (branch) => {
       classIdToBranch.set(branch.m5c, branch);
     });
+    register(RENDER_BODY_ID, warp10Noop);
   },
   registerRenderer(fn) {
     register(RENDERER_REGISTER_ID, fn);
@@ -2017,7 +2045,7 @@ var compat = {
       if (!branch) {
         branch = component.scope = createScope(out.global);
         branch._ = renderer.___owner;
-        initBranch(renderer, branch);
+        initBranch(renderer, branch, document.body);
       } else {
         applyArgs(branch, MARK);
         existing = true;
@@ -2025,7 +2053,7 @@ var compat = {
       applyArgs(branch, args);
     });
     if (!existing) {
-      return branch.___startNode === branch.___endNode ? branch.___startNode : branch.___startNode.parentNode;
+      return toInsertNode(branch.___startNode, branch.___endNode);
     }
   }
 };
@@ -2047,7 +2075,7 @@ var createTemplate = (templateId, ...rendererArgs) => {
   return register(templateId, renderer);
 };
 function mount(input = {}, reference, position) {
-  let branch, dom;
+  let branch;
   let parentNode = reference;
   let nextSibling = null;
   let { $global } = input;
@@ -2080,10 +2108,15 @@ function mount(input = {}, reference, position) {
   const args = this.___args;
   const effects = prepareEffects(() => {
     branch = createScope($global);
-    dom = initBranch(this, branch);
+    initBranch(this, branch, parentNode);
     args?.(branch, [input]);
   });
-  parentNode.insertBefore(dom, nextSibling);
+  insertChildNodes(
+    parentNode,
+    nextSibling,
+    branch.___startNode,
+    branch.___endNode
+  );
   runEffects(effects);
   return {
     update: (newInput) => {

package/dist/debug/dom.mjs

@@ -702,25 +702,12 @@ function toValueProp(it) {
 }
 
 // src/dom/parse-html.ts
-var parser = /* @__PURE__ */ document.createElement("template");
-function parseHTML(html2) {
-  parser.innerHTML = html2;
-  return parser.content;
-}
-function parseHTMLOrSingleNode(html2) {
-  const content = parseHTML(html2);
-  if (content.firstChild) {
-    if (content.firstChild === content.lastChild && // If the firstChild is a comment it's possible its
-    // a single replaced node, in which case the walker can't replace
-    // the node itself.
-    content.firstChild.nodeType !== 8) {
-      return content.firstChild;
-    }
-    const fragment = new DocumentFragment();
-    fragment.appendChild(content);
-    return fragment;
-  }
-  return new Text();
+var parsers = {};
+function parseHTML(html2, ns) {
+  const parser = parsers[ns] ||= document.createElementNS(ns, "template");
+  const content = (parser.innerHTML = html2, parser.content || parser);
+  if (!content.firstChild) content.appendChild(new Text());
+  return content;
 }
 
 // src/dom/dom.ts
@@ -896,14 +883,18 @@ function attrsEvents(scope, nodeAccessor) {
 }
 function html(scope, value2, accessor) {
   const firstChild = scope[accessor];
+  const parentNode = firstChild.parentNode;
   const lastChild = scope[accessor + "-" /* DynamicPlaceholderLastChild */] || firstChild;
   const newContent = parseHTML(
-    value2 || value2 === 0 ? value2 + "" : "<!>"
-    // TODO: is the comment needed
+    value2 || value2 === 0 ? value2 + "" : "",
+    parentNode.namespaceURI
+  );
+  insertChildNodes(
+    parentNode,
+    firstChild,
+    scope[accessor] = newContent.firstChild,
+    scope[accessor + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild
   );
-  scope[accessor] = newContent.firstChild;
-  scope[accessor + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild;
-  firstChild.parentNode.insertBefore(newContent, firstChild);
   removeChildNodes(firstChild, lastChild);
 }
 function props(scope, nodeIndex, index) {
@@ -953,6 +944,21 @@ function removeChildNodes(startNode, endNode) {
     current = next;
   }
 }
+function insertChildNodes(parentNode, referenceNode, startNode, endNode) {
+  parentNode.insertBefore(toInsertNode(startNode, endNode), referenceNode);
+}
+function toInsertNode(startNode, endNode) {
+  if (startNode === endNode) return startNode;
+  const parent = new DocumentFragment();
+  const stop = endNode.nextSibling;
+  let current = startNode;
+  while (current !== stop) {
+    const next = current.nextSibling;
+    parent.appendChild(current);
+    current = next;
+  }
+  return parent;
+}
 
 // src/dom/scope.ts
 var pendingScopes = [];
@@ -997,13 +1003,12 @@ function removeAndDestroyBranch(branch) {
   removeChildNodes(branch.___startNode, branch.___endNode);
 }
 function insertBranchBefore(branch, parentNode, nextSibling) {
-  let current = branch.___startNode;
-  const stop = branch.___endNode.nextSibling;
-  while (current !== stop) {
-    const next = current.nextSibling;
-    parentNode.insertBefore(current, nextSibling);
-    current = next;
-  }
+  insertChildNodes(
+    parentNode,
+    nextSibling,
+    branch.___startNode,
+    branch.___endNode
+  );
 }
 
 // src/dom/reconcile.ts
@@ -1246,7 +1251,7 @@ function getDebugKey(index, node) {
 }
 
 // src/dom/renderer.ts
-function createBranchScopeWithRenderer(renderer, $global, parentScope) {
+function createBranchScopeWithRenderer(renderer, $global, parentScope, parentNode) {
   const branch = createBranch(
     $global,
     renderer.___owner || parentScope,
@@ -1255,19 +1260,23 @@ function createBranchScopeWithRenderer(renderer, $global, parentScope) {
   if (true) {
     branch.___renderer = renderer;
   }
-  initBranch(renderer, branch);
+  initBranch(renderer, branch, parentNode);
   return branch;
 }
-function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope) {
+function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope, parentNode) {
   if (typeof tagNameOrRenderer !== "string") {
     return createBranchScopeWithRenderer(
       tagNameOrRenderer,
       $global,
-      parentScope
+      parentScope,
+      parentNode
     );
   }
   const branch = createBranch($global, parentScope, parentScope);
-  branch[true ? `#${tagNameOrRenderer}/0` : 0] = branch.___startNode = branch.___endNode = document.createElement(tagNameOrRenderer);
+  branch[true ? `#${tagNameOrRenderer}/0` : 0] = branch.___startNode = branch.___endNode = document.createElementNS(
+    tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI,
+    tagNameOrRenderer
+  );
   return branch;
 }
 function createBranch($global, ownerScope, parentScope) {
@@ -1284,19 +1293,15 @@ function createBranch($global, ownerScope, parentScope) {
   }
   return branch;
 }
-function initBranch(renderer, branch) {
-  const dom = renderer.___clone();
-  walk(
-    dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom,
-    renderer.___walks,
-    branch
-  );
-  branch.___startNode = dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom;
-  branch.___endNode = dom.nodeType === 11 /* DocumentFragment */ ? dom.lastChild : dom;
+function initBranch(renderer, branch, parentNode) {
+  const clone = renderer.___clone(parentNode.namespaceURI);
+  const cloneParent = clone.parentNode;
+  walk(cloneParent?.firstChild || clone, renderer.___walks, branch);
+  branch.___startNode = cloneParent?.firstChild || clone;
+  branch.___endNode = cloneParent?.lastChild || clone;
   if (renderer.___setup) {
     queueRender(branch, renderer.___setup);
   }
-  return dom;
 }
 function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
   return (scope, attrsOrOp) => {
@@ -1354,10 +1359,18 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
 function createRenderer(template, walks, setup, getArgs) {
   return createRendererWithOwner(template, walks, setup, getArgs)();
 }
-function _clone() {
-  return (this.___sourceNode ||= parseHTMLOrSingleNode(
-    this.___template
-  )).cloneNode(true);
+function _clone(ns) {
+  return ((cloneCache[ns] ||= {})[this.___template] ||= createCloneableHTML(
+    this.___template,
+    ns
+  ))();
+}
+var cloneCache = {};
+function createCloneableHTML(html2, ns) {
+  const { firstChild, lastChild } = parseHTML(html2, ns);
+  const parent = document.createElementNS(ns, "t");
+  insertChildNodes(parent, null, firstChild, lastChild);
+  return firstChild === lastChild && firstChild.nodeType < 8 /* Comment */ ? () => firstChild.cloneNode(true) : () => parent.cloneNode(true).firstChild;
 }
 
 // src/dom/control-flow.ts
@@ -1388,7 +1401,12 @@ var conditional = function conditional2(nodeAccessor, fn, getIntersection) {
 };
 function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]);
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : getEmptyBranch(scope[nodeAccessor]);
+  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+    newRenderer,
+    scope.$global,
+    scope,
+    prevBranch.___endNode.parentNode
+  ) : getEmptyBranch(scope[nodeAccessor]);
   insertBranchBefore(
     newBranch,
     prevBranch.___endNode.parentNode,
@@ -1425,7 +1443,12 @@ var conditionalOnlyChild = function conditional3(nodeAccessor, fn, getIntersecti
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
   const prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */];
   const referenceNode = scope[nodeAccessor];
-  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : void 0;
+  const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+    newRenderer,
+    scope.$global,
+    scope,
+    referenceNode
+  ) : void 0;
   referenceNode.textContent = "";
   if (newBranch) {
     insertBranchBefore(newBranch, referenceNode, null);
@@ -1486,18 +1509,23 @@ function loop(nodeAccessor, renderer, forEach) {
       return;
     }
     const referenceNode = scope[nodeAccessor];
-    const referenceIsMarker = referenceNode.nodeType === 8 || referenceNode.nodeType === 3;
+    const referenceIsMarker = referenceNode.nodeType > 1 /* Element */;
     const oldMap = scope[nodeAccessor + "(" /* LoopScopeMap */] || (referenceIsMarker ? emptyMarkerMap : emptyMap);
     const oldArray = scope[nodeAccessor + "!" /* LoopScopeArray */] || Array.from(oldMap.values());
+    const parentNode = referenceIsMarker ? referenceNode.parentNode || oldArray[0].___startNode.parentNode : referenceNode;
     let newMap;
     let newArray;
     let afterReference;
-    let parentNode;
     let needsReconciliation = true;
     forEach(valueOrOp, (key, args) => {
       let branch = oldMap.get(key);
       if (!branch) {
-        branch = createBranchScopeWithRenderer(renderer, scope.$global, scope);
+        branch = createBranchScopeWithRenderer(
+          renderer,
+          scope.$global,
+          scope,
+          parentNode
+        );
       } else {
       }
       if (params) {
@@ -1531,10 +1559,8 @@ function loop(nodeAccessor, renderer, forEach) {
         }
         const oldLastChild = oldArray[oldArray.length - 1];
         afterReference = oldLastChild.___endNode.nextSibling;
-        parentNode = oldLastChild.___startNode.parentNode;
       } else {
         afterReference = null;
-        parentNode = referenceNode;
       }
       reconcile(parentNode, oldArray, newArray, afterReference);
     }
@@ -1856,16 +1882,18 @@ function abort(ctrl) {
 var prefix = true ? "$compat_" : "$C_";
 var RENDERER_REGISTER_ID = prefix + (true ? "renderer" : "r");
 var SET_SCOPE_REGISTER_ID = prefix + (true ? "setScope" : "s");
+var RENDER_BODY_ID = prefix + (true ? "renderBody" : "b");
 
 // src/dom/compat.ts
 var classIdToBranch = /* @__PURE__ */ new Map();
 var compat = {
   patchConditionals,
   queueEffect,
-  init() {
+  init(warp10Noop) {
     register(SET_SCOPE_REGISTER_ID, (branch) => {
       classIdToBranch.set(branch.m5c, branch);
     });
+    register(RENDER_BODY_ID, warp10Noop);
   },
   registerRenderer(fn) {
     register(RENDERER_REGISTER_ID, fn);
@@ -1930,7 +1958,7 @@ var compat = {
       if (!branch) {
         branch = component.scope = createScope(out.global);
         branch._ = renderer.___owner;
-        initBranch(renderer, branch);
+        initBranch(renderer, branch, document.body);
       } else {
         applyArgs(branch, MARK);
         existing = true;
@@ -1938,7 +1966,7 @@ var compat = {
       applyArgs(branch, args);
     });
     if (!existing) {
-      return branch.___startNode === branch.___endNode ? branch.___startNode : branch.___startNode.parentNode;
+      return toInsertNode(branch.___startNode, branch.___endNode);
     }
   }
 };
@@ -1960,7 +1988,7 @@ var createTemplate = (templateId, ...rendererArgs) => {
   return register(templateId, renderer);
 };
 function mount(input = {}, reference, position) {
-  let branch, dom;
+  let branch;
   let parentNode = reference;
   let nextSibling = null;
   let { $global } = input;
@@ -1993,10 +2021,15 @@ function mount(input = {}, reference, position) {
   const args = this.___args;
   const effects = prepareEffects(() => {
     branch = createScope($global);
-    dom = initBranch(this, branch);
+    initBranch(this, branch, parentNode);
     args?.(branch, [input]);
   });
-  parentNode.insertBefore(dom, nextSibling);
+  insertChildNodes(
+    parentNode,
+    nextSibling,
+    branch.___startNode,
+    branch.___endNode
+  );
   runEffects(effects);
   return {
     update: (newInput) => {