@depup/svelte 5.53.3-depup.0

package/src/compiler/phases/3-transform/client/visitors/shared/element.js

@@ -0,0 +1,263 @@
+/** @import { Expression, Identifier, ObjectExpression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import { escape_html } from '../../../../../../escaping.js';
+import { normalize_attribute } from '../../../../../../utils.js';
+import { is_ignored } from '../../../../../state.js';
+import { is_event_attribute } from '../../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
+import { build_expression, build_template_chunk, Memoizer } from './utils.js';
+import { ExpressionMetadata } from '../../../../nodes.js';
+
+/**
+ * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
+ * @param {AST.ClassDirective[]} class_directives
+ * @param {AST.StyleDirective[]} style_directives
+ * @param {ComponentContext} context
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Identifier} element_id
+ * @param {boolean} [should_remove_defaults]
+ */
+export function build_attribute_effect(
+	attributes,
+	class_directives,
+	style_directives,
+	context,
+	element,
+	element_id,
+	should_remove_defaults = false
+) {
+	/** @type {ObjectExpression['properties']} */
+	const values = [];
+
+	const memoizer = new Memoizer();
+
+	for (const attribute of attributes) {
+		if (attribute.type === 'Attribute') {
+			const { value } = build_attribute_value(attribute.value, context, (value, metadata) =>
+				memoizer.add(value, metadata)
+			);
+
+			if (
+				is_event_attribute(attribute) &&
+				(value.type === 'ArrowFunctionExpression' || value.type === 'FunctionExpression')
+			) {
+				// Give the event handler a stable ID so it isn't removed and readded on every update
+				const id = context.state.scope.generate('event_handler');
+				context.state.init.push(b.var(id, value));
+				values.push(b.init(attribute.name, b.id(id)));
+			} else {
+				values.push(b.init(attribute.name, value));
+			}
+		} else {
+			let value = /** @type {Expression} */ (context.visit(attribute));
+
+			value = memoizer.add(value, attribute.metadata.expression);
+
+			values.push(b.spread(value));
+		}
+	}
+
+	if (class_directives.length) {
+		values.push(
+			b.prop(
+				'init',
+				b.array([b.id('$.CLASS')]),
+				build_class_directives_object(class_directives, context, memoizer)
+			)
+		);
+	}
+
+	if (style_directives.length) {
+		values.push(
+			b.prop(
+				'init',
+				b.array([b.id('$.STYLE')]),
+				build_style_directives_object(style_directives, context, memoizer)
+			)
+		);
+	}
+
+	const ids = memoizer.apply();
+
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.attribute_effect',
+				element_id,
+				b.arrow(ids, b.object(values)),
+				memoizer.sync_values(),
+				memoizer.async_values(),
+				memoizer.blockers(),
+				element.metadata.scoped &&
+					context.state.analysis.css.hash !== '' &&
+					b.literal(context.state.analysis.css.hash),
+				should_remove_defaults && b.true,
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		)
+	);
+}
+
+/**
+ * @param {AST.Attribute['value']} value
+ * @param {ComponentContext} context
+ * @param {(value: Expression, metadata: ExpressionMetadata) => Expression} memoize
+ * @returns {{ value: Expression, has_state: boolean }}
+ */
+export function build_attribute_value(value, context, memoize = (value) => value) {
+	if (value === true) {
+		return { value: b.true, has_state: false };
+	}
+
+	if (!Array.isArray(value) || value.length === 1) {
+		const chunk = Array.isArray(value) ? value[0] : value;
+
+		if (chunk.type === 'Text') {
+			return { value: b.literal(chunk.data), has_state: false };
+		}
+
+		let expression = build_expression(context, chunk.expression, chunk.metadata.expression);
+
+		return {
+			value: memoize(expression, chunk.metadata.expression),
+			has_state: chunk.metadata.expression.has_state || chunk.metadata.expression.is_async()
+		};
+	}
+
+	return build_template_chunk(value, context, context.state, memoize);
+}
+
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {AST.Attribute} attribute
+ */
+export function get_attribute_name(element, attribute) {
+	if (!element.metadata.svg && !element.metadata.mathml) {
+		return normalize_attribute(attribute.name);
+	}
+
+	return attribute.name;
+}
+
+/**
+ * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {Identifier} node_id
+ * @param {AST.Attribute} attribute
+ * @param {AST.ClassDirective[]} class_directives
+ * @param {ComponentContext} context
+ * @param {boolean} is_html
+ */
+export function build_set_class(element, node_id, attribute, class_directives, context, is_html) {
+	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) => {
+		if (attribute.metadata.needs_clsx) {
+			value = b.call('$.clsx', value);
+		}
+
+		return context.state.memoizer.add(value, metadata);
+	});
+
+	/** @type {Identifier | undefined} */
+	let previous_id;
+
+	/** @type {ObjectExpression | Identifier | undefined} */
+	let prev;
+
+	/** @type {Expression | undefined} */
+	let next;
+
+	if (class_directives.length) {
+		next = build_class_directives_object(class_directives, context);
+		has_state ||= class_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.is_async()
+		);
+
+		if (has_state) {
+			previous_id = b.id(context.state.scope.generate('classes'));
+			context.state.init.push(b.declaration('let', [b.declarator(previous_id)]));
+			prev = previous_id;
+		} else {
+			prev = b.object([]);
+		}
+	}
+
+	/** @type {Expression | undefined} */
+	let css_hash;
+
+	if (element.metadata.scoped && context.state.analysis.css.hash) {
+		if (value.type === 'Literal' && (value.value === '' || value.value === null)) {
+			value = b.literal(context.state.analysis.css.hash);
+		} else if (value.type === 'Literal' && typeof value.value === 'string') {
+			value = b.literal(escape_html(value.value, true) + ' ' + context.state.analysis.css.hash);
+		} else {
+			css_hash = b.literal(context.state.analysis.css.hash);
+		}
+	}
+
+	if (!css_hash && next) {
+		css_hash = b.null;
+	}
+
+	/** @type {Expression} */
+	let set_class = b.call(
+		'$.set_class',
+		node_id,
+		is_html ? b.literal(1) : b.literal(0),
+		value,
+		css_hash,
+		prev,
+		next
+	);
+
+	if (previous_id) {
+		set_class = b.assignment('=', previous_id, set_class);
+	}
+
+	(has_state ? context.state.update : context.state.init).push(b.stmt(set_class));
+}
+
+/**
+ * @param {Identifier} node_id
+ * @param {AST.Attribute} attribute
+ * @param {AST.StyleDirective[]} style_directives
+ * @param {ComponentContext} context
+ */
+export function build_set_style(node_id, attribute, style_directives, context) {
+	let { value, has_state } = build_attribute_value(attribute.value, context, (value, metadata) =>
+		context.state.memoizer.add(value, metadata)
+	);
+
+	/** @type {Identifier | undefined} */
+	let previous_id;
+
+	/** @type {ObjectExpression | Identifier | undefined} */
+	let prev;
+
+	/** @type {Expression | undefined} */
+	let next;
+
+	if (style_directives.length) {
+		next = build_style_directives_object(style_directives, context);
+		has_state ||= style_directives.some(
+			(d) => d.metadata.expression.has_state || d.metadata.expression.is_async()
+		);
+
+		if (has_state) {
+			previous_id = b.id(context.state.scope.generate('styles'));
+			context.state.init.push(b.declaration('let', [b.declarator(previous_id)]));
+			prev = previous_id;
+		} else {
+			prev = b.object([]);
+		}
+	}
+
+	/** @type {Expression} */
+	let set_style = b.call('$.set_style', node_id, value, prev, next);
+
+	if (previous_id) {
+		set_style = b.assignment('=', previous_id, set_style);
+	}
+
+	(has_state ? context.state.update : context.state.init).push(b.stmt(set_style));
+}

