@webstudio-is/image 0.1.0 → 0.15.0

package/lib/cjs/image-loaders.cjs

@@ -1,39 +1,54 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.localImageLoader = exports.cloudflareImageLoader = void 0;
-const warn_once_1 = __importDefault(require("warn-once"));
-const image_optimize_1 = require("./image-optimize");
-/**
- * Default image loader in case of no loader provided
- * https://developers.cloudflare.com/images/image-resizing/url-format/
- **/
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var image_loaders_exports = {};
+__export(image_loaders_exports, {
+  cloudflareImageLoader: () => cloudflareImageLoader,
+  localImageLoader: () => localImageLoader
+});
+module.exports = __toCommonJS(image_loaders_exports);
+var import_warn_once = __toESM(require("warn-once"), 1);
+var import_image_optimize = require("./image-optimize");
 const cloudflareImageLoader = (loaderOptions) => ({ width, src, quality }) => {
-    if (process.env.NODE_ENV !== "production") {
-        (0, warn_once_1.default)(image_optimize_1.allSizes.includes(width) === false, "Width must be only from allowed values");
-    }
-    const options = `width=${width},quality=${quality},format=auto`;
-    // Cloudflare docs say that we don't need to urlencode the path params
-    const pathname = `/cdn-cgi/image/${options}/${src}`;
-    if (loaderOptions?.resizeOrigin != null) {
-        const url = new URL(pathname, loaderOptions.resizeOrigin);
-        return url.href;
-    }
-    else {
-        return pathname;
-    }
+  if (true) {
+    (0, import_warn_once.default)(
+      import_image_optimize.allSizes.includes(width) === false,
+      "Width must be only from allowed values"
+    );
+  }
+  const options = `width=${width},quality=${quality},format=auto`;
+  const pathname = `/cdn-cgi/image/${options}/${src}`;
+  if (loaderOptions?.resizeOrigin != null) {
+    const url = new URL(pathname, loaderOptions.resizeOrigin);
+    return url.href;
+  } else {
+    return pathname;
+  }
 };
-exports.cloudflareImageLoader = cloudflareImageLoader;
-/**
- * Fake pseudo loader for local testing purposes
- **/
 const localImageLoader = () => ({ width, src, quality }) => {
-    // Just emulate like we really resize the image
-    const params = new URLSearchParams();
-    params.set("width", `${width}`);
-    params.set("quality", `${quality}`);
-    return `${src}?${params.toString()}`;
+  const params = new URLSearchParams();
+  params.set("width", `${width}`);
+  params.set("quality", `${quality}`);
+  return `${src}?${params.toString()}`;
 };
-exports.localImageLoader = localImageLoader;

package/lib/cjs/image-optimize.cjs

@@ -1,187 +1,117 @@
 "use strict";
-/**
- * # Responsive Image component helpers.
- *
- * ## Quick summary about img srcset and sizes attributes:
- *
- * There are 2 ways to define what image will be loaded in the img property srcset.
- *
- * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
- *   src will be selected depending on `device-pixel-ratio`.
- *
- * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
- *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
- *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
- *
- *   The browser finds the first matching media query from source size descriptors,
- *   then use source size value to generate internally srcset
- *   with pixel density descriptors dividing width descriptor value by source size value.
- *
- *   Using the example above for viewport width 800px.
- *   The first matching media query is (max-width: 1200px)
- *   source size value is 70vw  equal to 800px * 0,7 = 560px
- *
- *   browser internal srcset will be (we divide `w` descriptor by source size value):
- *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
- *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
- *
- *   Finally same rules as for pixel density descriptor 'x' are applied.
- *
- * ## Algorithm (without optimizations):
- *
- * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
- * This is good for caching, as we can cache image with specific width and then use it for different devices.
- *
- * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
- * > If allSizes.length is too small, you will deliver too big images to the user,
- * > if allSizes.length is too big, you will have many caches misses.
- *
- * If img has a defined width property.
- *   1. find the first value from allSizes which is greater or equal to the width property
- *   2. use found value to generate srcset with pixel density descriptor 'x'
- *
- *
- * If img has no defined width property.
- *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
- *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
- *
- * Optimizations applied now:
- *
- * - If the sizes property is defined, we can exclude from `srcsets` all images
- *   which are smaller than the `smallestRatio * smallesDeviceSize`
- *
- * Future (not implemented) optimizations and improvements:
- *
- * - Knowing image size on different viewport widths we can provide nondefault sizes property
- * - Knowledge of Image aspect-ratio would allow cropping images serverside.
- * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
- * - Slow networks optimizations
- * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
- *
- * # Attributions
- *
- * The MIT License (MIT)
- *
- * applies to:
- *
- * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2022 Vercel, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute,
- * sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
- * is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies
- * or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
- * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
- * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
- * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- **/
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImageAttributes = exports.allSizes = void 0;
-/**
- * max(...imageSizes) must be less then min(...deviceSizes)
- **/
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var image_optimize_exports = {};
+__export(image_optimize_exports, {
+  allSizes: () => allSizes,
+  getImageAttributes: () => getImageAttributes
+});
+module.exports = __toCommonJS(image_optimize_exports);
 const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
 const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
