chem-rx 0.0.18 → 0.0.19

package/README.md

@@ -245,6 +245,15 @@ signal$.ping("hello")
 subscription.unsubscribe();
 ```
 
+You can selectively subscribe to Signals, and selectively ping subscribers by ID.
+
+```
+    const signal = new Signal<string>();
+    signal.subscribe(mockCallbackId123, "123");
+    signal.subscribe(mockCallbackId456, "456");
+    signal.ping("Message for 123", "123");
+```
+
 ## Use with React
 
 ### useAtom
@@ -287,23 +296,66 @@ function Counter() {
         <button onClick={() => count$.set('inner', count + 2)}>one up</button> ...
 ```
 
-### useHydrateAtoms
+### hydrateAtoms
 
 With SSR, your atoms will likely need to be properly hydrated to prevent
 server/client mismatches. You can use `useHydrateAtoms` as a simple solution for
 seeding your client-side Atoms with the correct data.
 
+NOTE: **`hydrateAtoms` caches values and only runs on the initial load by default**, to prevent re-hydration when client-side only changes are made to the component.
+
 ```
 import { Atom, useAtom, useHydrateAtoms } from 'chem-rx'
 
 const count$ = Atom(0)
 const CounterPage = ({ countFromServer }) => {
-  useHydrateAtoms([[count$, countFromServer]])
+  hydrateAtoms([[count$, countFromServer]])
   const count = useAtom(count$)
   // count would be the value of `countFromServer`, not 0.
+
+  /*
+   * ... other code
+   */
+
+   useEffect(() => {
+     // This is safe, because hydrateAtoms runs once by default
+     count$.next(10)
+   }, [otherDeps])
+
 }
 ```
 
+#### `force` hydrateAtoms
+
+If you want to force re-hydration, you can optionally pass in a `{force: true}` (for example - you have a top level page wrapper that receives server data )
+
+```
+    export default function CasesPage({ cases }: Props) {
+      // force it to rehydrate with newest value every time this client page is loaded
+      hydrateAtoms([[cases$, cases]], { force: true });
+      const router = useRouter();
+      return (
+        <>
+          <div className="flex justify-between w-full mb-4 px-6 pt-8">
+            <h1 className="text-2xl">Cases</h1>
+            <Button
+              onClick={() => {
+                router.push("/cases/new");
+              }}
+            >
+              <PlusCircle className="w-4 h-4 mr-2" /> Add Cases
+            </Button>
+          </div>
+          <CasesTable />
+        </>
+      );
+    }
+```
+
+In this example, `CasePage` is a top level client component rendering the home page from a SPA, which gets redirected to when coming from another page. We want it to render with the latest server-rendered data.
+
+NOTE: `force` should only be used when the component is expected to only re-render when new data comes from the server - **and never anytime else**.
+
 ## Suggested Usage
 
 There are several suggested "patterns" when using Atoms:

package/dist/Signal.d.ts

