chore: use JSDoc type imports in more files (#12239)

* chore: use JSDoc type imports in more files

* Location_1 -> Location

* merge

* fix

* oops

---------

Co-authored-by: Rich Harris <[email protected]>

Author: damianstasik

packages/svelte/src/animate/index.js

@@ -1,3 +1,4 @@
+/** @import { FlipParams, AnimationConfig } from './public.js' */
 import { cubicOut } from '../easing/index.js';
 
 /**
@@ -7,8 +8,8 @@ import { cubicOut } from '../easing/index.js';
  * https://svelte.dev/docs/svelte-animate#flip
  * @param {Element} node
  * @param {{ from: DOMRect; to: DOMRect }} fromTo
- * @param {import('./public.js').FlipParams} params
- * @returns {import('./public.js').AnimationConfig}
+ * @param {FlipParams} params
+ * @returns {AnimationConfig}
  */
 export function flip(node, { from, to }, params = {}) {
 	const style = getComputedStyle(node);

packages/svelte/src/compiler/index.js

@@ -1,3 +1,5 @@
+/** @import { LegacyRoot } from './types/legacy-nodes.js' */
+/** @import { CompileOptions, CompileResult, ValidatedCompileOptions, ModuleCompileOptions, Root } from '#compiler' */
 import { walk as zimmerframe_walk } from 'zimmerframe';
 import { convert } from './legacy.js';
 import { parse as parse_acorn } from './phases/1-parse/acorn.js';
@@ -14,8 +16,8 @@ export { default as preprocess } from './preprocess/index.js';
  *
  * https://svelte.dev/docs/svelte-compiler#svelte-compile
  * @param {string} source The component source code
- * @param {import('#compiler').CompileOptions} options The compiler options
- * @returns {import('#compiler').CompileResult}
+ * @param {CompileOptions} options The compiler options
+ * @returns {CompileResult}
  */
 export function compile(source, options) {
 	const validated = validate_component_options(options, '');
@@ -25,7 +27,7 @@ export function compile(source, options) {
 
 	const { customElement: customElementOptions, ...parsed_options } = parsed.options || {};
 
-	/** @type {import('#compiler').ValidatedCompileOptions} */
+	/** @type {ValidatedCompileOptions} */
 	const combined_options = {
 		...validated,
 		...parsed_options,
@@ -52,8 +54,8 @@ export function compile(source, options) {
  *
  * https://svelte.dev/docs/svelte-compiler#svelte-compile
  * @param {string} source The component source code
- * @param {import('#compiler').ModuleCompileOptions} options
- * @returns {import('#compiler').CompileResult}
+ * @param {ModuleCompileOptions} options
+ * @returns {CompileResult}
  */
 export function compileModule(source, options) {
 	const validated = validate_module_options(options, '');
@@ -73,7 +75,7 @@ export function compileModule(source, options) {
  * @overload
  * @param {string} source
  * @param {{ filename?: string; modern: true }} options
- * @returns {import('#compiler').Root}
+ * @returns {Root}
  */
 
 /**
@@ -86,7 +88,7 @@ export function compileModule(source, options) {
  * @overload
  * @param {string} source
  * @param {{ filename?: string; modern?: false }} [options]
- * @returns {import('./types/legacy-nodes.js').LegacyRoot}
+ * @returns {LegacyRoot}
  */
 
 /**
@@ -98,7 +100,7 @@ export function compileModule(source, options) {
  * https://svelte.dev/docs/svelte-compiler#svelte-parse
  * @param {string} source
  * @param {{ filename?: string; rootDir?: string; modern?: boolean }} [options]
- * @returns {import('#compiler').Root | import('./types/legacy-nodes.js').LegacyRoot}
+ * @returns {Root | LegacyRoot}
  */
 export function parse(source, { filename, rootDir, modern } = {}) {
 	state.reset(source, { filename, rootDir }); // TODO it's weird to require filename/rootDir here. reconsider the API
@@ -109,7 +111,7 @@ export function parse(source, { filename, rootDir, modern } = {}) {
 
 /**
  * @param {string} source
- * @param {import('#compiler').Root} ast
+ * @param {Root} ast
  * @param {boolean | undefined} modern
  */
 function to_public_ast(source, ast, modern) {

packages/svelte/src/compiler/migrate/index.js

@@ -1,3 +1,9 @@
+/** @import { VariableDeclarator, Node, Identifier } from 'estree' */
+/** @import { SvelteNode } from '../types/template.js' */
+/** @import { Visitors } from 'zimmerframe' */
+/** @import { ComponentAnalysis } from '../phases/types.js' */
+/** @import { Scope } from '../phases/scope.js' */
+/** @import * as Compiler from '#compiler' */
 import MagicString from 'magic-string';
 import { walk } from 'zimmerframe';
 import { parse } from '../phases/1-parse/index.js';
@@ -24,7 +30,7 @@ export function migrate(source) {
 
 		const { customElement: customElementOptions, ...parsed_options } = parsed.options || {};
 
-		/** @type {import('#compiler').ValidatedCompileOptions} */
+		/** @type {Compiler.ValidatedCompileOptions} */
 		const combined_options = {
 			...validate_component_options({}, ''),
 			...parsed_options,
@@ -160,9 +166,9 @@ export function migrate(source) {
 
 /**
  * @typedef {{
- *  scope: import('../phases/scope.js').Scope;
+ *  scope: Scope;
  *  str: MagicString;
- *  analysis: import('../phases/types.js').ComponentAnalysis;
+ *  analysis: ComponentAnalysis;
  *  indent: string;
  *  props: Array<{ local: string; exported: string; init: string; bindable: boolean; slot_name?: string; optional: boolean; type: string; comment?: string }>;
  *  props_insertion_point: number;
@@ -175,7 +181,7 @@ export function migrate(source) {
  * }} State
  */
 
-/** @type {import('zimmerframe').Visitors<import('../types/template.js').SvelteNode, State>} */
+/** @type {Visitors<SvelteNode, State>} */
 const instance_script = {
 	_(node, { state, next }) {
 		// @ts-expect-error
@@ -281,9 +287,7 @@ const instance_script = {
 					// }
 				}
 
-				const binding = /** @type {import('#compiler').Binding} */ (
-					state.scope.get(declarator.id.name)
-				);
+				const binding = /** @type {Compiler.Binding} */ (state.scope.get(declarator.id.name));
 
 				if (
 					state.analysis.uses_props &&
@@ -429,7 +433,7 @@ const instance_script = {
 	}
 };
 
-/** @type {import('zimmerframe').Visitors<import('../types/template.js').SvelteNode, State>} */
+/** @type {Visitors<SvelteNode, State>} */
 const template = {
 	Identifier(node, { state, path }) {
 		handle_identifier(node, state, path);
@@ -543,15 +547,15 @@ const template = {
 };
 
 /**
- * @param {import('estree').VariableDeclarator} declarator
+ * @param {VariableDeclarator} declarator
  * @param {MagicString} str
- * @param {import('#compiler').SvelteNode[]} path
+ * @param {Compiler.SvelteNode[]} path
  */
 function extract_type_and_comment(declarator, str, path) {
 	const parent = path.at(-1);
 
 	// Try to find jsdoc above the declaration
-	let comment_node = /** @type {import('estree').Node} */ (parent)?.leadingComments?.at(-1);
+	let comment_node = /** @type {Node} */ (parent)?.leadingComments?.at(-1);
 	if (comment_node?.type !== 'Block') comment_node = undefined;
 
 	const comment_start = /** @type {any} */ (comment_node)?.start;
@@ -590,11 +594,11 @@ function extract_type_and_comment(declarator, str, path) {
 }
 
 /**
- * @param {import('#compiler').RegularElement | import('#compiler').SvelteElement | import('#compiler').SvelteWindow | import('#compiler').SvelteDocument | import('#compiler').SvelteBody} element
+ * @param {Compiler.RegularElement | Compiler.SvelteElement | Compiler.SvelteWindow | Compiler.SvelteDocument | Compiler.SvelteBody} element
  * @param {State} state
  */
 function handle_events(element, state) {
-	/** @type {Map<string, import('#compiler').OnDirective[]>} */
+	/** @type {Map<string, Compiler.OnDirective[]>} */
 	const handlers = new Map();
 	for (const attribute of element.attributes) {
 		if (attribute.type !== 'OnDirective') continue;
@@ -805,7 +809,7 @@ function get_indent(state, ...nodes) {
 }
 
 /**
- * @param {import('#compiler').OnDirective} last
+ * @param {Compiler.OnDirective} last
  * @param {State} state
  */
 function generate_event_name(last, state) {
@@ -821,7 +825,7 @@ function generate_event_name(last, state) {
 }
 
 /**
- * @param {import('estree').Identifier} node
+ * @param {Identifier} node
  * @param {State} state
  * @param {any[]} path
  */

packages/svelte/src/compiler/phases/1-parse/index.js

@@ -1,3 +1,4 @@
+/** @import { TemplateNode, Fragment, Root, SvelteOptionsRaw } from '#compiler' */
 // @ts-expect-error acorn type definitions are borked in the release we use
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import fragment from './state/fragment.js';
@@ -26,13 +27,13 @@ export class Parser {
 	/** Whether we're parsing in TypeScript mode */
 	ts = false;
 
-	/** @type {import('#compiler').TemplateNode[]} */
+	/** @type {TemplateNode[]} */
 	stack = [];
 
-	/** @type {import('#compiler').Fragment[]} */
+	/** @type {Fragment[]} */
 	fragments = [];
 
-	/** @type {import('#compiler').Root} */
+	/** @type {Root} */
 	root;
 
 	/** @type {Record<string, boolean>} */
@@ -120,9 +121,7 @@ export class Parser {
 			(thing) => thing.type === 'SvelteOptions'
 		);
 		if (options_index !== -1) {
-			const options = /** @type {import('#compiler').SvelteOptionsRaw} */ (
-				this.root.fragment.nodes[options_index]
-			);
+			const options = /** @type {SvelteOptionsRaw} */ (this.root.fragment.nodes[options_index]);
 			this.root.fragment.nodes.splice(options_index, 1);
 			this.root.options = read_options(options);
 			// We need this for the old AST format
@@ -289,7 +288,7 @@ export class Parser {
 
 /**
  * @param {string} template
- * @returns {import('#compiler').Root}
+ * @returns {Root}
  */
 export function parse(template) {
 	const parser = new Parser(template);

packages/svelte/src/compiler/phases/1-parse/read/context.js

@@ -1,3 +1,6 @@
+/** @import { Location } from 'locate-character' */
+/** @import { Pattern } from 'estree' */
+/** @import { Parser } from '../index.js' */
 // @ts-expect-error acorn type definitions are borked in the release we use
 import { isIdentifierStart } from 'acorn';
 import full_char_code_at from '../utils/full_char_code_at.js';
@@ -13,8 +16,8 @@ import * as e from '../../../errors.js';
 import { locator } from '../../../state.js';
 
 /**
- * @param {import('../index.js').Parser} parser
- * @returns {import('estree').Pattern}
+ * @param {Parser} parser
+ * @returns {Pattern}
  */
 export default function read_pattern(parser) {
 	const start = parser.index;
@@ -30,8 +33,8 @@ export default function read_pattern(parser) {
 			name,
 			start,
 			loc: {
-				start: /** @type {import('locate-character').Location} */ (locator(start)),
-				end: /** @type {import('locate-character').Location} */ (locator(parser.index))
+				start: /** @type {Location} */ (locator(start)),
+				end: /** @type {Location} */ (locator(parser.index))
 			},
 			end: parser.index,
 			typeAnnotation: annotation
@@ -95,7 +98,7 @@ export default function read_pattern(parser) {
 }
 
 /**
- * @param {import('../index.js').Parser} parser
+ * @param {Parser} parser
  * @returns {any}
  */
 function read_type_annotation(parser) {

packages/svelte/src/compiler/phases/1-parse/read/options.js

@@ -1,14 +1,16 @@
+/** @import { ObjectExpression } from 'estree' */
+/** @import { SvelteOptionsRaw, Root, SvelteOptions } from '#compiler' */
 import { namespace_mathml, namespace_svg } from '../../../../constants.js';
 import * as e from '../../../errors.js';
 
 const regex_valid_tag_name = /^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/;
 
 /**
- * @param {import('#compiler').SvelteOptionsRaw} node
- * @returns {import('#compiler').Root['options']}
+ * @param {SvelteOptionsRaw} node
+ * @returns {Root['options']}
  */
 export default function read_options(node) {
-	/** @type {import('#compiler').SvelteOptions} */
+	/** @type {SvelteOptions} */
 	const component_options = {
 		start: node.start,
 		end: node.end,
@@ -37,7 +39,7 @@ export default function read_options(node) {
 				break; // eslint doesn't know this is unnecessary
 			}
 			case 'customElement': {
-				/** @type {import('#compiler').SvelteOptions['customElement']} */
+				/** @type {SvelteOptions['customElement']} */
 				const ce = { tag: '' };
 
 				const { value } = attribute;
@@ -86,8 +88,7 @@ export default function read_options(node) {
 						e.svelte_options_invalid_customelement_props(attribute);
 					}
 					ce.props = {};
-					for (const property of /** @type {import('estree').ObjectExpression} */ (props)
-						.properties) {
+					for (const property of /** @type {ObjectExpression} */ (props).properties) {
 						if (
 							property.type !== 'Property' ||
 							property.computed ||

packages/svelte/src/compiler/phases/1-parse/read/script.js

@@ -1,3 +1,6 @@
+/** @import { Program } from 'estree' */
+/** @import { Attribute, SpreadAttribute, Directive, Script } from '#compiler' */
+/** @import { Parser } from '../index.js' */
 import * as acorn from '../acorn.js';
 import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
@@ -29,10 +32,10 @@ function get_context(attributes) {
 }
 
 /**
- * @param {import('../index.js').Parser} parser
+ * @param {Parser} parser
  * @param {number} start
- * @param {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute | import('#compiler').Directive>} attributes
- * @returns {import('#compiler').Script}
+ * @param {Array<Attribute | SpreadAttribute | Directive>} attributes
+ * @returns {Script}
  */
 export function read_script(parser, start, attributes) {
 	const script_start = parser.index;
@@ -45,7 +48,7 @@ export function read_script(parser, start, attributes) {
 		parser.template.slice(0, script_start).replace(regex_not_newline_characters, ' ') + data;
 	parser.read(regex_starts_with_closing_script_tag);
 
-	/** @type {import('estree').Program} */
+	/** @type {Program} */
 	let ast;
 
 	try {