The issue arises when attempting to authenticate the Codemod extension in Cursor. After successful authentication on the web, the website attempts to redirect using the vscode:// URL scheme. However, the Cursor application does not recognize this URL scheme. A workaround has been found where manually changing the URL scheme to cursor:// allows the redirect to work as expected.

Steps to Replicate

1. Open the Cursor application.
2. Install the Codemod extension within the Cursor application.
3. Click on the 'Sign In' button within the Codemod extension.
4. Authenticate with the required credentials on the web.
5. After successful authentication, the website attempts to redirect using the vscode:// URL scheme.

At this point, the Cursor application fails to recognize the vscode:// URL scheme and thus Codemod cannot sign in.

on behalf of eps1lon:

"ComponentSpec and Mixin are now in create-react-class. It might be easiest to fork the deprecated-prop-types-types but with create-react-class instead of prop-types as the target package.

Needs real world codebase with usage to test on."

Note: The example section helps codemod contributors identify all the transformation patterns that this codemod should handle. Repeat before/after snippets for every transformation example you can find.

Code before transformation

//insert your code before transformation here

Code after transformation

//insert the expected **correct** output here

Applicability Criteria

Which types-react versions include the deprecated pattern?

Additional context or links

Add any other context about the problem here. This might include extra considerations, edge cases, relevant business logic, existing migration guides, relevant links, etc.

Codemod description

Build a set of codemods for the breaking changed of the new release
you can use one of the following engines:
jscodeshift, ast-grep, ts-morph, filemod (for file transformation)

Applicability Criteria

• Framework/library: react-native
• From: : v0.73.7
• To: v0.74.0

see https://reactnative.dev/blog/2024/04/22/release-0.74#breaking-changes-1
for before after examples.

Shallow Data Reactivity in useAsyncData and useFetch

Codemod description

The data object returned from useAsyncData, useFetch, useLazyAsyncData and useLazyFetch is now a shallowRef rather than a ref.
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.

Examples

Code before transformation

const { data } = useFetch('/api/test')

This can apply to all useAsyncData, useFetch, useLazyAsyncData and useLazyFetch

Code after transformation

const { data } = useFetch('/api/test', { deep: true })

Applicability Criteria

Write the applicable framework/library for this codemod.
Migrate from Nuxt 3->Nuxt 4

⚠️⚠️ Please do not include any proprietary code in the issue. ⚠️⚠️

Codemod name

Give an understandable name for the codemod.

Codemod description

Write a short description of the changes that should be made by this codemod.

Examples

Note: The example section helps codemod champions identify all the transformation patterns that this codemod should handle. Repeat before/after snippets for every transformation example you can find.

Code before transformation

//insert your code before transformation here

Code after transformation

//insert the expected **correct** output here

Applicability Criteria

Write the applicable framework/library for this codemod.
A codemod can:

• Migrate from one version to another [ex: React 18 -> React 19]
• Migrate from one framework to another [ex: ESLint -> Biome]
• Clean up or refactor code of the same framework/library version [ex: React 18 -> React 18]

Additional context or links

Add any other context about the problem here. This might include extra considerations, edge cases, relevant business logic, existing migration guides, relevant links, etc.

on behalf of eps1lon:

" ReactHMTL and ReactSVG were related to createFactories but we found usage using it as a list of possible built-in browser element types.

We now have HTMLElementType and SVGElementType which can be used instead of keyof ReactHTML and keyof ReactSVG respectively.

Needs real world codebase with usage to test on."

Note: The example section helps codemod contributors identify all the transformation patterns that this codemod should handle. Repeat before/after snippets for every transformation example you can find.

Code before transformation

//insert your code before transformation here

Code after transformation

//insert the expected **correct** output here

Applicability Criteria

Which types-react versions include the deprecated pattern?

Additional context or links

Add any other context about the problem here. This might include extra considerations, edge cases, relevant business logic, existing migration guides, relevant links, etc.

Replacing template utilities

Codemod description

Nuxt used lodash/template to compile templates located on the file system using the .ejs file format/syntax.
In addition, we provided some template utilities (serialize, importName, importSources) which could be used for code-generation within these templates, which are now being removed.

Also, providing code serialization functions directly within Nuxt is not ideal. Instead, we maintain projects like unjs/knitwork which can be dependencies of your project, and where security issues can be reported/resolved directly without requiring an upgrade of Nuxt itself

Examples

Note: The example section helps codemod champions identify all the transformation patterns that this codemod should handle. Repeat before/after snippets for every transformation example you can find.

Code before transformation

//insert your code before transformation here

Code after transformation

