WIP: feat: use shiki

.dumi/theme/builtins/sourceCode/index.less

@@ -0,0 +1,59 @@
+@import '~@shikijs/twoslash/style-rich.css';
+
+.source-code {
+    &-content {
+        padding: 12px 24px;
+        > pre {
+            overflow: visible;
+        }
+    }
+    &-shadow {
+        box-shadow: inset 0 6px 6px -6px #00000029;
+        width: 100%;
+        height: 3px;
+        position: sticky;
+        top: 0;
+        opacity: 0;
+        transition: opacity 0.3s;
+        &__active {
+            opacity: 1;
+        }
+    }
+}
+
+// override style-rich.css
+:root {
+    --twoslash-docs-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.twoslash {
+    .twoslash-hover {
+        position: static;
+    }
+    .twoslash-popup-docs {
+        max-height: 200px;
+        overflow: auto;
+        font-size: 0.9em;
+        white-space: initial;
+
+        p {
+            margin-bottom: 0.2em;
+        }
+        code {
+            color: #c7254e;
+            background-color: #f9f2f4;
+            padding: 2px 4px;
+            font-size: 90%;
+            border-radius: 4px;
+        }
+        .twoslash-popup-docs-tag-name {
+            font-style: italic;
+        }
+    }
+    .twoslash-popup-container {
+        max-width: 50vw;
+        transform: translateY(-100%);
+    }
+    .twoslash-popup-code {
+        white-space: break-spaces;
+    }
+}

.dumi/theme/builtins/sourceCode/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { useScrollWithShadow } from '../../hooks';
+import './index.less';
+
+export default function SourceCode({ jsx }: { jsx: string }) {
+    const [ref, shadow] = useScrollWithShadow();
+    console.log('shadow:', shadow.top);
+
+    return (
+        <div className="source-code-container" ref={ref}>
+            <div
+                className={classNames(
+                    'source-code-shadow',
+                    shadow.top && 'source-code-shadow__active'
+                )}
+            />
+            <div
+                className={classNames('source-code-content')}
+                dangerouslySetInnerHTML={{ __html: jsx }}
+            />
+        </div>
+    );
+}

.dumi/theme/hooks/index.tsx

@@ -1,8 +1,45 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 const RESPONSIVE_MOBILE = 768;
 
 export function useMobile() {
     const [isMobile] = useState<boolean>(window.innerWidth < RESPONSIVE_MOBILE);
     return isMobile;
 }
+
+export function useScrollWithShadow<E extends HTMLElement>() {
+    const [element, ref] = useState<E | null>(null);
+
+    const [scrollTop, setScrollTop] = useState(0);
+    const [scrollHeight, setScrollHeight] = useState(0);
+    const [clientHeight, setClientHeight] = useState(0);
+
+    useEffect(() => {
+        if (!element) return;
+
+        function scrollHandler(event: Event) {
+            const ele = event.target as E;
+            setScrollTop(ele.scrollTop);
+            setScrollHeight(ele.scrollHeight);
+            setClientHeight(ele.clientHeight);
+        }
+
+        element.addEventListener('scroll', scrollHandler);
+
+        return () => {
+            element.removeEventListener('scroll', scrollHandler);
+        };
+    }, [element]);
+
+    const shadow = useMemo(() => {
+        const isBottom = clientHeight === scrollHeight - scrollTop;
+        const isTop = scrollTop === 0;
+        const isBetween = scrollTop > 0 && clientHeight < scrollHeight - scrollTop;
+        return {
+            top: isBottom || isBetween,
+            bottom: isTop || isBetween,
+        };
+    }, [scrollTop, scrollHeight, clientHeight]);
+
+    return [ref, shadow] as const;
+}

.dumi/theme/plugin.ts

@@ -0,0 +1,176 @@
+import { IApi } from 'dumi';
+import ReactTechStack from 'dumi/dist/techStacks/react';
+import type { ExampleBlockAsset } from 'dumi-assets-types';
+import ts from 'typescript';
+import type { HighlighterCore, ShikiTransformerContextCommon } from 'shiki';
+import type { Element, ElementContent } from 'hast';
+import type { fromMarkdown } from 'mdast-util-from-markdown';
+import type { gfmFromMarkdown } from 'mdast-util-gfm';
+import type { defaultHandlers, toHast } from 'mdast-util-to-hast';
+
+let highlighter: HighlighterCore | null = null;
+async function getHighlighterCore() {
+    if (highlighter) return highlighter;
+    const [
+        { createHighlighterCore, createOnigurumaEngine },
+        wasm,
+        { bundledLanguages },
+        { bundledThemes },
+    ] = await Promise.all([
+        import('shiki'),
+        import('shiki/dist/wasm.mjs'),
+        import('shiki/dist/langs.mjs'),
+        import('shiki/dist/themes.mjs'),
+    ]);
+    highlighter = await createHighlighterCore({
+        themes: [bundledThemes['vitesse-light']],
+        langs: [bundledLanguages['tsx'], bundledLanguages['js'], bundledLanguages['ts']],
+        engine: createOnigurumaEngine(wasm),
+    });
+    return highlighter;
+}
+
+let creatingHighlighterCore = false;
+let listener: Function[] = [];
+async function getShiki() {
+    return new Promise<HighlighterCore['codeToHtml']>((resolve) => {
+        if (!creatingHighlighterCore) {
+            creatingHighlighterCore = true;
+            getHighlighterCore().then(({ codeToHtml }) => {
+                listener.forEach((resolve) => resolve(codeToHtml));
+                listener.length = 0;
+                resolve(codeToHtml);
+                creatingHighlighterCore = false;
+            });
+        } else {
+            listener.push(resolve);
+        }
+    });
+}
+
+class DTReactTech extends ReactTechStack {
+    async generateMetadata(asset: ExampleBlockAsset) {
+        console.time(asset.id);
+        // workaround for esm module
+        const [
+            { transformerTwoslash },
+            codeToHtml,
+            { fromMarkdown },
+            { gfmFromMarkdown },
+            { defaultHandlers, toHast },
+        ] = await Promise.all([
+            import('@shikijs/twoslash'),
+            getShiki(),
+            import('mdast-util-from-markdown'),
+            import('mdast-util-gfm'),
+            import('mdast-util-to-hast'),
+        ]);
+        const handler = {
+            fromMarkdown,
+            gfmFromMarkdown,
+            defaultHandlers,
+            toHast,
+        };
+        Object.entries(asset.dependencies).map(([filename, dep]) => {
+            if (dep.type === 'FILE') {
+                console.time(`${asset.id}--${filename}`);
+                const html = codeToHtml(dep.value, {
+                    lang: 'tsx',
+                    theme: 'vitesse-light',
+                    transformers: [
+                        transformerTwoslash({
+                            twoslashOptions: {
+                                compilerOptions: {
+                                    jsx: ts.JsxEmit.React,
+                                },
+                                handbookOptions: {
+                                    noErrors: true,
+                                },
+                            },
+                            rendererRich: {
+                                renderMarkdown: function (md) {
+                                    return renderMarkdown.call(this, md, handler);
+                                },
+                                renderMarkdownInline: function (md, context) {
+                                    return renderMarkdownInline.call(this, handler, md, context);
+                                },
+                            },
+                        }),
+                    ],
+                });
+                console.timeEnd(`${asset.id}--${filename}`);
+                asset.dependencies[filename] = <any>{ ...dep, jsx: html };
+            }
+        });
+        console.timeEnd(asset.id);
+        return asset;
+    }
+}
+
+const AssetsPlugin = async (api: IApi) => {
+    // 提前先创建 highlighterCore
+    getShiki();
+    api.registerTechStack(() => new DTReactTech());
+
+    // TODO: 应该在 umi 退出的时候销毁，包括 catch 退出
+    api.onDevCompileDone(() => {
+        highlighter?.dispose();
+    });
+};
+
+export default AssetsPlugin;
+
+type Handler = {
+    fromMarkdown: typeof fromMarkdown;
+    gfmFromMarkdown: typeof gfmFromMarkdown;
+    toHast: typeof toHast;
+    defaultHandlers: typeof defaultHandlers;
+};
+/**
+ * refer：https://github.com/shikijs/shiki/blob/main/packages/vitepress-twoslash/src/renderer-floating-vue.ts#L130-L131
+ */
+function renderMarkdown(this: ShikiTransformerContextCommon, md: string, handler: Handler) {
+    const { fromMarkdown, gfmFromMarkdown, toHast, defaultHandlers } = handler;
+    const mdast = fromMarkdown(
+        md.replace(/\{@link ([^}]*)\}/g, '$1'), // replace jsdoc links
+        { mdastExtensions: [gfmFromMarkdown()] }
+    );
+
+    return (
+        toHast(mdast, {
+            handlers: {
+                code: (state, node) => {
+                    const lang = node.lang || '';
+                    if (lang) {
+                        return <Element>{
+                            type: 'element',
+                            tagName: 'code',
+                            properties: {},
+                            children: this.codeToHast(node.value, {
+                                ...this.options,
+                                transformers: [],
+                                lang,
+                                structure: node.value.trim().includes('\n') ? 'classic' : 'inline',
+                            }).children,
+                        };
+                    }
+                    return defaultHandlers.code(state, node);
+                },
+            },
+        }) as Element
+    ).children;
+}
+
+function renderMarkdownInline(
+    this: ShikiTransformerContextCommon,
+    handler: Handler,
+    md: string,
+    context?: string
+): ElementContent[] {
+    if (context === 'tag:param') md = md.replace(/^([\w$-]+)/, '`$1` ');
+
+    const children = renderMarkdown.call(this, md, handler);
+    if (children.length === 1 && children[0].type === 'element' && children[0].tagName === 'p')
+        return children[0].children;
+    return children;
+}