@rsdoctor/components 0.0.0-next-20240620044732

package/dist/components/Loader/Analysis/files.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { endsWith, get, sumBy } from "lodash-es";
+import { Card, Col, Descriptions, Divider, Drawer, Row, Space, Table, Tooltip, Typography } from "antd";
+import { CloseCircleOutlined } from "@ant-design/icons";
+import { Constants, SDK } from "@rsdoctor/types";
+import { ServerAPIProvider } from "../../Manifest";
+import { drawerWidth, Size } from "../../../constants";
+import { createFileStructures, formatCosts, mapFileKey, filterLoader, useMonacoEditor } from "../../../utils";
+import { LoaderExecutions } from "../executions";
+import { FileTree } from "../../FileTree";
+import { Keyword } from "../../Keyword";
+import { ECMAVersionDetectTag } from "../../worker/ecmaversion/client";
+const LoaderFiles = (props) => {
+  const { cwd, filetree } = props;
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [resourcePath, setResourcePath] = useState("");
+  const [loaderIndex, setLoaderIndex] = useState(0);
+  const [selectedNode, setSelectedNode] = useState(null);
+  const monacoRef = useRef(null);
+  const { initMonaco } = useMonacoEditor();
+  const init = useCallback(async () => {
+    await initMonaco(monacoRef);
+  }, []);
+  const maxHeight = 700;
+  const filteredFiles = useMemo(
+    () => filetree.filter((e) => e.loaders.some((l) => filterLoader(e.path, l.loader, props.filename, props.loaders))),
+    [props.filename, props.loaders]
+  );
+  const inlinedResourcePathKey = "__RESOURCEPATH__";
+  const files = useMemo(() => {
+    return createFileStructures({
+      files: filteredFiles.map((e) => e.path),
+      cwd,
+      fileTitle(file, basename) {
+        const { loaders } = filetree.find((e) => e.path === file);
+        return /* @__PURE__ */ jsxs(
+          Space,
+          {
+            style: { wordBreak: "break-all" },
+            onClick: () => {
+              setLoaderIndex(0);
+              setResourcePath(file);
+              setDrawerVisible(true);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Keyword, { text: basename, keyword: props.filename }),
+              endsWith(file, Constants.JSExtension) ? /* @__PURE__ */ jsx(
+                ServerAPIProvider,
+                {
+                  api: SDK.ServerAPI.API.GetLoaderFileFirstInput,
+                  body: { file },
+                  fallbackComponent: () => null,
+                  children: (res) => /* @__PURE__ */ jsx(ECMAVersionDetectTag, { code: res })
+                }
+              ) : null,
+              loaders.map((e, i) => {
+                const isError = e.errors && e.errors.length;
+                const key = `${file}_${e.loader}_${i}`;
+                return /* @__PURE__ */ jsx(Tooltip, { title: e.path, children: /* @__PURE__ */ jsxs(
+                  Typography.Text,
+                  {
+                    code: true,
+                    style: { color: isError ? "#f50" : "inherit" },
+                    onClick: (ev) => {
+                      ev.stopPropagation();
+                      setResourcePath(file);
+                      setLoaderIndex(i);
+                      setDrawerVisible(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Typography.Text, { style: { maxWidth: 135, color: "inherit" }, ellipsis: true, children: e.loader }),
+                      /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                      isError ? /* @__PURE__ */ jsx(CloseCircleOutlined, {}) : /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(e.costs) })
+                    ]
+                  }
+                ) }, key);
+              })
+            ]
+          }
+        );
+      },
+      dirTitle(_dir, defaultTitle) {
+        return /* @__PURE__ */ jsx(Keyword, { text: defaultTitle, keyword: props.filename });
+      }
+    });
+  }, [filteredFiles]);
+  return /* @__PURE__ */ jsxs(Row, { style: { width: "100%" }, gutter: Size.BasePadding, children: [
+    /* @__PURE__ */ jsx(Col, { span: 14, children: /* @__PURE__ */ jsxs(
+      Card,
+      {
+        title: /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
+          "Total Files: ",
+          filteredFiles.length
+        ] }),
+        bodyStyle: { overflow: "scroll", maxHeight },
+        children: [
+          /* @__PURE__ */ jsx(
+            FileTree,
+            {
+              defaultExpandedKeys: mapFileKey(files, filteredFiles.length >= 100 ? 3 : 4, (node) => {
+                const resourcePath2 = get(node, inlinedResourcePathKey);
+                const isNodeModules = resourcePath2.indexOf("/node_modules/") > -1;
+                return !isNodeModules;
+              }),
+              treeData: files,
+              onSelect: (_e, info) => {
+                init();
+                if (!info.node.isLeaf) {
+                  setSelectedNode(info.node);
+                }
+              },
+              selectedKeys: selectedNode ? [selectedNode.key] : void 0,
+              expandAction: "click"
+            },
+            `${props.loaders.join("|")}_${props.filename}`
+          ),
+          /* @__PURE__ */ jsx(
+            Drawer,
+            {
+              open: drawerVisible,
+              onClose: () => setDrawerVisible(false),
+              maskClosable: true,
+              width: drawerWidth,
+              zIndex: 999,
+              bodyStyle: { padding: 0 },
+              children: drawerVisible ? /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderFileDetails, body: { path: resourcePath }, children: (data) => /* @__PURE__ */ jsx(LoaderExecutions, { data, cwd, index: loaderIndex }) }) : null
+            }
+          )
+        ]
+      }
+    ) }),
+    selectedNode ? /* @__PURE__ */ jsx(Col, { span: 10, children: /* @__PURE__ */ jsx(
+      Card,
+      {
+        title: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: React.cloneElement(selectedNode.title, { style: { color: "#fff" } }),
+            children: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+              'Statistics of "',
+              selectedNode.title,
+              '"'
+            ] })
+          }
+        ),
+        children: /* @__PURE__ */ jsx(
+          ServerAPIProvider,
+          {
+            api: SDK.ServerAPI.API.GetLoaderFolderStatistics,
+            body: { folder: selectedNode[inlinedResourcePathKey] },
+            children: (tableData) => /* @__PURE__ */ jsx(
+              Table,
+              {
+                style: { width: "100%", maxHeight, overflowY: "scroll", wordBreak: "break-all" },
+                pagination: false,
+                bordered: true,
+                rowKey: (e) => e.loader,
+                columns: [
+                  {
+                    title: "Loader Name",
+                    dataIndex: "loader"
+                  },
+                  {
+                    title: "Files",
+                    dataIndex: "files"
+                  },
+                  {
+                    title: "Total Duration",
+                    dataIndex: "costs",
+                    render: (v) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(v) }),
+                    sorter: (a, b) => a.costs - b.costs,
+                    defaultSortOrder: "descend",
+                    sortDirections: ["descend", "ascend"]
+                  }
+                ],
+                dataSource: tableData,
+                footer: () => /* @__PURE__ */ jsxs(Descriptions, { title: "Total", bordered: true, layout: "vertical", size: "small", children: [
+                  /* @__PURE__ */ jsx(Descriptions.Item, { label: "loaders", children: tableData.length }),
+                  /* @__PURE__ */ jsx(Descriptions.Item, { label: "files", children: sumBy(tableData, (e) => e.files) }),
+                  /* @__PURE__ */ jsx(Descriptions.Item, { label: "duration", children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(sumBy(tableData, (e) => e.costs)) }) })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    ) }) : null
+  ] });
+};
+export {
+  LoaderFiles
+};

