@webiny/app 5.44.1-beta.0 → 5.45.0-beta.0

package/plugins/image.js.map

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

package/plugins/index.d.ts

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

package/plugins/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_warning","_plugins","_image","PluginComponent","props","children","PluginsComponent","renderPlugin","exports","name","params","arguments","length","undefined","options","_options$wrapper","wrapper","_options$fn","fn","plugin","plugins","byName","warning","concat","content","default","createElement","key","React","cloneElement","renderPlugins","type","_options$wrapper2","_options$fn2","_options$filter","filter","v","reverse","byType","pl","map","Boolean","_default","imagePlugin"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport warning from \"warning\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugin } from \"@webiny/plugins/types\";\nimport imagePlugin from \"./image\";\n\nexport { imagePlugin };\n\ntype RenderPluginOptions<T> = {\n    wrapper?: boolean;\n    fn?: string;\n    filter?: (value: T, index: number, array: T[]) => boolean;\n    reverse?: boolean;\n};\n\ninterface RenderPlugin {\n    <T extends Plugin = Plugin>(name: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface RenderPlugins {\n    <T extends Plugin = Plugin>(type: string, params?: any, options?: RenderPluginOptions<T>):\n        | ReactNode\n        | ReactNode[];\n}\n\ninterface PluginComponentProps {\n    name: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginComponent = (props: PluginComponentProps) => {\n    return props.children as React.ReactElement;\n};\ninterface PluginsComponentProps {\n    type: string;\n    params: Record<string, any>;\n    fn: string;\n    children: React.ReactNode;\n}\nconst PluginsComponent = (props: PluginsComponentProps) => {\n    return props.children as React.ReactElement;\n};\n\nexport const renderPlugin: RenderPlugin = (name, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\" } = options;\n\n    const plugin = plugins.byName(name);\n    warning(plugin, `No such plugin \"${name}\"`);\n\n    if (!plugin) {\n        return null;\n    }\n\n    const content = plugin[fn](params);\n    if (content) {\n        return wrapper ? (\n            <PluginComponent key={plugin.name} name={name} params={params} fn={fn}>\n                {content}\n            </PluginComponent>\n        ) : (\n            React.cloneElement(content, { key: plugin.name })\n        );\n    }\n    return null;\n};\n\nexport const renderPlugins: RenderPlugins = (type, params = {}, options = {}) => {\n    const { wrapper = true, fn = \"render\", filter = v => v, reverse } = options;\n\n    const content = plugins\n        .byType(type)\n        .filter(pl => {\n            /**\n             * TODO @ts-refactor Problem with possibility of a different subtype.\n             */\n            // @ts-expect-error\n            return filter(pl);\n        })\n        /**\n         * We cast as string because renderPlugin checks for the plugin.name\n         */\n        .map(plugin => renderPlugin(plugin.name as string, params, { wrapper, fn }))\n        .filter(Boolean);\n\n    if (reverse) {\n        content.reverse();\n    }\n\n    return wrapper ? (\n        <PluginsComponent type={type} params={params} fn={fn}>\n            {content}\n        </PluginsComponent>\n    ) : (\n        content\n    );\n};\n\nexport default [imagePlugin];\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","warning","plugins","imagePlugin","PluginComponent","props","children","PluginsComponent","renderPlugin","name","params","options","wrapper","fn","plugin","byName","content","createElement","key","cloneElement","renderPlugins","type","filter","v","reverse","byType","pl","map","Boolean"],"sources":["index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\nimport warning from \"warning\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { Plugin } from \"@webiny/plugins/types.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"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,SAAS;AAC7B,SAASC,OAAO,QAAQ,iBAAiB;AAEzC,OAAOC,WAAW;AAElB,SAASA,WAAW;AA+BpB,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EACrD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAOD,MAAMC,gBAAgB,GAAIF,KAA4B,IAAK;EACvD,OAAOA,KAAK,CAACC,QAAQ;AACzB,CAAC;AAED,OAAO,MAAME,YAA0B,GAAGA,CAACC,IAAI,EAAEC,MAAM,GAAG,CAAC,CAAC,EAAEC,OAAO,GAAG,CAAC,CAAC,KAAK;EAC3E,MAAM;IAAEC,OAAO,GAAG,IAAI;IAAEC,EAAE,GAAG;EAAS,CAAC,GAAGF,OAAO;EAEjD,MAAMG,MAAM,GAAGZ,OAAO,CAACa,MAAM,CAACN,IAAI,CAAC;EACnCR,OAAO,CAACa,MAAM,EAAE,mBAAmBL,IAAI,GAAG,CAAC;EAE3C,IAAI,CAACK,MAAM,EAAE;IACT,OAAO,IAAI;EACf;EAEA,MAAME,OAAO,GAAGF,MAAM,CAACD,EAAE,CAAC,CAACH,MAAM,CAAC;EAClC,IAAIM,OAAO,EAAE;IACT,OAAOJ,OAAO,gBACVZ,KAAA,CAAAiB,aAAA,CAACb,eAAe;MAACc,GAAG,EAAEJ,MAAM,CAACL,IAAK;MAACA,IAAI,EAAEA,IAAK;MAACC,MAAM,EAAEA,MAAO;MAACG,EAAE,EAAEA;IAAG,GACjEG,OACY,CAAC,iBAElBhB,KAAK,CAACmB,YAAY,CAACH,OAAO,EAAE;MAAEE,GAAG,EAAEJ,MAAM,CAACL;IAAK,CAAC,CAAC,CACpD;EACL;EACA,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAMW,aAA4B,GAAGA,CAACC,IAAI,EAAEX,MAAM,GAAG,CAAC,CAAC,EAAEC,OAAO,GAAG,CAAC,CAAC,KAAK;EAC7E,MAAM;IAAEC,OAAO,GAAG,IAAI;IAAEC,EAAE,GAAG,QAAQ;IAAES,MAAM,GAAGC,CAAC,IAAIA,CAAC;IAAEC;EAAQ,CAAC,GAAGb,OAAO;EAE3E,MAAMK,OAAO,GAAGd,OAAO,CAClBuB,MAAM,CAACJ,IAAI,CAAC,CACZC,MAAM,CAACI,EAAE,IAAI;IACV;AACZ;AACA;IACY;IACA,OAAOJ,MAAM,CAACI,EAAE,CAAC;EACrB,CAAC;EACD;AACR;AACA,KAFQ,CAGCC,GAAG,CAACb,MAAM,IAAIN,YAAY,CAACM,MAAM,CAACL,IAAI,EAAYC,MAAM,EAAE;IAAEE,OAAO;IAAEC;EAAG,CAAC,CAAC,CAAC,CAC3ES,MAAM,CAACM,OAAO,CAAC;EAEpB,IAAIJ,OAAO,EAAE;IACTR,OAAO,CAACQ,OAAO,CAAC,CAAC;EACrB;EAEA,OAAOZ,OAAO,gBACVZ,KAAA,CAAAiB,aAAA,CAACV,gBAAgB;IAACc,IAAI,EAAEA,IAAK;IAACX,MAAM,EAAEA,MAAO;IAACG,EAAE,EAAEA;EAAG,GAChDG,OACa,CAAC,GAEnBA,OACH;AACL,CAAC;AAED,eAAe,CAACb,WAAW,CAAC","ignoreList":[]}

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,5 @@
+export { useLocalStorage } from "./useLocalStorage.js";
+export { useLocalStorageValue } from "./useLocalStorageValue.js";
+export { useLocalStorageValues } from "./useLocalStorageValues.js";
+
+//# sourceMappingURL=index.js.map

package/presentation/localStorage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLocalStorage","useLocalStorageValue","useLocalStorageValues"],"sources":["index.ts"],"sourcesContent":["export { useLocalStorage } from \"./useLocalStorage.js\";\nexport { useLocalStorageValue } from \"./useLocalStorageValue.js\";\nexport { useLocalStorageValues } from \"./useLocalStorageValues.js\";\n"],"mappings":"AAAA,SAASA,eAAe;AACxB,SAASC,oBAAoB;AAC7B,SAASC,qBAAqB","ignoreList":[]}

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,21 @@
+import { LocalStorageFeature } from "../../features/localStorage/feature.js";
+import { useFeature } from "../../shared/di/useFeature.js";
+
+/**
+ * Returns the LocalStorage instance from DI.
+ * Useful when you want to call service methods imperatively inside components.
+ */
+export 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)
+  };
+}
+
+//# sourceMappingURL=useLocalStorage.js.map

package/presentation/localStorage/useLocalStorage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["LocalStorageFeature","useFeature","useLocalStorage","localStorageService","get","bind","set","remove","clear","keys"],"sources":["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"],"mappings":"AAAA,SAASA,mBAAmB;AAE5B,SAASC,UAAU;;AAEnB;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAA,EAA2B;EACtD,MAAM;IAAEC;EAAoB,CAAC,GAAGF,UAAU,CAACD,mBAAmB,CAAC;EAE/D,OAAO;IACHI,GAAG,EAAED,mBAAmB,CAACC,GAAG,CAACC,IAAI,CAACF,mBAAmB,CAAC;IACtDG,GAAG,EAAEH,mBAAmB,CAACG,GAAG,CAACD,IAAI,CAACF,mBAAmB,CAAC;IACtDI,MAAM,EAAEJ,mBAAmB,CAACI,MAAM,CAACF,IAAI,CAACF,mBAAmB,CAAC;IAC5DK,KAAK,EAAEL,mBAAmB,CAACK,KAAK,CAACH,IAAI,CAACF,mBAAmB,CAAC;IAC1DM,IAAI,EAAEN,mBAAmB,CAACM,IAAI,CAACJ,IAAI,CAACF,mBAAmB;EAC3D,CAAC;AACL","ignoreList":[]}

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,20 @@
+import { useEffect, useState } from "react";
+import { autorun } from "mobx";
+import { LocalStorageFeature } from "../../features/localStorage/feature.js";
+import { useFeature } from "../../shared/di/useFeature.js";
+export 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;
+}
+
+//# sourceMappingURL=useLocalStorageValue.js.map

