@webiny/react-composition 0.0.0-unstable.d7f521b032 → 0.0.0-unstable.dbdf5d6258

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,28 +1,68 @@
-"use strict";
+import React, { useEffect, useRef } from "react";
+import { useCompositionStore } from "./Context.js";
+import { useCompositionScope } from "./CompositionScope.js";
+export 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 (typeof targetFn.original === "undefined") {
+    console.warn(`You must make your function "${targetFn.originalName ?? targetFn.name}" composable, by using the makeDecoratable() function!`);
+    return null;
+  }
+  const decorators = Array.isArray(props.with) ? props.with : [props.with];
+  const currentScope = scope[scope.length - 1] ?? "*";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Compose = void 0;
-
-var _react = require("react");
-
-var _Context = require("./Context");
+  // Register synchronously during render so decorators are available immediately.
+  // Pass silent=true to avoid notifying listeners mid-render (which would trigger
+  // setState in other components and cause React warnings).
+  store.register(targetFn.original, decorators, currentScope, inherit, true);
+  return /*#__PURE__*/React.createElement(ComposeEffects, {
+    store: store,
+    target: targetFn.original,
+    decorators: decorators,
+    scope: currentScope
+  });
+};
 
-var Compose = function Compose(props) {
-  var _useComposition = (0, _Context.useComposition)(),
-      composeComponent = _useComposition.composeComponent;
+/**
+ * Separate component for the effect to avoid re-running the cleanup on every render.
+ * This component handles cleanup on unmount and when props change.
+ */
+function ComposeEffects({
+  store,
+  target,
+  decorators,
+  scope
+}) {
+  const prevRef = useRef(null);
+  useEffect(() => {
+    const prev = prevRef.current;
 
-  (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;
+    // On prop change: unregister old decorators.
+    if (prev && (prev.decorators !== decorators || prev.scope !== scope)) {
+      store.unregister(target, prev.decorators, prev.scope);
+      // Re-register new ones (they were already registered during render,
+      // but the idempotency check handles this).
+      store.register(target, decorators, scope);
     }
+    prevRef.current = {
+      decorators,
+      scope
+    };
 
-    var hocs = Array.isArray(props.with) ? props.with : [props.with];
-    return composeComponent(props.component.original, hocs);
-  }, [props.with]);
+    // Cleanup on unmount.
+    return () => {
+      store.unregister(target, decorators, scope);
+    };
+  }, [store, target, decorators, scope]);
   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":["React","useEffect","useRef","useCompositionStore","useCompositionScope","Compose","props","store","scope","inherit","targetFn","function","component","console","warn","original","originalName","name","decorators","Array","isArray","with","currentScope","length","register","createElement","ComposeEffects","target","prevRef","prev","current","unregister"],"sources":["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        />\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}: {\n    store: ReturnType<typeof useCompositionStore>;\n    target: any;\n    decorators: Decorator<GenericComponent | GenericHook>[];\n    scope: string;\n}) {\n    const prevRef = useRef<{\n        decorators: Decorator<GenericComponent | GenericHook>[];\n        scope: string;\n    } | null>(null);\n\n    useEffect(() => {\n        const prev = prevRef.current;\n\n        // On prop change: unregister old decorators.\n        if (prev && (prev.decorators !== decorators || prev.scope !== scope)) {\n            store.unregister(target, prev.decorators, prev.scope);\n            // Re-register new ones (they were already registered during render,\n            // but the idempotency check handles this).\n            store.register(target, decorators, scope);\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"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEhD,SAASC,mBAAmB;AAC5B,SAASC,mBAAmB;AAe5B,OAAO,MAAMC,OAAO,GAAIC,KAAmB,IAAK;EAC5C,MAAMC,KAAK,GAAGJ,mBAAmB,CAAC,CAAC;EACnC,MAAM;IAAEK,KAAK;IAAEC;EAAQ,CAAC,GAAGL,mBAAmB,CAAC,CAAC;EAEhD,MAAMM,QAAQ,GAAIJ,KAAK,CAACK,QAAQ,IAAIL,KAAK,CAACM,SAAyB;EAEnE,IAAI,CAACF,QAAQ,EAAE;IACXG,OAAO,CAACC,IAAI,CAAC,6DAA6D,EAAER,KAAK,CAAC;IAClF,OAAO,IAAI;EACf;EAEA,IAAI,OAAOI,QAAQ,CAACK,QAAQ,KAAK,WAAW,EAAE;IAC1CF,OAAO,CAACC,IAAI,CACR,gCACIJ,QAAQ,CAACM,YAAY,IAAIN,QAAQ,CAACO,IAAI,wDAE9C,CAAC;IACD,OAAO,IAAI;EACf;EAEA,MAAMC,UAAU,GAAIC,KAAK,CAACC,OAAO,CAACd,KAAK,CAACe,IAAI,CAAC,GAAGf,KAAK,CAACe,IAAI,GAAG,CAACf,KAAK,CAACe,IAAI,CAErE;EACH,MAAMC,YAAY,GAAGd,KAAK,CAACA,KAAK,CAACe,MAAM,GAAG,CAAC,CAAC,IAAI,GAAG;;EAEnD;EACA;EACA;EACAhB,KAAK,CAACiB,QAAQ,CAACd,QAAQ,CAACK,QAAQ,EAAEG,UAAU,EAAEI,YAAY,EAAEb,OAAO,EAAE,IAAI,CAAC;EAE1E,oBACIT,KAAA,CAAAyB,aAAA,CAACC,cAAc;IACXnB,KAAK,EAAEA,KAAM;IACboB,MAAM,EAAEjB,QAAQ,CAACK,QAAS;IAC1BG,UAAU,EAAEA,UAAW;IACvBV,KAAK,EAAEc;EAAa,CACvB,CAAC;AAEV,CAAC;;AAED;AACA;AACA;AACA;AACA,SAASI,cAAcA,CAAC;EACpBnB,KAAK;EACLoB,MAAM;EACNT,UAAU;EACVV;AAMJ,CAAC,EAAE;EACC,MAAMoB,OAAO,GAAG1B,MAAM,CAGZ,IAAI,CAAC;EAEfD,SAAS,CAAC,MAAM;IACZ,MAAM4B,IAAI,GAAGD,OAAO,CAACE,OAAO;;IAE5B;IACA,IAAID,IAAI,KAAKA,IAAI,CAACX,UAAU,KAAKA,UAAU,IAAIW,IAAI,CAACrB,KAAK,KAAKA,KAAK,CAAC,EAAE;MAClED,KAAK,CAACwB,UAAU,CAACJ,MAAM,EAAEE,IAAI,CAACX,UAAU,EAAEW,IAAI,CAACrB,KAAK,CAAC;MACrD;MACA;MACAD,KAAK,CAACiB,QAAQ,CAACG,MAAM,EAAET,UAAU,EAAEV,KAAK,CAAC;IAC7C;IAEAoB,OAAO,CAACE,OAAO,GAAG;MAAEZ,UAAU;MAAEV;IAAM,CAAC;;IAEvC;IACA,OAAO,MAAM;MACTD,KAAK,CAACwB,UAAU,CAACJ,MAAM,EAAET,UAAU,EAAEV,KAAK,CAAC;IAC/C,CAAC;EACL,CAAC,EAAE,CAACD,KAAK,EAAEoB,MAAM,EAAET,UAAU,EAAEV,KAAK,CAAC,CAAC;EAEtC,OAAO,IAAI;AACf","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,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,126 +1,91 @@
-"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";
+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];
-
-  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.
+/**
+ * @deprecated Use `Decorator` instead.
+ */
 
-    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
+const CompositionStoreContext = /*#__PURE__*/createContext(undefined);
+export const CompositionProvider = ({
+  decorators = [],
+  children
+}) => {
+  const storeRef = useRef(null);
+  if (storeRef.current === null) {
+    const store = new CompositionStore();
+    // Pre-register decorators from props.
+    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;
+export function useCompositionStore() {
+  const store = useContext(CompositionStoreContext);
+  if (!store) {
+    throw new Error(`You're missing a <CompositionProvider> higher up in your component hierarchy!`);
   }
-
-  return context.getComponent(Component) || Component;
+  return store;
+}
+export function useOptionalCompositionStore() {
+  return useContext(CompositionStoreContext);
 }
+export function useComponent(baseFunction) {
+  const store = useOptionalCompositionStore();
+  const scope = useCompositionScope();
+
+  // Subscribe to store changes so we re-render when compositions change.
+  useSyncExternalStore(store ? store.subscribe : noopSubscribe, store ? store.getSnapshot : noopGetSnapshot);
+  if (!store) {
+    return baseFunction;
+  }
+  return store.getComponent(baseFunction, scope.scope) || baseFunction;
+}
+const noopSubscribe = () => () => {};
+const noopGetSnapshot = () => 0;
+
+// Legacy compatibility — kept for any external consumers.
+
 /**
  * This hook will throw an error if composition context doesn't exist.
  */
-
-
-function useComposition() {
-  var context = (0, _react.useContext)(CompositionContext);
-
-  if (!context) {
-    throw new Error("You're missing a <CompositionProvider> higher up in your component hierarchy!");
-  }
-
-  return context;
+export function useComposition() {
+  const store = useCompositionStore();
+  return {
+    composeComponent: (component, hocs, scope = "*", inherit = false) => {
+      return store.register(component, hocs, scope, inherit);
+    },
+    getComponent: (component, scope) => {
+      return store.getComponent(component, scope);
+    }
+  };
 }
+
 /**
  * This hook will not throw an error if composition context doesn't exist.
  */
+export function useOptionalComposition() {
+  const store = useOptionalCompositionStore();
+  if (!store) {
+    return undefined;
+  }
+  return {
+    composeComponent: (component, hocs, scope = "*", inherit = false) => {
+      return store.register(component, hocs, scope, inherit);
+    },
+    getComponent: (component, scope) => {
+      return store.getComponent(component, scope);
+    }
+  };
+}
 
-
-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":"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"}
+{"version":3,"names":["React","createContext","useContext","useRef","useSyncExternalStore","useCompositionScope","CompositionStore","compose","fns","decoratee","reduceRight","decorator","CompositionStoreContext","undefined","CompositionProvider","decorators","children","storeRef","current","store","decoratable","hocs","register","original","createElement","Provider","value","useCompositionStore","Error","useOptionalCompositionStore","useComponent","baseFunction","scope","subscribe","noopSubscribe","getSnapshot","noopGetSnapshot","getComponent","useComposition","composeComponent","component","inherit","useOptionalComposition"],"sources":["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\";\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    return (store.getComponent(baseFunction as any, scope.scope) || baseFunction) 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"],"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;
+};