package/src/compiler/phases/3-transform/client/visitors/shared/events.js

@@ -0,0 +1,180 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import { is_capture_event, is_passive_event } from '../../../../../../utils.js';
+import { dev, locator } from '../../../../../state.js';
+import * as b from '#compiler/builders';
+import { ExpressionMetadata } from '../../../../nodes.js';
+
+/**
+ * @param {AST.Attribute} node
+ * @param {ComponentContext} context
+ */
+export function visit_event_attribute(node, context) {
+	let capture = false;
+
+	let event_name = node.name.slice(2);
+	if (is_capture_event(event_name)) {
+		event_name = event_name.slice(0, -7);
+		capture = true;
+	}
+
+	// we still need to support the weird `onclick="{() => {...}}" form
+	const tag = Array.isArray(node.value)
+		? /** @type {AST.ExpressionTag} */ (node.value[0])
+		: /** @type {AST.ExpressionTag} */ (node.value);
+
+	let handler = build_event_handler(tag.expression, tag.metadata.expression, context);
+
+	if (node.metadata.delegated) {
+		context.state.events.add(event_name);
+	}
+
+	const statement = b.stmt(
+		build_event(
+			context,
+			event_name,
+			handler,
+			capture,
+			is_passive_event(event_name) ? true : undefined,
+			node.metadata.delegated
+		)
+	);
+
+	const type = /** @type {AST.SvelteNode} */ (context.path.at(-1)).type;
+
+	if (type === 'SvelteDocument' || type === 'SvelteWindow' || type === 'SvelteBody') {
+		// These nodes are above the component tree, and its events should run parent first
+		context.state.init.push(statement);
+	} else {
+		context.state.after_update.push(statement);
+	}
+}
+
+/**
+ * Creates a `$.event(...)` call for non-delegated event handlers
+ * @param {ComponentContext} context
+ * @param {string} event_name
+ * @param {Expression} handler
+ * @param {boolean} capture
+ * @param {boolean | undefined} passive
+ * @param {boolean | undefined} delegated
+ */
+export function build_event(context, event_name, handler, capture, passive, delegated) {
+	let fn = handler;
+
+	if (dev && handler.type === 'ArrowFunctionExpression') {
+		// create a named function for better debugging
+		const name = context.state.scope.generate(event_name);
+
+		fn = b.function(
+			b.id(name),
+			handler.params,
+			handler.body.type === 'BlockStatement' ? handler.body : b.block([b.return(handler.body)]),
+			handler.async
+		);
+	}
+
+	return b.call(
+		delegated ? '$.delegated' : '$.event',
+		b.literal(event_name),
+		context.state.node,
+		fn,
+		capture && b.true,
+		passive === undefined ? undefined : b.literal(passive)
+	);
+}
+
+/**
+ * Creates an event handler
+ * @param {Expression | null} node
+ * @param {ExpressionMetadata} metadata
+ * @param {ComponentContext} context
+ * @returns {Expression}
+ */
+export function build_event_handler(node, metadata, context) {
+	if (node === null) {
+		// bubble event
+		return b.function(
+			null,
+			[b.id('$$arg')],
+			b.block([b.stmt(b.call('$.bubble_event.call', b.this, b.id('$$props'), b.id('$$arg')))])
+		);
+	}
+
+	let handler = /** @type {Expression} */ (context.visit(node));
+
+	// inline handler
+	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
+		return handler;
+	}
+
+	// function declared in the script
+	if (handler.type === 'Identifier') {
+		const binding = context.state.scope.get(handler.name);
+
+		if (binding?.is_function()) {
+			return handler;
+		}
+
+		// local variable can be assigned directly
+		// except in dev mode where when need $.apply()
+		// in order to handle warnings.
+		if (!dev && binding?.declaration_kind !== 'import') {
+			return handler;
+		}
+	}
+
+	if (metadata.has_call) {
+		// memoize where necessary
+		const id = b.id(context.state.scope.generate('event_handler'));
+
+		context.state.init.push(b.var(id, b.call('$.derived', b.thunk(handler))));
+		handler = b.call('$.get', id);
+	}
+
+	// wrap the handler in a function, so the expression is re-evaluated for each event
+	let call = b.call(b.member(handler, 'apply', false, true), b.this, b.id('$$args'));
+
+	if (dev) {
+		const loc = locator(/** @type {number} */ (node.start));
+
+		const remove_parens =
+			node.type === 'CallExpression' &&
+			node.arguments.length === 0 &&
+			node.callee.type === 'Identifier';
+
+		call = b.call(
+			'$.apply',
+			b.thunk(handler),
+			b.this,
+			b.id('$$args'),
+			b.id(context.state.analysis.name),
+			b.array([b.literal(loc.line), b.literal(loc.column)]),
+			has_side_effects(node) && b.true,
+			remove_parens && b.true
+		);
+	}
+
+	return b.function(null, [b.rest(b.id('$$args'))], b.block([b.stmt(call)]));
+}
+
+/**
+ * @param {Expression} node
+ */
+function has_side_effects(node) {
+	if (
+		node.type === 'CallExpression' ||
+		node.type === 'NewExpression' ||
+		node.type === 'AssignmentExpression' ||
+		node.type === 'UpdateExpression'
+	) {
+		return true;
+	}
+
+	if (node.type === 'SequenceExpression') {
+		return node.expressions.some(has_side_effects);
+	}
+
+	return false;
+}

