@webiny/react-composition 6.0.0-beta.0 → 6.0.0-rc.0

package/Compose.d.ts

@@ -1,5 +1,5 @@
-import { DecoratableTypes } from "./Context";
-import { ComposeWith } from "./types";
+import type { DecoratableTypes } from "./Context.js";
+import type { ComposeWith } from "./types.js";
 export interface ComposeProps {
     function?: DecoratableTypes;
     component?: DecoratableTypes;

package/Compose.js

@@ -1,24 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Compose = void 0;
-var _react = require("react");
-var _Context = require("./Context");
-var _CompositionScope = require("./CompositionScope");
-var Compose = exports.Compose = function Compose(props) {
-  var _useComposition = (0, _Context.useComposition)(),
-    composeComponent = _useComposition.composeComponent;
-  var scope = (0, _CompositionScope.useCompositionScope)();
-  var targetFn = props.function ?? props.component;
-  (0, _react.useEffect)(function () {
+import { useEffect } from "react";
+import { useComposition } from "./Context.js";
+import { useCompositionScope } from "./CompositionScope.js";
+export const Compose = props => {
+  const {
+    composeComponent
+  } = useComposition();
+  const {
+    scope,
+    inherit
+  } = useCompositionScope();
+  const targetFn = props.function ?? props.component;
+  useEffect(() => {
+    if (!targetFn) {
+      console.warn("You must provide a function or a component to compose with!", props);
+    }
     if (typeof targetFn.original === "undefined") {
-      console.warn("You must make your function \"".concat(targetFn.originalName ?? targetFn.name, "\" composable, by using the makeDecoratable() function!"));
+      console.warn(`You must make your function "${targetFn.originalName ?? targetFn.name}" composable, by using the makeDecoratable() function!`);
       return;
     }
-    var decorators = Array.isArray(props.with) ? props.with : [props.with];
-    return composeComponent(targetFn.original, decorators, scope);
+    const decorators = Array.isArray(props.with) ? props.with : [props.with];
+    return composeComponent(targetFn.original, decorators, scope[scope.length - 1], inherit);
   }, [props.with]);
   return null;
 };

package/Compose.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_Context","_CompositionScope","Compose","exports","props","_useComposition","useComposition","composeComponent","scope","useCompositionScope","targetFn","function","component","useEffect","original","console","warn","concat","originalName","name","decorators","Array","isArray","with"],"sources":["Compose.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { DecoratableTypes, useComposition } from \"./Context\";\nimport { useCompositionScope } from \"~/CompositionScope\";\nimport { ComposeWith, Decoratable, Enumerable } from \"./types\";\n\nexport interface ComposeProps {\n    function?: DecoratableTypes;\n    component?: DecoratableTypes;\n    with: ComposeWith;\n}\n\nexport const Compose = (props: ComposeProps) => {\n    const { composeComponent } = useComposition();\n    const scope = useCompositionScope();\n\n    const targetFn = (props.function ?? props.component) as Decoratable;\n\n    useEffect(() => {\n        if (typeof targetFn.original === \"undefined\") {\n            console.warn(\n                `You must make your function \"${\n                    targetFn.originalName ?? targetFn.name\n                }\" composable, by using the makeDecoratable() function!`\n            );\n\n            return;\n        }\n\n        const decorators = Array.isArray(props.with) ? props.with : [props.with];\n        return composeComponent(targetFn.original, decorators as Enumerable<ComposeWith>, 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;AASO,IAAMG,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAAVA,OAAOA,CAAIE,KAAmB,EAAK;EAC5C,IAAAC,eAAA,GAA6B,IAAAC,uBAAc,EAAC,CAAC;IAArCC,gBAAgB,GAAAF,eAAA,CAAhBE,gBAAgB;EACxB,IAAMC,KAAK,GAAG,IAAAC,qCAAmB,EAAC,CAAC;EAEnC,IAAMC,QAAQ,GAAIN,KAAK,CAACO,QAAQ,IAAIP,KAAK,CAACQ,SAAyB;EAEnE,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,OAAOH,QAAQ,CAACI,QAAQ,KAAK,WAAW,EAAE;MAC1CC,OAAO,CAACC,IAAI,kCAAAC,MAAA,CAEJP,QAAQ,CAACQ,YAAY,IAAIR,QAAQ,CAACS,IAAI,4DAE9C,CAAC;MAED;IACJ;IAEA,IAAMC,UAAU,GAAGC,KAAK,CAACC,OAAO,CAAClB,KAAK,CAACmB,IAAI,CAAC,GAAGnB,KAAK,CAACmB,IAAI,GAAG,CAACnB,KAAK,CAACmB,IAAI,CAAC;IACxE,OAAOhB,gBAAgB,CAACG,QAAQ,CAACI,QAAQ,EAAEM,UAAU,EAA6BZ,KAAK,CAAC;EAC5F,CAAC,EAAE,CAACJ,KAAK,CAACmB,IAAI,CAAC,CAAC;EAEhB,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useComposition","useCompositionScope","Compose","props","composeComponent","scope","inherit","targetFn","function","component","console","warn","original","originalName","name","decorators","Array","isArray","with","length"],"sources":["Compose.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { DecoratableTypes } from \"./Context.js\";\nimport { useComposition } from \"./Context.js\";\nimport { useCompositionScope } from \"~/CompositionScope.js\";\nimport type { ComposeWith, Decoratable, Enumerable } from \"./types.js\";\n\nexport interface ComposeProps {\n    function?: DecoratableTypes;\n    component?: DecoratableTypes;\n    with: ComposeWith;\n}\n\nexport const Compose = (props: ComposeProps) => {\n    const { composeComponent } = useComposition();\n    const { scope, inherit } = useCompositionScope();\n\n    const targetFn = (props.function ?? props.component) as Decoratable;\n\n    useEffect(() => {\n        if (!targetFn) {\n            console.warn(\"You must provide a function or a component to compose with!\", props);\n        }\n        if (typeof targetFn.original === \"undefined\") {\n            console.warn(\n                `You must make your function \"${\n                    targetFn.originalName ?? targetFn.name\n                }\" composable, by using the makeDecoratable() function!`\n            );\n\n            return;\n        }\n\n        const decorators = Array.isArray(props.with) ? props.with : [props.with];\n        return composeComponent(\n            targetFn.original,\n            decorators as Enumerable<ComposeWith>,\n            scope[scope.length - 1],\n            inherit\n        );\n    }, [props.with]);\n\n    return null;\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,cAAc;AACvB,SAASC,mBAAmB;AAS5B,OAAO,MAAMC,OAAO,GAAIC,KAAmB,IAAK;EAC5C,MAAM;IAAEC;EAAiB,CAAC,GAAGJ,cAAc,CAAC,CAAC;EAC7C,MAAM;IAAEK,KAAK;IAAEC;EAAQ,CAAC,GAAGL,mBAAmB,CAAC,CAAC;EAEhD,MAAMM,QAAQ,GAAIJ,KAAK,CAACK,QAAQ,IAAIL,KAAK,CAACM,SAAyB;EAEnEV,SAAS,CAAC,MAAM;IACZ,IAAI,CAACQ,QAAQ,EAAE;MACXG,OAAO,CAACC,IAAI,CAAC,6DAA6D,EAAER,KAAK,CAAC;IACtF;IACA,IAAI,OAAOI,QAAQ,CAACK,QAAQ,KAAK,WAAW,EAAE;MAC1CF,OAAO,CAACC,IAAI,CACR,gCACIJ,QAAQ,CAACM,YAAY,IAAIN,QAAQ,CAACO,IAAI,wDAE9C,CAAC;MAED;IACJ;IAEA,MAAMC,UAAU,GAAGC,KAAK,CAACC,OAAO,CAACd,KAAK,CAACe,IAAI,CAAC,GAAGf,KAAK,CAACe,IAAI,GAAG,CAACf,KAAK,CAACe,IAAI,CAAC;IACxE,OAAOd,gBAAgB,CACnBG,QAAQ,CAACK,QAAQ,EACjBG,UAAU,EACVV,KAAK,CAACA,KAAK,CAACc,MAAM,GAAG,CAAC,CAAC,EACvBb,OACJ,CAAC;EACL,CAAC,EAAE,CAACH,KAAK,CAACe,IAAI,CAAC,CAAC;EAEhB,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/CompositionScope.d.ts

@@ -1,11 +1,17 @@
 import React from "react";
 export interface CompositionScopeContext {
-    name: string;
+    inherit: boolean;
+    scope: string[];
 }
 interface CompositionScopeProps {
     name: string;
+    /**
+     * Use this prop on components that are used to register decorators.
+     * Components are inherited at the time of registration, and then cached.
+     */
+    inherit?: boolean;
     children: React.ReactNode;
 }
-export declare const CompositionScope: ({ name, children }: CompositionScopeProps) => React.JSX.Element;
-export declare function useCompositionScope(): string | undefined;
+export declare const CompositionScope: ({ name, inherit, children }: CompositionScopeProps) => React.JSX.Element;
+export declare function useCompositionScope(): CompositionScopeContext;
 export {};

package/CompositionScope.js

@@ -1,28 +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 = exports.CompositionScope = function CompositionScope(_ref) {
-  var name = _ref.name,
-    children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(CompositionScopeContext.Provider, {
+import React from "react";
+const CompositionScopeContext = /*#__PURE__*/React.createContext(undefined);
+export const CompositionScope = ({
+  name,
+  inherit = false,
+  children
+}) => {
+  const parentScope = useCompositionScope();
+  return /*#__PURE__*/React.createElement(CompositionScopeContext.Provider, {
     value: {
-      name: name
+      scope: [...parentScope.scope, name],
+      inherit
     }
   }, children);
 };
-function useCompositionScope() {
-  var context = _react.default.useContext(CompositionScopeContext);
+export function useCompositionScope() {
+  const context = React.useContext(CompositionScopeContext);
   if (!context) {
-    return undefined;
+    return {
+      scope: [],
+      inherit: false
+    };
   }
-  return context.name;
+  return context;
 }
 
 //# sourceMappingURL=CompositionScope.js.map

package/CompositionScope.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","CompositionScopeContext","React","createContext","undefined","CompositionScope","exports","_ref","name","children","default","createElement","Provider","value","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,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAAE,IAAA,EAAkD;EAAA,IAA5CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAC7C,oBACIX,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,uBAAuB,CAACW,QAAQ;IAACC,KAAK,EAAE;MAAEL,IAAI,EAAJA;IAAK;EAAE,GAC7CC,QAC6B,CAAC;AAE3C,CAAC;AAEM,SAASK,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,CAACP,IAAI;AACvB","ignoreList":[]}
+{"version":3,"names":["React","CompositionScopeContext","createContext","undefined","CompositionScope","name","inherit","children","parentScope","useCompositionScope","createElement","Provider","value","scope","context","useContext"],"sources":["CompositionScope.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface CompositionScopeContext {\n    inherit: boolean;\n    scope: string[];\n}\n\nconst CompositionScopeContext = React.createContext<CompositionScopeContext | undefined>(undefined);\n\ninterface CompositionScopeProps {\n    name: string;\n    /**\n     * Use this prop on components that are used to register decorators.\n     * Components are inherited at the time of registration, and then cached.\n     */\n    inherit?: boolean;\n    children: React.ReactNode;\n}\n\nexport const CompositionScope = ({ name, inherit = false, children }: CompositionScopeProps) => {\n    const parentScope = useCompositionScope();\n\n    return (\n        <CompositionScopeContext.Provider value={{ scope: [...parentScope.scope, name], inherit }}>\n            {children}\n        </CompositionScopeContext.Provider>\n    );\n};\n\nexport function useCompositionScope() {\n    const context = React.useContext(CompositionScopeContext);\n\n    if (!context) {\n        return { scope: [], inherit: false };\n    }\n\n    return context;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAOzB,MAAMC,uBAAuB,gBAAGD,KAAK,CAACE,aAAa,CAAsCC,SAAS,CAAC;AAYnG,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,IAAI;EAAEC,OAAO,GAAG,KAAK;EAAEC;AAAgC,CAAC,KAAK;EAC5F,MAAMC,WAAW,GAAGC,mBAAmB,CAAC,CAAC;EAEzC,oBACIT,KAAA,CAAAU,aAAA,CAACT,uBAAuB,CAACU,QAAQ;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAE,CAAC,GAAGL,WAAW,CAACK,KAAK,EAAER,IAAI,CAAC;MAAEC;IAAQ;EAAE,GACrFC,QAC6B,CAAC;AAE3C,CAAC;AAED,OAAO,SAASE,mBAAmBA,CAAA,EAAG;EAClC,MAAMK,OAAO,GAAGd,KAAK,CAACe,UAAU,CAACd,uBAAuB,CAAC;EAEzD,IAAI,CAACa,OAAO,EAAE;IACV,OAAO;MAAED,KAAK,EAAE,EAAE;MAAEP,OAAO,EAAE;IAAM,CAAC;EACxC;EAEA,OAAOQ,OAAO;AAClB","ignoreList":[]}

package/Context.d.ts

@@ -1,5 +1,6 @@
-import React, { ComponentType } from "react";
-import { ComposedFunction, ComposeWith, DecoratableComponent, DecoratableHook, Decorator, Enumerable, GenericComponent, GenericHook } from "./types";
+import type { ComponentType } from "react";
+import React from "react";
+import type { ComposedFunction, ComposeWith, Decoratable, DecoratableComponent, DecoratableHook, Decorator, Enumerable, GenericComponent, GenericHook } from "./types.js";
 export declare function compose<T>(...fns: Decorator<T>[]): (decoratee: T) => T;
 interface ComposedComponent {
     /**
@@ -21,29 +22,31 @@ interface ComposedComponent {
 export interface HigherOrderComponent<TProps = any, TOutput = TProps> {
     (Component: GenericComponent<TProps>): GenericComponent<TOutput>;
 }
-declare type ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;
-declare type ComponentScopes = Map<string, ComposedComponents>;
-export declare type DecoratableTypes = DecoratableComponent | DecoratableHook;
+type ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;
+type ComponentScopes = Map<string, ComposedComponents>;
+export type DecoratableTypes = DecoratableComponent | DecoratableHook;
 interface CompositionContextGetComponentCallable {
-    (component: ComponentType<unknown>, scope?: string): ComposedFunction | GenericComponent | undefined;
+    (component: ComponentType<unknown>, scope: string[]): ComposedFunction | GenericComponent | undefined;
 }
-interface CompositionContext {
+interface CompositionContextValue {
     components: ComponentScopes;
     getComponent: CompositionContextGetComponentCallable;
-    composeComponent(component: ComponentType<unknown>, hocs: Enumerable<ComposeWith>, scope?: string): void;
+    composeComponent(component: ComponentType<unknown>, hocs: Enumerable<ComposeWith>, scope?: string, inherit?: boolean): void;
 }
-declare const CompositionContext: React.Context<CompositionContext | undefined>;
+export type DecoratorsTuple = [Decoratable, Decorator<any>[]];
+export type DecoratorsCollection = Array<DecoratorsTuple>;
 interface CompositionProviderProps {
+    decorators?: DecoratorsCollection;
     children: React.ReactNode;
 }
-export declare const CompositionProvider: ({ children }: CompositionProviderProps) => React.JSX.Element;
+export declare const CompositionProvider: ({ decorators, children }: CompositionProviderProps) => React.JSX.Element;
 export declare function useComponent<T>(baseFunction: T): T;
 /**
  * This hook will throw an error if composition context doesn't exist.
  */
-export declare function useComposition(): CompositionContext;
+export declare function useComposition(): CompositionContextValue;
 /**
  * This hook will not throw an error if composition context doesn't exist.
  */
-export declare function useOptionalComposition(): CompositionContext | undefined;
+export declare function useOptionalComposition(): CompositionContextValue | undefined;
 export {};

package/Context.js

@@ -1,27 +1,8 @@
-"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.CompositionProvider = void 0;
-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 (decoratee) {
-    return fns.reduceRight(function (decoratee, decorator) {
-      return decorator(decoratee);
-    }, decoratee);
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { useCompositionScope } from "./CompositionScope.js";
+export function compose(...fns) {
+  return decoratee => {
+    return fns.reduceRight((decoratee, decorator) => decorator(decoratee), decoratee);
   };
 }
 
@@ -29,44 +10,57 @@ function compose() {
  * @deprecated Use `Decorator` instead.
  */
 
-var CompositionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-var CompositionProvider = exports.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];
-  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 scopeMap = components.get(scope) || new Map();
-      var recipe = scopeMap.get(component) || {
+const CompositionContext = /*#__PURE__*/createContext(undefined);
+const composeComponents = (components, decorators, scope = "*", inherit = false) => {
+  const scopeMap = components.get(scope) || new Map();
+  for (const [component, newHocs] of decorators) {
+    const recipe = scopeMap.get(component) || {
+      component: null,
+      hocs: []
+    };
+    const existingHocs = [...(recipe.hocs || [])];
+    if (inherit && scope !== "*") {
+      const globalScope = components.get("*") || new Map();
+      const globalRecipe = globalScope.get(component) || {
         component: null,
         hocs: []
       };
-      var newHocs = [].concat((0, _toConsumableArray2.default)(recipe.hocs || []), (0, _toConsumableArray2.default)(hocs));
-      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;
+      existingHocs.unshift(...globalRecipe.hocs);
+    }
+    const finalHocs = [...existingHocs, ...newHocs];
+    scopeMap.set(component, {
+      component: compose(...[...finalHocs].reverse())(component),
+      hocs: finalHocs
+    });
+    components.set(scope, scopeMap);
+  }
+  return components;
+};
+export const CompositionProvider = ({
+  decorators = [],
+  children
+}) => {
+  const [components, setComponents] = useState(() => {
+    return composeComponents(new Map(), decorators.map(tuple => {
+      return [tuple[0].original, tuple[1]];
+    }));
+  });
+  const composeComponent = useCallback((component, hocs, scope = "*", inherit = false) => {
+    setComponents(prevComponents => {
+      return composeComponents(new Map(prevComponents), [[component, hocs]], scope, inherit);
     });
 
     // Return a function that will remove the added HOCs.
-    return function () {
-      setComponents(function (prevComponents) {
-        var components = new Map(prevComponents);
-        var scopeMap = components.get(scope) || new Map();
-        var recipe = scopeMap.get(component) || {
+    return () => {
+      setComponents(prevComponents => {
+        const components = new Map(prevComponents);
+        const scopeMap = components.get(scope) || new Map();
+        const recipe = scopeMap.get(component) || {
           component: null,
           hocs: []
         };
-        var newHOCs = (0, _toConsumableArray2.default)(recipe.hocs).filter(function (hoc) {
-          return !hocs.includes(hoc);
-        });
-        var NewComponent = compose.apply(void 0, (0, _toConsumableArray2.default)((0, _toConsumableArray2.default)(newHOCs).reverse()))(component);
+        const newHOCs = [...recipe.hocs].filter(hoc => !hocs.includes(hoc));
+        const NewComponent = compose(...[...newHOCs].reverse())(component);
         scopeMap.set(component, {
           component: NewComponent,
           hocs: newHOCs
@@ -76,45 +70,42 @@ var CompositionProvider = exports.CompositionProvider = function CompositionProv
       });
     };
   }, [setComponents]);
-  var getComponent = (0, _react.useCallback)(function (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;
+  const getComponent = useCallback((Component, scope = []) => {
+    const scopesToResolve = ["*", ...scope].reverse();
+    for (const scope of scopesToResolve) {
+      const scopeMap = components.get(scope) || new Map();
+      const composedComponent = scopeMap.get(Component);
+      if (composedComponent) {
+        return composedComponent.component;
+      }
     }
-    return composedComponent ? composedComponent.component : undefined;
+    return undefined;
   }, [components]);
-  var context = (0, _react.useMemo)(function () {
-    return {
-      getComponent: getComponent,
-      composeComponent: composeComponent,
-      components: components
-    };
-  }, [components, composeComponent]);
-  return /*#__PURE__*/_react.default.createElement(CompositionContext.Provider, {
+  const context = useMemo(() => ({
+    getComponent,
+    composeComponent,
+    components
+  }), [components, composeComponent]);
+  return /*#__PURE__*/React.createElement(CompositionContext.Provider, {
     value: context
   }, children);
 };
-function useComponent(baseFunction) {
-  var context = useOptionalComposition();
-  var scope = (0, _CompositionScope.useCompositionScope)();
+export function useComponent(baseFunction) {
+  const context = useOptionalComposition();
+  const scope = useCompositionScope();
   if (!context) {
     return baseFunction;
   }
-  return context.getComponent(baseFunction, scope) || baseFunction;
+  return context.getComponent(baseFunction, scope.scope) || baseFunction;
 }
 
 /**
  * This hook will throw an error if composition context doesn't exist.
  */
-function useComposition() {
-  var context = (0, _react.useContext)(CompositionContext);
+export function useComposition() {
+  const context = useContext(CompositionContext);
   if (!context) {
-    throw new Error("You're missing a <CompositionProvider> higher up in your component hierarchy!");
+    throw new Error(`You're missing a <CompositionProvider> higher up in your component hierarchy!`);
   }
   return context;
 }
@@ -122,8 +113,8 @@ function useComposition() {
 /**
  * This hook will not throw an error if composition context doesn't exist.
  */
-function useOptionalComposition() {
-  return (0, _react.useContext)(CompositionContext);
+export function useOptionalComposition() {
+  return useContext(CompositionContext);
 }
 
 //# sourceMappingURL=Context.js.map

package/Context.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_CompositionScope","compose","_len","arguments","length","fns","Array","_key","decoratee","reduceRight","decorator","CompositionContext","createContext","undefined","CompositionProvider","exports","_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","hoc","includes","NewComponent","getComponent","Component","composedComponent","defaultScopeMap","defaultComponent","context","useMemo","createElement","Provider","value","useComponent","baseFunction","useOptionalComposition","useCompositionScope","useComposition","useContext","Error"],"sources":["Context.tsx"],"sourcesContent":["import React, {\n    ComponentType,\n    createContext,\n    useCallback,\n    useContext,\n    useMemo,\n    useState\n} from \"react\";\nimport { useCompositionScope } from \"~/CompositionScope\";\nimport {\n    ComposedFunction,\n    ComposeWith,\n    DecoratableComponent,\n    DecoratableHook,\n    Decorator,\n    Enumerable,\n    GenericComponent,\n    GenericHook\n} from \"~/types\";\n\nexport function compose<T>(...fns: Decorator<T>[]) {\n    return (decoratee: T): T => {\n        return fns.reduceRight((decoratee, decorator) => decorator(decoratee), decoratee);\n    };\n}\n\ninterface ComposedComponent {\n    /**\n     * Ready to use React component.\n     */\n    component: GenericHook | GenericComponent;\n    /**\n     * HOCs used to compose the original component.\n     */\n    hocs: Decorator<GenericComponent | GenericHook>[];\n    /**\n     * Component composition can be scoped.\n     */\n    scope?: string;\n}\n\n/**\n * @deprecated Use `Decorator` instead.\n */\nexport interface HigherOrderComponent<TProps = any, TOutput = TProps> {\n    (Component: GenericComponent<TProps>): GenericComponent<TOutput>;\n}\n\ntype ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;\ntype ComponentScopes = Map<string, ComposedComponents>;\n\nexport type DecoratableTypes = DecoratableComponent | DecoratableHook;\n\ninterface CompositionContextGetComponentCallable {\n    (component: ComponentType<unknown>, scope?: string):\n        | ComposedFunction\n        | GenericComponent\n        | undefined;\n}\n\ninterface CompositionContext {\n    components: ComponentScopes;\n    getComponent: CompositionContextGetComponentCallable;\n    composeComponent(\n        component: ComponentType<unknown>,\n        hocs: Enumerable<ComposeWith>,\n        scope?: string\n    ): void;\n}\n\nconst CompositionContext = createContext<CompositionContext | undefined>(undefined);\n\ninterface CompositionProviderProps {\n    children: React.ReactNode;\n}\n\nexport const CompositionProvider = ({ children }: CompositionProviderProps) => {\n    const [components, setComponents] = useState<ComponentScopes>(new Map());\n\n    const composeComponent = useCallback(\n        (\n            component: GenericHook | GenericComponent,\n            hocs: HigherOrderComponent<any, any>[],\n            scope: string | undefined = \"*\"\n        ) => {\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] as Decorator<\n                    GenericHook | GenericComponent\n                >[];\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 = useCallback<CompositionContextGetComponentCallable>(\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<T>(baseFunction: T) {\n    const context = useOptionalComposition();\n    const scope = useCompositionScope();\n\n    if (!context) {\n        return baseFunction;\n    }\n\n    return (context.getComponent(baseFunction as any, scope) || baseFunction) as T;\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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","ignoreList":[]}
+{"version":3,"names":["React","createContext","useCallback","useContext","useMemo","useState","useCompositionScope","compose","fns","decoratee","reduceRight","decorator","CompositionContext","undefined","composeComponents","components","decorators","scope","inherit","scopeMap","get","Map","component","newHocs","recipe","hocs","existingHocs","globalScope","globalRecipe","unshift","finalHocs","set","reverse","CompositionProvider","children","setComponents","map","tuple","original","composeComponent","prevComponents","newHOCs","filter","hoc","includes","NewComponent","getComponent","Component","scopesToResolve","composedComponent","context","createElement","Provider","value","useComponent","baseFunction","useOptionalComposition","useComposition","Error"],"sources":["Context.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport React, { createContext, useCallback, useContext, useMemo, useState } from \"react\";\nimport { useCompositionScope } from \"~/CompositionScope.js\";\nimport type {\n    ComposedFunction,\n    ComposeWith,\n    Decoratable,\n    DecoratableComponent,\n    DecoratableHook,\n    Decorator,\n    Enumerable,\n    GenericComponent,\n    GenericHook\n} from \"~/types.js\";\n\nexport function compose<T>(...fns: Decorator<T>[]) {\n    return (decoratee: T): T => {\n        return fns.reduceRight((decoratee, decorator) => decorator(decoratee), decoratee) as T;\n    };\n}\n\ninterface ComposedComponent {\n    /**\n     * Ready to use React component.\n     */\n    component: GenericHook | GenericComponent;\n    /**\n     * HOCs used to compose the original component.\n     */\n    hocs: Decorator<GenericComponent | GenericHook>[];\n    /**\n     * Component composition can be scoped.\n     */\n    scope?: string;\n}\n\n/**\n * @deprecated Use `Decorator` instead.\n */\nexport interface HigherOrderComponent<TProps = any, TOutput = TProps> {\n    (Component: GenericComponent<TProps>): GenericComponent<TOutput>;\n}\n\ntype ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;\ntype ComponentScopes = Map<string, ComposedComponents>;\n\nexport type DecoratableTypes = DecoratableComponent | DecoratableHook;\n\ninterface CompositionContextGetComponentCallable {\n    (\n        component: ComponentType<unknown>,\n        scope: string[]\n    ): ComposedFunction | GenericComponent | undefined;\n}\n\ninterface CompositionContextValue {\n    components: ComponentScopes;\n    getComponent: CompositionContextGetComponentCallable;\n    composeComponent(\n        component: ComponentType<unknown>,\n        hocs: Enumerable<ComposeWith>,\n        scope?: string,\n        inherit?: boolean\n    ): void;\n}\n\nconst CompositionContext = createContext<CompositionContextValue | undefined>(undefined);\n\nexport type DecoratorsTuple = [Decoratable, Decorator<any>[]];\nexport type DecoratorsCollection = Array<DecoratorsTuple>;\n\ninterface CompositionProviderProps {\n    decorators?: DecoratorsCollection;\n    children: React.ReactNode;\n}\n\nconst composeComponents = (\n    components: ComponentScopes,\n    decorators: Array<[GenericComponent | GenericHook, Decorator<any>[]]>,\n    scope = \"*\",\n    inherit = false\n) => {\n    const scopeMap: ComposedComponents = components.get(scope) || new Map();\n    for (const [component, newHocs] of decorators) {\n        const recipe = scopeMap.get(component) || { component: null, hocs: [] };\n\n        const existingHocs = [...(recipe.hocs || [])];\n        if (inherit && scope !== \"*\") {\n            const globalScope = components.get(\"*\") || new Map();\n            const globalRecipe = globalScope.get(component) || { component: null, hocs: [] };\n            existingHocs.unshift(...globalRecipe.hocs);\n        }\n\n        const finalHocs = [...existingHocs, ...newHocs] as Decorator<\n            GenericHook | GenericComponent\n        >[];\n\n        scopeMap.set(component, {\n            component: compose(...[...finalHocs].reverse())(component),\n            hocs: finalHocs\n        });\n\n        components.set(scope, scopeMap);\n    }\n\n    return components;\n};\n\nexport const CompositionProvider = ({ decorators = [], children }: CompositionProviderProps) => {\n    const [components, setComponents] = useState<ComponentScopes>(() => {\n        return composeComponents(\n            new Map(),\n            decorators.map(tuple => {\n                return [tuple[0].original, tuple[1]];\n            })\n        );\n    });\n\n    const composeComponent = useCallback(\n        (\n            component: GenericComponent | GenericHook,\n            hocs: HigherOrderComponent<any, any>[],\n            scope: string | undefined = \"*\",\n            inherit = false\n        ) => {\n            setComponents(prevComponents => {\n                return composeComponents(\n                    new Map(prevComponents),\n                    [[component, hocs]],\n                    scope,\n                    inherit\n                );\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 = useCallback<CompositionContextGetComponentCallable>(\n        (Component, scope = []) => {\n            const scopesToResolve = [\"*\", ...scope].reverse();\n            for (const scope of scopesToResolve) {\n                const scopeMap: ComposedComponents = components.get(scope) || new Map();\n                const composedComponent = scopeMap.get(Component);\n                if (composedComponent) {\n                    return composedComponent.component;\n                }\n            }\n\n            return undefined;\n        },\n        [components]\n    );\n\n    const context: CompositionContextValue = 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<T>(baseFunction: T) {\n    const context = useOptionalComposition();\n    const scope = useCompositionScope();\n\n    if (!context) {\n        return baseFunction;\n    }\n\n    return (context.getComponent(baseFunction as any, scope.scope) || baseFunction) as T;\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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","ignoreList":[]}

package/README.md

@@ -1,8 +1,11 @@
-# Validation
-[![](https://img.shields.io/npm/dw/@webiny/react-composition.svg)](https://www.npmjs.com/package/@webiny/react-composition) 
-[![](https://img.shields.io/npm/v/@webiny/react-composition.svg)](https://www.npmjs.com/package/@webiny/react-composition)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+# @webiny/react-composition
 
-A tiny composition framework for React components which makes it possible to compose components anywhere in your application. 
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
 
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
+
+---
+
+_This README file is automatically generated during the publish process._

package/createDecorator.d.ts

@@ -1,18 +1,18 @@
 import React from "react";
-import { CanReturnNull, Decoratable, DecoratableComponent, DecoratableHook, Decorator } from "./types";
-declare type GetBaseFunction<T> = T extends DecoratableComponent<infer F> ? F : never;
+import type { CanReturnNullOrElement, Decoratable, DecoratableComponent, DecoratableHook, Decorator } from "./types.js";
+type GetBaseFunction<T> = T extends DecoratableComponent<infer F> ? F : never;
 /**
  * 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.
  * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.
  */
-export declare function createComponentPlugin<T extends Decoratable>(Base: T, hoc: T extends DecoratableComponent ? Decorator<CanReturnNull<GetBaseFunction<T>>> : Decorator<GetBaseFunction<T>>): {
+export declare function createComponentPlugin<T extends Decoratable>(Base: T, hoc: T extends DecoratableComponent ? Decorator<CanReturnNullOrElement<GetBaseFunction<T>>> : Decorator<GetBaseFunction<T>>): {
     (): React.JSX.Element;
     displayName: string;
 };
-export declare type GetDecorateeParams<T> = T extends (params?: infer P1) => any ? P1 : T extends (params: infer P2) => any ? P2 : any;
-export declare type GetDecoratee<T> = T extends DecoratableHook<infer F> ? F : T extends DecoratableComponent<infer F> ? F : never;
-export declare function createDecorator<T extends Decoratable>(Base: T, hoc: T extends DecoratableComponent ? Decorator<CanReturnNull<GetBaseFunction<T>>> : Decorator<GetBaseFunction<T>>): {
+export type GetDecorateeParams<T> = T extends (params?: infer P1) => any ? P1 : T extends (params: infer P2) => any ? P2 : any;
+export type GetDecoratee<T> = T extends DecoratableHook<infer F> ? F : T extends DecoratableComponent<infer F> ? F : never;
+export declare function createDecorator<T extends Decoratable>(Base: T, hoc: T extends DecoratableComponent ? Decorator<CanReturnNullOrElement<GetBaseFunction<T>>> : Decorator<GetBaseFunction<T>>): {
     (): React.JSX.Element;
     displayName: string;
 };

package/createDecorator.js

@@ -1,35 +1,25 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createComponentPlugin = createComponentPlugin;
-exports.createDecorator = createDecorator;
-var _react = _interopRequireDefault(require("react"));
-var _Compose = require("./Compose");
+import React from "react";
+import { Compose } from "./Compose.js";
 /**
  * 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.
  * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.
  */
-function createComponentPlugin(Base, hoc) {
+export function createComponentPlugin(Base, hoc) {
   return createDecorator(Base, hoc);
 }
 
 // Maybe there's a better way to mark params as non-existent, but for now I left it as `any`.
 // TODO: revisit this type; not sure if `?` can be handled in one clause
 
-var isDecoratableComponent = function isDecoratableComponent(decoratable) {
+const isDecoratableComponent = decoratable => {
   return "displayName" in decoratable;
 };
-function createDecorator(Base, hoc) {
-  var DecoratorPlugin = function DecoratorPlugin() {
-    return /*#__PURE__*/_react.default.createElement(_Compose.Compose, {
-      component: Base,
-      with: hoc
-    });
-  };
+export function createDecorator(Base, hoc) {
+  const DecoratorPlugin = () => /*#__PURE__*/React.createElement(Compose, {
+    component: Base,
+    with: hoc
+  });
   if (isDecoratableComponent(Base)) {
     DecoratorPlugin.displayName = Base.displayName;
   }

package/createDecorator.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Compose","createComponentPlugin","Base","hoc","createDecorator","isDecoratableComponent","decoratable","DecoratorPlugin","default","createElement","Compose","component","with","displayName"],"sources":["createDecorator.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    CanReturnNull,\n    Decoratable,\n    DecoratableComponent,\n    DecoratableHook,\n    Decorator\n} from \"~/types\";\nimport { Compose } from \"~/Compose\";\n\ntype GetBaseFunction<T> = T extends DecoratableComponent<infer F> ? F : never;\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 Decoratable>(\n    Base: T,\n    hoc: T extends DecoratableComponent\n        ? Decorator<CanReturnNull<GetBaseFunction<T>>>\n        : Decorator<GetBaseFunction<T>>\n) {\n    return createDecorator(Base, hoc);\n}\n\n// Maybe there's a better way to mark params as non-existent, but for now I left it as `any`.\n// TODO: revisit this type; not sure if `?` can be handled in one clause\nexport type GetDecorateeParams<T> = T extends (params?: infer P1) => any\n    ? P1\n    : T extends (params: infer P2) => any\n    ? P2\n    : any;\n\nexport type GetDecoratee<T> = T extends DecoratableHook<infer F>\n    ? F\n    : T extends DecoratableComponent<infer F>\n    ? F\n    : never;\n\nconst isDecoratableComponent = (\n    decoratable: DecoratableComponent | DecoratableHook\n): decoratable is DecoratableComponent => {\n    return \"displayName\" in decoratable;\n};\n\nexport function createDecorator<T extends Decoratable>(\n    Base: T,\n    hoc: T extends DecoratableComponent\n        ? Decorator<CanReturnNull<GetBaseFunction<T>>>\n        : Decorator<GetBaseFunction<T>>\n) {\n    const DecoratorPlugin = () => <Compose component={Base} with={hoc as any} />;\n    if (isDecoratableComponent(Base)) {\n        DecoratorPlugin.displayName = Base.displayName;\n    }\n    return DecoratorPlugin;\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAQA,IAAAC,QAAA,GAAAD,OAAA;AAIA;AACA;AACA;AACA;AACA;AACO,SAASE,qBAAqBA,CACjCC,IAAO,EACPC,GAEmC,EACrC;EACE,OAAOC,eAAe,CAACF,IAAI,EAAEC,GAAG,CAAC;AACrC;;AAEA;AACA;;AAaA,IAAME,sBAAsB,GAAG,SAAzBA,sBAAsBA,CACxBC,WAAmD,EACb;EACtC,OAAO,aAAa,IAAIA,WAAW;AACvC,CAAC;AAEM,SAASF,eAAeA,CAC3BF,IAAO,EACPC,GAEmC,EACrC;EACE,IAAMI,eAAe,GAAG,SAAlBA,eAAeA,CAAA;IAAA,oBAASV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACT,QAAA,CAAAU,OAAO;MAACC,SAAS,EAAET,IAAK;MAACU,IAAI,EAAET;IAAW,CAAE,CAAC;EAAA;EAC5E,IAAIE,sBAAsB,CAACH,IAAI,CAAC,EAAE;IAC9BK,eAAe,CAACM,WAAW,GAAGX,IAAI,CAACW,WAAW;EAClD;EACA,OAAON,eAAe;AAC1B","ignoreList":[]}
+{"version":3,"names":["React","Compose","createComponentPlugin","Base","hoc","createDecorator","isDecoratableComponent","decoratable","DecoratorPlugin","createElement","component","with","displayName"],"sources":["createDecorator.tsx"],"sourcesContent":["import React from \"react\";\nimport type {\n    CanReturnNullOrElement,\n    Decoratable,\n    DecoratableComponent,\n    DecoratableHook,\n    Decorator\n} from \"~/types.js\";\nimport { Compose } from \"~/Compose.js\";\n\ntype GetBaseFunction<T> = T extends DecoratableComponent<infer F> ? F : never;\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 Decoratable>(\n    Base: T,\n    hoc: T extends DecoratableComponent\n        ? Decorator<CanReturnNullOrElement<GetBaseFunction<T>>>\n        : Decorator<GetBaseFunction<T>>\n) {\n    return createDecorator(Base, hoc);\n}\n\n// Maybe there's a better way to mark params as non-existent, but for now I left it as `any`.\n// TODO: revisit this type; not sure if `?` can be handled in one clause\nexport type GetDecorateeParams<T> = T extends (params?: infer P1) => any\n    ? P1\n    : T extends (params: infer P2) => any\n      ? P2\n      : any;\n\nexport type GetDecoratee<T> =\n    T extends DecoratableHook<infer F> ? F : T extends DecoratableComponent<infer F> ? F : never;\n\nconst isDecoratableComponent = (\n    decoratable: DecoratableComponent | DecoratableHook\n): decoratable is DecoratableComponent => {\n    return \"displayName\" in decoratable;\n};\n\nexport function createDecorator<T extends Decoratable>(\n    Base: T,\n    hoc: T extends DecoratableComponent\n        ? Decorator<CanReturnNullOrElement<GetBaseFunction<T>>>\n        : Decorator<GetBaseFunction<T>>\n) {\n    const DecoratorPlugin = () => <Compose component={Base} with={hoc as any} />;\n    if (isDecoratableComponent(Base)) {\n        DecoratorPlugin.displayName = Base.displayName;\n    }\n    return DecoratorPlugin;\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,SAASC,OAAO;AAIhB;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CACjCC,IAAO,EACPC,GAEmC,EACrC;EACE,OAAOC,eAAe,CAACF,IAAI,EAAEC,GAAG,CAAC;AACrC;;AAEA;AACA;;AAUA,MAAME,sBAAsB,GACxBC,WAAmD,IACb;EACtC,OAAO,aAAa,IAAIA,WAAW;AACvC,CAAC;AAED,OAAO,SAASF,eAAeA,CAC3BF,IAAO,EACPC,GAEmC,EACrC;EACE,MAAMI,eAAe,GAAGA,CAAA,kBAAMR,KAAA,CAAAS,aAAA,CAACR,OAAO;IAACS,SAAS,EAAEP,IAAK;IAACQ,IAAI,EAAEP;EAAW,CAAE,CAAC;EAC5E,IAAIE,sBAAsB,CAACH,IAAI,CAAC,EAAE;IAC9BK,eAAe,CAACI,WAAW,GAAGT,IAAI,CAACS,WAAW;EAClD;EACA,OAAOJ,eAAe;AAC1B","ignoreList":[]}

package/decorators.d.ts

@@ -1,22 +1,15 @@
 import React from "react";
-import { GetDecoratee, GetDecorateeParams } from "./createDecorator";
-import { DecoratableComponent, GenericComponent, Decorator, CanReturnNull, GenericHook, DecoratableHook } from "./types";
+import type { GetDecoratee, GetDecorateeParams } from "./createDecorator.js";
+import type { DecoratableComponent, GenericComponent, Decorator, GenericHook, DecoratableHook, ComponentDecorator } from "./types.js";
 export interface ShouldDecorate<TDecorator = any, TComponent = any> {
     (decoratorProps: TDecorator, componentProps: TComponent): boolean;
 }
 export declare function createConditionalDecorator<TDecoratee extends GenericComponent>(shouldDecorate: ShouldDecorate, decorator: Decorator<TDecoratee>, decoratorProps: unknown): Decorator<TDecoratee>;
-export declare function createDecoratorFactory<TDecorator>(): <TDecoratable extends DecoratableComponent<GenericComponent<any>>>(decoratable: TDecoratable, shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>> | undefined) => (decorator: Decorator<CanReturnNull<GetDecoratee<TDecoratable>>>) => (props: TDecorator) => React.JSX.Element;
-export declare function createHookDecoratorFactory(): <TDecoratable extends DecoratableHook<GenericHook<any, any>>>(decoratable: TDecoratable) => (decorator: Decorator<GetDecoratee<TDecoratable>>) => () => React.JSX.Element;
-export declare function withDecoratorFactory<TDecorator>(): <TDecoratable extends DecoratableComponent<GenericComponent<any>>>(Component: TDecoratable, shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>> | undefined) => GenericComponent<GetDecorateeParams<GetDecoratee<TDecoratable>>> & {
-    original: GenericComponent<GetDecorateeParams<GetDecoratee<TDecoratable>>>;
-    originalName: string;
-    displayName: string;
-} & {
-    createDecorator: (decorator: Decorator<CanReturnNull<GetDecoratee<TDecoratable>>>) => (props: TDecorator) => React.JSX.Element;
+export declare function createDecoratorFactory<TDecorator>(): <TDecoratable extends DecoratableComponent>(decoratable: TDecoratable, shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>>) => (decorator: ComponentDecorator<GetDecoratee<TDecoratable>>) => (props: TDecorator) => React.JSX.Element;
+export declare function createHookDecoratorFactory(): <TDecoratable extends DecoratableHook>(decoratable: TDecoratable) => (decorator: Decorator<GetDecoratee<TDecoratable>>) => () => React.JSX.Element;
+export declare function withDecoratorFactory<TDecorator>(): <TDecoratable extends DecoratableComponent>(Component: TDecoratable, shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>>) => TDecoratable & {
+    createDecorator: (decorator: ComponentDecorator<GetDecoratee<TDecoratable>>) => (props: TDecorator) => React.JSX.Element;
 };
-export declare function withHookDecoratorFactory(): <TDecoratable extends DecoratableHook<GenericHook<any, any>>>(hook: TDecoratable) => GenericHook<GetDecorateeParams<GetDecoratee<TDecoratable>>, ReturnType<GetDecoratee<TDecoratable>>> & {
-    original: GenericHook<GetDecorateeParams<GetDecoratee<TDecoratable>>, ReturnType<GetDecoratee<TDecoratable>>>;
-    originalName: string;
-} & {
+export declare function withHookDecoratorFactory(): <TDecoratable extends DecoratableHook>(hook: TDecoratable) => DecoratableHook<GenericHook<GetDecorateeParams<GetDecoratee<TDecoratable>>, ReturnType<GetDecoratee<TDecoratable>>>> & {
     createDecorator: (decorator: Decorator<GetDecoratee<TDecoratable>>) => () => React.JSX.Element;
 };