{"id":15667,"date":"2023-02-25T20:06:00","date_gmt":"2023-02-25T14:36:00","guid":{"rendered":"https:\/\/blogrevamp.cashfree.com\/?p=15667"},"modified":"2023-02-27T09:05:59","modified_gmt":"2023-02-27T03:35:59","slug":"refactoring-large-code-bases-lets-do-it-with-codemod","status":"publish","type":"post","link":"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/","title":{"rendered":"Refactoring Large Code bases? Let\u2019s Do It with Codemod!"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #005c31;color:#005c31\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #005c31;color:#005c31\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Why_Codemod\" >Why Codemod?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Elements_of_Codemod\" >Elements of Codemod<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Abstract_Syntax_Tree_AST\" >Abstract Syntax Tree (AST)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Dependencies_for_Codemod\" >Dependencies for Codemod<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#JSCodeShift\" >JSCodeShift<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Recast\" >Recast<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Some_Examples\" >Some Examples&nbsp;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Example_1_Changing_a_package_name_in_all_the_files\" >Example 1:&nbsp; Changing a package name in all the files&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Example_2_Refactoring_a_dependent_component\" >Example 2:&nbsp; Refactoring a dependent component&nbsp;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#Codemod_at_Cashfree_Payments\" >Codemod at Cashfree Payments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/#In_Conclusion\" >In Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">Codemods are widely used in front-end development with JavaScript to help with codebase maintenance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As the JavaScript language evolves, new features are added that can make existing code more efficient. To take advantage of these improvements, codemods can automate the process of updating large code bases.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-codemod\"><span class=\"ez-toc-section\" id=\"Why_Codemod\"><\/span>Why Codemod?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Refactoring is an integral part of code maintenance and codemods can help to simplify this process through automation. This reduces the time spent by developers and makes refactoring more efficient.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a codebase needs to make a large-scale change, such as updating a library on which it relies, codemods can assist in automating the process and reducing the risk of bugs or other issues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Codemods contribute to code standardisation by modifying existing code to adhere to a style manual or best practices established within teams.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-elements-of-codemod\"><span class=\"ez-toc-section\" id=\"Elements_of_Codemod\"><\/span>Elements of Codemod<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A codemod includes the following elements:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Input code &#8211; the code that the codemod will transform&nbsp;<\/li>\n\n\n\n<li>Transformation &#8211; a set of Instructions for transforming input code. Transformations can range from simple string replacements to complex code generation.&nbsp;<\/li>\n\n\n\n<li>Output code &#8211; Transformed code produced by applying the transformation&nbsp;<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-abstract-syntax-tree-ast\"><span class=\"ez-toc-section\" id=\"Abstract_Syntax_Tree_AST\"><\/span>Abstract Syntax Tree (AST)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An AST is a tree representation of the abstract syntax of source code. Each node of the tree represents a construct in the source code and the node provides important information about the construct. A browser-based tool called <a href=\"https:\/\/astexplorer.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ASTExplorer<\/a> can help you understand and parse your code&#8217;s tree.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Ytqh_jN2DN38Qu62kPV6zIW1vceqCeOAK9cVqPJLrVqREyCmgajotVdP-ZuD27rCml-rro3-6qZGb2nEQUKjWeqAuO6u-5RIZ1soyLo_bq_WRr9tGYb1028FLijd3sF6g3h285tQtmvMP9LMaEz7gu8\" style=\"\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">AST for the above code:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/6TzGptgNeiMSTTF_NUZdewhtJvsXfQa_xX8svSs7iEMXc0GadkCuNPhy3ivVcJy2jsVYLfPYte_0Rk4Fy23SVG7PYitPGx9MSLhf987_yFAjZkbk7UO7zqPpDXvo4hxGVYhoPn9NtplUyelu8DavUU8\" style=\"\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The three main object types that the JSCodeshift API works with are: nodes, node-paths, and collections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Nodes<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nodes are the basic building blocks of the AST, often referred to as \u201cAST nodes.\u201d These are what you see when exploring your code with AST Explorer. They are simple objects and do not provide any methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Node-paths<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a means of traversing the abstract syntax tree (AST), node-paths are wrappers around an ast-type node. Node-paths take care of this because, in isolation, nodes do not have any information about their parent or scope. We can access the wrapped node through the node property, and the underlying node can be modified using various methods. The term &#8220;paths&#8221; is frequently used to refer to node-paths.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Collections<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A group of zero or more node-paths that the JSCodeshift API returns when you query the AST. They have all sorts of useful methods, some of which we will explore.<br><em>\u201cCollections contain node-paths, node-paths contain nodes, and nodes are what the AST is made of\u201d<\/em>, Remembering this will be easy to understand the JSCodeshift query API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/M9POnTkqf4QH5DvE2JGKxXbtJus2TI0B4xBjUTdfOMfJ_KD7IJUmbLNMSvTjlgRreI7zmVSD1iRRxuea4Oi3py--tP-KealXXPmCLFC8QR_3xGAWZMdYaQfuVY0p7uTzP0aEeGUKUQ_lI3WvlS7-GTw\" style=\"\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dependencies_for_Codemod\"><\/span>Dependencies for Codemod<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"JSCodeShift\"><\/span>JSCodeShift<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JSCodeshift is a toolkit for running a codemod over multiple JavaScript or TypeScript files. It provides an Abstract Syntax Tree (AST) representation of the input code, making it easy to write the transformation instructions. A testing framework is also available to help ensure that the transformation is correct and doesn\u2019t introduce bugs.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Recast\"><\/span>Recast<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An essential component of JSCodeShift that provides parsing and code generation capabilities. Recast takes JavaScript code as input and produces an AST. The generated AST can be manipulated and then a JavaScript code is generated as output with the help of recast.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Some_Examples\"><\/span>Some Examples&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;ll look at a few scenarios where codemods were used at Cashfree Payments:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Changing a package name in all the files.<\/li>\n\n\n\n<li>Refactoring a dependent component.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s set up codemod in our repository with the following steps:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install jscodeshift&nbsp;<\/li>\n\n\n\n<li>In our package.json, assuming src to be a parent folder, add a script to run your codemod <span class=\"highlight\"><mark style=\"background-color:#000000\" class=\"has-inline-color has-vivid-green-cyan-color\">&#8220;codemod&#8221;: &#8220;jscodeshift .\/src &#8211;extensions=js,jsx,ts,tsx -t transform.js -p&#8221;<\/mark><\/span><\/li>\n\n\n\n<li>In transform.js, add the following code<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/-En-ItO42xdsWJvMBM_VQIm0UVmyIBS08QOXY4CeDHPt2kkok0KLPG0YBFichuz6y-PqoJS0lgvpUI6F2vUkI_cDf8RoSGimLVIeEPXzM7_qZ2shujL4BbyPMXJT7xaoioyAdMNl5wZPsax2a6IAowA\" style=\"\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_1_Changing_a_package_name_in_all_the_files\"><\/span>Example 1:&nbsp; Changing a package name in all the files&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In our activity, we are trying to explore the AST for:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/1sfuts6Swnu8H1SsIwGbXjQ7Zbb_vAKyHV7plPqxj8fjKGEsY1j98PgVj7-8nVwSXqIstIHVmMVyXnluF6rrrg6SY4Xvq-77Ryq-HyTwHhD4XbJgy_sbLczPmUM7BpMv6fcPeD-hty4mnizGHoZOWPA\" style=\"\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Head over to<a href=\"https:\/\/astexplorer.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"> AST-Explorer<\/a> to find the abstract syntax tree for your code. There is a lot of data even in the simplest code, so it helps to hide location data and methods. You can toggle the visibility of properties in AST Explorer with the checkboxes above the tree.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can see that import statements are referred to as Import Declaration.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/aR8khuPxm0VFlLdz9xIDWfxA_39kuYPciP3dBPaXottDSyUHtb3oX0s2i8TKjQGRKd316nE4XNyOzwIB6UWILppv_2mY_kFOMZcwqP3TD9BEdZ1trFQuNwSk-XcyWOGclPaWwsBwLgBFkBcZS_2M_pM\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The code above returns a collection of one node-path, which wraps the root AST node. We can use the collection\u2019s find method to search for descendant nodes of a certain type in our case ImportDeclaration in such a way:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/YTJ-QDW3Vu2ixF-kvDF797gSiohLSla7FOmZ6Eh6PHUcBv3U5Vf1_vCCKAUgZbvbGnFlqCKC5EJdhwIbuXGR6_sel4WB4gBWFTdSE4EzHKWdznYBtz5HnO0h5h2ZdpugQVdqKDDDSq9nrMotiJQlVi0\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This returns a filtered collection of node-paths containing just the nodes of type ImportDeclaration.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We see in AST Explorer that the import statement from \u2018react-library\u2019 has the form of:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/DmgVlEFdMGS7WRPLKpyWCS38VMjJmX6hdIEmaDqc2xIQkELbfpJ5cI42fxnmnSdIA38tvWgTAJkaOJ-2v6o5IuNwJ2b_IZwvJWgR5OXCa8rpXW_ev7J0M5Qp69gyj5_kILwJH2gnvr6sbJDsKGQIUio\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">So, re-defining our query to find more specific imports<br><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/TZJ3Fb0cTUd2I0bmo-5bc_08s8ONkaZ4goXGZlEEVKtdR5mJFJUTYInd1bafdU_6Maq_GNZLSHtsbowFpB2WiQqy2TsPtuGOYmgm1OoTSUCCBAgoYWcFBFcoinBuSZfD2LVfJGB4YN_wdRRW6oiqbT4\" style=\"\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have all the imports from package \u2018react-library\u2019 changing to \u2018@internal\/react-library\u2019, we will have to change for each node-paths source value as follows:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/7uKl-iD9E7BruAxKmzPGNvRRnyG8JXtg8zc0cfS3hX7Bv_aNqRX2hLtw_1mX8agVgC7aRKYJYJvGfIA8o3BIYO0fNz-WCbuVaUrl6JD2ycp0UEzFzJIpBEjU-dXwQiZ-qJpCvo9ZcJ5bHABFumHeiPg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, on npm run codemod, you will notice that all the javascript files we had imported from &#8216;react-library&#8217; must have changed to &#8216;@internal\/react-library&#8217;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_2_Refactoring_a_dependent_component\"><\/span><strong>Example 2:&nbsp; <\/strong>Refactoring a dependent component<strong>&nbsp;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/5b2lEG2kDkXfTrdCFOxoOqleR_oMzngjaBYiM12bn3mpQR9X7NZW4-JcqqHoZY9ck4AZnNyuEFkqIZDaBjFQ82rknlW958JMOcrVc8HEOMtLNXGOCvHq9nQ9--Rc99W9WRzmTEHY0vG673t3z7XrcKI\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s try importing a NewButton from \u2018new pkg\u2019 instead of ButtonX from \u2018oldpkg\u2019, also reflecting the same in SomeComponent and getting rid of the primary prop.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Again, let&#8217;s head to AST explorer.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/x5ABY7o3fenwoyv-iTAtx8rVIp7w2hJIBUMe78pILbHq_5el1cdjz1Yr4k3B1vCUuidbfoA_mlICwarJUndPEQGGWxezM5nJZyglW1CX7wQuOhyHBfPdW5S_TVgaRCfLTru07ii3iIeXD1GF_V0lJ6w\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Screenshot for Import AST<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/-XjMeySYQOkzThFPyyTi_PjioMeRl8np1wKz8FEiPSiwpqHI6jrbQWiJZ4jJnPVY_zpAwG2L52JVOyIexBA1MwWYlO-FYMoKSXFrCtihL3YTtfS_D0G2kTtchlAbce-AAwHlQ646yWOe6cgZRTFK5M8\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Screenshot for component AST<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Import is of the type ImportDeclaration, so we just filter the imports with a specific check for the source of import having the value \u2018oldpkg\u2019. ButtonX is of the type ImportSpecifier, using that, we change the node imported name from ButtonX to NewButton<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, ButtonX is a type of JSXElement where the opening and closing tags are of the type JSXOpeningElement and JSXClosingElement respectively, and the primary prop is a type of JSXIdentifier. So we just need to query for those types respectively and change the node-paths name.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/INUzmt-NoYuI9O1G8dHgUV7WRkcMC72KYoMlJbTfSQ-GH5RZFPS6k0cXRJoM3vnfSGZtG18ysW3zqUkSkvWCwVlLLNBGuKJ2x1uYf_TkiihEEY6_SCOCJFgNd4k65pQTvCZZ0o_vt3IA_0WLi5enlEI\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/TbuWyf1glPOaeQqVagbOkT0ZPotlu--hXKlqjVxuRcnsYX0hVlupNOxshdz8jMYjPRASilVg80b3PbWpVJj-X8j3Z4qG4ClrvrHUVHPdolIYcZ7s7qtjo95zd7eHagoNFR5qi83oZ1TIBsK351bpiRw\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">On running codemod, we would see the following output:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/M_TSZR5Vwalctk8dl7XuIlS1JCcVyTtiFSRGeNYomedJjcpHtkf0u2fmbL76UJ2r00avxdIbnrTi3GlxFvBUQ-FaqmmT7o3ZDmHFW4NI5HYP1zS363YTZxAJSkS8Q9GFehcpF8Gs3KNX78ESB-MnBts\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Codemod_at_Cashfree_Payments\"><\/span><strong>Codemod at Cashfree Payments<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At Cashfree Payments, codemod has helped us immensely during code refactoring and large-scale migrations. Also, whenever a component has breaking changes in our internal library, a codemod is recommended so that other developers can easily make the changes in other projects. This helps save time and reduce the likelihood of other developers making mistakes during the change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"In_Conclusion\"><\/span>In Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Codemods are superior to the find and replace function because, unlike codemods, find and replace allows for human error and requires us to manually search for each necessary change one after the other.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Codemods, on the other hand, are smart enough only to replace relevant parts of your source code, patching in changes while leaving the rest of the file intact. They also have the additional benefit of being maintainable over manual refactoring.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Writing codemods may feel a little time-consuming but with a little understanding of AST and practice, you will get further intrigued to write codemods.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.cashfree.com\/careers?utm_source=blog&amp;utm_medium=organic&amp;utm_campaign=refactoring-large-code-bases\/\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"770\" height=\"172\" data-attachment-id=\"13055\" data-permalink=\"https:\/\/blogrevamp.cashfree.com\/reporting-systems-to-ensure-enhanced-customer-satisfaction\/tech-blog\/\" data-orig-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?fit=1600%2C358&amp;ssl=1\" data-orig-size=\"1600,358\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Tech Jobs at Cashfree Payments\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?fit=770%2C172&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=770%2C172&#038;ssl=1\" alt=\"Jobs at Cashfree Payments\" class=\"wp-image-13055\" srcset=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=1024%2C229&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=300%2C67&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=768%2C172&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?resize=1536%2C344&amp;ssl=1 1536w, https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2022\/10\/Tech-Blog.png?w=1600&amp;ssl=1 1600w\" sizes=\"(max-width: 770px) 100vw, 770px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Codemods are widely used in front-end development with JavaScript to help with codebase maintenance. As the JavaScript language evolves, new features are added that can make existing code more efficient. To take advantage of these improvements, codemods can automate the process of updating large code bases. Why Codemod? Refactoring is an integral part of code<\/p>\n","protected":false},"author":72,"featured_media":15674,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_themeisle_gutenberg_block_has_review":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1497],"tags":[],"class_list":["post-15667","post","type-post","status-publish","format-standard","has-post-thumbnail","category-engineering"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Refactoring large code bases? Let\u2019s do it with Codemod!<\/title>\n<meta name=\"description\" content=\"Codemods are widely used in front-end development with JavaScript to help with codebase maintenance. As JavaScript language evolves, new features are added that can make existing code more efficient. To take advantage of these improvements, codemods can automate the process of updating large code bases.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Refactoring large code bases? Let\u2019s do it with Codemod!\" \/>\n<meta property=\"og:description\" content=\"Codemods are widely used in front-end development with JavaScript to help with codebase maintenance. As JavaScript language evolves, new features are added that can make existing code more efficient. To take advantage of these improvements, codemods can automate the process of updating large code bases.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/\" \/>\n<meta property=\"og:site_name\" content=\"Cashfree Payments Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-25T14:36:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T03:35:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/02\/Codemod_Thumbnail.png?fit=3402%2C2252&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"3402\" \/>\n\t<meta property=\"og:image:height\" content=\"2252\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vibhor Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vibhor Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Refactoring large code bases? Let\u2019s do it with Codemod!","description":"Codemods are widely used in front-end development with JavaScript to help with codebase maintenance. As JavaScript language evolves, new features are added that can make existing code more efficient. To take advantage of these improvements, codemods can automate the process of updating large code bases.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/","og_locale":"en_US","og_type":"article","og_title":"Refactoring large code bases? Let\u2019s do it with Codemod!","og_description":"Codemods are widely used in front-end development with JavaScript to help with codebase maintenance. As JavaScript language evolves, new features are added that can make existing code more efficient. To take advantage of these improvements, codemods can automate the process of updating large code bases.","og_url":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/","og_site_name":"Cashfree Payments Blog","article_published_time":"2023-02-25T14:36:00+00:00","article_modified_time":"2023-02-27T03:35:59+00:00","og_image":[{"width":3402,"height":2252,"url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/02\/Codemod_Thumbnail.png?fit=3402%2C2252&ssl=1","type":"image\/png"}],"author":"Vibhor Jain","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vibhor Jain","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#article","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/"},"author":{"name":"Vibhor Jain","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/6afacaa292edbceb4c42dc23ac0431cf"},"headline":"Refactoring Large Code bases? Let\u2019s Do It with Codemod!","datePublished":"2023-02-25T14:36:00+00:00","dateModified":"2023-02-27T03:35:59+00:00","mainEntityOfPage":{"@id":"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/"},"wordCount":1142,"commentCount":0,"image":{"@id":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/02\/Codemod_Thumbnail.png?fit=3402%2C2252&ssl=1","articleSection":["Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogrevamp.cashfree.com\/refactoring-large-code-bases-lets-do-it-with-codemod\/","url":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/","name":"Refactoring large code bases? Let\u2019s do it with Codemod!","isPartOf":{"@id":"https:\/\/blogrevamp.cashfree.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#primaryimage"},"image":{"@id":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/02\/Codemod_Thumbnail.png?fit=3402%2C2252&ssl=1","datePublished":"2023-02-25T14:36:00+00:00","dateModified":"2023-02-27T03:35:59+00:00","author":{"@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/6afacaa292edbceb4c42dc23ac0431cf"},"description":"Codemods are widely used in front-end development with JavaScript to help with codebase maintenance. As JavaScript language evolves, new features are added that can make existing code more efficient. To take advantage of these improvements, codemods can automate the process of updating large code bases.","breadcrumb":{"@id":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#primaryimage","url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/02\/Codemod_Thumbnail.png?fit=3402%2C2252&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/02\/Codemod_Thumbnail.png?fit=3402%2C2252&ssl=1","width":3402,"height":2252,"caption":"Refactoring large code bases"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cashfree.com\/blog\/refactoring-large-code-bases-lets-do-it-with-codemod\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogrevamp.cashfree.com\/"},{"@type":"ListItem","position":2,"name":"Engineering","item":"https:\/\/blogrevamp.cashfree.com\/category\/engineering\/"},{"@type":"ListItem","position":3,"name":"Refactoring Large Code bases? Let\u2019s Do It with Codemod!"}]},{"@type":"WebSite","@id":"https:\/\/blogrevamp.cashfree.com\/#website","url":"https:\/\/blogrevamp.cashfree.com\/","name":"Cashfree Payments Blog","description":"Cashfree Payments- Payment Gateway for India","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogrevamp.cashfree.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogrevamp.cashfree.com\/#\/schema\/person\/6afacaa292edbceb4c42dc23ac0431cf","name":"Vibhor Jain","url":"https:\/\/blogrevamp.cashfree.com\/author\/vibhor-jain\/"}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9MjXo-44H","jetpack_likes_enabled":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blogrevamp.cashfree.com\/wp-content\/uploads\/2023\/02\/Codemod_Thumbnail.png?fit=3402%2C2252&ssl=1","_links":{"self":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/15667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/comments?post=15667"}],"version-history":[{"count":13,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/15667\/revisions"}],"predecessor-version":[{"id":15692,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/posts\/15667\/revisions\/15692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media\/15674"}],"wp:attachment":[{"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/media?parent=15667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/categories?post=15667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogrevamp.cashfree.com\/wp-json\/wp\/v2\/tags?post=15667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}