From f18ea80dda0eeda8863d44875a435892a36e8705 Mon Sep 17 00:00:00 2001 From: Ray Wong Date: Fri, 17 Sep 2021 05:46:21 +0900 Subject: [PATCH] feat: add option to explicitly use named export (#584) --- .../src/__snapshots__/index.test.js.snap | 20 ++++++++++++++++ .../src/index.test.js | 14 +++++++++++ .../src/util.js | 5 +++- .../src/__snapshots__/config.test.js.snap | 8 +++++++ .../src/__snapshots__/convert.test.js.snap | 23 +++++++++++++++++++ packages/core/src/config.js | 1 + packages/core/src/convert.test.js | 1 + packages/rollup/README.md | 4 ++++ packages/webpack/README.md | 4 ++++ website/src/pages/docs/rollup.mdx | 4 ++++ website/src/pages/docs/webpack.mdx | 4 ++++ 11 files changed, 87 insertions(+), 1 deletion(-) 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 b25e0fee..d02e28b8 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 @@ -65,6 +65,16 @@ const MemoSvgComponent = React.memo(SvgComponent); export default MemoSvgComponent;" `; +exports[`plugin javascript with "namedExport" and "exportType" option and without "previousExport" state exports via named export 1`] = ` +"import * as React from \\"react\\"; + +function SvgComponent() { + return ; +} + +export { SvgComponent as ReactComponent };" +`; + exports[`plugin javascript with "namedExport" option and "previousExport" state has custom named export 1`] = ` "import * as React from \\"react\\"; @@ -243,6 +253,16 @@ const MemoSvgComponent = React.memo(SvgComponent); export default MemoSvgComponent;" `; +exports[`plugin typescript with "namedExport" and "exportType" option and without "previousExport" state exports via named export 1`] = ` +"import * as React from \\"react\\"; + +function SvgComponent() { + return ; +} + +export { SvgComponent as ReactComponent };" +`; + exports[`plugin typescript with "namedExport" option and "previousExport" state has custom named export 1`] = ` "import * as React from \\"react\\"; 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 916c9516..c1152d17 100644 --- a/packages/babel-plugin-transform-svg-component/src/index.test.js +++ b/packages/babel-plugin-transform-svg-component/src/index.test.js @@ -162,6 +162,20 @@ describe('plugin', () => { }) }) + describe('with "namedExport" and "exportType" option and without "previousExport" state', () => { + it('exports via named export', () => { + const { code } = testPlugin(language)('', { + state: { + componentName: 'SvgComponent', + caller: { previousExport: null }, + }, + namedExport: 'ReactComponent', + exportType: 'named', + }) + expect(code).toMatchSnapshot() + }) + }) + describe('custom templates', () => { it('support basic template', () => { const { code } = testPlugin(language)('', { diff --git a/packages/babel-plugin-transform-svg-component/src/util.js b/packages/babel-plugin-transform-svg-component/src/util.js index ce708eca..b691bd72 100644 --- a/packages/babel-plugin-transform-svg-component/src/util.js +++ b/packages/babel-plugin-transform-svg-component/src/util.js @@ -232,7 +232,10 @@ export const getExport = ({ template }, opts) => { }) } - result += `export default ${exportName}` + result += + opts.exportType === 'named' + ? `export { ${exportName} as ${opts.namedExport} }` + : `export default ${exportName}` return template.ast(result, { plugins, }) diff --git a/packages/core/src/__snapshots__/config.test.js.snap b/packages/core/src/__snapshots__/config.test.js.snap index 4abb423f..a0b3ea69 100644 --- a/packages/core/src/__snapshots__/config.test.js.snap +++ b/packages/core/src/__snapshots__/config.test.js.snap @@ -4,6 +4,7 @@ exports[`svgo async #loadConfig [async] should load config using filePath 1`] = Object { "dimensions": true, "expandProps": "end", + "exportType": "default", "icon": true, "memo": false, "namedExport": "ReactComponent", @@ -33,6 +34,7 @@ exports[`svgo async #loadConfig [async] should not load config with "runtimeConf Object { "dimensions": true, "expandProps": "end", + "exportType": "default", "icon": true, "memo": false, "namedExport": "ReactComponent", @@ -63,6 +65,7 @@ exports[`svgo async #loadConfig [async] should use default config without state. Object { "dimensions": false, "expandProps": "end", + "exportType": "default", "icon": false, "memo": false, "namedExport": "ReactComponent", @@ -86,6 +89,7 @@ exports[`svgo async #loadConfig [async] should work with custom config path 1`] Object { "dimensions": true, "expandProps": "end", + "exportType": "default", "icon": true, "memo": false, "namedExport": "ReactComponent", @@ -115,6 +119,7 @@ exports[`svgo sync #loadConfig [sync] should load config using filePath 1`] = ` Object { "dimensions": true, "expandProps": "end", + "exportType": "default", "icon": true, "memo": false, "namedExport": "ReactComponent", @@ -144,6 +149,7 @@ exports[`svgo sync #loadConfig [sync] should not load config with "runtimeConfig Object { "dimensions": true, "expandProps": "end", + "exportType": "default", "icon": true, "memo": false, "namedExport": "ReactComponent", @@ -174,6 +180,7 @@ exports[`svgo sync #loadConfig [sync] should use default config without state.fi Object { "dimensions": false, "expandProps": "end", + "exportType": "default", "icon": false, "memo": false, "namedExport": "ReactComponent", @@ -197,6 +204,7 @@ exports[`svgo sync #loadConfig [sync] should work with custom config path 1`] = Object { "dimensions": true, "expandProps": "end", + "exportType": "default", "icon": true, "memo": false, "namedExport": "ReactComponent", diff --git a/packages/core/src/__snapshots__/convert.test.js.snap b/packages/core/src/__snapshots__/convert.test.js.snap index 2b1ca4c7..84c535ea 100644 --- a/packages/core/src/__snapshots__/convert.test.js.snap +++ b/packages/core/src/__snapshots__/convert.test.js.snap @@ -69,6 +69,29 @@ export default SvgComponent " `; +exports[`convert config should support options {"exportType":"named"} 1`] = ` +"import * as React from 'react' + +function SvgComponent(props) { + return ( + + + + + + ) +} + +export { SvgComponent as ReactComponent } +" +`; + exports[`convert config should support options {"icon":true} 1`] = ` "import * as React from 'react' diff --git a/packages/core/src/config.js b/packages/core/src/config.js index a60682f2..3318d4b1 100644 --- a/packages/core/src/config.js +++ b/packages/core/src/config.js @@ -19,6 +19,7 @@ export const DEFAULT_CONFIG = { runtimeConfig: true, plugins: null, namedExport: 'ReactComponent', + exportType: 'default', } const explorer = cosmiconfig('svgr', { diff --git a/packages/core/src/convert.test.js b/packages/core/src/convert.test.js index ad04b1b3..8d6cff20 100644 --- a/packages/core/src/convert.test.js +++ b/packages/core/src/convert.test.js @@ -313,6 +313,7 @@ describe('convert', () => { namedExport: 'Component', state: { caller: { previousExport: 'export default "logo.svg";' } }, }, + { exportType: 'named' }, ] test.each(configs)('should support options %j', async (config) => { diff --git a/packages/rollup/README.md b/packages/rollup/README.md index c2604db3..95837158 100644 --- a/packages/rollup/README.md +++ b/packages/rollup/README.md @@ -65,6 +65,10 @@ const App = () => ( The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option. +Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export. + +If you prefer named export in any case, you may set the `exportType` option to `named`. + ### Use your own Babel configuration By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/smooth-code/svgr/blob/master/packages/rollup/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options. diff --git a/packages/webpack/README.md b/packages/webpack/README.md index 7acb26d5..d83bd74d 100644 --- a/packages/webpack/README.md +++ b/packages/webpack/README.md @@ -77,6 +77,10 @@ const App = () => ( The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option. +Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export. + +If you prefer named export in any case, you may set the `exportType` option to `named`. + ### Use your own Babel configuration By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/master/packages/webpack/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options. diff --git a/website/src/pages/docs/rollup.mdx b/website/src/pages/docs/rollup.mdx index b9bdce59..d81c40bd 100644 --- a/website/src/pages/docs/rollup.mdx +++ b/website/src/pages/docs/rollup.mdx @@ -75,6 +75,10 @@ const App = () => ( The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option. +Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export. + +If you prefer named export in any case, you may set the `exportType` option to `named`. + ### Use your own Babel configuration By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/gregberge/svgr/blob/master/packages/rollup/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options. diff --git a/website/src/pages/docs/webpack.mdx b/website/src/pages/docs/webpack.mdx index 1929bcc8..c9c97ef3 100644 --- a/website/src/pages/docs/webpack.mdx +++ b/website/src/pages/docs/webpack.mdx @@ -83,6 +83,10 @@ const App = () => ( The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option. +Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export. + +If you prefer named export in any case, you may set the `exportType` option to `named`. + ### Use your own Babel configuration By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/master/packages/webpack/src/index.js). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.