@oscarpalmer/mora 0.30.0 → 0.31.0

package/dist/value/array.mjs

@@ -4,15 +4,19 @@ import { subscribe, unsubscribe } from "../subscription.mjs";
 import { reactive } from "./reactive.mjs";
 import { computed } from "./computed.mjs";
 import { emityProxyValues, getReactiveValueInProxy, setProxyValue, setValueInProxy } from "../helpers/proxy.mjs";
+import { getReadonlyInstance } from "./readonly.mjs";
 import { signal } from "./signal.mjs";
 import { select } from "@oscarpalmer/atoms/array";
 import { filter } from "@oscarpalmer/atoms/array/filter";
 import { noop } from "@oscarpalmer/atoms/function";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
 //#region src/value/array.ts
 function array(value, options) {
 	const [rx, state] = reactive([], options);
 	const indiced = /* @__PURE__ */ new Map();
 	const length = signal(0);
+	const readonlies = {};
+	let instance = {};
 	state.value = new Proxy([], {
 		get: (target, property) => METHODS_UPDATE.has(property) ? updateArray(property, target, state, length) : Reflect.get(target, property),
 		set: (target, property, value) => setValueInProxy({
@@ -27,37 +31,43 @@ function array(value, options) {
 	function get(value) {
 		return getArrayValue(instance, indiced, state, length, value);
 	}
-	const instance = {
+	function set(first, second) {
+		setProxyValue(true, state, isArrayValue, isArrayIndex, setArray, setAtIndex, first, second);
+	}
+	const handlers = {
 		...rx,
-		length: state.value.length,
+		get: (value) => get(value),
+		peek: (first, second) => peekArrayValue(state, length, first, second),
+		subscribe: (first, second) => {
+			if (typeof first === "number" && typeof second === "function") return getReactiveValueInProxy(instance, indiced, first, true).subscribe(second);
+			return typeof first === "function" ? subscribe(state, first) : noop;
+		},
+		unsubscribe: (first, second) => {
+			if (typeof first === "number" && typeof second === "function") getReactiveValueInProxy(instance, indiced, first, true)?.unsubscribe(second);
+			else if (typeof first === "function") unsubscribe(state, first);
+		}
+	};
+	instance = {
+		...handlers,
+		asReadonly: (frozen) => getReadonlyInstance(state, readonlies, handlers, frozen === true),
 		at: (index) => get(index),
 		clear: () => {
 			state.value.length = 0;
 		},
 		filter: (callback) => computed(() => filter(get(), callback)),
-		get: (value) => get(value),
 		map: (callback) => computed(() => get().map(callback)),
 		notify: () => {
 			emityProxyValues(state, indiced);
 		},
-		peek: (value) => peekArrayValue(state, length, value),
 		pop: () => state.value.pop(),
 		push: (...items) => state.value.push(...items),
 		select: (filter, map) => computed(() => select(get(), filter, map)),
 		set: (first, second) => {
-			setProxyValue(true, state, isArrayValue, isArrayIndex, setArray, setAtIndex, first, second);
+			set(first, second);
 		},
 		shift: () => state.value.shift(),
 		splice: (from, to, ...items) => state.value.splice(from, to ?? state.value.length, ...items),
-		subscribe: (first, second) => {
-			if (typeof first === "number" && typeof second === "function") return getReactiveValueInProxy(instance, indiced, first, true).subscribe(second);
-			return typeof first === "function" ? subscribe(state, first) : noop;
-		},
 		unshift: (...items) => state.value.unshift(...items),
-		unsubscribe: (first, second) => {
-			if (typeof first === "number" && typeof second === "function") getReactiveValueInProxy(instance, indiced, first, true)?.unsubscribe(second);
-			else if (typeof first === "function") unsubscribe(state, first);
-		},
 		update: (callback) => updateArrayValue(instance, state, callback)
 	};
 	Object.defineProperties(instance, {
@@ -71,7 +81,7 @@ function array(value, options) {
 			set: (value) => setArrayLength(state, value)
 		}
 	});
-	instance.set(value);
+	set(value);
 	return Object.freeze(instance);
 }
 function getArrayValue(instance, indiced, state, length, first) {
@@ -84,9 +94,15 @@ function isArrayIndex(value) {
 function isArrayValue(value) {
 	return value == null || Array.isArray(value);
 }
-function peekArrayValue(state, length, value) {
-	if (value === "length") return length.peek();
-	return typeof value === "number" ? state.value.at(value) : state.value.slice();
+function peekArrayValue(state, length, first, second) {
+	if (first === "length") return length.peek();
+	let value;
+	if (typeof first === "number") value = state.value.at(first);
+	else value = state.value;
+	if (!(first === true || second === true)) return value;
+	if (Array.isArray(value)) return value.slice();
+	if (isPlainObject(value)) return { ...value };
+	return value;
 }
 function setArray(state, value) {
 	state.value.splice(0, state.value.length, ...value ?? []);

package/dist/value/readonly.d.mts

@@ -0,0 +1,7 @@
+import { ReactiveState, ReadonlyFrozenSignal, ReadonlyInstances, ReadonlySignal } from "../models.mjs";
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/value/readonly.d.ts
+declare function getReadonlyInstance<Value>(state: ReactiveState<Value, never>, instances: ReadonlyInstances<Value>, handlers: Record<string, GenericCallback>, frozen: boolean): ReadonlySignal<Value>;
+declare function getReadonlySignal<Value>(state: ReactiveState<Value, never>, handlers: Record<string, GenericCallback>, frozen: boolean): ReadonlySignal<Value> | ReadonlyFrozenSignal<Value>;
+//#endregion
+export { getReadonlyInstance, getReadonlySignal };

package/dist/value/readonly.mjs

@@ -0,0 +1,37 @@
+import { NAME_MORA, NAME_READONLY } from "../constants.mjs";
+import { getSimpleValue } from "../helpers/value.mjs";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+//#region src/value/readonly.ts
+function getReadonlyInstance(state, instances, handlers, frozen) {
+	const key = frozen ? "frozen" : "original";
+	instances[key] ??= getReadonlySignal(state, handlers, frozen);
+	return instances[key];
+}
+function getReadonlySignal(state, handlers, frozen) {
+	const instance = {
+		...handlers,
+		get: () => getReadonlyValue(state, false, frozen),
+		peek: () => getReadonlyValue(state, true, frozen)
+	};
+	Object.defineProperties(instance, {
+		[NAME_MORA]: {
+			enumerable: false,
+			value: NAME_READONLY
+		},
+		frozen: {
+			enumerable: true,
+			value: frozen
+		}
+	});
+	return Object.freeze(instance);
+}
+function getReadonlyValue(state, peek, frozen) {
+	let value = peek ? state.value : getSimpleValue(state);
+	if (!frozen) return value;
+	if (Array.isArray(state.value)) value = [...state.value];
+	else if (isPlainObject(state.value)) value = { ...state.value };
+	else value = state.value;
+	return Object.freeze(value);
+}
+//#endregion
+export { getReadonlyInstance, getReadonlySignal };

package/dist/value/signal.mjs

@@ -2,6 +2,7 @@ import { NAME_MORA, NAME_SIGNAL } from "../constants.mjs";
 import { emitValue, getSimpleValue, handleSimpleValue } from "../helpers/value.mjs";
 import { subscribe } from "../subscription.mjs";
 import { reactive } from "./reactive.mjs";
+import { getReadonlyInstance } from "./readonly.mjs";
 //#region src/value/signal.ts
 function setAndEmit(state, value) {
 	if (!state.equal(state.value, value)) {
@@ -11,8 +12,17 @@ function setAndEmit(state, value) {
 }
 function signal(value, options) {
 	const [rx, state] = reactive(void 0, options);
-	const instance = {
+	const readonlies = {};
+	const handlers = {
 		...rx,
+		subscribe: (callback) => subscribe(state, callback),
+		unsubscribe: (callback) => {
+			state.subscriptions.delete(callback);
+		}
+	};
+	const instance = {
+		...handlers,
+		asReadonly: (frozen) => getReadonlyInstance(state, readonlies, handlers, frozen === true),
 		get: () => getSimpleValue(state),
 		peek: () => state.value,
 		set: (value) => {
@@ -20,10 +30,6 @@ function signal(value, options) {
 		},
 		update: (callback) => {
 			handleSimpleValue(state, callback(state.value), setAndEmit);
-		},
-		subscribe: (callback) => subscribe(state, callback),
-		unsubscribe: (callback) => {
-			state.subscriptions.delete(callback);
 		}
 	};
 	Object.defineProperty(instance, NAME_MORA, {

package/dist/value/store.mjs

@@ -4,6 +4,7 @@ import { getSimpleValue } from "../helpers/value.mjs";
 import { noop, subscribe, unsubscribe } from "../subscription.mjs";
 import { reactive } from "./reactive.mjs";
 import { emityProxyValues, getReactiveValueInProxy, setProxyValue, setValueInProxy } from "../helpers/proxy.mjs";
+import { getReadonlyInstance } from "./readonly.mjs";
 import { isKey, isPlainObject } from "@oscarpalmer/atoms/is";
 //#region src/value/store.ts
 function isStoreObject(value) {
@@ -27,12 +28,23 @@ function setObject(state, value) {
 	}
 	stopBatch();
 }
+function peekStoreValue(state, first, second) {
+	let value;
+	if (isKey(first)) value = state.value[first];
+	else value = state.value;
+	if (!(first === true || second === true)) return value;
+	if (Array.isArray(value)) return value.slice();
+	if (isPlainObject(value)) return { ...value };
+	return value;
+}
 function setProperty(state, key, value) {
 	state.value[key] = value;
 }
 function store(value, options) {
 	const [rx, state] = reactive(void 0, options);
 	const keyed = /* @__PURE__ */ new Map();
+	const readonlies = {};
+	let instance = {};
 	state.value = new Proxy({}, { set: (target, property, value) => setValueInProxy({
 		target,
 		property,
@@ -40,16 +52,10 @@ function store(value, options) {
 		value,
 		isArray: false
 	}) });
-	const instance = {
+	const handlers = {
 		...rx,
 		get: (value) => isKey(value) ? getReactiveValueInProxy(instance, keyed, value, false).get() : getSimpleValue(state),
-		notify() {
-			emityProxyValues(state, keyed);
-		},
-		peek: (value) => isKey(value) ? state.value[value] : { ...state.value },
-		set: (first, second) => {
-			setProxyValue(false, state, isStoreObject, isKey, setObject, setProperty, first, second);
-		},
+		peek: (first, second) => peekStoreValue(state, first, second),
 		subscribe: (first, second) => {
 			if (isKey(first) && typeof second === "function") return getReactiveValueInProxy(instance, keyed, first, false).subscribe(second);
 			return typeof first === "function" ? subscribe(state, first) : noop;
@@ -57,6 +63,16 @@ function store(value, options) {
 		unsubscribe: (first, second) => {
 			if (isKey(first) && typeof second === "function") getReactiveValueInProxy(instance, keyed, first, false)?.unsubscribe(second);
 			else if (typeof first === "function") unsubscribe(state, first);
+		}
+	};
+	instance = {
+		...handlers,
+		asReadonly: (frozen) => getReadonlyInstance(state, readonlies, handlers, frozen === true),
+		notify() {
+			emityProxyValues(state, keyed);
+		},
+		set: (first, second) => {
+			setProxyValue(false, state, isStoreObject, isKey, setObject, setProperty, first, second);
 		},
 		update: (callback) => {
 			const updated = callback(state.value);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/mora",
-	"version": "0.30.0",
+	"version": "0.31.0",
 	"description": "Signals and stuff…",
 	"keywords": [
 		"reactive",

package/src/constants.ts

@@ -33,10 +33,18 @@ export const NAME_EFFECT = 'effect';
 
 export const NAME_MORA = '$mora';
 
+export const NAME_READONLY = 'readonly';
+
 export const NAME_SIGNAL = 'signal';
 
 export const NAME_STORE = 'store';
 
-export const NAME_ALL = new Set([NAME_ARRAY, NAME_COMPUTED, NAME_SIGNAL, NAME_STORE]);
+export const NAME_ALL = new Set([
+	NAME_ARRAY,
+	NAME_COMPUTED,
+	NAME_READONLY,
+	NAME_SIGNAL,
+	NAME_STORE,
+]);
 
 export const PROPERTY_LENGTH = 'length';

package/src/helpers/is.ts

@@ -5,20 +5,19 @@ import {
 	NAME_COMPUTED,
 	NAME_EFFECT,
 	NAME_MORA,
+	NAME_READONLY,
 	NAME_SIGNAL,
 	NAME_STORE,
 } from '../constants';
-import type {Computed, Effect, Reactive, ReactiveArray, ReactiveStore, Signal} from '../models';
-
-/**
- * Is the value a reactive array?
- *
- * @param value Value to check
- * @returns True if value is a {@link ReactiveArray}
- */
-export function isArray<Item>(value: unknown): value is ReactiveArray<Item> {
-	return isMora<ReactiveArray<Item>>(value, NAME_ARRAY);
-}
+import type {
+	Computed,
+	Effect,
+	Reactive,
+	ReactiveArray,
+	ReactiveStore,
+	ReadonlySignal,
+	Signal,
+} from '../models';
 
 /**
  * Is the value a computed signal?
@@ -40,7 +39,7 @@ export function isEffect(value: unknown): value is Effect {
 	return isMora<Effect>(value, NAME_EFFECT);
 }
 
-function isMora<T>(value: unknown, name: string | Set<string>): value is T {
+function isMora<Instance>(value: unknown, name: string | Set<string>): value is Instance {
 	return (
 		typeof value === 'object' &&
 		value != null &&
@@ -71,12 +70,28 @@ export function isSignal<Value>(value: unknown): value is Signal<Value> {
 	return isMora<Signal<Value>>(value, NAME_SIGNAL);
 }
 
+/**
+ * Is the value a reactive array?
+ *
+ * @param value Value to check
+ * @returns True if value is a {@link ReactiveArray}
+ */
+export function isReactiveArray<Item>(value: unknown): value is ReactiveArray<Item> {
+	return isMora<ReactiveArray<Item>>(value, NAME_ARRAY);
+}
+
 /**
  * Is the value a reactive store?
  *
  * @param value Value to check
  * @returns True if value is a {@link Store}
  */
-export function isStore<Value extends PlainObject>(value: unknown): value is ReactiveStore<Value> {
+export function isReactiveStore<Value extends PlainObject>(
+	value: unknown,
+): value is ReactiveStore<Value> {
 	return isMora<ReactiveStore<Value>>(value, NAME_STORE);
 }
+
+export function isReadonlySignal<Value>(value: unknown): value is ReadonlySignal<Value> {
+	return isMora<ReadonlySignal<Value>>(value, NAME_READONLY);
+}

package/src/index.ts

@@ -1,7 +1,23 @@
 export {startBatch, stopBatch} from './batch';
 export {effect} from './effect';
-export {isArray, isComputed, isEffect, isReactive, isSignal} from './helpers/is';
-export type {Computed, Effect, ReactiveArray, ReactiveStore, Signal, Unsubscribe} from './models';
+export {
+	isComputed,
+	isEffect,
+	isReactive,
+	isReactiveArray,
+	isReactiveStore,
+	isReadonlySignal,
+	isSignal,
+} from './helpers/is';
+export type {
+	Computed,
+	Effect,
+	ReactiveArray,
+	ReactiveStore,
+	ReadonlySignal,
+	Signal,
+	Unsubscribe,
+} from './models';
 export {array} from './value/array';
 export {computed} from './value/computed';
 export {signal} from './value/signal';

package/src/models.ts

@@ -1,4 +1,4 @@
-import type {GenericCallback, Key} from '@oscarpalmer/atoms/models';
+import type {GenericCallback, Key, PlainObject} from '@oscarpalmer/atoms/models';
 import type {PROPERTY_LENGTH} from './constants';
 
 export type Active = {
@@ -52,6 +52,24 @@ export type ReactiveArray<Item> = {
 	 */
 	set length(value: number);
 
+	/**
+	 * Get a readonly version of the reactive array
+	 *
+	 * @param frozen Freeze the array? _(defaults to `false`)_
+	 * @returns Readonly reactive array
+	 */
+	asReadonly(frozen: true): ReadonlyFrozenSignal<Item[]>;
+
+	/**
+	 * Get a readonly version of the reactive array
+	 *
+	 * @param frozen Freeze the array? _(defaults to `false`)_
+	 * @returns Readonly reactive array
+	 */
+	asReadonly(
+		frozen?: boolean,
+	): typeof frozen extends true ? ReadonlyFrozenSignal<Item[]> : ReadonlySignal<Item[]>;
+
 	/**
 	 * Get the value at an index
 	 *
@@ -114,17 +132,19 @@ export type ReactiveArray<Item> = {
 	/**
 	 * Get the array _(without reactivity)_
 	 *
+	 * @param copy Copy the array? _(defaults to `false`)_
 	 * @returns Array of items
 	 */
-	peek(): Item[];
+	peek(copy?: boolean): Item[];
 
 	/**
 	 * Get the value at an index _(without reactivity)_
 	 *
 	 * @param index Index of item to get _(if negative, starts from the end)_
+	 * @param copy If the item is an array or record, should it be copied? _(defaults to `false`)_
 	 * @returns Item at index, or `undefined` if it doesn't exist
 	 */
-	peek(index: number): Item | undefined;
+	peek(index: number, copy?: boolean): Item | undefined;
 
 	/**
 	 * Get the length of the array _(without reactivity)_
@@ -272,13 +292,31 @@ export type ReactiveState<Value, Equal> = {
 	value: Value;
 };
 
-export type ReactiveStore<Value> = {
+export type ReactiveStore<Store> = {
+	/**
+	 * Get a readonly version of the reactive store
+	 *
+	 * @param frozen Freeze the store? _(defaults to `false`)_
+	 * @returns Readonly reactive store
+	 */
+	asReadonly(frozen: true): ReadonlyFrozenSignal<Store>;
+
+	/**
+	 * Get a readonly version of the reactive store
+	 *
+	 * @param frozen Freeze the store? _(defaults to `false`)_
+	 * @returns Readonly reactive store
+	 */
+	asReadonly(
+		frozen?: boolean,
+	): typeof frozen extends true ? ReadonlyFrozenSignal<Store> : ReadonlySignal<Store>;
+
 	/**
 	 * Get the value
 	 *
 	 * @returns Current value
 	 */
-	get(): Value;
+	get(): Store;
 
 	/**
 	 * Get a value by key
@@ -286,7 +324,7 @@ export type ReactiveStore<Value> = {
 	 * @param key Key of the value to get
 	 * @returns Value for the specified key, or `undefined` if it doesn't exist
 	 */
-	get<Key extends keyof Value>(key: Key): Value[Key];
+	get<Key extends keyof Store>(key: Key): Store[Key];
 
 	/**
 	 * Get a value by key
@@ -307,25 +345,28 @@ export type ReactiveStore<Value> = {
 	/**
 	 * Get the value _(without reactivity)_
 	 *
+	 * @param copy Copy the store? _(defaults to `false`)_
 	 * @returns Current value
 	 */
-	peek(): Value;
+	peek(copy?: boolean): Store;
 
 	/**
 	 * Get a value by key _(without reactivity)_
 	 *
 	 * @param key Key of the value to get
+	 * @param copy If the value is an array or record, should it be copied? _(defaults to `false`)_
 	 * @returns Value for the specified key, or `undefined` if it doesn't exist
 	 */
-	peek<Key extends keyof Value>(key: Key): Value[Key];
+	peek<Key extends keyof Store>(key: Key, copy?: boolean): Store[Key];
 
 	/**
 	 * Get a value by key _(without reactivity)_
 	 *
 	 * @param key Key of the value to get
+	 * @param copy If the value is an array or record, should it be copied? _(defaults to `false`)_
 	 * @returns Value for the specified key, or `undefined` if it doesn't exist
 	 */
-	peek(key: Key): unknown;
+	peek(key: Key, copy?: boolean): unknown;
 
 	/**
 	 * Set the value
@@ -334,9 +375,9 @@ export type ReactiveStore<Value> = {
 	 */
 	set(
 		value?:
-			| Value
-			| (() => null | undefined | Value | Promise<null | undefined | Value>)
-			| Promise<null | undefined | Value>,
+			| Store
+			| (() => null | undefined | Store | Promise<null | undefined | Store>)
+			| Promise<null | undefined | Store>,
 	): void;
 
 	/**
@@ -345,9 +386,9 @@ export type ReactiveStore<Value> = {
 	 * @param key Key of the value to set
 	 * @param value New value
 	 */
-	set<Key extends keyof Value>(
+	set<Key extends keyof Store>(
 		key: Key,
-		value: Value[Key] | (() => Value[Key] | Promise<Value[Key]>) | Promise<Value[Key]>,
+		value: Store[Key] | (() => Store[Key] | Promise<Store[Key]>) | Promise<Store[Key]>,
 	): void;
 
 	/**
@@ -364,7 +405,7 @@ export type ReactiveStore<Value> = {
 	 * @param callback Callback for changes
 	 * @returns Unsubscribe callback
 	 */
-	subscribe(callback: (value: Value) => void): Unsubscribe;
+	subscribe(callback: (value: Store) => void): Unsubscribe;
 
 	/**
 	 * Subscribe to changes for a specific key
@@ -373,9 +414,9 @@ export type ReactiveStore<Value> = {
 	 * @param callback Callback for changes
 	 * @returns Unsubscribe callback
 	 */
-	subscribe<Key extends keyof Value>(
+	subscribe<Key extends keyof Store>(
 		key: Key,
-		callback: (value: Value[Key] | undefined) => void,
+		callback: (value: Store[Key] | undefined) => void,
 	): Unsubscribe;
 
 	/**
@@ -393,25 +434,54 @@ export type ReactiveStore<Value> = {
 	 * @param key Key of the value to unsubscribe from
 	 * @param callback Callback to unsubscribe
 	 */
-	unsubscribe<Key extends keyof Value>(
+	unsubscribe<Key extends keyof Store>(
 		key: Key,
-		callback: (value: Value[Key] | undefined) => void,
+		callback: (value: Store[Key] | undefined) => void,
 	): void;
 
+	/**
+	 * Unsubscribe from changes for a specific key
+	 *
+	 * @param key Key of the value to unsubscribe from
+	 * @param callback Callback to unsubscribe
+	 */
+	unsubscribe(key: Key, callback: (value: unknown | undefined) => void): void;
+
 	/**
 	 * Unsubscribe from changes
 	 *
 	 * @param callback Callback to unsubscribe
 	 */
-	unsubscribe(callback: (value: Value) => void): void;
+	unsubscribe(callback: (value: Store) => void): void;
 
 	/**
 	 * Update the value _(based on the current value)_
 	 *
 	 * @param callback Callback to update the value
 	 */
-	update(callback: (value: Value) => Value): void;
-} & Reactive<Value>;
+	update(callback: (value: Store) => Store): void;
+} & Reactive<Store>;
+
+export type ReadonlyInstances<Value> = {
+	frozen?: ReadonlyFrozenSignal<Value>;
+	original?: ReadonlySignal<Value>;
+};
+
+export type ReadonlyFrozenSignal<Value> = ReadonlySignal<ReadonlySignalValue<Value>>;
+
+export type ReadonlySignal<Value> = {
+	/**
+	 * Is the signal frozen?
+	 */
+	get frozen(): boolean;
+} & Reactive<Value> &
+	SimpleReactive<Value>;
+
+export type ReadonlySignalValue<Value> = Value extends unknown[]
+	? Readonly<Value>
+	: Value extends PlainObject
+		? Readonly<Value>
+		: Value;
 
 export type SetValueInProxyParameters<Value, Equal> = {
 	target: Value;
@@ -423,6 +493,24 @@ export type SetValueInProxyParameters<Value, Equal> = {
 };
 
 export type Signal<Value> = {
+	/**
+	 * Get a readonly version of the signal
+	 *
+	 * @param frozen Freeze the signal? _(defaults to `false`)_
+	 * @returns Readonly signal
+	 */
+	asReadonly(frozen: true): ReadonlyFrozenSignal<Value>;
+
+	/**
+	 * Get a readonly version of the signal
+	 *
+	 * @param frozen Freeze the signal? _(defaults to `false`)_
+	 * @returns Readonly signal
+	 */
+	asReadonly(
+		frozen?: boolean,
+	): typeof frozen extends true ? ReadonlyFrozenSignal<Value> : ReadonlySignal<Value>;
+
 	/**
 	 * Set the value
 	 *