feat: use shiki

.dumi/theme/builtins/SourceCode/index.less

@@ -0,0 +1,36 @@
+@import '~@shikijs/twoslash/style-rich.css';
+
+.sourceCode__container {
+    > pre {
+        max-height: 350px;
+        padding: 20px 24px;
+        margin: 0;
+        background-color: #f9f9f9 !important;
+
+        *::selection {
+            color: inherit;
+            background-color: rgba(30, 128, 240, 0.15);
+        }
+    }
+
+    code {
+        counter-reset: step;
+        counter-increment: step 0;
+    }
+
+    code .line::before {
+        content: counter(step);
+        counter-increment: step;
+        width: 1rem;
+        margin-right: 1.5rem;
+        display: inline-block;
+        text-align: right;
+        color: rgba(115, 138, 148, 0.4);
+    }
+}
+
+.sourceCode__loading {
+    width: 100%;
+    margin: 20px;
+    text-align: center;
+}

.dumi/theme/builtins/SourceCode/index.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { default as OriginalSourceCode } from 'dumi/theme-default/builtins/SourceCode';
+import { codeToHtml } from 'shiki';
+import { createTransformerFactory, rendererRich } from '@shikijs/twoslash/core';
+import { createTwoslashFromCDN } from 'twoslash-cdn';
+import { createStorage } from 'unstorage';
+import indexedDbDriver from 'unstorage/drivers/indexedb';
+import './index.less';
+
+type ISourceCodeProps = Parameters<typeof OriginalSourceCode>[0];
+
+const storage = createStorage({
+    driver: indexedDbDriver({ base: 'twoslash-cdn' }),
+});
+const twoslash = createTwoslashFromCDN({
+    storage,
+    compilerOptions: {
+        strict: false,
+        lib: ['esnext', 'dom'],
+    },
+    twoSlashOptionsOverrides: {
+        handbookOptions: {
+            noErrors: true,
+        },
+    },
+});
+const transformerTwoslash = createTransformerFactory(twoslash.runSync)({
+    renderer: rendererRich(),
+});
+
+const specificVersionForATA = (str: string) => {
+    const versions = {
+        react: '18.2.0',
+        antd: '4.22.5',
+    };
+    const text = str
+        .replace(/import .* from 'react';/g, (i) => i + ' // types: ' + versions.react)
+        .replace(/import .*from 'antd.*;/g, (i) => i + ' // types: ' + versions.antd)
+        .replace('dt-react-component', '.dt-react-component');
+    return text;
+};
+
+export default function SourceCode({ children, lang, highlightLines }: ISourceCodeProps) {
+    const [code, setCode] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        setLoading(true);
+        twoslash
+            .prepareTypes(specificVersionForATA(children))
+            .then(() => {
+                return codeToHtml(children, {
+                    lang,
+                    theme: 'vitesse-light',
+                    transformers: [transformerTwoslash],
+                });
+            })
+            .then(setCode)
+            .finally(() => {
+                setLoading(false);
+            });
+    }, [children]);
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                // Ctrl + A
+                const selection = window.getSelection();
+                selection?.removeAllRanges();
+                const range = new Range();
+                range.selectNodeContents(ref.current!);
+                selection?.addRange(range);
+            }
+        };
+        ref.current?.addEventListener('keydown', handleKeyDown);
+        return () => {
+            ref.current?.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+
+    if (loading) return <div className="sourceCode__loading">loading...</div>;
+    return (
+        <div
+            ref={ref}
+            className="sourceCode__container"
+            tabIndex={-1}
+            dangerouslySetInnerHTML={{ __html: code }}
+        />
+    );
+}

package.json

@@ -75,6 +75,8 @@
         "@commitlint/cli": "^17.1.2",
         "@commitlint/config-conventional": "^17.1.0",
         "@faker-js/faker": "^7.6.0",
+        "@shikijs/rehype": "^2.4.2",
+        "@shikijs/twoslash": "^2.4.2",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/react-hooks": "^8.0.1",
@@ -93,6 +95,7 @@
         "father": "~4.1.0",
         "gh-pages": "^4.0.0",
         "husky": "^8.0.1",
+        "idb-keyval": "^6.2.1",
         "jest": "^29.3.1",
         "jest-environment-jsdom": "^29.3.1",
         "ko-lint-config": "2.2.21",
@@ -102,10 +105,13 @@
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-test-renderer": "^18.2.0",
+        "shiki": "^2.4.2",
         "standard-version": "^9.5.0",
         "stylelint": "^14.9.1",
         "ts-jest": "^29.0.3",
-        "typescript": "~4.5.2"
+        "twoslash-cdn": "^0.2.12",
+        "typescript": "~4.5.2",
+        "unstorage": "^1.14.4"
     },
     "dependencies": {
         "@ant-design/icons": "^4.7.0",
@@ -130,5 +136,10 @@
     "resolutions": {
         "rc-motion": "2.6.2"
     },
-    "packageManager": "[email protected]"
+    "packageManager": "[email protected]",
+    "pnpm": {
+        "patchedDependencies": {
+            "twoslash-cdn": "patches/twoslash-cdn.patch"
+        }
+    }
 }

patches/twoslash-cdn.patch

@@ -0,0 +1,16 @@
+diff --git a/dist/index.mjs b/dist/index.mjs
+index 278a623a5747249444c510cea633ae8fd9271529..a552d41d2cb27de186a02b94a768f12187e3969e 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -176,9 +176,9 @@ var setupTypeAcquisition = (config) => {
+       const mightBeOnDT = treesOnly.filter((t) => !hasDTS.includes(t));
+       const dtTrees = yield Promise.all(
+         // TODO: Switch from 'latest' to the version from the original tree which is user-controlled
+-        mightBeOnDT.map((f) => getFileTreeForModuleWithTag(config, `@types/${getDTName(f.moduleName)}`, "latest"))
++        mightBeOnDT.map((f) => getFileTreeForModuleWithTag(config, `@types/${getDTName(f.moduleName)}`, f.version))
+       );
+-      const dtTreesOnly = dtTrees.filter((t) => !("error" in t));
++      const dtTreesOnly = dtTrees.filter((t) => !("error" in t) && t.status === 200);
+       const dtsFilesFromDT = dtTreesOnly.map((t) => treeToDTSFiles(t, `/node_modules/@types/${getDTName(t.moduleName).replace("types__", "")}`));
+       const allDTSFiles = dtsFilesFromNPM.concat(dtsFilesFromDT).reduce((p, c) => p.concat(c), []);
+       estimatedToDownload += allDTSFiles.length;