babel-plugin-essor 0.0.5-beta.7 → 0.0.6-beta.1

package/dist/index.cjs

@@ -24,10 +24,50 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/transform.ts
+// src/jsx/server.ts
+var import_core3 = require("@babel/core");
+
+// src/program.ts
 var import_core = require("@babel/core");
+var imports = /* @__PURE__ */ new Set();
+var transformProgram = {
+  enter(path, state) {
+    path.state = {
+      h: path.scope.generateUidIdentifier("h$"),
+      ssrtmpl: path.scope.generateUidIdentifier("ssrtmpl$"),
+      ssr: path.scope.generateUidIdentifier("ssr$"),
+      template: path.scope.generateUidIdentifier("template$"),
+      useSignal: path.scope.generateUidIdentifier("signal$"),
+      useComputed: path.scope.generateUidIdentifier("computed$"),
+      tmplDeclaration: import_core.types.variableDeclaration("const", []),
+      opts: state.opts
+    };
+  },
+  exit(path) {
+    const state = path.state;
+    if (state.tmplDeclaration.declarations.length > 0) {
+      const index = path.node.body.findIndex(
+        (node) => !import_core.types.isImportDeclaration(node) && !import_core.types.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 = import_core.types.identifier(state[name].name);
+    const imported = import_core.types.identifier(name);
+    ImportSpecifier.push(import_core.types.importSpecifier(local, imported));
+  });
+  const importSource = import_core.types.stringLiteral(from);
+  return import_core.types.importDeclaration(ImportSpecifier, importSource);
+}
 
-// src/constants.ts
+// src/jsx/constants.ts
 var selfClosingTags = [
   "area",
   "base",
@@ -65,48 +105,10 @@ var svgTags = [
   "text",
   "use"
 ];
-var imports = /* @__PURE__ */ new Set();
-
-// src/transform.ts
-var transformProgram = {
-  enter(path) {
-    path.state = {
-      h: path.scope.generateUidIdentifier("h$"),
-      useSignal: path.scope.generateUidIdentifier("useSignal$"),
-      useComputed: path.scope.generateUidIdentifier("useComputed$"),
-      template: path.scope.generateUidIdentifier("template$"),
-      signalObject: path.scope.generateUidIdentifier("signalObject&"),
-      tmplDeclaration: import_core.types.variableDeclaration("const", [])
-    };
-    imports.clear();
-  },
-  exit(path) {
-    const state = path.state;
-    if (state.tmplDeclaration.declarations.length > 0) {
-      const index = path.node.body.findIndex(
-        (node) => !import_core.types.isImportDeclaration(node) && !import_core.types.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 = import_core.types.identifier(state[name].name);
-    const imported = import_core.types.identifier(name);
-    ImportSpecifier.push(import_core.types.importSpecifier(local, imported));
-  });
-  const importSource = import_core.types.stringLiteral(from);
-  return import_core.types.importDeclaration(ImportSpecifier, importSource);
-}
 
-// src/jsx-transform.ts
+// src/jsx/client.ts
 var import_core2 = require("@babel/core");
-function transformJSX(path) {
+function transformJSXClient(path) {
   const result = {
     index: 1,
     isLastChild: false,
@@ -114,11 +116,11 @@ function transformJSX(path) {
     props: {},
     template: ""
   };
-  transformElement(path, result, true);
+  transformJSXElement(path, result, true);
   path.replaceWith(createEssorNode(path, result));
 }
 function createEssorNode(path, result) {
-  var _a, _b;
+  var _a;
   const state = path.state;
   let tmpl;
   if (path.isJSXElement() && isComponent(getTagName(path.node))) {
@@ -131,7 +133,7 @@ function createEssorNode(path, result) {
     imports.add("template");
   }
   const args = [tmpl, createProps(result.props)];
-  const key = (_b = result.props.key) != null ? _b : (_a = result.props[0]) == null ? void 0 : _a.key;
+  const key = result.props.key || ((_a = result.props[0]) == null ? void 0 : _a.key);
   if (key) {
     args.push(key);
   }
@@ -139,119 +141,63 @@ function createEssorNode(path, result) {
   return import_core2.types.callExpression(state.h, args);
 }
 function createProps(props) {
-  const result = [];
-  for (const prop in props) {
-    let value = props[prop];
-    if (prop === "key") {
-      continue;
-    }
+  const toAstNode = (value) => {
     if (Array.isArray(value)) {
-      value = import_core2.types.arrayExpression(value);
-    }
-    if (typeof value === "object" && value !== null && !import_core2.types.isNode(value)) {
-      value = createProps(value);
-    }
-    if (typeof value === "string") {
-      value = import_core2.types.stringLiteral(value);
-    }
-    if (typeof value === "number") {
-      value = import_core2.types.numericLiteral(value);
-    }
-    if (typeof value === "boolean") {
-      value = import_core2.types.booleanLiteral(value);
-    }
-    if (value === void 0) {
-      value = import_core2.types.tsUndefinedKeyword();
-    }
-    if (value === null) {
-      value = import_core2.types.nullLiteral();
+      return import_core2.types.arrayExpression(value.map(toAstNode));
     }
-    if (prop === "_$spread$") {
-      result.push(import_core2.types.spreadElement(value));
-    } else {
-      result.push(import_core2.types.objectProperty(import_core2.types.stringLiteral(prop), value));
+    if (value && typeof value === "object" && !import_core2.types.isNode(value)) {
+      return createProps(value);
     }
-  }
-  return import_core2.types.objectExpression(result);
-}
-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)) {
-              props[name] = import_core2.types.arrowFunctionExpression([], expression.node);
-              const value2 = path.scope.generateUidIdentifier("value");
-              props[`update:${name.slice(5).toLocaleLowerCase()}`] = import_core2.types.arrowFunctionExpression(
-                [value2],
-                import_core2.types.assignmentExpression("=", expression.node, value2)
-              );
-            } else {
-              if (expression.isConditionalExpression()) {
-                props[name] = import_core2.types.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");
+    switch (typeof value) {
+      case "string":
+        return import_core2.types.stringLiteral(value);
+      case "number":
+        return import_core2.types.numericLiteral(value);
+      case "boolean":
+        return import_core2.types.booleanLiteral(value);
+      case "undefined":
+        return import_core2.types.tsUndefinedKeyword();
+      case void 0:
+        return import_core2.types.tsUndefinedKeyword();
+      case null:
+        return import_core2.types.nullLiteral();
+      default:
+        return value;
     }
+  };
+  const result = Object.keys(props).filter((prop) => prop !== "key").map((prop) => {
+    const value = toAstNode(props[prop]);
+    return prop === "_$spread$" ? import_core2.types.spreadElement(value) : import_core2.types.objectProperty(import_core2.types.stringLiteral(prop), value);
   });
-  return props;
+  return import_core2.types.objectExpression(result);
 }
-function transformElement(path, result, isRoot) {
+function transformJSXElement(path, result, isRoot = false) {
   if (path.isJSXElement()) {
     const tagName = getTagName(path.node);
     const tagIsComponent = isComponent(tagName);
-    const isSelfClosing = !tagIsComponent && selfClosingTags.includes(tagName);
-    const isSvgTemplate = svgTags.includes(tagName) && result.index === 1;
+    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 childrenGetter = children.length === 1 ? children[0] : import_core2.types.arrayExpression(children);
-          result.props.children = childrenGetter;
+          const childrenGenerator = children.length === 1 ? children[0] : import_core2.types.arrayExpression(children);
+          result.props.children = childrenGenerator;
         }
       } else {
-        transformJSX(path);
+        transformJSXClient(path);
         replaceChild(path.node, result);
       }
     } else {
-      if (isSvgTemplate) {
-        result.template += `<svg _svg_>`;
+      if (isSvg) {
+        result.template = "<svg _svg_>";
       }
       result.template += `<${tagName}`;
       handleAttributes(props, result);
-      result.template += isSelfClosing ? "/>" : ">";
-      if (!isSelfClosing) {
+      result.template += isSelfClose ? "/>" : ">";
+      if (!isSelfClose) {
         transformChildren(path, result);
         result.template += `</${tagName}>`;
       }
@@ -261,20 +207,78 @@ function transformElement(path, result, isRoot) {
     transformChildren(path, result);
   }
 }
-function getChildren(path) {
-  return path.get("children").filter(isValidChild).map((child) => {
-    if (child.isJSXElement() || child.isJSXFragment()) {
-      transformJSX(child);
-    } else if (child.isJSXExpressionContainer()) {
-      child.replaceWith(child.get("expression"));
-    } else if (child.isJSXText()) {
-      child.replaceWith(import_core2.types.stringLiteral(child.node.value));
-    } else {
-      throw new Error("Unsupported JSX child");
+function transformChildren(path, result) {
+  const parentIndex = 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 child.node;
+    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()) {
+      result.template += String(expression.node.value);
+    } else if (expression.isExpression()) {
+      replaceChild(expression.node, result);
+    } else {
+      throw new Error("Unsupported child type");
+    }
+  } else if (child.isJSXText()) {
+    result.template += 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 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(import_core2.types.stringLiteral(text));
+    }
+  }
+}
+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 handleAttributes(props, result) {
   let klass = "";
   let style = "";
@@ -332,49 +336,12 @@ function handleAttributes(props, result) {
     result.template += ` style="${style}"`;
   }
 }
-function transformChildren(path, result) {
-  const parentIndex = result.index;
-  path.get("children").reduce((acc, child) => {
-    if (isValidChild(child)) {
-      const lastChild = acc.at(-1);
-      if (lastChild && isTextChild(child) && isTextChild(lastChild)) {
-        setNodeText(lastChild, getNodeText(lastChild) + getNodeText(child));
-      } else {
-        acc.push(child);
-      }
-    }
-    return acc;
-  }, []).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()) {
-    transformElement(child, result);
-  } else if (child.isJSXExpressionContainer()) {
-    const expression = child.get("expression");
-    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
-      result.template += expression.node.value;
-    } else if (expression.isExpression()) {
-      replaceChild(expression.node, result);
-    } else {
-      throw new Error("Unsupported JSX child");
-    }
-  } else if (child.isJSXText()) {
-    result.template += child.node.value;
-  } else {
-    throw new Error("Unsupported JSX child");
-  }
-}
 function replaceChild(node, result) {
   var _a, _b, _c, _d, _e;
   if (result.isLastChild) {
     result.index--;
   } else {
-    result.template += "<!>";
+    result.template += "<!-->";
   }
   (_c = (_a = result.props)[_b = result.parentIndex]) != null ? _c : _a[_b] = {};
   (_e = (_d = result.props[result.parentIndex]).children) != null ? _e : _d.children = [];
@@ -385,116 +352,469 @@ function replaceChild(node, result) {
     ])
   );
 }
-function getAttrName(attribute) {
-  if (import_core2.types.isJSXIdentifier(attribute.name)) {
-    return attribute.name.name;
-  }
-  if (import_core2.types.isJSXNamespacedName(attribute.name)) {
-    return `${attribute.name.namespace.name}:${attribute.name.name.name}`;
-  }
-  throw new Error("Unsupported attribute 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);
+function getChildren(path) {
+  return path.get("children").filter((child) => isValidChild(child)).map((child) => {
+    if (child.isJSXElement() || child.isJSXFragment()) {
+      transformJSXClient(child);
+    } else if (child.isJSXExpressionContainer()) {
+      child.replaceWith(child.get("expression"));
+    } else if (child.isJSXText()) {
+      child.replaceWith(import_core2.types.stringLiteral(child.node.value));
+    } else {
+      throw new Error("Unsupported child type");
     }
-  }
-  return "";
+    return child.node;
+  });
 }
-function setNodeText(path, text) {
-  if (path.isJSXText()) {
-    path.node.value = text;
+function isValidChild(path) {
+  const regex = /^\s*$/;
+  if (path.isStringLiteral() || path.isJSXText()) {
+    return !regex.test(path.node.value);
   }
-  if (path.isJSXExpressionContainer()) {
-    const expression = path.get("expression");
-    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
-      expression.replaceWith(import_core2.types.stringLiteral(text));
+  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()) {
+            transformJSXClient(expression);
+            props[name] = expression.node;
+          } else if (expression.isExpression()) {
+            if (/^key|ref|on.+$/.test(name)) {
+              props[name] = expression.node;
+            } else if (/^bind:.+/.test(name)) {
+              props[name] = import_core2.types.arrowFunctionExpression([], expression.node);
+            } else {
+              if (expression.isConditionalExpression()) {
+                props[name] = import_core2.types.arrowFunctionExpression([], expression.node);
+              } else {
+                props[name] = expression.node;
+              }
+            }
+          }
+        } else if (value.isJSXElement() || value.isJSXFragment()) {
+          transformJSXClient(value);
+          props[name] = value.node;
+        }
+      }
+    } else if (attribute.isJSXSpreadAttribute()) {
+      props._$spread$ = attribute.get("argument").node;
+    } else {
+      throw new Error("Unsupported attribute type");
     }
-  }
+  });
+  return props;
 }
-function getTagName(node) {
-  const jsxName = node.openingElement.name;
-  return jsxElementNameToString(jsxName);
+function getAttrName(attribute) {
+  if (import_core2.types.isJSXIdentifier(attribute.name)) {
+    return attribute.name.name;
+  }
+  if (import_core2.types.isJSXNamespacedName(attribute.name)) {
+    return `${attribute.name.namespace.name}:${attribute.name.name.name}`;
+  }
+  throw new Error("Unsupported attribute type");
 }
 function isComponent(tagName) {
   return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^A-Za-z]/.test(tagName[0]);
 }
-function isTextChild(path) {
+function getTagName(node) {
+  const tag = node.openingElement.name;
+  return jsxElementNameToString(tag);
+}
+function jsxElementNameToString(node) {
+  if (import_core2.types.isJSXMemberExpression(node)) {
+    return `${jsxElementNameToString(node.object)}.${jsxElementNameToString(node.property)}`;
+  }
+  if (import_core2.types.isJSXIdentifier(node) || import_core2.types.isIdentifier(node)) {
+    return node.name;
+  }
+  return `${node.namespace.name}:${node.name.name}`;
+}
+
+// src/jsx/server.ts
+function transformJSXService(path) {
+  const result = {
+    index: 0,
+    isLastChild: false,
+    parentIndex: 0,
+    props: {},
+    template: []
+    // 修改为数组
+  };
+  transformJSXServiceElement(path, result, true);
+  path.replaceWith(createEssorNode2(path, result));
+}
+function createEssorNode2(path, result) {
+  var _a;
+  const state = path.state;
+  let tmpl;
+  if (path.isJSXElement() && isComponent(getTagName(path.node))) {
+    tmpl = import_core3.types.identifier(getTagName(path.node));
+  } else {
+    tmpl = path.scope.generateUidIdentifier("_tmpl$");
+    const template = import_core3.types.callExpression(state.ssrtmpl, [
+      import_core3.types.arrayExpression(result.template.map(import_core3.types.stringLiteral))
+    ]);
+    const declarator = import_core3.types.variableDeclarator(tmpl, template);
+    state.tmplDeclaration.declarations.push(declarator);
+    imports.add("ssrtmpl");
+  }
+  const args = [tmpl, createProps2(result.props)];
+  const key = result.props.key || ((_a = result.props[0]) == null ? void 0 : _a.key);
+  if (key) {
+    args.push(key);
+  }
+  imports.add("ssr");
+  return import_core3.types.callExpression(state.ssr, args);
+}
+function createProps2(props) {
+  const result = [];
+  for (const prop in props) {
+    let value = props[prop];
+    if (prop === "key") {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      value = import_core3.types.arrayExpression(value);
+    }
+    if (typeof value === "object" && value !== null && !import_core3.types.isNode(value)) {
+      value = createProps2(value);
+    }
+    if (typeof value === "string") {
+      value = import_core3.types.stringLiteral(value);
+    }
+    if (typeof value === "number") {
+      value = import_core3.types.numericLiteral(value);
+    }
+    if (typeof value === "boolean") {
+      value = import_core3.types.booleanLiteral(value);
+    }
+    if (value === void 0) {
+      value = import_core3.types.tsUndefinedKeyword();
+    }
+    if (value === null) {
+      value = import_core3.types.nullLiteral();
+    }
+    if (prop === "_$spread$") {
+      result.push(import_core3.types.spreadElement(value));
+    } else {
+      result.push(import_core3.types.objectProperty(import_core3.types.stringLiteral(prop), value));
+    }
+  }
+  return import_core3.types.objectExpression(result);
+}
+function transformJSXServiceElement(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, hasExpression } = getAttrProps2(path);
+    if (tagIsComponent) {
+      if (isRoot) {
+        result.props = props;
+        const children = getChildren2(path);
+        if (children.length > 0) {
+          const childrenGenerator = children.length === 1 ? children[0] : import_core3.types.arrayExpression(children);
+          result.props.children = childrenGenerator;
+        }
+      } else {
+        transformJSXService(path);
+        replaceChild2(path.node, result);
+      }
+    } else {
+      if (isSvg) {
+        result.template.push("<svg _svg_>");
+      }
+      result.template.push(`<${tagName}`);
+      handleAttributes2(props, result);
+      if (hasExpression) {
+        result.template.push(isSelfClose ? "/>" : ">");
+        result.props || (result.props = {});
+      } else {
+        result.template[result.template.length - 1] += isSelfClose ? "/>" : ">";
+      }
+      transformChildren2(path, result);
+      if (!isSelfClose) {
+        result.template.push(`</${tagName}>`);
+      }
+    }
+  } else {
+    result.index--;
+    transformChildren2(path, result);
+  }
+}
+function transformChildren2(path, result) {
+  const parentIndex = result.template.length;
+  path.get("children").reduce((pre, cur) => {
+    if (isValidChild2(cur)) {
+      const lastChild = pre.at(-1);
+      if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
+        setNodeText2(lastChild, getNodeText2(lastChild) + getNodeText2(cur));
+      } else {
+        pre.push(cur);
+      }
+    }
+    return pre;
+  }, []).forEach((child, i, arr) => {
+    result.parentIndex = parentIndex;
+    result.isLastChild = i === arr.length - 1;
+    transformChild2(child, result);
+  });
+}
+function transformChild2(child, result) {
+  if (child.isJSXElement() || child.isJSXFragment()) {
+    transformJSXServiceElement(child, result, false);
+  } else if (child.isJSXExpressionContainer()) {
+    const expression = child.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      result.template[result.template.length - 1] += String(expression.node.value);
+    } else if (expression.isExpression()) {
+      replaceChild2(expression.node, result);
+    } else {
+      throw new Error("Unsupported child type");
+    }
+  } else if (child.isJSXText()) {
+    result.template.push(String(child.node.value));
+  } else {
+    throw new Error("Unsupported child type");
+  }
+}
+function getNodeText2(path) {
+  if (path.isJSXText()) {
+    return path.node.value;
+  }
   if (path.isJSXExpressionContainer()) {
     const expression = path.get("expression");
-    if (expression.isJSXText() || expression.isStringLiteral() || expression.isNumericLiteral()) {
-      return true;
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      return String(expression.node.value);
     }
   }
-  if (path.isJSXText() || path.isStringLiteral() || path.isNullLiteral()) {
-    return true;
+  return "";
+}
+function setNodeText2(path, text) {
+  if (path.isJSXText()) {
+    path.node.value = text;
+  }
+  if (path.isJSXExpressionContainer()) {
+    const expression = path.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      expression.replaceWith(import_core3.types.stringLiteral(text));
+    }
   }
-  return false;
 }
