@webiny/app 5.34.8 → 5.35.0-beta.0

package/plugins/image.js

@@ -1,109 +1,84 @@
 "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];
+
 /**
  * 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 || args.width === undefined || args.width === null) {
     return output;
   }
-
   var width = parseInt(args.width);
-
   if (width > 0) {
     output.width = getSupportedImageResizeWidth(width);
   }
-
   return output;
 };
-
 var getSizes = function getSizes(width) {
   if (typeof width !== "string") {
     return undefined;
-  } // Check if width was set as percentage, with "%" in the value.
-
-
+  }
+  // Check if width was set as percentage, with "%" in the value.
   if (width.endsWith("%")) {
     return "".concat(parseInt(width), "vw");
-  } // Check if width was set as viewport width, with "vw" in the value.
-
-
+  }
+  // Check if width was set as viewport width, with "vw" in the value.
   if (width.endsWith("vw")) {
     return "".concat(parseInt(width), "vw");
-  } // Check if width was set as relative, with "em" in the value.
-
+  }
 
+  // Check if width was set as relative, with "em" in the value.
   if (width.endsWith("em")) {
     return "".concat(parseInt(width), "em");
   }
-
   return undefined;
 };
-
 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);
@@ -111,13 +86,11 @@ var getSrcSetAutoSizes = function getSrcSetAutoSizes(max) {
     return supportedWidth <= maxWidth;
   });
 };
-
 var convertTransformToQueryParams = function convertTransformToQueryParams(transform) {
   return Object.keys(transform).map(function (key) {
     return "".concat(key, "=").concat(transform[key]);
   }).join("&");
 };
-
 var _default = function _default() {
   var imagePlugin = {
     name: "image-component",
@@ -131,33 +104,29 @@ var _default = function _default() {
       if (!props) {
         return "";
       }
-
       var src = props.src,
-          transform = props.transform;
-
+        transform = props.transform;
       if (!transform) {
         return src;
       }
-
       if (!src || src.startsWith("data:") || src.endsWith("svg")) {
         return src;
       }
-
       var sanitizedParams = sanitizeTransformArgs(transform);
       var params = convertTransformToQueryParams(sanitizedParams);
       return src + "?" + params;
     },
     render: function render(props) {
       var transform = props.transform,
-          srcSetInitial = props.srcSet,
-          imageProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+        srcSetInitial = props.srcSet,
+        imageProps = (0, _objectWithoutProperties2.default)(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.
+        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) {
@@ -170,7 +139,6 @@ var _default = function _default() {
         });
         sizes = getSizes(forcedWidth);
       }
-
       return /*#__PURE__*/_react.default.createElement(_Image.Image, Object.assign({}, imageProps, {
         srcSet: srcSet,
         src: src,
@@ -180,5 +148,4 @@ var _default = function _default() {
   };
   return imagePlugin;
 };
-
 exports.default = _default;

package/plugins/image.js.map

@@ -1 +1 @@
-{"version":3,"names":["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","srcSetInitial","srcSet","imageProps","sizes","forcedWidth","style","srcSetAutoWidths","forEach"],"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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"}
+{"version":3,"names":["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","srcSetInitial","srcSet","imageProps","sizes","forcedWidth","style","srcSetAutoWidths","forEach"],"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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"}

package/plugins/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,41 +12,29 @@ Object.defineProperty(exports, "imagePlugin", {
   }
 });
 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) {
   return props.children;
 };
-
 var PluginsComponent = function PluginsComponent(props) {
   return props.children;
 };
-
 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;
-
+    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, "\""));
-
   if (!plugin) {
     return null;
   }
-
   var content = plugin[fn](params);
-
   if (content) {
     return wrapper ? /*#__PURE__*/_react.default.createElement(PluginComponent, {
       key: plugin.name,
@@ -58,25 +45,21 @@ var renderPlugin = function renderPlugin(name) {
       key: plugin.name
     });
   }
-
   return null;
 };
-
 exports.renderPlugin = renderPlugin;
-
 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;
