Skip to content

[update-react-imports] skips files that contain type imports #325

Open
codemod-com/commons
#9
@TkDodo

Description

@TkDodo

current behaviour

files that include React runtime code, like React.useState, are properly handled by the code-mod. However, as soon as there is a single type import from React, like React.ReactNode, it shows the complete file as SKIP. Example file that will be skipped:

import * as React from 'react'

export const Counter = () => {
    const [count, setCount] = React.useState(0)

    const increment = (event: React.MouseEvent<HTMLButtonElement>) => {
        console.log(event)
        setCount(count + 1)
    }

    return (
        <button type="button" onClick={increment}>
            inc
        </button>
    )
}

As soon as we change to e.g. event:any, the file is correctly processed.

The following settings were used:

? On which files or directory should the codemods be applied? .
? Which dialect of JavaScript do you use? TypeScript
? Destructure namespace imports (import *) too? Yes

expected behaviour

type imports are transformed exactly like runtime imports, so the above example should become:

- import * as React from 'react'
+ import { useState, MouseEvent } from 'react'

export const Counter = () => {
-    const [count, setCount] = React.useState(0)
+    const [count, setCount] = useState(0)

-    const increment = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const increment = (event: MouseEvent<HTMLButtonElement>) => {
        console.log(event)
        setCount(count + 1)
    }

    return (
        <button type="button" onClick={increment}>
            inc
        </button>
    )
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions