@oscarpalmer/atoms 0.21.0 → 0.22.0

package/dist/js/index.js

@@ -310,14 +310,17 @@ var _getDiffs = function(first, second, prefix) {
       const to = second?.[key];
       if (!Object.is(from, to)) {
         const prefixed = _getKey(prefix, key);
-        changes.push({
+        const change = {
           from,
           to,
           key: prefixed
-        });
-        if (isArrayOrPlainObject(from) && isArrayOrPlainObject(to)) {
-          changes.push(..._getDiffs(from, to, prefixed));
+        };
+        const nested = isArrayOrPlainObject(from) || isArrayOrPlainObject(to);
+        const diffs = nested ? _getDiffs(from, to, prefixed) : [];
+        if (!nested || nested && diffs.length > 0) {
+          changes.push(change);
         }
+        changes.push(...diffs);
       }
       checked.add(key);
     }
@@ -449,7 +452,17 @@ var _createProxy = function(existing, value2) {
       return property === "$" ? manager : Reflect.get(target, property);
     },
     set(target, property, value3) {
-      return property === "$" || Reflect.set(target, property, _createProxy(manager, value3));
+      if (property === "$") {
+        return true;
+      }
+      const isSubscribed = manager.subscribed;
+      const original = isSubscribed && !cloned.has(manager) ? clone(merge(manager.owner)) : undefined;
+      const actual = _createProxy(manager, value3);
+      const result = Reflect.set(target, property, actual);
+      if (result && isSubscribed) {
+        _onChange(manager, original);
+      }
+      return result;
     }
   });
   const manager = existing ?? new Manager(proxy);
@@ -465,25 +478,90 @@ var _createProxy = function(existing, value2) {
   }
   return proxy;
 };
+var _emit = function(manager) {
+  const difference = diff(cloned.get(manager) ?? {}, clone(merge(manager.owner)));
+  const keys = Object.keys(difference.values);
+  const { length } = keys;
+  let index = 0;
+  for (;index < length; index += 1) {
+    const key = keys[index];
+    const subscribers = manager.subscribers.get(key);
+    if (subscribers === undefined || subscribers.size === 0) {
+      continue;
+    }
+    const { from } = difference.values[key];
+    const to = get(manager.owner, key);
+    for (const subscriber of subscribers) {
+      subscriber(to, from);
+    }
+  }
+  cloned.delete(manager);
+};
 var _isProxy = function(value2) {
   return value2?.$ instanceof Manager;
 };
+var _onChange = function(manager, value2) {
+  cancelAnimationFrame(frames.get(manager));
+  if (!cloned.has(manager)) {
+    cloned.set(manager, value2);
+  }
+  frames.set(manager, requestAnimationFrame(() => {
+    _emit(manager);
+  }));
+};
+function cloneProxy(proxy) {
+  if (!_isProxy(proxy)) {
+    throw new Error("Value must be a proxy");
+  }
+  return proxy.$.clone();
+}
 function proxy(value2) {
   if (!isArrayOrPlainObject(value2)) {
     throw new Error("Proxy value must be an array or object");
   }
   return _createProxy(undefined, value2);
 }
+function subscribe(proxy2, key, subscriber) {
+  if (_isProxy(proxy2)) {
+    proxy2.$.on(key, subscriber);
+  }
+}
+function unsubscribe(proxy2, key, subscriber) {
+  if (_isProxy(proxy2)) {
+    proxy2.$.off(key, subscriber);
+  }
+}
 
 class Manager {
   owner;
+  count = 0;
+  subscribers = new Map;
+  get subscribed() {
+    return this.count > 0;
+  }
   constructor(owner) {
     this.owner = owner;
   }
   clone() {
-    return clone(merge(this.owner));
+    return _createProxy(undefined, clone(merge(this.owner)));
+  }
+  off(key, subscriber) {
+    if (this.subscribers.get(key)?.delete(subscriber) ?? false) {
+      this.count -= 1;
+    }
+  }
+  on(key, subscriber) {
+    let subscribers = this.subscribers.get(key);
+    if (subscribers === undefined) {
+      subscribers = new Set;
+      this.subscribers.set(key, subscribers);
+    }
+    subscribers.add(subscriber);
+    this.count += 1;
   }
 }
