vigla 0.0.0 → 0.2.0

package/src/runtime/dom/select.ts

@@ -0,0 +1,184 @@
+import { warn } from '../../shared/diagnostics.ts';
+import { namespaces } from '../../shared/html.ts';
+import type { Spread } from './attributes.ts';
+import { effect, teardown } from '../reactivity/effects.ts';
+import { original } from '../reactivity/proxy.ts';
+import { unowned } from './events.ts';
+import { onReset } from './reset.ts';
+import { BindingEdits } from './bindings.ts';
+
+interface Valued {
+	__value?: unknown;
+}
+
+function optionValue(option: HTMLOptionElement): unknown {
+	return '__value' in option ? (option as HTMLOptionElement & Valued).__value : option.value;
+}
+
+export function selected(element: Element, next: unknown): void {
+	if (next) {
+		if (!element.hasAttribute('selected')) element.setAttribute('selected', '');
+	} else element.removeAttribute('selected');
+}
+
+export function selectOption(select: HTMLSelectElement, value: unknown, mounting = false): void {
+	if (select.multiple) {
+		if (value == undefined) return;
+		if (!Array.isArray(value)) {
+			warn(
+				'select_multiple_invalid_value',
+				'The `value` property of a `<select multiple>` element should be an array, but it received a non-array value. The selection will be kept as is.'
+			);
+			return;
+		}
+		for (const option of select.options) option.selected = value.includes(optionValue(option));
+		return;
+	}
+	const chosen = original(value);
+	for (const option of select.options) {
+		if (Object.is(original(optionValue(option)), chosen)) {
+			option.selected = true;
+			return;
+		}
+	}
+	if (!mounting || value !== undefined) select.selectedIndex = -1;
+}
+
+interface Default {
+	value: unknown;
+	pending: boolean;
+}
+
+const defaults = new WeakMap<HTMLSelectElement, Default>();
+
+export function selectDefault(select: HTMLSelectElement, value: unknown, deferred = false): void {
+	const previous = defaults.get(select);
+	if (previous !== undefined) {
+		if (previous.value === value) return;
+		previous.value = value;
+		if (!previous.pending) applyDefault(select, true);
+		return;
+	}
+	defaults.set(select, { value, pending: deferred });
+	if (!deferred) applyDefault(select, '__value' in select);
+}
+
+function initializeDefault(select: HTMLSelectElement): void {
+	const value = defaults.get(select);
+	if (value?.pending) {
+		value.pending = false;
+		applyDefault(select, '__value' in select);
+	}
+}
+
+function applyDefault(select: HTMLSelectElement, preserve: boolean): void {
+	const value = defaults.get(select)?.value;
+	const multiple = select.multiple;
+	const choices = multiple ? (value ?? []) : null;
+	if (multiple && !Array.isArray(choices)) return;
+	const before = select.selectedIndex;
+	const selection = preserve && multiple ? new Set(select.selectedOptions) : null;
+	const chosen = original(value);
+	for (const option of select.options) {
+		const match = Array.isArray(choices)
+			? choices.includes(optionValue(option))
+			: Object.is(original(optionValue(option)), chosen);
+		selected(option, match);
+	}
+	if (!preserve) return;
+	if (selection !== null) {
+		for (const option of select.options) {
+			const kept = selection.has(option);
+			if (option.selected !== kept) option.selected = kept;
+		}
+	} else if (select.selectedIndex !== before) select.selectedIndex = before;
+}
+
+function mirrored(entry: MutationRecord): boolean {
+	const target =
+		entry.target.nodeType === 1 ? (entry.target as Element) : entry.target.parentElement;
+	if (target?.closest('selectedcontent') != null) return true;
+	if (entry.type !== 'childList') return false;
+	const changed = [...entry.addedNodes, ...entry.removedNodes];
+	return (
+		changed.length > 0 &&
+		changed.every(
+			(node) =>
+				(node as Element).namespaceURI === namespaces.html &&
+				(node as Element).localName === 'selectedcontent'
+		)
+	);
+}
+
+export function initSelect(element: Element, attributes?: () => Spread | undefined): void {
+	if (element.namespaceURI !== namespaces.html || element.localName !== 'select') return;
+	const select = element as HTMLSelectElement;
+	if (attributes !== undefined)
+		effect(() => {
+			const values = attributes();
+			if (values === undefined) return;
+			if ('defaultValue' in values) selectDefault(select, values.defaultValue);
+			initializeDefault(select);
+			if ('value' in values) selectValue(select, values.value);
+		});
+	const observer = new MutationObserver((entries) => {
+		if (entries.every(mirrored)) return;
+		if (defaults.has(select)) applyDefault(select, false);
+		if ('__value' in select) selectOption(select, (select as HTMLSelectElement & Valued).__value);
+	});
+	observer.observe(select, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: ['value']
+	});
+	teardown(() => observer.disconnect());
+}
+
+export function selectValue(select: HTMLSelectElement, value: unknown): void {
+	(select as HTMLSelectElement & Valued).__value = value;
+	selectOption(select, value, true);
+}
+
+export function bindSelect(
+	select: HTMLSelectElement,
+	get: () => unknown,
+	set: (value: unknown) => void = get as (value: unknown) => void
+): void {
+	let mounting = true;
+	const edits = new BindingEdits();
+	const change = (reset: boolean): void =>
+		unowned(() => {
+			const query = reset ? '[selected]' : ':checked';
+			let value: unknown;
+			if (select.multiple) {
+				value = [...select.querySelectorAll<HTMLOptionElement>(query)].map(optionValue);
+			} else {
+				const chosen =
+					select.querySelector<HTMLOptionElement>(query) ??
+					select.querySelector<HTMLOptionElement>('option:not([disabled])');
+				value = chosen && optionValue(chosen);
+			}
+			set(value);
+			edits.record();
+			(select as HTMLSelectElement & Valued).__value = value;
+		});
+	select.addEventListener('change', () => change(false));
+	teardown(onReset(select, () => change(true)));
+	effect(() => {
+		if (mounting) initializeDefault(select);
+		let value = get();
+		if (select.ownerDocument.activeElement === select && edits.hasCurrent()) return;
+		selectOption(select, value, mounting);
+		if (mounting && value === undefined) {
+			const chosen = select.querySelector<HTMLOptionElement>(':checked');
+			if (chosen !== null) {
+				value = optionValue(chosen);
+				set(value);
+			}
+		}
+		(select as HTMLSelectElement & Valued).__value = value;
+		mounting = false;
+	});
+	initSelect(select);
+}

