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

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,"file":"plugins/image.js","sources":["../../src/plugins/image.tsx"],"sourcesContent":["import React from \"react\";\nimport { Image } from \"./components/Image.js\";\nimport type { ImageComponentPlugin } from \"~/types.js\";\n\nconst SUPPORTED_IMAGE_RESIZE_WIDTHS = [128, 384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840];\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"],"names":["SUPPORTED_IMAGE_RESIZE_WIDTHS","getSupportedImageResizeWidth","width","output","i","sanitizeTransformArgs","args","undefined","parseInt","getSizes","isFixedImageWidth","Number","getSrcSetAutoSizes","max","maxWidth","supportedWidth","convertTransformToQueryParams","transform","Object","key","imagePlugin","props","src","sanitizedParams","params","srcSetInitial","imageProps","srcSet","sizes","forcedWidth","srcSetAutoWidths","Image"],"mappings":";;AAIA,MAAMA,gCAAgC;IAAC;IAAK;IAAK;IAAK;IAAK;IAAK;IAAM;IAAM;IAAM;IAAM;CAAK;AAM7F,MAAMC,+BAA+B,CAACC;IAClC,IAAIC,SAASH,6BAA6B,CAAC,EAAE;IAC7C,IAAII,IAAIJ,8BAA8B,MAAM;IAC5C,MAAOI,KAAK,EAAG;QACX,IAAIF,UAAUF,6BAA6B,CAACI,EAAE,EAAE;YAC5CD,SAASH,6BAA6B,CAACI,EAAE;YACzC;QACJ;QAEA,IAAIF,QAAQF,6BAA6B,CAACI,EAAE,EAAE;YAE1CD,SAASH,6BAA6B,CAACI,IAAI,EAAE;YAC7C,IAAI,CAACD,QACDA,SAASH,6BAA6B,CAACI,EAAE;YAE7C;QACJ;QAEAA;IACJ;IAEA,OAAOD;AACX;AAYA,MAAME,wBAAwB,CAACC;IAC3B,MAAMH,SAAsC,CAAC;IAC7C,IAAI,CAACG,QAAQA,AAAeC,WAAfD,KAAK,KAAK,IAAkBA,AAAe,SAAfA,KAAK,KAAK,EAC/C,OAAOH;IAEX,MAAMD,QAAQM,SAASF,KAAK,KAAK;IACjC,IAAIJ,QAAQ,GACRC,OAAO,KAAK,GAAGF,6BAA6BC;IAGhD,OAAOC;AACX;AAEA,MAAMM,WAAW,CAACP;IACd,IAAI,AAAiB,YAAjB,OAAOA,OACP;IAGJ,IAAIA,MAAM,QAAQ,CAAC,MACf,OAAO,GAAGM,SAASN,OAAO,EAAE,CAAC;IAGjC,IAAIA,MAAM,QAAQ,CAAC,OACf,OAAO,GAAGM,SAASN,OAAO,EAAE,CAAC;IAIjC,IAAIA,MAAM,QAAQ,CAAC,OACf,OAAO,GAAGM,SAASN,OAAO,EAAE,CAAC;AAIrC;AAEA,MAAMQ,oBAAoB,CAACR;IACvB,IAAIS,OAAO,QAAQ,CAACT,QAChB,OAAO;IAGX,IAAI,AAAiB,YAAjB,OAAOA,SAAsBA,MAAM,QAAQ,CAAC,OAC5C,OAAO;IAEX,OAAO;AACX;AAEA,MAAMU,qBAAqB,CAACC;IACxBA,MAAMH,kBAAkBG,OAAOL,SAAS,KAAKK,OAAO;IACpD,MAAMC,WAAWb,6BAA6BY;IAC9C,OAAOb,8BAA8B,MAAM,CAAC,CAACe,iBAClCA,kBAAkBD;AAEjC;AAEA,MAAME,gCAAgC,CAACC,YAC5BC,OAAO,IAAI,CAACD,WACd,GAAG,CAACE,CAAAA,MAAO,GAAGA,IAAI,CAAC,EAAEF,SAAS,CAACE,IAAI,EAAE,EACrC,IAAI,CAAC;AAGd,sBAAgB;IACZ,MAAMC,cAAoC;QACtC,MAAM;QACN,MAAM;QACN,SAAS;YACL,QAAQ;gBAAE,OAAO;YAAI;QACzB;QACA,aAAa,CAACC;YACV,IAAI,CAACA,OACD,OAAO;YAGX,MAAM,EAAEC,GAAG,EAAEL,SAAS,EAAE,GAAGI;YAC3B,IAAI,CAACJ,WACD,OAAOK;YAGX,IAAI,CAACA,OAAOA,IAAI,UAAU,CAAC,YAAYA,IAAI,QAAQ,CAAC,QAChD,OAAOA;YAGX,MAAMC,kBAAkBlB,sBAAsBY;YAC9C,MAAMO,SAASR,8BAA8BO;YAC7C,OAAOD,MAAM,MAAME;QACvB;QACA,QAAOH,KAAK;YACR,MAAM,EAAEJ,SAAS,EAAE,QAAQQ,aAAa,EAAE,GAAGC,YAAY,GAAGL;YAC5D,IAAIM,SAAcF;YAClB,IAAIG;YACJ,MAAMN,MAAMI,WAAW,GAAG;YAC1B,IAAIC,UAAUA,AAAW,WAAXA,QAAmB;gBAC7BA,SAAS,CAAC;gBAGV,MAAME,cAAcR,MAAM,KAAK,IAAKA,MAAM,KAAK,IAAIA,MAAM,KAAK,CAAC,KAAK;gBACpE,MAAMS,mBAAmBlB,mBAAmBiB;gBAC5CC,iBAAiB,OAAO,CAAC5B,CAAAA;oBACrByB,MAAM,CAACzB,QAAQ,IAAI,GAAGkB,YAAY,WAAW,CAAC;wBAC1CE;wBACA,WAAW;4BAAE,GAAGL,SAAS;4BAAEf;wBAAM;oBACrC;gBACJ;gBACA0B,QAAQnB,SAASoB;YACrB;YAEA,OAAO,WAAP,GAAO,oBAACE,OAAKA;gBAAE,GAAGL,UAAU;gBAAE,QAAQC;gBAAQ,KAAKL;gBAAK,OAAOM;;QACnE;IACJ;IAEA,OAAOR;AACX"}

