Skip to content

Commit 64e8f1d

Browse files
theKasheytheKashey
committed
update examples
1 parent cfce87e commit 64e8f1d

File tree

9 files changed

+225
-237
lines changed

9 files changed

+225
-237
lines changed

‎example/react-18-streaming/src/server.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import express from 'express';
22

33
import {
4-
discoverProjectStyles,
54
createCriticalStyleStream,
65
// createStyleStream,
76
// createLink,
87
} from '../../../';
8+
import { discoverProjectStyles } from '../../../node';
99

1010
import { renderApp } from './entry-server';
1111

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"react": "^18.2.0",
1717
"react-dom": "^18.2.0",
1818
"sirv": "^2.0.4",
19-
"used-styles": "^2.6.4"
19+
"used-styles": "^3.0.0"
2020
},
2121
"devDependencies": {
2222
"@types/express": "^4.17.21",

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

+63-65
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,118 @@
1-
import fs from 'node:fs/promises'
2-
import express from 'express'
3-
import {
4-
discoverProjectStyles,
5-
loadStyleDefinitions,
6-
createCriticalStyleStream,
7-
} from 'used-styles'
1+
import fs from 'node:fs/promises';
2+
3+
import express from 'express';
4+
import { loadStyleDefinitions, createCriticalStyleStream } from 'used-styles';
5+
import { discoverProjectStyles } from 'used-styles/node';
86

97
// 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
8+
const isProduction = process.env.NODE_ENV === 'production';
9+
const port = process.env.PORT || 5173;
10+
const base = process.env.BASE || '/';
11+
const ABORT_DELAY = 10000;
1412

1513
// generate lookup table on server start
1614
const stylesLookup = isProduction
1715
? discoverProjectStyles('./dist/client')
18-
// in dev mode vite injects all styles to <head/> element
19-
: loadStyleDefinitions(async () => [])
16+
: // in dev mode vite injects all styles to <head/> element
17+
loadStyleDefinitions(async () => []);
2018

2119
// 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
20+
const templateHtml = isProduction ? await fs.readFile('./dist/client/index.html', 'utf-8') : '';
21+
const ssrManifest = isProduction ? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8') : undefined;
2822

2923
// Create http server
30-
const app = express()
24+
const app = express();
3125

3226
// Add Vite or respective production middlewares
33-
let vite
27+
let vite;
28+
3429
if (!isProduction) {
35-
const { createServer } = await import('vite')
30+
const { createServer } = await import('vite');
31+
3632
vite = await createServer({
3733
server: { middlewareMode: true },
3834
appType: 'custom',
39-
base
40-
})
41-
app.use(vite.middlewares)
35+
base,
36+
});
37+
38+
app.use(vite.middlewares);
4239
} 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: [] }))
40+
const compression = (await import('compression')).default;
41+
const sirv = (await import('sirv')).default;
42+
app.use(compression());
43+
app.use(base, sirv('./dist/client', { extensions: [] }));
4744
}
4845

