@webiny/react-composition 0.0.0-unstable.97a151f74d → 0.0.0-unstable.98511f29f1

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 CHANGED
@@ -4,25 +4,21 @@ 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
-
9
+ var _CompositionScope = require("./CompositionScope");
12
10
  var Compose = function Compose(props) {
13
11
  var _useComposition = (0, _Context.useComposition)(),
14
- composeComponent = _useComposition.composeComponent;
15
-
12
+ composeComponent = _useComposition.composeComponent;
13
+ var scope = (0, _CompositionScope.useCompositionScope)();
16
14
  (0, _react.useEffect)(function () {
17
15
  if (typeof props.component.original === "undefined") {
18
16
  console.warn("You must make your component \"<".concat(props.component.displayName, ">\" composable, by using the makeComposable() function!"));
19
17
  return;
20
18
  }
21
-
22
19
  var hocs = Array.isArray(props.with) ? props.with : [props.with];
23
- return composeComponent(props.component.original, hocs);
20
+ return composeComponent(props.component.original, hocs, scope);
24
21
  }, [props.with]);
25
22
  return null;
26
23
  };
27
-
28
24
  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":";;;;;;;AAAA;;AACA;;AAgBO,IAAMA,OAA+B,GAAG,SAAlCA,OAAkC,CAAAC,KAAK,EAAI;EACpD,sBAA6B,IAAAC,uBAAA,GAA7B;EAAA,IAAQC,gBAAR,mBAAQA,gBAAR;;EAEA,IAAAC,gBAAA,EAAU,YAAM;IACZ,IAAI,OAAOH,KAAK,CAACI,SAAN,CAAgBC,QAAvB,KAAoC,WAAxC,EAAqD;MACjDC,OAAO,CAACC,IAAR,2CACsCP,KAAK,CAACI,SAAN,CAAgBI,WADtD;MAIA;IACH;;IAED,IAAMC,IAAI,GAAGC,KAAK,CAACC,OAAN,CAAcX,KAAK,CAACY,IAApB,IAA4BZ,KAAK,CAACY,IAAlC,GAAyC,CAACZ,KAAK,CAACY,IAAP,CAAtD;IACA,OAAOV,gBAAgB,CAACF,KAAK,CAACI,SAAN,CAAgBC,QAAjB,EAA2BI,IAA3B,CAAvB;EACH,CAXD,EAWG,CAACT,KAAK,CAACY,IAAP,CAXH;EAaA,OAAO,IAAP;AACH,CAjBM"}
