@oscarpalmer/mora 0.17.0 → 0.18.1

package/dist/value/signal.js

@@ -1,5 +1,5 @@
 import { signalName } from "../helpers/is.js";
-import { getValue, differentValues, emitValue } from "../helpers/value.js";
+import { getValue, emitValue } from "../helpers/value.js";
 import { Reactive } from "./reactive.js";
 class Signal extends Reactive {
   constructor(value, options) {
@@ -15,7 +15,7 @@ class Signal extends Reactive {
    * Set the value
    */
   set(value) {
-    if (differentValues(this.state, this.state.value, value)) {
+    if (!this.state.equal(this.state.value, value)) {
       this.state.value = value;
       emitValue(this.state);
     }

package/dist/value/store.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const is = require("../node_modules/@oscarpalmer/atoms/dist/internal/is.cjs");
+const helpers_is = require("../helpers/is.cjs");
+const helpers_proxy = require("../helpers/proxy.cjs");
+const helpers_value = require("../helpers/value.cjs");
+const value_reactive = require("./reactive.cjs");
+class Store extends value_reactive.Reactive {
+  constructor(value, options) {
+    super(
+      helpers_is.storeName,
+      new Proxy(value, {
+        set: (target, property, value2) => helpers_proxy.setValueInProxy(target, property, value2, this.state, false)
+      }),
+      options
+    );
+  }
+  get(key) {
+    return is.isKey(key) ? this.state.value[key] : helpers_value.getValue(this.state);
+  }
+  peek(key) {
+    return is.isKey(key) ? this.state.value[key] : { ...this.state.value };
+  }
+  set(first, second) {
+    if (is.isKey(first)) {
+      this.state.value[first] = second;
+    } else if (first == null || is.isPlainObject(first)) {
+      helpers_proxy.setProxyValue(this.state.value, first ?? {});
+    }
+  }
+}
+function store(value, options) {
+  return new Store(is.isPlainObject(value) ? value : {}, options);
+}
+exports.Store = Store;
+exports.store = store;

package/dist/value/store.js

@@ -0,0 +1,36 @@
+import { isPlainObject, isKey } from "../node_modules/@oscarpalmer/atoms/dist/internal/is.js";
+import { storeName } from "../helpers/is.js";
+import { setValueInProxy, setProxyValue } from "../helpers/proxy.js";
+import { getValue } from "../helpers/value.js";
+import { Reactive } from "./reactive.js";
+class Store extends Reactive {
+  constructor(value, options) {
+    super(
+      storeName,
+      new Proxy(value, {
+        set: (target, property, value2) => setValueInProxy(target, property, value2, this.state, false)
+      }),
+      options
+    );
+  }
+  get(key) {
+    return isKey(key) ? this.state.value[key] : getValue(this.state);
+  }
+  peek(key) {
+    return isKey(key) ? this.state.value[key] : { ...this.state.value };
+  }
+  set(first, second) {
+    if (isKey(first)) {
+      this.state.value[first] = second;
+    } else if (first == null || isPlainObject(first)) {
+      setProxyValue(this.state.value, first ?? {});
+    }
+  }
+}
+function store(value, options) {
+  return new Store(isPlainObject(value) ? value : {}, options);
+}
+export {
+  Store,
+  store
+};

package/package.json

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

package/src/helpers/is.ts

@@ -4,6 +4,7 @@ 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 {Store} from '../value/store';
 
 /**
  * Is the value a reactive array?
@@ -48,9 +49,14 @@ export function isSignal(value: unknown): value is Signal<unknown> {
 	return isMora<Signal<unknown>>(value, signalName);
 }
 
+export function isStore(value: unknown): value is Store<PlainObject> {
+	return isMora<Reactive<unknown>>(value, storeName);
+}
+
 export const arrayName = 'array';
 export const computedName = 'computed';
 export const effectName = 'effect';
 export const signalName = 'signal';
+export const storeName = 'store';
 
-const reactiveNames = new Set([arrayName, computedName, signalName]);
+const reactiveNames = new Set([arrayName, computedName, signalName, storeName]);

package/src/helpers/proxy.ts

@@ -0,0 +1,71 @@
+import type {ArrayOrPlainObject, PlainObject} from '@oscarpalmer/atoms/models';
+import {startBatch, stopBatch} from '../batch';
+import type {ReactiveState} from '../value/reactive';
+import type {Signal} from '../value/signal';
+import {emitValue} from './value';
+
+export function setProxyValue(
+	proxy: ArrayOrPlainObject,
+	value: ArrayOrPlainObject,
+): void {
+	startBatch();
+
+	const proxyKeys = Object.keys(proxy);
+	const valueKeys = Object.keys(value);
+
+	let {length} = proxyKeys;
+
+	for (let index = 0; index < length; index += 1) {
+		const key = proxyKeys[index];
+
+		(proxy as PlainObject)[key] = valueKeys.includes(key)
+			? (value as PlainObject)[key]
+			: undefined;
+	}
+
+	length = valueKeys.length;
+
+	for (let index = 0; index < length; index += 1) {
+		const key = valueKeys[index];
+
+		if (!proxyKeys.includes(key)) {
+			const keyedValue = (value as PlainObject)[key];
+
+			(proxy as PlainObject)[key] = keyedValue;
+		}
+	}
+
+	stopBatch();
+}
+
+export function setValueInProxy<Value extends ArrayOrPlainObject, Equal>(
+	target: Value,
+	property: PropertyKey,
+	value: unknown,
+	state: ReactiveState<Value, Equal>,
+	isArray: boolean,
+	length?: Signal<number>,
+): boolean {
+	if (isArray) {
+		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 (!state.equal(previous as never, value as never)) {
+		Reflect.set(target, property, value);
+
+		emitValue(state);
+
+		if (isArray) {
+			length?.set((target as unknown[]).length);
+		}
+	}
+
+	return true;
+}

package/src/helpers/value.ts

@@ -3,7 +3,25 @@ import {activeEffect} from '../effect';
 import {type InternalComputed, activeComputed} from '../value/computed';
 import type {ReactiveState} from '../value/reactive';
 
-export function differentArrays<Value>(
+export function emitValue<Value>(state: ReactiveState<Value, never>): 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 equalArrays<Value>(
 	state: ReactiveState<Value[], Value>,
 	first: Value[],
 	second: Value[],
@@ -11,7 +29,7 @@ export function differentArrays<Value>(
 	let {length} = first;
 
 	if (length !== second.length) {
-		return true;
+		return false;
 	}
 
 	let offset = 0;
@@ -22,7 +40,7 @@ export function differentArrays<Value>(
 
 		for (let index = 0; index < offset; index += 1) {
 			if (!state.equal(first[index], second[index])) {
-				return true;
+				return false;
 			}
 		}
 	}
@@ -31,39 +49,11 @@ export function differentArrays<Value>(
 
 	for (let index = offset; index < length; index += 1) {
 		if (!state.equal(first[index], second[index])) {
-			return true;
+			return false;
 		}
 	}
 
-	return false;
-}
-
-export function differentValues<Value>(
-	state: ReactiveState<Value, Value>,
-	first: Value,
-	second: Value,
-): boolean {
-	return Array.isArray(first) && Array.isArray(second)
-		? differentArrays(state as never, first, second)
-		: !state.equal(first, second);
-}
-
-export function emitValue<Value>(state: ReactiveState<Value, never>): 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();
-	}
+	return true;
 }
 
 export function getValue<Value>(state: ReactiveState<Value, never>): Value {

package/src/index.ts

@@ -11,3 +11,4 @@ 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';
+export {store, type Store} from './value/store';

package/src/value/array.ts

@@ -1,5 +1,6 @@
 import {arrayName} from '../helpers/is';
-import {differentArrays, emitValue, getValue} from '../helpers/value';
+import {setValueInProxy} from '../helpers/proxy';
+import {emitValue, equalArrays, getValue} from '../helpers/value';
 import {type Computed, computed} from './computed';
 import {Reactive, type ReactiveOptions, type ReactiveState} from './reactive';
 import {type Signal, signal} from './signal';
@@ -36,7 +37,14 @@ export class ReactiveArray<Item> extends Reactive<Item[], Item> {
 						? 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),
+					setValueInProxy(
+						target,
+						property,
+						value,
+						this.state,
+						true,
+						this.#size,
+					),
 			}),
 			options,
 		);
@@ -172,33 +180,6 @@ export function array<Item>(
 	return new ReactiveArray(Array.isArray(value) ? value : [], options);
 }
 
-function setValue<Item>(
-	target: Item[],
-	property: PropertyKey,
-	value: Item,
-	state: ReactiveState<Item[], 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 (!state.equal(previous, value)) {
-		Reflect.set(target, property, value);
-
-		emitValue(state);
-
-		length.set(target.length);
-	}
-
-	return true;
-}
-
 function updateArray<Item>(
 	type: string,
 	array: Item[],
@@ -217,7 +198,7 @@ function updateArray<Item>(
 		if (
 			affectsLength
 				? array.length !== previousLength
-				: differentArrays(state, previousArray, array)
+				: !equalArrays(state, previousArray, array)
 		) {
 			emitValue(state);
 

package/src/value/signal.ts

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

package/src/value/store.ts

@@ -0,0 +1,90 @@
+import {isKey, isPlainObject} from '@oscarpalmer/atoms/is';
+import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+import {storeName} from '../helpers/is';
+import {setProxyValue, setValueInProxy} from '../helpers/proxy';
+import {getValue} from '../helpers/value';
+import {Reactive, type ReactiveOptions} from './reactive';
+
+export class Store<Value extends PlainObject> extends Reactive<Value, Value> {
+	constructor(value: Value, options?: ReactiveOptions<Value>) {
+		super(
+			storeName,
+			new Proxy(value, {
+				set: (target, property, value) =>
+					setValueInProxy(target, property, value, this.state, false),
+			}),
+			options,
+		);
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	get(): Value;
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	get(key: keyof Value): Value[keyof Value];
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	get(key: Key): unknown;
+
+	get(key?: unknown): unknown {
+		return isKey(key) ? this.state.value[key] : getValue(this.state);
+	}
+
+	/**
+	 * Get the value _(without reactivity)_
+	 */
+	peek(): Value;
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	peek(key: keyof Value): Value[keyof Value];
+
+	/**
+	 * Get a value by key _(without reactivity)_
+	 */
+	peek(key: Key): unknown;
+
+	peek(key?: unknown): unknown {
+		return isKey(key) ? this.state.value[key] : {...this.state.value};
+	}
+
+	/**
+	 * Set the value
+	 */
+	set(value?: Value): void;
+
+	/**
+	 * Set a value by key
+	 */
+	set(key: keyof Value, value: Value[keyof Value]): void;
+
+	/**
+	 * Set a value by key
+	 */
+	set(key: Key, value: unknown): void;
+
+	set(first?: unknown, second?: unknown): void {
+		if (isKey(first)) {
+			(this.state.value as PlainObject)[first] = second;
+		} else if (first == null || isPlainObject(first)) {
+			setProxyValue(this.state.value, first ?? {});
+		}
+	}
+}
+
+/**
+ * Create a reactive store
+ */
+export function store<Value extends PlainObject>(
+	value: Value,
+	options?: ReactiveOptions<Value>,
+): Store<Value> {
+	return new Store((isPlainObject(value) ? value : {}) as Value, options);
+}

package/types/helpers/is.d.ts

@@ -3,6 +3,7 @@ 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 { Store } from '../value/store';
 /**
  * Is the value a reactive array?
  */
@@ -20,7 +21,9 @@ export declare function isReactive(value: unknown): value is Reactive<unknown>;
  * Is the value a signal?
  */
 export declare function isSignal(value: unknown): value is Signal<unknown>;
+export declare function isStore(value: unknown): value is Store<unknown>;
 export declare const arrayName = "array";
 export declare const computedName = "computed";
 export declare const effectName = "effect";
 export declare const signalName = "signal";
+export declare const storeName = "store";

package/types/helpers/proxy.d.ts

@@ -0,0 +1,5 @@
+import type { ArrayOrPlainObject } from '@oscarpalmer/atoms/models';
+import type { ReactiveState } from '../value/reactive';
+import type { Signal } from '../value/signal';
+export declare function setProxyValue(proxy: ArrayOrPlainObject, value: ArrayOrPlainObject): void;
+export declare function setValueInProxy<Value extends ArrayOrPlainObject, Equal>(target: Value, property: PropertyKey, value: unknown, state: ReactiveState<Value, Equal>, isArray: boolean, length?: Signal<number>): boolean;

package/types/helpers/value.d.ts

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

package/types/index.d.ts

@@ -5,3 +5,4 @@ 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';
+export { store, type Store } from './value/store';

package/types/value/store.d.ts

@@ -0,0 +1,45 @@
+import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
+import { Reactive, type ReactiveOptions } from './reactive';
+export declare class Store<Value extends PlainObject> extends Reactive<Value, Value> {
+    constructor(value: Value, options?: ReactiveOptions<Value>);
+    /**
+     * @inheritdoc
+     */
+    get(): Value;
+    /**
+     * Get a value by key _(without reactivity)_
+     */
+    get(key: keyof Value): Value[keyof Value];
+    /**
+     * Get a value by key _(without reactivity)_
+     */
+    get(key: Key): unknown;
+    /**
+     * Get the value _(without reactivity)_
+     */
+    peek(): Value;
+    /**
+     * Get a value by key _(without reactivity)_
+     */
+    peek(key: keyof Value): Value[keyof Value];
+    /**
+     * Get a value by key _(without reactivity)_
+     */
+    peek(key: Key): unknown;
+    /**
+     * Set the value
+     */
+    set(value?: Value): void;
+    /**
+     * Set a value by key
+     */
+    set(key: keyof Value, value: Value[keyof Value]): void;
+    /**
+     * Set a value by key
+     */
+    set(key: Key, value: unknown): void;
+}
+/**
+ * Create a reactive store
+ */
+export declare function store<Value extends PlainObject>(value: Value, options?: ReactiveOptions<Value>): Store<Value>;

package/types/batch.d.cts

@@ -1,79 +0,0 @@
-// 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, options?: ReactiveOptions<Value>);
-	/**
-	 * @inheritdoc
-	 */
-	get(): Value;
-}
-declare abstract class Reactive<Value, Equal = Value> {
-	protected readonly state: ReactiveState<Value, Equal>;
-	constructor(name: string, value: Value, options?: ReactiveOptions<Equal>);
-	/**
-	 * 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 ReactiveOptions<Value> = {
-	/**
-	 * Method to compare values for equality
-	 */
-	equal?: (first: Value, second: Value) => boolean;
-};
-export type ReactiveState<Value, Equal> = {
-	computeds: Set<Computed<unknown>>;
-	effects: Set<Effect>;
-	equal: (first: Equal, second: Equal) => boolean;
-	subscriptions: Map<(value: Value) => void, Subscription<Value>>;
-	value: Value;
-};
-declare class Subscription<Value> {
-	state: ReactiveState<Value, never>;
-	callback: GenericCallback;
-	constructor(state: ReactiveState<Value, never>, callback: GenericCallback);
-}
-/**
- * Unsubscribe from changes
- */
-export type Unsubscribe = () => void;
-export declare function flushHandlers(): void;
-/**
- * Start batching effects _(use `stopBatch` to flush and run batched effects)_
- */
-export declare function startBatch(): void;
-/**
- * Stop batching effects and flush _(run)_ them
- */
-export declare function stopBatch(): void;
-export declare const batchedHandlers: Set<Effect | Subscription<unknown>>;
-export declare let batchDepth: number;
-
-export {};

package/types/effect.d.cts

@@ -1,16 +0,0 @@
-// Generated by dts-bundle-generator v9.5.1
-
-export type GenericCallback = (...args: any[]) => any;
-export declare class Effect {
-	private readonly $mora;
-	private readonly state;
-	constructor(callback: GenericCallback);
-}
-export declare function runEffect(effect: Effect): void;
-/**
- * Create an effect
- */
-export declare function effect(callback: GenericCallback): Effect;
-export declare let activeEffect: Effect | undefined;
-
-export {};