Automatically determine min from steps and max if omitted

dazuaz · Dec 16, 2018 · b94584b · b94584b
1 parent 2c5fee5
commit b94584b
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -119,8 +119,8 @@ ReactDOM.render(
 | `context` | `string` | `this.options.context` | Custom file context, defaults to webpack.config.js [context](https://webpack.js.org/configuration/entry-context/#context) |
 | `sizes` | `array` | *original size* | Specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default `sizes` array in the loader options in your `webpack.config.js`. |
 | `size` | `integer` | *original size* | Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up) |
-| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
-| `max` | `integer` | | See `min` above |
+| `max` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min` (optional), `max` and `steps`, and the sizes will be generated for you. |
+| `min` | `integer` | max / size | See `max` above |
 | `steps` | `integer` |`4` | Configure the number of images generated between `min` and `max` (inclusive) |
 | `quality` | `integer` | `85` | JPEG compression quality |
 | `format` | `string` | *original format* | Either `png` or `jpg`; use to convert to another format |

diff --git a/src/index.js b/src/index.js
@@ -103,12 +103,12 @@ module.exports = function loader(content: Buffer) {
     background
   });
 
-  const min: number | void = config.min !== undefined ? parseInt(config.min, 10) : undefined;
-  const max: number | void = config.max !== undefined ? parseInt(config.max, 10) : undefined;
   const steps: number = config.steps === undefined ? 4 : parseInt(config.steps, 10);
+  const max: number | void = config.max !== undefined ? parseInt(config.max, 10) : undefined;
+  const min: number = config.min !== undefined ? parseInt(config.min, 10) : Number(max) / steps;
 
   let generatedSizes;
-  if (typeof min === 'number' && max) {
+  if (!isNaN(min) && max) {
     generatedSizes = [];
 
     for (let step = 0; step < steps; step++) {

diff --git a/test/jimp/build/__snapshots__/test.js.snap b/test/jimp/build/__snapshots__/test.js.snap
@@ -268,6 +268,67 @@ Object {
 }
 `;
 
+exports[`with max sizes 1`] = `
+Object {
+  "height": 270,
+  "images": Array [
+    Object {
+      "height": 270,
+      "path": "foobar/652ca9fc84422fc0712297fe218d4bd7-300.jpg",
+      "width": 300,
+    },
+    Object {
+      "height": 540,
+      "path": "foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg",
+      "width": 600,
+    },
+    Object {
+      "height": 810,
+      "path": "foobar/bfdb5d567b215eeda9ca6c0d72fc54e3-900.jpg",
+      "width": 900,
+    },
+  ],
+  "placeholder": undefined,
+  "src": "foobar/652ca9fc84422fc0712297fe218d4bd7-300.jpg",
+  "srcSet": "foobar/652ca9fc84422fc0712297fe218d4bd7-300.jpg 300w,foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg 600w,foobar/bfdb5d567b215eeda9ca6c0d72fc54e3-900.jpg 900w",
+  "toString": [Function],
+  "width": 300,
+}
+`;
+
+exports[`with max sizes, and defualt steps 1`] = `
+Object {
+  "height": 180,
+  "images": Array [
+    Object {
+      "height": 180,
+      "path": "foobar/47b5a3359ed0722769a9888e5d22054a-200.jpg",
+      "width": 200,
+    },
+    Object {
+      "height": 360,
+      "path": "foobar/4f8751c87ff21bfa2aa62d6d1672c18d-400.jpg",
+      "width": 400,
+    },
+    Object {
+      "height": 540,
+      "path": "foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg",
+      "width": 600,
+    },
+    Object {
+      "height": 720,
+      "path": "foobar/f794cdac765d222d40585d283c49bddc-800.jpg",
+      "width": 800,
+    },
+  ],
+  "placeholder": undefined,
+  "src": "foobar/47b5a3359ed0722769a9888e5d22054a-200.jpg",
+  "srcSet": "foobar/47b5a3359ed0722769a9888e5d22054a-200.jpg 200w,foobar/4f8751c87ff21bfa2aa62d6d1672c18d-400.jpg 400w,foobar/52dba34908ff9d9ed720ad3c51e5b651-600.jpg 600w,foobar/f794cdac765d222d40585d283c49bddc-800.jpg 800w",
+  "toString": [Function],
+  "width": 200,
+}
+`;
+
 exports[`with min and max sizes 1`] = `
 Object {
   "height": 540,

diff --git a/test/jimp/index.js b/test/jimp/index.js
@@ -59,6 +59,16 @@ test('png to jpeg with background color', () => {
   expect(output).toMatchSnapshot();
 });
 
+test('with max sizes', () => {
+  const output = require('../cat-1000.jpg?max=900&steps=3');
+  expect(output).toMatchSnapshot();
+});
+
+test('with max sizes, and defualt steps', () => {
+  const output = require('../cat-1000.jpg?max=800');
+  expect(output).toMatchSnapshot();
+});
+
 test('with min and max sizes', () => {
   const output = require('../cat-1000.jpg?min=600&max=800&steps=3');
   expect(output).toMatchSnapshot();

diff --git a/test/sharp/build/__snapshots__/test.js.snap b/test/sharp/build/__snapshots__/test.js.snap
@@ -245,6 +245,67 @@ Object {
 }
 `;
 
+exports[`with max sizes 1`] = `
+Object {
+  "height": 270,
+  "images": Array [
+    Object {
+      "height": 270,
+      "path": "foobar/0f324a0de1e2536e830b1fcdfe180f70-300.jpg",
+      "width": 300,
+    },
+    Object {
+      "height": 540,
+      "path": "foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg",
+      "width": 600,
+    },
+    Object {
+      "height": 810,
+      "path": "foobar/d77d65057e0e2fe624ca0a10962704ec-900.jpg",
+      "width": 900,
+    },
+  ],
+  "placeholder": undefined,
+  "src": "foobar/0f324a0de1e2536e830b1fcdfe180f70-300.jpg",
+  "srcSet": "foobar/0f324a0de1e2536e830b1fcdfe180f70-300.jpg 300w,foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg 600w,foobar/d77d65057e0e2fe624ca0a10962704ec-900.jpg 900w",
+  "toString": [Function],
+  "width": 300,
+}
+`;
+
+exports[`with max sizes, and defualt steps 1`] = `
+Object {
+  "height": 180,
+  "images": Array [
+    Object {
+      "height": 180,
+      "path": "foobar/8640f0494e614246b96b1d949a09aabe-200.jpg",
+      "width": 200,
+    },
+    Object {
+      "height": 360,
+      "path": "foobar/f8c60f1643ff17fd8f8178169d6d6feb-400.jpg",
+      "width": 400,
+    },
+    Object {
+      "height": 540,
+      "path": "foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg",
+      "width": 600,
+    },
+    Object {
+      "height": 720,
+      "path": "foobar/bf55049b4b942dfd0388b7396cea413f-800.jpg",
+      "width": 800,
+    },
+  ],
+  "placeholder": undefined,
+  "src": "foobar/8640f0494e614246b96b1d949a09aabe-200.jpg",
+  "srcSet": "foobar/8640f0494e614246b96b1d949a09aabe-200.jpg 200w,foobar/f8c60f1643ff17fd8f8178169d6d6feb-400.jpg 400w,foobar/2af17e12f0375a11dd41544eb39e7d1d-600.jpg 600w,foobar/bf55049b4b942dfd0388b7396cea413f-800.jpg 800w",
+  "toString": [Function],
+  "width": 200,
+}
+`;
+
 exports[`with min and max sizes 1`] = `
 Object {
   "height": 540,

diff --git a/test/sharp/index.js b/test/sharp/index.js
@@ -54,6 +54,16 @@ test('png to jpeg with background color', () => {
   expect(output).toMatchSnapshot();
 });
 
+test('with max sizes', () => {
+  const output = require('../cat-1000.jpg?max=900&steps=3');
+  expect(output).toMatchSnapshot();
+});
+
+test('with max sizes, and defualt steps', () => {
+  const output = require('../cat-1000.jpg?max=800');
+  expect(output).toMatchSnapshot();
+});
+
 test('with min and max sizes', () => {
   const output = require('../cat-1000.jpg?min=600&max=800&steps=3');
   expect(output).toMatchSnapshot();