@webiny/react-composition 6.0.0-beta.0 → 6.0.0-rc.0
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/Compose.d.ts +2 -2
- package/Compose.js +19 -18
- package/Compose.js.map +1 -1
- package/CompositionScope.d.ts +9 -3
- package/CompositionScope.js +18 -19
- package/CompositionScope.js.map +1 -1
- package/Context.d.ts +15 -12
- package/Context.js +71 -80
- package/Context.js.map +1 -1
- package/README.md +9 -6
- package/createDecorator.d.ts +6 -6
- package/createDecorator.js +9 -19
- package/createDecorator.js.map +1 -1
- package/decorators.d.ts +7 -14
- package/decorators.js +22 -33
- package/decorators.js.map +1 -1
- package/index.d.ts +8 -8
- package/index.js +7 -93
- package/index.js.map +1 -1
- package/makeComposable.d.ts +30 -14
- package/makeComposable.js +6 -14
- package/makeComposable.js.map +1 -1
- package/makeDecoratable.d.ts +10 -15
- package/makeDecoratable.js +29 -44
- package/makeDecoratable.js.map +1 -1
- package/package.json +6 -15
- package/types.d.ts +18 -12
- package/types.js +1 -5
- package/types.js.map +1 -1
package/decorators.js
CHANGED
|
@@ -1,48 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
});
|
|
7
|
-
exports.createConditionalDecorator = createConditionalDecorator;
|
|
8
|
-
exports.createDecoratorFactory = createDecoratorFactory;
|
|
9
|
-
exports.createHookDecoratorFactory = createHookDecoratorFactory;
|
|
10
|
-
exports.withDecoratorFactory = withDecoratorFactory;
|
|
11
|
-
exports.withHookDecoratorFactory = withHookDecoratorFactory;
|
|
12
|
-
var _react = _interopRequireDefault(require("react"));
|
|
13
|
-
var _Compose = require("./Compose");
|
|
14
|
-
function createConditionalDecorator(shouldDecorate, decorator, decoratorProps) {
|
|
15
|
-
return function (Original) {
|
|
16
|
-
var DecoratedComponent = /*#__PURE__*/_react.default.memo(decorator(Original));
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Compose } from "./Compose.js";
|
|
3
|
+
export function createConditionalDecorator(shouldDecorate, decorator, decoratorProps) {
|
|
4
|
+
return Original => {
|
|
5
|
+
const DecoratedComponent = /*#__PURE__*/React.memo(decorator(Original));
|
|
17
6
|
DecoratedComponent.displayName = Original.displayName;
|
|
18
7
|
return function ShouldDecorate(props) {
|
|
19
8
|
if (shouldDecorate(decoratorProps, props)) {
|
|
20
9
|
// @ts-expect-error
|
|
21
|
-
return /*#__PURE__*/
|
|
10
|
+
return /*#__PURE__*/React.createElement(DecoratedComponent, props);
|
|
22
11
|
}
|
|
23
12
|
|
|
24
13
|
// @ts-expect-error
|
|
25
|
-
return /*#__PURE__*/
|
|
14
|
+
return /*#__PURE__*/React.createElement(Original, props);
|
|
26
15
|
};
|
|
27
16
|
};
|
|
28
17
|
}
|
|
29
|
-
|
|
30
|
-
return
|
|
31
|
-
return /*#__PURE__*/
|
|
18
|
+
const memoizedComponent = decorator => {
|
|
19
|
+
return decoratee => {
|
|
20
|
+
return /*#__PURE__*/React.memo(decorator(decoratee));
|
|
32
21
|
};
|
|
33
22
|
};
|
|
34
|
-
function createDecoratorFactory() {
|
|
23
|
+
export function createDecoratorFactory() {
|
|
35
24
|
return function from(decoratable, shouldDecorate) {
|
|
36
25
|
return function createDecorator(decorator) {
|
|
37
26
|
return function DecoratorPlugin(props) {
|
|
38
27
|
if (shouldDecorate) {
|
|
39
|
-
|
|
40
|
-
return /*#__PURE__*/
|
|
28
|
+
const componentDecorator = createConditionalDecorator(shouldDecorate, decorator, props);
|
|
29
|
+
return /*#__PURE__*/React.createElement(Compose, {
|
|
41
30
|
function: decoratable,
|
|
42
31
|
with: componentDecorator
|
|
43
32
|
});
|
|
44
33
|
}
|
|
45
|
-
return /*#__PURE__*/
|
|
34
|
+
return /*#__PURE__*/React.createElement(Compose, {
|
|
46
35
|
function: decoratable,
|
|
47
36
|
with: memoizedComponent(decorator)
|
|
48
37
|
});
|
|
@@ -50,11 +39,11 @@ function createDecoratorFactory() {
|
|
|
50
39
|
};
|
|
51
40
|
};
|
|
52
41
|
}
|
|
53
|
-
function createHookDecoratorFactory() {
|
|
42
|
+
export function createHookDecoratorFactory() {
|
|
54
43
|
return function from(decoratable) {
|
|
55
44
|
return function createDecorator(decorator) {
|
|
56
45
|
return function DecoratorPlugin() {
|
|
57
|
-
return /*#__PURE__*/
|
|
46
|
+
return /*#__PURE__*/React.createElement(Compose, {
|
|
58
47
|
function: decoratable,
|
|
59
48
|
with: decorator
|
|
60
49
|
});
|
|
@@ -62,19 +51,19 @@ function createHookDecoratorFactory() {
|
|
|
62
51
|
};
|
|
63
52
|
};
|
|
64
53
|
}
|
|
65
|
-
function withDecoratorFactory() {
|
|
54
|
+
export function withDecoratorFactory() {
|
|
66
55
|
return function WithDecorator(Component, shouldDecorate) {
|
|
67
|
-
|
|
56
|
+
const createDecorator = createDecoratorFactory()(Component, shouldDecorate);
|
|
68
57
|
return Object.assign(Component, {
|
|
69
|
-
createDecorator
|
|
58
|
+
createDecorator
|
|
70
59
|
});
|
|
71
60
|
};
|
|
72
61
|
}
|
|
73
|
-
function withHookDecoratorFactory() {
|
|
62
|
+
export function withHookDecoratorFactory() {
|
|
74
63
|
return function WithHookDecorator(hook) {
|
|
75
|
-
|
|
64
|
+
const createDecorator = createHookDecoratorFactory()(hook);
|
|
76
65
|
return Object.assign(hook, {
|
|
77
|
-
createDecorator
|
|
66
|
+
createDecorator
|
|
78
67
|
});
|
|
79
68
|
};
|
|
80
69
|
}
|
package/decorators.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","Compose","createConditionalDecorator","shouldDecorate","decorator","decoratorProps","Original","DecoratedComponent","memo","displayName","ShouldDecorate","props","createElement","memoizedComponent","decoratee","createDecoratorFactory","from","decoratable","createDecorator","DecoratorPlugin","componentDecorator","function","with","createHookDecoratorFactory","withDecoratorFactory","WithDecorator","Component","Object","assign","withHookDecoratorFactory","WithHookDecorator","hook"],"sources":["decorators.tsx"],"sourcesContent":["import React from \"react\";\nimport { Compose } from \"~/Compose.js\";\nimport type { GetDecoratee, GetDecorateeParams } from \"~/createDecorator.js\";\nimport type {\n DecoratableComponent,\n GenericComponent,\n Decorator,\n GenericHook,\n DecoratableHook,\n ComponentDecorator\n} from \"~/types.js\";\n\nexport interface ShouldDecorate<TDecorator = any, TComponent = any> {\n (decoratorProps: TDecorator, componentProps: TComponent): boolean;\n}\n\nexport function createConditionalDecorator<TDecoratee extends GenericComponent>(\n shouldDecorate: ShouldDecorate,\n decorator: Decorator<TDecoratee>,\n decoratorProps: unknown\n): Decorator<TDecoratee> {\n return (Original => {\n const DecoratedComponent = React.memo(decorator(Original));\n DecoratedComponent.displayName = Original.displayName;\n\n return function ShouldDecorate(props: unknown) {\n if (shouldDecorate(decoratorProps, props)) {\n // @ts-expect-error\n return <DecoratedComponent {...props} />;\n }\n\n // @ts-expect-error\n return <Original {...props} />;\n };\n }) as Decorator<TDecoratee>;\n}\n\nconst memoizedComponent = <T extends GenericComponent>(decorator: Decorator<T>) => {\n return (decoratee: T) => {\n return React.memo(decorator(decoratee));\n };\n};\n\nexport function createDecoratorFactory<TDecorator>() {\n return function from<TDecoratable extends DecoratableComponent>(\n decoratable: TDecoratable,\n shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>>\n ) {\n return function createDecorator(decorator: ComponentDecorator<GetDecoratee<TDecoratable>>) {\n return function DecoratorPlugin(props: TDecorator) {\n if (shouldDecorate) {\n const componentDecorator = createConditionalDecorator<GenericComponent>(\n shouldDecorate,\n decorator as unknown as Decorator<GenericComponent>,\n props\n );\n\n return <Compose function={decoratable} with={componentDecorator} />;\n }\n\n return (\n <Compose\n function={decoratable}\n with={memoizedComponent(\n decorator as unknown as Decorator<GenericComponent>\n )}\n />\n );\n };\n };\n };\n}\n\nexport function createHookDecoratorFactory() {\n return function from<TDecoratable extends DecoratableHook>(decoratable: TDecoratable) {\n return function createDecorator(decorator: Decorator<GetDecoratee<TDecoratable>>) {\n return function DecoratorPlugin() {\n return (\n <Compose\n function={decoratable}\n with={decorator as unknown as Decorator<GenericHook>}\n />\n );\n };\n };\n };\n}\n\nexport function withDecoratorFactory<TDecorator>() {\n return function WithDecorator<TDecoratable extends DecoratableComponent>(\n Component: TDecoratable,\n shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>>\n ) {\n const createDecorator = createDecoratorFactory<TDecorator>()(Component, shouldDecorate);\n\n return Object.assign(Component, { createDecorator }) as TDecoratable & {\n createDecorator: typeof createDecorator;\n };\n };\n}\n\nexport function withHookDecoratorFactory() {\n return function WithHookDecorator<TDecoratable extends DecoratableHook>(hook: TDecoratable) {\n const createDecorator = createHookDecoratorFactory()(hook);\n\n return Object.assign(hook, { createDecorator }) as unknown as DecoratableHook<\n GenericHook<\n GetDecorateeParams<GetDecoratee<TDecoratable>>,\n ReturnType<GetDecoratee<TDecoratable>>\n >\n > & { createDecorator: typeof createDecorator };\n };\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAehB,OAAO,SAASC,0BAA0BA,CACtCC,cAA8B,EAC9BC,SAAgC,EAChCC,cAAuB,EACF;EACrB,OAAQC,QAAQ,IAAI;IAChB,MAAMC,kBAAkB,gBAAGP,KAAK,CAACQ,IAAI,CAACJ,SAAS,CAACE,QAAQ,CAAC,CAAC;IAC1DC,kBAAkB,CAACE,WAAW,GAAGH,QAAQ,CAACG,WAAW;IAErD,OAAO,SAASC,cAAcA,CAACC,KAAc,EAAE;MAC3C,IAAIR,cAAc,CAACE,cAAc,EAAEM,KAAK,CAAC,EAAE;QACvC;QACA,oBAAOX,KAAA,CAAAY,aAAA,CAACL,kBAAkB,EAAKI,KAAQ,CAAC;MAC5C;;MAEA;MACA,oBAAOX,KAAA,CAAAY,aAAA,CAACN,QAAQ,EAAKK,KAAQ,CAAC;IAClC,CAAC;EACL,CAAC;AACL;AAEA,MAAME,iBAAiB,GAAgCT,SAAuB,IAAK;EAC/E,OAAQU,SAAY,IAAK;IACrB,oBAAOd,KAAK,CAACQ,IAAI,CAACJ,SAAS,CAACU,SAAS,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC;AAED,OAAO,SAASC,sBAAsBA,CAAA,EAAe;EACjD,OAAO,SAASC,IAAIA,CAChBC,WAAyB,EACzBd,cAA2F,EAC7F;IACE,OAAO,SAASe,eAAeA,CAACd,SAAyD,EAAE;MACvF,OAAO,SAASe,eAAeA,CAACR,KAAiB,EAAE;QAC/C,IAAIR,cAAc,EAAE;UAChB,MAAMiB,kBAAkB,GAAGlB,0BAA0B,CACjDC,cAAc,EACdC,SAAS,EACTO,KACJ,CAAC;UAED,oBAAOX,KAAA,CAAAY,aAAA,CAACX,OAAO;YAACoB,QAAQ,EAAEJ,WAAY;YAACK,IAAI,EAAEF;UAAmB,CAAE,CAAC;QACvE;QAEA,oBACIpB,KAAA,CAAAY,aAAA,CAACX,OAAO;UACJoB,QAAQ,EAAEJ,WAAY;UACtBK,IAAI,EAAET,iBAAiB,CACnBT,SACJ;QAAE,CACL,CAAC;MAEV,CAAC;IACL,CAAC;EACL,CAAC;AACL;AAEA,OAAO,SAASmB,0BAA0BA,CAAA,EAAG;EACzC,OAAO,SAASP,IAAIA,CAAuCC,WAAyB,EAAE;IAClF,OAAO,SAASC,eAAeA,CAACd,SAAgD,EAAE;MAC9E,OAAO,SAASe,eAAeA,CAAA,EAAG;QAC9B,oBACInB,KAAA,CAAAY,aAAA,CAACX,OAAO;UACJoB,QAAQ,EAAEJ,WAAY;UACtBK,IAAI,EAAElB;QAA+C,CACxD,CAAC;MAEV,CAAC;IACL,CAAC;EACL,CAAC;AACL;AAEA,OAAO,SAASoB,oBAAoBA,CAAA,EAAe;EAC/C,OAAO,SAASC,aAAaA,CACzBC,SAAuB,EACvBvB,cAA2F,EAC7F;IACE,MAAMe,eAAe,GAAGH,sBAAsB,CAAa,CAAC,CAACW,SAAS,EAAEvB,cAAc,CAAC;IAEvF,OAAOwB,MAAM,CAACC,MAAM,CAACF,SAAS,EAAE;MAAER;IAAgB,CAAC,CAAC;EAGxD,CAAC;AACL;AAEA,OAAO,SAASW,wBAAwBA,CAAA,EAAG;EACvC,OAAO,SAASC,iBAAiBA,CAAuCC,IAAkB,EAAE;IACxF,MAAMb,eAAe,GAAGK,0BAA0B,CAAC,CAAC,CAACQ,IAAI,CAAC;IAE1D,OAAOJ,MAAM,CAACC,MAAM,CAACG,IAAI,EAAE;MAAEb;IAAgB,CAAC,CAAC;EAMnD,CAAC;AACL","ignoreList":[]}
|
package/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export * from "./Context";
|
|
2
|
-
export * from "./Compose";
|
|
3
|
-
export * from "./makeComposable";
|
|
4
|
-
export * from "./makeDecoratable";
|
|
5
|
-
export * from "./createDecorator";
|
|
6
|
-
export * from "./decorators";
|
|
7
|
-
export * from "./CompositionScope";
|
|
8
|
-
export * from "./types";
|
|
1
|
+
export * from "./Context.js";
|
|
2
|
+
export * from "./Compose.js";
|
|
3
|
+
export * from "./makeComposable.js";
|
|
4
|
+
export * from "./makeDecoratable.js";
|
|
5
|
+
export * from "./createDecorator.js";
|
|
6
|
+
export * from "./decorators.js";
|
|
7
|
+
export * from "./CompositionScope.js";
|
|
8
|
+
export type * from "./types.js";
|
package/index.js
CHANGED
|
@@ -1,95 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] === _Context[key]) return;
|
|
10
|
-
Object.defineProperty(exports, key, {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function get() {
|
|
13
|
-
return _Context[key];
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
var _Compose = require("./Compose");
|
|
18
|
-
Object.keys(_Compose).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (key in exports && exports[key] === _Compose[key]) return;
|
|
21
|
-
Object.defineProperty(exports, key, {
|
|
22
|
-
enumerable: true,
|
|
23
|
-
get: function get() {
|
|
24
|
-
return _Compose[key];
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
var _makeComposable = require("./makeComposable");
|
|
29
|
-
Object.keys(_makeComposable).forEach(function (key) {
|
|
30
|
-
if (key === "default" || key === "__esModule") return;
|
|
31
|
-
if (key in exports && exports[key] === _makeComposable[key]) return;
|
|
32
|
-
Object.defineProperty(exports, key, {
|
|
33
|
-
enumerable: true,
|
|
34
|
-
get: function get() {
|
|
35
|
-
return _makeComposable[key];
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
var _makeDecoratable = require("./makeDecoratable");
|
|
40
|
-
Object.keys(_makeDecoratable).forEach(function (key) {
|
|
41
|
-
if (key === "default" || key === "__esModule") return;
|
|
42
|
-
if (key in exports && exports[key] === _makeDecoratable[key]) return;
|
|
43
|
-
Object.defineProperty(exports, key, {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
get: function get() {
|
|
46
|
-
return _makeDecoratable[key];
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
var _createDecorator = require("./createDecorator");
|
|
51
|
-
Object.keys(_createDecorator).forEach(function (key) {
|
|
52
|
-
if (key === "default" || key === "__esModule") return;
|
|
53
|
-
if (key in exports && exports[key] === _createDecorator[key]) return;
|
|
54
|
-
Object.defineProperty(exports, key, {
|
|
55
|
-
enumerable: true,
|
|
56
|
-
get: function get() {
|
|
57
|
-
return _createDecorator[key];
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
var _decorators = require("./decorators");
|
|
62
|
-
Object.keys(_decorators).forEach(function (key) {
|
|
63
|
-
if (key === "default" || key === "__esModule") return;
|
|
64
|
-
if (key in exports && exports[key] === _decorators[key]) return;
|
|
65
|
-
Object.defineProperty(exports, key, {
|
|
66
|
-
enumerable: true,
|
|
67
|
-
get: function get() {
|
|
68
|
-
return _decorators[key];
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
var _CompositionScope = require("./CompositionScope");
|
|
73
|
-
Object.keys(_CompositionScope).forEach(function (key) {
|
|
74
|
-
if (key === "default" || key === "__esModule") return;
|
|
75
|
-
if (key in exports && exports[key] === _CompositionScope[key]) return;
|
|
76
|
-
Object.defineProperty(exports, key, {
|
|
77
|
-
enumerable: true,
|
|
78
|
-
get: function get() {
|
|
79
|
-
return _CompositionScope[key];
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
var _types = require("./types");
|
|
84
|
-
Object.keys(_types).forEach(function (key) {
|
|
85
|
-
if (key === "default" || key === "__esModule") return;
|
|
86
|
-
if (key in exports && exports[key] === _types[key]) return;
|
|
87
|
-
Object.defineProperty(exports, key, {
|
|
88
|
-
enumerable: true,
|
|
89
|
-
get: function get() {
|
|
90
|
-
return _types[key];
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
});
|
|
1
|
+
export * from "./Context.js";
|
|
2
|
+
export * from "./Compose.js";
|
|
3
|
+
export * from "./makeComposable.js";
|
|
4
|
+
export * from "./makeDecoratable.js";
|
|
5
|
+
export * from "./createDecorator.js";
|
|
6
|
+
export * from "./decorators.js";
|
|
7
|
+
export * from "./CompositionScope.js";
|
|
94
8
|
|
|
95
9
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Context.js\";\nexport * from \"./Compose.js\";\nexport * from \"./makeComposable.js\";\nexport * from \"./makeDecoratable.js\";\nexport * from \"./createDecorator.js\";\nexport * from \"./decorators.js\";\nexport * from \"./CompositionScope.js\";\nexport type * from \"./types.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
package/makeComposable.d.ts
CHANGED
|
@@ -1,27 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
import { GenericComponent } from "./types";
|
|
1
|
+
import type { GenericComponent } from "./types.js";
|
|
3
2
|
/**
|
|
4
3
|
* @deprecated Use `makeDecoratable` instead.
|
|
5
4
|
*/
|
|
6
|
-
export declare function makeComposable<T extends GenericComponent>(name: string, Component?: T):
|
|
7
|
-
|
|
8
|
-
original: (() => null) | NonNullable<T>;
|
|
5
|
+
export declare function makeComposable<T extends GenericComponent>(name: string, Component?: T): (((() => null) | T) & {
|
|
6
|
+
original: (() => null) | T;
|
|
9
7
|
originalName: string;
|
|
10
8
|
displayName: string;
|
|
11
|
-
}
|
|
12
|
-
original:
|
|
13
|
-
|
|
14
|
-
original: (() => null) | NonNullable<T>;
|
|
9
|
+
}) & {
|
|
10
|
+
original: ((() => null) | T) & {
|
|
11
|
+
original: (() => null) | T;
|
|
15
12
|
originalName: string;
|
|
16
13
|
displayName: string;
|
|
17
|
-
}
|
|
14
|
+
};
|
|
18
15
|
originalName: string;
|
|
19
16
|
displayName: string;
|
|
20
17
|
} & {
|
|
21
|
-
createDecorator: (decorator: import("
|
|
22
|
-
|
|
23
|
-
original: (() => null) | NonNullable<T>;
|
|
18
|
+
createDecorator: (decorator: import("~/types.js").ComponentDecorator<import("./createDecorator").GetDecoratee<(() => null) & {
|
|
19
|
+
original: (() => null) | T;
|
|
24
20
|
originalName: string;
|
|
25
21
|
displayName: string;
|
|
26
|
-
}
|
|
22
|
+
} & {
|
|
23
|
+
original: ((() => null) | T) & {
|
|
24
|
+
original: (() => null) | T;
|
|
25
|
+
originalName: string;
|
|
26
|
+
displayName: string;
|
|
27
|
+
};
|
|
28
|
+
originalName: string;
|
|
29
|
+
displayName: string;
|
|
30
|
+
}> | import("./createDecorator").GetDecoratee<T & {
|
|
31
|
+
original: (() => null) | T;
|
|
32
|
+
originalName: string;
|
|
33
|
+
displayName: string;
|
|
34
|
+
} & {
|
|
35
|
+
original: ((() => null) | T) & {
|
|
36
|
+
original: (() => null) | T;
|
|
37
|
+
originalName: string;
|
|
38
|
+
displayName: string;
|
|
39
|
+
};
|
|
40
|
+
originalName: string;
|
|
41
|
+
displayName: string;
|
|
42
|
+
}>>) => (props: unknown) => import("react").JSX.Element;
|
|
27
43
|
};
|
package/makeComposable.js
CHANGED
|
@@ -1,22 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.makeComposable = makeComposable;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _makeDecoratable = require("./makeDecoratable");
|
|
9
|
-
var ComposableContext = /*#__PURE__*/(0, _react.createContext)([]);
|
|
1
|
+
import { createContext } from "react";
|
|
2
|
+
import { makeDecoratable } from "./makeDecoratable.js";
|
|
3
|
+
const ComposableContext = /*#__PURE__*/createContext([]);
|
|
10
4
|
ComposableContext.displayName = "ComposableContext";
|
|
11
|
-
|
|
12
|
-
return null;
|
|
13
|
-
};
|
|
5
|
+
const nullRenderer = () => null;
|
|
14
6
|
|
|
15
7
|
/**
|
|
16
8
|
* @deprecated Use `makeDecoratable` instead.
|
|
17
9
|
*/
|
|
18
|
-
function makeComposable(name, Component) {
|
|
19
|
-
return
|
|
10
|
+
export function makeComposable(name, Component) {
|
|
11
|
+
return makeDecoratable(name, Component ?? nullRenderer);
|
|
20
12
|
}
|
|
21
13
|
|
|
22
14
|
//# sourceMappingURL=makeComposable.js.map
|
package/makeComposable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["createContext","makeDecoratable","ComposableContext","displayName","nullRenderer","makeComposable","name","Component"],"sources":["makeComposable.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { GenericComponent } from \"~/types.js\";\nimport { makeDecoratable } from \"~/makeDecoratable.js\";\n\nconst ComposableContext = createContext<string[]>([]);\nComposableContext.displayName = \"ComposableContext\";\n\nconst nullRenderer = () => null;\n\n/**\n * @deprecated Use `makeDecoratable` instead.\n */\nexport function makeComposable<T extends GenericComponent>(name: string, Component?: T) {\n return makeDecoratable(name, Component ?? nullRenderer);\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAErC,SAASC,eAAe;AAExB,MAAMC,iBAAiB,gBAAGF,aAAa,CAAW,EAAE,CAAC;AACrDE,iBAAiB,CAACC,WAAW,GAAG,mBAAmB;AAEnD,MAAMC,YAAY,GAAGA,CAAA,KAAM,IAAI;;AAE/B;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAA6BC,IAAY,EAAEC,SAAa,EAAE;EACpF,OAAON,eAAe,CAACK,IAAI,EAAEC,SAAS,IAAIH,YAAY,CAAC;AAC3D","ignoreList":[]}
|
package/makeDecoratable.d.ts
CHANGED
|
@@ -1,34 +1,29 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { DecoratableComponent, DecoratableHook, GenericComponent, GenericHook } from "./types";
|
|
3
|
-
declare
|
|
4
|
-
declare type GetProps<T extends (...args: any) => any> = Parameters<T> extends [infer First] ? undefined extends First ? NoProps : First : NoProps;
|
|
5
|
-
declare function makeDecoratableComponent<T extends GenericComponent>(name: string, Component?: T): GenericComponent<import("./createDecorator").GetDecorateeParams<import("./createDecorator").GetDecoratee<DecoratableComponent<{
|
|
6
|
-
(props: GetProps<T>): JSX.Element | null;
|
|
2
|
+
import type { DecoratableComponent, DecoratableHook, GenericComponent, GenericHook } from "./types.js";
|
|
3
|
+
declare function makeDecoratableComponent<T extends GenericComponent>(name: string, Component?: T): T & {
|
|
7
4
|
original: T;
|
|
8
5
|
originalName: string;
|
|
9
6
|
displayName: string;
|
|
10
|
-
}
|
|
11
|
-
original:
|
|
12
|
-
(props: GetProps<T>): JSX.Element | null;
|
|
7
|
+
} & {
|
|
8
|
+
original: T & {
|
|
13
9
|
original: T;
|
|
14
10
|
originalName: string;
|
|
15
11
|
displayName: string;
|
|
16
|
-
}
|
|
12
|
+
};
|
|
17
13
|
originalName: string;
|
|
18
14
|
displayName: string;
|
|
19
15
|
} & {
|
|
20
|
-
createDecorator: (decorator: import("
|
|
21
|
-
(props: GetProps<T>): JSX.Element | null;
|
|
16
|
+
createDecorator: (decorator: import("~/types.js").ComponentDecorator<import("./createDecorator.js").GetDecoratee<DecoratableComponent<T & {
|
|
22
17
|
original: T;
|
|
23
18
|
originalName: string;
|
|
24
19
|
displayName: string;
|
|
25
|
-
}
|
|
20
|
+
}>>>) => (props: unknown) => React.JSX.Element;
|
|
26
21
|
};
|
|
27
|
-
export declare function makeDecoratableHook<T extends GenericHook>(hook: T): GenericHook<import("./createDecorator").GetDecorateeParams<import("./createDecorator").GetDecoratee<DecoratableHook<T>>>, ReturnType<import("./createDecorator").GetDecoratee<DecoratableHook<T>>>> & {
|
|
28
|
-
original: GenericHook<import("./createDecorator").GetDecorateeParams<import("./createDecorator").GetDecoratee<DecoratableHook<T>>>, ReturnType<import("./createDecorator").GetDecoratee<DecoratableHook<T>>>>;
|
|
22
|
+
export declare function makeDecoratableHook<T extends GenericHook>(hook: T): GenericHook<import("./createDecorator.js").GetDecorateeParams<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>, ReturnType<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>> & {
|
|
23
|
+
original: GenericHook<import("./createDecorator.js").GetDecorateeParams<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>, ReturnType<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>>;
|
|
29
24
|
originalName: string;
|
|
30
25
|
} & {
|
|
31
|
-
createDecorator: (decorator: import("
|
|
26
|
+
createDecorator: (decorator: import("~/types.js").Decorator<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>) => () => React.JSX.Element;
|
|
32
27
|
};
|
|
33
28
|
export declare function createVoidComponent<T>(): (props: T) => JSX.Element | null;
|
|
34
29
|
export declare function makeDecoratable<T extends GenericHook>(hook: T): ReturnType<typeof makeDecoratableHook<T>>;
|
package/makeDecoratable.js
CHANGED
|
@@ -1,66 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.createVoidComponent = createVoidComponent;
|
|
9
|
-
exports.makeDecoratable = makeDecoratable;
|
|
10
|
-
exports.makeDecoratableHook = makeDecoratableHook;
|
|
11
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
12
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var _Context = require("./Context");
|
|
14
|
-
var _decorators = require("./decorators");
|
|
15
|
-
var ComposableContext = /*#__PURE__*/(0, _react.createContext)([]);
|
|
1
|
+
import React, { createContext, useContext, useMemo } from "react";
|
|
2
|
+
import { useComponent } from "./Context.js";
|
|
3
|
+
import { withDecoratorFactory, withHookDecoratorFactory } from "./decorators.js";
|
|
4
|
+
const ComposableContext = /*#__PURE__*/createContext([]);
|
|
16
5
|
ComposableContext.displayName = "ComposableContext";
|
|
17
6
|
function useComposableParents() {
|
|
18
|
-
|
|
7
|
+
const context = useContext(ComposableContext);
|
|
19
8
|
if (!context) {
|
|
20
9
|
return [];
|
|
21
10
|
}
|
|
22
11
|
return context;
|
|
23
12
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var Component = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : nullRenderer;
|
|
32
|
-
var Decoratable = function Decoratable(props) {
|
|
33
|
-
var parents = useComposableParents();
|
|
34
|
-
var ComposedComponent = (0, _Context.useComponent)(Component);
|
|
35
|
-
var context = (0, _react.useMemo)(function () {
|
|
36
|
-
return [].concat((0, _toConsumableArray2.default)(parents), [name]);
|
|
37
|
-
}, [parents, name]);
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(ComposableContext.Provider, {
|
|
13
|
+
const nullRenderer = () => null;
|
|
14
|
+
function makeDecoratableComponent(name, Component = nullRenderer) {
|
|
15
|
+
const Decoratable = props => {
|
|
16
|
+
const parents = useComposableParents();
|
|
17
|
+
const ComposedComponent = useComponent(Component);
|
|
18
|
+
const context = useMemo(() => [...parents, name], [parents, name]);
|
|
19
|
+
return /*#__PURE__*/React.createElement(ComposableContext.Provider, {
|
|
39
20
|
value: context
|
|
40
|
-
}, /*#__PURE__*/
|
|
21
|
+
}, /*#__PURE__*/React.createElement(ComposedComponent, props, props.children));
|
|
22
|
+
};
|
|
23
|
+
const staticProps = {
|
|
24
|
+
original: Component,
|
|
25
|
+
originalName: name,
|
|
26
|
+
displayName: `Decoratable<${name}>`
|
|
41
27
|
};
|
|
42
|
-
Decoratable
|
|
43
|
-
Decoratable.originalName = name;
|
|
44
|
-
Decoratable.displayName = "Decoratable<".concat(name, ">");
|
|
45
|
-
return (0, _decorators.withDecoratorFactory)()(Decoratable);
|
|
28
|
+
return withDecoratorFactory()(Object.assign(Decoratable, staticProps));
|
|
46
29
|
}
|
|
47
|
-
function makeDecoratableHook(hook) {
|
|
48
|
-
|
|
49
|
-
|
|
30
|
+
export function makeDecoratableHook(hook) {
|
|
31
|
+
const decoratableHook = params => {
|
|
32
|
+
const composedHook = useComponent(hook);
|
|
50
33
|
return composedHook(params);
|
|
51
34
|
};
|
|
52
35
|
decoratableHook.original = hook;
|
|
53
|
-
return
|
|
36
|
+
return withHookDecoratorFactory()(decoratableHook);
|
|
54
37
|
}
|
|
55
|
-
function createVoidComponent() {
|
|
38
|
+
export function createVoidComponent() {
|
|
56
39
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
57
|
-
return
|
|
40
|
+
return props => {
|
|
58
41
|
return null;
|
|
59
42
|
};
|
|
60
43
|
}
|
|
61
|
-
function makeDecoratable(hookOrName, Component) {
|
|
44
|
+
export function makeDecoratable(hookOrName, Component) {
|
|
62
45
|
if (Component) {
|
|
63
|
-
|
|
46
|
+
const component = makeDecoratableComponent(hookOrName, /*#__PURE__*/React.memo(Component));
|
|
47
|
+
component.original.displayName = hookOrName;
|
|
48
|
+
return component;
|
|
64
49
|
}
|
|
65
50
|
return makeDecoratableHook(hookOrName);
|
|
66
51
|
}
|
package/makeDecoratable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useMemo","useComponent","withDecoratorFactory","withHookDecoratorFactory","ComposableContext","displayName","useComposableParents","context","nullRenderer","makeDecoratableComponent","name","Component","Decoratable","props","parents","ComposedComponent","createElement","Provider","value","children","staticProps","original","originalName","Object","assign","makeDecoratableHook","hook","decoratableHook","params","composedHook","createVoidComponent","makeDecoratable","hookOrName","component","memo"],"sources":["makeDecoratable.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\nimport { useComponent } from \"./Context.js\";\nimport type {\n DecoratableComponent,\n DecoratableHook,\n GenericComponent,\n GenericHook\n} from \"~/types.js\";\nimport { withDecoratorFactory, withHookDecoratorFactory } from \"~/decorators.js\";\n\nconst ComposableContext = createContext<string[]>([]);\nComposableContext.displayName = \"ComposableContext\";\n\nfunction useComposableParents() {\n const context = useContext(ComposableContext);\n if (!context) {\n return [];\n }\n\n return context;\n}\n\nconst nullRenderer = () => null;\n\nfunction makeDecoratableComponent<T extends GenericComponent>(\n name: string,\n Component: T = nullRenderer as unknown as T\n) {\n const Decoratable = (props: React.ComponentProps<T>): JSX.Element | null => {\n const parents = useComposableParents();\n const ComposedComponent = useComponent(Component) as GenericComponent<\n React.ComponentProps<T>\n >;\n\n const context = useMemo(() => [...parents, name], [parents, name]);\n\n return (\n <ComposableContext.Provider value={context}>\n <ComposedComponent {...props}>{props.children}</ComposedComponent>\n </ComposableContext.Provider>\n );\n };\n\n const staticProps = {\n original: Component,\n originalName: name,\n displayName: `Decoratable<${name}>`\n };\n\n return withDecoratorFactory()(\n Object.assign(Decoratable, staticProps) as DecoratableComponent<\n typeof Component & typeof staticProps\n >\n );\n}\n\nexport function makeDecoratableHook<T extends GenericHook>(hook: T) {\n const decoratableHook = (params: Parameters<T>) => {\n const composedHook = useComponent(hook);\n\n return composedHook(params) as DecoratableHook<T>;\n };\n\n decoratableHook.original = hook;\n\n return withHookDecoratorFactory()(decoratableHook as DecoratableHook<T>);\n}\n\nexport function createVoidComponent<T>() {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n return (props: T): JSX.Element | null => {\n return null;\n };\n}\n\nexport function makeDecoratable<T extends GenericHook>(\n hook: T\n): ReturnType<typeof makeDecoratableHook<T>>;\nexport function makeDecoratable<T extends GenericComponent>(\n name: string,\n Component: T\n): ReturnType<typeof makeDecoratableComponent<T>>;\nexport function makeDecoratable(hookOrName: any, Component?: any) {\n if (Component) {\n const component = makeDecoratableComponent(hookOrName, React.memo(Component));\n component.original.displayName = hookOrName;\n return component;\n }\n\n return makeDecoratableHook(hookOrName);\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACjE,SAASC,YAAY;AAOrB,SAASC,oBAAoB,EAAEC,wBAAwB;AAEvD,MAAMC,iBAAiB,gBAAGN,aAAa,CAAW,EAAE,CAAC;AACrDM,iBAAiB,CAACC,WAAW,GAAG,mBAAmB;AAEnD,SAASC,oBAAoBA,CAAA,EAAG;EAC5B,MAAMC,OAAO,GAAGR,UAAU,CAACK,iBAAiB,CAAC;EAC7C,IAAI,CAACG,OAAO,EAAE;IACV,OAAO,EAAE;EACb;EAEA,OAAOA,OAAO;AAClB;AAEA,MAAMC,YAAY,GAAGA,CAAA,KAAM,IAAI;AAE/B,SAASC,wBAAwBA,CAC7BC,IAAY,EACZC,SAAY,GAAGH,YAA4B,EAC7C;EACE,MAAMI,WAAW,GAAIC,KAA8B,IAAyB;IACxE,MAAMC,OAAO,GAAGR,oBAAoB,CAAC,CAAC;IACtC,MAAMS,iBAAiB,GAAGd,YAAY,CAACU,SAAS,CAE/C;IAED,MAAMJ,OAAO,GAAGP,OAAO,CAAC,MAAM,CAAC,GAAGc,OAAO,EAAEJ,IAAI,CAAC,EAAE,CAACI,OAAO,EAAEJ,IAAI,CAAC,CAAC;IAElE,oBACIb,KAAA,CAAAmB,aAAA,CAACZ,iBAAiB,CAACa,QAAQ;MAACC,KAAK,EAAEX;IAAQ,gBACvCV,KAAA,CAAAmB,aAAA,CAACD,iBAAiB,EAAKF,KAAK,EAAGA,KAAK,CAACM,QAA4B,CACzC,CAAC;EAErC,CAAC;EAED,MAAMC,WAAW,GAAG;IAChBC,QAAQ,EAAEV,SAAS;IACnBW,YAAY,EAAEZ,IAAI;IAClBL,WAAW,EAAE,eAAeK,IAAI;EACpC,CAAC;EAED,OAAOR,oBAAoB,CAAC,CAAC,CACzBqB,MAAM,CAACC,MAAM,CAACZ,WAAW,EAAEQ,WAAW,CAG1C,CAAC;AACL;AAEA,OAAO,SAASK,mBAAmBA,CAAwBC,IAAO,EAAE;EAChE,MAAMC,eAAe,GAAIC,MAAqB,IAAK;IAC/C,MAAMC,YAAY,GAAG5B,YAAY,CAACyB,IAAI,CAAC;IAEvC,OAAOG,YAAY,CAACD,MAAM,CAAC;EAC/B,CAAC;EAEDD,eAAe,CAACN,QAAQ,GAAGK,IAAI;EAE/B,OAAOvB,wBAAwB,CAAC,CAAC,CAACwB,eAAqC,CAAC;AAC5E;AAEA,OAAO,SAASG,mBAAmBA,CAAA,EAAM;EACrC;EACA,OAAQjB,KAAQ,IAAyB;IACrC,OAAO,IAAI;EACf,CAAC;AACL;AASA,OAAO,SAASkB,eAAeA,CAACC,UAAe,EAAErB,SAAe,EAAE;EAC9D,IAAIA,SAAS,EAAE;IACX,MAAMsB,SAAS,GAAGxB,wBAAwB,CAACuB,UAAU,eAAEnC,KAAK,CAACqC,IAAI,CAACvB,SAAS,CAAC,CAAC;IAC7EsB,SAAS,CAACZ,QAAQ,CAAChB,WAAW,GAAG2B,UAAU;IAC3C,OAAOC,SAAS;EACpB;EAEA,OAAOR,mBAAmB,CAACO,UAAU,CAAC;AAC1C","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/react-composition",
|
|
3
|
-
"version": "6.0.0-
|
|
3
|
+
"version": "6.0.0-rc.0",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"main": "index.js",
|
|
5
6
|
"repository": {
|
|
6
7
|
"type": "git",
|
|
@@ -14,29 +15,19 @@
|
|
|
14
15
|
],
|
|
15
16
|
"license": "MIT",
|
|
16
17
|
"dependencies": {
|
|
17
|
-
"@babel/runtime": "7.24.1",
|
|
18
18
|
"@types/react": "18.2.79",
|
|
19
19
|
"react": "18.2.0",
|
|
20
20
|
"react-dom": "18.2.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@babel/cli": "7.24.1",
|
|
24
|
-
"@babel/core": "7.24.3",
|
|
25
|
-
"@babel/preset-env": "7.24.3",
|
|
26
|
-
"@babel/preset-typescript": "7.24.1",
|
|
27
23
|
"@testing-library/react": "15.0.7",
|
|
28
|
-
"@webiny/
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"typescript": "4.7.4"
|
|
24
|
+
"@webiny/build-tools": "6.0.0-rc.0",
|
|
25
|
+
"typescript": "5.9.3",
|
|
26
|
+
"vitest": "4.0.18"
|
|
32
27
|
},
|
|
33
28
|
"publishConfig": {
|
|
34
29
|
"access": "public",
|
|
35
30
|
"directory": "dist"
|
|
36
31
|
},
|
|
37
|
-
"
|
|
38
|
-
"build": "yarn webiny run build",
|
|
39
|
-
"watch": "yarn webiny run watch"
|
|
40
|
-
},
|
|
41
|
-
"gitHead": "aa8dbfbbd5ad13ec271adba6f2431e02991a300f"
|
|
32
|
+
"gitHead": "0f2aa699f4642e550ab62c96fcd050e8d02345c9"
|
|
42
33
|
}
|