chore(examples): add pure webpack4 and webpack5 examples

examples/webpack/README.md

@@ -0,0 +1 @@
+these examples are also __tests__

examples/webpack/webpack4/.eslintrc.json

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

examples/webpack/webpack4/.gitignore

@@ -0,0 +1 @@
+public/dist

examples/webpack/webpack4/README.md

@@ -0,0 +1,35 @@
+# Get the SSR example running
+
+Steps:
+
+1. Download repository
+
+```bash
+git clone https://github.com/gregberge/loadable-components.git
+```
+
+2. move into example directory
+
+```bash
+cd ./loadable-components/examples/server-side-rendering
+```
+
+3. install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
+4. install project dependencies
+
+```bash
+yarn
+```
+
+5. run locally or build and serve
+
+```bash
+yarn dev
+
+# Or
+
+yarn build
+yarn start
+```
+
+🍻

examples/webpack/webpack4/babel.config.js

@@ -0,0 +1,28 @@
+function isWebTarget(caller) {
+  return Boolean(caller && caller.target === 'web')
+}
+
+function isWebpack(caller) {
+  return Boolean(caller && caller.name === 'babel-loader')
+}
+
+module.exports = api => {
+  const web = api.caller(isWebTarget)
+  const webpack = api.caller(isWebpack)
+
+  return {
+    presets: [
+      '@babel/preset-react',
+      [
+        '@babel/preset-env',
+        {
+          useBuiltIns: web ? 'entry' : undefined,
+          corejs: web ? 'core-js@3' : false,
+          targets: !web ? { node: 'current' } : undefined,
+          modules: webpack ? false : 'commonjs',
+        },
+      ],
+    ],
+    plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
+  }
+}

examples/webpack/webpack4/nodemon.json

@@ -0,0 +1,6 @@
+{
+  "ignore": ["client", "public"],
+  "execMap": {
+    "js": "babel-node"
+  }
+}

examples/webpack/webpack4/package.json