package/dist/components/Loader/Analysis/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const LoaderAnalysisBase: React.FC<{
+    cwd: string;
+}>;
+export declare const LoaderAnalysis: React.FC<Omit<{
+    cwd: string;
+}, "cwd"> & Partial<{
+    body: {
+        key: import("@rsdoctor/types/dist/manifest").RsdoctorManifestMappingKeys;
+    };
+}>>;

package/dist/components/Loader/Analysis/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SDK } from "@rsdoctor/types";
+import { ServerAPIProvider, withServerAPI } from "../../Manifest";
+import { LoaderFiles } from "./files";
+import { LoaderCommonSelect } from "../../Select";
+const LoaderAnalysisBase = ({ cwd }) => {
+  const [store, setStore] = useState({ filename: "", loaders: [] });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderNames, children: (loaderNames) => /* @__PURE__ */ jsx(LoaderCommonSelect, { onChange: (e) => setStore(e), loaderNames }) }),
+    /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderFileTree, children: (filetree) => /* @__PURE__ */ jsx(LoaderFiles, { filename: store.filename, filetree, loaders: store.loaders, cwd }) })
+  ] });
+};
+const LoaderAnalysis = withServerAPI({
+  api: SDK.ServerAPI.API.LoadDataByKey,
+  body: { key: "root" },
+  responsePropName: "cwd",
+  Component: LoaderAnalysisBase
+});
+export {
+  LoaderAnalysis,
+  LoaderAnalysisBase
+};

