From 8eb6b2378ac936e7c7d89a13bd25fcb1d7647631 Mon Sep 17 00:00:00 2001 From: ocavue Date: Thu, 15 Feb 2024 15:43:09 +0800 Subject: [PATCH] refactor: migrate from shikiji to shiki v1 (#2591) --- README.md | 2 +- composables/{shikiji.ts => shiki.ts} | 16 ++++----- composables/tiptap.ts | 4 +-- .../{shikiji-parser.ts => shiki-parser.ts} | 6 ++-- composables/tiptap/{shikiji.ts => shiki.ts} | 6 ++-- docs/content/1.guide/3.contributing.md | 2 +- package.json | 4 +-- pnpm-lock.yaml | 34 +++++++++---------- 8 files changed, 37 insertions(+), 37 deletions(-) rename composables/{shikiji.ts => shiki.ts} (82%) rename composables/tiptap/{shikiji-parser.ts => shiki-parser.ts} (83%) rename composables/tiptap/{shikiji.ts => shiki.ts} (70%) diff --git a/README.md b/README.md index cfe2c2a0..0a37b5d5 100644 --- a/README.md +++ b/README.md @@ -152,7 +152,7 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript -- [shikiji](https://shikiji.netlify.app/) - A beautiful and powerful syntax highlighter +- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API ## 👨‍💻 Contributors diff --git a/composables/shikiji.ts b/composables/shiki.ts similarity index 82% rename from composables/shikiji.ts rename to composables/shiki.ts index be620e4f..f487a096 100644 --- a/composables/shikiji.ts +++ b/composables/shiki.ts @@ -1,13 +1,13 @@ -import { type Highlighter, type BuiltinLanguage as Lang } from 'shikiji' +import type { Highlighter, BuiltinLanguage as Lang } from 'shiki' const highlighter = ref() const registeredLang = ref(new Map()) -let shikijiImport: Promise | undefined +let shikiImport: Promise | undefined export function useHighlighter(lang: Lang): { promise?: Promise; highlighter?: Highlighter } { - if (!shikijiImport) { - shikijiImport = import('shikiji') + if (!shikiImport) { + shikiImport = import('shiki') .then(async ({ getHighlighter }) => { highlighter.value = await getHighlighter({ themes: [ @@ -22,11 +22,11 @@ export function useHighlighter(lang: Lang): { promise?: Promise; highlight }) }) - return { promise: shikijiImport } + return { promise: shikiImport } } if (!highlighter.value) - return { promise: shikijiImport } + return { promise: shikiImport } if (!registeredLang.value.get(lang)) { const promise = highlighter.value.loadLanguage(lang) @@ -45,7 +45,7 @@ export function useHighlighter(lang: Lang): { promise?: Promise; highlight return { highlighter: highlighter.value } } -function useShikijiTheme() { +function useShikiTheme() { return useColorMode().value === 'dark' ? 'vitesse-dark' : 'vitesse-light' } @@ -68,6 +68,6 @@ export function highlightCode(code: string, lang: Lang) { return highlighter.codeToHtml(code, { lang, - theme: useShikijiTheme(), + theme: useShikiTheme(), }) } diff --git a/composables/tiptap.ts b/composables/tiptap.ts index dd629937..da7c42bb 100644 --- a/composables/tiptap.ts +++ b/composables/tiptap.ts @@ -14,7 +14,7 @@ import { Plugin } from 'prosemirror-state' import type { Ref } from 'vue' import { TiptapEmojiSuggestion, TiptapHashtagSuggestion, TiptapMentionSuggestion } from './tiptap/suggestion' -import { TiptapPluginCodeBlockShikiji } from './tiptap/shikiji' +import { TiptapPluginCodeBlockShiki } from './tiptap/shiki' import { TiptapPluginCustomEmoji } from './tiptap/custom-emoji' import { TiptapPluginEmoji } from './tiptap/emoji' @@ -70,7 +70,7 @@ export function useTiptap(options: UseTiptapOptions) { Placeholder.configure({ placeholder: () => placeholder.value!, }), - TiptapPluginCodeBlockShikiji, + TiptapPluginCodeBlockShiki, History.configure({ depth: 10, }), diff --git a/composables/tiptap/shikiji-parser.ts b/composables/tiptap/shiki-parser.ts similarity index 83% rename from composables/tiptap/shikiji-parser.ts rename to composables/tiptap/shiki-parser.ts index 8aa48808..b752e196 100644 --- a/composables/tiptap/shikiji-parser.ts +++ b/composables/tiptap/shiki-parser.ts @@ -1,9 +1,9 @@ -import { type Parser, createParser } from 'prosemirror-highlight/shikiji' -import type { BuiltinLanguage } from 'shikiji/langs' +import { type Parser, createParser } from 'prosemirror-highlight/shiki' +import type { BuiltinLanguage } from 'shiki' let parser: Parser | undefined -export const shikijiParser: Parser = (options) => { +export const shikiParser: Parser = (options) => { const lang = options.language ?? 'text' // Register the language if it's not yet registered diff --git a/composables/tiptap/shikiji.ts b/composables/tiptap/shiki.ts similarity index 70% rename from composables/tiptap/shikiji.ts rename to composables/tiptap/shiki.ts index 30f3c536..ca59060d 100644 --- a/composables/tiptap/shikiji.ts +++ b/composables/tiptap/shiki.ts @@ -2,10 +2,10 @@ import CodeBlock from '@tiptap/extension-code-block' import { VueNodeViewRenderer } from '@tiptap/vue-3' import { createHighlightPlugin } from 'prosemirror-highlight' -import { shikijiParser } from './shikiji-parser' +import { shikiParser } from './shiki-parser' import TiptapCodeBlock from '~/components/tiptap/TiptapCodeBlock.vue' -export const TiptapPluginCodeBlockShikiji = CodeBlock.extend({ +export const TiptapPluginCodeBlockShiki = CodeBlock.extend({ addOptions() { return { ...this.parent?.(), @@ -15,7 +15,7 @@ export const TiptapPluginCodeBlockShikiji = CodeBlock.extend({ addProseMirrorPlugins() { return [ - createHighlightPlugin({ parser: shikijiParser, nodeTypes: ['codeBlock'] }), + createHighlightPlugin({ parser: shikiParser, nodeTypes: ['codeBlock'] }), ] }, diff --git a/docs/content/1.guide/3.contributing.md b/docs/content/1.guide/3.contributing.md index 17db5d8a..fcd1efcc 100644 --- a/docs/content/1.guide/3.contributing.md +++ b/docs/content/1.guide/3.contributing.md @@ -49,5 +49,5 @@ nr test - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript -- [shikiji](https://shikiji.netlify.app/) - A beautiful and powerful syntax highlighter +- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API diff --git a/package.json b/package.json index ae6011b4..648b27c4 100644 --- a/package.json +++ b/package.json @@ -88,9 +88,9 @@ "page-lifecycle": "^0.1.2", "pinia": "^2.1.4", "postcss-nested": "^6.0.1", - "prosemirror-highlight": "^0.4.0", + "prosemirror-highlight": "^0.5.0", "rollup-plugin-node-polyfills": "^0.2.1", - "shikiji": "^0.9.9", + "shiki": "^1.0.0", "simple-git": "^3.19.1", "slimeform": "^0.9.1", "stale-dep": "^0.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 547933be..e7e78065 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -186,14 +186,14 @@ importers: specifier: ^6.0.1 version: 6.0.1(postcss@8.4.32) prosemirror-highlight: - specifier: ^0.4.0 - version: 0.4.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shikiji@0.9.9) + specifier: ^0.5.0 + version: 0.5.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shiki@1.1.2) rollup-plugin-node-polyfills: specifier: ^0.2.1 version: 0.2.1 - shikiji: - specifier: ^0.9.9 - version: 0.9.9 + shiki: + specifier: ^1.0.0 + version: 1.1.2 simple-git: specifier: ^3.19.1 version: 3.21.0 @@ -4112,6 +4112,10 @@ packages: requiresBuild: true optional: true + /@shikijs/core@1.1.2: + resolution: {integrity: sha512-ERVzNQz88ZkDqUpWeC57Kp+Kmx5RjqeDBR1M8AGWGom4yrkITiTfXCGmjchlDSw12MhDTuPYR4HVFW8uT61RaQ==} + dev: false + /@sigstore/bundle@2.1.0: resolution: {integrity: sha512-89uOo6yh/oxaU8AeOUnVrTdVMcGk9Q1hJa7Hkvalc6G3Z3CupWk4Xe9djSgJm9fMkH69s0P0cVHUoKSOemLdng==} engines: {node: ^16.14.0 || >=18.0.0} @@ -12113,8 +12117,8 @@ packages: prosemirror-view: 1.32.7 dev: false - /prosemirror-highlight@0.4.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shikiji@0.9.9): - resolution: {integrity: sha512-RHGi5QjcWnWgn6bMkjbC2+ehv9Piv3D5UN/dNJG2r738NCQCFye0dkFa6c1oURsvUuwpFiQREqp1YYGpGbZOuA==} + /prosemirror-highlight@0.5.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shiki@1.1.2): + resolution: {integrity: sha512-jGj2E3WHoh6N85nlCyjjpFNsv3a6pvMXVpiz9hJfHDYmUtnSyWZNXB0rQabHOKdBYfynsbhy1SUiRRNdni0woA==} peerDependencies: '@types/hast': ^3.0.0 highlight.js: ^11.9.0 @@ -12124,8 +12128,8 @@ packages: prosemirror-transform: ^1.8.0 prosemirror-view: ^1.32.4 refractor: ^4.8.1 - shiki: ^0.14.0 - shikiji: ^0.8.0 || ^0.9.0 + shiki: ^1.0.0 + shikiji: ^0.8.0 || ^0.9.0 || ^0.10.0 peerDependenciesMeta: '@types/hast': optional: true @@ -12151,7 +12155,7 @@ packages: prosemirror-model: 1.19.4 prosemirror-state: 1.4.3 prosemirror-view: 1.32.7 - shikiji: 0.9.9 + shiki: 1.1.2 dev: false /prosemirror-history@1.3.2: @@ -12939,14 +12943,10 @@ packages: resolution: {integrity: sha512-e+/aueHx0YeIEut6RXC6K8gSf0PykwZiHD7q7AHtpTW8Kd8TpFUIWqTwhAnrGjOyOMyrwv+syr5WPagMpDpVYQ==} dev: true - /shikiji-core@0.9.9: - resolution: {integrity: sha512-qu5Qq7Co6JIMY312J9Ek6WYjXieeyJT/fIqmkcjF4MdnMNlUnhSqPo8/42g5UdPgdyTCwijS7Nhg8DfLSLodkg==} - dev: false - - /shikiji@0.9.9: - resolution: {integrity: sha512-/S3unr/0mZTstNOuAmNDEufeimtqeQb8lXvPMLsYfDvqyfmG6334bO2xmDzD0kfxH2y8gnFgSWAJpdEzksmYXg==} + /shiki@1.1.2: + resolution: {integrity: sha512-qNzFwTv5uhEDNUIwp7wHjsrffVeLbmOgWnM5mZZhoiz7G2qAUvqVfUzuWfieD45/YAKipzCtdV9SndacKtABow==} dependencies: - shikiji-core: 0.9.9 + '@shikijs/core': 1.1.2 dev: false /side-channel@1.0.4: