react-obsidian 0.0.25 → 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.
@@ -115,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 = () => (

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/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.25",
+  "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/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;
+}