@mts-pjsc/image-optimize 1.0.3 → 1.0.6

package/dist/es5/components/Image.d.ts

@@ -9,30 +9,52 @@ export interface IImageOptions {
 }
 export declare class Image<P extends IImageOptions> extends React.Component<P> {
     static isShowDiagnostic: boolean;
-    static isAvif: boolean | null;
-    static isWebP: boolean | null;
+    static controlPoints: number[];
+    private static isAvif;
+    private static isWebP;
     /**
      * Change for local development.
      *
      * The server microservice will not be able to make a request to your localhost.
-     * Therefore, when developing locally, you must specify a product or development server.
+     * Therefore, when developing locally, you must specify a production or development server origin.
+     *
+     * Example:
+     * https://tb.mts.ru
      *
      */
-    static domain: string;
+    static imgOrigin: string;
     resultUrl: string;
     resizeCheckTimeout: number;
     thisComponent: HTMLImageElement | null;
-    private sourceUrl;
-    private readonly extensionsRegexp;
-    private readonly controlPoints;
-    private readonly windowResizeHandler;
-    private lastOptimalSize;
-    private checks;
+    protected sourceUrl: string;
+    protected readonly extensionsRegexp: RegExp;
+    protected readonly windowResizeHandler: EventListenerOrEventListenerObject;
+    protected lastOptimalSize: number;
+    /**
+     * Serves to prevent recursion when resizing images to determine the optimal size.
+     * This recursion can be caught with poor layout that does not take into account the scaling of images.
+     */
+    protected checks: number;
     constructor(props: P);
     componentDidMount(): void;
     shouldComponentUpdate(props: P): boolean;
     componentWillUnmount(): void;
     render(): JSX.Element;
-    private checkImage;
-    private onWindowResize;
+    protected checkImage(isResize?: boolean): Promise<void>;
+    protected processImage(isResize: boolean): void;
+    protected onWindowResize(): void;
+    protected getContainerSize(): number;
+    protected getOptimalSize(containerSize: number): number;
+    protected makeResultUrl(optimalSize: number): URL;
+    protected extractImageFormat(path: string): string;
+    protected applyResultUrl(url: URL): void;
+    /**
+     * This function should motivate the developer to make a layout that does not cause resizing.
+     *
+     * @param {boolean} isResize
+     * @param {number} optimalSize
+     */
+    protected showWarningOnResize(isResize: boolean, optimalSize: number): void;
+    protected showResultInLog(containerSize: number, optimalSize: number): void;
+    protected initImageFormats(): Promise<void>;
 }

package/dist/es5/components/Image.js

@@ -4,18 +4,21 @@ exports.Image = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var check_avif_feature_1 = require("../helpers/check-avif-feature");
-var check_webp_feature_1 = require("../helpers/check-webp-feature");
+var get_format_features_1 = require("../helpers/get-format-features");
 var Image = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Image, _super);
+    tslib_1.__extends(Image, _super);
     function Image(props) {
         var _this = _super.call(this, props) || this;
         _this.resultUrl = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
         _this.resizeCheckTimeout = 0;
+        _this.thisComponent = null;
         _this.sourceUrl = "";
         _this.extensionsRegexp = /\.\w+$/u;
-        _this.controlPoints = [160, 320, 640, 1280, 1920];
-        _this.lastOptimalSize = -1;
+        _this.lastOptimalSize = 0;
+        /**
+         * Serves to prevent recursion when resizing images to determine the optimal size.
+         * This recursion can be caught with poor layout that does not take into account the scaling of images.
+         */
         _this.checks = 0;
         _this.windowResizeHandler = function () { return _this.onWindowResize(); };
         return _this;
@@ -29,6 +32,7 @@ var Image = /** @class */ (function (_super) {
         if (this.sourceUrl !== props.src) {
             this.sourceUrl = props.src;
             this.checks = 0;
+            // Raf for correct image position after redraw outer components
             requestAnimationFrame(function () { return _this.checkImage(); });
             return true;
         }
@@ -43,110 +47,38 @@ var Image = /** @class */ (function (_super) {
                 var _a, _b;
                 _this.thisComponent = elem;
                 (_b = (_a = _this.props).setRef) === null || _b === void 0 ? void 0 : _b.call(_a, elem);
-            }, src: this.resultUrl }, void 0));
+            }, src: this.resultUrl }));
     };
