fix: support arrow function getters (#86)

wattanx · Dec 11, 2024 · cd6583d · cd6583d
1 parent 6c1abf7
commit cd6583d
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 19 deletions.
diff --git a/packages/pinia-converter/src/lib/converters/setup/getters-converter.spec.ts b/packages/pinia-converter/src/lib/converters/setup/getters-converter.spec.ts
@@ -19,9 +19,16 @@ const source = `export const getters = {
   getCounter(state) {
     return state.counter
   },
-  plusOne(state) {
+  plusOne: (state) => {
     const plusOne = state.counter + 1;
     return plusOne;
+  },
+  // TODO: need to convert to 'counter.value'
+  spread: ({ counter }) => {
+    return counter;
+  },
+  computedFunc: (state) => (arg) => {
+    return state.counter + arg;
   }
 }`;
 
@@ -44,6 +51,22 @@ test("setup mutations converter", () => {
         const plusOne = counter.value + 1;
         return plusOne;
     });
+    ",
+        "use": "computed",
+      },
+      {
+        "returnName": "spread",
+        "statement": "const spread = computed(() => {
+        return counter;
+    });
+    ",
+        "use": "computed",
+      },
+      {
+        "returnName": "computedFunc",
+        "statement": "const computedFunc = computed(() =>  (arg) => {
+        return counter.value + arg;
+      });
     ",
         "use": "computed",
       },

diff --git a/packages/pinia-converter/src/lib/converters/setup/getters-converter.ts b/packages/pinia-converter/src/lib/converters/setup/getters-converter.ts
@@ -2,6 +2,7 @@ import type {
   Statement,
   VariableDeclaration,
   VariableStatement,
+  ParameterDeclaration,
 } from "ts-morph";
 import { Node } from "ts-morph";
 import type { ConvertedExpression } from "./types";
@@ -29,23 +30,49 @@ export const convertGetters = (
 
     const list = properties
       .map((property) => {
+        let parameters: ParameterDeclaration[] = [];
+        let block;
+        let propertyName = "";
+
+        if (Node.isPropertyAssignment(property)) {
+          const initializer = property.getInitializer();
+          if (!initializer || !Node.isArrowFunction(initializer)) return;
+
+          parameters = initializer.getParameters();
+          block = initializer.getBody();
+          propertyName = property.getName();
+        }
+
         if (Node.isMethodDeclaration(property)) {
-          const parameters = property.getParameters();
-          const firstParamsText = parameters[0].getText();
-
-          const block = property.getBody();
-
-          if (Node.isBlock(block)) {
-            const newStatements = block
-              .getStatements()
-              .map((statement) => replaceState(statement, firstParamsText))
-              .filter(Boolean) as string[];
-
-            return {
-              propertyName: property.getName(),
-              statement: newStatements.join(""),
-            };
-          }
+          parameters = property.getParameters();
+          block = property.getBody();
+          propertyName = property.getName();
+        }
+
+        const firstParamsText = parameters[0].getText();
+
+        if (Node.isArrowFunction(block)) {
+          const regex = new RegExp(`${firstParamsText}\\.([\\w-]+)`, "g");
+
+          return {
+            propertyName,
+            statement: `${block
+              .getFullText()
+              .replaceAll(regex, (_, p1) => `${p1}.value`)}`,
+            isArrowFunction: true,
+          };
+        }
+
+        if (Node.isBlock(block)) {
+          const newStatements = block
+            .getStatements()
+            .map((statement) => replaceState(statement, firstParamsText))
+            .filter(Boolean) as string[];
+
+          return {
+            propertyName,
+            statement: newStatements.join(""),
+          };
         }
       })
       .filter(Boolean) as { propertyName: string; statement: string }[];
@@ -61,9 +88,16 @@ const getInitializer = (declaration: VariableDeclaration) => {
 };
 
 const convertToComputed = (
-  list: { propertyName: string; statement: string }[]
+  list: { propertyName: string; statement: string; isArrowFunction?: boolean }[]
 ): ConvertedExpression[] => {
-  return list.map(({ propertyName, statement }) => {
+  return list.map(({ propertyName, statement, isArrowFunction }) => {
+    if (isArrowFunction) {
+      return {
+        returnName: propertyName,
+        statement: `const ${propertyName} = computed(() => ${statement});\n`,
+        use: "computed",
+      };
+    }
     return {
       returnName: propertyName,
       statement: `const ${propertyName} = computed(() => {${statement}