svelte-on-rails 0.0.1

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js

@@ -0,0 +1,75 @@
+/** @import { Location } from 'locate-character' */
+/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import { dev, locator } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+import { determine_namespace_for_children } from '../../utils.js';
+import { build_element_attributes } from './shared/element.js';
+import { build_template } from './shared/utils.js';
+
+/**
+ * @param {AST.SvelteElement} node
+ * @param {ComponentContext} context
+ */
+export function SvelteElement(node, context) {
+	let tag = /** @type {Expression} */ (context.visit(node.tag));
+
+	if (dev) {
+		// Ensure getters/function calls aren't called multiple times.
+		// If we ever start referencing `tag` more than once in prod, move this out of the if block.
+		if (tag.type !== 'Identifier') {
+			const tag_id = context.state.scope.generate('$$tag');
+			context.state.init.push(b.const(tag_id, tag));
+			tag = b.id(tag_id);
+		}
+
+		if (node.fragment.nodes.length > 0) {
+			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
+		}
+		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag))));
+	}
+
+	const state = {
+		...context.state,
+		namespace: determine_namespace_for_children(node, context.state.namespace),
+		template: [],
+		init: []
+	};
+
+	build_element_attributes(node, { ...context, state });
+
+	if (dev) {
+		const location = /** @type {Location} */ (locator(node.start));
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.push_element',
+					b.id('$$payload'),
+					tag,
+					b.literal(location.line),
+					b.literal(location.column)
+				)
+			)
+		);
+	}
+
+	const attributes = b.block([...state.init, ...build_template(state.template)]);
+	const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state));
+
+	context.state.template.push(
+		b.stmt(
+			b.call(
+				'$.element',
+				b.id('$$payload'),
+				tag,
+				attributes.body.length > 0 && b.thunk(attributes),
+				children.body.length > 0 && b.thunk(children)
+			)
+		)
+	);
+
+	if (dev) {
+		context.state.template.push(b.stmt(b.call('$.pop_element')));
+	}
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/server/visitors/SvelteFragment.js

