marko 6.0.0-next.3.28 → 6.0.0-next.3.30

package/dist/dom.mjs

@@ -143,17 +143,17 @@ var DEFAULT_RUNTIME_ID = "M", DEFAULT_RENDER_ID = "_";
 var registeredValues = {}, Render = class {
   n = [];
   o = {};
-  z = {
+  A = {
     _: registeredValues
   };
   constructor(renders, runtimeId, renderId) {
-    this.A = renders, this.B = runtimeId, this.p = renderId, this.q = renders[renderId], this.s();
+    this.B = renders, this.C = runtimeId, this.p = renderId, this.q = renders[renderId], this.s();
   }
   w() {
     this.q.w(), this.s();
   }
   s() {
-    let data2 = this.q, serializeContext = this.z, scopeLookup = this.o, visits = data2.v, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map();
+    let data2 = this.q, serializeContext = this.A, scopeLookup = this.o, visits = data2.v, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map();
     if (visits.length) {
       let commentPrefixLen = data2.i.length, closestBranchMarkers = /* @__PURE__ */ new Map(), visitNodes = new Set(visits), lastEndNode;
       data2.v = [];
@@ -204,7 +204,7 @@ var registeredValues = {}, Render = class {
           let resumeData = resumes[i++];
           if (typeof resumeData == "function") {
             let scopes = resumeData(serializeContext), { $global } = scopeLookup;
-            $global || (scopeLookup.$global = $global = scopes.$ || {}, $global.runtimeId = this.B, $global.renderId = this.p);
+            $global || (scopeLookup.$global = $global = scopes.$ || {}, $global.runtimeId = this.C, $global.renderId = this.p);
             for (let scopeId in scopes)
               if (scopeId !== "$") {
                 let scope = scopes[scopeId], prevScope = scopeLookup[scopeId];
@@ -218,7 +218,7 @@ var registeredValues = {}, Render = class {
                   branch.f = +scopeId, scope.c = branch, parentBranch && (branch.t = parentBranch, (parentBranch.k ||= /* @__PURE__ */ new Set()).add(branch));
                 }
               }
-          } else i === len || typeof resumes[i] != "string" ? delete this.A[this.p] : registeredValues[resumes[i++]](
+          } else i === len || typeof resumes[i] != "string" ? delete this.B[this.p] : registeredValues[resumes[i++]](
             scopeLookup[resumeData],
             scopeLookup[resumeData]
           );
@@ -256,7 +256,7 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
   }
 }
 function registerSubscriber(id, signal) {
-  return register(id, signal.C), signal;
+  return register(id, signal.D), signal;
 }
 function nodeRef(id, key) {
   return register(id, (scope) => () => scope[key]);
@@ -353,7 +353,7 @@ function setSelectOptions(el, value2, valueChange) {
   }
 }
 function controllable_detailsOrDialog_open(scope, nodeAccessor, open, openChange) {
-  scope[nodeAccessor + ";" /* ControlledHandler */] = openChange, openChange ? scope[nodeAccessor + "=" /* ControlledType */] = 4 /* DetailsOrDialogOpen */ : scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */, scope[nodeAccessor].open = normalizeBoolProp(open);
+  scope[nodeAccessor + ";" /* ControlledHandler */] = openChange, openChange ? scope[nodeAccessor + "=" /* ControlledType */] = 4 /* DetailsOrDialogOpen */ : scope[nodeAccessor + "=" /* ControlledType */] = 5 /* None */, scope[nodeAccessor].open = scope[nodeAccessor + ":" /* ControlledValue */] = normalizeBoolProp(open);
 }
 function controllable_detailsOrDialog_open_effect(scope, nodeAccessor) {
   let el = scope[nodeAccessor], hasChanged = () => el.open !== scope[nodeAccessor + ":" /* ControlledValue */];
@@ -435,22 +435,10 @@ function toValueProp(it) {
 }
 
 // src/dom/parse-html.ts
-var parser = /* @__PURE__ */ document.createElement("template");
-function parseHTML(html2) {
-  return parser.innerHTML = html2, parser.content;
-}
-function parseHTMLOrSingleNode(html2) {
-  let 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;
-    let fragment = new DocumentFragment();
-    return fragment.appendChild(content), fragment;
-  }
-  return new Text();
+var parsers = {};
+function parseHTML(html2, ns) {
+  let parser = parsers[ns] ||= document.createElementNS(ns, "template"), content = (parser.innerHTML = html2, parser.content || parser);
+  return content.firstChild || content.appendChild(new Text()), content;
 }
 
 // src/dom/dom.ts
@@ -590,11 +578,16 @@ function attrsEvents(scope, nodeAccessor) {
     on(el, name, events[name]);
 }
 function html(scope, value2, accessor) {
-  let firstChild = scope[accessor], lastChild = scope[accessor + "-" /* DynamicPlaceholderLastChild */] || firstChild, newContent = parseHTML(
-    value2 || value2 === 0 ? value2 + "" : "<!>"
-    // TODO: is the comment needed
+  let firstChild = scope[accessor], parentNode = firstChild.parentNode, lastChild = scope[accessor + "-" /* DynamicPlaceholderLastChild */] || firstChild, newContent = parseHTML(
+    value2 || value2 === 0 ? value2 + "" : "",
+    parentNode.namespaceURI
   );
-  scope[accessor] = newContent.firstChild, scope[accessor + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild, firstChild.parentNode.insertBefore(newContent, firstChild), removeChildNodes(firstChild, lastChild);
+  insertChildNodes(
+    parentNode,
+    firstChild,
+    scope[accessor] = newContent.firstChild,
+    scope[accessor + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild
+  ), removeChildNodes(firstChild, lastChild);
 }
 function props(scope, nodeIndex, index) {
   let nextProps = scope[index], prevProps = scope[index + "-"], node = scope[nodeIndex];
@@ -626,6 +619,18 @@ function removeChildNodes(startNode, endNode) {
     current.remove(), current = next;
   }
 }
+function insertChildNodes(parentNode, referenceNode, startNode, endNode) {
+  parentNode.insertBefore(toInsertNode(startNode, endNode), referenceNode);
+}
+function toInsertNode(startNode, endNode) {
+  if (startNode === endNode) return startNode;
+  let parent = new DocumentFragment(), stop = endNode.nextSibling, current = startNode;
+  for (; current !== stop; ) {
+    let next = current.nextSibling;
+    parent.appendChild(current), current = next;
+  }
+  return parent;
+}
 
 // src/dom/scope.ts
 var pendingScopes = [];
@@ -649,7 +654,7 @@ function destroyBranch(branch) {
   branch.t?.k?.delete(branch), destroyNestedBranches(branch);
 }
 function destroyNestedBranches(branch) {
-  branch.D = 1, branch.k?.forEach(destroyNestedBranches), branch.E?.forEach((scope) => {
+  branch.E = 1, branch.k?.forEach(destroyNestedBranches), branch.F?.forEach((scope) => {
     for (let id in scope.h)
       scope.h[id]?.abort();
   });
@@ -658,11 +663,12 @@ function removeAndDestroyBranch(branch) {
   destroyBranch(branch), removeChildNodes(branch.a, branch.b);
 }
 function insertBranchBefore(branch, parentNode, nextSibling) {
-  let current = branch.a, stop = branch.b.nextSibling;
-  for (; current !== stop; ) {
-    let next = current.nextSibling;
-    parentNode.insertBefore(current, nextSibling), current = next;
-  }
+  insertChildNodes(
+    parentNode,
+    nextSibling,
+    branch.a,
+    branch.b
+  );
 }
 
 // src/dom/reconcile.ts
@@ -784,35 +790,35 @@ function walkInternal(walkCodes, scope, currentWalkIndex) {
 }
 
 // src/dom/renderer.ts
-function createBranchScopeWithRenderer(renderer, $global, parentScope) {
+function createBranchScopeWithRenderer(renderer, $global, parentScope, parentNode) {
   let branch = createBranch(
     $global,
     renderer.u || parentScope,
     parentScope
   );
-  return initBranch(renderer, branch), branch;
+  return initBranch(renderer, branch, parentNode), branch;
 }
-function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope) {
+function createBranchScopeWithTagNameOrRenderer(tagNameOrRenderer, $global, parentScope, parentNode) {
   if (typeof tagNameOrRenderer != "string")
     return createBranchScopeWithRenderer(
       tagNameOrRenderer,
       $global,
-      parentScope
+      parentScope,
+      parentNode
     );
   let branch = createBranch($global, parentScope, parentScope);
-  return branch[0] = branch.a = branch.b = document.createElement(tagNameOrRenderer), branch;
+  return branch[0] = branch.a = branch.b = document.createElementNS(
+    tagNameOrRenderer === "svg" ? "http://www.w3.org/2000/svg" : tagNameOrRenderer === "math" ? "http://www.w3.org/1998/Math/MathML" : parentNode.namespaceURI,
+    tagNameOrRenderer
+  ), branch;
 }
 function createBranch($global, ownerScope, parentScope) {
   let branch = createScope($global), parentBranch = parentScope.c;
   return branch._ = ownerScope, branch.c = branch, parentBranch ? (branch.f = parentBranch.f + 1, branch.t = parentBranch, (parentBranch.k ||= /* @__PURE__ */ new Set()).add(branch)) : branch.f = 1, branch;
 }
-function initBranch(renderer, branch) {
-  let dom = renderer.l();
-  return walk(
-    dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom,
-    renderer.F,
-    branch
-  ), branch.a = dom.nodeType === 11 /* DocumentFragment */ ? dom.firstChild : dom, branch.b = dom.nodeType === 11 /* DocumentFragment */ ? dom.lastChild : dom, renderer.x && queueRender(branch, renderer.x), dom;
+function initBranch(renderer, branch, parentNode) {
+  let clone = renderer.l(parentNode.namespaceURI), cloneParent = clone.parentNode;
+  walk(cloneParent?.firstChild || clone, renderer.G, branch), branch.a = cloneParent?.firstChild || clone, branch.b = cloneParent?.lastChild || clone, renderer.x && queueRender(branch, renderer.x);
 }
 function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
   return (scope, attrsOrOp) => {
@@ -843,12 +849,12 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
   let args, id = {}, walks = rawWalks ? /* @__PURE__ */ trimWalkString(rawWalks) : " ";
   return (owner) => ({
     j: id,
-    G: template,
-    F: walks,
+    y: template,
+    G: walks,
     x: setup,
     l: _clone,
     u: owner,
-    H: void 0,
+    J: void 0,
     get d() {
       return args ||= getArgs?.();
     }
@@ -857,10 +863,16 @@ function createRendererWithOwner(template, rawWalks, setup, getArgs) {
 function createRenderer(template, walks, setup, getArgs) {
   return createRendererWithOwner(template, walks, setup, getArgs)();
 }
-function _clone() {
-  return (this.H ||= parseHTMLOrSingleNode(
-    this.G
-  )).cloneNode(!0);
+function _clone(ns) {
+  return ((cloneCache[ns] ||= {})[this.y] ||= createCloneableHTML(
+    this.y,
+    ns
+  ))();
+}
+var cloneCache = {};
+function createCloneableHTML(html2, ns) {
+  let { firstChild, lastChild } = parseHTML(html2, ns), parent = document.createElementNS(ns, "t");
+  return insertChildNodes(parent, null, firstChild, lastChild), firstChild === lastChild && firstChild.nodeType < 8 /* Comment */ ? () => firstChild.cloneNode(!0) : () => parent.cloneNode(!0).firstChild;
 }
 
 // src/dom/control-flow.ts
@@ -880,7 +892,12 @@ var conditional = function(nodeAccessor, fn, getIntersection) {
   };
 };
 function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
-  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]), newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : getEmptyBranch(scope[nodeAccessor]);
+  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */] || getEmptyBranch(scope[nodeAccessor]), newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+    newRenderer,
+    scope.$global,
+    scope,
+    prevBranch.b.parentNode
+  ) : getEmptyBranch(scope[nodeAccessor]);
   insertBranchBefore(
     newBranch,
     prevBranch.b.parentNode,
@@ -904,7 +921,12 @@ var conditionalOnlyChild = function(nodeAccessor, fn, getIntersection) {
   };
 };
 function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
-  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : void 0;
+  let prevBranch = scope[nodeAccessor + "!" /* ConditionalScope */], referenceNode = scope[nodeAccessor], newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(
+    newRenderer,
+    scope.$global,
+    scope,
+    referenceNode
+  ) : void 0;
   referenceNode.textContent = "", newBranch && insertBranchBefore(newBranch, referenceNode, null), prevBranch && destroyBranch(prevBranch), scope[nodeAccessor + "!" /* ConditionalScope */] = newBranch;
 }
 var emptyMarkerMap = /* @__PURE__ */ new Map([
@@ -949,20 +971,16 @@ function loop(nodeAccessor, renderer, forEach) {
           params?.(branch, valueOrOp);
       return;
     }
-    let referenceNode = scope[nodeAccessor], referenceIsMarker = referenceNode.nodeType === 8 || referenceNode.nodeType === 3, oldMap = scope[nodeAccessor + "(" /* LoopScopeMap */] || (referenceIsMarker ? emptyMarkerMap : emptyMap), oldArray = scope[nodeAccessor + "!" /* LoopScopeArray */] || Array.from(oldMap.values()), newMap, newArray, afterReference, parentNode, needsReconciliation = !0;
-    if (forEach(valueOrOp, (key, args) => {
+    let referenceNode = scope[nodeAccessor], referenceIsMarker = referenceNode.nodeType > 1 /* Element */, oldMap = scope[nodeAccessor + "(" /* LoopScopeMap */] || (referenceIsMarker ? emptyMarkerMap : emptyMap), oldArray = scope[nodeAccessor + "!" /* LoopScopeArray */] || Array.from(oldMap.values()), parentNode = referenceIsMarker ? referenceNode.parentNode || oldArray[0].a.parentNode : referenceNode, newMap, newArray, afterReference, needsReconciliation = !0;
+    forEach(valueOrOp, (key, args) => {
       let branch = oldMap.get(key);
-      branch || (branch = createBranchScopeWithRenderer(renderer, scope.$global, scope)), params && params(branch, args), newMap ? (newMap.set(key, branch), newArray.push(branch)) : (newMap = /* @__PURE__ */ new Map([[key, branch]]), newArray = [branch]);
-    }), newMap || (referenceIsMarker ? (newMap = emptyMarkerMap, newArray = emptyMarkerArray, getEmptyBranch(referenceNode)) : (oldArray.forEach(destroyBranch), referenceNode.textContent = "", newMap = emptyMap, newArray = emptyArray, needsReconciliation = !1)), needsReconciliation) {
-      if (referenceIsMarker) {
-        oldMap === emptyMarkerMap && getEmptyBranch(referenceNode);
-        let oldLastChild = oldArray[oldArray.length - 1];
-        afterReference = oldLastChild.b.nextSibling, parentNode = oldLastChild.a.parentNode;
-      } else
-        afterReference = null, parentNode = referenceNode;
-      reconcile(parentNode, oldArray, newArray, afterReference);
-    }
-    scope[nodeAccessor + "(" /* LoopScopeMap */] = newMap, scope[nodeAccessor + "!" /* LoopScopeArray */] = newArray;
+      branch || (branch = createBranchScopeWithRenderer(
+        renderer,
+        scope.$global,
+        scope,
+        parentNode
+      )), params && params(branch, args), newMap ? (newMap.set(key, branch), newArray.push(branch)) : (newMap = /* @__PURE__ */ new Map([[key, branch]]), newArray = [branch]);
+    }), newMap || (referenceIsMarker ? (newMap = emptyMarkerMap, newArray = emptyMarkerArray, getEmptyBranch(referenceNode)) : (oldArray.forEach(destroyBranch), referenceNode.textContent = "", newMap = emptyMap, newArray = emptyArray, needsReconciliation = !1)), needsReconciliation && (referenceIsMarker ? (oldMap === emptyMarkerMap && getEmptyBranch(referenceNode), afterReference = oldArray[oldArray.length - 1].b.nextSibling) : afterReference = null, reconcile(parentNode, oldArray, newArray, afterReference)), scope[nodeAccessor + "(" /* LoopScopeMap */] = newMap, scope[nodeAccessor + "!" /* LoopScopeArray */] = newArray;
   };
 }
 function bySecondArg(_item, index) {
@@ -1038,7 +1056,7 @@ function dynamicClosure(fn, getOwnerScope = defaultGetOwnerScope, getIntersectio
       getOwnerScope(scope)[ownerSubscribersAccessor].delete(scope);
     });
   };
-  return helperSignal._ = setupSignal, helperSignal.C = subscribe, helperSignal;
+  return helperSignal._ = setupSignal, helperSignal.D = subscribe, helperSignal;
 }
 function setTagVar(scope, childAccessor, tagVarSignal2) {
   scope[childAccessor]["/" /* TagVariable */] = (valueOrOp) => tagVarSignal2(scope, valueOrOp);
@@ -1080,9 +1098,9 @@ function queueSource(scope, signal, value2) {
 function queueRender(scope, signal, value2) {
   let i = pendingRenders.length, render = {
     m: scope,
-    I: signal,
-    J: value2,
-    y: i
+    H: signal,
+    I: value2,
+    z: i
   };
   for (pendingRenders.push(render); i; ) {
     let parentIndex = i - 1 >> 1, parent = pendingRenders[parentIndex];
@@ -1135,12 +1153,12 @@ function runRenders() {
       }
       pendingRenders[i] = item;
     }
-    render.m.c?.D || render.I(render.m, render.J);
+    render.m.c?.E || render.H(render.m, render.I);
   }
   finishPendingScopes();
 }
 function comparePendingRenders(a, b) {
-  return getBranchDepth(a) - getBranchDepth(b) || a.y - b.y;
+  return getBranchDepth(a) - getBranchDepth(b) || a.z - b.z;
 }
 function getBranchDepth(render) {
   return render.m.c?.f || 0;
@@ -1152,7 +1170,7 @@ function resetAbortSignal(scope, id) {
   ctrl && (queueEffect(ctrl, abort), scope.h[id] = void 0);
 }
 function getAbortSignal(scope, id) {
-  return scope.c && (scope.c.E ||= /* @__PURE__ */ new Set()).add(scope), ((scope.h ||= {})[id] ||= new AbortController()).signal;
+  return scope.c && (scope.c.F ||= /* @__PURE__ */ new Set()).add(scope), ((scope.h ||= {})[id] ||= new AbortController()).signal;
 }
 function abort(ctrl) {
   ctrl.abort();
@@ -1214,9 +1232,9 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
         normalizedInput[key === "renderBody" ? "content" : key] = input[key];
     }
     if (component.effects = prepareEffects(() => {
-      branch ? (applyArgs(branch, MARK), existing = !0) : (branch = component.scope = createScope(out.global), branch._ = renderer.u, initBranch(renderer, branch)), applyArgs(branch, args);
+      branch ? (applyArgs(branch, MARK), existing = !0) : (branch = component.scope = createScope(out.global), branch._ = renderer.u, initBranch(renderer, branch, document.body)), applyArgs(branch, args);
     }), !existing)
-      return branch.a === branch.b ? branch.a : branch.a.parentNode;
+      return toInsertNode(branch.a, branch.b);
   }
 };
 function noop() {
@@ -1228,7 +1246,7 @@ var createTemplate = (templateId, ...rendererArgs) => {
   return renderer.mount = mount, renderer._ = renderer, register(templateId, renderer);
 };
 function mount(input = {}, reference, position) {
-  let branch, dom, parentNode = reference, nextSibling = null, { $global } = input;
+  let branch, parentNode = reference, nextSibling = null, { $global } = input;
   switch ($global ? ({ $global, ...input } = input, $global = {
     runtimeId: DEFAULT_RUNTIME_ID,
     renderId: DEFAULT_RENDER_ID,
@@ -1248,9 +1266,14 @@ function mount(input = {}, reference, position) {
       break;
   }
   let args = this.d, effects = prepareEffects(() => {
-    branch = createScope($global), dom = initBranch(this, branch), args?.(branch, [input]);
+    branch = createScope($global), initBranch(this, branch, parentNode), args?.(branch, [input]);
   });
-  return parentNode.insertBefore(dom, nextSibling), runEffects(effects), {
+  return insertChildNodes(
+    parentNode,
+    nextSibling,
+    branch.a,
+    branch.b
+  ), runEffects(effects), {
     update: (newInput) => {
       args && runEffects(
         prepareEffects(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "6.0.0-next.3.28",
+  "version": "6.0.0-next.3.30",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",