marko 5.36.4 → 5.37.0

package/src/translator/util/add-dependencies.js

@@ -0,0 +1,329 @@
+import { types as t } from "@marko/compiler";
+import {
+  loadFileForImport,
+  parseStatements,
+  resolveRelativePath,
+} from "@marko/compiler/babel-utils";
+import MagicString from "magic-string";
+import path from "path";
+import resolveFrom from "resolve-from";
+const kEntryState = Symbol();
+const lassoDepPrefix = "package: ";
+
+export default (entryFile, isHydrate) => {
+  const program = entryFile.path;
+  const programNode = program.node;
+
+  if (!isHydrate) {
+    const body = [];
+    addBrowserImports(new Set(), undefined, body, entryFile, entryFile);
+    if (body.length) {
+      programNode.body = body.concat(programNode.body);
+    }
+    return;
+  }
+
+  const visitedFiles = new Set([
+    resolveRelativePath(entryFile, entryFile.opts.filename),
+  ]);
+  entryBuilder.visit(entryFile, entryFile, function visitChild(resolved) {
+    if (!visitedFiles.has(resolved)) {
+      visitedFiles.add(resolved);
+      const file = loadFileForImport(entryFile, resolved);
+      if (file) {
+        entryBuilder.visit(file, entryFile, (id) =>
+          visitChild(resolveRelativeToEntry(entryFile, file, id)),
+        );
+      }
+    }
+  });
+
+  programNode.body = entryBuilder.build(entryFile);
+  program.skip();
+};
+
+export const entryBuilder = {
+  build(entryFile) {
+    const state = entryFile[kEntryState];
+    if (!state) {
+      throw entryFile.path.buildCodeFrameError(
+        "Unable to build hydrate code, no files were visited before finalizing the build",
+      );
+    }
+    const { markoOpts } = entryFile;
+    const entryMarkoMeta = entryFile.metadata.marko;
+    const { body } = state;
+    entryMarkoMeta.watchFiles = [...state.watchFiles];
+    entryMarkoMeta.deps = [...state.lassoDeps];
+
+    if (state.hasComponents) {
+      const initId = t.identifier("init");
+      const markoComponentsImport = importPath(
+        resolveRelativePath(entryFile, "marko/src/runtime/components/index.js"),
+      );
+      if (state.splitComponentIndex) {
+        markoComponentsImport.specifiers.push(
+          t.importSpecifier(t.identifier("register"), t.identifier("register")),
+        );
+      }
+
+      body.unshift(markoComponentsImport);
+
+      if (markoOpts.hydrateInit) {
+        markoComponentsImport.specifiers.push(
+          t.importSpecifier(initId, initId),
+        );
+        body.push(
+          t.expressionStatement(
+            t.callExpression(
+              initId,
+              markoOpts.runtimeId ? [t.stringLiteral(markoOpts.runtimeId)] : [],
+            ),
+          ),
+        );
+      }
+    }
+
+    return body;
+  },
+  visit(file, entryFile, visitChild) {
+    const fileMeta = file.metadata.marko;
+    const fileName = file.opts.filename;
+    const state = (entryFile[kEntryState] ||= {
+      shouldIncludeImport: toTestFn(file.markoOpts.hydrateIncludeImports),
+      watchFiles: new Set(),
+      imports: new Set(),
+      lassoDeps: new Set(),
+      hasComponents: false,
+      splitComponentIndex: 0,
+      body: [],
+    });
+
+    const { watchFiles, imports, lassoDeps, body } = state;
+
+    if (fileMeta.component) {
+      state.hasComponents = true;
+
+      if (path.basename(fileMeta.component) === path.basename(fileName)) {
+        // Stateful component.
+        addImport(imports, body, resolveRelativePath(entryFile, fileName));
+        return;
+      }
+    }
+
+    watchFiles.add(fileName);
+
+    for (const watchFile of fileMeta.watchFiles) {
+      watchFiles.add(watchFile);
+    }
+
+    addBrowserImports(imports, lassoDeps, body, file, entryFile);
+
+    for (const child of file.path.node.body) {
+      if (t.isImportDeclaration(child)) {
+        const { value } = child.source;
+        if (state.shouldIncludeImport(value)) {
+          addImport(
+            imports,
+            body,
+            resolveRelativeToEntry(entryFile, file, value),
+          );
+        }
+      }
+    }
+
+    for (const tag of fileMeta.tags) {
+      if (tag.endsWith(".marko")) {
+        visitChild(tag);
+      } else {
+        const importedTemplates = tryGetTemplateImports(file, tag);
+        if (importedTemplates) {
+          for (const templateFile of importedTemplates) {
+            visitChild(templateFile);
+          }
+        }
+      }
+    }
+
+    if (fileMeta.component) {
+      // Split component
+      const splitComponentId = t.identifier(
+        `component_${state.splitComponentIndex++}`,
+      );
+      const splitComponentImport = importPath(
+        resolveRelativeToEntry(entryFile, file, fileMeta.component),
+      );
+      splitComponentImport.specifiers.push(
+        t.importDefaultSpecifier(splitComponentId),
+      );
+      body.push(
+        splitComponentImport,
+        t.expressionStatement(
+          t.callExpression(t.identifier("register"), [
+            t.stringLiteral(fileMeta.id),
+            splitComponentId,
+          ]),
+        ),
+      );
+    }
+  },
+};
+
+function addBrowserImports(seenImports, lassoDeps, body, file, entryFile) {
+  const { filename, sourceMaps } = file.opts;
+  let s;
+
+  for (let dep of file.metadata.marko.deps) {
+    if (typeof dep !== "string") {
+      const { virtualPath } = dep;
+      let { code } = dep;
+      let map;
+
+      if (sourceMaps && dep.startPos !== undefined) {
+        s = s || new MagicString(file.code, { filename });
+        map = s.snip(dep.startPos, dep.endPos).generateMap({
+          source: filename,
+          includeContent: true,
+        });
+
+        if (sourceMaps === "inline" || sourceMaps === "both") {
+          code += dep.style
+            ? `\n/*# sourceMappingURL=${map.toUrl()}*/`
+            : `\n//# sourceMappingURL=${map.toUrl()}`;
+
+          if (sourceMaps === "inline") {
+            map = undefined;
+          }
+        }
+      }
+
+      dep = file.markoOpts.resolveVirtualDependency(filename, {
+        map,
+        code,
+        virtualPath,
+      });
+
+      if (!dep) {
+        continue;
+      }
+    } else if (isLassoDep(dep)) {
+      if (lassoDeps) {
+        lassoDeps.add(
+          resolveLassoManifestDepRelativeToEntry(entryFile, file, dep),
+        );
+      }
+      continue;
+    }
+
+    addImport(seenImports, body, resolveRelativeToEntry(entryFile, file, dep));
+  }
+}
+
+function addImport(seenImports, body, resolved) {
+  if (seenImports.has(resolved)) return;
+  seenImports.add(resolved);
+  body.push(importPath(resolved));
+}
+
+function resolveRelativeToEntry(entryFile, file, req) {
+  return file === entryFile
+    ? resolveRelativePath(file, req)
+    : resolveRelativePath(
+        entryFile,
+        req[0] === "." ? path.join(file.opts.filename, "..", req) : req,
+      );
+}
+
+function importPath(path) {
+  return t.importDeclaration([], t.stringLiteral(path));
+}
+
+function tryGetTemplateImports(file, rendererRelativePath) {
+  const resolvedRendererPath = path.join(
+    file.opts.filename,
+    "..",
+    rendererRelativePath,
+  );
+  let templateImports;
+
+  try {
+    for (const statement of parseStatements(
+      file,
+      file.markoOpts.fileSystem.readFileSync(resolvedRendererPath, "utf-8"),
+    )) {
+      if (statement.type === "ImportDeclaration") {
+        addTemplateImport(statement.source.value);
+      } else {
+        t.traverseFast(statement, (node) => {
+          if (
+            node.type === "CallExpression" &&
+            (node.callee.name === "require" ||
+              (node.callee.type === "MemberExpression" &&
+                node.callee.object.type === "Identifier" &&
+                node.callee.object.name === "require" &&
+                node.callee.property.type === "Identifier" &&
+                node.callee.property.name === "resolve")) &&
+            node.arguments.length === 1 &&
+            node.arguments[0].type === "StringLiteral"
+          ) {
+            addTemplateImport(node.arguments[0].value);
+          }
+        });
+      }
+    }
+  } catch {
+    // Ignore
+  }
+
+  return templateImports;
+
+  function addTemplateImport(request) {
+    if (request.endsWith(".marko")) {
+      const resolvedTemplatePath =
+        request[0] === "."
+          ? path.resolve(resolvedRendererPath, "..", request)
+          : resolveFrom.silent(path.dirname(resolvedRendererPath), request);
+      if (resolvedTemplatePath) {
+        if (templateImports) {
+          templateImports.push(resolvedTemplatePath);
+        } else {
+          templateImports = [resolvedTemplatePath];
+        }
+      }
+    }
+  }
+}
+
+function toTestFn(val) {
+  if (typeof val === "function") {
+    return val;
+  }
+
+  return val.test.bind(val);
+}
+
+function isLassoDep(dep) {
+  return dep.startsWith(lassoDepPrefix);
+}
+
+/**
+ * Lasso manifest deps in `lasso-marko` do not support node module resolution.
+ * eg `package: @ebay/ebayui-core/browser.json` will not resolve.
+ *
+ * This resolution returns a direct posix relative path.
+ */
+function resolveLassoManifestDepRelativeToEntry(entryFile, targetFile, dep) {
+  const entryFileName = entryFile.opts.filename;
+  const targetFileName = targetFile.opts.filename;
+  if (entryFileName === targetFileName) return dep;
+
+  const resolved = toPosix(
+    path.relative(
+      path.dirname(entryFileName),
+      path.join(targetFileName, "..", dep.slice(lassoDepPrefix.length)),
+    ),
+  );
+  return lassoDepPrefix + (resolved[0] === "." ? resolved : `./${resolved}`);
+}
+
+const toPosix = path.sep === "/" ? (v) => v : (v) => v.replace(/\\/g, "/");

