@webstudio-is/image 0.0.0-588fe22 → 0.0.0-7a19155

package/lib/index.js

@@ -1,9 +1,30 @@
-// src/image.tsx
-import {
-  forwardRef
-} from "react";
+// src/image-loaders.ts
+import warnOnce from "warn-once";
 
 // src/image-optimize.ts
+var imagePlaceholderDataUrl = `data:image/svg+xml;base64,${btoa(`<svg
+  width="140"
+  height="140"
+  viewBox="0 0 600 600"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  >
+  <rect width="600" height="600" fill="#DFE3E6" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
+    fill="#C1C8CD"
+  />
+  <path
+    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
+    fill="#C1C8CD"
+  />
+  <path
+    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
+    fill="#C1C8CD"
+  />
+</svg>`)}`;
 var imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
 var deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
 var allSizes = [...imageSizes, ...deviceSizes];
@@ -69,7 +90,7 @@ var getInt = (value) => {
       return Math.round(vNum);
     }
   }
-  return void 0;
+  return;
 };
 var DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
 var DEFAULT_QUALITY = 80;
@@ -81,13 +102,16 @@ var UrlCanParse = (url) => {
     return false;
   }
 };
-var getImageAttributes = (props) => {
+var getOptimizedImageAttributes = (props) => {
   const width = getInt(props.width);
   const quality = Math.max(
     Math.min(getInt(props.quality) ?? DEFAULT_QUALITY, 100),
     0
   );
   if (props.src != null && props.src !== "") {
+    if (props.src.startsWith("data:")) {
+      return { src: props.src };
+    }
     if (props.srcSet == null && props.optimize) {
       const sizes = props.sizes ?? (props.width == null ? DEFAULT_SIZES : void 0);
       return generateImgAttrs({
@@ -110,67 +134,35 @@ var getImageAttributes = (props) => {
     return resAttrs;
   }
 };
-
-// src/image.tsx
-import { jsx } from "react/jsx-runtime";
-var Image = forwardRef(
-  ({
+var getImageAttributes = ({
+  quality,
+  loader,
+  optimize = true,
+  loading = "lazy",
+  decoding = "async",
+  ...attributes
+}) => {
+  const optimizedAttributes = getOptimizedImageAttributes({
+    src: attributes.src,
+    srcSet: attributes.srcSet,
+    sizes: attributes.sizes,
+    width: attributes.width,
     quality,
     loader,
-    optimize = true,
-    loading = "lazy",
-    decoding = "async",
-    ...imageProps
-  }, ref) => {
-    const imageAttributes = getImageAttributes({
-      src: imageProps.src,
-      srcSet: imageProps.srcSet,
-      sizes: imageProps.sizes,
-      width: imageProps.width,
-      quality,
-      loader,
-      optimize
-    }) ?? { src: imagePlaceholderDataUrl };
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        alt: "",
-        ...imageProps,
-        ...imageAttributes,
-        decoding,
-        loading,
-        ref
-      }
-    );
-  }
-);
-Image.displayName = "Image";
-var imagePlaceholderDataUrl = `data:image/svg+xml;base64,${btoa(`<svg
-  width="140"
-  height="140"
-  viewBox="0 0 600 600"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  >
-  <rect width="600" height="600" fill="#DFE3E6" />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
-    fill="#C1C8CD"
-  />
-  <path
-    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
-    fill="#C1C8CD"
-  />
-  <path
-    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
-    fill="#C1C8CD"
-  />
-</svg>`)}`;
+    optimize
+  }) ?? { src: imagePlaceholderDataUrl };
+  return {
+    alt: "",
+    ...attributes.alt !== void 0 ? { alt: attributes.alt } : {},
+    ...attributes.width !== void 0 ? { width: attributes.width } : {},
+    ...attributes.height !== void 0 ? { height: attributes.height } : {},
+    ...optimizedAttributes,
+    decoding,
+    loading
+  };
+};
 
 // 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("/");
@@ -178,6 +170,15 @@ var joinPath = (...segments) => {
 var encodePathFragment = (fragment) => {
   return encodeURIComponent(fragment).replace(/%2F/g, "/");
 };
+var getImageSource = (src) => {
+  if (src.startsWith("/cgi/asset")) {
+    return decodeURIComponent(src.slice("/cgi/asset".length).split("?")[0]);
+  }
+  if (src.startsWith("/cgi/image")) {
+    return decodeURIComponent(src.slice("/cgi/image".length).split("?")[0]);
+  }
+  return src;
+};
 var wsImageLoader = (props) => {
   const width = props.format === "raw" ? 16 : props.width;
   const quality = props.format === "raw" ? 100 : props.quality;
@@ -187,10 +188,7 @@ var wsImageLoader = (props) => {
       "Width must be only from allowed values"
     );
   }
-  let src = props.src;
-  if (src.startsWith("/cgi/asset")) {
-    src = src.slice("/cgi/asset".length);
-  }
+  const src = getImageSource(props.src);
   const resultUrl = new URL("/cgi/image/", NON_EXISTING_DOMAIN);
   if (props.format !== "raw") {
     resultUrl.searchParams.set("width", width.toString());
@@ -209,10 +207,16 @@ var wsImageLoader = (props) => {
   }
   return resultUrl.href;
 };
+var wsVideoLoader = ({ src }) => {
+  if (src.startsWith("/cgi/asset/")) {
+    src = src.slice("/cgi/asset/".length);
+  }
+  return `/cgi/video/${src}`;
+};
 export {
-  Image,
   allSizes,
   getImageAttributes,
   imagePlaceholderDataUrl,
-  wsImageLoader
+  wsImageLoader,
+  wsVideoLoader
 };

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

@@ -4,3 +4,7 @@ import { type ImageLoader } from "./image-optimize";
  * https://developers.cloudflare.com/images/image-resizing/url-format/
  **/
 export declare const wsImageLoader: ImageLoader;
+export type VideoLoader = (options: {
+    src: string;
+}) => string;
+export declare const wsVideoLoader: VideoLoader;

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

@@ -95,17 +95,29 @@ export type ImageLoader = (props: {
     src: string;
     format: "raw";
 }) => string;
+export declare const imagePlaceholderDataUrl: 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;
+export type ImageAttributes = {
+    alt?: string;
+    decoding?: "async" | "auto" | "sync";
+    height?: number | string;
+    loading?: "eager" | "lazy";
+    sizes?: string;
+    src?: string;
+    srcSet?: string;
+    width?: number | string;
+};
+type ImageOptions = {
     loader: ImageLoader;
-    optimize: boolean;
-}) => {
+    /** Optimize the image for enhanced performance. */
+    optimize?: boolean;
+    quality?: number;
+};
+export type ResolvedImageAttributes = ImageAttributes & {
+    alt: string | undefined;
+    decoding: "async" | "auto" | "sync";
+    loading: "eager" | "lazy";
     src: string;
-    srcSet?: string;
-    sizes?: string;
-} | undefined;
+};
+export declare const getImageAttributes: ({ quality, loader, optimize, loading, decoding, ...attributes }: ImageAttributes & ImageOptions) => ResolvedImageAttributes;
+export {};

package/lib/types/index.d.ts

@@ -1,4 +1,3 @@
-export { Image, imagePlaceholderDataUrl } from "./image";
 export type { ImageLoader } from "./image-optimize";
 export * from "./image-loaders";
 export * from "./image-optimize";

package/package.json

@@ -1,26 +1,23 @@
 {
   "name": "@webstudio-is/image",
-  "version": "0.0.0-588fe22",
+  "version": "0.0.0-7a19155",
   "description": "Image optimization",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "dependencies": {
-    "react": "18.3.0-canary-14898b6a9-20240318",
-    "warn-once": "^0.1.1"
+    "warn-once": "^0.1.1",
+    "@webstudio-is/sdk": "0.0.0-7a19155"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.2",
+    "vitest": "^3.1.2",
+    "@webstudio-is/design-system": "0.0.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
-  "peerDependencies": {
-    "react": "18.3.0-canary-14898b6a9-20240318",
-    "react-dom": "18.3.0-canary-14898b6a9-20240318"
-  },
   "exports": {
     "webstudio": "./src/index.ts",
     "types": "./lib/types/index.d.ts",
@@ -34,7 +31,7 @@
   "private": false,
   "sideEffects": false,
   "scripts": {
-    "typecheck": "tsc",
+    "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "build": "rm -rf lib && esbuild src/index.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json"

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

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

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

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

package/lib/types/image.d.ts

@@ -1,12 +0,0 @@
-import { type ComponentProps, type ForwardRefExoticComponent } from "react";
-import { type ImageLoader } from "./image-optimize";
-declare const defaultTag = "img";
-type ImageProps = ComponentProps<typeof defaultTag> & {
-    quality?: number;
-    /** Optimize the image for enhanced performance. */
-    optimize?: boolean;
-    loader: ImageLoader;
-};
-export declare const Image: ForwardRefExoticComponent<ImageProps>;
-export declare const imagePlaceholderDataUrl: string;
-export {};