perf(examples): update examples to use new JS standard

demo/api.html

@@ -45,7 +45,11 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script type="module" src="../index.js"></script>
-    <script src="./api.min.js"></script>
+
+    <script type="module" data-demo-script="true" src="../index.js"></script>
+    <script type="module" data-demo-script="true">
+      import { initExamples } from "./api.min.js"
+      initExamples();
+    </script>
   </body>
 </html>

demo/api.js

@@ -1,22 +1,24 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
 import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
 
-export function initComboboxApiExamples(initCount) {
+export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
+    // javascript example function calls to be added here upon creation to test examples
     dynamicMenuExample();
     valueExample();
     focusExample();
-  } catch {
+  } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {
-        initComboboxApiExamples(initCount + 1);
+        initExamples(initCount + 1);
       }, 100);
     }
   }
 }
 
-initComboboxApiExamples();

demo/index.html

@@ -48,12 +48,13 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-    <script type="module" src="../index.js"></script>
-    <script type="module">
+
+    <script type="module" data-demo-script="true">
       import { registerComponent } from '../index.js';
+      import { initExamples } from "./index.min.js"
 
       registerComponent('custom-combobox');
+      initExamples();
     </script>
-    <script src="./index.min.js"></script>
   </body>
 </html>

demo/index.js

@@ -1,23 +1,21 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
 import { persistentExample } from '../apiExamples/persistent';
 import { swapValueExample } from '../apiExamples/swapValue';
 
-export function initComboboxIndexExamples(initCount) {
+export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
+    // javascript example function calls to be added here upon creation to test examples
     persistentExample();
     swapValueExample();
-  } catch {
+  } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {
-        console.warn('message from index.min.js - init attempt:', initCount + 1);
-        initComboboxIndexExamples(initCount + 1);
+        initExamples(initCount + 1);
       }, 100);
     }
   }
 }
-
-console.warn('message from index.min.js');
-
-initComboboxIndexExamples();

demo/index.md

@@ -420,7 +420,9 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Persistent menuoption with a custom event
+### Persistent menu option with a custom event
+
+This example demonstrates a static menu option that will always appears regardless of the suggestion filtering performed. In this example "Add new address" will always be a displayed menu option.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/persistent.html) -->

docs/partials/index.md

@@ -72,7 +72,9 @@ The `type` attribute may be used to apply the corresponding `type` attribute on
 
 </auro-accordion>
 
-### Persistent menuoption with a custom event
+### Persistent menu option with a custom event
+
+This example demonstrates a static menu option that will always appears regardless of the suggestion filtering performed. In this example "Add new address" will always be a displayed menu option.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/persistent.html) -->

package.json

@@ -131,12 +131,11 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:version build:sass sass:render dist:js build:api test build:docs bundler build:demoScripts postinstall types",
+    "build": "npm-run-all build:version build:sass sass:render dist:js build:api test build:docs bundler postinstall types",
     "build:ci": "npm-run-all sweep build",
     "build:api": "wca analyze 'src/auro-combobox.js' --outFiles docs/api.md",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render",
     "build:docs": "node scripts/generateDocs.mjs",
-    "build:demoScripts": "node scripts/prepExampleFiles.mjs",
     "build:sass": "npm-run-all build:sass:demo build:sass:component postCss:component sass:render",
     "build:sass:demo": "sass --no-source-map demo:demo",
     "build:sass:component": "sass --no-source-map src:src",