Merge branch 'main' into optional-render-options

Author: Rich-Harris

.changeset/gorgeous-boxes-design.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure state update expressions are serialised correctly

.changeset/pre.json

@@ -529,6 +529,7 @@
     "strong-lemons-provide",
     "strong-pans-doubt",
     "stupid-parents-crash",
+    "sweet-bottles-check",
     "sweet-mangos-beg",
     "sweet-pens-sniff",
     "swift-donkeys-perform",

.changeset/sweet-bottles-check.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+chore: improve runtime performance of capturing reactive signals

.changeset/twenty-gifts-develop.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: remove document event listeners on unmount

.gitignore

@@ -22,3 +22,5 @@ coverage
 .DS_Store
 
 tmp
+
+benchmarking/compare/.results

benchmarking/benchmarks.js

@@ -0,0 +1,58 @@
+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 {
+	sbench_create_0to1,
+	sbench_create_1000to1,
+	sbench_create_1to1,
+	sbench_create_1to1000,
+	sbench_create_1to2,
+	sbench_create_1to4,
+	sbench_create_1to8,
+	sbench_create_2to1,
+	sbench_create_4to1,
+	sbench_create_signals
+} from './benchmarks/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 = [
+	sbench_create_signals,
+	sbench_create_0to1,
+	sbench_create_1to1,
+	sbench_create_2to1,
+	sbench_create_4to1,
+	sbench_create_1000to1,
+	sbench_create_1to2,
+	sbench_create_1to4,
+	sbench_create_1to8,
+	sbench_create_1to1000,
+	kairo_avoidable_owned,
+	kairo_avoidable_unowned,
+	kairo_broad_owned,
+	kairo_broad_unowned,
+	kairo_deep_owned,
+	kairo_deep_unowned,
+	kairo_diamond_owned,
+	kairo_diamond_unowned,
+	kairo_triangle_owned,
+	kairo_triangle_unowned,
+	kairo_mux_owned,
+	kairo_mux_unowned,
+	kairo_repeated_owned,
+	kairo_repeated_unowned,
+	kairo_unstable_owned,
+	kairo_unstable_unowned,
+	mol_bench_owned,
+	mol_bench_unowned
+];

benchmarking/benchmarks/kairo/kairo_avoidable.js

@@ -34,7 +34,7 @@ function setup() {
 	};
 }
 
