Merge branch 'main' into each-without-as

Author: dummdidumm

.changeset/hot-frogs-melt.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: include method definitions in class private fields

.changeset/unlucky-icons-sit.md

@@ -0,0 +1 @@
+output

benchmarking/.gitignore

@@ -1,15 +1,12 @@
-import {
-	kairo_avoidable_owned,
-	kairo_avoidable_unowned
-} from './benchmarks/kairo/kairo_avoidable.js';
-import { kairo_broad_owned, kairo_broad_unowned } from './benchmarks/kairo/kairo_broad.js';
-import { kairo_deep_owned, kairo_deep_unowned } from './benchmarks/kairo/kairo_deep.js';
-import { kairo_diamond_owned, kairo_diamond_unowned } from './benchmarks/kairo/kairo_diamond.js';
-import { kairo_mux_unowned, kairo_mux_owned } from './benchmarks/kairo/kairo_mux.js';
-import { kairo_repeated_unowned, kairo_repeated_owned } from './benchmarks/kairo/kairo_repeated.js';
-import { kairo_triangle_owned, kairo_triangle_unowned } from './benchmarks/kairo/kairo_triangle.js';
-import { kairo_unstable_owned, kairo_unstable_unowned } from './benchmarks/kairo/kairo_unstable.js';
-import { mol_bench_owned, mol_bench_unowned } from './benchmarks/mol_bench.js';
+import { kairo_avoidable_owned, kairo_avoidable_unowned } from './kairo/kairo_avoidable.js';
+import { kairo_broad_owned, kairo_broad_unowned } from './kairo/kairo_broad.js';
+import { kairo_deep_owned, kairo_deep_unowned } from './kairo/kairo_deep.js';
+import { kairo_diamond_owned, kairo_diamond_unowned } from './kairo/kairo_diamond.js';
+import { kairo_mux_unowned, kairo_mux_owned } from './kairo/kairo_mux.js';
+import { kairo_repeated_unowned, kairo_repeated_owned } from './kairo/kairo_repeated.js';
+import { kairo_triangle_owned, kairo_triangle_unowned } from './kairo/kairo_triangle.js';
+import { kairo_unstable_owned, kairo_unstable_unowned } from './kairo/kairo_unstable.js';
+import { mol_bench_owned, mol_bench_unowned } from './mol_bench.js';
 import {
 	sbench_create_0to1,
 	sbench_create_1000to1,
@@ -21,12 +18,12 @@ import {
 	sbench_create_2to1,
 	sbench_create_4to1,
 	sbench_create_signals
-} from './benchmarks/sbench.js';
+} from './sbench.js';
 
 // This benchmark has been adapted from the js-reactivity-benchmark (https://github.com/milomg/js-reactivity-benchmark)
 // Not all tests are the same, and many parts have been tweaked to capture different data.
 
