@webstudio-is/image 0.91.0 → 0.92.0

package/lib/image-dev.stories.js

@@ -0,0 +1,71 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Image as ImagePrimitive, createImageLoader } from "./";
+import localLogoImage from "../storybook-assets/logo.webp";
+export default {
+  title: "Components/ImageDev"
+};
+const USE_CLOUDFLARE_IMAGE_TRANSFORM = false;
+const REMOTE_SELF_DOMAIN_IMAGE = "https://webstudio.is/logo.webp";
+const imageSrc = USE_CLOUDFLARE_IMAGE_TRANSFORM ? REMOTE_SELF_DOMAIN_IMAGE : localLogoImage;
+const imageLoader = createImageLoader({
+  imageBaseUrl: USE_CLOUDFLARE_IMAGE_TRANSFORM ? "https://webstudio.is/cdn-cgi/image/" : ""
+});
+const ImageBase = (args) => {
+  const style = {
+    maxWidth: "100%",
+    display: "block",
+    ...args.style
+  };
+  return /* @__PURE__ */ jsx(
+    ImagePrimitive,
+    {
+      ...args,
+      optimize: true,
+      loader: imageLoader,
+      style
+    }
+  );
+};
+export const FixedWidthImage = () => /* @__PURE__ */ jsx(ImageBase, { src: imageSrc, width: "300", height: "400" });
+export const FixedWidthImageCover = () => /* @__PURE__ */ jsx(
+  ImageBase,
+  {
+    src: imageSrc,
+    width: "300",
+    height: "400",
+    style: { objectFit: "cover" }
+  }
+);
+export const UnknownWidthImage = () => /* @__PURE__ */ jsx(ImageBase, { src: imageSrc });
+export const AspectRatioImage = () => /* @__PURE__ */ jsx("div", { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
+  ImageBase,
+  {
+    src: imageSrc,
+    style: { aspectRatio: "2/1", objectFit: "cover", width: "100%" }
+  }
+) });
+export const FillParentImage = () => /* @__PURE__ */ jsx("div", { style: { width: "50%", aspectRatio: "2/1", position: "relative" }, children: /* @__PURE__ */ jsx(
+  ImageBase,
+  {
+    src: imageSrc,
+    style: {
+      objectFit: "cover",
+      position: "absolute",
+      width: "100%",
+      height: "100%"
+    }
+  }
+) });
+export const HeroImage = () => /* @__PURE__ */ jsx(
+  ImageBase,
+  {
+    src: imageSrc,
+    sizes: "100vw",
+    style: {
+      aspectRatio: "3/1",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }
+);

package/lib/image-loaders.js

@@ -1,6 +1,7 @@
+"use strict";
 import warnOnce from "warn-once";
 import { allSizes } from "./image-optimize";
-const createImageLoader = (loaderOptions) => ({ width, src, quality }) => {
+export const createImageLoader = (loaderOptions) => ({ width, src, quality }) => {
   if (true) {
     warnOnce(
       allSizes.includes(width) === false,
@@ -14,6 +15,3 @@ const createImageLoader = (loaderOptions) => ({ width, src, quality }) => {
   searchParams.set("format", "auto");
   return `${imageBaseUrl}${src}?${searchParams.toString()}`;
 };
-export {
-  createImageLoader
-};

package/lib/image-optimize.js

@@ -1,6 +1,7 @@
+"use strict";
 const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
 const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
-const allSizes = [...imageSizes, ...deviceSizes];
+export const allSizes = [...imageSizes, ...deviceSizes];
 const getWidths = (width, sizes) => {
   if (sizes) {
     const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
@@ -64,7 +65,7 @@ const getInt = (value) => {
 };
 const DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
 const DEFAULT_QUALITY = 80;
-const getImageAttributes = (props) => {
+export const getImageAttributes = (props) => {
   const width = getInt(props.width);
   const quality = Math.max(
     Math.min(getInt(props.quality) ?? DEFAULT_QUALITY, 100),
@@ -92,7 +93,3 @@ const getImageAttributes = (props) => {
   }
   return null;
 };
-export {
-  allSizes,
-  getImageAttributes
-};

package/{src/image-optimize.test.ts → lib/image-optimize.test.js}

@@ -1,19 +1,18 @@
+"use strict";
 import { describe, test, expect } from "@jest/globals";
 import { getImageAttributes } from "./image-optimize";
 import { createImageLoader } from "./image-loaders";
-
 describe("Image optimizations applied", () => {
   test("width is number, create pixel density descriptor 'x'", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: 100,
       src: "logo.webp",
-      srcSet: undefined,
-      sizes: undefined,
+      srcSet: void 0,
+      sizes: void 0,
       quality: 100,
-      loader: createImageLoader({ imageBaseUrl: "/asset/image/" }),
+      loader: createImageLoader({ imageBaseUrl: "/asset/image/" })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": undefined,
@@ -22,18 +21,16 @@ describe("Image optimizations applied", () => {
       }
     `);
   });
-
   test("width is undefined, create 'w' descriptor and sizes prop", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
-      width: undefined,
+      width: void 0,
       src: "logo.webp",
-      srcSet: undefined,
-      sizes: undefined,
+      srcSet: void 0,
+      sizes: void 0,
       quality: 90,
-      loader: createImageLoader({ imageBaseUrl: "/asset/image/" }),
+      loader: createImageLoader({ imageBaseUrl: "/asset/image/" })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "(min-width: 1280px) 50vw, 100vw",
@@ -42,18 +39,16 @@ describe("Image optimizations applied", () => {
       }
     `);
   });
-
   test("width is undefined and size defined, creates 'w' descriptor and use input sizes props", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
-      width: undefined,
+      width: void 0,
       src: "logo.webp",
-      srcSet: undefined,
+      srcSet: void 0,
       sizes: "100vw",
       quality: 70,
-      loader: createImageLoader({ imageBaseUrl: "/asset/image/" }),
+      loader: createImageLoader({ imageBaseUrl: "/asset/image/" })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "100vw",
@@ -62,20 +57,18 @@ describe("Image optimizations applied", () => {
       }
     `);
   });
-
   test("width is undefined and size defined, creates 'w' descriptor and use input sizes props, resizeOrigin defined", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
-      width: undefined,
+      width: void 0,
       src: "logo.webp",
-      srcSet: undefined,
+      srcSet: void 0,
       sizes: "100vw",
       quality: 70,
       loader: createImageLoader({
-        imageBaseUrl: "https://resize-origin.is/asset/image/",
-      }),
+        imageBaseUrl: "https://resize-origin.is/asset/image/"
+      })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "100vw",
@@ -84,19 +77,16 @@ describe("Image optimizations applied", () => {
       }
     `);
   });
-
   test("custom loader", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
-      width: undefined,
+      width: void 0,
       src: "https://webstudio.is/logo.webp",
-      srcSet: undefined,
+      srcSet: void 0,
       sizes: "100vw",
       quality: 70,
-      loader: ({ width, src, quality }) =>
-        `${new URL(src).pathname}?w=${width}&q=${quality}`,
+      loader: ({ width, src, quality }) => `${new URL(src).pathname}?w=${width}&q=${quality}`
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`
       {
         "sizes": "100vw",
@@ -106,37 +96,33 @@ describe("Image optimizations applied", () => {
     `);
   });
 });
-
 describe("Image optimizations not applied", () => {
   test("optimize is false", () => {
     const imgAttr = getImageAttributes({
       optimize: false,
       width: 100,
       src: "https://webstudio.is/logo.webp",
-      srcSet: undefined,
-      sizes: undefined,
+      srcSet: void 0,
+      sizes: void 0,
       quality: 100,
-      loader: createImageLoader({ imageBaseUrl: "/asset/image/" }),
+      loader: createImageLoader({ imageBaseUrl: "/asset/image/" })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`
       {
         "src": "https://webstudio.is/logo.webp",
       }
     `);
   });
-
   test("srcSet is defined", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: 100,
       src: "https://webstudio.is/logo.webp",
       srcSet: "user-defined-srcset",
-      sizes: undefined,
+      sizes: void 0,
       quality: 100,
-      loader: createImageLoader({ imageBaseUrl: "/asset/image/" }),
+      loader: createImageLoader({ imageBaseUrl: "/asset/image/" })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`
       {
         "src": "https://webstudio.is/logo.webp",
@@ -144,32 +130,28 @@ describe("Image optimizations not applied", () => {
       }
     `);
   });
-
   test("src is empty", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: 100,
       src: "",
-      srcSet: undefined,
-      sizes: undefined,
+      srcSet: void 0,
+      sizes: void 0,
       quality: 100,
-      loader: createImageLoader({ imageBaseUrl: "/asset/image/" }),
+      loader: createImageLoader({ imageBaseUrl: "/asset/image/" })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`null`);
   });
-
   test("src is undefined", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: 100,
-      src: undefined,
-      srcSet: undefined,
-      sizes: undefined,
+      src: void 0,
+      srcSet: void 0,
+      sizes: void 0,
       quality: 100,
-      loader: createImageLoader({ imageBaseUrl: "/asset/image/" }),
+      loader: createImageLoader({ imageBaseUrl: "/asset/image/" })
     });
-
     expect(imgAttr).toMatchInlineSnapshot(`null`);
   });
 });

