vigla 0.0.0 → 0.1.0

package/src/runtime/classes/spring.ts

@@ -0,0 +1,199 @@
+import { template } from '../reactivity/effects.ts';
+import type { Source } from '../reactivity/graph.ts';
+import { set, state } from '../reactivity/sources.ts';
+import { get } from '../reactivity/reads.ts';
+import { loop, type Task } from './frames.ts';
+
+export interface SpringOptions {
+	stiffness?: number;
+	damping?: number;
+	precision?: number;
+}
+
+export interface SpringUpdateOptions {
+	instant?: boolean;
+	preserveMomentum?: number;
+}
+
+interface Step {
+	readonly mass: number;
+	readonly dt: number;
+	readonly stiffness: number;
+	readonly damping: number;
+	readonly precision: number;
+	settled: boolean;
+}
+
+function isDate(value: unknown): value is Date {
+	return Object.prototype.toString.call(value) === '[object Date]';
+}
+
+function clamp(value: number): number {
+	return Math.max(0, Math.min(1, value));
+}
+
+function advance(step: Step, last: unknown, current: unknown, target: unknown): unknown {
+	if (typeof current === 'number' || isDate(current)) {
+		const now = +current;
+		const delta = +(target as number) - now;
+		const velocity = (now - +(last as number)) / (step.dt || 1 / 60);
+		const acceleration = (step.stiffness * delta - step.damping * velocity) * step.mass;
+		const moved = (velocity + acceleration) * step.dt;
+		if (Math.abs(moved) < step.precision && Math.abs(delta) < step.precision) return target;
+		step.settled = false;
+		return isDate(current) ? new Date(now + moved) : now + moved;
+	}
+	if (Array.isArray(current)) {
+		return current.map((item, index) =>
+			advance(step, (last as unknown[])[index], item, (target as unknown[])[index])
+		);
+	}
+	if (typeof current === 'object' && current !== null) {
+		const next: Record<string, unknown> = {};
+		for (const key in current) {
+			next[key] = advance(
+				step,
+				(last as Record<string, unknown>)[key],
+				(current as Record<string, unknown>)[key],
+				(target as Record<string, unknown>)[key]
+			);
+		}
+		return next;
+	}
+	throw new Error(`Cannot spring ${typeof current} values`);
+}
+
+interface Pending {
+	readonly promise: Promise<void>;
+	resolve(): void;
+	reject(error: Error): void;
+}
+
+function pending(): Pending {
+	let resolve!: () => void;
+	let reject!: (error: Error) => void;
+	const promise = new Promise<void>((done, fail) => {
+		resolve = done;
+		reject = fail;
+	});
+	promise.catch(() => {});
+	return { promise, resolve, reject };
+}
+
+export class Spring<T> {
+	readonly #stiffness = state(0.15);
+	readonly #damping = state(0.8);
+	readonly #precision = state(0.01);
+	readonly #current: Source<T>;
+	readonly #target: Source<T>;
+	#last: T;
+	#time = 0;
+	#mass = 1;
+	#momentum = 0;
+	#task: Task | null = null;
+	#pending: Pending | null = null;
+
+	constructor(value: T, options: SpringOptions = {}) {
+		this.#current = state(value);
+		this.#target = state(value);
+		this.#last = value;
+		if (typeof options.stiffness === 'number') this.#stiffness.v = clamp(options.stiffness);
+		if (typeof options.damping === 'number') this.#damping.v = clamp(options.damping);
+		if (typeof options.precision === 'number') this.#precision.v = options.precision;
+	}
+
+	static of<U>(fn: () => U, options?: SpringOptions): Spring<U> {
+		const spring = new Spring(fn(), options);
+		template(() => {
+			void spring.set(fn());
+		});
+		return spring;
+	}
+
+	#run(value: T): Promise<void> {
+		set(this.#target, value);
+		if (this.#task === null) {
+			const recovery = 1000 / (this.#momentum * 60);
+			let first = true;
+			this.#task = loop((now) => {
+				if (first) {
+					first = false;
+					this.#time = now;
+				}
+				this.#mass = Math.min(this.#mass + recovery, 1);
+				const elapsed = Math.min(now - this.#time, 1000 / 30);
+				const step: Step = {
+					mass: this.#mass,
+					dt: (elapsed * 60) / 1000,
+					stiffness: this.#stiffness.v,
+					damping: this.#damping.v,
+					precision: this.#precision.v,
+					settled: true
+				};
+				const next = advance(step, this.#last, this.#current.v, this.#target.v) as T;
+				this.#last = this.#current.v;
+				this.#time = now;
+				set(this.#current, next);
+				if (step.settled) this.#task = null;
+				return !step.settled;
+			});
+		}
+		return this.#task.promise;
+	}
+
+	set(value: T, options?: SpringUpdateOptions): Promise<void> {
+		this.#pending?.reject(new Error('Aborted'));
+		if (options?.instant || this.#current.v === undefined) {
+			this.#task?.abort();
+			this.#task = null;
+			set(this.#current, set(this.#target, value));
+			this.#last = value;
+			return Promise.resolve();
+		}
+		if (options?.preserveMomentum) {
+			this.#mass = 0;
+			this.#momentum = options.preserveMomentum;
+		}
+		const settled = (this.#pending = pending());
+		void this.#run(value).then(() => {
+			if (settled === this.#pending) settled.resolve();
+		});
+		return settled.promise;
+	}
+
+	get current(): T {
+		return get(this.#current);
+	}
+
+	get target(): T {
+		return get(this.#target);
+	}
+
+	set target(value: T) {
+		void this.set(value);
+	}
+
+	get stiffness(): number {
+		return get(this.#stiffness);
+	}
+
+	set stiffness(value: number) {
+		set(this.#stiffness, clamp(value));
+	}
+
+	get damping(): number {
+		return get(this.#damping);
+	}
+
+	set damping(value: number) {
+		set(this.#damping, clamp(value));
+	}
+
+	get precision(): number {
+		return get(this.#precision);
+	}
+
+	set precision(value: number) {
+		set(this.#precision, value);
+	}
+}

package/src/runtime/classes/subscriber.ts

@@ -0,0 +1,50 @@
+import { template, tracking } from '../reactivity/effects.ts';
+import type { Source } from '../reactivity/graph.ts';
+import { expire, set, source } from '../reactivity/sources.ts';
+import { get } from '../reactivity/reads.ts';
+import { untrack } from '../reactivity/tracking.ts';
+
+export type Start = (update: () => void) => (() => void) | void;
+
+export function bump(source: Source<number>): void {
+	set(source, source.v + 1);
+}
+
+export function createSubscriber(start: Start): () => void {
+	const version = source(0);
+	let subscribers = 0;
+	let stop: (() => void) | void;
+	const update = (): void => bump(version);
+	const release = (): void => {
+		subscribers -= 1;
+		if (subscribers > 0) return;
+		const stopping = stop;
+		stop = undefined;
+		stopping?.();
+		expire(version);
+	};
+	return () => {
+		if (!tracking()) return;
+		get(version);
+		template(() => {
+			if (subscribers === 0) stop = untrack(() => start(update));
+			subscribers += 1;
+			return () => queueMicrotask(release);
+		});
+	};
+}
+
+export class Subscribed<T> {
+	readonly #read: () => T;
+	readonly #subscribe: () => void;
+
+	constructor(read: () => T, start: Start) {
+		this.#read = read;
+		this.#subscribe = createSubscriber(start);
+	}
+
+	get current(): T {
+		this.#subscribe();
+		return this.#read();
+	}
+}

package/src/runtime/classes/tween.ts

@@ -0,0 +1,128 @@
+import { template } from '../reactivity/effects.ts';
+import type { Source } from '../reactivity/graph.ts';
+import { set, state } from '../reactivity/sources.ts';
+import { get } from '../reactivity/reads.ts';
+import { loop, type Task } from './frames.ts';
+
+export type Interpolator<T> = (from: T, to: T) => (progress: number) => T;
+
+export interface TweenOptions<T> {
+	delay?: number;
+	duration?: number | ((from: T, to: T) => number);
+	easing?: (progress: number) => number;
+	interpolate?: Interpolator<T>;
+}
+
+function linear(progress: number): number {
+	return progress;
+}
+
+function isDate(value: unknown): value is Date {
+	return Object.prototype.toString.call(value) === '[object Date]';
+}
+
+function between(from: unknown, to: unknown): (progress: number) => unknown {
+	if (from === to || from !== from) return () => from;
+	const kind = typeof from;
+	if (kind !== typeof to || Array.isArray(from) !== Array.isArray(to))
+		throw new Error('Cannot interpolate values of different type');
+	if (Array.isArray(from)) {
+		const parts = (to as unknown[]).map((item, index) => between(from[index], item));
+		return (progress) => parts.map((part) => part(progress));
+	}
+	if (kind === 'object') {
+		if (from === null || to === null) throw new Error('Object cannot be null');
+		if (isDate(from) && isDate(to)) {
+			const start = from.getTime();
+			const delta = to.getTime() - start;
+			return (progress) => new Date(start + progress * delta);
+		}
+		const keys = Object.keys(to as object);
+		const parts = keys.map((key) =>
+			between((from as Record<string, unknown>)[key], (to as Record<string, unknown>)[key])
+		);
+		return (progress) => {
+			const result: Record<string, unknown> = {};
+			for (let index = 0; index < keys.length; index++)
+				result[keys[index] as string] = (parts[index] as (progress: number) => unknown)(progress);
+			return result;
+		};
+	}
+	if (kind === 'number') {
+		const start = from as number;
+		const delta = (to as number) - start;
+		return (progress) => start + progress * delta;
+	}
+	return () => to;
+}
+
+export class Tween<T> {
+	readonly #current: Source<T>;
+	readonly #target: Source<T>;
+	readonly #defaults: TweenOptions<T>;
+	#task: Task | null = null;
+
+	constructor(value: T, options: TweenOptions<T> = {}) {
+		this.#current = state(value);
+		this.#target = state(value);
+		this.#defaults = options;
+	}
+
+	static of<U>(fn: () => U, options?: TweenOptions<U>): Tween<U> {
+		const tween = new Tween(fn(), options);
+		template(() => {
+			tween.set(fn());
+		});
+		return tween;
+	}
+
+	set(value: T, options?: TweenOptions<T>): Promise<void> {
+		set(this.#target, value);
+		const merged = { ...this.#defaults, ...options };
+		const delay = merged.delay ?? 0;
+		const easing = merged.easing ?? linear;
+		const interpolate = merged.interpolate ?? (between as Interpolator<T>);
+		let duration = merged.duration ?? 400;
+		if (duration === 0) {
+			this.#task?.abort();
+			set(this.#current, value);
+			return Promise.resolve();
+		}
+		const previous = this.#task;
+		let start = -1;
+		let started = false;
+		let fn: (progress: number) => T;
+		const task = loop((now) => {
+			if (start === -1) start = now + delay;
+			if (now < start) return true;
+			if (!started) {
+				started = true;
+				const from = this.#current.v;
+				fn = interpolate(from, value);
+				if (typeof duration === 'function') duration = duration(from, value);
+				previous?.abort();
+			}
+			const elapsed = now - start;
+			if (elapsed > (duration as number)) {
+				set(this.#current, value);
+				return false;
+			}
+			set(this.#current, fn(easing(elapsed / (duration as number))));
+			return true;
+		});
+		this.#task = task;
+		return task.promise;
+	}
+
+	get current(): T {
+		return get(this.#current);
+	}
+
+	get target(): T {
+		return get(this.#target);
+	}
+
+	set target(value: T) {
+		void this.set(value);
+	}
+}

package/src/runtime/classes/url.ts

@@ -0,0 +1,152 @@
+import { set, state } from '../reactivity/sources.ts';
+import { get } from '../reactivity/reads.ts';
+import { bind, ReactiveURLSearchParams, replace } from './search.ts';
+
+export class ReactiveURL extends URL {
+	readonly #protocol = state(super.protocol);
+	readonly #username = state(super.username);
+	readonly #password = state(super.password);
+	readonly #hostname = state(super.hostname);
+	readonly #port = state(super.port);
+	readonly #pathname = state(super.pathname);
+	readonly #hash = state(super.hash);
+	readonly #search = state(super.search);
+	readonly #params: ReactiveURLSearchParams;
+
+	constructor(url: string | URL, base?: string | URL) {
+		const parsed = new URL(url, base);
+		super(parsed);
+		this.#params = new ReactiveURLSearchParams(parsed.searchParams);
+		bind(this.#params, this);
+	}
+
+	override get hash(): string {
+		return get(this.#hash);
+	}
+
+	override set hash(value: string) {
+		super.hash = value;
+		set(this.#hash, super.hash);
+	}
+
+	override get host(): string {
+		get(this.#hostname);
+		get(this.#port);
+		return super.host;
+	}
+
+	override set host(value: string) {
+		super.host = value;
+		set(this.#hostname, super.hostname);
+		set(this.#port, super.port);
+	}
+
+	override get hostname(): string {
+		return get(this.#hostname);
+	}
+
+	override set hostname(value: string) {
+		super.hostname = value;
+		set(this.#hostname, super.hostname);
+	}
+
+	override get href(): string {
+		get(this.#protocol);
+		get(this.#username);
+		get(this.#password);
+		get(this.#hostname);
+		get(this.#port);
+		get(this.#pathname);
+		get(this.#hash);
+		get(this.#search);
+		return super.href;
+	}
+
+	override set href(value: string) {
+		super.href = value;
+		set(this.#protocol, super.protocol);
+		set(this.#username, super.username);
+		set(this.#password, super.password);
+		set(this.#hostname, super.hostname);
+		set(this.#port, super.port);
+		set(this.#pathname, super.pathname);
+		set(this.#hash, super.hash);
+		set(this.#search, super.search);
+		replace(this.#params, super.searchParams);
+	}
+
+	override get password(): string {
+		return get(this.#password);
+	}
+
+	override set password(value: string) {
+		super.password = value;
+		set(this.#password, super.password);
+	}
+
+	override get pathname(): string {
+		return get(this.#pathname);
+	}
+
+	override set pathname(value: string) {
+		super.pathname = value;
+		set(this.#pathname, super.pathname);
+	}
+
+	override get port(): string {
+		return get(this.#port);
+	}
+
+	override set port(value: string) {
+		super.port = value;
+		set(this.#port, super.port);
+	}
+
+	override get protocol(): string {
+		return get(this.#protocol);
+	}
+
+	override set protocol(value: string) {
+		super.protocol = value;
+		set(this.#protocol, super.protocol);
+		set(this.#port, super.port);
+	}
+
+	override get search(): string {
+		return get(this.#search);
+	}
+
+	override set search(value: string) {
+		super.search = value;
+		set(this.#search, super.search);
+		replace(this.#params, super.searchParams);
+	}
+
+	override get username(): string {
+		return get(this.#username);
+	}
+
+	override set username(value: string) {
+		super.username = value;
+		set(this.#username, super.username);
+	}
+
+	override get origin(): string {
+		get(this.#protocol);
+		get(this.#hostname);
+		get(this.#port);
+		return super.origin;
+	}
+
+	override get searchParams(): ReactiveURLSearchParams {
+		return this.#params;
+	}
+
+	override toString(): string {
+		return this.href;
+	}
+
+	override toJSON(): string {
+		return this.href;
+	}
+}

package/src/runtime/classes/window-server.ts

@@ -0,0 +1,27 @@
+export interface Absent<T> {
+	readonly current: T | undefined;
+}
+
+function absent<T>(): Absent<T> {
+	return { current: undefined };
+}
+
+export const scrollX = absent<number>();
+
+export const scrollY = absent<number>();
+
+export const innerWidth = absent<number>();
+
+export const innerHeight = absent<number>();
+
+export const outerWidth = absent<number>();
+
+export const outerHeight = absent<number>();
+
+export const screenLeft = absent<number>();
+
+export const screenTop = absent<number>();
+
+export const online = absent<boolean>();
+
+export const devicePixelRatio = absent<number>();

package/src/runtime/classes/window.ts

@@ -0,0 +1,72 @@
+import { set, source } from '../reactivity/sources.ts';
+import { get } from '../reactivity/reads.ts';
+import { Subscribed, type Start } from './subscriber.ts';
+
+function on(...events: string[]): Start {
+	return (update) => {
+		for (const event of events) window.addEventListener(event, update);
+		return () => {
+			for (const event of events) window.removeEventListener(event, update);
+		};
+	};
+}
+
+function polled(read: () => number): Start {
+	return (update) => {
+		let value = read();
+		let frame = requestAnimationFrame(function check() {
+			frame = requestAnimationFrame(check);
+			if (value !== (value = read())) update();
+		});
+		return () => cancelAnimationFrame(frame);
+	};
+}
+
+export const scrollX = new Subscribed(() => window.scrollX, on('scroll'));
+
+export const scrollY = new Subscribed(() => window.scrollY, on('scroll'));
+
+export const innerWidth = new Subscribed(() => window.innerWidth, on('resize'));
+
+export const innerHeight = new Subscribed(() => window.innerHeight, on('resize'));
+
+export const outerWidth = new Subscribed(() => window.outerWidth, on('resize'));
+
+export const outerHeight = new Subscribed(() => window.outerHeight, on('resize'));
+
+export const screenLeft = new Subscribed(
+	() => window.screenLeft,
+	polled(() => window.screenLeft)
+);
+
+export const screenTop = new Subscribed(
+	() => window.screenTop,
+	polled(() => window.screenTop)
+);
+
+export const online = new Subscribed(() => navigator.onLine, on('online', 'offline'));
+
+class PixelRatio {
+	readonly #ratio = source(window.devicePixelRatio);
+
+	constructor() {
+		this.#watch();
+	}
+
+	#watch(): void {
+		const list = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+		const changed = (): void => {
+			list.removeEventListener('change', changed);
+			set(this.#ratio, window.devicePixelRatio);
+			this.#watch();
+		};
+		list.addEventListener('change', changed);
+	}
+
+	get current(): number {
+		get(this.#ratio);
+		return window.devicePixelRatio;
+	}
+}
+
+export const devicePixelRatio = new PixelRatio();