From 17db90e8a30d6228d8d44f053adcfa4b9d4dfb50 Mon Sep 17 00:00:00 2001 From: jupl Date: Sun, 16 Dec 2018 11:21:19 -0600 Subject: [PATCH] Automatically determine min from steps and max if omitted --- README.md | 4 +- src/index.js | 6 +- test/jimp/build/__snapshots__/test.js.snap | 61 +++++++++++++++++++++ test/jimp/index.js | 10 ++++ test/sharp/build/__snapshots__/test.js.snap | 61 +++++++++++++++++++++ test/sharp/index.js | 10 ++++ 6 files changed, 147 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 16d43ac..cc9e59e 100644 --- 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`, `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 index dfcdc68..c0b5e7c 100644 --- 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 index f5d99a2..f78aa0d 100644 --- 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 default 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 index e0c6abb..06f3cb0 100644 --- 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 default 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 index a31d1bb..dfd9446 100644 --- 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 default 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 index 882632d..61cfbd3 100644 --- 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 default 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();