package/plugins/index.d.ts

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

package/plugins/index.js

@@ -1,89 +1,42 @@
-"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) {
-  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;
-  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,
-      name: name,
-      params: params,
-      fn: fn
-    }, content) : /*#__PURE__*/_react.default.cloneElement(content, {
-      key: plugin.name
+import react from "react";
+import warning from "warning";
+import { plugins } from "@webiny/plugins";
+import image_0 from "./image.js";
+const PluginComponent = (props)=>props.children;
+const PluginsComponent = (props)=>props.children;
+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;
+    const 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;
+    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;
-  var content = _plugins.plugins.byType(type).filter(function (pl) {
-    /**
-     * TODO @ts-refactor Problem with possibility of a different subtype.
-     */
-    // @ts-ignore
-    return filter(pl);
-  })
-  /**
-   * 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);
-  if (reverse) {
-    content.reverse();
-  }
-  return wrapper ? /*#__PURE__*/_react.default.createElement(PluginsComponent, {
-    type: type,
-    params: params,
-    fn: fn
-  }, content) : content;
+const renderPlugins = (type, params = {}, options = {})=>{
+    const { wrapper = true, fn = "render", filter = (v)=>v, reverse } = options;
+    const content = plugins.byType(type).filter((pl)=>filter(pl)).map((plugin)=>renderPlugin(plugin.name, params, {
+            wrapper,
+            fn
+        })).filter(Boolean);
+    if (reverse) content.reverse();
+    return wrapper ? /*#__PURE__*/ react.createElement(PluginsComponent, {
+        type: type,
+        params: params,
+        fn: fn
+    }, content) : content;
 };
-exports.renderPlugins = renderPlugins;
-var _default = [_image.default];
-exports.default = _default;
+const src_plugins = [
+    image_0
+];
+export default src_plugins;
+export { image_0 as imagePlugin, renderPlugin, renderPlugins };
+
+//# sourceMappingURL=index.js.map

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,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"}
+{"version":3,"file":"plugins/index.js","sources":["../../src/plugins/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.js\";\nimport imagePlugin from \"./image.js\";\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>(\n        name: string,\n        params?: any,\n        options?: RenderPluginOptions<T>\n    ): ReactNode | ReactNode[];\n}\n\ninterface RenderPlugins {\n    <T extends Plugin = Plugin>(\n        type: string,\n        params?: any,\n        options?: RenderPluginOptions<T>\n    ): ReactNode | 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"],"names":["PluginComponent","props","PluginsComponent","renderPlugin","name","params","options","wrapper","fn","plugin","plugins","warning","content","React","renderPlugins","type","filter","v","reverse","pl","Boolean","imagePlugin"],"mappings":";;;;AAsCA,MAAMA,kBAAkB,CAACC,QACdA,MAAM,QAAQ;AAQzB,MAAMC,mBAAmB,CAACD,QACfA,MAAM,QAAQ;AAGlB,MAAME,eAA6B,CAACC,MAAMC,SAAS,CAAC,CAAC,EAAEC,UAAU,CAAC,CAAC;IACtE,MAAM,EAAEC,UAAU,IAAI,EAAEC,KAAK,QAAQ,EAAE,GAAGF;IAE1C,MAAMG,SAASC,QAAQ,MAAM,CAACN;IAC9BO,QAAQF,QAAQ,CAAC,gBAAgB,EAAEL,KAAK,CAAC,CAAC;IAE1C,IAAI,CAACK,QACD,OAAO;IAGX,MAAMG,UAAUH,MAAM,CAACD,GAAG,CAACH;IAC3B,IAAIO,SACA,OAAOL,UAAU,WAAVA,GACH,oBAACP,iBAAeA;QAAC,KAAKS,OAAO,IAAI;QAAE,MAAML;QAAM,QAAQC;QAAQ,IAAIG;OAC9DI,WAAAA,WAAAA,GAGLC,MAAAA,YAAkB,CAACD,SAAS;QAAE,KAAKH,OAAO,IAAI;IAAC;IAGvD,OAAO;AACX;AAEO,MAAMK,gBAA+B,CAACC,MAAMV,SAAS,CAAC,CAAC,EAAEC,UAAU,CAAC,CAAC;IACxE,MAAM,EAAEC,UAAU,IAAI,EAAEC,KAAK,QAAQ,EAAEQ,SAASC,CAAAA,IAAKA,CAAC,EAAEC,OAAO,EAAE,GAAGZ;IAEpE,MAAMM,UAAUF,QAAAA,MACL,CAACK,MACP,MAAM,CAACI,CAAAA,KAKGH,OAAOG,KAKjB,GAAG,CAACV,CAAAA,SAAUN,aAAaM,OAAO,IAAI,EAAYJ,QAAQ;YAAEE;YAASC;QAAG,IACxE,MAAM,CAACY;IAEZ,IAAIF,SACAN,QAAQ,OAAO;IAGnB,OAAOL,UAAU,WAAVA,GACH,oBAACL,kBAAgBA;QAAC,MAAMa;QAAM,QAAQV;QAAQ,IAAIG;OAC7CI,WAGLA;AAER;AAEA,oBAAe;IAACS;CAAY"}

package/presentation/envConfig/useEnvConfig.d.ts

@@ -0,0 +1,6 @@
+import { EnvConfig } from "../../features/envConfig/index.js";
+/**
+ * Returns the EnvConfig instance from DI.
+ * Useful when you want to access EnvConfig inside components and hooks.
+ */
+export declare function useEnvConfig(): EnvConfig.Config;

package/presentation/envConfig/useEnvConfig.js

@@ -0,0 +1,9 @@
+import { useFeature } from "../../shared/di/useFeature.js";
+import { EnvConfigFeature } from "../../features/envConfig/feature.js";
+function useEnvConfig() {
+    const envConfig = useFeature(EnvConfigFeature);
+    return envConfig.getAll();
+}
+export { useEnvConfig };
+
+//# sourceMappingURL=useEnvConfig.js.map

package/presentation/envConfig/useEnvConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/envConfig/useEnvConfig.js","sources":["../../../src/presentation/envConfig/useEnvConfig.ts"],"sourcesContent":["import { useFeature } from \"~/shared/di/useFeature.js\";\nimport { EnvConfig } from \"~/features/envConfig/index.js\";\nimport { EnvConfigFeature } from \"~/features/envConfig/feature.js\";\n\n/**\n * Returns the EnvConfig instance from DI.\n * Useful when you want to access EnvConfig inside components and hooks.\n */\nexport function useEnvConfig(): EnvConfig.Config {\n    const envConfig = useFeature(EnvConfigFeature);\n\n    return envConfig.getAll();\n}\n"],"names":["useEnvConfig","envConfig","useFeature","EnvConfigFeature"],"mappings":";;AAQO,SAASA;IACZ,MAAMC,YAAYC,WAAWC;IAE7B,OAAOF,UAAU,MAAM;AAC3B"}

