msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

chore: fix playground prod preview (#12334)

Browse Source 
* chore: fix playground prod preview

* tweak

* tweak
pull/12339/head
Rich Harris 6 months ago committed by GitHub
parent 5eff68f63d
commit d1432b0ab3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 72 additions and 73 deletions
Show Stats Download Patch File Download Diff File

12
playgrounds/demo/demo-client.ts
Unescape View File

@ -1,12 +0,0 @@
import { mount, hydrate, unmount } from 'svelte';
import App from './src/main.svelte';
const root = document.getElementById('root')!;
const render = root.firstChild?.nextSibling ? hydrate : mount;
const component = render(App, {
target: document.getElementById('root')!
});
// @ts-ignore
window.unmount = () => unmount(component);

22
playgrounds/demo/dist/index.js vendored
Unescape View File

@ -1,22 +0,0 @@
import fs from 'node:fs';
import path from 'node:path';
import express from 'express';
import { head, body } from './server/entry-server.js';
const rendered = fs
.readFileSync(path.resolve('./dist/client/index.html'), 'utf-8')
.replace(`<!--ssr-html-->`, body)
.replace(`<!--ssr-head-->`, head);
express()
.use('*', async (req, res) => {
if (req.originalUrl !== '/') {
res.sendFile(path.resolve('./dist/client' + req.originalUrl));
return;
}
res.status(200).set({ 'Content-Type': 'text/html' }).end(rendered);
})
.listen('3000');
console.log('listening on http://localhost:3000');

16
playgrounds/demo/index.html
Unescape View File

@ -8,6 +8,20 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><!--ssr-body--></div>
<script type="module" src="/demo-client.ts"></script>
<script type="module">
import { mount, hydrate, unmount } from 'svelte';
import App from '/src/main.svelte';
const root = document.getElementById('root');
const render = root.firstChild?.nextSibling ? hydrate : mount;
const component = render(App, {
target: document.getElementById('root')
});
// @ts-ignore
window.unmount = () => unmount(component);
</script>
</body>
</html>

6
playgrounds/demo/package.json
Unescape View File

@ -6,9 +6,9 @@
"scripts": {
"prepare": "node scripts/create-app-svelte.js",
"dev": "vite --host",
"ssr": "node ./demo-server.js",
"build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr demo-server.ts",
"prod": "npm run build && node dist",
"ssr": "node ./ssr-dev.js",
"build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr ssr-prod.js",
"prod": "npm run build && node dist/server/ssr-prod",
"preview": "vite preview"
},
"devDependencies": {

40
playgrounds/demo/demo-server.js → playgrounds/demo/ssr-dev.js
Unescape View File

@ -4,6 +4,7 @@ import path from 'node:path';
import { fileURLToPath } from 'node:url';
import polka from 'polka';
import { createServer as createViteServer } from 'vite';
import { render } from 'svelte/server';
const PORT = process.env.PORT || '5173';
@ -11,28 +12,16 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
process.env.NODE_ENV = 'development';
async function createServer() {
const app = polka();
const vite = await createViteServer({
const vite = await createViteServer({
server: { middlewareMode: true },
appType: 'custom'
});
app.use(vite.middlewares);
app.use('*', async (req, res) => {
if (req.originalUrl !== '/') {
res.writeHead(200, {
'Content-Type': 'application/javascript'
});
res.end(fs.createReadStream(path.resolve('./dist' + req.originalUrl)));
return;
}
});
polka()
.use(vite.middlewares)
.use(async (req, res) => {
const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
const transformed_template = await vite.transformIndexHtml(req.originalUrl, template);
const { render } = await vite.ssrLoadModule('svelte/server');
const transformed_template = await vite.transformIndexHtml(req.url, template);
const { default: App } = await vite.ssrLoadModule('./src/main.svelte');
const { head, body } = render(App);
@ -41,18 +30,7 @@ async function createServer() {
.replace(`<!--ssr-body-->`, body);
res.writeHead(200, { 'Content-Type': 'text/html' }).end(html);
});
return { app, vite };
}
createServer()
.then(({ app }) =>
app.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
})
)
.catch((err) => {
console.error('Error Starting Server:\n', err);
process.exit(1);
.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
});

41
playgrounds/demo/ssr-prod.js
Unescape View File

@ -0,0 +1,41 @@
import fs from 'node:fs';
import path from 'node:path';
import polka from 'polka';
import { render } from 'svelte/server';
import App from './src/main.svelte';
const { head, body } = render(App);
const rendered = fs
.readFileSync(path.resolve('./dist/client/index.html'), 'utf-8')
.replace(`<!--ssr-html-->`, body)
.replace(`<!--ssr-head-->`, head);
const types = {
'.js': 'application/javascript',
'.css': 'text/css'
};
polka()
.use((req, res) => {
if (req.url === '/') {
res.writeHead(200, { 'content-type': 'text/html' });
res.end(rendered);
return;
}
const file = path.resolve('./dist/client' + req.url);
if (fs.existsSync(file)) {
const type = types[path.extname(req.url)] ?? 'application/octet-stream';
res.writeHead(200, { 'content-type': type });
fs.createReadStream(file).pipe(res);
return;
}
res.writeHead(404);
res.end('not found');
})
.listen('3000');
console.log('listening on http://localhost:3000');

2
playgrounds/demo/tsconfig.json
Unescape View File

@ -13,5 +13,5 @@
"allowJs": true,
"checkJs": true
},
"include": ["./src", "demo-client.ts", "demo-server.ts"]
"include": ["./src", "ssr-dev.js", "ssr-prod.js"]
}

Write Preview
Loading…
Cancel
Save