web: Deduplicate and optimize CodeMirror packages in Vite and Vitest

Define a central list of CodeMirror packages to deduplicate and pre-bundle.
This ensures CodeMirror extension instanceof checks do not fail due to
multiple active package instances across Vite and Vitest.

Author: cfal

web/codemirror-packages.ts

@@ -0,0 +1,22 @@
+export const CODEMIRROR_PACKAGES = [
+	'@codemirror/autocomplete',
+	'@codemirror/commands',
+	'@codemirror/lang-cpp',
+	'@codemirror/lang-css',
+	'@codemirror/lang-html',
+	'@codemirror/lang-java',
+	'@codemirror/lang-javascript',
+	'@codemirror/lang-json',
+	'@codemirror/lang-markdown',
+	'@codemirror/lang-php',
+	'@codemirror/lang-python',
+	'@codemirror/lang-rust',
+	'@codemirror/lang-sql',
+	'@codemirror/lang-xml',
+	'@codemirror/language',
+	'@codemirror/lint',
+	'@codemirror/merge',
+	'@codemirror/state',
+	'@codemirror/theme-one-dark',
+	'@codemirror/view',
+] as const;

web/src/lib/components/files/__tests__/language-loader.test.ts

@@ -0,0 +1,23 @@
+import { Compartment, EditorState } from '@codemirror/state';
+import { describe, expect, it } from 'vitest';
+
+import { loadLanguageExtension } from '../language-loader';
+
+describe('loadLanguageExtension', () => {
+	it('loads a .svelte language extension that CodeMirror can reconfigure', async () => {
+		const languageCompartment = new Compartment();
+		let editorState = EditorState.create({
+			doc: '<script lang="ts">let count = 0;</script>\n<button>{count}</button>',
+			extensions: [languageCompartment.of([])],
+		});
+
+		const extensions = await loadLanguageExtension('Counter.svelte');
+		const transaction = editorState.update({
+			effects: languageCompartment.reconfigure(extensions),
+		});
+		editorState = transaction.state;
+
+		expect(extensions.length).toBeGreaterThan(0);
+		expect(editorState.doc.lines).toBe(2);
+	});
+});

web/vite.config.ts

@@ -3,6 +3,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 import path from 'node:path';
+import { CODEMIRROR_PACKAGES } from './codemirror-packages';
 
 export default defineConfig({
 	plugins: [
@@ -17,6 +18,11 @@ export default defineConfig({
 		alias: {
 			$shared: path.resolve(__dirname, '../common'),
 		},
+		// CodeMirror extensions rely on instanceof checks from @codemirror/state.
+		dedupe: [...CODEMIRROR_PACKAGES],
+	},
+	optimizeDeps: {
+		include: [...CODEMIRROR_PACKAGES],
 	},
 	build: {
 		rollupOptions: {

web/vitest.config.ts

@@ -1,8 +1,12 @@
 import { defineConfig } from 'vitest/config';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { CODEMIRROR_PACKAGES } from './codemirror-packages';
 
 export default defineConfig({
 	plugins: [svelte()],
+	optimizeDeps: {
+		include: [...CODEMIRROR_PACKAGES],
+	},
 	test: {
 		environment: 'happy-dom',
 		globals: true,
@@ -16,5 +20,7 @@ export default defineConfig({
 	},
 	resolve: {
 		conditions: ['browser'],
+		// CodeMirror extensions rely on instanceof checks from @codemirror/state.
+		dedupe: [...CODEMIRROR_PACKAGES],
 	},
 });