svelte-on-rails 0.0.30 → 0.0.31

data/lib/svelte_on_rails/node_modules/svelte/src/compiler/migrate/index.js

@@ -1,1992 +0,0 @@
-/** @import { VariableDeclarator, Node, Identifier, AssignmentExpression, LabeledStatement, ExpressionStatement } from 'estree' */
-/** @import { Visitors } from 'zimmerframe' */
-/** @import { ComponentAnalysis } from '../phases/types.js' */
-/** @import { Scope, ScopeRoot } from '../phases/scope.js' */
-/** @import { AST, Binding, ValidatedCompileOptions } from '#compiler' */
-import MagicString from 'magic-string';
-import { walk } from 'zimmerframe';
-import { parse } from '../phases/1-parse/index.js';
-import { regex_valid_component_name } from '../phases/1-parse/state/element.js';
-import { analyze_component } from '../phases/2-analyze/index.js';
-import { get_rune } from '../phases/scope.js';
-import { reset, reset_warning_filter } from '../state.js';
-import {
-	extract_identifiers,
-	extract_all_identifiers_from_expression,
-	is_text_attribute
-} from '../utils/ast.js';
-import { migrate_svelte_ignore } from '../utils/extract_svelte_ignore.js';
-import { validate_component_options } from '../validate-options.js';
-import { is_reserved, is_svg, is_void } from '../../utils.js';
-import { regex_is_valid_identifier } from '../phases/patterns.js';
-
-const regex_style_tags = /(<style[^>]+>)([\S\s]*?)(<\/style>)/g;
-const style_placeholder = '/*$$__STYLE_CONTENT__$$*/';
-
-let has_migration_task = false;
-
-class MigrationError extends Error {
-	/**
-	 * @param {string} msg
-	 */
-	constructor(msg) {
-		super(msg);
-	}
-}
-
-/**
- *
- * @param {State} state
- */
-function migrate_css(state) {
-	if (!state.analysis.css.ast?.start) return;
-	const css_contents = state.str
-		.snip(state.analysis.css.ast.start, /** @type {number} */ (state.analysis.css.ast?.end))
-		.toString();
-	let code = css_contents;
-	let starting = 0;
-
-	// since we already blank css we can't work directly on `state.str` so we will create a copy that we can update
-	const str = new MagicString(code);
-	while (code) {
-		if (
-			code.startsWith(':has') ||
-			code.startsWith(':is') ||
-			code.startsWith(':where') ||
-			code.startsWith(':not')
-		) {
-			let start = code.indexOf('(') + 1;
-			let is_global = false;
-
-			const global_str = ':global';
-			const next_global = code.indexOf(global_str);
-			const str_between = code.substring(start, next_global);
-			if (!str_between.trim()) {
-				is_global = true;
-				start += global_str.length;
-			} else {
-				const prev_global = css_contents.lastIndexOf(global_str, starting);
-				if (prev_global > -1) {
-					const end =
-						find_closing_parenthesis(css_contents.indexOf('(', prev_global) + 1, css_contents) -
-						starting;
-					if (end > start) {
-						starting += end;
-						code = code.substring(end);
-						continue;
-					}
-				}
-			}
-
-			const end = find_closing_parenthesis(start, code);
-			if (start && end) {
-				if (!is_global && !code.startsWith(':not')) {
-					str.prependLeft(starting + start, ':global(');
-					str.appendRight(starting + end - 1, ')');
-				}
-				starting += end - 1;
-				code = code.substring(end - 1);
-				continue;
-			}
-		}
-		starting++;
-		code = code.substring(1);
-	}
-	state.str.update(state.analysis.css.ast?.start, state.analysis.css.ast?.end, str.toString());
-}
-
-/**
- * @param {number} start
- * @param {string} code
- */
-function find_closing_parenthesis(start, code) {
-	let parenthesis = 1;
-	let end = start;
-	let char = code[end];
-	// find the closing parenthesis
-	while (parenthesis !== 0 && char) {
-		if (char === '(') parenthesis++;
-		if (char === ')') parenthesis--;
-		end++;
-		char = code[end];
-	}
-	return end;
-}
-
-/**
- * Does a best-effort migration of Svelte code towards using runes, event attributes and render tags.
- * May throw an error if the code is too complex to migrate automatically.
- *
- * @param {string} source
- * @param {{ filename?: string, use_ts?: boolean }} [options]
- * @returns {{ code: string; }}
- */
-export function migrate(source, { filename, use_ts } = {}) {
-	let og_source = source;
-	try {
-		has_migration_task = false;
-		// Blank CSS, could contain SCSS or similar that needs a preprocessor.
-		// Since we don't care about CSS in this migration, we'll just ignore it.
-		/** @type {Array<[number, string]>} */
-		const style_contents = [];
-		source = source.replace(regex_style_tags, (_, start, content, end, idx) => {
-			style_contents.push([idx + start.length, content]);
-			return start + style_placeholder + end;
-		});
-
-		reset_warning_filter(() => false);
-		reset(source, { filename: filename ?? '(unknown)' });
-
-		let parsed = parse(source);
-
-		const { customElement: customElementOptions, ...parsed_options } = parsed.options || {};
-
-		/** @type {ValidatedCompileOptions} */
-		const combined_options = {
-			...validate_component_options({}, ''),
-			...parsed_options,
-			customElementOptions,
-			filename: filename ?? '(unknown)'
-		};
-
-		const str = new MagicString(source);
-		const analysis = analyze_component(parsed, source, combined_options);
-		const indent = guess_indent(source);
-
-		str.replaceAll(/(<svelte:options\s.*?\s?)accessors\s?/g, (_, $1) => $1);
-
-		for (const content of style_contents) {
-			str.overwrite(content[0], content[0] + style_placeholder.length, content[1]);
-		}
-
-		/** @type {State} */
-		let state = {
-			scope: analysis.instance.scope,
-			analysis,
-			filename,
-			str,
-			indent,
-			props: [],
-			props_insertion_point: parsed.instance?.content.start ?? 0,
-			has_props_rune: false,
-			has_type_or_fallback: false,
-			end: source.length,
-			names: {
-				props: analysis.root.unique('props').name,
-				rest: analysis.root.unique('rest').name,
-
-				// event stuff
-				run: analysis.root.unique('run').name,
-				handlers: analysis.root.unique('handlers').name,
-				stopImmediatePropagation: analysis.root.unique('stopImmediatePropagation').name,
-				preventDefault: analysis.root.unique('preventDefault').name,
-				stopPropagation: analysis.root.unique('stopPropagation').name,
-				once: analysis.root.unique('once').name,
-				self: analysis.root.unique('self').name,
-				trusted: analysis.root.unique('trusted').name,
-				createBubbler: analysis.root.unique('createBubbler').name,
-				bubble: analysis.root.unique('bubble').name,
-				passive: analysis.root.unique('passive').name,
-				nonpassive: analysis.root.unique('nonpassive').name
-			},
-			legacy_imports: new Set(),
-			script_insertions: new Set(),
-			derived_components: new Map(),
-			derived_conflicting_slots: new Map(),
-			derived_labeled_statements: new Set(),
-			has_svelte_self: false,
-			uses_ts:
-				// Some people could use jsdoc but have a tsconfig.json, so double-check file for jsdoc indicators
-				(use_ts && !source.includes('@type {')) ||
-				!!parsed.instance?.attributes.some(
-					(attr) => attr.name === 'lang' && /** @type {any} */ (attr).value[0].data === 'ts'
-				)
-		};
-
-		if (parsed.module) {
-			const context = parsed.module.attributes.find((attr) => attr.name === 'context');
-			if (context) {
-				state.str.update(context.start, context.end, 'module');
-			}
-		}
-
-		if (parsed.instance) {
-			walk(parsed.instance.content, state, instance_script);
-		}
-
-		state = { ...state, scope: analysis.template.scope };
-		walk(parsed.fragment, state, template);
-
-		let insertion_point = parsed.instance
-			? /** @type {number} */ (parsed.instance.content.start)
-			: 0;
-
-		const need_script =
-			state.legacy_imports.size > 0 ||
-			state.derived_components.size > 0 ||
-			state.derived_conflicting_slots.size > 0 ||
-			state.script_insertions.size > 0 ||
-			state.props.length > 0 ||
-			analysis.uses_rest_props ||
-			analysis.uses_props ||
-			state.has_svelte_self;
-
-		const need_ts_tag =
-			state.uses_ts &&
-			(!parsed.instance || !parsed.instance.attributes.some((attr) => attr.name === 'lang'));
-
-		if (!parsed.instance && need_script) {
-			str.appendRight(0, need_ts_tag ? '<script lang="ts">' : '<script>');
-		}
-
-		if (state.has_svelte_self && filename) {
-			const file = filename.split('/').pop();
-			str.appendRight(
-				insertion_point,
-				`\n${indent}import ${state.analysis.name} from './${file}';`
-			);
-		}
-
-		const specifiers = [...state.legacy_imports].map((imported) => {
-			const local = state.names[imported];
-			return imported === local ? imported : `${imported} as ${local}`;
-		});
-
-		const legacy_import = `import { ${specifiers.join(', ')} } from 'svelte/legacy';\n`;
-
-		if (state.legacy_imports.size > 0) {
-			str.appendRight(insertion_point, `\n${indent}${legacy_import}`);
-		}
-
-		if (state.script_insertions.size > 0) {
-			str.appendRight(
-				insertion_point,
-				`\n${indent}${[...state.script_insertions].join(`\n${indent}`)}`
-			);
-		}
-
-		insertion_point = state.props_insertion_point;
-
-		/**
-		 * @param {"derived"|"props"|"bindable"} rune
-		 */
-		function check_rune_binding(rune) {
-			const has_rune_binding = !!state.scope.get(rune);
-			if (has_rune_binding) {
-				throw new MigrationError(
-					`migrating this component would require adding a \`$${rune}\` rune but there's already a variable named ${rune}.\n     Rename the variable and try again or migrate by hand.`
-				);
-			}
-		}
-
-		if (state.props.length > 0 || analysis.uses_rest_props || analysis.uses_props) {
-			const has_many_props = state.props.length > 3;
-			const newline_separator = `\n${indent}${indent}`;
-			const props_separator = has_many_props ? newline_separator : ' ';
-			let props = '';
-			if (analysis.uses_props) {
-				props = `...${state.names.props}`;
-			} else {
-				props = state.props
-					.filter((prop) => !prop.type_only)
-					.map((prop) => {
-						let prop_str =
-							prop.local === prop.exported ? prop.local : `${prop.exported}: ${prop.local}`;
-						if (prop.bindable) {
-							check_rune_binding('bindable');
-							prop_str += ` = $bindable(${prop.init})`;
-						} else if (prop.init) {
-							prop_str += ` = ${prop.init}`;
-						}
-						return prop_str;
-					})
-					.join(`,${props_separator}`);
-
-				if (analysis.uses_rest_props) {
-					props += `${state.props.length > 0 ? `,${props_separator}` : ''}...${state.names.rest}`;
-				}
-			}
-
-			if (state.has_props_rune) {
-				// some render tags or forwarded event attributes to add
-				str.appendRight(insertion_point, ` ${props},`);
-			} else {
-				const type_name = state.scope.root.unique('Props').name;
-				let type = '';
-
-				// Try to infer when we don't want to add types (e.g. user doesn't use types, or this is a zero-types +page.svelte)
-				if (state.has_type_or_fallback || state.props.every((prop) => prop.slot_name)) {
-					if (state.uses_ts) {
-						type = `interface ${type_name} {${newline_separator}${state.props
-							.map((prop) => {
-								const comment = prop.comment ? `${prop.comment}${newline_separator}` : '';
-								return `${comment}${prop.exported}${prop.optional ? '?' : ''}: ${prop.type};${prop.trailing_comment ? ' ' + prop.trailing_comment : ''}`;
-							})
-							.join(newline_separator)}`;
-						if (analysis.uses_props || analysis.uses_rest_props) {
-							type += `${state.props.length > 0 ? newline_separator : ''}[key: string]: any`;
-						}
-						type += `\n${indent}}`;
-					} else {
-						type = `/**\n${indent} * @typedef {Object} ${type_name}${state.props
-							.map((prop) => {
-								return `\n${indent} * @property {${prop.type}} ${prop.optional ? `[${prop.exported}]` : prop.exported}${prop.comment ? ` - ${prop.comment}` : ''}${prop.trailing_comment ? ` - ${prop.trailing_comment.trim()}` : ''}`;
-							})
-							.join(``)}\n${indent} */`;
-					}
-				}
-
-				let props_declaration = `let {${props_separator}${props}${has_many_props ? `\n${indent}` : ' '}}`;
-				if (state.uses_ts) {
-					if (type) {
-						props_declaration = `${type}\n\n${indent}${props_declaration}`;
-					}
-					check_rune_binding('props');
-					props_declaration = `${props_declaration}${type ? `: ${type_name}` : ''} = $props();`;
-				} else {
-					if (type) {
-						props_declaration = `${state.props.length > 0 ? `${type}\n\n${indent}` : ''}/** @type {${state.props.length > 0 ? type_name : ''}${analysis.uses_props || analysis.uses_rest_props ? `${state.props.length > 0 ? ' & ' : ''}{ [key: string]: any }` : ''}} */\n${indent}${props_declaration}`;
-					}
-					check_rune_binding('props');
-					props_declaration = `${props_declaration} = $props();`;
-				}
-
-				props_declaration = `\n${indent}${props_declaration}`;
-				str.appendRight(insertion_point, props_declaration);
-			}
-
-			if (parsed.instance && need_ts_tag) {
-				str.appendRight(parsed.instance.start + '<script'.length, ' lang="ts"');
-			}
-		}
-
-		/**
-		 * If true, then we need to move all reactive statements to the end of the script block,
-		 * in their correct order. Svelte 4 reordered reactive statements, $derived/$effect.pre
-		 * don't have this behavior.
-		 */
-		let needs_reordering = false;
-
-		for (const [node, { dependencies }] of state.analysis.reactive_statements) {
-			/** @type {Binding[]} */
-			let ids = [];
-			if (
-				node.body.type === 'ExpressionStatement' &&
-				node.body.expression.type === 'AssignmentExpression'
-			) {
-				ids = extract_identifiers(node.body.expression.left)
-					.map((id) => state.scope.get(id.name))
-					.filter((id) => !!id);
-			}
-
-			if (
-				dependencies.some(
-					(dep) =>
-						!ids.includes(dep) &&
-						(dep.kind === 'prop' || dep.kind === 'bindable_prop'
-							? state.props_insertion_point
-							: /** @type {number} */ (dep.node.start)) > /** @type {number} */ (node.start)
-				)
-			) {
-				needs_reordering = true;
-				break;
-			}
-		}
-
-		if (needs_reordering) {
-			const nodes = Array.from(state.analysis.reactive_statements.keys());
-			for (const node of nodes) {
-				const { start, end } = get_node_range(source, node);
-				str.appendLeft(end, '\n');
-				str.move(start, end, /** @type {number} */ (parsed.instance?.content.end));
-				str.update(start - (source[start - 2] === '\r' ? 2 : 1), start, '');
-			}
-		}
-
-		insertion_point = parsed.instance
-			? /** @type {number} */ (parsed.instance.content.end)
-			: insertion_point;
-
-		if (state.derived_components.size > 0) {
-			check_rune_binding('derived');
-			str.appendRight(
-				insertion_point,
-				`\n${indent}${[...state.derived_components.entries()].map(([init, name]) => `const ${name} = $derived(${init});`).join(`\n${indent}`)}\n`
-			);
-		}
-
-		if (state.derived_conflicting_slots.size > 0) {
-			check_rune_binding('derived');
-			str.appendRight(
-				insertion_point,
-				`\n${indent}${[...state.derived_conflicting_slots.entries()].map(([name, init]) => `const ${name} = $derived(${init});`).join(`\n${indent}`)}\n`
-			);
-		}
-
-		if (state.props.length > 0 && state.analysis.accessors) {
-			str.appendRight(
-				insertion_point,
-				`\n${indent}export {${state.props.reduce((acc, prop) => (prop.slot_name || prop.type_only ? acc : `${acc}\n${indent}\t${prop.local},`), '')}\n${indent}}\n`
-			);
-		}
-
-		if (!parsed.instance && need_script) {
-			str.appendRight(insertion_point, '\n</script>\n\n');
-		}
-		migrate_css(state);
-		return {
-			code: str.toString()
-		};
-	} catch (e) {
-		if (!(e instanceof MigrationError)) {
-			// eslint-disable-next-line no-console
-			console.error('Error while migrating Svelte code', e);
-		}
-		has_migration_task = true;
-		return {
-			code: `<!-- @migration-task Error while migrating Svelte code: ${/** @type {any} */ (e).message} -->\n${og_source}`
-		};
-	} finally {
-		if (has_migration_task) {
-			// eslint-disable-next-line no-console
-			console.log(
-				`One or more \`@migration-task\` comments were added to ${filename ? `\`${filename}\`` : "a file (unfortunately we don't know the name)"}, please check them and complete the migration manually.`
-			);
-		}
-	}
-}
-
-/**
- * @typedef {{
- *  scope: Scope;
- *  str: MagicString;
- *  analysis: ComponentAnalysis;
- *  filename?: string;
- *  indent: string;
- *  props: Array<{ local: string; exported: string; init: string; bindable: boolean; slot_name?: string; optional: boolean; type: string; comment?: string; trailing_comment?: string; type_only?: boolean; needs_refine_type?: boolean; }>;
- *  props_insertion_point: number;
- *  has_props_rune: boolean;
- *  has_type_or_fallback: boolean;
- *  end: number;
- * 	names: Record<string, string>;
- * 	legacy_imports: Set<string>;
- * 	script_insertions: Set<string>;
- *  derived_components: Map<string, string>;
- *  derived_conflicting_slots: Map<string, string>;
- * 	derived_labeled_statements: Set<LabeledStatement>;
- *  has_svelte_self: boolean;
- *  uses_ts: boolean;
- * }} State
- */
-
-/** @type {Visitors<AST.SvelteNode, State>} */
-const instance_script = {
-	_(node, { state, next }) {
-		// @ts-expect-error
-		const comments = node.leadingComments;
-		if (comments) {
-			for (const comment of comments) {
-				if (comment.type === 'Line') {
-					const migrated = migrate_svelte_ignore(comment.value);
-					if (migrated !== comment.value) {
-						state.str.overwrite(comment.start + '//'.length, comment.end, migrated);
-					}
-				}
-			}
-		}
-		next();
-	},
-	Identifier(node, { state, path }) {
-		handle_identifier(node, state, path);
-	},
-	ImportDeclaration(node, { state }) {
-		state.props_insertion_point = node.end ?? state.props_insertion_point;
-		if (node.source.value === 'svelte') {
-			let illegal_specifiers = [];
-			let removed_specifiers = 0;
-			for (let specifier of node.specifiers) {
-				if (
-					specifier.type === 'ImportSpecifier' &&
-					specifier.imported.type === 'Identifier' &&
-					['beforeUpdate', 'afterUpdate'].includes(specifier.imported.name)
-				) {
-					const references = state.scope.references.get(specifier.local.name);
-					if (!references) {
-						let end = /** @type {number} */ (
-							state.str.original.indexOf(',', specifier.end) !== -1 &&
-							state.str.original.indexOf(',', specifier.end) <
-								state.str.original.indexOf('}', specifier.end)
-								? state.str.original.indexOf(',', specifier.end) + 1
-								: specifier.end
-						);
-						while (state.str.original[end].trim() === '') end++;
-						state.str.remove(/** @type {number} */ (specifier.start), end);
-						removed_specifiers++;
-						continue;
-					}
-					illegal_specifiers.push(specifier.imported.name);
-				}
-			}
-			if (removed_specifiers === node.specifiers.length) {
-				state.str.remove(/** @type {number} */ (node.start), /** @type {number} */ (node.end));
-			}
-			if (illegal_specifiers.length > 0) {
-				throw new MigrationError(
-					`Can't migrate code with ${illegal_specifiers.join(' and ')}. Please migrate by hand.`
-				);
-			}
-		}
-	},
-	ExportNamedDeclaration(node, { state, next }) {
-		if (node.declaration) {
-			next();
-			return;
-		}
-
-		let count_removed = 0;
-		for (const specifier of node.specifiers) {
-			if (specifier.local.type !== 'Identifier') continue;
-
-			const binding = state.scope.get(specifier.local.name);
-			if (binding?.kind === 'bindable_prop') {
-				state.str.remove(
-					/** @type {number} */ (specifier.start),
-					/** @type {number} */ (specifier.end)
-				);
-				count_removed++;
-			}
-		}
-		if (count_removed === node.specifiers.length) {
-			state.str.remove(/** @type {number} */ (node.start), /** @type {number} */ (node.end));
-		}
-	},
-	VariableDeclaration(node, { state, path, visit, next }) {
-		if (state.scope !== state.analysis.instance.scope) {
-			return;
-		}
-
-		let nr_of_props = 0;
-
-		for (let i = 0; i < node.declarations.length; i++) {
-			const declarator = node.declarations[i];
-			if (state.analysis.runes) {
-				if (get_rune(declarator.init, state.scope) === '$props') {
-					state.props_insertion_point = /** @type {number} */ (declarator.id.start) + 1;
-					state.has_props_rune = true;
-				}
-				continue;
-			}
-
-			let bindings;
-			try {
-				bindings = state.scope.get_bindings(declarator);
-			} catch (e) {
-				// no bindings, so we can skip this
-				next();
-				continue;
-			}
-			const has_state = bindings.some((binding) => binding.kind === 'state');
-			const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
-
-			if (!has_state && !has_props) {
-				next();
-				continue;
-			}
-
-			if (has_props) {
-				nr_of_props++;
-
-				if (declarator.id.type !== 'Identifier') {
-					// TODO invest time in this?
-					throw new MigrationError(
-						'Encountered an export declaration pattern that is not supported for automigration.'
-					);
-					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					// const tmp = state.scope.generate('tmp');
-					// const paths = extract_paths(declarator.id);
-					// state.props_pre.push(
-					// 	b.declaration('const', b.id(tmp), visit(declarator.init!) as Expression)
-					// );
-					// for (const path of paths) {
-					// 	const name = (path.node as Identifier).name;
-					// 	const binding = state.scope.get(name)!;
-					// 	const value = path.expression!(b.id(tmp));
-					// 	if (binding.kind === 'bindable_prop' || binding.kind === 'rest_prop') {
-					// 		state.props.push({
-					// 			local: name,
-					// 			exported: binding.prop_alias ? binding.prop_alias : name,
-					// 			init: value
-					// 		});
-					// 		state.props_insertion_point = /** @type {number} */(declarator.end);
-					// 	} else {
-					// 		declarations.push(b.declarator(path.node, value));
-					// 	}
-					// }
-				}
-
-				const name = declarator.id.name;
-				const binding = /** @type {Binding} */ (state.scope.get(name));
-
-				if (state.analysis.uses_props && (declarator.init || binding.updated)) {
-					throw new MigrationError(
-						'$$props is used together with named props in a way that cannot be automatically migrated.'
-					);
-				}
-
-				const prop = state.props.find((prop) => prop.exported === (binding.prop_alias || name));
-				if (prop) {
-					next();
-					// $$Props type was used
-					prop.init = declarator.init
-						? state.str
-								.snip(
-									/** @type {number} */ (declarator.init.start),
-									/** @type {number} */ (declarator.init.end)
-								)
-								.toString()
-						: '';
-					prop.bindable = binding.updated;
-					prop.exported = binding.prop_alias || name;
-					prop.type_only = false;
-				} else {
-					next();
-					state.props.push({
-						local: name,
-						exported: binding.prop_alias ? binding.prop_alias : name,
-						init: declarator.init
-							? state.str
-									.snip(
-										/** @type {number} */ (declarator.init.start),
-										/** @type {number} */ (declarator.init.end)
-									)
-									.toString()
-							: '',
-						optional: !!declarator.init,
-						bindable: binding.updated,
-						...extract_type_and_comment(declarator, state, path)
-					});
-				}
-
-				let start = /** @type {number} */ (declarator.start);
-				let end = /** @type {number} */ (declarator.end);
-
-				// handle cases like let a,b,c; where only some are exported
-				if (node.declarations.length > 1) {
-					// move the insertion point after the node itself;
-					state.props_insertion_point = /** @type {number} */ (node.end);
-					// if it's not the first declaration remove from the , of the previous declaration
-					if (i !== 0) {
-						start = state.str.original.indexOf(
-							',',
-							/** @type {number} */ (node.declarations[i - 1].end)
-						);
-					}
-					// if it's not the last declaration remove either from up until the
-					// start of the next declaration (if it's the first declaration) or
-					// up until the last index of , from the next declaration
-					if (i !== node.declarations.length - 1) {
-						if (i === 0) {
-							end = /** @type {number} */ (node.declarations[i + 1].start);
-						} else {
-							end = state.str.original.lastIndexOf(
-								',',
-								/** @type {number} */ (node.declarations[i + 1].start)
-							);
-						}
-					}
-				} else {
-					state.props_insertion_point = /** @type {number} */ (declarator.end);
-				}
-
-				state.str.update(start, end, '');
-
-				continue;
-			}
-
-			/**
-			 * @param {"state"|"derived"} rune
-			 */
-			function check_rune_binding(rune) {
-				const has_rune_binding = !!state.scope.get(rune);
-				if (has_rune_binding) {
-					throw new MigrationError(
-						`can't migrate \`${state.str.original.substring(/** @type {number} */ (node.start), node.end)}\` to \`$${rune}\` because there's a variable named ${rune}.\n     Rename the variable and try again or migrate by hand.`
-					);
-				}
-			}
-
-			// state
-			if (declarator.init) {
-				let { start, end } = /** @type {{ start: number, end: number }} */ (declarator.init);
-
-				if (declarator.init.type === 'SequenceExpression') {
-					while (state.str.original[start] !== '(') start -= 1;
-					while (state.str.original[end - 1] !== ')') end += 1;
-				}
-
-				check_rune_binding('state');
-
-				state.str.prependLeft(start, '$state(');
-				state.str.appendRight(end, ')');
-			} else {
-				/**
-				 * @type {AssignmentExpression | undefined}
-				 */
-				let assignment_in_labeled;
-				/**
-				 * @type {LabeledStatement | undefined}
-				 */
-				let labeled_statement;
-
-				// Analyze declaration bindings to see if they're exclusively updated within a single reactive statement
-				const possible_derived = bindings.every((binding) =>
-					binding.references.every((reference) => {
-						const declaration = reference.path.find((el) => el.type === 'VariableDeclaration');
-						const assignment = reference.path.find((el) => el.type === 'AssignmentExpression');
-						const update = reference.path.find((el) => el.type === 'UpdateExpression');
-						const labeled = /** @type {LabeledStatement | undefined} */ (
-							reference.path.find((el) => el.type === 'LabeledStatement' && el.label.name === '$')
-						);
-
-						if (
-							assignment &&
-							labeled &&
-							// ensure that $: foo = bar * 2 is not counted as a reassignment of bar
-							(labeled.body.type !== 'ExpressionStatement' ||
-								labeled.body.expression !== assignment ||
-								(assignment.left.type === 'Identifier' &&
-									assignment.left.name === binding.node.name))
-						) {
-							if (assignment_in_labeled) return false;
-							assignment_in_labeled = /** @type {AssignmentExpression} */ (assignment);
-							labeled_statement = labeled;
-						}
-
-						return (
-							!update &&
-							((declaration && binding.initial) ||
-								(labeled && assignment) ||
-								(!labeled && !assignment))
-						);
-					})
-				);
-
-				const labeled_has_single_assignment =
-					labeled_statement?.body.type === 'BlockStatement' &&
-					labeled_statement.body.body.length === 1 &&
-					labeled_statement.body.body[0].type === 'ExpressionStatement';
-
-				const is_expression_assignment =
-					labeled_statement?.body.type === 'ExpressionStatement' &&
-					labeled_statement.body.expression.type === 'AssignmentExpression';
-
-				let should_be_state = false;
-
-				if (is_expression_assignment) {
-					const body = /**@type {ExpressionStatement}*/ (labeled_statement?.body);
-					const expression = /**@type {AssignmentExpression}*/ (body.expression);
-					const [, ids] = extract_all_identifiers_from_expression(expression.right);
-					if (ids.length === 0) {
-						should_be_state = true;
-						state.derived_labeled_statements.add(
-							/** @type {LabeledStatement} */ (labeled_statement)
-						);
-					}
-				}
-
-				if (
-					!should_be_state &&
-					possible_derived &&
-					assignment_in_labeled &&
-					labeled_statement &&
-					(labeled_has_single_assignment || is_expression_assignment)
-				) {
-					const indent = state.str.original.substring(
-						state.str.original.lastIndexOf('\n', /** @type {number} */ (node.start)) + 1,
-						/** @type {number} */ (node.start)
-					);
-					// transfer all the leading comments
-					if (
-						labeled_statement.body.type === 'BlockStatement' &&
-						labeled_statement.body.body[0].leadingComments
-					) {
-						for (let comment of labeled_statement.body.body[0].leadingComments) {
-							state.str.prependLeft(
-								/** @type {number} */ (node.start),
-								comment.type === 'Block'
-									? `/*${comment.value}*/\n${indent}`
-									: `// ${comment.value}\n${indent}`
-							);
-						}
-					}
-
-					check_rune_binding('derived');
-
-					// Someone wrote a `$: { ... }` statement which we can turn into a `$derived`
-					state.str.appendRight(
-						/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
-						' = $derived('
-					);
-					visit(assignment_in_labeled.right);
-					state.str.appendRight(
-						/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
-						state.str
-							.snip(
-								/** @type {number} */ (assignment_in_labeled.right.start),
-								/** @type {number} */ (assignment_in_labeled.right.end)
-							)
-							.toString()
-					);
-					state.str.remove(
-						/** @type {number} */ (labeled_statement.start),
-						/** @type {number} */ (labeled_statement.end)
-					);
-					state.str.appendRight(
-						/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
-						')'
-					);
-					state.derived_labeled_statements.add(labeled_statement);
-
-					// transfer all the trailing comments
-					if (
-						labeled_statement.body.type === 'BlockStatement' &&
-						labeled_statement.body.body[0].trailingComments
-					) {
-						for (let comment of labeled_statement.body.body[0].trailingComments) {
-							state.str.appendRight(
-								/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
-								comment.type === 'Block'
-									? `\n${indent}/*${comment.value}*/`
-									: `\n${indent}// ${comment.value}`
-							);
-						}
-					}
-				} else {
-					check_rune_binding('state');
-
-					state.str.prependLeft(
-						/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
-						' = $state('
-					);
-					if (should_be_state) {
-						// someone wrote a `$: foo = ...` statement which we can turn into `let foo = $state(...)`
-						state.str.appendRight(
-							/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
-							state.str
-								.snip(
-									/** @type {number} */ (
-										/** @type {AssignmentExpression} */ (assignment_in_labeled).right.start
-									),
-									/** @type {number} */ (
-										/** @type {AssignmentExpression} */ (assignment_in_labeled).right.end
-									)
-								)
-								.toString()
-						);
-						state.str.remove(
-							/** @type {number} */ (/** @type {LabeledStatement} */ (labeled_statement).start),
-							/** @type {number} */ (/** @type {LabeledStatement} */ (labeled_statement).end)
-						);
-					}
-					state.str.appendRight(
-						/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
-						')'
-					);
-				}
-			}
-		}
-
-		if (nr_of_props === node.declarations.length) {
-			let start = /** @type {number} */ (node.start);
-			let end = /** @type {number} */ (node.end);
-
-			const parent = path.at(-1);
-			if (parent?.type === 'ExportNamedDeclaration') {
-				start = /** @type {number} */ (parent.start);
-				end = /** @type {number} */ (parent.end);
-			}
-			while (state.str.original[start] !== '\n') start--;
-			while (state.str.original[end] !== '\n') end++;
-			state.str.update(start, end, '');
-		}
-	},
-	BreakStatement(node, { state, path }) {
-		if (path[1].type !== 'LabeledStatement') return;
-		if (node.label?.name !== '$') return;
-		state.str.update(
-			/** @type {number} */ (node.start),
-			/** @type {number} */ (node.end),
-			'return;'
-		);
-	},
-	LabeledStatement(node, { path, state, next }) {
-		if (state.analysis.runes) return;
-		if (path.length > 1) return;
-		if (node.label.name !== '$') return;
-		if (state.derived_labeled_statements.has(node)) return;
-
-		next();
-
-		/**
-		 * @param {"state"|"derived"} rune
-		 */
-		function check_rune_binding(rune) {
-			const has_rune_binding = state.scope.get(rune);
-			if (has_rune_binding) {
-				throw new MigrationError(
-					`can't migrate \`$: ${state.str.original.substring(/** @type {number} */ (node.body.start), node.body.end)}\` to \`$${rune}\` because there's a variable named ${rune}.\n     Rename the variable and try again or migrate by hand.`
-				);
-			}
-		}
-
-		if (
-			node.body.type === 'ExpressionStatement' &&
-			node.body.expression.type === 'AssignmentExpression'
-		) {
-			const { left, right } = node.body.expression;
-
-			const ids = extract_identifiers(left);
-			const [, expression_ids] = extract_all_identifiers_from_expression(right);
-			const bindings = ids.map((id) => /** @type {Binding} */ (state.scope.get(id.name)));
-
-			if (bindings.every((b) => b.kind === 'legacy_reactive')) {
-				if (
-					right.type !== 'Literal' &&
-					bindings.every((b) => b.kind !== 'store_sub') &&
-					left.type !== 'MemberExpression'
-				) {
-					let { start, end } = /** @type {{ start: number, end: number }} */ (right);
-
-					check_rune_binding('derived');
-
-					// $derived
-					state.str.update(
-						/** @type {number} */ (node.start),
-						/** @type {number} */ (node.body.expression.start),
-						'let '
-					);
-
-					if (right.type === 'SequenceExpression') {
-						while (state.str.original[start] !== '(') start -= 1;
-						while (state.str.original[end - 1] !== ')') end += 1;
-					}
-
-					state.str.prependRight(start, `$derived(`);
-
-					// in a case like `$: ({ a } = b())`, there's already a trailing parenthesis.
-					// otherwise, we need to add one
-					if (state.str.original[/** @type {number} */ (node.body.start)] !== '(') {
-						state.str.appendLeft(end, `)`);
-					}
-
-					return;
-				}
-
-				for (const binding of bindings) {
-					if (binding.reassigned && (ids.includes(binding.node) || expression_ids.length === 0)) {
-						check_rune_binding('state');
-						const init =
-							binding.kind === 'state'
-								? ' = $state()'
-								: expression_ids.length === 0
-									? ` = $state(${state.str.original.substring(/** @type {number} */ (right.start), right.end)})`
-									: '';
-						// implicitly-declared variable which we need to make explicit
-						state.str.prependLeft(
-							/** @type {number} */ (node.start),
-							`let ${binding.node.name}${init};\n${state.indent}`
-						);
-					}
-				}
-
-				if (expression_ids.length === 0 && bindings.every((b) => b.kind !== 'store_sub')) {
-					state.str.remove(/** @type {number} */ (node.start), /** @type {number} */ (node.end));
-					return;
-				}
-			}
-		}
-
-		state.legacy_imports.add('run');
-		const is_block_stmt = node.body.type === 'BlockStatement';
-		const start_end = /** @type {number} */ (node.body.start);
-		// TODO try to find out if we can use $derived.by instead?
-		if (is_block_stmt) {
-			state.str.update(
-				/** @type {number} */ (node.start),
-				start_end + 1,
-				`${state.names.run}(() => {`
-			);
-			const end = /** @type {number} */ (node.body.end);
-			state.str.update(end - 1, end, '});');
-		} else {
-			state.str.update(
-				/** @type {number} */ (node.start),
-				start_end,
-				`${state.names.run}(() => {\n${state.indent}`
-			);
-			state.str.indent(state.indent, {
-				exclude: [
-					[0, /** @type {number} */ (node.body.start)],
-					[/** @type {number} */ (node.body.end), state.end]
-				]
-			});
-			state.str.appendLeft(/** @type {number} */ (node.end), `\n${state.indent}});`);
-		}
-	}
-};
-
-/**
- *
- * @param {State} state
- * @param {number} start
- * @param {number} end
- */
-function trim_block(state, start, end) {
-	const original = state.str.snip(start, end).toString();
-	const without_parens = original.substring(1, original.length - 1);
-	if (without_parens.trim().length !== without_parens.length) {
-		state.str.update(start + 1, end - 1, without_parens.trim());
-	}
-}
-
-/** @type {Visitors<AST.SvelteNode, State>} */
-const template = {
-	Identifier(node, { state, path }) {
-		handle_identifier(node, state, path);
-	},
-	RegularElement(node, { state, path, next }) {
-		migrate_slot_usage(node, path, state);
-		handle_events(node, state);
-		// Strip off any namespace from the beginning of the node name.
-		const node_name = node.name.replace(/[a-zA-Z-]*:/g, '');
-
-		if (state.analysis.source[node.end - 2] === '/' && !is_void(node_name) && !is_svg(node_name)) {
-			let trimmed_position = node.end - 2;
-			while (state.str.original.charAt(trimmed_position - 1) === ' ') trimmed_position--;
-			state.str.remove(trimmed_position, node.end - 1);
-			state.str.appendRight(node.end, `</${node.name}>`);
-		}
-		next();
-	},
-	SvelteSelf(node, { state, next }) {
-		const source = state.str.original.substring(node.start, node.end);
-		if (!state.filename) {
-			const indent = guess_indent(source);
-			has_migration_task = true;
-			state.str.prependRight(
-				node.start,
-				`<!-- @migration-task: svelte:self is deprecated, import this Svelte file into itself instead -->\n${indent}`
-			);
-			next();
-			return;
-		}
-		// overwrite the open tag
-		state.str.overwrite(
-			node.start + 1,
-			node.start + 1 + 'svelte:self'.length,
-			`${state.analysis.name}`
-		);
-		// if it has a fragment we need to overwrite the closing tag too
-		if (node.fragment.nodes.length > 0) {
-			state.str.overwrite(
-				state.str.original.lastIndexOf('<', node.end) + 2,
-				node.end - 1,
-				`${state.analysis.name}`
-			);
-		} else if (!source.endsWith('/>')) {
-			// special case for case `<svelte:self></svelte:self>` it has no fragment but
-			// we still need to overwrite the end tag
-			state.str.overwrite(
-				node.start + source.lastIndexOf('</', node.end) + 2,
-				node.end - 1,
-				`${state.analysis.name}`
-			);
-		}
-		state.has_svelte_self = true;
-		next();
-	},
-	SvelteElement(node, { state, path, next }) {
-		migrate_slot_usage(node, path, state);
-		if (node.tag.type === 'Literal') {
-			let is_static = true;
-
-			let a = /** @type {number} */ (node.tag.start);
-			let b = /** @type {number} */ (node.tag.end);
-			let quote_mark = state.str.original[a - 1];
-
-			while (state.str.original[--a] !== '=') {
-				if (state.str.original[a] === '{') {
-					is_static = false;
-					break;
-				}
-			}
-
-			if (is_static && state.str.original[b] === quote_mark) {
-				state.str.prependLeft(a + 1, '{');
-				state.str.appendRight(/** @type {number} */ (node.tag.end) + 1, '}');
-			}
-		}
-
-		handle_events(node, state);
-		next();
-	},
-	Component(node, { state, path, next }) {
-		next();
-		migrate_slot_usage(node, path, state);
-	},
-	SvelteComponent(node, { state, next, path }) {
-		next();
-
-		migrate_slot_usage(node, path, state);
-
-		let expression = state.str
-			.snip(
-				/** @type {number} */ (node.expression.start),
-				/** @type {number} */ (node.expression.end)
-			)
-			.toString();
-
-		if (
-			(node.expression.type !== 'Identifier' && node.expression.type !== 'MemberExpression') ||
-			!regex_valid_component_name.test(expression)
-		) {
-			let current_expression = expression;
-			expression = state.scope.generate('SvelteComponent');
-			let needs_derived = true;
-			for (let i = path.length - 1; i >= 0; i--) {
-				const part = path[i];
-				if (
-					part.type === 'EachBlock' ||
-					part.type === 'AwaitBlock' ||
-					part.type === 'IfBlock' ||
-					part.type === 'SnippetBlock' ||
-					part.type === 'Component' ||
-					part.type === 'SvelteComponent'
-				) {
-					let position = node.start;
-					if (i !== path.length - 1) {
-						for (let modifier = 1; modifier < path.length - i; modifier++) {
-							const path_part = path[i + modifier];
-							if ('start' in path_part) {
-								position = /** @type {number} */ (path_part.start);
-								break;
-							}
-						}
-					}
-					const indent = state.str.original.substring(
-						state.str.original.lastIndexOf('\n', position) + 1,
-						position
-					);
-					state.str.appendRight(
-						position,
-						`{@const ${expression} = ${current_expression}}\n${indent}`
-					);
-					needs_derived = false;
-					break;
-				}
-			}
-			if (needs_derived) {
-				if (state.derived_components.has(current_expression)) {
-					expression = /** @type {string} */ (state.derived_components.get(current_expression));
-				} else {
-					state.derived_components.set(current_expression, expression);
-				}
-			}
-		}
-
-		state.str.overwrite(node.start + 1, node.start + node.name.length + 1, expression);
-
-		if (state.str.original.substring(node.end - node.name.length - 1, node.end - 1) === node.name) {
-			state.str.overwrite(node.end - node.name.length - 1, node.end - 1, expression);
-		}
-		let this_pos = state.str.original.lastIndexOf('this', node.expression.start);
-		while (!state.str.original.charAt(this_pos - 1).trim()) this_pos--;
-		const end_pos = state.str.original.indexOf('}', node.expression.end) + 1;
-		state.str.remove(this_pos, end_pos);
-	},
-	SvelteFragment(node, { state, path, next }) {
-		migrate_slot_usage(node, path, state);
-		next();
-	},
-	SvelteWindow(node, { state, next }) {
-		handle_events(node, state);
-		next();
-	},
-	SvelteBody(node, { state, next }) {
-		handle_events(node, state);
-		next();
-	},
-	SvelteDocument(node, { state, next }) {
-		handle_events(node, state);
-		next();
-	},
-	SlotElement(node, { state, path, next, visit }) {
-		migrate_slot_usage(node, path, state);
-
-		if (state.analysis.custom_element) return;
-		let name = 'children';
-		let slot_name = 'default';
-		let slot_props = '{ ';
-		let aliased_slot_name;
-
-		for (const attr of node.attributes) {
-			if (attr.type === 'SpreadAttribute') {
-				slot_props += `...${state.str.original.substring(/** @type {number} */ (attr.expression.start), attr.expression.end)}, `;
-			} else if (attr.type === 'Attribute') {
-				if (attr.name === 'slot') {
-					continue;
-				}
-
-				if (attr.name === 'name') {
-					slot_name = /** @type {any} */ (attr.value)[0].data;
-					// if some of the parents or this node itself har a slot
-					// attribute with the sane name of this slot
-					// we want to create a derived or the migrated snippet
-					// will shadow the slot prop
-					if (
-						path.some(
-							(parent) =>
-								(parent.type === 'RegularElement' ||
-									parent.type === 'SvelteElement' ||
-									parent.type === 'Component' ||
-									parent.type === 'SvelteComponent' ||
-									parent.type === 'SvelteFragment') &&
-								parent.attributes.some(
-									(attribute) =>
-										attribute.type === 'Attribute' &&
-										attribute.name === 'slot' &&
-										is_text_attribute(attribute) &&
-										attribute.value[0].data === slot_name
-								)
-						) ||
-						node.attributes.some(
-							(attribute) =>
-								attribute.type === 'Attribute' &&
-								attribute.name === 'slot' &&
-								is_text_attribute(attribute) &&
-								attribute.value[0].data === slot_name
-						)
-					) {
-						aliased_slot_name = `${slot_name}_render`;
-						state.derived_conflicting_slots.set(aliased_slot_name, slot_name);
-					}
-				} else {
-					const attr_value =
-						attr.value === true || Array.isArray(attr.value) ? attr.value : [attr.value];
-					let value = 'true';
-					if (attr_value !== true) {
-						const first = attr_value[0];
-						const last = attr_value[attr_value.length - 1];
-						for (const attr of attr_value) {
-							visit(attr);
-						}
-						value = state.str
-							.snip(
-								first.type === 'Text'
-									? first.start - 1
-									: /** @type {number} */ (first.expression.start),
-								last.type === 'Text' ? last.end + 1 : /** @type {number} */ (last.expression.end)
-							)
-							.toString();
-					}
-					slot_props += value === attr.name ? `${value}, ` : `${attr.name}: ${value}, `;
-				}
-			}
-		}
-
-		slot_props += '}';
-		if (slot_props === '{ }') {
-			slot_props = '';
-		}
-
-		const existing_prop = state.props.find((prop) => prop.slot_name === slot_name);
-		if (existing_prop) {
-			name = existing_prop.local;
-		} else if (slot_name !== 'default') {
-			name = state.scope.generate(slot_name);
-			if (name !== slot_name) {
-				throw new MigrationError(
-					'This migration would change the name of a slot making the component unusable'
-				);
-			}
-		}
-
-		if (!existing_prop) {
-			state.props.push({
-				local: name,
-				exported: name,
-				init: '',
-				bindable: false,
-				optional: true,
-				slot_name,
-				type: `import('svelte').${slot_props ? 'Snippet<[any]>' : 'Snippet'}`
-			});
-		} else if (existing_prop.needs_refine_type) {
-			existing_prop.type = `import('svelte').${slot_props ? 'Snippet<[any]>' : 'Snippet'}`;
-			existing_prop.needs_refine_type = false;
-		}
-
-		if (
-			slot_name === 'default' &&
-			path.some(
-				(parent) =>
-					(parent.type === 'SvelteComponent' ||
-						parent.type === 'Component' ||
-						parent.type === 'RegularElement' ||
-						parent.type === 'SvelteElement' ||
-						parent.type === 'SvelteFragment') &&
-					parent.attributes.some((attr) => attr.type === 'LetDirective')
-			)
-		) {
-			aliased_slot_name = `${name}_render`;
-			state.derived_conflicting_slots.set(aliased_slot_name, name);
-		}
-		name = aliased_slot_name ?? name;
-
-		if (node.fragment.nodes.length > 0) {
-			next();
-			state.str.update(
-				node.start,
-				node.fragment.nodes[0].start,
-				`{#if ${name}}{@render ${state.analysis.uses_props ? `${state.names.props}.` : ''}${name}(${slot_props})}{:else}`
-			);
-			state.str.update(node.fragment.nodes[node.fragment.nodes.length - 1].end, node.end, '{/if}');
-		} else {
-			state.str.update(
-				node.start,
-				node.end,
-				`{@render ${state.analysis.uses_props ? `${state.names.props}.` : ''}${name}?.(${slot_props})}`
-			);
-		}
-	},
-	Comment(node, { state }) {
-		const migrated = migrate_svelte_ignore(node.data);
-		if (migrated !== node.data) {
-			state.str.overwrite(node.start + '<!--'.length, node.end - '-->'.length, migrated);
-		}
-	},
-	HtmlTag(node, { state, next }) {
-		trim_block(state, node.start, node.end);
-		next();
-	},
-	ConstTag(node, { state, next }) {
-		trim_block(state, node.start, node.end);
-		next();
-	},
-	IfBlock(node, { state, next }) {
-		const start = node.start;
-		const end = state.str.original.indexOf('}', node.test.end) + 1;
-		trim_block(state, start, end);
-		next();
-	},
-	AwaitBlock(node, { state, next }) {
-		const start = node.start;
-		const end =
-			state.str.original.indexOf(
-				'}',
-				node.pending !== null ? node.expression.end : node.value?.end
-			) + 1;
-		trim_block(state, start, end);
-		if (node.pending !== null) {
-			const start = state.str.original.lastIndexOf('{', node.value?.start);
-			const end = state.str.original.indexOf('}', node.value?.end) + 1;
-			trim_block(state, start, end);
-		}
-		if (node.catch !== null) {
-			const start = state.str.original.lastIndexOf('{', node.error?.start);
-			const end = state.str.original.indexOf('}', node.error?.end) + 1;
-			trim_block(state, start, end);
-		}
-		next();
-	},
-	KeyBlock(node, { state, next }) {
-		const start = node.start;
-		const end = state.str.original.indexOf('}', node.expression.end) + 1;
-		trim_block(state, start, end);
-		next();
-	}
-};
-
-/**
- * @param {AST.RegularElement | AST.SvelteElement | AST.SvelteComponent | AST.Component | AST.SlotElement | AST.SvelteFragment} node
- * @param {AST.SvelteNode[]} path
- * @param {State} state
- */
-function migrate_slot_usage(node, path, state) {
-	const parent = path.at(-2);
-	// Bail on custom element slot usage
-	if (
-		parent?.type !== 'Component' &&
-		parent?.type !== 'SvelteComponent' &&
-		node.type !== 'Component' &&
-		node.type !== 'SvelteComponent'
-	) {
-		return;
-	}
-
-	let snippet_name = 'children';
-	let snippet_props = [];
-
-	// if we stop the transform because the name is not correct we don't want to
-	// remove the let directive and they could come before the name
-	let removal_queue = [];
-
-	for (let attribute of node.attributes) {
-		if (
-			attribute.type === 'Attribute' &&
-			attribute.name === 'slot' &&
-			is_text_attribute(attribute)
-		) {
-			snippet_name = attribute.value[0].data;
-			// the default slot in svelte 4 if what the children slot is for svelte 5
-			if (snippet_name === 'default') {
-				snippet_name = 'children';
-			}
-			if (!regex_is_valid_identifier.test(snippet_name) || is_reserved(snippet_name)) {
-				has_migration_task = true;
-				state.str.appendLeft(
-					node.start,
-					`<!-- @migration-task: migrate this slot by hand, \`${snippet_name}\` is an invalid identifier -->\n${state.indent}`
-				);
-				return;
-			}
-			if (parent?.type === 'Component' || parent?.type === 'SvelteComponent') {
-				for (let attribute of parent.attributes) {
-					if (attribute.type === 'Attribute' || attribute.type === 'BindDirective') {
-						if (attribute.name === snippet_name) {
-							state.str.appendLeft(
-								node.start,
-								`<!-- @migration-task: migrate this slot by hand, \`${snippet_name}\` would shadow a prop on the parent component -->\n${state.indent}`
-							);
-							return;
-						}
-					}
-				}
-			}
-			// flush the queue after we found the name
-			for (let remove_let of removal_queue) {
-				remove_let();
-			}
-			state.str.remove(attribute.start, attribute.end);
-		}
-		if (attribute.type === 'LetDirective') {
-			snippet_props.push(
-				attribute.name +
-					(attribute.expression
-						? `: ${state.str.original.substring(/** @type {number} */ (attribute.expression.start), /** @type {number} */ (attribute.expression.end))}`
-						: '')
-			);
-			// we just add to the queue to remove them after we found if we need to migrate or we bail
-			removal_queue.push(() => state.str.remove(attribute.start, attribute.end));
-		}
-	}
-
-	if (removal_queue.length > 0) {
-		for (let remove_let of removal_queue) {
-			remove_let();
-		}
-	}
-
-	if (node.type === 'SvelteFragment' && node.fragment.nodes.length > 0) {
-		// remove node itself, keep content
-		state.str.remove(node.start, node.fragment.nodes[0].start);
-		state.str.remove(node.fragment.nodes[node.fragment.nodes.length - 1].end, node.end);
-	}
-
-	const props = snippet_props.length > 0 ? `{ ${snippet_props.join(', ')} }` : '';
-
-	if (snippet_name === 'children' && node.type !== 'SvelteFragment') {
-		if (snippet_props.length === 0) return; // nothing to do
-
-		let inner_start = 0;
-		let inner_end = 0;
-		for (let i = 0; i < node.fragment.nodes.length; i++) {
-			const inner = node.fragment.nodes[i];
-			const is_empty_text = inner.type === 'Text' && !inner.data.trim();
-
-			if (
-				(inner.type === 'RegularElement' ||
-					inner.type === 'SvelteElement' ||
-					inner.type === 'Component' ||
-					inner.type === 'SvelteComponent' ||
-					inner.type === 'SlotElement' ||
-					inner.type === 'SvelteFragment') &&
-				inner.attributes.some((attr) => attr.type === 'Attribute' && attr.name === 'slot')
-			) {
-				if (inner_start && !inner_end) {
-					// End of default slot content
-					inner_end = inner.start;
-				}
-			} else if (!inner_start && !is_empty_text) {
-				// Start of default slot content
-				inner_start = inner.start;
-			} else if (inner_end && !is_empty_text) {
-				// There was default slot content before, then some named slot content, now some default slot content again.
-				// We're moving the last character back by one to avoid the closing {/snippet} tag inserted afterwards
-				// to come before the opening {#snippet} tag of the named slot.
-				state.str.update(inner_end - 1, inner_end, '');
-				state.str.prependLeft(inner_end - 1, state.str.original[inner_end - 1]);
-				state.str.move(inner.start, inner.end, inner_end - 1);
-			}
-		}
-
-		if (!inner_end) {
-			inner_end = node.fragment.nodes[node.fragment.nodes.length - 1].end;
-		}
-
-		state.str.appendLeft(
-			inner_start,
-			`{#snippet ${snippet_name}(${props})}\n${state.indent.repeat(path.length)}`
-		);
-		state.str.indent(state.indent, {
-			exclude: [
-				[0, inner_start],
-				[inner_end, state.str.original.length]
-			]
-		});
-		if (inner_end < node.fragment.nodes[node.fragment.nodes.length - 1].end) {
-			// Named slots coming afterwards
-			state.str.prependLeft(inner_end, `{/snippet}\n${state.indent.repeat(path.length)}`);
-		} else {
-			// No named slots coming afterwards
-			state.str.prependLeft(
-				inner_end,
-				`${state.indent.repeat(path.length)}{/snippet}\n${state.indent.repeat(path.length - 1)}`
-			);
-		}
-	} else {
-		// Named slot or `svelte:fragment`: wrap element itself in a snippet
-		state.str.prependLeft(
-			node.start,
-			`{#snippet ${snippet_name}(${props})}\n${state.indent.repeat(path.length - 2)}`
-		);
-		state.str.indent(state.indent, {
-			exclude: [
-				[0, node.start],
-				[node.end, state.str.original.length]
-			]
-		});
-		const str = `\n${state.indent.repeat(path.length - 2)}{/snippet}`;
-
-		if (node.type === 'SlotElement') {
-			state.str.appendRight(node.end, str);
-		} else {
-			state.str.appendLeft(node.end, str);
-		}
-	}
-}
-
-/**
- * @param {VariableDeclarator} declarator
- * @param {State} state
- * @param {AST.SvelteNode[]} path
- */
-function extract_type_and_comment(declarator, state, path) {
-	const str = state.str;
-	const parent = path.at(-1);
-
-	// Try to find jsdoc above the declaration
-	let comment_node = /** @type {Node} */ (parent)?.leadingComments?.at(-1);
-
-	const comment_start = /** @type {any} */ (comment_node)?.start;
-	const comment_end = /** @type {any} */ (comment_node)?.end;
-	let comment = comment_node && str.original.substring(comment_start, comment_end);
-	if (comment_node) {
-		str.update(comment_start, comment_end, '');
-	}
-
-	// Find trailing comments
-	const trailing_comment_node = /** @type {Node} */ (parent)?.trailingComments?.at(0);
-	const trailing_comment_start = /** @type {any} */ (trailing_comment_node)?.start;
-	const trailing_comment_end = /** @type {any} */ (trailing_comment_node)?.end;
-	let trailing_comment =
-		trailing_comment_node && str.original.substring(trailing_comment_start, trailing_comment_end);
-
-	if (trailing_comment_node) {
-		str.update(trailing_comment_start, trailing_comment_end, '');
-	}
-
-	if (declarator.id.typeAnnotation) {
-		state.has_type_or_fallback = true;
-		let start = declarator.id.typeAnnotation.start + 1; // skip the colon
-		while (str.original[start] === ' ') {
-			start++;
-		}
-		return {
-			type: str.original.substring(start, declarator.id.typeAnnotation.end),
-			comment,
-			trailing_comment
-		};
-	}
-
-	let cleaned_comment_arr = comment
-		?.split('\n')
-		.map((line) =>
-			line
-				.trim()
-				// replace `// ` for one liners
-				.replace(/^\/\/\s*/g, '')
-				// replace `\**` for the initial JSDoc
-				.replace(/^\/\*\*?\s*/g, '')
-				// migrate `*/` for the end of JSDoc
-				.replace(/\s*\*\/$/g, '')
-				// remove any initial `* ` to clean the comment
-				.replace(/^\*\s*/g, '')
-		)
-		.filter(Boolean);
-	const first_at_comment = cleaned_comment_arr?.findIndex((line) => line.startsWith('@'));
-	let cleaned_comment = cleaned_comment_arr
-		?.slice(0, first_at_comment !== -1 ? first_at_comment : cleaned_comment_arr.length)
-		.join('\n');
-
-	let cleaned_comment_arr_trailing = trailing_comment
-		?.split('\n')
-		.map((line) =>
-			line
-				.trim()
-				// replace `// ` for one liners
-				.replace(/^\/\/\s*/g, '')
-				// replace `\**` for the initial JSDoc
-				.replace(/^\/\*\*?\s*/g, '')
-				// migrate `*/` for the end of JSDoc
-				.replace(/\s*\*\/$/g, '')
-				// remove any initial `* ` to clean the comment
-				.replace(/^\*\s*/g, '')
-		)
-		.filter(Boolean);
-	const first_at_comment_trailing = cleaned_comment_arr_trailing?.findIndex((line) =>
-		line.startsWith('@')
-	);
-	let cleaned_comment_trailing = cleaned_comment_arr_trailing
-		?.slice(
-			0,
-			first_at_comment_trailing !== -1
-				? first_at_comment_trailing
-				: cleaned_comment_arr_trailing.length
-		)
-		.join('\n');
-
-	// try to find a comment with a type annotation, hinting at jsdoc
-	if (parent?.type === 'ExportNamedDeclaration' && comment_node) {
-		state.has_type_or_fallback = true;
-		const match = /@type {(.+)}/.exec(comment_node.value);
-		if (match) {
-			// try to find JSDoc comments after a hyphen `-`
-			const jsdoc_comment = /@type {.+} (?:\w+|\[.*?\]) - (.+)/.exec(comment_node.value);
-			if (jsdoc_comment) {
-				cleaned_comment += jsdoc_comment[1]?.trim();
-			}
-			return {
-				type: match[1],
-				comment: cleaned_comment,
-				trailing_comment: cleaned_comment_trailing
-			};
-		}
-	}
-
-	// try to infer it from the init
-	if (declarator.init?.type === 'Literal') {
-		state.has_type_or_fallback = true; // only assume type if it's trivial to infer - else someone would've added a type annotation
-		const type = typeof declarator.init.value;
-		if (type === 'string' || type === 'number' || type === 'boolean') {
-			return {
-				type,
-				comment: state.uses_ts ? comment : cleaned_comment,
-				trailing_comment: state.uses_ts ? trailing_comment : cleaned_comment_trailing
-			};
-		}
-	}
-	return {
-		type: 'any',
-		comment: state.uses_ts ? comment : cleaned_comment,
-		trailing_comment: state.uses_ts ? trailing_comment : cleaned_comment_trailing
-	};
-}
-
-// Ensure modifiers are applied in the same order as Svelte 4
-const modifier_order = [
-	'preventDefault',
-	'stopPropagation',
-	'stopImmediatePropagation',
-	'self',
-	'trusted',
-	'once'
-];
-
-/**
- * @param {AST.RegularElement | AST.SvelteElement | AST.SvelteWindow | AST.SvelteDocument | AST.SvelteBody} element
- * @param {State} state
- */
-function handle_events(element, state) {
-	/** @type {Map<string, AST.OnDirective[]>} */
-	const handlers = new Map();
-	for (const attribute of element.attributes) {
-		if (attribute.type !== 'OnDirective') continue;
-
-		let name = `on${attribute.name}`;
-		if (attribute.modifiers.includes('capture')) {
-			name += 'capture';
-		}
-
-		const nodes = handlers.get(name) || [];
-		nodes.push(attribute);
-		handlers.set(name, nodes);
-	}
-
-	for (const [name, nodes] of handlers) {
-		const handlers = [];
-
-		let first = null;
-
-		for (const node of nodes) {
-			/** @type {string} */
-			let body;
-
-			if (node.expression) {
-				body = state.str.original.substring(
-					/** @type {number} */ (node.expression.start),
-					/** @type {number} */ (node.expression.end)
-				);
-			} else {
-				body = `${state.names.bubble}('${node.name}')`;
-				state.legacy_imports.add('createBubbler');
-				state.script_insertions.add(
-					`const ${state.names.bubble} = ${state.names.createBubbler}();`
-				);
-			}
-
-			const has_passive = node.modifiers.includes('passive');
-			const has_nonpassive = node.modifiers.includes('nonpassive');
-
-			const modifiers = modifier_order.filter((modifier) => node.modifiers.includes(modifier));
-
-			for (const modifier of modifiers) {
-				state.legacy_imports.add(modifier);
-				body = `${state.names[modifier]}(${body})`;
-			}
-
-			if (has_passive || has_nonpassive) {
-				const action = has_passive ? 'passive' : 'nonpassive';
-				state.legacy_imports.add(action);
-
-				state.str.overwrite(
-					node.start,
-					node.end,
-					`use:${state.names[action]}={['${node.name}', () => ${body}]}`
-				);
-			} else {
-				if (first) {
-					let start = node.start;
-					let end = node.end;
-
-					while (/[\s\n]/.test(state.str.original[start - 1])) start -= 1;
-					state.str.remove(start, end);
-				} else {
-					first = node;
-				}
-
-				handlers.push(body);
-			}
-		}
-
-		if (first) {
-			/** @type {string} */
-			let replacement;
-
-			if (handlers.length > 1) {
-				state.legacy_imports.add('handlers');
-				replacement = `${name}={${state.names.handlers}(${handlers.join(', ')})}`;
-			} else {
-				const handler = handlers[0];
-				replacement = handler === name ? `{${handler}}` : `${name}={${handler}}`;
-			}
-
-			state.str.overwrite(first.start, first.end, replacement);
-		}
-	}
-}
-
-/**
- * Returns start and end of the node. If the start is preceeded with white-space-only before a line break,
- * the start will be the start of the line.
- * @param {string} source
- * @param {LabeledStatement} node
- */
-function get_node_range(source, node) {
-	const first_leading_comment = node.leadingComments?.[0];
-	const last_trailing_comment = node.trailingComments?.[node.trailingComments.length - 1];
-
-	// @ts-expect-error the type of `Comment` seems to be wrong...the node actually contains
-	// start and end but the type seems to only contain a `range` (which doesn't actually exists)
-	let start = /** @type {number} */ (first_leading_comment?.start ?? node.start);
-	// @ts-expect-error the type of `Comment` seems to be wrong...the node actually contains
-	// start and end but the type seems to only contain a `range` (which doesn't actually exists)
-	let end = /** @type {number} */ (last_trailing_comment?.end ?? node.end);
-
-	let idx = start;
-	while (source[idx - 1] !== '\n' && source[idx - 1] !== '\r') {
-		idx--;
-		if (source[idx] !== ' ' && source[idx] !== '\t') {
-			idx = start;
-			break;
-		}
-	}
-
-	start = idx;
-
-	return { start, end };
-}
-
-/**
- * @param {Identifier} node
- * @param {State} state
- * @param {any[]} path
- */
-function handle_identifier(node, state, path) {
-	const parent = path.at(-1);
-	if (parent?.type === 'MemberExpression' && parent.property === node) return;
-
-	if (state.analysis.uses_props && node.name !== '$$slots') {
-		if (node.name === '$$props' || node.name === '$$restProps') {
-			// not 100% correct for $$restProps but it'll do
-			state.str.update(
-				/** @type {number} */ (node.start),
-				/** @type {number} */ (node.end),
-				state.names.props
-			);
-		} else {
-			const binding = state.scope.get(node.name);
-			if (binding?.kind === 'bindable_prop' && binding.node !== node) {
-				state.str.prependLeft(/** @type {number} */ (node.start), `${state.names.props}.`);
-			}
-		}
-	} else if (node.name === '$$restProps' && state.analysis.uses_rest_props) {
-		state.str.update(
-			/** @type {number} */ (node.start),
-			/** @type {number} */ (node.end),
-			state.names.rest
-		);
-	} else if (node.name === '$$slots' && state.analysis.uses_slots) {
-		if (parent?.type === 'MemberExpression') {
-			if (state.analysis.custom_element) return;
-
-			let name = parent.property.type === 'Literal' ? parent.property.value : parent.property.name;
-			let slot_name = name;
-			const existing_prop = state.props.find((prop) => prop.slot_name === name);
-			if (existing_prop) {
-				name = existing_prop.local;
-			} else if (name !== 'default') {
-				let new_name = state.scope.generate(name);
-				if (new_name !== name) {
-					throw new MigrationError(
-						'This migration would change the name of a slot making the component unusable'
-					);
-				}
-			}
-
-			name = name === 'default' ? 'children' : name;
-
-			if (!existing_prop) {
-				state.props.push({
-					local: name,
-					exported: name,
-					init: '',
-					bindable: false,
-					optional: true,
-					slot_name,
-					// if it's the first time we encounter this slot
-					// we start with any and delegate to when the slot
-					// is actually rendered (it might not happen in that case)
-					// any is still a safe bet
-					type: `import('svelte').Snippet<[any]>`,
-					needs_refine_type: true
-				});
-			}
-
-			state.str.update(
-				/** @type {number} */ (node.start),
-				parent.property.start,
-				state.analysis.uses_props ? `${state.names.props}.` : ''
-			);
-			state.str.update(parent.property.start, parent.end, name);
-		}
-		// else passed as identifier, we don't know what to do here, so let it error
-	} else if (
-		parent?.type === 'TSInterfaceDeclaration' ||
-		parent?.type === 'TSTypeAliasDeclaration'
-	) {
-		const members =
-			parent.type === 'TSInterfaceDeclaration' ? parent.body.body : parent.typeAnnotation?.members;
-		if (Array.isArray(members)) {
-			if (node.name === '$$Props') {
-				state.has_type_or_fallback = true;
-
-				for (const member of members) {
-					const prop = state.props.find((prop) => prop.exported === member.key.name);
-
-					const type = state.str.original.substring(
-						member.typeAnnotation.typeAnnotation.start,
-						member.typeAnnotation.typeAnnotation.end
-					);
-
-					let comment;
-					const comment_node = member.leadingComments?.at(-1);
-					if (comment_node?.type === 'Block') {
-						comment = state.str.original.substring(comment_node.start, comment_node.end);
-					}
-
-					const trailing_comment = member.trailingComments?.at(0)?.value;
-
-					if (prop) {
-						prop.type = type;
-						prop.optional = member.optional;
-						prop.comment = comment ?? prop.comment;
-						prop.trailing_comment = trailing_comment ?? prop.trailing_comment;
-					} else {
-						state.props.push({
-							local: member.key.name,
-							exported: member.key.name,
-							init: '',
-							bindable: false,
-							optional: member.optional,
-							type,
-							comment,
-							trailing_comment,
-							type_only: true
-						});
-					}
-				}
-
-				state.str.remove(parent.start, parent.end);
-			}
-		}
-	}
-}
-
-/** @param {string} content */
-function guess_indent(content) {
-	const lines = content.split('\n');
-
-	const tabbed = lines.filter((line) => /^\t+/.test(line));
-	const spaced = lines.filter((line) => /^ {2,}/.test(line));
-
-	if (tabbed.length === 0 && spaced.length === 0) {
-		return '\t';
-	}
-
-	// More lines tabbed than spaced? Assume tabs, and
-	// default to tabs in the case of a tie (or nothing
-	// to go on)
-	if (tabbed.length >= spaced.length) {
-		return '\t';
-	}
-
-	// Otherwise, we need to guess the multiple
-	const min = spaced.reduce((previous, current) => {
-		const count = /^ +/.exec(current)?.[0].length ?? 0;
-		return Math.min(count, previous);
-	}, Infinity);
-
-	return ' '.repeat(min);
-}