Skip to content

Commit 57a5daf

Browse files
rturnqrturnq
committed
fix: include constant bindings in function references for serialization
1 parent cb5f8ef commit 57a5daf

File tree

13 files changed

+800
-0
lines changed

13 files changed

+800
-0
lines changed

‎.changeset/grumpy-hands-join.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@marko/runtime-tags": patch
3+
---
4+
5+
Fix loop key serializing when used in a function

‎packages/runtime-tags/src/__tests__/fixtures/controllable-checked-many/__snapshots__/.name-cache.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"vars": {
3+
"props": {
4+
"$_": "t",
5+
"$init": "r",
6+
"$$for_content__checked": "o",
7+
"$$for_content__states__OR__state": "_",
8+
"$$for_content__states": "c",
9+
"$$states": "e",
10+
"$$checkedChange": "n",
11+
"$$valueChange": "a",
12+
"$$for_content__state": "i",
13+
"$$for_content__setup__script": "u",
14+
"$$for_content__setup": "m",
15+
"$$for_content__$params": "s",
16+
"$$for": "f"
17+
}
18+
}
19+
}

‎packages/runtime-tags/src/__tests__/fixtures/controllable-checked-many/__snapshots__/csr-sanitized.expected.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Render
2+
```html
3+
<input
4+
type="checkbox"
5+
/>
6+
<input
7+
type="checkbox"
8+
/>
9+
<input
10+
type="checkbox"
11+
/>
12+
<div>
13+
false,false,false
14+
</div>
15+
```
16+
17+
18+
# Render
19+
```js
20+
container.querySelectorAll("input").item(0).click();
21+
```
22+
```html
23+
<input
24+
checked=""
25+
type="checkbox"
26+
/>
27+
<input
28+
type="checkbox"
29+
/>
30+
<input
31+
type="checkbox"
32+
/>
33+
<div>
34+
true,false,false
35+
</div>
36+
```
37+
38+
39+
# Render
40+
```js
41+
container.querySelectorAll("input").item(1).click();
42+
```
43+
```html
44+
<input
45+
checked=""
46+
type="checkbox"
47+
/>
48+
<input
49+
checked=""
50+
type="checkbox"
51+
/>
52+
<input
53+
type="checkbox"
54+
/>
55+
<div>
56+
true,true,false
57+
</div>
58+
```
59+
60+
61+
# Render
62+
```js
63+
container.querySelectorAll("input").item(1).click();
64+
```
65+
```html
66+
<input
67+
checked=""
68+
type="checkbox"
69+
/>
70+
<input
71+
type="checkbox"
72+
/>
73+
<input
74+
type="checkbox"
75+
/>
76+
<div>
77+
true,false,false
78+
</div>
79+
```

‎packages/runtime-tags/src/__tests__/fixtures/controllable-checked-many/__snapshots__/csr.expected.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Render
2+
```html
3+
<!---->
4+
<input
5+
type="checkbox"
6+
/>
7+
<input
8+
type="checkbox"
9+
/>
10+
<input
11+
type="checkbox"
12+
/>
13+
<div>
14+
false,false,false
15+
</div>
16+
```
17+
18+
# Mutations
19+
```
20+
INSERT #comment, input0, input1, input2, div
21+
```
22+
23+
# Render
24+
```js
25+
container.querySelectorAll("input").item(0).click();
26+
```
27+
```html
28+
<!---->
29+
<input
30+
checked=""
31+
type="checkbox"
32+
/>
33+
<input
34+
type="checkbox"
35+
/>
36+
<input
37+
type="checkbox"
38+
/>
39+
<div>
40+
true,false,false
41+
</div>
42+
```
43+
44+
# Mutations
45+
```
46+
UPDATE div/#text "false,false,false" => "true,false,false"
47+
```
48+
49+
# Render
50+
```js
51+
container.querySelectorAll("input").item(1).click();
52+
```
53+
```html
54+
<!---->
55+
<input
56+
checked=""
57+
type="checkbox"
58+
/>
59+
<input
60+
checked=""
61+
type="checkbox"
62+
/>
63+
<input
64+
type="checkbox"
65+
/>
66+
<div>
67+
true,true,false
68+
</div>
69+
```
70+
71+
# Mutations
72+
```
73+
UPDATE div/#text "true,false,false" => "true,true,false"
74+
```
75+
76+
# Render
77+
```js
78+
container.querySelectorAll("input").item(1).click();
79+
```
80+
```html
81+
<!---->
82+
<input
83+
checked=""
84+
type="checkbox"
85+
/>
86+
<input
87+
type="checkbox"
88+
/>
89+
<input
90+
type="checkbox"
91+
/>
92+
<div>
93+
true,false,false
94+
</div>
95+
```
96+
97+
# Mutations
98+
```
99+
UPDATE div/#text "true,true,false" => "true,false,false"
100+
```

