@rsdoctor/components 0.0.0-next-20240620044732

package/dist/pages/index.js

@@ -0,0 +1,20 @@
+import * as Overall from "./Overall";
+import * as BundleSize from "./BundleSize";
+import * as ModuleAnalyze from "./ModuleAnalyze";
+import * as LoaderTimeline from "./WebpackLoaders/Overall";
+import * as LoaderFiles from "./WebpackLoaders/Analysis";
+import * as PluginsAnalyze from "./WebpackPlugins";
+import * as ModuleResolve from "./ModuleResolve";
+import * as RuleIndex from "./Resources/RuleIndex";
+import * as TreeShaking from "./TreeShaking";
+export {
+  BundleSize,
+  LoaderFiles,
+  LoaderTimeline,
+  ModuleAnalyze,
+  ModuleResolve,
+  Overall,
+  PluginsAnalyze,
+  RuleIndex,
+  TreeShaking
+};

package/dist/utils/data/base.d.ts

@@ -0,0 +1,24 @@
+import { Common, Manifest, SDK } from '@rsdoctor/types';
+import { Data } from '@rsdoctor/utils/common';
+export declare abstract class BaseDataLoader implements Manifest.ManifestDataLoader {
+    protected manifest: Manifest.RsdoctorManifestWithShardingFiles;
+    protected pool: Map<string, Promise<unknown>>;
+    protected loader: Data.APIDataLoader;
+    protected disposed: boolean;
+    protected shardingDataMap: Map<keyof Manifest.RsdoctorManifestData, Promise<any>>;
+    constructor(manifest: Manifest.RsdoctorManifestWithShardingFiles);
+    protected get<T extends keyof Manifest.RsdoctorManifestWithShardingFiles>(key: T): void | Manifest.RsdoctorManifestWithShardingFiles[T];
+    protected getData<T extends keyof Manifest.RsdoctorManifestData>(key: T, scope?: 'data' | 'cloudData'): void | Manifest.RsdoctorManifestWithShardingFiles['data'][T];
+    protected getKeys(key: string): string[];
+    protected joinKeys(keys: string[]): string;
+    dispose(): void;
+    limit<T>(key: string, fn: Common.Function<unknown[], Promise<T>>): Promise<T>;
+    log(...args: unknown[]): void;
+    loadManifest(): Promise<Manifest.RsdoctorManifestWithShardingFiles>;
+    abstract loadData<T extends string, P>(key: T): Promise<void | P>;
+    abstract loadData<T extends Manifest.RsdoctorManifestMappingKeys>(key: T): Promise<void | Manifest.InferManifestDataValue<T>>;
+    abstract isLocal(): boolean;
+    abstract loadAPI<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>;
+    abstract onDataUpdate<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(api: T, fn: (response: SDK.ServerAPI.SocketResponseType<T>) => void): void;
+    abstract removeOnDataUpdate<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(api: T, fn: (response: SDK.ServerAPI.SocketResponseType<T>) => void): void;
+}

package/dist/utils/data/base.js

@@ -0,0 +1,48 @@
+import { Data } from "@rsdoctor/utils/common";
+class BaseDataLoader {
+  constructor(manifest) {
+    this.manifest = manifest;
+    this.pool = /* @__PURE__ */ new Map();
+    this.disposed = false;
+    this.shardingDataMap = /* @__PURE__ */ new Map();
+    this.loader = new Data.APIDataLoader(this);
+    console.log("[DataLoader] isLocal: ", this.isLocal());
+  }
+  get(key) {
+    if (!this.manifest)
+      return;
+    return this.manifest[key];
+  }
+  getData(key, scope = "data") {
+    const data = this.get(scope);
+    if (!data)
+      return;
+    return data[key];
+  }
+  getKeys(key) {
+    return key.split(".");
+  }
+  joinKeys(keys) {
+    return keys.join(".");
+  }
+  dispose() {
+    this.disposed = true;
+  }
+  limit(key, fn) {
+    if (this.pool.has(key)) {
+      return this.pool.get(key);
+    }
+    const res = fn().finally(() => this.pool.delete(key));
+    this.pool.set(key, res);
+    return res;
+  }
+  log(...args) {
+    console.log(`[${this.constructor.name}]`, ...args);
+  }
+  async loadManifest() {
+    return this.manifest;
+  }
+}
+export {
+  BaseDataLoader
+};

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

