@websolutespa/bom-mixer-image 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @websolutespa/bom-mixer-image
+
+## 1.0.0
+
+### Patch Changes
+
+- Added: first release

package/README.md

@@ -0,0 +1,11 @@
+# @websolutespa/bom-mixer-image
+
+[![npm version](https://badge.fury.io/js/%40websolutespa%2Fbom-mixer-image.svg)](https://badge.fury.io/js/%40websolutespa%2Fbom-mixer-image)
+
+[![status alpha](https://img.shields.io/badge/status-alpha-red.svg)](https://shields.io/)
+
+Mixer Image module of the [BOM Repository](https://github.com/websolutespa/bom) by [websolute](https://www.websolute.com/).
+
+---
+
+##### *this library is for internal usage and not production ready*

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+declare function imageHandler({ domains }: {
+    domains: string[];
+}): any;
+
+export { imageHandler };

package/dist/index.js

@@ -0,0 +1,186 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  imageHandler: () => imageHandler
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/image/image.handler.ts
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+var import_sharp = __toESM(require("sharp"));
+
+// src/api/api.handler.ts
+function apiHandler(handler) {
+  return async (request, response) => {
+    const method = (request.method || "GET").toLowerCase();
+    if (!handler[method]) {
+      return response.status(405).end(`Method ${method} Not Allowed`);
+    }
+    try {
+      await handler[method](request, response);
+    } catch (error) {
+      return errorHandler(error, response);
+    }
+  };
+}
+function errorHandler(error, response) {
+  if (typeof error === "string") {
+    const is404 = error.toLowerCase().endsWith("not found");
+    const statusCode = is404 ? 404 : 400;
+    return response.status(statusCode).json({ message: error });
+  }
+  if (error.name === "UnauthorizedError") {
+    return response.status(401).json({ message: "Invalid Token" });
+  }
+  console.error(error);
+  return response.status(500).json({ message: error.message });
+}
+
+// src/image/image.handler.ts
+var IMAGE_MAX_AGE = 604800;
+function imageHandler({ domains = [] }) {
+  return apiHandler({
+    // Defining the 'get' method for handling GET requests
+    get: async (request, response) => {
+      try {
+        const { url, w, h, q } = request.query;
+        if (typeof url !== "string") {
+          return response.status(400).send("missing url parameter");
+        }
+        const width = typeof w === "string" ? parseInt(w) : void 0;
+        if (!width) {
+          return response.status(400).send("missing w parameter");
+        }
+        if (width > 2048) {
+          return response.status(400).send("invalid w parameter");
+        }
+        const height = typeof h === "string" ? parseInt(h) : void 0;
+        const quality = Math.max(30, Math.min(100, typeof q === "string" ? parseInt(q) : 80));
+        const cachedName = urlToCachedName(url, width, height, quality);
+        if (fs.existsSync(cachedName)) {
+          const cachedImage = await getCachedImage(cachedName);
+          response.setHeader("Content-Type", "image/webp");
+          response.setHeader("Expires", new Date(Date.now() + IMAGE_MAX_AGE * 1e3).toUTCString());
+          response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
+          return response.send(cachedImage);
+        }
+        const originalImage = await getOriginalImage(url, domains);
+        if (originalImage) {
+          const resizedImage = (0, import_sharp.default)(originalImage).resize({
+            width,
+            height: height ? height : void 0,
+            fit: import_sharp.default.fit.cover,
+            position: import_sharp.default.strategy.entropy
+          }).webp({ quality });
+          resizedImage.toFile(cachedName).then(() => console.log("imageHandler.sharp.cached", cachedName)).catch((error) => console.error("error caching image", cachedName, error));
+          const data = await resizedImage.toBuffer();
+          return response.end(data);
+        }
+      } catch (error) {
+        console.error("imageHandler.error", error);
+        throw error;
+      }
+    }
+  });
+}
+function getOriginalImage(url, domains) {
+  return new Promise((resolve, reject) => {
+    if (url.indexOf("http") === 0) {
+      if (!checkUrlValidity(url, domains)) {
+        console.error("imageHandler.getOriginalImage.error invalid url");
+        return reject({ status: 401, message: "invalid url" });
+      }
+      fetch(url, {
+        method: "GET",
+        mode: "cors",
+        headers: {
+          "Access-Control-Allow-Origin": "*"
+        }
+      }).then((response) => {
+        if (!response.ok) {
+          return reject({ status: response.status, message: response.statusText });
+        }
+        response.arrayBuffer().then((buffer) => {
+          return resolve(Buffer.from(buffer));
+        }).catch((error) => {
+          return reject(error);
+        });
+      }).catch((error) => {
+        return reject(error);
+      });
+    } else {
+      fs.readFile(url, (error, data) => {
+        if (error) {
+          return reject(error);
+        }
+        return resolve(data);
+      });
+    }
+  });
+}
+function getCachedImage(pathname) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(pathname, (error, data) => {
+      if (error) {
+        return reject(error);
+      }
+      return resolve(data);
+    });
+  });
+}
+function urlToFileName(url) {
+  let uniqueName = url.replace("://", "_").replace(".", "_").replace("/", "_");
+  uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf("_")) + "." + uniqueName.substring(uniqueName.lastIndexOf("_") + 1, uniqueName.length);
+  return uniqueName;
+}
+function isVercel() {
+  return process && process.env && String(process.env.VERCEL) === "1";
+}
+function urlToCachedName(url, width, height, quality) {
+  const fileName = urlToFileName(url);
+  const parsedName = path.parse(fileName);
+  const cacheDir = isVercel() ? path.join("/tmp", ".cache") : path.join(process.cwd(), ".cache");
+  if (!fs.existsSync(cacheDir)) {
+    fs.mkdirSync(cacheDir);
+  }
+  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_q_${quality}${parsedName.ext}`);
+  return cachedName;
+}
+function checkUrlValidity(src, domains) {
+  const url = new URL(src);
+  return domains.includes(url.hostname);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  imageHandler
+});

package/dist/index.mjs

@@ -0,0 +1,149 @@
+// src/image/image.handler.ts
+import * as fs from "fs";
+import * as path from "path";
+import sharp from "sharp";
+
+// src/api/api.handler.ts
+function apiHandler(handler) {
+  return async (request, response) => {
+    const method = (request.method || "GET").toLowerCase();
+    if (!handler[method]) {
+      return response.status(405).end(`Method ${method} Not Allowed`);
+    }
+    try {
+      await handler[method](request, response);
+    } catch (error) {
+      return errorHandler(error, response);
+    }
+  };
+}
+function errorHandler(error, response) {
+  if (typeof error === "string") {
+    const is404 = error.toLowerCase().endsWith("not found");
+    const statusCode = is404 ? 404 : 400;
+    return response.status(statusCode).json({ message: error });
+  }
+  if (error.name === "UnauthorizedError") {
+    return response.status(401).json({ message: "Invalid Token" });
+  }
+  console.error(error);
+  return response.status(500).json({ message: error.message });
+}
+
+// src/image/image.handler.ts
+var IMAGE_MAX_AGE = 604800;
+function imageHandler({ domains = [] }) {
+  return apiHandler({
+    // Defining the 'get' method for handling GET requests
+    get: async (request, response) => {
+      try {
+        const { url, w, h, q } = request.query;
+        if (typeof url !== "string") {
+          return response.status(400).send("missing url parameter");
+        }
+        const width = typeof w === "string" ? parseInt(w) : void 0;
+        if (!width) {
+          return response.status(400).send("missing w parameter");
+        }
+        if (width > 2048) {
+          return response.status(400).send("invalid w parameter");
+        }
+        const height = typeof h === "string" ? parseInt(h) : void 0;
+        const quality = Math.max(30, Math.min(100, typeof q === "string" ? parseInt(q) : 80));
+        const cachedName = urlToCachedName(url, width, height, quality);
+        if (fs.existsSync(cachedName)) {
+          const cachedImage = await getCachedImage(cachedName);
+          response.setHeader("Content-Type", "image/webp");
+          response.setHeader("Expires", new Date(Date.now() + IMAGE_MAX_AGE * 1e3).toUTCString());
+          response.setHeader("Cache-Control", `public, max-age=${IMAGE_MAX_AGE}`);
+          return response.send(cachedImage);
+        }
+        const originalImage = await getOriginalImage(url, domains);
+        if (originalImage) {
+          const resizedImage = sharp(originalImage).resize({
+            width,
+            height: height ? height : void 0,
+            fit: sharp.fit.cover,
+            position: sharp.strategy.entropy
+          }).webp({ quality });
+          resizedImage.toFile(cachedName).then(() => console.log("imageHandler.sharp.cached", cachedName)).catch((error) => console.error("error caching image", cachedName, error));
+          const data = await resizedImage.toBuffer();
+          return response.end(data);
+        }
+      } catch (error) {
+        console.error("imageHandler.error", error);
+        throw error;
+      }
+    }
+  });
+}
+function getOriginalImage(url, domains) {
+  return new Promise((resolve, reject) => {
+    if (url.indexOf("http") === 0) {
+      if (!checkUrlValidity(url, domains)) {
+        console.error("imageHandler.getOriginalImage.error invalid url");
+        return reject({ status: 401, message: "invalid url" });
+      }
+      fetch(url, {
+        method: "GET",
+        mode: "cors",
+        headers: {
+          "Access-Control-Allow-Origin": "*"
+        }
+      }).then((response) => {
+        if (!response.ok) {
+          return reject({ status: response.status, message: response.statusText });
+        }
+        response.arrayBuffer().then((buffer) => {
+          return resolve(Buffer.from(buffer));
+        }).catch((error) => {
+          return reject(error);
+        });
+      }).catch((error) => {
+        return reject(error);
+      });
+    } else {
+      fs.readFile(url, (error, data) => {
+        if (error) {
+          return reject(error);
+        }
+        return resolve(data);
+      });
+    }
+  });
+}
+function getCachedImage(pathname) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(pathname, (error, data) => {
+      if (error) {
+        return reject(error);
+      }
+      return resolve(data);
+    });
+  });
+}
+function urlToFileName(url) {
+  let uniqueName = url.replace("://", "_").replace(".", "_").replace("/", "_");
+  uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf("_")) + "." + uniqueName.substring(uniqueName.lastIndexOf("_") + 1, uniqueName.length);
+  return uniqueName;
+}
+function isVercel() {
+  return process && process.env && String(process.env.VERCEL) === "1";
+}
+function urlToCachedName(url, width, height, quality) {
+  const fileName = urlToFileName(url);
+  const parsedName = path.parse(fileName);
+  const cacheDir = isVercel() ? path.join("/tmp", ".cache") : path.join(process.cwd(), ".cache");
+  if (!fs.existsSync(cacheDir)) {
+    fs.mkdirSync(cacheDir);
+  }
+  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_q_${quality}${parsedName.ext}`);
+  return cachedName;
+}
+function checkUrlValidity(src, domains) {
+  const url = new URL(src);
+  return domains.includes(url.hostname);
+}
+export {
+  imageHandler
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@websolutespa/bom-mixer-image",
+  "version": "1.0.0",
+  "description": "Mixer Image module of the BOM Repository",
+  "keywords": [
+    "bom",
+    "mixer",
+    "image"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/websolutespa/bom.git"
+  },
+  "scripts": {
+    "lint": "eslint *.ts*",
+    "test": "jest",
+    "test-watch": "npm test -- --watch",
+    "coverage:integration": "npm run test -- --coverage",
+    "coverage": "run-s -c --silent coverage:*",
+    "compile": "tsup ./src/index.ts --format esm,cjs --dts",
+    "prepack": "bom prepack",
+    "postpack": "bom postpack"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "next": ">= 13.4.19",
+    "sharp": ">= 0.30.4"
+  },
+  "devDependencies": {
+    "@websolutespa/bom-cli": "*",
+    "@websolutespa/test": "*",
+    "@websolutespa/tsconfig": "*",
+    "eslint": "^8.46.0",
+    "eslint-config-websolute": "*",
+    "npm-run-all": "^4.1.5",
+    "sharp": "0.30.4",
+    "ts-node": "^10.9.1",
+    "tsup": "^6.7.0",
+    "typescript": "^5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "prepack": {
+    "types": "./dist/index.d.ts",
+    "main": "./dist/index.js",
+    "source": "./src/index.ts"
+  },
+  "postpack": {
+    "types": "./src/index.ts",
+    "main": "./src/index.ts"
+  },
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "source": "./src/index.ts"
+}

