@webstudio-is/image 0.53.0 → 0.54.0

package/lib/cjs/image-loaders.js

@@ -50,9 +50,10 @@ const cloudflareImageLoader = (loaderOptions) => ({ width, src, quality }) => {
     return pathname;
   }
 };
-const localImageLoader = () => ({ width, src, quality }) => {
+const localImageLoader = (options) => ({ width, src, quality }) => {
+  const { publicPath = "/" } = options;
   const params = new URLSearchParams();
   params.set("width", `${width}`);
   params.set("quality", `${quality}`);
-  return `${src}?${params.toString()}`;
+  return `${publicPath}${src}?${params.toString()}`;
 };

package/lib/cjs/image-optimize.js

@@ -30,7 +30,7 @@ const getWidths = (width, 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));
+      percentSizes.push(Number.parseInt(match[2], 10));
     }
     if (percentSizes.length) {
       const smallestRatio = Math.min(...percentSizes) * 0.01;

package/lib/cjs/index.js

@@ -41,7 +41,7 @@ const imageProps = {
   ...publicProps,
   src: {
     type: "string",
-    control: "file-image",
+    control: "file",
     label: "Source",
     required: false
   }

package/lib/image-loaders.js

@@ -16,11 +16,12 @@ const cloudflareImageLoader = (loaderOptions) => ({ width, src, quality }) => {
     return pathname;
   }
 };
-const localImageLoader = () => ({ width, src, quality }) => {
+const localImageLoader = (options) => ({ width, src, quality }) => {
+  const { publicPath = "/" } = options;
   const params = new URLSearchParams();
   params.set("width", `${width}`);
   params.set("quality", `${quality}`);
-  return `${src}?${params.toString()}`;
+  return `${publicPath}${src}?${params.toString()}`;
 };
 export {
   cloudflareImageLoader,

package/lib/image-optimize.js

@@ -6,7 +6,7 @@ const getWidths = (width, 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));
+      percentSizes.push(Number.parseInt(match[2], 10));
     }
     if (percentSizes.length) {
       const smallestRatio = Math.min(...percentSizes) * 0.01;

package/lib/index.js

@@ -6,7 +6,7 @@ const imageProps = {
   ...publicProps,
   src: {
     type: "string",
-    control: "file-image",
+    control: "file",
     label: "Source",
     required: false
   }

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

@@ -7,7 +7,11 @@ export type CloudflareImageLoaderOptions = {
  * 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: () => ImageLoader;
+export declare const localImageLoader: (options: LocalImageLoaderOptions) => ImageLoader;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "description": "Image optimization",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -8,7 +8,7 @@
   "dependencies": {
     "react": "^17.0.2",
     "warn-once": "^0.1.1",
-    "@webstudio-is/generate-arg-types": "^0.53.0"
+    "@webstudio-is/generate-arg-types": "^0.54.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
@@ -19,7 +19,7 @@
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.1"
+    "@webstudio-is/tsconfig": "^1.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2",

package/src/image-dev.stories.tsx

@@ -30,7 +30,7 @@ const imageSrc = USE_CLOUDFLARE_IMAGE_TRANSFORM
 
 const imageLoader = USE_CLOUDFLARE_IMAGE_TRANSFORM
   ? loaders.cloudflareImageLoader({ resizeOrigin: "https://webstudio.is" })
-  : loaders.localImageLoader();
+  : loaders.localImageLoader({ publicPath: "" });
 
 const ImageBase: ComponentStory<
   React.ForwardRefExoticComponent<

package/src/image-loaders.ts

@@ -33,15 +33,20 @@ export const cloudflareImageLoader: (
     }
   };
 
+type LocalImageLoaderOptions = {
+  publicPath?: string;
+};
+
 /**
  * Fake pseudo loader for local testing purposes
  **/
-export const localImageLoader: () => ImageLoader =
-  () =>
+export const localImageLoader =
+  (options: LocalImageLoaderOptions): ImageLoader =>
   ({ width, src, quality }) => {
+    const { publicPath = "/" } = options;
     // Just emulate like we really resize the image
     const params = new URLSearchParams();
     params.set("width", `${width}`);
     params.set("quality", `${quality}`);
-    return `${src}?${params.toString()}`;
+    return `${publicPath}${src}?${params.toString()}`;
   };

package/src/image-optimize.ts

@@ -112,7 +112,7 @@ const getWidths = (
     const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
     const percentSizes = [];
     for (let match; (match = viewportWidthRe.exec(sizes)); match) {
-      percentSizes.push(parseInt(match[2], 10));
+      percentSizes.push(Number.parseInt(match[2], 10));
     }
 
     if (percentSizes.length) {

package/src/index.ts

@@ -11,7 +11,7 @@ export const imageProps: Record<string, PropMeta> = {
   ...publicProps,
   src: {
     type: "string",
-    control: "file-image",
+    control: "file",
     label: "Source",
     required: false,
   },