add support for update expressions

Author: barelyhuman

package.json

@@ -25,7 +25,7 @@
     "fix": "npx prettier --write source/* test/*",
     "watch": "npm run build -- --watch source",
     "prepublishOnly": "npm run build",
-    "release": "np --branch dev"
+    "release": "npx np --branch dev"
   },
   "dependencies": {
     "@babel/types": "^7.16.0"

source/index.ts

@@ -48,6 +48,7 @@ function transformToStateByScope(path: any, toMod: ToModifyVariableI[]) {
     },
     ExpressionStatement({node}: {node: t.ExpressionStatement}) {
       transformAssignmentExpression(node, toMod)
+      transformUpdateExpression(node, toMod)
     },
   })
 }
@@ -154,6 +155,47 @@ function transformAssignmentExpression(
   node.expression = t.callExpression(t.identifier(setterName), callArgs)
 }
 
+function transformUpdateExpression(
+  node: t.ExpressionStatement,
+  toMod: ToModifyVariableI[]
+) {
+  if (!t.isUpdateExpression(node.expression)) {
+    return
+  }
+
+  const expression: t.UpdateExpression = node.expression
+
+  if (!t.isIdentifier(expression.argument)) {
+    return
+  }
+
+  if (!isReactiveIdentifier(expression.argument.name, toMod)) {
+    return
+  }
+
+  const normName = normalizeName(expression.argument.name)
+  const setterName = getSetterName(normName)
+
+  let callArgs: t.Expression[]
+
+  switch (expression.operator) {
+    case '++': {
+      callArgs = [
+        t.binaryExpression('+', t.identifier(normName), t.numericLiteral(1)),
+      ]
+      break
+    }
+    case '--': {
+      callArgs = [
+        t.binaryExpression('-', t.identifier(normName), t.numericLiteral(1)),
+      ]
+      break
+    }
+  }
+
+  node.expression = t.callExpression(t.identifier(setterName), callArgs)
+}
+
 function isReactiveIdentifier(idName: string, modMap: ToModifyVariableI[]) {
   return (
     modMap.findIndex((x) => x.raw === idName || x.simplified === idName) > -1

test/snapshots/test.ts.md

@@ -227,3 +227,24 @@ Generated by [AVA](https://avajs.dev).
         onClick: updateUser␊
       }, "Click Me"));␊
     }`
+
+## Update Expression Test
+
+> Snapshot 1
+
+    `import * as React from "react";␊
+    ␊
+    function App() {␊
+      const [count, setCount] = React.useState(1);␊
+    ␊
+      const updateUser = () => {␊
+        setCount(count + 1);␊
+        setCount(count - 1);␊
+      };␊
+    ␊
+      return /*#__PURE__*/React.createElement(React.Fragment, null, users.map(user => {␊
+        return /*#__PURE__*/React.createElement("p", null, user.name);␊
+      }), /*#__PURE__*/React.createElement("p", null, updateCount), /*#__PURE__*/React.createElement("button", {␊
+        onClick: updateUser␊
+      }, "Click Me"));␊
+    }`

test/snapshots/test.ts.snap

@@ -287,3 +287,34 @@ test('Mix and Match State', (t) => {
   }
   t.snapshot(result.code)
 })
+
+test('Update Expression Test', (t) => {
+  const code = `
+  import * as React from "react";
+  
+  function App() {
+    let $count = 1;
+
+    const updateUser = () => {
+      count++;
+      count--;
+    };
+
+    return (
+      <>
+      {$users.map(user=>{
+        return <p>{user.name}</p>
+      })}
+      <p>{updateCount}</p>
+      <button onClick={updateUser}>Click Me</button>
+      </>
+    );
+  }
+  `
+
+  const result = compile(code)
+  if (!result) {
+    return t.fail()
+  }
+  t.snapshot(result.code)
+})