-    // eslint-disable-next-line max-statements, complexity, max-lines-per-function
     Image.prototype.checkImage = function (isResize) {
-        var _a;
         if (isResize === void 0) { isResize = false; }
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
-            var result, result, containerSize, element, indexOptimalSize, sourceUrl, url, match, format, resultUrl;
-            return (0, tslib_1.__generator)(this, function (_b) {
-                switch (_b.label) {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        if (!this.thisComponent) {
-                            return [2 /*return*/];
-                        }
                         if (this.checks > 1) {
                             return [2 /*return*/];
                         }
-                        if (!(Image.isAvif === null)) return [3 /*break*/, 2];
-                        return [4 /*yield*/, (0, check_avif_feature_1.checkAvifFeature)()];
+                        this.checks += 1;
+                        if (!(Image.isAvif === null || Image.isWebP === null)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.initImageFormats()];
                     case 1:
-                        result = _b.sent();
-                        // !!! Eslint alert it's true, upgrade algorithm later
-                        // eslint-disable-next-line require-atomic-updates
-                        Image.isAvif = result;
-                        this.checkImage();
-                        return [2 /*return*/];
+                        _a.sent();
+                        _a.label = 2;
                     case 2:
-                        if (!(!Image.isAvif && Image.isWebP === null)) return [3 /*break*/, 4];
-                        return [4 /*yield*/, (0, check_webp_feature_1.checkWebpFeature)()];
-                    case 3:
-                        result = _b.sent();
-                        // eslint-disable-next-line require-atomic-updates
-                        Image.isWebP = result;
-                        this.checkImage();
-                        return [2 /*return*/];
-                    case 4:
-                        // Checks +1 after check webp support
-                        this.checks += 1;
-                        containerSize = 0;
-                        element = this.thisComponent;
-                        while (containerSize < 2 && Boolean(element)) {
-                            containerSize = element.getBoundingClientRect().width ||
-                                Number.parseFloat(getComputedStyle(element).width) || 0;
-                            // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
-                            element = element.parentElement;
-                        }
-                        containerSize *= window.devicePixelRatio;
-                        indexOptimalSize = this.controlPoints
-                            .findIndex(function (width) { return containerSize <= width; });
-                        if (indexOptimalSize < 0) { // If bigger then maximum size or NaN
-                            indexOptimalSize = this.controlPoints.length - 1;
-                        }
-                        indexOptimalSize += (_a = this.props.offset) !== null && _a !== void 0 ? _a : 0;
-                        if (indexOptimalSize < 0) {
-                            indexOptimalSize = 0;
-                        }
-                        else if (indexOptimalSize >= this.controlPoints.length) {
-                            indexOptimalSize = this.controlPoints.length - 1;
-                        }
-                        if (!isResize && this.lastOptimalSize >= 0 && this.lastOptimalSize !== indexOptimalSize) {
-                            // eslint-disable-next-line no-console
-                            console.warn("New image size", this.controlPoints[this.lastOptimalSize], this.controlPoints[indexOptimalSize], this.sourceUrl);
-                        }
-                        this.lastOptimalSize = indexOptimalSize;
-                        sourceUrl = new URL(this.sourceUrl, Image.domain);
-                        url = new URL("/optimizer/optimize", location.origin);
-                        url.searchParams.set("src", sourceUrl.toString());
-                        url.searchParams.set("size", String(this.controlPoints[indexOptimalSize]));
-                        if (typeof this.props.quality === "number") {
-                            url.searchParams.set("quality", String(this.props.quality));
-                        }
-                        match = this.extensionsRegexp.exec(sourceUrl.pathname);
-                        format = "";
-                        if (Image.isAvif) {
-                            format = "avif";
-                        }
-                        else if (Image.isWebP === true) {
-                            format = "webp";
-                        }
-                        else {
-                            format = String(match === null || match === void 0 ? void 0 : match[0])
-                                .replace(".", "")
-                                .replace("jpg", "jpeg");
-                        }
-                        url.searchParams.set("format", format);
-                        resultUrl = url.toString();
-                        if (this.resultUrl !== resultUrl) {
-                            this.resultUrl = resultUrl;
-                            this.thisComponent.src = this.resultUrl;
-                            if (process.env.NODE_ENV !== "production" && Image.isShowDiagnostic) {
-                                // eslint-disable-next-line no-console
-                                console.log([
-                                    "🏄 Image optimization:",
-                                    "Container size ".concat(containerSize, "px,"),
-                                    "optimal size ".concat(this.controlPoints[indexOptimalSize], ","),
-                                    "image ".concat(this.sourceUrl)
-                                ].join(" "));
-                            }
-                        }
+                        this.processImage(isResize);
                         return [2 /*return*/];
                 }
             });
         });
     };