package/presentation/localStorage/useLocalStorageValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","autorun","LocalStorageFeature","useFeature","useLocalStorageValue","key","localStorageService","value","setValue","get","dispose"],"sources":["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"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,OAAO,QAAQ,MAAM;AAC9B,SAASC,mBAAmB;AAC5B,SAASC,UAAU;AAEnB,OAAO,SAASC,oBAAoBA,CAAaC,GAAW,EAAiB;EACzE,MAAM;IAAEC;EAAoB,CAAC,GAAGH,UAAU,CAACD,mBAAmB,CAAC;EAE/D,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAGR,QAAQ,CAAgB,MAAMM,mBAAmB,CAACG,GAAG,CAAIJ,GAAG,CAAC,CAAC;EAExFN,SAAS,CAAC,MAAM;IACZ,MAAMW,OAAO,GAAGT,OAAO,CAAC,MAAM;MAC1B,MAAMM,KAAK,GAAGD,mBAAmB,CAACG,GAAG,CAAIJ,GAAG,CAAC;MAC7CG,QAAQ,CAACD,KAAK,CAAC;IACnB,CAAC,CAAC;IACF,OAAO,MAAMG,OAAO,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACJ,mBAAmB,EAAED,GAAG,CAAC,CAAC;EAE9B,OAAOE,KAAK;AAChB","ignoreList":[]}

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,39 @@
+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";
+
+/**
+ * Observes multiple keys in LocalStorage and returns an object of { key: value }.
+ * Re-renders when any of the observed keys change.
+ */
+export 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;
+}
+
+//# sourceMappingURL=useLocalStorageValues.js.map

