@webiny/react-composition 0.0.0-unstable.c2780f51fe → 0.0.0-unstable.c7dec08bb0

package/Compose.js

@@ -4,25 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Compose = void 0;
-
 var _react = require("react");
-
 var _Context = require("./Context");
-
+var _CompositionScope = require("./CompositionScope");
 var Compose = function Compose(props) {
   var _useComposition = (0, _Context.useComposition)(),
-      composeComponent = _useComposition.composeComponent;
-
+    composeComponent = _useComposition.composeComponent;
+  var scope = (0, _CompositionScope.useCompositionScope)();
   (0, _react.useEffect)(function () {
     if (typeof props.component.original === "undefined") {
       console.warn("You must make your component \"<".concat(props.component.displayName, ">\" composable, by using the makeComposable() function!"));
       return;
     }
-
     var hocs = Array.isArray(props.with) ? props.with : [props.with];
-    return composeComponent(props.component.original, hocs);
+    return composeComponent(props.component.original, hocs, scope);
   }, [props.with]);
   return null;
 };
-
 exports.Compose = Compose;

package/Compose.js.map

@@ -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"}
+{"version":3,"names":["Compose","props","useComposition","composeComponent","scope","useCompositionScope","useEffect","component","original","console","warn","displayName","hocs","Array","isArray","with"],"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;AACA;AACA;AAgBO,IAAMA,OAA+B,GAAG,SAAlCA,OAA+B,CAAGC,KAAK,EAAI;EACpD,sBAA6B,IAAAC,uBAAc,GAAE;IAArCC,gBAAgB,mBAAhBA,gBAAgB;EACxB,IAAMC,KAAK,GAAG,IAAAC,qCAAmB,GAAE;EAEnC,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,OAAOL,KAAK,CAACM,SAAS,CAACC,QAAQ,KAAK,WAAW,EAAE;MACjDC,OAAO,CAACC,IAAI,2CAC0BT,KAAK,CAACM,SAAS,CAACI,WAAW,6DAChE;MAED;IACJ;IAEA,IAAMC,IAAI,GAAGC,KAAK,CAACC,OAAO,CAACb,KAAK,CAACc,IAAI,CAAC,GAAGd,KAAK,CAACc,IAAI,GAAG,CAACd,KAAK,CAACc,IAAI,CAAC;IAClE,OAAOZ,gBAAgB,CAACF,KAAK,CAACM,SAAS,CAACC,QAAQ,EAAEI,IAAI,EAAER,KAAK,CAAC;EAClE,CAAC,EAAE,CAACH,KAAK,CAACc,IAAI,CAAC,CAAC;EAEhB,OAAO,IAAI;AACf,CAAC;AAAC"}

package/CompositionScope.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface CompositionScopeContext {
+    name: string;
+}
+interface CompositionScopeProps {
+    name: string;
+    children: React.ReactNode;
+}
+export declare const CompositionScope: ({ name, children }: CompositionScopeProps) => JSX.Element;
+export declare function useCompositionScope(): string | undefined;
+export {};

package/CompositionScope.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompositionScope = void 0;
+exports.useCompositionScope = useCompositionScope;
+var _react = _interopRequireDefault(require("react"));
+var CompositionScopeContext = /*#__PURE__*/_react.default.createContext(undefined);
+var CompositionScope = function CompositionScope(_ref) {
+  var name = _ref.name,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(CompositionScopeContext.Provider, {
+    value: {
+      name: name
+    }
+  }, children);
+};
+exports.CompositionScope = CompositionScope;
+function useCompositionScope() {
+  var context = _react.default.useContext(CompositionScopeContext);
+  if (!context) {
+    return undefined;
+  }
+  return context.name;
+}

