From fd2a33545aa7b8146412ed74da07fa9ab18300fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Saltvik?= <oyvind.saltvik@gmail.com>
Date: Fri, 25 Nov 2022 00:21:37 +0100
Subject: [PATCH 1/3] Better lazy with streaming ssr

---
 .../.eslintrc.json                            |   9 ++
 .../.gitignore                                |   1 +
 .../streaming-server-side-rendering/README.md |  42 ++++++
 .../babel.config.js                           |  32 +++++
 .../nodemon.json                              |   6 +
 .../package.json                              |  39 ++++++
 .../src/client/App.js                         |  50 +++++++
 .../src/client/Html.js                        |  23 ++++
 .../src/client/Y/file.js                      |   1 +
 .../src/client/letters/A.css                  |   4 +
 .../src/client/letters/A.js                   |   6 +
 .../src/client/letters/B.js                   |   6 +
 .../src/client/letters/C.js                   |   1 +
 .../src/client/letters/D.js                   |   1 +
 .../src/client/letters/E.js                   |   1 +
 .../src/client/letters/F.js                   |   1 +
 .../src/client/letters/G.js                   |   5 +
 .../src/client/letters/Z/file.js              |   1 +
 .../src/client/main-node.js                   |   3 +
 .../src/client/main-web.js                    |   7 +
 .../src/client/main.css                       |   4 +
 .../src/server/main.js                        | 128 ++++++++++++++++++
 .../webpack.config.babel.js                   |  74 ++++++++++
 packages/babel-plugin/src/index.js            |  10 +-
 packages/component/.size-snapshot.json        |  14 +-
 packages/component/src/createLoadable.js      |  18 ++-
 packages/server/src/ChunkExtractor.js         |  29 ++++
 27 files changed, 501 insertions(+), 15 deletions(-)
 create mode 100644 examples/streaming-server-side-rendering/.eslintrc.json
 create mode 100644 examples/streaming-server-side-rendering/.gitignore
 create mode 100644 examples/streaming-server-side-rendering/README.md
 create mode 100644 examples/streaming-server-side-rendering/babel.config.js
 create mode 100644 examples/streaming-server-side-rendering/nodemon.json
 create mode 100644 examples/streaming-server-side-rendering/package.json
 create mode 100644 examples/streaming-server-side-rendering/src/client/App.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/Html.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/Y/file.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/A.css
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/A.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/B.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/C.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/D.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/E.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/F.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/G.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/letters/Z/file.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/main-node.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/main-web.js
 create mode 100644 examples/streaming-server-side-rendering/src/client/main.css
 create mode 100644 examples/streaming-server-side-rendering/src/server/main.js
 create mode 100644 examples/streaming-server-side-rendering/webpack.config.babel.js

