marko 5.36.5 → 5.37.0

package/src/translator/tag/attribute/directives/class.js

@@ -0,0 +1,42 @@
+import { types as t } from "@marko/compiler";
+import {
+  computeNode,
+  importDefault,
+  isNativeTag,
+} from "@marko/compiler/babel-utils";
+import classToString from "marko/src/runtime/helpers/class-value";
+
+import withPreviousLocation from "../../../util/with-previous-location";
+
+export default {
+  exit(tag, _, value) {
+    const {
+      hub: { file },
+    } = tag;
+    if (!isNativeTag(tag)) return;
+
+    const computed = computeNode(value.node);
+    if (computed) {
+      const str = classToString(computed.value);
+      if (str) {
+        value.replaceWith(t.stringLiteral(str));
+      } else {
+        value.parentPath.remove();
+      }
+    } else if (!value.isTemplateLiteral()) {
+      value.replaceWith(
+        withPreviousLocation(
+          t.callExpression(
+            importDefault(
+              file,
+              "marko/src/runtime/helpers/class-value.js",
+              "marko_class_merge",
+            ),
+            [value.node],
+          ),
+          value.node,
+        ),
+      );
+    }
+  },
+};

package/src/translator/tag/attribute/directives/index.js

@@ -0,0 +1,15 @@
+import classPlugin from "./class";
+import noUpdatePlugin from "./no-update";
+import noUpdateBodyPlugin from "./no-update-body";
+import noUpdateBodyIfPlugin from "./no-update-body-if";
+import noUpdateIfPlugin from "./no-update-if";
+import stylePlugin from "./style";
+
+export default {
+  class: classPlugin,
+  style: stylePlugin,
+  "no-update": noUpdatePlugin,
+  "no-update-if": noUpdateIfPlugin,
+  "no-update-body": noUpdateBodyPlugin,
+  "no-update-body-if": noUpdateBodyIfPlugin,
+};

package/src/translator/tag/attribute/directives/no-update-body-if.js

@@ -0,0 +1,15 @@
+import { getArgOrSequence } from "@marko/compiler/babel-utils";
+
+import noUpdateTransform from "./no-update";
+
+export default {
+  enter(tag) {
+    tag.node.isPreserved = true;
+  },
+  exit(tag, attr, value) {
+    noUpdateTransform.exit(tag, attr, value, {
+      if: getArgOrSequence(attr),
+      bodyOnly: true,
+    });
+  },
+};

package/src/translator/tag/attribute/directives/no-update-body.js

@@ -0,0 +1,10 @@
+import noUpdateTransform from "./no-update";
+
+export default {
+  enter(tag) {
+    tag.node.isPreserved = true;
+  },
+  exit(tag, attr, value) {
+    noUpdateTransform.exit(tag, attr, value, { bodyOnly: true });
+  },
+};

package/src/translator/tag/attribute/directives/no-update-if.js

@@ -0,0 +1,12 @@
+import { getArgOrSequence } from "@marko/compiler/babel-utils";
+
+import noUpdateTransform from "./no-update";
+
+export default {
+  enter(tag) {
+    tag.node.isPreserved = true;
+  },
+  exit(tag, attr, value) {
+    noUpdateTransform.exit(tag, attr, value, { if: getArgOrSequence(attr) });
+  },
+};

package/src/translator/tag/attribute/directives/no-update.js

@@ -0,0 +1,48 @@
+import { types as t } from "@marko/compiler";
+import {
+  isNativeTag,
+  normalizeTemplateString,
+} from "@marko/compiler/babel-utils";
+const EMPTY_OBJECT = {};
+
+export default {
+  enter(tag) {
+    tag.node.isPreserved = true;
+  },
+  exit(tag, attr, _, opts = EMPTY_OBJECT) {
+    attr.remove();
+    const { node } = tag;
+    const replacement = t.markoTag(
+      t.stringLiteral("_preserve"),
+      [],
+      opts.bodyOnly ? node.body : t.markoTagBody([node]),
+    );
+
+    if (isNativeTag(tag)) {
+      replacement.key = node.key;
+      replacement.attributes.push(
+        t.markoAttribute("n", t.booleanLiteral(true)),
+      );
+
+      if (opts.bodyOnly) {
+        replacement.attributes.push(
+          t.markoAttribute("b", t.booleanLiteral(true)),
+        );
+      }
+    } else {
+      replacement.key = normalizeTemplateString`p_${node.key}`;
+    }
+
+    replacement.isPreserved = true;
+
+    if (opts.if) {
+      replacement.attributes.push(t.markoAttribute("i", opts.if));
+    }
+
+    if (opts.bodyOnly) {
+      tag.set("body", t.markoTagBody([replacement]));
+    } else {
+      tag.replaceWith(replacement);
+    }
+  },
+};

