marko 6.0.0-next.3.26 → 6.0.0-next.3.27

package/dist/common/types.d.ts

@@ -2,6 +2,8 @@ import type { Renderer as ClientRenderer } from "../dom/renderer";
 export type Falsy = undefined | null | false | 0 | "";
 export type CommentWalker = TreeWalker & Record<string, Comment>;
 export interface BranchScope extends Scope {
+    ___startNode: ChildNode;
+    ___endNode: ChildNode;
     ___parentBranch: BranchScope | undefined;
     ___branchDepth: number;
     ___destroyed: 1 | undefined;
@@ -12,8 +14,6 @@ export interface Scope {
     $global: Record<string, unknown>;
     _: Scope | undefined;
     ___args: unknown;
-    ___startNode: Node & ChildNode;
-    ___endNode: Node & ChildNode;
     ___pending: 1 | 0 | undefined;
     ___renderer: ClientRenderer | undefined;
     ___abortControllers: Record<string | number, AbortController | void> | undefined;
@@ -86,7 +86,7 @@ export interface TemplateInput extends Input {
     $global?: $Global;
 }
 export interface Template {
-    mount(input: Input, reference: ParentNode & Node, position?: InsertPosition): TemplateInstance;
+    mount(input: Input, reference: Node, position?: InsertPosition): TemplateInstance;
     render(input?: Input): RenderResult;
 }
 export interface TemplateInstance {

package/dist/debug/dom.js

@@ -174,64 +174,6 @@ function triggerMacroTask() {
   port2.postMessage(0);
 }
 
-// src/dom/scope.ts
-var pendingScopes = [];
-var debugID = 0;
-function createScope($global) {
-  const scope = {
-    ___pending: 1,
-    $global
-  };
-  if (true) {
-    scope.___debugId = "client-" + debugID++;
-  }
-  pendingScopes.push(scope);
-  return scope;
-}
-function finishPendingScopes() {
-  for (const scope of pendingScopes) {
-    scope.___pending = 0;
-  }
-  pendingScopes = [];
-}
-var emptyBranch = createScope({});
-function getEmptyBranch(marker) {
-  emptyBranch.___startNode = emptyBranch.___endNode = marker;
-  return emptyBranch;
-}
-function destroyBranch(branch) {
-  branch.___parentBranch?.___branchScopes?.delete(branch);
-  destroyNestedBranches(branch);
-}
-function destroyNestedBranches(branch) {
-  branch.___destroyed = 1;
-  branch.___branchScopes?.forEach(destroyNestedBranches);
-  branch.___abortScopes?.forEach((scope) => {
-    for (const id in scope.___abortControllers) {
-      scope.___abortControllers[id]?.abort();
-    }
-  });
-}
-function removeAndDestroyBranch(branch) {
-  destroyBranch(branch);
-  let current = branch.___startNode;
-  const stop = branch.___endNode.nextSibling;
-  while (current !== stop) {
-    const next = current.nextSibling;
-    current.remove();
-    current = next;
-  }
-}
-function insertBranchBefore(branch, parent, nextSibling) {
-  let current = branch.___startNode;
-  const stop = branch.___endNode.nextSibling;
-  while (current !== stop) {
-    const next = current.nextSibling;
-    parent.insertBefore(current, nextSibling);
-    current = next;
-  }
-}
-
 // src/common/helpers.ts
 function classValue(value2) {
   return toDelimitedString(value2, " ", stringifyClassObject);
@@ -287,173 +229,6 @@ function normalizeDynamicRenderer(value2) {
   if (value2) return value2.content || value2.default || value2;
 }
 
-// src/dom/reconcile.ts
-var WRONG_POS = 2147483647;
-function reconcile(parent, oldBranches, newBranches, afterReference) {
-  let oldStart = 0;
-  let newStart = 0;
-  let oldEnd = oldBranches.length - 1;
-  let newEnd = newBranches.length - 1;
-  let oldStartBranch = oldBranches[oldStart];
-  let newStartBranch = newBranches[newStart];
-  let oldEndBranch = oldBranches[oldEnd];
-  let newEndBranch = newBranches[newEnd];
-  let i;
-  let j;
-  let k;
-  let nextSibling;
-  let oldBranch;
-  let newBranch;
-  outer: {
-    while (oldStartBranch === newStartBranch) {
-      ++oldStart;
-      ++newStart;
-      if (oldStart > oldEnd || newStart > newEnd) {
-        break outer;
-      }
-      oldStartBranch = oldBranches[oldStart];
-      newStartBranch = newBranches[newStart];
-    }
-    while (oldEndBranch === newEndBranch) {
-      --oldEnd;
-      --newEnd;
-      if (oldStart > oldEnd || newStart > newEnd) {
-        break outer;
-      }
-      oldEndBranch = oldBranches[oldEnd];
-      newEndBranch = newBranches[newEnd];
-    }
-  }
-  if (oldStart > oldEnd) {
-    if (newStart <= newEnd) {
-      k = newEnd + 1;
-      nextSibling = k < newBranches.length ? newBranches[k].___startNode : afterReference;
-      do {
-        insertBranchBefore(newBranches[newStart++], parent, nextSibling);
-      } while (newStart <= newEnd);
-    }
-  } else if (newStart > newEnd) {
-    do {
-      removeAndDestroyBranch(oldBranches[oldStart++]);
-    } while (oldStart <= oldEnd);
-  } else {
-    const oldLength = oldEnd - oldStart + 1;
-    const newLength = newEnd - newStart + 1;
-    const aNullable = oldBranches;
-    const sources = new Array(newLength);
-    for (i = 0; i < newLength; ++i) {
-      sources[i] = -1;
-    }
-    let pos = 0;
-    let synced = 0;
-    const keyIndex = /* @__PURE__ */ new Map();
-    for (j = newStart; j <= newEnd; ++j) {
-      keyIndex.set(newBranches[j], j);
-    }
-    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
-      oldBranch = oldBranches[i];
-      j = keyIndex.get(oldBranch);
-      if (j !== void 0) {
-        pos = pos > j ? WRONG_POS : j;
-        ++synced;
-        newBranch = newBranches[j];
-        sources[j - newStart] = i;
-        aNullable[i] = null;
-      }
-    }
-    if (oldLength === oldBranches.length && synced === 0) {
-      for (; newStart < newLength; ++newStart) {
-        insertBranchBefore(newBranches[newStart], parent, afterReference);
-      }
-      for (; oldStart < oldLength; ++oldStart) {
-        removeAndDestroyBranch(oldBranches[oldStart]);
-      }
-    } else {
-      i = oldLength - synced;
-      while (i > 0) {
-        oldBranch = aNullable[oldStart++];
-        if (oldBranch !== null) {
-          removeAndDestroyBranch(oldBranch);
-          i--;
-        }
-      }
-      if (pos === WRONG_POS) {
-        const seq = longestIncreasingSubsequence(sources);
-        j = seq.length - 1;
-        k = newBranches.length;
-        for (i = newLength - 1; i >= 0; --i) {
-          if (sources[i] === -1) {
-            pos = i + newStart;
-            newBranch = newBranches[pos++];
-            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
-            insertBranchBefore(newBranch, parent, nextSibling);
-          } else {
-            if (j < 0 || i !== seq[j]) {
-              pos = i + newStart;
-              newBranch = newBranches[pos++];
-              nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
-              insertBranchBefore(newBranch, parent, nextSibling);
-            } else {
-              --j;
-            }
-          }
-        }
-      } else if (synced !== newLength) {
-        k = newBranches.length;
-        for (i = newLength - 1; i >= 0; --i) {
-          if (sources[i] === -1) {
-            pos = i + newStart;
-            newBranch = newBranches[pos++];
-            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
-            insertBranchBefore(newBranch, parent, nextSibling);
-          }
-        }
-      }
-    }
-  }
-}
-function longestIncreasingSubsequence(a) {
-  const p = a.slice();
-  const result = [];
-  result.push(0);
-  let u;
-  let v;
-  for (let i = 0, il = a.length; i < il; ++i) {
-    if (a[i] === -1) {
-      continue;
-    }
-    const j = result[result.length - 1];
-    if (a[j] < a[i]) {
-      p[i] = j;
-      result.push(i);
-      continue;
-    }
-    u = 0;
-    v = result.length - 1;
-    while (u < v) {
-      const c = (u + v) / 2 | 0;
-      if (a[result[c]] < a[i]) {
-        u = c + 1;
-      } else {
-        v = c;
-      }
-    }
-    if (a[i] < a[result[u]]) {
-      if (u > 0) {
-        p[i] = result[u - 1];
-      }
-      result[u] = i;
-    }
-  }
-  u = result.length;
-  v = result[u - 1];
-  while (u-- > 0) {
-    result[u] = v;
-    v = p[v];
-  }
-  return result;
-}
-
 // src/dom/event.ts
 var elementHandlersByEvent = /* @__PURE__ */ new Map();
 var defaultDelegator = createDelegator();
@@ -482,7 +257,7 @@ function createDelegator() {
   };
 }
 function handleDelegated(ev) {
-  let target = ev.target;
+  let target = !rendering && ev.target;
   if (target) {
     const handlersByElement = elementHandlersByEvent.get(ev.type);
     handlersByElement.get(target)?.(ev, target);
@@ -555,15 +330,20 @@ var Render = class {
       const commentPrefix = data2.i;
       const commentPrefixLen = commentPrefix.length;
       const closestBranchMarkers = /* @__PURE__ */ new Map();
+      const visitNodes = new Set(visits);
+      let lastEndNode;
       data2.v = [];
-      const branchEnd = (branchId, visit, curNode) => {
+      const branchEnd = (branchId, visit, reference) => {
         const branch = scopeLookup[branchId] ||= {};
-        let endNode = curNode;
-        while ((endNode = endNode.previousSibling).nodeType === 8) ;
-        branch.___endNode = endNode;
+        let endNode = reference;
+        while (visitNodes.has(endNode = endNode.previousSibling)) ;
+        if (endNode === lastEndNode) {
+          endNode = reference.parentNode.insertBefore(new Text(), reference);
+        }
+        branch.___endNode = lastEndNode = endNode;
         branch.___startNode ||= endNode;
         for (const [markerScopeId, markerNode] of closestBranchMarkers) {
-          if (branch.___startNode.compareDocumentPosition(markerNode) & 4 && curNode.compareDocumentPosition(markerNode) & 2) {
+          if (branch.___startNode.compareDocumentPosition(markerNode) & 4 && reference.compareDocumentPosition(markerNode) & 2) {
             parentBranchIds.set(markerScopeId, branchId);
             closestBranchMarkers.delete(markerScopeId);
           }
@@ -1009,7 +789,6 @@ function toValueProp(it) {
 }
 
 // src/dom/parse-html.ts
-var fallback = /* @__PURE__ */ new Text();
 var parser = /* @__PURE__ */ document.createElement("template");
 function parseHTML(html2) {
   parser.innerHTML = html2;
@@ -1028,7 +807,7 @@ function parseHTMLOrSingleNode(html2) {
     fragment.appendChild(content);
     return fragment;
   }
-  return fallback;
+  return new Text();
 }
 
 // src/dom/dom.ts
@@ -1202,21 +981,17 @@ function attrsEvents(scope, nodeAccessor) {
     on(el, name, events[name]);
   }
 }
-function html(scope, value2, index) {
-  const firstChild = scope[index];
-  const lastChild = scope[index + "-"] || firstChild;
-  const parentNode = firstChild.parentNode;
-  const afterReference = lastChild.nextSibling;
-  const newContent = parseHTML(value2 || value2 === 0 ? value2 + "" : "<!>");
-  scope[index] = newContent.firstChild;
-  scope[index + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild;
-  parentNode.insertBefore(newContent, firstChild);
-  let current = firstChild;
-  while (current !== afterReference) {
-    const next = current.nextSibling;
-    current.remove();
-    current = next;
-  }
+function html(scope, value2, accessor) {
+  const firstChild = scope[accessor];
+  const lastChild = scope[accessor + "-" /* DynamicPlaceholderLastChild */] || firstChild;
+  const newContent = parseHTML(
+    value2 || value2 === 0 ? value2 + "" : "<!>"
+    // TODO: is the comment needed
+  );
+  scope[accessor] = newContent.firstChild;
+  scope[accessor + "-" /* DynamicPlaceholderLastChild */] = newContent.lastChild;
+  firstChild.parentNode.insertBefore(newContent, firstChild);
+  removeChildNodes(firstChild, lastChild);
 }
 function props(scope, nodeIndex, index) {
   const nextProps = scope[index];
@@ -1256,6 +1031,234 @@ function lifecycle(scope, index, thisObj) {
     ).onabort = () => thisObj.onDestroy?.();
   }
 }
+function removeChildNodes(startNode, endNode) {
+  const stop = endNode.nextSibling;
+  let current = startNode;
+  while (current !== stop) {
+    const next = current.nextSibling;
+    current.remove();
+    current = next;
+  }
+}
+
+// src/dom/scope.ts
+var pendingScopes = [];
+var debugID = 0;
+function createScope($global) {
+  const scope = {
+    ___pending: 1,
+    $global
+  };
+  if (true) {
+    scope.___debugId = "client-" + debugID++;
+  }
+  pendingScopes.push(scope);
+  return scope;
+}
+function finishPendingScopes() {
+  for (const scope of pendingScopes) {
+    scope.___pending = 0;
+  }
+  pendingScopes = [];
+}
+var emptyBranch = createScope({});
+function getEmptyBranch(marker) {
+  emptyBranch.___startNode = emptyBranch.___endNode = marker;
+  return emptyBranch;
+}
+function destroyBranch(branch) {
+  branch.___parentBranch?.___branchScopes?.delete(branch);
+  destroyNestedBranches(branch);
+}
+function destroyNestedBranches(branch) {
+  branch.___destroyed = 1;
+  branch.___branchScopes?.forEach(destroyNestedBranches);
+  branch.___abortScopes?.forEach((scope) => {
+    for (const id in scope.___abortControllers) {
+      scope.___abortControllers[id]?.abort();
+    }
+  });
+}
+function removeAndDestroyBranch(branch) {
+  destroyBranch(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;
+  }
+}
+
+// src/dom/reconcile.ts
+var WRONG_POS = 2147483647;
+function reconcile(parent, oldBranches, newBranches, afterReference) {
+  let oldStart = 0;
+  let newStart = 0;
+  let oldEnd = oldBranches.length - 1;
+  let newEnd = newBranches.length - 1;
+  let oldStartBranch = oldBranches[oldStart];
+  let newStartBranch = newBranches[newStart];
+  let oldEndBranch = oldBranches[oldEnd];
+  let newEndBranch = newBranches[newEnd];
+  let i;
+  let j;
+  let k;
+  let nextSibling;
+  let oldBranch;
+  let newBranch;
+  outer: {
+    while (oldStartBranch === newStartBranch) {
+      ++oldStart;
+      ++newStart;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
+      }
+      oldStartBranch = oldBranches[oldStart];
+      newStartBranch = newBranches[newStart];
+    }
+    while (oldEndBranch === newEndBranch) {
+      --oldEnd;
+      --newEnd;
+      if (oldStart > oldEnd || newStart > newEnd) {
+        break outer;
+      }
+      oldEndBranch = oldBranches[oldEnd];
+      newEndBranch = newBranches[newEnd];
+    }
+  }
+  if (oldStart > oldEnd) {
+    if (newStart <= newEnd) {
+      k = newEnd + 1;
+      nextSibling = k < newBranches.length ? newBranches[k].___startNode : afterReference;
+      do {
+        insertBranchBefore(newBranches[newStart++], parent, nextSibling);
+      } while (newStart <= newEnd);
+    }
+  } else if (newStart > newEnd) {
+    do {
+      removeAndDestroyBranch(oldBranches[oldStart++]);
+    } while (oldStart <= oldEnd);
+  } else {
+    const oldLength = oldEnd - oldStart + 1;
+    const newLength = newEnd - newStart + 1;
+    const aNullable = oldBranches;
+    const sources = new Array(newLength);
+    for (i = 0; i < newLength; ++i) {
+      sources[i] = -1;
+    }
+    let pos = 0;
+    let synced = 0;
+    const keyIndex = /* @__PURE__ */ new Map();
+    for (j = newStart; j <= newEnd; ++j) {
+      keyIndex.set(newBranches[j], j);
+    }
+    for (i = oldStart; i <= oldEnd && synced < newLength; ++i) {
+      oldBranch = oldBranches[i];
+      j = keyIndex.get(oldBranch);
+      if (j !== void 0) {
+        pos = pos > j ? WRONG_POS : j;
+        ++synced;
+        newBranch = newBranches[j];
+        sources[j - newStart] = i;
+        aNullable[i] = null;
+      }
+    }
+    if (oldLength === oldBranches.length && synced === 0) {
+      for (; newStart < newLength; ++newStart) {
+        insertBranchBefore(newBranches[newStart], parent, afterReference);
+      }
+      for (; oldStart < oldLength; ++oldStart) {
+        removeAndDestroyBranch(oldBranches[oldStart]);
+      }
+    } else {
+      i = oldLength - synced;
+      while (i > 0) {
+        oldBranch = aNullable[oldStart++];
+        if (oldBranch !== null) {
+          removeAndDestroyBranch(oldBranch);
+          i--;
+        }
+      }
+      if (pos === WRONG_POS) {
+        const seq = longestIncreasingSubsequence(sources);
+        j = seq.length - 1;
+        k = newBranches.length;
+        for (i = newLength - 1; i >= 0; --i) {
+          if (sources[i] === -1) {
+            pos = i + newStart;
+            newBranch = newBranches[pos++];
+            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+            insertBranchBefore(newBranch, parent, nextSibling);
+          } else {
+            if (j < 0 || i !== seq[j]) {
+              pos = i + newStart;
+              newBranch = newBranches[pos++];
+              nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+              insertBranchBefore(newBranch, parent, nextSibling);
+            } else {
+              --j;
+            }
+          }
+        }
+      } else if (synced !== newLength) {
+        k = newBranches.length;
+        for (i = newLength - 1; i >= 0; --i) {
+          if (sources[i] === -1) {
+            pos = i + newStart;
+            newBranch = newBranches[pos++];
+            nextSibling = pos < k ? newBranches[pos].___startNode : afterReference;
+            insertBranchBefore(newBranch, parent, nextSibling);
+          }
+        }
+      }
+    }
+  }
+}
+function longestIncreasingSubsequence(a) {
+  const p = a.slice();
+  const result = [];
+  result.push(0);
+  let u;
+  let v;
+  for (let i = 0, il = a.length; i < il; ++i) {
+    if (a[i] === -1) {
+      continue;
+    }
+    const j = result[result.length - 1];
+    if (a[j] < a[i]) {
+      p[i] = j;
+      result.push(i);
+      continue;
+    }
+    u = 0;
+    v = result.length - 1;
+    while (u < v) {
+      const c = (u + v) / 2 | 0;
+      if (a[result[c]] < a[i]) {
+        u = c + 1;
+      } else {
+        v = c;
+      }
+    }
+    if (a[i] < a[result[u]]) {
+      if (u > 0) {
+        p[i] = result[u - 1];
+      }
+      result[u] = i;
+    }
+  }
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
+  }
+  return result;
+}
 
 // src/dom/walker.ts
 var walker = /* @__PURE__ */ document.createTreeWalker(document);
@@ -1264,9 +1267,9 @@ function trimWalkString(walkString) {
   while (walkString.charCodeAt(--end) > 47 /* BeginChild */) ;
   return walkString.slice(0, end + 1);
 }
-function walk(startNode, walkCodes, scope) {
+function walk(startNode, walkCodes, branch) {
   walker.currentNode = startNode;
-  walkInternal(walkCodes, scope, 0);
+  walkInternal(walkCodes, branch, 0);
   walker.currentNode = document;
 }
 function walkInternal(walkCodes, scope, currentWalkIndex) {
@@ -1297,7 +1300,6 @@ function walkInternal(walkCodes, scope, currentWalkIndex) {
       }
     } else if (value2 === 47 /* BeginChild */) {
       const childScope = scope[true ? getDebugKey(currentScopeIndex++, "#childScope") : currentScopeIndex++] = createScope(scope.$global);
-      childScope.___startNode = walker.currentNode;
       childScope.___closestBranch = scope.___closestBranch;
       currentWalkIndex = walkInternal(walkCodes, childScope, currentWalkIndex);
     } else if (value2 === 38 /* EndChild */) {
@@ -1476,8 +1478,8 @@ function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
   const newBranch = newRenderer ? createBranchScopeWithTagNameOrRenderer(newRenderer, scope.$global, scope) : getEmptyBranch(scope[nodeAccessor]);
   insertBranchBefore(
     newBranch,
-    prevBranch.___startNode.parentNode,
-    prevBranch.___startNode
+    prevBranch.___endNode.parentNode,
+    prevBranch.___endNode.nextSibling
   );
   removeAndDestroyBranch(prevBranch);
   scope[nodeAccessor + "!" /* ConditionalScope */] = newRenderer && newBranch;
@@ -1943,13 +1945,13 @@ var RENDERER_REGISTER_ID = prefix + (true ? "renderer" : "r");
 var SET_SCOPE_REGISTER_ID = prefix + (true ? "setScope" : "s");
 
 // src/dom/compat.ts
-var classIdToScope = /* @__PURE__ */ new Map();
+var classIdToBranch = /* @__PURE__ */ new Map();
 var compat = {
   patchConditionals,
   queueEffect,
   init() {
-    register(SET_SCOPE_REGISTER_ID, (scope) => {
-      classIdToScope.set(scope.m5c, scope);
+    register(SET_SCOPE_REGISTER_ID, (branch) => {
+      classIdToBranch.set(branch.m5c, branch);
     });
   },
   registerRenderer(fn) {
@@ -1961,12 +1963,12 @@ var compat = {
   isRenderer(renderer) {
     return renderer.___clone !== void 0;
   },
-  getStartNode(scope) {
-    return scope.___startNode;
+  getStartNode(branch) {
+    return branch.___startNode;
   },
-  setScopeNodes(scope, startNode, endNode) {
-    scope.___startNode = startNode;
-    scope.___endNode = endNode;
+  setScopeNodes(branch, startNode, endNode) {
+    branch.___startNode = startNode;
+    branch.___endNode = endNode;
   },
   runComponentEffects() {
     runEffects(this.effects);
@@ -1994,12 +1996,12 @@ var compat = {
     return renderer;
   },
   render(out, component, renderer, args) {
-    let scope = component.scope;
-    if (!scope) {
-      scope = classIdToScope.get(component.id);
-      if (scope) {
-        component.scope = scope;
-        classIdToScope.delete(component.id);
+    let branch = component.scope;
+    if (!branch) {
+      branch = classIdToBranch.get(component.id);
+      if (branch) {
+        component.scope = branch;
+        classIdToBranch.delete(component.id);
       }
     }
     const applyArgs = renderer.___args || noop;
@@ -2012,18 +2014,18 @@ var compat = {
       }
     }
     component.effects = prepareEffects(() => {
-      if (!scope) {
-        scope = component.scope = createScope(out.global);
-        scope._ = renderer.___owner;
-        initBranch(renderer, scope);
+      if (!branch) {
+        branch = component.scope = createScope(out.global);
+        branch._ = renderer.___owner;
+        initBranch(renderer, branch);
       } else {
-        applyArgs(scope, MARK);
+        applyArgs(branch, MARK);
         existing = true;
       }
-      applyArgs(scope, args);
+      applyArgs(branch, args);
     });
     if (!existing) {
-      return scope.___startNode === scope.___endNode ? scope.___startNode : scope.___startNode.parentNode;
+      return branch.___startNode === branch.___endNode ? branch.___startNode : branch.___startNode.parentNode;
     }
   }
 };