package/presentation/localStorage/useLocalStorageValues.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useState","autorun","isEqual","LocalStorageFeature","useFeature","useLocalStorageValues","keys","localStorageService","values","setValues","initial","key","get","valuesRef","dispose","snapshot","current","join"],"sources":["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"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACnD,SAASC,OAAO,QAAQ,MAAM;AAC9B,OAAOC,OAAO,MAAM,mBAAmB;AACvC,SAASC,mBAAmB;AAC5B,SAASC,UAAU;;AAEnB;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CACjCC,IAA0B,EAChB;EACV,MAAM;IAAEC;EAAoB,CAAC,GAAGH,UAAU,CAACD,mBAAmB,CAAC;EAE/D,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAGT,QAAQ,CAAa,MAAM;IACnD,MAAMU,OAAmB,GAAG,CAAC,CAAC;IAC9B,KAAK,MAAMC,GAAG,IAAIL,IAAI,EAAE;MACpBI,OAAO,CAACC,GAAG,CAAC,GAAGJ,mBAAmB,CAACK,GAAG,CAAMD,GAAG,CAAC;IACpD;IACA,OAAOD,OAAO;EAClB,CAAC,CAAC;EAEF,MAAMG,SAAS,GAAGd,MAAM,CAACS,MAAM,CAAC;EAEhCV,SAAS,CAAC,MAAM;IACZ,MAAMgB,OAAO,GAAGb,OAAO,CAAC,MAAM;MAC1B,MAAMc,QAAoB,GAAG,CAAC,CAAC;MAC/B,KAAK,MAAMJ,GAAG,IAAIL,IAAI,EAAE;QACpBS,QAAQ,CAACJ,GAAG,CAAC,GAAGJ,mBAAmB,CAACK,GAAG,CAAMD,GAAG,CAAC;MACrD;MAEA,IAAI,CAACT,OAAO,CAACa,QAAQ,EAAEF,SAAS,CAACG,OAAO,CAAC,EAAE;QACvCP,SAAS,CAACM,QAAQ,CAAC;QACnBF,SAAS,CAACG,OAAO,GAAGD,QAAQ;MAChC;IACJ,CAAC,CAAC;IACF,OAAO,MAAMD,OAAO,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACP,mBAAmB,EAAED,IAAI,CAACW,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;EAEzC,OAAOT,MAAM;AACjB","ignoreList":[]}

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,32 @@
+import { createImplementation } from "@webiny/di";
+import { RouteElementRegistry } from "./abstractions.js";
+class RouteElementRegistryImplementation {
+  elements = new Map();
+
+  /** Register a React element for a given route. */
+  register(routeName, element) {
+    this.elements.set(routeName, element);
+  }
+
+  /** Get the element for a matched route by name. */
+  getElement(routeName) {
+    return this.elements.get(routeName) ?? null;
+  }
+
+  /** Clear all registered elements. Useful in tests or hot reloads. */
+  clear() {
+    this.elements.clear();
+  }
+
+  /** List all registered route names. */
+  list() {
+    return [...this.elements.keys()];
+  }
+}
+export const DefaultRouteElementRegistry = createImplementation({
+  implementation: RouteElementRegistryImplementation,
+  abstraction: RouteElementRegistry,
+  dependencies: []
+});
+
+//# sourceMappingURL=RouteElementRegistry.js.map

package/presentation/router/RouteElementRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createImplementation","RouteElementRegistry","RouteElementRegistryImplementation","elements","Map","register","routeName","element","set","getElement","get","clear","list","keys","DefaultRouteElementRegistry","implementation","abstraction","dependencies"],"sources":["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"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,YAAY;AACjD,SAASC,oBAAoB;AAE7B,MAAMC,kCAAkC,CAAC;EACpBC,QAAQ,GAAG,IAAIC,GAAG,CAA0B,CAAC;;EAE9D;EACAC,QAAQA,CAACC,SAAiB,EAAEC,OAAwB,EAAQ;IACxD,IAAI,CAACJ,QAAQ,CAACK,GAAG,CAACF,SAAS,EAAEC,OAAO,CAAC;EACzC;;EAEA;EACAE,UAAUA,CAACH,SAAiB,EAA0B;IAClD,OAAO,IAAI,CAACH,QAAQ,CAACO,GAAG,CAACJ,SAAS,CAAC,IAAI,IAAI;EAC/C;;EAEA;EACAK,KAAKA,CAAA,EAAS;IACV,IAAI,CAACR,QAAQ,CAACQ,KAAK,CAAC,CAAC;EACzB;;EAEA;EACAC,IAAIA,CAAA,EAAa;IACb,OAAO,CAAC,GAAG,IAAI,CAACT,QAAQ,CAACU,IAAI,CAAC,CAAC,CAAC;EACpC;AACJ;AAEA,OAAO,MAAMC,2BAA2B,GAAGd,oBAAoB,CAAC;EAC5De,cAAc,EAAEb,kCAAkC;EAClDc,WAAW,EAAEf,oBAAoB;EACjCgB,YAAY,EAAE;AAClB,CAAC,CAAC","ignoreList":[]}

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,4 @@
+import { Abstraction } from "@webiny/di";
+export const RouteElementRegistry = new Abstraction("RouteElementRegistry");
+
+//# sourceMappingURL=abstractions.js.map

