From 235775f84a43c00dfbd9f536e0dee8da96511469 Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Fri, 31 Dec 2021 12:42:13 -0600
Subject: [PATCH] ssr in prod (!!)
---
packages/docs-new/build.ts | 23 +++++++++
packages/docs-new/package.json | 7 ++-
packages/docs-new/src/entry.client.tsx | 5 +-
packages/docs-new/src/entry.server.tsx | 1 -
packages/docs-new/src/root.tsx | 8 ++-
packages/docs-new/src/server.ts | 69 ++++++++++++++++++++++++++
packages/docs-new/src/server.tsx | 35 -------------
packages/docs-new/src/vite-env.d.ts | 1 +
pnpm-lock.yaml | 19 ++++---
9 files changed, 119 insertions(+), 49 deletions(-)
create mode 100644 packages/docs-new/build.ts
create mode 100644 packages/docs-new/src/server.ts
delete mode 100644 packages/docs-new/src/server.tsx
create mode 100644 packages/docs-new/src/vite-env.d.ts
diff --git a/packages/docs-new/build.ts b/packages/docs-new/build.ts
new file mode 100644
index 0000000..6e97ee7
--- /dev/null
+++ b/packages/docs-new/build.ts
@@ -0,0 +1,23 @@
+import { resolve } from "node:path"
+import { build } from "vite"
+
+await build({
+ build: {
+ outDir: "dist/client",
+ lib: {
+ entry: resolve("src/entry.client.tsx"),
+ fileName: () => "entry.client.js",
+ formats: ["es"],
+ },
+ },
+})
+
+await build({
+ build: {
+ ssr: resolve("src/entry.server.tsx"),
+ outDir: "dist/server",
+ rollupOptions: {
+ output: { format: "es" },
+ },
+ },
+})
diff --git a/packages/docs-new/package.json b/packages/docs-new/package.json
index 5bb0550..7594714 100644
--- a/packages/docs-new/package.json
+++ b/packages/docs-new/package.json
@@ -3,19 +3,24 @@
"type": "module",
"private": true,
"scripts": {
- "dev": "esmo src/server.tsx"
+ "dev": "esmo src/server.ts",
+ "build": "esmo build.ts",
+ "start": "NODE_ENV=production esmo src/server.ts"
},
"dependencies": {
"express": "^4.17.2",
+ "reacord": "workspace:*",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
+ "@types/compression": "^1.7.2",
"@types/express": "^4.17.13",
"@types/node": "*",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.9",
"@vitejs/plugin-react": "^1.1.3",
+ "compression": "^1.7.4",
"esno": "^0.13.0",
"typescript": "^4.5.4",
"vite": "^2.7.10"
diff --git a/packages/docs-new/src/entry.client.tsx b/packages/docs-new/src/entry.client.tsx
index e17263b..981a453 100644
--- a/packages/docs-new/src/entry.client.tsx
+++ b/packages/docs-new/src/entry.client.tsx
@@ -1,5 +1,4 @@
-import * as React from "react"
-import { render } from "react-dom"
+import { hydrate } from "react-dom"
import { Root } from "./root"
-render(, document)
+hydrate(, document)
diff --git a/packages/docs-new/src/entry.server.tsx b/packages/docs-new/src/entry.server.tsx
index fff1f09..2d539c0 100644
--- a/packages/docs-new/src/entry.server.tsx
+++ b/packages/docs-new/src/entry.server.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
import { Root } from "./root"
export async function render(url: string) {
diff --git a/packages/docs-new/src/root.tsx b/packages/docs-new/src/root.tsx
index a111273..4cd0302 100644
--- a/packages/docs-new/src/root.tsx
+++ b/packages/docs-new/src/root.tsx
@@ -1,4 +1,3 @@
-import React from "react"
import { Counter } from "./counter"
export function Root() {
@@ -10,7 +9,12 @@ export function Root() {
Reacord
-
+
hi
diff --git a/packages/docs-new/src/server.ts b/packages/docs-new/src/server.ts
new file mode 100644
index 0000000..2051768
--- /dev/null
+++ b/packages/docs-new/src/server.ts
@@ -0,0 +1,69 @@
+import compression from "compression"
+import express, { Router } from "express"
+import { resolve } from "node:path"
+import { renderToString } from "react-dom/server"
+import { createServer as createViteServer } from "vite"
+import type * as entryModule from "./entry.server"
+
+async function createDevelopmentRouter() {
+ const vite = await createViteServer({
+ server: { middlewareMode: "ssr" },
+ })
+
+ return Router()
+ .use(vite.middlewares)
+ .use("*", async (req, res) => {
+ const url = req.originalUrl
+
+ try {
+ const { render } = (await vite.ssrLoadModule(
+ "/src/entry.server.tsx",
+ )) as typeof entryModule
+
+ const html = await vite.transformIndexHtml(
+ url,
+ renderToString(await render(url)),
+ )
+
+ res.status(200).set({ "Content-Type": "text/html" }).end(html)
+ } catch (error: any) {
+ vite.ssrFixStacktrace(error)
+ console.error(error)
+ res.status(500).end(error.stack || error.message)
+ }
+ })
+}
+
+function createProductionRouter() {
+ return Router()
+ .use(compression())
+ .use(express.static(resolve("dist/client")))
+ .use("*", async (req, res) => {
+ try {
+ const { render }: typeof entryModule = await import(
+ "../dist/server/entry.server"
+ )
+
+ res
+ .status(200)
+ .set({ "Content-Type": "text/html" })
+ .end(renderToString(await render(req.originalUrl)))
+ } catch (error: any) {
+ console.error(error)
+ res.status(500).end(error.stack || error.message)
+ }
+ })
+}
+
+const app = express()
+
+if (process.env.NODE_ENV === "production") {
+ app.use(createProductionRouter())
+} else {
+ app.use(await createDevelopmentRouter())
+}
+
+const port = process.env.PORT || 3000
+app.listen(port, () => {
+ console.log(`listening on http://localhost:${port}`)
+})
diff --git a/packages/docs-new/src/server.tsx b/packages/docs-new/src/server.tsx
deleted file mode 100644
index 3a1531b..0000000
--- a/packages/docs-new/src/server.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import express from "express"
-import { renderToStaticMarkup } from "react-dom/server"
-import { createServer as createViteServer } from "vite"
-import type * as entryModule from "./entry.server"
-
-const vite = await createViteServer({
- server: { middlewareMode: "ssr" },
-})
-
-const app = express()
-
-app.use(vite.middlewares)
-
-app.use("*", async (req, res) => {
- const url = req.originalUrl
-
- try {
- const { render } = (await vite.ssrLoadModule(
- "/src/entry.server.tsx",
- )) as typeof entryModule
-
- const content = renderToStaticMarkup(await render(url))
- const html = await vite.transformIndexHtml(url, content)
- res.status(200).set({ "Content-Type": "text/html" }).end(html)
- } catch (error: any) {
- vite.ssrFixStacktrace(error)
- console.error(error)
- res.status(500).end(error.message)
- }
-})
-
-const port = process.env.PORT || 3000
-app.listen(port, () => {
- console.log(`listening on http://localhost:${port}`)
-})
diff --git a/packages/docs-new/src/vite-env.d.ts b/packages/docs-new/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/packages/docs-new/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f86a827..775fdca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,27 +112,33 @@ importers:
packages/docs-new:
specifiers:
+ '@types/compression': ^1.7.2
'@types/express': ^4.17.13
'@types/node': '*'
'@types/react': ^17.0.38
'@types/react-dom': ^17.0.9
'@vitejs/plugin-react': ^1.1.3
+ compression: ^1.7.4
esno: ^0.13.0
express: ^4.17.2
+ reacord: workspace:*
react: ^17.0.2
react-dom: ^17.0.2
typescript: ^4.5.4
vite: ^2.7.10
dependencies:
express: 4.17.2
+ reacord: link:../reacord
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
devDependencies:
+ '@types/compression': 1.7.2
'@types/express': 4.17.13
'@types/node': 17.0.5
'@types/react': 17.0.38
'@types/react-dom': 17.0.11
'@vitejs/plugin-react': 1.1.3
+ compression: 1.7.4
esno: 0.13.0_typescript@4.5.4
typescript: 4.5.4
vite: 2.7.10
@@ -1262,6 +1268,12 @@ packages:
'@types/node': 17.0.5
'@types/responselike': 1.0.0
+ /@types/compression/1.7.2:
+ resolution: {integrity: sha512-lwEL4M/uAGWngWFLSG87ZDr2kLrbuR8p7X+QZB1OQlT+qkHsCPDVFnHPyXf4Vyl4yDDorNY+mAhosxkCvppatg==}
+ dependencies:
+ '@types/express': 4.17.13
+ dev: true
+
/@types/connect/3.4.35:
resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
dependencies:
@@ -1694,7 +1706,6 @@ packages:
dependencies:
mime-types: 2.1.34
negotiator: 0.6.2
- dev: false
/acorn-globals/6.0.0:
resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
@@ -2296,7 +2307,6 @@ packages:
/bytes/3.0.0:
resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=}
engines: {node: '>= 0.8'}
- dev: false
/bytes/3.1.1:
resolution: {integrity: sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==}
@@ -2649,7 +2659,6 @@ packages:
engines: {node: '>= 0.6'}
dependencies:
mime-db: 1.51.0
- dev: false
/compression/1.7.4:
resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
@@ -2662,7 +2671,6 @@ packages:
on-headers: 1.0.2
safe-buffer: 5.1.2
vary: 1.1.2
- dev: false
/concat-map/0.0.1:
resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
@@ -6656,7 +6664,6 @@ packages:
/negotiator/0.6.2:
resolution: {integrity: sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==}
engines: {node: '>= 0.6'}
- dev: false
/nested-error-stacks/2.1.0:
resolution: {integrity: sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==}
@@ -6863,7 +6870,6 @@ packages:
/on-headers/1.0.2:
resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
engines: {node: '>= 0.8'}
- dev: false
/once/1.4.0:
resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=}
@@ -9045,7 +9051,6 @@ packages:
/vary/1.1.2:
resolution: {integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=}
engines: {node: '>= 0.8'}
- dev: false
/vfile-location/4.0.1:
resolution: {integrity: sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==}