fix: avoid over registration of body content

marko-js · Mar 3, 2025 · 08e0d24 · 08e0d24
1 parent 4c87458
commit 08e0d24
Show file tree

Hide file tree

Showing 436 changed files with 1,294 additions and 1,647 deletions.
diff --git a/.changeset/light-worms-arrive.md b/.changeset/light-worms-arrive.md
@@ -0,0 +1,6 @@
+---
+"@marko/translator-interop-class-tags": patch
+"marko": patch
+---
+
+Update tags api interop layer.
diff --git a/.changeset/purple-crabs-brush.md b/.changeset/purple-crabs-brush.md
@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Avoid registering body content when known downstream usage is not serialized.
diff --git a/packages/runtime-class/src/runtime/helpers/tags-compat/runtime-html.js b/packages/runtime-class/src/runtime/helpers/tags-compat/runtime-html.js
@@ -7,8 +7,8 @@ const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
 exports.p = function (htmlCompat) {
-  const isMarko6 = (fn) => !!fn.___isTagsAPI;
-  const isMarko5 = (fn) => !fn.___isTagsAPI;
+  const isMarko6 = (fn) => htmlCompat.isTagsAPI(fn);
+  const isMarko5 = (fn) => !isMarko6(fn);
   const writeHTML = (result) => {
     const state = result.out._state;
     const writer = state.writer;
@@ -63,77 +63,71 @@ exports.p = function (htmlCompat) {
     {},
   );
 
-  htmlCompat.patchDynamicTag(
-    function getRenderer(tag) {
-      const renderer = tag._ || tag.renderBody || tag;
-      if (isMarko6(renderer)) return renderer;
+  htmlCompat.patchDynamicTag(function getRenderer(tag) {
+    const renderer = tag._ || tag.renderBody || tag;
+    if (isMarko6(renderer)) return renderer;
 
-      const renderer5 =
-        tag._ ||
-        tag.render ||
-        (tag.renderer && tag.renderer.renderer) ||
-        tag.renderer;
-      const renderBody5 = tag.renderBody || tag;
+    const renderer5 =
+      tag._ ||
+      tag.render ||
+      (tag.renderer && tag.renderer.renderer) ||
+      tag.renderer;
+    const renderBody5 = tag.renderBody || tag;
 
-      if (!renderer5 && renderBody5) {
-        htmlCompat.registerRenderBody(renderBody5);
-      }
-      return (input, ...args) => {
-        const out = defaultCreateOut();
-        let customEvents;
-
-        if (renderer5) {
-          const normalizedInput = {};
-
-          for (const key in input) {
-            const value = input[key];
-            if (/^on[-A-Z]/.test(key)) {
-              if (typeof value === "function") {
-                (customEvents || (customEvents = [])).push([
-                  key[2] === "-" ? key.slice(3) : key.slice(2).toLowerCase(),
-                  value,
-                ]);
-                value.toJSON = htmlCompat.toJSON;
-              }
-            } else {
-              normalizedInput[key === "content" ? "renderBody" : key] = value;
+    if (!renderer5 && renderBody5) {
+      htmlCompat.registerRenderBody(renderBody5);
+    }
+    return (input, ...args) => {
+      const out = defaultCreateOut();
+      let customEvents;
+
+      if (renderer5) {
+        const normalizedInput = {};
+
+        for (const key in input) {
+          const value = input[key];
+          if (/^on[-A-Z]/.test(key)) {
+            if (typeof value === "function") {
+              (customEvents || (customEvents = [])).push([
+                key[2] === "-" ? key.slice(3) : key.slice(2).toLowerCase(),
+                value,
+              ]);
+              value.toJSON = htmlCompat.toJSON;
             }
+          } else {
+            normalizedInput[key === "content" ? "renderBody" : key] = value;
           }
-          renderer5(normalizedInput, out);
-        } else {
-          renderBody5(out, input, ...args);
         }
+        renderer5(normalizedInput, out);
+      } else {
+        renderBody5(out, input, ...args);
+      }
 
-        const componentsContext = ___getComponentsContext(out);
-        const component = componentsContext.___components[0];
-        if (component) {
-          component.___component.___customEvents = customEvents;
-          htmlCompat.writeSetScopeForComponent(component.id);
-        }
+      const componentsContext = ___getComponentsContext(out);
+      const component = componentsContext.___components[0];
+      if (component) {
+        component.___component.___customEvents = customEvents;
+        htmlCompat.writeSetScopeForComponent(component.id);
+      }
 
-        initComponentsTag({}, out);
+      initComponentsTag({}, out);
 
-        let async;
-        out.once("finish", (result) => {
-          if (!async) {
-            async = false;
-            writeHTML(result);
-          }
-        });
+      let async;
+      out.once("finish", (result) => {
+        if (!async) {
+          async = false;
+          writeHTML(result);
+        }
+      });
 
-        out.end();
+      out.end();
 
-        if (async !== false) {
-          async = true;
-          htmlCompat.fork(out, writeHTML);
-        }
-      };
-    },
-    function createRenderer(renderFn) {
-      renderFn.___isTagsAPI = true;
-      return renderFn;
-    },
-  );
+      if (async !== false) {
+        async = true;
+        htmlCompat.fork(out, writeHTML);
+      }
+    };
+  });
 
   return htmlCompat.registerRenderer;
 };
diff --git a/..._tests__/fixtures/abort-signal-render-phase-error/__snapshots__/html.expected/template.js b/..._tests__/fixtures/abort-signal-render-phase-error/__snapshots__/html.expected/template.js
@@ -1,9 +1,8 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", input => {
   const _scope0_id = _$.nextScopeId();
   _$.write(`<div>${_$.escapeXML((() => {
     throw new Error("Cannot use $signal in a server render.");
   })().onabort = () => {})}</div>`);
   _$.resumeClosestBranch(_scope0_id);
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);
+});
diff --git a/...gs/src/__tests__/fixtures/assign-to-owner-closure/__snapshots__/html.expected/template.js b/...gs/src/__tests__/fixtures/assign-to-owner-closure/__snapshots__/html.expected/template.js
@@ -1,5 +1,5 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", input => {
   const _scope0_id = _$.nextScopeId();
   let _ifScopeId, _ifBranch;
   const hide = undefined;
@@ -20,5 +20,4 @@ const _renderer = /* @__PURE__ */_$.createRenderer(input => {
     "#text/0!": _$.getScopeById(_ifScopeId)
   }, "__tests__/template.marko", 0);
   _$.resumeClosestBranch(_scope0_id);
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);
+});
diff --git a/.../src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/html.expected/template.js b/.../src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/html.expected/template.js
@@ -1,5 +1,5 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", input => {
   const _scope0_id = _$.nextScopeId();
   const clickCount = 0;
   const lastClickCount = undefined;
