Skip to content

Commit 16f07f0

Browse files
theKasheytheKashey
authored
Merge pull request #64 from Ibadichan/add-demo
Add new react demo
2 parents 2d3cc75 + cd9f30e commit 16f07f0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+7323
-0
lines changed

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,12 @@ enableReactOptimization(); // just makes it a but faster
136136

137137
# Example
138138

139+
## Demo
140+
- [React SSR](/example/ssr-react/README.md)
141+
- [React SSR + TS](/example/ssr-react-ts/README.md)
142+
- [React Streaming SSR](/example/ssr-react-streaming/README.md)
143+
- [React Streaming SSR + TS](/example/ssr-react-streaming-ts/README.md)
144+
139145
## Static rendering
140146

141147
There is nothing interesting here - just render, just `getUsedStyles`.

‎example/ssr-react-streaming-ts/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎example/ssr-react-streaming-ts/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# React Streaming SSR + TS demo
2+
3+
This template is build using `vite` and uses `renderToPipeableStream` for SSR.
4+
To run the demo:
5+
6+
- dev: `yarn install && yarn dev`.
7+
- prod: `yarn install && yarn build && yarn preview`

‎example/ssr-react-streaming-ts/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
<!--app-head-->
9+
</head>
10+
<body>
11+
<div id="root"><!--app-html--></div>
12+
<script type="module" src="/src/entry-client.tsx"></script>
13+
</body>
14+
</html>

‎example/ssr-react-streaming-ts/package.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "ssr-react-streaming-ts",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "node server",
8+
"build": "npm run build:client && npm run build:server",
9+
"build:client": "vite build --ssrManifest --outDir dist/client",
10+
"build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
11+
"preview": "cross-env NODE_ENV=production node server"
12+
},
13+
"dependencies": {
14+
"compression": "^1.7.4",
15+
"express": "^4.18.2",
16+
"react": "^18.2.0",
17+
"react-dom": "^18.2.0",
18+
"sirv": "^2.0.4",
19+
"used-styles": "^2.6.4"
20+
},
21+
"devDependencies": {
22+
"@types/express": "^4.17.21",
23+
"@types/node": "^20.10.5",
24+
"@types/react": "^18.2.45",
25+
"@types/react-dom": "^18.2.18",
26+
"@vitejs/plugin-react": "^4.2.1",
27+
"cross-env": "^7.0.3",
28+
"typescript": "^5.3.3",
29+
"vite": "^5.0.10"
30+
}
31+
}

‎example/ssr-react-streaming-ts/public/vite.svg

+1
Loading

‎example/ssr-react-streaming-ts/server.js

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import fs from 'node:fs/promises'
2+
import express from 'express'
3+
import {
4+
discoverProjectStyles,
5+
loadStyleDefinitions,
6+
createCriticalStyleStream,
7+
} from 'used-styles'
8+
9+
// Constants
10+
const isProduction = process.env.NODE_ENV === 'production'
11+
const port = process.env.PORT || 5173
12+
const base = process.env.BASE || '/'
13+
const ABORT_DELAY = 10000
14+
15+
// generate lookup table on server start
16+
const stylesLookup = isProduction
17+
? discoverProjectStyles('./dist/client')
18+
// in dev mode vite injects all styles to <head/> element
19+
: loadStyleDefinitions(async () => [])
20+
21+
// Cached production assets
22+
const templateHtml = isProduction
23+
? await fs.readFile('./dist/client/index.html', 'utf-8')
24+
: ''
25+
const ssrManifest = isProduction
26+
? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8')
27+
: undefined
28+
29+
// Create http server
30+
const app = express()
31+
32+
// Add Vite or respective production middlewares
33+
let vite
34+
if (!isProduction) {
35+
const { createServer } = await import('vite')
36+
vite = await createServer({
37+
server: { middlewareMode: true },
38+
appType: 'custom',
39+
base
40+
})
41+
app.use(vite.middlewares)
42+
} else {
43+
const compression = (await import('compression')).default
44+
const sirv = (await import('sirv')).default
45+
app.use(compression())
46+
app.use(base, sirv('./dist/client', { extensions: [] }))
47+
}
48+
49+
// Serve HTML
50+
app.use('*', async (req, res) => {
51+
try {
52+
await stylesLookup
53+
54+
const url = req.originalUrl.replace(base, '')
55+
56+
let template
57+
let render
58+
if (!isProduction) {
59+
// Always read fresh template in development
60+
template = await fs.readFile('./index.html', 'utf-8')
61+
template = await vite.transformIndexHtml(url, template)
62+
render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render
63+
} else {
64+
template = templateHtml
65+
render = (await import('./dist/server/entry-server.js')).render
66+
}
67+
68+
const styledStream = createCriticalStyleStream(stylesLookup)
69+
70+
let didError = false
71+
72+
const { pipe, abort } = render(url, ssrManifest, {
73+
onShellError() {
74+
res.status(500)
75+
res.set({ 'Content-Type': 'text/html' })
76+
res.send('<h1>Something went wrong</h1>')
77+
},
78+
// Can use also `onAllReady` callback
79+
onShellReady() {
80+
res.status(didError ? 500 : 200)
81+
res.set({ 'Content-Type': 'text/html' })
82+
83+
let [htmlStart, htmlEnd] = template.split(`<!--app-html-->`)
84+
85+
// React 19 supports document metadata out of box,
86+
// but for react 18 we can use `react-helmet-async` here:
87+
// htmlStart = htmlStart.replace(`<!--app-head-->`, helmet.title.toString())
88+
89+
res.write(htmlStart)
90+
91+
styledStream.pipe(res, { end: false })
92+
93+
pipe(styledStream)
94+
95+
styledStream.on('end', () => {
96+
res.end(htmlEnd)
97+
})
98+
},
99+
onError(error) {
100+
didError = true
101+
console.error(error)
102+
// You can log crash reports here:
103+
// logServerCrashReport(error)
104+
}
105+
})
106+
107+
setTimeout(() => {
108+
abort()
109+
}, ABORT_DELAY)
110+
} catch (e) {
111+
vite?.ssrFixStacktrace(e)
112+
console.log(e.stack)
113+
res.status(500).end(e.stack)
114+
}
115+
})
116+
117+
// Start http server
118+
app.listen(port, () => {
119+
console.log(`Server started at http://localhost:${port}`)
120+
})