@@ -0,0 +1,39 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nodemon src/server/main.js",
+    "build": "NODE_ENV=production yarn build:webpack && yarn build:lib",
+    "build:dev": "NODE_ENV=development yarn build:webpack && yarn build:lib",
+    "build:webpack": "webpack",
+    "build:lib": "babel -d lib src",
+    "start": "NODE_ENV=production node lib/server/main.js",
+    "start:dev": "NODE_ENV=development node -r @babel/register lib/server/main.js"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.6.2",
+    "@babel/node": "^7.0.0",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^2.1.1",
+    "mini-css-extract-plugin": "^0.6.0",
+    "nodemon": "^1.19.0",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-middleware": "^3.6.2",
+    "webpack-node-externals": "^1.7.2"
+  },
+  "dependencies": {
+    "@babel/register": "^7.12.1",
+    "@loadable/babel-plugin": "file:./../../../packages/babel-plugin",
+    "@loadable/component": "file:./../../../packages/component",
+    "@loadable/server": "file:./../../../packages/server",
+    "@loadable/webpack-plugin": "file:./../../../packages/webpack-plugin",
+    "core-js": "^3.0.1",
+    "express": "^4.16.4",
+    "moment": "^2.24.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

examples/webpack/webpack4/src/client/App.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import loadable from '@loadable/component'
+
+const X = loadable(props => import(`./letters/${props.letter}`))
+
+const Moment = loadable.lib(() => import('moment'), {
+  resolveComponent: moment => moment.default || moment,
+})
+
+const App = () => (
+  <div>
+    <p>
+    Lazy load letter A:<X letter="A" />
+    </p>
+    <p>
+      lazy load momentjs:
+      <Moment>{moment => `now is : ${moment().format('HH:mm')}`}</Moment>
+    </p>
+  </div>
+)
+
+export default App

examples/webpack/webpack4/src/src/client/App.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import loadable from '@loadable/component'
+
+const X = loadable(props => import(`./letters/${props.letter}`))
+
+const Moment = loadable.lib(() => import('moment'), {
+  resolveComponent: moment => moment.default || moment,
+})
+
+const App = () => (
+  <div>
+    <p>
+    Lazy load letter A:<X letter="A" />
+    </p>
+    <p>
+      lazy load momentjs:
+      <Moment>{moment => `now is : ${moment().format('HH:mm')}`}</Moment>
+    </p>
+  </div>
+)
+
+export default App

examples/webpack/webpack4/src/src/client/letters/A.css

@@ -0,0 +1 @@
+/* A CSS */

examples/webpack/webpack4/src/src/client/letters/A.js

@@ -0,0 +1,5 @@
+import './A.css'
+
+const A = () => 'Lazy-Letter-A'
+
+export default A

examples/webpack/webpack4/src/src/client/main-node.js

@@ -0,0 +1 @@
+export { default } from './App'

examples/webpack/webpack4/src/src/client/main-web.js

@@ -0,0 +1,12 @@
+import 'core-js'
+import React from 'react'
+import { hydrate } from 'react-dom'
+import { loadableReady } from '@loadable/component'
+import App from './App'
+
+console.log('waiting for application ready...');
+loadableReady(() => {
+  console.log('application is ready...');
+  const root = document.getElementById('main');
+  hydrate(<App />, root)
+});

examples/webpack/webpack4/src/src/server/main.js

@@ -0,0 +1,76 @@
+import path from 'path'
+import express from 'express'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { ChunkExtractor } from '@loadable/server'
+
+const app = express();
+
+// https://github.com/gregberge/loadable-components/issues/634
+// app.use('*/runtime~main.js', async (req, res, next) => {
+//   console.log('delaying runtime chunk');
+//   await new Promise(resolve => setTimeout(resolve, 2000));
+//   next();
+// });
+
+app.use(express.static(path.join(__dirname, '../../public')))
+
+if (process.env.NODE_ENV !== 'production') {
+  /* eslint-disable global-require, import/no-extraneous-dependencies */
+  const { default: webpackConfig } = require('../../webpack.config.babel')
+  const webpackDevMiddleware = require('webpack-dev-middleware')
+  const webpack = require('webpack')
+  /* eslint-enable global-require, import/no-extraneous-dependencies */
+
+  const compiler = webpack(webpackConfig)
+
+  app.use(
+    webpackDevMiddleware(compiler, {
+      logLevel: 'silent',
+      publicPath: '/dist/web',
+      writeToDisk(filePath) {
+        return /dist\/node\//.test(filePath) || /loadable-stats/.test(filePath)
+      },
+    }),
+  )
+}
+
+const nodeStats = path.resolve(
+  __dirname,
+  '../../public/dist/node/loadable-stats.json',
+)
+
+const webStats = path.resolve(
+  __dirname,
+  '../../public/dist/web/loadable-stats.json',
+)
+
+app.get('*', (req, res) => {
+  const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
+  const { default: App } = nodeExtractor.requireEntrypoint()
+
+  const webExtractor = new ChunkExtractor({ statsFile: webStats })
+  const jsx = webExtractor.collectChunks(<App />)
+
+  const html = renderToString(jsx)
+
+  res.set('content-type', 'text/html')
+  res.send(`
+      <!DOCTYPE html>
+      <html>
+        <head>        
+        ${webExtractor.getLinkTags()}
+        ${webExtractor.getStyleTags()}
+        </head>
+        <body>
+          <div id="main">${html}</div>
+          <script>console.log('html is loaded')</script>          
+          ${webExtractor.getScriptTags()}
+          <script>console.log('html is ready')</script>
+        </body>
+      </html>
+    `)
+})
+
+// eslint-disable-next-line no-console
+app.listen(9000, () => console.log('Server started http://localhost:9000'))

examples/webpack/webpack4/webpack.config.babel.js

@@ -0,0 +1,54 @@
+import path from 'path'
+import nodeExternals from 'webpack-node-externals'
+import LoadablePlugin from '@loadable/webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+
+const DIST_PATH = path.resolve(__dirname, 'public/dist')
+const production = process.env.NODE_ENV === 'production'
+const development = !production;
+
+const getConfig = target => ({
+  name: target,
+  mode: development ? 'development' : 'production',
+  target,
+  entry: `./src/client/main-${target}.js`,
+  module: {
+    rules: [
+      {
+        test: /\.js?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            caller: { target },
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          'css-loader',
+        ],
+      },
+    ],
+  },
+  externals:
+    target === 'node' ? ['@loadable/component', nodeExternals()] : undefined,
+
+  optimization: {
+    runtimeChunk: target !== 'node',
+  },
+
+  output: {
+    path: path.join(DIST_PATH, target),
+    filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
+    publicPath: `/dist/${target}/`,
+    libraryTarget: target === 'node' ? 'commonjs2' : undefined,
+  },
+  plugins: [new LoadablePlugin(), new MiniCssExtractPlugin()],
+})
+
+export default [getConfig('web'), getConfig('node')]