perf(examples): refactor js example execution so it works on docsite #…

…176
AlaskaAirlines · May 23, 2023 · ffe429f · ffe429f
1 parent 8c0c38f
commit ffe429f
Show file tree

Hide file tree

Showing 11 changed files with 17,454 additions and 94 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -243,18 +243,16 @@ The `auro-menu` component supports the use of the `matchWord` attribute to highl
   <!-- AURO-GENERATED-CONTENT:START (CODE:src=./partials/matchWord.js) -->
   <!-- The below code snippet is automatically added from ./partials/matchWord.js -->
   ```js
-  let matchWordInput;
-  let matchWordMenu;
-
-  function matchWords() {
-    matchWordInput = document.querySelector('#matchWordInput');
-    matchWordMenu = document.querySelector('#matchWordMenu');
+  function updateMatch() {
+    let matchWordMenu = document.querySelector('#matchWordMenu');
 
-    matchWordInput.addEventListener('keyup', updateMatch);
+    matchWordMenu.matchWord = matchWordInput.value;
   }
 
-  function updateMatch() {
-    matchWordMenu.matchWord = matchWordInput.value;
+  export function auroMenuMatchWordExample() {
+    let matchWordInput = document.querySelector('#matchWordInput');
+
+    matchWordInput.addEventListener('keyup', updateMatch);
   }
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -653,7 +651,7 @@ The `auro-menu` may be reset to a state with no menuoption selected by setting t
   <!-- AURO-GENERATED-CONTENT:START (CODE:src=./partials/reset.js) -->
   <!-- The below code snippet is automatically added from ./partials/reset.js -->
   ```js
-  setTimeout(() => {
+  export function auroMenuResetExample() {
     const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
     const resetExampleElem = document.querySelector('#resetExample');
 
@@ -662,7 +660,7 @@ The `auro-menu` may be reset to a state with no menuoption selected by setting t
         resetExampleElem.value = undefined;
       })
     }
-  }, 500);
+  }
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -690,7 +688,7 @@ The `auro-menuoption` element supports scenarios where a custom event should be
   <!-- AURO-GENERATED-CONTENT:START (CODE:src=./partials/customEvent.js) -->
   <!-- The below code snippet is automatically added from ./partials/customEvent.js -->
   ```js
-  setTimeout(() => {
+  export function auroMenuCustomEventExample() {
     let menuCustomEventEl = document.querySelector('auro-menu#customEvent');
 
     if (menuCustomEventEl) {
@@ -699,7 +697,7 @@ The `auro-menuoption` element supports scenarios where a custom event should be
         alert(`My Custom Event Fired`);
       });
     }
-  }, 1000);
+  }
   ```
   <!-- AURO-GENERATED-CONTENT:END -->
 

diff --git a/demo/index.html b/demo/index.html
@@ -25,18 +25,16 @@
           document.querySelector('main').innerHTML = rawHtml;
           Prism.highlightAll();
         })
-        .then(() => {
-          matchWords();
-        });
     </script>
     <script type="module" src="../src/auro-menu.js"></script>
     <script type="module" src="../src/auro-menuoption.js"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script src="./partials/matchWord.js"></script>
-    <script type="module" src="./partials/reset.js"></script>
-    <script type="module" src="./partials/customEvent.js"></script>
+    <script src="./index.min.js"></script>
+    <script>
+      initMenuIndexExamples();
+    </script>
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,20 @@
+import { auroMenuResetExample } from './partials/reset';
+import { auroMenuMatchWordExample } from './partials/matchWord';
+import { auroMenuCustomEventExample } from './partials/customEvent';
+
+export function initMenuIndexExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    auroMenuResetExample();
+    auroMenuMatchWordExample();
+    auroMenuCustomEventExample();
+  } catch {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initMenuIndexExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
diff --git a/demo/index.min.js b/demo/index.min.js
@@ -0,0 +1,51 @@
+function auroMenuResetExample() {
+  const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
+  const resetExampleElem = document.querySelector('#resetExample');
+
+  if (resetExampleElem && resetExampleBtnElem) {
+    resetExampleBtnElem.addEventListener('click', () => {
+      resetExampleElem.value = undefined;
+    });
+  }
+}
+
+function updateMatch() {
+  let matchWordMenu = document.querySelector('#matchWordMenu');
+
+  matchWordMenu.matchWord = matchWordInput.value;
+}
+
+function auroMenuMatchWordExample() {
+  let matchWordInput = document.querySelector('#matchWordInput');
+
+  matchWordInput.addEventListener('keyup', updateMatch);
+}
+
+function auroMenuCustomEventExample() {
+  let menuCustomEventEl = document.querySelector('auro-menu#customEvent');
+
+  if (menuCustomEventEl) {
+    menuCustomEventEl.addEventListener('mycustomevent', () => {
+      console.warn('My Custom Event Fired');
+      alert(`My Custom Event Fired`);
+    });
+  }
+}
+
+function initMenuIndexExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    auroMenuResetExample();
+    auroMenuMatchWordExample();
+    auroMenuCustomEventExample();
+  } catch {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initMenuIndexExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
diff --git a/demo/partials/customEvent.js b/demo/partials/customEvent.js
@@ -1,4 +1,4 @@
-setTimeout(() => {
+export function auroMenuCustomEventExample() {
   let menuCustomEventEl = document.querySelector('auro-menu#customEvent');
 
   if (menuCustomEventEl) {
@@ -7,4 +7,4 @@ setTimeout(() => {
       alert(`My Custom Event Fired`);
     });
   }
-}, 1000);
+}
diff --git a/demo/partials/matchWord.js b/demo/partials/matchWord.js
@@ -1,13 +1,11 @@
-let matchWordInput;
-let matchWordMenu;
-
-function matchWords() {
-  matchWordInput = document.querySelector('#matchWordInput');
-  matchWordMenu = document.querySelector('#matchWordMenu');
+function updateMatch() {
+  let matchWordMenu = document.querySelector('#matchWordMenu');
 
-  matchWordInput.addEventListener('keyup', updateMatch);
+  matchWordMenu.matchWord = matchWordInput.value;
 }
 
-function updateMatch() {
-  matchWordMenu.matchWord = matchWordInput.value;
+export function auroMenuMatchWordExample() {
+  let matchWordInput = document.querySelector('#matchWordInput');
+
+  matchWordInput.addEventListener('keyup', updateMatch);
 }
diff --git a/demo/partials/reset.js b/demo/partials/reset.js
@@ -1,5 +1,4 @@
-
-setTimeout(() => {
+export function auroMenuResetExample() {
   const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
   const resetExampleElem = document.querySelector('#resetExample');
 
@@ -8,4 +7,4 @@ setTimeout(() => {
       resetExampleElem.value = undefined;
     })
   }
-}, 500);
+}