fix: scope issue

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

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-react-label-sugar",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "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
@@ -37,7 +37,7 @@ function reactLabelSugar(_: any, options: PluginOptions): PluginItem {
   return {
     visitor: {
       LabeledStatement: (path, state: ReactRefsState) => {
-        const { node } = path;
+        const { node, scope } = path;
         const { label, body } = node;
         if (label.name !== refLabel) return;
 
@@ -57,7 +57,7 @@ function reactLabelSugar(_: any, options: PluginOptions): PluginItem {
 
         const refItem: ReactRefItem = {
           identify: left,
-          modifier: path.scope.generateUidIdentifier(`set${capitalize(left.name)}`),
+          modifier: scope.generateUidIdentifier(`set${capitalize(left.name)}`),
         };
 
         path.replaceWith(
@@ -68,14 +68,14 @@ function reactLabelSugar(_: any, options: PluginOptions): PluginItem {
             ),
           ])
         );
-        if (!state.reactRefs) state.reactRefs = [];
+        state.reactRefs ??= [];
         state.reactRefs.push(refItem);
       },
       AssignmentExpression: (path, state: ReactRefsState) => {
         if (!state.reactRefs) return;
-        const { node } = path;
+        const { node, scope } = path;
         const ref = getTargetRef(node.left, state.reactRefs);
-        if (!ref) return;
+        if (!ref || scope.bindings[ref.identify.name]) return;
         if (isMemberExpression(node.left)) {
           !ignoreMemberExpr && handleMemberExpression(node.left, ref, path);
         } else {
@@ -88,21 +88,21 @@ function reactLabelSugar(_: any, options: PluginOptions): PluginItem {
       },
       UpdateExpression: (path, state: ReactRefsState) => {
         if (!state.reactRefs) return;
-        const { node } = path;
+        const { node, scope } = path;
         const ref = getTargetRef(node.argument, state.reactRefs);
-        if (!ref) return;
+        if (!ref || scope.bindings[ref.identify.name]) return;
         if (isMemberExpression(node.argument)) {
           !ignoreMemberExpr && handleMemberExpression(node.argument, ref, path);
-        } else {
-          path.replaceWith(
-            callExpression(ref.modifier, [
-              arrowFunctionExpression(
-                [ref.identify],
-                binaryExpression(node.operator === "++" ? "+" : "-", ref.identify, numericLiteral(1))
-              ),
-            ])
-          );
+          return;
         }
+        path.replaceWith(
+          callExpression(ref.modifier, [
+            arrowFunctionExpression(
+              [ref.identify],
+              binaryExpression(node.operator === "++" ? "+" : "-", ref.identify, numericLiteral(1))
+            ),
+          ])
+        );
       },
     },
   };

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -4,7 +4,7 @@ import { minify as _minify } from "terser";
 import ReactLabelSugar from "../src";
 
 const minify = async (code?: string | null): Promise<string> => {
-  return (await _minify(code ?? "")).code ?? "";
+  return (await _minify(code ?? "", { format: { beautify: true }, compress: false })).code ?? "";
 };
 
 const plugins = [ReactLabelSugar];
@@ -75,18 +75,25 @@ describe("test react-label-sugar", () => {
       const code = `
       function App() {
         ref: count = 0;
-        let other = 1;
-        return () => { count = 1; other = 1; };
+        useEffect(() => {
+          let count = 0;
+          count++;
+        }, []);
+        return () => { count = 1; };
       }
     `;
       const actual = transformSync(code, { plugins })?.code;
       const expected = await minify(`
       function App() {
         const [count, setCount] = React.useState(0);
-        let other = 1;
-        return () => { setCount((count) => 1); other = 1; };
+        useEffect(() => {
+          let count = 0;
+          count++;
+        }, []);
+        return () => { setCount((count) => 1); };
       }
     `);
+
       expect(await minify(actual)).to.equal(await minify(expected));
     });