-
+    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) {
     /**
      * TODO @ts-refactor Problem with possibility of a different subtype.
@@ -86,25 +69,21 @@ var renderPlugins = function renderPlugins(type) {
   })
   /**
    * We cast as string because renderPlugin checks for the plugin.name
-   */
-  .map(function (plugin) {
+   */.map(function (plugin) {
     return renderPlugin(plugin.name, params, {
       wrapper: wrapper,
       fn: fn
     });
   }).filter(Boolean);
-
   if (reverse) {
     content.reverse();
   }
-
   return wrapper ? /*#__PURE__*/_react.default.createElement(PluginsComponent, {
     type: type,
     params: params,
     fn: fn
   }, content) : content;
 };
-
 exports.renderPlugins = renderPlugins;
 var _default = [_image.default];
 exports.default = _default;

package/plugins/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["PluginComponent","props","children","PluginsComponent","renderPlugin","name","params","options","wrapper","fn","plugin","plugins","byName","warning","content","React","cloneElement","key","renderPlugins","type","filter","v","reverse","byType","pl","map","Boolean","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}\nconst PluginComponent: React.FC<PluginComponentProps> = props => {\n    return props.children as React.ReactElement;\n};\ninterface PluginsComponentProps {\n    type: string;\n    params: Record<string, any>;\n    fn: string;\n}\nconst PluginsComponent: React.FC<PluginsComponentProps> = props => {\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-ignore\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;;AACA;;AACA;;AAEA;;AA4BA,IAAMA,eAA+C,GAAG,SAAlDA,eAAkD,CAAAC,KAAK,EAAI;EAC7D,OAAOA,KAAK,CAACC,QAAb;AACH,CAFD;;AAQA,IAAMC,gBAAiD,GAAG,SAApDA,gBAAoD,CAAAF,KAAK,EAAI;EAC/D,OAAOA,KAAK,CAACC,QAAb;AACH,CAFD;;AAIO,IAAME,YAA0B,GAAG,SAA7BA,YAA6B,CAACC,IAAD,EAAqC;EAAA,IAA9BC,MAA8B,uEAArB,EAAqB;EAAA,IAAjBC,OAAiB,uEAAP,EAAO;EAC3E,uBAA0CA,OAA1C,CAAQC,OAAR;EAAA,IAAQA,OAAR,iCAAkB,IAAlB;EAAA,kBAA0CD,OAA1C,CAAwBE,EAAxB;EAAA,IAAwBA,EAAxB,4BAA6B,QAA7B;;EAEA,IAAMC,MAAM,GAAGC,gBAAA,CAAQC,MAAR,CAAeP,IAAf,CAAf;;EACA,IAAAQ,gBAAA,EAAQH,MAAR,6BAAmCL,IAAnC;;EAEA,IAAI,CAACK,MAAL,EAAa;IACT,OAAO,IAAP;EACH;;EAED,IAAMI,OAAO,GAAGJ,MAAM,CAACD,EAAD,CAAN,CAAWH,MAAX,CAAhB;;EACA,IAAIQ,OAAJ,EAAa;IACT,OAAON,OAAO,gBACV,6BAAC,eAAD;MAAiB,GAAG,EAAEE,MAAM,CAACL,IAA7B;MAAmC,IAAI,EAAEA,IAAzC;MAA+C,MAAM,EAAEC,MAAvD;MAA+D,EAAE,EAAEG;IAAnE,GACKK,OADL,CADU,gBAKVC,cAAA,CAAMC,YAAN,CAAmBF,OAAnB,EAA4B;MAAEG,GAAG,EAAEP,MAAM,CAACL;IAAd,CAA5B,CALJ;EAOH;;EACD,OAAO,IAAP;AACH,CArBM;;;;AAuBA,IAAMa,aAA4B,GAAG,SAA/BA,aAA+B,CAACC,IAAD,EAAqC;EAAA,IAA9Bb,MAA8B,uEAArB,EAAqB;EAAA,IAAjBC,OAAiB,uEAAP,EAAO;EAC7E,wBAAoEA,OAApE,CAAQC,OAAR;EAAA,IAAQA,OAAR,kCAAkB,IAAlB;EAAA,mBAAoED,OAApE,CAAwBE,EAAxB;EAAA,IAAwBA,EAAxB,6BAA6B,QAA7B;EAAA,sBAAoEF,OAApE,CAAuCa,MAAvC;EAAA,IAAuCA,MAAvC,gCAAgD,UAAAC,CAAC;IAAA,OAAIA,CAAJ;EAAA,CAAjD;EAAA,IAAwDC,OAAxD,GAAoEf,OAApE,CAAwDe,OAAxD;;EAEA,IAAMR,OAAO,GAAGH,gBAAA,CACXY,MADW,CACJJ,IADI,EAEXC,MAFW,CAEJ,UAAAI,EAAE,EAAI;IACV;AACZ;AACA;IACY;IACA,OAAOJ,MAAM,CAACI,EAAD,CAAb;EACH,CARW;EASZ;AACR;AACA;EAXoB,CAYXC,GAZW,CAYP,UAAAf,MAAM;IAAA,OAAIN,YAAY,CAACM,MAAM,CAACL,IAAR,EAAwBC,MAAxB,EAAgC;MAAEE,OAAO,EAAPA,OAAF;MAAWC,EAAE,EAAFA;IAAX,CAAhC,CAAhB;EAAA,CAZC,EAaXW,MAbW,CAaJM,OAbI,CAAhB;;EAeA,IAAIJ,OAAJ,EAAa;IACTR,OAAO,CAACQ,OAAR;EACH;;EAED,OAAOd,OAAO,gBACV,6BAAC,gBAAD;IAAkB,IAAI,EAAEW,IAAxB;IAA8B,MAAM,EAAEb,MAAtC;IAA8C,EAAE,EAAEG;EAAlD,GACKK,OADL,CADU,GAKVA,OALJ;AAOH,CA7BM;;;eA+BQ,CAACa,cAAD,C"}
+{"version":3,"names":["PluginComponent","props","children","PluginsComponent","renderPlugin","name","params","options","wrapper","fn","plugin","plugins","byName","warning","content","React","cloneElement","key","renderPlugins","type","filter","v","reverse","byType","pl","map","Boolean","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}\nconst PluginComponent: React.FC<PluginComponentProps> = props => {\n    return props.children as React.ReactElement;\n};\ninterface PluginsComponentProps {\n    type: string;\n    params: Record<string, any>;\n    fn: string;\n}\nconst PluginsComponent: React.FC<PluginsComponentProps> = props => {\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-ignore\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;AACA;AACA;AAEA;AA4BA,IAAMA,eAA+C,GAAG,SAAlDA,eAA+C,CAAGC,KAAK,EAAI;EAC7D,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAMD,IAAMC,gBAAiD,GAAG,SAApDA,gBAAiD,CAAGF,KAAK,EAAI;EAC/D,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAEM,IAAME,YAA0B,GAAG,SAA7BA,YAA0B,CAAIC,IAAI,EAAgC;EAAA,IAA9BC,MAAM,uEAAG,CAAC,CAAC;EAAA,IAAEC,OAAO,uEAAG,CAAC,CAAC;EACtE,uBAA0CA,OAAO,CAAzCC,OAAO;IAAPA,OAAO,iCAAG,IAAI;IAAA,cAAoBD,OAAO,CAAzBE,EAAE;IAAFA,EAAE,4BAAG,QAAQ;EAErC,IAAMC,MAAM,GAAGC,gBAAO,CAACC,MAAM,CAACP,IAAI,CAAC;EACnC,IAAAQ,gBAAO,EAACH,MAAM,6BAAqBL,IAAI,QAAI;EAE3C,IAAI,CAACK,MAAM,EAAE;IACT,OAAO,IAAI;EACf;EAEA,IAAMI,OAAO,GAAGJ,MAAM,CAACD,EAAE,CAAC,CAACH,MAAM,CAAC;EAClC,IAAIQ,OAAO,EAAE;IACT,OAAON,OAAO,gBACV,6BAAC,eAAe;MAAC,GAAG,EAAEE,MAAM,CAACL,IAAK;MAAC,IAAI,EAAEA,IAAK;MAAC,MAAM,EAAEC,MAAO;MAAC,EAAE,EAAEG;IAAG,GACjEK,OAAO,CACM,gBAElBC,cAAK,CAACC,YAAY,CAACF,OAAO,EAAE;MAAEG,GAAG,EAAEP,MAAM,CAACL;IAAK,CAAC,CACnD;EACL;EACA,OAAO,IAAI;AACf,CAAC;AAAC;AAEK,IAAMa,aAA4B,GAAG,SAA/BA,aAA4B,CAAIC,IAAI,EAAgC;EAAA,IAA9Bb,MAAM,uEAAG,CAAC,CAAC;EAAA,IAAEC,OAAO,uEAAG,CAAC,CAAC;EACxE,wBAAoEA,OAAO,CAAnEC,OAAO;IAAPA,OAAO,kCAAG,IAAI;IAAA,eAA8CD,OAAO,CAAnDE,EAAE;IAAFA,EAAE,6BAAG,QAAQ;IAAA,kBAA+BF,OAAO,CAApCa,MAAM;IAANA,MAAM,gCAAG,UAAAC,CAAC;MAAA,OAAIA,CAAC;IAAA;IAAEC,OAAO,GAAKf,OAAO,CAAnBe,OAAO;EAE/D,IAAMR,OAAO,GAAGH,gBAAO,CAClBY,MAAM,CAACJ,IAAI,CAAC,CACZC,MAAM,CAAC,UAAAI,EAAE,EAAI;IACV;AACZ;AACA;IACY;IACA,OAAOJ,MAAM,CAACI,EAAE,CAAC;EACrB,CAAC;EACD;AACR;AACA,KAFQ,CAGCC,GAAG,CAAC,UAAAf,MAAM;IAAA,OAAIN,YAAY,CAACM,MAAM,CAACL,IAAI,EAAYC,MAAM,EAAE;MAAEE,OAAO,EAAPA,OAAO;MAAEC,EAAE,EAAFA;IAAG,CAAC,CAAC;EAAA,EAAC,CAC3EW,MAAM,CAACM,OAAO,CAAC;EAEpB,IAAIJ,OAAO,EAAE;IACTR,OAAO,CAACQ,OAAO,EAAE;EACrB;EAEA,OAAOd,OAAO,gBACV,6BAAC,gBAAgB;IAAC,IAAI,EAAEW,IAAK;IAAC,MAAM,EAAEb,MAAO;IAAC,EAAE,EAAEG;EAAG,GAChDK,OAAO,CACO,GAEnBA,OACH;AACL,CAAC;AAAC;AAAA,eAEa,CAACa,cAAW,CAAC;AAAA"}

package/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="web" />
 import * as React from "react";
 import { Plugin } from "@webiny/plugins/types";
 import { ApolloClient } from "apollo-client";
@@ -18,6 +19,7 @@ export interface FileItem {
 }
 export declare type UploadOptions = {
     apolloClient: ApolloClient<object>;
+    onProgress?: (progress: number) => void;
 };
 export declare type UiStatePlugin = Plugin & {
     type: "ui-state";
@@ -25,11 +27,11 @@ export declare type UiStatePlugin = Plugin & {
 };
 export declare type FileUploaderPlugin = Plugin & {
     type: "file-uploader";
-    upload(file: FileItem, options: UploadOptions): Promise<any>;
+    upload(file: File, options: UploadOptions): Promise<any>;
 };
 export declare type AppFileManagerStoragePlugin = Plugin & {
     type: "app-file-manager-storage";
-    upload(file: FileItem, options: UploadOptions): Promise<any>;
+    upload(file: File, options: UploadOptions): Promise<any>;
 };
 export { Plugin };
 export interface ImageProps {

package/types.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Plugin", {
     return _types.Plugin;
   }
 });
-
 var _types = require("@webiny/plugins/types");

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Plugin } from \"@webiny/plugins/types\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CSSProperties } from \"react\";\n\nexport interface FileItem {\n    id: string;\n    name: string;\n    key: string;\n    src: string;\n    size: number;\n    type: string;\n    tags: string[];\n    createdOn: string;\n    createdBy: {\n        id: string;\n    };\n    [key: string]: any;\n}\n\nexport type UploadOptions = {\n    apolloClient: ApolloClient<object>;\n};\n\nexport type UiStatePlugin = Plugin & {\n    type: \"ui-state\";\n    render(): React.ReactElement;\n};\n\nexport type FileUploaderPlugin = Plugin & {\n    type: \"file-uploader\";\n    // TODO: @adrian define type for the returned object\n    upload(file: FileItem, options: UploadOptions): Promise<any>;\n};\n\nexport type AppFileManagerStoragePlugin = Plugin & {\n    type: \"app-file-manager-storage\";\n    // TODO: @adrian define type for the returned object\n    upload(file: FileItem, options: UploadOptions): Promise<any>;\n};\n\nexport { Plugin };\n\nexport interface ImageProps {\n    src: string;\n    preset?: string;\n    transform?: {\n        [key: string]: any;\n    };\n    // \"auto\" is a special keyword - if present, plugins insert their own srcSet.\n    srcSet?: { [key: string]: any } | \"auto\";\n    className?: string;\n    title?: string;\n    alt?: string;\n    style?: CSSProperties;\n    width?: string | number;\n    height?: string | number;\n}\n\n/**\n * \"getImageSrc\" has to be defined as a separate property, so its functionality can be reused outside of\n * the Image component. This is ideal in cases where manual creation of image src is needed.\n */\nexport type ImageComponentPlugin = Plugin & {\n    type: \"image-component\";\n    render: (props: ImageProps) => React.ReactElement;\n    getImageSrc: (props?: Record<string, any>) => string;\n    presets: { [key: string]: any };\n};\n\n/**\n * Enables registering new routes.\n * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#route\n */\nexport type RoutePlugin = Plugin & {\n    type: \"route\";\n    route: React.ReactElement;\n};\n"],"mappings":";;;;;;;;;;;;AACA"}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Plugin } from \"@webiny/plugins/types\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CSSProperties } from \"react\";\n\nexport interface FileItem {\n    id: string;\n    name: string;\n    key: string;\n    src: string;\n    size: number;\n    type: string;\n    tags: string[];\n    createdOn: string;\n    createdBy: {\n        id: string;\n    };\n    [key: string]: any;\n}\n\nexport type UploadOptions = {\n    apolloClient: ApolloClient<object>;\n    onProgress?: (progress: number) => void;\n};\n\nexport type UiStatePlugin = Plugin & {\n    type: \"ui-state\";\n    render(): React.ReactElement;\n};\n\nexport type FileUploaderPlugin = Plugin & {\n    type: \"file-uploader\";\n    // TODO: @adrian define type for the returned object\n    upload(file: File, options: UploadOptions): Promise<any>;\n};\n\nexport type AppFileManagerStoragePlugin = Plugin & {\n    type: \"app-file-manager-storage\";\n    // TODO: @adrian define type for the returned object\n    upload(file: File, options: UploadOptions): Promise<any>;\n};\n\nexport { Plugin };\n\nexport interface ImageProps {\n    src: string;\n    preset?: string;\n    transform?: {\n        [key: string]: any;\n    };\n    // \"auto\" is a special keyword - if present, plugins insert their own srcSet.\n    srcSet?: { [key: string]: any } | \"auto\";\n    className?: string;\n    title?: string;\n    alt?: string;\n    style?: CSSProperties;\n    width?: string | number;\n    height?: string | number;\n}\n\n/**\n * \"getImageSrc\" has to be defined as a separate property, so its functionality can be reused outside of\n * the Image component. This is ideal in cases where manual creation of image src is needed.\n */\nexport type ImageComponentPlugin = Plugin & {\n    type: \"image-component\";\n    render: (props: ImageProps) => React.ReactElement;\n    getImageSrc: (props?: Record<string, any>) => string;\n    presets: { [key: string]: any };\n};\n\n/**\n * Enables registering new routes.\n * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#route\n */\nexport type RoutePlugin = Plugin & {\n    type: \"route\";\n    route: React.ReactElement;\n};\n"],"mappings":";;;;;;;;;;;AACA"}

