apical-store - npm Package Compare versions

Comparing version 0.0.77 to 0.0.78

dist/bundle.js

@@ -551,2 +551,57 @@ (function (global, factory) {
 
+    const lut = [];
+    for (let i = 0; i < 256; i++) {
+        lut[i] = (i < 16 ? "0" : "") + i.toString(16);
+    }
+    function uuid() {
+        let d0 = (Math.random() * 0xffffffff) | 0;
+        let d1 = (Math.random() * 0xffffffff) | 0;
+        let d2 = (Math.random() * 0xffffffff) | 0;
+        let d3 = (Math.random() * 0xffffffff) | 0;
+        return [
+            lut[d0 & 0xff],
+            lut[(d0 >> 8) & 0xff],
+            lut[(d0 >> 16) & 0xff],
+            lut[(d0 >> 24) & 0xff],
+            '-',
+            lut[d1 & 0xff],
+            lut[(d1 >> 8) & 0xff],
+            '-',
+            lut[((d1 >> 16) & 0x0f) | 0x40],
+            lut[(d1 >> 24) & 0xff],
+            '-',
+            lut[(d2 & 0x3f) | 0x80],
+            lut[(d2 >> 8) & 0xff],
+            '-',
+            lut[(d2 >> 16) & 0xff],
+            lut[(d2 >> 24) & 0xff],
+            lut[d3 & 0xff],
+            lut[(d3 >> 8) & 0xff],
+            lut[(d3 >> 16) & 0xff],
+            lut[(d3 >> 24) & 0xff]
+        ].join('');
+    }
+
+    const observingComponents = {};
+    /**
+     * Enhances a React component to automatically re-render when the observed store changes.
+     * @param store - An instance of Store that extends Document.
+     * @returns A higher-order function that takes a React component as an argument.
+     */
+    function observe(component) {
+        const oComponentDidMount = component.prototype.componentDidMount || (() => { });
+        component.prototype.componentDidMount = function () {
+            this.setState({});
+            this.$$observerID = uuid();
+            observingComponents[this.$$observerID] = () => this.setState({});
+            const oComponentWillUnmount = this.componentWillUnmount || (() => { });
+            this.componentWillUnmount = () => {
+                delete observingComponents[this.$$observerID];
+                oComponentWillUnmount.call(this);
+            };
+            oComponentDidMount.call(this);
+        };
+        return component;
+    }
+
     class Observable {
@@ -572,2 +627,5 @@ constructor(target) {
             this.observers = this.target[oMetaKey].observers;
+            this.observe(() => {
+                Object.keys(observingComponents).forEach((key) => observingComponents[key]());
+            });
         }
@@ -680,35 +738,2 @@ /**
 
-    const lut = [];
-    for (let i = 0; i < 256; i++) {
-        lut[i] = (i < 16 ? "0" : "") + i.toString(16);
-    }
-    function uuid() {
-        let d0 = (Math.random() * 0xffffffff) | 0;
-        let d1 = (Math.random() * 0xffffffff) | 0;
-        let d2 = (Math.random() * 0xffffffff) | 0;
-        let d3 = (Math.random() * 0xffffffff) | 0;
-        return [
-            lut[d0 & 0xff],
-            lut[(d0 >> 8) & 0xff],
-            lut[(d0 >> 16) & 0xff],
-            lut[(d0 >> 24) & 0xff],
-            '-',
-            lut[d1 & 0xff],
-            lut[(d1 >> 8) & 0xff],
-            '-',
-            lut[((d1 >> 16) & 0x0f) | 0x40],
-            lut[(d1 >> 24) & 0xff],
-            '-',
-            lut[(d2 & 0x3f) | 0x80],
-            lut[(d2 >> 8) & 0xff],
-            '-',
-            lut[(d2 >> 16) & 0xff],
-            lut[(d2 >> 24) & 0xff],
-            lut[d3 & 0xff],
-            lut[(d3 >> 8) & 0xff],
-            lut[(d3 >> 16) & 0xff],
-            lut[(d3 >> 24) & 0xff]
-        ].join('');
-    }
-
     /**
@@ -1192,36 +1217,2 @@ * Base model: of which all documents extend (Main documents & Sub-documents)
 
-    function observe(store) {
-        return function (component) {
-            const originalComponentDidMount = component.prototype.componentDidMount || (() => { });
-            component.prototype.componentDidMount = function () {
-                const unObservers = [];
-                this.setState({});
-                const observer = () => this.setState({});
-                store.forEach((singleStore) => {
-                    if (singleStore instanceof Store) {
-                        // @ts-ignore
-                        singleStore.$$observableObject.observe(observer);
-                        unObservers.push(() => 
-                        // @ts-ignore
-                        singleStore.$$observableObject.unobserve(observer));
-                    }
-                    if (singleStore instanceof Observable) {
-                        singleStore.observe(observer);
-                        unObservers.push(() => singleStore.unobserve(observer));
-                    }
-                    else {
-                        throw new Error("You're trying to observe something that is not an observable. Please make sure you're passing an instance of Observable or a store");
-                    }
-                });
-                const originalComponentWillUnmount = this.componentWillUnmount || (() => { });
-                this.componentWillUnmount = () => {
-                    unObservers.forEach((unObserver) => unObserver());
-                    originalComponentWillUnmount.call(this);
-                };
-                originalComponentDidMount.call(this);
-            };
-            return component;
-        };
-    }
-
     class IDB {
@@ -1228,0 +1219,0 @@ constructor({ name }) {

dist/observable/observable.js

 import * as utils from "./utils";
 import { oMetaKey } from "./const";
 import { ObservableArrayMeta, ObservableObjectMeta } from "./meta";
+import { observingComponents } from "../react";
 export class Observable {
@@ -24,2 +25,5 @@ constructor(target) {
         this.observers = this.target[oMetaKey].observers;
+        this.observe(() => {
+            Object.keys(observingComponents).forEach((key) => observingComponents[key]());
+        });
     }
@@ -26,0 +30,0 @@ /**

dist/react.d.ts

@@ -1,4 +0,2 @@
-import { Document } from "./model";
-import { Observable } from "./observable";
-import { Store } from "./store";
+export declare const observingComponents: Record<string, () => void>;
 /**
@@ -9,3 +7,2 @@ * Enhances a React component to automatically re-render when the observed store changes.
  */
-export declare function observe<D extends object>(store: Observable<any>[]): <K>(component: K) => K;
-export declare function observe<D extends Document, G extends Store<D>>(store: G[]): <K>(component: K) => K;
+export declare function observe<K extends object>(component: K): K;

dist/react.js

@@ -1,35 +0,22 @@
-import { Observable } from "./observable";
-import { Store } from "./store";
-export function observe(store) {
-    return function (component) {
-        const originalComponentDidMount = component.prototype.componentDidMount || (() => { });
-        component.prototype.componentDidMount = function () {
-            const unObservers = [];
-            this.setState({});
-            const observer = () => this.setState({});
-            store.forEach((singleStore) => {
-                if (singleStore instanceof Store) {
-                    // @ts-ignore
-                    singleStore.$$observableObject.observe(observer);
-                    unObservers.push(() => 
-                    // @ts-ignore
-                    singleStore.$$observableObject.unobserve(observer));
-                }
-                if (singleStore instanceof Observable) {
-                    singleStore.observe(observer);
-                    unObservers.push(() => singleStore.unobserve(observer));
-                }
-                else {
-                    throw new Error("You're trying to observe something that is not an observable. Please make sure you're passing an instance of Observable or a store");
-                }
-            });
-            const originalComponentWillUnmount = this.componentWillUnmount || (() => { });
-            this.componentWillUnmount = () => {
-                unObservers.forEach((unObserver) => unObserver());
-                originalComponentWillUnmount.call(this);
-            };
-            originalComponentDidMount.call(this);
+import { uuid } from "./uuid";
+export const observingComponents = {};
+/**
+ * Enhances a React component to automatically re-render when the observed store changes.
+ * @param store - An instance of Store that extends Document.
+ * @returns A higher-order function that takes a React component as an argument.
+ */
+export function observe(component) {
+    const oComponentDidMount = component.prototype.componentDidMount || (() => { });
+    component.prototype.componentDidMount = function () {
+        this.setState({});
+        this.$$observerID = uuid();
+        observingComponents[this.$$observerID] = () => this.setState({});
+        const oComponentWillUnmount = this.componentWillUnmount || (() => { });
+        this.componentWillUnmount = () => {
+            delete observingComponents[this.$$observerID];
+            oComponentWillUnmount.call(this);
         };
-        return component;
+        oComponentDidMount.call(this);
     };
+    return component;
 }

package.json

 {
 	"name": "apical-store",
-	"version": "0.0.77",
+	"version": "0.0.78",
 	"description": "Mobx-Syncable-IndexedDB",
@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

src/observable/observable.ts

@@ -5,2 +5,3 @@ import * as utils from "./utils";
 import { ObservableArrayMeta, ObservableObjectMeta } from "./meta";
+import { observingComponents } from "../react";
 
@@ -33,2 +34,7 @@ export class Observable<D extends object> {
 		this.observers = this.target[oMetaKey].observers;
+		this.observe(() => {
+			Object.keys(observingComponents).forEach((key) =>
+				observingComponents[key]()
+			);
+		});
 	}
@@ -35,0 +41,0 @@

src/react.ts

@@ -1,5 +0,5 @@
-import { Document } from "./model";
-import { Observable } from "./observable";
-import { Store } from "./store";
+import { uuid } from "./uuid";
 
+export const observingComponents: Record<string, () => void> = {};
+
 /**
@@ -10,52 +10,20 @@ * Enhances a React component to automatically re-render when the observed store changes.
  */
+export function observe<K extends object>(component: K): K {
+	const oComponentDidMount =
+		(component as any).prototype.componentDidMount || (() => {});
+	(component as any).prototype.componentDidMount = function () {
+		this.setState({});
 
-export function observe<D extends object>(
-	store: Observable<any>[]
-): <K>(component: K) => K;
-export function observe<D extends Document, G extends Store<D>>(
-	store: G[]
-): <K>(component: K) => K;
-export function observe<D extends Document, G extends Store<D>>(
-	store: G[] | Observable<any>[]
-): <K>(component: K) => K {
-	return function (component: any) {
-		const originalComponentDidMount =
-			component.prototype.componentDidMount || (() => {});
+		this.$$observerID = uuid();
+		observingComponents[this.$$observerID] = () => this.setState({});
 
-		component.prototype.componentDidMount = function () {
-			const unObservers: (() => void)[] = [];
-			this.setState({});
-			const observer = () => this.setState({});
-
-			store.forEach((singleStore) => {
-				if (singleStore instanceof Store) {
-					// @ts-ignore
-					singleStore.$$observableObject.observe(observer);
-					unObservers.push(() =>
-						// @ts-ignore
-						singleStore.$$observableObject.unobserve(observer)
-					);
-				}
-				if (singleStore instanceof Observable) {
-					singleStore.observe(observer);
-					unObservers.push(() => singleStore.unobserve(observer));
-				} else {
-					throw new Error(
-						"You're trying to observe something that is not an observable. Please make sure you're passing an instance of Observable or a store"
-					);
-				}
-			});
-
-			const originalComponentWillUnmount =
-				this.componentWillUnmount || (() => {});
-			this.componentWillUnmount = () => {
-				unObservers.forEach((unObserver) => unObserver());
-				originalComponentWillUnmount.call(this);
-			};
-
-			originalComponentDidMount.call(this);
+		const oComponentWillUnmount =
+			this.componentWillUnmount || (() => {});
+		this.componentWillUnmount = () => {
+			delete observingComponents[this.$$observerID];
+			oComponentWillUnmount.call(this);
 		};
-
-		return component;
+		oComponentDidMount.call(this);
 	};
+	return component;
 }

tests/observable.test.ts

@@ -149,3 +149,3 @@ import { describe, test, it, expect, vi } from "vitest";
 			observableArray.unobserve(observer); // Trying to unobserve a non-existent observer
-			expect(observableArray.observers.length).toBe(1);
+			expect(observableArray.observers.length).toBe(2);
 		});
@@ -161,7 +161,7 @@
 			observableArray.observe(observer2);
-			expect(observableArray.observers.length).toBe(2);
+			expect(observableArray.observers.length).toBe(3);
 
 			observableArray.unobserve(observer1);
-			expect(observableArray.observers.length).toBe(1);
-			expect(observableArray.observers[0]).toBe(observer2);
+			expect(observableArray.observers.length).toBe(2);
+			expect(observableArray.observers[1]).toBe(observer2);
 		});
@@ -195,3 +195,3 @@
 			const result = observableArray.unobserve();
-			expect(result).toEqual([observer]);
+			expect([result[1]]).toEqual([observer]);
 		});
@@ -198,0 +198,0 @@ it("should return an empty array when no observers are removed", () => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

249240

decreased by-0.79%

Lines of code

6759

decreased by-0.65%

No dependency changes