Merge branch 'main' into main

Author: DreaminDani

apps/svelte.dev/content/docs/cli/30-add-ons/03-devtools-json.md

@@ -0,0 +1,40 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: devtools-json
+---
+
+The `devtools-json` add-on installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/), which is a Vite plugin for generating a Chromium DevTools project settings file on-the-fly in the development server. This file is served from `/.well-known/appspecific/com.chrome.devtools.json` and tells Chromium browsers where your project's source code lives so that you can use [the workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files in the browser.
+
+> [!NOTE]
+> Installing the plugin enables the feature for all users connecting to the dev server with a Chromium browser, and allows the browser to read and write all files within the directory. If using Chrome's AI Assistance feature, this may also result in data being sent to Google.
+
+## Alternatives
+
+If you'd prefer not to install the plugin, but still want to avoid seeing a message about the missing file, you have a couple of options.
+
+Firstly, you can prevent the request from being issued on your machine by disabling the feature in your browser. You can do this in Chrome by visiting `chrome://flags` and disabling the "DevTools Project Settings". You may also be interested in disabling "DevTools Automatic Workspace Folders" since it’s closely related.
+
+You can also prevent the web server from issuing a notice regarding the incoming request for all developers of your application by handling the request yourself. For example, you can create a file named `.well-known/appspecific/com.chrome.devtools.json` with the contents `"Go away, Chrome DevTools!"` or you can add logic to respond to the request in your [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook:
+
+```js
+/// file: src/hooks.server.js
+import { dev } from '$app/environment';
+
+export function handle({ event, resolve }) {
+	if (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
+		return new Response(undefined, { status: 404 });
+	}
+
+	return resolve(event);
+}
+```
+
+## Usage
+
+```bash
+npx sv add devtools-json
+```
+
+## What you get
+
+- `vite-plugin-devtools-json` added to your Vite plugin options

apps/svelte.dev/content/docs/cli/30-add-ons/60-devtools-json.md

@@ -125,7 +125,7 @@ Cannot set prototype of `$state` object
 ### state_unsafe_mutation
 
 ```
-Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
 This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:

apps/svelte.dev/content/docs/svelte/98-reference/.generated/client-errors.md

@@ -132,7 +132,7 @@ Cannot set prototype of `$state` object
 ### state_unsafe_mutation
 
 ```
-Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
+Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
 ```
 
 This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go:

apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-errors.md

@@ -73,7 +73,7 @@
 				name = recovered.name;
 			}
 
-			repl.set({ files, tailwind: recovered.tailwind ?? false });
+			repl.set({ files, tailwind: recovered.tailwind ?? false, aliases: recovered.aliases });
 		} catch {
 			alert(`Couldn't load the code from the URL. Make sure you copied the link correctly.`);
 		}

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -56,5 +56,22 @@ export default class Bundler {
 		});
 
 		uid += 1;
+
+		return new Promise<void>((resolve) => {
+			const destroy = $effect.root(() => {
+				let first = true;
+				$effect.pre(() => {
+					this.result;
+					if (first) {
+						first = false;
+					} else {
+						destroy();
+						// This isn't necessarily the result of this bundle call, as it could be
+						// superseeded by another call to `bundle` before the result is set.
+						resolve();
+					}
+				});
+			});
+		});
 	}
 }

packages/repl/src/lib/Bundler.svelte.ts

@@ -52,15 +52,16 @@
 		text: true
 	};
 
