react-obsidian 0.0.46 → 1.0.0

package/global.d.ts

@@ -0,0 +1 @@
+import 'jest-extended';

package/jest.config.js

@@ -8,7 +8,8 @@ const config = {
     'test',
   ],
   setupFilesAfterEnv: [
-    './jest.setup-after-env.js'
+    './jest.setup-after-env.js',
+    'jest-extended/all'
   ],
   testEnvironment: 'jsdom'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-obsidian",
-  "version": "0.0.46",
+  "version": "1.0.0",
   "description": "Dependency injection framework for React and React Native applications",
   "scripts": {
     "prepack": "npm run lint && tsc --project tsconfig.prod.json",
@@ -20,12 +20,13 @@
     "react": "*"
   },
   "devDependencies": {
-    "@babel/core": "7.20.x",
-    "@babel/plugin-proposal-decorators": "7.18.x",
-    "@babel/preset-env": "7.20.x",
-    "@babel/preset-react": "7.18.x",
-    "@babel/preset-typescript": "7.18.x",
-    "@babel/types": "7.20.x",
+    "@babel/core": "7.22.x",
+    "@babel/plugin-proposal-decorators": "7.22.x",
+    "@babel/plugin-transform-class-properties": "7.22.x",
+    "@babel/preset-env": "7.22.x",
+    "@babel/preset-react": "7.22.x",
+    "@babel/preset-typescript": "7.22.x",
+    "@babel/types": "7.22.x",
     "@johanblumenberg/ts-mockito": "1.x.x",
     "@testing-library/react": "14.x.x",
     "@testing-library/react-hooks": "^7.0.2",
@@ -48,6 +49,7 @@
     "eslint-plugin-unused-imports": "2.x.x",
     "jest": "29.5.x",
     "jest-environment-jsdom": "^29.5.0",
+    "jest-extended": "^4.0.0",
     "lodash": "^4.17.21",
     "react": "18.2.x",
     "react-dom": "18.2.x",
@@ -79,4 +81,4 @@
     "url": "https://github.com/wix-incubator/react-obsidian/issues"
   },
   "homepage": "https://github.com/wix-incubator/react-obsidian#readme"
-}
+}

package/src/index.ts

@@ -20,8 +20,11 @@ export { injectComponent } from './injectors/components/InjectComponent';
 export { injectHook, injectHookWithArguments } from './injectors/hooks/InjectHook';
 
 export { useObserver } from './observable/useObserver';
+export { useObservers } from './observable/useObservers';
 export { Observable } from './observable/Observable';
-export { MediatorObservable } from './observable/MediatorObservable';
+export { MediatorObservable } from './observable/mediator/MediatorObservable';
 export { OnNext, Unsubscribe } from './observable/types';
 
+export { Model } from './model/Model';
+
 export { testKit } from '../testkit';

package/src/model/Model.ts

@@ -0,0 +1,15 @@
+import { useColdObservables } from '../observable/cold/useColdObservers';
+import { Observable } from '../observable/Observable';
+
+export abstract class Model {
+  public use<T extends Model>(this: T) {
+    const observables: Record<string, Observable<any>> = {};
+    Object.getOwnPropertyNames(this).forEach((propertyName: string) => {
+      const property = (this as any)[propertyName];
+      if (property instanceof Observable) {
+        observables[propertyName] = property;
+      }
+    });
+    return useColdObservables<T>(observables as any);
+  }
+}

package/src/observable/Observable.ts

@@ -1,5 +1,6 @@
 import { Observable as IObservable, OnNext, Unsubscribe } from './types';
 