package/presentation/localStorage/index.d.ts

@@ -0,0 +1,3 @@
+export { useLocalStorage } from "./useLocalStorage.js";
+export { useLocalStorageValue } from "./useLocalStorageValue.js";
+export { useLocalStorageValues } from "./useLocalStorageValues.js";

package/presentation/localStorage/index.js

@@ -0,0 +1,3 @@
+export { useLocalStorage } from "./useLocalStorage.js";
+export { useLocalStorageValue } from "./useLocalStorageValue.js";
+export { useLocalStorageValues } from "./useLocalStorageValues.js";

package/presentation/localStorage/useLocalStorage.d.ts

@@ -0,0 +1,6 @@
+import { LocalStorage } from "../../features/localStorage/index.js";
+/**
+ * Returns the LocalStorage instance from DI.
+ * Useful when you want to call service methods imperatively inside components.
+ */
+export declare function useLocalStorage(): LocalStorage.Interface;

package/presentation/localStorage/useLocalStorage.js

@@ -0,0 +1,15 @@
+import { LocalStorageFeature } from "../../features/localStorage/feature.js";
+import { useFeature } from "../../shared/di/useFeature.js";
+function useLocalStorage() {
+    const { localStorageService } = useFeature(LocalStorageFeature);
+    return {
+        get: localStorageService.get.bind(localStorageService),
+        set: localStorageService.set.bind(localStorageService),
+        remove: localStorageService.remove.bind(localStorageService),
+        clear: localStorageService.clear.bind(localStorageService),
+        keys: localStorageService.keys.bind(localStorageService)
+    };
+}
+export { useLocalStorage };
+
+//# sourceMappingURL=useLocalStorage.js.map

