ab-interchange - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

package.json

 {
   "name": "ab-interchange",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "AB-interchange: While responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content.",
-  "main": "ab-interchange.js",
+  "main": "index.js",
   "repository": {
@@ -15,3 +15,4 @@ "type": "git",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack index.js dist/AB-interchange.js && webpack index.js dist/AB-interchange.min.js --optimize-minimize"
   },
@@ -33,5 +34,8 @@ "keywords": [
   "dependencies": {
-    "ab-mediaquery": "^2.4.0",
-    "another-brick": "^1.0.3"
+    "ab-mediaquery": "^2.6.0",
+    "another-brick": "^1.2.0"
+  },
+  "devDependencies": {
+    "webpack": "^3.3.0"
   }
 }

README.md

 # AB-interchange
 
-AB-interchange is a pure JavaScript file that makes possible to conditionnaly load:
+AB-interchange is a vanilla JavaScript that makes possible conditionnaly loading depending on media queries:
 
-- **img** (it can be also used as **picture** polyfill on unsupported browsers)
+- **img** (it can be also used as a **picture** polyfill on unsupported browsers)
 - **background-image**
 - **HTML content** (Ajax)
 
-It's damn small: **less than 1800 bytes** (uglyfied and GZipped, including AB.js and ab-mediaQuery).
+It's damn small: about **1800 bytes** (uglyfied and GZipped).
 
@@ -24,4 +24,2 @@ That plugin also has an **lazy-loading** option!
 
-The plugin is **CommonJS** and **AMD** compliant (UMD).
-
 It's used on French website [ENGIE](https://particuliers.engie.fr/).
@@ -31,11 +29,13 @@
 
-## Dependencies:
+## Setup
 
-- [AB (another-brick)](https://www.npmjs.com/package/ab-mediaquery)
-- [AB-mediaQueries v2](https://www.npmjs.com/package/ab-mediaquery)
+### Classic usage
+Just load the script on your page, just before `</body>`.
 
-You can either loads those scripts or import them (with browserify or webpack for ex.):
+**No need to load [another-brick](https://github.com/lordfpx/AB) or [AB-mediaQuery](https://github.com/lordfpx/AB-mediaQuery) since they are already included into AB-interchange. You can use their features of course (read respective readme).**
+
+### As a module
+The best solution is to use browserify or Webpack and import 'abInterchange'.
+
 ```
-import AB from 'another-brick';
-import abMediaQuery from 'ab-mediaquery';
 import abInterchange from 'ab-interchange';
@@ -52,3 +52,3 @@ ```
 
-## SETUP
+## Usage
 
@@ -60,7 +60,7 @@ Follow [AB-mediaQuery](https://www.npmjs.com/package/ab-mediaquery) readme to configure it the way you like depending on your needs. For exemple:
   bp: {
-    smallOnly: 'screen and (max-width: 767px)',
+    smallOnly:  'screen and (max-width: 767px)',
     mediumOnly: 'screen and (min-width: 768px) and (max-width: 1024px)',
-    medium: 'screen and (min-width: 768px)',
-    largeOnly: 'screen and (min-width: 1025px) and (max-width: 1280px)',
-    large: 'screen and (min-width: 1025px)'
+    medium:     'screen and (min-width: 768px)',
+    largeOnly:  'screen and (min-width: 1025px) and (max-width: 1280px)',
+    large:      'screen and (min-width: 1025px)'
   }
@@ -70,13 +70,12 @@ });
 
-Then you only need to initialize with `AB.interchange()` or with options:
+Then you only need to initialize with `AB.interchange()` or with some options:
 
 ```
 abInterchange({
-  mode      : 'img"
   lazy      : true, // or false
-  offscreen : 1.5,   // load items only when in the view + 0.5 by default
+  offscreen : 1.5,  // load items only when in the view + 0.5 by default
 });
 ```
 
-You can also use **data-ab-interchange** attribute to pass those otpions individually.
+Then use **data-ab-interchange** attribute to pass otpions individually.
 
@@ -83,0 +82,0 @@ **data-ab-interchange-src** attribute is where you define different sources and breakpoints defined with AB-mediaQuery.

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

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

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

Improved metrics

Total package byte prevSize

26470

increased by124.76%

Number of package files

7

increased by40%

Lines of code

505

increased by202.4%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of lines in readme file

136

decreased by-0.73%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedab-mediaquery@^2.6.0

• Updatedanother-brick@^1.2.0