Merge pull request #22 from codewithkyle/wip-v3

v3

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,17 @@ 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))
+- action button bug ([#20](https://github.com/codewithkyle/notifyjs/issues/20))
+
 ## [2.1.1] - 2021-01-21
 
 ### Fixed

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

@@ -1,6 +1,6 @@
 {
     "name": "@codewithkyle/notifyjs",
-    "version": "2.1.1",
+    "version": "3.0.0",
     "description": "A simple JavaScript library for creating and managing toaster & snackbar notifications",
     "main": "notify.js",
     "files": [
@@ -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,9 +37,8 @@
     "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"
+        "typescript": "^4.2.3"
     }
 }