package/presentation/localStorage/useLocalStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/localStorage/useLocalStorage.js","sources":["../../../src/presentation/localStorage/useLocalStorage.ts"],"sourcesContent":["import { LocalStorageFeature } from \"~/features/localStorage/feature.js\";\nimport { LocalStorage } from \"~/features/localStorage/index.js\";\nimport { useFeature } from \"~/shared/di/useFeature.js\";\n\n/**\n * Returns the LocalStorage instance from DI.\n * Useful when you want to call service methods imperatively inside components.\n */\nexport function useLocalStorage(): LocalStorage.Interface {\n    const { localStorageService } = useFeature(LocalStorageFeature);\n\n    return {\n        get: localStorageService.get.bind(localStorageService),\n        set: localStorageService.set.bind(localStorageService),\n        remove: localStorageService.remove.bind(localStorageService),\n        clear: localStorageService.clear.bind(localStorageService),\n        keys: localStorageService.keys.bind(localStorageService)\n    };\n}\n"],"names":["useLocalStorage","localStorageService","useFeature","LocalStorageFeature"],"mappings":";;AAQO,SAASA;IACZ,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,WAAWC;IAE3C,OAAO;QACH,KAAKF,oBAAoB,GAAG,CAAC,IAAI,CAACA;QAClC,KAAKA,oBAAoB,GAAG,CAAC,IAAI,CAACA;QAClC,QAAQA,oBAAoB,MAAM,CAAC,IAAI,CAACA;QACxC,OAAOA,oBAAoB,KAAK,CAAC,IAAI,CAACA;QACtC,MAAMA,oBAAoB,IAAI,CAAC,IAAI,CAACA;IACxC;AACJ"}

package/presentation/localStorage/useLocalStorageValue.d.ts

@@ -0,0 +1 @@
+export declare function useLocalStorageValue<T = string>(key: string): T | undefined;

package/presentation/localStorage/useLocalStorageValue.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { autorun } from "mobx";
+import { LocalStorageFeature } from "../../features/localStorage/feature.js";
+import { useFeature } from "../../shared/di/useFeature.js";
+function useLocalStorageValue(key) {
+    const { localStorageService } = useFeature(LocalStorageFeature);
+    const [value, setValue] = useState(()=>localStorageService.get(key));
+    useEffect(()=>{
+        const dispose = autorun(()=>{
+            const value = localStorageService.get(key);
+            setValue(value);
+        });
+        return ()=>dispose();
+    }, [
+        localStorageService,
+        key
+    ]);
+    return value;
+}
+export { useLocalStorageValue };
+
+//# sourceMappingURL=useLocalStorageValue.js.map

