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.
Theme tools has been removed, so this codemod transforms it, to use CSS color mix. ## Example ### Before ```ts defineStyle({ bg: transparentize('blue.200', 0.16)(theme), // -> rgba(0, 0, 255, 0.16) }); ``` ### After ```ts defineStyle({ bg: 'blue.200/16', // -> color-mix(in srgb, var(--chakra-colors-200), transparent 16%) }); ```
- Updates the ChakraProvider import from @chakra-ui/react - Renames the theme prop to value to match the new system-based theming approach ## Example ### Before ```ts import { ChakraProvider } from '@chakra-ui/react'; export const App = ({ Component }) => ( < ChakraProvider theme = { theme } > < Component / > < /ChakraProvider> ); ``` ### After ```ts import { Provider } from '@/components/ui/provider'; import { defaultSystem } from '@chakra-ui/react'; export const App = ({ Component }) => ( < Provider value = { defaultSystem } > < Component / > < /Provider> ); ```
- Replaces extendTheme with createSystem and defaultConfig. - Updates your theme object to fit the new structure required by Chakra UI. ## Example ### Before ```ts import { extendTheme } from '@chakra-ui/react'; export const theme = extendTheme({ fonts: { heading: `'Figtree', sans-serif`, body: `'Figtree', sans-serif`, }, }); ``` ### After ```ts import { createSystem, defaultConfig } from '@chakra-ui/react'; export const system = createSystem(defaultConfig, { theme: { tokens: { fonts: { heading: { value: `'Figtree', sans-serif` }, body: { value: `'Figtree', sans-serif` }, }, }, }, }); ```
This codemod helps in transforming react to meteor ## Example ### Before ```ts import { useTracker, useSubscribe } from 'meteor/react-meteor-data'; function Tasks() { const isLoading = useSubscribe('tasks'); const { username } = useTracker(() => Meteor.user()); const tasksByUser = useTracker(() => TasksCollection.find({ username }, { sort: { createdAt: -1 } }).fetch(), ); if (isLoading()) { return < Loading / > ; } } ``` ### After ```ts import { useTracker, useSubscribe } from 'meteor/react-meteor-data/suspense'; function Tasks() { useSubscribe('tasks'); const { username } = useTracker('user', () => Meteor.userAsync()); const tasksByUser = useTracker('tasksByUser', () => TasksCollection.find({ username }, { sort: { createdAt: -1 } }, ).fetchAsync(), ); } ```
This recipe is a set of codemods that will help migrate to jasmine v5 from jasmine 4.x . The recipe includes the following codemods: - jasmine/v5/handling-env-execute-callbacks - jasmine/v5/node-boot-removal
This codemod remove `node_boot.js` as it is no longer supported in jasmin 5.0 ## Example ### Before ```ts const boot = require("jasmine-core/node_boot.js"); ``` ### After ```ts const boot = require("jasmine-core").boot; ```
This codemod migrates `Env.execute` callbacks to await. ## Example ### Before ```ts try { env.execute(null, function () { console.log("Test suite finished."); }); } catch (e) { console.log("Failed to start the test suite."); } ``` ### After ```ts try { await env.execute(); } catch (e) { console.log("Failed to start the test suite."); } ```
This codemod deprecates `systemPreferences.accessibilityDisplayShouldReduceTransparency` property, which is now deprecated in favor of the new `nativeTheme.prefersReducedTransparency`, which provides identical information and works cross-platform. ## Example ### Before ```ts const reduceTransparency = systemPreferences.accessibilityDisplayShouldReduceTransparency; ``` ### After ```ts const reduceTransparency = nativeTheme.prefersReducedTransparency; ```
This recipe is a set of codemods that will help migrate to three r168 from three r167 . The recipe includes the following codemods: - three/r168/uniforms-to-uniformarray - three/r168/logluvloader-to-ultraHDRLoader - three/r168/pointerlockcontrols-object-to-controls-object - three/r168/dragcontrols-getraycaster-to-controls-raycaster - three/r168/dragcontrols.deactivate-to-disconnect - three/r168/dragcontrols.activate-to-connect - three/r168/viewportBottomLeft-to-viewportUV.flipY() - three/r168/viewportTopLeft-to-viewportUV
This codemod renames uniforms() function, to uniformsArray() ## Example ### Before ```ts this.emit("update", this.uniforms()); ``` ### After ```ts this.emit("update", this.uniformsArray()); ```
This recipe is a set of codemods that will help migrate to meteor v3 from meteor 2.x . The recipe includes the following codemods: - meteor/v3/add-await-to-async-webapp-methods - meteor/v3/update-react - meteor/v3/api-rename-express-migration - meteor/v3/call-async - meteor/v3/user-async - meteor/v3/fibers-to-async-promises - meteor/v3/removed-functions - meteor/v3/renamed-functions - meteor/v3/mongo-db-async-methods
This codemod removes `LogLuvLoader`, and replaces it with `UltraHDRLoader` ## Example ### Before ```ts import { LogLuvLoade } from "three/examples/jsm/loaders/LogLuvLoader.js"; ``` ### After ```ts import { UltraHDRLoader } from "three/examples/jsm/loaders/UltraHDRLoader.js"; ``` ### Before ```ts export * from "./loaders/UltraHDRLoader.js"; ``` ### After ```ts export * from "./loadersLogLuvLoader.js"; ``` ### Before ```ts case 'logluv': return new LogLuvLoader(this.loadingManager); ``` ### After ```ts case 'logluv': return new UltraHDRLoader(this.loadingManager); ```
Build your own codemod and share it with the community.