@fly4react/image/dist/index.js

Image optimization and lazy loading utilities for React

"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.n = (module)=>{
        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    ImagePreloadConsumer: ()=>components_ImagePreloadConsumer,
    addImagesToPreloadQueue: ()=>addImagesToPreloadQueue,
    generatePreloadHTML: ()=>generatePreloadHTML,
    clearImagePreloadQueue: ()=>clearImagePreloadQueue,
    addToPreloadQueue: ()=>addToPreloadQueue,
    isImageInPreloadQueue: ()=>isImageInPreloadQueue,
    isServer: ()=>isServer,
    generateImagePreloadHTML: ()=>generateImagePreloadHTML,
    imagePreloadManager: ()=>imagePreloadManager,
    clearPreloadQueue: ()=>clearPreloadQueue,
    ImagePreloadManager: ()=>ImagePreloadManager,
    default: ()=>src_0,
    getPreloadQueue: ()=>getPreloadQueue,
    useImagePreload: ()=>useImagePreload,
    ImageLoader: ()=>ImageLoader,
    isBrowser: ()=>isBrowser,
    getImagePreloadQueue: ()=>getImagePreloadQueue,
    useImagesPreload: ()=>useImagesPreload
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
const memo_namespaceObject = require("@fly4react/memo");
var memo_default = /*#__PURE__*/ __webpack_require__.n(memo_namespaceObject);
const isServer = "undefined" == typeof window;
const isBrowser = "undefined" != typeof window;
let preload_preloadQueue = [];
const getPreloadQueue = ()=>[
        ...preload_preloadQueue
    ];
