@webiny/react-composition 0.0.0-unstable.615a930a68 → 0.0.0-unstable.61c048f412

package/Compose.d.ts

@@ -1,15 +1,8 @@
-import React from "react";
-import { HigherOrderComponent } from "./Context";
-export interface ComposableFC<TProps = unknown> extends React.FC<TProps> {
-    original: React.FC<TProps>;
-    originalName: string;
-}
+import type { DecoratableTypes } from "./Context.js";
+import type { ComposeWith } from "./types.js";
 export interface ComposeProps {
-    /**
-     * Component to compose.
-     * NOTE: ComposableFC<TProps> use `any` because the type of the component props is irrelevant.
-     */
-    component: ComposableFC<any>;
-    with: HigherOrderComponent | HigherOrderComponent[];
+    function?: DecoratableTypes;
+    component?: DecoratableTypes;
+    with: ComposeWith;
 }
-export declare const Compose: React.FC<ComposeProps>;
+export declare const Compose: (props: ComposeProps) => null;

package/Compose.js

@@ -1,28 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Compose = void 0;
-
-var _react = require("react");
-
-var _Context = require("./Context");
-
-var Compose = function Compose(props) {
-  var _useComposition = (0, _Context.useComposition)(),
-      composeComponent = _useComposition.composeComponent;
-
-  (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!"));
+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 "${targetFn.originalName ?? targetFn.name}" composable, by using the makeDecoratable() function!`);
       return;
     }
-
-    var hocs = Array.isArray(props.with) ? props.with : [props.with];
-    return composeComponent(props.component.original, hocs);
+    const decorators = Array.isArray(props.with) ? props.with : [props.with];
+    return composeComponent(targetFn.original, decorators, scope[scope.length - 1], inherit);
   }, [props.with]);
   return null;
 };
 
-exports.Compose = Compose;
+//# sourceMappingURL=Compose.js.map

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":["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

@@ -0,0 +1,17 @@
+import React from "react";
+export interface CompositionScopeContext {
+    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, inherit, children }: CompositionScopeProps) => React.JSX.Element;
+export declare function useCompositionScope(): CompositionScopeContext;
+export {};

package/CompositionScope.js

@@ -0,0 +1,27 @@
+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: {
+      scope: [...parentScope.scope, name],
+      inherit
+    }
+  }, children);
+};
+export function useCompositionScope() {
+  const context = React.useContext(CompositionScopeContext);
+  if (!context) {
+    return {
+      scope: [],
+      inherit: false
+    };
+  }
+  return context;
+}
+
+//# sourceMappingURL=CompositionScope.js.map

package/CompositionScope.js.map

@@ -0,0 +1 @@
+{"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,38 +1,52 @@
-import React, { FC, ComponentType } from "react";
-export declare function compose(...fns: HigherOrderComponent[]): (Base: FC<unknown>) => FC<unknown>;
+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 {
     /**
      * Ready to use React component.
      */
-    component: ComponentType<unknown>;
+    component: GenericHook | GenericComponent;
     /**
      * HOCs used to compose the original component.
      */
-    hocs: HigherOrderComponent[];
+    hocs: Decorator<GenericComponent | GenericHook>[];
+    /**
+     * 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
- * to let it be `any` in this interface.
+ * @deprecated Use `Decorator` instead.
  */
-export interface HigherOrderComponent<TInputProps = any, TOutputProps = TInputProps> {
-    (Component: FC<TInputProps>): FC<TOutputProps>;
+export interface HigherOrderComponent<TProps = any, TOutput = TProps> {
+    (Component: GenericComponent<TProps>): GenericComponent<TOutput>;
+}
+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;
+}
+interface CompositionContextValue {
+    components: ComponentScopes;
+    getComponent: CompositionContextGetComponentCallable;
+    composeComponent(component: ComponentType<unknown>, hocs: Enumerable<ComposeWith>, scope?: string, inherit?: boolean): void;
 }
-declare type ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;
-interface CompositionContext {
-    components: ComposedComponents;
-    getComponent(component: ComponentType<unknown>): ComponentType<unknown> | undefined;
-    composeComponent(component: ComponentType<unknown>, hocs: HigherOrderComponent[]): void;
+export type DecoratorsTuple = [Decoratable, Decorator<any>[]];
+export type DecoratorsCollection = Array<DecoratorsTuple>;
+interface CompositionProviderProps {
+    decorators?: DecoratorsCollection;
+    children: React.ReactNode;
 }
-declare const CompositionContext: React.Context<CompositionContext | undefined>;
-export declare const CompositionProvider: React.FC;
-export declare function useComponent(Component: ComponentType<any>): React.ComponentClass<unknown, any> | React.FunctionComponent<unknown>;
+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,126 +1,120 @@
-"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"));
-
-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);
+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);
   };
 }
 
-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];
+/**
+ * @deprecated Use `Decorator` instead.
+ */
 
-  var composeComponent = (0, _react.useCallback)(function (component, hocs) {
-    setComponents(function (prevComponents) {
-      var components = new Map(prevComponents);
-      var recipe = components.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));
-      components.set(component, {
-        component: compose.apply(void 0, (0, _toConsumableArray2.default)((0, _toConsumableArray2.default)(newHocs).reverse()))(component),
-        hocs: newHocs
-      });
-      return components;
-    }); // Return a function that will remove the added HOCs.
-
-    return function () {
-      setComponents(function (prevComponents) {
-        var components = new Map(prevComponents);
-        var recipe = components.get(component) || {
+      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 () => {
+      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);
-        components.set(component, {
+        const newHOCs = [...recipe.hocs].filter(hoc => !hocs.includes(hoc));
+        const NewComponent = compose(...[...newHOCs].reverse())(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);
-    return composedComponent ? composedComponent.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 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);
 };
-
-exports.CompositionProvider = CompositionProvider;
-
-function useComponent(Component) {
-  var context = useOptionalComposition();
-
+export function useComponent(baseFunction) {
+  const context = useOptionalComposition();
+  const scope = useCompositionScope();
   if (!context) {
-    return Component;
+    return baseFunction;
   }
-
-  return context.getComponent(Component) || Component;
+  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;
 }
+
 /**
  * This hook will not throw an error if composition context doesn't exist.
  */
+export function useOptionalComposition() {
+  return useContext(CompositionContext);
+}
 
-
-function useOptionalComposition() {
-  return (0, _react.useContext)(CompositionContext);
-}
+//# sourceMappingURL=Context.js.map

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":";;;;;;;;;;;;;;;;;;;AAAA;;AAUO,SAASA,OAAT,GAAiD;EAAA,kCAA7BC,GAA6B;IAA7BA,GAA6B;EAAA;;EACpD,OAAO,SAASC,iBAAT,CAA2BC,IAA3B,EAA2D;IAC9D,OAAOF,GAAG,CAACG,WAAJ,CAAgB,UAACC,SAAD,EAAYC,GAAZ;MAAA,OAAoBA,GAAG,CAACD,SAAD,CAAvB;IAAA,CAAhB,EAAoDF,IAApD,CAAP;EACH,CAFD;AAGH;;AA8BD,IAAMI,kBAAkB,gBAAG,IAAAC,oBAAA,EAA8CC,SAA9C,CAA3B;;AAEO,IAAMC,mBAA6B,GAAG,SAAhCA,mBAAgC,OAAkB;EAAA,IAAfC,QAAe,QAAfA,QAAe;;EAC3D,gBAAoC,IAAAC,eAAA,EAA6B,IAAIC,GAAJ,EAA7B,CAApC;EAAA;EAAA,IAAOC,UAAP;EAAA,IAAmBC,aAAnB;;EAEA,IAAMC,gBAAgB,GAAG,IAAAC,kBAAA,EACrB,UAACC,SAAD,EAAYC,IAAZ,EAAqB;IACjBJ,aAAa,CAAC,UAAAK,cAAc,EAAI;MAC5B,IAAMN,UAAU,GAAG,IAAID,GAAJ,CAAQO,cAAR,CAAnB;MACA,IAAMC,MAAM,GAAGP,UAAU,CAACQ,GAAX,CAAeJ,SAAf,KAA6B;QAAEA,SAAS,EAAE,IAAb;QAAmBC,IAAI,EAAE;MAAzB,CAA5C;MAEA,IAAMI,OAAO,8CAAQF,MAAM,CAACF,IAAP,IAAe,EAAvB,oCAA+BA,IAA/B,EAAb;MAEAL,UAAU,CAACU,GAAX,CAAeN,SAAf,EAA0B;QACtBA,SAAS,EAAElB,OAAO,MAAP,0CAAW,iCAAIuB,OAAJ,EAAaE,OAAb,EAAX,GAAmCP,SAAnC,CADW;QAEtBC,IAAI,EAAEI;MAFgB,CAA1B;MAKA,OAAOT,UAAP;IACH,CAZY,CAAb,CADiB,CAejB;;IACA,OAAO,YAAM;MACTC,aAAa,CAAC,UAAAK,cAAc,EAAI;QAC5B,IAAMN,UAAU,GAAG,IAAID,GAAJ,CAAQO,cAAR,CAAnB;QACA,IAAMC,MAAM,GAAGP,UAAU,CAACQ,GAAX,CAAeJ,SAAf,KAA6B;UACxCA,SAAS,EAAE,IAD6B;UAExCC,IAAI,EAAE;QAFkC,CAA5C;QAKA,IAAMO,OAAO,GAAG,iCAAIL,MAAM,CAACF,IAAX,EAAiBQ,MAAjB,CAAwB,UAAArB,GAAG;UAAA,OAAI,CAACa,IAAI,CAACS,QAAL,CAActB,GAAd,CAAL;QAAA,CAA3B,CAAhB;QACA,IAAMuB,YAAY,GAAG7B,OAAO,MAAP,0CAAW,iCAAI0B,OAAJ,EAAaD,OAAb,EAAX,GAAmCP,SAAnC,CAArB;QAEAJ,UAAU,CAACU,GAAX,CAAeN,SAAf,EAA0B;UACtBA,SAAS,EAAEW,YADW;UAEtBV,IAAI,EAAEO;QAFgB,CAA1B;QAKA,OAAOZ,UAAP;MACH,CAhBY,CAAb;IAiBH,CAlBD;EAmBH,CApCoB,EAqCrB,CAACC,aAAD,CArCqB,CAAzB;EAwCA,IAAMe,YAAgD,GAAG,IAAAb,kBAAA,EACrD,UAAAZ,SAAS,EAAI;IACT,IAAM0B,iBAAiB,GAAGjB,UAAU,CAACQ,GAAX,CAAejB,SAAf,CAA1B;IACA,OAAO0B,iBAAiB,GAAGA,iBAAiB,CAACb,SAArB,GAAiCT,SAAzD;EACH,CAJoD,EAKrD,CAACK,UAAD,CALqD,CAAzD;EAQA,IAAMkB,OAA2B,GAAG,IAAAC,cAAA,EAChC;IAAA,OAAO;MACHH,YAAY,EAAZA,YADG;MAEHd,gBAAgB,EAAhBA,gBAFG;MAGHF,UAAU,EAAVA;IAHG,CAAP;EAAA,CADgC,EAMhC,CAACA,UAAD,EAAaE,gBAAb,CANgC,CAApC;EASA,oBAAO,6BAAC,kBAAD,CAAoB,QAApB;IAA6B,KAAK,EAAEgB;EAApC,GAA8CrB,QAA9C,CAAP;AACH,CA7DM;;;;AA+DA,SAASuB,YAAT,CAAsB7B,SAAtB,EAAqD;EACxD,IAAM2B,OAAO,GAAGG,sBAAsB,EAAtC;;EAEA,IAAI,CAACH,OAAL,EAAc;IACV,OAAO3B,SAAP;EACH;;EAED,OAAO2B,OAAO,CAACF,YAAR,CAAqBzB,SAArB,KAAmCA,SAA1C;AACH;AAED;AACA;AACA;;;AACO,SAAS+B,cAAT,GAA0B;EAC7B,IAAMJ,OAAO,GAAG,IAAAK,iBAAA,EAAW9B,kBAAX,CAAhB;;EACA,IAAI,CAACyB,OAAL,EAAc;IACV,MAAM,IAAIM,KAAJ,iFAAN;EAGH;;EAED,OAAON,OAAP;AACH;AAED;AACA;AACA;;;AACO,SAASG,sBAAT,GAAkC;EACrC,OAAO,IAAAE,iBAAA,EAAW9B,kBAAX,CAAP;AACH"}
+{"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

@@ -0,0 +1,19 @@
+import React from "react";
+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<CanReturnNullOrElement<GetBaseFunction<T>>> : Decorator<GetBaseFunction<T>>): {
+    (): React.JSX.Element;
+    displayName: string;
+};
+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;
+};
+export {};

package/createDecorator.js

@@ -0,0 +1,29 @@
+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.
+ */
+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
+
+const isDecoratableComponent = decoratable => {
+  return "displayName" in decoratable;
+};
+export function createDecorator(Base, hoc) {
+  const DecoratorPlugin = () => /*#__PURE__*/React.createElement(Compose, {
+    component: Base,
+    with: hoc
+  });
+  if (isDecoratableComponent(Base)) {
+    DecoratorPlugin.displayName = Base.displayName;
+  }
+  return DecoratorPlugin;
+}
+
+//# sourceMappingURL=createDecorator.js.map

package/createDecorator.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+import React from "react";
+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>(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>(hook: TDecoratable) => DecoratableHook<GenericHook<GetDecorateeParams<GetDecoratee<TDecoratable>>, ReturnType<GetDecoratee<TDecoratable>>>> & {
+    createDecorator: (decorator: Decorator<GetDecoratee<TDecoratable>>) => () => React.JSX.Element;
+};

package/decorators.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { Compose } from "./Compose.js";
+export function createConditionalDecorator(shouldDecorate, decorator, decoratorProps) {
+  return Original => {
+    const DecoratedComponent = /*#__PURE__*/React.memo(decorator(Original));
+    DecoratedComponent.displayName = Original.displayName;
+    return function ShouldDecorate(props) {
+      if (shouldDecorate(decoratorProps, props)) {
+        // @ts-expect-error
+        return /*#__PURE__*/React.createElement(DecoratedComponent, props);
+      }
+
+      // @ts-expect-error
+      return /*#__PURE__*/React.createElement(Original, props);
+    };
+  };
+}
+const memoizedComponent = decorator => {
+  return decoratee => {
+    return /*#__PURE__*/React.memo(decorator(decoratee));
+  };
+};
+export function createDecoratorFactory() {
+  return function from(decoratable, shouldDecorate) {
+    return function createDecorator(decorator) {
+      return function DecoratorPlugin(props) {
+        if (shouldDecorate) {
+          const componentDecorator = createConditionalDecorator(shouldDecorate, decorator, props);
+          return /*#__PURE__*/React.createElement(Compose, {
+            function: decoratable,
+            with: componentDecorator
+          });
+        }
+        return /*#__PURE__*/React.createElement(Compose, {
+          function: decoratable,
+          with: memoizedComponent(decorator)
+        });
+      };
+    };
+  };
+}
+export function createHookDecoratorFactory() {
+  return function from(decoratable) {
+    return function createDecorator(decorator) {
+      return function DecoratorPlugin() {
+        return /*#__PURE__*/React.createElement(Compose, {
+          function: decoratable,
+          with: decorator
+        });
+      };
+    };
+  };
+}
+export function withDecoratorFactory() {
+  return function WithDecorator(Component, shouldDecorate) {
+    const createDecorator = createDecoratorFactory()(Component, shouldDecorate);
+    return Object.assign(Component, {
+      createDecorator
+    });
+  };
+}
+export function withHookDecoratorFactory() {
+  return function WithHookDecorator(hook) {
+    const createDecorator = createHookDecoratorFactory()(hook);
+    return Object.assign(hook, {
+      createDecorator
+    });
+  };
+}
+
+//# sourceMappingURL=decorators.js.map

package/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Compose","createConditionalDecorator","shouldDecorate","decorator","decoratorProps","Original","DecoratedComponent","memo","displayName","ShouldDecorate","props","createElement","memoizedComponent","decoratee","createDecoratorFactory","from","decoratable","createDecorator","DecoratorPlugin","componentDecorator","function","with","createHookDecoratorFactory","withDecoratorFactory","WithDecorator","Component","Object","assign","withHookDecoratorFactory","WithHookDecorator","hook"],"sources":["decorators.tsx"],"sourcesContent":["import React from \"react\";\nimport { Compose } from \"~/Compose.js\";\nimport type { GetDecoratee, GetDecorateeParams } from \"~/createDecorator.js\";\nimport type {\n    DecoratableComponent,\n    GenericComponent,\n    Decorator,\n    GenericHook,\n    DecoratableHook,\n    ComponentDecorator\n} from \"~/types.js\";\n\nexport interface ShouldDecorate<TDecorator = any, TComponent = any> {\n    (decoratorProps: TDecorator, componentProps: TComponent): boolean;\n}\n\nexport function createConditionalDecorator<TDecoratee extends GenericComponent>(\n    shouldDecorate: ShouldDecorate,\n    decorator: Decorator<TDecoratee>,\n    decoratorProps: unknown\n): Decorator<TDecoratee> {\n    return (Original => {\n        const DecoratedComponent = React.memo(decorator(Original));\n        DecoratedComponent.displayName = Original.displayName;\n\n        return function ShouldDecorate(props: unknown) {\n            if (shouldDecorate(decoratorProps, props)) {\n                // @ts-expect-error\n                return <DecoratedComponent {...props} />;\n            }\n\n            // @ts-expect-error\n            return <Original {...props} />;\n        };\n    }) as Decorator<TDecoratee>;\n}\n\nconst memoizedComponent = <T extends GenericComponent>(decorator: Decorator<T>) => {\n    return (decoratee: T) => {\n        return React.memo(decorator(decoratee));\n    };\n};\n\nexport function createDecoratorFactory<TDecorator>() {\n    return function from<TDecoratable extends DecoratableComponent>(\n        decoratable: TDecoratable,\n        shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>>\n    ) {\n        return function createDecorator(decorator: ComponentDecorator<GetDecoratee<TDecoratable>>) {\n            return function DecoratorPlugin(props: TDecorator) {\n                if (shouldDecorate) {\n                    const componentDecorator = createConditionalDecorator<GenericComponent>(\n                        shouldDecorate,\n                        decorator as unknown as Decorator<GenericComponent>,\n                        props\n                    );\n\n                    return <Compose function={decoratable} with={componentDecorator} />;\n                }\n\n                return (\n                    <Compose\n                        function={decoratable}\n                        with={memoizedComponent(\n                            decorator as unknown as Decorator<GenericComponent>\n                        )}\n                    />\n                );\n            };\n        };\n    };\n}\n\nexport function createHookDecoratorFactory() {\n    return function from<TDecoratable extends DecoratableHook>(decoratable: TDecoratable) {\n        return function createDecorator(decorator: Decorator<GetDecoratee<TDecoratable>>) {\n            return function DecoratorPlugin() {\n                return (\n                    <Compose\n                        function={decoratable}\n                        with={decorator as unknown as Decorator<GenericHook>}\n                    />\n                );\n            };\n        };\n    };\n}\n\nexport function withDecoratorFactory<TDecorator>() {\n    return function WithDecorator<TDecoratable extends DecoratableComponent>(\n        Component: TDecoratable,\n        shouldDecorate?: ShouldDecorate<TDecorator, GetDecorateeParams<GetDecoratee<TDecoratable>>>\n    ) {\n        const createDecorator = createDecoratorFactory<TDecorator>()(Component, shouldDecorate);\n\n        return Object.assign(Component, { createDecorator }) as TDecoratable & {\n            createDecorator: typeof createDecorator;\n        };\n    };\n}\n\nexport function withHookDecoratorFactory() {\n    return function WithHookDecorator<TDecoratable extends DecoratableHook>(hook: TDecoratable) {\n        const createDecorator = createHookDecoratorFactory()(hook);\n\n        return Object.assign(hook, { createDecorator }) as unknown as DecoratableHook<\n            GenericHook<\n                GetDecorateeParams<GetDecoratee<TDecoratable>>,\n                ReturnType<GetDecoratee<TDecoratable>>\n            >\n        > & { createDecorator: typeof createDecorator };\n    };\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO;AAehB,OAAO,SAASC,0BAA0BA,CACtCC,cAA8B,EAC9BC,SAAgC,EAChCC,cAAuB,EACF;EACrB,OAAQC,QAAQ,IAAI;IAChB,MAAMC,kBAAkB,gBAAGP,KAAK,CAACQ,IAAI,CAACJ,SAAS,CAACE,QAAQ,CAAC,CAAC;IAC1DC,kBAAkB,CAACE,WAAW,GAAGH,QAAQ,CAACG,WAAW;IAErD,OAAO,SAASC,cAAcA,CAACC,KAAc,EAAE;MAC3C,IAAIR,cAAc,CAACE,cAAc,EAAEM,KAAK,CAAC,EAAE;QACvC;QACA,oBAAOX,KAAA,CAAAY,aAAA,CAACL,kBAAkB,EAAKI,KAAQ,CAAC;MAC5C;;MAEA;MACA,oBAAOX,KAAA,CAAAY,aAAA,CAACN,QAAQ,EAAKK,KAAQ,CAAC;IAClC,CAAC;EACL,CAAC;AACL;AAEA,MAAME,iBAAiB,GAAgCT,SAAuB,IAAK;EAC/E,OAAQU,SAAY,IAAK;IACrB,oBAAOd,KAAK,CAACQ,IAAI,CAACJ,SAAS,CAACU,SAAS,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC;AAED,OAAO,SAASC,sBAAsBA,CAAA,EAAe;EACjD,OAAO,SAASC,IAAIA,CAChBC,WAAyB,EACzBd,cAA2F,EAC7F;IACE,OAAO,SAASe,eAAeA,CAACd,SAAyD,EAAE;MACvF,OAAO,SAASe,eAAeA,CAACR,KAAiB,EAAE;QAC/C,IAAIR,cAAc,EAAE;UAChB,MAAMiB,kBAAkB,GAAGlB,0BAA0B,CACjDC,cAAc,EACdC,SAAS,EACTO,KACJ,CAAC;UAED,oBAAOX,KAAA,CAAAY,aAAA,CAACX,OAAO;YAACoB,QAAQ,EAAEJ,WAAY;YAACK,IAAI,EAAEF;UAAmB,CAAE,CAAC;QACvE;QAEA,oBACIpB,KAAA,CAAAY,aAAA,CAACX,OAAO;UACJoB,QAAQ,EAAEJ,WAAY;UACtBK,IAAI,EAAET,iBAAiB,CACnBT,SACJ;QAAE,CACL,CAAC;MAEV,CAAC;IACL,CAAC;EACL,CAAC;AACL;AAEA,OAAO,SAASmB,0BAA0BA,CAAA,EAAG;EACzC,OAAO,SAASP,IAAIA,CAAuCC,WAAyB,EAAE;IAClF,OAAO,SAASC,eAAeA,CAACd,SAAgD,EAAE;MAC9E,OAAO,SAASe,eAAeA,CAAA,EAAG;QAC9B,oBACInB,KAAA,CAAAY,aAAA,CAACX,OAAO;UACJoB,QAAQ,EAAEJ,WAAY;UACtBK,IAAI,EAAElB;QAA+C,CACxD,CAAC;MAEV,CAAC;IACL,CAAC;EACL,CAAC;AACL;AAEA,OAAO,SAASoB,oBAAoBA,CAAA,EAAe;EAC/C,OAAO,SAASC,aAAaA,CACzBC,SAAuB,EACvBvB,cAA2F,EAC7F;IACE,MAAMe,eAAe,GAAGH,sBAAsB,CAAa,CAAC,CAACW,SAAS,EAAEvB,cAAc,CAAC;IAEvF,OAAOwB,MAAM,CAACC,MAAM,CAACF,SAAS,EAAE;MAAER;IAAgB,CAAC,CAAC;EAGxD,CAAC;AACL;AAEA,OAAO,SAASW,wBAAwBA,CAAA,EAAG;EACvC,OAAO,SAASC,iBAAiBA,CAAuCC,IAAkB,EAAE;IACxF,MAAMb,eAAe,GAAGK,0BAA0B,CAAC,CAAC,CAACQ,IAAI,CAAC;IAE1D,OAAOJ,MAAM,CAACC,MAAM,CAACG,IAAI,EAAE;MAAEb;IAAgB,CAAC,CAAC;EAMnD,CAAC;AACL","ignoreList":[]}

package/index.d.ts

@@ -1,4 +1,8 @@
-export * from "./Context";
-export * from "./Compose";
-export * from "./makeComposable";
-export * from "./createComponentPlugin";
+export * from "./Context.js";
+export * from "./Compose.js";
+export * from "./makeComposable.js";
+export * from "./makeDecoratable.js";
+export * from "./createDecorator.js";
+export * from "./decorators.js";
+export * from "./CompositionScope.js";
+export type * from "./types.js";

package/index.js

@@ -1,57 +1,9 @@
-"use strict";
-
-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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Context[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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Compose[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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _makeComposable[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;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _createComponentPlugin[key];
-    }
-  });
-});
+export * from "./Context.js";
+export * from "./Compose.js";
+export * from "./makeComposable.js";
+export * from "./makeDecoratable.js";
+export * from "./createDecorator.js";
+export * from "./decorators.js";
+export * from "./CompositionScope.js";
+
+//# sourceMappingURL=index.js.map

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.js\";\nexport * from \"./Compose.js\";\nexport * from \"./makeComposable.js\";\nexport * from \"./makeDecoratable.js\";\nexport * from \"./createDecorator.js\";\nexport * from \"./decorators.js\";\nexport * from \"./CompositionScope.js\";\nexport type * from \"./types.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/makeComposable.d.ts

@@ -1,3 +1,43 @@
-import React from "react";
-import { ComposableFC } from "./Compose";
-export declare function makeComposable<TProps>(name: string, Component?: React.FC<TProps>): ComposableFC<TProps>;
+import type { GenericComponent } from "./types.js";
+/**
+ * @deprecated Use `makeDecoratable` instead.
+ */
+export declare function makeComposable<T extends GenericComponent>(name: string, Component?: T): (((() => null) | T) & {
+    original: (() => null) | T;
+    originalName: string;
+    displayName: string;
+}) & {
+    original: ((() => null) | T) & {
+        original: (() => null) | T;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("~/types.js").ComponentDecorator<import("./createDecorator").GetDecoratee<(() => null) & {
+        original: (() => null) | T;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((() => null) | T) & {
+            original: (() => null) | T;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    }> | import("./createDecorator").GetDecoratee<T & {
+        original: (() => null) | T;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((() => null) | T) & {
+            original: (() => null) | T;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    }>>) => (props: unknown) => import("react").JSX.Element;
+};

package/makeComposable.js

@@ -1,72 +1,14 @@
-"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)([]);
+import { createContext } from "react";
+import { makeDecoratable } from "./makeDecoratable.js";
+const ComposableContext = /*#__PURE__*/createContext([]);
 ComposableContext.displayName = "ComposableContext";
+const nullRenderer = () => null;
 
-function useComposableParents() {
-  var context = (0, _react.useContext)(ComposableContext);
-
-  if (!context) {
-    return [];
-  }
-
-  return context;
+/**
+ * @deprecated Use `makeDecoratable` instead.
+ */
+export function makeComposable(name, Component) {
+  return makeDecoratable(name, Component ?? nullRenderer);
 }
 
-var createEmptyRenderer = function createEmptyRenderer(name) {
-  return (0, _defineProperty2.default)({}, name, function () {
-    (0, _react.useEffect)(function () {
-      // We need to debounce the log, as it sometimes only requires a single tick to get the new
-      // composed component to render, and we don't want to scare developers for no reason.
-      var debounced = (0, _lodash.default)(function () {
-        console.info("<".concat(name, "/> is not implemented! To provide an implementation, use the <Compose/> component."));
-      }, 100);
-      return function () {
-        debounced.cancel();
-      };
-    }, []);
-    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);
-    var context = (0, _react.useMemo)(function () {
-      return [].concat((0, _toConsumableArray2.default)(parents), [name]);
-    }, [parents, name]);
-    return /*#__PURE__*/_react.default.createElement(ComposableContext.Provider, {
-      value: context
-    }, /*#__PURE__*/_react.default.createElement(ComposedComponent, props, props.children));
-  };
-
-  Component.displayName = name;
-  Composable.original = Component;
-  Composable.originalName = name;
-  Composable.displayName = "Composable<".concat(name, ">");
-  return Composable;
-}
+//# sourceMappingURL=makeComposable.js.map

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":["createContext","makeDecoratable","ComposableContext","displayName","nullRenderer","makeComposable","name","Component"],"sources":["makeComposable.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { GenericComponent } from \"~/types.js\";\nimport { makeDecoratable } from \"~/makeDecoratable.js\";\n\nconst ComposableContext = createContext<string[]>([]);\nComposableContext.displayName = \"ComposableContext\";\n\nconst nullRenderer = () => null;\n\n/**\n * @deprecated Use `makeDecoratable` instead.\n */\nexport function makeComposable<T extends GenericComponent>(name: string, Component?: T) {\n    return makeDecoratable(name, Component ?? nullRenderer);\n}\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAErC,SAASC,eAAe;AAExB,MAAMC,iBAAiB,gBAAGF,aAAa,CAAW,EAAE,CAAC;AACrDE,iBAAiB,CAACC,WAAW,GAAG,mBAAmB;AAEnD,MAAMC,YAAY,GAAGA,CAAA,KAAM,IAAI;;AAE/B;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAA6BC,IAAY,EAAEC,SAAa,EAAE;EACpF,OAAON,eAAe,CAACK,IAAI,EAAEC,SAAS,IAAIH,YAAY,CAAC;AAC3D","ignoreList":[]}

package/makeDecoratable.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { DecoratableComponent, DecoratableHook, GenericComponent, GenericHook } from "./types.js";
+declare function makeDecoratableComponent<T extends GenericComponent>(name: string, Component?: T): T & {
+    original: T;
+    originalName: string;
+    displayName: string;
+} & {
+    original: T & {
+        original: T;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("~/types.js").ComponentDecorator<import("./createDecorator.js").GetDecoratee<DecoratableComponent<T & {
+        original: T;
+        originalName: string;
+        displayName: string;
+    }>>>) => (props: unknown) => React.JSX.Element;
+};
+export declare function makeDecoratableHook<T extends GenericHook>(hook: T): GenericHook<import("./createDecorator.js").GetDecorateeParams<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>, ReturnType<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>> & {
+    original: GenericHook<import("./createDecorator.js").GetDecorateeParams<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>, ReturnType<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>>;
+    originalName: string;
+} & {
+    createDecorator: (decorator: import("~/types.js").Decorator<import("./createDecorator.js").GetDecoratee<DecoratableHook<T>>>) => () => React.JSX.Element;
+};
+export declare function createVoidComponent<T>(): (props: T) => JSX.Element | null;
+export declare function makeDecoratable<T extends GenericHook>(hook: T): ReturnType<typeof makeDecoratableHook<T>>;
+export declare function makeDecoratable<T extends GenericComponent>(name: string, Component: T): ReturnType<typeof makeDecoratableComponent<T>>;
+export {};

package/makeDecoratable.js

@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { useComponent } from "./Context.js";
+import { withDecoratorFactory, withHookDecoratorFactory } from "./decorators.js";
+const ComposableContext = /*#__PURE__*/createContext([]);
+ComposableContext.displayName = "ComposableContext";
+function useComposableParents() {
+  const context = useContext(ComposableContext);
+  if (!context) {
+    return [];
+  }
+  return context;
+}
+const nullRenderer = () => null;
+function makeDecoratableComponent(name, Component = nullRenderer) {
+  const Decoratable = props => {
+    const parents = useComposableParents();
+    const ComposedComponent = useComponent(Component);
+    const context = useMemo(() => [...parents, name], [parents, name]);
+    return /*#__PURE__*/React.createElement(ComposableContext.Provider, {
+      value: context
+    }, /*#__PURE__*/React.createElement(ComposedComponent, props, props.children));
+  };
+  const staticProps = {
+    original: Component,
+    originalName: name,
+    displayName: `Decoratable<${name}>`
+  };
+  return withDecoratorFactory()(Object.assign(Decoratable, staticProps));
+}
+export function makeDecoratableHook(hook) {
+  const decoratableHook = params => {
+    const composedHook = useComponent(hook);
+    return composedHook(params);
+  };
+  decoratableHook.original = hook;
+  return withHookDecoratorFactory()(decoratableHook);
+}
+export function createVoidComponent() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  return props => {
+    return null;
+  };
+}
+export function makeDecoratable(hookOrName, Component) {
+  if (Component) {
+    const component = makeDecoratableComponent(hookOrName, /*#__PURE__*/React.memo(Component));
+    component.original.displayName = hookOrName;
+    return component;
+  }
+  return makeDecoratableHook(hookOrName);
+}
+
+//# sourceMappingURL=makeDecoratable.js.map

package/makeDecoratable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","useMemo","useComponent","withDecoratorFactory","withHookDecoratorFactory","ComposableContext","displayName","useComposableParents","context","nullRenderer","makeDecoratableComponent","name","Component","Decoratable","props","parents","ComposedComponent","createElement","Provider","value","children","staticProps","original","originalName","Object","assign","makeDecoratableHook","hook","decoratableHook","params","composedHook","createVoidComponent","makeDecoratable","hookOrName","component","memo"],"sources":["makeDecoratable.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\nimport { useComponent } from \"./Context.js\";\nimport type {\n    DecoratableComponent,\n    DecoratableHook,\n    GenericComponent,\n    GenericHook\n} from \"~/types.js\";\nimport { withDecoratorFactory, withHookDecoratorFactory } from \"~/decorators.js\";\n\nconst ComposableContext = createContext<string[]>([]);\nComposableContext.displayName = \"ComposableContext\";\n\nfunction useComposableParents() {\n    const context = useContext(ComposableContext);\n    if (!context) {\n        return [];\n    }\n\n    return context;\n}\n\nconst nullRenderer = () => null;\n\nfunction makeDecoratableComponent<T extends GenericComponent>(\n    name: string,\n    Component: T = nullRenderer as unknown as T\n) {\n    const Decoratable = (props: React.ComponentProps<T>): JSX.Element | null => {\n        const parents = useComposableParents();\n        const ComposedComponent = useComponent(Component) as GenericComponent<\n            React.ComponentProps<T>\n        >;\n\n        const context = useMemo(() => [...parents, name], [parents, name]);\n\n        return (\n            <ComposableContext.Provider value={context}>\n                <ComposedComponent {...props}>{props.children}</ComposedComponent>\n            </ComposableContext.Provider>\n        );\n    };\n\n    const staticProps = {\n        original: Component,\n        originalName: name,\n        displayName: `Decoratable<${name}>`\n    };\n\n    return withDecoratorFactory()(\n        Object.assign(Decoratable, staticProps) as DecoratableComponent<\n            typeof Component & typeof staticProps\n        >\n    );\n}\n\nexport function makeDecoratableHook<T extends GenericHook>(hook: T) {\n    const decoratableHook = (params: Parameters<T>) => {\n        const composedHook = useComponent(hook);\n\n        return composedHook(params) as DecoratableHook<T>;\n    };\n\n    decoratableHook.original = hook;\n\n    return withHookDecoratorFactory()(decoratableHook as DecoratableHook<T>);\n}\n\nexport function createVoidComponent<T>() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    return (props: T): JSX.Element | null => {\n        return null;\n    };\n}\n\nexport function makeDecoratable<T extends GenericHook>(\n    hook: T\n): ReturnType<typeof makeDecoratableHook<T>>;\nexport function makeDecoratable<T extends GenericComponent>(\n    name: string,\n    Component: T\n): ReturnType<typeof makeDecoratableComponent<T>>;\nexport function makeDecoratable(hookOrName: any, Component?: any) {\n    if (Component) {\n        const component = makeDecoratableComponent(hookOrName, React.memo(Component));\n        component.original.displayName = hookOrName;\n        return component;\n    }\n\n    return makeDecoratableHook(hookOrName);\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACjE,SAASC,YAAY;AAOrB,SAASC,oBAAoB,EAAEC,wBAAwB;AAEvD,MAAMC,iBAAiB,gBAAGN,aAAa,CAAW,EAAE,CAAC;AACrDM,iBAAiB,CAACC,WAAW,GAAG,mBAAmB;AAEnD,SAASC,oBAAoBA,CAAA,EAAG;EAC5B,MAAMC,OAAO,GAAGR,UAAU,CAACK,iBAAiB,CAAC;EAC7C,IAAI,CAACG,OAAO,EAAE;IACV,OAAO,EAAE;EACb;EAEA,OAAOA,OAAO;AAClB;AAEA,MAAMC,YAAY,GAAGA,CAAA,KAAM,IAAI;AAE/B,SAASC,wBAAwBA,CAC7BC,IAAY,EACZC,SAAY,GAAGH,YAA4B,EAC7C;EACE,MAAMI,WAAW,GAAIC,KAA8B,IAAyB;IACxE,MAAMC,OAAO,GAAGR,oBAAoB,CAAC,CAAC;IACtC,MAAMS,iBAAiB,GAAGd,YAAY,CAACU,SAAS,CAE/C;IAED,MAAMJ,OAAO,GAAGP,OAAO,CAAC,MAAM,CAAC,GAAGc,OAAO,EAAEJ,IAAI,CAAC,EAAE,CAACI,OAAO,EAAEJ,IAAI,CAAC,CAAC;IAElE,oBACIb,KAAA,CAAAmB,aAAA,CAACZ,iBAAiB,CAACa,QAAQ;MAACC,KAAK,EAAEX;IAAQ,gBACvCV,KAAA,CAAAmB,aAAA,CAACD,iBAAiB,EAAKF,KAAK,EAAGA,KAAK,CAACM,QAA4B,CACzC,CAAC;EAErC,CAAC;EAED,MAAMC,WAAW,GAAG;IAChBC,QAAQ,EAAEV,SAAS;IACnBW,YAAY,EAAEZ,IAAI;IAClBL,WAAW,EAAE,eAAeK,IAAI;EACpC,CAAC;EAED,OAAOR,oBAAoB,CAAC,CAAC,CACzBqB,MAAM,CAACC,MAAM,CAACZ,WAAW,EAAEQ,WAAW,CAG1C,CAAC;AACL;AAEA,OAAO,SAASK,mBAAmBA,CAAwBC,IAAO,EAAE;EAChE,MAAMC,eAAe,GAAIC,MAAqB,IAAK;IAC/C,MAAMC,YAAY,GAAG5B,YAAY,CAACyB,IAAI,CAAC;IAEvC,OAAOG,YAAY,CAACD,MAAM,CAAC;EAC/B,CAAC;EAEDD,eAAe,CAACN,QAAQ,GAAGK,IAAI;EAE/B,OAAOvB,wBAAwB,CAAC,CAAC,CAACwB,eAAqC,CAAC;AAC5E;AAEA,OAAO,SAASG,mBAAmBA,CAAA,EAAM;EACrC;EACA,OAAQjB,KAAQ,IAAyB;IACrC,OAAO,IAAI;EACf,CAAC;AACL;AASA,OAAO,SAASkB,eAAeA,CAACC,UAAe,EAAErB,SAAe,EAAE;EAC9D,IAAIA,SAAS,EAAE;IACX,MAAMsB,SAAS,GAAGxB,wBAAwB,CAACuB,UAAU,eAAEnC,KAAK,CAACqC,IAAI,CAACvB,SAAS,CAAC,CAAC;IAC7EsB,SAAS,CAACZ,QAAQ,CAAChB,WAAW,GAAG2B,UAAU;IAC3C,OAAOC,SAAS;EACpB;EAEA,OAAOR,mBAAmB,CAACO,UAAU,CAAC;AAC1C","ignoreList":[]}

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@webiny/react-composition",
-	"version": "0.0.0-unstable.615a930a68",
+	"version": "0.0.0-unstable.61c048f412",
+	"type": "module",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -14,29 +15,19 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.19.0",
-		"@types/react": "17.0.39",
-		"lodash.debounce": "4.0.8",
-		"react": "17.0.2",
-		"react-dom": "17.0.2"
+		"@types/react": "18.2.79",
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
 	},
 	"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.615a930a68",
-		"@webiny/project-utils": "^0.0.0-unstable.615a930a68",
-		"ttypescript": "^1.5.13",
-		"typescript": "4.7.4"
+		"@testing-library/react": "15.0.7",
+		"@webiny/build-tools": "0.0.0-unstable.61c048f412",
+		"typescript": "5.9.3",
+		"vitest": "3.2.4"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
-	},
-	"gitHead": "615a930a68d692c832e4f100405eeb3f5a8874af"
+	"gitHead": "61c048f412d6b4aa70c1d105aab21e3fa69730f3"
 }

package/types.d.ts

@@ -0,0 +1,35 @@
+import type React from "react";
+export type GenericHook<TParams = any, TReturn = any> = (...args: TParams[]) => TReturn;
+export type GenericComponent<T = any> = React.FunctionComponent<T>;
+export type ComposedFunction = GenericHook;
+export type Decorator<T> = (decoratee: T) => T;
+/**
+ * Some decoratable components will always return `null`, by design.
+ * To allow you to decorate these components, we must tell TS that the decorator is allowed to return not just `null`
+ * (which is inferred from the component type), but also a JSX.Element.
+ */
+export type ComponentDecorator<T> = (decoratee: T) => CanReturnNullOrElement<T>;
+/**
+ * @deprecated
+ */
+export type ComposableFC<T> = T & {
+    displayName?: string;
+    original: T;
+    originalName: string;
+};
+export type Enumerable<T> = T extends Array<infer D> ? Array<D> : never;
+export type ComposeWith = Decorator<GenericComponent> | Decorator<GenericComponent>[] | Decorator<GenericHook> | Decorator<GenericHook>[];
+export type DecoratableHook<T extends GenericHook = GenericHook> = T & {
+    original: T;
+    originalName: string;
+};
+export type DecoratableComponent<T = GenericComponent> = T & {
+    original: T;
+    originalName: string;
+    displayName: string;
+};
+export type Decoratable = DecoratableComponent | DecoratableHook;
+/**
+ * @internal Add `null` to the ReturnType of the given function.
+ */
+export type CanReturnNullOrElement<T> = T extends (...args: any) => any ? (...args: Parameters<T>) => JSX.Element | null : never;

package/types.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type React from \"react\";\n\nexport type GenericHook<TParams = any, TReturn = any> = (...args: TParams[]) => TReturn;\n\nexport type GenericComponent<T = any> = React.FunctionComponent<T>;\n\nexport type ComposedFunction = GenericHook;\n\nexport type Decorator<T> = (decoratee: T) => T;\n\n/**\n * Some decoratable components will always return `null`, by design.\n * To allow you to decorate these components, we must tell TS that the decorator is allowed to return not just `null`\n * (which is inferred from the component type), but also a JSX.Element.\n */\nexport type ComponentDecorator<T> = (decoratee: T) => CanReturnNullOrElement<T>;\n\n/**\n * @deprecated\n */\nexport type ComposableFC<T> = T & {\n    displayName?: string;\n    original: T;\n    originalName: string;\n};\n\nexport type Enumerable<T> = T extends Array<infer D> ? Array<D> : never;\n\nexport type ComposeWith =\n    | Decorator<GenericComponent>\n    | Decorator<GenericComponent>[]\n    | Decorator<GenericHook>\n    | Decorator<GenericHook>[];\n\nexport type DecoratableHook<T extends GenericHook = GenericHook> = T & {\n    original: T;\n    originalName: string;\n};\n\nexport type DecoratableComponent<T = GenericComponent> = T & {\n    original: T;\n    originalName: string;\n    displayName: string;\n};\n\nexport type Decoratable = DecoratableComponent | DecoratableHook;\n\n/**\n * @internal Add `null` to the ReturnType of the given function.\n */\nexport type CanReturnNullOrElement<T> = T extends (...args: any) => any\n    ? (...args: Parameters<T>) => JSX.Element | null\n    : never;\n"],"mappings":"","ignoreList":[]}

package/createComponentPlugin.d.ts

@@ -1,3 +0,0 @@
-import React, { ComponentProps } from "react";
-import { ComposableFC, HigherOrderComponent } from "./index";
-export declare function createComponentPlugin<T extends ComposableFC<ComponentProps<T>>>(Base: T, hoc: HigherOrderComponent<ComponentProps<T>>): React.FC;

package/createComponentPlugin.js

@@ -1,24 +0,0 @@
-"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");
-
-function createComponentPlugin(Base, hoc) {
-  var ComponentPlugin = function ComponentPlugin() {
-    return /*#__PURE__*/_react.default.createElement(_index.Compose, {
-      component: Base,
-      with: hoc
-    });
-  };
-
-  ComponentPlugin.displayName = Base.displayName;
-  return ComponentPlugin;
-}

package/createComponentPlugin.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createComponentPlugin","Base","hoc","ComponentPlugin","displayName"],"sources":["createComponentPlugin.tsx"],"sourcesContent":["import React, { ComponentProps } from \"react\";\nimport { ComposableFC, Compose, HigherOrderComponent } from \"./index\";\n\nexport function createComponentPlugin<T extends ComposableFC<ComponentProps<T>>>(\n    Base: T,\n    hoc: HigherOrderComponent<ComponentProps<T>>\n): React.FC {\n    const ComponentPlugin = () => <Compose component={Base} with={hoc} />;\n    ComponentPlugin.displayName = Base.displayName;\n    return ComponentPlugin;\n}\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,SAASA,qBAAT,CACHC,IADG,EAEHC,GAFG,EAGK;EACR,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;IAAA,oBAAM,6BAAC,cAAD;MAAS,SAAS,EAAEF,IAApB;MAA0B,IAAI,EAAEC;IAAhC,EAAN;EAAA,CAAxB;;EACAC,eAAe,CAACC,WAAhB,GAA8BH,IAAI,CAACG,WAAnC;EACA,OAAOD,eAAP;AACH"}