fix: invalid dom output for attributes only used in renderBody

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]);
 }

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 */

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
 }) {

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]);
 }

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]);
 }

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,

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);
 }

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("<h1>Hello <!></h1>",
+/* next(1), over(1), replace */
+"Db%", null);
+
+export default _createRenderFn(template, walks, apply, applyAttrs);

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 = "<body></body>";
+export const walks =
+/* over(1) */
+"b";
+export const apply = function () {};
+export default _createRenderFn(template, walks, apply, applyAttrs);

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(`<h1>Hello ${_markHydrateNode(_scope, 0)}${_escapeXML(name)}</h1>`);
+    }
+
+  });
+};
+
+export default _renderer;
+export const render = _createRenderer(_renderer);

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("<body>");
+
+  _dynamicTag(renderBody, null);
+
+  _write("</body>");
+};
+
+export default _renderer;
+export const render = _createRenderer(_renderer);

packages/translator/src/__tests__/fixtures/basic-layout/__snapshots__/ssr.expected.md

@@ -0,0 +1,28 @@
+# Write
+  <body><h1>Hello <!M#0 2>World</h1></body>
+
+
+# Render "End"
+```html
+<html>
+  <head />
+  <body>
+    <h1>
+      Hello 
+      <!--M#0 2-->
+      World
+    </h1>
+  </body>
+</html>
+```
+
+# 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
+```

packages/translator/src/__tests__/fixtures/basic-layout/components/layout.marko

@@ -0,0 +1,4 @@
+<attrs/{ renderBody }/>
+<body>
+  <${renderBody}/>
+</body>

packages/translator/src/__tests__/fixtures/basic-layout/template.marko

@@ -0,0 +1,4 @@
+<attrs/{ name }/>
+<layout>
+  <h1>Hello ${name}</h1>
+</layout>

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;

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);
 };

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);
 };

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");
 }

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

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);
 };

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

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 () {};

packages/translator/src/util/apply-hydrate.ts

@@ -87,9 +87,11 @@ const [getClosurePriorities] = createSectionState<Array<t.NumericLiteral>>(
 
 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;