babel-plugin-essor 0.0.10-beta.22 → 0.0.10

package/dist/index.js

@@ -0,0 +1,700 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/jsx/index.ts
+import { types as t3 } from "@babel/core";
+
+// ../shared/dist/shared.js
+var isArray = Array.isArray;
+function isString(val) {
+  return typeof val === "string";
+}
+var noop = Function.prototype;
+function startsWith(str, searchString) {
+  if (!isString(str)) {
+    return false;
+  }
+  return str.indexOf(searchString) === 0;
+}
+var capitalizeFirstLetter = (inputString) => {
+  return inputString.charAt(0).toUpperCase() + inputString.slice(1);
+};
+
+// src/program.ts
+import { types as t } from "@babel/core";
+var imports = /* @__PURE__ */ new Set();
+var defaultOption = {
+  ssg: false,
+  symbol: "$",
+  props: true
+};
+var transformProgram = {
+  enter(path, state) {
+    imports.clear();
+    state.opts = __spreadValues(__spreadValues({}, defaultOption), state.opts);
+    path.state = {
+      h: path.scope.generateUidIdentifier("h$"),
+      renderTemplate: path.scope.generateUidIdentifier("renderTemplate$"),
+      template: path.scope.generateUidIdentifier("template$"),
+      useSignal: path.scope.generateUidIdentifier("signal$"),
+      useComputed: path.scope.generateUidIdentifier("computed$"),
+      useReactive: path.scope.generateUidIdentifier("reactive$"),
+      tmplDeclaration: t.variableDeclaration("const", []),
+      opts: state.opts
+    };
+  },
+  exit(path) {
+    const state = path.state;
+    if (state.tmplDeclaration.declarations.length > 0) {
+      const index = path.node.body.findIndex(
+        (node) => !t.isImportDeclaration(node) && !t.isExportDeclaration(node)
+      );
+      path.node.body.splice(index, 0, state.tmplDeclaration);
+    }
+    if (imports.size > 0) {
+      path.node.body.unshift(createImport(state, "essor"));
+    }
+  }
+};
+function createImport(state, from) {
+  const ImportSpecifier = [];
+  imports.forEach((name) => {
+    const local = t.identifier(state[name].name);
+    const imported = t.identifier(name);
+    ImportSpecifier.push(t.importSpecifier(local, imported));
+  });
+  const importSource = t.stringLiteral(from);
+  return t.importDeclaration(ImportSpecifier, importSource);
+}
+
+// src/shared.ts
+import { types as t2 } from "@babel/core";
+function hasSiblingElement(path) {
+  const siblings = path.getAllPrevSiblings().concat(path.getAllNextSiblings());
+  const hasSibling = siblings.some(
+    (siblingPath) => siblingPath.isJSXElement() || siblingPath.isJSXExpressionContainer()
+  );
+  return hasSibling;
+}
+function getAttrName(attribute) {
+  if (t2.isJSXIdentifier(attribute.name)) {
+    return attribute.name.name;
+  }
+  if (t2.isJSXNamespacedName(attribute.name)) {
+    return `${attribute.name.namespace.name}:${attribute.name.name.name}`;
+  }
+  throw new Error("Unsupported attribute type");
+}
+function getTagName(node) {
+  const tag = node.openingElement.name;
+  return jsxElementNameToString(tag);
+}
+function jsxElementNameToString(node) {
+  if (t2.isJSXMemberExpression(node)) {
+    return `${jsxElementNameToString(node.object)}.${jsxElementNameToString(node.property)}`;
+  }
+  if (t2.isJSXIdentifier(node) || t2.isIdentifier(node)) {
+    return node.name;
+  }
+  return `${node.namespace.name}:${node.name.name}`;
+}
+function isComponent(tagName) {
+  return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-z]/i.test(tagName[0]);
+}
+function isTextChild(path) {
+  if (path.isJSXExpressionContainer()) {
+    const expression = path.get("expression");
+    if (expression.isJSXText() || expression.isStringLiteral() || expression.isNumericLiteral()) {
+      return true;
+    }
+  }
+  if (path.isJSXText() || path.isStringLiteral() || path.isNullLiteral()) {
+    return true;
+  }
+  return false;
+}
+function setNodeText(path, text) {
+  if (path.isJSXText()) {
+    path.node.value = text;
+  }
+  if (path.isJSXExpressionContainer()) {
+    const expression = path.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      expression.replaceWith(t2.stringLiteral(text));
+    }
+  }
+}
+function isSymbolStart(path, name) {
+  const state = path.state;
+  const { symbol } = state.opts;
+  return startsWith(name, symbol);
+}
+
+// src/jsx/constants.ts
+var selfClosingTags = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+var svgTags = [
+  "circle",
+  "clipPath",
+  "defs",
+  "ellipse",
+  "filter",
+  "g",
+  "line",
+  "linearGradient",
+  "mask",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "stop",
+  "symbol",
+  "text",
+  "use"
+];
+
+// src/jsx/index.ts
+var isSsg = false;
+function addToTemplate(result, content) {
+  if (isSsg) {
+    result.template.push(content);
+  } else {
+    result.template += content;
+  }
+}
+function transformJSX(path) {
+  const state = path.state;
+  isSsg = state.opts.ssg;
+  const result = {
+    index: 1,
+    isLastChild: false,
+    parentIndex: 0,
+    props: {},
+    template: isSsg ? [] : ""
+  };
+  transformJSXElement(path, result, true);
+  path.replaceWith(createEssorNode(path, result));
+}
+function createEssorNode(path, result) {
+  var _a;
+  const state = path.state;
+  let tmpl;
+  if (path.isJSXElement() && isComponent(getTagName(path.node))) {
+    tmpl = t3.identifier(getTagName(path.node));
+  } else {
+    tmpl = path.scope.generateUidIdentifier("_tmpl$");
+    const template = isSsg ? t3.arrayExpression(result.template.map(t3.stringLiteral)) : t3.callExpression(state.template, [t3.stringLiteral(result.template)]);
+    const declarator = t3.variableDeclarator(tmpl, template);
+    state.tmplDeclaration.declarations.push(declarator);
+    if (!isSsg) {
+      imports.add("template");
+    }
+  }
+  const args = [tmpl, createProps(result.props)];
+  const key = result.props.key || ((_a = result.props[0]) == null ? void 0 : _a.key);
+  if (key) {
+    args.push(key);
+  }
+  imports.add(isSsg ? "renderTemplate" : "h");
+  return t3.callExpression(isSsg ? state.renderTemplate : state.h, args);
+}
+function createProps(props) {
+  const toAstNode = (value) => {
+    if (Array.isArray(value)) {
+      return t3.arrayExpression(value.map(toAstNode));
+    }
+    if (value && typeof value === "object" && !t3.isNode(value)) {
+      return createProps(value);
+    }
+    switch (typeof value) {
+      case "string":
+        return t3.stringLiteral(value);
+      case "number":
+        return t3.numericLiteral(value);
+      case "boolean":
+        return t3.booleanLiteral(value);
+      case "undefined":
+        return t3.tsUndefinedKeyword();
+      case void 0:
+        return t3.tsUndefinedKeyword();
+      case null:
+        return t3.nullLiteral();
+      default:
+        return value;
+    }
+  };
+  const result = Object.keys(props).filter((prop) => prop !== "key").map((prop) => {
+    const value = toAstNode(props[prop]);
+    return prop === "_$spread$" ? t3.spreadElement(value) : t3.objectProperty(t3.stringLiteral(prop), value);
+  });
+  return t3.objectExpression(result);
+}
+function transformJSXElement(path, result, isRoot = false) {
+  if (path.isJSXElement()) {
+    const tagName = getTagName(path.node);
+    const tagIsComponent = isComponent(tagName);
+    const isSelfClose = !tagIsComponent && selfClosingTags.includes(tagName);
+    const isSvg = svgTags.includes(tagName) && result.index === 1;
+    const props = getAttrProps(path);
+    if (tagIsComponent) {
+      if (isRoot) {
+        result.props = props;
+        const children = getChildren(path);
+        if (children.length > 0) {
+          const childrenGenerator = children.length === 1 ? children[0] : t3.arrayExpression(children);
+          result.props.children = childrenGenerator;
+        }
+      } else {
+        transformJSX(path);
+        replaceChild(path.node, result);
+      }
+    } else {
+      if (isSvg) {
+        result.template = isSsg ? ["<svg _svg_>"] : "<svg _svg_>";
+      }
+      addToTemplate(result, `<${tagName}`);
+      handleAttributes(props, result);
+      addToTemplate(result, isSelfClose ? "/>" : ">");
+      if (!isSelfClose) {
+        transformChildren(path, result);
+        if (hasSiblingElement(path)) {
+          addToTemplate(result, `</${tagName}>`);
+        }
+      }
+    }
+  } else {
+    result.index--;
+    transformChildren(path, result);
+  }
+}
+function transformChildren(path, result) {
+  const parentIndex = isSsg ? result.template.length : result.index;
+  path.get("children").reduce((pre, cur) => {
+    if (isValidChild(cur)) {
+      const lastChild = pre.at(-1);
+      if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
+        setNodeText(lastChild, getNodeText(lastChild) + getNodeText(cur));
+      } else {
+        pre.push(cur);
+      }
+    }
+    return pre;
+  }, []).forEach((child, i, arr) => {
+    result.parentIndex = parentIndex;
+    result.isLastChild = i === arr.length - 1;
+    transformChild(child, result);
+  });
+}
+function transformChild(child, result) {
+  result.index++;
+  if (child.isJSXElement() || child.isJSXFragment()) {
+    transformJSXElement(child, result, false);
+  } else if (child.isJSXExpressionContainer()) {
+    const expression = child.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      addToTemplate(result, String(expression.node.value));
+    } else if (expression.isExpression()) {
+      replaceChild(expression.node, result);
+    } else if (t3.isJSXEmptyExpression(expression.node)) {
+    } else {
+      throw new Error("Unsupported child type");
+    }
+  } else if (child.isJSXText()) {
+    addToTemplate(result, String(child.node.value));
+  } else {
+    throw new Error("Unsupported child type");
+  }
+}
+function getNodeText(path) {
+  if (path.isJSXText()) {
+    return path.node.value;
+  }
+  if (path.isJSXExpressionContainer()) {
+    const expression = path.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      return String(expression.node.value);
+    }
+  }
+  return "";
+}
+function handleAttributes(props, result) {
+  let klass = "";
+  let style = "";
+  for (const prop in props) {
+    let value = props[prop];
+    if (prop === "class" && typeof value === "string") {
+      klass += ` ${value}`;
+      delete props[prop];
+      continue;
+    }
+    if (prop === "style" && typeof value === "string") {
+      style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
+      delete props[prop];
+      continue;
+    }
+    if (value === true) {
+      addToTemplate(result, ` ${prop}`);
+      delete props[prop];
+    }
+    if (value === false) {
+      delete props[prop];
+    }
+    if (typeof value === "string" || typeof value === "number") {
+      addToTemplate(result, ` ${prop}="${value}"`);
+      delete props[prop];
+    }
+    if (t3.isConditionalExpression(value)) {
+      const { test, consequent, alternate } = value;
+      value = t3.arrowFunctionExpression([], t3.conditionalExpression(test, consequent, alternate));
+      props[prop] = value;
+    }
+    if (t3.isObjectExpression(value)) {
+      let hasConditional = false;
+      value.properties.forEach((property) => {
+        if (t3.isObjectProperty(property) && t3.isConditionalExpression(property.value)) {
+          hasConditional = true;
+        }
+      });
+      if (hasConditional) {
+        value = t3.arrowFunctionExpression([], value);
+        props[prop] = value;
+      } else {
+        if (prop === "style") {
+          value.properties.forEach((property) => {
+            if (t3.isObjectProperty(property)) {
+              style += `${property.key.name}:${property.value.value};`;
+            }
+          });
+          delete props[prop];
+        }
+      }
+    }
+  }
+  if (Object.keys(props).length > 0) {
+    result.props[result.index] = props;
+  }
+  klass = klass.trim();
+  style = style.trim();
+  if (klass) {
+    addToTemplate(result, ` class="${klass}"`);
+  }
+  if (style) {
+    addToTemplate(result, ` style="${style}"`);
+  }
+}
+function replaceChild(node, result) {
+  var _a, _b, _c, _d, _e;
+  if (result.isLastChild) {
+    result.index--;
+  } else {
+    addToTemplate(result, "<!>");
+  }
+  (_c = (_a = result.props)[_b = result.parentIndex]) != null ? _c : _a[_b] = {};
+  (_e = (_d = result.props[result.parentIndex]).children) != null ? _e : _d.children = [];
+  result.props[result.parentIndex].children.push(
+    t3.arrayExpression([
+      t3.arrowFunctionExpression([], node),
+      result.isLastChild ? t3.nullLiteral() : t3.identifier(String(result.index))
+    ])
+  );
+}
+function getChildren(path) {
+  return path.get("children").filter((child) => isValidChild(child)).map((child) => {
+    if (child.isJSXElement() || child.isJSXFragment()) {
+      transformJSX(child);
+    } else if (child.isJSXExpressionContainer()) {
+      child.replaceWith(child.get("expression"));
+    } else if (child.isJSXText()) {
+      child.replaceWith(t3.stringLiteral(child.node.value));
+    } else {
+      throw new Error("Unsupported child type");
+    }
+    return child.node;
+  });
+}
+function isValidChild(path) {
+  const regex = /^\s*$/;
+  if (path.isStringLiteral() || path.isJSXText()) {
+    return !regex.test(path.node.value);
+  }
+  return Object.keys(path.node).length > 0;
+}
+function getAttrProps(path) {
+  const props = {};
+  path.get("openingElement").get("attributes").forEach((attribute) => {
+    if (attribute.isJSXAttribute()) {
+      const name = getAttrName(attribute.node);
+      const value = attribute.get("value");
+      if (!value.node) {
+        props[name] = true;
+      } else if (value.isStringLiteral()) {
+        props[name] = value.node.value;
+      } else {
+        if (value.isJSXExpressionContainer()) {
+          const expression = value.get("expression");
+          if (expression.isStringLiteral()) {
+            props[name] = expression.node.value;
+          } else if (expression.isNumericLiteral()) {
+            props[name] = expression.node.value;
+          } else if (expression.isJSXElement() || expression.isJSXFragment()) {
+            transformJSX(expression);
+            props[name] = expression.node;
+          } else if (expression.isExpression()) {
+            if (/^key|ref|on.+$/.test(name)) {
+              props[name] = expression.node;
+            } else if (/^bind:.+/.test(name)) {
+              const value2 = path.scope.generateUidIdentifier("value");
+              const bindName = name.slice(5).toLocaleLowerCase();
+              props[bindName] = expression.node;
+              props[`update${capitalizeFirstLetter(bindName)}`] = t3.arrowFunctionExpression(
+                [value2],
+                t3.assignmentExpression("=", expression.node, value2)
+              );
+            } else {
+              if (expression.isConditionalExpression()) {
+                props[name] = t3.arrowFunctionExpression([], expression.node);
+              } else {
+                props[name] = expression.node;
+              }
+            }
+          }
+        } else if (value.isJSXElement() || value.isJSXFragment()) {
+          transformJSX(value);
+          props[name] = value.node;
+        }
+      }
+    } else if (attribute.isJSXSpreadAttribute()) {
+      props._$spread$ = attribute.get("argument").node;
+    } else {
+      throw new Error("Unsupported attribute type");
+    }
+  });
+  return props;
+}
+
+// src/signal/symbol.ts
+import { types as t4 } from "@babel/core";
+function replaceSymbol(path) {
+  const init = path.node.init;
+  const variableName = path.node.id.name;
+  if (t4.isObjectPattern(path.node.id) || t4.isArrayPattern(path.node.id)) {
+    return;
+  }
+  if (!isSymbolStart(path, variableName)) {
+    return;
+  }
+  if (init && (t4.isFunctionExpression(init) || t4.isArrowFunctionExpression(init)) && path.parent.kind === "const") {
+    const newInit = t4.callExpression(t4.identifier(path.state.useComputed.name), init ? [init] : []);
+    imports.add("useComputed");
+    path.node.init = newInit;
+  } else {
+    const newInit = t4.callExpression(t4.identifier(path.state.useSignal.name), init ? [init] : []);
+    imports.add("useSignal");
+    path.node.init = newInit;
+  }
+}
+function symbolIdentifier(path) {
+  const parentPath = path.parentPath;
+  if (!parentPath || t4.isVariableDeclarator(parentPath) || t4.isImportSpecifier(parentPath) || t4.isObjectProperty(parentPath) || t4.isArrayPattern(parentPath) || t4.isObjectPattern(parentPath)) {
+    return;
+  }
+  const { node } = path;
+  if (isSymbolStart(path, node.name)) {
+    let currentPath = path;
+    while (currentPath.parentPath && !currentPath.parentPath.isProgram()) {
+      if (currentPath.parentPath.isMemberExpression() && currentPath.parentPath.node.property.name === "value") {
+        return;
+      }
+      currentPath = currentPath.parentPath;
+    }
+    const newNode = t4.memberExpression(t4.identifier(node.name), t4.identifier("value"));
+    path.replaceWith(newNode);
+  }
+}
+function symbolObjectPattern(path) {
+  path.node.properties.forEach((property) => {
+    if (t4.isObjectProperty(property) && t4.isIdentifier(property.key) && isSymbolStart(path, property.key.name)) {
+      const newKey = t4.identifier(property.key.name);
+      property.key = newKey;
+    }
+  });
+}
+function symbolArrayPattern(path) {
+  path.node.elements.forEach((element) => {
+    if (t4.isIdentifier(element) && element.name.startsWith("$")) {
+      const newElement = t4.identifier(element.name);
+      element.name = newElement.name;
+    } else if (t4.isObjectPattern(element)) {
+      element.properties.forEach((property) => {
+        if (t4.isObjectProperty(property) && t4.isIdentifier(property.key) && isSymbolStart(path, property.key.name)) {
+          const newKey = t4.identifier(property.key.name);
+          property.key = newKey;
+        }
+      });
+    }
+  });
+}
+
+// src/signal/import.ts
+import { types as t5 } from "@babel/core";
+function replaceImportDeclaration(path) {
+  const imports2 = path.node.specifiers;
+  imports2.forEach((specifier) => {
+    const variableName = specifier.local.name;
+    if (startsWith(variableName, "$") && !isVariableUsedAsObject(path, variableName)) {
+      path.scope.rename(variableName, `${variableName}.value`);
+      specifier.local.name = `${variableName}`;
+    }
+  });
+}
+function isVariableUsedAsObject(path, variableName) {
+  const binding = path.scope.getBinding(variableName);
+  let isUsedObject = false;
+  if (!binding || !binding.referencePaths) {
+    return isUsedObject;
+  }
+  for (const referencePath of binding.referencePaths) {
+    if (t5.isMemberExpression(referencePath.parent)) {
+      const memberExprParent = referencePath.parent;
+      if (t5.isIdentifier(memberExprParent.object, { name: variableName })) {
+        const newMemberExpr = t5.memberExpression(
+          t5.memberExpression(memberExprParent.object, t5.identifier("value")),
+          memberExprParent.property
+        );
+        referencePath.parentPath.replaceWith(newMemberExpr);
+        isUsedObject = true;
+      }
+    }
+  }
+  return isUsedObject;
+}
+
+// src/signal/props.ts
+import { types as t6 } from "@babel/core";
+function replaceProps(path) {
+  var _a;
+  const state = path.state;
+  const firstParam = path.node.params[0];
+  if (!firstParam || !t6.isObjectPattern(firstParam)) {
+    return;
+  }
+  const returnStatement = path.get("body").get("body").find((statement) => statement.isReturnStatement());
+  if (!returnStatement) {
+    return;
+  }
+  const returnValue = (_a = returnStatement.node) == null ? void 0 : _a.argument;
+  if (!t6.isJSXElement(returnValue)) {
+    return;
+  }
+  function replaceProperties(properties2, parentPath) {
+    properties2.forEach((property) => {
+      if (t6.isObjectProperty(property)) {
+        const keyName = property.key.name;
+        if (t6.isIdentifier(property.value)) {
+          const propertyName = property.value.name;
+          const newName = `${parentPath}${keyName}`;
+          path.scope.rename(propertyName, newName);
+        } else if (t6.isObjectPattern(property.value)) {
+          replaceProperties(property.value.properties, `${parentPath}${keyName}.`);
+        }
+      }
+    });
+  }
+  const properties = firstParam.properties;
+  replaceProperties(
+    properties.filter((property) => !t6.isRestElement(property)),
+    "__props."
+  );
+  const notRestProperties = properties.filter((property) => !t6.isRestElement(property));
+  const notRestNames = notRestProperties.map(
+    (property) => property.key.name
+  );
+  if (notRestNames.some((name) => startsWith(name, "$"))) {
+    console.warn("props name can not start with $");
+    return;
+  }
+  const restElement = properties.find((property) => t6.isRestElement(property));
+  path.node.params[0] = t6.identifier("__props");
+  if (restElement) {
+    const restName = restElement.argument.name;
+    if (notRestProperties.length === 0) {
+      path.node.params[0] = t6.identifier(restName);
+    } else {
+      const restVariableDeclaration = t6.variableDeclaration("const", [
+        t6.variableDeclarator(
+          t6.identifier(restName),
+          t6.callExpression(state.useReactive, [
+            t6.identifier("__props"),
+            t6.arrayExpression(notRestNames.map((name) => t6.stringLiteral(name)))
+          ])
+        )
+      ]);
+      imports.add("useReactive");
+      path.node.body.body.unshift(restVariableDeclaration);
+    }
+  }
+}
+
+// src/index.ts
+function src_default() {
+  return {
+    name: "babel-plugin-essor",
+    manipulateOptions({ filename }, parserOpts) {
+      if (filename.endsWith(".ts") || filename.endsWith(".tsx")) {
+        parserOpts.plugins.push("typescript");
+      }
+      parserOpts.plugins.push("jsx");
+    },
+    visitor: {
+      Program: transformProgram,
+      FunctionDeclaration: replaceProps,
+      ArrowFunctionExpression: replaceProps,
+      VariableDeclarator: replaceSymbol,
+      ImportDeclaration: replaceImportDeclaration,
+      Identifier: symbolIdentifier,
+      ObjectPattern: symbolObjectPattern,
+      ArrayPattern: symbolArrayPattern,
+      JSXElement: transformJSX,
+      JSXFragment: transformJSX
+    }
+  };
+}
+export {
+  src_default as default
+};
+/**
+* @estjs/shared v0.0.10
+* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
+* @license MIT
+**/
+//# sourceMappingURL=index.js.map