@webiny/app 5.15.0-beta.0

package/plugins/RoutePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plugins/RoutePlugin.tsx"],"names":["Plugin","RoutePlugin","config","_config","route"],"mappings":";;;;;;AACA,SAASA,MAAT,QAAuB,iBAAvB;AAMA,WAAaC,WAAb;AAAA;;AAAA;;AAII,uBAAYC,MAAZ,EAA6B;AAAA;;AAAA;;AACzB;;AADyB;;AAEzB,UAAKC,OAAL,GAAeD,MAAM,IAAI,EAAzB;AAFyB;AAG5B;;AAPL;AAAA;AAAA,SASI,eAA6B;AACzB,aAAO,KAAKC,OAAL,CAAaC,KAApB;AACH;AAXL;;AAAA;AAAA,EAAiCJ,MAAjC;;gBAAaC,W,UACqB,O","sourcesContent":["import * as React from \"react\";\nimport { Plugin } from \"@webiny/plugins\";\n\ninterface Config {\n    route: React.ReactElement;\n}\n\nexport class RoutePlugin extends Plugin {\n    public static readonly type = \"route\";\n    private _config: Partial<Config>;\n\n    constructor(config?: Config) {\n        super();\n        this._config = config || {};\n    }\n\n    get route(): Config[\"route\"] {\n        return this._config.route;\n    }\n}\n"],"file":"RoutePlugin.js"}

package/plugins/TenantHeaderLinkPlugin.d.ts

@@ -0,0 +1,14 @@
+import { ApolloLinkPlugin } from "./ApolloLinkPlugin";
+declare global {
+    interface Window {
+        __PS_RENDER_TENANT__: string;
+    }
+}
+/**
+ * Append `x-tenant` header from URL query (necessary for prerendering service).
+ */
+export declare class TenantHeaderLinkPlugin extends ApolloLinkPlugin {
+    private tenant;
+    constructor(tenant?: string);
+    createLink(): import("apollo-link").ApolloLink;
+}

package/plugins/TenantHeaderLinkPlugin.js

@@ -0,0 +1,64 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { setContext } from "apollo-link-context";
+import { ApolloLinkPlugin } from "./ApolloLinkPlugin";
+
+/**
+ * Append `x-tenant` header from URL query (necessary for prerendering service).
+ */
+export var TenantHeaderLinkPlugin = /*#__PURE__*/function (_ApolloLinkPlugin) {
+  _inherits(TenantHeaderLinkPlugin, _ApolloLinkPlugin);
+
+  var _super = _createSuper(TenantHeaderLinkPlugin);
+
+  function TenantHeaderLinkPlugin(tenant) {
+    var _this;
+
+    _classCallCheck(this, TenantHeaderLinkPlugin);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "tenant", void 0);
+
+    _this.name = "tenant-header-link";
+
+    if (!tenant) {
+      var query = new URLSearchParams(location.search);
+      tenant = query.get("__tenant") || window.__PS_RENDER_TENANT__;
+    }
+
+    _this.tenant = tenant;
+    return _this;
+  }
+
+  _createClass(TenantHeaderLinkPlugin, [{
+    key: "createLink",
+    value: function createLink() {
+      var _this2 = this;
+
+      return setContext(function (_, _ref) {
+        var headers = _ref.headers;
+
+        if (_this2.tenant) {
+          return {
+            headers: _objectSpread(_objectSpread({}, headers), {}, {
+              "x-tenant": _this2.tenant
+            })
+          };
+        }
+
+        return {
+          headers: headers
+        };
+      });
+    }
+  }]);
+
+  return TenantHeaderLinkPlugin;
+}(ApolloLinkPlugin);
+//# sourceMappingURL=TenantHeaderLinkPlugin.js.map

