fix: nested states inside tag tag

src/__tests__/fixtures/tag/__snapshots__/tag-with-state/node.render.expected.html

@@ -0,0 +1,22 @@
+<ul>
+  <li>
+    <input
+      type="checkbox"
+    />
+    Nested 1
+  </li>
+  <li>
+    <input
+      type="checkbox"
+    />
+    Nested 2
+    <ul>
+      <li>
+        <input
+          type="checkbox"
+        />
+        Nested 3
+      </li>
+    </ul>
+  </li>
+</ul>

src/__tests__/fixtures/tag/__snapshots__/tag-with-state/web.render.expected.html

@@ -0,0 +1,22 @@
+<ul>
+  <li>
+    <input
+      type="checkbox"
+    />
+    Nested 1
+  </li>
+  <li>
+    <input
+      type="checkbox"
+    />
+    Nested 2
+    <ul>
+      <li>
+        <input
+          type="checkbox"
+        />
+        Nested 3
+      </li>
+    </ul>
+  </li>
+</ul>

src/__tests__/fixtures/tag/__snapshots__/tag-with-state/web.step-0.expected.html

@@ -0,0 +1,23 @@
+<ul>
+  <li>
+    <input
+      checked=""
+      type="checkbox"
+    />
+    Nested 1
+  </li>
+  <li>
+    <input
+      type="checkbox"
+    />
+    Nested 2
+    <ul>
+      <li>
+        <input
+          type="checkbox"
+        />
+        Nested 3
+      </li>
+    </ul>
+  </li>
+</ul>

src/__tests__/fixtures/tag/__snapshots__/tag-with-state/web.step-1.expected.html

@@ -0,0 +1,24 @@
+<ul>
+  <li>
+    <input
+      checked=""
+      type="checkbox"
+    />
+    Nested 1
+  </li>
+  <li>
+    <input
+      checked=""
+      type="checkbox"
+    />
+    Nested 2
+    <ul>
+      <li>
+        <input
+          type="checkbox"
+        />
+        Nested 3
+      </li>
+    </ul>
+  </li>
+</ul>

src/__tests__/fixtures/tag/__snapshots__/tag-with-state/web.step-2.expected.html

@@ -0,0 +1,25 @@
+<ul>
+  <li>
+    <input
+      checked=""
+      type="checkbox"
+    />
+    Nested 1
+  </li>
+  <li>
+    <input
+      checked=""
+      type="checkbox"
+    />
+    Nested 2
+    <ul>
+      <li>
+        <input
+          checked=""
+          type="checkbox"
+        />
+        Nested 3
+      </li>
+    </ul>
+  </li>
+</ul>

src/__tests__/fixtures/tag/index.test.ts

@@ -2,6 +2,27 @@ import fixture from "../../fixture";
 
 describe("<tag> basic", fixture("./templates/basic.marko"));
 
+describe(
+  "<tag> with state",
+  fixture("./templates/with-state.marko", [
+    {
+      items: [
+        { label: "Nested 1" },
+        { label: "Nested 2", items: [{ label: "Nested 3" }] },
+      ],
+    },
+    async ({ screen, fireEvent }) => {
+      await fireEvent.click(screen.getAllByRole("checkbox")[0]);
+    },
+    async ({ screen, fireEvent }) => {
+      await fireEvent.click(screen.getAllByRole("checkbox")[1]);
+    },
+    async ({ screen, fireEvent }) => {
+      await fireEvent.click(screen.getAllByRole("checkbox")[2]);
+    },
+  ])
+);
+
 describe("<tag> error args", fixture("./templates/error-args.marko"));
 
 describe("<tag> error attrs", fixture("./templates/error-attrs.marko"));

src/__tests__/fixtures/tag/templates/with-state.marko

@@ -0,0 +1,23 @@
+<attrs/{ items }/>
+
+<tag/item|{ label, items }|>
+  <let/isChecked = false/>
+  <li>
+    <input type="checkbox" checked:=isChecked>
+    ${label}
+
+    <if=items>
+      <ul>
+        <for|value| of=items>
+            <item ...value />
+        </for>
+      </ul>
+    </if>
+  </li>
+</tag>
+
+<ul>
+  <for|value| of=items>
+    <item ...value />
+  </for>
+</ul>

src/components/tag/translate.ts

@@ -1,32 +1,43 @@
 import { types as t } from "@marko/compiler";
 import assertNoAssignments from "../../util/assert-no-assignments";
+const IDENTIFIERS = new WeakMap<t.NodePath<t.MarkoTag>, t.Identifier>();
 
-export = function transform(tag: t.NodePath<t.MarkoTag>) {
-  const tagVar = tag.node.var! as t.Identifier;
-  const body = tag.node.body;
-  const errorMessage = tag.node.attributes.length
-    ? "does not support attributes"
-    : !tagVar
-    ? "requires a tag variable"
-    : !t.isIdentifier(tagVar)
-    ? "cannot have a destructured tag variable"
-    : tag.node.arguments
-    ? "does not support arguments"
-    : !body.body.length
-    ? "requires body content"
-    : undefined;
+export = {
+  enter(tag: t.NodePath<t.MarkoTag>) {
+    const tagVar = tag.node.var! as t.Identifier;
+    const body = tag.node.body;
+    const errorMessage = tag.node.attributes.length
+      ? "does not support attributes"
+      : !tagVar
+      ? "requires a tag variable"
+      : !t.isIdentifier(tagVar)
+      ? "cannot have a destructured tag variable"
+      : tag.node.arguments
+      ? "does not support arguments"
+      : !body.body.length
+      ? "requires body content"
+      : undefined;
 
-  if (errorMessage) {
-    throw tag.get("name").buildCodeFrameError(`The <tag> tag ${errorMessage}.`);
-  }
+    if (errorMessage) {
+      throw tag
+        .get("name")
+        .buildCodeFrameError(`The <tag> tag ${errorMessage}.`);
+    }
 
-  assertNoAssignments(tag.get("var") as t.NodePath<t.PatternLike>);
+    assertNoAssignments(tag.get("var") as t.NodePath<t.PatternLike>);
 
-  tag.replaceWith(
-    t.functionDeclaration(
-      tagVar,
-      [t.identifier("out"), ...body.params],
-      t.blockStatement(body.body)
-    )
-  );
+    // We must clear the var to avoid the default translator complaining
+    // but we store it in a weakmap so we can read on exit.
+    IDENTIFIERS.set(tag, tagVar);
+    tag.node.var = null;
+  },
+  exit(tag: t.NodePath<t.MarkoTag>) {
+    tag.replaceWith(
+      t.functionDeclaration(
+        IDENTIFIERS.get(tag)!,
+        [t.identifier("out"), ...tag.node.body.params],
+        t.blockStatement(tag.node.body.body)
+      )
+    );
+  },
 };