Support for deep/non-deep observables

Author: Sascha Dobschal

Computed.d.ts

@@ -5,4 +5,4 @@ interface ComputedValue<T> {
     unsubscribe(callback: (value: any) => void): void;
 }
 
-export default function Computed<T>(fn: () => T): ComputedValue<T>;
+export default function Computed<T>(fn: () => T, deep?: boolean): ComputedValue<T>;

Computed.js

@@ -1,8 +1,8 @@
 const Observable = require("./Observable.js");
 
-function Computed(fn) {
+function Computed(fn, deep = false) {
 
-    const observable = Observable();
+    const observable = Observable(undefined, deep);
 
     const computed = {
         isObservable: true,

Computed.test.js

@@ -79,3 +79,47 @@ test("The value of a Computeds function cannot be set", () => {
     expect(() => { computed.value = 10; }).toThrow();
 });
 
+test("Non-deep computed is not affected by changes to the observables properties", () => {
+    const observable = Observable({ a: 5 }, true);
+    const computed = Computed(() => observable.value, false);
+    const mockedSubscriber = jest.fn();
+    computed.subscribe(mockedSubscriber);
+    expect(computed.value.a).toBe(5);
+    computed.value.a = 10;
+    expect(computed.value.a).toBe(10);
+    expect(mockedSubscriber).toHaveBeenCalledTimes(1);
+});
+
+test("Non-deep computed is not affected by changes to the observables properties", () => {
+    const observable = Observable({ a: 5 }, false);
+    const computed = Computed(() => observable.value, true);
+    const mockedSubscriber = jest.fn();
+    computed.subscribe(mockedSubscriber);
+    expect(computed.value.a).toBe(5);
+    observable.value.a = 10;
+    expect(computed.value.a).toBe(10);
+    expect(mockedSubscriber).toHaveBeenCalledTimes(1);
+});
+
+test("deep computed is affected by changes to the observables properties", () => {
+    const observable = Observable({ a: 5 }, false);
+    const computed = Computed(() => observable.value, true);
+    const mockedSubscriber = jest.fn();
+    computed.subscribe(mockedSubscriber);
+    expect(computed.value.a).toBe(5);
+    computed.value.a = 10;
+    expect(computed.value.a).toBe(10);
+    expect(mockedSubscriber).toHaveBeenCalledTimes(2);
+});
+
+test("deep computed is affected by changes to the observables properties", () => {
+    const observable = Observable({ a: 5 }, true);
+    const computed = Computed(() => observable.value, true);
+    const mockedSubscriber = jest.fn();
+    computed.subscribe(mockedSubscriber);
+    expect(computed.value.a).toBe(5);
+    observable.value.a = 10;
+    expect(computed.value.a).toBe(10);
+    expect(mockedSubscriber).toHaveBeenCalledTimes(2);
+});
+

Observable.d.ts

@@ -6,4 +6,4 @@ interface ObservableVariable<T> {
     map(callback: (value: any) => any): ObservableVariable<any>;
 }
 
-export default function Observable<T>(initialValue: T): ObservableVariable<T>;
+export default function Observable<T>(initialValue: T, deep?: boolean): ObservableVariable<T>;

Observable.js

@@ -1,4 +1,4 @@
-function Observable(initialValue) {
+function Observable(initialValue, deep = true) {
     const listeners = new Set();
     let value;
 
@@ -26,22 +26,25 @@ function Observable(initialValue) {
     }
 
     function _setValue(newValue) {
-        if (value !== newValue) {
+        if (value === newValue) return;
+        if(!deep) {
+            value = newValue;
+        } else {
             if (newValue?.constructor === Object) { // isPlainObject
                 _observePlainObject(listeners, newValue);
             } else if (Array.isArray(newValue)) { // isArray
                 _observeObjectModifiers(listeners, newValue, ["push", "sort", "unshift", "pop", "shift", "splice", "reverse"]);
             } else if (newValue instanceof Date) { // isDate
                 _observeObjectModifiers(listeners, newValue, ["setDate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMonth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds"]);
-            } else if(newValue instanceof HTMLElement) {
+            } else if (newValue instanceof HTMLElement) {
                 _observeObjectModifiers(listeners, newValue, ["appendChild", "remove", "replaceWith", "setAttribute", "removeAttribute"]);
             } else if (newValue !== Object(newValue)) { // isPrimitive
                 value = newValue;
             } else {
                 throw new Error("Observable does not support type: " + typeof newValue);
             }
-            listeners.forEach(listener => listener(value));
         }
+        listeners.forEach(listener => listener(value));
     }
 
     _setValue(initialValue);

Observable.test.js

@@ -59,3 +59,36 @@ test("Observing an HTMLElement works.", () => {
     observable.value.setAttribute("id", "test");
     expect(mockedSubscriber).toHaveBeenCalledTimes(2);
 });
+
+test("Non-deep observables support any type.", () => {
+    const observable = Observable(Promise, false);
+    const mockedSubscriber = jest.fn();
+    observable.subscribe(mockedSubscriber);
+    observable.value = "test";
+    expect(mockedSubscriber).toHaveBeenCalledTimes(2);
+});
+
+test("Deep observables throw an error if the type isn't supported.", () => {
+    expect(() => {
+        const observable = Observable(Promise);
+        const mockedSubscriber = jest.fn();
+        observable.subscribe(mockedSubscriber);
+        observable.value = "test";
+    }).toThrow("Observable does not support type: function");
+});
+
+test("Non-deep observables subscriber isn't called if property changes.", () => {
+    const observable = Observable(document.createElement("div"), false);
+    const mockedSubscriber = jest.fn();
+    observable.subscribe(mockedSubscriber);
+    observable.value.setAttribute("id", "test");
+    expect(mockedSubscriber).toHaveBeenCalledTimes(1);
+});
+
+test("Deep observables subscriber is called if property changes.", () => {
+    const observable = Observable(document.createElement("div"));
+    const mockedSubscriber = jest.fn();
+    observable.subscribe(mockedSubscriber);
+    observable.value.setAttribute("id", "test");
+    expect(mockedSubscriber).toHaveBeenCalledTimes(2);
+});

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@dobschal/observable",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "index.js",
   "scripts": {
     "test": "jest",