Merge pull request #48 from kenn/stable

Stabilized middleware API for RR v7.9+

Author: AlemTuzlak

README.md

@@ -52,7 +52,7 @@ export const action = () => {
 In order to be able to show toasts anywhere in the app you need to add the following code to your `root.tsx` file.
 
 ```tsx
-import { getToast, setToast, unstable_toastMiddleware } from "remix-toast/middleware";
+import { getToast, setToast, toastMiddleware } from "remix-toast/middleware";
 
 export const loader = async ({ request, context }: Route.LoaderArgs) => {
   // Extracts the toast from the request
@@ -82,7 +82,7 @@ export default function App({ loaderData }: Route.ComponentArgs) {
 }
 
 // Export the middleware to be used in the app
-export const unstable_middleware = [unstable_toastMiddleware()];
+export const middleware = [toastMiddleware()];
 
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-toast",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Utility functions for server-side toast notifications",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,7 +61,7 @@
     "format-code": "npm run prettier:fix & npm run lint:fix"
   },
   "peerDependencies": {
-    "react-router": ">=7.8.0"
+    "react-router": ">=7.9.0"
   },
   "repository": {
     "type": "git",

src/middleware/index.ts

@@ -1,17 +1,12 @@
-import {
-  type SessionStorage,
-  type unstable_MiddlewareFunction,
-  type unstable_RouterContextProvider,
-  unstable_createContext,
-} from "react-router";
+import { type SessionStorage, type MiddlewareFunction, type RouterContextProvider, createContext } from "react-router";
 import { type ToastMessage, getToast as getToastPrimitive } from "..";
 import { FLASH_SESSION } from "../schema";
 import { sessionStorage } from "../session";
 
-const toastContext = unstable_createContext<ToastMessage | null>(null);
-const sessionToastContext = unstable_createContext<ToastMessage | null>(null);
+const toastContext = createContext<ToastMessage | null>(null);
+const sessionToastContext = createContext<ToastMessage | null>(null);
 
-export function unstable_toastMiddleware(props?: { customSession?: SessionStorage }): unstable_MiddlewareFunction {
+export function toastMiddleware(props?: { customSession?: SessionStorage }): MiddlewareFunction {
   const { customSession } = props || {};
   const sessionToUse = customSession || sessionStorage;
   return async function toastMiddleware({ request, context }, next) {
@@ -37,11 +32,16 @@ export function unstable_toastMiddleware(props?: { customSession?: SessionStorag
 }
 
 export const setToast = (
-  context: unstable_RouterContextProvider | Readonly<unstable_RouterContextProvider>,
+  context: RouterContextProvider | Readonly<RouterContextProvider>,
   toast: ToastMessage | null,
 ) => {
   context.set(sessionToastContext, toast);
 };
 
-export const getToast = (context: unstable_RouterContextProvider | Readonly<unstable_RouterContextProvider>) =>
+export const getToast = (context: RouterContextProvider | Readonly<RouterContextProvider>) =>
   context.get(toastContext);
+
+/**
+ * @deprecated Use `toastMiddleware` instead.
+ */
+export const unstable_toastMiddleware = toastMiddleware;

test-apps/react-router/app/root.tsx

@@ -3,7 +3,7 @@ import { type LinksFunction, type LoaderFunctionArgs, data } from "react-router"
 import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "react-router";
 import { ToastContainer, toast as notify } from "react-toastify";
 import toastStyles from "react-toastify/ReactToastify.css?url";
-import { getToast, unstable_toastMiddleware } from "remix-toast/middleware";
+import { getToast, toastMiddleware } from "remix-toast/middleware";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: toastStyles }];
 
@@ -39,4 +39,4 @@ export default function App() {
   );
 }
 
-export const unstable_middleware = [unstable_toastMiddleware()];
+export const middleware = [toastMiddleware()];

test-apps/react-router/react-router.config.ts

@@ -2,12 +2,12 @@ import type { Config } from "@react-router/dev/config";
 
 declare module "react-router" {
   interface Future {
-    unstable_middleware: true; // 👈 Enable middleware types
+    v8_middleware: true; // 👈 Enable middleware types
   }
 }
 
 export default {
   future: {
-    unstable_middleware: true, // 👈 Enable middleware
+    v8_middleware: true, // 👈 Enable middleware
   },
 } satisfies Config;