@@ -11,5 +11,4 @@ const _renderer = /* @__PURE__ */_$.createRenderer(input => {
     clickCount: "6:6"
   });
   _$.resumeClosestBranch(_scope0_id);
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);
+});
diff --git a/...ests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/tags/custom-tag/index.js b/...ests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/tags/custom-tag/index.js
@@ -1,5 +1,5 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/custom-tag/index.marko", input => {
   const _scope0_id = _$.nextScopeId();
   const {
     thing: {
@@ -12,7 +12,6 @@ const _renderer = /* @__PURE__ */_$.createRenderer(input => {
   _$.write(`<div>${_$.escapeXML(x)}${_$.markResumeNode(_scope0_id, "#text/1")}</div>`);
   _$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
-    "#text/0(": _$.normalizeDynamicRenderer(content)
+    "#text/0(": _$.dynamicTagId(content)
   }, "__tests__/tags/custom-tag/index.marko", 0);
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/tags/custom-tag/index.marko", _renderer);
+});
diff --git a/...-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/template.js b/...-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/template.js
@@ -1,6 +1,6 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
 import _customTag from "./tags/custom-tag/index.marko";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", input => {
   const _scope0_id = _$.nextScopeId();
   const {
     x
@@ -10,18 +10,18 @@ const _renderer = /* @__PURE__ */_$.createRenderer(input => {
   if (x) {
     _thing = _$.attrTag({
       x: 1,
-      content: _$.register(/* @__PURE__ */_$.createRenderer(() => {
+      content: _$.registerContent("__tests__/template.marko_1_renderer", () => {
         const _scope1_id = _$.nextScopeId();
         _$.write("Hello");
-      }), "__tests__/template.marko_1_renderer", _scope0_id)
+      }, _scope0_id)
     });
   } else {
     _thing = _$.attrTag({
       x: 2,
-      content: _$.register(/* @__PURE__ */_$.createRenderer(() => {
+      content: _$.registerContent("__tests__/template.marko_2_renderer", () => {
         const _scope2_id = _$.nextScopeId();
         _$.write("Goodbye");
-      }), "__tests__/template.marko_2_renderer", _scope0_id)
+      }, _scope0_id)
     });
   }
   _customTag({
@@ -30,5 +30,4 @@ const _renderer = /* @__PURE__ */_$.createRenderer(input => {
   _$.writeScope(_scope0_id, {
     "#childScope/0": _$.writeExistingScope(_childScope)
   }, "__tests__/template.marko", 0);
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);
+});
diff --git a/...gs/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/resume.expected.md b/...gs/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/resume.expected.md
@@ -12,7 +12,7 @@
       <!--M_*2 #text/1-->
     </div>
     <script>
-      WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.d={1:_.a={"#childScope/0":_.b={"#text/0!":_.c={}}},2:_.b,3:_.c},_.b["#text/0("]=_._["__tests__/template.marko_1_renderer"](_.a),_.d),0]
+      WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:{"#childScope/0":_.a={"#text/0!":_.b={},"#text/0(":"__tests__/template.marko_1_renderer"}},2:_.a,3:_.b}),0]
     </script>
   </body>
 </html>

