react-obsidian 0.0.23 → 0.0.26

package/README.md

@@ -11,7 +11,7 @@
 <br>⚠️ <b>Until we hit v1, Obsidian is not semver-compliant and all APIs are subject to change.</b></h5>
 
 ## Introduction
-
+useButtonClick
 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.
 
 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.
@@ -32,8 +32,10 @@ React Obsidian is guided by the principles of the Dependency Injection pattern,
 * [Advance usage](https://github.com/wix-incubator/react-obsidian#advance-usage)
   * [Accessing props in graphs](https://github.com/wix-incubator/react-obsidian#accessing-props-in-graphs)
   * [Singleton graphs and providers](https://github.com/wix-incubator/react-obsidian#singleton-graphs-and-providers)
+  * [Lazy property injection](https://github.com/wix-incubator/react-obsidian#lazy-property-injection)
+  * [Typing graphs](https://github.com/wix-incubator/react-obsidian#typing-graphs)
   * [Graph middleware](https://github.com/wix-incubator/react-obsidian#graph-middleware)
-  * [Clear graphs](https://github.com/wix-incubator/react-obsidian#clear-graphs)
+  * [Clearing graphs](https://github.com/wix-incubator/react-obsidian#clearing-graphs)
 
 
 
@@ -113,7 +115,7 @@ const useButtonClick = ({ biLogger }: UseButtonPressProps): UseButtonPress => {
 };
 
 // Dependencies are injected from ApplicationGraph
-export default injectHook(usePress, ApplicationGraph);
+export default injectHook(useButtonClick, ApplicationGraph);
 
 // Now that we exported the injected hook, we can use it in a component without the needed so provide its dependencies manually
 const Component = () => (
@@ -222,6 +224,63 @@ class ApplicationGraph {
 }
 ```
 
+### Lazy property injection
+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. 
+
+```ts
+@Injectable(ApplicationGraph)
+class Foo {
+  @LazyInject() private bar!: Bar;
+
+  constructor() {
+    console.log(bar) // undefined
+    Obsidian.inject(this);
+    console.log(bar) // Bar {}
+  }
+}
+```
+
+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()`.
+
+```ts
+class Foo {
+  @LazyInject() private bar!: Bar;
+
+  constructor() {
+    console.log(bar) // undefined
+    Obsidian.inject(this, () => new ApplicationGraph());
+    console.log(bar) // Bar {}
+  }
+}
+```
+
+### Typing graphs
+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.
+
+```ts
+type InjectedDependencies = DependenciesOf<ApplicationGraph> // { biLogger: BiLogger, httpClient: HttpClient }
+
+// These are props our hook requires from the calling scope
+interface OwnProps {
+  someArgs: string
+}
+
+// This interface represents the object returned from the hook
+interface Result {
+  //
+}
+
+// Our hook requires two dependencies:
+// 1. someArg - passed down from the calling scope
+// 2. biLogger - injected from the ApplicationGraph
+const hook = ({someArg, biLogger}: OwnProps & InjectedDependencies): Result => {
+  // ...
+}
+
+// When invoking the hook, it must be provided with `someArg` since OwnProps aren't optional
+const injectedHook: (props: OwnProps & Partial<InjectedDependencies>) => Result = injectHookWithArguments<InjectedDependencies, OwnProps, Result>(hook, MainApplication);
+```
+
 ### Graph middleware
 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).
 
@@ -249,7 +308,7 @@ const loggingMiddleware = new class extends GraphMiddleware {
     Obsidian.addGraphMiddleware(loggingMiddleware);
 ```
 
-### Clear graphs
+### Clearing graphs
 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.
 
 #### Clearing graphs automatically during execution of Jest tests

package/dist/src/injectors/components/ComponentInjector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentInjector.d.ts","sourceRoot":"","sources":["../../../../src/injectors/components/ComponentInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,iBAAiB;IACpC,MAAM,CAAC,CAAC,EACN,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAClC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAChC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAMtC,OAAO,CAAC,aAAa;CAUtB"}
+{"version":3,"file":"ComponentInjector.d.ts","sourceRoot":"","sources":["../../../../src/injectors/components/ComponentInjector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,MAAM,CAAC,OAAO,OAAO,iBAAiB;IACpC,MAAM,CAAC,CAAC,EACN,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAClC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAChC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAMtC,OAAO,CAAC,aAAa;CAgBtB"}

package/dist/src/injectors/components/ComponentInjector.js

@@ -30,6 +30,7 @@ var react_1 = __importStar(require("react"));
 var hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics"));
 var PropsInjector_1 = __importDefault(require("./PropsInjector"));
 var useGraph_1 = __importDefault(require("./useGraph"));
+var React_1 = require("../../utils/React");
 var ComponentInjector = /** @class */ (function () {
     function ComponentInjector() {
     }
@@ -38,10 +39,14 @@ var ComponentInjector = /** @class */ (function () {
         (0, hoist_non_react_statics_1.default)(Wrapped, Target);
         return Wrapped;
     };
-    ComponentInjector.prototype.wrapComponent = function (Target, Graph) {
+    ComponentInjector.prototype.wrapComponent = function (InjectionCandidate, Graph) {
         return function (passedProps) {
             var graph = (0, useGraph_1.default)(Graph, passedProps);
-            var proxiedProps = (0, react_1.useState)(new PropsInjector_1.default(graph).inject(passedProps))[0];
+            var _a = (0, react_1.useState)(new PropsInjector_1.default(graph).inject(passedProps)), proxiedProps = _a[0], setProxiedProps = _a[1];
+            (0, react_1.useEffect)(function () {
+                setProxiedProps(new PropsInjector_1.default(graph).inject(passedProps));
+            }, [passedProps]);
+            var Target = (0, React_1.isMemoizedComponent)(InjectionCandidate) ? InjectionCandidate.type : InjectionCandidate;
             return react_1.default.createElement(react_1.default.Fragment, null, Target(proxiedProps));
         };
     };

package/dist/src/injectors/components/ComponentInjector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentInjector.js","sourceRoot":"","sources":["../../../../src/injectors/components/ComponentInjector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;AACxC,oFAA2D;AAE3D,kEAA4C;AAC5C,wDAAkC;AAGlC;IAAA;IAoBA,CAAC;IAnBC,kCAAM,GAAN,UACE,MAAkC,EAClC,KAAiC;QAEjC,IAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAClD,IAAA,iCAAoB,EAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACtC,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,yCAAa,GAArB,UACE,MAAkC,EAClC,KAAiC;QAEjC,OAAO,UAAC,WAAuB;YAC7B,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC;YACpC,IAAA,YAAY,GAAI,IAAA,gBAAQ,EAAC,IAAI,uBAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,GAA1D,CAA2D;YAC9E,OAAO,8DAAG,MAAM,CAAC,YAA4B,CAAC,CAAI,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC;IACH,wBAAC;AAAD,CAAC,AApBD,IAoBC"}
+{"version":3,"file":"ComponentInjector.js","sourceRoot":"","sources":["../../../../src/injectors/components/ComponentInjector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmD;AACnD,oFAA2D;AAE3D,kEAA4C;AAC5C,wDAAkC;AAElC,2CAAwD;AAExD;IAAA;IA0BA,CAAC;IAzBC,kCAAM,GAAN,UACE,MAAkC,EAClC,KAAiC;QAEjC,IAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAClD,IAAA,iCAAoB,EAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACtC,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,yCAAa,GAArB,UACE,kBAA8C,EAC9C,KAAiC;QAEjC,OAAO,UAAC,WAAuB;YAC7B,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC;YACrC,IAAA,KAAkC,IAAA,gBAAQ,EAAC,IAAI,uBAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,EAAvF,YAAY,QAAA,EAAE,eAAe,QAA0D,CAAC;YAE/F,IAAA,iBAAS,EAAC;gBACR,eAAe,CAAC,IAAI,uBAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;YAChE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;YAElB,IAAM,MAAM,GAAG,IAAA,2BAAmB,EAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC;YACtG,OAAO,8DAAG,MAAM,CAAC,YAA4B,CAAC,CAAI,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC;IACH,wBAAC;AAAD,CAAC,AA1BD,IA0BC"}

package/dist/src/injectors/hooks/InjectHook.d.ts

@@ -1,5 +1,5 @@
 import { ObjectGraph } from '../../graph/ObjectGraph';
 import { Constructable } from '../../types';
-export declare function injectHookWithArguments<Result, Injected, Args>(hook: (args: Injected & Args) => Result, Graph: Constructable<ObjectGraph>): (props: Args & Partial<Injected>) => Result;
-export declare function injectHook<Result, Injected>(hook: (args: Injected) => Result, Graph: Constructable<ObjectGraph>): (props?: Partial<Injected>) => Result;
+export declare function injectHookWithArguments<Injected, Own, Result = {}>(hook: (args: Injected & Own) => Result, Graph: Constructable<ObjectGraph>): (props: Own & Partial<Injected>) => Result;
+export declare function injectHook<Injected, Result = {}>(hook: (args: Injected) => Result, Graph: Constructable<ObjectGraph>): (props?: Partial<Injected>) => Result;
 //# sourceMappingURL=InjectHook.d.ts.map

package/dist/src/injectors/hooks/InjectHook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InjectHook.d.ts","sourceRoot":"","sources":["../../../../src/injectors/hooks/InjectHook.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAU5C,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAC5D,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,KAAK,MAAM,EACvC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAChC,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,MAAM,CAE7C;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,QAAQ,EACzC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,EAChC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAChC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,MAAM,CAEvC"}
+{"version":3,"file":"InjectHook.d.ts","sourceRoot":"","sources":["../../../../src/injectors/hooks/InjectHook.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAU5C,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,GAAG,EAAE,EAChE,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,GAAG,KAAK,MAAM,EACtC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAChC,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,MAAM,CAE5C;AAED,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,EAAE,EAC9C,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,EAChC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,GAChC,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,MAAM,CAEvC"}

package/dist/src/injectors/hooks/InjectHook.js.map

@@ -1 +1 @@
-{"version":3,"file":"InjectHook.js","sourceRoot":"","sources":["../../../../src/injectors/hooks/InjectHook.ts"],"names":[],"mappings":";;;;;;AAGA,gEAA0C;AAE1C,IAAM,YAAY,GAAG,IAAI,sBAAY,EAAE,CAAC;AAExC,6HAA6H;AAC7H,0FAA0F;AAC1F,uHAAuH;AACvH,yEAAyE;AAEzE,SAAgB,uBAAuB,CACrC,IAAuC,EACvC,KAAiC;IAEjC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;AALD,0DAKC;AAED,SAAgB,UAAU,CACxB,IAAgC,EAChC,KAAiC;IAEjC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;AALD,gCAKC"}
+{"version":3,"file":"InjectHook.js","sourceRoot":"","sources":["../../../../src/injectors/hooks/InjectHook.ts"],"names":[],"mappings":";;;;;;AAGA,gEAA0C;AAE1C,IAAM,YAAY,GAAG,IAAI,sBAAY,EAAE,CAAC;AAExC,6HAA6H;AAC7H,0FAA0F;AAC1F,uHAAuH;AACvH,yEAAyE;AAEzE,SAAgB,uBAAuB,CACrC,IAAsC,EACtC,KAAiC;IAEjC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;AALD,0DAKC;AAED,SAAgB,UAAU,CACxB,IAAgC,EAChC,KAAiC;IAEjC,OAAO,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;AALD,gCAKC"}

package/dist/src/types/index.d.ts

@@ -6,7 +6,7 @@ export declare type Constructor = {
     new (...args: any[]): any;
 };
 export declare type ServiceLocator<Clazz> = {
-    [Key in keyof Clazz]: Function;
+    [Key in keyof Clazz]: () => Clazz[Key] extends (...args: any[]) => infer R ? R : never;
 };
 export declare type GraphInternals = 'retrieve' | 'name' | 'scope';
 export declare type DependenciesOf<G> = G extends Graph ? DependenciesOf1<G> : G extends any[] ? DependenciesOfN<G> : never;

package/dist/src/types/index.d.ts.map

@@ -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,oBAAY,aAAa,CAAC,CAAC,IAAI;IAC7B,KAAI,GAAG,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC;CACtB,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,CAAC;AAEvD,oBAAY,cAAc,CAAC,KAAK,IAAI;KACjC,GAAG,IAAI,MAAM,KAAK,GAAG,QAAQ;CAC/B,CAAC;AAEF,oBAAY,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,oBAAY,cAAc,CAAC,CAAC,IAC1B,CAAC,SAAS,KAAK,GACb,eAAe,CAAC,CAAC,CAAC,GAClB,CAAC,SAAS,GAAG,EAAE,GACb,eAAe,CAAC,CAAC,CAAC,GAClB,KAAK,CAAC;AAEZ,aAAK,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,aAAK,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,oBAAY,aAAa,CAAC,CAAC,IAAI;IAC7B,KAAI,GAAG,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC;CACtB,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,CAAC;AAEvD,oBAAY,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,oBAAY,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,oBAAY,cAAc,CAAC,CAAC,IAC1B,CAAC,SAAS,KAAK,GACb,eAAe,CAAC,CAAC,CAAC,GAClB,CAAC,SAAS,GAAG,EAAE,GACb,eAAe,CAAC,CAAC,CAAC,GAClB,KAAK,CAAC;AAEZ,aAAK,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,aAAK,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"}

package/dist/src/utils/React.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent } from 'react';
+declare type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any>>;
+export declare function isMemoizedComponent(component: FunctionComponent<any>): component is MemoizedComponent;
+export {};
+//# sourceMappingURL=React.d.ts.map

package/dist/src/utils/React.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"React.d.ts","sourceRoot":"","sources":["../../../src/utils/React.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,aAAK,iBAAiB,GAAG,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC3E,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAAG,SAAS,IAAI,iBAAiB,CAErG"}

package/dist/src/utils/React.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMemoizedComponent = void 0;
+function isMemoizedComponent(component) {
+    return component.type !== undefined;
+}
+exports.isMemoizedComponent = isMemoizedComponent;
+//# sourceMappingURL=React.js.map

package/dist/src/utils/React.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"React.js","sourceRoot":"","sources":["../../../src/utils/React.ts"],"names":[],"mappings":";;;AAGA,SAAgB,mBAAmB,CAAC,SAAiC;IACnE,OAAQ,SAA+B,CAAC,IAAI,KAAK,SAAS,CAAC;AAC7D,CAAC;AAFD,kDAEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-obsidian",
-  "version": "0.0.23",
+  "version": "0.0.26",
   "description": "Dependency injection framework for React and React Native applications",
   "scripts": {
     "prepack": "npm run lint && tsc --project tsconfig.prod.json",

package/src/injectors/components/ComponentInjector.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { ObjectGraph } from '../../graph/ObjectGraph';
 import PropsInjector from './PropsInjector';
 import useGraph from './useGraph';
 import { Constructable } from '../../types';
+import { isMemoizedComponent } from '../../utils/React';
 
 export default class ComponentInjector {
   inject<P>(
@@ -16,12 +17,18 @@ export default class ComponentInjector {
   }
 
   private wrapComponent<P>(
-    Target: React.FunctionComponent<P>,
+    InjectionCandidate: React.FunctionComponent<P>,
     Graph: Constructable<ObjectGraph>,
   ): React.FunctionComponent<Partial<P>> {
     return (passedProps: Partial<P>) => {
       const graph = useGraph(Graph, passedProps);
-      const [proxiedProps] = useState(new PropsInjector(graph).inject(passedProps));
+      const [proxiedProps, setProxiedProps] = useState(new PropsInjector(graph).inject(passedProps));
+
+      useEffect(() => {
+        setProxiedProps(new PropsInjector(graph).inject(passedProps));
+      }, [passedProps]);
+
+      const Target = isMemoizedComponent(InjectionCandidate) ? InjectionCandidate.type : InjectionCandidate;
       return <>{Target(proxiedProps as unknown as P)}</>;
     };
   }

package/src/injectors/hooks/InjectHook.ts

@@ -10,14 +10,14 @@ const hookInjector = new HookInjector();
 // 1. injectHookWithArguments: Should be used when a hook requires parameters in addition to the injected dependencies.
 // 2. injectHook: Should be used when a hook does not require parameters.
 
-export function injectHookWithArguments<Result, Injected, Args>(
-  hook: (args: Injected & Args) => Result,
+export function injectHookWithArguments<Injected, Own, Result = {}>(
+  hook: (args: Injected & Own) => Result,
   Graph: Constructable<ObjectGraph>,
-): (props: Args & Partial<Injected>) => Result {
+): (props: Own & Partial<Injected>) => Result {
   return hookInjector.inject(hook, Graph);
 }
 
-export function injectHook<Result, Injected>(
+export function injectHook<Injected, Result = {}>(
   hook: (args: Injected) => Result,
   Graph: Constructable<ObjectGraph>,
 ): (props?: Partial<Injected>) => Result {

package/src/types/index.ts

@@ -7,7 +7,7 @@ export type Constructable<T> = {
 export type Constructor = { new(...args: any[]): any };
 
 export type ServiceLocator<Clazz> = {
-  [Key in keyof Clazz]: Function
+  [Key in keyof Clazz]: () => Clazz[Key] extends (...args: any[]) => infer R ? R : never;
 };
 
 export type GraphInternals = 'retrieve' | 'name' | 'scope';

package/src/utils/React.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+
+type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any>>;
+export function isMemoizedComponent(component: FunctionComponent<any>): component is MemoizedComponent {
+  return (component as MemoizedComponent).type !== undefined;
+}