Got TS-based createReducer transform mostly working

Author: markerikson

packages/rtk-codemods2/transforms/createReducerBuilder/__testfixtures__/basic-ts.output.ts

@@ -5,7 +5,7 @@ createReducer(initialState, (builder) => {
 });
 
 createReducer(initialState, (builder) => {
-  builder.addCase(todoAdded, function(state: SliceState, action: PayloadAction<string>) {
+  builder.addCase(todoAdded, (state: SliceState, action: PayloadAction<string>) => {
     // stuff
   });
 });

packages/rtk-codemods2/transforms/createReducerBuilder/__testfixtures__/basic.input.js

@@ -1,11 +1,31 @@
 createReducer(initialState, {
-  [todoAdded]: (state, action) => {
+  [todoAdded1a]: (state, action) => {
     // stuff
   },
+  [todoAdded1b]: (state, action) => action.payload,
+  [todoAdded1c + "test"]: (state, action) => {
+    // stuff
+  },
+  [todoAdded1d](state, action) {
+    // stuff
+  },
+  [todoAdded1e]: function(state, action) {
+    // stuff
+  },
+  todoAdded1f: (state, action) => {
+    //stuff
+  }
 });
 
+
 createReducer(initialState, {
-  [todoAdded](state, action) {
+  [todoAdded2a]: (state, action) => {
     // stuff
   },
-});
+  [todoAdded2b](state, action) {
+    // stuff
+  },
+  [todoAdded2c]: function(state, action) {
+    // stuff
+  }
+});

packages/rtk-codemods2/transforms/createReducerBuilder/__testfixtures__/basic.output.js

@@ -1,11 +1,36 @@
 createReducer(initialState, (builder) => {
-  builder.addCase(todoAdded, (state, action) => {
+  builder.addCase(todoAdded1a, (state, action) => {
     // stuff
   });
+
+  builder.addCase(todoAdded1b, (state, action) => action.payload);
+
+  builder.addCase(todoAdded1c + "test", (state, action) => {
+    // stuff
+  });
+
+  builder.addCase(todoAdded1d, (state, action) => {
+    // stuff
+  });
+
+  builder.addCase(todoAdded1e, (state, action) => {
+    // stuff
+  });
+  builder.addCase(todoAdded1f, (state, action) => {
+    //stuff
+  });
 });
 
+
 createReducer(initialState, (builder) => {
-  builder.addCase(todoAdded, function(state, action) {
+  builder.addCase(todoAdded2a, (state, action) => {
     // stuff
   });
-});
+
+  builder.addCase(todoAdded2b, (state, action) => {
+    // stuff
+  });
+  builder.addCase(todoAdded2c, (state, action) => {
+    // stuff
+  });
+});

packages/rtk-codemods2/transforms/createReducerBuilder/index.ts

@@ -1,33 +1,66 @@
 import { namedTypes } from 'ast-types';
-import { ExpressionKind } from 'ast-types/gen/kinds';
-import { JSCodeshift, Transform } from 'jscodeshift';
+import { ExpressionKind, PatternKind } from 'ast-types/gen/kinds';
+import {
+  BlockStatement,
+  CallExpression,
+  Expression,
+  ExpressionStatement,
+  JSCodeshift,
+  ObjectExpression,
+  ObjectMethod,
+  ObjectProperty,
+  Transform,
+} from 'jscodeshift';
+
+type ObjectKey = ObjectMethod['key'] & ObjectProperty['key'];
 
 function wrapInAddCaseExpression(
   j: JSCodeshift,
-  member: namedTypes.Identifier,
-  arrowArguments: any[]
+  key: ObjectKey,
+  params: PatternKind[],
+  body: BlockStatement | ExpressionKind
 ) {
-  return j.callExpression(
-    j.memberExpression(member, j.identifier('addCase'), false),
-    arrowArguments
+  const identifier = j.identifier('builder');
+  return j.expressionStatement(
+    j.callExpression(j.memberExpression(identifier, j.identifier('addCase'), false), [
+      key,
+      j.arrowFunctionExpression(params, body),
+    ])
   );
 }
 
-export function reducerPropsToBuilderExpression(
-  j: JSCodeshift,
-  defNode: namedTypes.SpreadElement | ExpressionKind
-) {
-  // @ts-ignore
-  const [firstCase, ...restOfCases] = defNode.properties;
-
-  const expressionStatement = restOfCases.reduce((acc: any, c: any) => {
-    return wrapInAddCaseExpression(j, acc, [c.key, c.value]);
-  }, wrapInAddCaseExpression(j, j.identifier('builder'), [firstCase.key, firstCase.value]));
+export function reducerPropsToBuilderExpression(j: JSCodeshift, defNode: ObjectExpression) {
+  const caseExpressions: ExpressionStatement[] = [];
+  for (let property of defNode.properties) {
+    let key: ObjectKey = null as any;
+    let params: PatternKind[] = [];
+    let body: BlockStatement | ExpressionKind = null as any;
+    switch (property.type) {
+      case 'ObjectMethod': {
+        key = property.key;
+        params = property.params;
+        body = property.body;
+        break;
+      }
+      case 'ObjectProperty': {
+        switch (property.value.type) {
+          case 'ArrowFunctionExpression':
+          case 'FunctionExpression': {
+            key = property.key;
+            params = property.value.params;
+            body = property.value.body;
+            break;
+          }
+        }
+      }
+    }
+    if (!body) {
+      continue;
+    }
+    caseExpressions.push(wrapInAddCaseExpression(j, key, params, body));
+  }
 
-  return j.arrowFunctionExpression(
-    [j.identifier('builder')],
-    j.blockStatement([j.expressionStatement(expressionStatement)])
-  );
+  return j.arrowFunctionExpression([j.identifier('builder')], j.blockStatement(caseExpressions));
 }
 
 const transform: Transform = (file, api) => {
@@ -42,15 +75,20 @@ const transform: Transform = (file, api) => {
         arguments: { 1: { type: 'ObjectExpression' } },
       })
       .forEach((path) => {
+        const reducerObjectExpression = path.node.arguments[1] as ObjectExpression;
         j(path).replaceWith(
           j.callExpression(j.identifier('createReducer'), [
             path.node.arguments[0],
-            reducerPropsToBuilderExpression(j, path.node.arguments[1]),
+            reducerPropsToBuilderExpression(j, reducerObjectExpression),
           ])
         );
       })
-      .toSource()
+      .toSource({
+        arrowParensAlways: true,
+      })
   );
 };
 
+export const parser = 'tsx';
+
 export default transform;