Closes #21 - opened toaster to custom notifications

Author: codewithkyle

.gitignore

@@ -13,3 +13,9 @@ toast-component.js
 toast-component.js.map
 notify.min.mjs
 notify.mjs
+types.d.ts
+notifier.d.ts
+notify.d.ts
+snackbar-component.d.ts
+toast-component.d.ts
+notify.min.js

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- type declaration files
+- new `append()` function
+- alternate CDN version
+
 ### Fixed
 
 - autofocus bug ([#19](https://github.com/codewithkyle/notifyjs/issues/19))

README.md

@@ -1,6 +1,6 @@
 # Notify.js
 
-Notify.js is a lightweight (2.5kb) utility library for managing simple [snackbar](https://material.io/develop/web/components/snackbars/) and [toaster](https://www.carbondesignsystem.com/components/notification/code/) notifications.
+Notify.js is a lightweight (2.4kb) utility library for managing simple [snackbar](https://material.io/develop/web/components/snackbars/) and [toaster](https://www.carbondesignsystem.com/components/notification/code/) notifications.
 
 ## Installation
 
@@ -13,7 +13,15 @@ npm i --save @codewithkyle/notifyjs
 Or use the CDN version:
 
 ```javascript
-import { Notifier, snackbar, toast } from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@2.1.1/notify.min.mjs";
+import { Notifier, snackbar, toast, append } from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@3.0.0/notify.min.mjs";
+```
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@3.0.0/notify.min.js"></script>
+<script>
+    Notifier.snackbar({ message: "This is a snackbar notification." });
+    Notifier.toast({ title: "CDN Example", message: "This is a toast notification." });
+</script>
 ```
 
 ## Usage
@@ -83,6 +91,24 @@ snackbar({
 });
 ```
 
+Append custom toast notifications:
+
+```typescript
+import { append } from "@codewithkyle/notifyjs";
+
+class CustomToasterElement extends HTMLElement {
+    constructor(message){
+        super();
+        this.innerText = message;
+        setTimeout(() => {
+            this.remove();
+        }, 5000);
+    }
+}
+
+append(new CustomToasterElement());
+```
+
 ---
 
 ## Snackbar Notification
@@ -103,9 +129,9 @@ interface SnackbarNotification {
         classes?: Array<string> | string;
         autofocus?: boolean;
     }>;
-    force?: boolean;
+    force?: boolean; // defaults to true
     classes?: Array<string> | string;
-    autofocus?: boolean;
+    autofocus?: boolean; // defaults to true
 }
 ```
 
@@ -139,15 +165,15 @@ type ToasterNotification = {
     icon?: string; // svg or img
     duration?: number; // in seconds
     classes?: string[];
-    autofocus?: boolean;
+    autofocus?: boolean; // defaults to true
     buttons?: Array<{
         label: string;
         callback: Function;
         ariaLabel?: string;
         classes?: Array<string> | string;
         autofocus?: boolean;
     }>;
-    timer?: "vertical" | "horizontal";
+    timer?: "vertical" | "horizontal" | null; // defaults to null
 };
 ```
 

build/cleanup.js

@@ -12,6 +12,12 @@ const files = [
     "snackbar-component.js.map",
     "toast-component.js",
     "toast-component.js.map",
+    "notifier.d.ts",
+    "notify.d.ts",
+    "snackbar-component.d.ts",
+    "toast-component.d.ts",
+    "types.d.ts",
+    "notify.min.js",
 ];
 
 function normalizePath(file){

package-lock.json

@@ -12,14 +12,20 @@
         "snackbar-component.js.map",
         "toast-component.js",
         "toast-component.js.map",
-        "notify.min.mjs"
+        "notify.min.mjs",
+        "notifier.d.ts",
+        "notify.d.ts",
+        "snackbar-component.d.ts",
+        "toast-component.d.ts",
+        "types.d.ts",
+        "notify.min.js"
     ],
     "scripts": {
         "cleanup": "node ./build/cleanup.js",
         "compile": "tsc",
         "test": "npm run compile && npm run bundle && cp ./notify.min.mjs ./test/notify.min.mjs && serve ./test",
-        "bundle": "rollup notify.js --file notify.mjs --format es --compact && terser notify.mjs -o notify.min.mjs -c && rm notify.mjs",
-        "prerelease": "npm run cleanup && npm run compile && npm run bundle"
+        "bundle": "esbuild ./notify.js --outfile=notify.min.mjs --format=esm --minify --bundle && esbuild ./notify.js --outfile=notify.min.js --format=iife --minify-whitespace --global-name=Notifier  --bundle",
+        "prerelease": "npm run cleanup && npm run compile && npm run bundle && cp ./src/types.d.ts ./types.d.ts"
     },
     "keywords": [
         "snackbar",
@@ -31,7 +37,7 @@
     "author": "Kyle Andrews",
     "license": "MIT",
     "devDependencies": {
-        "rollup": "^2.37.1",
+        "esbuild": "^0.10.0",
         "serve": "^11.3.2",
         "terser": "^5.5.1",
         "typescript": "^4.1.3"

package.json

@@ -9,8 +9,11 @@ export class Notifier {
     private shell: HTMLElement;
 
     constructor() {
-        this.shell = document.createElement("toaster-component");
-        document.body.appendChild(this.shell);
+        this.shell = document.body.querySelector("toaster-component");
+        if (this.shell === null){
+            this.shell = document.createElement("toaster-component");
+            document.body.appendChild(this.shell);
+        }
         this.snackbarQueue = [];
         this.toaster = [];
         this.time = performance.now();
@@ -130,4 +133,8 @@ export class Notifier {
         this.toaster.push(toast);
         this.shell.appendChild(toast.el);
     }
+
+    public append(el:HTMLElement){
+        this.shell.appendChild(el);
+    }
 }

src/notifier.ts

@@ -1,14 +1,16 @@
 import { Notifier } from "./notifier";
 import { SnackbarComponent } from "./snackbar-component";
 import { ToastComponent } from "./toast-component";
+import { SnackbarNotification, ToasterNotification } from "./types";
 
 const globalNotifier = new Notifier();
-const snackbar = globalNotifier.snackbar.bind(globalNotifier);
-const toast = globalNotifier.toast.bind(globalNotifier);
+const snackbar:(settings:Partial<SnackbarNotification>)=>void = globalNotifier.snackbar.bind(globalNotifier);
+const toast:(settings:Partial<ToasterNotification>)=>void = globalNotifier.toast.bind(globalNotifier);
+const append:(el:HTMLElement)=>void = globalNotifier.append.bind(globalNotifier);
 
 // @ts-ignore
 customElements.define("snackbar-component", SnackbarComponent);
 // @ts-ignore
 customElements.define("toast-component", ToastComponent);
 
-export { Notifier, snackbar, toast };
+export { Notifier, snackbar, toast, append };

src/notify.ts

@@ -4,6 +4,7 @@ export class SnackbarComponent extends HTMLElement {
     private settings: SnackbarNotification;
     constructor(snackbar: SnackbarNotification) {
         super();
+        console.log(snackbar);
         this.settings = snackbar;
         this.render();
     }
@@ -44,11 +45,11 @@ export class SnackbarComponent extends HTMLElement {
                     button.innerText = this.settings.buttons[i].label;
                     button.dataset.index = `${i}`;
 
-                    for (let k = 0; k < this.settings.buttons[i].classes.length; k++) {
+                    for (let k = 0; k < this.settings.buttons[i]?.classes?.length; k++) {
                         button.classList.add(this.settings.buttons[i].classes[k]);
                     }
 
-                    if (this.settings.buttons[i].ariaLabel) {
+                    if (this.settings.buttons[i]?.ariaLabel) {
                         button.setAttribute("aria-label", this.settings.buttons[i].ariaLabel);
                     }
 

src/snackbar-component.ts

@@ -56,11 +56,11 @@ export class ToastComponent extends HTMLElement {
                 button.innerText = this.settings.buttons[i].label;
                 button.dataset.index = `${i}`;
 
-                for (let k = 0; k < this.settings.buttons[i].classes.length; k++) {
+                for (let k = 0; k < this.settings.buttons[i]?.classes?.length; k++) {
                     button.classList.add(this.settings.buttons[i].classes[k]);
                 }
 
-                if (this.settings.buttons[i].ariaLabel) {
+                if (this.settings.buttons[i]?.ariaLabel) {
                     button.setAttribute("aria-label", this.settings.buttons[i].ariaLabel);
                 }