1
+ {"version":3,"names":["_react","require","_Context","_CompositionScope","Compose","props","_useComposition","useComposition","composeComponent","scope","useCompositionScope","useEffect","component","original","console","warn","concat","displayName","hocs","Array","isArray","with","exports"],"sources":["Compose.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { HigherOrderComponent, useComposition } from \"./Context\";\nimport { useCompositionScope } from \"~/CompositionScope\";\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 const scope = useCompositionScope();\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, scope);\n }, [props.with]);\n\n return null;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAgBO,IAAMG,OAA+B,GAAG,SAAlCA,OAA+BA,CAAGC,KAAK,EAAI;EACpD,IAAAC,eAAA,GAA6B,IAAAC,uBAAc,EAAC,CAAC;IAArCC,gBAAgB,GAAAF,eAAA,CAAhBE,gBAAgB;EACxB,IAAMC,KAAK,GAAG,IAAAC,qCAAmB,EAAC,CAAC;EAEnC,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,OAAON,KAAK,CAACO,SAAS,CAACC,QAAQ,KAAK,WAAW,EAAE;MACjDC,OAAO,CAACC,IAAI,oCAAAC,MAAA,CAC0BX,KAAK,CAACO,SAAS,CAACK,WAAW,4DACjE,CAAC;MAED;IACJ;IAEA,IAAMC,IAAI,GAAGC,KAAK,CAACC,OAAO,CAACf,KAAK,CAACgB,IAAI,CAAC,GAAGhB,KAAK,CAACgB,IAAI,GAAG,CAAChB,KAAK,CAACgB,IAAI,CAAC;IAClE,OAAOb,gBAAgB,CAACH,KAAK,CAACO,SAAS,CAACC,QAAQ,EAAEK,IAAI,EAAET,KAAK,CAAC;EAClE,CAAC,EAAE,CAACJ,KAAK,CAACgB,IAAI,CAAC,CAAC;EAEhB,OAAO,IAAI;AACf,CAAC;AAACC,OAAA,CAAAlB,OAAA,GAAAA,OAAA"}
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ export interface CompositionScopeContext {
3
+ name: string;
4
+ }
5
+ interface CompositionScopeProps {
6
+ name: string;
7
+ children: React.ReactNode;
8
+ }
9
+ export declare const CompositionScope: ({ name, children }: CompositionScopeProps) => JSX.Element;
10
+ export declare function useCompositionScope(): string | undefined;
11
+ export {};
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.CompositionScope = void 0;
8
+ exports.useCompositionScope = useCompositionScope;
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var CompositionScopeContext = /*#__PURE__*/_react.default.createContext(undefined);
11
+ var CompositionScope = function CompositionScope(_ref) {
12
+ var name = _ref.name,
13
+ children = _ref.children;
14
+ return /*#__PURE__*/_react.default.createElement(CompositionScopeContext.Provider, {
15
+ value: {
16
+ name: name
17
+ }
18
+ }, children);
19
+ };
20
+ exports.CompositionScope = CompositionScope;
21
+ function useCompositionScope() {
22
+ var context = _react.default.useContext(CompositionScopeContext);
23
+ if (!context) {
24
+ return undefined;
25
+ }
26
+ return context.name;
27
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","CompositionScopeContext","React","createContext","undefined","CompositionScope","_ref","name","children","default","createElement","Provider","value","exports","useCompositionScope","context","useContext"],"sources":["CompositionScope.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface CompositionScopeContext {\n name: string;\n}\n\nconst CompositionScopeContext = React.createContext<CompositionScopeContext | undefined>(undefined);\n\ninterface CompositionScopeProps {\n name: string;\n children: React.ReactNode;\n}\n\nexport const CompositionScope = ({ name, children }: CompositionScopeProps) => {\n return (\n <CompositionScopeContext.Provider value={{ name }}>\n {children}\n </CompositionScopeContext.Provider>\n );\n};\n\nexport function useCompositionScope() {\n const context = React.useContext(CompositionScopeContext);\n if (!context) {\n return undefined;\n }\n return context.name;\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAMC,uBAAuB,gBAAGC,cAAK,CAACC,aAAa,CAAsCC,SAAS,CAAC;AAO5F,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAAkD;EAAA,IAA5CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAC7C,oBACIV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACT,uBAAuB,CAACU,QAAQ;IAACC,KAAK,EAAE;MAAEL,IAAI,EAAJA;IAAK;EAAE,GAC7CC,QAC6B,CAAC;AAE3C,CAAC;AAACK,OAAA,CAAAR,gBAAA,GAAAA,gBAAA;AAEK,SAASS,mBAAmBA,CAAA,EAAG;EAClC,IAAMC,OAAO,GAAGb,cAAK,CAACc,UAAU,CAACf,uBAAuB,CAAC;EACzD,IAAI,CAACc,OAAO,EAAE;IACV,OAAOX,SAAS;EACpB;EACA,OAAOW,OAAO,CAACR,IAAI;AACvB"}
package/Context.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { FC, ComponentType } from "react";
2
- export declare function compose(...fns: HigherOrderComponent[]): (Base: FC<unknown>) => FC<unknown>;
2
+ export declare function compose(...fns: Decorator[]): (Base: FC<unknown>) => FC<unknown>;
3
3
  interface ComposedComponent {
4
4
  /**
5
5
  * Ready to use React component.
@@ -8,25 +8,36 @@ interface ComposedComponent {
8
8
  /**
9
9
  * HOCs used to compose the original component.
10
10
  */
11
- hocs: HigherOrderComponent[];
11
+ hocs: Decorator[];
12
+ /**
13
+ * Component composition can be scoped.
14
+ */
15
+ scope?: string;
12
16
  }
13
17
  /**
14
- * IMPORTANT: TInputProps default type is `any` because this interface is use as a prop type in the `Compose` component.
15
- * You can pass any HigherOrderComponent as a prop, regardless of its TInputProps type. The only way to allow that is
18
+ * IMPORTANT: TProps default type is `any` because this interface is use as a prop type in the `Compose` component.
19
+ * You can pass any Decorator as a prop, regardless of its TProps type. The only way to allow that is
16
20
  * to let it be `any` in this interface.
17
21
  */
18
- export interface HigherOrderComponent<TInputProps = any, TOutputProps = TInputProps> {
19
- (Component: FC<TInputProps>): FC<TOutputProps>;
22
+ export interface Decorator<TProps = any> {
23
+ (Component: FC<TProps>): FC<TProps>;
24
+ }
25
+ /**
26
+ * @deprecated Use `Decorator` instead.
27
+ */
28
+ export interface HigherOrderComponent<TProps = any, TOutput = TProps> {
29
+ (Component: FC<TProps>): FC<TOutput>;
20
30
  }
21
31
  declare type ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;
32
+ declare type ComponentScopes = Map<string, ComposedComponents>;
22
33
  interface CompositionContext {
23
- components: ComposedComponents;
24
- getComponent(component: ComponentType<unknown>): ComponentType<unknown> | undefined;
25
- composeComponent(component: ComponentType<unknown>, hocs: HigherOrderComponent[]): void;
34
+ components: ComponentScopes;
35
+ getComponent(component: ComponentType<unknown>, scope?: string): ComponentType<unknown> | undefined;
36
+ composeComponent(component: ComponentType<unknown>, hocs: HigherOrderComponent[], scope?: string): void;
26
37
  }
27
38
  declare const CompositionContext: React.Context<CompositionContext | undefined>;
28
39
  export declare const CompositionProvider: React.FC;
29
- export declare function useComponent(Component: ComponentType<any>): React.ComponentClass<unknown, any> | React.FunctionComponent<unknown>;
40
+ export declare function useComponent(Component: ComponentType<any>): React.ComponentType<any>;
30
41
  /**
31
42
  * This hook will throw an error if composition context doesn't exist.
32
43
  */
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,18 +10,14 @@ 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
-
16
+ var _CompositionScope = require("./CompositionScope");
22
17
  function compose() {
23
18
  for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
24
19
  fns[_key] = arguments[_key];
25
20
  }
26
-
27
21
  return function ComposedComponent(Base) {
28
22
  return fns.reduceRight(function (Component, hoc) {
29
23
  return hoc(Component);
@@ -31,35 +25,47 @@ function compose() {
31
25
  };
32
26
  }
33
27
 
34
- var CompositionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
28
+ /**
29
+ * IMPORTANT: TProps default type is `any` because this interface is use as a prop type in the `Compose` component.
30
+ * You can pass any Decorator as a prop, regardless of its TProps type. The only way to allow that is
31
+ * to let it be `any` in this interface.
32
+ */
35
33
 
34
+ /**
35
+ * @deprecated Use `Decorator` instead.
36
+ */
37
+
38
+ var CompositionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
36
39
  var CompositionProvider = function CompositionProvider(_ref) {
37
40
  var children = _ref.children;
38
-
39
41
  var _useState = (0, _react.useState)(new Map()),
40
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
41
- components = _useState2[0],
42
- setComponents = _useState2[1];
43
-
42
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
43
+ components = _useState2[0],
44
+ setComponents = _useState2[1];
44
45
  var composeComponent = (0, _react.useCallback)(function (component, hocs) {
46
+ var scope = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "*";
45
47
  setComponents(function (prevComponents) {
46
48
  var components = new Map(prevComponents);
47
- var recipe = components.get(component) || {
49
+ var scopeMap = components.get(scope) || new Map();
50
+ var recipe = scopeMap.get(component) || {
48
51
  component: null,
49
52
  hocs: []
50
53
  };
51
54
  var newHocs = [].concat((0, _toConsumableArray2.default)(recipe.hocs || []), (0, _toConsumableArray2.default)(hocs));
52
- components.set(component, {
55
+ scopeMap.set(component, {
53
56
  component: compose.apply(void 0, (0, _toConsumableArray2.default)((0, _toConsumableArray2.default)(newHocs).reverse()))(component),
54
57
  hocs: newHocs
55
58
  });
59
+ components.set(scope, scopeMap);
56
60
  return components;
57
- }); // Return a function that will remove the added HOCs.
61
+ });
58
62
 
63
+ // Return a function that will remove the added HOCs.
59
64
  return function () {
60
65
  setComponents(function (prevComponents) {
61
66
  var components = new Map(prevComponents);
62
- var recipe = components.get(component) || {
67
+ var scopeMap = components.get(scope) || new Map();
68
+ var recipe = scopeMap.get(component) || {
63
69
  component: null,
64
70
  hocs: []
65
71
  };
@@ -67,16 +73,25 @@ var CompositionProvider = function CompositionProvider(_ref) {
67
73
  return !hocs.includes(hoc);
68
74
  });
69
75
  var NewComponent = compose.apply(void 0, (0, _toConsumableArray2.default)((0, _toConsumableArray2.default)(newHOCs).reverse()))(component);
70
- components.set(component, {
76
+ scopeMap.set(component, {
71
77
  component: NewComponent,
72
78
  hocs: newHOCs
73
79
  });
80
+ components.set(scope, scopeMap);
74
81
  return components;
75
82
  });
76
83
  };
77
84
  }, [setComponents]);
78
85
  var getComponent = (0, _react.useCallback)(function (Component) {
79
- var composedComponent = components.get(Component);
86
+ var scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "*";
87
+ var scopeMap = components.get(scope) || new Map();
88
+ var composedComponent = scopeMap.get(Component);
89
+ if (!composedComponent && scope !== "*") {
90
+ // Check if a default scope component exists
91
+ var defaultScopeMap = components.get("*") || new Map();
92
+ var defaultComponent = defaultScopeMap.get(Component);
93
+ return defaultComponent ? defaultComponent.component : undefined;
94
+ }
80
95
  return composedComponent ? composedComponent.component : undefined;
81
96
  }, [components]);
82
97
  var context = (0, _react.useMemo)(function () {
@@ -90,37 +105,30 @@ var CompositionProvider = function CompositionProvider(_ref) {
90
105
  value: context
91
106
  }, children);
92
107
  };
93
-
94
108
  exports.CompositionProvider = CompositionProvider;
95
-
96
109
  function useComponent(Component) {
97
110
  var context = useOptionalComposition();
98
-
111
+ var scope = (0, _CompositionScope.useCompositionScope)();
99
112
  if (!context) {
100
113
  return Component;
101
114
  }
102
-
103
- return context.getComponent(Component) || Component;
115
+ return context.getComponent(Component, scope) || Component;
104
116
  }
117
+
105
118
  /**
106
119
  * This hook will throw an error if composition context doesn't exist.
107
120
  */
108
-
109
-
110
121
  function useComposition() {
111
122
  var context = (0, _react.useContext)(CompositionContext);
112
-
113
123
  if (!context) {
114
124
  throw new Error("You're missing a <CompositionProvider> higher up in your component hierarchy!");
115
125
  }
116
-
117
126
  return context;
118
127
  }
128
+
119
129
  /**
120
130
  * This hook will not throw an error if composition context doesn't exist.
121
131
  */
122
-
123
-
124
132
  function useOptionalComposition() {
125
133
  return (0, _react.useContext)(CompositionContext);
126
134
  }
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":"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"}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_CompositionScope","compose","_len","arguments","length","fns","Array","_key","ComposedComponent","Base","reduceRight","Component","hoc","CompositionContext","createContext","undefined","CompositionProvider","_ref","children","_useState","useState","Map","_useState2","_slicedToArray2","default","components","setComponents","composeComponent","useCallback","component","hocs","scope","prevComponents","scopeMap","get","recipe","newHocs","concat","_toConsumableArray2","set","apply","reverse","newHOCs","filter","includes","NewComponent","getComponent","composedComponent","defaultScopeMap","defaultComponent","context","useMemo","createElement","Provider","value","exports","useComponent","useOptionalComposition","useCompositionScope","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\";\nimport { useCompositionScope } from \"~/CompositionScope\";\n\nexport function compose(...fns: Decorator[]) {\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: Decorator[];\n /**\n * Component composition can be scoped.\n */\n scope?: string;\n}\n\n/**\n * IMPORTANT: TProps default type is `any` because this interface is use as a prop type in the `Compose` component.\n * You can pass any Decorator as a prop, regardless of its TProps type. The only way to allow that is\n * to let it be `any` in this interface.\n */\nexport interface Decorator<TProps = any> {\n (Component: FC<TProps>): FC<TProps>;\n}\n\n/**\n * @deprecated Use `Decorator` instead.\n */\nexport interface HigherOrderComponent<TProps = any, TOutput = TProps> {\n (Component: FC<TProps>): FC<TOutput>;\n}\n\ntype ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;\ntype ComponentScopes = Map<string, ComposedComponents>;\n\ninterface CompositionContext {\n components: ComponentScopes;\n getComponent(\n component: ComponentType<unknown>,\n scope?: string\n ): ComponentType<unknown> | undefined;\n composeComponent(\n component: ComponentType<unknown>,\n hocs: HigherOrderComponent[],\n scope?: string\n ): void;\n}\n\nconst CompositionContext = createContext<CompositionContext | undefined>(undefined);\n\nexport const CompositionProvider: React.FC = ({ children }) => {\n const [components, setComponents] = useState<ComponentScopes>(new Map());\n\n const composeComponent = useCallback(\n (component, hocs, scope = \"*\") => {\n setComponents(prevComponents => {\n const components = new Map(prevComponents);\n const scopeMap: ComposedComponents = components.get(scope) || new Map();\n const recipe = scopeMap.get(component) || { component: null, hocs: [] };\n\n const newHocs = [...(recipe.hocs || []), ...hocs];\n\n scopeMap.set(component, {\n component: compose(...[...newHocs].reverse())(component),\n hocs: newHocs\n });\n\n components.set(scope, scopeMap);\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 scopeMap: ComposedComponents = components.get(scope) || new Map();\n const recipe = scopeMap.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 scopeMap.set(component, {\n component: NewComponent,\n hocs: newHOCs\n });\n\n components.set(scope, scopeMap);\n return components;\n });\n };\n },\n [setComponents]\n );\n\n const getComponent: CompositionContext[\"getComponent\"] = useCallback(\n (Component, scope = \"*\") => {\n const scopeMap: ComposedComponents = components.get(scope) || new Map();\n const composedComponent = scopeMap.get(Component);\n if (!composedComponent && scope !== \"*\") {\n // Check if a default scope component exists\n const defaultScopeMap: ComposedComponents = components.get(\"*\") || new Map();\n const defaultComponent = defaultScopeMap.get(Component);\n return defaultComponent ? defaultComponent.component : undefined;\n }\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 const scope = useCompositionScope();\n\n if (!context) {\n return Component;\n }\n\n return context.getComponent(Component, scope) || 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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"}
@@ -1,3 +1,8 @@
1
1
  import React, { ComponentProps } from "react";
2
2
  import { ComposableFC, HigherOrderComponent } from "./index";
3
+ /**
4
+ * Creates a component which, when mounted, registers a Higher Order Component for the given base component.
5
+ * This is particularly useful for decorating (wrapping) existing composable components.
6
+ * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.
7
+ */
3
8
  export declare function createComponentPlugin<T extends ComposableFC<ComponentProps<T>>>(Base: T, hoc: HigherOrderComponent<ComponentProps<T>>): React.FC;
@@ -1,16 +1,17 @@
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
-
10
+ /**
11
+ * Creates a component which, when mounted, registers a Higher Order Component for the given base component.
12
+ * This is particularly useful for decorating (wrapping) existing composable components.
13
+ * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.
14
+ */
14
15
  function createComponentPlugin(Base, hoc) {
15
16
  var ComponentPlugin = function ComponentPlugin() {
16
17
  return /*#__PURE__*/_react.default.createElement(_index.Compose, {
@@ -18,7 +19,6 @@ function createComponentPlugin(Base, hoc) {
18
19
  with: hoc
19
20
  });
20
21
  };
21
-
22
22
  ComponentPlugin.displayName = Base.displayName;
23
23
  return ComponentPlugin;
24
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\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;;AAEO,SAASA,qBAAT,CACHC,IADG,EAEHC,GAFG,EAGK;EACR,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;IAAA,oBAAM,6BAAC,cAAD;MAAS,SAAS,EAAEF,IAApB;MAA0B,IAAI,EAAEC;IAAhC,EAAN;EAAA,CAAxB;;EACAC,eAAe,CAACC,WAAhB,GAA8BH,IAAI,CAACG,WAAnC;EACA,OAAOD,eAAP;AACH"}
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_index","createComponentPlugin","Base","hoc","ComponentPlugin","default","createElement","Compose","component","with","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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACA;AACO,SAASE,qBAAqBA,CACjCC,IAAO,EACPC,GAA4C,EACpC;EACR,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAA;IAAA,oBAASP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,MAAA,CAAAO,OAAO;MAACC,SAAS,EAAEN,IAAK;MAACO,IAAI,EAAEN;IAAI,CAAE,CAAC;EAAA;EACrEC,eAAe,CAACM,WAAW,GAAGR,IAAI,CAACQ,WAAW;EAC9C,OAAON,eAAe;AAC1B"}
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { Decorator } from "./Context";
3
+ import { ComposableFC } from "./Compose";
4
+ interface ShouldDecorate<TDecorator = any, TComponent = any> {
5
+ (decoratorProps: TDecorator, componentProps: TComponent): boolean;
6
+ }
7
+ export declare function createConditionalDecorator(shouldDecorate: ShouldDecorate, decorator: Decorator, decoratorProps: unknown): Decorator;
8
+ export declare function createDecoratorFactory<TDecorator>(): <TComponent>(Component: ComposableFC<TComponent>, shouldDecorate?: ShouldDecorate<TDecorator, TComponent> | undefined) => (decorator: Decorator<TComponent>) => (props: TDecorator) => JSX.Element;
9
+ export {};
package/decorators.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.createConditionalDecorator = createConditionalDecorator;
8
+ exports.createDecoratorFactory = createDecoratorFactory;
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _Compose = require("./Compose");
11
+ function createConditionalDecorator(shouldDecorate, decorator, decoratorProps) {
12
+ return function (Original) {
13
+ return function ShouldDecorate(props) {
14
+ if (shouldDecorate(decoratorProps, props)) {
15
+ var Component = decorator(Original);
16
+ return /*#__PURE__*/_react.default.createElement(Component, props);
17
+ }
18
+ return /*#__PURE__*/_react.default.createElement(Original, props);
19
+ };
20
+ };
21
+ }
22
+ function createDecoratorFactory() {
23
+ return function from(Component, shouldDecorate) {
24
+ return function createDecorator(decorator) {
25
+ return function DecoratorPlugin(props) {
26
+ if (shouldDecorate) {
27
+ return /*#__PURE__*/_react.default.createElement(_Compose.Compose, {
28
+ component: Component,
29
+ with: createConditionalDecorator(shouldDecorate, decorator, props)
30
+ });
31
+ }
32
+ return /*#__PURE__*/_react.default.createElement(_Compose.Compose, {
33
+ component: Component,
34
+ with: decorator
35
+ });
36
+ };
37
+ };
38
+ };
39
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_Compose","createConditionalDecorator","shouldDecorate","decorator","decoratorProps","Original","ShouldDecorate","props","Component","default","createElement","createDecoratorFactory","from","createDecorator","DecoratorPlugin","Compose","component","with"],"sources":["decorators.tsx"],"sourcesContent":["import React from \"react\";\nimport { Decorator } from \"~/Context\";\nimport { ComposableFC, Compose } from \"~/Compose\";\n\ninterface ShouldDecorate<TDecorator = any, TComponent = any> {\n (decoratorProps: TDecorator, componentProps: TComponent): boolean;\n}\n\nexport function createConditionalDecorator(\n shouldDecorate: ShouldDecorate,\n decorator: Decorator,\n decoratorProps: unknown\n): Decorator {\n return (Original: React.FC) => {\n return function ShouldDecorate(props) {\n if (shouldDecorate(decoratorProps, props)) {\n const Component = decorator(Original);\n return <Component {...props} />;\n }\n\n return <Original {...props} />;\n };\n };\n}\n\nexport function createDecoratorFactory<TDecorator>() {\n return function from<TComponent>(\n Component: ComposableFC<TComponent>,\n shouldDecorate?: ShouldDecorate<TDecorator, TComponent>\n ) {\n return function createDecorator(decorator: Decorator<TComponent>) {\n return function DecoratorPlugin(props: TDecorator) {\n if (shouldDecorate) {\n return (\n <Compose\n component={Component}\n with={createConditionalDecorator(shouldDecorate, decorator, props)}\n />\n );\n }\n return <Compose component={Component} with={decorator} />;\n };\n };\n };\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAMO,SAASE,0BAA0BA,CACtCC,cAA8B,EAC9BC,SAAoB,EACpBC,cAAuB,EACd;EACT,OAAO,UAACC,QAAkB,EAAK;IAC3B,OAAO,SAASC,cAAcA,CAACC,KAAK,EAAE;MAClC,IAAIL,cAAc,CAACE,cAAc,EAAEG,KAAK,CAAC,EAAE;QACvC,IAAMC,SAAS,GAAGL,SAAS,CAACE,QAAQ,CAAC;QACrC,oBAAOR,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACF,SAAS,EAAKD,KAAQ,CAAC;MACnC;MAEA,oBAAOV,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACL,QAAQ,EAAKE,KAAQ,CAAC;IAClC,CAAC;EACL,CAAC;AACL;AAEO,SAASI,sBAAsBA,CAAA,EAAe;EACjD,OAAO,SAASC,IAAIA,CAChBJ,SAAmC,EACnCN,cAAuD,EACzD;IACE,OAAO,SAASW,eAAeA,CAACV,SAAgC,EAAE;MAC9D,OAAO,SAASW,eAAeA,CAACP,KAAiB,EAAE;QAC/C,IAAIL,cAAc,EAAE;UAChB,oBACIL,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,QAAA,CAAAe,OAAO;YACJC,SAAS,EAAER,SAAU;YACrBS,IAAI,EAAEhB,0BAA0B,CAACC,cAAc,EAAEC,SAAS,EAAEI,KAAK;UAAE,CACtE,CAAC;QAEV;QACA,oBAAOV,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,QAAA,CAAAe,OAAO;UAACC,SAAS,EAAER,SAAU;UAACS,IAAI,EAAEd;QAAU,CAAE,CAAC;MAC7D,CAAC;IACL,CAAC;EACL,CAAC;AACL"}
package/index.d.ts CHANGED
@@ -2,3 +2,5 @@ export * from "./Context";
2
2
  export * from "./Compose";
3
3
  export * from "./makeComposable";
4
4
  export * from "./createComponentPlugin";
5
+ export * from "./decorators";
6
+ export * from "./CompositionScope";
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;
@@ -54,4 +46,26 @@ Object.keys(_createComponentPlugin).forEach(function (key) {
54
46
  return _createComponentPlugin[key];
55
47
  }
56
48
  });
49
+ });
50
+ var _decorators = require("./decorators");
51
+ Object.keys(_decorators).forEach(function (key) {
52
+ if (key === "default" || key === "__esModule") return;
53
+ if (key in exports && exports[key] === _decorators[key]) return;
54
+ Object.defineProperty(exports, key, {
55
+ enumerable: true,
56
+ get: function get() {
57
+ return _decorators[key];
58
+ }
59
+ });
60
+ });
61
+ var _CompositionScope = require("./CompositionScope");
62
+ Object.keys(_CompositionScope).forEach(function (key) {
63
+ if (key === "default" || key === "__esModule") return;
64
+ if (key in exports && exports[key] === _CompositionScope[key]) return;
65
+ Object.defineProperty(exports, key, {
66
+ enumerable: true,
67
+ get: function get() {
68
+ return _CompositionScope[key];
69
+ }
70
+ });
57
71
  });
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":";;;;;;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"}
1
+ {"version":3,"names":["_Context","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_Compose","_makeComposable","_createComponentPlugin","_decorators","_CompositionScope"],"sources":["index.ts"],"sourcesContent":["export * from \"./Context\";\nexport * from \"./Compose\";\nexport * from \"./makeComposable\";\nexport * from \"./createComponentPlugin\";\nexport * from \"./decorators\";\nexport * from \"./CompositionScope\";\n"],"mappings":";;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,QAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,QAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,QAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,QAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,QAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,QAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,QAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,eAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,eAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,eAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAE,eAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,sBAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,sBAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,sBAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAG,sBAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,WAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,WAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,WAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAI,WAAA,CAAAR,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,iBAAA,GAAAb,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,iBAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAS,iBAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAK,iBAAA,CAAAT,GAAA;IAAA;EAAA;AAAA"}
package/makeComposable.js CHANGED
@@ -1,43 +1,31 @@
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
- var _lodash = _interopRequireDefault(require("lodash.debounce"));
19
-
12
+ var _debounce = _interopRequireDefault(require("lodash/debounce"));
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 () {
38
26
  // We need to debounce the log, as it sometimes only requires a single tick to get the new
39
27
  // composed component to render, and we don't want to scare developers for no reason.
40
- var debounced = (0, _lodash.default)(function () {
28
+ var debounced = (0, _debounce.default)(function () {
41
29
  console.info("<".concat(name, "/> is not implemented! To provide an implementation, use the <Compose/> component."));
42
30
  }, 100);
43
31
  return 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;
@@ -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":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA,IAAMA,iBAAiB,gBAAG,IAAAC,oBAAA,EAAwB,EAAxB,CAA1B;AACAD,iBAAiB,CAACE,WAAlB,GAAgC,mBAAhC;;AAEA,SAASC,oBAAT,GAAgC;EAC5B,IAAMC,OAAO,GAAG,IAAAC,iBAAA,EAAWL,iBAAX,CAAhB;;EACA,IAAI,CAACI,OAAL,EAAc;IACV,OAAO,EAAP;EACH;;EAED,OAAOA,OAAP;AACH;;AAED,IAAME,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,IAAD,EAA4B;EACpD,OAAO,kCACFA,IADE,EACK,YAAY;IAChB,IAAAC,gBAAA,EAAU,YAAM;MACZ;MACA;MACA,IAAMC,SAAS,GAAG,IAAAC,eAAA,EAAS,YAAM;QAC7BC,OAAO,CAACC,IAAR,YACQL,IADR;MAGH,CAJiB,EAIf,GAJe,CAAlB;MAMA,OAAO,YAAM;QACTE,SAAS,CAACI,MAAV;MACH,CAFD;IAGH,CAZD,EAYG,EAZH;IAcA,OAAO,IAAP;EACH,CAjBE,EAkBLN,IAlBK,CAAP;AAmBH,CApBD;;AAsBO,SAASO,cAAT,CAAgCP,IAAhC,EAA8CQ,SAA9C,EAA4E;EAC/E,IAAI,CAACA,SAAL,EAAgB;IACZA,SAAS,GAAGT,mBAAmB,CAACC,IAAD,CAA/B;EACH;;EAED,IAAMS,UAAgC,GAAG,SAAnCA,UAAmC,CAAAC,KAAK,EAAI;IAC9C,IAAMC,OAAO,GAAGf,oBAAoB,EAApC;IACA,IAAMgB,iBAAiB,GAAG,IAAAC,qBAAA,EAAaL,SAAb,CAA1B;IAEA,IAAMX,OAAO,GAAG,IAAAiB,cAAA,EAAQ;MAAA,kDAAUH,OAAV,IAAmBX,IAAnB;IAAA,CAAR,EAAkC,CAACW,OAAD,EAAUX,IAAV,CAAlC,CAAhB;IAEA,oBACI,6BAAC,iBAAD,CAAmB,QAAnB;MAA4B,KAAK,EAAEH;IAAnC,gBACI,6BAAC,iBAAD,EAAuBa,KAAvB,EAA+BA,KAAK,CAACK,QAArC,CADJ,CADJ;EAKH,CAXD;;EAaAP,SAAS,CAACb,WAAV,GAAwBK,IAAxB;EAEAS,UAAU,CAACO,QAAX,GAAsBR,SAAtB;EACAC,UAAU,CAACQ,YAAX,GAA0BjB,IAA1B;EACAS,UAAU,CAACd,WAAX,wBAAuCK,IAAvC;EAEA,OAAOS,UAAP;AACH"}
1
+ {"version":3,"names":["_react","_interopRequireWildcard","require","_debounce","_interopRequireDefault","_Context","ComposableContext","createContext","displayName","useComposableParents","context","useContext","createEmptyRenderer","name","_defineProperty2","default","useEffect","debounced","debounce","console","info","concat","cancel","makeComposable","Component","Composable","props","parents","ComposedComponent","useComponent","useMemo","_toConsumableArray2","createElement","Provider","value","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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAMI,iBAAiB,gBAAG,IAAAC,oBAAa,EAAW,EAAE,CAAC;AACrDD,iBAAiB,CAACE,WAAW,GAAG,mBAAmB;AAEnD,SAASC,oBAAoBA,CAAA,EAAG;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,mBAAmBA,CAAIC,IAAY,EAAe;EACpD,OAAO,IAAAC,gBAAA,CAAAC,OAAA,MACFF,IAAI,EAAG,YAAY;IAChB,IAAAG,gBAAS,EAAC,YAAM;MACZ;MACA;MACA,IAAMC,SAAS,GAAG,IAAAC,iBAAQ,EAAC,YAAM;QAC7BC,OAAO,CAACC,IAAI,KAAAC,MAAA,CACJR,IAAI,uFACZ,CAAC;MACL,CAAC,EAAE,GAAG,CAAC;MAEP,OAAO,YAAM;QACTI,SAAS,CAACK,MAAM,CAAC,CAAC;MACtB,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,IAAI;EACf,CAAC,EACHT,IAAI,CAAC;AACX,CAAC;AAEM,SAASU,cAAcA,CAASV,IAAY,EAAEW,SAA4B,EAAE;EAC/E,IAAI,CAACA,SAAS,EAAE;IACZA,SAAS,GAAGZ,mBAAmB,CAACC,IAAI,CAAC;EACzC;EAEA,IAAMY,UAAgC,GAAG,SAAnCA,UAAgCA,CAAGC,KAAK,EAAI;IAC9C,IAAMC,OAAO,GAAGlB,oBAAoB,CAAC,CAAC;IACtC,IAAMmB,iBAAiB,GAAG,IAAAC,qBAAY,EAACL,SAA6B,CAAC;IAErE,IAAMd,OAAO,GAAG,IAAAoB,cAAO,EAAC;MAAA,UAAAT,MAAA,KAAAU,mBAAA,CAAAhB,OAAA,EAAUY,OAAO,IAAEd,IAAI;IAAA,CAAC,EAAE,CAACc,OAAO,EAAEd,IAAI,CAAC,CAAC;IAElE,oBACIb,MAAA,CAAAe,OAAA,CAAAiB,aAAA,CAAC1B,iBAAiB,CAAC2B,QAAQ;MAACC,KAAK,EAAExB;IAAQ,gBACvCV,MAAA,CAAAe,OAAA,CAAAiB,aAAA,CAACJ,iBAAiB,EAAKF,KAAK,EAAGA,KAAK,CAACS,QAA4B,CACzC,CAAC;EAErC,CAAC;EAEDX,SAAS,CAAChB,WAAW,GAAGK,IAAI;EAE5BY,UAAU,CAACW,QAAQ,GAAGZ,SAAS;EAC/BC,UAAU,CAACY,YAAY,GAAGxB,IAAI;EAC9BY,UAAU,CAACjB,WAAW,iBAAAa,MAAA,CAAiBR,IAAI,MAAG;EAE9C,OAAOY,UAAU;AACrB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webiny/react-composition",
3
- "version": "0.0.0-unstable.97a151f74d",
3
+ "version": "0.0.0-unstable.98511f29f1",
4
4
  "main": "index.js",
5
5
  "repository": {
6
6
  "type": "git",
@@ -14,20 +14,20 @@
14
14
  ],
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
- "@babel/runtime": "7.19.0",
17
+ "@babel/runtime": "7.22.6",
18
18
  "@types/react": "17.0.39",
19
- "lodash.debounce": "4.0.8",
19
+ "lodash": "4.17.21",
20
20
  "react": "17.0.2",
21
21
  "react-dom": "17.0.2"
22
22
  },
23
23
  "devDependencies": {
24
- "@babel/cli": "^7.19.3",
25
- "@babel/core": "^7.19.3",
26
- "@babel/preset-env": "^7.19.4",
27
- "@babel/preset-typescript": "^7.18.6",
28
- "@webiny/cli": "^0.0.0-unstable.97a151f74d",
29
- "@webiny/project-utils": "^0.0.0-unstable.97a151f74d",
30
- "ttypescript": "^1.5.13",
24
+ "@babel/cli": "7.22.6",
25
+ "@babel/core": "7.22.8",
26
+ "@babel/preset-env": "7.22.7",
27
+ "@babel/preset-typescript": "7.22.5",
28
+ "@webiny/cli": "0.0.0-unstable.98511f29f1",
29
+ "@webiny/project-utils": "0.0.0-unstable.98511f29f1",
30
+ "ttypescript": "1.5.15",
31
31
  "typescript": "4.7.4"
32
32
  },
33
33
  "publishConfig": {
@@ -38,5 +38,5 @@
38
38
  "build": "yarn webiny run build",
39
39
  "watch": "yarn webiny run watch"
40
40
  },
41
- "gitHead": "97a151f74d8c5679323989fcc8cc7036be0f150e"
41
+ "gitHead": "98511f29f1e1fc7d03ed0d1379d0a0aeff6dae84"
42
42
  }