feat: tags api script tag and misc fixes

marko-js · Dec 11, 2024 · 46f8d7c · 46f8d7c
1 parent 032afa1
commit 46f8d7c
Show file tree

Hide file tree

Showing 240 changed files with 1,159 additions and 661 deletions.
diff --git a/.changeset/plenty-ghosts-knock.md b/.changeset/plenty-ghosts-knock.md
@@ -0,0 +1,7 @@
+---
+"@marko/translator-tags": patch
+"@marko/runtime-tags": patch
+"@marko/compiler": patch
+---
+
+Add support for tags API script tag.
diff --git a/.sizes.json b/.sizes.json
@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 18009,
-        "brotli": 6502
+        "min": 18048,
+        "brotli": 6515
       }
     },
     {
@@ -18,12 +18,12 @@
         "brotli": 144
       },
       "runtime": {
-        "min": 3763,
-        "brotli": 1586
+        "min": 3802,
+        "brotli": 1590
       },
       "total": {
-        "min": 3952,
-        "brotli": 1730
+        "min": 3991,
+        "brotli": 1734
       }
     },
     {
@@ -48,12 +48,12 @@
         "brotli": 544
       },
       "runtime": {
-        "min": 7770,
-        "brotli": 3154
+        "min": 7809,
+        "brotli": 3166
       },
       "total": {
-        "min": 8923,
-        "brotli": 3698
+        "min": 8962,
+        "brotli": 3710
       }
     },
     {
@@ -63,12 +63,12 @@
         "brotli": 477
       },
       "runtime": {
-        "min": 8782,
-        "brotli": 3567
+        "min": 8821,
+        "brotli": 3573
       },
       "total": {
-        "min": 9736,
-        "brotli": 4044
+        "min": 9775,
+        "brotli": 4050
       }
     }
   ]

