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

chore: various playground fixes (#12291)

Browse Source
pull/12297/head
Rich Harris 6 months ago committed by GitHub
parent 2f1d2d5906
commit eb3e677e05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File

4
playgrounds/demo/src/entry-client.ts → playgrounds/demo/demo-client.ts
Unescape View File

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

8
playgrounds/demo/server.js → playgrounds/demo/demo-server.js
Unescape View File

@ -32,11 +32,13 @@ async function createServer() {
const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8'); const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
const transformed_template = await vite.transformIndexHtml(req.originalUrl, template); 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 const html = transformed_template
.replace(`<!--ssr-html-->`, appHtml) .replace(`<!--ssr-head-->`, head)
.replace(`<!--ssr-head-->`, headHtml); .replace(`<!--ssr-body-->`, body);
res.writeHead(200, { 'Content-Type': 'text/html' }).end(html); res.writeHead(200, { 'Content-Type': 'text/html' }).end(html);
}); });

4
playgrounds/demo/index.html
Unescape View File

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><!--ssr-html--></div> <div id="root"><!--ssr-body--></div>
<script type="module" src="/src/entry-client.ts"></script> <script type="module" src="/demo-client.ts"></script>
</body> </body>
</html> </html>

4
playgrounds/demo/package.json
Unescape View File

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

8
playgrounds/demo/scripts/App.template.svelte
Unescape View File

@ -1,8 +0,0 @@
<script lang="ts">
function openInEditor() {
fetch('./__open-in-editor?file=src/App.svelte');
}
</script>
<h1>Demo App</h1>
<button class="open-in-editor" on:click={openInEditor}>edit App.svelte</button>

11
playgrounds/demo/scripts/create-app-svelte.js
Unescape View File

@ -1,6 +1,13 @@
import fs from 'node:fs'; 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)) { 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'); fs.writeFileSync(destination, fs.readFileSync(template, 'utf-8'), 'utf-8');
} }

8
playgrounds/demo/scripts/main.template.svelte
Unescape View File

@ -0,0 +1,8 @@
<script lang="ts">
function openInEditor() {
fetch('./__open-in-editor?file=src/main.svelte');
}
</script>
<h1>Demo App</h1>
<button class="open-in-editor" on:click={openInEditor}>edit main.svelte</button>

5
playgrounds/demo/src/entry-server.ts
Unescape View File

@ -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);

2
playgrounds/demo/tsconfig.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save