@webiny/app 0.0.0-mt-1

package/plugins/image.js

@@ -0,0 +1,165 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["transform", "srcSet"];
+import React from "react";
+import { Image } from "@webiny/ui/Image";
+var SUPPORTED_IMAGE_RESIZE_WIDTHS = [100, 300, 500, 750, 1000, 1500, 2500];
+/**
+ * Width of the image should not be just any random number. For optimization reasons,
+ * we only allow the ones listed in SUPPORTED_IMAGE_RESIZE_WIDTHS list (Webiny Cloud supports only these).
+ */
+
+var getSupportedImageResizeWidth = function getSupportedImageResizeWidth(width) {
+  var output = SUPPORTED_IMAGE_RESIZE_WIDTHS[0];
+  var i = SUPPORTED_IMAGE_RESIZE_WIDTHS.length;
+
+  while (i >= 0) {
+    if (width === SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {
+      output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
+      break;
+    }
+
+    if (width > SUPPORTED_IMAGE_RESIZE_WIDTHS[i]) {
+      // Use next larger width. If there isn't any, use current.
+      output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i + 1];
+
+      if (!output) {
+        output = SUPPORTED_IMAGE_RESIZE_WIDTHS[i];
+      }
+
+      break;
+    }
+
+    i--;
+  }
+
+  return output;
+};
+/**
+ * Currently we only allow "width" as a transform option.
+ * @param args
+ */
+
+
+var sanitizeTransformArgs = function sanitizeTransformArgs(args) {
+  var output = {};
+
+  if (args) {
+    var width = parseInt(args.width);
+
+    if (width > 0) {
+      output.width = getSupportedImageResizeWidth(width);
+    }
+  }
+
+  return output;
+};
+
+var getSizes = function getSizes(width) {
+  // Check if width was set as percentage, with "%" in the value.
+  if (typeof width === "string" && width.endsWith("%")) {
+    return "".concat(parseInt(width), "vw");
+  } // Check if width was set as viewport width, with "vw" in the value.
+
+
+  if (typeof width === "string" && width.endsWith("vw")) {
+    return "".concat(parseInt(width), "vw");
+  } // Check if width was set as relative, with "em" in the value.
+
+
+  if (typeof width === "string" && width.endsWith("em")) {
+    return "".concat(parseInt(width), "em");
+  }
+
+  return null;
+};
+
+var isFixedImageWidth = function isFixedImageWidth(width) {
+  if (Number.isFinite(width)) {
+    return true;
+  }
+
+  if (typeof width === "string" && width.endsWith("px")) {
+    return true;
+  }
+
+  return false;
+};
+
+var getSrcSetAutoSizes = function getSrcSetAutoSizes(max) {
+  max = isFixedImageWidth(max) ? parseInt("" + max) : 2500;
+  var maxWidth = getSupportedImageResizeWidth(max);
+  return SUPPORTED_IMAGE_RESIZE_WIDTHS.filter(function (supportedWidth) {
+    return supportedWidth <= maxWidth;
+  });
+};
+
+var convertTransformToQueryParams = function convertTransformToQueryParams(transform) {
+  return Object.keys(transform).map(function (key) {
+    return "".concat(key, "=").concat(transform[key]);
+  }).join("&");
+};
+
+export default (function () {
+  var imagePlugin = {
+    name: "image-component",
+    type: "image-component",
+    presets: {
+      avatar: {
+        width: 300
+      }
+    },
+    getImageSrc: function getImageSrc(props) {
+      if (!props) {
+        return "";
+      }
+
+      var src = props.src,
+          transform = props.transform;
+
+      if (!transform) {
+        return src;
+      }
+
+      if (!src || src.startsWith("data:") || src.endsWith("svg")) {
+        return src;
+      }
+
+      var params = sanitizeTransformArgs(transform);
+      params = convertTransformToQueryParams(params);
+      return src + "?" + params;
+    },
+    render: function render(props) {
+      var transform = props.transform,
+          srcSetInitial = props.srcSet,
+          imageProps = _objectWithoutProperties(props, _excluded);
+
+      var srcSet = srcSetInitial;
+      var sizes;
+      var src = imageProps.src;
+
+      if (srcSet && srcSet === "auto") {
+        srcSet = {}; // Check if image width was forced, and additionally if width was set as pixels, with "px" in the value.
+
+        var forcedWidth = props.width || props.style && props.style.width;
+        var srcSetAutoWidths = getSrcSetAutoSizes(forcedWidth);
+        srcSetAutoWidths.forEach(function (width) {
+          srcSet[width + "w"] = imagePlugin.getImageSrc({
+            src: src,
+            transform: _objectSpread(_objectSpread({}, transform), {}, {
+              width: width
+            })
+          });
+        });
+        sizes = getSizes(forcedWidth);
+      }
+
+      return /*#__PURE__*/React.createElement(Image, Object.assign({}, imageProps, {
+        srcSet: srcSet,
+        src: src,
+        sizes: sizes
+      }));
+    }
+  };
+  return imagePlugin;
+});

package/plugins/index.d.ts

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

package/plugins/index.js

@@ -0,0 +1,73 @@
+import React from "react";
+import warning from "warning";
+import { plugins } from "@webiny/plugins";
+import imagePlugin from "./image";
+export { imagePlugin };
+
+var PluginComponent = function PluginComponent(props) {
+  return props.children;
+};
+
+var PluginsComponent = function PluginsComponent(props) {
+  return props.children;
+};
+
+export var renderPlugin = function renderPlugin(name) {
+  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _options$wrapper = options.wrapper,
+      wrapper = _options$wrapper === void 0 ? true : _options$wrapper,
+      _options$fn = options.fn,
+      fn = _options$fn === void 0 ? "render" : _options$fn;
+  var plugin = plugins.byName(name);
+  warning(plugin, "No such plugin \"".concat(name, "\""));
+
+  if (!plugin) {
+    return null;
+  }
+
+  var content = plugin[fn](params);
+
+  if (content) {
+    return wrapper ? /*#__PURE__*/React.createElement(PluginComponent, {
+      key: plugin.name,
+      name: name,
+      params: params,
+      fn: fn
+    }, content) : /*#__PURE__*/React.cloneElement(content, {
+      key: plugin.name
+    });
+  }
+
+  return null;
+};
+export var renderPlugins = function renderPlugins(type) {
+  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _options$wrapper2 = options.wrapper,
+      wrapper = _options$wrapper2 === void 0 ? true : _options$wrapper2,
+      _options$fn2 = options.fn,
+      fn = _options$fn2 === void 0 ? "render" : _options$fn2,
+      _options$filter = options.filter,
+      filter = _options$filter === void 0 ? function (v) {
+    return v;
+  } : _options$filter,
+      reverse = options.reverse;
+  var content = plugins.byType(type).filter(filter).map(function (plugin) {
+    return renderPlugin(plugin.name, params, {
+      wrapper: wrapper,
+      fn: fn
+    });
+  }).filter(Boolean);
+
+  if (reverse) {
+    content.reverse();
+  }
+
+  return wrapper ? /*#__PURE__*/React.createElement(PluginsComponent, {
+    type: type,
+    params: params,
+    fn: fn
+  }, content) : content;
+};
+export default [imagePlugin];

package/types.d.ts

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

package/types.js

@@ -0,0 +1,2 @@
+import { Plugin } from "@webiny/plugins/types";
+export { Plugin };