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

package/domain/CompositionStore.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+import type { Decorator, GenericComponent, GenericHook } from "../types.js";
+type Listener = () => void;
+export declare class CompositionStore {
+    private scopes;
+    private version;
+    private listeners;
+    register(component: ComponentType<unknown>, hocs: Decorator<GenericComponent | GenericHook>[], scope?: string, inherit?: boolean, silent?: boolean, replaces?: Decorator<GenericComponent | GenericHook>[]): () => void;
+    unregister(component: ComponentType<unknown>, hocs: Decorator<GenericComponent | GenericHook>[], scope?: string): void;
+    getComponent(component: ComponentType<unknown>, scope?: string[]): GenericComponent | GenericHook | undefined;
+    /**
+     * Bump version and notify listeners without changing store state.
+     * Used after a render-phase atomic swap (silent) to inform subscribers
+     * that the swap has settled and they should re-render with the final state.
+     */
+    notify(): void;
+    subscribe: (listener: Listener) => (() => void);
+    getSnapshot: () => number;
+    private notifyListeners;
+}
+export {};

package/domain/CompositionStore.js

@@ -0,0 +1,89 @@
+import { compose } from "../Context.js";
+class CompositionStore {
+    register(component, hocs, scope = "*", inherit = false, silent = false, replaces = []) {
+        const scopeMap = this.scopes.get(scope) || new Map();
+        const recipe = scopeMap.get(component) || {
+            component: component,
+            hocs: []
+        };
+        const newHocs = hocs.filter((hoc)=>!recipe.hocs.includes(hoc));
+        if (0 === newHocs.length && 0 === replaces.length) return ()=>this.unregister(component, hocs, scope);
+        const existingHocs = replaces.length ? recipe.hocs.filter((hoc)=>!replaces.includes(hoc)) : [
+            ...recipe.hocs
+        ];
+        if (inherit && "*" !== scope) {
+            const globalScope = this.scopes.get("*") || new Map();
+            const globalRecipe = globalScope.get(component) || {
+                component: component,
+                hocs: []
+            };
+            const globalHocsToAdd = globalRecipe.hocs.filter((hoc)=>!existingHocs.includes(hoc));
+            existingHocs.unshift(...globalHocsToAdd);
+        }
+        const finalHocs = [
+            ...existingHocs,
+            ...newHocs
+        ];
+        scopeMap.set(component, {
+            component: compose(...[
+                ...finalHocs
+            ].reverse())(component),
+            hocs: finalHocs
+        });
+        this.scopes.set(scope, scopeMap);
+        this.version++;
+        if (!silent) this.notifyListeners();
+        return ()=>this.unregister(component, hocs, scope);
+    }
+    unregister(component, hocs, scope = "*") {
+        const scopeMap = this.scopes.get(scope);
+        if (!scopeMap) return;
+        const recipe = scopeMap.get(component);
+        if (!recipe) return;
+        const newHocs = recipe.hocs.filter((hoc)=>!hocs.includes(hoc));
+        if (newHocs.length === recipe.hocs.length) return;
+        if (0 === newHocs.length) scopeMap.delete(component);
+        else scopeMap.set(component, {
+            component: compose(...[
+                ...newHocs
+            ].reverse())(component),
+            hocs: newHocs
+        });
+        this.version++;
+        this.notifyListeners();
+    }
+    getComponent(component, scope = []) {
+        const scopesToResolve = [
+            "*",
+            ...scope
+        ].reverse();
+        for (const s of scopesToResolve){
+            const scopeMap = this.scopes.get(s);
+            if (!scopeMap) continue;
+            const composed = scopeMap.get(component);
+            if (composed) return composed.component;
+        }
+    }
+    notify() {
+        this.version++;
+        this.notifyListeners();
+    }
+    notifyListeners() {
+        for (const listener of this.listeners)listener();
+    }
+    constructor(){
+        this.scopes = new Map();
+        this.version = 0;
+        this.listeners = new Set();
+        this.subscribe = (listener)=>{
+            this.listeners.add(listener);
+            return ()=>{
+                this.listeners.delete(listener);
+            };
+        };
+        this.getSnapshot = ()=>this.version;
+    }
+}
+export { CompositionStore };
+
+//# sourceMappingURL=CompositionStore.js.map

