@oscarpalmer/mora 0.26.0 → 0.28.0

package/dist/value/array.d.mts

@@ -0,0 +1,156 @@
+import { Reactive } from "./reactive.mjs";
+import { Computed } from "./computed.mjs";
+import { ReactiveOptions, Unsubscribe } from "../models.mjs";
+import { PROPERTY_LENGTH } from "../constants.mjs";
+
+//#region src/value/array.d.ts
+declare class ReactiveArray<Item> extends Reactive<Item[], Item> {
+  #private;
+  /**
+   * The length of the array
+   */
+  get length(): number;
+  /**
+   * Set the length of the array
+   */
+  set length(value: number);
+  constructor(value: Item[], options?: ReactiveOptions<Item>);
+  /**
+   * Clear the array
+   */
+  clear(): void;
+  /**
+   * Create a computed, filtered array
+   * @param callback Callback to evaluate each item
+   * @return Computed array of filtered items
+   */
+  filter(callback: (item: Item, index: number, array: Item[]) => boolean): Computed<Item[]>;
+  /**
+   * @inheritdoc
+   */
+  get(): Item[];
+  /**
+   * Get the value at an index
+   * @param index Index of item to get _(if negative, starts from the end)_
+   * @returns Item at index, or `undefined` if it doesn't exist
+   */
+  get(index: number): Item | undefined;
+  /**
+   * Get the length of the array
+   * @returns Length of the array
+   */
+  get(property: typeof PROPERTY_LENGTH): number;
+  /**
+   * Create a computed, mapped array
+   * @param callback Callback to transform each item
+   * @return Computed array of mapped items
+   */
+  map<Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped): Computed<Mapped[]>;
+  /**
+   * Notify dependents of changes
+   *
+   * _This bypasses equality checks and will immediately notify dependents.
+   * Use this only if you're modifying nested data that would be ignored by equality checks._
+   */
+  notify(): void;
+  /**
+   * @inheritdoc
+   */
+  peek(): Item[];
+  /**
+   * Get the value at an index _(without reactivity)_
+   * @param index Index of item to get _(if negative, starts from the end)_
+   * @returns Item at index, or `undefined` if it doesn't exist
+   */
+  peek(index: number): Item | undefined;
+  /**
+   * Get the length of the array _(without reactivity)_
+   * @returns Length of the array
+   */
+  peek(property: typeof PROPERTY_LENGTH): number;
+  /**
+   * Remove and return the last item of the array
+   * @returns Removed item, or `undefined` if the array is empty
+   */
+  pop(): Item | undefined;
+  /**
+   * Add items to the end of the array
+   * @param items Items to add
+   * @returns New array length
+   */
+  push(...items: Item[]): number;
+  /**
+   * Set the value
+   * @param value New array of items _(defaults to an empty array)_
+   */
+  set(value?: Item[] | (() => null | undefined | Item[] | Promise<null | undefined | Item[]>) | Promise<null | undefined | Item[]>): void;
+  /**
+   * Set the value at an index
+   * @param index Index of item to set __(if negative, starts from the end)_
+   * @param value New item
+   */
+  set(index: number, value: Item | (() => Item | Promise<Item>) | Promise<Item>): void;
+  /**
+   * Set the length of the array
+   * @param value New array length
+   */
+  set(property: typeof PROPERTY_LENGTH, value: number): void;
+  /**
+   * Remove and return the first item of the array
+   * @returns Removed item, or `undefined` if the array is empty
+   */
+  shift(): Item | undefined;
+  /**
+   * Remove and return items from the array _(and optionally add new items)_
+   * @param from Index to start removing items from
+   * @param to Index to stop removing items at _(defaults to the end of the array)_
+   * @param items Optional items to add
+   * @returns Removed items
+   */
+  splice(from: number, to?: number, ...items: Item[]): Item[];
+  /**
+   * @inheritdoc
+   */
+  subscribe(callback: (value: Item[]) => void): Unsubscribe;
+  /**
+   * Subscribe to changes at a specific index
+   * @param index Index of item to subscribe to
+   * @param callback Callback for changes
+   * @returns Unsubscribe callback
+   */
+  subscribe(index: number, callback: (value: Item | undefined) => void): Unsubscribe;
+  /**
+   * Add items to the beginning of the array
+   * @param items Items to add
+   * @returns New array length
+   */
+  unshift(...items: Item[]): number;
+  /**
+   * Update the value _(based on the current value)_
+   * @param callback Callback to update the value
+   */
+  update(callback: (value: Item[]) => Item[]): void;
+}
+/**
+ * Create a reactive array from a function result
+ * @param value Initial array of items
+ * @param options Reactivity options
+ * @returns Reactive array
+ */
+declare function array<Item>(value: () => Item[] | Promise<Item[]>, options?: ReactiveOptions<Item>): ReactiveArray<Item>;
+/**
+ * Create a reactive array from a promise
+ * @param value Initial array of items
+ * @param options Reactivity options
+ * @returns Reactive array
+ */
+declare function array<Item>(value: Promise<Item[]>, options?: ReactiveOptions<Item>): ReactiveArray<Item>;
+/**
+ * Create a reactive array
+ * @param value Initial array of items
+ * @param options Reactivity options
+ * @returns Reactive array
+ */
+declare function array<Item>(value: Item[], options?: ReactiveOptions<Item>): ReactiveArray<Item>;
+//#endregion
+export { ReactiveArray, array };

