Skip to content

Commit d1432b0

Browse files
Rich-HarrisRich-Harris
authored
chore: fix playground prod preview (#12334)
* chore: fix playground prod preview * tweak * tweak
1 parent 5eff68f commit d1432b0

File tree

7 files changed

+72
-73
lines changed

7 files changed

+72
-73
lines changed

‎playgrounds/demo/demo-client.ts

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎playgrounds/demo/dist/index.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎playgrounds/demo/index.html

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@
88
<body>
99
<noscript>You need to enable JavaScript to run this app.</noscript>
1010
<div id="root"><!--ssr-body--></div>
11-
<script type="module" src="/demo-client.ts"></script>
11+
12+
<script type="module">
13+
import { mount, hydrate, unmount } from 'svelte';
14+
import App from '/src/main.svelte';
15+
16+
const root = document.getElementById('root');
17+
const render = root.firstChild?.nextSibling ? hydrate : mount;
18+
19+
const component = render(App, {
20+
target: document.getElementById('root')
21+
});
22+
23+
// @ts-ignore
24+
window.unmount = () => unmount(component);
25+
</script>
1226
</body>
1327
</html>

‎playgrounds/demo/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
"scripts": {
77
"prepare": "node scripts/create-app-svelte.js",
88
"dev": "vite --host",
9-
"ssr": "node ./demo-server.js",
10-
"build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr demo-server.ts",
11-
"prod": "npm run build && node dist",
9+
"ssr": "node ./ssr-dev.js",
10+
"build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr ssr-prod.js",
11+
"prod": "npm run build && node dist/server/ssr-prod",
1212
"preview": "vite preview"
1313
},
1414
"devDependencies": {

‎playgrounds/demo/demo-server.js renamed to ‎playgrounds/demo/ssr-dev.js

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,24 @@ import path from 'node:path';
44
import { fileURLToPath } from 'node:url';
55
import polka from 'polka';
66
import { createServer as createViteServer } from 'vite';
7+
import { render } from 'svelte/server';
78

89
const PORT = process.env.PORT || '5173';
910

1011
const __dirname = path.dirname(fileURLToPath(import.meta.url));
1112

1213
process.env.NODE_ENV = 'development';
1314

14-
async function createServer() {
15-
const app = polka();
16-
17-
const vite = await createViteServer({
18-
server: { middlewareMode: true },
19-
appType: 'custom'
20-
});
21-
22-
app.use(vite.middlewares);
23-
24-
app.use('*', async (req, res) => {
25-
if (req.originalUrl !== '/') {
26-
res.writeHead(200, {
27-
'Content-Type': 'application/javascript'
28-
});
29-
res.end(fs.createReadStream(path.resolve('./dist' + req.originalUrl)));
30-
return;
31-
}
15+
const vite = await createViteServer({
16+
server: { middlewareMode: true },
17+
appType: 'custom'
18+
});
3219

20+
polka()
21+
.use(vite.middlewares)
22+
.use(async (req, res) => {
3323
const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
34-
const transformed_template = await vite.transformIndexHtml(req.originalUrl, template);
35-
const { render } = await vite.ssrLoadModule('svelte/server');
24+
const transformed_template = await vite.transformIndexHtml(req.url, template);
3625
const { default: App } = await vite.ssrLoadModule('./src/main.svelte');
3726
const { head, body } = render(App);
3827

@@ -41,18 +30,7 @@ async function createServer() {
4130
.replace(`<!--ssr-body-->`, body);
4231

4332
res.writeHead(200, { 'Content-Type': 'text/html' }).end(html);
44-
});
45-
46-
return { app, vite };
47-
}
48-
49-
createServer()
50-
.then(({ app }) =>
51-
app.listen(PORT, () => {
52-
console.log(`http://localhost:${PORT}`);
53-
})
54-
)
55-
.catch((err) => {
56-
console.error('Error Starting Server:\n', err);
57-
process.exit(1);
33+
})
34+
.listen(PORT, () => {
35+
console.log(`http://localhost:${PORT}`);
5836
});

‎playgrounds/demo/ssr-prod.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import fs from 'node:fs';
2+
import path from 'node:path';
3+
import polka from 'polka';
4+
import { render } from 'svelte/server';
5+
import App from './src/main.svelte';
6+
7+
const { head, body } = render(App);
8+
9+
const rendered = fs
10+
.readFileSync(path.resolve('./dist/client/index.html'), 'utf-8')
11+
.replace(`<!--ssr-html-->`, body)
12+
.replace(`<!--ssr-head-->`, head);
13+
14+
const types = {
15+
'.js': 'application/javascript',
16+
'.css': 'text/css'
17+
};
18+
19+
polka()
20+
.use((req, res) => {
21+
if (req.url === '/') {
22+
res.writeHead(200, { 'content-type': 'text/html' });
23+
res.end(rendered);
24+
return;
25+
}
26+
27+
const file = path.resolve('./dist/client' + req.url);
28+
29+
if (fs.existsSync(file)) {
30+
const type = types[path.extname(req.url)] ?? 'application/octet-stream';
31+
res.writeHead(200, { 'content-type': type });
32+
fs.createReadStream(file).pipe(res);
33+
return;
34+
}
35+
36+
res.writeHead(404);
37+
res.end('not found');
38+
})
39+
.listen('3000');
40+
41+
console.log('listening on http://localhost:3000');

‎playgrounds/demo/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@
1313
"allowJs": true,
1414
"checkJs": true
1515
},
16-
"include": ["./src", "demo-client.ts", "demo-server.ts"]
16+
"include": ["./src", "ssr-dev.js", "ssr-prod.js"]
1717
}

0 commit comments

Comments
 (0)