@oscarpalmer/mora 0.14.0 → 0.16.0

package/src/batch.ts

@@ -2,7 +2,7 @@ import {type Effect, runEffect} from './effect';
 import {isEffect} from './helpers/is';
 import type {Subscription} from './subscription';
 
-export function flushEffects(): void {
+export function flushHandlers(): void {
 	while (batchDepth === 0 && batchedHandlers.size > 0) {
 		const handlers = [...batchedHandlers];
 
@@ -33,7 +33,7 @@ export function stopBatch(): void {
 		batchDepth -= 1;
 	}
 
-	flushEffects();
+	flushHandlers();
 }
 
 export const batchedHandlers = new Set<Effect | Subscription<unknown>>();

package/src/helpers/is.ts

@@ -3,7 +3,7 @@ import type {Effect} from '../effect';
 import type {ReactiveArray} from '../value/array';
 import type {Computed} from '../value/computed';
 import type {Reactive} from '../value/reactive';
-import {signal, type Signal} from '../value/signal';
+import type {Signal} from '../value/signal';
 
 /**
  * Is the value a reactive array?

package/src/helpers/value.ts

@@ -1,7 +1,62 @@
+import {batchDepth, batchedHandlers, flushHandlers} from '../batch';
 import {activeEffect} from '../effect';
-import {activeComputed} from '../value/computed';
+import {type InternalComputed, activeComputed} from '../value/computed';
 import type {ReactiveState} from '../value/reactive';
-import {emitValue} from './emit';
+
+export function differentArrays(first: unknown[], second: unknown[]): boolean {
+	let {length} = first;
+
+	if (length !== second.length) {
+		return true;
+	}
+
+	let offset = 0;
+
+	if (length >= 100) {
+		offset = Math.round(length / 10);
+		offset = offset > 25 ? 25 : offset;
+
+		for (let index = 0; index < offset; index += 1) {
+			if (!Object.is(first[index], second[index])) {
+				return true;
+			}
+		}
+	}
+
+	length -= offset;
+
+	for (let index = offset; index < length; index += 1) {
+		if (!Object.is(first[index], second[index])) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+export function differentValues(first: unknown, second: unknown): boolean {
+	return Array.isArray(first) && Array.isArray(second)
+		? differentArrays(first, second)
+		: !Object.is(first, second);
+}
+
+export function emitValue<Value>(state: ReactiveState<Value>): void {
+	for (const computed of state.computeds) {
+		(computed as unknown as InternalComputed).effect.dirty = true;
+	}
+
+	for (const effect of state.effects) {
+		batchedHandlers.add(effect);
+	}
+
+	for (const [, subscription] of state.subscriptions) {
+		batchedHandlers.add(subscription as never);
+	}
+
+	if (batchDepth === 0) {
+		flushHandlers();
+	}
+}
 
 export function getValue<Value>(state: ReactiveState<Value>): Value {
 	if (activeComputed != null) {
@@ -14,14 +69,3 @@ export function getValue<Value>(state: ReactiveState<Value>): Value {
 
 	return state.value;
 }
-
-export function setValue<Value>(
-	state: ReactiveState<Value>,
-	value: Value,
-): void {
-	if (!Object.is(state.value, value)) {
-		state.value = value;
-
-		emitValue(state);
-	}
-}

package/src/value/array.ts

@@ -1,6 +1,6 @@
-import {emitArrayChanges, emitValue} from '../helpers/emit';
 import {arrayName} from '../helpers/is';
-import {getValue} from '../helpers/value';
+import {differentArrays, emitValue, getValue} from '../helpers/value';
+import {type Computed, computed} from './computed';
 import {Reactive, type ReactiveState} from './reactive';
 import {type Signal, signal} from './signal';
 
@@ -43,6 +43,20 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 		this.#size.set(value.length);
 	}
 
+	/**
+	 * Get an indexed item
+	 */
+	at(index: number): Item | undefined {
+		return this.get().at(index);
+	}
+
+	/**
+	 * Clear the array
+	 */
+	clear(): void {
+		this.length = 0;
+	}
+
 	/**
 	 * @inheritdoc
 	 */
@@ -50,6 +64,24 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 		return getValue(this.state);
 	}
 
+	/**
+	 * Create a computed, filtered array
+	 */
+	filter(
+		callback: (item: Item, index: number, array: Item[]) => boolean,
+	): Computed<Item[]> {
+		return computed(() => this.get().filter(callback));
+	}
+
+	/**
+	 * Create a computed, mapped array
+	 */
+	map<Mapped>(
+		callback: (item: Item, index: number, array: Item[]) => Mapped,
+	): Computed<Mapped[]> {
+		return computed(() => this.get().map(callback));
+	}
+
 	/**
 	 * @inheritdoc
 	 */
@@ -64,6 +96,20 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 		return length === true ? this.#size.peek() : [...this.state.value];
 	}
 
