archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

fix: share bound attr change handler

Browse Source
This commit is contained in:
dpiercey 2025-02-06 14:53:08 -07:00 committed by Dylan Piercey
parent 14ffe18ddf
commit e69c13eabf
35 changed files with 310 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/serious-dryers-relate.md Normal file
View File

@ -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.

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-spread/__snapshots__/.name-cache.json
View File

@ -6,7 +6,9 @@
"$_input__effect": "a",
"$_input_": "r",
"$_checkedChange": "o",
"$_checked": "m"
"$_checked": "m",
"$_expr_checked__checkedChange": "n",
"$_checked2": "c"
}
}
}

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/.name-cache.json
View File

@ -6,7 +6,9 @@
"$_checkedValueChange": "c",
"$_checkedValueChange2": "a",
"$_checkedValueChange3": "l",
"$_checkedValue": "o"
"$_checkedValue": "o",
"$_expr_checkedValue__checkedValueChange": "n",
"$_checkedValue2": "r"
}
}
}

72
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.hydrate.js
View File

@ -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();

30
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/dom.expected/template.js
View File

@ -1,12 +1,17 @@
export const _template_ = "<input type=radio><input type=radio><input type=radio><span> </span>";
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_);

12
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/html.expected/template.js
View File

@ -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(`<input${_$.controllable_input_checkedValue(_scope0_id, "#input/0", checkedValue, _$.register(_new_checkedValue => {
const _checkedValueChange = _$.register(_new_checkedValue => {
checkedValue = _new_checkedValue;
}, "__tests__/template.marko_0/checkedValueChange", _scope0_id), "a")} type=radio>${_$.markResumeNode(_scope0_id, "#input/0")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/1", checkedValue, _$.register(_new_checkedValue2 => {
checkedValue = _new_checkedValue2;
}, "__tests__/template.marko_0/checkedValueChange_0", _scope0_id), "b")} type=radio>${_$.markResumeNode(_scope0_id, "#input/1")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/2", checkedValue, _$.register(_new_checkedValue3 => {
checkedValue = _new_checkedValue3;
}, "__tests__/template.marko_0/checkedValueChange_1", _scope0_id), "c")} type=radio>${_$.markResumeNode(_scope0_id, "#input/2")}<span>${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}</span>`);
}, "__tests__/template.marko_0/_checkedValueChange", _scope0_id);
_$.write(`<input${_$.controllable_input_checkedValue(_scope0_id, "#input/0", checkedValue, _checkedValueChange, "a")} type=radio>${_$.markResumeNode(_scope0_id, "#input/0")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/1", checkedValue, _checkedValueChange, "b")} type=radio>${_$.markResumeNode(_scope0_id, "#input/1")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/2", checkedValue, _checkedValueChange, "c")} type=radio>${_$.markResumeNode(_scope0_id, "#input/2")}<span>${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}</span>`);
_$.writeEffect(_scope0_id, "__tests__/template.marko_0");
_$.debug(_$.writeScope(_scope0_id, {
"checkedValue": checkedValue
"checkedValue": checkedValue,
"_checkedValueChange": _checkedValueChange
}), "__tests__/template.marko", 0, {
"checkedValue": "1:6"
});

8
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/resume.expected.md
View File

@ -24,7 +24,7 @@
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>
@ -60,7 +60,7 @@ container.querySelectorAll(`input`)[1].click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>
@ -100,7 +100,7 @@ container.querySelectorAll(`input`)[2].click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>
@ -140,7 +140,7 @@ container.querySelectorAll(`input`)[0].click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/__snapshots__/ssr.expected.md
View File