const clearPreloadQueue = ()=>{
    preload_preloadQueue = [];
};
const isImageInPreloadQueue = (src)=>preload_preloadQueue.some((item)=>item.src === src);
const addToPreloadQueue = (options)=>{
    if (isServer && false !== options.ssr) {
        if (!isImageInPreloadQueue(options.src)) preload_preloadQueue.push(options);
    }
};
const generatePreloadHTML = ()=>{
    if (0 === preload_preloadQueue.length) return "";
    const links = preload_preloadQueue.map((options)=>{
        const { src, type = "image", priority = "auto", sizes, media } = options;
        let link = `<link rel="preload" as="${type}" href="${src}"`;
        if ("auto" !== priority) link += ` importance="${priority}"`;
        if (sizes) link += ` sizes="${sizes}"`;
        if (media) link += ` media="${media}"`;
        link += ">";
        return link;
    });
    return links.join("\n");
};
const addImagesToPreloadQueue = (options)=>{
    if (isServer) {
        for (const option of options)if (false !== option.ssr) addToPreloadQueue(option);
    }
};
function useImagePreload(options) {
    const { src, type = "image", priority = "auto", ssr = true, sizes, media } = options;
    if ("undefined" == typeof window && ssr) addToPreloadQueue({
        src,
        type,
        priority,
        ssr,
        sizes,
        media
    });
    return {
        isAdded: "undefined" == typeof window && ssr
    };
}
const useImagesPreload = (options)=>{
    if ("undefined" == typeof window) {
        for (const option of options)if (false !== option.ssr) addToPreloadQueue(option);
    }
    return {
        isAdded: "undefined" == typeof window
    };
};
const BackgroundImage = /*#__PURE__*/ external_react_default().forwardRef(({ src, style, className, children, preload, transform }, ref)=>{
    const transformedSrc = transform ? transform(src) : src;
    useImagePreload({
        src: transformedSrc,
        priority: preload?.priority || "auto",
        type: preload?.type || "image",
        ssr: preload?.ssr ?? true,
        sizes: preload?.sizes,
        media: preload?.media
    });
    const styles = (0, external_react_namespaceObject.useMemo)(()=>({
            ...style,
            backgroundImage: `url(${transformedSrc})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat"
        }), [
        transformedSrc,
        style
    ]);
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
        ref: ref,
        className: className,
        style: styles,
        children: children
    });
});
BackgroundImage.displayName = "BackgroundImage";
const components_BackgroundImage = memo_default()(BackgroundImage);
const observer_namespaceObject = require("@fly4react/observer");
var observer_default = /*#__PURE__*/ __webpack_require__.n(observer_namespaceObject);
const ContentImage_ContentImage = /*#__PURE__*/ external_react_default().forwardRef(({ src, lazyload, preload, transform, ...rest }, ref)=>{
    const transformedSrc = transform ? transform(src) : src;
    useImagePreload({
        src: transformedSrc,
        priority: preload?.priority || "auto",
        type: preload?.type || "image",
        ssr: preload?.ssr ?? true,
        sizes: preload?.sizes,
        media: preload?.media
    });
    if (lazyload) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(observer_default(), {
        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
            ref: ref,
            src: transformedSrc,
            ...rest
        })
    });
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
        ref: ref,
        src: transformedSrc,
        ...rest,
        loading: "eager"
    });
});
ContentImage_ContentImage.displayName = "ContentImage";
const ContentImage = memo_default()(ContentImage_ContentImage);
const ImageLoader_ImageLoader = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
    if ("content" === props.type) {
        const { type, children, ...rest } = props;
        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ContentImage, {
            ref: ref,
            ...rest
        });
    }
    if ("background" === props.type) {
        const { type, ...rest } = props;
        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_BackgroundImage, {
            ref: ref,
            ...rest
        });
    }
    return null;
});
ImageLoader_ImageLoader.displayName = "ImageLoader";
const ImageLoader = /*#__PURE__*/ external_react_default().memo(ImageLoader_ImageLoader);
const ImagePreloadConsumer = ({ ssr = false })=>{
    if ("undefined" != typeof window || !ssr) return null;
    const preloadQueue = getPreloadQueue();
    if (0 === preloadQueue.length) return null;
    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
        children: preloadQueue.map((options)=>{
            const { src, type = "image", priority = "auto", sizes, media } = options;
            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("link", {
                rel: "preload",
                as: type,
                href: src,
                ..."auto" !== priority && {
                    importance: priority
                },
                ...sizes && {
                    sizes
                },
                ...media && {
                    media
                }
            }, `preload-${src}-${type}-${priority}`);
        })
    });
};
const components_ImagePreloadConsumer = ImagePreloadConsumer;
const generateImagePreloadHTML = ()=>generatePreloadHTML();
const getImagePreloadQueue = ()=>getPreloadQueue();
const clearImagePreloadQueue = ()=>{
    clearPreloadQueue();
};
class ImagePreloadManager {
    queue = new Map();
    addToPage(pageId, preloadOptions) {
        if (!this.queue.has(pageId)) this.queue.set(pageId, []);
        this.queue.get(pageId)?.push(...preloadOptions);
    }
    getPagePreloadHTML(pageId) {
        const pageQueue = this.queue.get(pageId) || [];
        if (0 === pageQueue.length) return "";
        const links = pageQueue.map((options)=>{
            const { src, type = "image", priority = "auto", sizes, media } = options;
            let link = `<link rel="preload" as="${type}" href="${src}"`;
            if ("auto" !== priority) link += ` importance="${priority}"`;
            if (sizes) link += ` sizes="${sizes}"`;
            if (media) link += ` media="${media}"`;
            link += ">";
            return link;
        });
        return links.join("\n");
    }
    clearPage(pageId) {
        this.queue.delete(pageId);
    }
    clearAll() {
        this.queue.clear();
    }
}
const imagePreloadManager = new ImagePreloadManager();
const src_0 = ImageLoader;
exports.ImageLoader = __webpack_exports__.ImageLoader;
exports.ImagePreloadConsumer = __webpack_exports__.ImagePreloadConsumer;
exports.ImagePreloadManager = __webpack_exports__.ImagePreloadManager;
exports.addImagesToPreloadQueue = __webpack_exports__.addImagesToPreloadQueue;
exports.addToPreloadQueue = __webpack_exports__.addToPreloadQueue;
exports.clearImagePreloadQueue = __webpack_exports__.clearImagePreloadQueue;
exports.clearPreloadQueue = __webpack_exports__.clearPreloadQueue;
exports["default"] = __webpack_exports__["default"];
exports.generateImagePreloadHTML = __webpack_exports__.generateImagePreloadHTML;
exports.generatePreloadHTML = __webpack_exports__.generatePreloadHTML;
exports.getImagePreloadQueue = __webpack_exports__.getImagePreloadQueue;
exports.getPreloadQueue = __webpack_exports__.getPreloadQueue;
exports.imagePreloadManager = __webpack_exports__.imagePreloadManager;
exports.isBrowser = __webpack_exports__.isBrowser;
exports.isImageInPreloadQueue = __webpack_exports__.isImageInPreloadQueue;
exports.isServer = __webpack_exports__.isServer;
exports.useImagePreload = __webpack_exports__.useImagePreload;
exports.useImagesPreload = __webpack_exports__.useImagesPreload;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
    "ImageLoader",
    "ImagePreloadConsumer",
    "ImagePreloadManager",
    "addImagesToPreloadQueue",
    "addToPreloadQueue",
    "clearImagePreloadQueue",
    "clearPreloadQueue",
    "default",
    "generateImagePreloadHTML",
    "generatePreloadHTML",
    "getImagePreloadQueue",
    "getPreloadQueue",
    "imagePreloadManager",
    "isBrowser",
    "isImageInPreloadQueue",
    "isServer",
    "useImagePreload",
    "useImagesPreload"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
    value: true
});