docs: add twoslash support and improve code rendering

ryanuo · ryanuo · commit 834103fb610d · 2025-05-19T03:11:07.000+08:00
- Add twoslash code transformer for improved TypeScript code rendering
- Update Markdown files to use twoslash syntax for code examples
- Add custom theme to support twoslash floating window
- Update package.json to include new dependencies
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -3,6 +3,7 @@ import process from 'node:process'
 import dotenv from 'dotenv'
 import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 import typedocSidebar from '../api/typedoc-sidebar.json'
 import { version } from '../../package.json'
 import { transDocsJson } from './utils'
@@ -54,6 +55,15 @@ export default defineConfig({
       },
     },
   },
+  markdown: {
+    codeTransformers: [
+      transformerTwoslash(),
+    ] as any,
+    theme: {
+      light: 'vitesse-light',
+      dark: 'vitesse-dark',
+    },
+  },
 })
 
 function getSearchConfig(env: NodeJS.ProcessEnv): DefaultTheme.Config['search'] {
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,12 @@
+import type { EnhanceAppContext } from 'vitepress'
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import Theme from 'vitepress/theme'
+
+import '@shikijs/vitepress-twoslash/style.css'
+
+export default {
+  extends: Theme,
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.use(TwoslashFloatingVue as any)
+  },
+}
diff --git a/docs/api/algorithm/functions/binarySearch.md b/docs/api/algorithm/functions/binarySearch.md
@@ -30,7 +30,7 @@ function binarySearch(arr, target): number;
 
 ## Example
 
-```ts
+```ts twoslash
 import { binarySearch } from '@ryanuo/utils'
 const index = binarySearch([1, 2, 3, 4, 5], 3)
 console.log(index)  // 2
diff --git a/docs/api/algorithm/functions/bubbleSort.md b/docs/api/algorithm/functions/bubbleSort.md
@@ -24,7 +24,7 @@ function bubbleSort(arr): number[];
 
 ## Example
 
-```ts
+```ts twoslash
 import { bubbleSort } from '@ryanuo/utils'
 const sorted = bubbleSort([5, 3, 8, 4, 2])
 console.log(sorted)  // [2, 3, 4, 5, 8]
diff --git a/docs/api/algorithm/functions/fibonacciDP.md b/docs/api/algorithm/functions/fibonacciDP.md
@@ -24,7 +24,7 @@ function fibonacciDP(n): number;
 
 ## Example
 
-```ts
+```ts twoslash
 import { fibonacciDP } from '@ryanuo/utils'
 console.log(fibonacciDP(10))  // 55
 ```
diff --git a/docs/api/algorithm/functions/fibonacciRecursive.md b/docs/api/algorithm/functions/fibonacciRecursive.md
@@ -24,7 +24,7 @@ function fibonacciRecursive(n): number;
 
 ## Example
 
-```ts
+```ts twoslash
 import { fibonacciRecursive } from '@ryanuo/utils'
 console.log(fibonacciRecursive(10))  // 55
 ```
diff --git a/docs/api/algorithm/functions/isPrime.md b/docs/api/algorithm/functions/isPrime.md
@@ -24,7 +24,7 @@ function isPrime(num): boolean;
 
 ## Example
 
-```ts
+```ts twoslash
 import { isPrime } from '@ryanuo/utils'
 console.log(isPrime(11))  // true
 console.log(isPrime(15))  // false
diff --git a/docs/api/algorithm/functions/quickSort.md b/docs/api/algorithm/functions/quickSort.md
@@ -24,7 +24,7 @@ function quickSort(arr): number[];
 
 ## Example
 
-```ts
+```ts twoslash
 import { quickSort } from '@ryanuo/utils'
 const sorted = quickSort([5, 3, 8, 4, 2])
 console.log(sorted)  // [2, 3, 4, 5, 8]
diff --git a/docs/api/browser/functions/getUrlParams.md b/docs/api/browser/functions/getUrlParams.md
@@ -24,7 +24,7 @@ An object of parsed parameters
 
 ## Example
 
