fix(snackbar): review and fix issues (#7)

packages/snackbar/package.json

@@ -46,16 +46,16 @@
     "watch": "wireit"
   },
   "dependencies": {
+    "@alwatr/delay": "^5.0.0",
     "@alwatr/flux": "^4.0.2",
     "@alwatr/logger": "^5.0.0",
     "@alwatr/package-tracer": "^5.0.0",
-    "@alwatr/parse-duration": "^5.0.0",
-    "@alwatr/wait": "^1.1.16",
     "@nexim/element": "^1.1.1",
     "lit": "^3.2.1"
   },
   "devDependencies": {
     "@alwatr/nano-build": "^5.0.0",
+    "@alwatr/parse-duration": "^5.0.0",
     "@alwatr/type-helper": "^5.0.0",
     "@nexim/typescript-config": "^1.1.0",
     "ava": "^6.2.0",

packages/snackbar/src/lib/element.ts

@@ -1,4 +1,4 @@
-import {waitForTimeout} from '@alwatr/wait';
+import {delay} from '@alwatr/delay';
 import {LightDomMixin, LoggerMixin} from '@nexim/element';
 import {html, LitElement, nothing, type PropertyValues, type TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
@@ -55,7 +55,7 @@ export class SnackbarElement extends LightDomMixin(LoggerMixin(LitElement)) {
 
     this.removeAttribute('open');
 
-    await waitForTimeout(SnackbarElement.openAndCloseAnimationDuration__);
+    await delay.by(SnackbarElement.openAndCloseAnimationDuration__);
     this.remove();
   }
 

packages/snackbar/src/lib/handler.ts

@@ -1,18 +1,17 @@
+import {delay} from '@alwatr/delay';
 import {createLogger} from '@alwatr/logger';
-import {parseDuration} from '@alwatr/parse-duration';
-import {waitForTimeout} from '@alwatr/wait';
 
 import {snackbarActionButtonClickedSignal, snackbarCloseButtonClickedSignal, snackbarSignal} from './signal.js';
 
 import type {SnackbarElement} from './element.js';
 import type {SnackbarActionHandler, SnackbarOptions} from './type.js';
 
-const logger = createLogger(`${__package_name__}/handler`);
+const logger = createLogger(`${__package_name__}`);
 
 /**
  * Store the function to close the last snackbar.
  */
-let closeLastSnackbar: (() => Promise<void>) | null = null;
+let closeLastSnackbar: (() => MaybePromise<void>) | null = null;
 
 /**
  * Store the function to unsubscribe the action button handler after close or action button clicked.
@@ -51,22 +50,20 @@ function createSnackbarElement(options: SnackbarOptions): SnackbarElement {
  * @param closeSnackbar - Function to close the snackbar.
  * @param handler - Handler to be called when the action button is clicked.
  */
-function handleActionButtonClick(closeSnackbar: () => Promise<void>, handler?: SnackbarActionHandler): void {
+function handleActionButtonClick(closeSnackbar: () => Promise<void>, handler?: SnackbarActionHandler): Promise<void> {
   logger.logMethod?.('handleActionButtonClick');
 
-  const actionButtonClickHandler = () => {
-    logger.logOther?.('Snackbar action button clicked.');
-
-    handler?.();
-    return closeSnackbar();
-  };
-
-  /**
-   * Store the function to unsubscribe the action button handler after close or action button clicked.
-   *
-   * TODO: check why once not work
-   */
-  unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null)).unsubscribe;
+  // non-blocking to handler done
+  (async () => {
+    try {
+      await handler!();
+    }
+    catch (error) {
+      logger.error('handleActionButtonClick', 'call_handler_failed', error);
+    }
+  })();
+
+  return closeSnackbar();
 }
 
 /**
@@ -94,8 +91,18 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
     closed = true;
   };
 
+  await closeLastSnackbar?.();
+  closeLastSnackbar = closeSnackbar;
+
   if (options.action != null) {
-    handleActionButtonClick(closeSnackbar, options.action.handler);
+    /**
+     * Store the function to unsubscribe the action button handler after close or action button clicked.
+     *
+     * TODO: check why once not work
+     */
+    unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(
+      handleActionButtonClick.bind(null, closeSnackbar, options.action.handler),
+    ).unsubscribe;
   }
 
   if (options.addCloseButton === true) {
@@ -104,13 +111,11 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
   }
 
   // Close the last snackbar if it exists
