build: bundling (#96)

* feat(modules): introduced other js module formats

* refactor: updated dependencies

* chore: code optimization

* chore: added use strict again

* chore(structure): moved that file back to the root

* refactor: providing a better sounding and differentiable method

* fix: missed to export the correct variable the latest

* docs(api): mentioning the public method

* refactor(browserlist): dropping IE8

* refactor: regenerated the JS files

* chore: removed previous build tools config

* test(xo): integrated some valid feedback

* test(xo): integrated some valid feedback

* chore: regenerated package-lock.json file

* chore: regenerated package-lock.json

* refactor: changed this to the new husky format

* chore: regenerated the package-lock file

* refactor(prettier): added relevant configuration

* refactor: regenerated the dist files

* chore: regenerated package-lock.json

* build: rebuild the distributed files

* build: prepared the next beta release

Co-authored-by: Maximilian Franzke <[email protected]>

.browserslistrc

@@ -0,0 +1 @@
+> 0.1%, IE >= 9

.gitignore

@@ -1,2 +1 @@
 node_modules
-config.codekit3

.npmignore

@@ -1,8 +1,7 @@
 demo
 webdriverio-tests
 .gitignore
-.huskyrc
-config.codekit3
+.husky
 commitlint.config.js
 wdio.conf-crossbrowsertesting.js
 .github

.prettierignore

@@ -1,2 +1,2 @@
-*.min.js
+dist
 package-lock.json

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+	"trailingComma": "es5"
+}

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 And the commit messages from [Conventional Commits](https://conventionalcommits.org) are being used.
 
+## [2.0.0-beta.1] - 2021-03-04
+
+### Changed
+
+- BREAKING CHANGE: Even also generate JS modules from now on supported by [microbundle](https://npmjs.com/microbundle), added the relevant property entries within the `package.json` directing to those files, that are now stored within the `dist/` folder (see [migration guide](MIGRATION.md) [#19](https://github.com/mfranzke/loading-attribute-polyfill/issues/19), [#87](https://github.com/mfranzke/loading-attribute-polyfill/pull/87), [#39](https://github.com/mfranzke/loading-attribute-polyfill/pull/39))
+
 ## [2.0.0-beta.0] - 2021-03-04
 
 ### Fixed

MIGRATION.md

@@ -1,6 +1,10 @@
 # Migration guidelines
 
-## 2.0.0 migration guide
+## 2.0.0-beta.1 migration guide
+
+We've switched from previously only providing the source and a minified version of the JS, to additionally provide the different relevant JavaScript formats especially regarding modules supported by [microbundle](https://npmjs.com/microbundle). Thatfor we even also changed the location of the generated files as well as pointed the relevant property entries within the `package.json` to those files. Please find all the relevant generated files in the `dist/` folder from now on.
+
+## 2.0.0-beta.0 migration guide
 
 You'll need to wrap the `<picture>` tag instead of the included HTML tags with `<noscript>`.
 

README.md

@@ -138,7 +138,11 @@ And the images are still displaying an error in the demo on IE9, as most likely
 
 ## API
 
-Nothing really, just integrate it as shown within the "installation" section, and it ~~will~~ should work out of the box.
+In case that you're dynamically adding HTML elements within the browser, you could call the following method with an included [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) object, like e.g.:
+
+```JavaScript
+loadingAttributePolyfill.prepareElement(document.querySelector('main noscript.loading-lazy'));
+```
 
 ## Demo
 

bower.json

@@ -33,7 +33,6 @@
 		"webdriverio-tests",
 		".gitignore",
 		".huskyrc",
-		"config.codekit3",
 		"commitlint.config.js",
 		"wdio.conf-crossbrowsertesting.js"
 	]

demo/index.html

@@ -161,10 +161,12 @@
 			integrity="sha384-0lS88tVtaG/wFBGhLbltQH+YsokYzFR53GbESKurNNjMEVpukFjECmLmebK9aMIf"
 			crossorigin="anonymous"
 		></script>
+		<script type="module" src="index.js"></script>
 		<!-- Even though that it's recommended to omit the type on the following script tag, we're keeping it for older browser compatibility -->
 		<script
 			type="text/javascript"
-			src="../loading-attribute-polyfill.min.js"
+			src="../dist/loading-attribute-polyfill.umd.js"
+			nomodule
 		></script>
 	</body>
 </html>

demo/index.js

@@ -0,0 +1,21 @@
+import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
+
+// Test for dynamically inserted images
+window.setTimeout(() => {
+	let child = document.createElement('div');
+	child.innerHTML = '<noscript class="loading-lazy"></noscript>';
+	child = child.firstChild;
+
+	let imageElement = document.createElement('img');
+	imageElement.setAttribute('src', 'https://via.placeholder.com/300');
+	imageElement.setAttribute('loading', 'lazy');
+	imageElement.setAttribute('alt', '..');
+	imageElement.setAttribute('width', '250');
+	imageElement.setAttribute('height', '150');
+	child.appendChild(imageElement);
+	document
+		.getElementsByTagName('main')[0]
+		.insertBefore(child, document.getElementsByTagName('main')[0].firstChild);
+
+	loadingAttributePolyfill.prepareElement(document.querySelector('main noscript.loading-lazy'));
+}, 5000);