@rsdoctor/components 0.0.0-next-20240620044732

package/dist/components/Configuration/index.js

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

package/dist/components/FileTree/index.css

@@ -0,0 +1,58 @@
+.rc-tree {
+  margin: 0;
+  border: 1px solid transparent;
+}
+.rc-tree .rc-tree-treenode {
+  margin: 0;
+  padding: 0;
+  line-height: 24px;
+  white-space: nowrap;
+  list-style: none;
+  outline: 0;
+}
+.rc-tree .rc-tree-treenode .rc-tree-node-content-wrapper {
+  position: relative;
+  display: inline-block;
+  height: 24px;
+  margin: 0;
+  padding: 0 4px;
+  box-sizing: border-box;
+  text-decoration: none;
+  vertical-align: top;
+  cursor: pointer;
+}
+.rc-tree .rc-tree-treenode-child-tree {
+  display: none;
+}
+.rc-tree .rc-tree-treenode-child-tree-open {
+  display: block;
+}
+.rc-tree .rc-tree-treenode-treenode-disabled > span:not(.rc-tree-switcher),
+.rc-tree .rc-tree-treenode > a,
+.rc-tree .rc-tree-treenode > a span {
+  color: #767676;
+  cursor: not-allowed;
+}
+.rc-tree .rc-tree-treenode-treenode-selected {
+  background: rgba(5, 145, 255, 0.3);
+  border-radius: 4px;
+}
+.rc-tree .rc-tree-treenode-title {
+  display: inline-block;
+}
+.rc-tree .rc-tree-treenode-indent {
+  display: inline-block;
+  height: 0;
+  vertical-align: bottom;
+}
+.rc-tree .rc-tree-treenode-indent-unit {
+  display: inline-block;
+  width: 14px;
+}
+.file-tree-switcher-arrow {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+.file-tree-switcher-arrow-expand {
+  transform: rotate(90deg);
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TreeProps } from 'rc-tree';
+import './index.sass';
+export declare const FileTree: React.FC<Partial<TreeProps>>;

package/dist/components/FileTree/index.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Space, theme } from "antd";
+import { FileOutlined, FolderOpenOutlined, FolderOutlined, RightOutlined } from "@ant-design/icons";
+import Tree from "rc-tree";
+import { Size } from "../../constants";
+import "./index.css";
+import { useTheme } from "../../utils";
+const { useToken } = theme;
+const FileTree = (props) => {
+  const { isDark } = useTheme();
+  const { token } = useToken();
+  const color = isDark ? token.colorWhite : token.colorText;
+  const style = { fontSize: token.fontSize };
+  return /* @__PURE__ */ jsx(
+    Tree,
+    {
+      checkable: false,
+      selectable: true,
+      switcherIcon: ({ data, expanded }) => {
+        if (data?.children) {
+          return /* @__PURE__ */ jsxs(Space, { style: { color }, children: [
+            /* @__PURE__ */ jsx(
+              RightOutlined,
+              {
+                twoToneColor: color,
+                className: `file-tree-switcher-arrow ${expanded ? "file-tree-switcher-arrow-expand" : ""}`,
+                style
+              }
+            ),
+            expanded ? /* @__PURE__ */ jsx(FolderOpenOutlined, { twoToneColor: color, style }) : /* @__PURE__ */ jsx(FolderOutlined, { twoToneColor: color, style })
+          ] });
+        }
+        return /* @__PURE__ */ jsx(FileOutlined, { style: { marginLeft: Size.BasePadding - 6, color } });
+      },
+      expandAction: "click",
+      ...props
+    }
+  );
+};
+export {
+  FileTree
+};

package/dist/components/Form/keyword.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface KeywordProps {
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    icon?: React.ReactNode;
+    label?: string;
+    placeholder?: string;
+    delay?: number;
+    className?: string;
+    width?: number;
+    onChange: (keyword: string) => void;
+}
+export declare const KeywordInput: React.FC<KeywordProps>;
+export {};

