svelte-on-rails 0.0.1

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

@@ -0,0 +1,260 @@
+/** @import { CallExpression, Expression, Pattern } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import { is_text_attribute } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { binding_properties } from '../../../bindings.js';
+import { build_attribute_value } from './shared/element.js';
+import { build_bind_this, validate_binding } from './shared/utils.js';
+
+/**
+ * @param {AST.BindDirective} node
+ * @param {ComponentContext} context
+ */
+export function BindDirective(node, context) {
+	const expression = /** @type {Expression} */ (context.visit(node.expression));
+	const property = binding_properties[node.name];
+
+	const parent = /** @type {AST.SvelteNode} */ (context.path.at(-1));
+
+	let get, set;
+
+	if (expression.type === 'SequenceExpression') {
+		[get, set] = expression.expressions;
+	} else {
+		if (
+			dev &&
+			context.state.analysis.runes &&
+			expression.type === 'MemberExpression' &&
+			(node.name !== 'this' ||
+				context.path.some(
+					({ type }) =>
+						type === 'IfBlock' ||
+						type === 'EachBlock' ||
+						type === 'AwaitBlock' ||
+						type === 'KeyBlock'
+				)) &&
+			!is_ignored(node, 'binding_property_non_reactive')
+		) {
+			validate_binding(context.state, node, expression);
+		}
+
+		get = b.thunk(expression);
+
+		/** @type {Expression | undefined} */
+		set = b.unthunk(
+			b.arrow(
+				[b.id('$$value')],
+				/** @type {Expression} */ (
+					context.visit(
+						b.assignment('=', /** @type {Pattern} */ (node.expression), b.id('$$value'))
+					)
+				)
+			)
+		);
+
+		if (get === set) {
+			set = undefined;
+		}
+	}
+
+	/** @type {CallExpression} */
+	let call;
+
+	if (property?.event) {
+		call = b.call(
+			'$.bind_property',
+			b.literal(node.name),
+			b.literal(property.event),
+			context.state.node,
+			set ?? get,
+			property.bidirectional && get
+		);
+	} else {
+		// special cases
+		switch (node.name) {
+			// window
+			case 'online':
+				call = b.call(`$.bind_online`, set ?? get);
+				break;
+
+			case 'scrollX':
+			case 'scrollY':
+				call = b.call(
+					'$.bind_window_scroll',
+					b.literal(node.name === 'scrollX' ? 'x' : 'y'),
+					get,
+					set
+				);
+				break;
+
+			case 'innerWidth':
+			case 'innerHeight':
+			case 'outerWidth':
+			case 'outerHeight':
+				call = b.call('$.bind_window_size', b.literal(node.name), set ?? get);
+				break;
+
+			// document
+			case 'activeElement':
+				call = b.call('$.bind_active_element', set ?? get);
+				break;
+
+			// media
+			case 'muted':
+				call = b.call(`$.bind_muted`, context.state.node, get, set);
+				break;
+			case 'paused':
+				call = b.call(`$.bind_paused`, context.state.node, get, set);
+				break;
+			case 'volume':
+				call = b.call(`$.bind_volume`, context.state.node, get, set);
+				break;
+			case 'playbackRate':
+				call = b.call(`$.bind_playback_rate`, context.state.node, get, set);
+				break;
+			case 'currentTime':
+				call = b.call(`$.bind_current_time`, context.state.node, get, set);
+				break;
+			case 'buffered':
+				call = b.call(`$.bind_buffered`, context.state.node, set ?? get);
+				break;
+			case 'played':
+				call = b.call(`$.bind_played`, context.state.node, set ?? get);
+				break;
+			case 'seekable':
+				call = b.call(`$.bind_seekable`, context.state.node, set ?? get);
+				break;
+			case 'seeking':
+				call = b.call(`$.bind_seeking`, context.state.node, set ?? get);
+				break;
+			case 'ended':
+				call = b.call(`$.bind_ended`, context.state.node, set ?? get);
+				break;
+			case 'readyState':
+				call = b.call(`$.bind_ready_state`, context.state.node, set ?? get);
+				break;
+
+			// dimensions
+			case 'contentRect':
+			case 'contentBoxSize':
+			case 'borderBoxSize':
+			case 'devicePixelContentBoxSize':
+				call = b.call(
+					'$.bind_resize_observer',
+					context.state.node,
+					b.literal(node.name),
+					set ?? get
+				);
+				break;
+
+			case 'clientWidth':
+			case 'clientHeight':
+			case 'offsetWidth':
+			case 'offsetHeight':
+				call = b.call('$.bind_element_size', context.state.node, b.literal(node.name), set ?? get);
+				break;
+
+			// various
+			case 'value': {
+				if (parent?.type === 'RegularElement' && parent.name === 'select') {
+					call = b.call(`$.bind_select_value`, context.state.node, get, set);
+				} else {
+					call = b.call(`$.bind_value`, context.state.node, get, set);
+				}
+				break;
+			}
+
+			case 'files':
+				call = b.call(`$.bind_files`, context.state.node, get, set);
+				break;
+
+			case 'this':
+				call = build_bind_this(node.expression, context.state.node, context);
+				break;
+
+			case 'textContent':
+			case 'innerHTML':
+			case 'innerText':
+				call = b.call(
+					'$.bind_content_editable',
+					b.literal(node.name),
+					context.state.node,
+					get,
+					set
+				);
+				break;
+
+			// checkbox/radio
+			case 'checked':
+				call = b.call(`$.bind_checked`, context.state.node, get, set);
+				break;
+
+			case 'focused':
+				call = b.call(`$.bind_focused`, context.state.node, set ?? get);
+				break;
+
+			case 'group': {
+				const indexes = node.metadata.parent_each_blocks.map((each) => {
+					// if we have a keyed block with an index, the index is wrapped in a source
+					return each.metadata.keyed && each.index
+						? b.call('$.get', each.metadata.index)
+						: each.metadata.index;
+				});
+
+				// We need to additionally invoke the value attribute signal to register it as a dependency,
+				// so that when the value is updated, the group binding is updated
+				let group_getter = get;
+
+				if (parent?.type === 'RegularElement') {
+					const value = /** @type {any[]} */ (
+						/** @type {AST.Attribute} */ (
+							parent.attributes.find(
+								(a) =>
+									a.type === 'Attribute' &&
+									a.name === 'value' &&
+									!is_text_attribute(a) &&
+									a.value !== true
+							)
+						)?.value
+					);
+
+					if (value !== undefined) {
+						group_getter = b.thunk(
+							b.block([b.stmt(build_attribute_value(value, context).value), b.return(expression)])
+						);
+					}
+				}
+
+				call = b.call(
+					'$.bind_group',
+					node.metadata.binding_group_name,
+					b.array(indexes),
+					context.state.node,
+					group_getter,
+					set ?? get
+				);
+				break;
+			}
+
+			default:
+				throw new Error('unknown binding ' + node.name);
+		}
+	}
+
+	// Bindings need to happen after attribute updates, therefore after the render effect, and in order with events/actions.
+	// bind:this is a special case as it's one-way and could influence the render effect.
+	if (node.name === 'this') {
+		context.state.init.push(b.stmt(call));
+	} else {
+		const has_use =
+			parent.type === 'RegularElement' && parent.attributes.find((a) => a.type === 'UseDirective');
+
+		if (has_use) {
+			context.state.init.push(b.stmt(b.call('$.effect', b.thunk(call))));
+		} else {
+			context.state.after_update.push(b.stmt(call));
+		}
+	}
+}

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