diff --git a/...-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/ssr.expected.md b/...-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/ssr.expected.md
@@ -1,6 +1,6 @@
 # Write
 ```html
-  <!--M_[3-->Hello<!--M_]2 #text/0--><div>1<!--M_*2 #text/1--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.d={1:_.a={"#childScope/0":_.b={"#text/0!":_.c={}}},2:_.b,3:_.c},_.b["#text/0("]=_._["__tests__/template.marko_1_renderer"](_.a),_.d),0]</script>
+  <!--M_[3-->Hello<!--M_]2 #text/0--><div>1<!--M_*2 #text/1--></div><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c={1:{"#childScope/0":_.a={"#text/0!":_.b={},"#text/0(":"__tests__/template.marko_1_renderer"}},2:_.a,3:_.b}),0]</script>
 ```
 
 # Render End
@@ -16,7 +16,7 @@
       <!--M_*2 #text/1-->
     </div>
     <script>
-      WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.d={1:_.a={"#childScope/0":_.b={"#text/0!":_.c={}}},2:_.b,3:_.c},_.b["#text/0("]=_._["__tests__/template.marko_1_renderer"](_.a),_.d),0]
+      WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:{"#childScope/0":_.a={"#text/0!":_.b={},"#text/0(":"__tests__/template.marko_1_renderer"}},2:_.a,3:_.b}),0]
     </script>
   </body>
 </html>

diff --git a/...sts__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/tags/hello/index.js b/...sts__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/tags/hello/index.js
@@ -1,6 +1,5 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/hello/index.marko", input => {
   const _scope0_id = _$.nextScopeId();
   _$.write("<div></div>");
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/tags/hello/index.marko", _renderer);
+});
diff --git a/...src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js b/...src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js
@@ -1,7 +1,6 @@
 import _hello from "./tags/hello/index.marko";
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", input => {
   const _scope0_id = _$.nextScopeId();
   _hello({});
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);
+});
diff --git a/...src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/html.expected/template.js b/...src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/html.expected/template.js
@@ -1,5 +1,5 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", input => {
   const _scope0_id = _$.nextScopeId();
   const {
     x
@@ -8,25 +8,24 @@ const _renderer = /* @__PURE__ */_$.createRenderer(input => {
   _$.dynamicTagInput(_scope0_id, "#text/0", x, {
     footer: _$.attrTag({
       class: "my-footer",
-      content: _$.register(/* @__PURE__ */_$.createRenderer(() => {
+      content: _$.registerContent("__tests__/template.marko_3_renderer", () => {
         const _scope3_id = _$.nextScopeId();
         _$.write("Footer content");
-      }), "__tests__/template.marko_3_renderer", _scope0_id)
+      }, _scope0_id)
     }),
     header: _$.attrTag({
       class: "my-header",
-      content: _$.register(/* @__PURE__ */_$.createRenderer(() => {
+      content: _$.registerContent("__tests__/template.marko_2_renderer", () => {
         const _scope2_id = _$.nextScopeId();
         _$.write("Header content");
-      }), "__tests__/template.marko_2_renderer", _scope0_id)
+      }, _scope0_id)
     })
-  }, _$.register(/* @__PURE__ */_$.createRenderer(() => {
+  }, _$.registerContent("__tests__/template.marko_1_renderer", () => {
     const _scope1_id = _$.nextScopeId();
     _$.write("Body content");
-  }), "__tests__/template.marko_1_renderer", _scope0_id));
+  }, _scope0_id));
   _$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
-    "#text/0(": _$.normalizeDynamicRenderer(x)
+    "#text/0(": _$.dynamicTagId(x)
   }, "__tests__/template.marko", 0);
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);
+});
diff --git a/...ts__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/tags/hello/index.js b/...ts__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/tags/hello/index.js
@@ -1,6 +1,5 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/hello/index.marko", input => {
   const _scope0_id = _$.nextScopeId();
   _$.write("<div></div>");
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/tags/hello/index.marko", _renderer);
+});
diff --git a/...rc/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/template.js b/...rc/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/template.js
@@ -1,10 +1,9 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
 import _hello from "./tags/hello/index.marko";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", input => {
   const _scope0_id = _$.nextScopeId();
   const {
     x
   } = input;
   _hello({});
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);
+});
diff --git a/...gs/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/tags/hello/index.js b/...gs/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/tags/hello/index.js
@@ -1,6 +1,5 @@
 import * as _$ from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_$.createRenderer(input => {
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/hello/index.marko", input => {
   const _scope0_id = _$.nextScopeId();
   _$.write("<div></div>");
-});
-export default /* @__PURE__ */_$.createTemplate("__tests__/tags/hello/index.marko", _renderer);
+});