fix: issue reading custom tag var closures

.changeset/giant-ligers-hide.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix issue reading custom tag var closures.

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/.name-cache.json

@@ -0,0 +1,11 @@
+{
+  "vars": {
+    "props": {
+      "$_$": "r",
+      "$init": "t",
+      "$_value": "a",
+      "$_count$myTag_content_effect": "e",
+      "$_count$myTag_content": "n"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,36 @@
+# Render {}
+```html
+<button>
+  0
+</button>
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<button>
+  1
+</button>
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<button>
+  2
+</button>
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<button>
+  3
+</button>
+```

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/csr.expected.md

@@ -0,0 +1,72 @@
+# Render {}
+```html
+<!---->
+<!---->
+<button>
+  0
+</button>
+<!---->
+<!---->
+```
+
+# Mutations
+```
+inserted #comment0, #comment1, button2, #comment3, #comment4
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<!---->
+<!---->
+<button>
+  1
+</button>
+<!---->
+<!---->
+```
+
+# Mutations
+```
+button2/#text0: "0" => "1"
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<!---->
+<!---->
+<button>
+  2
+</button>
+<!---->
+<!---->
+```
+
+# Mutations
+```
+button2/#text0: "1" => "2"
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<!---->
+<!---->
+<button>
+  3
+</button>
+<!---->
+<!---->
+```
+
+# Mutations
+```
+button2/#text0: "2" => "3"
+```

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/dom.expected/tags/custom-tag.js

@@ -0,0 +1,8 @@
+export const _template_ = "<div></div>";
+export const _walks_ = /* get, over(1) */" b";
+export const _setup_ = () => {};
+import * as _$ from "@marko/runtime-tags/debug/dom";
+export const _style_ = /* @__PURE__ */_$.value("style", (_scope, style) => _$.styleAttr(_scope["#div/0"], style));
+export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => _style_(_scope, input.style));
+export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]));
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/custom-tag.marko", _template_, _walks_, _setup_, void 0, () => _params__);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/dom.expected/tags/my-let.js

@@ -0,0 +1,17 @@
+export const _template_ = "";
+export const _walks_ = "";
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const _value = /* @__PURE__ */_$.state("value", (_scope, value) => _$.tagVarSignal(_scope, value), () => _$.tagVarSignal);
+export const _input_value_ = /* @__PURE__ */_$.value("input_value", (_scope, input_value) => _value(_scope, input_value), () => _value);
+export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => _input_value_(_scope, input.value), () => _input_value_);
+export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), () => _input_);
+export function _setup_(_scope) {
+  _$.setTagVarChange(_scope, _valueChange(_scope));
+}
+function _valueChange(_scope) {
+  return _new_value => {
+    _value(_scope, _new_value);
+  };
+}
+_$.register("__tests__/tags/my-let.marko_0/valueChange", _valueChange);
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-let.marko", _template_, _walks_, _setup_, void 0, () => _params__);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/dom.expected/tags/my-tag.js

@@ -0,0 +1,10 @@
+export const _template_ = "<!><!><!>";
+export const _walks_ = /* replace, over(1) */"D%bD";
+export const _setup_ = () => {};
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const _inputContent_input = _$.dynamicTagAttrs("#text/0");
+const _dynamicTagName = /* @__PURE__ */_$.conditional("#text/0", _scope => _inputContent_input(_scope, () => ({})), () => _inputContent_input);
+export const _input_content_ = /* @__PURE__ */_$.value("input_content", (_scope, input_content) => _dynamicTagName(_scope, input_content), () => _dynamicTagName);
+export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => _input_content_(_scope, input.content), () => _input_content_);
+export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), () => _input_);
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-tag.marko", _template_, _walks_, _setup_, void 0, () => _params__);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,36 @@
+// size: 490 (min) 265 (brotli)
+const _value = _$.state(
+  3,
+  (_scope, value) => _$.tagVarSignal(_scope, value),
+  () => _$.tagVarSignal,
+);
+_$.register("a0", function (_scope) {
+  return (_new_value) => {
+    _value(_scope, _new_value);
+  };
+}),
+  _$.dynamicTagAttrs(0);
+const _count$myTag_content_effect = _$.effect(
+    "c0",
+    (_scope, { _: { 2: count } }) =>
+      _$.on(_scope[0], "click", function () {
+        _$.tagVarSignalChange(_scope._[0], count + 1);
+      }),
+  ),
+  _count$myTag_content = _$.registerSubscriber(
+    "c1",
+    _$.dynamicClosure(2, (_scope, count) => {
+      _$.data(_scope[1], count), _count$myTag_content_effect(_scope);
+    }),
+  );
+_$.register(
+  "c2",
+  _$.createRendererWithOwner("<button> </button>", " D ", void 0, () => [
+    _count$myTag_content,
+  ]),
+),
+  _$.registerBoundSignal(
+    "c3",
+    _$.value(2, 0, () => _$.dynamicSubscribers(2)),
+  ),
+  init();

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/dom.expected/template.js