package/src/runtime/dom/snippet.ts

@@ -0,0 +1,54 @@
+import { DEV } from 'esm-env';
+import { warn } from '../../shared/diagnostics.ts';
+import { invalidArgs, type RawFactory, type SnippetArgs } from '../../shared/snippet.ts';
+import { teardown } from '../reactivity/effects.ts';
+import { claim, cursor, hydrating } from './hydration.ts';
+import { format, htmlPolicy, type Format } from '../../shared/format.ts';
+import { parse } from './html.ts';
+import { trustedHtml } from './trusted.ts';
+
+type Snippet<Values extends unknown[]> = (anchor: ChildNode, ...args: SnippetArgs<Values>) => void;
+
+let nodeType: (() => unknown) | undefined;
+
+export function snippetArgs(args: IArguments): void {
+	nodeType ??= Object.getOwnPropertyDescriptor(Node.prototype, 'nodeType')!.get!;
+	try {
+		nodeType.call(args[0]);
+	} catch {
+		invalidArgs();
+	}
+	for (let index = 1; index < args.length; index++) {
+		if (typeof args[index] !== 'function') invalidArgs();
+	}
+}
+
+export function createRawSnippet<Values extends unknown[]>(
+	factory: RawFactory<Values>,
+	given: Format = format
+): Snippet<Values> {
+	const policy = htmlPolicy(given);
+	return (anchor, ...args) => {
+		const snippet = factory(...args);
+		let node: ChildNode;
+		if (hydrating) {
+			node = cursor;
+			claim(node.nextSibling);
+		} else {
+			const html = trustedHtml(snippet.render().trim(), policy);
+			const content = parse(html, 0, anchor.ownerDocument as Document);
+			const first = content.firstChild;
+			if (DEV && (first?.nodeType !== 1 || first.nextSibling !== null)) {
+				warn(
+					'invalid_raw_snippet_render',
+					'The `render` function passed to `createRawSnippet` should return HTML for a single element'
+				);
+			}
+			if (first === null) return;
+			node = first;
+			anchor.before(node);
+		}
+		const cleanup = snippet.setup?.(node as Element);
+		if (typeof cleanup === 'function') teardown(cleanup);
+	};
+}

