From 187282977af841cd5a2243a23abba72b20eec2fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 1 Dec 2021 21:20:32 +0100 Subject: [PATCH] fix: fix previous export system Fixes #635 --- .../src/__snapshots__/index.test.ts.snap | 10 ++++++++-- .../src/index.test.ts | 4 +++- .../src/types.ts | 2 +- .../src/variables.ts | 13 +++++++++++-- .../rollup/src/__snapshots__/index.test.ts.snap | 8 ++++++-- packages/rollup/src/index.ts | 7 ++----- .../webpack/src/__snapshots__/index.test.ts.snap | 1 + 7 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap index a11759bb..a5d510b6 100644 --- a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap +++ b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap @@ -119,7 +119,10 @@ exports[`plugin javascript with "namedExport" option and "previousExport" state const SvgComponent = () => ; -export { SvgComponent as Component };" +export { SvgComponent as Component }; +var img = new Image(); +img.src = '...'; +export default img;" `; exports[`plugin javascript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = ` @@ -336,7 +339,10 @@ exports[`plugin typescript with "namedExport" option and "previousExport" state const SvgComponent = () => ; -export { SvgComponent as Component };" +export { SvgComponent as Component }; +var img = new Image(); +img.src = '...'; +export default img;" `; exports[`plugin typescript with "native" and "expandProps" option adds import from "react-native-svg" and adds props 1`] = ` diff --git a/packages/babel-plugin-transform-svg-component/src/index.test.ts b/packages/babel-plugin-transform-svg-component/src/index.test.ts index f4e5f894..61d67c90 100644 --- a/packages/babel-plugin-transform-svg-component/src/index.test.ts +++ b/packages/babel-plugin-transform-svg-component/src/index.test.ts @@ -158,7 +158,9 @@ describe('plugin', () => { const { code } = testPlugin(language)('', { state: { componentName: 'SvgComponent', - caller: { previousExport: 'export default "logo.svg";' }, + caller: { + previousExport: `var img = new Image(); img.src = '...'; export default img;`, + }, }, namedExport: 'Component', }) diff --git a/packages/babel-plugin-transform-svg-component/src/types.ts b/packages/babel-plugin-transform-svg-component/src/types.ts index b4634350..8c1c6651 100644 --- a/packages/babel-plugin-transform-svg-component/src/types.ts +++ b/packages/babel-plugin-transform-svg-component/src/types.ts @@ -6,7 +6,7 @@ export interface TemplateVariables { interfaces: t.TSInterfaceDeclaration[] props: (t.ObjectPattern | t.Identifier)[] imports: t.ImportDeclaration[] - exports: (t.VariableDeclaration | t.ExportDeclaration)[] + exports: (t.VariableDeclaration | t.ExportDeclaration | t.Statement)[] jsx: t.JSXElement } diff --git a/packages/babel-plugin-transform-svg-component/src/variables.ts b/packages/babel-plugin-transform-svg-component/src/variables.ts index 54f24ce6..844e6383 100644 --- a/packages/babel-plugin-transform-svg-component/src/variables.ts +++ b/packages/babel-plugin-transform-svg-component/src/variables.ts @@ -1,4 +1,4 @@ -import { types as t } from '@babel/core' +import { types as t, template } from '@babel/core' import type { Options, TemplateVariables, JSXRuntimeImport } from './types' const tsOptionalPropertySignature = ( @@ -98,7 +98,8 @@ export const getVariables = ({ const interfaces: t.TSInterfaceDeclaration[] = [] const props: (t.Identifier | t.ObjectPattern)[] = [] const imports: t.ImportDeclaration[] = [] - const exports: (t.VariableDeclaration | t.ExportDeclaration)[] = [] + const exports: (t.VariableDeclaration | t.ExportDeclaration | t.Statement)[] = + [] const ctx = { importSource: opts.importSource ?? defaultImportSource, exportIdentifier: t.identifier(opts.state.componentName), @@ -234,6 +235,14 @@ export const getVariables = ({ t.exportSpecifier(ctx.exportIdentifier, t.identifier(opts.namedExport)), ]), ) + if (opts.state.caller?.previousExport) { + const previousExportAst = template.ast(opts.state.caller.previousExport) + exports.push( + ...(Array.isArray(previousExportAst) + ? previousExportAst + : [previousExportAst]), + ) + } } else { exports.push(t.exportDefaultDeclaration(ctx.exportIdentifier)) } diff --git a/packages/rollup/src/__snapshots__/index.test.ts.snap b/packages/rollup/src/__snapshots__/index.test.ts.snap index 0bc11c9a..00a1d3a9 100644 --- a/packages/rollup/src/__snapshots__/index.test.ts.snap +++ b/packages/rollup/src/__snapshots__/index.test.ts.snap @@ -27,7 +27,10 @@ exports[`rollup loader should convert file with previousExport of image plugin 1 const SvgFile = props => ; -export { SvgFile as ReactComponent };" +export { SvgFile as ReactComponent }; +var img = new Image(); +img.src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSIxcHgiIHZpZXdCb3g9IjAgMCA0OCAxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UmVjdGFuZ2xlIDU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iMTktU2VwYXJhdG9yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI5LjAwMDAwMCwgLTE1Ni4wMDAwMDApIiBmaWxsPSIjMDYzODU1Ij4KICAgICAgICAgICAgPGcgaWQ9IkNvbnRyb2xzL1NldHRpbmdzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wMDAwMDAsIDAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDY0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQuMDAwMDAwLCA1Ni4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01IiB4PSIyNSIgeT0iMzYiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo='; +export default img;" `; exports[`rollup loader should convert file with previousExport of url plugin 1`] = ` @@ -35,7 +38,8 @@ exports[`rollup loader should convert file with previousExport of url plugin 1`] const SvgFile = props => ; -export { SvgFile as ReactComponent };" +export { SvgFile as ReactComponent }; +export default \\"data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20width%3D%2248px%22%20height%3D%221px%22%20viewBox%3D%220%200%2048%201%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%20%20%20%20%3Ctitle%3ERectangle%205%3C%2Ftitle%3E%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%2219-Separator%22%20transform%3D%22translate%28-129.000000%2C%20-156.000000%29%22%20fill%3D%22%23063855%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Controls%2FSettings%22%20transform%3D%22translate%2880.000000%2C%200.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Content%22%20transform%3D%22translate%280.000000%2C%2064.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%2824.000000%2C%2056.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-5%22%20x%3D%2225%22%20y%3D%2236%22%20width%3D%2248%22%20height%3D%221%22%3E%3C%2Frect%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E\\";" `; exports[`rollup loader should convert file without babel 1`] = ` diff --git a/packages/rollup/src/index.ts b/packages/rollup/src/index.ts index 7d0438fa..753f5ee3 100644 --- a/packages/rollup/src/index.ts +++ b/packages/rollup/src/index.ts @@ -41,6 +41,7 @@ export interface Options extends Config { } const plugin: PluginImpl = (options = {}) => { + const EXPORT_REGEX = /(module\.exports *= *|export default)/ const filter = createFilter(options.include || '**/*.svg', options.exclude) const { babel = true } = options @@ -52,11 +53,7 @@ const plugin: PluginImpl = (options = {}) => { const load = fs.readFileSync(id, 'utf8') - const exportMatches = - data.match(/^module.exports\s*=\s*(.*)/) || - data.match(/export\sdefault\s(.*)/) - - const previousExport = exportMatches ? data : null + const previousExport = EXPORT_REGEX.test(data) ? data : null const jsCode = await transform(load, options, { filePath: id, diff --git a/packages/webpack/src/__snapshots__/index.test.ts.snap b/packages/webpack/src/__snapshots__/index.test.ts.snap index fbf7d199..1750e3a1 100644 --- a/packages/webpack/src/__snapshots__/index.test.ts.snap +++ b/packages/webpack/src/__snapshots__/index.test.ts.snap @@ -22,6 +22,7 @@ var SvgIcon = function SvgIcon() { }; export { SvgIcon as ReactComponent }; +export default \\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI4OHB4IiB2aWV3Qm94PSIwIDAgODggODgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5EaXNtaXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkJsb2NrcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRpc21pc3MiIHN0cm9rZT0iIzA2Mzg1NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUxLDM3IEwzNyw1MSIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01MSw1MSBMMzcsMzciIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==\\"; export default \\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI4OHB4IiB2aWV3Qm94PSIwIDAgODggODgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjIgKDQ0NDk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5EaXNtaXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkJsb2NrcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9IkRpc21pc3MiIHN0cm9rZT0iIzA2Mzg1NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBhdGggZD0iTTUxLDM3IEwzNyw1MSIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik01MSw1MSBMMzcsMzciIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==\\"" `;