@rsdoctor/docs 0.0.0-next-20240620044732

package/docs/zh/guide/usage/rule-config.mdx

@@ -0,0 +1,86 @@
+# 编译诊断规则
+
+构建诊断规则是类似于 `ESLint` 的 lint 工具，但是与其不同之处在于，`ESLint` 是在静态情况下进行代码扫描和构建流程无关。而这里的代码诊断是和 `Rspack 或 Webpack` 的构建流程紧密相关的，其中会加入许许多多构建中产生的内部参数用于辅助判断，比如 ModuleGraph，比如 Webpack 对每个模块的内部标记，比如代码经过转换之后加入的 runtime 等等……
+
+在构建过程中发现了问题，会在 CLI 和最后弹出的诊断汇总网页中看到，如下图：
+
+<img
+  width="700"
+  style={{ margin: '10px auto' }}
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/rule-config-cli.png"
+/>
+
+<img
+  width="700"
+  style={{ margin: '10px auto' }}
+  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/docs/usage/bundle/rule-config-1.png"
+/>
+
+## 如何使用
+
+诊断规则的使用很简单，它配置在整个插件的`linter`选项下，如下用例：
+
+```ts
+import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';
+
+export default {
+  plugin: [
+    new RsdoctorWebpackPlugin({
+      linter: {
+        level: 'Error',
+        extends: [],
+        rules: {
+          'default-import-check': 'off',
+          'duplicate-package': [
+            'Error',
+            {
+              checkVersion: 'minor',
+              ignore: ['chalk', '@bable/runtime'],
+            },
+          ],
+        },
+      },
+    }),
+  ],
+};
+```
+
+`linter`字段的类型为：
+
+```ts
+/** 校验器选项 */
+interface Options {
+  rules?: RulesMap;
+  level?: SeverityString;
+  extends?: ExtendRuleData[];
+}
+
+/**
+ * 校验等级
+ *   - `'Warn'`时只运行类别为`'Warn'`的规则
+ *   - `'Error'`时运行全部规则
+ */
+type SeverityString = 'Warn' | 'Error';
+
+/** 规则等级 */
+type SeverityInput = SeverityString | 'off' | 'on';
+
+/** 规则配置 */
+type RulesMap = Record<string, RuleConfigItem>;
+
+/** 单规则配置 */
+type RuleConfigItem =
+  // 仅有报错等级，此等级优先级高于规则自身配置
+  | SeverityInput
+  // 数组情况下，第一项为报错等级，后一项是规则配置
+  | [SeverityInput, unknown];
+```
+
+## 内部已有规则
+
+在现有的诊断器中已经包含了三个规则，它们分别是：
+
+1. [[E1001] Duplicate Packages](./bundle-alerts#%E9%87%8D%E5%A4%8D%E7%AC%AC%E4%B8%89%E6%96%B9%E5%8C%85)
+2. [[E1002] Default Import Check](../more/rules)
+3. [[E1003] Loader Performance Optimization](../more/rules)
+4. [[E1004] ECMA Version Check](../more/rules)

package/docs/zh/index.md

@@ -0,0 +1,38 @@
+---
+pageType: home
+
+hero:
+  name: Rsdoctor
+  text: Rspack & Webpack 构建分析工具
+  tagline: 让构建过程可视化
+  actions:
+    - theme: brand
+      text: 介绍
+      link: /zh/guide/start/intro
+    - theme: alt
+      text: 快速开始
+      link: /zh/guide/start/quick-start
+  image:
+    src: https://lf3-static.bytednsdoc.com/obj/eden-cn/lognuvj/rsdoctor/logo/rsdoctor.png
+    alt: Rsdoctor Logo
+
+features:
+  - title: 框架无关
+    details: Rsdoctor 支持分析用 Webpack 和 Rspack 构建的项目。
+    icon: 🛠️
+  - title: 构建时分析
+    details: 以时序图的形式显示编译执行时间和过程。
+    icon: 🚀
+  - title: 构建行为分析
+    details: 可视化的查看每个 loader 对每个文件的编译更改。
+    icon: 🦄
+  - title: 构建产物分析
+    details: 直观地详细查看 Bundle 和模块关系、模块引用关系和重复包等产物详情。
+    icon: 🎯
+  - title: 产物对比
+    details: 通过对比发现产物劣化及变动。
+    icon: 🎨
+  - title: 构建扫描
+    details: 内置构建规则扫描，同时支持自定义规则。
+    icon: 🔍
+---

package/docs/zh/shared/features-rspack.md

@@ -0,0 +1,24 @@
+```ts
+interface RsdoctorRspackPluginFeatures {
+  /**
+   * turn off it if you need not to analyze the executions of webpack loaders.
+   * @default true
+   */
+  loader?: boolean;
+  /**
+   * turn off it if you need not to analyze the executions of webpack plugins.
+   * @default true
+   */
+  plugins?: boolean;
+  /**
+   * turn off it if you need not to analyze the output bundle.
+   * @default true
+   */
+  bundle?: boolean;
+  /**
+   * turn on it if you just use lite mode. This mode do not have source codes.
+   * @default false
+   */
+  lite?: boolean;
+}
+```

package/docs/zh/shared/features.md

@@ -0,0 +1,29 @@
+```ts
+interface RsdoctorWebpackPluginFeatures {
+  /**
+   * turn off it if you need not to analyze the executions of webpack loaders.
+   * @default true
+   */
+  loader?: boolean;
+  /**
+   * turn off it if you need not to analyze the executions of webpack plugins.
+   * @default true
+   */
+  plugins?: boolean;
+  /**
+   * turn off it if you need not to analyze the executions of resolver.
+   * @default false
+   */
+  resolver?: boolean;
+  /**
+   * turn off it if you need not to analyze the output bundle.
+   * @default true
+   */
+  bundle?: boolean;
+  /**
+   * turn on it if you just use lite mode. This mode do not have source codes.
+   * @default false
+   */
+  lite?: boolean;
+}
+```

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@rsdoctor/docs",
+  "version": "0.0.0-next-20240620044732",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rsdoctor",
+    "directory": "packages/document"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "docs",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@types/node": "^16",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rsbuild-plugin-google-analytics": "^1.0.0",
+    "rsbuild-plugin-open-graph": "1.0.0",
+    "rspress-plugin-font-open-sans": "^1.0.0",
+    "typescript": "^5.2.2",
+    "@rsdoctor/types": "0.0.0-next-20240620044732"
+  },
+  "dependencies": {
+    "framer-motion": "^10.18.0",
+    "react-markdown": "^9.0.1",
+    "rsfamily-nav-icon": "^1.0.3",
+    "rspress": "^1.21.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  }
+}

