New
Codemod Registry
Explore community-led codemods to migrate, optimize, and transform your codebase.
+600 codemods published
Ready to contribute?
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
Build your own codemod and share it with the community.
Explore community-led codemods to migrate, optimize, and transform your codebase.
Modification of the InterpolationOptions type. In version 23.0.0, the ns property within InterpolationOptions is now constrained to be of type Namespace instead of being a string or a readonly string[]. This change requires you to adjust your code accordingly. ### Before ```ts const options = { interpolation: { escapeValue: false, }, }; //remove the options object property and keep all other relevant properties i18n.init({ options, }); ``` ### After ```ts i18n.init({}); ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts const options = { interpolation: { escapeValue: false, }, }; //preserve all the other pairs i18n.init({ lng: 'en', backend: { loadPath: '/locales/{{lng}}/{{ns}}.json', }, normalize: (type, value) => { switch (type) { case 'translation': return value.toUpperCase(); // Custom normalization for translations default: return value; } }, options, }); ``` ### After ```ts i18n.init({ lng: 'en', backend: { loadPath: '/locales/{{lng}}/{{ns}}.json', }, normalize: (type, value) => { switch (type) { case 'translation': return value.toUpperCase(); // Custom normalization for translations default: return value; } }, }); ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts i18n.init({ fallbackLng: 'en', lng: 'en', defaultNS: 'uwave', interpolation: { escapeValue: false, }, }); //remove interpolation key-object pair ``` ### After ```ts i18n.init({ fallbackLng: 'en', lng: 'en', defaultNS: 'uwave', }); ```
A codemod which makes the array search operation more optimal and efficient, by converting the array into a set and executing the set's has method to find the desired element. ### Before ```ts //intialize a set using the elements of that array //check in the set instead of the array and use the has method instead of the includes method const isElmement = array.includes(elementToCheck); ``` ### After ```ts const set = new Set(array); const isElmement = set.has(elementToCheck); ```
Change import and usage of from TerserPlugin to use included rspack.SwcJsMinimizerRspackPlugin. ### Before ```ts //chnage the import statement to const rspack = require('@rspack/core'); //track the variable assigned const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { //change to rspack.SwcJsMinimizerRspackPlugin(options) minimizer: [new TerserPlugin(options)], }, }; ``` ### After ```ts const rspack = require('@rspack/core'); module.exports = { // ... optimization: { minimizer: [new rspack.SwcJsMinimizerRspackPlugin(options)], }, }; ```
Change import and usage of from html-webpack-tags-plugin to use includedhtml-rspack-tags-plugin. ### Before ```ts //change to const HtmlRspackTagsPlugin = require('html-rspack-tags-plugin'); const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin'); //change to const rspack = require('@rspack/core'); const HtmlWebpackPlugin = require('html-webpack-plugin'); //track the variables assigned in the import statements module.exports = { plugins: [ //change to new rspack.HtmlRspackPlugin(), new HtmlWebpackPlugin(), //chnage to HtmlRspackTagsPlugin new HtmlWebpackTagsPlugin({ tags: ['a.js', 'b.css'], append: true }), ], }; ``` ### After ```ts const HtmlRspackTagsPlugin = require('html-rspack-tags-plugin'); const rspack = require('@rspack/core'); module.exports = { plugins: [ new rspack.HtmlRspackPlugin(), new HtmlRspackTagsPlugin({ tags: ['a.js', 'b.css'], append: true }), ], }; ```
Change import from webpack-manifest-plugin torspack-manifest-plugin. ### Before ```ts //change the import from webpack-manifest-plugin to rspack-manifest-plugin const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); module.exports = { plugins: [new WebpackManifestPlugin(options)], }; ``` ### After ```ts const { RspackManifestPlugin } = require('rspack-manifest-plugin'); module.exports = { plugins: [new RspackManifestPlugin(options)], }; ```
Change import from workbox-webpack-plugin to @aaroon/workbox-rspack-plugin. ### Before ```ts // change the import package from workbox-webpack-plugin to @aaroon/workbox-rspack-plugin const WorkboxPlugin = require('workbox-webpack-plugin'); ``` ### After ```ts const WorkboxPlugin = require(' @aaroon/workbox-rspack-plugin'); ```
Change import from webpack-virtual-modules to rspack-plugin-virtual-module. ### Before ```ts // change import module from webpack-virtual-modules to rspack-plugin-virtual-module //track the variable which is being assigning to the modules var VirtualModulesPlugin = require('webpack-virtual-modules'); module.exports = { // ... plugins: [ //change to respective assigned variable new VirtualModulesPlugin({ // ... }), ], }; ``` ### After ```ts var RspackVirtualModulePlugin = require('rspack-plugin-virtual-module'); module.exports = { // ... plugins: [ new RspackVirtualModulePlugin({ // ... }), ], }; ```
Change import and usage of from css-minimizer-webpack-plugin to use included rspack.LightningCssMinimizerRspackPlugin. ### Before ```ts //change the import statement to const rspack = require('@rspack/core'); //track where this CssMinimizerPlugin variable is used const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); module.exports = { optimization: { //change CssMinimizerPlugin to rspack.LightningCssMinimizerRspackPlugin minimizer: [new CssMinimizerPlugin()], }, }; ``` ### After ```ts const rspack = require('@rspack/core'); module.exports = { // ... optimization: { minimizer: [new rspack.LightningCssMinimizerRspackPlugin(options)], }, }; ```
Change import from eslint-webpack-plugin to eslint-rspack-plugin. ### Before ```ts //change the import package from eslint-webpack-plugin to eslint-rspack-plugin const ESLintPlugin = require('eslint-webpack-plugin'); module.exports = { // ... plugins: [new ESLintPlugin(options)], // ... }; ``` ### After ```ts const ESLintPlugin = require('eslint-rspack-plugin'); module.exports = { // ... plugins: [new ESLintPlugin(options)], // ... }; ```
Handles the migration of the CssExtractWebpackPlugin webpack plug-in into an included plugin in rspack. ### Before ```ts // Step 1: Replace the import of 'mini-css-extract-plugin' with '@rspack/core' const CssExtractWebpackPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ // Step 2: Replace 'new CssExtractWebpackPlugin' with 'new rspack.CssExtractRspackPlugin' new CssExtractWebpackPlugin({ // ... }), ], module: { rules: [{ test: /\.css$/i, // Step 3: Replace 'CssExtractWebpackPlugin.loader' with 'rspack.CssExtractRspackPlugin.loader' use: [CssExtractWebpackPlugin.loader, 'css-loader'], // Step 4: Add 'type: "javascript/auto"' to the rule object }, ], }, }; ``` ### After ```ts const rspack = require('@rspack/core'); module.exports = { plugins: [ new rspack.CssExtractRspackPlugin({ // ... }), ], module: { rules: [{ test: /\.css$/i, use: [rspack.CssExtractRspackPlugin.loader, 'css-loader'], type: 'javascript/auto', }, ], }, }; ```
- Rspack has implemented most of webpack's built-in plugins, with the same names and configuration parameters, allowing for easy replacement. - Replace the the include package from webpack to rspack one. - Replaces the webpack object in the plugins array to rspack object. - Handles only for supported and partially supported built-in plugins. (as of 11th Oct 2024) ### Before ```ts //replace the the include package from webpack to rspack one // and the webpack object in the plugins array to rspack object const webpack = require('webpack'); module.exports = { //... plugins: [ new webpack.DefinePlugin(), // ... ], }; ``` ### After ```ts const rspack = require('@rspack/core'); module.exports = { //... plugins: [ new rspack.DefinePlugin({ // ... }), ], }; ```
Handles the migration of the CopyWebpackPlugin web pack plug into an included plugin in rspack. ### Before ```ts //chnage the import statement from copy-webpack-plugin to rspack one and track the variable with which it has been intialized // change the CopyWebpackPlugin to a nested expression of the rspack object const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { //... plugins: [ new CopyWebpackPlugin({ // ... }), ], }; ``` ### After ```ts const rspack = require('@rspack/core'); module.exports = { //... plugins: [ new rspack.CopyRspackPlugin({ // ... }), ], }; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts //handle for es6 module import import CopyPlugin from 'copy-webpack-plugin'; module.exports = { //... plugins: [ new CopyPlugin({ // ... }), ], }; ``` ### After ```ts import rspack from '@rspack/core'; module.exports = { //... plugins: [ new rspack.CopyRspackPlugin({ // ... }), ], }; ```
Build your own codemod and share it with the community.