fix: fix error with <Prism /> component in Cloudflare Workers

.changeset/pretty-canyons-refuse.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/markdoc': patch
+'@astrojs/markdown-remark': patch
+---
+
+Updates internal type usage from `@astrojs/prism`.

.changeset/strict-coats-throw.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/prism': patch
+'@astrojs/cloudflare': patch
+---
+
+Fixes an issue where the `<Prism />` component failed to work in Cloudflare Workers.

knip.js

@@ -59,6 +59,11 @@ export default {
 				'@types/http-cache-semantics',
 			],
 		},
+		'packages/astro-prism': {
+			entry: [srcEntry, dtsEntry, testEntry],
+			// package.json#imports are not resolved at the moment
+			ignore: ['src/loadLanguages-workerd.ts'],
+		},
 		'packages/db': {
 			entry: [srcEntry, dtsEntry, testEntry, 'test/types/**/*'],
 		},

packages/astro-prism/Prism.astro

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const { class: className, lang, code } = Astro.props as Props;
-const { classLanguage, html } = runHighlighterWithAstro(lang, code);
+const { classLanguage, html } = await runHighlighterWithAstro(lang, code);
 ---
 
 <pre

packages/astro-prism/package.json

@@ -23,6 +23,12 @@
     "./Prism.astro": "./Prism.astro",
     "./dist/highlighter": "./dist/highlighter.js"
   },