package/utils/getApiUrl.d.ts

@@ -0,0 +1 @@
+export declare const getApiUrl: (path?: string) => string;

package/utils/getApiUrl.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getApiUrl = void 0;
+var getApiUrl = function getApiUrl() {
+  var path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  return process.env.REACT_APP_API_URL + path;
+};
+exports.getApiUrl = getApiUrl;

package/utils/getApiUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getApiUrl","path","process","env","REACT_APP_API_URL"],"sources":["getApiUrl.ts"],"sourcesContent":["export const getApiUrl = (path = \"\"): string => {\n    return process.env.REACT_APP_API_URL + path;\n};\n"],"mappings":";;;;;;AAAO,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAA0B;EAAA,IAAtBC,IAAI,uEAAG,EAAE;EAC/B,OAAOC,OAAO,CAACC,GAAG,CAACC,iBAAiB,GAAGH,IAAI;AAC/C,CAAC;AAAC"}

package/utils/getGqlApiUrl.d.ts

@@ -0,0 +1 @@
+export declare const getGqlApiUrl: () => string;

package/utils/getGqlApiUrl.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGqlApiUrl = void 0;
+var _getApiUrl = require("./getApiUrl");
+var getGqlApiUrl = function getGqlApiUrl() {
+  return (0, _getApiUrl.getApiUrl)("/graphql");
+};
+exports.getGqlApiUrl = getGqlApiUrl;