@ -1,6 +1,6 @@
# Write
```html
<input value=a checked type=radio><!--M_*1 #input/0--><input value=b type=radio><!--M_*1 #input/1--><input value=c type=radio><!--M_*1 #input/2--><span>a<!--M_*1 #text/3--></span><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()</script>
<input value=a checked type=radio><!--M_*1 #input/0--><input value=b type=radio><!--M_*1 #input/1--><input value=c type=radio><!--M_*1 #input/2--><span>a<!--M_*1 #text/3--></span><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()</script>
```
# Render End
@ -29,7 +29,7 @@
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.b={1:_.a={"#input/0=":1,"#input/1=":1,"#input/2=":1,checkedValue:"a"}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.b),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>

1
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-value/template.marko
View File

@ -1,4 +1,5 @@
<let/checkedValue = "a"/>
<input type="radio" checkedValue:=checkedValue value="a"/>
<input type="radio" checkedValue:=checkedValue value="b"/>
<input type="radio" checkedValue:=checkedValue value="c"/>

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/.name-cache.json
View File

@ -8,7 +8,9 @@
"$_checkedValueChange": "i",
"$_checkedValueChange2": "n",
"$_checkedValueChange3": "r",
"$_checkedValue": "u"
"$_checkedValue": "u",
"$_expr_checkedValue__checkedValueChange": "o",
"$_checkedValue2": "h"
}
}
}

46
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.hydrate.js
View File

@ -1,25 +1,25 @@
// size: 558 (min) 240 (brotli)
// size: 494 (min) 238 (brotli)
const _input__effect = _$.effect("a0", (_scope) => _$.attrsEvents(_scope, 0)),
_input_ = _$.value(2, (_scope, input) => {
_$.attrs(_scope, 0, { type: "checkbox", ...input }), _input__effect(_scope);
}),
_checkedValue = _$.state(
4,
(_scope, checkedValue) => {
_$.data(_scope[3], checkedValue),
_input_(_scope[0], {
checkedValue: checkedValue,
checkedValueChange: _checkedValueChange(_scope),
value: "a",
}),
_expr_checkedValue__checkedValueChange = _$.intersection(
2,
(_scope) => {
const { 4: checkedValue, 5: _checkedValueChange } = _scope;
_input_(_scope[0], {
checkedValue: checkedValue,
checkedValueChange: _checkedValueChange,
value: "a",
}),
_input_(_scope[1], {
checkedValue: checkedValue,
checkedValueChange: _checkedValueChange2(_scope),
checkedValueChange: _checkedValueChange,
value: "b",
}),
_input_(_scope[2], {
checkedValue: checkedValue,
checkedValueChange: _checkedValueChange3(_scope),
checkedValueChange: _checkedValueChange,
value: "c",
});
},
@ -29,23 +29,15 @@ const _input__effect = _$.effect("a0", (_scope) => _$.attrsEvents(_scope, 0)),
_$.inChild(1, _input_),
_$.inChild(2, _input_),
]),
),
_checkedValue = _$.state(
4,
(_scope, checkedValue) => _$.data(_scope[3], checkedValue),
() => _expr_checkedValue__checkedValueChange,
);
function _checkedValueChange(_scope) {
_$.register("b0", function (_scope) {
return (_new_checkedValue) => {
_checkedValue(_scope, _new_checkedValue);
};
}
function _checkedValueChange2(_scope) {
return (_new_checkedValue2) => {
_checkedValue(_scope, _new_checkedValue2);
};
}
function _checkedValueChange3(_scope) {
return (_new_checkedValue3) => {
_checkedValue(_scope, _new_checkedValue3);
};
}
_$.register("b0", _checkedValueChange),
_$.register("b1", _checkedValueChange2),
_$.register("b2", _checkedValueChange3),
}),
init();

32
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/dom.expected/template.js
View File

