marko 5.39.2 → 5.39.3

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

@@ -230,7 +230,7 @@ exports.p = function (htmlCompat) {
     };
   });
 
-  return htmlCompat.registerRenderer;
+  return htmlCompat.register;
 };
 
 function concatScripts(a, b) {

package/src/translator/index.js

@@ -28,9 +28,11 @@ import MarkoTag from "./tag";
 import MarkoText from "./text";
 import addDependencies from "./util/add-dependencies";
 import getComponentFiles from "./util/get-component-files";
+import { analyzeLoadImport } from "./util/load-import";
 import { optimizeHTMLWrites } from "./util/optimize-html-writes";
 import { analyzeStaticVDOM } from "./util/optimize-vdom-create";
 
+export { version } from "../../package.json";
 export const tagDiscoveryDirs = ["components"];
 export { optionalTaglibs, default as taglibs } from "./taglib";
 export { entryBuilder as internalEntryBuilder } from "./util/add-dependencies";
@@ -127,6 +129,9 @@ export const analyze = {
         relativePath = resolveTagImport(tag, importSource) || importSource;
         tag.node.extra = tag.node.extra || {};
         tag.node.extra.tagNameImported = relativePath;
+        if (binding.path.parentPath?.node.extra?.loadImport !== undefined) {
+          tag.node.extra.tagNameLoad = true;
+        }
       }
     }
 