@@ -0,0 +1,26 @@
+export const _template_ = `<!>${_myLet_template}${_myTag_template}<!>`;
+export const _walks_ = /* beginChild, _myLet_walks, endChild, beginChild, _myTag_walks, endChild */`D/${_myLet_walks}&/${_myTag_walks}&D`;
+import { _setup_ as _myLet, _input_value_ as _myLet_input_value, _template_ as _myLet_template, _walks_ as _myLet_walks } from "./tags/my-let.marko";
+import * as _$ from "@marko/runtime-tags/debug/dom";
+import { _setup_ as _myTag, _input_content_ as _myTag_input_content, _template_ as _myTag_template, _walks_ as _myTag_walks } from "./tags/my-tag.marko";
+const _count$myTag_content_effect = _$.effect("__tests__/template.marko_1_count", (_scope, {
+  _: {
+    count
+  }
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _$.tagVarSignalChange(_scope._["#childScope/0"], count + 1), count;
+}));
+const _count$myTag_content = _$.registerSubscriber("__tests__/template.marko_1_count/subscriber", /* @__PURE__ */_$.dynamicClosure("count", (_scope, count) => {
+  _$.data(_scope["#text/1"], count);
+  _count$myTag_content_effect(_scope);
+}));
+const _myTag_content = _$.register("__tests__/template.marko_1_renderer", /* @__PURE__ */_$.createRendererWithOwner("<button> </button>", /* get, next(1), get */" D ", void 0, () => [_count$myTag_content]));
+const _count = _$.registerBoundSignal("__tests__/template.marko_0_count/var", /* @__PURE__ */_$.value("count", 0, () => _$.dynamicSubscribers("count")));
+export function _setup_(_scope) {
+  _$.setTagVar(_scope, "#childScope/0", _count);
+  _myLet(_scope["#childScope/0"]);
+  _myTag(_scope["#childScope/1"]);
+  _myLet_input_value(_scope["#childScope/0"], 0);
+  _myTag_input_content(_scope["#childScope/1"], _myTag_content(_scope));
+}
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _template_, _walks_, _setup_);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/html.expected/tags/custom-tag.js

@@ -0,0 +1,9 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const {
+    style
+  } = input;
+  _$.write(`<div${_$.styleAttr(style)}></div>${_$.markResumeNode(_scope0_id, "#div/0")}`);
+});
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/custom-tag.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/html.expected/tags/my-let.js

@@ -0,0 +1,14 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const value = input.value;
+  const _return = value;
+  _$.writeScope(_scope0_id, {
+    "/": _tagVar,
+    "@": _$.register(_new_value => {
+      value = _new_value;
+    }, "__tests__/tags/my-let.marko_0/valueChange", _scope0_id)
+  });
+  return _return;
+});
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-let.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/html.expected/tags/my-tag.js

@@ -0,0 +1,12 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const _dynamicScope = _$.peekNextScope();
+  _$.dynamicTagInput(_dynamicScope, input.content, {});
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/0"));
+  _$.writeScope(_scope0_id, {
+    "#text/0!": _$.writeExistingScope(_dynamicScope),
+    "#text/0(": _$.normalizeDynamicRenderer(input.content)
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-tag.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/html.expected/template.js

@@ -0,0 +1,28 @@
+import _myLet from "./tags/my-let.marko";
+import * as _$ from "@marko/runtime-tags/debug/html";
+import _myTag from "./tags/my-tag.marko";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const _childScope = _$.peekNextScope();
+  const count = _myLet({
+    value: 0
+  }, _$.register(() => {}, "__tests__/template.marko_0_count/var", _scope0_id));
+  const _childScope2 = _$.peekNextScope();
+  _myTag({
+    content: _$.register(/* @__PURE__ */_$.createRenderer(() => {
+      const _scope1_id = _$.nextScopeId();
+      _$.write(`<button>${_$.escapeXML(count)}${_$.markResumeNode(_scope1_id, "#text/1")}</button>${_$.markResumeNode(_scope1_id, "#button/0")}`);
+      _$.writeEffect(_scope1_id, "__tests__/template.marko_1_count/subscriber");
+      _$.writeEffect(_scope1_id, "__tests__/template.marko_1_count");
+      _$.writeScope(_scope1_id, {
+        "_": _$.ensureScopeWithId(_scope0_id)
+      });
+    }), "__tests__/template.marko_1_renderer", _scope0_id)
+  });
+  _$.writeScope(_scope0_id, {
+    "count": count,
+    "#childScope/0": _$.writeExistingScope(_childScope),
+    "#childScope/1": _$.writeExistingScope(_childScope2)
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/cross-tag-closure/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,36 @@
+# Render {}
+```html
+<button>
+  0
+</button>
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<button>
+  1
+</button>
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<button>
+  2
+</button>
+```
+
+
+# Render 
+container.querySelector("button").click()
+
+```html
+<button>
+  3
+</button>
+```