@plasmicapp/react-web 0.2.76 → 0.2.78

package/dist/all.d.ts

@@ -91,12 +91,15 @@ declare function PlasmicIcon(props: React.ComponentProps<"svg"> & {
  * Responsive `<img/>` replacement, based on `next/image`
  */
 
-declare type ImageLoader = (opts: {
-    src: string;
-    width: number;
-    quality?: number;
-    format?: "webp";
-}) => string;
+interface ImageLoader {
+    supportsUrl: (url: string) => boolean;
+    transformUrl: (opts: {
+        src: string;
+        width?: number;
+        quality?: number;
+        format?: "webp";
+    }) => string;
+}
 declare type ImgTagProps = Omit<React__default.ComponentProps<"img">, "src" | "srcSet" | "ref" | "style">;
 interface PlasmicImgProps extends ImgTagProps {
     /**

package/dist/react-web.cjs.development.js

@@ -889,10 +889,10 @@ function makePicture(opts) {
       ref = opts.ref;
   return React__default.createElement("picture", {
     className: "__wab_picture"
-  }, imageLoader && React__default.createElement("source", {
+  }, imageLoader && imageLoader.supportsUrl(src) && React__default.createElement("source", {
     type: "image/webp",
     srcSet: widthDescs.map(function (wd) {
-      return imageLoader({
+      return imageLoader.transformUrl({
         src: src,
         quality: quality,
         width: wd.width,
@@ -903,13 +903,13 @@ function makePicture(opts) {
     ref: ref,
     className: className,
     decoding: "async",
-    src: imageLoader ? imageLoader({
+    src: imageLoader && imageLoader.supportsUrl(src) ? imageLoader.transformUrl({
       src: src,
       quality: quality,
       width: widthDescs[widthDescs.length - 1].width
     }) : src,
-    srcSet: imageLoader ? widthDescs.map(function (wd) {
-      return imageLoader({
+    srcSet: imageLoader && imageLoader.supportsUrl(src) ? widthDescs.map(function (wd) {
+      return imageLoader.transformUrl({
         src: src,
         quality: quality,
         width: wd.width
@@ -920,12 +920,20 @@ function makePicture(opts) {
   })));
 }
 
-function getClosestPresetSize(width) {
+function getClosestPresetSize(width, fullWidth) {
   var _ALL_SIZES$find;
 
-  return (_ALL_SIZES$find = ALL_SIZES.find(function (w) {
+  var nextBigger = (_ALL_SIZES$find = ALL_SIZES.find(function (w) {
     return w >= width;
   })) != null ? _ALL_SIZES$find : ALL_SIZES[ALL_SIZES.length - 1];
+
+  if (nextBigger >= fullWidth / 2) {
+    // If the requested width is larger than half the fullWidth,
+    // we just use the original width instead
+    return undefined;
+  }
+
+  return nextBigger;
 }
 /**
  * Computes the appropriate srcSet and sizes to use
@@ -939,10 +947,10 @@ function getWidths(width, fullWidth) {
     // If there's an exact width, then we just need to display it at 1x and 2x density
     return {
       widthDescs: [{
-        width: getClosestPresetSize(pixelWidth),
+        width: getClosestPresetSize(pixelWidth, fullWidth),
         desc: "1x"
       }, {
-        width: getClosestPresetSize(pixelWidth * 2),
+        width: getClosestPresetSize(pixelWidth * 2, fullWidth),
         desc: "2x"
       }],
       sizes: undefined
@@ -960,7 +968,7 @@ function getWidths(width, fullWidth) {
     // is offer 1x
     return {
       widthDescs: [{
-        width: getClosestPresetSize(fullWidth),
+        width: getClosestPresetSize(fullWidth, fullWidth),
         desc: "1x"
       }],
       sizes: undefined
@@ -968,9 +976,15 @@ function getWidths(width, fullWidth) {
   }
 
   return {
-    widthDescs: usefulSizes.map(function (size) {
+    widthDescs: usefulSizes.map(function (size, i) {
       return {
-        width: size,
+        width: // If this is the last (buggest) useful width, but it is
+        // still within the bounds set by DEVICE_SIZES, then just
+        // use the original, unresized image.  This means if we match
+        // the largest size, we use unresized and best quality image.
+        // We only do this, though, if fullWidth is "reasonable" --
+        // smaller than the largest size we would consider.
+        i === usefulSizes.length - 1 && fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1] ? undefined : size,
         desc: size + "w"
       };
     }),
@@ -1032,10 +1046,18 @@ function getImageLoader(loader) {
   }
 }
 
-var PLASMIC_IMAGE_LOADER = function PLASMIC_IMAGE_LOADER(opts) {
-  var _opts$quality;
+var PLASMIC_IMAGE_LOADER = {
+  supportsUrl: function supportsUrl(src) {
+    return src.startsWith("https://img.plasmic.app");
+  },
+  transformUrl: function transformUrl(opts) {
+    var _opts$quality;
 
-  return opts.src + "?w=" + opts.width + "&q=" + ((_opts$quality = opts.quality) != null ? _opts$quality : 75) + (opts.format ? "&f=" + opts.format : "");
+    var params = [opts.width ? "w=" + opts.width : undefined, "q=" + ((_opts$quality = opts.quality) != null ? _opts$quality : 75), opts.format ? "f=" + opts.format : undefined].filter(function (x) {
+      return !!x;
+    });
+    return opts.src + "?" + params.join("&");
+  }
 };
 
 function PlasmicLink(props) {