+    Image.prototype.processImage = function (isResize) {
+        var containerSize = this.getContainerSize();
+        var optimalSize = this.getOptimalSize(containerSize);
+        this.showWarningOnResize(isResize, optimalSize);
+        var url = this.makeResultUrl(optimalSize);
+        this.applyResultUrl(url);
+        this.showResultInLog(containerSize, optimalSize);
+    };
     Image.prototype.onWindowResize = function () {
         var _this = this;
         if (this.resizeCheckTimeout) {
@@ -157,17 +89,128 @@ var Image = /** @class */ (function (_super) {
             _this.checkImage(true);
         }, 500);
     };
+    Image.prototype.getContainerSize = function () {
+        var containerSize = 0;
+        var element = this.thisComponent;
+        while (containerSize < 2 && element) {
+            containerSize = element.getBoundingClientRect().width ||
+                Number.parseFloat(getComputedStyle(element).width) || 0;
+            element = element.parentElement;
+        }
+        return containerSize * window.devicePixelRatio;
+    };
+    Image.prototype.getOptimalSize = function (containerSize) {
+        var _a;
+        var index = Image.controlPoints
+            .findIndex(function (width) { return containerSize <= width; });
+        // If bigger then maximum size or NaN
+        if (index < 0) {
+            index = Image.controlPoints.length - 1;
+        }
+        // Make manual more or less size
+        index += (_a = this.props.offset) !== null && _a !== void 0 ? _a : 0;
+        // If offset make out of boundary
+        if (index < 0) {
+            index = 0;
+        }
+        else if (index >= Image.controlPoints.length) {
+            index = Image.controlPoints.length - 1;
+        }
+        return Image.controlPoints[index];
+    };
+    Image.prototype.makeResultUrl = function (optimalSize) {
+        var sourceUrl = new URL(this.sourceUrl, Image.imgOrigin);
+        var url = new URL("/optimizer/optimize", location.origin);
+        url.searchParams.set("src", sourceUrl.toString());
+        url.searchParams.set("size", String(optimalSize));
+        if (typeof this.props.quality === "number") {
+            url.searchParams.set("quality", String(this.props.quality));
+        }
+        var format = this.extractImageFormat(sourceUrl.pathname);
+        url.searchParams.set("format", format);
+        return url;
+    };
+    Image.prototype.extractImageFormat = function (path) {
+        var format = "";
+        var match = this.extensionsRegexp.exec(path);
+        if (Image.isAvif === true) {
+            format = "avif";
+        }
+        else if (Image.isWebP === true) {
+            format = "webp";
+        }
+        else {
+            format = String(match === null || match === void 0 ? void 0 : match[0])
+                .replace(".", "")
+                .replace("jpg", "jpeg");
+        }
+        return format;
+    };
+    Image.prototype.applyResultUrl = function (url) {
+        var resultUrl = url.toString();
+        if (this.resultUrl !== resultUrl && this.thisComponent) {
+            this.resultUrl = resultUrl;
+            this.thisComponent.src = this.resultUrl;
+        }
+    };
+    /**
+     * This function should motivate the developer to make a layout that does not cause resizing.
+     *
+     * @param {boolean} isResize
+     * @param {number} optimalSize
+     */
+    Image.prototype.showWarningOnResize = function (isResize, optimalSize) {
+        if (!isResize &&
+            this.lastOptimalSize >= 0 &&
+            this.lastOptimalSize !== optimalSize) {
+            // eslint-disable-next-line no-console
+            console.warn("New image size", this.lastOptimalSize, optimalSize, this.sourceUrl);
+        }
+        this.lastOptimalSize = optimalSize;
+    };
+    Image.prototype.showResultInLog = function (containerSize, optimalSize) {
+        if (process.env.NODE_ENV !== "production" && Image.isShowDiagnostic) {
+            // eslint-disable-next-line no-console
+            console.log([
+                "🏄 Image optimization:",
+                "Container size ".concat(containerSize, "px,"),
+                "optimal size ".concat(optimalSize, ","),
+                "image ".concat(this.sourceUrl)
+            ].join(" "));
+        }
+    };
+    Image.prototype.initImageFormats = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var format;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (0, get_format_features_1.getFormatFeatures)()];
+                    case 1:
+                        format = _a.sent();
+                        if (Image.isAvif === null || Image.isWebP === null) {
+                            Image.isAvif = format === "avif";
+                            Image.isWebP = format === "webp";
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     Image.isShowDiagnostic = false;
+    Image.controlPoints = [160, 320, 640, 1280, 1920];
     Image.isAvif = null;
     Image.isWebP = null;
     /**
      * Change for local development.
      *
      * The server microservice will not be able to make a request to your localhost.
-     * Therefore, when developing locally, you must specify a product or development server.
+     * Therefore, when developing locally, you must specify a production or development server origin.
+     *
+     * Example:
+     * https://tb.mts.ru
      *
      */
-    Image.domain = location.origin;
+    Image.imgOrigin = location.origin;
     return Image;
 }(react_1.default.Component));
 exports.Image = Image;

package/dist/es5/components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image.tsx"],"names":[],"mappings":"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"}

