@webstudio-is/image 0.1.0 → 0.15.0

package/lib/image-optimize.js

@@ -1,183 +1,97 @@
-/**
- * # 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.
- **/
-/**
- * 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 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: allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
-                kind: "w",
-            };
-        }
-        return { widths: 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) => allSizes.find((p) => p >= w) || allSizes[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 === "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 === "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;
-export 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 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;
     }
-    return null;
+    if (props.sizes != null) {
+      resAttrs.sizes = props.sizes;
+    }
+    return resAttrs;
+  }
+  return null;
+};
+export {
+  allSizes,
+  getImageAttributes
 };

package/lib/image.js

@@ -1,24 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { getImageAttributes } from "./image-optimize";
 const defaultTag = "img";
-export const Image = forwardRef(({ quality, loader, optimize, ...imageProps }, ref) => {
-    // Temporary set to false, to support previous image behaviour
-    const DEFAULT_OPTIMIZE = false;
+const Image = forwardRef(
+  ({
+    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: optimize ?? DEFAULT_OPTIMIZE,
+      src: imageProps.src,
+      srcSet: imageProps.srcSet,
+      sizes: imageProps.sizes,
+      width: imageProps.width,
+      quality,
+      loader,
+      optimize
     }) ?? { src: imagePlaceholderSvg };
-    return (_jsx("img", { ...imageProps, ...imageAttributes, decoding: "async", ref: ref }));
-});
+    return /* @__PURE__ */ jsx("img", {
+      ...imageProps,
+      ...imageAttributes,
+      decoding,
+      loading,
+      ref
+    });
+  }
+);
 Image.defaultProps = {
-    src: "",
-    loading: "lazy",
+  src: ""
 };
 Image.displayName = "Image";
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
@@ -44,3 +56,6 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
     fill="#A2A2A2"
   />
 </svg>`)}`;
+export {
+  Image
+};

package/lib/index.js

@@ -1,3 +1,8 @@
-export { Image } from "./image";
-export * as loaders from "./image-loaders";
-export { default as imageProps } from "./__generated__/image.props.json";
+import { Image } from "./image";
+import * as loaders from "./image-loaders";
+import { default as default2 } from "./__generated__/image.props.json";
+export {
+  Image,
+  default2 as imageProps,
+  loaders
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.1.0",
+  "version": "0.15.0",
   "description": "Image optimization",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -9,10 +9,9 @@
     "typecheck": "tsc --noEmit",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "checks": "yarn typecheck && yarn lint && yarn test",
-    "dev": "tsup --watch",
+    "dev": "build-package --watch",
+    "build": "build-package",
     "build:args": "generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
-    "build": "rm -fr lib tsconfig.tsbuildinfo && yarn build:cjs && tsc",
-    "build:cjs": "tsc --module commonjs --outDir lib/cjs && find lib/cjs -name '*.js' | while read NAME; do mv $NAME ${NAME%.js}.cjs; done",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "storybook:run": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
@@ -30,9 +29,10 @@
     "@storybook/manager-webpack4": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/testing-library": "^0.0.13",
+    "@webstudio-is/generate-arg-types": "*",
     "@webstudio-is/jest-config": "*",
-    "typescript": "4.7.4",
-    "@webstudio-is/generate-arg-types": "*"
+    "@webstudio-is/scripts": "*",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -43,20 +43,13 @@
     "import": "./lib/index.js",
     "require": "./lib/cjs/index.cjs"
   },
-  "types": "lib/index.d.ts",
+  "types": "src/index.ts",
   "files": [
     "lib/*",
-    "README.md",
+    "src/*",
     "!*.test.*"
   ],
   "license": "MIT",
   "private": false,
-  "sideEffects": false,
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "format": "esm",
-    "outDir": "lib"
-  }
+  "sideEffects": false
 }