RSC 解析器

这是一个用于解析通过网络传输的 React 服务器组件 (RSC) 的工具。React 使用一种特定格式来表示组件/HTML 树或元数据，如所需的导入、悬停边界以及需要加载的 CSS/字体。

我开发这个工具是为了让你更容易理解数据并以可视化方式探索它。

对比

如何使用？

浏览器扩展

你可以在这里添加 Chrome 扩展。

npm 包

你也可以将解析器作为包添加到你的项目中。你将获得一个嵌入式面板组件，可以在 layout.tsx 中渲染。

首先，从 npm 安装 @rsc-parser/embedded，例如：yarn add @rsc-parser/embedded

然后你可以在 layout.tsx 中加载它，例如：

import { Suspense, lazy } from "react";

const RscDevtoolsPanel = lazy(() =>
  import("@rsc-parser/embedded").then(module => ({
    default: module.RscDevtoolsPanel,
  })),
);

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* 在这里使用任何你想要的条件或标志 */}
        {process.env.NODE_ENV === "development" ? (
          <Suspense>
            <RscDevtoolsPanel />
          </Suspense>
        ) : null}
      </body>
    </html>
  );