@@ -0,0 +1,5 @@
+import { Manifest } from '@rsdoctor/types';
+import { BaseDataLoader } from './base';
+export declare function useDataLoader(manifest: Manifest.RsdoctorManifestWithShardingFiles | void): {
+    loader: void | BaseDataLoader;
+};

package/dist/utils/data/index.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { LocalServerDataLoader } from "./local";
+import { RemoteDataLoader } from "./remote";
+import { getAPILoaderModeFromStorage } from "../storage";
+import { APILoaderMode4Dev } from "../../constants";
+const loaderTask = /* @__PURE__ */ new WeakMap();
+async function createDataLoader(manifest) {
+  try {
+    if (process.env.NODE_ENV === "development") {
+      const mode = getAPILoaderModeFromStorage();
+      if (mode === APILoaderMode4Dev.Local)
+        return new LocalServerDataLoader(manifest);
+      if (mode === APILoaderMode4Dev.Remote)
+        return new RemoteDataLoader(manifest);
+    }
+    if (manifest.__LOCAL__SERVER__) {
+      return new LocalServerDataLoader(manifest);
+    }
+  } catch (error) {
+    console.log("[DataLoader] fallback to RemoteDataLoader");
+  }
+  return new RemoteDataLoader(manifest);
+}
+function useDataLoader(manifest) {
+  const [loader, setLoader] = useState(void 0);
+  useEffect(() => {
+    if (!manifest)
+      return;
+    if (!loaderTask.has(manifest)) {
+      const promise = createDataLoader(manifest);
+      loaderTask.set(manifest, promise);
+    }
+    const task = loaderTask.get(manifest);
+    task.then((loader2) => {
+      setLoader(loader2);
+    });
+  }, [manifest]);
+  return {
+    loader
+  };
+}
+export {
+  useDataLoader
+};

package/dist/utils/data/local.d.ts

@@ -0,0 +1,14 @@
+import { Common, Manifest, SDK } from '@rsdoctor/types';
+import { BaseDataLoader } from './base';
+export declare class LocalServerDataLoader extends BaseDataLoader {
+    protected events: Map<SDK.ServerAPI.API | SDK.ServerAPI.APIExtends, Set<Common.Function>>;
+    isLocal(): boolean;
+    loadData<T extends keyof Manifest.RsdoctorManifestData>(key: T): Promise<void | Manifest.RsdoctorManifestData[T]>;
+    loadAPI<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>;
+    dispose(): void;
+    /**
+     * add event listener when received data from server.
+     */
+    onDataUpdate<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(api: T, fn: (response: SDK.ServerAPI.SocketResponseType<T>) => void): void;
+    removeOnDataUpdate<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(api: T, fn: (response: SDK.ServerAPI.SocketResponseType<T>) => void): void;
+}

package/dist/utils/data/local.js

@@ -0,0 +1,86 @@
+import { Manifest as ManifestShared } from "@rsdoctor/utils/common";
+import { SDK } from "@rsdoctor/types";
+import { get } from "lodash-es";
+import { BaseDataLoader } from "./base";
+import { getSocket } from "../socket";
+class LocalServerDataLoader extends BaseDataLoader {
+  constructor() {
+    super(...arguments);
+    this.events = /* @__PURE__ */ new Map();
+  }
+  isLocal() {
+    return true;
+  }
+  async loadData(key) {
+    return this.limit(key, async () => {
+      const [scope, ...rest] = this.getKeys(key);
+      const data = this.getData(scope);
+      if (!data)
+        return;
+      let res = data;
+      if (ManifestShared.isShardingData(res)) {
+        if (!this.shardingDataMap.has(key)) {
+          const task = new Promise((resolve) => {
+            getSocket().emit(
+              SDK.ServerAPI.API.LoadDataByKey,
+              { key },
+              (res2) => {
+                resolve(res2.res);
+              }
+            );
+          });
+          this.shardingDataMap.set(key, task);
+        }
+        res = await this.shardingDataMap.get(key);
+        this.shardingDataMap.delete(key);
+        return res;
+      }
+      return rest.length > 0 ? get(res, this.joinKeys(rest)) : res;
+    });
+  }
+  async loadAPI(...args) {
+    const [api, body] = args;
+    const key = body ? `${api}_${JSON.stringify(body)}` : `${api}`;
+    return this.limit(key, async () => {
+      return new Promise((resolve) => {
+        getSocket().emit(
+          api,
+          body,
+          (res) => {
+            resolve(res.res);
+          }
+        );
+      });
+    });
+  }
+  dispose() {
+    super.dispose();
+    this.events.forEach((evs, api) => {
+      evs.forEach((ev) => {
+        this.removeOnDataUpdate(api, ev);
+      });
+      evs.clear();
+    });
+    this.events.clear();
+  }
+  /**
+   * add event listener when received data from server.
+   */
+  onDataUpdate(api, fn) {
+    if (!this.events.has(api)) {
+      this.events.set(api, /* @__PURE__ */ new Set());
+    }
+    if (this.events.get(api).has(fn)) {
+      return;
+    }
+    this.events.get(api).add(fn);
+    getSocket().on(api, fn);
+  }
+  removeOnDataUpdate(api, fn) {
+    getSocket().off(api, fn);
+    this.events.get(api).delete(fn);
+  }
+}
+export {
+  LocalServerDataLoader
+};

