update snippet react/prevent-default

Author: flyerhzm

lib/react/prevent-default.js

@@ -1,10 +1,58 @@
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+function convertToFunctionName(name) {
+  if (name.startsWith('on')) {
+    return name.replace(/^on/, 'handle');
+  } else {
+    return `on${name.charAt(0).toUpperCase() + name.slice(1)}`;
+  }
+}
+
+function invertKeyValues(obj) {
+  return Object.fromEntries(
+    Object.entries(obj).map(entry => entry.reverse())
+  );
 }
 
 new Synvert.Rewriter("react", "prevent-default", () => {
   description(`
-    convert foo to bar
+    Force add preventDefault() to onClick event handler.
+
+    \`\`\`javascript
+      const Post = ({ newPost, doDelete }) => {
+        const deletePost = () => {
+          doDelete();
+        }
+
+        return (
+          <a href="#" onClick={newPost}>New</a>
+          <a href="#" onClick={deletePost}>Delete</a>
+        )
+      }
+      export default Post;
+    \`\`\`
+
+    =>
+
+    \`\`\`javascript
+      const Post = ({ newPost, doDelete }) => {
+        const deletePost = (event) => {
+          event.preventDefault();
+
+          doDelete();
+        }
+
+        const onNewPost = (event) => {
+          event.preventDefault();
+
+          newPost();
+        }
+
+        return (
+          <a href="#" onClick={onNewPost}>New</a>
+          <a href="#" onClick={deletePost}>Delete</a>
+        )
+      }
+      export default Post;
+    \`\`\`
   `);
 
   configure({ parser: Synvert.Parser.TYPESCRIPT });
@@ -16,6 +64,7 @@ new Synvert.Rewriter("react", "prevent-default", () => {
       // { 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 = {};
+      const onClickCode = {};
 
       // find a elements whose href attribute is '#'
       findNode(`
@@ -31,8 +80,17 @@ new Synvert.Rewriter("react", "prevent-default", () => {
           ]
           [closingElement=.JsxClosingElement[tagName=a]]`,
         () => {
-          findNode(`.JsxAttribute[name=onClick]`, () => {
+          findNode(`.JsxAttribute[name=onClick][initializer=.JsxExpression[expression=.Identifier]]`, () => {
             onClickPreventDefault[this.currentNode.initializer.expression.escapedText] = 'functionNotDefined';
+            onClickCode[this.currentNode.initializer.expression.escapedText] = this.mutationAdapter.getSource(this.currentNode.initializer.expression) + '()';
+          });
+          findNode(`.JsxAttribute[name=onClick][initializer=.JsxExpression[expression=.ArrowFunction[body=.CallExpression]]]`, () => {
+            onClickPreventDefault[this.currentNode.initializer.expression.body.expression.escapedText] = 'functionNotDefined';
+            onClickCode[this.currentNode.initializer.expression.body.expression.escapedText] = this.mutationAdapter.getSource(this.currentNode.initializer.expression.body);
+          });
+          findNode(`.JsxAttribute[name=onClick][initializer=.JsxExpression[expression=.ArrowFunction[body=.Block[statements.length>0]]]]`, () => {
+            onClickPreventDefault[this.currentNode.initializer.expression.body.statements[0].expression.expression.escapedText] = 'functionNotDefined';
+            onClickCode[this.currentNode.initializer.expression.body.statements[0].expression.expression.escapedText] = this.currentNode.initializer.expression.body.statements.map(statement => this.mutationAdapter.getSource(statement)).join("\n");
           });
         }
       );
@@ -66,18 +124,36 @@ new Synvert.Rewriter("react", "prevent-default", () => {
                   ]
                 ]
               ]
-              [closingElement=.JsxClosingElement[tagName=a]] .JsxAttribute[name=onClick][initializer=.JsxExpression[expression=${functionName}]]`,
+              [closingElement=.JsxClosingElement[tagName=a]]`,
             () => {
-              replace('initializer', { with: `{on${capitalizeFirstLetter(functionName)}}` });
+              findNode(`
+                .JsxAttribute
+                  [name=onClick]
+                  [initializer=.JsxExpression
+                    [expression IN (
+                      ${functionName}
+                      .ArrowFunction
+                        [body=.CallExpression
+                          [expression=${functionName}]
+                        ]
+                      .ArrowFunction
+                        [body=.Block
+                          [statements.length>0]
+                          [statements.0.expression.expression=${functionName}]
+                        ]
+                    )]
+                  ]`, () => {
+                replace('initializer', { with: `{${convertToFunctionName(functionName)}}` });
+              });
             }
           );
 
-          findNode(`.ReturnStatement`, () => {
+          findNode(`.Block:first-child > .ReturnStatement`, () => {
             insertBefore(`
-const on${capitalizeFirstLetter(functionName)} = (event) => {
+const ${convertToFunctionName(functionName)} = (event) => {
   event.preventDefault();
 
-  ${functionName}();
+  ${onClickCode[functionName]};
 }
             `.trim() + "\n", { fixIndent: true });
           });

test/react/prevent-default.spec.js

@@ -4,7 +4,7 @@ const { assertConvert } = require("../utils");
 describe(snippet, () => {
   describe('add a function to prevent default', () => {
     const input = `
-      const Post = ({ newPost, editPost, doDelete }) => {
+      const Post = ({ newPost, editPost, doDelete, onPrint, doPop }) => {
         const onEditPost = (event) => {
           event.preventDefault();
 
@@ -15,16 +15,24 @@ describe(snippet, () => {
           doDelete();
         }
 
+        const printIcon = (
+          <a href="#" onClick={() => onPrint()}>
+            <img src="/svg/print.svg" alt="Print" className="marginlft10" />
+          </a>
+        );
+
         return (
           <a href="#" onClick={newPost}>New</a>
           <a href="#" onClick={onEditPost}>Edit</a>
           <a href="#" onClick={deletePost}>Delete</a>
+          {printIcon}
+          <a href="#" onClick={() => { doPop(false) }}>Pop</a>
         )
       }
       export default Post;
     `;
     const output = `
-      const Post = ({ newPost, editPost, doDelete }) => {
+      const Post = ({ newPost, editPost, doDelete, onPrint, doPop }) => {
         const onEditPost = (event) => {
           event.preventDefault();
 
@@ -37,16 +45,36 @@ describe(snippet, () => {
           doDelete();
         }
 
+        const printIcon = (
+          <a href="#" onClick={handlePrint}>
+            <img src="/svg/print.svg" alt="Print" className="marginlft10" />
+          </a>
+        );
+
+        const handlePrint = (event) => {
+          event.preventDefault();
+
+          onPrint();
+        }
+
         const onNewPost = (event) => {
           event.preventDefault();
 
           newPost();
         }
 
+        const onDoPop = (event) => {
+          event.preventDefault();
+
+          doPop(false);
+        }
+
         return (
           <a href="#" onClick={onNewPost}>New</a>
           <a href="#" onClick={onEditPost}>Edit</a>
           <a href="#" onClick={deletePost}>Delete</a>
+          {printIcon}
+          <a href="#" onClick={onDoPop}>Pop</a>
         )
       }
       export default Post;