@webstudio-is/react-sdk 0.7.0 → 0.7.1

package/lib/arg-types/utils.d.ts

@@ -3,22 +3,15 @@ import { PropItem } from "react-docgen-typescript";
 export declare type FilterPredicate = (prop: PropItem) => boolean;
 export declare const propsToArgTypes: (props: Record<string, PropItem>, filter?: FilterPredicate) => ArgTypes;
 export declare const mapControlForType: (propItem: PropItem) => {
-    control: {
-        type: string;
-    };
     defaultValue: any;
-    options?: undefined;
-} | {
     control: {
         type: string;
     };
-    defaultValue?: undefined;
-    options?: undefined;
 } | {
+    defaultValue: any;
     control: {
         type: string;
     };
     options: any;
-    defaultValue?: undefined;
 } | null | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/lib/arg-types/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/arg-types/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,oBAAY,eAAe,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;AAa1D,eAAO,MAAM,eAAe,UACnB,OAAO,MAAM,EAAE,QAAQ,CAAC,WACtB,eAAe,KACvB,QAiBF,CAAC;AAOF,eAAO,MAAM,iBAAiB,aAAc,QAAQ;;;;;;;;;;;;;;;;;;oBAiDnD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/arg-types/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,oBAAY,eAAe,GAAG,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC;AAa1D,eAAO,MAAM,eAAe,UACnB,OAAO,MAAM,EAAE,QAAQ,CAAC,WACtB,eAAe,KACvB,QAkBF,CAAC;AAOF,eAAO,MAAM,iBAAiB,aAAc,QAAQ;;;;;;;;;;;oBA6DnD,CAAC"}

package/lib/arg-types/utils.js

@@ -37,30 +37,40 @@ const mapControlForType = (propItem) => {
     if (!type) {
         return undefined;
     }
+    const overrides = { defaultValue: propItem.defaultValue?.value ?? null };
     // args that end with background or color e.g. iconColor
     if (matchers.color && matchers.color.test(name)) {
         const controlType = propItem.type.name;
         if (controlType === "string") {
             return {
                 control: { type: "color" },
-                defaultValue: propItem.defaultValue?.value,
+                ...overrides,
             };
         }
     }
     // args that end with date e.g. purchaseDate
     if (matchers.date && matchers.date.test(name)) {
-        return { control: { type: "date" } };
+        return {
+            control: { type: "date" },
+            ...overrides,
+        };
     }
     switch (type?.name) {
         case "array":
-            return { control: { type: "object" } };
+            return {
+                control: { type: "object" },
+                ...overrides,
+            };
         case "boolean":
         case "Booleanish":
-            return { control: { type: "boolean" } };
+            return {
+                control: { type: "boolean" },
+                ...overrides,
+            };
         case "string":
-            return { control: { type: "text" } };
+            return { control: { type: "text" }, ...overrides };
         case "number":
-            return { control: { type: "number" } };
+            return { control: { type: "number" }, ...overrides };
         case "enum": {
             const { value } = type;
             // Remove additional quotes from enum values
@@ -69,13 +79,14 @@ const mapControlForType = (propItem) => {
             return {
                 control: { type: values?.length <= 5 ? "radio" : "select" },
                 options: values,
+                ...overrides,
             };
         }
         case "function":
         case "symbol":
             return null;
         default:
-            return { control: { type: "text" } };
+            return { control: { type: "text" }, ...overrides };
     }
 };
 exports.mapControlForType = mapControlForType;

package/lib/component-utils/image.d.ts

@@ -0,0 +1,107 @@
+/**
+ * # Responsive Image component helpers.
+ *
+ * ## Quick summary about img srcset and sizes attributes:
+ *
+ * There are 2 ways to define what image will be loaded in the img property srcset.
+ *
+ * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
+ *   src will be selected depending on `device-pixel-ratio`.
+ *
+ * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
+ *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
+ *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
+ *
+ *   The browser finds the first matching media query from source size descriptors,
+ *   then use source size value to generate internally srcset
+ *   with pixel density descriptors dividing width descriptor value by source size value.
+ *
+ *   Using the example above for viewport width 800px.
+ *   The first matching media query is (max-width: 1200px)
+ *   source size value is 70vw  equal to 800px * 0,7 = 560px
+ *
+ *   browser internal srcset will be (we divide `w` descriptor by source size value):
+ *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
+ *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
+ *
+ *   Finally same rules as for pixel density descriptor 'x' are applied.
+ *
+ * ## Algorithm (without optimizations):
+ *
+ * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
+ * This is good for caching, as we can cache image with specific width and then use it for different devices.
+ *
+ * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
+ * > If allSizes.length is too small, you will deliver too big images to the user,
+ * > if allSizes.length is too big, you will have many caches misses.
+ *
+ * If img has a defined width property.
+ *   1. find the first value from allSizes which is greater or equal to the width property
+ *   2. use found value to generate srcset with pixel density descriptor 'x'
+ *
+ *
+ * If img has no defined width property.
+ *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
+ *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
+ *
+ * Optimizations applied now:
+ *
+ * - If the sizes property is defined, we can exclude from `srcsets` all images
+ *   which are smaller than the `smallestRatio * smallesDeviceSize`
+ *
+ * Future (not implemented) optimizations and improvements:
+ *
+ * - Knowing image size on different viewport widths we can provide nondefault sizes property
+ * - Knowledge of Image aspect-ratio would allow cropping images serverside.
+ * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
+ * - Slow networks optimizations
+ * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
+ *
+ * # Attributions
+ *
+ * The MIT License (MIT)
+ *
+ * applies to:
+ *
+ * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2022 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute,
+ * sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
+ * is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies
+ * or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ **/
+export declare type ImageLoader = (props: {
+    width: number;
+    quality: number;
+    src: string;
+}) => 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: number | undefined;
+    loader?: ImageLoader;
+    optimize: boolean;
+}) => {
+    src: string;
+    srcSet: string | undefined;
+    sizes: string | undefined;
+} | null;
+//# sourceMappingURL=image.d.ts.map