package/dist/utils/data/remote.d.ts

@@ -0,0 +1,10 @@
+import { Manifest, SDK } from '@rsdoctor/types';
+import { BaseDataLoader } from './base';
+export declare class RemoteDataLoader extends BaseDataLoader {
+    isLocal(): boolean;
+    loadData<T extends Manifest.RsdoctorManifestMappingKeys>(key: T): Promise<Manifest.InferManifestDataValue<T>>;
+    loadAPI<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>;
+    dispose(): void;
+    onDataUpdate(): void;
+    removeOnDataUpdate(): void;
+}

package/dist/utils/data/remote.js

@@ -0,0 +1,52 @@
+import { Manifest as ManifestShared } from "@rsdoctor/utils/common";
+import { get } from "lodash-es";
+import { BaseDataLoader } from "./base";
+import { fetchShardingFile } from "../request";
+class RemoteDataLoader extends BaseDataLoader {
+  isLocal() {
+    return false;
+  }
+  async loadData(key) {
+    return this.limit(key, async () => {
+      const [scope, ...rest] = this.getKeys(key);
+      const data = this.getData(
+        scope,
+        "cloudData"
+      );
+      if (!data)
+        return;
+      let res = data;
+      if (ManifestShared.isShardingData(res)) {
+        if (!this.shardingDataMap.has(scope)) {
+          const task = ManifestShared.fetchShardingData(
+            res,
+            fetchShardingFile
+          ).catch((err) => {
+            this.log(`loadData error: `, res, key);
+            throw err;
+          });
+          this.shardingDataMap.set(scope, task);
+        }
+        res = await this.shardingDataMap.get(scope);
+      }
+      return rest.length > 0 ? get(res, this.joinKeys(rest)) : res;
+    });
+  }
+  async loadAPI(...args) {
+    const [api, body] = args;
+    const key = body ? `${api}_${JSON.stringify(body)}` : `${api}`;
+    return this.limit(key, async () => {
+      return this.loader.loadAPI(...args);
+    });
+  }
+  dispose() {
+    super.dispose();
+  }
+  onDataUpdate() {
+  }
+  removeOnDataUpdate() {
+  }
+}
+export {
+  RemoteDataLoader
+};

package/dist/utils/file.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { Common } from '@rsdoctor/types';
+import { UploadFile } from 'antd';
+import { FieldDataNode } from 'rc-tree';
+export type DataNode = FieldDataNode<{
+    key: string | number;
+    title?: React.ReactNode | ((data: DataNode) => React.ReactNode);
+}> & {
+    __BASENAME__?: any;
+    __RESOURCEPATH__?: any;
+    children?: DataNode[];
+};
+export declare const rootDirname: (file: string, sep?: string) => string | null;
+export declare function mapFileKey(arr: DataNode[], depth?: number, filter?: (node: DataNode) => boolean): DataNode['key'][];
+export declare function flattenDirectory(n: DataNode, parent: DataNode, sep: string | undefined, inlinedResourcePathKey: keyof DataNode, dirTitle?: (_dir: DataNode, defaultTitle: string) => JSX.Element | string): void;
+export declare function createFileStructures({ files, sep, inlinedResourcePathKey, fileTitle, dirTitle, }: {
+    files: string[];
+    cwd?: string;
+    sep?: string;
+    inlinedResourcePathKey?: keyof DataNode;
+    dirTitle?(dir: DataNode, defaultTitle: string): JSX.Element | string;
+    fileTitle?(file: string, basename: string): JSX.Element | string;
+}): DataNode[];
+export declare function beautifyPath(path: string, cwd: string): string;
+export declare function readJSONByFileReader<T extends Common.PlainObject>(file: UploadFile): Promise<T>;
+export declare function readJSONByFileReader<T extends Common.PlainObject>(file: Blob): Promise<T>;
+/**
+ * beautify module path, will replace cwd & last 'node_modules'
+ */
+export declare function beautifyModulePath(modulePath: string, cwd: string): {
+    alias: string;
+    inNodeModules: boolean;
+};

