@webstudio-is/image 0.56.0 → 0.58.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/lib/types/image-dev.stories.d.ts

@@ -1,10 +1,10 @@
 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> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<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>>>;
+}, "ref"> & React.RefAttributes<HTMLImageElement>>>;
 export default _default;
 /**
  * Load images depending on image width and device per pixel ratio.

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

@@ -1,12 +1,13 @@
 import { type ImageLoader } from "./image-optimize";
 export type CloudflareImageLoaderOptions = {
     resizeOrigin?: string | null;
+    cdnUrl?: string;
 };
 /**
  * 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;
+export declare const cloudflareImageLoader: (loaderOptions: CloudflareImageLoaderOptions | null) => ImageLoader;
 type LocalImageLoaderOptions = {
     publicPath?: string;
 };

package/lib/types/image.d.ts

@@ -6,5 +6,5 @@ type ImageProps = ComponentProps<typeof defaultTag> & {
     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 declare const Image: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 export {};

package/package.json

@@ -1,29 +1,31 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.56.0",
+  "version": "0.58.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.56.0"
+    "@webstudio-is/generate-arg-types": "^0.58.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.5",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.3"
+    "@webstudio-is/tsconfig": "^1.0.5"
   },
   "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 --declarationDir lib/types",
     "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/",
       }),
     });