diff --git a/.sizes/dom.js b/.sizes/dom.js
@@ -1,4 +1,4 @@
-// size: 18009 (min) 6502 (brotli)
+// size: 18048 (min) 6515 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -1212,9 +1212,12 @@ function createRenderer(template, walks, setup, getClosureSignals, getArgs) {
 function _clone() {
   return (this.E ||= (function (html2) {
     let content = parseHTML(html2);
-    return content.firstChild === content.lastChild
-      ? content.firstChild || fallback
-      : content;
+    return content.firstChild
+      ? content.firstChild === content.lastChild &&
+        8 !== content.firstChild.nodeType
+        ? content.firstChild
+        : content
+      : fallback;
   })(this.D)).cloneNode(!0);
 }
 var conditional = function (nodeAccessor, fn, getIntersection) {

diff --git a/packages/babel-utils/index.d.ts b/packages/babel-utils/index.d.ts
@@ -243,23 +243,29 @@ export function withLoc<T extends t.Node>(
   end: number,
 ): T;
 
-export function parseStatements(file: t.BabelFile, str: string): t.Statement[];
-export function parseStatements(
+export function parseStatements<T extends t.Statement[]>(
+  file: t.BabelFile,
+  str: string,
+): T;
+export function parseStatements<T extends t.Statement[]>(
   file: t.BabelFile,
   str: string,
   sourceStart: number,
   sourceEnd: number,
   sourceOffset?: number,
-): t.Statement[];
+): T;
 
-export function parseExpression(file: t.BabelFile, str: string): t.Expression;
-export function parseExpression(
+export function parseExpression<T extends t.Expression>(
+  file: t.BabelFile,
+  str: string,
+): T;
+export function parseExpression<T extends t.Expression>(
   file: t.BabelFile,
   str: string,
   sourceStart: number,
   sourceEnd: number,
   sourceOffset?: number,
-): t.Expression;
+): T;
 
 export function parseParams(
   file: t.BabelFile,

diff --git a/packages/compiler/src/babel-types/generator/patch.js b/packages/compiler/src/babel-types/generator/patch.js
@@ -142,6 +142,7 @@ Object.assign(Printer.prototype, {
     const isDynamicTag = !t.isStringLiteral(node.name);
     const tagName = !isDynamicTag && node.name.value;
     const rawValue = node.rawValue;
+    let bodyOverride;
 
     if (
       tagName === "style" &&
@@ -199,28 +200,39 @@ Object.assign(Printer.prototype, {
         this.token("|");
       }
 
-      if (node.attributes.length) {
-        if (
-          !(node.attributes && node.attributes[0] && node.attributes[0].default)
-        ) {
+      let { attributes } = node;
+      if (attributes.length) {
+        if (tagName === "script") {
+          for (let i = attributes.length; i--; ) {
+            if (attributes[i].value.fromBody) {
+              bodyOverride = attributes[i].value.body.body;
+              attributes = toSpliced(attributes, i);
+              break;
+            }
+          }
+        }
+
+        if (!(attributes && attributes[0] && attributes[0].default)) {
           this.token(" ");
         }
 
-        this.printJoin(node.attributes, { separator: spaceSeparator });
+        this.printJoin(attributes, { separator: spaceSeparator });
       }
     }
 
     if (SELF_CLOSING.voidElements.includes(tagName)) {
       this.token(">");
     } else if (
-      !(node.body.body.length || node.attributeTags.length) ||
+      !(bodyOverride || node.body.body.length || node.attributeTags.length) ||
       SELF_CLOSING.svgElements.includes(tagName)
     ) {
       this.token("/>");
     } else {
       this.token(">");
       this.newline();
-      this.printSequence(zipAttributeTagsAndBody(node), { indent: true });
+      this.printSequence(bodyOverride || zipAttributeTagsAndBody(node), {
+        indent: true,
+      });
       this.token("</");
       if (!isDynamicTag) {
         this.token(tagName);
@@ -332,3 +344,19 @@ function compareStartLoc(a, b) {
     a.loc.start.column - b.loc.start.column
   );
 }
+
+function toSpliced(arr, index) {
+  const len = arr.length;
+  const result = new Array(len - 1);
+  let i = 0;
+
+  for (; i < index; i++) {
+    result[i] = arr[i];
+  }
+
+  for (i++; i < len; i++) {
+    result[i - 1] = arr[i];
+  }
+
+  return result;
+}
diff --git a/packages/runtime-tags/src/dom/parse-html.ts b/packages/runtime-tags/src/dom/parse-html.ts
@@ -7,9 +7,14 @@ export function parseHTML(html: string) {
 
 export function parseHTMLOrSingleNode(html: string) {
   const content = parseHTML(html);
+  if (!content.firstChild) return fallback;
   return (
-    content.firstChild === content.lastChild
-      ? content.firstChild || fallback
+    content.firstChild === content.lastChild &&
+    // If the firstChild is a comment it's possible its
+    // a single replaced node, in which case the walker can't replace
+    // the node itself.
+    content.firstChild.nodeType !== 8 /* Node.COMMENT_NODE */
+      ? content.firstChild
       : content
   ) as Node & { firstChild?: ChildNode; lastChild?: ChildNode };
 }
diff --git a/...ures/custom-tag-parameters-from-args/__snapshots__/html.expected/components/custom-tag.js b/...ures/custom-tag-parameters-from-args/__snapshots__/html.expected/components/custom-tag.js
@@ -6,7 +6,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   _$.write(`<button class=inc>${_$.escapeXML(x)}${_$.markResumeNode(_scope0_id, "#text/1")},<!>${_$.escapeXML(y)}${_$.markResumeNode(_scope0_id, "#text/2")}</button>${_$.markResumeNode(_scope0_id, "#button/0")}`);
   const _dynamicScope = _$.peekNextScope();
   _$.dynamicTagArgs(_dynamicScope, input.renderBody, [x, y]);
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/3")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/3"));
   _$.writeEffect(_scope0_id, "packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y");
   _$.writeScope(_scope0_id, {
     "x": x,

diff --git a/...rc/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/html.expected/template.js b/...rc/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/html.expected/template.js
@@ -10,7 +10,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     count: count
   });
   _s(_classCounter, "packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko");
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/2")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/2"));
   _$.writeEffect(_scope0_id, "packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count");
   _$.writeScope(_scope0_id, {
     "count": count,

diff --git a/...c/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/html.expected/template.js b/...c/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/html.expected/template.js
@@ -15,7 +15,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     });
   }), "packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer", _scope0_id));
   _s(_classLayout, "packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko");
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/0")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/0"));
   _$.writeScope(_scope0_id, {
     "count": count,
     "#text/0!": _$.writeExistingScope(_dynamicScope),

diff --git a/...tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/html.expected/template.js b/...tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/html.expected/template.js
@@ -16,7 +16,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     });
   }), "packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer", _scope0_id));
   _s(_classLayout, "packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko");
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/0")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/0"));
   _$.writeScope(_scope0_id, {
     "multiplier": multiplier,
     "#text/0!": _$.writeExistingScope(_dynamicScope),

diff --git a/...src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/html.expected/template.js b/...src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/html.expected/template.js
@@ -24,7 +24,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     const _scope1_id = _$.nextScopeId();
     _$.write("Body content");
   }), "packages/translator-tags/src/__tests__/fixtures/at-tags-dynamic-tag-parent/template.marko_1_renderer", _scope0_id));
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/0")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/0"));
   _$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
     "#text/0(": _$.normalizeDynamicRenderer(x)

