Merge remote-tracking branch 'origin/main' into state-onchange

Author: paoloricciuti

.github/workflows/ci.yml

@@ -28,6 +28,8 @@ jobs:
             os: ubuntu-latest
           - node-version: 22
             os: ubuntu-latest
+          - node-version: 24
+            os: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
@@ -41,6 +43,23 @@ jobs:
       - run: pnpm test
         env:
           CI: true
+  TestNoAsync:
+    permissions: {}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm playwright install chromium
+      - run: pnpm test runtime-runes
+        env:
+          CI: true
+          SVELTE_NO_ASYNC: true
   Lint:
     permissions: {}
     runs-on: ubuntu-latest

.github/workflows/ecosystem-ci-trigger.yml

@@ -8,9 +8,17 @@ jobs:
   trigger:
     runs-on: ubuntu-latest
     if: github.repository == 'sveltejs/svelte' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')
+    permissions:
+      issues: write # to add / delete reactions
+      pull-requests: write # to read PR data, and to add labels
+      actions: read # to check workflow status
+      contents: read # to clone the repo
     steps:
-      - uses: GitHubSecurityLab/actions-permissions/monitor@v1
-      - uses: actions/github-script@v6
+      - name: monitor action permissions
+        uses: GitHubSecurityLab/actions-permissions/monitor@v1
+      - name: check user authorization # user needs triage permission
+        uses: actions/github-script@v7
+        id: check-permissions
         with:
           script: |
             const user = context.payload.sender.login
@@ -29,24 +37,26 @@ jobs:
             }
 
             if (hasTriagePermission) {
-              console.log('Allowed')
+              console.log('User is allowed. Adding +1 reaction.')
               await github.rest.reactions.createForIssueComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 comment_id: context.payload.comment.id,
                 content: '+1',
               })
             } else {
-              console.log('Not allowed')
+              console.log('User is not allowed. Adding -1 reaction.')
               await github.rest.reactions.createForIssueComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 comment_id: context.payload.comment.id,
                 content: '-1',
               })
-              throw new Error('not allowed')
+              throw new Error('User does not have the necessary permissions.')
             }
-      - uses: actions/github-script@v6
+
+      - name: Get PR Data
+        uses: actions/github-script@v7
         id: get-pr-data
         with:
           script: |
@@ -59,21 +69,27 @@ jobs:
             return {
               num: context.issue.number,
               branchName: pr.head.ref,
+              commit: pr.head.sha,
               repo: pr.head.repo.full_name
             }
-      - id: generate-token
-        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92 #keep pinned for security reasons, currently 1.8.0
+
+      - name: Generate Token
+        id: generate-token
+        uses: actions/create-github-app-token@v2
         with:
-          app_id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
-          private_key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
-          repository: '${{ github.repository_owner }}/svelte-ecosystem-ci'
-      - uses: actions/github-script@v6
+          app-id: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_ID }}
+          private-key: ${{ secrets.ECOSYSTEM_CI_GITHUB_APP_PRIVATE_KEY }}
+          repositories: |
+            svelte
+            svelte-ecosystem-ci
+
+      - name: Trigger Downstream Workflow
+        uses: actions/github-script@v7
         id: trigger
         env:
           COMMENT: ${{ github.event.comment.body }}
         with:
           github-token: ${{ steps.generate-token.outputs.token }}
-          result-encoding: string
           script: |
             const comment = process.env.COMMENT.trim()
             const prData = ${{ steps.get-pr-data.outputs.result }}
@@ -89,6 +105,7 @@ jobs:
                 prNumber: '' + prData.num,
                 branchName: prData.branchName,
                 repo: prData.repo,
+                commit: prData.commit,
                 suite: suite === '' ? '-' : suite
               }
             })

.prettierignore

@@ -7,6 +7,7 @@ packages/**/config/*.js
 
 # packages/svelte
 packages/svelte/messages/**/*.md
