responsive-loader - npm Package Compare versions

Comparing version 3.0.4 to 3.1.0

lib/index.js

@@ -8,3 +8,3 @@ "use strict";
 const cache_1 = require("./cache");
-const interpolateName_1 = require("./interpolateName");
+const loader_utils_1 = require("loader-utils");
 const parseQuery_1 = require("./parseQuery");
@@ -52,3 +52,3 @@ const DEFAULTS = {
     const createFile = ({ data, width, height }) => {
-        const fileName = (0, interpolateName_1.default)(this.resourcePath, this.resourceQuery, name, {
+        const fileName = (0, loader_utils_1.interpolateName)(this, name, {
             context: outputContext,
@@ -55,0 +55,0 @@ content: data.toString(),

lib/utils.js

@@ -124,7 +124,4 @@ "use strict";
         }
-        else if (configPublicPath.endsWith('/')) {
-            publicPath = configPublicPath + fileName;
-        }
         else {
-            publicPath = `${configPublicPath}/${fileName}`;
+            publicPath = path.posix.join(configPublicPath, fileName);
         }
@@ -131,0 +128,0 @@ publicPath = JSON.stringify(publicPath);

package.json

 {
   "name": "responsive-loader",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "A webpack loader for responsive images",
@@ -58,4 +58,5 @@ "main": "lib/cjs.js",
     "json5": "^2.2.1",
-    "schema-utils": "^4.0.0",
-    "make-dir": "^3.1.0"
+    "loader-utils": "^3.2.0",
+    "make-dir": "^3.1.0",
+    "schema-utils": "^4.0.0"
   },
@@ -62,0 +63,0 @@ "devDependencies": {

README.md

@@ -72,26 +72,30 @@ # responsive-loader
 
-## Usage
+### Typescript
 
-Add a rule for loading responsive images to your webpack config:
+```typescript
+//declare a module to your type definitions files *.d.ts 
+interface ResponsiveImageOutput {
+  src: string
+  srcSet: string
+  placeholder: string | undefined
+  images: { path: string; width: number; height: number }[]
+  width: number
+  height: number
+  toString: () => string
+}
 
-```js
-module.exports = {
-  // ...
-  module: {
-    rules: [
-      {
-        test: /\.(jpe?g|png|webp)$/i,
-        use: {
-          loader: 'responsive-loader',
-          options: {
-            // If you want to enable sharp support:
-            adapter: require('responsive-loader/sharp'),
-          },
-        },
-      },
-    ],
-  },
+declare module '*!rl' {
+  const src: ResponsiveImageOutput
+  export default src
 }
 ```
 
+```
+import responsiveImage from 'img/myImage.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048!rl';
+import responsiveImageWebp from 'img/myImage.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048&format=webp!rl';
+...
+```
+
+---
+
 Then import images in your JavaScript files:
@@ -106,4 +110,4 @@
 // responsiveImage.images => [{height: 150, path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}, {height: 300, path: '2fefae46cb857bc750fa5e5eed4a0cde-600.jpg', width: 600} ...]
-// responsiveImage.src => '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg'
-// responsiveImage.toString() => '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg'
+// responsiveImage.src => '2fefae46cb857bc750fa5e5eed4a0cde-2048.jpg'
+// responsiveImage.toString() => '2fefae46cb857bc750fa5e5eed4a0cde-2048.jpg'
 ...
@@ -166,3 +170,3 @@ <picture>
 
-You can also use JSON5 notation:
+You can also use [JSON5](https://json5.org/) notation:
 
@@ -246,3 +250,3 @@ ```
 
-Default cache directory might be ```.node_modules/.cache/responsive-loader```
+Default cache directory might be `.node_modules/.cache/responsive-loader`
 
@@ -261,4 +265,4 @@ ```js
               cacheDirectory: true,
-              publicPath: "/_next",
-              name: "static/media/[name]-[hash:7]-[width].[ext]",
+              publicPath: '/_next',
+              name: 'static/media/[name]-[hash:7]-[width].[ext]',
             },
@@ -335,6 +339,14 @@ },
 
-## See also
+## Usage Examples
 
-- Inspired by [resize-image-loader](https://github.com/Levelmoney/resize-image-loader), but simpler and without dependency on ImageMagick
+### Next.js
 
+- https://github.com/dazuaz/responsive-loader-example
+
+### Pug
+
+- [How to use responsive-loader with Pug](https://webdiscus.github.io/pug-plugin/responsive-image/). Thanks to the awesome [pug-loader](https://webdiscus.github.io/pug-plugin/hello-world/).
+
+Please submit your own example to add here
+
 [node]: https://img.shields.io/node/v/responsive-loader.svg
@@ -341,0 +353,0 @@ [node-url]: https://nodejs.org

No alert changes

Improved metrics

Number of lines in readme file

350

increased by3.55%

Worsened metrics

Total package byte prevSize

43681

decreased by-4.47%

Dependency count

7

increased by16.67%

Number of package files

13

decreased by-7.14%

Lines of code

677

decreased by-9.25%

Dependency changes

• + Addedloader-utils@^3.2.0

• + Addedloader-utils@3.3.1(transitive)