feat(attr-tags): naive rendering, no conditionals

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,4 @@
+# Render undefined
+```html
+Foo!
+```

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/csr.expected.md

@@ -0,0 +1,13 @@
+# Render undefined
+```html
+<!---->
+<!---->
+Foo!
+<!---->
+<!---->
+```
+
+# Mutations
+```
+inserted #comment0, #comment1, #text2, #comment3, #comment4
+```

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/dom.expected/components/hello/index.js

@@ -0,0 +1,8 @@
+import { conditional as _conditional, value as _value, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
+const _dynamicTagName = /* @__PURE__ */_conditional("#text/0");
+export const _input_ = /* @__PURE__ */_value("input", (_scope, input) => _dynamicTagName(_scope, input.foo), _dynamicTagName);
+export const _params__ = /* @__PURE__ */_value("_params_", (_scope, _params_) => _input_(_scope, _params_[0]), _input_);
+export const _template_ = "<!><!><!>";
+export const _walks_ = /* replace, over(1) */"D%bD";
+export const _setup_ = function () {};
+export default /* @__PURE__ */_createTemplate( /* @__PURE__ */_createRenderer(_template_, _walks_, _setup_, void 0, void 0, _params__), "packages/translator-tags/src/__tests__/fixtures/at-tags/components/hello/index.marko");

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,4 @@
+// size: 109 (min) 81 (brotli)
+
+import { register as o, createRenderer as m } from "@marko/runtime-tags/dom";
+o("b0", m("Foo!", "")), o("b1", m("", ""));

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/dom.expected/template.js

@@ -0,0 +1,17 @@
+import { bindRenderer as _bindRenderer, inChild as _inChild, createRenderer as _createRenderer, register as _register, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
+import { _setup_ as _hello, _input_ as _hello_input, _template_ as _hello_template, _walks_ as _hello_walks } from "./components/hello/index.marko";
+const _fooBody = _register("packages/translator-tags/src/__tests__/fixtures/at-tags/template.marko_2_renderer", /* @__PURE__ */_createRenderer("Foo!", ""));
+const _helloBody = _register("packages/translator-tags/src/__tests__/fixtures/at-tags/template.marko_1_renderer", /* @__PURE__ */_createRenderer("", ""));
+const _setup = _scope => {
+  _hello(_scope["#childScope/0"]);
+  _hello_input(_scope["#childScope/0"], {
+    foo: {
+      renderBody: /* @__PURE__ */_bindRenderer(_scope, _fooBody)
+    },
+    renderBody: /* @__PURE__ */_bindRenderer(_scope, _helloBody)
+  });
+};
+export const _template_ = `<!>${_hello_template}<!>`;
+export const _walks_ = /* beginChild, _hello_walks, endChild */`D/${_hello_walks}&D`;
+export const _setup_ = _setup;
+export default /* @__PURE__ */_createTemplate( /* @__PURE__ */_createRenderer(_template_, _walks_, _setup_), "packages/translator-tags/src/__tests__/fixtures/at-tags/template.marko");

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/html.expected/components/hello/index.js

@@ -1,3 +1,11 @@
-import { createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
-const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {});
+import { dynamicTagInput as _dynamicTagInput, markResumeControlEnd as _markResumeControlEnd, write as _write, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
+  const _scope0_id = _nextScopeId();
+  const _dynamicScope = _dynamicTagInput(input.foo, {});
+  _write(`${_markResumeControlEnd(_scope0_id, "#text/0")}`);
+  _writeScope(_scope0_id, {
+    "#text/0!": _dynamicScope,
+    "#text/0(": input.foo
+  });
+});
 export default /* @__PURE__ */_createTemplate(_renderer, "packages/translator-tags/src/__tests__/fixtures/at-tags/components/hello/index.marko");

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/resume-sanitized.expected.md

@@ -0,0 +1,4 @@
+# Render undefined
+```html
+Foo!
+```

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/resume.expected.md

@@ -0,0 +1,19 @@
+# Render undefined
+```html
+<!--M_[2-->
+<html>
+  <head />
+  <body>
+    Foo!
+    <!--M_]1 #text/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:{"#childScope/0":_.a={"#text/0!":_.b={},"#text/0(":{renderBody:_._["packages/translator-tags/src/__tests__/fixtures/at-tags/template.marko_2_renderer"]}}},1:_.a,2:_.b})];M._.d=1
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+
+```

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/ssr-sanitized.expected.md

@@ -0,0 +1,4 @@
+# Render "End"
+```html
+Foo!
+```

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/ssr.expected.md

@@ -0,0 +1,30 @@
+# Write
+  <!--M_[2-->Foo!<!--M_]1 #text/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:{"#childScope/0":_.a={"#text/0!":_.b={},"#text/0(":{renderBody:_._["packages/translator-tags/src/__tests__/fixtures/at-tags/template.marko_2_renderer"]}}},1:_.a,2:_.b})];M._.d=1</script>
+
+
+# Render "End"
+```html
+<!--M_[2-->
+<html>
+  <head />
+  <body>
+    Foo!
+    <!--M_]1 #text/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:{"#childScope/0":_.a={"#text/0!":_.b={},"#text/0(":{renderBody:_._["packages/translator-tags/src/__tests__/fixtures/at-tags/template.marko_2_renderer"]}}},1:_.a,2:_.b})];M._.d=1
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+inserted #document/html1/body1/script2
+inserted #document/html1/body1/script2/#text0
+```

packages/translator-tags/src/__tests__/fixtures/at-tags/__snapshots__/ssr.expected/template.hydrate.js

@@ -0,0 +1,2 @@
+import "./template.marko";
+import "./components/hello/index.marko";

packages/translator-tags/src/__tests__/fixtures/at-tags/components/hello/index.marko

@@ -0,0 +1 @@
+<${input.foo}/>

packages/translator-tags/src/__tests__/fixtures/attr-class/__snapshots__/dom.expected/template.js

@@ -1,6 +1,6 @@
-import { classAttr as _classAttr, write as _write, createRenderer as _createRenderer, register as _register, registerRenderer as _registerRenderer, dynamicTagAttrs as _dynamicTagAttrs, intersection as _intersection, conditional as _conditional, intersections as _intersections, value as _value, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
+import { classAttr as _classAttr, bindRenderer as _bindRenderer, createRenderer as _createRenderer, register as _register, registerRenderer as _registerRenderer, dynamicTagAttrs as _dynamicTagAttrs, intersection as _intersection, conditional as _conditional, intersections as _intersections, value as _value, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
 import { _setup_ as _customTag, _template_ as _customTag_template, _walks_ as _customTag_walks } from "./components/custom-tag.marko";
-const _testBody = _register("packages/translator-tags/src/__tests__/fixtures/attr-class/template.marko_2_renderer", /* @__PURE__ */_createRenderer("", ""));
+const _testBody = _register("packages/translator-tags/src/__tests__/fixtures/attr-class/template.marko_2_renderer", /* @__PURE__ */_createRenderer("Hello", ""));
 const _inputTestBody = _registerRenderer("packages/translator-tags/src/__tests__/fixtures/attr-class/template.marko_1_renderer", /* @__PURE__ */_createRenderer("", ""));
 const _inputTest_input = _dynamicTagAttrs("#text/3", _inputTestBody);
 const _expr_Text_c_d = /* @__PURE__ */_intersection(3, _scope => {
@@ -18,9 +18,7 @@ const _expr_Text_c_d = /* @__PURE__ */_intersection(3, _scope => {
         b: c,
         d
       }],
-      renderBody: () => {
-        _write("Hello");
-      }
+      renderBody: /* @__PURE__ */_bindRenderer(_scope, _testBody)
     }
   }));
 });