-function isValidChild(path) {
+function handleAttributes2(props, result) {
+  let klass = "";
+  let style = "";
+  for (const prop in props) {
+    const value = props[prop];
+    if (prop === "class" && typeof value === "string") {
+      klass += ` ${value}`;
+      delete props[prop];
+      continue;
+    }
+    if (prop.indexOf("class:") === 0) {
+      if (value === true) {
+        const name = prop.replace(/^class:/, "");
+        klass += ` ${name}`;
+        delete props[prop];
+        continue;
+      }
+      if (value === false) {
+        delete props[prop];
+        continue;
+      }
+    }
+    if (prop === "style" && typeof value === "string") {
+      style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
+      delete props[prop];
+      continue;
+    }
+    if (prop.indexOf("style:") === 0 && (typeof value === "string" || typeof value === "number")) {
+      const name = prop.replace(/^style:/, "");
+      style += `${name}:${value};`;
+      delete props[prop];
+      continue;
+    }
+    if (value === true) {
+      result.template[result.template.length - 1] += ` ${prop}`;
+      delete props[prop];
+    }
+    if (value === false) {
+      delete props[prop];
+    }
+    if (typeof value === "string" || typeof value === "number") {
+      result.template[result.template.length - 1] += ` ${prop}="${value}"`;
+      delete props[prop];
+    }
+  }
+  if (Object.keys(props).length > 0) {
+    result.props[result.index] = props;
+  }
+  klass = klass.trim();
+  style = style.trim();
+  if (klass) {
+    result.template[result.template.length - 1] += ` class="${klass}"`;
+  }
+  if (style) {
+    result.template[result.template.length - 1] += ` style="${style}"`;
+  }
+}
+function replaceChild2(node, result) {
+  var _a, _b, _c, _d, _e;
+  if (result.isLastChild) {
+    result.index--;
+  }
+  (_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(
+    import_core3.types.arrayExpression([
+      import_core3.types.arrowFunctionExpression([], node),
+      import_core3.types.identifier(String(result.template.length))
+    ])
+  );
+}
+function getChildren2(path) {
+  return path.get("children").filter((child) => isValidChild2(child)).map((child) => {
+    if (child.isJSXElement() || child.isJSXFragment()) {
+      transformJSXService(child);
+    } else if (child.isJSXExpressionContainer()) {
+      child.replaceWith(child.get("expression"));
+    } else if (child.isJSXText()) {
+      child.replaceWith(import_core3.types.stringLiteral(child.node.value));
+    } else {
+      throw new Error("Unsupported child type");
+    }
+    return child.node;
+  });
+}
+function isValidChild2(path) {
   const regex = /^\s*$/;
   if (path.isStringLiteral() || path.isJSXText()) {
     return !regex.test(path.node.value);
   }
   return Object.keys(path.node).length > 0;
 }
-function jsxElementNameToString(node) {
-  if (import_core2.types.isJSXMemberExpression(node)) {
-    return `${jsxElementNameToString(node.object)}.${node.property.name}`;
-  }
-  if (import_core2.types.isJSXIdentifier(node) || import_core2.types.isIdentifier(node)) {
-    return node.name;
-  }
-  return `${node.namespace.name}:${node.name.name}`;
+function getAttrProps2(path) {
+  const props = {};
+  let hasExpression = false;
+  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()) {
+            transformJSXService(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)) {
+              props[name] = import_core3.types.arrowFunctionExpression([], expression.node);
+            } else {
+              if (expression.isConditionalExpression()) {
+                props[name] = import_core3.types.arrowFunctionExpression([], expression.node);
+              } else {
+                props[name] = expression.node;
+              }
+            }
+          }
+        } else if (value.isJSXElement() || value.isJSXFragment()) {
+          transformJSXService(value);
+          props[name] = value.node;
+        }
+      }
+    } else if (attribute.isJSXSpreadAttribute()) {
+      props._$spread$ = attribute.get("argument").node;
+      hasExpression = true;
+    } else {
+      throw new Error("Unsupported attribute type");
+    }
+  });
+  return {
+    props,
+    hasExpression
+  };
 }
 
