loading-attribute-polyfill - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

@@ -18,2 +18,25 @@ # Changelog
 
+## [2.0.2] - 2022-04-10
+
+It's polyfills birthday (okay, it has been yesterday), so I did a lot of housekeeping and even also released a new version of the polyfill with another concept (using Service Worker to prevent loading images and iframes contents). Check it out and evaluate its usage in your project: <https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker>
+
+### Added
+
+- Information on the new complementary polyfill <https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker>
+
+### Changed
+
+- build: updated gitignore file according to githubs default content
+- documentation: a lot of simple optimizations, like e.g. added further notice on the users browser capabilities
+- updated a lot of `devDependencies`
+- `master` to `main` as the default branch
+- using Ndoe 16 now (for development and CI/CD)
+- replaced dependencies update status badge
+
+### Fixed
+
+- documentation: crossbrowsertestings logo URL
+- documentation: codacy badge URL
+- test: webdriverio tests
+
 ## [2.0.1] - 2021-05-13
@@ -20,0 +43,0 @@

package.json

 {
   "name": "loading-attribute-polyfill",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.",
@@ -25,3 +25,4 @@ "source": "./src/loading-attribute-polyfill.js",
     "javascript",
-    "html"
+    "html",
+    "front-end"
   ],
@@ -33,17 +34,16 @@ "bugs": {
   "devDependencies": {
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
-    "@wdio/cli": "^7.5.7",
-    "@wdio/dot-reporter": "^7.5.7",
-    "@wdio/local-runner": "^7.5.7",
-    "@wdio/mocha-framework": "^7.5.3",
-    "@wdio/sync": "^7.5.7",
-    "html-validate": "^4.10.1",
-    "husky": "^6.0.0",
-    "microbundle": "^0.13.0",
+    "@commitlint/cli": "^16.0.0",
+    "@commitlint/config-conventional": "^16.0.0",
+    "@wdio/cli": "^7.19.3",
+    "@wdio/dot-reporter": "^7.19.1",
+    "@wdio/local-runner": "^7.19.3",
+    "@wdio/mocha-framework": "^7.19.3",
+    "html-validate": "^6.0.2",
+    "husky": "^7.0.1",
+    "microbundle": "^0.14.1",
     "np": "^7.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.3.0",
-    "pretty-quick": "^3.1.0",
-    "xo": "^0.40.1"
+    "prettier": "2.6.2",
+    "pretty-quick": "^3.1.1",
+    "xo": "^0.48.0"
   },
@@ -50,0 +50,0 @@ "scripts": {

README.md

 # loading="lazy" attribute polyfill
 
-[![MIT license](https://img.shields.io/npm/l/loading-attribute-polyfill.svg "license badge")](https://opensource.org/licenses/mit-license.php)
+[![Financial Contributors on Open Collective](https://opencollective.com/loading-attribute-polyfill/all/badge.svg?label=financial+contributors)](https://opencollective.com/loading-attribute-polyfill) [![MIT license](https://img.shields.io/npm/l/loading-attribute-polyfill.svg "license badge")](https://opensource.org/licenses/mit-license.php)
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/loading-attribute-polyfill)](https://bundlephobia.com/result?p=loading-attribute-polyfill)
 [![Total downloads ~ Npmjs](https://img.shields.io/npm/dt/loading-attribute-polyfill.svg "Count of total downloads – NPM")](https://npmjs.com/package/loading-attribute-polyfill 'loading="lazy"-attribute polyfill – on NPM')
 [![jsDelivr CDN downloads](https://data.jsdelivr.com/v1/package/npm/loading-attribute-polyfill/badge "Count of total downloads – jsDelivr")](https://www.jsdelivr.com/package/npm/loading-attribute-polyfill "loading-attribute polyfill – on jsDelivr")
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/16c763924903400ca82cfed618a82a6e)](https://app.codacy.com/app/mfranzke_2/loading-attribute-polyfill?utm_source=github.com&utm_medium=referral&utm_content=mfranzke/loading-attribute-polyfill&utm_campaign=Badge_Grade_Dashboard)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/4f4cc692565d425c82860d18a11f17d4)](https://www.codacy.com/gh/mfranzke/loading-attribute-polyfill/dashboard)
 [![Known Vulnerabilities](https://snyk.io/test/github/mfranzke/loading-attribute-polyfill/badge.svg?targetFile=package.json)](https://snyk.io/test/github/mfranzke/loading-attribute-polyfill?targetFile=package.json)
-[![CodeQL](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml/badge.svg?branch=master)](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml)
+[![CodeQL](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml/badge.svg?branch=main)](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml)
 [![GitHub Super-Linter](https://github.com/mfranzke/loading-attribute-polyfill/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/linter.yml)
-[![dependencies Status](https://david-dm.org/mfranzke/loading-attribute-polyfill/status.svg "Count of dependencies")](https://david-dm.org/mfranzke/loading-attribute-polyfill "loading-attribute polyfill – on david-dm")
+[![Dependencies Status](https://requires.io/github/mfranzke/loading-attribute-polyfill/requirements.svg?branch=main)](https://requires.io/github/mfranzke/loading-attribute-polyfill/requirements/?branch=main)
 [![loading-attribute-polyfill on Npmjs](https://img.shields.io/npm/v/loading-attribute-polyfill.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/loading-attribute-polyfill 'loading="lazy"-attribute polyfill – on NPM')
@@ -33,2 +33,3 @@ [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 - SEO & crawlers: the image and iframe contents aren't being hidden from crawlers that aren't capable of scrolling.
+- Supporting HTML generating JavaScript frameworks through a method provided to reinit its functionality (see "Another solution, especially in combination with JavaScript framework usage" as well)
 
@@ -42,2 +43,12 @@ ## Core concepts
 
+## Another solution, especially in combination with JavaScript framework usage
+
+We're even also providing [another solution](https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker), which main architectural decision is that we're using Service Worker to intercept the image and iframe contents network requests there. This comes with some aspects that are important to mention, that might be either acceptable (have a look at the [other solution](https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker)) or not (stay with this one) on your requirements and technical context.
+
+- Service Workers only run over **HTTPS**, for security reasons
+- Service Worker need to get **registered on first page visit**
+- Only works on **same domain** network requests
+
+Whereas the first topic might not be a problem (anymore) on most websites – as this should be the de-facto standard nowadays – the second and third might be acceptable in your context, as this polyfill behaves as a progressive enhancement to provide the expected functionality even for non-supporting browsers both only on seconds pages request and any revisits and for same origin image and contents (iframe) requests even only.
+
 ## Installation
@@ -52,9 +63,11 @@
 
-You could even load the polyfill asynchronously: <https://output.jsbin.com/codelib/1>
+You could load the polyfill asynchronously as well: <https://output.jsbin.com/codelib/1>
 
+## Integration
+
 Include one of the provided JavaScript files depending on your setup plus the CSS file:
 
 ```html
+<link rel="stylesheet" href="dist/loading-attribute-polyfill.css" />
 <script src="dist/loading-attribute-polyfill.umd.js" async></script>
-<link rel="stylesheet" href="dist/loading-attribute-polyfill.css" />
 ```
@@ -213,3 +226,3 @@
 
-[![CrossBrowserTesting](https://crossbrowsertesting.com/blog/wp-content/uploads/2017/09/cbt-wp-logo.png "CrossBrowserTesting")](https://crossbrowsertesting.com)
+[![CrossBrowserTesting](https://static1.smartbear.co/crossbrowsertesting/media/site/cbt-smartbear-logo.svg "CrossBrowserTesting")](https://crossbrowsertesting.com)
 
@@ -231,1 +244,31 @@ ## Things to keep in mind
 And if you do like this polyfill, please consider even also having a look at the other polyfill we've developed: <https://github.com/mfranzke/datalist-polyfill/>
+
+## Contributors
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="https://github.com/mfranzke/loading-attribute-polyfill/graphs/contributors"><img src="https://opencollective.com/loading-attribute-polyfill/contributors.svg?width=890&button=false" /></a>
+
+### Financial Contributors
+
+Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/loading-attribute-polyfill/contribute)]
+
+#### Individuals
+
+<a href="https://opencollective.com/loading-attribute-polyfill"><img src="https://opencollective.com/loading-attribute-polyfill/individuals.svg?width=890"></a>
+
+#### Organizations
+
+Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/loading-attribute-polyfill/contribute)]
+
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/0/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/0/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/1/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/1/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/2/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/2/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/3/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/3/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/4/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/4/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/5/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/5/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/6/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/6/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/7/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/7/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/8/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/8/avatar.svg"></a>
+<a href="https://opencollective.com/loading-attribute-polyfill/organization/9/website"><img src="https://opencollective.com/loading-attribute-polyfill/organization/9/avatar.svg"></a>

src/loading-attribute-polyfill.js

@@ -69,2 +69,3 @@ /*
 	srcsetItems.forEach((item) => {
+		/* eslint-disable unicorn/prefer-dom-node-dataset */
 		if (item.hasAttribute('data-lazy-srcset')) {
@@ -74,6 +75,9 @@ item.setAttribute('srcset', item.getAttribute('data-lazy-srcset'));
 		}
+		/* eslint-enable unicorn/prefer-dom-node-dataset */
 	});
 
+	/* eslint-disable unicorn/prefer-dom-node-dataset */
 	lazyItem.setAttribute('src', lazyItem.getAttribute('data-lazy-src'));
 	lazyItem.removeAttribute('data-lazy-src'); // Not using delete .dataset here for compatibility down to IE9
+	/* eslint-enable unicorn/prefer-dom-node-dataset */
 }
@@ -80,0 +84,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

Improved metrics

Total package byte prevSize

107621

increased by5.27%

Dev dependency count

14

decreased by-6.67%

Lines of code

297

increased by0.34%

Number of lines in readme file

270

increased by18.94%

Worsened metrics

Number of package files

25

decreased by-7.41%

No dependency changes