v3.1 release (#200)

Co-authored-by: Alex Nicholson <alex.n@clove.kitchen>

Author: a16n-dev

packages/docs-v3/src/content/docs/blog/2025-10-07-release-3-1-0.mdx

@@ -0,0 +1,17 @@
+---
+title: V3.1.0 has been released
+description: Release notes for version 3.1.0
+date: 2025-10-07
+---
+
+Version 3.1.0 for React Dialog Async has been released 🎉
+
+## What's new?
+
+This release contains bug fixes for v3, special thanks to rovo89.
+
+- Fixes `DialogProvider` not being marked with `"use client"` after migration to rolldown
+- `useDialogLazy()` now correctly loads the default export of a module by default
+---
+
+Feedback or ideas? We'd love to hear them! Open an issue over on [GitHub](https://github.com/a16n-dev/react-dialog-async/issues).

packages/react-dialog-async/package.json

@@ -2,7 +2,7 @@
   "name": "react-dialog-async",
   "description": "Ergonomic & performant dialog hooks for React & React Native",
   "type": "module",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "sideEffects": false,
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

packages/react-dialog-async/src/DialogProvider/DialogProvider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useContext,
   useEffect,

packages/react-dialog-async/src/useDialogLazy/useDialogLazy.test.tsx

@@ -0,0 +1,50 @@
+import { type PropsWithChildren } from 'react';
+import { expect, test, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { DialogProvider } from '../DialogProvider/DialogProvider.js';
+import { DialogOutlet } from '../DialogOutlet/DialogOutlet.js';
+import { useDialogLazy } from './useDialogLazy.js';
+
+const TestWrapper = ({ children }: PropsWithChildren) => (
+  <DialogProvider>
+    {children}
+    <DialogOutlet />
+  </DialogProvider>
+);
+
+const TestDialog = () => <div>Hello World!</div>;
+
+test('Calling preload() calls the loader function', () => {
+  const loaderFn = vi.fn(async () => TestDialog);
+
+  const { result } = renderHook(() => useDialogLazy(loaderFn), {
+    wrapper: TestWrapper,
+  });
+
+  result.current.preload();
+
+  expect(loaderFn).toHaveBeenCalledTimes(1);
+});
+
+test('Passing a dynamic import in the loader function automatically loads the default export', async () => {
+  const { result } = renderHook(
+    () =>
+      useDialogLazy(async () => {
+        return await new Promise<{ default: typeof TestDialog }>((resolve) =>
+          setTimeout(() => resolve({ default: TestDialog }), 50),
+        );
+      }),
+    {
+      wrapper: TestWrapper,
+    },
+  );
+
+  void result.current.open();
+
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  const dialog = document.querySelector('div');
+
+  expect(dialog).toBeTruthy();
+  expect(dialog?.textContent).toBe('Hello World!');
+});

packages/react-dialog-async/src/useDialogLazy/useDialogLazy.tsx

@@ -5,7 +5,9 @@ import { DialogActionsContext } from '../context/DialogActionsContext.js';
 import type { useDialogLazyReturn } from './types.js';
 
 export function useDialogLazy<D, R, DE extends D | undefined>(
-  componentLoader: () => Promise<AsyncDialogComponent<D, R>>,
+  componentLoader: () => Promise<
+    AsyncDialogComponent<D, R> | { default: AsyncDialogComponent<D, R> }
+  >,
   options?: useDialogOptions<D, DE>,
 ): useDialogLazyReturn<D, R, DE> {
   const id = useId();
@@ -25,7 +27,10 @@ export function useDialogLazy<D, R, DE extends D | undefined>(
       // Call the lazy loader function with a callback to load the component
       void ctx.lazyLoaderFn(async () => {
         if (!componentRef.current) {
-          componentRef.current = await componentLoader();
+          const loaderResult = await componentLoader();
+
+          componentRef.current =
+            'default' in loaderResult ? loaderResult.default : loaderResult;
         }
       });
     }
@@ -42,7 +47,10 @@ export function useDialogLazy<D, R, DE extends D | undefined>(
   const open = useCallback(
     async (data?: D): Promise<R | undefined> => {
       if (!componentRef.current) {
-        componentRef.current = await componentLoader();
+        const loaderResult = await componentLoader();
+
+        componentRef.current =
+          'default' in loaderResult ? loaderResult.default : loaderResult;
       }
 
       return ctx.show(
@@ -66,7 +74,10 @@ export function useDialogLazy<D, R, DE extends D | undefined>(
 
   const preload = async () => {
     if (!componentRef.current) {
-      componentRef.current = await componentLoader();
+      const loaderResult = await componentLoader();
+
+      componentRef.current =
+        'default' in loaderResult ? loaderResult.default : loaderResult;
     }
   };