v3 with middleware

Author: AlemTuzlak

README.md

@@ -43,6 +43,41 @@ export const action = () => {
 
 ## Setup
 
+### Server-side (middleware mode)
+
+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, unstable_toastMiddleware } from "remix-toast/middleware";
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  // Extracts the toast from the request
+  const toast = getToast(context); 
+  // pass it to the client side
+  return { toast }
+}
+
+export default function App({ children }: { children: ReactNode }) {
+  const { toast } = useLoaderData<typeof loader>();
+  
+  useEffect(() => {
+   if(toast){
+    // Call your toast function here
+    alert(toast.message);
+   }
+  }, [toast])
+
+  return (
+    ...
+  );
+}
+
+// Export the middleware to be used in the app
+export const unstable_middleware = [unstable_toastMiddleware()];
+
+```
+
+
 ### Server-side
 
 In order to be able to show toasts anywhere in the app you need to add the following code to your `root.tsx` file.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-toast",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Utility functions for server-side toast notifications",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -19,6 +19,20 @@
         "default": "./dist/index.cjs"
       },
       "types": "./dist/index.d.ts"
+    },
+    "./middleware": {
+      "import": {
+        "types": "./dist/middleware/index.d.ts",
+        "default": "./dist/middleware/index.js",
+        "import": "./dist/middleware/index.js"
+      },
+      "require": {
+        "types": "./dist/middleware/index.d.cts",
+        "import": "./dist/middleware/index.cjs",
+        "require": "./dist/middleware/index.cjs",
+        "default": "./dist/middleware/index.cjs"
+      },
+      "types": "./dist/middleware/index.d.ts"
     }
   },
   "typings": "./dist/index.d.ts",
@@ -30,8 +44,8 @@
     "."
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-    "dev-build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build": "tsup src/index.ts src/middleware/index.ts --format cjs,esm --dts --clean",
+    "dev-build": "tsup src/index.ts src/middleware/index.ts --format cjs,esm --dts --clean",
     "react-router-dev": "npm run dev -w test-apps/react-router",
     "build:dev": "npm run dev-build",
     "build:dev:watch": "npm run dev-build -- --watch",
@@ -47,7 +61,7 @@
     "format-code": "npm run prettier:fix & npm run lint:fix"
   },
   "peerDependencies": {
-    "react-router": ">=7.0.0"
+    "react-router": ">=7.5.0"
   },
   "repository": {
     "type": "git",
@@ -81,7 +95,6 @@
     "happy-dom": "^9.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.1",
-    "react-router": "^7.0.1",
     "tsup": "^7.2.0",
     "typescript": "^5.0.4",
     "vite": "^4.2.1",

package.json

@@ -1,26 +1,14 @@
 import {
-  redirect,
-  SessionStorage,
   SessionIdStorageStrategy,
+  type SessionStorage,
   createCookieSessionStorage,
   data as dataFn,
+  redirect,
 } from "react-router";
-import { FlashSessionValues, ToastMessage, flashSessionValuesSchema } from "./schema";
+import { type FlashSessionValues, type ToastMessage, flashSessionValuesSchema } from "./schema";
+import { type ToastCookieOptions, sessionStorage, toastCookieOptions } from "./session";
 
 const FLASH_SESSION = "flash";
-type ToastCookieOptions = Partial<SessionIdStorageStrategy["cookie"]>;
-
-const toastCookieOptions = {
-  name: "toast-session",
-  sameSite: "lax",
-  path: "/",
-  httpOnly: true,
-  secrets: ["s3Cr3t"],
-} satisfies ToastCookieOptions;
-
-const sessionStorage = createCookieSessionStorage({
-  cookie: toastCookieOptions,
-});
 
 /**
  * Sets the cookie options to be used for the toast cookie

src/index.ts

@@ -0,0 +1,25 @@
+import {
+  type SessionStorage,
+  type unstable_MiddlewareFunction,
+  type unstable_RouterContextProvider,
+  unstable_createContext,
+} from "react-router";
+import { type ToastMessage, getToast as getToastPrimitive } from "..";
+
+const toastContext = unstable_createContext<ToastMessage | null>(null);
+
+export function unstable_toastMiddleware(props?: { customSession?: SessionStorage }): unstable_MiddlewareFunction {
+  const { customSession } = props || {};
+
+  return async function toastMiddleware({ request, context }, next) {
+    const { toast, headers } = await getToastPrimitive(request, customSession);
+    context.set(toastContext, toast ?? null);
+    const res = await next();
+    if (res instanceof Response && toast) {
+      res.headers.append("Set-Cookie", headers.get("Set-Cookie") || "");
+    }
+    return res;
+  };
+}
+
+export const getToast = (context: unstable_RouterContextProvider) => context.get(toastContext);

src/middleware/index.ts

@@ -0,0 +1,15 @@
+import { type SessionIdStorageStrategy, createCookieSessionStorage } from "react-router";
+
+export type ToastCookieOptions = Partial<SessionIdStorageStrategy["cookie"]>;
+
+export const toastCookieOptions = {
+  name: "toast-session",
+  sameSite: "lax",
+  path: "/",
+  httpOnly: true,
+  secrets: ["s3Cr3t"],
+} satisfies ToastCookieOptions;
+
+export const sessionStorage = createCookieSessionStorage({
+  cookie: toastCookieOptions,
+});

src/session.ts

@@ -1,15 +1,15 @@
-import { data, type LinksFunction, type LoaderFunctionArgs } from "react-router";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "react-router";
 import { useEffect } from "react";
+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 } from "remix-toast";
+import { getToast, unstable_toastMiddleware } from "remix-toast/middleware";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: toastStyles }];
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const { toast, headers } = await getToast(request);
-  return data({ toast }, { headers });
+export const loader = async ({ request, context }: LoaderFunctionArgs) => {
+  const toast = getToast(context);
+  return { toast };
 };
 
 export default function App() {
@@ -38,3 +38,5 @@ export default function App() {
     </html>
   );
 }
+
+export const unstable_middleware = [unstable_toastMiddleware()];

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

@@ -9,18 +9,18 @@
     "typecheck": "react-router typegen && tsc --build --noEmit"
   },
   "dependencies": {
-    "@react-router/node": "^7.0.1",
-    "@react-router/serve": "^7.0.1",
+    "@react-router/node": "^7.5.0",
+    "@react-router/serve": "^7.5.0",
     "isbot": "^5.1.17",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^7.0.1",
+    "react-router": "^7.5.0",
     "react-toastify": "^9.1.3",
     "remix-toast": "*"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.0.1",
-    "@react-router/fs-routes": "^7.0.1",
+    "@react-router/dev": "^7.5.0",
+    "@react-router/fs-routes": "^7.5.0",
     "@types/node": "^20",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -30,6 +30,6 @@
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-tsconfig-paths": "^5.1.2",
-    "react-router-devtools": "^1.0.1"
+    "react-router-devtools": "^1.1.9"
   }
 }

test-apps/react-router/package.json

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