Use better soluition for workerd engine

ematipico · rururux · ematipico · commit 171816280d4f · 2026-02-20T13:17:21.000Z
Co-authored-by: rururux &lt;rururux@users.noreply.github.com&gt;
diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
@@ -10,9 +10,6 @@ import type { HTMLAttributes } from '../types.js';
 // Code.astro always uses Shiki, so import the virtual CSS module
 import 'virtual:astro:shiki-styles.css';
 
-// Import JavaScript engine for Cloudflare Workers
-// Workers can't load WASM files from filesystem, so use JS engine instead
-import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 
 interface Props extends Omit<HTMLAttributes<'pre'>, 'lang'> {
 	/** The code to highlight. Required. */
@@ -112,14 +109,6 @@ if (typeof lang === 'object') {
 	}
 }
 
-// Detect Cloudflare Workers environment
-// Workers can't load WASM files from filesystem, so use JavaScript RegExp engine
-// Check for Cloudflare context that's injected by @astrojs/cloudflare adapter
-const isCloudflareWorkers = 
-	('cf' in Astro.request) ||          // Cloudflare request object
-	('cfContext' in Astro.locals) ||    // Cloudflare context in locals
-	('cloudflare' in Astro.locals);      // Alternative location
-
 const highlighter = await createShikiHighlighter({
 	langs: [
 		typeof lang === 'string'
@@ -131,7 +120,6 @@ const highlighter = await createShikiHighlighter({
 	],
 	theme,
 	themes,
-	...(isCloudflareWorkers ? { engine: createJavaScriptRegexEngine() } : {}),
 });
 
 // Combine style-to-class transformer with user-provided transformers
diff --git a/packages/markdown/remark/package.json b/packages/markdown/remark/package.json
@@ -14,6 +14,7 @@
   "main": "./dist/index.js",
   "exports": {
     ".": "./dist/index.js",
+    "./shiki/engine": "./dist/engine.js",
     "./shiki": "./dist/shiki.js",
     "./shiki-style-collector": "./dist/shiki-style-collector.js",
     "./transformers/style-to-class": "./dist/transformers/style-to-class.js"
@@ -22,6 +23,10 @@
     "#import-plugin": {
       "browser": "./dist/import-plugin-browser.js",
       "default": "./dist/import-plugin-default.js"
+    },
+    "#shiki-engine": {
+      "workerd": "./dist/shiki-engine-workerd.js",
+      "default": "./dist/shiki-engine-default.js"
     }
   },
   "files": [
diff --git a/packages/markdown/remark/src/shiki-engine-default.ts b/packages/markdown/remark/src/shiki-engine-default.ts
@@ -0,0 +1,7 @@
+// shiki-engine-default.ts
+import type { RegexEngine } from 'shiki';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+
+export function loadShikiEngine(): Promise<RegexEngine> {
+	return createOnigurumaEngine(import('shiki/wasm'));
+}
diff --git a/packages/markdown/remark/src/shiki-engine-workerd.ts b/packages/markdown/remark/src/shiki-engine-workerd.ts
@@ -0,0 +1,8 @@
+// shiki-engine-worker.ts
+import type { RegexEngine } from 'shiki';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+
+export function loadShikiEngine(): Promise<RegexEngine> {
+	// @ts-ignore wasm type
+	return createOnigurumaEngine(import('shiki/onig.wasm'));
+}
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
@@ -8,13 +8,15 @@ import {
 	type HighlighterGeneric,
 	isSpecialLang,
 	type LanguageRegistration,
+	type RegexEngine,
 	type ShikiTransformer,
 	type ThemeRegistration,
 	type ThemeRegistrationRaw,
 } from 'shiki';
 import { globalShikiStyleCollector } from './shiki-style-collector.js';
 import { transformerStyleToClass } from './transformers/style-to-class.js';
 import type { ThemePresets } from './types.js';
+import { loadShikiEngine } from '#shiki-engine';
 
 export interface ShikiHighlighter {
 	codeToHast(
@@ -34,11 +36,6 @@ export interface CreateShikiHighlighterOptions {
 	theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
 	themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
 	langAlias?: HighlighterCoreOptions['langAlias'];
-	/**
-	 * Custom regex engine for Shiki.
-	 * Use JavaScript engine for environments that can't load WASM files (e.g. Cloudflare Workers).
-	 */
-	engine?: HighlighterCoreOptions['engine'];
 }
 
 export interface ShikiHighlighterHighlightOptions {
@@ -81,20 +78,25 @@ const cssVariablesTheme = () =>
 // Caches Promise<ShikiHighlighter> for reuse when the same theme and langs are provided
 const cachedHighlighters = new Map();
 
+let shikiEngine: RegexEngine | undefined = undefined;
+
 export async function createShikiHighlighter({
 	langs = [],
 	theme = 'github-dark',
 	themes = {},
 	langAlias = {},
-	engine,
 }: CreateShikiHighlighterOptions = {}): Promise<ShikiHighlighter> {
 	theme = theme === 'css-variables' ? cssVariablesTheme() : theme;
 
+	if (shikiEngine === undefined) {
+		shikiEngine = await loadShikiEngine();
+	}
+
 	const highlighterOptions = {
 		langs: ['plaintext', ...langs],
 		langAlias,
 		themes: Object.values(themes).length ? Object.values(themes) : [theme],
-		...(engine ? { engine } : {}),
+		engine: shikiEngine,
 	};
 
 	const key = JSON.stringify(highlighterOptions, Object.keys(highlighterOptions).sort());