package/CompositionScope.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CompositionScopeContext","React","createContext","undefined","CompositionScope","name","children","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;AAMA,IAAMA,uBAAuB,gBAAGC,cAAK,CAACC,aAAa,CAAsCC,SAAS,CAAC;AAO5F,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAAkD;EAAA,IAA5CC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;EAC7C,oBACI,6BAAC,uBAAuB,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAED,IAAI,EAAJA;IAAK;EAAE,GAC7CC,QAAQ,CACsB;AAE3C,CAAC;AAAC;AAEK,SAASC,mBAAmB,GAAG;EAClC,IAAMC,OAAO,GAAGP,cAAK,CAACQ,UAAU,CAACT,uBAAuB,CAAC;EACzD,IAAI,CAACQ,OAAO,EAAE;IACV,OAAOL,SAAS;EACpB;EACA,OAAOK,OAAO,CAACH,IAAI;AACvB"}

package/Context.d.ts

@@ -1,5 +1,5 @@
 import React, { FC, ComponentType } from "react";
-export declare function compose(...fns: HigherOrderComponent[]): (Base: FC<unknown>) => FC<unknown>;
+export declare function compose(...fns: Decorator[]): (Base: FC<unknown>) => FC<unknown>;
 interface ComposedComponent {
     /**
      * Ready to use React component.
@@ -8,21 +8,32 @@ interface ComposedComponent {
     /**
      * HOCs used to compose the original component.
      */
-    hocs: HigherOrderComponent[];
+    hocs: Decorator[];
+    /**
+     * Component composition can be scoped.
+     */
+    scope?: string;
 }
 /**
- * IMPORTANT: TInputProps default type is `any` because this interface is use as a prop type in the `Compose` component.
- * You can pass any HigherOrderComponent as a prop, regardless of its TInputProps type. The only way to allow that is
+ * IMPORTANT: TProps default type is `any` because this interface is use as a prop type in the `Compose` component.
+ * You can pass any Decorator as a prop, regardless of its TProps type. The only way to allow that is
  * to let it be `any` in this interface.
  */
-export interface HigherOrderComponent<TInputProps = any, TOutputProps = TInputProps> {
-    (Component: FC<TInputProps>): FC<TOutputProps>;
+export interface Decorator<TProps = any> {
+    (Component: FC<TProps>): FC<TProps>;
+}
+/**
+ * @deprecated Use `Decorator` instead.
+ */
+export interface HigherOrderComponent<TProps = any, TOutput = TProps> {
+    (Component: FC<TProps>): FC<TOutput>;
 }
 declare type ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;
+declare type ComponentScopes = Map<string, ComposedComponents>;
 interface CompositionContext {
-    components: ComposedComponents;
-    getComponent(component: ComponentType<unknown>): ComponentType<unknown> | undefined;
-    composeComponent(component: ComponentType<unknown>, hocs: HigherOrderComponent[]): void;
+    components: ComponentScopes;
+    getComponent(component: ComponentType<unknown>, scope?: string): ComponentType<unknown> | undefined;
+    composeComponent(component: ComponentType<unknown>, hocs: HigherOrderComponent[], scope?: string): void;
 }
 declare const CompositionContext: React.Context<CompositionContext | undefined>;
 export declare const CompositionProvider: React.FC;

package/Context.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,54 +10,51 @@ exports.compose = compose;
 exports.useComponent = useComponent;
 exports.useComposition = useComposition;
 exports.useOptionalComposition = useOptionalComposition;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _CompositionScope = require("./CompositionScope");
 function compose() {
   for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
     fns[_key] = arguments[_key];
   }
-
   return function ComposedComponent(Base) {
     return fns.reduceRight(function (Component, hoc) {
       return hoc(Component);
     }, Base);
   };
 }
