Merge branch 'main' into svelte-custom-renderer

benchmarking/benchmarks/reactivity/index.js

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import 'svelte/internal/flags/async';
 import {
 	sbench_create_0to1,
 	sbench_create_1000to1,

benchmarking/benchmarks/reactivity/tests/clean_effects.bench.js

@@ -0,0 +1,32 @@
+import assert from 'node:assert';
+import * as $ from 'svelte/internal/client';
+
+export default () => {
+	const a = $.state(1);
+	const b = $.state(2);
+
+	let total = 0;
+
+	const destroy = $.effect_root(() => {
+		for (let i = 0; i < 1000; i += 1) {
+			$.render_effect(() => {
+				total += $.get(a);
+			});
+		}
+
+		$.render_effect(() => {
+			total += $.get(b);
+		});
+	});
+
+	return {
+		destroy,
+		run() {
+			for (let i = 0; i < 5; i++) {
+				total = 0;
+				$.flush(() => $.set(b, i));
+				assert.equal(total, i);
+			}
+		}
+	};
+};

benchmarking/compare/generate-report.js

@@ -0,0 +1,81 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+export function generate_report(outdir) {
+	const result_files = fs
+		.readdirSync(outdir)
+		.filter((file) => file.endsWith('.json'))
+		.sort((a, b) => a.localeCompare(b));
+
+	const branches = result_files.map((file) => file.slice(0, -5));
+	const results = result_files.map((file) =>
+		JSON.parse(fs.readFileSync(`${outdir}/${file}`, 'utf-8'))
+	);
+
+	if (results.length === 0) {
+		console.error(`No result files found in ${outdir}`);
+		process.exit(1);
+	}
+
+	const report_file = path.join(outdir, 'report.txt');
+
+	fs.writeFileSync(report_file, '');
+
+	const write = (str) => {
+		fs.appendFileSync(report_file, str + '\n');
+		console.log(str);
+	};
+
+	for (let i = 0; i < branches.length; i += 1) {
+		write(`${char(i)}: ${branches[i]}`);
+	}
+
+	write('');
+
+	for (let i = 0; i < results[0].length; i += 1) {
+		write(`${results[0][i].benchmark}`);
+
+		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) {
+				const time = times[b];
+
+				if (time < min) {
+					min = time;
+					min_index = b;
+				}
+
+				if (time > max) {
+					max = time;
+				}
+			}
+
+			if (min !== 0) {
+				write(`  ${metric}: fastest is ${char(min_index)} (${branches[min_index]})`);
+				times.forEach((time, b) => {
+					const SIZE = 20;
+					const n = Math.round(SIZE * (time / max));
+
+					write(`    ${char(b)}: ${'◼'.repeat(n)}${' '.repeat(SIZE - n)} ${time.toFixed(2)}ms`);
+				});
+			}
+		}
+
+		write('');
+	}
+}
+
+function char(i) {
+	return String.fromCharCode(97 + i);
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+	const outdir = path.resolve(process.argv[1], '../.results');
+
+	generate_report(outdir);
+}

benchmarking/compare/index.js

@@ -3,6 +3,7 @@ import path from 'node:path';
 import { execSync, fork } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { safe } from '../utils.js';
+import { generate_report } from './generate-report.js';
 
 // if (execSync('git status --porcelain').toString().trim()) {
 // 	console.error('Working directory is not clean');
@@ -12,7 +13,6 @@ import { safe } from '../utils.js';
 const filename = fileURLToPath(import.meta.url);
 const runner = path.resolve(filename, '../runner.js');
 const outdir = path.resolve(filename, '../.results');
-const report_file = `${outdir}/report.txt`;
 
 fs.mkdirSync(outdir, { recursive: true });
 
@@ -85,70 +85,4 @@ if (PROFILE_DIR !== null) {
 	console.log(`\nCPU profiles written to ${PROFILE_DIR}`);
 }
 
