Improve <Code> error messages, fix theme option edge case (#328)

hippotastic · web-flow · commit 013f07a476d0 · 2025-04-22T13:39:43.000+02:00
diff --git a/.changeset/fifty-llamas-build.md b/.changeset/fifty-llamas-build.md
@@ -0,0 +1,5 @@
+---
+'astro-expressive-code': patch
+---
+
+Fixes an issue where the deprecated, but still available `theme` option was not being taken into account during SSR bundle trimming.
diff --git a/.changeset/hot-dodos-draw.md b/.changeset/hot-dodos-draw.md
@@ -0,0 +1,5 @@
+---
+'astro-expressive-code': patch
+---
+
+Improves the error message when the `<Code>` component is being used on a page without having the Astro integration enabled in the project.
diff --git a/packages/astro-expressive-code/components/renderer.ts b/packages/astro-expressive-code/components/renderer.ts
@@ -11,6 +11,25 @@ async function createRenderer() {
 	const { astroConfig, ecConfigFileOptions, ecIntegrationOptions = {} } = await import('virtual:astro-expressive-code/config')
 	const { createAstroRenderer, mergeEcConfigOptions } = await import('virtual:astro-expressive-code/api')
 
+	if (typeof mergeEcConfigOptions !== 'function') {
+		throw new Error(
+			`You are trying to use Expressive Code's \`<Code>\` component, but the Expressive Code
+			Astro integration is not enabled in your project.
+
+			If you are using Starlight, ensure that its default Expressive Code integration
+			was not disabled by you or your themes or plugins.
+
+			If you are not a Starlight user, ensure that Expressive Code was added to
+			\`integrations\` in your Astro config file.
+
+			In case you don't want to use Expressive Code, you can import Astro's own \`<Code>\`
+			component from \`astro:components\` instead.`
+				.split(/\r?\n[ \t]*\r?\n/)
+				.map((s) => s.replace(/\s+/g, ' ').trim())
+				.join('\n\n')
+		)
+	}
+
 	const strIntegrationOptions = JSON.stringify(ecIntegrationOptions)
 	if (strIntegrationOptions.includes('"[Function]"') || strIntegrationOptions.includes("'[Circular]'")) {
 		throw new Error(
diff --git a/packages/astro-expressive-code/src/vite-plugin.ts b/packages/astro-expressive-code/src/vite-plugin.ts
@@ -58,7 +58,12 @@ export function vitePluginAstroExpressiveCode({
 	// Prepare Shiki-related SSR bundle trimming
 	const shikiConfig = typeof processedEcConfig.shiki === 'object' ? processedEcConfig.shiki : {}
 	const configuredEngine = shikiConfig.engine === 'javascript' ? 'javascript' : 'oniguruma'
-	const configuredBundledThemes: string[] = (processedEcConfig.themes ?? []).filter((theme) => typeof theme === 'string')
+	// Extract any bundled theme names from the config, supporting the deprecated `theme` option
+	// and the current `themes` option
+	const anyThemeOrThemes = processedEcConfig as unknown as { theme: string | string[]; themes: string | string[] }
+	const effectiveThemesOrTheme = anyThemeOrThemes.themes ?? anyThemeOrThemes.theme ?? []
+	const effectiveThemes = Array.isArray(effectiveThemesOrTheme) ? effectiveThemesOrTheme : [effectiveThemesOrTheme]
+	const configuredBundledThemes = effectiveThemes.filter((theme) => typeof theme === 'string')
 	const shikiAssetRegExp = /(?<=\n)\s*\{[\s\S]*?"id": "(.*?)",[\s\S]*?\n\s*\},?\s*\n/g
 
 	const noQuery = (source: string) => source.split('?')[0]

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro-expressive-code': patch
 +---
++
 +Fixes an issue where the deprecated, but still available `theme` option was not being taken into account during SSR bundle trimming.