@plasmicapp/react-web 0.2.319 → 0.2.321

package/dist/all.d.ts

@@ -11404,6 +11404,10 @@ interface JsonElement {
 interface DefaultComponentElement<P> {
     type: "default-component";
     kind: "button" | "text-input";
+    /**
+     * The name of the element in the tree
+     */
+    elementName?: string;
     props?: {
         [prop in keyof Partial<P>]: number | string | boolean | null | undefined | JsonElement | PlasmicElement | PlasmicElement[];
     } & {
@@ -11417,6 +11421,10 @@ interface CodeComponentElement<P> {
      * The registered component name
      */
     name: string;
+    /**
+     * The name of the element in the tree
+     */
+    elementName?: string;
     styles?: CSSProperties;
     props?: {
         [prop in keyof Partial<P>]: number | string | boolean | null | undefined | JsonElement | PlasmicElement | PlasmicElement[];

package/dist/index.cjs.js

@@ -1119,6 +1119,7 @@ function PlasmicIcon(props) {
 /**
  * Responsive `<img/>` replacement, based on `next/image`
  */
+var IMG_OPTIMIZER_HOST = "https://img.plasmic.app";
 // Default image sizes to snap to
 // TODO: make this configurable?
 var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
@@ -1131,9 +1132,11 @@ var PlasmicImg = React.forwardRef(function PlasmicImg(props, outerRef) {
         // html img, which defaults to eager!)
         loading: loading !== null && loading !== void 0 ? loading : "lazy",
     });
-    var _a = typeof src === "string" || !src
+    var _a = !src
         ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
-        : src, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, aspectRatio = _a.aspectRatio;
+        : typeof src === "string"
+            ? getImageSizeData(getPixelLength(props.width), getPixelLength(props.height))
+            : src, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, aspectRatio = _a.aspectRatio;
     var srcStr = src
         ? typeof src === "string"
             ? src
@@ -1390,6 +1393,14 @@ function parseNumeric(val) {
     var units = res[2];
     return { num: +num, units: units };
 }
+function getImageSizeData(width, height) {
+    var aspectRatio = width && height ? width / height : undefined;
+    return {
+        fullWidth: width,
+        fullHeight: height,
+        aspectRatio: aspectRatio && isFinite(aspectRatio) ? aspectRatio : undefined,
+    };
+}
 function getImageLoader(loader) {
     if (loader == null) {
         return undefined;
@@ -1401,18 +1412,22 @@ function getImageLoader(loader) {
         return loader;
     }
 }
+function isInternalKey(src) {
+    return /^([a-f0-9]{32})\..{1,16}$/i.test(src);
+}
 var PLASMIC_IMAGE_LOADER = {
     supportsUrl: function (src) {
-        return src.startsWith("https://img.plasmic.app") && !isSvg(src);
+        return (src.startsWith("http") || isInternalKey(src)) && !isSvg(src);
     },
     transformUrl: function (opts) {
         var _a;
         var params = [
+            "src=".concat(encodeURIComponent(opts.src)),
             opts.width ? "w=".concat(opts.width) : undefined,
             "q=".concat((_a = opts.quality) !== null && _a !== void 0 ? _a : 75),
             opts.format ? "f=".concat(opts.format) : undefined,
         ].filter(function (x) { return !!x; });
-        return "".concat(opts.src, "?").concat(params.join("&"));
+        return "".concat(IMG_OPTIMIZER_HOST, "/img-optimizer/v1/img?").concat(params.join("&"));
     },
 };