diff --git a/playgrounds/demo/src/entry-client.ts b/playgrounds/demo/demo-client.ts similarity index 88% rename from playgrounds/demo/src/entry-client.ts rename to playgrounds/demo/demo-client.ts index 2bde776586..acf96e6490 100644 --- a/playgrounds/demo/src/entry-client.ts +++ b/playgrounds/demo/demo-client.ts @@ -1,5 +1,5 @@ import { mount, hydrate, unmount } from 'svelte'; -import App from './App.svelte'; +import App from './src/main.svelte'; const root = document.getElementById('root')!; const render = root.firstChild?.nextSibling ? hydrate : mount; @@ -7,6 +7,6 @@ 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/server.js b/playgrounds/demo/demo-server.js similarity index 83% rename from playgrounds/demo/server.js rename to playgrounds/demo/demo-server.js index 82a75e70e7..47702629b7 100644 --- a/playgrounds/demo/server.js +++ b/playgrounds/demo/demo-server.js @@ -32,11 +32,13 @@ async function createServer() { const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8'); const transformed_template = await vite.transformIndexHtml(req.originalUrl, template); - const { body: appHtml, head: headHtml } = await vite.ssrLoadModule('./src/entry-server.ts'); + const { render } = await vite.ssrLoadModule('svelte/server'); + const { default: App } = await vite.ssrLoadModule('./src/main.svelte'); + const { head, body } = render(App); const html = transformed_template - .replace(``, appHtml) - .replace(``, headHtml); + .replace(``, head) + .replace(``, body); res.writeHead(200, { 'Content-Type': 'text/html' }).end(html); }); diff --git a/playgrounds/demo/index.html b/playgrounds/demo/index.html index d6ea134264..ddaccadff3 100644 --- a/playgrounds/demo/index.html +++ b/playgrounds/demo/index.html @@ -7,7 +7,7 @@ -
- +
+ diff --git a/playgrounds/demo/package.json b/playgrounds/demo/package.json index cebee61bf4..669bc7962e 100644 --- a/playgrounds/demo/package.json +++ b/playgrounds/demo/package.json @@ -6,8 +6,8 @@ "scripts": { "prepare": "node scripts/create-app-svelte.js", "dev": "vite --host", - "ssr": "node ./server.js", - "build": "vite build --outDir dist/client && vite build --outDir dist/server --ssr src/entry-server.ts", + "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", "preview": "vite preview" }, diff --git a/playgrounds/demo/scripts/App.template.svelte b/playgrounds/demo/scripts/App.template.svelte deleted file mode 100644 index e51190c18f..0000000000 --- a/playgrounds/demo/scripts/App.template.svelte +++ /dev/null @@ -1,8 +0,0 @@ - - -

Demo App

- diff --git a/playgrounds/demo/scripts/create-app-svelte.js b/playgrounds/demo/scripts/create-app-svelte.js index 478fa782ad..9d8dd5bb1d 100644 --- a/playgrounds/demo/scripts/create-app-svelte.js +++ b/playgrounds/demo/scripts/create-app-svelte.js @@ -1,6 +1,13 @@ import fs from 'node:fs'; -const destination = new URL('../src/App.svelte', import.meta.url); + +const destination = new URL('../src/main.svelte', import.meta.url); + if (!fs.existsSync(destination)) { - const template = new URL('./App.template.svelte', import.meta.url); + const template = new URL('./main.template.svelte', import.meta.url); + + try { + fs.mkdirSync(new URL('../src', import.meta.url)); + } catch {} + fs.writeFileSync(destination, fs.readFileSync(template, 'utf-8'), 'utf-8'); } diff --git a/playgrounds/demo/scripts/main.template.svelte b/playgrounds/demo/scripts/main.template.svelte new file mode 100644 index 0000000000..36bfdbb8b3 --- /dev/null +++ b/playgrounds/demo/scripts/main.template.svelte @@ -0,0 +1,8 @@ + + +

Demo App

+ diff --git a/playgrounds/demo/src/entry-server.ts b/playgrounds/demo/src/entry-server.ts deleted file mode 100644 index d4741d2f15..0000000000 --- a/playgrounds/demo/src/entry-server.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { render } from 'svelte/server'; -// @ts-ignore you need to create this file -import App from './App.svelte'; - -export const { head, body } = render(App); diff --git a/playgrounds/demo/tsconfig.json b/playgrounds/demo/tsconfig.json index 13086aa75a..b2bd38ecd3 100644 --- a/playgrounds/demo/tsconfig.json +++ b/playgrounds/demo/tsconfig.json @@ -13,5 +13,5 @@ "allowJs": true, "checkJs": true }, - "include": ["./src"] + "include": ["./src", "demo-client.ts", "demo-server.ts"] }