package/domain/CompositionStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"domain/CompositionStore.js","sources":["../../src/domain/CompositionStore.ts"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { compose } from \"~/Context.js\";\nimport type { Decorator, GenericComponent, GenericHook } from \"~/types.js\";\n\ninterface ComposedComponent {\n    component: GenericHook | GenericComponent;\n    hocs: Decorator<GenericComponent | GenericHook>[];\n}\n\ntype ComposedComponents = Map<ComponentType<unknown>, ComposedComponent>;\ntype ComponentScopes = Map<string, ComposedComponents>;\n\ntype Listener = () => void;\n\nexport class CompositionStore {\n    private scopes: ComponentScopes = new Map();\n    private version = 0;\n    private listeners = new Set<Listener>();\n\n    register(\n        component: ComponentType<unknown>,\n        hocs: Decorator<GenericComponent | GenericHook>[],\n        scope = \"*\",\n        inherit = false,\n        silent = false,\n        replaces: Decorator<GenericComponent | GenericHook>[] = []\n    ): () => void {\n        const scopeMap: ComposedComponents = this.scopes.get(scope) || new Map();\n        const recipe = scopeMap.get(component) || {\n            component: component as any,\n            hocs: [] as Decorator<GenericComponent | GenericHook>[]\n        };\n\n        // Idempotent: skip if all HOCs are already registered (handles StrictMode double-render).\n        const newHocs = hocs.filter(hoc => !recipe.hocs.includes(hoc));\n        if (newHocs.length === 0 && replaces.length === 0) {\n            return () => this.unregister(component, hocs, scope);\n        }\n\n        // Atomically remove the HOCs being replaced so the store never transiently\n        // holds both the old and new decorators at the same time. This prevents\n        // useSyncExternalStore subscribers from seeing a doubly-wrapped component\n        // in the window between a render-phase registration and its effect cleanup.\n        const existingHocs = replaces.length\n            ? recipe.hocs.filter(hoc => !replaces.includes(hoc))\n            : [...recipe.hocs];\n        if (inherit && scope !== \"*\") {\n            const globalScope = this.scopes.get(\"*\") || new Map();\n            const globalRecipe = globalScope.get(component) || {\n                component: component as any,\n                hocs: [] as Decorator<GenericComponent | GenericHook>[]\n            };\n            // Only prepend global HOCs that aren't already present.\n            const globalHocsToAdd = globalRecipe.hocs.filter(\n                (hoc: Decorator<GenericComponent | GenericHook>) => !existingHocs.includes(hoc)\n            );\n            existingHocs.unshift(...globalHocsToAdd);\n        }\n\n        const finalHocs = [...existingHocs, ...newHocs];\n\n        scopeMap.set(component, {\n            component: compose(...[...finalHocs].reverse())(component as any),\n            hocs: finalHocs\n        });\n\n        this.scopes.set(scope, scopeMap);\n\n        // Bump the version so useSyncExternalStore sees a new snapshot.\n        this.version++;\n\n        // When called during render (silent=true), don't notify listeners —\n        // that would trigger setState in other components mid-render.\n        // Components that render after this point will see the updated snapshot.\n        if (!silent) {\n            this.notifyListeners();\n        }\n\n        return () => this.unregister(component, hocs, scope);\n    }\n\n    unregister(\n        component: ComponentType<unknown>,\n        hocs: Decorator<GenericComponent | GenericHook>[],\n        scope = \"*\"\n    ): void {\n        const scopeMap = this.scopes.get(scope);\n        if (!scopeMap) {\n            return;\n        }\n\n        const recipe = scopeMap.get(component);\n        if (!recipe) {\n            return;\n        }\n\n        const newHocs = recipe.hocs.filter(hoc => !hocs.includes(hoc));\n        if (newHocs.length === recipe.hocs.length) {\n            // Nothing was removed.\n            return;\n        }\n\n        if (newHocs.length === 0) {\n            scopeMap.delete(component);\n        } else {\n            scopeMap.set(component, {\n                component: compose(...[...newHocs].reverse())(component as any),\n                hocs: newHocs\n            });\n        }\n\n        this.version++;\n        this.notifyListeners();\n    }\n\n    getComponent(\n        component: ComponentType<unknown>,\n        scope: string[] = []\n    ): GenericComponent | GenericHook | undefined {\n        const scopesToResolve = [\"*\", ...scope].reverse();\n        for (const s of scopesToResolve) {\n            const scopeMap = this.scopes.get(s);\n            if (!scopeMap) {\n                continue;\n            }\n            const composed = scopeMap.get(component);\n            if (composed) {\n                return composed.component;\n            }\n        }\n        return undefined;\n    }\n\n    /**\n     * Bump version and notify listeners without changing store state.\n     * Used after a render-phase atomic swap (silent) to inform subscribers\n     * that the swap has settled and they should re-render with the final state.\n     */\n    notify(): void {\n        this.version++;\n        this.notifyListeners();\n    }\n\n    subscribe = (listener: Listener): (() => void) => {\n        this.listeners.add(listener);\n        return () => {\n            this.listeners.delete(listener);\n        };\n    };\n\n    getSnapshot = (): number => {\n        return this.version;\n    };\n\n    private notifyListeners(): void {\n        for (const listener of this.listeners) {\n            listener();\n        }\n    }\n}\n"],"names":["CompositionStore","component","hocs","scope","inherit","silent","replaces","scopeMap","Map","recipe","newHocs","hoc","existingHocs","globalScope","globalRecipe","globalHocsToAdd","finalHocs","compose","scopesToResolve","s","composed","listener","Set"],"mappings":"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"}