package/utils/getGqlApiUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getGqlApiUrl","getApiUrl"],"sources":["getGqlApiUrl.ts"],"sourcesContent":["import { getApiUrl } from \"./getApiUrl\";\n\nexport const getGqlApiUrl = (): string => {\n    return getApiUrl(\"/graphql\");\n};\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,YAAY,GAAG,SAAfA,YAAY,GAAiB;EACtC,OAAO,IAAAC,oBAAS,EAAC,UAAU,CAAC;AAChC,CAAC;AAAC"}

package/utils/getHeadlessCmsGqlApiUrl.d.ts

@@ -0,0 +1,5 @@
+export declare const getHeadlessCmsGqlApiUrl: () => {
+    preview: string;
+    read: string;
+    manage: string;
+};

package/utils/getHeadlessCmsGqlApiUrl.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHeadlessCmsGqlApiUrl = void 0;
+var _getApiUrl = require("./getApiUrl");
+var _getLocaleCode = require("./getLocaleCode");
+var getHeadlessCmsGqlApiUrl = function getHeadlessCmsGqlApiUrl() {
+  var locale = (0, _getLocaleCode.getLocaleCode)();
+  return {
+    preview: (0, _getApiUrl.getApiUrl)("/cms/preview/".concat(locale)),
+    read: (0, _getApiUrl.getApiUrl)("/cms/read/".concat(locale)),
+    manage: (0, _getApiUrl.getApiUrl)("/cms/manage/".concat(locale))
+  };
+};
+exports.getHeadlessCmsGqlApiUrl = getHeadlessCmsGqlApiUrl;

package/utils/getHeadlessCmsGqlApiUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getHeadlessCmsGqlApiUrl","locale","getLocaleCode","preview","getApiUrl","read","manage"],"sources":["getHeadlessCmsGqlApiUrl.ts"],"sourcesContent":["import { getApiUrl } from \"./getApiUrl\";\nimport { getLocaleCode } from \"./getLocaleCode\";\n\nexport const getHeadlessCmsGqlApiUrl = (): { preview: string; read: string; manage: string } => {\n    const locale = getLocaleCode();\n    return {\n        preview: getApiUrl(`/cms/preview/${locale}`),\n        read: getApiUrl(`/cms/read/${locale}`),\n        manage: getApiUrl(`/cms/manage/${locale}`)\n    };\n};\n"],"mappings":";;;;;;AAAA;AACA;AAEO,IAAMA,uBAAuB,GAAG,SAA1BA,uBAAuB,GAA4D;EAC5F,IAAMC,MAAM,GAAG,IAAAC,4BAAa,GAAE;EAC9B,OAAO;IACHC,OAAO,EAAE,IAAAC,oBAAS,yBAAiBH,MAAM,EAAG;IAC5CI,IAAI,EAAE,IAAAD,oBAAS,sBAAcH,MAAM,EAAG;IACtCK,MAAM,EAAE,IAAAF,oBAAS,wBAAgBH,MAAM;EAC3C,CAAC;AACL,CAAC;AAAC"}