‎example/ssr-react-streaming-ts/src/App.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#root {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
will-change: filter;
12+
}
13+
.logo:hover {
14+
filter: drop-shadow(0 0 2em #646cffaa);
15+
}
16+
.logo.react:hover {
17+
filter: drop-shadow(0 0 2em #61dafbaa);
18+
}
19+
20+
@keyframes logo-spin {
21+
from {
22+
transform: rotate(0deg);
23+
}
24+
to {
25+
transform: rotate(360deg);
26+
}
27+
}
28+
29+
@media (prefers-reduced-motion: no-preference) {
30+
a:nth-of-type(2) .logo {
31+
animation: logo-spin infinite 20s linear;
32+
}
33+
}
34+
35+
.card {
36+
padding: 2em;
37+
}
38+
39+
.read-the-docs {
40+
color: #888;
41+
}

‎example/ssr-react-streaming-ts/src/App.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Suspense, lazy } from "react"
2+
import reactLogo from './assets/react.svg'
3+
import './App.css'
4+
5+
// Works also with SSR as expected
6+
const Card = lazy(() => import("./Card"))
7+
8+
function App() {
9+
return (
10+
<>
11+
<div>
12+
<a href="https://vitejs.dev" target="_blank">
13+
<img src="/vite.svg" className="logo" alt="Vite logo" />
14+
</a>
15+
<a href="https://reactjs.org" target="_blank">
16+
<img src={reactLogo} className="logo react" alt="React logo" />
17+
</a>
18+
</div>
19+
<h1>Vite + React</h1>
20+
21+
<Suspense fallback={<p>Loading card component...</p>}>
22+
<Card />
23+
</Suspense>
24+
25+
<p className="read-the-docs">
26+
Click on the Vite and React logos to learn more
27+
</p>
28+
</>
29+
)
30+
}
31+
32+
export default App

‎example/ssr-react-streaming-ts/src/Card.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useState } from "react"
2+
3+
function Card() {
4+
const [count, setCount] = useState(0)
5+
6+
return (
7+
<div className="card">
8+
<button onClick={() => setCount((count) => count + 1)}>
9+
count is {count}
10+
</button>
11+
<p>
12+
Edit <code>src/App.tsx</code> and save to test HMR
13+
</p>
14+
</div>
15+
)
16+
}
17+
18+
export default Card

‎example/ssr-react-streaming-ts/src/assets/react.svg

+1
Loading

‎example/ssr-react-streaming-ts/src/entry-client.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import './index.css'
2+
import React from 'react'
3+
import ReactDOM from 'react-dom/client'
4+
import { moveStyles } from 'used-styles/moveStyles'
5+
import App from './App'
6+
7+
// Call before `ReactDOM.hydrateRoot`
8+
moveStyles()
9+
10+
ReactDOM.hydrateRoot(
11+
document.getElementById('root') as HTMLElement,
12+
<React.StrictMode>
13+
<App />
14+
</React.StrictMode>
15+
)

‎example/ssr-react-streaming-ts/src/entry-server.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { RenderToPipeableStreamOptions, renderToPipeableStream } from 'react-dom/server'
3+
import App from './App'
4+
5+
export function render(_url: string, _ssrManifest: any, options: RenderToPipeableStreamOptions) {
6+
return renderToPipeableStream(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
options
11+
)
12+
}

0 commit comments

Comments
 (0)