chore: various playground fixes (#12291)

Rich-Harris · web-flow · commit eb3e677e05e5 · 2024-07-04T09:52:12.000+02:00
diff --git a/playgrounds/demo/demo-client.ts b/playgrounds/demo/demo-client.ts
@@ -1,12 +1,12 @@
 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;
 
 const component = render(App, {
 	target: document.getElementById('root')!
 });
+
 // @ts-ignore
 window.unmount = () => unmount(component);
-
diff --git 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);
 	});
diff --git 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>
diff --git 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
diff --git 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
@@ -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>
diff --git a/playgrounds/demo/src/entry-server.ts b/playgrounds/demo/src/entry-server.ts
diff --git 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"]
 }

Original file line number	Diff line number	Diff line change
`@@ -13,5 +13,5 @@`
`13`	`13`	`"allowJs": true,`
`14`	`14`	`"checkJs": true`
`15`	`15`	`},`
`16`		`- "include": ["./src"]`
	`16`	`+ "include": ["./src", "demo-client.ts", "demo-server.ts"]`
`17`	`17`	`}`