diff --git a/...tags/src/__tests__/fixtures/at-tags/__snapshots__/html.expected/components/hello/index.js b/...tags/src/__tests__/fixtures/at-tags/__snapshots__/html.expected/components/hello/index.js
@@ -3,7 +3,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const _dynamicScope = _$.peekNextScope();
   _$.dynamicTagInput(_dynamicScope, input.foo, {});
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/0")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/0"));
   _$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
     "#text/0(": _$.normalizeDynamicRenderer(input.foo)

diff --git a/...translator-tags/src/__tests__/fixtures/attr-class/__snapshots__/html.expected/template.js b/...translator-tags/src/__tests__/fixtures/attr-class/__snapshots__/html.expected/template.js
@@ -38,7 +38,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       }), "packages/translator-tags/src/__tests__/fixtures/attr-class/template.marko_1_renderer", _scope0_id)
     })
   });
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/3")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/3"));
   _$.writeScope(_scope0_id, {
     "c": c,
     "d": d,

diff --git a/...translator-tags/src/__tests__/fixtures/attr-style/__snapshots__/html.expected/template.js b/...translator-tags/src/__tests__/fixtures/attr-style/__snapshots__/html.expected/template.js
@@ -40,7 +40,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       }), "packages/translator-tags/src/__tests__/fixtures/attr-style/template.marko_1_renderer", _scope0_id)
     })
   });
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/4")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/4"));
   _$.writeScope(_scope0_id, {
     "#childScope/1": _$.writeExistingScope(_childScope),
     "#childScope/2": _$.writeExistingScope(_childScope2),

diff --git a/...-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.js b/...-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/dom.expected/template.js
@@ -1,4 +1,4 @@
-export const _template_ = `${_myButton_template}`;
+export const _template_ = _myButton_template;
 export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`;
 import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko";
 import * as _$ from "@marko/runtime-tags/debug/dom";

diff --git a/...src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.js b/...src/__tests__/fixtures/basic-component-input-alias/__snapshots__/dom.expected/template.js
@@ -1,4 +1,4 @@
-export const _template_ = `${_myButton_template}`;
+export const _template_ = _myButton_template;
 export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`;
 import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko";
 import * as _$ from "@marko/runtime-tags/debug/dom";

diff --git a/..._/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.js b/..._/fixtures/basic-component-input-same-source-alias/__snapshots__/dom.expected/template.js
@@ -1,4 +1,4 @@
-export const _template_ = `${_myButton_template}`;
+export const _template_ = _myButton_template;
 export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`;
 import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko";
 import * as _$ from "@marko/runtime-tags/debug/dom";

diff --git a/...-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.js b/...-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/dom.expected/template.js
@@ -1,4 +1,4 @@
-export const _template_ = `${_myButton_template}`;
+export const _template_ = _myButton_template;
 export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`;
 import { _setup_ as _myButton, _text_ as _myButton_input_text, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko";
 import * as _$ from "@marko/runtime-tags/debug/dom";

diff --git a/.../src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.js b/.../src/__tests__/fixtures/basic-component-renderBody/__snapshots__/dom.expected/template.js
@@ -1,4 +1,4 @@
-export const _template_ = `${_myButton_template}`;
+export const _template_ = _myButton_template;
 export const _walks_ = /* beginChild, _myButton_walks, endChild */`/${_myButton_walks}&`;
 import * as _$ from "@marko/runtime-tags/debug/dom";
 import { _setup_ as _myButton, _renderBody_ as _myButton_input_renderBody, _onClick_ as _myButton_input_onClick, _template_ as _myButton_template, _walks_ as _myButton_walks } from "./components/my-button.marko";

diff --git a/...fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/html.expected/template.js b/...fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/html.expected/template.js
@@ -14,7 +14,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     _$.register(_ifRenderer = /* @__PURE__ */_$.createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer");
     _ifScopeId = _scope1_id;
   }
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/2")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/2"));
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show");
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count");
   _$.writeScope(_scope0_id, {

diff --git a/.../src/__tests__/fixtures/basic-conditional-counter/__snapshots__/html.expected/template.js b/.../src/__tests__/fixtures/basic-conditional-counter/__snapshots__/html.expected/template.js
@@ -14,7 +14,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     _$.register(_ifRenderer = /* @__PURE__ */_$.createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer");
     _ifScopeId = _scope1_id;
   }
-  _$.write(`${_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/2", _ifScopeId)}`);
+  _$.write(_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/2", _ifScopeId));
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show");
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count");
   _$.writeScope(_scope0_id, {

diff --git a/...s/src/__tests__/fixtures/basic-dynamic-native-tag/__snapshots__/html.expected/template.js b/...s/src/__tests__/fixtures/basic-dynamic-native-tag/__snapshots__/html.expected/template.js
@@ -11,7 +11,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     const _scope1_id = _$.nextScopeId();
     _$.write("Hello World");
   }), "packages/translator-tags/src/__tests__/fixtures/basic-dynamic-native-tag/template.marko_1_renderer", _scope0_id));
-  _$.write(`${_$.markResumeControlEnd(_scope0_id, "#text/0")}`);
+  _$.write(_$.markResumeControlEnd(_scope0_id, "#text/0"));
   _$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
     "#text/0(": _$.normalizeDynamicRenderer(tagName)

diff --git a/...r-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.js b/...r-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/dom.expected/template.js
@@ -1,7 +1,7 @@
 export const _template_ = "";
 export const _walks_ = "";
 import * as _$ from "@marko/runtime-tags/debug/dom";
-const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0", () => document.body.className = "no-deps");
+const _setup__effect = _$.effect("packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0", () => (document.body.className = "no-deps"));
 export function _setup_(_scope) {
   _setup__effect(_scope);
 }

diff --git a/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko b/packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko
@@ -1 +1,3 @@
-<effect() { document.body.className = "no-deps" } />
+<script>
+  document.body.className = "no-deps";
+</script>
diff --git a/...tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/html.expected/template.js b/...tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/html.expected/template.js
@@ -16,7 +16,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     _$.register(_ifRenderer = /* @__PURE__ */_$.createRenderer(() => {}), "packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer");
     _ifScopeId = _scope1_id;
   }
-  _$.write(`${_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/1", _ifScopeId)}`);
+  _$.write(_$.markResumeControlSingleNodeEnd(_scope0_id, "#text/1", _ifScopeId));
   _$.writeEffect(_scope0_id, "packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0");
   _$.writeScope(_scope0_id, {
     "message_text": message?.text,

diff --git a/...anslator-tags/src/__tests__/fixtures/basic-export/__snapshots__/csr.expected.md b/...anslator-tags/src/__tests__/fixtures/basic-export/__snapshots__/csr.expected.md
@@ -1,12 +1,11 @@
 # Render {"value":123}
 ```html
-<!---->
 <div>
   123
 </div>
 ```
 
 # Mutations
 ```
-inserted #comment0, div1
+inserted div0
 ```
diff --git a/...ranslator-tags/src/__tests__/fixtures/basic-export/__snapshots__/dom.expected/template.js b/...ranslator-tags/src/__tests__/fixtures/basic-export/__snapshots__/dom.expected/template.js
@@ -1,5 +1,5 @@
-export const _template_ = "<!><div> </div>";
-export const _walks_ = /* next(1), get, out(1) */"DD l";
+export const _template_ = "<div> </div>";
+export const _walks_ = /* next(1), get, out(1) */"D l";
 export const _setup_ = () => {};
 export const v = 123;
 import * as _$ from "@marko/runtime-tags/debug/dom";