fix: adjacent bound attrs transform properly

.changeset/famous-dingos-run.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix adjacent bound values

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/.name-cache.json

@@ -0,0 +1,20 @@
+{
+  "vars": {
+    "props": {
+      "$_$": "t",
+      "$init": "a",
+      "$_expr_input_count1_input_count1Change": "n",
+      "$_count2_effect": "o",
+      "$_count2": "e",
+      "$_count_effect": "i",
+      "$_count$1": "r",
+      "$_input_count1_": "c",
+      "$_count": "m",
+      "$_expr_input_count2_input_count2Change": "s",
+      "$_count2$1": "f",
+      "$_input_count2_": "u",
+      "$_expr_input_count2Change_input_count": "d",
+      "$_expr_input_count1Change_input_count": "l"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,60 @@
+# Render {}
+```html
+<button>
+  0
+</button>
+<button>
+  0
+</button>
+<div>
+  0 0
+</div>
+```
+
+
+# Render 
+container.querySelectorAll("button").forEach(item => item.click())
+
+```html
+<button>
+  1
+</button>
+<button>
+  1
+</button>
+<div>
+  1 1
+</div>
+```
+
+
+# Render 
+container.querySelectorAll("button").forEach(item => item.click())
+
+```html
+<button>
+  2
+</button>
+<button>
+  2
+</button>
+<div>
+  2 2
+</div>
+```
+
+
+# Render 
+container.querySelectorAll("button").forEach(item => item.click())
+
+```html
+<button>
+  3
+</button>
+<button>
+  3
+</button>
+<div>
+  3 3
+</div>
+```

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/csr.expected.md

@@ -0,0 +1,89 @@
+# Render {}
+```html
+<button>
+  0
+</button>
+<button>
+  0
+</button>
+<div>
+  0 0
+</div>
+```
+
+# Mutations
+```
+inserted button0, button1, div2
+```
+
+
+# Render 
+container.querySelectorAll("button").forEach(item => item.click())
+
+```html
+<button>
+  1
+</button>
+<button>
+  1
+</button>
+<div>
+  1 1
+</div>
+```
+
+# Mutations
+```
+div2/#text0: "0" => "1"
+button0/#text0: "0" => "1"
+div2/#text2: "0" => "1"
+button1/#text0: "0" => "1"
+```
+
+
+# Render 
+container.querySelectorAll("button").forEach(item => item.click())
+
+```html
+<button>
+  2
+</button>
+<button>
+  2
+</button>
+<div>
+  2 2
+</div>
+```
+
+# Mutations
+```
+div2/#text0: "1" => "2"
+button0/#text0: "1" => "2"
+div2/#text2: "1" => "2"
+button1/#text0: "1" => "2"
+```
+
+
+# Render 
+container.querySelectorAll("button").forEach(item => item.click())
+
+```html
+<button>
+  3
+</button>
+<button>
+  3
+</button>
+<div>
+  3 3
+</div>
+```
+
+# Mutations
+```
+div2/#text0: "2" => "3"
+button0/#text0: "2" => "3"
+div2/#text2: "2" => "3"
+button1/#text0: "2" => "3"
+```

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/dom.expected/tags/2counters.js

@@ -0,0 +1,48 @@
+export const _template_ = "<button> </button><button> </button>";
+export const _walks_ = /* get, next(1), get, out(1), get, next(1), get, out(1) */" D l D l";
+export const _setup_ = () => {};
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const _expr_input_count2_input_count2Change = /* @__PURE__ */_$.intersection(2, _scope => {
+  const {
+    input_count2,
+    input_count2Change
+  } = _scope;
+  _count2(_scope, input_count2, input_count2Change);
+});
+const _expr_input_count1_input_count1Change = /* @__PURE__ */_$.intersection(2, _scope => {
+  const {
+    input_count1,
+    input_count1Change
+  } = _scope;
+  _count(_scope, input_count1, input_count1Change);
+});
+const _count2_effect = _$.effect("__tests__/tags/2counters.marko_0_count2", (_scope, {
+  count2
+}) => _$.on(_scope["#button/2"], "click", function () {
+  _count2(_scope, count2 + 1), count2;
+}));
+const _count2 = /* @__PURE__ */_$.state("count2", (_scope, count2) => {
+  _$.data(_scope["#text/3"], count2);
+  _count2_effect(_scope);
+});
+const _count_effect = _$.effect("__tests__/tags/2counters.marko_0_count1", (_scope, {
+  count1
+}) => _$.on(_scope["#button/0"], "click", function () {
+  _count(_scope, count1 + 1), count1;
+}));
+const _count = /* @__PURE__ */_$.state("count1", (_scope, count1) => {
+  _$.data(_scope["#text/1"], count1);
+  _count_effect(_scope);
+});
+export const _input_count2Change_ = /* @__PURE__ */_$.value("input_count2Change", 0, () => _expr_input_count2_input_count2Change);
+export const _input_count2_ = /* @__PURE__ */_$.value("input_count2", 0, () => _expr_input_count2_input_count2Change);
+export const _input_count1Change_ = /* @__PURE__ */_$.value("input_count1Change", 0, () => _expr_input_count1_input_count1Change);
+export const _input_count1_ = /* @__PURE__ */_$.value("input_count1", 0, () => _expr_input_count1_input_count1Change);
+export const _input_ = /* @__PURE__ */_$.value("input", (_scope, input) => {
+  _input_count1_(_scope, input.count1);
+  _input_count1Change_(_scope, input.count1Change);
+  _input_count2_(_scope, input.count2);
+  _input_count2Change_(_scope, input.count2Change);
+}, () => _$.intersections([_input_count1_, _input_count1Change_, _input_count2_, _input_count2Change_]));
+export const _params__ = /* @__PURE__ */_$.value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), () => _input_);
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/2counters.marko", _template_, _walks_, _setup_, void 0, () => _params__);

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,52 @@
+// size: 640 (min) 243 (brotli)
+const _expr_input_count2_input_count2Change = _$.intersection(2, (_scope) => {
+    const { 8: input_count2, 9: input_count2Change } = _scope;
+    _count2$1(_scope, input_count2, input_count2Change);
+  }),
+  _expr_input_count1_input_count1Change = _$.intersection(2, (_scope) => {
+    const { 6: input_count1, 7: input_count1Change } = _scope;
+    _count$1(_scope, input_count1, input_count1Change);
+  }),
+  _count2_effect = _$.effect("a0", (_scope, { 11: count2 }) =>
+    _$.on(_scope[2], "click", function () {
+      _count2$1(_scope, count2 + 1);
+    }),
+  ),
+  _count2$1 = _$.state(11, (_scope, count2) => {
+    _$.data(_scope[3], count2), _count2_effect(_scope);
+  }),
+  _count_effect = _$.effect("a1", (_scope, { 10: count1 }) =>
+    _$.on(_scope[0], "click", function () {
+      _count$1(_scope, count1 + 1);
+    }),
+  ),
+  _count$1 = _$.state(10, (_scope, count1) => {
+    _$.data(_scope[1], count1), _count_effect(_scope);
+  }),
+  _input_count2_ = _$.value(8, 0, () => _expr_input_count2_input_count2Change),
+  _input_count1_ = _$.value(6, 0, () => _expr_input_count1_input_count1Change),
+  _count2 = _$.state(
+    4,
+    (_scope, count2) => {
+      _$.data(_scope[2], count2), _input_count2_(_scope[0], count2);
+    },
+    () => _$.inChild(0, _input_count2_),
+  ),
+  _count = _$.state(
+    3,
+    (_scope, count1) => {
+      _$.data(_scope[1], count1), _input_count1_(_scope[0], count1);
+    },
+    () => _$.inChild(0, _input_count1_),
+  );
+_$.register("b0", function (_scope) {
+  return (_new_count) => {
+    _count(_scope, _new_count);
+  };
+}),
+  _$.register("b1", function (_scope) {
+    return (_new_count2) => {
+      _count2(_scope, _new_count2);
+    };
+  }),
+  init();

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/dom.expected/template.js

@@ -0,0 +1,32 @@
+export const _template_ = `${_counters_template}<div><!> <!></div>`;
+export const _walks_ = /* beginChild, _counters_walks, endChild, next(1), replace, over(2), replace, out(1) */`/${_counters_walks}&D%c%l`;
+import { _setup_ as _counters, _input_count1_ as _counters_input_count, _input_count1Change_ as _counters_input_count1Change, _input_count2Change_ as _counters_input_count2Change, _input_count2_ as _counters_input_count2, _template_ as _counters_template, _walks_ as _counters_walks } from "./tags/2counters.marko";
+import * as _$ from "@marko/runtime-tags/debug/dom";
+const _count2 = /* @__PURE__ */_$.state("count2", (_scope, count2) => {
+  _$.data(_scope["#text/2"], count2);
+  _counters_input_count2(_scope["#childScope/0"], count2);
+}, () => _$.inChild("#childScope/0", _counters_input_count2));
+const _count = /* @__PURE__ */_$.state("count1", (_scope, count1) => {
+  _$.data(_scope["#text/1"], count1);
+  _counters_input_count(_scope["#childScope/0"], count1);
+}, () => _$.inChild("#childScope/0", _counters_input_count));
+export function _setup_(_scope) {
+  _counters(_scope["#childScope/0"]);
+  _count(_scope, 0);
+  _count2(_scope, 0);
+  _counters_input_count1Change(_scope["#childScope/0"], _count1Change(_scope));
+  _counters_input_count2Change(_scope["#childScope/0"], _count2Change(_scope));
+}
+function _count1Change(_scope) {
+  return _new_count => {
+    _count(_scope, _new_count);
+  };
+}
+function _count2Change(_scope) {
+  return _new_count2 => {
+    _count2(_scope, _new_count2);
+  };
+}
+_$.register("__tests__/template.marko_0/count1Change", _count1Change);
+_$.register("__tests__/template.marko_0/count2Change", _count2Change);
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _template_, _walks_, _setup_);

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/html.expected/tags/2counters.js

