@webiny/react-composition 0.0.0-unstable.79032b23a5 → 0.0.0-unstable.7be00a75a9

package/Compose.d.ts

@@ -1,15 +1,9 @@
 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) => React.JSX.Element | null;

package/Compose.js

@@ -1,22 +1,56 @@
-"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!"));
-      return;
+import react, { useEffect, useRef } from "react";
+import { useCompositionStore } from "./Context.js";
+import { useCompositionScope } from "./CompositionScope.js";
+const Compose = (props)=>{
+    const store = useCompositionStore();
+    const { scope, inherit } = useCompositionScope();
+    const targetFn = props.function ?? props.component;
+    if (!targetFn) {
+        console.warn("You must provide a function or a component to compose with!", props);
+        return null;
+    }
+    if (void 0 === targetFn.original) {
+        console.warn(`You must make your function "${targetFn.originalName ?? targetFn.name}" composable, by using the makeDecoratable() function!`);
+        return null;
     }
-    var hocs = Array.isArray(props.with) ? props.with : [props.with];
-    return composeComponent(props.component.original, hocs);
-  }, [props.with]);
-  return null;
+    const decorators = Array.isArray(props.with) ? props.with : [
+        props.with
+    ];
+    const currentScope = scope[scope.length - 1] ?? "*";
+    store.register(targetFn.original, decorators, currentScope, inherit, true);
+    return /*#__PURE__*/ react.createElement(ComposeEffects, {
+        store: store,
+        target: targetFn.original,
+        decorators: decorators,
+        scope: currentScope,
+        inherit: inherit
+    });
 };
