marko 5.36.4 → 5.37.0

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

@@ -0,0 +1,74 @@
+import { types as t } from "@marko/compiler";
+import { importDefault } from "@marko/compiler/babel-utils";
+
+import withPreviousLocation from "../util/with-previous-location";
+import { buildEventHandlerArray, getAttrs } from "./util";
+
+export default function (path) {
+  const {
+    node,
+    hub: { file },
+  } = path;
+  const tagProperties = (path.node.extra && path.node.extra.properties) || [];
+  const { key, arguments: args } = node;
+  const foundAttrs = getAttrs(path, true);
+  let renderBodyProp;
+  let attrsLen = t.isNullLiteral(foundAttrs) ? 0 : 1;
+
+  if (node.preserveAttrs) {
+    tagProperties.push(
+      t.objectProperty(
+        t.identifier("pa"),
+        t.objectExpression(
+          node.preserveAttrs.map((name) =>
+            t.objectProperty(
+              t.isValidIdentifier(name)
+                ? t.identifier(name)
+                : t.stringLiteral(name),
+              t.numericLiteral(1),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  if (t.isObjectExpression(foundAttrs)) {
+    const renderBodyIndex = foundAttrs.properties.findIndex(
+      (prop) => prop.key && prop.key.value === "renderBody",
+    );
+
+    attrsLen = foundAttrs.properties.length;
+
+    if (renderBodyIndex > -1) {
+      renderBodyProp = foundAttrs.properties[renderBodyIndex];
+      foundAttrs.properties.splice(renderBodyIndex, 1);
+      attrsLen--;
+    }
+  }
+
+  const dynamicTagRenderCall = t.expressionStatement(
+    t.callExpression(
+      importDefault(
+        file,
+        `marko/src/runtime/helpers/dynamic-tag.js`,
+        "marko_dynamic_tag",
+      ),
+      [
+        t.identifier("out"),
+        node.name,
+        attrsLen ? t.arrowFunctionExpression([], foundAttrs) : t.nullLiteral(),
+        renderBodyProp ? renderBodyProp.value : t.nullLiteral(),
+        args && args.length ? t.arrayExpression(args) : t.nullLiteral(),
+        tagProperties.length
+          ? t.objectExpression(tagProperties)
+          : t.nullLiteral(),
+        file._componentDefIdentifier,
+        key,
+        ...buildEventHandlerArray(path),
+      ],
+    ),
+  );
+
+  path.replaceWith(withPreviousLocation(dynamicTagRenderCall, node));
+}

package/src/translator/tag/index.js

@@ -0,0 +1,287 @@
+import { types as t } from "@marko/compiler";
+import {
+  assertNoVar,
+  findAttributeTags,
+  getTagDef,
+  isAttributeTag,
+  isDynamicTag,
+  isMacroTag,
+  isNativeTag,
+  isTransparentTag,
+  resolveTagImport,
+} from "@marko/compiler/babel-utils";
+import nodePath from "path";
+
+import { getKeyManager } from "../util/key-manager";
+import { optimizeStaticVDOM } from "../util/optimize-vdom-create";
+import { enter, exit } from "../util/plugin-hooks";
+import attributeTranslators from "./attribute";
+import attributeTag, { analyzeAttributeTags } from "./attribute-tag";
+import customTag from "./custom-tag";
+import dynamicTag from "./dynamic-tag";
+import macroTag from "./macro-tag";
+import nativeTag from "./native-tag";
+
+export default {
+  enter(path) {
+    const tagDef = getTagDef(path);
+
+    if (tagDef && tagDef.translator) {
+      const { node } = path;
+      enter(tagDef.translator.hook, path, t);
+
+      if (path.node !== node) {
+        return;
+      }
+    }
+
+    assertNoVar(path);
+
+    for (const attr of path.get("attributes")) {
+      if (attr.isMarkoAttribute()) {
+        const { node } = path;
+        attributeTranslators.enter(attr);
+        if (path.node !== node) {
+          return;
+        }
+      }
+    }
+
+    if (!isAttributeTag(path)) {
+      if (
+        !tagDef &&
+        path.hub.file.markoOpts.ignoreUnrecognizedTags &&
+        (path.node.attributeTags.length || path.node.body.attributeTags) &&
+        !isDynamicTag(path)
+      ) {
+        moveIgnoredAttrTags(path);
+      }
+
+      if (isDynamicTag(path) || !(isMacroTag(path) || isNativeTag(path))) {
+        analyzeAttributeTags(path);
+      }
+
+      getKeyManager(path).resolveKey(path);
+    }
+
+    optimizeStaticVDOM(path);
+  },
+  exit(path) {
+    let isUnknownDynamic = false;
+    let isDynamicNullable = false;
+
+    if (isDynamicTag(path)) {
+      const name = path.get("name");
+      const types = findDynamicTagTypes(name);
+      if (types && !(types.string && types.component)) {
+        if (!name.isIdentifier()) {
+          const tagIdentifier = path.scope.generateUidIdentifier(`tagName`);
+          path.insertBefore(
+            t.variableDeclaration("const", [
+              t.variableDeclarator(tagIdentifier, name.node),
+            ]),
+          );
+
+          name.replaceWith(tagIdentifier);
+        }
+
+        isDynamicNullable = types.empty;
+        path.node._isDynamicString = types.string;
+      } else {
+        isUnknownDynamic = true;
+      }
+    }
+
+    for (const attr of path.get("attributes")) {
+      if (attr.isMarkoAttribute()) {
+        const { node } = path;
+        attributeTranslators.exit(attr);
+        if (path.node !== node) {
+          return;
+        }
+      }
+    }
+
+    if (isUnknownDynamic) {
+      return dynamicTag(path);
+    }
+
+    if (isAttributeTag(path)) {
+      return attributeTag(path);
+    }
+
+    if (isMacroTag(path)) {
+      return macroTag(path);
+    }
+
+    const tagDef = getTagDef(path);
+
+    if (tagDef && tagDef.translator) {
+      const { node } = path;
+
+      exit(tagDef.translator.hook, path, t);
+
+      if (path.node !== node) {
+        return;
+      }
+    }
+
+    if (isNativeTag(path)) {
+      return nativeTag(path, isDynamicNullable);
+    } else {
+      return customTag(path, isDynamicNullable);
+    }
+  },
+};
+
+const HANDLE_BINDINGS = ["module", "var", "let", "const"];
+function findDynamicTagTypes(root) {
+  const pending = [root];
+  const types = {
+    string: false,
+    empty: false,
+    component: false,
+  };
+  let tagNameImported;
+
+  let path;
+  while ((path = pending.pop())) {
+    switch (path.type) {
+      case "ConditionalExpression":
+        pending.push(path.get("consequent"));
+
+        if (path.get("alternate").node) {
+          pending.push(path.get("alternate"));
+        }
+        break;
+
+      case "LogicalExpression":
+        if (path.get("operator").node === "||") {
+          pending.push(path.get("left"));
+        } else {
+          types.empty = true;
+        }
+
+        pending.push(path.get("right"));
+        break;
+
+      case "AssignmentExpression":
+        pending.push(path.get("right"));
+        break;
+
+      case "BinaryExpression":
+        if (path.get("operator").node !== "+") {
+          return false;
+        }
+
+        types.string = true;
+        break;
+
+      case "StringLiteral":
+      case "TemplateLiteral":
+        types.string = true;
+        break;
+
+      case "NullLiteral":
+        types.empty = true;
+        break;
+
+      case "Identifier":
+        if (path.get("name").node === "undefined") {
+          types.empty = true;
+        } else {
+          const binding = path.scope.getBinding(path.node.name);
+
+          if (!binding || !HANDLE_BINDINGS.includes(binding.kind)) {
+            return false;
+          }
+
+          if (binding.kind === "module") {
+            const importSource = binding.path.parent.source;
+            if (
+              t.isStringLiteral(importSource) &&
+              isMarkoFile(importSource.value)
+            ) {
+              const resolvedImport =
+                resolveTagImport(root.parentPath, importSource.value) ||
+                importSource.value;
+
+              if (tagNameImported === undefined) {
+                tagNameImported = resolvedImport;
+              } else if (
+                tagNameImported &&
+                tagNameImported !== resolvedImport
+              ) {
+                tagNameImported = null;
+              }
+
+              types.component = true;
+            } else {
+              return false;
+            }
+          } else {
+            const initialValue = binding.path.get("init");
+            if (initialValue.node) {
+              pending.push(initialValue);
+            } else {
+              types.empty = true;
+            }
+
+            const assignments = binding.constantViolations;
+            if (assignments && assignments.length) {
+              for (const assignment of assignments) {
+                const operator = assignment.get("operator").node;
+                if (operator === "=") {
+                  pending.push(assignment.get("right"));
+                } else if (operator === "+=") {
+                  types.string = true;
+                } else {
+                  return false;
+                }
+              }
+            }
+          }
+        }
+        break;
+
+      default:
+        return false;
+    }
+  }
+
+  if (tagNameImported && !types.string) {
+    (root.parent.extra ??= {}).tagNameImported = tagNameImported;
+  }
+
+  return types;
+}
+
+function isMarkoFile(request) {
+  return nodePath.extname(request) === ".marko" || /^<.*>$/.test(request);
+}
+
+function moveIgnoredAttrTags(parentTag) {
+  const attrTags = parentTag.node.body.attributeTags
+    ? parentTag.get("body").get("body")
+    : parentTag.get("attributeTags");
+
+  if (!attrTags.length) return;
+
+  for (const attrTag of attrTags) {
+    if (attrTag.isMarkoTag()) {
+      if (isAttributeTag(attrTag)) {
+        attrTag.set(
+          "name",
+          t.stringLiteral(`at_${attrTag.get("name.value").node.slice(1)}`),
+        );
+      }
+
+      moveIgnoredAttrTags(attrTag);
+    }
+  }
+
+  parentTag.node.body.body = parentTag.node.attributeTags.concat(
+    parentTag.node.body.body,
+  );
+  parentTag.node.attributeTags = [];
+}

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

@@ -0,0 +1,7 @@
+import { getMacroIdentifier } from "@marko/compiler/babel-utils";
+
+export default function (path) {
+  path.node.name = getMacroIdentifier(path);
+  path.node._isMacroTagCall = true;
+  path.requeue();
+}

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

@@ -0,0 +1,27 @@
+import {
+  assertNoArgs,
+  assertNoAttributeTags,
+  assertNoParams,
+} from "@marko/compiler/babel-utils";
+
+import nativeTagHtml from "./native-tag[html]";
+import nativeTagVdom from "./native-tag[vdom]";
+
+export default function (path, isNullable) {
+  const {
+    hub: { file },
+  } = path;
+  const { markoOpts } = file;
+
+  if (!markoOpts.ignoreUnrecognizedTags) {
+    assertNoArgs(path);
+    assertNoParams(path);
+    assertNoAttributeTags(path);
+  }
+
+  if (markoOpts.output === "html") {
+    nativeTagHtml(path, isNullable);
+  } else {
+    nativeTagVdom(path, isNullable);
+  }
+}

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

@@ -0,0 +1,151 @@
+import { types as t } from "@marko/compiler";
+import {
+  importDefault,
+  importNamed,
+  normalizeTemplateString,
+} from "@marko/compiler/babel-utils";
+import attrHelper from "marko/src/runtime/html/helpers/attr";
+import { d as escapeDoubleQuotes } from "marko/src/runtime/html/helpers/escape-quotes";
+
+import { evaluateAttr } from "../util";
+
+export default function (path, attrs) {
+  const len = attrs.length;
+  if (len === 0) return t.stringLiteral("");
+  if (len === 1 && attrs[0].node.type === "MarkoSpreadAttribute") {
+    return t.callExpression(
+      importDefault(
+        path.hub.file,
+        "marko/src/runtime/html/helpers/attrs.js",
+        "marko_attrs",
+      ),
+      [attrs[0].node.value],
+    );
+  }
+
+  if (attrs.some((attr) => attr.node.type === "MarkoSpreadAttribute")) {
+    const attrsObjects = [];
+    let props;
+
+    for (let i = 0; i < len; i++) {
+      const attr = attrs[i];
+      const {
+        node: { name, value },
+      } = attr;
+
+      if (name) {
+        const computed = evaluateAttr(attr);
+        const prop = t.objectProperty(
+          t.stringLiteral(name),
+          computed?.value !== undefined
+            ? t.stringLiteral(computed.value)
+            : value,
+        );
+        if (props) {
+          props.push(prop);
+        } else {
+          attrsObjects.push(t.objectExpression((props = [prop])));
+        }
+      } else {
+        attrsObjects.push(value);
+        props = undefined;
+      }
+    }
+
+    return t.callExpression(
+      importDefault(
+        path.hub.file,
+        "marko/src/runtime/html/helpers/merge-attrs.js",
+        "marko_merge_attrs",
+      ),
+      attrsObjects,
+    );
+  }
+
+  const file = path.hub.file;
+  const quasis = [];
+  const expressions = [];
+  const attrValues = new Map();
+  let curString = "";
+
+  // Remove duplicate attrs so last one wins.
+  for (let i = len; i--; ) {
+    const attr = attrs[i];
+    const { name, value } = attr.node;
+    if (attrValues.has(name)) continue;
+    const computed = evaluateAttr(attr);
+    attrValues.set(
+      name,
+      computed
+        ? {
+            confident: true,
+            computed: computed.value,
+            value,
+          }
+        : {
+            confident: false,
+            computed: undefined,
+            value,
+          },
+    );
+  }
+
+  for (const [name, { confident, computed, value }] of [
+    ...attrValues,
+  ].reverse()) {
+    if (confident) {
+      if (computed == null || computed === false) {
+        continue;
+      }
+
+      curString += attrHelper(name, computed);
+    } else if (value.type === "TemplateLiteral") {
+      curString += " " + name + '="';
+
+      for (let i = 0; i < value.expressions.length; i++) {
+        const quasi = value.quasis[i];
+        const expression = value.expressions[i];
+        curString += escapeDoubleQuotes(quasi.value.cooked);
+        quasis.push(curString);
+        curString = "";
+        expressions.push(
+          t.callExpression(
+            importNamed(
+              file,
+              "marko/src/runtime/html/helpers/escape-quotes.js",
+              "d",
+              "marko_escape_double_quotes",
+            ),
+            [expression],
+          ),
+        );
+      }
+
+      curString +=
+        escapeDoubleQuotes(
+          value.quasis[value.expressions.length].value.cooked,
+        ) + '"';
+    } else {
+      quasis.push(curString);
+      curString = "";
+      expressions.push(
+        t.callExpression(
+          importDefault(
+            file,
+            "marko/src/runtime/html/helpers/attr.js",
+            "marko_attr",
+          ),
+          [t.stringLiteral(name), value],
+        ),
+      );
+    }
+  }
+
+  quasis.push(curString);
+
+  if (expressions.length) {
+    return normalizeTemplateString(quasis, ...expressions);
+  } else {
+    return t.stringLiteral(quasis.join(""));
+  }
+}