package/dist/value/array.mjs

@@ -0,0 +1,165 @@
+import { METHODS_AFFECTING_LENGTH, METHODS_UPDATE, NAME_ARRAY } from "../constants.mjs";
+import { noop, subscribe } from "../subscription.mjs";
+import { Reactive } from "./reactive.mjs";
+import { computed } from "./computed.mjs";
+import { emitValue, equalArrays, getValue } from "../helpers/value.mjs";
+import { emityProxyValues, getReactiveValueInProxy, setProxyValue, setValueInProxy } from "../helpers/proxy.mjs";
+import { signal } from "./signal.mjs";
+//#region src/value/array.ts
+var ReactiveArray = class extends Reactive {
+	#indiced = /* @__PURE__ */ new Map();
+	#size = signal(0);
+	/**
+	* The length of the array
+	*/
+	get length() {
+		return this.#size.get();
+	}
+	/**
+	* Set the length of the array
+	*/
+	set length(value) {
+		if (typeof value === "number" && value >= 0 && value !== this.state.value.length) this.get().length = value;
+	}
+	constructor(value, options) {
+		super(NAME_ARRAY, new Proxy(value, {
+			get: (target, property) => METHODS_UPDATE.has(property) ? updateArray(property, target, this.state, this.#size) : Reflect.get(target, property),
+			set: (target, property, value) => setValueInProxy({
+				property,
+				target,
+				value,
+				isArray: true,
+				state: this.state,
+				length: this.#size
+			})
+		}), options);
+		this.#size.set(value.length);
+	}
+	/**
+	* Clear the array
+	*/
+	clear() {
+		this.length = 0;
+	}
+	/**
+	* Create a computed, filtered array
+	* @param callback Callback to evaluate each item
+	* @return Computed array of filtered items
+	*/
+	filter(callback) {
+		return computed(() => this.get().filter(callback));
+	}
+	get(first) {
+		if (typeof first === "number") return getReactiveValueInProxy(this, this.#indiced, first, true).get();
+		return first === "length" ? this.length : getValue(this.state);
+	}
+	/**
+	* Create a computed, mapped array
+	* @param callback Callback to transform each item
+	* @return Computed array of mapped items
+	*/
+	map(callback) {
+		return computed(() => this.get().map(callback));
+	}
+	/**
+	* Notify dependents of changes
+	*
+	* _This bypasses equality checks and will immediately notify dependents.
+	* Use this only if you're modifying nested data that would be ignored by equality checks._
+	*/
+	notify() {
+		emityProxyValues(this.state, this.#indiced);
+	}
+	peek(value) {
+		if (value === "length") return this.#size.peek();
+		return typeof value === "number" ? this.state.value.at(value) : this.state.value.slice();
+	}
+	/**
+	* Remove and return the last item of the array
+	* @returns Removed item, or `undefined` if the array is empty
+	*/
+	pop() {
+		return this.state.value.pop();
+	}
+	/**
+	* Add items to the end of the array
+	* @param items Items to add
+	* @returns New array length
+	*/
+	push(...items) {
+		return this.state.value.push(...items);
+	}
+	set(first, second) {
+		setProxyValue(true, this.state, isArrayValue, isArrayIndex, setArray, setAtIndex, first, second);
+	}
+	/**
+	* Remove and return the first item of the array
+	* @returns Removed item, or `undefined` if the array is empty
+	*/
+	shift() {
+		return this.state.value.shift();
+	}
+	/**
+	* Remove and return items from the array _(and optionally add new items)_
+	* @param from Index to start removing items from
+	* @param to Index to stop removing items at _(defaults to the end of the array)_
+	* @param items Optional items to add
+	* @returns Removed items
+	*/
+	splice(from, to, ...items) {
+		return this.state.value.splice(from, to ?? this.state.value.length, ...items);
+	}
+	subscribe(first, second) {
+		if (typeof first === "number" && typeof second === "function") return getReactiveValueInProxy(this, this.#indiced, first, true).subscribe(second);
+		return typeof first === "function" ? subscribe(this.state, first) : noop;
+	}
+	/**
+	* Add items to the beginning of the array
+	* @param items Items to add
+	* @returns New array length
+	*/
+	unshift(...items) {
+		return this.state.value.unshift(...items);
+	}
+	/**
+	* Update the value _(based on the current value)_
+	* @param callback Callback to update the value
+	*/
+	update(callback) {
+		const updated = callback(this.state.value);
+		if (updated == null || Array.isArray(updated)) this.set(updated);
+	}
+};
+function array(value, options) {
+	const instance = new ReactiveArray([], options);
+	instance.set(value);
+	return instance;
+}
+function isArrayIndex(value) {
+	return typeof value === "number";
+}
+function isArrayValue(value) {
+	return value == null || Array.isArray(value);
+}
+function updateArray(type, array, state, length) {
+	const affectsLength = METHODS_AFFECTING_LENGTH.has(type);
+	const previousArray = affectsLength ? [] : array.slice();
+	const previousLength = array.length;
+	return (...args) => {
+		const result = array[type](...args);
+		if (affectsLength ? array.length !== previousLength : !equalArrays(state, previousArray, array)) {
+			emitValue(state);
+			length.set(array.length);
+		}
+		return result;
+	};
+}
+function setArray(state, value) {
+	state.value.splice(0, state.value.length, ...value ?? []);
+}
+function setAtIndex(state, index, value) {
+	const actual = index < 0 ? state.value.length + index : index;
+	if (actual > -1) state.value[actual] = value;
+}
+//#endregion
+export { ReactiveArray, array };

package/dist/value/computed.d.mts

@@ -0,0 +1,21 @@
+import { Reactive } from "./reactive.mjs";
+import { ReactiveOptions } from "../models.mjs";
+
+//#region src/value/computed.d.ts
+declare class Computed<Value> extends Reactive<Value> {
+  private readonly effect;
+  constructor(callback: () => Value | Promise<Value>, options?: ReactiveOptions<Value>);
+  /**
+   * @inheritdoc
+   */
+  get(): Value;
+}
+/**
+ * Create a computed value
+ * @param callback Callback to compute the value
+ * @param options Reactivity options
+ * @returns Computed value
+ */
+declare function computed<Value>(callback: () => Value | Promise<Value>, options?: ReactiveOptions<Value>): Computed<Value>;
+//#endregion
+export { Computed, computed };

package/dist/value/computed.mjs

@@ -0,0 +1,68 @@
+import { ACTIVE, BATCH, NAME_COMPUTED } from "../constants.mjs";
+import { effect, runEffect } from "../effect.mjs";
+import { flushHandlers } from "../batch.mjs";
+import { Reactive } from "./reactive.mjs";
+//#region src/value/computed.ts
+var Computed = class extends Reactive {
+	effect = {
+		dirty: true,
+		instance: void 0
+	};
+	constructor(callback, options) {
+		super(NAME_COMPUTED, void 0, options);
+		this.effect.instance = effect(() => {
+			if (this.effect.dirty) {
+				setValue(this, this.state, callback);
+				this.effect.dirty = false;
+			}
+		});
+	}
+	/**
+	* @inheritdoc
+	*/
+	get() {
+		if (ACTIVE.computed != null && this !== ACTIVE.computed) this.state.computeds.add(ACTIVE.computed);
+		if (ACTIVE.effect != null && ACTIVE.effect !== this.effect.instance) this.state.effects.add(ACTIVE.effect);
+		if (this.effect.dirty && BATCH.depth === 0) runEffect(this.effect.instance);
+		return this.state.value;
+	}
+};
+/**
+* Create a computed value
+* @param callback Callback to compute the value
+* @param options Reactivity options
+* @returns Computed value
+*/
+function computed(callback, options) {
+	return new Computed(callback, options);
+}
+function setAndEmit(state, value) {
+	if (state.equal(state.value, value)) return;
+	state.value = value;
+	for (const computed of state.computeds) computed.effect.dirty = true;
+	for (const effect of state.effects) BATCH.handlers.add(effect);
+	for (const [, subscription] of state.subscriptions) subscription.callback(value);
+	flushHandlers();
+}
+function setValue(instance, state, callback) {
+	const previousComputed = ACTIVE.computed;
+	ACTIVE.computed = instance;
+	try {
+		const value = callback();
+		if (value instanceof Promise) {
+			state.promise = value;
+			value.then((resolvedValue) => {
+				if (state.promise === value) {
+					state.promise = void 0;
+					setAndEmit(state, resolvedValue);
+				}
+			}).catch(() => {
+				if (state.promise === value) state.promise = void 0;
+			});
+		} else setAndEmit(state, value);
+	} finally {
+		ACTIVE.computed = previousComputed;
+	}
+}
+//#endregion
+export { Computed, computed };

package/dist/value/reactive.d.mts

@@ -0,0 +1,40 @@
+import { ReactiveOptions, ReactiveState, Unsubscribe } from "../models.mjs";
+
+//#region src/value/reactive.d.ts
+declare abstract class Reactive<Value, Equal = Value> {
+  protected readonly state: ReactiveState<Value, Equal>;
+  constructor(name: string, value: Value, options?: ReactiveOptions<Equal>);
+  /**
+   * Get the value
+   * @return Current value
+   */
+  abstract get(): Value;
+  /**
+   * Get the value _(without reactivity)_
+   * @return Current value
+   */
+  peek(): Value;
+  /**
+   * Subscribe to changes
+   * @param callback Callback for changes
+   * @return Unsubscribe callback
+   */
+  subscribe(callback: (value: Value) => void): Unsubscribe;
+  /**
+   * JSON representation of the value
+   * @return JSON value
+   */
+  toJSON(): Value;
+  /**
+   * String representation of the value
+   * @return Value as string
+   */
+  toString(): string;
+  /**
+   * Unsubscribe from changes
+   * @param callback Callback to unsubscribe
+   */
+  unsubscribe(callback: (value: Value) => void): void;
+}
+//#endregion
+export { Reactive };

package/dist/value/{reactive.js → reactive.mjs}

@@ -1,5 +1,6 @@
-import { NAME_MORA } from "../constants.js";
-import { subscribe, unsubscribe } from "../subscription.js";
+import { NAME_MORA } from "../constants.mjs";
+import { subscribe, unsubscribe } from "../subscription.mjs";
+//#region src/value/reactive.ts
 var Reactive = class {
 	state = {
 		computeds: /* @__PURE__ */ new Set(),
@@ -13,20 +14,42 @@ var Reactive = class {
 		if (typeof options === "object" && typeof options.equal === "function") this.state.equal = options.equal;
 		Object.defineProperty(this, NAME_MORA, { value: name });
 	}
+	/**
+	* Get the value _(without reactivity)_
+	* @return Current value
+	*/
 	peek() {
 		return this.state.value;
 	}
+	/**
+	* Subscribe to changes
+	* @param callback Callback for changes
+	* @return Unsubscribe callback
+	*/
 	subscribe(callback) {
 		return subscribe(this.state, callback);
 	}
+	/**
+	* JSON representation of the value
+	* @return JSON value
+	*/
 	toJSON() {
 		return this.get();
 	}
+	/**
+	* String representation of the value
+	* @return Value as string
+	*/
 	toString() {
 		return String(this.get());
 	}
+	/**
+	* Unsubscribe from changes
+	* @param callback Callback to unsubscribe
+	*/
 	unsubscribe(callback) {
 		unsubscribe(this.state, callback);
 	}
 };
+//#endregion
 export { Reactive };

package/dist/value/signal.d.mts

@@ -0,0 +1,44 @@
+import { Reactive } from "./reactive.mjs";
+import { ReactiveOptions } from "../models.mjs";
+
+//#region src/value/signal.d.ts
+declare class Signal<Value> extends Reactive<Value> {
+  constructor(value: Value, options?: ReactiveOptions<Value>);
+  /**
+   * @inheritdoc
+   */
+  get(): Value;
+  /**
+   * Set the value
+   * @param value New value
+   */
+  set(value: Value | (() => Value | Promise<Value>) | Promise<Value>): void;
+  /**
+   * Update the value _(based on the current value)_
+   * @param callback Callback to update the value
+   */
+  update(callback: (value: Value) => Value): void;
+}
+/**
+ * Create a reactive value from a function result
+ * @param value Initial value
+ * @param options Reactivity options
+ * @returns Reactive value
+ */
+declare function signal<Value>(value: () => Value | Promise<Value>, options?: ReactiveOptions<Value>): Signal<Value>;
+/**
+ * Create a reactive value from a promise
+ * @param value Initial value
+ * @param options Reactivity options
+ * @returns Reactive value
+ */
+declare function signal<Value>(value: Promise<Value>, options?: ReactiveOptions<Value>): Signal<Value>;
+/**
+ * Create a reactive value
+ * @param value Initial value
+ * @param options Reactivity options
+ * @returns Reactive value
+ */
+declare function signal<Value>(value: Value, options?: ReactiveOptions<Value>): Signal<Value>;
+//#endregion
+export { Signal, signal };

package/dist/value/signal.mjs

@@ -0,0 +1,59 @@
+import { NAME_SIGNAL } from "../constants.mjs";
+import { Reactive } from "./reactive.mjs";
+import { emitValue, getValue } from "../helpers/value.mjs";
+//#region src/value/signal.ts
+var Signal = class extends Reactive {
+	constructor(value, options) {
+		super(NAME_SIGNAL, value, options);
+	}
+	/**
+	* @inheritdoc
+	*/
+	get() {
+		return getValue(this.state);
+	}
+	/**
+	* Set the value
+	* @param value New value
+	*/
+	set(value) {
+		setValue(this.state, value);
+	}
+	/**
+	* Update the value _(based on the current value)_
+	* @param callback Callback to update the value
+	*/
+	update(callback) {
+		this.set(callback(this.state.value));
+	}
+};
+function setAndEmit(state, value) {
+	if (!state.equal(state.value, value)) {
+		state.value = value;
+		emitValue(state);
+	}
+}
+function setValue(state, value) {
+	try {
+		let actual = value;
+		if (typeof value === "function") actual = value();
+		if (actual instanceof Promise) {
+			state.promise = actual;
+			actual.then((value) => {
+				if (actual === state.promise) {
+					state.promise = void 0;
+					setAndEmit(state, value);
+				}
+			}).catch(() => {
+				if (actual === state.promise) state.promise = void 0;
+			});
+		} else setAndEmit(state, actual);
+	} catch {}
+}
+function signal(value, options) {
+	const instance = new Signal(void 0, options);
+	instance.set(value);
+	return instance;
+}
+//#endregion
+export { Signal, signal };