package/lib/image.js

@@ -1,8 +1,9 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { getImageAttributes } from "./image-optimize";
 const defaultTag = "img";
-const Image = forwardRef(
+export const Image = forwardRef(
   ({
     quality,
     loader,
@@ -56,6 +57,3 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
     fill="#A2A2A2"
   />
 </svg>`)}`;
-export {
-  Image
-};

package/lib/index.js

@@ -1,6 +1,4 @@
-import { Image } from "./image";
+"use strict";
+export { Image } from "./image";
 export * from "./image-loaders";
 export * from "./image-optimize";
-export {
-  Image
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.91.0",
+  "version": "0.92.0",
   "description": "Image optimization",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -10,15 +10,14 @@
     "warn-once": "^0.1.1"
   },
   "devDependencies": {
-    "@jest/globals": "^29.6.2",
-    "@storybook/react": "^7.2.1",
-    "@types/react": "^18.2.20",
-    "jest": "^29.6.2",
+    "@jest/globals": "^29.6.4",
+    "@storybook/react": "^7.4.0",
+    "@types/react": "^18.2.21",
+    "jest": "^29.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "5.1.6",
+    "typescript": "5.2.2",
     "@webstudio-is/jest-config": "^1.0.7",
-    "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },
@@ -29,13 +28,11 @@
   "exports": {
     "source": "./src/index.ts",
     "types": "./lib/types/index.d.ts",
-    "import": "./lib/index.js",
-    "require": "./lib/cjs/index.js"
+    "import": "./lib/index.js"
   },
   "files": [
     "lib/*",
-    "src/*",
-    "!*.test.*"
+    "!*.{test,stories}.*"
   ],
   "license": "AGPL-3.0-or-later",
   "private": false,
@@ -44,8 +41,8 @@
     "typecheck": "tsc",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "checks": "pnpm typecheck && pnpm test",
-    "dev": "build-package --watch",
-    "build": "build-package",
+    "dev": "pnpm build --watch",
+    "build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
     "dts": "tsc --project tsconfig.dts.json",
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build"

package/lib/cjs/image-loaders.js

@@ -1,49 +0,0 @@
-"use strict";
-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 __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(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  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, {
-  createImageLoader: () => createImageLoader
-});
-module.exports = __toCommonJS(image_loaders_exports);
-var import_warn_once = __toESM(require("warn-once"), 1);
-var import_image_optimize = require("./image-optimize");
-const createImageLoader = (loaderOptions) => ({ width, src, quality }) => {
-  if (true) {
-    (0, import_warn_once.default)(
-      import_image_optimize.allSizes.includes(width) === false,
-      "Width must be only from allowed values"
-    );
-  }
-  const { imageBaseUrl } = loaderOptions;
-  const searchParams = new URLSearchParams();
-  searchParams.set("width", width.toString());
-  searchParams.set("quality", quality.toString());
-  searchParams.set("format", "auto");
-  return `${imageBaseUrl}${src}?${searchParams.toString()}`;
-};

package/lib/cjs/image-optimize.js

@@ -1,118 +0,0 @@
-"use strict";
-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];
-const allSizes = [...imageSizes, ...deviceSizes];
-const getWidths = (width, sizes) => {
-  if (sizes) {
-    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
-    const percentSizes = [];
-    for (let match; match = viewportWidthRe.exec(sizes); match) {
-      percentSizes.push(Number.parseInt(match[2], 10));
-    }
-    if (percentSizes.length) {
-      const smallestRatio = Math.min(...percentSizes) * 0.01;
-      return {
-        widths: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
-        kind: "w"
-      };
-    }
-    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 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);
-    }
-  }
-  return void 0;
-};
-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 : 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 resAttrs;
-  }
-  return null;
-};

