responsive-loader - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

lib/index.js

@@ -43,3 +43,2 @@ "use strict";
  */
-// module.exports = function loader(content: Buffer) {
 
@@ -68,5 +67,7 @@ function loader(content) {
   } = (0, _utils.parseOptions)(this, options, DEFAULTS);
-  const sizes = parsedResourceQuery.size || parsedResourceQuery.sizes || generatedSizes || options.size || options.sizes || [Number.MAX_SAFE_INTEGER];
+  let sizes = parsedResourceQuery.size || parsedResourceQuery.sizes || generatedSizes || options.size || options.sizes || [Number.MAX_SAFE_INTEGER]; // ensure is an array
 
-  if (!sizes) {
+  sizes = [].concat(sizes);
+
+  if (!sizes.length) {
     return loaderCallback(null, content);
@@ -133,36 +134,20 @@ }
   const img = adapter(this.resourcePath);
-  img.metadata().then(metadata => {
-    let promises = [];
-    const widthsToGenerate = new Set();
-    (Array.isArray(sizes) ? sizes : [sizes]).forEach(size => {
-      const width = Math.min(metadata.width, parseInt(size, 10)); // Only resize images if they aren't an exact copy of one already being resized...
+  transformations({
+    img,
+    sizes,
+    mime,
+    outputPlaceholder,
+    placeholderSize,
+    adapterOptions
+  }).then(results => {
+    let placeholder;
+    let files = new Map();
 
-      if (!widthsToGenerate.has(width)) {
-        widthsToGenerate.add(width);
-        promises.push(img.resize({
-          width,
-          mime,
-          options: adapterOptions
-        }));
-      }
-    });
-
     if (outputPlaceholder) {
-      promises.push(img.resize({
-        width: placeholderSize,
-        options: adapterOptions,
-        mime
-      }));
+      files = results.slice(0, -1).map(createFile);
+      placeholder = (0, _utils.createPlaceholder)(results[results.length - 1], mime);
+    } else {
+      files = results.map(createFile);
     }
 
-    return Promise.all(promises).then(results => outputPlaceholder ? {
-      files: results.slice(0, -1).map(createFile),
-      placeholder: (0, _utils.createPlaceholder)(results[results.length - 1], mime)
-    } : {
-      files: results.map(createFile)
-    });
-  }).then(({
-    files,
-    placeholder
-  }) => {
     const srcset = files.map(f => f.src).join('+","+');
@@ -176,10 +161,55 @@ const images = files.map(f => `{path: ${f.path},width: ${f.width},height: ${f.height}}`).join(",");
           toString:function(){return ${firstImage.path}},
-          placeholder: ${placeholder},
+          ${placeholder ? "placeholder: " + placeholder + "," : ""}
           width: ${firstImage.width},
           height: ${firstImage.height}
-      }`);
+        }`);
   }).catch(err => loaderCallback(err));
 }
+/**
+ * **Run Transformations**
+ *
+ * For each size defined in the parameters, resize an image via the adapter
+ *
+ * @method transformations
+ *
+ * @return {Map} Results
+ */
 
+
+const transformations = async ({
+  img,
+  sizes,
+  mime,
+  outputPlaceholder,
+  placeholderSize,
+  adapterOptions
+}) => {
+  const metadata = await img.metadata();
+  let promises = [];
+  const widthsToGenerate = new Set();
+  sizes.forEach(size => {
+    const width = Math.min(metadata.width, parseInt(size, 10)); // Only resize images if they aren't an exact copy of one already being resized...
+
+    if (!widthsToGenerate.has(width)) {
+      widthsToGenerate.add(width);
+      promises.push(img.resize({
+        width,
+        mime,
+        options: adapterOptions
+      }));
+    }
+  });
+
+  if (outputPlaceholder) {
+    promises.push(img.resize({
+      width: placeholderSize,
+      options: adapterOptions,
+      mime
+    }));
+  }
+
+  return await Promise.all(promises);
+};
+
 const raw = true;
 exports.raw = raw;

package.json

 {
   "name": "responsive-loader",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A webpack loader for responsive images",
@@ -42,2 +42,10 @@ "main": "lib/cjs.js",
   },
+  "peerDependenciesMeta": {
+    "jimp": {
+      "optional": true
+    },
+    "sharp": {
+      "optional": true
+    }
+  },
   "dependencies": {
@@ -48,18 +56,18 @@ "loader-utils": "^2.0.0",
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-flow": "^7.10.4",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-flow": "^7.12.1",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.5.2",
-    "eslint": "^7.10.0",
+    "babel-jest": "^26.6.1",
+    "eslint": "^7.12.1",
     "eslint-plugin-flowtype": "^5.2.0",
-    "flow-bin": "^0.135.0",
-    "jest": "^26.5.2",
+    "flow-bin": "^0.137.0",
+    "jest": "^26.6.1",
     "jimp": "^0.16.1",
     "prettier": "^2.1.2",
     "prettier-eslint": "^11.0.0",
-    "sharp": "^0.26.1",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12"
+    "sharp": "^0.26.2",
+    "webpack": "^5.3.2",
+    "webpack-cli": "^4.1.0"
   },
@@ -66,0 +74,0 @@ "jest": {

README.md

@@ -6,3 +6,2 @@ # responsive-loader
 [![node][node]][node-url]
-[![deps][deps]][deps-url]
 
@@ -61,3 +60,3 @@ A webpack loader for responsive images. Creates multiple images from one source image, and returns a `srcset`. For more information on how to use `srcset`, read [Responsive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Browser support is [pretty good](http://caniuse.com/#search=srcset).
         test: /\.(jpe?g|png|webp)$/i,
-        use: [
+        use: {
           loader: 'responsive-loader',
@@ -68,3 +67,3 @@ options: {
           }
-        ]
+        }
       }
@@ -183,3 +182,3 @@ ]
 
-- `background: string` — Background fill when converting transparent to opaque images. E.g. `#FFFFFF`
+- `background: string` — Background fill when converting transparent to opaque images. E.g. `#FFFFFF` or `%23FFFFFF` for webpack > 5
 
@@ -186,0 +185,0 @@ - `format: webp` — Conversion to the `image/webp` format. Recognizes the `quality` option.

No alert changes

Improved metrics

Total package byte prevSize

37029

increased by1.43%

Lines of code

499

increased by5.27%

Worsened metrics

Number of lines in readme file

291

decreased by-0.34%

No dependency changes