Depend on php to identify elements and depth (PR #6929)

Co-authored-by: Mai <[email protected]>

assets/js/wpr-beacon.js

@@ -209,7 +209,7 @@
       }
     }
     _getLazyRenderElements() {
-      const elements = document.querySelectorAll(this.config.lrc_elements);
+      const elements = document.querySelectorAll("[data-rocket-location-hash]");
       if (elements.length <= 0) {
         return [];
       }
@@ -233,7 +233,7 @@
     _getElementDistance(element) {
       const rect = element.getBoundingClientRect();
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      return Math.max(0, rect.top + scrollTop - (window.innerHeight || document.documentElement.clientHeight));
+      return Math.max(0, rect.top + scrollTop);
     }
     _skipElement(element) {
       const skipStrings = this.config.skipStrings || ["memex"];
@@ -259,18 +259,14 @@
         if ("No hash detected" === hash) {
           return;
         }
-        const color = depth === 2 && distance >= this.config.lrc_threshold || element.parentElement && this._getElementDistance(element.parentElement) === 0 && distance >= this.config.lrc_threshold ? "green" : distance === 0 ? "red" : "";
+        const can_push_hash = element.parentElement && this._getElementDistance(element.parentElement) < this.config.lrc_threshold && distance > this.config.lrc_threshold;
+        const color = can_push_hash ? "green" : distance === 0 ? "red" : "";
         this.logger.logColoredMessage(`${"	".repeat(depth)}${element.tagName} (Depth: ${depth}, Distance from viewport top: ${distance}px)`, color);
         this.logger.logColoredMessage(`${"	".repeat(depth)}Location hash: ${hash}`, color);
         this.logger.logColoredMessage(`${"	".repeat(depth)}Dimensions Client Height: ${element.clientHeight}`, color);
-        if (depth === 2 && distance >= this.config.lrc_threshold) {
+        if (can_push_hash) {
           this.lazyRenderElements.push(hash);
-          this.logger.logMessage(`Parent element at depth 2 with distance >= this.config.lrc_threshold pushed with hash: ${hash}`);
-          return;
-        }
-        if (element.parentElement && this._getElementDistance(element.parentElement) === 0 && distance >= this.config.lrc_threshold) {
-          this.lazyRenderElements.push(hash);
-          this.logger.logMessage(`Child element pushed with hash: ${hash}`);
+          this.logger.logMessage(`Element pushed with hash: ${hash}`);
         }
       });
     }

inc/Engine/Optimization/LazyRenderContent/Frontend/Controller.php

