Repository: withastro/astro
File: packages/markdown/remark/src/shiki.ts (TypeScript)

Code before:

let _cssVariablesTheme: ReturnType<typeof createCssVariablesTheme>;
const cssVariablesTheme = () =>
	_cssVariablesTheme ??
	(_cssVariablesTheme = createCssVariablesTheme({
		variablePrefix: '--astro-code-',
	}));

// Caches Promise<ShikiHighlighterInternal> for reuse when the same `themes` and `langAlias`.
const cachedHighlighters = new Map<string, Promise<ShikiHighlighterInternal>>();

export function createShikiHighlighter(
	options?: CreateShikiHighlighterOptions,
): Promise<ShikiHighlighter> {
	// Although this function returns a promise, its body runs synchronously so
	// that the cache lookup happens immediately. Without this, calling
	// `Promise.all([createShikiHighlighter(), createShikiHighlighter()])` would
	// bypass the cache and create duplicate highlighters.

	const key: string = JSON.stringify([
		// Notice that we don't use `langs` in the cache key because we can
		// dynamically load languages. This allows us to reuse the same
		// highlighter instance for different languages.
		options?.theme,
		Object.entries(options?.themes ?? {}).sort(),
		Object.entries(options?.langAlias ?? {}).sort(),
	]);

	let highlighterPromise = cachedHighlighters.get(key);
	if (!highlighterPromise) {
		highlighterPromise = createShikiHighlighterInternal(options);
		cachedHighlighters.set(key, highlighterPromise);
	}
	return ensureLanguagesLoaded(highlighterPromise, options?.langs);
}

/**
 * Ensures that the languages are loaded into the highlighter. This is
 * especially important when the languages are objects representing custom
 * user-defined languages.
 */
async function ensureLanguagesLoaded(
	promise: Promise<ShikiHighlighterInternal>,
	langs?: ShikiLanguage[],
): Promise<ShikiHighlighterInternal> {
	const highlighter = await promise;
	if (!langs) {
		return highlighter;
	}
	const loadedLanguages = highlighter.getLoadedLanguages();
	for (const lang of langs) {

Review comment (performance):
This is wasteful because we're polluting the key with empty objects. I suggest looking for a different approach e.g. 

```js
const keyCache = [];
if (options?.theme) { keyCache.push(options.theme) }
...

const key = keyCache.length > 0 ? JSON.stringify() : "";
```

Code after:

let _cssVariablesTheme: ReturnType<typeof createCssVariablesTheme>;
const cssVariablesTheme = () =>
	_cssVariablesTheme ??
	(_cssVariablesTheme = createCssVariablesTheme({
		variablePrefix: '--astro-code-',
	}));

// Caches Promise<ShikiHighlighterInternal> for reuse when the same `themes` and `langAlias`.
const cachedHighlighters = new Map<string, Promise<ShikiHighlighterInternal>>();

/**
 * Only used for testing.
 *
 * @internal
 */
export function clearShikiHighlighterCache(): void {
	cachedHighlighters.clear();
}

export function createShikiHighlighter(
	options?: CreateShikiHighlighterOptions,
): Promise<ShikiHighlighter> {
	// Although this function returns a promise, its body runs synchronously so
	// that the cache lookup happens immediately. Without this, calling
	// `Promise.all([createShikiHighlighter(), createShikiHighlighter()])` would
	// bypass the cache and create duplicate highlighters.

	const key: string = getCacheKey(options);
	let highlighterPromise = cachedHighlighters.get(key);
	if (!highlighterPromise) {
		highlighterPromise = createShikiHighlighterInternal(options);
		cachedHighlighters.set(key, highlighterPromise);
	}
	return ensureLanguagesLoaded(highlighterPromise, options?.langs);
}

/**
 * Gets the cache key for the highlighter.
 *
 * Notice that we don't use `langs` in the cache key because we can dynamically
 * load languages. This allows us to reuse the same highlighter instance for
 * different languages.
 */
function getCacheKey(options?: CreateShikiHighlighterOptions): string {
	const keyCache: unknown[] = [];
	const { theme, themes, langAlias } = options ?? {};
	if (theme) {
		keyCache.push(theme);
	}
	if (themes) {