@oscarpalmer/mora 0.13.0 → 0.15.0

package/dist/{array.js → value/array.js}

@@ -5,13 +5,16 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _size;
+import { emitValue, emitArrayChanges } from "../helpers/emit.js";
+import { arrayName } from "../helpers/is.js";
+import { getValue } from "../helpers/value.js";
+import { computed } from "./computed.js";
 import { Reactive } from "./reactive.js";
 import { signal } from "./signal.js";
-import { getValue, emitValue } from "./value.js";
 class ReactiveArray extends Reactive {
   constructor(value) {
     super(
-      "array",
+      arrayName,
       new Proxy(value, {
         get: (target, property) => updateMethods.has(property) ? updateArray(property, target, this.state, __privateGet(this, _size)) : Reflect.get(target, property),
         set: (target, property, value2) => setValue(target, property, value2, this.state, __privateGet(this, _size))
@@ -34,15 +37,45 @@ class ReactiveArray extends Reactive {
       this.get().length = value;
     }
   }
+  /**
+   * Get an indexed item
+   */
+  at(index) {
+    return this.get().at(index);
+  }
   /**
    * @inheritdoc
    */
   get() {
     return getValue(this.state);
   }
+  /**
+   * Create a computed, filtered array
+   */
+  filter(callback) {
+    return computed(() => this.get().filter(callback));
+  }
+  /**
+   * Create a computed, mapped array
+   */
+  map(callback) {
+    return computed(() => this.get().map(callback));
+  }
   peek(length) {
     return length === true ? __privateGet(this, _size).peek() : [...this.state.value];
   }
+  /**
+   * Remove and return the last item of the array
+   */
+  pop() {
+    return this.state.value.pop();
+  }
+  /**
+   * Add items to the end of the array
+   */
+  push(...items) {
+    return this.state.value.push(...items);
+  }
   set(first, second) {
     if (Array.isArray(first)) {
       this.state.value.splice(0, this.state.value.length, ...first);
@@ -52,34 +85,33 @@ class ReactiveArray extends Reactive {
       this.state.value[first] = second;
     }
   }
+  /**
+   * Remove and return the first item of the array
+   */
+  shift() {
+    return this.state.value.shift();
+  }
+  /**
+   * Remove and return items from the array _(and optionally add new items)_
+   */
+  splice(from, to, ...items) {
+    return this.state.value.splice(
+      from,
+      to ?? this.state.value.length,
+      ...items
+    );
+  }
+  /**
+   * Add items to the beginning of the array
+   */
+  unshift(...items) {
+    return this.state.value.unshift(...items);
+  }
 }
 _size = new WeakMap();
 function array(value) {
   return new ReactiveArray(Array.isArray(value) ? value : []);
 }
-function emit(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 setValue(target, property, value, state, length) {
   const isIndex = !Number.isNaN(Number(property));
   const isLength = property === "length";
@@ -87,12 +119,11 @@ function setValue(target, property, value, state, length) {
     return Reflect.set(target, property, value);
   }
   const previous = Reflect.get(target, property);
-  if (Object.is(previous, value)) {
-    return true;
+  if (!Object.is(previous, value)) {
+    Reflect.set(target, property, value);
+    emitValue(state);
+    length.set(target.length);
   }
-  Reflect.set(target, property, value);
-  emitValue(state);
-  length.set(target.length);
   return true;
 }
 function updateArray(type, array2, state, length) {
@@ -103,7 +134,7 @@ function updateArray(type, array2, state, length) {
     const result = array2[type](
       ...args
     );
-    if (affectsLength ? array2.length !== previousLength : emit(previousArray, array2)) {
+    if (affectsLength ? array2.length !== previousLength : emitArrayChanges(previousArray, array2)) {
       emitValue(state);
       length.set(array2.length);
     }

package/dist/{computed.cjs → value/computed.cjs}

@@ -3,13 +3,14 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const batch = require("./batch.cjs");
-const effect = require("./effect.cjs");
-const reactive = require("./reactive.cjs");
+const batch = require("../batch.cjs");
+const effect = require("../effect.cjs");
+const helpers_is = require("../helpers/is.cjs");
+const value_reactive = require("./reactive.cjs");
 exports.activeComputed = void 0;
-class Computed extends reactive.Reactive {
+class Computed extends value_reactive.Reactive {
   constructor(callback) {
-    super("computed", void 0);
+    super(helpers_is.computedName, void 0);
     __publicField(this, "effect", {
       dirty: true,
       instance: void 0

package/dist/{computed.js → value/computed.js}

@@ -1,13 +1,14 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { batchedHandlers, batchDepth } from "./batch.js";
-import { effect, activeEffect, runEffect } from "./effect.js";
+import { batchedHandlers, batchDepth } from "../batch.js";
+import { effect, activeEffect, runEffect } from "../effect.js";
+import { computedName } from "../helpers/is.js";
 import { Reactive } from "./reactive.js";
 let activeComputed;
 class Computed extends Reactive {
   constructor(callback) {
-    super("computed", void 0);
+    super(computedName, void 0);
     __publicField(this, "effect", {
       dirty: true,
       instance: void 0

package/dist/{reactive.cjs → value/reactive.cjs}

@@ -3,7 +3,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const subscription = require("./subscription.cjs");
+const subscription = require("../subscription.cjs");
 class Reactive {
   constructor(name, value) {
     __publicField(this, "state", {

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

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { subscribe, unsubscribe } from "./subscription.js";
+import { subscribe, unsubscribe } from "../subscription.js";
 class Reactive {
   constructor(name, value) {
     __publicField(this, "state", {

package/dist/value/signal.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_is = require("../helpers/is.cjs");
+const helpers_value = require("../helpers/value.cjs");
+const value_reactive = require("./reactive.cjs");
+class Signal extends value_reactive.Reactive {
+  constructor(value) {
+    super(helpers_is.signalName, value);
+  }
+  /**
+   * @inheritdoc
+   */
+  get() {
+    return helpers_value.getValue(this.state);
+  }
+  /**
+   * Set the value
+   */
+  set(value) {
+    helpers_value.setValue(this.state, value);
+  }
+  /**
+   * Update the value
+   */
+  update(callback) {
+    this.set(callback(this.state.value));
+  }
+}
+function signal(value) {
+  return new Signal(value);
+}
+exports.Signal = Signal;
+exports.signal = signal;

package/dist/{signal.js → value/signal.js}

@@ -1,8 +1,9 @@
+import { signalName } from "../helpers/is.js";
+import { getValue, setValue } from "../helpers/value.js";
 import { Reactive } from "./reactive.js";
-import { getValue, setValue } from "./value.js";
 class Signal extends Reactive {
   constructor(value) {
-    super("signal", value);
+    super(signalName, value);
   }
   /**
    * @inheritdoc

package/package.json

@@ -54,5 +54,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.13.0"
+	"version": "0.15.0"
 }

package/src/batch.ts

@@ -1,5 +1,5 @@
 import {type Effect, runEffect} from './effect';
-import {isEffect} from './is';
+import {isEffect} from './helpers/is';
 import type {Subscription} from './subscription';
 
 export function flushEffects(): void {

package/src/effect.ts

@@ -1,4 +1,5 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {effectName} from './helpers/is';
 
 type EffectState = {
 	callback: GenericCallback;
@@ -9,22 +10,22 @@ type InternalEffect = {
 };
 
 export class Effect {
-		private declare readonly $mora: string;
+	private declare readonly $mora: string;
 
-		private declare readonly state: EffectState;
+	private declare readonly state: EffectState;
 
-		constructor(callback: GenericCallback) {
-			Object.defineProperty(this, '$mora', {
-				value: 'effect',
-			});
+	constructor(callback: GenericCallback) {
+		Object.defineProperty(this, '$mora', {
+			value: effectName,
+		});
 
-			this.state = {
-				callback,
-			};
+		this.state = {
+			callback,
+		};
 
-			runEffect(this);
-		}
+		runEffect(this);
 	}
+}
 
 export function runEffect(effect: Effect): void {
 	const previousEffect = activeEffect;

package/src/helpers/emit.ts

@@ -0,0 +1,52 @@
+import {batchDepth, batchedHandlers, flushEffects} from '../batch';
+import type {InternalComputed} from '../value/computed';
+import type {ReactiveState} from '../value/reactive';
+
+export function emitArrayChanges(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 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) {
+		flushEffects();
+	}
+}

package/src/helpers/is.ts

@@ -0,0 +1,56 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+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';
+
+/**
+ * Is the value a reactive array?
+ */
+export function isArray(value: unknown): value is ReactiveArray<unknown> {
+	return isMora<ReactiveArray<unknown>>(value, arrayName);
+}
+
+/**
+ * Is the value a computed signal?
+ */
+export function isComputed(value: unknown): value is Computed<unknown> {
+	return isMora<Computed<unknown>>(value, computedName);
+}
+
+/**
+ * Is the value an effect?
+ */
+export function isEffect(value: unknown): value is Effect {
+	return isMora<Effect>(value, effectName);
+}
+
+function isMora<T>(value: unknown, name: string | Set<string>): value is T {
+	return (
+		typeof value === 'object' &&
+		value != null &&
+		'$mora' in value &&
+		(typeof name === 'string'
+			? (value as PlainObject).$mora === name
+			: name.has((value as PlainObject).$mora as never))
+	);
+}
+
+export function isReactive(value: unknown): value is Reactive<unknown> {
+	return isMora<Reactive<unknown>>(value, reactiveNames);
+}
+
+/**
+ * Is the value a signal?
+ */
+export function isSignal(value: unknown): value is Signal<unknown> {
+	return isMora<Signal<unknown>>(value, signalName);
+}
+
+export const arrayName = 'array';
+export const computedName = 'computed';
+export const effectName = 'effect';
+export const signalName = 'signal';
+
+const reactiveNames = new Set([arrayName, computedName, signalName]);

package/src/helpers/value.ts

@@ -0,0 +1,27 @@
+import {activeEffect} from '../effect';
+import {activeComputed} from '../value/computed';
+import type {ReactiveState} from '../value/reactive';
+import {emitValue} from './emit';
+
+export function getValue<Value>(state: ReactiveState<Value>): Value {
+	if (activeComputed != null) {
+		state.computeds.add(activeComputed);
+	}
+
+	if (activeEffect != null) {
+		state.effects.add(activeEffect);
+	}
+
+	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/index.ts

@@ -1,7 +1,13 @@
-export {array, type ReactiveArray} from './array';
 export {startBatch, stopBatch} from './batch';
-export {computed, type Computed} from './computed';
 export {effect, type Effect} from './effect';
-export {isComputed, isEffect, isReactive, isSignal} from './is';
-export type {Reactive} from './reactive';
-export {signal, type Signal} from './signal';
+export {
+	isArray,
+	isComputed,
+	isEffect,
+	isReactive,
+	isSignal,
+} from './helpers/is';
+export {array, type ReactiveArray} from './value/array';
+export {computed, type Computed} from './value/computed';
+export type {Reactive} from './value/reactive';
+export {signal, type Signal} from './value/signal';

package/src/subscription.ts

@@ -1,5 +1,5 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import type {ReactiveState} from './reactive';
+import type {ReactiveState} from './value/reactive';
 
 export class Subscription<Value> {
 	constructor(

package/src/{array.ts → value/array.ts}

@@ -1,6 +1,9 @@
+import {emitArrayChanges, emitValue} from '../helpers/emit';
+import {arrayName} from '../helpers/is';
+import {getValue} from '../helpers/value';
+import {type Computed, computed} from './computed';
 import {Reactive, type ReactiveState} from './reactive';
 import {type Signal, signal} from './signal';
-import {emitValue, getValue} from './value';
 
 export class ReactiveArray<Item> extends Reactive<Item[]> {
 	#size = signal(0);
@@ -27,7 +30,7 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 
 	constructor(value: Item[]) {
 		super(
-			'array',
+			arrayName,
 			new Proxy(value, {
 				get: (target, property) =>
 					updateMethods.has(property as string)
@@ -41,6 +44,13 @@ 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);
+	}
+
 	/**
 	 * @inheritdoc
 	 */
@@ -48,6 +58,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
 	 */
@@ -62,6 +90,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
 	 */
@@ -86,44 +128,38 @@ export class ReactiveArray<Item> extends Reactive<Item[]> {
 			this.state.value[first] = second as Item;
 		}
 	}
-}
-
-/**
- * Create a reactive array
- */
-export function array<Item>(value: Item[]): ReactiveArray<Item> {
-	return new ReactiveArray(Array.isArray(value) ? value : []);
-}
-
-function emit(first: unknown[], second: unknown[]): boolean {
-	let {length} = first;
 
-	if (length !== second.length) {
-		return true;
+	/**
+	 * Remove and return the first item of the array
+	 */
+	shift(): Item | undefined {
+		return this.state.value.shift();
 	}
 
-	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;
-			}
-		}
+	/**
+	 * 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,
+		);
 	}
 
-	length -= offset;
-
-	for (let index = offset; index < length; index += 1) {
-		if (!Object.is(first[index], second[index])) {
-			return true;
-		}
+	/**
+	 * Add items to the beginning of the array
+	 */
+	unshift(...items: Item[]): number {
+		return this.state.value.unshift(...items);
 	}
+}
 
-	return false;
+/**
+ * Create a reactive array
+ */
+export function array<Item>(value: Item[]): ReactiveArray<Item> {
+	return new ReactiveArray(Array.isArray(value) ? value : []);
 }
 
 function setValue<Item>(
@@ -142,15 +178,13 @@ function setValue<Item>(
 
 	const previous = Reflect.get(target, property);
 
-	if (Object.is(previous, value)) {
-		return true;
-	}
-
-	Reflect.set(target, property, value);
+	if (!Object.is(previous, value)) {
+		Reflect.set(target, property, value);
 
-	emitValue(state);
+		emitValue(state);
 
-	length.set(target.length);
+		length.set(target.length);
+	}
 
 	return true;
 }
@@ -173,7 +207,7 @@ function updateArray<Item>(
 		if (
 			affectsLength
 				? array.length !== previousLength
-				: emit(previousArray, array)
+				: emitArrayChanges(previousArray, array)
 		) {
 			emitValue(state);
 

package/src/{computed.ts → value/computed.ts}

@@ -1,5 +1,6 @@
-import {batchDepth, batchedHandlers} from './batch';
-import {type Effect, activeEffect, effect, runEffect} from './effect';
+import {batchDepth, batchedHandlers} from '../batch';
+import {type Effect, activeEffect, effect, runEffect} from '../effect';
+import {computedName} from '../helpers/is';
 import {Reactive, type ReactiveState} from './reactive';
 
 type ComputedEffect = {
@@ -21,7 +22,7 @@ export class Computed<Value> extends Reactive<Value> {
 	};
 
 	constructor(callback: () => Value) {
-		super('computed', undefined as never);
+		super(computedName, undefined as never);
 
 		this.effect.instance = effect(() => {
 			if (this.effect.dirty) {