@rsdoctor/components 0.1.6 → 0.1.8

package/dist/components/BundleDiff/DiffContainer/types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { Client, Manifest, SDK } from '@rsdoctor/types';
+import { UpdateType } from './constants';
+import { InferServerAPIBody } from '../../Manifest';
+export type BundleDiffServerAPIProviderComponentCommonProps<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends> = {
+    manifests?: Manifest.RsdoctorManifest[];
+    api: T;
+    children: (baseline: SDK.ServerAPI.InferResponseType<T>, current: SDK.ServerAPI.InferResponseType<T>) => JSX.Element;
+} & InferServerAPIBody<T>;
+export interface BundleDiffContainerProps {
+    manifests: Manifest.RsdoctorManifest[];
+}
+export interface BundleDiffComponentCommonProps {
+    baseline: Manifest.RsdoctorManifest;
+    current: Manifest.RsdoctorManifest;
+    onlyBaseline: boolean;
+    assetsDiffResult: Client.RsdoctorClientAssetsDiffResult;
+}
+export interface BundleDiffComponentCardProps {
+    baseline: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+    current: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+    onlyBaseline: boolean;
+    assetsDiffResult: Client.RsdoctorClientAssetsDiffResult;
+}
+export interface BundleDiffTableOverviewData {
+    total: Client.RsdoctorClientAssetsDiffItem;
+    initial?: Client.RsdoctorClientAssetsDiffItem;
+}
+export interface BundleDiffTableAssetsData {
+    alias: string;
+    baseline?: SDK.AssetData;
+    current?: SDK.AssetData;
+}
+export interface BundleDiffTableModulesData {
+    [key: string]: unknown;
+    path: string;
+    baseline?: SDK.ModuleData;
+    current?: SDK.ModuleData;
+}
+export interface BundleDiffTablePackagesData {
+    name: string;
+    updateType: UpdateType;
+    baseline?: SDK.PackageData[];
+    current?: SDK.PackageData[];
+}

package/dist/components/BundleDiff/DiffContainer/utils.d.ts

@@ -0,0 +1,2 @@
+import { Client } from '@rsdoctor/types';
+export declare const formatDiffSize: (bSize: number, cSize: number, state: Client.RsdoctorClientDiffState, propsStyle?: Record<string, string | number>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BundleDiff/DiffContainer/utils.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { formatSize } from "@rsdoctor/components/utils";
+import { Client } from "@rsdoctor/types";
+import { Typography } from "antd";
+import { Color } from "../../../constants";
+const formatDiffSize = (bSize, cSize, state, propsStyle) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: cSize - bSize === 0 ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs(
+    Typography.Text,
+    {
+      strong: true,
+      style: {
+        color: state === Client.RsdoctorClientDiffState.Up ? Color.Red : Color.Green,
+        ...propsStyle
+      },
+      children: [
+        state === Client.RsdoctorClientDiffState.Up ? "+" : "-",
+        formatSize(Math.abs(cSize - bSize))
+      ]
+    }
+  ) });
+};
+export {
+  formatDiffSize
+};

package/dist/components/BundleDiff/DiffServerAPIProvider/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SDK } from '@rsdoctor/types';
+import { BundleDiffServerAPIProviderComponentCommonProps } from '../DiffContainer/types';
+export declare const DiffServerAPIProvider: <T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(props: BundleDiffServerAPIProviderComponentCommonProps<T>) => JSX.Element;

package/dist/components/BundleDiff/DiffServerAPIProvider/index.js

@@ -0,0 +1,37 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Client } from "@rsdoctor/types";
+import { Empty } from "antd";
+import { ServerAPIProvider } from "../../Manifest";
+import { useUrlQuery, fetchManifest } from "../../../utils";
+const DiffServerAPIProvider = (props) => {
+  const { api, body, children, manifests } = props;
+  const query = useUrlQuery();
+  const [baselineFile, currentFile] = query[Client.RsdoctorClientUrlQuery.BundleDiffFiles]?.split(",") || [];
+  if (manifests?.length) {
+    return /* @__PURE__ */ jsx(Fragment, { children: children(manifests[0].data, manifests[1].data) });
+  }
+  return /* @__PURE__ */ jsx(
+    ServerAPIProvider,
+    {
+      api,
+      body,
+      manifestLoader: baselineFile ? () => fetchManifest(baselineFile) : void 0,
+      children: (baseline) => {
+        return baseline ? /* @__PURE__ */ jsx(
+          ServerAPIProvider,
+          {
+            api,
+            body,
+            manifestLoader: currentFile ? () => fetchManifest(currentFile) : void 0,
+            children: (current) => {
+              return current ? children(baseline, current) : /* @__PURE__ */ jsx(Empty, {});
+            }
+          }
+        ) : /* @__PURE__ */ jsx(Empty, {});
+      }
+    }
+  );
+};
+export {
+  DiffServerAPIProvider
+};

