-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: 微调 fix(theme): 修复 twoslash 配置 chore: 删除注释
- Loading branch information
1 parent
4a1ecf6
commit a2df2f3
Showing
19 changed files
with
1,537 additions
and
510 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # README | ||
|
|
||
| 代码来自这里：[vitepress-twoslash](https://github.com/shikijs/shiki/tree/main/packages/vitepress-twoslash) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import type { App } from 'vue' | ||
| import FloatingVue, { recomputeAllPoppers } from 'floating-vue' | ||
| import 'floating-vue/dist/style.css' | ||
|
|
||
| const isMobile = | ||
| typeof navigator !== 'undefined' && | ||
| /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( | ||
| navigator.userAgent | ||
| ) | ||
|
|
||
| export type FloatingVueConfig = Parameters<(typeof FloatingVue)['install']>[1] | ||
|
|
||
| /** | ||
| * Vue plugin to install FloatingVue with styles. | ||
| * | ||
| * Import this function in `.vitepress/theme/index.ts` and use `app.use(TwoslashFloatingVue)` inside the `enhanceApp` hook. | ||
| */ | ||
| const TwoslashFloatingVue = { | ||
| install: (app: App, options: FloatingVueConfig = {}) => { | ||
| if (typeof window !== 'undefined') { | ||
| // Recompute poppers when clicking on a tab | ||
| window.addEventListener( | ||
| 'click', | ||
| e => { | ||
| const path = e.composedPath() | ||
| if ( | ||
| path.some( | ||
| (el: any) => | ||
| el?.classList?.contains?.('vp-code-group') || | ||
| el?.classList?.contains?.('tabs') | ||
| ) | ||
| ) { | ||
| recomputeAllPoppers() | ||
| } | ||
| }, | ||
| { passive: true } | ||
| ) | ||
| } | ||
|
|
||
| app.use(FloatingVue, { | ||
| ...options, | ||
| themes: { | ||
| twoslash: { | ||
| $extend: 'dropdown', | ||
| triggers: isMobile ? ['touch'] : ['hover', 'touch'], | ||
| popperTriggers: isMobile ? ['touch'] : ['hover', 'touch'], | ||
| placement: 'bottom-start', | ||
| overflowPadding: 10, | ||
| delay: 0, | ||
| handleResize: false, | ||
| autoHide: true, | ||
| instantMove: true, | ||
| flip: false, | ||
| arrowPadding: 8, | ||
| autoBoundaryMaxSize: true, | ||
| }, | ||
| 'twoslash-query': { | ||
| $extend: 'twoslash', | ||
| triggers: ['click'], | ||
| popperTriggers: ['click'], | ||
| autoHide: false, | ||
| }, | ||
| 'twoslash-completion': { | ||
| $extend: 'twoslash-query', | ||
| triggers: ['click'], | ||
| popperTriggers: ['click'], | ||
| autoHide: false, | ||
| distance: 0, | ||
| arrowOverflow: true, | ||
| }, | ||
| ...options.theme, | ||
| }, | ||
| }) | ||
| }, | ||
| } | ||
|
|
||
| export default TwoslashFloatingVue |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| /* eslint-disable node/prefer-global/process */ | ||
| import type { TransformerTwoslashOptions } from '@shikijs/twoslash/core' | ||
| import { createTransformerFactory } from '@shikijs/twoslash/core' | ||
| import type { VueSpecificOptions } from 'twoslash-vue' | ||
| import { createTwoslasher } from 'twoslash-vue' | ||
| import type { ShikiTransformer } from 'shiki' | ||
| import { removeTwoslashNotations } from 'twoslash' | ||
|
|
||
| import type { TwoslashFloatingVueRendererOptions } from './renderer-floating-vue' | ||
| import { rendererFloatingVue } from './renderer-floating-vue' | ||
|
|
||
| export * from './renderer-floating-vue' | ||
|
|
||
| interface TransformerTwoslashVueOptions extends TransformerTwoslashOptions { | ||
| twoslashOptions?: TransformerTwoslashOptions['twoslashOptions'] & | ||
| VueSpecificOptions | ||
| } | ||
|
|
||
| export interface VitePressPluginTwoslashOptions | ||
| extends TransformerTwoslashVueOptions, | ||
| TwoslashFloatingVueRendererOptions { | ||
| /** | ||
| * Requires adding `twoslash` to the code block explicitly to run twoslash | ||
| * @default true | ||
| */ | ||
| explicitTrigger?: TransformerTwoslashOptions['explicitTrigger'] | ||
| } | ||
|
|
||
| /** | ||
| * Create a Shiki transformer for VitePress to enable twoslash integration | ||
| * | ||
| * Add this to `markdown.codeTransformers` in `.vitepress/config.ts` | ||
| */ | ||
| export function transformerTwoslash( | ||
| options: VitePressPluginTwoslashOptions = {} | ||
| ): ShikiTransformer { | ||
| const { explicitTrigger = true } = options | ||
|
|
||
| const onError = (error: any, code: string) => { | ||
| const isCI = typeof process !== 'undefined' && process?.env?.CI | ||
| const isDev = | ||
| typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development' | ||
| const shouldThrow = | ||
| (options.throws || isCI || !isDev) && options.throws !== false | ||
| console.error( | ||
| `\n\n--------\nTwoslash error in code:\n--------\n${code.split(/\n/g).slice(0, 15).join('\n').trim()}\n--------\n` | ||
| ) | ||
| if (shouldThrow) { | ||
| throw error | ||
| } else { | ||
| console.error(error) | ||
| } | ||
| return removeTwoslashNotations(code) | ||
| } | ||
|
|
||
| const twoslash = createTransformerFactory( | ||
| createTwoslasher(options.twoslashOptions) | ||
| )({ | ||
| langs: ['ts', 'tsx', 'js', 'jsx', 'json', 'vue'], | ||
| renderer: rendererFloatingVue(options), | ||
| onTwoslashError: onError, | ||
| onShikiError: onError, | ||
| ...options, | ||
| explicitTrigger, | ||
| }) | ||
|
|
||
| const trigger = | ||
| explicitTrigger instanceof RegExp ? explicitTrigger : /\btwoslash\b/ | ||
|
|
||
| return { | ||
| ...twoslash, | ||
| name: '@shikijs/vuepress-twoslash', | ||
| preprocess(code, options) { | ||
| const cleanup = options.transformers?.find( | ||
| i => i.name === 'vuepress:clean-up' | ||
| ) | ||
| if (cleanup) { | ||
| options.transformers?.splice(options.transformers.indexOf(cleanup), 1) | ||
| } | ||
|
|
||
| // Disable v-pre for twoslash, because we need render it with FloatingVue | ||
| // 自己添加 :no-v-pre | ||
| if (!explicitTrigger || options.meta?.__raw?.match(trigger)) { | ||
| const vPre = options.transformers?.find( | ||
| i => i.name === 'vuepress:v-pre' | ||
| ) | ||
| if (vPre) { | ||
| options.transformers?.splice(options.transformers.indexOf(vPre), 1) | ||
| } | ||
| } | ||
|
|
||
| return twoslash.preprocess!.call(this, code, options) | ||
| }, | ||
| postprocess(html) { | ||
| if (this.meta.twoslash) { | ||
| return html.replace(/\{/g, '{') | ||
| } | ||
| }, | ||
| } | ||
| } |
Oops, something went wrong.