yall-js - npm Package Compare versions

Comparing version 2.3.1 to 2.3.2

dist/yall.js

 'use strict';
 
 function yall (options) {
-  if (!options) {
-    options = {};
-  }
+  options = options || {};
 
-  const intersectionObserverSupport = "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
-  const idleCallbackSupport = "requestIdleCallback" in window;
+  // Now that version 2 is basically sewn up, I'm using shorthands to go for the
+  // gold as much as possible. I avoided this in the past to keep the codebase
+  // maintainable, but with version 3 in development, I'm not as concerned.
+  const io = "IntersectionObserver";
+  const mo = "MutationObserver";
+  const o = "observe";
+  const d = document;
+  const w = window;
+  const fe = "forEach";
+  const l = "length";
+  const qsa = "querySelectorAll";
+  const cl = "classList";
+  const ric = "requestIdleCallback";
+  const gbcr = "getBoundingClientRect";
+  const el = "EventListener";
+  const t = "threshold";
+  const r = "remove";
+
+  const intersectionObserverSupport = io in w && `${io}Entry` in w && "intersectionRatio" in w[`${io}Entry`].prototype && "isIntersecting" in w[`${io}Entry`].prototype;
+  const idleCallbackSupport = ric in w;
   const eventsToBind = [
-    [document, "scroll"],
-    [document, "touchmove"],
-    [window, "resize"],
-    [window, "orientationchange"]
+    [d, "scroll"],
+    [d, "touchmove"],
+    [w, "resize"],
+    [w, "orientationchange"]
   ];
@@ -19,4 +35,4 @@ const lazyClass = options.lazyClass || "lazy";
   const idleLoadTimeout = "idleLoadTimeout" in options ? options.idleLoadTimeout : 100;
-  const threshold = "threshold" in options ? options.threshold : 200;
-  const observeChanges = options.observeChanges || false;
+  const threshold = t in options ? options[t] : 200;
+  const observeChanges = options[`${o}Changes`] || false;
   const selectorString = `img.${lazyClass},video.${lazyClass},iframe.${lazyClass},.${lazyBackgroundClass}`;
@@ -31,43 +47,27 @@ const idleCallbackOptions = {
   const yallLoad = element => {
-    switch (element.nodeName) {
-      case "IMG":
-        let parentElement = element.parentNode;
+    const parentNode = element.parentNode;
+    let sourceElements;
 
-        // Is the parent element a <picture>?
-        if (parentElement.nodeName == "PICTURE") {
-          sliceCall(parentElement.querySelectorAll("source")).forEach(source => {
-            yallFlipDataAttrs(source);
-          });
-        }
+    if (parentNode.nodeName == "PICTURE") {
+      sourceElements = sliceCall(parentNode[qsa]("source"));
+    }
 
-        yallFlipDataAttrs(element);
+    if (element.nodeName == "VIDEO") {
+      sourceElements = sliceCall(element[qsa]("source"));
+    }
 
-        break;
+    for (let sourceElementIndex in sourceElements) {
+      yallFlipDataAttrs(sourceElements[sourceElementIndex]);
+    }
 
-      case "VIDEO":
-        sliceCall(element.querySelectorAll("source")).forEach(source => {
-          yallFlipDataAttrs(source);
-        });
+    yallFlipDataAttrs(element);
 
-        // We didn't need this before, but with the addition of lazy loading
-        // `poster` images, we need to run the flip attributes function on the
-        // video element itself so we can trigger lazy loading behavior on those.
-        yallFlipDataAttrs(element);
-
-        if (element.autoplay) {
-          element.load();
-        }
-
-        break;
-
-      case "IFRAME":
-        yallFlipDataAttrs(element);
-
-        break;
+    if (element.autoplay) {
+      element.load();
     }
 
     // Lazy load CSS background images
-    if (element.classList.contains(lazyBackgroundClass)) {
-      element.classList.remove(lazyBackgroundClass);
-      element.classList.add(options.lazyBackgroundLoaded || "lazy-bg-loaded");
+    if (element[cl].contains(lazyBackgroundClass)) {
+      element[cl][r](lazyBackgroundClass);
+      element[cl].add(options.lazyBackgroundLoaded || "lazy-bg-loaded");
     }
@@ -79,3 +79,3 @@ };
   const yallFlipDataAttrs = element => {
-    ["srcset", "src", "poster"].forEach(dataAttr => {
+    ["srcset", "src", "poster"][fe](dataAttr => {
       if (dataAttr in element.dataset) {
@@ -92,10 +92,10 @@ element[dataAttr] = element.dataset[dataAttr];
 
-    if (!active && lazyElements.length) {
+    if (!active && lazyElements[l]) {
       active = true;
 
       setTimeout(() => {
-        lazyElements.forEach(lazyElement => {
-          if (lazyElement.getBoundingClientRect().top <= (window.innerHeight + threshold) && lazyElement.getBoundingClientRect().bottom >= -threshold && getComputedStyle(lazyElement).display != "none") {
+        lazyElements[fe](lazyElement => {
+          if (lazyElement[gbcr]().top <= (innerHeight + threshold) && lazyElement[gbcr]().bottom >= -threshold && getComputedStyle(lazyElement).display != "none") {
             if (idleCallbackSupport && idleLoadTimeout) {
-              requestIdleCallback(() => {
+              w[ric](() => {
                 yallLoad(lazyElement);
@@ -107,3 +107,3 @@ }, idleCallbackOptions);
 
-            lazyElement.classList.remove(lazyClass);
+            lazyElement[cl][r](lazyClass);
             lazyElements = lazyElements.filter(element => element != lazyElement);
@@ -115,6 +115,6 @@ }
 
-        if (!lazyElements.length && !observeChanges) {
-          eventsToBind.forEach(eventPair => {
-            eventPair[0].removeEventListener(eventPair[1], yallBack);
-          });
+        if (!lazyElements[l] && !observeChanges) {
+          for (let eventIndex in eventsToBind) {
+            eventsToBind[eventIndex][0][`remove${el}`](eventsToBind[eventIndex][1], yallBack);
+          }
         }
@@ -125,3 +125,3 @@ }, "throttleTime" in options ? options.throttleTime : 200);
 
-  let lazyElements = sliceCall(document.querySelectorAll(selectorString));
+  let lazyElements = sliceCall(d[qsa](selectorString));
 
@@ -131,5 +131,5 @@ // If the current user agent is a known crawler, immediately load all media
   if (/(google|bing|yandex|duckduck)bot/i.test(navigator.userAgent)) {
-    lazyElements.forEach(lazyElement => {
-      yallLoad(lazyElement);
-    });
+    for (let lazyElementIndex in lazyElements) {
+      yallLoad(lazyElements[lazyElementIndex]);
+    }
 
@@ -140,4 +140,4 @@ return;
   if (intersectionObserverSupport) {
-    var intersectionListener = new IntersectionObserver((entries, observer) => {
-      entries.forEach(entry => {
+    var intersectionListener = new w[io]((entries, observer) => {
+      entries[fe](entry => {
         if (entry.isIntersecting) {
@@ -147,3 +147,3 @@ let element = entry.target;
           if (idleCallbackSupport && idleLoadTimeout) {
-            requestIdleCallback(() => {
+            w[ric](() => {
               yallLoad(element);
@@ -155,7 +155,7 @@ }, idleCallbackOptions);
 
-          element.classList.remove(lazyClass);
-          observer.unobserve(element);
+          element[cl][r](lazyClass);
+          observer[`un${o}`](element);
           lazyElements = lazyElements.filter(lazyElement => lazyElement != element);
 
-          if (!lazyElements.length && !observeChanges) {
+          if (!lazyElements[l] && !observeChanges) {
             intersectionListener.disconnect();
@@ -169,9 +169,9 @@ }
 
-    lazyElements.forEach(lazyElement => {
-      intersectionListener.observe(lazyElement);
-    });
+    for (let lazyElementIndex in lazyElements) {
+      intersectionListener[o](lazyElements[lazyElementIndex]);
+    }
   } else {
-    eventsToBind.forEach(eventPair => {
-      eventPair[0].addEventListener(eventPair[1], yallBack);
-    });
+    for (let eventIndex in eventsToBind) {
+      eventsToBind[eventIndex][0][`add${el}`](eventsToBind[eventIndex][1], yallBack);
+    }
 
@@ -181,18 +181,16 @@ yallBack();
 
-  if ("MutationObserver" in window && observeChanges) {
-    new MutationObserver(mutations => {
-      mutations.forEach(() => {
-        sliceCall(document.querySelectorAll(selectorString)).forEach(newElement => {
-          if (lazyElements.indexOf(newElement) == -1) {
-            lazyElements.push(newElement);
+  if (mo in w && observeChanges) {
+    new w[mo](() => {
+      sliceCall(d[qsa](selectorString))[fe](newElement => {
+        if (lazyElements.indexOf(newElement) < 0) {
+          lazyElements.push(newElement);
 
-            if (intersectionObserverSupport) {
-              intersectionListener.observe(newElement);
-            } else {
-              yallBack();
-            }
+          if (intersectionObserverSupport) {
+            intersectionListener[o](newElement);
+          } else {
+            yallBack();
           }
-        });
+        }
       });
-    }).observe(document.querySelector(options.observeRootSelector || "body"), options.mutationObserverOptions || {
+    })[o](d.querySelector(options[`${o}RootSelector`] || "body"), options.mutationObserverOptions || {
       childList: true,
@@ -199,0 +197,0 @@ subtree: true

dist/yall.min.js

@@ -1,2 +0,2 @@
-/*yall.js 2.3.1*/
-var yall=function(){"use strict";return function(e){e||(e={});var t="IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype,n="requestIdleCallback"in window,o=[[document,"scroll"],[document,"touchmove"],[window,"resize"],[window,"orientationchange"]],r=e.lazyClass||"lazy",i=e.lazyBackgroundClass||"lazy-bg",c="idleLoadTimeout"in e?e.idleLoadTimeout:100,a="threshold"in e?e.threshold:200,s=e.observeChanges||!1,l="img."+r+",video."+r+",iframe."+r+",."+i,u={timeout:c},d=function(e){return[].slice.call(e)},f=function(t){switch(t.nodeName){case"IMG":var n=t.parentNode;"PICTURE"==n.nodeName&&d(n.querySelectorAll("source")).forEach(function(e){v(e)}),v(t);break;case"VIDEO":d(t.querySelectorAll("source")).forEach(function(e){v(e)}),v(t),t.autoplay&&t.load();break;case"IFRAME":v(t)}t.classList.contains(i)&&(t.classList.remove(i),t.classList.add(e.lazyBackgroundLoaded||"lazy-bg-loaded"))},v=function(e){["srcset","src","poster"].forEach(function(t){t in e.dataset&&(e[t]=e.dataset[t])})},h=function yallBack(){var t=!1;!t&&b.length&&(t=!0,setTimeout(function(){b.forEach(function(e){e.getBoundingClientRect().top<=window.innerHeight+a&&e.getBoundingClientRect().bottom>=-a&&"none"!=getComputedStyle(e).display&&(n&&c?requestIdleCallback(function(){f(e)},u):f(e),e.classList.remove(r),b=b.filter(function(t){return t!=e}))}),t=!1,b.length||s||o.forEach(function(e){e[0].removeEventListener(e[1],yallBack)})},"throttleTime"in e?e.throttleTime:200))},b=d(document.querySelectorAll(l));if(/(google|bing|yandex|duckduck)bot/i.test(navigator.userAgent))b.forEach(function(e){f(e)});else{if(t){var g=new IntersectionObserver(function(e,t){e.forEach(function(e){if(e.isIntersecting){var o=e.target;n&&c?requestIdleCallback(function(){f(o)},u):f(o),o.classList.remove(r),t.unobserve(o),(b=b.filter(function(e){return e!=o})).length||s||g.disconnect()}})},{rootMargin:a+"px 0%"});b.forEach(function(e){g.observe(e)})}else o.forEach(function(e){e[0].addEventListener(e[1],h)}),h();"MutationObserver"in window&&s&&new MutationObserver(function(e){e.forEach(function(){d(document.querySelectorAll(l)).forEach(function(e){-1==b.indexOf(e)&&(b.push(e),t?g.observe(e):h())})})}).observe(document.querySelector(e.observeRootSelector||"body"),e.mutationObserverOptions||{childList:!0,subtree:!0})}}}();
+/*yall.js 2.3.2*/
+var yall=function(){"use strict";return function(e){e=e||{};var t="IntersectionObserver",n="MutationObserver",o="observe",i=document,r=window,a="forEach",c="length",s="querySelectorAll",u="classList",l="requestIdleCallback",d="getBoundingClientRect",f="EventListener",g="threshold",v="remove",y=t in r&&t+"Entry"in r&&"intersectionRatio"in r[t+"Entry"].prototype&&"isIntersecting"in r[t+"Entry"].prototype,m=l in r,p=[[i,"scroll"],[i,"touchmove"],[r,"resize"],[r,"orientationchange"]],b=e.lazyClass||"lazy",h=e.lazyBackgroundClass||"lazy-bg",k="idleLoadTimeout"in e?e.idleLoadTimeout:100,z=g in e?e[g]:200,C=e[o+"Changes"]||!1,E="img."+b+",video."+b+",iframe."+b+",."+h,I={timeout:k},L=function(e){return[].slice.call(e)},O=function(t){var n,o=t.parentNode;for(var i in"PICTURE"==o.nodeName&&(n=L(o[s]("source"))),"VIDEO"==t.nodeName&&(n=L(t[s]("source"))),n)T(n[i]);T(t),t.autoplay&&t.load(),t[u].contains(h)&&(t[u][v](h),t[u].add(e.lazyBackgroundLoaded||"lazy-bg-loaded"))},T=function(e){["srcset","src","poster"][a](function(t){t in e.dataset&&(e[t]=e.dataset[t])})},B=function yallBack(){var t=!1;!t&&w[c]&&(t=!0,setTimeout(function(){if(w[a](function(e){e[d]().top<=innerHeight+z&&e[d]().bottom>=-z&&"none"!=getComputedStyle(e).display&&(m&&k?r[l](function(){O(e)},I):O(e),e[u][v](b),w=w.filter(function(t){return t!=e}))}),t=!1,!w[c]&&!C)for(var e in p)p[e][0]["remove"+f](p[e][1],yallBack)},"throttleTime"in e?e.throttleTime:200))},w=L(i[s](E));if(/(google|bing|yandex|duckduck)bot/i.test(navigator.userAgent))for(var R in w)O(w[R]);else{if(y){var S=new r[t](function(e,t){e[a](function(e){if(e.isIntersecting){var n=e.target;m&&k?r[l](function(){O(n)},I):O(n),n[u][v](b),t["un"+o](n),(w=w.filter(function(e){return e!=n}))[c]||C||S.disconnect()}})},{rootMargin:z+"px 0%"});for(var q in w)S[o](w[q])}else{for(var x in p)p[x][0]["add"+f](p[x][1],B);B()}n in r&&C&&new r[n](function(){L(i[s](E))[a](function(e){w.indexOf(e)<0&&(w.push(e),y?S[o](e):B())})})[o](i.querySelector(e[o+"RootSelector"]||"body"),e.mutationObserverOptions||{childList:!0,subtree:!0})}}}();

package.json

 {
   "name": "yall-js",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Yet Another Lazy Loader",
@@ -34,8 +34,8 @@ "main": "./dist/yall.js",
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
     "eslint": "^5.15.3",
     "express": "^4.16.4",
     "rimraf": "^2.6.3",
-    "rollup": "^1.6.0",
+    "rollup": "^1.7.0",
     "rollup-plugin-babel": "^4.3.2",
@@ -42,0 +42,0 @@ "rollup-plugin-copy": "^0.2.3",

No alert changes

Worsened metrics

Total package byte prevSize

32970

decreased by-2.44%

Lines of code

336

decreased by-0.3%

No dependency changes