package/presentation/localStorage/useLocalStorageValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/localStorage/useLocalStorageValue.js","sources":["../../../src/presentation/localStorage/useLocalStorageValue.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport { LocalStorageFeature } from \"~/features/localStorage/feature.js\";\nimport { useFeature } from \"~/shared/di/useFeature.js\";\n\nexport function useLocalStorageValue<T = string>(key: string): T | undefined {\n    const { localStorageService } = useFeature(LocalStorageFeature);\n\n    const [value, setValue] = useState<T | undefined>(() => localStorageService.get<T>(key));\n\n    useEffect(() => {\n        const dispose = autorun(() => {\n            const value = localStorageService.get<T>(key);\n            setValue(value);\n        });\n        return () => dispose();\n    }, [localStorageService, key]);\n\n    return value;\n}\n"],"names":["useLocalStorageValue","key","localStorageService","useFeature","LocalStorageFeature","value","setValue","useState","useEffect","dispose","autorun"],"mappings":";;;;AAKO,SAASA,qBAAiCC,GAAW;IACxD,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,WAAWC;IAE3C,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAwB,IAAML,oBAAoB,GAAG,CAAID;IAEnFO,UAAU;QACN,MAAMC,UAAUC,QAAQ;YACpB,MAAML,QAAQH,oBAAoB,GAAG,CAAID;YACzCK,SAASD;QACb;QACA,OAAO,IAAMI;IACjB,GAAG;QAACP;QAAqBD;KAAI;IAE7B,OAAOI;AACX"}

package/presentation/localStorage/useLocalStorageValues.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Observes multiple keys in LocalStorage and returns an object of { key: value }.
+ * Re-renders when any of the observed keys change.
+ */
+export declare function useLocalStorageValues<T extends Record<string, any>>(keys: (keyof T & string)[]): Partial<T>;

package/presentation/localStorage/useLocalStorageValues.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from "react";
+import { autorun } from "mobx";
+import isEqual from "lodash/isEqual.js";
+import { LocalStorageFeature } from "../../features/localStorage/feature.js";
+import { useFeature } from "../../shared/di/useFeature.js";
+function useLocalStorageValues(keys) {
+    const { localStorageService } = useFeature(LocalStorageFeature);
+    const [values, setValues] = useState(()=>{
+        const initial = {};
+        for (const key of keys)initial[key] = localStorageService.get(key);
+        return initial;
+    });
+    const valuesRef = useRef(values);
+    useEffect(()=>{
+        const dispose = autorun(()=>{
+            const snapshot = {};
+            for (const key of keys)snapshot[key] = localStorageService.get(key);
+            if (!isEqual(snapshot, valuesRef.current)) {
+                setValues(snapshot);
+                valuesRef.current = snapshot;
+            }
+        });
+        return ()=>dispose();
+    }, [
+        localStorageService,
+        keys.join(",")
+    ]);
+    return values;
+}
+export { useLocalStorageValues };
+
+//# sourceMappingURL=useLocalStorageValues.js.map

package/presentation/localStorage/useLocalStorageValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/localStorage/useLocalStorageValues.js","sources":["../../../src/presentation/localStorage/useLocalStorageValues.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport isEqual from \"lodash/isEqual.js\";\nimport { LocalStorageFeature } from \"~/features/localStorage/feature.js\";\nimport { useFeature } from \"~/shared/di/useFeature.js\";\n\n/**\n * Observes multiple keys in LocalStorage and returns an object of { key: value }.\n * Re-renders when any of the observed keys change.\n */\nexport function useLocalStorageValues<T extends Record<string, any>>(\n    keys: (keyof T & string)[]\n): Partial<T> {\n    const { localStorageService } = useFeature(LocalStorageFeature);\n\n    const [values, setValues] = useState<Partial<T>>(() => {\n        const initial: Partial<T> = {};\n        for (const key of keys) {\n            initial[key] = localStorageService.get<any>(key);\n        }\n        return initial;\n    });\n\n    const valuesRef = useRef(values);\n\n    useEffect(() => {\n        const dispose = autorun(() => {\n            const snapshot: Partial<T> = {};\n            for (const key of keys) {\n                snapshot[key] = localStorageService.get<any>(key);\n            }\n\n            if (!isEqual(snapshot, valuesRef.current)) {\n                setValues(snapshot);\n                valuesRef.current = snapshot;\n            }\n        });\n        return () => dispose();\n    }, [localStorageService, keys.join(\",\")]);\n\n    return values;\n}\n"],"names":["useLocalStorageValues","keys","localStorageService","useFeature","LocalStorageFeature","values","setValues","useState","initial","key","valuesRef","useRef","useEffect","dispose","autorun","snapshot","isEqual"],"mappings":";;;;;AAUO,SAASA,sBACZC,IAA0B;IAE1B,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,WAAWC;IAE3C,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAAqB;QAC7C,MAAMC,UAAsB,CAAC;QAC7B,KAAK,MAAMC,OAAOR,KACdO,OAAO,CAACC,IAAI,GAAGP,oBAAoB,GAAG,CAAMO;QAEhD,OAAOD;IACX;IAEA,MAAME,YAAYC,OAAON;IAEzBO,UAAU;QACN,MAAMC,UAAUC,QAAQ;YACpB,MAAMC,WAAuB,CAAC;YAC9B,KAAK,MAAMN,OAAOR,KACdc,QAAQ,CAACN,IAAI,GAAGP,oBAAoB,GAAG,CAAMO;YAGjD,IAAI,CAACO,QAAQD,UAAUL,UAAU,OAAO,GAAG;gBACvCJ,UAAUS;gBACVL,UAAU,OAAO,GAAGK;YACxB;QACJ;QACA,OAAO,IAAMF;IACjB,GAAG;QAACX;QAAqBD,KAAK,IAAI,CAAC;KAAK;IAExC,OAAOI;AACX"}

