fix: temporarily auto-patch the lazysizes JS to allow the internal element selector to be specified if a new getElements method is defined in the lazysizes config + update yarn.lock

Author: sghoweri

package.json

@@ -27,6 +27,10 @@
       "packages/*",
       "packages/*/*",
       "packages/build-tools/plugins/*"
+    ],
+    "nohoist": [
+      "lazysizes",
+      "**/lazysizes"
     ]
   },
   "scripts": {

packages/components/bolt-image/package.json

@@ -30,10 +30,15 @@
     "access": "public",
     "tag": "next"
   },
+  "scripts": {
+    "postinstall": "patch-package"
+  },
   "dependencies": {
     "@bolt/components-ratio": "^2.5.2",
     "@bolt/core": "^2.5.2",
-    "lazysizes": "^4.1.4"
+    "lazysizes": "^4.1.4",
+    "patch-package": "^6.1.2",
+    "postinstall-postinstall": "^2.0.0"
   },
   "style": "index.scss",
   "main": "index.js",

packages/components/bolt-image/patches/lazysizes+4.1.8.patch

@@ -0,0 +1,42 @@
+diff --git a/node_modules/lazysizes/lazysizes.js b/node_modules/lazysizes/lazysizes.js
+index 26ba477..076c71e 100644
+--- a/node_modules/lazysizes/lazysizes.js
++++ b/node_modules/lazysizes/lazysizes.js
+@@ -97,7 +97,12 @@
+ 	};
+ 
+ 	var getCSS = function (elem, style){
+-		return (getComputedStyle(elem, null) || {})[style];
++    try {
++      return (getComputedStyle(elem, null) || {})[style];
++    }
++    catch {
++      return {}[style];
++    }
+ 	};
+ 
+ 	var getWidth = function(elem, parent, width){
+@@ -586,8 +591,21 @@
+ 			_: function(){
+ 				started = Date.now();
+ 
+-				lazysizes.elements = document.getElementsByClassName(lazySizesConfig.lazyClass);
+-				preloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass + ' ' + lazySizesConfig.preloadClass);
++        lazysizes.elements = lazySizesConfig.getElements
++          ? lazySizesConfig.getElements(`.${lazySizesConfig.lazyClass}`)
++          : document.getElementsByClassName(lazySizesConfig.lazyClass);
++
++        preloadElems = lazySizesConfig.getElements
++          ? lazySizesConfig.getElements(
++              `.${lazySizesConfig.lazyClass}.${
++                lazySizesConfig.preloadClass
++              }`,
++            )
++          : document.getElementsByClassName(
++              lazySizesConfig.lazyClass +
++                ' ' +
++                lazySizesConfig.preloadClass,
++            );
+ 
+ 				addEventListener('scroll', throttledCheckElements, true);
+ 

packages/components/bolt-image/src/_image-lazy-sizes.js

@@ -1,4 +1,4 @@
-import lazySizes from 'lazysizes'; // Mostly just for automatic `size` attribute support
+import lazySizes from 'lazysizes/lazysizes.js'; // Mostly just for automatic `size` attribute support
 // import 'lazysizes/src/lazysizes-intersection';
 import 'lazysizes/plugins/unveilhooks/ls.unveilhooks';
 import 'lazysizes/plugins/progressive/ls.progressive';
@@ -8,8 +8,18 @@ import 'lazysizes/plugins/respimg/ls.respimg'; // Lighter weight version of pict
 // lazySizes.cfg == window.lazySizesConfig
 Object.assign(lazySizes.cfg, {
   lazyClass: 'js-lazyload',
+  preloadClass: 'js-lazypreload',
   loadingClass: 'is-lazyloading',
   loadedClass: 'is-lazyloaded',
   preloadAfterLoad: true,
   // preloadAfterLoad: false,
+  getElements(selector) {
+    let elements = Array.from(document.querySelectorAll('bolt-image')).map(
+      elem => elem.renderRoot.querySelector(selector),
+    );
+    elements = elements.filter(function(el) {
+      return el != null;
+    });
+    return elements;
+  },
 });

packages/components/bolt-image/src/image.js

@@ -67,8 +67,6 @@ class BoltImage extends withLitHtml() {
 
   lazyloadImage(image) {
     if (!this.isLoaded) {
-      // Note: This immediately unveils the image. Add intersection observer?
-      lazySizes.loader.unveil(image);
       this.isLoaded = true;
     }
   }