import { genDynamicImport, genImport, genSafeVariableName } from 'knitwork'

const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1'))

const importSources = (sources: string | string[], { lazy = false } = {}) => {
  return toArray(sources).map((src) => {
    if (lazy) {
      return `const ${genSafeVariableName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
    }
    return genImport(src, genSafeVariableName(src))
  }).join('\n')
}

const importName = genSafeVariableName

Applicability Criteria

Migrating from Nuxt 3 -> Nuxt 4

on behalf of eps1lon:

"It's very often just misused. Most of the time might be best to typeof React.Children.
Needs real world codebase with usage to test on."

Note: The example section helps codemod contributors identify all the transformation patterns that this codemod should handle. Repeat before/after snippets for every transformation example you can find.

Code before transformation

//insert your code before transformation here

Code after transformation

//insert the expected **correct** output here

Applicability Criteria

Which types-react versions include the deprecated ReactChildren?

Additional context or links

Add any other context about the problem here. This might include extra considerations, edge cases, relevant business logic, existing migration guides, relevant links, etc.

Migrate Render Function API

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.

Examples

Code before transformation

export default {
  render(h) {
    return h('div')
  }
}

Code after transformation

import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}

Applicability Criteria

Write the applicable framework/library for this codemod.
Vue 2.x -> 3.x

Additional context or links

• Vue 3 breaking changes
• Vue 3 Render Function API

Node.js 22 upgrade codemods

Codemod description

Codemods to help automate the Node.js 22 upgrade process according to the release notes here.

Applicability Criteria

Node.js < 22.0.0 -> Node.js >= 22.0.0

Additional context or links

• Release notes blog
• Annoucement

I just copy-pasted the components, but I believe their content is irrelevant. The problem is that the codemod doesn't respect passed options.

Faulty codemod

react-prop-types-typescript doesn't respect the preserver-prop-types (in both VS Code and CLI).

Code before transformation

import { styled } from '@mui/material/styles'
import PropTypes from 'prop-types'

const Root = styled('button', {
  name: 'SegmentedTab',
  shouldForwardProp: (property) => property !== 'isSelected',
  // @ts-expect-error TS(2339): Property 'isSelected' does not exist on type 'MUIS... Remove this comment to see the full error message
})(({ isSelected, theme }) => ({
  '&:hover': {
    // @ts-expect-error TS(2339): Property 'neutral' does not exist on type 'Palette... Remove this comment to see the full error message
    background: theme.palette.neutral[200],
  },
  alignItems: 'center',
  background: 'transparent',
  border: 'none',
  borderRadius: 999,
  color: theme.palette.text.primary,
  cursor: 'pointer',
  display: 'flex',
  flex: 1,
  fontFamily: theme.typography.fontFamily,
  fontSize: 'inherit',
  fontWeight: 'inherit',
  justifyContent: 'center',
  padding: 0,
  textDecoration: 'none',
  ...(isSelected && {
    '&, &:hover': {
      background: 'white',
    },
  }),
}))

export default function SegmentedTab({
  component = 'button',
  isSelected,
  ...other
}: any) {
  const Component = Root.withComponent(component)

  return <Component isSelected={isSelected} {...other} />
}

SegmentedTab.propTypes = {
  /** React component or HTML element name that is used to render tabs. */
  component: PropTypes.elementType,
  /** Marks the tab as a selected. */
  isSelected: PropTypes.bool.isRequired,
}

Expected code after transformation

import { styled } from '@mui/material/styles'

const Root = styled('button', {
  name: 'SegmentedTab',
  shouldForwardProp: (property) => property !== 'isSelected',
  // @ts-expect-error TS(2339): Property 'isSelected' does not exist on type 'MUIS... Remove this comment to see the full error message
})(({ isSelected, theme }) => ({
  '&:hover': {
    // @ts-expect-error TS(2339): Property 'neutral' does not exist on type 'Palette... Remove this comment to see the full error message
    background: theme.palette.neutral[200],
  },
  alignItems: 'center',
  background: 'transparent',
  border: 'none',
  borderRadius: 999,
  color: theme.palette.text.primary,
  cursor: 'pointer',
  display: 'flex',
  flex: 1,
  fontFamily: theme.typography.fontFamily,
  fontSize: 'inherit',
  fontWeight: 'inherit',
  justifyContent: 'center',
  padding: 0,
  textDecoration: 'none',
  ...(isSelected && {
    '&, &:hover': {
      background: 'white',
    },
  }),
}))

interface SegmentedTabProps {
  /** React component or HTML element name that is used to render tabs. */
  component?: React.ElementType;
  /** Marks the tab as a selected. */
  isSelected: boolean;
}

export default function SegmentedTab({
  component = 'button',
  isSelected,
  ...other
}: SegmentedTabProps) {
  const Component = Root.withComponent(component)

  return <Component isSelected={isSelected} {...other} />
}

SegmentedTab.propTypes = {
  /** React component or HTML element name that is used to render tabs. */
  component: PropTypes.elementType,
  /** Marks the tab as a selected. */
  isSelected: PropTypes.bool.isRequired,
}

Actual code after transformation

import { styled } from '@mui/material/styles'

const Root = styled('button', {
  name: 'SegmentedTab',
  shouldForwardProp: (property) => property !== 'isSelected',
  // @ts-expect-error TS(2339): Property 'isSelected' does not exist on type 'MUIS... Remove this comment to see the full error message
})(({ isSelected, theme }) => ({
  '&:hover': {
    // @ts-expect-error TS(2339): Property 'neutral' does not exist on type 'Palette... Remove this comment to see the full error message
    background: theme.palette.neutral[200],
  },
  alignItems: 'center',
  background: 'transparent',
  border: 'none',
  borderRadius: 999,
  color: theme.palette.text.primary,
  cursor: 'pointer',
  display: 'flex',
  flex: 1,
  fontFamily: theme.typography.fontFamily,
  fontSize: 'inherit',
  fontWeight: 'inherit',
  justifyContent: 'center',
  padding: 0,
  textDecoration: 'none',
  ...(isSelected && {
    '&, &:hover': {
      background: 'white',
    },
  }),
}))

interface SegmentedTabProps {
  /** React component or HTML element name that is used to render tabs. */
  component?: React.ElementType;
  /** Marks the tab as a selected. */
  isSelected: boolean;
}

export default function SegmentedTab({
  component = 'button',
  isSelected,
  ...other
}: SegmentedTabProps) {
  const Component = Root.withComponent(component)

  return <Component isSelected={isSelected} {...other} />
}

Estimated severity

It's quite a sever issue to us. We have hundreds of components we want to add types to, preserving prop types. Doing it manually is not an option.

Looks like a trivial issue to fix. The codemod doesn't pick up the preserver-prop-types option, neither from VS Code nor from the console. Feels like a typo to me, but I couldn't find a way to debug it myself.

Environment:

• Codemod CLI version: v0.10.14
• OS: macOS 14.4.1
• Node.js version: v18.19.1

Add Tinloof's devs to repo contributors after merging the previous repo to this monorepo.

Removal of Sentry.configureScope

In Sentry JavaScript SDK 7.x to 8.x, this codemod removes top level Sentry.configureScope function. Instead, uses the Sentry.getCurrentScope() to access and mutate the current scope.

Examples

Code before transformation

Sentry.configureScope((scope) => {
  scope.setTag("key", "value");
});

Code after transformation

Sentry.getCurrentScope().setTag("key", "value");

Applicability Criteria

Sentry JavaScript SDK 7.x -> 8.x

Additional context or links

Sentry v7 to v8: Removal of Sentry.configureScope method

This is to migrate our monorepo's linting and formatting from ESLint & Prettier to Biome.js.

Why:

1. Two in One: Biome comes with 190 lint rules from ESlint, TypeScript ESlint, and other sources with 97% compatibility with Prettier. Biome can be used as a replacement for two.
2. Biome adds new CLI options that enables to format and lint only files that changed (using Git)
3. its rust-based and 10x+ faster than eslint!!!

Biome Impact:

based on local run of biome on our monorepo, it runs the checks 10x faster (from 15.6 seconds down to just 1.6 seconds)

migration plan:

1. Run eslint/biome/migrate-rules codemod and make minor tweaks. (156 files changed
2. run biome to apply the required formatting (609 files changed)
3. fixed the linting issues manually for each part of the platform (cli, vsce, studio, etc.)
4. by now all lintings should work fine, so we enable the linting check for github action.

Codemod Impact:

If we were to manually migrate the Codemod Monorepo alone, we would have to:

• adjust 134 existing package.json files:
  • replace ESLint scripts (1 minute per file);
  • replace ESLint deps (1 minute per file);
• find a corresponding rule for each of the existing ESLint rules (2 minutes per rule);
• replace Prettier configuration (5 minutes)

It would have taken up to a whole day of boring mechanical work to perform the migration manually without performing any additional troubleshooting

on behalf of eps1lon:

All the breakages I found so far can be resolved via

-useReducer<React.Reducer<State, Action>>
+useReducer<State, [Action]>

Applicability Criteria

Which types-react versions include the old pattern?

Additional context or links

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-deprecated-typescript-types