Assess, plan, evolve.

This codemod transforms the `data` object returned from `useAsyncData`, `useFetch`, `useLazyAsyncData` and `useLazyFetch` into a `shallowRef` When new data is fetched, anything depending on `data` will still be reactive because the entire object is replaced. But if your code changes a property within that data structure, this will not trigger any reactivity in your app. This brings a significant performance improvement for deeply nested objects and arrays because Vue does not need to watch every single property/array for modification. In most cases, data should also be immutable. ## Before ```jsx const { data } = useFetch("/api/test"); ``` > This can apply to all useAsyncData, useFetch, useLazyAsyncData and useLazyFetch. ## After ```jsx const { data } = useFetch("/api/test", { deep: true }); ``` ### Additional Feature This codemod ensures that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, it should be changed to a key that uniquely matches that data. (`useFetch` should do this automatically for you.) ### Example Code before transformation: ```jsx const route = useRoute(); const { data } = await useAsyncData(async () => { return await $fetch(`/api/my-page/${route.params.slug}`); }); ``` Code after transformation: ```jsx const route = useRoute(); const { data } = await useAsyncData(route.params.slug, async () => { return await $fetch(`/api/my-page/${route.params.slug}`), { deep: true }; }); ```

• nuxt
• 4
• +1

# Feature Documentation: Updating `null` Comparisons to `undefined` ## Overview Default `data` and `error` values in `useAsyncData` and `useFetch` ### What Changed The `data` and `error` objects returned from `useAsyncData` and `useFetch` will now default to `undefined`. ## Before and After Examples ### Before ```javascript const { data, error } = useAsyncData( () => client.value.v1.lists.$select(list.value).fetch(), { default: () => shallowRef(), }, ); if (data.value === null) { // Handle case where data is null } let x = data.value === null ? "No Data" : error.value === null ? "Error" : "Data Available"; ``` ### After ```javascript const { data, error } = useAsyncData( () => client.value.v1.lists.$select(list.value).fetch(), { default: () => shallowRef(), }, ); if (data.value === undefined) { // Handle case where data is undefined } let x = data.value === undefined ? "No Data" : error.value === undefined ? "Error" : "Data Available"; ```

• nuxt
• 4
• +1

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. ### Change Summary In SvelteKit 1, errors were returned with just the error property. In SvelteKit 2, errors are now returned with both error and status properties, ensuring consistent error handling and making it easier to manage different HTTP statuses. This codemod ensures that all errors returned from the load function are compatible with SvelteKit 2’s enhanced error handling. ### Example ### Before ```ts // Before (SvelteKit 1) import { error } from '@sveltejs/kit'; export async function load({ params }) { try { const data = await fetchData(params.id); if (!data) { throw error(404, 'Data not found'); } return { props: { data } }; } catch (err) { // Errors might not always trigger handleError if (err.status === 404) { console.error("Page not found", err); } return { props: { error: err.message } }; } } ``` ### After ```ts // After (SvelteKit 2) import { error } from '@sveltejs/kit'; export async function load({ params }) { try { const data = await fetchData(params.id); if (!data) { throw error(404, 'Data not found'); } return { props: { data } }; } catch (err) { // With the improved error handling in SvelteKit 2, errors are now consistent // and trigger the handleError hook with status and message. return { props: { error: err.message, status: err.status || 500 } }; } } ```

• sveltekit
• typescript
• +6

## 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

# Data View Buffer Codemod ## Introduction This codemod replaces the usage of the `data-view-buffer` package with the built-in `DataView` API. It removes the import statement for the external dependency and transforms the corresponding instance property calls to directly utilize the native `DataView` feature, enhancing performance and reducing bundle size. ### Before ```javascript import DataViewBuffer from 'data-view-buffer'; const buffer = DataViewBuffer(data); ``` ### After ```javascript const buffer = new DataView(data).buffer; ```

• e18e
• module-replacement

# Data View Byte Offset Codemod ## Introduction This codemod replaces the usage of the `data-view-byte-offset` npm module with a direct utilization of the built-in `DataView` feature in JavaScript. It eliminates the unnecessary dependency, reduces bundle size, and leverages native functionality for improved performance. ### Before ```javascript import { byteOffset } from 'data-view-byte-offset'; const view = new DataView(buffer); const offset = byteOffset(view, index); ``` ### After ```javascript const view = new DataView(buffer); const offset = view.byteOffset(index); ```

• e18e
• module-replacement

# data-view-byte-length Codemod ## Introduction This codemod replaces instances of the `data-view-byte-length` package with the built-in `DataView.byteLength` property. The goal is to eliminate unnecessary dependencies, thereby reducing the bundle size and improving the performance of the codebase. ### Before ```javascript import byteLength from 'data-view-byte-length'; const buffer = new ArrayBuffer(8); const view = new DataView(buffer); const length = byteLength(view); ``` ### After ```javascript const buffer = new ArrayBuffer(8); const view = new DataView(buffer); const length = view.byteLength; ```