@@ -196,6 +201,7 @@ export const analyze = {
     exit(path) {
       const source = path.get("source");
       const tagEntry = resolveTagImport(source, source.node.value);
+      analyzeLoadImport(path, tagEntry);
 
       if (tagEntry) {
         const meta = path.hub.file.metadata.marko;
@@ -230,7 +236,50 @@ export const translate = {
         hub: { file },
       } = path;
 
-      if (file.markoOpts.output === "hydrate") {
+      if (file.markoOpts.entry && !file.markoOpts.linkAssets) {
+        throw path.buildCodeFrameError(
+          'The "entry" option requires the `linkAssets` compiler option to be configured.',
+        );
+      }
+
+      if (file.markoOpts.output === "html" && file.markoOpts.entry === "page") {
+        const { linkAssets } = file.markoOpts;
+        const templateId = file.metadata.marko.id;
+        const relPath = resolveRelativePath(file, file.opts.filename);
+        linkAssets.onAsset("page", file.opts.filename, templateId);
+        path.node.body = [
+          t.importDeclaration(
+            [t.importSpecifier(t.identifier("flush"), t.identifier("flush"))],
+            t.stringLiteral(linkAssets.runtime),
+          ),
+          t.importDeclaration(
+            [t.importDefaultSpecifier(t.identifier("template"))],
+            t.stringLiteral(relPath),
+          ),
+          t.importDeclaration(
+            [
+              t.importSpecifier(
+                t.identifier("withPageAssets"),
+                t.identifier("withPageAssets"),
+              ),
+            ],
+            t.stringLiteral("marko/src/runtime/helpers/load-tag.js"),
+          ),
+          t.exportAllDeclaration(t.stringLiteral(relPath)),
+          t.exportDefaultDeclaration(
+            t.callExpression(t.identifier("withPageAssets"), [
+              t.stringLiteral(templateId),
+              t.identifier("template"),
+              t.identifier("flush"),
+            ]),
+          ),
+        ];
+        path.skip();
+        return;
+      } else if (
+        (file.markoOpts.output === "dom" && file.markoOpts.entry) ||
+        file.markoOpts.output === "hydrate"
+      ) {
         addDependencies(file, true);
         return;
       } else if (

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

@@ -3,11 +3,11 @@ import {
   assertNoArgs,
   getTagDef,
   importDefault,
-  loadFileForTag,
   resolveRelativePath,
   resolveTagImport,
 } from "@marko/compiler/babel-utils";
 
+import { translateLoadTag } from "../util/load-import";
 import withPreviousLocation from "../util/with-previous-location";
 import dynamicTag from "./dynamic-tag";
 import nativeTag from "./native-tag";
@@ -53,7 +53,9 @@ export default function (path, isNullable) {
     if (binding && !binding.identifier.loc) binding = null;
 
     if (relativePath) {
-      tagIdentifier = importDefault(file, relativePath, tagName);
+      tagIdentifier = node.extra?.tagNameLoad
+        ? translateLoadTag(path, tagName, relativePath)
+        : importDefault(file, relativePath, tagName);
     } else if (binding) {
       path.set("name", t.identifier(tagName));
       return dynamicTag(path);

package/src/translator/tag/native-tag[html]/index.js

@@ -2,6 +2,7 @@ import { types as t } from "@marko/compiler";
 import {
   getTagDef,
   importDefault,
+  importNamed,
   normalizeTemplateString,
 } from "@marko/compiler/babel-utils";
 import { resolve } from "path";
@@ -205,22 +206,47 @@ export default function (path, isNullable) {
     );
   }
 
-  path.replaceWithMultiple(
-    [writeStartNode]
-      .concat(
-        needsIIFE
-          ? t.expressionStatement(
-              t.callExpression(
-                t.arrowFunctionExpression([], t.blockStatement(body)),
-                [],
-              ),
-            )
-          : needsBlock
-            ? t.blockStatement(body)
-            : body,
-      )
-      .concat(writeEndNode),
-  );
+  const nodes = [writeStartNode];
+
+  if (needsIIFE) {
+    nodes.push(
+      t.expressionStatement(
+        t.callExpression(
+          t.arrowFunctionExpression([], t.blockStatement(body)),
+          [],
+        ),
+      ),
+    );
+  } else if (needsBlock) {
+    nodes.push(t.blockStatement(body));
+  } else {
+    for (const node of body) {
+      nodes.push(node);
+    }
+  }
+
+  if (
+    t.isStringLiteral(name) &&
+    name.value === "head" &&
+    file.markoOpts.linkAssets
+  ) {
+    nodes.push(
+      t.expressionStatement(
+        t.callExpression(
+          importNamed(
+            file,
+            "marko/src/runtime/helpers/load-tag.js",
+            "flushHead",
+            "marko_flush_head",
+          ),
+          [t.identifier("out")],
+        ),
+      ),
+    );
+  }
+
+  nodes.push(writeEndNode);
+  path.replaceWithMultiple(nodes);
 }
 
 function isPreserved(path) {

package/src/translator/util/load-import.js

@@ -0,0 +1,288 @@
+import { types as t } from "@marko/compiler";
+import {
+  importDefault,
+  importNamed,
+  loadFileForTag,
+} from "@marko/compiler/babel-utils";
+
+const triggerRegExp = /\s*([\w-]+)\s*([^?|]+?)?\s*(?:\?([^|]*?))?\s*(?:\||$)/g;
+const loadTagsByFile = new WeakMap();
+
+export function analyzeLoadImport(importDecl, tagEntry) {
+  const loadAttrValuePath = importDecl
+    .get("attributes")
+    .find(
+      (p) =>
+        (p.node.key.type === "Identifier"
+          ? p.node.key.name
+          : p.node.key.value) === "load",
+    )
+    ?.get("value");
+
+  if (!loadAttrValuePath) return;
+
+  if (!tagEntry) {
+    throw importDecl.buildCodeFrameError(
+      "Unable to resolve marko file for load import.",
+    );
+  }
+
+  if ((importDecl.node.importKind || "value") !== "value") {
+    throw importDecl.buildCodeFrameError("Invalid load import.");
+  }
+
+  for (const specifier of importDecl.get("specifiers")) {
+    if (!t.isImportDefaultSpecifier(specifier.node)) {
+      throw specifier.buildCodeFrameError(
+        "Invalid load import, only a default specifier is allowed.",
+      );
+    }
+  }
+
+  const { markoOpts } = importDecl.hub.file;
+  if (!markoOpts.linkAssets) {
+    throw importDecl.buildCodeFrameError(
+      "The `load` import attribute requires the `linkAssets` compiler option to be configured.",
+    );
+  }
+
+  (importDecl.node.extra ??= {}).loadImport =
+    getLoadImportConfig(loadAttrValuePath);
+}
+
+export function translateLoadTag(path, tagName, relativePath) {
+  const { file } = path.hub;
+  const { markoOpts } = file;
+
+  const loadTagFn =
+    markoOpts.output === "dom"
+      ? importDefault(
+          file,
+          "marko/src/runtime/helpers/load-tag-browser.js",
+          "marko_load_tag",
+        )
+      : importNamed(
+          file,
+          "marko/src/runtime/helpers/load-tag.js",
+          "withLoadAssets",
+          "marko_load_tag",
+        );
+
+  const importBinding = path.scope.getBinding(tagName);
+  const importDecl = importBinding?.path?.parentPath?.isImportDeclaration()
+    ? importBinding.path.parentPath
+    : null;
+  const loadImport = importDecl?.node?.extra?.loadImport;
+  const triggers =
+    loadImport && !loadImport.render && loadImport.triggers.length
+      ? loadImport.triggers
+      : null;
+
+  let loadTags = loadTagsByFile.get(file);
+  if (!loadTags) loadTagsByFile.set(file, (loadTags = new Map()));
+  if (loadTags.has(relativePath)) {
+    return loadTags.get(relativePath);
+  }
+
+  const loadId = file.path.scope.generateUidIdentifier(`marko_load_${tagName}`);
+  loadTags.set(relativePath, loadId);
+
+  let loadArgs;
+  if (markoOpts.output === "dom") {
+    if (importDecl) {
+      // The lazy wrapper pretends to be the template, so every reference
+      // not already translated as a tag uses it.
+      for (const ref of importBinding.referencePaths) {
+        if (!(t.isMarkoTag(ref.parent) && ref.parent.extra?.tagNameLoad)) {
+          ref.replaceWith(t.cloneNode(loadId));
+        }
+      }
+      importDecl.remove();
+    }
+    const childFile = loadFileForTag(path);
+    loadArgs = [
+      t.stringLiteral(childFile.metadata.marko.id),
+      t.arrowFunctionExpression(
+        [],
+        t.callExpression(t.import(), [t.stringLiteral(relativePath)]),
+      ),
+    ];
+    if (triggers) loadArgs.push(buildDomTrigger(file, triggers));
+  } else {
+    const { linkAssets } = markoOpts;
+    const childFile = loadFileForTag(path);
+    linkAssets.onAsset(
+      "load",
+      childFile.opts.filename,
+      childFile.metadata.marko.id,
+    );
+    loadArgs = [
+      t.stringLiteral(childFile.metadata.marko.id),
+      t.identifier(tagName),
+    ];
+    if (triggers) loadArgs.push(t.valueToNode(triggers));
+  }
+
+  file.path.unshiftContainer("body", [
+    t.variableDeclaration("const", [
+      t.variableDeclarator(loadId, t.callExpression(loadTagFn, loadArgs)),
+    ]),
+  ]);
+
+  return loadId;
+}
+
+function getLoadImportConfig(attrValue) {
+  const raw = attrValue.node.value;
+
+  if (raw === "render") return { render: true };
+
+  const triggers = [];
+  for (const match of raw.matchAll(triggerRegExp)) {
+    const type = parseTriggerType(match[1]);
+    const selector = match[2];
+    const query = match[3];
+
+    if (!type) {
+      throw attrValue.buildCodeFrameError(
+        `Unknown trigger type "${match[1]}". Supported triggers are "visible", "idle", "media", and "on*".`,
+      );
+    }
+    if (type === "render") {
+      throw attrValue.buildCodeFrameError(
+        'The "render" trigger must be used alone.',
+      );
+    }
+    if (type === "idle") {
+      if (selector) {
+        throw attrValue.buildCodeFrameError(
+          `Selector is not supported for the "idle" trigger.`,
+        );
+      }
+    } else if (!selector) {
+      throw attrValue.buildCodeFrameError(
+        type === "media"
+          ? `A media query is required for the "media" trigger. (e.g. "media(max-width:768px)")`
+          : `A selector is required for the "${type}" trigger. (e.g. "${type}.my-element")`,
+      );
+    }
+
+    const trigger = selector ? { type, selector } : { type };
+
+    if (query) {
+      const params = new URLSearchParams(query);
+      switch (type) {
+        case "visible": {
+          let rootMargin;
+          for (const [key, value] of params) {
+            if (key !== "rootMargin") {
+              throw attrValue.buildCodeFrameError(
+                `Unknown param "${key}" for the "visible" trigger. Supported params: "rootMargin".`,
+              );
+            }
+            rootMargin = value;
+          }
+          if (rootMargin) trigger.options = { rootMargin };
+          break;
+        }
+        case "idle": {
+          let timeout;
+          for (const [key, value] of params) {
+            if (key !== "timeout") {
+              throw attrValue.buildCodeFrameError(
+                `Unknown param "${key}" for the "idle" trigger. Supported params: "timeout".`,
+              );
+            }
+            timeout = Number(value);
+          }
+          if (timeout) trigger.options = { timeout };
+          break;
+        }
+        default:
+          throw attrValue.buildCodeFrameError(
+            `Params are not supported for the "${type}" trigger.`,
+          );
+      }
+    }
+
+    triggers.push(trigger);
+  }
+
+  if (!triggers.length) {
+    throw attrValue.buildCodeFrameError(
+      'The "load" attribute requires "render" or at least one trigger (e.g. "visible.my-element").',
+    );
+  }
+
+  return { render: false, triggers };
+}
+
+function buildDomTrigger(file, triggers) {
+  const triggerExprs = triggers.map((trigger) => {
+    switch (trigger.type) {
+      case "visible": {
+        const fn = importDefault(
+          file,
+          "marko/src/runtime/helpers/load-tag-visible-trigger.js",
+          "marko_visible_trigger",
+        );
+        const args = [t.stringLiteral(trigger.selector)];
+        if (trigger.options) args.push(t.valueToNode(trigger.options));
+        return t.callExpression(fn, args);
+      }
+      case "idle": {
+        const fn = importDefault(
+          file,
+          "marko/src/runtime/helpers/load-tag-idle-trigger.js",
+          "marko_idle_trigger",
+        );
+        return t.callExpression(
+          fn,
+          trigger.options ? [t.valueToNode(trigger.options)] : [],
+        );
+      }
+      case "media": {
+        const fn = importDefault(
+          file,
+          "marko/src/runtime/helpers/load-tag-media-trigger.js",
+          "marko_media_trigger",
+        );
+        return t.callExpression(fn, [t.stringLiteral(trigger.selector)]);
+      }
+      default: {
+        const fn = importDefault(
+          file,
+          "marko/src/runtime/helpers/load-tag-event-trigger.js",
+          "marko_event_trigger",
+        );
+        return t.callExpression(fn, [
+          t.stringLiteral(trigger.type.slice("on-".length)),
+          t.stringLiteral(trigger.selector),
+        ]);
+      }
+    }
+  });
+
+  if (triggerExprs.length === 1) return triggerExprs[0];
+
+  const raceFn = importDefault(
+    file,
+    "marko/src/runtime/helpers/load-tag-race-trigger.js",
+    "marko_race_trigger",
+  );
+  return t.callExpression(raceFn, triggerExprs);
+}
+
+function parseTriggerType(type) {
+  switch (type) {
+    case "idle":
+    case "media":
+    case "render":
+    case "visible":
+      return type;
+    default:
+      return /^on[A-Z-]/.test(type)
+        ? `on-${type[2] === "-" ? type.slice(3) : type.slice(2).toLowerCase()}`
+        : undefined;
+  }
+}