@webstudio-is/image 0.192.0 → 0.194.0

package/lib/index.js

@@ -1,5 +1,7 @@
 // src/image.tsx
-import { forwardRef } from "react";
+import {
+  forwardRef
+} from "react";
 
 // src/image-optimize.ts
 var imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
@@ -176,24 +178,21 @@ var joinPath = (...segments) => {
 var encodePathFragment = (fragment) => {
   return encodeURIComponent(fragment).replace(/%2F/g, "/");
 };
-var createImageLoader = (loaderOptions) => (props) => {
+var wsImageLoader = (props) => {
   const width = props.format === "raw" ? 16 : props.width;
   const quality = props.format === "raw" ? 100 : props.quality;
-  const { format, src } = props;
   if (true) {
     warnOnce(
       allSizes.includes(width) === false,
       "Width must be only from allowed values"
     );
   }
-  const { imageBaseUrl } = loaderOptions;
-  let resultUrl;
-  try {
-    resultUrl = new URL(imageBaseUrl, NON_EXISTING_DOMAIN);
-  } catch {
-    return src;
+  let src = props.src;
+  if (src.startsWith("/cgi/asset")) {
+    src = src.slice("/cgi/asset".length);
   }
-  if (format !== "raw") {
+  const resultUrl = new URL("/cgi/image/", NON_EXISTING_DOMAIN);
+  if (props.format !== "raw") {
     resultUrl.searchParams.set("width", width.toString());
     resultUrl.searchParams.set("quality", quality.toString());
     if (props.height != null) {
@@ -203,18 +202,20 @@ var createImageLoader = (loaderOptions) => (props) => {
       resultUrl.searchParams.set("fit", props.fit);
     }
   }
-  resultUrl.searchParams.set("format", format ?? "auto");
+  resultUrl.searchParams.set("format", props.format ?? "auto");
   resultUrl.pathname = joinPath(resultUrl.pathname, encodePathFragment(src));
   if (resultUrl.href.startsWith(NON_EXISTING_DOMAIN)) {
     return `${resultUrl.pathname}?${resultUrl.searchParams.toString()}`;
   }
   return resultUrl.href;
 };
+var createImageLoader = (_loaderOptions) => wsImageLoader;
 export {
   Image,
   UrlCanParse,
   allSizes,
   createImageLoader,
   getImageAttributes,
-  imagePlaceholderDataUrl
+  imagePlaceholderDataUrl,
+  wsImageLoader
 };

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

@@ -1,9 +1,11 @@
 import { 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 declare const createImageLoader: (loaderOptions: ImageLoaderOptions) => ImageLoader;
+export declare const wsImageLoader: ImageLoader;
+type ImageLoaderOptions = {
+    imageBaseUrl?: string;
+};
+export declare const createImageLoader: (_loaderOptions: ImageLoaderOptions) => ImageLoader;
+export {};

package/lib/types/image.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps, type ForwardRefExoticComponent } from "react";
 import { type ImageLoader } from "./image-optimize";
 declare const defaultTag = "img";
 type ImageProps = ComponentProps<typeof defaultTag> & {
@@ -6,6 +6,6 @@ type ImageProps = ComponentProps<typeof defaultTag> & {
     optimize?: boolean;
     loader: ImageLoader;
 };
-export declare const Image: import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+export declare const Image: ForwardRefExoticComponent<ImageProps>;
 export declare const imagePlaceholderDataUrl: string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.192.0",
+  "version": "0.194.0",
   "description": "Image optimization",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",