package/src/compiler/phases/3-transform/client/visitors/shared/fragment.js

@@ -0,0 +1,185 @@
+/** @import { Expression, Identifier, SourceLocation } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import { cannot_be_set_statically } from '../../../../../../utils.js';
+import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
+import * as b from '#compiler/builders';
+import { is_custom_element_node } from '../../../../nodes.js';
+import { build_template_chunk } from './utils.js';
+
+/**
+ * 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
+ * corresponding template node references these updates are applied to.
+ * @param {AST.SvelteNode[]} nodes
+ * @param {(is_text: boolean) => Expression} initial
+ * @param {boolean} is_element
+ * @param {ComponentContext} context
+ */
+export function process_children(nodes, initial, is_element, context) {
+	const within_bound_contenteditable = context.state.metadata.bound_contenteditable;
+	let prev = initial;
+	let skipped = 0;
+
+	/** @typedef {Array<AST.Text | AST.ExpressionTag>} Sequence */
+	/** @type {Sequence} */
+	let sequence = [];
+
+	/** @param {boolean} is_text */
+	function get_node(is_text) {
+		if (skipped === 0) {
+			return prev(is_text);
+		}
+
+		return b.call(
+			'$.sibling',
+			prev(false),
+			(is_text || skipped !== 1) && b.literal(skipped),
+			is_text && b.true
+		);
+	}
+
+	/**
+	 * @param {boolean} is_text
+	 * @param {string} name
+	 * @param {SourceLocation | null} [loc]
+	 */
+	function flush_node(is_text, name, loc) {
+		const expression = get_node(is_text);
+		let id = expression;
+
+		if (id.type !== 'Identifier') {
+			id = b.id(context.state.scope.generate(name), loc);
+			context.state.init.push(b.var(id, expression));
+		}
+
+		prev = () => id;
+		skipped = 1; // the next node is `$.sibling(id)`
+
+		return id;
+	}
+
+	/**
+	 * @param {Sequence} sequence
+	 */
+	function flush_sequence(sequence) {
+		if (sequence.every((node) => node.type === 'Text')) {
+			skipped += 1;
+			context.state.template.push_text(sequence);
+			return;
+		}
+
+		context.state.template.push_text([{ type: 'Text', data: ' ', raw: ' ', start: -1, end: -1 }]);
+
+		const { has_state, value } = build_template_chunk(sequence, context);
+
+		// if this is a standalone `{expression}`, make sure we handle the case where
+		// no text node was created because the expression was empty during SSR
+		const is_text = sequence.length === 1;
+		const id = flush_node(is_text, 'text');
+
+		const update = b.stmt(b.call('$.set_text', id, value));
+
+		if (has_state && !within_bound_contenteditable) {
+			context.state.update.push(update);
+		} else {
+			context.state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
+		}
+	}
+
+	for (const node of nodes) {
+		if (node.type === 'Text' || node.type === 'ExpressionTag') {
+			sequence.push(node);
+		} else {
+			if (sequence.length > 0) {
+				flush_sequence(sequence);
+				sequence = [];
+			}
+
+			let child_state = context.state;
+
+			if (is_static_element(node)) {
+				skipped += 1;
+			} else if (
+				node.type === 'EachBlock' &&
+				nodes.length === 1 &&
+				is_element &&
+				// In case it's wrapped in async the async logic will want to skip sibling nodes up until the end, hence we cannot make this controlled
+				// TODO switch this around and instead optimize for elements with a single block child and not require extra comments (neither for async nor normally)
+				!node.metadata.expression.is_async()
+			) {
+				node.metadata.is_controlled = true;
+			} else {
+				const id = flush_node(
+					false,
+					node.type === 'RegularElement' ? node.name : 'node',
+					node.type === 'RegularElement' ? node.name_loc : null
+				);
+
+				child_state = { ...context.state, node: id };
+			}
+
+			context.visit(node, child_state);
+		}
+	}
+
+	if (sequence.length > 0) {
+		flush_sequence(sequence);
+	}
+
+	// if there are trailing static text nodes/elements,
+	// traverse to the last (n - 1) one when hydrating
+	if (skipped > 1) {
+		skipped -= 1;
+		context.state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
+	}
+}
+
+/**
+ * @param {AST.SvelteNode} node
+ */
+export function is_static_element(node) {
+	if (node.type !== 'RegularElement') return false;
+	if (node.fragment.metadata.dynamic) return false;
+	if (is_custom_element_node(node)) return false; // we're setting all attributes on custom elements through properties
+
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute') {
+			return false;
+		}
+
+		if (is_event_attribute(attribute)) {
+			return false;
+		}
+
+		if (cannot_be_set_statically(attribute.name)) {
+			return false;
+		}
+
+		if (attribute.name === 'dir') {
+			return false;
+		}
+
+		if (
+			['input', 'textarea'].includes(node.name) &&
+			['value', 'checked'].includes(attribute.name)
+		) {
+			return false;
+		}
+
+		if (node.name === 'option' && attribute.name === 'value') {
+			return false;
+		}
+
+		// We need to apply src and loading after appending the img to the DOM for lazy loading to work
+		if (node.name === 'img' && attribute.name === 'loading') {
+			return false;
+		}
+
+		if (attribute.value !== true && !is_text_attribute(attribute)) {
+			return false;
+		}
+	}
+
+	return true;
+}