package/dist/utils/file.js

@@ -0,0 +1,154 @@
+import { get, startsWith } from "lodash-es";
+import { message } from "antd";
+const rootDirname = (file, sep = "/") => {
+  const idx = file?.indexOf(sep);
+  if (idx === -1) {
+    return null;
+  }
+  if (idx === 0) {
+    return sep + (rootDirname(file?.slice(1)) || "");
+  }
+  return file?.slice(0, idx);
+};
+function mapFileKey(arr, depth = 2, filter = () => true) {
+  let d = 0;
+  const res = [];
+  let parent = arr;
+  while (d < depth) {
+    parent.filter(filter).forEach((e) => {
+      if (!e.isLeaf) {
+        res.push(e.key);
+      }
+    });
+    parent = parent.reduce((t, e) => t.concat(e.children || []), []);
+    if (!parent.length)
+      break;
+    d++;
+  }
+  return res;
+}
+const basenameKey = "__BASENAME__";
+function flattenDirectory(n, parent, sep = "/", inlinedResourcePathKey, dirTitle = (_dir, defaultTitle) => defaultTitle) {
+  if (n.isLeaf)
+    return;
+  if (parent.children && parent.children.length === 1) {
+    const defaultTitle = [parent[basenameKey], n[basenameKey]].join(sep);
+    parent[inlinedResourcePathKey] = n[inlinedResourcePathKey];
+    parent[basenameKey] = defaultTitle;
+    parent.key = [parent.key, n.key].join("-");
+    parent.children = n.children;
+    parent.title = dirTitle(parent, defaultTitle);
+    n.children && n.children.forEach((c) => {
+      flattenDirectory(c, parent, sep, inlinedResourcePathKey, dirTitle);
+    });
+  } else {
+    n.title = dirTitle(n, n[basenameKey]);
+    n.children && n.children.forEach((c) => {
+      flattenDirectory(c, n, sep, inlinedResourcePathKey, dirTitle);
+    });
+  }
+}
+function createFileStructures({
+  files,
+  sep = "/",
+  inlinedResourcePathKey = "__RESOURCEPATH__",
+  fileTitle = (_file, basename) => basename,
+  dirTitle = (_dir, defaultTitle) => defaultTitle
+}) {
+  const sepRegexp = new RegExp(sep);
+  const res = files.reduce(
+    (t, file) => {
+      let dir = rootDirname(file, sep);
+      let basename = dir ? file?.slice(dir.length + 1) : file;
+      let parent = t;
+      while (dir) {
+        let exist = parent.children.find((e) => e.title === dir);
+        if (!exist) {
+          const p = [parent[inlinedResourcePathKey], dir].filter(Boolean).join(sep);
+          exist = {
+            title: dir,
+            // key: [parent.key, parent.children!.length].join('-'),
+            key: p,
+            children: [],
+            [inlinedResourcePathKey]: p,
+            [basenameKey]: dir
+          };
+          parent.children.push(exist);
+        }
+        parent = exist;
+        dir = rootDirname(basename);
+        basename = dir ? basename.slice(dir.length).replace(sepRegexp, "") : basename;
+      }
+      if (parent.children.some((e) => get(e, inlinedResourcePathKey) === file))
+        return t;
+      parent.children.push({
+        title() {
+          return fileTitle(file, basename);
+        },
+        // key: [parent.key, parent.children!.length].join('-'),
+        key: file,
+        isLeaf: true,
+        [inlinedResourcePathKey]: file,
+        [basenameKey]: basename
+      });
+      return t;
+    },
+    { key: "0", children: [] }
+  ).children;
+  res.forEach((e) => {
+    e.children && e.children.forEach((item) => flattenDirectory(item, e, sep, inlinedResourcePathKey, dirTitle));
+  });
+  return res;
+}
+function beautifyPath(path, cwd) {
+  if (startsWith(path, cwd)) {
+    return path.replace(cwd, ".");
+  }
+  return path;
+}
+function readJSONByFileReader(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const { result } = reader;
+      console.log("reader result: ", result);
+      try {
+        const json = JSON.parse(result.toString());
+        resolve(json);
+      } catch (err) {
+        message.error("json parse error");
+        reject(err);
+      }
+    };
+    reader.onerror = () => {
+      const msg = "upload json file error, please try again.";
+      message.error(msg);
+      reject(new Error(msg));
+    };
+    reader.readAsText(file.originFileObj || file);
+  });
+}
+function beautifyModulePath(modulePath, cwd) {
+  const res = beautifyPath(modulePath, cwd);
+  const str = "/node_modules/";
+  const idx = res.lastIndexOf(str);
+  if (idx > -1) {
+    return {
+      alias: res.slice(idx + str.length),
+      inNodeModules: true
+    };
+  }
+  return {
+    alias: res,
+    inNodeModules: false
+  };
+}
+export {
+  beautifyModulePath,
+  beautifyPath,
+  createFileStructures,
+  flattenDirectory,
+  mapFileKey,
+  readJSONByFileReader,
+  rootDirname
+};

