@rsdoctor/components 0.0.2-beta.0

package/dist/components/Charts/done.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CommonChartProps } from './common';
+import './loader.scss';
+import './tooltips.scss';
+export declare const DoneChartContainer: React.FC<CommonChartProps>;

package/dist/components/Charts/done.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Divider, Space } from "antd";
+import { BarChartOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { Summary } from "@rsdoctor/utils/common";
+import { TextDrawer } from "../TextDrawer";
+import { Card } from "../Card";
+import { CommonExecutionsChart, CommonExecutionEmptyTips } from "./common";
+import { WebpackPluginsDataTable } from "../Plugins/webpack";
+import { ServerAPIProvider } from "../Manifest";
+import "./loader.css";
+import "./tooltips.css";
+const DoneChartContainer = ({ summary }) => {
+  const { costs = [] } = summary || {};
+  const target = costs.find((e) => e.name === Summary.SummaryCostsDataName.Done);
+  const hooks = [
+    "afterCompile",
+    "shouldEmit",
+    "emit",
+    "afterEmit",
+    "assetEmitted",
+    "done"
+  ];
+  const suffix = 'of the "AfterCompile -> Done" stage';
+  if (!target)
+    return null;
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      drawerProps: { title: `Details ${suffix}` },
+      text: /* @__PURE__ */ jsxs(Space, { children: [
+        "detail",
+        /* @__PURE__ */ jsx(BarChartOutlined, {})
+      ] }),
+      children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetPluginData, body: { hooks }, children: (res) => res && res.length ? /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(Card, { title: `Plugin DataSource of ${suffix}`, collapsable: true, children: /* @__PURE__ */ jsx(WebpackPluginsDataTable, { dataSource: res }) }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(Card, { title: `Chart ${suffix}`, children: /* @__PURE__ */ jsx(CommonExecutionsChart, { plugins: res }) })
+      ] }) : /* @__PURE__ */ jsx(CommonExecutionEmptyTips, {}) })
+    }
+  );
+};
+export {
+  DoneChartContainer
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export declare const LoaderChartBase: React.FC<{
+  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+}>;
+export declare const LoaderChart: React.FC<Omit<{
+  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+}, "project"> & Partial<{
+  body?: any;
+}>>;

package/dist/components/Charts/index.js

@@ -0,0 +1,37 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Space } from "antd";
+import { SDK } from "@rsdoctor/types";
+import { LoaderCommonSelect } from "../Select";
+import { ServerAPIProvider, withServerAPI } from "../Manifest";
+import { LoaderExecutionsChart } from "./loader";
+import { filterLoader } from "../../utils/loader";
+var ChartDimension = /* @__PURE__ */ ((ChartDimension2) => {
+  ChartDimension2[ChartDimension2["Loader"] = 0] = "Loader";
+  ChartDimension2[ChartDimension2["Process"] = 1] = "Process";
+  return ChartDimension2;
+})(ChartDimension || {});
+const LoaderChartBase = ({ project }) => {
+  const { root: cwd } = project;
+  const [store, setStore] = useState({ filename: "", loaders: [] });
+  const [dimension, setDimension] = useState(0 /* Loader */);
+  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderNames, children: (loaderNames) => /* @__PURE__ */ jsx(LoaderCommonSelect, { onChange: setStore, loaderNames }) }),
+    /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderChartData, children: (res) => {
+      const loaders = res.filter((el) => filterLoader(el.resource, el.loader, store.filename, store.loaders));
+      return dimension === 0 /* Loader */ ? /* @__PURE__ */ jsx(LoaderExecutionsChart, { loaders, cwd }) : (
+        // <ProcessExecutionsChart loaders={loaders} cwd={cwd} pid={pid} />
+        /* @__PURE__ */ jsx(Fragment, {})
+      );
+    } })
+  ] });
+};
+const LoaderChart = withServerAPI({
+  api: SDK.ServerAPI.API.GetProjectInfo,
+  responsePropName: "project",
+  Component: LoaderChartBase
+});
+export {
+  LoaderChart,
+  LoaderChartBase
+};

package/dist/components/Charts/loader.css