+const NOOP = () => {};
 export class Observable<T> implements IObservable<T> {
   private subscribers: Set<OnNext<T>> = new Set();
   private currentValue: T | undefined;
@@ -17,7 +18,7 @@ export class Observable<T> implements IObservable<T> {
     this.subscribers.forEach((subscriber) => subscriber(value));
   }
 
-  public subscribe(onNext: OnNext<T>): Unsubscribe {
+  public subscribe(onNext: OnNext<T> = NOOP): Unsubscribe {
     if (this.subscribers.has(onNext)) {
       throw new Error('Subscriber already subscribed');
     }

package/src/observable/cold/ColdMediatorObservable.ts

@@ -0,0 +1,47 @@
+import { MediatorObservable } from '../mediator/MediatorObservable';
+
+export class ColdMediatorObservable<T extends object> extends MediatorObservable<T> {
+  constructor(obj: T, private readonly handler = new PropertyAccessTrackingProxy<T>()) {
+    super(new Proxy(obj, handler));
+  }
+
+  override set value(_: T) {
+    throw new Error('Cannot set value of ColdMediatorObservable, use setValue(value, key) instead');
+  }
+
+  override get value(): T {
+    return super.value;
+  }
+
+  setValue(key: keyof T, value: any) {
+    if (this.handler.hasAccessedProperty(key)) {
+      this.handler.suspendTracking();
+      super.value = { ...this.value, [key]: value };
+      this.handler.resumeTracking();
+    }
+  }
+}
+
+class PropertyAccessTrackingProxy<T extends object> implements ProxyHandler<T> {
+  private readonly accessedProperties = new Set<keyof T>();
+  private trackingSuspended = false;
+
+  get(target: T, p: string | symbol, receiver: any) {
+    if (!this.trackingSuspended) {
+      this.accessedProperties.add(p as keyof T);
+    }
+    return Reflect.get(target, p, receiver);
+  }
+
+  hasAccessedProperty(key: keyof T) {
+    return this.accessedProperties.has(key);
+  }
+
+  public suspendTracking() {
+    this.trackingSuspended = true;
+  }
+
+  public resumeTracking() {
+    this.trackingSuspended = false;
+  }
+}

package/src/observable/cold/useColdObservers.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { ColdMediatorObservable } from './ColdMediatorObservable';
+import { ObservedValues } from '../types';
+import { mapObservablesToValues } from '../mapObservablesToValues';
+
+export function useColdObservables<T extends Record<string, any>>(observables: T): ObservedValues<T> {
+  const [mediator] = useState(
+    () => new ColdMediatorObservable<T>(mapObservablesToValues(observables) as T),
+  );
+  const [values, setValues] = useState(() => mediator.value as ObservedValues<T>);
+
+  useEffect(() => {
+    Object.keys(observables as {}).forEach((key) => {
+      mediator.addSource(observables[key], (value) => {
+        mediator.setValue(key, value);
+      });
+    });
+
+    return mediator.subscribe(setValues);
+  }, []);
+
+  return values;
+}

package/src/observable/mapObservablesToValues.ts

@@ -0,0 +1,7 @@
+import { ObservedValues } from './types';
+
+export function mapObservablesToValues<T extends Record<string, any>>(observables: T): ObservedValues<T> {
+  return Object.fromEntries(
+    Object.entries(observables).map(([key, observable]) => [key, observable.value]),
+  ) as ObservedValues<T>;
+}

package/src/observable/mediator/MediatorObservable.ts

@@ -0,0 +1,9 @@
+import { Observable } from '../Observable';
+import { OnNext } from '../types';
+
+export class MediatorObservable<T> extends Observable<T> {
+  addSource<S>(source: Observable<S>, onNext: OnNext<S>) {
+    source.subscribe(onNext);
+    return this;
+  }
+}

package/src/observable/types.ts

@@ -5,3 +5,5 @@ export interface Observable<T> {
   value: T;
   subscribe(onNext: OnNext<T>): Unsubscribe;
 }
+
+export type ObservedValues<T> = { [K in keyof T]: T[K] extends Observable<infer R> ? R : never };

package/src/observable/useObserver.ts

@@ -1,8 +1,19 @@
 /* eslint-disable no-param-reassign */
-import { useCallback, useEffect, useState } from 'react';
-import { Observable } from './types';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { Observable } from './Observable';
 
-export function useObserver<T>(observable: Observable<T>): [T, (next: T) => void] {
+type ObservableOrGenerator<T> = Observable<T> | (() => Observable<T>);
+
+export function useObserver<T>(observableOrGenerator: ObservableOrGenerator<T>): [T, (next: T) => void] {
+  const observable = useMemo(
+    () => getOrGenerateObservable(observableOrGenerator),
+    [],
+  );
   const [value, setValue] = useState(observable.value);
   const onNext = useCallback((next: T) => {
     observable.value = next;
@@ -14,3 +25,7 @@ export function useObserver<T>(observable: Observable<T>): [T, (next: T) => void
 
   return [value, onNext];
 }
+
+function getOrGenerateObservable(observableOrGenerator: ObservableOrGenerator<any>) {
+  return observableOrGenerator instanceof Observable ? observableOrGenerator : observableOrGenerator();
+}

package/src/observable/useObservers.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { MediatorObservable } from './mediator/MediatorObservable';
+import { ObservedValues } from './types';
+import { mapObservablesToValues } from './mapObservablesToValues';
+
+export function useObservers<T extends Record<string, any>>(observables: T): ObservedValues<T> {
+  const [values, setValues] = useState(() => mapObservablesToValues(observables));
+
+  useEffect(() => {
+    const mediator = new MediatorObservable();
+    Object.keys(observables as {}).forEach((key) => {
+      mediator.addSource(observables[key], (value) => {
+        setValues({ ...values, [key]: value });
+      });
+    });
+
+    return mediator.subscribe();
+  }, []);
+
+  return values;
+}

package/tsconfig.base.json

@@ -3,7 +3,8 @@
     "src/**/*",
     "transformers/**/*",
     "test/**/*",
-    "./clearGraphs.ts"
+    "./clearGraphs.ts",
+    "global.d.ts"
   ],
   "exclude": [
     "node_modules",

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

@@ -1,6 +0,0 @@
-import { Observable } from './Observable';
-import { OnNext } from './types';
-export declare class MediatorObservable<T> extends Observable<T> {
-    addSource<S>(source: Observable<S>, onNext: OnNext<S>): MediatorObservable<T>;
-}
-//# sourceMappingURL=MediatorObservable.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MediatorObservable.d.ts","sourceRoot":"","sources":["../../../src/observable/MediatorObservable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,qBAAa,kBAAkB,CAAC,CAAC,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;IACtD,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC;CAI9E"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"MediatorObservable.js","sourceRoot":"","sources":["../../../src/observable/MediatorObservable.ts"],"names":[],"mappings":";;;AAAA,6CAA0C;AAG1C,MAAa,kBAAsB,SAAQ,uBAAa;IACtD,SAAS,CAAI,MAAqB,EAAE,MAAiB;QACnD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AALD,gDAKC"}

package/src/observable/MediatorObservable.ts

@@ -1,9 +0,0 @@
-import { Observable } from './Observable';
-import { OnNext } from './types';
-
-export class MediatorObservable<T> extends Observable<T> {
-  addSource<S>(source: Observable<S>, onNext: OnNext<S>): MediatorObservable<T> {
-    source.subscribe(onNext);
-    return this;
-  }
-}