fix: duplicate setup when hoisting

.changeset/mean-pianos-march.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix duplicate setup identifier when hoisting

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/.name-cache.json

@@ -0,0 +1,18 @@
+{
+  "vars": {
+    "props": {
+      "$_": "r",
+      "$init": "m",
+      "$$get$hoisted_hoist": "o",
+      "$$get$hoisted_hoistY": "t",
+      "$$if_content__$hoisted_hoistY": "_",
+      "$$if_content__hoistY": "e",
+      "$$if_content__input_value": "n",
+      "$$if_content__setup": "s",
+      "$$if_content": "a",
+      "$$if": "i",
+      "$$show": "u",
+      "$$hoistY": "c"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1 @@
+# Render

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/csr.expected.md

@@ -0,0 +1,12 @@
+# Render
+```html
+<!---->
+<!---->
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT #comment0, #comment1, #text, #comment2, #comment3
+```

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,17 @@
+// size: 158 (min) 86 (brotli)
+(_._resume("a2", _._hoist(0)),
+  _._resume("a3", _._hoist(4)),
+  _._resume(
+    "a1",
+    function ({
+      _: {
+        _: { 3: input_value },
+      },
+    }) {
+      return () => input_value;
+    },
+  ),
+  _._resume("a0", function ({ 3: input_value }) {
+    return () => input_value;
+  }),
+  init());

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/dom.expected/template.js

@@ -0,0 +1,52 @@
+export const $template = "<!><!><!>";
+export const $walks = /* over(1), replace, over(2) */"b%c";
+import * as _ from "@marko/runtime-tags/debug/dom";
+const $get$hoisted_hoist = _._resume("__tests__/template.marko_2_$hoisted_hoist2/hoist", _._hoist("hoist3"));
+const $if_content2__$hoisted_hoist = /* @__PURE__ */_._const("$hoisted_hoist2", ($scope, $hoisted_hoist2) => /* z */$hoisted_hoist2);
+const $if_content2__hoist = /* @__PURE__ */_._const("hoist3", ($scope, hoist3) => _._assert_hoist(hoist3));
+const $if_content2__input_value = /* @__PURE__ */_._closure_get("input_value", ($scope, input_value) => $if_content2__hoist($scope, $hoist2($scope)), $scope => $scope._._);
+const $if_content2__setup = $scope => {
+  $if_content2__input_value($scope);
+  $if_content2__$hoisted_hoist($scope, $get$hoisted_hoist($scope));
+};
+const $if_content2 = /* @__PURE__ */_._content_branch(0, 0, $if_content2__setup);
+const $if_content__if = /* @__PURE__ */_._if("#text/0", $if_content2);
+const $if_content__setup = $scope => {
+  $if_content__input_value._($scope);
+  /* y */2;
+  $if_content__if($scope, 1 ? 0 : 1);
+};
+const $if_content__input_value = /* @__PURE__ */_._if_closure("input_value", "#text/0", 0, ($scope, input_value) => /* hoist2 */() => input_value);
+const $if_content = /* @__PURE__ */_._content_branch("<!><!><!>", /* over(1), replace, over(2) */"b%c", $if_content__setup);
+const $get$hoisted_hoist2 = _._resume("__tests__/template.marko_0_$hoisted_hoist/hoist", _._hoist("hoist1"));
+const $hoisted_hoist3 = /* @__PURE__ */_._const("$hoisted_hoist", ($scope, $hoisted_hoist) => /* x */$hoisted_hoist);
+const $hoist3 = /* @__PURE__ */_._const("hoist1", ($scope, hoist1) => _._assert_hoist(hoist1));
+const $input_value__closure = /* @__PURE__ */_._closure($if_content2__input_value);
+export const $input_value = /* @__PURE__ */_._const("input_value", ($scope, input_value) => {
+  $hoist3($scope, $hoist($scope));
+  $if_content__input_value($scope);
+  $input_value__closure($scope);
+});
+const $if = /* @__PURE__ */_._if("#text/0", $if_content);
+export function $setup($scope) {
+  $if($scope, 1 ? 0 : 1);
+  $hoisted_hoist3($scope, $get$hoisted_hoist2($scope));
+}
+export const $input = /* @__PURE__ */_._const("input", ($scope, input) => $input_value($scope, input.value));
+function $hoist2({
+  _: {
+    _: {
+      input_value
+    }
+  }
+}) {
+  return () => input_value;
+}
+function $hoist({
+  input_value
+}) {
+  return () => input_value;
+}
+_._resume("__tests__/template.marko_2/hoist2", $hoist2);
+_._resume("__tests__/template.marko_0/hoist", $hoist);
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/html.expected/template.js

@@ -0,0 +1,46 @@
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_reason = _._scope_reason();
+  const $scope0_id = _._scope_id();
+  const $hoisted_hoist = _._hoist($scope0_id, "__tests__/template.marko_0_$hoisted_hoist/hoist");
+  const $input_value__closures = new Set();
+  const x = $hoisted_hoist;
+  const hoist1 = _._resume(() => input.value, "__tests__/template.marko_0/hoist", $scope0_id);
+  _._if(() => {
+    if (1) {
+      const $scope1_id = _._scope_id();
+      const y = 2;
+      const hoist2 = () => input.value;
+      _._if(() => {
+        if (1) {
+          const $scope2_id = _._scope_id();
+          const $hoisted_hoist2 = _._hoist($scope2_id, "__tests__/template.marko_2_$hoisted_hoist2/hoist");
+          const z = $hoisted_hoist2;
+          const hoist3 = _._resume(() => input.value, "__tests__/template.marko_2/hoist2", $scope2_id);
+          _._subscribe($input_value__closures, _._scope($scope2_id, {
+            hoist3,
+            _: _._scope_with_id($scope1_id),
+            "ClosureSignalIndex:input_value": _._serialize_if($scope0_reason, /* input.value */0) && 0
+          }, "__tests__/template.marko", "8:4", {
+            hoist3: "10:12"
+          }));
+          _._assert_hoist(hoist3);
+          return 0;
+        }
+      }, $scope1_id, "#text/0", 1, 0, 0, 0, 1);
+      _._scope($scope1_id, {
+        _: _._scope_with_id($scope0_id)
+      }, "__tests__/template.marko", "4:2");
+      return 0;
+    }
+  }, $scope0_id, "#text/0", 1, 0, 0);
+  _._scope($scope0_id, {
+    input_value: input.value,
+    hoist1,
+    "ClosureScopes:input_value": _._serialize_if($scope0_reason, /* input.value */0) && $input_value__closures
+  }, "__tests__/template.marko", 0, {
+    input_value: ["input.value"],
+    hoist1: "2:8"
+  });
+  _._assert_hoist(hoist1);
+});

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1 @@
+# Render

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/resume.expected.md

@@ -0,0 +1,21 @@
+# Render
+```html
+<html>
+  <head>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.d = [0, _.c = {
+        "ConditionalScope:#text/0": _.b = {
+          "ConditionalScope:#text/0": _.a = {}
+        }
+      }, _.b, _.a], _.a._ = _.b, _.b._ = _.c, _.a.hoist3 = _._[
+        "__tests__/template.marko_2/hoist2"
+        ](_.a), _.c.hoist1 = _._[
+        "__tests__/template.marko_0/hoist"
+        ](_.c), (_.e = new Set).add(_.a), _.d)];
+      M._.w()
+    </script>
+  </head>
+  <body />
+</html>
+```

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/ssr-sanitized.expected.md

@@ -0,0 +1 @@
+# Render End

packages/runtime-tags/src/__tests__/fixtures/hoist-only/__snapshots__/ssr.expected.md

@@ -0,0 +1,35 @@
+# Write
+```html
+  <script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.d=[0,_.c={"ConditionalScope:#text/0":_.b={"ConditionalScope:#text/0":_.a={}}},_.b,_.a],_.a._=_.b,_.b._=_.c,_.a.hoist3=_._["__tests__/template.marko_2/hoist2"](_.a),_.c.hoist1=_._["__tests__/template.marko_0/hoist"](_.c),(_.e=new Set).add(_.a),_.d)];M._.w()</script>
+```
+
+# Render End
+```html
+<html>
+  <head>
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.d = [0, _.c = {
+        "ConditionalScope:#text/0": _.b = {
+          "ConditionalScope:#text/0": _.a = {}
+        }
+      }, _.b, _.a], _.a._ = _.b, _.b._ = _.c, _.a.hoist3 = _._[
+        "__tests__/template.marko_2/hoist2"
+        ](_.a), _.c.hoist1 = _._[
+        "__tests__/template.marko_0/hoist"
+        ](_.c), (_.e = new Set).add(_.a), _.d)];
+      M._.w()
+    </script>
+  </head>
+  <body />
+</html>
+```
+
+# Mutations
+```
+INSERT html
+INSERT html/head
+INSERT html/head/script
+INSERT html/head/script/#text
+INSERT html/body
+```

packages/runtime-tags/src/__tests__/fixtures/hoist-only/template.marko

@@ -0,0 +1,12 @@
+<const/x=hoist1>
+<const/hoist1=()=>input.value>
+
+<if=1>
+  <const/y=2>
+  <const/hoist2=()=>input.value>
+
+  <if=1>
+    <const/z=hoist3>
+    <const/hoist3=()=>input.value>
+  </>
+</>

packages/runtime-tags/src/__tests__/fixtures/hoist-only/test.ts

@@ -0,0 +1 @@
+export const steps = [{}];

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

@@ -377,6 +377,7 @@ export function trackHoistedReference(
     );
 
     section.hoisted = bindingUtil.add(section.hoisted, binding);
+    hoistSection.hoistedTo = bindingUtil.add(hoistSection.hoistedTo, binding);
 
     let currentSection = section.parent;
     while (currentSection && currentSection !== hoistSection) {

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

@@ -62,6 +62,7 @@ export interface Section {
   bindings: ReferencedBindings;
   domGetterBindings: Map<Binding, string>;
   hoisted: ReferencedBindings;
+  hoistedTo: ReferencedBindings;
   serializeReason: undefined | SerializeReason;
   serializeReasons: Map<symbol, SerializeReason>;
   paramReasonGroups: ParamSerializeReasonGroups | undefined;
@@ -133,6 +134,7 @@ export function startSection(
       bindings: undefined,
       domGetterBindings: new Map(),
       hoisted: undefined,
+      hoistedTo: undefined,
       isHoistThrough: undefined,
       serializeReason: undefined,
       serializeReasons: new Map(),

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

@@ -1291,7 +1291,9 @@ export function writeHTMLResumeStatements(
 }
 
 export function getSetup(section: Section) {
-  return getSignals(section).get(undefined)?.identifier;
+  return section.hoistedTo
+    ? getSignal(section, undefined).identifier
+    : getSignals(section).get(undefined)?.identifier;
 }
 
 function replaceRenderNode(node: t.Node) {