package/dist/components/BundleDiff/constants.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Client, Manifest } from '@rsdoctor/types';
+export declare const name = "Bundle Diff";
+export declare const route = Client.RsdoctorClientRoutes.BundleDiff;
+export declare const BundleDiffContext: React.Context<{
+    manifests: Manifest.RsdoctorManifest[];
+    setManifests(_manifests: Manifest.RsdoctorManifest[]): void;
+    loading: boolean;
+    setLoading(_loading: boolean): void;
+    withLoading(_func: (...args: unknown[]) => Promise<unknown> | unknown): Promise<void>;
+}>;

package/dist/components/BundleDiff/constants.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { Client } from "@rsdoctor/types";
+const name = "Bundle Diff";
+const route = Client.RsdoctorClientRoutes.BundleDiff;
+const BundleDiffContext = React.createContext({
+  manifests: [],
+  setManifests(_manifests) {
+  },
+  loading: false,
+  setLoading(_loading) {
+  },
+  async withLoading(_func) {
+  }
+});
+export {
+  BundleDiffContext,
+  name,
+  route
+};

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

@@ -0,0 +1 @@
+export * from './DiffContainer';

package/dist/components/BundleDiff/index.js

@@ -0,0 +1 @@
+export * from "./DiffContainer";

package/dist/components/Card/diff.d.ts

@@ -1,5 +1,6 @@
 import { Client } from '@rsdoctor/types';
 import React from 'react';
+export { StatisticCard } from './statistic';
 export interface DiffCardProps extends Pick<DiffCardContentProps, 'formatter'> {
     titles: Array<string> | [string | React.ReactNode];
     datas: Array<DiffCardContentProps['data']>;

package/dist/components/Card/diff.js

@@ -6,11 +6,16 @@ import { useState } from "react";
 import { formatSize } from "../../utils";
 import { Color } from "../../constants";
 import { StatisticCard } from "./statistic";
+import { StatisticCard as StatisticCard2 } from "./statistic";
 const SizePercent = ({ baseline, current, ...rest }) => {
   const diff = Graph.diffSize(baseline, current);
   return /* @__PURE__ */ jsx(Percent, { ...rest, ...diff });
 };
-const Percent = ({ percent, state, fontSize = 14 }) => {
+const Percent = ({
+  percent,
+  state,
+  fontSize = 14
+}) => {
   const _percent = +percent.toFixed(2);
   if (_percent > 0) {
     const percentText = `${_percent}`;
@@ -31,7 +36,10 @@ const Percent = ({ percent, state, fontSize = 14 }) => {
   }
   return null;
 };
-const DiffCardContent = ({ data, formatter }) => {
+const DiffCardContent = ({
+  data,
+  formatter
+}) => {
   const { percent, state, size } = data;
   const { baseline, current } = size;
   const bSize = formatter ? formatter(baseline, "baseline") : formatSize(baseline);
@@ -60,7 +68,12 @@ const DiffCardContent = ({ data, formatter }) => {
     ] })
   ] }) });
 };