package/plugins/TenantHeaderLinkPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plugins/TenantHeaderLinkPlugin.ts"],"names":["setContext","ApolloLinkPlugin","TenantHeaderLinkPlugin","tenant","name","query","URLSearchParams","location","search","get","window","__PS_RENDER_TENANT__","_","headers"],"mappings":";;;;;;;AAAA,SAASA,UAAT,QAA2B,qBAA3B;AACA,SAASC,gBAAT;;AAQA;AACA;AACA;AACA,WAAaC,sBAAb;AAAA;;AAAA;;AAGI,kCAAYC,MAAZ,EAA6B;AAAA;;AAAA;;AACzB;;AADyB;;AAEzB,UAAKC,IAAL,GAAY,oBAAZ;;AAEA,QAAI,CAACD,MAAL,EAAa;AACT,UAAME,KAAK,GAAG,IAAIC,eAAJ,CAAoBC,QAAQ,CAACC,MAA7B,CAAd;AACAL,MAAAA,MAAM,GAAGE,KAAK,CAACI,GAAN,CAAU,UAAV,KAAyBC,MAAM,CAACC,oBAAzC;AACH;;AAED,UAAKR,MAAL,GAAcA,MAAd;AATyB;AAU5B;;AAbL;AAAA;AAAA,WAeI,sBAAa;AAAA;;AACT,aAAOH,UAAU,CAAC,UAACY,CAAD,QAAoB;AAAA,YAAdC,OAAc,QAAdA,OAAc;;AAClC,YAAI,MAAI,CAACV,MAAT,EAAiB;AACb,iBAAO;AACHU,YAAAA,OAAO,kCACAA,OADA;AAEH,0BAAY,MAAI,CAACV;AAFd;AADJ,WAAP;AAMH;;AAED,eAAO;AAAEU,UAAAA,OAAO,EAAPA;AAAF,SAAP;AACH,OAXgB,CAAjB;AAYH;AA5BL;;AAAA;AAAA,EAA4CZ,gBAA5C","sourcesContent":["import { setContext } from \"apollo-link-context\";\nimport { ApolloLinkPlugin } from \"./ApolloLinkPlugin\";\n\ndeclare global {\n    interface Window {\n        __PS_RENDER_TENANT__: string;\n    }\n}\n\n/**\n * Append `x-tenant` header from URL query (necessary for prerendering service).\n */\nexport class TenantHeaderLinkPlugin extends ApolloLinkPlugin {\n    private tenant: string;\n\n    constructor(tenant?: string) {\n        super();\n        this.name = \"tenant-header-link\";\n\n        if (!tenant) {\n            const query = new URLSearchParams(location.search);\n            tenant = query.get(\"__tenant\") || window.__PS_RENDER_TENANT__;\n        }\n\n        this.tenant = tenant;\n    }\n\n    createLink() {\n        return setContext((_, { headers }) => {\n            if (this.tenant) {\n                return {\n                    headers: {\n                        ...headers,\n                        \"x-tenant\": this.tenant\n                    }\n                };\n            }\n\n            return { headers };\n        });\n    }\n}\n"],"file":"TenantHeaderLinkPlugin.js"}

package/plugins/ViewPlugin.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Plugin } from "@webiny/plugins";
+interface Config<Props> {
+    name: string;
+    render(props: Props): React.ReactElement | null;
+}
+export declare class ViewPlugin<Props = any> extends Plugin {
+    static readonly type = "view";
+    private _config;
+    constructor(config?: Config<Props>);
+    get key(): string;
+    render(props: Props): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+}
+export {};

package/plugins/ViewPlugin.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { Plugin } from "@webiny/plugins";
+export var ViewPlugin = /*#__PURE__*/function (_Plugin) {
+  _inherits(ViewPlugin, _Plugin);
+
+  var _super = _createSuper(ViewPlugin);
+
+  function ViewPlugin(config) {
+    var _this;
+
+    _classCallCheck(this, ViewPlugin);
+
+    _this = _super.call(this);
+
+    _defineProperty(_assertThisInitialized(_this), "_config", void 0);
+
+    _this._config = config || {};
+    return _this;
+  }
+
+  _createClass(ViewPlugin, [{
+    key: "key",
+    get: function get() {
+      return this._config.name;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      return this._config.render(props);
+    }
+  }]);
+
+  return ViewPlugin;
+}(Plugin);
+
+_defineProperty(ViewPlugin, "type", "view");
+//# sourceMappingURL=ViewPlugin.js.map

