babel-plugin-essor 0.0.7-beta.6 → 0.0.10-beta.21

package/dist/index.js

@@ -1,3 +1,23 @@
+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/essor-shared.js
 var isArray = Array.isArray;
 function isString(val) {
@@ -14,15 +34,18 @@ var capitalizeFirstLetter = (inputString) => {
   return inputString.charAt(0).toUpperCase() + inputString.slice(1);
 };
 
-// src/jsx/server.ts
-import { types as t3 } from "@babel/core";
-
 // 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$"),
@@ -58,46 +81,7 @@ function createImport(state, from) {
   return t.importDeclaration(ImportSpecifier, importSource);
 }
 
-// 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/shared.ts
+// src/shared.ts
 import { types as t2 } from "@babel/core";
 function hasSiblingElement(path) {
   const siblings = path.getAllPrevSiblings().concat(path.getAllNextSiblings());
@@ -129,7 +113,7 @@ function jsxElementNameToString(node) {
   return `${node.namespace.name}:${node.name.name}`;
 }
 function isComponent(tagName) {
-  return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^A-Za-z]/.test(tagName[0]);
+  return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-z]/i.test(tagName[0]);
 }
 function isTextChild(path) {
   if (path.isJSXExpressionContainer()) {
@@ -154,18 +138,71 @@ function setNodeText(path, text) {
     }
   }
 }
+function isSymbolStart(path, name) {
+  const state = path.state;
+  const { symbol } = state.opts;
+  return startsWith(name, symbol);
+}
 
-// src/jsx/server.ts
-function transformJSXService(path) {
+// 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: 0,
+    index: 1,
     isLastChild: false,
     parentIndex: 0,
     props: {},
-    template: []
-    // 修改为数组
+    template: isSsg ? [] : ""
   };
