@webiny/react-composition 5.28.0-beta.0

package/Compose.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { HigherOrderComponent } from "./Context";
+export interface ComposableFC<TProps> extends React.FC<TProps> {
+    original: React.FC<TProps>;
+    originalName: string;
+}
+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[];
+}
+export declare const Compose: React.FC<ComposeProps>;

package/Compose.js

@@ -0,0 +1,28 @@
+"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;
+    }
+
+    var hocs = Array.isArray(props.with) ? props.with : [props.with];
+    return composeComponent(props.component.original, hocs);
+  }, [props.with]);
+  return null;
+};
+
+exports.Compose = Compose;

package/Compose.js.map

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

package/Context.d.ts

@@ -0,0 +1,38 @@
+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[];
+}
+/**
+ * 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.
+ */
+export interface HigherOrderComponent<TInputProps = any, TOutputProps = TInputProps> {
+    (Component: FC<TInputProps>): FC<TOutputProps>;
+}
+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;
+}
+declare const CompositionContext: React.Context<CompositionContext | undefined>;
+export declare const CompositionProvider: React.FC;
+export declare function useComponent(Component: ComponentType<any>): React.ComponentClass<unknown, any> | React.FunctionComponent<unknown>;
+/**
+ * This hook will throw an error if composition context doesn't exist.
+ */
+export declare function useComposition(): CompositionContext;
+/**
+ * This hook will not throw an error if composition context doesn't exist.
+ */
+export declare function useOptionalComposition(): CompositionContext | undefined;
+export {};

package/Context.js

@@ -0,0 +1,126 @@
+"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);
+  };
+}
+
+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);
+};
+
+exports.CompositionProvider = CompositionProvider;
+
+function useComponent(Component) {
+  var context = useOptionalComposition();
+
+  if (!context) {
+    return Component;
+  }
+
+  return context.getComponent(Component) || Component;
+}
+/**
+ * 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;
+}
+/**
+ * This hook will not throw an error if composition context doesn't exist.
+ */
+
+
+function useOptionalComposition() {
+  return (0, _react.useContext)(CompositionContext);
+}

package/Context.js.map

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,8 @@
+# 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)
+
+A tiny composition framework for React components which makes it possible to compose components anywhere in your application. 
+

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Context";
+export * from "./Compose";
+export * from "./makeComposable";

package/index.js

@@ -0,0 +1,44 @@
+"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];
+    }
+  });
+});

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Context\";\nexport * from \"./Compose\";\nexport * from \"./makeComposable\";\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"}

package/makeComposable.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ComposableFC } from "./Compose";
+export declare function makeComposable<TProps>(name: string, Component?: React.FC<TProps>): ComposableFC<TProps>;

package/makeComposable.js

@@ -0,0 +1,70 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
+var _Context = require("./Context");
+
+var ComposableContext = /*#__PURE__*/(0, _react.createContext)([]);
+ComposableContext.displayName = "ComposableContext";
+
+function useComposableParents() {
+  var context = (0, _react.useContext)(ComposableContext);
+
+  if (!context) {
+    return [];
+  }
+
+  return context;
+}
+
+var createEmptyRenderer = function createEmptyRenderer(name) {
+  return function EmptyRenderer() {
+    (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;
+  };
+};
+
+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;
+}

