diff --git a/packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/dom.expected.js index bad7aee23..529ba307f 100644 --- a/packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/dom.expected.js @@ -7,6 +7,10 @@ function _apply1_x(_scope, x = _scope._[1]) { _setConditionalRenderer(_scope, 0, x ? _if : null); } +function _apply_x(_scope, x) { + if (_write(_scope, 1, x)) {} +} + function _apply(_scope) { _customTag(_scope[0]); } diff --git a/packages/translator/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/dom.expected.js index 47828d872..6476f9c93 100644 --- a/packages/translator/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/dom.expected.js @@ -1,10 +1,14 @@ import { apply as _hello, template as _hello_template, walks as _hello_walks } from "./components/hello/index.marko"; +import { write as _write, createRenderer as _createRenderer, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply2_a(_scope, a) { + if (_write(_scope, 0, a)) {} +} function _apply(_scope) { _hello(_scope[0]); } -import { createRenderer as _createRenderer, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; export const template = `${_hello_template}`; export const walks = /* beginChild(0), _hello_walks, endChild */ diff --git a/packages/translator/src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/dom.expected.js index 608106419..8c4e724b3 100644 --- a/packages/translator/src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/dom.expected.js @@ -18,6 +18,11 @@ _dynamicTag(_scope, x, { }); import { write as _write, dynamicTag as _dynamicTag, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply_x(_scope, x) { + if (_write(_scope, 0, x)) {} +} + export const applyAttrs = function (_scope, { x }) { diff --git a/packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/dom.expected.js index aca01c698..7e9a6c5d3 100644 --- a/packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/dom.expected.js @@ -11,6 +11,10 @@ function _apply1_x(_scope, x = _scope._[1]) { _setConditionalRenderer(_scope, 0, x ? _if : null); } +function _apply_x(_scope, x) { + if (_write(_scope, 1, x)) {} +} + function _apply(_scope) { _hello(_scope[0]); } diff --git a/packages/translator/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/dom.expected.js index 7b40068b7..a9291d845 100644 --- a/packages/translator/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/dom.expected.js @@ -15,6 +15,30 @@ _col.push({ import { write as _write, createRenderer as _createRenderer, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; import { apply as _hello, template as _hello_template, walks as _hello_walks } from "./components/hello/index.marko"; +function _apply9_row(_scope, row = _scope._[0]) {} + +function _apply8_row(_scope, row) { + if (_write(_scope, 0, row)) {} +} + +function _apply7_col(_scope, col = _scope._[0]) {} + +function _apply6_i(_scope, i) { + if (_write(_scope, 1, i)) {} +} + +function _apply6_col(_scope, col) { + if (_write(_scope, 0, col)) {} +} + +function _apply5_color(_scope, color = _scope._[4]) {} + +function _apply4_color(_scope, color = _scope._[4]) {} + +function _apply3_color(_scope, color) { + if (_write(_scope, 4, color)) {} +} + function _apply(_scope) { _hello(_scope[0]); } diff --git a/packages/translator/src/__tests__/fixtures/attr-class/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/attr-class/__snapshots__/dom.expected.js index 9808e42d7..1c59fa91e 100644 --- a/packages/translator/src/__tests__/fixtures/attr-class/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/attr-class/__snapshots__/dom.expected.js @@ -19,6 +19,16 @@ _dynamicTag(_scope, input.test, { import { classAttr as _classAttr, write as _write, dynamicTag as _dynamicTag, queue as _queue, createRenderer as _createRenderer, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; import { apply as _customTag, template as _customTag_template, walks as _customTag_walks } from "./components/custom-tag.marko"; +function _apply1With_c_d(_scope, c = _scope._[1], d = _scope._[2]) {} + +function _apply1_d(_scope, d = _scope._[2]) { + _queue(_scope, _apply1With_c_d, 2); +} + +function _apply1_c(_scope, c = _scope._[1]) { + _queue(_scope, _apply1With_c_d, 2); +} + function _applyWith_c_d(_scope, c = _scope[1], d = _scope[2]) { _classAttr(_scope[0], ["a", { b: c, diff --git a/packages/translator/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js b/packages/translator/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js index 5ef3bc77a..d36f6b934 100644 --- a/packages/translator/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js +++ b/packages/translator/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/components/my-button.js @@ -8,6 +8,10 @@ function _hydrate_onclick(_scope, onclick = _scope[1]) { _register("packages/translator/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onclick", _hydrate_onclick); +function _apply_renderBody(_scope, renderBody) { + if (_write(_scope, 2, renderBody)) {} +} + function _apply_onclick(_scope, onclick) { if (_write(_scope, 1, onclick)) _queueHydrate(_scope, _hydrate_onclick); } diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/dom.expected.js new file mode 100644 index 000000000..f323bc647 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/dom.expected.js @@ -0,0 +1,32 @@ +import { data as _data, write as _write, createRenderer as _createRenderer, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; +import { apply as _layout, applyAttrs as _layout_attrs, template as _layout_template, walks as _layout_walks } from "./components/layout.marko"; + +function _apply1_name(_scope, name = _scope._[1]) { + _data(_scope[0], name); +} + +function _apply_name(_scope, name) { + if (_write(_scope, 1, name)) {} +} + +function _apply(_scope) { + _layout(_scope[0]); +} + +export const applyAttrs = function (_scope, { + name +}) { + _apply_name(_scope, name); +}; +export { _apply_name }; +export const template = `${_layout_template}`; +export const walks = +/* beginChild(0), _layout_walks, endChild */ +`/${_layout_walks}&`; +export const apply = _apply; + +const _temp = _createRenderer("

Hello

", +/* next(1), over(1), replace */ +"Db%", null); + +export default _createRenderFn(template, walks, apply, applyAttrs); \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/dom.expected/components/layout.js b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/dom.expected/components/layout.js new file mode 100644 index 000000000..fb96d6d52 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/dom.expected/components/layout.js @@ -0,0 +1,20 @@ +_dynamicTag(_scope, renderBody, null); + +import { dynamicTag as _dynamicTag, write as _write, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply_renderBody(_scope, renderBody) { + if (_write(_scope, 0, renderBody)) {} +} + +export const applyAttrs = function (_scope, { + renderBody +}) { + _apply_renderBody(_scope, renderBody); +}; +export { _apply_renderBody }; +export const template = ""; +export const walks = +/* over(1) */ +"b"; +export const apply = function () {}; +export default _createRenderFn(template, walks, apply, applyAttrs); \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/html.expected.js b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/html.expected.js new file mode 100644 index 000000000..9a112c30d --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/html.expected.js @@ -0,0 +1,20 @@ +import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html"; +import _layout from "./components/layout.marko"; + +const _renderer = ({ + name +}) => { + const _scope = _nextScopeId(); + + _layout({ + renderBody() { + const _scope = _nextScopeId(); + + _write(`

Hello ${_markHydrateNode(_scope, 0)}${_escapeXML(name)}

`); + } + + }); +}; + +export default _renderer; +export const render = _createRenderer(_renderer); \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/html.expected/components/layout.js b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/html.expected/components/layout.js new file mode 100644 index 000000000..8bf2a8786 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/html.expected/components/layout.js @@ -0,0 +1,16 @@ +import { write as _write, dynamicTag as _dynamicTag, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html"; + +const _renderer = ({ + renderBody +}) => { + const _scope = _nextScopeId(); + + _write(""); + + _dynamicTag(renderBody, null); + + _write(""); +}; + +export default _renderer; +export const render = _createRenderer(_renderer); \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/ssr.expected.md new file mode 100644 index 000000000..febb60434 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/ssr.expected.md @@ -0,0 +1,28 @@ +# Write +

Hello World

+ + +# Render "End" +```html + + + +

+ Hello + + World +

+ + +``` + +# Mutations +``` +inserted html0 +inserted html0/head0 +inserted html0/body1 +inserted html0/body1/h10 +inserted html0/body1/h10/#text0 +inserted html0/body1/h10/#comment1 +inserted html0/body1/h10/#text2 +``` \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/components/layout.marko b/packages/translator/src/__tests__/fixtures/basic-layout/components/layout.marko new file mode 100644 index 000000000..299b06171 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/components/layout.marko @@ -0,0 +1,4 @@ + + + <${renderBody}/> + \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/template.marko b/packages/translator/src/__tests__/fixtures/basic-layout/template.marko new file mode 100644 index 000000000..991040bea --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/template.marko @@ -0,0 +1,4 @@ + + +

Hello ${name}

+ \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/basic-layout/test.ts b/packages/translator/src/__tests__/fixtures/basic-layout/test.ts new file mode 100644 index 000000000..114826f4f --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/basic-layout/test.ts @@ -0,0 +1,4 @@ +export const steps = [{ name: "World" }]; + +export const skip_hydrate = true; +export const skip_csr = true; diff --git a/packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/__snapshots__/dom.expected/components/other.js b/packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/__snapshots__/dom.expected/components/other.js index 20783634d..80bc4a865 100644 --- a/packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/__snapshots__/dom.expected/components/other.js +++ b/packages/translator/src/__tests__/fixtures/context-tag-from-tag-name/__snapshots__/dom.expected/components/other.js @@ -4,7 +4,12 @@ _dynamicTag(_scope, input.renderBody, null); _popContext(); -import { pushContext as _pushContext, dynamicTag as _dynamicTag, popContext as _popContext, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; +import { pushContext as _pushContext, dynamicTag as _dynamicTag, popContext as _popContext, write as _write, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply_input(_scope, input) { + if (_write(_scope, 0, input)) {} +} + export const applyAttrs = function (_scope, input) { _apply_input(_scope, input); }; diff --git a/packages/translator/src/__tests__/fixtures/custom-tag-render-body/__snapshots__/dom.expected/components/child/index.js b/packages/translator/src/__tests__/fixtures/custom-tag-render-body/__snapshots__/dom.expected/components/child/index.js index bc28cb82d..f33ac4a65 100644 --- a/packages/translator/src/__tests__/fixtures/custom-tag-render-body/__snapshots__/dom.expected/components/child/index.js +++ b/packages/translator/src/__tests__/fixtures/custom-tag-render-body/__snapshots__/dom.expected/components/child/index.js @@ -1,6 +1,11 @@ _dynamicTag(_scope, input.renderBody, null); -import { dynamicTag as _dynamicTag, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; +import { dynamicTag as _dynamicTag, write as _write, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply_input(_scope, input) { + if (_write(_scope, 0, input)) {} +} + export const applyAttrs = function (_scope, input) { _apply_input(_scope, input); }; diff --git a/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/dom.expected.js index 4fc003672..16976204c 100644 --- a/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/dynamic-tag-name/__snapshots__/dom.expected.js @@ -90,6 +90,18 @@ _dynamicTag(_scope, tagConstB, { import { dynamicTag as _dynamicTag, write as _write, createRenderer as _createRenderer, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; +function _apply_other(_scope, other) { + if (_write(_scope, 19, other)) {} +} + +function _apply_level(_scope, level) { + if (_write(_scope, 18, level)) {} +} + +function _apply_tag(_scope, tag) { + if (_write(_scope, 17, tag)) {} +} + function _apply_isLarge(_scope, isLarge) { if (_write(_scope, 16, isLarge)) _apply_largeHeading(_scope, isLarge && "h1"); } diff --git a/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/dom.expected.js index 4b908e96e..0e68c8cdc 100644 --- a/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/dynamic-tag-var/__snapshots__/dom.expected.js @@ -12,7 +12,24 @@ const _tagName2 = show && "div"; const el1 = _dynamicTag(_scope, _tagName2, null); -import { dynamicTag as _dynamicTag, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; +import { dynamicTag as _dynamicTag, write as _write, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply_dynamic(_scope, dynamic) { + if (_write(_scope, 4, dynamic)) {} +} + +function _apply_show(_scope, show) { + if (_write(_scope, 3, show)) {} +} + +function _apply_data2(_scope, data2) { + if (_write(_scope, 2, data2)) {} +} + +function _apply_data(_scope, data1) { + if (_write(_scope, 1, data1)) {} +} + export const applyAttrs = function (_scope, { show, dynamic diff --git a/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/dom.expected/components/child/index.js b/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/dom.expected/components/child/index.js index bc28cb82d..f33ac4a65 100644 --- a/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/dom.expected/components/child/index.js +++ b/packages/translator/src/__tests__/fixtures/event-handlers/__snapshots__/dom.expected/components/child/index.js @@ -1,6 +1,11 @@ _dynamicTag(_scope, input.renderBody, null); -import { dynamicTag as _dynamicTag, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; +import { dynamicTag as _dynamicTag, write as _write, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply_input(_scope, input) { + if (_write(_scope, 0, input)) {} +} + export const applyAttrs = function (_scope, input) { _apply_input(_scope, input); }; diff --git a/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected.js index ba6ea9634..add9e8b5d 100644 --- a/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/for-tag/__snapshots__/dom.expected.js @@ -99,6 +99,10 @@ function _apply1_val(_scope, val) { if (_write(_scope, 2, val)) _data(_scope[1], val); } +function _apply_obj(_scope, obj) { + if (_write(_scope, 41, obj)) {} +} + function _apply_arr(_scope, arr) { if (_write(_scope, 40, arr)) { _setLoopOf(_scope, 0, arr, _for, null, _apply1_val); diff --git a/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/dom.expected.js index bdd7cbaab..3ccba293f 100644 --- a/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/dom.expected.js +++ b/packages/translator/src/__tests__/fixtures/tag-tag/__snapshots__/dom.expected.js @@ -10,6 +10,10 @@ function _apply1_input(_scope, input) { if (_write(_scope, 1, input)) _data(_scope[0], input.name); } +function _apply_MyTag(_scope, MyTag) { + if (_write(_scope, 0, MyTag)) {} +} + export const template = ""; export const walks = ""; export const apply = function () {}; diff --git a/packages/translator/src/util/apply-hydrate.ts b/packages/translator/src/util/apply-hydrate.ts index 9acb6369c..a133f232c 100644 --- a/packages/translator/src/util/apply-hydrate.ts +++ b/packages/translator/src/util/apply-hydrate.ts @@ -87,9 +87,11 @@ const [getClosurePriorities] = createSectionState>( export function writeApplyGroups(sectionId: number) { const allStatements = getApplyStatements(sectionId); - if (!allStatements.length) return; + const numReferenceGroups = + currentProgramPath.node.extra!.referenceGroups![sectionId]!.length; + if (!numReferenceGroups) return; - for (let i = allStatements.length; i--; ) { + for (let i = numReferenceGroups; i--; ) { const statements = allStatements[i] ?? []; if (i === 0 && !statements.length) continue;