-const DiffCard = ({ titles, datas, formatter, showPercentInTitle }) => {
+const DiffCard = ({
+  titles,
+  datas,
+  formatter,
+  showPercentInTitle
+}) => {
   const [idx, setIdx] = useState(0);
   return /* @__PURE__ */ jsx(
     StatisticCard,
@@ -98,5 +111,6 @@ export {
   DiffCard,
   DiffCardContent,
   Percent,
-  SizePercent
+  SizePercent,
+  StatisticCard2 as StatisticCard
 };

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

@@ -1,5 +1,6 @@
 import { CardProps as CProps } from 'antd';
 import React, { CSSProperties } from 'react';
+export * from './diff';
 export interface CardProps extends CProps {
     collapsable?: boolean;
     dividerStyle?: CSSProperties;

package/dist/components/Card/index.js

@@ -1,8 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ColumnHeightOutlined, VerticalAlignMiddleOutlined } from "@ant-design/icons";
+import {
+  ColumnHeightOutlined,
+  VerticalAlignMiddleOutlined
+} from "@ant-design/icons";
 import { Card as C, Space, Button, Divider } from "antd";
 import { useState } from "react";
-const Card = ({ collapsable = false, children, title, dividerStyle, defaultCollapsed = false, ...rest }) => {
+export * from "./diff";
+const Card = ({
+  collapsable = false,
+  children,
+  title,
+  dividerStyle,
+  defaultCollapsed = false,
+  ...rest
+}) => {
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
   if (title && collapsable) {
     return /* @__PURE__ */ jsx(
@@ -20,7 +31,15 @@ const Card = ({ collapsable = false, children, title, dividerStyle, defaultColla
           ),
           title
         ] }),
-        children: collapsed ? /* @__PURE__ */ jsx(Divider, { orientation: "center", style: dividerStyle, plain: true, children: /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}), type: "text", onClick: () => setCollapsed(!collapsed), children: "show more" }) }) : children
+        children: collapsed ? /* @__PURE__ */ jsx(Divider, { orientation: "center", style: dividerStyle, plain: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}),
+            type: "text",
+            onClick: () => setCollapsed(!collapsed),
+            children: "show more"
+          }
+        ) }) : children
       }
     );
   }

package/dist/components/index.d.ts

@@ -5,4 +5,8 @@ export * from './Card';
 export * from './CodeViewer';
 export * from './Layout';
 export * from './Overall';
+export * from './Manifest';
+export * from './Form/keyword';
+export * from './TextDrawer';
+export * from './BundleDiff';
 export { TimelineCom } from './Charts/TimelineCharts';

package/dist/components/index.js

@@ -5,6 +5,10 @@ export * from "./Card";
 export * from "./CodeViewer";
 export * from "./Layout";
 export * from "./Overall";
