chore:Update for TS7 (#16485)

* Update for TS7

I am testing Typescript 7's JS support, which I've largely rewritten
during the switch to Go. That means Javascript code will need to change
much more than Typescript code. Fortunately, most of the changes are for
the better: Javascript semantics are now nearly identical to Typescript
semantics. It's much stricter and no longer has some persistent bugs
that arose from shady JS handling I wrote years ago.

This PR changes Svelte so that it compiles both with TS5.* and TS7,
which means that occasionally there are duplicative or non-obvious
changes. I'll annotate the interesting changes to explain why I made them.

Because TS7 is quite a way off, I don't know whether you'll want to take
this PR. Most of the changes are for the better, because they're due to
stricter TS-aligned checking. But some are neutral and there is the
previously mentioned duplication in a few places.

* add changeset

* revert scribbles mistakenly added

* pnpm run format

* revert mistaken edit

* return to function declarations w/type tag

* add job to ci.yml

* skipLibCheck for now

* no need for a changeset here

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>

.github/workflows/ci.yml

@@ -60,6 +60,23 @@ jobs:
         env:
           CI: true
           SVELTE_NO_ASYNC: true
+  TSGo:
+    permissions: {}
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: pnpm
+      - name: install
+        run: pnpm install --frozen-lockfile
+      - name: install tsgo
+        run: cd packages/svelte && pnpm i -D @typescript/native-preview
+      - name: type check
+        run: cd packages/svelte && pnpm check:tsgo
   Lint:
     permissions: {}
     runs-on: ubuntu-latest

packages/svelte/package.json

@@ -141,6 +141,7 @@
     "build": "node scripts/process-messages && rollup -c && pnpm generate:types && node scripts/check-treeshakeability.js",
     "dev": "node scripts/process-messages -w & rollup -cw",
     "check": "tsc --project tsconfig.runtime.json && tsc && cd ./tests/types && tsc",
+    "check:tsgo": "tsgo --project tsconfig.runtime.json --skipLibCheck && tsgo --skipLibCheck",
     "check:watch": "tsc --watch",
     "generate:version": "node ./scripts/generate-version.js",
     "generate:types": "node ./scripts/generate-types.js && tsc -p tsconfig.generated.json",

packages/svelte/scripts/generate-types.js

@@ -26,9 +26,11 @@ await createBundle({
 		// so that types/properties with `@internal` (and its dependencies) are removed from the output
 		stripInternal: true,
 		paths: Object.fromEntries(
-			Object.entries(pkg.imports).map(([key, value]) => {
-				return [key, [value.types ?? value.default ?? value]];
-			})
+			Object.entries(pkg.imports).map(
+				/** @param {[string,any]} import */ ([key, value]) => {
+					return [key, [value.types ?? value.default ?? value]];
+				}
+			)
 		)
 	},
 	modules: {

packages/svelte/src/compiler/legacy.js

@@ -55,7 +55,9 @@ export function convert(source, ast) {
 
 				// Insert svelte:options back into the root nodes
 				if (/** @type {any} */ (options)?.__raw__) {
-					let idx = node.fragment.nodes.findIndex((node) => options.end <= node.start);
+					let idx = node.fragment.nodes.findIndex(
+						(node) => /** @type {any} */ (options).end <= node.start
+					);
 					if (idx === -1) {
 						idx = node.fragment.nodes.length;
 					}

packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

@@ -9,8 +9,8 @@ import {
 import { regex_ends_with_whitespace, regex_starts_with_whitespace } from '../../patterns.js';
 import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
 
-/** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
-/** @typedef {FORWARD | BACKWARD} Direction */
+/** @typedef {typeof NODE_PROBABLY_EXISTS | typeof NODE_DEFINITELY_EXISTS} NodeExistsValue */
+/** @typedef {typeof FORWARD | typeof BACKWARD} Direction */
 
 const NODE_PROBABLY_EXISTS = 0;
 const NODE_DEFINITELY_EXISTS = 1;

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -297,7 +297,7 @@ export function analyze_module(source, options) {
 			// TODO the following are not needed for modules, but we have to pass them in order to avoid type error,
 			// and reducing the type would result in a lot of tedious type casts elsewhere - find a good solution one day
 			ast_type: /** @type {any} */ (null),
-			component_slots: new Set(),
+			component_slots: /** @type {Set<string>} */ (new Set()),
 			expression: null,
 			function_depth: 0,
 			has_props_rune: false,

packages/svelte/src/compiler/phases/2-analyze/utils/check_graph_for_cycles.js

@@ -14,6 +14,7 @@ export default function check_graph_for_cycles(edges) {
 	}, new Map());
 
 	const visited = new Set();
+	/** @type {Set<T>} */
 	const on_stack = new Set();
 	/** @type {Array<Array<T>>} */
 	const cycles = [];

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y/index.js

@@ -599,7 +599,7 @@ function has_disabled_attribute(attribute_map) {
 /**
  * @param {string} tag_name
  * @param {Map<string, AST.Attribute>} attribute_map
- * @returns {ElementInteractivity[keyof ElementInteractivity]}
+ * @returns {typeof ElementInteractivity[keyof typeof ElementInteractivity]}
  */
 function element_interactivity(tag_name, attribute_map) {
 	if (

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js

@@ -145,6 +145,7 @@ export function visit_component(node, context) {
 		if (slot_name !== 'default') comments = [];
 	}
 
+	/** @type {Set<string>} */
 	const component_slots = new Set();
 
 	for (const slot_name in nodes) {

packages/svelte/src/compiler/phases/scope.js

@@ -22,7 +22,7 @@ const NUMBER = Symbol('number');
 const STRING = Symbol('string');
 const FUNCTION = Symbol('string');
 
-/** @type {Record<string, [type: NUMBER | STRING | UNKNOWN, fn?: Function]>} */
+/** @type {Record<string, [type: typeof NUMBER | typeof  STRING | typeof  UNKNOWN, fn?: Function]>} */
 const globals = {
 	BigInt: [NUMBER],
 	'Math.min': [NUMBER, Math.min],

packages/svelte/src/compiler/state.js

@@ -87,7 +87,7 @@ export function pop_ignore() {
 
 /**
  * @param {AST.SvelteNode | NodeLike} node
- * @param {import('../constants.js').IGNORABLE_RUNTIME_WARNINGS[number]} code
+ * @param {typeof import('../constants.js').IGNORABLE_RUNTIME_WARNINGS[number]} code
  * @returns
  */
 export function is_ignored(node, code) {

packages/svelte/src/index-client.js

@@ -160,10 +160,14 @@ export function createEventDispatcher() {
 		e.lifecycle_outside_component('createEventDispatcher');
 	}
 
+	/**
+	 * @param [detail]
+	 * @param [options]
+	 */
 	return (type, detail, options) => {
 		const events = /** @type {Record<string, Function | Function[]>} */ (
 			active_component_context.s.$$events
-		)?.[/** @type {any} */ (type)];
+		)?.[/** @type {string} */ (type)];
 
 		if (events) {
 			const callbacks = is_array(events) ? events.slice() : [events];

packages/svelte/src/internal/client/dev/hmr.js

@@ -64,7 +64,7 @@ export function hmr(original, get_source) {
 	// @ts-expect-error
 	wrapper[FILENAME] = original[FILENAME];
 
-	// @ts-expect-error
+	// @ts-ignore
 	wrapper[HMR] = {
 		// When we accept an update, we set the original source to the new component
 		original,

packages/svelte/src/internal/client/dom/blocks/await.js

@@ -28,6 +28,8 @@ const PENDING = 0;
 const THEN = 1;
 const CATCH = 2;
 
+/** @typedef {typeof PENDING | typeof THEN | typeof CATCH} AwaitState */
+
 /**
  * @template V
  * @param {TemplateNode} node
@@ -67,9 +69,8 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 		: mutable_source(/** @type {V} */ (undefined), false, false);
 	var error_source = runes ? source(undefined) : mutable_source(undefined, false, false);
 	var resolved = false;
-
 	/**
-	 * @param {PENDING | THEN | CATCH} state
+	 * @param {AwaitState} state
 	 * @param {boolean} restore
 	 */
 	function update(state, restore) {

packages/svelte/src/internal/client/dom/blocks/each.js

@@ -191,7 +191,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		// store a reference to the effect so that we can update the start/end nodes in reconciliation
 		each_effect ??= /** @type {Effect} */ (active_effect);
 
-		array = get(each_array);
+		array = /** @type {V[]} */ (get(each_array));
 		var length = array.length;
 
 		if (was_empty && length === 0) {

packages/svelte/src/internal/client/dom/blocks/if.js

@@ -36,7 +36,7 @@ export function if_block(node, fn, elseif = false) {
 	/** @type {Effect | null} */
 	var alternate_effect = null;
 
-	/** @type {UNINITIALIZED | boolean | null} */
+	/** @type {typeof UNINITIALIZED | boolean | null} */
 	var condition = UNINITIALIZED;
 
 	var flags = elseif ? EFFECT_TRANSPARENT : 0;

packages/svelte/src/internal/client/dom/elements/bindings/input.js

@@ -245,6 +245,7 @@ export function bind_checked(input, get, set = get) {
  * @returns {V[]}
  */
 function get_binding_group_value(group, __value, checked) {
+	/** @type {Set<V>} */
 	var value = new Set();
 
 	for (var i = 0; i < group.length; i += 1) {

packages/svelte/src/internal/client/dom/template.js

@@ -156,7 +156,7 @@ export function from_mathml(content, flags) {
 
 /**
  * @param {TemplateStructure[]} structure
- * @param {NAMESPACE_SVG | NAMESPACE_MATHML | undefined} [ns]
+ * @param {typeof NAMESPACE_SVG | typeof NAMESPACE_MATHML | undefined} [ns]
  */
 function fragment_from_tree(structure, ns) {
 	var fragment = create_fragment();

packages/svelte/src/internal/client/reactivity/props.js

@@ -184,8 +184,7 @@ export function legacy_rest_props(props, exclude) {
  * The proxy handler for spread props. Handles the incoming array of props
  * that looks like `() => { dynamic: props }, { static: prop }, ..` and wraps
  * them so that the whole thing is passed to the component as the `$$props` argument.
- * @template {Record<string | symbol, unknown>} T
- * @type {ProxyHandler<{ props: Array<T | (() => T)> }>}}
+ * @type {ProxyHandler<{ props: Array<Record<string | symbol, unknown> | (() => Record<string | symbol, unknown>)> }>}}
  */
 const spread_props_handler = {
 	get(target, key) {
@@ -362,22 +361,23 @@ export function prop(props, key, flags, fallback) {
 	// means we can just call `$$props.foo = value` directly
 	if (setter) {
 		var legacy_parent = props.$$legacy;
-
-		return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
-			if (arguments.length > 0) {
-				// We don't want to notify if the value was mutated and the parent is in runes mode.
-				// In that case the state proxy (if it exists) should take care of the notification.
-				// If the parent is not in runes mode, we need to notify on mutation, too, that the prop
-				// has changed because the parent will not be able to detect the change otherwise.
-				if (!runes || !mutation || legacy_parent || is_store_sub) {
-					/** @type {Function} */ (setter)(mutation ? getter() : value);
+		return /** @type {() => V} */ (
+			function (/** @type {V} */ value, /** @type {boolean} */ mutation) {
+				if (arguments.length > 0) {
+					// We don't want to notify if the value was mutated and the parent is in runes mode.
+					// In that case the state proxy (if it exists) should take care of the notification.
+					// If the parent is not in runes mode, we need to notify on mutation, too, that the prop
+					// has changed because the parent will not be able to detect the change otherwise.
+					if (!runes || !mutation || legacy_parent || is_store_sub) {
+						/** @type {Function} */ (setter)(mutation ? getter() : value);
+					}
+
+					return value;
 				}
 
-				return value;
+				return getter();
 			}
-
-			return getter();
-		};
+		);
 	}
 
 	// Either prop is written to, but there's no binding, which means we
@@ -400,29 +400,31 @@ export function prop(props, key, flags, fallback) {
 
 	var parent_effect = /** @type {Effect} */ (active_effect);
 
-	return function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
-		if (arguments.length > 0) {
-			const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
+	return /** @type {() => V} */ (
+		function (/** @type {any} */ value, /** @type {boolean} */ mutation) {
+			if (arguments.length > 0) {
+				const new_value = mutation ? get(d) : runes && bindable ? proxy(value) : value;
+
+				set(d, new_value);
+				overridden = true;
 
-			set(d, new_value);
-			overridden = true;
+				if (fallback_value !== undefined) {
+					fallback_value = new_value;
+				}
 
-			if (fallback_value !== undefined) {
-				fallback_value = new_value;
+				return value;
 			}
 
-			return value;
-		}
+			// special case — avoid recalculating the derived if we're in a
+			// teardown function and the prop was overridden locally, or the
+			// component was already destroyed (this latter part is necessary
+			// because `bind:this` can read props after the component has
+			// been destroyed. TODO simplify `bind:this`
+			if ((is_destroying_effect && overridden) || (parent_effect.f & DESTROYED) !== 0) {
+				return d.v;
+			}
 
-		// special case — avoid recalculating the derived if we're in a
-		// teardown function and the prop was overridden locally, or the
-		// component was already destroyed (this latter part is necessary
-		// because `bind:this` can read props after the component has
-		// been destroyed. TODO simplify `bind:this`
-		if ((is_destroying_effect && overridden) || (parent_effect.f & DESTROYED) !== 0) {
-			return d.v;
+			return get(d);
 		}
-
-		return get(d);
-	};
+	);
 }

packages/svelte/src/internal/client/reactivity/sources.js

@@ -37,6 +37,7 @@ import { Batch, schedule_effect } from './batch.js';
 import { proxy } from '../proxy.js';
 import { execute_derived } from './deriveds.js';
 
+/** @type {Set<any>} */
 export let inspect_effects = new Set();
 
 /** @type {Map<Source, any>} */

packages/svelte/src/internal/client/render.js

@@ -177,6 +177,7 @@ const document_listeners = new Map();
 function _mount(Component, { target, anchor, props = {}, events, context, intro = true }) {
 	init_operations();
 
+	/** @type {Set<string>} */
 	var registered_events = new Set();
 
 	/** @param {Array<string>} events */

packages/svelte/src/internal/client/runtime.js

@@ -284,7 +284,8 @@ export function update_reaction(reaction) {
 
 	try {
 		reaction.f |= REACTION_IS_UPDATING;
-		var result = /** @type {Function} */ (0, reaction.fn)();
+		var fn = /** @type {Function} */ (reaction.fn);
+		var result = fn();
 		var deps = reaction.deps;
 
 		if (new_deps !== null) {

packages/svelte/src/internal/server/payload.js

@@ -6,7 +6,12 @@ export class HeadPayload {
 	uid = () => '';
 	title = '';
 
-	constructor(css = new Set(), /** @type {string[]} */ out = [], title = '', uid = () => '') {
+	constructor(
+		/** @type {Set<{ hash: string; code: string }>} */ css = new Set(),
+		/** @type {string[]} */ out = [],
+		title = '',
+		uid = () => ''
+	) {
 		this.css = css;
 		this.out = out;
 		this.title = title;

packages/svelte/src/internal/shared/validate.js

@@ -35,7 +35,7 @@ export function validate_store(store, name) {
 }
 
 /**
- * @template {() => unknown} T
+ * @template {(...args: any[]) => unknown} T
  * @param {T} fn
  */
 export function prevent_snippet_stringification(fn) {

packages/svelte/src/utils.js

@@ -452,7 +452,7 @@ const RUNES = /** @type {const} */ ([
 	'$host'
 ]);
 
-/** @typedef {RUNES[number]} RuneName */
+/** @typedef {typeof RUNES[number]} RuneName */
 
 /**
  * @param {string} name
@@ -462,7 +462,7 @@ export function is_rune(name) {
 	return RUNES.includes(/** @type {RuneName} */ (name));
 }
 
-/** @typedef {STATE_CREATION_RUNES[number]} StateCreationRuneName */
+/** @typedef {typeof STATE_CREATION_RUNES[number]} StateCreationRuneName */
 
 /**
  * @param {string} name
@@ -477,7 +477,7 @@ const RAW_TEXT_ELEMENTS = /** @type {const} */ (['textarea', 'script', 'style',
 
 /** @param {string} name */
 export function is_raw_text_element(name) {
-	return RAW_TEXT_ELEMENTS.includes(/** @type {RAW_TEXT_ELEMENTS[number]} */ (name));
+	return RAW_TEXT_ELEMENTS.includes(/** @type {typeof RAW_TEXT_ELEMENTS[number]} */ (name));
 }
 
 /**

packages/svelte/tests/animation-helpers.js

@@ -3,7 +3,9 @@ import { raf as svelte_raf } from 'svelte/internal/client';
 import { queue_micro_task } from '../src/internal/client/dom/task.js';
 
 export const raf = {
+	/** @type {Set<Animation>} */
 	animations: new Set(),
+	/** @type {Set<(n: number) => void>} */
 	ticks: new Set(),
 	tick,
 	time: 0,
@@ -54,14 +56,24 @@ class Animation {
 
 	/**
 	 * @param {HTMLElement} target
-	 * @param {Keyframe[]} keyframes
-	 * @param {{ duration: number, delay: number }} options
+	 * @param {Keyframe[] | PropertyIndexedKeyframes | null} keyframes
+	 * @param {number | KeyframeAnimationOptions | undefined} options
 	 */
-	constructor(target, keyframes, { duration, delay }) {
+	constructor(target, keyframes, options) {
 		this.target = target;
-		this.#keyframes = keyframes;
-		this.#duration = Math.round(duration);
-		this.#delay = delay ?? 0;
+		this.#keyframes = Array.isArray(keyframes) ? keyframes : [];
+		if (typeof options === 'number') {
+			this.#duration = options;
+			this.#delay = 0;
+		} else {
+			const { duration = 0, delay = 0 } = options ?? {};
+			if (typeof duration === 'object') {
+				this.#duration = 0;
+			} else {
+				this.#duration = Math.round(+duration);
+			}
+			this.#delay = delay;
+		}
 
 		this._update();
 	}
@@ -189,6 +201,7 @@ function interpolate(a, b, p) {
  * @param {{duration: number, delay: number}} options
  * @returns {globalThis.Animation}
  */
+// @ts-ignore
 HTMLElement.prototype.animate = function (keyframes, options) {
 	const animation = new Animation(this, keyframes, options);
 	raf.animations.add(animation);
@@ -196,6 +209,7 @@ HTMLElement.prototype.animate = function (keyframes, options) {
 	return animation;
 };
 
+// @ts-ignore
 HTMLElement.prototype.getAnimations = function () {
 	return Array.from(raf.animations).filter((animation) => animation.target === this);
 };

packages/svelte/tests/helpers.js

@@ -43,6 +43,7 @@ export function create_deferred() {
 	/** @param {any} [reason] */
 	let reject = (reason) => {};
 
+	/** @type {Promise<any>} */
 	const promise = new Promise((f, r) => {
 		resolve = f;
 		reject = r;

packages/svelte/tests/runtime-browser/assert.js

@@ -87,15 +87,17 @@ function normalize_html(window, html) {
 /** @param {any} node */
 function normalize_children(node) {
 	// sort attributes
-	const attributes = Array.from(node.attributes).sort((a, b) => {
-		return a.name < b.name ? -1 : 1;
-	});
+	const attributes = Array.from(node.attributes).sort(
+		(/** @type {any} */ a, /** @type {any} */ b) => {
+			return a.name < b.name ? -1 : 1;
+		}
+	);
 
-	attributes.forEach((attr) => {
+	attributes.forEach((/** @type{any} */ attr) => {
 		node.removeAttribute(attr.name);
 	});
 
-	attributes.forEach((attr) => {
+	attributes.forEach((/** @type{any} */ attr) => {
 		node.setAttribute(attr.name, attr.value);
 	});