marko 5.39.2 → 5.39.3

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

@@ -0,0 +1,288 @@
+"use strict";exports.__esModule = true;exports.analyzeLoadImport = analyzeLoadImport;exports.translateLoadTag = translateLoadTag;var _compiler = require("@marko/compiler");
+var _babelUtils = require("@marko/compiler/babel-utils");
+
+
+
+
+
+const triggerRegExp = /\s*([\w-]+)\s*([^?|]+?)?\s*(?:\?([^|]*?))?\s*(?:\||$)/g;
+const loadTagsByFile = new WeakMap();
+
+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 (!_compiler.types.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);
+}
+
+function translateLoadTag(path, tagName, relativePath) {
+  const { file } = path.hub;
+  const { markoOpts } = file;
+
+  const loadTagFn =
+  markoOpts.output === "dom" ?
+  (0, _babelUtils.importDefault)(
+    file,
+    "marko/src/runtime/helpers/load-tag-browser.js",
+    "marko_load_tag"
+  ) :
+  (0, _babelUtils.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 (!(_compiler.types.isMarkoTag(ref.parent) && ref.parent.extra?.tagNameLoad)) {
+          ref.replaceWith(_compiler.types.cloneNode(loadId));
+        }
+      }
+      importDecl.remove();
+    }
+    const childFile = (0, _babelUtils.loadFileForTag)(path);
+    loadArgs = [
+    _compiler.types.stringLiteral(childFile.metadata.marko.id),
+    _compiler.types.arrowFunctionExpression(
+      [],
+      _compiler.types.callExpression(_compiler.types.import(), [_compiler.types.stringLiteral(relativePath)])
+    )];
+
+    if (triggers) loadArgs.push(buildDomTrigger(file, triggers));
+  } else {
+    const { linkAssets } = markoOpts;
+    const childFile = (0, _babelUtils.loadFileForTag)(path);
+    linkAssets.onAsset(
+      "load",
+      childFile.opts.filename,
+      childFile.metadata.marko.id
+    );
+    loadArgs = [
+    _compiler.types.stringLiteral(childFile.metadata.marko.id),
+    _compiler.types.identifier(tagName)];
+
+    if (triggers) loadArgs.push(_compiler.types.valueToNode(triggers));
+  }
+
+  file.path.unshiftContainer("body", [
+  _compiler.types.variableDeclaration("const", [
+  _compiler.types.variableDeclarator(loadId, _compiler.types.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 = (0, _babelUtils.importDefault)(
+            file,
+            "marko/src/runtime/helpers/load-tag-visible-trigger.js",
+            "marko_visible_trigger"
+          );
+          const args = [_compiler.types.stringLiteral(trigger.selector)];
+          if (trigger.options) args.push(_compiler.types.valueToNode(trigger.options));
+          return _compiler.types.callExpression(fn, args);
+        }
+      case "idle":{
+          const fn = (0, _babelUtils.importDefault)(
+            file,
+            "marko/src/runtime/helpers/load-tag-idle-trigger.js",
+            "marko_idle_trigger"
+          );
+          return _compiler.types.callExpression(
+            fn,
+            trigger.options ? [_compiler.types.valueToNode(trigger.options)] : []
+          );
+        }
+      case "media":{
+          const fn = (0, _babelUtils.importDefault)(
+            file,
+            "marko/src/runtime/helpers/load-tag-media-trigger.js",
+            "marko_media_trigger"
+          );
+          return _compiler.types.callExpression(fn, [_compiler.types.stringLiteral(trigger.selector)]);
+        }
+      default:{
+          const fn = (0, _babelUtils.importDefault)(
+            file,
+            "marko/src/runtime/helpers/load-tag-event-trigger.js",
+            "marko_event_trigger"
+          );
+          return _compiler.types.callExpression(fn, [
+          _compiler.types.stringLiteral(trigger.type.slice("on-".length)),
+          _compiler.types.stringLiteral(trigger.selector)]
+          );
+        }
+    }
+  });
+
+  if (triggerExprs.length === 1) return triggerExprs[0];
+
+  const raceFn = (0, _babelUtils.importDefault)(
+    file,
+    "marko/src/runtime/helpers/load-tag-race-trigger.js",
+    "marko_race_trigger"
+  );
+  return _compiler.types.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;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marko",
-  "version": "5.39.2",
+  "version": "5.39.3",
   "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
   "keywords": [
     "front-end",
@@ -69,8 +69,8 @@
     "build": "babel ./src --out-dir ./dist --extensions .js --copy-files --config-file ../../babel.config.js --env-name=production"
   },
   "dependencies": {
-    "@marko/compiler": "^5.39.62",
-    "@marko/runtime-tags": "^6.1.2",
+    "@marko/compiler": "^5.39.64",
+    "@marko/runtime-tags": "^6.1.4",
     "app-module-path": "^2.2.0",
     "argly": "^1.2.0",
     "browser-refresh-client": "1.1.4",

package/src/node_modules/@internal/components-registry/index-browser.js

@@ -578,9 +578,14 @@ function tryInvoke(fn) {
   if (fn) fn();
 }
 
+function getLoadedTemplate(typeName) {
+  return registered[typeName] && load(typeName);
+}
+
 exports.r = register;
 exports.___createComponent = createComponent;
 exports.___getComponentClass = getComponentClass;
+exports.___getLoadedTemplate = getLoadedTemplate;
 exports.___initServerRendered = win.$initComponents = initServerRendered;
 
 require("../../../runtime/components/ComponentsContext").___initClientRendered =

package/src/runtime/helpers/load-tag-browser.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var createTemplate = require("../vdom").t;
+var getLoadedTemplate =
+  require("@internal/components-registry").___getLoadedTemplate;
+
+module.exports = function loadTag(typeId, load, trigger) {
+  var loading;
+  var hydratedComponents = new WeakSet();
+  var pending = new Set();
+  var start = trigger ? trigger(load) : load;
+  var lazyTemplate = createTemplate(typeId);
+  // Assumes rendering as a tag (direct or dynamic) — both assign the
+  // component def (`out.c`) before invoking `_`.
+  lazyTemplate._ = function loadRenderer(input, out) {
+    var component = out.___assignedComponentDef.___component;
+    var template = getLoadedTemplate(typeId);
+
+    if (!template) {
+      if (!loading) {
+        loading = start().then(
+          function () {
+            pending = pending.forEach(function (c) {
+              c.___destroyed ||
+                c.___rerender(c.___input, true).afterInsert(c.___host);
+            });
+          },
+          function (err) {
+            // Allows a later render to retry the load.
+            var failed = pending;
+            loading = undefined;
+            pending = new Set();
+            failed.forEach(function (c) {
+              c.___destroyed || c.emit("error", err);
+            });
+          },
+        );
+      }
+      pending.add(component);
+    }
+
+    if (out.___components.___globalContext.___isHydrate) {
+      hydratedComponents.add(component);
+    }
+
+    if (hydratedComponents.has(component)) {
+      out.bf(out.___assignedKey + "s", component, true).ef();
+    }
+
+    out.bf(out.___assignedKey, component, !template);
+
+    if (template) {
+      template._(input, out);
+    }
+
+    out.ef();
+  };
+  return lazyTemplate;
+};

package/src/runtime/helpers/load-tag-event-trigger.js

@@ -0,0 +1,25 @@
+"use strict";
+
+module.exports = function loadEventTrigger(event, selector) {
+  var pending;
+  return function (load) {
+    return function () {
+      return (
+        pending ||
+        (pending = new Promise(function (resolve) {
+          var el =
+            document.querySelector(selector) ||
+            // eslint-disable-next-line no-constant-binary-expression
+            ("MARKO_DEBUG" &&
+              console.warn(
+                'A lazy load trigger could not find an element matching "' +
+                  selector +
+                  '". The module was loaded immediately.',
+              ),
+            resolve());
+          if (el) el.addEventListener(event, resolve, { once: true });
+        }))
+      ).then(load);
+    };
+  };
+};

package/src/runtime/helpers/load-tag-idle-trigger.js

@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = function loadIdleTrigger(options) {
+  var pending;
+  return function (load) {
+    return function () {
+      return (
+        pending ||
+        (pending = new Promise(function (resolve) {
+          (self.requestIdleCallback || resolve)(resolve, options);
+        }))
+      ).then(load);
+    };
+  };
+};

package/src/runtime/helpers/load-tag-media-trigger.js

@@ -0,0 +1,17 @@
+"use strict";
+
+module.exports = function mediaTrigger(query) {
+  var pending;
+  return function (load) {
+    return function () {
+      return (
+        pending ||
+        (pending = new Promise(function (resolve) {
+          var mql = matchMedia(query);
+          if (mql.matches) resolve();
+          else mql.addEventListener("change", resolve, { once: true });
+        }))
+      ).then(load);
+    };
+  };
+};

package/src/runtime/helpers/load-tag-race-trigger.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var noop = function () {
+  return Promise.resolve();
+};
+
+module.exports = function loadRaceTrigger() {
+  var triggers = Array.prototype.slice.call(arguments);
+  var pending;
+  return function (load) {
+    return function () {
+      return (
+        pending ||
+        (pending = Promise.race(
+          triggers.map(function (t) {
+            return t(noop)();
+          }),
+        ))
+      ).then(load);
+    };
+  };
+};

package/src/runtime/helpers/load-tag-visible-trigger.js

@@ -0,0 +1,35 @@
+"use strict";
+
+module.exports = function loadVisibleTrigger(selector, options) {
+  var pending;
+  return function (load) {
+    return function () {
+      return (
+        pending ||
+        (pending = new Promise(function (resolve) {
+          var el =
+            document.querySelector(selector) ||
+            // eslint-disable-next-line no-constant-binary-expression
+            ("MARKO_DEBUG" &&
+              console.warn(
+                'A lazy load trigger could not find an element matching "' +
+                  selector +
+                  '". The module was loaded immediately.',
+              ),
+            resolve());
+          if (el) {
+            new IntersectionObserver(function (entries, io) {
+              if (
+                entries.some(function (entry) {
+                  return entry.isIntersecting;
+                })
+              ) {
+                resolve(io.disconnect());
+              }
+            }, options).observe(el);
+          }
+        }))
+      ).then(load);
+    };
+  };
+};

package/src/runtime/helpers/load-tag.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var flushHereAndAfter = require("../../core-tags/core/__flush_here_and_after__");
+var escapeScript = require("../html/helpers/escape-script-placeholder");
+var FLAG_WILL_RERENDER_IN_BROWSER = 1;
+var kAssets = Symbol();
+var kBlockIndex = Symbol();
+var kDeferIndex = Symbol();
+var kOriginal = Symbol();
+var assetFlush;
+
+exports.withPageAssets = function withPageAssets(typeId, template, runtime) {
+  assetFlush = runtime;
+  var render = template[kOriginal] || (template[kOriginal] = template._);
+  var flushBeforeInput = { renderBody: flush };
+  template._ = function (input, out) {
+    var hasAssets = !!out.global[kAssets];
+    var key = out.___assignedKey;
+    var def = out.___assignedComponentDef;
+    var component = def && def.___component;
+    addAsset(out.global, typeId);
+
+    if (hasAssets) {
+      if (willRerender(def)) {
+        out.bf(key + "s", component, true);
+        flush(out);
+        out.ef();
+      } else {
+        flush(out);
+      }
+    } else {
+      flushHereAndAfter(flushBeforeInput, out);
+    }
+
+    render(input, out);
+  };
+  return template;
+};
+
+exports.withLoadAssets = function withLoadAssets(typeId, template, triggers) {
+  if (template[kOriginal]) return template;
+  var render = (template[kOriginal] = template._);
+  template._ = function (input, out) {
+    var key = out.___assignedKey;
+    var def = out.___assignedComponentDef;
+    addAsset(out.global, typeId, triggers);
+
+    if (willRerender(def)) {
+      out.bf(key + "s", def.___component, true);
+      flush(out);
+      out.ef();
+      out.bf(key, def.___component, true);
+      render(input, out);
+      out.ef();
+    } else {
+      flush(out);
+      render(input, out);
+    }
+  };
+  return template;
+};
+
+exports.flushHead = function flushHead(out) {
+  if (out.global[kAssets]) {
+    flush(out);
+  }
+};
+
+function willRerender(def) {
+  return def && def.___flags & FLAG_WILL_RERENDER_IN_BROWSER ? true : false;
+}
+
+function flush(out) {
+  var g = out.global;
+  var result = "";
+  var assets = g[kAssets];
+  var length = assets.length;
+  var bi = g[kBlockIndex];
+  var di = g[kDeferIndex];
+
+  for (; bi < length; bi++) {
+    result += assetFlush(g, "block", assets[bi].id);
+  }
+
+  for (; di < length; di++) {
+    var asset = assets[di];
+    var deferHTML = assetFlush(g, "defer", asset.id);
+    if (asset.triggers) {
+      if (deferHTML) out.script(triggerScript(deferHTML, asset.triggers));
+    } else {
+      result += deferHTML;
+    }
+  }
+
+  g[kBlockIndex] = bi;
+  g[kDeferIndex] = di;
+  out.write(result);
+}
+
+function addAsset(g, id, triggers) {
+  var assets = g[kAssets];
+  if (!assets) {
+    g[kAssets] = [{ id: id, triggers: triggers }];
+    g[kBlockIndex] = g[kDeferIndex] = 0;
+  } else if (
+    !assets.find(function (a) {
+      return a.id === id;
+    })
+  ) {
+    assets.push({ id: id, triggers: triggers });
+  }
+}
+
+function triggerScript(html, triggers) {
+  var htmlStr = escapeScript(JSON.stringify(html));
+  var exprs = triggers.map(function (trigger) {
+    var options = trigger.options && toObjectExpression(trigger.options);
+    switch (trigger.type) {
+      case "visible":
+        return (
+          "(e=>e&&new IntersectionObserver((e,i)=>e.some(e=>e.isIntersecting)&&i.disconnect()+l()" +
+          (options ? "," + options : "") +
+          ").observe(e))(document.querySelector(" +
+          JSON.stringify(trigger.selector) +
+          ")||l())"
+        );
+      case "idle":
+        return (
+          "(self.requestIdleCallback||l)(l" +
+          (options ? "," + options : "") +
+          ")"
+        );
+      case "media":
+        return (
+          '(m=>m.matches?l():m.addEventListener("change",l,{once:1}))(matchMedia(' +
+          JSON.stringify(trigger.selector) +
+          "))"
+        );
+      default:
+        return (
+          '(e=>e?.addEventListener("' +
+          trigger.type.slice("on-".length) +
+          '",l,{once:1}))(document.querySelector(' +
+          JSON.stringify(trigger.selector) +
+          ")||l())"
+        );
+    }
+  });
+  return (
+    '((p,h,d,l=$=>d||p.insertAdjacentHTML("afterend",d=h))=>' +
+    (exprs.length > 1 ? "{" + exprs.join(";") + "}" : exprs[0]) +
+    ")(document.currentScript," +
+    htmlStr +
+    ")"
+  );
+}
+
+function toObjectExpression(options) {
+  var result = "{";
+  var sep = "";
+  for (var key in options) {
+    if (Object.prototype.hasOwnProperty.call(options, key)) {
+      result += sep + JSON.stringify(key) + ":" + JSON.stringify(options[key]);
+      sep = ",";
+    }
+  }
+  return result + "}";
+}

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

@@ -50,7 +50,7 @@ exports.p = function (domCompat) {
   const defDeserialize = ComponentDef.___deserialize;
   ComponentDef.___deserialize = function (o, types, global, registry) {
     if (typeof o[2] === "number") {
-      o[2] = self[global.runtimeId][global.renderId].s[o[2]].m5i;
+      o[2] = domCompat.getScope(global, o[2]).m5i;
     }
     return defDeserialize(o, types, global, registry);
   };
@@ -122,6 +122,7 @@ exports.p = function (domCompat) {
               renderAndMorph(scope, rendererFromAnywhere, renderer, input),
             () => ___createFragmentNode(),
           );
+          domCompat.setRendererId(newRenderer, renderer);
           rendererCache.set(renderer, newRenderer);
         }
       }
@@ -129,7 +130,6 @@ exports.p = function (domCompat) {
     return newRenderer;
   }
 
-  domCompat.registerRenderer(create5to6Renderer);
   domCompat.init(noopRenderer);
 
   function renderAndMorph(scope, renderer, renderBody, input) {