dumi 2.2.0-alpha.2 → 2.2.0-rc.0

package/dist/features/routes.js

@@ -26,13 +26,15 @@ __export(routes_exports, {
 });
 module.exports = __toCommonJS(routes_exports);
 var import_constants = require("../constants");
-var import_utils = require("../utils");
 var import_core = require("@umijs/core");
-var import_utils2 = require("@umijs/core/dist/route/utils");
+var import_utils = require("@umijs/core/dist/route/utils");
 var import_path = __toESM(require("path"));
 var import_pluralize = require("pluralize");
 var import_plugin_utils = require("umi/plugin-utils");
 var CTX_LAYOUT_ID = "dumi-context-layout";
+var ALIAS_THEME_TMP = "@/dumi__theme";
+var ALIAS_LAYOUTS_LOCAL = "@/dumi__theme__layouts";
+var ALIAS_INTERNAL_PAGES = "@/dumi__pages";
 function normalizeDocDir(docDir) {
   return typeof docDir === "object" ? docDir : { dir: docDir };
 }
@@ -62,6 +64,13 @@ function flatRoute(route, docLayoutId) {
     route.path = route.path === "*" ? route.path : route.absPath.slice(1);
   }
 }
+function getAliasLayoutFile({
+  source,
+  specifier
+}) {
+  const alias = source.includes("/.dumi/theme/layouts/") ? ALIAS_LAYOUTS_LOCAL : `${ALIAS_THEME_TMP}/layouts`;
+  return `${alias}/${specifier}`;
+}
 var routes_default = (api) => {
   var _a, _b, _c;
   const extraWatchPaths = [
@@ -81,6 +90,9 @@ var routes_default = (api) => {
           memo.resolve[key] = [];
       });
     }
+    memo.alias[ALIAS_THEME_TMP] = (0, import_plugin_utils.winPath)(import_path.default.join(api.paths.absTmpPath, "dumi/theme"));
+    memo.alias[ALIAS_LAYOUTS_LOCAL] = (0, import_plugin_utils.winPath)(import_path.default.join(api.cwd, import_constants.LOCAL_THEME_DIR, "layouts"));
+    memo.alias[ALIAS_INTERNAL_PAGES] = (0, import_plugin_utils.winPath)(import_path.default.join(__dirname, "../client/pages"));
     return memo;
   });
   api.modifyRoutes((oRoutes) => {
@@ -104,7 +116,7 @@ var routes_default = (api) => {
       routes[DocLayout.specifier] = {
         id: DocLayout.specifier,
         path: "/",
-        file: DocLayout.source,
+        file: getAliasLayoutFile(DocLayout),
         parentId: lastLayoutId,
         absPath: "/",
         isLayout: true
@@ -115,14 +127,15 @@ var routes_default = (api) => {
       routes[DemoLayout.specifier] = {
         id: DemoLayout.specifier,
         path: "/",
-        file: DemoLayout.source,
+        file: getAliasLayoutFile(DemoLayout),
         parentId: lastLayoutId,
         absPath: "/",
         isLayout: true
       };
     }
     Object.entries(pages).forEach(([, route]) => {
-      route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(api.config.conventionRoutes.base, route.file));
+      const { base } = api.config.conventionRoutes;
+      route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(base, route.file));
       routes[route.id] = route;
     });
     docDirs.map(normalizeDocDir).forEach(({ type, dir }) => {
@@ -142,13 +155,13 @@ var routes_default = (api) => {
         routes[route.id] = route;
       });
     });
-    atomDirs.forEach(({ type, dir }) => {
+    atomDirs.forEach(({ type, subType = "", dir }) => {
       const base = import_path.default.join(api.cwd, dir);
       const atomFiles = import_plugin_utils.glob.sync("{*,*/index,*/index.*,*/README,*/README.*}.md", { cwd: base });
       atomFiles.forEach((file) => {
-        const routeFile = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), file));
+        const routeFile = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), subType, file));
         const routePath = routeFile.replace(/(\/index|\/README)?\.md$/, "").replace(/\./g, "/");
-        const routeId = (0, import_utils2.createRouteId)(routeFile);
+        const routeId = (0, import_utils.createRouteId)(routeFile);
         routes[routeId] = {
           id: routeId,
           path: routePath,
@@ -173,7 +186,7 @@ var routes_default = (api) => {
         path: "*",
         absPath: "/*",
         parentId: docLayoutId,
-        file: (0, import_utils.getClientDistFile)("dist/client/pages/404", api.cwd)
+        file: `${ALIAS_INTERNAL_PAGES}/404`
       };
     }
     routes["demo-render"] = {
@@ -181,7 +194,7 @@ var routes_default = (api) => {
       path: `${import_constants.SP_ROUTE_PREFIX}demos/:id`,
       absPath: `/${import_constants.SP_ROUTE_PREFIX}demos/:id`,
       parentId: demoLayoutId,
-      file: (0, import_utils.getClientDistFile)("dist/client/pages/Demo", api.cwd)
+      file: `${ALIAS_INTERNAL_PAGES}/Demo`
     };
     return routes;
   });