package/index.d.ts

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

package/index.js

@@ -1,49 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Context = require("./Context");
-Object.keys(_Context).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Context[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Context[key];
-    }
-  });
-});
-var _Compose = require("./Compose");
-Object.keys(_Compose).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Compose[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Compose[key];
-    }
-  });
-});
-var _makeComposable = require("./makeComposable");
-Object.keys(_makeComposable).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _makeComposable[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _makeComposable[key];
-    }
-  });
-});
-var _createComponentPlugin = require("./createComponentPlugin");
-Object.keys(_createComponentPlugin).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _createComponentPlugin[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _createComponentPlugin[key];
-    }
-  });
-});
+export * from "./Context.js";
+export * from "./Compose.js";
+export * from "./makeComposable.js";
+export * from "./makeDecoratable.js";
+export * from "./createDecorator.js";
+export * from "./decorators.js";
+export * from "./CompositionScope.js";
+export { CompositionStore } from "./domain/CompositionStore.js";

package/makeComposable.d.ts

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

package/makeComposable.js

@@ -1,57 +1,11 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.makeComposable = makeComposable;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _lodash = _interopRequireDefault(require("lodash.debounce"));
-var _Context = require("./Context");
-var ComposableContext = /*#__PURE__*/(0, _react.createContext)([]);
+import { createContext } from "react";
+import { makeDecoratable } from "./makeDecoratable.js";
+const ComposableContext = /*#__PURE__*/ createContext([]);
 ComposableContext.displayName = "ComposableContext";
-function useComposableParents() {
-  var context = (0, _react.useContext)(ComposableContext);
-  if (!context) {
-    return [];
-  }
-  return context;
-}
-var createEmptyRenderer = function createEmptyRenderer(name) {
-  return (0, _defineProperty2.default)({}, name, function () {
-    (0, _react.useEffect)(function () {
-      // We need to debounce the log, as it sometimes only requires a single tick to get the new
-      // composed component to render, and we don't want to scare developers for no reason.
-      var debounced = (0, _lodash.default)(function () {
-        console.info("<".concat(name, "/> is not implemented! To provide an implementation, use the <Compose/> component."));
-      }, 100);
-      return function () {
-        debounced.cancel();
-      };
-    }, []);
-    return null;
-  })[name];
-};
+const nullRenderer = ()=>null;
 function makeComposable(name, Component) {
-  if (!Component) {
-    Component = createEmptyRenderer(name);
-  }
-  var Composable = function Composable(props) {
-    var parents = useComposableParents();
-    var ComposedComponent = (0, _Context.useComponent)(Component);
-    var context = (0, _react.useMemo)(function () {
-      return [].concat((0, _toConsumableArray2.default)(parents), [name]);
-    }, [parents, name]);
-    return /*#__PURE__*/_react.default.createElement(ComposableContext.Provider, {
-      value: context
-    }, /*#__PURE__*/_react.default.createElement(ComposedComponent, props, props.children));
-  };
-  Component.displayName = name;
-  Composable.original = Component;
-  Composable.originalName = name;
-  Composable.displayName = "Composable<".concat(name, ">");
-  return Composable;
-}
+    return makeDecoratable(name, Component ?? nullRenderer);
+}
+export { makeComposable };
+
+//# sourceMappingURL=makeComposable.js.map

package/makeComposable.js.map