diff --git a/examples/streaming-server-side-rendering/.eslintrc.json b/examples/streaming-server-side-rendering/.eslintrc.json
new file mode 100644
index 000000000..a039f2105
--- /dev/null
+++ b/examples/streaming-server-side-rendering/.eslintrc.json
@@ -0,0 +1,9 @@
+{
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "import/no-unresolved": "off",
+    "import/no-extraneous-dependencies": "off"
+  }
+}
diff --git a/examples/streaming-server-side-rendering/.gitignore b/examples/streaming-server-side-rendering/.gitignore
new file mode 100644
index 000000000..e9a3310da
--- /dev/null
+++ b/examples/streaming-server-side-rendering/.gitignore
@@ -0,0 +1 @@
+public/dist
\ No newline at end of file
diff --git a/examples/streaming-server-side-rendering/README.md b/examples/streaming-server-side-rendering/README.md
new file mode 100644
index 000000000..a00744f34
--- /dev/null
+++ b/examples/streaming-server-side-rendering/README.md
@@ -0,0 +1,42 @@
+# Get the streaming SSR example running
+
+Steps:
+
+1. Download repository
+
+```bash
+git clone https://github.com/gregberge/loadable-components.git
+```
+
+2. Install [https://yarnpkg.com/lang/en/docs/install](yarn) if haven't already
+3. Install libary dependencies and build library
+
+```bash
+yarn
+yarn build
+```
+
+4. Move into example directory
+
+```bash
+cd ./loadable-components/examples/streaming-server-side-rendering
+```
+
+5. Install project dependencies
+
+```bash
+yarn
+```
+
+5. Run locally or build and serve
+
+```bash
+yarn dev
+
+# Or
+
+yarn build
+yarn start
+```
+
+🍻
diff --git a/examples/streaming-server-side-rendering/babel.config.js b/examples/streaming-server-side-rendering/babel.config.js
new file mode 100644
index 000000000..034578c92
--- /dev/null
+++ b/examples/streaming-server-side-rendering/babel.config.js
@@ -0,0 +1,32 @@
+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', 
+/*     ["transform-define", {
+      "process.env.NODE_ENV": process.env.NODE_ENV,
+    }] */
+  ],
+  }
+}
diff --git a/examples/streaming-server-side-rendering/nodemon.json b/examples/streaming-server-side-rendering/nodemon.json
new file mode 100644
index 000000000..51ea33e59
--- /dev/null
+++ b/examples/streaming-server-side-rendering/nodemon.json
@@ -0,0 +1,6 @@
+{
+  "ignore": ["client", "public"],
+  "execMap": {
+    "js": "babel-node"
+  }
+}
diff --git a/examples/streaming-server-side-rendering/package.json b/examples/streaming-server-side-rendering/package.json
new file mode 100644
index 000000000..c9ef23033
--- /dev/null
+++ b/examples/streaming-server-side-rendering/package.json
@@ -0,0 +1,39 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nodemon src/server/main.js",
+    "build": "rm -Rf ./public && NODE_ENV=production yarn build:webpack && yarn build:lib",
+    "build:webpack": "webpack",
+    "build:lib": "babel -d lib src",
+    "start": "NODE_ENV=production node lib/server/main.js",
+    "link:all": "yarn link @loadable/babel-plugin && yarn link @loadable/server && yarn link @loadable/component"
+  },
+  "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",
+    "@loadable/babel-plugin": "file:./../../packages/babel-plugin",
+    "@loadable/component": "file:./../../packages/component",
+    "@loadable/server": "file:./../../packages/server",
+    "@loadable/webpack-plugin": "file:./../../packages/webpack-plugin",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-transform-define": "^2.1.0",
+    "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": {
+    "core-js": "^3.0.1",
+    "express": "^4.18.2",
+    "moment": "^2.24.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^3.1.4"
+  }
+}
diff --git a/examples/streaming-server-side-rendering/src/client/App.js b/examples/streaming-server-side-rendering/src/client/App.js
new file mode 100644
index 000000000..3ac6b4fa7
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/App.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import { ErrorBoundary } from 'react-error-boundary';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { lazy } from '@loadable/component'
+import Html from './Html'
+
+const A = lazy(() => import('./letters/A'))
+const B = lazy(() => import('./letters/B'))
+const C = lazy(() => import(/* webpackPreload: true */ './letters/C'))
+const D = lazy(() => import(/* webpackPrefetch: true */ './letters/D'))
+const E = lazy(() => import('./letters/E?param'), { ssr: false })
+const X = lazy(props => import(`./letters/${props.letter}`))
+const Sub = lazy(props => import(`./letters/${props.letter}/file`))
+const RootSub = lazy(props => import(`./${props.letter}/file`))
+
+const App = () => {
+  return (
+    <Html title="Hello">
+    <React.Suspense fallback="Loading">
+      <ErrorBoundary FallbackComponent={Error}>  
+          <A />
+          <br />
+          <B />
+          <br />
+          <X letter="A" />
+          <br />
+          <X letter="F" />
+          <br />
+          <E />
+          <br />
+          <Sub letter="Z" />
+          <br />
+          <RootSub letter="Y" />
+        </ErrorBoundary>
+      </React.Suspense>
+    </Html>
+  )
+}
+
+function Error({ error }) {
+  return (
+    <div>
+      <h1>Application Error</h1>
+      <pre style={{ whiteSpace: 'pre-wrap' }}>{error.stack}</pre>
+    </div>
+  );
+}
+
+export default App
diff --git a/examples/streaming-server-side-rendering/src/client/Html.js b/examples/streaming-server-side-rendering/src/client/Html.js
new file mode 100644
index 000000000..b5f301ad9
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/Html.js
@@ -0,0 +1,23 @@
+import React from 'react'
+
+export default function Html({ children, title }) {
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <link rel="shortcut icon" href="favicon.ico" />
+          <title>{title}</title>
+        </head>
+        <body>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<b>Enable JavaScript to run this app.</b>`
+            }}
+          />
+          {children}
+        </body>
+      </html>
+    );
+  }
+  
\ No newline at end of file
diff --git a/examples/streaming-server-side-rendering/src/client/Y/file.js b/examples/streaming-server-side-rendering/src/client/Y/file.js
new file mode 100644
index 000000000..9f4b3bb23
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/Y/file.js
@@ -0,0 +1 @@
+export default () => 'Y'
diff --git a/examples/streaming-server-side-rendering/src/client/letters/A.css b/examples/streaming-server-side-rendering/src/client/letters/A.css
new file mode 100644
index 000000000..13c1db2d4
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/A.css
@@ -0,0 +1,4 @@
+/* A CSS */
+body {
+    background: pink;
+}
\ No newline at end of file
diff --git a/examples/streaming-server-side-rendering/src/client/letters/A.js b/examples/streaming-server-side-rendering/src/client/letters/A.js
new file mode 100644
index 000000000..08c8a3f0f
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/A.js
@@ -0,0 +1,6 @@
+// We simulate that "moment" is called in "A" and "B"
+
+const A = () => 'A'
+
+
+export default A
diff --git a/examples/streaming-server-side-rendering/src/client/letters/B.js b/examples/streaming-server-side-rendering/src/client/letters/B.js
new file mode 100644
index 000000000..4f18afa89
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/B.js
@@ -0,0 +1,6 @@
+// We simulate that "moment" is called in "A" and "B"
+
+const B = () => 'B'
+
+
+export default B
diff --git a/examples/streaming-server-side-rendering/src/client/letters/C.js b/examples/streaming-server-side-rendering/src/client/letters/C.js
new file mode 100644
index 000000000..132b772fc
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/C.js
@@ -0,0 +1 @@
+export default () => 'C'
diff --git a/examples/streaming-server-side-rendering/src/client/letters/D.js b/examples/streaming-server-side-rendering/src/client/letters/D.js
new file mode 100644
index 000000000..f3ee0957a
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/D.js
@@ -0,0 +1 @@
+export default () => 'D'
diff --git a/examples/streaming-server-side-rendering/src/client/letters/E.js b/examples/streaming-server-side-rendering/src/client/letters/E.js
new file mode 100644
index 000000000..d246ad110
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/E.js
@@ -0,0 +1 @@
+export default () => 'E'
diff --git a/examples/streaming-server-side-rendering/src/client/letters/F.js b/examples/streaming-server-side-rendering/src/client/letters/F.js
new file mode 100644
index 000000000..7c7fe4421
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/F.js
@@ -0,0 +1 @@
+export default () => 'F'
diff --git a/examples/streaming-server-side-rendering/src/client/letters/G.js b/examples/streaming-server-side-rendering/src/client/letters/G.js
new file mode 100644
index 000000000..b78e564d7
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/G.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const G = ({ prefix }) => <span className="my-cool-class">{prefix} - G</span>
+
+export default G
diff --git a/examples/streaming-server-side-rendering/src/client/letters/Z/file.js b/examples/streaming-server-side-rendering/src/client/letters/Z/file.js
new file mode 100644
index 000000000..e7b5776c2
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/letters/Z/file.js
@@ -0,0 +1 @@
+export default () => 'Z'
diff --git a/examples/streaming-server-side-rendering/src/client/main-node.js b/examples/streaming-server-side-rendering/src/client/main-node.js
new file mode 100644
index 000000000..42a528ff7
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/main-node.js
@@ -0,0 +1,3 @@
+export { default } from './App'
+
+export const hello = 'hello'
diff --git a/examples/streaming-server-side-rendering/src/client/main-web.js b/examples/streaming-server-side-rendering/src/client/main-web.js
new file mode 100644
index 000000000..a0e69c58d
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/main-web.js
@@ -0,0 +1,7 @@
+import 'core-js'
+import React from 'react'
+import { hydrateRoot } from "react-dom/client";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import App from './App'
+
+hydrateRoot(document, <App />);
diff --git a/examples/streaming-server-side-rendering/src/client/main.css b/examples/streaming-server-side-rendering/src/client/main.css
new file mode 100644
index 000000000..88eb55506
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/client/main.css
@@ -0,0 +1,4 @@
+/* Main CSS */
+h1 {
+    color: cyan;
+}
\ No newline at end of file
diff --git a/examples/streaming-server-side-rendering/src/server/main.js b/examples/streaming-server-side-rendering/src/server/main.js
new file mode 100644
index 000000000..f6d2d00a5
--- /dev/null
+++ b/examples/streaming-server-side-rendering/src/server/main.js
@@ -0,0 +1,128 @@
+import path from 'path'
+import express, { json } from 'express'
+import React from 'react'
+import { renderToPipeableStream } from 'react-dom/server';
+import { ChunkExtractor } from '@loadable/server'
+import { Writable } from 'stream';
+import fs from 'fs';
+
+const app = express()
+
+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) => {
+  let didError = false;
+  let shellReady = false;
+  let firstWrite = true;
+
+  let statsNode = JSON.parse(fs.readFileSync(nodeStats))
+  let statsWeb = JSON.parse(fs.readFileSync(webStats))
+
+
+  const nodeExtractor = new ChunkExtractor({ stats: statsNode })
+  const { default: App } = nodeExtractor.requireEntrypoint()
+
+  const webExtractor = new ChunkExtractor({ stats: statsWeb })
+
+  const writeable = new Writable({
+    write(chunk, encoding, callback) {
+      // This should pick up any new link tags that hasn't been previously
+      // written to this stream. Should not write before html if nothing suspended.
+      if (shellReady && !firstWrite) {
+        const scriptTags = webExtractor.getScriptTagsSince()
+        const linkTags = webExtractor.getLinkTagsSince()
+        if (scriptTags) {
+          res.write(scriptTags, encoding)
+        }
+        if (linkTags) {
+          res.write(linkTags, encoding)
+        }
+        // Finally write whatever React tried to write.
+      }
+      firstWrite = false
+      res.write(chunk, encoding, callback)
+    },
+    final(callback) {
+      res.end()
+      callback()
+    },
+    flush() {
+      if (typeof res.flush === 'function') {
+        res.flush();
+      }
+    },
+    destroy(err) {
+      res.destroy(err ?? undefined)
+    }
+  })
+
+  const stream = renderToPipeableStream(webExtractor.collectChunks(<App />),
+    {
+      onShellReady() {
+        // The content above all Suspense boundaries is ready.
+        // If something errored before we started streaming, we set the error code appropriately.
+        res.statusCode = didError ? 500 : 200;
+        res.setHeader('Content-type', 'text/html');
+        stream.pipe(writeable);
+        shellReady = true;
+
+      },
+      onShellError(error) {
+        // Something errored before we could complete the shell so we emit an alternative shell.
+        res.statusCode = 500;
+        res.send(
+          '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>'
+        );
+      },
+      onAllReady() {
+        // If you don't want streaming, use this instead of onShellReady.
+        // This will fire after the entire page content is ready.
+        // You can use this for crawlers or static generation.
+        // If nothing suspends, make sure scripts are written
+        writeable.write('')
+        // res.statusCode = didError ? 500 : 200;
+        // res.setHeader('Content-type', 'text/html');
+        // stream.pipe(res);
+      },
+      onError(err) {
+        didError = true;
+        console.error(err);
+      },
+    }
+  );
+
+
+});
+
+// eslint-disable-next-line no-console
+app.listen(9000, () => console.log('Server started http://localhost:9000'))
diff --git a/examples/streaming-server-side-rendering/webpack.config.babel.js b/examples/streaming-server-side-rendering/webpack.config.babel.js
new file mode 100644
index 000000000..d8ecaf214
--- /dev/null
+++ b/examples/streaming-server-side-rendering/webpack.config.babel.js
@@ -0,0 +1,74 @@
+import path from 'path'
+import webpack from 'webpack'
+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 =
+  !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
+
+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',
+        ],
+      },
+    ],
+  },
+  optimization: {
+    moduleIds: 'named',
+    chunkIds: 'named',
+    minimize: false
+  },
+  resolve: {
+    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'],
+  },
+  externals:
+    target === 'node' ? [
+      '@loadable/component',
+      nodeExternals()
+    ] : undefined,
+  output: {
+    path: path.join(DIST_PATH, target),
+    // filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',
+    filename: production ? '[name].js' : '[name].js',
+    publicPath: `/dist/${target}/`,
+    libraryTarget: target === 'node' ? 'commonjs2' : undefined,
+  },
+  plugins: [
+    new LoadablePlugin(),
+    new MiniCssExtractPlugin(),
+    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)}),
+    new webpack.NormalModuleReplacementPlugin(
+      /^react$/,
+      'react/cjs/react.development.js',
+    ),
+    new webpack.NormalModuleReplacementPlugin(
+      /^react-dom$/,
+      'react-dom/cjs/react-dom.development.js',
+    ),],
+})
+
+export default [getConfig('web'), getConfig('node')]
\ No newline at end of file
diff --git a/packages/babel-plugin/src/index.js b/packages/babel-plugin/src/index.js
index 04e960f83..d4cfbc2f6 100644
--- a/packages/babel-plugin/src/index.js
+++ b/packages/babel-plugin/src/index.js
@@ -41,11 +41,17 @@ const loadablePlugin = api => {
     }
 
     // `loadable.lib()`
-    return (
+    if (
       path.get('callee').isMemberExpression() &&
       path.get('callee.object').isIdentifier({ name: 'loadable' }) &&
       path.get('callee.property').isIdentifier({ name: 'lib' })
-    )
+    ) {
+      return true
+    }
+
+    // `lazy()`
+    return (path.get('callee').isIdentifier({ name: 'lazy' }))
+    
   }
 
   function hasLoadableComment(path) {
diff --git a/packages/component/.size-snapshot.json b/packages/component/.size-snapshot.json
index 1c89b445e..7c9dd38e6 100644
--- a/packages/component/.size-snapshot.json
+++ b/packages/component/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 16760,
-    "minified": 7400,
-    "gzipped": 2617
+    "bundled": 16952,
+    "minified": 7470,
+    "gzipped": 2631
   },
   "dist/loadable.esm.js": {
-    "bundled": 16381,
-    "minified": 7096,
-    "gzipped": 2550,
+    "bundled": 16573,
+    "minified": 7166,
+    "gzipped": 2564,
     "treeshaked": {
       "rollup": {
         "code": 276,
         "import_statements": 276
       },
       "webpack": {
-        "code": 5969
+        "code": 6034
       }
     }
   }
diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index 3dc657ba8..42b525f76 100644
--- a/packages/component/src/createLoadable.js
+++ b/packages/component/src/createLoadable.js
@@ -151,16 +151,22 @@ function createLoadable({
           if (options.ssr === false) {
             return
           }
+          
+          if (!options.suspense) {
+            // We run load function, we assume that it won't fail and that it
+            // triggers a synchronous loading of the module
+            ctor.requireAsync(props).catch(() => null)
 
-          // We run load function, we assume that it won't fail and that it
-          // triggers a synchronous loading of the module
-          ctor.requireAsync(props).catch(() => null)
+            // So we can require now the module synchronously
+            this.loadSync()
 
-          // So we can require now the module synchronously
-          this.loadSync()
+            props.__chunkExtractor.addChunk(ctor.chunkName(props))
+
+            return
+          }
 
           props.__chunkExtractor.addChunk(ctor.chunkName(props))
-          return
+          
         }
 
         // Client-side with `isReady` method present (SSR probably)
diff --git a/packages/server/src/ChunkExtractor.js b/packages/server/src/ChunkExtractor.js
index 9341209c9..3e271bc01 100644
--- a/packages/server/src/ChunkExtractor.js
+++ b/packages/server/src/ChunkExtractor.js
@@ -8,6 +8,8 @@ import React from 'react'
 import { invariant, getRequiredChunkKey } from './sharedInternals'
 import ChunkExtractorManager from './ChunkExtractorManager'
 import { smartRequire, joinURLPath } from './util'
+import { fail } from 'assert'
+import { Console } from 'console'
 
 const EXTENSION_SCRIPT_TYPES = {
   '.js': 'script',
@@ -211,6 +213,7 @@ class ChunkExtractor {
     this.statsFile = statsFile
     this.entrypoints = Array.isArray(entrypoints) ? entrypoints : [entrypoints]
     this.chunks = []
+    this.seenChunks = []
     this.inputFileSystem = inputFileSystem
   }
 
@@ -484,6 +487,32 @@ class ChunkExtractor {
     const assets = this.getPreAssets()
     return assets.map(asset => assetToLinkElement(asset, extraProps))
   }
+
+  getLinkTagsSince(extraProps = {}) {
+    const assets = this.getPreAssets()
+    const linkTags = assets.map(asset => {
+      if (!this.seenChunks.includes(asset.chunk)) {
+        this.seenChunks.push(asset.chunk)
+        return assetToLinkTag(asset, extraProps)
+      }
+      return false
+    })
+    return joinTags(linkTags.filter((tag)=>Boolean(tag)))
+  }
+
+  getScriptTagsSince(extraProps = {}) {
+    const requiredScriptTag = this.getRequiredChunksScriptTag(extraProps)
+    const mainAssets = this.getMainAssets('script')
+    const assetsScriptTags = mainAssets.map(asset => {
+      if (!this.seenChunks.includes(asset.chunk)) {
+        this.seenChunks.push(asset.chunk)
+        return assetToScriptTag(asset, extraProps)
+      }
+      return false
+    })
+    return joinTags(assetsScriptTags.filter((tag)=>Boolean(tag)))
+  }
+
 }
 
 export default ChunkExtractor

From 7888f2b4e6dc964672c4a1b598d9e90eec476cdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Saltvik?= <oyvind.saltvik@gmail.com>
Date: Sat, 26 Nov 2022 17:46:54 +0100
Subject: [PATCH 2/3] Use React.lazy so we actually suspend. Make reactLazy a
 own option and method.

---
 .../src/client/App.js                         | 21 +++----
 .../src/server/main.js                        |  4 +-
 packages/babel-plugin/src/index.js            |  4 +-
 packages/component/.size-snapshot.json        | 14 ++---
 packages/component/src/createLoadable.js      | 60 ++++++++++++-------
 packages/component/src/index.js               |  5 +-
 packages/component/src/library.js             |  2 +-
 packages/component/src/loadable.js            |  2 +-
 packages/server/src/ChunkExtractor.js         | 37 ++++++------
 9 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/examples/streaming-server-side-rendering/src/client/App.js b/examples/streaming-server-side-rendering/src/client/App.js
index 3ac6b4fa7..10df258bd 100644
--- a/examples/streaming-server-side-rendering/src/client/App.js
+++ b/examples/streaming-server-side-rendering/src/client/App.js
@@ -1,24 +1,22 @@
 import React from 'react'
-import { ErrorBoundary } from 'react-error-boundary';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { lazy } from '@loadable/component'
+import { reactLazy } from '@loadable/component'
 import Html from './Html'
 
-const A = lazy(() => import('./letters/A'))
-const B = lazy(() => import('./letters/B'))
-const C = lazy(() => import(/* webpackPreload: true */ './letters/C'))
-const D = lazy(() => import(/* webpackPrefetch: true */ './letters/D'))
-const E = lazy(() => import('./letters/E?param'), { ssr: false })
-const X = lazy(props => import(`./letters/${props.letter}`))
-const Sub = lazy(props => import(`./letters/${props.letter}/file`))
-const RootSub = lazy(props => import(`./${props.letter}/file`))
+const A = reactLazy(() => import('./letters/A'))
+const B = reactLazy(() => import('./letters/B'))
+const C = reactLazy(() => import(/* webpackPreload: true */ './letters/C'))
+const D = reactLazy(() => import(/* webpackPrefetch: true */ './letters/D'))
+const E = reactLazy(() => import('./letters/E?param'), { ssr: false })
+const X = reactLazy(props => import(`./letters/${props.letter}`))
+const Sub = reactLazy(props => import(`./letters/${props.letter}/file`))
+const RootSub = reactLazy(props => import(`./${props.letter}/file`))
 
 const App = () => {
   return (
     <Html title="Hello">
     <React.Suspense fallback="Loading">
-      <ErrorBoundary FallbackComponent={Error}>  
           <A />
           <br />
           <B />
@@ -32,7 +30,6 @@ const App = () => {
           <Sub letter="Z" />
           <br />
           <RootSub letter="Y" />
-        </ErrorBoundary>
       </React.Suspense>
     </Html>
   )
diff --git a/examples/streaming-server-side-rendering/src/server/main.js b/examples/streaming-server-side-rendering/src/server/main.js
index f6d2d00a5..249120215 100644
--- a/examples/streaming-server-side-rendering/src/server/main.js
+++ b/examples/streaming-server-side-rendering/src/server/main.js
@@ -59,8 +59,8 @@ app.get('*', (req, res) => {
       // This should pick up any new link tags that hasn't been previously
       // written to this stream. Should not write before html if nothing suspended.
       if (shellReady && !firstWrite) {
-        const scriptTags = webExtractor.getScriptTagsSince()
-        const linkTags = webExtractor.getLinkTagsSince()
+        const scriptTags = webExtractor.flushScriptTags()
+        const linkTags = webExtractor.flushLinkTags()
         if (scriptTags) {
           res.write(scriptTags, encoding)
         }
diff --git a/packages/babel-plugin/src/index.js b/packages/babel-plugin/src/index.js
index d4cfbc2f6..ae4c811a2 100644
--- a/packages/babel-plugin/src/index.js
+++ b/packages/babel-plugin/src/index.js
@@ -49,8 +49,8 @@ const loadablePlugin = api => {
       return true
     }
 
-    // `lazy()`
-    return (path.get('callee').isIdentifier({ name: 'lazy' }))
+    // `lazy(), reactLazy()`
+    return (path.get('callee').isIdentifier({ name: 'lazy' }) || path.get('callee').isIdentifier({ name: 'reactLazy' }))
     
   }
 
diff --git a/packages/component/.size-snapshot.json b/packages/component/.size-snapshot.json
index 7c9dd38e6..fa7d1c97b 100644
--- a/packages/component/.size-snapshot.json
+++ b/packages/component/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 16952,
-    "minified": 7470,
-    "gzipped": 2631
+    "bundled": 17958,
+    "minified": 7858,
+    "gzipped": 2724
   },
   "dist/loadable.esm.js": {
-    "bundled": 16573,
-    "minified": 7166,
-    "gzipped": 2564,
+    "bundled": 17572,
+    "minified": 7549,
+    "gzipped": 2652,
     "treeshaked": {
       "rollup": {
         "code": 276,
         "import_statements": 276
       },
       "webpack": {
-        "code": 6034
+        "code": 6298
       }
     }
   }
diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index 42b525f76..5eecec182 100644
--- a/packages/component/src/createLoadable.js
+++ b/packages/component/src/createLoadable.js
@@ -118,6 +118,18 @@ function createLoadable({
 
       return promise
     }
+    const lazyCachedLoad = props => {
+      const cacheKey = getCacheKey(props)
+      let lazyOrComponent = cache[cacheKey]
+
+      if (!lazyOrComponent) {
+        lazyOrComponent = React.lazy(()=>ctor.importAsync(props))
+        cache[cacheKey] = lazyOrComponent
+
+      }
+
+      return lazyOrComponent
+    }
 
     class InnerLoadable extends React.Component {
       static getDerivedStateFromProps(props, state) {
@@ -151,8 +163,7 @@ function createLoadable({
           if (options.ssr === false) {
             return
           }
-          
-          if (!options.suspense) {
+          if (!options.reactLazy) {
             // We run load function, we assume that it won't fail and that it
             // triggers a synchronous loading of the module
             ctor.requireAsync(props).catch(() => null)
@@ -160,20 +171,16 @@ function createLoadable({
             // So we can require now the module synchronously
             this.loadSync()
 
-            props.__chunkExtractor.addChunk(ctor.chunkName(props))
-
-            return
           }
-
           props.__chunkExtractor.addChunk(ctor.chunkName(props))
-          
+          return
         }
 
         // Client-side with `isReady` method present (SSR probably)
         // If module is already loaded, we use a synchronous loading
         // Only perform this synchronous loading if the component has not
         // been marked with no SSR, else we risk hydration mismatches
-        if (
+        else if (
           options.ssr !== false &&
           // is ready - was loaded in this session
           ((ctor.isReady && ctor.isReady(props)) ||
@@ -186,25 +193,27 @@ function createLoadable({
       }
 
       componentDidMount() {
-        this.mounted = true
+        if (!options.reactLazy) {
+          this.mounted = true
 
-        // retrieve loading promise from a global cache
-        const cachedPromise = this.getCache()
+          // retrieve loading promise from a global cache
+          const cachedPromise = this.getCache()
 
-        // if promise exists, but rejected - clear cache
-        if (cachedPromise && cachedPromise.status === STATUS_REJECTED) {
-          this.setCache()
-        }
+          // if promise exists, but rejected - clear cache
+          if (cachedPromise && cachedPromise.status === STATUS_REJECTED) {
+            this.setCache()
+          }
 
-        // component might be resolved synchronously in the constructor
-        if (this.state.loading) {
-          this.loadAsync()
+          // component might be resolved synchronously in the constructor
+          if (this.state.loading) {
+            this.loadAsync()
+          }
         }
       }
 
       componentDidUpdate(prevProps, prevState) {
         // Component has to be reloaded on cacheKey change
-        if (prevState.cacheKey !== this.state.cacheKey) {
+        if (prevState.cacheKey !== this.state.cacheKey && !options.reactLazy) {
           this.loadAsync()
         }
       }
@@ -318,6 +327,14 @@ function createLoadable({
         } = this.props
         const { error, loading, result } = this.state
 
+        if (options.reactLazy) {
+          return render({
+            fallback,
+            result: lazyCachedLoad(props),
+            options,
+            props: { ...props, ref: forwardedRef },
+          })
+        }
         if (options.suspense) {
           const cachedPromise = this.getCache() || this.loadAsync()
           if (cachedPromise.status === STATUS_PENDING) {
@@ -367,7 +384,10 @@ function createLoadable({
     return loadable(ctor, { ...options, suspense: true })
   }
 
-  return { loadable, lazy }
+  function reactLazy(ctor, options) {
+    return loadable(ctor, { ...options, reactLazy: true })
+  }
+  return { loadable, lazy, reactLazy }
 }
 
 export default createLoadable
diff --git a/packages/component/src/index.js b/packages/component/src/index.js
index d026b247f..c4d7e55de 100644
--- a/packages/component/src/index.js
+++ b/packages/component/src/index.js
@@ -6,11 +6,12 @@ import * as libraryExports from './library'
 const { loadable } = loadableExports
 loadable.lib = libraryExports.loadable
 
-const { lazy } = loadableExports
+const { lazy, reactLazy } = loadableExports
 lazy.lib = libraryExports.lazy
+reactLazy.lib = libraryExports.reactLazy
 
 export default loadable
-export { lazy }
+export { lazy, reactLazy }
 
 export { default as loadableReady } from './loadableReady'
 export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = sharedInternals
diff --git a/packages/component/src/library.js b/packages/component/src/library.js
index 8d945dc60..a938a8727 100644
--- a/packages/component/src/library.js
+++ b/packages/component/src/library.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define, react/no-multi-comp */
 import createLoadable from './createLoadable'
 
-export const { loadable, lazy } = createLoadable({
+export const { loadable, lazy, reactLazy } = createLoadable({
   onLoad(result, props) {
     if (result && props.forwardedRef) {
       if (typeof props.forwardedRef === 'function') {
diff --git a/packages/component/src/loadable.js b/packages/component/src/loadable.js
index 6944bf14a..fc340f9ab 100644
--- a/packages/component/src/loadable.js
+++ b/packages/component/src/loadable.js
@@ -3,7 +3,7 @@ import React from 'react'
 import createLoadable from './createLoadable'
 import { defaultResolveComponent } from './resolvers'
 
-export const { loadable, lazy } = createLoadable({
+export const { loadable, lazy, reactLazy } = createLoadable({
   defaultResolveComponent,
   render({ result: Component, props }) {
     return <Component {...props} />
diff --git a/packages/server/src/ChunkExtractor.js b/packages/server/src/ChunkExtractor.js
index 3e271bc01..59052d97f 100644
--- a/packages/server/src/ChunkExtractor.js
+++ b/packages/server/src/ChunkExtractor.js
@@ -213,7 +213,7 @@ class ChunkExtractor {
     this.statsFile = statsFile
     this.entrypoints = Array.isArray(entrypoints) ? entrypoints : [entrypoints]
     this.chunks = []
-    this.seenChunks = []
+    this.seenChunks = new Set([])
     this.inputFileSystem = inputFileSystem
   }
 
@@ -488,29 +488,26 @@ class ChunkExtractor {
     return assets.map(asset => assetToLinkElement(asset, extraProps))
   }
 
-  getLinkTagsSince(extraProps = {}) {
+  flushLinkTags(extraProps = {}) {
     const assets = this.getPreAssets()
-    const linkTags = assets.map(asset => {
-      if (!this.seenChunks.includes(asset.chunk)) {
-        this.seenChunks.push(asset.chunk)
-        return assetToLinkTag(asset, extraProps)
-      }
-      return false
-    })
-    return joinTags(linkTags.filter((tag)=>Boolean(tag)))
+    const linkTags = assets
+      .filter(asset => !this.seenChunks.has(asset.chunk))
+      .map(asset => assetToLinkTag(asset, extraProps));
+
+    assets.forEach(({ chunk }) => this.seenChunks.add(chunk));
+    
+    return joinTags(linkTags)
   }
 
-  getScriptTagsSince(extraProps = {}) {
-    const requiredScriptTag = this.getRequiredChunksScriptTag(extraProps)
+  flushScriptTags(extraProps = {}) {
     const mainAssets = this.getMainAssets('script')
-    const assetsScriptTags = mainAssets.map(asset => {
-      if (!this.seenChunks.includes(asset.chunk)) {
-        this.seenChunks.push(asset.chunk)
-        return assetToScriptTag(asset, extraProps)
-      }
-      return false
-    })
-    return joinTags(assetsScriptTags.filter((tag)=>Boolean(tag)))
+    const assetsScriptTags = mainAssets
+      .filter(asset => !this.seenChunks.has(asset.chunk))
+      .map(asset => assetToScriptTag(asset, extraProps));
+
+    mainAssets.forEach(({ chunk }) => this.seenChunks.add(chunk));
+    
+    return joinTags(assetsScriptTags)
   }
 
 }

From 43b8417ce3fadfbcc5a2a92d26a611159cf4e3e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Saltvik?= <oyvind.saltvik@gmail.com>
Date: Sat, 26 Nov 2022 19:01:38 +0100
Subject: [PATCH 3/3] Add support for ssr: false to reactLazy

---
 packages/component/.size-snapshot.json   | 14 +++++++-------
 packages/component/src/createLoadable.js |  8 +++++++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/component/.size-snapshot.json b/packages/component/.size-snapshot.json
index fa7d1c97b..f93275c62 100644
--- a/packages/component/.size-snapshot.json
+++ b/packages/component/.size-snapshot.json
@@ -1,20 +1,20 @@
 {
   "dist/loadable.cjs.js": {
-    "bundled": 17958,
-    "minified": 7858,
-    "gzipped": 2724
+    "bundled": 18151,
+    "minified": 8002,
+    "gzipped": 2788
   },
   "dist/loadable.esm.js": {
-    "bundled": 17572,
-    "minified": 7549,
-    "gzipped": 2652,
+    "bundled": 17765,
+    "minified": 7693,
+    "gzipped": 2718,
     "treeshaked": {
       "rollup": {
         "code": 276,
         "import_statements": 276
       },
       "webpack": {
-        "code": 6298
+        "code": 6434
       }
     }
   }
diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index 5eecec182..d445b5f5b 100644
--- a/packages/component/src/createLoadable.js
+++ b/packages/component/src/createLoadable.js
@@ -119,6 +119,7 @@ function createLoadable({
       return promise
     }
     const lazyCachedLoad = props => {
+      if (props.__chunkExtractor && options.ssr === false) return null
       const cacheKey = getCacheKey(props)
       let lazyOrComponent = cache[cacheKey]
 
@@ -157,6 +158,11 @@ function createLoadable({
           'SSR requires `@loadable/babel-plugin`, please install it',
         )
 
+        invariant(
+          !options.reactLazy || !props.fallback,
+          'reactLazy cannot be used with fallback, wrap in a Suspense',
+        )
+
         // Server-side
         if (props.__chunkExtractor) {
           // This module has been marked with no SSR
@@ -330,7 +336,7 @@ function createLoadable({
         if (options.reactLazy) {
           return render({
             fallback,
-            result: lazyCachedLoad(props),
+            result: lazyCachedLoad(props) ,
             options,
             props: { ...props, ref: forwardedRef },
           })