Update svgr codemod to output TS for tsx inputs #8935
Conversation
| @@ -17,6 +26,7 @@ async function convertSvgToReactComponent( | |||
| { | |||
| jsxRuntime: 'automatic', | |||
| plugins: ['@svgr/plugin-jsx'], | |||
| typescript, | |||
There was a problem hiding this comment.
This, together with the const isTS = code below is the main change for this PR.
The rest is mostly changes to make the code easier to read and understand
| @@ -111,15 +122,20 @@ export default async function transform(file: FileInfo, api: API) { | |||
|
|
|||
| // The absolute path to the new file | |||
| const outputPath = path.join( | |||
| path.dirname(filePath), | |||
There was a problem hiding this comment.
Reading this code in isolation it was hard to know what filePath was. Path to the file we're parsing? Path to the svg we found in that file? Path to the file we're going to generate?
This change hopefully makes it more clear that it's the path to the svg file the code is importing
| const root = j(file.source) | ||
|
|
||
| // Do this lazily |
There was a problem hiding this comment.
The cost of importing getPaths has already been paid by replaceComponentSvgs.yargs.ts, so moved this to a regular import, so you don't have to wonder why we're doing a lazy import.
| @@ -25,16 +35,16 @@ async function convertSvgToReactComponent( | |||
|
|
|||
| await fs.writeFile(outputPath, jsCode) | |||
|
|
|||
| console.log() | |||
There was a problem hiding this comment.
Extra blank line needed for Listr to not mess up the output
If an svg is imported in a .tsx file the user probably want the generated SVG component file to be using TypeScript. That's what this PR does.
If an svg is imported in a .tsx file the user probably want the generated SVG component file to be using TypeScript. That's what this PR does.