Update DOM tree when mutating document

Author: sirreal

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

@@ -3,7 +3,7 @@
  * Plugin Name:       HTML API Debugger
  * Plugin URI:        https://github.com/sirreal/html-api-debugger
  * Description:       Add a page to wp-admin for debugging the HTML API.
- * Version:           1.6
+ * Version:           1.7
  * Requires at least: 6.5
  * Tested up to:      6.6
  * Author:            Jon Surrell
@@ -22,7 +22,7 @@
 require_once __DIR__ . '/html-api-integration.php';
 
 const SLUG    = 'html-api-debugger';
-const VERSION = '1.6';
+const VERSION = '1.7';
 
 /** Set up the plugin. */
 function init() {

html-api-debugger/interactivity.php

@@ -49,6 +49,7 @@ function generate_page( string $html, array $options ): string {
 				'doctypeSystemId' => '',
 				'doctypePublicId' => '',
 			),
+			'hasMutatedDom' => false,
 			'html' => $html,
 			'htmlapiResponse' => $htmlapi_response,
 			'span' => false,
@@ -140,7 +141,7 @@ class="html-api-debugger-container html-api-debugger--grid"
 		</div>
 		<div>
 			<h2>Interpreted from DOM</h2>
-			<ul id="dom_tree" data-wp-ignore></ul>
+			<div data-wp-class--mutated="state.hasMutatedDom"><ul id="dom_tree" data-wp-ignore></ul></div>
 		</div>
 	</div>
 

html-api-debugger/readme.txt

@@ -3,7 +3,7 @@ Contributors: jonsurrell
 Tags: HTML API, development, debug
 Requires at least: 6.5
 Tested up to: 6.6
-Stable tag: 1.6
+Stable tag: 1.7
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -80,3 +80,6 @@ Add a page to wp-admin for debugging the HTML API.
 * Fix a crash on meta tags with a content attribute.
 * Display namespace on tag closers.
 * Display normalized HTML when supported.
+
+= 1.7 =
+* Update DOM tree when HTML document is mutated.

html-api-debugger/style.css

@@ -21,7 +21,7 @@
 
   pre {
     background-color: #fff;
-    border: inset thin;
+    border: inset 1px;
     padding: 0.2em 0.4em;
   }
 
@@ -63,6 +63,21 @@
     word-break: break-all;
     text-wrap: pretty;
   }
+
+  .mutated {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 1px;
+      padding: 0.1em 0.2em;
+
+      content: "DOM MODIFIED";
+      background: red;
+      color: white;
+    }
+  }
 }
 
 #rendered_iframe {
@@ -91,7 +106,7 @@
 
 #html_api_result_holder,
 #dom_tree {
-  border: inset thin;
+  border: inset 1px;
   padding: 0.5em 0.5em 0.5em 1em;
   color: black;
   font-family: monospace;

html-api-debugger/view.js

@@ -18,6 +18,9 @@ let inFlightRequestAbortController = null;
 /** @type {AbortController|null} */
 let debounceInputAbortController = null;
 
+/** @type {MutationObserver|null} */
+let mutationObserver = null;
+
 /**
  * @typedef DOM
  * @property {string|undefined} renderingMode
@@ -70,6 +73,7 @@ let debounceInputAbortController = null;
  * @property {boolean} hoverInsertion
  *
  * @property {DOM} DOM
+ * @property {boolean} hasMutatedDom
  * @property {HTMLAPISpan|false} span
  * @property {string} hoverSpan
  * @property {readonly []|readonly [string,string,string]} hoverSpanSplit
@@ -93,22 +97,25 @@ let debounceInputAbortController = null;
  * @property {()=>void} handleCopyClick
  * @property {()=>void} handleCopyPrInput
  * @property {()=>void} handleCopyPrClick
+ *
+ * @property {()=>void} onRenderedIframeLoad
  */
 
-/** @type {typeof I.store<Store>} */
-const createStore = I.store;
+const createStore = /** @type {typeof I.store<Store>} */ (I.store);
 
 /** @type {Store} */
-// @ts-expect-error Server provided state is not included here.
 const store = createStore(NS, {
+	// @ts-expect-error Server provided state is not included here.
 	state: {
 		showClosers: Boolean(localStorage.getItem(`${NS}-showClosers`)),
 		showInvisible: Boolean(localStorage.getItem(`${NS}-showInvisible`)),
 		showVirtual: Boolean(localStorage.getItem(`${NS}-showVirtual`)),
 		quirksMode: Boolean(localStorage.getItem(`${NS}-quirksMode`)),
 		fullParser: Boolean(localStorage.getItem(`${NS}-fullParser`)),
 
-		hoverInfo: localStorage.getItem(`${NS}-hoverInfo`),
+		hoverInfo: /** @type {typeof store.state.hoverInfo} */ (
+			localStorage.getItem(`${NS}-hoverInfo`)
+		),
 
 		get htmlApiDoctypeName() {
 			return store.state.showInvisible
@@ -238,6 +245,11 @@ const store = createStore(NS, {
 			u.searchParams.delete('html');
 			history.replaceState(null, '', u);
 		}
+
+		mutationObserver = new MutationObserver(() => {
+			store.state.hasMutatedDom = true;
+			store.onRenderedIframeLoad();
+		});
 	},
 
 	onRenderedIframeLoad() {
@@ -260,7 +272,26 @@ const store = createStore(NS, {
 				hoverInfo: store.state.hoverInfo,
 			},
 		);
+		mutationObserver?.observe(doc, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true,
+		});
+		Array.prototype.forEach.call(
+			doc.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'template'),
+			/** @param {HTMLTemplateElement} template */
+			(template) => {
+				mutationObserver?.observe(template.content, {
+					subtree: true,
+					childList: true,
+					attributes: true,
+					characterData: true,
+				});
+			},
+		);
 	},
+
 	clearSpan() {
 		store.state.span = false;
 	},
@@ -441,6 +472,10 @@ const store = createStore(NS, {
 	render() {
 		// @ts-expect-error This should not be null.
 		const iframeDocument = RENDERED_IFRAME.contentWindow.document;
+
+		mutationObserver?.disconnect();
+		store.state.hasMutatedDom = false;
+
 		iframeDocument.open();
 		iframeDocument.write(store.state.htmlForProcessing);
 		iframeDocument.close();