Change SVGProps from import to import type

[johncch]

Summary

This PR changes SVGProp from value import to type import when the --typescript flag is supplied.

Here's an example of the change:

The change is quite straightforward. It adds a importKind parameter to the getOrCreateImport method so that both when importing the react and react-native versions of SVGProps, we can create the ImportDeclaration node with the right importKind parameter.

This addresses the warning for verbatimModuleSyntax flag in Typescript 5.0, seen below[they shipped the --verbatimModuleSyntax flag]

Note: this PR is branched off f20a753 because the build was failing in the newer commits.

This PR addresses #842

Test plan

I ran the jest tests and inspected the generated output to make sure they are correct.

I ran the updated script against my folder of SVGs and the Typescript compiler was happy with them.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svgr	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 20, 2023 11:30pm

[gregberge]

Thanks @johncch, I know it is not what you are fixing, but tests are actually broken. Could you please try to fix it? Else I will give a look when I have a moment.

[johncch]

Hi @gregberge, this is what I found:

The build is failing because it is not able to find the type definition file for svgr/core:

This only happens on a clean build. On the second build, since the dist folder already exists, it will just use the one that is built in the previous run. I replicated it and verified it by running this command in the CLI to delete all the dist folders before rebuilding it.

find packages -name dist -exec rm -rf {} \;
# simply delete all the folders name dist inside the packages folder

I can fix it locally and verified that the error stops occurring by adding svgr/core into the devDependencies. However, I noticed that you explicitly removed the svgr/core package from peerDependencies in this commit

I'm assuming that your intention is to not have the plugin-jsx package pull from NPM and pull from the local folder instead. If that's the case, may I suggest adding this as a fix?

  "devDependencies": {
    "@svgr/core": "file:../core"
  }

If you feel good about this I'll add a commit to this PR.

[gregberge]

Hello @johncch, could you rebase, with pnpm everything is fixed. Then I could merge it and make a new release.

[johncch]

Ok - rebased. I think it should be good. The tests run locally for me.

[codecov]

Codecov Report

Merging #853 (ae94ae3) into main (428b0c7) will increase coverage by 0.04%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #853      +/-   ##
==========================================
+ Coverage   92.82%   92.87%   +0.04%     
==========================================
  Files          32       32              
  Lines         753      758       +5     
  Branches      250      253       +3     
==========================================
+ Hits          699      704       +5     
  Misses         53       53              
  Partials        1        1              

Impacted Files	Coverage Δ
...el-plugin-transform-svg-component/src/variables.ts	99.15% <100.00%> (+0.03%)	⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more