chore: use new example.js model

this commit is to follow the new js model

Changes to be committed:
modified:   .gitignore
renamed:    demo/addToast.js -> apiExamples/showToast.js
modified:   demo/api.html
new file:   demo/api.js
modified:   demo/apiExamples.md
modified:   demo/index.html
new file:   demo/index.js
modified:   docs/api.md
modified:   package.json
modified:   rollup.config.mjs
new file:   scripts/prepExampleFiles.js

.gitignore

@@ -6,6 +6,7 @@ docTemplates/
 ## Demo support files
 demo/*.css
 demo/*.css.map
+demo/*min.js
 
 ## CSS built from Sass process
 src/*.css

demo/addToast.js → apiExamples/showToast.js

@@ -3,7 +3,7 @@
 
 // ---------------------------------------------------------------------
 
-showToast = (toastID) => {
+export function showToast(toastID) {
   const toast = document.querySelector(toastID);
 
   if (!toast.hasAttribute('visible')) {

demo/api.html

@@ -37,9 +37,12 @@
         });
     </script>
     <script type="module" src="../index.js"></script>
-    <script src="./addToast.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="./api.min.js"></script>
+    <script>
+      initToastApiExamples();
+    </script>
   </body>
 </html>

demo/api.js

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

demo/apiExamples.md

@@ -15,9 +15,9 @@ The auro-toast element provides users a way to display short, temporary messages
 
 ## Events
 
-| Event          | Type                | Description                             |
-|----------------|---------------------|-----------------------------------------|
-| [onToastClose](#onToastClose) | `CustomEvent<this>` | Notifies that the toast has been closed |
+| Event          | Type     | Description                             |
+|----------------|----------|-----------------------------------------|
+| [onToastClose](#onToastClose) | `object` | Notifies that the toast has been closed |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples

demo/index.html

@@ -43,13 +43,16 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script type="module" src="../index.js"></script>
     <script type="module">
       import { registerComponent } from "../index.js"
       registerComponent('custom-toast');
     </script>
     <script type="module" src="../src/auro-toaster.js"></script>
-    <script src="./addToast.js"></script>
-    <script src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="./index.min.js"></script>
+    <script>
+      initToastIndexExamples();
+    </script>
   </body>
 </html>

demo/index.js

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

docs/api.md

@@ -12,6 +12,6 @@ The auro-toast element provides users a way to display short, temporary messages
 
 ## Events
 
-| Event          | Type                | Description                             |
-|----------------|---------------------|-----------------------------------------|
-| `onToastClose` | `CustomEvent<this>` | Notifies that the toast has been closed |
+| Event          | Type     | Description                             |
+|----------------|----------|-----------------------------------------|
+| `onToastClose` | `object` | Notifies that the toast has been closed |

package.json

@@ -130,11 +130,12 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler postinstall build:api types build:docs",
+    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler build:demoScripts postinstall build:api types build:docs",
     "build:ci": "npm-run-all sweep build",
     "build:api": "wca analyze 'src/auro-toast.js' --outFiles docs/api.md",
     "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
     "build:docs": "node scripts/generateDocs.js",
+    "build:demoScripts": "node scripts/prepExampleFiles.js",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "sass --no-source-map src:src",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
@@ -150,7 +151,7 @@
     "postinstall": "node packageScripts/postinstall.mjs",
     "sass:render": "sass-render src/*.css -t ./scripts/staticStyles-template.js",
     "serve": "web-dev-server --open demo/ --node-resolve --watch",
-    "sweep": "rm -rf ./demo/css ./dist | rm ./src/*.css ./src/*-css.js",
+    "sweep": "rm -rf ./demo/css ./dist | rm ./src/*.css ./src/*-css.js ./demo/*.min.js",
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
     "types": "tsc",

rollup.config.mjs

@@ -21,4 +21,24 @@ const production = !process.env.ROLLUP_WATCH,
   ]
 };
 
-export default [modernConfig];
+const indexExamplesConfig = {
+  input: {
+    ['index.min']: './demo/index.js',
+  },
+  output: {
+    format: 'esm',
+    dir: 'demo/'
+  }
+};
+
+const apiExamplesConfig = {
+  input: {
+    ['api.min']: './demo/api.js',
+  },
+  output: {
+    format: 'esm',
+    dir: 'demo/'
+  }
+};
+
+export default [modernConfig, indexExamplesConfig, apiExamplesConfig];

scripts/prepExampleFiles.js

@@ -0,0 +1,14 @@
+let fs = require('fs');
+
+function removeExport(path, type) {
+  fs.readFile(path, type, function(err, data) {
+    const exportPos = data.indexOf('export')
+    const exampleScript = data.substring(0, exportPos);
+    const writer = fs.createWriteStream(path);
+
+    writer.write(exampleScript);
+  });
+}
+
+removeExport('./demo/index.min.js', 'utf8');
+removeExport('./demo/api.min.js', 'utf8');