@webstudio-is/image 0.55.0 → 0.57.0

package/lib/cjs/image-loaders.js

@@ -41,8 +41,10 @@ const cloudflareImageLoader = (loaderOptions) => ({ width, src, quality }) => {
       "Width must be only from allowed values"
     );
   }
+  const cdnUrl = loaderOptions?.cdnUrl ?? "/";
+  const imageUrl = `${cdnUrl}${src}`;
   const options = `width=${width},quality=${quality},format=auto`;
-  const pathname = `/cdn-cgi/image/${options}/${src}`;
+  const pathname = `/cdn-cgi/image/${options}/${imageUrl}`;
   if (loaderOptions?.resizeOrigin != null) {
     const url = new URL(pathname, loaderOptions.resizeOrigin);
     return url.href;

package/lib/image-loaders.js

@@ -7,8 +7,10 @@ const cloudflareImageLoader = (loaderOptions) => ({ width, src, quality }) => {
       "Width must be only from allowed values"
     );
   }
+  const cdnUrl = loaderOptions?.cdnUrl ?? "/";
+  const imageUrl = `${cdnUrl}${src}`;
   const options = `width=${width},quality=${quality},format=auto`;
-  const pathname = `/cdn-cgi/image/${options}/${src}`;
+  const pathname = `/cdn-cgi/image/${options}/${imageUrl}`;
   if (loaderOptions?.resizeOrigin != null) {
     const url = new URL(pathname, loaderOptions.resizeOrigin);
     return url.href;

package/package.json

@@ -1,29 +1,31 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Image optimization",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "warn-once": "^0.1.1",
-    "@webstudio-is/generate-arg-types": "^0.55.0"
+    "@webstudio-is/generate-arg-types": "^0.57.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
     "@storybook/react": "^6.5.16",
-    "@types/react": "^17.0.24",
+    "@types/react": "^18.0.35",
     "jest": "^29.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "5.0.3",
-    "@webstudio-is/jest-config": "^1.0.2",
+    "@webstudio-is/jest-config": "^1.0.4",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.3"
+    "@webstudio-is/tsconfig": "^1.0.4"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "module": "./lib/index.js",
   "exports": {
@@ -41,13 +43,13 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "checks": "pnpm typecheck && pnpm lint && pnpm test",
     "dev": "build-package --watch",
     "build": "build-package",
     "build:args": "generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
-    "dts": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
+    "dts": "tsc",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
     "storybook:run": "start-storybook -p 6006",
     "storybook:build": "build-storybook",

package/src/image-loaders.ts

@@ -2,17 +2,18 @@ import warnOnce from "warn-once";
 import { allSizes, type ImageLoader } from "./image-optimize";
 
 export type CloudflareImageLoaderOptions = {
+  // origin of transformation wrapper
   resizeOrigin?: string | null;
+  // origin of cdn serving image
+  cdnUrl?: string;
 };
 
 /**
  * Default image loader in case of no loader provided
  * https://developers.cloudflare.com/images/image-resizing/url-format/
  **/
-export const cloudflareImageLoader: (
-  ops: CloudflareImageLoaderOptions | null
-) => ImageLoader =
-  (loaderOptions) =>
+export const cloudflareImageLoader =
+  (loaderOptions: CloudflareImageLoaderOptions | null): ImageLoader =>
   ({ width, src, quality }) => {
     if (process.env.NODE_ENV !== "production") {
       warnOnce(
@@ -21,9 +22,12 @@ export const cloudflareImageLoader: (
       );
     }
 
+    const cdnUrl = loaderOptions?.cdnUrl ?? "/";
+    const imageUrl = `${cdnUrl}${src}`;
+
     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}`;
+    const pathname = `/cdn-cgi/image/${options}/${imageUrl}`;
 
     if (loaderOptions?.resizeOrigin != null) {
       const url = new URL(pathname, loaderOptions.resizeOrigin);

package/src/image-optimize.test.ts

@@ -7,11 +7,14 @@ describe("Image optimizations applied", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: 100,
-      src: "https://webstudio.is/logo.webp",
+      src: "logo.webp",
       srcSet: undefined,
       sizes: undefined,
       quality: 100,
-      loader: cloudflareImageLoader({ resizeOrigin: null }),
+      loader: cloudflareImageLoader({
+        resizeOrigin: null,
+        cdnUrl: "https://webstudio.is/",
+      }),
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
@@ -27,11 +30,14 @@ describe("Image optimizations applied", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: undefined,
-      src: "https://webstudio.is/logo.webp",
+      src: "logo.webp",
       srcSet: undefined,
       sizes: undefined,
       quality: 90,
-      loader: cloudflareImageLoader({ resizeOrigin: null }),
+      loader: cloudflareImageLoader({
+        resizeOrigin: null,
+        cdnUrl: "https://webstudio.is/",
+      }),
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
@@ -47,11 +53,14 @@ describe("Image optimizations applied", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: undefined,
-      src: "https://webstudio.is/logo.webp",
+      src: "logo.webp",
       srcSet: undefined,
       sizes: "100vw",
       quality: 70,
-      loader: cloudflareImageLoader({ resizeOrigin: null }),
+      loader: cloudflareImageLoader({
+        resizeOrigin: null,
+        cdnUrl: "https://webstudio.is/",
+      }),
     });
 
     expect(imgAttr).toMatchInlineSnapshot(`
@@ -67,12 +76,13 @@ describe("Image optimizations applied", () => {
     const imgAttr = getImageAttributes({
       optimize: true,
       width: undefined,
-      src: "https://webstudio.is/logo.webp",
+      src: "logo.webp",
       srcSet: undefined,
       sizes: "100vw",
       quality: 70,
       loader: cloudflareImageLoader({
         resizeOrigin: "https://resize-origin.is",
+        cdnUrl: "https://webstudio.is/",
       }),
     });
 

package/lib/types/__generated__/image.props.d.ts

@@ -1,2 +0,0 @@
-import type { PropMeta } from "@webstudio-is/generate-arg-types";
-export declare const props: Record<string, PropMeta>;

package/lib/types/image-dev.stories.d.ts

@@ -1,34 +0,0 @@
-import type * as React from "react";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
-    quality?: number | undefined;
-    optimize?: boolean | undefined;
-    loader: import("./image-optimize").ImageLoader;
-}, "quality" | "loader" | "key" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "optimize"> & React.RefAttributes<HTMLImageElement>>>;
-export default _default;
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImageCover: ComponentStory<React.FunctionComponent>;
-/**
- * Load images depending on the viewport width.
- **/
-export declare const UnknownWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-export declare const AspectRatioImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-export declare const FillParentImage: ComponentStory<React.FunctionComponent>;
-/**
- * "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 declare const HeroImage: ComponentStory<React.FunctionComponent>;

package/lib/types/image-loaders.d.ts

@@ -1,17 +0,0 @@
-import { type ImageLoader } from "./image-optimize";
-export type CloudflareImageLoaderOptions = {
-    resizeOrigin?: string | null;
-};
-/**
- * Default image loader in case of no loader provided
- * https://developers.cloudflare.com/images/image-resizing/url-format/
- **/
-export declare const cloudflareImageLoader: (ops: CloudflareImageLoaderOptions | null) => ImageLoader;
-type LocalImageLoaderOptions = {
-    publicPath?: string;
-};
-/**
- * Fake pseudo loader for local testing purposes
- **/
-export declare const localImageLoader: (options: LocalImageLoaderOptions) => ImageLoader;
-export {};

package/lib/types/image-optimize.d.ts

@@ -1,106 +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;
-export declare const allSizes: number[];
-export declare 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;

package/lib/types/image-optimize.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/types/image.d.ts

@@ -1,10 +0,0 @@
-import { type ComponentProps } from "react";
-import { type ImageLoader } from "./image-optimize";
-declare const defaultTag = "img";
-type ImageProps = ComponentProps<typeof defaultTag> & {
-    quality?: number;
-    optimize?: boolean;
-    loader: ImageLoader;
-};
-export declare const Image: import("react").ForwardRefExoticComponent<Pick<ImageProps, "quality" | "loader" | "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "optimize"> & import("react").RefAttributes<HTMLImageElement>>;
-export {};

package/lib/types/index.d.ts

@@ -1,5 +0,0 @@
-import type { PropMeta } from "@webstudio-is/generate-arg-types";
-export { Image } from "./image";
-export type { ImageLoader } from "./image-optimize";
-export * as loaders from "./image-loaders";
-export declare const imageProps: Record<string, PropMeta>;