package/src/runtime/dom/styles.ts

@@ -0,0 +1,26 @@
+import { effect } from '../reactivity/effects.ts';
+import { owner } from '../reactivity/tracking.ts';
+import { position } from './range.ts';
+
+export interface Style {
+	readonly hash: string;
+	readonly code: string;
+}
+
+function container(anchor: Node): ParentNode & Node {
+	const root = anchor.getRootNode();
+	if ((root as ShadowRoot).host) return root as ShadowRoot;
+	return (root as Document).head ?? (anchor.ownerDocument ?? document).head;
+}
+
+export function appendStyles(anchor: Node, style: Style): void {
+	const parent = owner;
+	effect(() => {
+		const target = container(position(parent) ?? anchor);
+		if (target.querySelector(`#${style.hash}`) !== null) return;
+		const element = document.createElement('style');
+		element.id = style.hash;
+		element.textContent = style.code;
+		target.appendChild(element);
+	});
+}

package/src/runtime/dom/swap.ts

@@ -0,0 +1,117 @@
+import { DEV } from 'esm-env';
+import { failure } from '../../shared/diagnostics.ts';
+import { OPEN_ELSE } from '../../shared/markers.ts';
+import { block } from '../reactivity/effects.ts';
+import { Branches, REPAIRED } from './branches.ts';
+import { hydrating, instruction } from './hydration.ts';
+import type { Render } from './template.ts';
+
+export type Snippet = (anchor: ChildNode, ...args: (() => unknown)[]) => void;
+
+export type Mountable = (anchor: ChildNode, props: Record<string, unknown>) => unknown;
+
+function swap<T>(
+	node: ChildNode,
+	select: () => T,
+	content: (value: NonNullable<T>) => Render | null,
+	marked: boolean
+): void {
+	const branches = new Branches<T | null>(node, true);
+	let first = true;
+	block(() => {
+		const value = select() ?? null;
+		const render = (): Render | null => (value === null ? null : content(value as NonNullable<T>));
+		if (!first) {
+			branches.show(value, render);
+			return;
+		}
+		first = false;
+		const shown = render();
+		const matched =
+			hydrating && marked ? (instruction(node) !== OPEN_ELSE) === (shown !== null) : null;
+		branches.start(value, shown, matched, REPAIRED);
+	});
+}
+
+export function render(
+	node: ChildNode,
+	snippet: () => Snippet | null | undefined,
+	...args: (() => unknown)[]
+): void {
+	swap(
+		node,
+		() => {
+			const fn = snippet();
+			if (DEV && fn == null)
+				throw failure(
+					'invalid_snippet',
+					'Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`'
+				);
+			return fn;
+		},
+		(fn) => (anchor) => fn(anchor, ...args),
+		false
+	);
+}
+
+export function component(
+	node: ChildNode,
+	reference: () => Mountable | false | 0 | '' | null | undefined,
+	mount: (anchor: ChildNode, component: Mountable) => void
+): void {
+	swap(node, reference, (fn) => (fn ? (anchor) => mount(anchor, fn) : null), true);
+}
+
+type Props = Record<PropertyKey, unknown>;
+
+type PropsSource = Props | (() => Props | null | undefined);
+
+function resolve(source: PropsSource): Props | null | undefined {
+	return typeof source === 'function' ? source() : source;
+}
+
+function owning(sources: readonly PropsSource[], key: PropertyKey): Props | undefined {
+	for (let index = sources.length - 1; index >= 0; index--) {
+		const found = resolve(sources[index] as PropsSource);
+		if (found != null && Object.hasOwn(found, key)) return found;
+	}
+	return undefined;
+}
+
+export function spreadProps(...sources: PropsSource[]): Props {
+	return new Proxy({} as Props, {
+		get(_target, key) {
+			return owning(sources, key)?.[key];
+		},
+		set(_target, key, value) {
+			const found = owning(sources, key);
+			const setter =
+				found === undefined ? undefined : Object.getOwnPropertyDescriptor(found, key)?.set;
+			if (setter === undefined) return false;
+			setter(value);
+			return true;
+		},
+		has(_target, key) {
+			return owning(sources, key) !== undefined;
+		},
+		ownKeys() {
+			const keys = new Set<string | symbol>();
+			for (const source of sources) {
+				const found = resolve(source);
+				if (found != null) for (const key of Reflect.ownKeys(found)) keys.add(key);
+			}
+			return [...keys];
+		},
+		getOwnPropertyDescriptor(_target, key) {
+			const found = owning(sources, key);
+			if (found === undefined) return undefined;
+			const descriptor = Object.getOwnPropertyDescriptor(found, key);
+			if (descriptor?.get !== undefined) {
+				return { enumerable: true, configurable: true, get: descriptor.get, set: descriptor.set };
+			}
+			return { enumerable: true, configurable: true, value: found[key], writable: true };
+		}
+	});
+}
+
+export function noop(): void {}

