Skip to content

Commit 095f021

Browse files
authoredMay 9, 2023
feat(types): change SVGProps from import to import type (#853)
Generate `import type` as opposed to `import` when the typescript flag is present. Accomplished this by adding `importKind` parameter to the `getOrCreateImport` method.
1 parent 003009c commit 095f021

File tree

3 files changed

+29
-14
lines changed

3 files changed

+29
-14
lines changed
 

‎packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap

+10-7
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ export default SvgComponent;"
332332
333333
exports[`plugin typescript with "descProp" and "expandProps" adds "desc", "descId" props and expands props 1`] = `
334334
"import * as React from "react";
335-
import { SVGProps } from "react";
335+
import type { SVGProps } from "react";
336336
interface SVGRProps {
337337
desc?: string;
338338
descId?: string;
@@ -347,7 +347,7 @@ export default SvgComponent;"
347347
348348
exports[`plugin typescript with "expandProps" add props 1`] = `
349349
"import * as React from "react";
350-
import { SVGProps } from "react";
350+
import type { SVGProps } from "react";
351351
const SvgComponent = (props: SVGProps<SVGSVGElement>) => <svg><g /></svg>;
352352
export default SvgComponent;"
353353
`;
@@ -377,7 +377,8 @@ export default img;"
377377
378378
exports[`plugin typescript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = `
379379
"import * as React from "react";
380-
import Svg, { SvgProps } from "react-native-svg";
380+
import Svg from "react-native-svg";
381+
import type { SvgProps } from "react-native-svg";
381382
const SvgComponent = (props: SvgProps) => <Svg><g /></Svg>;
382383
export default SvgComponent;"
383384
`;
@@ -391,7 +392,8 @@ export default SvgComponent;"
391392
392393
exports[`plugin typescript with "native", "ref" and "expandProps" option adds import from "react-native-svg" and adds props and adds ForwardRef component 1`] = `
393394
"import * as React from "react";
394-
import Svg, { SvgProps } from "react-native-svg";
395+
import Svg from "react-native-svg";
396+
import type { SvgProps } from "react-native-svg";
395397
import { Ref, forwardRef } from "react";
396398
const SvgComponent = (props: SvgProps, ref: Ref<SVGSVGElement>) => <Svg><g /></Svg>;
397399
const ForwardRef = forwardRef(SvgComponent);
@@ -409,7 +411,8 @@ export default ForwardRef;"
409411
410412
exports[`plugin typescript with "ref" and "expandProps" option expands props 1`] = `
411413
"import * as React from "react";
412-
import { SVGProps, Ref, forwardRef } from "react";
414+
import type { SVGProps } from "react";
415+
import { Ref, forwardRef } from "react";
413416
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg><g /></svg>;
414417
const ForwardRef = forwardRef(SvgComponent);
415418
export default ForwardRef;"
@@ -425,7 +428,7 @@ export default ForwardRef;"
425428
426429
exports[`plugin typescript with "titleProp" "descProp" and "expandProps" adds "title", "titleId", "desc", "descId" props and expands props 1`] = `
427430
"import * as React from "react";
428-
import { SVGProps } from "react";
431+
import type { SVGProps } from "react";
429432
interface SVGRProps {
430433
title?: string;
431434
titleId?: string;
@@ -474,7 +477,7 @@ export default SvgComponent;"
474477
475478
exports[`plugin typescript with "titleProp" and "expandProps" adds "title", "titleId" props and expands props 1`] = `
476479
"import * as React from "react";
477-
import { SVGProps } from "react";
480+
import type { SVGProps } from "react";
478481
interface SVGRProps {
479482
title?: string;
480483
titleId?: string;

‎packages/babel-plugin-transform-svg-component/src/variables.ts

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { types as t, template } from '@babel/core'
22
import type { Options, TemplateVariables, JSXRuntimeImport } from './types'
3+
import type { ImportDeclaration } from '@babel/types'
34

45
const tsOptionalPropertySignature = (
56
...args: Parameters<typeof t.tsPropertySignature>
@@ -18,30 +19,38 @@ interface Context {
1819
importSource: string
1920
}
2021

21-
const getOrCreateImport = ({ imports }: Context, sourceValue: string) => {
22+
const getOrCreateImport = (
23+
{ imports }: Context,
24+
sourceValue: string,
25+
importKind: ImportDeclaration['importKind'] = undefined,
26+
) => {
2227
const existing = imports.find(
2328
(imp) =>
2429
imp.source.value === sourceValue &&
30+
imp.importKind === importKind &&
2531
!imp.specifiers.some(
2632
(specifier) => specifier.type === 'ImportNamespaceSpecifier',
2733
),
2834
)
2935
if (existing) return existing
3036
const imp = t.importDeclaration([], t.stringLiteral(sourceValue))
37+
if (importKind !== undefined) {
38+
imp.importKind = importKind
39+
}
3140
imports.push(imp)
3241
return imp
3342
}
3443

3544
const tsTypeReferenceSVGProps = (ctx: Context) => {
3645
if (ctx.opts.native) {
3746
const identifier = t.identifier('SvgProps')
38-
getOrCreateImport(ctx, 'react-native-svg').specifiers.push(
47+
getOrCreateImport(ctx, 'react-native-svg', 'type').specifiers.push(
3948
t.importSpecifier(identifier, identifier),
4049
)
4150
return t.tsTypeReference(identifier)
4251
}
4352
const identifier = t.identifier('SVGProps')
44-
getOrCreateImport(ctx, ctx.importSource).specifiers.push(
53+
getOrCreateImport(ctx, ctx.importSource, 'type').specifiers.push(
4554
t.importSpecifier(identifier, identifier),
4655
)
4756
return t.tsTypeReference(

‎packages/cli/src/__snapshots__/index.test.ts.snap

+7-4
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,8 @@ export default SvgFile
468468

469469
exports[`cli should support various args: --typescript --ref --desc-prop 1`] = `
470470
"import * as React from 'react'
471-
import { SVGProps, Ref, forwardRef } from 'react'
471+
import type { SVGProps } from 'react'
472+
import { Ref, forwardRef } from 'react'
472473
interface SVGRProps {
473474
desc?: string;
474475
descId?: string;
@@ -497,7 +498,8 @@ export default ForwardRef
497498
498499
exports[`cli should support various args: --typescript --ref --title-prop 1`] = `
499500
"import * as React from 'react'
500-
import { SVGProps, Ref, forwardRef } from 'react'
501+
import type { SVGProps } from 'react'
502+
import { Ref, forwardRef } from 'react'
501503
interface SVGRProps {
502504
title?: string;
503505
titleId?: string;
@@ -526,7 +528,8 @@ export default ForwardRef
526528
527529
exports[`cli should support various args: --typescript --ref 1`] = `
528530
"import * as React from 'react'
529-
import { SVGProps, Ref, forwardRef } from 'react'
531+
import type { SVGProps } from 'react'
532+
import { Ref, forwardRef } from 'react'
530533
const SvgFile = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
531534
<svg
532535
xmlns="http://www.w3.org/2000/svg"
@@ -546,7 +549,7 @@ export default ForwardRef
546549
547550
exports[`cli should support various args: --typescript 1`] = `
548551
"import * as React from 'react'
549-
import { SVGProps } from 'react'
552+
import type { SVGProps } from 'react'
550553
const SvgFile = (props: SVGProps<SVGSVGElement>) => (
551554
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
552555
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />

1 commit comments

Comments
 (1)

vercel[bot] commented on May 9, 2023

@vercel[bot]

Successfully deployed to the following URLs:

svgr – ./

svgr-gregberge.vercel.app
api.react-svgr.com
svgr-git-main-gregberge.vercel.app

Please sign in to comment.