Support renamed imports in babel-plugin (#929)

* Support renamed imports in babel-plugin

* Added back default behaviour with a plugin option

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

@@ -233,7 +233,8 @@ exports[`plugin Magic comment should transpile shortand properties 1`] = `
 `;
 
 exports[`plugin aggressive import should work with destructuration 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName({
@@ -295,7 +296,8 @@ exports[`plugin aggressive import should work with destructuration 1`] = `
 `;
 
 exports[`plugin aggressive import with "webpackChunkName" should keep it 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName(props) {
@@ -351,7 +353,8 @@ exports[`plugin aggressive import with "webpackChunkName" should keep it 1`] = `
 `;
 
 exports[`plugin aggressive import with "webpackChunkName" should replace it 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName(props) {
@@ -407,7 +410,8 @@ exports[`plugin aggressive import with "webpackChunkName" should replace it 1`]
 `;
 
 exports[`plugin aggressive import without "webpackChunkName" should support complex request 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName(props) {
@@ -463,7 +467,8 @@ exports[`plugin aggressive import without "webpackChunkName" should support comp
 `;
 
 exports[`plugin aggressive import without "webpackChunkName" should support destructuring 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName({
@@ -525,7 +530,8 @@ exports[`plugin aggressive import without "webpackChunkName" should support dest
 `;
 
 exports[`plugin aggressive import without "webpackChunkName" should support simple request 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName(props) {
@@ -581,7 +587,8 @@ exports[`plugin aggressive import without "webpackChunkName" should support simp
 `;
 
 exports[`plugin loadable.lib should be transpiled too 1`] = `
-"loadable.lib({
+"import loadable from '@loadable/component';
+loadable.lib({
   resolved: {},
 
   chunkName() {
@@ -637,7 +644,8 @@ exports[`plugin loadable.lib should be transpiled too 1`] = `
 `;
 
 exports[`plugin simple import in a complex promise should work 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {
@@ -692,8 +700,14 @@ exports[`plugin simple import in a complex promise should work 1`] = `
 });"
 `;
 
+exports[`plugin simple import should not work with renamed specifier by default 1`] = `
+"import renamedLoadable from '@loadable/component';
+renamedLoadable(() => import(\`./ModA\`));"
+`;
+
 exports[`plugin simple import should transform path into "chunk-friendly" name 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {
@@ -749,7 +763,8 @@ exports[`plugin simple import should transform path into "chunk-friendly" name 1
 `;
 
 exports[`plugin simple import should work with * in name 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {
@@ -805,7 +820,8 @@ exports[`plugin simple import should work with * in name 1`] = `
 `;
 
 exports[`plugin simple import should work with + concatenation 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {
@@ -917,8 +933,66 @@ lazy({
 });"
 `;
 
+exports[`plugin simple import should work with renamed lazy specifier 1`] = `
+"import { lazy as renamedLazy } from '@loadable/component';
+renamedLazy({
+  resolved: {},
+
+  chunkName() {
+    return \`ModA\`.replace(/[^a-zA-Z0-9_!§$()=\\\\-^°]+/g, \\"-\\");
+  },
+
+  isReady(props) {
+    const key = this.resolve(props);
+
+    if (this.resolved[key] !== true) {
+      return false;
+    }
+
+    if (typeof __webpack_modules__ !== 'undefined') {
+      return !!__webpack_modules__[key];
+    }
+
+    return false;
+  },
+
+  importAsync: () => import(
+  /* webpackChunkName: \\"ModA\\" */
+  \`./ModA\`),
+
+  requireAsync(props) {
+    const key = this.resolve(props);
+    this.resolved[key] = false;
+    return this.importAsync(props).then(resolved => {
+      this.resolved[key] = true;
+      return resolved;
+    });
+  },
+
+  requireSync(props) {
+    const id = this.resolve(props);
+
+    if (typeof __webpack_require__ !== 'undefined') {
+      return __webpack_require__(id);
+    }
+
+    return eval('module.require')(id);
+  },
+
+  resolve() {
+    if (require.resolveWeak) {
+      return require.resolveWeak(\`./ModA\`);
+    }
+
+    return eval('require.resolve')(\`./ModA\`);
+  }
+
+});"
+`;
+
 exports[`plugin simple import should work with template literal 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {
@@ -974,7 +1048,8 @@ exports[`plugin simple import should work with template literal 1`] = `
 `;
 
 exports[`plugin simple import with "webpackChunkName" comment should use it 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {
@@ -1030,7 +1105,8 @@ exports[`plugin simple import with "webpackChunkName" comment should use it 1`]
 `;
 
 exports[`plugin simple import with "webpackChunkName" comment should use it even if comment is separated by "," 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {
@@ -1086,7 +1162,8 @@ exports[`plugin simple import with "webpackChunkName" comment should use it even
 `;
 
 exports[`plugin simple import without "webpackChunkName" comment should add it 1`] = `
-"loadable({
+"import loadable from '@loadable/component';
+loadable({
   resolved: {},
 
   chunkName() {

packages/babel-plugin/src/index.js

@@ -1,3 +1,4 @@
+import { declare } from "@babel/helper-plugin-utils";
 import syntaxDynamicImport from '@babel/plugin-syntax-dynamic-import'
 import chunkNameProperty from './properties/chunkName'
 import isReadyProperty from './properties/isReady'
@@ -19,7 +20,7 @@ const properties = [
 
 const LOADABLE_COMMENT = '#__LOADABLE__'
 
-const loadablePlugin = api => {
+const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) => {
   const { types: t } = api
 
   function collectImportCallPaths(startPath) {
@@ -34,21 +35,22 @@ const loadablePlugin = api => {
 
   const propertyFactories = properties.map(init => init(api))
 
-  function isValidIdentifier(path, hasLazyImport) {
+  function isValidIdentifier(path, loadableImportSpecifier, lazyImportSpecifier) {
     // `loadable()`
-    if (path.get('callee').isIdentifier({ name: 'loadable' })) {
+    if (loadableImportSpecifier && path.get('callee').isIdentifier({ name: loadableImportSpecifier })) {
       return true
     }
 
     // `lazy()`
-    if (path.get('callee').isIdentifier({ name: 'lazy' }) && hasLazyImport) {
+    if (lazyImportSpecifier && path.get('callee').isIdentifier({ name: lazyImportSpecifier })) {
       return true
     }
 
     // `loadable.lib()`
     return (
+      loadableImportSpecifier &&
       path.get('callee').isMemberExpression() &&
-      path.get('callee.object').isIdentifier({ name: 'loadable' }) &&
+      path.get('callee.object').isIdentifier({ name: loadableImportSpecifier }) &&
       path.get('callee.property').isIdentifier({ name: 'lib' })
     )
   }
@@ -117,14 +119,28 @@ const loadablePlugin = api => {
     visitor: {
       Program: {
         enter(programPath) {
-          let hasLazyImport = false
+          let loadableImportSpecifier = defaultImportSpecifier
+          let lazyImportSpecifier = false
 
           programPath.traverse({
-            ImportDeclaration(path) {
-              hasLazyImport = hasLazyImport || path.node.source.value == '@loadable/component' && path.node.specifiers.some(({ imported })=>imported.name=='lazy')
+            ImportDefaultSpecifier(path) {
+              if (!loadableImportSpecifier) {
+                const { parent } = path
+                const { local } = path.node
+                loadableImportSpecifier = parent.source.value == '@loadable/component' &&
+                  local && local.name
+              }
+            },
+            ImportSpecifier(path) {
+              if (!lazyImportSpecifier) {
+                const { parent } = path
+                const { imported, local } = path.node
+                lazyImportSpecifier = parent.source.value == '@loadable/component' &&
+                  imported && imported.name == 'lazy' && local && local.name
+              }
             },
             CallExpression(path) {
-              if (!isValidIdentifier(path, hasLazyImport)) return
+              if (!isValidIdentifier(path, loadableImportSpecifier, lazyImportSpecifier)) return
               transformImport(path)
             },
             'ArrowFunctionExpression|FunctionExpression|ObjectMethod': path => {
@@ -136,6 +152,6 @@ const loadablePlugin = api => {
       },
     },
   }
-}
+})
 
 export default loadablePlugin