marko 5.39.8 → 5.39.10

package/dist/runtime/helpers/tags-compat/runtime-html.js

@@ -17,7 +17,7 @@ exports.p = function (htmlCompat) {
   const writeClassAPIResultToTagsAPI = ({ out }) => {
     const { writer } = out._state;
     htmlCompat.write(writer._content);
-    htmlCompat.writeScript(writer._script);
+    htmlCompat.writeScript(writer._scripts);
     writer._content = writer._scripts = "";
 
     if (out.b_) {

package/dist/translator/index.js

@@ -14,6 +14,7 @@ var _babelUtils = require("@marko/compiler/babel-utils");
 
 
 
+
 var _package = require("marko/package.json");exports.version = _package.version;
 var _path = require("path");
 
@@ -148,6 +149,39 @@ const analyze = exports.analyze = {
         tag.node.extra.featureType = "tags";
         (file.path.node.extra ??= {}).needsCompat = true;
       }
+    } else if ((0, _babelUtils.isDynamicTag)(tag)) {
+      // A dynamic `<${expr}/>` whose name references an imported Tags API
+      // template crosses the interop boundary and must be rendered through the
+      // compat dynamic tag, the same as a statically named tags import. This
+      // mirrors the Tags API translator, which resolves the whole name
+      // expression (identifiers, conditionals, etc.) to detect the boundary.
+      const markIfTagsImport = (scope, name) => {
+        const binding = name && scope.getBinding(name);
+        if (binding && binding.kind === "module" && binding.identifier.loc) {
+          const childFile = (0, _babelUtils.loadFileForImport)(
+            file,
+            binding.path.parent.source.value
+          );
+          if (childFile?.ast.program.extra?.featureType === "tags") {
+            (tag.node.extra ??= {}).featureType = "tags";
+            (file.path.node.extra ??= {}).needsCompat = true;
+            return true;
+          }
+        }
+      };
+
+      const namePath = tag.get("name");
+      if (namePath.isIdentifier()) {
+        markIfTagsImport(namePath.scope, namePath.node.name);
+      } else {
+        namePath.traverse({
+          ReferencedIdentifier(idPath) {
+            if (markIfTagsImport(idPath.scope, idPath.node.name)) {
+              idPath.stop();
+            }
+          }
+        });
+      }
     }
 
     if (!(meta.hasFunctionEventHandlers || meta.hasStringEventHandlers)) {

package/dist/translator/tag/custom-tag.js

@@ -26,12 +26,16 @@ function _default(path, isNullable) {
   let tagIdentifier;
 
   if (node.extra?.featureType === "tags") {
-    path.set(
-      "name",
-      path.scope.hasBinding(name.value) ?
-      _compiler.types.identifier(name.value) :
-      (0, _babelUtils.importDefault)(file, node.extra.relativePath, name.value)
-    );
+    // A dynamic `<${tagName}>` already references the imported template
+    // binding directly; only a static tag name needs to be resolved to one.
+    if (_compiler.types.isStringLiteral(name)) {
+      path.set(
+        "name",
+        path.scope.hasBinding(name.value) ?
+        _compiler.types.identifier(name.value) :
+        (0, _babelUtils.importDefault)(file, node.extra.relativePath, name.value)
+      );
+    }
     return (0, _dynamicTag.default)(path);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "5.39.8",
+  "version": "5.39.10",
   "private": false,
   "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
   "keywords": [
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@marko/compiler": "^5.39.64",
-    "@marko/runtime-tags": "^6.1.9",
+    "@marko/runtime-tags": "^6.1.16",
     "app-module-path": "^2.2.0",
     "argly": "^1.2.0",
     "browser-refresh-client": "1.1.4",

package/src/runtime/helpers/tags-compat/runtime-html.js

@@ -17,7 +17,7 @@ exports.p = function (htmlCompat) {
   const writeClassAPIResultToTagsAPI = ({ out }) => {
     const { writer } = out._state;
     htmlCompat.write(writer._content);
-    htmlCompat.writeScript(writer._script);
+    htmlCompat.writeScript(writer._scripts);
     writer._content = writer._scripts = "";
 
     if (out.___components) {

package/src/translator/index.js

@@ -8,6 +8,7 @@ import {
   isDynamicTag,
   isMacroTag,
   isNativeTag,
+  loadFileForImport,
   loadFileForTag,
   parseExpression,
   parseStatements,
@@ -148,6 +149,39 @@ export const analyze = {
         tag.node.extra.featureType = "tags";
         (file.path.node.extra ??= {}).needsCompat = true;
       }
+    } else if (isDynamicTag(tag)) {
+      // A dynamic `<${expr}/>` whose name references an imported Tags API
+      // template crosses the interop boundary and must be rendered through the
+      // compat dynamic tag, the same as a statically named tags import. This
+      // mirrors the Tags API translator, which resolves the whole name
+      // expression (identifiers, conditionals, etc.) to detect the boundary.
+      const markIfTagsImport = (scope, name) => {
+        const binding = name && scope.getBinding(name);
+        if (binding && binding.kind === "module" && binding.identifier.loc) {
+          const childFile = loadFileForImport(
+            file,
+            binding.path.parent.source.value,
+          );
+          if (childFile?.ast.program.extra?.featureType === "tags") {
+            (tag.node.extra ??= {}).featureType = "tags";
+            (file.path.node.extra ??= {}).needsCompat = true;
+            return true;
+          }
+        }
+      };
+
+      const namePath = tag.get("name");
+      if (namePath.isIdentifier()) {
+        markIfTagsImport(namePath.scope, namePath.node.name);
+      } else {
+        namePath.traverse({
+          ReferencedIdentifier(idPath) {
+            if (markIfTagsImport(idPath.scope, idPath.node.name)) {
+              idPath.stop();
+            }
+          },
+        });
+      }
     }
 
     if (!(meta.hasFunctionEventHandlers || meta.hasStringEventHandlers)) {

package/src/translator/tag/custom-tag.js

@@ -26,12 +26,16 @@ export default function (path, isNullable) {
   let tagIdentifier;
 
   if (node.extra?.featureType === "tags") {
-    path.set(
-      "name",
-      path.scope.hasBinding(name.value)
-        ? t.identifier(name.value)
-        : importDefault(file, node.extra.relativePath, name.value),
-    );
+    // A dynamic `<${tagName}>` already references the imported template
+    // binding directly; only a static tag name needs to be resolved to one.
+    if (t.isStringLiteral(name)) {
+      path.set(
+        "name",
+        path.scope.hasBinding(name.value)
+          ? t.identifier(name.value)
+          : importDefault(file, node.extra.relativePath, name.value),
+      );
+    }
     return dynamicTag(path);
   }