Feat: expose toast.subscribe for subscribing to toast lifecycle outside React

src/state.ts

@@ -360,5 +360,5 @@ export const toast = Object.assign(
     dismiss: ToastState.dismiss,
     loading: ToastState.loading,
   },
-  { getHistory, getToasts },
+  { getHistory, getToasts, subscribe: ToastState.subscribe },
 );

test/src/app/page.tsx

@@ -23,6 +23,20 @@ export default function Home({ searchParams }: any) {
   const [isFinally, setIsFinally] = React.useState(false);
   const [showAriaLabels, setShowAriaLabels] = React.useState(false);
   const [historySize, setHistorySize] = React.useState<number | null>(null);
+  const [subscribeEvents, setSubscribeEvents] = React.useState(0);
+  const [subscribeDismissed, setSubscribeDismissed] = React.useState(0);
+  const dismissedIds = React.useRef(new Set<string | number>());
+
+  React.useEffect(() => {
+    return toast.subscribe((t) => {
+      setSubscribeEvents((count) => count + 1);
+
+      if ('dismiss' in t && t.dismiss) {
+        dismissedIds.current.add(t.id);
+        setSubscribeDismissed(dismissedIds.current.size);
+      }
+    });
+  }, []);
 
   return (
     <>
@@ -33,6 +47,8 @@ export default function Home({ searchParams }: any) {
       <button data-testid="default-button" className="button" onClick={() => toast('My Toast')}>
         Render Toast
       </button>
+      <span data-testid="subscribe-events">{subscribeEvents}</span>
+      <span data-testid="subscribe-dismissed">{subscribeDismissed}</span>
       <button data-testid="default-button-top" className="button" onClick={() => toast('My Toast')}>
         Render Toast Top
       </button>
@@ -148,6 +164,7 @@ export default function Home({ searchParams }: any) {
             ),
             {
               id: undefined,
+              duration: Infinity,
             },
           )
         }

test/tests/basic.spec.ts

@@ -473,4 +473,16 @@ test.describe('Basic functionality', () => {
 
     await expect(toast).toHaveCount(0);
   });
+
+  test('toast.subscribe notifies about lifecycle events', async ({ page }) => {
+    await expect(page.getByTestId('subscribe-events')).toHaveText('0');
+
+    await page.getByTestId('close-button').click();
+    await expect(page.getByTestId('subscribe-events')).toHaveText('1');
+    await expect(page.getByTestId('subscribe-dismissed')).toHaveText('0');
+
+    await page.locator('[data-sonner-toast]').hover();
+    await page.getByLabel('Close toast').click();
+    await expect(page.getByTestId('subscribe-dismissed')).toHaveText('1');
+  });
 });