package/dist/components/Form/keyword.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button, Input, Typography } from "antd";
+const KeywordInput = ({
+  icon: Icon,
+  label,
+  labelStyle: ls = {},
+  placeholder,
+  onChange,
+  style,
+  className,
+  width,
+  delay = 300
+}) => {
+  const labelWidth = 120;
+  const [filename, setFilename] = useState("");
+  const labelStyle = { width: labelWidth, ...ls };
+  const ref = useRef(null);
+  let timer;
+  useEffect(() => {
+    onChange(filename);
+  }, [filename]);
+  return /* @__PURE__ */ jsxs(Input.Group, { compact: true, style, className, children: [
+    label || Icon ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        style: labelStyle,
+        onClick: () => {
+          if (ref && ref.current) {
+            ref.current.focus();
+          }
+        },
+        children: [
+          Icon || null,
+          /* @__PURE__ */ jsx(Typography.Text, { children: label })
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        allowClear: true,
+        defaultValue: filename,
+        style: { width: width ? width - labelWidth : 250 },
+        placeholder,
+        onChange: (e) => {
+          clearTimeout(timer);
+          const v = e.target.value.trim();
+          setTimeout(() => {
+            setFilename(v);
+          }, delay);
+        }
+      }
+    )
+  ] });
+};
+export {
+  KeywordInput
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextProps } from 'antd/es/typography/Text';
+export declare const Keyword: React.FC<TextProps & {
+    text: string;
+    keyword: string;
+}>;

package/dist/components/Keyword/index.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { Typography } from "antd";
+const Keyword = ({ text, keyword, ...rest }) => {
+  if (!keyword) {
+    return /* @__PURE__ */ jsx(Typography.Text, { ...rest, children: text });
+  }
+  const idx = text.indexOf(keyword);
+  if (idx === -1) {
+    return /* @__PURE__ */ jsx(Typography.Text, { ...rest, children: text });
+  }
+  const els = [];
+  let str = text;
+  while (str.length > 0) {
+    const idx2 = str.indexOf(keyword);
+    if (idx2 > -1) {
+      if (idx2 !== 0) {
+        els.push(
+          /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: "inherit" }, children: str.slice(0, idx2) }, els.length)
+        );
+      }
+      els.push(
+        /* @__PURE__ */ jsx(Typography.Text, { mark: true, style: { fontSize: "inherit" }, children: keyword }, els.length)
+      );
+      str = str.slice(idx2 + keyword.length);
+    } else {
+      els.push(
+        /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: "inherit" }, children: str }, els.length)
+      );
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsx(Typography.Text, { ...rest, children: els });
+};
+export {
+  Keyword
+};

package/dist/components/Layout/builder-select.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BuilderSelect: React.FC;

package/dist/components/Layout/builder-select.js

@@ -0,0 +1,50 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Select, Divider, Typography } from "antd";
+import { useState, useEffect } from "react";
+import Icon from "../../assets/connection-point.3b3c78ca.svg";
+import { fetchManifest, changeOrigin } from "../../utils";
+const BuilderSelect = () => {
+  const [buildName, setBuildName] = useState("");
+  const [series, setSeries] = useState([]);
+  useEffect(() => {
+    fetchManifest().then(({ name, series: series2 }) => {
+      if (name) {
+        setBuildName(name);
+      }
+      if (series2 && series2.length > 0) {
+        setSeries(series2);
+      }
+    });
+  }, []);
+  if (buildName.length <= 0 || series.length <= 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Divider, { type: "vertical", style: { margin: "0 24px" } }),
+    /* @__PURE__ */ jsx("img", { src: Icon, style: { marginRight: 6, height: 16 } }),
+    /* @__PURE__ */ jsx(Typography, { children: "Compiler" }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        className: "builder-selector",
+        defaultValue: buildName,
+        bordered: false,
+        style: { minWidth: 100 },
+        onChange: (val) => {
+          const item = series.find((item2) => item2.name === val);
+          if (item) {
+            if (item.origin) {
+              location.href = changeOrigin(item.origin);
+            } else {
+              console.error("No RsdoctorManifestSeriesData.origin");
+            }
+          }
+        },
+        children: series.map((item, i) => /* @__PURE__ */ jsx(Select.Option, { value: item.name, className: "builder-selector-option-item", children: item.name }, i))
+      }
+    )
+  ] });
+};
+export {
+  BuilderSelect
+};

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

@@ -0,0 +1 @@
+export declare const CompileName = "Compile Analysis";

package/dist/components/Layout/constants.js

