responsive-loader - npm Package Compare versions

Comparing version 0.8.0-alpha.1 to 1.0.0-rc.1

CHANGELOG.md

 # Change Log
 
-## 0.7.0
+## v1.0.0 [Unreleased]
 
+### New
+
+- 🚀 Added support for [sharp](https://github.com/lovell/sharp) ([#19](https://github.com/herrstucki/responsive-loader/pull/29))
+
+### Breaking
+
+Removed support for webpack 1! Please upgrade to webpack >= 2.
+
+The syntax to import images has changed. The query part now comes _after_ the resource (the image) instead of the loader.
+
+```diff
+- require('responsive-loader?size=100!some-image.jpg')
++ require('responsive-loader!some-image.jpg?size=100')
+```
+
+That means if `responsive-loader` is configured in your webpack-config, it's possible to specify image-specific options without having to add the loader part to the import path. For example:
+
+```js
+// webpack.config.js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.jpg$/,
+        loader: 'responsive-loader',
+        options: {
+          size: 1000
+          //...
+        }
+      }
+    ]
+  },
+}
+
+// some-file.js
+const image1000 = require('some-image.jpg') // will have size 1000 from the config
+const image500 = require('some-image.jpg?size=500')
+```
+
+## v0.7.0
+
 - Add `placeholder` option ([#16](https://github.com/herrstucki/responsive-loader/pull/16))
 - Add `width` and `height` attributes to output ([#19](https://github.com/herrstucki/responsive-loader/pull/19))
 
-## 0.6.1
+## v0.6.1
 
 - Declare default `name`, `context`, `quality`, and `background` through webpack options when they're not specified in the loader query ([#12](https://github.com/herrstucki/responsive-loader/pull/12)).
 
-## 0.6.0
+## v0.6.0
 
@@ -17,7 +59,7 @@ - Add linting ([#7](https://github.com/herrstucki/responsive-loader/pull/7))
 
-## 0.5.3
+## v0.5.3
 
 - Fix wrong callback being called on file load error ([#6](https://github.com/herrstucki/responsive-loader/pull/6))
 
-## 0.5.2
+## v0.5.2
 
@@ -27,7 +69,7 @@ - Added tests!
 
-## 0.5.1
+## v0.5.1
 
 - Optimization: skip resizing images of the same size ([#5](https://github.com/herrstucki/responsive-loader/pull/5))
 
-## 0.5.0
+## v0.5.0
 
@@ -34,0 +76,0 @@ Using the `size` option for getting only one resized image no longer just returns a string but the same object structure as when using `sizes`. The difference is, that when `toString()` is called on that object, it will return the path of the first resized image.

lib/index.js

@@ -15,8 +15,9 @@ 'use strict';
   var loaderCallback = this.async();
-  var config = loaderUtils.getLoaderConfig(this, 'responsiveLoader');
+  var parsedResourceQuery = this.resourceQuery ? loaderUtils.parseQuery(this.resourceQuery) : {};
+  var config = Object.assign({}, loaderUtils.getOptions(this), parsedResourceQuery);
   var sizes = config.size || config.sizes || [Number.MAX_SAFE_INTEGER];
   var name = config.name || '[hash]-[width].';
   var outputContext = config.context || '';
-  var outputPlaceholder = config.placeholder || false;
-  var placeholderSize = config.placeholderSize || 40;
+  var outputPlaceholder = Boolean(config.placeholder) || false;
+  var placeholderSize = parseInt(config.placeholderSize, 10) || 40;
   // JPEG compression
@@ -56,3 +57,3 @@ var quality = parseInt(config.quality, 10) || 95;
       content: data
-    }).replace(/\[width\]/ig, width);
+    }).replace(/\[width\]/ig, width).replace(/\[height\]/ig, height);
 
@@ -59,0 +60,0 @@ loaderContext.emitFile(fileName, data);

package.json

 {
   "name": "responsive-loader",
-  "version": "0.8.0-alpha.1",
+  "version": "1.0.0-rc.1",
   "description": "A webpack loader for responsive images",
@@ -11,11 +11,11 @@ "main": "lib/index.js",
     "clean-test": "rm -f test/**/build/*.jpg test/**/build/*.png test/**/build/**/*.jpg test/**/build/**/*.png test/**/build/test.js",
-    "build-test-jimp": "webpack --config=./test/jimp/webpack.config.js",
-    "build-test-sharp": "webpack --config=./test/sharp/webpack.config.js",
     "build": "babel src --out-dir lib",
     "lint": "eslint --ignore-path=.gitignore .",
-    "test": "npm run build && npm run clean-test && npm run build-test-jimp && npm run build-test-sharp && jest",
+    "test": "flow && yarn run build && yarn run clean-test && webpack --config=./test/jimp/webpack.config.js && webpack --config=./test/sharp/webpack.config.js && jest",
     "shipit": "scripts/publish"
   },
   "files": [
-    "lib"
+    "lib",
+    "jimp.js",
+    "sharp.js"
   ],
@@ -39,3 +39,3 @@ "repository": {
   "dependencies": {
-    "loader-utils": "^0.2.16"
+    "loader-utils": "^1.1.0"
   },
@@ -45,10 +45,14 @@ "devDependencies": {
     "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-jest": "^20.0.3",
     "babel-preset-env": "^1.1.6",
+    "babel-preset-flow": "^6.23.0",
     "eslint": "^3.2.2",
     "eslint-config-interactivethings": "^3.0.0",
     "eslint-plugin-react": "^5.2.2",
-    "jest": "^18.1.0",
+    "flow-bin": "^0.48.0",
+    "jest": "^20.0.4",
     "jimp": "^0.2.21",
-    "sharp": "^0.17.0",
-    "webpack": "^1.13.0"
+    "sharp": "^0.18.1",
+    "webpack": "^3.0.0"
   },
@@ -55,0 +59,0 @@ "peerDependencies": {

README.md

@@ -9,2 +9,4 @@ # responsive-loader
 
+### With jimp
+
 ```
@@ -14,9 +16,59 @@ npm install responsive-loader jimp --save-dev
 
-responsive-loader uses [jimp](https://github.com/oliver-moran/jimp), a pure JS image manipulation library (so no other dependencies, yay :v:), to transform images which needs to be installed alongside responsive-loader.
+Per default, responsive-loader uses [jimp](https://github.com/oliver-moran/jimp) to transform images. which needs to be installed alongside responsive-loader. Because jimp is written entirely in JavaScript and doesn't have any native dependencies it will work anywhere. The main drawback is that it's pretty slow.
 
+### With sharp
+
+```
+npm install responsive-loader sharp --save-dev
+```
+
+For [super-charged performance](http://sharp.dimens.io/en/stable/performance/), responsive-loader also works with [sharp](https://github.com/lovell/sharp). It's recommended to use sharp if you have lots of images to transform.
+
+If you want to use sharp, you need to configure responsive-loader to use its adapter:
+
+```diff
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.(jpe?g|png)$/i,
+        loader: 'responsive-loader',
+        options: {
++         adapter: require('responsive-loader/sharp')
+        }
+      }
+    ]
+  },
+}
+```
+
+
 ## Usage
 
+Add a rule for loading responsive images to your webpack config:
+
 ```js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.(jpe?g|png)$/i,
+        loader: 'responsive-loader',
+        options: {
+          // If you want to enable sharp support:
+          // adapter: require('responsive-loader/sharp')
+        }
+      }
+    ]
+  },
+}
+```
+
+Then import images in your JavaScript files:
+
+```js
 // Outputs three images with 100, 200, and 300px widths
-const responsiveImage = require('responsive?sizes[]=100,sizes[]=200,sizes[]=300!myImage.jpg');
+const responsiveImage = require('myImage.jpg?sizes[]=100,sizes[]=200,sizes[]=300');
 
@@ -36,6 +88,6 @@ // responsiveImage.srcSet => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg 100w,2fefae46cb857bc750fa5e5eed4a0cde-200.jpg 200w,2fefae46cb857bc750fa5e5eed4a0cde-300.jpg 300w'
 ```css
-.myImage { background: url('responsive?size=1140!myImage.jpg'); }
+.myImage { background: url('myImage.jpg?size=1140'); }
 
 @media (max-width: 480px) {
-  .myImage { background: url('responsive?size=480!myImage.jpg'); }
+  .myImage { background: url('myImage.jpg?size=480'); }
 }
@@ -46,3 +98,3 @@ ```
 // Outputs placeholder image as a data URI, and three images with 100, 200, and 300px widths
-const responsiveImage = require('responsive?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300!myImage.jpg');
+const responsiveImage = require('myImage.jpg?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300');
 
@@ -82,12 +134,14 @@ // responsiveImage.placeholder => 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAIBAQE…'
   module: {
-    loaders: [{
-      test: /\.(jpe?g|png)$/i,
-      loader: 'responsive'
-    ]}
+    rules: [
+      {
+        test: /\.(jpe?g|png)$/i,
+        loader: 'responsive-loader',
+        options: {
+          sizes: [300, 600, 1200, 2000],
+          placeholder: true,
+          placeholderSize: 50
+        }
+      }
+    ]
   },
-  responsiveLoader: {
-    sizes: [300, 600, 1200, 2000],
-    placeholder: true,
-    placeholderSize: 50
-  }
 }
@@ -94,0 +148,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18604

increased by15.96%

Number of package files

9

increased by28.57%

Lines of code

181

increased by1.69%

Number of lines in readme file

152

increased by55.1%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

14

increased by40%

Dependency changes

• + Addedbig.js@5.2.2(transitive)

• + Addedemojis-list@3.0.0(transitive)

• + Addedjson5@1.0.2(transitive)

• + Addedloader-utils@1.4.2(transitive)

• + Addedminimist@1.2.8(transitive)

• - Removedbig.js@3.2.0(transitive)

• - Removedemojis-list@2.1.0(transitive)

• - Removedjson5@0.5.1(transitive)

• - Removedloader-utils@0.2.17(transitive)

• - Removedobject-assign@4.1.1(transitive)

• Updatedloader-utils@^1.1.0