From dfc21ffb62778c487bd4926071c4c68edebc5c0e Mon Sep 17 00:00:00 2001
From: Ben Peachey <ben@muze.nl>
Date: Fri, 23 Aug 2024 21:59:28 +0200
Subject: [PATCH] Add logic to load MetroJS for examples that do not do so
 themselves.

---
 docs/examples/example-helper.css |  2 +-
 docs/examples/example-helper.js  | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/examples/example-helper.css b/docs/examples/example-helper.css
index 394a2f5..1e65110 100644
--- a/docs/examples/example-helper.css
+++ b/docs/examples/example-helper.css
@@ -21,7 +21,7 @@ main script::before {
   content: '<script>';
 }
 
-main script[src]::before {
+main script[src]:not([data-js="loaded"])::before {
   content: '<script src="' attr(src) '">';
 }
 
diff --git a/docs/examples/example-helper.js b/docs/examples/example-helper.js
index 7d4ab7b..4e04fdb 100644
--- a/docs/examples/example-helper.js
+++ b/docs/examples/example-helper.js
@@ -1,13 +1,22 @@
-function addElements(container, elements) {
+function addElements(container, elements, metroLoaded = false) {
+  if (metroLoaded === false && elements.length === 1 && elements[0].tagName === 'SCRIPT' && ! elements[0].src) {
+    metroLoaded = true
+    const script = document.createElement('script')
+    script.src = 'https://cdn.jsdelivr.net/npm/@muze-nl/metro/dist/everything.js'
+    script.setAttribute('data-js', 'loaded')
+    elements.unshift(script)
+
+  }
+
   const currentElement = elements.shift()
 
   if (currentElement !== undefined) {
     container.appendChild(currentElement)
 
     if (currentElement.tagName === 'SCRIPT' && currentElement.src) {
-      currentElement.addEventListener('load', () => addElements(container, elements))
+      currentElement.addEventListener('load', () => addElements(container, elements, metroLoaded))
     } else {
-      addElements(container, elements)
+      addElements(container, elements, metroLoaded)
     }
   }
 }
@@ -18,6 +27,12 @@ function createHTML(text) {
 
   const fragment = range.createContextualFragment(text)
 
+  fragment.childNodes.forEach(element => {
+    if (element.nodeType === 3 && element.textContent.trim() === '') {
+      element.remove()
+    }
+  })
+
   fragment.childNodes.forEach(element => {
     console.info('element', element.nodeName, element)
     elements.push(element)