chore: update playgrounds/demo (#9666)

* chore: update playgrounds/demo to exclude svelte from being optimized and generate an App.svelte so first run doesn't throw

* chore: fix format

Author: dominikg

playgrounds/demo/package.json

@@ -4,18 +4,17 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
+    "prepare": "node scripts/create-app-svelte.js",
     "dev": "vite --host",
     "ssr": "node ./server.js",
     "build": "vite build",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "svelte": "workspace:*"
-  },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.5.1",
     "express": "^4.18.2",
     "nodemon": "^3.0.1",
+    "svelte": "workspace:*",
     "vite": "^4.4.9"
   }
 }

playgrounds/demo/scripts/App.template.svelte

@@ -0,0 +1,8 @@
+<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>

playgrounds/demo/scripts/create-app-svelte.js

@@ -0,0 +1,6 @@
+import fs from 'node:fs';
+const destination = new URL('../src/App.svelte', import.meta.url);
+if (!fs.existsSync(destination)) {
+	const template = new URL('./App.template.svelte', import.meta.url);
+	fs.writeFileSync(destination, fs.readFileSync(template, 'utf-8'), 'utf-8');
+}

playgrounds/demo/vite.config.js

@@ -2,5 +2,9 @@ import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 export default defineConfig({
-	plugins: [svelte()]
+	plugins: [svelte()],
+	optimizeDeps: {
+		// svelte is a local workspace package, optimizing it would require dev server restarts with --force for every change
+		exclude: ['svelte']
+	}
 });