@@ -0,0 +1,31 @@
+.loader-chart-container .x-axis .tick text {
+  transform: translate(28px, 10px) rotate(0) !important;
+  font-size: 12px;
+  font-weight: 500;
+}
+.loader-chart-container:nth-child(2) text {
+  transform: translate(52px, 10px) rotate(0) !important;
+}
+.loader-chart-container:last-child text {
+  transform: translate(5px, 10px) rotate(0) !important;
+}
+.loader-chart-container .area .civ {
+  transform: translateY(5px);
+}
+.loader-chart-container .area .civ .label-text {
+  font-weight: 500;
+  font-size: 12px !important;
+  transform: translate(8px, 0px);
+}
+.loader-chart-container .area .civ path[fill="#000000"] {
+  display: none;
+}
+.loader-chart-container .pia-metrics-y-label {
+  display: none;
+}
+.loader-chart-container .pia-metrics-y-label .triangle {
+  display: none;
+}
+.loader-chart-container_dark .area .civ .label-text {
+  fill: #fff !important;
+}

package/dist/components/Charts/loader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './loader.scss';
+import { ChartProps } from './types';
+export declare const LoaderExecutionsChart: React.FC<ChartProps>;

package/dist/components/Charts/loader.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from "react";
+import { groupBy } from "lodash-es";
+import { Empty } from "antd";
+import "./loader.css";
+import { useTheme } from "../../utils/manifest";
+import { findLoaderTotalTiming } from "../../utils/loader";
+import { beautifyPath } from "../../utils/file";
+import { TimelineCom } from "./TimelineCharts";
+import { renderTotalLoadersTooltip, getTooltipHtmlForLoader } from "./utils";
+const LoaderExecutionsChart = ({ loaders, cwd }) => {
+  const { isDark } = useTheme();
+  const ref = useRef(null);
+  const groupByLoader = useMemo(() => groupBy(loaders, (e) => e.loader), [loaders]);
+  const formatterForLoader = useCallback((raw) => {
+    const { name, data: data2 } = raw;
+    const loaderName = name.replace(" total", "");
+    if (data2 == null ? void 0 : data2.ext) {
+      return getTooltipHtmlForLoader(data2.ext);
+    }
+    return renderTotalLoadersTooltip(loaderName, loaders, cwd);
+  }, []);
+  const data = useMemo(() => {
+    return Object.keys(groupByLoader).map((loaderName) => {
+      const list = groupByLoader[loaderName] || [];
+      if (list.length === 1) {
+        const { startAt, endAt } = list[0];
+        return {
+          p: loaderName,
+          n: loaderName,
+          s: startAt,
+          e: endAt
+        };
+      }
+      const { start, end } = findLoaderTotalTiming(list);
+      return {
+        p: loaderName,
+        n: loaderName,
+        s: start,
+        e: end,
+        c: list.map((e) => {
+          return {
+            p: loaderName,
+            // n: loaderName,
+            n: beautifyPath(e.resource, cwd),
+            s: e.startAt,
+            e: e.endAt,
+            ext: e
+          };
+        })
+      };
+    });
+  }, [groupByLoader]);
+  if (!data.length)
+    return /* @__PURE__ */ jsx(Empty, {});
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["loader-chart-container", isDark ? "loader-chart-container_dark" : ""].join(" ").trim(),
+      ref,
+      style: { width: "100%", height: "600px" },
+      children: /* @__PURE__ */ jsx(TimelineCom, { loaderData: data, formatterFn: formatterForLoader, chartType: "loader" })
+    }
+  );
+};
+export {
+  LoaderExecutionsChart
+};

package/dist/components/Charts/minify.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CommonChartProps } from './common';
+import './loader.scss';
+import './tooltips.scss';
+export declare const MinifyChartContainer: React.FC<CommonChartProps>;

package/dist/components/Charts/minify.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BarChartOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { Divider, Space } from "antd";
+import { TextDrawer } from "../TextDrawer";
+import { Summary } from "@rsdoctor/utils/common";
+import { Card } from "../Card";
+import { ServerAPIProvider } from "../Manifest";
+import { WebpackPluginsDataTable } from "../Plugins/webpack";
+import { CommonExecutionEmptyTips, CommonExecutionsChart } from "./common";
+import "./loader.css";
+import "./tooltips.css";
+const MinifyChartContainer = ({ summary }) => {
+  const hooks = ["processAssets", "optimizeChunkAssets"];
+  const { costs = [] } = summary || {};
+  const target = costs.find((e) => e.name === Summary.SummaryCostsDataName.Minify);
+  if (!target)
+    return null;
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      drawerProps: { title: 'Details of the "Minify" stage' },
+      text: /* @__PURE__ */ jsxs(Space, { children: [
+        "detail",
+        /* @__PURE__ */ jsx(BarChartOutlined, {})
+      ] }),
+      children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetPluginData, body: { hooks }, children: (res) => res && res.length ? /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx(Card, { title: 'Plugin DataSource of the "Minify"', collapsable: true, children: /* @__PURE__ */ jsx(WebpackPluginsDataTable, { dataSource: res }) }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(Card, { title: 'Chart of the "Minify"', children: /* @__PURE__ */ jsx(CommonExecutionsChart, { plugins: res }) })
+      ] }) : /* @__PURE__ */ jsx(CommonExecutionEmptyTips, {}) })
+    }
+  );
+};
+export {
+  MinifyChartContainer
+};