4946
// Serve HTML
5047
app.use('*', async (req, res) => {
5148
try {
52-
await stylesLookup
49+
await stylesLookup;
5350

54-
const url = req.originalUrl.replace(base, '')
51+
const url = req.originalUrl.replace(base, '');
52+
53+
let template;
54+
let render;
5555

56-
let template
57-
let render
5856
if (!isProduction) {
5957
// 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
58+
template = await fs.readFile('./index.html', 'utf-8');
59+
template = await vite.transformIndexHtml(url, template);
60+
render = (await vite.ssrLoadModule('/src/entry-server.tsx')).render;
6361
} else {
64-
template = templateHtml
65-
render = (await import('./dist/server/entry-server.js')).render
62+
template = templateHtml;
63+
render = (await import('./dist/server/entry-server.js')).render;
6664
}
6765

68-
const styledStream = createCriticalStyleStream(stylesLookup)
66+
const styledStream = createCriticalStyleStream(stylesLookup);
6967

70-
let didError = false
68+
let didError = false;
7169

7270
const { pipe, abort } = render(url, ssrManifest, {
7371
onShellError() {
74-
res.status(500)
75-
res.set({ 'Content-Type': 'text/html' })
76-
res.send('<h1>Something went wrong</h1>')
72+
res.status(500);
73+
res.set({ 'Content-Type': 'text/html' });
74+
res.send('<h1>Something went wrong</h1>');
7775
},
7876
// Can use also `onAllReady` callback
7977
onShellReady() {
80-
res.status(didError ? 500 : 200)
81-
res.set({ 'Content-Type': 'text/html' })
78+
res.status(didError ? 500 : 200);
79+
res.set({ 'Content-Type': 'text/html' });
8280

83-
let [htmlStart, htmlEnd] = template.split(`<!--app-html-->`)
81+
let [htmlStart, htmlEnd] = template.split(`<!--app-html-->`);
8482

85-
// React 19 supports document metadata out of box,
83+
// React 19 supports document metadata out of box,
8684
// but for react 18 we can use `react-helmet-async` here:
8785
// htmlStart = htmlStart.replace(`<!--app-head-->`, helmet.title.toString())
88-
89-
res.write(htmlStart)
9086

91-
styledStream.pipe(res, { end: false })
87+
res.write(htmlStart);
88+
89+
styledStream.pipe(res, { end: false });
9290

93-
pipe(styledStream)
91+
pipe(styledStream);
9492

9593
styledStream.on('end', () => {
96-
res.end(htmlEnd)
97-
})
94+
res.end(htmlEnd);
95+
});
9896
},
9997
onError(error) {
100-
didError = true
101-
console.error(error)
98+
didError = true;
99+
console.error(error);
102100
// You can log crash reports here:
103101
// logServerCrashReport(error)
104-
}
105-
})
102+
},
103+
});
106104

107105
setTimeout(() => {
108-
abort()
109-
}, ABORT_DELAY)
106+
abort();
107+
}, ABORT_DELAY);
110108
} catch (e) {
111-
vite?.ssrFixStacktrace(e)
112-
console.log(e.stack)
113-
res.status(500).end(e.stack)
109+
vite?.ssrFixStacktrace(e);
110+
console.log(e.stack);
111+
res.status(500).end(e.stack);
114112
}
115-
})
113+
});
116114

117115
// Start http server
118116
app.listen(port, () => {
119-
console.log(`Server started at http://localhost:${port}`)
120-
})
117+
console.log(`Server started at http://localhost:${port}`);
118+
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"react": "^18.2.0",
1717
"react-dom": "^18.2.0",
1818
"sirv": "^2.0.4",
19-
"used-styles": "^2.6.4"
19+
"used-styles": "^3.0.0"
2020
},
2121
"devDependencies": {
2222
"@vitejs/plugin-react": "^4.2.1",

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

+63-65
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,118 @@
1-
import fs from 'node:fs/promises'
2-
import express from 'express'
3-
import {
4-
discoverProjectStyles,
5-
loadStyleDefinitions,
6-
createCriticalStyleStream,
7-
} from 'used-styles'
1+
import fs from 'node:fs/promises';
2+
3+
import express from 'express';
4+
import { loadStyleDefinitions, createCriticalStyleStream } from 'used-styles';
5+
import { discoverProjectStyles } from 'used-styles/node';
86

97
// 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
8+
const isProduction = process.env.NODE_ENV === 'production';
9+
const port = process.env.PORT || 5173;
10+
const base = process.env.BASE || '/';
11+
const ABORT_DELAY = 10000;
1412

1513
// generate lookup table on server start
1614
const stylesLookup = isProduction
1715
? discoverProjectStyles('./dist/client')
18-
// in dev mode vite injects all styles to <head/> element
19-
: loadStyleDefinitions(async () => [])
16+
: // in dev mode vite injects all styles to <head/> element
17+
loadStyleDefinitions(async () => []);
2018

2119
// 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
20+
const templateHtml = isProduction ? await fs.readFile('./dist/client/index.html', 'utf-8') : '';
21+
const ssrManifest = isProduction ? await fs.readFile('./dist/client/.vite/ssr-manifest.json', 'utf-8') : undefined;
2822

2923
// Create http server
30-
const app = express()
24+
const app = express();
3125

3226
// Add Vite or respective production middlewares
33-
let vite
27+
let vite;
28+
3429
if (!isProduction) {
35-
const { createServer } = await import('vite')
30+
const { createServer } = await import('vite');
31+
3632
vite = await createServer({
3733
server: { middlewareMode: true },
3834
appType: 'custom',
39-
base
40-
})
41-
app.use(vite.middlewares)
35+
base,
36+
});
37+
38+
app.use(vite.middlewares);
4239
} 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: [] }))
40+
const compression = (await import('compression')).default;
41+
const sirv = (await import('sirv')).default;
42+
app.use(compression());
43+
app.use(base, sirv('./dist/client', { extensions: [] }));
4744
}
4845