@@ -0,0 +1,11 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {AST.SvelteFragment} node
+ * @param {ComponentContext} context
+ */
+export function SvelteFragment(node, context) {
+	context.state.template.push(/** @type {BlockStatement} */ (context.visit(node.fragment)));
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/server/visitors/SvelteHead.js

@@ -0,0 +1,16 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AST.SvelteHead} node
+ * @param {ComponentContext} context
+ */
+export function SvelteHead(node, context) {
+	const block = /** @type {BlockStatement} */ (context.visit(node.fragment));
+
+	context.state.template.push(
+		b.stmt(b.call('$.head', b.id('$$payload'), b.arrow([b.id('$$payload')], block)))
+	);
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js

@@ -0,0 +1,12 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+import { build_inline_component } from './shared/component.js';
+
+/**
+ * @param {AST.SvelteSelf} node
+ * @param {ComponentContext} context
+ */
+export function SvelteSelf(node, context) {
+	build_inline_component(node, b.id(context.state.analysis.name), context);
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js

@@ -0,0 +1,17 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+import { process_children, build_template } from './shared/utils.js';
+
+/**
+ * @param {AST.TitleElement} node
+ * @param {ComponentContext} context
+ */
+export function TitleElement(node, context) {
+	// title is guaranteed to contain only text/expression tag children
+	const template = [b.literal('<title>')];
+	process_children(node.fragment.nodes, { ...context, state: { ...context.state, template } });
+	template.push(b.literal('</title>'));
+
+	context.state.init.push(...build_template(template, b.id('$$payload.title'), '='));
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/server/visitors/UpdateExpression.js

@@ -0,0 +1,26 @@
+/** @import { UpdateExpression } from 'estree' */
+/** @import { Context } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {UpdateExpression} node
+ * @param {Context} context
+ */
+export function UpdateExpression(node, context) {
+	const argument = node.argument;
+
+	if (
+		argument.type === 'Identifier' &&
+		context.state.scope.get(argument.name)?.kind === 'store_sub'
+	) {
+		return b.call(
+			node.prefix ? '$.update_store_pre' : '$.update_store',
+			b.assignment('??=', b.id('$$store_subs'), b.object([])),
+			b.literal(argument.name),
+			b.id(argument.name.slice(1)),
+			node.operator === '--' && b.literal(-1)
+		);
+	}
+
+	return context.next();
+}

data/lib/mount_svelte/node_modules/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js

@@ -0,0 +1,193 @@
+/** @import { VariableDeclaration, VariableDeclarator, Expression, CallExpression, Pattern, Identifier } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { Context } from '../types.js' */
+/** @import { Scope } from '../../../scope.js' */
+import { build_fallback, extract_paths } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { get_rune } from '../../../scope.js';
+import { walk } from 'zimmerframe';
+
+/**
+ * @param {VariableDeclaration} node
+ * @param {Context} context
+ */
+export function VariableDeclaration(node, context) {
+	/** @type {VariableDeclarator[]} */
+	const declarations = [];
+
+	if (context.state.analysis.runes) {
+		for (const declarator of node.declarations) {
+			const init = declarator.init;
+			const rune = get_rune(init, context.state.scope);
+			if (!rune || rune === '$effect.tracking' || rune === '$inspect' || rune === '$effect.root') {
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
+
+			if (rune === '$props.id') {
+				// skip
+				continue;
+			}
+
+			if (rune === '$props') {
+				let has_rest = false;
+				// remove $bindable() from props declaration
+				let id = walk(declarator.id, null, {
+					RestElement(node, context) {
+						if (context.path.at(-1) === declarator.id) {
+							has_rest = true;
+						}
+					},
+					AssignmentPattern(node) {
+						if (
+							node.right.type === 'CallExpression' &&
+							get_rune(node.right, context.state.scope) === '$bindable'
+						) {
+							const right = node.right.arguments.length
+								? /** @type {Expression} */ (context.visit(node.right.arguments[0]))
+								: b.void0;
+							return b.assignment_pattern(node.left, right);
+						}
+					}
+				});
+				if (id.type === 'ObjectPattern' && has_rest) {
+					// If a rest pattern is used within an object pattern, we need to ensure we don't expose $$slots or $$events
+					id.properties.splice(
+						id.properties.length - 1,
+						0,
+						// @ts-ignore
+						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$events'), b.id('$$events'))
+					);
+				} else if (id.type === 'Identifier') {
+					// If $props is referenced as an identifier, we need to ensure we don't expose $$slots or $$events as properties
+					// on the identifier reference
+					id = b.object_pattern([
+						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$events'), b.id('$$events')),
+						b.rest(b.id(id.name))
+					]);
+				}
+				declarations.push(
+					b.declarator(/** @type {Pattern} */ (context.visit(id)), b.id('$$props'))
+				);
+				continue;
+			}
+
+			const args = /** @type {CallExpression} */ (init).arguments;
+			const value = args.length > 0 ? /** @type {Expression} */ (context.visit(args[0])) : b.void0;
+
+			if (rune === '$derived.by') {
+				declarations.push(
+					b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), b.call(value))
+				);
+				continue;
+			}
+
+			if (declarator.id.type === 'Identifier') {
+				declarations.push(b.declarator(declarator.id, value));
+				continue;
+			}
+
+			if (rune === '$derived') {
+				declarations.push(
+					b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), value)
+				);
+				continue;
+			}
+
+			declarations.push(...create_state_declarators(declarator, context.state.scope, value));
+		}
+	} else {
+		for (const declarator of node.declarations) {
+			const bindings = /** @type {Binding[]} */ (context.state.scope.get_bindings(declarator));
+			const has_state = bindings.some((binding) => binding.kind === 'state');
+			const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
+
+			if (!has_state && !has_props) {
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
+
+			if (has_props) {
+				if (declarator.id.type !== 'Identifier') {
+					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
+					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
+					const tmp = context.state.scope.generate('tmp');
+					const paths = extract_paths(declarator.id);
+					declarations.push(
+						b.declarator(
+							b.id(tmp),
+							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
+						)
+					);
+					for (const path of paths) {
+						const value = path.expression?.(b.id(tmp));
+						const name = /** @type {Identifier} */ (path.node).name;
+						const binding = /** @type {Binding} */ (context.state.scope.get(name));
+						const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
+						declarations.push(b.declarator(path.node, build_fallback(prop, value)));
+					}
+					continue;
+				}
+
+				const binding = /** @type {Binding} */ (context.state.scope.get(declarator.id.name));
+				const prop = b.member(
+					b.id('$$props'),
+					b.literal(binding.prop_alias ?? declarator.id.name),
+					true
+				);
+
+				/** @type {Expression} */
+				let init = prop;
+				if (declarator.init) {
+					const default_value = /** @type {Expression} */ (context.visit(declarator.init));
+					init = build_fallback(prop, default_value);
+				}
+
+				declarations.push(b.declarator(declarator.id, init));
+
+				continue;
+			}
+
+			declarations.push(
+				...create_state_declarators(
+					declarator,
+					context.state.scope,
+					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
+				)
+			);
+		}
+	}
+
+	if (declarations.length === 0) {
+		return b.empty;
+	}
+
+	return {
+		...node,
+		declarations
+	};
+}
+
+/**
+ * @param {VariableDeclarator} declarator
+ * @param {Scope} scope
+ * @param {Expression} value
+ * @returns {VariableDeclarator[]}
+ */
+function create_state_declarators(declarator, scope, value) {
+	if (declarator.id.type === 'Identifier') {
+		return [b.declarator(declarator.id, value)];
+	}
+
+	const tmp = scope.generate('tmp');
+	const paths = extract_paths(declarator.id);
+	return [
+		b.declarator(b.id(tmp), value), // TODO inject declarator for opts, so we can use it below
+		...paths.map((path) => {
+			const value = path.expression?.(b.id(tmp));
+			return b.declarator(path.node, value);
+		})
+	];
+}

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

@@ -0,0 +1,310 @@
+/** @import { BlockStatement, Expression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../../types.js' */
+import { empty_comment, build_attribute_value } from './utils.js';
+import * as b from '../../../../../utils/builders.js';
+import { is_element_node } from '../../../../nodes.js';
+
+/**
+ * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
+ * @param {Expression} expression
+ * @param {ComponentContext} context
+ */
+export function build_inline_component(node, expression, context) {
+	/** @type {Array<Property[] | Expression>} */
+	const props_and_spreads = [];
+	/** @type {Array<() => void>} */
+	const delayed_props = [];
+
+	/** @type {Property[]} */
+	const custom_css_props = [];
+
+	/** @type {Record<string, AST.LetDirective[]>} */
+	const lets = { default: [] };
+
+	/**
+	 * Children in the default slot are evaluated in the component scope,
+	 * children in named slots are evaluated in the parent scope
+	 */
+	const child_state = {
+		...context.state,
+		scope: node.metadata.scopes.default
+	};
+
+	/** @type {Record<string, AST.TemplateNode[]>} */
+	const children = {};
+
+	/**
+	 * If this component has a slot property, it is a named slot within another component. In this case
+	 * the slot scope applies to the component itself, too, and not just its children.
+	 */
+	const slot_scope_applies_to_itself = node.attributes.some(
+		(node) => node.type === 'Attribute' && node.name === 'slot'
+	);
+
+	/**
+	 * Components may have a children prop and also have child nodes. In this case, we assume
+	 * that the child component isn't using render tags yet and pass the slot as $$slots.default.
+	 * We're not doing it for spread attributes, as this would result in too many false positives.
+	 */
+	let has_children_prop = false;
+
+	/**
+	 * @param {Property} prop
+	 * @param {boolean} [delay]
+	 */
+	function push_prop(prop, delay = false) {
+		const do_push = () => {
+			const current = props_and_spreads.at(-1);
+			const current_is_props = Array.isArray(current);
+			const props = current_is_props ? current : [];
+			props.push(prop);
+			if (!current_is_props) {
+				props_and_spreads.push(props);
+			}
+		};
+
+		if (delay) {
+			delayed_props.push(do_push);
+		} else {
+			do_push();
+		}
+	}
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'LetDirective') {
+			if (!slot_scope_applies_to_itself) {
+				lets.default.push(attribute);
+			}
+		} else if (attribute.type === 'SpreadAttribute') {
+			props_and_spreads.push(/** @type {Expression} */ (context.visit(attribute)));
+		} else if (attribute.type === 'Attribute') {
+			if (attribute.name.startsWith('--')) {
+				const value = build_attribute_value(attribute.value, context, false, true);
+				custom_css_props.push(b.init(attribute.name, value));
+				continue;
+			}
+
+			if (attribute.name === 'children') {
+				has_children_prop = true;
+			}
+
+			const value = build_attribute_value(attribute.value, context, false, true);
+			push_prop(b.prop('init', b.key(attribute.name), value));
+		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
+			if (attribute.expression.type === 'SequenceExpression') {
+				const [get, set] = /** @type {SequenceExpression} */ (context.visit(attribute.expression))
+					.expressions;
+				const get_id = b.id(context.state.scope.generate('bind_get'));
+				const set_id = b.id(context.state.scope.generate('bind_set'));
+
+				context.state.init.push(b.var(get_id, get));
+				context.state.init.push(b.var(set_id, set));
+
+				push_prop(b.get(attribute.name, [b.return(b.call(get_id))]));
+				push_prop(b.set(attribute.name, [b.stmt(b.call(set_id, b.id('$$value')))]));
+			} else {
+				// Delay prop pushes so bindings come at the end, to avoid spreads overwriting them
+				push_prop(
+					b.get(attribute.name, [
+						b.return(/** @type {Expression} */ (context.visit(attribute.expression)))
+					]),
+					true
+				);
+
+				push_prop(
+					b.set(attribute.name, [
+						b.stmt(
+							/** @type {Expression} */ (
+								context.visit(b.assignment('=', attribute.expression, b.id('$$value')))
+							)
+						),
+						b.stmt(b.assignment('=', b.id('$$settled'), b.false))
+					]),
+					true
+				);
+			}
+		}
+	}
+
+	delayed_props.forEach((fn) => fn());
+
+	/** @type {Statement[]} */
+	const snippet_declarations = [];
+
+	/** @type {Property[]} */
+	const serialized_slots = [];
+
+	// Group children by slot
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'SnippetBlock') {
+			// the SnippetBlock visitor adds a declaration to `init`, but if it's directly
+			// inside a component then we want to hoist them into a block so that they
+			// can be used as props without creating conflicts
+			context.visit(child, {
+				...context.state,
+				init: snippet_declarations
+			});
+
+			push_prop(b.prop('init', child.expression, child.expression));
+
+			// Interop: allows people to pass snippets when component still uses slots
+			serialized_slots.push(
+				b.init(child.expression.name === 'children' ? 'default' : child.expression.name, b.true)
+			);
+
+			continue;
+		}
+
+		let slot_name = 'default';
+		if (is_element_node(child)) {
+			const slot = /** @type {AST.Attribute | undefined} */ (
+				child.attributes.find(
+					(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
+				)
+			);
+
+			if (slot !== undefined) {
+				slot_name = /** @type {AST.Text[]} */ (slot.value)[0].data;
+
+				lets[slot_name] = child.attributes.filter((attribute) => attribute.type === 'LetDirective');
+			} else if (child.type === 'SvelteFragment') {
+				lets.default.push(
+					...child.attributes.filter((attribute) => attribute.type === 'LetDirective')
+				);
+			}
+		}
+
+		children[slot_name] = children[slot_name] || [];
+		children[slot_name].push(child);
+	}
+
+	// Serialize each slot
+	for (const slot_name of Object.keys(children)) {
+		const block = /** @type {BlockStatement} */ (
+			context.visit(
+				{
+					...node.fragment,
+					// @ts-expect-error
+					nodes: children[slot_name]
+				},
+				slot_name === 'default'
+					? child_state
+					: {
+							...context.state,
+							scope: node.metadata.scopes[slot_name]
+						}
+			)
+		);
+
+		if (block.body.length === 0) continue;
+
+		/** @type {Pattern[]} */
+		const params = [b.id('$$payload')];
+
+		if (lets[slot_name].length > 0) {
+			const pattern = b.object_pattern(
+				lets[slot_name].map((node) => {
+					if (node.expression === null) {
+						return b.init(node.name, b.id(node.name));
+					}
+
+					if (node.expression.type === 'ObjectExpression') {
+						// @ts-expect-error it gets parsed as an `ObjectExpression` but is really an `ObjectPattern`
+						return b.init(node.name, b.object_pattern(node.expression.properties));
+					}
+
+					if (node.expression.type === 'ArrayExpression') {
+						// @ts-expect-error it gets parsed as an `ArrayExpression` but is really an `ArrayPattern`
+						return b.init(node.name, b.array_pattern(node.expression.elements));
+					}
+
+					return b.init(node.name, node.expression);
+				})
+			);
+
+			params.push(pattern);
+		}
+
+		const slot_fn = b.arrow(params, b.block(block.body));
+
+		if (slot_name === 'default' && !has_children_prop) {
+			if (
+				lets.default.length === 0 &&
+				children.default.every(
+					(node) =>
+						node.type !== 'SvelteFragment' ||
+						!node.attributes.some((attr) => attr.type === 'LetDirective')
+				)
+			) {
+				// create `children` prop...
+				push_prop(b.prop('init', b.id('children'), slot_fn));
+
+				// and `$$slots.default: true` so that `<slot>` on the child works
+				serialized_slots.push(b.init(slot_name, b.true));
+			} else {
+				// create `$$slots.default`...
+				serialized_slots.push(b.init(slot_name, slot_fn));
+
+				// and a `children` prop that errors
+				push_prop(b.init('children', b.id('$.invalid_default_snippet')));
+			}
+		} else {
+			serialized_slots.push(b.init(slot_name, slot_fn));
+		}
+	}
+
+	if (serialized_slots.length > 0) {
+		push_prop(b.prop('init', b.id('$$slots'), b.object(serialized_slots)));
+	}
+
+	const props_expression =
+		props_and_spreads.length === 0 ||
+		(props_and_spreads.length === 1 && Array.isArray(props_and_spreads[0]))
+			? b.object(/** @type {Property[]} */ (props_and_spreads[0] || []))
+			: b.call(
+					'$.spread_props',
+					b.array(props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p)))
+				);
+
+	/** @type {Statement} */
+	let statement = b.stmt(
+		(node.type === 'SvelteComponent' ? b.maybe_call : b.call)(
+			expression,
+			b.id('$$payload'),
+			props_expression
+		)
+	);
+
+	if (snippet_declarations.length > 0) {
+		statement = b.block([...snippet_declarations, statement]);
+	}
+
+	const dynamic =
+		node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic);
+
+	if (custom_css_props.length > 0) {
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.css_props',
+					b.id('$$payload'),
+					b.literal(context.state.namespace === 'svg' ? false : true),
+					b.object(custom_css_props),
+					b.thunk(b.block([statement])),
+					dynamic && b.true
+				)
+			)
+		);
+	} else {
+		if (dynamic) {
+			context.state.template.push(empty_comment);
+		}
+
+		context.state.template.push(statement);
+
+		if (!context.state.skip_hydration_boundaries) {
+			context.state.template.push(empty_comment);
+		}
+	}
+}