@webiny/react-composition 5.35.0-beta.1 → 5.35.0-beta.2
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.js +1 -7
- package/Compose.js.map +1 -1
- package/Context.d.ts +1 -1
- package/Context.js +7 -25
- package/Context.js.map +1 -1
- package/createComponentPlugin.js +0 -5
- package/createComponentPlugin.js.map +1 -1
- package/index.js +0 -8
- package/index.js.map +1 -1
- package/makeComposable.js +0 -15
- package/makeComposable.js.map +1 -1
- package/package.json +4 -4
package/Compose.js
CHANGED
|
@@ -4,25 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Compose = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _Context = require("./Context");
|
|
11
|
-
|
|
12
9
|
var Compose = function Compose(props) {
|
|
13
10
|
var _useComposition = (0, _Context.useComposition)(),
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
composeComponent = _useComposition.composeComponent;
|
|
16
12
|
(0, _react.useEffect)(function () {
|
|
17
13
|
if (typeof props.component.original === "undefined") {
|
|
18
14
|
console.warn("You must make your component \"<".concat(props.component.displayName, ">\" composable, by using the makeComposable() function!"));
|
|
19
15
|
return;
|
|
20
16
|
}
|
|
21
|
-
|
|
22
17
|
var hocs = Array.isArray(props.with) ? props.with : [props.with];
|
|
23
18
|
return composeComponent(props.component.original, hocs);
|
|
24
19
|
}, [props.with]);
|
|
25
20
|
return null;
|
|
26
21
|
};
|
|
27
|
-
|
|
28
22
|
exports.Compose = Compose;
|
package/Compose.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Compose","props","useComposition","composeComponent","useEffect","component","original","console","warn","displayName","hocs","Array","isArray","with"],"sources":["Compose.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { HigherOrderComponent, useComposition } from \"./Context\";\n\nexport interface ComposableFC<TProps = unknown> extends React.FC<TProps> {\n original: React.FC<TProps>;\n originalName: string;\n}\n\nexport interface ComposeProps {\n /**\n * Component to compose.\n * NOTE: ComposableFC<TProps> use `any` because the type of the component props is irrelevant.\n */\n component: ComposableFC<any>;\n with: HigherOrderComponent | HigherOrderComponent[];\n}\n\nexport const Compose: React.FC<ComposeProps> = props => {\n const { composeComponent } = useComposition();\n\n useEffect(() => {\n if (typeof props.component.original === \"undefined\") {\n console.warn(\n `You must make your component \"<${props.component.displayName}>\" composable, by using the makeComposable() function!`\n );\n\n return;\n }\n\n const hocs = Array.isArray(props.with) ? props.with : [props.with];\n return composeComponent(props.component.original, hocs);\n }, [props.with]);\n\n return null;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["Compose","props","useComposition","composeComponent","useEffect","component","original","console","warn","displayName","hocs","Array","isArray","with"],"sources":["Compose.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { HigherOrderComponent, useComposition } from \"./Context\";\n\nexport interface ComposableFC<TProps = unknown> extends React.FC<TProps> {\n original: React.FC<TProps>;\n originalName: string;\n}\n\nexport interface ComposeProps {\n /**\n * Component to compose.\n * NOTE: ComposableFC<TProps> use `any` because the type of the component props is irrelevant.\n */\n component: ComposableFC<any>;\n with: HigherOrderComponent | HigherOrderComponent[];\n}\n\nexport const Compose: React.FC<ComposeProps> = props => {\n const { composeComponent } = useComposition();\n\n useEffect(() => {\n if (typeof props.component.original === \"undefined\") {\n console.warn(\n `You must make your component \"<${props.component.displayName}>\" composable, by using the makeComposable() function!`\n );\n\n return;\n }\n\n const hocs = Array.isArray(props.with) ? props.with : [props.with];\n return composeComponent(props.component.original, hocs);\n }, [props.with]);\n\n return null;\n};\n"],"mappings":";;;;;;AAAA;AACA;AAgBO,IAAMA,OAA+B,GAAG,SAAlCA,OAA+B,CAAGC,KAAK,EAAI;EACpD,sBAA6B,IAAAC,uBAAc,GAAE;IAArCC,gBAAgB,mBAAhBA,gBAAgB;EAExB,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,OAAOH,KAAK,CAACI,SAAS,CAACC,QAAQ,KAAK,WAAW,EAAE;MACjDC,OAAO,CAACC,IAAI,2CAC0BP,KAAK,CAACI,SAAS,CAACI,WAAW,6DAChE;MAED;IACJ;IAEA,IAAMC,IAAI,GAAGC,KAAK,CAACC,OAAO,CAACX,KAAK,CAACY,IAAI,CAAC,GAAGZ,KAAK,CAACY,IAAI,GAAG,CAACZ,KAAK,CAACY,IAAI,CAAC;IAClE,OAAOV,gBAAgB,CAACF,KAAK,CAACI,SAAS,CAACC,QAAQ,EAAEI,IAAI,CAAC;EAC3D,CAAC,EAAE,CAACT,KAAK,CAACY,IAAI,CAAC,CAAC;EAEhB,OAAO,IAAI;AACf,CAAC;AAAC"}
|
package/Context.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ interface CompositionContext {
|
|
|
26
26
|
}
|
|
27
27
|
declare const CompositionContext: React.Context<CompositionContext | undefined>;
|
|
28
28
|
export declare const CompositionProvider: React.FC;
|
|
29
|
-
export declare function useComponent(Component: ComponentType<any>): React.
|
|
29
|
+
export declare function useComponent(Component: ComponentType<any>): React.ComponentClass<unknown, any> | React.FunctionComponent<unknown>;
|
|
30
30
|
/**
|
|
31
31
|
* This hook will throw an error if composition context doesn't exist.
|
|
32
32
|
*/
|
package/Context.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -12,35 +10,26 @@ exports.compose = compose;
|
|
|
12
10
|
exports.useComponent = useComponent;
|
|
13
11
|
exports.useComposition = useComposition;
|
|
14
12
|
exports.useOptionalComposition = useOptionalComposition;
|
|
15
|
-
|
|
16
13
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
-
|
|
18
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
|
-
|
|
20
15
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
-
|
|
22
16
|
function compose() {
|
|
23
17
|
for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
24
18
|
fns[_key] = arguments[_key];
|
|
25
19
|
}
|
|
26
|
-
|
|
27
20
|
return function ComposedComponent(Base) {
|
|
28
21
|
return fns.reduceRight(function (Component, hoc) {
|
|
29
22
|
return hoc(Component);
|
|
30
23
|
}, Base);
|
|
31
24
|
};
|
|
32
25
|
}
|
|
33
|
-
|
|
34
26
|
var CompositionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
|
|
35
|
-
|
|
36
27
|
var CompositionProvider = function CompositionProvider(_ref) {
|
|
37
28
|
var children = _ref.children;
|
|
38
|
-
|
|
39
29
|
var _useState = (0, _react.useState)(new Map()),
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
31
|
+
components = _useState2[0],
|
|
32
|
+
setComponents = _useState2[1];
|
|
44
33
|
var composeComponent = (0, _react.useCallback)(function (component, hocs) {
|
|
45
34
|
setComponents(function (prevComponents) {
|
|
46
35
|
var components = new Map(prevComponents);
|
|
@@ -54,8 +43,9 @@ var CompositionProvider = function CompositionProvider(_ref) {
|
|
|
54
43
|
hocs: newHocs
|
|
55
44
|
});
|
|
56
45
|
return components;
|
|
57
|
-
});
|
|
46
|
+
});
|
|
58
47
|
|
|
48
|
+
// Return a function that will remove the added HOCs.
|
|
59
49
|
return function () {
|
|
60
50
|
setComponents(function (prevComponents) {
|
|
61
51
|
var components = new Map(prevComponents);
|
|
@@ -90,37 +80,29 @@ var CompositionProvider = function CompositionProvider(_ref) {
|
|
|
90
80
|
value: context
|
|
91
81
|
}, children);
|
|
92
82
|
};
|
|
93
|
-
|
|
94
83
|
exports.CompositionProvider = CompositionProvider;
|
|
95
|
-
|
|
96
84
|
function useComponent(Component) {
|
|
97
85
|
var context = useOptionalComposition();
|
|
98
|
-
|
|
99
86
|
if (!context) {
|
|
100
87
|
return Component;
|
|
101
88
|
}
|
|
102
|
-
|
|
103
89
|
return context.getComponent(Component) || Component;
|
|
104
90
|
}
|
|
91
|
+
|
|
105
92
|
/**
|
|
106
93
|
* This hook will throw an error if composition context doesn't exist.
|
|
107
94
|
*/
|
|
108
|
-
|
|
109
|
-
|
|
110
95
|
function useComposition() {
|
|
111
96
|
var context = (0, _react.useContext)(CompositionContext);
|
|
112
|
-
|
|
113
97
|
if (!context) {
|
|
114
98
|
throw new Error("You're missing a <CompositionProvider> higher up in your component hierarchy!");
|
|
115
99
|
}
|
|
116
|
-
|
|
117
100
|
return context;
|
|
118
101
|
}
|
|
102
|
+
|
|
119
103
|
/**
|
|
120
104
|
* This hook will not throw an error if composition context doesn't exist.
|
|
121
105
|
*/
|
|
122
|
-
|
|
123
|
-
|
|
124
106
|
function useOptionalComposition() {
|
|
125
107
|
return (0, _react.useContext)(CompositionContext);
|
|
126
108
|
}
|
package/Context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["compose","fns","ComposedComponent","Base","reduceRight","Component","hoc","CompositionContext","createContext","undefined","CompositionProvider","children","useState","Map","components","setComponents","composeComponent","useCallback","component","hocs","prevComponents","recipe","get","newHocs","set","reverse","newHOCs","filter","includes","NewComponent","getComponent","composedComponent","context","useMemo","useComponent","useOptionalComposition","useComposition","useContext","Error"],"sources":["Context.tsx"],"sourcesContent":["import React, {\n FC,\n ComponentType,\n useState,\n useCallback,\n createContext,\n useContext,\n useMemo\n} from \"react\";\n\nexport function compose(...fns: HigherOrderComponent[]) {\n return function ComposedComponent(Base: FC<unknown>): FC<unknown> {\n return fns.reduceRight((Component, hoc) => hoc(Component), Base);\n };\n}\n\ninterface ComposedComponent {\n /**\n * Ready to use React component.\n */\n component: ComponentType<unknown>;\n /**\n * HOCs used to compose the original component.\n */\n hocs: HigherOrderComponent[];\n}\n\n/**\n * IMPORTANT: TInputProps default type is `any` because this interface is use as a prop type in the `Compose` component.\n * You can pass any HigherOrderComponent as a prop, regardless of its TInputProps type. The only way to allow that is\n * to let it be `any` in this interface.\n */\nexport interface HigherOrderComponent<TInputProps = any, TOutputProps = TInputProps> {\n (Component: FC<TInputProps>): FC<TOutputProps>;\n}\n\ntype ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;\n\ninterface CompositionContext {\n components: ComposedComponents;\n getComponent(component: ComponentType<unknown>): ComponentType<unknown> | undefined;\n composeComponent(component: ComponentType<unknown>, hocs: HigherOrderComponent[]): void;\n}\n\nconst CompositionContext = createContext<CompositionContext | undefined>(undefined);\n\nexport const CompositionProvider: React.FC = ({ children }) => {\n const [components, setComponents] = useState<ComposedComponents>(new Map());\n\n const composeComponent = useCallback(\n (component, hocs) => {\n setComponents(prevComponents => {\n const components = new Map(prevComponents);\n const recipe = components.get(component) || { component: null, hocs: [] };\n\n const newHocs = [...(recipe.hocs || []), ...hocs];\n\n components.set(component, {\n component: compose(...[...newHocs].reverse())(component),\n hocs: newHocs\n });\n\n return components;\n });\n\n // Return a function that will remove the added HOCs.\n return () => {\n setComponents(prevComponents => {\n const components = new Map(prevComponents);\n const recipe = components.get(component) || {\n component: null,\n hocs: []\n };\n\n const newHOCs = [...recipe.hocs].filter(hoc => !hocs.includes(hoc));\n const NewComponent = compose(...[...newHOCs].reverse())(component);\n\n components.set(component, {\n component: NewComponent,\n hocs: newHOCs\n });\n\n return components;\n });\n };\n },\n [setComponents]\n );\n\n const getComponent: CompositionContext[\"getComponent\"] = useCallback(\n Component => {\n const composedComponent = components.get(Component);\n return composedComponent ? composedComponent.component : undefined;\n },\n [components]\n );\n\n const context: CompositionContext = useMemo(\n () => ({\n getComponent,\n composeComponent,\n components\n }),\n [components, composeComponent]\n );\n\n return <CompositionContext.Provider value={context}>{children}</CompositionContext.Provider>;\n};\n\nexport function useComponent(Component: ComponentType<any>) {\n const context = useOptionalComposition();\n\n if (!context) {\n return Component;\n }\n\n return context.getComponent(Component) || Component;\n}\n\n/**\n * This hook will throw an error if composition context doesn't exist.\n */\nexport function useComposition() {\n const context = useContext(CompositionContext);\n if (!context) {\n throw new Error(\n `You're missing a <CompositionProvider> higher up in your component hierarchy!`\n );\n }\n\n return context;\n}\n\n/**\n * This hook will not throw an error if composition context doesn't exist.\n */\nexport function useOptionalComposition() {\n return useContext(CompositionContext);\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["compose","fns","ComposedComponent","Base","reduceRight","Component","hoc","CompositionContext","createContext","undefined","CompositionProvider","children","useState","Map","components","setComponents","composeComponent","useCallback","component","hocs","prevComponents","recipe","get","newHocs","set","reverse","newHOCs","filter","includes","NewComponent","getComponent","composedComponent","context","useMemo","useComponent","useOptionalComposition","useComposition","useContext","Error"],"sources":["Context.tsx"],"sourcesContent":["import React, {\n FC,\n ComponentType,\n useState,\n useCallback,\n createContext,\n useContext,\n useMemo\n} from \"react\";\n\nexport function compose(...fns: HigherOrderComponent[]) {\n return function ComposedComponent(Base: FC<unknown>): FC<unknown> {\n return fns.reduceRight((Component, hoc) => hoc(Component), Base);\n };\n}\n\ninterface ComposedComponent {\n /**\n * Ready to use React component.\n */\n component: ComponentType<unknown>;\n /**\n * HOCs used to compose the original component.\n */\n hocs: HigherOrderComponent[];\n}\n\n/**\n * IMPORTANT: TInputProps default type is `any` because this interface is use as a prop type in the `Compose` component.\n * You can pass any HigherOrderComponent as a prop, regardless of its TInputProps type. The only way to allow that is\n * to let it be `any` in this interface.\n */\nexport interface HigherOrderComponent<TInputProps = any, TOutputProps = TInputProps> {\n (Component: FC<TInputProps>): FC<TOutputProps>;\n}\n\ntype ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;\n\ninterface CompositionContext {\n components: ComposedComponents;\n getComponent(component: ComponentType<unknown>): ComponentType<unknown> | undefined;\n composeComponent(component: ComponentType<unknown>, hocs: HigherOrderComponent[]): void;\n}\n\nconst CompositionContext = createContext<CompositionContext | undefined>(undefined);\n\nexport const CompositionProvider: React.FC = ({ children }) => {\n const [components, setComponents] = useState<ComposedComponents>(new Map());\n\n const composeComponent = useCallback(\n (component, hocs) => {\n setComponents(prevComponents => {\n const components = new Map(prevComponents);\n const recipe = components.get(component) || { component: null, hocs: [] };\n\n const newHocs = [...(recipe.hocs || []), ...hocs];\n\n components.set(component, {\n component: compose(...[...newHocs].reverse())(component),\n hocs: newHocs\n });\n\n return components;\n });\n\n // Return a function that will remove the added HOCs.\n return () => {\n setComponents(prevComponents => {\n const components = new Map(prevComponents);\n const recipe = components.get(component) || {\n component: null,\n hocs: []\n };\n\n const newHOCs = [...recipe.hocs].filter(hoc => !hocs.includes(hoc));\n const NewComponent = compose(...[...newHOCs].reverse())(component);\n\n components.set(component, {\n component: NewComponent,\n hocs: newHOCs\n });\n\n return components;\n });\n };\n },\n [setComponents]\n );\n\n const getComponent: CompositionContext[\"getComponent\"] = useCallback(\n Component => {\n const composedComponent = components.get(Component);\n return composedComponent ? composedComponent.component : undefined;\n },\n [components]\n );\n\n const context: CompositionContext = useMemo(\n () => ({\n getComponent,\n composeComponent,\n components\n }),\n [components, composeComponent]\n );\n\n return <CompositionContext.Provider value={context}>{children}</CompositionContext.Provider>;\n};\n\nexport function useComponent(Component: ComponentType<any>) {\n const context = useOptionalComposition();\n\n if (!context) {\n return Component;\n }\n\n return context.getComponent(Component) || Component;\n}\n\n/**\n * This hook will throw an error if composition context doesn't exist.\n */\nexport function useComposition() {\n const context = useContext(CompositionContext);\n if (!context) {\n throw new Error(\n `You're missing a <CompositionProvider> higher up in your component hierarchy!`\n );\n }\n\n return context;\n}\n\n/**\n * This hook will not throw an error if composition context doesn't exist.\n */\nexport function useOptionalComposition() {\n return useContext(CompositionContext);\n}\n"],"mappings":"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"}
|
package/createComponentPlugin.js
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.createComponentPlugin = createComponentPlugin;
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _index = require("./index");
|
|
13
|
-
|
|
14
10
|
/**
|
|
15
11
|
* Creates a component which, when mounted, registers a Higher Order Component for the given base component.
|
|
16
12
|
* This is particularly useful for decorating (wrapping) existing composable components.
|
|
@@ -23,7 +19,6 @@ function createComponentPlugin(Base, hoc) {
|
|
|
23
19
|
with: hoc
|
|
24
20
|
});
|
|
25
21
|
};
|
|
26
|
-
|
|
27
22
|
ComponentPlugin.displayName = Base.displayName;
|
|
28
23
|
return ComponentPlugin;
|
|
29
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createComponentPlugin","Base","hoc","ComponentPlugin","displayName"],"sources":["createComponentPlugin.tsx"],"sourcesContent":["import React, { ComponentProps } from \"react\";\nimport { ComposableFC, Compose, HigherOrderComponent } from \"./index\";\n\n/**\n * Creates a component which, when mounted, registers a Higher Order Component for the given base component.\n * This is particularly useful for decorating (wrapping) existing composable components.\n * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.\n */\nexport function createComponentPlugin<T extends ComposableFC<ComponentProps<T>>>(\n Base: T,\n hoc: HigherOrderComponent<ComponentProps<T>>\n): React.FC {\n const ComponentPlugin = () => <Compose component={Base} with={hoc} />;\n ComponentPlugin.displayName = Base.displayName;\n return ComponentPlugin;\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["createComponentPlugin","Base","hoc","ComponentPlugin","displayName"],"sources":["createComponentPlugin.tsx"],"sourcesContent":["import React, { ComponentProps } from \"react\";\nimport { ComposableFC, Compose, HigherOrderComponent } from \"./index\";\n\n/**\n * Creates a component which, when mounted, registers a Higher Order Component for the given base component.\n * This is particularly useful for decorating (wrapping) existing composable components.\n * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.\n */\nexport function createComponentPlugin<T extends ComposableFC<ComponentProps<T>>>(\n Base: T,\n hoc: HigherOrderComponent<ComponentProps<T>>\n): React.FC {\n const ComponentPlugin = () => <Compose component={Base} with={hoc} />;\n ComponentPlugin.displayName = Base.displayName;\n return ComponentPlugin;\n}\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACO,SAASA,qBAAqB,CACjCC,IAAO,EACPC,GAA4C,EACpC;EACR,IAAMC,eAAe,GAAG,SAAlBA,eAAe;IAAA,oBAAS,6BAAC,cAAO;MAAC,SAAS,EAAEF,IAAK;MAAC,IAAI,EAAEC;IAAI,EAAG;EAAA;EACrEC,eAAe,CAACC,WAAW,GAAGH,IAAI,CAACG,WAAW;EAC9C,OAAOD,eAAe;AAC1B"}
|
package/index.js
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
var _Context = require("./Context");
|
|
8
|
-
|
|
9
7
|
Object.keys(_Context).forEach(function (key) {
|
|
10
8
|
if (key === "default" || key === "__esModule") return;
|
|
11
9
|
if (key in exports && exports[key] === _Context[key]) return;
|
|
@@ -16,9 +14,7 @@ Object.keys(_Context).forEach(function (key) {
|
|
|
16
14
|
}
|
|
17
15
|
});
|
|
18
16
|
});
|
|
19
|
-
|
|
20
17
|
var _Compose = require("./Compose");
|
|
21
|
-
|
|
22
18
|
Object.keys(_Compose).forEach(function (key) {
|
|
23
19
|
if (key === "default" || key === "__esModule") return;
|
|
24
20
|
if (key in exports && exports[key] === _Compose[key]) return;
|
|
@@ -29,9 +25,7 @@ Object.keys(_Compose).forEach(function (key) {
|
|
|
29
25
|
}
|
|
30
26
|
});
|
|
31
27
|
});
|
|
32
|
-
|
|
33
28
|
var _makeComposable = require("./makeComposable");
|
|
34
|
-
|
|
35
29
|
Object.keys(_makeComposable).forEach(function (key) {
|
|
36
30
|
if (key === "default" || key === "__esModule") return;
|
|
37
31
|
if (key in exports && exports[key] === _makeComposable[key]) return;
|
|
@@ -42,9 +36,7 @@ Object.keys(_makeComposable).forEach(function (key) {
|
|
|
42
36
|
}
|
|
43
37
|
});
|
|
44
38
|
});
|
|
45
|
-
|
|
46
39
|
var _createComponentPlugin = require("./createComponentPlugin");
|
|
47
|
-
|
|
48
40
|
Object.keys(_createComponentPlugin).forEach(function (key) {
|
|
49
41
|
if (key === "default" || key === "__esModule") return;
|
|
50
42
|
if (key in exports && exports[key] === _createComponentPlugin[key]) return;
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Context\";\nexport * from \"./Compose\";\nexport * from \"./makeComposable\";\nexport * from \"./createComponentPlugin\";\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Context\";\nexport * from \"./Compose\";\nexport * from \"./makeComposable\";\nexport * from \"./createComponentPlugin\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
package/makeComposable.js
CHANGED
|
@@ -1,37 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
|
|
5
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports.makeComposable = makeComposable;
|
|
11
|
-
|
|
12
9
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
|
|
16
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
12
|
var _lodash = _interopRequireDefault(require("lodash.debounce"));
|
|
19
|
-
|
|
20
13
|
var _Context = require("./Context");
|
|
21
|
-
|
|
22
14
|
var ComposableContext = /*#__PURE__*/(0, _react.createContext)([]);
|
|
23
15
|
ComposableContext.displayName = "ComposableContext";
|
|
24
|
-
|
|
25
16
|
function useComposableParents() {
|
|
26
17
|
var context = (0, _react.useContext)(ComposableContext);
|
|
27
|
-
|
|
28
18
|
if (!context) {
|
|
29
19
|
return [];
|
|
30
20
|
}
|
|
31
|
-
|
|
32
21
|
return context;
|
|
33
22
|
}
|
|
34
|
-
|
|
35
23
|
var createEmptyRenderer = function createEmptyRenderer(name) {
|
|
36
24
|
return (0, _defineProperty2.default)({}, name, function () {
|
|
37
25
|
(0, _react.useEffect)(function () {
|
|
@@ -47,12 +35,10 @@ var createEmptyRenderer = function createEmptyRenderer(name) {
|
|
|
47
35
|
return null;
|
|
48
36
|
})[name];
|
|
49
37
|
};
|
|
50
|
-
|
|
51
38
|
function makeComposable(name, Component) {
|
|
52
39
|
if (!Component) {
|
|
53
40
|
Component = createEmptyRenderer(name);
|
|
54
41
|
}
|
|
55
|
-
|
|
56
42
|
var Composable = function Composable(props) {
|
|
57
43
|
var parents = useComposableParents();
|
|
58
44
|
var ComposedComponent = (0, _Context.useComponent)(Component);
|
|
@@ -63,7 +49,6 @@ function makeComposable(name, Component) {
|
|
|
63
49
|
value: context
|
|
64
50
|
}, /*#__PURE__*/_react.default.createElement(ComposedComponent, props, props.children));
|
|
65
51
|
};
|
|
66
|
-
|
|
67
52
|
Component.displayName = name;
|
|
68
53
|
Composable.original = Component;
|
|
69
54
|
Composable.originalName = name;
|
package/makeComposable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ComposableContext","createContext","displayName","useComposableParents","context","useContext","createEmptyRenderer","name","useEffect","debounced","debounce","console","info","cancel","makeComposable","Component","Composable","props","parents","ComposedComponent","useComponent","useMemo","children","original","originalName"],"sources":["makeComposable.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\nimport { ComposableFC } from \"./Compose\";\nimport { useComponent } from \"./Context\";\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 createEmptyRenderer = (name: string): React.FC => {\n return {\n [name]: function () {\n useEffect(() => {\n // We need to debounce the log, as it sometimes only requires a single tick to get the new\n // composed component to render, and we don't want to scare developers for no reason.\n const debounced = debounce(() => {\n console.info(\n `<${name}/> is not implemented! To provide an implementation, use the <Compose/> component.`\n );\n }, 100);\n\n return () => {\n debounced.cancel();\n };\n }, []);\n\n return null;\n }\n }[name];\n};\n\nexport function makeComposable<TProps>(name: string, Component?: React.FC<TProps>) {\n if (!Component) {\n Component = createEmptyRenderer(name);\n }\n\n const Composable: ComposableFC<TProps> = props => {\n const parents = useComposableParents();\n const ComposedComponent = useComponent(Component as React.FC<TProps>);\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 Component.displayName = name;\n\n Composable.original = Component;\n Composable.originalName = name;\n Composable.displayName = `Composable<${name}>`;\n\n return Composable;\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["ComposableContext","createContext","displayName","useComposableParents","context","useContext","createEmptyRenderer","name","useEffect","debounced","debounce","console","info","cancel","makeComposable","Component","Composable","props","parents","ComposedComponent","useComponent","useMemo","children","original","originalName"],"sources":["makeComposable.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\nimport { ComposableFC } from \"./Compose\";\nimport { useComponent } from \"./Context\";\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 createEmptyRenderer = (name: string): React.FC => {\n return {\n [name]: function () {\n useEffect(() => {\n // We need to debounce the log, as it sometimes only requires a single tick to get the new\n // composed component to render, and we don't want to scare developers for no reason.\n const debounced = debounce(() => {\n console.info(\n `<${name}/> is not implemented! To provide an implementation, use the <Compose/> component.`\n );\n }, 100);\n\n return () => {\n debounced.cancel();\n };\n }, []);\n\n return null;\n }\n }[name];\n};\n\nexport function makeComposable<TProps>(name: string, Component?: React.FC<TProps>) {\n if (!Component) {\n Component = createEmptyRenderer(name);\n }\n\n const Composable: ComposableFC<TProps> = props => {\n const parents = useComposableParents();\n const ComposedComponent = useComponent(Component as React.FC<TProps>);\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 Component.displayName = name;\n\n Composable.original = Component;\n Composable.originalName = name;\n Composable.displayName = `Composable<${name}>`;\n\n return Composable;\n}\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AAEA,IAAMA,iBAAiB,gBAAG,IAAAC,oBAAa,EAAW,EAAE,CAAC;AACrDD,iBAAiB,CAACE,WAAW,GAAG,mBAAmB;AAEnD,SAASC,oBAAoB,GAAG;EAC5B,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACL,iBAAiB,CAAC;EAC7C,IAAI,CAACI,OAAO,EAAE;IACV,OAAO,EAAE;EACb;EAEA,OAAOA,OAAO;AAClB;AAEA,IAAME,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,IAAY,EAAe;EACpD,OAAO,kCACFA,IAAI,EAAG,YAAY;IAChB,IAAAC,gBAAS,EAAC,YAAM;MACZ;MACA;MACA,IAAMC,SAAS,GAAG,IAAAC,eAAQ,EAAC,YAAM;QAC7BC,OAAO,CAACC,IAAI,YACJL,IAAI,wFACX;MACL,CAAC,EAAE,GAAG,CAAC;MAEP,OAAO,YAAM;QACTE,SAAS,CAACI,MAAM,EAAE;MACtB,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,IAAI;EACf,CAAC,EACHN,IAAI,CAAC;AACX,CAAC;AAEM,SAASO,cAAc,CAASP,IAAY,EAAEQ,SAA4B,EAAE;EAC/E,IAAI,CAACA,SAAS,EAAE;IACZA,SAAS,GAAGT,mBAAmB,CAACC,IAAI,CAAC;EACzC;EAEA,IAAMS,UAAgC,GAAG,SAAnCA,UAAgC,CAAGC,KAAK,EAAI;IAC9C,IAAMC,OAAO,GAAGf,oBAAoB,EAAE;IACtC,IAAMgB,iBAAiB,GAAG,IAAAC,qBAAY,EAACL,SAAS,CAAqB;IAErE,IAAMX,OAAO,GAAG,IAAAiB,cAAO,EAAC;MAAA,kDAAUH,OAAO,IAAEX,IAAI;IAAA,CAAC,EAAE,CAACW,OAAO,EAAEX,IAAI,CAAC,CAAC;IAElE,oBACI,6BAAC,iBAAiB,CAAC,QAAQ;MAAC,KAAK,EAAEH;IAAQ,gBACvC,6BAAC,iBAAiB,EAAKa,KAAK,EAAGA,KAAK,CAACK,QAAQ,CAAqB,CACzC;EAErC,CAAC;EAEDP,SAAS,CAACb,WAAW,GAAGK,IAAI;EAE5BS,UAAU,CAACO,QAAQ,GAAGR,SAAS;EAC/BC,UAAU,CAACQ,YAAY,GAAGjB,IAAI;EAC9BS,UAAU,CAACd,WAAW,wBAAiBK,IAAI,MAAG;EAE9C,OAAOS,UAAU;AACrB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/react-composition",
|
|
3
|
-
"version": "5.35.0-beta.
|
|
3
|
+
"version": "5.35.0-beta.2",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"@babel/core": "^7.19.3",
|
|
26
26
|
"@babel/preset-env": "^7.19.4",
|
|
27
27
|
"@babel/preset-typescript": "^7.18.6",
|
|
28
|
-
"@webiny/cli": "^5.35.0-beta.
|
|
29
|
-
"@webiny/project-utils": "^5.35.0-beta.
|
|
28
|
+
"@webiny/cli": "^5.35.0-beta.2",
|
|
29
|
+
"@webiny/project-utils": "^5.35.0-beta.2",
|
|
30
30
|
"ttypescript": "^1.5.13",
|
|
31
31
|
"typescript": "4.7.4"
|
|
32
32
|
},
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"build": "yarn webiny run build",
|
|
39
39
|
"watch": "yarn webiny run watch"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "948cd1e05978e0ed25137ace7dd6c15ed0bf2cca"
|
|
42
42
|
}
|