package/src/translator/tag/attribute/directives/style.js

@@ -0,0 +1,42 @@
+import { types as t } from "@marko/compiler";
+import {
+  computeNode,
+  importDefault,
+  isNativeTag,
+} from "@marko/compiler/babel-utils";
+import styleToString from "marko/src/runtime/helpers/style-value";
+
+import withPreviousLocation from "../../../util/with-previous-location";
+
+export default {
+  exit(tag, _, value) {
+    const {
+      hub: { file },
+    } = tag;
+    if (!isNativeTag(tag)) return;
+
+    const computed = computeNode(value.node);
+    if (computed) {
+      const str = styleToString(computed.value);
+      if (str) {
+        value.replaceWith(t.stringLiteral(str));
+      } else {
+        value.parentPath.remove();
+      }
+    } else if (!value.isTemplateLiteral()) {
+      value.replaceWith(
+        withPreviousLocation(
+          t.callExpression(
+            importDefault(
+              file,
+              "marko/src/runtime/helpers/style-value.js",
+              "marko_style_merge",
+            ),
+            [value.node],
+          ),
+          value.node,
+        ),
+      );
+    }
+  },
+};

package/src/translator/tag/attribute/index.js

@@ -0,0 +1,150 @@
+import {
+  getTagDef,
+  importDefault,
+  isNativeTag,
+} from "@marko/compiler/babel-utils";
+
+import directives from "./directives";
+import modifiers from "./modifiers";
+
+const EMPTY_ARRAY = [];
+const EVENT_REG = /^(on(?:ce)?)(-)?(.*)$/;
+const attachedDetachedLoaded = new WeakSet();
+
+export default {
+  enter(attr) {
+    const {
+      hub: { file },
+    } = attr;
+    const tag = attr.parentPath;
+    const value = attr.get("value");
+    const { name, arguments: args } = attr.node;
+    const isVDOM = file.markoOpts.output !== "html";
+
+    if (execModifiersAndDirectives("enter", tag, attr, value)) {
+      return;
+    }
+
+    // Event handlers.
+    let [, eventType, isDash, eventName] = EVENT_REG.exec(name) || EMPTY_ARRAY;
+
+    if (eventType && args) {
+      if (!args.length) {
+        throw attr.buildCodeFrameError("Event handler is missing arguments.");
+      }
+
+      if (!value.isBooleanLiteral(true)) {
+        throw value.buildCodeFrameError(
+          `"${name}(handler, ...args)" does not accept a value.`,
+        );
+      }
+
+      if (!isDash) {
+        // When the event is not in dash case we normalized differently for html tags and custom tags.
+
+        if (isNativeTag(tag)) {
+          // Lowercase the string
+          // Example: onMouseOver → mouseover
+          eventName = eventName.toLowerCase();
+        } else {
+          // Convert first character to lower case:
+          // Example: onBeforeShow → beforeShow
+          eventName = eventName.charAt(0).toLowerCase() + eventName.slice(1);
+        }
+      }
+
+      const handlers = (tag.node.handlers = tag.node.handlers || {});
+      if (handlers[eventName]) {
+        throw attr.buildCodeFrameError(
+          "Duplicate event handlers are not supported.",
+        );
+      }
+
+      handlers[eventName] = {
+        arguments: args,
+        once: eventType === "once",
+      };
+
+      if (isVDOM) {
+        if (eventName === "attach" || eventName === "detach") {
+          if (!attachedDetachedLoaded.has(file)) {
+            // Pull in helper for element attach/detach;
+            attachedDetachedLoaded.add(file);
+            importDefault(
+              file,
+              "marko/src/runtime/components/attach-detach.js",
+            );
+          }
+        }
+      }
+
+      attr.remove();
+      return;
+    }
+  },
+  exit(attr) {
+    const tag = attr.parentPath;
+    const { name, arguments: args } = attr.node;
+    const value = attr.get("value");
+
+    if (execModifiersAndDirectives("exit", tag, attr, value)) {
+      return;
+    }
+
+    const tagDef = getTagDef(tag);
+
+    if (tagDef) {
+      if (!tagDef.html && !tagDef.getAttribute(name)) {
+        throw attr.buildCodeFrameError(
+          `<${
+            tag.get("name.value").node
+          }> does not support the "${name}" attribute.`,
+        );
+      }
+    }
+
+    if (args && args.length) {
+      throw attr.buildCodeFrameError(
+        `Unsupported arguments on the "${name}" attribute.`,
+      );
+    }
+
+    if (attr.node.bound) {
+      throw attr.buildCodeFrameError(
+        `The binding syntax (:=) is only supported when using the "Tags API".`,
+      );
+    }
+  },
+};
+
+function execModifiersAndDirectives(type, tag, attr, value) {
+  const { node } = attr;
+  const { name, modifier } = node;
+
+  if (modifier) {
+    const modifierTranslate = modifiers[modifier];
+    if (modifierTranslate) {
+      if (modifierTranslate[type]) {
+        const tagNode = tag.node;
+        const attrNode = attr.node;
+        modifierTranslate[type](tag, attr, value);
+        if (tag.node !== tagNode || attr.node !== attrNode) return true;
+      }
+    } else if (name === "xlink" && modifier === "href" && isNativeTag(tag)) {
+      node.name += `:${modifier}`;
+      node.modifier = undefined;
+    } else {
+      throw attr.buildCodeFrameError(`Unsupported modifier "${modifier}".`);
+    }
+  }
+
+  const directiveTranslate = directives[name];
+  if (directiveTranslate) {
+    if (directiveTranslate[type]) {
+      const tagNode = tag.node;
+      const attrNode = attr.node;
+      directiveTranslate[type](tag, attr, value);
+      if (tag.node !== tagNode || attr.node !== attrNode) return true;
+    }
+  }
+}