@@ -0,0 +1,4 @@
+const CompileName = "Compile Analysis";
+export {
+  CompileName
+};

package/dist/components/Layout/header.css

@@ -0,0 +1,12 @@
+.header-switch .ant-switch-handle {
+  top: 1px !important;
+}
+.header-icon {
+  user-select: none;
+}
+.header-icon:hover {
+  color: #1668dc;
+}
+.header-icon:active {
+  color: #40a9ff;
+}

package/dist/components/Layout/header.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './header.sass';
+export declare const Header: React.FC;

package/dist/components/Layout/header.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TranslationOutlined } from "@ant-design/icons";
+import { Col, Dropdown, Layout, Row, Typography } from "antd";
+import { Language, Size } from "../../constants";
+import {
+  useI18n,
+  useTheme
+} from "../../utils";
+import { OverlayAlertsWithButton } from "../Alerts";
+import { BuilderSelect } from "./builder-select";
+import { Menus } from "./menus";
+import "./header.css";
+const Header = () => {
+  const { i18n } = useI18n();
+  const { isLight } = useTheme();
+  const iconStyle = {
+    display: "inline-block",
+    fontSize: 20,
+    textAlign: "center",
+    verticalAlign: "middle",
+    cursor: "pointer",
+    width: 30,
+    transition: "all 0.3s ease"
+  };
+  const languages = [
+    { value: Language.Cn, label: "中文" },
+    { value: Language.En, label: "English" }
+  ];
+  return /* @__PURE__ */ jsx(
+    Layout.Header,
+    {
+      style: {
+        height: Size.NavBarHeight,
+        padding: 0,
+        paddingLeft: Size.BasePadding,
+        paddingRight: Size.BasePadding,
+        position: "fixed",
+        zIndex: 999,
+        width: "100%",
+        backgroundColor: isLight ? "#fff" : "#141414",
+        transition: "none"
+      },
+      children: /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "middle", style: { height: Size.NavBarHeight }, wrap: false, children: [
+        /* @__PURE__ */ jsx(Col, { style: { height: Size.NavBarHeight, lineHeight: `${Size.NavBarHeight + 2}px` }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", height: "100%" }, children: [
+          /* @__PURE__ */ jsx("img", { style: { height: 30 }, src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/logo/rsdoctor.png", className: "web-doctor-logo", alt: "logo" }),
+          /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit", fontSize: 18, marginLeft: 4, marginTop: 8 }, children: "Rsdoctor" }),
+          /* @__PURE__ */ jsx(BuilderSelect, {})
+        ] }) }),
+        /* @__PURE__ */ jsx(Col, { flex: 1, children: /* @__PURE__ */ jsxs(
+          Row,
+          {
+            align: "middle",
+            justify: "end",
+            style: { height: Size.NavBarHeight },
+            wrap: false,
+            gutter: [Size.BasePadding / 3, 0],
+            children: [
+              /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(OverlayAlertsWithButton, {}) }),
+              /* @__PURE__ */ jsx(Menus, { style: { transition: "none" } }),
+              /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+                Dropdown,
+                {
+                  overlayStyle: { zIndex: 1e3 },
+                  menu: {
+                    items: languages.map((e) => ({
+                      label: e.label,
+                      key: e.value,
+                      onClick() {
+                        i18n.changeLanguage(e.value);
+                      }
+                    })),
+                    selectedKeys: [i18n.language]
+                  },
+                  children: /* @__PURE__ */ jsx(TranslationOutlined, { className: "header-icon", style: iconStyle })
+                }
+              ) })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  Header
+};

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export interface LayoutProps {
+    children: JSX.Element;
+}
+export declare const Layout: (props: PropsWithChildren<LayoutProps>) => JSX.Element;

package/dist/components/Layout/index.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { FloatButton, Layout as L } from "antd";
+import { MAIN_BG, Size } from "../../constants";
+import { Header } from "./header";
+import { useLocale, useI18n } from "../../utils";
+import { Progress } from "./progress";
+const Layout = (props) => {
+  const locale = useLocale();
+  const { i18n } = useI18n();
+  const { children } = props;
+  useEffect(() => {
+    if (i18n.language !== locale) {
+      i18n.changeLanguage(locale);
+    }
+  }, [locale]);
+  return /* @__PURE__ */ jsxs(L, { children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsx(Progress, {}),
+    /* @__PURE__ */ jsxs(
+      L.Content,
+      {
+        style: { height: "100%", minHeight: "100vh", padding: Size.BasePadding, marginTop: Size.NavBarHeight, background: MAIN_BG },
+        children: [
+          children,
+          /* @__PURE__ */ jsx(FloatButton.BackTop, {})
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Layout
+};

package/dist/components/Layout/menus.d.ts

@@ -0,0 +1,8 @@
+import { Manifest } from '@rsdoctor/types';
+import React from 'react';
+export declare const Menus: React.FC<Omit<{
+    style?: React.CSSProperties | undefined;
+    routes: Manifest.RsdoctorManifestClientRoutes[];
+}, "routes"> & Partial<{
+    body?: any;
+}>>;

package/dist/components/Layout/menus.js

@@ -0,0 +1,167 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  ApiOutlined,
+  BarChartOutlined,
+  FolderViewOutlined,
+  MenuOutlined,
+  MonitorOutlined,
+  NodeIndexOutlined,
+  ToolOutlined
+} from "@ant-design/icons";
+import { Manifest, SDK } from "@rsdoctor/types";
+import { Col, Menu, Typography } from "antd";
+import { includes } from "lodash-es";
+import { useLocation, useNavigate } from "react-router-dom";
+import WebpackIcon from "../../assets/webpack.98604d64.svg";
+import { Size } from "../../constants";
+import * as OverallConstants from "../../pages/Overall/constants";
+import { useI18n, hasBundle, hasCompile } from "../../utils";
+import { withServerAPI } from "../Manifest";
+import {
+  BundleSize,
+  LoaderFiles,
+  PluginsAnalyze,
+  ModuleResolve,
+  LoaderTimeline,
+  TreeShaking
+} from "../../pages";
+import { CompileName } from "./constants";
+const BuilderSwitchName = "builder-switcher";
+const MenusBase = (props) => {
+  const { t } = useI18n();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { routes: enableRoutes } = props;
+  const iconStyle = {
+    fontSize: 16
+  };
+  const customIconStyle = {
+    ...iconStyle,
+    transform: "translateY(-2px)"
+  };
+  const items = [];
+  console.log("enableRoutes: ", enableRoutes);
+  if (includes(enableRoutes, Manifest.RsdoctorManifestClientRoutes.Overall)) {
+    items.push({
+      label: t(OverallConstants.name),
+      key: OverallConstants.route,
+      icon: /* @__PURE__ */ jsx(BarChartOutlined, { style: iconStyle }),
+      children: [],
+      onTitleClick(e) {
+        navigate(e.key);
+      }
+    });
+  }
+  if (hasCompile(enableRoutes)) {
+    items.push({
+      label: t(CompileName),
+      key: CompileName,
+      icon: /* @__PURE__ */ jsx(ToolOutlined, { style: iconStyle }),
+      children: [
+        includes(
+          enableRoutes,
+          Manifest.RsdoctorManifestClientRoutes.WebpackLoaders
+        ) && {
+          label: /* @__PURE__ */ jsx(Typography.Text, { style: { marginRight: 8 }, children: t(LoaderFiles.name) }),
+          key: LoaderFiles.route,
+          icon: /* @__PURE__ */ jsx("img", { src: WebpackIcon, alt: "", style: { ...iconStyle, width: 16 } }),
+          children: [
+            {
+              label: t(LoaderTimeline.name),
+              key: LoaderTimeline.route,
+              icon: /* @__PURE__ */ jsx(BarChartOutlined, { style: iconStyle })
+            },
+            {
+              label: t(LoaderFiles.name),
+              key: LoaderFiles.route,
+              icon: /* @__PURE__ */ jsx(MonitorOutlined, { style: iconStyle })
+            }
+          ]
+        },
+        includes(
+          enableRoutes,
+          Manifest.RsdoctorManifestClientRoutes.ModuleResolve
+        ) && {
+          label: t(ModuleResolve.name),
+          key: ModuleResolve.route,
+          icon: /* @__PURE__ */ jsx(NodeIndexOutlined, { style: iconStyle })
+        },
+        includes(
+          enableRoutes,
+          Manifest.RsdoctorManifestClientRoutes.WebpackPlugins
+        ) && {
+          label: t(PluginsAnalyze.name),
+          key: PluginsAnalyze.route,
+          icon: /* @__PURE__ */ jsx(ApiOutlined, { style: iconStyle })
+        }
+      ].filter((e) => Boolean(e))
+    });
+  }
+  if (hasBundle(enableRoutes)) {
+    items.push({
+      label: t(BundleSize.name),
+      key: BundleSize.name,
+      icon: /* @__PURE__ */ jsx("span", { style: customIconStyle, children: "📦" }),
+      children: [
+        includes(
+          enableRoutes,
+          Manifest.RsdoctorManifestClientRoutes.BundleSize
+        ) && {
+          label: t(BundleSize.name),
+          key: BundleSize.route,
+          icon: /* @__PURE__ */ jsx(FolderViewOutlined, { style: iconStyle })
+        },
+        includes(
+          enableRoutes,
+          Manifest.RsdoctorManifestClientRoutes.TreeShaking
+        ) && {
+          label: t(TreeShaking.name),
+          key: TreeShaking.route,
+          icon: /* @__PURE__ */ jsx(FolderViewOutlined, { style: iconStyle })
+        }
+      ].filter((e) => Boolean(e))
+    });
+  }
+  const MenuComponent = /* @__PURE__ */ jsx(
+    Menu,
+    {
+      items,
+      mode: "horizontal",
+      onClick: (e) => {
+        if (!e.keyPath.includes(BuilderSwitchName)) {
+          navigate(e.key);
+        }
+      },
+      overflowedIndicator: /* @__PURE__ */ jsx(MenuOutlined, {}),
+      style: {
+        height: Size.NavBarHeight,
+        lineHeight: `${Size.NavBarHeight}px`,
+        minWidth: 0,
+        justifyContent: "flex-end",
+        ...props.style
+      },
+      selectedKeys: [pathname === "/" ? OverallConstants.route : pathname]
+    },
+    enableRoutes.join("")
+  );
+  return /* @__PURE__ */ jsx(
+    Col,
+    {
+      xs: { span: 3 },
+      md: { span: 6 },
+      lg: { span: 10 },
+      xl: { span: 11 },
+      xxl: { span: 12 },
+      children: MenuComponent
+    }
+  );
+};
+const Menus = withServerAPI({
+  api: SDK.ServerAPI.API.GetClientRoutes,
+  responsePropName: "routes",
+  Component: MenusBase,
+  fallbackComponent: () => null
+});
+export {
+  Menus
+};

package/dist/components/Layout/progress.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export interface ProgressProps {
+    progress: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.APIExtends.GetCompileProgess>;
+}
+export declare const Progress: React.FC<Omit<ProgressProps, "progress"> & Partial<{
+    body?: any;
+}>>;

package/dist/components/Layout/progress.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { Col, Progress as P, Row, Typography } from "antd";
+import { SDK } from "@rsdoctor/types";
+import { Size } from "../../constants";
+import { withServerAPI } from "../Manifest";
+const ProgressBase = ({ progress }) => {
+  if (!progress)
+    return null;
+  const { percentage = 1, message } = progress;
+  if (percentage >= 1)
+    return null;
+  const per = +(percentage * 100).toFixed(1);
+  return /* @__PURE__ */ jsx(
+    Row,
+    {
+      wrap: true,
+      style: {
+        width: "100%",
+        position: "fixed",
+        top: Size.NavBarHeight,
+        left: 1,
+        zIndex: 99
+      },
+      children: /* @__PURE__ */ jsx(Col, { span: Math.min(Math.floor(percentage * 24), 24), children: /* @__PURE__ */ jsx(
+        P,
+        {
+          percent: 100,
+          status: "active",
+          size: "small",
+          format: () => /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 12 }, type: "secondary", children: `${per}% ${message}` })
+        }
+      ) })
+    }
+  );
+};
+const Progress = withServerAPI({
+  api: SDK.ServerAPI.APIExtends.GetCompileProgess,
+  responsePropName: "progress",
+  Component: ProgressBase,
+  fallbackComponent: () => null
+});
+export {
+  Progress
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export declare const LoaderFiles: React.FC<{
+    filetree: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetLoaderFileTree>;
+    cwd: string;
+    loaders: string[];
+    filename: string;
+}>;