package/dist/components/Loader/executions.d.ts

@@ -0,0 +1,9 @@
+import { SDK } from '@rsdoctor/types';
+import { PropsWithChildren } from 'react';
+interface LoaderExecutionsProps {
+    cwd: string;
+    data: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderFileDetails>;
+    index?: number;
+}
+export declare const LoaderExecutions: ({ data, cwd, index }: PropsWithChildren<LoaderExecutionsProps>) => JSX.Element;
+export {};

package/dist/components/Loader/executions.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ClockCircleOutlined } from "@ant-design/icons";
+import Editor from "@monaco-editor/react";
+import { Constants } from "@rsdoctor/types";
+import { Badge, Button, Col, Divider, Empty, Row, Space, Tag, Timeline, Tooltip, Typography } from "antd";
+import dayjs from "dayjs";
+import { endsWith } from "lodash-es";
+import { useState } from "react";
+import { Size } from "../../constants";
+import { beautifyPath, formatCosts, getModifiedLanguage, useTheme } from "../../utils";
+import { Card } from "../Card";
+import { DiffViewer } from "../CodeViewer";
+import { CodeOpener } from "../Opener";
+import { Title } from "../Title";
+import { JSIsEqualTag } from "../worker/jsequal/client";
+const LoaderInfoItem = ({
+  label,
+  value,
+  ellipsis = false,
+  ...textProps
+}) => {
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Badge, { status: "processing" }),
+      /* @__PURE__ */ jsx("div", { style: { width: 180 }, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: label }) }),
+      /* @__PURE__ */ jsx(Divider, { type: "vertical" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Col, { span: 18, children: /* @__PURE__ */ jsx(Typography.Paragraph, { ellipsis, strong: true, ...textProps, children: value }) })
+  ] });
+};
+const LoaderExecutions = ({ data, cwd, index }) => {
+  const { loaders, resource } = data;
+  const [currentIndex, setCurrentIndex] = useState(index || 0);
+  const { theme } = useTheme();
+  const isLight = theme === "light";
+  const loader = loaders[currentIndex];
+  const before = loader.input || "";
+  const leftSpan = 5;
+  const hasError = loader.errors && loader.errors.length;
+  return /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      Col,
+      {
+        span: leftSpan,
+        style: { borderRight: isLight ? `1px solid #f0f0f0` : void 0, padding: Size.BasePadding },
+        children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+          /* @__PURE__ */ jsx(Title, { text: "Executions" }),
+          /* @__PURE__ */ jsx(Timeline, { mode: "left", style: { marginTop: Size.BasePadding }, children: loaders.map((e, i, arr) => {
+            const { loader: loader2, isPitch } = e;
+            return /* @__PURE__ */ jsxs(
+              Timeline.Item,
+              {
+                dot: isPitch ? /* @__PURE__ */ jsx(Tag, { style: { marginLeft: 1, fontWeight: 500 }, children: "pitch" }) : /* @__PURE__ */ jsx(ClockCircleOutlined, {}),
+                style: { paddingBottom: 10, textAlign: "center" },
+                children: [
+                  /* @__PURE__ */ jsx(Row, { align: "middle", justify: "space-between", gutter: [0, 10], children: /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(Tooltip, { title: loader2, trigger: "hover", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: i === currentIndex ? "primary" : "default",
+                      block: true,
+                      onClick: () => {
+                        setCurrentIndex(i);
+                      },
+                      style: { textAlign: "left" },
+                      children: /* @__PURE__ */ jsxs(Typography.Text, { ellipsis: true, style: { color: "inherit" }, children: [
+                        /* @__PURE__ */ jsx(Typography.Text, { strong: true, style: { color: "inherit" }, children: formatCosts(e.costs) }),
+                        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                        loader2
+                      ] })
+                    }
+                  ) }) }) }),
+                  i === arr.length - 1 ? null : /* @__PURE__ */ jsx("div", { style: { paddingTop: 10 }, children: /* @__PURE__ */ jsx(Typography.Text, { children: "⬇️" }) })
+                ]
+              },
+              i
+            );
+          }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Col, { span: 24 - leftSpan, style: { height: "100%" }, children: [
+      /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsxs(
+        Card,
+        {
+          title: "Loader Details",
+          style: { border: "none" },
+          collapsable: true,
+          defaultCollapsed: true,
+          extra: /* @__PURE__ */ jsx(Tag, { icon: /* @__PURE__ */ jsx(ClockCircleOutlined, {}), color: "default", children: dayjs(loader.startAt).format("YYYY-MM-DD HH:mm:ss") }),
+          children: [
+            loader.isPitch ? /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "pitch" }) : null,
+            loader.isPitch || hasError || !endsWith(resource.path, Constants.JSExtension) ? null : /* @__PURE__ */ jsx(JSIsEqualTag, { input: before, output: loader.result || "" }),
+            /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { padding: Size.BasePadding, wordBreak: "break-all" }, children: [
+              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "file path", value: beautifyPath(resource.path, cwd), code: true }),
+              /* @__PURE__ */ jsx(
+                LoaderInfoItem,
+                {
+                  label: "resource path",
+                  value: /* @__PURE__ */ jsx(CodeOpener, { cwd, url: resource.path, loc: "", disabled: true })
+                }
+              ),
+              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "resource query", value: resource.queryRaw || "-" }),
+              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "duration", value: formatCosts(loader.costs), mark: true }),
+              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader name", value: loader.loader, code: true }),
+              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader index", value: `${loader.loaderIndex}` }),
+              /* @__PURE__ */ jsx(LoaderInfoItem, { label: "loader path", value: /* @__PURE__ */ jsx(CodeOpener, { cwd, url: loader.path, loc: "", disabled: true }) }),
+              /* @__PURE__ */ jsx(
+                LoaderInfoItem,
+                {
+                  label: "options",
+                  value: JSON.stringify(loader.options || "-"),
+                  copyable: true,
+                  ellipsis: {
+                    rows: 2,
+                    expandable: true,
+                    symbol: "more"
+                  }
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      hasError ? /* @__PURE__ */ jsxs(Col, { span: 24, style: { height: "53%", minHeight: 400 }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: Size.BasePadding,
+              borderTop: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`,
+              borderBottom: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`
+            },
+            children: /* @__PURE__ */ jsx(Title, { text: `the error stack of [${loader.loader}] ${loader.isPitch ? "pitch" : ""}` })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { height: "90%" }, children: /* @__PURE__ */ jsx(
+          Editor,
+          {
+            theme: "vs-dark",
+            options: {
+              readOnly: true,
+              domReadOnly: true,
+              fontSize: 14,
+              minimap: { enabled: false },
+              lineNumbers: "off"
+            },
+            value: loader.errors[0].message,
+            language: "javascript"
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsxs(Col, { span: 24, style: { height: "53%", minHeight: 400 }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: Size.BasePadding,
+              borderTop: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`,
+              borderBottom: `1px solid ${isLight ? "#f0f0f0" : "rgba(253, 253, 253, 0.12)"}`
+            },
+            children: /* @__PURE__ */ jsx(Title, { text: `the result of [${loader.loader}] ${loader.isPitch ? "pitch" : ""}` })
+          }
+        ),
+        loader.isPitch ? loader.result ? /* @__PURE__ */ jsx("div", { style: { height: "90%" }, children: /* @__PURE__ */ jsx(
+          Editor,
+          {
+            theme: "vs-dark",
+            options: {
+              readOnly: true,
+              domReadOnly: true,
+              fontSize: 14,
+              formatOnType: true,
+              formatOnPaste: true
+            },
+            value: loader.result,
+            language: getModifiedLanguage(resource.path)
+          }
+        ) }) : /* @__PURE__ */ jsx(Empty, {}) : /* @__PURE__ */ jsxs("div", { style: { height: "90%" }, children: [
+          /* @__PURE__ */ jsxs(Row, { children: [
+            /* @__PURE__ */ jsx(Col, { span: 12, style: { padding: `${Size.BasePadding / 2}px ${Size.BasePadding}px` }, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Input" }) }),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                span: 12,
+                style: {
+                  padding: `${Size.BasePadding / 2}px ${Size.BasePadding}px`
+                },
+                children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Output" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { height: "86%" }, children: /* @__PURE__ */ jsx(DiffViewer, { filepath: resource.path, before, after: loader.result || "" }) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  LoaderExecutions
+};

package/dist/components/Manifest/api.d.ts

@@ -0,0 +1,34 @@
+import { Manifest, SDK } from '@rsdoctor/types';
+import React from 'react';
+export type InferServerAPIBody<T> = SDK.ServerAPI.InferRequestBodyType<T> extends void ? {
+    body?: any;
+} : {
+    body: SDK.ServerAPI.InferRequestBodyType<T>;
+};
+type ServerAPIProviderProps<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends> = {
+    manifestLoader?: () => Promise<Manifest.RsdoctorManifestWithShardingFiles>;
+    api: T;
+    children: (response: SDK.ServerAPI.InferResponseType<T>) => JSX.Element;
+    fallbackComponent?: React.FC;
+    showSkeleton?: boolean;
+} & InferServerAPIBody<T>;
+/**
+ * this component will request server api to the sdk of Rsdoctor in local development.
+ * otherwise it will fallback to load full manifest for the data.
+ *
+ * @example usage
+ * <ServerAPIProvider {...props}>
+ *   {(response) => {
+ *     <Component {...}></Component>
+ *   }}
+ * </ServerAPIProvider>
+ */
+export declare const ServerAPIProvider: <T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(props: ServerAPIProviderProps<T>) => JSX.Element | null;
+export declare function withServerAPI<T, P extends keyof T, A extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>({ Component, api, responsePropName, body: bodyInRoot, fallbackComponent, showSkeleton, }: {
+    Component: React.FC<T>;
+    api: A;
+    responsePropName: P;
+    fallbackComponent?: React.FC;
+    showSkeleton?: boolean;
+} & Partial<Partial<InferServerAPIBody<A>>>): React.FC<Omit<T, P> & Partial<InferServerAPIBody<A>>>;
+export {};

package/dist/components/Manifest/api.js

@@ -0,0 +1,127 @@
+import { jsx } from "react/jsx-runtime";
+import { SDK } from "@rsdoctor/types";
+import { Skeleton, Spin } from "antd";
+import { useCallback, useEffect, useState } from "react";
+import { includes, isEqual, isNil, values } from "lodash-es";
+import { fetchManifest, useDataLoader } from "../../utils";
+import { ComponentState } from "../../constants";
+import { FailedStatus } from "../Status";
+const ServerAPIProvider = (props) => {
+  const {
+    manifestLoader = fetchManifest,
+    api,
+    children,
+    // default value of "body" must be "null" to avoid the response type not match when the socket received message.
+    body = null,
+    showSkeleton = true,
+    fallbackComponent
+  } = props;
+  let promise = manifestLoader();
+  const [manifest, setManifest] = useState();
+  const [state, setState] = useState(ComponentState.Pending);
+  const [res, setRes] = useState({});
+  const { loader } = useDataLoader(manifest);
+  function init(loader2) {
+    ensureManifest(promise).then(() => {
+      executeLoader(loader2);
+    });
+  }
+  const update = useCallback(
+    ({ req, res: response }) => {
+      if (req.api === api) {
+        if (isEqual(req.body, body) || isNil(req.body) && isNil(body)) {
+          if (!isEqual(res, response)) {
+            setRes(response);
+          }
+        }
+      }
+      setState(ComponentState.Success);
+    },
+    [res, api, body]
+  );
+  useEffect(() => {
+    init(loader);
+  }, [loader, api, body]);
+  useEffect(() => {
+    if (!loader)
+      return;
+    loader.onDataUpdate(api, update);
+    return () => {
+      loader.removeOnDataUpdate(api, update);
+    };
+  }, [loader, api, body]);
+  function ensureManifest(pro) {
+    return pro.then((manifest2) => {
+      setManifest(manifest2);
+    }).catch((err) => {
+      setState(ComponentState.Fail);
+      throw err;
+    });
+  }
+  function executeLoader(loader2) {
+    if (!loader2)
+      return;
+    const exts = values(SDK.ServerAPI.APIExtends);
+    if (includes(exts, api)) {
+      setState(ComponentState.Success);
+      return;
+    }
+    loader2.loadAPI(api, body).then((e) => {
+      if (isNil(e)) {
+        return;
+      }
+      setRes(e);
+      setState(ComponentState.Success);
+    }).catch((err) => {
+      console.error(err);
+      setState(ComponentState.Fail);
+    });
+  }
+  if (state === ComponentState.Pending) {
+    return showSkeleton ? /* @__PURE__ */ jsx(Skeleton, { active: true }) : null;
+  }
+  if (state === ComponentState.Fail) {
+    if (fallbackComponent)
+      return fallbackComponent;
+    return /* @__PURE__ */ jsx(
+      FailedStatus,
+      {
+        retry: () => {
+          setState(ComponentState.Pending);
+          promise = manifestLoader();
+          init();
+        }
+      }
+    );
+  }
+  if (state === ComponentState.Updating) {
+    return /* @__PURE__ */ jsx(Spin, { spinning: true, children: children(res) });
+  }
+  return children(res);
+};
+function withServerAPI({
+  Component,
+  api,
+  responsePropName,
+  body: bodyInRoot,
+  fallbackComponent,
+  showSkeleton
+}) {
+  return function _(props) {
+    const { body = bodyInRoot, ...rest } = props;
+    return (
+      // @ts-ignore
+      /* @__PURE__ */ jsx(ServerAPIProvider, { api, body, showSkeleton, fallbackComponent, children: (res) => {
+        const _props = {
+          ...rest,
+          [responsePropName]: res
+        };
+        return /* @__PURE__ */ jsx(Component, { ..._props });
+      } })
+    );
+  };
+}
+export {
+  ServerAPIProvider,
+  withServerAPI
+};

package/dist/components/Manifest/data.d.ts

@@ -0,0 +1,8 @@
+import { Manifest } from '@rsdoctor/types';
+import React from 'react';
+type ExtractAlias<T> = T extends [property: string, alias: infer P][] ? `${P extends string ? P : never}` : never;
+/**
+ * @deprecated
+ */
+export declare function ConnectManifestData<Props extends object, Keys extends [property: `${Manifest.RsdoctorManifestMappingKeys}`, alias: keyof Props][] | [property: string, alias: keyof Props][]>(manifestLoader: () => Promise<Manifest.RsdoctorManifestWithShardingFiles>, keys: Keys, Component: React.FC<Props>): React.FC<Omit<Props, ExtractAlias<Keys>>>;
+export {};

package/dist/components/Manifest/data.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { Skeleton } from "antd";
+import { useEffect, useState } from "react";
+import { useDataLoader } from "../../utils";
+import { PageState } from "../../constants";
+import { FailedStatus } from "../Status";
+function ConnectManifestData(manifestLoader, keys, Component) {
+  const promise = manifestLoader();
+  return function _() {
+    const [manifest, setManifest] = useState();
+    const [state, setState] = useState(PageState.Pending);
+    const [props, setProps] = useState({});
+    const { loader } = useDataLoader(manifest);
+    useEffect(() => {
+      ensureManifest(promise).then(() => {
+        executeLoader(loader);
+      });
+    }, [loader]);
+    function ensureManifest(pro) {
+      return pro.then((manifest2) => {
+        setManifest(manifest2);
+      }).catch(() => {
+        setState(PageState.Fail);
+      });
+    }
+    function executeLoader(loader2) {
+      if (!loader2)
+        return;
+      Promise.all(keys.map(([key]) => loader2.loadData(key))).then((e) => {
+        const p = e.reduce((t, val, i) => {
+          const [_key, alias] = keys[i];
+          t[alias] = val;
+          return t;
+        }, {});
+        setProps(p);
+        setState(PageState.Success);
+      }).catch((err) => {
+        console.error(err);
+        setState(PageState.Fail);
+      });
+    }
+    if (state === PageState.Pending) {
+      return /* @__PURE__ */ jsx(Skeleton, { active: true });
+    }
+    if (state === PageState.Fail) {
+      return /* @__PURE__ */ jsx(
+        FailedStatus,
+        {
+          retry: () => {
+            setState(PageState.Pending);
+            promise.then(() => {
+              executeLoader(loader);
+            }).catch(() => {
+              ensureManifest(manifestLoader());
+            });
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  };
+}
+export {
+  ConnectManifestData
+};

package/dist/components/Manifest/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data';
+export * from './api';