package/dist/es5/helpers/check-webp-feature.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkWebpFeature = void 0;
+var kTestImages = {
+    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
+    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
+    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
+    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////" +
+        "AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
+};
 var checkWebpFeature = function () { return new Promise(function (resolve) {
-    var kTestImages = {
-        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
-        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
-        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
-        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////" +
-            "AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
-    };
     var img = new Image();
     img.onload = function () {
         var result = (img.width > 0) && (img.height > 0);

package/dist/es5/helpers/check-webp-feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"check-webp-feature.js","sourceRoot":"","sources":["../../../src/helpers/check-webp-feature.ts"],"names":[],"mappings":";;;AACO,IAAM,gBAAgB,GAAG,cAAwB,OAAA,IAAI,OAAO,CAAU,UAAC,OAAkC;IAC5G,IAAM,WAAW,GAAG;QAChB,KAAK,EAAE,0DAA0D;QACjE,QAAQ,EAAE,kDAAkD;QAC5D,KAAK,EAAE,kHAAkH;QACzH,SAAS,EAAE,0DAA0D;YACjE,kEAAkE;KACzE,CAAC;IACF,IAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;IACxB,GAAG,CAAC,MAAM,GAAG;QACT,IAAM,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,GAAG,CAAC,OAAO,GAAG;QACV,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,GAAG,CAAC,GAAG,GAAG,iCAA0B,WAAW,CAAC,QAAQ,CAAE,CAAC;AAC/D,CAAC,CAAC,EAjBsD,CAiBtD,CAAC;AAjBU,QAAA,gBAAgB,oBAiB1B"}
+{"version":3,"file":"check-webp-feature.js","sourceRoot":"","sources":["../../../src/helpers/check-webp-feature.ts"],"names":[],"mappings":";;;AAAA,IAAM,WAAW,GAAG;IAChB,KAAK,EAAE,0DAA0D;IACjE,QAAQ,EAAE,kDAAkD;IAC5D,KAAK,EAAE,kHAAkH;IACzH,SAAS,EAAE,0DAA0D;QACjE,kEAAkE;CACzE,CAAC;AAEK,IAAM,gBAAgB,GAAG,cAAwB,OAAA,IAAI,OAAO,CAAU,UAAC,OAAkC;IAC5G,IAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;IACxB,GAAG,CAAC,MAAM,GAAG;QACT,IAAM,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,GAAG,CAAC,OAAO,GAAG;QACV,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,GAAG,CAAC,GAAG,GAAG,iCAA0B,WAAW,CAAC,QAAQ,CAAE,CAAC;AAC/D,CAAC,CAAC,EAVsD,CAUtD,CAAC;AAVU,QAAA,gBAAgB,oBAU1B"}

package/dist/es5/helpers/get-format-features.d.ts

@@ -0,0 +1,3 @@
+declare type FormatType = "avif" | "webp" | null;
+export declare const getFormatFeatures: () => Promise<FormatType>;
+export {};

package/dist/es5/helpers/get-format-features.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFormatFeatures = void 0;
+var tslib_1 = require("tslib");
+var check_avif_feature_1 = require("./check-avif-feature");
+var check_webp_feature_1 = require("./check-webp-feature");
+var promisesPool = [];
+var resolvePromises = function (format) {
+    promisesPool.forEach(function (resolve) { return resolve(format); });
+};
+var checkFormats = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var isAvif, isWebp;
+    return tslib_1.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, (0, check_avif_feature_1.checkAvifFeature)()];
+            case 1:
+                isAvif = _a.sent();
+                if (isAvif) {
+                    resolvePromises("avif");
+                    return [2 /*return*/];
+                }
+                return [4 /*yield*/, (0, check_webp_feature_1.checkWebpFeature)()];
+            case 2:
+                isWebp = _a.sent();
+                if (isWebp) {
+                    resolvePromises("webp");
+                    return [2 /*return*/];
+                }
+                resolvePromises(null);
+                return [2 /*return*/];
+        }
+    });
+}); };
+var getFormatFeatures = function () {
+    if (promisesPool.length === 0) {
+        checkFormats();
+    }
+    return new Promise(function (resolve) {
+        promisesPool.push(resolve);
+    });
+};
+exports.getFormatFeatures = getFormatFeatures;
+//# sourceMappingURL=get-format-features.js.map

package/dist/es5/helpers/get-format-features.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-format-features.js","sourceRoot":"","sources":["../../../src/helpers/get-format-features.ts"],"names":[],"mappings":";;;;AACA,2DAAsD;AACtD,2DAAsD;AAKtD,IAAM,YAAY,GAAoC,EAAE,CAAC;AAEzD,IAAM,eAAe,GAAG,UAAC,MAAkB;IACvC,YAAY,CAAC,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,MAAM,CAAC,EAAf,CAAe,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG;;;;oBACF,qBAAM,IAAA,qCAAgB,GAAE,EAAA;;gBAAjC,MAAM,GAAG,SAAwB;gBACvC,IAAI,MAAM,EAAE;oBACR,eAAe,CAAC,MAAM,CAAC,CAAC;oBACxB,sBAAO;iBACV;gBAEc,qBAAM,IAAA,qCAAgB,GAAE,EAAA;;gBAAjC,MAAM,GAAG,SAAwB;gBACvC,IAAI,MAAM,EAAE;oBACR,eAAe,CAAC,MAAM,CAAC,CAAC;oBACxB,sBAAO;iBACV;gBAED,eAAe,CAAC,IAAI,CAAC,CAAC;;;;KACzB,CAAC;AAEK,IAAM,iBAAiB,GAAG;IAC7B,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3B,YAAY,EAAE,CAAC;KAClB;IAED,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO;QACvB,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AARW,QAAA,iBAAiB,qBAQ5B"}

