fix: always call setState with arrow function

InfiniteXyy · Nov 12, 2020 · 957aea8 · 957aea8
1 parent 259985d
commit 957aea8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-label-sugar",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "babel plugin to use label sugar for useState hook",
   "main": "lib/index.js",
   "files": [

diff --git a/src/index.ts b/src/index.ts
@@ -79,18 +79,11 @@ function reactLabelSugar(_: any, options: PluginOptions): PluginItem {
         if (isMemberExpression(node.left)) {
           !ignoreMemberExpr && handleMemberExpression(node.left, ref, path);
         } else {
-          if (node.operator === "=") {
-            path.replaceWith(callExpression(ref.modifier, [node.right]));
-          } else {
-            path.replaceWith(
-              callExpression(ref.modifier, [
-                arrowFunctionExpression(
-                  [ref.identify],
-                  binaryExpression(node.operator.slice(0, -1) as any, ref.identify, node.right)
-                ),
-              ])
-            );
-          }
+          const arrowReturn =
+            node.operator === "="
+              ? node.right
+              : binaryExpression(node.operator.slice(0, -1) as any, ref.identify, node.right);
+          path.replaceWith(callExpression(ref.modifier, [arrowFunctionExpression([ref.identify], arrowReturn)]));
         }
       },
       UpdateExpression: (path, state: ReactRefsState) => {

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -33,14 +33,14 @@ describe("test react-label-sugar", () => {
       const code = `
       function App() {
         ref: count = 20 * 3;
-        return React.createElement("button", { onClick: () => count = count + 1 }, count)
+        return () => count = count + 1
       }
     `;
       const actual = transformSync(code, { plugins })?.code;
       const expected = `
       function App() {
         const [count, setCount] = React.useState(20 * 3);
-        return React.createElement("button", { onClick: () => setCount(count + 1) }, count)
+        return () => setCount(count => count + 1)
       }
     `;
       expect(await minify(actual)).to.equal(await minify(expected));
@@ -54,7 +54,7 @@ describe("test react-label-sugar", () => {
         const _setCount2 = () => {};
         ref: count = 0;
         ref: count2 = 1;
-        return React.createElement("button", { onClick: () => { count = 1; count2 = 2; } });
+        return () => { count = 1; count2 = 2; };
       }
     `;
       const actual = transformSync(code, { plugins })?.code;
@@ -65,7 +65,7 @@ describe("test react-label-sugar", () => {
         const _setCount2 = () => {};
         const [count, _setCount] = React.useState(0);
         const [count2, _setCount3] = React.useState(1);
-        return React.createElement("button", { onClick: () => { _setCount(1); _setCount3(2); } });
+        return () => { _setCount((count) => 1); _setCount3((count) => 2); };
       }
     `;
       expect(await minify(actual)).to.equal(await minify(expected));
@@ -76,15 +76,15 @@ describe("test react-label-sugar", () => {
       function App() {
         ref: count = 0;
         let other = 1;
-        return React.createElement("button", { onClick: () => { count = 1; other = 1; } });
+        return () => { count = 1; other = 1; };
       }
     `;
       const actual = transformSync(code, { plugins })?.code;
       const expected = await minify(`
       function App() {
         const [count, setCount] = React.useState(0);
         let other = 1;
-        return React.createElement("button", { onClick: () => { setCount(1); other = 1; } });
+        return () => { setCount((count) => 1); other = 1; };
       }
     `);
       expect(await minify(actual)).to.equal(await minify(expected));
@@ -95,15 +95,15 @@ describe("test react-label-sugar", () => {
       function App() {
         ref: count = 0;
         ref: count2 = 0;
-        return React.createElement("button", { onClick: () => { count *= 2; count2++; } });
+        return () => { count *= 2; count2++; };
       }
     `;
       const actual = transformSync(code, { plugins })?.code;
       const expected = `
       function App() {
         const [count, setCount] = React.useState(0);
         const [count2, setCount2] = React.useState(0);
-        return React.createElement("button", { onClick: () => { setCount(count => count * 2); setCount2(count => count + 1) } });
+        return () => { setCount(count => count * 2); setCount2(count => count + 1) };
       }
     `;
       expect(await minify(actual)).to.equal(await minify(expected));