package/presentation/router/RouteElementRegistry.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare class RouteElementRegistryImplementation {
+    private readonly elements;
+    /** Register a React element for a given route. */
+    register(routeName: string, element: React.ReactNode): void;
+    /** Get the element for a matched route by name. */
+    getElement(routeName: string): React.ReactNode | null;
+    /** Clear all registered elements. Useful in tests or hot reloads. */
+    clear(): void;
+    /** List all registered route names. */
+    list(): string[];
+}
+export declare const DefaultRouteElementRegistry: import("@webiny/di").Implementation<typeof RouteElementRegistryImplementation>;
+export {};

package/presentation/router/RouteElementRegistry.js

@@ -0,0 +1,29 @@
+import { createImplementation } from "@webiny/di";
+import { RouteElementRegistry } from "./abstractions.js";
+class RouteElementRegistryImplementation {
+    register(routeName, element) {
+        this.elements.set(routeName, element);
+    }
+    getElement(routeName) {
+        return this.elements.get(routeName) ?? null;
+    }
+    clear() {
+        this.elements.clear();
+    }
+    list() {
+        return [
+            ...this.elements.keys()
+        ];
+    }
+    constructor(){
+        this.elements = new Map();
+    }
+}
+const DefaultRouteElementRegistry = createImplementation({
+    implementation: RouteElementRegistryImplementation,
+    abstraction: RouteElementRegistry,
+    dependencies: []
+});
+export { DefaultRouteElementRegistry };
+
+//# sourceMappingURL=RouteElementRegistry.js.map

package/presentation/router/RouteElementRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/router/RouteElementRegistry.js","sources":["../../../src/presentation/router/RouteElementRegistry.ts"],"sourcesContent":["import React from \"react\";\nimport { createImplementation } from \"@webiny/di\";\nimport { RouteElementRegistry } from \"./abstractions.js\";\n\nclass RouteElementRegistryImplementation {\n    private readonly elements = new Map<string, React.ReactNode>();\n\n    /** Register a React element for a given route. */\n    register(routeName: string, element: React.ReactNode): void {\n        this.elements.set(routeName, element);\n    }\n\n    /** Get the element for a matched route by name. */\n    getElement(routeName: string): React.ReactNode | null {\n        return this.elements.get(routeName) ?? null;\n    }\n\n    /** Clear all registered elements. Useful in tests or hot reloads. */\n    clear(): void {\n        this.elements.clear();\n    }\n\n    /** List all registered route names. */\n    list(): string[] {\n        return [...this.elements.keys()];\n    }\n}\n\nexport const DefaultRouteElementRegistry = createImplementation({\n    implementation: RouteElementRegistryImplementation,\n    abstraction: RouteElementRegistry,\n    dependencies: []\n});\n"],"names":["RouteElementRegistryImplementation","routeName","element","Map","DefaultRouteElementRegistry","createImplementation","RouteElementRegistry"],"mappings":";;AAIA,MAAMA;IAIF,SAASC,SAAiB,EAAEC,OAAwB,EAAQ;QACxD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAACD,WAAWC;IACjC;IAGA,WAAWD,SAAiB,EAA0B;QAClD,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAACA,cAAc;IAC3C;IAGA,QAAc;QACV,IAAI,CAAC,QAAQ,CAAC,KAAK;IACvB;IAGA,OAAiB;QACb,OAAO;eAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;SAAG;IACpC;;aApBiB,QAAQ,GAAG,IAAIE;;AAqBpC;AAEO,MAAMC,8BAA8BC,qBAAqB;IAC5D,gBAAgBL;IAChB,aAAaM;IACb,cAAc,EAAE;AACpB"}

