@rsdoctor/components 0.0.0-next-20240620044732

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 transformDurationMetric(rawData: DurationMetric[]): ITraceEventData[];
+export declare function processTrans(rawData: DurationMetric[]): ITraceEventData[];
+export declare function formatterForPlugins(raw: {
+    data: {
+        ext: ITraceEventData;
+    };
+}): string;
+export declare function useDebounceHook(value: DurationMetric[], delay: number): DurationMetric[] | undefined;

package/dist/components/Charts/utils.js

@@ -0,0 +1,206 @@
+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";
+import { useEffect, useState } from "react";
+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 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();
+}
+function useDebounceHook(value, delay) {
+  const [debounceValue, setDebounceValue] = useState(value);
+  useEffect(() => {
+    let timer = setTimeout(() => setDebounceValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounceValue;
+}
+export {
+  formatterForPlugins,
+  getTooltipHtmlForLoader,
+  processTrans,
+  renderTotalLoadersTooltip,
+  transformDurationMetric,
+  useDebounceHook
+};

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 {};

package/dist/components/CodeViewer/diff.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { DiffEditor } from "@monaco-editor/react";
+import { Size } from "../../constants";
+import { getModifiedLanguage, getOriginalLanguage } from "../../utils";
+const DiffViewer = ({ before, after, filepath, className, editorProps }) => {
+  return /* @__PURE__ */ jsx(
+    DiffEditor,
+    {
+      className,
+      originalLanguage: getOriginalLanguage(filepath),
+      modifiedLanguage: getModifiedLanguage(filepath),
+      theme: "vs-dark",
+      original: before,
+      modified: after,
+      width: "100%",
+      ...editorProps,
+      options: {
+        readOnly: true,
+        originalEditable: false,
+        renderSideBySide: true,
+        renderIndicators: true,
+        lineDecorationsWidth: Size.BasePadding,
+        definitionLinkOpensInPeek: false,
+        domReadOnly: true,
+        fontSize: 14,
+        minimap: { enabled: false },
+        diffWordWrap: "on",
+        ...editorProps?.options
+      }
+    }
+  );
+};
+export {
+  DiffViewer
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+interface FileHightLightViewerProps {
+    cwd: string;
+    module: SDK.ModuleData;
+    dependency: SDK.DependencyData;
+    moduleCode: SDK.ModuleSource;
+}
+export declare const FileHightLightViewer: React.FC<FileHightLightViewerProps>;
+export {};

package/dist/components/CodeViewer/hightlight.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Space, Card, Tooltip } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import Editor from "@monaco-editor/react";
+import { getOriginalLanguage, beautifyModulePath, getSelectionRange, getRevealPositionForViewer } from "../../utils";
+import { CodeOpener } from "../Opener";
+const FileHightLightViewer = ({ dependency, module, cwd, moduleCode }) => {
+  const editorRef = useRef(null);
+  if (!dependency)
+    return null;
+  const { statements } = dependency;
+  const hasSourceRange = Boolean(statements?.[0]?.position?.source);
+  const { start, end } = statements?.[0]?.position ? hasSourceRange ? statements[0].position.source : statements[0].position.transformed : { start: { line: 0, column: 0 }, end: { line: 0, column: 0 } };
+  const content = hasSourceRange ? moduleCode?.source : moduleCode?.transformed || moduleCode?.source;
+  const modulePath = module.path;
+  const handleEditorDidMount = (editor2, monaco) => {
+    editorRef.current = editor2;
+    const range = getSelectionRange({ start, end }, monaco.Range);
+    const position = getRevealPositionForViewer(range.startLineNumber, range.startColumn);
+    editor2.revealPositionInCenter(position);
+    editor2.deltaDecorations(
+      [],
+      [
+        {
+          range,
+          options: {
+            inlineClassName: "file-inline-decoration"
+          }
+        }
+      ]
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      title: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: modulePath, zIndex: 99999, children: /* @__PURE__ */ jsx(InfoCircleOutlined, {}) }),
+        /* @__PURE__ */ jsx(
+          CodeOpener,
+          {
+            cwd,
+            url: modulePath,
+            label: beautifyModulePath(modulePath, cwd).alias,
+            loc: `${start.line}:${start.column || 1}`,
+            code: true,
+            disabled: true
+          }
+        )
+      ] }),
+      style: { height: "100%" },
+      children: /* @__PURE__ */ jsx(
+        Editor,
+        {
+          theme: "vs-dark",
+          language: getOriginalLanguage(modulePath),
+          value: content,
+          width: "100%",
+          height: window.innerHeight / 1.5,
+          options: {
+            readOnly: true,
+            domReadOnly: true,
+            fontSize: 14,
+            minimap: {
+              enabled: false
+            }
+          },
+          onMount: handleEditorDidMount
+        }
+      )
+    }
+  );
+};
+export {
+  FileHightLightViewer
+};

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

@@ -0,0 +1,4 @@
+export * from './diff';
+export * from './hightlight';
+export * from './viewer';
+export * from './config';

package/dist/components/CodeViewer/index.js