packages/translator-tags/src/__tests__/fixtures/attr-style/__snapshots__/dom.expected/template.js

@@ -1,6 +1,6 @@
-import { styleAttr as _styleAttr, write as _write, createRenderer as _createRenderer, register as _register, dynamicTagAttrs as _dynamicTagAttrs, conditional as _conditional, value as _value, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
+import { styleAttr as _styleAttr, bindRenderer as _bindRenderer, createRenderer as _createRenderer, register as _register, dynamicTagAttrs as _dynamicTagAttrs, conditional as _conditional, value as _value, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/dom";
 import { _setup_ as _customTag, _template_ as _customTag_template, _walks_ as _customTag_walks } from "./components/custom-tag.marko";
-const _testBody2 = _register("packages/translator-tags/src/__tests__/fixtures/attr-style/template.marko_2_renderer", /* @__PURE__ */_createRenderer("", ""));
+const _testBody2 = _register("packages/translator-tags/src/__tests__/fixtures/attr-style/template.marko_2_renderer", /* @__PURE__ */_createRenderer("Hello", ""));
 const _testBody = _register("packages/translator-tags/src/__tests__/fixtures/attr-style/template.marko_1_renderer", /* @__PURE__ */_createRenderer("", ""));
 const _test_input = _dynamicTagAttrs("#text/4", _testBody);
 const _dynamicTagName = /* @__PURE__ */_conditional("#text/4", _scope => _test_input(_scope, () => ({
@@ -11,9 +11,7 @@ const _dynamicTagName = /* @__PURE__ */_conditional("#text/4", _scope => _test_i
     style: {
       color: "green"
     },
-    renderBody: () => {
-      _write("Hello");
-    }
+    renderBody: /* @__PURE__ */_bindRenderer(_scope, _testBody2)
   }
 })), _test_input);
 export const _test_ = /* @__PURE__ */_value("test", (_scope, test) => _dynamicTagName(_scope, test || _testBody), _dynamicTagName);

packages/translator-tags/src/visitors/tag/attribute-tag.ts

@@ -1,33 +1,24 @@
 import { assertNoArgs, assertNoVar, findParentTag } from "@marko/babel-utils";
 import { types as t } from "@marko/compiler";
 import attrsToObject from "../../util/attrs-to-object";
+import { isOutputHTML } from "../../util/marko-config";
+import { callRuntime } from "../../util/runtime";
 import { getSection, startSection } from "../../util/sections";
 import { TagNameType } from "../../util/tag-name-type";
 import * as writer from "../../util/writer";
+import { scopeIdentifier } from "../program";
 
 export default {
   analyze: {
     enter(tag: t.NodePath<t.MarkoTag>) {
+      assertNoVar(tag);
+      assertNoArgs(tag);
+
       startSection(tag.get("body"));
     },
   },
   translate: {
-    enter(tag: t.NodePath<t.MarkoTag>) {
-      assertNoArgs(tag);
-
-      getSection(tag.get("body"));
-      if (writer.hasPendingHTML(tag)) {
-        throw tag
-          .get("name")
-          .buildCodeFrameError(
-            "Dynamic @tags cannot be mixed with body content.",
-          );
-      }
-    },
     exit(tag: t.NodePath<t.MarkoTag>) {
-      assertNoVar(tag);
-      writer.flushInto(tag);
-
       const parentTag = findParentTag(tag);
 
       if (!parentTag) {
@@ -44,6 +35,21 @@ export default {
           .buildCodeFrameError("@tags cannot be nested under native tags.");
       }
 
+      if (isOutputHTML()) {
+        writer.flushInto(tag);
+      } else {
+        tag.node.attributes.push(
+          t.markoAttribute(
+            "renderBody",
+            callRuntime(
+              "bindRenderer",
+              scopeIdentifier,
+              t.identifier(getSection(tag.get("body")).name),
+            ),
+          ),
+        );
+      }
+
       const attrName = (tag.node.name as t.StringLiteral).value.slice(1);
       const info = parentExtra.nestedAttributeTags![attrName];
       const attrsObject = attrsToObject(tag, true);

packages/translator-tags/src/visitors/tag/index.ts

@@ -124,9 +124,9 @@ export default {
         case TagNameType.DynamicTag:
           DynamicTag.translate.enter(tag);
           break;
-        case TagNameType.AttributeTag:
-          AttributeTag.translate.enter(tag);
-          break;
+        // case TagNameType.AttributeTag:
+        //   AttributeTag.translate.enter(tag);
+        //   break;
       }
     },