react-obsidian 0.0.25 → 0.0.28

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,KAAK,MAAM,OAAO,CAAC;AAE1B,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;CAetB"}

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

@@ -1,35 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(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,12 +16,15 @@ var ComponentInjector = /** @class */ (function () {
         (0, hoist_non_react_statics_1.default)(Wrapped, Target);
         return Wrapped;
     };
-    ComponentInjector.prototype.wrapComponent = function (Target, Graph) {
-        return function (passedProps) {
+    ComponentInjector.prototype.wrapComponent = function (InjectionCandidate, Graph) {
+        var isMemoized = (0, React_1.isMemoizedComponent)(InjectionCandidate);
+        var Target = isMemoized ? InjectionCandidate.type : InjectionCandidate;
+        var compare = isMemoized ? InjectionCandidate.compare : undefined;
+        return (0, React_1.genericMemo)(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 proxiedProps = new PropsInjector_1.default(graph).inject(passedProps);
             return react_1.default.createElement(react_1.default.Fragment, null, Target(proxiedProps));
-        };
+        }, compare);
     };
     return ComponentInjector;
 }());

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,gDAA0B;AAC1B,oFAA2D;AAE3D,kEAA4C;AAC5C,wDAAkC;AAElC,2CAAqE;AAErE;IAAA;IAyBA,CAAC;IAxBC,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,IAAM,UAAU,GAAG,IAAA,2BAAmB,EAAC,kBAAkB,CAAC,CAAC;QAC3D,IAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC;QACzE,IAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;QAEpE,OAAO,IAAA,mBAAW,EAAC,UAAC,WAAc;YAChC,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC;YAC3C,IAAM,YAAY,GAAG,IAAI,uBAAa,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YAElE,OAAO,8DAAG,MAAM,CAAC,YAA4B,CAAC,CAAI,CAAC;QACrD,CAAC,EAAE,OAAO,CAAC,CAAC;IACd,CAAC;IACH,wBAAC;AAAD,CAAC,AAzBD,IAyBC"}

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

@@ -0,0 +1,8 @@
+import React, { 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 declare function genericMemo<C extends React.ComponentType<any>>(Component: Parameters<typeof React.memo>[0], propsAreEqual?: Parameters<typeof React.memo>[1]): C;
+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,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,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;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"}

package/dist/src/utils/React.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genericMemo = exports.isMemoizedComponent = void 0;
+var react_1 = __importDefault(require("react"));
+function isMemoizedComponent(component) {
+    return component.type !== undefined;
+}
+exports.isMemoizedComponent = isMemoizedComponent;
+function genericMemo(Component, propsAreEqual) {
+    return react_1.default.memo(Component, propsAreEqual);
+}
+exports.genericMemo = genericMemo;
+//# 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":";;;;;;AAAA,gDAAiD;AAKjD,SAAgB,mBAAmB,CAAC,SAAiC;IACnE,OAAQ,SAA+B,CAAC,IAAI,KAAK,SAAS,CAAC;AAC7D,CAAC;AAFD,kDAEC;AAED,SAAgB,WAAW,CACzB,SAA2C,EAC3C,aAAgD;IAEhD,OAAO,eAAK,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,CAAiB,CAAC;AAC9D,CAAC;AALD,kCAKC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-obsidian",
-  "version": "0.0.25",
+  "version": "0.0.28",
   "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 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 { genericMemo, isMemoizedComponent } from '../../utils/React';
 
 export default class ComponentInjector {
   inject<P>(
@@ -16,13 +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 isMemoized = isMemoizedComponent(InjectionCandidate);
+    const Target = isMemoized ? InjectionCandidate.type : InjectionCandidate;
+    const compare = isMemoized ? InjectionCandidate.compare : undefined;
+
+    return genericMemo((passedProps: P) => {
       const graph = useGraph(Graph, passedProps);
-      const [proxiedProps] = useState(new PropsInjector(graph).inject(passedProps));
+      const proxiedProps = new PropsInjector(graph).inject(passedProps);
+
       return <>{Target(proxiedProps as unknown as P)}</>;
-    };
+    }, compare);
   }
 }

package/src/utils/React.ts

@@ -0,0 +1,15 @@
+import React, { 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;
+}
+
+export function genericMemo<C extends React.ComponentType<any>>(
+  Component: Parameters<typeof React.memo>[0],
+  propsAreEqual?: Parameters<typeof React.memo>[1],
+) {
+  return React.memo(Component, propsAreEqual) as unknown as C;
+}