+var cloned = new Map;
+var frames = new Map;
 // src/js/timer.ts
 function repeat(callback, options) {
   const count = typeof options?.count === "number" ? options.count : Infinity;
@@ -569,7 +647,9 @@ class Timer {
 }
 export {
   wait,
+  unsubscribe,
   unique,
+  subscribe,
   splice,
   set,
   repeat,
@@ -593,6 +673,7 @@ export {
   exists,
   diff,
   createUuid,
+  cloneProxy,
   clone,
   clamp,
   chunk,

package/dist/js/proxy.js

@@ -1,3 +1,12 @@
+// src/js/string.ts
+function getString(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  const result = value?.toString?.() ?? value;
+  return result?.toString?.() ?? String(result);
+}
+
 // src/js/is.ts
 function isArrayOrPlainObject(value) {
   return Array.isArray(value) || isPlainObject(value);
@@ -11,9 +20,100 @@ function isPlainObject(value) {
 }
 
 // src/js/value.ts
+var _getDiffs = function(first, second, prefix) {
+  const changes = [];
+  const checked = new Set;
+  let outer = 0;
+  for (;outer < 2; outer += 1) {
+    const value = outer === 0 ? first : second;
+    if (!value) {
+      continue;
+    }
+    const keys = Object.keys(value);
+    const { length } = keys;
+    let inner = 0;
+    for (;inner < length; inner += 1) {
+      const key = keys[inner];
+      if (checked.has(key)) {
+        continue;
+      }
+      const from = first?.[key];
+      const to = second?.[key];
+      if (!Object.is(from, to)) {
+        const prefixed = _getKey(prefix, key);
+        const change = {
+          from,
+          to,
+          key: prefixed
+        };
+        const nested = isArrayOrPlainObject(from) || isArrayOrPlainObject(to);
+        const diffs = nested ? _getDiffs(from, to, prefixed) : [];
+        if (!nested || nested && diffs.length > 0) {
+          changes.push(change);
+        }
+        changes.push(...diffs);
+      }
+      checked.add(key);
+    }
+  }
+  return changes;
+};
+var _getKey = function(...parts) {
+  return parts.filter((part) => part !== undefined).join(".");
+};
+var _getValue = function(data, key) {
+  if (typeof data !== "object" || data === null || /^(__proto__|constructor|prototype)$/i.test(key)) {
+    return;
+  }
+  return data instanceof Map ? data.get(key) : data[key];
+};
 function clone(value) {
   return structuredClone(value);
 }
+function diff(first, second) {
+  const result = {
+    original: {
+      from: first,
+      to: second
+    },
+    type: "partial",
+    values: {}
+  };
+  const same = Object.is(first, second);
+  const firstIsArrayOrObject = isArrayOrPlainObject(first);
+  const secondIsArrayOrObject = isArrayOrPlainObject(second);
+  if (same || !firstIsArrayOrObject && !secondIsArrayOrObject) {
+    result.type = same ? "none" : "full";
+    return result;
+  }
+  if (firstIsArrayOrObject !== secondIsArrayOrObject) {
+    result.type = "full";
+  }
+  const diffs = _getDiffs(first, second);
+  const { length } = diffs;
+  if (length === 0) {
+    result.type = "none";
+  }
+  let index = 0;
+  for (;index < length; index += 1) {
+    const diff2 = diffs[index];
+    result.values[diff2.key] = { from: diff2.from, to: diff2.to };
+  }
+  return result;
+}
+function get(data, key) {
+  const parts = getString(key).split(".");
+  const { length } = parts;
+  let index = 0;
+  let value = typeof data === "object" ? data ?? {} : {};
+  for (;index < length; index += 1) {
+    value = _getValue(value, parts[index]);
+    if (value == null) {
+      return;
+    }
+  }
+  return value;
+}
 function merge(...values) {
   if (values.length === 0) {
     return {};
@@ -52,7 +152,17 @@ var _createProxy = function(existing, value2) {
       return property === "$" ? manager : Reflect.get(target, property);
     },
     set(target, property, value3) {
-      return property === "$" || Reflect.set(target, property, _createProxy(manager, value3));
+      if (property === "$") {
+        return true;
+      }
+      const isSubscribed = manager.subscribed;
+      const original = isSubscribed && !cloned.has(manager) ? clone(merge(manager.owner)) : undefined;
+      const actual = _createProxy(manager, value3);
+      const result = Reflect.set(target, property, actual);
+      if (result && isSubscribed) {
+        _onChange(manager, original);
+      }
+      return result;
     }
   });
   const manager = existing ?? new Manager(proxy);
@@ -68,25 +178,93 @@ var _createProxy = function(existing, value2) {
   }
   return proxy;
 };
+var _emit = function(manager) {
+  const difference = diff(cloned.get(manager) ?? {}, clone(merge(manager.owner)));
+  const keys = Object.keys(difference.values);
+  const { length } = keys;
+  let index = 0;
+  for (;index < length; index += 1) {
+    const key = keys[index];
+    const subscribers = manager.subscribers.get(key);
+    if (subscribers === undefined || subscribers.size === 0) {
+      continue;
+    }
+    const { from } = difference.values[key];
+    const to = get(manager.owner, key);
+    for (const subscriber of subscribers) {
+      subscriber(to, from);
+    }
+  }
+  cloned.delete(manager);
+};
 var _isProxy = function(value2) {
   return value2?.$ instanceof Manager;
 };
+var _onChange = function(manager, value2) {
+  cancelAnimationFrame(frames.get(manager));
+  if (!cloned.has(manager)) {
+    cloned.set(manager, value2);
+  }
+  frames.set(manager, requestAnimationFrame(() => {
+    _emit(manager);
+  }));
+};
+function cloneProxy(proxy) {
+  if (!_isProxy(proxy)) {
+    throw new Error("Value must be a proxy");
+  }
+  return proxy.$.clone();
+}
 function proxy(value2) {
   if (!isArrayOrPlainObject(value2)) {
     throw new Error("Proxy value must be an array or object");
   }
   return _createProxy(undefined, value2);
 }
+function subscribe(proxy2, key, subscriber) {
+  if (_isProxy(proxy2)) {
+    proxy2.$.on(key, subscriber);
+  }
+}
+function unsubscribe(proxy2, key, subscriber) {
+  if (_isProxy(proxy2)) {
+    proxy2.$.off(key, subscriber);
+  }
+}
 
 class Manager {
   owner;
+  count = 0;
+  subscribers = new Map;
+  get subscribed() {
+    return this.count > 0;
+  }
   constructor(owner) {
     this.owner = owner;
   }
   clone() {
-    return clone(merge(this.owner));
+    return _createProxy(undefined, clone(merge(this.owner)));
+  }
+  off(key, subscriber) {
+    if (this.subscribers.get(key)?.delete(subscriber) ?? false) {
+      this.count -= 1;
+    }
+  }
+  on(key, subscriber) {
+    let subscribers = this.subscribers.get(key);
+    if (subscribers === undefined) {
+      subscribers = new Set;
+      this.subscribers.set(key, subscribers);
+    }
+    subscribers.add(subscriber);
+    this.count += 1;
   }
 }
+var cloned = new Map;
+var frames = new Map;
 export {
-  proxy
+  unsubscribe,
+  subscribe,
+  proxy,
+  cloneProxy
 };

package/dist/js/proxy.mjs

@@ -1,6 +1,6 @@
 // src/js/proxy.ts
 import {isArrayOrPlainObject} from "./is";
-import {clone, merge} from "./value";
+import {clone, diff, get, merge} from "./value";
 var _createProxy = function(existing, value2) {
   if (!isArrayOrPlainObject(value2) || _isProxy(value2) && value2.$ === existing) {
     return value2;
@@ -11,7 +11,17 @@ var _createProxy = function(existing, value2) {
       return property === "$" ? manager : Reflect.get(target, property);
     },
     set(target, property, value3) {
-      return property === "$" || Reflect.set(target, property, _createProxy(manager, value3));
+      if (property === "$") {
+        return true;
+      }
+      const isSubscribed = manager.subscribed;
+      const original = isSubscribed && !cloned.has(manager) ? clone(merge(manager.owner)) : undefined;
+      const actual = _createProxy(manager, value3);
+      const result = Reflect.set(target, property, actual);
+      if (result && isSubscribed) {
+        _onChange(manager, original);
+      }
+      return result;
     }
   });
   const manager = existing ?? new Manager(proxy);
@@ -27,25 +37,93 @@ var _createProxy = function(existing, value2) {
   }
   return proxy;
 };
+var _emit = function(manager) {
+  const difference = diff(cloned.get(manager) ?? {}, clone(merge(manager.owner)));
+  const keys = Object.keys(difference.values);
+  const { length } = keys;
+  let index = 0;
+  for (;index < length; index += 1) {
+    const key = keys[index];
+    const subscribers = manager.subscribers.get(key);
+    if (subscribers === undefined || subscribers.size === 0) {
+      continue;
+    }
+    const { from } = difference.values[key];
+    const to = get(manager.owner, key);
+    for (const subscriber of subscribers) {
+      subscriber(to, from);
+    }
+  }
+  cloned.delete(manager);
+};
 var _isProxy = function(value2) {
   return value2?.$ instanceof Manager;
 };
+var _onChange = function(manager, value2) {
+  cancelAnimationFrame(frames.get(manager));
+  if (!cloned.has(manager)) {
+    cloned.set(manager, value2);
+  }
+  frames.set(manager, requestAnimationFrame(() => {
+    _emit(manager);
+  }));
+};
+function cloneProxy(proxy) {
+  if (!_isProxy(proxy)) {
+    throw new Error("Value must be a proxy");
+  }
+  return proxy.$.clone();
+}
 function proxy(value2) {
   if (!isArrayOrPlainObject(value2)) {
     throw new Error("Proxy value must be an array or object");
   }
   return _createProxy(undefined, value2);
 }
+function subscribe(proxy2, key, subscriber) {
+  if (_isProxy(proxy2)) {
+    proxy2.$.on(key, subscriber);
+  }
+}
+function unsubscribe(proxy2, key, subscriber) {
+  if (_isProxy(proxy2)) {
+    proxy2.$.off(key, subscriber);
+  }
+}
 
 class Manager {
   owner;
+  count = 0;
+  subscribers = new Map;
+  get subscribed() {
+    return this.count > 0;
+  }
   constructor(owner) {
     this.owner = owner;
   }
   clone() {
-    return clone(merge(this.owner));
+    return _createProxy(undefined, clone(merge(this.owner)));
+  }
+  off(key, subscriber) {
+    if (this.subscribers.get(key)?.delete(subscriber) ?? false) {
+      this.count -= 1;
+    }
+  }
+  on(key, subscriber) {
+    let subscribers = this.subscribers.get(key);
+    if (subscribers === undefined) {
+      subscribers = new Set;
+      this.subscribers.set(key, subscribers);
+    }
+    subscribers.add(subscriber);
+    this.count += 1;
   }
 }
+var cloned = new Map;
+var frames = new Map;
 export {
-  proxy
+  unsubscribe,
+  subscribe,
+  proxy,
+  cloneProxy
 };

package/dist/js/value.js

@@ -41,14 +41,17 @@ var _getDiffs = function(first, second, prefix) {
       const to = second?.[key];
       if (!Object.is(from, to)) {
         const prefixed = _getKey(prefix, key);
-        changes.push({
+        const change = {
           from,
           to,
           key: prefixed
-        });
-        if (isArrayOrPlainObject(from) && isArrayOrPlainObject(to)) {
-          changes.push(..._getDiffs(from, to, prefixed));
+        };
+        const nested = isArrayOrPlainObject(from) || isArrayOrPlainObject(to);
+        const diffs = nested ? _getDiffs(from, to, prefixed) : [];
+        if (!nested || nested && diffs.length > 0) {
+          changes.push(change);
         }
+        changes.push(...diffs);
       }
       checked.add(key);
     }

package/dist/js/value.mjs

@@ -22,14 +22,17 @@ var _getDiffs = function(first, second, prefix) {
       const to = second?.[key];
       if (!Object.is(from, to)) {
         const prefixed = _getKey(prefix, key);
-        changes.push({
+        const change = {
           from,
           to,
           key: prefixed
-        });
-        if (isArrayOrPlainObject(from) && isArrayOrPlainObject(to)) {
-          changes.push(..._getDiffs(from, to, prefixed));
+        };
+        const nested = isArrayOrPlainObject(from) || isArrayOrPlainObject(to);
+        const diffs = nested ? _getDiffs(from, to, prefixed) : [];
+        if (!nested || nested && diffs.length > 0) {
+          changes.push(change);
         }
+        changes.push(...diffs);
       }
       checked.add(key);
     }

package/package.json

@@ -105,5 +105,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.21.0"
+	"version": "0.22.0"
 }

package/src/js/proxy.ts

@@ -1,18 +1,54 @@
 import {ArrayOrPlainObject, PlainObject, isArrayOrPlainObject} from './is';
-import {clone, merge} from './value';
+import {clone, diff, get, merge} from './value';
 
 class Manager<T extends ArrayOrPlainObject = PlainObject> {
+	private count = 0;
+
+	readonly subscribers = new Map<string, Set<Subscriber>>();
+
+	get subscribed(): boolean {
+		return this.count > 0;
+	}
+
 	constructor(readonly owner: Proxied<T>) {}
 
-	clone(): Proxied<T> {
-		return clone(merge(this.owner)) as Proxied<T>;
+	clone(): T {
+		return _createProxy(undefined, clone(merge(this.owner))) as T;
+	}
+
+	off<T1 = unknown, T2 = T1>(
+		key: string,
+		subscriber: Subscriber<T1, T2>,
+	): void {
+		if (this.subscribers.get(key)?.delete(subscriber as never) ?? false) {
+			this.count -= 1;
+		}
+	}
+
+	on<T1 = unknown, T2 = T1>(key: string, subscriber: Subscriber<T1, T2>): void {
+		let subscribers = this.subscribers.get(key);
+
+		if (subscribers === undefined) {
+			subscribers = new Set<Subscriber>();
+
+			this.subscribers.set(key, subscribers);
+		}
+
+		subscribers.add(subscriber as never);
+
+		this.count += 1;
 	}
 }
 
-export type Proxied<T extends ArrayOrPlainObject = PlainObject> = {
+type Proxied<T extends ArrayOrPlainObject = PlainObject> = {
 	$: Manager<T>;
 } & T;
 
+export type Subscriber<T1 = unknown, T2 = T1> = (to: T1, from: T2) => void;
+
+const cloned = new Map<Manager, unknown>();
+const frames = new Map<Manager, number>();
+
 function _createProxy<T extends ArrayOrPlainObject>(
 	existing: Manager | undefined,
 	value: T,
@@ -31,10 +67,25 @@ function _createProxy<T extends ArrayOrPlainObject>(
 			return property === '$' ? manager : Reflect.get(target, property);
 		},
 		set(target, property, value) {
-			return (
-				property === '$' ||
-				Reflect.set(target, property, _createProxy(manager, value))
-			);
+			if (property === '$') {
+				return true;
+			}
+
+			const isSubscribed = manager.subscribed;
+
+			const original =
+				isSubscribed && !cloned.has(manager)
+					? clone(merge(manager.owner))
+					: undefined;
+
+			const actual = _createProxy(manager, value);
+			const result = Reflect.set(target, property, actual);
+
+			if (result && isSubscribed) {
+				_onChange(manager, original);
+			}
+
+			return result;
 		},
 	}) as Proxied;
 
@@ -58,14 +109,99 @@ function _createProxy<T extends ArrayOrPlainObject>(
 	return proxy;
 }
 
+function _emit(manager: Manager): void {
+	const difference = diff(
+		cloned.get(manager) ?? {},
+		clone(merge(manager.owner)),
+	);
+
+	const keys = Object.keys(difference.values);
+	const {length} = keys;
+
+	let index = 0;
+
+	for (; index < length; index += 1) {
+		const key = keys[index];
+		const subscribers = manager.subscribers.get(key);
+
+		if (subscribers === undefined || subscribers.size === 0) {
+			continue;
+		}
+
+		const {from} = difference.values[key];
+		const to = get(manager.owner, key);
+
+		for (const subscriber of subscribers) {
+			subscriber(to, from);
+		}
+	}
+
+	cloned.delete(manager);
+}
+
 function _isProxy(value: unknown): value is Proxied {
 	return (value as Proxied)?.$ instanceof Manager;
 }
 
-export function proxy<T extends PlainObject>(value: T): Proxied<T> {
+function _onChange(manager: Manager, value: unknown): void {
+	cancelAnimationFrame(frames.get(manager) as number);
+
+	if (!cloned.has(manager)) {
+		cloned.set(manager, value);
+	}
+
+	frames.set(
+		manager,
+		requestAnimationFrame(() => {
+			_emit(manager);
+		}),
+	);
+}
+
+/**
+ * Clones and creates a new proxy
+ */
+export function cloneProxy<T extends ArrayOrPlainObject>(proxy: T): T {
+	if (!_isProxy(proxy)) {
+		throw new Error('Value must be a proxy');
+	}
+
+	return proxy.$.clone() as T;
+}
+
+/**
+ * Creates a proxy for an array or object
+ */
+export function proxy<T extends PlainObject>(value: T): T {
 	if (!isArrayOrPlainObject(value)) {
 		throw new Error('Proxy value must be an array or object');
 	}
 
-	return _createProxy(undefined, value) as Proxied<T>;
+	return _createProxy(undefined, value) as T;
+}
+
+/**
+ * Subscribes to changes for a key in a proxy
+ */
+export function subscribe<T1 = ArrayOrPlainObject, T2 = unknown, T3 = T2>(
+	proxy: T1,
+	key: string,
+	subscriber: Subscriber<T2, T3>,
+): void {
+	if (_isProxy(proxy)) {
+		proxy.$.on(key, subscriber);
+	}
+}
+
+/**
+ * Unsubscribes from changes for a key in a proxy
+ */
+export function unsubscribe<T1 = ArrayOrPlainObject, T2 = unknown, T3 = T2>(
+	proxy: T1,
+	key: string,
+	subscriber: Subscriber<T2, T3>,
+): void {
+	if (_isProxy(proxy)) {
+		proxy.$.off(key, subscriber);
+	}
 }

package/src/js/value.ts

@@ -58,15 +58,20 @@ function _getDiffs(
 			if (!Object.is(from, to)) {
 				const prefixed = _getKey(prefix, key);
 
-				changes.push({
+				const change = {
 					from,
 					to,
 					key: prefixed,
-				});
+				};
 
-				if (isArrayOrPlainObject(from) && isArrayOrPlainObject(to)) {
-					changes.push(..._getDiffs(from, to, prefixed));
+				const nested = isArrayOrPlainObject(from) || isArrayOrPlainObject(to);
+				const diffs = nested ? _getDiffs(from, to, prefixed) : [];
+
+				if (!nested || (nested && diffs.length > 0)) {
+					changes.push(change);
 				}
+
+				changes.push(...diffs);
 			}
 
 			checked.add(key);

package/types/proxy.d.ts

@@ -1,11 +1,18 @@
 import { ArrayOrPlainObject, PlainObject } from './is';
-declare class Manager<T extends ArrayOrPlainObject = PlainObject> {
-    readonly owner: Proxied<T>;
-    constructor(owner: Proxied<T>);
-    clone(): Proxied<T>;
-}
-export type Proxied<T extends ArrayOrPlainObject = PlainObject> = {
-    $: Manager<T>;
-} & T;
-export declare function proxy<T extends PlainObject>(value: T): Proxied<T>;
-export {};
+export type Subscriber<T1 = unknown, T2 = T1> = (to: T1, from: T2) => void;
+/**
+ * Clones and creates a new proxy
+ */
+export declare function cloneProxy<T extends ArrayOrPlainObject>(proxy: T): T;
+/**
+ * Creates a proxy for an array or object
+ */
+export declare function proxy<T extends PlainObject>(value: T): T;
+/**
+ * Subscribes to changes for a key in a proxy
+ */
+export declare function subscribe<T1 = ArrayOrPlainObject, T2 = unknown, T3 = T2>(proxy: T1, key: string, subscriber: Subscriber<T2, T3>): void;
+/**
+ * Unsubscribes from changes for a key in a proxy
+ */
+export declare function unsubscribe<T1 = ArrayOrPlainObject, T2 = unknown, T3 = T2>(proxy: T1, key: string, subscriber: Subscriber<T2, T3>): void;