@rsdoctor/components 0.0.0-next-20240620044732

package/dist/utils/request.js

@@ -0,0 +1,130 @@
+import axios from "axios";
+import { Manifest, SDK } from "@rsdoctor/types";
+import { Manifest as ManifestMethod, Url } from "@rsdoctor/utils/common";
+import { APILoaderMode4Dev } from "../constants";
+import { getManifestUrlFromUrlQuery } from "./url";
+import { getAPILoaderModeFromStorage } from "./storage";
+function random() {
+  return `${Date.now()}${Math.floor(Math.random() * 1e4)}`;
+}
+async function fetchShardingFile(url) {
+  if (Url.isUrl(url)) {
+    return axios.get(url, { timeout: 999999, responseType: "text" }).then((e) => e.data);
+  }
+  return url;
+}
+async function loadManifestByUrl(url) {
+  const json = await fetchJSONByUrl(url);
+  const res = await parseManifest(json);
+  return res;
+}
+async function fetchJSONByUrl(url) {
+  let json = await axios.get(url, { timeout: 3e4 }).then((e) => e.data);
+  if (typeof json === "string") {
+    json = JSON.parse(json);
+  }
+  console.log("[json] ", url, json);
+  return json;
+}
+function fetchJSONByUrls(urls) {
+  return Promise.all(urls.map((url) => fetchJSONByUrl(url)));
+}
+async function parseManifest(json) {
+  let transformedData;
+  try {
+    if (json.cloudData) {
+      try {
+        transformedData = await ManifestMethod.fetchShardingFiles(
+          json.cloudData,
+          fetchShardingFile
+        );
+      } catch (error) {
+        console.log("cloudData load error: ", error);
+      }
+    } else {
+      transformedData = await ManifestMethod.fetchShardingFiles(
+        json.data,
+        fetchShardingFile
+      );
+    }
+  } catch (error) {
+    transformedData = await ManifestMethod.fetchShardingFiles(
+      json.data,
+      fetchShardingFile
+    );
+  }
+  return {
+    ...json,
+    data: transformedData
+  };
+}
+const manifestUrlForDev = "/manifest.json";
+function getManifestUrl() {
+  let file;
+  if (window[Manifest.RsdoctorManifestClientConstant.WindowPropertyForManifestUrl]) {
+    file = window[Manifest.RsdoctorManifestClientConstant.WindowPropertyForManifestUrl];
+  } else {
+    file = getManifestUrlFromUrlQuery();
+  }
+  if (!file) {
+    if (process.env.NODE_ENV === "development") {
+      file = manifestUrlForDev;
+    } else {
+      file = SDK.ServerAPI.API.Manifest;
+    }
+  }
+  return file;
+}
+const pool = /* @__PURE__ */ new Map();
+async function fetchManifest(url = getManifestUrl()) {
+  if (!pool.has(url)) {
+    pool.set(
+      url,
+      fetchJSONByUrl(url).catch((err) => {
+        pool.delete(url);
+        throw err;
+      })
+    );
+  }
+  const res = await pool.get(url);
+  return res;
+}
+if (process.env.NODE_ENV === "development") {
+  if (getAPILoaderModeFromStorage() === APILoaderMode4Dev.Local) {
+    axios.interceptors.request.use((c) => {
+      c.withCredentials = false;
+      if (c.url?.startsWith("/")) {
+        if (c.url === manifestUrlForDev) {
+          c.url = SDK.ServerAPI.API.Manifest;
+        }
+        const url = new URL(location.href);
+        url.port = String(process.env.LOCAL_CLI_PORT);
+        return {
+          ...c,
+          url: `${url.origin}${c.url}`
+        };
+      }
+      return c;
+    });
+  }
+}
+async function postServerAPI(...args) {
+  const [api, body] = args;
+  const timeout = process.env.NODE_ENV === "development" ? 1e4 : 6e4;
+  const { data } = await axios.post(
+    `${api}?_t=${random()}`,
+    body,
+    { timeout }
+  );
+  return data;
+}
+export {
+  fetchJSONByUrl,
+  fetchJSONByUrls,
+  fetchManifest,
+  fetchShardingFile,
+  getManifestUrl,
+  loadManifestByUrl,
+  parseManifest,
+  postServerAPI
+};

package/dist/utils/routes.d.ts

@@ -0,0 +1,3 @@
+import { Manifest } from '@rsdoctor/types';
+export declare function hasCompile(routes: Manifest.RsdoctorManifestClientRoutes[]): boolean;
+export declare function hasBundle(routes: Manifest.RsdoctorManifestClientRoutes[]): boolean;