package/plugins/ViewPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plugins/ViewPlugin.ts"],"names":["Plugin","ViewPlugin","config","_config","name","props","render"],"mappings":";;;;;;AACA,SAASA,MAAT,QAAuB,iBAAvB;AAOA,WAAaC,UAAb;AAAA;;AAAA;;AAII,sBAAYC,MAAZ,EAAoC;AAAA;;AAAA;;AAChC;;AADgC;;AAEhC,UAAKC,OAAL,GAAeD,MAAM,IAAI,EAAzB;AAFgC;AAGnC;;AAPL;AAAA;AAAA,SASI,eAAU;AACN,aAAO,KAAKC,OAAL,CAAaC,IAApB;AACH;AAXL;AAAA;AAAA,WAaI,gBAAOC,KAAP,EAAqB;AACjB,aAAO,KAAKF,OAAL,CAAaG,MAAb,CAAoBD,KAApB,CAAP;AACH;AAfL;;AAAA;AAAA,EAA6CL,MAA7C;;gBAAaC,U,UACqB,M","sourcesContent":["import * as React from \"react\";\nimport { Plugin } from \"@webiny/plugins\";\n\ninterface Config<Props> {\n    name: string;\n    render(props: Props): React.ReactElement | null;\n}\n\nexport class ViewPlugin<Props = any> extends Plugin {\n    public static readonly type = \"view\";\n    private _config: Partial<Config<Props>>;\n\n    constructor(config?: Config<Props>) {\n        super();\n        this._config = config || {};\n    }\n\n    get key() {\n        return this._config.name;\n    }\n\n    render(props: Props) {\n        return this._config.render(props);\n    }\n}\n"],"file":"ViewPlugin.js"}

package/plugins/image.d.ts

@@ -0,0 +1,3 @@
+import { ImageComponentPlugin } from "../types";
+declare const _default: () => ImageComponentPlugin;
+export default _default;

package/plugins/image.js

@@ -0,0 +1,166 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["transform", "srcSet"];
+import React from "react";
+import { Image } from "@webiny/ui/Image";
+var 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;
+
+  while (i >= 0) {
+    if (width === SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {
+      output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
+      break;
+    }
+
+    if (width > SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {
+      // Use next larger width. If there isn't any, use current.
+      output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i + 1];
+
+      if (!output) {
+        output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
+      }
+
+      break;
+    }
+
+    i--;
+  }
+
+  return output;
+};
+/**
+ * Currently we only allow "width" as a transform option.
+ * @param args
+ */
+
+
+var sanitizeTransformArgs = function sanitizeTransformArgs(args) {
+  var output = {};
+
+  if (args) {
+    var width = parseInt(args.width);
+
+    if (width > 0) {
+      output.width = getSupportedImageResizeWidth(width);
+    }
+  }
+
+  return output;
+};
+
+var getSizes = function getSizes(width) {
+  // Check if width was set as percentage, with "%" in the value.
+  if (typeof width === "string" && width.endsWith("%")) {
+    return "".concat(parseInt(width), "vw");
+  } // Check if width was set as viewport width, with "vw" in the value.
+
+
+  if (typeof width === "string" && width.endsWith("vw")) {
+    return "".concat(parseInt(width), "vw");
+  } // Check if width was set as relative, with "em" in the value.
+
+
+  if (typeof width === "string" && width.endsWith("em")) {
+    return "".concat(parseInt(width), "em");
+  }
+
+  return null;
+};
+
+var isFixedImageWidth = function isFixedImageWidth(width) {
+  if (Number.isFinite(width)) {
+    return true;
+  }
+
+  if (typeof width === "string" && width.endsWith("px")) {
+    return true;
+  }
+
+  return false;
+};
+
+var getSrcSetAutoSizes = function getSrcSetAutoSizes(max) {
+  max = isFixedImageWidth(max) ? parseInt("" + max) : 2500;
+  var maxWidth = getSupportedImageResizeWidth(max);
+  return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter(function (supportedWidth) {
+    return supportedWidth <= maxWidth;
+  });
+};
+
+var convertTransformToQueryParams = function convertTransformToQueryParams(transform) {
+  return Object.keys(transform).map(function (key) {
+    return "".concat(key, "=").concat(transform[key]);
+  }).join("&");
+};
+
+export default (function () {
+  var imagePlugin = {
+    name: "image-component",
+    type: "image-component",
+    presets: {
+      avatar: {
+        width: 300
+      }
+    },
+    getImageSrc: function getImageSrc(props) {
+      if (!props) {
+        return "";
+      }
+
+      var src = props.src,
+          transform = props.transform;
+
+      if (!transform) {
+        return src;
+      }
+
+      if (!src || src.startsWith("data:") || src.endsWith("svg")) {
+        return src;
+      }
+
+      var params = sanitizeTransformArgs(transform);
+      params = convertTransformToQueryParams(params);
+      return src + "?" + params;
+    },
+    render: function render(props) {
+      var transform = props.transform,
+          srcSetInitial = props.srcSet,
+          imageProps = _objectWithoutProperties(props, _excluded);
+
+      var srcSet = srcSetInitial;
+      var sizes;
+      var 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) {
+          srcSet[width + "w"] = imagePlugin.getImageSrc({
+            src: src,
+            transform: _objectSpread(_objectSpread({}, transform), {}, {
+              width: width
+            })
+          });
+        });
+        sizes = getSizes(forcedWidth);
+      }
+
+      return /*#__PURE__*/React.createElement(Image, Object.assign({}, imageProps, {
+        srcSet: srcSet,
+        src: src,
+        sizes: sizes
+      }));
+    }
+  };
+  return imagePlugin;
+});
+//# sourceMappingURL=image.js.map

