babel-plugin-essor 0.0.6-beta.8 → 0.0.6

package/dist/index.js

@@ -1,9 +1,18 @@
 // ../shared/dist/essor-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/jsx/server.ts
 import { types as t3 } from "@babel/core";
@@ -13,13 +22,14 @@ import { types as t } from "@babel/core";
 var imports = /* @__PURE__ */ new Set();
 var transformProgram = {
   enter(path, state) {
+    imports.clear();
     path.state = {
       h: path.scope.generateUidIdentifier("h$"),
-      ssrtmpl: path.scope.generateUidIdentifier("ssrtmpl$"),
-      ssr: path.scope.generateUidIdentifier("ssr$"),
+      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
     };
@@ -87,17 +97,73 @@ var svgTags = [
   "use"
 ];
 
-// src/jsx/client.ts
+// src/jsx/shared.ts
 import { types as t2 } from "@babel/core";
-function transformJSXClient(path) {
+function hasSiblingElement(path) {
+  const siblings = path.getAllPrevSiblings().concat(path.getAllNextSiblings());
+  const hasSibling = siblings.some((siblingPath) => siblingPath.isJSXElement());
+  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-Za-z]/.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));
+    }
+  }
+}
+
+// src/jsx/server.ts
+function transformJSXService(path) {
   const result = {
-    index: 1,
+    index: 0,
     isLastChild: false,
     parentIndex: 0,
     props: {},
-    template: ""
+    template: []
+    // 修改为数组
   };
-  transformJSXElement(path, result, true);
+  transformJSXServiceElement(path, result, true);
   path.replaceWith(createEssorNode(path, result));
 }
 function createEssorNode(path, result) {
@@ -105,82 +171,91 @@ function createEssorNode(path, result) {
   const state = path.state;
   let tmpl;
   if (path.isJSXElement() && isComponent(getTagName(path.node))) {
-    tmpl = t2.identifier(getTagName(path.node));
+    tmpl = t3.identifier(getTagName(path.node));
   } else {
     tmpl = path.scope.generateUidIdentifier("_tmpl$");
-    const template = t2.callExpression(state.template, [t2.stringLiteral(result.template)]);
-    const declarator = t2.variableDeclarator(tmpl, template);
+    const template = t3.arrayExpression(result.template.map(t3.stringLiteral));
+    const declarator = t3.variableDeclarator(tmpl, template);
     state.tmplDeclaration.declarations.push(declarator);
-    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("h");
-  return t2.callExpression(state.h, args);
+  imports.add("renderTemplate");
+  return t3.callExpression(state.renderTemplate, args);
 }
 function createProps(props) {
-  const toAstNode = (value) => {
+  const result = [];
+  for (const prop in props) {
+    let value = props[prop];
+    if (prop === "key") {
+      continue;
+    }
     if (Array.isArray(value)) {
-      return t2.arrayExpression(value.map(toAstNode));
+      value = t3.arrayExpression(value);
     }
-    if (value && typeof value === "object" && !t2.isNode(value)) {
-      return createProps(value);
+    if (typeof value === "object" && value !== null && !t3.isNode(value)) {
+      value = createProps(value);
     }
-    switch (typeof value) {
-      case "string":
-        return t2.stringLiteral(value);
-      case "number":
-        return t2.numericLiteral(value);
-      case "boolean":
-        return t2.booleanLiteral(value);
-      case "undefined":
-        return t2.tsUndefinedKeyword();
-      case void 0:
-        return t2.tsUndefinedKeyword();
-      case null:
-        return t2.nullLiteral();
-      default:
-        return value;
+    if (typeof value === "string") {
+      value = t3.stringLiteral(value);
     }
-  };
-  const result = Object.keys(props).filter((prop) => prop !== "key").map((prop) => {
-    const value = toAstNode(props[prop]);
-    return prop === "_$spread$" ? t2.spreadElement(value) : t2.objectProperty(t2.stringLiteral(prop), value);
-  });
-  return t2.objectExpression(result);
+    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));
+    }
+  }
+  return t3.objectExpression(result);
 }
-function transformJSXElement(path, result, isRoot = false) {
+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 = getAttrProps(path);
+    const { props, hasExpression } = getAttrProps(path);
     if (tagIsComponent) {
       if (isRoot) {
         result.props = props;
         const children = getChildren(path);
         if (children.length > 0) {
-          const childrenGenerator = children.length === 1 ? children[0] : t2.arrayExpression(children);
+          const childrenGenerator = children.length === 1 ? children[0] : t3.arrayExpression(children);
           result.props.children = childrenGenerator;
         }
       } else {
-        transformJSXClient(path);
+        transformJSXService(path);
         replaceChild(path.node, result);
       }
     } else {
       if (isSvg) {
-        result.template = "<svg _svg_>";
+        result.template.push("<svg _svg_>");
       }
-      result.template += `<${tagName}`;
+      result.template.push(`<${tagName}`);
       handleAttributes(props, result);
-      result.template += isSelfClose ? "/>" : ">";
+      if (hasExpression) {
+        result.template.push(isSelfClose ? "/>" : ">");
+        result.props || (result.props = {});
+      } else {
+        result.template[result.template.length - 1] += isSelfClose ? "/>" : ">";
+      }
+      transformChildren(path, result);
       if (!isSelfClose) {
-        transformChildren(path, result);
-        result.template += `</${tagName}>`;
+        result.template.push(`</${tagName}>`);
       }
     }
   } else {
@@ -189,7 +264,7 @@ function transformJSXElement(path, result, isRoot = false) {
   }
 }
 function transformChildren(path, result) {
-  const parentIndex = result.index;
+  const parentIndex = result.template.length;
   path.get("children").reduce((pre, cur) => {
     if (isValidChild(cur)) {
       const lastChild = pre.at(-1);
@@ -207,20 +282,20 @@ function transformChildren(path, result) {
   });
 }
 function transformChild(child, result) {
-  result.index++;
   if (child.isJSXElement() || child.isJSXFragment()) {
-    transformJSXElement(child, result, false);
+    transformJSXServiceElement(child, result, false);
   } else if (child.isJSXExpressionContainer()) {
     const expression = child.get("expression");
     if (expression.isStringLiteral() || expression.isNumericLiteral()) {
-      result.template += String(expression.node.value);
+      result.template[result.template.length - 1] += 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()) {
-    result.template += String(child.node.value);
+    result.template.push(String(child.node.value));
   } else {
     throw new Error("Unsupported child type");
   }
@@ -237,29 +312,6 @@ function getNodeText(path) {
   }
   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(t2.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 = "";
@@ -270,38 +322,20 @@ function handleAttributes(props, result) {
       delete props[prop];
       continue;
     }
-    if (startsWith(prop, "class:")) {
-      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 (startsWith(prop, "style:") && (typeof value === "string" || typeof value === "number")) {
-      const name = prop.replace(/^style:/, "");
-      style += `${name}:${value};`;
-      delete props[prop];
-      continue;
-    }
     if (value === true) {
-      result.template += ` ${prop}`;
+      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 += ` ${prop}="${value}"`;
+      result.template[result.template.length - 1] += ` ${prop}="${value}"`;
       delete props[prop];
     }
   }
@@ -311,36 +345,34 @@ function handleAttributes(props, result) {
   klass = klass.trim();
   style = style.trim();
   if (klass) {
-    result.template += ` class="${klass}"`;
+    result.template[result.template.length - 1] += ` class="${klass}"`;
   }
   if (style) {
-    result.template += ` style="${style}"`;
+    result.template[result.template.length - 1] += ` style="${style}"`;
   }
 }
 function replaceChild(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(
-    t2.arrayExpression([
-      t2.arrowFunctionExpression([], node),
-      result.isLastChild ? t2.nullLiteral() : t2.identifier(String(result.index))
+    t3.arrayExpression([
+      t3.arrowFunctionExpression([], node),
+      t3.identifier(String(result.template.length))
     ])
   );
 }
 function getChildren(path) {
   return path.get("children").filter((child) => isValidChild(child)).map((child) => {
     if (child.isJSXElement() || child.isJSXFragment()) {
-      transformJSXClient(child);
+      transformJSXService(child);
     } else if (child.isJSXExpressionContainer()) {
       child.replaceWith(child.get("expression"));
     } else if (child.isJSXText()) {
-      child.replaceWith(t2.stringLiteral(child.node.value));
+      child.replaceWith(t3.stringLiteral(child.node.value));
     } else {
       throw new Error("Unsupported child type");
     }
@@ -356,6 +388,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);
@@ -372,77 +405,57 @@ function getAttrProps(path) {
           } else if (expression.isNumericLiteral()) {
             props[name] = expression.node.value;
           } else if (expression.isJSXElement() || expression.isJSXFragment()) {
-            transformJSXClient(expression);
+            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)) {
               const value2 = path.scope.generateUidIdentifier("value");
               const bindName = name.slice(5).toLocaleLowerCase();
               props[bindName] = expression.node;
-              props[`update:${bindName}`] = t2.arrowFunctionExpression(
+              props[`update${capitalizeFirstLetter(bindName)}`] = t3.arrowFunctionExpression(
                 [value2],
-                t2.assignmentExpression("=", expression.node, value2)
+                t3.assignmentExpression("=", expression.node, value2)
               );
             } else {
               if (expression.isConditionalExpression()) {
-                props[name] = t2.arrowFunctionExpression([], expression.node);
+                props[name] = t3.arrowFunctionExpression([], expression.node);
               } else {
                 props[name] = expression.node;
               }
             }
           }
         } else if (value.isJSXElement() || value.isJSXFragment()) {
-          transformJSXClient(value);
+          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;
-}
-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 isComponent(tagName) {
-  return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^A-Za-z]/.test(tagName[0]);
-}
-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}`;
+  return {
+    props,
+    hasExpression
+  };
 }
 
-// src/jsx/server.ts
-function transformJSXService(path) {
+// src/jsx/client.ts
+import { types as t4 } from "@babel/core";
+function transformJSXClient(path) {
   const result = {
-    index: 0,
+    index: 1,
     isLastChild: false,
     parentIndex: 0,
     props: {},
-    template: []
-    // 修改为数组
+    template: ""
   };
-  transformJSXServiceElement(path, result, true);
+  transformJSXElement(path, result, true);
   path.replaceWith(createEssorNode2(path, result));
 }
 function createEssorNode2(path, result) {
@@ -450,94 +463,84 @@ function createEssorNode2(path, result) {
   const state = path.state;
   let tmpl;
   if (path.isJSXElement() && isComponent(getTagName(path.node))) {
-    tmpl = t3.identifier(getTagName(path.node));
+    tmpl = t4.identifier(getTagName(path.node));
   } else {
     tmpl = path.scope.generateUidIdentifier("_tmpl$");
-    const template = t3.callExpression(state.ssrtmpl, [
-      t3.arrayExpression(result.template.map(t3.stringLiteral))
-    ]);
-    const declarator = t3.variableDeclarator(tmpl, template);
+    const template = t4.callExpression(state.template, [t4.stringLiteral(result.template)]);
+    const declarator = t4.variableDeclarator(tmpl, template);
     state.tmplDeclaration.declarations.push(declarator);
-    imports.add("ssrtmpl");
+    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("ssr");
-  return t3.callExpression(state.ssr, args);
+  imports.add("h");
+  return t4.callExpression(state.h, args);
 }
 function createProps2(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 = createProps2(value);
-    }
-    if (typeof value === "string") {
-      value = t3.stringLiteral(value);
-    }
-    if (typeof value === "number") {
-      value = t3.numericLiteral(value);
-    }
-    if (typeof value === "boolean") {
-      value = t3.booleanLiteral(value);
-    }
-    if (value === void 0) {
-      value = t3.tsUndefinedKeyword();
+      return t4.arrayExpression(value.map(toAstNode));
     }
-    if (value === null) {
-      value = t3.nullLiteral();
+    if (value && typeof value === "object" && !t4.isNode(value)) {
+      return createProps2(value);
     }
-    if (prop === "_$spread$") {
-      result.push(t3.spreadElement(value));
-    } else {
-      result.push(t3.objectProperty(t3.stringLiteral(prop), 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;
     }
-  }
-  return t3.objectExpression(result);
+  };
+  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 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 } = getAttrProps2(path);
+    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] : t3.arrayExpression(children);
+          const childrenGenerator = children.length === 1 ? children[0] : t4.arrayExpression(children);
           result.props.children = childrenGenerator;
         }
       } else {
-        transformJSXService(path);
+        transformJSXClient(path);
         replaceChild2(path.node, result);
       }
     } else {
       if (isSvg) {
-        result.template.push("<svg _svg_>");
+        result.template = "<svg _svg_>";
       }
-      result.template.push(`<${tagName}`);
+      result.template += `<${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);
+      result.template += isSelfClose ? "/>" : ">";
       if (!isSelfClose) {
-        result.template.push(`</${tagName}>`);
+        transformChildren2(path, result);
+        if (hasSiblingElement(path)) {
+          result.template += `</${tagName}>`;
+        }
       }
     }
   } else {
@@ -546,12 +549,12 @@ function transformJSXServiceElement(path, result, isRoot = false) {
   }
 }
 function transformChildren2(path, result) {
-  const parentIndex = result.template.length;
+  const parentIndex = result.index;
   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));
+        setNodeText(lastChild, getNodeText2(lastChild) + getNodeText2(cur));
       } else {
         pre.push(cur);
       }
@@ -564,19 +567,21 @@ function transformChildren2(path, result) {
   });
 }
 function transformChild2(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);
