chore: avoid dynamic tag logic in if runtime

marko-js · Feb 8, 2025 · 27e90ed · 27e90ed
1 parent bd59c96
commit 27e90ed
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 32 deletions.
diff --git a/.changeset/pretty-icons-jam.md b/.changeset/pretty-icons-jam.md
@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Avoid some dynamic tag code being used by the core if logic.
diff --git a/.sizes.json b/.sizes.json
@@ -7,7 +7,7 @@
     {
       "name": "*",
       "total": {
-        "min": 18464,
+        "min": 18541,
         "brotli": 6856
       }
     },
@@ -48,12 +48,12 @@
         "brotli": 535
       },
       "runtime": {
-        "min": 8131,
-        "brotli": 3362
+        "min": 7967,
+        "brotli": 3292
       },
       "total": {
-        "min": 9240,
-        "brotli": 3897
+        "min": 9076,
+        "brotli": 3827
       }
     },
     {

diff --git a/.sizes/dom.js b/.sizes/dom.js
@@ -1,4 +1,4 @@
-// size: 18464 (min) 6856 (brotli)
+// size: 18541 (min) 6856 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -948,7 +948,12 @@ function dynamicTagAttrs(nodeAccessor, getContent, inputIsArgs) {
       return renderer.d?.(childScope, attrsOrOp);
     let content = getContent?.(scope);
     if ("string" == typeof renderer)
-      setConditionalRendererOnlyChild(childScope, 0, content),
+      setConditionalRendererOnlyChild(
+        childScope,
+        0,
+        content,
+        createBranchScopeWithTagNameOrRenderer,
+      ),
         attrs(childScope, 0, attrsOrOp());
     else if (renderer.d) {
       let attributes = attrsOrOp();
@@ -1006,6 +1011,7 @@ function conditional(nodeAccessor, ...branches) {
         scope,
         nodeAccessor,
         branches[(scope[branchAccessor] = newBranchIndexOrOp)],
+        createBranchScopeWithRenderer,
       );
   };
 }
@@ -1024,7 +1030,12 @@ var dynamicTag = function (nodeAccessor, fn, getIntersection) {
       })(newRendererOrOp);
       (a = normalizedRenderer) !== (b = currentRenderer) && (a?.x || 0) !== b?.x
         ? ((scope[rendererAccessor] = normalizedRenderer),
-          setConditionalRenderer(scope, nodeAccessor, normalizedRenderer),
+          setConditionalRenderer(
+            scope,
+            nodeAccessor,
+            normalizedRenderer,
+            createBranchScopeWithTagNameOrRenderer,
+          ),
           fn && fn(scope),
           (op = DIRTY))
         : (op = CLEAN);
@@ -1033,11 +1044,16 @@ var dynamicTag = function (nodeAccessor, fn, getIntersection) {
     intersection2?.(scope, op);
   };
 };
-function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
+function setConditionalRenderer(
+  scope,
+  nodeAccessor,
+  newRenderer,
+  createBranch2,
+) {
   let prevBranch =
       scope[nodeAccessor + "!"] || getEmptyBranch(scope[nodeAccessor]),
     newBranch = newRenderer
-      ? createBranchScopeWithTagNameOrRenderer(
+      ? createBranch2(
           newRenderer,
           scope.$global,
           scope,
@@ -1051,19 +1067,27 @@ function setConditionalRenderer(scope, nodeAccessor, newRenderer) {
       prevBranch.b.nextSibling,
     ),
     removeAndDestroyBranch(prevBranch),
-    (scope[nodeAccessor + "!"] = newRenderer && newBranch));
-}
-function setConditionalRendererOnlyChild(scope, nodeAccessor, newRenderer) {
+    (scope[nodeAccessor + "!"] = newRenderer && newBranch)),
+    prevBranch !== newBranch &&
+      (insertBranchBefore(
+        newBranch,
+        prevBranch.b.parentNode,
+        prevBranch.b.nextSibling,
+      ),
+      removeAndDestroyBranch(prevBranch),
+      (scope[nodeAccessor + "!"] = newRenderer && newBranch));
+}
+function setConditionalRendererOnlyChild(
+  scope,
+  nodeAccessor,
+  newRenderer,
+  createBranch2,
+) {
   let prevBranch = scope[nodeAccessor + "!"],
     referenceNode = scope[nodeAccessor],
     newBranch =
       newRenderer &&
-      createBranchScopeWithTagNameOrRenderer(
-        newRenderer,
-        scope.$global,
-        scope,
-        referenceNode,
-      );
+      createBranch2(newRenderer, scope.$global, scope, referenceNode);
   (referenceNode.textContent = ""),
     newBranch && insertBranchBefore(newBranch, referenceNode, null),
     prevBranch && destroyBranch(prevBranch),

diff --git a/packages/runtime-tags/src/dom/control-flow.ts b/packages/runtime-tags/src/dom/control-flow.ts
@@ -39,6 +39,7 @@ export function conditional(
         scope,
         nodeAccessor,
         branches[(scope[branchAccessor] = newBranchIndexOrOp)],
+        createBranchScopeWithRenderer,
       );
     }
   };