package/src/translator/util/escape-regexp.js

@@ -0,0 +1,4 @@
+const regexpCharsReg = /[\\^$.*+?()[\]{}|]/g;
+export function escapeRegExp(str) {
+  return str.replace(regexpCharsReg, "\\$&");
+}

package/src/translator/util/get-component-files.js

@@ -0,0 +1,86 @@
+import path from "path";
+
+import { escapeRegExp } from "./escape-regexp";
+
+const COMPONENT_FILES_KEY = "___marko_component_files___";
+
+export default function getComponentFiles({ hub: { file } }) {
+  const meta = file.metadata.marko;
+
+  if (meta[COMPONENT_FILES_KEY]) {
+    return meta[COMPONENT_FILES_KEY];
+  }
+
+  const { filename } = file.opts;
+  const fs = file.markoOpts.fileSystem;
+  const dirname = path.dirname(filename);
+  const dirFiles = fs.readdirSync(dirname).sort();
+  const base = getBase(filename);
+  const isEntry = "index" === base || "template" === base;
+  const fileMatch = `(${escapeRegExp(base)}\\.${isEntry ? "|" : ""})`;
+  const styleMatch = new RegExp(`^${fileMatch}style\\.\\w+$`);
+  const componentMatch = new RegExp(`^${fileMatch}component\\.\\w+$`);
+  const splitComponentMatch = new RegExp(
+    `^${fileMatch}component-browser\\.\\w+$`,
+  );
+  const packageMatch = new RegExp(`^${fileMatch}browser\\.\\json$`);
+  let styleFile;
+  let packageFile;
+  let componentFile;
+  let componentBrowserFile;
+
+  for (const file of dirFiles) {
+    if (!styleFile && styleMatch.test(file)) {
+      styleFile = `./${file}`;
+    } else if (!packageFile && packageMatch.test(file)) {
+      packageFile = `./${file}`;
+    } else if (!componentFile && componentMatch.test(file)) {
+      componentFile = `./${file}`;
+      meta.hasComponent = true;
+    } else if (!componentBrowserFile && splitComponentMatch.test(file)) {
+      componentBrowserFile = `./${file}`;
+      meta.hasComponentBrowser = true;
+    }
+  }
+
+  return (meta[COMPONENT_FILES_KEY] = {
+    styleFile,
+    packageFile,
+    componentFile,
+    componentBrowserFile,
+  });
+}
+
+/**
+ * Given a filename, gets the base name, strips off the file extension
+ * and removes any arc flags (https://github.com/eBay/arc).
+ *
+ * @example
+ * getBase("/dir/foo.marko") // => "foo"
+ * getBase("/dir/foo.bar.marko") // => "foo.bar"
+ * getBase("/dir/foo[bar].marko") // => "foo"
+ * getBase("/dir/foo[bar].baz.marko") // => "foo.baz"
+ */
+function getBase(filename) {
+  const start = filename.lastIndexOf(path.sep) + 1;
+  const leftDot = filename.indexOf(".", start);
+
+  if (leftDot === -1) {
+    return filename.slice(start);
+  }
+
+  const rightDot = filename.lastIndexOf(".");
+  const closeBracket = leftDot - 1;
+  if (filename[closeBracket] === "]") {
+    const openBracket = filename.lastIndexOf("[", closeBracket);
+    if (openBracket > start) {
+      // If we match a "]" before the extension and find a "[" before that,
+      // then we have an arc flag. Strip it off.
+      return (
+        filename.slice(start, openBracket) + filename.slice(leftDot, rightDot)
+      );
+    }
+  }
+
+  return filename.slice(start, rightDot);
+}

