Fix check for type imports in transform-react-native-svg

Signed-off-by: Yash Srivastav <yashsriv@meta.com>
gregberge · Sep 25, 2023 · 82b214f · 82b214f
1 parent 308672d
commit 82b214f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.test.ts b/packages/babel-plugin-transform-react-native-svg/src/index.test.ts
@@ -26,4 +26,29 @@ describe('plugin', () => {
       <Svg><G /></Svg>;"
     `)
   })
+
+  it('should add deal with type imports properly', () => {
+    const code = transform(
+      `
+      import Svg from 'react-native-svg';
+      import type { SvgProps } from "react-native-svg";
+
+      const ComponentSvg = () => <svg><g /></svg>;
+    `,
+      {
+        plugins: [
+          '@babel/plugin-syntax-jsx',
+          ['@babel/plugin-syntax-typescript', { isTSX: true }],
+          plugin,
+        ],
+        configFile: false,
+      },
+    )?.code
+
+    expect(code).toMatchInlineSnapshot(`
+      "import Svg, { G } from 'react-native-svg';
+      import type { SvgProps } from "react-native-svg";
+      const ComponentSvg = () => <Svg><G /></Svg>;"
+    `)
+  })
 })
diff --git a/packages/babel-plugin-transform-react-native-svg/src/index.ts b/packages/babel-plugin-transform-react-native-svg/src/index.ts
@@ -79,9 +79,13 @@ const plugin = () => {
 
   const importDeclarationVisitor = {
     ImportDeclaration(path: NodePath<t.ImportDeclaration>, state: State) {
+      const isNotTypeImport =
+        !path.get('importKind').hasNode() ||
+        path.node.importKind == null ||
+        path.node.importKind === 'value'
       if (
         path.get('source').isStringLiteral({ value: 'react-native-svg' }) &&
-        !path.get('importKind').hasNode()
+        isNotTypeImport
       ) {
         state.replacedComponents.forEach((component) => {
           if (