Assess, plan, evolve.
Reusable compiler-aware skills that help coding agents understand, plan, and safely evolve your codebase.
44 packages
## Example This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // convert vue2 script component into vue 3 setup export default { data: () => ({ message: 'Hello' }), }; ``` ### After ```ts const message = ref('Hello'); export default {}; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // convert vue2 script component into vue 3 setup export default { data: () => ({ isActive: true }), }; ``` ### After ```ts const isActive = ref(true); export default {}; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // convert vue2 script component into vue 3 setup export default { data: () => ({ items: [1, 2, 3] }), }; ``` ### After ```ts const items = ref([1, 2, 3]); export default {}; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // convert vue2 script component into vue 3 setup export default { data: () => ({ count: 0, message: 'Hello', isActive: true, items: [1, 2, 3], }), }; ``` ### After ```ts const items = ref([1, 2, 3]); const isActive = ref(true); const message = ref('Hello'); const count = ref(0); export default {}; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // convert vue2 script component into vue 3 setup export default { methods: { displayCoucou: function() { // the content isn't relevant console.log('coucou'); }, }, }; ``` ### After ```ts export default { methods: { displayCoucou: function() { // the content isn't relevant console.log('coucou'); }, }, }; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // convert vue2 script component into vue 3 setup export default { methods: { fetchApi: async function() { const request = await fetch('/request/info'); }, }, }; ``` ### After ```ts // convert vue2 script component into vue 3 setup export default { methods: { fetchApi: async function() { const request = await fetch('/request/info'); }, }, }; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts export default { data: () => ({ count: 0 }), methods: { increment: function() { this.count += 1; }, }, }; ``` ### After ```ts const count = ref(0); export default { methods: { increment: function() { this.count += 1; }, }, }; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts export default { data: () => ({ count: 0 }), methods: { increment: async function() { this.count = await (await fetch('/request')).json(); }, }, }; ``` ### After ```ts import { ref } from 'vue'; const count = ref(0); export default { data: () => ({ count: 0 }), methods: { increment: async function() { this.count = await (await fetch('/request')).json(); }, }, }; ```
- vue
- 3
- +1
Helps migrate Zod 3 to Zod 4.
- transformation
- migration
# Array.prototype.copyWithin Codemod ## Introduction This codemod replaces the usage of the `Array.prototype.copyWithin` method with the `copyWithin` method without the need for the `Array` prototype. It aims to streamline the code by ensuring that the native method is used directly, which can enhance performance and reduce unnecessary abstraction. ### Before ```javascript const array = [1, 2, 3, 4, 5]; array.copyWithin(0, 3); // This is using the prototype method ``` ### After ```javascript const array = [1, 2, 3, 4, 5]; array.copyWithin(0, 3); // This is using the native method, directly through the array ```
- e18e
- module-replacement
# Array Prototype Find Last Index Codemod ## Introduction This codemod transforms the usage of the `Array.prototype.findLastIndex` method to its more efficient counterpart, ensuring consistent coding practices and potentially reducing bundle size by leveraging built-in ES features instead of polyfills or outdated methods. ### Before ```javascript const array = [1, 2, 3, 4, 5]; const lastIndex = array.findLastIndex(element => element === 3); ``` ### After ```javascript const array = [1, 2, 3, 4, 5]; const lastIndex = array.findLastIndex(element => element === 3); ```
- e18e
- module-replacement
# Array.prototype.lastIndexOf Codemod ## Introduction This codemod replaces the usage of `Array.prototype.lastindexof` with the standard `lastIndexOf` method on the Array prototype. The goal is to eliminate non-standard method names, ensuring compatibility with native JavaScript features while improving code readability and maintainability. ### Before ```javascript const arr = [1, 2, 3, 4, 5]; const index = arr.lastindexof(3); ``` ### After ```javascript const arr = [1, 2, 3, 4, 5]; const index = arr.lastIndexOf(3); ```
- e18e
- module-replacement
This codemod removes deprecated boolean values for the dedupe option in refresh calls, replacing them with string literals cancel and defer š¦ **Impact Level**: Minimal ## What Changed Previously, it was possible to pass `dedupe: boolean` to `refresh`. These were aliases of `cancel` (true) and `defer` (false). ## Before ```jsx const { refresh } = await useAsyncData(async () => ({ message: "Hello, Nuxt 3!", })); async function refreshData() { await refresh({ dedupe: true }); await refresh({ dedupe: false }); } ``` ## After ```jsx const { refresh } = await useAsyncData(async () => ({ message: "Hello, Nuxt 3!", })); async function refreshData() { await refresh({ dedupe: "cancel" }); await refresh({ dedupe: "defer" }); } ```
- nuxt
- 4
- +1
Updates the file structure of a Nuxt.js project when migrating from v3 to v4. This codemod will migrate to the new file structure introduced in Nuxt.js v4. The new file structure is more modular and allows for better organization of the project. If you have any customizations related to the file structure, like `srcDir`, `serverDir`, `appDir`, `dir` - you will need to revert them back to the default values. This codemod will: 1. Move `assets`, `components`, `composables`, `layouts`, `middleware`, `pages`, `plugins`, `utils` directories to the `app` directory. 2. Move `app.vue`, `error.vue`, `app.config.ts` to the `app` directory. 3. Update relative imports in the project.
- nuxt
- 4
- +1
In Vue 3.x, h is now globally imported instead of being automatically passed as an argument. This codemod migrates the render function API to be compatible with Vue 3.x. ## Before ```ts export default { render(h) { return h("div"); }, }; ``` ## After ```ts import { h } from "vue"; export default { render() { return h("div"); }, }; ```
- vue
This codemod automates the migration of your Meteor project to version 3, updating function calls and modernizing your codebase to their renamed functions. You can find the implementation of this codemod in the studio [here](https://go.codemod.com/8OZx88x) ## Table of Contents - [Overview](#overview) - [Usage](#usage) - [Examples](#examples) ## Overview This codemod performs the following transformations: - Converts synchronous function calls to their asynchronous counterparts. - Renames functions according to new API changes in Meteor v3. ## Examples ### Example 1: Synchronous to Asynchronous Function Conversion This codemod turns synchronous function calls into their asynchronous equivalents. #### Before ```ts function someFunction(userId, newPassword) { Accounts.setPassword(userId, newPassword); } ``` #### After ```ts async function someFunction(userId, newPassword) { await Accounts.setPasswordAsync(userId, newPassword); } ``` ### Example 2: Asset Retrieval Update This codemod updates asset retrieval functions to use their asynchronous versions. #### Before ```ts function someFunction() { const text = Assets.getText("some-file.txt"); return text; } ``` #### After ```ts async function someFunction() { const text = await Assets.getTextAsync("some-file.txt"); return text; } ``` ### Example 3: Binary Asset Retrieval Update #### Before ```ts function someFunction() { const binary = Assets.getBinary("some-file.txt"); return binary; } ``` #### After ```ts async function someFunction() { const binary = await Assets.getBinaryAsync("some-file.txt"); return binary; } ``` ### Example 4: Email Addition Update This codemod updates the `Accounts.addEmail` function to its asynchronous version. #### Before ```ts Accounts.addEmail( "userId", "newEmail", false, // this param is optional ); ``` #### After ```ts await Accounts.addEmailAsync( "userId", "newEmail", false, // this param is optional ); ```
- meteor
- v3
- +1
This codemod replaces feature flags with a static value provided by the user. Codemod replaces `useFlag` hook calls. The codemod accepts the following arguments: - `key`: The key of the feature flag to be replaced. - `value`: The value to replace the feature flag with. - `type`: The type to which the provided value should be cast. ## Example ### Before ```ts const theValue = useFlag("the-gate").value; if (theValue) { // Simple Case is true console.log("theValue is truthy"); } if (theValue === 3) { console.log("value var === 3"); } const x = theValue ? 1 : 0; ``` ### After ```ts // Simple Case is true console.log("theValue is truthy"); const x = 1; ```
- netlify
- feature-flag
# Array.prototype.with Codemod ## Introduction This codemod replaces instances of `array.prototype.with` with the native JavaScript `with` method. This transformation helps to streamline array operations by utilizing built-in functionalities, reducing the need for external libraries, and ultimately improving the codebase's performance and reduce its bundle size. ### Before ```javascript const myArray = [1, 2, 3]; const newArray = myArray.with(1, 4); // Using array.prototype.with ``` ### After ```javascript const myArray = [1, 2, 3]; const newArray = myArray.with(1, 4); // This is now a native method ```
- e18e
- module-replacement
# Array.prototype.splice Codemod ## Introduction This codemod replaces usages of the `array.prototype.splice` package with native JavaScript's built-in `Array.prototype.splice` method. By eliminating the dependency on the external package, it reduces bundle size and enhances performance. ### Before ```javascript import splice from 'array.prototype.splice'; const myArray = [1, 2, 3]; splice(myArray, 1, 1, 4); // Removes 2 and adds 4 ``` ### After ```javascript const myArray = [1, 2, 3]; myArray.splice(1, 1, 4); // Removes 2 and adds 4 ```
- e18e
- module-replacement
Ready to evolve your codebase?
Build tailored, compiler-aware skills to assess, plan, and automate complex codebase changes.