react-obsidian 0.0.31 → 0.0.33
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/.eslintrc.json +3 -0
- package/README.md +21 -326
- package/dist/src/graph/registry/GraphResolveChain.d.ts +1 -1
- package/dist/src/graph/registry/GraphResolveChain.d.ts.map +1 -1
- package/dist/src/index.d.ts +3 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/index.js +7 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/injectors/hooks/HookInjector.js +1 -1
- package/dist/src/injectors/hooks/HookInjector.js.map +1 -1
- package/dist/src/observable/Observable.d.ts +12 -0
- package/dist/src/observable/Observable.d.ts.map +1 -0
- package/dist/src/observable/Observable.js +31 -0
- package/dist/src/observable/Observable.js.map +1 -0
- package/dist/src/observable/useObserver.d.ts +3 -0
- package/dist/src/observable/useObserver.d.ts.map +1 -0
- package/dist/src/observable/useObserver.js +18 -0
- package/dist/src/observable/useObserver.js.map +1 -0
- package/dist/src/types/index.d.ts +8 -8
- package/dist/src/types/index.d.ts.map +1 -1
- package/dist/src/utils/React.d.ts +1 -1
- package/dist/src/utils/React.d.ts.map +1 -1
- package/dist/test/fixtures/LifecycleBoundGraph.d.ts +7 -2
- package/dist/test/fixtures/LifecycleBoundGraph.d.ts.map +1 -1
- package/dist/test/fixtures/LifecycleBoundGraph.js +15 -3
- package/dist/test/fixtures/LifecycleBoundGraph.js.map +1 -1
- package/dist/test/fixtures/MainGraph.d.ts +1 -1
- package/dist/test/fixtures/MainGraph.d.ts.map +1 -1
- package/dist/transformers/babel-plugin-obsidian/helpers/index.d.ts +1 -1
- package/dist/transformers/babel-plugin-obsidian/helpers/index.d.ts.map +1 -1
- package/documentation/README.md +41 -0
- package/documentation/babel.config.js +3 -0
- package/documentation/blog/2019-05-28-first-blog-post.md +12 -0
- package/documentation/blog/2019-05-29-long-blog-post.md +44 -0
- package/documentation/blog/2021-08-01-mdx-blog-post.mdx +20 -0
- package/documentation/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg +0 -0
- package/documentation/blog/2021-08-26-welcome/index.md +25 -0
- package/documentation/blog/authors.yml +17 -0
- package/documentation/docs/documentation/documentation.mdx +191 -0
- package/documentation/docs/documentation/installation.mdx +65 -0
- package/documentation/docs/documentation/meta/clearingGraphs.mdx +13 -0
- package/documentation/docs/documentation/meta/middlewares.mdx +27 -0
- package/documentation/docs/documentation/usage/ClassComponents.mdx +18 -0
- package/documentation/docs/documentation/usage/Classes.mdx +41 -0
- package/documentation/docs/documentation/usage/FunctionalComponents.mdx +57 -0
- package/documentation/docs/documentation/usage/Graphs.mdx +146 -0
- package/documentation/docs/documentation/usage/Hooks.mdx +85 -0
- package/documentation/docs/documentation/usage/ServiceLocator.mdx +38 -0
- package/documentation/docs/documentation/usage/_category_.json +9 -0
- package/documentation/docs/guides/configurableApplications.mdx +205 -0
- package/documentation/docs/guides/mockDependencies.mdx +141 -0
- package/documentation/docusaurus.config.js +146 -0
- package/documentation/package-lock.json +21290 -0
- package/documentation/package.json +46 -0
- package/documentation/sidebars.js +34 -0
- package/documentation/src/components/HomepageFeatures/index.tsx +71 -0
- package/documentation/src/components/HomepageFeatures/styles.module.css +11 -0
- package/documentation/src/css/custom.css +30 -0
- package/documentation/src/pages/index.module.css +23 -0
- package/documentation/src/pages/index.tsx +41 -0
- package/documentation/static/.nojekyll +0 -0
- package/documentation/static/img/api.svg +101 -0
- package/documentation/static/img/favicon.ico +0 -0
- package/documentation/static/img/logo.svg +265 -0
- package/documentation/static/img/obsidian.png +0 -0
- package/documentation/static/img/prototype.svg +1 -0
- package/documentation/static/img/stethoscope.svg +37 -0
- package/documentation/tsconfig.json +7 -0
- package/package.json +4 -4
- package/src/index.ts +4 -0
- package/src/injectors/hooks/HookInjector.ts +1 -1
- package/src/observable/Observable.ts +26 -0
- package/src/observable/useObserver.ts +17 -0
package/.eslintrc.json
CHANGED
package/README.md
CHANGED
|
@@ -5,56 +5,24 @@
|
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
7
|
# React Obsidian
|
|
8
|
-
> Dependency injection framework for React and React Native applications
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
<br>⚠️ <b>Until we hit v1, Obsidian is not semver-compliant and all APIs are subject to change.</b></h5>
|
|
12
|
-
|
|
13
|
-
## Introduction
|
|
14
|
-
React Obsidian is a dependency injection framework for React and React Native applications. It allows you to inject dependencies effortlessly into hooks, components or classes. Separating the construction and consumption of dependencies is crucial to maintaining a readable and testable codebase.
|
|
15
|
-
|
|
16
|
-
React Obsidian is guided by the principles of the Dependency Injection pattern, but does not strictly follow them. We allowed ourselves a degree of freedom when designing the library in order to reduce boilerplate code and library footprint.
|
|
9
|
+
React Obsidian is a dependency injection framework for React and React Native applications. It allows you to inject dependencies into hooks, components, and classes. Separating the construction and consumption of dependencies is crucial to maintaining a readable and testable codebase.
|
|
17
10
|
|
|
18
11
|
> 📖 Read more about Dependency Injection and Obsidian in [Breaking complexity with Dependency Injection: Introducing Obsidian](https://guyca.medium.com/breaking-complexity-with-dependency-injection-introducing-obsidian-cd452802f076) on Medium.
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
* [Installation](https://github.com/wix-incubator/obsidian#installation)
|
|
22
|
-
* [Prerequisites](https://github.com/wix-incubator/obsidian#prerequisites)
|
|
23
|
-
* [Usage](https://github.com/wix-incubator/obsidian#usage)
|
|
24
|
-
* [Declare an object graph](https://github.com/wix-incubator/obsidian#declare-an-object-graph)
|
|
25
|
-
* [Component injection](https://github.com/wix-incubator/obsidian#component-injection)
|
|
26
|
-
* [Hooks injection](https://github.com/wix-incubator/obsidian#hooks-injection)
|
|
27
|
-
* [Class injection](https://github.com/wix-incubator/obsidian#class-injection)
|
|
28
|
-
* [Injecting properties](https://github.com/wix-incubator/obsidian#injecting-properties)
|
|
29
|
-
* [Injecting constructor arguments](https://github.com/wix-incubator/obsidian#injecting-constructor-arguments)
|
|
30
|
-
* [Obtaining dependencies from a graph](https://github.com/wix-incubator/obsidian#obtaining-dependencies-from-a-graph)
|
|
31
|
-
* [Advance usage](https://github.com/wix-incubator/obsidian#advance-usage)
|
|
32
|
-
* [Accessing props in graphs](https://github.com/wix-incubator/obsidian#accessing-props-in-graphs)
|
|
33
|
-
* [Singleton graphs and providers](https://github.com/wix-incubator/obsidian#singleton-graphs-and-providers)
|
|
34
|
-
* [React lifecycle-bound graphs](https://github.com/wix-incubator/obsidian#react-lifecycle-bound-graphs)
|
|
35
|
-
* [Lazy property injection](https://github.com/wix-incubator/obsidian#lazy-property-injection)
|
|
36
|
-
* [Typing graphs](https://github.com/wix-incubator/obsidian#typing-graphs)
|
|
37
|
-
* [Graph middleware](https://github.com/wix-incubator/obsidian#graph-middleware)
|
|
38
|
-
* [Clearing graphs](https://github.com/wix-incubator/obsidian#clearing-graphs)
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
## Installation
|
|
45
12
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
13
|
+
* [Documentation](https://wix-incubator.github.io/obsidian/docs/documentation)
|
|
14
|
+
* [Getting Started](https://wix-incubator.github.io/obsidian/docs/documentation/#the-2-steps-tutorial-for-injecting-dependencies-with-obsidian)
|
|
15
|
+
* [Installation](https://wix-incubator.github.io/obsidian/docs/documentation/installation)
|
|
16
|
+
* [Guides](https://wix-incubator.github.io/obsidian/docs/guides/mockDependencies)
|
|
17
|
+
* [Chat on Discord](https://discord.gg/2g5vhGQN)
|
|
51
18
|
|
|
52
|
-
##
|
|
19
|
+
## Example - Injecting a hook
|
|
20
|
+
Obsidian supports injecting hooks, components and classes. The example below shows how to inject a hook.
|
|
53
21
|
|
|
54
|
-
### Declare an object graph
|
|
22
|
+
### Step 1: Declare an object graph
|
|
55
23
|
Before we can inject dependencies into hooks, components and classes, we first need to declare our dependencies. Dependencies are declared in classes called "Graphs" where the relationships between the dependencies are outlined.
|
|
56
24
|
|
|
57
|
-
In the `ApplicationGraph`
|
|
25
|
+
In the `ApplicationGraph` below, we declare two dependencies:
|
|
58
26
|
1. `httpClient`
|
|
59
27
|
2. `biLogger`
|
|
60
28
|
|
|
@@ -77,36 +45,17 @@ class ApplicationGraph extends ObjectGraph {
|
|
|
77
45
|
}
|
|
78
46
|
```
|
|
79
47
|
|
|
80
|
-
###
|
|
81
|
-
```typescript
|
|
82
|
-
import {injectComponent} from 'react-obsidian';
|
|
83
|
-
|
|
84
|
-
interface InjectedComponentProps {
|
|
85
|
-
biLogger: BiLogger;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
const InjectedComponent = ({ biLogger }: InjectedComponentProps) => (
|
|
89
|
-
<>
|
|
90
|
-
<button onclick={biLogger.logButtonClick}>Click Me</button>
|
|
91
|
-
</>
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
export default injectComponent(InjectedComponent, ApplicationGraph);
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### Hooks injection
|
|
48
|
+
### Step 2: Inject a dependency
|
|
98
49
|
|
|
99
50
|
```typescript
|
|
100
|
-
interface
|
|
101
|
-
biLogger: BiLogger;
|
|
102
|
-
}
|
|
51
|
+
interface Injected = DependenciesOf<ApplicationGraph, 'biLogger'>;
|
|
103
52
|
|
|
104
53
|
interface UseButtonPress {
|
|
105
54
|
usePress: () => void;
|
|
106
55
|
}
|
|
107
56
|
|
|
108
|
-
//
|
|
109
|
-
const useButtonClick = ({ biLogger }:
|
|
57
|
+
// We must use destructuring for Obsidian to be able to inject the dependencies
|
|
58
|
+
const useButtonClick = ({ biLogger }: Injected): UseButtonPress => {
|
|
110
59
|
const onClick = useCallback(() => {
|
|
111
60
|
biLogger.logButtonClick();
|
|
112
61
|
}, [biLogger]);
|
|
@@ -114,10 +63,14 @@ const useButtonClick = ({ biLogger }: UseButtonPressProps): UseButtonPress => {
|
|
|
114
63
|
return { onClick };
|
|
115
64
|
};
|
|
116
65
|
|
|
117
|
-
//
|
|
66
|
+
// Export the injected hook
|
|
118
67
|
export default injectHook(useButtonClick, ApplicationGraph);
|
|
68
|
+
```
|
|
119
69
|
|
|
120
|
-
|
|
70
|
+
### Step 3: Use the injected hook
|
|
71
|
+
Now that we exported the injected hook, we can use it in a component without needing to provide its dependencies manually.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
121
74
|
const Component = () => (
|
|
122
75
|
// No need to specify dependencies as they are injected automatically
|
|
123
76
|
const { onClick } = useButtonClick();
|
|
@@ -125,262 +78,4 @@ const Component = () => (
|
|
|
125
78
|
<button onclick={onClick}>Click Me</button>
|
|
126
79
|
</>
|
|
127
80
|
);
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
### Class injection
|
|
131
|
-
Obsidian supports injecting both class properties and constructor arguments.
|
|
132
|
-
|
|
133
|
-
#### Injecting properties
|
|
134
|
-
```typescript
|
|
135
|
-
@Injectable(ApplicationGraph)
|
|
136
|
-
class ButtonController {
|
|
137
|
-
@Inject() biLogger!: BiLogger;
|
|
138
|
-
|
|
139
|
-
onClick() {
|
|
140
|
-
this.biLogger.logButtonClick();
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
#### Injecting constructor arguments
|
|
146
|
-
```typescript
|
|
147
|
-
@Injectable(ApplicationGraph)
|
|
148
|
-
class Presenter {
|
|
149
|
-
constructor(@Inject() public biLogger: BiLogger) { }
|
|
150
|
-
}
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
The TypeScript compiler won't let you construct the class without providing the `biLogger` argument as it's not optional.
|
|
154
|
-
If you want to be able to instantiate the class yourself without providing arguments, you'll also need to declare a constructor overload that receives optional arguments.
|
|
155
|
-
|
|
156
|
-
```typescript
|
|
157
|
-
@Injectable(ApplicationGraph)
|
|
158
|
-
class Presenter {
|
|
159
|
-
constructor(biLogger?: BiLogger);
|
|
160
|
-
constructor(@Inject() public biLogger: BiLogger) { }
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
// Now you can instantiate the class without providing it's constructor dependencies
|
|
164
|
-
const presenter = new Presenter();
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
### Obtaining dependencies from a graph
|
|
168
|
-
Dependencies can also be obtained by accessing the graph that provides them.
|
|
169
|
-
|
|
170
|
-
```typescript
|
|
171
|
-
Obsidian.obtain(ApplicationGraph).biLogger();
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
> Note: While the function that provides the `biLogger` accepts an argument of type `HttpClient`, we don't provide dependencies ourselves when obtaining dependencies directly from the graph, as they are resolved by Obsidian.
|
|
175
|
-
|
|
176
|
-
## Advanced usage
|
|
177
|
-
### Accessing props in graphs
|
|
178
|
-
If a graph is instantiated in order to inject a component, then it will receive the component's props in the constructor.
|
|
179
|
-
```typescript
|
|
180
|
-
@Graph()
|
|
181
|
-
class ProfileScreenGraph extends ObjectGraph<ProfileScreenProps> {
|
|
182
|
-
private profile: UserProfile;
|
|
183
|
-
|
|
184
|
-
constructor(props: ProfileScreenProps) {
|
|
185
|
-
super(props);
|
|
186
|
-
this.profile = props.profile;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
@Provides()
|
|
190
|
-
profileFetcher(): ProfileFetcher {
|
|
191
|
-
return new ProfileFetcher(this.profile);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
### Singleton graphs and providers
|
|
197
|
-
Graphs and Providers can be marked as singletons with the `@Singleton` decorator. If a graph is marked as a singleton, when an instance of such graph is requested, Obsidian will reuse the existing instance. Graphs that are not annotated with the `@Singleton` decorator will be instantiated each time they are needed for injection.
|
|
198
|
-
|
|
199
|
-
Singleton providers are shared between all instances of a graph.
|
|
200
|
-
|
|
201
|
-
```typescript
|
|
202
|
-
@Graph()
|
|
203
|
-
class PushedScreenGraph { // A new PushedScreenGraph instance is created each time the corresponding screen is created
|
|
204
|
-
@Provides()
|
|
205
|
-
presenter(): PushedScreenPresenter {
|
|
206
|
-
return new PushedScreenPresenter(); // Created each time PushedGraph is created
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
@Provides() @Singleton()
|
|
210
|
-
someUseCase(): SomeUseCase {
|
|
211
|
-
return new SomeUseCase(); // Created once for all PushedGraph instances
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
In this example we declared a singleton graph. This means that all of its providers are also singleton.
|
|
217
|
-
```typescript
|
|
218
|
-
@Singleton() @Graph()
|
|
219
|
-
class ApplicationGraph {
|
|
220
|
-
@Provides()
|
|
221
|
-
biLogger(): BiLogger {
|
|
222
|
-
return new BiLogger() // Created once because the graph is a singleton
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
### React lifecycle-bound graphs
|
|
228
|
-
Graphs can be linked to the lifecycle of React components (and hooks) that require them. `@LifecycleBound` graphs are effectively singletons within the lifespan of the React components and hooks that were injected by the graph. Once all of the React component and hooks that were injected by the `@LifecycleBound` graph are unmounted - the graph is deallocated.
|
|
229
|
-
|
|
230
|
-
This is mostly useful when a graph is shared between multiple screens that either share the same root screen or are all part of the same flow.
|
|
231
|
-
|
|
232
|
-
```typescript
|
|
233
|
-
@LifecycleBound() @Graph()
|
|
234
|
-
class HomeGraph {
|
|
235
|
-
}
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
### Lazy property injection
|
|
239
|
-
Class properties can be injected lazily by using the `@LazyInject()` decorator. This is useful when the injection should be done in a lifecycle method instead of in the class constructor.
|
|
240
|
-
|
|
241
|
-
```ts
|
|
242
|
-
@Injectable(ApplicationGraph)
|
|
243
|
-
class Foo {
|
|
244
|
-
@LazyInject() private bar!: Bar;
|
|
245
|
-
|
|
246
|
-
constructor() {
|
|
247
|
-
console.log(bar) // undefined
|
|
248
|
-
Obsidian.inject(this);
|
|
249
|
-
console.log(bar) // Bar {}
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
In the example above, the dependencies are resolved from the graph declared in the `@Injectable()` decorator. Declaring the graph in advance isn't always desirable. When using the `@LazyInject()` decorator, we can omit the `@Injectable()` decorator and specify the graph to inject from in the call to ``Obsidian.inject()`.
|
|
255
|
-
|
|
256
|
-
```ts
|
|
257
|
-
class Foo {
|
|
258
|
-
@LazyInject() private bar!: Bar;
|
|
259
|
-
|
|
260
|
-
constructor() {
|
|
261
|
-
console.log(bar) // undefined
|
|
262
|
-
Obsidian.inject(this, () => new ApplicationGraph());
|
|
263
|
-
console.log(bar) // Bar {}
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
### Typing graphs
|
|
269
|
-
Obsidian exposes a utility `type` that represents the dependencies provided by a graph. This type is useful when typing props passed to components or hooks. It's especially useful when you need to differentiate between "own" props and injected props.
|
|
270
|
-
|
|
271
|
-
```ts
|
|
272
|
-
type InjectedDependencies = DependenciesOf<ApplicationGraph> // { biLogger: BiLogger, httpClient: HttpClient }
|
|
273
|
-
|
|
274
|
-
// These are props our hook requires from the calling scope
|
|
275
|
-
interface OwnProps {
|
|
276
|
-
someArgs: string
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
// This interface represents the object returned from the hook
|
|
280
|
-
interface Result {
|
|
281
|
-
//
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
// Our hook requires two dependencies:
|
|
285
|
-
// 1. someArg - passed down from the calling scope
|
|
286
|
-
// 2. biLogger - injected from the ApplicationGraph
|
|
287
|
-
const hook = ({someArg, biLogger}: OwnProps & InjectedDependencies): Result => {
|
|
288
|
-
// ...
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
// When invoking the hook, it must be provided with `someArg` since OwnProps aren't optional
|
|
292
|
-
const injectedHook: (props: OwnProps & Partial<InjectedDependencies>) => Result = injectHookWithArguments<InjectedDependencies, OwnProps, Result>(hook, MainApplication);
|
|
293
|
-
```
|
|
294
|
-
|
|
295
|
-
### Graph middleware
|
|
296
|
-
When working on large scale applications, we often need to to hook into various low level operations. Obsidian lets you hook into the graph creation process by adding middleware(s).
|
|
297
|
-
|
|
298
|
-
Those middleware are invoked in LIFO order and can be used for various purposes:
|
|
299
|
-
1. Create a graph yourself instead of letting Obsidian to instantiate it.
|
|
300
|
-
2. Add logging to graph creation.
|
|
301
|
-
3. Handle errors when Obsidian instantiates graphs.
|
|
302
|
-
4. Replace graphs with mocks for testing purposes.
|
|
303
|
-
|
|
304
|
-
Middleware follow the Chain of Responsibility pattern and therefore must always return a graph, either by creating one explicitly or by returning the instance created by another member in the resolve chain.
|
|
305
|
-
|
|
306
|
-
#### Adding a logging middleware
|
|
307
|
-
The following example demonstrates how to add a middleware that's used for logging purposes.
|
|
308
|
-
|
|
309
|
-
```typescript
|
|
310
|
-
const loggingMiddleware = new class extends GraphMiddleware {
|
|
311
|
-
resolve<Props>(resolveChain: GraphResolveChain, Graph: Constructable<T>, props?: Props) {
|
|
312
|
-
const t1 = Date.now();
|
|
313
|
-
const graph = resolveChain.proceed(Graph, props);
|
|
314
|
-
const t2 = Date.now();
|
|
315
|
-
console.log(`Graph created in ${t2 - t1} milliseconds`);
|
|
316
|
-
return graph;
|
|
317
|
-
}
|
|
318
|
-
}();
|
|
319
|
-
Obsidian.addGraphMiddleware(loggingMiddleware);
|
|
320
|
-
```
|
|
321
|
-
|
|
322
|
-
### Clearing graphs
|
|
323
|
-
Graphs can be cleared by invoking `Obsidian.clearGraphs()`. This is useful in tests or when you need to reset the system to it's original state, for example when a user logs out.
|
|
324
|
-
|
|
325
|
-
#### Clearing graphs automatically during execution of Jest tests
|
|
326
|
-
Create a `jest.setup.js` file and add it to [setupFilesAfterEnv](https://jestjs.io/docs/configuration#setupfilesafterenv-array). Then, import the following file when ensures graphs are cleared before each test.
|
|
327
|
-
```javascript
|
|
328
|
-
import 'react-obsidian/clearGraphs';
|
|
329
|
-
```
|
|
330
|
-
|
|
331
|
-
## Prerequisites
|
|
332
|
-
Obsidian is highly opinionated and is developed with a specific environment in mind. Therefore, it has a few prerequisites for projects that want to integrate it.
|
|
333
|
-
|
|
334
|
-
### TypeScript
|
|
335
|
-
Obsidian targets TypeScript projects. There are no plans to officially support pure JS environments.
|
|
336
|
-
|
|
337
|
-
### Reflect-metadata
|
|
338
|
-
Install and enable the reflect-metadata polyfill.
|
|
339
|
-
* `npm install reflect-metadata`
|
|
340
|
-
* `import 'reflect-metadata';` - this needs to be done once, typically in your application's entry point (index.ts).
|
|
341
|
-
|
|
342
|
-
### Enable experimental decorators
|
|
343
|
-
Obsidian uses the Decorators feature whose proposal is still stage 2.
|
|
344
|
-
|
|
345
|
-
Add the following options to your `tsconfig.json` file.
|
|
346
|
-
```json
|
|
347
|
-
{
|
|
348
|
-
"compilerOptions": {
|
|
349
|
-
"types": ["reflect-metadata", "jest"],
|
|
350
|
-
"experimentalDecorators": true,
|
|
351
|
-
"emitDecoratorMetadata": true
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
```
|
|
355
|
-
|
|
356
|
-
### Babel
|
|
357
|
-
Obsidian relies on reflection to resolve dependencies. Production code is typically mangled to reduce bundle size. This means that some names Obsidian expects are changed during the mangling process. To work around this, Obsidian persists the names of methods annotated with the `@Provides` decorator with a Babel transformer.
|
|
358
|
-
|
|
359
|
-
### Add Obsidian's babel transformer
|
|
360
|
-
Add the transformer to the list of plugins in your `.babel` file.
|
|
361
|
-
```js
|
|
362
|
-
module.exports = {
|
|
363
|
-
presets: [
|
|
364
|
-
'module:metro-react-native-babel-preset',
|
|
365
|
-
['@babel/preset-typescript', {'onlyRemoveTypeImports': true}]
|
|
366
|
-
],
|
|
367
|
-
plugins: [
|
|
368
|
-
react-obsidian/dist/transformers/babel-plugin-obsidian,
|
|
369
|
-
['@babel/plugin-proposal-decorators', {legacy: true}],
|
|
370
|
-
['@babel/plugin-proposal-class-properties', { legacy: true }],
|
|
371
|
-
'babel-plugin-parameter-decorator'
|
|
372
|
-
]
|
|
373
|
-
};
|
|
374
|
-
```
|
|
375
|
-
|
|
376
|
-
### Jest
|
|
377
|
-
react-obsidian publishes untranspiled code. If you're using Jest, you'll need to add react-obsidian to [transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring) so it's transpiled before tests are executed.
|
|
378
|
-
|
|
379
|
-
### Peer Dependencies
|
|
380
|
-
Obsidian has a peer dependency on `lodash`.
|
|
381
|
-
|
|
382
|
-
## Related
|
|
383
|
-
|
|
384
|
-
* [InversifyJS](https://github.com/inversify/InversifyJS)
|
|
385
|
-
* [tsyringe](https://github.com/microsoft/tsyringe)
|
|
386
|
-
* [Dagger](https://github.com/google/dagger)
|
|
81
|
+
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ObjectGraph } from '../ObjectGraph';
|
|
2
2
|
import { ResolveChain } from './ResolveChain';
|
|
3
|
-
export
|
|
3
|
+
export type GraphResolveChain = ResolveChain<ObjectGraph>;
|
|
4
4
|
//# sourceMappingURL=GraphResolveChain.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GraphResolveChain.d.ts","sourceRoot":"","sources":["../../../../src/graph/registry/GraphResolveChain.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,
|
|
1
|
+
{"version":3,"file":"GraphResolveChain.d.ts","sourceRoot":"","sources":["../../../../src/graph/registry/GraphResolveChain.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC"}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -8,10 +8,13 @@ export { Provides } from './decorators/provides/Provides';
|
|
|
8
8
|
export { Injectable } from './decorators/inject/Injectable';
|
|
9
9
|
export { Inject } from './decorators/inject/Inject';
|
|
10
10
|
export { LazyInject } from './decorators/inject/LazyInject';
|
|
11
|
+
export { LifecycleBound } from './decorators/LifecycleBound';
|
|
11
12
|
export { GraphMiddleware } from './graph/registry/GraphMiddleware';
|
|
12
13
|
export { GraphResolveChain as ResolveChain } from './graph/registry/GraphResolveChain';
|
|
13
14
|
export declare const Obsidian: _Obsidian;
|
|
14
15
|
export { injectComponent } from './injectors/components/InjectComponent';
|
|
15
16
|
export { injectHook, injectHookWithArguments } from './injectors/hooks/InjectHook';
|
|
17
|
+
export { useObserver } from './observable/useObserver';
|
|
18
|
+
export { Observable, OnNext } from './observable/Observable';
|
|
16
19
|
export { testKit } from '../testkit';
|
|
17
20
|
//# 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,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,OAAO,EAAE,MAAM,YAAY,CAAC"}
|
|
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,yBAAyB,CAAC;AAE7D,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.injectHookWithArguments = exports.injectHook = exports.injectComponent = exports.Obsidian = exports.GraphMiddleware = exports.LazyInject = exports.Inject = exports.Injectable = exports.Provides = exports.ObjectGraph = exports.Singleton = exports.Graph = void 0;
|
|
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;
|
|
21
21
|
var Obsidian_1 = __importDefault(require("./Obsidian"));
|
|
22
22
|
__exportStar(require("./types"), exports);
|
|
23
23
|
var Graph_1 = require("./decorators/Graph");
|
|
@@ -34,6 +34,8 @@ var Inject_1 = require("./decorators/inject/Inject");
|
|
|
34
34
|
Object.defineProperty(exports, "Inject", { enumerable: true, get: function () { return Inject_1.Inject; } });
|
|
35
35
|
var LazyInject_1 = require("./decorators/inject/LazyInject");
|
|
36
36
|
Object.defineProperty(exports, "LazyInject", { enumerable: true, get: function () { return LazyInject_1.LazyInject; } });
|
|
37
|
+
var LifecycleBound_1 = require("./decorators/LifecycleBound");
|
|
38
|
+
Object.defineProperty(exports, "LifecycleBound", { enumerable: true, get: function () { return LifecycleBound_1.LifecycleBound; } });
|
|
37
39
|
var GraphMiddleware_1 = require("./graph/registry/GraphMiddleware");
|
|
38
40
|
Object.defineProperty(exports, "GraphMiddleware", { enumerable: true, get: function () { return GraphMiddleware_1.GraphMiddleware; } });
|
|
39
41
|
exports.Obsidian = new Obsidian_1.default();
|
|
@@ -42,6 +44,10 @@ Object.defineProperty(exports, "injectComponent", { enumerable: true, get: funct
|
|
|
42
44
|
var InjectHook_1 = require("./injectors/hooks/InjectHook");
|
|
43
45
|
Object.defineProperty(exports, "injectHook", { enumerable: true, get: function () { return InjectHook_1.injectHook; } });
|
|
44
46
|
Object.defineProperty(exports, "injectHookWithArguments", { enumerable: true, get: function () { return InjectHook_1.injectHookWithArguments; } });
|
|
47
|
+
var useObserver_1 = require("./observable/useObserver");
|
|
48
|
+
Object.defineProperty(exports, "useObserver", { enumerable: true, get: function () { return useObserver_1.useObserver; } });
|
|
49
|
+
var Observable_1 = require("./observable/Observable");
|
|
50
|
+
Object.defineProperty(exports, "Observable", { enumerable: true, get: function () { return Observable_1.Observable; } });
|
|
45
51
|
var testkit_1 = require("../testkit");
|
|
46
52
|
Object.defineProperty(exports, "testKit", { enumerable: true, get: function () { return testkit_1.testKit; } });
|
|
47
53
|
//# 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,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,sCAAqC;AAA5B,kGAAA,OAAO,OAAA"}
|
|
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,sDAA6D;AAApD,wGAAA,UAAU,OAAA;AAEnB,sCAAqC;AAA5B,kGAAA,OAAO,OAAA"}
|
|
@@ -9,7 +9,7 @@ var HookInjector = /** @class */ (function () {
|
|
|
9
9
|
}
|
|
10
10
|
HookInjector.prototype.inject = function (hook, Graph) {
|
|
11
11
|
return function (args) {
|
|
12
|
-
var graph = (0, useGraph_1.default)(Graph);
|
|
12
|
+
var graph = (0, useGraph_1.default)(Graph, args);
|
|
13
13
|
return hook(new Proxy(args !== null && args !== void 0 ? args : {}, new Injector(graph)));
|
|
14
14
|
};
|
|
15
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HookInjector.js","sourceRoot":"","sources":["../../../../src/injectors/hooks/HookInjector.ts"],"names":[],"mappings":";;;;;AAEA,oEAA8C;AAG9C;IAAA;IAUA,CAAC;IATC,6BAAM,GAAN,UACE,IAA4B,EAC5B,KAAiC;QAEjC,OAAO,UAAC,IAAoB;YAC1B,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"HookInjector.js","sourceRoot":"","sources":["../../../../src/injectors/hooks/HookInjector.ts"],"names":[],"mappings":";;;;;AAEA,oEAA8C;AAG9C;IAAA;IAUA,CAAC;IATC,6BAAM,GAAN,UACE,IAA4B,EAC5B,KAAiC;QAEjC,OAAO,UAAC,IAAoB;YAC1B,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACpC,OAAO,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,EAAE,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC;IACH,mBAAC;AAAD,CAAC,AAVD,IAUC;;AAED;IACE,kBAAoB,KAAY;QAAZ,UAAK,GAAL,KAAK,CAAO;IAAG,CAAC;IAEpC,sBAAG,GAAH,UAAI,GAAQ,EAAE,QAAgB,EAAE,QAAa;QAC3C,OAAO,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACnF,CAAC;IACH,eAAC;AAAD,CAAC,AAND,IAMC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type OnNext<T> = (value: T) => void;
|
|
2
|
+
type Unsubscribe = () => void;
|
|
3
|
+
export declare class Observable<T> {
|
|
4
|
+
private _value;
|
|
5
|
+
private subscribers;
|
|
6
|
+
constructor(_value: T);
|
|
7
|
+
get value(): T;
|
|
8
|
+
set value(value: T);
|
|
9
|
+
subscribe(onNext: OnNext<T>): Unsubscribe;
|
|
10
|
+
}
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=Observable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Observable.d.ts","sourceRoot":"","sources":["../../../src/observable/Observable.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAC3C,KAAK,WAAW,GAAG,MAAM,IAAI,CAAC;AAE9B,qBAAa,UAAU,CAAC,CAAC;IAGX,OAAO,CAAC,MAAM;IAF1B,OAAO,CAAC,WAAW,CAA6B;gBAE5B,MAAM,EAAE,CAAC;IAE7B,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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Observable = void 0;
|
|
4
|
+
var Observable = /** @class */ (function () {
|
|
5
|
+
function Observable(_value) {
|
|
6
|
+
this._value = _value;
|
|
7
|
+
this.subscribers = new Set();
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(Observable.prototype, "value", {
|
|
10
|
+
get: function () {
|
|
11
|
+
return this._value;
|
|
12
|
+
},
|
|
13
|
+
set: function (value) {
|
|
14
|
+
this._value = value;
|
|
15
|
+
this.subscribers.forEach(function (subscriber) { return subscriber(value); });
|
|
16
|
+
},
|
|
17
|
+
enumerable: false,
|
|
18
|
+
configurable: true
|
|
19
|
+
});
|
|
20
|
+
Observable.prototype.subscribe = function (onNext) {
|
|
21
|
+
var _this = this;
|
|
22
|
+
if (this.subscribers.has(onNext)) {
|
|
23
|
+
throw new Error('Subscriber already subscribed');
|
|
24
|
+
}
|
|
25
|
+
this.subscribers.add(onNext);
|
|
26
|
+
return function () { return _this.subscribers.delete(onNext); };
|
|
27
|
+
};
|
|
28
|
+
return Observable;
|
|
29
|
+
}());
|
|
30
|
+
exports.Observable = Observable;
|
|
31
|
+
//# sourceMappingURL=Observable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Observable.js","sourceRoot":"","sources":["../../../src/observable/Observable.ts"],"names":[],"mappings":";;;AAIA;IAGE,oBAAoB,MAAS;QAAT,WAAM,GAAN,MAAM,CAAG;QAFrB,gBAAW,GAAmB,IAAI,GAAG,EAAE,CAAC;IAEhB,CAAC;IAEjC,sBAAW,6BAAK;aAAhB;YACE,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,CAAC;aAED,UAAiB,KAAQ;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,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,AArBD,IAqBC;AArBY,gCAAU"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useObserver.d.ts","sourceRoot":"","sources":["../../../src/observable/useObserver.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,CAYhF"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useObserver = void 0;
|
|
4
|
+
/* eslint-disable no-param-reassign */
|
|
5
|
+
var react_1 = require("react");
|
|
6
|
+
function useObserver(observable) {
|
|
7
|
+
var _a = (0, react_1.useState)(observable.value), value = _a[0], setValue = _a[1];
|
|
8
|
+
var onNext = (0, react_1.useCallback)(function (next) {
|
|
9
|
+
setValue(next);
|
|
10
|
+
observable.value = value;
|
|
11
|
+
}, [observable]);
|
|
12
|
+
(0, react_1.useEffect)(function () {
|
|
13
|
+
return observable.subscribe(setValue);
|
|
14
|
+
}, [observable]);
|
|
15
|
+
return [value, onNext];
|
|
16
|
+
}
|
|
17
|
+
exports.useObserver = useObserver;
|
|
18
|
+
//# sourceMappingURL=useObserver.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useObserver.js","sourceRoot":"","sources":["../../../src/observable/useObserver.ts"],"names":[],"mappings":";;;AAAA,sCAAsC;AACtC,+BAAyD;AAGzD,SAAgB,WAAW,CAAI,UAAyB;IAChD,IAAA,KAAoB,IAAA,gBAAQ,EAAC,UAAU,CAAC,KAAK,CAAC,EAA7C,KAAK,QAAA,EAAE,QAAQ,QAA8B,CAAC;IACrD,IAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,UAAC,IAAO;QACjC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC;IAC3B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC;QACR,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;AAZD,kCAYC"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { Graph } from '../graph/Graph';
|
|
2
|
-
export
|
|
2
|
+
export type Constructable<T> = {
|
|
3
3
|
new (...args: any): T;
|
|
4
4
|
};
|
|
5
|
-
export
|
|
5
|
+
export type Constructor = {
|
|
6
6
|
new (...args: any[]): any;
|
|
7
7
|
};
|
|
8
|
-
export
|
|
8
|
+
export type ServiceLocator<Clazz> = {
|
|
9
9
|
[Key in keyof Clazz]: () => Clazz[Key] extends (...args: any[]) => infer R ? R : never;
|
|
10
10
|
};
|
|
11
|
-
export
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
export type GraphInternals = 'retrieve' | 'name' | 'scope';
|
|
12
|
+
export type DependenciesOf<G, Dependencies extends keyof DependenciesOf<G> = never> = Partial<Dependencies> extends never ? DependenciesOfInternal<G> : Pick<DependenciesOfInternal<G>, Dependencies>;
|
|
13
|
+
type DependenciesOfInternal<G> = G extends Graph ? DependenciesOf1<G> : G extends any[] ? DependenciesOfN<G> : never;
|
|
14
|
+
type DependenciesOfN<Graphs extends any[]> = Graphs extends [infer G, ...infer R] ? DependenciesOf1<G> & DependenciesOfN<R> : unknown;
|
|
15
|
+
type DependenciesOf1<Graph> = {
|
|
16
16
|
[Key in keyof Omit<Graph, GraphInternals>]: Graph[Key] extends (...args: any[]) => infer R ? R : never;
|
|
17
17
|
};
|
|
18
18
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,KAAI,GAAG,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,CAAC;AAEvD,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI;KACjC,GAAG,IAAI,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK;CACvF,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,cAAc,CAAC,CAAC,EAAE,YAAY,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,IAChF,OAAO,CAAC,YAAY,CAAC,SAAS,KAAK,GACjC,sBAAsB,CAAC,CAAC,CAAC,GACzB,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC;AAElD,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,GAC9C,eAAe,CAAC,CAAC,CAAC,GAClB,CAAC,SAAS,GAAG,EAAE,GACb,eAAe,CAAC,CAAC,CAAC,GAClB,KAAK,CAAC;AAEV,KAAK,eAAe,CAAC,MAAM,SAAS,GAAG,EAAE,IACvC,MAAM,SAAS,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC,GAClC,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GACvC,OAAO,CAAC;AAEZ,KAAK,eAAe,CAAC,KAAK,IAAI;KAC3B,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK;CACvG,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { FunctionComponent } from 'react';
|
|
2
|
-
|
|
2
|
+
type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any>> & {
|
|
3
3
|
compare?: (prevProps: any, nextProps: any) => boolean;
|
|
4
4
|
};
|
|
5
5
|
export declare function isMemoizedComponent(component: FunctionComponent<any>): component is MemoizedComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"React.d.ts","sourceRoot":"","sources":["../../../src/utils/React.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,
|
|
1
|
+
{"version":3,"file":"React.d.ts","sourceRoot":"","sources":["../../../src/utils/React.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,KAAK,iBAAiB,GAAG,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,GAAG;IAC3E,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,OAAO,CAAC;CACvD,CAAC;AACF,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAAG,SAAS,IAAI,iBAAiB,CAErG;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAC5D,SAAS,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAC3C,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAGjD"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { ObjectGraph } from '../../src';
|
|
2
|
-
export
|
|
2
|
+
export type Props = Record<string, any> & {
|
|
3
|
+
stringFromProps: string;
|
|
4
|
+
};
|
|
5
|
+
export declare class LifecycleBoundGraph<P = {}> extends ObjectGraph<P & Props> {
|
|
3
6
|
static timesCreated: number;
|
|
4
|
-
|
|
7
|
+
private props;
|
|
8
|
+
constructor(props: P & Props);
|
|
9
|
+
computedFromProps(): string;
|
|
5
10
|
}
|
|
6
11
|
//# sourceMappingURL=LifecycleBoundGraph.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LifecycleBoundGraph.d.ts","sourceRoot":"","sources":["../../../test/fixtures/LifecycleBoundGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,WAAW,
|
|
1
|
+
{"version":3,"file":"LifecycleBoundGraph.d.ts","sourceRoot":"","sources":["../../../test/fixtures/LifecycleBoundGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,WAAW,EAAY,MAAM,WAAW,CAAC;AAGzD,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE,qBACa,mBAAmB,CAAC,CAAC,GAAG,EAAE,CAAE,SAAQ,WAAW,CAAC,CAAC,GAAG,KAAK,CAAC;IACrE,MAAM,CAAC,YAAY,SAAK;IACxB,OAAO,CAAC,KAAK,CAAY;gBAEb,KAAK,EAAE,CAAC,GAAG,KAAK;IAO5B,iBAAiB,IAAI,MAAM;CAK5B"}
|