chore: upgrade @webcontainer/react and fix RSC examples

Author: SamVerschueren

package.json

@@ -31,7 +31,7 @@
     "@docsearch/react": "^3.8.3",
     "@headlessui/react": "^1.7.0",
     "@radix-ui/react-context-menu": "^2.1.5",
-    "@webcontainer/react": "^0.0.1",
+    "@webcontainer/react": "^0.0.2",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",

src/components/MDX/Sandpack/SandpackRSCRoot.tsx

@@ -15,8 +15,7 @@ import {SandpackProvider} from '@webcontainer/react';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
-import {templateRSC} from './templateRSC';
-import {RscFileBridge} from './sandpack-rsc/RscFileBridge';
+import {viteRscTemplate} from './templates/viteRscTemplate';
 
 type SandpackProps = {
   children: React.ReactNode;
@@ -93,17 +92,17 @@ function SandpackRSCRoot(props: SandpackProps) {
   return (
     <div className="sandpack sandpack--playground w-full my-8" dir="ltr">
       <SandpackProvider
-        files={{...templateRSC, ...files}}
+        template={viteRscTemplate}
+        files={files}
         theme={CustomTheme}
         options={{
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
         }}>
-        <RscFileBridge />
         <CustomPreset
           providedFiles={Object.keys(files)}
-          showOpenInCodeSandbox={false}
+          // showOpenInCodeSandbox={false}
         />
       </SandpackProvider>
     </div>

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -15,6 +15,7 @@ import {SandpackProvider} from '@webcontainer/react';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
+import {viteReactTemplate} from './templates/viteReactTemplate';
 
 type SandpackProps = {
   children: React.ReactNode;
@@ -91,6 +92,7 @@ function SandpackRoot(props: SandpackProps) {
   return (
     <div className="sandpack sandpack--playground w-full my-8" dir="ltr">
       <SandpackProvider
+        template={viteReactTemplate}
         files={files}
         theme={CustomTheme}
         options={{

src/components/MDX/Sandpack/sandpack-rsc/RscFileBridge.tsx

@@ -0,0 +1,132 @@
+import {
+  createFromReadableStream,
+  createFromFetch,
+  setServerCallback,
+  createTemporaryReferenceSet,
+  encodeReply,
+} from '@vitejs/plugin-rsc/browser';
+import React from 'react';
+import {createRoot, hydrateRoot} from 'react-dom/client';
+import {rscStream} from 'rsc-html-stream/client';
+import {GlobalErrorBoundary} from './error-boundary';
+import {createRscRenderRequest} from './request';
+
+async function main() {
+  let setPayload;
+
+  const initialPayload = await createFromReadableStream(rscStream);
+
+  function BrowserRoot() {
+    const [payload, setPayload_] = React.useState(initialPayload);
+
+    React.useEffect(() => {
+      setPayload = (v) => React.startTransition(() => setPayload_(v));
+    }, [setPayload_]);
+
+    React.useEffect(() => {
+      return listenNavigation(() => fetchRscPayload());
+    }, []);
+
+    return payload.root;
+  }
+
+  // re-fetch RSC and trigger re-rendering
+  async function fetchRscPayload() {
+    const renderRequest = createRscRenderRequest(window.location.href);
+    const payload = await createFromFetch(fetch(renderRequest));
+
+    setPayload(payload);
+  }
+
+  setServerCallback(async (id, args) => {
+    const temporaryReferences = createTemporaryReferenceSet();
+    const renderRequest = createRscRenderRequest(window.location.href, {
+      id,
+      body: await encodeReply(args, {temporaryReferences}),
+    });
+    const payload = await createFromFetch(fetch(renderRequest), {
+      temporaryReferences,
+    });
+
+    setPayload(payload);
+
+    const {ok, data} = payload.returnValue;
+
+    if (!ok) {
+      throw data;
+    }
+
+    return data;
+  });
+
+  const browserRoot = (
+    <React.StrictMode>
+      <GlobalErrorBoundary>
+        <BrowserRoot />
+      </GlobalErrorBoundary>
+    </React.StrictMode>
+  );
+
+  if ('__NO_HYDRATE' in globalThis) {
+    createRoot(document).render(browserRoot);
+  } else {
+    hydrateRoot(document, browserRoot, {
+      formState: initialPayload.formState,
+    });
+  }
+
+  if (import.meta.hot) {
+    import.meta.hot.on('rsc:update', () => {
+      fetchRscPayload();
+    });
+  }
+}
+
+function listenNavigation(onNavigation) {
+  window.addEventListener('popstate', onNavigation);
+
+  const oldPushState = window.history.pushState;
+  window.history.pushState = function (...args) {
+    const res = oldPushState.apply(this, args);
+    onNavigation();
+    return res;
+  };
+
+  const oldReplaceState = window.history.replaceState;
+  window.history.replaceState = function (...args) {
+    const res = oldReplaceState.apply(this, args);
+    onNavigation();
+    return res;
+  };
+
+  function onClick(e) {
+    let link = e.target.closest('a');
+    if (
+      link &&
+      link instanceof HTMLAnchorElement &&
+      link.href &&
+      (!link.target || link.target === '_self') &&
+      link.origin === location.origin &&
+      !link.hasAttribute('download') &&
+      e.button === 0 &&
+      !e.metaKey &&
+      !e.ctrlKey &&
+      !e.altKey &&
+      !e.shiftKey &&
+      !e.defaultPrevented
+    ) {
+      e.preventDefault();
+      history.pushState(null, '', link.href);
+    }
+  }
+  document.addEventListener('click', onClick);
+
+  return () => {
+    document.removeEventListener('click', onClick);
+    window.removeEventListener('popstate', onNavigation);
+    window.history.pushState = oldPushState;
+    window.history.replaceState = oldReplaceState;
+  };
+}
+
+main();

src/components/MDX/Sandpack/templates/rsc-framework/entry.browser.jsx

@@ -0,0 +1,86 @@
+import {
+  renderToReadableStream,
+  createTemporaryReferenceSet,
+  decodeReply,
+  loadServerAction,
+  decodeAction,
+  decodeFormState,
+} from '@vitejs/plugin-rsc/rsc';
+import {Root} from '../root.jsx';
+import {parseRenderRequest} from './request.jsx';
+
+export default {fetch: handler};
+
+async function handler(request) {
+  const renderRequest = parseRenderRequest(request);
+  request = renderRequest.request;
+
+  let returnValue;
+  let formState;
+  let temporaryReferences;
+  let actionStatus;
+
+  if (renderRequest.isAction === true) {
+    if (renderRequest.actionId) {
+      const contentType = request.headers.get('content-type');
+      const body = contentType?.startsWith('multipart/form-data')
+        ? await request.formData()
+        : await request.text();
+      temporaryReferences = createTemporaryReferenceSet();
+      const args = await decodeReply(body, {temporaryReferences});
+      const action = await loadServerAction(renderRequest.actionId);
+      try {
+        const data = await action.apply(null, args);
+        returnValue = {ok: true, data};
+      } catch (e) {
+        returnValue = {ok: false, data: e};
+        actionStatus = 500;
+      }
+    } else {
+      const formData = await request.formData();
+      const decodedAction = await decodeAction(formData);
+      try {
+        const result = await decodedAction();
+        formState = await decodeFormState(result, formData);
+      } catch (e) {
+        return new Response('Internal Server Error: server action failed', {
+          status: 500,
+        });
+      }
+    }
+  }
+
+  const rscPayload = {
+    root: <Root url={renderRequest.url} />,
+    formState,
+    returnValue,
+  };
+  const rscOptions = {temporaryReferences};
+  const rscStream = renderToReadableStream(rscPayload, rscOptions);
+
+  if (renderRequest.isRsc) {
+    return new Response(rscStream, {
+      status: actionStatus,
+      headers: {
+        'content-type': 'text/x-component;charset=utf-8',
+      },
+    });
+  }
+
+  const ssrEntryModule = await import.meta.viteRsc.loadModule('ssr', 'index');
+  const ssrResult = await ssrEntryModule.renderHTML(rscStream, {
+    formState,
+    debugNojs: renderRequest.url.searchParams.has('__nojs'),
+  });
+
+  return new Response(ssrResult.stream, {
+    status: ssrResult.status,
+    headers: {
+      'Content-type': 'text/html',
+    },
+  });
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}

src/components/MDX/Sandpack/templates/rsc-framework/entry.rsc.jsx

@@ -0,0 +1,54 @@
+import {createFromReadableStream} from '@vitejs/plugin-rsc/ssr';
+import React from 'react';
+import {renderToReadableStream} from 'react-dom/server.edge';
+import {injectRSCPayload} from 'rsc-html-stream/server';
+
+export async function renderHTML(rscStream, options) {
+  const [rscStream1, rscStream2] = rscStream.tee();
+
+  let payload;
+  function SsrRoot() {
+    payload ??= createFromReadableStream(rscStream1);
+    return React.use(payload).root;
+  }
+
+  const bootstrapScriptContent =
+    await import.meta.viteRsc.loadBootstrapScriptContent('index');
+  let htmlStream;
+  let status;
+  try {
+    htmlStream = await renderToReadableStream(<SsrRoot />, {
+      bootstrapScriptContent: options?.debugNojs
+        ? undefined
+        : bootstrapScriptContent,
+      nonce: options?.nonce,
+      formState: options?.formState,
+    });
+  } catch (e) {
+    status = 500;
+    htmlStream = await renderToReadableStream(
+      <html>
+        <body>
+          <noscript>Internal Server Error: SSR failed</noscript>
+        </body>
+      </html>,
+      {
+        bootstrapScriptContent:
+          `self.__NO_HYDRATE=1;` +
+          (options?.debugNojs ? '' : bootstrapScriptContent),
+        nonce: options?.nonce,
+      }
+    );
+  }
+
+  let responseStream = htmlStream;
+  if (!options?.debugNojs) {
+    responseStream = responseStream.pipeThrough(
+      injectRSCPayload(rscStream2, {
+        nonce: options?.nonce,
+      })
+    );
+  }
+
+  return {stream: responseStream, status};
+}