package/dist/utils/routes.js

@@ -0,0 +1,14 @@
+import { includes } from "lodash-es";
+import { Manifest } from "@rsdoctor/types";
+function hasCompile(routes) {
+  const hasCompile2 = includes(routes, Manifest.RsdoctorManifestClientRoutes.WebpackLoaders) || includes(routes, Manifest.RsdoctorManifestClientRoutes.ModuleResolve) || includes(routes, Manifest.RsdoctorManifestClientRoutes.WebpackPlugins);
+  return hasCompile2;
+}
+function hasBundle(routes) {
+  const hasBundle2 = includes(routes, Manifest.RsdoctorManifestClientRoutes.BundleSize) || includes(routes, Manifest.RsdoctorManifestClientRoutes.ModuleGraph) || includes(routes, Manifest.RsdoctorManifestClientRoutes.TreeShaking);
+  return hasBundle2;
+}
+export {
+  hasBundle,
+  hasCompile
+};

package/dist/utils/size.d.ts

@@ -0,0 +1,2 @@
+export declare function formatSize(bytes: number): string;
+export declare function formatPercent(percent: number): string;

package/dist/utils/size.js

@@ -0,0 +1,24 @@
+function formatSize(bytes) {
+  let res;
+  if (bytes >= 1073741824) {
+    res = `${(bytes / 1073741824).toFixed(2)} GB`;
+  } else if (bytes >= 1048576) {
+    res = `${(bytes / 1048576).toFixed(2)} MB`;
+  } else if (bytes >= 1e3) {
+    res = `${(bytes / 1e3).toFixed(2)} KB`;
+  } else if (bytes > 1) {
+    res = `${bytes} bytes`;
+  } else if (bytes === 1) {
+    res = `${bytes} byte`;
+  } else {
+    res = "0 bytes";
+  }
+  return res;
+}
+function formatPercent(percent) {
+  return `${+percent.toFixed(2)}%`;
+}
+export {
+  formatPercent,
+  formatSize
+};

package/dist/utils/socket.d.ts

@@ -0,0 +1,2 @@
+import { Socket } from 'socket.io-client';
+export declare function getSocket(): Socket;

package/dist/utils/socket.js

@@ -0,0 +1,21 @@
+import { io } from "socket.io-client";
+const map = /* @__PURE__ */ new Map();
+const socketProtocol = location.protocol.includes("https") ? "wss" : "ws";
+const defaultSocketUrl = process.env.NODE_ENV === "development" ? `${socketProtocol}://${location.hostname}:${process.env.LOCAL_CLI_PORT}` : `${socketProtocol}://${location.host}`;
+function ensureSocket(socketUrl = defaultSocketUrl) {
+  if (!map.has(socketUrl)) {
+    const socket = io(socketUrl, {});
+    socket.on("connect", () => {
+      console.log(`Scoket Connect ${socketUrl}`);
+    });
+    map.set(socketUrl, socket);
+  }
+  return map.get(socketUrl);
+}
+function getSocket() {
+  const socket = ensureSocket(defaultSocketUrl);
+  return socket;
+}
+export {
+  getSocket
+};

package/dist/utils/storage.d.ts

@@ -0,0 +1,13 @@
+import type { Config } from '../config';
+import { APILoaderMode4Dev } from '../constants';
+export declare function getStorage(key: string): string | null;
+export declare function setStorage(key: string, value: string): boolean;
+export declare function getThemeFromStorage(): Config['theme'];
+export declare function setThemeToStorage(theme: Config['theme']): void;
+export declare function getLocaleFromStorage(): Config['locale'];
+export declare function setLocaleToStorage(locale: Config['locale']): void;
+export declare function getViewModeFromStorage(): Config['viewMode'];
+export declare function setViewModeToStorage(viewMode: Config['viewMode']): void;
+export declare function hasViewModeFromStorage(): boolean;
+export declare function setAPILoaderModeToStorage(mode: APILoaderMode4Dev): void;
+export declare function getAPILoaderModeFromStorage(): string;

package/dist/utils/storage.js