@ -2,46 +2,40 @@ export const _template_ = `${_checkbox_template}${_checkbox_template}${_checkbox
export const _walks_ = /* beginChild, _checkbox_walks, endChild, beginChild, _checkbox_walks, endChild, beginChild, _checkbox_walks, endChild, next(1), get, out(1) */`/${_checkbox_walks}&/${_checkbox_walks}&/${_checkbox_walks}&D l`;
import { _setup_ as _checkbox, _input_ as _checkbox_input, _template_ as _checkbox_template, _walks_ as _checkbox_walks } from "./tags/checkbox.marko";
import * as _$ from "@marko/runtime-tags/debug/dom";
const _checkedValue = /* @__PURE__ */_$.state("checkedValue", (_scope, checkedValue) => {
_$.data(_scope["#text/3"], checkedValue);
const _expr_checkedValue__checkedValueChange = /* @__PURE__ */_$.intersection(2, _scope => {
const {
checkedValue,
_checkedValueChange
} = _scope;
_checkbox_input(_scope["#childScope/0"], {
checkedValue: checkedValue,
checkedValueChange: _checkedValueChange(_scope),
checkedValueChange: _checkedValueChange,
value: "a"
});
_checkbox_input(_scope["#childScope/1"], {
checkedValue: checkedValue,
checkedValueChange: _checkedValueChange2(_scope),
checkedValueChange: _checkedValueChange,
value: "b"
});
_checkbox_input(_scope["#childScope/2"], {
checkedValue: checkedValue,
checkedValueChange: _checkedValueChange3(_scope),
checkedValueChange: _checkedValueChange,
value: "c"
});
}, () => _$.intersections([/* @__PURE__ */_$.inChild("#childScope/0", _checkbox_input), /* @__PURE__ */_$.inChild("#childScope/1", _checkbox_input), /* @__PURE__ */_$.inChild("#childScope/2", _checkbox_input)]));
const _checkedValueChange2 = /* @__PURE__ */_$.value("_checkedValueChange", 0, () => _expr_checkedValue__checkedValueChange);
const _checkedValue = /* @__PURE__ */_$.state("checkedValue", (_scope, checkedValue) => _$.data(_scope["#text/3"], checkedValue), () => _expr_checkedValue__checkedValueChange);
export function _setup_(_scope) {
_checkbox(_scope["#childScope/0"]);
_checkbox(_scope["#childScope/1"]);
_checkbox(_scope["#childScope/2"]);
_checkedValue(_scope, ["a", "b"]);
_checkedValueChange2(_scope, _checkedValueChange3(_scope));
}
function _checkedValueChange(_scope) {
function _checkedValueChange3(_scope) {
return _new_checkedValue => {
_checkedValue(_scope, _new_checkedValue);
};
}
function _checkedValueChange2(_scope) {
return _new_checkedValue2 => {
_checkedValue(_scope, _new_checkedValue2);
};
}
function _checkedValueChange3(_scope) {
return _new_checkedValue3 => {
_checkedValue(_scope, _new_checkedValue3);
};
}
_$.register("__tests__/template.marko_0/checkedValueChange", _checkedValueChange);
_$.register("__tests__/template.marko_0/checkedValueChange_0", _checkedValueChange2);
_$.register("__tests__/template.marko_0/checkedValueChange_1", _checkedValueChange3);
_$.register("__tests__/template.marko_0/_checkedValueChange", _checkedValueChange3);
export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _template_, _walks_, _setup_);

16
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/html.expected/template.js
View File

@ -3,32 +3,30 @@ import * as _$ from "@marko/runtime-tags/debug/html";
const _renderer = /* @__PURE__ */_$.createRenderer(input => {
const _scope0_id = _$.nextScopeId();
const checkedValue = ["a", "b"];
const _checkedValueChange = _$.register(_new_checkedValue => {
checkedValue = _new_checkedValue;
}, "__tests__/template.marko_0/_checkedValueChange", _scope0_id);
const _childScope = _$.peekNextScope();
_checkbox({
checkedValue: checkedValue,
checkedValueChange: _$.register(_new_checkedValue => {
checkedValue = _new_checkedValue;
}, "__tests__/template.marko_0/checkedValueChange", _scope0_id),
checkedValueChange: _checkedValueChange,
value: "a"
});
const _childScope2 = _$.peekNextScope();
_checkbox({
checkedValue: checkedValue,
checkedValueChange: _$.register(_new_checkedValue2 => {
checkedValue = _new_checkedValue2;
}, "__tests__/template.marko_0/checkedValueChange_0", _scope0_id),
checkedValueChange: _checkedValueChange,
value: "b"
});
const _childScope3 = _$.peekNextScope();
_checkbox({
checkedValue: checkedValue,
checkedValueChange: _$.register(_new_checkedValue3 => {
checkedValue = _new_checkedValue3;
}, "__tests__/template.marko_0/checkedValueChange_1", _scope0_id),
checkedValueChange: _checkedValueChange,
value: "c"
});
_$.write(`<span>${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}</span>`);
_$.debug(_$.writeScope(_scope0_id, {
"_checkedValueChange": _checkedValueChange,
"#childScope/0": _$.writeExistingScope(_childScope),
"#childScope/1": _$.writeExistingScope(_childScope2),
"#childScope/2": _$.writeExistingScope(_childScope3)

8
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/resume.expected.md
View File

@ -25,7 +25,7 @@
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.b["#input/0;"]=_.d.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.e["#input/0;"]=_.f.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.a._checkedValueChange=_.b["#input/0;"]=_.d.checkedValueChange=_.e["#input/0;"]=_.f.checkedValueChange=_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
</script>
</body>
</html>
@ -61,7 +61,7 @@ container.querySelector("input").click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.b["#input/0;"]=_.d.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.e["#input/0;"]=_.f.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.a._checkedValueChange=_.b["#input/0;"]=_.d.checkedValueChange=_.e["#input/0;"]=_.f.checkedValueChange=_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
</script>
</body>
</html>
@ -102,7 +102,7 @@ container.querySelector("input").click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.b["#input/0;"]=_.d.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.e["#input/0;"]=_.f.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.a._checkedValueChange=_.b["#input/0;"]=_.d.checkedValueChange=_.e["#input/0;"]=_.f.checkedValueChange=_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
</script>
</body>
</html>
@ -142,7 +142,7 @@ container.querySelector("input").click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.b["#input/0;"]=_.d.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.e["#input/0;"]=_.f.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.a._checkedValueChange=_.b["#input/0;"]=_.d.checkedValueChange=_.e["#input/0;"]=_.f.checkedValueChange=_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
</script>
</body>
</html>

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values-spread/__snapshots__/ssr.expected.md
View File

@ -1,6 +1,6 @@
# Write
```html
<input value=a checked type=checkbox><!--M_*2 #input/0--><input value=b checked type=checkbox><!--M_*3 #input/0--><input value=c type=checkbox><!--M_*4 #input/0--><span>a,b<!--M_*1 #text/3--></span><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.b["#input/0;"]=_.d.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.e["#input/0;"]=_.f.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()</script>
<input value=a checked type=checkbox><!--M_*2 #input/0--><input value=b checked type=checkbox><!--M_*3 #input/0--><input value=c type=checkbox><!--M_*4 #input/0--><span>a,b<!--M_*1 #text/3--></span><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.a._checkedValueChange=_.b["#input/0;"]=_.d.checkedValueChange=_.e["#input/0;"]=_.f.checkedValueChange=_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()</script>
```
# Render End
@ -30,7 +30,7 @@
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.b["#input/0;"]=_.d.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.e["#input/0;"]=_.f.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.i={1:_.a={"#childScope/0":_.b={"#input/0=":1,"#input/0:":_.c=["a","b"],input:_.d={checkedValue:_.c,value:"a"}},"#childScope/1":_.e={"#input/0=":1,"#input/0:":_.c,input:_.f={checkedValue:_.c,value:"b"}},"#childScope/2":_.g={"#input/0=":1,"#input/0:":_.c,input:_.h={checkedValue:_.c,value:"c"}}},2:_.b,3:_.e,4:_.g},_.a._checkedValueChange=_.b["#input/0;"]=_.d.checkedValueChange=_.e["#input/0;"]=_.f.checkedValueChange=_.g["#input/0;"]=_.h.checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.i),2,"__tests__/tags/checkbox.marko_0_input",3,"__tests__/tags/checkbox.marko_0_input",4,"__tests__/tags/checkbox.marko_0_input",0];M._.w()
</script>
</body>
</html>

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/.name-cache.json
View File

@ -6,7 +6,9 @@
"$_checkedValueChange": "c",
"$_checkedValueChange2": "a",
"$_checkedValueChange3": "l",
"$_checkedValue": "o"
"$_checkedValue": "o",
"$_expr_checkedValue__checkedValueChange": "n",
"$_checkedValue2": "r"
}
}
}

72
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.hydrate.js
View File

@ -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();

30
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/dom.expected/template.js
View File

@ -1,12 +1,17 @@
export const _template_ = "<input type=checkbox><input type=checkbox><input type=checkbox><span> </span>";
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", "b"]);
}
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_);

12
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/html.expected/template.js
View File

@ -2,16 +2,14 @@ import * as _$ from "@marko/runtime-tags/debug/html";
const _renderer = /* @__PURE__ */_$.createRenderer(input => {
const _scope0_id = _$.nextScopeId();
const checkedValue = ["a", "b"];
_$.write(`<input${_$.controllable_input_checkedValue(_scope0_id, "#input/0", checkedValue, _$.register(_new_checkedValue => {
const _checkedValueChange = _$.register(_new_checkedValue => {
checkedValue = _new_checkedValue;
}, "__tests__/template.marko_0/checkedValueChange", _scope0_id), "a")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/0")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/1", checkedValue, _$.register(_new_checkedValue2 => {
checkedValue = _new_checkedValue2;
}, "__tests__/template.marko_0/checkedValueChange_0", _scope0_id), "b")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/1")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/2", checkedValue, _$.register(_new_checkedValue3 => {
checkedValue = _new_checkedValue3;
}, "__tests__/template.marko_0/checkedValueChange_1", _scope0_id), "c")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/2")}<span>${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}</span>`);
}, "__tests__/template.marko_0/_checkedValueChange", _scope0_id);
_$.write(`<input${_$.controllable_input_checkedValue(_scope0_id, "#input/0", checkedValue, _checkedValueChange, "a")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/0")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/1", checkedValue, _checkedValueChange, "b")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/1")}<input${_$.controllable_input_checkedValue(_scope0_id, "#input/2", checkedValue, _checkedValueChange, "c")} type=checkbox>${_$.markResumeNode(_scope0_id, "#input/2")}<span>${_$.escapeXML(checkedValue)}${_$.markResumeNode(_scope0_id, "#text/3")}</span>`);
_$.writeEffect(_scope0_id, "__tests__/template.marko_0");
_$.debug(_$.writeScope(_scope0_id, {
"checkedValue": checkedValue
"checkedValue": checkedValue,
"_checkedValueChange": _checkedValueChange
}), "__tests__/template.marko", 0, {
"checkedValue": "1:6"
});

