chore: bump typescript's version to latest

Author: mortalYoung

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

@@ -1,19 +1,45 @@
+@import "~@shikijs/twoslash/style-rich.css";
+
 .source-code {
     &-container {
         position: relative;
-    }
-
-    &-content {
         max-height: 400px;
-        padding: 24px 20px;
         overflow: auto;
     }
-
+    &-content {
+        padding: 12px 24px;
+        > pre {
+            overflow: visible;
+        }
+    }
     &-shadow {
         box-shadow: inset 0 6px 6px -6px #00000029;
         width: 100%;
         height: 3px;
-        position: absolute;
+        position: sticky;
         top: 0;
+        opacity: 0;
+        transition: opacity 0.3s;
+        &__active {
+            opacity: 1;
+        }
+    }
+}
+
+// override style-rich.css
+.twoslash {
+    .twoslash-hover {
+        position: static;
+    }
+    .twoslash-popup-docs {
+        max-height: 200px;
+        overflow: auto;
+    }
+    .twoslash-popup-container {
+        max-width: 50vw;
+        transform: translateY(-100%);
+    }
+    .twoslash-popup-code {
+        white-space: break-spaces;
     }
 }

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

@@ -1,16 +1,22 @@
 import React from 'react';
-import { useScrollWithShadow } from '../../hooks';
 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">
-            {shadow.top && <div className="source-code-shadow" />}
+        <div className="source-code-container" ref={ref}>
+            <div
+                className={classNames(
+                    'source-code-shadow',
+                    shadow.top && 'source-code-shadow__active'
+                )}
+            />
             <div
-                ref={ref}
                 className={classNames('source-code-content')}
                 dangerouslySetInnerHTML={{ __html: jsx }}
             />

.dumi/theme/plugin.ts

@@ -1,18 +1,30 @@
 import { IApi } from 'dumi';
 import ReactTechStack from 'dumi/dist/techStacks/react';
 import type { ExampleBlockAsset } from 'dumi-assets-types';
+import ts from 'typescript';
 
 class DTReactTech extends ReactTechStack {
     async generateMetadata(asset: ExampleBlockAsset) {
         // workaround for esm module
-        // const { transformerTwoslash } = await import('@shikijs/twoslash');
+        const { transformerTwoslash } = await import('@shikijs/twoslash');
         const { codeToHtml } = await import('shiki');
         for (const [filename, dep] of Object.entries(asset.dependencies)) {
-            if (dep.type === 'FILE') {
+            if (dep.type === 'FILE' && asset.id === 'blockheader-demo-basic') {
                 const html = await codeToHtml(dep.value, {
-                    lang: 'ts',
+                    lang: 'tsx',
                     theme: 'vitesse-light',
-                    // transformers: [transformerTwoslash()],
+                    transformers: [
+                        transformerTwoslash({
+                            twoslashOptions: {
+                                compilerOptions: {
+                                    jsx: ts.JsxEmit.React,
+                                },
+                                handbookOptions: {
+                                    noErrors: true,
+                                },
+                            },
+                        }),
+                    ],
                 });
 
                 asset.dependencies[filename] = <any>{ ...dep, jsx: html };

.dumi/theme/slots/PreviewerActions/index.less

@@ -1,20 +1,21 @@
+import React, { type FC, type ReactNode, useRef, useState } from 'react';
 import { ReactComponent as IconCheck } from '@ant-design/icons-svg/inline-svg/outlined/check.svg';
 import { ReactComponent as IconCodeSandbox } from '@ant-design/icons-svg/inline-svg/outlined/code-sandbox.svg';
 import { ReactComponent as IconSketch } from '@ant-design/icons-svg/inline-svg/outlined/sketch.svg';
 import { ReactComponent as IconStackBlitz } from '@ant-design/icons-svg/inline-svg/outlined/thunderbolt.svg';
 import {
     getSketchJSON,
+    type IPreviewerProps,
     openCodeSandbox,
     openStackBlitz,
     useIntl,
-    type IPreviewerProps,
 } from 'dumi';
-import SourceCode from '../../builtins/sourceCode';
 import PreviewerActionsExtra from 'dumi/theme-default/slots/PreviewerActionsExtra';
 import Tabs from 'rc-tabs';
-import React, { useRef, useState, type FC, type ReactNode } from 'react';
 import useClippy from 'use-clippy';
-import './index.less';
+
+import SourceCode from '../../builtins/sourceCode';
+import 'dumi/theme-default/slots/PreviewerActions/index.less';
 export interface IPreviewerActionsProps extends IPreviewerProps {
     /**
      * disabled actions
@@ -55,7 +56,6 @@ const PreviewerActions: FC<IPreviewerActionsProps> = (props) => {
     const copyTimer = useRef<number>();
     const [isCopied, setIsCopied] = useState(false);
     const isSingleFile = files.length === 1;
-    const lang = (files[activeKey][0].match(/\.([^.]+)$/)?.[1] || 'text') as any;
 
     console.log('files[activeKey][1]:', files[activeKey][1]);
 

.dumi/theme/slots/PreviewerActions/index.tsx

@@ -23,5 +23,4 @@ export default defineConfig({
             },
         ],
     ],
-    clickToComponent: {},
 });

.dumirc.ts

@@ -1,2 +1,3 @@
 
 .dumi/tmp
+.dumi/tmp-production

.eslintignore

@@ -1,3 +1,4 @@
 /dist
 *.yaml
-.dumi/tmp
+.dumi/tmp
+.dumi/tmp-production

.prettierignore

@@ -1 +1,2 @@
-.dumi/tmp
+.dumi/tmp
+.dumi/tmp-production