chore: various playground fixes (#12291)

2 months ago · eb3e677e05
parent 2f1d2d5906
commit eb3e677e05
9 changed files with 29 additions and 25 deletions
--- a/playgrounds/demo/src/entry-client.ts
+++ b/playgrounds/demo/src/entry-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);
-
--- a/playgrounds/demo/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(`<!--ssr-html-->`, appHtml)
-			.replace(`<!--ssr-head-->`, headHtml);
+			.replace(`<!--ssr-head-->`, head)
+			.replace(`<!--ssr-body-->`, body);

 		res.writeHead(200, { 'Content-Type': 'text/html' }).end(html);
 	});
--- a/playgrounds/demo/index.html
+++ b/playgrounds/demo/index.html
@ -7,7 +7,7 @@
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"><!--ssr-html--></div>
-		<script type="module" src="/src/entry-client.ts"></script>
+		<div id="root"><!--ssr-body--></div>
+		<script type="module" src="/demo-client.ts"></script>
 	</body>
 </html>
--- 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"
  },
--- a/playgrounds/demo/scripts/App.template.svelte
+++ b/playgrounds/demo/scripts/App.template.svelte
@ -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>
--- 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');
 }
--- a/playgrounds/demo/scripts/main.template.svelte
+++ b/playgrounds/demo/scripts/main.template.svelte
@ -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>
--- a/playgrounds/demo/src/entry-server.ts
+++ b/playgrounds/demo/src/entry-server.ts
@ -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);
--- 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"]
 }