From 6e7e6b2e73d26d30f64604e0fc627f9ff94079c2 Mon Sep 17 00:00:00 2001
From: Ben Ilegbodu <ben@benmvp.com>
Date: Thu, 26 Mar 2020 00:09:03 -0700
Subject: [PATCH] fix: fix typescript types (ref, title) (#419)

---
 .../src/__snapshots__/index.test.js.snap      | 10 ++---
 .../src/util.js                               | 21 +++++++---
 .../cli/src/__snapshots__/index.test.js.snap  | 38 ++++++++++++++++++-
 packages/cli/src/index.test.js                |  1 +
 4 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.js.snap b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.js.snap
index 7ed69aaa..39c0ee90 100644
--- a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.js.snap
+++ b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.js.snap
@@ -225,7 +225,7 @@ function SvgComponent({
   return <svg><g /></svg>;
 }
 
-const ForwardRef = React.forwardRef((props, ref) => <SvgComponent svgRef={ref} {...props} />);
+const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => <SvgComponent svgRef={ref} {...props} />);
 export default ForwardRef;"
 `;
 
@@ -241,15 +241,15 @@ function SvgComponent({
   return <svg><g /></svg>;
 }
 
-const ForwardRef = React.forwardRef((props, ref) => <SvgComponent svgRef={ref} {...props} />);
+const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => <SvgComponent svgRef={ref} {...props} />);
 export default ForwardRef;"
 `;
 
 exports[`plugin typescript with "titleProp" adds "titleProp" and "titleId" prop 1`] = `
 "import * as React from \\"react\\";
 interface SVGRProps {
-  title?: String,
-  titleId?: String,
+  title?: string,
+  titleId?: string,
 }
 
 function SvgComponent({
@@ -275,6 +275,6 @@ function SvgComponent({
 }
 
 const MemoSvgComponent = React.memo(SvgComponent);
-const ForwardRef = React.forwardRef((props, ref) => <MemoSvgComponent svgRef={ref} {...props} />);
+const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => <MemoSvgComponent svgRef={ref} {...props} />);
 export default ForwardRef;"
 `;
diff --git a/packages/babel-plugin-transform-svg-component/src/util.js b/packages/babel-plugin-transform-svg-component/src/util.js
index 375bc333..0369e44c 100644
--- a/packages/babel-plugin-transform-svg-component/src/util.js
+++ b/packages/babel-plugin-transform-svg-component/src/util.js
@@ -152,10 +152,10 @@ export const getInterface = ({ types: t }, opts) => {
   }
   if (opts.titleProp) {
     properties.push(
-      objectTypeProperty(t.identifier('title'), t.identifier('String'), true),
+      objectTypeProperty(t.identifier('title'), t.identifier('string'), true),
     )
     properties.push(
-      objectTypeProperty(t.identifier('titleId'), t.identifier('String'), true),
+      objectTypeProperty(t.identifier('titleId'), t.identifier('string'), true),
     )
   }
   if (properties.length === 0) return null
@@ -192,6 +192,11 @@ export const getImport = ({ types: t }, opts) => {
 export const getExport = ({ template }, opts) => {
   let result = ''
   let exportName = opts.state.componentName
+  const plugins = ['jsx']
+
+  if (opts.typescript) {
+    plugins.push('typescript')
+  }
 
   if (opts.memo) {
     const nextExportName = `Memo${exportName}`
@@ -201,7 +206,13 @@ export const getExport = ({ template }, opts) => {
 
   if (opts.ref) {
     const nextExportName = `ForwardRef`
-    result += `const ${nextExportName} = React.forwardRef((props, ref) => <${exportName} svgRef={ref} {...props} />)\n\n`
+    let refType = ''
+
+    if (opts.typescript) {
+      refType = ': React.Ref<SVGSVGElement>'
+    }
+
+    result += `const ${nextExportName} = React.forwardRef((props, ref${refType}) => <${exportName} svgRef={ref} {...props} />)\n\n`
     exportName = nextExportName
   }
 
@@ -209,12 +220,12 @@ export const getExport = ({ template }, opts) => {
     result += `${opts.state.caller.previousExport}\n`
     result += `export { ${exportName} as ReactComponent }`
     return template.ast(result, {
-      plugins: ['jsx'],
+      plugins,
     })
   }
 
   result += `export default ${exportName}`
   return template.ast(result, {
-    plugins: ['jsx'],
+    plugins,
   })
 }
diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
index 9e2b0072..4d5e74e8 100644
--- a/packages/cli/src/__snapshots__/index.test.js.snap
+++ b/packages/cli/src/__snapshots__/index.test.js.snap
@@ -404,6 +404,42 @@ export default SvgFile
 "
 `;
 
+exports[`cli should support various args: --typescript --ref --title-prop 1`] = `
+"import * as React from 'react'
+interface SVGRProps {
+  svgRef?: React.Ref<SVGSVGElement>;
+  title?: string;
+  titleId?: string;
+}
+
+function SvgFile({
+  svgRef,
+  title,
+  titleId,
+  ...props
+}: React.SVGProps<SVGSVGElement> & SVGRProps) {
+  return (
+    <svg
+      width={48}
+      height={1}
+      ref={svgRef}
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
+    </svg>
+  )
+}
+
+const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => (
+  <SvgFile svgRef={ref} {...props} />
+))
+export default ForwardRef
+
+"
+`;
+
 exports[`cli should support various args: --typescript --ref 1`] = `
 "import * as React from 'react'
 interface SVGRProps {
@@ -421,7 +457,7 @@ function SvgFile({
   )
 }
 
-const ForwardRef = React.forwardRef((props, ref) => (
+const ForwardRef = React.forwardRef((props, ref: React.Ref<SVGSVGElement>) => (
   <SvgFile svgRef={ref} {...props} />
 ))
 export default ForwardRef
diff --git a/packages/cli/src/index.test.js b/packages/cli/src/index.test.js
index f5e60aa4..647e05a2 100644
--- a/packages/cli/src/index.test.js
+++ b/packages/cli/src/index.test.js
@@ -133,6 +133,7 @@ describe('cli', () => {
     ['--title-prop'],
     ['--typescript'],
     ['--typescript --ref'],
+    ['--typescript --ref --title-prop'],
   ])(
     'should support various args',
     async args => {