@@ -74,7 +75,12 @@ export let dynamicTag = function dynamicTag(
         normalizeDynamicRenderer<Renderer>(newRendererOrOp);
       if (isDifferentRenderer(normalizedRenderer, currentRenderer)) {
         scope[rendererAccessor] = normalizedRenderer;
-        setConditionalRenderer(scope, nodeAccessor, normalizedRenderer);
+        setConditionalRenderer(
+          scope,
+          nodeAccessor,
+          normalizedRenderer,
+          createBranchScopeWithTagNameOrRenderer,
+        );
         fn && fn(scope);
         op = DIRTY;
       } else {
@@ -85,16 +91,22 @@ export let dynamicTag = function dynamicTag(
   };
 };
 
-function setConditionalRenderer(
+function setConditionalRenderer<T>(
   scope: Scope,
   nodeAccessor: Accessor,
-  newRenderer: Renderer | string | undefined,
+  newRenderer: T,
+  createBranch: (
+    renderer: NonNullable<T>,
+    $global: Scope["$global"],
+    parentScope: Scope,
+    parentNode: ParentNode,
+  ) => BranchScope,
 ) {
   const prevBranch =
     (scope[nodeAccessor + AccessorChar.ConditionalScope] as BranchScope) ||
     getEmptyBranch(scope[nodeAccessor] as Comment);
   const newBranch = newRenderer
-    ? createBranchScopeWithTagNameOrRenderer(
+    ? createBranch(
         newRenderer,
         scope.$global,
         scope,
@@ -112,25 +124,37 @@ function setConditionalRenderer(
     scope[nodeAccessor + AccessorChar.ConditionalScope] =
       newRenderer && newBranch;
   }
+
+  if (prevBranch !== newBranch) {
+    insertBranchBefore(
+      newBranch,
+      prevBranch.___endNode.parentNode!,
+      prevBranch.___endNode.nextSibling,
+    );
+    removeAndDestroyBranch(prevBranch);
+    scope[nodeAccessor + AccessorChar.ConditionalScope] =
+      newRenderer && newBranch;
+  }
 }
 
-export function setConditionalRendererOnlyChild(
+export function setConditionalRendererOnlyChild<T>(
   scope: Scope,
   nodeAccessor: Accessor,
-  newRenderer: Renderer | string | undefined,
+  newRenderer: T,
+  createBranch: (
+    renderer: NonNullable<T>,
+    $global: Scope["$global"],
+    parentScope: Scope,
+    parentNode: ParentNode,
+  ) => BranchScope,
 ) {
   const prevBranch = scope[
     nodeAccessor + AccessorChar.ConditionalScope
   ] as BranchScope;
   const referenceNode = scope[nodeAccessor] as Element;
   const newBranch =
     newRenderer &&
-    createBranchScopeWithTagNameOrRenderer(
-      newRenderer,
-      scope.$global,
-      scope,
-      referenceNode,
-    );
+    createBranch(newRenderer, scope.$global, scope, referenceNode);
 
   referenceNode.textContent = "";
 

diff --git a/packages/runtime-tags/src/dom/renderer.ts b/packages/runtime-tags/src/dom/renderer.ts
@@ -142,7 +142,12 @@ export function dynamicTagAttrs(
         );
       }
 
-      setConditionalRendererOnlyChild(childScope, nodeAccessor, content);
+      setConditionalRendererOnlyChild(
+        childScope,
+        nodeAccessor,
+        content,
+        createBranchScopeWithTagNameOrRenderer,
+      );
       attrs(childScope, nodeAccessor, attrsOrOp());
     } else if (renderer.___args) {
       const attributes = attrsOrOp();