@@ -1 +1 @@
-{"version":3,"names":["ComposableContext","createContext","displayName","useComposableParents","context","useContext","createEmptyRenderer","name","useEffect","debounced","debounce","console","info","cancel","makeComposable","Component","Composable","props","parents","ComposedComponent","useComponent","useMemo","children","original","originalName"],"sources":["makeComposable.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from \"react\";\nimport debounce from \"lodash.debounce\";\nimport { ComposableFC } from \"./Compose\";\nimport { useComponent } from \"./Context\";\n\nconst ComposableContext = createContext<string[]>([]);\nComposableContext.displayName = \"ComposableContext\";\n\nfunction useComposableParents() {\n    const context = useContext(ComposableContext);\n    if (!context) {\n        return [];\n    }\n\n    return context;\n}\n\nconst createEmptyRenderer = (name: string): React.FC => {\n    return {\n        [name]: function () {\n            useEffect(() => {\n                // We need to debounce the log, as it sometimes only requires a single tick to get the new\n                // composed component to render, and we don't want to scare developers for no reason.\n                const debounced = debounce(() => {\n                    console.info(\n                        `<${name}/> is not implemented! To provide an implementation, use the <Compose/> component.`\n                    );\n                }, 100);\n\n                return () => {\n                    debounced.cancel();\n                };\n            }, []);\n\n            return null;\n        }\n    }[name];\n};\n\nexport function makeComposable<TProps>(name: string, Component?: React.FC<TProps>) {\n    if (!Component) {\n        Component = createEmptyRenderer(name);\n    }\n\n    const Composable: ComposableFC<TProps> = props => {\n        const parents = useComposableParents();\n        const ComposedComponent = useComponent(Component as React.FC<TProps>);\n\n        const context = useMemo(() => [...parents, name], [parents, name]);\n\n        return (\n            <ComposableContext.Provider value={context}>\n                <ComposedComponent {...props}>{props.children}</ComposedComponent>\n            </ComposableContext.Provider>\n        );\n    };\n\n    Component.displayName = name;\n\n    Composable.original = Component;\n    Composable.originalName = name;\n    Composable.displayName = `Composable<${name}>`;\n\n    return Composable;\n}\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AAEA,IAAMA,iBAAiB,gBAAG,IAAAC,oBAAa,EAAW,EAAE,CAAC;AACrDD,iBAAiB,CAACE,WAAW,GAAG,mBAAmB;AAEnD,SAASC,oBAAoB,GAAG;EAC5B,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACL,iBAAiB,CAAC;EAC7C,IAAI,CAACI,OAAO,EAAE;IACV,OAAO,EAAE;EACb;EAEA,OAAOA,OAAO;AAClB;AAEA,IAAME,mBAAmB,GAAG,SAAtBA,mBAAmB,CAAIC,IAAY,EAAe;EACpD,OAAO,kCACFA,IAAI,EAAG,YAAY;IAChB,IAAAC,gBAAS,EAAC,YAAM;MACZ;MACA;MACA,IAAMC,SAAS,GAAG,IAAAC,eAAQ,EAAC,YAAM;QAC7BC,OAAO,CAACC,IAAI,YACJL,IAAI,wFACX;MACL,CAAC,EAAE,GAAG,CAAC;MAEP,OAAO,YAAM;QACTE,SAAS,CAACI,MAAM,EAAE;MACtB,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,IAAI;EACf,CAAC,EACHN,IAAI,CAAC;AACX,CAAC;AAEM,SAASO,cAAc,CAASP,IAAY,EAAEQ,SAA4B,EAAE;EAC/E,IAAI,CAACA,SAAS,EAAE;IACZA,SAAS,GAAGT,mBAAmB,CAACC,IAAI,CAAC;EACzC;EAEA,IAAMS,UAAgC,GAAG,SAAnCA,UAAgC,CAAGC,KAAK,EAAI;IAC9C,IAAMC,OAAO,GAAGf,oBAAoB,EAAE;IACtC,IAAMgB,iBAAiB,GAAG,IAAAC,qBAAY,EAACL,SAAS,CAAqB;IAErE,IAAMX,OAAO,GAAG,IAAAiB,cAAO,EAAC;MAAA,kDAAUH,OAAO,IAAEX,IAAI;IAAA,CAAC,EAAE,CAACW,OAAO,EAAEX,IAAI,CAAC,CAAC;IAElE,oBACI,6BAAC,iBAAiB,CAAC,QAAQ;MAAC,KAAK,EAAEH;IAAQ,gBACvC,6BAAC,iBAAiB,EAAKa,KAAK,EAAGA,KAAK,CAACK,QAAQ,CAAqB,CACzC;EAErC,CAAC;EAEDP,SAAS,CAACb,WAAW,GAAGK,IAAI;EAE5BS,UAAU,CAACO,QAAQ,GAAGR,SAAS;EAC/BC,UAAU,CAACQ,YAAY,GAAGjB,IAAI;EAC9BS,UAAU,CAACd,WAAW,wBAAiBK,IAAI,MAAG;EAE9C,OAAOS,UAAU;AACrB"}
+{"version":3,"file":"makeComposable.js","sources":["../src/makeComposable.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { GenericComponent } from \"~/types.js\";\nimport { makeDecoratable } from \"~/makeDecoratable.js\";\n\nconst ComposableContext = createContext<string[]>([]);\nComposableContext.displayName = \"ComposableContext\";\n\nconst nullRenderer = () => null;\n\n/**\n * @deprecated Use `makeDecoratable` instead.\n */\nexport function makeComposable<T extends GenericComponent>(name: string, Component?: T) {\n    return makeDecoratable(name, Component ?? nullRenderer);\n}\n"],"names":["ComposableContext","createContext","nullRenderer","makeComposable","name","Component","makeDecoratable"],"mappings":";;AAIA,MAAMA,oBAAoB,WAAHA,GAAGC,cAAwB,EAAE;AACpDD,kBAAkB,WAAW,GAAG;AAEhC,MAAME,eAAe,IAAM;AAKpB,SAASC,eAA2CC,IAAY,EAAEC,SAAa;IAClF,OAAOC,gBAAgBF,MAAMC,aAAaH;AAC9C"}

package/makeDecoratable.d.ts

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

package/makeDecoratable.js

@@ -0,0 +1,90 @@
+import react, { createContext, useContext, useMemo } from "react";
+import { useComponent } from "./Context.js";
+import { withDecoratorFactory, withHookDecoratorFactory } from "./decorators.js";
+class DecoratableErrorBoundary extends react.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            hasError: false,
+            error: void 0
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            hasError: true,
+            error
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.groupCollapsed(`%cCOMPONENT ERROR%c: "${this.props.name}" failed to render.`, "color:red", "color:default");
+        console.error(error, errorInfo);
+        console.groupEnd();
+    }
+    render() {
+        if (this.state.hasError) return /*#__PURE__*/ react.createElement("div", {
+            style: {
+                padding: "8px 12px",
+                border: "1px solid #e53e3e",
+                borderRadius: 4,
+                background: "#fff5f5",
+                color: "#c53030",
+                fontSize: 13
+            }
+        }, /*#__PURE__*/ react.createElement("strong", null, this.props.name), ": ", this.state.error?.message);
+        return this.props.children;
+    }
+}
+const ComposableContext = /*#__PURE__*/ createContext([]);
+ComposableContext.displayName = "ComposableContext";
+function useComposableParents() {
+    const context = useContext(ComposableContext);
+    if (!context) return [];
+    return context;
+}
+const nullRenderer = ()=>null;
+function makeDecoratableComponent(name, Component = nullRenderer) {
+    const Decoratable = (props)=>{
+        const parents = useComposableParents();
+        const ComposedComponent = useComponent(Component);
+        const context = useMemo(()=>[
+                ...parents,
+                name
+            ], [
+            parents,
+            name
+        ]);
+        return /*#__PURE__*/ react.createElement(ComposableContext.Provider, {
+            value: context
+        }, /*#__PURE__*/ react.createElement(DecoratableErrorBoundary, {
+            name: name
+        }, /*#__PURE__*/ react.createElement(ComposedComponent, props, props.children)));
+    };
+    const staticProps = {
+        original: Component,
+        originalName: name,
+        displayName: `Decoratable<${name}>`
+    };
+    return withDecoratorFactory()(Object.assign(Decoratable, staticProps));
+}
+function makeDecoratableHook(hook) {
+    const decoratableHook = (params)=>{
+        const composedHook = useComponent(hook);
+        return composedHook(params);
+    };
+    decoratableHook.original = hook;
+    return withHookDecoratorFactory()(decoratableHook);
+}
+function createVoidComponent() {
+    return (props)=>null;
+}
+function makeDecoratable(hookOrName, Component) {
+    if (Component) {
+        const component = makeDecoratableComponent(hookOrName, /*#__PURE__*/ react.memo(Component));
+        component.original.displayName = hookOrName;
+        return component;
+    }
+    return makeDecoratableHook(hookOrName);
+}
+export { createVoidComponent, makeDecoratable, makeDecoratableHook };
+
+//# sourceMappingURL=makeDecoratable.js.map

