fix: assign statically increasing ids to toasts

fix #15

.github/workflows/release.yaml

@@ -16,13 +16,22 @@ jobs:
         with:
           node-version: '20.x'
 
-      - name: NPM install, build, release and deploy
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build app
+        run: npm run build -- --base-href "/hot-toast/"
+
+      - name: Build library
+        run: npm run build:lib
+
+      - name: Release
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          npm ci
-          npm run build -- --base-href "/hot-toast/"
-          npm run build:lib
-          npx semantic-release
-          npx angular-cli-ghpages --name="mr. Dharmen's Bot" [email protected] --dir=dist/toast/browser
+        run: npx semantic-release
+
+      - name: Deploy to GitHub Pages
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx angular-cli-ghpages --name="mr. Dharmen's Bot" [email protected] --dir=dist/toast/browser

.github/workflows/test.yaml

@@ -34,13 +34,20 @@ jobs:
           HUSKY_SKIP_INSTALL: true
         run: npm ci
 
-      - name: Lint, build, test and release
+      - name: Lint
+        run: npm run lint -- @ngxpert/hot-toast
+
+      - name: Build library
+        run: npm run build:lib
+
+      - name: Build
+        run: npm run build
+
+      - name: Test
+        run: npm run test
+
+      - name: Release
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: |
-          npm run lint -- @ngxpert/hot-toast
-          npm run build:lib
-          npm run build
-          npm run test
-          npx semantic-release --debug
+        run: npx semantic-release --debug

package.json

@@ -47,7 +47,7 @@
     "@angular/platform-browser": "^18.0.2",
     "@angular/platform-browser-dynamic": "^18.0.2",
     "@angular/router": "^18.0.2",
-    "@ngneat/overview": "6.0.0",
+    "@ngneat/overview": "6.1.1",
     "@ngxpert/cmdk": "^1.0.0",
     "prismjs": "^1.23.0",
     "rxjs": "~6.6.0",

projects/ngxpert/hot-toast/package.json

@@ -9,7 +9,7 @@
   },
   "peerDependencies": {
     "@angular/core": ">= 18.0.0",
-    "@ngneat/overview": "6.0.0"
+    "@ngneat/overview": "6.1.1"
   },
   "keywords": [
     "angular",

projects/ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.ts

@@ -178,8 +178,13 @@ export class HotToastContainerComponent {
           item.options.group = { parent: ref };
           // We need to give a tick's delay so that IDs are generated properly
           setTimeout(() => {
-            const itemRef = this.toastService.show(item.options.message, item.options, skipAttachToParent);
-            innerResolve(itemRef);
+            try {
+              const itemRef = this.toastService.show(item.options.message, item.options, skipAttachToParent);
+              innerResolve(itemRef);
+            } catch (error) {
+              console.error('Error creating toast', error);
+              innerResolve(null);
+            }
           });
         });
       });

projects/ngxpert/hot-toast/src/lib/components/hot-toast/hot-toast.component.ts

@@ -158,10 +158,10 @@ export class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnCh
     return this.groupRefs.filter((ref) => !!ref);
   }
   set groupChildrenToastRefs(value: CreateHotToastRef<unknown>[]) {
-    this.groupRefs = value;
-
     // maybe below will prevent execution in ngDoCheck?
-    (this.toastRef as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
+    // (this.toastRef as { groupRefs: CreateHotToastRef<unknown>[] }).groupRefs = value;
+
+    this.groupRefs = value;
   }
 
   get groupChildrenToasts() {

projects/ngxpert/hot-toast/src/lib/hot-toast.model.ts

@@ -99,7 +99,7 @@ export interface Toast<DataType> {
    * Unique id to associate with hot-toast.
    * There can't be multiple hot-toasts opened with same id.
    *
-   * @default Date.now().toString()
+   * @default HotToastService.nextId
    */
   id: string;
 

projects/ngxpert/hot-toast/src/lib/hot-toast.service.ts

@@ -26,6 +26,7 @@ import {
 
 @Injectable({ providedIn: 'root' })
 export class HotToastService implements HotToastServiceMethods {
+  static nextId = 0;
   private _isInitialized = false;
   private _componentRef: CompRef<HotToastContainerComponent>;
 
@@ -331,16 +332,15 @@ export class HotToastService implements HotToastServiceMethods {
       this.init();
     }
 
-    const now = Date.now();
-    const id = options?.id ?? now.toString();
+    const id = options?.id ?? `toast-${HotToastService.nextId++}`;
 
     if (
       !this.isDuplicate(id) &&
       (!options.persist?.enabled || (options.persist?.enabled && this.handleStorageValue(id, options)))
     ) {
       const toast: Toast<DataType | unknown> = {
         ariaLive: options?.ariaLive ?? 'polite',
-        createdAt: now,
+        createdAt: Date.now(),
         duration: options?.duration ?? HOT_TOAST_DEFAULT_TIMEOUTS[type],
         id,
         message,

src/app/sections/grouping/grouping.component.ts

@@ -31,7 +31,7 @@ export class GroupingComponent implements OnInit {
     { label: 'HTML', value: 'html' },
     { label: 'CSS', value: 'css' },
   ];
-  readonly commonOptions: ToastOptions<unknown> = { autoClose: false, dismissible: true };
+  readonly commonOptions: ToastOptions<unknown> = { autoClose: false };
   readonly childNotifications = (ngTemplateGroupItem: Content): HotToastGroupChild[] => [
     {
       options: {
@@ -132,7 +132,6 @@ export class GroupingComponent implements OnInit {
           this.parentRef = this.toast.show(this.ngTemplateGroup, {
             position: 'top-right',
             autoClose: false,
-            dismissible: true,
             className: 'hot-toast-custom-class',
             group: {
               className: 'hot-toast-custom-class',