@plasmicapp/react-web 0.2.426 → 0.2.428

package/dist/all.d.ts

@@ -12653,10 +12653,11 @@ interface ImageLoader {
         src: string;
         width?: number;
         quality?: number;
-        format?: "webp";
+        format?: PlasmicImgFormat;
     }) => string;
 }
 type ImgTagProps = Omit<React__default.ComponentProps<"img">, "src" | "srcSet" | "ref" | "style">;
+type PlasmicImgFormat = "avif" | "jpeg" | "png" | "webp";
 interface PlasmicImgProps extends ImgTagProps {
     /**
      * Either an object with the src string, and its full width and height,
@@ -12705,6 +12706,10 @@ interface PlasmicImgProps extends ImgTagProps {
      * For variable quality formats like jpg, the quality from 0 to 100
      */
     quality?: number;
+    /**
+     * Choose the output image format.
+     */
+    format?: PlasmicImgFormat;
     /**
      * ImageLoader to use for loading different dimensions of the image.
      * If none specified, will not attempt to load different dimensions.

package/dist/index.cjs.js

@@ -748,7 +748,7 @@ var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
 var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
 var ALL_SIZES = __spreadArray(__spreadArray([], __read(IMG_SIZES), false), __read(DEVICE_SIZES), false);
 var PlasmicImg = React.forwardRef(function PlasmicImg(props, outerRef) {
-    var src = props.src, className = props.className, displayWidth = props.displayWidth, displayHeight = props.displayHeight, displayMinWidth = props.displayMinWidth, displayMinHeight = props.displayMinHeight, displayMaxWidth = props.displayMaxWidth, displayMaxHeight = props.displayMaxHeight, quality = props.quality, loader = props.loader, imgRef = props.imgRef, style = props.style, loading = props.loading, rest = __rest(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"]);
+    var src = props.src, className = props.className, displayWidth = props.displayWidth, displayHeight = props.displayHeight, displayMinWidth = props.displayMinWidth, displayMinHeight = props.displayMinHeight, displayMaxWidth = props.displayMaxWidth, displayMaxHeight = props.displayMaxHeight, quality = props.quality, format = props.format, loader = props.loader, imgRef = props.imgRef, style = props.style, loading = props.loading, rest = __rest(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "format", "loader", "imgRef", "style", "loading"]);
     var imgProps = Object.assign({}, rest, {
         // Default loading to "lazy" if not specified (which is different from the
         // html img, which defaults to eager!)
@@ -871,6 +871,7 @@ var PlasmicImg = React.forwardRef(function PlasmicImg(props, outerRef) {
             sizes: sizes,
             src: srcStr,
             quality: quality,
+            format: format,
             ref: imgRef,
             style: style ? pick(style, "objectFit", "objectPosition") : undefined,
             imgProps: imgProps,
@@ -881,9 +882,9 @@ function makePicture(opts) {
     // If imageLoader is undefined, then this renders to just a normal
     // <img />.  Else it will render to a <picture> with a <source> for
     // webp, and srcSet/sizes set according to width requirements.
-    var imageLoader = opts.imageLoader, widthDescs = opts.widthDescs, src = opts.src, quality = opts.quality, style = opts.style, className = opts.className, sizes = opts.sizes, imgProps = opts.imgProps, ref = opts.ref;
+    var imageLoader = opts.imageLoader, widthDescs = opts.widthDescs, src = opts.src, quality = opts.quality, format = opts.format, style = opts.style, className = opts.className, sizes = opts.sizes, imgProps = opts.imgProps, ref = opts.ref;
     return (React.createElement("picture", { className: "__wab_picture" },
-        imageLoader && imageLoader.supportsUrl(src) && (React.createElement("source", { type: "image/webp", srcSet: widthDescs
+        imageLoader && imageLoader.supportsUrl(src) && !format && (React.createElement("source", { type: "image/webp", srcSet: widthDescs
                 .map(function (wd) {
                 return "".concat(imageLoader.transformUrl({
                     src: src,
@@ -897,6 +898,7 @@ function makePicture(opts) {
                 ? imageLoader.transformUrl({
                     src: src,
                     quality: quality,
+                    format: format,
                     width: widthDescs[widthDescs.length - 1].width,
                 })
                 : src, srcSet: imageLoader && imageLoader.supportsUrl(src)
@@ -905,6 +907,7 @@ function makePicture(opts) {
                     return "".concat(imageLoader.transformUrl({
                         src: src,
                         quality: quality,
+                        format: format,
                         width: wd.width,
                     }), " ").concat(wd.desc);
                 })