@rsdoctor/client 0.1.5 → 0.1.6-beta.0

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@rsdoctor/client",
-  "version": "0.1.5",
+  "version": "0.1.6-beta.0",
   "main": "dist/index.html",
   "repository": {
     "type": "git",
     "url": "https://github.com/web-infra-dev/rsdoctor",
     "directory": "packages/client"
   },
+  "files": [
+    "dist"
+  ],
   "lint-staged": {
     "*.{js,jsx,ts,tsx,mjs,cjs}": [
       "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet"
@@ -28,14 +31,14 @@
     "@types/webpack": "5.28.0",
     "antd": "5.8.3",
     "normalize.css": "8.0.1",
-    "react": "^18",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-router-dom": "6.4.3",
     "serve-static": "1.15.0",
     "typescript": "^5.2.2",
-    "@rsdoctor/components": "0.1.5",
-    "@rsdoctor/types": "0.1.5"
+    "@rsdoctor/components": "0.1.6-beta.0",
+    "@rsdoctor/types": "0.1.6-beta.0"
   },
   "publishConfig": {
     "access": "public",

package/CHANGELOG.md

@@ -1,57 +0,0 @@
-# @rsdoctor/components
-
-## 0.1.5
-
-## 0.1.4
-
-## 0.1.3
-
-## 0.1.2
-
-## 0.1.1
-
-## 0.1.0
-
-### Minor Changes
-
-- e1ac5e7: release: 0.1.0
-
-### Patch Changes
-
-- ab32629: feat(client): add module anaysis components
-- ca92633: Optimize(client): optimize ui client
-- b88d156: feat(platform): report platform add bundle size page
-- 96d0d68: Rsdoctor report platform add overall page (close: #25)
-- 612eefd: feat(client): add timeline chart & loader analysis page
-- d8bc40e: feat(client): add resolve & loader & plugin pages
-- 0e3abb7: feat(bundle): rspack mode add bundle analysis by rspack's hooks and add rules scan.
-- fc01584: refactor(client): migrate build tool to Rsbuild
-
-## 0.1.0-beta
-
-### Minor Changes
-
-- e1ac5e7: release: 0.1.0
-
-## 0.0.2-beta.2
-
-### Patch Changes
-
-- 0e3abb7: feat(bundle): rspack mode add bundle analysis by rspack's hooks and add rules scan.
-
-## 0.0.2-beta.1
-
-### Patch Changes
-
-- ca92633: Optimize(client): optimize ui client
-
-## 0.0.2-beta.0
-
-### Patch Changes
-
-- ab32629: feat(client): add module anaysis components
-- b88d156: feat(platform): report platform add bundle size page
-- 96d0d68: Rsdoctor report platform add overall page (close: #25)
-- 612eefd: feat(client): add timeline chart & loader analysis page
-- d8bc40e: feat(client): add resolve & loader & plugin pages
-- fc01584: refactor(client): migrate build tool to Rsbuild

package/config/constants.ts

@@ -1,19 +0,0 @@
-import { Constants } from '@rsdoctor/types';
-
-import path from 'path';
-
-export const DistPath = path.resolve(__dirname, '../dist');
-
-export const DistResourcePath = path.resolve(__dirname, '../dist/resource');
-
-export const WebpackRsdoctorDirPath = path.resolve(__dirname, `../dist/${Constants.RsdoctorOutputFolder}`);
-
-export const WebpackStatsFilePath = path.resolve(__dirname, '../dist/stats.json');
-
-export const PortForWeb = 8681;
-
-export const PortForCLI = 8123;
-
-export const ClientEntry = path.resolve(__dirname, '../src/index.tsx');
-
-export const RsdoctorWebpackPluginMain = path.resolve(__dirname, '../../webpack-plugin/dist');

package/rsbuild.config.ts

@@ -1,164 +0,0 @@
-import type { Compiler } from 'webpack';
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
-import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
-import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
-import serve from 'serve-static';
-import path from 'path';
-import fs from 'fs';
-import {
-  ClientEntry,
-  DistPath,
-  PortForCLI,
-  PortForWeb,
-  WebpackRsdoctorDirPath,
-  WebpackStatsFilePath,
-} from './config/constants';
-
-const {
-  ENABLE_DEVTOOLS_PLUGIN,
-  OFFICAL_PREVIEW_PUBLIC_PATH,
-  OFFICAL_DEMO_MANIFEST_PATH,
-  ENABLE_CLIENT_SERVER,
-} = process.env;
-
-export default defineConfig((env) => {
-  const IS_PRODUCTION = env.env === 'production';
-
-  return {
-    plugins: [
-      pluginReact(),
-      pluginNodePolyfill(),
-      pluginTypeCheck({ enable: IS_PRODUCTION }),
-    ],
-
-    source: {
-      entry: {
-        index: ClientEntry,
-      },
-      define: {
-        'process.env.NODE_DEBUG': JSON.stringify(false),
-        'process.env.NODE_ENV': JSON.stringify(env.env),
-        'process.env.OFFICAL_DEMO_MANIFEST_PATH': JSON.stringify(
-          OFFICAL_DEMO_MANIFEST_PATH,
-        ),
-        'process.env.LOCAL_CLI_PORT': JSON.stringify(PortForCLI),
-      },
-    },
-
-    output: {
-      distPath: {
-        root: path.basename(DistPath),
-        js: 'resource/js',
-        css: 'resource/css',
-        svg: 'resource/svg',
-        font: 'resource/font',
-        image: 'resource/image',
-        media: 'resource/media',
-      },
-      assetPrefix: IS_PRODUCTION
-        ? OFFICAL_PREVIEW_PUBLIC_PATH?.replace(/\/resource$/, '') || '/'
-        : '/',
-      cleanDistPath: IS_PRODUCTION,
-      disableTsChecker: !IS_PRODUCTION,
-      disableSourceMap: true,
-      disableMinimize: !IS_PRODUCTION,
-    },
-
-    performance: {
-      buildCache: false,
-      chunkSplit: {
-        strategy: 'custom',
-        splitChunks: {
-          cacheGroups: {
-            monaco: {
-              test: /node_modules\/monaco-editor\/*/,
-              name: 'monaco',
-              chunks: 'all',
-              maxSize: 1000000,
-              minSize: 500000,
-            },
-          },
-        },
-      },
-    },
-
-    tools: {
-      bundlerChain: (chainConfig) => {
-        if (ENABLE_DEVTOOLS_PLUGIN) {
-          const { RsdoctorRspackPlugin } =
-            require('../rspack-plugin/dist') as typeof import('../rspack-plugin/dist');
-
-          class StatsWriter {
-            apply(compiler: Compiler) {
-              compiler.hooks.done.tapPromise(
-                { name: 'webpack-stats-json-writer', stage: 99999 },
-                async (stats) => {
-                  const json = stats.toJson({
-                    all: false,
-                    assets: true,
-                    chunks: true,
-                    modules: true,
-                    builtAt: true,
-                    hash: true,
-                    ids: true,
-                    version: true,
-                    entrypoints: true,
-                  });
-                  await fs.promises.writeFile(
-                    WebpackStatsFilePath,
-                    JSON.stringify(json, null, 2),
-                    'utf-8',
-                  );
-                },
-              );
-            }
-          }
-
-          chainConfig.plugin('stats-writer').use(StatsWriter);
-          chainConfig.plugin('rsdoctor').use(RsdoctorRspackPlugin, [
-            {
-              disableClientServer: !ENABLE_CLIENT_SERVER,
-              features: {
-                loader: true,
-                plugins: true,
-                resolver: true,
-                bundle: true,
-                treeShaking: true,
-              },
-            },
-          ]);
-        }
-      },
-
-      devServer: {
-        historyApiFallback: true,
-        setupMiddlewares: [
-          (middlewares) => {
-            if (fs.existsSync(WebpackRsdoctorDirPath)) {
-              const fn = serve(WebpackRsdoctorDirPath, {
-                index: false,
-                setHeaders(res) {
-                  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
-                },
-              });
-              middlewares.push(fn);
-            }
-          },
-        ],
-      },
-    },
-
-    html: {
-      title: 'Rsdoctor',
-    },
-
-    server: {
-      port: PortForWeb,
-    },
-
-    dev: {
-      startUrl: ENABLE_CLIENT_SERVER ? undefined : true,
-    },
-  };
-});

package/src/App.tsx

@@ -1,146 +0,0 @@
-import { Constants } from '@rsdoctor/components';
-import { Config, ConfigContext, defaultConfig } from '@rsdoctor/components/config';
-import { Layout } from '@rsdoctor/components/elements';
-import { getDemoUrl, getLocale, setThemeToStorage, setViewModeToStorage, useDetectIfCloudIdeEnv } from '@rsdoctor/components/utils';
-import type { Manifest } from '@rsdoctor/types';
-import { Alert, Button, ConfigProvider, Divider, Result, Space, Typography, theme as te } from 'antd';
-import React, { useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { HashRouter as BrowserRouter } from 'react-router-dom';
-import Router from './router';
-
-const { PageState, Theme } = Constants;
-
-const App: React.FC = (): React.ReactElement => {
-  const ifCloudIdeEnv = useDetectIfCloudIdeEnv();
-
-  const [state, setState] = useState<Constants.PageState>(PageState.Success);
-  const [viewMode, setViewMode] = useState<Config['viewMode']>({ ...defaultConfig.viewMode });
-  const [manifest, setManifest] = useState<Manifest.RsdoctorManifest>();
-  const [theme, setTheme] = useState(defaultConfig.theme);
-
-  if (state === Constants.PageState.Fail) {
-    const demoUrl = getDemoUrl();
-    return (
-      <Space direction="vertical" style={{ padding: 14 }}>
-        <Typography.Text strong style={{ fontSize: 16 }}>
-          load json file of Rsdoctor failed.
-        </Typography.Text>
-        <Typography.Text>
-          try to use <Typography.Text keyboard>command + r</Typography.Text> to refresh page.
-        </Typography.Text>
-        {process.env.NODE_ENV === 'development' ? (
-          <Typography.Text>
-            in development, you need to run <Typography.Text keyboard>emo run build:analysis</Typography.Text> to make
-            sure the mock data has been generated.
-          </Typography.Text>
-        ) : null}
-        <Divider />
-        <Space direction="vertical" style={{ width: '100%' }}>
-          <Typography.Text style={{ fontSize: 16 }}>
-            you can
-            <Typography.Text strong style={{ fontSize: 'inherit' }}>
-              {' '}
-              upload a file{' '}
-            </Typography.Text>
-            in the area below to analyze your project.
-          </Typography.Text>
-          {/* <UploaderComponent /> */}
-        </Space>
-        <Divider />
-        {demoUrl ? (
-          <Typography.Text style={{ fontSize: 16 }}>
-            or you can open the{' '}
-            <Typography.Text strong style={{ fontSize: 'inherit' }}>
-              <a href={demoUrl} target="_blank" rel="noreferrer">
-                demo
-              </a>
-            </Typography.Text>{' '}
-            to get started with the Rsdoctor.
-          </Typography.Text>
-        ) : null}
-      </Space>
-    );
-  }
-
-  return (
-    <BrowserRouter>
-      <ConfigContext.Provider
-        value={{
-          ...defaultConfig,
-          theme,
-          setTheme: (v) => {
-            setTheme(v);
-            setThemeToStorage(v);
-          },
-          pageState: state,
-          json: manifest!,
-          viewMode,
-          setManifest,
-          setPageState: setState,
-          setViewMode(m, saveStorage = true) {
-            const res = { ...viewMode, ...m };
-            setViewMode(res);
-            saveStorage && setViewModeToStorage(res);
-          },
-        }}
-      >
-        <ConfigContext.Consumer>
-          {(v) => {
-            return (
-              <ConfigProvider
-                locale={getLocale(v.locale)}
-                theme={{
-                  algorithm: theme === Theme.Dark ? te.darkAlgorithm : te.defaultAlgorithm,
-                }}
-              >
-                <Layout>
-                  <>
-                    {ifCloudIdeEnv && (
-                      <Alert
-                        message="Warning"
-                        description={
-                          <a
-                            href={window.location.href.replace(/https/, 'http')}
-                          >{`Please jump to：${window.location.href.replace(/https/, 'http')}`}</a>
-                        }
-                        type="warning"
-                        showIcon
-                        closable
-                      />
-                    )}
-                    <ErrorBoundary
-                      FallbackComponent={({ error, resetErrorBoundary }) => (
-                        <Result
-                          status="error"
-                          title="Sorry, something went wrong."
-                          extra={
-                            <Button type="primary" onClick={resetErrorBoundary} loading={state === PageState.Pending}>
-                              Reload
-                            </Button>
-                          }
-                        >
-                          <Typography.Paragraph>
-                            <Typography.Title level={3}>Error Stack</Typography.Title>
-                            <pre>{error.stack || error.message}</pre>
-                          </Typography.Paragraph>
-                        </Result>
-                      )}
-                      onReset={() => {
-                        window.location.reload();
-                      }}
-                    >
-                      <Router />
-                    </ErrorBoundary>
-                  </>
-                </Layout>
-              </ConfigProvider>
-            );
-          }}
-        </ConfigContext.Consumer>
-      </ConfigContext.Provider>
-    </BrowserRouter>
-  );
-};
-
-export default App;

package/src/common/imgs/connection-point.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 24L43 24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 4H20C18.8954 4 18 4.89543 18 6V14C18 15.1046 18.8954 16 20 16H28C29.1046 16 30 15.1046 30 14V6C30 4.89543 29.1046 4 28 4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M16 32H8C6.89543 32 6 32.8954 6 34V42C6 43.1046 6.89543 44 8 44H16C17.1046 44 18 43.1046 18 42V34C18 32.8954 17.1046 32 16 32Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M40 32H32C30.8954 32 30 32.8954 30 34V42C30 43.1046 30.8954 44 32 44H40C41.1046 44 42 43.1046 42 42V34C42 32.8954 41.1046 32 40 32Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M24 24V16" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M36 32V24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 32V24" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/common/styles/base.scss

@@ -1,6 +0,0 @@
-@import "normalize.css";
-@import "./theme.scss";
-
-.body {
-  font-size: 12px;
-}

package/src/common/styles/theme.scss

@@ -1,3 +0,0 @@
-// body {
-//   background-color: rgb(247, 245, 245);
-// }

package/src/index.tsx

@@ -1,15 +0,0 @@
-import '@rsdoctor/components/i18n';
-import App from './App';
-import ReactDOM from 'react-dom/client';
-import './common/styles/base.scss';
-
-const rootElement = document.getElementById('root');
-const root = ReactDOM.createRoot(rootElement!);
-
-root.render(<App />);
-
-const link = document.createElement('link');
-link.setAttribute('type', 'image/x-icon');
-link.setAttribute('rel', 'icon');
-link.setAttribute('href', 'https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/logo/rsdoctor.png');
-document.head.appendChild(link);

package/src/router.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
-import { Overall, BundleSize, LoaderFiles, PluginsAnalyze, ModuleResolve, LoaderTimeline, RuleIndex } from '@rsdoctor/components/pages';
-
-
-export default function Router(): React.ReactElement {
-  const routes = [
-    {
-      path: BundleSize.route,
-      element: <BundleSize.Page />,
-    },
-    {
-      path: LoaderFiles.route,
-      element: <LoaderFiles.Page />,
-    },
-    {
-      path: LoaderFiles.route,
-      element: <LoaderFiles.Page />,
-    },
-    {
-      path: PluginsAnalyze.route,
-      element: <PluginsAnalyze.Page />,
-    },
-    {
-      path: ModuleResolve.route,
-      element: <ModuleResolve.Page />,
-    },
-    {
-      path: LoaderTimeline.route,
-      element: <LoaderTimeline.Page />,
-    },
-    {
-      path: RuleIndex.route,
-      element: <RuleIndex.Page />,
-    },
-  ].filter((e) => Boolean(e)) as { path: string; element: JSX.Element }[];
-
-  return (
-    <Routes>
-      <Route path="/" element={<Overall.Page />} />
-      <Route path={Overall.route} element={<Overall.Page />} />
-      {routes.map((e) => (
-        <Route key={e.path} path={e.path} element={e.element} />
-      ))}
-    </Routes>
-  );
-}

package/src/typings/assetsDefinition.d.ts

@@ -1,16 +0,0 @@
-declare module '*.png';
-declare module '*.jpg';
-declare module '*.svg';
-declare module '*.jpeg';
-declare module '*.gif';
-declare module '*.webp';
-declare module '*.ttf';
-declare module '*.woff';
-declare module '*.woff2';
-declare module '*.scss';
-declare module '*.less';
-declare module '*.css';
-declare module '*?__inline';
-declare module '*?__inline=true';
-declare module '*?__inline=false';
-

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "@rsdoctor/tsconfig/base",
-  "compilerOptions": {
-    "baseUrl": "./",
-    "jsx": "react-jsx",
-    "isolatedModules": true,
-    "declaration": true,
-    "composite": true,
-    "outDir": "dist",
-  },
-  "include": ["src", "config"],
-  "exclude": ["**/node_modules"]
-}