@rsdoctor/components 0.0.0-next-20240620044732

package/dist/components/Charts/TimelineCharts/index.js

@@ -0,0 +1,212 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, memo } from "react";
+import ReactECharts from "echarts-for-react";
+import * as echarts from "echarts/core";
+import dayjs from "dayjs";
+import { groupBy } from "lodash-es";
+import { LITTLE_PALETTE_COLORS, PALETTE_COLORS } from "../constants";
+const LINE_HEIGHT = 60;
+const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "normal" }) => {
+  const data = [];
+  let categories = [];
+  const [optionsData, setOptinsData] = useState({});
+  useEffect(() => {
+    if (!loaderData)
+      return;
+    const _categories = [];
+    loaderData.forEach((_l) => {
+      _categories.unshift(_l.n + " total");
+      _categories.unshift(_l.n);
+    });
+    loaderData.forEach(function(_loaderData, _i) {
+      data.push({
+        name: _loaderData.n + " total",
+        value: [
+          _categories.indexOf(_loaderData.n + " total"),
+          _loaderData.s,
+          _loaderData.e,
+          _loaderData.e - _loaderData.s
+        ],
+        itemStyle: {
+          normal: {
+            color: LITTLE_PALETTE_COLORS[_i % 8]
+          }
+        }
+      });
+      if (!_loaderData?.c)
+        return;
+      for (let l = 0; l < _loaderData?.c?.length; l++) {
+        data.push({
+          name: _loaderData.n,
+          value: [
+            _categories.indexOf(_loaderData.n),
+            _loaderData.c[l].s,
+            _loaderData.c[l].e,
+            _loaderData.c[l].e - _loaderData.c[l].s
+          ],
+          itemStyle: {
+            normal: {
+              color: PALETTE_COLORS[(l + _i) % 30]
+            }
+          },
+          ext: _loaderData.c[l].ext
+        });
+      }
+    });
+    categories = _categories.map((val, i) => {
+      if (i % 2 !== 0) {
+        return val.replace(" total", "");
+      } else {
+        return "";
+      }
+    });
+  }, [loaderData]);
+  useEffect(() => {
+    if (!pluginsData)
+      return;
+    const _pluginsData = groupBy(pluginsData, (e) => e.pid);
+    Object.keys(_pluginsData).reverse().forEach(function(key, i) {
+      _pluginsData[key].forEach((_plugin, _i) => {
+        data.push({
+          name: String(_plugin.pid),
+          value: [
+            i,
+            _plugin.args.s,
+            _plugin.args.e,
+            _plugin.args.e - _plugin.args.s
+          ],
+          itemStyle: {
+            normal: {
+              color: PALETTE_COLORS[(_i + i) % 30]
+            }
+          },
+          ext: _plugin
+        });
+      });
+      categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
+    });
+  }, [pluginsData]);
+  useEffect(() => {
+    function renderItem(params, api) {
+      const categoryIndex = api.value(0);
+      const start = api.coord([api.value(1), categoryIndex]);
+      const end = api.coord([api.value(2), categoryIndex]);
+      const height = api.size([0, 1])[1] * 0.3;
+      const rectShape = echarts.graphic.clipRectByRect(
+        {
+          x: start[0],
+          y: chartType === "loader" ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height * 2) : start[1],
+          width: end[0] - start[0] || 5,
+          height
+        },
+        {
+          x: params.coordSys.x,
+          y: params.coordSys.y,
+          width: params.coordSys.width,
+          height: params.coordSys.height
+        }
+      );
+      return rectShape && {
+        type: "rect",
+        transition: ["shape"],
+        shape: rectShape,
+        style: api.style(),
+        enterFrom: {
+          style: { opacity: 0 },
+          x: 0
+        }
+      };
+    }
+    const option = {
+      tooltip: {
+        formatter: (raw) => {
+          return formatterFn(raw);
+        }
+      },
+      dataZoom: [
+        {
+          type: "slider",
+          filterMode: "weakFilter",
+          showDataShadow: false,
+          top: -10,
+          labelFormatter: ""
+        },
+        {
+          type: "inside",
+          filterMode: "weakFilter"
+        }
+      ],
+      grid: {
+        top: 10,
+        left: 0,
+        bottom: 10,
+        right: 0,
+        height: categories.length > (chartType === "loader" ? 6 : 3) ? "auto" : categories.length * LINE_HEIGHT,
+        containLabel: true
+      },
+      xAxis: {
+        position: "top",
+        splitLine: {
+          show: false
+        },
+        scale: true,
+        axisLine: {
+          show: false
+        },
+        axisLabel: {
+          formatter(val) {
+            return dayjs(val).format("HH:mm:ss");
+          }
+        }
+      },
+      yAxis: {
+        type: "category",
+        splitLine: {
+          interval: chartType === "loader" ? 1 : 0,
+          show: true
+        },
+        axisLabel: {
+          inside: true,
+          lineHeight: 20,
+          width: 100,
+          fontSize: 12,
+          color: "#000",
+          verticalAlign: "bottom"
+        },
+        axisLine: {
+          show: true
+        },
+        axisTick: {
+          show: false
+        },
+        data: categories
+      },
+      series: [
+        {
+          type: "custom",
+          renderItem,
+          itemStyle: {
+            opacity: 0.8
+          },
+          encode: {
+            x: [1, 2],
+            y: 0
+          },
+          data
+        }
+      ]
+    };
+    setOptinsData(option);
+  }, [loaderData, pluginsData]);
+  return /* @__PURE__ */ jsx(
+    ReactECharts,
+    {
+      option: optionsData,
+      echarts,
+      style: { width: "100%", minHeight: "400px" }
+    }
+  );
+});
+export {
+  TimelineCom
+};

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

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