package/src/translator/tag/attribute/modifiers/index.js

@@ -0,0 +1,7 @@
+import noUpdatePlugin from "./no-update";
+import scopedPlugin from "./scoped";
+
+export default {
+  scoped: scopedPlugin,
+  "no-update": noUpdatePlugin,
+};

package/src/translator/tag/attribute/modifiers/no-update.js

@@ -0,0 +1,14 @@
+/**
+ * Does nothing in html mode.
+ */
+export default {
+  exit(tag, attr) {
+    const { node } = tag;
+
+    if (!node.preserveAttrs) {
+      node.preserveAttrs = [];
+    }
+
+    node.preserveAttrs.push(attr.node.name);
+  },
+};

package/src/translator/tag/attribute/modifiers/scoped.js

@@ -0,0 +1,23 @@
+import { types as t } from "@marko/compiler";
+
+import withPreviousLocation from "../../../util/with-previous-location";
+
+export default {
+  exit(tag, _, value) {
+    const {
+      hub: { file },
+    } = tag;
+    value.replaceWith(
+      withPreviousLocation(
+        t.callExpression(
+          t.memberExpression(
+            file._componentDefIdentifier,
+            t.identifier("elId"),
+          ),
+          [value.node],
+        ),
+        value.node,
+      ),
+    );
+  },
+};

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