‎packages/runtime-tags/src/__tests__/fixtures/controllable-checked-many/__snapshots__/dom.expected/template.hydrate.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// size: 528 (min) 306 (brotli)
2+
const $for_content__checked = _._let(6, ($scope) =>
3+
_._attr_input_checked($scope, "a", $scope.g, $checkedChange($scope)),
4+
),
5+
$for_content__states__OR__state = _._or(3, ($scope) =>
6+
$for_content__checked($scope, $scope.c, $valueChange($scope)),
7+
),
8+
$for_content__states = _._for_closure(0, $for_content__states__OR__state),
9+
$for_content__state = _._const(2, $for_content__states__OR__state),
10+
$for_content__setup__script = _._script("a2", ($scope) =>
11+
_._attr_input_checked_script($scope, "a"),
12+
),
13+
$for_content__setup = ($scope) => {
14+
($for_content__states._($scope), $for_content__setup__script($scope));
15+
},
16+
$for_content__$params = ($scope, $params2) =>
17+
$for_content__state($scope, $params2[0]),
18+
$for = _._for_of(
19+
0,
20+
"<input type=checkbox>",
21+
" b",
22+
$for_content__setup,
23+
$for_content__$params,
24+
),
25+
$states = _._let(2, ($scope) => {
26+
(_._text($scope.b, $scope.c.join(",")),
27+
$for($scope, [$scope.c]),
28+
$for_content__states($scope));
29+
});
30+
function $checkedChange($scope) {
31+
return (_new_checked) => {
32+
$for_content__checked($scope, _new_checked);
33+
};
34+
}
35+
function $valueChange($scope) {
36+
return function (value) {
37+
if (void 0 === $scope.M) throw new Error("LoopKey is undefined");
38+
const newStates = [...$scope._.c];
39+
((newStates[$scope.M] = value), $states($scope._, newStates));
40+
};
41+
}
42+
(_._resume("a1", $checkedChange), _._resume("a0", $valueChange), init());

‎packages/runtime-tags/src/__tests__/fixtures/controllable-checked-many/__snapshots__/dom.expected/template.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
export const $template = "<!><!><div> </div>";
2+
export const $walks = /* over(1), replace, over(1), next(1), get, out(1) */"b%bD l";
3+
import * as _ from "@marko/runtime-tags/debug/dom";
4+
const $for_content__checked = /* @__PURE__ */_._let("checked/6", $scope => _._attr_input_checked($scope, "#input/0", $scope.checked, $checkedChange($scope)));
5+
const $for_content__states__OR__state = /* @__PURE__ */_._or(3, $scope => $for_content__checked($scope, $scope.state, $valueChange($scope)));
6+
const $for_content__states = /* @__PURE__ */_._for_closure("#text/0", $for_content__states__OR__state);
7+
const $for_content__state = /* @__PURE__ */_._const("state", $for_content__states__OR__state);
8+
const $for_content__setup__script = _._script("__tests__/template.marko_1", $scope => _._attr_input_checked_script($scope, "#input/0"));
9+
const $for_content__setup = $scope => {
10+
$for_content__states._($scope);
11+
$for_content__setup__script($scope);
12+
};
13+
const $for_content__$params = ($scope, $params2) => $for_content__state($scope, $params2[0]);
14+
const $for = /* @__PURE__ */_._for_of("#text/0", "<input type=checkbox>", /* get, over(1) */" b", $for_content__setup, $for_content__$params);
15+
const $states = /* @__PURE__ */_._let("states/2", $scope => {
16+
_._text($scope["#text/1"], $scope.states.join(','));
17+
$for($scope, [$scope.states]);
18+
$for_content__states($scope);
19+
});
20+
export function $setup($scope) {
21+
$states($scope, [false, false, false]);
22+
}
23+
function $checkedChange($scope) {
24+
return _new_checked => {
25+
$for_content__checked($scope, _new_checked);
26+
};
27+
}
28+
function $valueChange($scope) {
29+
return function (value) {
30+
if ($scope["#LoopKey"] === undefined) {
31+
throw new Error('LoopKey is undefined');
32+
}
33+
const newStates = [...$scope._.states];
34+
newStates[$scope["#LoopKey"]] = value;
35+
$states($scope._, newStates);
36+
};
37+
}
38+
_._resume("__tests__/template.marko_1/checkedChange", $checkedChange);
39+
_._resume("__tests__/template.marko_1/valueChange", $valueChange);
40+
export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

‎packages/runtime-tags/src/__tests__/fixtures/controllable-checked-many/__snapshots__/html.expected/template.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as _ from "@marko/runtime-tags/debug/html";
2+
export default _._template("__tests__/template.marko", input => {
3+
_._scope_reason();
4+
const $scope0_id = _._scope_id();
5+
let states = [false, false, false];
6+
_._for_of(states, (state, i) => {
7+
const $scope1_id = _._scope_id();
8+
let checked = state;
9+
_._html(`<input${_._attr_input_checked($scope1_id, "#input/0", checked, _._resume(_new_checked => {
10+
checked = _new_checked;
11+
}, "__tests__/template.marko_1/checkedChange", $scope1_id))} type=checkbox>${_._el_resume($scope1_id, "#input/0")}`);
12+
_._script($scope1_id, "__tests__/template.marko_1");
13+
_._scope($scope1_id, {
14+
"#LoopKey": i,
15+
checked,
16+
_: _._scope_with_id($scope0_id),
17+
"TagVariableChange:checked": _._resume(function (value) {
18+
if (i === undefined) {
19+
throw new Error('LoopKey is undefined');
20+
}
21+
const newStates = [...states];
22+
newStates[i] = value;
23+
states = newStates;
24+
}, "__tests__/template.marko_1/valueChange", $scope1_id) || void 0
25+
}, "__tests__/template.marko", "2:2", {
26+
"#LoopKey": "2:13",
27+
checked: "3:8"
28+
});
29+
}, 0, $scope0_id, "#text/0", /* states */1, /* states */1, /* states */1, 0, 1);
30+
_._html(`<div>${_._escape(states.join(','))}${_._el_resume($scope0_id, "#text/1")}</div>`);
31+
_._scope($scope0_id, {
32+
states
33+
}, "__tests__/template.marko", 0, {
34+
states: "1:6"
35+
});
36+
_._resume_branch($scope0_id);
37+
});

0 commit comments

Comments
 (0)