@mts-pjsc/image-optimize 1.1.0 → 1.1.3

package/dist/components/Image.d.ts

@@ -10,19 +10,31 @@ export interface IImageOptions {
 export declare class Image<P extends IImageOptions> extends React.Component<P> {
     static isShowDiagnostic: boolean;
     static controlPoints: number[];
-    private static isAvif;
-    private static isWebP;
     /**
-     * Change for local development.
+     * Image optimizer will take source url for show image.
+     *
+     * This is required when working on localhost.
+     * Because a remote microservice cannot make requests to your localhost.
+     *
+     * Example:
+     * Image.isUseSourceUrl = process.env.NODE_ENV !== "production";
+     */
+    static isUseSourceUrl: boolean;
+    /**
+     * Image optimizer will change origin to other domain.
+     *
+     * This is necessary when you developing locally, this will take pictures from the DEV server by CORS.
      *
-     * The server microservice will not be able to make a request to your localhost.
-     * Therefore, when developing locally, you must specify a production or development server origin.
+     * Also, this parameter must be specified if the component works in the microfront.
+     * Then you need to specify the address to the server with pictures.
      *
      * Example:
-     * https://tb.mts.ru
+     * Image.imgOrigin = https://tb.mts.ru
      *
      */
-    static imgOrigin: string;
+    static imgOrigin?: string;
+    private static isAvif;
+    private static isWebP;
     resultUrl: string;
     resizeCheckTimeout: number;
     thisComponent: HTMLImageElement | null;

package/dist/components/Image.js

@@ -42,6 +42,10 @@ export class Image extends React.Component {
             }, src: this.resultUrl }));
     }
     async checkImage(isResize = false) {
+        if (Image.isUseSourceUrl && this.thisComponent) {
+            this.thisComponent.src = this.resultUrl;
+            return;
+        }
         if (this.checks > 1) {
             return;
         }
@@ -98,7 +102,8 @@ export class Image extends React.Component {
         return Image.controlPoints[index];
     }
     makeResultUrl(optimalSize) {
-        const sourceUrl = new URL(this.sourceUrl, Image.imgOrigin);
+        var _a;
+        const sourceUrl = new URL(this.sourceUrl, (_a = Image.imgOrigin) !== null && _a !== void 0 ? _a : location.origin);
         const url = new URL("/optimizer/optimize", location.origin);
         url.searchParams.set("src", sourceUrl.toString());
         url.searchParams.set("size", String(optimalSize));
@@ -168,17 +173,28 @@ export class Image extends React.Component {
 }
 Image.isShowDiagnostic = false;
 Image.controlPoints = [160, 320, 640, 1280, 1920];
-Image.isAvif = null;
-Image.isWebP = null;
 /**
- * Change for local development.
+ * Image optimizer will take source url for show image.
+ *
+ * This is required when working on localhost.
+ * Because a remote microservice cannot make requests to your localhost.
+ *
+ * Example:
+ * Image.isUseSourceUrl = process.env.NODE_ENV !== "production";
+ */
+Image.isUseSourceUrl = false;
+/**
+ * Image optimizer will change origin to other domain.
  *
- * The server microservice will not be able to make a request to your localhost.
- * Therefore, when developing locally, you must specify a production or development server origin.
+ * This is necessary when you developing locally, this will take pictures from the DEV server by CORS.
+ *
+ * Also, this parameter must be specified if the component works in the microfront.
+ * Then you need to specify the address to the server with pictures.
  *
  * Example:
- * https://tb.mts.ru
+ * Image.imgOrigin = https://tb.mts.ru
  *
  */
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, no-constant-binary-expression
-Image.imgOrigin = typeof process === void 0 ? location.origin : "";
+Image.imgOrigin = void 0;
+Image.isAvif = null;
+Image.isWebP = null;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@mts-pjsc/image-optimize",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "React component for image optimizer",
-  "main": "dist/es5/index.js",
-  "module": "dist/esnext/index.js",
-  "esnext": "dist/esnext/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "esnext": "dist/index.js",
   "type": "module",
   "scripts": {
     "eslint": "eslint --fix -c .eslintrc.cjs --ext .tsx,.ts,.jsx,.js ./src/",