@zubyjs/image 1.0.78 → 1.0.80

package/handler.d.ts

@@ -1,4 +1,4 @@
-import { HandlerContext } from 'zuby/contexts/index.js';
+import type { HandlerContext } from 'zuby/contexts/index.js';
 /**
  * The image handler that optimizes images
  * on /_image/:path* endpoint.

package/handler.js

@@ -2,6 +2,7 @@ import optimizeImage from './optimizeImage.js';
 import { HTTP_HEADERS } from 'zuby/constants.js';
 import { IMAGE_FORMATS_ARRAY } from 'zuby/types.js';
 import { pathToOptions } from './options/pathToOptions.js';
+import { getErrorMessage } from 'zuby/utils/errorUtils.js';
 /**
  * The image handler that optimizes images
  * on /_image/:path* endpoint.
@@ -17,9 +18,14 @@ export default async function Handler(context, _next) {
         if (src.startsWith('http://') || src.startsWith('https://')) {
             return new Response(`ERROR: The 'src' attribute needs to be relative`, { status: 400 });
         }
-        if ((format && !IMAGE_FORMATS_ARRAY.includes(format)) ||
-            (src && !IMAGE_FORMATS_ARRAY.some(ext => src.endsWith(ext)))) {
-            return new Response(`ERROR: Unsupported 'format' or 'src' file extension. Supported formats are: ${IMAGE_FORMATS_ARRAY.join(', ')}`, { status: 400 });
+        // Validate against path traversal attacks
+        if (src.includes('..') || src.startsWith('/')) {
+            return new Response(`ERROR: Invalid 'src' path - path traversal not allowed`, { status: 400 });
+        }
+        if ((format && !IMAGE_FORMATS_ARRAY.includes(format)) || (src && !IMAGE_FORMATS_ARRAY.some((ext) => src.endsWith(ext)))) {
+            return new Response(`ERROR: Unsupported 'format' or 'src' file extension. Supported formats are: ${IMAGE_FORMATS_ARRAY.join(', ')}`, {
+                status: 400,
+            });
         }
         const origin = context.url.origin.replace('localhost', '127.0.0.1');
         const imageUrl = new URL(src, origin);
@@ -57,8 +63,8 @@ export default async function Handler(context, _next) {
             },
         });
     }
-    catch (e) {
-        console.error(e);
-        return new Response('ERROR: An error occurred while optimizing your image.', { status: 500 });
+    catch (error) {
+        const errorMessage = getErrorMessage(error);
+        return new Response(`ERROR: An error occurred while optimizing your image: ${errorMessage}`, { status: 500 });
     }
 }

package/imageLoader.d.ts

@@ -1,9 +1,9 @@
-import { ImageLoaderOptions } from 'zuby/types.js';
+import type { ImageLoaderOptions } from 'zuby/types.js';
 /**
  * The ImageLoader for @zubyjs/image
  * that is used to generate image URLs
  */
-export default function imageLoader({ context, src, isAbsolute, format, quality, width, height, }: ImageLoaderOptions): string;
+export default function imageLoader({ context, src, isAbsolute, format, quality, width, height }: ImageLoaderOptions): string;
 /**
  * Returns shared global image URLs set
  * available across the whole project

package/imageLoader.js

@@ -4,7 +4,7 @@ let warningShown = false;
  * The ImageLoader for @zubyjs/image
  * that is used to generate image URLs
  */
