fix: custom tag vars should be a let

DylanPiercey · DylanPiercey · commit 0c65dc40f857 · 2025-06-21T15:11:55.000-07:00
diff --git a/.changeset/great-lands-drum.md b/.changeset/great-lands-drum.md
@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix issue where custom tags were incorrectly outputting tag variables as a const in ssr.
diff --git a/packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/html.expected/template.js
@@ -5,7 +5,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
   const $count_closures = new Set();
   const $childScope = _$.peekNextScopeId();
-  const count = _myLet({
+  let count = _myLet({
     value: 0
   });
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_count/var");
diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/html.expected/template.js
@@ -3,7 +3,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
   const $childScope = _$.peekNextScopeId();
-  const count = _counter({});
+  let count = _counter({});
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_count/var");
   _$.write(`<button class=inc-parent>${_$.escapeXML(count)}${_$.markResumeNode($scope0_id, "#text/3")}</button>${_$.markResumeNode($scope0_id, "#button/2")}<button class=reset>reset</button>${_$.markResumeNode($scope0_id, "#button/4")}`);
   _$.writeEffect($scope0_id, "__tests__/template.marko_0");
diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-expression/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-expression/__snapshots__/html.expected/template.js
@@ -3,7 +3,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
   const $childScope = _$.peekNextScopeId();
-  const data = _child({});
+  let data = _child({});
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_data/var");
   _$.write(`<div>${_$.escapeXML(data)}${_$.markResumeNode($scope0_id, "#text/2")}</div>`);
   _$.writeScope($scope0_id, {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-intersection/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-intersection/__snapshots__/html.expected/template.js
@@ -4,7 +4,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
   let name = "Marko";
   const $childScope = _$.peekNextScopeId();
-  const data = _child({
+  let data = _child({
     extra: 1
   });
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_data/var");
diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-multiple/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-multiple/__snapshots__/html.expected/template.js
@@ -3,7 +3,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
   const $childScope = _$.peekNextScopeId();
-  const data = _child({});
+  let data = _child({});
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_data/var");
   _$.write(`<div>${_$.escapeXML(data)}${_$.markResumeNode($scope0_id, "#text/2")}</div>`);
   _$.writeScope($scope0_id, {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/custom-tag-var/__snapshots__/html.expected/template.js
@@ -3,7 +3,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
   const $childScope = _$.peekNextScopeId();
-  const data = _child({});
+  let data = _child({});
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_data/var");
   _$.write(`<div>${_$.escapeXML(data)}${_$.markResumeNode($scope0_id, "#text/2")}</div>`);
   _$.writeScope($scope0_id, {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/html.expected/template.js
@@ -2,7 +2,7 @@ import child from "./tags/child/index.marko";
 import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
-  const data1 = child({});
+  let data1 = child({});
   const $inputshowchild_scope = _$.peekNextScopeId();
   const data2 = _$.dynamicTag($scope0_id, "#text/2", input.show && child, {});
   _$.setTagVar($scope0_id, "#scopeOffset/3", $inputshowchild_scope, "__tests__/template.marko_0_data2/var");
diff --git a/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-attr-tag/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-attr-tag/__snapshots__/html.expected/template.js
@@ -9,7 +9,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
     what: _$.attrTag({
       content: _$.registerContent("__tests__/template.marko_1_renderer", () => {
         const $scope1_id = _$.nextScopeId();
-        const setHtml = _child({});
+        let setHtml = _child({});
         _$.writeSubscribe($what_content_subscribers, _$.writeScope($scope1_id, {
           setHtml
         }, "__tests__/template.marko", "3:4", {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-from-dynamic/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-from-dynamic/__snapshots__/html.expected/template.js
@@ -11,7 +11,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
   _thing({
     content: _$.createContent("__tests__/template.marko_1_renderer", () => {
       const $scope1_id = _$.nextScopeId();
-      const setHtml = _child({});
+      let setHtml = _child({});
       _$.writeSubscribe($thing_content_subscribers, _$.writeScope($scope1_id, {
         setHtml
       }, "__tests__/template.marko", "3:2", {
@@ -25,7 +25,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
     _thing({
       content: _$.createContent("__tests__/template.marko_3_renderer", () => {
         const $scope3_id = _$.nextScopeId();
-        const setHtml2 = _child({});
+        let setHtml2 = _child({});
         _$.writeSubscribe($thing_content2_subscribers, _$.writeScope($scope3_id, {
           setHtml2
         }, "__tests__/template.marko", "16:4", {
@@ -39,7 +39,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
   }, $scope0_id), 0, _$.serializeGuard($serialize, /* input.show */0));
   _$.dynamicTag($scope0_id, "#text/2", input.show ? 'section' : null, {}, _$.registerContent("__tests__/template.marko_4_renderer", () => {
     const $scope4_id = _$.nextScopeId();
-    const setHtml3 = _child({});
+    let setHtml3 = _child({});
     _$.writeSubscribe($inputshowsectionnull_content_subscribers, _$.writeScope($scope4_id, {
       setHtml3
     }, "__tests__/template.marko", "26:4", {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-many/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-many/__snapshots__/html.expected/template.js
@@ -5,7 +5,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
   const $hoisted_setHtml3 = _$.hoist($scope0_id, "__tests__/template.marko_0_$hoisted_setHtml3/hoist");
   _$.resumeForTo(5, 0, 1, () => {
     const $scope1_id = _$.nextScopeId();
-    const setHtml = _child({});
+    let setHtml = _child({});
     _$.writeScope($scope1_id, {
       setHtml
     }, "__tests__/template.marko", "1:2", {
@@ -16,7 +16,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
   _$.write("<hr>");
   _$.resumeForTo(to, 0, 1, () => {
     const $scope2_id = _$.nextScopeId();
-    const setHtml2 = _child({});
+    let setHtml2 = _child({});
     _$.writeScope($scope2_id, {
       setHtml2
     }, "__tests__/template.marko", "12:2", {
@@ -29,7 +29,7 @@ export default _$.createTemplate("__tests__/template.marko", input => {
     _$.write("<ul>");
     _$.resumeForTo(3, 0, 1, j => {
       const $scope4_id = _$.nextScopeId();
-      const setHtml3 = _child({});
+      let setHtml3 = _child({});
       _$.writeScope($scope4_id, {
         setHtml3
       }, "__tests__/template.marko", "24:4", {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var/__snapshots__/html.expected/template.js
@@ -10,7 +10,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
       _$.resumeConditional(() => {
         if (input.show) {
           const $scope2_id = _$.nextScopeId();
-          const setHtml = _child({});
+          let setHtml = _child({});
           _$.writeScope($scope2_id, {
             setHtml
           }, "__tests__/template.marko", "2:4", {
@@ -32,7 +32,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
   _$.resumeConditional(() => {
     if (true) {
       const $scope3_id = _$.nextScopeId();
-      const setHtml2 = _child({});
+      let setHtml2 = _child({});
       _$.writeScope($scope3_id, {
         setHtml2
       }, "__tests__/template.marko", "13:2", {
@@ -44,7 +44,7 @@ export default _$.createTemplate("__tests__/template.marko", (input, $serialize)
   _$.resumeConditional(() => {
     if (true) {
       const $scope4_id = _$.nextScopeId();
-      const setHtml3 = _child({});
+      let setHtml3 = _child({});
       _$.writeScope($scope4_id, {
         setHtml3
       }, "__tests__/template.marko", "22:2", {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/html-comment-var/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/html-comment-var/__snapshots__/html.expected/template.js
@@ -4,11 +4,11 @@ export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
   _$.write("<div>");
   const $childScope = _$.peekNextScopeId();
-  const divName = _parentEl({});
+  let divName = _parentEl({});
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/template.marko_0_divName/var");
   _$.write(`${_$.escapeXML(divName)}${_$.markResumeNode($scope0_id, "#text/2")}</div><span>`);
   const $childScope2 = _$.peekNextScopeId();
-  const spanName = _parentEl({});
+  let spanName = _parentEl({});
   _$.setTagVar($scope0_id, "#scopeOffset/4", $childScope2, "__tests__/template.marko_0_spanName/var");
   _$.write(`${_$.escapeXML(spanName)}${_$.markResumeNode($scope0_id, "#text/5")}</span>`);
   _$.writeScope($scope0_id, {
diff --git a/packages/runtime-tags/src/__tests__/fixtures/no-render-content-conditional/__snapshots__/html.expected/tags/child.js b/packages/runtime-tags/src/__tests__/fixtures/no-render-content-conditional/__snapshots__/html.expected/tags/child.js
@@ -3,7 +3,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/tags/child.marko", (input, $serialize) => {
   const $scope0_id = _$.nextScopeId();
   const $childScope = _$.peekNextScopeId();
-  const x = _myConst({
+  let x = _myConst({
     value: input.foo
   });
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/tags/child.marko_0_x/var");
diff --git a/packages/runtime-tags/src/__tests__/fixtures/no-render-content-subtree/__snapshots__/html.expected/tags/child.js b/packages/runtime-tags/src/__tests__/fixtures/no-render-content-subtree/__snapshots__/html.expected/tags/child.js
@@ -3,7 +3,7 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/tags/child.marko", (input, $serialize) => {
   const $scope0_id = _$.nextScopeId();
   const $childScope = _$.peekNextScopeId();
-  const x = _myConst({
+  let x = _myConst({
     value: input.foo
   });
   _$.setTagVar($scope0_id, "#scopeOffset/1", $childScope, "__tests__/tags/child.marko_0_x/var");
diff --git a/packages/runtime-tags/src/__tests__/fixtures/return-tag-no-state/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/return-tag-no-state/__snapshots__/html.expected/template.js
@@ -2,6 +2,6 @@ import _child from "./tags/child.marko";
 import * as _$ from "@marko/runtime-tags/debug/html";
 export default _$.createTemplate("__tests__/template.marko", input => {
   const $scope0_id = _$.nextScopeId();
-  const value = _child({});
+  let value = _child({});
   _$.write(`<div>parent ${_$.escapeXML(value)}</div>`);
 });
diff --git a/packages/runtime-tags/src/translator/visitors/tag/custom-tag.ts b/packages/runtime-tags/src/translator/visitors/tag/custom-tag.ts
@@ -401,6 +401,7 @@ function translateHTML(tag: t.NodePath<t.MarkoTag>) {
         propsToExpression(properties),
         childSerializeReasonExpr,
       ),
+      "let",
     );
   } else {
     statements.push(

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@marko/runtime-tags": patch
 +---
++
 +Fix issue where custom tags were incorrectly outputting tag variables as a const in ssr.