@rsdoctor/components 0.0.0-next-20240620044732

package/dist/utils/hooks.js

@@ -0,0 +1,216 @@
+import { Algorithm } from "@rsdoctor/utils/common";
+import { Client, Rule } from "@rsdoctor/types";
+import { uniqBy, isArray, defaults } from "lodash-es";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useLocation } from "react-router-dom";
+import parse from "url-parse";
+import "./i18n";
+import { setLocaleToStorage } from "./storage";
+const route = Client.RsdoctorClientRoutes.RuleIndex;
+const useI18n = () => {
+  const { i18n, ...rest } = useTranslation();
+  return {
+    ...rest,
+    i18n: {
+      ...i18n,
+      changeLanguage(lng, callback) {
+        return i18n.changeLanguage(lng, (error, t) => {
+          if (!error) {
+            setLocaleToStorage(lng);
+          }
+          callback && callback(error, t);
+        });
+      }
+    }
+  };
+};
+function useRuleIndexNavigate(code, link) {
+  const navigate = useNavigate();
+  if (link) {
+    return () => window.open(link, "__blank");
+  }
+  return () => {
+    navigate(`${route}?${Rule.RsdoctorRuleClientConstant.UrlQueryForErrorCode}=${code}`);
+  };
+}
+function useUrlQuery() {
+  const search = useLocation().search || location.search;
+  const { query } = parse(search, true);
+  return query;
+}
+function useLoading(defaultLoading = false) {
+  const [loading, setLoading] = useState(defaultLoading);
+  return {
+    loading,
+    setLoading,
+    async withLoading(func) {
+      try {
+        setLoading(true);
+        await func();
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+}
+function useProjectRootByManifest(manifest) {
+  return manifest.data.root;
+}
+function useHashByManifest(manifest) {
+  return manifest.data.hash;
+}
+function useCloudManifestUrlByManifest(manifest) {
+  if (!manifest)
+    return;
+}
+function ensurePlainObject(value, dfts) {
+  if (value && typeof value === "object") {
+    if (isArray(value)) {
+      return dfts;
+    }
+    return defaults(value, dfts);
+  }
+  return dfts;
+}
+function useChunkGraphByManifest(manifest) {
+  const prev = manifest.data.chunkGraph;
+  if (typeof prev === "string") {
+    manifest.data.chunkGraph = JSON.parse(Algorithm.decompressText(prev));
+  }
+  return ensurePlainObject(manifest.data.chunkGraph, { assets: [], chunks: [], entrypoints: [] });
+}
+function useConfigOutputFileNameByManifest(manifest) {
+  if (typeof manifest.data.configs?.[0]?.config?.output?.filename === "string") {
+    return manifest.data.configs?.[0]?.config?.output?.filename;
+  }
+  return "";
+}
+function useModuleGraphByManifest(manifest) {
+  const prev = manifest.data.moduleGraph;
+  if (typeof prev === "string") {
+    manifest.data.moduleGraph = JSON.parse(Algorithm.decompressText(prev));
+  }
+  return ensurePlainObject(manifest.data.moduleGraph, {
+    dependencies: [],
+    modules: [],
+    moduleGraphModules: [],
+    exports: [],
+    sideEffects: [],
+    variables: []
+  });
+}
+function useModuleGraph(moduleGraph) {
+  const prev = moduleGraph;
+  if (typeof prev === "string") {
+    moduleGraph = JSON.parse(Algorithm.decompressText(prev));
+  }
+  return ensurePlainObject(moduleGraph, {
+    dependencies: [],
+    modules: [],
+    moduleGraphModules: [],
+    exports: [],
+    sideEffects: [],
+    variables: []
+  });
+}
+function usePackageGraphByManifest(manifest) {
+  const prev = manifest.data.packageGraph;
+  if (typeof prev === "string") {
+    manifest.data.packageGraph = JSON.parse(Algorithm.decompressText(prev));
+  }
+  return ensurePlainObject(manifest.data.packageGraph, {
+    packages: [],
+    dependencies: []
+  });
+}
+function useUniqModulesByManifest(manifest) {
+  return uniqBy(useModuleGraphByManifest(manifest).modules, (e) => e.path);
+}
+function useUniqModules(modules) {
+  return uniqBy(modules, (e) => e.path);
+}
+function useErrorsByManifest(manifest) {
+  const prev = manifest.data.errors;
+  if (typeof prev === "string") {
+    manifest.data.errors = JSON.parse(Algorithm.decompressText(prev));
+  }
+  return manifest.data.errors || [];
+}
+function useBundleAlertsByManifest(manifest) {
+  const errors = useErrorsByManifest(manifest);
+  return useBundleAlertsByErrors(errors);
+}
+function useDuplicatePackagesByManifest(manifest) {
+  const alerts = useBundleAlertsByManifest(manifest);
+  return useDuplicatePackagesByErrors(alerts);
+}
+function useCompileAlertsByErrors(errors) {
+  if (isArray(errors)) {
+    return errors.filter(
+      (e) => e.category === Rule.RuleMessageCategory.Compile && e.code !== Rule.RuleMessageCodeEnumerated.Overlay
+    );
+  }
+  return [];
+}
+function useBundleAlertsByErrors(errors) {
+  if (isArray(errors)) {
+    return errors.filter(
+      (e) => e.category === Rule.RuleMessageCategory.Bundle && e.code !== Rule.RuleMessageCodeEnumerated.Overlay
+    );
+  }
+  return [];
+}
+function useDuplicatePackagesByErrors(errors) {
+  return useBundleAlertsByErrors(errors).filter(
+    (e) => e.code === Rule.RuleErrorMap.E1001.code
+  );
+}
+function useWebpackConfigurationByConfigs(configs = []) {
+  if (isArray(configs)) {
+    return configs.find((e) => e.name === "webpack" || e.name === "rspack");
+  }
+  return null;
+}
+function useDetectIfCloudIdeEnv() {
+  if (window.location.protocol === "https:" && window.location.href.indexOf("ide-proxy") > 0) {
+    return true;
+  }
+  return false;
+}
+function useWindowWidth() {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return windowWidth;
+}
+export {
+  useBundleAlertsByErrors,
+  useBundleAlertsByManifest,
+  useChunkGraphByManifest,
+  useCloudManifestUrlByManifest,
+  useCompileAlertsByErrors,
+  useConfigOutputFileNameByManifest,
+  useDetectIfCloudIdeEnv,
+  useDuplicatePackagesByErrors,
+  useDuplicatePackagesByManifest,
+  useErrorsByManifest,
+  useHashByManifest,
+  useI18n,
+  useLoading,
+  useModuleGraph,
+  useModuleGraphByManifest,
+  usePackageGraphByManifest,
+  useProjectRootByManifest,
+  useRuleIndexNavigate,
+  useUniqModules,
+  useUniqModulesByManifest,
+  useUrlQuery,
+  useWebpackConfigurationByConfigs,
+  useWindowWidth
+};

package/dist/utils/i18n/cn.d.ts

@@ -0,0 +1,3 @@
+import en from './en';
+declare const cn: typeof en;
+export default cn;

package/dist/utils/i18n/cn.js

@@ -0,0 +1,33 @@
+const cn = {
+  Overall: "概览",
+  "Compile Analysis": "编译分析",
+  LoadersAnalysis: "Loaders 分析",
+  "Loaders Timeline": "Loaders 概览",
+  "Loaders Analysis": "Loaders 分析",
+  PluginsAnalysis: "Plugins 分析",
+  ModuleResolve: "Module Resolve 分析",
+  "Bundle Analysis": "产物分析",
+  BundleSize: "产物体积分析",
+  "Module Graph": "Module Graph",
+  TreeShaking: "Tree Shaking",
+  "Rule Index": "错误索引信息",
+  Resources: "资源",
+  "Project Overall": "项目信息概览",
+  "Compile Overall": "编译数据概览",
+  "Bundle Overall": "产物数据概览",
+  "Expand Omitted": " reasons 树会默认折叠中间的第三方引入的模块，点击这个图标可以查看完整树图",
+  "Concatenated Tag": "串联模块，hover 上去可以显示聚合成的主模块名称。注：聚合模块 bundled size 为零，有可能是因为被聚合到了主模块中。",
+  "the file content not changed after transpiled by this loader": "该文件内容在 loader 处理前后没有发生变化",
+  /** Bundle Size */
+  "Output Assets List": "产物文件列表",
+  "filter the output assets which size is greater than the input value": "筛选大小大于输入值的产物文件",
+  "filter the modules which size is greater than the input value": "筛选大小大于输入值的模块",
+  "After Compile": "编译后",
+  "After Bundle": "打包后",
+  CodeModeExplain: "Lite 模式下或纯 stats.json 上传的情况下只有 source code.",
+  DuplicatePakCodeExplain: "纯 stats.json 输入的情况下没有代码，可使用 web-doctor 插件参与构建会有对应代码。"
+};
+var cn_default = cn;
+export {
+  cn_default as default
+};

package/dist/utils/i18n/en.d.ts

@@ -0,0 +1,30 @@
+declare const en: {
+    Overall: string;
+    'Compile Analysis': string;
+    LoadersAnalysis: string;
+    'Loaders Timeline': string;
+    'Loaders Analysis': string;
+    PluginsAnalysis: string;
+    ModuleResolve: string;
+    'Bundle Analysis': string;
+    BundleSize: string;
+    'Module Graph': string;
+    TreeShaking: string;
+    'Rule Index': string;
+    Resources: string;
+    'Project Overall': string;
+    'Compile Overall': string;
+    'Bundle Overall': string;
+    'Expand Omitted': string;
+    'Concatenated Tag': string;
+    'the file content not changed after transpiled by this loader': string;
+    /** Bundle Size */
+    'Output Assets List': string;
+    'filter the output assets which size is greater than the input value': string;
+    'filter the modules which size is greater than the input value': string;
+    'After Compile': string;
+    'After Bundle': string;
+    CodeModeExplain: string;
+    DuplicatePakCodeExplain: string;
+};
+export default en;

package/dist/utils/i18n/en.js

@@ -0,0 +1,33 @@
+const en = {
+  Overall: "Overall",
+  "Compile Analysis": "Compile Analysis",
+  LoadersAnalysis: "Loaders Analysis",
+  "Loaders Timeline": "Loaders Timeline",
+  "Loaders Analysis": "Loaders Analysis",
+  PluginsAnalysis: "Plugins Analysis",
+  ModuleResolve: "Module Resolve",
+  "Bundle Analysis": "Bundle Analysis",
+  BundleSize: "Bundle Size",
+  "Module Graph": "Module Graph",
+  TreeShaking: "Tree Shaking",
+  "Rule Index": "Rule Index",
+  Resources: "Resources",
+  "Project Overall": "Project Overall",
+  "Compile Overall": "Compile Overall",
+  "Bundle Overall": "Bundle Overall",
+  "Expand Omitted": "By default, the reasons tree collapses to the middle of the module introduced by a third party. Click on this icon to view the full tree diagram",
+  "Concatenated Tag": "Concatenated Module,hover can display the name of the concatenated main module. Note: the bundled size of the concatenated module is zero, possibly because it is aggregated into the main module.",
+  "the file content not changed after transpiled by this loader": "the file content not changed after transpiled by this loader",
+  /** Bundle Size */
+  "Output Assets List": "Output Assets List",
+  "filter the output assets which size is greater than the input value": "filter the output assets which size is greater than the input value",
+  "filter the modules which size is greater than the input value": "filter the modules which size is greater than the input value",
+  "After Compile": "After Compile",
+  "After Bundle": "After Bundle",
+  CodeModeExplain: "In lite mode or pure stats.json upload, only source code.",
+  DuplicatePakCodeExplain: "There is no code, when in the case of pure stats.json."
+};
+var en_default = en;
+export {
+  en_default as default
+};

package/dist/utils/i18n/index.d.ts

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export default i18n;

package/dist/utils/i18n/index.js

@@ -0,0 +1,34 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from "./en";
+import cn from "./cn";
+import { getLocaleFromStorage } from "../storage";
+i18n.use(initReactI18next).init({
+  lng: getLocaleFromStorage(),
+  // we init with resources
+  resources: {
+    en: {
+      translations: en
+    },
+    cn: {
+      translations: cn
+    }
+  },
+  fallbackLng: {
+    "zh-CN": ["cn"],
+    default: ["en"]
+  },
+  debug: process.env.NODE_ENV === "development",
+  // have a common namespace used around the full app
+  ns: ["translations"],
+  defaultNS: "translations",
+  keySeparator: false,
+  // we use content as keys
+  interpolation: {
+    escapeValue: false
+  }
+});
+var i18n_default = i18n;
+export {
+  i18n_default as default
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,16 @@
+export * from './data';
+export * from './file';
+export * from './hooks';
+export * from './locale';
+export * from './manifest';
+export * from './monaco';
+export * from './request';
+export * from './routes';
+export * from './size';
+export * from './socket';
+export * from './storage';
+export * from './string';
+export * from './time';
+export * from './url';
+export * from './worker';
+export * from './loader';

package/dist/utils/index.js

@@ -0,0 +1,16 @@
+export * from "./data";
+export * from "./file";
+export * from "./hooks";
+export * from "./locale";
+export * from "./manifest";
+export * from "./monaco";
+export * from "./request";
+export * from "./routes";
+export * from "./size";
+export * from "./socket";
+export * from "./storage";
+export * from "./string";
+export * from "./time";
+export * from "./url";
+export * from "./worker";
+export * from "./loader";

package/dist/utils/loader.d.ts

@@ -0,0 +1,7 @@
+import { Loader } from '@rsdoctor/utils/common';
+import { SDK } from '@rsdoctor/types';
+declare const findLoaderTotalTiming: typeof Loader.findLoaderTotalTiming, getLoaderCosts: typeof Loader.getLoaderCosts;
+export { findLoaderTotalTiming, getLoaderCosts };
+export declare function flattenLoaderData(loaderData: SDK.LoaderData): SDK.LoaderTransformData[];
+export declare function filterLoaders(loaderData: SDK.ResourceLoaderData, keyword: string, loaderNames: string[]): SDK.LoaderTransformData[];
+export declare function filterLoader(resourcePath: string, loader: string, keyword: string, loaderNames: string[]): boolean;

package/dist/utils/loader.js

@@ -0,0 +1,34 @@
+import { Loader } from "@rsdoctor/utils/common";
+import { flatten, includes } from "lodash-es";
+const { findLoaderTotalTiming, getLoaderCosts } = Loader;
+function flattenLoaderData(loaderData) {
+  return flatten(loaderData.map((e) => e.loaders));
+}
+function filterLoaders(loaderData, keyword, loaderNames) {
+  return loaderData.loaders.filter((item) => {
+    return filterLoader(
+      loaderData.resource.path,
+      item.loader,
+      keyword,
+      loaderNames
+    );
+  });
+}
+function filterLoader(resourcePath, loader, keyword, loaderNames) {
+  if (keyword) {
+    if (resourcePath.indexOf(keyword) === -1)
+      return false;
+  }
+  if (loaderNames?.length) {
+    if (!includes(loaderNames, loader))
+      return false;
+  }
+  return true;
+}
+export {
+  filterLoader,
+  filterLoaders,
+  findLoaderTotalTiming,
+  flattenLoaderData,
+  getLoaderCosts
+};

package/dist/utils/locale.d.ts

@@ -0,0 +1,2 @@
+import type { Locale } from 'antd/es/locale';
+export declare function getLocale(locale: string): Locale;

package/dist/utils/locale.js

@@ -0,0 +1,9 @@
+import cn from "antd/es/locale/zh_CN";
+import en from "antd/es/locale/en_GB";
+function getLocale(locale) {
+  const res = locale === "cn" || locale === "zh-CN" ? cn : en;
+  return res;
+}
+export {
+  getLocale
+};

package/dist/utils/manifest.d.ts

@@ -0,0 +1,27 @@
+import { ModuleGraph } from '@rsdoctor/graph';
+import { Manifest, SDK } from '@rsdoctor/types';
+import { Theme, ViewMode } from '../constants';
+export declare function useManifestJson(): Manifest.RsdoctorManifest;
+export declare function useLocale(): import("../constants").Language;
+export declare function useTheme(): {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    isDark: boolean;
+    isLight: boolean;
+};
+export declare function useViewMode(): {
+    viewMode: {
+        bundleAlerts: ViewMode;
+        compileAlerts: ViewMode;
+    };
+    setViewMode: (mode: Partial<{
+        bundleAlerts: ViewMode;
+        compileAlerts: ViewMode;
+    }>, saveStorage?: boolean | undefined) => void;
+    setCompileAlertsViewMode(mode: ViewMode): void;
+    setBundleAlertsViewMode(mode: ViewMode): void;
+    isCompileList: boolean;
+    isBundleList: boolean;
+};
+export declare function useManifest(url: string): Manifest.RsdoctorManifestWithShardingFiles | undefined;
+export declare function useModuleGraphInstanceByModuleGraph(moduleGraph: SDK.ModuleGraphData): ModuleGraph;

package/dist/utils/manifest.js

@@ -0,0 +1,54 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import { ModuleGraph } from "@rsdoctor/graph";
+import { ConfigContext } from "../config";
+import { Theme, ViewMode } from "../constants";
+import { fetchManifest } from "./request";
+function useManifestJson() {
+  const { json } = useContext(ConfigContext);
+  return json;
+}
+function useLocale() {
+  const ctx = useContext(ConfigContext);
+  return ctx.locale;
+}
+function useTheme() {
+  const { theme, setTheme } = useContext(ConfigContext);
+  const isDark = theme === Theme.Dark;
+  return { theme, setTheme, isDark, isLight: !isDark };
+}
+function useViewMode() {
+  const { viewMode, setViewMode } = useContext(ConfigContext);
+  const { bundleAlerts, compileAlerts } = viewMode;
+  return {
+    viewMode,
+    setViewMode,
+    setCompileAlertsViewMode(mode) {
+      setViewMode({ compileAlerts: mode });
+    },
+    setBundleAlertsViewMode(mode) {
+      setViewMode({ bundleAlerts: mode });
+    },
+    isCompileList: compileAlerts === ViewMode.List,
+    isBundleList: bundleAlerts === ViewMode.List
+  };
+}
+function useManifest(url) {
+  const [manifest, setManifest] = useState();
+  useEffect(() => {
+    fetchManifest(url).then((res) => {
+      setManifest(res);
+    });
+  }, []);
+  return manifest;
+}
+function useModuleGraphInstanceByModuleGraph(moduleGraph) {
+  return useMemo(() => ModuleGraph.fromData(moduleGraph), [moduleGraph]);
+}
+export {
+  useLocale,
+  useManifest,
+  useManifestJson,
+  useModuleGraphInstanceByModuleGraph,
+  useTheme,
+  useViewMode
+};

package/dist/utils/monaco.d.ts

@@ -0,0 +1,12 @@
+import type { SDK } from '@rsdoctor/types';
+import type { Range as RangeClass } from 'monaco-editor';
+export declare function getOriginalLanguage(filepath: string): string;
+export declare function getModifiedLanguage(filepath: string): string;
+export declare function getRevealPositionForViewer(startLineNumber: number, startColumn: number): {
+    lineNumber: number;
+    column: number;
+};
+export declare function getSelectionRange(source: SDK.SourceRange, Range: typeof RangeClass): RangeClass;
+export declare function useMonacoEditor(): {
+    initMonaco: (monacoRef: any) => Promise<void>;
+};

package/dist/utils/monaco.js

@@ -0,0 +1,71 @@
+import { extname } from "path";
+import { loader } from "@monaco-editor/react";
+import { isJsDataUrl } from "./url";
+const monacoLoader = loader.init();
+function getOriginalLanguage(filepath) {
+  if (isJsDataUrl(filepath)) {
+    return "javascript";
+  }
+  const ext = extname(filepath).slice(1);
+  switch (ext) {
+    case "js":
+    case "jsx":
+      return "javascript";
+    case "ts":
+    case "tsx":
+      return "typescript";
+    default:
+      return ext;
+  }
+}
+function getModifiedLanguage(filepath) {
+  const ext = extname(filepath).slice(1);
+  switch (ext) {
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+      return "javascript";
+    default:
+      return ext;
+  }
+}
+function getRevealPositionForViewer(startLineNumber, startColumn) {
+  return {
+    lineNumber: Math.floor(startLineNumber / 1.2) || 1,
+    column: Math.floor(startColumn / 1.5) || 1
+  };
+}
+function getSelectionRange(source, Range) {
+  const { start, end } = source;
+  const { line = 1, column = 0 } = start;
+  return new Range(line, column + 1, end?.line ?? line, (end?.column ?? 9999) + 1);
+}
+const initMonaco = (monacoRef) => {
+  return new Promise((resolve, reject) => {
+    if (monacoRef.value) {
+      resolve();
+      return;
+    }
+    monacoLoader.then((monacoInstance) => {
+      monacoRef.value = monacoInstance;
+    }).catch((error) => {
+      if (error?.type !== "cancelation") {
+        console.error("Monaco initialization error:", error);
+        reject();
+      }
+    });
+  });
+};
+function useMonacoEditor() {
+  return {
+    initMonaco
+  };
+}
+export {
+  getModifiedLanguage,
+  getOriginalLanguage,
+  getRevealPositionForViewer,
+  getSelectionRange,
+  useMonacoEditor
+};

package/dist/utils/request.d.ts

@@ -0,0 +1,27 @@
+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;
+}>;
+export declare function fetchJSONByUrl(url: string): Promise<Manifest.RsdoctorManifestWithShardingFiles>;
+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;
+}>;
+export declare function getManifestUrl(): string;
+export declare function fetchManifest(url?: string): Promise<Manifest.RsdoctorManifestWithShardingFiles>;
+export declare function postServerAPI<T extends SDK.ServerAPI.API, B extends SDK.ServerAPI.InferRequestBodyType<T> = SDK.ServerAPI.InferRequestBodyType<T>, R extends SDK.ServerAPI.InferResponseType<T> = SDK.ServerAPI.InferResponseType<T>>(...args: B extends void ? [api: T] : [api: T, body: B]): Promise<R>;