package/presentation/router/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Abstraction","RouteElementRegistry"],"sources":["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"],"mappings":"AACA,SAASA,WAAW,QAAQ,YAAY;AASxC,OAAO,MAAMC,oBAAoB,GAAG,IAAID,WAAW,CAAwB,sBAAsB,CAAC","ignoreList":[]}

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,17 @@
+import React from "react";
+import { RouteElementRegistry, useRoute } from "../index.js";
+import { useContainer } from "../../../shared/di/DiContainerProvider.js";
+export 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, element ?? null);
+};
+
+//# sourceMappingURL=RouteContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","RouteElementRegistry","useRoute","useContainer","RouteContent","route","container","elementRegistry","resolve","element","getElement","name","createElement","Fragment"],"sources":["RouteContent.tsx"],"sourcesContent":["import React from \"react\";\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 <>{element ?? null}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB,EAAEC,QAAQ;AACvC,SAASC,YAAY;AAErB,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAM,CAAC,GAAGH,QAAQ,CAAC,CAAC;EAC5B,MAAMI,SAAS,GAAGH,YAAY,CAAC,CAAC;EAChC,MAAMI,eAAe,GAAGD,SAAS,CAACE,OAAO,CAACP,oBAAoB,CAAC;EAE/D,IAAI,CAACI,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EAEA,MAAMI,OAAO,GAAGF,eAAe,CAACG,UAAU,CAACL,KAAK,CAACM,IAAI,CAAC;EAEtD,oBAAOX,KAAA,CAAAY,aAAA,CAAAZ,KAAA,CAAAa,QAAA,QAAGJ,OAAO,IAAI,IAAO,CAAC;AACjC,CAAC","ignoreList":[]}

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,22 @@
+import React from "react";
+import { makeDecoratable } from "@webiny/react-composition";
+import { SimpleLink } from "./SimpleLink.js";
+import { useRouter } from "../../../router.js";
+
+// The props are generic over the Route's schema.
+
+export 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, Object.assign({
+    to: href
+  }, rest), children);
+});
+export const RouteLinkComponent = RouteLink;
+
+//# sourceMappingURL=RouteLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","makeDecoratable","SimpleLink","useRouter","RouteLink","props","router","children","route","rest","href","params","getLink","createElement","Object","assign","to","RouteLinkComponent"],"sources":["RouteLink.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport type { Route, RouteParamsDefinition, RouteParamsInfer } from \"~/features/router/Route.js\";\nimport { SimpleLink } from \"./SimpleLink.js\";\nimport { useRouter } from \"~/router.js\";\n\ntype BaseAnchorAttributes = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\">;\n\n// The props are generic over the Route's schema.\nexport type RouteLinkProps<TParams extends RouteParamsDefinition | undefined> = [\n    TParams extends RouteParamsDefinition\n        ? {\n              route: Route<TParams>;\n              params: RouteParamsInfer<TParams>;\n          }\n        : { route: Route<TParams> }\n][0] &\n    BaseAnchorAttributes;\n\nexport const RouteLink = makeDecoratable(\n    \"RouteLink\",\n    <TParams extends RouteParamsDefinition | undefined>(props: RouteLinkProps<TParams>) => {\n        const router = useRouter();\n\n        const { children, route, ...rest } = props as any;\n\n        const href = rest.params ? router.getLink(route!, rest.params) : router.getLink(route!);\n\n        return (\n            <SimpleLink to={href} {...rest}>\n                {children}\n            </SimpleLink>\n        );\n    }\n);\n\nexport const RouteLinkComponent = RouteLink;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,UAAU;AACnB,SAASC,SAAS;;AAIlB;;AAWA,OAAO,MAAMC,SAAS,GAAGH,eAAe,CACpC,WAAW,EACyCI,KAA8B,IAAK;EACnF,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAE1B,MAAM;IAAEI,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAY;EAEjD,MAAMK,IAAI,GAAGD,IAAI,CAACE,MAAM,GAAGL,MAAM,CAACM,OAAO,CAACJ,KAAK,EAAGC,IAAI,CAACE,MAAM,CAAC,GAAGL,MAAM,CAACM,OAAO,CAACJ,KAAM,CAAC;EAEvF,oBACIR,KAAA,CAAAa,aAAA,CAACX,UAAU,EAAAY,MAAA,CAAAC,MAAA;IAACC,EAAE,EAAEN;EAAK,GAAKD,IAAI,GACzBF,QACO,CAAC;AAErB,CACJ,CAAC;AAED,OAAO,MAAMU,kBAAkB,GAAGb,SAAS","ignoreList":[]}

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

@@ -0,0 +1,44 @@
+import React from "react";
+type BaseAnchorAttributes = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+export type SimpleLinkProps = BaseAnchorAttributes & {
+    to: string;
+};
+export declare const SimpleLink: (({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element) & {
+    original: ({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element) & {
+        original: ({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element) & {
+        original: ({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export declare const LinkComponent: (({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element) & {
+    original: ({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element) & {
+        original: ({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element) & {
+        original: ({ children, to, ...rest }: SimpleLinkProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export {};