Merge branch 'main' into fix-spelling

Author: DePasqualeOrg

apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md

@@ -39,3 +39,4 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 - [`sveltekit-adapter`](sveltekit-adapter)
 - [`tailwindcss`](tailwind)
 - [`vitest`](vitest)
+- [`devtools-json`](devtools-json)

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

@@ -0,0 +1,22 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: devtools-json
+---
+
+`devtools-json` is essentially a vite plugin [vite-plugin-devtools-json](https://github.com/ChromeDevTools/vite-plugin-devtools-json/) for generating the Chrome DevTools project settings file on-the-fly in the devserver.
+
+It will prevent this server log:
+
+```sh
+Not found: /.well-known/appspecific/com.chrome.devtools.json
+```
+
+## Usage
+
+```bash
+npx sv add devtools-json
+```
+
+## What you get
+
+- the `vite` plugin added to your vite plugin options.

apps/svelte.dev/content/docs/kit/20-core-concepts/30-form-actions.md

@@ -369,7 +369,7 @@ Without an argument, `use:enhance` will emulate the browser-native behaviour, ju
 
 ### Customising use:enhance
 
-To customise the behaviour, you can provide a `SubmitFunction` that runs immediately before the form is submitted, and (optionally) returns a callback that runs with the `ActionResult`. Note that if you return a callback, the default behavior mentioned above is not triggered. To get it back, call `update`.
+To customise the behaviour, you can provide a `SubmitFunction` that runs immediately before the form is submitted, and (optionally) returns a callback that runs with the `ActionResult`.
 
 ```svelte
 <form
@@ -391,7 +391,7 @@ To customise the behaviour, you can provide a `SubmitFunction` that runs immedia
 
 You can use these functions to show and hide loading UI, and so on.
 
-If you return a callback, you may need to reproduce part of the default `use:enhance` behaviour, but without invalidating all data on a successful response. You can do so with `applyAction`:
+If you return a callback, you override the default post-submission behavior. To get it back, call `update`, which accepts `invalidateAll` and `reset` parameters, or use `applyAction` on the result:
 
 ```svelte
 /// file: src/routes/login/+page.svelte

apps/svelte.dev/content/docs/kit/30-advanced/20-hooks.md

@@ -321,7 +321,7 @@ export async function reroute({ url, fetch }) {
 
 ### transport
 
-This is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns `false` for anything that isn't an instance of the type) and a corresponding `decode` function:
+This is a collection of _transporters_, which allow you to pass custom types — returned from `load` and form actions — across the server/client boundary. Each transporter contains an `encode` function, which encodes values on the server (or returns a falsy value for anything that isn't an instance of the type) and a corresponding `decode` function:
 
 ```js
 /// file: src/hooks.js

apps/svelte.dev/content/docs/kit/40-best-practices/03-auth.md

@@ -15,7 +15,7 @@ In contrast, JWT generally are not checked against a datastore, which means they
 
 ## Integration points
 
-Auth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks#Server-hooks). If a user is found matching the provided credentials, the user information can be stored in [`locals`](hooks#Server-hooks-handle).
+Auth [cookies](@sveltejs-kit#Cookies) can be checked inside [server hooks](hooks#Server-hooks). If a user is found matching the provided credentials, the user information can be stored in [`locals`](hooks#Server-hooks-locals).
 
 ## Guides
 

apps/svelte.dev/content/docs/kit/98-reference/50-configuration.md

@@ -647,7 +647,7 @@ the location of the template for fallback error responses
 
 </div>
 
-Inline CSS inside a `<style>` block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file in UTF-16 code units, as specified by the [String.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) property, to be inlined. All CSS files needed for the page and smaller than this value are merged and inlined in a `<style>` block.
+Inline CSS inside a `<style>` block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file in UTF-16 code units, as specified by the [String.length](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) property, to be inlined. All CSS files needed for the page that are smaller than this value are merged and inlined in a `<style>` block.
 
 > [!NOTE] This results in fewer initial requests and can improve your [First Contentful Paint](https://web.dev/first-contentful-paint) score. However, it generates larger HTML output and reduces the effectiveness of browser caches. Use it advisedly.
 

apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md

@@ -21,7 +21,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-State is proxified recursively until Svelte finds something other than an array or simple object (like a class). In a case like this...
+State is proxified recursively until Svelte finds something other than an array or simple object (like a class or an object created with `Object.create`). In a case like this...
 
 ```js
 let todos = $state([

apps/svelte.dev/content/docs/svelte/03-template-syntax/17-style.md

@@ -35,8 +35,10 @@ To mark a style as important, use the `|important` modifier:
 <div style:color|important="red">...</div>
 ```
 
-When `style:` directives are combined with `style` attributes, the directives will take precedence:
+When `style:` directives are combined with `style` attributes, the directives will take precedence,
+even over `!important` properties:
 
 ```svelte
-<div style="color: blue;" style:color="red">This will be red</div>
+<div style:color="red" style="color: blue">This will be red</div>
+<div style:color="red" style="color: blue !important">This will still be red</div>
 ```

apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md

@@ -130,12 +130,12 @@ test('Effect', () => {
 		// effects normally run after a microtask,
 		// use flushSync to execute all pending effects synchronously
 		flushSync();
-		expect(log.value).toEqual([0]);
+		expect(log).toEqual([0]);
 
 		count = 1;
 		flushSync();
 
-		expect(log.value).toEqual([0, 1]);
+		expect(log).toEqual([0, 1]);
 	});
 
 	cleanup();
@@ -149,17 +149,13 @@ test('Effect', () => {
  */
 export function logger(getValue) {
 	/** @type {any[]} */
-	let log = $state([]);
+	let log = [];
 
 	$effect(() => {
 		log.push(getValue());
 	});
 
-	return {
-		get value() {
-			return log;
-		}
-	};
+	return log;
 }
 ```
 

packages/repl/package.json

@@ -90,6 +90,7 @@
 		"@replit/codemirror-vim": "^6.0.14",
 		"@rich_harris/svelte-split-pane": "^2.0.0",
 		"@rollup/browser": "^4.17.2",
+		"@sveltejs/acorn-typescript": "^1.0.0",
 		"@sveltejs/site-kit": "workspace:*",
 		"@sveltejs/svelte-json-tree": "^2.2.1",
 		"acorn": "^8.11.3",
@@ -98,12 +99,12 @@
 		"esrap": "^1.2.2",
 		"icons": "workspace:*",
 		"locate-character": "^3.0.0",
+		"magic-string": "^0.30.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
 		"svelte": "5.33.0",
 		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
-		"ts-blank-space": "^0.6.1",
 		"zimmerframe": "^1.1.2"
 	}
 }