@@ -138,25 +138,6 @@ public function add_hashes( $html ) {
 	 * @return array
 	 */
 	public function add_custom_data( array $data ): array {
-		$elements = [
-			'div',
-			'main',
-			'footer',
-			'section',
-			'article',
-			'header',
-		];
-
-		/**
-		 * Filters the array of elements
-		 *
-		 * @since 3.17
-		 *
-		 * @param array $formats Array of elements
-		 */
-		$elements = wpm_apply_filters_typed( 'array', 'rocket_lrc_elements', $elements );
-
-		$data['lrc_elements']  = implode( ', ', $elements );
 		$data['status']['lrc'] = $this->context->is_allowed();
 
 		/**

inc/Engine/Optimization/LazyRenderContent/Frontend/Processor/Dom.php

@@ -7,6 +7,9 @@
 use WP_Rocket\Logger\Logger;
 
 class Dom implements ProcessorInterface {
+
+	use HelperTrait;
+
 	/**
 	 * Add hashes to the HTML elements
 	 *
@@ -41,7 +44,7 @@ public function add_hashes( $html ) {
 			return $html;
 		}
 
-		$this->add_hash_to_element( $body, 2 );
+		$this->add_hash_to_element( $body, $this->get_depth() );
 
 		return $dom->saveHTML();
 	}
@@ -57,14 +60,7 @@ private function add_hash_to_element( $element, $depth ) {
 			return;
 		}
 
-		$skip_tags = [
-			'DIV',
-			'MAIN',
-			'FOOTER',
-			'SECTION',
-			'ARTICLE',
-			'HEADER',
-		];
+		$processed_tags = $this->get_processed_tags();
 
 		static $count = 0;
 
@@ -76,7 +72,7 @@ private function add_hash_to_element( $element, $depth ) {
 			if (
 				XML_ELEMENT_NODE !== $child->nodeType // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
 				||
-				! in_array( strtoupper( $child->tagName ), $skip_tags, true ) // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
+				! in_array( strtoupper( $child->tagName ), $processed_tags, true ) // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
 			) {
 				continue;
 			}

inc/Engine/Optimization/LazyRenderContent/Frontend/Processor/HelperTrait.php

@@ -0,0 +1,47 @@
+<?php
+declare(strict_types=1);
+
+namespace WP_Rocket\Engine\Optimization\LazyRenderContent\Frontend\Processor;
+
+trait HelperTrait {
+
+	/**
+	 * Get filtered elements depth.
+	 *
+	 * @return int
+	 */
+	protected function get_depth() {
+		/**
+		 * Filter the depth integer value.
+		 * The actual applied depth in the source is the default + 1 after the body or rocket_lazy_render_content_depth+1 after the body if the filter is set
+		 *
+		 * @param int $depth Depth value.
+		 */
+		return wpm_apply_filters_typed( 'integer', 'rocket_lazy_render_content_depth', 2 );
+	}
+
+	/**
+	 * Get processed tags.
+	 *
+	 * @return array|string[]
+	 */
+	protected function get_processed_tags() {
+		/**
+		 * Filter the processed element tags.
+		 *
+		 * @param array|string[] $tags Tags to be processed.
+		 */
+		return wpm_apply_filters_typed(
+			'array',
+			'rocket_lazy_render_content_processed_tags',
+			[
+				'DIV',
+				'MAIN',
+				'FOOTER',
+				'SECTION',
+				'ARTICLE',
+				'HEADER',
+			]
+		);
+	}
+}

inc/Engine/Optimization/LazyRenderContent/Frontend/Processor/Regex.php

@@ -6,6 +6,9 @@
 use WP_Rocket\Logger\Logger;
 
 class Regex implements ProcessorInterface {
+
+	use HelperTrait;
+
 	/**
 	 * Add hashes to the HTML elements
 	 *
@@ -34,16 +37,9 @@ public function add_hashes( $html ) {
 	 * @return string
 	 */
 	private function add_hash_to_element( $html, $element ) {
-		$skip_tags = [
-			'div',
-			'main',
-			'footer',
-			'section',
-			'article',
-			'header',
-		];
-
-		$result = preg_match_all( '/(?><(' . implode( '|', $skip_tags ) . ')[^>]*>)/is', $element, $matches, PREG_SET_ORDER );
+		$processed_tags = $this->get_processed_tags();
+
+		$result = preg_match_all( '/(?><(' . implode( '|', $processed_tags ) . ')[^>]*>)/is', $element, $matches, PREG_SET_ORDER );
 
 		if ( ! $result ) {
 			Logger::error( 'No elements found in the HTML content.', [ 'LazyRenderContent' ] );

inc/Engine/Optimization/LazyRenderContent/Frontend/Processor/SimpleHtmlDom.php

@@ -9,6 +9,9 @@
 use WP_Rocket\Logger\Logger;
 
 class SimpleHtmlDom implements ProcessorInterface {
+
+	use HelperTrait;
+
 	/**
 	 * Add hashes to the HTML elements
 	 *
@@ -27,7 +30,7 @@ public function add_hashes( $html ) {
 			return $html;
 		}
 
-		$this->add_hash_to_element( $body, 2 );
+		$this->add_hash_to_element( $body, $this->get_depth() );
 
 		return $dom->save();
 	}
@@ -43,19 +46,12 @@ private function add_hash_to_element( $element, $depth ) {
 			return;
 		}
 
-		$skip_tags = [
-			'DIV',
-			'MAIN',
-			'FOOTER',
-			'SECTION',
-			'ARTICLE',
-			'HEADER',
-		];
+		$processed_tags = $this->get_processed_tags();
 
 		static $count = 0;
 
 		foreach ( $element->childNodes() as $child ) {
-			if ( ! in_array( strtoupper( $child->getTag() ), $skip_tags, true ) ) {
+			if ( ! in_array( strtoupper( $child->getTag() ), $processed_tags, true ) ) {
 				continue;
 			}
 

package.json

@@ -50,7 +50,7 @@
     "watchify": "^4.0.0",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.9.1",
-    "wp-rocket-scripts": "^1.0.4",
+    "wp-rocket-scripts": "github:wp-media/rocket-scripts#enhancement/depend-on-php",
     "yargs": "^17.3.0"
   }
 }

tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/output_w_beacon.html

@@ -3,5 +3,5 @@
 	<title>Test</title>
 </head>
 <body>
-<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_elements":"div, main, footer, section, article, header","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
+<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
 </html>

tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/output_with_beacon_and_atf_opt.html

@@ -4,5 +4,5 @@
 </head>
 <body>
 <img fetchpriority="high" src="//example.org/wp-content/uploads/sample_url_image.png" alt="Sample alt">
-<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_elements":"div, main, footer, section, article, header","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
+<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
 </html>

tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/output_with_beacon_and_only_lrc_opt.html

@@ -8,5 +8,5 @@
         <div class="child" data-wpr-lazyrender="1"></div>
         <div class="child" data-wpr-lazyrender="1"></div>
     </div>
-<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_elements":"div, main, footer, section, article, header","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
+<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
 </html>

tests/Fixtures/inc/Engine/Optimization/LazyRenderContent/Frontend/Controller/addCustomData.php

@@ -7,7 +7,6 @@
 		],
 		'data'     => [],
 		'expected' => [
-			'lrc_elements' => 'div, main, footer, section, article, header',
 			'status'   => [
 				'lrc' => true,
 			],
@@ -20,7 +19,6 @@
 		],
 		'data'     => [],
 		'expected' => [
-			'lrc_elements' => 'div, main, footer, section, article, header',
 			'status'   => [
 				'lrc' => false,
 			],