@@ -0,0 +1,149 @@
+import { types as t } from "@marko/compiler";
+import {
+  assertNoArgs,
+  findParentTag,
+  getFullyResolvedTagName,
+  getTagDef,
+  importNamed,
+  isAttributeTag,
+  isTransparentTag,
+} from "@marko/compiler/babel-utils";
+
+import { getAttrs } from "./util";
+
+const attributeTagsForTag = new WeakMap();
+const contentTypeCache = new WeakMap();
+const ContentType = {
+  attribute: 0,
+  render: 1,
+  mixed: 2,
+};
+
+export function analyzeAttributeTags(rootTag) {
+  const visit = [rootTag];
+  const parentTags = [rootTag];
+  let i = 0;
+  let attributeTags;
+
+  while (i < visit.length) {
+    const tag = visit[i++];
+    const attrTags = tag.node.body.attributeTags
+      ? tag.get("body").get("body")
+      : tag.get("attributeTags");
+    for (const child of attrTags) {
+      if (isAttributeTag(child)) {
+        assertNoArgs(child);
+        const tagDef = getTagDef(child) || {};
+        const name = getFullyResolvedTagName(child);
+        let {
+          targetProperty = child.node.name.value.slice(1),
+          isRepeated = false,
+        } = tagDef;
+
+        const preserveName =
+          tagDef.preserveName === true || tagDef.removeDashes === false;
+
+        if (!preserveName) {
+          targetProperty = removeDashes(targetProperty);
+        }
+
+        const attrTagMeta = ((attributeTags ||= {})[name] ||= {
+          targetProperty,
+          isRepeated,
+        });
+
+        (child.node.extra ||= {}).attributeTag = attrTagMeta;
+
+        const parentTag = findParentTag(child);
+        const parentTagExtra = (parentTag.node.extra ||= {});
+        const parentSeenAttributeTagProperties =
+          attributeTagsForTag.get(parentTag);
+        let hasAttributeTags = false;
+
+        if (!parentSeenAttributeTagProperties) {
+          parentTagExtra.hasAttributeTags = true;
+          attributeTagsForTag.set(parentTag, new Set([targetProperty]));
+        } else if (parentSeenAttributeTagProperties.has(targetProperty)) {
+          hasAttributeTags = true;
+        } else {
+          parentSeenAttributeTagProperties.add(targetProperty);
+        }
+
+        if (!hasAttributeTags) {
+          if (
+            parentTag
+              .get("attributes")
+              .some(
+                (attr) =>
+                  attr.isMarkoSpreadAttribute() ||
+                  attr.node.name === targetProperty,
+              )
+          ) {
+            parentTag.pushContainer(
+              "attributes",
+              t.markoAttribute(
+                targetProperty,
+                t.unaryExpression("void", t.numericLiteral(0)),
+              ),
+            );
+          }
+        }
+
+        parentTags.push(child);
+        visit.push(child);
+      } else if (isTransparentTag(child)) {
+        visit.push(child);
+      }
+    }
+  }
+
+  if (attributeTags) {
+    (rootTag.node.extra ??= {}).attributeTags = attributeTags;
+  }
+}
+
+export default function translateAttributeTag(tag) {
+  const { node } = tag;
+  const meta = node.extra?.attributeTag;
+  if (!meta) {
+    throw tag
+      .get("name")
+      .buildCodeFrameError("@tags must be nested within another element.");
+  }
+
+  assertNoArgs(tag);
+
+  tag.replaceWith(
+    t.expressionStatement(
+      t.callExpression(
+        importNamed(
+          tag.hub.file,
+          "marko/src/runtime/helpers/attr-tag.js",
+          meta.isRepeated ? "r" : "a",
+          meta.isRepeated
+            ? "marko_repeated_attr_tag"
+            : "marko_repeatable_attr_tag",
+        ),
+        [t.stringLiteral(meta.targetProperty), getAttrTagObject(tag)],
+      ),
+    ),
+  );
+}
+
+function getAttrTagObject(tag) {
+  const attrs = getAttrs(tag, false, true);
+
+  if (t.isNullLiteral(attrs)) {
+    return t.objectExpression([]);
+  }
+
+  return attrs;
+}
+
+function removeDashes(str) {
+  return str.replace(/-([a-z])/g, matchToUpperCase);
+}
+
+function matchToUpperCase(_match, lower) {
+  return lower.toUpperCase();
+}

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