package/makeComposable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ComposableContext","createContext","displayName","useComposableParents","context","useContext","createEmptyRenderer","name","EmptyRenderer","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 function EmptyRenderer(): null {\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};\n\nexport function makeComposable<TProps>(name: string, Component?: React.FC<TProps>) {\n    if (!Component) {\n        Component = createEmptyRenderer(name);\n    }\n\n    const Composable: ComposableFC<TProps> = props => {\n        const parents = useComposableParents();\n        const ComposedComponent = useComponent(Component as React.FC<TProps>);\n\n        const context = useMemo(() => [...parents, name], [parents, name]);\n\n        return (\n            <ComposableContext.Provider value={context}>\n                <ComposedComponent {...props}>{props.children}</ComposedComponent>\n            </ComposableContext.Provider>\n        );\n    };\n\n    Component.displayName = name;\n\n    Composable.original = Component;\n    Composable.originalName = name;\n    Composable.displayName = `Composable<${name}>`;\n\n    return Composable;\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAEA,IAAMA,iBAAiB,gBAAG,IAAAC,oBAAA,EAAwB,EAAxB,CAA1B;AACAD,iBAAiB,CAACE,WAAlB,GAAgC,mBAAhC;;AAEA,SAASC,oBAAT,GAAgC;EAC5B,IAAMC,OAAO,GAAG,IAAAC,iBAAA,EAAWL,iBAAX,CAAhB;;EACA,IAAI,CAACI,OAAL,EAAc;IACV,OAAO,EAAP;EACH;;EAED,OAAOA,OAAP;AACH;;AAED,IAAME,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,IAAD,EAA4B;EACpD,OAAO,SAASC,aAAT,GAA+B;IAClC,IAAAC,gBAAA,EAAU,YAAM;MACZ;MACA;MACA,IAAMC,SAAS,GAAG,IAAAC,eAAA,EAAS,YAAM;QAC7BC,OAAO,CAACC,IAAR,YACQN,IADR;MAGH,CAJiB,EAIf,GAJe,CAAlB;MAMA,OAAO,YAAM;QACTG,SAAS,CAACI,MAAV;MACH,CAFD;IAGH,CAZD,EAYG,EAZH;IAcA,OAAO,IAAP;EACH,CAhBD;AAiBH,CAlBD;;AAoBO,SAASC,cAAT,CAAgCR,IAAhC,EAA8CS,SAA9C,EAA4E;EAC/E,IAAI,CAACA,SAAL,EAAgB;IACZA,SAAS,GAAGV,mBAAmB,CAACC,IAAD,CAA/B;EACH;;EAED,IAAMU,UAAgC,GAAG,SAAnCA,UAAmC,CAAAC,KAAK,EAAI;IAC9C,IAAMC,OAAO,GAAGhB,oBAAoB,EAApC;IACA,IAAMiB,iBAAiB,GAAG,IAAAC,qBAAA,EAAaL,SAAb,CAA1B;IAEA,IAAMZ,OAAO,GAAG,IAAAkB,cAAA,EAAQ;MAAA,kDAAUH,OAAV,IAAmBZ,IAAnB;IAAA,CAAR,EAAkC,CAACY,OAAD,EAAUZ,IAAV,CAAlC,CAAhB;IAEA,oBACI,6BAAC,iBAAD,CAAmB,QAAnB;MAA4B,KAAK,EAAEH;IAAnC,gBACI,6BAAC,iBAAD,EAAuBc,KAAvB,EAA+BA,KAAK,CAACK,QAArC,CADJ,CADJ;EAKH,CAXD;;EAaAP,SAAS,CAACd,WAAV,GAAwBK,IAAxB;EAEAU,UAAU,CAACO,QAAX,GAAsBR,SAAtB;EACAC,UAAU,CAACQ,YAAX,GAA0BlB,IAA1B;EACAU,UAAU,CAACf,WAAX,wBAAuCK,IAAvC;EAEA,OAAOU,UAAP;AACH"}

package/package.json

@@ -0,0 +1,42 @@
+{
+	"name": "@webiny/react-composition",
+	"version": "5.28.0-beta.0",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"description": "A tiny composition framework for React components.",
+	"contributors": [
+		"Pavel Denisjuk <pavel@webiny.com>",
+		"Sven Al Hamad <sven@webiny.com>",
+		"Adrian Smijulj <adrian@webiny.com>"
+	],
+	"license": "MIT",
+	"dependencies": {
+		"@babel/runtime": "7.18.3",
+		"@types/react": "16.14.2",
+		"lodash.debounce": "4.0.8",
+		"react": "16.14.0",
+		"react-dom": "16.14.0"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.16.0",
+		"@babel/core": "^7.16.0",
+		"@babel/preset-env": "^7.16.4",
+		"@babel/preset-typescript": "^7.16.0",
+		"@webiny/cli": "^5.28.0-beta.0",
+		"@webiny/project-utils": "^5.28.0-beta.0",
+		"ttypescript": "^1.5.13",
+		"typescript": "4.5.5"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "yarn webiny run build",
+		"watch": "yarn webiny run watch"
+	},
+	"gitHead": "6503c7f86cfc90660f005acf72049505bfd4fb76"
+}