@@ -0,0 +1,20 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const count1 = input.count1;
+  const count2 = input.count2;
+  _$.write(`<button>${_$.escapeXML(count1)}${_$.markResumeNode(_scope0_id, "#text/1")}</button>${_$.markResumeNode(_scope0_id, "#button/0")}<button>${_$.escapeXML(count2)}${_$.markResumeNode(_scope0_id, "#text/3")}</button>${_$.markResumeNode(_scope0_id, "#button/2")}`);
+  _$.writeEffect(_scope0_id, "__tests__/tags/2counters.marko_0_count2");
+  _$.writeEffect(_scope0_id, "__tests__/tags/2counters.marko_0_count1");
+  _$.writeScope(_scope0_id, {
+    "input_count1": input.count1,
+    "input_count1Change": input.count1Change,
+    "input_count2": input.count2,
+    "input_count2Change": input.count2Change,
+    "count1": count1,
+    "count2": count2,
+    "count1@": input.count1Change,
+    "count2@": input.count2Change
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("__tests__/tags/2counters.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/multiple-bound-values/__snapshots__/html.expected/template.js

@@ -0,0 +1,23 @@
+import _counters from "./tags/2counters.marko";
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const count1 = 0;
+  const count2 = 0;
+  const _childScope = _$.peekNextScope();
+  _counters({
+    count1: count1,
+    count1Change: _$.register(_new_count => {
+      count1 = _new_count;
+    }, "__tests__/template.marko_0/count1Change", _scope0_id),
+    count2Change: _$.register(_new_count2 => {
+      count2 = _new_count2;
+    }, "__tests__/template.marko_0/count2Change", _scope0_id),
+    count2: count2
+  });
+  _$.write(`<div>${_$.escapeXML(count1)}${_$.markResumeNode(_scope0_id, "#text/1")} <!>${_$.escapeXML(count2)}${_$.markResumeNode(_scope0_id, "#text/2")}</div>`);
+  _$.writeScope(_scope0_id, {
+    "#childScope/0": _$.writeExistingScope(_childScope)
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);