fix: fix typescript types (ref, title) (#419)

gregberge · Mar 26, 2020 · 6e7e6b2 · 6e7e6b2 · vercel · Mar 26, 2020
1 parent 868e5dc
commit 6e7e6b2
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 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
@@ -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
@@ -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,20 +206,26 @@ 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
   }
 
   if (opts.state.caller && opts.state.caller.previousExport) {
     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
@@ -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
@@ -133,6 +133,7 @@ describe('cli', () => {
     ['--title-prop'],
     ['--typescript'],
     ['--typescript --ref'],
+    ['--typescript --ref --title-prop'],
   ])(
     'should support various args',
     async args => {