-export default function imageLoader({ context, src, isAbsolute, format, quality, width = 1920, height, }) {
+export default function imageLoader({ context, src, isAbsolute, format, quality, width = 1920, height }) {
     const { buildId } = context;
     if (isAbsolute) {
         // Just add buildId to the image URL
@@ -13,6 +13,7 @@ export default function imageLoader({ context, src, isAbsolute, format, quality,
         return `${src}?${buildId}`;
     }
     if (!width && !height && !warningShown) {
+        // Using console.warn as this runs in browser context without logger
         console.warn('WARNING: You should always provide at least width or height to the Image component to avoid layout shift.');
         warningShown = true;
     }

package/index.d.ts

@@ -1,4 +1,4 @@
-import { ZubyPlugin } from 'zuby/types.js';
+import type { ZubyPlugin } from 'zuby/types.js';
 export interface ImagePluginOptions {
     /**
      * Set this option to false to disable
@@ -19,5 +19,5 @@ export interface ImagePluginOptions {
  * optimize images in your project
  * @returns ZubyPlugin
  */
-declare const _default: ({ buildTime, maxBuildTime, }?: ImagePluginOptions) => ZubyPlugin;
+declare const _default: ({ buildTime, maxBuildTime }?: ImagePluginOptions) => ZubyPlugin;
 export default _default;

package/index.js

@@ -14,7 +14,7 @@ const __dirname = dirname(__filename);
  * optimize images in your project
  * @returns ZubyPlugin
  */
-export default ({ buildTime = true, maxBuildTime = 1000, } = {}) => ({
+export default ({ buildTime = true, maxBuildTime = 1000 } = {}) => ({
     name: 'zuby-image-plugin',
     description: 'optimizing images...',
     buildStep: true,

package/optimizeImage.d.ts

@@ -1,2 +1,2 @@
-import { OptimizeImageOptions, OptimizeImageOutput } from './types.js';
+import type { OptimizeImageOptions, OptimizeImageOutput } from './types.js';
 export default function optimizeImage({ input, inputFile, outputFile, quality, width, height, format, }: OptimizeImageOptions): Promise<OptimizeImageOutput>;

package/optimizeImage.js

@@ -2,7 +2,7 @@ import sharp from 'sharp';
 export default async function optimizeImage({ input, inputFile, outputFile, quality = 75, width, height, format, }) {
     // Read the image from buffer or filesystem
     const image = sharp(input || inputFile);
-    const { format: originalFormat = 'webp', width: originalWidth = 0, height: originalHeight = 0, size: inputSize, } = await image.metadata();
+    const { format: originalFormat = 'webp', width: originalWidth = 0, height: originalHeight = 0, size: inputSize } = await image.metadata();
     const widthRatio = originalWidth / originalHeight;
     const heightRatio = originalHeight / originalWidth;
     format = format || originalFormat;
@@ -26,7 +26,7 @@ export default async function optimizeImage({ input, inputFile, outputFile, qual
             quality,
         });
     }
-    let outputFileSize = undefined;
+    let outputFileSize;
     // Save the image to filesystem
     if (outputFile) {
         const outputInfo = await image.toFile(outputFile);

package/options/optionsToPath.d.ts

@@ -1,4 +1,4 @@
-import { ImageOptions } from '../types.js';
+import type { ImageOptions } from '../types.js';
 /**
  * Converts image options object to a path
  * that is later parsed by the handler.

package/options/pathToOptions.d.ts

@@ -1,4 +1,4 @@
-import { ImageOptions } from '../types.js';
+import type { ImageOptions } from '../types.js';
 /**
  * Parses the path config options
  * to an image options object.

package/package.json

@@ -1,47 +1,48 @@
 {
-  "name": "@zubyjs/image",
-  "version": "1.0.78",
-  "description": "Zuby.js image plugin",
-  "type": "module",
-  "main": "index.js",
-  "scripts": {
-    "release": "cd ./dist && npm publish --access public && cd ..",
-    "bump-version": "npm version patch",
-    "build": "rm -rf dist/ stage/ && mkdir dist && tsc && cp -rf package.json README.md stage/image/src/* dist/ && rm -rf stage/",
-    "push-build": "npm run build && cd dist && yalc push --force && cd ..",
-    "test": "exit 0"
-  },
-  "publishConfig": {
-    "directory": "dist",
-    "linkDirectory": true
-  },
-  "peerDependencies": {
-    "zuby": "^1.0.0"
-  },
-  "dependencies": {
-    "chalk": "^5.3.0",
-    "sharp": "^0.32.6"
-  },
-  "bugs": {
-    "url": "https://gitlab.com/futrou/zuby.js/-/issues",
-    "email": "zuby@futrou.com"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.com/futrou/zuby.js.git"
-  },
-  "homepage": "https://zubyjs.com",
-  "keywords": [
-    "zuby-plugin",
-    "zuby",
-    "image",
-    "optimization"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "devDependencies": {
-    "@types/sharp": "^0.32.0"
-  }
+    "name": "@zubyjs/image",
+    "version": "1.0.80",
+    "description": "Zuby.js image plugin",
+    "type": "module",
+    "main": "index.js",
+    "scripts": {
+        "release": "cd ./dist && npm publish --access public && cd ..",
+        "bump-version": "npm version patch",
+        "build": "rm -rf dist/ stage/ && mkdir dist && tsc && cp -rf package.json README.md stage/image/src/* dist/ && rm -rf stage/",
+        "push-build": "npm run build && cd dist && yalc push --force && cd ..",
+        "test": "vitest run",
+        "test:coverage": "vitest run --coverage"
+    },
+    "publishConfig": {
+        "directory": "dist",
+        "linkDirectory": true
+    },
+    "peerDependencies": {
+        "zuby": "^1.0.0"
+    },
+    "dependencies": {
+        "chalk": "5.3.0",
+        "sharp": "0.32.6"
+    },
+    "bugs": {
+        "url": "https://gitlab.com/futrou/zuby.js/-/issues",
+        "email": "zuby@futrou.com"
+    },
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://gitlab.com/futrou/zuby.js.git"
+    },
+    "homepage": "https://zubyjs.com",
+    "keywords": [
+        "zuby-plugin",
+        "zuby",
+        "image",
+        "optimization"
+    ],
+    "engines": {
+        "node": ">=18"
+    },
+    "devDependencies": {
+        "@types/sharp": "0.32.0"
+    }
 }

package/types.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="node" />
-import { ImageFormat } from 'zuby/types.js';
+/// <reference types="node" resolution-mode="require"/>
+/// <reference types="node" resolution-mode="require"/>
+import type { ImageFormat } from 'zuby/types.js';
 export interface ImageOptions {
     src: string;
     quality?: number;