diff --git a/playgrounds/demo/demo-client.ts b/playgrounds/demo/demo-client.ts deleted file mode 100644 index acf96e6490..0000000000 --- a/playgrounds/demo/demo-client.ts +++ /dev/null @@ -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); diff --git a/playgrounds/demo/dist/index.js b/playgrounds/demo/dist/index.js deleted file mode 100644 index ddf268b8c5..0000000000 --- a/playgrounds/demo/dist/index.js +++ /dev/null @@ -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(``, body) - .replace(``, 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'); diff --git a/playgrounds/demo/index.html b/playgrounds/demo/index.html index ddaccadff3..16a8151940 100644 --- a/playgrounds/demo/index.html +++ b/playgrounds/demo/index.html @@ -8,6 +8,20 @@
- + + diff --git a/playgrounds/demo/package.json b/playgrounds/demo/package.json index 669bc7962e..8009238418 100644 --- a/playgrounds/demo/package.json +++ b/playgrounds/demo/package.json @@ -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": { diff --git a/playgrounds/demo/demo-server.js b/playgrounds/demo/ssr-dev.js similarity index 51% rename from playgrounds/demo/demo-server.js rename to playgrounds/demo/ssr-dev.js index 47702629b7..dbaa9a66bd 100644 --- a/playgrounds/demo/demo-server.js +++ b/playgrounds/demo/ssr-dev.js @@ -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({ - 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; - } +const vite = await createViteServer({ + server: { middlewareMode: true }, + appType: 'custom' +}); +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(``, 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}`); }); diff --git a/playgrounds/demo/ssr-prod.js b/playgrounds/demo/ssr-prod.js new file mode 100644 index 0000000000..0c534892a2 --- /dev/null +++ b/playgrounds/demo/ssr-prod.js @@ -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(``, body) + .replace(``, 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'); diff --git a/playgrounds/demo/tsconfig.json b/playgrounds/demo/tsconfig.json index b2bd38ecd3..a1566560bf 100644 --- a/playgrounds/demo/tsconfig.json +++ b/playgrounds/demo/tsconfig.json @@ -13,5 +13,5 @@ "allowJs": true, "checkJs": true }, - "include": ["./src", "demo-client.ts", "demo-server.ts"] + "include": ["./src", "ssr-dev.js", "ssr-prod.js"] }