@@ -0,0 +1,4 @@
+export * from "./diff";
+export * from "./hightlight";
+export * from "./viewer";
+export * from "./config";

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+import type { editor } from 'monaco-editor';
+interface CodeViewerProps {
+    path: string;
+    content: string;
+    defaultLine?: number;
+    ranges?: SDK.SourceRange[];
+    editorConfig?: editor.IStandaloneEditorConstructionOptions;
+}
+export declare const CodeViewer: React.FC<CodeViewerProps>;
+export declare const CodeViewerWithDrawer: React.FC<CodeViewerProps>;
+export {};

package/dist/components/CodeViewer/viewer.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import { isNumber } from "lodash-es";
+import { CodepenCircleOutlined } from "@ant-design/icons";
+import { getOriginalLanguage, getSelectionRange } from "../../utils";
+import { DefaultEditorConfig } from "./config";
+import { TextDrawer } from "../TextDrawer";
+const CodeViewer = ({ content, ranges, path, defaultLine, editorConfig = {} }) => {
+  const handleEditorDidMount = (editor, monaco) => {
+    if (isNumber(defaultLine)) {
+      editor.revealLine(defaultLine);
+    }
+    if (ranges && ranges.length > 0) {
+      editor.deltaDecorations(
+        [],
+        ranges.map((range) => ({
+          range: getSelectionRange(range, monaco.Range),
+          options: {
+            inlineClassName: "file-inline-decoration"
+          }
+        }))
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Editor,
+    {
+      theme: "vs-dark",
+      language: getOriginalLanguage(path),
+      value: content,
+      width: "100%",
+      height: window.innerHeight / 1.5,
+      options: { ...DefaultEditorConfig, ...editorConfig },
+      onMount: handleEditorDidMount
+    }
+  );
+};
+const CodeViewerWithDrawer = (props) => {
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      text: "",
+      buttonProps: {
+        size: "small",
+        icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}),
+        type: "default"
+      },
+      buttonStyle: { padding: `0 4px` },
+      drawerProps: {
+        destroyOnClose: true,
+        title: `Code of "${props.path}"`
+      },
+      children: /* @__PURE__ */ jsx(CodeViewer, { ...props })
+    }
+  );
+};
+export {
+  CodeViewer,
+  CodeViewerWithDrawer
+};

package/dist/components/Configuration/builder.d.ts

@@ -0,0 +1,13 @@
+import { SDK } from '@rsdoctor/types';
+import React from 'react';
+interface WebpackConfigurationViewerBaseProps {
+    defaultKeys?: string[];
+    configs: SDK.ConfigData;
+}
+export declare const WebpackConfigurationViewerBase: React.FC<WebpackConfigurationViewerBaseProps>;
+export declare const WebpackConfigurationViewer: React.FC<Omit<WebpackConfigurationViewerBaseProps, "configs"> & Partial<{
+    body: {
+        key: import("@rsdoctor/types/dist/manifest").RsdoctorManifestMappingKeys;
+    };
+}>>;
+export {};

package/dist/components/Configuration/builder.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SDK } from "@rsdoctor/types";
+import { Divider, Row, Select, Space, Typography } from "antd";
+import { pick } from "lodash-es";
+import { useState } from "react";
+import ReactJson from "react-json-view";
+import { useWebpackConfigurationByConfigs } from "../../utils";
+import { withServerAPI } from "../Manifest";
+import { TextDrawer } from "../TextDrawer";
+import { Title } from "../Title";
+const WebpackConfigurationViewerBase = ({ defaultKeys, configs }) => {
+  const builderConfigData = useWebpackConfigurationByConfigs(configs || []);
+  if (!builderConfigData)
+    return null;
+  const { config, version, name } = builderConfigData;
+  const keys = Object.keys(config);
+  const [selectKeys, setSelectKeys] = useState(defaultKeys || keys);
+  return /* @__PURE__ */ jsx(TextDrawer, { text: "View Bundler Config", children: /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Title, { text: `Bundler Config Viewer` }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { children: "Properties: " }),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          dropdownStyle: { zIndex: 999 },
+          mode: "multiple",
+          allowClear: true,
+          value: selectKeys.length === keys.length ? [] : selectKeys,
+          style: { width: 350 },
+          dropdownMatchSelectWidth: true,
+          placeholder: "Show Selected Properties Only.",
+          onChange: (e) => {
+            setSelectKeys(e);
+          },
+          children: keys.map((e) => {
+            return /* @__PURE__ */ jsx(Select.Option, { label: e, value: e, children: e }, e);
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      ReactJson,
+      {
+        name: version && version !== "unknown" ? `${name}@${version}` : `webpack.config`,
+        theme: "monokai",
+        src: selectKeys.length === 0 ? config : pick(config, selectKeys),
+        displayDataTypes: false,
+        displayObjectSize: false
+      }
+    )
+  ] }) });
+};
+const WebpackConfigurationViewer = withServerAPI({
+  Component: WebpackConfigurationViewerBase,
+  api: SDK.ServerAPI.API.LoadDataByKey,
+  responsePropName: "configs",
+  body: {
+    key: "configs"
+  },
+  showSkeleton: false
+});
+export {
+  WebpackConfigurationViewer,
+  WebpackConfigurationViewerBase
+};

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

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