Skip to content

Add option to explicitly use named export #584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gregberge merged 1 commit into from
Sep 16, 2021
Merged

Add option to explicitly use named export #584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <svg><g /></svg>;
}

export { SvgComponent as ReactComponent };"
`;

exports[`plugin javascript with "namedExport" option and "previousExport" state has custom named export 1`] = `
"import * as React from \\"react\\";

Expand Down Expand Up @@ -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 <svg><g /></svg>;
}

export { SvgComponent as ReactComponent };"
`;

exports[`plugin typescript with "namedExport" option and "previousExport" state has custom named export 1`] = `
"import * as React from \\"react\\";

Expand Down
14 changes: 14 additions & 0 deletions packages/babel-plugin-transform-svg-component/src/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)('<svg><g /></svg>', {
state: {
componentName: 'SvgComponent',
caller: { previousExport: null },
},
namedExport: 'ReactComponent',
exportType: 'named',
})
expect(code).toMatchSnapshot()
})
})

describe('custom templates', () => {
it('support basic template', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
Expand Down
5 changes: 4 additions & 1 deletion packages/babel-plugin-transform-svg-component/src/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
Expand Down
8 changes: 8 additions & 0 deletions packages/core/src/__snapshots__/config.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
23 changes: 23 additions & 0 deletions packages/core/src/__snapshots__/convert.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<svg width={88} height={88} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}>
<g
stroke=\\"#063855\\"
strokeWidth={2}
fill=\\"none\\"
fillRule=\\"evenodd\\"
strokeLinecap=\\"square\\"
>
<path d=\\"M51 37 37 51M51 51 37 37\\" />
</g>
</svg>
)
}

export { SvgComponent as ReactComponent }
"
`;

exports[`convert config should support options {"icon":true} 1`] = `
"import * as React from 'react'

Expand Down
1 change: 1 addition & 0 deletions packages/core/src/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const DEFAULT_CONFIG = {
runtimeConfig: true,
plugins: null,
namedExport: 'ReactComponent',
exportType: 'default',
}

const explorer = cosmiconfig('svgr', {
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/convert.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
4 changes: 4 additions & 0 deletions packages/rollup/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions packages/webpack/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/rollup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/webpack.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down