Allow Code component to run in Vercel (#5409)

* Allow Code component to run in Vercel

* Adding a changeset

* Pass theme through to `codeToHtml`

* Use script to generate languages

* another bundling approach

* fix lint warnings

.changeset/cuddly-eyes-change.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix Code component usage in Vercel

packages/astro/components/Code.astro

@@ -56,7 +56,10 @@ const highlighter = await getHighlighter({
 	// Load custom lang if passed an object, otherwise load the default
 	langs: typeof lang !== 'string' ? [lang] : undefined,
 });
-const _html = highlighter.codeToHtml(code, { lang: typeof lang === 'string' ? lang : lang.id });
+const _html = highlighter.codeToHtml(code, {
+	lang: typeof lang === 'string' ? lang : lang.id,
+	theme
+});
 const html = repairShikiTheme(_html);
 ---
 

packages/astro/components/Shiki.js

@@ -1,8 +1,13 @@
 import { getHighlighter as getShikiHighlighter } from 'shiki';
+import { themes } from './shiki-themes.js';
+import { languages } from './shiki-languages.js';
 
 // Caches Promise<Highligher> for reuse when the same theme and langs are provided
 const _resolvedHighlighters = new Map();
 
+/** @type {Promise<any>} */
+let _allLanguages;
+
 function stringify(opts) {
 	// Always sort keys before stringifying to make sure objects match regardless of parameter ordering
 	return JSON.stringify(opts, Object.keys(opts).sort());
@@ -12,16 +17,34 @@ function stringify(opts) {
  * @param {import('shiki').HighlighterOptions} opts
  * @returns {Promise<import('shiki').Highlighter>}
  */
-export function getHighlighter(opts) {
-	const key = stringify(opts);
+async function resolveHighlighter(opts) {
+	const resolvedThemes = [];
+	if(opts.theme && (opts.theme in themes)) {
+		resolvedThemes.push(await themes[opts.theme]());
+	}
 
-	// Highlighter has already been requested, reuse the same instance
-	if (_resolvedHighlighters.has(key)) {
-		return _resolvedHighlighters.get(key);
+	let resolvedLanguages;
+	if(opts.langs) {
+		resolvedLanguages = opts.langs;
+	} else {
+		if(!_allLanguages) {
+			_allLanguages = (await Promise.all(Object.values(languages).map(fn => fn()))).filter(Boolean);
+		}
+		resolvedLanguages = await _allLanguages;
 	}
 
+	/** @type {import('shiki').HighlighterOptions} */
+	const highlighterOptions = {
+		...opts,
+		themes: resolvedThemes,
+		langs: resolvedLanguages
+	};
+
+	// Do not pass through the theme as that will attempt to load it, even if it's included in themes
+	delete highlighterOptions['theme'];
+
 	// Start the async getHighlighter call and cache the Promise
-	const highlighter = getShikiHighlighter(opts).then((hl) => {
+	const highlighter = getShikiHighlighter(highlighterOptions).then((hl) => {
 		hl.setColorReplacements({
 			'#000001': 'var(--astro-code-color-text)',
 			'#000002': 'var(--astro-code-color-background)',
@@ -37,6 +60,23 @@ export function getHighlighter(opts) {
 		});
 		return hl;
 	});
+
+	return highlighter;
+}
+
+/**
+ * @param {import('shiki').HighlighterOptions} opts
+ * @returns {Promise<import('shiki').Highlighter>}
+ */
+export function getHighlighter(opts) {
+	const key = stringify(opts);
+
+	// Highlighter has already been requested, reuse the same instance
+	if (_resolvedHighlighters.has(key)) {
+		return _resolvedHighlighters.get(key);
+	}
+
+	const highlighter = resolveHighlighter(opts);
 	_resolvedHighlighters.set(key, highlighter);
 
 	return highlighter;