Skip to content

Commit 03f9f23

Browse files
vwongvwong
authored
feat: optimise serialisation of static content (#3183)
* feat: optimise serialisation of static content
1 parent 1688332 commit 03f9f23

26 files changed

Lines changed: 356 additions & 11 deletions

File tree

‎.changeset/silent-parrots-strive.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@marko/runtime-tags": patch
3+
"marko": patch
4+
---
5+
6+
Optimise serialisation of static children

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/dom.bundle.debug.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// tags/sections.marko
2+
const $template$1 = "<!><!><!>";
3+
const $walks$1 = "b%c";
4+
const $setup$1 = () => {};
5+
const $if_content__dynamicTag = /* @__PURE__ */ _dynamic_tag("#text/0");
6+
const $if_content__content = /* @__PURE__ */ _if_closure("#text/0", 0, ($scope) => $if_content__dynamicTag($scope, $scope._.content));
7+
const $if_content__setup = $if_content__content;
8+
const $for_content__if = /* @__PURE__ */ _if("#text/0", "<!><!><!>", "b%c", $if_content__setup);
9+
const $for_content__content = /* @__PURE__ */ _const("content", ($scope) => {
10+
$for_content__if($scope, $scope.content ? 0 : 1);
11+
$if_content__content($scope);
12+
});
13+
const $for_content__$params = ($scope, $params2) => $for_content__$temp($scope, $params2?.[0]);
14+
const $for_content__$temp = ($scope, $temp) => $for_content__content($scope, $temp.content);
15+
const $for = /* @__PURE__ */ _for_of("#text/0", "<!><!><!>", "b%c", 0, $for_content__$params);
16+
const $input_section = ($scope, input_section) => $for($scope, [input_section]);
17+
const $input = ($scope, input) => $input_section($scope, input.section);
18+
var sections_default = /* @__PURE__ */ _template("__tests__/tags/sections.marko", $template$1, "b%c", $setup$1, $input);
19+
20+
// template.marko
21+
const $template = /* @__PURE__ */ ((_w0) => `<!>${_w0}<!>`)($template$1);
22+
const $walks = /* @__PURE__ */ ((_w0) => `b/${_w0}&b`)("b%c");
23+
const $section_content__count = /* @__PURE__ */ _closure_get("count", ($scope) => _text($scope["#text/0"], $scope._.count));
24+
const $section_content__setup = $section_content__count;
25+
const $section_content = _content_resume("__tests__/template.marko_1_content", " ", " b", $section_content__setup);
26+
const $count__closure = /* @__PURE__ */ _closure($section_content__count);
27+
const $count = /* @__PURE__ */ _let("count/1", ($scope) => {
28+
$input_section($scope["#childScope/0"], attrTag({
29+
onClick: $onClick($scope),
30+
content: $section_content($scope)
31+
}));
32+
$count__closure($scope);
33+
});
34+
function $setup($scope) {
35+
/* @__PURE__ */ $setup$1($scope["#childScope/0"]);
36+
$count($scope, 0);
37+
}
38+
function $onClick($scope) {
39+
return function() {
40+
$count($scope, $scope.count + 1);
41+
};
42+
}
43+
_resume("__tests__/template.marko_0/onClick", $onClick);
44+
var template_default = /* @__PURE__ */ _template("__tests__/template.marko", $template, $walks, $setup);

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/dom.bundle.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// total: 15190 (min) 5961 (brotli)
2+
// tags/sections.marko: 0 (min) 1 (brotli)
3+
const $if_content__dynamicTag = /* @__PURE__ */ _dynamic_tag(0);
4+
const $if_content__content = /* @__PURE__ */ _if_closure(0, 0, ($scope) => $if_content__dynamicTag($scope, $scope._.d));
5+
const $for_content__if = /* @__PURE__ */ _if(0, "<!><!><!>", "b%c", $if_content__content);
6+
const $for_content__content = /* @__PURE__ */ _const(3, ($scope) => {
7+
$for_content__if($scope, $scope.d ? 0 : 1);
8+
$if_content__content($scope);
9+
});
10+
const $for_content__$params = ($scope, $params2) => $for_content__$temp($scope, $params2?.[0]);
11+
const $for_content__$temp = ($scope, $temp) => $for_content__content($scope, $temp.content);
12+
const $for = /* @__PURE__ */ _for_of(0, "<!><!><!>", "b%c", 0, $for_content__$params);
13+
const $input_section = ($scope, input_section) => $for($scope, [input_section]);
14+
15+
// template.marko: 230 (min) 147 (brotli)
16+
const $section_content__count = /* @__PURE__ */ _closure_get(1, ($scope) => _text($scope.a, $scope._.b));
17+
const $section_content = _content_resume("a1", " ", " b", $section_content__count);
18+
const $count__closure = /* @__PURE__ */ _closure($section_content__count);
19+
const $count = /* @__PURE__ */ _let(1, ($scope) => {
20+
$input_section($scope.a, attrTag({
21+
onClick: $onClick($scope),
22+
content: $section_content($scope)
23+
}));
24+
$count__closure($scope);
25+
});
26+
function $onClick($scope) {
27+
return function() {
28+
$count($scope, $scope.b + 1);
29+
};
30+
}
31+
_resume("a0", $onClick);

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/html.bundle.debug.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// tags/sections.marko
2+
var sections_default = _template("__tests__/tags/sections.marko", (input) => {
3+
const $scope0_reason = _scope_reason(), $sg__input_section = _serialize_guard($scope0_reason, 0), $si__input_section = _serialize_if($scope0_reason, 0);
4+
const $scope0_id = _scope_id();
5+
_for_of(input.section, ({ content }) => {
6+
const $scope1_id = _scope_id();
7+
_if(() => {
8+
if (content) {
9+
const $scope2_id = _scope_id();
10+
_dynamic_tag($scope2_id, "#text/0", content, {}, 0, 0, $sg__input_section);
11+
$si__input_section && writeScope($scope2_id, { _: _scope_with_id($scope1_id) }, "__tests__/tags/sections.marko", "2:4");
12+
return 0;
13+
}
14+
}, $scope1_id, "#text/0", $sg__input_section, $sg__input_section, $sg__input_section);
15+
$si__input_section && writeScope($scope1_id, { content }, "__tests__/tags/sections.marko", "1:2", { content: "1:8" });
16+
}, 0, $scope0_id, "#text/0", $sg__input_section, $sg__input_section, $sg__input_section);
17+
$si__input_section && writeScope($scope0_id, {}, "__tests__/tags/sections.marko", 0);
18+
});
19+
20+
// template.marko
21+
var template_default = _template("__tests__/template.marko", (input) => {
22+
const $scope0_reason = _scope_reason();
23+
const $scope0_id = _scope_id();
24+
const $count__closures = new Set();
25+
let count = 0;
26+
const $childScope = _peek_scope_id();
27+
_set_serialize_reason(1);
28+
sections_default({ section: attrTag({
29+
onClick: _resume(function() {
30+
count++;
31+
}, "__tests__/template.marko_0/onClick", $scope0_id),
32+
content: _content_resume("__tests__/template.marko_1_content", () => {
33+
_scope_reason();
34+
const $scope1_id = _scope_id();
35+
_html(`${_escape(count)}${_el_resume($scope1_id, "#text/0")}`);
36+
_subscribe($count__closures, writeScope($scope1_id, { _: _scope_with_id($scope0_id) }, "__tests__/template.marko", "3:4"));
37+
_resume_branch($scope1_id);
38+
}, $scope0_id)
39+
}) });
40+
writeScope($scope0_id, {
41+
count,
42+
"ClosureScopes:count": $count__closures,
43+
"#childScope/0": _existing_scope($childScope)
44+
}, "__tests__/template.marko", 0, { count: "1:6" });
45+
_resume_branch($scope0_id);
46+
}, 1);

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/html.bundle.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// tags/sections.marko
2+
var sections_default = _template("b", (input) => {
3+
const $scope0_reason = _scope_reason(), $sg__input_section = _serialize_guard($scope0_reason, 0), $si__input_section = _serialize_if($scope0_reason, 0);
4+
const $scope0_id = _scope_id();
5+
_for_of(input.section, ({ content }) => {
6+
const $scope1_id = _scope_id();
7+
_if(() => {
8+
if (content) {
9+
const $scope2_id = _scope_id();
10+
_dynamic_tag($scope2_id, "a", content, {}, 0, 0, $sg__input_section);
11+
$si__input_section && writeScope($scope2_id, { _: _scope_with_id($scope1_id) });
12+
return 0;
13+
}
14+
}, $scope1_id, "a", $sg__input_section, $sg__input_section, $sg__input_section);
15+
$si__input_section && writeScope($scope1_id, { d: content });
16+
}, 0, $scope0_id, "a", $sg__input_section, $sg__input_section, $sg__input_section);
17+
$si__input_section && writeScope($scope0_id, {});
18+
});
19+
20+
// template.marko
21+
var template_default = _template("a", (input) => {
22+
_scope_reason();
23+
const $scope0_id = _scope_id();
24+
const $count__closures = /* @__PURE__ */ new Set();
25+
let count = 0;
26+
const $childScope = _peek_scope_id();
27+
_set_serialize_reason(1);
28+
sections_default({ section: attrTag({
29+
onClick: _resume(function() {
30+
count++;
31+
}, "a0", $scope0_id),
32+
content: _content_resume("a1", () => {
33+
_scope_reason();
34+
const $scope1_id = _scope_id();
35+
_html(`${_escape(count)}${_el_resume($scope1_id, "a")}`);
36+
_subscribe($count__closures, writeScope($scope1_id, { _: _scope_with_id($scope0_id) }));
37+
_resume_branch($scope1_id);
38+
}, $scope0_id)
39+
}) });
40+
writeScope($scope0_id, {
41+
b: count,
42+
Bb: $count__closures,
43+
a: _existing_scope($childScope)
44+
});
45+
_resume_branch($scope0_id);
46+
}, 1);

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/render.debug.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Render
2+
```html
3+
0
4+
```

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/render.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Render
2+
```html
3+
0
4+
```

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/writes.debug.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!--M_[--><!--M_[--><!--M_[-->0<!--M_*5 #text/0--><!--M_]4 #text/0 5--><!--M_]3 #text/0 4--><!--M_]2 #text/0 3-->
2+
<script>
3+
WALKER_RUNTIME("M")("_");
4+
M._.r = [_ => (_.d = [0, _.c = {
5+
count: 0,
6+
"ClosureScopes:count": _.e = new Set,
7+
"#childScope/0": _.a = {}
8+
}, _.a, _.b = {}, {
9+
"ConditionalRenderer:#text/0": "packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/template.marko_1_content",
10+
_: _.b
11+
}, _.f = {
12+
_: _.c
13+
}], _.b.content = _._[
14+
"packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/template.marko_1_content"
15+
](_.c), (_.e).add(_.f), _.d)];
16+
M._.w()
17+
</script>

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/writes.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!-- total: 509 (min) 326 (brotli) -->
2+
<!--M_[--><!--M_[--><!--M_[-->0<!--M_*5 a--><!--M_]4 a 5--><!--M_]3 a 4--><!--M_]2 a 3-->
3+
<script>
4+
WALKER_RUNTIME("M")("_");
5+
M._.r = [_ => (_.d = [0, _.c = {
6+
b: 0,
7+
Bb: _.e = new Set,
8+
a: _.a = {}
9+
}, _.a, _.b = {}, {
10+
Da: "a1",
11+
_: _.b
12+
}, _.f = {
13+
_: _.c
14+
}], _.b.d = _._.a1(_.c), (_.e).add(_.f), _.d)];
15+
M._.w()
16+
</script>

‎packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/tags/sections.marko‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<for|{ content }| of=input.section>
2+
<if=content>
3+
<${content}/>
4+
</if>
5+
</for>

0 commit comments

Comments
 (0)