add react/prevent-default snippet

Author: flyerhzm

lib/helpers/find-react-component.js

@@ -0,0 +1,9 @@
+new Synvert.Helper('find-react-component', function(options, helperFn) {
+  let componentName = null;
+  withNode('.ExportAssignment[expression=.Identifier]', function () {
+    componentName = this.currentNode.expression.escapedText;
+  });
+  withNode(`.VariableDeclaration[name=${componentName}][initializer=.ArrowFunction]`, function () {
+    helperFn();
+  });
+});

lib/react/prevent-default.js

@@ -0,0 +1,95 @@
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+new Synvert.Rewriter("react", "prevent-default", () => {
+  description(`
+    convert foo to bar
+  `);
+
+  configure({ parser: Synvert.Parser.TYPESCRIPT });
+
+  withinFiles(Synvert.ALL_FILES, function () {
+    callHelper('helpers/find-react-component', () => {
+      // { functionName: 'functionNotDefined' } the function is not defined;
+      // { functionName: 'functionNoEventParameter' } the function is defined but not event parameter;
+      // { functionName: 'preventDefaultNotCalled' } the function is defined with event parameter but not call preventDefault();
+      // { functionName: 'preventDefaultCalled' } the function is defined with event parameter and call preventDefault();
+      const onClickPreventDefault = {};
+
+      // find a elements whose href attribute is '#'
+      findNode(`
+        .JsxElement
+          [openingElement=.JsxOpeningElement
+            [tagName=a]
+            [attributes=.JsxAttributes
+              [properties includes .JsxAttribute
+                [name=href]
+                [initializer=.StringLiteral[text="#"]]
+              ]
+            ]
+          ]
+          [closingElement=.JsxClosingElement[tagName=a]]`,
+        () => {
+          findNode(`.JsxAttribute[name=onClick]`, () => {
+            onClickPreventDefault[this.currentNode.initializer.expression.escapedText] = 'functionNotDefined';
+          });
+        }
+      );
+
+      for (const functionName of Object.keys(onClickPreventDefault)) {
+        findNode(`.VariableDeclaration[name=${functionName}][initializer=.ArrowFunction]`, () => {
+          if (this.currentNode.initializer.parameters.length === 0) {
+            // no parameters
+            onClickPreventDefault[functionName] = 'functionNoEventParameter';
+          } else {
+            // has parameters
+            onClickPreventDefault[functionName] = 'preventDefaultNotCalled';
+            const eventVariable = this.currentNode.initializer.parameters[0].name.escapedText;
+            findNode(`.CallExpression[expression=.PropertyAccessExpression[name=preventDefault][expression=${eventVariable}]]`, () => {
+              onClickPreventDefault[functionName] = 'preventDefaultCalled';
+            });
+          }
+        });
+      }
+
+      for (const [functionName, reason] of Object.entries(onClickPreventDefault)) {
+        if (reason === 'functionNotDefined') {
+          findNode(`
+            .JsxElement
+              [openingElement=.JsxOpeningElement
+                [tagName=a]
+                [attributes=.JsxAttributes
+                  [properties includes .JsxAttribute
+                    [name=href]
+                    [initializer=.StringLiteral[text="#"]]
+                  ]
+                ]
+              ]
+              [closingElement=.JsxClosingElement[tagName=a]] .JsxAttribute[name=onClick][initializer=.JsxExpression[expression=${functionName}]]`,
+            () => {
+              replace('initializer', { with: `{on${capitalizeFirstLetter(functionName)}}` });
+            }
+          );
+
+          findNode(`.ReturnStatement`, () => {
+            insertBefore(`
+const on${capitalizeFirstLetter(functionName)} = (event) => {
+  event.preventDefault();
+
+  ${functionName}();
+}
+            `.trim() + "\n", { fixIndent: true });
+          });
+        }
+
+        if (reason === 'functionNoEventParameter') {
+          findNode(`.VariableDeclaration[name=${functionName}][initializer=.ArrowFunction]`, () => {
+            replace('initializer.parameters', { with: '(event)' });
+            prepend("event.preventDefault();\n");
+          });
+        }
+      }
+    });
+  });
+});

test/helpers/find-react-component.spec.js

@@ -0,0 +1,21 @@
+const helper = "helpers/find-react-component";
+const { assertHelper } = require("../utils");
+
+describe("helpers/find-react-component", () => {
+  const source = `
+    const MyComponent = () => {
+      return <div>My Component</div>;
+    };
+
+    export default MyComponent;
+  `;
+  assertHelper({
+    input: source,
+    output: source,
+    helper,
+    options: {},
+    helperFn: function () {
+      expect(this.currentNode.name.escapedText).toEqual("MyComponent");
+    },
+  });
+});

test/react/prevent-default.spec.js

@@ -0,0 +1,63 @@
+const snippet = "react/prevent-default";
+const { assertConvert } = require("../utils");
+
+describe(snippet, () => {
+  describe('add a function to prevent default', () => {
+    const input = `
+      const Post = ({ newPost, editPost, doDelete }) => {
+        const onEditPost = (event) => {
+          event.preventDefault();
+
+          editPost();
+        }
+
+        const deletePost = () => {
+          doDelete();
+        }
+
+        return (
+          <a href="#" onClick={newPost}>New</a>
+          <a href="#" onClick={onEditPost}>Edit</a>
+          <a href="#" onClick={deletePost}>Delete</a>
+        )
+      }
+      export default Post;
+    `;
+    const output = `
+      const Post = ({ newPost, editPost, doDelete }) => {
+        const onEditPost = (event) => {
+          event.preventDefault();
+
+          editPost();
+        }
+
+        const deletePost = (event) => {
+          event.preventDefault();
+
+          doDelete();
+        }
+
+        const onNewPost = (event) => {
+          event.preventDefault();
+
+          newPost();
+        }
+
+        return (
+          <a href="#" onClick={onNewPost}>New</a>
+          <a href="#" onClick={onEditPost}>Edit</a>
+          <a href="#" onClick={deletePost}>Delete</a>
+        )
+      }
+      export default Post;
+    `;
+
+    assertConvert({
+      input,
+      output,
+      snippet,
+      path: "code.jsx",
+      helpers: ["helpers/find-react-component"],
+    });
+  });
+});

test/utils.js

@@ -113,7 +113,7 @@ const assertHelper = (options) => {
       const rewriter = new Synvert.Rewriter("group", "name", function () {
         this.configure({ parser: Synvert.Parser.TYPESCRIPT });
         this.withinFilesSync("*.{js,jsx}", function () {
-          this.callHelperSync(options.helper, options.options);
+          this.callHelperSync(options.helper, options.options, options.helperFn.bind(this));
         });
       });
       rewriter.processSync();
@@ -137,7 +137,7 @@ const assertHelper = (options) => {
       const rewriter = new Synvert.Rewriter("group", "name", async function () {
         this.configure({ parser: Synvert.Parser.TYPESCRIPT });
         await this.withinFiles("*.{js,jsx}", async function () {
-          await this.callHelper(options.helper, options.options);
+          await this.callHelper(options.helper, options.options, options.helperFn.bind(this));
         });
       });
       await rewriter.process();