web: Deduplicate CodeMirror packages in Vite and Vitest configs

Consolidate all CodeMirror packages into a shared list to deduplicate and
inline them. This ensures instanceof checks (e.g., from
@codemirror/state) function correctly by preventing mixed external and
Vite-transformed package copies. Also adds a unit test for loading
language extensions in 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,5 +1,6 @@
 import { defineConfig } from 'vitest/config';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { CODEMIRROR_PACKAGES } from './codemirror-packages';
 
 export default defineConfig({
 	plugins: [svelte()],
@@ -8,6 +9,13 @@ export default defineConfig({
 		globals: true,
 		setupFiles: ['./src/test/vitest-setup.ts'],
 		include: ['src/**/*.test.ts'],
+		server: {
+			deps: {
+				// CodeMirror extensions rely on instanceof checks from @codemirror/state.
+				// Inline the whole family so Vitest cannot mix externalized and Vite-transformed copies.
+				inline: [...CODEMIRROR_PACKAGES],
+			},
+		},
 		alias: {
 			$lib: new URL('./src/lib', import.meta.url).pathname,
 			$app: new URL('./src/lib/mocks/app', import.meta.url).pathname,
@@ -16,5 +24,7 @@ export default defineConfig({
 	},
 	resolve: {
 		conditions: ['browser'],
+		// CodeMirror extensions rely on instanceof checks from @codemirror/state.
+		dedupe: [...CODEMIRROR_PACKAGES],
 	},
 });