Add config for enabling the wasm version of shiki highlighter

apps/demo/src/main.ts

@@ -79,6 +79,7 @@ const poolManager = (() => {
   const manager = createWorkerAPI({
     theme: DEFAULT_THEMES,
     langs: ['typescript', 'tsx'],
+    preferredHighlighter: 'shiki-wasm',
   });
   void manager.initialize().then(() => {
     console.log('WorkerPoolManager initialized, with:', manager.getStats());

apps/docs/app/docs/ReactAPI/constants.ts

@@ -44,6 +44,11 @@ interface DiffOptions {
   // 'dark' or 'light' - forces specific theme
   themeType: 'system',
 
+  // Choose the Shiki engine:
+  // 'shiki-js' (default) - JavaScript regex engine
+  // 'shiki-wasm' - WASM Oniguruma engine
+  preferredHighlighter: 'shiki-js',
+
   // ─────────────────────────────────────────────────────────────
   // DIFF DISPLAY
   // ─────────────────────────────────────────────────────────────
@@ -482,6 +487,11 @@ interface FileOptions {
   // 'dark' or 'light' - forces specific theme
   themeType: 'system',
 
+  // Choose the Shiki engine:
+  // 'shiki-js' (default) - JavaScript regex engine
+  // 'shiki-wasm' - WASM Oniguruma engine
+  preferredHighlighter: 'shiki-js',
+
   // ─────────────────────────────────────────────────────────────
   // LAYOUT & DISPLAY
   // ─────────────────────────────────────────────────────────────

apps/docs/app/docs/VanillaAPI/constants.ts

@@ -115,6 +115,11 @@ const instance = new FileDiff({
   // 'dark' or 'light' - forces specific theme
   themeType: 'system',
 
+  // Choose the Shiki engine:
+  // 'shiki-js' (default) - JavaScript regex engine
+  // 'shiki-wasm' - WASM Oniguruma engine
+  preferredHighlighter: 'shiki-js',
+
   // ─────────────────────────────────────────────────────────────
   // DIFF DISPLAY
   // ─────────────────────────────────────────────────────────────
@@ -337,6 +342,11 @@ const instance = new File({
   // 'dark' or 'light' - forces specific theme
   themeType: 'system',
 
+  // Choose the Shiki engine:
+  // 'shiki-js' (default) - JavaScript regex engine
+  // 'shiki-wasm' - WASM Oniguruma engine
+  preferredHighlighter: 'shiki-js',
+
   // ─────────────────────────────────────────────────────────────
   // LAYOUT & DISPLAY
   // ─────────────────────────────────────────────────────────────

apps/docs/app/docs/WorkerPool/constants.ts

@@ -292,6 +292,8 @@ export function HighlightProvider({ children }: { children: ReactNode }) {
       }}
       highlighterOptions={{
         theme: { dark: 'pierre-dark', light: 'pierre-light' },
+        // Optional: pick the Shiki engine ('shiki-js' is default)
+        // preferredHighlighter: 'shiki-wasm',
         // Optionally preload languages to avoid lazy-loading delays
         langs: ['typescript', 'javascript', 'css', 'html'],
       }}
@@ -363,6 +365,8 @@ const workerPool = getOrCreateWorkerPoolSingleton({
   },
   highlighterOptions: {
     theme: { dark: 'pierre-dark', light: 'pierre-light' },
+    // Optional: pick the Shiki engine ('shiki-js' is default)
+    // preferredHighlighter: 'shiki-wasm',
     // Optionally preload languages to avoid lazy-loading delays
     langs: ['typescript', 'javascript', 'css', 'html'],
   },
@@ -418,6 +422,7 @@ new WorkerPoolManager(poolOptions, highlighterOptions)
 //   - theme?: DiffsThemeNames | ThemesType - Theme name or { dark, light } object
 //   - lineDiffType?: 'word' | 'word-alt' | 'char' - How to diff lines (default: 'word-alt')
 //   - tokenizeMaxLineLength?: number - Max line length to tokenize (default: 1000)
+//   - preferredHighlighter?: 'shiki-js' | 'shiki-wasm' - Highlighter engine (default: 'shiki-js')
 //   - langs?: SupportedLanguages[] - Array of languages to preload
 
 // Methods:

apps/docs/app/docs/WorkerPool/content.mdx

@@ -125,7 +125,9 @@ you can then manually pass to all your File/FileDiff instances.
   be ignored. To change render options after WorkerPoolManager instantiates, use
   the `setRenderOptions()` method on the `WorkerPoolManager`. **Note:** Changing
   render options will force all mounted components to re-render and will clear
-  the render cache.
+  the render cache. If you need to control which Shiki engine is used, set
+  `preferredHighlighter` when initializing the pool (`'shiki-js'` by default,
+  `'shiki-wasm'` optional).
 </Notice>
 
 #### React

packages/diffs/package.json

@@ -64,8 +64,6 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@shikijs/core": "^3.0.0",
-    "@shikijs/engine-javascript": "^3.0.0",
     "@shikijs/transformers": "^3.0.0",
     "diff": "catalog:",
     "hast-util-to-html": "catalog:",

packages/diffs/src/highlighter/shared_highlighter.ts

@@ -1,8 +1,13 @@
-import { createHighlighter, createJavaScriptRegexEngine } from 'shiki';
+import {
+  createHighlighter,
+  createJavaScriptRegexEngine,
+  createOnigurumaEngine,
+} from 'shiki';
 
 import type {
   DiffsHighlighter,
   DiffsThemeNames,
+  HighlighterTypes,
   SupportedLanguages,
   ThemeRegistrationResolved,
 } from '../types';
@@ -25,16 +30,21 @@ let highlighter: CachedOrLoadingHighlighterType;
 interface HighlighterOptions {
   themes: DiffsThemeNames[];
   langs: SupportedLanguages[];
+  preferredHighlighter?: HighlighterTypes;
 }
 
 export async function getSharedHighlighter({
   themes,
   langs,
+  preferredHighlighter = 'shiki-js',
 }: HighlighterOptions): Promise<DiffsHighlighter> {
   highlighter ??= createHighlighter({
     themes: [],
     langs: ['text'],
-    engine: createJavaScriptRegexEngine(),
+    engine:
+      preferredHighlighter === 'shiki-wasm'
+        ? createOnigurumaEngine(import('shiki/wasm'))
+        : createJavaScriptRegexEngine(),
   }) as Promise<DiffsHighlighter>;
 
   const instance = isHighlighterLoading(highlighter)

packages/diffs/src/renderers/DiffHunksRenderer.ts

@@ -104,7 +104,7 @@ interface ProcessContext {
 }
 
 type OptionsWithDefaults = Required<
-  Omit<BaseDiffOptions, 'lang' | 'unsafeCSS'>
+  Omit<BaseDiffOptions, 'unsafeCSS' | 'preferredHighlighter'>
 >;
 
 export interface HunksRenderResult {
@@ -513,6 +513,8 @@ export class DiffHunksRenderer<LAnnotation = undefined> {
     result: ThemedDiffResult,
     options: RenderDiffOptions
   ): void {
+    // NOTE(amadeus): This is a bad assumption, and I should figure out
+    // something better...
     // If renderCache was blown away, we can assume we've run cleanUp()
     if (this.renderCache == null) {
       return;

packages/diffs/src/shiki-stream/stream.ts

@@ -1,4 +1,4 @@
-import type { ThemedToken } from '@shikijs/core';
+import type { ThemedToken } from 'shiki/core';
 
 import { ShikiStreamTokenizer } from './tokenizer';
 import type { CodeToTokenTransformStreamOptions, RecallToken } from './types';

packages/diffs/src/shiki-stream/tokenizer.ts

@@ -1,4 +1,4 @@
-import type { GrammarState, ThemedToken } from '@shikijs/core';
+import type { GrammarState, ThemedToken } from 'shiki/core';
 
 import type {
   ShikiStreamTokenizerEnqueueResult,

packages/diffs/src/shiki-stream/types.ts

@@ -3,7 +3,7 @@ import type {
   HighlighterCore,
   HighlighterGeneric,
   ThemedToken,
-} from '@shikijs/core';
+} from 'shiki/core';
 
 /**
  * A special token that indicates the number of tokens to be removed from the previous streamed tokens.

packages/diffs/src/types.ts

@@ -32,6 +32,8 @@ export interface FileContents {
   cacheKey?: string;
 }
 
+export type HighlighterTypes = 'shiki-js' | 'shiki-wasm';
+
 export type {
   BundledLanguage,
   CodeToHastOptions,
@@ -350,6 +352,7 @@ export interface BaseCodeOptions {
   disableVirtualizationBuffers?: boolean;
 
   // Shiki config options, ignored if you're using a WorkerPoolManager
+  preferredHighlighter?: HighlighterTypes;
   useCSSClasses?: boolean;
   tokenizeMaxLineLength?: number;
 

packages/diffs/src/utils/getHighlighterOptions.ts

@@ -1,21 +1,29 @@
-import type { DiffsThemeNames, SupportedLanguages, ThemesType } from '../types';
+import type {
+  DiffsThemeNames,
+  HighlighterTypes,
+  SupportedLanguages,
+  ThemesType,
+} from '../types';
 import { getThemes } from './getThemes';
 
 interface HighlighterOptionsShape {
   theme?: DiffsThemeNames | ThemesType;
+  preferredHighlighter?: HighlighterTypes;
 }
 
 interface GetHighlighterOptionsReturn {
   langs: SupportedLanguages[];
   themes: DiffsThemeNames[];
+  preferredHighlighter: HighlighterTypes;
 }
 
 export function getHighlighterOptions(
   lang: SupportedLanguages | undefined,
-  options: HighlighterOptionsShape
+  { theme, preferredHighlighter = 'shiki-js' }: HighlighterOptionsShape
 ): GetHighlighterOptionsReturn {
   return {
     langs: [lang ?? 'text'],
-    themes: getThemes(options.theme),
+    themes: getThemes(theme),
+    preferredHighlighter,
   };
 }

packages/diffs/src/worker/WorkerPoolManager.ts

@@ -13,6 +13,7 @@ import type {
   DiffsHighlighter,
   FileContents,
   FileDiffMetadata,
+  HighlighterTypes,
   HunkExpansionRegion,
   RenderDiffOptions,
   RenderDiffResult,
@@ -69,6 +70,7 @@ interface ThemeSubscriber {
 
 export class WorkerPoolManager {
   private highlighter: DiffsHighlighter | undefined;
+  private readonly preferredHighlighter: HighlighterTypes;
   private renderOptions: WorkerRenderingOptions;
   private initialized: Promise<void> | boolean = false;
   private workers: ManagedWorker[] = [];
@@ -96,8 +98,10 @@ export class WorkerPoolManager {
       theme = DEFAULT_THEMES,
       lineDiffType = 'word-alt',
       tokenizeMaxLineLength = 1000,
+      preferredHighlighter = 'shiki-js',
     }: WorkerInitializationRenderOptions
   ) {
+    this.preferredHighlighter = preferredHighlighter;
     this.renderOptions = { theme, lineDiffType, tokenizeMaxLineLength };
     this.fileCache = new LRUMapPkg.LRUMap(options.totalASTLRUCacheSize ?? 100);
     this.diffCache = new LRUMapPkg.LRUMap(options.totalASTLRUCacheSize ?? 100);
@@ -182,7 +186,11 @@ export class WorkerPoolManager {
       await this.setRenderOptionsOnWorkers(newRenderOptions, resolvedThemes);
     } else {
       const [highlighter] = await Promise.all([
-        getSharedHighlighter({ themes: themeNames, langs: ['text'] }),
+        getSharedHighlighter({
+          themes: themeNames,
+          langs: ['text'],
+          preferredHighlighter: this.preferredHighlighter,
+        }),
         this.setRenderOptionsOnWorkers(newRenderOptions, resolvedThemes),
       ]);
       this.highlighter = highlighter;
@@ -330,7 +338,11 @@ export class WorkerPoolManager {
             }
 
             const [highlighter] = await Promise.all([
-              getSharedHighlighter({ themes, langs: ['text', ...languages] }),
+              getSharedHighlighter({
+                themes,
+                langs: ['text', ...languages],
+                preferredHighlighter: this.preferredHighlighter,
+              }),
               this.initializeWorkers(resolvedThemes, resolvedLanguages),
             ]);
 
@@ -400,6 +412,7 @@ export class WorkerPoolManager {
               type: 'initialize',
               id,
               renderOptions: this.renderOptions,
+              preferredHighlighter: this.preferredHighlighter,
               resolvedThemes,
               resolvedLanguages,
             },

packages/diffs/src/worker/types.ts

@@ -2,6 +2,7 @@ import type {
   DiffsThemeNames,
   FileContents,
   FileDiffMetadata,
+  HighlighterTypes,
   LanguageRegistration,
   LineDiffTypes,
   RenderDiffOptions,
@@ -59,6 +60,7 @@ export interface InitializeWorkerRequest {
   type: 'initialize';
   id: WorkerRequestId;
   renderOptions: WorkerRenderingOptions;
+  preferredHighlighter: HighlighterTypes;
   resolvedThemes: ThemeRegistrationResolved[];
   resolvedLanguages?: ResolvedLanguage[];
 }
@@ -152,6 +154,7 @@ export interface WorkerPoolOptions {
 
 export interface WorkerInitializationRenderOptions extends Partial<WorkerRenderingOptions> {
   langs?: SupportedLanguages[];
+  preferredHighlighter?: HighlighterTypes;
 }
 
 export interface InitializeWorkerTask {