Create @rsc-parser/react-client (#1057)

* Create `@rsc-parser/react-client` This package contains the files previously in `@rsc-parser/core/src/react`. The `createFightResponse` function has been included as well, and modified to do less than it did before. Now it's up to the consumer to run `processBinaryChunk`. * Run yarn install
alvarlagerlof · Jun 9, 2024 · 65d0acd · 65d0acd
1 parent 110854e
commit 65d0acd
Show file tree

Hide file tree

Showing 40 changed files with 314 additions and 94 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -8,7 +8,8 @@
       "@rsc-parser/chrome-extension",
       "@rsc-parser/core",
       "@rsc-parser/website",
-      "@rsc-parser/embedded"
+      "@rsc-parser/embedded",
+      "@rsc-parser/react-client"
     ]
   ],
   "access": "public",

diff --git a/.changeset/tame-paws-shave.md b/.changeset/tame-paws-shave.md
@@ -0,0 +1,11 @@
+---
+"@rsc-parser/core": minor
+"@rsc-parser/embedded-example": minor
+"@rsc-parser/chrome-extension": minor
+"@rsc-parser/embedded": minor
+"@rsc-parser/react-client": minor
+"@rsc-parser/storybook": minor
+"@rsc-parser/website": minor
+---
+
+Create `@rsc-parser/react-client`
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -38,6 +38,7 @@
     }
   },
   "dependencies": {
+    "@rsc-parser/react-client": "workspace:^",
     "d3": "7.9.0",
     "react-error-boundary": "4.0.13",
     "react-resizable-panels": "2.0.19"

diff --git a/packages/core/src/components/FlightResponse.stories.tsx b/packages/core/src/components/FlightResponse.stories.tsx
@@ -2,7 +2,10 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { FlightResponse } from "./FlightResponse";
-import { createFlightResponse } from "../createFlightResponse";
+import {
+  createFlightResponse,
+  processBinaryChunk,
+} from "@rsc-parser/react-client";
 import { alvarDevExampleData } from "../example-data/alvar-dev";
 import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
 import { nextjsOrgExampleData } from "../example-data/nextjs-org";
@@ -18,29 +21,44 @@ type Story = StoryObj<typeof FlightResponse>;
 export const alvarDev: Story = {
   name: "alvar.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      alvarDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponse flightResponse={flightResponse} />;
   },
 };
 
 export const ghFredKissDev: Story = {
   name: "gh.fredkiss.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      ghFredkissDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponse flightResponse={flightResponse} />;
   },
 };
 
 export const nextjsOrg: Story = {
   name: "nextjs.org",
   render: () => {
-    const flightResponse = createFlightResponse(
-      nextjsOrgExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponse flightResponse={flightResponse} />;
   },
 };
diff --git a/packages/core/src/components/FlightResponse.tsx b/packages/core/src/components/FlightResponse.tsx
@@ -3,7 +3,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { TabList, Tab, TabPanel, TabProvider } from "@ariakit/react";
 
 import { GenericErrorBoundaryFallback } from "./GenericErrorBoundaryFallback";
-import type { FlightResponse } from "../react/ReactFlightClient";
+import type { FlightResponse } from "@rsc-parser/react-client";
 import { FlightResponseTabSplit } from "./FlightResponseTabSplit";
 import { FlightResponseTabNetwork } from "./FlightResponseTabNetwork";
 import { FlightResponseTabRaw } from "./FlightResponseTabRaw";

diff --git a/packages/core/src/components/FlightResponseChunkDebugInfo.tsx b/packages/core/src/components/FlightResponseChunkDebugInfo.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { DebugInfoChunk } from "../react/ReactFlightClient";
+import { DebugInfoChunk } from "@rsc-parser/react-client";
 
 export function FlightResponseChunkDebugInfo({
   data,

diff --git a/packages/core/src/components/FlightResponseChunkHint.tsx b/packages/core/src/components/FlightResponseChunkHint.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { HintChunk } from "../react/ReactFlightClient";
+import { HintChunk } from "@rsc-parser/react-client";
 
 export function FlightResponseChunkHint({
   data,

diff --git a/packages/core/src/components/FlightResponseChunkModel.stories.tsx b/packages/core/src/components/FlightResponseChunkModel.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { FlightResponseChunkModel } from "./FlightResponseChunkModel";
-import { REACT_ELEMENT_TYPE } from "../react/ReactSymbols";
+import { REACT_ELEMENT_TYPE } from "@rsc-parser/react-client";
 
 const meta: Meta<typeof FlightResponseChunkModel> = {
   argTypes: { onClickID: { action: "clicked client reference" } },

diff --git a/packages/core/src/components/FlightResponseChunkModel.tsx b/packages/core/src/components/FlightResponseChunkModel.tsx
@@ -19,7 +19,7 @@ import {
   Reference,
   isElement,
   isReference,
-} from "../react/ReactFlightClient.js";
+} from "@rsc-parser/react-client";
 
 const ClickIDContext = createContext<{
   onClickID: (name: string) => void;

diff --git a/packages/core/src/components/FlightResponseChunkModule.tsx b/packages/core/src/components/FlightResponseChunkModule.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ModuleChunk } from "../react/ReactFlightClient";
+import { ModuleChunk } from "@rsc-parser/react-client";
 
 function groupChunks(array: (string | number)[]) {
   const newArray = [];

diff --git a/packages/core/src/components/FlightResponseChunkRaw.tsx b/packages/core/src/components/FlightResponseChunkRaw.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Chunk } from "../react/ReactFlightClient";
+import { Chunk } from "@rsc-parser/react-client";
 
 export function FlightResponseChunkRaw({ data }: { data: Chunk }) {
   return (

diff --git a/packages/core/src/components/FlightResponseChunkText.tsx b/packages/core/src/components/FlightResponseChunkText.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { TextChunk } from "../react/ReactFlightClient";
+import { TextChunk } from "@rsc-parser/react-client";
 
 export function FlightResponseChunkText({
   data,

diff --git a/packages/core/src/components/FlightResponseChunkUnknown.tsx b/packages/core/src/components/FlightResponseChunkUnknown.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Chunk } from "../react/ReactFlightClient";
+import { Chunk } from "@rsc-parser/react-client";
 
 export function FlightResponseChunkUnknown({ chunk }: { chunk: Chunk }) {
   return (

diff --git a/packages/core/src/components/FlightResponseTabNetwork.stories.tsx b/packages/core/src/components/FlightResponseTabNetwork.stories.tsx
@@ -5,7 +5,10 @@ import { FlightResponseTabNetwork } from "./FlightResponseTabNetwork";
 import { alvarDevExampleData } from "../example-data/alvar-dev";
 import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
 import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-import { createFlightResponse } from "../createFlightResponse";
+import {
+  createFlightResponse,
+  processBinaryChunk,
+} from "@rsc-parser/react-client";
 import { isRscChunkEvent } from "../events";
 
 const meta: Meta<typeof FlightResponseTabNetwork> = {
@@ -18,29 +21,44 @@ type Story = StoryObj<typeof FlightResponseTabNetwork>;
 export const alvarDev: Story = {
   name: "alvar.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      alvarDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabNetwork flightResponse={flightResponse} />;
   },
 };
 
 export const ghFredKissDev: Story = {
   name: "gh.fredkiss.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      ghFredkissDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabNetwork flightResponse={flightResponse} />;
   },
 };
 
 export const nextjsOrg: Story = {
   name: "nextjs.org",
   render: () => {
-    const flightResponse = createFlightResponse(
-      nextjsOrgExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabNetwork flightResponse={flightResponse} />;
   },
 };
diff --git a/packages/core/src/components/FlightResponseTabNetwork.tsx b/packages/core/src/components/FlightResponseTabNetwork.tsx
@@ -1,4 +1,4 @@
-import { Chunk, FlightResponse, isReference } from "../react/ReactFlightClient";
+import { Chunk, FlightResponse, isReference } from "@rsc-parser/react-client";
 import React, { memo, useContext, useEffect, useRef, useState } from "react";
 import * as d3 from "d3";
 import { EndTimeContext } from "./EndTimeContext";

diff --git a/packages/core/src/components/FlightResponseTabRaw.stories.tsx b/packages/core/src/components/FlightResponseTabRaw.stories.tsx
@@ -5,7 +5,10 @@ import { FlightResponseTabRaw } from "./FlightResponseTabRaw";
 import { alvarDevExampleData } from "../example-data/alvar-dev";
 import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
 import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-import { createFlightResponse } from "../createFlightResponse";
+import {
+  createFlightResponse,
+  processBinaryChunk,
+} from "@rsc-parser/react-client";
 import { isRscChunkEvent } from "../events";
 
 const meta: Meta<typeof FlightResponseTabRaw> = {
@@ -18,29 +21,44 @@ type Story = StoryObj<typeof FlightResponseTabRaw>;
 export const alvarDev: Story = {
   name: "alvar.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      alvarDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabRaw flightResponse={flightResponse} />;
   },
 };
 
 export const ghFredkissDev: Story = {
   name: "gh.fredkiss.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      ghFredkissDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabRaw flightResponse={flightResponse} />;
   },
 };
 
 export const nextjsOrg: Story = {
   name: "nextjs.org",
   render: () => {
-    const flightResponse = createFlightResponse(
-      nextjsOrgExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabRaw flightResponse={flightResponse} />;
   },
 };
diff --git a/packages/core/src/components/FlightResponseTabRaw.tsx b/packages/core/src/components/FlightResponseTabRaw.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { FlightResponse } from "../react/ReactFlightClient";
+import { FlightResponse } from "@rsc-parser/react-client";
 import { FlightResponseChunkRaw } from "./FlightResponseChunkRaw";
 import { EndTimeContext } from "./EndTimeContext";
 

diff --git a/packages/core/src/components/FlightResponseTabSplit.stories.tsx b/packages/core/src/components/FlightResponseTabSplit.stories.tsx
@@ -5,7 +5,10 @@ import { FlightResponseTabSplit } from "./FlightResponseTabSplit";
 import { alvarDevExampleData } from "../example-data/alvar-dev";
 import { ghFredkissDevExampleData } from "../example-data/gh-fredkiss-dev";
 import { nextjsOrgExampleData } from "../example-data/nextjs-org";
-import { createFlightResponse } from "../createFlightResponse";
+import {
+  createFlightResponse,
+  processBinaryChunk,
+} from "@rsc-parser/react-client";
 import { isRscChunkEvent } from "../events";
 
 const meta: Meta<typeof FlightResponseTabSplit> = {
@@ -18,29 +21,44 @@ type Story = StoryObj<typeof FlightResponseTabSplit>;
 export const alvarDev: Story = {
   name: "alvar.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      alvarDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of alvarDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabSplit flightResponse={flightResponse} />;
   },
 };
 
 export const ghFredKissDev: Story = {
   name: "gh.fredkiss.dev",
   render: () => {
-    const flightResponse = createFlightResponse(
-      ghFredkissDevExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of ghFredkissDevExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabSplit flightResponse={flightResponse} />;
   },
 };
 
 export const nextjsOrg: Story = {
   name: "nextjs.org",
   render: () => {
-    const flightResponse = createFlightResponse(
-      nextjsOrgExampleData.filter(isRscChunkEvent),
-    );
+    const flightResponse = createFlightResponse();
+    for (const event of nextjsOrgExampleData.filter(isRscChunkEvent)) {
+      flightResponse._currentTimestamp = event.data.timestamp;
+      processBinaryChunk(
+        flightResponse,
+        Uint8Array.from(event.data.chunkValue),
+      );
+    }
     return <FlightResponseTabSplit flightResponse={flightResponse} />;
   },
 };
diff --git a/packages/core/src/components/FlightResponseTabSplit.tsx b/packages/core/src/components/FlightResponseTabSplit.tsx
@@ -10,8 +10,7 @@ import {
 } from "@ariakit/react";
 import { ErrorBoundary } from "react-error-boundary";
 import { GenericErrorBoundaryFallback } from "./GenericErrorBoundaryFallback";
-import { FlightResponse } from "../react/ReactFlightClient";
-import { Chunk } from "../react/ReactFlightClient";
+import { FlightResponse, Chunk } from "@rsc-parser/react-client";
 import { FlightResponseChunkModule } from "./FlightResponseChunkModule";
 import { FlightResponseChunkHint } from "./FlightResponseChunkHint";
 import { FlightResponseChunkModel } from "./FlightResponseChunkModel";