-const result_files = fs
+generate_report(outdir);
-	.readdirSync(outdir)
-	.filter((file) => file.endsWith('.json'))
-	.sort((a, b) => a.localeCompare(b));
-
-const branches = result_files.map((file) => file.slice(0, -5));
-const results = result_files.map((file) =>
-	JSON.parse(fs.readFileSync(`${outdir}/${file}`, 'utf-8'))
-);
-
-if (results.length === 0) {
-	console.error(`No result files found in ${outdir}`);
-	process.exit(1);
-}
-
-fs.writeFileSync(report_file, '');
-
-const write = (str) => {
-	fs.appendFileSync(report_file, str + '\n');
-	console.log(str);
-};
-
-for (let i = 0; i < branches.length; i += 1) {
-	write(`${char(i)}: ${branches[i]}`);
-}
-
-write('');
-
-for (let i = 0; i < results[0].length; i += 1) {
-	write(`${results[0][i].benchmark}`);
-
-	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) {
-			const time = times[b];
-
-			if (time < min) {
-				min = time;
-				min_index = b;
-			}
-
-			if (time > max) {
-				max = time;
-			}
-		}
-
-		if (min !== 0) {
-			write(`  ${metric}: fastest is ${char(min_index)} (${branches[min_index]})`);
-			times.forEach((time, b) => {
-				const SIZE = 20;
-				const n = Math.round(SIZE * (time / max));
-
-				write(`    ${char(b)}: ${'◼'.repeat(n)}${' '.repeat(SIZE - n)} ${time.toFixed(2)}ms`);
-			});
-		}
-	}
-
-	write('');
-}
-
-function char(i) {
-	return String.fromCharCode(97 + i);
-}

benchmarking/utils.js

@@ -49,6 +49,253 @@ export function safe(name) {
 	return name.replace(/[^a-z0-9._-]+/gi, '_');
 }
 
