diff --git a/.changeset/serious-dryers-relate.md b/.changeset/serious-dryers-relate.md
new file mode 100644
index 000000000..8bdf2d7f8
--- /dev/null
+++ b/.changeset/serious-dryers-relate.md
@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+When using the bound attribute syntax, prefer to create a simple shared function that assigns to the bound variable.
diff --git a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/.name-cache.json b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/.name-cache.json
index bfbaa8f44..7d67a8817 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/.name-cache.json
+++ b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/.name-cache.json
@@ -6,7 +6,9 @@
"$_input__effect": "a",
"$_input_": "r",
"$_checkedChange": "o",
- "$_checked": "m"
+ "$_checked": "m",
+ "$_expr_checked__checkedChange": "n",
+ "$_checked2": "c"
}
}
}
diff --git a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/.name-cache.json b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/.name-cache.json
index 9432ff80b..d1d8fe281 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/.name-cache.json
+++ b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/.name-cache.json
@@ -6,7 +6,9 @@
"$_checkedValueChange": "c",
"$_checkedValueChange2": "a",
"$_checkedValueChange3": "l",
- "$_checkedValue": "o"
+ "$_checkedValue": "o",
+ "$_expr_checkedValue__checkedValueChange": "n",
+ "$_checkedValue2": "r"
}
}
}
diff --git a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js
index 8e3a55ac4..6ef0b6159 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js
+++ b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js
@@ -1,49 +1,41 @@
-// size: 515 (min) 165 (brotli)
-const _checkedValue = _$.state(4, (_scope, checkedValue) => {
- _$.controllable_input_checkedValue(
- _scope,
- 0,
- checkedValue,
- _checkedValueChange3(_scope),
- "a",
- ),
+// size: 451 (min) 178 (brotli)
+const _expr_checkedValue__checkedValueChange = _$.intersection(2, (_scope) => {
+ const { 4: checkedValue, 5: _checkedValueChange } = _scope;
_$.controllable_input_checkedValue(
_scope,
- 1,
+ 0,
checkedValue,
- _checkedValueChange2(_scope),
- "b",
+ _checkedValueChange,
+ "a",
),
- _$.controllable_input_checkedValue(
- _scope,
- 2,
- checkedValue,
- _checkedValueChange(_scope),
- "c",
- ),
- _$.data(_scope[3], checkedValue);
-});
-function _checkedValueChange(_scope) {
- return (_new_checkedValue3) => {
- _checkedValue(_scope, _new_checkedValue3);
- };
-}
-function _checkedValueChange2(_scope) {
- return (_new_checkedValue2) => {
- _checkedValue(_scope, _new_checkedValue2);
- };
-}
-function _checkedValueChange3(_scope) {
- return (_new_checkedValue) => {
- _checkedValue(_scope, _new_checkedValue);
- };
-}
-_$.effect("a3", (_scope) => {
+ _$.controllable_input_checkedValue(
+ _scope,
+ 1,
+ checkedValue,
+ _checkedValueChange,
+ "b",
+ ),
+ _$.controllable_input_checkedValue(
+ _scope,
+ 2,
+ checkedValue,
+ _checkedValueChange,
+ "c",
+ );
+ }),
+ _checkedValue = _$.state(
+ 4,
+ (_scope, checkedValue) => _$.data(_scope[3], checkedValue),
+ () => _expr_checkedValue__checkedValueChange,
+ );
+_$.effect("a1", (_scope) => {
_$.controllable_input_checkedValue_effect(_scope, 0),
_$.controllable_input_checkedValue_effect(_scope, 1),
_$.controllable_input_checkedValue_effect(_scope, 2);
}),
- _$.register("a2", _checkedValueChange),
- _$.register("a1", _checkedValueChange2),
- _$.register("a0", _checkedValueChange3),
+ _$.register("a0", function (_scope) {
+ return (_new_checkedValue) => {
+ _checkedValue(_scope, _new_checkedValue);
+ };
+ }),
init();
diff --git a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js
index 0c37ce515..7fafb5ea1 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js
+++ b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js
@@ -1,12 +1,17 @@
export const _template_ = " ";
export const _walks_ = /* get, over(1), get, over(1), get, over(1), next(1), get, out(1) */" b b bD l";
import * as _$ from "@marko/runtime-tags/debug/dom";
-const _checkedValue = /* @__PURE__ */_$.state("checkedValue", (_scope, checkedValue) => {
- _$.controllable_input_checkedValue(_scope, "#input/0", checkedValue, _checkedValueChange3(_scope), "a");
- _$.controllable_input_checkedValue(_scope, "#input/1", checkedValue, _checkedValueChange2(_scope), "b");
- _$.controllable_input_checkedValue(_scope, "#input/2", checkedValue, _checkedValueChange(_scope), "c");
- _$.data(_scope["#text/3"], checkedValue);
+const _expr_checkedValue__checkedValueChange = /* @__PURE__ */_$.intersection(2, _scope => {
+ const {
+ checkedValue,
+ _checkedValueChange
+ } = _scope;
+ _$.controllable_input_checkedValue(_scope, "#input/0", checkedValue, _checkedValueChange, "a");
+ _$.controllable_input_checkedValue(_scope, "#input/1", checkedValue, _checkedValueChange, "b");
+ _$.controllable_input_checkedValue(_scope, "#input/2", checkedValue, _checkedValueChange, "c");
});
+const _checkedValueChange2 = /* @__PURE__ */_$.value("_checkedValueChange", 0, () => _expr_checkedValue__checkedValueChange);
+const _checkedValue = /* @__PURE__ */_$.state("checkedValue", (_scope, checkedValue) => _$.data(_scope["#text/3"], checkedValue), () => _expr_checkedValue__checkedValueChange);
const _setup__effect = _$.effect("__tests__/template.marko_0", _scope => {
_$.controllable_input_checkedValue_effect(_scope, "#input/0");
_$.controllable_input_checkedValue_effect(_scope, "#input/1");
@@ -15,23 +20,12 @@ const _setup__effect = _$.effect("__tests__/template.marko_0", _scope => {
export function _setup_(_scope) {
_setup__effect(_scope);
_checkedValue(_scope, "a");
-}
-function _checkedValueChange(_scope) {
- return _new_checkedValue3 => {
- _checkedValue(_scope, _new_checkedValue3);
- };
-}
-function _checkedValueChange2(_scope) {
- return _new_checkedValue2 => {
- _checkedValue(_scope, _new_checkedValue2);
- };
+ _checkedValueChange2(_scope, _checkedValueChange3(_scope));
}
function _checkedValueChange3(_scope) {
return _new_checkedValue => {
_checkedValue(_scope, _new_checkedValue);
};
}
-_$.register("__tests__/template.marko_0/checkedValueChange_1", _checkedValueChange);
-_$.register("__tests__/template.marko_0/checkedValueChange_0", _checkedValueChange2);
-_$.register("__tests__/template.marko_0/checkedValueChange", _checkedValueChange3);
+_$.register("__tests__/template.marko_0/_checkedValueChange", _checkedValueChange3);
export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _template_, _walks_, _setup_);
\ No newline at end of file
diff --git a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js
index 5c60a83f7..d85d11ba3 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js
+++ b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js
@@ -2,16 +2,14 @@ import * as _$ from "@marko/runtime-tags/debug/html";
const _renderer = /* @__PURE__ */_$.createRenderer(input => {
const _scope0_id = _$.nextScopeId();
const checkedValue = "a";
- _$.write(` {
+ const _checkedValueChange = _$.register(_new_checkedValue => {
checkedValue = _new_checkedValue;
- }, "__tests__/template.marko_0/checkedValueChange", _scope0_id), "a")} type=radio>${_$.markResumeNode(_scope0_id, "#input/0")} {
- checkedValue = _new_checkedValue2;
- }, "__tests__/template.marko_0/checkedValueChange_0", _scope0_id), "b")} type=radio>${_$.markResumeNode(_scope0_id, "#input/1")} {
- checkedValue = _new_checkedValue3;
- }, "__tests__/template.marko_0/checkedValueChange_1", _scope0_id), "c")} type=radio>${_$.markResumeNode(_scope0_id, "#input/2")}${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}`);
+ }, "__tests__/template.marko_0/_checkedValueChange", _scope0_id);
+ _$.write(`${_$.markResumeNode(_scope0_id, "#input/0")}${_$.markResumeNode(_scope0_id, "#input/1")}${_$.markResumeNode(_scope0_id, "#input/2")}${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}`);
_$.writeEffect(_scope0_id, "__tests__/template.marko_0");
_$.debug(_$.writeScope(_scope0_id, {
- "checkedValue": checkedValue
+ "checkedValue": checkedValue,
+ "_checkedValueChange": _checkedValueChange
}), "__tests__/template.marko", 0, {
"checkedValue": "1:6"
});
diff --git a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md
index 78ca695a4..ffa259e27 100644
--- a/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md
+++ b/packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md
@@ -24,7 +24,7 @@