+	/**
+	 * Remove and return the last item of the array
+	 */
+	pop(): Item | undefined {
+		return this.state.value.pop();
+	}
+
+	/**
+	 * Add items to the end of the array
+	 */
+	push(...items: Item[]): number {
+		return this.state.value.push(...items);
+	}
+
 	/**
 	 * Set the value
 	 */
@@ -88,6 +134,31 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 			this.state.value[first] = second as Item;
 		}
 	}
+
+	/**
+	 * Remove and return the first item of the array
+	 */
+	shift(): Item | undefined {
+		return this.state.value.shift();
+	}
+
+	/**
+	 * Remove and return items from the array _(and optionally add new items)_
+	 */
+	splice(from: number, to?: number, ...items: Item[]): Item[] {
+		return this.state.value.splice(
+			from,
+			to ?? this.state.value.length,
+			...items,
+		);
+	}
+
+	/**
+	 * Add items to the beginning of the array
+	 */
+	unshift(...items: Item[]): number {
+		return this.state.value.unshift(...items);
+	}
 }
 
 /**
@@ -142,7 +213,7 @@ function updateArray<Item>(
 		if (
 			affectsLength
 				? array.length !== previousLength
-				: emitArrayChanges(previousArray, array)
+				: differentArrays(previousArray, array)
 		) {
 			emitValue(state);
 

package/src/value/computed.ts

@@ -3,7 +3,7 @@ import {type Effect, activeEffect, effect, runEffect} from '../effect';
 import {computedName} from '../helpers/is';
 import {Reactive, type ReactiveState} from './reactive';
 
-type ComputedEffect = {
+export type ComputedEffect = {
 	dirty: boolean;
 	instance: Effect;
 };
@@ -59,7 +59,7 @@ export class Computed<Value> extends Reactive<Value> {
 	 * @inheritdoc
 	 */
 	get(): Value {
-		if (activeComputed != null && activeComputed !== this) {
+		if (activeComputed != null && this !== activeComputed) {
 			this.state.computeds.add(activeComputed);
 		}
 

package/src/value/signal.ts

@@ -1,5 +1,5 @@
 import {signalName} from '../helpers/is';
-import {getValue, setValue} from '../helpers/value';
+import {differentValues, emitValue, getValue} from '../helpers/value';
 import {Reactive} from './reactive';
 
 export class Signal<Value> extends Reactive<Value> {
@@ -18,7 +18,11 @@ export class Signal<Value> extends Reactive<Value> {
 	 * Set the value
 	 */
 	set(value: Value): void {
-		setValue(this.state, value);
+		if (differentValues(this.state.value, value)) {
+			this.state.value = value;
+
+			emitValue(this.state);
+		}
 	}
 
 	/**

package/types/batch.d.cts

@@ -57,7 +57,7 @@ declare class Subscription<Value> {
  * Unsubscribe from changes
  */
 export type Unsubscribe = () => void;
-export declare function flushEffects(): void;
+export declare function flushHandlers(): void;
 /**
  * Start batching effects _(use `stopBatch` to flush and run batched effects)_
  */

package/types/batch.d.ts

@@ -1,6 +1,6 @@
 import { type Effect } from './effect';
 import type { Subscription } from './subscription';
-export declare function flushEffects(): void;
+export declare function flushHandlers(): void;
 /**
  * Start batching effects _(use `stopBatch` to flush and run batched effects)_
  */

package/types/helpers/is.d.cts

@@ -68,10 +68,26 @@ declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 */
 	set length(value: number);
 	constructor(value: Item[]);
+	/**
+	 * Get an indexed item
+	 */
+	at(index: number): Item | undefined;
+	/**
+	 * Clear the array
+	 */
+	clear(): void;
 	/**
 	 * @inheritdoc
 	 */
 	get(): Item[];
+	/**
+	 * Create a computed, filtered array
+	 */
+	filter(callback: (item: Item, index: number, array: Item[]) => boolean): Computed<Item[]>;
+	/**
+	 * Create a computed, mapped array
+	 */
+	map<Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped): Computed<Mapped[]>;
 	/**
 	 * @inheritdoc
 	 */
@@ -80,6 +96,14 @@ declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 * Get the length of the array _(without reactivity)_
 	 */
 	peek(length: true): number;
+	/**
+	 * Remove and return the last item of the array
+	 */
+	pop(): Item | undefined;
+	/**
+	 * Add items to the end of the array
+	 */
+	push(...items: Item[]): number;
 	/**
 	 * Set the value
 	 */
@@ -92,6 +116,18 @@ declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 * Set the length of the array
 	 */
 	set(property: "length", value: number): void;
+	/**
+	 * Remove and return the first item of the array
+	 */
+	shift(): Item | undefined;
+	/**
+	 * Remove and return items from the array _(and optionally add new items)_
+	 */
+	splice(from: number, to?: number, ...items: Item[]): Item[];
+	/**
+	 * Add items to the beginning of the array
+	 */
+	unshift(...items: Item[]): number;
 }
 declare class Signal<Value> extends Reactive<Value> {
 	constructor(value: Value);

package/types/helpers/is.d.ts

@@ -2,7 +2,7 @@ import type { Effect } from '../effect';
 import type { ReactiveArray } from '../value/array';
 import type { Computed } from '../value/computed';
 import type { Reactive } from '../value/reactive';
-import { type Signal } from '../value/signal';
+import type { Signal } from '../value/signal';
 /**
  * Is the value a reactive array?
  */

package/types/helpers/value.d.cts

@@ -57,7 +57,9 @@ declare class Subscription<Value> {
  * Unsubscribe from changes
  */
 export type Unsubscribe = () => void;
+export declare function differentArrays(first: unknown[], second: unknown[]): boolean;
+export declare function differentValues(first: unknown, second: unknown): boolean;
+export declare function emitValue<Value>(state: ReactiveState<Value>): void;
 export declare function getValue<Value>(state: ReactiveState<Value>): Value;
-export declare function setValue<Value>(state: ReactiveState<Value>, value: Value): void;
 
 export {};

package/types/helpers/value.d.ts

@@ -1,3 +1,5 @@
 import type { ReactiveState } from '../value/reactive';
+export declare function differentArrays(first: unknown[], second: unknown[]): boolean;
+export declare function differentValues(first: unknown, second: unknown): boolean;
+export declare function emitValue<Value>(state: ReactiveState<Value>): void;
 export declare function getValue<Value>(state: ReactiveState<Value>): Value;
-export declare function setValue<Value>(state: ReactiveState<Value>, value: Value): void;

package/types/index.d.cts

@@ -84,10 +84,26 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 */
 	set length(value: number);
 	constructor(value: Item[]);
+	/**
+	 * Get an indexed item
+	 */
+	at(index: number): Item | undefined;
+	/**
+	 * Clear the array
+	 */
+	clear(): void;
 	/**
 	 * @inheritdoc
 	 */
 	get(): Item[];
+	/**
+	 * Create a computed, filtered array
+	 */
+	filter(callback: (item: Item, index: number, array: Item[]) => boolean): Computed<Item[]>;
+	/**
+	 * Create a computed, mapped array
+	 */
+	map<Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped): Computed<Mapped[]>;
 	/**
 	 * @inheritdoc
 	 */
@@ -96,6 +112,14 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 * Get the length of the array _(without reactivity)_
 	 */
 	peek(length: true): number;
+	/**
+	 * Remove and return the last item of the array
+	 */
+	pop(): Item | undefined;
+	/**
+	 * Add items to the end of the array
+	 */
+	push(...items: Item[]): number;
 	/**
 	 * Set the value
 	 */
@@ -108,6 +132,18 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 * Set the length of the array
 	 */
 	set(property: "length", value: number): void;
+	/**
+	 * Remove and return the first item of the array
+	 */
+	shift(): Item | undefined;
+	/**
+	 * Remove and return items from the array _(and optionally add new items)_
+	 */
+	splice(from: number, to?: number, ...items: Item[]): Item[];
+	/**
+	 * Add items to the beginning of the array
+	 */
+	unshift(...items: Item[]): number;
 }
 /**
  * Create a reactive array

package/types/value/array.d.cts

@@ -68,10 +68,26 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 */
 	set length(value: number);
 	constructor(value: Item[]);
+	/**
+	 * Get an indexed item
+	 */
+	at(index: number): Item | undefined;
+	/**
+	 * Clear the array
+	 */
+	clear(): void;
 	/**
 	 * @inheritdoc
 	 */
 	get(): Item[];
+	/**
+	 * Create a computed, filtered array
+	 */
+	filter(callback: (item: Item, index: number, array: Item[]) => boolean): Computed<Item[]>;
+	/**
+	 * Create a computed, mapped array
+	 */
+	map<Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped): Computed<Mapped[]>;
 	/**
 	 * @inheritdoc
 	 */
@@ -80,6 +96,14 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 * Get the length of the array _(without reactivity)_
 	 */
 	peek(length: true): number;
+	/**
+	 * Remove and return the last item of the array
+	 */
+	pop(): Item | undefined;
+	/**
+	 * Add items to the end of the array
+	 */
+	push(...items: Item[]): number;
 	/**
 	 * Set the value
 	 */
@@ -92,6 +116,18 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
 	 * Set the length of the array
 	 */
 	set(property: "length", value: number): void;
+	/**
+	 * Remove and return the first item of the array
+	 */
+	shift(): Item | undefined;
+	/**
+	 * Remove and return items from the array _(and optionally add new items)_
+	 */
+	splice(from: number, to?: number, ...items: Item[]): Item[];
+	/**
+	 * Add items to the beginning of the array
+	 */
+	unshift(...items: Item[]): number;
 }
 /**
  * Create a reactive array

package/types/value/array.d.ts

@@ -1,3 +1,4 @@
+import { type Computed } from './computed';
 import { Reactive } from './reactive';
 export declare class ReactiveArray<Item> extends Reactive<Item[]> {
     #private;
@@ -10,10 +11,26 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
      */
     set length(value: number);
     constructor(value: Item[]);