package/src/translator/util/html-out-write.js

@@ -0,0 +1,15 @@
+import { types as t } from "@marko/compiler";
+import { normalizeTemplateString } from "@marko/compiler/babel-utils";
+
+export default function write(strings, ...expressions) {
+  const template = normalizeTemplateString(strings, ...expressions);
+
+  if (template) {
+    return t.expressionStatement(
+      t.callExpression(
+        t.memberExpression(t.identifier("out"), t.identifier("w")),
+        [template],
+      ),
+    );
+  }
+}

package/src/translator/util/key-manager.js

@@ -0,0 +1,176 @@
+import { types as t } from "@marko/compiler";
+import {
+  isLoopTag,
+  isTransparentTag,
+  normalizeTemplateString,
+} from "@marko/compiler/babel-utils";
+const KeyManagerLookup = new WeakMap();
+
+/**
+ * @returns {KeyManager}
+ */
+export function getKeyManager(path) {
+  const { hub } = path;
+  return (
+    KeyManagerLookup.get(hub) ||
+    KeyManagerLookup.set(hub, new KeyManager()).get(hub)
+  );
+}
+
+export function hasAutoKey(path) {
+  const key = path.get("key").node;
+  return Boolean(key && key._isAutoKey);
+}
+
+export function hasUserKey(path) {
+  return path.node._hasUserKey;
+}
+
+class KeyManager {
+  constructor() {
+    this._nextKey = 0;
+  }
+
+  nextKey() {
+    return Object.assign(t.stringLiteral(String(this._nextKey++)), {
+      _isAutoKey: true,
+    });
+  }
+
+  resolveKey(path) {
+    if (isLoopTag(path)) {
+      // Record the first child key if found under a loop.
+      const firstChildTag = path
+        .get("body.body")
+        .find((child) => child.isMarkoTag());
+      const firstChildKey = firstChildTag && getUserKey(firstChildTag);
+
+      if (firstChildKey) {
+        const keyValueIdentifier = path.scope.generateUidIdentifier("keyValue");
+        firstChildTag.set("key", keyValueIdentifier);
+        firstChildTag.insertBefore(
+          t.variableDeclaration("const", [
+            t.variableDeclarator(keyValueIdentifier, firstChildKey),
+          ]),
+        );
+
+        path.set("keyValue", keyValueIdentifier);
+        path.get("body").scope.crawl();
+      }
+      return;
+    }
+
+    if (isTransparentTag(path)) {
+      return;
+    }
+
+    if (getUserKey(path)) {
+      return;
+    }
+
+    const parentKeyScope = getParentKeyScope(path);
+    const autoKey = path.get("key").node || this.nextKey();
+    path.set(
+      "key",
+      parentKeyScope
+        ? t.binaryExpression("+", autoKey, parentKeyScope)
+        : autoKey,
+    );
+  }
+}
+
+function getParentKeyScope(path) {
+  const parentLoopTag = path.findParent(isLoopTag);
+  return parentLoopTag && getKeyScope(parentLoopTag);
+}
+
+function getKeyScope(path) {
+  const existingKeyScope = path.get("keyScope").node;
+  if (existingKeyScope) {
+    return existingKeyScope;
+  }
+
+  const keyScopeIdentifier = path.scope.generateUidIdentifier("keyScope");
+  const firstChildKeyValue = path.get("keyValue").node;
+
+  if (firstChildKeyValue) {
+    const valuePath = path
+      .get("body")
+      .scope.getOwnBinding(firstChildKeyValue.name).path;
+    const declarationPath = valuePath.parentPath;
+    declarationPath.pushContainer(
+      "declarations",
+      t.variableDeclarator(
+        keyScopeIdentifier,
+        normalizeTemplateString`[${firstChildKeyValue}]`,
+      ),
+    );
+  } else {
+    let keyValue;
+
+    if (path.get("name.value").node === "for") {
+      if (path.node.attributes.some((attr) => attr.name === "of")) {
+        keyValue = path.node.body.params[1];
+      } else {
+        keyValue = path.node.body.params[0];
+      }
+    }
+
+    if (!keyValue) {
+      const keyValueIdentifier = path.scope.generateUidIdentifier("keyValue");
+      path.insertBefore(
+        t.variableDeclaration("let", [
+          t.variableDeclarator(keyValueIdentifier, t.numericLiteral(0)),
+        ]),
+      );
+
+      keyValue = t.updateExpression("++", keyValueIdentifier);
+    }
+
+    const parentKeyScope = getParentKeyScope(path);
+    if (parentKeyScope) {
+      keyValue = t.binaryExpression("+", keyValue, parentKeyScope);
+    }
+
+    const keyScopeDecl = t.variableDeclaration("const", [
+      t.variableDeclarator(
+        keyScopeIdentifier,
+        normalizeTemplateString`[${keyValue}]`,
+      ),
+    ]);
+
+    if (path.node.attributeTags.length) {
+      path.unshiftContainer("attributeTags", keyScopeDecl);
+    } else {
+      path.get("body").unshiftContainer("body", keyScopeDecl);
+    }
+  }
+
+  path.set("keyScope", keyScopeIdentifier);
+  return keyScopeIdentifier;
+}
+
+function getUserKey(path) {
+  if (hasAutoKey(path)) {
+    return undefined;
+  }
+
+  let key = path.get("key").node;
+  if (key === undefined) {
+    const keyAttr = path
+      .get("attributes")
+      .find((attr) => attr.get("name").node === "key");
+
+    if (keyAttr) {
+      key = normalizeTemplateString`@${keyAttr.get("value").node}`;
+      path.node._hasUserKey = true;
+      keyAttr.remove();
+    } else {
+      key = null;
+    }
+
+    path.set("key", key);
+  }
+
+  return key;
+}