4946
// Serve HTML
5047
app.use('*', async (req, res) => {
5148
try {
52-
await stylesLookup
49+
await stylesLookup;
5350

54-
const url = req.originalUrl.replace(base, '')
51+
const url = req.originalUrl.replace(base, '');
52+
53+
let template;
54+
let render;
5555

56-
let template
57-
let render
5856
if (!isProduction) {
5957
// 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.jsx')).render
58+
template = await fs.readFile('./index.html', 'utf-8');
59+
template = await vite.transformIndexHtml(url, template);
60+
render = (await vite.ssrLoadModule('/src/entry-server.jsx')).render;
6361
} else {
64-
template = templateHtml
65-
render = (await import('./dist/server/entry-server.js')).render
62+
template = templateHtml;
63+
render = (await import('./dist/server/entry-server.js')).render;
6664
}
6765

68-
const styledStream = createCriticalStyleStream(stylesLookup)
66+
const styledStream = createCriticalStyleStream(stylesLookup);
6967

70-
let didError = false
68+
let didError = false;
7169

7270
const { pipe, abort } = render(url, ssrManifest, {
7371
onShellError() {
74-
res.status(500)
75-
res.set({ 'Content-Type': 'text/html' })
76-
res.send('<h1>Something went wrong</h1>')
72+
res.status(500);
73+
res.set({ 'Content-Type': 'text/html' });
74+
res.send('<h1>Something went wrong</h1>');
7775
},
7876
// Can use also `onAllReady` callback
7977
onShellReady() {
80-
res.status(didError ? 500 : 200)
81-
res.set({ 'Content-Type': 'text/html' })
78+
res.status(didError ? 500 : 200);
79+
res.set({ 'Content-Type': 'text/html' });
8280

83-
let [htmlStart, htmlEnd] = template.split(`<!--app-html-->`)
81+
let [htmlStart, htmlEnd] = template.split(`<!--app-html-->`);
8482

85-
// React 19 supports document metadata out of box,
83+
// React 19 supports document metadata out of box,
8684
// but for react 18 we can use `react-helmet-async` here:
8785
// htmlStart = htmlStart.replace(`<!--app-head-->`, helmet.title.toString())
88-
89-
res.write(htmlStart)
9086

91-
styledStream.pipe(res, { end: false })
87+
res.write(htmlStart);
88+
89+
styledStream.pipe(res, { end: false });
9290

93-
pipe(styledStream)
91+
pipe(styledStream);
9492

9593
styledStream.on('end', () => {
96-
res.end(htmlEnd)
97-
})
94+
res.end(htmlEnd);
95+
});
9896
},
9997
onError(error) {
100-
didError = true
101-
console.error(error)
98+
didError = true;
99+
console.error(error);
102100
// You can log crash reports here:
103101
// logServerCrashReport(error)
104-
}
105-
})
102+
},
103+
});
106104

107105
setTimeout(() => {
108-
abort()
109-
}, ABORT_DELAY)
106+
abort();
107+
}, ABORT_DELAY);
110108
} catch (e) {
111-
vite?.ssrFixStacktrace(e)
112-
console.log(e.stack)
113-
res.status(500).end(e.stack)
109+
vite?.ssrFixStacktrace(e);
110+
console.log(e.stack);
111+
res.status(500).end(e.stack);
114112
}
115-
})
113+
});
116114

117115
// Start http server
118116
app.listen(port, () => {
119-
console.log(`Server started at http://localhost:${port}`)
120-
})
117+
console.log(`Server started at http://localhost:${port}`);
118+
});

0 commit comments

Comments
 (0)