package/utils/getLocaleCode.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        __PS_RENDER_LOCALE__: string;
+    }
+}
+export declare const getLocaleCode: () => string | null;

package/utils/getLocaleCode.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLocaleCode = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _isLocalhost = require("./isLocalhost");
+var getLocaleCode = function getLocaleCode() {
+  // 1. Get locale via the `__locale` query param. Useful when doing page previews.
+  var locale = new URLSearchParams(location.search).get("__locale");
+  if (locale) {
+    return locale;
+  }
+
+  // 2. Get locale via `window.__PS_RENDER_LOCALE__`. Used with prerendered pages.
+  locale = window.__PS_RENDER_LOCALE__;
+  if (locale) {
+    return locale;
+  }
+
+  // 3. Get locale via `window.localStorage.webiny_i18n_locale`. Used within the Admin app.
+  var localesByContext = window.localStorage.webiny_i18n_locale;
+  if (localesByContext) {
+    // The `localesByContext` is a string that contains locales for all available
+    // "locale contexts", for example: `default:en-US;content:en-US;`. Here, we
+    // want to extract the locale for the "content" locale context.
+    var _localesByContext$mat = localesByContext.match(/content:(.*?);/),
+      _localesByContext$mat2 = (0, _slicedToArray2.default)(_localesByContext$mat, 2),
+      matchedLocale = _localesByContext$mat2[1];
+    return matchedLocale;
+  }
+
+  // 4. Finally, for development purposes, we take the `WEBINY_WEBSITE_LOCALE_CODE`
+  // and `WEBINY_ADMIN_LOCALE_CODE` environment variables into consideration.
+  if ((0, _isLocalhost.isLocalhost)()) {
+    return process.env.WEBINY_WEBSITE_LOCALE_CODE || process.env.WEBINY_ADMIN_LOCALE_CODE || null;
+  }
+  return null;
+};
+exports.getLocaleCode = getLocaleCode;