-  await closeLastSnackbar?.();
-  closeLastSnackbar = closeSnackbar;
   document.body.appendChild(element);
 
   // Set a timeout to close the snackbar if duration is not infinite
   if (options.duration !== 'infinite') {
-    waitForTimeout(parseDuration(options.duration)).then(closeSnackbar);
+    delay.by(options.duration).then(closeSnackbar);
   }
 }
 

packages/snackbar/src/lib/type.ts

@@ -31,6 +31,8 @@ export type SnackbarOptions = {
 
   /**
    * Duration for which the snackbar is displayed. `infinite` for infinite duration.
+   *
+   * @default `5s`
    */
   duration?: Duration | 'infinite';
 

packages/snackbar/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import {waitForAnimationFrame, waitForTimeout} from '@alwatr/wait';
+import {delay} from '@alwatr/delay';
 
 /**
  * Waits for the next frame to ensure the DOM has been fully calculated.
@@ -11,8 +11,8 @@ import {waitForAnimationFrame, waitForTimeout} from '@alwatr/wait';
  */
 export function waitForNextFrame(): Promise<void> {
   return new Promise((resolve) => {
-    waitForAnimationFrame().then(() => {
-      waitForTimeout(0).then(resolve);
+    delay.untilNextAnimationFrame().then(() => {
+      delay.immediate().then(resolve);
     });
   });
 }

yarn.lock

@@ -141,15 +141,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@alwatr/global-scope@npm:^1.1.21":
-  version: 1.1.26
-  resolution: "@alwatr/global-scope@npm:1.1.26"
-  dependencies:
-    "@alwatr/package-tracer": "npm:^1.0.4"
-  checksum: 10c0/d094cf6e1f0da79866cdde1abd45b073a4206c972ba274e57dd5fdc8a62db7fd4f5973360cfc2da03a8761cbd86bc9798f41fcf4a2ea5cf6b6b15f52a9f623a0
-  languageName: node
-  linkType: hard
-
 "@alwatr/global-this@npm:^5.0.0":
   version: 5.0.0
   resolution: "@alwatr/global-this@npm:5.0.0"
@@ -257,13 +248,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@alwatr/package-tracer@npm:^1.0.4":
-  version: 1.0.8
-  resolution: "@alwatr/package-tracer@npm:1.0.8"
-  checksum: 10c0/c9fe659a98c3225e8d3a188bd14e1dfd5ba2cc782a3faff689b54bd274419c0a4729a2785dd1304c549874f601e236bc0c570c3d2b12ca6c1d6ca5825f196747
-  languageName: node
-  linkType: hard
-
 "@alwatr/package-tracer@npm:^5.0.0":
   version: 5.0.0
   resolution: "@alwatr/package-tracer@npm:5.0.0"
@@ -354,15 +338,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@alwatr/wait@npm:^1.1.16":
-  version: 1.1.16
-  resolution: "@alwatr/wait@npm:1.1.16"
-  dependencies:
-    "@alwatr/global-scope": "npm:^1.1.21"
-  checksum: 10c0/3ac3af8b6c913a1f0414bc8893ac3ba0175a6e4e2732395a8f2ee263d3a2f65bb22bcfef78d57b611d00be0d75b9cf535ebf854c99db25b51cfd47e9d41e9b23
-  languageName: node
-  linkType: hard
-
 "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.22.13":
   version: 7.26.2
   resolution: "@babel/code-frame@npm:7.26.2"
@@ -1066,13 +1041,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@nexim/snackbar@workspace:packages/snackbar"
   dependencies:
+    "@alwatr/delay": "npm:^5.0.0"
     "@alwatr/flux": "npm:^4.0.2"
     "@alwatr/logger": "npm:^5.0.0"
     "@alwatr/nano-build": "npm:^5.0.0"
     "@alwatr/package-tracer": "npm:^5.0.0"
     "@alwatr/parse-duration": "npm:^5.0.0"
     "@alwatr/type-helper": "npm:^5.0.0"
-    "@alwatr/wait": "npm:^1.1.16"
     "@nexim/element": "npm:^1.1.1"
     "@nexim/typescript-config": "npm:^1.1.0"
     ava: "npm:^6.2.0"