marko 5.36.4 → 5.37.0

package/src/translator/taglib/core/transform-style.js

@@ -0,0 +1,66 @@
+import { getStart } from "@marko/compiler/babel-utils";
+import path from "path";
+
+import getComponentFiles from "../../util/get-component-files";
+
+const STYLE_REG = /^style((?:\.[^.\s\\/:*?"<>|({]+)+)?\s*\{/;
+
+export default function (tag) {
+  const { hub, node } = tag;
+  const { deps } = hub.file.metadata.marko;
+  const { rawValue } = node;
+  const matchedBlock = STYLE_REG.exec(rawValue);
+  if (!matchedBlock) {
+    return;
+  }
+
+  if (!tag.parentPath.isProgram()) {
+    throw tag
+      .get("name")
+      .buildCodeFrameError(
+        "Style blocks must be at the root of your Marko template.",
+      );
+  }
+
+  if (deps.some((dep) => dep.style)) {
+    throw tag
+      .get("name")
+      .buildCodeFrameError(
+        "A Marko file can only contain a single inline style block.",
+      );
+  }
+
+  if (getComponentFiles(tag).styleFile) {
+    throw tag
+      .get("name")
+      .buildCodeFrameError(
+        'A Marko file can either have an inline style block, or an external "style.ext" file, but not both.',
+      );
+  }
+
+  const [startContent, type = ".css"] = matchedBlock;
+  const codeSartOffset = startContent.length;
+  const codeEndOffset = rawValue.lastIndexOf("}");
+  const code = rawValue.slice(codeSartOffset, codeEndOffset);
+  const base = path.basename(hub.file.opts.filename);
+  const start = getStart(hub.file, node.name);
+  let startPos = undefined;
+  let endPos = undefined;
+
+  if (start !== null) {
+    startPos = start + codeSartOffset;
+    endPos = start + codeEndOffset;
+  }
+
+  deps.push({
+    type: type.slice(1),
+    code,
+    style: true,
+    startPos,
+    endPos,
+    path: `./${base}`,
+    virtualPath: `./${base + type}`,
+  });
+
+  tag.remove();
+}

package/src/translator/taglib/core/translate-await.js

@@ -0,0 +1,41 @@
+import { types as t } from "@marko/compiler";
+
+export function enter(path) {
+  const args = path.get("arguments");
+
+  if (!args.length) {
+    throw path
+      .get("name")
+      .buildCodeFrameError(
+        'You must provide a promise argument to the "<await>" tag, eg: "<await(promise)>".',
+      );
+  } else if (args.length > 1) {
+    const {
+      loc: { start },
+    } = args[1].node;
+    const {
+      loc: { end },
+    } = args[args.length - 1].node;
+    throw path.hub.file.buildCodeFrameError(
+      { loc: { start, end } },
+      'You can only pass one argument to the "<await>" tag.',
+    );
+  }
+
+  const [provider] = args;
+  path.pushContainer(
+    "attributes",
+    t.markoAttribute("_provider", provider.node),
+  );
+
+  if (
+    !path.get("attributes").some((attr) => attr.get("name").node === "name")
+  ) {
+    path.pushContainer(
+      "attributes",
+      t.markoAttribute("_name", t.stringLiteral(provider.toString())),
+    );
+  }
+
+  path.set("arguments", undefined);
+}

package/src/translator/taglib/core/translate-body.js

@@ -0,0 +1,17 @@
+import { types as t } from "@marko/compiler";
+
+export function enter(path) {
+  if (path.hub.file.markoOpts.output === "html") {
+    const body = path.get("body");
+
+    body.pushContainer("body", [
+      t.markoTag(t.stringLiteral("init-components"), [], t.markoTagBody()),
+      t.markoTag(t.stringLiteral("await-reorderer"), [], t.markoTagBody()),
+      t.markoTag(
+        t.stringLiteral("_preferred-script-location"),
+        [],
+        t.markoTagBody(),
+      ),
+    ]);
+  }
+}

package/src/translator/taglib/core/translate-for.js

@@ -0,0 +1,156 @@
+import { types as t } from "@marko/compiler";
+import {
+  assertAllowedAttributes,
+  importDefault,
+} from "@marko/compiler/babel-utils";
+
+export function exit(path) {
+  const { node } = path;
+  const {
+    attributes,
+    body: { params },
+  } = node;
+  const body = node.body.body;
+  const namePath = path.get("name");
+  const ofAttr = findName(attributes, "of");
+  const inAttr = findName(attributes, "in");
+  const fromAttr = findName(attributes, "from");
+  const toAttr = findName(attributes, "to");
+  const block = t.blockStatement(body);
+  let forNode;
+  let allowedAttributes = ["by"];
+
+  if (inAttr) {
+    allowedAttributes.push("in");
+
+    const [keyParam, valParam] = params;
+
+    if (!keyParam) {
+      throw namePath.buildCodeFrameError(
+        "Invalid 'for in' tag, missing |key, value| params.",
+      );
+    }
+
+    if (valParam) {
+      block.body.unshift(
+        t.variableDeclaration("const", [
+          t.variableDeclarator(
+            valParam,
+            t.memberExpression(inAttr.value, keyParam, true),
+          ),
+        ]),
+      );
+    }
+
+    forNode = t.forInStatement(
+      t.variableDeclaration("const", [t.variableDeclarator(keyParam)]),
+      inAttr.value,
+      block,
+    );
+  } else if (ofAttr) {
+    let ofAttrValue = t.callExpression(
+      importDefault(
+        path.hub.file,
+        "marko/src/runtime/helpers/of-fallback.js",
+        "of_fallback",
+      ),
+      [ofAttr.value],
+    );
+    allowedAttributes.push("of");
+
+    const [valParam, keyParam, loopParam] = params;
+
+    if (!valParam) {
+      throw namePath.buildCodeFrameError(
+        "Invalid 'for of' tag, missing |value, index| params.",
+      );
+    }
+
+    forNode = [];
+
+    if (keyParam) {
+      const indexName = path.scope.generateUidIdentifier(keyParam.name);
+      forNode.push(
+        t.variableDeclaration("let", [
+          t.variableDeclarator(indexName, t.numericLiteral(0)),
+        ]),
+      );
+
+      block.body.unshift(
+        t.variableDeclaration("let", [
+          t.variableDeclarator(keyParam, t.updateExpression("++", indexName)),
+        ]),
+      );
+    }
+
+    if (loopParam) {
+      ofAttrValue = loopParam;
+      forNode.push(
+        t.variableDeclaration("const", [
+          t.variableDeclarator(loopParam, ofAttr.value),
+        ]),
+      );
+    }
+
+    forNode.push(
+      t.forOfStatement(
+        t.variableDeclaration("const", [t.variableDeclarator(valParam)]),
+        ofAttrValue,
+        block,
+      ),
+    );
+  } else if (fromAttr && toAttr) {
+    allowedAttributes.push("from", "to", "step");
+
+    const stepAttr = findName(attributes, "step") || {
+      value: t.numericLiteral(1),
+    };
+    const stepValue = stepAttr ? stepAttr.value : t.numericLiteral(1);
+    const [indexParam] = params;
+    const stepsName = path.scope.generateUidIdentifier("steps");
+    const stepName = path.scope.generateUidIdentifier("step");
+
+    if (indexParam) {
+      block.body.unshift(
+        t.variableDeclaration("const", [
+          t.variableDeclarator(
+            indexParam,
+            t.binaryExpression(
+              "+",
+              fromAttr.value,
+              t.binaryExpression("*", stepName, stepValue),
+            ),
+          ),
+        ]),
+      );
+    }
+
+    forNode = t.forStatement(
+      t.variableDeclaration("let", [
+        t.variableDeclarator(
+          stepsName,
+          t.binaryExpression(
+            "/",
+            t.binaryExpression("-", toAttr.value, fromAttr.value),
+            stepValue,
+          ),
+        ),
+        t.variableDeclarator(stepName, t.numericLiteral(0)),
+      ]),
+      t.binaryExpression("<=", stepName, stepsName),
+      t.updateExpression("++", stepName),
+      block,
+    );
+  } else {
+    throw namePath.buildCodeFrameError(
+      "Invalid 'for' tag, missing an 'of', 'in' or 'to' attribute.",
+    );
+  }
+
+  assertAllowedAttributes(path, allowedAttributes);
+  path.replaceWithMultiple([].concat(forNode));
+}
+
+function findName(arr, value) {
+  return arr.find((obj) => obj.name === value);
+}

package/src/translator/taglib/core/translate-html-comment.js

@@ -0,0 +1,52 @@
+import { types as t } from "@marko/compiler";
+import {
+  assertNoArgs,
+  assertNoAttributes,
+  assertNoParams,
+} from "@marko/compiler/babel-utils";
+
+import writeHTML from "../../util/html-out-write";
+import writeVDOM from "../../util/vdom-out-write";
+import withPreviousLocation from "../../util/with-previous-location";
+
+export function enter(path) {
+  assertNoArgs(path);
+  assertNoParams(path);
+  assertNoAttributes(path);
+
+  if (path.hub.file.markoOpts.output === "html") {
+    path.replaceWithMultiple([
+      writeHTML`<!--`,
+      ...path.node.body.body,
+      writeHTML`-->`,
+    ]);
+  } else {
+    const templateQuasis = [];
+    const templateExpressions = [];
+    let currentQuasi = "";
+    for (const child of path.node.body.body) {
+      if (t.isMarkoText(child)) {
+        currentQuasi += child.value;
+      } else if (t.isMarkoPlaceholder(child)) {
+        templateQuasis.push(t.templateElement({ raw: currentQuasi }));
+        templateExpressions.push(child.value);
+        currentQuasi = "";
+      }
+    }
+
+    let value;
+    if (templateExpressions.length === 0) {
+      value = t.stringLiteral(currentQuasi);
+    } else {
+      templateQuasis.push(t.templateElement({ raw: currentQuasi }));
+      value = t.templateLiteral(templateQuasis, templateExpressions);
+    }
+
+    path.replaceWith(
+      withPreviousLocation(
+        writeVDOM("comment", value, path.hub.file._componentInstanceIdentifier),
+        path.node,
+      ),
+    );
+  }
+}

package/src/translator/taglib/core/translate-include-content.js

@@ -0,0 +1,53 @@
+import { types as t } from "@marko/compiler";
+import {
+  assertNoAttributes,
+  assertNoParams,
+} from "@marko/compiler/babel-utils";
+import path from "path";
+
+export function enter(tag) {
+  const {
+    hub: { file },
+  } = tag;
+  assertNoParams(tag);
+  assertNoAttributes(tag);
+
+  const fs = file.markoOpts.fileSystem;
+  const tagName = tag.get("name").node.value;
+  const tagExample = `<${tagName}("./path-to-file.ext")>`;
+  const args = tag.get("arguments");
+
+  if (args.length !== 1) {
+    throw tag.buildCodeFrameError(
+      `A single path argument is required for ${tagExample}.`,
+    );
+  }
+
+  const [content] = args;
+
+  if (!content.isStringLiteral()) {
+    throw content.buildCodeFrameError(
+      `The argument to ${tagExample} must be a static string.`,
+    );
+  }
+
+  const dir = path.dirname(file.opts.filename);
+  const fullPath = path.resolve(dir, content.node.value);
+
+  try {
+    const stat = fs.statSync(fullPath);
+
+    if (!stat.isFile()) {
+      throw new Error();
+    }
+  } catch {
+    throw content.buildCodeFrameError(`Unable to find file for <${tagName}>.`);
+  }
+
+  tag.replaceWith(
+    t.markoPlaceholder(
+      t.stringLiteral(fs.readFileSync(fullPath).toString("utf-8")),
+      tagName === "include-text",
+    ),
+  );
+}

package/src/translator/taglib/core/translate-server-only.js

@@ -0,0 +1,5 @@
+export function enter(path) {
+  if (path.hub.file.markoOpts.output !== "html") {
+    path.remove();
+  }
+}

package/src/translator/taglib/core/translate-while.js

@@ -0,0 +1,32 @@
+import { types as t } from "@marko/compiler";
+import {
+  assertNoAttributes,
+  assertNoParams,
+  getArgOrSequence,
+} from "@marko/compiler/babel-utils";
+
+import withPreviousLocation from "../../util/with-previous-location";
+
+export function exit(path) {
+  assertNoParams(path);
+  assertNoAttributes(path);
+  const arg = getArgOrSequence(path);
+
+  if (!arg) {
+    throw path
+      .get("name")
+      .buildCodeFrameError(
+        "A condition is required for the <while(condition)> tag.",
+      );
+  }
+
+  path.replaceWith(
+    withPreviousLocation(
+      t.whileStatement(
+        getArgOrSequence(path),
+        t.blockStatement(path.node.body.body),
+      ),
+      path.node,
+    ),
+  );
+}

package/src/translator/taglib/index.js

@@ -0,0 +1,7 @@
+import coreTaglib from "./core";
+import migrateTaglib from "./migrate";
+export const optionalTaglibs = ["marko-widgets", "@marko/compat-v4"];
+export default [
+  ["marko/core", coreTaglib],
+  ["marko/migrate", migrateTaglib],
+];

package/src/translator/taglib/migrate/all-templates.js

@@ -0,0 +1,46 @@
+import { types as t } from "@marko/compiler";
+import { diagnosticDeprecate } from "@marko/compiler/babel-utils";
+
+import withPreviousLocation from "../../util/with-previous-location";
+const kHadAssignment = Symbol();
+
+export default {
+  AssignmentExpression(path, state) {
+    if (
+      !state[kHadAssignment] &&
+      path.node.left.type === "Identifier" &&
+      path.node.left.name === "data"
+    ) {
+      state[kHadAssignment] = true;
+
+      let root = path.parentPath;
+      while (root.parentPath.type !== "Program") {
+        root = root.parentPath;
+      }
+
+      root.insertBefore(
+        t.markoScriptlet([
+          t.variableDeclaration("var", [
+            t.variableDeclarator(t.identifier("data")),
+          ]),
+        ]),
+      );
+    }
+  },
+  ReferencedIdentifier(path, state) {
+    if (
+      !state[kHadAssignment] &&
+      path.node.name === "data" &&
+      !path.scope.hasBinding("data")
+    ) {
+      diagnosticDeprecate(path, {
+        label: "The 'data' variable is deprecated. Use 'input' instead.",
+        fix() {
+          path.replaceWith(
+            withPreviousLocation(t.identifier("input"), path.node),
+          );
+        },
+      });
+    }
+  },
+};

package/src/translator/taglib/migrate/index.js

@@ -0,0 +1,5 @@
+import * as migrateAllTemplates from "./all-templates";
+export default {
+  "taglib-id": "marko-default-migrate",
+  migrator: migrateAllTemplates,
+};

package/src/translator/text/index.js

@@ -0,0 +1,10 @@
+import translateHTML from "./index[html]";
+import translateVDOM from "./index[vdom]";
+
+export default function (path) {
+  if (path.hub.file.markoOpts.output === "html") {
+    translateHTML(path);
+  } else {
+    translateVDOM(path);
+  }
+}

package/src/translator/text/index[html].js

@@ -0,0 +1,12 @@
+import { types as t } from "@marko/compiler";
+
+import write from "../util/html-out-write";
+import withPreviousLocation from "../util/with-previous-location";
+
+export default function (path) {
+  const { node } = path;
+
+  path.replaceWith(
+    withPreviousLocation(write`${t.stringLiteral(node.value)}`, node),
+  );
+}

package/src/translator/text/index[vdom].js

@@ -0,0 +1,20 @@
+import { types as t } from "@marko/compiler";
+import { decode } from "he";
+
+import write from "../util/vdom-out-write";
+import withPreviousLocation from "../util/with-previous-location";
+
+export default function (path) {
+  const { node } = path;
+
+  path.replaceWith(
+    withPreviousLocation(
+      write(
+        "t",
+        t.stringLiteral(decode(node.value)),
+        path.hub.file._componentInstanceIdentifier,
+      ),
+      node,
+    ),
+  );
+}