Added transformation of lazy (#925)

Author: fivethreeo

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

@@ -860,6 +860,63 @@ exports[`plugin simple import should work with + concatenation 1`] = `
 });"
 `;
 
+exports[`plugin simple import should work with lazy if imported 1`] = `
+"import { lazy } from '@loadable/component';
+lazy({
+  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({
   resolved: {},

packages/babel-plugin/src/index.js

@@ -34,12 +34,17 @@ const loadablePlugin = api => {
 
   const propertyFactories = properties.map(init => init(api))
 
-  function isValidIdentifier(path) {
+  function isValidIdentifier(path, hasLazyImport) {
     // `loadable()`
     if (path.get('callee').isIdentifier({ name: 'loadable' })) {
       return true
     }
 
+    // `lazy()`
+    if (path.get('callee').isIdentifier({ name: 'lazy' }) && hasLazyImport) {
+      return true
+    }
+
     // `loadable.lib()`
     return (
       path.get('callee').isMemberExpression() &&
@@ -106,14 +111,20 @@ const loadablePlugin = api => {
     }
   }
 
+
   return {
     inherits: syntaxDynamicImport,
     visitor: {
       Program: {
         enter(programPath) {
+          let hasLazyImport = false
+
           programPath.traverse({
+            ImportDeclaration(path) {
+              hasLazyImport = hasLazyImport || path.node.source.value == '@loadable/component' && path.node.specifiers.some(({ imported })=>imported.name=='lazy')
+            },
             CallExpression(path) {
-              if (!isValidIdentifier(path)) return
+              if (!isValidIdentifier(path, hasLazyImport)) return
               transformImport(path)
             },
             'ArrowFunctionExpression|FunctionExpression|ObjectMethod': path => {

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

@@ -20,7 +20,25 @@ describe('plugin', () => {
 
       expect(result).toMatchSnapshot()
     })
+    it('should work with lazy if imported', () => {
+      const result = testPlugin(`
+        import { lazy } from '@loadable/component'
+        lazy(() => import(\`./ModA\`))
+      `)
 
+      expect(result).toMatchSnapshot()
+    })
+    it('should not work with lazy if not imported', () => {
+      const result = testPlugin(`
+        import React, { lazy } from 'react'
+        lazy(() => import(\`./ModA\`))
+      `)
+
+      expect(result).toMatchInlineSnapshot(`
+        "import React, { lazy } from 'react';
+        lazy(() => import(\`./ModA\`));"
+      `)
+    })
     it('should work with + concatenation', () => {
       const result = testPlugin(`
         loadable(() => import('./Mod' + 'A'))

packages/component/.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 16760,
-    "minified": 7400,
-    "gzipped": 2617
+    "bundled": 16813,
+    "minified": 7394,
+    "gzipped": 2621
   },
   "dist/loadable.esm.js": {
-    "bundled": 16381,
-    "minified": 7096,
-    "gzipped": 2550,
+    "bundled": 16434,
+    "minified": 7090,
+    "gzipped": 2552,
     "treeshaked": {
       "rollup": {
         "code": 276,
         "import_statements": 276
       },
       "webpack": {
-        "code": 5969
+        "code": 5958
       }
     }
   }