package/src/runtime/dom/targets.ts

@@ -0,0 +1,96 @@
+import { effect, teardown, template } from '../reactivity/effects.ts';
+import { setOwner, untrack } from '../reactivity/tracking.ts';
+import { listen } from './events.ts';
+
+type Get<T> = () => T;
+type Set<T> = (value: T) => void;
+
+function detached<T>(fn: () => T): T {
+	const previous = setOwner(null);
+	try {
+		return untrack(fn);
+	} finally {
+		setOwner(previous);
+	}
+}
+
+export function on(
+	target: EventTarget,
+	type: string,
+	handler: EventListener,
+	capture = false,
+	passive?: boolean
+): void {
+	const remove = listen(target, type, handler, capture, passive);
+	teardown(remove);
+}
+
+function watch(target: EventTarget, types: readonly string[], handler: () => void): void {
+	handler();
+	for (const type of types) target.addEventListener(type, handler);
+	teardown(() => {
+		for (const type of types) target.removeEventListener(type, handler);
+	});
+}
+
+export function bindWindowSize(
+	name: 'innerWidth' | 'innerHeight' | 'outerWidth' | 'outerHeight',
+	set: Set<number>
+): void {
+	watch(window, ['resize'], () => detached(() => set(window[name])));
+}
+
+export function bindOnline(set: Set<boolean>): void {
+	watch(window, ['online', 'offline'], () => detached(() => set(navigator.onLine)));
+}
+
+export function bindActiveElement(set: Set<Element | null>): void {
+	const handler = (event?: Event): void => {
+		if (event?.type === 'focusout' && (event as FocusEvent).relatedTarget) return;
+		detached(() => set(document.activeElement));
+	};
+	handler();
+	document.addEventListener('focusin', handler);
+	document.addEventListener('focusout', handler);
+	teardown(() => {
+		document.removeEventListener('focusin', handler);
+		document.removeEventListener('focusout', handler);
+	});
+}
+
+export function bindWindowScroll(axis: 'x' | 'y', get: Get<number>, set: Set<number> = get): void {
+	const horizontal = axis === 'x';
+	let scrolling = false;
+	let timeout: ReturnType<typeof setTimeout> | undefined;
+	const settle = (): void => {
+		scrolling = false;
+	};
+	const hold = (): void => {
+		scrolling = true;
+		clearTimeout(timeout);
+		timeout = setTimeout(settle, 100);
+	};
+	const handler = (): void =>
+		detached(() => {
+			hold();
+			set(horizontal ? window.scrollX : window.scrollY);
+		});
+	window.addEventListener('scroll', handler, { passive: true });
+	let first = true;
+	template(() => {
+		const value = get();
+		if (first) {
+			first = false;
+			return;
+		}
+		if (scrolling || value == null) return;
+		hold();
+		if (horizontal) window.scrollTo(value, window.scrollY);
+		else window.scrollTo(window.scrollX, value);
+	});
+	effect(handler);
+	teardown(() => {
+		clearTimeout(timeout);
+		window.removeEventListener('scroll', handler);
+	});
+}