Add LRC functionality

src/BeaconLrc.js

@@ -0,0 +1,136 @@
+'use strict';
+
+import BeaconUtils from "./Utils.js";
+import BeaconManager from "./BeaconManager.js";
+
+class BeaconLrc {
+    constructor(config, logger) {
+        this.config = config;
+        this.logger = logger;
+        this.lazyRenderElements = [];
+    }
+
+    async run() {
+        try {
+            const elementsInView = this._getLazyRenderElements();
+            if (elementsInView) {
+                this._processElements(elementsInView);
+            }
+        } catch (err) {
+            this.errorCode = 'script_error';
+            this.logger.logMessage('Script Error: ' + err);
+        }
+    }
+
+    _getLazyRenderElements() {
+        const elements = document.querySelectorAll(this.config.elements);
+
+        if (elements.length <= 0) {
+            return [];
+        }
+
+        const validElements = Array.from(elements).filter(element => !this._skipElement(element));
+
+        return validElements.map(element => ({
+            element: element,
+            depth: this._getElementDepth(element),
+            distance: this._getElementDistance(element),
+            hash: this._getLocationHash(element)
+        }));
+    }
+
+    _getElementDepth(element) {
+        let depth = 0;
+        let parent = element.parentElement;
+        while (parent) {
+            depth++;
+            parent = parent.parentElement;
+        }
+        return depth;
+    }
+
+    _getElementDistance(element) {
+        const rect = element.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return rect.top + scrollTop - (window.innerHeight || document.documentElement.clientHeight);
+    }
+
+    _skipElement(element) {
+        const skipStrings = this.config.skipStrings || ['memex'];
+        if (!element || !element.id) return false;
+        return skipStrings.some(str => element.id.toLowerCase().includes(str));
+    }
+
+    _shouldSkipElement(element, exclusions) {
+        if (!element) return false;
+        for (let i = 0; i < exclusions.length; i++) {
+            const [attribute, pattern] = exclusions[i];
+            const attributeValue = element.getAttribute(attribute);
+            if (attributeValue && new RegExp(pattern, 'i').test(attributeValue)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    _processElements(elements) {
+        elements.forEach(({ element, depth, distance, hash }) => {
+            if (this._shouldSkipElement(element, this.config.exclusions || [])) {
+                return;
+            }
+            if ( 'No hash detected' !== hash ) {
+                this.lazyRenderElements.push( hash );
+            }
+
+            const style = distance > 1800 ? 'color: green;' : distance === 0 ? 'color: red;' : '';
+            console.log(`%c${'\t'.repeat(depth)}${element.tagName} (Depth: ${depth}, Distance from viewport top: ${distance}px)`, style);
+
+            const xpath = this._getXPath(element);
+            console.log(`%c${'\t'.repeat(depth)}Xpath: ${xpath}`, style);
+
+            console.log(`%c${'\t'.repeat(depth)}Location hash: ${hash}`, style);
+
+            console.log(`%c${'\t'.repeat(depth)}Dimensions Client Height: ${element.clientHeight}`, style);
+        });
+    }
+
+    _getXPath(element) {
+        if (element.id !== "") {
+            return `//*[@id="${element.id}"]`;
+        }
+
+        return this._getElementXPath(element);
+    }
+
+    _getElementXPath(element) {
+        if (element === document.body) {
+            return '/html/body';
+        }
+        const position = this._getElementPosition(element);
+        return `${this._getElementXPath(element.parentNode)}/${element.nodeName.toLowerCase()}[${position}]`;
+    }
+
+    _getElementPosition(element) {
+        let pos = 1;
+        let sibling = element.previousElementSibling;
+        while (sibling) {
+            if (sibling.nodeName === element.nodeName) {
+                pos++;
+            }
+            sibling = sibling.previousElementSibling;
+        }
+        return pos;
+    }
+
+    _getLocationHash(element) {
+        return element.hasAttribute('data-rocket-location-hash')
+            ? element.getAttribute('data-rocket-location-hash')
+            : 'No hash detected';
+    }
+
+    getResults() {
+        return this.lazyRenderElements;
+    }
+}
+
+export default BeaconLrc;

src/BeaconManager.js

@@ -1,13 +1,15 @@
 'use strict';
 
 import BeaconLcp from "./BeaconLcp.js";
+import BeaconLrc from "./BeaconLrc.js";
 import BeaconUtils from "./Utils.js";
 import Logger from "./Logger.js";
 
 class BeaconManager {
     constructor(config) {
         this.config = config;
         this.lcpBeacon = null;
+        this.lrcBeacon = null;
         this.infiniteLoopId = null;
         this.errorCode = '';
         this.logger = new Logger(this.config.debug);
@@ -25,21 +27,29 @@ class BeaconManager {
         }, 10000);
 
         const isGeneratedBefore = await this._getGeneratedBefore();
-        let shouldSaveResultsIntoDB = false;
 
         // OCI / LCP / ATF
         const shouldGenerateLcp = (
             this.config.status.atf && (isGeneratedBefore === false || isGeneratedBefore.lcp === false)
         );
+        const shouldGeneratelrc = (
+            this.config.status.lrc && (isGeneratedBefore === false || isGeneratedBefore.lrc === false)
+        );
         if (shouldGenerateLcp) {
             this.lcpBeacon = new BeaconLcp(this.config, this.logger);
             await this.lcpBeacon.run();
-            shouldSaveResultsIntoDB = true;
         } else {
-            this.logger.logMessage('Not running BeaconLcp because data is already available');
+            this.logger.logMessage('Not running BeaconLcp because data is already available or feature is disabled');
+        }
+
+        if (shouldGeneratelrc) {
+            this.lrcBeacon = new BeaconLrc(this.config, this.logger);
+            await this.lrcBeacon.run();
+        } else {
+            this.logger.logMessage('Not running BeaconLrc because data is already available or feature is disabled');
         }
 
-        if (shouldSaveResultsIntoDB) {
+        if (shouldGenerateLcp || shouldGeneratelrc) {
             this._saveFinalResultIntoDB();
         } else {
             this.logger.logMessage("Not saving results into DB as no beacon features ran.");
@@ -84,7 +94,8 @@ class BeaconManager {
 
     _saveFinalResultIntoDB() {
         const results = {
-            lcp: this.lcpBeacon ? this.lcpBeacon.getResults() : null
+            lcp: this.lcpBeacon ? this.lcpBeacon.getResults() : null,
+            lrc: this.lrcBeacon ? this.lrcBeacon.getResults() : null
         };
 
         const data = new FormData();

test/BeaconManager.test.js

@@ -357,7 +357,7 @@ describe('BeaconManager', function() {
             assert.strictEqual(sentDataObject['url'], config.url);
             assert.strictEqual(sentDataObject['is_mobile'], config.is_mobile.toString());
             // For complex types like arrays or objects, you might need to parse them before assertion
-            const expectedResults = JSON.parse(JSON.stringify({lcp : beacon.lcpBeacon.performanceImages}));
+            const expectedResults = JSON.parse(JSON.stringify({lcp : beacon.lcpBeacon.performanceImages, lrc: null}));
             assert.deepStrictEqual(JSON.parse(sentDataObject['results']), expectedResults);
             assert.strictEqual(sentDataObject['status'], beacon._getFinalStatus());
             sinon.assert.calledOnce(finalizeSpy);