feat: support comments in templates (#661)

Author: tu4mo

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`] = `

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

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>) {