@@ -0,0 +1,32 @@
+/** @import { ArrowFunctionExpression, BlockStatement, CallExpression, Expression, FunctionDeclaration, FunctionExpression, Statement } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { add_state_transformers } from './shared/declarations.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {BlockStatement} node
+ * @param {ComponentContext} context
+ */
+export function BlockStatement(node, context) {
+	add_state_transformers(context);
+	const tracing = context.state.scope.tracing;
+
+	if (tracing !== null) {
+		const parent =
+			/** @type {ArrowFunctionExpression | FunctionDeclaration | FunctionExpression} */ (
+				context.path.at(-1)
+			);
+
+		const is_async = parent.async;
+
+		const call = b.call(
+			'$.trace',
+			/** @type {Expression} */ (tracing),
+			b.thunk(b.block(node.body.map((n) => /** @type {Statement} */ (context.visit(n)))), is_async)
+		);
+
+		return b.block([b.return(is_async ? b.await(call) : call)]);
+	}
+
+	context.next();
+}

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

@@ -0,0 +1,20 @@
+/** @import { BreakStatement } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {BreakStatement} node
+ * @param {ComponentContext} context
+ */
+export function BreakStatement(node, context) {
+	if (context.state.analysis.runes || !node.label || node.label.name !== '$') {
+		return;
+	}
+
+	const in_reactive_statement =
+		context.path[1].type === 'LabeledStatement' && context.path[1].label.name === '$';
+
+	if (in_reactive_statement) {
+		return b.return();
+	}
+}

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

