feat(core): add "memo" option

Closes #230

Author: gregberge

packages/babel-plugin-transform-svg-component/src/index.test.js

@@ -128,4 +128,42 @@ describe('plugin', () => {
       export default ForwardRef;"
     `)
   })
+
+  it('should work with memo', () => {
+    const { code } = testPlugin('<svg><div /></svg>', {
+      state: { componentName: 'SvgComponent' },
+      memo: true,
+    })
+    expect(code).toMatchInlineSnapshot(`
+      "import React from \\"react\\";
+
+      function SvgComponent() {
+        return <svg><div /></svg>;
+      }
+
+      const MemoSvgComponent = React.memo(SvgComponent);
+      export default MemoSvgComponent;"
+    `)
+  })
+
+  it('should work with memo + ref', () => {
+    const { code } = testPlugin('<svg><div /></svg>', {
+      state: { componentName: 'SvgComponent' },
+      memo: true,
+      ref: true,
+    })
+    expect(code).toMatchInlineSnapshot(`
+      "import React from \\"react\\";
+
+      function SvgComponent({
+        svgRef
+      }) {
+        return <svg><div /></svg>;
+      }
+
+      const MemoSvgComponent = React.memo(SvgComponent);
+      const ForwardRef = React.forwardRef((props, ref) => <MemoSvgComponent svgRef={ref} {...props} />);
+      export default ForwardRef;"
+    `)
+  })
 })

packages/babel-plugin-transform-svg-component/src/util.js

@@ -66,11 +66,16 @@ export const getExport = ({ template }, opts) => {
   let result = ''
   let exportName = opts.state.componentName
 
+  if (opts.memo) {
+    const nextExportName = `Memo${exportName}`
+    result += `const ${nextExportName} = React.memo(${exportName})\n\n`
+    exportName = nextExportName
+  }
+
   if (opts.ref) {
-    exportName = 'ForwardRef'
-    result += `const ForwardRef = React.forwardRef((props, ref) => <${
-      opts.state.componentName
-    } svgRef={ref} {...props} />)\n\n`
+    const nextExportName = `ForwardRef`
+    result += `const ${nextExportName} = React.forwardRef((props, ref) => <${exportName} svgRef={ref} {...props} />)\n\n`
+    exportName = nextExportName
   }
 
   if (opts.state.caller && opts.state.caller.previousExport) {

packages/cli/src/index.js

@@ -51,6 +51,7 @@ program
   )
   .option('--icon', 'use "1em" as width and height')
   .option('--native', 'add react-native support with react-native-svg')
+  .option('--memo', 'add React.memo into the result component')
   .option('--ref', 'forward ref to SVG root element')
   .option('--no-dimensions', 'remove width and height from root SVG tag')
   .option(

packages/core/src/__snapshots__/convert.test.js.snap

@@ -381,6 +381,30 @@ export default SvgComponent
 "
 `;
 
+exports[`convert config should support options 17 1`] = `
+"import React from 'react'
+
+function SvgComponent(props) {
+  return (
+    <svg width={88} height={88} {...props}>
+      <g
+        stroke=\\"#063855\\"
+        strokeWidth={2}
+        fill=\\"none\\"
+        fillRule=\\"evenodd\\"
+        strokeLinecap=\\"square\\"
+      >
+        <path d=\\"M51 37L37 51M51 51L37 37\\" />
+      </g>
+    </svg>
+  )
+}
+
+const MemoSvgComponent = React.memo(SvgComponent)
+export default MemoSvgComponent
+"
+`;
+
 exports[`convert config titleProp: without title added 1`] = `
 "import React from 'react'
 

packages/core/src/config.js

@@ -8,6 +8,7 @@ export const DEFAULT_CONFIG = {
   native: false,
   prettier: true,
   prettierConfig: null,
+  memo: false,
   ref: false,
   replaceAttrValues: null,
   svgProps: null,

packages/core/src/convert.test.js

@@ -308,6 +308,7 @@ describe('convert', () => {
           template.ast`const noop = () => null; export default noop;`,
       },
       { titleProp: true },
+      { memo: true },
     ]
 
     test.each(configs)('should support options %#', async config => {