+    /**
+     * Get an indexed item
+     */
+    at(index: number): Item | undefined;
+    /**
+     * Clear the array
+     */
+    clear(): void;
     /**
      * @inheritdoc
      */
     get(): Item[];
+    /**
+     * Create a computed, filtered array
+     */
+    filter(callback: (item: Item, index: number, array: Item[]) => boolean): Computed<Item[]>;
+    /**
+     * Create a computed, mapped array
+     */
+    map<Mapped>(callback: (item: Item, index: number, array: Item[]) => Mapped): Computed<Mapped[]>;
     /**
      * @inheritdoc
      */
@@ -22,6 +39,14 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
      * Get the length of the array _(without reactivity)_
      */
     peek(length: true): number;
+    /**
+     * Remove and return the last item of the array
+     */
+    pop(): Item | undefined;
+    /**
+     * Add items to the end of the array
+     */
+    push(...items: Item[]): number;
     /**
      * Set the value
      */
@@ -34,6 +59,18 @@ export declare class ReactiveArray<Item> extends Reactive<Item[]> {
      * Set the length of the array
      */
     set(property: 'length', value: number): void;
+    /**
+     * Remove and return the first item of the array
+     */
+    shift(): Item | undefined;
+    /**
+     * Remove and return items from the array _(and optionally add new items)_
+     */
+    splice(from: number, to?: number, ...items: Item[]): Item[];
+    /**
+     * Add items to the beginning of the array
+     */
+    unshift(...items: Item[]): number;
 }
 /**
  * Create a reactive array

package/types/value/computed.d.ts

@@ -1,6 +1,6 @@
 import { type Effect } from '../effect';
 import { Reactive, type ReactiveState } from './reactive';
-type ComputedEffect = {
+export type ComputedEffect = {
     dirty: boolean;
     instance: Effect;
 };
@@ -21,4 +21,3 @@ export declare class Computed<Value> extends Reactive<Value> {
  * Create a computed value
  */
 export declare function computed<Value>(callback: () => Value): Computed<Value>;
