lumen-plus 0.0.3 → 0.0.4

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js

@@ -0,0 +1,181 @@
+/** @import { Expression, Statement } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
+import { clean_nodes, infer_namespace } from '../../utils.js';
+import { transform_template } from '../transform-template/index.js';
+import { Template } from '../transform-template/template.js';
+import { process_children } from './shared/fragment.js';
+import { build_render_statement, Memoizer } from './shared/utils.js';
+
+/**
+ * @param {AST.Fragment} node
+ * @param {ComponentContext} context
+ */
+export function Fragment(node, context) {
+	// Creates a new block which looks roughly like this:
+	// ```js
+	// // hoisted:
+	// const block_name = $.from_html(`...`);
+	//
+	// // for the main block:
+	// const id = block_name();
+	// // init stuff and possibly render effect
+	// $.append($$anchor, id);
+	// ```
+	// Adds the hoisted parts to `context.state.hoisted` and returns the statements of the main block.
+
+	const parent = context.path.at(-1) ?? node;
+
+	const namespace = infer_namespace(context.state.metadata.namespace, parent, node.nodes);
+
+	const { hoisted, trimmed, is_standalone, is_text_first } = clean_nodes(
+		parent,
+		node.nodes,
+		context.path,
+		namespace,
+		context.state,
+		context.state.preserve_whitespace,
+		context.state.options.preserveComments
+	);
+
+	if (hoisted.length === 0 && trimmed.length === 0) {
+		return b.block([]);
+	}
+
+	const is_single_element = trimmed.length === 1 && trimmed[0].type === 'RegularElement';
+	const is_single_child_not_needing_template =
+		trimmed.length === 1 &&
+		(trimmed[0].type === 'SvelteFragment' || trimmed[0].type === 'TitleElement');
+	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
+
+	/** @type {Statement[]} */
+	const body = [];
+
+	/** @type {Statement | undefined} */
+	let close = undefined;
+
+	/** @type {ComponentClientTransformState} */
+	const state = {
+		...context.state,
+		init: [],
+		snippets: [],
+		consts: [],
+		let_directives: [],
+		update: [],
+		after_update: [],
+		memoizer: new Memoizer(),
+		template: new Template(),
+		transform: { ...context.state.transform },
+		metadata: {
+			namespace,
+			bound_contenteditable: context.state.metadata.bound_contenteditable
+		},
+		async_consts: undefined
+	};
+
+	for (const node of hoisted) {
+		context.visit(node, state);
+	}
+
+	if (is_single_element) {
+		const element = /** @type {AST.RegularElement} */ (trimmed[0]);
+
+		const id = b.id(context.state.scope.generate(element.name), element.name_loc);
+
+		context.visit(element, {
+			...state,
+			node: id
+		});
+
+		let flags = state.template.needs_import_node ? TEMPLATE_USE_IMPORT_NODE : undefined;
+
+		const template = transform_template(state, namespace, flags);
+		state.hoisted.push(b.var(template_name, template));
+
+		state.init.unshift(b.var(id, b.call(template_name)));
+		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+	} else if (is_single_child_not_needing_template) {
+		context.visit(trimmed[0], state);
+	} else if (trimmed.length === 1 && trimmed[0].type === 'Text') {
+		const id = b.id(context.state.scope.generate('text'));
+		state.init.unshift(b.var(id, b.call('$.text', b.literal(trimmed[0].data))));
+		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+	} else if (trimmed.length > 0) {
+		const id = b.id(context.state.scope.generate('fragment'));
+
+		const use_space_template =
+			trimmed.some((node) => node.type === 'ExpressionTag') &&
+			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
+
+		if (use_space_template) {
+			// special case — we can use `$.text` instead of creating a unique template
+			const id = b.id(context.state.scope.generate('text'));
+
+			process_children(trimmed, () => id, false, {
+				...context,
+				state
+			});
+
+			state.init.unshift(b.var(id, b.call('$.text')));
+			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+		} else {
+			if (is_standalone) {
+				// no need to create a template, we can just use the existing block's anchor
+				process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
+			} else {
+				/** @type {(is_text: boolean) => Expression} */
+				const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
+
+				process_children(trimmed, expression, false, { ...context, state });
+
+				let flags = TEMPLATE_FRAGMENT;
+
+				if (state.template.needs_import_node) {
+					flags |= TEMPLATE_USE_IMPORT_NODE;
+				}
+
+				if (state.template.nodes.length === 1 && state.template.nodes[0].type === 'comment') {
+					// special case — we can use `$.comment` instead of creating a unique template
+					state.init.unshift(b.var(id, b.call('$.comment')));
+				} else {
+					const template = transform_template(state, namespace, flags);
+					state.hoisted.push(b.var(template_name, template));
+
+					state.init.unshift(b.var(id, b.call(template_name)));
+				}
+
+				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+			}
+		}
+	}
+
+	body.push(...state.snippets, ...state.let_directives, ...state.consts);
+
+	if (state.async_consts && state.async_consts.thunks.length > 0) {
+		body.push(b.var(state.async_consts.id, b.call('$.run', b.array(state.async_consts.thunks))));
+	}
+
+	if (is_text_first) {
+		// skip over inserted comment
+		body.push(b.stmt(b.call('$.next')));
+	}
+
+	body.push(...state.init);
+
+	if (state.update.length > 0) {
+		body.push(build_render_statement(state));
+	}
+
+	body.push(...state.after_update);
+
+	if (close !== undefined) {
+		// It's important that close is the last statement in the block, as any previous statements
+		// could contain element insertions into the template, which the close statement needs to
+		// know of when constructing the list of current inner elements.
+		body.push(close);
+	}
+
+	return b.block(body);
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js

@@ -0,0 +1,12 @@
+/** @import { FunctionDeclaration } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {FunctionDeclaration} node
+ * @param {ComponentContext} context
+ */
+export function FunctionDeclaration(node, context) {
+	const state = { ...context.state, in_constructor: false, in_derived: false };
+
+	context.next(state);
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/FunctionExpression.js

@@ -0,0 +1,11 @@
+/** @import { FunctionExpression } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { visit_function } from './shared/function.js';
+
+/**
+ * @param {FunctionExpression} node
+ * @param {ComponentContext} context
+ */
+export function FunctionExpression(node, context) {
+	return visit_function(node, context);
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js

@@ -0,0 +1,49 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { is_ignored } from '../../../../state.js';
+import * as b from '#compiler/builders';
+import { build_expression } from './shared/utils.js';
+
+/**
+ * @param {AST.HtmlTag} node
+ * @param {ComponentContext} context
+ */
+export function HtmlTag(node, context) {
+	context.state.template.push_comment();
+
+	const is_async = node.metadata.expression.is_async();
+
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const html = is_async ? b.call('$.get', b.id('$$html')) : expression;
+
+	const is_svg = context.state.metadata.namespace === 'svg';
+	const is_mathml = context.state.metadata.namespace === 'mathml';
+
+	const statement = b.stmt(
+		b.call(
+			'$.html',
+			context.state.node,
+			b.thunk(html),
+			is_svg && b.true,
+			is_mathml && b.true,
+			is_ignored(node, 'hydration_html_changed') && b.true
+		)
+	);
+
+	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
+	if (is_async) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					b.array([b.thunk(expression, node.metadata.expression.has_await)]),
+					b.arrow([context.state.node, b.id('$$html')], b.block([statement]))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(statement);
+	}
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js

@@ -0,0 +1,45 @@
+/** @import { Identifier, Node } from 'estree' */
+/** @import { Context } from '../types' */
+import is_reference from 'is-reference';
+import * as b from '#compiler/builders';
+import { build_getter } from '../utils.js';
+
+/**
+ * @param {Identifier} node
+ * @param {Context} context
+ */
+export function Identifier(node, context) {
+	const parent = /** @type {Node} */ (context.path.at(-1));
+
+	if (is_reference(node, parent)) {
+		if (node.name === '$$props') {
+			return b.id('$$sanitized_props');
+		}
+
+		// Optimize prop access: If it's a member read access, we can use the $$props object directly
+		const binding = context.state.scope.get(node.name);
+		if (
+			context.state.analysis.runes && // can't do this in legacy mode because the proxy does more than just read/write
+			binding !== null &&
+			node !== binding.node &&
+			binding.kind === 'rest_prop'
+		) {
+			const grand_parent = context.path.at(-2);
+
+			if (
+				parent?.type === 'MemberExpression' &&
+				!parent.computed &&
+				grand_parent?.type !== 'AssignmentExpression' &&
+				grand_parent?.type !== 'UpdateExpression'
+			) {
+				const key = /** @type {Identifier} */ (parent.property);
+
+				if (!binding.metadata?.exclude_props?.includes(key.name)) {
+					return b.id('$$props');
+				}
+			}
+		}
+
+		return build_getter(node, context.state);
+	}
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js

@@ -0,0 +1,90 @@
+/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
+
+/**
+ * @param {AST.IfBlock} node
+ * @param {ComponentContext} context
+ */
+export function IfBlock(node, context) {
+	context.state.template.push_comment();
+	const statements = [];
+
+	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
+	const consequent_id = b.id(context.state.scope.generate('consequent'));
+
+	statements.push(b.var(consequent_id, b.arrow([b.id('$$anchor')], consequent)));
+
+	let alternate_id;
+
+	if (node.alternate) {
+		const alternate = /** @type {BlockStatement} */ (context.visit(node.alternate));
+		alternate_id = b.id(context.state.scope.generate('alternate'));
+		statements.push(b.var(alternate_id, b.arrow([b.id('$$anchor')], alternate)));
+	}
+
+	const is_async = node.metadata.expression.is_async();
+
+	const expression = build_expression(context, node.test, node.metadata.expression);
+	const test = is_async ? b.call('$.get', b.id('$$condition')) : expression;
+
+	/** @type {Expression[]} */
+	const args = [
+		context.state.node,
+		b.arrow(
+			[b.id('$$render')],
+			b.block([
+				b.if(
+					test,
+					b.stmt(b.call('$$render', consequent_id)),
+					alternate_id && b.stmt(b.call('$$render', alternate_id, b.literal(false)))
+				)
+			])
+		)
+	];
+
+	if (node.elseif) {
+		// We treat this...
+		//
+		//   {#if x}
+		//     ...
+		//   {:else}
+		//     {#if y}
+		//       <div transition:foo>...</div>
+		//     {/if}
+		//   {/if}
+		//
+		// ...slightly differently to this...
+		//
+		//   {#if x}
+		//     ...
+		//   {:else if y}
+		//     <div transition:foo>...</div>
+		//   {/if}
+		//
+		// ...even though they're logically equivalent. In the first case, the
+		// transition will only play when `y` changes, but in the second it
+		// should play when `x` or `y` change — both are considered 'local'
+		args.push(b.true);
+	}
+
+	statements.push(add_svelte_meta(b.call('$.if', ...args), node, 'if'));
+
+	if (is_async) {
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.async',
+					context.state.node,
+					node.metadata.expression.blockers(),
+					b.array([b.thunk(expression, node.metadata.expression.has_await)]),
+					b.arrow([context.state.node, b.id('$$condition')], b.block(statements))
+				)
+			)
+		);
+	} else {
+		context.state.init.push(b.block(statements));
+	}
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js

@@ -0,0 +1,39 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_expression, add_svelte_meta } from './shared/utils.js';
+
+/**
+ * @param {AST.KeyBlock} node
+ * @param {ComponentContext} context
+ */
+export function KeyBlock(node, context) {
+	context.state.template.push_comment();
+
+	const is_async = node.metadata.expression.is_async();
+
+	const expression = build_expression(context, node.expression, node.metadata.expression);
+	const key = b.thunk(is_async ? b.call('$.get', b.id('$$key')) : expression);
+	const body = /** @type {Expression} */ (context.visit(node.fragment));
+
+	let statement = add_svelte_meta(
+		b.call('$.key', context.state.node, key, b.arrow([b.id('$$anchor')], body)),
+		node,
+		'key'
+	);
+
+	if (is_async) {
+		statement = b.stmt(
+			b.call(
+				'$.async',
+				context.state.node,
+				node.metadata.expression.blockers(),
+				b.array([b.thunk(expression, node.metadata.expression.has_await)]),
+				b.arrow([context.state.node, b.id('$$key')], b.block([statement]))
+			)
+		);
+	}
+
+	context.state.init.push(statement);
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js

@@ -0,0 +1,64 @@
+/** @import { Expression, LabeledStatement, Statement } from 'estree' */
+/** @import { ReactiveStatement } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_getter } from '../utils.js';
+
+/**
+ * @param {LabeledStatement} node
+ * @param {ComponentContext} context
+ */
+export function LabeledStatement(node, context) {
+	if (context.state.analysis.runes || context.path.length > 1 || node.label.name !== '$') {
+		context.next();
+		return;
+	}
+
+	// To recreate Svelte 4 behaviour, we track the dependencies
+	// the compiler can 'see', but we untrack the effect itself
+	const reactive_statement = /** @type {ReactiveStatement} */ (
+		context.state.analysis.reactive_statements.get(node)
+	);
+
+	if (!reactive_statement) return; // not the instance context
+
+	let serialized_body = /** @type {Statement} */ (context.visit(node.body));
+
+	if (serialized_body.type !== 'BlockStatement') {
+		serialized_body = b.block([serialized_body]);
+	}
+
+	const body = serialized_body.body;
+
+	/** @type {Expression[]} */
+	const sequence = [];
+
+	for (const binding of reactive_statement.dependencies) {
+		if (binding.kind === 'normal' && binding.declaration_kind !== 'import') continue;
+
+		const name = binding.node.name;
+		let serialized = build_getter(b.id(name), context.state);
+
+		// If the binding is a prop, we need to deep read it because it could be fine-grained $state
+		// from a runes-component, where mutations don't trigger an update on the prop as a whole.
+		if (name === '$$props' || name === '$$restProps' || binding.kind === 'bindable_prop') {
+			serialized = b.call('$.deep_read_state', serialized);
+		}
+
+		sequence.push(serialized);
+	}
+
+	// these statements will be topologically ordered later
+	context.state.legacy_reactive_statements.set(
+		node,
+		b.stmt(
+			b.call(
+				'$.legacy_pre_effect',
+				sequence.length > 0 ? b.thunk(b.sequence(sequence)) : b.thunk(b.block([])),
+				b.thunk(b.block(body))
+			)
+		)
+	);
+
+	return b.empty;
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js

@@ -0,0 +1,55 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { create_derived } from '../utils.js';
+
+/**
+ * @param {AST.LetDirective} node
+ * @param {ComponentContext} context
+ */
+export function LetDirective(node, context) {
+	// let:x        -->  const x = $.derived(() => $$slotProps.x);
+	// let:x={{y, z}}  -->  const derived_x = $.derived(() => { const { y, z } = $$slotProps.x; return { y, z }));
+	if (node.expression && node.expression.type !== 'Identifier') {
+		const name = context.state.scope.generate(node.name);
+		const bindings = context.state.scope.get_bindings(node);
+
+		for (const binding of bindings) {
+			context.state.transform[binding.node.name] = {
+				read: (node) => b.member(b.call('$.get', b.id(name)), node)
+			};
+		}
+
+		context.state.let_directives.push(
+			b.const(
+				name,
+				b.call(
+					'$.derived',
+					b.thunk(
+						b.block([
+							b.let(
+								/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
+									? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.object_pattern(node.expression.properties)
+									: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+										b.array_pattern(node.expression.elements),
+								b.member(b.id('$$slotProps'), node.name)
+							),
+							b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
+						])
+					)
+				)
+			)
+		);
+	} else {
+		const name = node.expression === null ? node.name : node.expression.name;
+		context.state.transform[name] = {
+			read: (node) => b.call('$.get', node)
+		};
+
+		context.state.let_directives.push(
+			b.const(name, create_derived(context.state, b.member(b.id('$$slotProps'), node.name)))
+		);
+	}
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js

@@ -0,0 +1,23 @@
+/** @import { MemberExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import * as b from '#compiler/builders';
+
+/**
+ * @param {MemberExpression} node
+ * @param {Context} context
+ */
+export function MemberExpression(node, context) {
+	// rewrite `this.#foo` as `this.#foo.v` inside a constructor
+	if (node.property.type === 'PrivateIdentifier') {
+		const field = context.state.state_fields.get('#' + node.property.name);
+
+		if (field) {
+			return context.state.in_constructor &&
+				(field.type === '$state.raw' || field.type === '$state')
+				? b.member(node, 'v')
+				: b.call('$.get', node);
+		}
+	}
+
+	context.next();
+}

package/dist/utils/node_modules/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js

@@ -0,0 +1,38 @@
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '#compiler/builders';
+import { build_event, build_event_handler } from './shared/events.js';
+
+const modifiers = /** @type {const} */ ([
+	'stopPropagation',
+	'stopImmediatePropagation',
+	'preventDefault',
+	'self',
+	'trusted',
+	'once'
+]);
+
+/**
+ * @param {AST.OnDirective} node
+ * @param {ComponentContext} context
+ */
+export function OnDirective(node, context) {
+	if (!node.expression) {
+		context.state.analysis.needs_props = true;
+	}
+
+	let handler = build_event_handler(node.expression, node.metadata.expression, context);
+
+	for (const modifier of modifiers) {
+		if (node.modifiers.includes(modifier)) {
+			handler = b.call('$.' + modifier, handler);
+		}
+	}
+
+	const capture = node.modifiers.includes('capture');
+	const passive =
+		node.modifiers.includes('passive') ||
+		(node.modifiers.includes('nonpassive') ? false : undefined);
+
+	return build_event(node.name, context.state.node, handler, capture, passive);
+}