fix(template): make it possible to use type in template (#619)

Fix #556

Author: gregberge

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\\";
 

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', () => {

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[]

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,
+  }
 }