-	const workspace = new Workspace([dummy], {
+	const workspace: Workspace = new Workspace([dummy], {
 		initial: 'App.svelte',
 		svelte_version: svelteVersion,
 		onupdate() {
 			rebundle();
 			onchange?.();
 		},
 		onreset() {
-			rebundle();
+			// Return promise so we can await it in the workspace
+			return rebundle();
 		}
 	});
 
@@ -69,13 +70,33 @@
 		return {
 			imports: bundler!.result?.imports ?? [],
 			files: workspace.files,
-			tailwind: workspace.tailwind
+			tailwind: workspace.tailwind,
+			aliases: workspace.aliases
 		};
 	}
 
-	// TODO get rid
-	export async function set(data: { files: File[]; tailwind?: boolean }) {
-		workspace.reset(data.files, { tailwind: data.tailwind ?? false }, 'App.svelte');
+	// Our own playground / v0 need this
+	export async function set(data: {
+		files: File[];
+		tailwind?: boolean;
+		aliases?: Record<string, string>;
+	}) {
+		// Await promise so that users (v0 in this case) can know when the bundling is done
+		await workspace.reset(
+			data.files,
+			{ tailwind: data.tailwind ?? false, aliases: data.aliases },
+			'App.svelte'
+		);
+	}
+
+	// v0 needs this
+	export function get_asts() {
+		return Object.fromEntries(
+			Object.entries(workspace.compiled).map(([name, compiled]) => [
+				name,
+				compiled.result?.ast ?? null
+			])
+		);
 	}
 
 	// TODO get rid
@@ -85,10 +106,11 @@
 
 	const toggleable: ReplContext['toggleable'] = writable(false);
 
-	async function rebundle() {
-		bundler!.bundle(workspace.files as File[], {
+	function rebundle() {
+		return bundler!.bundle(workspace.files as File[], {
 			tailwind: workspace.tailwind,
-			fragments: workspace.compiler_options.fragments
+			fragments: workspace.compiler_options.fragments,
+			aliases: workspace.aliases
 		});
 	}
 

packages/repl/src/lib/Repl.svelte

@@ -117,6 +117,7 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 	#vim = $state(false);
+	#aliases = $state.raw(undefined) as undefined | Record<string, string>;
 	#tailwind = $state(false);
 
 	#handlers = {
@@ -125,7 +126,7 @@ export class Workspace {
 	};
 
 	#onupdate: (file: File) => void;
-	#onreset: (items: Item[]) => void;
+	#onreset: (items: Item[]) => void | Promise<void>;
 
 	// CodeMirror stuff
 	states = new Map<string, EditorState>();
@@ -198,7 +199,7 @@ export class Workspace {
 			initial?: string;
 			readonly?: boolean;
 			onupdate?: (file: File) => void;
-			onreset?: (items: Item[]) => void;
+			onreset?: (items: Item[]) => void | Promise<void>;
 		} = {}
 	) {
 		this.#svelte_version = svelte_version;
@@ -400,16 +401,25 @@ export class Workspace {
 		this.#onreset?.(this.#files);
 	}
 
-	reset(new_files: Item[], options: { tailwind: boolean }, selected?: string) {
+	reset(
+		new_files: Item[],
+		options: { tailwind: boolean; aliases?: Record<string, string> },
+		selected?: string
+	) {
 		this.states.clear();
 		this.set(new_files, selected);
 
 		this.mark_saved();
 
 		this.#tailwind = options.tailwind;
+		this.#aliases = options.aliases;
 
-		this.#onreset(new_files);
-		this.#reset_diagnostics();
+		const bundle = this.#onreset(new_files);
+		const diagnostics = this.#reset_diagnostics();
+
+		return Promise.all([bundle, diagnostics])
+			.then(() => {})
+			.catch(() => {});
 	}
 
 	select(name: string) {
@@ -475,6 +485,15 @@ export class Workspace {
 		}
 	}
 
+	get aliases() {
+		return this.#aliases;
+	}
+
+	set aliases(value) {
+		this.#aliases = value;
+		this.#onupdate(this.#current);
+	}
+
 	get tailwind() {
 		return this.#tailwind;
 	}
@@ -648,22 +667,26 @@ export class Workspace {
 			files = [this.current, ...this.#files.slice(0, i), ...this.#files.slice(i + 1)];
 		}
 
-		for (const file of files) {
-			if (file.type !== 'file') continue;
-			if (!is_svelte_file(file)) continue;
+		const done = files.map((file) => {
+			if (file.type !== 'file') return;
+			if (!is_svelte_file(file)) return;
 
 			seen.push(file.name);
 
-			compile_file(file, this.#svelte_version, this.compiler_options).then((compiled) => {
+			return compile_file(file, this.#svelte_version, this.compiler_options).then((compiled) => {
 				this.compiled[file.name] = compiled;
 			});
-		}
+		});
 
 		for (const key of keys) {
 			if (!seen.includes(key)) {
 				delete this.compiled[key];
 			}
 		}
+
+		return Promise.all(done)
+			.then(() => {})
+			.catch(() => {});
 	}
 
 	#select(file: File) {