package/src/translator/util/optimize-html-writes.js

@@ -0,0 +1,52 @@
+import { normalizeTemplateString } from "@marko/compiler/babel-utils";
+
+const mergeWriteCallsVisitor = {
+  ExpressionStatement(path) {
+    let curPath = path;
+    const quasis = [""];
+    const expressions = [];
+    const removals = [];
+
+    do {
+      const content = getOutContent(curPath);
+      if (!content) break;
+      if (curPath !== path) removals.push(curPath);
+      quasis.push("");
+      expressions.push(content);
+    } while ((curPath = curPath.getNextSibling()));
+
+    removals.forEach((removal) => removal.remove());
+
+    if (expressions.length > 1) {
+      path
+        .get("expression.arguments.0")
+        .replaceWith(normalizeTemplateString(quasis, ...expressions));
+    }
+  },
+};
+
+export function optimizeHTMLWrites(path) {
+  const {
+    hub: {
+      file: { markoOpts },
+    },
+  } = path;
+
+  if (markoOpts.optimize && markoOpts.output === "html") {
+    path.traverse(mergeWriteCallsVisitor);
+  }
+}
+
+function getOutContent(path) {
+  if (path.isExpressionStatement()) {
+    return getOutContent(path.get("expression"));
+  }
+
+  return (
+    path.isCallExpression() &&
+    path.get("callee").isMemberExpression() &&
+    path.get("callee.object.name").node === "out" &&
+    path.get("callee.property.name").node === "w" &&
+    path.get("arguments.0").node
+  );
+}