Merge pull request #276 from mfranzke/refactor/adapting-script-name

refactor: adapting script name

Author: mfranzke

README.md

@@ -63,14 +63,20 @@ You may optionally load via npm or Bower:
 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.js" async></script>
+<link
+	rel="stylesheet"
+	href="dist/loading-attribute-polyfill-with-serviceworker.css"
+/>
+<script
+	src="dist/loading-attribute-polyfill-with-serviceworker.js"
+	async
+></script>
 ```
 
 or e.g. within JS
 
 ```js
-import loadingAttributePolyfill from "node_modules/loading-attribute-polyfill-with-serviceworker/dist/loading-attribute-polyfill.module.js";
+import loadingAttributePolyfillWithServiceWorker from "node_modules/loading-attribute-polyfill-with-serviceworker/dist/loading-attribute-polyfill-with-serviceworker.module.js";
 ```
 
 ### Additional information on your image and document (iframe) references
@@ -87,13 +93,13 @@ And please "Avoid lazy-loading images that are in the first visible viewport", c
 
 ### Register a Service Worker
 
-Furthermore you would either need to integrate the code out of [loading-attribute-polyfill.sw.js](loading-attribute-polyfill.sw.js) to your existing [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker) or register one by yourself – please keep in mind that it's very important to add the feature detection to the Service Workers URL within the `navigator.serviceWorker.register` methods parameter, as we're transfering that information on the users enviroments capabilities via this way.
+Furthermore you would either need to integrate the code out of [loading-attribute-polyfill-with-serviceworker.sw.js](loading-attribute-polyfill-with-serviceworker.sw.js) to your existing [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker) or register one by yourself – please keep in mind that it's very important to add the feature detection to the Service Workers URL within the `navigator.serviceWorker.register` methods parameter, as we're transfering that information on the users enviroments capabilities via this way.
 
 ```javascript
 if ("serviceWorker" in navigator) {
 	// Differentiate in between the Service Worker scripts for the different browser capabilities / support
 	navigator.serviceWorker.register(
-		"loading-attribute-polyfill.sw.js?loading-images=" +
+		"loading-attribute-polyfill-with-serviceworker.sw.js?loading-images=" +
 			("loading" in HTMLImageElement.prototype) +
 			"&loading-iframes=" +
 			("loading" in HTMLIFrameElement.prototype)
@@ -174,7 +180,7 @@ if ("serviceWorker" in navigator) {
 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(
+loadingAttributePolyfillWithServiceWorker.prepareElement(
 	document.querySelector('main [loading="lazy"]')
 );
 ```
@@ -193,22 +199,22 @@ In general we recommend to use the Web Standard of customized built-in elements
 ```
 
 ```javascript
-import loadingAttributePolyfill from "loading-attribute-polyfill-with-serviceworker";
+import loadingAttributePolyfillWithServiceWorker from "loading-attribute-polyfill-with-serviceworker";
 
 // See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
 // for the list of other DOM interfaces.
 class LoadingImages extends HTMLImageElement {
 	constructor() {
 		super(); // Always call super() first in the constructor.
 		// Call for preparing the sample image element included the latest dynamically inserted
-		loadingAttributePolyfill.prepareElement(this);
+		loadingAttributePolyfillWithServiceWorker.prepareElement(this);
 	}
 }
 
 customElements.define("loading-image", LoadingImages, { extends: "img" });
 ```
 
-compare to the code within [demo/loading-attribute-polyfill.custom-builtin-extend.image.js](demo/loading-attribute-polyfill.custom-builtin-extend.image.js) (or [demo/loading-attribute-polyfill.custom-builtin-extend.iframe.js](demo/loading-attribute-polyfill.custom-builtin-extend.iframe.js) for iframe elements).
+compare to the code within [demo/loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.image.js](demo/loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.image.js) (or [demo/loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.iframe.js](demo/loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.iframe.js) for iframe elements).
 
 In case that you even also would like to support Safari / WebKit browsers, you'll need a polyfill as this engine doesn't support that part of the Custom Elements standard so far: <https://www.npmjs.com/package/@ungap/custom-elements>
 

demo/index.html

@@ -48,7 +48,10 @@
 				height: auto;
 			}
 		</style>
-		<link rel="stylesheet" href="../dist/loading-attribute-polyfill.css" />
+		<link
+			rel="stylesheet"
+			href="../dist/loading-attribute-polyfill-with-serviceworker.css"
+		/>
 
 		<!-- Include polyfill for custom elements and builtin extends support -->
 		<script
@@ -224,7 +227,7 @@ <h2>dynamic images &amp; iframes</h2>
 			if ("serviceWorker" in navigator) {
 				// Differentiate in between the Service Worker scripts for the different browser capabilities / support
 				navigator.serviceWorker.register(
-					"../loading-attribute-polyfill.sw.js?loading-images=" +
+					"../loading-attribute-polyfill-with-serviceworker.sw.js?loading-images=" +
 						("loading" in HTMLImageElement.prototype) +
 						"&loading-iframes=" +
 						("loading" in HTMLIFrameElement.prototype)

demo/index.js

@@ -42,6 +42,6 @@ document
 
 // Importing the two files which show how to register these elements as custom elements builtin extends
 /* eslint-disable import/no-unassigned-import, import/first */
-import './loading-attribute-polyfill.custom-builtin-extend.image.js';
-import './loading-attribute-polyfill.custom-builtin-extend.iframe.js';
+import './loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.image.js';
+import './loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.iframe.js';
 /* eslint-enable import/no-unassigned-import, import/first */

demo/loading-attribute-polyfill.custom-builtin-extend.iframe.js renamed to demo/loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.iframe.js

@@ -1,12 +1,12 @@
-import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
+import loadingAttributePolyfillWithServiceWorker from '../dist/loading-attribute-polyfill-with-serviceworker.module.js';
 
 // See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
 // for the list of other DOM interfaces.
 class LoadingIframes extends HTMLIFrameElement {
 	constructor() {
 		super(); // Always call super() first in the constructor.
 		// Call for preparing the sample iframe element included the latest dynamically inserted
-		loadingAttributePolyfill.prepareElement(this);
+		loadingAttributePolyfillWithServiceWorker.prepareElement(this);
 	}
 }
 

demo/loading-attribute-polyfill.custom-builtin-extend.image.js renamed to demo/loading-attribute-polyfill-with-serviceworker.custom-builtin-extend.image.js

@@ -1,12 +1,12 @@
-import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
+import loadingAttributePolyfillWithServiceWorker from '../dist/loading-attribute-polyfill-with-serviceworker.module.js';
 
 // See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
 // for the list of other DOM interfaces.
 class LoadingImages extends HTMLImageElement {
 	constructor() {
 		super(); // Always call super() first in the constructor.
 		// Call for preparing the sample image element included the latest dynamically inserted
-		loadingAttributePolyfill.prepareElement(this);
+		loadingAttributePolyfillWithServiceWorker.prepareElement(this);
 	}
 }