-```ts
+```ts twoslash
 import { getUrlParams } from '@ryanuo/utils'
 getUrlParams() // { a: '1', b: '2' }
 ```
diff --git a/docs/api/browser/functions/getUrlParamsString.md b/docs/api/browser/functions/getUrlParamsString.md
@@ -28,7 +28,7 @@ The URL to which parameters will be added, defaults to the current page URL
 
 ## Example
 
-```ts
+```ts twoslash
 import { getUrlParamsString } from '@ryanuo/utils'
 getUrlParamsString({ a: 1, b: 2 }) // '?a=1&b=2'
 getUrlParamsString({ a: 1, b: 2 }, 'https://www.example.com')
diff --git a/docs/api/browser/functions/isMobile.md b/docs/api/browser/functions/isMobile.md
@@ -16,7 +16,7 @@ Returns true if the user appears to be using a mobile device; otherwise returns
 
 ## Example
 
-```ts
+```ts twoslash
 import { isMobile } from '@ryanuo/utils'
 if (isMobile()) {
   console.log('This is a mobile device.')
diff --git a/docs/api/browser/functions/manageClasses.md b/docs/api/browser/functions/manageClasses.md
@@ -37,7 +37,7 @@ function manageClasses(
 
 ## Example
 
-```ts
+```ts twoslash
 import { manageClasses } from '@ryanuo/utils'
 const el = document.getElementById('myElement')
 manageClasses(el, 'add', ['class1', 'class2'])
diff --git a/docs/api/browser/functions/onceEventListener.md b/docs/api/browser/functions/onceEventListener.md
@@ -37,7 +37,7 @@ function onceEventListener(
 
 ## Example
 
-```ts
+```ts twoslash
 import { once } from '@ryanuo/utils'
 once(document, 'click', (e) => {
   console.log(e)
diff --git a/docs/api/common/functions/curry.md b/docs/api/common/functions/curry.md
@@ -32,7 +32,7 @@ Returns a curried function capable of gradually receiving arguments until the or
 
 ## Example
 
-```ts
+```ts twoslash
 import { curry } from '@ryanuo/utils'
 const add = (a: number, b: number) => a + b
 const curriedAdd = curry(add)
diff --git a/docs/api/common/functions/debounce.md b/docs/api/common/functions/debounce.md
@@ -59,7 +59,7 @@ Returns a new debounced function.
 
 ## Example
 
-```ts
+```ts twoslash
 import { debounce } from '@ryanuo/utils'
 const debouncedFn = debounce(() => {
   console.log('Debounced function executed')
diff --git a/docs/api/common/functions/deepClone.md b/docs/api/common/functions/deepClone.md
@@ -28,7 +28,7 @@ function deepClone<T>(obj): T;
 
 ## Example
 
-```ts
+```ts twoslash
 import { deepClone } from '@ryanuo/utils'
 const obj = { a: 1, b: { c: 2 } }
 const cloneObj = deepClone(obj)
diff --git a/docs/api/common/functions/getTypeName.md b/docs/api/common/functions/getTypeName.md
@@ -24,7 +24,7 @@ The type name of the value
 
 ## Example
 
-```ts
+```ts twoslash
 import { getTypeName } from '@ryanuo/utils'
 getTypeName({}) // 'object'
 getTypeName([]) // 'array'
diff --git a/docs/api/common/functions/getUuid.md b/docs/api/common/functions/getUuid.md
@@ -18,7 +18,7 @@ The generated UUID string in the format 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
 
 ## Example
 
-```ts
+```ts twoslash
 import { getUuid } from '@ryanuo/utils'
 console.log(getUuid()) // xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
 ```
diff --git a/docs/api/common/functions/isBoolean.md b/docs/api/common/functions/isBoolean.md
@@ -24,7 +24,7 @@ Whether the value is a boolean
 
 ## Example
 
-```ts
+```ts twoslash
 import { isBoolean } from '@ryanuo/utils'
 isBoolean(true) // true
 isBoolean(false) // true
diff --git a/docs/api/common/functions/isBrowser.md b/docs/api/common/functions/isBrowser.md
@@ -16,7 +16,7 @@ Whether the current environment is a browser
 
 ## Example
 