package/dist/components/Charts/bootstrap.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Space } from "antd";
+import { BarChartOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { TextDrawer } from "../TextDrawer";
+import "./loader.css";
+import "./tooltips.css";
+import { CommonExecutionEmptyTips, CommonExecutionsChart } from "./common";
+import { ServerAPIProvider } from "../Manifest";
+import { Summary } from "@rsdoctor/utils/common";
+const BootstrapChartContainer = ({ summary }) => {
+  const { costs = [] } = summary || {};
+  const target = costs.find((e) => e.name === Summary.SummaryCostsDataName.Bootstrap);
+  const hooks = [
+    "environment",
+    "afterEnvironment",
+    "entryOption",
+    "afterPlugins",
+    "afterResolvers",
+    "initialize",
+    "beforeRun",
+    "run",
+    "watchRun",
+    "normalModuleFactory",
+    "contextModuleFactory",
+    "beforeCompile"
+  ];
+  if (!target)
+    return null;
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      drawerProps: { title: 'Chart of the "Bootstrap -> BeforeCompile" 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__ */ jsx(CommonExecutionsChart, { plugins: res }) : /* @__PURE__ */ jsx(CommonExecutionEmptyTips, {}) })
+    }
+  );
+};
+export {
+  BootstrapChartContainer
+};

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

@@ -0,0 +1,13 @@
+import { SDK } from '@rsdoctor/types';
+import React from 'react';
+import './loader.scss';
+import './tooltips.scss';
+import { Metric } from './types';
+export interface CommonChartProps {
+    summary: SDK.SummaryData;
+}
+export declare const CommonExecutionsChart: React.FC<{
+    plugins: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPluginData>;
+    defaultDatas?: Metric[];
+}>;
+export declare const CommonExecutionEmptyTips: React.FC;

package/dist/components/Charts/common.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Typography } from "antd";
+import { useEffect, useRef, useState } from "react";
+import { useTheme } from "../../utils";
+import { TimelineCom } from "./TimelineCharts";
+import "./loader.css";
+import "./tooltips.css";
+import { formatterForPlugins, processTrans } from "./utils";
+const CommonExecutionsChart = ({ plugins, defaultDatas = [] }) => {
+  const { isDark } = useTheme();
+  const ref = useRef(null);
+  const [data, setData] = useState([]);
+  useEffect(() => {
+    const arr = [];
+    plugins.forEach((item) => {
+      item.data.forEach((el) => {
+        arr.push({
+          p: item.hook,
+          n: `${item.tapName}`,
+          s: el.startAt,
+          e: el.endAt
+        });
+      });
+    });
+    setData([
+      ...processTrans(defaultDatas),
+      ...processTrans(arr)
+    ]);
+  }, []);
+  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, { pluginsData: data, formatterFn: formatterForPlugins })
+    }
+  );
+};
+const CommonExecutionEmptyTips = () => {
+  return /* @__PURE__ */ jsx(
+    Alert,
+    {
+      message: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: "make sure that you have turn on " }),
+        /* @__PURE__ */ jsx(Typography.Text, { children: " in configuration for the Rsdoctor plugin." })
+      ] }),
+      type: "info",
+      showIcon: true
+    }
+  );
+};
+export {
+  CommonExecutionEmptyTips,
+  CommonExecutionsChart
+};

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

@@ -0,0 +1,2 @@
+export declare const LITTLE_PALETTE_COLORS: string[];
+export declare const PALETTE_COLORS: string[];

package/dist/components/Charts/constants.js

@@ -0,0 +1,46 @@
+const LITTLE_PALETTE_COLORS = [
+  "#a8071a",
+  "#ad6800",
+  "#237804",
+  "#006d75",
+  "#ad8b00",
+  "#ad4e00",
+  "#5b8c00",
+  "#003eb3"
+];
+const PALETTE_COLORS = [
+  "#4096ff",
+  "#69b1ff",
+  "#9e1068",
+  "#722ed1",
+  "#bae0ff",
+  "#d3adf7",
+  "#597ef7",
+  "#ffadd2",
+  "#c41d7f",
+  "#391085",
+  "#ffa940",
+  "#5c060b",
+  "#a81414",
+  "#ff7875",
+  "#ffd591",
+  "#ffe58f",
+  "#d3f261",
+  "#d4b106",
+  "#7cb305",
+  "#f4ffb8",
+  "#fa8c16",
+  "#0958d9",
+  "#fff3f0",
+  "#82090d",
+  "#ffbfb3",
+  "#f44336",
+  "#ff998a",
+  "#ff7161",
+  "#ffe2db",
+  "#cf2923"
+];
+export {
+  LITTLE_PALETTE_COLORS,
+  PALETTE_COLORS
+};

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,88 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+  useState
+} 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,
+  useDebounceHook
+} from "./utils";
+const LoaderExecutionsChart = ({
+  loaders,
+  cwd
+}) => {
+  const { isDark } = useTheme();
+  const ref = useRef(null);
+  const [data, setData] = useState([]);
+  const durationMetricData = useDebounceHook(data, 200);
+  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?.ext) {
+      return getTooltipHtmlForLoader(data2.ext);
+    }
+    return renderTotalLoadersTooltip(loaderName, loaders, cwd);
+  }, []);
+  useEffect(() => {
+    const _data = Object.keys(groupByLoader).map(
+      (loaderName) => {
+        const list = groupByLoader[loaderName] || [];
+        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
+            };
+          })
+        };
+      }
+    );
+    setData(_data);
+  }, [groupByLoader]);
+  return /* @__PURE__ */ jsx(Fragment, { children: data?.length ? /* @__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: durationMetricData,
+          formatterFn: formatterForLoader,
+          chartType: "loader"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(Empty, {}) });
+};
+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
+};