From 5966714806f1aa385014b37c59d6a6b22d61f464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Berg=C3=A9?= <berge.greg@gmail.com>
Date: Thu, 11 Nov 2021 21:25:42 +0100
Subject: [PATCH] fix(template): make it possible to use type in template
 (#619)

Fix #556
---
 .../src/__snapshots__/index.test.ts.snap      | 26 +++++++++++++++++++
 .../src/index.test.ts                         | 19 ++++++++++++++
 .../src/types.ts                              |  2 +-
 .../src/variables.ts                          | 12 ++++++---
 4 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
index 10ab6f63..a11759bb 100644
--- a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
+++ b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap
@@ -67,6 +67,19 @@ export default MyComponent;"
 
 exports[`plugin javascript custom templates supports template that does not return an array 1`] = `"<svg><g /></svg>;"`;
 
+exports[`plugin javascript custom templates supports type annotation on component 1`] = `
+"import * as React from \\"react\\";
+interface Props {
+  x?: string;
+}
+export const SvgComponent:React.FC<Props> = ({
+  x
+}) => {
+  return <svg><g /></svg>;
+};
+export default SvgComponent;"
+`;
+
 exports[`plugin javascript transforms whole program 1`] = `
 "import * as React from \\"react\\";
 
@@ -270,6 +283,19 @@ export default MyComponent;"
 
 exports[`plugin typescript custom templates supports template that does not return an array 1`] = `"<svg><g /></svg>;"`;
 
+exports[`plugin typescript custom templates supports type annotation on component 1`] = `
+"import * as React from \\"react\\";
+interface Props {
+  x?: string;
+}
+export const SvgComponent:React.FC<Props> = ({
+  x
+}) => {
+  return <svg><g /></svg>;
+};
+export default SvgComponent;"
+`;
+
 exports[`plugin typescript transforms whole program 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/babel-plugin-transform-svg-component/src/index.test.ts b/packages/babel-plugin-transform-svg-component/src/index.test.ts
index 35aa2628..f4e5f894 100644
--- a/packages/babel-plugin-transform-svg-component/src/index.test.ts
+++ b/packages/babel-plugin-transform-svg-component/src/index.test.ts
@@ -227,6 +227,25 @@ describe('plugin', () => {
         })
         expect(code).toMatchSnapshot()
       })
+
+      it('supports type annotation on component', () => {
+        const { code } = testPlugin(language)('<svg><g /></svg>', {
+          typescript: true,
+          template: (
+            { jsx, imports, interfaces, componentName, exports },
+            { tpl },
+          ) => tpl`
+          ${imports}
+          ${interfaces}
+          interface Props { x?: string }
+          export const ${`${componentName}:React.FC<Props>`} = ({ x }) => {
+            return (${jsx});
+          }
+          ${exports}`,
+          state: { componentName: 'SvgComponent' },
+        })
+        expect(code).toMatchSnapshot()
+      })
     })
 
     describe('#jsxRuntime', () => {
diff --git a/packages/babel-plugin-transform-svg-component/src/types.ts b/packages/babel-plugin-transform-svg-component/src/types.ts
index f1af5586..b4634350 100644
--- a/packages/babel-plugin-transform-svg-component/src/types.ts
+++ b/packages/babel-plugin-transform-svg-component/src/types.ts
@@ -2,7 +2,7 @@ import type { types as t } from '@babel/core'
 import type { TemplateBuilder } from '@babel/template'
 
 export interface TemplateVariables {
-  componentName: t.Identifier
+  componentName: string
   interfaces: t.TSInterfaceDeclaration[]
   props: (t.ObjectPattern | t.Identifier)[]
   imports: t.ImportDeclaration[]
diff --git a/packages/babel-plugin-transform-svg-component/src/variables.ts b/packages/babel-plugin-transform-svg-component/src/variables.ts
index 6eb386c1..54f24ce6 100644
--- a/packages/babel-plugin-transform-svg-component/src/variables.ts
+++ b/packages/babel-plugin-transform-svg-component/src/variables.ts
@@ -95,14 +95,13 @@ export const getVariables = ({
   opts: Options
   jsx: t.JSXElement
 }): TemplateVariables => {
-  const componentName = t.identifier(opts.state.componentName)
   const interfaces: t.TSInterfaceDeclaration[] = []
   const props: (t.Identifier | t.ObjectPattern)[] = []
   const imports: t.ImportDeclaration[] = []
   const exports: (t.VariableDeclaration | t.ExportDeclaration)[] = []
   const ctx = {
     importSource: opts.importSource ?? defaultImportSource,
-    exportIdentifier: componentName,
+    exportIdentifier: t.identifier(opts.state.componentName),
     opts,
     interfaces,
     props,
@@ -238,5 +237,12 @@ export const getVariables = ({
   } else {
     exports.push(t.exportDefaultDeclaration(ctx.exportIdentifier))
   }
-  return { componentName, props, interfaces, imports, exports, jsx }
+  return {
+    componentName: opts.state.componentName,
+    props,
+    interfaces,
+    imports,
+    exports,
+    jsx,
+  }
 }