+/**
+ * @param {unknown} value
+ */
+function format_markdown_value(value) {
+	if (value === null || value === undefined) return '';
+	if (Array.isArray(value)) return value.map((item) => String(item)).join(', ');
+	if (typeof value === 'object') return JSON.stringify(value);
+	return String(value);
+}
+
+/**
+ * @param {string} text
+ */
+function escape_markdown_cell(text) {
+	return text.replace(/\\/g, '\\\\').replace(/\|/g, '\\|').replace(/\r?\n/g, ' ');
+}
+
+/**
+ * @param {string} value
+ */
+function normalize_profile_url(value) {
+	if (!value) return '';
+
+	if (value.startsWith('file://')) {
+		try {
+			const pathname = decodeURIComponent(new URL(value).pathname);
+			const relative = path.relative(process.cwd(), pathname);
+			if (relative && !relative.startsWith('..') && !path.isAbsolute(relative)) return relative;
+			return pathname;
+		} catch {
+			return value;
+		}
+	}
+
+	if (path.isAbsolute(value)) {
+		const relative = path.relative(process.cwd(), value);
+		if (relative && !relative.startsWith('..') && !path.isAbsolute(relative)) return relative;
+	}
+
+	return value;
+}
+
+/**
+ * @param {string} function_name
+ */
+function is_special_runtime_node(function_name) {
+	return function_name === '(idle)' || function_name === '(garbage collector)';
+}
+
+/**
+ * @param {string} normalized_url
+ */
+function is_svelte_source_url(normalized_url) {
+	return normalized_url.startsWith('packages/svelte/');
+}
+
+/**
+ * @param {Record<string, unknown>} profile
+ */
+function profile_to_markdown(profile) {
+	/** @type {string[]} */
+	const lines = ['# CPU profile'];
+
+	const metadata = Object.entries(profile).filter(
+		([key]) => key !== 'nodes' && key !== 'samples' && key !== 'timeDeltas'
+	);
+
+	if (metadata.length > 0) {
+		lines.push('', '## Metadata', '| Field | Value |', '| --- | --- |');
+		for (const [key, value] of metadata) {
+			lines.push(
+				`| ${escape_markdown_cell(key)} | ${escape_markdown_cell(format_markdown_value(value))} |`
+			);
+		}
+	}
+
+	const nodes = Array.isArray(profile.nodes) ? profile.nodes : [];
+	const samples = Array.isArray(profile.samples) ? profile.samples : [];
+	const timeDeltas = Array.isArray(profile.timeDeltas) ? profile.timeDeltas : [];
+	/** @type {Set<number>} */
+	const included_node_ids = new Set();
+
+	if (nodes.length > 0) {
+		/** @type {Map<number, Record<string, unknown>>} */
+		const nodes_by_id = new Map();
+
+		/** @type {Map<number, number>} */
+		const parent_by_id = new Map();
+
+		for (const node of nodes) {
+			if (!node || typeof node !== 'object') continue;
+			if (typeof node.id !== 'number') continue;
+			nodes_by_id.set(node.id, node);
+			const children = Array.isArray(node.children) ? node.children : [];
+			for (const child of children) {
+				if (typeof child === 'number') {
+					parent_by_id.set(child, node.id);
+				}
+			}
+
+			const callFrame =
+				node.callFrame && typeof node.callFrame === 'object'
+					? /** @type {Record<string, unknown>} */ (node.callFrame)
+					: /** @type {Record<string, unknown>} */ ({});
+			const functionName =
+				typeof callFrame.functionName === 'string' ? callFrame.functionName : '(anonymous)';
+			const normalizedUrl =
+				typeof callFrame.url === 'string' ? normalize_profile_url(callFrame.url) : '';
+
+			if (is_special_runtime_node(functionName) || is_svelte_source_url(normalizedUrl)) {
+				included_node_ids.add(node.id);
+			}
+		}
+
+		/** @type {Map<number, number>} */
+		const self_sample_count = new Map();
+		for (const sample of samples) {
+			if (typeof sample !== 'number') continue;
+			if (!included_node_ids.has(sample)) continue;
+			self_sample_count.set(sample, (self_sample_count.get(sample) ?? 0) + 1);
+		}
+
+		/** @type {Map<number, number>} */
+		const inclusive_sample_count = new Map();
+		/** @type {Set<number>} */
+		const stack = new Set();
+
+		/** @param {number} node_id */
+		const get_inclusive_count = (node_id) => {
+			const cached = inclusive_sample_count.get(node_id);
+			if (cached !== undefined) return cached;
+			if (stack.has(node_id)) return self_sample_count.get(node_id) ?? 0;
+
+			stack.add(node_id);
+			const node = nodes_by_id.get(node_id);
+			const children = node && Array.isArray(node.children) ? node.children : [];
+			let total = self_sample_count.get(node_id) ?? 0;
+
+			for (const child of children) {
+				if (typeof child !== 'number') continue;
+				total += get_inclusive_count(child);
+			}
+
+			stack.delete(node_id);
+			inclusive_sample_count.set(node_id, total);
+			return total;
+		};
+
+		for (const node_id of included_node_ids) {
+			get_inclusive_count(node_id);
+		}
+
+		const total_samples = [...self_sample_count.values()].reduce((sum, count) => sum + count, 0);
+		if (total_samples > 0) {
+			const hotspot_rows = [...included_node_ids]
+				.map((id) => nodes_by_id.get(id))
+				.filter((node) => !!node)
+				.map((node) => {
+					const id = /** @type {number} */ (node.id);
+					const callFrame =
+						node.callFrame && typeof node.callFrame === 'object'
+							? /** @type {Record<string, unknown>} */ (node.callFrame)
+							: /** @type {Record<string, unknown>} */ ({});
+					const functionName =
+						typeof callFrame.functionName === 'string' && callFrame.functionName.length > 0
+							? callFrame.functionName
+							: '(anonymous)';
+					const selfCount = self_sample_count.get(id) ?? 0;
+					const inclusiveCount = inclusive_sample_count.get(id) ?? selfCount;
+					return { id, functionName, selfCount, inclusiveCount };
+				})
+				.filter((row) => row.selfCount > 0 || row.inclusiveCount > 0)
+				.sort(
+					(a, b) =>
+						b.inclusiveCount - a.inclusiveCount ||
+						b.selfCount - a.selfCount ||
+						String(a.id).localeCompare(String(b.id))
+				)
+				.slice(0, 25);
+
+			if (hotspot_rows.length > 0) {
+				lines.push(
+					'',
+					'## Top hotspots',
+					'| Rank | Node ID | Function | Self samples | Self % | Inclusive samples | Inclusive % |',
+					'| --- | --- | --- | --- | --- | --- | --- |'
+				);
+
+				for (let i = 0; i < hotspot_rows.length; i += 1) {
+					const row = hotspot_rows[i];
+					const selfPct = ((row.selfCount / total_samples) * 100).toFixed(2);
+					const inclusivePct = ((row.inclusiveCount / total_samples) * 100).toFixed(2);
+					lines.push(
+						`| ${i + 1} | ${row.id} | ${escape_markdown_cell(row.functionName)} | ${row.selfCount} | ${selfPct}% | ${row.inclusiveCount} | ${inclusivePct}% |`
+					);
+				}
+			}
+		}
+
+		lines.push(
+			'',
+			'## Nodes',
+			'| ID | Parent ID | Function | URL | Line | Column | Hit count | Children | Deopt reason |',
+			'| --- | --- | --- | --- | --- | --- | --- | --- | --- |'
+		);
+
+		for (const node of nodes) {
+			if (!node || typeof node !== 'object') continue;
+			if (typeof node.id !== 'number') continue;
+			if (!included_node_ids.has(node.id)) continue;
+
+			const callFrame =
+				node.callFrame && typeof node.callFrame === 'object'
+					? /** @type {Record<string, unknown>} */ (node.callFrame)
+					: /** @type {Record<string, unknown>} */ ({});
+
+			const id = typeof node.id === 'number' ? node.id : '';
+			const parentId =
+				typeof id === 'number' && included_node_ids.has(parent_by_id.get(id) ?? NaN)
+					? parent_by_id.get(id) ?? ''
+					: '';
+			const functionName =
+				typeof callFrame.functionName === 'string' && callFrame.functionName.length > 0
+					? callFrame.functionName
+					: '(anonymous)';
+			const url = typeof callFrame.url === 'string' ? normalize_profile_url(callFrame.url) : '';
+			const lineNumber =
+				typeof callFrame.lineNumber === 'number' ? String(callFrame.lineNumber + 1) : '';
+			const columnNumber =
+				typeof callFrame.columnNumber === 'number' ? String(callFrame.columnNumber + 1) : '';
+			const hitCount = typeof node.hitCount === 'number' ? node.hitCount : '';
+			const children = Array.isArray(node.children)
+				? node.children
+						.filter((child) => typeof child === 'number' && included_node_ids.has(child))
+						.join(', ')
+				: '';
+			const deoptReason = typeof node.deoptReason === 'string' ? node.deoptReason : '';
+
+			lines.push(
+				`| ${escape_markdown_cell(String(id))} | ${escape_markdown_cell(String(parentId))} | ${escape_markdown_cell(functionName)} | ${escape_markdown_cell(url)} | ${escape_markdown_cell(lineNumber)} | ${escape_markdown_cell(columnNumber)} | ${escape_markdown_cell(String(hitCount))} | ${escape_markdown_cell(children)} | ${escape_markdown_cell(deoptReason)} |`
+			);
+		}
+	}
+
+	return `${lines.join('\n')}\n`;
+}
+
 /**
  * @template T
  * @param {string | null} profile_dir
@@ -73,8 +320,14 @@ export async function with_cpu_profile(profile_dir, profile_name, fn) {
 		return await fn();
 	} finally {
 		const { profile } = /** @type {{ profile: object }} */ (await session.post('Profiler.stop'));
