refactor: consolidate createBranch logic

marko-js · Feb 26, 2025 · ae24290 · ae24290
1 parent c4fd6e7
commit ae24290
Show file tree

Hide file tree

Showing 11 changed files with 140 additions and 148 deletions.
diff --git a/.changeset/popular-trainers-hug.md b/.changeset/popular-trainers-hug.md
@@ -0,0 +1,7 @@
+---
+"@marko/translator-interop-class-tags": patch
+"marko": patch
+"@marko/runtime-tags": patch
+---
+
+Consolidate create branch logic, optimizing code size and creating branches with only side effects and no template code.
diff --git a/.sizes.json b/.sizes.json
@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 17931,
-        "brotli": 6756
+        "min": 17910,
+        "brotli": 6739
       }
     },
     {
@@ -18,12 +18,12 @@
         "brotli": 144
       },
       "runtime": {
-        "min": 4078,
-        "brotli": 1791
+        "min": 4077,
+        "brotli": 1790
       },
       "total": {
-        "min": 4267,
-        "brotli": 1935
+        "min": 4266,
+        "brotli": 1934
       }
     },
     {
@@ -45,15 +45,15 @@
       "name": "comments",
       "user": {
         "min": 1044,
-        "brotli": 508
+        "brotli": 512
       },
       "runtime": {
-        "min": 7279,
-        "brotli": 3069
+        "min": 7278,
+        "brotli": 3070
       },
       "total": {
-        "min": 8323,
-        "brotli": 3577
+        "min": 8322,
+        "brotli": 3582
       }
     },
     {

diff --git a/.sizes/comments.csr/entry.js b/.sizes/comments.csr/entry.js
@@ -1,4 +1,4 @@
-// size: 1044 (min) 508 (brotli)
+// size: 1044 (min) 512 (brotli)
 const _expr_comment_comments_id$if_content = intersection(
     2,
     (_scope) => {

diff --git a/.sizes/dom.js b/.sizes/dom.js
@@ -1,4 +1,4 @@
-// size: 17931 (min) 6756 (brotli)
+// size: 17910 (min) 6739 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -1155,21 +1155,25 @@ function createBranchWithTagNameOrRenderer(
   parentScope,
   parentNode,
 ) {
-  if ("string" != typeof tagNameOrRenderer)
-    return createBranch($global, tagNameOrRenderer, parentScope, parentNode);
-  let branch = createBranch($global, 0, parentScope, parentNode);
+  let branch = createBranch(
+    $global,
+    tagNameOrRenderer,
+    parentScope,
+    parentNode,
+  );
   return (
-    (branch[0] =
-      branch.a =
-      branch.b =
-        document.createElementNS(
-          "svg" === tagNameOrRenderer
-            ? "http://www.w3.org/2000/svg"
-            : "math" === tagNameOrRenderer
-              ? "http://www.w3.org/1998/Math/MathML"
-              : parentNode.namespaceURI,
-          tagNameOrRenderer,
-        )),
+    "string" == typeof tagNameOrRenderer &&
+      (branch[0] =
+        branch.a =
+        branch.b =
+          document.createElementNS(
+            "svg" === tagNameOrRenderer
+              ? "http://www.w3.org/2000/svg"
+              : "math" === tagNameOrRenderer
+                ? "http://www.w3.org/1998/Math/MathML"
+                : parentNode.namespaceURI,
+            tagNameOrRenderer,
+          )),
     branch
   );
 }
@@ -1184,7 +1188,7 @@ function createBranch($global, renderer, parentScope, parentNode) {
         (branch.q = parentBranch),
         (parentBranch.j ||= new Set()).add(branch))
       : (branch.f = 1),
-    renderer && renderer.k(branch, parentNode.namespaceURI),
+    renderer.k?.(branch, parentNode.namespaceURI),
     branch
   );
 }

