From a3934a27f18cf399e51f4e3c6e435111264121a7 Mon Sep 17 00:00:00 2001
From: tu4mo <tu4mo@users.noreply.github.com>
Date: Sun, 2 Jan 2022 12:26:47 +0200
Subject: [PATCH] feat: support comments in templates

---
 .../src/__snapshots__/index.test.ts.snap       | 18 ++++++++++++++++++
 .../src/index.test.ts                          | 15 +++++++++++++++
 .../src/index.ts                               |  2 +-
 3 files changed, 34 insertions(+), 1 deletion(-)

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 a5d510b6..587508f1 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
@@ -65,6 +65,15 @@ const MyComponent = (props: React.SVGProps<SVGSVGElement>) => <svg><g /></svg>;
 export default MyComponent;"
 `;
 
+exports[`plugin javascript custom templates supports comments in templates 1`] = `
+"/**
+ * Comment
+ */
+const MyComponent = () => <svg><g /></svg>;
+
+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`] = `
@@ -284,6 +293,15 @@ const MyComponent = (props: React.SVGProps<SVGSVGElement>) => <svg><g /></svg>;
 export default MyComponent;"
 `;
 
+exports[`plugin typescript custom templates supports comments in templates 1`] = `
+"/**
+ * Comment
+ */
+const MyComponent = () => <svg><g /></svg>;
+
+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`] = `
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 61d67c90..cce4d490 100644
--- a/packages/babel-plugin-transform-svg-component/src/index.test.ts
+++ b/packages/babel-plugin-transform-svg-component/src/index.test.ts
@@ -248,6 +248,21 @@ describe('plugin', () => {
         })
         expect(code).toMatchSnapshot()
       })
+
+      it('supports comments in templates', () => {
+        const { code } = testPlugin(language)('<svg><g /></svg>', {
+          template: ({ jsx }, { tpl }) => tpl`
+          /**
+           * Comment
+           */
+          const MyComponent = () => ${jsx}
+
+          export default MyComponent;
+          `,
+          state: { componentName: 'SvgComponent' },
+        })
+        expect(code).toMatchSnapshot()
+      })
     })
 
     describe('#jsxRuntime', () => {
diff --git a/packages/babel-plugin-transform-svg-component/src/index.ts b/packages/babel-plugin-transform-svg-component/src/index.ts
index 65f9afdf..8448a845 100644
--- a/packages/babel-plugin-transform-svg-component/src/index.ts
+++ b/packages/babel-plugin-transform-svg-component/src/index.ts
@@ -17,7 +17,7 @@ const plugin = (_: ConfigAPI, opts: Options) => {
   const plugins: ParserOptions['plugins'] = opts.typescript
     ? ['jsx', 'typescript']
     : ['jsx']
-  const tpl = babelTemplate.smart({ plugins }).ast
+  const tpl = babelTemplate.smart({ plugins, preserveComments: true }).ast
   return {
     visitor: {
       Program(path: NodePath<t.Program>) {