@webstudio-is/image 0.167.0 → 0.173.0

package/lib/index.js

@@ -140,7 +140,7 @@ var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   >
-  <rect width="600" height="600" />
+  <rect width="600" height="600" fill="hsla(0, 0%, 80%, 0.2)" />
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
@@ -159,15 +159,17 @@ var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
 
 // src/image-loaders.ts
 import warnOnce from "warn-once";
+var NON_EXISTING_DOMAIN = "https://a3cbcbec-cdb1-4ea4-ad60-43c795308ddc.ddc";
+var joinPath = (...segments) => {
+  return segments.filter((segment) => segment !== "").map((segment) => segment.replace(/(^\/+|\/+$)/g, "")).join("/");
+};
+var encodePathFragment = (fragment) => {
+  return encodeURIComponent(fragment).replace(/%2F/g, "/");
+};
 var createImageLoader = (loaderOptions) => (props) => {
   const width = props.format === "raw" ? 16 : props.width;
   const quality = props.format === "raw" ? 100 : props.quality;
   const { format, src } = props;
-  try {
-    new URL(src);
-    return src;
-  } catch {
-  }
   if (true) {
     warnOnce(
       allSizes.includes(width) === false,
@@ -175,11 +177,26 @@ var createImageLoader = (loaderOptions) => (props) => {
     );
   }
   const { imageBaseUrl } = loaderOptions;
-  const searchParams = new URLSearchParams();
-  searchParams.set("width", width.toString());
-  searchParams.set("quality", quality.toString());
-  searchParams.set("format", format ?? "auto");
-  return `${imageBaseUrl}${src}?${searchParams.toString()}`;
+  let resultUrl;
+  try {
+    resultUrl = new URL(imageBaseUrl, NON_EXISTING_DOMAIN);
+  } catch {
+    return src;
+  }
+  resultUrl.searchParams.set("width", width.toString());
+  resultUrl.searchParams.set("quality", quality.toString());
+  resultUrl.searchParams.set("format", format ?? "auto");
+  if (props.format !== "raw" && props.height != null) {
+    resultUrl.searchParams.set("height", props.height.toString());
+  }
+  if (props.format !== "raw" && props.fit != null) {
+    resultUrl.searchParams.set("fit", props.fit);
+  }
+  resultUrl.pathname = joinPath(resultUrl.pathname, encodePathFragment(src));
+  if (resultUrl.href.startsWith(NON_EXISTING_DOMAIN)) {
+    return `${resultUrl.pathname}?${resultUrl.searchParams.toString()}`;
+  }
+  return resultUrl.href;
 };
 export {
   Image,

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

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

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

@@ -89,6 +89,8 @@ export type ImageLoader = (props: {
     quality: number;
     src: string;
     format?: "auto";
+    height?: number;
+    fit?: "pad";
 } | {
     src: string;
     format: "raw";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.167.0",
+  "version": "0.173.0",
   "description": "Image optimization",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -15,9 +15,9 @@
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "typescript": "5.4.5",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/jest-config": "1.0.7"
+    "typescript": "5.5.2",
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
     "react": "18.3.0-canary-14898b6a9-20240318",
@@ -38,8 +38,6 @@
   "scripts": {
     "typecheck": "tsc",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "checks": "pnpm typecheck && pnpm test",
-    "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
     "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json"
   }