create react-18 streaming example

theKashey · Mar 29, 2024 · 4ef6f43 · 4ef6f43
1 parent c76f742
commit 4ef6f43
Show file tree

Hide file tree

Showing 28 changed files with 1,861 additions and 128 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16
+18
diff --git a/.size-limit.js b/.size-limit.js
@@ -1,7 +1,7 @@
 module.exports = [
-  {
-    path: ['moveStyles.js'],
-    ignore: ['tslib'],
-    limit: '0.5 KB',
-  },
+  // {
+  //   path: ['src/moveStyles.ts'],
+  //   ignore: ['tslib'],
+  //   limit: '0.5 KB',
+  // },
 ];
diff --git a/.size.json b/.size.json
@@ -1,7 +1,3 @@
-[
-  {
-    "name": "moveStyles.js",
-    "passed": true,
-    "size": 162
-  }
-]
+{
+  "error": "WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.\n - configuration.entry['index'] should be an non-empty array.\n   -> A non-empty array of non-empty strings\n    at webpack (/Users/akorzunov/dev/github/loaders/used-styles/node_modules/webpack/lib/webpack.js:31:9)\n    at /Users/akorzunov/dev/github/loaders/used-styles/node_modules/@size-limit/webpack/run-webpack.js:5:20\n    at new Promise (<anonymous>)\n    at runWebpack (/Users/akorzunov/dev/github/loaders/used-styles/node_modules/@size-limit/webpack/run-webpack.js:4:10)\n    at Object.step40 (/Users/akorzunov/dev/github/loaders/used-styles/node_modules/@size-limit/webpack/index.js:59:38)\n    at /Users/akorzunov/dev/github/loaders/used-styles/node_modules/size-limit/calc.js:8:62\n    at Array.map (<anonymous>)\n    at exec (/Users/akorzunov/dev/github/loaders/used-styles/node_modules/size-limit/calc.js:8:41)\n    at calc (/Users/akorzunov/dev/github/loaders/used-styles/node_modules/size-limit/calc.js:14:42)\n    at processTicksAndRejections (node:internal/process/task_queues:96:5)"
+}
diff --git a/doczrc.js b/doczrc.js
diff --git a/example/app.tsx b/example/app.tsx
diff --git a/example/assets/.gitkeep b/example/assets/.gitkeep
diff --git a/example/index.html b/example/index.html
diff --git a/example/index.tsx b/example/index.tsx
diff --git a/example/react-18-streaming/index.html b/example/react-18-streaming/index.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html lang="en">
+<body>
+<div id="app" style="display: contents"></div>
+<script type="module" src="/src/client.tsx" defer></script>
+</body>
+</html>
diff --git a/example/react-18-streaming/package.json b/example/react-18-streaming/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "used-styles-react-18",
+  "private": true,
+  "scripts": {
+    "start:server": "ts-node ./src/server.tsx",
+    "start:client": "vite . --port 3001"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "multistream": "^4.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/multistream": "^4.1.3",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
+    "ts-node": "^10.9.2",
+    "vite": "^5.2.6"
+  }
+}
diff --git a/example/react-18-streaming/src/App.tsx b/example/react-18-streaming/src/App.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const App = () => (
+  <div className="app">
+    your app <div className="test">and your styles</div>
+  </div>
+);
diff --git a/example/react-18-streaming/src/client.tsx b/example/react-18-streaming/src/client.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { moveStyles } from '../../../moveStyles';
+
+import { App } from './App';
+
+// Call before `ReactDOM.hydrateRoot`
+moveStyles();
+
+ReactDOM.hydrateRoot(
+  document.getElementById('root'),
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/example/react-18-streaming/src/entry-server.tsx b/example/react-18-streaming/src/entry-server.tsx
@@ -0,0 +1,66 @@
+// entry-server.js
+import { Readable } from 'node:stream';
+import { Transform } from 'stream';
+
+import { Response } from 'express';
+import MultiStream from 'multistream';
+import React from 'react';
+import { renderToPipeableStream } from 'react-dom/server';
+
+import { App } from './App';
+
+// small utility for "readable" streams
+const readableString = (string: string) => {
+  const s = new Readable();
+  s.push(string);
+  s.push(null);
+  s._read = () => true;
+
+  return s;
+};
+
+const ABORT_DELAY = 10000;
+
+export const renderApp = async (res: Response, styledStream: Transform) => {
+  let didError = false;
+
+  const { pipe, abort } = renderToPipeableStream(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+    {
+      onShellError() {
+        res.sendStatus(500);
+      },
+      // wait for all pieces to be ready
+      onAllReady() {
+        res.status(didError ? 500 : 200);
+        res.set({ 'Content-Type': 'text/html' });
+
+        // allow client to start loading js bundle
+        res.write(`<!DOCTYPE html><html><head><script defer src="client.js"></script></head><body><div id="root">`);
+
+        const endStream = readableString('</div></body></html>');
+
+        // concatenate all streams together
+        const streams = [
+          styledStream, // the main content
+          endStream, // closing tags
+        ];
+
+        new MultiStream(streams).pipe(res);
+
+        // start by piping react and styled transform stream
+        pipe(styledStream);
+      },
+      onError(error) {
+        didError = true;
+        console.error(error);
+      },
+    }
+  );
+
+  setTimeout(() => {
+    abort();
+  }, ABORT_DELAY);
+};
diff --git a/example/react-18-streaming/src/server.tsx b/example/react-18-streaming/src/server.tsx
@@ -0,0 +1,39 @@
+import express from 'express';
+
+import {
+  discoverProjectStyles,
+  createCriticalStyleStream,
+  // createStyleStream,
+  // createLink,
+} from '../../../';
+
+import { renderApp } from './entry-server';
+
+const app = express();
+
+// generate lookup table on server start
+const stylesLookup = discoverProjectStyles(__dirname);
+
+app.use('*', async (_req, res) => {
+  await stylesLookup;
+
+  try {
+    // create a style steam
+    // const styledStream = createStyleStream(stylesLookup, (style) => {
+    //     // _return_ link tag, and it will be appended to the stream output
+    //     return createLink(`${style}`) // <link href="dist/mystyle.css />
+    // });
+
+    // or create critical CSS stream - it will inline all styles
+    // console.log(stylesLookup)
+
+    const styledStream = createCriticalStyleStream(stylesLookup); // <style>.myClass {...
+
+    await renderApp(res, styledStream);
+  } catch (err) {
+    res.sendStatus(500);
+  }
+});
+
+console.log('listening on port 3000');
+app.listen(3000);
diff --git a/example/react-18-streaming/src/styles.css b/example/react-18-streaming/src/styles.css
@@ -0,0 +1,7 @@
+.app {
+  color: red;
+}
+
+.test {
+  color: blue;
+}