Merge pull request #40 from forge-42/passthrough_toasts

Passthrough toasts

Author: AlemTuzlak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-toast",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Utility functions for server-side toast notifications",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -100,4 +100,4 @@
     "vite": "^4.2.1",
     "vitest": "^0.30.1"
   }
-}
+}

src/index.ts

@@ -1,15 +1,13 @@
+import { type SessionStorage, createCookieSessionStorage, data as dataFn, redirect } from "react-router";
 import {
-  SessionIdStorageStrategy,
-  type SessionStorage,
-  createCookieSessionStorage,
-  data as dataFn,
-  redirect,
-} from "react-router";
-import { type FlashSessionValues, type ToastMessage, flashSessionValuesSchema } from "./schema";
+  FLASH_SESSION,
+  type FlashSessionValues,
+  type ToastMessage,
+  type ToastMessageWithoutType,
+  flashSessionValuesSchema,
+} from "./schema";
 import { type ToastCookieOptions, sessionStorage, toastCookieOptions } from "./session";
 
-const FLASH_SESSION = "flash";
-
 /**
  * Sets the cookie options to be used for the toast cookie
  *
@@ -71,7 +69,7 @@ type BaseFactoryType = {
 const dataWithToastFactory = ({ type, session }: BaseFactoryType) => {
   return <T>(
     data: T,
-    messageOrToast: string | Omit<ToastMessage, "type">,
+    messageOrToast: string | ToastMessageWithoutType,
     init?: ResponseInit,
     customSession?: SessionStorage,
   ) => {
@@ -83,7 +81,7 @@ const dataWithToastFactory = ({ type, session }: BaseFactoryType) => {
 const redirectWithToastFactory = ({ type, session }: BaseFactoryType) => {
   return (
     redirectUrl: string,
-    messageOrToast: string | Omit<ToastMessage, "type">,
+    messageOrToast: string | ToastMessageWithoutType,
     init?: ResponseInit,
     customSession?: SessionStorage,
   ) => {

src/middleware/index.ts

@@ -5,21 +5,39 @@ import {
   unstable_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);
 
 export function unstable_toastMiddleware(props?: { customSession?: SessionStorage }): unstable_MiddlewareFunction {
   const { customSession } = props || {};
-
+  const sessionToUse = customSession || sessionStorage;
   return async function toastMiddleware({ request, context }, next) {
     const { toast, headers } = await getToastPrimitive(request, customSession);
+
     context.set(toastContext, toast ?? null);
+    // Call the next middleware or route handler
     const res = await next();
+
     if (res instanceof Response && toast) {
-      res.headers.append("Set-Cookie", headers.get("Set-Cookie") || "");
+      res.headers.append("Set-Cookie", headers.get("Set-Cookie") ?? "");
     }
+    const toastToSet = context.get(sessionToastContext);
+
+    if (res instanceof Response && toastToSet) {
+      const session = await sessionToUse.getSession(request.headers.get("Cookie"));
+      session.flash(FLASH_SESSION, { toast: toastToSet });
+      res.headers.append("Set-Cookie", await sessionToUse.commitSession(session));
+    }
+
     return res;
   };
 }
 
+export const setToast = (context: unstable_RouterContextProvider, toast: ToastMessage | null) => {
+  context.set(sessionToastContext, toast);
+};
+
 export const getToast = (context: unstable_RouterContextProvider) => context.get(toastContext);

src/schema.ts

@@ -1,16 +1,27 @@
 import { z } from "zod";
 
-export const toastMessageSchema = z.object({
-  message: z.string(),
-  description: z.string().optional(),
-  duration: z.number().int().positive().optional(),
-  type: z.custom<"info" | "success" | "error" | "warning">(),
-});
+export const toastMessageSchema = z
+  .object({
+    message: z.string(),
+    description: z.string().optional(),
+    duration: z.number().int().positive().optional(),
+    type: z.custom<"info" | "success" | "error" | "warning">(),
+  })
+  .passthrough();
+
+const toastMessageWithoutTypeSchema = z
+  .object({
+    message: z.string(),
+    description: z.string().optional(),
+    duration: z.number().int().positive().optional(),
+  })
+  .passthrough();
 
 export const flashSessionValuesSchema = z.object({
   toast: toastMessageSchema.optional(),
 });
 
-export type ToastMessage = z.infer<typeof toastMessageSchema>;
-
+export type ToastMessage = z.infer<typeof toastMessageSchema> & {};
+export type ToastMessageWithoutType = z.infer<typeof toastMessageWithoutTypeSchema> & {};
 export type FlashSessionValues = z.infer<typeof flashSessionValuesSchema>;
+export const FLASH_SESSION = "flash";

test-apps/react-router/app/routes/_index.tsx

@@ -1,12 +1,19 @@
 import type { MetaFunction } from "react-router";
 import { Link, useSubmit } from "react-router";
-import { redirectWithError } from "remix-toast";
+import { setToast } from "remix-toast/middleware";
+import type { Route } from "./+types/_index";
 
 export const meta: MetaFunction = () => {
   return [{ title: "New Remix App" }, { name: "description", content: "Welcome to Remix!" }];
 };
-export const action = () => {
-  return redirectWithError("/test", "This is an error message");
+export const action = ({ context }: Route.ActionArgs) => {
+  setToast(context, {
+    message: "test toast",
+    description: "from middleware",
+    type: "success",
+  });
+  console.log("here?");
+  return null;
 };
 
 export default function Index() {
@@ -15,6 +22,7 @@ export default function Index() {
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <h1>Welcome to Remix</h1>
       <ul>
+        {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
         <button onClick={() => submit("/", { method: "post" })}>Click Me</button>
         <li>
           <a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer">