perf(docs): make JS examples execute in the new component standard #207

demo/api.html

@@ -50,9 +50,10 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
 
     <script type="module" src="../index.js"></script>
-    <script src="./api.min.js"></script>
-    <script>
-      initDatepickerApiExamples();
+    <script type="module">
+      import { initExamples } from "./api.min.js";
+
+      initExamples();
     </script>
   </body>
 </html>

demo/api.js

@@ -7,7 +7,7 @@ import { updateMaxDateExample } from './../apiExamples/updateMaxDate';
 import { updateMinDateExample } from './../apiExamples/updateMinDate';
 import { validityExample } from './../apiExamples/validity';
 
-export function initDatepickerApiExamples(initCount) {
+export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
@@ -19,11 +19,11 @@ export function initDatepickerApiExamples(initCount) {
     updateMaxDateExample();
     updateMinDateExample();
     validityExample();
-  } catch {
+  } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {
-        initDatepickerApiExamples(initCount + 1);
+        initExamples(initCount + 1);
       }, 100);
     }
   }

demo/api.min.js

@@ -237,7 +237,7 @@ function validityExample() {
   });
 }
 
-function initDatepickerApiExamples(initCount) {
+function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
@@ -249,13 +249,14 @@ function initDatepickerApiExamples(initCount) {
     updateMaxDateExample();
     updateMinDateExample();
     validityExample();
-  } catch {
+  } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {
-        initDatepickerApiExamples(initCount + 1);
+        initExamples(initCount + 1);
       }, 100);
     }
   }
 }
 
+export { initExamples };

demo/index.html

@@ -50,9 +50,10 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
 
     <script type="module" src="../index.js"></script>
-    <script src="./index.min.js"></script>
-    <script>
-      initDatepickerIndexExamples();
+    <script type="module">
+      import { initExamples } from "./index.min.js";
+
+      initExamples();
     </script>
   </body>
 </html>

demo/index.js

@@ -1,6 +1,6 @@
 // import { example } from '../apiExamples/example';
 
-export function initDatepickerIndexExamples(initCount) {
+export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
@@ -9,7 +9,7 @@ export function initDatepickerIndexExamples(initCount) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {
-        initDatepickerIndexExamples(initCount + 1);
+        initExamples(initCount + 1);
       }, 100);
     }
   }

demo/index.min.js

@@ -1,5 +1,6 @@
 // import { example } from '../apiExamples/example';
 
-function initDatepickerIndexExamples(initCount) {
+function initExamples(initCount) {
 }
 
+export { initExamples };

package.json

@@ -139,13 +139,12 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:version build:sass sass:render build:docs build:api bundler build:demoScripts postinstall types",
+    "build": "npm-run-all build:version build:sass sass:render build:docs build:api bundler postinstall types",
     "build:ci": "npm-run-all sweep build",
     "build:api": "wca analyze 'src/auro-datepicker.js' --outFiles docs/api.md",
     "build:demo": "npm-run-all build demo:rm:build demo:new:build demo:copy:index demo:copy:demo demo:update:index",
     "build:dev:assets": "npm-run-all build:sass:demo 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",