feat(shiki): use wasm engine (#7896)

* feat(shiki): use wasm engine

* fixup! feat(shiki): use wasm engine

Author: avivkeller

packages/rehype-shiki/eslint.config.js

@@ -5,8 +5,12 @@ export default [
   {
     languageOptions: {
       parserOptions: {
-        // Allow nullish syntax (i.e. "?." or "??")
-        ecmaVersion: 2020,
+        // Allow nullish syntax (i.e. "?." or "??"),
+        // and top-level await
+        ecmaVersion: 'latest',
+      },
+      globals: {
+        globalThis: 'readonly',
       },
     },
     rules: {

packages/rehype-shiki/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@shikijs/core": "^3.4.2",
     "@shikijs/engine-javascript": "^3.4.2",
+    "@shikijs/engine-oniguruma": "^3.7.0",
     "classnames": "~2.5.1",
     "hast-util-to-string": "^3.0.1",
     "shiki": "~3.4.2",

packages/rehype-shiki/src/highlighter.mjs

@@ -1,5 +1,4 @@
 import { createHighlighterCoreSync } from '@shikijs/core';
-import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript';
 import shikiNordTheme from 'shiki/themes/nord.mjs';
 
 const DEFAULT_THEME = {
@@ -17,7 +16,6 @@ const DEFAULT_THEME = {
 export const createHighlighter = options => {
   const shiki = createHighlighterCoreSync({
     themes: [DEFAULT_THEME],
-    engine: createJavaScriptRegexEngine(),
     ...options,
   });
 

packages/rehype-shiki/src/index.mjs

@@ -1,3 +1,5 @@
+import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript';
+import { createOnigurumaEngine } from '@shikijs/engine-oniguruma';
 import cLanguage from 'shiki/langs/c.mjs';
 import coffeeScriptLanguage from 'shiki/langs/coffeescript.mjs';
 import cPlusPlusLanguage from 'shiki/langs/cpp.mjs';
@@ -17,6 +19,21 @@ import { createHighlighter } from './highlighter.mjs';
 
 const { shiki, getLanguageDisplayName, highlightToHast, highlightToHtml } =
   createHighlighter({
+    // We use the faster WASM engine on the server instead of the web-optimized version.
+    //
+    // Currently we fall back to the JavaScript RegEx engine
+    // on Cloudflare workers because `shiki/wasm` requires loading via
+    // `WebAssembly.instantiate` with custom imports, which Cloudflare doesn't support
+    // for security reasons.
+    //
+    // TODO(@avivkeller): When available, use `OPEN_NEXT_CLOUDFLARE` environmen
+    // variable for detection instead of current method, which will enable better
+    // tree-shaking.
+    // Reference: https://github.com/nodejs/nodejs.org/pull/7896#issuecomment-3009480615
+    engine:
+      'Cloudflare' in globalThis
+        ? createJavaScriptRegexEngine()
+        : await createOnigurumaEngine(import('shiki/wasm')),
     langs: [
       ...cLanguage,
       ...coffeeScriptLanguage,

packages/rehype-shiki/src/minimal.mjs

@@ -1,10 +1,14 @@
+import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript';
 import powershellLanguage from 'shiki/langs/powershell.mjs';
 import shellScriptLanguage from 'shiki/langs/shellscript.mjs';
 
 import { createHighlighter } from './highlighter.mjs';
 
 const { shiki, getLanguageDisplayName, highlightToHast, highlightToHtml } =
   createHighlighter({
+    // For the minimal (web) Shiki, we want to use the simpler,
+    // JavaScript based engine.
+    engine: createJavaScriptRegexEngine(),
     langs: [...powershellLanguage, ...shellScriptLanguage],
   });