@@ -189,14 +202,14 @@ var routes_default = (api) => {
     const layouts = [
       {
         id: CTX_LAYOUT_ID,
-        file: `${api.paths.absTmpPath}/dumi/theme/ContextWrapper.tsx`
+        file: `${ALIAS_THEME_TMP}/ContextWrapper`
       }
     ];
     const { GlobalLayout } = api.service.themeData.layouts;
     if (GlobalLayout) {
       layouts.unshift({
         id: GlobalLayout.specifier,
-        file: GlobalLayout.source
+        file: getAliasLayoutFile(GlobalLayout)
       });
     }
     return layouts;

package/dist/features/theme/index.js

@@ -26,13 +26,13 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 var import_constants = require("../../constants");
-var import_utils = require("../../utils");
 var import_bundler_utils = require("@umijs/bundler-utils");
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var import_derivative = require("../derivative");
 var import_loader = __toESM(require("./loader"));
+var DEFAULT_THEME_PATH = import_path.default.join(__dirname, "../../../theme-default");
 function getPkgThemeName(api) {
   const validDeps = Object.assign({}, api.pkg.dependencies, api.pkg.devDependencies);
   const pkgThemeName = Object.keys(validDeps).find((pkg) => pkg.split("/").pop().startsWith(import_constants.THEME_PREFIX));
@@ -40,7 +40,7 @@ function getPkgThemeName(api) {
 }
 function getPkgThemePath(api) {
   const pkgThemeName = getPkgThemeName(api);
-  return process.env.DUMI_THEME || pkgThemeName && import_path.default.dirname(import_plugin_utils.resolve.sync(`${pkgThemeName}/package.json`, {
+  return pkgThemeName && import_path.default.dirname(import_plugin_utils.resolve.sync(`${pkgThemeName}/package.json`, {
     basedir: api.cwd,
     preserveSymlinks: true
   }));
@@ -52,7 +52,6 @@ function getModuleExports(modulePath) {
   })[1];
 }
 var theme_default = (api) => {
-  const DEFAULT_THEME_PATH = import_path.default.join((0, import_utils.getClientDistFile)("package.json", api.cwd), "../theme-default");
   const defaultThemeData = (0, import_loader.default)(DEFAULT_THEME_PATH);
   const pkgThemePath = getPkgThemePath(api);
   const pkgThemeData = (0, import_plugin_utils.deepmerge)(defaultThemeData, pkgThemePath ? (0, import_loader.default)(import_path.default.join(pkgThemePath, "dist")) : {});
@@ -138,7 +137,7 @@ var theme_default = (api) => {
     return memo;
   });
   api.onGenerateFiles(() => {
-    var _a;
+    var _a, _b, _c, _d;
     themeMapKeys.forEach((key) => {
       Object.values(originalThemeData[key] || {}).forEach((item) => {
         if (item.source === "dumi")
@@ -162,11 +161,16 @@ var theme_default = (api) => {
     const entryExports = entryFile ? getModuleExports(entryFile) : [];
     const hasDefaultExport = entryExports.includes("default");
     const hasNamedExport = entryExports.some((exp) => exp !== "default");
+    const enableNProgress = !!api.config.themeConfig.nprogress;
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/ContextWrapper.tsx",
       content: `import React, { useState, useEffect, useRef } from 'react';
 import { useOutlet, history } from 'dumi';
+${enableNProgress ? `
+import nprogress from '${(0, import_plugin_utils.winPath)(import_path.default.dirname(require.resolve("nprogress/package")))}';
+import './nprogress.css';
+` : ""}
 import { SiteContext } from '${(0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/context"))}';
 import { demos, components } from '../meta';
 import { locales } from '../locales/config';${hasDefaultExport ? `
@@ -191,6 +195,9 @@ export default function DumiContextWrapper() {
         // mark loading when route change, page component will set false when loaded
         setLoading(true);
 
+        // start nprogress
+        ${enableNProgress ? `nprogress.start();` : ""}
+
         // scroll to top when route changed
         document.documentElement.scrollTo(0, 0);
       }
@@ -214,6 +221,72 @@ export default function DumiContextWrapper() {
   );
 }`
     });
+    const primaryColor = typeof ((_b = api.config) == null ? void 0 : _b.theme) === "object" ? (_d = (_c = api.config) == null ? void 0 : _c.theme) == null ? void 0 : _d["@c-primary"] : "#1677ff";
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: "dumi/theme/nprogress.css",
+      content: `
+      /* https://unpkg.com/browse/nprogress@0.2.0/nprogress.css */
+      #nprogress {
+        pointer-events: none;
+      }
+
+      #nprogress .bar {
+        background: var;
+        position: fixed;
+        z-index: 1031;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+      }
+
+      #nprogress .peg {
+        display: block;
+        position: absolute;
+        right: 0px;
+        width: 100px;
+        height: 100%;
+        box-shadow: 0 0 10px ${primaryColor}, 0 0 5px ${primaryColor};
+        opacity: 1.0;
+        transform: rotate(3deg) translate(0px, -4px);
+      }
+
+      #nprogress .spinner {
+        display: block;
+        position: fixed;
+        z-index: 1031;
+        top: 15px;
+        right: 15px;
+      }
+
+      #nprogress .spinner-icon {
+        width: 18px;
+        height: 18px;
+        box-sizing: border-box;
+        border: solid 2px transparent;
+        border-top-color: ${primaryColor};
+        border-left-color: ${primaryColor};
+        border-radius: 50%;
+        animation: nprogress-spinner 400ms linear infinite;
+      }
+
+      .nprogress-custom-parent {
+        overflow: hidden;
+        position: relative;
+      }
+
+      .nprogress-custom-parent #nprogress .spinner,
+      .nprogress-custom-parent #nprogress .bar {
+        position: absolute;
+      }
+
+      @keyframes nprogress-spinner {
+        0%   { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      `
+    });
   });
   api.addEntryCodeAhead(() => {
     const { prefersColor } = api.config.themeConfig;

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -34,6 +34,7 @@ var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var visit;
 var SKIP;
+var EXIT;
 var toString;
 var isElement;
 var DEMO_NODE_CONTAINER = "$demo-container";
@@ -41,7 +42,7 @@ var DEMO_PROP_VALUE_KEY = "$demo-prop-value-key";
 var DUMI_DEMO_TAG = "DumiDemo";
 var DUMI_DEMO_GRID_TAG = "DumiDemoGrid";
 (async () => {
-  ({ visit, SKIP } = await import("unist-util-visit"));
+  ({ visit, SKIP, EXIT } = await import("unist-util-visit"));
   ({ toString } = await import("hast-util-to-string"));
   ({ isElement } = await import("hast-util-is-element"));
 })();
@@ -125,13 +126,35 @@ function rehypeDemo(opts) {
         }
       }
     });
+    let hasOnlySign = false;
+    let hasSkipSign = false;
     visit(tree, "element", (node) => {
       var _a;
+      if (isElement(node, "p") && ((_a = node.data) == null ? void 0 : _a[DEMO_NODE_CONTAINER])) {
+        for (const codeNode of node.children) {
+          if (isElement(codeNode, "code")) {
+            hasSkipSign || (hasSkipSign = "skip" in codeNode.properties);
+            if ("only" in codeNode.properties) {
+              hasOnlySign = true;
+              return EXIT;
+            }
+          }
+        }
+      }
+    });
+    if (process.env.NODE_ENV === "production" && (hasOnlySign || hasSkipSign)) {
+      import_plugin_utils.logger.warn(`The 'only' or 'skip' mark is not supported in production environment, please remove it. at ${vFile.data.frontmatter.filename}`);
+    }
+    visit(tree, "element", (node) => {
+      var _a, _b, _c;
       if (isElement(node, "p") && ((_a = node.data) == null ? void 0 : _a[DEMO_NODE_CONTAINER])) {
         const demosPropData = [];
-        node.children.forEach((codeNode) => {
-          var _a2, _b;
+        for (const codeNode of node.children) {
           if (isElement(codeNode, "code")) {
+            const shouldSkipNonOnlyDemos = hasOnlySign && !("only" in codeNode.properties);
+            if (process.env.NODE_ENV !== "production" && ("skip" in codeNode.properties || shouldSkipNonOnlyDemos)) {
+              continue;
+            }
             const codeType = codeNode.data.type;
             const techStack = codeNode.data.techStack;
             const codeValue = toString(codeNode).trim();
@@ -147,12 +170,12 @@ function rehypeDemo(opts) {
             if (codeType === "external") {
               const chunkName = [vFile.data.frontmatter.atomId, "demos"].filter(Boolean).join("__");
               parseOpts.fileAbsPath = (0, import_plugin_utils.winPath)(codeNode.properties.src);
-              let localId = ((_a2 = codeNode.properties) == null ? void 0 : _a2.id) ?? import_path.default.parse(parseOpts.fileAbsPath.replace(/\/index\.(j|t)sx?$/, "")).name;
+              let localId = ((_b = codeNode.properties) == null ? void 0 : _b.id) ?? import_path.default.parse(parseOpts.fileAbsPath.replace(/\/index\.(j|t)sx?$/, "")).name;
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, localId, vFile.data.frontmatter.atomId);
               component = `React.lazy(() => import( /* webpackChunkName: "${chunkName}" */ '${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
               if (codeValue)
                 codeNode.properties.title = codeValue;
-              (_b = codeNode.properties).filename ?? (_b.filename = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));
+              (_c = codeNode.properties).filename ?? (_c.filename = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));
             } else {
               parseOpts.fileAbsPath = opts.fileAbsPath.replace(".md", ".tsx");
               parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, String(index++), vFile.data.frontmatter.atomId);
@@ -164,9 +187,9 @@ function rehypeDemo(opts) {
             const propDemo = { id: parseOpts.id };
             demoIds.push(parseOpts.id);
             deferrers.push((0, import_block.default)(parseOpts).then(async ({ asset, sources, frontmatter }) => {
-              var _a3, _b2, _c;
+              var _a2, _b2, _c2;
               if (demoIds.indexOf(parseOpts.id) !== demoIds.lastIndexOf(parseOpts.id)) {
-                const startLine = (_a3 = node.position) == null ? void 0 : _a3.start.line;
+                const startLine = (_a2 = node.position) == null ? void 0 : _a2.start.line;
                 const suffix = startLine ? `:${startLine}` : "";
                 import_plugin_utils.logger.warn(`Duplicate demo id found due to filename conflicts, please consider adding a unique id to code tag to resolve this.
         at ${opts.fileAbsPath}${suffix}`);
@@ -199,7 +222,7 @@ function rehypeDemo(opts) {
                   component
                 };
               }
-              Object.assign(previewerProps, await ((_c = techStack.generatePreviewerProps) == null ? void 0 : _c.call(techStack, originalProps, techStackOpts)) || originalProps);
+              Object.assign(previewerProps, await ((_c2 = techStack.generatePreviewerProps) == null ? void 0 : _c2.call(techStack, originalProps, techStackOpts)) || originalProps);
               if (previewerProps.description) {
                 const { unified } = await import("unified");
                 const { default: remarkParse } = await import("remark-parse");
@@ -224,8 +247,11 @@ function rehypeDemo(opts) {
               demo: propDemo,
               previewerProps
             });
+            if (process.env.NODE_ENV !== "production" && "only" in codeNode.properties) {
+              break;
+            }
           }
-        });
+        }
         replaceNodes.push(node);
         node.children = [];
         if (demosPropData.length === 1) {

package/dist/loaders/markdown/transformer/rehypeEnhancedTag.js

@@ -45,6 +45,7 @@ function rehypeEnhancedTag() {
           type: "element",
           tagName: "SourceCode",
           properties: { lang },
+          data: node.children[0].data,
           JSXAttributes: [
             {
               type: "JSXAttribute",

package/dist/types.d.ts

@@ -9,7 +9,7 @@ import type { AssetsPackage, ExampleBlockAsset } from 'dumi-assets-types';
 import type { Element } from 'hast';
 import type { defineConfig as defineUmiConfig, IApi as IUmiApi } from 'umi';
 declare type Subset<K> = {
-    [attr in keyof K]?: K[attr] extends Array<any> ? K[attr] : K[attr] extends object ? Subset<K[attr]> : K[attr] extends object | null ? Subset<K[attr]> | null : K[attr] extends object | null | undefined ? Subset<K[attr]> | null | undefined : K[attr];
+    [attr in keyof K]?: K[attr] extends Array<any> ? K[attr] : K[attr] extends Function | undefined ? K[attr] : K[attr] extends object ? Subset<K[attr]> : K[attr] extends object | null ? Subset<K[attr]> | null : K[attr] extends object | null | undefined ? Subset<K[attr]> | null | undefined : K[attr];
 };
 declare type NoStringIndex<T> = {
     [K in keyof T as string extends K ? never : K]: T[K];
@@ -21,15 +21,9 @@ interface IDumiExtendsConfig {
             type?: string;
             dir: string;
         })[];
-        /**
-         * @deprecated use `resolve.atomDirs` instead
-         */
-        entityDirs?: {
-            type: string;
-            dir: string;
-        }[];
         atomDirs: {
             type: string;
+            subType?: string;
             dir: string;
         }[];
         codeBlockMode: 'active' | 'passive';

package/dist/utils.d.ts

@@ -34,8 +34,4 @@ export declare function tryFatherBuildConfigs(cwd: string): Promise<any[]>;
  * get root dir for monorepo project
  */
 export declare function getProjectRoot(cwd: string): string;
-/**
- * get dumi client dist file and preserve symlink(pnpm, tnpm & etc.) to make chunk name clean
- */
-export declare function getClientDistFile(file: string, cwd: string): string;
 export {};

package/dist/utils.js

@@ -23,7 +23,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   getCache: () => getCache,
-  getClientDistFile: () => getClientDistFile,
   getFileContentByRegExp: () => getFileContentByRegExp,
   getFileRangeLines: () => getFileRangeLines,
   getProjectRoot: () => getProjectRoot,
@@ -118,22 +117,9 @@ function getProjectRoot(cwd) {
   }
   return (0, import_plugin_utils.winPath)(cwd);
 }
-function getClientDistFile(file, cwd) {
-  let clientFile;
-  try {
-    clientFile = import_plugin_utils.resolve.sync(`dumi/${file}`, {
-      basedir: cwd,
-      preserveSymlinks: true
-    });
-  } catch {
-    clientFile = require.resolve(`../${file}`);
-  }
-  return (0, import_plugin_utils.winPath)(clientFile);
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getCache,
-  getClientDistFile,
   getFileContentByRegExp,
   getFileRangeLines,
   getProjectRoot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-rc.0",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -79,9 +79,10 @@
     "@ant-design/icons-svg": "^4.2.1",
     "@makotot/ghostui": "^2.0.0",
     "@stackblitz/sdk": "^1.8.1",
-    "@swc/core": "1.3.44",
+    "@swc/core": "1.3.57",
     "@types/hast": "^2.3.4",
     "@types/mdast": "^3.0.10",
+    "@types/nprogress": "^0.2.0",
     "@umijs/bundler-utils": "^4.0.64",
     "@umijs/core": "^4.0.64",
     "animated-scroll-to": "^2.3.0",
@@ -106,12 +107,15 @@
     "js-yaml": "^4.1.0",
     "lodash.throttle": "^4.1.1",
     "mdast-util-to-string": "^3.1.0",
+    "nprogress": "^0.2.0",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "^1.3.5",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
     "raw-loader": "^4.0.2",
+    "rc-motion": "^2.7.3",
     "rc-tabs": "^12.5.6",
+    "rc-tree": "^5.7.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-error-boundary": "^3.1.4",
     "react-intl": "^6.1.1",
@@ -149,6 +153,7 @@
     "@umijs/plugins": "4.0.32",
     "dumi-theme-mobile": "workspace:*",
     "eslint": "^8.20.0",
+    "fast-glob": "^3.2.12",
     "father": "^4.1.0",
     "highlight-words-core": "^1.2.2",
     "husky": "^8.0.1",
@@ -166,7 +171,7 @@
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
-  "packageManager": "pnpm@7.3.0",
+  "packageManager": "pnpm@8.4.0",
   "publishConfig": {
     "access": "public"
   },

package/theme-default/builtins/API/index.js

@@ -25,7 +25,7 @@ var HANDLERS = {
       return this.getValidClassName(prop) || prop.type;
     } else if ('const' in prop) {
       // const value
-      return prop.const;
+      return "".concat(prop.const);
     } else if ('oneOf' in prop) {
       // oneOf value
       return this.oneOf(prop);

package/theme-default/builtins/SourceCode/index.js

@@ -15,6 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ReactComponent as IconCheck } from '@ant-design/icons-svg/inline-svg/outlined/check.svg';
 import { ReactComponent as IconCopy } from '@ant-design/icons-svg/inline-svg/outlined/copy.svg';
 import classNames from 'classnames';
+import { useSiteData } from 'dumi';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import 'prism-themes/themes/prism-one-light.css';
 import React, { useRef, useState } from 'react';
@@ -42,6 +43,9 @@ var SourceCode = function SourceCode(props) {
       isCopied = _useState2[0],
       setIsCopied = _useState2[1];
 
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
   return /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-source-code"
   }, /*#__PURE__*/React.createElement(CopyToClipboard, {
@@ -71,22 +75,32 @@ var SourceCode = function SourceCode(props) {
       className: className,
       style: style
     }, tokens.map(function (line, i) {
-      return /*#__PURE__*/React.createElement("div", _extends({
-        key: String(i)
-      }, getLineProps({
+      return /*#__PURE__*/React.createElement("div", {
+        key: String(i),
+        className: classNames({
+          highlighted: highlightLines.includes(i + 1),
+          wrap: themeConfig.showLineNum
+        })
+      }, themeConfig.showLineNum && /*#__PURE__*/React.createElement("span", {
+        className: "token-line-num"
+      }, i + 1), /*#__PURE__*/React.createElement("div", _extends({}, getLineProps({
         line: line,
-        key: i,
+        key: i
+      }), {
         className: classNames({
-          highlighted: highlightLines.includes(i + 1)
+          'line-cell': themeConfig.showLineNum
         })
-      })), line.map(function (token, key) {
-        return /*#__PURE__*/React.createElement("span", _extends({
-          key: String(i)
-        }, getTokenProps({
-          token: token,
-          key: key
-        })));
-      }));
+      }), line.map(function (token, key) {
+        return (
+          /*#__PURE__*/
+          // getTokenProps 返回值包含 key
+          // eslint-disable-next-line react/jsx-key
+          React.createElement("span", getTokenProps({
+            token: token,
+            key: key
+          }))
+        );
+      })));
     }));
   }));
 };

package/theme-default/builtins/SourceCode/index.less

@@ -41,10 +41,50 @@
 
     // highlight line
     & > .highlighted {
+      position: relative;
+      width: calc(100% + 24px);
       background-color: shade(@bg-color, 5%);
-      width: calc(100% + 48px);
-      margin-inline-start: -24px;
-      padding-inline-start: 24px;
+
+      .line-cell {
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: -24px;
+          bottom: 0;
+          width: 24px;
+          background-color: shade(@bg-color, 5%);
+        }
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -24px;
+        bottom: 0;
+        width: 24px;
+        background-color: shade(@bg-color, 5%);
+      }
+    }
+
+    & > .wrap {
+      display: table-row;
+
+      & > .token-line-num {
+        display: table-cell;
+        text-align: right;
+        padding-right: 1em;
+        user-select: none;
+        opacity: 0.5;
+      }
+
+      & > .line-cell {
+        display: table-cell;
+        width: 100%;
+      }
     }
   }
 
@@ -103,6 +143,16 @@
 
     & > pre.prism-code > .highlighted {
       background-color: tint(@bg-color, 10%);
+
+      &::after {
+        background-color: tint(@bg-color, 10%);
+      }
+
+      .line-cell {
+        &::after {
+          background-color: tint(@bg-color, 10%);
+        }
+      }
     }
   }
 }

package/theme-default/builtins/Tree/index.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+import './index.less';
+declare const _default: (props: ComponentProps<'div'>) => JSX.Element;
+export default _default;