@@ -0,0 +1,63 @@
+/** @import { CallExpression, Expression } from 'estree' */
+/** @import { Context } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+import { get_rune } from '../../../scope.js';
+import { transform_inspect_rune } from '../../utils.js';
+
+/**
+ * @param {CallExpression} node
+ * @param {Context} context
+ */
+export function CallExpression(node, context) {
+	switch (get_rune(node, context.state.scope)) {
+		case '$host':
+			return b.id('$$props.$$host');
+
+		case '$effect.tracking':
+			return b.call('$.effect_tracking');
+
+		case '$state.snapshot':
+			return b.call(
+				'$.snapshot',
+				/** @type {Expression} */ (context.visit(node.arguments[0])),
+				is_ignored(node, 'state_snapshot_uncloneable') && b.true
+			);
+
+		case '$effect.root':
+			return b.call(
+				'$.effect_root',
+				.../** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)))
+			);
+
+		case '$inspect':
+		case '$inspect().with':
+			return transform_inspect_rune(node, context);
+	}
+
+	if (
+		dev &&
+		node.callee.type === 'MemberExpression' &&
+		node.callee.object.type === 'Identifier' &&
+		node.callee.object.name === 'console' &&
+		context.state.scope.get('console') === null &&
+		node.callee.property.type === 'Identifier' &&
+		['debug', 'dir', 'error', 'group', 'groupCollapsed', 'info', 'log', 'trace', 'warn'].includes(
+			node.callee.property.name
+		) &&
+		node.arguments.some((arg) => arg.type !== 'Literal') // TODO more cases?
+	) {
+		return b.call(
+			node.callee,
+			b.spread(
+				b.call(
+					'$.log_if_contains_state',
+					b.literal(node.callee.property.name),
+					.../** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)))
+				)
+			)
+		);
+	}
+
+	context.next();
+}

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

@@ -0,0 +1,186 @@
+/** @import { ClassBody, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition } from 'estree' */
+/** @import {  } from '#compiler' */
+/** @import { Context, StateField } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+import { regex_invalid_identifier_chars } from '../../../patterns.js';
+import { get_rune } from '../../../scope.js';
+import { should_proxy } from '../utils.js';
+
+/**
+ * @param {ClassBody} node
+ * @param {Context} context
+ */
+export function ClassBody(node, context) {
+	if (!context.state.analysis.runes) {
+		context.next();
+		return;
+	}
+
+	/** @type {Map<string, StateField>} */
+	const public_state = new Map();
+
+	/** @type {Map<string, StateField>} */
+	const private_state = new Map();
+
+	/** @type {Map<(MethodDefinition|PropertyDefinition)["key"], string>} */
+	const definition_names = new Map();
+
+	/** @type {string[]} */
+	const private_ids = [];
+
+	for (const definition of node.body) {
+		if (
+			(definition.type === 'PropertyDefinition' || definition.type === 'MethodDefinition') &&
+			(definition.key.type === 'Identifier' ||
+				definition.key.type === 'PrivateIdentifier' ||
+				definition.key.type === 'Literal')
+		) {
+			const type = definition.key.type;
+			const name = get_name(definition.key, public_state);
+			if (!name) continue;
+
+			// we store the deconflicted name in the map so that we can access it later
+			definition_names.set(definition.key, name);
+
+			const is_private = type === 'PrivateIdentifier';
+			if (is_private) private_ids.push(name);
+
+			if (definition.value?.type === 'CallExpression') {
+				const rune = get_rune(definition.value, context.state.scope);
+				if (
+					rune === '$state' ||
+					rune === '$state.raw' ||
+					rune === '$derived' ||
+					rune === '$derived.by'
+				) {
+					/** @type {StateField} */
+					const field = {
+						kind:
+							rune === '$state'
+								? 'state'
+								: rune === '$state.raw'
+									? 'raw_state'
+									: rune === '$derived.by'
+										? 'derived_by'
+										: 'derived',
+						// @ts-expect-error this is set in the next pass
+						id: is_private ? definition.key : null
+					};
+
+					if (is_private) {
+						private_state.set(name, field);
+					} else {
+						public_state.set(name, field);
+					}
+				}
+			}
+		}
+	}
+
+	// each `foo = $state()` needs a backing `#foo` field
+	for (const [name, field] of public_state) {
+		let deconflicted = name;
+		while (private_ids.includes(deconflicted)) {
+			deconflicted = '_' + deconflicted;
+		}
+
+		private_ids.push(deconflicted);
+		field.id = b.private_id(deconflicted);
+	}
+
+	/** @type {Array<MethodDefinition | PropertyDefinition>} */
+	const body = [];
+
+	const child_state = { ...context.state, public_state, private_state };
+
+	// Replace parts of the class body
+	for (const definition of node.body) {
+		if (
+			definition.type === 'PropertyDefinition' &&
+			(definition.key.type === 'Identifier' ||
+				definition.key.type === 'PrivateIdentifier' ||
+				definition.key.type === 'Literal')
+		) {
+			const name = definition_names.get(definition.key);
+			if (!name) continue;
+
+			const is_private = definition.key.type === 'PrivateIdentifier';
+			const field = (is_private ? private_state : public_state).get(name);
+
+			if (definition.value?.type === 'CallExpression' && field !== undefined) {
+				let value = null;
+
+				if (definition.value.arguments.length > 0) {
+					const init = /** @type {Expression} **/ (
+						context.visit(definition.value.arguments[0], child_state)
+					);
+
+					value =
+						field.kind === 'state'
+							? b.call(
+									'$.state',
+									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
+								)
+							: field.kind === 'raw_state'
+								? b.call('$.state', init)
+								: field.kind === 'derived_by'
+									? b.call('$.derived', init)
+									: b.call('$.derived', b.thunk(init));
+				} else {
+					// if no arguments, we know it's state as `$derived()` is a compile error
+					value = b.call('$.state');
+				}
+
+				if (is_private) {
+					body.push(b.prop_def(field.id, value));
+				} else {
+					// #foo;
+					const member = b.member(b.this, field.id);
+					body.push(b.prop_def(field.id, value));
+
+					// get foo() { return this.#foo; }
+					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
+
+					// set foo(value) { this.#foo = value; }
+					const val = b.id('value');
+
+					body.push(
+						b.method(
+							'set',
+							definition.key,
+							[val],
+							[b.stmt(b.call('$.set', member, val, field.kind === 'state' && b.true))]
+						)
+					);
+				}
+				continue;
+			}
+		}
+
+		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
+	}
+
+	return { ...node, body };
+}
+
+/**
+ * @param {Identifier | PrivateIdentifier | Literal} node
+ * @param {Map<string, StateField>} public_state
+ */
+function get_name(node, public_state) {
+	if (node.type === 'Literal') {
+		let name = node.value?.toString().replace(regex_invalid_identifier_chars, '_');
+
+		// the above could generate conflicts because it has to generate a valid identifier
+		// so stuff like `0` and `1` or `state%` and `state^` will result in the same string
+		// so we have to de-conflict. We can only check `public_state` because private state
+		// can't have literal keys
+		while (name && public_state.has(name)) {
+			name = '_' + name;
+		}
+		return name;
+	} else {
+		return node.name;
+	}
+}

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

@@ -0,0 +1,11 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {AST.Comment} node
+ * @param {ComponentContext} context
+ */
+export function Comment(node, context) {
+	// We'll only get here if comments are not filtered out, which they are unless preserveComments is true
+	context.state.template.push(`<!--${node.data}-->`);
+}

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

@@ -0,0 +1,32 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { build_component } from './shared/component.js';
+
+/**
+ * @param {AST.Component} node
+ * @param {ComponentContext} context
+ */
+export function Component(node, context) {
+	if (node.metadata.dynamic) {
+		// Handle dynamic references to what seems like static inline components
+		const component = build_component(node, '$$component', context, b.id('$$anchor'));
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.component',
+					context.state.node,
+					// TODO use untrack here to not update when binding changes?
+					// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
+					b.thunk(/** @type {Expression} */ (context.visit(b.member_id(node.name)))),
+					b.arrow([b.id('$$anchor'), b.id('$$component')], b.block([component]))
+				)
+			)
+		);
+		return;
+	}
+
+	const component = build_component(node, node.name, context);
+	context.state.init.push(component);
+}

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