package/src/__tests/example.test.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom';
+
+describe('Example', () => {
+  it('passes', async () => {
+    const value = 'test';
+    expect(value).toEqual(value);
+  });
+});

package/src/api/api.handler.ts

@@ -0,0 +1,43 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export type ICrudMethod = 'get' | 'post' | 'put' | 'patch' | 'delete' | string;
+
+export type IHandler = (request: NextApiRequest, response: NextApiResponse) => Promise<any>;
+
+export type IApiHandler = Record<ICrudMethod, IHandler>;
+
+export function apiHandler(handler: IApiHandler): any {
+  return async (request: NextApiRequest, response: NextApiResponse): Promise<any> => {
+    const method: ICrudMethod = (request.method || 'GET').toLowerCase() as ICrudMethod;
+    // check handler supports HTTP method
+    if (!handler[method]) {
+      return response.status(405).end(`Method ${method} Not Allowed`);
+    }
+    try {
+      // global middleware
+      // await jwtMiddleware(request, response);
+      // route handler
+      await handler[method](request, response);
+    } catch (error) {
+      // console.log('error', error);
+      // global error handler
+      return errorHandler(error, response);
+    }
+  };
+}
+
+export function errorHandler(error: any, response: NextApiResponse): Promise<any> | void {
+  if (typeof (error) === 'string') {
+    // custom application error
+    const is404 = error.toLowerCase().endsWith('not found');
+    const statusCode = is404 ? 404 : 400;
+    return response.status(statusCode).json({ message: error });
+  }
+  if (error.name === 'UnauthorizedError') {
+    // jwt authentication error
+    return response.status(401).json({ message: 'Invalid Token' });
+  }
+  // default to 500 server error
+  console.error(error);
+  return response.status(500).json({ message: error.message });
+}

