@nichoth/image/dist/preact.cjs

An image component

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var preact_exports = {};
__export(preact_exports, {
  CloudinaryImage: () => CloudinaryImage,
  default: () => preact_default
});
module.exports = __toCommonJS(preact_exports);
var import_url_gen = require("@cloudinary/url-gen");
var import_resize = require("@cloudinary/url-gen/actions/resize");
var import_preact = require("preact");
var import_hooks = require("preact/hooks");
var import_srcset = require("./srcset.js");
const CloudinaryImage = /* @__PURE__ */ __name(function(config) {
  const { cloudName } = config;
  const cld = new import_url_gen.Cloudinary({
    cloud: { cloudName },
    url: { secure: true }
  });
  const { defaultSrcset, getSrcset } = (0, import_srcset.CloudinarySrcset)(cld);
  const Image = /* @__PURE__ */ __name(function(props) {
    const {
      decoding,
      filename,
      alt,
      loading,
      fetchpriority,
      className,
      srcset,
      sizes
    } = props;
    return (0, import_preact.h)("img", {
      class: props.class || className,
      alt,
      srcset: srcset ? getSrcset(filename, srcset).join(", ") : defaultSrcset(filename),
      sizes: sizes ? sizes.join(", ") : "100vw",
      src: cld.image(filename).format("auto").toURL(),
      loading: loading || "lazy",
      decoding: decoding || "auto",
      fetchpriority: fetchpriority || "low"
    });
  }, "Image");
  const BlurredImage = /* @__PURE__ */ __name(function(props) {
    const {
      maxWidth,
      blurPlaceholder,
      filename,
      className,
      sizes,
      srcset
    } = props;
    const placeholder = (0, import_hooks.useRef)(null);
    (0, import_hooks.useEffect)(() => {
      if (!placeholder.current)
        return;
      const imgLarge = new window.Image();
      const sources = srcset ? getSrcset(filename, srcset).join(", ") : defaultSrcset(filename);
      imgLarge.onload = () => imgLarge.classList.add("loaded");
      imgLarge.setAttribute("sizes", sizes ? sizes.join(", ") : "100vw");
      imgLarge.setAttribute("srcset", sources);
      imgLarge.classList.add("sharp");
      imgLarge.src = cld.image(filename).format("auto").quality("auto").resize((0, import_resize.scale)().width(maxWidth)).toURL();
      placeholder.current.appendChild(imgLarge);
    }, [placeholder.current]);
    const _class = props.class || className;
    return (0, import_preact.h)("div", {
      class: "placeholder" + (_class ? ` ${_class}` : ""),
      ref: placeholder
    }, [
      (0, import_preact.h)("img", {
        class: "blurry loaded",
        src: blurPlaceholder
      })
    ]);
  }, "BlurredImage");
  return { Image, BlurredImage };
}, "CloudinaryImage");
var preact_default = CloudinaryImage;