svelte-on-rails 0.0.1

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js

@@ -0,0 +1,271 @@
+/** @import { ArrayExpression, Expression, Identifier, ObjectExpression } from 'estree' */
+/** @import { AST, ExpressionMetadata } from '#compiler' */
+/** @import { ComponentClientTransformState, 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 '../../../../../utils/builders.js';
+import { build_class_directives_object, build_style_directives_object } from '../RegularElement.js';
+import { build_template_chunk, get_expression_id } from './utils.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 {Identifier} attributes_id
+ */
+export function build_set_attributes(
+	attributes,
+	class_directives,
+	style_directives,
+	context,
+	element,
+	element_id,
+	attributes_id
+) {
+	let is_dynamic = false;
+
+	/** @type {ObjectExpression['properties']} */
+	const values = [];
+
+	for (const attribute of attributes) {
+		if (attribute.type === 'Attribute') {
+			const { value, has_state } = build_attribute_value(
+				attribute.value,
+				context,
+				(value, metadata) => (metadata.has_call ? get_expression_id(context.state, value) : value)
+			);
+
+			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));
+			}
+
+			is_dynamic ||= has_state;
+		} else {
+			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
+			is_dynamic = true;
+
+			let value = /** @type {Expression} */ (context.visit(attribute));
+
+			if (attribute.metadata.expression.has_call) {
+				value = get_expression_id(context.state, value);
+			}
+
+			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)
+			)
+		);
+
+		is_dynamic ||=
+			class_directives.find((directive) => directive.metadata.expression.has_state) !== null;
+	}
+
+	if (style_directives.length) {
+		values.push(
+			b.prop(
+				'init',
+				b.array([b.id('$.STYLE')]),
+				build_style_directives_object(style_directives, context)
+			)
+		);
+
+		is_dynamic ||= style_directives.some((directive) => directive.metadata.expression.has_state);
+	}
+
+	const call = b.call(
+		'$.set_attributes',
+		element_id,
+		is_dynamic ? attributes_id : b.null,
+		b.object(values),
+		element.metadata.scoped &&
+			context.state.analysis.css.hash !== '' &&
+			b.literal(context.state.analysis.css.hash),
+		is_ignored(element, 'hydration_attribute_changed') && b.true
+	);
+
+	if (is_dynamic) {
+		context.state.init.push(b.let(attributes_id));
+		const update = b.stmt(b.assignment('=', attributes_id, call));
+		context.state.update.push(update);
+	} else {
+		context.state.init.push(b.stmt(call));
+	}
+}
+
+/**
+ * @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 = /** @type {Expression} */ (context.visit(chunk.expression));
+
+		return {
+			value: memoize(expression, chunk.metadata.expression),
+			has_state: chunk.metadata.expression.has_state
+		};
+	}
+
+	return build_template_chunk(value, context.visit, 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 metadata.has_call ? get_expression_id(context.state, value) : value;
+	});
+
+	/** @type {Identifier | undefined} */
+	let previous_id;
+
+	/** @type {ObjectExpression | Identifier | undefined} */
+	let prev;
+
+	/** @type {ObjectExpression | Identifier | 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);
+
+		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) =>
+		metadata.has_call ? get_expression_id(context.state, value) : value
+	);
+
+	/** @type {Identifier | undefined} */
+	let previous_id;
+
+	/** @type {ObjectExpression | Identifier | undefined} */
+	let prev;
+
+	/** @type {ArrayExpression | ObjectExpression | 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);
+
+		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));
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js

@@ -0,0 +1,197 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST, ExpressionMetadata } 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 '../../../../../utils/builders.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) {
+		let delegated_assignment;
+
+		if (!context.state.events.has(event_name)) {
+			context.state.events.add(event_name);
+		}
+
+		// Hoist function if we can, otherwise we leave the function as is
+		if (node.metadata.delegated.hoisted) {
+			if (node.metadata.delegated.function === tag.expression) {
+				const func_name = context.state.scope.root.unique('on_' + event_name);
+				context.state.hoisted.push(b.var(func_name, handler));
+				handler = func_name;
+			}
+
+			const hoisted_params = /** @type {Expression[]} */ (
+				node.metadata.delegated.function.metadata.hoisted_params
+			);
+
+			// When we hoist a function we assign an array with the function and all
+			// hoisted closure params.
+			if (hoisted_params) {
+				const args = [handler, ...hoisted_params];
+				delegated_assignment = b.array(args);
+			} else {
+				delegated_assignment = handler;
+			}
+		} else {
+			delegated_assignment = handler;
+		}
+
+		context.state.init.push(
+			b.stmt(
+				b.assignment('=', b.member(context.state.node, '__' + event_name), delegated_assignment)
+			)
+		);
+	} else {
+		const statement = b.stmt(
+			build_event(
+				event_name,
+				context.state.node,
+				handler,
+				capture,
+				is_passive_event(event_name) ? true : undefined
+			)
+		);
+
+		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 {string} event_name
+ * @param {Expression} node
+ * @param {Expression} handler
+ * @param {boolean} capture
+ * @param {boolean | undefined} passive
+ */
+export function build_event(event_name, node, handler, capture, passive) {
+	return b.call(
+		'$.event',
+		b.literal(event_name),
+		node,
+		handler,
+		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),
+			loc && 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;
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js

@@ -0,0 +1,173 @@
+/** @import { Expression } 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 '../../../../../utils/builders.js';
+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, { visit, state }) {
+	const within_bound_contenteditable = 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
+	 */
+	function flush_node(is_text, name) {
+		const expression = get_node(is_text);
+		let id = expression;
+
+		if (id.type !== 'Identifier') {
+			id = b.id(state.scope.generate(name));
+			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;
+			state.template.push(sequence.map((node) => node.raw).join(''));
+			return;
+		}
+
+		state.template.push(' ');
+
+		const { has_state, value } = build_template_chunk(sequence, visit, state);
+
+		// 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) {
+			state.update.push(update);
+		} else {
+			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 = state;
+
+			if (is_static_element(node, state)) {
+				skipped += 1;
+			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
+				node.metadata.is_controlled = true;
+			} else {
+				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
+				child_state = { ...state, node: id };
+			}
+
+			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;
+		state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
+	}
+}
+
+/**
+ * @param {AST.SvelteNode} node
+ * @param {ComponentContext["state"]} state
+ */
+function is_static_element(node, state) {
+	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;
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js

@@ -0,0 +1,30 @@
+/** @import { ArrowFunctionExpression, FunctionExpression, Node } from 'estree' */
+/** @import { ComponentContext } from '../../types' */
+import { build_hoisted_params } from '../../utils.js';
+
+/**
+ * @param {ArrowFunctionExpression | FunctionExpression} node
+ * @param {ComponentContext} context
+ */
+export const visit_function = (node, context) => {
+	const metadata = node.metadata;
+
+	let state = { ...context.state, in_constructor: false };
+
+	if (node.type === 'FunctionExpression') {
+		const parent = /** @type {Node} */ (context.path.at(-1));
+		state.in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
+	}
+
+	if (metadata?.hoisted === true) {
+		const params = build_hoisted_params(node, context);
+
+		return /** @type {FunctionExpression} */ ({
+			...node,
+			params,
+			body: context.visit(node.body, state)
+		});
+	}
+
+	context.next(state);
+};

data/lib/mount_svelte/node_modules/svelte/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 '../../../../../utils/builders.js';
+
+/**
+ *
+ * @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);
+		}
+	}
+}