responsive-loader - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

index.js

@@ -18,3 +18,4 @@ /* eslint-disable */
   var query = loaderUtils.parseQuery(this.query);
-  var sizes = query.sizes;
+  var sizes = query.sizes || query.size || [Number.MAX_SAFE_INTEGER];
+  var singleImage = !!query.size || (!query.sizes && !query.size);
   var name = query.name || '[hash]-[width].';
@@ -54,3 +55,3 @@ // JPEG compression
 
-            var fileName = loaderUtils.interpolateName(loaderContext, '[hash]-[width].' + ext, {content: content}).replace(/\[width\]/g, width);
+            var fileName = loaderUtils.interpolateName(loaderContext, '[hash]-[width].' + ext, {content: buf}).replace(/\[width\]/ig, width);
 
@@ -69,3 +70,3 @@ loaderContext.emitFile(fileName, buf);
     
-    sizes.forEach(function(size) {
+    (Array.isArray(sizes) ? sizes : [sizes]).forEach(function(size) {
       var width = Math.min(img.bitmap.width, parseInt(size, 10));
@@ -77,2 +78,7 @@
     q.awaitAll(function(err, files) {
+      // Shortcut for single images
+      if (singleImage) {
+        return loaderCallback(null, 'module.exports = ' + files[0].path);
+      }
+
       var srcset = files.map(function(f) {
@@ -79,0 +85,0 @@ return f.src;

package.json

 {
   "name": "responsive-loader",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A webpack loader for responsive images",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -21,8 +21,26 @@ # responsive-loader
 // responsiveImage.images => [{path: '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg', width: 100}, {path: '2fefae46cb857bc750fa5e5eed4a0cde-200.jpg', width: 200}, {path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}]
-React.render(<img srcSet={responsiveImage.srcSet} src=[responsiveImage.images[0].path] />, el);
+React.render(<img srcSet={responsiveImage.srcSet} src={responsiveImage.images[0].path} />, el);
 ```
 
+Alternatively, you can resize a single image. Note that responsive-loader returns only a path string in this case (no `srcSet`). This is useful for CSS.
+
+```js
+const responsiveImage = require('responsive?size=100!myImage.jpg');
+
+// responsiveImage => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
+React.render(<img src={responsiveImage} />, el);
+```
+
+```css
+.myImage { background: url('responsive?size=1140!myImage.jpg'); }
+
+@media (max-width: 480px) {
+  .myImage { background: url('responsive?size=480!myImage.jpg'); }
+}
+```
+
 ### Options
 
 - `sizes: array`: 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)
+- `size: integer`: 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)
 - `quality: integer`: JPEG compression quality; defaults to `95`
@@ -35,3 +53,2 @@ - `ext: string`: either `png`, `jpg`, or `gif`; use to convert to another format; defaults to original file's extension
 - Doesn't support `1x`, `2x` sizes.
-- The image hash is based on the original image's content plus a size suffix, e.g. `2fefae46cb857bc750fa5e5eed4a0cde-100.jpg`, `2fefae46cb857bc750fa5e5eed4a0cde-200.jpg`, etc.
 
@@ -38,0 +55,0 @@ ## See also

No alert changes

Improved metrics

Total package byte prevSize

7924

increased by11.28%

Lines of code

76

increased by7.04%

Number of lines in readme file

57

increased by42.5%

No dependency changes