msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

chore: use JSDoc imports (#12592)

Browse Source 
* more

* more

* more

* more

* more

* more

* more

* regenerate types
pull/12595/head
Rich Harris 5 months ago committed by GitHub
parent 7a5c6b588f
commit c548932390
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 400 additions and 440 deletions
Show Stats Download Patch File Download Diff File

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

@ -901,7 +901,7 @@ const legacy_scope_tweaker = {
} }
}; };
/** @type {import('zimmerframe').Visitors<SvelteNode, { scope: Scope, analysis: { runes: true } }>} */ /** @type {Visitors} */
const runes_scope_js_tweaker = { const runes_scope_js_tweaker = {
VariableDeclarator(node, { state }) { VariableDeclarator(node, { state }) {
if (node.init?.type !== 'CallExpression') return; if (node.init?.type !== 'CallExpression') return;

171
packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
Unescape View File

@ -1,5 +1,8 @@
/** @import { BlockStatement, CallExpression, Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Pattern, Property, Statement, Super, TemplateElement, TemplateLiteral } from 'estree' */ /** @import { BlockStatement, CallExpression, Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Pattern, Property, Statement, Super, TemplateElement, TemplateLiteral } from 'estree' */
/** @import { BindDirective } from '#compiler' */ /** @import { Attribute, BindDirective, Binding, ClassDirective, Component, DelegatedEvent, EachBlock, ExpressionTag, Namespace, OnDirective, RegularElement, SpreadAttribute, StyleDirective, SvelteComponent, SvelteElement, SvelteNode, SvelteSelf, TemplateNode, Text } from '#compiler' */
/** @import { SourceLocation } from '#shared' */
/** @import { Scope } from '../../../scope.js' */
/** @import { ComponentClientTransformState, ComponentContext, ComponentVisitors } from '../types.js' */
import { import {
extract_identifiers, extract_identifiers,
extract_paths, extract_paths,
@ -54,9 +57,9 @@ import { locator } from '../../../../state.js';
import is_reference from 'is-reference'; import is_reference from 'is-reference';
/** /**
* @param {import('#compiler').RegularElement | import('#compiler').SvelteElement} element * @param {RegularElement | SvelteElement} element
* @param {import('#compiler').Attribute} attribute * @param {Attribute} attribute
* @param {{ state: { metadata: { namespace: import('#compiler').Namespace }}}} context * @param {{ state: { metadata: { namespace: Namespace }}}} context
*/ */
function get_attribute_name(element, attribute, context) { function get_attribute_name(element, attribute, context) {
let name = attribute.name; let name = attribute.name;
@ -76,9 +79,9 @@ function get_attribute_name(element, attribute, context) {
/** /**
* Serializes each style directive into something like `$.set_style(element, style_property, value)` * Serializes each style directive into something like `$.set_style(element, style_property, value)`
* and adds it either to init or update, depending on whether or not the value or the attributes are dynamic. * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
* @param {import('#compiler').StyleDirective[]} style_directives * @param {StyleDirective[]} style_directives
* @param {Identifier} element_id * @param {Identifier} element_id
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @param {boolean} is_attributes_reactive * @param {boolean} is_attributes_reactive
*/ */
function serialize_style_directives(style_directives, element_id, context, is_attributes_reactive) { function serialize_style_directives(style_directives, element_id, context, is_attributes_reactive) {
@ -138,9 +141,9 @@ function parse_directive_name(name) {
/** /**
* Serializes each class directive into something like `$.class_toogle(element, class_name, value)` * Serializes each class directive into something like `$.class_toogle(element, class_name, value)`
* and adds it either to init or update, depending on whether or not the value or the attributes are dynamic. * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
* @param {import('#compiler').ClassDirective[]} class_directives * @param {ClassDirective[]} class_directives
* @param {Identifier} element_id * @param {Identifier} element_id
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @param {boolean} is_attributes_reactive * @param {boolean} is_attributes_reactive
*/ */
function serialize_class_directives(class_directives, element_id, context, is_attributes_reactive) { function serialize_class_directives(class_directives, element_id, context, is_attributes_reactive) {
@ -161,11 +164,11 @@ function serialize_class_directives(class_directives, element_id, context, is_at
} }
/** /**
* @param {import('#compiler').Binding[]} references * @param {Binding[]} references
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
*/ */
function serialize_transitive_dependencies(references, context) { function serialize_transitive_dependencies(references, context) {
/** @type {Set<import('#compiler').Binding>} */ /** @type {Set<Binding>} */
const dependencies = new Set(); const dependencies = new Set();
for (const ref of references) { for (const ref of references) {
@ -179,9 +182,9 @@ function serialize_transitive_dependencies(references, context) {
} }
/** /**
* @param {import('#compiler').Binding} binding * @param {Binding} binding
* @param {Set<import('#compiler').Binding>} seen * @param {Set<Binding>} seen
* @returns {import('#compiler').Binding[]} * @returns {Binding[]}
*/ */
function collect_transitive_dependencies(binding, seen = new Set()) { function collect_transitive_dependencies(binding, seen = new Set()) {
if (binding.kind !== 'legacy_reactive') return []; if (binding.kind !== 'legacy_reactive') return [];
@ -201,8 +204,8 @@ function collect_transitive_dependencies(binding, seen = new Set()) {
/** /**
* Special case: if we have a value binding on a select element, we need to set up synchronization * Special case: if we have a value binding on a select element, we need to set up synchronization
* between the value binding and inner signals, for indirect updates * between the value binding and inner signals, for indirect updates
* @param {import('#compiler').BindDirective} value_binding * @param {BindDirective} value_binding
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
*/ */
function setup_select_synchronization(value_binding, context) { function setup_select_synchronization(value_binding, context) {
if (context.state.analysis.runes) return; if (context.state.analysis.runes) return;
@ -253,9 +256,9 @@ function setup_select_synchronization(value_binding, context) {
} }
/** /**
* @param {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute>} attributes * @param {Array<Attribute | SpreadAttribute>} attributes
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @param {import('#compiler').RegularElement} element * @param {RegularElement} element
* @param {Identifier} element_id * @param {Identifier} element_id
* @param {boolean} needs_select_handling * @param {boolean} needs_select_handling
*/ */
@ -358,8 +361,8 @@ function serialize_element_spread_attributes(
/** /**
* Serializes dynamic element attribute assignments. * Serializes dynamic element attribute assignments.
* Returns the `true` if spread is deemed reactive. * Returns the `true` if spread is deemed reactive.
* @param {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute>} attributes * @param {Array<Attribute | SpreadAttribute>} attributes
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @param {Identifier} element_id * @param {Identifier} element_id
* @returns {boolean} * @returns {boolean}
*/ */
@ -472,10 +475,10 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
* }); * });
* ``` * ```
* Returns true if attribute is deemed reactive, false otherwise. * Returns true if attribute is deemed reactive, false otherwise.
* @param {import('#compiler').RegularElement} element * @param {RegularElement} element
* @param {Identifier} node_id * @param {Identifier} node_id
* @param {import('#compiler').Attribute} attribute * @param {Attribute} attribute
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @returns {boolean} * @returns {boolean}
*/ */
function serialize_element_attribute_update_assignment(element, node_id, attribute, context) { function serialize_element_attribute_update_assignment(element, node_id, attribute, context) {
@ -542,8 +545,8 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
/** /**
* Like `serialize_element_attribute_update_assignment` but without any special attribute treatment. * Like `serialize_element_attribute_update_assignment` but without any special attribute treatment.
* @param {Identifier} node_id * @param {Identifier} node_id
* @param {import('#compiler').Attribute} attribute * @param {Attribute} attribute
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @returns {boolean} * @returns {boolean}
*/ */
function serialize_custom_element_attribute_update_assignment(node_id, attribute, context) { function serialize_custom_element_attribute_update_assignment(node_id, attribute, context) {
@ -572,8 +575,8 @@ function serialize_custom_element_attribute_update_assignment(node_id, attribute
* Returns true if attribute is deemed reactive, false otherwise. * Returns true if attribute is deemed reactive, false otherwise.
* @param {string} element * @param {string} element
* @param {Identifier} node_id * @param {Identifier} node_id
* @param {import('#compiler').Attribute} attribute * @param {Attribute} attribute
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @returns {boolean} * @returns {boolean}
*/ */
function serialize_element_special_value_attribute(element, node_id, attribute, context) { function serialize_element_special_value_attribute(element, node_id, attribute, context) {
@ -632,7 +635,7 @@ function serialize_element_special_value_attribute(element, node_id, attribute,
} }
/** /**
* @param {import('../types.js').ComponentClientTransformState} state * @param {ComponentClientTransformState} state
* @param {string} id * @param {string} id
* @param {Expression | undefined} init * @param {Expression | undefined} init
* @param {Expression} value * @param {Expression} value
@ -646,18 +649,16 @@ function serialize_update_assignment(state, id, init, value, update) {
} }
/** /**
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
*/ */
function collect_parent_each_blocks(context) { function collect_parent_each_blocks(context) {
return /** @type {import('#compiler').EachBlock[]} */ ( return /** @type {EachBlock[]} */ (context.path.filter((node) => node.type === 'EachBlock'));
context.path.filter((node) => node.type === 'EachBlock')
);
} }
/** /**
* @param {import('#compiler').Component | import('#compiler').SvelteComponent | import('#compiler').SvelteSelf} node * @param {Component | SvelteComponent | SvelteSelf} node
* @param {string} component_name * @param {string} component_name
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
* @param {Expression} anchor * @param {Expression} anchor
* @returns {Statement} * @returns {Statement}
*/ */
@ -668,7 +669,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
/** @type {ExpressionStatement[]} */ /** @type {ExpressionStatement[]} */
const lets = []; const lets = [];
/** @type {Record<string, import('#compiler').TemplateNode[]>} */ /** @type {Record<string, TemplateNode[]>} */
const children = {}; const children = {};
/** @type {Record<string, Expression[]>} */ /** @type {Record<string, Expression[]>} */
@ -681,7 +682,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
let bind_this = null; let bind_this = null;
/** /**
* @type {import("estree").ExpressionStatement[]} * @type {ExpressionStatement[]}
*/ */
const binding_initializers = []; const binding_initializers = [];
@ -844,14 +845,14 @@ function serialize_inline_component(node, component_name, context, anchor = cont
let slot_name = 'default'; let slot_name = 'default';
if (is_element_node(child)) { if (is_element_node(child)) {
const attribute = /** @type {import('#compiler').Attribute | undefined} */ ( const attribute = /** @type {Attribute | undefined} */ (
child.attributes.find( child.attributes.find(
(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot' (attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
) )
); );
if (attribute !== undefined) { if (attribute !== undefined) {
slot_name = /** @type {import('#compiler').Text[]} */ (attribute.value)[0].data; slot_name = /** @type {Text[]} */ (attribute.value)[0].data;
} }
} }
@ -995,7 +996,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
* Serializes `bind:this` for components and elements. * Serializes `bind:this` for components and elements.
* @param {Identifier | MemberExpression} expression * @param {Identifier | MemberExpression} expression
* @param {Expression} value * @param {Expression} value
* @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('../types.js').ComponentClientTransformState>} context * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
*/ */
function serialize_bind_this(expression, value, { state, visit }) { function serialize_bind_this(expression, value, { state, visit }) {
/** @type {Identifier[]} */ /** @type {Identifier[]} */
@ -1059,7 +1060,7 @@ function serialize_bind_this(expression, value, { state, visit }) {
} }
/** /**
* @param {import('#shared').SourceLocation[]} locations * @param {SourceLocation[]} locations
*/ */
function serialize_locations(locations) { function serialize_locations(locations) {
return b.array( return b.array(
@ -1077,8 +1078,8 @@ function serialize_locations(locations) {
/** /**
* *
* @param {import('#compiler').Namespace} namespace * @param {Namespace} namespace
* @param {import('../types.js').ComponentClientTransformState} state * @param {ComponentClientTransformState} state
* @returns * @returns
*/ */
function get_template_function(namespace, state) { function get_template_function(namespace, state) {
@ -1116,9 +1117,9 @@ function serialize_render_stmt(update) {
/** /**
* Serializes the event handler function of the `on:` directive * Serializes the event handler function of the `on:` directive
* @param {Pick<import('#compiler').OnDirective, 'name' | 'modifiers' | 'expression'>} node * @param {Pick<OnDirective, 'name' | 'modifiers' | 'expression'>} node
* @param {null | { contains_call_expression: boolean; dynamic: boolean; } | null} metadata * @param {null | { contains_call_expression: boolean; dynamic: boolean; } | null} metadata
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
*/ */
function serialize_event_handler(node, metadata, { state, visit }) { function serialize_event_handler(node, metadata, { state, visit }) {
/** @type {Expression} */ /** @type {Expression} */
@ -1225,9 +1226,9 @@ function serialize_event_handler(node, metadata, { state, visit }) {
/** /**
* Serializes an event handler function of the `on:` directive or an attribute starting with `on` * Serializes an event handler function of the `on:` directive or an attribute starting with `on`
* @param {{name: string;modifiers: string[];expression: Expression | null;delegated?: import('#compiler').DelegatedEvent | null;}} node * @param {{name: string;modifiers: string[];expression: Expression | null;delegated?: DelegatedEvent | null;}} node
* @param {null | { contains_call_expression: boolean; dynamic: boolean; }} metadata * @param {null | { contains_call_expression: boolean; dynamic: boolean; }} metadata
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
*/ */
function serialize_event(node, metadata, context) { function serialize_event(node, metadata, context) {
const state = context.state; const state = context.state;
@ -1314,7 +1315,7 @@ function serialize_event(node, metadata, context) {
); );
} }
const parent = /** @type {import('#compiler').SvelteNode} */ (context.path.at(-1)); const parent = /** @type {SvelteNode} */ (context.path.at(-1));
if ( if (
parent.type === 'SvelteDocument' || parent.type === 'SvelteDocument' ||
parent.type === 'SvelteWindow' || parent.type === 'SvelteWindow' ||
@ -1328,8 +1329,8 @@ function serialize_event(node, metadata, context) {
} }
/** /**
* @param {import('#compiler').Attribute & { value: import('#compiler').ExpressionTag | [import('#compiler').ExpressionTag] }} node * @param {Attribute & { value: ExpressionTag | [ExpressionTag] }} node
* @param {import('../types').ComponentContext} context * @param {ComponentContext} context
*/ */
function serialize_event_attribute(node, context) { function serialize_event_attribute(node, context) {
/** @type {string[]} */ /** @type {string[]} */
@ -1357,15 +1358,15 @@ function serialize_event_attribute(node, context) {
* Processes an array of template nodes, joining sibling text/expression nodes * Processes an array of template nodes, joining sibling text/expression nodes
* (e.g. `{a} b {c}`) into a single update function. Along the way it creates * (e.g. `{a} b {c}`) into a single update function. Along the way it creates
* corresponding template node references these updates are applied to. * corresponding template node references these updates are applied to.
* @param {import('#compiler').SvelteNode[]} nodes * @param {SvelteNode[]} nodes
* @param {(is_text: boolean) => Expression} expression * @param {(is_text: boolean) => Expression} expression
* @param {boolean} is_element * @param {boolean} is_element
* @param {import('../types.js').ComponentContext} context * @param {ComponentContext} context
*/ */
function process_children(nodes, expression, is_element, { visit, state }) { function process_children(nodes, expression, is_element, { visit, state }) {
const within_bound_contenteditable = state.metadata.bound_contenteditable; const within_bound_contenteditable = state.metadata.bound_contenteditable;
/** @typedef {Array<import('#compiler').Text | import('#compiler').ExpressionTag>} Sequence */ /** @typedef {Array<Text | ExpressionTag>} Sequence */
/** @type {Sequence} */ /** @type {Sequence} */
let sequence = []; let sequence = [];
@ -1491,7 +1492,7 @@ function process_children(nodes, expression, is_element, { visit, state }) {
/** /**
* @param {Expression} expression * @param {Expression} expression
* @param {import('../types.js').ComponentClientTransformState} state * @param {ComponentClientTransformState} state
* @param {string} name * @param {string} name
*/ */
function get_node_id(expression, state, name) { function get_node_id(expression, state, name) {
@ -1506,8 +1507,8 @@ function get_node_id(expression, state, name) {
} }
/** /**
* @param {import('#compiler').Attribute['value']} value * @param {Attribute['value']} value
* @param {import('../types').ComponentContext} context * @param {ComponentContext} context
* @returns {[contains_call_expression: boolean, Expression]} * @returns {[contains_call_expression: boolean, Expression]}
*/ */
function serialize_attribute_value(value, context) { function serialize_attribute_value(value, context) {
@ -1532,9 +1533,9 @@ function serialize_attribute_value(value, context) {
} }
/** /**
* @param {Array<import('#compiler').Text | import('#compiler').ExpressionTag>} values * @param {Array<Text | ExpressionTag>} values
* @param {(node: import('#compiler').SvelteNode, state: any) => any} visit * @param {(node: SvelteNode, state: any) => any} visit
* @param {import("../types.js").ComponentClientTransformState} state * @param {ComponentClientTransformState} state
* @returns {[boolean, TemplateLiteral]} * @returns {[boolean, TemplateLiteral]}
*/ */
function serialize_template_literal(values, visit, state) { function serialize_template_literal(values, visit, state) {
@ -1594,7 +1595,7 @@ function serialize_template_literal(values, visit, state) {
return [contains_call_expression, b.template(quasis, expressions)]; return [contains_call_expression, b.template(quasis, expressions)];
} }
/** @type {import('../types').ComponentVisitors} */ /** @type {ComponentVisitors} */
export const template_visitors = { export const template_visitors = {
Fragment(node, context) { Fragment(node, context) {
// Creates a new block which looks roughly like this: // Creates a new block which looks roughly like this:
@ -1640,7 +1641,7 @@ export const template_visitors = {
/** @type {Statement | undefined} */ /** @type {Statement | undefined} */
let close = undefined; let close = undefined;
/** @type {import('../types').ComponentClientTransformState} */ /** @type {ComponentClientTransformState} */
const state = { const state = {
...context.state, ...context.state,
before_init: [], before_init: [],
@ -1688,7 +1689,7 @@ export const template_visitors = {
}; };
if (is_single_element) { if (is_single_element) {
const element = /** @type {import('#compiler').RegularElement} */ (trimmed[0]); const element = /** @type {RegularElement} */ (trimmed[0]);
const id = b.id(context.state.scope.generate(element.name)); const id = b.id(context.state.scope.generate(element.name));
@ -1963,7 +1964,7 @@ export const template_visitors = {
state.after_update.push(b.stmt(b.call('$.transition', ...args))); state.after_update.push(b.stmt(b.call('$.transition', ...args)));
}, },
RegularElement(node, context) { RegularElement(node, context) {
/** @type {import('#shared').SourceLocation} */ /** @type {SourceLocation} */
let location = [-1, -1]; let location = [-1, -1];
if (context.state.options.dev) { if (context.state.options.dev) {
@ -1991,13 +1992,13 @@ export const template_visitors = {
context.state.template.push(`<${node.name}`); context.state.template.push(`<${node.name}`);
/** @type {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute>} */ /** @type {Array<Attribute | SpreadAttribute>} */
const attributes = []; const attributes = [];
/** @type {import('#compiler').ClassDirective[]} */ /** @type {ClassDirective[]} */
const class_directives = []; const class_directives = [];
/** @type {import('#compiler').StyleDirective[]} */ /** @type {StyleDirective[]} */
const style_directives = []; const style_directives = [];
/** @type {ExpressionStatement[]} */ /** @type {ExpressionStatement[]} */
@ -2007,7 +2008,7 @@ export const template_visitors = {
let needs_input_reset = false; let needs_input_reset = false;
let needs_content_reset = false; let needs_content_reset = false;
/** @type {import('#compiler').BindDirective | null} */ /** @type {BindDirective | null} */
let value_binding = null; let value_binding = null;
/** If true, needs `__value` for inputs */ /** If true, needs `__value` for inputs */
@ -2129,7 +2130,7 @@ export const template_visitors = {
); );
is_attributes_reactive = true; is_attributes_reactive = true;
} else { } else {
for (const attribute of /** @type {import('#compiler').Attribute[]} */ (attributes)) { for (const attribute of /** @type {Attribute[]} */ (attributes)) {
if (is_event_attribute(attribute)) { if (is_event_attribute(attribute)) {
if ( if (
(attribute.name === 'onload' || attribute.name === 'onerror') && (attribute.name === 'onload' || attribute.name === 'onerror') &&
@ -2191,17 +2192,15 @@ export const template_visitors = {
context.state.template.push('>'); context.state.template.push('>');
/** @type {import('#shared').SourceLocation[]} */ /** @type {SourceLocation[]} */
const child_locations = []; const child_locations = [];
/** @type {import('../types').ComponentClientTransformState} */ /** @type {ComponentClientTransformState} */
const state = { const state = {
...context.state, ...context.state,
metadata: child_metadata, metadata: child_metadata,
locations: child_locations, locations: child_locations,
scope: /** @type {import('../../../scope').Scope} */ ( scope: /** @type {Scope} */ (context.state.scopes.get(node.fragment)),
context.state.scopes.get(node.fragment)
),
preserve_whitespace: preserve_whitespace:
context.state.preserve_whitespace || context.state.preserve_whitespace ||
((node.name === 'pre' || node.name === 'textarea') && ((node.name === 'pre' || node.name === 'textarea') &&
@ -2284,16 +2283,16 @@ export const template_visitors = {
SvelteElement(node, context) { SvelteElement(node, context) {
context.state.template.push(`<!>`); context.state.template.push(`<!>`);
/** @type {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute>} */ /** @type {Array<Attribute | SpreadAttribute>} */
const attributes = []; const attributes = [];
/** @type {import('#compiler').Attribute['value'] | undefined} */ /** @type {Attribute['value'] | undefined} */
let dynamic_namespace = undefined; let dynamic_namespace = undefined;
/** @type {import('#compiler').ClassDirective[]} */ /** @type {ClassDirective[]} */
const class_directives = []; const class_directives = [];
/** @type {import('#compiler').StyleDirective[]} */ /** @type {StyleDirective[]} */
const style_directives = []; const style_directives = [];
/** @type {ExpressionStatement[]} */ /** @type {ExpressionStatement[]} */
@ -2303,7 +2302,7 @@ export const template_visitors = {
// They'll then be added to the function parameter of $.element // They'll then be added to the function parameter of $.element
const element_id = b.id(context.state.scope.generate('$$element')); const element_id = b.id(context.state.scope.generate('$$element'));
/** @type {import('../types').ComponentContext} */ /** @type {ComponentContext} */
const inner_context = { const inner_context = {
...context, ...context,
state: { state: {
@ -2491,7 +2490,7 @@ export const template_visitors = {
/** /**
* @param {Pattern} expression_for_id * @param {Pattern} expression_for_id
* @returns {import('#compiler').Binding['mutation']} * @returns {Binding['mutation']}
*/ */
const create_mutation = (expression_for_id) => { const create_mutation = (expression_for_id) => {
return (assignment, context) => { return (assignment, context) => {
@ -2536,8 +2535,8 @@ export const template_visitors = {
? each_node_meta.index ? each_node_meta.index
: b.id(node.index); : b.id(node.index);
const item = each_node_meta.item; const item = each_node_meta.item;
const binding = /** @type {import('#compiler').Binding} */ (context.state.scope.get(item.name)); const binding = /** @type {Binding} */ (context.state.scope.get(item.name));
const getter = (/** @type {import("estree").Identifier} */ id) => { const getter = (/** @type {Identifier} */ id) => {
const item_with_loc = with_loc(item, id); const item_with_loc = with_loc(item, id);
return b.call('$.unwrap', item_with_loc); return b.call('$.unwrap', item_with_loc);
}; };
@ -2567,7 +2566,7 @@ export const template_visitors = {
for (const path of paths) { for (const path of paths) {
const name = /** @type {Identifier} */ (path.node).name; const name = /** @type {Identifier} */ (path.node).name;
const binding = /** @type {import('#compiler').Binding} */ (context.state.scope.get(name)); const binding = /** @type {Binding} */ (context.state.scope.get(name));
const needs_derived = path.has_default_value; // to ensure that default value is only called once const needs_derived = path.has_default_value; // to ensure that default value is only called once
const fn = b.thunk( const fn = b.thunk(
/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state)) /** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
@ -2789,7 +2788,7 @@ export const template_visitors = {
for (const path of paths) { for (const path of paths) {
const name = /** @type {Identifier} */ (path.node).name; const name = /** @type {Identifier} */ (path.node).name;
const binding = /** @type {import('#compiler').Binding} */ (context.state.scope.get(name)); const binding = /** @type {Binding} */ (context.state.scope.get(name));
const needs_derived = path.has_default_value; // to ensure that default value is only called once const needs_derived = path.has_default_value; // to ensure that default value is only called once
const fn = b.thunk( const fn = b.thunk(
/** @type {Expression} */ ( /** @type {Expression} */ (
@ -3048,7 +3047,7 @@ export const template_visitors = {
const parent = path.at(-1); const parent = path.at(-1);
if (parent?.type === 'RegularElement') { if (parent?.type === 'RegularElement') {
const value = /** @type {any[]} */ ( const value = /** @type {any[]} */ (
/** @type {import('#compiler').Attribute} */ ( /** @type {Attribute} */ (
parent.attributes.find( parent.attributes.find(
(a) => (a) =>
a.type === 'Attribute' && a.type === 'Attribute' &&
@ -3262,7 +3261,7 @@ export const template_visitors = {
b.assignment( b.assignment(
'=', '=',
b.member(b.id('$.document'), b.id('title')), b.member(b.id('$.document'), b.id('title')),
b.literal(/** @type {import('#compiler').Text} */ (node.fragment.nodes[0]).data) b.literal(/** @type {Text} */ (node.fragment.nodes[0]).data)
) )
) )
); );
@ -3301,7 +3300,7 @@ export const template_visitors = {
}; };
/** /**
* @param {import('../types.js').ComponentClientTransformState} state * @param {ComponentClientTransformState} state
* @param {BindDirective} binding * @param {BindDirective} binding
* @param {MemberExpression} expression * @param {MemberExpression} expression
*/ */

422
packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
View File

File diff suppressed because it is too large Load Diff

11
packages/svelte/src/index-client.js
Unescape View File

@ -1,3 +1,6 @@
/** @import { ComponentContext, ComponentContextLegacy } from '#client' */
/** @import { EventDispatcher } from './index.js' */
/** @import { NotFunction } from './internal/types.js' */
import { current_component_context, flush_sync, untrack } from './internal/client/runtime.js'; import { current_component_context, flush_sync, untrack } from './internal/client/runtime.js';
import { is_array } from './internal/shared/utils.js'; import { is_array } from './internal/shared/utils.js';
import { user_effect } from './internal/client/index.js'; import { user_effect } from './internal/client/index.js';
@ -15,7 +18,7 @@ import { lifecycle_outside_component } from './internal/shared/errors.js';
* *
* https://svelte.dev/docs/svelte#onmount * https://svelte.dev/docs/svelte#onmount
* @template T * @template T
* @param {() => import('./internal/types').NotFunction<T> | Promise<import('./internal/types').NotFunction<T>> | (() => any)} fn * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn
* @returns {void} * @returns {void}
*/ */
export function onMount(fn) { export function onMount(fn) {
@ -84,7 +87,7 @@ function create_custom_event(type, detail, { bubbles = false, cancelable = false
* https://svelte.dev/docs/svelte#createeventdispatcher * https://svelte.dev/docs/svelte#createeventdispatcher
* @deprecated Use callback props and/or the `$host()` rune instead — see https://svelte-5-preview.vercel.app/docs/deprecations#createeventdispatcher * @deprecated Use callback props and/or the `$host()` rune instead — see https://svelte-5-preview.vercel.app/docs/deprecations#createeventdispatcher
* @template {Record<string, any>} [EventMap = any] * @template {Record<string, any>} [EventMap = any]
* @returns {import('./index.js').EventDispatcher<EventMap>} * @returns {EventDispatcher<EventMap>}
*/ */
export function createEventDispatcher() { export function createEventDispatcher() {
const component_context = current_component_context; const component_context = current_component_context;
@ -164,10 +167,10 @@ export function afterUpdate(fn) {
/** /**
* Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate
* @param {import('#client').ComponentContext} context * @param {ComponentContext} context
*/ */
function init_update_callbacks(context) { function init_update_callbacks(context) {
var l = /** @type {import('#client').ComponentContextLegacy} */ (context).l; var l = /** @type {ComponentContextLegacy} */ (context).l;
return (l.u ??= { a: [], b: [], m: [] }); return (l.u ??= { a: [], b: [], m: [] });
} }

3
packages/svelte/src/index-server.js
Unescape View File

@ -1,10 +1,11 @@
/** @import { Component } from '#server' */
import { current_component } from './internal/server/context.js'; import { current_component } from './internal/server/context.js';
import { noop } from './internal/shared/utils.js'; import { noop } from './internal/shared/utils.js';
import * as e from './internal/server/errors.js'; import * as e from './internal/server/errors.js';
/** @param {() => void} fn */ /** @param {() => void} fn */
export function onDestroy(fn) { export function onDestroy(fn) {
var context = /** @type {import('#server').Component} */ (current_component); var context = /** @type {Component} */ (current_component);
(context.d ??= []).push(fn); (context.d ??= []).push(fn);
} }

82
packages/svelte/src/internal/client/dom/blocks/each.js
Unescape View File

@ -1,4 +1,4 @@
/** @import { TemplateNode } from '#client' */ /** @import { EachItem, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
import { import {
EACH_INDEX_REACTIVE, EACH_INDEX_REACTIVE,
EACH_IS_ANIMATED, EACH_IS_ANIMATED,
@ -36,11 +36,11 @@ import { current_effect } from '../../runtime.js';
/** /**
* The row of a keyed each block that is currently updating. We track this * The row of a keyed each block that is currently updating. We track this
* so that `animate:` directives have something to attach themselves to * so that `animate:` directives have something to attach themselves to
* @type {import('#client').EachItem | null} * @type {EachItem | null}
*/ */
export let current_each_item = null; export let current_each_item = null;
/** @param {import('#client').EachItem | null} item */ /** @param {EachItem | null} item */
export function set_current_each_item(item) { export function set_current_each_item(item) {
current_each_item = item; current_each_item = item;
} }
@ -56,13 +56,13 @@ export function index(_, i) {
/** /**
* Pause multiple effects simultaneously, and coordinate their * Pause multiple effects simultaneously, and coordinate their
* subsequent destruction. Used in each blocks * subsequent destruction. Used in each blocks
* @param {import('#client').EachState} state * @param {EachState} state
* @param {import('#client').EachItem[]} items * @param {EachItem[]} items
* @param {null | Node} controlled_anchor * @param {null | Node} controlled_anchor
* @param {Map<any, import("#client").EachItem>} items_map * @param {Map<any, import("#client").EachItem>} items_map
*/ */
function pause_effects(state, items, controlled_anchor, items_map) { function pause_effects(state, items, controlled_anchor, items_map) {
/** @type {import('#client').TransitionManager[]} */ /** @type {TransitionManager[]} */
var transitions = []; var transitions = [];
var length = items.length; var length = items.length;
@ -101,14 +101,14 @@ function pause_effects(state, items, controlled_anchor, items_map) {
* @param {number} flags * @param {number} flags
* @param {() => V[]} get_collection * @param {() => V[]} get_collection
* @param {(value: V, index: number) => any} get_key * @param {(value: V, index: number) => any} get_key
* @param {(anchor: Node, item: import('#client').MaybeSource<V>, index: import('#client').MaybeSource<number>) => void} render_fn * @param {(anchor: Node, item: MaybeSource<V>, index: MaybeSource<number>) => void} render_fn
* @param {null | ((anchor: Node) => void)} fallback_fn * @param {null | ((anchor: Node) => void)} fallback_fn
* @returns {void} * @returns {void}
*/ */
export function each(node, flags, get_collection, get_key, render_fn, fallback_fn = null) { export function each(node, flags, get_collection, get_key, render_fn, fallback_fn = null) {
var anchor = node; var anchor = node;
/** @type {import('#client').EachState} */ /** @type {EachState} */
var state = { flags, items: new Map(), first: null }; var state = { flags, items: new Map(), first: null };
var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0; var is_controlled = (flags & EACH_IS_CONTROLLED) !== 0;
@ -125,7 +125,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
hydrate_next(); hydrate_next();
} }
/** @type {import('#client').Effect | null} */ /** @type {Effect | null} */
var fallback = null; var fallback = null;
block(() => { block(() => {
@ -174,10 +174,10 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
// this is separate to the previous block because `hydrating` might change // this is separate to the previous block because `hydrating` might change
if (hydrating) { if (hydrating) {
/** @type {import('#client').EachItem | null} */ /** @type {EachItem | null} */
var prev = null; var prev = null;
/** @type {import('#client').EachItem} */ /** @type {EachItem} */
var item; var item;
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
@ -239,9 +239,9 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
/** /**
* @template V * @template V
* @param {Array<V>} array * @param {Array<V>} array
* @param {import('#client').EachState} state * @param {EachState} state
* @param {Element | Comment | Text} anchor * @param {Element | Comment | Text} anchor
* @param {(anchor: Node, item: import('#client').MaybeSource<V>, index: number | import('#client').Source<number>) => void} render_fn * @param {(anchor: Node, item: MaybeSource<V>, index: number | Source<number>) => void} render_fn
* @param {number} flags * @param {number} flags
* @param {(value: V, index: number) => any} get_key * @param {(value: V, index: number) => any} get_key
* @returns {void} * @returns {void}
@ -255,19 +255,19 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
var first = state.first; var first = state.first;
var current = first; var current = first;
/** @type {Set<import('#client').EachItem>} */ /** @type {Set<EachItem>} */
var seen = new Set(); var seen = new Set();
/** @type {import('#client').EachItem | null} */ /** @type {EachItem | null} */
var prev = null; var prev = null;
/** @type {Set<import('#client').EachItem>} */ /** @type {Set<EachItem>} */
var to_animate = new Set(); var to_animate = new Set();
/** @type {import('#client').EachItem[]} */ /** @type {EachItem[]} */
var matched = []; var matched = [];
/** @type {import('#client').EachItem[]} */ /** @type {EachItem[]} */
var stashed = []; var stashed = [];
/** @type {V} */ /** @type {V} */
@ -276,7 +276,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
/** @type {any} */ /** @type {any} */
var key; var key;
/** @type {import('#client').EachItem | undefined} */ /** @type {EachItem | undefined} */
var item; var item;
/** @type {number} */ /** @type {number} */
@ -301,9 +301,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
item = items.get(key); item = items.get(key);
if (item === undefined) { if (item === undefined) {
var child_anchor = current var child_anchor = current ? /** @type {EffectNodes} */ (current.e.nodes).start : anchor;
? /** @type {import('#client').EffectNodes} */ (current.e.nodes).start
: anchor;
prev = create_item( prev = create_item(
child_anchor, child_anchor,
@ -436,12 +434,12 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
}); });
} }
/** @type {import('#client').Effect} */ (current_effect).first = state.first && state.first.e; /** @type {Effect} */ (current_effect).first = state.first && state.first.e;
/** @type {import('#client').Effect} */ (current_effect).last = prev && prev.e; /** @type {Effect} */ (current_effect).last = prev && prev.e;
} }
/** /**
* @param {import('#client').EachItem} item * @param {EachItem} item
* @param {any} value * @param {any} value
* @param {number} index * @param {number} index
* @param {number} type * @param {number} type
@ -453,7 +451,7 @@ function update_item(item, value, index, type) {
} }
if ((type & EACH_INDEX_REACTIVE) !== 0) { if ((type & EACH_INDEX_REACTIVE) !== 0) {
set(/** @type {import('#client').Value<number>} */ (item.i), index); set(/** @type {Value<number>} */ (item.i), index);
} else { } else {
item.i = index; item.i = index;
} }
@ -462,15 +460,15 @@ function update_item(item, value, index, type) {
/** /**
* @template V * @template V
* @param {Node} anchor * @param {Node} anchor
* @param {import('#client').EachState} state * @param {EachState} state
* @param {import('#client').EachItem | null} prev * @param {EachItem | null} prev
* @param {import('#client').EachItem | null} next * @param {EachItem | null} next
* @param {V} value * @param {V} value
* @param {unknown} key * @param {unknown} key
* @param {number} index * @param {number} index
* @param {(anchor: Node, item: V | import('#client').Source<V>, index: number | import('#client').Value<number>) => void} render_fn * @param {(anchor: Node, item: V | Source<V>, index: number | Value<number>) => void} render_fn
* @param {number} flags * @param {number} flags
* @returns {import('#client').EachItem} * @returns {EachItem}
*/ */
function create_item(anchor, state, prev, next, value, key, index, render_fn, flags) { function create_item(anchor, state, prev, next, value, key, index, render_fn, flags) {
var previous_each_item = current_each_item; var previous_each_item = current_each_item;
@ -482,7 +480,7 @@ function create_item(anchor, state, prev, next, value, key, index, render_fn, fl
var v = reactive ? (mutable ? mutable_source(value) : source(value)) : value; var v = reactive ? (mutable ? mutable_source(value) : source(value)) : value;
var i = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index); var i = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index);
/** @type {import('#client').EachItem} */ /** @type {EachItem} */
var item = { var item = {
i, i,
v, v,
@ -519,29 +517,27 @@ function create_item(anchor, state, prev, next, value, key, index, render_fn, fl
} }
/** /**
* @param {import('#client').EachItem} item * @param {EachItem} item
* @param {import('#client').EachItem | null} next * @param {EachItem | null} next
* @param {Text | Element | Comment} anchor * @param {Text | Element | Comment} anchor
*/ */
function move(item, next, anchor) { function move(item, next, anchor) {
var end = item.next var end = item.next ? /** @type {EffectNodes} */ (item.next.e.nodes).start : anchor;
? /** @type {import('#client').EffectNodes} */ (item.next.e.nodes).start
: anchor;
var dest = next ? /** @type {import('#client').EffectNodes} */ (next.e.nodes).start : anchor; var dest = next ? /** @type {EffectNodes} */ (next.e.nodes).start : anchor;
var node = /** @type {import('#client').EffectNodes} */ (item.e.nodes).start; var node = /** @type {EffectNodes} */ (item.e.nodes).start;
while (node !== end) { while (node !== end) {
var next_node = /** @type {import('#client').TemplateNode} */ (node.nextSibling); var next_node = /** @type {TemplateNode} */ (node.nextSibling);
dest.before(node); dest.before(node);
node = next_node; node = next_node;
} }
} }
/** /**
* @param {import('#client').EachState} state * @param {EachState} state
* @param {import('#client').EachItem | null} prev * @param {EachItem | null} prev
* @param {import('#client').EachItem | null} next * @param {EachItem | null} next
*/ */
function link(state, prev, next) { function link(state, prev, next) {
if (prev === null) { if (prev === null) {

31
packages/svelte/src/internal/client/proxy.js
Unescape View File

@ -1,3 +1,4 @@
/** @import { ProxyMetadata, ProxyStateObject, Source } from '#client' */
import { DEV } from 'esm-env'; import { DEV } from 'esm-env';
import { get, current_component_context, untrack, current_effect } from './runtime.js'; import { get, current_component_context, untrack, current_effect } from './runtime.js';
import { import {
@ -18,9 +19,9 @@ import * as e from './errors.js';
/** /**
* @template T * @template T
* @param {T} value * @param {T} value
* @param {import('#client').ProxyMetadata | null} [parent] * @param {ProxyMetadata | null} [parent]
* @param {import('#client').Source<T>} [prev] dev mode only * @param {Source<T>} [prev] dev mode only
* @returns {import('#client').ProxyStateObject<T> | T} * @returns {ProxyStateObject<T> | T}
*/ */
export function proxy(value, parent = null, prev) { export function proxy(value, parent = null, prev) {
if ( if (
@ -31,7 +32,7 @@ export function proxy(value, parent = null, prev) {
) { ) {
// If we have an existing proxy, return it... // If we have an existing proxy, return it...
if (STATE_SYMBOL in value) { if (STATE_SYMBOL in value) {
const metadata = /** @type {import('#client').ProxyMetadata<T>} */ (value[STATE_SYMBOL]); const metadata = /** @type {ProxyMetadata<T>} */ (value[STATE_SYMBOL]);
// ...unless the proxy belonged to a different object, because // ...unless the proxy belonged to a different object, because
// someone copied the state symbol using `Reflect.ownKeys(...)` // someone copied the state symbol using `Reflect.ownKeys(...)`
@ -53,7 +54,7 @@ export function proxy(value, parent = null, prev) {
const proxy = new Proxy(value, state_proxy_handler); const proxy = new Proxy(value, state_proxy_handler);
define_property(value, STATE_SYMBOL, { define_property(value, STATE_SYMBOL, {
value: /** @type {import('#client').ProxyMetadata} */ ({ value: /** @type {ProxyMetadata} */ ({
s: new Map(), s: new Map(),
v: source(0), v: source(0),
a: is_array(value), a: is_array(value),
@ -94,18 +95,18 @@ export function proxy(value, parent = null, prev) {
} }
/** /**
* @param {import('#client').Source<number>} signal * @param {Source<number>} signal
* @param {1 | -1} [d] * @param {1 | -1} [d]
*/ */
function update_version(signal, d = 1) { function update_version(signal, d = 1) {
set(signal, signal.v + d); set(signal, signal.v + d);
} }
/** @type {ProxyHandler<import('#client').ProxyStateObject<any>>} */ /** @type {ProxyHandler<ProxyStateObject<any>>} */
const state_proxy_handler = { const state_proxy_handler = {
defineProperty(target, prop, descriptor) { defineProperty(target, prop, descriptor) {
if (descriptor.value) { if (descriptor.value) {
/** @type {import('#client').ProxyMetadata} */ /** @type {ProxyMetadata} */
const metadata = target[STATE_SYMBOL]; const metadata = target[STATE_SYMBOL];
const s = metadata.s.get(prop); const s = metadata.s.get(prop);
@ -116,7 +117,7 @@ const state_proxy_handler = {
}, },
deleteProperty(target, prop) { deleteProperty(target, prop) {
/** @type {import('#client').ProxyMetadata} */ /** @type {ProxyMetadata} */
const metadata = target[STATE_SYMBOL]; const metadata = target[STATE_SYMBOL];
const s = metadata.s.get(prop); const s = metadata.s.get(prop);
const is_array = metadata.a; const is_array = metadata.a;
@ -149,7 +150,7 @@ const state_proxy_handler = {
return Reflect.get(target, STATE_SYMBOL); return Reflect.get(target, STATE_SYMBOL);
} }
/** @type {import('#client').ProxyMetadata} */ /** @type {ProxyMetadata} */
const metadata = target[STATE_SYMBOL]; const metadata = target[STATE_SYMBOL];
let s = metadata.s.get(prop); let s = metadata.s.get(prop);
@ -170,7 +171,7 @@ const state_proxy_handler = {
getOwnPropertyDescriptor(target, prop) { getOwnPropertyDescriptor(target, prop) {
const descriptor = Reflect.getOwnPropertyDescriptor(target, prop); const descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
if (descriptor && 'value' in descriptor) { if (descriptor && 'value' in descriptor) {
/** @type {import('#client').ProxyMetadata} */ /** @type {ProxyMetadata} */
const metadata = target[STATE_SYMBOL]; const metadata = target[STATE_SYMBOL];
const s = metadata.s.get(prop); const s = metadata.s.get(prop);
@ -186,7 +187,7 @@ const state_proxy_handler = {
if (prop === STATE_SYMBOL) { if (prop === STATE_SYMBOL) {
return true; return true;
} }
/** @type {import('#client').ProxyMetadata} */ /** @type {ProxyMetadata} */
const metadata = target[STATE_SYMBOL]; const metadata = target[STATE_SYMBOL];
const has = Reflect.has(target, prop); const has = Reflect.has(target, prop);
@ -208,7 +209,7 @@ const state_proxy_handler = {
}, },
set(target, prop, value, receiver) { set(target, prop, value, receiver) {
/** @type {import('#client').ProxyMetadata} */ /** @type {ProxyMetadata} */
const metadata = target[STATE_SYMBOL]; const metadata = target[STATE_SYMBOL];
let s = metadata.s.get(prop); let s = metadata.s.get(prop);
// If we haven't yet created a source for this property, we need to ensure // If we haven't yet created a source for this property, we need to ensure
@ -227,7 +228,7 @@ const state_proxy_handler = {
const not_has = !(prop in target); const not_has = !(prop in target);
if (DEV) { if (DEV) {
/** @type {import('#client').ProxyMetadata | undefined} */ /** @type {ProxyMetadata | undefined} */
const prop_metadata = value?.[STATE_SYMBOL]; const prop_metadata = value?.[STATE_SYMBOL];
if (prop_metadata && prop_metadata?.parent !== metadata) { if (prop_metadata && prop_metadata?.parent !== metadata) {
widen_ownership(metadata, prop_metadata); widen_ownership(metadata, prop_metadata);
@ -271,7 +272,7 @@ const state_proxy_handler = {
}, },
ownKeys(target) { ownKeys(target) {
/** @type {import('#client').ProxyMetadata} */ /** @type {ProxyMetadata} */
const metadata = target[STATE_SYMBOL]; const metadata = target[STATE_SYMBOL];
get(metadata.v); get(metadata.v);

20
packages/svelte/src/internal/client/render.js
Unescape View File

@ -1,3 +1,5 @@
/** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
/** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */
import { DEV } from 'esm-env'; import { DEV } from 'esm-env';
import { clear_text_content, empty, init_operations } from './dom/operations.js'; import { clear_text_content, empty, init_operations } from './dom/operations.js';
import { import {
@ -59,7 +61,7 @@ export function set_text(text, value) {
* *
* @template {Record<string, any>} Props * @template {Record<string, any>} Props
* @template {Record<string, any>} Exports * @template {Record<string, any>} Exports
* @param {import('../../index.js').ComponentType<import('../../index.js').SvelteComponent<Props>> | import('../../index.js').Component<Props, Exports, any>} component * @param {ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>} component
* @param {{} extends Props ? { * @param {{} extends Props ? {
* target: Document | Element | ShadowRoot; * target: Document | Element | ShadowRoot;
* anchor?: Node; * anchor?: Node;
@ -87,7 +89,7 @@ export function mount(component, options) {
* *
* @template {Record<string, any>} Props * @template {Record<string, any>} Props
* @template {Record<string, any>} Exports * @template {Record<string, any>} Exports
* @param {import('../../index.js').ComponentType<import('../../index.js').SvelteComponent<Props>> | import('../../index.js').Component<Props, Exports, any>} component * @param {ComponentType<SvelteComponent<Props>> | Component<Props, Exports, any>} component
* @param {{} extends Props ? { * @param {{} extends Props ? {
* target: Document | Element | ShadowRoot; * target: Document | Element | ShadowRoot;
* props?: Props; * props?: Props;
@ -112,12 +114,12 @@ export function hydrate(component, options) {
const previous_hydrate_node = hydrate_node; const previous_hydrate_node = hydrate_node;
try { try {
var anchor = /** @type {import('#client').TemplateNode} */ (target.firstChild); var anchor = /** @type {TemplateNode} */ (target.firstChild);
while ( while (
anchor && anchor &&
(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START) (anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
) { ) {
anchor = /** @type {import('#client').TemplateNode} */ (anchor.nextSibling); anchor = /** @type {TemplateNode} */ (anchor.nextSibling);
} }
if (!anchor) { if (!anchor) {
@ -171,7 +173,7 @@ const document_listeners = new Map();
/** /**
* @template {Record<string, any>} Exports * @template {Record<string, any>} Exports
* @param {import('../../index.js').ComponentType<import('../../index.js').SvelteComponent<any>> | import('../../index.js').Component<any>} Component * @param {ComponentType<SvelteComponent<any>> | Component<any>} Component
* @param {{ * @param {{
* target: Document | Element | ShadowRoot; * target: Document | Element | ShadowRoot;
* anchor: Node; * anchor: Node;
@ -226,7 +228,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
branch(() => { branch(() => {
if (context) { if (context) {
push({}); push({});
var ctx = /** @type {import('#client').ComponentContext} */ (current_component_context); var ctx = /** @type {ComponentContext} */ (current_component_context);
ctx.c = context; ctx.c = context;
} }
@ -236,7 +238,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
} }
if (hydrating) { if (hydrating) {
assign_nodes(/** @type {import('#client').TemplateNode} */ (anchor), null); assign_nodes(/** @type {TemplateNode} */ (anchor), null);
} }
should_intro = intro; should_intro = intro;
@ -245,9 +247,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
should_intro = true; should_intro = true;
if (hydrating) { if (hydrating) {
/** @type {import('#client').Effect & { nodes: import('#client').EffectNodes }} */ ( /** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = hydrate_node;
current_effect
).nodes.end = hydrate_node;
} }
if (context) { if (context) {

94
packages/svelte/src/internal/client/runtime.js
Unescape View File

@ -1,3 +1,4 @@
/** @import { ComponentContext, Derived, Effect, Reaction, Signal, Source, Value } from '#client' */
import { DEV } from 'esm-env'; import { DEV } from 'esm-env';
import { define_property, get_descriptors, get_prototype_of } from '../shared/utils.js'; import { define_property, get_descriptors, get_prototype_of } from '../shared/utils.js';
import { import {
@ -57,24 +58,24 @@ export function set_is_destroying_effect(value) {
// Handle effect queues // Handle effect queues
/** @type {import('#client').Effect[]} */ /** @type {Effect[]} */
let current_queued_root_effects = []; let current_queued_root_effects = [];
let flush_count = 0; let flush_count = 0;
// Handle signal reactivity tree dependencies and reactions // Handle signal reactivity tree dependencies and reactions
/** @type {null | import('#client').Reaction} */ /** @type {null | Reaction} */
export let current_reaction = null; export let current_reaction = null;
/** @param {null | import('#client').Reaction} reaction */ /** @param {null | Reaction} reaction */
export function set_current_reaction(reaction) { export function set_current_reaction(reaction) {
current_reaction = reaction; current_reaction = reaction;
} }
/** @type {null | import('#client').Effect} */ /** @type {null | Effect} */
export let current_effect = null; export let current_effect = null;
/** @param {null | import('#client').Effect} effect */ /** @param {null | Effect} effect */
export function set_current_effect(effect) { export function set_current_effect(effect) {
current_effect = effect; current_effect = effect;
} }
@ -83,7 +84,7 @@ export function set_current_effect(effect) {
* The dependencies of the reaction that is currently being executed. In many cases, * The dependencies of the reaction that is currently being executed. In many cases,
* the dependencies are unchanged between runs, and so this will be `null` unless * the dependencies are unchanged between runs, and so this will be `null` unless
* and until a new dependency is accessed — we track this via `skipped_deps` * and until a new dependency is accessed — we track this via `skipped_deps`
* @type {null | import('#client').Value[]} * @type {null | Value[]}
*/ */
export let new_deps = null; export let new_deps = null;
@ -92,11 +93,11 @@ let skipped_deps = 0;
/** /**
* Tracks writes that the effect it's executed in doesn't listen to yet, * Tracks writes that the effect it's executed in doesn't listen to yet,
* so that the dependency can be added to the effect later on if it then reads it * so that the dependency can be added to the effect later on if it then reads it
* @type {null | import('#client').Source[]} * @type {null | Source[]}
*/ */
export let current_untracked_writes = null; export let current_untracked_writes = null;
/** @param {null | import('#client').Source[]} value */ /** @param {null | Source[]} value */
export function set_current_untracked_writes(value) { export function set_current_untracked_writes(value) {
current_untracked_writes = value; current_untracked_writes = value;
} }
@ -112,10 +113,10 @@ export let is_signals_recorded = false;
let captured_signals = new Set(); let captured_signals = new Set();
// Handling runtime component context // Handling runtime component context
/** @type {import('#client').ComponentContext | null} */ /** @type {ComponentContext | null} */
export let current_component_context = null; export let current_component_context = null;
/** @param {import('#client').ComponentContext | null} context */ /** @param {ComponentContext | null} context */
export function set_current_component_context(context) { export function set_current_component_context(context) {
current_component_context = context; current_component_context = context;
} }
@ -128,11 +129,11 @@ export function set_current_component_context(context) {
* <Bar /> <!-- context == Foo.svelte, function == App.svelte --> * <Bar /> <!-- context == Foo.svelte, function == App.svelte -->
* </Foo> * </Foo>
* ``` * ```
* @type {import('#client').ComponentContext['function']} * @type {ComponentContext['function']}
*/ */
export let dev_current_component_function = null; export let dev_current_component_function = null;
/** @param {import('#client').ComponentContext['function']} fn */ /** @param {ComponentContext['function']} fn */
export function set_dev_current_component_function(fn) { export function set_dev_current_component_function(fn) {
dev_current_component_function = fn; dev_current_component_function = fn;
} }
@ -149,7 +150,7 @@ export function is_runes() {
/** /**
* Determines whether a derived or effect is dirty. * Determines whether a derived or effect is dirty.
* If it is MAYBE_DIRTY, will set the status to CLEAN * If it is MAYBE_DIRTY, will set the status to CLEAN
* @param {import('#client').Reaction} reaction * @param {Reaction} reaction
* @returns {boolean} * @returns {boolean}
*/ */
export function check_dirtiness(reaction) { export function check_dirtiness(reaction) {
@ -177,8 +178,8 @@ export function check_dirtiness(reaction) {
for (i = 0; i < dependencies.length; i++) { for (i = 0; i < dependencies.length; i++) {
var dependency = dependencies[i]; var dependency = dependencies[i];
if (check_dirtiness(/** @type {import('#client').Derived} */ (dependency))) { if (check_dirtiness(/** @type {Derived} */ (dependency))) {
update_derived(/** @type {import('#client').Derived} */ (dependency)); update_derived(/** @type {Derived} */ (dependency));
} }
if (dependency.version > reaction.version) { if (dependency.version > reaction.version) {
@ -205,8 +206,8 @@ export function check_dirtiness(reaction) {
/** /**
* @param {Error} error * @param {Error} error
* @param {import("#client").Effect} effect * @param {Effect} effect
* @param {import("#client").ComponentContext | null} component_context * @param {ComponentContext | null} component_context
*/ */
function handle_error(error, effect, component_context) { function handle_error(error, effect, component_context) {
// Given we don't yet have error boundaries, we will just always throw. // Given we don't yet have error boundaries, we will just always throw.
@ -222,7 +223,7 @@ function handle_error(error, effect, component_context) {
component_stack.push(effect_name); component_stack.push(effect_name);
} }
/** @type {import("#client").ComponentContext | null} */ /** @type {ComponentContext | null} */
let current_context = component_context; let current_context = component_context;
while (current_context !== null) { while (current_context !== null) {
@ -266,7 +267,7 @@ function handle_error(error, effect, component_context) {
/** /**
* @template V * @template V
* @param {import('#client').Reaction} reaction * @param {Reaction} reaction
* @returns {V} * @returns {V}
*/ */
export function update_reaction(reaction) { export function update_reaction(reaction) {
@ -276,7 +277,7 @@ export function update_reaction(reaction) {
var previous_reaction = current_reaction; var previous_reaction = current_reaction;
var previous_skip_reaction = current_skip_reaction; var previous_skip_reaction = current_skip_reaction;
new_deps = /** @type {null | import('#client').Value[]} */ (null); new_deps = /** @type {null | Value[]} */ (null);
skipped_deps = 0; skipped_deps = 0;
current_untracked_writes = null; current_untracked_writes = null;
current_reaction = (reaction.f & (BRANCH_EFFECT | ROOT_EFFECT)) === 0 ? reaction : null; current_reaction = (reaction.f & (BRANCH_EFFECT | ROOT_EFFECT)) === 0 ? reaction : null;
@ -349,8 +350,8 @@ export function update_reaction(reaction) {
/** /**
* @template V * @template V
* @param {import('#client').Reaction} signal * @param {Reaction} signal
* @param {import('#client').Value<V>} dependency * @param {Value<V>} dependency
* @returns {void} * @returns {void}
*/ */
function remove_reaction(signal, dependency) { function remove_reaction(signal, dependency) {
@ -378,12 +379,12 @@ function remove_reaction(signal, dependency) {
if ((dependency.f & (UNOWNED | DISCONNECTED)) === 0) { if ((dependency.f & (UNOWNED | DISCONNECTED)) === 0) {
dependency.f ^= DISCONNECTED; dependency.f ^= DISCONNECTED;
} }
remove_reactions(/** @type {import('#client').Derived} **/ (dependency), 0); remove_reactions(/** @type {Derived} **/ (dependency), 0);
} }
} }
/** /**
* @param {import('#client').Reaction} signal * @param {Reaction} signal
* @param {number} start_index * @param {number} start_index
* @returns {void} * @returns {void}
*/ */
@ -408,7 +409,7 @@ export function remove_reactions(signal, start_index) {
} }
/** /**
* @param {import('#client').Reaction} signal * @param {Reaction} signal
* @param {boolean} remove_dom * @param {boolean} remove_dom
* @returns {void} * @returns {void}
*/ */
@ -424,7 +425,7 @@ export function destroy_effect_children(signal, remove_dom = false) {
} }
/** /**
* @param {import('#client').Effect} effect * @param {Effect} effect
* @returns {void} * @returns {void}
*/ */
export function update_effect(effect) { export function update_effect(effect) {
@ -480,7 +481,7 @@ function infinite_loop_guard() {
} }
/** /**
* @param {Array<import('#client').Effect>} root_effects * @param {Array<Effect>} root_effects
* @returns {void} * @returns {void}
*/ */
function flush_queued_root_effects(root_effects) { function flush_queued_root_effects(root_effects) {
@ -501,7 +502,7 @@ function flush_queued_root_effects(root_effects) {
if (effect.first === null && (effect.f & BRANCH_EFFECT) === 0) { if (effect.first === null && (effect.f & BRANCH_EFFECT) === 0) {
flush_queued_effects([effect]); flush_queued_effects([effect]);
} else { } else {
/** @type {import('#client').Effect[]} */ /** @type {Effect[]} */
var collected_effects = []; var collected_effects = [];
process_effects(effect, collected_effects); process_effects(effect, collected_effects);
@ -514,7 +515,7 @@ function flush_queued_root_effects(root_effects) {
} }
/** /**
* @param {Array<import('#client').Effect>} effects * @param {Array<Effect>} effects
* @returns {void} * @returns {void}
*/ */
function flush_queued_effects(effects) { function flush_queued_effects(effects) {
@ -559,7 +560,7 @@ function process_deferred() {
} }
/** /**
* @param {import('#client').Effect} signal * @param {Effect} signal
* @returns {void} * @returns {void}
*/ */
export function schedule_effect(signal) { export function schedule_effect(signal) {
@ -592,8 +593,8 @@ export function schedule_effect(signal) {
* bitwise flag passed in only. The collected effects array will be populated with all the user * bitwise flag passed in only. The collected effects array will be populated with all the user
* effects to be flushed. * effects to be flushed.
* *
* @param {import('#client').Effect} effect * @param {Effect} effect
* @param {import('#client').Effect[]} collected_effects * @param {Effect[]} collected_effects
* @returns {void} * @returns {void}
*/ */
function process_effects(effect, collected_effects) { function process_effects(effect, collected_effects) {
@ -679,7 +680,7 @@ export function flush_sync(fn) {
try { try {
infinite_loop_guard(); infinite_loop_guard();
/** @type {import('#client').Effect[]} */ /** @type {Effect[]} */
const root_effects = []; const root_effects = [];
current_scheduler_mode = FLUSH_SYNC; current_scheduler_mode = FLUSH_SYNC;
@ -717,7 +718,7 @@ export async function tick() {
/** /**
* @template V * @template V
* @param {import('#client').Value<V>} signal * @param {Value<V>} signal
* @returns {V} * @returns {V}
*/ */
export function get(signal) { export function get(signal) {
@ -765,7 +766,7 @@ export function get(signal) {
} }
if ((flags & DERIVED) !== 0) { if ((flags & DERIVED) !== 0) {
var derived = /** @type {import('#client').Derived} */ (signal); var derived = /** @type {Derived} */ (signal);
if (check_dirtiness(derived)) { if (check_dirtiness(derived)) {
update_derived(derived); update_derived(derived);
@ -801,7 +802,7 @@ export function invalidate_inner_signals(fn) {
for (signal of captured) { for (signal of captured) {
// Go one level up because derived signals created as part of props in legacy mode // Go one level up because derived signals created as part of props in legacy mode
if ((signal.f & LEGACY_DERIVED_PROP) !== 0) { if ((signal.f & LEGACY_DERIVED_PROP) !== 0) {
for (const dep of /** @type {import('#client').Derived} */ (signal).deps || []) { for (const dep of /** @type {Derived} */ (signal).deps || []) {
if ((dep.f & DERIVED) === 0) { if ((dep.f & DERIVED) === 0) {
mutate(dep, null /* doesnt matter */); mutate(dep, null /* doesnt matter */);
} }
@ -833,7 +834,7 @@ export function untrack(fn) {
const STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN); const STATUS_MASK = ~(DIRTY | MAYBE_DIRTY | CLEAN);
/** /**
* @param {import('#client').Signal} signal * @param {Signal} signal
* @param {number} status * @param {number} status
* @returns {void} * @returns {void}
*/ */
@ -843,14 +844,12 @@ export function set_signal_status(signal, status) {
/** /**
* @template V * @template V
* @param {V | import('#client').Value<V>} val * @param {V | Value<V>} val
* @returns {val is import('#client').Value<V>} * @returns {val is Value<V>}
*/ */
export function is_signal(val) { export function is_signal(val) {
return ( return (
typeof val === 'object' && typeof val === 'object' && val !== null && typeof (/** @type {Value<V>} */ (val).f) === 'number'
val !== null &&
typeof (/** @type {import('#client').Value<V>} */ (val).f) === 'number'
); );
} }
@ -868,8 +867,7 @@ export function getContext(key) {
const result = /** @type {T} */ (context_map.get(key)); const result = /** @type {T} */ (context_map.get(key));
if (DEV) { if (DEV) {
const fn = /** @type {import('#client').ComponentContext} */ (current_component_context) const fn = /** @type {ComponentContext} */ (current_component_context).function;
.function;
if (fn) { if (fn) {
add_owner(result, fn, true); add_owner(result, fn, true);
} }
@ -949,7 +947,7 @@ function get_or_init_context_map(name) {
} }
/** /**
* @param {import('#client').ComponentContext} component_context * @param {ComponentContext} component_context
* @returns {Map<unknown, unknown> | null} * @returns {Map<unknown, unknown> | null}
*/ */
function get_parent_context(component_context) { function get_parent_context(component_context) {
@ -965,7 +963,7 @@ function get_parent_context(component_context) {
} }
/** /**
* @param {import('#client').Value<number>} signal * @param {Value<number>} signal
* @param {1 | -1} [d] * @param {1 | -1} [d]
* @returns {number} * @returns {number}
*/ */
@ -976,7 +974,7 @@ export function update(signal, d = 1) {
} }
/** /**
* @param {import('#client').Value<number>} signal * @param {Value<number>} signal
* @param {1 | -1} [d] * @param {1 | -1} [d]
* @returns {number} * @returns {number}
*/ */
@ -1156,7 +1154,7 @@ export function deep_read(value, visited = new Set()) {
/** /**
* @template V * @template V
* @param {V | import('#client').Value<V>} value * @param {V | Value<V>} value
* @returns {V} * @returns {V}
*/ */
export function unwrap(value) { export function unwrap(value) {

4
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -373,8 +373,6 @@ declare module 'svelte' {
* Synchronously flushes any pending state changes and those that result from it. * Synchronously flushes any pending state changes and those that result from it.
* */ * */
export function flushSync(fn?: (() => void) | undefined): void; export function flushSync(fn?: (() => void) | undefined): void;
/** Anything except a function */
type NotFunction<T> = T extends Function ? never : T;
/** /**
* Create a snippet programmatically * Create a snippet programmatically
* */ * */
@ -382,6 +380,8 @@ declare module 'svelte' {
render: () => string; render: () => string;
setup?: (element: Element) => void; setup?: (element: Element) => void;
}): Snippet<Params>; }): Snippet<Params>;
/** Anything except a function */
type NotFunction<T> = T extends Function ? never : T;
/** /**
* Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component. * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component.
* Transitions will play during the initial render unless the `intro` option is set to `false`. * Transitions will play during the initial render unless the `intro` option is set to `false`.

Write Preview
Loading…
Cancel
Save