@@ -0,0 +1,76 @@
+/** @import { Expression, Pattern } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev } from '../../../../state.js';
+import { extract_identifiers } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { create_derived } from '../utils.js';
+import { get_value } from './shared/declarations.js';
+
+/**
+ * @param {AST.ConstTag} node
+ * @param {ComponentContext} context
+ */
+export function ConstTag(node, context) {
+	const declaration = node.declaration.declarations[0];
+	// TODO we can almost certainly share some code with $derived(...)
+	if (declaration.id.type === 'Identifier') {
+		context.state.init.push(
+			b.const(
+				declaration.id,
+				create_derived(
+					context.state,
+					b.thunk(/** @type {Expression} */ (context.visit(declaration.init)))
+				)
+			)
+		);
+
+		context.state.transform[declaration.id.name] = { read: get_value };
+
+		// we need to eagerly evaluate the expression in order to hit any
+		// 'Cannot access x before initialization' errors
+		if (dev) {
+			context.state.init.push(b.stmt(b.call('$.get', declaration.id)));
+		}
+	} else {
+		const identifiers = extract_identifiers(declaration.id);
+		const tmp = b.id(context.state.scope.generate('computed_const'));
+
+		const transform = { ...context.state.transform };
+
+		// Make all identifiers that are declared within the following computed regular
+		// variables, as they are not signals in that context yet
+		for (const node of identifiers) {
+			delete transform[node.name];
+		}
+
+		const child_state = { ...context.state, transform };
+
+		// TODO optimise the simple `{ x } = y` case — we can just return `y`
+		// instead of destructuring it only to return a new object
+		const fn = b.arrow(
+			[],
+			b.block([
+				b.const(
+					/** @type {Pattern} */ (context.visit(declaration.id, child_state)),
+					/** @type {Expression} */ (context.visit(declaration.init, child_state))
+				),
+				b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
+			])
+		);
+
+		context.state.init.push(b.const(tmp, create_derived(context.state, fn)));
+
+		// we need to eagerly evaluate the expression in order to hit any
+		// 'Cannot access x before initialization' errors
+		if (dev) {
+			context.state.init.push(b.stmt(b.call('$.get', tmp)));
+		}
+
+		for (const node of identifiers) {
+			context.state.transform[node.name] = {
+				read: (node) => b.member(b.call('$.get', tmp), node)
+			};
+		}
+	}
+}