package/lib/cjs/image.js

@@ -1,81 +0,0 @@
-"use strict";
-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";
-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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "img",
-      {
-        ...imageProps,
-        ...imageAttributes,
-        decoding,
-        loading,
-        ref
-      }
-    );
-  }
-);
-Image.displayName = "Image";
-const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
-  width="140"
-  height="140"
-  viewBox="0 0 600 600"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  >
-  <rect width="600" height="600" fill="#CCCCCC" />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
-    fill="#A2A2A2"
-  />
-</svg>`)}`;

package/lib/cjs/index.js

@@ -1,27 +0,0 @@
-"use strict";
-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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
-  Image: () => import_image.Image
-});
-module.exports = __toCommonJS(src_exports);
-var import_image = require("./image");
-__reExport(src_exports, require("./image-loaders"), module.exports);
-__reExport(src_exports, require("./image-optimize"), module.exports);

package/lib/cjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/src/image-dev.stories.tsx

@@ -1,130 +0,0 @@
-// Story for image development, see https://github.com/webstudio-is/webstudio-builder/issues/387
-
-import type * as React from "react";
-import type { Meta, StoryFn } from "@storybook/react";
-import { Image as ImagePrimitive, createImageLoader } from "./";
-
-// to not allow include local assets everywhere, just enable it for this file
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import localLogoImage from "../storybook-assets/logo.webp"; // eslint-disable-line
-
-export default {
-  title: "Components/ImageDev",
-} satisfies Meta<typeof ImagePrimitive>;
-
-type ImageProps = React.ComponentProps<typeof ImagePrimitive>;
-
-/**
- * In case you need to test img with real cloudflare trasforms
- * set  USE_CLOUDFLARE_IMAGE_TRANSFORM = true
- **/
-const USE_CLOUDFLARE_IMAGE_TRANSFORM = false;
-
-// For cloudflare image transform testing, logo should be the most consistent image on the site
-const REMOTE_SELF_DOMAIN_IMAGE = "https://webstudio.is/logo.webp";
-
-const imageSrc = USE_CLOUDFLARE_IMAGE_TRANSFORM
-  ? REMOTE_SELF_DOMAIN_IMAGE
-  : localLogoImage;
-
-const imageLoader = createImageLoader({
-  imageBaseUrl: USE_CLOUDFLARE_IMAGE_TRANSFORM
-    ? "https://webstudio.is/cdn-cgi/image/"
-    : "",
-});
-
-const ImageBase: StoryFn<
-  React.ForwardRefExoticComponent<
-    Omit<ImageProps, "loader"> & {
-      style?: React.HTMLAttributes<"img">["style"];
-    }
-  >
-> = (args) => {
-  const style = {
-    maxWidth: "100%",
-    display: "block",
-    ...args.style,
-  };
-
-  return (
-    <ImagePrimitive
-      {...args}
-      optimize={true}
-      loader={imageLoader}
-      style={style}
-    />
-  );
-};
-
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-export const FixedWidthImage: StoryFn<React.FunctionComponent> = () => (
-  <ImageBase src={imageSrc} width="300" height="400" />
-);
-
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-export const FixedWidthImageCover: StoryFn<React.FunctionComponent> = () => (
-  <ImageBase
-    src={imageSrc}
-    width="300"
-    height="400"
-    style={{ objectFit: "cover" }}
-  />
-);
-
-/**
- * Load images depending on the viewport width.
- **/
-export const UnknownWidthImage: StoryFn<React.FunctionComponent> = () => (
-  <ImageBase src={imageSrc} />
-);
-
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-export const AspectRatioImage: StoryFn<React.FunctionComponent> = () => (
-  <div style={{ width: "50%" }}>
-    <ImageBase
-      src={imageSrc}
-      style={{ aspectRatio: "2/1", objectFit: "cover", width: "100%" }}
-    />
-  </div>
-);
-
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-export const FillParentImage: StoryFn<React.FunctionComponent> = () => (
-  <div style={{ width: "50%", aspectRatio: "2/1", position: "relative" }}>
-    <ImageBase
-      src={imageSrc}
-      style={{
-        objectFit: "cover",
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-      }}
-    />
-  </div>
-);
-
-/**
- * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
- * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
- **/
-export const HeroImage: StoryFn<React.FunctionComponent> = () => (
-  <ImageBase
-    src={imageSrc}
-    sizes="100vw"
-    style={{
-      aspectRatio: "3/1",
-      objectFit: "cover",
-      width: "100%",
-    }}
-  />
-);