package/plugins/image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plugins/image.tsx"],"names":["React","Image","SUPPORTED_IMAGE_RESIZE_WIDTHS","getSupportedImageResizeWidth","width","output","i","length","sanitizeTransformArgs","args","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","params","render","srcSetInitial","srcSet","imageProps","sizes","forcedWidth","style","srcSetAutoWidths","forEach"],"mappings":"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","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 => {\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\n/**\n * Currently we only allow \"width\" as a transform option.\n * @param args\n */\nconst sanitizeTransformArgs = (args: { [key: string]: any }): Object => {\n    const output: { [key: string]: any } = {};\n    if (args) {\n        const width = parseInt(args.width);\n        if (width > 0) {\n            output.width = getSupportedImageResizeWidth(width);\n        }\n    }\n\n    return output;\n};\n\nconst getSizes = (width: any): string | null => {\n    // Check if width was set as percentage, with \"%\" in the value.\n    if (typeof width === \"string\" && width.endsWith(\"%\")) {\n        return `${parseInt(width)}vw`;\n    }\n    // Check if width was set as viewport width, with \"vw\" in the value.\n    if (typeof width === \"string\" && 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 (typeof width === \"string\" && width.endsWith(\"em\")) {\n        return `${parseInt(width)}em`;\n    }\n\n    return null;\n};\n\nconst isFixedImageWidth = width => {\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: number | undefined) => {\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: Object): 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: { [key: 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            let params = sanitizeTransformArgs(transform);\n            params = convertTransformToQueryParams(params);\n            return src + \"?\" + params;\n        },\n        render(props: { [key: string]: any }) {\n            const { transform, srcSet: srcSetInitial, ...imageProps } = props;\n            let srcSet = srcSetInitial;\n            let sizes;\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"],"file":"image.js"}

package/plugins/index.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { Plugin } from "@webiny/plugins/types";
+import imagePlugin from "./image";
+export { imagePlugin };
+declare type RenderPluginOptions<T> = {
+    wrapper?: boolean;
+    fn?: string;
+    filter?: (value: T, index: number, array: T[]) => boolean;
+    reverse?: boolean;
+};
+interface RenderPlugin {
+    <T extends Plugin = Plugin>(name: string, params?: any, options?: RenderPluginOptions<T>): ReactNode | ReactNode[];
+}
+interface RenderPlugins {
+    <T extends Plugin = Plugin>(type: string, params?: any, options?: RenderPluginOptions<T>): ReactNode | ReactNode[];
+}
+export declare const renderPlugin: RenderPlugin;
+export declare const renderPlugins: RenderPlugins;
+declare const _default: (() => import("../types").ImageComponentPlugin)[];
+export default _default;

package/plugins/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import warning from "warning";
+import { plugins } from "@webiny/plugins";
+import imagePlugin from "./image";
+export { imagePlugin };
+
+var PluginComponent = function PluginComponent(props) {
+  return props.children;
+};
+
+var PluginsComponent = function PluginsComponent(props) {
+  return props.children;
+};
+
+export var 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.byName(name);
+  warning(plugin, "No such plugin \"".concat(name, "\""));
+
+  if (!plugin) {
+    return null;
+  }
+
+  var content = plugin[fn](params);
+
+  if (content) {
+    return wrapper ? /*#__PURE__*/React.createElement(PluginComponent, {
+      key: plugin.name,
+      name: name,
+      params: params,
+      fn: fn
+    }, content) : /*#__PURE__*/React.cloneElement(content, {
+      key: plugin.name
+    });
+  }
+
+  return null;
+};
+export var 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.byType(type).filter(filter).map(function (plugin) {
+    return renderPlugin(plugin.name, params, {
+      wrapper: wrapper,
+      fn: fn
+    });
+  }).filter(Boolean);
+
+  if (reverse) {
+    content.reverse();
+  }
+
+  return wrapper ? /*#__PURE__*/React.createElement(PluginsComponent, {
+    type: type,
+    params: params,
+    fn: fn
+  }, content) : content;
+};
+export default [imagePlugin];
+//# sourceMappingURL=index.js.map