package/presentation/router/abstractions.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Abstraction } from "@webiny/di";
+interface IRouteElementRegistry {
+    register(name: string, element: React.ReactElement): void;
+    getElement(routeName: string): React.ReactNode | null;
+    clear(): void;
+    list(): string[];
+}
+export declare const RouteElementRegistry: Abstraction<IRouteElementRegistry>;
+export declare namespace RouteElementRegistry {
+    type Interface = IRouteElementRegistry;
+}
+export {};

package/presentation/router/abstractions.js

@@ -0,0 +1,5 @@
+import { Abstraction } from "@webiny/di";
+const RouteElementRegistry = new Abstraction("RouteElementRegistry");
+export { RouteElementRegistry };
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/router/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/router/abstractions.js","sources":["../../../src/presentation/router/abstractions.ts"],"sourcesContent":["import React from \"react\";\nimport { Abstraction } from \"@webiny/di\";\n\ninterface IRouteElementRegistry {\n    register(name: string, element: React.ReactElement): void;\n    getElement(routeName: string): React.ReactNode | null;\n    clear(): void;\n    list(): string[];\n}\n\nexport const RouteElementRegistry = new Abstraction<IRouteElementRegistry>(\"RouteElementRegistry\");\n\nexport namespace RouteElementRegistry {\n    export type Interface = IRouteElementRegistry;\n}\n"],"names":["RouteElementRegistry","Abstraction"],"mappings":";AAUO,MAAMA,uBAAuB,IAAIC,YAAmC"}

package/presentation/router/components/Redirect.d.ts

@@ -0,0 +1,14 @@
+import type { Route, RouteParamsDefinition, RouteParamsInfer } from "../../../features/router/Route.js";
+import type { RequiredKeysOf } from "type-fest";
+export type RedirectProps<TParams extends RouteParamsDefinition | undefined> = [
+    TParams extends RouteParamsDefinition ? RequiredKeysOf<RouteParamsInfer<TParams>> extends never ? {
+        route: Route<TParams>;
+        params?: RouteParamsInfer<TParams>;
+    } : {
+        route: Route<TParams>;
+        params: RouteParamsInfer<TParams>;
+    } : {
+        route: Route<TParams>;
+    }
+][0];
+export declare const RedirectComponent: <TParams extends RouteParamsDefinition | undefined>(props: RedirectProps<TParams>) => null;

package/presentation/router/components/Redirect.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useRouter } from "../../../router.js";
+const RedirectComponent = (props)=>{
+    const router = useRouter();
+    const { route, ...rest } = props;
+    useEffect(()=>{
+        router.goToRoute(route, rest.params);
+    }, []);
+    return null;
+};
+export { RedirectComponent };
+
+//# sourceMappingURL=Redirect.js.map

package/presentation/router/components/Redirect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/router/components/Redirect.js","sources":["../../../../src/presentation/router/components/Redirect.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { Route, RouteParamsDefinition, RouteParamsInfer } from \"~/features/router/Route.js\";\nimport { useRouter } from \"~/router.js\";\nimport type { RequiredKeysOf } from \"type-fest\";\n\nexport type RedirectProps<TParams extends RouteParamsDefinition | undefined> = [\n    TParams extends RouteParamsDefinition\n        ? RequiredKeysOf<RouteParamsInfer<TParams>> extends never\n            ? { route: Route<TParams>; params?: RouteParamsInfer<TParams> }\n            : { route: Route<TParams>; params: RouteParamsInfer<TParams> }\n        : { route: Route<TParams> }\n][0];\n\nexport const RedirectComponent = <TParams extends RouteParamsDefinition | undefined>(\n    props: RedirectProps<TParams>\n) => {\n    const router = useRouter();\n    const { route, ...rest } = props as any;\n\n    useEffect(() => {\n        router.goToRoute(route, rest.params);\n    }, []);\n\n    return null;\n};\n"],"names":["RedirectComponent","props","router","useRouter","route","rest","useEffect"],"mappings":";;AAaO,MAAMA,oBAAoB,CAC7BC;IAEA,MAAMC,SAASC;IACf,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IAE3BK,UAAU;QACNJ,OAAO,SAAS,CAACE,OAAOC,KAAK,MAAM;IACvC,GAAG,EAAE;IAEL,OAAO;AACX"}

