marko 5.36.5 → 5.37.0

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

@@ -0,0 +1,329 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.entryBuilder = exports.default = void 0;var _compiler = require("@marko/compiler");
+var _babelUtils = require("@marko/compiler/babel-utils");
+
+
+
+
+var _magicString = _interopRequireDefault(require("magic-string"));
+var _path = _interopRequireDefault(require("path"));
+var _resolveFrom = _interopRequireDefault(require("resolve-from"));
+const kEntryState = Symbol();
+const lassoDepPrefix = "package: ";var _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([
+  (0, _babelUtils.resolveRelativePath)(entryFile, entryFile.opts.filename)]
+  );
+  entryBuilder.visit(entryFile, entryFile, function visitChild(resolved) {
+    if (!visitedFiles.has(resolved)) {
+      visitedFiles.add(resolved);
+      const file = (0, _babelUtils.loadFileForImport)(entryFile, resolved);
+      if (file) {
+        entryBuilder.visit(file, entryFile, (id) =>
+        visitChild(resolveRelativeToEntry(entryFile, file, id))
+        );
+      }
+    }
+  });
+
+  programNode.body = entryBuilder.build(entryFile);
+  program.skip();
+};exports.default = _default;
+
+const entryBuilder = exports.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 = _compiler.types.identifier("init");
+      const markoComponentsImport = importPath(
+        (0, _babelUtils.resolveRelativePath)(entryFile, "marko/src/runtime/components/index.js")
+      );
+      if (state.splitComponentIndex) {
+        markoComponentsImport.specifiers.push(
+          _compiler.types.importSpecifier(_compiler.types.identifier("register"), _compiler.types.identifier("register"))
+        );
+      }
+
+      body.unshift(markoComponentsImport);
+
+      if (markoOpts.hydrateInit) {
+        markoComponentsImport.specifiers.push(
+          _compiler.types.importSpecifier(initId, initId)
+        );
+        body.push(
+          _compiler.types.expressionStatement(
+            _compiler.types.callExpression(
+              initId,
+              markoOpts.runtimeId ? [_compiler.types.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.default.basename(fileMeta.component) === _path.default.basename(fileName)) {
+        // Stateful component.
+        addImport(imports, body, (0, _babelUtils.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 (_compiler.types.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 = _compiler.types.identifier(
+        `component_${state.splitComponentIndex++}`
+      );
+      const splitComponentImport = importPath(
+        resolveRelativeToEntry(entryFile, file, fileMeta.component)
+      );
+      splitComponentImport.specifiers.push(
+        _compiler.types.importDefaultSpecifier(splitComponentId)
+      );
+      body.push(
+        splitComponentImport,
+        _compiler.types.expressionStatement(
+          _compiler.types.callExpression(_compiler.types.identifier("register"), [
+          _compiler.types.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.default(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 ?
+  (0, _babelUtils.resolveRelativePath)(file, req) :
+  (0, _babelUtils.resolveRelativePath)(
+    entryFile,
+    req[0] === "." ? _path.default.join(file.opts.filename, "..", req) : req
+  );
+}
+
+function importPath(path) {
+  return _compiler.types.importDeclaration([], _compiler.types.stringLiteral(path));
+}
+
+function tryGetTemplateImports(file, rendererRelativePath) {
+  const resolvedRendererPath = _path.default.join(
+    file.opts.filename,
+    "..",
+    rendererRelativePath
+  );
+  let templateImports;
+
+  try {
+    for (const statement of (0, _babelUtils.parseStatements)(
+      file,
+      file.markoOpts.fileSystem.readFileSync(resolvedRendererPath, "utf-8")
+    )) {
+      if (statement.type === "ImportDeclaration") {
+        addTemplateImport(statement.source.value);
+      } else {
+        _compiler.types.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.default.resolve(resolvedRendererPath, "..", request) :
+      _resolveFrom.default.silent(_path.default.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.default.relative(
+      _path.default.dirname(entryFileName),
+      _path.default.join(targetFileName, "..", dep.slice(lassoDepPrefix.length))
+    )
+  );
+  return lassoDepPrefix + (resolved[0] === "." ? resolved : `./${resolved}`);
+}
+
+const toPosix = _path.default.sep === "/" ? (v) => v : (v) => v.replace(/\\/g, "/");

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

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

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

@@ -0,0 +1,86 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.default = getComponentFiles;var _path = _interopRequireDefault(require("path"));
+
+var _escapeRegexp = require("./escape-regexp");
+
+const COMPONENT_FILES_KEY = "___marko_component_files___";
+
+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.default.dirname(filename);
+  const dirFiles = fs.readdirSync(dirname).sort();
+  const base = getBase(filename);
+  const isEntry = "index" === base || "template" === base;
+  const fileMatch = `(${(0, _escapeRegexp.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.default.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/dist/translator/util/html-out-write.js

@@ -0,0 +1,15 @@
+"use strict";exports.__esModule = true;exports.default = write;var _compiler = require("@marko/compiler");
+var _babelUtils = require("@marko/compiler/babel-utils");
+
+function write(strings, ...expressions) {
+  const template = (0, _babelUtils.normalizeTemplateString)(strings, ...expressions);
+
+  if (template) {
+    return _compiler.types.expressionStatement(
+      _compiler.types.callExpression(
+        _compiler.types.memberExpression(_compiler.types.identifier("out"), _compiler.types.identifier("w")),
+        [template]
+      )
+    );
+  }
+}

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

@@ -0,0 +1,176 @@
+"use strict";exports.__esModule = true;exports.getKeyManager = getKeyManager;exports.hasAutoKey = hasAutoKey;exports.hasUserKey = hasUserKey;var _compiler = require("@marko/compiler");
+var _babelUtils = require("@marko/compiler/babel-utils");
+
+
+
+
+const KeyManagerLookup = new WeakMap();
+
+/**
+ * @returns {KeyManager}
+ */
+function getKeyManager(path) {
+  const { hub } = path;
+  return (
+    KeyManagerLookup.get(hub) ||
+    KeyManagerLookup.set(hub, new KeyManager()).get(hub));
+
+}
+
+function hasAutoKey(path) {
+  const key = path.get("key").node;
+  return Boolean(key && key._isAutoKey);
+}
+
+function hasUserKey(path) {
+  return path.node._hasUserKey;
+}
+
+class KeyManager {
+  constructor() {
+    this._nextKey = 0;
+  }
+
+  nextKey() {
+    return Object.assign(_compiler.types.stringLiteral(String(this._nextKey++)), {
+      _isAutoKey: true
+    });
+  }
+
+  resolveKey(path) {
+    if ((0, _babelUtils.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(
+          _compiler.types.variableDeclaration("const", [
+          _compiler.types.variableDeclarator(keyValueIdentifier, firstChildKey)]
+          )
+        );
+
+        path.set("keyValue", keyValueIdentifier);
+        path.get("body").scope.crawl();
+      }
+      return;
+    }
+
+    if ((0, _babelUtils.isTransparentTag)(path)) {
+      return;
+    }
+
+    if (getUserKey(path)) {
+      return;
+    }
+
+    const parentKeyScope = getParentKeyScope(path);
+    const autoKey = path.get("key").node || this.nextKey();
+    path.set(
+      "key",
+      parentKeyScope ?
+      _compiler.types.binaryExpression("+", autoKey, parentKeyScope) :
+      autoKey
+    );
+  }
+}
+
+function getParentKeyScope(path) {
+  const parentLoopTag = path.findParent(_babelUtils.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",
+      _compiler.types.variableDeclarator(
+        keyScopeIdentifier,
+        (0, _babelUtils.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(
+        _compiler.types.variableDeclaration("let", [
+        _compiler.types.variableDeclarator(keyValueIdentifier, _compiler.types.numericLiteral(0))]
+        )
+      );
+
+      keyValue = _compiler.types.updateExpression("++", keyValueIdentifier);
+    }
+
+    const parentKeyScope = getParentKeyScope(path);
+    if (parentKeyScope) {
+      keyValue = _compiler.types.binaryExpression("+", keyValue, parentKeyScope);
+    }
+
+    const keyScopeDecl = _compiler.types.variableDeclaration("const", [
+    _compiler.types.variableDeclarator(
+      keyScopeIdentifier,
+      (0, _babelUtils.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 = (0, _babelUtils.normalizeTemplateString)`@${keyAttr.get("value").node}`;
+      path.node._hasUserKey = true;
+      keyAttr.remove();
+    } else {
+      key = null;
+    }
+
+    path.set("key", key);
+  }
+
+  return key;
+}

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

@@ -0,0 +1,52 @@
+"use strict";exports.__esModule = true;exports.optimizeHTMLWrites = optimizeHTMLWrites;var _babelUtils = require("@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((0, _babelUtils.normalizeTemplateString)(quasis, ...expressions));
+    }
+  }
+};
+
+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);
+
+}