-
 var CompositionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-
 var CompositionProvider = function CompositionProvider(_ref) {
   var children = _ref.children;
-
   var _useState = (0, _react.useState)(new Map()),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      components = _useState2[0],
-      setComponents = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    components = _useState2[0],
+    setComponents = _useState2[1];
   var composeComponent = (0, _react.useCallback)(function (component, hocs) {
+    var scope = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "*";
     setComponents(function (prevComponents) {
       var components = new Map(prevComponents);
-      var recipe = components.get(component) || {
+      var scopeMap = components.get(scope) || new Map();
+      var recipe = scopeMap.get(component) || {
         component: null,
         hocs: []
       };
       var newHocs = [].concat((0, _toConsumableArray2.default)(recipe.hocs || []), (0, _toConsumableArray2.default)(hocs));
-      components.set(component, {
+      scopeMap.set(component, {
         component: compose.apply(void 0, (0, _toConsumableArray2.default)((0, _toConsumableArray2.default)(newHocs).reverse()))(component),
         hocs: newHocs
       });
+      components.set(scope, scopeMap);
       return components;
-    }); // Return a function that will remove the added HOCs.
+    });
 
+    // Return a function that will remove the added HOCs.
     return function () {
       setComponents(function (prevComponents) {
         var components = new Map(prevComponents);
-        var recipe = components.get(component) || {
+        var scopeMap = components.get(scope) || new Map();
+        var recipe = scopeMap.get(component) || {
           component: null,
           hocs: []
         };
@@ -67,16 +62,25 @@ var CompositionProvider = function CompositionProvider(_ref) {
           return !hocs.includes(hoc);
         });
         var NewComponent = compose.apply(void 0, (0, _toConsumableArray2.default)((0, _toConsumableArray2.default)(newHOCs).reverse()))(component);
-        components.set(component, {
+        scopeMap.set(component, {
           component: NewComponent,
           hocs: newHOCs
         });
+        components.set(scope, scopeMap);
         return components;
       });
     };
   }, [setComponents]);
   var getComponent = (0, _react.useCallback)(function (Component) {
-    var composedComponent = components.get(Component);
+    var scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "*";
+    var scopeMap = components.get(scope) || new Map();
+    var composedComponent = scopeMap.get(Component);
+    if (!composedComponent && scope !== "*") {
+      // Check if a default scope component exists
+      var defaultScopeMap = components.get("*") || new Map();
+      var defaultComponent = defaultScopeMap.get(Component);
+      return defaultComponent ? defaultComponent.component : undefined;
+    }
     return composedComponent ? composedComponent.component : undefined;
   }, [components]);
   var context = (0, _react.useMemo)(function () {
@@ -90,37 +94,30 @@ var CompositionProvider = function CompositionProvider(_ref) {
     value: context
   }, children);
 };
-
 exports.CompositionProvider = CompositionProvider;
-
 function useComponent(Component) {
   var context = useOptionalComposition();
-
+  var scope = (0, _CompositionScope.useCompositionScope)();
   if (!context) {
     return Component;
   }
-
-  return context.getComponent(Component) || Component;
+  return context.getComponent(Component, scope) || Component;
 }
+
 /**
  * This hook will throw an error if composition context doesn't exist.
  */
-
-
 function useComposition() {
   var context = (0, _react.useContext)(CompositionContext);
-
   if (!context) {
     throw new Error("You're missing a <CompositionProvider> higher up in your component hierarchy!");
   }
-
   return context;
 }
+
 /**
  * This hook will not throw an error if composition context doesn't exist.
  */
-
-
 function useOptionalComposition() {
   return (0, _react.useContext)(CompositionContext);
 }

package/Context.js.map

@@ -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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"}
+{"version":3,"names":["compose","fns","ComposedComponent","Base","reduceRight","Component","hoc","CompositionContext","createContext","undefined","CompositionProvider","children","useState","Map","components","setComponents","composeComponent","useCallback","component","hocs","scope","prevComponents","scopeMap","get","recipe","newHocs","set","reverse","newHOCs","filter","includes","NewComponent","getComponent","composedComponent","defaultScopeMap","defaultComponent","context","useMemo","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":";;;;;;;;;;;;;;AAAA;AASA;AAEO,SAASA,OAAO,GAAsB;EAAA,kCAAlBC,GAAG;IAAHA,GAAG;EAAA;EAC1B,OAAO,SAASC,iBAAiB,CAACC,IAAiB,EAAe;IAC9D,OAAOF,GAAG,CAACG,WAAW,CAAC,UAACC,SAAS,EAAEC,GAAG;MAAA,OAAKA,GAAG,CAACD,SAAS,CAAC;IAAA,GAAEF,IAAI,CAAC;EACpE,CAAC;AACL;AAiDA,IAAMI,kBAAkB,gBAAG,IAAAC,oBAAa,EAAiCC,SAAS,CAAC;AAE5E,IAAMC,mBAA6B,GAAG,SAAhCA,mBAA6B,OAAqB;EAAA,IAAfC,QAAQ,QAARA,QAAQ;EACpD,gBAAoC,IAAAC,eAAQ,EAAkB,IAAIC,GAAG,EAAE,CAAC;IAAA;IAAjEC,UAAU;IAAEC,aAAa;EAEhC,IAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAChC,UAACC,SAAS,EAAEC,IAAI,EAAkB;IAAA,IAAhBC,KAAK,uEAAG,GAAG;IACzBL,aAAa,CAAC,UAAAM,cAAc,EAAI;MAC5B,IAAMP,UAAU,GAAG,IAAID,GAAG,CAACQ,cAAc,CAAC;MAC1C,IAAMC,QAA4B,GAAGR,UAAU,CAACS,GAAG,CAACH,KAAK,CAAC,IAAI,IAAIP,GAAG,EAAE;MACvE,IAAMW,MAAM,GAAGF,QAAQ,CAACC,GAAG,CAACL,SAAS,CAAC,IAAI;QAAEA,SAAS,EAAE,IAAI;QAAEC,IAAI,EAAE;MAAG,CAAC;MAEvE,IAAMM,OAAO,8CAAQD,MAAM,CAACL,IAAI,IAAI,EAAE,oCAAMA,IAAI,EAAC;MAEjDG,QAAQ,CAACI,GAAG,CAACR,SAAS,EAAE;QACpBA,SAAS,EAAElB,OAAO,gDAAI,iCAAIyB,OAAO,EAAEE,OAAO,EAAE,EAAC,CAACT,SAAS,CAAC;QACxDC,IAAI,EAAEM;MACV,CAAC,CAAC;MAEFX,UAAU,CAACY,GAAG,CAACN,KAAK,EAAEE,QAAQ,CAAC;MAC/B,OAAOR,UAAU;IACrB,CAAC,CAAC;;IAEF;IACA,OAAO,YAAM;MACTC,aAAa,CAAC,UAAAM,cAAc,EAAI;QAC5B,IAAMP,UAAU,GAAG,IAAID,GAAG,CAACQ,cAAc,CAAC;QAC1C,IAAMC,QAA4B,GAAGR,UAAU,CAACS,GAAG,CAACH,KAAK,CAAC,IAAI,IAAIP,GAAG,EAAE;QACvE,IAAMW,MAAM,GAAGF,QAAQ,CAACC,GAAG,CAACL,SAAS,CAAC,IAAI;UACtCA,SAAS,EAAE,IAAI;UACfC,IAAI,EAAE;QACV,CAAC;QAED,IAAMS,OAAO,GAAG,iCAAIJ,MAAM,CAACL,IAAI,EAAEU,MAAM,CAAC,UAAAvB,GAAG;UAAA,OAAI,CAACa,IAAI,CAACW,QAAQ,CAACxB,GAAG,CAAC;QAAA,EAAC;QACnE,IAAMyB,YAAY,GAAG/B,OAAO,gDAAI,iCAAI4B,OAAO,EAAED,OAAO,EAAE,EAAC,CAACT,SAAS,CAAC;QAElEI,QAAQ,CAACI,GAAG,CAACR,SAAS,EAAE;UACpBA,SAAS,EAAEa,YAAY;UACvBZ,IAAI,EAAES;QACV,CAAC,CAAC;QAEFd,UAAU,CAACY,GAAG,CAACN,KAAK,EAAEE,QAAQ,CAAC;QAC/B,OAAOR,UAAU;MACrB,CAAC,CAAC;IACN,CAAC;EACL,CAAC,EACD,CAACC,aAAa,CAAC,CAClB;EAED,IAAMiB,YAAgD,GAAG,IAAAf,kBAAW,EAChE,UAACZ,SAAS,EAAkB;IAAA,IAAhBe,KAAK,uEAAG,GAAG;IACnB,IAAME,QAA4B,GAAGR,UAAU,CAACS,GAAG,CAACH,KAAK,CAAC,IAAI,IAAIP,GAAG,EAAE;IACvE,IAAMoB,iBAAiB,GAAGX,QAAQ,CAACC,GAAG,CAAClB,SAAS,CAAC;IACjD,IAAI,CAAC4B,iBAAiB,IAAIb,KAAK,KAAK,GAAG,EAAE;MACrC;MACA,IAAMc,eAAmC,GAAGpB,UAAU,CAACS,GAAG,CAAC,GAAG,CAAC,IAAI,IAAIV,GAAG,EAAE;MAC5E,IAAMsB,gBAAgB,GAAGD,eAAe,CAACX,GAAG,CAAClB,SAAS,CAAC;MACvD,OAAO8B,gBAAgB,GAAGA,gBAAgB,CAACjB,SAAS,GAAGT,SAAS;IACpE;IACA,OAAOwB,iBAAiB,GAAGA,iBAAiB,CAACf,SAAS,GAAGT,SAAS;EACtE,CAAC,EACD,CAACK,UAAU,CAAC,CACf;EAED,IAAMsB,OAA2B,GAAG,IAAAC,cAAO,EACvC;IAAA,OAAO;MACHL,YAAY,EAAZA,YAAY;MACZhB,gBAAgB,EAAhBA,gBAAgB;MAChBF,UAAU,EAAVA;IACJ,CAAC;EAAA,CAAC,EACF,CAACA,UAAU,EAAEE,gBAAgB,CAAC,CACjC;EAED,oBAAO,6BAAC,kBAAkB,CAAC,QAAQ;IAAC,KAAK,EAAEoB;EAAQ,GAAEzB,QAAQ,CAA+B;AAChG,CAAC;AAAC;AAEK,SAAS2B,YAAY,CAACjC,SAA6B,EAAE;EACxD,IAAM+B,OAAO,GAAGG,sBAAsB,EAAE;EACxC,IAAMnB,KAAK,GAAG,IAAAoB,qCAAmB,GAAE;EAEnC,IAAI,CAACJ,OAAO,EAAE;IACV,OAAO/B,SAAS;EACpB;EAEA,OAAO+B,OAAO,CAACJ,YAAY,CAAC3B,SAAS,EAAEe,KAAK,CAAC,IAAIf,SAAS;AAC9D;;AAEA;AACA;AACA;AACO,SAASoC,cAAc,GAAG;EAC7B,IAAML,OAAO,GAAG,IAAAM,iBAAU,EAACnC,kBAAkB,CAAC;EAC9C,IAAI,CAAC6B,OAAO,EAAE;IACV,MAAM,IAAIO,KAAK,iFAEd;EACL;EAEA,OAAOP,OAAO;AAClB;;AAEA;AACA;AACA;AACO,SAASG,sBAAsB,GAAG;EACrC,OAAO,IAAAG,iBAAU,EAACnC,kBAAkB,CAAC;AACzC"}

package/createComponentPlugin.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createComponentPlugin = createComponentPlugin;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("./index");
-
 /**
  * Creates a component which, when mounted, registers a Higher Order Component for the given base component.
  * This is particularly useful for decorating (wrapping) existing composable components.
@@ -23,7 +19,6 @@ function createComponentPlugin(Base, hoc) {
       with: hoc
     });
   };
-
   ComponentPlugin.displayName = Base.displayName;
   return ComponentPlugin;
 }

package/createComponentPlugin.js.map

@@ -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":";;;;;;;;;AAAA;;AACA;;AAEA;AACA;AACA;AACA;AACA;AACO,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"}
+{"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/decorators.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Decorator } from "./Context";
+import { ComposableFC } from "./Compose";
+interface ShouldDecorate<TDecorator = any, TComponent = any> {
+    (decoratorProps: TDecorator, componentProps: TComponent): boolean;
+}
+export declare function createConditionalDecorator(shouldDecorate: ShouldDecorate, decorator: Decorator, decoratorProps: unknown): Decorator;
+export declare function createDecoratorFactory<TDecorator>(): <TComponent>(Component: ComposableFC<TComponent>, shouldDecorate?: ShouldDecorate<TDecorator, TComponent> | undefined) => (decorator: Decorator<TComponent>) => (props: TDecorator) => JSX.Element;
+export {};

package/decorators.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createConditionalDecorator = createConditionalDecorator;
+exports.createDecoratorFactory = createDecoratorFactory;
+var _react = _interopRequireDefault(require("react"));
+var _Compose = require("./Compose");
+function createConditionalDecorator(shouldDecorate, decorator, decoratorProps) {
+  return function (Original) {
+    return function ShouldDecorate(props) {
+      if (shouldDecorate(decoratorProps, props)) {
+        var Component = decorator(Original);
+        return /*#__PURE__*/_react.default.createElement(Component, props);
+      }
+      return /*#__PURE__*/_react.default.createElement(Original, props);
+    };
+  };
+}
+function createDecoratorFactory() {
+  return function from(Component, shouldDecorate) {
+    return function createDecorator(decorator) {
+      return function DecoratorPlugin(props) {
+        if (shouldDecorate) {
+          return /*#__PURE__*/_react.default.createElement(_Compose.Compose, {
+            component: Component,
+            with: createConditionalDecorator(shouldDecorate, decorator, props)
+          });
+        }
+        return /*#__PURE__*/_react.default.createElement(_Compose.Compose, {
+          component: Component,
+          with: decorator
+        });
+      };
+    };
+  };
+}

package/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createConditionalDecorator","shouldDecorate","decorator","decoratorProps","Original","ShouldDecorate","props","Component","createDecoratorFactory","from","createDecorator","DecoratorPlugin"],"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;AAEA;AAMO,SAASA,0BAA0B,CACtCC,cAA8B,EAC9BC,SAAoB,EACpBC,cAAuB,EACd;EACT,OAAO,UAACC,QAAkB,EAAK;IAC3B,OAAO,SAASC,cAAc,CAACC,KAAK,EAAE;MAClC,IAAIL,cAAc,CAACE,cAAc,EAAEG,KAAK,CAAC,EAAE;QACvC,IAAMC,SAAS,GAAGL,SAAS,CAACE,QAAQ,CAAC;QACrC,oBAAO,6BAAC,SAAS,EAAKE,KAAK,CAAI;MACnC;MAEA,oBAAO,6BAAC,QAAQ,EAAKA,KAAK,CAAI;IAClC,CAAC;EACL,CAAC;AACL;AAEO,SAASE,sBAAsB,GAAe;EACjD,OAAO,SAASC,IAAI,CAChBF,SAAmC,EACnCN,cAAuD,EACzD;IACE,OAAO,SAASS,eAAe,CAACR,SAAgC,EAAE;MAC9D,OAAO,SAASS,eAAe,CAACL,KAAiB,EAAE;QAC/C,IAAIL,cAAc,EAAE;UAChB,oBACI,6BAAC,gBAAO;YACJ,SAAS,EAAEM,SAAU;YACrB,IAAI,EAAEP,0BAA0B,CAACC,cAAc,EAAEC,SAAS,EAAEI,KAAK;UAAE,EACrE;QAEV;QACA,oBAAO,6BAAC,gBAAO;UAAC,SAAS,EAAEC,SAAU;UAAC,IAAI,EAAEL;QAAU,EAAG;MAC7D,CAAC;IACL,CAAC;EACL,CAAC;AACL"}

package/index.d.ts

@@ -2,3 +2,5 @@ export * from "./Context";
 export * from "./Compose";
 export * from "./makeComposable";
 export * from "./createComponentPlugin";
+export * from "./decorators";
+export * from "./CompositionScope";

package/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _Context = require("./Context");
-
 Object.keys(_Context).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Context[key]) return;