package/makeDecoratable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeDecoratable.js","sources":["../src/makeDecoratable.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\nimport type { ErrorInfo } from \"react\";\nimport { useComponent } from \"./Context.js\";\nimport type {\n    DecoratableComponent,\n    DecoratableHook,\n    GenericComponent,\n    GenericHook\n} from \"~/types.js\";\nimport { withDecoratorFactory, withHookDecoratorFactory } from \"~/decorators.js\";\n\ninterface ErrorBoundaryProps {\n    name: string;\n    children: React.ReactNode;\n}\n\ninterface ErrorBoundaryState {\n    hasError: boolean;\n    error: Error | undefined;\n}\n\nclass DecoratableErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {\n    constructor(props: ErrorBoundaryProps) {\n        super(props);\n        this.state = { hasError: false, error: undefined };\n    }\n\n    static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n        return { hasError: true, error };\n    }\n\n    override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n        console.groupCollapsed(\n            `%cCOMPONENT ERROR%c: \"${this.props.name}\" failed to render.`,\n            \"color:red\",\n            \"color:default\"\n        );\n        console.error(error, errorInfo);\n        console.groupEnd();\n    }\n\n    override render() {\n        if (this.state.hasError) {\n            return (\n                <div\n                    style={{\n                        padding: \"8px 12px\",\n                        border: \"1px solid #e53e3e\",\n                        borderRadius: 4,\n                        background: \"#fff5f5\",\n                        color: \"#c53030\",\n                        fontSize: 13\n                    }}\n                >\n                    <strong>{this.props.name}</strong>: {this.state.error?.message}\n                </div>\n            );\n        }\n        return this.props.children;\n    }\n}\n\nconst ComposableContext = createContext<string[]>([]);\nComposableContext.displayName = \"ComposableContext\";\n\nfunction useComposableParents() {\n    const context = useContext(ComposableContext);\n    if (!context) {\n        return [];\n    }\n\n    return context;\n}\n\nconst nullRenderer = () => null;\n\nfunction makeDecoratableComponent<T extends GenericComponent>(\n    name: string,\n    Component: T = nullRenderer as unknown as T\n) {\n    const Decoratable = (props: React.ComponentProps<T>): React.JSX.Element | null => {\n        const parents = useComposableParents();\n        const ComposedComponent = useComponent(Component) as GenericComponent<\n            React.ComponentProps<T>\n        >;\n\n        const context = useMemo(() => [...parents, name], [parents, name]);\n\n        return (\n            <ComposableContext.Provider value={context}>\n                <DecoratableErrorBoundary name={name}>\n                    <ComposedComponent {...props}>{props.children}</ComposedComponent>\n                </DecoratableErrorBoundary>\n            </ComposableContext.Provider>\n        );\n    };\n\n    const staticProps = {\n        original: Component,\n        originalName: name,\n        displayName: `Decoratable<${name}>`\n    };\n\n    return withDecoratorFactory()(\n        Object.assign(Decoratable, staticProps) as DecoratableComponent<\n            typeof Component & typeof staticProps\n        >\n    );\n}\n\nexport function makeDecoratableHook<T extends GenericHook>(hook: T) {\n    const decoratableHook = (params: Parameters<T>) => {\n        const composedHook = useComponent(hook);\n\n        return composedHook(params) as DecoratableHook<T>;\n    };\n\n    decoratableHook.original = hook;\n\n    return withHookDecoratorFactory()(decoratableHook as DecoratableHook<T>);\n}\n\nexport function createVoidComponent<T>() {\n    // oxlint-disable-next-line typescript/no-unused-vars\n    return (props: T): React.JSX.Element | null => {\n        return null;\n    };\n}\n\nexport function makeDecoratable<T extends GenericHook>(\n    hook: T\n): ReturnType<typeof makeDecoratableHook<T>>;\nexport function makeDecoratable<T extends GenericComponent>(\n    name: string,\n    Component: T\n): ReturnType<typeof makeDecoratableComponent<T>>;\nexport function makeDecoratable(hookOrName: any, Component?: any) {\n    if (Component) {\n        const component = makeDecoratableComponent(hookOrName, React.memo(Component));\n        component.original.displayName = hookOrName;\n        return component;\n    }\n\n    return makeDecoratableHook(hookOrName);\n}\n"],"names":["DecoratableErrorBoundary","React","props","undefined","error","errorInfo","console","ComposableContext","createContext","useComposableParents","context","useContext","nullRenderer","makeDecoratableComponent","name","Component","Decoratable","parents","ComposedComponent","useComponent","useMemo","staticProps","withDecoratorFactory","Object","makeDecoratableHook","hook","decoratableHook","params","composedHook","withHookDecoratorFactory","createVoidComponent","makeDecoratable","hookOrName","component"],"mappings":";;;AAqBA,MAAMA,iCAAiCC,MAAAA,SAAe;IAClD,YAAYC,KAAyB,CAAE;QACnC,KAAK,CAACA;QACN,IAAI,CAAC,KAAK,GAAG;YAAE,UAAU;YAAO,OAAOC;QAAU;IACrD;IAEA,OAAO,yBAAyBC,KAAY,EAAsB;QAC9D,OAAO;YAAE,UAAU;YAAMA;QAAM;IACnC;IAES,kBAAkBA,KAAY,EAAEC,SAAoB,EAAE;QAC3DC,QAAQ,cAAc,CAClB,CAAC,sBAAsB,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,EAC7D,aACA;QAEJA,QAAQ,KAAK,CAACF,OAAOC;QACrBC,QAAQ,QAAQ;IACpB;IAES,SAAS;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EACnB,OAAO,WAAP,GACI,oBAAC;YACG,OAAO;gBACH,SAAS;gBACT,QAAQ;gBACR,cAAc;gBACd,YAAY;gBACZ,OAAO;gBACP,UAAU;YACd;yBAEA,oBAAC,gBAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,GAAU,MAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;QAInE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACJ;AAEA,MAAMC,oBAAoB,WAAHA,GAAGC,cAAwB,EAAE;AACpDD,kBAAkB,WAAW,GAAG;AAEhC,SAASE;IACL,MAAMC,UAAUC,WAAWJ;IAC3B,IAAI,CAACG,SACD,OAAO,EAAE;IAGb,OAAOA;AACX;AAEA,MAAME,eAAe,IAAM;AAE3B,SAASC,yBACLC,IAAY,EACZC,YAAeH,YAA4B;IAE3C,MAAMI,cAAc,CAACd;QACjB,MAAMe,UAAUR;QAChB,MAAMS,oBAAoBC,aAAaJ;QAIvC,MAAML,UAAUU,QAAQ,IAAM;mBAAIH;gBAASH;aAAK,EAAE;YAACG;YAASH;SAAK;QAEjE,OAAO,WAAP,GACI,oBAACP,kBAAkB,QAAQ;YAAC,OAAOG;yBAC/B,oBAACV,0BAAwBA;YAAC,MAAMc;yBAC5B,oBAACI,mBAAsBhB,OAAQA,MAAM,QAAQ;IAI7D;IAEA,MAAMmB,cAAc;QAChB,UAAUN;QACV,cAAcD;QACd,aAAa,CAAC,YAAY,EAAEA,KAAK,CAAC,CAAC;IACvC;IAEA,OAAOQ,uBACHC,OAAO,MAAM,CAACP,aAAaK;AAInC;AAEO,SAASG,oBAA2CC,IAAO;IAC9D,MAAMC,kBAAkB,CAACC;QACrB,MAAMC,eAAeT,aAAaM;QAElC,OAAOG,aAAaD;IACxB;IAEAD,gBAAgB,QAAQ,GAAGD;IAE3B,OAAOI,2BAA2BH;AACtC;AAEO,SAASI;IAEZ,OAAO,CAAC5B,QACG;AAEf;AASO,SAAS6B,gBAAgBC,UAAe,EAAEjB,SAAe;IAC5D,IAAIA,WAAW;QACX,MAAMkB,YAAYpB,yBAAyBmB,YAAY,WAAZA,GAAY/B,MAAAA,IAAU,CAACc;QAClEkB,UAAU,QAAQ,CAAC,WAAW,GAAGD;QACjC,OAAOC;IACX;IAEA,OAAOT,oBAAoBQ;AAC/B"}

