@uxf/resizer 11.40.1 → 11.41.2

package/README.md

@@ -7,6 +7,14 @@
 yarn add @uxf/resizer --dev
 ```
 
+```shell
+# .env.local
+NEXT_PUBLIC_FRONTEND_URL=http://127.0.0.1:3000
+NEXT_PUBLIC_API_URL=https://uxf.cz
+```
+
+Folder structure
+
 ```shell
 src/
     app/

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/resizer",
-    "version": "11.40.1",
+    "version": "11.41.2",
     "main": "index.js",
     "description": "UXF Resizer",
     "author": "UXFans <dev@uxf.cz>",

package/src/middleware.js

@@ -22,17 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resizerMiddleware = void 0;
 const express_1 = require("express");
 const fs = __importStar(require("fs"));
 const fs_1 = require("fs");
 const path_1 = require("path");
-const sharp_1 = __importDefault(require("sharp"));
 const get_source_filename_1 = require("./utils/get-source-filename");
+const image_converter_1 = require("./utils/image-converter");
 const log_1 = require("./utils/log");
 const tools_1 = require("./utils/tools");
 const resizerMiddleware = (config) => {
@@ -63,49 +60,17 @@ const resizerMiddleware = (config) => {
                 fs.writeFileSync(generatedFilename, sourceFile instanceof ArrayBuffer ? Buffer.from(sourceFile) : sourceFile);
                 return res.sendFile(generatedFilename);
             }
-            const pipeline = (0, sharp_1.default)(sourceFile)
-                .rotate()
-                .resize({
-                width: (0, tools_1.getWidth)(params),
-                height: (0, tools_1.getHeight)(params),
-                background: (0, tools_1.getBackground)(params),
-                fastShrinkOnLoad: false,
-                fit: (0, tools_1.getFit)(params),
-                position: (0, tools_1.getPosition)(params),
-                withoutEnlargement: (0, tools_1.getWithoutEnlargement)(params),
-            });
-            const trim = (0, tools_1.getTrim)(params);
-            if (trim !== undefined) {
-                pipeline.trim({
-                    threshold: trim,
+            (0, image_converter_1.convertImage)(sourceFile, generatedFilename, params)
+                .then(() => {
+                var _a;
+                return res.sendFile(generatedFilename, {
+                    headers: {
+                        "Content-Type": (_a = tools_1.CONTENT_TYPES[params.toFormat]) !== null && _a !== void 0 ? _a : "image/jpeg",
+                    },
                 });
-            }
-            const quality = (0, tools_1.getQuality)(params);
-            switch (params.toFormat) {
-                case "webp":
-                    pipeline.webp({ quality });
-                    res.setHeader("Content-Type", "image/webp");
-                    break;
-                case "png":
-                    pipeline.png({ progressive: true, quality });
-                    res.setHeader("Content-Type", "image/png");
-                    break;
-                case "avif":
-                    pipeline.avif({ quality });
-                    res.setHeader("Content-Type", "image/avif");
-                    break;
-                default:
-                    pipeline.jpeg({ progressive: true, quality });
-                    res.setHeader("Content-Type", "image/jpeg");
-                    break;
-            }
-            pipeline
-                .withMetadata({ density: 72 })
-                .toColorspace("srgb")
-                .toFile(generatedFilename)
-                .then(() => res.sendFile(generatedFilename))
+            })
                 .catch((e) => {
-                (0, log_1.log)(e);
+                (0, log_1.log)(e, "error");
                 return res.sendStatus(404);
             });
         });

package/src/middleware.ts

@@ -2,19 +2,10 @@ import { Router } from "express";
 import * as fs from "fs";
 import { existsSync, mkdirSync } from "fs";
 import { dirname } from "path";
-import sharp from "sharp";
 import { getSourceFilename } from "./utils/get-source-filename";
+import { convertImage } from "./utils/image-converter";
 import { log } from "./utils/log";
-import {
-    getBackground,
-    getFit,
-    getHeight,
-    getPosition,
-    getQuality,
-    getTrim,
-    getWidth,
-    getWithoutEnlargement,
-} from "./utils/tools";
+import { CONTENT_TYPES, Params } from "./utils/tools";
 
 export type Config = Array<{
     route: string;
@@ -31,7 +22,7 @@ export const resizerMiddleware = (config: Config) => {
 
         middleware.get(c.route, async (req, res) => {
             log("----------------------------------------");
-            const params = req.params;
+            const params = req.params as unknown as Params;
 
             const generatedFilename = (process.env.UXF_RESIZER_GENERATE_PATH ?? process.cwd()) + req.path;
             log(`Generated filename: ${generatedFilename}`);
@@ -60,53 +51,16 @@ export const resizerMiddleware = (config: Config) => {
                 return res.sendFile(generatedFilename);
             }
 
-            const pipeline = sharp(sourceFile)
-                .rotate()
-                .resize({
-                    width: getWidth(params),
-                    height: getHeight(params),
-                    background: getBackground(params),
-                    fastShrinkOnLoad: false,
-                    fit: getFit(params),
-                    position: getPosition(params),
-                    withoutEnlargement: getWithoutEnlargement(params),
-                });
-
-            const trim = getTrim(params);
-            if (trim !== undefined) {
-                pipeline.trim({
-                    threshold: trim,
-                });
-            }
-
-            const quality = getQuality(params);
-
-            switch (params.toFormat) {
-                case "webp":
-                    pipeline.webp({ quality });
-                    res.setHeader("Content-Type", "image/webp");
-                    break;
-                case "png":
-                    pipeline.png({ progressive: true, quality });
-                    res.setHeader("Content-Type", "image/png");
-                    break;
-                case "avif":
-                    pipeline.avif({ quality });
-                    res.setHeader("Content-Type", "image/avif");
-                    break;
-                default:
-                    pipeline.jpeg({ progressive: true, quality });
-                    res.setHeader("Content-Type", "image/jpeg");
-                    break;
-            }
-
-            pipeline
-                .withMetadata({ density: 72 })
-                .toColorspace("srgb")
-                .toFile(generatedFilename)
-                .then(() => res.sendFile(generatedFilename))
+            convertImage(sourceFile, generatedFilename, params)
+                .then(() =>
+                    res.sendFile(generatedFilename, {
+                        headers: {
+                            "Content-Type": CONTENT_TYPES[params.toFormat] ?? "image/jpeg",
+                        },
+                    }),
+                )
                 .catch((e) => {
-                    log(e);
+                    log(e, "error");
                     return res.sendStatus(404);
                 });
         });

package/src/next-route.js

@@ -22,15 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StaticGET = StaticGET;
 exports.ProxyGET = ProxyGET;
 const fs_1 = __importStar(require("fs"));
 const path_1 = require("path");
-const sharp_1 = __importDefault(require("sharp"));
+const image_converter_1 = require("./utils/image-converter");
 const log_1 = require("./utils/log");
 const tools_1 = require("./utils/tools");
 const sendFile = (generatedFilename, contentType) => {
@@ -51,10 +48,6 @@ async function StaticGET(request) {
     if (params === undefined) {
         return Response.error();
     }
-    // import usage: _next/static/media/example-logo-resizer.941ec59a => example-logo-resizer
-    if (params.filename.startsWith("_next/static/media/")) {
-        params.filename = params.filename.replace("_next/static/media/", "").replace(/\.[^.]*$/, "");
-    }
     const generatedFilename = process.cwd() + path;
     (0, log_1.log)(`Generated filename: ${generatedFilename}`);
     const contentType = (_b = tools_1.CONTENT_TYPES[params.toFormat]) !== null && _b !== void 0 ? _b : "image/jpeg";
@@ -65,45 +58,17 @@ async function StaticGET(request) {
     if (!(0, fs_1.existsSync)(generatedDirectory)) {
         (0, fs_1.mkdirSync)(generatedDirectory, { recursive: true });
     }
-    const sourceFile = process.cwd() + `/public/${params.filename}.${params.extension}`;
-    (0, log_1.log)(`Source filename:    ${sourceFile}`);
+    const staticUrl = `${process.env.NEXT_PUBLIC_FRONTEND_URL}/${params.filename}.${params.extension}`;
+    // import usage: _next/static/media/example-logo-resizer.941ec59a => example-logo-resizer
+    const sourceFile = params.filename.startsWith("_next/static/media/")
+        ? await fetch(staticUrl).then((response) => response.arrayBuffer())
+        : process.cwd() + `/public/${params.filename}.${params.extension}`;
+    (0, log_1.log)(`Source filename:    ${sourceFile instanceof ArrayBuffer ? staticUrl : sourceFile}`);
     if (params.toFormat === "svg") {
-        fs_1.default.writeFileSync(generatedFilename, sourceFile);
+        fs_1.default.writeFileSync(generatedFilename, sourceFile instanceof ArrayBuffer ? Buffer.from(sourceFile) : sourceFile);
         return sendFile(generatedFilename, "image/svg+xml");
     }
-    const pipeline = (0, sharp_1.default)(sourceFile)
-        .rotate()
-        .resize({
-        width: (0, tools_1.getWidth)(params),
-        height: (0, tools_1.getHeight)(params),
-        background: (0, tools_1.getBackground)(params),
-        fastShrinkOnLoad: false,
-        fit: (0, tools_1.getFit)(params),
-        position: (0, tools_1.getPosition)(params),
-        withoutEnlargement: (0, tools_1.getWithoutEnlargement)(params),
-    });
-    const trim = (0, tools_1.getTrim)(params);
-    if (trim !== undefined) {
-        pipeline.trim({
-            threshold: trim,
-        });
-    }
-    const quality = (0, tools_1.getQuality)(params);
-    switch (params.toFormat) {
-        case "webp":
-            pipeline.webp({ quality });
-            break;
-        case "png":
-            pipeline.png({ progressive: true, quality });
-            break;
-        case "avif":
-            pipeline.avif({ quality });
-            break;
-        default:
-            pipeline.jpeg({ progressive: true, quality });
-            break;
-    }
-    await pipeline.withMetadata({ density: 72 }).toColorspace("srgb").toFile(generatedFilename);
+    await (0, image_converter_1.convertImage)(sourceFile, generatedFilename, params);
     return sendFile(generatedFilename, contentType);
 }
 // proxy na dev

package/src/next-route.ts

@@ -1,18 +1,8 @@
 import fs, { existsSync, mkdirSync } from "fs";
 import { dirname } from "path";
-import sharp from "sharp";
+import { convertImage } from "./utils/image-converter";
 import { log } from "./utils/log";
-import {
-    CONTENT_TYPES,
-    getBackground,
-    getFit,
-    getHeight,
-    getPosition,
-    getQuality,
-    getTrim,
-    getWidth,
-    getWithoutEnlargement,
-} from "./utils/tools";
+import { CONTENT_TYPES, Params } from "./utils/tools";
 
 const sendFile = (generatedFilename: string, contentType: string) => {
     const data = fs.readFileSync(generatedFilename);
@@ -31,16 +21,11 @@ export async function StaticGET(request: Request) {
     const regex =
         /^\/generated\/static\/(?<width>\d+|x)_(?<height>\d+|x)_(?<fit>[a-z]+)_(?<position>[a-z]+)_(?<background>[0-9a-f]+)_(?<trim>[a-z]+)_(?<quality>\d+|x)\/(?<version>[a-z0-9]+)\/(?<filename>.+)\.(?<extension>[a-z]+)\.(?<toFormat>[a-z]+)/i;
 
-    const params = path.match(regex)?.groups;
+    const params = path.match(regex)?.groups as Params | undefined;
     if (params === undefined) {
         return Response.error();
     }
 
-    // import usage: _next/static/media/example-logo-resizer.941ec59a => example-logo-resizer
-    if (params.filename.startsWith("_next/static/media/")) {
-        params.filename = params.filename.replace("_next/static/media/", "").replace(/\.[^.]*$/, "");
-    }
-
     const generatedFilename = process.cwd() + path;
     log(`Generated filename: ${generatedFilename}`);
 
@@ -55,51 +40,21 @@ export async function StaticGET(request: Request) {
         mkdirSync(generatedDirectory, { recursive: true });
     }
 
-    const sourceFile = process.cwd() + `/public/${params.filename}.${params.extension}`;
-    log(`Source filename:    ${sourceFile}`);
-
-    if (params.toFormat === "svg") {
-        fs.writeFileSync(generatedFilename, sourceFile);
-        return sendFile(generatedFilename, "image/svg+xml");
-    }
-
-    const pipeline = sharp(sourceFile)
-        .rotate()
-        .resize({
-            width: getWidth(params),
-            height: getHeight(params),
-            background: getBackground(params),
-            fastShrinkOnLoad: false,
-            fit: getFit(params),
-            position: getPosition(params),
-            withoutEnlargement: getWithoutEnlargement(params),
-        });
+    const staticUrl = `${process.env.NEXT_PUBLIC_FRONTEND_URL}/${params.filename}.${params.extension}`;
 
-    const trim = getTrim(params);
-    if (trim !== undefined) {
-        pipeline.trim({
-            threshold: trim,
-        });
-    }
+    // import usage: _next/static/media/example-logo-resizer.941ec59a => example-logo-resizer
+    const sourceFile = params.filename.startsWith("_next/static/media/")
+        ? await fetch(staticUrl).then((response) => response.arrayBuffer())
+        : process.cwd() + `/public/${params.filename}.${params.extension}`;
 
-    const quality = getQuality(params);
+    log(`Source filename:    ${sourceFile instanceof ArrayBuffer ? staticUrl : sourceFile}`);
 
-    switch (params.toFormat) {
-        case "webp":
-            pipeline.webp({ quality });
-            break;
-        case "png":
-            pipeline.png({ progressive: true, quality });
-            break;
-        case "avif":
-            pipeline.avif({ quality });
-            break;
-        default:
-            pipeline.jpeg({ progressive: true, quality });
-            break;
+    if (params.toFormat === "svg") {
+        fs.writeFileSync(generatedFilename, sourceFile instanceof ArrayBuffer ? Buffer.from(sourceFile) : sourceFile);
+        return sendFile(generatedFilename, "image/svg+xml");
     }
 
-    await pipeline.withMetadata({ density: 72 }).toColorspace("srgb").toFile(generatedFilename);
+    await convertImage(sourceFile, generatedFilename, params);
 
     return sendFile(generatedFilename, contentType);
 }

package/src/utils/image-converter.d.ts

@@ -0,0 +1,3 @@
+import { OutputInfo } from "sharp";
+import { Params } from "./tools";
+export declare function convertImage(sourceFile: string | ArrayBuffer, generatedFilename: string, params: Params): Promise<OutputInfo>;

package/src/utils/image-converter.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertImage = convertImage;
+const sharp_1 = __importDefault(require("sharp"));
+const tools_1 = require("./tools");
+function convertImage(sourceFile, generatedFilename, params) {
+    const pipeline = (0, sharp_1.default)(sourceFile)
+        .rotate()
+        .resize({
+        width: (0, tools_1.getWidth)(params),
+        height: (0, tools_1.getHeight)(params),
+        background: (0, tools_1.getBackground)(params),
+        fastShrinkOnLoad: false,
+        fit: (0, tools_1.getFit)(params),
+        position: (0, tools_1.getPosition)(params),
+        withoutEnlargement: (0, tools_1.getWithoutEnlargement)(params),
+    });
+    const trim = (0, tools_1.getTrim)(params);
+    if (trim !== undefined) {
+        pipeline.trim({
+            threshold: trim,
+        });
+    }
+    const quality = (0, tools_1.getQuality)(params);
+    switch (params.toFormat) {
+        case "webp":
+            pipeline.webp({ quality });
+            break;
+        case "png":
+            pipeline.png({ progressive: true, quality });
+            break;
+        case "avif":
+            pipeline.avif({ quality });
+            break;
+        default:
+            pipeline.jpeg({ progressive: true, quality });
+            break;
+    }
+    return pipeline.withMetadata({ density: 72 }).toColorspace("srgb").toFile(generatedFilename);
+}

package/src/utils/image-converter.ts

@@ -0,0 +1,56 @@
+import sharp, { OutputInfo } from "sharp";
+import {
+    getBackground,
+    getFit,
+    getHeight,
+    getPosition,
+    getQuality,
+    getTrim,
+    getWidth,
+    getWithoutEnlargement,
+    Params,
+} from "./tools";
+
+export function convertImage(
+    sourceFile: string | ArrayBuffer,
+    generatedFilename: string,
+    params: Params,
+): Promise<OutputInfo> {
+    const pipeline = sharp(sourceFile)
+        .rotate()
+        .resize({
+            width: getWidth(params),
+            height: getHeight(params),
+            background: getBackground(params),
+            fastShrinkOnLoad: false,
+            fit: getFit(params),
+            position: getPosition(params),
+            withoutEnlargement: getWithoutEnlargement(params),
+        });
+
+    const trim = getTrim(params);
+    if (trim !== undefined) {
+        pipeline.trim({
+            threshold: trim,
+        });
+    }
+
+    const quality = getQuality(params);
+
+    switch (params.toFormat) {
+        case "webp":
+            pipeline.webp({ quality });
+            break;
+        case "png":
+            pipeline.png({ progressive: true, quality });
+            break;
+        case "avif":
+            pipeline.avif({ quality });
+            break;
+        default:
+            pipeline.jpeg({ progressive: true, quality });
+            break;
+    }
+
+    return pipeline.withMetadata({ density: 72 }).toColorspace("srgb").toFile(generatedFilename);
+}

package/src/utils/log.d.ts

@@ -1 +1 @@
-export declare function log(message: any): void;
+export declare function log(message: any, level?: "log" | "warn" | "error"): void;

package/src/utils/log.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.log = log;
-function log(message) {
+function log(message, level = "log") {
     // eslint-disable-next-line no-console
-    console.log(message);
+    console[level](message);
 }

package/src/utils/log.ts

@@ -1,4 +1,4 @@
-export function log(message: any) {
+export function log(message: any, level: "log" | "warn" | "error" = "log") {
     // eslint-disable-next-line no-console
-    console.log(message);
+    console[level](message);
 }

package/src/utils/tools.d.ts

@@ -1,10 +1,22 @@
 import type { FitEnum } from "sharp";
 export declare const CONTENT_TYPES: Record<string, string | undefined>;
-export declare const getQuality: ({ quality }: any) => number | undefined;
-export declare const getWidth: ({ width }: any) => number | undefined;
-export declare const getHeight: ({ height }: any) => number | undefined;
-export declare const getBackground: ({ background }: any) => string | undefined;
-export declare const getFit: ({ fit }: any) => keyof FitEnum;
-export declare const getPosition: ({ position }: any) => string | number | undefined;
-export declare const getWithoutEnlargement: ({ extension }: any) => boolean;
-export declare const getTrim: ({ trim }: any) => number | undefined;
+export interface Params {
+    width: string;
+    height: string;
+    fit: string;
+    position: string;
+    background: string;
+    trim: string;
+    quality: string;
+    filename: string;
+    extension: string;
+    toFormat: string;
+}
+export declare const getQuality: ({ quality }: Params) => number | undefined;
+export declare const getWidth: ({ width }: Params) => number | undefined;
+export declare const getHeight: ({ height }: Params) => number | undefined;
+export declare const getBackground: ({ background }: Params) => string;
+export declare const getFit: ({ fit }: Params) => keyof FitEnum;
+export declare const getPosition: ({ position }: Params) => string | number | undefined;
+export declare const getWithoutEnlargement: ({ extension }: Params) => boolean;
+export declare const getTrim: ({ trim }: Params) => number | undefined;

package/src/utils/tools.js

@@ -33,7 +33,7 @@ const getWidth = ({ width }) => (width && width !== "x" ? Number(width) : undefi
 exports.getWidth = getWidth;
 const getHeight = ({ height }) => (height && height !== "x" ? Number(height) : undefined);
 exports.getHeight = getHeight;
-const getBackground = ({ background }) => background === undefined ? undefined : background === "t" ? "transparent" : `#${background}`;
+const getBackground = ({ background }) => (background === "t" ? "transparent" : `#${background}`);
 exports.getBackground = getBackground;
 const getFit = ({ fit }) => { var _a; return (fit ? ((_a = FIT_OPTIONS[fit]) !== null && _a !== void 0 ? _a : "cover") : "cover"); };
 exports.getFit = getFit;
@@ -41,5 +41,5 @@ const getPosition = ({ position }) => { var _a; return (position ? ((_a = POSITI
 exports.getPosition = getPosition;
 const getWithoutEnlargement = ({ extension }) => extension !== "svg";
 exports.getWithoutEnlargement = getWithoutEnlargement;
-const getTrim = ({ trim }) => (trim === undefined || trim === "nt" ? undefined : Number(trim));
+const getTrim = ({ trim }) => (trim === "nt" ? undefined : Number(trim));
 exports.getTrim = getTrim;

package/src/utils/tools.ts

@@ -29,12 +29,24 @@ export const CONTENT_TYPES: Record<string, string | undefined> = {
     jpeg: "image/jpeg",
 };
 
-export const getQuality = ({ quality }: any) => (quality && quality !== "x" ? Number(quality) : undefined);
-export const getWidth = ({ width }: any) => (width && width !== "x" ? Number(width) : undefined);
-export const getHeight = ({ height }: any) => (height && height !== "x" ? Number(height) : undefined);
-export const getBackground = ({ background }: any) =>
-    background === undefined ? undefined : background === "t" ? "transparent" : `#${background}`;
-export const getFit = ({ fit }: any): keyof FitEnum => (fit ? (FIT_OPTIONS[fit] ?? "cover") : "cover");
-export const getPosition = ({ position }: any) => (position ? (POSITION_OPTIONS[position] ?? "centre") : undefined);
-export const getWithoutEnlargement = ({ extension }: any) => extension !== "svg";
-export const getTrim = ({ trim }: any) => (trim === undefined || trim === "nt" ? undefined : Number(trim));
+export interface Params {
+    width: string;
+    height: string;
+    fit: string;
+    position: string;
+    background: string;
+    trim: string;
+    quality: string;
+    filename: string;
+    extension: string;
+    toFormat: string;
+}
+
+export const getQuality = ({ quality }: Params) => (quality && quality !== "x" ? Number(quality) : undefined);
+export const getWidth = ({ width }: Params) => (width && width !== "x" ? Number(width) : undefined);
+export const getHeight = ({ height }: Params) => (height && height !== "x" ? Number(height) : undefined);
+export const getBackground = ({ background }: Params) => (background === "t" ? "transparent" : `#${background}`);
+export const getFit = ({ fit }: Params): keyof FitEnum => (fit ? (FIT_OPTIONS[fit] ?? "cover") : "cover");
+export const getPosition = ({ position }: Params) => (position ? (POSITION_OPTIONS[position] ?? "centre") : undefined);
+export const getWithoutEnlargement = ({ extension }: Params) => extension !== "svg";
+export const getTrim = ({ trim }: Params) => (trim === "nt" ? undefined : Number(trim));