Add a button to parse from __next_f from script tags in @rsc-parse/…

…embedded

Next.js stores the RSC payload in script tags. I've added a button to the panel in `@rsc-parse/embedded` to make #923 easier to debug.

.changeset/nine-cobras-fly.md

@@ -0,0 +1,10 @@
+---
+"@rsc-parser/embedded": patch
+"@rsc-parser/core": patch
+"@rsc-parser/embedded-example": patch
+"@rsc-parser/chrome-extension": patch
+"@rsc-parser/storybook": patch
+"@rsc-parser/website": patch
+---
+
+Add a button to read Next.js payload script tags

packages/core/src/components/ReadNextScriptTagsButton.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ReadNextScriptTagsButton } from "./ReadNextScriptTagsButton";
+
+const meta: Meta<typeof ReadNextScriptTagsButton> = {
+  component: ReadNextScriptTagsButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof ReadNextScriptTagsButton>;
+
+export const example: Story = {
+  name: "example",
+};

packages/core/src/components/ReadNextScriptTagsButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export function ReadNextScriptTagsButton({
+  onClickRead,
+}: {
+  onClickRead: () => void;
+}) {
+  return (
+    <button
+      className="rounded-md bg-slate-600 px-2 py-0.5 text-white dark:bg-slate-300 dark:text-black"
+      onClick={onClickRead}
+    >
+      Read Next.js script tag payload
+    </button>
+  );
+}

packages/core/src/main.ts

@@ -6,6 +6,7 @@ import { Logo } from "./components/Logo";
 import { RecordButton } from "./components/RecordButton";
 import { DebugCopyMessagesButton } from "./components/DebugCopyMessagesButton";
 import { ClearMessagesButton } from "./components/ClearMessagesButton";
+import { ReadNextScriptTagsButton } from "./components/ReadNextScriptTagsButton";
 import { PanelLayout } from "./components/PanelLayout";
 import {
   BottomPanel,
@@ -24,6 +25,7 @@ export {
   RecordButton,
   DebugCopyMessagesButton,
   ClearMessagesButton,
+  ReadNextScriptTagsButton,
   PanelLayout,
   BottomPanel,
   BottomPanelOpenButton,

packages/embedded/RscDevtoolsPanel.tsx

@@ -15,6 +15,7 @@ import {
   ClearMessagesButton,
   PanelLayout,
   fetchPatcher,
+  ReadNextScriptTagsButton,
 } from "@rsc-parser/core";
 import React, {
   ReactNode,
@@ -28,8 +29,13 @@ import React, {
 export function RscDevtoolsPanel() {
   const [isOpen, setIsOpen] = useState(false);
 
-  const { isRecording, startRecording, messages, clearMessages } =
-    useRscMessages();
+  const {
+    isRecording,
+    startRecording,
+    messages,
+    clearMessages,
+    readNextScriptTags,
+  } = useRscMessages();
 
   return (
     <ApplyStylingOnClient>
@@ -53,6 +59,11 @@ export function RscDevtoolsPanel() {
               {messages.length > 0 ? (
                 <ClearMessagesButton onClickClearMessages={clearMessages} />
               ) : null}
+              <ReadNextScriptTagsButton
+                onClickRead={() => {
+                  readNextScriptTags();
+                }}
+              />
             </>
           }
           closeButton={
@@ -146,7 +157,48 @@ function useRscMessages() {
     setMessages([]);
   }, []);
 
-  return { isRecording, startRecording, messages, clearMessages };
+  const readNextScriptTags = useCallback(() => {
+    try {
+      // @ts-expect-error This is a hack
+      const payload = self.__next_f.map((f) => f?.[1]).join("");
+
+      console.log("TEST", payload);
+
+      const messages = [
+        {
+          type: "RSC_CHUNK",
+          tabId: 0,
+          data: {
+            fetchUrl: window.location.href,
+            fetchMethod: "GET",
+            fetchStartTime: 0,
+            chunkStartTime: 0,
+            chunkEndTime: 0,
+            chunkValue: Array.from(new TextEncoder().encode(payload)),
+          },
+        } satisfies RscChunkMessage,
+      ];
+
+      setIsRecording(true);
+      startTransition(() => {
+        setMessages(() => messages);
+      });
+    } catch (error) {
+      console.error(
+        new Error("Error parsing Next.js payload", {
+          cause: error,
+        }),
+      );
+    }
+  }, []);
+
+  return {
+    isRecording,
+    startRecording,
+    messages,
+    clearMessages,
+    readNextScriptTags,
+  };
 }
 
 function arraysEqual(a: unknown[], b: unknown[]) {