-export {};

package/dist/helpers/emit.cjs

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const batch = require("../batch.cjs");
-function emitArrayChanges(first, second) {
-  let { length } = first;
-  if (length !== second.length) {
-    return true;
-  }
-  let offset = 0;
-  if (length >= 100) {
-    offset = Math.round(length / 10);
-    offset = offset > 25 ? 25 : offset;
-    for (let index = 0; index < offset; index += 1) {
-      if (!Object.is(first[index], second[index])) {
-        return true;
-      }
-    }
-  }
-  length -= offset;
-  for (let index = offset; index < length; index += 1) {
-    if (!Object.is(first[index], second[index])) {
-      return true;
-    }
-  }
-  return false;
-}
-function emitValue(state) {
-  for (const computed of state.computeds) {
-    computed.effect.dirty = true;
-  }
-  for (const effect of state.effects) {
-    batch.batchedHandlers.add(effect);
-  }
-  for (const [, subscription] of state.subscriptions) {
-    batch.batchedHandlers.add(subscription);
-  }
-  if (batch.batchDepth === 0) {
-    batch.flushEffects();
-  }
-}
-exports.emitArrayChanges = emitArrayChanges;
-exports.emitValue = emitValue;

package/dist/helpers/emit.js

@@ -1,42 +0,0 @@
-import { batchedHandlers, batchDepth, flushEffects } from "../batch.js";
-function emitArrayChanges(first, second) {
-  let { length } = first;
-  if (length !== second.length) {
-    return true;
-  }
-  let offset = 0;
-  if (length >= 100) {
-    offset = Math.round(length / 10);
-    offset = offset > 25 ? 25 : offset;
-    for (let index = 0; index < offset; index += 1) {
-      if (!Object.is(first[index], second[index])) {
-        return true;
-      }
-    }
-  }
-  length -= offset;
-  for (let index = offset; index < length; index += 1) {
-    if (!Object.is(first[index], second[index])) {
-      return true;
-    }
-  }
-  return false;
-}
-function emitValue(state) {
-  for (const computed of state.computeds) {
-    computed.effect.dirty = true;
-  }
-  for (const effect of state.effects) {
-    batchedHandlers.add(effect);
-  }
-  for (const [, subscription] of state.subscriptions) {
-    batchedHandlers.add(subscription);
-  }
-  if (batchDepth === 0) {
-    flushEffects();
-  }
-}
-export {
-  emitArrayChanges,
-  emitValue
-};