package/package.json

@@ -1,7 +1,11 @@
 {
 	"name": "@webiny/react-composition",
-	"version": "0.0.0-unstable.79032b23a5",
-	"main": "index.js",
+	"version": "0.0.0-unstable.7be00a75a9",
+	"type": "module",
+	"exports": {
+		".": "./index.js",
+		"./*": "./*"
+	},
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -14,29 +18,20 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.20.13",
-		"@types/react": "17.0.39",
-		"lodash.debounce": "4.0.8",
-		"react": "17.0.2",
-		"react-dom": "17.0.2"
+		"@types/react": "18.3.29",
+		"react": "18.3.1",
+		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.19.3",
-		"@babel/core": "^7.19.3",
-		"@babel/preset-env": "^7.19.4",
-		"@babel/preset-typescript": "^7.18.6",
-		"@webiny/cli": "^0.0.0-unstable.79032b23a5",
-		"@webiny/project-utils": "^0.0.0-unstable.79032b23a5",
-		"ttypescript": "^1.5.13",
-		"typescript": "4.7.4"
+		"@testing-library/react": "16.3.2",
+		"@webiny/build-tools": "0.0.0-unstable.7be00a75a9",
+		"typescript": "6.0.3",
+		"vitest": "4.1.7"
 	},
 	"publishConfig": {
-		"access": "public",
-		"directory": "dist"
-	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
+		"access": "public"
 	},