+      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.push(String(child.node.value));
+    result.template += String(child.node.value);
   } else {
     throw new Error("Unsupported child type");
   }
@@ -593,17 +598,6 @@ function getNodeText2(path) {
   }
   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(t3.stringLiteral(text));
-    }
-  }
-}
 function handleAttributes2(props, result) {
   let klass = "";
   let style = "";
@@ -614,38 +608,20 @@ function handleAttributes2(props, result) {
       delete props[prop];
       continue;
     }
-    if (startsWith(prop, "class:")) {
-      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 (startsWith(prop, "style:") && (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}`;
+      result.template += ` ${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}"`;
+      result.template += ` ${prop}="${value}"`;
       delete props[prop];
     }
   }
@@ -655,34 +631,36 @@ function handleAttributes2(props, result) {
   klass = klass.trim();
   style = style.trim();
   if (klass) {
-    result.template[result.template.length - 1] += ` class="${klass}"`;
+    result.template += ` class="${klass}"`;
   }
   if (style) {
-    result.template[result.template.length - 1] += ` style="${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(
-    t3.arrayExpression([
-      t3.arrowFunctionExpression([], node),
-      t3.identifier(String(result.template.length))
+    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()) {
-      transformJSXService(child);
+      transformJSXClient(child);
     } else if (child.isJSXExpressionContainer()) {
       child.replaceWith(child.get("expression"));
     } else if (child.isJSXText()) {
-      child.replaceWith(t3.stringLiteral(child.node.value));
+      child.replaceWith(t4.stringLiteral(child.node.value));
     } else {
       throw new Error("Unsupported child type");
     }
@@ -698,7 +676,6 @@ function isValidChild2(path) {
 }
 function getAttrProps2(path) {
   const props = {};
-  let hasExpression = false;
   path.get("openingElement").get("attributes").forEach((attribute) => {
     if (attribute.isJSXAttribute()) {
       const name = getAttrName(attribute.node);
@@ -715,81 +692,113 @@ function getAttrProps2(path) {
           } else if (expression.isNumericLiteral()) {
             props[name] = expression.node.value;
           } else if (expression.isJSXElement() || expression.isJSXFragment()) {
-            transformJSXService(expression);
+            transformJSXClient(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)) {
               const value2 = path.scope.generateUidIdentifier("value");
               const bindName = name.slice(5).toLocaleLowerCase();
               props[bindName] = expression.node;
-              props[`update:${bindName}`] = t3.arrowFunctionExpression(
+              props[`update${capitalizeFirstLetter(bindName)}`] = t4.arrowFunctionExpression(
                 [value2],
-                t3.assignmentExpression("=", expression.node, value2)
+                t4.assignmentExpression("=", expression.node, value2)
               );
             } else {
               if (expression.isConditionalExpression()) {
-                props[name] = t3.arrowFunctionExpression([], expression.node);
+                props[name] = t4.arrowFunctionExpression([], expression.node);
               } else {
                 props[name] = expression.node;
               }
             }
           }
         } else if (value.isJSXElement() || value.isJSXFragment()) {
-          transformJSXService(value);
+          transformJSXClient(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
-  };
+  return props;
 }
 
 // src/jsx/index.ts
 function transformJSX(path) {
   const state = path.state;
-  const isSsr = state.opts.ssr;
-  return isSsr ? transformJSXService(path) : transformJSXClient(path);
+  const isSsg = state.opts.ssg;
+  return isSsg ? transformJSXService(path) : transformJSXClient(path);
 }
 
 // src/signal/symbol.ts
-import { types as t4 } from "@babel/core";
-import { cloneNode } from "@babel/types";
+import { types as t5 } 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)) {
+  if (t5.isObjectPattern(path.node.id) || t5.isArrayPattern(path.node.id)) {
     return;
   }
   if (!startsWith(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] : []);
+  if (init && (t5.isFunctionExpression(init) || t5.isArrowFunctionExpression(init)) && path.parent.kind === "const") {
+    const newInit = t5.callExpression(t5.identifier(path.state.useComputed.name), init ? [init] : []);
     imports.add("useComputed");
     path.node.init = newInit;
   } else {
-    const originalImportDeclarationNodes = cloneNode(path.get("id").node, true);
-    const newInit = t4.callExpression(t4.identifier(path.state.useSignal.name), init ? [init] : []);
+    const newInit = t5.callExpression(t5.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);
   }
 }
+function symbolIdentifier(path) {
+  const parentPath = path.parentPath;
+  if (!parentPath || t5.isVariableDeclarator(parentPath) || t5.isImportSpecifier(parentPath) || t5.isObjectProperty(parentPath) || t5.isArrayPattern(parentPath) || t5.isObjectPattern(parentPath)) {
+    return;
+  }
+  const { node } = path;
+  if (node.name.startsWith("$")) {
+    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 = t5.memberExpression(t5.identifier(node.name), t5.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);
+      property.key = newKey;
+    }
+  });
+}
+function symbolArrayPattern(path) {
+  path.node.elements.forEach((element) => {
+    if (t5.isIdentifier(element) && element.name.startsWith("$")) {
+      const newElement = t5.identifier(element.name);
+      element.name = newElement.name;
+    } else if (t5.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);
+          property.key = newKey;
+        }
+      });
+    }
+  });
+}
 
 // src/signal/import.ts
-import { types as t5 } from "@babel/core";
+import { types as t6 } from "@babel/core";
 function isVariableUsedAsObject(path, variableName) {
   const binding = path.scope.getBinding(variableName);
   let isUsedObject = false;
@@ -797,7 +806,7 @@ function isVariableUsedAsObject(path, variableName) {
     return isUsedObject;
   }
   for (const referencePath of binding.referencePaths) {
-    if (t5.isMemberExpression(referencePath.parent)) {
+    if (t6.isMemberExpression(referencePath.parent)) {
       isUsedObject = true;
     }
   }
@@ -814,6 +823,72 @@ function replaceImportDeclaration(path) {
   });
 }
 
+// src/signal/props.ts
+import { types as t7 } from "@babel/core";
+function replaceProps(path) {
+  var _a;
+  const state = path.state;
+  const firstParam = path.node.params[0];
+  if (!firstParam || !t7.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 (!t7.isJSXElement(returnValue)) {
+    return;
+  }
+  function replaceProperties(properties2, parentPath) {
+    properties2.forEach((property) => {
+      if (t7.isObjectProperty(property)) {
+        const keyName = property.key.name;
+        if (t7.isIdentifier(property.value)) {
+          const propertyName = property.value.name;
+          const newName = `${parentPath}${keyName}`;
+          path.scope.rename(propertyName, newName);
+        } else if (t7.isObjectPattern(property.value)) {
+          replaceProperties(property.value.properties, `${parentPath}${keyName}.`);
+        }
+      }
+    });
+  }
+  const properties = firstParam.properties;
+  replaceProperties(
+    properties.filter((property) => !t7.isRestElement(property)),
+    "__props."
+  );
+  const notRestProperties = properties.filter((property) => !t7.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) => t7.isRestElement(property));
+  path.node.params[0] = t7.identifier("__props");
+  if (restElement) {
+    const restName = restElement.argument.name;
+    if (notRestProperties.length === 0) {
+      path.node.params[0] = t7.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)))
+          ])
+        )
+      ]);
+      imports.add("useReactive");
+      path.node.body.body.unshift(restVariableDeclaration);
+    }
+  }
+}
+
 // src/index.ts
 function src_default() {
   return {
@@ -828,8 +903,13 @@ function src_default() {
       Program: transformProgram,
       JSXElement: transformJSX,
       JSXFragment: transformJSX,
+      FunctionDeclaration: replaceProps,
+      ArrowFunctionExpression: replaceProps,
       VariableDeclarator: replaceSymbol,
-      ImportDeclaration: replaceImportDeclaration
+      ImportDeclaration: replaceImportDeclaration,
+      Identifier: symbolIdentifier,
+      ObjectPattern: symbolObjectPattern,
+      ArrayPattern: symbolArrayPattern
     }
   };
 }