package/dist/es5/index.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 // Components
-(0, tslib_1.__exportStar)(require("./components/Image"), exports);
+tslib_1.__exportStar(require("./components/Image"), exports);
 // Helpers
-(0, tslib_1.__exportStar)(require("./helpers/check-avif-feature"), exports);
-(0, tslib_1.__exportStar)(require("./helpers/check-webp-feature"), exports);
+tslib_1.__exportStar(require("./helpers/check-avif-feature"), exports);
+tslib_1.__exportStar(require("./helpers/check-webp-feature"), exports);
 //# sourceMappingURL=index.js.map

package/dist/es5/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,aAAa;AACb,kEAAmC;AAEnC,UAAU;AACV,4EAA6C;AAC7C,4EAA6C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,aAAa;AACb,6DAAmC;AAEnC,UAAU;AACV,uEAA6C;AAC7C,uEAA6C"}

package/dist/esnext/components/Image.d.ts

@@ -9,30 +9,52 @@ export interface IImageOptions {
 }
 export declare class Image<P extends IImageOptions> extends React.Component<P> {
     static isShowDiagnostic: boolean;
-    static isAvif: boolean | null;
-    static isWebP: boolean | null;
+    static controlPoints: number[];
+    private static isAvif;
+    private static isWebP;
     /**
      * Change for local development.
      *
      * The server microservice will not be able to make a request to your localhost.
-     * Therefore, when developing locally, you must specify a product or development server.
+     * Therefore, when developing locally, you must specify a production or development server origin.
+     *
+     * Example:
+     * https://tb.mts.ru
      *
      */
-    static domain: string;
+    static imgOrigin: string;
     resultUrl: string;
     resizeCheckTimeout: number;
     thisComponent: HTMLImageElement | null;
-    private sourceUrl;
-    private readonly extensionsRegexp;
-    private readonly controlPoints;
-    private readonly windowResizeHandler;
-    private lastOptimalSize;
-    private checks;
+    protected sourceUrl: string;
+    protected readonly extensionsRegexp: RegExp;
+    protected readonly windowResizeHandler: EventListenerOrEventListenerObject;
+    protected lastOptimalSize: number;
+    /**
+     * Serves to prevent recursion when resizing images to determine the optimal size.
+     * This recursion can be caught with poor layout that does not take into account the scaling of images.
+     */
+    protected checks: number;
     constructor(props: P);
     componentDidMount(): void;
     shouldComponentUpdate(props: P): boolean;
     componentWillUnmount(): void;
     render(): JSX.Element;
-    private checkImage;
-    private onWindowResize;
+    protected checkImage(isResize?: boolean): Promise<void>;
+    protected processImage(isResize: boolean): void;
+    protected onWindowResize(): void;
+    protected getContainerSize(): number;
+    protected getOptimalSize(containerSize: number): number;
+    protected makeResultUrl(optimalSize: number): URL;
+    protected extractImageFormat(path: string): string;
+    protected applyResultUrl(url: URL): void;
+    /**
+     * This function should motivate the developer to make a layout that does not cause resizing.
+     *
+     * @param {boolean} isResize
+     * @param {number} optimalSize
+     */
+    protected showWarningOnResize(isResize: boolean, optimalSize: number): void;
+    protected showResultInLog(containerSize: number, optimalSize: number): void;
+    protected initImageFormats(): Promise<void>;
 }

package/dist/esnext/components/Image.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { checkAvifFeature } from "../helpers/check-avif-feature";
-import { checkWebpFeature } from "../helpers/check-webp-feature";
+import { getFormatFeatures } from "../helpers/get-format-features";
 export class Image extends React.Component {
     constructor(props) {
         super(props);
         this.resultUrl = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
         this.resizeCheckTimeout = 0;
+        this.thisComponent = null;
         this.sourceUrl = "";
         this.extensionsRegexp = /\.\w+$/u;
-        this.controlPoints = [160, 320, 640, 1280, 1920];
-        this.lastOptimalSize = -1;
+        this.lastOptimalSize = 0;
+        /**
+         * Serves to prevent recursion when resizing images to determine the optimal size.
+         * This recursion can be caught with poor layout that does not take into account the scaling of images.
+         */
         this.checks = 0;
         this.windowResizeHandler = () => this.onWindowResize();
     }
@@ -22,6 +25,7 @@ export class Image extends React.Component {
         if (this.sourceUrl !== props.src) {
             this.sourceUrl = props.src;
             this.checks = 0;
+            // Raf for correct image position after redraw outer components
             requestAnimationFrame(() => this.checkImage());
             return true;
         }
@@ -34,72 +38,79 @@ export class Image extends React.Component {
         return (_jsx("img", { alt: this.props.alt, className: this.props.className, onLoad: () => requestAnimationFrame(() => this.checkImage()), ref: (elem) => {
                 this.thisComponent = elem;
                 this.props.setRef?.(elem);
-            }, src: this.resultUrl }, void 0));
+            }, src: this.resultUrl }));
     }
