From 7ef0b027ca8d3e2b93610d1f62ff3e4060f4ab3d Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Sun, 23 Feb 2020 14:04:31 +0300 Subject: [PATCH] Migrate to import * as React from 'react' Ref https://github.com/facebook/react/pull/18102 --- README.md | 2 +- __fixtures__/template.js | 2 +- .../src/index.test.js | 16 +++---- .../src/util.js | 2 +- packages/babel-preset/src/index.test.js | 14 +++--- .../cli/src/__snapshots__/index.test.js.snap | 44 ++++++++--------- .../cli/src/__snapshots__/util.test.js.snap | 4 +- .../src/__snapshots__/convert.test.js.snap | 48 +++++++++---------- .../src/__snapshots__/index.test.js.snap | 12 +++-- packages/plugin-jsx/src/index.test.js | 4 +- .../src/__snapshots__/index.test.js.snap | 8 ++-- .../src/__snapshots__/index.test.js.snap | 6 +-- website/src/components/playground/CodeFund.js | 2 +- website/src/components/playground/DropArea.js | 2 +- website/src/components/playground/Editor.js | 2 +- website/src/components/playground/Loading.js | 2 +- .../src/components/playground/Playground.js | 2 +- website/src/components/playground/Query.js | 2 +- website/src/components/playground/Settings.js | 2 +- .../playground/SettingsFieldBoolean.js | 2 +- .../playground/SettingsFieldEnum.js | 2 +- .../playground/SettingsFieldInteger.js | 2 +- .../playground/SettingsFieldString.js | 2 +- .../components/playground/SettingsGroup.js | 2 +- .../playground/controls/CheckboxControl.js | 2 +- .../playground/controls/InputControl.js | 2 +- .../playground/controls/RadioControl.js | 2 +- .../playground/controls/TextareaControl.js | 2 +- .../playground/icons/ChevronLeft.js | 2 +- website/src/pages/docs/getting-started.mdx | 2 +- website/src/pages/docs/jest.mdx | 2 +- website/src/pages/docs/testing.mdx | 2 +- website/src/pages/docs/typescript.mdx | 4 +- website/src/pages/index.js | 2 +- .../smooth-doc/components/ThemeProvider.js | 2 +- 35 files changed, 106 insertions(+), 104 deletions(-) diff --git a/README.md b/README.md index a8513733..99a16ba6 100644 --- 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 => ( diff --git a/__fixtures__/template.js b/__fixtures__/template.js index 05573947..f87ee335 100644 --- 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 index d8760f38..e9f126a2 100644 --- 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
; @@ -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 = () =>
; @@ -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
; @@ -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 index 026b9aba..6a69a556 100644 --- 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 index b26927b0..4bf5e611 100644 --- 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 ; @@ -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 ; @@ -151,7 +151,7 @@ describe('preset', () => { }, }), ).toMatchInlineSnapshot(` - "import React from \\"react\\"; + "import * as React from \\"react\\"; function SvgComponent(props) { return ; diff --git a/packages/cli/src/__snapshots__/index.test.js.snap b/packages/cli/src/__snapshots__/index.test.js.snap index 8cfb8bc2..12e44574 100644 --- 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 {\\"Rectangle 5\\"}{\\"Created with Sketch.\\"}; @@ -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 ; @@ -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 index 3ba1f490..c4cd1ca5 100644 --- 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 ( diff --git a/packages/core/src/__snapshots__/convert.test.js.snap b/packages/core/src/__snapshots__/convert.test.js.snap index cfb5e1ac..e1d7f883 100644 --- a/packages/core/src/__snapshots__/convert.test.js.snap +++ b/packages/core/src/__snapshots__/convert.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`convert config should support options 0 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -24,7 +24,7 @@ export default SvgComponent `; exports[`convert config should support options 1 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent() { return ( @@ -47,7 +47,7 @@ export default SvgComponent `; exports[`convert config should support options 2 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -70,7 +70,7 @@ export default SvgComponent `; exports[`convert config should support options 3 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -93,7 +93,7 @@ export default SvgComponent `; exports[`convert config should support options 4 1`] = ` -"import React from 'react' +"import * as React from 'react' import Svg, { G, Path } from 'react-native-svg' function SvgComponent(props) { @@ -117,7 +117,7 @@ export default SvgComponent `; exports[`convert config should support options 5 1`] = ` -"import React from 'react' +"import * as React from 'react' import { Svg } from 'expo' function SvgComponent(props) { @@ -141,7 +141,7 @@ export default SvgComponent `; exports[`convert config should support options 6 1`] = ` -"import React from 'react' +"import * as React from 'react' import Svg, { G, Path } from 'react-native-svg' function SvgComponent(props) { @@ -165,7 +165,7 @@ export default SvgComponent `; exports[`convert config should support options 7 1`] = ` -"import React from 'react' +"import * as React from 'react' import Svg, { G, Path } from 'react-native-svg' function SvgComponent() { @@ -189,7 +189,7 @@ export default SvgComponent `; exports[`convert config should support options 8 1`] = ` -"import React from 'react' +"import * as React from 'react' import Svg, { G, Path } from 'react-native-svg' function SvgComponent({ svgRef, ...props }) { @@ -216,7 +216,7 @@ export default ForwardRef `; exports[`convert config should support options 9 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent({ svgRef, ...props }) { return ( @@ -242,7 +242,7 @@ export default ForwardRef `; exports[`convert config should support options 10 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -265,7 +265,7 @@ export default SvgComponent `; exports[`convert config should support options 11 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -288,7 +288,7 @@ export default SvgComponent `; exports[`convert config should support options 12 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -311,7 +311,7 @@ export default SvgComponent `; exports[`convert config should support options 13 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -341,7 +341,7 @@ export default SvgComponent `; exports[`convert config should support options 14 1`] = ` -"import React from \\"react\\"; +"import * as React from \\"react\\"; function SvgComponent(props) { return ; @@ -358,7 +358,7 @@ export default noop `; exports[`convert config should support options 16 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent({ title, titleId, ...props }) { return ( @@ -382,7 +382,7 @@ export default SvgComponent `; exports[`convert config should support options 17 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -406,7 +406,7 @@ export default MemoSvgComponent `; exports[`convert config titleProp: without title added 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent({ title, titleId, ...props }) { return ( @@ -430,7 +430,7 @@ export default SvgComponent `; exports[`convert should convert 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -453,7 +453,7 @@ export default SvgComponent `; exports[`convert should convert style attribute 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -500,7 +500,7 @@ export default SvgComponent `; exports[`convert should handle special SVG attributes 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -515,7 +515,7 @@ export default SvgComponent `; exports[`convert should not remove all style tags 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -543,7 +543,7 @@ export default SvgComponent `; exports[`convert should remove null characters 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( @@ -563,7 +563,7 @@ export default SvgComponent `; exports[`convert should remove style tags 1`] = ` -"import React from 'react' +"import * as React from 'react' function SvgComponent(props) { return ( diff --git a/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap b/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap index 9f599a57..b38adbad 100644 --- a/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap +++ b/packages/parcel-plugin-svgr/src/__snapshots__/index.test.js.snap @@ -10,9 +10,11 @@ Object.defineProperty(exports, \\"__esModule\\", { }); exports.default = void 0; -var _react = _interopRequireDefault(require(\\"react\\")); +var React = _interopRequireWildcard(require(\\"react\\")); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +function _getRequireWildcardCache() { if (typeof WeakMap !== \\"function\\") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== \\"object\\" && typeof obj !== \\"function\\") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _extends() { _extends = Object.assign || function (target) { @@ -34,18 +36,18 @@ function _extends() { var _ref = /*#__PURE__*/ -_react.default.createElement(\\"g\\", { +React.createElement(\\"g\\", { stroke: \\"#063855\\", strokeWidth: 2, fill: \\"none\\", fillRule: \\"evenodd\\", strokeLinecap: \\"square\\" -}, _react.default.createElement(\\"path\\", { +}, React.createElement(\\"path\\", { d: \\"M51 37L37 51M51 51L37 37\\" })); function SvgIcon(props) { - return _react.default.createElement(\\"svg\\", _extends({ + return React.createElement(\\"svg\\", _extends({ width: 88, height: 88 }, props), _ref); diff --git a/packages/plugin-jsx/src/index.test.js b/packages/plugin-jsx/src/index.test.js index 19a953b3..9f3bb85a 100644 --- a/packages/plugin-jsx/src/index.test.js +++ b/packages/plugin-jsx/src/index.test.js @@ -20,7 +20,7 @@ describe('plugin', () => { it('should transform code', () => { const result = jsx(svgBaseCode, {}, { componentName: 'SvgComponent' }) expect(result).toMatchInlineSnapshot(` - "import React from \\"react\\"; + "import * as React from \\"react\\"; function SvgComponent() { return {\\"Dismiss\\"}{\\"Created with Sketch.\\"}; @@ -49,7 +49,7 @@ describe('plugin', () => { { componentName: 'SvgComponent' }, ) expect(result).toMatchInlineSnapshot(` - "import React from \\"react\\"; + "import * as React from \\"react\\"; function SvgComponent() { return {\\"Created with Sketch.\\"}; diff --git a/packages/rollup/src/__snapshots__/index.test.js.snap b/packages/rollup/src/__snapshots__/index.test.js.snap index fa24d66d..8c47fdc9 100644 --- a/packages/rollup/src/__snapshots__/index.test.js.snap +++ b/packages/rollup/src/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[`rollup loader should convert file 1`] = ` "function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } -import React from \\"react\\"; +import * as React from \\"react\\"; var _ref = /*#__PURE__*/ @@ -24,7 +24,7 @@ export default SvgFile;" `; exports[`rollup loader should convert file with previousExport of image plugin 1`] = ` -"import React from \\"react\\"; +"import * as React from \\"react\\"; function SvgFile(props) { return ; @@ -37,7 +37,7 @@ export { SvgFile as ReactComponent };" `; exports[`rollup loader should convert file with previousExport of url plugin 1`] = ` -"import React from \\"react\\"; +"import * as React from \\"react\\"; function SvgFile(props) { return ; @@ -48,7 +48,7 @@ export { SvgFile as ReactComponent };" `; exports[`rollup loader should convert file without babel 1`] = ` -"import React from \\"react\\"; +"import * as React from \\"react\\"; function SvgFile(props) { return ; diff --git a/packages/webpack/src/__snapshots__/index.test.js.snap b/packages/webpack/src/__snapshots__/index.test.js.snap index 7784f382..c9413fdc 100644 --- a/packages/webpack/src/__snapshots__/index.test.js.snap +++ b/packages/webpack/src/__snapshots__/index.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`webpack loader should convert file (babel: false) 1`] = ` -"import React from \\"react\\"; +"import * as React from \\"react\\"; function SvgIcon() { return React.createElement(\\"svg\\", { @@ -22,7 +22,7 @@ export default SvgIcon;" `; exports[`webpack loader should convert file 1`] = ` -"import React from \\"react\\"; +"import * as React from \\"react\\"; var _ref = /*#__PURE__*/ @@ -47,7 +47,7 @@ export default SvgIcon;" `; exports[`webpack loader should support url-loader 1`] = ` -"import React from \\"react\\"; +"import * as React from \\"react\\"; var _ref = /*#__PURE__*/ diff --git a/website/src/components/playground/CodeFund.js b/website/src/components/playground/CodeFund.js index 45a23d10..62845d29 100644 --- a/website/src/components/playground/CodeFund.js +++ b/website/src/components/playground/CodeFund.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' function useScript(src) { React.useEffect(() => { diff --git a/website/src/components/playground/DropArea.js b/website/src/components/playground/DropArea.js index a0452a79..fb4bc357 100644 --- a/website/src/components/playground/DropArea.js +++ b/website/src/components/playground/DropArea.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import styled from '@xstyled/styled-components' const FullWidth = styled.div` diff --git a/website/src/components/playground/Editor.js b/website/src/components/playground/Editor.js index 175b96d3..381c7487 100644 --- a/website/src/components/playground/Editor.js +++ b/website/src/components/playground/Editor.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { useColorMode } from '@xstyled/styled-components' import AceEditor from 'react-ace' diff --git a/website/src/components/playground/Loading.js b/website/src/components/playground/Loading.js index 5b5235cf..b7cb3d9d 100644 --- a/website/src/components/playground/Loading.js +++ b/website/src/components/playground/Loading.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import styled, { keyframes } from 'styled-components' import { graphql, StaticQuery } from 'gatsby' diff --git a/website/src/components/playground/Playground.js b/website/src/components/playground/Playground.js index 4e81818d..26b2f406 100644 --- a/website/src/components/playground/Playground.js +++ b/website/src/components/playground/Playground.js @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/accessible-emoji */ -import React from 'react' +import * as React from 'react' import styled, { Box, createGlobalStyle, diff --git a/website/src/components/playground/Query.js b/website/src/components/playground/Query.js index e68c6f8e..c02d3445 100644 --- a/website/src/components/playground/Query.js +++ b/website/src/components/playground/Query.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import qs from 'query-string' import { createBrowserHistory } from 'history' diff --git a/website/src/components/playground/Settings.js b/website/src/components/playground/Settings.js index 028c1ff2..4f745d37 100644 --- a/website/src/components/playground/Settings.js +++ b/website/src/components/playground/Settings.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import styled, { up, css } from '@xstyled/styled-components' import { Form, FormSpy } from 'react-final-form' import { SettingsFieldBoolean } from './SettingsFieldBoolean' diff --git a/website/src/components/playground/SettingsFieldBoolean.js b/website/src/components/playground/SettingsFieldBoolean.js index 473cba67..2bf6657d 100644 --- a/website/src/components/playground/SettingsFieldBoolean.js +++ b/website/src/components/playground/SettingsFieldBoolean.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Box } from '@xstyled/styled-components' import { FormCheck, FormCheckLabel } from '@smooth-ui/core-sc' import { CheckboxControl } from './controls/CheckboxControl' diff --git a/website/src/components/playground/SettingsFieldEnum.js b/website/src/components/playground/SettingsFieldEnum.js index 1c60ce35..34b3ff0d 100644 --- a/website/src/components/playground/SettingsFieldEnum.js +++ b/website/src/components/playground/SettingsFieldEnum.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Box } from '@xstyled/styled-components' import { FormField, FormCheck, FormCheckLabel } from '@smooth-ui/core-sc' import { RadioControl } from 'components/playground/controls/RadioControl' diff --git a/website/src/components/playground/SettingsFieldInteger.js b/website/src/components/playground/SettingsFieldInteger.js index 6fd799a9..807c8798 100644 --- a/website/src/components/playground/SettingsFieldInteger.js +++ b/website/src/components/playground/SettingsFieldInteger.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Box } from '@xstyled/styled-components' import { FormField } from '@smooth-ui/core-sc' import { InputControl } from './controls/InputControl' diff --git a/website/src/components/playground/SettingsFieldString.js b/website/src/components/playground/SettingsFieldString.js index b93a4322..8f3ba06a 100644 --- a/website/src/components/playground/SettingsFieldString.js +++ b/website/src/components/playground/SettingsFieldString.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Box } from '@xstyled/styled-components' import { FormField } from '@smooth-ui/core-sc' import { TextareaControl } from 'components/playground/controls/TextareaControl' diff --git a/website/src/components/playground/SettingsGroup.js b/website/src/components/playground/SettingsGroup.js index c27b007b..fcdcd14f 100644 --- a/website/src/components/playground/SettingsGroup.js +++ b/website/src/components/playground/SettingsGroup.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import styled, { up, css, Box } from '@xstyled/styled-components' import { useHiddenState, Hidden, HiddenDisclosure } from 'reakit/Hidden' import { ChevronLeft } from 'components/playground/icons/ChevronLeft' diff --git a/website/src/components/playground/controls/CheckboxControl.js b/website/src/components/playground/controls/CheckboxControl.js index b693888d..9f4c7284 100644 --- a/website/src/components/playground/controls/CheckboxControl.js +++ b/website/src/components/playground/controls/CheckboxControl.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Field } from 'react-final-form' import { Checkbox } from '@smooth-ui/core-sc' diff --git a/website/src/components/playground/controls/InputControl.js b/website/src/components/playground/controls/InputControl.js index 19347654..45ec9272 100644 --- a/website/src/components/playground/controls/InputControl.js +++ b/website/src/components/playground/controls/InputControl.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Field } from 'react-final-form' import { Input } from '@smooth-ui/core-sc' diff --git a/website/src/components/playground/controls/RadioControl.js b/website/src/components/playground/controls/RadioControl.js index 8d2c4a1e..baef9cef 100644 --- a/website/src/components/playground/controls/RadioControl.js +++ b/website/src/components/playground/controls/RadioControl.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Field } from 'react-final-form' import { Radio } from '@smooth-ui/core-sc' diff --git a/website/src/components/playground/controls/TextareaControl.js b/website/src/components/playground/controls/TextareaControl.js index e5397969..cc422028 100644 --- a/website/src/components/playground/controls/TextareaControl.js +++ b/website/src/components/playground/controls/TextareaControl.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Field } from 'react-final-form' import { Textarea } from '@smooth-ui/core-sc' diff --git a/website/src/components/playground/icons/ChevronLeft.js b/website/src/components/playground/icons/ChevronLeft.js index 419ca82f..42e43059 100644 --- a/website/src/components/playground/icons/ChevronLeft.js +++ b/website/src/components/playground/icons/ChevronLeft.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' export const ChevronLeft = props => ( ( diff --git a/website/src/pages/docs/jest.mdx b/website/src/pages/docs/jest.mdx index d63ed1be..653d1504 100644 --- a/website/src/pages/docs/jest.mdx +++ b/website/src/pages/docs/jest.mdx @@ -13,7 +13,7 @@ Create a simple mock for the svgr loader and map this in the jest config: Create a mock file `__mocks__/svgrMock.js`: ```jsx -import React from 'react' +import * as React from 'react' export default 'SvgrURL' export const ReactComponent = 'div' diff --git a/website/src/pages/docs/testing.mdx b/website/src/pages/docs/testing.mdx index e9d4c31d..8da252ff 100644 --- a/website/src/pages/docs/testing.mdx +++ b/website/src/pages/docs/testing.mdx @@ -13,7 +13,7 @@ This section helps you to integrate SVGR with your test framework. Create a mock file: ```js -import React from 'react' +import * as React from 'react' export default 'SvgrURL' diff --git a/website/src/pages/docs/typescript.mdx b/website/src/pages/docs/typescript.mdx index 3e3f4b0d..c8ba4e93 100644 --- a/website/src/pages/docs/typescript.mdx +++ b/website/src/pages/docs/typescript.mdx @@ -46,8 +46,8 @@ module.exports = { ) { const typeScriptTpl = template.smart({ plugins: ['typescript'] }) return typeScriptTpl.ast` - import React, { SVGProps } from 'react'; - const ${componentName} = (props: SVGProps) => ${jsx}; + import * as React from 'react'; + const ${componentName} = (props: React.SVGProps) => ${jsx}; export default ${componentName}; ` }, diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 49282985..aeb01f89 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -1,6 +1,6 @@ /* eslint-disable react/jsx-one-expression-per-line */ /* eslint-disable jsx-a11y/accessible-emoji */ -import React from 'react' +import * as React from 'react' import { Box } from '@xstyled/styled-components' import Helmet from 'react-helmet' import { HomeHero, ShowCase, BaseLayout } from 'smooth-doc/components' diff --git a/website/src/smooth-doc/components/ThemeProvider.js b/website/src/smooth-doc/components/ThemeProvider.js index 751df5cf..7b398c36 100644 --- a/website/src/smooth-doc/components/ThemeProvider.js +++ b/website/src/smooth-doc/components/ThemeProvider.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { ThemeProvider as SCThemeProvider } from '@xstyled/styled-components' import deepmerge from 'deepmerge' import { theme as suiTheme } from '@smooth-ui/core-sc'