-```ts
+```ts twoslash
 import { isBrowser } from '@ryanuo/utils'
 isBrowser() // true
 ```
diff --git a/docs/api/common/functions/isDate.md b/docs/api/common/functions/isDate.md
@@ -24,7 +24,7 @@ Whether the value is an date
 
 ## Example
 
-```ts
+```ts twoslash
 import { isDate } from '@ryanuo/utils'
 isDate(new Date()) // true
 isDate('2023-01-01') // false
diff --git a/docs/api/common/functions/isEmptyObject.md b/docs/api/common/functions/isEmptyObject.md
@@ -20,7 +20,7 @@ Check if an object is empty.
 
 ## Example
 
-```ts
+```ts twoslash
 import { isEmptyObject } from '@ryanuo/utils'
 isEmptyObject({}) // true
 isEmptyObject([]) // true
diff --git a/docs/api/common/functions/isFunction.md b/docs/api/common/functions/isFunction.md
@@ -30,7 +30,7 @@ Whether the value is a function
 
 ## Example
 
-```ts
+```ts twoslash
 import { isFunction } from '@ryanuo/utils'
 isFunction(() => {}) // true
 isFunction(123) // false
diff --git a/docs/api/common/functions/isNull.md b/docs/api/common/functions/isNull.md
@@ -24,7 +24,7 @@ Whether the value is an null
 
 ## Example
 
-```ts
+```ts twoslash
 import { isNull } from '@ryanuo/utils'
 isNull(null) // true
 isNull(undefined) // false
diff --git a/docs/api/common/functions/isNumber.md b/docs/api/common/functions/isNumber.md
@@ -24,7 +24,7 @@ Whether the value is a number
 
 ## Example
 
-```ts
+```ts twoslash
 import { isNumber } from '@ryanuo/utils'
 isNumber(123) // true
 isNumber('123') // false
diff --git a/docs/api/common/functions/isObject.md b/docs/api/common/functions/isObject.md
@@ -24,7 +24,7 @@ Whether the value is an object
 
 ## Example
 
-```ts
+```ts twoslash
 import { isObject } from '@ryanuo/utils'
 isObject({}) // true
 isObject([]) // false
diff --git a/docs/api/common/functions/isRegExp.md b/docs/api/common/functions/isRegExp.md
@@ -24,7 +24,7 @@ Whether the value is an regexp
 
 ## Example
 
-```ts
+```ts twoslash
 import { isRegExp } from '@ryanuo/utils'
 isRegExp(/test/) // true
 isRegExp('test') // false
diff --git a/docs/api/common/functions/isString.md b/docs/api/common/functions/isString.md
@@ -24,7 +24,7 @@ Whether the value is an string
 
 ## Example
 
-```ts
+```ts twoslash
 import { isString } from '@ryanuo/utils'
 isString('123') // true
 isString(123) // false
diff --git a/docs/api/common/functions/isUndefined.md b/docs/api/common/functions/isUndefined.md
@@ -24,7 +24,7 @@ Whether the value is an undefined
 
 ## Example
 
-```ts
+```ts twoslash
 import { isUndefined } from '@ryanuo/utils'
 isUndefined(undefined) // true
 isUndefined(null) // false
diff --git a/docs/api/common/functions/numberToFixed.md b/docs/api/common/functions/numberToFixed.md
@@ -30,7 +30,7 @@ The converted number with the specified number of decimal places.
 
 ## Example
 
-```ts
+```ts twoslash
 import { numberToFixed } from '@ryanuo/utils'
 numberToFixed(1.23456) // 1.2346
 numberToFixed(1.23456, 2) // 1.23
diff --git a/docs/api/common/functions/safeJSONParse.md b/docs/api/common/functions/safeJSONParse.md
@@ -24,7 +24,7 @@ A successfully parsed JSON object, or null if parsing fails
 
 ## Example
 
-```ts
+```ts twoslash
 import { safeParseJSON } from '@ryanuo/utils'
 const json = '{"name": "John", "age": 30}'
 const obj = safeParseJSON(json)
diff --git a/docs/api/common/functions/toString.md b/docs/api/common/functions/toString.md
@@ -24,7 +24,7 @@ The string representation of the value
 
 ## Example
 
-```ts
+```ts twoslash
 import { toString } from '@ryanuo/utils'
 toString({}) // '[object Object]'
 ```
diff --git a/docs/api/finance/classes/CalculatorChain.md b/docs/api/finance/classes/CalculatorChain.md
@@ -10,7 +10,7 @@
 
 ## Example
 
-```ts
+```ts twoslash
 import { chain } from '@ryanuo/utils'
 chain(100)
   .add(10)
diff --git a/docs/api/network/functions/getIndexedDBCache.md b/docs/api/network/functions/getIndexedDBCache.md
@@ -36,7 +36,7 @@ IndexedDB 缓存对象
 
 ## Example
 
-```ts
+```ts twoslash
 // 使用示例
 const cache = await getIndexedDBCache('api-cache', 'responses');
 await cache.set('users', [{ id: 1, name: 'Alice' }]);
diff --git a/docs/package.json b/docs/package.json
@@ -11,6 +11,8 @@
     "update": "pnpm run predocs:dev && cd ../ && pnpm run readme"
   },
   "devDependencies": {
+    "@ryanuo/utils": "workspace:*",
+    "@shikijs/vitepress-twoslash": "catalog:docs",
     "dotenv": "catalog:docs",
     "typedoc": "catalog:docs",
     "typedoc-plugin-markdown": "catalog:docs",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
diff --git a/src/algorithm/index.ts b/src/algorithm/index.ts
diff --git a/src/browser/element.ts b/src/browser/element.ts
diff --git a/src/browser/url.ts b/src/browser/url.ts
diff --git a/src/common/base.ts b/src/common/base.ts
diff --git a/src/common/is.ts b/src/common/is.ts
diff --git a/src/common/tools.ts b/src/common/tools.ts
diff --git a/src/finance/calculator.ts b/src/finance/calculator.ts
diff --git a/src/network/http.ts b/src/network/http.ts
