Skip to content

Commit ede5558

Browse files
fivethreeofivethreeo
authored
Support renamed imports in babel-plugin (#929)
* Support renamed imports in babel-plugin * Added back default behaviour with a plugin option
1 parent 3ec9b64 commit ede5558

File tree

3 files changed

+149
-25
lines changed

3 files changed

+149
-25
lines changed

‎packages/babel-plugin/src/__snapshots__/index.test.js.snap‎

Lines changed: 92 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,8 @@ exports[`plugin Magic comment should transpile shortand properties 1`] = `
233233
`;
234234

235235
exports[`plugin aggressive import should work with destructuration 1`] = `
236-
"loadable({
236+
"import loadable from '@loadable/component';
237+
loadable({
237238
resolved: {},
238239
239240
chunkName({
@@ -295,7 +296,8 @@ exports[`plugin aggressive import should work with destructuration 1`] = `
295296
`;
296297
297298
exports[`plugin aggressive import with "webpackChunkName" should keep it 1`] = `
298-
"loadable({
299+
"import loadable from '@loadable/component';
300+
loadable({
299301
resolved: {},
300302
301303
chunkName(props) {
@@ -351,7 +353,8 @@ exports[`plugin aggressive import with "webpackChunkName" should keep it 1`] = `
351353
`;
352354
353355
exports[`plugin aggressive import with "webpackChunkName" should replace it 1`] = `
354-
"loadable({
356+
"import loadable from '@loadable/component';
357+
loadable({
355358
resolved: {},
356359
357360
chunkName(props) {
@@ -407,7 +410,8 @@ exports[`plugin aggressive import with "webpackChunkName" should replace it 1`]
407410
`;
408411
409412
exports[`plugin aggressive import without "webpackChunkName" should support complex request 1`] = `
410-
"loadable({
413+
"import loadable from '@loadable/component';
414+
loadable({
411415
resolved: {},
412416
413417
chunkName(props) {
@@ -463,7 +467,8 @@ exports[`plugin aggressive import without "webpackChunkName" should support comp
463467
`;
464468
465469
exports[`plugin aggressive import without "webpackChunkName" should support destructuring 1`] = `
466-
"loadable({
470+
"import loadable from '@loadable/component';
471+
loadable({
467472
resolved: {},
468473
469474
chunkName({
@@ -525,7 +530,8 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest
525530
`;
526531
527532
exports[`plugin aggressive import without "webpackChunkName" should support simple request 1`] = `
528-
"loadable({
533+
"import loadable from '@loadable/component';
534+
loadable({
529535
resolved: {},
530536
531537
chunkName(props) {
@@ -581,7 +587,8 @@ exports[`plugin aggressive import without "webpackChunkName" should support simp
581587
`;
582588
583589
exports[`plugin loadable.lib should be transpiled too 1`] = `
584-
"loadable.lib({
590+
"import loadable from '@loadable/component';
591+
loadable.lib({
585592
resolved: {},
586593
587594
chunkName() {
@@ -637,7 +644,8 @@ exports[`plugin loadable.lib should be transpiled too 1`] = `
637644
`;
638645
639646
exports[`plugin simple import in a complex promise should work 1`] = `
640-
"loadable({
647+
"import loadable from '@loadable/component';
648+
loadable({
641649
resolved: {},
642650
643651
chunkName() {
@@ -692,8 +700,14 @@ exports[`plugin simple import in a complex promise should work 1`] = `
692700
});"
693701
`;
694702
703+
exports[`plugin simple import should not work with renamed specifier by default 1`] = `
704+
"import renamedLoadable from '@loadable/component';
705+
renamedLoadable(() => import(\`./ModA\`));"
706+
`;
707+
695708
exports[`plugin simple import should transform path into "chunk-friendly" name 1`] = `
696-
"loadable({
709+
"import loadable from '@loadable/component';
710+
loadable({
697711
resolved: {},
698712
699713
chunkName() {
@@ -749,7 +763,8 @@ exports[`plugin simple import should transform path into "chunk-friendly" name 1
749763
`;
750764
751765
exports[`plugin simple import should work with * in name 1`] = `
752-
"loadable({
766+
"import loadable from '@loadable/component';
767+
loadable({
753768
resolved: {},
754769
755770
chunkName() {
@@ -805,7 +820,8 @@ exports[`plugin simple import should work with * in name 1`] = `
805820
`;
806821
807822
exports[`plugin simple import should work with + concatenation 1`] = `
808-
"loadable({
823+
"import loadable from '@loadable/component';
824+
loadable({
809825
resolved: {},
810826
811827
chunkName() {
@@ -917,8 +933,66 @@ lazy({
917933
});"
918934
`;
919935
936+
exports[`plugin simple import should work with renamed lazy specifier 1`] = `
937+
"import { lazy as renamedLazy } from '@loadable/component';
938+
renamedLazy({
939+
resolved: {},
940+
941+
chunkName() {
942+
return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
943+
},
944+
945+
isReady(props) {
946+
const key = this.resolve(props);
947+
948+
if (this.resolved[key] !== true) {
949+
return false;
950+
}
951+
952+
if (typeof __webpack_modules__ !== 'undefined') {
953+
return !!__webpack_modules__[key];
954+
}
955+
956+
return false;
957+
},
958+
959+
importAsync: () => import(
960+
/* webpackChunkName: \\"ModA\\" */
961+
\`./ModA\`),
962+
963+
requireAsync(props) {
964+
const key = this.resolve(props);
965+
this.resolved[key] = false;
966+
return this.importAsync(props).then(resolved => {
967+
this.resolved[key] = true;
968+
return resolved;
969+
});
970+
},
971+
972+
requireSync(props) {
973+
const id = this.resolve(props);
974+
975+
if (typeof __webpack_require__ !== 'undefined') {
976+
return __webpack_require__(id);
977+
}
978+
979+
return eval('module.require')(id);
980+
},
981+
982+
resolve() {
983+
if (require.resolveWeak) {
984+
return require.resolveWeak(\`./ModA\`);
985+
}
986+
987+
return eval('require.resolve')(\`./ModA\`);
988+
}
989+
990+
});"
991+
`;
992+
920993
exports[`plugin simple import should work with template literal 1`] = `
921-
"loadable({
994+
"import loadable from '@loadable/component';
995+
loadable({
922996
resolved: {},
923997
924998
chunkName() {
@@ -974,7 +1048,8 @@ exports[`plugin simple import should work with template literal 1`] = `
9741048
`;
9751049
9761050
exports[`plugin simple import with "webpackChunkName" comment should use it 1`] = `
977-
"loadable({
1051+
"import loadable from '@loadable/component';
1052+
loadable({
9781053
resolved: {},
9791054
9801055
chunkName() {
@@ -1030,7 +1105,8 @@ exports[`plugin simple import with "webpackChunkName" comment should use it 1`]
10301105
`;
10311106
10321107
exports[`plugin simple import with "webpackChunkName" comment should use it even if comment is separated by "," 1`] = `
1033-
"loadable({
1108+
"import loadable from '@loadable/component';
1109+
loadable({
10341110
resolved: {},
10351111
10361112
chunkName() {
@@ -1086,7 +1162,8 @@ exports[`plugin simple import with "webpackChunkName" comment should use it even
10861162
`;
10871163
10881164
exports[`plugin simple import without "webpackChunkName" comment should add it 1`] = `
1089-
"loadable({
1165+
"import loadable from '@loadable/component';
1166+
loadable({
10901167
resolved: {},
10911168
10921169
chunkName() {

‎packages/babel-plugin/src/index.js‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { declare } from "@babel/helper-plugin-utils";
12
import syntaxDynamicImport from '@babel/plugin-syntax-dynamic-import'
23
import chunkNameProperty from './properties/chunkName'
34
import isReadyProperty from './properties/isReady'
@@ -19,7 +20,7 @@ const properties = [
1920

2021
const LOADABLE_COMMENT = '#__LOADABLE__'
2122

22-
const loadablePlugin = api => {
23+
const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) => {
2324
const { types: t } = api
2425

2526
function collectImportCallPaths(startPath) {
@@ -34,21 +35,22 @@ const loadablePlugin = api => {
3435

3536
const propertyFactories = properties.map(init => init(api))
3637

37-
function isValidIdentifier(path, hasLazyImport) {
38+
function isValidIdentifier(path, loadableImportSpecifier, lazyImportSpecifier) {
3839
// `loadable()`
39-
if (path.get('callee').isIdentifier({ name: 'loadable' })) {
40+
if (loadableImportSpecifier && path.get('callee').isIdentifier({ name: loadableImportSpecifier })) {
4041
return true
4142
}
4243

4344
// `lazy()`
44-
if (path.get('callee').isIdentifier({ name: 'lazy' }) && hasLazyImport) {
45+
if (lazyImportSpecifier && path.get('callee').isIdentifier({ name: lazyImportSpecifier })) {
4546
return true
4647
}
4748

4849
// `loadable.lib()`
4950
return (
51+
loadableImportSpecifier &&
5052
path.get('callee').isMemberExpression() &&
51-
path.get('callee.object').isIdentifier({ name: 'loadable' }) &&
53+
path.get('callee.object').isIdentifier({ name: loadableImportSpecifier }) &&
5254
path.get('callee.property').isIdentifier({ name: 'lib' })
5355
)
5456
}
@@ -117,14 +119,28 @@ const loadablePlugin = api => {
117119
visitor: {
118120
Program: {
119121
enter(programPath) {
120-
let hasLazyImport = false
122+
let loadableImportSpecifier = defaultImportSpecifier
123+
let lazyImportSpecifier = false
121124

122125
programPath.traverse({
123-
ImportDeclaration(path) {
124-
hasLazyImport = hasLazyImport || path.node.source.value == '@loadable/component' && path.node.specifiers.some(({ imported })=>imported.name=='lazy')
126+
ImportDefaultSpecifier(path) {
127+
if (!loadableImportSpecifier) {
128+
const { parent } = path
129+
const { local } = path.node
130+
loadableImportSpecifier = parent.source.value == '@loadable/component' &&
131+
local && local.name
132+
}
133+
},
134+
ImportSpecifier(path) {
135+
if (!lazyImportSpecifier) {
136+
const { parent } = path
137+
const { imported, local } = path.node
138+
lazyImportSpecifier = parent.source.value == '@loadable/component' &&
139+
imported && imported.name == 'lazy' && local && local.name
140+
}
125141
},
126142
CallExpression(path) {
127-
if (!isValidIdentifier(path, hasLazyImport)) return
143+
if (!isValidIdentifier(path, loadableImportSpecifier, lazyImportSpecifier)) return
128144
transformImport(path)
129145
},
130146
'ArrowFunctionExpression|FunctionExpression|ObjectMethod': path => {
@@ -136,6 +152,6 @@ const loadablePlugin = api => {
136152
},
137153
},
138154
}
139-
}
155+
})
140156

141157
export default loadablePlugin

0 commit comments

Comments
 (0)