Migrate to import * as React from 'react'

Ref facebook/react#18102
TrySound · Feb 23, 2020 · 7ef0b02 · 7ef0b02
1 parent 5a90553
commit 7ef0b02
Show file tree

Hide file tree

Showing 35 changed files with 106 additions and 104 deletions.
diff --git a/README.md b/README.md
@@ -78,7 +78,7 @@ npx @svgr/cli --icon --replace-attr-values "#063855=currentColor" icon.svg
 **Output**
 
 ```js
-import React from 'react'
+import * as React from 'react'
 
 const SvgComponent = props => (
   <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>

diff --git a/__fixtures__/template.js b/__fixtures__/template.js
@@ -1,5 +1,5 @@
 module.exports = () => (code, state) => `
-import React from 'react'
+import * as React from 'react'
 
 export default function ${state.componentName}() {
   return ${code}

diff --git a/packages/babel-plugin-transform-svg-component/src/index.test.js b/packages/babel-plugin-transform-svg-component/src/index.test.js
@@ -16,7 +16,7 @@ describe('plugin', () => {
       state: { componentName: 'SvgComponent' },
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent() {
         return <svg><div /></svg>;
@@ -32,7 +32,7 @@ describe('plugin', () => {
       native: true,
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
       import Svg from \\"react-native-svg\\";
 
       function SvgComponent() {
@@ -49,7 +49,7 @@ describe('plugin', () => {
       native: { expo: true },
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
       import \\"expo\\";
 
       function SvgComponent() {
@@ -66,14 +66,14 @@ describe('plugin', () => {
         { template },
         opts,
         { jsx },
-      ) => template.ast`import React from 'react';
+      ) => template.ast`import * as React from 'react';
   const MyComponent = () => ${jsx}
   export default MyComponent
 `,
       state: { componentName: 'SvgComponent' },
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from 'react';
+      "import * as React from 'react';
 
       const MyComponent = () => <svg><div /></svg>;
 
@@ -116,7 +116,7 @@ describe('plugin', () => {
       ref: true,
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent({
         svgRef
@@ -135,7 +135,7 @@ describe('plugin', () => {
       memo: true,
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent() {
         return <svg><div /></svg>;
@@ -153,7 +153,7 @@ describe('plugin', () => {
       ref: true,
     })
     expect(code).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent({
         svgRef

diff --git a/packages/babel-plugin-transform-svg-component/src/util.js b/packages/babel-plugin-transform-svg-component/src/util.js
@@ -50,7 +50,7 @@ export const getProps = ({ types: t }, opts) => {
 export const getImport = ({ types: t }, opts) => {
   const importDeclarations = [
     t.importDeclaration(
-      [t.importDefaultSpecifier(t.identifier('React'))],
+      [t.importNamespaceSpecifier(t.identifier('React'))],
       t.stringLiteral('react'),
     ),
   ]

diff --git a/packages/babel-preset/src/index.test.js b/packages/babel-preset/src/index.test.js
@@ -24,7 +24,7 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent() {
         return <svg foo=\\"bar\\" x={y} />;
@@ -43,7 +43,7 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
       import { Svg } from \\"expo\\";
 
       function SvgComponent() {
@@ -63,7 +63,7 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent({
         title,
@@ -85,7 +85,7 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent({
         title,
@@ -105,7 +105,7 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent({
         title,
@@ -130,7 +130,7 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent() {
         return <svg a=\\"black\\" b={props.white} />;
@@ -151,7 +151,7 @@ describe('preset', () => {
         },
       }),
     ).toMatchInlineSnapshot(`
-      "import React from \\"react\\";
+      "import * as React from \\"react\\";
 
       function SvgComponent(props) {
         return <svg a=\\"#000\\" b=\\"#fff\\" width=\\"1em\\" height=\\"1em\\" {...props} />;

diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ export { default as File } from './File'"
 `;
 
 exports[`cli should not override config with cli defaults 1`] = `
-"import React from \\"react\\";
+"import * as React from \\"react\\";
 
 function SvgFile() {
   return <svg viewBox=\\"0 0 48 1\\"><title>{\\"Rectangle 5\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Page-1\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\"><g id=\\"19-Separator\\" transform=\\"translate(-129.000000, -156.000000)\\" fill=\\"#063855\\"><g id=\\"Controls/Settings\\" transform=\\"translate(80.000000, 0.000000)\\"><g id=\\"Content\\" transform=\\"translate(0.000000, 64.000000)\\"><g id=\\"Group\\" transform=\\"translate(24.000000, 56.000000)\\"><g id=\\"Group-2\\"><rect id=\\"Rectangle-5\\" x={25} y={36} width={48} height={1} /></g></g></g></g></g></g></svg>;
@@ -19,7 +19,7 @@ export default SvgFile;
 exports[`cli should support --index-template in cli 1`] = `"export { File } from './File'"`;
 
 exports[`cli should support --prettier-config as file 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
      return (
@@ -35,7 +35,7 @@ export default SvgFile
 `;
 
 exports[`cli should support --prettier-config as json 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
      return (
@@ -51,7 +51,7 @@ export default SvgFile
 `;
 
 exports[`cli should support --svgo-config as file 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -68,7 +68,7 @@ export default SvgFile
 `;
 
 exports[`cli should support --svgo-config as json 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -134,7 +134,7 @@ Array [
 `;
 
 exports[`cli should support stdin filepath 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -150,7 +150,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --expand-props none 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile() {
   return (
@@ -166,7 +166,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --expand-props start 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -182,7 +182,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --icon 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -198,7 +198,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --native --expand-props none 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
 
 function SvgFile() {
@@ -215,7 +215,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --native --icon 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
 
 function SvgFile(props) {
@@ -232,7 +232,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --native --ref 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
 
 function SvgFile({ svgRef, ...props }) {
@@ -252,7 +252,7 @@ export default ForwardRef
 `;
 
 exports[`cli should support various args: --native 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
 
 function SvgFile(props) {
@@ -269,7 +269,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --no-dimensions 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -285,7 +285,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --no-prettier 1`] = `
-"import React from \\"react\\";
+"import * as React from \\"react\\";
 
 function SvgFile(props) {
   return <svg width={48} height={1} {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
@@ -296,7 +296,7 @@ export default SvgFile;
 `;
 
 exports[`cli should support various args: --no-svgo 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -337,7 +337,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --ref 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile({ svgRef, ...props }) {
   return (
@@ -356,7 +356,7 @@ export default ForwardRef
 `;
 
 exports[`cli should support various args: --replace-attr-values "#063855=currentColor" 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -372,7 +372,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --svg-props "hidden={true},id=hello" 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -388,7 +388,7 @@ export default SvgFile
 `;
 
 exports[`cli should support various args: --title-prop 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile({ title, titleId, ...props }) {
   return (
@@ -426,7 +426,7 @@ __fixtures__/withSvgrRc/file.svg -> __fixtures_build__/whole/withSvgrRc/File.js"
 `;
 
 exports[`cli should work with a simple file 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -442,7 +442,7 @@ export default SvgFile
 `;
 
 exports[`cli should work with stdin 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgComponent(props) {
   return (

diff --git a/packages/cli/src/__snapshots__/util.test.js.snap b/packages/cli/src/__snapshots__/util.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`util #convertFile should convert a file 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (
@@ -16,7 +16,7 @@ export default SvgFile
 `;
 
 exports[`util #convertFile should support a custom config path 1`] = `
-"import React from 'react'
+"import * as React from 'react'
 
 function SvgFile(props) {
   return (