package/plugins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plugins/index.tsx"],"names":["React","warning","plugins","imagePlugin","PluginComponent","props","children","PluginsComponent","renderPlugin","name","params","options","wrapper","fn","plugin","byName","content","cloneElement","key","renderPlugins","type","filter","v","reverse","byType","map","Boolean"],"mappings":"AAAA,OAAOA,KAAP,MAA2D,OAA3D;AACA,OAAOC,OAAP,MAAoB,SAApB;AACA,SAASC,OAAT,QAAwB,iBAAxB;AAEA,OAAOC,WAAP;AAEA,SAASA,WAAT;;AAqBA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SACpBA,KAAK,CAACC,QADc;AAAA,CAAxB;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACF,KAAD;AAAA,SACrBA,KAAK,CAACC,QADe;AAAA,CAAzB;;AAGA,OAAO,IAAME,YAA0B,GAAG,SAA7BA,YAA6B,CAACC,IAAD,EAAqC;AAAA,MAA9BC,MAA8B,uEAArB,EAAqB;AAAA,MAAjBC,OAAiB,uEAAP,EAAO;AAC3E,yBAA0CA,OAA1C,CAAQC,OAAR;AAAA,MAAQA,OAAR,iCAAkB,IAAlB;AAAA,oBAA0CD,OAA1C,CAAwBE,EAAxB;AAAA,MAAwBA,EAAxB,4BAA6B,QAA7B;AAEA,MAAMC,MAAM,GAAGZ,OAAO,CAACa,MAAR,CAAeN,IAAf,CAAf;AACAR,EAAAA,OAAO,CAACa,MAAD,6BAA4BL,IAA5B,QAAP;;AAEA,MAAI,CAACK,MAAL,EAAa;AACT,WAAO,IAAP;AACH;;AAED,MAAME,OAAO,GAAGF,MAAM,CAACD,EAAD,CAAN,CAAWH,MAAX,CAAhB;;AACA,MAAIM,OAAJ,EAAa;AACT,WAAOJ,OAAO,gBACV,oBAAC,eAAD;AAAiB,MAAA,GAAG,EAAEE,MAAM,CAACL,IAA7B;AAAmC,MAAA,IAAI,EAAEA,IAAzC;AAA+C,MAAA,MAAM,EAAEC,MAAvD;AAA+D,MAAA,EAAE,EAAEG;AAAnE,OACKG,OADL,CADU,gBAKVhB,KAAK,CAACiB,YAAN,CAAmBD,OAAnB,EAA4B;AAAEE,MAAAA,GAAG,EAAEJ,MAAM,CAACL;AAAd,KAA5B,CALJ;AAOH;;AACD,SAAO,IAAP;AACH,CArBM;AAuBP,OAAO,IAAMU,aAA4B,GAAG,SAA/BA,aAA+B,CAACC,IAAD,EAAqC;AAAA,MAA9BV,MAA8B,uEAArB,EAAqB;AAAA,MAAjBC,OAAiB,uEAAP,EAAO;AAC7E,0BAAoEA,OAApE,CAAQC,OAAR;AAAA,MAAQA,OAAR,kCAAkB,IAAlB;AAAA,qBAAoED,OAApE,CAAwBE,EAAxB;AAAA,MAAwBA,EAAxB,6BAA6B,QAA7B;AAAA,wBAAoEF,OAApE,CAAuCU,MAAvC;AAAA,MAAuCA,MAAvC,gCAAgD,UAAAC,CAAC;AAAA,WAAIA,CAAJ;AAAA,GAAjD;AAAA,MAAwDC,OAAxD,GAAoEZ,OAApE,CAAwDY,OAAxD;AAEA,MAAMP,OAAO,GAAGd,OAAO,CAClBsB,MADW,CACJJ,IADI,EAEXC,MAFW,CAEJA,MAFI,EAGXI,GAHW,CAGP,UAAAX,MAAM;AAAA,WAAIN,YAAY,CAACM,MAAM,CAACL,IAAR,EAAcC,MAAd,EAAsB;AAAEE,MAAAA,OAAO,EAAPA,OAAF;AAAWC,MAAAA,EAAE,EAAFA;AAAX,KAAtB,CAAhB;AAAA,GAHC,EAIXQ,MAJW,CAIJK,OAJI,CAAhB;;AAMA,MAAIH,OAAJ,EAAa;AACTP,IAAAA,OAAO,CAACO,OAAR;AACH;;AAED,SAAOX,OAAO,gBACV,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAEQ,IAAxB;AAA8B,IAAA,MAAM,EAAEV,MAAtC;AAA8C,IAAA,EAAE,EAAEG;AAAlD,KACKG,OADL,CADU,GAKVA,OALJ;AAOH,CApBM;AAsBP,eAAe,CAACb,WAAD,CAAf","sourcesContent":["import React, { ReactNode, FunctionComponentElement } 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\nconst PluginComponent = (props: { [key: string]: any }): FunctionComponentElement<{}> =>\n    props.children;\nconst PluginsComponent = (props: { [key: string]: any }): FunctionComponentElement<{}> =>\n    props.children;\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(filter)\n        .map(plugin => renderPlugin(plugin.name, 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"],"file":"index.js"}

package/types.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Plugin } from "@webiny/plugins/types";
+import { ApolloClient } from "apollo-client";
+import { CSSProperties } from "react";
+export declare type WebinyInitPlugin = Plugin & {
+    type: "webiny-init";
+    init(): void;
+};
+export declare type UploadOptions = {
+    apolloClient: ApolloClient<object>;
+};
+export declare type UiStatePlugin = Plugin & {
+    type: "ui-state";
+    render(): React.ReactElement;
+};
+export declare type FileUploaderPlugin = Plugin & {
+    type: "file-uploader";
+    upload(file: File, options: UploadOptions): Promise<any>;
+};
+export declare type AppFileManagerStoragePlugin = Plugin & {
+    type: "app-file-manager-storage";
+    upload(file: File, options: UploadOptions): Promise<any>;
+};
+export { Plugin };
+export declare type ImageProps = {
+    src: string;
+    preset?: string;
+    transform?: {
+        [key: string]: any;
+    };
+    srcSet?: {
+        [key: string]: any;
+    } | "auto";
+    className?: string;
+    title?: string;
+    alt?: string;
+    style?: CSSProperties;
+};
+/**
+ * "getImageSrc" has to be defined as a separate property, so its functionality can be reused outside of
+ * the Image component. This is ideal in cases where manual creation of image src is needed.
+ */
+export declare type ImageComponentPlugin = Plugin & {
+    type: "image-component";
+    render: (props: ImageProps) => React.ReactElement;
+    getImageSrc: (props?: Object) => string;
+    presets: {
+        [key: string]: any;
+    };
+};
+/**
+ * Enables registering new routes.
+ * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#route
+ */
+export declare type RoutePlugin = Plugin & {
+    type: "route";
+    route: React.ReactElement;
+};
+export declare type CacheGetObjectIdPlugin = Plugin & {
+    type: "cache-get-object-id";
+    getObjectId(obj: Record<string, any>): string | undefined;
+};