package/presentation/router/components/RouteContent.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const RouteContent: () => React.JSX.Element | null;

package/presentation/router/components/RouteContent.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { DevToolsSection } from "@webiny/react-properties";
+import { RouteElementRegistry, useRoute } from "../index.js";
+import { useContainer } from "../../../shared/di/DiContainerProvider.js";
+const RouteContent = ()=>{
+    const { route } = useRoute();
+    const container = useContainer();
+    const elementRegistry = container.resolve(RouteElementRegistry);
+    if (!route) return null;
+    const element = elementRegistry.getElement(route.name);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DevToolsSection, {
+        name: "Current Route",
+        group: "Router",
+        data: route,
+        views: "raw"
+    }), element ?? null);
+};
+export { RouteContent };
+
+//# sourceMappingURL=RouteContent.js.map

package/presentation/router/components/RouteContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presentation/router/components/RouteContent.js","sources":["../../../../src/presentation/router/components/RouteContent.tsx"],"sourcesContent":["import React from \"react\";\nimport { DevToolsSection } from \"@webiny/react-properties\";\nimport { RouteElementRegistry, useRoute } from \"~/presentation/router/index.js\";\nimport { useContainer } from \"~/shared/di/DiContainerProvider.js\";\n\nexport const RouteContent = () => {\n    const { route } = useRoute();\n    const container = useContainer();\n    const elementRegistry = container.resolve(RouteElementRegistry);\n\n    if (!route) {\n        return null;\n    }\n\n    const element = elementRegistry.getElement(route.name);\n\n    return (\n        <>\n            <DevToolsSection name={\"Current Route\"} group={\"Router\"} data={route} views={\"raw\"} />\n            {element ?? null}\n        </>\n    );\n};\n"],"names":["RouteContent","route","useRoute","container","useContainer","elementRegistry","RouteElementRegistry","element","DevToolsSection"],"mappings":";;;;AAKO,MAAMA,eAAe;IACxB,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAClB,MAAMC,YAAYC;IAClB,MAAMC,kBAAkBF,UAAU,OAAO,CAACG;IAE1C,IAAI,CAACL,OACD,OAAO;IAGX,MAAMM,UAAUF,gBAAgB,UAAU,CAACJ,MAAM,IAAI;IAErD,OAAO,WAAP,GACI,wDACI,oBAACO,iBAAeA;QAAC,MAAM;QAAiB,OAAO;QAAU,MAAMP;QAAO,OAAO;QAC5EM,WAAW;AAGxB"}

package/presentation/router/components/RouteLink.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import type { Route, RouteParamsDefinition, RouteParamsInfer } from "../../../features/router/Route.js";
+type BaseAnchorAttributes = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+export type RouteLinkProps<TParams extends RouteParamsDefinition | undefined> = [
+    TParams extends RouteParamsDefinition ? {
+        route: Route<TParams>;
+        params: RouteParamsInfer<TParams>;
+    } : {
+        route: Route<TParams>;
+    }
+][0] & BaseAnchorAttributes;
+export declare const RouteLink: (<TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element) & {
+    original: <TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (<TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element) & {
+        original: <TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(<TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element) & {
+        original: <TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export declare const RouteLinkComponent: (<TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element) & {
+    original: <TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (<TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element) & {
+        original: <TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(<TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element) & {
+        original: <TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export {};

package/presentation/router/components/RouteLink.js

@@ -0,0 +1,17 @@
+import react from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+import { SimpleLink } from "./SimpleLink.js";
+import { useRouter } from "../../../router.js";
+const RouteLink = makeDecoratable("RouteLink", (props)=>{
+    const router = useRouter();
+    const { children, route, ...rest } = props;
+    const href = rest.params ? router.getLink(route, rest.params) : router.getLink(route);
+    return /*#__PURE__*/ react.createElement(SimpleLink, {
+        to: href,
+        ...rest
+    }, children);
+});
+const RouteLinkComponent = RouteLink;
+export { RouteLink, RouteLinkComponent };
+
+//# sourceMappingURL=RouteLink.js.map