babel-plugin-essor 0.0.11 → 0.0.12

package/dist/index.js

@@ -48,8 +48,8 @@ var transformProgram = {
     state.opts = __spreadValues(__spreadValues({}, defaultOption), state.opts);
     path.state = {
       h: path.scope.generateUidIdentifier("h$"),
-      renderTemplate: path.scope.generateUidIdentifier("renderTemplate$"),
       template: path.scope.generateUidIdentifier("template$"),
+      ssg: path.scope.generateUidIdentifier("ssg$"),
       useSignal: path.scope.generateUidIdentifier("signal$"),
       useComputed: path.scope.generateUidIdentifier("computed$"),
       useReactive: path.scope.generateUidIdentifier("reactive$"),
@@ -140,7 +140,7 @@ function setNodeText(path, text) {
 }
 function isSymbolStart(path, name) {
   const state = path.state;
-  const { symbol } = state.opts;
+  const { symbol } = (state == null ? void 0 : state.opts) || "$";
   return startsWith(name, symbol);
 }
 
@@ -185,9 +185,13 @@ var svgTags = [
 
 // src/jsx/index.ts
 var isSsg = false;
-function addToTemplate(result, content) {
+function addToTemplate(result, content, join = false) {
   if (isSsg) {
-    result.template.push(content);
+    if (join && result.template.length > 0) {
+      result.template[result.template.length - 1] += content;
+    } else {
+      result.template.push(content);
+    }
   } else {
     result.template += content;
   }
@@ -208,14 +212,11 @@ function transformJSX(path) {
 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 isComponent2 = path.isJSXElement() && isComponent(getTagName(path.node));
+  const tmpl = isComponent2 ? t3.identifier(getTagName(path.node)) : path.scope.generateUidIdentifier("_tmpl$");
+  if (!isComponent2) {
     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);
+    state.tmplDeclaration.declarations.push(t3.variableDeclarator(tmpl, template));
     if (!isSsg) {
       imports.add("template");
     }
@@ -223,10 +224,11 @@ function createEssorNode(path, result) {
   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);
+    args.push(t3.identifier(`${key}`));
   }
-  imports.add(isSsg ? "renderTemplate" : "h");
-  return t3.callExpression(isSsg ? state.renderTemplate : state.h, args);
+  const fnName = isSsg ? "ssg" : "h";
+  imports.add(fnName);
+  return t3.callExpression(state[fnName], args);
 }
 function createProps(props) {
   const toAstNode = (value) => {
@@ -265,7 +267,7 @@ function transformJSXElement(path, result, isRoot = false) {
     const tagIsComponent = isComponent(tagName);
     const isSelfClose = !tagIsComponent && selfClosingTags.includes(tagName);
     const isSvg = svgTags.includes(tagName) && result.index === 1;
-    const props = getAttrProps(path);
+    const { props, hasExpression } = getAttrProps(path);
     if (tagIsComponent) {
       if (isRoot) {
         result.props = props;
@@ -282,12 +284,12 @@ function transformJSXElement(path, result, isRoot = false) {
       if (isSvg) {
         result.template = isSsg ? ["<svg _svg_>"] : "<svg _svg_>";
       }
-      addToTemplate(result, `<${tagName}`);
+      addToTemplate(result, `<${tagName}`, true);
       handleAttributes(props, result);
-      addToTemplate(result, isSelfClose ? "/>" : ">");
+      addToTemplate(result, isSelfClose ? "/>" : ">", !hasExpression);
       if (!isSelfClose) {
         transformChildren(path, result);
-        if (hasSiblingElement(path)) {
+        if (hasSiblingElement(path) || isSsg) {
           addToTemplate(result, `</${tagName}>`);
         }
       }
@@ -350,54 +352,25 @@ function getNodeText(path) {
 function handleAttributes(props, result) {
   let klass = "";
   let style = "";
-  for (const prop in props) {
-    let value = props[prop];
+  for (const [prop, value] of Object.entries(props)) {
     if (prop === "class" && typeof value === "string") {
       klass += ` ${value}`;
       delete props[prop];
-      continue;
-    }
-    if (prop === "style" && typeof value === "string") {
+    } else if (prop === "style" && typeof value === "string") {
       style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
       delete props[prop];
-      continue;
-    }
-    if (value === true) {
+    } else if (value === true) {
       addToTemplate(result, ` ${prop}`);
       delete props[prop];
-    }
-    if (value === false) {
+    } else if (value === false) {
       delete props[prop];
-    }
-    if (typeof value === "string" || typeof value === "number") {
+    } else 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];
-        }
-      }
+    } else if (t3.isConditionalExpression(value)) {
+      props[prop] = t3.arrowFunctionExpression([], value);
+    } else if (t3.isObjectExpression(value)) {
+      handleObjectExpression(prop, value, props, style);
     }
   }
   if (Object.keys(props).length > 0) {
@@ -412,6 +385,21 @@ function handleAttributes(props, result) {
     addToTemplate(result, ` style="${style}"`);
   }
 }
+function handleObjectExpression(prop, value, props, style) {
+  const hasConditional = value.properties.some(
+    (property) => t3.isObjectProperty(property) && t3.isConditionalExpression(property.value)
+  );
+  if (hasConditional) {
+    props[prop] = t3.arrowFunctionExpression([], value);
+  } else if (prop === "style") {
+    value.properties.forEach((property) => {
+      if (t3.isObjectProperty(property)) {
+        style += `${property.key.name}:${property.value.value};`;
+      }
+    });
+    delete props[prop];
+  }
+}
 function replaceChild(node, result) {
   var _a, _b, _c, _d, _e;
   if (result.isLastChild) {
@@ -451,6 +439,7 @@ function isValidChild(path) {
 }
 function getAttrProps(path) {
   const props = {};
+  let hasExpression = false;
   path.get("openingElement").get("attributes").forEach((attribute) => {
     if (attribute.isJSXAttribute()) {
       const name = getAttrName(attribute.node);
@@ -470,6 +459,7 @@ function getAttrProps(path) {
             transformJSX(expression);
             props[name] = expression.node;
           } else if (expression.isExpression()) {
+            hasExpression = true;
             if (/^key|ref|on.+$/.test(name)) {
               props[name] = expression.node;
             } else if (/^bind:.+/.test(name)) {
@@ -495,72 +485,54 @@ function getAttrProps(path) {
       }
     } else if (attribute.isJSXSpreadAttribute()) {
       props._$spread$ = attribute.get("argument").node;
+      hasExpression = true;
     } else {
       throw new Error("Unsupported attribute type");
     }
   });
-  return props;
+  return {
+    props,
+    hasExpression
+  };
 }
 
 // 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;
-  }
+  const { init, id } = path.node;
+  const variableName = id.name;
+  if (t4.isObjectPattern(id) || t4.isArrayPattern(id) || !isSymbolStart(path, variableName)) return;
+  const isComputed = init && (t4.isFunctionExpression(init) || t4.isArrowFunctionExpression(init)) && path.parent.kind === "const";
+  const hookName = isComputed ? "useComputed" : "useSignal";
+  const newInit = t4.callExpression(t4.identifier(path.state[hookName].name), init ? [init] : []);
+  imports.add(hookName);
+  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;
-  }
+  if (!shouldProcessIdentifier(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);
+  if (!isSymbolStart(path, node.name)) return;
+  if (!path.findParent((p) => p.isMemberExpression() && p.node.property.name === "value")) {
+    path.replaceWith(t4.memberExpression(t4.identifier(node.name), t4.identifier("value")));
   }
 }
+function shouldProcessIdentifier(parentPath) {
+  return parentPath && !t4.isVariableDeclarator(parentPath) && !t4.isImportSpecifier(parentPath) && !t4.isObjectProperty(parentPath) && !t4.isArrayPattern(parentPath) && !t4.isObjectPattern(parentPath);
+}
 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;
+      property.key = t4.identifier(property.key.name);
     }
   });
 }
 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;
+      element.name = t4.identifier(element.name).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;
-        }
-      });
+      symbolObjectPattern({ node: element });
     }
   });
 }
@@ -568,35 +540,29 @@ function symbolArrayPattern(path) {
 // src/signal/import.ts
 import { types as t5 } from "@babel/core";
 function replaceImportDeclaration(path) {
-  const imports2 = path.node.specifiers;
-  imports2.forEach((specifier) => {
+  path.node.specifiers.forEach((specifier) => {
     const variableName = specifier.local.name;
     if (startsWith(variableName, "$") && !isVariableUsedAsObject(path, variableName)) {
       path.scope.rename(variableName, `${variableName}.value`);
-      specifier.local.name = `${variableName}`;
+      specifier.local.name = variableName;
     }
   });
 }
 function isVariableUsedAsObject(path, variableName) {
+  var _a;
   const binding = path.scope.getBinding(variableName);
-  let isUsedObject = false;
-  if (!binding || !binding.referencePaths) {
-    return isUsedObject;
-  }
-  for (const referencePath of binding.referencePaths) {
+  return ((_a = binding == null ? void 0 : binding.referencePaths) == null ? void 0 : _a.some((referencePath) => {
     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
+      const { object, property } = referencePath.parent;
+      if (t5.isIdentifier(object, { name: variableName })) {
+        referencePath.parentPath.replaceWith(
+          t5.memberExpression(t5.memberExpression(object, t5.identifier("value")), property)
         );
-        referencePath.parentPath.replaceWith(newMemberExpr);
-        isUsedObject = true;
+        return true;
       }
     }
-  }
-  return isUsedObject;
+    return false;
+  })) || false;
 }
 
 // src/signal/props.ts
@@ -605,65 +571,56 @@ function replaceProps(path) {
   var _a;
   const state = path.state;
   const firstParam = path.node.params[0];
-  if (!firstParam || !t6.isObjectPattern(firstParam)) {
-    return;
-  }
+  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) {
+  if (!returnStatement || !t6.isJSXElement((_a = returnStatement.node) == null ? void 0 : _a.argument)) return;
+  const replaceProperties = (properties2, parentPath) => {
     properties2.forEach((property) => {
-      if (t6.isObjectProperty(property)) {
+      if (t6.isObjectProperty(property) && t6.isIdentifier(property.key)) {
         const keyName = property.key.name;
         if (t6.isIdentifier(property.value)) {
-          const propertyName = property.value.name;
-          const newName = `${parentPath}${keyName}`;
-          path.scope.rename(propertyName, newName);
+          path.scope.rename(property.value.name, `${parentPath}${keyName}`);
         } 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
-  );
+  replaceProperties(notRestProperties, "__props.");
+  const notRestNames = notRestProperties.map((property) => property.key.name);
   if (notRestNames.some((name) => startsWith(name, "$"))) {
     console.warn("props name can not start with $");
     return;
   }
+  handleRestElement(path, state, properties, notRestNames);
+}
+function handleRestElement(path, state, properties, notRestNames) {
   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) {
+    if (notRestNames.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)))
-          ])
-        )
-      ]);
+      const restVariableDeclaration = createRestVariableDeclaration(state, restName, notRestNames);
       imports.add("useReactive");
       path.node.body.body.unshift(restVariableDeclaration);
     }
   }
 }
+function createRestVariableDeclaration(state, restName, notRestNames) {
+  return t6.variableDeclaration("const", [
+    t6.variableDeclarator(
+      t6.identifier(restName),
+      t6.callExpression(state.useReactive, [
+        t6.identifier("__props"),
+        t6.arrayExpression(notRestNames.map((name) => t6.stringLiteral(name)))
+      ])
+    )
+  ]);
+}
 
 // src/index.ts
 function src_default() {
@@ -693,7 +650,7 @@ export {
   src_default as default
 };
 /**
-* @estjs/shared v0.0.11
+* @estjs/shared v0.0.12
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/