package/dist/utils/hooks.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { Manifest, Rule, SDK } from '@rsdoctor/types';
+import { useTranslation } from 'react-i18next';
+import './i18n';
+export declare const useI18n: typeof useTranslation;
+export declare function useRuleIndexNavigate(code: string, link?: string | undefined): () => void;
+export declare function useUrlQuery(): Record<string, string | undefined>;
+export declare function useLoading(defaultLoading?: boolean): {
+    loading: boolean;
+    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    withLoading(func: (...args: unknown[]) => Promise<unknown> | unknown): Promise<void>;
+};
+export declare function useProjectRootByManifest(manifest: Manifest.RsdoctorManifest): string;
+export declare function useHashByManifest(manifest: Manifest.RsdoctorManifest): string;
+export declare function useCloudManifestUrlByManifest(manifest: Manifest.RsdoctorManifest | Manifest.RsdoctorManifestWithShardingFiles | void): void;
+export declare function useChunkGraphByManifest(manifest: Manifest.RsdoctorManifest): SDK.ChunkGraphData;
+export declare function useConfigOutputFileNameByManifest(manifest: Manifest.RsdoctorManifest): string;
+export declare function useModuleGraphByManifest(manifest: Manifest.RsdoctorManifest): SDK.ModuleGraphData;
+export declare function useModuleGraph(moduleGraph: SDK.ModuleGraphData): SDK.ModuleGraphData;
+export declare function usePackageGraphByManifest(manifest: Manifest.RsdoctorManifest): SDK.PackageGraphData;
+export declare function useUniqModulesByManifest(manifest: Manifest.RsdoctorManifest): SDK.ModuleData[];
+export declare function useUniqModules(modules: SDK.ModuleData[]): SDK.ModuleData[];
+export declare function useErrorsByManifest(manifest: Manifest.RsdoctorManifest): Rule.RuleStoreData;
+export declare function useBundleAlertsByManifest(manifest: Manifest.RsdoctorManifest): Rule.RuleStoreDataItem[];
+export declare function useDuplicatePackagesByManifest(manifest: Manifest.RsdoctorManifest): Rule.PackageRelationDiffRuleStoreData[];
+export declare function useCompileAlertsByErrors(errors: Manifest.RsdoctorManifestData['errors']): Rule.RuleStoreDataItem[];
+export declare function useBundleAlertsByErrors(errors: Manifest.RsdoctorManifestData['errors']): Rule.RuleStoreDataItem[];
+export declare function useDuplicatePackagesByErrors(errors: Manifest.RsdoctorManifestData['errors']): Rule.PackageRelationDiffRuleStoreData[];
+export declare function useWebpackConfigurationByConfigs(configs?: SDK.ConfigData): SDK.WebpackConfigData | null | undefined;
+export declare function useDetectIfCloudIdeEnv(): boolean;
+export declare function useWindowWidth(): number;