Use case
Framework
Owner
Correct Ts Specifiers
This package transforms import specifiers in source-code from the broken state TypeScript's compiler (
tsc
) required (prior TypeScript v5.7 RC) into proper ones. This is useful when source-code is processed by standards-compliant software like Node.js. This is a one-and-done process, and the updated source-code should be committed to your version control (ex git); thereafter, source-code import statements should be authored compliant with the ECMAScript (JavaScript) standard.Sveltekit Vite Preprocess Migration
This codemod updates import paths and ensures compatibility with changes in library structures. In this example, it modifies the import statement for vitePreprocess to reflect updates in the library's API.
Sveltekit Import And Path Simplification
This codemod simplifies the import statements and path resolution in your SvelteKit project. It replaces the usage of
resolvePath
and concatenation withbase
by using theresolveRoute
function from$app/paths
. This results in cleaner and more readable code.Goto To Location Href
Codemod Description
This codemod is designed to replace specific patterns in TypeScript files with updated code logic. It transforms instances of
goto($A)
intowindow.location.href = $A;
when the$A
value is a URL starting withhttp://
orhttps://
. This refactor makes external navigation more explicit by usingwindow.location.href
.Dynamic To Static Env Transformer
This codemod transforms import {$A} from '$env/dynamic/public'; and import {$A} from '$env/dynamic/private'; into their static counterparts, replacing them with import {$A} from '$env/static/public'; and import {$A} from '$env/static/private';, respectively. It ensures compatibility for prerendered pages and static deployments.
Add Status To Error Handling
This codemod improves error handling in SvelteKit by updating the way errors are returned in the load function. In SvelteKit 1, errors were handled inconsistently, often missing the status property or failing to trigger the handleError hook. SvelteKit 2 standardizes error handling by automatically including the status and message properties in error responses.
Add Multipart Enctype To Forms With File Input
This codemod automatically adds the enctype="multipart/form-data" attribute to forms containing file input fields. It ensures that forms with file inputs properly handle file uploads during non-JS submissions, which is a requirement for SvelteKit v2.
Add Cookie Path To All Methods
This codemod adds
{ path: '/' }
to allcookies
method calls in your TypeScript project. It ensures that cookies are set, deleted, or serialized with the correct path specified, which helps in consistent cookie handling across different environments.Replace Throw With Error Call
This codemod simplifies error handling and redirects in your TypeScript project by replacing
throw error()
andthrow redirect()
statements with direct calls toerror()
andredirect()
. This change aligns with modern practices and results in cleaner, more readable code.React 17 Default Props To Params
Example
This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it.
React Router/5.1/Redirect To Navigate
This codemod updates deprecated
Redirect
components fromreact-router-dom
to the modernNavigate
API. It also updates the imports by replacingRedirect
withNavigate
.React Router/5.1/Component Render To Children
This codemod transforms
Route
components usingrender
andcomponent
props into JSX with nested children.ChakraUI/V3/Remove Theme Tools
Theme tools has been removed, so this codemod transforms it, to use CSS color mix.
ChakraUI/V3/Update Chakra Provider
- Updates the ChakraProvider import from @chakra-ui/react
- Renames the theme prop to value to match the new system-based theming approach
ChakraUI/V3/Refactor Custom Theme
- Replaces extendTheme with createSystem and defaultConfig.
- Updates your theme object to fit the new structure required by Chakra UI.
Webpack To Rspack/Remove Raw Loader To Type Asset Source
Rspack implements Webpack 5's Asset Modules, using asset modules to replace raw-loader to 'asset/source' for better performance.
Webpack To Rspack/Remove Url Loader To Type Asset Inline
Rspack implements Webpack 5's Asset Modules, using asset modules to replace url-loader to 'asset/inline' for better performance.
Webpack To Rspack/Remove File Loader To Type Asset Resource
Rspack implements Webpack 5's Asset Modules, using asset modules to replace file-loader to 'asset/resource' for better performance.
Webpack To Rspack/Migrate Update Babel Loader To Swc Loader
Using builtin:swc-loader offers better performance compared to the babel-loader and the external swc-loader, as it avoids frequent communication between JavaScript and Rust.
React Router/7/Migration Recipe
This codemods designed to facilitate the migration of your project from React Router to version 7. Each codemod targets specific changes and improvements introduced in React Router v7, ensuring a smoother transition.