ipx - npm Package Compare versions

Comparing version 0.5.8 to 0.6.0

CHANGELOG.md

@@ -5,2 +5,13 @@ # Changelog
 
+## [0.6.0](https://github.com/nuxt-contrib/ipx/compare/v0.5.8...v0.6.0) (2021-02-15)
+
+
+### ⚠ BREAKING CHANGES
+
+* improved handlers and format support
+
+### Features
+
+* improved handlers and format support ([f4f6e58](https://github.com/nuxt-contrib/ipx/commit/f4f6e586119e5c9c7c81354277b42e2d3406bb96))
+
 ### [0.5.8](https://github.com/nuxt-contrib/ipx/compare/v0.5.7...v0.5.8) (2021-02-08)
@@ -7,0 +18,0 @@

dist/cli.js

@@ -121,49 +121,20 @@ #!/usr/bin/env node
 
-const SUPPORTED_FORMATS = ["jpeg", "png", "webp", "avif", "tiff"];
-const MAX_SIZE = 2048;
-const ARG_SEP = "_";
-const ARG_RE = /^[a-z0-9]+$/i;
-const NUM_RE = /^[1-9][0-9]*$/;
-const VArg = (arg) => {
-  if (!ARG_RE.test(arg)) {
-    throw createError("Invalid argument: " + arg, 400);
-  }
-  return arg;
-};
-const VMax = (max2) => (num) => {
-  if (!NUM_RE.test(num)) {
-    throw createError("Invalid numeric argument: " + num, 400);
-  }
-  return Math.min(parseInt(num), max2) || null;
-};
-const VSize = VMax(MAX_SIZE);
+function VArg(arg) {
+  return destr2__default['default'](arg);
+}
 function parseArgs(args, mappers) {
-  const vargs = args.split(ARG_SEP);
+  const vargs = args.split("_");
   return mappers.map((v, i) => v(vargs[i]));
 }
-function applyHandler(ctx, pipe, key, val) {
-  const handler = Handlers[key];
-  if (!handler) {
-    return false;
-  }
-  const args = handler.args && parseArgs(val, handler.args);
-  return handler.apply(ctx, pipe, ...args);
-}
-const format = {
+
+const quality = {
   args: [VArg],
-  apply: (_context, pipe, format2) => {
-    if (!SUPPORTED_FORMATS.includes(format2)) {
-      throw createError("Unsupported format " + format2 + " (supported: " + SUPPORTED_FORMATS.join(", ") + ")", 400);
-    }
-    return pipe.toFormat(format2, {
-      quality: _context.quality || 80
-    });
+  apply: (context, _pipe, quality2) => {
+    context.quality = quality2;
   }
 };
-const resize = {
-  args: [VSize, VSize],
-  apply: (context, pipe, width2, height2, fit2) => {
-    return pipe.resize(width2, height2, {
-      fit: fit2 || context.fit || "cover"
-    });
+const fit = {
+  args: [VArg],
+  apply: (context, _pipe, fit2) => {
+    context.fit = fit2;
   }
@@ -175,55 +146,200 @@ };
   args: [VArg],
-  apply: (_context, pipe, background2) => {
+  apply: (context, _pipe, background2) => {
     if (!background2.startsWith("#") && (HEX_RE.test(background2) || SHORTHEX_RE.test(background2))) {
       background2 = "#" + background2;
     }
-    return pipe.flatten({background: background2});
+    context.background = background2;
   }
 };
-const quality = {
-  args: [VMax(100)],
-  apply: (context, _pipe, quality2) => {
-    context.quality = quality2;
+const width = {
+  args: [VArg],
+  apply: (_context, pipe, width2) => {
+    return pipe.resize(width2, null);
   }
 };
-const fit = {
+const height = {
   args: [VArg],
-  apply: (context, _pipe, fit2) => {
-    context.fit = fit2;
+  apply: (_context, pipe, height2) => {
+    return pipe.resize(null, height2);
   }
 };
-const width = {
-  args: [VSize],
-  apply: (_context, pipe, width2) => pipe.resize(width2, null)
+const resize = {
+  args: [VArg, VArg, VArg],
+  apply: (context, pipe, width2, height2) => {
+    return pipe.resize(width2, height2, {
+      fit: context.fit,
+      background: context.background
+    });
+  }
 };
-const height = {
-  args: [VSize],
-  apply: (_context, pipe, height2) => pipe.resize(null, height2)
+const trim = {
+  args: [VArg],
+  apply: (_context, pipe, threshold2) => {
+    return pipe.trim(threshold2);
+  }
 };
-const max = {
+const extend = {
+  args: [VArg, VArg, VArg, VArg],
+  apply: (context, pipe, top, right, bottom, left) => {
+    return pipe.extend({
+      top,
+      left,
+      bottom,
+      right,
+      background: context.background
+    });
+  }
+};
+const extract = {
+  args: [VArg, VArg, VArg, VArg],
+  apply: (context, pipe, top, right, bottom, left) => {
+    return pipe.extend({
+      top,
+      left,
+      bottom,
+      right,
+      background: context.background
+    });
+  }
+};
+const rotate = {
+  args: [VArg],
+  apply: (_context, pipe, angel) => {
+    return pipe.rotate(angel);
+  }
+};
+const flip = {
   args: [],
-  apply: (_context, pipe) => pipe.max()
+  apply: (_context, pipe) => {
+    return pipe.flip();
+  }
 };
-const min = {
+const flop = {
   args: [],
-  apply: (_context, pipe) => pipe.min()
+  apply: (_context, pipe) => {
+    return pipe.flop();
+  }
 };
-const Handlers = {
-  background,
-  bg: background,
-  quality,
-  q: quality,
-  fit,
-  width,
-  w: width,
-  height,
-  h: height,
-  max,
-  min,
-  resize,
-  s: resize,
-  format,
-  f: format
+const sharpen = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe, sigma, flat, jagged) => {
+    return pipe.sharpen(sigma, flat, jagged);
+  }
 };
+const median = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe, size) => {
+    return pipe.median(size);
+  }
+};
+const blur = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe) => {
+    return pipe.blur();
+  }
+};
+const flatten = {
+  args: [VArg, VArg, VArg],
+  apply: (context, pipe) => {
+    return pipe.flatten({
+      background: context.background
+    });
+  }
+};
+const gamma = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe, gamma2, gammaOut) => {
+    return pipe.gamma(gamma2, gammaOut);
+  }
+};
+const negate = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe) => {
+    return pipe.negate();
+  }
+};
+const normalize = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe) => {
+    return pipe.normalize();
+  }
+};
+const threshold = {
+  args: [VArg],
+  apply: (_context, pipe, threshold2) => {
+    return pipe.threshold(threshold2);
+  }
+};
+const modulate = {
+  args: [VArg],
+  apply: (_context, pipe, brightness, saturation, hue) => {
+    return pipe.modulate({
+      brightness,
+      saturation,
+      hue
+    });
+  }
+};
+const tint = {
+  args: [VArg],
+  apply: (_context, pipe, rgb) => {
+    return pipe.tint(rgb);
+  }
+};
+const grayscale = {
+  args: [VArg],
+  apply: (_context, pipe) => {
+    return pipe.grayscale();
+  }
+};
+const crop = extract;
+const q = quality;
+const b = background;
+const w = width;
+const h = height;
+const s = resize;
 
+const Handlers = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  quality: quality,
+  fit: fit,
+  background: background,
+  width: width,
+  height: height,
+  resize: resize,
+  trim: trim,
+  extend: extend,
+  extract: extract,
+  rotate: rotate,
+  flip: flip,
+  flop: flop,
+  sharpen: sharpen,
+  median: median,
+  blur: blur,
+  flatten: flatten,
+  gamma: gamma,
+  negate: negate,
+  normalize: normalize,
+  threshold: threshold,
+  modulate: modulate,
+  tint: tint,
+  grayscale: grayscale,
+  crop: crop,
+  q: q,
+  b: b,
+  w: w,
+  h: h,
+  s: s
+});
+
+function applyHandler(ctx, pipe, key, val) {
+  const handler = Handlers[key];
+  if (!handler) {
+    return;
+  }
+  const args = handler.args && parseArgs(val, handler.args);
+  return handler.apply(ctx, pipe, ...args);
+}
+
+const SUPPORTED_FORMATS = ["jpeg", "png", "webp", "avif", "tiff"];
 function createIPX(userOptions) {
@@ -254,32 +370,25 @@ const defaults = {
     const modifiers = inputOpts.modifiers || {};
-    const format = modifiers.f || modifiers.format;
     const getSrc = cachedPromise(() => {
-      const source2 = inputOpts.source || ufo.hasProtocol(id) ? "http" : "filesystem";
-      if (!ctx.sources[source2]) {
-        throw createError("Unknown source: " + source2, 400);
+      const source = inputOpts.source || ufo.hasProtocol(id) ? "http" : "filesystem";
+      if (!ctx.sources[source]) {
+        throw createError("Unknown source: " + source, 400);
       }
-      return ctx.sources[source2](id);
+      return ctx.sources[source](id);
     });
-    const getMeta = cachedPromise(async () => {
+    const getData = cachedPromise(async () => {
       const src = await getSrc();
       const data = await src.getData();
       const meta = imageMeta__default['default'](data);
-      meta._type = meta.type;
-      meta._mimeType = meta.mimeType;
-      if (format) {
-        meta.type = format;
-        meta.mimeType = "image/" + format;
+      const mFormat = modifiers.f || modifiers.format;
+      let format = mFormat || meta.type;
+      if (format === "jpg") {
+        format = "jpeg";
       }
-      return meta;
-    });
-    const getData = cachedPromise(async () => {
-      const src = await getSrc();
-      const data = await src.getData();
-      if (!inputOpts.modifiers || Object.values(inputOpts.modifiers).length === 0) {
-        return data;
+      if (meta.type === "svg" && !mFormat) {
+        return {
+          data,
+          format: "svg",
+          meta
+        };
       }
-      const meta = await getMeta();
-      if (meta._type === "svg" && !format) {
-        return data;
-      }
       let sharp2 = Sharp__default['default'](data);
@@ -291,8 +400,18 @@ Object.assign(sharp2.options, options.sharp);
       }
-      return sharp2.toBuffer();
+      if (SUPPORTED_FORMATS.includes(format)) {
+        sharp2 = sharp2.toFormat(format, {
+          quality: modifierCtx.quality,
+          progressive: format === "jpeg"
+        });
+      }
+      const newData = await sharp2.toBuffer();
+      return {
+        data: newData,
+        format,
+        meta
+      };
     });
     return {
       src: getSrc,
-      data: getData,
-      meta: getMeta
+      data: getData
     };
@@ -330,3 +449,3 @@ };
   }
-  const data = await img.data();
+  const {data, format} = await img.data();
   const etag2 = getEtag__default['default'](data);
@@ -338,5 +457,4 @@ res.setHeader("ETag", etag2);
   }
-  const meta = await img.meta();
-  if (meta.mimeType) {
-    res.setHeader("Content-Type", meta.mimeType);
+  if (format) {
+    res.setHeader("Content-Type", "image/" + format);
   }
@@ -343,0 +461,0 @@ res.end(data);

dist/index.d.ts

@@ -16,4 +16,2 @@ import { IncomingMessage, ServerResponse } from 'http';
     mimeType: string;
-    _mimeType: string;
-    _type: string;
 }
@@ -29,4 +27,7 @@ interface IPXInputOptions {
     src: () => Promise<SourceData>;
-    data: () => Promise<Buffer>;
-    meta: () => Promise<ImageMeta>;
+    data: () => Promise<{
+        data: Buffer;
+        meta: ImageMeta;
+        format: string;
+    }>;
 };
@@ -33,0 +34,0 @@ interface IPXOptions {

dist/index.js

@@ -118,49 +118,20 @@ 'use strict';
 
-const SUPPORTED_FORMATS = ["jpeg", "png", "webp", "avif", "tiff"];
-const MAX_SIZE = 2048;
-const ARG_SEP = "_";
-const ARG_RE = /^[a-z0-9]+$/i;
-const NUM_RE = /^[1-9][0-9]*$/;
-const VArg = (arg) => {
-  if (!ARG_RE.test(arg)) {
-    throw createError("Invalid argument: " + arg, 400);
-  }
-  return arg;
-};
-const VMax = (max2) => (num) => {
-  if (!NUM_RE.test(num)) {
-    throw createError("Invalid numeric argument: " + num, 400);
-  }
-  return Math.min(parseInt(num), max2) || null;
-};
-const VSize = VMax(MAX_SIZE);
+function VArg(arg) {
+  return destr2__default['default'](arg);
+}
 function parseArgs(args, mappers) {
-  const vargs = args.split(ARG_SEP);
+  const vargs = args.split("_");
   return mappers.map((v, i) => v(vargs[i]));
 }
-function applyHandler(ctx, pipe, key, val) {
-  const handler = Handlers[key];
-  if (!handler) {
-    return false;
-  }
-  const args = handler.args && parseArgs(val, handler.args);
-  return handler.apply(ctx, pipe, ...args);
-}
-const format = {
+
+const quality = {
   args: [VArg],
-  apply: (_context, pipe, format2) => {
-    if (!SUPPORTED_FORMATS.includes(format2)) {
-      throw createError("Unsupported format " + format2 + " (supported: " + SUPPORTED_FORMATS.join(", ") + ")", 400);
-    }
-    return pipe.toFormat(format2, {
-      quality: _context.quality || 80
-    });
+  apply: (context, _pipe, quality2) => {
+    context.quality = quality2;
   }
 };
-const resize = {
-  args: [VSize, VSize],
-  apply: (context, pipe, width2, height2, fit2) => {
-    return pipe.resize(width2, height2, {
-      fit: fit2 || context.fit || "cover"
-    });
+const fit = {
+  args: [VArg],
+  apply: (context, _pipe, fit2) => {
+    context.fit = fit2;
   }
@@ -172,55 +143,200 @@ };
   args: [VArg],
-  apply: (_context, pipe, background2) => {
+  apply: (context, _pipe, background2) => {
     if (!background2.startsWith("#") && (HEX_RE.test(background2) || SHORTHEX_RE.test(background2))) {
       background2 = "#" + background2;
     }
-    return pipe.flatten({background: background2});
+    context.background = background2;
   }
 };
-const quality = {
-  args: [VMax(100)],
-  apply: (context, _pipe, quality2) => {
-    context.quality = quality2;
+const width = {
+  args: [VArg],
+  apply: (_context, pipe, width2) => {
+    return pipe.resize(width2, null);
   }
 };
-const fit = {
+const height = {
   args: [VArg],
-  apply: (context, _pipe, fit2) => {
-    context.fit = fit2;
+  apply: (_context, pipe, height2) => {
+    return pipe.resize(null, height2);
   }
 };
-const width = {
-  args: [VSize],
-  apply: (_context, pipe, width2) => pipe.resize(width2, null)
+const resize = {
+  args: [VArg, VArg, VArg],
+  apply: (context, pipe, width2, height2) => {
+    return pipe.resize(width2, height2, {
+      fit: context.fit,
+      background: context.background
+    });
+  }
 };
-const height = {
-  args: [VSize],
-  apply: (_context, pipe, height2) => pipe.resize(null, height2)
+const trim = {
+  args: [VArg],
+  apply: (_context, pipe, threshold2) => {
+    return pipe.trim(threshold2);
+  }
 };
-const max = {
+const extend = {
+  args: [VArg, VArg, VArg, VArg],
+  apply: (context, pipe, top, right, bottom, left) => {
+    return pipe.extend({
+      top,
+      left,
+      bottom,
+      right,
+      background: context.background
+    });
+  }
+};
+const extract = {
+  args: [VArg, VArg, VArg, VArg],
+  apply: (context, pipe, top, right, bottom, left) => {
+    return pipe.extend({
+      top,
+      left,
+      bottom,
+      right,
+      background: context.background
+    });
+  }
+};
+const rotate = {
+  args: [VArg],
+  apply: (_context, pipe, angel) => {
+    return pipe.rotate(angel);
+  }
+};
+const flip = {
   args: [],
-  apply: (_context, pipe) => pipe.max()
+  apply: (_context, pipe) => {
+    return pipe.flip();
+  }
 };
-const min = {
+const flop = {
   args: [],
-  apply: (_context, pipe) => pipe.min()
+  apply: (_context, pipe) => {
+    return pipe.flop();
+  }
 };
-const Handlers = {
-  background,
-  bg: background,
-  quality,
-  q: quality,
-  fit,
-  width,
-  w: width,
-  height,
-  h: height,
-  max,
-  min,
-  resize,
-  s: resize,
-  format,
-  f: format
+const sharpen = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe, sigma, flat, jagged) => {
+    return pipe.sharpen(sigma, flat, jagged);
+  }
 };
+const median = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe, size) => {
+    return pipe.median(size);
+  }
+};
+const blur = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe) => {
+    return pipe.blur();
+  }
+};
+const flatten = {
+  args: [VArg, VArg, VArg],
+  apply: (context, pipe) => {
+    return pipe.flatten({
+      background: context.background
+    });
+  }
+};
+const gamma = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe, gamma2, gammaOut) => {
+    return pipe.gamma(gamma2, gammaOut);
+  }
+};
+const negate = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe) => {
+    return pipe.negate();
+  }
+};
+const normalize = {
+  args: [VArg, VArg, VArg],
+  apply: (_context, pipe) => {
+    return pipe.normalize();
+  }
+};
+const threshold = {
+  args: [VArg],
+  apply: (_context, pipe, threshold2) => {
+    return pipe.threshold(threshold2);
+  }
+};
+const modulate = {
+  args: [VArg],
+  apply: (_context, pipe, brightness, saturation, hue) => {
+    return pipe.modulate({
+      brightness,
+      saturation,
+      hue
+    });
+  }
+};
+const tint = {
+  args: [VArg],
+  apply: (_context, pipe, rgb) => {
+    return pipe.tint(rgb);
+  }
+};
+const grayscale = {
+  args: [VArg],
+  apply: (_context, pipe) => {
+    return pipe.grayscale();
+  }
+};
+const crop = extract;
+const q = quality;
+const b = background;
+const w = width;
+const h = height;
+const s = resize;
 
+const Handlers = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  quality: quality,
+  fit: fit,
+  background: background,
+  width: width,
+  height: height,
+  resize: resize,
+  trim: trim,
+  extend: extend,
+  extract: extract,
+  rotate: rotate,
+  flip: flip,
+  flop: flop,
+  sharpen: sharpen,
+  median: median,
+  blur: blur,
+  flatten: flatten,
+  gamma: gamma,
+  negate: negate,
+  normalize: normalize,
+  threshold: threshold,
+  modulate: modulate,
+  tint: tint,
+  grayscale: grayscale,
+  crop: crop,
+  q: q,
+  b: b,
+  w: w,
+  h: h,
+  s: s
+});
+
+function applyHandler(ctx, pipe, key, val) {
+  const handler = Handlers[key];
+  if (!handler) {
+    return;
+  }
+  const args = handler.args && parseArgs(val, handler.args);
+  return handler.apply(ctx, pipe, ...args);
+}
+
+const SUPPORTED_FORMATS = ["jpeg", "png", "webp", "avif", "tiff"];
 function createIPX(userOptions) {
@@ -251,32 +367,25 @@ const defaults = {
     const modifiers = inputOpts.modifiers || {};
-    const format = modifiers.f || modifiers.format;
     const getSrc = cachedPromise(() => {
-      const source2 = inputOpts.source || ufo.hasProtocol(id) ? "http" : "filesystem";
-      if (!ctx.sources[source2]) {
-        throw createError("Unknown source: " + source2, 400);
+      const source = inputOpts.source || ufo.hasProtocol(id) ? "http" : "filesystem";
+      if (!ctx.sources[source]) {
+        throw createError("Unknown source: " + source, 400);
       }
-      return ctx.sources[source2](id);
+      return ctx.sources[source](id);
     });
-    const getMeta = cachedPromise(async () => {
+    const getData = cachedPromise(async () => {
       const src = await getSrc();
       const data = await src.getData();
       const meta = imageMeta__default['default'](data);
-      meta._type = meta.type;
-      meta._mimeType = meta.mimeType;
-      if (format) {
-        meta.type = format;
-        meta.mimeType = "image/" + format;
+      const mFormat = modifiers.f || modifiers.format;
+      let format = mFormat || meta.type;
+      if (format === "jpg") {
+        format = "jpeg";
       }
-      return meta;
-    });
-    const getData = cachedPromise(async () => {
-      const src = await getSrc();
-      const data = await src.getData();
-      if (!inputOpts.modifiers || Object.values(inputOpts.modifiers).length === 0) {
-        return data;
+      if (meta.type === "svg" && !mFormat) {
+        return {
+          data,
+          format: "svg",
+          meta
+        };
       }
-      const meta = await getMeta();
-      if (meta._type === "svg" && !format) {
-        return data;
-      }
       let sharp2 = Sharp__default['default'](data);
@@ -288,8 +397,18 @@ Object.assign(sharp2.options, options.sharp);
       }
-      return sharp2.toBuffer();
+      if (SUPPORTED_FORMATS.includes(format)) {
+        sharp2 = sharp2.toFormat(format, {
+          quality: modifierCtx.quality,
+          progressive: format === "jpeg"
+        });
+      }
+      const newData = await sharp2.toBuffer();
+      return {
+        data: newData,
+        format,
+        meta
+      };
     });
     return {
       src: getSrc,
-      data: getData,
-      meta: getMeta
+      data: getData
     };
@@ -327,3 +446,3 @@ };
   }
-  const data = await img.data();
+  const {data, format} = await img.data();
   const etag2 = getEtag__default['default'](data);
@@ -335,5 +454,4 @@ res.setHeader("ETag", etag2);
   }
-  const meta = await img.meta();
-  if (meta.mimeType) {
-    res.setHeader("Content-Type", meta.mimeType);
+  if (format) {
+    res.setHeader("Content-Type", "image/" + format);
   }
@@ -340,0 +458,0 @@ res.end(data);

package.json

 {
   "name": "ipx",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "repository": "nuxt-contrib/ipx",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -46,12 +46,2 @@ # IPX
 
-<h2 align="center">Modifiers</h2>
-
-Modifier    |  Arguments            | Example     | Description
--------------|-----------------------|-------------|---------------------------------------------------------
-`s`          | `width`, `height`     | s_200_300   | Resize image.
-`w`          | `width`               | w_200       | Change image with.
-`h`          | `height`              | h_200       | Change image height.
-`max`        | -                     | max         | Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to the `width` and `height` specified.
-`min`        | -                     | min         | Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to the width and height specified.
-
 <h2 align="center">Config</h2>
@@ -58,0 +48,0 @@

No alert changes

Improved metrics

Total package byte prevSize

46094

increased by12.16%

Lines of code

1405

increased by32.67%

Worsened metrics

Number of lines in readme file

59

decreased by-14.49%

No dependency changes