From 04af9f6925f67191023ea3fa52b90df6c4667fa6 Mon Sep 17 00:00:00 2001 From: Christian Preston Date: Thu, 14 Mar 2024 12:20:59 -0400 Subject: [PATCH 1/2] feat: use `nuxt-shiki` --- package.json | 4 ++-- pnpm-lock.yaml | 17 ++++++++++++++--- src/module.ts | 32 +++++++++++--------------------- src/runtime/highlighter/shiki.ts | 12 ++++-------- 4 files changed, 31 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index d4520a4..5d4d9e3 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "hast-util-to-string": "^3.0.0", "mdast-util-to-hast": "^13.1.0", "micromark-util-sanitize-uri": "^2.0.0", + "nuxt-shiki": "^0.2.1", "ohash": "^1.1.3", "parse5": "^7.1.2", "pathe": "^1.1.2", @@ -95,8 +96,7 @@ "ufo": "^1.4.0", "unified": "^11.0.4", "unist-builder": "^4.0.0", - "unist-util-visit": "^5.0.0", - "unwasm": "^0.3.7" + "unist-util-visit": "^5.0.0" }, "devDependencies": { "@nuxt/devtools": "latest", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4820d1b..4ae7b73 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ importers: micromark-util-sanitize-uri: specifier: ^2.0.0 version: 2.0.0 + nuxt-shiki: + specifier: ^0.2.1 + version: 0.2.1(rollup@3.29.4) ohash: specifier: ^1.1.3 version: 1.1.3 @@ -110,9 +113,6 @@ importers: unist-util-visit: specifier: ^5.0.0 version: 5.0.0 - unwasm: - specifier: ^0.3.7 - version: 0.3.7 devDependencies: '@nuxt/devtools': specifier: latest @@ -7681,6 +7681,17 @@ packages: - vue dev: true + /nuxt-shiki@0.2.1(rollup@3.29.4): + resolution: {integrity: sha512-LWFgojb3autTMb+kpiwRQLHnM9getFHicWxGWU+UExFTydqm1CGC8oeAcZXweSUG9tm6nkpU/MNcAotCeVmXOg==} + dependencies: + '@nuxt/kit': 3.10.3(rollup@3.29.4) + shiki: 1.1.7 + unwasm: 0.3.7 + transitivePeerDependencies: + - rollup + - supports-color + dev: false + /nuxt@3.10.3(@types/node@20.11.25)(eslint@8.57.0)(rollup@3.29.4)(typescript@5.3.3)(vite@5.1.4): resolution: {integrity: sha512-NchGNiiz9g/ErJAb462W/lpX2NqcXYb9hugySKWvLXNdrjeAPiJ2/7mhgwUSiZA9MpjuQg3saiEajr1zlRIOCg==} engines: {node: ^14.18.0 || >=16.10.0} diff --git a/src/module.ts b/src/module.ts index 83b38f8..5fa2b12 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,4 +1,4 @@ -import { defineNuxtModule, extendViteConfig, addComponent, addComponentsDir, createResolver, addServerHandler, addTemplate, addImports, addServerImports, useNitro } from '@nuxt/kit' +import { defineNuxtModule, extendViteConfig, addComponent, addComponentsDir, createResolver, addServerHandler, addTemplate, addImports, addServerImports, installModule } from '@nuxt/kit' import fs from 'fs' import type { ModuleOptions } from './types' import { defu } from 'defu' @@ -63,26 +63,12 @@ export default defineNuxtModule({ }) if (options.highlight) { - // Enable unwasm for shiki - nuxt.hook('ready', () => { - const nitro = useNitro() - const addWasmSupport = (_nitro: typeof nitro) => { - if (nitro.options.experimental?.wasm) { return } - _nitro.options.externals = _nitro.options.externals || {} - _nitro.options.externals.inline = _nitro.options.externals.inline || [] - _nitro.options.externals.inline.push(id => id.endsWith('.wasm')) - _nitro.hooks.hook('rollup:before', async (_, rollupConfig) => { - const { rollup: unwasm } = await import('unwasm/plugin') - rollupConfig.plugins = rollupConfig.plugins || [] - ; (rollupConfig.plugins as any[]).push(unwasm({ - ..._nitro.options.wasm as any, - })) - }) - } - addWasmSupport(nitro) - nitro.hooks.hook('prerender:init', (prerenderer) => { - addWasmSupport(prerenderer) - }) + // Install nuxt-shiki + // @see https://github.com/pi0/nuxt-shiki#nuxt-shiki + installModule('nuxt-shiki', { + bundledThemes: options.highlight.themes, + bundledLangs: options.highlight.langs, + defaultTheme: options.highlight.theme, }) // Add server handlers @@ -243,6 +229,10 @@ function resolveOptions(options: ModuleOptions) { default: 'github-light', dark: 'github-dark' } + options.highlight.themes = [ + ...(options.highlight.themes || []), + ...Object.values(options.highlight.theme) as any + ] options.highlight.langs ||= DefaultHighlightLangs if (options.highlight.preload) { diff --git a/src/runtime/highlighter/shiki.ts b/src/runtime/highlighter/shiki.ts index 0b9ce62..6ae4363 100644 --- a/src/runtime/highlighter/shiki.ts +++ b/src/runtime/highlighter/shiki.ts @@ -1,4 +1,4 @@ -import { getHighlighterCore, addClassToHast, isSpecialLang, isSpecialTheme } from 'shiki/core' +import { addClassToHast, isSpecialLang, isSpecialTheme } from 'shiki/core' import type { HighlighterCore, LanguageInput, ShikiTransformer, ThemeInput } from 'shiki' import type { Highlighter } from './types' import type { Element } from 'hast' @@ -9,6 +9,8 @@ import { transformerNotationHighlight, } from '@shikijs/transformers' import type { MdcConfig } from '../types/config' +// @ts-expect-error - `nuxt-shiki` is installed by the module. +import { loadShiki } from '#imports' export interface CreateShikiHighlighterOptions { /* An array of themes to be loaded initially */ @@ -26,8 +28,6 @@ export interface CreateShikiHighlighterOptions { } export function createShikiHighlighter({ - langs = [], - themes = [], bundledLangs = {}, bundledThemes = {}, getMdcConfigs, @@ -37,11 +37,7 @@ export function createShikiHighlighter({ let configs: Promise | undefined async function _getShiki() { - const shiki = await getHighlighterCore({ - langs, - themes, - loadWasm: () => import('shiki/wasm') - }) + const shiki = await loadShiki() for await (const config of await getConfigs()) { await config.shiki?.setup?.(shiki) From fa2de7d8014af8ea2b10d84b1de706df5423fa58 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Thu, 14 Mar 2024 22:50:18 +0100 Subject: [PATCH 2/2] chore: add type --- src/runtime/highlighter/shiki.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/runtime/highlighter/shiki.ts b/src/runtime/highlighter/shiki.ts index 6ae4363..1010d79 100644 --- a/src/runtime/highlighter/shiki.ts +++ b/src/runtime/highlighter/shiki.ts @@ -11,6 +11,7 @@ import { import type { MdcConfig } from '../types/config' // @ts-expect-error - `nuxt-shiki` is installed by the module. import { loadShiki } from '#imports' +import type { ShikiInstance } from 'nuxt-shiki/dist/runtime/types' export interface CreateShikiHighlighterOptions { /* An array of themes to be loaded initially */ @@ -37,7 +38,7 @@ export function createShikiHighlighter({ let configs: Promise | undefined async function _getShiki() { - const shiki = await loadShiki() + const shiki = await loadShiki() as ShikiInstance for await (const config of await getConfigs()) { await config.shiki?.setup?.(shiki)