fix: hoisted element reference production mode

Author: DylanPiercey

.changeset/angry-banks-punch.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix hoisted element reference variable name in production builds.

packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-attr-tag/__snapshots__/dom.expected/template.hydrate.js

@@ -20,6 +20,6 @@ const $what_content__setHtml = _._var_resume("c2", _._const(2));
   "a1",
 ),
   _._script("c3", ({ 1: $hoisted_setHtml }) => {
-    for (const fn of 1) fn("Hoist from custom tag");
+    for (const fn of $hoisted_setHtml) fn("Hoist from custom tag");
   }),
   init());

packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-from-dynamic/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 774 (min) 336 (brotli)
+// size: 774 (min) 337 (brotli)
 const $dynamicTag = _._dynamic_tag(0),
   $dynamicTag2 = _._dynamic_tag(1),
   $input_content = _._const(4, ($scope, input_content) => {
@@ -52,7 +52,7 @@ const $get$hoisted_setHtml2 = _._hoist(2, "a3", "a2"),
   _._resume("c6", _._hoist(2, "a1")),
   _._var_resume("c7", _._const(2)),
   _._script("c8", ({ 6: $hoisted_setHtml }) => {
-    for (const fn of 6) fn("Hoist from custom tag");
+    for (const fn of $hoisted_setHtml) fn("Hoist from custom tag");
   }),
   _._script("c9", ($scope) => {
     ($get$hoisted_setHtml2($scope)("Hoist from dynamic tag"),

packages/runtime-tags/src/__tests__/fixtures/hoist-custom-tag-var-many/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 385 (min) 187 (brotli)
+// size: 385 (min) 189 (brotli)
 (_._resume("a0", function ($scope) {
   return function (html) {
     $scope[0].innerHTML = html;
@@ -13,7 +13,7 @@ const $get$hoisted_setHtml3 = _._hoist(2, "m0");
   _._script("b4", ({ 4: $hoisted_setHtml3 }) => {
     {
       let i = 0;
-      for (const fn of 4) fn(`All (${i++})`);
+      for (const fn of $hoisted_setHtml3) fn(`All (${i++})`);
     }
   }),
   _._script("b5", ($scope) => {

packages/runtime-tags/src/__tests__/fixtures/hoist-dynamic-tag-var-from-dynamic/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 832 (min) 363 (brotli)
+// size: 832 (min) 370 (brotli)
 function $setup$1($scope) {
   _._return($scope, $_return($scope));
 }
@@ -62,7 +62,7 @@ const $get$hoisted_setHtml2 = _._hoist(2, "a3", "a2"),
   _._resume("c6", _._hoist(2, "a1")),
   _._var_resume("c7", _._const(2)),
   _._script("c8", ({ 6: $hoisted_setHtml }) => {
-    for (const fn of 6) fn("Hoist from custom tag");
+    for (const fn of $hoisted_setHtml) fn("Hoist from custom tag");
   }),
   _._script("c9", ($scope) => {
     ($get$hoisted_setHtml2($scope)("Hoist from dynamic tag"),

packages/runtime-tags/src/__tests__/fixtures/hoist-dynamic-tag-var-many/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 385 (min) 187 (brotli)
+// size: 385 (min) 189 (brotli)
 (_._resume("a0", function ($scope) {
   return function (html) {
     $scope[0].innerHTML = html;
@@ -13,7 +13,7 @@ const $get$hoisted_setHtml3 = _._hoist(2, "m0");
   _._script("b4", ({ 4: $hoisted_setHtml3 }) => {
     {
       let i = 0;
-      for (const fn of 4) fn(`All (${i++})`);
+      for (const fn of $hoisted_setHtml3) fn(`All (${i++})`);
     }
   }),
   _._script("b5", ($scope) => {

packages/runtime-tags/src/__tests__/fixtures/hoist-native-tag-var-from-dynamic/__snapshots__/dom.expected/template.hydrate.js

@@ -1,4 +1,4 @@
-// size: 751 (min) 332 (brotli)
+// size: 751 (min) 330 (brotli)
 const $dynamicTag = _._dynamic_tag(0),
   $dynamicTag2 = _._dynamic_tag(1),
   $input_content = _._const(4, ($scope, input_content) => {
@@ -12,7 +12,7 @@ const $child_content2 = _._content("b1", "<div></div>", " b", 0, 0, "a3"),
   $inputshowChildnull_content__$hoisted_el__script = _._script(
     "b5",
     ({ 1: $hoisted_el2 }) => {
-      for (const element of 1) element().classList.add("inner");
+      for (const element of $hoisted_el2) element().classList.add("inner");
     },
   ),
   $inputshowChildnull_content__$hoisted_el = _._const(
@@ -36,10 +36,11 @@ const $child_content2 = _._content("b1", "<div></div>", " b", 0, 0, "a3"),
 ),
   _._resume("b7", _._hoist("j0", "a1")),
   _._script("b8", ({ 7: $hoisted_el3 }) => {
-    for (const element of 7) element().classList.add("outer");
+    for (const element of $hoisted_el3) element().classList.add("outer");
   }),
   _._script("b9", ({ 6: $hoisted_el }) => {
-    for (const element of 6) element().innerHTML = "Hoist from custom tag";
+    for (const element of $hoisted_el)
+      element().innerHTML = "Hoist from custom tag";
   }),
   _._script("b10", ($scope) => {
     {

packages/runtime-tags/src/__tests__/fixtures/hoist-native-tag-var-many/__snapshots__/dom.expected/template.hydrate.js

@@ -5,7 +5,7 @@ const $get$hoisted_el2 = _._hoist("j0", "m1"),
 (_._script("a1", ({ 4: $hoisted_el3 }) => {
   {
     let i = 0;
-    for (const el of 4) el().innerHTML = `All (${i++})`;
+    for (const el of $hoisted_el3) el().innerHTML = `All (${i++})`;
   }
 }),
   _._script("a2", ($scope) => {

packages/runtime-tags/src/translator/util/references.ts

@@ -1432,7 +1432,7 @@ export function getReadReplacement(node: t.Identifier | t.MemberExpression) {
           ? t.callExpression(getHoistFunctionIdentifier(binding), [
               getScopeExpression(node.extra.section!, binding.section),
             ])
-          : t.identifier(getScopeAccessor(binding)!);
+          : t.identifier(binding.name);
       } else if (binding.name !== node.name) {
         node.name = binding.name;
       }