babel-plugin-essor 0.0.14-beta.9 → 0.0.14

package/dist/index.js

@@ -55,7 +55,7 @@ var capitalize = cacheStringFunction(
 import { types as t } from "@babel/core";
 var imports = /* @__PURE__ */ new Set();
 var defaultOption = {
-  ssg: false,
+  server: false,
   symbol: "$",
   props: true
 };
@@ -67,9 +67,10 @@ var transformProgram = {
       h: path.scope.generateUidIdentifier("h$"),
       template: path.scope.generateUidIdentifier("template$"),
       ssg: path.scope.generateUidIdentifier("ssg$"),
-      useSignal: path.scope.generateUidIdentifier("signal$"),
-      useComputed: path.scope.generateUidIdentifier("computed$"),
-      useReactive: path.scope.generateUidIdentifier("reactive$"),
+      Fragment: path.scope.generateUidIdentifier("fragment$"),
+      useSignal: path.scope.generateUidIdentifier("useSignal$"),
+      useComputed: path.scope.generateUidIdentifier("useComputed$"),
+      useReactive: path.scope.generateUidIdentifier("useReactive$"),
       tmplDeclaration: t.variableDeclaration("const", []),
       opts: state.opts
     };
@@ -98,8 +99,26 @@ function createImport(state, from) {
   return t.importDeclaration(ImportSpecifier, importSource);
 }
 
-// src/shared.ts
+// src/jsx/shared.ts
 import { types as t2 } from "@babel/core";
+function createClientResult() {
+  return {
+    index: 1,
+    isLastChild: false,
+    parentIndex: 0,
+    props: {},
+    template: ""
+  };
+}
+function createServerResult() {
+  return {
+    index: 1,
+    isLastChild: false,
+    parentIndex: 0,
+    props: {},
+    template: []
+  };
+}
 function hasSiblingElement(path) {
   const siblings = path.getAllPrevSiblings().concat(path.getAllNextSiblings());
   const hasSibling = siblings.some(
@@ -129,7 +148,7 @@ function jsxElementNameToString(node) {
   }
   return `${node.namespace.name}:${node.name.name}`;
 }
-function isComponent(tagName) {
+function isComponentName(tagName) {
   return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-z]/i.test(tagName[0]);
 }
 function isTextChild(path) {
@@ -155,10 +174,45 @@ function setNodeText(path, text) {
     }
   }
 }
-function isSymbolStart(path, name) {
-  const state = path.state;
-  const { symbol } = (state == null ? void 0 : state.opts) || "$";
-  return startsWith(name, symbol);
+function replaceSpace(node) {
+  return node.value.replaceAll(/\s+/g, " ").trim();
+}
+function isValidChild(path) {
+  const regex = /^\s*$/;
+  if (path.isStringLiteral() || path.isJSXText()) {
+    return !regex.test(path.node.value);
+  }
+  return Object.keys(path.node).length > 0;
+}
+function hasObjectExpression(prop, value, props, state, isCt = false) {
+  let ct = "";
+  const hasConditional = value.properties.some(
+    (property) => t2.isObjectProperty(property) && t2.isConditionalExpression(property.value)
+  );
+  if (hasConditional) {
+    imports.add("useComputed");
+    props[prop] = t2.callExpression(state.useComputed, [t2.arrowFunctionExpression([], value)]);
+  } else if (isCt) {
+    value.properties.forEach((property) => {
+      if (t2.isObjectProperty(property)) {
+        ct += `${property.key.name || property.key.value}:${property.value.value};`;
+      }
+    });
+    delete props[prop];
+  }
+  return ct;
+}
+function getNodeText(path) {
+  if (path.isJSXText()) {
+    return replaceSpace(path.node);
+  }
+  if (path.isJSXExpressionContainer()) {
+    const expression = path.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      return String(expression.node.value);
+    }
+  }
+  return "";
 }
 
 // src/jsx/constants.ts
@@ -201,286 +255,116 @@ var svgTags = [
 ];
 
 // src/jsx/index.ts
-var isSSG = false;
-function addToTemplate(result, content, join = false) {
-  if (isSSG) {
-    if (join && result.template.length > 0) {
-      result.template[result.template.length - 1] += content;
+var currentResult;
+var isServer = false;
+function addTemplate(content, join = false) {
+  if (isServer) {
+    if (join && currentResult.template.length > 0) {
+      currentResult.template[currentResult.template.length - 1] += content;
     } else {
-      result.template.push(content);
+      currentResult.template.push(content);
     }
   } else {
-    result.template += content;
+    currentResult.template += content;
   }
 }
 function transformJSX(path) {
+  var _a, _b;
+  isServer = (_b = (_a = path.state) == null ? void 0 : _a.opts) == null ? void 0 : _b.server;
+  const preCurrentResult = currentResult;
+  currentResult = isServer ? createServerResult() : createClientResult();
+  transformJSXElement(path, isServer, true);
+  path.replaceWith(isServer ? createServerNode(path) : createClientNode(path));
+  currentResult = preCurrentResult;
+}
+function createClientNode(path) {
+  var _a, _b;
   const state = path.state;
-  isSSG = state.opts.ssg;
-  const result = {
-    index: 1,
-    isLastChild: false,
-    parentIndex: 0,
-    props: {},
-    template: isSSG ? [] : ""
-  };
-  transformJSXElement(path, result, true);
-  path.replaceWith(createEssorNode(path, result));
-}
-function replaceSpace(node) {
-  return node.value.replaceAll(/\s+/g, " ").trim();
+  const isJSXFragment = path.isJSXFragment();
+  const isComponent = path.isJSXElement() && isComponentName(getTagName(path.node));
+  const tmpl = isComponent ? t3.identifier(getTagName(path.node)) : path.scope.generateUidIdentifier("_tmpl$");
+  let templateNode;
+  if (!isComponent) {
+    templateNode = t3.callExpression(state.template, [
+      t3.stringLiteral(currentResult.template)
+    ]);
+    state.tmplDeclaration.declarations.push(t3.variableDeclarator(tmpl, templateNode));
+    imports.add("template");
+  }
+  const key = (_b = currentResult.props.key) != null ? _b : (_a = currentResult.props[0]) == null ? void 0 : _a.key;
+  const propsArg = createProps(currentResult.props);
+  const args = isComponent && getTagName(path.node) === "Fragment" ? [t3.stringLiteral(""), propsArg] : [tmpl, propsArg];
+  if (key) {
+    args.push(key);
+  }
+  const fnName = isJSXFragment || isComponent && getTagName(path.node) === "Fragment" ? "Fragment" : "h";
+  imports.add(fnName);
+  return t3.callExpression(state[fnName], args);
 }
-function createEssorNode(path, result) {
+function createServerNode(path) {
+  var _a, _b;
   const state = path.state;
-  const isComponent2 = path.isJSXElement() && isComponent(getTagName(path.node));
-  const tmpl = isComponent2 ? t3.identifier(getTagName(path.node)) : path.scope.generateUidIdentifier("_tmpl$");
-  if (!isComponent2) {
-    const template = isSSG ? t3.arrayExpression(result.template.map(t3.stringLiteral)) : t3.callExpression(state.template, [t3.stringLiteral(result.template)]);
-    state.tmplDeclaration.declarations.push(t3.variableDeclarator(tmpl, template));
-    if (!isSSG) {
-      imports.add("template");
-    }
+  const isComponent = path.isJSXElement() && isComponentName(getTagName(path.node));
+  const tmpl = isComponent ? t3.identifier(getTagName(path.node)) : path.scope.generateUidIdentifier("_tmpl$");
+  let templateNode;
+  if (!isComponent) {
+    templateNode = t3.arrayExpression(currentResult.template.map(t3.stringLiteral));
+    state.tmplDeclaration.declarations.push(t3.variableDeclarator(tmpl, templateNode));
   }
-  const key = result.props.key;
-  delete result.props.key;
-  const args = [tmpl, createProps(result.props)];
+  const key = (_b = currentResult.props.key) != null ? _b : (_a = currentResult.props[0]) == null ? void 0 : _a.key;
+  const propsArg = createProps(currentResult.props);
+  const args = isComponent && getTagName(path.node) === "Fragment" ? [t3.stringLiteral(""), propsArg] : [tmpl, propsArg];
   if (key) {
     args.push(key);
   }
-  const fnName = isSSG ? "ssg" : "h";
+  const fnName = "ssg";
   imports.add(fnName);
   return t3.callExpression(state[fnName], args);
 }
-function createProps(props) {
-  const toAstNode = (value) => {
-    if (isArray(value)) {
-      return t3.arrayExpression(value.map(toAstNode));
-    }
-    if (value && typeof value === "object" && !t3.isNode(value)) {
-      return createProps(value);
-    }
-    switch (typeof value) {
-      case "string":
-        return t3.stringLiteral(value);
-      case "number":
-        return t3.numericLiteral(value);
-      case "boolean":
-        return t3.booleanLiteral(value);
-      case "undefined":
-      case void 0:
-        return t3.tsUndefinedKeyword();
-      case null:
-        return t3.nullLiteral();
-      default:
-        return value;
-    }
-  };
-  const result = Object.entries(props).map(
-    ([prop, value]) => prop === "_$spread$" ? t3.spreadElement(toAstNode(value)) : t3.objectProperty(t3.stringLiteral(prop), toAstNode(value))
-  );
-  return t3.objectExpression(result);
-}
-function transformJSXElement(path, result, isRoot = false) {
+function transformJSXElement(path, isServer2 = false, isRoot = false) {
+  const state = path.state;
   if (path.isJSXElement()) {
     const tagName = getTagName(path.node);
-    const tagIsComponent = isComponent(tagName);
+    const tagIsComponent = isComponentName(tagName);
     const isSelfClose = !tagIsComponent && selfClosingTags.includes(tagName);
-    const isSvg = svgTags.includes(tagName) && result.index === 1;
-    const { props, hasExpression } = getAttrProps(path);
-    if (props.key) {
-      result.props.key = props.key;
-      delete props.key;
-    }
+    const isSvg = svgTags.includes(tagName) && currentResult.index === 1;
+    const { props, hasExpression } = getAttrProps(path, state);
     if (tagIsComponent) {
-      handleComponentElement(path, result, isRoot, props);
-    } else {
-      handleHTMLElement(path, result, tagName, isSelfClose, isSvg, props, hasExpression);
-    }
-  } else {
-    result.index--;
-    transformChildren(path, result);
-  }
-}
-function handleComponentElement(path, result, isRoot, props) {
-  if (isRoot) {
-    result.props = props;
-    const children = getChildren(path);
-    if (children.length > 0) {
-      const childrenGenerator = children.length === 1 ? children[0] : t3.arrayExpression(children);
-      if (t3.isConditionalExpression(childrenGenerator)) {
-        result.props.children = t3.arrowFunctionExpression([], childrenGenerator);
-      } else {
-        result.props.children = childrenGenerator;
-      }
-    }
-  } else {
-    transformJSX(path);
-    replaceChild(path.node, result);
-  }
-}
-function handleHTMLElement(path, result, tagName, isSelfClose, isSvg, props, hasExpression) {
-  if (isSvg) {
-    result.template = isSSG ? [`<svg _svg_  data-hk="${result.index}">`] : `<svg _svg_ >`;
-  }
-  addToTemplate(result, `<${tagName}${isSSG ? ` data-hk="${result.index}"` : ""}`, true);
-  handleAttributes(props, result);
-  addToTemplate(result, isSelfClose ? "/>" : ">", !hasExpression);
-  if (!isSelfClose) {
-    transformChildren(path, result);
-    if (hasSiblingElement(path) || isSSG) {
-      addToTemplate(result, `</${tagName}>`);
-    }
-  }
-}
-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));
+      if (isRoot) {
+        currentResult.props = props;
+        const children = getChildren(path);
+        if (children.length > 0) {
+          const childrenGenerator = children.length === 1 ? children[0] : t3.arrayExpression(children);
+          if (t3.isConditionalExpression(childrenGenerator)) {
+            currentResult.props.children = t3.arrowFunctionExpression([], childrenGenerator);
+          } else {
+            currentResult.props.children = childrenGenerator;
+          }
+        }
       } else {
-        pre.push(cur);
+        transformJSX(path);
+        replaceChild(path.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()) {
-      addToTemplate(result, `${expression.node.value}`, true);
-    } else if (expression.isExpression()) {
-      replaceChild(expression.node, result);
-    } else if (t3.isJSXEmptyExpression(expression.node)) {
     } else {
-      throw new Error("Unsupported child type");
-    }
-  } else if (child.isJSXText()) {
-    addToTemplate(result, replaceSpace(child.node), true);
-  } else {
-    throw new Error("Unsupported child type");
-  }
-}
-function getNodeText(path) {
-  if (path.isJSXText()) {
-    return replaceSpace(path.node);
-  }
-  if (path.isJSXExpressionContainer()) {
-    const expression = path.get("expression");
-    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
-      return String(expression.node.value);
-    }
-  }
-  return "";
-}
-function isStyleClassName(name) {
-  return name === "class" || name === "style";
-}
-function handleAttributes(props, result) {
-  let klass = "";
-  let style = "";
-  for (const [prop, value] of Object.entries(props)) {
-    if (prop === "class" && typeof value === "string") {
-      klass += ` ${value}`;
-      delete props[prop];
-    } else if (prop === "style" && typeof value === "string") {
-      style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
-      delete props[prop];
-    } else if (value === true) {
-      addToTemplate(result, ` ${prop}`);
-      delete props[prop];
-    } else if (value === false) {
-      delete props[prop];
-    } else if (typeof value === "string" || typeof value === "number") {
-      addToTemplate(result, ` ${prop}="${value}"`);
-      delete props[prop];
-    } else if (t3.isConditionalExpression(value)) {
-      props[prop] = t3.arrowFunctionExpression([], value);
-    } else if (t3.isObjectExpression(value)) {
-      const val = handleObjectExpression(prop, value, props, isStyleClassName(prop));
-      if (val) {
-        if (prop === "class") {
-          klass += ` ${val}`;
-        }
-        if (prop === "style") {
-          style += `${val}${val.at(-1) === ";" ? "" : ";"}`;
+      if (isSvg) {
+        currentResult.template = isServer2 ? [`<svg _svg_  data-hk="${currentResult.index}">`] : `<svg _svg_ >`;
+      }
+      addTemplate(`<${tagName}${isServer2 ? ` data-hk="${currentResult.index}"` : ""}`, true);
+      handleAttributes(props, state);
+      addTemplate(isSelfClose ? "/>" : ">", !hasExpression);
+      if (!isSelfClose) {
+        transformChildren(path);
+        if (hasSiblingElement(path) || isServer2) {
+          addTemplate(`</${tagName}>`);
         }
       }
     }
-  }
-  if (Object.keys(props).length > 0) {
-    result.props[result.index] = props;
-  }
-  if (klass.trim()) {
-    addToTemplate(result, ` class="${klass.trim()}"`);
-  }
-  if (style.trim()) {
-    addToTemplate(result, ` style="${style.trim()}"`);
-  }
-}
-function handleObjectExpression(prop, value, props, isCt = false) {
-  let ct = "";
-  const hasConditional = value.properties.some(
-    (property) => t3.isObjectProperty(property) && t3.isConditionalExpression(property.value)
-  );
-  if (hasConditional) {
-    props[prop] = t3.arrowFunctionExpression([], value);
-  } else if (isCt) {
-    value.properties.forEach((property) => {
-      if (t3.isObjectProperty(property)) {
-        ct += `${property.key.name || property.key.value}:${property.value.value};`;
-      }
-    });
-    delete props[prop];
-  }
-  return ct;
-}
-function replaceChild(node, result) {
-  var _a, _b, _c, _d, _e;
-  if (result.isLastChild) {
-    result.index--;
   } else {
-    addToTemplate(result, "<!>");
+    currentResult.index--;
+    transformChildren(path);
   }
-  (_c = (_a = result.props)[_b = result.parentIndex]) != null ? _c : _a[_b] = {};
-  (_e = (_d = result.props[result.parentIndex]).children) != null ? _e : _d.children = [];
-  result.props[result.parentIndex].children.push(
-    t3.arrayExpression([
-      t3.arrowFunctionExpression([], node),
-      result.isLastChild ? t3.nullLiteral() : t3.identifier(String(result.index))
-    ])
-  );
-}
-function getChildren(path) {
-  return path.get("children").filter((child) => isValidChild(child)).map((child) => {
-    if (child.isJSXElement() || child.isJSXFragment()) {
-      transformJSX(child);
-    } else if (child.isJSXExpressionContainer()) {
-      child.replaceWith(child.get("expression"));
-    } else if (child.isJSXText()) {
-      child.replaceWith(t3.stringLiteral(replaceSpace(child.node)));
-    } else {
-      throw new Error("Unsupported child type");
-    }
-    return child.node;
-  });
 }
-function isValidChild(path) {
-  const regex = /^\s*$/;
-  if (path.isStringLiteral() || path.isJSXText()) {
-    return !regex.test(path.node.value);
-  }
-  return Object.keys(path.node).length > 0;
-}
-function getAttrProps(path) {
+function getAttrProps(path, state) {
   const props = {};
   let hasExpression = false;
   path.get("openingElement").get("attributes").forEach((attribute) => {
@@ -515,7 +399,10 @@ function getAttrProps(path) {
               );
             } else {
               if (expression.isConditionalExpression()) {
-                props[name] = t3.arrowFunctionExpression([], expression.node);
+                imports.add("useComputed");
+                props[name] = t3.callExpression(state.useComputed, [
+                  t3.arrowFunctionExpression([], expression.node)
+                ]);
               } else {
                 props[name] = expression.node;
               }
@@ -538,16 +425,179 @@ function getAttrProps(path) {
     hasExpression
   };
 }
+function getChildren(path) {
+  return path.get("children").filter((child) => isValidChild(child)).map((child) => {
+    if (child.isJSXElement() || child.isJSXFragment()) {
+      transformJSX(child);
+    } else if (child.isJSXExpressionContainer()) {
+      child.replaceWith(child.get("expression"));
+    } else if (child.isJSXText()) {
+      child.replaceWith(t3.stringLiteral(replaceSpace(child.node)));
+    } else {
+      throw new Error("Unsupported child type");
+    }
+    return child.node;
+  });
+}
+function replaceChild(node) {
+  var _a, _b, _c, _d, _e;
+  if (currentResult.isLastChild) {
+    currentResult.index--;
+  } else {
+    addTemplate("<!>");
+  }
+  (_c = (_a = currentResult.props)[_b = currentResult.parentIndex]) != null ? _c : _a[_b] = {};
+  (_e = (_d = currentResult.props[currentResult.parentIndex]).children) != null ? _e : _d.children = [];
+  currentResult.props[currentResult.parentIndex].children.push(
+    t3.arrayExpression([
+      t3.arrowFunctionExpression([], node),
+      currentResult.isLastChild ? t3.nullLiteral() : t3.identifier(String(currentResult.index))
+    ])
+  );
+}
+function handleAttributes(props, state) {
+  let klass = "";
+  let style = "";
+  for (const [prop, value] of Object.entries(props)) {
+    if (prop === "class" && typeof value === "string") {
+      klass += ` ${value}`;
+      delete props[prop];
+    } else if (prop === "style" && typeof value === "string") {
+      style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
+      delete props[prop];
+    } else if (value === true) {
+      addTemplate(` ${prop}`);
+      delete props[prop];
+    } else if (value === false) {
+      delete props[prop];
+    } else if (typeof value === "string" || typeof value === "number") {
+      addTemplate(` ${prop}="${value}"`);
+      delete props[prop];
+    } else if (t3.isConditionalExpression(value)) {
+      imports.add("useComputed");
+      props[prop] = t3.callExpression(state.useComputed, [t3.arrowFunctionExpression([], value)]);
+    } else if (t3.isObjectExpression(value)) {
+      const val = hasObjectExpression(
+        prop,
+        value,
+        props,
+        state,
+        prop === "class" || prop === "style"
+      );
+      if (val) {
+        if (prop === "class") {
+          klass += ` ${val}`;
+        }
+        if (prop === "style") {
+          style += `${val}${val.at(-1) === ";" ? "" : ";"}`;
+        }
+      }
+    }
+  }
+  if (Object.keys(props).length > 0) {
+    currentResult.props[currentResult.index] = props;
+  }
+  if (klass.trim()) {
+    addTemplate(` class="${klass.trim()}"`);
+  }
+  if (style.trim()) {
+    addTemplate(` style="${style.trim()}"`);
+  }
+}
+function transformChildren(path) {
+  const parentIndex = currentResult.index;
+  path.get("children").reduce((pre, cur) => {
+    if (isValidChild(cur)) {
+      const lastChild = pre.at(-1);
+      if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
+        setNodeText(lastChild, getNodeText(lastChild) + getNodeText(cur));
+      } else {
+        pre.push(cur);
+      }
+    }
+    return pre;
+  }, []).forEach((child, i, arr) => {
+    currentResult.parentIndex = parentIndex;
+    currentResult.isLastChild = i === arr.length - 1;
+    transformChild(child);
+  });
+}
+function transformChild(child) {
+  currentResult.index++;
+  if (child.isJSXElement() || child.isJSXFragment()) {
+    transformJSXElement(child, false);
+  } else if (child.isJSXExpressionContainer()) {
+    const expression = child.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      addTemplate(`${expression.node.value}`, true);
+    } else if (expression.isExpression()) {
+      replaceChild(expression.node);
+    } else if (t3.isJSXEmptyExpression(expression.node)) {
+    } else {
+      throw new Error("Unsupported child type");
+    }
+  } else if (child.isJSXText()) {
+    addTemplate(replaceSpace(child.node), true);
+  } else {
+    throw new Error("Unsupported child type");
+  }
+}
+function createProps(props) {
+  const result = [];
+  for (const prop in props) {
+    let value = props[prop];
+    if (prop === "key") {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      value = t3.arrayExpression(value);
+    }
+    if (typeof value === "object" && value !== null && !t3.isNode(value)) {
+      value = createProps(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();
+    }
+    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);
+}
 
 // src/signal/symbol.ts
+import { types as t5 } from "@babel/core";
+
+// src/shared.ts
 import { types as t4 } from "@babel/core";
+function isSymbolStart(path, name) {
+  const state = path.state;
+  const { symbol } = (state == null ? void 0 : state.opts) || "$";
+  return startsWith(name, symbol);
+}
+
+// src/signal/symbol.ts
 function replaceSymbol(path) {
   const { init, id } = path.node;
   const variableName = id.name;
-  if (t4.isObjectPattern(id) || t4.isArrayPattern(id) || !isSymbolStart(path, variableName)) return;
-  const isComputed = init && (t4.isFunctionExpression(init) || t4.isArrowFunctionExpression(init)) && path.parent.kind === "const";
+  if (t5.isObjectPattern(id) || t5.isArrayPattern(id) || !isSymbolStart(path, variableName)) return;
+  const isComputed = init && (t5.isFunctionExpression(init) || t5.isArrowFunctionExpression(init)) && path.parent.kind === "const";
   const hookName = isComputed ? "useComputed" : "useSignal";
-  const newInit = t4.callExpression(t4.identifier(path.state[hookName].name), init ? [init] : []);
+  const newInit = t5.callExpression(t5.identifier(path.state[hookName].name), init ? [init] : []);
   imports.add(hookName);
   path.node.init = newInit;
 }
@@ -557,31 +607,31 @@ function symbolIdentifier(path) {
   const { node } = path;
   if (!isSymbolStart(path, node.name)) return;
   if (!path.findParent((p) => p.isMemberExpression() && p.node.property.name === "value")) {
-    path.replaceWith(t4.memberExpression(t4.identifier(node.name), t4.identifier("value")));
+    path.replaceWith(t5.memberExpression(t5.identifier(node.name), t5.identifier("value")));
   }
 }
 function shouldProcessIdentifier(parentPath) {
-  return parentPath && !t4.isVariableDeclarator(parentPath) && !t4.isImportSpecifier(parentPath) && !t4.isObjectProperty(parentPath) && !t4.isArrayPattern(parentPath) && !t4.isObjectPattern(parentPath);
+  return parentPath && !t5.isVariableDeclarator(parentPath) && !t5.isImportSpecifier(parentPath) && !t5.isObjectProperty(parentPath) && !t5.isArrayPattern(parentPath) && !t5.isObjectPattern(parentPath);
 }
 function symbolObjectPattern(path) {
   path.node.properties.forEach((property) => {
-    if (t4.isObjectProperty(property) && t4.isIdentifier(property.key) && isSymbolStart(path, property.key.name)) {
-      property.key = t4.identifier(property.key.name);
+    if (t5.isObjectProperty(property) && t5.isIdentifier(property.key) && isSymbolStart(path, property.key.name)) {
+      property.key = t5.identifier(property.key.name);
     }
   });
 }
 function symbolArrayPattern(path) {
   path.node.elements.forEach((element) => {
-    if (t4.isIdentifier(element) && element.name.startsWith("$")) {
-      element.name = t4.identifier(element.name).name;
-    } else if (t4.isObjectPattern(element)) {
+    if (t5.isIdentifier(element) && element.name.startsWith("$")) {
+      element.name = t5.identifier(element.name).name;
+    } else if (t5.isObjectPattern(element)) {
       symbolObjectPattern({ node: element });
     }
   });
 }
 
 // src/signal/import.ts
-import { types as t5 } from "@babel/core";
+import { types as t6 } from "@babel/core";
 function replaceImportDeclaration(path) {
   path.node.specifiers.forEach((specifier) => {
     const variableName = specifier.local.name;
@@ -595,11 +645,11 @@ function isVariableUsedAsObject(path, variableName) {
   var _a;
   const binding = path.scope.getBinding(variableName);
   return ((_a = binding == null ? void 0 : binding.referencePaths) == null ? void 0 : _a.some((referencePath) => {
-    if (t5.isMemberExpression(referencePath.parent)) {
+    if (t6.isMemberExpression(referencePath.parent)) {
       const { object, property } = referencePath.parent;
-      if (t5.isIdentifier(object, { name: variableName })) {
+      if (t6.isIdentifier(object, { name: variableName })) {
         referencePath.parentPath.replaceWith(
-          t5.memberExpression(t5.memberExpression(object, t5.identifier("value")), property)
+          t6.memberExpression(t6.memberExpression(object, t6.identifier("value")), property)
         );
         return true;
       }
@@ -609,28 +659,30 @@ function isVariableUsedAsObject(path, variableName) {
 }
 
 // src/signal/props.ts
-import { types as t6 } from "@babel/core";
+import { types as t7 } from "@babel/core";
 function replaceProps(path) {
   var _a;
   const state = path.state;
   const firstParam = path.node.params[0];
-  if (!firstParam || !t6.isObjectPattern(firstParam)) return;
+  if (!firstParam || !t7.isObjectPattern(firstParam)) return;
   const returnStatement = path.get("body").get("body").find((statement) => statement.isReturnStatement());
-  if (!returnStatement || !t6.isJSXElement((_a = returnStatement.node) == null ? void 0 : _a.argument)) return;
+  if (!returnStatement || !t7.isJSXElement((_a = returnStatement.node) == null ? void 0 : _a.argument)) return;
   const replaceProperties = (properties2, parentPath) => {
     properties2.forEach((property) => {
-      if (t6.isObjectProperty(property) && t6.isIdentifier(property.key)) {
+      if (t7.isObjectProperty(property) && t7.isIdentifier(property.key)) {
         const keyName = property.key.name;
-        if (t6.isIdentifier(property.value)) {
+        if (t7.isIdentifier(property.value)) {
           path.scope.rename(property.value.name, `${parentPath}${keyName}`);
-        } else if (t6.isObjectPattern(property.value)) {
+        } else if (t7.isObjectPattern(property.value)) {
           replaceProperties(property.value.properties, `${parentPath}${keyName}.`);
         }
       }
     });
   };
   const properties = firstParam.properties;
-  const notRestProperties = properties.filter((property) => !t6.isRestElement(property));
+  const notRestProperties = properties.filter(
+    (property) => !t7.isRestElement(property)
+  );
   replaceProperties(notRestProperties, "__props.");
   const notRestNames = notRestProperties.map((property) => property.key.name);
   if (notRestNames.some((name) => startsWith(name, "$"))) {
@@ -640,12 +692,12 @@ function replaceProps(path) {
   handleRestElement(path, state, properties, notRestNames);
 }
 function handleRestElement(path, state, properties, notRestNames) {
-  const restElement = properties.find((property) => t6.isRestElement(property));
-  path.node.params[0] = t6.identifier("__props");
+  const restElement = properties.find((property) => t7.isRestElement(property));
+  path.node.params[0] = t7.identifier("__props");
   if (restElement) {
     const restName = restElement.argument.name;
     if (notRestNames.length === 0) {
-      path.node.params[0] = t6.identifier(restName);
+      path.node.params[0] = t7.identifier(restName);
     } else {
       const restVariableDeclaration = createRestVariableDeclaration(state, restName, notRestNames);
       imports.add("useReactive");
@@ -654,12 +706,12 @@ function handleRestElement(path, state, properties, notRestNames) {
   }
 }
 function createRestVariableDeclaration(state, restName, notRestNames) {
-  return t6.variableDeclaration("const", [
-    t6.variableDeclarator(
-      t6.identifier(restName),
-      t6.callExpression(state.useReactive, [
-        t6.identifier("__props"),
-        t6.arrayExpression(notRestNames.map((name) => t6.stringLiteral(name)))
+  return t7.variableDeclaration("const", [
+    t7.variableDeclarator(
+      t7.identifier(restName),
+      t7.callExpression(state.useReactive, [
+        t7.identifier("__props"),
+        t7.arrayExpression(notRestNames.map((name) => t7.stringLiteral(name)))
       ])
     )
   ]);