Add api exposing a hook-based way to load a module

examples/hook/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "import/no-unresolved": "off"
+  }
+}

examples/hook/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-react'],
+  plugins: ['@babel/plugin-syntax-dynamic-import'],
+}

examples/hook/package.json

@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "webpack-dev-server",
+    "dev": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-react": "^7.6.3",
+    "babel-loader": "^8.0.4",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.3.1"
+  },
+  "dependencies": {
+    "@loadable/babel-plugin": "file:./../../packages/babel-plugin",
+    "@loadable/component": "file:./../../packages/component",
+    "@loadable/server": "file:./../../packages/server",
+    "@loadable/webpack-plugin": "file:./../../packages/webpack-plugin",
+    "moment": "^2.24.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

examples/hook/src/Hello.js

@@ -0,0 +1 @@
+export default () => 'Hello'

examples/hook/src/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { render } from 'react-dom'
+import loadable from '@loadable/component'
+
+const useHello = loadable.hook(() => import('./Hello'))
+const useMoment = loadable.hook(() => import('moment'))
+
+function App() {
+  const Hello = useHello()
+  const moment = useMoment()
+  const timeNow = React.useMemo(() => moment && moment().format('HH:mm'), [moment])
+
+  return (
+    <div>
+      {Hello ? <Hello /> : 'Loading hello'}
+      <br />
+      {timeNow || 'Loading moment library'}
+    </div>
+  )
+}
+
+const root = document.createElement('div')
+document.body.append(root)
+
+render(<App />, root)

examples/hook/webpack.config.js

@@ -0,0 +1,15 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /\.js?$/,
+        exclude: /node_modules/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  plugins: [new HtmlWebpackPlugin()],
+}

package.json

@@ -35,6 +35,7 @@
     "@hedgepigdaniel/npm-publish-git": "^0.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",

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

@@ -881,6 +881,177 @@ exports[`plugin custom signatures should not match on undeclared specifiers 1`]
 myLoadable(() => import(\`./ModA\`));"
 `;
 
+exports[`plugin lazy.hook should be transpiled too 1`] = `
+"import { lazy } from '@loadable/component';
+lazy.hook({
+  resolved: {},
+
+  chunkName() {
+    return \\"moment\\";
+  },
+
+  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: \\"moment\\" */
+  'moment'),
+
+  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(\\"moment\\");
+    }
+
+    return eval('require.resolve')(\\"moment\\");
+  }
+
+});"
+`;
+
+exports[`plugin lazy.lib should be transpiled too 1`] = `
+"import { lazy } from '@loadable/component';
+lazy.lib({
+  resolved: {},
+
+  chunkName() {
+    return \\"moment\\";
+  },
+
+  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: \\"moment\\" */
+  'moment'),
+
+  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(\\"moment\\");
+    }
+
+    return eval('require.resolve')(\\"moment\\");
+  }
+
+});"
+`;
+
+exports[`plugin loadable.hook should be transpiled too 1`] = `
+"import loadable from '@loadable/component';
+loadable.hook({
+  resolved: {},
+
+  chunkName() {
+    return \\"moment\\";
+  },
+
+  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: \\"moment\\" */
+  'moment'),
+
+  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(\\"moment\\");
+    }
+
+    return eval('require.resolve')(\\"moment\\");
+  }
+
+});"
+`;
+
 exports[`plugin loadable.lib should be transpiled too 1`] = `
 "import loadable from '@loadable/component';
 loadable.lib({

packages/babel-plugin/src/index.js

@@ -45,17 +45,50 @@ const loadablePlugin = declare((api, {
       return true
     }
 
+    // `loadable.lib()`
+    if (
+      path.get('callee').isMemberExpression() &&
+      loadableImportSpecifiers.find(specifier => path.get('callee.object').isIdentifier({ name: specifier })) &&
+      path.get('callee.property').isIdentifier({ name: 'lib' })
+    ) {
+      return true
+    }
+
+    // `loadable.hook()`
+    if (
+      path.get('callee').isMemberExpression() &&
+      loadableImportSpecifiers.find(specifier => path.get('callee.object').isIdentifier({ name: specifier })) &&
+      path.get('callee.property').isIdentifier({ name: 'hook' })
+    ) {
+      return true
+    }
+
     // `lazy()`
     if (lazyImportSpecifier && path.get('callee').isIdentifier({ name: lazyImportSpecifier })) {
       return true
     }
 
-    // `loadable.lib()`
-    return (
+    // `lazy.lib()`
+    if (
+      lazyImportSpecifier &&
       path.get('callee').isMemberExpression() &&
-      loadableImportSpecifiers.find(specifier => path.get('callee.object').isIdentifier({ name: specifier })) &&
+      path.get('callee.object').isIdentifier({ name: lazyImportSpecifier }) &&
       path.get('callee.property').isIdentifier({ name: 'lib' })
-    )
+    ) {
+      return true
+    }
+
+    // `lazy.hook()`
+    if (
+      lazyImportSpecifier &&
+      path.get('callee').isMemberExpression() &&
+      path.get('callee.object').isIdentifier({ name: lazyImportSpecifier }) &&
+      path.get('callee.property').isIdentifier({ name: 'hook' })
+    ) {
+      return true
+    }
+
+    return false
   }
 
   function hasLoadableComment(path) {

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

@@ -202,6 +202,39 @@ describe('plugin', () => {
     })
   })
 
+  describe('lazy.lib', () => {
+    it('should be transpiled too', () => {
+      const result = testPlugin(`
+        import { lazy } from '@loadable/component'
+        lazy.lib(() => import('moment'))
+      `)
+
+      expect(result).toMatchSnapshot()
+    })
+  })
+
+  describe('loadable.hook', () => {
+    it('should be transpiled too', () => {
+      const result = testPlugin(`
+        import loadable from '@loadable/component'
+        loadable.hook(() => import('moment'))
+      `)
+
+      expect(result).toMatchSnapshot()
+    })
+  })
+
+  describe('lazy.hook', () => {
+    it('should be transpiled too', () => {
+      const result = testPlugin(`
+        import { lazy } from '@loadable/component'
+        lazy.hook(() => import('moment'))
+      `)
+
+      expect(result).toMatchSnapshot()
+    })
+  })
+
   describe('custom signatures', () => {
     it('(default) should support old named import', () => {
       const result = testPlugin(`

packages/component/.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 16813,
-    "minified": 7394,
-    "gzipped": 2621
+    "bundled": 25178,
+    "minified": 10235,
+    "gzipped": 3246
   },
   "dist/loadable.esm.js": {
-    "bundled": 16434,
-    "minified": 7090,
-    "gzipped": 2552,
+    "bundled": 24799,
+    "minified": 9931,
+    "gzipped": 3175,
     "treeshaked": {
       "rollup": {
         "code": 276,
         "import_statements": 276
       },
       "webpack": {
-        "code": 5958
+        "code": 8364
       }
     }
   }