-	"gitHead": "79032b23a5e5b580fb21be88e8cc66d0dce7afdc"
+	"webiny": {
+		"publishFrom": "dist"
+	}
 }

package/types.d.ts

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

package/createComponentPlugin.d.ts

@@ -1,8 +0,0 @@
-import React, { ComponentProps } from "react";
-import { ComposableFC, HigherOrderComponent } from "./index";
-/**
- * Creates a component which, when mounted, registers a Higher Order Component for the given base component.
- * This is particularly useful for decorating (wrapping) existing composable components.
- * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.
- */
-export declare function createComponentPlugin<T extends ComposableFC<ComponentProps<T>>>(Base: T, hoc: HigherOrderComponent<ComponentProps<T>>): React.FC;

package/createComponentPlugin.js

@@ -1,24 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createComponentPlugin = createComponentPlugin;
-var _react = _interopRequireDefault(require("react"));
-var _index = require("./index");
-/**
- * Creates a component which, when mounted, registers a Higher Order Component for the given base component.
- * This is particularly useful for decorating (wrapping) existing composable components.
- * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.
- */
-function createComponentPlugin(Base, hoc) {
-  var ComponentPlugin = function ComponentPlugin() {
-    return /*#__PURE__*/_react.default.createElement(_index.Compose, {
-      component: Base,
-      with: hoc
-    });
-  };
-  ComponentPlugin.displayName = Base.displayName;
-  return ComponentPlugin;
-}