package/dist/components/Charts/tooltips.css

@@ -0,0 +1,62 @@
+.loader-tooltip-container {
+  white-space: normal;
+  word-wrap: break-word;
+  word-break: break-all;
+  min-width: 300px;
+  max-width: 400px;
+  padding: 12px;
+}
+.loader-tooltip-title {
+  font-size: 16px;
+  font-weight: 500;
+  padding-bottom: 4px;
+  display: block;
+}
+.loader-tooltip-description {
+  font-size: 14px;
+  padding-bottom: 4px;
+  display: block;
+  color: rgba(0, 0, 0, 0.4);
+}
+.loader-tooltip-item {
+  font-size: 12px;
+  font-weight: 400;
+  display: block;
+  list-style: none;
+  margin-top: 4px;
+  white-space: nowrap;
+  display: flex;
+  justify-content: flex-start;
+  align-items: baseline;
+}
+.loader-tooltip-item::before {
+  content: " ";
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #1677ff;
+  margin-right: 4px;
+}
+.loader-tooltip-item span {
+  display: inline-block;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+.loader-tooltip-item span:first-child {
+  margin: 0 0.2em;
+  padding: 1px 4px;
+  font-size: 90%;
+  background: rgba(150, 150, 150, 0.1);
+  border: 1px solid rgba(100, 100, 100, 0.2);
+  border-radius: 3px;
+  font-weight: 600;
+  font-family: monospace;
+}
+.loader-tooltip-item span:last-child {
+  flex: 1 1;
+  padding-left: 4px;
+}
+.loader-tooltip-textbold {
+  font-weight: 500;
+}

package/dist/components/Charts/types.d.ts

@@ -0,0 +1,61 @@
+import { SDK } from "@rsdoctor/types";
+export interface ChartProps {
+  loaders: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderChartData>;
+  cwd: string;
+}
+export interface CommonMetricPart<T extends string = string> {
+  _n?: boolean;
+  _c?: string;
+  p: string;
+  n: T;
+  ext?: unknown;
+}
+export declare type Metric = DurationMetric;
+export interface DurationMetric extends CommonMetricPart {
+  _r?: [start: string, end: string];
+  s: number;
+  e: number;
+  c?: DurationMetric[];
+}
+export declare enum ETraceEventPhase {
+  BEGIN = "B",
+  END = "E",
+  COMPLETE = "X",
+  INSTANT = "I",
+  MARK = "R",
+}
+type MicroSeconds = number;
+type ProcessID = number | string;
+type ArgsType = {
+  p: string;
+  n: string;
+  s: number;
+  e: number;
+};
+export interface ITraceEventData {
+  /**
+   *Any arguments provided for the event. Some of the event types have required argument fields, otherwise, you can put any information you wish in here. The arguments are displayed in Trace Viewer when you view an event in the analysis section.
+   */
+  args: ArgsType;
+  /**
+   * The name of the event, as displayed in Chart.
+   */
+  name: string;
+  /**
+   * The event type. This is a single character which changes depending on the type of event being output.
+   */
+  ph: ETraceEventPhase;
+  /**
+   *  The process ID for the process that output this event.
+   */
+  pid: ProcessID;
+  /**
+   *  The tracing clock timestamp of the event. The timestamps are provided at microsecond granularity.
+   */
+  ts: MicroSeconds;
+  /**
+   *  specify the tracing clock duration of complete events in microseconds.
+   */
+  dur?: MicroSeconds;
+}
+export {};

package/dist/components/Charts/types.js

@@ -0,0 +1,11 @@
+var ETraceEventPhase = /* @__PURE__ */ ((ETraceEventPhase2) => {
+  ETraceEventPhase2["BEGIN"] = "B";
+  ETraceEventPhase2["END"] = "E";
+  ETraceEventPhase2["COMPLETE"] = "X";
+  ETraceEventPhase2["INSTANT"] = "I";
+  ETraceEventPhase2["MARK"] = "R";
+  return ETraceEventPhase2;
+})(ETraceEventPhase || {});
+export {
+  ETraceEventPhase
+};

package/dist/components/Charts/utils.d.ts

@@ -0,0 +1,13 @@
+import { SDK } from '@rsdoctor/types';
+import './tooltips.scss';
+import { DurationMetric, ITraceEventData } from './types';
+export declare function getTooltipHtmlForLoader(loader: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderChartData>[0]): string;
+export declare function renderTotalLoadersTooltip(loaderName: string, loaders: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderChartData>, cwd: string): string;
+export declare function replaceSlashWithNewline(input: string): string;
+export declare function transformDurationMetric(rawData: DurationMetric[]): ITraceEventData[];
+export declare function processTrans(rawData: DurationMetric[]): ITraceEventData[];
+export declare function formatterForPlugins(raw: {
+  data: {
+    ext: ITraceEventData;
+  };
+}): string;

package/dist/components/Charts/utils.js

@@ -0,0 +1,203 @@
+import { Loader } from "@rsdoctor/utils/common";
+import dayjs from "dayjs";
+import { maxBy, minBy } from "lodash-es";
+import { formatCosts } from "../../utils";
+import "./tooltips.css";
+import { ETraceEventPhase } from "./types";
+function getTooltipHtmlForLoader(loader) {
+  return `
+  <div class="loader-tooltip-container">
+    <div class="loader-tooltip-title">${loader.loader}</div>
+    <li class="loader-tooltip-item">
+      <span>isPitch</span>
+      <span>${loader.isPitch}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>duration</span>
+      <span class="loader-tooltip-textbold">${formatCosts(loader.costs)}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>filepath</span>
+      <span>${loader.resource}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>start</span>
+      <span class="loader-tooltip-textbold">${dayjs(loader.startAt).format("YYYY/MM/DD HH:mm:ss")}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>end</span>
+      <span class="loader-tooltip-textbold">${dayjs(loader.endAt).format("YYYY/MM/DD HH:mm:ss")}</span>
+    </li>
+  </div>
+  `.trim();
+}
+function renderTotalLoadersTooltip(loaderName, loaders, cwd) {
+  const filter = (loader) => loader.loader === loaderName;
+  const filteredLoaders = loaders.filter(filter);
+  const resources = filteredLoaders.map((e) => e.resource);
+  const nodeModulesResources = resources.filter((e) => e.includes("/node_modules/"));
+  const outsideResources = resources.filter((e) => !e.startsWith(cwd));
+  const start = minBy(filteredLoaders, (e) => e.startAt).startAt;
+  const end = maxBy(filteredLoaders, (e) => e.endAt).endAt;
+  const duration = Loader.getLoadersCosts(filter, loaders);
+  return `
+<div class="loader-tooltip-container">
+  <div class="loader-tooltip-title">${loaderName}</div>
+  <li class="loader-tooltip-item">
+    <span>files</span>
+    <span class="loader-tooltip-textbold">${resources.length}</span>
+  </li>
+  <li class="loader-tooltip-item">
+    <span>files(node_modules)</span>
+    <span class="loader-tooltip-textbold">${nodeModulesResources.length}</span>
+  </li>
+  <li class="loader-tooltip-item">
+    <span>files(outside the cwd)</span>
+    <span class="loader-tooltip-textbold">${outsideResources.length}</span>
+  </li>
+  <li class="loader-tooltip-item">
+    <span>duration(estimated)</span>
+    <span class="loader-tooltip-textbold">${formatCosts(duration)}</span>
+  </li>
+  <li class="loader-tooltip-item">
+    <span>start(min)</span>
+    <span>${dayjs(start).format("YYYY/MM/DD HH:mm:ss")}</span>
+  </li>
+  <li class="loader-tooltip-item">
+    <span>end(max)</span>
+    <span>${dayjs(end).format("YYYY/MM/DD HH:mm:ss")}</span>
+  </li>
+  </div>
+    `.trim();
+}
+function replaceSlashWithNewline(input) {
+  let result = "";
+  for (let i = 0; i < input.length; i++) {
+    if (input[i] === "/") {
+      if (true) {
+        result += "/\n";
+      } else {
+        result += "/";
+      }
+    } else {
+      result += input[i];
+    }
+  }
+  return result;
+}
+function transformDurationMetric(rawData) {
+  return rawData.reduce((acc, cur) => {
+    if (cur.c) {
+      const res = transformDurationMetric(cur.c);
+      acc.push(
+        {
+          name: cur.n,
+          ph: ETraceEventPhase.BEGIN,
+          pid: cur.p,
+          ts: cur.s,
+          args: cur
+        },
+        ...res,
+        {
+          name: cur.n,
+          ph: ETraceEventPhase.END,
+          pid: cur.p,
+          ts: cur.e,
+          args: cur
+        }
+      );
+    } else {
+      acc.push({
+        name: cur.n,
+        ph: ETraceEventPhase.BEGIN,
+        pid: cur.p,
+        ts: cur.s,
+        args: cur
+      });
+      acc.push({
+        name: cur.n,
+        ph: ETraceEventPhase.END,
+        pid: cur.p,
+        ts: cur.e,
+        args: cur
+      });
+    }
+    return acc;
+  }, []);
+}
+function processTrans(rawData) {
+  const processedData = rawData.sort((a, b) => a.s - b.s).reduce((prev, cur) => {
+    const ca = prev[cur.p];
+    if (ca) {
+      loop(ca, cur);
+    } else {
+      prev[cur.p] = [cur];
+    }
+    return prev;
+  }, {});
+  const data = Object.entries(processedData).reduce((prev, [_key, val]) => {
+    prev.push(...val);
+    return prev;
+  }, []);
+  return transformDurationMetric(data);
+}
+function loop(dur, target) {
+  const queue = [dur];
+  while (queue.length > 0) {
+    const floor = queue.shift() || [];
+    if (floor.length === 0)
+      return;
+    const curFloorLast = floor[floor.length - 1];
+    if (curFloorLast.e <= target.s) {
+      return floor.push(target);
+    }
+    let nextFloor;
+    for (let i = floor.length - 1; i >= 0; i--) {
+      const { c } = floor[i];
+      if (c) {
+        nextFloor = c;
+      }
+    }
+    if (nextFloor) {
+      queue.push(nextFloor);
+    } else {
+      curFloorLast.c = [target];
+    }
+  }
+}
+function formatterForPlugins(raw) {
+  const { ext } = raw.data;
+  return `
+  <div class="loader-tooltip-container">
+    <div class="loader-tooltip-title">[${ext.args.p}] ${ext.args.n}</div>
+    <li class="loader-tooltip-item">
+      <span>hook</span>
+      <span>${ext.args.p}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>tap name</span>
+      <span>${ext.args.n}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>start</span>
+      <span>${dayjs(ext.args.s).format("YYYY/MM/DD HH:mm:ss")}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>end</span>
+      <span>${dayjs(ext.args.e).format("YYYY/MM/DD HH:mm:ss")}</span>
+    </li>
+    <li class="loader-tooltip-item">
+      <span>duration</span>
+      <span>${formatCosts(ext.args.e - ext.args.s)}</span>
+    </li>
+  </div>
+      `.trim();
+}
+export {
+  formatterForPlugins,
+  getTooltipHtmlForLoader,
+  processTrans,
+  renderTotalLoadersTooltip,
+  replaceSlashWithNewline,
+  transformDurationMetric
+};

package/dist/components/CodeViewer/config.d.ts

@@ -0,0 +1,2 @@
+import type { editor } from 'monaco-editor';
+export declare const DefaultEditorConfig: editor.IStandaloneEditorConstructionOptions;

package/dist/components/CodeViewer/config.js

@@ -0,0 +1,18 @@
+const DefaultEditorConfig = {
+  readOnly: true,
+  domReadOnly: true,
+  fontSize: 12,
+  renderValidationDecorations: "off",
+  hideCursorInOverviewRuler: true,
+  smoothScrolling: true,
+  wordWrap: "bounded",
+  colorDecorators: true,
+  codeLens: false,
+  cursorWidth: 0,
+  minimap: {
+    enabled: false
+  }
+};
+export {
+  DefaultEditorConfig
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DiffEditorProps } from '@monaco-editor/react';
+interface DiffViewerProps {
+  before: string;
+  after: string;
+  filepath: string;
+  className?: string;
+  editorProps?: DiffEditorProps;
+}
+export declare const DiffViewer: React.FC<DiffViewerProps>;
+export {};