@@ -0,0 +1,146 @@
+import { types as t } from "@marko/compiler";
+import {
+  assertNoArgs,
+  getTagDef,
+  importDefault,
+  loadFileForTag,
+  resolveRelativePath,
+  resolveTagImport,
+} from "@marko/compiler/babel-utils";
+
+import withPreviousLocation from "../util/with-previous-location";
+import dynamicTag from "./dynamic-tag";
+import nativeTag from "./native-tag";
+import { buildEventHandlerArray, getAttrs } from "./util";
+
+export default function (path, isNullable) {
+  const {
+    hub: { file },
+    node,
+  } = path;
+  const { markoOpts } = file;
+  const { name, key } = node;
+
+  assertNoArgs(path);
+
+  let tagIdentifier;
+
+  if (t.isStringLiteral(name)) {
+    const tagName = name.value;
+    let relativePath = node.extra && node.extra.relativePath;
+
+    if (!relativePath) {
+      const tagDef = getTagDef(path);
+      if (tagDef && tagDef.renderer) {
+        // Normally new tags should not be added in the translate stage.
+        // We make an exception here for core tags, init-components & _preserve being the primary culprits.
+        // TODO: in the future refactor so this is not needed.
+        relativePath = resolveRelativePath(file, tagDef.renderer);
+      }
+    }
+
+    let binding = !relativePath && path.scope.getBinding(tagName);
+    if (binding && !binding.identifier.loc) binding = null;
+
+    if (binding && binding.kind === "module") {
+      const importSource = binding.path.parent.source;
+      relativePath =
+        resolveTagImport(path, importSource.value) || importSource.value;
+      (node.extra ??= {}).tagNameImported = relativePath;
+      binding = undefined;
+    }
+
+    const childFile = loadFileForTag(path);
+    const childProgram = childFile?.ast.program;
+
+    if (childProgram?.extra?.featureType === "tags") {
+      const compatRuntimeFile = `marko/src/runtime/helpers/tags-compat/${
+        markoOpts.output === "html" ? "html" : "dom"
+      }${markoOpts.optimize ? "" : "-debug"}.${markoOpts.modules === "esm" ? "mjs" : "js"}`;
+      importDefault(file, compatRuntimeFile);
+      path.set("name", importDefault(file, relativePath, path.node.name.value));
+      return dynamicTag(path);
+    } else if (relativePath) {
+      if (binding) {
+        // TODO: implement auto migration for conflicts here
+        // and log below warning
+        // console.warn(
+        //   path.buildCodeFrameError(
+        //     `The <${tagName}> tag has been resolved from the filesystem, however a local variable with the same name exists. In the next major version of Marko the local variable will tag precedence.`
+        //   )
+        // );
+      }
+
+      tagIdentifier = importDefault(file, relativePath, tagName);
+    } else if (binding) {
+      path.set("name", t.identifier(tagName));
+      return dynamicTag(path);
+    } else if (markoOpts.ignoreUnrecognizedTags) {
+      return nativeTag(path);
+    } else {
+      throw path
+        .get("name")
+        .buildCodeFrameError(
+          `Unable to find entry point for custom tag <${tagName}>.`,
+        );
+    }
+  } else {
+    tagIdentifier = name;
+  }
+
+  const foundAttrs = getAttrs(path);
+  const customTagRenderCall = withPreviousLocation(
+    t.expressionStatement(
+      t.callExpression(
+        importDefault(
+          file,
+          "marko/src/runtime/helpers/render-tag.js",
+          "marko_tag",
+        ),
+        [
+          tagIdentifier,
+          // TODO: this could be left as null if we froze input mutations and used a default object in the runtime.
+          t.isNullLiteral(foundAttrs) ? t.objectExpression([]) : foundAttrs,
+          t.identifier("out"),
+          file._componentDefIdentifier,
+          key,
+          ...buildEventHandlerArray(path),
+        ],
+      ),
+    ),
+    node,
+  );
+
+  if (isNullable) {
+    let renderBodyIdentifier;
+    const renderBodyProp =
+      t.isObjectExpression(foundAttrs) &&
+      foundAttrs.properties.find(
+        (prop) => prop.key && prop.key.value === "renderBody",
+      );
+
+    if (renderBodyProp) {
+      renderBodyIdentifier = path.scope.generateUidIdentifier("renderBody");
+      path.insertBefore(
+        t.variableDeclaration("const", [
+          t.variableDeclarator(renderBodyIdentifier, renderBodyProp.value),
+        ]),
+      );
+
+      renderBodyProp.value = renderBodyIdentifier;
+    }
+
+    path.replaceWith(
+      t.ifStatement(
+        name,
+        customTagRenderCall,
+        renderBodyIdentifier &&
+          t.expressionStatement(
+            t.callExpression(renderBodyIdentifier, [t.identifier("out")]),
+          ),
+      ),
+    );
+  } else {
+    path.replaceWith(customTagRenderCall);
+  }
+}