Use selectors and matching in HTML API

Author: sirreal

html-api-debugger/html-api-debugger.php

@@ -45,6 +45,7 @@ function () {
 						$html = $request->get_json_params()['html'] ?: '';
 						$options = array(
 							'context_html' => $request->get_json_params()['contextHTML'] ?: null,
+							'selector' => $request->get_json_params()['selector'] ?: null,
 						);
 						return prepare_html_result_object( $html, $options );
 					},

html-api-debugger/html-api-integration.php

@@ -67,6 +67,11 @@ function get_normalized_html( string $html, array $options ): ?string {
  * @param array  $options The options.
  */
 function get_tree( string $html, array $options ): array {
+	$selector = null;
+	if ( isset( $options['selector'] ) && class_exists( '\WP_CSS_Selector_List' ) ) {
+		$selector = \WP_CSS_Selector_List::from_selectors( $options['selector'] );
+	}
+
 	$processor_state = new ReflectionProperty( WP_HTML_Processor::class, 'state' );
 	$processor_state->setAccessible( true );
 
@@ -219,6 +224,8 @@ function get_tree( string $html, array $options ): array {
 					$document_title = $processor->get_modifiable_text();
 				}
 
+				$matches = $selector !== null && $selector->matches( $processor );
+
 				$attributes      = array();
 				$attribute_names = $processor->get_attribute_names_with_prefix( '' );
 				if ( null !== $attribute_names ) {
@@ -255,6 +262,7 @@ function get_tree( string $html, array $options ): array {
 					'_virtual' => $is_virtual(),
 					'_depth' => $processor->get_current_depth(),
 					'_namespace' => $namespace,
+					'_matches' => $matches,
 				);
 
 				// Self-contained tags contain their inner contents as modifiable text.

html-api-debugger/print-html-tree.js

@@ -23,7 +23,10 @@ export function printHtmlApiTree(node, ul, options = {}) {
 		const li = document.createElement('li');
 		li.className = `t${node.childNodes[i].nodeType}`;
 
-		if (options.selector && node.childNodes[i].matches?.(options.selector)) {
+		if (
+			node.childNodes[i]._matches ||
+			(options.selector && node.childNodes[i].matches?.(options.selector))
+		) {
 			li.classList.add('matches-selector');
 		}
 

html-api-debugger/view.js

@@ -509,6 +509,7 @@ const store = createStore(NS, {
 				body: JSON.stringify({
 					html: store.state.html,
 					contextHTML: store.state.contextHTMLForUse,
+					selector: store.state.selector,
 				}),
 				headers: {
 					'Content-Type': 'application/json',
@@ -693,14 +694,15 @@ const store = createStore(NS, {
 	},
 
 	/** @param {InputEvent} e */
-	handleSelectorChange(e) {
+	handleSelectorChange: function* (e) {
 		const val = /** @type {HTMLInputElement} */ (e.target).value.trim() || null;
 		if (val) {
 			try {
 				// Test whether the selector is valid before setting it so it isn't applied.
 				document.createDocumentFragment().querySelector(val);
 				store.state.selector = val;
 				store.state.selectorErrorMessage = null;
+				yield store.callAPI();
 				return;
 			} catch (/** @type {unknown} */ e) {
 				if (e instanceof DOMException && e.name === 'SyntaxError') {
@@ -732,6 +734,7 @@ const store = createStore(NS, {
 			}
 		}
 		store.state.selector = null;
+		yield store.callAPI();
 	},
 });