@@ -1,9 +1,9 @@
-import { Subject } from "rxjs";
-export declare class BaseSignal<T = any> {
-    _subject$: Subject<T>;
+import { Subscription } from "rxjs";
+export declare class Signal<T = any> {
+    private _subjects;
+    private _defaultSubject;
     constructor();
-    ping(value: T): void;
-    subscribe(...params: Parameters<Subject<T>["subscribe"]>): import("rxjs").Subscription;
+    ping(value: T, id?: string): void;
+    subscribe(callback: (value: T) => void, id?: string): Subscription;
 }
-export declare function Signal<T>(): void;
 //# sourceMappingURL=Signal.d.ts.map

package/dist/Signal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Signal.d.ts","sourceRoot":"","sources":["../src/Signal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B,qBAAa,UAAU,CAAC,CAAC,GAAG,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;;IAOtB,IAAI,CAAC,KAAK,EAAE,CAAC;IAIb,SAAS,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;CAGzD;AAED,wBAAgB,MAAM,CAAC,CAAC,UAAM"}
+{"version":3,"file":"Signal.d.ts","sourceRoot":"","sources":["../src/Signal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,MAAM,CAAC;AAE7C,qBAAa,MAAM,CAAC,CAAC,GAAG,GAAG;IACzB,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,eAAe,CAAa;;IAOpC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM;IAY1B,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC,EAAE,MAAM,GAAG,YAAY;CAcnE"}

package/dist/index.cjs.js

@@ -335,7 +335,43 @@ function hydrateAtoms(values, options) {
   }
 }
 
-function Signal() {}
+var Signal = /*#__PURE__*/function () {
+  function Signal() {
+    this._subjects = new Map();
+    this._defaultSubject = new rxjs.Subject();
+  }
+  var _proto = Signal.prototype;
+  _proto.ping = function ping(value, id) {
+    if (id && this._subjects.has(id)) {
+      var _this$_subjects$get;
+      // If an ID is provided and exists, notify only that subscription.
+      (_this$_subjects$get = this._subjects.get(id)) == null ? void 0 : _this$_subjects$get.next(value);
+    } else {
+      // No ID provided, notify all default subscribers.
+      this._defaultSubject.next(value);
+      // Additionally, notify all subscriptions as a broadcast.
+      this._subjects.forEach(function (subject) {
+        return subject.next(value);
+      });
+    }
+  };
+  _proto.subscribe = function subscribe(callback, id) {
+    if (id) {
+      // If an ID is provided, subscribe to the specific ID.
+      if (!this._subjects.has(id)) {
+        this._subjects.set(id, new rxjs.Subject());
+      }
+      return this._subjects.get(id).subscribe(callback);
+    } else {
+      // No ID provided, subscribe to the default subject.
+      return this._defaultSubject.subscribe(callback);
+    }
+  }
+
+  // Optionally, implement unsubscribe logic to manage subscriptions.
+  ;
+  return Signal;
+}();
 
 exports.Atom = Atom;
 exports.Signal = Signal;

package/dist/index.iife.js

@@ -333,7 +333,43 @@ var chemicalRx = (function (exports, rxjs, react) {
     }
   }
 
-  function Signal() {}
+  var Signal = /*#__PURE__*/function () {
+    function Signal() {
+      this._subjects = new Map();
+      this._defaultSubject = new rxjs.Subject();
+    }
+    var _proto = Signal.prototype;
+    _proto.ping = function ping(value, id) {
+      if (id && this._subjects.has(id)) {
+        var _this$_subjects$get;
+        // If an ID is provided and exists, notify only that subscription.
+        (_this$_subjects$get = this._subjects.get(id)) == null ? void 0 : _this$_subjects$get.next(value);
+      } else {
+        // No ID provided, notify all default subscribers.
+        this._defaultSubject.next(value);
+        // Additionally, notify all subscriptions as a broadcast.
+        this._subjects.forEach(function (subject) {
+          return subject.next(value);
+        });
+      }
+    };
+    _proto.subscribe = function subscribe(callback, id) {
+      if (id) {
+        // If an ID is provided, subscribe to the specific ID.
+        if (!this._subjects.has(id)) {
+          this._subjects.set(id, new rxjs.Subject());
+        }
+        return this._subjects.get(id).subscribe(callback);
+      } else {
+        // No ID provided, subscribe to the default subject.
+        return this._defaultSubject.subscribe(callback);
+      }
+    }
+
+    // Optionally, implement unsubscribe logic to manage subscriptions.
+    ;
+    return Signal;
+  }();
 
   exports.Atom = Atom;
   exports.Signal = Signal;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { combineLatest, isObservable, BehaviorSubject, map, distinctUntilChanged } from 'rxjs';
+import { combineLatest, isObservable, BehaviorSubject, map, distinctUntilChanged, Subject } from 'rxjs';
 import { useState, useEffect } from 'react';
 
 function _extends() {
@@ -248,6 +248,37 @@ function hydrateAtoms(values, options) {
   }
 }
 
-function Signal() {}
+class Signal {
+  constructor() {
+    this._subjects = new Map();
+    this._defaultSubject = new Subject();
+  }
+  ping(value, id) {
+    if (id && this._subjects.has(id)) {
+      var _this$_subjects$get;
+      // If an ID is provided and exists, notify only that subscription.
+      (_this$_subjects$get = this._subjects.get(id)) == null ? void 0 : _this$_subjects$get.next(value);
+    } else {
+      // No ID provided, notify all default subscribers.
+      this._defaultSubject.next(value);
+      // Additionally, notify all subscriptions as a broadcast.
+      this._subjects.forEach(subject => subject.next(value));
+    }
+  }
+  subscribe(callback, id) {
+    if (id) {
+      // If an ID is provided, subscribe to the specific ID.
+      if (!this._subjects.has(id)) {
+        this._subjects.set(id, new Subject());
+      }
+      return this._subjects.get(id).subscribe(callback);
+    } else {
+      // No ID provided, subscribe to the default subject.
+      return this._defaultSubject.subscribe(callback);
+    }
+  }
+
+  // Optionally, implement unsubscribe logic to manage subscriptions.
+}
 
 export { Atom, Signal, hydrateAtoms, useAtom, useSelectAtom };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chem-rx",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "react state primitives powered by rx.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/Signal.ts

@@ -1,20 +1,38 @@
-import { Subject } from "rxjs";
+import { Subject, Subscription } from "rxjs";
 
-export class BaseSignal<T = any> {
-  _subject$: Subject<T>;
+export class Signal<T = any> {
+  private _subjects: Map<string, Subject<T>>;
+  private _defaultSubject: Subject<T>;
 
   constructor() {
-    // if it's just a value just use a regular behavior subject
-    this._subject$ = new Subject<T>();
+    this._subjects = new Map();
+    this._defaultSubject = new Subject<T>();
   }
 
-  ping(value: T) {
-    this._subject$.next(value);
+  ping(value: T, id?: string) {
+    if (id && this._subjects.has(id)) {
+      // If an ID is provided and exists, notify only that subscription.
+      this._subjects.get(id)?.next(value);
+    } else {
+      // No ID provided, notify all default subscribers.
+      this._defaultSubject.next(value);
+      // Additionally, notify all subscriptions as a broadcast.
+      this._subjects.forEach((subject) => subject.next(value));
+    }
   }
 
-  subscribe(...params: Parameters<Subject<T>["subscribe"]>) {
-    return this._subject$.subscribe(...params);
+  subscribe(callback: (value: T) => void, id?: string): Subscription {
+    if (id) {
+      // If an ID is provided, subscribe to the specific ID.
+      if (!this._subjects.has(id)) {
+        this._subjects.set(id, new Subject<T>());
+      }
+      return this._subjects.get(id)!.subscribe(callback);
+    } else {
+      // No ID provided, subscribe to the default subject.
+      return this._defaultSubject.subscribe(callback);
+    }
   }
-}
 
-export function Signal<T>() {}
+  // Optionally, implement unsubscribe logic to manage subscriptions.
+}

package/tests/atom.test.ts

@@ -1,4 +1,5 @@
 import { ArrayAtom, Atom, BaseAtom, ReadOnlyAtom } from "../src/Atom";
+import { Signal } from "../src/Signal";
 import { BehaviorSubject, map } from "rxjs";
 
 test("Base Atom values test", () => {
@@ -540,6 +541,83 @@ test("Test select nullable object", () => {
   expect(stacySchool.get("graduation")).toBe(2014);
 });
 
+describe("SignalWithId", () => {
+  it("should broadcast messages to all subscribers when no ID is provided", (done) => {
+    const signal = new Signal<string>();
+    const mockCallback = jest.fn();
+
+    signal.subscribe(mockCallback);
+    signal.subscribe(mockCallback);
+
+    signal.ping("test message");
+
+    setImmediate(() => {
+      expect(mockCallback).toHaveBeenCalledTimes(2);
+      expect(mockCallback).toHaveBeenCalledWith("test message");
+      done();
+    });
+  });
+
+  it("should send messages only to subscribers with the specific ID", (done) => {
+    const signal = new Signal<string>();
+    const mockCallbackWithId = jest.fn();
+    const mockCallbackWithoutId = jest.fn();
+
+    signal.subscribe(mockCallbackWithId, "123");
+    signal.subscribe(mockCallbackWithoutId);
+
+    signal.ping("ID specific message", "123");
+
+    setImmediate(() => {
+      expect(mockCallbackWithId).toHaveBeenCalledTimes(1);
+      expect(mockCallbackWithId).toHaveBeenCalledWith("ID specific message");
+      expect(mockCallbackWithoutId).toHaveBeenCalledTimes(0);
+      done();
+    });
+  });
+
+  it("should not notify subscribers with different IDs", (done) => {
+    const signal = new Signal<string>();
+    const mockCallbackId123 = jest.fn();
+    const mockCallbackId456 = jest.fn();
+
+    signal.subscribe(mockCallbackId123, "123");
+    signal.subscribe(mockCallbackId456, "456");
+
+    signal.ping("Message for 123", "123");
+
+    setImmediate(() => {
+      expect(mockCallbackId123).toHaveBeenCalledTimes(1);
+      expect(mockCallbackId123).toHaveBeenCalledWith("Message for 123");
+      expect(mockCallbackId456).toHaveBeenCalledTimes(0);
+      done();
+    });
+  });
+
+  it("should notify all subscribers, including those with specific IDs, when pinging without an ID", (done) => {
+    const signal = new Signal<string>();
+    const mockCallback = jest.fn();
+    const mockCallbackWithId = jest.fn();
+
+    // Subscribe one callback without ID (for general broadcast)
+    signal.subscribe(mockCallback);
+    // Subscribe another callback with a specific ID
+    signal.subscribe(mockCallbackWithId, "123");
+
+    // Ping without specifying an ID should notify both subscribers
+    signal.ping("broadcast message");
+
+    setImmediate(() => {
+      // Both callbacks should be called once
+      expect(mockCallback).toHaveBeenCalledTimes(1);
+      expect(mockCallback).toHaveBeenCalledWith("broadcast message");
+      expect(mockCallbackWithId).toHaveBeenCalledTimes(1);
+      expect(mockCallbackWithId).toHaveBeenCalledWith("broadcast message");
+      done();
+    });
+  });
+});
+
 /*
  * TODO:
  * - test react hooks