react-obsidian 0.0.33 → 0.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/src/index.d.ts +3 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +3 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/observable/MediatorObservable.d.ts +14 -0
- package/dist/src/observable/MediatorObservable.d.ts.map +1 -0
- package/dist/src/observable/MediatorObservable.js +53 -0
- package/dist/src/observable/MediatorObservable.js.map +1 -0
- package/dist/src/observable/Observable.d.ts +4 -6
- package/dist/src/observable/Observable.d.ts.map +1 -1
- package/dist/src/observable/Observable.js +4 -4
- package/dist/src/observable/Observable.js.map +1 -1
- package/dist/src/observable/types.d.ts +7 -0
- package/dist/src/observable/types.d.ts.map +1 -0
- package/dist/src/observable/types.js +3 -0
- package/dist/src/observable/types.js.map +1 -0
- package/dist/src/observable/useObserver.d.ts +1 -1
- package/dist/src/observable/useObserver.d.ts.map +1 -1
- package/documentation/docs/documentation/documentation.mdx +1 -1
- package/documentation/docs/documentation/usage/Graphs.mdx +17 -9
- package/package.json +1 -1
- package/src/index.ts +3 -1
- package/src/observable/MediatorObservable.ts +55 -0
- package/src/observable/Observable.ts +8 -7
- package/src/observable/types.ts +7 -0
- package/src/observable/useObserver.ts +1 -1
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ React Obsidian is a dependency injection framework for React and React Native ap
|
|
|
14
14
|
* [Getting Started](https://wix-incubator.github.io/obsidian/docs/documentation/#the-2-steps-tutorial-for-injecting-dependencies-with-obsidian)
|
|
15
15
|
* [Installation](https://wix-incubator.github.io/obsidian/docs/documentation/installation)
|
|
16
16
|
* [Guides](https://wix-incubator.github.io/obsidian/docs/guides/mockDependencies)
|
|
17
|
-
* [Chat on Discord](https://discord.gg/
|
|
17
|
+
* [Chat on Discord](https://discord.gg/MDH2axwaPy)
|
|
18
18
|
|
|
19
19
|
## Example - Injecting a hook
|
|
20
20
|
Obsidian supports injecting hooks, components and classes. The example below shows how to inject a hook.
|
|
@@ -28,7 +28,7 @@ In the `ApplicationGraph` below, we declare two dependencies:
|
|
|
28
28
|
|
|
29
29
|
Both functions are annotated by the `@Provides()` annotation. This signals Obsidian that the results of these functions are provided by the graph and can be injected.
|
|
30
30
|
|
|
31
|
-
Notice how the biLogger function receives an `httpClient` as an argument. This means that `biLogger` is dependent on `httpClient`. Obsidian will create an `httpClient` when `biLogger` is injected.
|
|
31
|
+
Notice how the `biLogger` function receives an `httpClient` as an argument. This means that `biLogger` is dependent on `httpClient`. Obsidian will create an `httpClient` when `biLogger` is injected.
|
|
32
32
|
|
|
33
33
|
``` typescript
|
|
34
34
|
@Singleton() @Graph()
|
|
@@ -48,7 +48,7 @@ class ApplicationGraph extends ObjectGraph {
|
|
|
48
48
|
### Step 2: Inject a dependency
|
|
49
49
|
|
|
50
50
|
```typescript
|
|
51
|
-
|
|
51
|
+
type Injected = DependenciesOf<ApplicationGraph, 'biLogger'>; // { biLogger: BiLogger }
|
|
52
52
|
|
|
53
53
|
interface UseButtonPress {
|
|
54
54
|
usePress: () => void;
|
|
@@ -78,4 +78,4 @@ const Component = () => (
|
|
|
78
78
|
<button onclick={onClick}>Click Me</button>
|
|
79
79
|
</>
|
|
80
80
|
);
|
|
81
|
-
```
|
|
81
|
+
```
|
package/dist/src/index.d.ts
CHANGED
|
@@ -15,6 +15,8 @@ export declare const Obsidian: _Obsidian;
|
|
|
15
15
|
export { injectComponent } from './injectors/components/InjectComponent';
|
|
16
16
|
export { injectHook, injectHookWithArguments } from './injectors/hooks/InjectHook';
|
|
17
17
|
export { useObserver } from './observable/useObserver';
|
|
18
|
-
export { Observable
|
|
18
|
+
export { Observable } from './observable/Observable';
|
|
19
|
+
export { MediatorObservable } from './observable/MediatorObservable';
|
|
20
|
+
export { OnNext, Unsubscribe } from './observable/types';
|
|
19
21
|
export { testKit } from '../testkit';
|
|
20
22
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/src/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,iBAAiB,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAEvF,eAAO,MAAM,QAAQ,WAAkB,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,KAAK,IAAI,MAAM,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,iBAAiB,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAEvF,eAAO,MAAM,QAAQ,WAAkB,CAAC;AAExC,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/src/index.js
CHANGED
|
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
17
17
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
18
|
};
|
|
19
19
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.testKit = exports.Observable = exports.useObserver = exports.injectHookWithArguments = exports.injectHook = exports.injectComponent = exports.Obsidian = exports.GraphMiddleware = exports.LifecycleBound = exports.LazyInject = exports.Inject = exports.Injectable = exports.Provides = exports.ObjectGraph = exports.Singleton = exports.Graph = void 0;
|
|
20
|
+
exports.testKit = exports.MediatorObservable = exports.Observable = exports.useObserver = exports.injectHookWithArguments = exports.injectHook = exports.injectComponent = exports.Obsidian = exports.GraphMiddleware = exports.LifecycleBound = exports.LazyInject = exports.Inject = exports.Injectable = exports.Provides = exports.ObjectGraph = exports.Singleton = exports.Graph = void 0;
|
|
21
21
|
var Obsidian_1 = __importDefault(require("./Obsidian"));
|
|
22
22
|
__exportStar(require("./types"), exports);
|
|
23
23
|
var Graph_1 = require("./decorators/Graph");
|
|
@@ -48,6 +48,8 @@ var useObserver_1 = require("./observable/useObserver");
|
|
|
48
48
|
Object.defineProperty(exports, "useObserver", { enumerable: true, get: function () { return useObserver_1.useObserver; } });
|
|
49
49
|
var Observable_1 = require("./observable/Observable");
|
|
50
50
|
Object.defineProperty(exports, "Observable", { enumerable: true, get: function () { return Observable_1.Observable; } });
|
|
51
|
+
var MediatorObservable_1 = require("./observable/MediatorObservable");
|
|
52
|
+
Object.defineProperty(exports, "MediatorObservable", { enumerable: true, get: function () { return MediatorObservable_1.MediatorObservable; } });
|
|
51
53
|
var testkit_1 = require("../testkit");
|
|
52
54
|
Object.defineProperty(exports, "testKit", { enumerable: true, get: function () { return testkit_1.testKit; } });
|
|
53
55
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,wDAAmC;AAEnC,0CAAwB;AAExB,4CAA2C;AAAlC,8FAAA,KAAK,OAAA;AACd,oDAAmD;AAA1C,sGAAA,SAAS,OAAA;AAClB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AAEpB,2DAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,6DAA4D;AAAnD,wGAAA,UAAU,OAAA;AACnB,qDAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,6DAA4D;AAAnD,wGAAA,UAAU,OAAA;AACnB,8DAA6D;AAApD,gHAAA,cAAc,OAAA;AACvB,oEAAmE;AAA1D,kHAAA,eAAe,OAAA;AAGX,QAAA,QAAQ,GAAG,IAAI,kBAAS,EAAE,CAAC;AAExC,0EAAyE;AAAhE,kHAAA,eAAe,OAAA;AACxB,2DAAmF;AAA1E,wGAAA,UAAU,OAAA;AAAE,qHAAA,uBAAuB,OAAA;AAE5C,wDAAuD;AAA9C,0GAAA,WAAW,OAAA;AACpB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,wDAAmC;AAEnC,0CAAwB;AAExB,4CAA2C;AAAlC,8FAAA,KAAK,OAAA;AACd,oDAAmD;AAA1C,sGAAA,SAAS,OAAA;AAClB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AAEpB,2DAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,6DAA4D;AAAnD,wGAAA,UAAU,OAAA;AACnB,qDAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,6DAA4D;AAAnD,wGAAA,UAAU,OAAA;AACnB,8DAA6D;AAApD,gHAAA,cAAc,OAAA;AACvB,oEAAmE;AAA1D,kHAAA,eAAe,OAAA;AAGX,QAAA,QAAQ,GAAG,IAAI,kBAAS,EAAE,CAAC;AAExC,0EAAyE;AAAhE,kHAAA,eAAe,OAAA;AACxB,2DAAmF;AAA1E,wGAAA,UAAU,OAAA;AAAE,qHAAA,uBAAuB,OAAA;AAE5C,wDAAuD;AAA9C,0GAAA,WAAW,OAAA;AACpB,sDAAqD;AAA5C,wGAAA,UAAU,OAAA;AACnB,sEAAqE;AAA5D,wHAAA,kBAAkB,OAAA;AAG3B,sCAAqC;AAA5B,kGAAA,OAAO,OAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Observable } from './Observable';
|
|
2
|
+
import { OnNext, Unsubscribe, Observable as IObservable } from './types';
|
|
3
|
+
export declare class MediatorObservable<T> implements IObservable<T> {
|
|
4
|
+
private subscribers;
|
|
5
|
+
private currentValue;
|
|
6
|
+
private sources;
|
|
7
|
+
constructor(initialValue?: T);
|
|
8
|
+
addSource<S>(source: Observable<S>, onNext: OnNext<S>): MediatorObservable<T>;
|
|
9
|
+
get value(): T;
|
|
10
|
+
set value(value: T);
|
|
11
|
+
subscribe(onNext: OnNext<T>): Unsubscribe;
|
|
12
|
+
private subscribeToAllSources;
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=MediatorObservable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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,WAAW,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,SAAS,CAAC;AAQzE,qBAAa,kBAAkB,CAAC,CAAC,CAAE,YAAW,WAAW,CAAC,CAAC,CAAC;IAC1D,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAqB;gBAExB,YAAY,CAAC,EAAE,CAAC;IAI5B,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC;IAK7E,IAAW,KAAK,IAAI,CAAC,CAEpB;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,CAAC,EAGxB;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,WAAW;IAczC,OAAO,CAAC,qBAAqB;CAQ9B"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.MediatorObservable = void 0;
|
|
4
|
+
var MediatorObservable = /** @class */ (function () {
|
|
5
|
+
function MediatorObservable(initialValue) {
|
|
6
|
+
this.subscribers = new Set();
|
|
7
|
+
this.sources = [];
|
|
8
|
+
this.currentValue = initialValue;
|
|
9
|
+
}
|
|
10
|
+
MediatorObservable.prototype.addSource = function (source, onNext) {
|
|
11
|
+
this.sources.push({ source: source, onNext: onNext });
|
|
12
|
+
return this;
|
|
13
|
+
};
|
|
14
|
+
Object.defineProperty(MediatorObservable.prototype, "value", {
|
|
15
|
+
get: function () {
|
|
16
|
+
return this.currentValue;
|
|
17
|
+
},
|
|
18
|
+
set: function (value) {
|
|
19
|
+
this.currentValue = value;
|
|
20
|
+
this.subscribers.forEach(function (subscriber) { return subscriber(value); });
|
|
21
|
+
},
|
|
22
|
+
enumerable: false,
|
|
23
|
+
configurable: true
|
|
24
|
+
});
|
|
25
|
+
MediatorObservable.prototype.subscribe = function (onNext) {
|
|
26
|
+
var _this = this;
|
|
27
|
+
if (this.subscribers.has(onNext)) {
|
|
28
|
+
throw new Error('Subscriber already subscribed');
|
|
29
|
+
}
|
|
30
|
+
this.subscribers.add(onNext);
|
|
31
|
+
this.subscribeToAllSources();
|
|
32
|
+
return function () {
|
|
33
|
+
_this.subscribers.delete(onNext);
|
|
34
|
+
_this.sources.forEach(function (_a) {
|
|
35
|
+
var unsubscribe = _a.unsubscribe;
|
|
36
|
+
return unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
MediatorObservable.prototype.subscribeToAllSources = function () {
|
|
41
|
+
var _this = this;
|
|
42
|
+
this.sources.forEach(function (_a, index) {
|
|
43
|
+
var source = _a.source, onNext = _a.onNext;
|
|
44
|
+
var unsubscribe = source.subscribe(function (value) {
|
|
45
|
+
onNext(value);
|
|
46
|
+
});
|
|
47
|
+
_this.sources[index].unsubscribe = unsubscribe;
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
return MediatorObservable;
|
|
51
|
+
}());
|
|
52
|
+
exports.MediatorObservable = MediatorObservable;
|
|
53
|
+
//# sourceMappingURL=MediatorObservable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MediatorObservable.js","sourceRoot":"","sources":["../../../src/observable/MediatorObservable.ts"],"names":[],"mappings":";;;AASA;IAKE,4BAAY,YAAgB;QAJpB,gBAAW,GAAmB,IAAI,GAAG,EAAE,CAAC;QAExC,YAAO,GAAkB,EAAE,CAAC;QAGlC,IAAI,CAAC,YAAY,GAAG,YAAiB,CAAC;IACxC,CAAC;IAED,sCAAS,GAAT,UAAa,MAAqB,EAAE,MAAiB;QACnD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,QAAA,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,sBAAW,qCAAK;aAAhB;YACE,OAAO,IAAI,CAAC,YAAY,CAAC;QAC3B,CAAC;aAED,UAAiB,KAAQ;YACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAC,UAAU,IAAK,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,CAAC,CAAC;QAC9D,CAAC;;;OALA;IAOD,sCAAS,GAAT,UAAU,MAAiB;QAA3B,iBAYC;QAXC,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;SAClD;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAE7B,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,OAAO;YACL,KAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAChC,KAAI,CAAC,OAAO,CAAC,OAAO,CAAC,UAAC,EAAe;oBAAb,WAAW,iBAAA;gBAAO,OAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,EAAI;YAAf,CAAe,CAAC,CAAC;QAC7D,CAAC,CAAC;IACJ,CAAC;IAEO,kDAAqB,GAA7B;QAAA,iBAOC;QANC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,UAAC,EAAkB,EAAE,KAAK;gBAAvB,MAAM,YAAA,EAAE,MAAM,YAAA;YACpC,IAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,UAAC,KAAK;gBACzC,MAAM,CAAC,KAAK,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;YACH,KAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,WAAW,CAAC;QAChD,CAAC,CAAC,CAAC;IACL,CAAC;IACH,yBAAC;AAAD,CAAC,AA7CD,IA6CC;AA7CY,gDAAkB"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export declare class Observable<T> {
|
|
4
|
-
private _value;
|
|
1
|
+
import { Observable as IObservable, OnNext, Unsubscribe } from './types';
|
|
2
|
+
export declare class Observable<T> implements IObservable<T> {
|
|
5
3
|
private subscribers;
|
|
6
|
-
|
|
4
|
+
private currentValue;
|
|
5
|
+
constructor(initialValue?: T);
|
|
7
6
|
get value(): T;
|
|
8
7
|
set value(value: T);
|
|
9
8
|
subscribe(onNext: OnNext<T>): Unsubscribe;
|
|
10
9
|
}
|
|
11
|
-
export {};
|
|
12
10
|
//# sourceMappingURL=Observable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Observable.d.ts","sourceRoot":"","sources":["../../../src/observable/Observable.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Observable.d.ts","sourceRoot":"","sources":["../../../src/observable/Observable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEzE,qBAAa,UAAU,CAAC,CAAC,CAAE,YAAW,WAAW,CAAC,CAAC,CAAC;IAClD,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,YAAY,CAAgB;gBAExB,YAAY,CAAC,EAAE,CAAC;IAI5B,IAAW,KAAK,IAAI,CAAC,CAEpB;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,CAAC,EAGxB;IAEM,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,WAAW;CAOjD"}
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Observable = void 0;
|
|
4
4
|
var Observable = /** @class */ (function () {
|
|
5
|
-
function Observable(
|
|
6
|
-
this._value = _value;
|
|
5
|
+
function Observable(initialValue) {
|
|
7
6
|
this.subscribers = new Set();
|
|
7
|
+
this.currentValue = initialValue;
|
|
8
8
|
}
|
|
9
9
|
Object.defineProperty(Observable.prototype, "value", {
|
|
10
10
|
get: function () {
|
|
11
|
-
return this.
|
|
11
|
+
return this.currentValue;
|
|
12
12
|
},
|
|
13
13
|
set: function (value) {
|
|
14
|
-
this.
|
|
14
|
+
this.currentValue = value;
|
|
15
15
|
this.subscribers.forEach(function (subscriber) { return subscriber(value); });
|
|
16
16
|
},
|
|
17
17
|
enumerable: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Observable.js","sourceRoot":"","sources":["../../../src/observable/Observable.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"Observable.js","sourceRoot":"","sources":["../../../src/observable/Observable.ts"],"names":[],"mappings":";;;AAEA;IAIE,oBAAY,YAAgB;QAHpB,gBAAW,GAAmB,IAAI,GAAG,EAAE,CAAC;QAI9C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAED,sBAAW,6BAAK;aAAhB;YACE,OAAO,IAAI,CAAC,YAAiB,CAAC;QAChC,CAAC;aAED,UAAiB,KAAQ;YACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAC,UAAU,IAAK,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,CAAC,CAAC;QAC9D,CAAC;;;OALA;IAOM,8BAAS,GAAhB,UAAiB,MAAiB;QAAlC,iBAMC;QALC,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;SAClD;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC7B,OAAO,cAAM,OAAA,KAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,EAA/B,CAA+B,CAAC;IAC/C,CAAC;IACH,iBAAC;AAAD,CAAC,AAxBD,IAwBC;AAxBY,gCAAU"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/observable/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC;AAErC,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,CAAC,CAAC;IACT,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC;CAC3C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/observable/types.ts"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useObserver.d.ts","sourceRoot":"","sources":["../../../src/observable/useObserver.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,
|
|
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,CAYhF"}
|
|
@@ -47,7 +47,7 @@ Obsidian can inject dependencies into components, hooks, and classes.
|
|
|
47
47
|
<Tabs>
|
|
48
48
|
<TabItem value="functionalComponent" label="Functional component injection" default>
|
|
49
49
|
|
|
50
|
-
Injecting React functional components essentially revolves around two things: declaring the required dependencies in the
|
|
50
|
+
Injecting React functional components essentially revolves around two things: declaring the required dependencies in the components's props and exporting an injected component using the `injectComponent` function.
|
|
51
51
|
|
|
52
52
|
```ts title="MyComponent.tsx"
|
|
53
53
|
import {DependenciesOf, injectComponent} from 'react-obsidian';
|
|
@@ -115,15 +115,6 @@ class HomeGraph extends ObjectGraph<HomeScreenProps> {
|
|
|
115
115
|
}
|
|
116
116
|
```
|
|
117
117
|
|
|
118
|
-
## Typed dependencies
|
|
119
|
-
The `DependenciesOf` utility type creates a type of the dependencies provided by a graph. This type can be used to type the dependencies of hooks or props required by components. This utility type takes two arguments: the graph and a union of the keys of the dependencies we want to inject.
|
|
120
|
-
|
|
121
|
-
In this example we create a type called `ApplicationDependencies` which contains the dependencies `httpClient` and `databaseService` from the `ApplicationGraph` graph.
|
|
122
|
-
|
|
123
|
-
```ts
|
|
124
|
-
type ApplicationDependencies = DependenciesOf<ApplicationGraph, 'httpClient' | 'databaseService'>; // {httpClient: httpClient, databaseService: DatabaseService}
|
|
125
|
-
```
|
|
126
|
-
|
|
127
118
|
## Graph composition
|
|
128
119
|
Graph composition is a powerful feature that allows you to create complex dependency graphs by combining smaller graphs. Composing graphs is useful when you want to reuse a graph in multiple places. For example, you might have a singleton graph that provides application-level dependencies. You might also have a lifecycle-bound graph that provides dependencies for a specific UI flow. You can compose these graphs together so that the lifecycle-bound graph can also inject the dependencies provided by the singleton graph.
|
|
129
120
|
|
|
@@ -144,3 +135,20 @@ export class LoginGraph extends ObjectGraph {
|
|
|
144
135
|
}
|
|
145
136
|
}
|
|
146
137
|
```
|
|
138
|
+
|
|
139
|
+
## Typed dependencies
|
|
140
|
+
The `DependenciesOf` utility type creates a new type consisting the dependencies provided by a graph. This type can be used to type the dependencies of hooks or props required by components. This utility type takes two arguments: the graph and a union of the keys of the dependencies we want to inject.
|
|
141
|
+
|
|
142
|
+
In this example we create a type called `ApplicationDependencies` which contains the dependencies `httpClient` and `databaseService` from the `ApplicationGraph` graph.
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
// {httpClient: HttpClient, databaseService: DatabaseService}
|
|
146
|
+
type Dependencies = DependenciesOf<ApplicationGraph, 'httpClient' | 'databaseService'>;
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
In cases where a graph has subgraphs, we can pass an array of graphs to the `DependenciesOf` utility type to create a type that contains the dependencies from all the graphs. Using the `LoginGraph` from the example above, we create a type that contains dependencies from both the `LoginGraph` and the `ApplicationGraph`:
|
|
150
|
+
|
|
151
|
+
```ts
|
|
152
|
+
// {httpClient: HttpClient, loginService: LoginService}
|
|
153
|
+
type Dependencies = DependenciesOf<[LoginGraph, ApplicationGraph], 'httpClient' | 'loginService'>;
|
|
154
|
+
```
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -20,6 +20,8 @@ export { injectComponent } from './injectors/components/InjectComponent';
|
|
|
20
20
|
export { injectHook, injectHookWithArguments } from './injectors/hooks/InjectHook';
|
|
21
21
|
|
|
22
22
|
export { useObserver } from './observable/useObserver';
|
|
23
|
-
export { Observable
|
|
23
|
+
export { Observable } from './observable/Observable';
|
|
24
|
+
export { MediatorObservable } from './observable/MediatorObservable';
|
|
25
|
+
export { OnNext, Unsubscribe } from './observable/types';
|
|
24
26
|
|
|
25
27
|
export { testKit } from '../testkit';
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Observable } from './Observable';
|
|
2
|
+
import { OnNext, Unsubscribe, Observable as IObservable } from './types';
|
|
3
|
+
|
|
4
|
+
type Source<T> = {
|
|
5
|
+
source: Observable<T>;
|
|
6
|
+
onNext: OnNext<T>;
|
|
7
|
+
unsubscribe?: Unsubscribe;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export class MediatorObservable<T> implements IObservable<T> {
|
|
11
|
+
private subscribers: Set<OnNext<T>> = new Set();
|
|
12
|
+
private currentValue!: T;
|
|
13
|
+
private sources: Source<any>[] = [];
|
|
14
|
+
|
|
15
|
+
constructor(initialValue?: T) {
|
|
16
|
+
this.currentValue = initialValue as T;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
addSource<S>(source: Observable<S>, onNext: OnNext<S>): MediatorObservable<T> {
|
|
20
|
+
this.sources.push({ source, onNext });
|
|
21
|
+
return this;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
public get value(): T {
|
|
25
|
+
return this.currentValue;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
public set value(value: T) {
|
|
29
|
+
this.currentValue = value;
|
|
30
|
+
this.subscribers.forEach((subscriber) => subscriber(value));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
subscribe(onNext: OnNext<T>): Unsubscribe {
|
|
34
|
+
if (this.subscribers.has(onNext)) {
|
|
35
|
+
throw new Error('Subscriber already subscribed');
|
|
36
|
+
}
|
|
37
|
+
this.subscribers.add(onNext);
|
|
38
|
+
|
|
39
|
+
this.subscribeToAllSources();
|
|
40
|
+
|
|
41
|
+
return () => {
|
|
42
|
+
this.subscribers.delete(onNext);
|
|
43
|
+
this.sources.forEach(({ unsubscribe }) => unsubscribe?.());
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
private subscribeToAllSources() {
|
|
48
|
+
this.sources.forEach(({ source, onNext }, index) => {
|
|
49
|
+
const unsubscribe = source.subscribe((value) => {
|
|
50
|
+
onNext(value);
|
|
51
|
+
});
|
|
52
|
+
this.sources[index].unsubscribe = unsubscribe;
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
export type OnNext<T> = (value: T) => void;
|
|
3
|
-
type Unsubscribe = () => void;
|
|
1
|
+
import { Observable as IObservable, OnNext, Unsubscribe } from './types';
|
|
4
2
|
|
|
5
|
-
export class Observable<T> {
|
|
3
|
+
export class Observable<T> implements IObservable<T> {
|
|
6
4
|
private subscribers: Set<OnNext<T>> = new Set();
|
|
5
|
+
private currentValue: T | undefined;
|
|
7
6
|
|
|
8
|
-
constructor(
|
|
7
|
+
constructor(initialValue?: T) {
|
|
8
|
+
this.currentValue = initialValue;
|
|
9
|
+
}
|
|
9
10
|
|
|
10
11
|
public get value(): T {
|
|
11
|
-
return this.
|
|
12
|
+
return this.currentValue as T;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
public set value(value: T) {
|
|
15
|
-
this.
|
|
16
|
+
this.currentValue = value;
|
|
16
17
|
this.subscribers.forEach((subscriber) => subscriber(value));
|
|
17
18
|
}
|
|
18
19
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable no-param-reassign */
|
|
2
2
|
import { useCallback, useEffect, useState } from 'react';
|
|
3
|
-
import { Observable } from './
|
|
3
|
+
import { Observable } from './types';
|
|
4
4
|
|
|
5
5
|
export function useObserver<T>(observable: Observable<T>): [T, (next: T) => void] {
|
|
6
6
|
const [value, setValue] = useState(observable.value);
|