8
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/resume.expected.md
View File

@ -25,7 +25,7 @@
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>
@ -61,7 +61,7 @@ container.querySelectorAll(`input`)[1].click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>
@ -102,7 +102,7 @@ container.querySelectorAll(`input`)[2].click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>
@ -142,7 +142,7 @@ container.querySelectorAll(`input`)[0].click();
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked-values/__snapshots__/ssr.expected.md
View File

@ -1,6 +1,6 @@
# Write
```html
<input value=a checked type=checkbox><!--M_*1 #input/0--><input value=b checked type=checkbox><!--M_*1 #input/1--><input value=c type=checkbox><!--M_*1 #input/2--><span>a,b<!--M_*1 #text/3--></span><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()</script>
<input value=a checked type=checkbox><!--M_*1 #input/0--><input value=b checked type=checkbox><!--M_*1 #input/1--><input value=c type=checkbox><!--M_*1 #input/2--><span>a,b<!--M_*1 #text/3--></span><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()</script>
```
# Render End
@ -30,7 +30,7 @@
<!--M_*1 #text/3-->
</span>
<script>
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_._["__tests__/template.marko_0/checkedValueChange"](_.a),_.a["#input/1;"]=_._["__tests__/template.marko_0/checkedValueChange_0"](_.a),_.a["#input/2;"]=_._["__tests__/template.marko_0/checkedValueChange_1"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
WALKER_RUNTIME("M")("_");M._.r=[_=&gt;(_.c={1:_.a={"#input/0=":1,"#input/0:":_.b=["a","b"],"#input/1=":1,"#input/1:":_.b,"#input/2=":1,"#input/2:":_.b,checkedValue:_.b}},_.a["#input/0;"]=_.a["#input/1;"]=_.a["#input/2;"]=_.a._checkedValueChange=_._["__tests__/template.marko_0/_checkedValueChange"](_.a),_.c),1,"__tests__/template.marko_0",0];M._.w()
</script>
</body>
</html>

4
packages/runtime-tags/src/__tests__/fixtures/controllable-checked/__snapshots__/.name-cache.json
View File

@ -4,7 +4,9 @@
"$_$": "t",
"$init": "e",
"$_checkedChange": "o",
"$_checked": "r"
"$_checked": "r",
"$_expr_checked__checkedChange": "n",
"$_checked2": "a"
}
}
}

