From bd142fd897c107edbdbcaa12f27eb1bd7d67b3dd Mon Sep 17 00:00:00 2001 From: Nima Date: Fri, 26 Oct 2018 12:20:09 +1300 Subject: [PATCH 1/7] update named-asset-import babel plugin --- .../babel-plugin-named-asset-import/index.js | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js index f1989e5ee06..b1212c19ae8 100644 --- a/packages/babel-plugin-named-asset-import/index.js +++ b/packages/babel-plugin-named-asset-import/index.js @@ -7,6 +7,64 @@ function namedAssetImportPlugin({ types: t }) { return { visitor: { + ExportNamedDeclaration( + path, + { + opts: { loaderMap }, + } + ) { + if (!path.node.source) { + return; + } + + const sourcePath = path.node.source.value; + const ext = extname(sourcePath).substr(1); + + if (visited.has(path.node) || sourcePath.indexOf('!') !== -1) { + return; + } + + if (loaderMap[ext]) { + path.replaceWithMultiple( + path.node.specifiers.map(specifier => { + if (t.isExportDefaultSpecifier(specifier)) { + const newDefaultImport = t.exportDeclaration( + [ + t.exportDefaultSpecifier( + t.identifier(specifier.local.name) + ), + ], + t.stringLiteral(sourcePath) + ); + + visited.add(newDefaultImport); + return newDefaultImport; + } + + const newImport = t.exportNamedDeclaration( + null, + [ + t.exportSpecifier( + t.identifier(specifier.local.name), + t.identifier(specifier.exported.name) + ), + ], + t.stringLiteral( + loaderMap[ext][specifier.local.name] + ? loaderMap[ext][specifier.local.name].replace( + /\[path\]/, + sourcePath + ) + : sourcePath + ) + ); + + visited.add(newImport); + return newImport; + }) + ); + } + }, ImportDeclaration( path, { From 57f37b6170f579a69994855df88400abe1491f26 Mon Sep 17 00:00:00 2001 From: Nima Date: Thu, 1 Nov 2018 10:46:42 +1300 Subject: [PATCH 2/7] add tests to named-asset-import plugin --- .../index.test.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/babel-plugin-named-asset-import/index.test.js b/packages/babel-plugin-named-asset-import/index.test.js index 65ad5513e3e..b15a373b705 100644 --- a/packages/babel-plugin-named-asset-import/index.test.js +++ b/packages/babel-plugin-named-asset-import/index.test.js @@ -46,5 +46,28 @@ pluginTester({ 'import { logoUrl } from "logo.svg";\n' + 'import { ReactComponent as Logo } from "@svgr/webpack?-prettier,-svgo!logo.svg";', }, + namedExport: { + code: 'export { logo } from "logo";', + output: 'export { logo } from "logo";', + }, + namedExportRenamed: { + code: 'export { Url as logo } from "logo";', + output: 'export { Url as logo } from "logo";', + }, + svgNamedExport: { + code: 'export { logo } from "logo.svg";', + output: 'export { logo } from "logo.svg";', + }, + svgReactComponentNamedExport: { + code: 'export { ReactComponent as Logo } from "logo.svg";', + output: + 'export { ReactComponent as Logo } from "@svgr/webpack?-prettier,-svgo!logo.svg";', + }, + svgMultipleExport: { + code: 'export { logoUrl , ReactComponent as Logo } from "logo.svg";', + output: + 'export { logoUrl } from "logo.svg";\n' + + 'export { ReactComponent as Logo } from "@svgr/webpack?-prettier,-svgo!logo.svg";', + }, }, }); From 7a34ba7a2b3f702bd8cc93663a5ee83222b83334 Mon Sep 17 00:00:00 2001 From: Nima Date: Thu, 1 Nov 2018 17:18:49 +1300 Subject: [PATCH 3/7] add more plugin test --- .../index.test.js | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/babel-plugin-named-asset-import/index.test.js b/packages/babel-plugin-named-asset-import/index.test.js index b15a373b705..f14139f0fd6 100644 --- a/packages/babel-plugin-named-asset-import/index.test.js +++ b/packages/babel-plugin-named-asset-import/index.test.js @@ -46,6 +46,18 @@ pluginTester({ 'import { logoUrl } from "logo.svg";\n' + 'import { ReactComponent as Logo } from "@svgr/webpack?-prettier,-svgo!logo.svg";', }, + defaultExport: { + code: 'export default logo;', + output: 'export default logo;', + }, + constExport: { + code: 'export const token = "token";', + output: 'export const token = "token";', + }, + classExport: { + code: 'export class Logo {}', + output: 'export class Logo {}', + }, namedExport: { code: 'export { logo } from "logo";', output: 'export { logo } from "logo";', @@ -54,15 +66,28 @@ pluginTester({ code: 'export { Url as logo } from "logo";', output: 'export { Url as logo } from "logo";', }, + allExport: { + code: 'export * from "logo";', + output: 'export * from "logo";', + }, svgNamedExport: { code: 'export { logo } from "logo.svg";', output: 'export { logo } from "logo.svg";', }, + svgAllExport: { + code: 'export * from "logo.svg";', + output: 'export * from "logo.svg";', + }, svgReactComponentNamedExport: { code: 'export { ReactComponent as Logo } from "logo.svg";', output: 'export { ReactComponent as Logo } from "@svgr/webpack?-prettier,-svgo!logo.svg";', }, + svgReactComponentExport: { + code: 'export { ReactComponent } from "logo.svg";', + output: + 'export { ReactComponent } from "@svgr/webpack?-prettier,-svgo!logo.svg";', + }, svgMultipleExport: { code: 'export { logoUrl , ReactComponent as Logo } from "logo.svg";', output: From 684ee21b55c5e998ded8ff96b783e5f160494248 Mon Sep 17 00:00:00 2001 From: Nima Date: Thu, 1 Nov 2018 21:23:56 +1300 Subject: [PATCH 4/7] extract generateNewSource method, renaming variables --- .../babel-plugin-named-asset-import/index.js | 49 ++++++++++--------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js index b1212c19ae8..bb08dcbc2e1 100644 --- a/packages/babel-plugin-named-asset-import/index.js +++ b/packages/babel-plugin-named-asset-import/index.js @@ -5,6 +5,13 @@ const { extname } = require('path'); function namedAssetImportPlugin({ types: t }) { const visited = new WeakSet(); + let generateNewSource = function(loaderMap, moduleName, sourcePath) { + const ext = extname(sourcePath).substr(1); + const extMap = loaderMap[ext]; + return extMap[moduleName] + ? extMap[moduleName].replace(/\[path\]/, sourcePath) + : sourcePath; + }; return { visitor: { ExportNamedDeclaration( @@ -28,7 +35,7 @@ function namedAssetImportPlugin({ types: t }) { path.replaceWithMultiple( path.node.specifiers.map(specifier => { if (t.isExportDefaultSpecifier(specifier)) { - const newDefaultImport = t.exportDeclaration( + const defaultDeclaration = t.exportDeclaration( [ t.exportDefaultSpecifier( t.identifier(specifier.local.name) @@ -37,11 +44,11 @@ function namedAssetImportPlugin({ types: t }) { t.stringLiteral(sourcePath) ); - visited.add(newDefaultImport); - return newDefaultImport; + visited.add(defaultDeclaration); + return defaultDeclaration; } - const newImport = t.exportNamedDeclaration( + const namedDeclaration = t.exportNamedDeclaration( null, [ t.exportSpecifier( @@ -50,17 +57,12 @@ function namedAssetImportPlugin({ types: t }) { ), ], t.stringLiteral( - loaderMap[ext][specifier.local.name] - ? loaderMap[ext][specifier.local.name].replace( - /\[path\]/, - sourcePath - ) - : sourcePath + generateNewSource(loaderMap, specifier.local.name, sourcePath) ) ); - visited.add(newImport); - return newImport; + visited.add(namedDeclaration); + return namedDeclaration; }) ); } @@ -82,7 +84,7 @@ function namedAssetImportPlugin({ types: t }) { path.replaceWithMultiple( path.node.specifiers.map(specifier => { if (t.isImportDefaultSpecifier(specifier)) { - const newDefaultImport = t.importDeclaration( + const defaultDeclaration = t.importDeclaration( [ t.importDefaultSpecifier( t.identifier(specifier.local.name) @@ -91,11 +93,11 @@ function namedAssetImportPlugin({ types: t }) { t.stringLiteral(sourcePath) ); - visited.add(newDefaultImport); - return newDefaultImport; + visited.add(defaultDeclaration); + return defaultDeclaration; } - const newImport = t.importDeclaration( + const namedDeclaration = t.importDeclaration( [ t.importSpecifier( t.identifier(specifier.local.name), @@ -103,17 +105,16 @@ function namedAssetImportPlugin({ types: t }) { ), ], t.stringLiteral( - loaderMap[ext][specifier.imported.name] - ? loaderMap[ext][specifier.imported.name].replace( - /\[path\]/, - sourcePath - ) - : sourcePath + generateNewSource( + loaderMap, + specifier.imported.name, + sourcePath + ) ) ); - visited.add(newImport); - return newImport; + visited.add(namedDeclaration); + return namedDeclaration; }) ); } From 33eb82d7ba09ebe275fd4b45dc3e26823903c69a Mon Sep 17 00:00:00 2001 From: Nima Date: Fri, 2 Nov 2018 14:17:11 +1300 Subject: [PATCH 5/7] extract replaceNotVisitedSpecifiers for export and import visitors --- .../babel-plugin-named-asset-import/index.js | 161 +++++++++--------- 1 file changed, 79 insertions(+), 82 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js index bb08dcbc2e1..0a57418c400 100644 --- a/packages/babel-plugin-named-asset-import/index.js +++ b/packages/babel-plugin-named-asset-import/index.js @@ -5,13 +5,34 @@ const { extname } = require('path'); function namedAssetImportPlugin({ types: t }) { const visited = new WeakSet(); - let generateNewSource = function(loaderMap, moduleName, sourcePath) { + function generateNewSource(loaderMap, moduleName, sourcePath) { const ext = extname(sourcePath).substr(1); const extMap = loaderMap[ext]; return extMap[moduleName] ? extMap[moduleName].replace(/\[path\]/, sourcePath) : sourcePath; - }; + } + + function replaceNotVisitedSpecifiers(path, loaderMap, callback) { + const sourcePath = path.node.source.value; + const ext = extname(sourcePath).substr(1); + + if (visited.has(path.node) || sourcePath.indexOf('!') !== -1) { + return; + } + + if (loaderMap[ext]) { + path.replaceWithMultiple( + path.node.specifiers.map(specifier => { + const newSpecifier = callback(specifier, sourcePath); + visited.add(newSpecifier); + + return newSpecifier; + }) + ); + } + } + return { visitor: { ExportNamedDeclaration( @@ -24,48 +45,35 @@ function namedAssetImportPlugin({ types: t }) { return; } - const sourcePath = path.node.source.value; - const ext = extname(sourcePath).substr(1); + replaceNotVisitedSpecifiers( + path, + loaderMap, + (specifier, sourcePath) => { + if (t.isExportDefaultSpecifier(specifier)) { + const defaultDeclaration = t.exportDeclaration( + [t.exportDefaultSpecifier(t.identifier(specifier.local.name))], + t.stringLiteral(sourcePath) + ); - if (visited.has(path.node) || sourcePath.indexOf('!') !== -1) { - return; - } + return defaultDeclaration; + } - if (loaderMap[ext]) { - path.replaceWithMultiple( - path.node.specifiers.map(specifier => { - if (t.isExportDefaultSpecifier(specifier)) { - const defaultDeclaration = t.exportDeclaration( - [ - t.exportDefaultSpecifier( - t.identifier(specifier.local.name) - ), - ], - t.stringLiteral(sourcePath) - ); - - visited.add(defaultDeclaration); - return defaultDeclaration; - } - - const namedDeclaration = t.exportNamedDeclaration( - null, - [ - t.exportSpecifier( - t.identifier(specifier.local.name), - t.identifier(specifier.exported.name) - ), - ], - t.stringLiteral( - generateNewSource(loaderMap, specifier.local.name, sourcePath) - ) - ); + const namedDeclaration = t.exportNamedDeclaration( + null, + [ + t.exportSpecifier( + t.identifier(specifier.local.name), + t.identifier(specifier.exported.name) + ), + ], + t.stringLiteral( + generateNewSource(loaderMap, specifier.local.name, sourcePath) + ) + ); - visited.add(namedDeclaration); - return namedDeclaration; - }) - ); - } + return namedDeclaration; + } + ); }, ImportDeclaration( path, @@ -73,51 +81,40 @@ function namedAssetImportPlugin({ types: t }) { opts: { loaderMap }, } ) { - const sourcePath = path.node.source.value; - const ext = extname(sourcePath).substr(1); + replaceNotVisitedSpecifiers( + path, + loaderMap, + (specifier, sourcePath) => { + if (t.isImportDefaultSpecifier(specifier)) { + const defaultDeclaration = t.importDeclaration( + [t.importDefaultSpecifier(t.identifier(specifier.local.name))], + t.stringLiteral(sourcePath) + ); - if (visited.has(path.node) || sourcePath.indexOf('!') !== -1) { - return; - } + visited.add(defaultDeclaration); + return defaultDeclaration; + } - if (loaderMap[ext]) { - path.replaceWithMultiple( - path.node.specifiers.map(specifier => { - if (t.isImportDefaultSpecifier(specifier)) { - const defaultDeclaration = t.importDeclaration( - [ - t.importDefaultSpecifier( - t.identifier(specifier.local.name) - ), - ], - t.stringLiteral(sourcePath) - ); - - visited.add(defaultDeclaration); - return defaultDeclaration; - } - - const namedDeclaration = t.importDeclaration( - [ - t.importSpecifier( - t.identifier(specifier.local.name), - t.identifier(specifier.imported.name) - ), - ], - t.stringLiteral( - generateNewSource( - loaderMap, - specifier.imported.name, - sourcePath - ) + const namedDeclaration = t.importDeclaration( + [ + t.importSpecifier( + t.identifier(specifier.local.name), + t.identifier(specifier.imported.name) + ), + ], + t.stringLiteral( + generateNewSource( + loaderMap, + specifier.imported.name, + sourcePath ) - ); + ) + ); - visited.add(namedDeclaration); - return namedDeclaration; - }) - ); - } + visited.add(namedDeclaration); + return namedDeclaration; + } + ); }, }, }; From adcbfbb4c712428c3b69dbefad794cdc5ab7937c Mon Sep 17 00:00:00 2001 From: Nima Date: Fri, 2 Nov 2018 14:27:44 +1300 Subject: [PATCH 6/7] remove visited list update from importDeclaration --- packages/babel-plugin-named-asset-import/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js index 0a57418c400..b3d3aa4368a 100644 --- a/packages/babel-plugin-named-asset-import/index.js +++ b/packages/babel-plugin-named-asset-import/index.js @@ -91,7 +91,6 @@ function namedAssetImportPlugin({ types: t }) { t.stringLiteral(sourcePath) ); - visited.add(defaultDeclaration); return defaultDeclaration; } @@ -111,7 +110,6 @@ function namedAssetImportPlugin({ types: t }) { ) ); - visited.add(namedDeclaration); return namedDeclaration; } ); From e44167afbd2218fe2a571668d4cafddc3a37927e Mon Sep 17 00:00:00 2001 From: Nima Date: Tue, 20 Nov 2018 12:08:54 +1300 Subject: [PATCH 7/7] renaming methods and removing return directly instead of saving --- .../babel-plugin-named-asset-import/index.js | 102 ++++++++---------- 1 file changed, 43 insertions(+), 59 deletions(-) diff --git a/packages/babel-plugin-named-asset-import/index.js b/packages/babel-plugin-named-asset-import/index.js index b3d3aa4368a..ddf51254b7e 100644 --- a/packages/babel-plugin-named-asset-import/index.js +++ b/packages/babel-plugin-named-asset-import/index.js @@ -5,7 +5,7 @@ const { extname } = require('path'); function namedAssetImportPlugin({ types: t }) { const visited = new WeakSet(); - function generateNewSource(loaderMap, moduleName, sourcePath) { + function generateNewSourcePath(loaderMap, moduleName, sourcePath) { const ext = extname(sourcePath).substr(1); const extMap = loaderMap[ext]; return extMap[moduleName] @@ -13,7 +13,7 @@ function namedAssetImportPlugin({ types: t }) { : sourcePath; } - function replaceNotVisitedSpecifiers(path, loaderMap, callback) { + function replaceMatchingSpecifiers(path, loaderMap, callback) { const sourcePath = path.node.source.value; const ext = extname(sourcePath).substr(1); @@ -45,35 +45,27 @@ function namedAssetImportPlugin({ types: t }) { return; } - replaceNotVisitedSpecifiers( - path, - loaderMap, - (specifier, sourcePath) => { - if (t.isExportDefaultSpecifier(specifier)) { - const defaultDeclaration = t.exportDeclaration( - [t.exportDefaultSpecifier(t.identifier(specifier.local.name))], - t.stringLiteral(sourcePath) - ); - - return defaultDeclaration; - } - - const namedDeclaration = t.exportNamedDeclaration( - null, - [ - t.exportSpecifier( - t.identifier(specifier.local.name), - t.identifier(specifier.exported.name) - ), - ], - t.stringLiteral( - generateNewSource(loaderMap, specifier.local.name, sourcePath) - ) + replaceMatchingSpecifiers(path, loaderMap, (specifier, sourcePath) => { + if (t.isExportDefaultSpecifier(specifier)) { + return t.exportDeclaration( + [t.exportDefaultSpecifier(t.identifier(specifier.local.name))], + t.stringLiteral(sourcePath) ); - - return namedDeclaration; } - ); + + return t.exportNamedDeclaration( + null, + [ + t.exportSpecifier( + t.identifier(specifier.local.name), + t.identifier(specifier.exported.name) + ), + ], + t.stringLiteral( + generateNewSourcePath(loaderMap, specifier.local.name, sourcePath) + ) + ); + }); }, ImportDeclaration( path, @@ -81,38 +73,30 @@ function namedAssetImportPlugin({ types: t }) { opts: { loaderMap }, } ) { - replaceNotVisitedSpecifiers( - path, - loaderMap, - (specifier, sourcePath) => { - if (t.isImportDefaultSpecifier(specifier)) { - const defaultDeclaration = t.importDeclaration( - [t.importDefaultSpecifier(t.identifier(specifier.local.name))], - t.stringLiteral(sourcePath) - ); - - return defaultDeclaration; - } - - const namedDeclaration = t.importDeclaration( - [ - t.importSpecifier( - t.identifier(specifier.local.name), - t.identifier(specifier.imported.name) - ), - ], - t.stringLiteral( - generateNewSource( - loaderMap, - specifier.imported.name, - sourcePath - ) - ) + replaceMatchingSpecifiers(path, loaderMap, (specifier, sourcePath) => { + if (t.isImportDefaultSpecifier(specifier)) { + return t.importDeclaration( + [t.importDefaultSpecifier(t.identifier(specifier.local.name))], + t.stringLiteral(sourcePath) ); - - return namedDeclaration; } - ); + + return t.importDeclaration( + [ + t.importSpecifier( + t.identifier(specifier.local.name), + t.identifier(specifier.imported.name) + ), + ], + t.stringLiteral( + generateNewSourcePath( + loaderMap, + specifier.imported.name, + sourcePath + ) + ) + ); + }); }, }, };