@oscarpalmer/mora 0.12.0 → 0.13.0

package/dist/signal.cjs

@@ -1,45 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const batch = require("./batch.cjs");
-const computed = require("./computed.cjs");
-const effect = require("./effect.cjs");
 const reactive = require("./reactive.cjs");
+const value = require("./value.cjs");
 class Signal extends reactive.Reactive {
-  constructor(value) {
-    super("signal", value);
+  constructor(value2) {
+    super("signal", value2);
   }
   /**
    * @inheritdoc
    */
   get() {
-    if (computed.activeComputed != null) {
-      this.state.computeds.add(computed.activeComputed);
-    }
-    if (effect.activeEffect != null) {
-      this.state.effects.add(effect.activeEffect);
-    }
-    return this.state.value;
+    return value.getValue(this.state);
   }
   /**
    * Set the value
    */
-  set(value) {
-    if (Object.is(this.state.value, value)) {
-      return;
-    }
-    this.state.value = value;
-    for (const computed2 of this.state.computeds) {
-      computed2.effect.dirty = true;
-    }
-    for (const effect2 of this.state.effects) {
-      batch.batchedHandlers.add(effect2);
-    }
-    for (const [, subscription] of this.state.subscriptions) {
-      batch.batchedHandlers.add(subscription);
-    }
-    if (batch.batchDepth === 0) {
-      batch.flushEffects();
-    }
+  set(value$1) {
+    value.setValue(this.state, value$1);
   }
   /**
    * Update the value
@@ -48,8 +25,8 @@ class Signal extends reactive.Reactive {
     this.set(callback(this.state.value));
   }
 }
-function signal(value) {
-  return new Signal(value);
+function signal(value2) {
+  return new Signal(value2);
 }
 exports.Signal = Signal;
 exports.signal = signal;

package/dist/signal.js

@@ -1,7 +1,5 @@
-import { batchedHandlers, flushEffects, batchDepth } from "./batch.js";
-import { activeComputed } from "./computed.js";
-import { activeEffect } from "./effect.js";
 import { Reactive } from "./reactive.js";
+import { getValue, setValue } from "./value.js";
 class Signal extends Reactive {
   constructor(value) {
     super("signal", value);
@@ -10,34 +8,13 @@ class Signal extends Reactive {
    * @inheritdoc
    */
   get() {
-    if (activeComputed != null) {
-      this.state.computeds.add(activeComputed);
-    }
-    if (activeEffect != null) {
-      this.state.effects.add(activeEffect);
-    }
-    return this.state.value;
+    return getValue(this.state);
   }
   /**
    * Set the value
    */
   set(value) {
-    if (Object.is(this.state.value, value)) {
-      return;
-    }
-    this.state.value = value;
-    for (const computed of this.state.computeds) {
-      computed.effect.dirty = true;
-    }
-    for (const effect of this.state.effects) {
-      batchedHandlers.add(effect);
-    }
-    for (const [, subscription] of this.state.subscriptions) {
-      batchedHandlers.add(subscription);
-    }
-    if (batchDepth === 0) {
-      flushEffects();
-    }
+    setValue(this.state, value);
   }
   /**
    * Update the value

package/dist/value.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const batch = require("./batch.cjs");
+const computed = require("./computed.cjs");
+const effect = require("./effect.cjs");
+function emitValue(state) {
+  for (const computed2 of state.computeds) {
+    computed2.effect.dirty = true;
+  }
+  for (const effect2 of state.effects) {
+    batch.batchedHandlers.add(effect2);
+  }
+  for (const [, subscription] of state.subscriptions) {
+    batch.batchedHandlers.add(subscription);
+  }
+  if (batch.batchDepth === 0) {
+    batch.flushEffects();
+  }
+}
+function getValue(state) {
+  if (computed.activeComputed != null) {
+    state.computeds.add(computed.activeComputed);
+  }
+  if (effect.activeEffect != null) {
+    state.effects.add(effect.activeEffect);
+  }
+  return state.value;
+}
+function setValue(state, value) {
+  if (Object.is(state.value, value)) {
+    return;
+  }
+  state.value = value;
+  emitValue(state);
+}
+exports.emitValue = emitValue;
+exports.getValue = getValue;
+exports.setValue = setValue;

package/dist/value.js

@@ -0,0 +1,38 @@
+import { batchedHandlers, flushEffects, batchDepth } from "./batch.js";
+import { activeComputed } from "./computed.js";
+import { activeEffect } from "./effect.js";
+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();
+  }
+}
+function getValue(state) {
+  if (activeComputed != null) {
+    state.computeds.add(activeComputed);
+  }
+  if (activeEffect != null) {
+    state.effects.add(activeEffect);
+  }
+  return state.value;
+}
+function setValue(state, value) {
+  if (Object.is(state.value, value)) {
+    return;
+  }
+  state.value = value;
+  emitValue(state);
+}
+export {
+  emitValue,
+  getValue,
+  setValue
+};

package/package.json

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

package/src/array.ts

@@ -0,0 +1,201 @@
+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);
+
+	/**
+	 * The length of the array
+	 */
+	get length(): number {
+		return this.#size.get();
+	}
+
+	/**
+	 * Set the length of the array
+	 */
+	set length(value: number) {
+		if (
+			typeof value === 'number' &&
+			value >= 0 &&
+			value !== this.state.value.length
+		) {
+			this.get().length = value;
+		}
+	}
+
+	constructor(value: Item[]) {
+		super(
+			'array',
+			new Proxy(value, {
+				get: (target, property) =>
+					updateMethods.has(property as string)
+						? updateArray(property as string, target, this.state, this.#size)
+						: Reflect.get(target, property),
+				set: (target, property, value) =>
+					setValue(target, property, value, this.state, this.#size),
+			}),
+		);
+
+		this.#size.set(value.length);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	get(): Item[] {
+		return getValue(this.state);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	peek(): Item[];
+
+	/**
+	 * Get the length of the array _(without reactivity)_
+	 */
+	peek(length: true): number;
+
+	peek(length?: unknown): Item[] | number {
+		return length === true ? this.#size.peek() : [...this.state.value];
+	}
+
+	/**
+	 * Set the value
+	 */
+	set(value: Item[]): void;
+
+	/**
+	 * Set the value at an index
+	 */
+	set(index: number, value: Item): void;
+
+	/**
+	 * Set the length of the array
+	 */
+	set(property: 'length', value: number): void;
+
+	set(first: number | 'length' | Item[], second?: number | Item): void {
+		if (Array.isArray(first)) {
+			this.state.value.splice(0, this.state.value.length, ...first);
+		} else if (first === 'length') {
+			this.length = second as number;
+		} else if (typeof first === 'number') {
+			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;
+	}
+
+	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<Item>(
+	target: Item[],
+	property: PropertyKey,
+	value: unknown,
+	state: ReactiveState<Item[]>,
+	length: Signal<number>,
+): boolean {
+	const isIndex = !Number.isNaN(Number(property));
+	const isLength = property === 'length';
+
+	if (!isIndex && !isLength) {
+		return Reflect.set(target, property, value);
+	}
+
+	const previous = Reflect.get(target, property);
+
+	if (Object.is(previous, value)) {
+		return true;
+	}
+
+	Reflect.set(target, property, value);
+
+	emitValue(state);
+
+	length.set(target.length);
+
+	return true;
+}
+
+function updateArray<Item>(
+	type: string,
+	array: Item[],
+	state: ReactiveState<Item[]>,
+	length: Signal<number>,
+): unknown {
+	const affectsLength = lengthAffectingMethods.has(type);
+	const previousArray = affectsLength ? [] : [...array];
+	const previousLength = array.length;
+
+	return (...args: unknown[]): unknown => {
+		const result = (array[type as never] as (...args: unknown[]) => unknown)(
+			...args,
+		);
+
+		if (
+			affectsLength
+				? array.length !== previousLength
+				: emit(previousArray, array)
+		) {
+			emitValue(state);
+
+			length.set(array.length);
+		}
+
+		return result;
+	};
+}
+
+const lengthAffectingMethods = new Set<string>([
+	'pop',
+	'push',
+	'shift',
+	'unshift',
+]);
+
+const updateMethods = new Set<string>([
+	...lengthAffectingMethods,
+	'copyWithin',
+	'fill',
+	'reverse',
+	'sort',
+	'splice',
+]);

package/src/index.ts

@@ -1,7 +1,7 @@
+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';
-

package/src/reactive.ts

@@ -42,6 +42,20 @@ export abstract class Reactive<Value> {
 		return subscribe(this.state, callback);
 	}
 
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value {
+		return this.get();
+	}
+
+	/**
+	 * String representation of the value
+	 */
+	toString(): string {
+		return String(this.get());
+	}
+
 	/**
 	 * Unsubscribe from changes
 	 */

package/src/signal.ts

@@ -1,7 +1,5 @@
-import {batchDepth, batchedHandlers, flushEffects} from './batch';
-import {type InternalComputed, activeComputed} from './computed';
-import {activeEffect} from './effect';
 import {Reactive} from './reactive';
+import {getValue, setValue} from './value';
 
 export class Signal<Value> extends Reactive<Value> {
 	constructor(value: Value) {
@@ -12,42 +10,14 @@ export class Signal<Value> extends Reactive<Value> {
 	 * @inheritdoc
 	 */
 	get(): Value {
-		if (activeComputed != null) {
-			this.state.computeds.add(activeComputed);
-		}
-
-		if (activeEffect != null) {
-			this.state.effects.add(activeEffect);
-		}
-
-		return this.state.value;
+		return getValue(this.state);
 	}
 
 	/**
 	 * Set the value
 	 */
 	set(value: Value): void {
-		if (Object.is(this.state.value, value)) {
-			return;
-		}
-
-		this.state.value = value;
-
-		for (const computed of this.state.computeds) {
-			(computed as unknown as InternalComputed).effect.dirty = true;
-		}
-
-		for (const effect of this.state.effects) {
-			batchedHandlers.add(effect);
-		}
-
-		for (const [, subscription] of this.state.subscriptions) {
-			batchedHandlers.add(subscription as never);
-		}
-
-		if (batchDepth === 0) {
-			flushEffects();
-		}
+		setValue(this.state, value);
 	}
 
 	/**
@@ -58,6 +28,9 @@ export class Signal<Value> extends Reactive<Value> {
 	}
 }
 
+/**
+ * Create a reactive value
+ */
 export function signal<Value>(value: Value): Signal<Value> {
 	return new Signal(value);
 }

package/src/value.ts

@@ -0,0 +1,47 @@
+import {batchDepth, batchedHandlers, flushEffects} from './batch';
+import {type InternalComputed, activeComputed} from './computed';
+import {activeEffect} from './effect';
+import type {ReactiveState} from './reactive';
+
+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();
+	}
+}
+
+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)) {
+		return;
+	}
+
+	state.value = value;
+
+	emitValue(state);
+}

package/types/array.d.cts

@@ -0,0 +1,101 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export type GenericCallback = (...args: any[]) => any;
+declare class Effect {
+	private readonly $mora;
+	private readonly state;
+	constructor(callback: GenericCallback);
+}
+declare class Computed<Value> extends Reactive<Value> {
+	private readonly effect;
+	constructor(callback: () => Value);
+	/**
+	 * @inheritdoc
+	 */
+	get(): Value;
+}
+declare class Subscription<Value> {
+	state: ReactiveState<Value>;
+	callback: GenericCallback;
+	constructor(state: ReactiveState<Value>, callback: GenericCallback);
+}
+/**
+ * Unsubscribe from changes
+ */
+export type Unsubscribe = () => void;
+declare abstract class Reactive<Value> {
+	protected readonly state: ReactiveState<Value>;
+	constructor(name: string, value: Value);
+	/**
+	 * Get the value
+	 */
+	abstract get(): Value;
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value;
+	/**
+	 * Subscribe to changes
+	 */
+	subscribe(callback: (value: Value) => void): Unsubscribe;
+	/**
+	 * JSON representation of the value
+	 */
+	toJSON(): Value;
+	/**
+	 * String representation of the value
+	 */
+	toString(): string;
+	/**
+	 * Unsubscribe from changes
+	 */
+	unsubscribe(callback: (value: Value) => void): void;
+}
+export type ReactiveState<Value> = {
+	computeds: Set<Computed<unknown>>;
+	effects: Set<Effect>;
+	subscriptions: Map<(value: Value) => void, Subscription<Value>>;
+	value: Value;
+};
+export declare class ReactiveArray<Item> extends Reactive<Item[]> {
+	#private;
+	/**
+	 * The length of the array
+	 */
+	get length(): number;
+	/**
+	 * Set the length of the array
+	 */
+	set length(value: number);
+	constructor(value: Item[]);
+	/**
+	 * @inheritdoc
+	 */
+	get(): Item[];
+	/**
+	 * @inheritdoc
+	 */
+	peek(): Item[];
+	/**
+	 * Get the length of the array _(without reactivity)_
+	 */
+	peek(length: true): number;
+	/**
+	 * Set the value
+	 */
+	set(value: Item[]): void;
+	/**
+	 * Set the value at an index
+	 */
+	set(index: number, value: Item): void;
+	/**
+	 * Set the length of the array
+	 */
+	set(property: "length", value: number): void;
+}
+/**
+ * Create a reactive array
+ */
+export declare function array<Item>(value: Item[]): ReactiveArray<Item>;
+
+export {};

package/types/array.d.ts

@@ -0,0 +1,41 @@
+import { Reactive } from './reactive';
+export declare class ReactiveArray<Item> extends Reactive<Item[]> {
+    #private;
+    /**
+     * The length of the array
+     */
+    get length(): number;
+    /**
+     * Set the length of the array
+     */
+    set length(value: number);
+    constructor(value: Item[]);
+    /**
+     * @inheritdoc
+     */
+    get(): Item[];
+    /**
+     * @inheritdoc
+     */
+    peek(): Item[];
+    /**
+     * Get the length of the array _(without reactivity)_
+     */
+    peek(length: true): number;
+    /**
+     * Set the value
+     */
+    set(value: Item[]): void;
+    /**
+     * Set the value at an index
+     */
+    set(index: number, value: Item): void;
+    /**
+     * Set the length of the array
+     */
+    set(property: 'length', value: number): void;
+}
+/**
+ * Create a reactive array
+ */
+export declare function array<Item>(value: Item[]): ReactiveArray<Item>;