4
packages/runtime-tags/src/__tests__/fixtures/controllable-input-value/__snapshots__/.name-cache.json
View File

@ -4,7 +4,9 @@
"$_$": "t",
"$init": "a",
"$_valueChange": "o",
"$_value": "e"
"$_value": "e",
"$_expr_value__valueChange": "r",
"$_value2": "n"
}
}
}

4
packages/runtime-tags/src/__tests__/fixtures/controllable-textarea-value/__snapshots__/.name-cache.json
View File

@ -4,7 +4,9 @@
"$_$": "t",
"$init": "a",
"$_valueChange": "e",
"$_value": "o"
"$_value": "o",
"$_expr_value__valueChange": "r",
"$_value2": "n"
}
}
}

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

@ -6,7 +6,8 @@
"$_value": "a",
"$_count$myTag_content_effect": "e",
"$_count$myTag_content": "n",
"$_setup$myTag_content": "i"
"$_setup$myTag_content": "i",
"$_value2": "o"
}
}
}

4
packages/runtime-tags/src/__tests__/fixtures/custom-tag-var-assignment/__snapshots__/.name-cache.json
View File

@ -5,7 +5,9 @@
"$init": "a",
"$_x_effect": "n",
"$_x": "r",
"$_count_effect": "i"
"$_count_effect": "i",
"$_x2_effect": "o",
"$_x2": "e"
}
}
}