-    // eslint-disable-next-line max-statements, complexity, max-lines-per-function
     async checkImage(isResize = false) {
-        if (!this.thisComponent) {
-            return;
-        }
         if (this.checks > 1) {
             return;
         }
-        if (Image.isAvif === null) {
-            const result = await checkAvifFeature();
-            // !!! Eslint alert it's true, upgrade algorithm later
-            // eslint-disable-next-line require-atomic-updates
-            Image.isAvif = result;
-            this.checkImage();
-            return;
+        this.checks += 1;
+        if (Image.isAvif === null || Image.isWebP === null) {
+            await this.initImageFormats();
         }
-        if (!Image.isAvif && Image.isWebP === null) {
-            const result = await checkWebpFeature();
-            // eslint-disable-next-line require-atomic-updates
-            Image.isWebP = result;
-            this.checkImage();
-            return;
+        this.processImage(isResize);
+    }
+    processImage(isResize) {
+        const containerSize = this.getContainerSize();
+        const optimalSize = this.getOptimalSize(containerSize);
+        this.showWarningOnResize(isResize, optimalSize);
+        const url = this.makeResultUrl(optimalSize);
+        this.applyResultUrl(url);
+        this.showResultInLog(containerSize, optimalSize);
+    }
+    onWindowResize() {
+        if (this.resizeCheckTimeout) {
+            clearTimeout(this.resizeCheckTimeout);
         }
-        // Checks +1 after check webp support
-        this.checks += 1;
-        // Find optimal size
+        this.resizeCheckTimeout = window.setTimeout(() => {
+            this.checks = 0;
+            this.checkImage(true);
+        }, 500);
+    }
+    getContainerSize() {
         let containerSize = 0;
         let element = this.thisComponent;
-        while (containerSize < 2 && Boolean(element)) {
+        while (containerSize < 2 && element) {
             containerSize = element.getBoundingClientRect().width ||
                 Number.parseFloat(getComputedStyle(element).width) || 0;
-            // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
             element = element.parentElement;
         }
-        containerSize *= window.devicePixelRatio;
-        let indexOptimalSize = this.controlPoints
+        return containerSize * window.devicePixelRatio;
+    }
+    getOptimalSize(containerSize) {
+        let index = Image.controlPoints
             .findIndex((width) => containerSize <= width);
-        if (indexOptimalSize < 0) { // If bigger then maximum size or NaN
-            indexOptimalSize = this.controlPoints.length - 1;
+        // If bigger then maximum size or NaN
+        if (index < 0) {
+            index = Image.controlPoints.length - 1;
         }
-        indexOptimalSize += this.props.offset ?? 0;
-        if (indexOptimalSize < 0) {
-            indexOptimalSize = 0;
+        // Make manual more or less size
+        index += this.props.offset ?? 0;
+        // If offset make out of boundary
+        if (index < 0) {
+            index = 0;
         }
-        else if (indexOptimalSize >= this.controlPoints.length) {
-            indexOptimalSize = this.controlPoints.length - 1;
-        }
-        if (!isResize && this.lastOptimalSize >= 0 && this.lastOptimalSize !== indexOptimalSize) {
-            // eslint-disable-next-line no-console
-            console.warn("New image size", this.controlPoints[this.lastOptimalSize], this.controlPoints[indexOptimalSize], this.sourceUrl);
+        else if (index >= Image.controlPoints.length) {
+            index = Image.controlPoints.length - 1;
         }
-        this.lastOptimalSize = indexOptimalSize;
-        // Make correct source url
-        const sourceUrl = new URL(this.sourceUrl, Image.domain);
-        // Make result url
+        return Image.controlPoints[index];
+    }
+    makeResultUrl(optimalSize) {
+        const sourceUrl = new URL(this.sourceUrl, Image.imgOrigin);
         const url = new URL("/optimizer/optimize", location.origin);
         url.searchParams.set("src", sourceUrl.toString());
-        url.searchParams.set("size", String(this.controlPoints[indexOptimalSize]));
+        url.searchParams.set("size", String(optimalSize));
         if (typeof this.props.quality === "number") {
             url.searchParams.set("quality", String(this.props.quality));
         }
-        const match = this.extensionsRegexp.exec(sourceUrl.pathname);
+        const format = this.extractImageFormat(sourceUrl.pathname);
+        url.searchParams.set("format", format);
+        return url;
+    }
+    extractImageFormat(path) {
         let format = "";
-        if (Image.isAvif) {
+        const match = this.extensionsRegexp.exec(path);
+        if (Image.isAvif === true) {
             format = "avif";
         }
         else if (Image.isWebP === true) {
@@ -110,42 +121,62 @@ export class Image extends React.Component {
                 .replace(".", "")
                 .replace("jpg", "jpeg");
         }
-        url.searchParams.set("format", format);
-        // Apply result url
+        return format;
+    }
+    applyResultUrl(url) {
         const resultUrl = url.toString();
-        if (this.resultUrl !== resultUrl) {
+        if (this.resultUrl !== resultUrl && this.thisComponent) {
             this.resultUrl = resultUrl;
             this.thisComponent.src = this.resultUrl;
-            if (process.env.NODE_ENV !== "production" && Image.isShowDiagnostic) {
-                // eslint-disable-next-line no-console
-                console.log([
-                    "🏄 Image optimization:",
-                    `Container size ${containerSize}px,`,
-                    `optimal size ${this.controlPoints[indexOptimalSize]},`,
-                    `image ${this.sourceUrl}`
-                ].join(" "));
-            }
         }
     }
-    onWindowResize() {
-        if (this.resizeCheckTimeout) {
-            clearTimeout(this.resizeCheckTimeout);
+    /**
+     * This function should motivate the developer to make a layout that does not cause resizing.
+     *
+     * @param {boolean} isResize
+     * @param {number} optimalSize
+     */
+    showWarningOnResize(isResize, optimalSize) {
+        if (!isResize &&
+            this.lastOptimalSize >= 0 &&
+            this.lastOptimalSize !== optimalSize) {
+            // eslint-disable-next-line no-console
+            console.warn("New image size", this.lastOptimalSize, optimalSize, this.sourceUrl);
+        }
+        this.lastOptimalSize = optimalSize;
+    }
+    showResultInLog(containerSize, optimalSize) {
+        if (process.env.NODE_ENV !== "production" && Image.isShowDiagnostic) {
+            // eslint-disable-next-line no-console
+            console.log([
+                "🏄 Image optimization:",
+                `Container size ${containerSize}px,`,
+                `optimal size ${optimalSize},`,
+                `image ${this.sourceUrl}`
+            ].join(" "));
+        }
+    }
+    async initImageFormats() {
+        const format = await getFormatFeatures();
+        if (Image.isAvif === null || Image.isWebP === null) {
+            Image.isAvif = format === "avif";
+            Image.isWebP = format === "webp";
         }
-        this.resizeCheckTimeout = window.setTimeout(() => {
-            this.checks = 0;
-            this.checkImage(true);
-        }, 500);
     }
 }
 Image.isShowDiagnostic = false;
+Image.controlPoints = [160, 320, 640, 1280, 1920];
 Image.isAvif = null;
 Image.isWebP = null;
 /**
  * Change for local development.
  *
  * The server microservice will not be able to make a request to your localhost.
- * Therefore, when developing locally, you must specify a product or development server.
+ * Therefore, when developing locally, you must specify a production or development server origin.
+ *
+ * Example:
+ * https://tb.mts.ru
  *
  */
-Image.domain = location.origin;
+Image.imgOrigin = location.origin;
 //# sourceMappingURL=Image.js.map

package/dist/esnext/components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/helpers/check-webp-feature.js

@@ -1,11 +1,11 @@
+const kTestImages = {
+    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
+    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
+    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
+    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////" +
+        "AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
+};
 export const checkWebpFeature = () => new Promise((resolve) => {
-    const kTestImages = {
-        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
-        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
-        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
-        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////" +
-            "AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
-    };
     const img = new Image();
     img.onload = () => {
         const result = (img.width > 0) && (img.height > 0);

package/dist/esnext/helpers/check-webp-feature.js.map

@@ -1 +1 @@
-{"version":3,"file":"check-webp-feature.js","sourceRoot":"","sources":["../../../src/helpers/check-webp-feature.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAqB,EAAE,CAAC,IAAI,OAAO,CAAU,CAAC,OAAkC,EAAE,EAAE;IAChH,MAAM,WAAW,GAAG;QAChB,KAAK,EAAE,0DAA0D;QACjE,QAAQ,EAAE,kDAAkD;QAC5D,KAAK,EAAE,kHAAkH;QACzH,SAAS,EAAE,0DAA0D;YACjE,kEAAkE;KACzE,CAAC;IACF,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;IACxB,GAAG,CAAC,MAAM,GAAG,GAAS,EAAE;QACpB,MAAM,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,GAAG,CAAC,OAAO,GAAG,GAAS,EAAE;QACrB,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,GAAG,CAAC,GAAG,GAAG,0BAA0B,WAAW,CAAC,QAAQ,EAAE,CAAC;AAC/D,CAAC,CAAC,CAAC"}
+{"version":3,"file":"check-webp-feature.js","sourceRoot":"","sources":["../../../src/helpers/check-webp-feature.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG;IAChB,KAAK,EAAE,0DAA0D;IACjE,QAAQ,EAAE,kDAAkD;IAC5D,KAAK,EAAE,kHAAkH;IACzH,SAAS,EAAE,0DAA0D;QACjE,kEAAkE;CACzE,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAqB,EAAE,CAAC,IAAI,OAAO,CAAU,CAAC,OAAkC,EAAE,EAAE;IAChH,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;IACxB,GAAG,CAAC,MAAM,GAAG,GAAS,EAAE;QACpB,MAAM,MAAM,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,CAAC;IACF,GAAG,CAAC,OAAO,GAAG,GAAS,EAAE;QACrB,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,GAAG,CAAC,GAAG,GAAG,0BAA0B,WAAW,CAAC,QAAQ,EAAE,CAAC;AAC/D,CAAC,CAAC,CAAC"}

package/dist/esnext/helpers/get-format-features.d.ts

@@ -0,0 +1,3 @@
+declare type FormatType = "avif" | "webp" | null;
+export declare const getFormatFeatures: () => Promise<FormatType>;
+export {};

package/dist/esnext/helpers/get-format-features.js

@@ -0,0 +1,28 @@
+import { checkAvifFeature } from "./check-avif-feature";
+import { checkWebpFeature } from "./check-webp-feature";
+const promisesPool = [];
+const resolvePromises = (format) => {
+    promisesPool.forEach((resolve) => resolve(format));
+};
+const checkFormats = async () => {
+    const isAvif = await checkAvifFeature();
+    if (isAvif) {
+        resolvePromises("avif");
+        return;
+    }
+    const isWebp = await checkWebpFeature();
+    if (isWebp) {
+        resolvePromises("webp");
+        return;
+    }
+    resolvePromises(null);
+};
+export const getFormatFeatures = () => {
+    if (promisesPool.length === 0) {
+        checkFormats();
+    }
+    return new Promise((resolve) => {
+        promisesPool.push(resolve);
+    });
+};
+//# sourceMappingURL=get-format-features.js.map

package/dist/esnext/helpers/get-format-features.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-format-features.js","sourceRoot":"","sources":["../../../src/helpers/get-format-features.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAKtD,MAAM,YAAY,GAAoC,EAAE,CAAC;AAEzD,MAAM,eAAe,GAAG,CAAC,MAAkB,EAAQ,EAAE;IACjD,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,KAAK,IAAmB,EAAE;IAC3C,MAAM,MAAM,GAAG,MAAM,gBAAgB,EAAE,CAAC;IACxC,IAAI,MAAM,EAAE;QACR,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,OAAO;KACV;IAED,MAAM,MAAM,GAAG,MAAM,gBAAgB,EAAE,CAAC;IACxC,IAAI,MAAM,EAAE;QACR,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,OAAO;KACV;IAED,eAAe,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAwB,EAAE;IACvD,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3B,YAAY,EAAE,CAAC;KAClB;IAED,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC3B,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;AACP,CAAC,CAAC"}

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@mts-pjsc/image-optimize",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "React component for image optimizer",
   "main": "dist/es5/index.js",
   "module": "dist/esnext/index.js",
   "esnext": "dist/esnext/index.js",
   "scripts": {
     "eslint": "eslint --fix -c .eslintrc.js --ext .tsx,.ts,.jsx,.js ./src/",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "echo \"Error: no test specified. For test need deployed microservice part\" && exit 1",
     "build:esnext": "tsc --project tsconfig.json",
     "build:commonjs": "tsc --project tsconfig.es5.json",
-    "build": "rm -rf dist/ && npm run build:esnext && npm run build:commonjs"
+    "build": "rm -rf dist/ && npm run build:esnext && npm run build:commonjs",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
@@ -31,16 +32,15 @@
     "url": "https://github.com/MobileTeleSystems/image-optimize-react/issues"
   },
   "homepage": "https://github.com/MobileTeleSystems/image-optimize-react#readme",
-  "dependencies": {
-    "react": "^17.0.2",
-    "renamer": "^4.0.0"
+  "peerDependencies": {
+    "react": ">=16.0.0"
   },
   "devDependencies": {
-    "@labeg/code-style": "^2.0.27",
-    "@types/node": "^16.11.12",
-    "@types/react": "^17.0.37",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.1.2",
-    "typescript": "^4.5.4"
+    "@labeg/code-style": "^2.0.42",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "typescript": "^4.7.4"
   }
 }