react-obsidian 0.0.24 → 0.0.27

package/README.md

@@ -11,7 +11,6 @@
 <br>⚠️ <b>Until we hit v1, Obsidian is not semver-compliant and all APIs are subject to change.</b></h5>
 
 ## Introduction
-
 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.
@@ -115,7 +114,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 = () => (

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;CAsBtB"}

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,21 @@ 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 () {
+                if ((0, React_1.isMemoizedComponent)(InjectionCandidate) && InjectionCandidate.compare) {
+                    if (!InjectionCandidate.compare(proxiedProps, passedProps)) {
+                        setProxiedProps(new PropsInjector_1.default(graph).inject(passedProps));
+                    }
+                }
+                else {
+                    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;IAgCA,CAAC;IA/BC,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,IAAI,IAAA,2BAAmB,EAAC,kBAAkB,CAAC,IAAI,kBAAkB,CAAC,OAAO,EAAE;oBACzE,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,EAAE;wBAC1D,eAAe,CAAC,IAAI,uBAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;qBAC/D;iBACF;qBAAM;oBACL,eAAe,CAAC,IAAI,uBAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;iBAC/D;YACH,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,AAhCD,IAgCC"}

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,7 @@
+import { FunctionComponent } from 'react';
+declare type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any>> & {
+    compare?: (prevProps: any, nextProps: any) => boolean;
+};
+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,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"}

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":";;;AAKA,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.24",
+  "version": "0.0.27",
   "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,24 @@ 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(() => {
+        if (isMemoizedComponent(InjectionCandidate) && InjectionCandidate.compare) {
+          if (!InjectionCandidate.compare(proxiedProps, passedProps)) {
+            setProxiedProps(new PropsInjector(graph).inject(passedProps));
+          }
+        } else {
+          setProxiedProps(new PropsInjector(graph).inject(passedProps));
+        }
+      }, [passedProps]);
+
+      const Target = isMemoizedComponent(InjectionCandidate) ? InjectionCandidate.type : InjectionCandidate;
       return <>{Target(proxiedProps as unknown as P)}</>;
     };
   }

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,8 @@
+import { FunctionComponent } from 'react';
+
+type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any>> & {
+  compare?: (prevProps: any, nextProps: any) => boolean;
+};
+export function isMemoizedComponent(component: FunctionComponent<any>): component is MemoizedComponent {
+  return (component as MemoizedComponent).type !== undefined;
+}