chore: update sandbox to support async SSR (#16787)

* chore: update sandbox to support async SSR

* dedupe

* fix some stuff

* fix

* bump devDependencies

.changeset/friendly-queens-melt.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+chore: bump some devDependencies

package.json

@@ -30,6 +30,7 @@
     "@sveltejs/eslint-config": "^8.3.3",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@types/node": "^20.11.5",
+    "@types/picomatch": "^4.0.2",
     "@vitest/coverage-v8": "^2.1.9",
     "eslint": "^9.9.1",
     "eslint-plugin-lube": "^0.4.3",

packages/svelte/src/compiler/types/index.d.ts

@@ -283,11 +283,16 @@ export type DeclarationKind =
 	| 'var'
 	| 'let'
 	| 'const'
+	| 'using'
+	| 'await using'
 	| 'function'
 	| 'import'
 	| 'param'
 	| 'rest_param'
-	| 'synthetic';
+	| 'synthetic'
+	// TODO not yet implemented, but needed for TypeScript reasons
+	| 'using'
+	| 'await using';
 
 export interface ExpressionMetadata {
 	/** All the bindings that are referenced eagerly (not inside functions) in this expression */

packages/svelte/src/compiler/utils/builders.js

@@ -364,7 +364,14 @@ export function prop(kind, key, value, computed = false) {
  * @returns {ESTree.PropertyDefinition}
  */
 export function prop_def(key, value, computed = false, is_static = false) {
-	return { type: 'PropertyDefinition', key, value, computed, static: is_static };
+	return {
+		type: 'PropertyDefinition',
+		decorators: [],
+		key,
+		value,
+		computed,
+		static: is_static
+	};
 }
 
 /**
@@ -565,6 +572,7 @@ function for_builder(init, test, update, body) {
 export function method(kind, key, params, body, computed = false, is_static = false) {
 	return {
 		type: 'MethodDefinition',
+		decorators: [],
 		key,
 		kind,
 		value: function_builder(null, params, block(body)),
@@ -610,6 +618,7 @@ function if_builder(test, consequent, alternate) {
 export function import_all(as, source) {
 	return {
 		type: 'ImportDeclaration',
+		attributes: [],
 		source: literal(source),
 		specifiers: [import_namespace(as)]
 	};
@@ -623,6 +632,7 @@ export function import_all(as, source) {
 export function imports(parts, source) {
 	return {
 		type: 'ImportDeclaration',
+		attributes: [],
 		source: literal(source),
 		specifiers: parts.map((p) => ({
 			type: 'ImportSpecifier',

packages/svelte/tests/parser-legacy/samples/each-block-destructured/output.json

@@ -259,7 +259,8 @@
 						"kind": "let"
 					},
 					"specifiers": [],
-					"source": null
+					"source": null,
+					"attributes": []
 				}
 			],
 			"sourceType": "module"

packages/svelte/tests/parser-legacy/samples/script-context-module-unquoted/output.json

@@ -169,7 +169,8 @@
 						"kind": "const"
 					},
 					"specifiers": [],
-					"source": null
+					"source": null,
+					"attributes": []
 				}
 			],
 			"sourceType": "module"

playgrounds/sandbox/Wrapper.svelte

@@ -1,9 +0,0 @@
-<script>
-	import App from './src/App.svelte';
-</script>
-
-<svelte:boundary>
-	<App />
-
-	{#snippet pending()}{/snippet}
-</svelte:boundary>

playgrounds/sandbox/index.html

@@ -12,7 +12,7 @@
 
 		<script type="module">
 			import { mount, hydrate, unmount } from 'svelte';
-			import App from '/Wrapper.svelte';
+			import App from '/src/App.svelte';
 
 			globalThis.delayed = (v, ms = 1000) => {
 				return new Promise((f) => {

playgrounds/sandbox/package.json

@@ -16,11 +16,13 @@
     "start": "node run.js"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@types/node": "^24.5.2",
     "polka": "^1.0.0-next.25",
     "svelte": "workspace:*",
     "tinyglobby": "^0.2.12",
-    "vite": "^5.4.20",
+    "vite": "^7.1.5",
-    "vite-plugin-inspect": "^0.8.4"
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vite-plugin-inspect": "^11.3.3"
   }
 }

playgrounds/sandbox/ssr-dev.js

@@ -4,7 +4,6 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import polka from 'polka';
 import { createServer as createViteServer } from 'vite';
-import { render } from 'svelte/server';
 import './ssr-common.js';
 
 const PORT = process.env.PORT || '5173';
@@ -23,8 +22,11 @@ polka()
 	.use(async (req, res) => {
 		const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
 		const transformed_template = await vite.transformIndexHtml(req.url, template);
+
+		const { render } = await vite.ssrLoadModule('svelte/server');
 		const { default: App } = await vite.ssrLoadModule('/src/App.svelte');
-		const { head, body } = render(App);
+
+		const { head, body } = await render(App);
 
 		const html = transformed_template
 			.replace(`<!--ssr-head-->`, head)

playgrounds/sandbox/ssr-prod.js

@@ -5,7 +5,7 @@ import { render } from 'svelte/server';
 import App from './src/App.svelte';
 import './ssr-common.js';
 
-const { head, body } = render(App);
+const { head, body } = await render(App);
 
 const rendered = fs
 	.readFileSync(path.resolve('./dist/client/index.html'), 'utf-8')

playgrounds/sandbox/vite.config.js

@@ -1,13 +1,14 @@
 import { defineConfig } from 'vite';
 import inspect from 'vite-plugin-inspect';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import devtools from 'vite-plugin-devtools-json';
 
 export default defineConfig({
 	build: {
 		minify: false
 	},
 
-	plugins: [inspect(), svelte()],
+	plugins: [devtools(), inspect(), svelte()],
 
 	optimizeDeps: {
 		// svelte is a local workspace package, optimizing it would require dev server restarts with --force for every change