package/src/compiler/phases/3-transform/client/visitors/shared/function.js

@@ -0,0 +1,17 @@
+/** @import { ArrowFunctionExpression, FunctionExpression, Node } from 'estree' */
+/** @import { ComponentContext } from '../../types' */
+
+/**
+ * @param {ArrowFunctionExpression | FunctionExpression} node
+ * @param {ComponentContext} context
+ */
+export const visit_function = (node, context) => {
+	let state = { ...context.state, in_constructor: false, in_derived: false };
+
+	if (node.type === 'FunctionExpression') {
+		const parent = /** @type {Node} */ (context.path.at(-1));
+		state.in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
+	}
+
+	context.next(state);
+};

package/src/compiler/phases/3-transform/client/visitors/shared/special_element.js

@@ -0,0 +1,22 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import * as b from '#compiler/builders';
+
+/**
+ *
+ * @param {AST.SvelteBody | AST.SvelteDocument | AST.SvelteWindow} node
+ * @param {string} id
+ * @param {ComponentContext} context
+ */
+export function visit_special_element(node, id, context) {
+	const state = { ...context.state, node: b.id(id) };
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'OnDirective') {
+			context.state.init.push(b.stmt(/** @type {Expression} */ (context.visit(attribute, state))));
+		} else {
+			context.visit(attribute, state);
+		}
+	}
+}