Skip to content

Commit

Permalink
feat(types): change SVGProps from import to import type (#853)
Browse files Browse the repository at this point in the history 
Generate `import type` as opposed to `import` when the typescript flag is present.
Accomplished this by adding `importKind` parameter to the `getOrCreateImport` method.
  • Loading branch information
@johncch
johncch committed May 9, 2023
1 parent 003009c commit 095f021
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 14 deletions.
17 changes: 10 additions & 7 deletions packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ export default SvgComponent;"
exports[`plugin typescript with "descProp" and "expandProps" adds "desc", "descId" props and expands props 1`] = `
"import * as React from "react";
import { SVGProps } from "react";
import type { SVGProps } from "react";
interface SVGRProps {
desc?: string;
descId?: string;
Expand All @@ -347,7 +347,7 @@ export default SvgComponent;"
exports[`plugin typescript with "expandProps" add props 1`] = `
"import * as React from "react";
import { SVGProps } from "react";
import type { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => <svg><g /></svg>;
export default SvgComponent;"
`;
Expand Down Expand Up @@ -377,7 +377,8 @@ export default img;"
exports[`plugin typescript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = `
"import * as React from "react";
import Svg, { SvgProps } from "react-native-svg";
import Svg from "react-native-svg";
import type { SvgProps } from "react-native-svg";
const SvgComponent = (props: SvgProps) => <Svg><g /></Svg>;
export default SvgComponent;"
`;
Expand All @@ -391,7 +392,8 @@ export default SvgComponent;"
exports[`plugin typescript with "native", "ref" and "expandProps" option adds import from "react-native-svg" and adds props and adds ForwardRef component 1`] = `
"import * as React from "react";
import Svg, { SvgProps } from "react-native-svg";
import Svg from "react-native-svg";
import type { SvgProps } from "react-native-svg";
import { Ref, forwardRef } from "react";
const SvgComponent = (props: SvgProps, ref: Ref<SVGSVGElement>) => <Svg><g /></Svg>;
const ForwardRef = forwardRef(SvgComponent);
Expand All @@ -409,7 +411,8 @@ export default ForwardRef;"
exports[`plugin typescript with "ref" and "expandProps" option expands props 1`] = `
"import * as React from "react";
import { SVGProps, Ref, forwardRef } from "react";
import type { SVGProps } from "react";
import { Ref, forwardRef } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg><g /></svg>;
const ForwardRef = forwardRef(SvgComponent);
export default ForwardRef;"
Expand All @@ -425,7 +428,7 @@ export default ForwardRef;"
exports[`plugin typescript with "titleProp" "descProp" and "expandProps" adds "title", "titleId", "desc", "descId" props and expands props 1`] = `
"import * as React from "react";
import { SVGProps } from "react";
import type { SVGProps } from "react";
interface SVGRProps {
title?: string;
titleId?: string;
Expand Down Expand Up @@ -474,7 +477,7 @@ export default SvgComponent;"
exports[`plugin typescript with "titleProp" and "expandProps" adds "title", "titleId" props and expands props 1`] = `
"import * as React from "react";
import { SVGProps } from "react";
import type { SVGProps } from "react";
interface SVGRProps {
title?: string;
titleId?: string;
Expand Down
15 changes: 12 additions & 3 deletions packages/babel-plugin-transform-svg-component/src/variables.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { types as t, template } from '@babel/core'
import type { Options, TemplateVariables, JSXRuntimeImport } from './types'
import type { ImportDeclaration } from '@babel/types'

const tsOptionalPropertySignature = (
...args: Parameters<typeof t.tsPropertySignature>
Expand All @@ -18,30 +19,38 @@ interface Context {
importSource: string
}

const getOrCreateImport = ({ imports }: Context, sourceValue: string) => {
const getOrCreateImport = (
{ imports }: Context,
sourceValue: string,
importKind: ImportDeclaration['importKind'] = undefined,
) => {
const existing = imports.find(
(imp) =>
imp.source.value === sourceValue &&
imp.importKind === importKind &&
!imp.specifiers.some(
(specifier) => specifier.type === 'ImportNamespaceSpecifier',
),
)
if (existing) return existing
const imp = t.importDeclaration([], t.stringLiteral(sourceValue))
if (importKind !== undefined) {
imp.importKind = importKind
}
imports.push(imp)
return imp
}

const tsTypeReferenceSVGProps = (ctx: Context) => {
if (ctx.opts.native) {
const identifier = t.identifier('SvgProps')
getOrCreateImport(ctx, 'react-native-svg').specifiers.push(
getOrCreateImport(ctx, 'react-native-svg', 'type').specifiers.push(
t.importSpecifier(identifier, identifier),
)
return t.tsTypeReference(identifier)
}
const identifier = t.identifier('SVGProps')
getOrCreateImport(ctx, ctx.importSource).specifiers.push(
getOrCreateImport(ctx, ctx.importSource, 'type').specifiers.push(
t.importSpecifier(identifier, identifier),
)
return t.tsTypeReference(
Expand Down
11 changes: 7 additions & 4 deletions packages/cli/src/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,8 @@ export default SvgFile

exports[`cli should support various args: --typescript --ref --desc-prop 1`] = `
"import * as React from 'react'
import { SVGProps, Ref, forwardRef } from 'react'
import type { SVGProps } from 'react'
import { Ref, forwardRef } from 'react'
interface SVGRProps {
desc?: string;
descId?: string;
Expand Down Expand Up @@ -497,7 +498,8 @@ export default ForwardRef
exports[`cli should support various args: --typescript --ref --title-prop 1`] = `
"import * as React from 'react'
import { SVGProps, Ref, forwardRef } from 'react'
import type { SVGProps } from 'react'
import { Ref, forwardRef } from 'react'
interface SVGRProps {
title?: string;
titleId?: string;
Expand Down Expand Up @@ -526,7 +528,8 @@ export default ForwardRef
exports[`cli should support various args: --typescript --ref 1`] = `
"import * as React from 'react'
import { SVGProps, Ref, forwardRef } from 'react'
import type { SVGProps } from 'react'
import { Ref, forwardRef } from 'react'
const SvgFile = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -546,7 +549,7 @@ export default ForwardRef
exports[`cli should support various args: --typescript 1`] = `
"import * as React from 'react'
import { SVGProps } from 'react'
import type { SVGProps } from 'react'
const SvgFile = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={48} height={1} {...props}>
<path fill="#063855" fillRule="evenodd" d="M0 0h48v1H0z" />
Expand Down

1 comment on commit 095f021

@vercel
Copy link

@vercel vercel bot commented on 095f021 May 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.