react-obsidian 0.0.26 → 0.0.27
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/README.md +0 -1
- package/dist/src/injectors/components/ComponentInjector.d.ts.map +1 -1
- package/dist/src/injectors/components/ComponentInjector.js +8 -1
- package/dist/src/injectors/components/ComponentInjector.js.map +1 -1
- package/dist/src/utils/React.d.ts +3 -1
- package/dist/src/utils/React.d.ts.map +1 -1
- package/dist/src/utils/React.js.map +1 -1
- package/package.json +1 -1
- package/src/injectors/components/ComponentInjector.tsx +7 -1
- package/src/utils/React.ts +3 -1
package/README.md
CHANGED
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
<br>⚠️ <b>Until we hit v1, Obsidian is not semver-compliant and all APIs are subject to change.</b></h5>
|
|
12
12
|
|
|
13
13
|
## Introduction
|
|
14
|
-
useButtonClick
|
|
15
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.
|
|
16
15
|
|
|
17
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.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"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"}
|
|
@@ -44,7 +44,14 @@ var ComponentInjector = /** @class */ (function () {
|
|
|
44
44
|
var graph = (0, useGraph_1.default)(Graph, passedProps);
|
|
45
45
|
var _a = (0, react_1.useState)(new PropsInjector_1.default(graph).inject(passedProps)), proxiedProps = _a[0], setProxiedProps = _a[1];
|
|
46
46
|
(0, react_1.useEffect)(function () {
|
|
47
|
-
|
|
47
|
+
if ((0, React_1.isMemoizedComponent)(InjectionCandidate) && InjectionCandidate.compare) {
|
|
48
|
+
if (!InjectionCandidate.compare(proxiedProps, passedProps)) {
|
|
49
|
+
setProxiedProps(new PropsInjector_1.default(graph).inject(passedProps));
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
setProxiedProps(new PropsInjector_1.default(graph).inject(passedProps));
|
|
54
|
+
}
|
|
48
55
|
}, [passedProps]);
|
|
49
56
|
var Target = (0, React_1.isMemoizedComponent)(InjectionCandidate) ? InjectionCandidate.type : InjectionCandidate;
|
|
50
57
|
return react_1.default.createElement(react_1.default.Fragment, null, Target(proxiedProps));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { FunctionComponent } from 'react';
|
|
2
|
-
declare type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any
|
|
2
|
+
declare type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any>> & {
|
|
3
|
+
compare?: (prevProps: any, nextProps: any) => boolean;
|
|
4
|
+
};
|
|
3
5
|
export declare function isMemoizedComponent(component: FunctionComponent<any>): component is MemoizedComponent;
|
|
4
6
|
export {};
|
|
5
7
|
//# sourceMappingURL=React.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"React.js","sourceRoot":"","sources":["../../../src/utils/React.ts"],"names":[],"mappings":";;;
|
|
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
CHANGED
|
@@ -25,7 +25,13 @@ export default class ComponentInjector {
|
|
|
25
25
|
const [proxiedProps, setProxiedProps] = useState(new PropsInjector(graph).inject(passedProps));
|
|
26
26
|
|
|
27
27
|
useEffect(() => {
|
|
28
|
-
|
|
28
|
+
if (isMemoizedComponent(InjectionCandidate) && InjectionCandidate.compare) {
|
|
29
|
+
if (!InjectionCandidate.compare(proxiedProps, passedProps)) {
|
|
30
|
+
setProxiedProps(new PropsInjector(graph).inject(passedProps));
|
|
31
|
+
}
|
|
32
|
+
} else {
|
|
33
|
+
setProxiedProps(new PropsInjector(graph).inject(passedProps));
|
|
34
|
+
}
|
|
29
35
|
}, [passedProps]);
|
|
30
36
|
|
|
31
37
|
const Target = isMemoizedComponent(InjectionCandidate) ? InjectionCandidate.type : InjectionCandidate;
|
package/src/utils/React.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { FunctionComponent } from 'react';
|
|
2
2
|
|
|
3
|
-
type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any
|
|
3
|
+
type MemoizedComponent = React.MemoExoticComponent<FunctionComponent<any>> & {
|
|
4
|
+
compare?: (prevProps: any, nextProps: any) => boolean;
|
|
5
|
+
};
|
|
4
6
|
export function isMemoizedComponent(component: FunctionComponent<any>): component is MemoizedComponent {
|
|
5
7
|
return (component as MemoizedComponent).type !== undefined;
|
|
6
8
|
}
|