-export async function kairo_avoidable() {
+export async function kairo_avoidable_unowned() {
 	// Do 10 loops to warm up JIT
 	for (let i = 0; i < 10; i++) {
 		const { run, destroy } = setup();
@@ -53,7 +53,38 @@ export async function kairo_avoidable() {
 	destroy();
 
 	return {
-		benchmark: 'kairo_avoidable',
+		benchmark: 'kairo_avoidable_unowned',
+		time: timing.time.toFixed(2),
+		gc_time: timing.gc_time.toFixed(2)
+	};
+}
+
+export async function kairo_avoidable_owned() {
+	let run, destroy;
+
+	const destroy_owned = $.effect_root(() => {
+		// Do 10 loops to warm up JIT
+		for (let i = 0; i < 10; i++) {
+			const { run, destroy } = setup();
+			run();
+			destroy();
+		}
+
+		({ run, destroy } = setup());
+	});
+
+	const { timing } = await fastest_test(10, () => {
+		for (let i = 0; i < 100; i++) {
+			run();
+		}
+	});
+
+	// @ts-ignore
+	destroy();
+	destroy_owned();
+
+	return {
+		benchmark: 'kairo_avoidable_owned',
 		time: timing.time.toFixed(2),
 		gc_time: timing.gc_time.toFixed(2)
 	};

benchmarking/benchmarks/kairo/kairo_broad.js

@@ -28,7 +28,7 @@ function setup() {
 			$.flush_sync(() => {
 				$.set(head, 1);
 			});
-			counter = 0
+			counter = 0;
 			for (let i = 0; i < 50; i++) {
 				$.flush_sync(() => {
 					$.set(head, i);
@@ -40,7 +40,7 @@ function setup() {
 	};
 }
 
-export async function kairo_broad() {
+export async function kairo_broad_unowned() {
 	// Do 10 loops to warm up JIT
 	for (let i = 0; i < 10; i++) {
 		const { run, destroy } = setup();
@@ -59,7 +59,38 @@ export async function kairo_broad() {
 	destroy();
 
 	return {
-		benchmark: 'kairo_broad',
+		benchmark: 'kairo_broad_unowned',
+		time: timing.time.toFixed(2),
+		gc_time: timing.gc_time.toFixed(2)
+	};
+}
+
+export async function kairo_broad_owned() {
+	let run, destroy;
+
+	const destroy_owned = $.effect_root(() => {
+		// Do 10 loops to warm up JIT
+		for (let i = 0; i < 10; i++) {
+			const { run, destroy } = setup();
+			run();
+			destroy();
+		}
+
+		({ run, destroy } = setup());
+	});
+
+	const { timing } = await fastest_test(10, () => {
+		for (let i = 0; i < 100; i++) {
+			run();
+		}
+	});
+
+	// @ts-ignore
+	destroy();
+	destroy_owned();
+
+	return {
+		benchmark: 'kairo_broad_owned',
 		time: timing.time.toFixed(2),
 		gc_time: timing.gc_time.toFixed(2)
 	};

benchmarking/benchmarks/kairo/kairo_deep.js

@@ -8,12 +8,12 @@ function setup() {
 	let head = $.source(0);
 	let current = head;
 	for (let i = 0; i < len; i++) {
-    let c = current;
-    current = $.derived(() => {
-      return $.get(c) + 1;
-    });
-  }
-  let counter = 0;
+		let c = current;
+		current = $.derived(() => {
+			return $.get(c) + 1;
+		});
+	}
+	let counter = 0;
 
 	const destroy = $.effect_root(() => {
 		$.render_effect(() => {
@@ -28,7 +28,7 @@ function setup() {
 			$.flush_sync(() => {
 				$.set(head, 1);
 			});
-			counter = 0
+			counter = 0;
 			for (let i = 0; i < iter; i++) {
 				$.flush_sync(() => {
 					$.set(head, i);
@@ -40,7 +40,7 @@ function setup() {
 	};
 }
 
-export async function kairo_deep() {
+export async function kairo_deep_unowned() {
 	// Do 10 loops to warm up JIT
 	for (let i = 0; i < 10; i++) {
 		const { run, destroy } = setup();
@@ -59,7 +59,38 @@ export async function kairo_deep() {
 	destroy();
 
 	return {
-		benchmark: 'kairo_deep',
+		benchmark: 'kairo_deep_unowned',
+		time: timing.time.toFixed(2),
+		gc_time: timing.gc_time.toFixed(2)
+	};
+}
+
+export async function kairo_deep_owned() {
+	let run, destroy;
+
+	const destroy_owned = $.effect_root(() => {
+		// Do 10 loops to warm up JIT
+		for (let i = 0; i < 10; i++) {
+			const { run, destroy } = setup();
+			run();
+			destroy();
+		}
+
+		({ run, destroy } = setup());
+	});
+
+	const { timing } = await fastest_test(10, () => {
+		for (let i = 0; i < 100; i++) {
+			run();
+		}
+	});
+
+	// @ts-ignore
+	destroy();
+	destroy_owned();
+
+	return {
+		benchmark: 'kairo_deep_owned',
 		time: timing.time.toFixed(2),
 		gc_time: timing.gc_time.toFixed(2)
 	};

benchmarking/benchmarks/kairo/kairo_diamond.js

@@ -5,17 +5,17 @@ let width = 5;
 
 function setup() {
 	let head = $.source(0);
-  let current = [];
-  for (let i = 0; i < width; i++) {
-    current.push(
-      $.derived(() => {
-        return $.get(head) + 1;
-      })
-    );
-  }
-  let sum = $.derived(() => {
-    return current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
-  });
+	let current = [];
+	for (let i = 0; i < width; i++) {
+		current.push(
+			$.derived(() => {
+				return $.get(head) + 1;
+			})
+		);
+	}
+	let sum = $.derived(() => {
+		return current.map((x) => $.get(x)).reduce((a, b) => a + b, 0);
+	});
 	let counter = 0;
 
 	const destroy = $.effect_root(() => {
@@ -44,7 +44,7 @@ function setup() {
 	};
 }
 
-export async function kairo_diamond() {
+export async function kairo_diamond_unowned() {
 	// Do 10 loops to warm up JIT
 	for (let i = 0; i < 10; i++) {
 		const { run, destroy } = setup();
@@ -63,7 +63,38 @@ export async function kairo_diamond() {
 	destroy();
 
 	return {
-		benchmark: 'kairo_diamond',
+		benchmark: 'kairo_diamond_unowned',
+		time: timing.time.toFixed(2),
+		gc_time: timing.gc_time.toFixed(2)
+	};
+}
+
+export async function kairo_diamond_owned() {
+	let run, destroy;
+
+	const destroy_owned = $.effect_root(() => {
+		// Do 10 loops to warm up JIT
+		for (let i = 0; i < 10; i++) {
+			const { run, destroy } = setup();
+			run();
+			destroy();
+		}
+
+		({ run, destroy } = setup());
+	});
+
+	const { timing } = await fastest_test(10, () => {
+		for (let i = 0; i < 100; i++) {
+			run();
+		}
+	});
+
+	// @ts-ignore
+	destroy();
+	destroy_owned();
+
+	return {
+		benchmark: 'kairo_diamond_owned',
 		time: timing.time.toFixed(2),
 		gc_time: timing.gc_time.toFixed(2)
 	};