6
packages/runtime-tags/src/__tests__/fixtures/dynamic-tag-var-assignment/__snapshots__/.name-cache.json
View File

@ -7,7 +7,11 @@
"$_x_effect": "r",
"$_x": "e",
"$_setup_": "i",
"$Counter": "o"
"$Counter": "o",
"$_xChange2": "c",
"$_x2_effect": "g",
"$_x2": "u",
"$_xChange3": "f"
}
}
}

4
packages/runtime-tags/src/__tests__/fixtures/error-let-invalid-binding/__snapshots__/dom.expected/template.error.txt
View File

@ -1,5 +1,5 @@
at packages/runtime-tags/src/__tests__/fixtures/error-let-invalid-binding/template.marko:1:11
at packages/runtime-tags/src/__tests__/fixtures/error-let-invalid-binding/template.marko:1:13
> 1 | <let/count:=1/>
| ^^^ Attributes may only be bound to identifiers or member expressions
| ^ Attributes may only be bound to identifiers or member expressions
2 |

4
packages/runtime-tags/src/__tests__/fixtures/error-let-invalid-binding/__snapshots__/html.expected/template.error.txt
View File

@ -1,5 +1,5 @@
at packages/runtime-tags/src/__tests__/fixtures/error-let-invalid-binding/template.marko:1:11
at packages/runtime-tags/src/__tests__/fixtures/error-let-invalid-binding/template.marko:1:13
> 1 | <let/count:=1/>
| ^^^ Attributes may only be bound to identifiers or member expressions
| ^ Attributes may only be bound to identifiers or member expressions
2 |

