react-obsidian 0.0.47 → 1.0.0

package/dist/src/observable/useObserver.d.ts

@@ -1,3 +1,5 @@
-import { Observable } from './types';
-export declare function useObserver<T>(observable: Observable<T>): [T, (next: T) => void];
+import { Observable } from './Observable';
+type ObservableOrGenerator<T> = Observable<T> | (() => Observable<T>);
+export declare function useObserver<T>(observableOrGenerator: ObservableOrGenerator<T>): [T, (next: T) => void];
+export {};
 //# sourceMappingURL=useObserver.d.ts.map

package/dist/src/observable/useObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useObserver.d.ts","sourceRoot":"","sources":["../../../src/observable/useObserver.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAWhF"}
+{"version":3,"file":"useObserver.d.ts","sourceRoot":"","sources":["../../../src/observable/useObserver.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,KAAK,qBAAqB,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtE,wBAAgB,WAAW,CAAC,CAAC,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAetG"}

package/dist/src/observable/useObserver.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useObserver = void 0;
 /* eslint-disable no-param-reassign */
 const react_1 = require("react");
-function useObserver(observable) {
+const Observable_1 = require("./Observable");
+function useObserver(observableOrGenerator) {
+    const observable = (0, react_1.useMemo)(() => getOrGenerateObservable(observableOrGenerator), []);
     const [value, setValue] = (0, react_1.useState)(observable.value);
     const onNext = (0, react_1.useCallback)((next) => {
         observable.value = next;
@@ -14,4 +16,7 @@ function useObserver(observable) {
     return [value, onNext];
 }
 exports.useObserver = useObserver;
+function getOrGenerateObservable(observableOrGenerator) {
+    return observableOrGenerator instanceof Observable_1.Observable ? observableOrGenerator : observableOrGenerator();
+}
 //# sourceMappingURL=useObserver.js.map

package/dist/src/observable/useObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useObserver.js","sourceRoot":"","sources":["../../../src/observable/useObserver.ts"],"names":[],"mappings":";;;AAAA,sCAAsC;AACtC,iCAAyD;AAGzD,SAAgB,WAAW,CAAI,UAAyB;IACtD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,CAAC,IAAO,EAAE,EAAE;QACrC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzB,CAAC;AAXD,kCAWC"}
+{"version":3,"file":"useObserver.js","sourceRoot":"","sources":["../../../src/observable/useObserver.ts"],"names":[],"mappings":";;;AAAA,sCAAsC;AACtC,iCAKe;AACf,6CAA0C;AAI1C,SAAgB,WAAW,CAAI,qBAA+C;IAC5E,MAAM,UAAU,GAAG,IAAA,eAAO,EACxB,GAAG,EAAE,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,EACpD,EAAE,CACH,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,CAAC,IAAO,EAAE,EAAE;QACrC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AACzB,CAAC;AAfD,kCAeC;AAED,SAAS,uBAAuB,CAAC,qBAAiD;IAChF,OAAO,qBAAqB,YAAY,uBAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;AACvG,CAAC"}

package/documentation/docs/documentation/usage/Reactivity.mdx

@@ -74,6 +74,26 @@ const useLogin = () => {
 }
 ```
 
+### Avoid recreating the initial observable
+When using the `useObserver` hook, it is important to avoid recreating the initial observable.
+
+```ts title="Avoid instantiating observables in hooks"
+const useLogin = () => {
+  const [isLoggedIn] = useObserver(new Observable(false));
+}
+```
+
+Even if the value of the observable is the same, this can cause unexpected behavior since it's instantiated on every render.
+
+To solve this, you can pass a generator function to the useObserver hook instead:
+```ts
+const useLogin = () => {
+  const [isLoggedIn] = useObserver(() => new Observable(false));
+}
+```
+
+If you pass a function to the useObserver hook, it will only be called on the first render. This ensures that the observable is only instantiated once.
+
 ### Merge multiple observable sources
 `MediatorObservable` is a special type of observable that allows you to merge multiple observable sources into a single observable. This is useful for creating side effect from one or more observables.