-export const benchmarks = [
+export const reactivity_benchmarks = [
 	sbench_create_signals,
 	sbench_create_0to1,
 	sbench_create_1to1,

benchmarking/benchmarks.js renamed to benchmarking/benchmarks/reactivity/index.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 import { busy } from './util.js';
 
 function setup() {

benchmarking/benchmarks/kairo/kairo_avoidable.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 function setup() {
 	let head = $.state(0);

benchmarking/benchmarks/kairo/kairo_broad.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_broad.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let len = 50;
 const iter = 50;

benchmarking/benchmarks/kairo/kairo_deep.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_deep.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let width = 5;
 

benchmarking/benchmarks/kairo/kairo_diamond.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_diamond.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 function setup() {
 	let heads = new Array(100).fill(null).map((_) => $.state(0));

benchmarking/benchmarks/kairo/kairo_mux.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_mux.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let size = 30;
 

benchmarking/benchmarks/kairo/kairo_repeated.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 let width = 10;
 

benchmarking/benchmarks/kairo/kairo_triangle.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_triangle.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../../utils.js';
-import * as $ from '../../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 function setup() {
 	let head = $.state(0);

benchmarking/benchmarks/kairo/kairo_unstable.js renamed to benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js

@@ -1,5 +1,5 @@
-import { assert, fastest_test } from '../utils.js';
-import * as $ from '../../packages/svelte/src/internal/client/index.js';
+import { assert, fastest_test } from '../../utils.js';
+import * as $ from 'svelte/internal/client';
 
 /**
  * @param {number} n

benchmarking/benchmarks/kairo/util.js renamed to benchmarking/benchmarks/reactivity/kairo/util.js

@@ -1,5 +1,5 @@
-import { fastest_test } from '../utils.js';
-import * as $ from '../../packages/svelte/src/internal/client/index.js';
+import { fastest_test } from '../../utils.js';
+import * as $ from '../../../packages/svelte/src/internal/client/index.js';
 
 const COUNT = 1e5;
 

benchmarking/benchmarks/mol_bench.js renamed to benchmarking/benchmarks/reactivity/mol_bench.js

@@ -0,0 +1,3 @@
+import { wrapper_bench } from './wrapper/wrapper_bench.js';
+
+export const ssr_benchmarks = [wrapper_bench];

benchmarking/benchmarks/sbench.js renamed to benchmarking/benchmarks/reactivity/sbench.js

@@ -0,0 +1,31 @@
+<script>
+	const wrapperWidth = 960;
+	const wrapperHeight = 720;
+	const cellSize = 10;
+	const centerX = wrapperWidth / 2;
+	const centerY = wrapperHeight / 2;
+
+	let angle = 0;
+	let radius = 0;
+
+	let tiles = [];
+	const step = cellSize;
+
+	while (radius < Math.min(wrapperWidth, wrapperHeight) / 2) {
+		let x = centerX + Math.cos(angle) * radius;
+		let y = centerY + Math.sin(angle) * radius;
+
+		if (x >= 0 && x <= wrapperWidth - cellSize && y >= 0 && y <= wrapperHeight - cellSize) {
+			tiles.push({ x, y });
+		}
+
+		angle += 0.2;
+		radius += step * 0.015;
+	}
+</script>
+
+<div id="wrapper">
+	{#each tiles as { x, y }}
+		<div class="tile" style="left: {x.toFixed(2)}px; top: {y.toFixed(2)}px;"></div>
+	{/each}
+</div>

benchmarking/benchmarks/ssr/index.js

@@ -0,0 +1,36 @@
+import { render } from 'svelte/server';
+import { fastest_test, read_file, write } from '../../../utils.js';
+import { compile } from 'svelte/compiler';
+
+const dir = `${process.cwd()}/benchmarking/benchmarks/ssr/wrapper`;
+
+async function compile_svelte() {
+	const output = compile(read_file(`${dir}/App.svelte`), {
+		generate: 'server'
+	});
+	write(`${dir}/output/App.js`, output.js.code);
+
+	const module = await import(`${dir}/output/App.js`);
+
+	return module.default;
+}
+
+export async function wrapper_bench() {
+	const App = await compile_svelte();
+	// Do 3 loops to warm up JIT
+	for (let i = 0; i < 3; i++) {
+		render(App);
+	}
+
+	const { timing } = await fastest_test(10, () => {
+		for (let i = 0; i < 100; i++) {
+			render(App);
+		}
+	});
+
+	return {
+		benchmark: 'wrapper_bench',
+		time: timing.time.toFixed(2),
+		gc_time: timing.gc_time.toFixed(2)
+	};
+}

benchmarking/benchmarks/ssr/wrapper/App.svelte

@@ -1,30 +1,53 @@
 import * as $ from '../packages/svelte/src/internal/client/index.js';
-import { benchmarks } from './benchmarks.js';
+import { reactivity_benchmarks } from './benchmarks/reactivity/index.js';
+import { ssr_benchmarks } from './benchmarks/ssr/index.js';
 
 let total_time = 0;
 let total_gc_time = 0;
 
+const suites = [
+	{ benchmarks: reactivity_benchmarks, name: 'reactivity benchmarks' },
+	{ benchmarks: ssr_benchmarks, name: 'server-side rendering benchmarks' }
+];
+
 // eslint-disable-next-line no-console
-console.log('-- Benchmarking Started --');
+console.log('\x1b[1m', '-- Benchmarking Started --', '\x1b[0m');
 $.push({}, true);
 try {
-	for (const benchmark of benchmarks) {
-		const results = await benchmark();
+	for (const { benchmarks, name } of suites) {
+		let suite_time = 0;
+		let suite_gc_time = 0;
+		// eslint-disable-next-line no-console
+		console.log(`\nRunning ${name}...\n`);
+
+		for (const benchmark of benchmarks) {
+			const results = await benchmark();
+			// eslint-disable-next-line no-console
+			console.log(results);
+			total_time += Number(results.time);
+			total_gc_time += Number(results.gc_time);
+			suite_time += Number(results.time);
+			suite_gc_time += Number(results.gc_time);
+		}
+
+		console.log(`\nFinished ${name}.\n`);
+
 		// eslint-disable-next-line no-console
-		console.log(results);
-		total_time += Number(results.time);
-		total_gc_time += Number(results.gc_time);
+		console.log({
+			suite_time: suite_time.toFixed(2),
+			suite_gc_time: suite_gc_time.toFixed(2)
+		});
 	}
 } catch (e) {
 	// eslint-disable-next-line no-console
-	console.error('-- Benchmarking Failed --');
+	console.log('\x1b[1m', '\n-- Benchmarking Failed --\n', '\x1b[0m');
 	// eslint-disable-next-line no-console
 	console.error(e);
 	process.exit(1);
 }
 $.pop();
 // eslint-disable-next-line no-console
-console.log('-- Benchmarking Complete --');
+console.log('\x1b[1m', '\n-- Benchmarking Complete --\n', '\x1b[0m');
 // eslint-disable-next-line no-console
 console.log({
 	total_time: total_time.toFixed(2),

benchmarking/benchmarks/ssr/wrapper/wrapper_bench.js

@@ -1,5 +1,7 @@
 import { performance, PerformanceObserver } from 'node:perf_hooks';
 import v8 from 'v8-natives';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 
 // Credit to https://github.com/milomg/js-reactivity-benchmark for the logic for timing + GC tracking.
 
@@ -96,3 +98,22 @@ export function assert(a) {
 		throw new Error('Assertion failed');
 	}
 }
+
+/**
+ * @param {string} file
+ */
+export function read_file(file) {
+	return fs.readFileSync(file, 'utf-8').replace(/\r\n/g, '\n');
+}
+
+/**
+ * @param {string} file
+ * @param {string} contents
+ */
+export function write(file, contents) {
+	try {
+		fs.mkdirSync(path.dirname(file), { recursive: true });
+	} catch {}
+
+	fs.writeFileSync(file, contents);
+}

benchmarking/run.js

@@ -38,6 +38,28 @@ Prior to Svelte 5, stores were the go-to solution for creating cross-component r
 - when extracting logic, it's better to take advantage of runes' universal reactivity: You can use runes outside the top level of components and even place them into JavaScript or TypeScript files (using a `.svelte.js` or `.svelte.ts` file ending)
 - when creating shared state, you can create a `$state` object containing the values you need and then manipulate said state
 
+```ts
+/// file: state.svelte.js
+export const userState = $state({
+	name: 'name',
+	/* ... */
+});
+```
+
+```svelte
+<!--- file: App.svelte --->
+<script>
+	import { userState } from './state.svelte';
+</script>
+
+<p>User name: {userState.name}</p>
+<button onclick={() => {
+	userState.name = 'new name';
+}}>
+	change name
+</button>
+```
+
 Stores are still a good solution when you have complex asynchronous data streams or it's important to have more manual control over updating values or listening to changes. If you're familiar with RxJs and want to reuse that knowledge, the `$` also comes in handy for you.
 
 ## svelte/store

benchmarking/utils.js

@@ -169,11 +169,11 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
 
 <Pump
 	---on:---inflate={(power) => {
-		size += power---.details---;
+		size += power---.detail---;
 		if (size > 75) burst = true;
 	}}
 	---on:---deflate={(power) => {
-		if (size > 0) size -= power---.details---;
+		if (size > 0) size -= power---.detail---;
 	}}
 />
 
@@ -317,7 +317,7 @@ When spreading props, local event handlers must go _after_ the spread, or they r
 > - import the function
 > - call the function to get a dispatch function
 > - call said dispatch function with a string and possibly a payload
-> - retrieve said payload on the other end through a `.details` property, because the event itself was always a `CustomEvent`
+> - retrieve said payload on the other end through a `.detail` property, because the event itself was always a `CustomEvent`
 >
 > It was always possible to use component callback props, but because you had to listen to DOM events using `on:`, it made sense to use `createEventDispatcher` for component events due to syntactical consistency. Now that we have event attributes (`onclick`), it's the other way around: Callback props are now the more sensible thing to do.
 >

documentation/docs/06-runtime/01-stores.md

@@ -412,6 +412,12 @@ Expected whitespace
 `$host()` can only be used inside custom element component instances
 ```
 
+### illegal_element_attribute
+
+```
+`<%name%>` does not support non-event attributes or spread attributes
+```
+
 ### import_svelte_internal_forbidden
 
 ```