+export * from "./Manifest";
+export * from "./Form/keyword";
+export * from "./TextDrawer";
+export * from "./BundleDiff";
 import { TimelineCom } from "./Charts/TimelineCharts";
 export {
   TimelineCom

package/dist/utils/data/base.d.ts

@@ -8,7 +8,7 @@ export declare abstract class BaseDataLoader implements Manifest.ManifestDataLoa
     protected shardingDataMap: Map<keyof Manifest.RsdoctorManifestData, Promise<any>>;
     constructor(manifest: Manifest.RsdoctorManifestWithShardingFiles);
     protected get<T extends keyof Manifest.RsdoctorManifestWithShardingFiles>(key: T): void | Manifest.RsdoctorManifestWithShardingFiles[T];
-    protected getData<T extends keyof Manifest.RsdoctorManifestData>(key: T, scope?: 'data'): void | Manifest.RsdoctorManifestWithShardingFiles['data'][T];
+    protected getData<T extends keyof Manifest.RsdoctorManifestData>(key: T, scope?: 'data' | 'cloudData'): void | Manifest.RsdoctorManifestWithShardingFiles['data'][T];
     protected getKeys(key: string): string[];
     protected joinKeys(keys: string[]): string;
     dispose(): void;

package/dist/utils/data/remote.js

@@ -9,13 +9,19 @@ class RemoteDataLoader extends BaseDataLoader {
   async loadData(key) {
     return this.limit(key, async () => {
       const [scope, ...rest] = this.getKeys(key);
-      const data = this.getData(scope);
+      const data = this.getData(
+        scope,
+        "cloudData"
+      );
       if (!data)
         return;
       let res = data;
       if (ManifestShared.isShardingData(res)) {
         if (!this.shardingDataMap.has(scope)) {
-          const task = ManifestShared.fetchShardingData(res, fetchShardingFile).catch((err) => {
+          const task = ManifestShared.fetchShardingData(
+            res,
+            fetchShardingFile
+          ).catch((err) => {
             this.log(`loadData error: `, res, key);
             throw err;
           });

package/dist/utils/request.d.ts

@@ -2,9 +2,11 @@ import { Manifest, SDK } from '@rsdoctor/types';
 export declare function fetchShardingFile(url: string): Promise<string>;
 export declare function loadManifestByUrl(url: string): Promise<{
     data: Manifest.RsdoctorManifestData;
+    cloudData?: Record<keyof Manifest.RsdoctorManifestData, string | string[]> | undefined;
     __LOCAL__SERVER__?: boolean | undefined;
     __SOCKET__URL__?: string | undefined;
     client: Manifest.RsdoctorManifestClient;
+    cloudManifestUrl?: string | undefined;
     name?: string | undefined;
     series?: Manifest.RsdoctorManifestSeriesData[] | undefined;
 }>;
@@ -12,9 +14,11 @@ export declare function fetchJSONByUrl(url: string): Promise<Manifest.RsdoctorMa
 export declare function fetchJSONByUrls(urls: string[]): Promise<Manifest.RsdoctorManifestWithShardingFiles[]>;
 export declare function parseManifest(json: Manifest.RsdoctorManifestWithShardingFiles): Promise<{
     data: Manifest.RsdoctorManifestData;
+    cloudData?: Record<keyof Manifest.RsdoctorManifestData, string | string[]> | undefined;
     __LOCAL__SERVER__?: boolean | undefined;
     __SOCKET__URL__?: string | undefined;
     client: Manifest.RsdoctorManifestClient;
+    cloudManifestUrl?: string | undefined;
     name?: string | undefined;
     series?: Manifest.RsdoctorManifestSeriesData[] | undefined;
 }>;

package/dist/utils/request.js

@@ -31,14 +31,27 @@ function fetchJSONByUrls(urls) {
 }
 async function parseManifest(json) {
   let transformedData;
-  if (json.data) {
-    try {
-      transformedData = await ManifestMethod.fetchShardingFiles(json.data, fetchShardingFile);
-    } catch (error) {
-      console.log("cloudData load error: ", error);
+  try {
+    if (json.cloudData) {
+      try {
+        transformedData = await ManifestMethod.fetchShardingFiles(
+          json.cloudData,
+          fetchShardingFile
+        );
+      } catch (error) {
+        console.log("cloudData load error: ", error);
+      }
+    } else {
+      transformedData = await ManifestMethod.fetchShardingFiles(
+        json.data,
+        fetchShardingFile
+      );
     }
-  } else {
-    throw new Error("fallback to load json.data");
+  } catch (error) {
+    transformedData = await ManifestMethod.fetchShardingFiles(
+      json.data,
+      fetchShardingFile
+    );
   }
   return {
     ...json,
@@ -98,7 +111,11 @@ if (process.env.NODE_ENV === "development") {
 async function postServerAPI(...args) {
   const [api, body] = args;
   const timeout = process.env.NODE_ENV === "development" ? 1e4 : 6e4;
-  const { data } = await axios.post(`${api}?_t=${random()}`, body, { timeout });
+  const { data } = await axios.post(
+    `${api}?_t=${random()}`,
+    body,
+    { timeout }
+  );
   return data;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "./dist/index.js",
   "license": "MIT",
   "module": "dist/index.js",
@@ -51,7 +51,7 @@
     "@types/react": "^18",
     "@types/url-parse": "1.4.8",
     "ansi-to-react": "6.1.6",
-    "antd": "5.8.3",
+    "antd": "5.15.3",
     "axios": "^1.6.1",
     "dayjs": "1.11.6",
     "echarts": "^5.4.3",
@@ -61,7 +61,7 @@
     "monaco-editor": "0.34.1",
     "rc-dialog": "9.1.0",
     "rc-tree": "5.7.2",
-    "react": "^18",
+    "react": "18.2.0",
     "react-hyper-tree": "0.3.12",
     "react-i18next": "12.0.0",
     "react-json-view": "1.21.3",
@@ -71,9 +71,9 @@
     "terser": "^5.26.0",
     "typescript": "^5.2.2",
     "url-parse": "1.5.10",
-    "@rsdoctor/graph": "0.1.6",
-    "@rsdoctor/utils": "0.1.6",
-    "@rsdoctor/types": "0.1.6"
+    "@rsdoctor/graph": "0.1.8",
+    "@rsdoctor/utils": "0.1.8",
+    "@rsdoctor/types": "0.1.8"
   },
   "publishConfig": {
     "access": "public",