@@ -0,0 +1,70 @@
+import { APILoaderMode4Dev, Language, Theme, ViewMode } from "../constants";
+var Keys = /* @__PURE__ */ ((Keys2) => {
+  Keys2["Namespace"] = "__RSDOCTOR__STORAGE__";
+  Keys2["Theme"] = "THEME";
+  Keys2["Locale"] = "LOCALE";
+  Keys2["ViewMode"] = "VIEWMODE";
+  Keys2["APILoaderMode4Dev"] = "APILOADERMODE_DEV";
+  return Keys2;
+})(Keys || {});
+function getStorage(key) {
+  return window.localStorage.getItem(`${"__RSDOCTOR__STORAGE__" /* Namespace */}${key}`);
+}
+function setStorage(key, value) {
+  try {
+    window.localStorage.setItem(`${"__RSDOCTOR__STORAGE__" /* Namespace */}${key}`, value);
+    return true;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}
+function getThemeFromStorage() {
+  return getStorage("THEME" /* Theme */) || Theme.Light;
+}
+function setThemeToStorage(theme) {
+  setStorage("THEME" /* Theme */, theme);
+}
+function getLocaleFromStorage() {
+  return getStorage("LOCALE" /* Locale */) || Language.En;
+}
+function setLocaleToStorage(locale) {
+  setStorage("LOCALE" /* Locale */, locale);
+}
+function getViewModeFromStorage() {
+  const fallback = { bundleAlerts: ViewMode.List, compileAlerts: ViewMode.List };
+  try {
+    const str = getStorage("VIEWMODE" /* ViewMode */);
+    if (str) {
+      return JSON.parse(str) || fallback;
+    }
+    return fallback;
+  } catch (error) {
+    return fallback;
+  }
+}
+function setViewModeToStorage(viewMode) {
+  setStorage("VIEWMODE" /* ViewMode */, JSON.stringify(viewMode));
+}
+function hasViewModeFromStorage() {
+  return !!getStorage("VIEWMODE" /* ViewMode */);
+}
+function setAPILoaderModeToStorage(mode) {
+  setStorage("APILOADERMODE_DEV" /* APILoaderMode4Dev */, mode);
+}
+function getAPILoaderModeFromStorage() {
+  return getStorage("APILOADERMODE_DEV" /* APILoaderMode4Dev */) || APILoaderMode4Dev.Default;
+}
+export {
+  getAPILoaderModeFromStorage,
+  getLocaleFromStorage,
+  getStorage,
+  getThemeFromStorage,
+  getViewModeFromStorage,
+  hasViewModeFromStorage,
+  setAPILoaderModeToStorage,
+  setLocaleToStorage,
+  setStorage,
+  setThemeToStorage,
+  setViewModeToStorage
+};

package/dist/utils/string.d.ts

@@ -0,0 +1,2 @@
+export declare function ensurePrefix(str: string, prefix: string): string;
+export declare function removePrefix(str: string, prefix: string): string;

package/dist/utils/string.js

@@ -0,0 +1,14 @@
+function ensurePrefix(str, prefix) {
+  return str.slice(0, prefix.length) === prefix ? str : `${str}${prefix}`;
+}
+function removePrefix(str, prefix) {
+  let res = str;
+  while (res.slice(0, prefix.length) === prefix) {
+    res = res.slice(prefix.length);
+  }
+  return res;
+}
+export {
+  ensurePrefix,
+  removePrefix
+};

package/dist/utils/time.d.ts

@@ -0,0 +1,3 @@
+import { Time } from '@rsdoctor/utils/common';
+declare const toFixedDigits: typeof Time.toFixedDigits, getUnit: typeof Time.getUnit, formatCosts: typeof Time.formatCosts;
+export { toFixedDigits as toFixed, getUnit, formatCosts };

package/dist/utils/time.js

@@ -0,0 +1,7 @@
+import { Time } from "@rsdoctor/utils/common";
+const { toFixedDigits, getUnit, formatCosts } = Time;
+export {
+  formatCosts,
+  getUnit,
+  toFixedDigits as toFixed
+};

package/dist/utils/url.d.ts

@@ -0,0 +1,7 @@
+export declare function isJsDataUrl(path: string): boolean;
+export declare function getManifestUrlFromUrlQuery(): string | void;
+export declare function changeOrigin(origin: string): string;
+export declare function getSharingUrl(manifestCloudUrl: string): string;
+export declare function getDemoUrl(): string | null;
+export declare const getShortPath: (path: string) => string;
+export declare function isDef<E = unknown>(data: E): data is NonNullable<E>;

package/dist/utils/url.js

@@ -0,0 +1,75 @@
+import parse from "url-parse";
+import { Constants, Client } from "@rsdoctor/types";
+import { endsWith } from "lodash-es";
+function setDefaultUrl(url) {
+  if (process.env.NODE_ENV !== "development") {
+    const uri = parse(Constants.RsdoctorClientUrl, true);
+    url.set("origin", uri.origin);
+    url.set("protocol", uri.protocol);
+    url.set("host", uri.host);
+    url.set("pathname", uri.pathname);
+  }
+}
+function setUploaderHash(url) {
+  if (endsWith(url.hash, Client.RsdoctorClientRoutes.Uploader)) {
+    url.set("hash", Client.RsdoctorClientRoutes.Overall);
+  }
+}
+function isJsDataUrl(path) {
+  return path.startsWith("data:text/javascript;");
+}
+function getManifestUrlFromUrlQuery() {
+  const { query } = parse(location.href, true);
+  const url = query[Client.RsdoctorClientUrlQuery.ManifestFile];
+  if (url) {
+    return decodeURIComponent(url);
+  }
+}
+function changeOrigin(origin) {
+  const url = parse(location.href, true);
+  const newUrl = parse(origin, true);
+  setUploaderHash(url);
+  url.set("origin", origin);
+  url.set("protocol", newUrl.protocol);
+  url.set("host", newUrl.host);
+  url.set("port", newUrl.port);
+  return url.toString();
+}
+function getSharingUrl(manifestCloudUrl) {
+  const url = parse(location.href, true);
+  setDefaultUrl(url);
+  setUploaderHash(url);
+  url.set("query", {
+    ...url.query,
+    [Client.RsdoctorClientUrlQuery.ManifestFile]: manifestCloudUrl
+  });
+  return url.toString();
+}
+function getDemoUrl() {
+  if (process.env.OFFICAL_DEMO_MANIFEST_PATH) {
+    return getSharingUrl(process.env.OFFICAL_DEMO_MANIFEST_PATH);
+  }
+  return null;
+}
+const getShortPath = (path) => {
+  if (path?.indexOf("node_modules") >= 0) {
+    const pathArr = path.split("node_modules");
+    return `node_modules${pathArr[pathArr.length - 1]}`;
+  }
+  if (path?.length) {
+    return `${path?.split("/").slice(-4).join("/")}`;
+  }
+  return path;
+};
+function isDef(data) {
+  return data !== void 0 && data !== null;
+}
+export {
+  changeOrigin,
+  getDemoUrl,
+  getManifestUrlFromUrlQuery,
+  getSharingUrl,
+  getShortPath,
+  isDef,
+  isJsDataUrl
+};

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

@@ -0,0 +1,4 @@
+export * from './utils';
+export * from './types';
+export * from './master';
+export * from './worker';

package/dist/utils/worker/index.js

@@ -0,0 +1,4 @@
+export * from "./utils";
+export * from "./types";
+export * from "./master";
+export * from "./worker";

package/dist/utils/worker/master.d.ts

@@ -0,0 +1,8 @@
+import { CreateWorker } from './types';
+import { ChildWorker } from './worker';
+declare class Master {
+    private _workerMap;
+    detectWorker(create: CreateWorker): ChildWorker;
+}
+export declare const master: Master;
+export {};

package/dist/utils/worker/master.js

@@ -0,0 +1,18 @@
+import { ChildWorker } from "./worker";
+class Master {
+  constructor() {
+    this._workerMap = /* @__PURE__ */ new WeakMap();
+  }
+  detectWorker(create) {
+    if (this._workerMap.has(create))
+      return this._workerMap.get(create);
+    const worker = create();
+    const child = new ChildWorker(worker);
+    this._workerMap.set(create, child);
+    return child;
+  }
+}
+const master = new Master();
+export {
+  master
+};

package/dist/utils/worker/types.d.ts

@@ -0,0 +1,9 @@
+export type CreateWorker = () => Worker;
+export type NativeWorkerMessage<T = unknown> = MessageEvent<WorkerMessage<T>>;
+export type WorkerMessage<T = unknown> = {
+    id: number | string;
+    data: T;
+};
+export type InternalWorkerEventCallback<T> = (message: WorkerMessage<T>) => unknown;
+export type UserWorkerEventCallback<T = unknown> = (data: T) => unknown;
+export type UserWorkerEventHandler<T = unknown, R = unknown> = (data: T) => R | Promise<R>;

package/dist/utils/worker/utils.d.ts

@@ -0,0 +1,7 @@
+import { NativeWorkerMessage, UserWorkerEventHandler, WorkerMessage } from './types';
+export declare function sendMessageInClient<T>(msg: WorkerMessage<T>, worker: Worker): void;
+export declare function sendMessageInWorker<T>(receivedMsg: NativeWorkerMessage, response: T): void;
+export declare function handleMessageInWorker<T, R>({ handler, }: {
+    workerName: string;
+    handler: UserWorkerEventHandler<T, R>;
+}): void;

package/dist/utils/worker/utils.js

@@ -0,0 +1,29 @@
+function sendMessageInClient(msg, worker) {
+  return worker.postMessage(msg);
+}
+function sendMessageInWorker(receivedMsg, response) {
+  const msg = {
+    id: receivedMsg.data.id,
+    data: response
+  };
+  return postMessage(msg);
+}
+function handleMessageInWorker({
+  handler
+}) {
+  onmessage = (e) => {
+    const res = handler(e.data.data);
+    if (res instanceof Promise) {
+      res.then((r) => {
+        sendMessageInWorker(e, r);
+      });
+    } else {
+      sendMessageInWorker(e, res);
+    }
+  };
+}
+export {
+  handleMessageInWorker,
+  sendMessageInClient,
+  sendMessageInWorker
+};

package/dist/utils/worker/worker.d.ts

@@ -0,0 +1,13 @@
+import { UserWorkerEventCallback } from './types';
+export declare class ChildWorker {
+    protected worker: Worker;
+    private timer;
+    private callbacks;
+    constructor(worker: Worker);
+    protected setup(): void;
+    protected createEventId(): string;
+    emit<T, P = unknown>(data: P, callback: UserWorkerEventCallback<T>): {
+        abort: () => boolean;
+    };
+    dispose(): void;
+}

package/dist/utils/worker/worker.js

@@ -0,0 +1,38 @@
+import { sendMessageInClient } from "./utils";
+class ChildWorker {
+  constructor(worker) {
+    this.worker = worker;
+    this.timer = 0;
+    this.callbacks = /* @__PURE__ */ new Map();
+    this.setup();
+  }
+  setup() {
+    this.worker.onmessage = (msg) => {
+      const { data } = msg;
+      if (this.callbacks.has(data.id)) {
+        const fn = this.callbacks.get(data.id);
+        this.callbacks.delete(data.id);
+        fn(data.data);
+      }
+    };
+  }
+  createEventId() {
+    return `${Date.now()}_${++this.timer}`;
+  }
+  emit(data, callback) {
+    const id = this.createEventId();
+    const msg = {
+      id,
+      data
+    };
+    this.callbacks.set(id, callback);
+    sendMessageInClient(msg, this.worker);
+    return { abort: () => this.callbacks.delete(id) };
+  }
+  dispose() {
+    this.worker.terminate();
+  }
+}
+export {
+  ChildWorker
+};

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@rsdoctor/components",
+  "version": "0.0.0-next-20240620044732",
+  "main": "./dist/index.js",
+  "license": "MIT",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rsdoctor",
+    "directory": "packages/components"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./elements": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./pages": {
+      "types": "./dist/pages/index.d.ts",
+      "default": "./dist/pages/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/utils/i18n/index.d.ts",
+      "default": "./dist/utils/i18n/index.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "default": "./dist/config.js"
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "devDependencies": {
+    "@ant-design/icons": "4.8.0",
+    "@monaco-editor/react": "4.6.0",
+    "@types/lodash-es": "4.17.6",
+    "@types/node": "^16",
+    "@types/path-browserify": "1.0.1",
+    "@types/react": "^18",
+    "@types/react-highlight-words": "^0.16.7",
+    "@types/url-parse": "1.4.8",
+    "ansi-to-react": "6.1.6",
+    "antd": "5.15.3",
+    "axios": "^1.7.2",
+    "dayjs": "1.11.6",
+    "echarts": "^5.5.0",
+    "echarts-for-react": "^3.0.2",
+    "i18next": "22.0.4",
+    "lodash-es": "4.17.21",
+    "monaco-editor": "0.49.0",
+    "path-browserify": "1.0.1",
+    "rc-dialog": "9.1.0",
+    "rc-tree": "5.7.2",
+    "react": "18.2.0",
+    "react-highlight-words": "^0.20.0",
+    "react-hyper-tree": "0.3.12",
+    "react-i18next": "12.0.0",
+    "react-json-view": "1.21.3",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "6.4.3",
+    "socket.io-client": "4.6.1",
+    "terser": "^5.26.0",
+    "typescript": "^5.2.2",
+    "url-parse": "1.5.10",
+    "@rsdoctor/graph": "0.0.0-next-20240620044732",
+    "@rsdoctor/types": "0.0.0-next-20240620044732",
+    "@rsdoctor/utils": "0.0.0-next-20240620044732"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "modern build",
+    "dev": "npm run start",
+    "start": "modern build -w",
+    "test": "vitest run"
+  }
+}