fix: fix previous export system

Fixes #635
gregberge · Dec 1, 2021 · 1872829 · 1872829
1 parent 66c1eae
commit 1872829
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 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
@@ -119,7 +119,10 @@ exports[`plugin javascript with "namedExport" option and "previousExport" state
 
 const SvgComponent = () => <svg><g /></svg>;
 
-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 = () => <svg><g /></svg>;
 
-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
@@ -158,7 +158,9 @@ describe('plugin', () => {
         const { code } = testPlugin(language)('<svg><g /></svg>', {
           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
@@ -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
@@ -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
@@ -27,15 +27,19 @@ exports[`rollup loader should convert file with previousExport of image plugin 1
 
 const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
-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`] = `
 "import * as React from \\"react\\";
 
 const SvgFile = props => <svg width={48} height={1} xmlns=\\"http://www.w3.org/2000/svg\\" {...props}><path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" /></svg>;
 
-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
@@ -41,6 +41,7 @@ export interface Options extends Config {
 }
 
 const plugin: PluginImpl<Options> = (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> = (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
@@ -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==\\""
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -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==\\""
     `;
@@ Expand Down @@