+packages/svelte/scripts/_bundle.js
 packages/svelte/src/compiler/errors.js
 packages/svelte/src/compiler/warnings.js
 packages/svelte/src/internal/client/errors.js
@@ -25,17 +26,7 @@ packages/svelte/tests/hydration/samples/*/_expected.html
 packages/svelte/tests/hydration/samples/*/_override.html
 packages/svelte/types
 packages/svelte/compiler/index.js
-playgrounds/sandbox/input/**.svelte
-playgrounds/sandbox/output
-
-# sites/svelte.dev
-sites/svelte.dev/static/svelte-app.json
-sites/svelte.dev/scripts/svelte-app/
-sites/svelte.dev/src/routes/_components/Supporters/contributors.jpg
-sites/svelte.dev/src/routes/_components/Supporters/contributors.js
-sites/svelte.dev/src/routes/_components/Supporters/donors.jpg
-sites/svelte.dev/src/routes/_components/Supporters/donors.js
-sites/svelte.dev/src/lib/generated
+playgrounds/sandbox/src/*
 
 **/node_modules
 **/.svelte-kit

.prettierrc

@@ -17,12 +17,6 @@
 				"useTabs": false,
 				"tabWidth": 2
 			}
-		},
-		{
-			"files": ["sites/svelte-5-preview/src/routes/docs/content/**/*.md"],
-			"options": {
-				"printWidth": 60
-			}
 		}
 	]
 }

.vscode/settings.json

@@ -1,6 +1,3 @@
 {
-	"search.exclude": {
-		"sites/svelte-5-preview/static/*": true
-	},
 	"typescript.tsdk": "node_modules/typescript/lib"
 }

CONTRIBUTING.md