package/createComponentPlugin.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createComponentPlugin","Base","hoc","ComponentPlugin","displayName"],"sources":["createComponentPlugin.tsx"],"sourcesContent":["import React, { ComponentProps } from \"react\";\nimport { ComposableFC, Compose, HigherOrderComponent } from \"./index\";\n\n/**\n * Creates a component which, when mounted, registers a Higher Order Component for the given base component.\n * This is particularly useful for decorating (wrapping) existing composable components.\n * For more information, visit https://www.webiny.com/docs/admin-area/basics/framework.\n */\nexport function createComponentPlugin<T extends ComposableFC<ComponentProps<T>>>(\n    Base: T,\n    hoc: HigherOrderComponent<ComponentProps<T>>\n): React.FC {\n    const ComponentPlugin = () => <Compose component={Base} with={hoc} />;\n    ComponentPlugin.displayName = Base.displayName;\n    return ComponentPlugin;\n}\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACO,SAASA,qBAAqB,CACjCC,IAAO,EACPC,GAA4C,EACpC;EACR,IAAMC,eAAe,GAAG,SAAlBA,eAAe;IAAA,oBAAS,6BAAC,cAAO;MAAC,SAAS,EAAEF,IAAK;MAAC,IAAI,EAAEC;IAAI,EAAG;EAAA;EACrEC,eAAe,CAACC,WAAW,GAAGH,IAAI,CAACG,WAAW;EAC9C,OAAOD,eAAe;AAC1B"}

package/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Context\";\nexport * from \"./Compose\";\nexport * from \"./makeComposable\";\nexport * from \"./createComponentPlugin\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}