Implemented rsc fetch

Had to change method from post to put because vite interprets post as an action

Author: grahammendick

packages/plugin-rsc/examples/navigation/src/client.tsx

@@ -22,8 +22,8 @@ async function hydrate() {
     }
     ReactDomClient.hydrateRoot(document, <Shell />);
 }
-async function fetchRSC(url: string, options: any) {
-    const payload = await createFromFetch(fetch(url));
+async function fetchRSC(url: string, {body, ...options}: any) {
+    const payload = await createFromFetch(fetch(url, {...options, body: JSON.stringify(body), method: 'PUT'}));
     return payload.root;
 }
 hydrate();

packages/plugin-rsc/examples/navigation/src/server.tsx

@@ -3,21 +3,37 @@ import { StateNavigator } from 'navigation'
 import stateNavigator from './stateNavigator.ts'
 
 export default async function handler(request: Request): Promise<Response> {
-  const url = new URL(request.url)
-  const { NavigationHandler } = await import('navigation-react')
-  const serverNavigator = new StateNavigator(stateNavigator)
-  serverNavigator.navigateLink(`${url.pathname}${url.search}`)
-  const { App } = await import('./App.tsx')
+  let url: string;
+  let view: any;
+  if (request.method === 'PUT') {
+    const sceneViews: any = {
+      people: await import('./People.tsx'),
+      person: await import('./Person.tsx'),
+      friends: await import('./Friends.tsx')
+    };
+    const {url: reqUrl, sceneViewKey} = await request.json();
+    url = reqUrl;
+    const SceneView = sceneViews[sceneViewKey].default;
+    view = <SceneView />;
+  } else {    
+    let reqUrl = new URL(request.url);
+    url = `${reqUrl.pathname}${reqUrl.search}`;
+    const { App } = await import('./App.tsx');
+    view = <App url={url} />;
+  }
+  const { NavigationHandler } = await import('navigation-react');
+  const serverNavigator = new StateNavigator(stateNavigator);
+  serverNavigator.navigateLink(url)
   const root = (
     <>
       <NavigationHandler stateNavigator={serverNavigator}>
-        <App url={`${url.pathname}${url.search}`} />
+        {view}
       </NavigationHandler>
     </>
-  )
+  );
   // @ts-ignore
-  const nonce = !process.env.NO_CSP ? crypto.randomUUID() : undefined
-  const response = await renderRequest(request, root, { nonce })
+  const nonce = !process.env.NO_CSP ? crypto.randomUUID() : undefined;
+  const response = await renderRequest(request, root, { nonce });
   if (nonce) {
     response.headers.set(
       'content-security-policy',
@@ -27,11 +43,11 @@ export default async function handler(request: Request): Promise<Response> {
           import.meta.env.DEV ? `'unsafe-eval'` : ``
         } ; ` +
         `style-src 'self' 'nonce-${nonce}'; `,
-    )
+    );
   }
-  return response
+  return response;
 }
 
 if (import.meta.hot) {
-  import.meta.hot.accept()
+  import.meta.hot.accept();
 }