-exports.Compose = Compose;
+function ComposeEffects({ store, target, decorators, scope, inherit }) {
+    const prevRef = useRef(null);
+    const liveRef = useRef(decorators);
+    if (liveRef.current !== decorators) {
+        store.register(target, decorators, scope, inherit, true, liveRef.current);
+        liveRef.current = decorators;
+    }
+    useEffect(()=>{
+        const prev = prevRef.current;
+        if (prev && (prev.decorators !== decorators || prev.scope !== scope)) store.notify();
+        prevRef.current = {
+            decorators,
+            scope
+        };
+        return ()=>{
+            store.unregister(target, decorators, scope);
+        };
+    }, [
+        store,
+        target,
+        decorators,
+        scope
+    ]);
+    return null;
+}
+export { 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,OAA+B,CAAGC,KAAK,EAAI;EACpD,sBAA6B,IAAAC,uBAAc,GAAE;IAArCC,gBAAgB,mBAAhBA,gBAAgB;EAExB,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,OAAOH,KAAK,CAACI,SAAS,CAACC,QAAQ,KAAK,WAAW,EAAE;MACjDC,OAAO,CAACC,IAAI,2CAC0BP,KAAK,CAACI,SAAS,CAACI,WAAW,6DAChE;MAED;IACJ;IAEA,IAAMC,IAAI,GAAGC,KAAK,CAACC,OAAO,CAACX,KAAK,CAACY,IAAI,CAAC,GAAGZ,KAAK,CAACY,IAAI,GAAG,CAACZ,KAAK,CAACY,IAAI,CAAC;IAClE,OAAOV,gBAAgB,CAACF,KAAK,CAACI,SAAS,CAACC,QAAQ,EAAEI,IAAI,CAAC;EAC3D,CAAC,EAAE,CAACT,KAAK,CAACY,IAAI,CAAC,CAAC;EAEhB,OAAO,IAAI;AACf,CAAC;AAAC"}
+{"version":3,"file":"Compose.js","sources":["../src/Compose.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport type { DecoratableTypes } from \"./Context.js\";\nimport { useCompositionStore } from \"./Context.js\";\nimport { useCompositionScope } from \"~/CompositionScope.js\";\nimport type {\n    ComposeWith,\n    Decoratable,\n    Decorator,\n    GenericComponent,\n    GenericHook\n} 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 store = useCompositionStore();\n    const { scope, inherit } = useCompositionScope();\n\n    const targetFn = (props.function ?? props.component) as Decoratable;\n\n    if (!targetFn) {\n        console.warn(\"You must provide a function or a component to compose with!\", props);\n        return null;\n    }\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        return null;\n    }\n\n    const decorators = (Array.isArray(props.with) ? props.with : [props.with]) as Decorator<\n        GenericComponent | GenericHook\n    >[];\n    const currentScope = scope[scope.length - 1] ?? \"*\";\n\n    // Register synchronously during render so decorators are available immediately.\n    // Pass silent=true to avoid notifying listeners mid-render (which would trigger\n    // setState in other components and cause React warnings).\n    store.register(targetFn.original, decorators, currentScope, inherit, true);\n\n    return (\n        <ComposeEffects\n            store={store}\n            target={targetFn.original}\n            decorators={decorators}\n            scope={currentScope}\n            inherit={inherit}\n        />\n    );\n};\n\n/**\n * Separate component for the effect to avoid re-running the cleanup on every render.\n * This component handles cleanup on unmount and when props change.\n */\nfunction ComposeEffects({\n    store,\n    target,\n    decorators,\n    scope,\n    inherit\n}: {\n    store: ReturnType<typeof useCompositionStore>;\n    target: any;\n    decorators: Decorator<GenericComponent | GenericHook>[];\n    scope: string;\n    inherit: boolean;\n}) {\n    const prevRef = useRef<{\n        decorators: Decorator<GenericComponent | GenericHook>[];\n        scope: string;\n    } | null>(null);\n\n    // Tracks the decorators currently live in the store as of the last render.\n    // Updated synchronously during render so it always reflects the most recently\n    // registered decorators, allowing the atomic swap below to remove the right ones.\n    const liveRef = useRef<Decorator<GenericComponent | GenericHook>[]>(decorators);\n\n    // On re-render with new decorators: atomically replace the old ones in the store\n    // during render (before React commits). This ensures the store never transiently\n    // holds both old and new HOCs — which would cause useSyncExternalStore subscribers\n    // to render with a doubly-wrapped component and mount inner components twice.\n    if (liveRef.current !== decorators) {\n        store.register(target, decorators, scope, inherit, true, liveRef.current);\n        liveRef.current = decorators;\n    }\n\n    useEffect(() => {\n        const prev = prevRef.current;\n\n        // On prop change: the render-phase atomic swap already updated the store.\n        // Emit a non-silent notification now that effects have settled so subscribers\n        // re-render with the final, clean composition (old HOCs fully gone).\n        if (prev && (prev.decorators !== decorators || prev.scope !== scope)) {\n            store.notify();\n        }\n\n        prevRef.current = { decorators, scope };\n\n        // Cleanup on unmount.\n        return () => {\n            store.unregister(target, decorators, scope);\n        };\n    }, [store, target, decorators, scope]);\n\n    return null;\n}\n"],"names":["Compose","props","store","useCompositionStore","scope","inherit","useCompositionScope","targetFn","console","decorators","Array","currentScope","ComposeEffects","target","prevRef","useRef","liveRef","useEffect","prev"],"mappings":";;;AAkBO,MAAMA,UAAU,CAACC;IACpB,MAAMC,QAAQC;IACd,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAE,GAAGC;IAE3B,MAAMC,WAAYN,MAAM,QAAQ,IAAIA,MAAM,SAAS;IAEnD,IAAI,CAACM,UAAU;QACXC,QAAQ,IAAI,CAAC,+DAA+DP;QAC5E,OAAO;IACX;IAEA,IAAI,AAA6B,WAAtBM,SAAS,QAAQ,EAAkB;QAC1CC,QAAQ,IAAI,CACR,CAAC,6BAA6B,EAC1BD,SAAS,YAAY,IAAIA,SAAS,IAAI,CACzC,sDAAsD,CAAC;QAE5D,OAAO;IACX;IAEA,MAAME,aAAcC,MAAM,OAAO,CAACT,MAAM,IAAI,IAAIA,MAAM,IAAI,GAAG;QAACA,MAAM,IAAI;KAAC;IAGzE,MAAMU,eAAeP,KAAK,CAACA,MAAM,MAAM,GAAG,EAAE,IAAI;IAKhDF,MAAM,QAAQ,CAACK,SAAS,QAAQ,EAAEE,YAAYE,cAAcN,SAAS;IAErE,OAAO,WAAP,GACI,oBAACO,gBAAcA;QACX,OAAOV;QACP,QAAQK,SAAS,QAAQ;QACzB,YAAYE;QACZ,OAAOE;QACP,SAASN;;AAGrB;AAMA,SAASO,eAAe,EACpBV,KAAK,EACLW,MAAM,EACNJ,UAAU,EACVL,KAAK,EACLC,OAAO,EAOV;IACG,MAAMS,UAAUC,OAGN;IAKV,MAAMC,UAAUD,OAAoDN;IAMpE,IAAIO,QAAQ,OAAO,KAAKP,YAAY;QAChCP,MAAM,QAAQ,CAACW,QAAQJ,YAAYL,OAAOC,SAAS,MAAMW,QAAQ,OAAO;QACxEA,QAAQ,OAAO,GAAGP;IACtB;IAEAQ,UAAU;QACN,MAAMC,OAAOJ,QAAQ,OAAO;QAK5B,IAAII,QAASA,CAAAA,KAAK,UAAU,KAAKT,cAAcS,KAAK,KAAK,KAAKd,KAAI,GAC9DF,MAAM,MAAM;QAGhBY,QAAQ,OAAO,GAAG;YAAEL;YAAYL;QAAM;QAGtC,OAAO;YACHF,MAAM,UAAU,CAACW,QAAQJ,YAAYL;QACzC;IACJ,GAAG;QAACF;QAAOW;QAAQJ;QAAYL;KAAM;IAErC,OAAO;AACX"}

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

package/CompositionScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositionScope.js","sources":["../src/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"],"names":["CompositionScopeContext","React","undefined","CompositionScope","name","inherit","children","parentScope","useCompositionScope","context"],"mappings":";AAOA,MAAMA,0BAA0B,WAAHA,GAAGC,MAAAA,aAAmB,CAAsCC;AAYlF,MAAMC,mBAAmB,CAAC,EAAEC,IAAI,EAAEC,UAAU,KAAK,EAAEC,QAAQ,EAAyB;IACvF,MAAMC,cAAcC;IAEpB,OAAO,WAAP,GACI,oBAACR,wBAAwB,QAAQ;QAAC,OAAO;YAAE,OAAO;mBAAIO,YAAY,KAAK;gBAAEH;aAAK;YAAEC;QAAQ;OACnFC;AAGb;AAEO,SAASE;IACZ,MAAMC,UAAUR,MAAAA,UAAgB,CAACD;IAEjC,IAAI,CAACS,SACD,OAAO;QAAE,OAAO,EAAE;QAAE,SAAS;IAAM;IAGvC,OAAOA;AACX"}

package/Context.d.ts

@@ -1,38 +1,35 @@
-import React, { FC, ComponentType } from "react";
-export declare function compose(...fns: HigherOrderComponent[]): (Base: FC<unknown>) => FC<unknown>;
-interface ComposedComponent {
-    /**
-     * Ready to use React component.
-     */
-    component: ComponentType<unknown>;
-    /**
-     * HOCs used to compose the original component.
-     */
-    hocs: HigherOrderComponent[];
-}
+import type { ComponentType } from "react";
+import React from "react";
+import { CompositionStore } from "./domain/CompositionStore.js";
+import type { ComposeWith, Decoratable, DecoratableComponent, DecoratableHook, Decorator, Enumerable, GenericComponent, GenericHook } from "./types.js";
+export declare function compose<T>(...fns: Decorator<T>[]): (decoratee: T) => T;
 /**
- * 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>;
+}
+export type DecoratableTypes = DecoratableComponent | DecoratableHook;
+export type DecoratorsTuple = [Decoratable, Decorator<any>[]];
+export type DecoratorsCollection = Array<DecoratorsTuple>;
+interface CompositionProviderProps {
+    decorators?: DecoratorsCollection;
+    children: React.ReactNode;
 }
-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 declare const CompositionProvider: ({ decorators, children }: CompositionProviderProps) => React.JSX.Element;
+export declare function useCompositionStore(): CompositionStore;
+export declare function useOptionalCompositionStore(): CompositionStore | undefined;
+export declare function useComponent<T>(baseFunction: T): T;
+interface CompositionContextValue {
+    composeComponent(component: ComponentType<unknown>, hocs: Enumerable<ComposeWith>, scope?: string, inherit?: boolean): () => void;
+    getComponent(component: ComponentType<unknown>, scope: string[]): GenericComponent | GenericHook | undefined;
 }
-declare const CompositionContext: React.Context<CompositionContext | undefined>;
-export declare const CompositionProvider: React.FC;
-export declare function useComponent(Component: ComponentType<any>): React.ComponentType<any>;
 /**
  * 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,108 +1,54 @@
-"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, useContext, useRef, useSyncExternalStore } from "react";
+import { useCompositionScope } from "./CompositionScope.js";
+import { CompositionStore } from "./domain/CompositionStore.js";
+function compose(...fns) {
+    return (decoratee)=>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];
-  var composeComponent = (0, _react.useCallback)(function (component, hocs) {
-    setComponents(function (prevComponents) {
-      var components = new Map(prevComponents);
-      var recipe = components.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) || {
-          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, {
-          component: NewComponent,
-          hocs: newHOCs
-        });
-        return components;
-      });
-    };
-  }, [setComponents]);
-  var getComponent = (0, _react.useCallback)(function (Component) {
-    var composedComponent = components.get(Component);
-    return composedComponent ? composedComponent.component : undefined;
-  }, [components]);
-  var context = (0, _react.useMemo)(function () {
-    return {
-      getComponent: getComponent,
-      composeComponent: composeComponent,
-      components: components
-    };
-  }, [components, composeComponent]);
-  return /*#__PURE__*/_react.default.createElement(CompositionContext.Provider, {
-    value: context
-  }, children);
+const CompositionStoreContext = /*#__PURE__*/ createContext(void 0);
+const CompositionProvider = ({ decorators = [], children })=>{
+    const storeRef = useRef(null);
+    if (null === storeRef.current) {
+        const store = new CompositionStore();
+        for (const [decoratable, hocs] of decorators)store.register(decoratable.original, hocs);
+        storeRef.current = store;
+    }
+    return /*#__PURE__*/ react.createElement(CompositionStoreContext.Provider, {
+        value: storeRef.current
+    }, children);
 };
-exports.CompositionProvider = CompositionProvider;
-function useComponent(Component) {
-  var context = useOptionalComposition();
-  if (!context) {
-    return Component;
-  }
-  return context.getComponent(Component) || Component;
+function useCompositionStore() {
+    const store = useContext(CompositionStoreContext);
+    if (!store) throw new Error("You're missing a <CompositionProvider> higher up in your component hierarchy!");
+    return store;
 }
-
-/**
- * This hook will throw an error if composition context doesn't exist.
- */
+function useOptionalCompositionStore() {
+    return useContext(CompositionStoreContext);
+}
+function useComponent(baseFunction) {
+    const store = useOptionalCompositionStore();
+    const scope = useCompositionScope();
+    useSyncExternalStore(store ? store.subscribe : noopSubscribe, store ? store.getSnapshot : noopGetSnapshot);
+    if (!store) return baseFunction;
+    const result = store.getComponent(baseFunction, scope.scope) || baseFunction;
+    return result;
+}
+const noopSubscribe = ()=>()=>{};
+const noopGetSnapshot = ()=>0;
 function useComposition() {
-  var context = (0, _react.useContext)(CompositionContext);
-  if (!context) {
-    throw new Error("You're missing a <CompositionProvider> higher up in your component hierarchy!");
-  }
-  return context;
+    const store = useCompositionStore();
+    return {
+        composeComponent: (component, hocs, scope = "*", inherit = false)=>store.register(component, hocs, scope, inherit),
+        getComponent: (component, scope)=>store.getComponent(component, scope)
+    };
 }
-
-/**
- * This hook will not throw an error if composition context doesn't exist.
- */
 function useOptionalComposition() {
-  return (0, _react.useContext)(CompositionContext);
-}
+    const store = useOptionalCompositionStore();
+    if (!store) return;
+    return {
+        composeComponent: (component, hocs, scope = "*", inherit = false)=>store.register(component, hocs, scope, inherit),
+        getComponent: (component, scope)=>store.getComponent(component, scope)
+    };
+}
+export { CompositionProvider, compose, useComponent, useComposition, useCompositionStore, useOptionalComposition, useOptionalCompositionStore };
+
+//# 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":"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"}
+{"version":3,"file":"Context.js","sources":["../src/Context.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport React, { createContext, useContext, useRef, useSyncExternalStore } from \"react\";\nimport { useCompositionScope } from \"~/CompositionScope.js\";\nimport { CompositionStore } from \"~/domain/CompositionStore.js\";\n\nimport type {\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\n/**\n * @deprecated Use `Decorator` instead.\n */\nexport interface HigherOrderComponent<TProps = any, TOutput = TProps> {\n    (Component: GenericComponent<TProps>): GenericComponent<TOutput>;\n}\n\nexport type DecoratableTypes = DecoratableComponent | DecoratableHook;\n\nconst CompositionStoreContext = createContext<CompositionStore | 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\nexport const CompositionProvider = ({ decorators = [], children }: CompositionProviderProps) => {\n    const storeRef = useRef<CompositionStore | null>(null);\n    if (storeRef.current === null) {\n        const store = new CompositionStore();\n        // Pre-register decorators from props.\n        for (const [decoratable, hocs] of decorators) {\n            store.register(decoratable.original as ComponentType<unknown>, hocs);\n        }\n        storeRef.current = store;\n    }\n\n    return (\n        <CompositionStoreContext.Provider value={storeRef.current}>\n            {children}\n        </CompositionStoreContext.Provider>\n    );\n};\n\nexport function useCompositionStore(): CompositionStore {\n    const store = useContext(CompositionStoreContext);\n    if (!store) {\n        throw new Error(\n            `You're missing a <CompositionProvider> higher up in your component hierarchy!`\n        );\n    }\n    return store;\n}\n\nexport function useOptionalCompositionStore(): CompositionStore | undefined {\n    return useContext(CompositionStoreContext);\n}\n\nexport function useComponent<T>(baseFunction: T) {\n    const store = useOptionalCompositionStore();\n    const scope = useCompositionScope();\n\n    // Subscribe to store changes so we re-render when compositions change.\n    useSyncExternalStore(\n        store ? store.subscribe : noopSubscribe,\n        store ? store.getSnapshot : noopGetSnapshot\n    );\n\n    if (!store) {\n        return baseFunction;\n    }\n\n    const result = store.getComponent(baseFunction as any, scope.scope) || baseFunction;\n\n    return result as T;\n}\n\nconst noopSubscribe = () => () => {};\nconst noopGetSnapshot = () => 0;\n\n// Legacy compatibility — kept for any external consumers.\n\ninterface CompositionContextValue {\n    composeComponent(\n        component: ComponentType<unknown>,\n        hocs: Enumerable<ComposeWith>,\n        scope?: string,\n        inherit?: boolean\n    ): () => void;\n    getComponent(\n        component: ComponentType<unknown>,\n        scope: string[]\n    ): GenericComponent | GenericHook | undefined;\n}\n\n/**\n * This hook will throw an error if composition context doesn't exist.\n */\nexport function useComposition(): CompositionContextValue {\n    const store = useCompositionStore();\n\n    return {\n        composeComponent: (component, hocs, scope = \"*\", inherit = false) => {\n            return store.register(component, hocs as any[], scope, inherit);\n        },\n        getComponent: (component, scope) => {\n            return store.getComponent(component, scope);\n        }\n    };\n}\n\n/**\n * This hook will not throw an error if composition context doesn't exist.\n */\nexport function useOptionalComposition(): CompositionContextValue | undefined {\n    const store = useOptionalCompositionStore();\n    if (!store) {\n        return undefined;\n    }\n\n    return {\n        composeComponent: (component, hocs, scope = \"*\", inherit = false) => {\n            return store.register(component, hocs as any[], scope, inherit);\n        },\n        getComponent: (component, scope) => {\n            return store.getComponent(component, scope);\n        }\n    };\n}\n"],"names":["compose","fns","decoratee","decorator","CompositionStoreContext","createContext","undefined","CompositionProvider","decorators","children","storeRef","useRef","store","CompositionStore","decoratable","hocs","useCompositionStore","useContext","Error","useOptionalCompositionStore","useComponent","baseFunction","scope","useCompositionScope","useSyncExternalStore","noopSubscribe","noopGetSnapshot","result","useComposition","component","inherit","useOptionalComposition"],"mappings":";;;AAgBO,SAASA,QAAW,GAAGC,GAAmB;IAC7C,OAAO,CAACC,YACGD,IAAI,WAAW,CAAC,CAACC,WAAWC,YAAcA,UAAUD,YAAYA;AAE/E;AAWA,MAAME,0BAA0B,WAAHA,GAAGC,cAA4CC;AAUrE,MAAMC,sBAAsB,CAAC,EAAEC,aAAa,EAAE,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWC,OAAgC;IACjD,IAAID,AAAqB,SAArBA,SAAS,OAAO,EAAW;QAC3B,MAAME,QAAQ,IAAIC;QAElB,KAAK,MAAM,CAACC,aAAaC,KAAK,IAAIP,WAC9BI,MAAM,QAAQ,CAACE,YAAY,QAAQ,EAA4BC;QAEnEL,SAAS,OAAO,GAAGE;IACvB;IAEA,OAAO,WAAP,GACI,oBAACR,wBAAwB,QAAQ;QAAC,OAAOM,SAAS,OAAO;OACpDD;AAGb;AAEO,SAASO;IACZ,MAAMJ,QAAQK,WAAWb;IACzB,IAAI,CAACQ,OACD,MAAM,IAAIM,MACN;IAGR,OAAON;AACX;AAEO,SAASO;IACZ,OAAOF,WAAWb;AACtB;AAEO,SAASgB,aAAgBC,YAAe;IAC3C,MAAMT,QAAQO;IACd,MAAMG,QAAQC;IAGdC,qBACIZ,QAAQA,MAAM,SAAS,GAAGa,eAC1Bb,QAAQA,MAAM,WAAW,GAAGc;IAGhC,IAAI,CAACd,OACD,OAAOS;IAGX,MAAMM,SAASf,MAAM,YAAY,CAACS,cAAqBC,MAAM,KAAK,KAAKD;IAEvE,OAAOM;AACX;AAEA,MAAMF,gBAAgB,IAAM,KAAO;AACnC,MAAMC,kBAAkB,IAAM;AAoBvB,SAASE;IACZ,MAAMhB,QAAQI;IAEd,OAAO;QACH,kBAAkB,CAACa,WAAWd,MAAMO,QAAQ,GAAG,EAAEQ,UAAU,KAAK,GACrDlB,MAAM,QAAQ,CAACiB,WAAWd,MAAeO,OAAOQ;QAE3D,cAAc,CAACD,WAAWP,QACfV,MAAM,YAAY,CAACiB,WAAWP;IAE7C;AACJ;AAKO,SAASS;IACZ,MAAMnB,QAAQO;IACd,IAAI,CAACP,OACD;IAGJ,OAAO;QACH,kBAAkB,CAACiB,WAAWd,MAAMO,QAAQ,GAAG,EAAEQ,UAAU,KAAK,GACrDlB,MAAM,QAAQ,CAACiB,WAAWd,MAAeO,OAAOQ;QAE3D,cAAc,CAACD,WAAWP,QACfV,MAAM,YAAY,CAACiB,WAAWP;IAE7C;AACJ"}

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

package/createDecorator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDecorator.js","sources":["../src/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"],"names":["createComponentPlugin","Base","hoc","createDecorator","isDecoratableComponent","decoratable","DecoratorPlugin","Compose"],"mappings":";;AAiBO,SAASA,sBACZC,IAAO,EACPC,GAEmC;IAEnC,OAAOC,gBAAgBF,MAAMC;AACjC;AAaA,MAAME,yBAAyB,CAC3BC,cAEO,iBAAiBA;AAGrB,SAASF,gBACZF,IAAO,EACPC,GAEmC;IAEnC,MAAMI,kBAAkB,kBAAM,oBAACC,SAAOA;YAAC,WAAWN;YAAM,MAAMC;;IAC9D,IAAIE,uBAAuBH,OACvBK,gBAAgB,WAAW,GAAGL,KAAK,WAAW;IAElD,OAAOK;AACX"}

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,63 @@
+import react from "react";
+import { Compose } from "./Compose.js";
+function createConditionalDecorator(shouldDecorate, decorator, decoratorProps) {
+    return (Original)=>{
+        const DecoratedComponent = /*#__PURE__*/ react.memo(decorator(Original));
+        DecoratedComponent.displayName = Original.displayName;
+        return function(props) {
+            if (shouldDecorate(decoratorProps, props)) return /*#__PURE__*/ react.createElement(DecoratedComponent, props);
+            return /*#__PURE__*/ react.createElement(Original, props);
+        };
+    };
+}
+const memoizedComponent = (decorator)=>(decoratee)=>/*#__PURE__*/ react.memo(decorator(decoratee));
+function createDecoratorFactory() {
+    return function(decoratable, shouldDecorate) {
+        return function(decorator) {
+            return function(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)
+                });
+            };
+        };
+    };
+}
+function createHookDecoratorFactory() {
+    return function(decoratable) {
+        return function(decorator) {
+            return function() {
+                return /*#__PURE__*/ react.createElement(Compose, {
+                    function: decoratable,
+                    with: decorator
+                });
+            };
+        };
+    };
+}
+function withDecoratorFactory() {
+    return function(Component, shouldDecorate) {
+        const createDecorator = createDecoratorFactory()(Component, shouldDecorate);
+        return Object.assign(Component, {
+            createDecorator
+        });
+    };
+}
+function withHookDecoratorFactory() {
+    return function(hook) {
+        const createDecorator = createHookDecoratorFactory()(hook);
+        return Object.assign(hook, {
+            createDecorator
+        });
+    };
+}
+export { createConditionalDecorator, createDecoratorFactory, createHookDecoratorFactory, withDecoratorFactory, withHookDecoratorFactory };
+
+//# sourceMappingURL=decorators.js.map

package/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sources":["../src/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"],"names":["createConditionalDecorator","shouldDecorate","decorator","decoratorProps","Original","DecoratedComponent","React","props","memoizedComponent","decoratee","createDecoratorFactory","decoratable","componentDecorator","Compose","createHookDecoratorFactory","withDecoratorFactory","Component","createDecorator","Object","withHookDecoratorFactory","hook"],"mappings":";;AAgBO,SAASA,2BACZC,cAA8B,EAC9BC,SAAgC,EAChCC,cAAuB;IAEvB,OAAQC,CAAAA;QACJ,MAAMC,qBAAqB,WAArBA,GAAqBC,MAAAA,IAAU,CAACJ,UAAUE;QAChDC,mBAAmB,WAAW,GAAGD,SAAS,WAAW;QAErD,OAAO,SAAwBG,KAAc;YACzC,IAAIN,eAAeE,gBAAgBI,QAE/B,OAAO,WAAP,GAAO,oBAACF,oBAAuBE;YAInC,OAAO,WAAP,GAAO,oBAACH,UAAaG;QACzB;IACJ;AACJ;AAEA,MAAMC,oBAAoB,CAA6BN,YAC5C,CAACO,YACG,WAAP,GAAOH,MAAAA,IAAU,CAACJ,UAAUO;AAI7B,SAASC;IACZ,OAAO,SACHC,WAAyB,EACzBV,cAA2F;QAE3F,OAAO,SAAyBC,SAAyD;YACrF,OAAO,SAAyBK,KAAiB;gBAC7C,IAAIN,gBAAgB;oBAChB,MAAMW,qBAAqBZ,2BACvBC,gBACAC,WACAK;oBAGJ,OAAO,WAAP,GAAO,oBAACM,SAAOA;wBAAC,UAAUF;wBAAa,MAAMC;;gBACjD;gBAEA,OAAO,WAAP,GACI,oBAACC,SAAOA;oBACJ,UAAUF;oBACV,MAAMH,kBACFN;;YAIhB;QACJ;IACJ;AACJ;AAEO,SAASY;IACZ,OAAO,SAAoDH,WAAyB;QAChF,OAAO,SAAyBT,SAAgD;YAC5E,OAAO;gBACH,OAAO,WAAP,GACI,oBAACW,SAAOA;oBACJ,UAAUF;oBACV,MAAMT;;YAGlB;QACJ;IACJ;AACJ;AAEO,SAASa;IACZ,OAAO,SACHC,SAAuB,EACvBf,cAA2F;QAE3F,MAAMgB,kBAAkBP,yBAAqCM,WAAWf;QAExE,OAAOiB,OAAO,MAAM,CAACF,WAAW;YAAEC;QAAgB;IAGtD;AACJ;AAEO,SAASE;IACZ,OAAO,SAAiEC,IAAkB;QACtF,MAAMH,kBAAkBH,6BAA6BM;QAErD,OAAOF,OAAO,MAAM,CAACE,MAAM;YAAEH;QAAgB;IAMjD;AACJ"}