refactor(code-formatting): run xo --fix

Author: mfranzke

demo/index.js

@@ -1,10 +1,10 @@
 import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
 
 // Test for dynamically inserted images
-let addImage = (event) => {
-	let divElement = document.createElement('div'),
-		noscriptElement = document.createElement('noscript'),
-		imageElement = document.createElement('img');
+const addImage = (event) => {
+	const divElement = document.createElement('div');
+	const noscriptElement = document.createElement('noscript');
+	const imageElement = document.createElement('img');
 
 	noscriptElement.classList.add('loading-lazy');
 
@@ -14,9 +14,9 @@ let addImage = (event) => {
 	imageElement.setAttribute('width', '250');
 	imageElement.setAttribute('height', '150');
 
-	noscriptElement.appendChild(imageElement);
+	noscriptElement.append(imageElement);
 
-	divElement.appendChild(noscriptElement);
+	divElement.append(noscriptElement);
 
 	document.querySelector('main').insertAdjacentElement('beforeend', divElement);
 

dist/loading-attribute-polyfill.js.map

@@ -10,11 +10,9 @@
  * Use an IntersectionObserver polyfill in case of IE11 support necessary.
  */
 
-'use strict';
-
 import './loading-attribute-polyfill.css';
 
-var config = {
+const config = {
 	intersectionObserver: {
 		// Start download if the item gets within 256px in the Y axis
 		rootMargin: '0px 0px 256px 0px',
@@ -25,7 +23,7 @@ var config = {
 };
 
 // Device/browser capabilities object
-var capabilities = {
+const capabilities = {
 	loading: {
 		image: 'loading' in HTMLImageElement.prototype,
 		iframe: 'loading' in HTMLIFrameElement.prototype,
@@ -39,7 +37,7 @@ if (window.NodeList && !NodeList.prototype.forEach) {
 }
 
 // Define according to browsers support of the IntersectionObserver feature (missing e.g. on IE11 or Safari 11)
-var intersectionObserver;
+let intersectionObserver;
 
 if ('IntersectionObserver' in window) {
 	intersectionObserver = new IntersectionObserver(
@@ -53,7 +51,7 @@ if ('IntersectionObserver' in window) {
  * @param {Object} lazyItem Current item to be restored after lazy loading.
  */
 function restoreSource(lazyItem) {
-	var srcsetItems = [];
+	let srcsetItems = [];
 
 	// Just in case the img is the decendent of a picture element, check for source tags
 	if (lazyItem.parentNode.tagName.toLowerCase() === 'picture') {
@@ -67,7 +65,7 @@ function restoreSource(lazyItem) {
 	srcsetItems.push(lazyItem);
 
 	// Not using .dataset within those upfollowing lines of code for polyfill independent compatibility down to IE9
-	srcsetItems.forEach(function (item) {
+	srcsetItems.forEach((item) => {
 		if (item.hasAttribute('data-lazy-srcset')) {
 			item.setAttribute('srcset', item.getAttribute('data-lazy-srcset'));
 			item.removeAttribute('data-lazy-srcset'); // Not using delete .dataset here for compatibility down to IE9
@@ -83,7 +81,7 @@ function restoreSource(lazyItem) {
  * @param {Object} lazyItemPicture Current <picture> item to be restored after lazy loading.
  */
 function removePlaceholderSource(lazyItemPicture) {
-	var placeholderSource = lazyItemPicture.querySelector(
+	const placeholderSource = lazyItemPicture.querySelector(
 		'source[data-lazy-remove]'
 	);
 
@@ -99,14 +97,14 @@ function removePlaceholderSource(lazyItemPicture) {
  * @param {Object} observer IntersectionObserver instance reference
  */
 function onIntersection(entries, observer) {
-	entries.forEach(function (entry) {
+	entries.forEach((entry) => {
 		// Mitigation for EDGE lacking support of .isIntersecting until v15, compare to e.g. https://github.com/w3c/IntersectionObserver/issues/211#issuecomment-309144669
 		if (entry.intersectionRatio === 0) {
 			return;
 		}
 
 		// If the item is visible now, load it and stop watching it
-		var lazyItem = entry.target;
+		const lazyItem = entry.target;
 
 		observer.unobserve(lazyItem);
 
@@ -122,9 +120,9 @@ function onPrinting() {
 		return;
 	}
 
-	var mediaQueryList = window.matchMedia('print');
+	const mediaQueryList = window.matchMedia('print');
 
-	mediaQueryList.addListener(function (mql) {
+	mediaQueryList.addListener((mql) => {
 		if (mql.matches) {
 			document
 				.querySelectorAll(
@@ -133,7 +131,7 @@ function onPrinting() {
 						config.lazyIframe +
 						'[data-lazy-src]'
 				)
-				.forEach(function (lazyItem) {
+				.forEach((lazyItem) => {
 					restoreSource(lazyItem);
 				});
 		}
@@ -147,14 +145,14 @@ function onPrinting() {
  */
 function getAndPrepareHTMLCode(noScriptTag) {
 	// The contents of a <noscript> tag are treated as text to JavaScript
-	var lazyAreaHtml = noScriptTag.textContent || noScriptTag.innerHTML;
+	let lazyAreaHtml = noScriptTag.textContent || noScriptTag.innerHTML;
 
-	var getImageWidth = lazyAreaHtml.match(/width=['"](\d+)['"]/) || false;
-	var temporaryImageWidth = getImageWidth[1] || 1;
-	var getImageHeight = lazyAreaHtml.match(/height=['"](\d+)['"]/) || false;
-	var temporaryImageHeight = getImageHeight[1] || 1;
+	const getImageWidth = lazyAreaHtml.match(/width=['"](\d+)['"]/) || false;
+	const temporaryImageWidth = getImageWidth[1] || 1;
+	const getImageHeight = lazyAreaHtml.match(/height=['"](\d+)['"]/) || false;
+	const temporaryImageHeight = getImageHeight[1] || 1;
 
-	var temporaryImage =
+	const temporaryImage =
 		'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 ' +
 		temporaryImageWidth +
 		' ' +
@@ -202,13 +200,13 @@ function getAndPrepareHTMLCode(noScriptTag) {
  */
 function prepareElement(noScriptTag) {
 	// Sticking the noscript HTML code in the innerHTML of a new <div> tag to 'load' it after creating that <div>
-	var lazyArea = document.createElement('div');
+	const lazyArea = document.createElement('div');
 
 	lazyArea.innerHTML = getAndPrepareHTMLCode(noScriptTag);
 
 	// Move all children out of the element
 	while (lazyArea.firstChild) {
-		var actualChild = lazyArea.firstChild;
+		const actualChild = lazyArea.firstChild;
 
 		if (
 			capabilities.scrolling &&
@@ -220,7 +218,7 @@ function prepareElement(noScriptTag) {
 				(actualChild.tagName.toLowerCase() === 'iframe' &&
 					!capabilities.loading.iframe))
 		) {
-			var observedElement =
+			const observedElement =
 				actualChild.tagName.toLowerCase() === 'picture'
 					? lazyArea.querySelector('img')
 					: actualChild;
@@ -238,8 +236,8 @@ function prepareElement(noScriptTag) {
 /**
  * Get all the <noscript> tags on the page, prepare each and any one of them and setup the printing
  */
-let prepareElements = () => {
-	var lazyLoadAreas = document.querySelectorAll('noscript.loading-lazy');
+const prepareElements = () => {
+	const lazyLoadAreas = document.querySelectorAll('noscript.loading-lazy');
 
 	lazyLoadAreas.forEach((element) => prepareElement(element));
 
@@ -252,19 +250,19 @@ let prepareElements = () => {
 if (/comp|inter/.test(document.readyState)) {
 	prepareElements();
 } else if ('addEventListener' in document) {
-	document.addEventListener('DOMContentLoaded', function () {
+	document.addEventListener('DOMContentLoaded', () => {
 		prepareElements();
 	});
 } else {
-	document.attachEvent('onreadystatechange', function () {
+	document.attachEvent('onreadystatechange', () => {
 		if (document.readyState === 'complete') {
 			prepareElements();
 		}
 	});
 }
 
 const loadingAttributePolyfill = {
-	prepareElement: prepareElement,
+	prepareElement,
 };
 
 export default loadingAttributePolyfill;

dist/loading-attribute-polyfill.modern.js

@@ -13,7 +13,7 @@ describe('demo page - img', () => {
 		element.waitForExist();
 
 		assert.strictEqual(
-			element.getAttribute('src').substr(0, 8),
+			element.getAttribute('src').slice(0, 8),
 			// Differentiate by feature detection / the loading capability in between the two different expected values
 			element.getProperty('loading') ? 'https://' : 'data:ima'
 		);
@@ -26,7 +26,7 @@ describe('demo page - img', () => {
 		// Let's use .getProperty('currentSrc') as soon as this feature is implemented
 		assert.strictEqual(
 			// We'd like to use the currentSrc property preferably, as it shows the correct image source usage
-			(element.getProperty('currentSrc') || element.getAttribute('src')).substr(
+			(element.getProperty('currentSrc') || element.getAttribute('src')).slice(
 				0,
 				8
 			),
@@ -42,7 +42,7 @@ describe('demo page - img', () => {
 		// Let's use .getProperty('currentSrc') as soon as this feature is implemented
 		assert.strictEqual(
 			// We'd like to use the currentSrc property preferably, as it shows the correct image source usage
-			(element.getProperty('currentSrc') || element.getAttribute('src')).substr(
+			(element.getProperty('currentSrc') || element.getAttribute('src')).slice(
 				0,
 				8
 			),
@@ -61,7 +61,7 @@ describe('demo page - iframe', () => {
 		element.waitForExist();
 
 		assert.strictEqual(
-			element.getAttribute('src').substr(0, 8),
+			element.getAttribute('src').slice(0, 8),
 			// Differentiate by feature detection / the loading capability in between the two different expected values
 			element.getProperty('loading') ? 'https://' : 'data:ima'
 		);
@@ -80,7 +80,7 @@ describe('demo page - scrolled - img', () => {
 
 		element.scrollIntoView();
 
-		assert.strictEqual(element.getAttribute('src').substr(0, 8), 'https://');
+		assert.strictEqual(element.getAttribute('src').slice(0, 8), 'https://');
 	});
 	it('should be loaded if scrolled below the fold (nested in picture)', () => {
 		const element = $('main picture img[loading="lazy"]');
@@ -92,7 +92,7 @@ describe('demo page - scrolled - img', () => {
 		// Let's use .getProperty('currentSrc') as soon as this feature is implemented
 		assert.strictEqual(
 			// We'd like to use the currentSrc property preferably, as it shows the correct image source usage
-			(element.getProperty('currentSrc') || element.getAttribute('src')).substr(
+			(element.getProperty('currentSrc') || element.getAttribute('src')).slice(
 				0,
 				8
 			),
@@ -109,7 +109,7 @@ describe('demo page - scrolled - img', () => {
 		// Let's use .getProperty('currentSrc') as soon as this feature is implemented
 		assert.strictEqual(
 			// We'd like to use the currentSrc property preferably, as it shows the correct image source usage
-			(element.getProperty('currentSrc') || element.getAttribute('src')).substr(
+			(element.getProperty('currentSrc') || element.getAttribute('src')).slice(
 				0,
 				8
 			),
@@ -127,6 +127,6 @@ describe('demo page - scrolled - iframe', () => {
 
 		element.scrollIntoView();
 
-		assert.strictEqual(element.getAttribute('src').substr(0, 8), 'https://');
+		assert.strictEqual(element.getAttribute('src').slice(0, 8), 'https://');
 	});
 });

dist/loading-attribute-polyfill.modern.js.map

@@ -205,11 +205,11 @@ exports.config = {
 	baseUrl: 'https://mfranzke.github.io/loading-attribute-polyfill/demo/',
 	//
 	// Default timeout for all waitFor* commands.
-	waitforTimeout: 10000,
+	waitforTimeout: 10_000,
 	//
 	// Default timeout in milliseconds for request
 	// if Selenium Grid doesn't send response
-	connectionRetryTimeout: 90000,
+	connectionRetryTimeout: 90_000,
 	//
 	// Default request retries count
 	connectionRetryCount: 3,
@@ -240,7 +240,7 @@ exports.config = {
 	// See the full list at http://mochajs.org/
 	mochaOpts: {
 		ui: 'bdd',
-		timeout: 60000,
+		timeout: 60_000,
 	},
 	//
 	// =====
@@ -361,5 +361,5 @@ exports.config = {
 	 */
 	// onReload: function(oldSessionId, newSessionId) {
 	// }
-	cbtTunnel: false, //set to true if a local connection is needed
+	cbtTunnel: false, // Set to true if a local connection is needed
 };