4
packages/runtime-tags/src/__tests__/fixtures/let-tag-controllable-child/__snapshots__/.name-cache.json
View File

@ -18,7 +18,9 @@
"$_source": "d",
"$_expr_input_value_input_valueChange": "g",
"$_otherState_effect": "h",
"$_state_effect": "k"
"$_state_effect": "k",
"$_expr_source__sourceChange": "C",
"$_source2": "p"
}
}
}

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

@ -14,7 +14,8 @@
"$_count2$1": "f",
"$_input_count2_": "u",
"$_expr_input_count2Change_input_count": "d",
"$_expr_input_count1Change_input_count": "l"
"$_expr_input_count1Change_input_count": "l",
"$_count3": "g"
}
}
}

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

@ -40,8 +40,8 @@ const _expr_input_count2_input_count2Change = _$.intersection(2, (_scope) => {
() => _$.inChild(0, _input_count1_),
);
_$.register("b0", function (_scope) {
return (_new_count) => {
_count(_scope, _new_count);
return (_new_count1) => {
_count(_scope, _new_count1);
};
}),
_$.register("b1", function (_scope) {

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

@ -18,8 +18,8 @@ export function _setup_(_scope) {
_counters_input_count2Change(_scope["#childScope/0"], _count2Change(_scope));
}
function _count1Change(_scope) {
return _new_count => {
_count(_scope, _new_count);
return _new_count1 => {
_count(_scope, _new_count1);
};
}
function _count2Change(_scope) {

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

@ -7,8 +7,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer(input => {
const _childScope = _$.peekNextScope();
_counters({
count1: count1,
count1Change: _$.register(_new_count => {
count1 = _new_count;
count1Change: _$.register(_new_count1 => {
count1 = _new_count1;
}, "__tests__/template.marko_0/count1Change", _scope0_id),
count2: count2,
count2Change: _$.register(_new_count2 => {

137
packages/runtime-tags/src/translator/visitors/tag/index.ts
View File

@ -5,6 +5,7 @@ import {
type Plugin,
} from "@marko/compiler/babel-utils";
import { getMarkoRoot, isMarko } from "../../util/get-root";
import { isOutputHTML } from "../../util/marko-config";
import * as hooks from "../../util/plugin-hooks";
import analyzeTagNameType, { TagNameType } from "../../util/tag-name-type";
@ -16,6 +17,10 @@ import DynamicTag from "./dynamic-tag";
import NativeTag from "./native-tag";
const TAG_NAME_IDENTIFIER_REG = /^[A-Z][a-zA-Z0-9_$]*$/;
const BINDING_CHANGE_HANDLER = new WeakMap<
t.Identifier,
t.MarkoAttribute | t.Identifier
>();
export default {
transform: {
@ -39,19 +44,7 @@ export default {
const attr = attributes[i];
if (t.isMarkoAttribute(attr) && attr.bound) {
attr.bound = false;
const changeValue = getChangeHandler(tag, attr);
if (changeValue === null) {
throw tag.hub.buildError(
attr,
"Attributes may only be bound to identifiers or member expressions",
);
}
attributes.splice(
++i,
0,
t.markoAttribute(attr.name + "Change", changeValue),
);
attributes.splice(++i, 0, getChangeHandler(tag, attr));
crawl = true;
}
@ -208,33 +201,109 @@ export default {
function getChangeHandler(
tag: t.NodePath<t.MarkoTag>,
attr: t.MarkoAttribute | t.MarkoSpreadAttribute,
) {
attr: t.MarkoAttribute,
): t.MarkoAttribute {
const attrName = attr.name;
const changeAttrName = attrName + "Change";
if (t.isIdentifier(attr.value)) {
const valueId = tag.scope.generateUidIdentifier("new_" + attr.value.name);
return t.arrowFunctionExpression(
[valueId],
t.blockStatement([
t.expressionStatement(
t.assignmentExpression("=", t.cloneNode(attr.value), valueId),
const binding = tag.scope.getBinding(attr.value.name);
if (!binding)
return t.markoAttribute(
changeAttrName,
buildChangeHandlerFunction(attr.value),
);
const existingChangedAttr = BINDING_CHANGE_HANDLER.get(binding.identifier);
if (!existingChangedAttr) {
const changeHandlerAttr = t.markoAttribute(
changeAttrName,
buildChangeHandlerFunction(attr.value),
);
BINDING_CHANGE_HANDLER.set(binding.identifier, changeHandlerAttr);
return changeHandlerAttr;
}
if (existingChangedAttr.type === "Identifier") {
return t.markoAttribute(
changeAttrName,
withPreviousLocation(
t.identifier(existingChangedAttr.name),
attr.value,
),
]),
);
}
const markoRoot = isMarko(binding.path)
? binding.path
: getMarkoRoot(binding.path);
if (!(markoRoot?.isMarkoTag() || markoRoot?.isMarkoTagBody())) {
throw tag.hub.buildError(attr.value, "Unable to bind to value.");
}
const changeHandlerId = markoRoot.scope.generateUid(changeAttrName);
const changeHandlerConst = t.markoTag(
t.stringLiteral("const"),
[t.markoAttribute("value", existingChangedAttr.value, null, null, true)],
t.markoTagBody([]),
null,
t.identifier(changeHandlerId),
);
BINDING_CHANGE_HANDLER.set(
binding.identifier,
(existingChangedAttr.value = t.identifier(changeHandlerId)),
);
if (markoRoot.isMarkoTag()) {
markoRoot.insertAfter(changeHandlerConst);
} else {
markoRoot.unshiftContainer("body", changeHandlerConst);
}
return t.markoAttribute(
changeAttrName,
withPreviousLocation(t.identifier(changeHandlerId), attr.value),
);
} else if (t.isMemberExpression(attr.value)) {
const prop = attr.value.property;
if (t.isPrivateName(prop)) return null;
if (t.isIdentifier(prop)) {
return t.memberExpression(
t.cloneNode(attr.value.object),
t.identifier(prop.name + "Change"),
);
} else {
return t.memberExpression(
t.cloneNode(attr.value.object),
t.binaryExpression("+", t.cloneNode(prop), t.stringLiteral("Change")),
true,
if (!t.isPrivateName(attr.value.property)) {
return t.markoAttribute(
changeAttrName,
t.memberExpression(
t.cloneNode(attr.value.object),
prop.type === "Identifier"
? withPreviousLocation(t.identifier(prop.name + "Change"), prop)
: t.binaryExpression(
"+",
t.cloneNode(prop),
t.stringLiteral("Change"),
),
prop.type !== "Identifier",
),
);
}
}
return null;
throw tag.hub.buildError(
attr.value,
"Attributes may only be bound to identifiers or member expressions",
);
}
function buildChangeHandlerFunction(id: t.Identifier) {
const newId = "_new_" + id.name;
return t.arrowFunctionExpression(
[withPreviousLocation(t.identifier(newId), id)],
t.blockStatement([
t.expressionStatement(
t.assignmentExpression(
"=",
withPreviousLocation(t.identifier(id.name), id),
withPreviousLocation(t.identifier(newId), id),
),
),
]),
);
}