feat: support show react element from react server function (#492)

* feat: support show react element from react server function * fix: test id
emilkowalski · Nov 2, 2024 · 682702f · 682702f
1 parent 6fca6ab
commit 682702f
Show file tree

Hide file tree

Showing 11 changed files with 2,691 additions and 1,218 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/state.ts b/src/state.ts
@@ -129,7 +129,11 @@ class Observer {
     const originalPromise = p
       .then(async (response) => {
         result = ['resolve', response];
-        if (isHttpResponse(response) && !response.ok) {
+      const isReactElementResponse = React.isValidElement(response);
+      if (isReactElementResponse) {
+        shouldDismiss = false;
+        this.create({ id, type: 'default', message: response });
+      } else if (isHttpResponse(response) && !response.ok) {
           shouldDismiss = false;
           const message =
             typeof data.error === 'function' ? await data.error(`HTTP error! status: ${response.status}`) : data.error;

diff --git a/test/next.config.js b/test/next.config.js
@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    appDir: true,
-  },
-};
+const nextConfig = {};
 
 module.exports = nextConfig;
diff --git a/test/package.json b/test/package.json
@@ -12,12 +12,13 @@
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "ai": "^3.4.9",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.4",
-    "next": "13.4.19",
-    "react": "18.2.0",
+    "next": "14.2.15",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "sonner": "workspace:*",
-    "react-dom": "18.2.0",
     "typescript": "4.9.5"
   }
 }
diff --git a/test/src/app/action.tsx b/test/src/app/action.tsx
@@ -0,0 +1,17 @@
+'use server';
+import { createStreamableUI } from 'ai/rsc';
+
+export async function action() {
+  'use server';
+  let progress = 0;
+  const ui = createStreamableUI('loading 0%');
+  const interval = setInterval(() => {
+    progress += 10;
+    ui.update('loading ' + progress + '%');
+    if (progress >= 100) {
+      clearInterval(interval);
+      ui.update('load complete');
+    }
+  }, 100);
+  return ui.value;
+}
diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { Toaster, toast } from 'sonner';
+import { action } from '@/app/action';
 
 const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));
 
@@ -74,6 +75,21 @@ export default function Home({ searchParams }: any) {
       >
         Render Promise Toast
       </button>
+      <button
+        data-testid="rsf-promise"
+        data-finally={isFinally ? '1' : '0'}
+        className="button"
+        onClick={() =>
+          toast.promise(action(), {
+            loading: 'Loading...',
+            success: 'Loaded',
+            error: 'Error',
+            finally: () => setIsFinally(true),
+          })
+        }
+      >
+        Render React Server Function Toast
+      </button>
       <button
         data-testid="custom"
         className="button"

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,6 +3,6 @@
     "jsx": "react",
     "moduleResolution": "node",
     "esModuleInterop": true,
-    "lib": ["es2015", "dom"],
-  },
+    "lib": ["es2015", "dom"]
+  }
 }
diff --git a/website/src/components/CodeBlock/code-block.module.css b/website/src/components/CodeBlock/code-block.module.css
@@ -35,10 +35,7 @@
   cursor: pointer;
   opacity: 0;
   color: var(--gray12);
-  transition:
-    background 200ms,
-    box-shadow 200ms,
-    opacity 200ms;
+  transition: background 200ms, box-shadow 200ms, opacity 200ms;
 }
 
 .copyButton:focus-visible {

diff --git a/website/src/components/Hero/hero.module.css b/website/src/components/Hero/hero.module.css
@@ -51,12 +51,8 @@
   font-weight: 600;
   flex-shrink: 0;
   font-family: inherit;
-  box-shadow:
-    0px 0px 0px 1px rgba(0, 0, 0, 0.06),
-    0px 1px 0px 0px rgba(0, 0, 0, 0.08),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.04),
-    0px 3px 3px 0px rgba(0, 0, 0, 0.02),
-    0px 4px 4px 0px rgba(0, 0, 0, 0.01);
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 0px 0px rgba(0, 0, 0, 0.08),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 4px 0px rgba(0, 0, 0, 0.01);
   position: relative;
   overflow: hidden;
   cursor: pointer;
@@ -66,9 +62,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition:
-    box-shadow 200ms,
-    background 200ms;
+  transition: box-shadow 200ms, background 200ms;
   width: 152px;
 }
 
@@ -79,12 +73,8 @@
 }
 .button:focus-visible {
   outline: none;
-  box-shadow:
-    0px 0px 0px 1px rgba(0, 0, 0, 0.06),
-    0px 1px 0px 0px rgba(0, 0, 0, 0.08),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.04),
-    0px 3px 3px 0px rgba(0, 0, 0, 0.02),
-    0px 4px 4px 0px rgba(0, 0, 0, 0.01),
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 0px 0px rgba(0, 0, 0, 0.08),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 4px 0px rgba(0, 0, 0, 0.01),
     0 0 0 2px rgba(0, 0, 0, 0.15);
 }
 

diff --git a/website/src/globals.css b/website/src/globals.css
@@ -126,10 +126,7 @@ code {
   font-family: var(--font-sans);
   cursor: pointer;
   color: var(--gray12);
-  transition:
-    border-color 200ms,
-    background 200ms,
-    box-shadow 200ms;
+  transition: border-color 200ms, background 200ms, box-shadow 200ms;
 }
 
 .button:hover {
@@ -144,12 +141,8 @@ code {
 
 .button:focus-visible {
   outline: none;
-  box-shadow:
-    0px 0px 0px 1px rgba(0, 0, 0, 0.06),
-    0px 1px 0px 0px rgba(0, 0, 0, 0.08),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.04),
-    0px 3px 3px 0px rgba(0, 0, 0, 0.02),
-    0px 4px 4px 0px rgba(0, 0, 0, 0.01),
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 0px 0px rgba(0, 0, 0, 0.08),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 4px 0px rgba(0, 0, 0, 0.01),
     0 0 0 2px rgba(0, 0, 0, 0.15);
 }
 

diff --git a/website/src/style.css b/website/src/style.css
@@ -56,10 +56,7 @@ body {
   font-family: var(--font-sans);
   cursor: pointer;
   color: var(--gray12);
-  transition:
-    border-color 200ms,
-    background 200ms,
-    box-shadow 200ms;
+  transition: border-color 200ms, background 200ms, box-shadow 200ms;
   margin: 1.5rem 0 0;
 }
 
@@ -79,12 +76,8 @@ body {
 
 .button:focus-visible {
   outline: none;
-  box-shadow:
-    0px 0px 0px 1px rgba(0, 0, 0, 0.06),
-    0px 1px 0px 0px rgba(0, 0, 0, 0.08),
-    0px 2px 2px 0px rgba(0, 0, 0, 0.04),
-    0px 3px 3px 0px rgba(0, 0, 0, 0.02),
-    0px 4px 4px 0px rgba(0, 0, 0, 0.01),
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 0px 0px rgba(0, 0, 0, 0.08),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 4px 0px rgba(0, 0, 0, 0.01),
     0 0 0 2px rgba(0, 0, 0, 0.15);
 }