package/src/image-loaders.ts

@@ -1,29 +0,0 @@
-import warnOnce from "warn-once";
-import { allSizes, type ImageLoader } from "./image-optimize";
-
-export type ImageLoaderOptions = {
-  imageBaseUrl: string;
-};
-
-/**
- * Default image loader in case of no loader provided
- * https://developers.cloudflare.com/images/image-resizing/url-format/
- **/
-export const createImageLoader =
-  (loaderOptions: ImageLoaderOptions): ImageLoader =>
-  ({ width, src, quality }) => {
-    if (process.env.NODE_ENV !== "production") {
-      warnOnce(
-        allSizes.includes(width) === false,
-        "Width must be only from allowed values"
-      );
-    }
-    const { imageBaseUrl } = loaderOptions;
-    const searchParams = new URLSearchParams();
-    searchParams.set("width", width.toString());
-    searchParams.set("quality", quality.toString());
-    searchParams.set("format", "auto");
-
-    // Cloudflare docs say that we don't need to urlencode the path params
-    return `${imageBaseUrl}${src}?${searchParams.toString()}`;
-  };

package/src/image-optimize.ts

@@ -1,260 +0,0 @@
-/**
- * # 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.
- **/
-
-export type ImageLoader = (props: {
-  width: number;
-  quality: number;
-  src: string;
-}) => string;
-
-/**
- * max(...imageSizes) must be less then min(...deviceSizes)
- **/
-const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
-const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
-
-export const allSizes = [...imageSizes, ...deviceSizes];
-
-/**
- * https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx
- **/
-const getWidths = (
-  width: number | undefined,
-  sizes: string | undefined
-): { widths: number[]; kind: "w" | "x" } => {
-  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(Number.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: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
-        kind: "w",
-      };
-    }
-    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,
-}: {
-  src: string;
-  quality: number;
-  width: number | undefined;
-  sizes: string | undefined;
-  loader: ImageLoader;
-}): {
-  src: string;
-  srcSet: string | undefined;
-  sizes: string | undefined;
-} => {
-  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 getInt = (value: unknown): number | undefined => {
-  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;
-};
-
-/**
- * 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;
-
-export const getImageAttributes = (props: {
-  src: string | undefined;
-  srcSet: string | undefined;
-  sizes: string | undefined;
-  width: string | number | undefined;
-  quality: string | number | undefined;
-  loader: ImageLoader;
-  optimize: boolean;
-}): {
-  src: string;
-  srcSet?: string;
-  sizes?: string;
-} | null => {
-  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: string;
-      srcSet?: string;
-      sizes?: string;
-    } = { src: props.src };
-
-    if (props.srcSet != null) {
-      resAttrs.srcSet = props.srcSet;
-    }
-
-    if (props.sizes != null) {
-      resAttrs.sizes = props.sizes;
-    }
-
-    return resAttrs;
-  }
-
-  return null;
-};

package/src/image.tsx

@@ -1,70 +0,0 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
-import { getImageAttributes, type ImageLoader } from "./image-optimize";
-
-const defaultTag = "img";
-
-type ImageProps = ComponentProps<typeof defaultTag> & {
-  quality?: number;
-  optimize?: boolean;
-  loader: ImageLoader;
-};
-
-export const Image = forwardRef<ElementRef<typeof defaultTag>, ImageProps>(
-  (
-    {
-      quality,
-      loader,
-      optimize = true,
-      loading = "lazy",
-      decoding = "async",
-      ...imageProps
-    },
-    ref
-  ) => {
-    const imageAttributes = getImageAttributes({
-      src: imageProps.src,
-      srcSet: imageProps.srcSet,
-      sizes: imageProps.sizes,
-      width: imageProps.width,
-      quality,
-      loader,
-      optimize,
-    }) ?? { src: imagePlaceholderSvg };
-
-    return (
-      <img
-        {...imageProps}
-        {...imageAttributes}
-        decoding={decoding}
-        loading={loading}
-        ref={ref}
-      />
-    );
-  }
-);
-
-Image.displayName = "Image";
-
-const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
-  width="140"
-  height="140"
-  viewBox="0 0 600 600"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  >
-  <rect width="600" height="600" fill="#CCCCCC" />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
-    fill="#A2A2A2"
-  />
-</svg>`)}`;

package/src/index.ts

@@ -1,4 +0,0 @@
-export { Image } from "./image";
-export type { ImageLoader } from "./image-optimize";
-export * from "./image-loaders";
-export * from "./image-optimize";