-exports.allSizes = [...imageSizes, ...deviceSizes];
-/**
- * https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx
- **/
+const allSizes = [...imageSizes, ...deviceSizes];
 const getWidths = (width, sizes) => {
-    if (sizes) {
-        // Find all the "vw" percent sizes used in the sizes prop
-        const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
-        const percentSizes = [];
-        for (let match; (match = viewportWidthRe.exec(sizes)); match) {
-            percentSizes.push(parseInt(match[2], 10));
-        }
-        if (percentSizes.length) {
-            // we can exclude from srcSets all images which are smaller than the smallestRatio * smallesDeviceSize
-            const smallestRatio = Math.min(...percentSizes) * 0.01;
-            return {
-                widths: exports.allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
-                kind: "w",
-            };
-        }
-        return { widths: exports.allSizes, kind: "w" };
+  if (sizes) {
+    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
+    const percentSizes = [];
+    for (let match; match = viewportWidthRe.exec(sizes); match) {
+      percentSizes.push(parseInt(match[2], 10));
     }
-    if (width == null) {
-        return { widths: deviceSizes, kind: "w" };
+    if (percentSizes.length) {
+      const smallestRatio = Math.min(...percentSizes) * 0.01;
+      return {
+        widths: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
+        kind: "w"
+      };
     }
-    const widths = [
-        ...new Set([width, width * 2].map((w) => exports.allSizes.find((p) => p >= w) || exports.allSizes[exports.allSizes.length - 1])),
-    ];
-    return { widths, kind: "x" };
+    return { widths: allSizes, kind: "w" };
+  }
+  if (width == null) {
+    return { widths: deviceSizes, kind: "w" };
+  }
+  const widths = [
+    ...new Set(
+      [width, width * 2].map(
+        (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1]
+      )
+    )
+  ];
+  return { widths, kind: "x" };
 };
-const generateImgAttrs = ({ src, width, quality, sizes, loader, }) => {
-    const { widths, kind } = getWidths(width, sizes);
-    return {
-        sizes: !sizes && kind === "w" ? "100vw" : sizes,
-        srcSet: widths
-            .map((w, i) => `${loader({ src, quality, width: w })} ${kind === "w" ? w : i + 1}${kind}`)
-            .join(", "),
-        // Must be last, to prevent Safari to load images twice
-        src: loader({
-            src,
-            quality,
-            width: widths[widths.length - 1],
-        }),
-    };
+const generateImgAttrs = ({
+  src,
+  width,
+  quality,
+  sizes,
+  loader
+}) => {
+  const { widths, kind } = getWidths(width, sizes);
+  return {
+    sizes: !sizes && kind === "w" ? "100vw" : sizes,
+    srcSet: widths.map(
+      (w, i) => `${loader({ src, quality, width: w })} ${kind === "w" ? w : i + 1}${kind}`
+    ).join(", "),
+    src: loader({
+      src,
+      quality,
+      width: widths[widths.length - 1]
+    })
+  };
 };
 const getInt = (value) => {
-    if (typeof value === "number") {
-        return Math.round(value);
-    }
-    if (typeof value === "string") {
-        const vNum = Number.parseFloat(value);
-        if (!Number.isNaN(vNum)) {
-            return Math.round(vNum);
-        }
+  if (typeof value === "number") {
+    return Math.round(value);
+  }
+  if (typeof value === "string") {
+    const vNum = Number.parseFloat(value);
+    if (!Number.isNaN(vNum)) {
+      return Math.round(vNum);
     }
-    return undefined;
+  }
+  return void 0;
 };
-/**
- * DEFAULT_SIZES Just an assumption that most images (except hero and icons) are 100% wide on mobile and 50% on desktop.
- * For icons width are usually set explicitly so DEFAULT_SIZES is not applied.
- * For hero images, we can allow in UI to select sizes=100vw explicitly.
- * Anyway, the best would be to calculate this based on canvas data from different breakpoints.
- * See ../component-utils/image for detailed description
- **/
 const DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
 const DEFAULT_QUALITY = 80;
 const getImageAttributes = (props) => {
-    const width = getInt(props.width);
-    const quality = Math.max(Math.min(getInt(props.quality) ?? DEFAULT_QUALITY, 100), 0);
-    if (props.src != null && props.src != "") {
-        if (props.srcSet == null && props.optimize) {
-            const sizes = props.sizes ?? (props.width == null ? DEFAULT_SIZES : undefined);
-            return generateImgAttrs({
-                src: props.src,
-                width,
-                quality,
-                sizes,
-                loader: props.loader,
-            });
-        }
-        const resAttrs = { src: props.src };
-        if (props.srcSet != null) {
-            resAttrs.srcSet = props.srcSet;
-        }
-        if (props.sizes != null) {
-            resAttrs.sizes = props.sizes;
-        }
-        return resAttrs;
+  const width = getInt(props.width);
+  const quality = Math.max(
+    Math.min(getInt(props.quality) ?? DEFAULT_QUALITY, 100),
+    0
+  );
+  if (props.src != null && props.src !== "") {
+    if (props.srcSet == null && props.optimize) {
+      const sizes = props.sizes ?? (props.width == null ? DEFAULT_SIZES : void 0);
+      return generateImgAttrs({
+        src: props.src,
+        width,
+        quality,
+        sizes,
+        loader: props.loader
+      });
+    }
+    const resAttrs = { src: props.src };
+    if (props.srcSet != null) {
+      resAttrs.srcSet = props.srcSet;
+    }
+    if (props.sizes != null) {
+      resAttrs.sizes = props.sizes;
     }
-    return null;
+    return resAttrs;
+  }
+  return null;
 };
-exports.getImageAttributes = getImageAttributes;

package/lib/cjs/image.cjs

@@ -1,29 +1,61 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const image_optimize_1 = require("./image-optimize");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var image_exports = {};
+__export(image_exports, {
+  Image: () => Image
+});
+module.exports = __toCommonJS(image_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_image_optimize = require("./image-optimize");
 const defaultTag = "img";
-exports.Image = (0, react_1.forwardRef)(({ quality, loader, optimize, ...imageProps }, ref) => {
-    // Temporary set to false, to support previous image behaviour
-    const DEFAULT_OPTIMIZE = false;
-    const imageAttributes = (0, image_optimize_1.getImageAttributes)({
-        src: imageProps.src,
-        srcSet: imageProps.srcSet,
-        sizes: imageProps.sizes,
-        width: imageProps.width,
-        quality,
-        loader,
-        optimize: optimize ?? DEFAULT_OPTIMIZE,
+const Image = (0, import_react.forwardRef)(
+  ({
+    quality,
+    loader,
+    optimize = true,
+    loading = "lazy",
+    decoding = "async",
+    ...imageProps
+  }, ref) => {
+    const imageAttributes = (0, import_image_optimize.getImageAttributes)({
+      src: imageProps.src,
+      srcSet: imageProps.srcSet,
+      sizes: imageProps.sizes,
+      width: imageProps.width,
+      quality,
+      loader,
+      optimize
     }) ?? { src: imagePlaceholderSvg };
-    return ((0, jsx_runtime_1.jsx)("img", { ...imageProps, ...imageAttributes, decoding: "async", ref: ref }));
-});
-exports.Image.defaultProps = {
-    src: "",
-    loading: "lazy",
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+      ...imageProps,
+      ...imageAttributes,
+      decoding,
+      loading,
+      ref
+    });
+  }
+);
+Image.defaultProps = {
+  src: ""
 };
-exports.Image.displayName = "Image";
+Image.displayName = "Image";
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   width="140"
   height="140"

package/lib/cjs/index.cjs

@@ -1,34 +1,34 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageProps = exports.loaders = exports.Image = void 0;
-var image_1 = require("./image");
-Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return image_1.Image; } });
-exports.loaders = __importStar(require("./image-loaders"));
-var image_props_json_1 = require("./__generated__/image.props.json");
-Object.defineProperty(exports, "imageProps", { enumerable: true, get: function () { return __importDefault(image_props_json_1).default; } });
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  Image: () => import_image.Image,
+  imageProps: () => import_image_props.default,
+  loaders: () => loaders
+});
+module.exports = __toCommonJS(src_exports);
+var import_image = require("./image");
+var loaders = __toESM(require("./image-loaders"), 1);
+var import_image_props = __toESM(require("./__generated__/image.props.json"), 1);

package/lib/image-loaders.js

@@ -1,31 +1,28 @@
 import warnOnce from "warn-once";
 import { allSizes } from "./image-optimize";
-/**
- * Default image loader in case of no loader provided
- * https://developers.cloudflare.com/images/image-resizing/url-format/
- **/
-export const cloudflareImageLoader = (loaderOptions) => ({ width, src, quality }) => {
-    if (process.env.NODE_ENV !== "production") {
-        warnOnce(allSizes.includes(width) === false, "Width must be only from allowed values");
-    }
-    const options = `width=${width},quality=${quality},format=auto`;
-    // Cloudflare docs say that we don't need to urlencode the path params
-    const pathname = `/cdn-cgi/image/${options}/${src}`;
-    if (loaderOptions?.resizeOrigin != null) {
-        const url = new URL(pathname, loaderOptions.resizeOrigin);
-        return url.href;
-    }
-    else {
-        return pathname;
-    }
+const cloudflareImageLoader = (loaderOptions) => ({ width, src, quality }) => {
+  if (true) {
+    warnOnce(
+      allSizes.includes(width) === false,
+      "Width must be only from allowed values"
+    );
+  }
+  const options = `width=${width},quality=${quality},format=auto`;
+  const pathname = `/cdn-cgi/image/${options}/${src}`;
+  if (loaderOptions?.resizeOrigin != null) {
+    const url = new URL(pathname, loaderOptions.resizeOrigin);
+    return url.href;
+  } else {
+    return pathname;
+  }
 };
-/**
- * Fake pseudo loader for local testing purposes
- **/
-export const localImageLoader = () => ({ width, src, quality }) => {
-    // Just emulate like we really resize the image
-    const params = new URLSearchParams();
-    params.set("width", `${width}`);
-    params.set("quality", `${quality}`);
-    return `${src}?${params.toString()}`;
+const localImageLoader = () => ({ width, src, quality }) => {
+  const params = new URLSearchParams();
+  params.set("width", `${width}`);
+  params.set("quality", `${quality}`);
+  return `${src}?${params.toString()}`;
+};
+export {
+  cloudflareImageLoader,
+  localImageLoader
 };