• e18e
• module-replacement

This codemod does tranformation based on changes in the utils in ethers.js ## Example Byte32 string helpers ### Before ```ts bytes32 = ethers.utils.formatBytes32String(text); text = ethers.utils.parseBytes32String(bytes32); ``` ### After ```ts bytes32 = ethers.encodeBytes32String(text); text = ethers.decodeBytes32String(bytes32); ``` Constants ### Before ```ts ethers.constants.AddressZero; ethers.constants.HashZero; ``` ### After ```ts ethers.ZeroAddress; ethers.ZeroHash; ``` Data Manipulation ### Before ```ts slice = ethers.utils.hexDataSlice(value, start, end); padded = ethers.utils.hexZeroPad(value, length); hex = hexlify(35); ``` ### After ```ts slice = ethers.dataSlice(value, start, end); padded = ethers.zeroPadValue(value, length); // v6; converting numbers to hexstrings hex = toBeHex(35); ``` Deafult AbiCoder ### Before ```ts // In v5, it is a property of AbiCoder coder = AbiCoder.defaultAbiCoder; ``` ### After ```ts // In v6, it is a static function on AbiCoder coder = AbiCoder.defaultAbiCoder(); ``` Hex Conversion ### Before ```ts hex = ethers.utils.hexValue(value); array = ethers.utils.arrayify(value); ``` ### After ```ts hex = ethers.toQuantity(value); array = ethers.getBytes(value); ``` Solidity non-standard packed ### Before ```ts ethers.utils.solidityPack(types, values); ethers.utils.solidityKeccak256(types, values); ethers.utils.soliditySha256(types, values); ``` ### After ```ts ethers.solidityPacked(types, values); ethers.solidityPackedKeccak256(types, values); ethers.solidityPackedSha256(types, values); ``` Property Manipulation ### Before ```ts ethers.utils.defineReadOnly(obj, "name", value); ``` ### After ```ts ethers.defineProperties(obj, { name: value }); ``` Above were some transformation, that were done in utilities section of ethers, now below are some cleanups and breaking changes. PS: These changes are not done using codemod. **Fetching content** Basic Fetch with Json ### Before ```ts data = await ethers.utils.fetchJson(url, json, processFunc); ``` ### After ```ts const req = new ethers.FetchRequest(url); req.body = json; req.processFunc = processFunc; const resp = await req.send(); data = resp.bodyJson; // or resp.bodyText / resp.body depending on the desired format ``` Fetch with Connection Overrides: ### Before ```ts req = { url: url, user: "username", password: "password", // etc. properties have FetchRequest equivalents }; data = await ethers.utils.fetchJson(req, json, processFunc); ``` ### After ```ts const req = new ethers.FetchRequest(url); req.setCredentials("username", "password"); req.body = json; req.processFunc = processFunc; const resp = await req.send(); data = resp.bodyJson; // or resp.bodyText / resp.body depending on the desired format ```

• ethers.js
• migration

This codemod converts json.loads to orjson.loads. ## Example ### Before ```python raw_data = json.loads(data) ``` ### After ```python raw_data = orjson.loads(data) ```

• python
• json
• +2

# is-array-buffer Codemod ## Introduction This codemod removes the dependency on the `is-array-buffer` package by replacing its usage with the built-in `instanceof` operator. This change reduces unnecessary dependencies, simplifying the codebase and potentially improving performance. ### Before ```javascript import isArrayBuffer from 'is-array-buffer'; const checkBuffer = (data) => { return isArrayBuffer(data); }; ``` ### After ```javascript const checkBuffer = (data) => { return (data instanceof ArrayBuffer); }; ```

• e18e
• module-replacement

Migrate from axios to fetch. Requires `--OPENAI_API_KEY=$OPENAI_API_KEY` to be set. ## Example ### Before ```ts const { data } = await axios.get(url, { responseType: "arraybuffer", }); ``` ### After ```ts const response = await fetch(url); if (!response.ok) throw new Error("Network response was not ok."); const data = await response.arrayBuffer(); ``` ### Before ```ts const { data } = await axios.post( `https://app.posthog.com/api/projects/${this.__projectId}/query/`, { query: { kind: "HogQLQuery", query: "select properties.codemodName, count(*) from events where event in ('codemod.CLI.codemodExecuted', 'codemod.VSCE.codemodExecuted') group by properties.codemodName", }, }, { headers: { Authorization: this.__authHeader, }, }, ); ``` ### After ```ts const response = await fetch( `https://app.posthog.com/api/projects/${this.__projectId}/query/`, { method: "POST", headers: { "Content-Type": "application/json", Authorization: this.__authHeader, }, body: JSON.stringify({ query: { kind: "HogQLQuery", query: "select properties.codemodName, count(*) from events where event in ('codemod.CLI.codemodExecuted', 'codemod.VSCE.codemodExecuted') group by properties.codemodName", }, }), }, ); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); ```

• axios
• fetch
• +1