Repository: gregberge/svgr (ts)

Issue:
preserveComments with templates
<!-- Love SVGR? Please consider supporting our collective: 👉  https://opencollective.com/svgr/donate -->

## 🚀 Feature Proposal

Enable `preserveComments` by default in templates.

## Motivation

With new template syntax, it's difficult to enable `preserveComments`.

## Pitch

`preserveComments` should be enabled by default, since we control the content of the template anyway. It's unexpected that comments gets stripped out in the final result.

Pull request:
feat: support comments in templates
<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. The two fields below are mandatory. -->

## Summary

Fixes #660.

<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->

## Test plan

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. -->

Snapshot test is provided to make sure comments are preserved.

Patch:
diff --git a/packages/babel-plugin-transform-svg-component/src/index.ts b/packages/babel-plugin-transform-svg-component/src/index.ts
index 65f9afd..8448a84 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>) {
diff --git a/packages/plugin-svgo/src/index.ts b/packages/plugin-svgo/src/index.ts
index 38a1e26..f36c58b 100644
--- a/packages/plugin-svgo/src/index.ts
+++ b/packages/plugin-svgo/src/index.ts
@@ -5,8 +5,13 @@ import type { Plugin } from '@svgr/core'
 const svgoPlugin: Plugin = (code, config, state) => {
   if (!config.svgo) return code
   const svgoConfig = getSvgoConfig(config, state)
-  const { data } = optimize(code, { ...svgoConfig, path: state.filePath })
-  return data
+  const result = optimize(code, { ...svgoConfig, path: state.filePath })
+
+  if (result.modernError) {
+    throw result.modernError
+  }
+
+  return result.data
 }
 
 export default svgoPlugin


Test patch:
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 a5d510b..587508f 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 61d67c9..cce4d49 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/plugin-svgo/src/index.test.ts b/packages/plugin-svgo/src/index.test.ts
index 63e2c71..ca1dd4f 100644
--- a/packages/plugin-svgo/src/index.test.ts
+++ b/packages/plugin-svgo/src/index.test.ts
@@ -51,6 +51,21 @@ describe('svgo', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('throws error on invalid svg input', () => {
+    const errorSvg = `<?xml version="1.0" encoding="UTF-8"?>
+  <svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d=M51,37 L37,51" id="Shape" class="shape"></path>
+  </svg>`
+
+    expect(() =>
+      svgo(
+        errorSvg,
+        { svgo: true, runtimeConfig: true },
+        { ...state, filePath: path.join(__dirname, '../__fixtures__/svgo') },
+      ),
+    ).toThrowError()
+  })
+
   it('uses `state.filePath` to detect configuration', () => {
     const result = svgo(
       baseSvg,