@@ -16,9 +14,7 @@ Object.keys(_Context).forEach(function (key) {
     }
   });
 });
-
 var _Compose = require("./Compose");
-
 Object.keys(_Compose).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Compose[key]) return;
@@ -29,9 +25,7 @@ Object.keys(_Compose).forEach(function (key) {
     }
   });
 });
-
 var _makeComposable = require("./makeComposable");
-
 Object.keys(_makeComposable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _makeComposable[key]) return;
@@ -42,9 +36,7 @@ Object.keys(_makeComposable).forEach(function (key) {
     }
   });
 });
-
 var _createComponentPlugin = require("./createComponentPlugin");
-
 Object.keys(_createComponentPlugin).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _createComponentPlugin[key]) return;
@@ -54,4 +46,26 @@ Object.keys(_createComponentPlugin).forEach(function (key) {
       return _createComponentPlugin[key];
     }
   });
+});
+var _decorators = require("./decorators");
+Object.keys(_decorators).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _decorators[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _decorators[key];
+    }
+  });
+});
+var _CompositionScope = require("./CompositionScope");
+Object.keys(_CompositionScope).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CompositionScope[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CompositionScope[key];
+    }
+  });
 });

package/index.js.map

@@ -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"}
+{"version":3,"names":[],"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;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;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

@@ -1,37 +1,25 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.makeComposable = makeComposable;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
-
 var _Context = require("./Context");
-
 var ComposableContext = /*#__PURE__*/(0, _react.createContext)([]);
 ComposableContext.displayName = "ComposableContext";
-
 function useComposableParents() {
   var context = (0, _react.useContext)(ComposableContext);
-
   if (!context) {
     return [];
   }
-
   return context;
 }
-
 var createEmptyRenderer = function createEmptyRenderer(name) {
   return (0, _defineProperty2.default)({}, name, function () {
     (0, _react.useEffect)(function () {
@@ -47,12 +35,10 @@ var createEmptyRenderer = function createEmptyRenderer(name) {
     return null;
   })[name];
 };
-
 function makeComposable(name, Component) {
   if (!Component) {
     Component = createEmptyRenderer(name);
   }
-
   var Composable = function Composable(props) {
     var parents = useComposableParents();
     var ComposedComponent = (0, _Context.useComponent)(Component);
@@ -63,7 +49,6 @@ function makeComposable(name, Component) {
       value: context
     }, /*#__PURE__*/_react.default.createElement(ComposedComponent, props, props.children));
   };
-
   Component.displayName = name;
   Composable.original = Component;
   Composable.originalName = name;

package/makeComposable.js.map

@@ -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"}
+{"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

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/react-composition",
-	"version": "0.0.0-unstable.c2780f51fe",
+	"version": "0.0.0-unstable.c7dec08bb0",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -21,13 +21,13 @@
 		"react-dom": "17.0.2"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.19.3",
-		"@babel/core": "^7.19.3",
-		"@babel/preset-env": "^7.19.4",
-		"@babel/preset-typescript": "^7.18.6",
-		"@webiny/cli": "^0.0.0-unstable.c2780f51fe",
-		"@webiny/project-utils": "^0.0.0-unstable.c2780f51fe",
-		"ttypescript": "^1.5.13",
+		"@babel/cli": "7.20.7",
+		"@babel/core": "7.20.12",
+		"@babel/preset-env": "7.20.2",
+		"@babel/preset-typescript": "7.18.6",
+		"@webiny/cli": "0.0.0-unstable.c7dec08bb0",
+		"@webiny/project-utils": "0.0.0-unstable.c7dec08bb0",
+		"ttypescript": "1.5.15",
 		"typescript": "4.7.4"
 	},
 	"publishConfig": {
@@ -38,5 +38,5 @@
 		"build": "yarn webiny run build",
 		"watch": "yarn webiny run watch"
 	},
-	"gitHead": "c2780f51fe628e1ef0f6b55c2bce9b74d3470d79"
+	"gitHead": "c7dec08bb095467cca6a61381bd399d66b7bb147"
 }