-// src/symbol-replace.ts
-var import_core3 = require("@babel/core");
+// src/jsx/index.ts
+function transformJSX(path) {
+  const state = path.state;
+  const isSsr = state.opts.ssr;
+  return isSsr ? transformJSXService(path) : transformJSXClient(path);
+}
+
+// src/signal/symbol.ts
+var import_core4 = require("@babel/core");
 var import_types = require("@babel/types");
 function replaceSymbol(path) {
   const init = path.node.init;
   const variableName = path.node.id.name;
-  if (import_core3.types.isObjectPattern(path.node.id) || import_core3.types.isArrayPattern(path.node.id)) {
+  if (import_core4.types.isObjectPattern(path.node.id) || import_core4.types.isArrayPattern(path.node.id)) {
     return;
   }
   if (!variableName.startsWith("$")) {
     return;
   }
-  if (init && (import_core3.types.isFunctionExpression(init) || import_core3.types.isArrowFunctionExpression(init)) && path.parent.kind === "const") {
-    const newInit = import_core3.types.callExpression(import_core3.types.identifier(path.state.computed.name), init ? [init] : []);
-    imports.add("computed");
+  if (init && (import_core4.types.isFunctionExpression(init) || import_core4.types.isArrowFunctionExpression(init)) && path.parent.kind === "const") {
+    const newInit = import_core4.types.callExpression(import_core4.types.identifier(path.state.useComputed.name), init ? [init] : []);
+    imports.add("useComputed");
     path.node.init = newInit;
   } else {
     const originalImportDeclarationNodes = (0, import_types.cloneNode)(path.get("id").node, true);
-    const newInit = import_core3.types.callExpression(import_core3.types.identifier(path.state.signal.name), init ? [init] : []);
-    imports.add("signal");
+    const newInit = import_core4.types.callExpression(import_core4.types.identifier(path.state.useSignal.name), init ? [init] : []);
+    imports.add("useSignal");
     path.node.init = newInit;
     path.scope.rename(variableName, `${variableName}.value`);
     path.get("id").replaceWith(originalImportDeclarationNodes);
-    path.scope.traverse(path.scope.block, {
-      Identifier(innerPath) {
-        if (import_core3.types.isExportSpecifier(innerPath.parent)) {
-          const { name } = innerPath.node;
-          if (name.endsWith(".value")) {
-            innerPath.node.name = name.slice(0, -6);
-          }
-        }
-      }
-    });
   }
 }
 
-// src/import-replace.ts
-function replaceImport(path) {
+// src/signal/import.ts
+var import_core5 = require("@babel/core");
+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 (import_core5.types.isMemberExpression(referencePath.parent)) {
+      isUsedObject = true;
+    }
+  }
+  return isUsedObject;
+}
+function replaceImportDeclaration(path) {
   const imports2 = path.node.specifiers;
   imports2.forEach((specifier) => {
     const variableName = specifier.local.name;
-    if (variableName.indexOf("$") === 0) {
+    if (variableName.indexOf("$") === 0 && !isVariableUsedAsObject(path, variableName)) {
       path.scope.rename(variableName, `${variableName}.value`);
       specifier.local.name = `${variableName}`;
     }
@@ -506,7 +826,7 @@ function src_default() {
   return {
     name: "babel-plugin-essor",
     manipulateOptions({ filename }, parserOpts) {
-      if (filename.endsWith("ts") || filename.endsWith("tsx")) {
+      if (filename.endsWith(".ts") || filename.endsWith(".tsx")) {
         parserOpts.plugins.push("typescript");
       }
       parserOpts.plugins.push("jsx");
@@ -516,7 +836,7 @@ function src_default() {
       JSXElement: transformJSX,
       JSXFragment: transformJSX,
       VariableDeclarator: replaceSymbol,
-      ImportDeclaration: replaceImport
+      ImportDeclaration: replaceImportDeclaration
     }
   };
 }