-		const file = path.join(profile_dir, `${safe(profile_name)}.cpuprofile`);
+		const safe_profile_name = safe(profile_name);
-		fs.writeFileSync(file, JSON.stringify(profile));
+		const profile_file = path.join(profile_dir, `${safe_profile_name}.cpuprofile`);
+		const markdown_file = path.join(profile_dir, `${safe_profile_name}.md`);
+		fs.writeFileSync(profile_file, JSON.stringify(profile));
+		fs.writeFileSync(
+			markdown_file,
+			profile_to_markdown(/** @type {Record<string, unknown>} */ (profile))
+		);
 		session.disconnect();
 	}
 }

packages/svelte/tests/runtime-runes/samples/async-if-after-await-in-script/_config.js

@@ -6,11 +6,13 @@ export default test({
 
 	ssrHtml: '<p>yep</p>',
 
-	async test({ assert, target, variant }) {
+	async test({ assert, target, variant, warnings }) {
 		if (variant === 'dom') {
 			await tick();
 		}
 
 		assert.htmlEqual(target.innerHTML, '<p>yep</p>');
+
+		assert.deepEqual(warnings, []); // TODO not quite sure why this isn't populated yet
 	}
 });

packages/svelte/tests/runtime-runes/samples/await-html-hydration/_config.js

@@ -3,5 +3,7 @@ import { test } from '../../test';
 export default test({
 	skip_no_async: true,
 	mode: ['hydrate'],
-	async test() {}
+	async test({ assert, warnings }) {
+		assert.deepEqual(warnings, []); // TODO not quite sure why this isn't populated yet
+	}
 });