package/utils/getLocaleCode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getLocaleCode","locale","URLSearchParams","location","search","get","window","__PS_RENDER_LOCALE__","localesByContext","localStorage","webiny_i18n_locale","match","matchedLocale","isLocalhost","process","env","WEBINY_WEBSITE_LOCALE_CODE","WEBINY_ADMIN_LOCALE_CODE"],"sources":["getLocaleCode.ts"],"sourcesContent":["import { isLocalhost } from \"./isLocalhost\";\n\ndeclare global {\n    interface Window {\n        __PS_RENDER_LOCALE__: string;\n    }\n}\n\nexport const getLocaleCode = (): string | null => {\n    // 1. Get locale via the `__locale` query param. Useful when doing page previews.\n    let locale = new URLSearchParams(location.search).get(\"__locale\");\n    if (locale) {\n        return locale;\n    }\n\n    // 2. Get locale via `window.__PS_RENDER_LOCALE__`. Used with prerendered pages.\n    locale = window.__PS_RENDER_LOCALE__;\n    if (locale) {\n        return locale;\n    }\n\n    // 3. Get locale via `window.localStorage.webiny_i18n_locale`. Used within the Admin app.\n    const localesByContext = window.localStorage.webiny_i18n_locale;\n    if (localesByContext) {\n        // The `localesByContext` is a string that contains locales for all available\n        // \"locale contexts\", for example: `default:en-US;content:en-US;`. Here, we\n        // want to extract the locale for the \"content\" locale context.\n        const [, matchedLocale] = localesByContext.match(/content:(.*?);/);\n        return matchedLocale;\n    }\n\n    // 4. Finally, for development purposes, we take the `WEBINY_WEBSITE_LOCALE_CODE`\n    // and `WEBINY_ADMIN_LOCALE_CODE` environment variables into consideration.\n    if (isLocalhost()) {\n        return (\n            process.env.WEBINY_WEBSITE_LOCALE_CODE || process.env.WEBINY_ADMIN_LOCALE_CODE || null\n        );\n    }\n\n    return null;\n};\n"],"mappings":";;;;;;;;AAAA;AAQO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,GAAwB;EAC9C;EACA,IAAIC,MAAM,GAAG,IAAIC,eAAe,CAACC,QAAQ,CAACC,MAAM,CAAC,CAACC,GAAG,CAAC,UAAU,CAAC;EACjE,IAAIJ,MAAM,EAAE;IACR,OAAOA,MAAM;EACjB;;EAEA;EACAA,MAAM,GAAGK,MAAM,CAACC,oBAAoB;EACpC,IAAIN,MAAM,EAAE;IACR,OAAOA,MAAM;EACjB;;EAEA;EACA,IAAMO,gBAAgB,GAAGF,MAAM,CAACG,YAAY,CAACC,kBAAkB;EAC/D,IAAIF,gBAAgB,EAAE;IAClB;IACA;IACA;IACA,4BAA0BA,gBAAgB,CAACG,KAAK,CAAC,gBAAgB,CAAC;MAAA;MAAzDC,aAAa;IACtB,OAAOA,aAAa;EACxB;;EAEA;EACA;EACA,IAAI,IAAAC,wBAAW,GAAE,EAAE;IACf,OACIC,OAAO,CAACC,GAAG,CAACC,0BAA0B,IAAIF,OAAO,CAACC,GAAG,CAACE,wBAAwB,IAAI,IAAI;EAE9F;EAEA,OAAO,IAAI;AACf,CAAC;AAAC"}

