@webiny/app 5.43.3 → 6.0.0-alpha.1

package/plugins/image.js

@@ -1,24 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _Image = require("@webiny/ui/Image");
-var _excluded = ["transform", "srcSet"];
-var SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
+import React from "react";
+import { Image } from "@webiny/ui/Image";
+const SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
 
 /**
  * Width of the image should not be just any random number. For optimization reasons,
  * we only allow the ones listed in SUPPORTED_IMAGE_RESIZE_WIDTHS list (Webiny Cloud supports only these).
  */
-var getSupportedImageResizeWidth = function getSupportedImageResizeWidth(width) {
-  var output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];
-  var i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;
+const getSupportedImageResizeWidth = width => {
+  let output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];
+  let i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;
   while (i >= 0) {
     if (width === SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {
       output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
@@ -40,37 +30,37 @@ var getSupportedImageResizeWidth = function getSupportedImageResizeWidth(width)
  * Currently we only allow "width" as a transform option.
  * @param args
  */
-var sanitizeTransformArgs = function sanitizeTransformArgs(args) {
-  var output = {};
+const sanitizeTransformArgs = args => {
+  const output = {};
   if (!args || args.width === undefined || args.width === null) {
     return output;
   }
-  var width = parseInt(args.width);
+  const width = parseInt(args.width);
   if (width > 0) {
     output.width = getSupportedImageResizeWidth(width);
   }
   return output;
 };
-var getSizes = function getSizes(width) {
+const getSizes = width => {
   if (typeof width !== "string") {
     return undefined;
   }
   // Check if width was set as percentage, with "%" in the value.
   if (width.endsWith("%")) {
-    return "".concat(parseInt(width), "vw");
+    return `${parseInt(width)}vw`;
   }
   // Check if width was set as viewport width, with "vw" in the value.
   if (width.endsWith("vw")) {
-    return "".concat(parseInt(width), "vw");
+    return `${parseInt(width)}vw`;
   }
 
   // Check if width was set as relative, with "em" in the value.
   if (width.endsWith("em")) {
-    return "".concat(parseInt(width), "em");
+    return `${parseInt(width)}em`;
   }
   return undefined;
 };
-var isFixedImageWidth = function isFixedImageWidth(width) {
+const isFixedImageWidth = width => {
   if (Number.isFinite(width)) {
     return true;
   }
@@ -79,20 +69,18 @@ var isFixedImageWidth = function isFixedImageWidth(width) {
   }
   return false;
 };
-var getSrcSetAutoSizes = function getSrcSetAutoSizes(max) {
+const getSrcSetAutoSizes = max => {
   max = isFixedImageWidth(max) ? parseInt("" + max) : 2500;
-  var maxWidth = getSupportedImageResizeWidth(max);
-  return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter(function (supportedWidth) {
+  const maxWidth = getSupportedImageResizeWidth(max);
+  return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter(supportedWidth => {
     return supportedWidth <= maxWidth;
   });
 };
-var convertTransformToQueryParams = function convertTransformToQueryParams(transform) {
-  return Object.keys(transform).map(function (key) {
-    return "".concat(key, "=").concat(transform[key]);
-  }).join("&");
+const convertTransformToQueryParams = transform => {
+  return Object.keys(transform).map(key => `${key}=${transform[key]}`).join("&");
 };
-var _default = exports.default = function _default() {
-  var imagePlugin = {
+export default () => {
+  const imagePlugin = {
     name: "image-component",
     type: "image-component",
     presets: {
@@ -100,46 +88,51 @@ var _default = exports.default = function _default() {
         width: 300
       }
     },
-    getImageSrc: function getImageSrc(props) {
+    getImageSrc: props => {
       if (!props) {
         return "";
       }
-      var src = props.src,
-        transform = props.transform;
+      const {
+        src,
+        transform
+      } = props;
       if (!transform) {
         return src;
       }
       if (!src || src.startsWith("data:") || src.endsWith("svg")) {
         return src;
       }
-      var sanitizedParams = sanitizeTransformArgs(transform);
-      var params = convertTransformToQueryParams(sanitizedParams);
+      const sanitizedParams = sanitizeTransformArgs(transform);
+      const params = convertTransformToQueryParams(sanitizedParams);
       return src + "?" + params;
     },
-    render: function render(props) {
-      var transform = props.transform,
-        srcSetInitial = props.srcSet,
-        imageProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-      var srcSet = srcSetInitial;
-      var sizes;
-      var src = imageProps.src;
+    render(props) {
+      const {
+        transform,
+        srcSet: srcSetInitial,
+        ...imageProps
+      } = props;
+      let srcSet = srcSetInitial;
+      let sizes;
+      const src = imageProps.src;
       if (srcSet && srcSet === "auto") {
         srcSet = {};
 
         // Check if image width was forced, and additionally if width was set as pixels, with "px" in the value.
-        var forcedWidth = props.width || props.style && props.style.width;
-        var srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);
-        srcSetAutoWidths.forEach(function (width) {
+        const forcedWidth = props.width || props.style && props.style.width;
+        const srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);
+        srcSetAutoWidths.forEach(width => {
           srcSet[width + "w"] = imagePlugin.getImageSrc({
-            src: src,
-            transform: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, transform), {}, {
-              width: width
-            })
+            src,
+            transform: {
+              ...transform,
+              width
+            }
           });
         });
         sizes = getSizes(forcedWidth);
       }
-      return /*#__PURE__*/_react.default.createElement(_Image.Image, Object.assign({}, imageProps, {
+      return /*#__PURE__*/React.createElement(Image, Object.assign({}, imageProps, {
         srcSet: srcSet,
         src: src,
         sizes: sizes

package/plugins/image.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Image","_excluded","SUPPORTED_IMAGE_RESIZE_WIDTHS","getSupportedImageResizeWidth","width","output","i","length","sanitizeTransformArgs","args","undefined","parseInt","getSizes","endsWith","concat","isFixedImageWidth","Number","isFinite","getSrcSetAutoSizes","max","maxWidth","filter","supportedWidth","convertTransformToQueryParams","transform","Object","keys","map","key","join","_default","exports","default","imagePlugin","name","type","presets","avatar","getImageSrc","props","src","startsWith","sanitizedParams","params","render","srcSetInitial","srcSet","imageProps","_objectWithoutProperties2","sizes","forcedWidth","style","srcSetAutoWidths","forEach","_objectSpread2","createElement","Image","assign"],"sources":["image.tsx"],"sourcesContent":["import React from \"react\";\nimport { Image } from \"@webiny/ui/Image\";\nimport { ImageComponentPlugin } from \"~/types\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\n/**\n * Width of the image should not be just any random number. For optimization reasons,\n * we only allow the ones listed in SUPPORTED_IMAGE_RESIZE_WIDTHS list (Webiny Cloud supports only these).\n */\nconst getSupportedImageResizeWidth = (width: number) => {\n    let output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];\n    let i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;\n    while (i >= 0) {\n        if (width === SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {\n            output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            break;\n        }\n\n        if (width > SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {\n            // Use next larger width. If there isn't any, use current.\n            output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i + 1];\n            if (!output) {\n                output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            }\n            break;\n        }\n\n        i--;\n    }\n\n    return output;\n};\n\ninterface SanitizeTransformArgsParams {\n    width?: string;\n}\ninterface SanitizeTransformArgsResult {\n    width?: number;\n}\n/**\n * Currently we only allow \"width\" as a transform option.\n * @param args\n */\nconst sanitizeTransformArgs = (args?: SanitizeTransformArgsParams): SanitizeTransformArgsResult => {\n    const output: SanitizeTransformArgsResult = {};\n    if (!args || args.width === undefined || args.width === null) {\n        return output;\n    }\n    const width = parseInt(args.width);\n    if (width > 0) {\n        output.width = getSupportedImageResizeWidth(width);\n    }\n\n    return output;\n};\n\nconst getSizes = (width?: string | number): string | undefined => {\n    if (typeof width !== \"string\") {\n        return undefined;\n    }\n    // Check if width was set as percentage, with \"%\" in the value.\n    if (width.endsWith(\"%\")) {\n        return `${parseInt(width)}vw`;\n    }\n    // Check if width was set as viewport width, with \"vw\" in the value.\n    if (width.endsWith(\"vw\")) {\n        return `${parseInt(width)}vw`;\n    }\n\n    // Check if width was set as relative, with \"em\" in the value.\n    if (width.endsWith(\"em\")) {\n        return `${parseInt(width)}em`;\n    }\n\n    return undefined;\n};\n\nconst isFixedImageWidth = (width?: number | string) => {\n    if (Number.isFinite(width)) {\n        return true;\n    }\n\n    if (typeof width === \"string\" && width.endsWith(\"px\")) {\n        return true;\n    }\n    return false;\n};\n\nconst getSrcSetAutoSizes = (max?: string | number) => {\n    max = isFixedImageWidth(max) ? parseInt(\"\" + max) : 2500;\n    const maxWidth = getSupportedImageResizeWidth(max);\n    return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter((supportedWidth: number) => {\n        return supportedWidth <= maxWidth;\n    });\n};\n\nconst convertTransformToQueryParams = (transform: Record<string, any>): string => {\n    return Object.keys(transform)\n        .map(key => `${key}=${transform[key]}`)\n        .join(\"&\");\n};\n\nexport default () => {\n    const imagePlugin: ImageComponentPlugin = {\n        name: \"image-component\",\n        type: \"image-component\",\n        presets: {\n            avatar: { width: 300 }\n        },\n        getImageSrc: (props?: Record<string, any>) => {\n            if (!props) {\n                return \"\";\n            }\n\n            const { src, transform } = props;\n            if (!transform) {\n                return src;\n            }\n\n            if (!src || src.startsWith(\"data:\") || src.endsWith(\"svg\")) {\n                return src;\n            }\n\n            const sanitizedParams = sanitizeTransformArgs(transform);\n            const params = convertTransformToQueryParams(sanitizedParams);\n            return src + \"?\" + params;\n        },\n        render(props) {\n            const { transform, srcSet: srcSetInitial, ...imageProps } = props;\n            let srcSet: any = srcSetInitial;\n            let sizes: string | undefined;\n            const src = imageProps.src;\n            if (srcSet && srcSet === \"auto\") {\n                srcSet = {};\n\n                // Check if image width was forced, and additionally if width was set as pixels, with \"px\" in the value.\n                const forcedWidth = props.width || (props.style && props.style.width);\n                const srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);\n                srcSetAutoWidths.forEach(width => {\n                    srcSet[width + \"w\"] = imagePlugin.getImageSrc({\n                        src,\n                        transform: { ...transform, width }\n                    });\n                });\n                sizes = getSizes(forcedWidth);\n            }\n\n            return <Image {...imageProps} srcSet={srcSet} src={src} sizes={sizes} />;\n        }\n    };\n\n    return imagePlugin;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Image","SUPPORTED_IMAGE_RESIZE_WIDTHS","getSupportedImageResizeWidth","width","output","i","length","sanitizeTransformArgs","args","undefined","parseInt","getSizes","endsWith","isFixedImageWidth","Number","isFinite","getSrcSetAutoSizes","max","maxWidth","filter","supportedWidth","convertTransformToQueryParams","transform","Object","keys","map","key","join","imagePlugin","name","type","presets","avatar","getImageSrc","props","src","startsWith","sanitizedParams","params","render","srcSet","srcSetInitial","imageProps","sizes","forcedWidth","style","srcSetAutoWidths","forEach","createElement","assign"],"sources":["image.tsx"],"sourcesContent":["import React from \"react\";\nimport { Image } from \"@webiny/ui/Image\";\nimport type { ImageComponentPlugin } from \"~/types\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];\n\n/**\n * Width of the image should not be just any random number. For optimization reasons,\n * we only allow the ones listed in SUPPORTED_IMAGE_RESIZE_WIDTHS list (Webiny Cloud supports only these).\n */\nconst getSupportedImageResizeWidth = (width: number) => {\n    let output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];\n    let i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;\n    while (i >= 0) {\n        if (width === SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {\n            output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            break;\n        }\n\n        if (width > SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {\n            // Use next larger width. If there isn't any, use current.\n            output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i + 1];\n            if (!output) {\n                output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];\n            }\n            break;\n        }\n\n        i--;\n    }\n\n    return output;\n};\n\ninterface SanitizeTransformArgsParams {\n    width?: string;\n}\ninterface SanitizeTransformArgsResult {\n    width?: number;\n}\n/**\n * Currently we only allow \"width\" as a transform option.\n * @param args\n */\nconst sanitizeTransformArgs = (args?: SanitizeTransformArgsParams): SanitizeTransformArgsResult => {\n    const output: SanitizeTransformArgsResult = {};\n    if (!args || args.width === undefined || args.width === null) {\n        return output;\n    }\n    const width = parseInt(args.width);\n    if (width > 0) {\n        output.width = getSupportedImageResizeWidth(width);\n    }\n\n    return output;\n};\n\nconst getSizes = (width?: string | number): string | undefined => {\n    if (typeof width !== \"string\") {\n        return undefined;\n    }\n    // Check if width was set as percentage, with \"%\" in the value.\n    if (width.endsWith(\"%\")) {\n        return `${parseInt(width)}vw`;\n    }\n    // Check if width was set as viewport width, with \"vw\" in the value.\n    if (width.endsWith(\"vw\")) {\n        return `${parseInt(width)}vw`;\n    }\n\n    // Check if width was set as relative, with \"em\" in the value.\n    if (width.endsWith(\"em\")) {\n        return `${parseInt(width)}em`;\n    }\n\n    return undefined;\n};\n\nconst isFixedImageWidth = (width?: number | string) => {\n    if (Number.isFinite(width)) {\n        return true;\n    }\n\n    if (typeof width === \"string\" && width.endsWith(\"px\")) {\n        return true;\n    }\n    return false;\n};\n\nconst getSrcSetAutoSizes = (max?: string | number) => {\n    max = isFixedImageWidth(max) ? parseInt(\"\" + max) : 2500;\n    const maxWidth = getSupportedImageResizeWidth(max);\n    return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter((supportedWidth: number) => {\n        return supportedWidth <= maxWidth;\n    });\n};\n\nconst convertTransformToQueryParams = (transform: Record<string, any>): string => {\n    return Object.keys(transform)\n        .map(key => `${key}=${transform[key]}`)\n        .join(\"&\");\n};\n\nexport default () => {\n    const imagePlugin: ImageComponentPlugin = {\n        name: \"image-component\",\n        type: \"image-component\",\n        presets: {\n            avatar: { width: 300 }\n        },\n        getImageSrc: (props?: Record<string, any>) => {\n            if (!props) {\n                return \"\";\n            }\n\n            const { src, transform } = props;\n            if (!transform) {\n                return src;\n            }\n\n            if (!src || src.startsWith(\"data:\") || src.endsWith(\"svg\")) {\n                return src;\n            }\n\n            const sanitizedParams = sanitizeTransformArgs(transform);\n            const params = convertTransformToQueryParams(sanitizedParams);\n            return src + \"?\" + params;\n        },\n        render(props) {\n            const { transform, srcSet: srcSetInitial, ...imageProps } = props;\n            let srcSet: any = srcSetInitial;\n            let sizes: string | undefined;\n            const src = imageProps.src;\n            if (srcSet && srcSet === \"auto\") {\n                srcSet = {};\n\n                // Check if image width was forced, and additionally if width was set as pixels, with \"px\" in the value.\n                const forcedWidth = props.width || (props.style && props.style.width);\n                const srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);\n                srcSetAutoWidths.forEach(width => {\n                    srcSet[width + \"w\"] = imagePlugin.getImageSrc({\n                        src,\n                        transform: { ...transform, width }\n                    });\n                });\n                sizes = getSizes(forcedWidth);\n            }\n\n            return <Image {...imageProps} srcSet={srcSet} src={src} sizes={sizes} />;\n        }\n    };\n\n    return imagePlugin;\n};\n"],"mappings":"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","ignoreList":[]}

package/plugins/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { Plugin } from "@webiny/plugins/types";
+import type { ReactNode } from "react";
+import type { Plugin } from "@webiny/plugins/types";
 import imagePlugin from "./image";
 export { imagePlugin };
 type RenderPluginOptions<T> = {

package/plugins/index.js

@@ -1,65 +1,45 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "imagePlugin", {
-  enumerable: true,
-  get: function get() {
-    return _image.default;
-  }
-});
-exports.renderPlugins = exports.renderPlugin = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _warning = _interopRequireDefault(require("warning"));
-var _plugins = require("@webiny/plugins");
-var _image = _interopRequireDefault(require("./image"));
-var PluginComponent = function PluginComponent(props) {
+import React from "react";
+import warning from "warning";
+import { plugins } from "@webiny/plugins";
+import imagePlugin from "./image";
+export { imagePlugin };
+const PluginComponent = props => {
   return props.children;
 };
-var PluginsComponent = function PluginsComponent(props) {
+const PluginsComponent = props => {
   return props.children;
 };
-var renderPlugin = exports.renderPlugin = function renderPlugin(name) {
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _options$wrapper = options.wrapper,
-    wrapper = _options$wrapper === void 0 ? true : _options$wrapper,
-    _options$fn = options.fn,
-    fn = _options$fn === void 0 ? "render" : _options$fn;
-  var plugin = _plugins.plugins.byName(name);
-  (0, _warning.default)(plugin, "No such plugin \"".concat(name, "\""));
+export const renderPlugin = (name, params = {}, options = {}) => {
+  const {
+    wrapper = true,
+    fn = "render"
+  } = options;
+  const plugin = plugins.byName(name);
+  warning(plugin, `No such plugin "${name}"`);
   if (!plugin) {
     return null;
   }
-  var content = plugin[fn](params);
+  const content = plugin[fn](params);
   if (content) {
-    return wrapper ? /*#__PURE__*/_react.default.createElement(PluginComponent, {
+    return wrapper ? /*#__PURE__*/React.createElement(PluginComponent, {
       key: plugin.name,
       name: name,
       params: params,
       fn: fn
-    }, content) : (/*#__PURE__*/_react.default.cloneElement(content, {
+    }, content) : (/*#__PURE__*/React.cloneElement(content, {
       key: plugin.name
     }));
   }
   return null;
 };
-var renderPlugins = exports.renderPlugins = function renderPlugins(type) {
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _options$wrapper2 = options.wrapper,
-    wrapper = _options$wrapper2 === void 0 ? true : _options$wrapper2,
-    _options$fn2 = options.fn,
-    fn = _options$fn2 === void 0 ? "render" : _options$fn2,
-    _options$filter = options.filter,
-    filter = _options$filter === void 0 ? function (v) {
-      return v;
-    } : _options$filter,
-    reverse = options.reverse;
-  var content = _plugins.plugins.byType(type).filter(function (pl) {
+export const renderPlugins = (type, params = {}, options = {}) => {
+  const {
+    wrapper = true,
+    fn = "render",
+    filter = v => v,
+    reverse
+  } = options;
+  const content = plugins.byType(type).filter(pl => {
     /**
      * TODO @ts-refactor Problem with possibility of a different subtype.
      */
@@ -68,21 +48,19 @@ var renderPlugins = exports.renderPlugins = function renderPlugins(type) {
   })
   /**
    * We cast as string because renderPlugin checks for the plugin.name
-   */.map(function (plugin) {
-    return renderPlugin(plugin.name, params, {
-      wrapper: wrapper,
-      fn: fn
-    });
-  }).filter(Boolean);
+   */.map(plugin => renderPlugin(plugin.name, params, {
+    wrapper,
+    fn
+  })).filter(Boolean);
   if (reverse) {
     content.reverse();
   }
-  return wrapper ? /*#__PURE__*/_react.default.createElement(PluginsComponent, {
+  return wrapper ? /*#__PURE__*/React.createElement(PluginsComponent, {
     type: type,
     params: params,
     fn: fn
   }, content) : content;
 };
-var _default = exports.default = [_image.default];
+export default [imagePlugin];
 
 //# sourceMappingURL=index.js.map

package/plugins/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_warning","_plugins","_image","PluginComponent","props","children","PluginsComponent","renderPlugin","exports","name","params","arguments","length","undefined","options","_options$wrapper","wrapper","_options$fn","fn","plugin","plugins","byName","warning","concat","content","default","createElement","key","React","cloneElement","renderPlugins","type","_options$wrapper2","_options$fn2","_options$filter","filter","v","reverse","byType","pl","map","Boolean","_default","imagePlugin"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport warning from \"warning\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugin } from \"@webiny/plugins/types\";\nimport imagePlugin from \"./image\";\n\nexport { imagePlugin };\n\ntype RenderPluginOptions<T> = {\n    wrapper?: boolean;\n    fn?: string;\n    filter?: (value: T, index: number, array: T[]) => boolean;\n    reverse?: boolean;\n};\n\ninterface RenderPlugin {\n    <T extends Plugin = Plugin>(name: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface RenderPlugins {\n    <T extends Plugin = Plugin>(type: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface PluginComponentProps {\n    name: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginComponent = (props: PluginComponentProps) => {\n    return props.children as React.ReactElement;\n};\ninterface PluginsComponentProps {\n    type: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginsComponent = (props: PluginsComponentProps) => {\n    return props.children as React.ReactElement;\n};\n\nexport const renderPlugin: RenderPlugin = (name, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\" } = options;\n\n    const plugin = plugins.byName(name);\n    warning(plugin, `No such plugin \"${name}\"`);\n\n    if (!plugin) {\n        return null;\n    }\n\n    const content = plugin[fn](params);\n    if (content) {\n        return wrapper ? (\n            <PluginComponent key={plugin.name} name={name} params={params} fn={fn}>\n                {content}\n            </PluginComponent>\n        ) : (\n            React.cloneElement(content, { key: plugin.name })\n        );\n    }\n    return null;\n};\n\nexport const renderPlugins: RenderPlugins = (type, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\", filter = v => v, reverse } = options;\n\n    const content = plugins\n        .byType(type)\n        .filter(pl => {\n            /**\n             * TODO @ts-refactor Problem with possibility of a different subtype.\n             */\n            // @ts-expect-error\n            return filter(pl);\n        })\n        /**\n         * We cast as string because renderPlugin checks for the plugin.name\n         */\n        .map(plugin => renderPlugin(plugin.name as string, params, { wrapper, fn }))\n        .filter(Boolean);\n\n    if (reverse) {\n        content.reverse();\n    }\n\n    return wrapper ? (\n        <PluginsComponent type={type} params={params} fn={fn}>\n            {content}\n        </PluginsComponent>\n    ) : (\n        content\n    );\n};\n\nexport default [imagePlugin];\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AA6BA,IAAMI,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAK;EACrD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAOD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIF,KAA4B,EAAK;EACvD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAEM,IAAME,YAA0B,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAA7BA,YAA0BA,CAAIE,IAAI,EAAgC;EAAA,IAA9BC,MAAM,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAAA,IAAEG,OAAO,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EACtE,IAAAI,gBAAA,GAA0CD,OAAO,CAAzCE,OAAO;IAAPA,OAAO,GAAAD,gBAAA,cAAG,IAAI,GAAAA,gBAAA;IAAAE,WAAA,GAAoBH,OAAO,CAAzBI,EAAE;IAAFA,EAAE,GAAAD,WAAA,cAAG,QAAQ,GAAAA,WAAA;EAErC,IAAME,MAAM,GAAGC,gBAAO,CAACC,MAAM,CAACZ,IAAI,CAAC;EACnC,IAAAa,gBAAO,EAACH,MAAM,sBAAAI,MAAA,CAAqBd,IAAI,OAAG,CAAC;EAE3C,IAAI,CAACU,MAAM,EAAE;IACT,OAAO,IAAI;EACf;EAEA,IAAMK,OAAO,GAAGL,MAAM,CAACD,EAAE,CAAC,CAACR,MAAM,CAAC;EAClC,IAAIc,OAAO,EAAE;IACT,OAAOR,OAAO,gBACVnB,MAAA,CAAA4B,OAAA,CAAAC,aAAA,CAACvB,eAAe;MAACwB,GAAG,EAAER,MAAM,CAACV,IAAK;MAACA,IAAI,EAAEA,IAAK;MAACC,MAAM,EAAEA,MAAO;MAACQ,EAAE,EAAEA;IAAG,GACjEM,OACY,CAAC,iBAElBI,cAAK,CAACC,YAAY,CAACL,OAAO,EAAE;MAAEG,GAAG,EAAER,MAAM,CAACV;IAAK,CAAC,CAAC,CACpD;EACL;EACA,OAAO,IAAI;AACf,CAAC;AAEM,IAAMqB,aAA4B,GAAAtB,OAAA,CAAAsB,aAAA,GAAG,SAA/BA,aAA4BA,CAAIC,IAAI,EAAgC;EAAA,IAA9BrB,MAAM,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAAA,IAAEG,OAAO,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EACxE,IAAAqB,iBAAA,GAAoElB,OAAO,CAAnEE,OAAO;IAAPA,OAAO,GAAAgB,iBAAA,cAAG,IAAI,GAAAA,iBAAA;IAAAC,YAAA,GAA8CnB,OAAO,CAAnDI,EAAE;IAAFA,EAAE,GAAAe,YAAA,cAAG,QAAQ,GAAAA,YAAA;IAAAC,eAAA,GAA+BpB,OAAO,CAApCqB,MAAM;IAANA,MAAM,GAAAD,eAAA,cAAG,UAAAE,CAAC;MAAA,OAAIA,CAAC;IAAA,IAAAF,eAAA;IAAEG,OAAO,GAAKvB,OAAO,CAAnBuB,OAAO;EAE/D,IAAMb,OAAO,GAAGJ,gBAAO,CAClBkB,MAAM,CAACP,IAAI,CAAC,CACZI,MAAM,CAAC,UAAAI,EAAE,EAAI;IACV;AACZ;AACA;IACY;IACA,OAAOJ,MAAM,CAACI,EAAE,CAAC;EACrB,CAAC;EACD;AACR;AACA,KAFQ,CAGCC,GAAG,CAAC,UAAArB,MAAM;IAAA,OAAIZ,YAAY,CAACY,MAAM,CAACV,IAAI,EAAYC,MAAM,EAAE;MAAEM,OAAO,EAAPA,OAAO;MAAEE,EAAE,EAAFA;IAAG,CAAC,CAAC;EAAA,EAAC,CAC3EiB,MAAM,CAACM,OAAO,CAAC;EAEpB,IAAIJ,OAAO,EAAE;IACTb,OAAO,CAACa,OAAO,CAAC,CAAC;EACrB;EAEA,OAAOrB,OAAO,gBACVnB,MAAA,CAAA4B,OAAA,CAAAC,aAAA,CAACpB,gBAAgB;IAACyB,IAAI,EAAEA,IAAK;IAACrB,MAAM,EAAEA,MAAO;IAACQ,EAAE,EAAEA;EAAG,GAChDM,OACa,CAAC,GAEnBA,OACH;AACL,CAAC;AAAC,IAAAkB,QAAA,GAAAlC,OAAA,CAAAiB,OAAA,GAEa,CAACkB,cAAW,CAAC","ignoreList":[]}
+{"version":3,"names":["React","warning","plugins","imagePlugin","PluginComponent","props","children","PluginsComponent","renderPlugin","name","params","options","wrapper","fn","plugin","byName","content","createElement","key","cloneElement","renderPlugins","type","filter","v","reverse","byType","pl","map","Boolean"],"sources":["index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\nimport warning from \"warning\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { Plugin } from \"@webiny/plugins/types\";\nimport imagePlugin from \"./image\";\n\nexport { imagePlugin };\n\ntype RenderPluginOptions<T> = {\n    wrapper?: boolean;\n    fn?: string;\n    filter?: (value: T, index: number, array: T[]) => boolean;\n    reverse?: boolean;\n};\n\ninterface RenderPlugin {\n    <T extends Plugin = Plugin>(name: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface RenderPlugins {\n    <T extends Plugin = Plugin>(type: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface PluginComponentProps {\n    name: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginComponent = (props: PluginComponentProps) => {\n    return props.children as React.ReactElement;\n};\ninterface PluginsComponentProps {\n    type: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginsComponent = (props: PluginsComponentProps) => {\n    return props.children as React.ReactElement;\n};\n\nexport const renderPlugin: RenderPlugin = (name, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\" } = options;\n\n    const plugin = plugins.byName(name);\n    warning(plugin, `No such plugin \"${name}\"`);\n\n    if (!plugin) {\n        return null;\n    }\n\n    const content = plugin[fn](params);\n    if (content) {\n        return wrapper ? (\n            <PluginComponent key={plugin.name} name={name} params={params} fn={fn}>\n                {content}\n            </PluginComponent>\n        ) : (\n            React.cloneElement(content, { key: plugin.name })\n        );\n    }\n    return null;\n};\n\nexport const renderPlugins: RenderPlugins = (type, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\", filter = v => v, reverse } = options;\n\n    const content = plugins\n        .byType(type)\n        .filter(pl => {\n            /**\n             * TODO @ts-refactor Problem with possibility of a different subtype.\n             */\n            // @ts-expect-error\n            return filter(pl);\n        })\n        /**\n         * We cast as string because renderPlugin checks for the plugin.name\n         */\n        .map(plugin => renderPlugin(plugin.name as string, params, { wrapper, fn }))\n        .filter(Boolean);\n\n    if (reverse) {\n        content.reverse();\n    }\n\n    return wrapper ? (\n        <PluginsComponent type={type} params={params} fn={fn}>\n            {content}\n        </PluginsComponent>\n    ) : (\n        content\n    );\n};\n\nexport default [imagePlugin];\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,SAAS;AAC7B,SAASC,OAAO,QAAQ,iBAAiB;AAEzC,OAAOC,WAAW;AAElB,SAASA,WAAW;AA2BpB,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EACrD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAOD,MAAMC,gBAAgB,GAAIF,KAA4B,IAAK;EACvD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAED,OAAO,MAAME,YAA0B,GAAGA,CAACC,IAAI,EAAEC,MAAM,GAAG,CAAC,CAAC,EAAEC,OAAO,GAAG,CAAC,CAAC,KAAK;EAC3E,MAAM;IAAEC,OAAO,GAAG,IAAI;IAAEC,EAAE,GAAG;EAAS,CAAC,GAAGF,OAAO;EAEjD,MAAMG,MAAM,GAAGZ,OAAO,CAACa,MAAM,CAACN,IAAI,CAAC;EACnCR,OAAO,CAACa,MAAM,EAAE,mBAAmBL,IAAI,GAAG,CAAC;EAE3C,IAAI,CAACK,MAAM,EAAE;IACT,OAAO,IAAI;EACf;EAEA,MAAME,OAAO,GAAGF,MAAM,CAACD,EAAE,CAAC,CAACH,MAAM,CAAC;EAClC,IAAIM,OAAO,EAAE;IACT,OAAOJ,OAAO,gBACVZ,KAAA,CAAAiB,aAAA,CAACb,eAAe;MAACc,GAAG,EAAEJ,MAAM,CAACL,IAAK;MAACA,IAAI,EAAEA,IAAK;MAACC,MAAM,EAAEA,MAAO;MAACG,EAAE,EAAEA;IAAG,GACjEG,OACY,CAAC,iBAElBhB,KAAK,CAACmB,YAAY,CAACH,OAAO,EAAE;MAAEE,GAAG,EAAEJ,MAAM,CAACL;IAAK,CAAC,CAAC,CACpD;EACL;EACA,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAMW,aAA4B,GAAGA,CAACC,IAAI,EAAEX,MAAM,GAAG,CAAC,CAAC,EAAEC,OAAO,GAAG,CAAC,CAAC,KAAK;EAC7E,MAAM;IAAEC,OAAO,GAAG,IAAI;IAAEC,EAAE,GAAG,QAAQ;IAAES,MAAM,GAAGC,CAAC,IAAIA,CAAC;IAAEC;EAAQ,CAAC,GAAGb,OAAO;EAE3E,MAAMK,OAAO,GAAGd,OAAO,CAClBuB,MAAM,CAACJ,IAAI,CAAC,CACZC,MAAM,CAACI,EAAE,IAAI;IACV;AACZ;AACA;IACY;IACA,OAAOJ,MAAM,CAACI,EAAE,CAAC;EACrB,CAAC;EACD;AACR;AACA,KAFQ,CAGCC,GAAG,CAACb,MAAM,IAAIN,YAAY,CAACM,MAAM,CAACL,IAAI,EAAYC,MAAM,EAAE;IAAEE,OAAO;IAAEC;EAAG,CAAC,CAAC,CAAC,CAC3ES,MAAM,CAACM,OAAO,CAAC;EAEpB,IAAIJ,OAAO,EAAE;IACTR,OAAO,CAACQ,OAAO,CAAC,CAAC;EACrB;EAEA,OAAOZ,OAAO,gBACVZ,KAAA,CAAAiB,aAAA,CAACV,gBAAgB;IAACc,IAAI,EAAEA,IAAK;IAACX,MAAM,EAAEA,MAAO;IAACG,EAAE,EAAEA;EAAG,GAChDG,OACa,CAAC,GAEnBA,OACH;AACL,CAAC;AAED,eAAe,CAACb,WAAW,CAAC","ignoreList":[]}