package/src/image/image.handler.ts

@@ -0,0 +1,189 @@
+// Importing the 'fs' module to work with the file system
+import * as fs from 'fs';
+// Importing the 'NextApiRequest' and 'NextApiResponse' from 'next' for handling API requests and responses
+import { NextApiRequest, NextApiResponse } from 'next';
+// Importing the 'path' module to work with file and directory paths
+import * as path from 'path';
+// Importing 'sharp' for image processing
+import sharp from 'sharp';
+// Importing 'apiHandler' from '../api/api.handler'
+import { apiHandler } from '../api/api.handler';
+
+const IMAGE_MAX_AGE = 604800;
+
+// Exporting the 'imageHandler' function
+export function imageHandler({ domains = [] }: { domains: string[] }) {
+  // Returning the 'apiHandler' function with a configuration object
+  return apiHandler({
+    // Defining the 'get' method for handling GET requests
+    get: async (request: NextApiRequest, response: NextApiResponse) => {
+      try {
+        // Destructuring 'url', 'w', 'h', 'q' from the request query
+        const { url, w, h, q } = request.query;
+        // Checking if 'url' is not a string
+        if (typeof url !== 'string') {
+          // Logging an error message and returning a 400 status code with a message
+          // console.error('imageHandler', 'missing url parameter');
+          return response.status(400).send('missing url parameter');
+        }
+        // Parsing 'w' to an integer and assigning it to 'width'
+        const width = typeof w === 'string' ? parseInt(w) : undefined;
+        // Checking if 'width' is not defined
+        if (!width) {
+          // Logging an error message and returning a 400 status code with a message
+          // console.error('imageHandler', 'missing w parameter');
+          return response.status(400).send('missing w parameter');
+        }
+        if (width > 2048) {
+          return response.status(400).send('invalid w parameter');
+        }
+        // Parsing 'h' to an integer and assigning it to 'height'
+        const height = typeof h === 'string' ? parseInt(h) : undefined;
+        // Parsing 'q' to an integer, ensuring it's between 30 and 100, and assigning it to 'quality'
+        const quality = Math.max(30, Math.min(100, (typeof q === 'string' ? parseInt(q) : 80)));
+        // Generating a cached name for the image
+        const cachedName = urlToCachedName(url, width, height, quality);
+        // Checking if the cached image exists
+        if (fs.existsSync(cachedName)) {
+          // Reading the cached image
+          const cachedImage = await getCachedImage(cachedName);
+          // Setting the 'Content-Type' header to 'image/webp'
+          response.setHeader('Content-Type', 'image/webp');
+          // Setting the 'Expires' header to the current time plus the maximum age of the image (in seconds)
+          response.setHeader('Expires', new Date(Date.now() + IMAGE_MAX_AGE * 1000).toUTCString());
+          // Setting the 'Cache-Control' header to 'public' and setting 'max-age' to the maximum age of the image
+          response.setHeader('Cache-Control', `public, max-age=${IMAGE_MAX_AGE}`);
+          // Ending the response and sending the cached image
+          return response.send(cachedImage);
+        }
+        // Reading the original image
+        const originalImage = await getOriginalImage(url, domains);
+        // Checking if the original image exists
+        if (originalImage) {
+          // Resizing the original image and converting it to WebP format
+          const resizedImage = sharp(originalImage)
+            .resize({
+              width,
+              height: height ? height : undefined,
+              fit: sharp.fit.cover,
+              position: sharp.strategy.entropy,
+            })
+            .webp({ quality });
+          // Saving the resized image to the cache
+          resizedImage.toFile(cachedName)
+            .then(() => console.log('imageHandler.sharp.cached', cachedName))
+            .catch(error => console.error('error caching image', cachedName, error));
+          // Converting the resized image to a buffer and sending it in the response
+          const data = await resizedImage.toBuffer();
+          return response.end(data);
+        }
+      } catch (error) {
+        // Logging an error message and throwing the error
+        console.error('imageHandler.error', error);
+        throw error;
+      }
+    },
+  });
+}
+
+// Defining the 'getOriginalImage' function
+function getOriginalImage(url: string, domains: string[]): Promise<Buffer> {
+  // Returning a new promise
+  return new Promise((resolve, reject) => {
+    // Checking if 'url' starts with 'http'
+    if (url.indexOf('http') === 0) {
+      if (!checkUrlValidity(url, domains)) {
+        console.error('imageHandler.getOriginalImage.error invalid url');
+        return reject({ status: 401, message: 'invalid url' });
+      }
+      // Fetching the image from the URL
+      fetch(url, {
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+        },
+      })
+        .then(response => {
+          if (!response.ok) {
+            return reject({ status: response.status, message: response.statusText });
+          }
+          response.arrayBuffer().then(buffer => {
+            return resolve(Buffer.from(buffer));
+          }).catch(error => {
+            return reject(error);
+          });
+        })
+        .catch(error => {
+          // Rejecting the promise with the error
+          return reject(error);
+        });
+    } else {
+      // Reading the image from the file system
+      fs.readFile(url, (error, data) => {
+        if (error) {
+          return reject(error);
+        }
+        // Resolving the promise with the image data
+        return resolve(data);
+      });
+    }
+  });
+}
+
+// Defining the 'getCachedImage' function
+function getCachedImage(pathname: string): Promise<Buffer> {
+  // Returning a new promise
+  return new Promise((resolve, reject) => {
+    // Reading the image from the file system
+    fs.readFile(pathname, (error, data) => {
+      if (error) {
+        // Rejecting the promise with the error
+        return reject(error);
+      }
+      // Resolving the promise with the image data
+      return resolve(data);
+    });
+  });
+}
+
+// Defining the 'urlToFileName' function
+function urlToFileName(url: string): string {
+  // Replacing useless characters with UNDERSCORE
+  let uniqueName = url.replace('://', '_').replace('.', '_').replace('/', '_');
+  // Replacing last UNDERSCORE with a DOT
+  uniqueName = uniqueName.substring(0, uniqueName.lastIndexOf('_'))
+    + '.' + uniqueName.substring(uniqueName.lastIndexOf('_') + 1, uniqueName.length);
+  // Returning the unique name
+  return uniqueName;
+}
+
+function isVercel(): boolean {
+  return process && process.env && String(process.env.VERCEL) === '1';
+}
+
+// Defining the 'urlToCachedName' function
+function urlToCachedName(url: string, width: number, height: number | undefined, quality: number): string {
+  // Converting the URL to a file name
+  const fileName = urlToFileName(url);
+  // Parsing the file name
+  const parsedName = path.parse(fileName);
+  // Defining the cache directory
+  const cacheDir = isVercel() ?
+    path.join('/tmp', '.cache') :
+    path.join(process.cwd(), '.cache');
+  // Checking if the cache directory exists
+  if (!fs.existsSync(cacheDir)) {
+    // Creating the cache directory
+    fs.mkdirSync(cacheDir);
+  }
+  // Generating the cached name
+  const cachedName = path.join(cacheDir, `${parsedName.name}_w_${width}_h_${height || 0}_q_${quality}${parsedName.ext}`);
+  // Returning the cached name
+  return cachedName;
+}
+
+function checkUrlValidity(src: string, domains: string[]): boolean {
+  const url = new URL(src);
+  return domains.includes(url.hostname);
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './image/image.handler';
+