package/utils/getPrerenderId.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        __PS_RENDER_ID__: string;
+    }
+}
+export declare const getPrerenderId: () => string | null;

package/utils/getPrerenderId.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPrerenderId = void 0;
+var getPrerenderId = function getPrerenderId() {
+  return window["__PS_RENDER_ID__"] || null;
+};
+exports.getPrerenderId = getPrerenderId;

package/utils/getPrerenderId.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getPrerenderId","window"],"sources":["getPrerenderId.ts"],"sourcesContent":["declare global {\n    interface Window {\n        __PS_RENDER_ID__: string;\n    }\n}\n\nexport const getPrerenderId = (): string | null => {\n    return window[\"__PS_RENDER_ID__\"] || null;\n};\n"],"mappings":";;;;;;AAMO,IAAMA,cAAc,GAAG,SAAjBA,cAAc,GAAwB;EAC/C,OAAOC,MAAM,CAAC,kBAAkB,CAAC,IAAI,IAAI;AAC7C,CAAC;AAAC"}

package/utils/getTenantId.d.ts

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+        __PS_RENDER_TENANT__: string;
+    }
+}
+export declare const getTenantId: () => string | null;

package/utils/getTenantId.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTenantId = void 0;
+var _isLocalhost = require("./isLocalhost");
+var getTenantId = function getTenantId() {
+  // 1. Get tenant via the `__tenant` query param. Useful when doing page previews.
+  var tenant = new URLSearchParams(location.search).get("__tenant");
+  if (tenant) {
+    return tenant;
+  }
+
+  // 2. Get tenant via `window.__PS_RENDER_TENANT__`. Used with prerendered pages.
+  tenant = window.__PS_RENDER_TENANT__;
+  if (tenant) {
+    return tenant;
+  }
+
+  // 3. Get tenant via `window.localStorage.webiny_tenant`. Used within the Admin app.
+  tenant = window.localStorage.webiny_tenant;
+  if (tenant) {
+    return tenant;
+  }
+
+  // 4. Finally, for development purposes, we take the `WEBINY_WEBSITE_TENANT_ID`
+  // and `WEBINY_ADMIN_TENANT_ID` environment variables into consideration.
+  if ((0, _isLocalhost.isLocalhost)()) {
+    return process.env.WEBINY_WEBSITE_TENANT_ID || process.env.WEBINY_ADMIN_TENANT_ID || null;
+  }
+  return null;
+};
+exports.getTenantId = getTenantId;