+  "imports": {
+    "#prism-loadLanguages": {
+      "workerd": "./dist/loadLanguages-workerd.js",
+      "default": "./dist/loadLanguages-default.js"
+    }
+  },
   "files": [
     "dist",
     "Prism.astro"

packages/astro-prism/src/highlighter.ts

@@ -1,28 +1,28 @@
 import Prism from 'prismjs';
-import loadLanguages from 'prismjs/components/index.js';
+import { loadLanguages } from '#prism-loadLanguages';
 import { addAstro } from './plugin.js';
 
 const languageMap = new Map([['ts', 'typescript']]);
 
-export function runHighlighterWithAstro(lang: string | undefined, code: string) {
+export async function runHighlighterWithAstro(lang: string | undefined, code: string) {
 	if (!lang) {
 		lang = 'plaintext';
 	}
 	let classLanguage = `language-${lang}`;
-	const ensureLoaded = (language: string) => {
+	const ensureLoaded = async (language: string) => {
 		if (language && !Prism.languages[language]) {
-			loadLanguages([language]);
+			await loadLanguages([language]);
 		}
 	};
 
 	if (languageMap.has(lang)) {
-		ensureLoaded(languageMap.get(lang)!);
+		await ensureLoaded(languageMap.get(lang)!);
 	} else if (lang === 'astro') {
-		ensureLoaded('typescript');
+		await ensureLoaded('typescript');
 		addAstro(Prism);
 	} else {
-		ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
-		ensureLoaded(lang);
+		await ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
+		await ensureLoaded(lang);
 	}
 
 	if (lang && !Prism.languages[lang]) {

packages/astro-prism/src/loadLanguages-default.ts

@@ -0,0 +1,5 @@
+import prismLoadLanguages from 'prismjs/components/index.js';
+
+export async function loadLanguages(languages: string | string[]) {
+	return prismLoadLanguages(languages);
+}

packages/astro-prism/src/loadLanguages-workerd.ts

@@ -0,0 +1,99 @@
+// This implementation was based from: https://github.com/PrismJS/prism/blob/76dde18a575831c91491895193f56081ac08b0c5/components/index.js
+import Prism from 'prismjs';
+import components from 'prismjs/components.js';
+import getLoader, { type LoadChainer } from 'prismjs/dependencies.js';
+import { bundledLanguages } from 'virtual:astro-cloudflare:prism';
+
+// This `loadChainer` is required when working with Promises in Prism's loader.
+// ref: https://github.com/PrismJS/prism/blob/76dde18a575831c91491895193f56081ac08b0c5/dependencies.js#L346-L360
+const loadChainer: LoadChainer<Promise<void>> = {
+	series: async (before, after) => {
+		await before;
+		await after();
+	},
+	parallel: async (values) => {
+		await Promise.all(values);
+	},
+};
+
+// Since Prism language files are written assuming the Prism instance is defined
+// as a global variable, we will temporarily set the Prism instance globally.
+// As loadLanguages can be called asynchronously multiple times, there is a risk
+// that globalThis.Prism may be accessed again after cleanup, even when it appears
+// to be no longer needed after a Promise resolves, potentially causing a
+// `Prism is not defined` error.
+// To avoid this, we track the number of active references and only perform cleanup
+// when the count returns to zero.
+let prismRefCount = 0;
+
+const prismRefCounter = {
+	increment: () => {
+		if (prismRefCount === 0) {
+			globalThis.Prism = Prism;
+		}
+
+		prismRefCount += 1;
+	},
+	decrement: () => {
+		prismRefCount -= 1;
+
+		if (prismRefCount === 0) {
+			// @ts-expect-error globalThis type
+			delete globalThis.Prism;
+		}
+	},
+};
+
+/**
+ * The set of all languages which have been loaded using the below function.
+ *
+ * @type {Set<string>}
+ */
+const loadedLanguages = new Set<string>();
+
+/**
+ * Loads the given languages and adds them to the current Prism instance.
+ *
+ * If no languages are provided, __all__ Prism languages will be loaded.
+ *
+ * @param {string|string[]} [languages]
+ * @returns {Promise<void>}
+ */
+export async function loadLanguages(languages: string | string[]) {
+	prismRefCounter.increment();
+
+	if (languages === undefined) {
+		languages = Object.keys(components.languages).filter((l) => l !== 'meta');
+	} else if (!Array.isArray(languages)) {
+		languages = [languages];
+	}
+
+	// the user might have loaded languages via some other way or used `prism.js` which already includes some
+	// we don't need to validate the ids because `getLoader` will ignore invalid ones
+	const loaded = [...loadedLanguages, ...Object.keys(Prism.languages)];
+
+	await getLoader(components, languages, loaded).load(async (lang: string) => {
+		if (!(lang in components.languages)) {
+			if (!loadLanguages.silent) {
+				console.warn('Language does not exist: ' + lang);
+			}
+			return;
+		}
+
+		// remove from Prism
+		delete Prism.languages[lang];
+
+		if (Object.hasOwn(bundledLanguages, lang)) {
+			await bundledLanguages[lang]();
+		}
+
+		loadedLanguages.add(lang);
+	}, loadChainer);
+
+	prismRefCounter.decrement();
+}
+
+/**
+ * Set this to `true` to prevent all warning messages `loadLanguages` logs.
+ */
+loadLanguages.silent = false;

packages/astro-prism/tsconfig.build.json

@@ -1,3 +1,4 @@
 {
-  "extends": "../../configs/tsconfig.build.json"
+  "extends": "../../configs/tsconfig.build.json",
+  "include": ["./src", "./virtual.d.ts"]
 }

packages/astro-prism/virtual.d.ts

@@ -0,0 +1,3 @@
+declare module 'virtual:astro-cloudflare:prism' {
+	export const bundledLanguages: Record<string, () => Promise<void>>;
+}

packages/integrations/cloudflare/package.json

@@ -58,7 +58,9 @@
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
     "cheerio": "1.2.0",
-    "devalue": "^5.6.3"
+    "devalue": "^5.6.3",
+    "prismjs": "^1.30.0",
+    "@types/prismjs": "1.26.6"
   },
   "publishConfig": {
     "provenance": true

packages/integrations/cloudflare/src/index.ts

@@ -1,5 +1,5 @@
 import { createReadStream, existsSync, readFileSync } from 'node:fs';
-import { appendFile, rename, stat } from 'node:fs/promises';
+import { appendFile, readFile, rename, stat } from 'node:fs/promises';
 import { createInterface } from 'node:readline/promises';
 import { removeLeadingForwardSlash } from '@astrojs/internal-helpers/path';
 import { createRedirectsFromAstroRoutes, printAsRedirects } from '@astrojs/underscore-redirects';
@@ -22,6 +22,7 @@ import {
 import { parseEnv } from 'node:util';
 import { sessionDrivers } from 'astro/config';
 import { createCloudflarePrerenderer } from './prerenderer.js';
+import cfPrismPlugin from './vite-plugin-prism.js';
 
 const CLOUDFLARE_KV_SESSION_DRIVER_ENTRYPOINT = sessionDrivers.cloudflareKVBinding().entrypoint;
 
@@ -130,7 +131,7 @@ export default function createIntegration({
 	return {
 		name: '@astrojs/cloudflare',
 		hooks: {
-			'astro:config:setup': ({ command, config, updateConfig, logger, addWatchFile }) => {
+			'astro:config:setup': async ({ command, config, updateConfig, logger, addWatchFile }) => {
 				if (!!process.versions.webcontainer) {
 					throw new Error('`workerd` does not run on Stackblitz.');
 				}
@@ -206,6 +207,21 @@ export default function createIntegration({
 					globalThis.astroCloudflareOptions = cfPluginConfig;
 				}
 
+				// Including prismjs files in `optimizeDeps.includes` when `@astrojs/prism` is not installed
+				// causes a "Failed to resolve dependency: @astrojs/prism > prismjs" log to appear.
+				// However, when using the `<Prism />` component in a Cloudflare Workers environment,
+				// not including prismjs files in `optimizeDeps.includes` causes
+				// a "The file does not exist at ..." log to appear.
+				// To work around this, we check whether `@astrojs/prism` is installed in the current project.
+				// Note: this "Failed to resolve dependency" log will not appear as long as the `@astrojs/prism` package is installed,
+				// even if it is not actually used.
+				const prismFiles = [
+					'@astrojs/prism > prismjs',
+					'@astrojs/prism > prismjs/components.js',
+					'@astrojs/prism > prismjs/dependencies.js',
+				] as const;
+				const isAstroPrismPackageInstalled = await getIsAstroPrismInstalled(config.root);
+
 				updateConfig({
 					build: {
 						redirects: false,
@@ -270,6 +286,7 @@ export default function createIntegration({
 													'astro/jsx-runtime',
 													'astro/app/entrypoint/dev',
 													'astro/virtual-modules/middleware.js',
+													...(isAstroPrismPackageInstalled ? prismFiles : []),
 												],
 												exclude: [
 													'unstorage/drivers/cloudflare-kv-binding',
@@ -330,6 +347,7 @@ export default function createIntegration({
 											}
 										: null,
 							}),
+							cfPrismPlugin(),
 						],
 					},
 					image: setImageConfig(imageService, config.image, command, logger),
@@ -532,3 +550,19 @@ export default function createIntegration({
 		},
 	};
 }
+
+// Reads the package.json at the current root to check whether `@astrojs/prism` is installed.
+// Using `require.resolve()` would not work correctly for projects inside a monorepo
+// (such as Astro's test fixtures), as it would traverse parent node_modules directories
+// to resolve the package. For this reason, we directly read `package.json` using `readFile` instead.
+async function getIsAstroPrismInstalled(rootURL: URL) {
+	try {
+		const pkgURL = new URL('./package.json', rootURL);
+		const input = await readFile(pkgURL, { encoding: 'utf-8' });
+		const pkgJson = JSON.parse(input);
+
+		return Object.hasOwn(pkgJson['dependencies'], '@astrojs/prism');
+	} catch {
+		return false;
+	}
+}

packages/integrations/cloudflare/src/vite-plugin-prism.ts

@@ -0,0 +1,63 @@
+import { fileURLToPath } from 'node:url';
+import type { Plugin } from 'vite';
+import components from 'prismjs/components.js';
+
+const MODULE_ID = 'virtual:astro-cloudflare:prism';
+const RESOLVED_MODULE_ID = '\0' + MODULE_ID;
+
+const languages = Object.keys(components.languages).filter((l) => l !== 'meta');
+
+export default function cfPrismPlugin(): Plugin {
+	return {
+		name: '@astrojs/cloudflare:prism',
+		configEnvironment(environmentName) {
+			if (environmentName === 'ssr') {
+				return {
+					// Because this virtual module adds a large number of dynamic import statements,
+					// Vite’s logs will consequently display the message “new dependencies optimized” for all languages.
+					// To avoid this, we explicitly specify that the module should be optimized in advance.
+					optimizeDeps: {
+						include: ['prismjs/components/prism-*.js'],
+					},
+				};
+			}
+		},
+		resolveId: {
+			filter: {
+				id: new RegExp(`^${MODULE_ID}$`),
+			},
+			handler() {
+				return RESOLVED_MODULE_ID;
+			},
+		},
+		load: {
+			filter: {
+				id: new RegExp(`^${RESOLVED_MODULE_ID}$`),
+			},
+			async handler() {
+				const importerPath = fileURLToPath(import.meta.url);
+
+				const resolvedModules = await Promise.all(
+					languages.map(async (lang) => {
+						const resolvedId = await this.resolve(
+							`prismjs/components/prism-${lang}.js`,
+							importerPath,
+						);
+
+						return { resolvedId: resolvedId?.id, lang };
+					}),
+				);
+				const prismBundledLanguages = resolvedModules
+					.filter(({ resolvedId }) => resolvedId !== undefined)
+					.map(
+						({ resolvedId, lang }) =>
+							`${JSON.stringify(lang)}: () => import(${JSON.stringify(resolvedId)})`,
+					);
+
+				return `
+					export const bundledLanguages = { ${prismBundledLanguages.join(',')} };
+				`;
+			},
+		},
+	};
+}