-  transformJSXServiceElement(path, result, true);
+  transformJSXElement(path, result, true);
   path.replaceWith(createEssorNode(path, result));
 }
 function createEssorNode(path, result) {
@@ -176,61 +213,59 @@ function createEssorNode(path, result) {
     tmpl = t3.identifier(getTagName(path.node));
   } else {
     tmpl = path.scope.generateUidIdentifier("_tmpl$");
-    const template = t3.arrayExpression(result.template.map(t3.stringLiteral));
+    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("renderTemplate");
-  return t3.callExpression(state.renderTemplate, args);
+  imports.add(isSsg ? "renderTemplate" : "h");
+  return t3.callExpression(isSsg ? state.renderTemplate : 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 = t3.arrayExpression(value);
-    }
-    if (typeof value === "object" && value !== null && !t3.isNode(value)) {
-      value = createProps(value);
+      return t3.arrayExpression(value.map(toAstNode));
     }
-    if (typeof value === "string") {
-      value = t3.stringLiteral(value);
+    if (value && typeof value === "object" && !t3.isNode(value)) {
+      return createProps(value);
     }
-    if (typeof value === "number") {
-      value = t3.numericLiteral(value);
-    }
-    if (typeof value === "boolean") {
-      value = t3.booleanLiteral(value);
-    }
-    if (value === void 0) {
-      value = t3.tsUndefinedKeyword();
-    }
-    if (value === null) {
-      value = t3.nullLiteral();
-    }
-    if (prop === "_$spread$") {
-      result.push(t3.spreadElement(value));
-    } else {
-      result.push(t3.objectProperty(t3.stringLiteral(prop), 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 transformJSXServiceElement(path, result, isRoot = false) {
+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, hasExpression } = getAttrProps(path);
+    const props = getAttrProps(path);
     if (tagIsComponent) {
       if (isRoot) {
         result.props = props;
@@ -240,24 +275,21 @@ function transformJSXServiceElement(path, result, isRoot = false) {
           result.props.children = childrenGenerator;
         }
       } else {
-        transformJSXService(path);
+        transformJSX(path);
         replaceChild(path.node, result);
       }
     } else {
       if (isSvg) {
-        result.template.push("<svg _svg_>");
+        result.template = isSsg ? ["<svg _svg_>"] : "<svg _svg_>";
       }
-      result.template.push(`<${tagName}`);
+      addToTemplate(result, `<${tagName}`);
       handleAttributes(props, result);
-      if (hasExpression) {
-        result.template.push(isSelfClose ? "/>" : ">");
-        result.props || (result.props = {});
-      } else {
-        result.template[result.template.length - 1] += isSelfClose ? "/>" : ">";
-      }
-      transformChildren(path, result);
+      addToTemplate(result, isSelfClose ? "/>" : ">");
       if (!isSelfClose) {
-        result.template.push(`</${tagName}>`);
+        transformChildren(path, result);
+        if (hasSiblingElement(path)) {
+          addToTemplate(result, `</${tagName}>`);
+        }
       }
     }
   } else {
@@ -266,7 +298,7 @@ function transformJSXServiceElement(path, result, isRoot = false) {
   }
 }
 function transformChildren(path, result) {
-  const parentIndex = result.template.length;
+  const parentIndex = isSsg ? result.template.length : result.index;
   path.get("children").reduce((pre, cur) => {
     if (isValidChild(cur)) {
       const lastChild = pre.at(-1);
@@ -284,12 +316,13 @@ function transformChildren(path, result) {
   });
 }
 function transformChild(child, result) {
+  result.index++;
   if (child.isJSXElement() || child.isJSXFragment()) {
-    transformJSXServiceElement(child, result, false);
+    transformJSXElement(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);
+      addToTemplate(result, String(expression.node.value));
     } else if (expression.isExpression()) {
       replaceChild(expression.node, result);
     } else if (t3.isJSXEmptyExpression(expression.node)) {
@@ -297,7 +330,7 @@ function transformChild(child, result) {
       throw new Error("Unsupported child type");
     }
   } else if (child.isJSXText()) {
-    result.template.push(String(child.node.value));
+    addToTemplate(result, String(child.node.value));
   } else {
     throw new Error("Unsupported child type");
   }
@@ -318,7 +351,7 @@ function handleAttributes(props, result) {
   let klass = "";
   let style = "";
   for (const prop in props) {
-    const value = props[prop];
+    let value = props[prop];
     if (prop === "class" && typeof value === "string") {
       klass += ` ${value}`;
       delete props[prop];
@@ -330,16 +363,42 @@ function handleAttributes(props, result) {
       continue;
     }
     if (value === true) {
-      result.template[result.template.length - 1] += ` ${prop}`;
+      addToTemplate(result, ` ${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}"`;
+      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;
@@ -347,30 +406,32 @@ function handleAttributes(props, result) {
   klass = klass.trim();
   style = style.trim();
   if (klass) {
-    result.template[result.template.length - 1] += ` class="${klass}"`;
+    addToTemplate(result, ` class="${klass}"`);
   }
   if (style) {
-    result.template[result.template.length - 1] += ` style="${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),
-      t3.identifier(String(result.template.length))
+      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()) {
-      transformJSXService(child);
+      transformJSX(child);
     } else if (child.isJSXExpressionContainer()) {
       child.replaceWith(child.get("expression"));
     } else if (child.isJSXText()) {
@@ -390,7 +451,6 @@ 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);
@@ -407,10 +467,9 @@ function getAttrProps(path) {
           } else if (expression.isNumericLiteral()) {
             props[name] = expression.node.value;
           } else if (expression.isJSXElement() || expression.isJSXFragment()) {
-            transformJSXService(expression);
+            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)) {
@@ -430,293 +489,7 @@ function getAttrProps(path) {
             }
           }
         } 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/jsx/client.ts
-import { types as t4 } from "@babel/core";
-function transformJSXClient(path) {
-  const result = {
-    index: 1,
-    isLastChild: false,
-    parentIndex: 0,
-    props: {},
-    template: ""
-  };
-  transformJSXElement(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 = t4.identifier(getTagName(path.node));
-  } else {
-    tmpl = path.scope.generateUidIdentifier("_tmpl$");
-    const template = t4.callExpression(state.template, [t4.stringLiteral(result.template)]);
-    const declarator = t4.variableDeclarator(tmpl, template);
-    state.tmplDeclaration.declarations.push(declarator);
-    imports.add("template");
-  }
-  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("h");
-  return t4.callExpression(state.h, args);
-}
-function createProps2(props) {
-  const toAstNode = (value) => {
-    if (Array.isArray(value)) {
-      return t4.arrayExpression(value.map(toAstNode));
-    }
-    if (value && typeof value === "object" && !t4.isNode(value)) {
-      return createProps2(value);
-    }
-    switch (typeof value) {
-      case "string":
-        return t4.stringLiteral(value);
-      case "number":
-        return t4.numericLiteral(value);
-      case "boolean":
-        return t4.booleanLiteral(value);
-      case "undefined":
-        return t4.tsUndefinedKeyword();
-      case void 0:
-        return t4.tsUndefinedKeyword();
-      case null:
-        return t4.nullLiteral();
-      default:
-        return value;
-    }
-  };
-  const result = Object.keys(props).filter((prop) => prop !== "key").map((prop) => {
-    const value = toAstNode(props[prop]);
-    return prop === "_$spread$" ? t4.spreadElement(value) : t4.objectProperty(t4.stringLiteral(prop), value);
-  });
-  return t4.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 = getAttrProps2(path);
-    if (tagIsComponent) {
-      if (isRoot) {
-        result.props = props;
-        const children = getChildren2(path);
-        if (children.length > 0) {
-          const childrenGenerator = children.length === 1 ? children[0] : t4.arrayExpression(children);
-          result.props.children = childrenGenerator;
-        }
-      } else {
-        transformJSXClient(path);
-        replaceChild2(path.node, result);
-      }
-    } else {
-      if (isSvg) {
-        result.template = "<svg _svg_>";
-      }
-      result.template += `<${tagName}`;
-      handleAttributes2(props, result);
-      result.template += isSelfClose ? "/>" : ">";
-      if (!isSelfClose) {
-        transformChildren2(path, result);
-        if (hasSiblingElement(path)) {
-          result.template += `</${tagName}>`;
-        }
-      }
-    }
-  } else {
-    result.index--;
-    transformChildren2(path, result);
-  }
-}
-function transformChildren2(path, result) {
-  const parentIndex = result.index;
-  path.get("children").reduce((pre, cur) => {
-    if (isValidChild2(cur)) {
-      const lastChild = pre.at(-1);
-      if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
-        setNodeText(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) {
-  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()) {
-      replaceChild2(expression.node, result);
-    } else if (t4.isJSXEmptyExpression(expression.node)) {
-    } 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 getNodeText2(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 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 === "style" && typeof value === "string") {
-      style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
-      delete props[prop];
-      continue;
-    }
-    if (value === true) {
-      result.template += ` ${prop}`;
-      delete props[prop];
-    }
-    if (value === false) {
-      delete props[prop];
-    }
-    if (typeof value === "string" || typeof value === "number") {
-      result.template += ` ${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 += ` class="${klass}"`;
-  }
-  if (style) {
-    result.template += ` style="${style}"`;
-  }
-}
-function replaceChild2(node, result) {
-  var _a, _b, _c, _d, _e;
-  if (result.isLastChild) {
-    result.index--;
-  } else {
-    result.template += "<!>";
-  }
-  (_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(
-    t4.arrayExpression([
-      t4.arrowFunctionExpression([], node),
-      result.isLastChild ? t4.nullLiteral() : t4.identifier(String(result.index))
-    ])
-  );
-}
-function getChildren2(path) {
-  return path.get("children").filter((child) => isValidChild2(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(t4.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 getAttrProps2(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)) {
-              const value2 = path.scope.generateUidIdentifier("value");
-              const bindName = name.slice(5).toLocaleLowerCase();
-              props[bindName] = expression.node;
-              props[`update${capitalizeFirstLetter(bindName)}`] = t4.arrowFunctionExpression(
-                [value2],
-                t4.assignmentExpression("=", expression.node, value2)
-              );
-            } else {
-              if (expression.isConditionalExpression()) {
-                props[name] = t4.arrowFunctionExpression([], expression.node);
-              } else {
-                props[name] = expression.node;
-              }
-            }
-          }
-        } else if (value.isJSXElement() || value.isJSXFragment()) {
-          transformJSXClient(value);
+          transformJSX(value);
           props[name] = value.node;
         }
       }
@@ -729,41 +502,34 @@ function getAttrProps2(path) {
   return props;
 }
 
-// src/jsx/index.ts
-function transformJSX(path) {
-  const state = path.state;
-  const isSsg = state.opts.ssg;
-  return isSsg ? transformJSXService(path) : transformJSXClient(path);
-}
-
 // src/signal/symbol.ts
-import { types as t5 } from "@babel/core";
+import { types as t4 } from "@babel/core";
 function replaceSymbol(path) {
   const init = path.node.init;
   const variableName = path.node.id.name;
-  if (t5.isObjectPattern(path.node.id) || t5.isArrayPattern(path.node.id)) {
+  if (t4.isObjectPattern(path.node.id) || t4.isArrayPattern(path.node.id)) {
     return;
   }
-  if (!startsWith(variableName, "$")) {
+  if (!isSymbolStart(path, variableName)) {
     return;
   }
-  if (init && (t5.isFunctionExpression(init) || t5.isArrowFunctionExpression(init)) && path.parent.kind === "const") {
-    const newInit = t5.callExpression(t5.identifier(path.state.useComputed.name), init ? [init] : []);
+  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 = t5.callExpression(t5.identifier(path.state.useSignal.name), init ? [init] : []);
+    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 || t5.isVariableDeclarator(parentPath) || t5.isImportSpecifier(parentPath) || t5.isObjectProperty(parentPath) || t5.isArrayPattern(parentPath) || t5.isObjectPattern(parentPath)) {
+  if (!parentPath || t4.isVariableDeclarator(parentPath) || t4.isImportSpecifier(parentPath) || t4.isObjectProperty(parentPath) || t4.isArrayPattern(parentPath) || t4.isObjectPattern(parentPath)) {
     return;
   }
   const { node } = path;
-  if (node.name.startsWith("$")) {
+  if (isSymbolStart(path, node.name)) {
     let currentPath = path;
     while (currentPath.parentPath && !currentPath.parentPath.isProgram()) {
       if (currentPath.parentPath.isMemberExpression() && currentPath.parentPath.node.property.name === "value") {
@@ -771,27 +537,27 @@ function symbolIdentifier(path) {
       }
       currentPath = currentPath.parentPath;
     }
-    const newNode = t5.memberExpression(t5.identifier(node.name), t5.identifier("value"));
+    const newNode = t4.memberExpression(t4.identifier(node.name), t4.identifier("value"));
     path.replaceWith(newNode);
   }
 }
 function symbolObjectPattern(path) {
   path.node.properties.forEach((property) => {
-    if (t5.isObjectProperty(property) && t5.isIdentifier(property.key) && property.key.name.startsWith("$")) {
-      const newKey = t5.identifier(property.key.name);
+    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 (t5.isIdentifier(element) && element.name.startsWith("$")) {
-      const newElement = t5.identifier(element.name);
+    if (t4.isIdentifier(element) && element.name.startsWith("$")) {
+      const newElement = t4.identifier(element.name);
       element.name = newElement.name;
-    } else if (t5.isObjectPattern(element)) {
+    } else if (t4.isObjectPattern(element)) {
       element.properties.forEach((property) => {
-        if (t5.isObjectProperty(property) && t5.isIdentifier(property.key) && property.key.name.startsWith("$")) {
-          const newKey = t5.identifier(property.key.name);
+        if (t4.isObjectProperty(property) && t4.isIdentifier(property.key) && isSymbolStart(path, property.key.name)) {
+          const newKey = t4.identifier(property.key.name);
           property.key = newKey;
         }
       });
@@ -800,7 +566,17 @@ function symbolArrayPattern(path) {
 }
 
 // src/signal/import.ts
-import { types as t6 } from "@babel/core";
+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;
@@ -808,30 +584,28 @@ function isVariableUsedAsObject(path, variableName) {
     return isUsedObject;
   }
   for (const referencePath of binding.referencePaths) {
-    if (t6.isMemberExpression(referencePath.parent)) {
-      isUsedObject = true;
+    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;
 }
-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}`;
-    }
-  });
-}
 
 // src/signal/props.ts
-import { types as t7 } from "@babel/core";
+import { types as t6 } from "@babel/core";
 function replaceProps(path) {
   var _a;
   const state = path.state;
   const firstParam = path.node.params[0];
-  if (!firstParam || !t7.isObjectPattern(firstParam)) {
+  if (!firstParam || !t6.isObjectPattern(firstParam)) {
     return;
   }
   const returnStatement = path.get("body").get("body").find((statement) => statement.isReturnStatement());
@@ -839,18 +613,18 @@ function replaceProps(path) {
     return;
   }
   const returnValue = (_a = returnStatement.node) == null ? void 0 : _a.argument;
-  if (!t7.isJSXElement(returnValue)) {
+  if (!t6.isJSXElement(returnValue)) {
     return;
   }
   function replaceProperties(properties2, parentPath) {
     properties2.forEach((property) => {
-      if (t7.isObjectProperty(property)) {
+      if (t6.isObjectProperty(property)) {
         const keyName = property.key.name;
-        if (t7.isIdentifier(property.value)) {
+        if (t6.isIdentifier(property.value)) {
           const propertyName = property.value.name;
           const newName = `${parentPath}${keyName}`;
           path.scope.rename(propertyName, newName);
-        } else if (t7.isObjectPattern(property.value)) {
+        } else if (t6.isObjectPattern(property.value)) {
           replaceProperties(property.value.properties, `${parentPath}${keyName}.`);
         }
       }
@@ -858,10 +632,10 @@ function replaceProps(path) {
   }
   const properties = firstParam.properties;
   replaceProperties(
-    properties.filter((property) => !t7.isRestElement(property)),
+    properties.filter((property) => !t6.isRestElement(property)),
     "__props."
   );
-  const notRestProperties = properties.filter((property) => !t7.isRestElement(property));
+  const notRestProperties = properties.filter((property) => !t6.isRestElement(property));
   const notRestNames = notRestProperties.map(
     (property) => property.key.name
   );
@@ -869,19 +643,19 @@ function replaceProps(path) {
     console.warn("props name can not start with $");
     return;
   }
-  const restElement = properties.find((property) => t7.isRestElement(property));
-  path.node.params[0] = t7.identifier("__props");
+  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] = t7.identifier(restName);
+      path.node.params[0] = t6.identifier(restName);
     } else {
-      const restVariableDeclaration = t7.variableDeclaration("const", [
-        t7.variableDeclarator(
-          t7.identifier(restName),
-          t7.callExpression(state.useReactive, [
-            t7.identifier("__props"),
-            t7.arrayExpression(notRestNames.map((name) => t7.stringLiteral(name)))
+      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)))
           ])
         )
       ]);
@@ -903,19 +677,24 @@ function src_default() {
     },
     visitor: {
       Program: transformProgram,
-      JSXElement: transformJSX,
-      JSXFragment: transformJSX,
       FunctionDeclaration: replaceProps,
       ArrowFunctionExpression: replaceProps,
       VariableDeclarator: replaceSymbol,
       ImportDeclaration: replaceImportDeclaration,
       Identifier: symbolIdentifier,
       ObjectPattern: symbolObjectPattern,
-      ArrayPattern: symbolArrayPattern
+      ArrayPattern: symbolArrayPattern,
+      JSXElement: transformJSX,
+      JSXFragment: transformJSX
     }
   };
 }
 export {
   src_default as default
 };
+/**
+* @estjs/shared v0.0.10-beta.20
+* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
+* @license MIT
+**/
 //# sourceMappingURL=index.js.map