@@ -105,10 +105,10 @@ Test samples are kept in `/test/xxx/samples` folder.
    pnpm test validator
    ```
 
-1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -- -t <test-name>`, for example:
+1. To filter tests _within_ a test suite, use `pnpm test <suite-name> -t <test-name>`, for example:
 
    ```bash
-   pnpm test validator -- -t a11y-alt-text
+   pnpm test validator -t a11y-alt-text
    ```
 
    (You can also do `FILTER=<test-name> pnpm test <suite-name>` which removes other tests rather than simply skipping them — this will result in faster and more compact test results, but it's non-idiomatic. Choose your fighter.)

benchmarking/compare/index.js

@@ -67,23 +67,37 @@ for (let i = 0; i < results[0].length; i += 1) {
 	for (const metric of ['time', 'gc_time']) {
 		const times = results.map((result) => +result[i][metric]);
 		let min = Infinity;
+		let max = -Infinity;
 		let min_index = -1;
 
 		for (let b = 0; b < times.length; b += 1) {
-			if (times[b] < min) {
-				min = times[b];
+			const time = times[b];
+
+			if (time < min) {
+				min = time;
 				min_index = b;
 			}
+
+			if (time > max) {
+				max = time;
+			}
 		}
 
 		if (min !== 0) {
-			console.group(`${metric}: fastest is ${branches[min_index]}`);
+			console.group(`${metric}: fastest is ${char(min_index)} (${branches[min_index]})`);
 			times.forEach((time, b) => {
-				console.log(`${branches[b]}: ${time.toFixed(2)}ms (${((time / min) * 100).toFixed(2)}%)`);
+				const SIZE = 20;
+				const n = Math.round(SIZE * (time / max));
+
+				console.log(`${char(b)}: ${'◼'.repeat(n)}${' '.repeat(SIZE - n)} ${time.toFixed(2)}ms`);
 			});
 			console.groupEnd();
 		}
 	}
 
 	console.groupEnd();
 }
+
+function char(i) {
+	return String.fromCharCode(97 + i);
+}

documentation/docs/02-runes/02-$state.md

@@ -20,9 +20,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.
 
-> [!NOTE] Classes like `Set` and `Map` will not be proxied, but Svelte provides reactive implementations for various built-ins like these that can be imported from [`svelte/reactivity`](./svelte-reactivity).
-
-State is proxified recursively until Svelte finds something other than an array or simple object. 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([
@@ -52,7 +50,7 @@ todos.push({
 });
 ```
 
-> [!NOTE] When you update properties of proxies, the original object is _not_ mutated.
+> [!NOTE] When you update properties of proxies, the original object is _not_ mutated. If you need to use your own proxy handlers in a state proxy, [you should wrap the object _after_ wrapping it in `$state`](https://svelte.dev/playground/hello-world?version=latest#H4sIAAAAAAAACpWR3WoDIRCFX2UqhWyIJL3erAulL9C7XnQLMe5ksbUqOpsfln33YuyGFNJC8UKdc2bOhw7Myk9kJXsJ0nttO9jcR5KEG9AWJDwHdzwxznbaYGTl68Do5JM_FRifuh-9X8Y9Gkq1rYx4q66cJbQUWcmqqIL2VDe2IYMEbvuOikBADi-GJDSkXG-phId0G-frye2DO2psQYDFQ0Ys8gQO350dUkEydEg82T0GOs0nsSG9g2IqgxACZueo2ZUlpdvoDC6N64qsg1QKY8T2bpZp8gpIfbCQ85Zn50Ud82HkeY83uDjspenxv3jXcSDyjPWf9L1vJf0GH666J-jLu1ery4dV257IWXBWGa0-xFDMQdTTn2ScxWKsn86ROsLwQxqrVR5QM84Ij8TKFD2-cUZSm4O2LSt30kQcvwCgCmfZnAIAAA==).
 
 Note that if you destructure a reactive value, the references are not reactive — as in normal JavaScript, they are evaluated at the point of destructuring:
 
@@ -67,16 +65,15 @@ todos[0].done = !todos[0].done;
 
 ### Classes
 
-You can also use `$state` in class fields (whether public or private):
+Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
 
 ```js
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	reset() {
@@ -110,10 +107,9 @@ You can either use an inline function...
 // @errors: 7006 2554
 class Todo {
 	done = $state(false);
-	text = $state();
 
 	constructor(text) {
-		this.text = text;
+		this.text = $state(text);
 	}
 
 	+++reset = () => {+++
@@ -123,6 +119,10 @@ class Todo {
 }
 ```
 
+### Built-in classes
+
+Svelte provides reactive implementations of built-in classes like `Set`, `Map`, `Date` and `URL` that can be imported from [`svelte/reactivity`](svelte-reactivity).
+
 ## `$state.raw`
 
 In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
@@ -163,6 +163,8 @@ let count = $state(0, {
 
 > The `onchange` function is [untracked](svelte#untrack).
 
+As with `$state`, you can declare class fields using `$state.raw`.
+
 ## `$state.snapshot`
 
 To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:

documentation/docs/02-runes/03-$derived.md

@@ -94,6 +94,27 @@ let selected = $derived(items[index]);
 
 ...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
 
+## Destructuring
+
+If you use destructuring with a `$derived` declaration, the resulting variables will all be reactive — this...
+
+```js
+function stuff() { return { a: 1, b: 2, c: 3 } }
+// ---cut---
+let { a, b, c } = $derived(stuff());
+```
+
+...is roughly equivalent to this:
+
+```js
+function stuff() { return { a: 1, b: 2, c: 3 } }
+// ---cut---
+let _stuff = $derived(stuff());
+let a = $derived(_stuff.a);
+let b = $derived(_stuff.b);
+let c = $derived(_stuff.c);
+```
+
 ## Update propagation
 
 Svelte uses something called _push-pull reactivity_ — when state is updated, everything that depends on the state (whether directly or indirectly) is immediately notified of the change (the 'push'), but derived values are not re-evaluated until they are actually read (the 'pull').