diff --git a/packages/runtime-tags/src/common/types.ts b/packages/runtime-tags/src/common/types.ts
@@ -9,13 +9,13 @@ export interface BranchScope extends Scope {
   ___destroyed: 1 | undefined;
   ___abortScopes: Set<Scope> | undefined;
   ___branchScopes: Set<BranchScope> | undefined;
+  ___renderer: ClientRenderer | string;
 }
 export interface Scope {
   $global: Record<string, unknown>;
   _: Scope | undefined;
   ___args: unknown;
   ___pending: 1 | 0 | undefined;
-  ___renderer: ClientRenderer | undefined;
   ___abortControllers:
     | Record<string | number, AbortController | void>
     | undefined;

diff --git a/packages/runtime-tags/src/dom/compat.ts b/packages/runtime-tags/src/dom/compat.ts
@@ -7,9 +7,9 @@ import type { BranchScope } from "../common/types";
 import { patchDynamicTag } from "./control-flow";
 import { toInsertNode } from "./dom";
 import { prepareEffects, queueEffect, runEffects } from "./queue";
-import { createRenderer, initBranch, type Renderer } from "./renderer";
+import { createBranch, createRenderer, type Renderer } from "./renderer";
 import { getRegisteredWithScope, register } from "./resume";
-import { createScope, destroyBranch } from "./scope";
+import { destroyBranch } from "./scope";
 import { CLEAN, DIRTY, MARK } from "./signals";
 const classIdToBranch = new Map<string, BranchScope>();
 
@@ -30,7 +30,7 @@ export const compat = {
     return value === MARK || value === CLEAN || value === DIRTY;
   },
   isRenderer(renderer: any) {
-    return renderer.___clone;
+    return renderer.___init;
   },
   getStartNode(branch: any) {
     return branch.___startNode;
@@ -68,10 +68,14 @@ export const compat = {
   },
   createRenderer(
     args: NonNullable<Renderer["___args"]>,
-    clone: Renderer["___clone"],
+    clone: () => { startNode: ChildNode; endNode: ChildNode },
   ) {
-    const renderer = createRenderer("", 0, 0, () => args);
-    renderer.___clone = clone;
+    const renderer = createRenderer(0, 0, 0, () => args);
+    renderer.___init = (branch) => {
+      const cloned = clone();
+      branch.___startNode = cloned.startNode;
+      branch.___endNode = cloned.endNode;
+    };
     return renderer;
   },
   render(out: any, component: any, renderer: Renderer, args: any) {
@@ -97,10 +101,12 @@ export const compat = {
 
     component.effects = prepareEffects(() => {
       if (!branch) {
-        // TODO: this should be createBranch
-        branch = component.scope = createScope(out.global) as BranchScope;
-        branch._ = renderer.___owner;
-        initBranch(renderer, branch, document.body);
+        branch = component.scope = createBranch(
+          out.global,
+          renderer,
+          renderer.___owner,
+          document.body,
+        );
       } else {
         applyArgs(branch, MARK);
         existing = true;

diff --git a/packages/runtime-tags/src/dom/control-flow.ts b/packages/runtime-tags/src/dom/control-flow.ts
@@ -10,8 +10,8 @@ import {
 import { attrs } from "./dom";
 import { reconcile } from "./reconcile";
 import {
-  createBranchScopeWithRenderer,
-  createBranchScopeWithTagNameOrRenderer,
+  createBranch,
+  createBranchWithTagNameOrRenderer,
   type Renderer,
 } from "./renderer";
 import {
@@ -36,7 +36,7 @@ export function conditional(nodeAccessor: Accessor, ...branches: Renderer[]) {
         scope,
         nodeAccessor,
         branches[(scope[branchAccessor] = newBranch)],
-        createBranchScopeWithRenderer,
+        createBranch,
       );
     }
   };
@@ -74,7 +74,7 @@ export let dynamicTag = function dynamicTag(
           scope,
           nodeAccessor,
           newRenderer || (getContent ? getContent(scope) : undefined),
-          createBranchScopeWithTagNameOrRenderer,
+          createBranchWithTagNameOrRenderer,
         );
 
         if (getTagVar) {
@@ -86,7 +86,7 @@ export let dynamicTag = function dynamicTag(
             scope[childScopeAccessor],
             MARKO_DEBUG ? `#${newRenderer}/0` : 0,
             getContent(scope),
-            createBranchScopeWithRenderer,
+            createBranch,
           );
         }
       }
@@ -124,8 +124,8 @@ export function setConditionalRenderer<T>(
   nodeAccessor: Accessor,
   newRenderer: T,
   createBranch: (
-    renderer: NonNullable<T>,
     $global: Scope["$global"],
+    renderer: NonNullable<T>,
     parentScope: Scope,
     parentNode: ParentNode,
   ) => BranchScope,
@@ -139,7 +139,7 @@ export function setConditionalRenderer<T>(
       ? (prevBranch?.___startNode || referenceNode).parentNode!
       : (referenceNode as ParentNode);
   const newBranch = (scope[nodeAccessor + AccessorChar.ConditionalScope] =
-    newRenderer && createBranch(newRenderer, scope.$global, scope, parentNode));
+    newRenderer && createBranch(scope.$global, newRenderer, scope, parentNode));
   if (referenceNode === parentNode) {
     if (prevBranch) {
       destroyBranch(prevBranch);
@@ -238,12 +238,7 @@ function loop<T extends unknown[] = unknown[]>(
       forEach(valueOrOp, (key, args) => {
         const branch =
           oldMap?.get(key) ||
-          createBranchScopeWithRenderer(
-            renderer,
-            scope.$global,
-            scope,
-            parentNode,
-          );
+          createBranch(scope.$global, renderer, scope, parentNode);
         params?.(branch, args);
         newMap.set(key, branch);
         newArray.push(branch);

diff --git a/packages/runtime-tags/src/dom/dom.ts b/packages/runtime-tags/src/dom/dom.ts
@@ -268,9 +268,10 @@ export function html(scope: Scope, value: unknown, accessor: Accessor) {
   insertChildNodes(
     parentNode,
     firstChild,
-    (scope[accessor] = newContent.firstChild),
+    (scope[accessor] =
+      newContent.firstChild || newContent.appendChild(new Text())),
     (scope[accessor + AccessorChar.DynamicPlaceholderLastChild] =
-      newContent.lastChild),
+      newContent.lastChild!),
   );
   removeChildNodes(firstChild, lastChild);
 }

diff --git a/packages/runtime-tags/src/dom/parse-html.ts b/packages/runtime-tags/src/dom/parse-html.ts
@@ -1,12 +1,6 @@
 const parsers: Record<string, Element> = {};
 export function parseHTML(html: string, ns: string) {
   const parser = (parsers[ns] ||= document.createElementNS(ns, "template"));
-  const content =
-    ((parser.innerHTML = html),
-    (parser as HTMLTemplateElement).content || parser);
-  if (!content.firstChild) content.appendChild(new Text());
-  return content as (DocumentFragment | Element) & {
-    firstChild: ChildNode;
-    lastChild: ChildNode;
-  };
+  parser.innerHTML = html;
+  return (parser as HTMLTemplateElement).content || parser;
 }