package/src/components/NextSteps.module.scss

@@ -0,0 +1,6 @@
+.next-steps {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 3rem;
+}

package/src/components/NextSteps.tsx

@@ -0,0 +1,7 @@
+import styles from './NextSteps.module.scss';
+
+const NextSteps = (props: { children?: React.ReactNode }) => {
+  return <div className={styles.nextSteps}>{props.children}</div>;
+};
+
+export default NextSteps;

package/src/components/Overview.module.scss

@@ -0,0 +1,61 @@
+.root {
+  margin-top: 64px;
+
+  h2 {
+    font-size: 23px;
+    font-weight: 600;
+    line-height: 1;
+    margin: 0 0 20px;
+    color: var(--rp-c-text-1);
+    transition: color 0.5s;
+  }
+
+  a {
+    letter-spacing: -0.01em;
+    margin-bottom: 1em;
+    transition: color 0.5s;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 2.2;
+    margin-top: 8px;
+    color: var(--rp-c-text-code);
+    opacity: 0.9;
+    transition: color 0.5s;
+    word-break: break-all;
+  }
+
+  a:hover {
+    transition: color 0.5s;
+    color: var(--rp-c-brand-dark);
+  }
+}
+
+.group {
+  break-inside: avoid;
+  margin-bottom: 28px;
+  background-color: var(--rp-c-bg-soft);
+  border-radius: 12px;
+  padding: 28px 32px;
+  transition: background-color 0.5s;
+}
+
+@media (max-width: 768px) {
+  .root a {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 768px) {
+  .root {
+    columns: 2;
+    min-width: 648px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .root {
+    columns: 3;
+    min-width: 904px;
+  }
+}

package/src/components/Overview.tsx

@@ -0,0 +1,40 @@
+import { NoSSR } from 'rspress/runtime';
+import { useUrl } from '../utils';
+import styles from './Overview.module.scss';
+
+export interface GroupItem {
+  text: string;
+  link: string;
+}
+
+export interface Group {
+  name: string;
+  items: GroupItem[];
+}
+
+declare const OVERVIEW_GROUPS: Group[];
+
+export default function Overview() {
+  const Nodes = OVERVIEW_GROUPS.map((group) => (
+    <>
+      <div className={styles.overviewGroups}>
+        <div className={styles.group}>
+          <h2>{group.name}</h2>
+          <ul>
+            {group.items.map((item) => (
+              <li key={item.text}>
+                <a href={useUrl(item.link)}>{item.text}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
+  ));
+
+  return (
+    <NoSSR>
+      <div className={styles.root}>{Nodes}</div>
+    </NoSSR>
+  );
+}

package/src/components/RuleIndex.module.scss

@@ -0,0 +1,57 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.card {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  border-radius: 8px;
+  border: 1px solid var(--rp-c-divider-light);
+  margin-right: 24px;
+  font-size: 14px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  border-bottom: 1px solid var(--rp-c-divider-light);
+  height: 55.5px;
+  overflow: hidden;
+  font-weight: bold;
+}
+
+.card-body {
+  padding: 24px;
+}
+
+.list {
+  width: 320px;
+}
+
+.item {
+  margin-bottom: 12px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.content {
+  margin-right: 0;
+  min-width: 500px;
+}
+
+.tag {
+  margin: 0 0.2em;
+  padding-inline: 0.4em;
+  padding-block: 0.2em 0.1em;
+  font-size: 85%;
+  background: rgba(150, 150, 150, 0.1);
+  border: 1px solid rgba(100, 100, 100, 0.2);
+  border-radius: 3px;
+  font-weight: bold;
+}

package/src/components/RuleIndex.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Rule } from '@rsdoctor/types';
+import styles from './RuleIndex.module.scss';
+const themeDefault = require('@rspress/core/theme');
+
+const RuleIndex = () => {
+  const rules = Object.values(Rule.RuleErrorMap);
+  const [ruleMessage, setRuleMessage] = useState(rules[0] as Rule.RuleMessage);
+
+  const selectRuleMessage = (message: Rule.RuleMessage) => {
+    setRuleMessage(message);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.card} ${styles.list}`}>
+        <div className={styles['card-header']}>List of the error codes</div>
+        <div className={styles['card-body']}>
+          {rules.map((item) => (
+            <div
+              className={styles.item}
+              key={item.code}
+              onClick={() => selectRuleMessage(item)}
+              style={{
+                color:
+                  ruleMessage && item.code === ruleMessage.code
+                    ? 'rgb(24, 144, 255)'
+                    : undefined,
+              }}
+            >
+              <span className={styles.tag}>
+                <a>{item.code}</a>
+              </span>
+              <span>{item.title}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {ruleMessage ? (
+        <div className={`${styles.card} ${styles.content}`}>
+          <div className={styles['card-header']}>
+            <div>
+              <span className={styles.tag}>{ruleMessage.code}</span>
+              <span>{ruleMessage.title}</span>
+            </div>
+            <span className={styles.tag}>{ruleMessage.category}</span>
+          </div>
+          <div className={styles['card-body']} style={{ paddingTop: 0 }}>
+            <ReactMarkdown
+              components={{
+                ...themeDefault.getCustomMDXComponent(),
+                code: (props) => <code {...props} />,
+              }}
+            >
+              {ruleMessage.description}
+            </ReactMarkdown>
+          </div>
+        </div>
+      ) : (
+        <div className={`${styles.card} ${styles.content}`}>
+          <div className={styles['card-header']}>
+            This page lists all the error codes emitted by the Rsdoctor.
+          </div>
+          <div className={styles['card-body']}>
+            click the error code in left bar to show more details.
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RuleIndex;

package/src/components/Step.module.scss

@@ -0,0 +1,32 @@
+.step {
+  border: 1px solid var(--rp-c-bg-soft);
+  background-color: var(--rp-c-bg-soft);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  padding: 28px 36px;
+  border-radius: 8px;
+  flex: 0 32%;
+  font-size: 14px;
+  font-weight: 500;
+
+  &:hover {
+    border-color: var(--rp-c-brand);
+    transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  }
+}
+
+.title {
+  font-size: 20px;
+  line-height: 1.4;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.75em !important;
+  display: block;
+}
+
+.description {
+  margin: 0 !important;
+  line-height: 1.7 !important;
+  color: var(--rp-c-text-2);
+  transition: color 0.5s;
+}

package/src/components/Step.tsx

@@ -0,0 +1,13 @@
+import { useUrl } from '../utils';
+import styles from './Step.module.scss';
+
+const Step = (props: { href: string; title: string; description: string }) => {
+  return (
+    <a className={styles.step} href={useUrl(props.href)}>
+      <p className={styles.title}>{props.title}</p>
+      <p className={styles.description}>{props.description}</p>
+    </a>
+  );
+};
+
+export default Step;

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/src/utils.ts

@@ -0,0 +1,9 @@
+import { useLang, withBase, usePageData } from 'rspress/runtime';
+
+export function useUrl(url: string) {
+  const lang = useLang();
+  const {
+    siteData: { lang: defaultLang },
+  } = usePageData();
+  return withBase(lang === defaultLang ? url : `/${lang}${url}`);
+}