package/lib/component-utils/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/component-utils/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFI;AAIJ,oBAAY,WAAW,GAAG,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;CACb,KAAK,MAAM,CAAC;AAQb,eAAO,MAAM,QAAQ,UAAkC,CAAC;AA8HxD,eAAO,MAAM,kBAAkB,UAAW;IACxC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB,KAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B,GAAG,IA2BH,CAAC"}

package/lib/component-utils/image.js

@@ -0,0 +1,198 @@
+"use strict";
+/**
+ * # Responsive Image component helpers.
+ *
+ * ## Quick summary about img srcset and sizes attributes:
+ *
+ * There are 2 ways to define what image will be loaded in the img property srcset.
+ *
+ * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
+ *   src will be selected depending on `device-pixel-ratio`.
+ *
+ * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
+ *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
+ *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
+ *
+ *   The browser finds the first matching media query from source size descriptors,
+ *   then use source size value to generate internally srcset
+ *   with pixel density descriptors dividing width descriptor value by source size value.
+ *
+ *   Using the example above for viewport width 800px.
+ *   The first matching media query is (max-width: 1200px)
+ *   source size value is 70vw  equal to 800px * 0,7 = 560px
+ *
+ *   browser internal srcset will be (we divide `w` descriptor by source size value):
+ *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
+ *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
+ *
+ *   Finally same rules as for pixel density descriptor 'x' are applied.
+ *
+ * ## Algorithm (without optimizations):
+ *
+ * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
+ * This is good for caching, as we can cache image with specific width and then use it for different devices.
+ *
+ * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
+ * > If allSizes.length is too small, you will deliver too big images to the user,
+ * > if allSizes.length is too big, you will have many caches misses.
+ *
+ * If img has a defined width property.
+ *   1. find the first value from allSizes which is greater or equal to the width property
+ *   2. use found value to generate srcset with pixel density descriptor 'x'
+ *
+ *
+ * If img has no defined width property.
+ *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
+ *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
+ *
+ * Optimizations applied now:
+ *
+ * - If the sizes property is defined, we can exclude from `srcsets` all images
+ *   which are smaller than the `smallestRatio * smallesDeviceSize`
+ *
+ * Future (not implemented) optimizations and improvements:
+ *
+ * - Knowing image size on different viewport widths we can provide nondefault sizes property
+ * - Knowledge of Image aspect-ratio would allow cropping images serverside.
+ * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
+ * - Slow networks optimizations
+ * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
+ *
+ * # Attributions
+ *
+ * The MIT License (MIT)
+ *
+ * applies to:
+ *
+ * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2022 Vercel, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute,
+ * sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
+ * is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies
+ * or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ **/
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImageAttributes = exports.allSizes = void 0;
+const warn_once_1 = __importDefault(require("warn-once"));
+/**
+ * max(...imageSizes) must be less then min(...deviceSizes)
+ **/
+const imageSizes = [16, 32, 48, 64, 96, 128, 256, 384];
+const deviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+exports.allSizes = [...imageSizes, ...deviceSizes];
+/**
+ * https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx
+ **/
+const getWidths = (width, sizes) => {
+    if (sizes) {
+        // Find all the "vw" percent sizes used in the sizes prop
+        const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
+        const percentSizes = [];
+        for (let match; (match = viewportWidthRe.exec(sizes)); match) {
+            percentSizes.push(parseInt(match[2], 10));
+        }
+        if (percentSizes.length) {
+            // we can exclude from srcSets all images which are smaller than the smallestRatio * smallesDeviceSize
+            const smallestRatio = Math.min(...percentSizes) * 0.01;
+            return {
+                widths: exports.allSizes.filter((s) => s >= deviceSizes[0] * smallestRatio),
+                kind: "w",
+            };
+        }
+        return { widths: exports.allSizes, kind: "w" };
+    }
+    if (width == null) {
+        return { widths: deviceSizes, kind: "w" };
+    }
+    const widths = [
+        ...new Set([width, width * 2].map((w) => exports.allSizes.find((p) => p >= w) || exports.allSizes[exports.allSizes.length - 1])),
+    ];
+    return { widths, kind: "x" };
+};
+const generateImgAttrs = ({ src, width, quality, sizes, loader, }) => {
+    const { widths, kind } = getWidths(width, sizes);
+    return {
+        sizes: !sizes && kind === "w" ? "100vw" : sizes,
+        srcSet: widths
+            .map((w, i) => `${loader({ src, quality, width: w })} ${kind === "w" ? w : i + 1}${kind}`)
+            .join(", "),
+        // Must be last, to prevent Safari to load images twice
+        src: loader({
+            src,
+            quality,
+            width: widths[widths.length - 1],
+        }),
+    };
+};
+/**
+ * Default image loader in case of no loader provided
+ * https://developers.cloudflare.com/images/image-resizing/url-format/
+ **/
+const cloudflareImageLoader = ({ width, src, quality }) => {
+    if (process.env.NODE_ENV !== "production") {
+        (0, warn_once_1.default)(!exports.allSizes.includes(width), "Width must be only from allowed values");
+    }
+    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}`;
+    return pathname;
+};
+const getInt = (value) => {
+    if (typeof value === "number") {
+        return Math.round(value);
+    }
+    if (typeof value === "string") {
+        const vNum = Number.parseFloat(value);
+        if (!Number.isNaN(vNum)) {
+            return Math.round(vNum);
+        }
+    }
+    return undefined;
+};
+/**
+ * DEFAULT_SIZES Just an assumption that most images (except hero and icons) are 100% wide on mobile and 50% on desktop.
+ * For icons width are usually set explicitly so DEFAULT_SIZES is not applied.
+ * For hero images, we can allow in UI to select sizes=100vw explicitly.
+ * Anyway, the best would be to calculate this based on canvas data from different breakpoints.
+ * See ../component-utils/image for detailed description
+ **/
+const DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
+const DEFAULT_QUALITY = 80;
+const getImageAttributes = (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.srcSet == null && props.optimize) {
+            const sizes = props.sizes ?? (props.width == null ? DEFAULT_SIZES : undefined);
+            const loader = props.loader ?? cloudflareImageLoader;
+            return generateImgAttrs({
+                src: props.src,
+                width,
+                quality,
+                sizes,
+                loader,
+            });
+        }
+        return { src: props.src, srcSet: props.srcSet, sizes: props.sizes };
+    }
+    return null;
+};
+exports.getImageAttributes = getImageAttributes;

package/lib/component-utils/image.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image.test.d.ts.map

package/lib/component-utils/image.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.test.d.ts","sourceRoot":"","sources":["../../src/component-utils/image.test.ts"],"names":[],"mappings":""}

package/lib/component-utils/image.test.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const image_1 = require("./image");
+describe("Image optimizations applied", () => {
+    test("width is number, create pixel density descriptor 'x'", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: true,
+            width: 100,
+            src: "https://webstudio.is/logo.webp",
+            srcSet: undefined,
+            sizes: undefined,
+            quality: 100,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`
+      Object {
+        "sizes": undefined,
+        "src": "/cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp",
+        "srcSet": "/cdn-cgi/image/width=128,quality=100,format=auto/https://webstudio.is/logo.webp 1x, /cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp 2x",
+      }
+    `);
+    });
+    test("width is undefined, create 'w' descriptor and sizes prop", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: true,
+            width: undefined,
+            src: "https://webstudio.is/logo.webp",
+            srcSet: undefined,
+            sizes: undefined,
+            quality: 90,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`
+      Object {
+        "sizes": "(min-width: 1280px) 50vw, 100vw",
+        "src": "/cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp",
+        "srcSet": "/cdn-cgi/image/width=384,quality=90,format=auto/https://webstudio.is/logo.webp 384w, /cdn-cgi/image/width=640,quality=90,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=90,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=90,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=90,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=90,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=90,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=90,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp 3840w",
+      }
+    `);
+    });
+    test("width is undefined and size defined, creates 'w' descriptor and use input sizes props", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: true,
+            width: undefined,
+            src: "https://webstudio.is/logo.webp",
+            srcSet: undefined,
+            sizes: "100vw",
+            quality: 70,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`
+      Object {
+        "sizes": "100vw",
+        "src": "/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp",
+        "srcSet": "/cdn-cgi/image/width=640,quality=70,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=70,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=70,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=70,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=70,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=70,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=70,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp 3840w",
+      }
+    `);
+    });
+    test("custom loader", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: true,
+            width: undefined,
+            src: "https://webstudio.is/logo.webp",
+            srcSet: undefined,
+            sizes: "100vw",
+            quality: 70,
+            loader: ({ width, src, quality }) => `${new URL(src).pathname}?w=${width}&q=${quality}`,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`
+      Object {
+        "sizes": "100vw",
+        "src": "/logo.webp?w=3840&q=70",
+        "srcSet": "/logo.webp?w=640&q=70 640w, /logo.webp?w=750&q=70 750w, /logo.webp?w=828&q=70 828w, /logo.webp?w=1080&q=70 1080w, /logo.webp?w=1200&q=70 1200w, /logo.webp?w=1920&q=70 1920w, /logo.webp?w=2048&q=70 2048w, /logo.webp?w=3840&q=70 3840w",
+      }
+    `);
+    });
+});
+describe("Image optimizations not applied", () => {
+    test("optimize is false", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: false,
+            width: 100,
+            src: "https://webstudio.is/logo.webp",
+            srcSet: undefined,
+            sizes: undefined,
+            quality: 100,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`
+      Object {
+        "sizes": undefined,
+        "src": "https://webstudio.is/logo.webp",
+        "srcSet": undefined,
+      }
+    `);
+    });
+    test("srcSet is defined", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: true,
+            width: 100,
+            src: "https://webstudio.is/logo.webp",
+            srcSet: "user-defined-srcset",
+            sizes: undefined,
+            quality: 100,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`
+      Object {
+        "sizes": undefined,
+        "src": "https://webstudio.is/logo.webp",
+        "srcSet": "user-defined-srcset",
+      }
+    `);
+    });
+    test("src is empty", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: true,
+            width: 100,
+            src: "",
+            srcSet: undefined,
+            sizes: undefined,
+            quality: 100,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`null`);
+    });
+    test("src is undefined", () => {
+        const imgAttr = (0, image_1.getImageAttributes)({
+            optimize: true,
+            width: 100,
+            src: undefined,
+            srcSet: undefined,
+            sizes: undefined,
+            quality: 100,
+        });
+        expect(imgAttr).toMatchInlineSnapshot(`null`);
+    });
+});

package/lib/components/body.props.json

@@ -447,10 +447,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "yes",
-            "no"
-        ]
+        "options": ["yes", "no"]
     },
     "radioGroup": {
         "defaultValue": null,
@@ -739,6 +736,7 @@
         }
     },
     "color": {
+        "defaultValue": null,
         "description": "",
         "name": "color",
         "parent": {
@@ -943,10 +941,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "on",
-            "off"
-        ]
+        "options": ["on", "off"]
     },
     "inputMode": {
         "defaultValue": null,
@@ -1109,12 +1104,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "list",
-            "none",
-            "inline",
-            "both"
-        ]
+        "options": ["list", "none", "inline", "both"]
     },
     "aria-busy": {
         "defaultValue": null,
@@ -1378,14 +1368,7 @@
         "control": {
             "type": "select"
         },
-        "options": [
-            "link",
-            "none",
-            "copy",
-            "execute",
-            "move",
-            "popup"
-        ]
+        "options": ["link", "none", "copy", "execute", "move", "popup"]
     },
     "aria-errormessage": {
         "defaultValue": null,
@@ -1662,11 +1645,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "off",
-            "assertive",
-            "polite"
-        ]
+        "options": ["off", "assertive", "polite"]
     },
     "aria-modal": {
         "defaultValue": null,
@@ -1764,10 +1743,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "horizontal",
-            "vertical"
-        ]
+        "options": ["horizontal", "vertical"]
     },
     "aria-owns": {
         "defaultValue": null,
@@ -2136,12 +2112,7 @@
         "control": {
             "type": "radio"
         },
-        "options": [
-            "none",
-            "ascending",
-            "descending",
-            "other"
-        ]
+        "options": ["none", "ascending", "descending", "other"]
     },
     "aria-valuemax": {
         "defaultValue": null,