@ripple-ts/language-server 0.2.177 → 0.2.179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/language-server",
-  "version": "0.2.177",
+  "version": "0.2.179",
   "description": "Language Server Protocol implementation for Ripple",
   "main": "index.js",
   "bin": {
@@ -19,7 +19,7 @@
     "volar-service-typescript": "0.0.65",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-uri": "^3.1.0",
-    "@ripple-ts/typescript-plugin": "0.2.177"
+    "@ripple-ts/typescript-plugin": "0.2.179"
   },
   "peerDependencies": {
     "typescript": "^5.9.2"

package/src/autoInsertPlugin.js

@@ -1,18 +1,8 @@
 /** @import { LanguageServicePlugin } from '@volar/language-server' */
-/** @import { RippleVirtualCode } from '@ripple-ts/typescript-plugin/src/language.js') */
 
-const { URI } = require('vscode-uri');
+const { getVirtualCode, createLogging } = require('./utils.js');
 
-const DEBUG = process.env.RIPPLE_DEBUG === 'true';
-
-/**
- * @param {...unknown} args
- */
-function log(...args) {
-	if (DEBUG) {
-		console.log('[Ripple Auto-Insert]', ...args);
-	}
-}
+const { log } = createLogging('[Ripple Auto-Insert Plugin]');
 
 /**
  * List of HTML void/self-closing elements that don't need closing tags
@@ -74,18 +64,7 @@ function createAutoInsertPlugin() {
 						return null;
 					}
 
-					const uri = URI.parse(document.uri);
-					const decoded = context.decodeEmbeddedDocumentUri(uri);
-
-					if (!decoded) {
-						return null;
-					}
-
-					const [sourceUri, virtualCodeId] = decoded;
-					const sourceScript = context.language.scripts.get(sourceUri);
-					const virtualCode = /** @type {RippleVirtualCode } */ (
-						sourceScript?.generated?.embeddedCodes.get(virtualCodeId)
-					);
+					const virtualCode = getVirtualCode(document, context);
 
 					// Map position back to source
 					const offset = document.offsetAt(position);

package/src/{diagnosticPlugin.js → compileErrorDiagnosticPlugin.js}

@@ -1,37 +1,17 @@
-const { RippleVirtualCode } = require('@ripple-ts/typescript-plugin/src/language.js');
-const { URI } = require('vscode-uri');
-
 /**
- * @typedef {import('@volar/language-server').LanguageServicePlugin} LanguageServicePlugin
- * @typedef {import('@volar/language-server').LanguageServiceContext} LanguageServiceContext
- * @typedef {import('@volar/language-server').Diagnostic} Diagnostic
- * @typedef {import('@volar/language-server').DiagnosticSeverity} DiagnosticSeverity
- * @typedef {import('@volar/language-server').Position} Position
- * @typedef {import('vscode-languageserver-textdocument').TextDocument} TextDocument
+ * @import {Diagnostic, LanguageServicePlugin, LanguageServiceContext} from '@volar/language-server'
+ * @import {TextDocument} from 'vscode-languageserver-textdocument'
  */
 
-const DEBUG = process.env.RIPPLE_DEBUG === 'true';
+const { getVirtualCode, createLogging } = require('./utils.js');
 
-/**
- * @param {...unknown} args
- */
-function log(...args) {
-	if (DEBUG) {
-		console.log('[Ripple Language]', ...args);
-	}
-}
-
-/**
- * @param {...unknown} args
- */
-function logError(...args) {
-	console.error('[Ripple Language ERROR]', ...args);
-}
+const { log, logError } = createLogging('[Ripple Compile Error Diagnostic Plugin]');
+const { DiagnosticSeverity } = require('@volar/language-server');
 
 /**
  * @returns {LanguageServicePlugin}
  */
-function createDiagnosticPlugin() {
+function createCompileErrorDiagnosticPlugin() {
 	log('Creating Ripple diagnostic plugin...');
 
 	return {
@@ -44,48 +24,42 @@ function createDiagnosticPlugin() {
 		},
 		create(/** @type {LanguageServiceContext} */ context) {
 			return {
-				/**
-				 * @param {TextDocument} document
-				 * @param {import('@volar/language-server').CancellationToken} _token
-				 * @returns {import('@volar/language-server').NullableProviderResult<Diagnostic[]>}
-				 */
 				provideDiagnostics(document, _token) {
 					try {
 						log('Providing Ripple diagnostics for:', document.uri);
 
-						const info = getEmbeddedInfo(context, document);
-
-						if (info && info.virtualCode.errors && info.virtualCode.errors.length > 0) {
-							const virtualCode = info.virtualCode;
-							const diagnostics = [];
-
-							log('Processing', virtualCode.errors.length, 'errors');
-
-							// Convert each stored error to a diagnostic
-							for (const error of virtualCode.errors) {
-								try {
-									// Use the actual snapshot text that Volar is working with
-									const snapshotText = virtualCode.snapshot.getText(
-										0,
-										virtualCode.snapshot.getLength(),
-									);
-									const diagnostic = parseCompilationErrorWithDocument(
-										error,
-										virtualCode.fileName,
-										snapshotText,
-										document,
-									);
-									diagnostics.push(diagnostic);
-								} catch (parseError) {
-									logError('Failed to parse compilation error:', parseError);
-								}
-							}
+						const virtualCode = getVirtualCode(document, context);
 
-							log('Generated', diagnostics.length, 'diagnostics');
-							return diagnostics;
+						if (!virtualCode || !virtualCode.errors || virtualCode.errors.length === 0) {
+							return [];
 						}
 
-						return [];
+						const diagnostics = [];
+
+						log('Processing', virtualCode.errors.length, 'errors');
+
+						// Convert each stored error to a diagnostic
+						for (const error of virtualCode.errors) {
+							try {
+								// Use the actual snapshot text that Volar is working with
+								const snapshotText = virtualCode.snapshot.getText(
+									0,
+									virtualCode.snapshot.getLength(),
+								);
+								const diagnostic = parseCompilationErrorWithDocument(
+									error,
+									virtualCode.fileName,
+									snapshotText,
+									document,
+								);
+								diagnostics.push(diagnostic);
+							} catch (parseError) {
+								logError('Failed to parse compilation error:', parseError);
+							}
+						}
+
+						log('Generated', diagnostics.length, 'diagnostics');
+						return diagnostics;
 					} catch (err) {
 						logError('Failed to provide diagnostics:', err);
 						return [];
@@ -127,7 +101,7 @@ function parseCompilationErrorWithDocument(error, fallbackFileName, sourceText,
 			const zeroBasedEndColumn = Math.max(0, endColumn);
 
 			return {
-				severity: 1, // DiagnosticSeverity.Error
+				severity: DiagnosticSeverity.Error,
 				range: {
 					start: { line: zeroBasedStartLine, character: zeroBasedStartColumn },
 					end: { line: zeroBasedEndLine, character: zeroBasedEndColumn },
@@ -160,7 +134,7 @@ function parseCompilationErrorWithDocument(error, fallbackFileName, sourceText,
 			let length = Math.min(1, sourceText.split('\n')[zeroBasedLine]?.length - actualColumn || 1);
 
 			return {
-				severity: 1, // DiagnosticSeverity.Error
+				severity: DiagnosticSeverity.Error,
 				range: {
 					start: { line: zeroBasedLine, character: actualColumn },
 					end: { line: zeroBasedLine, character: actualColumn + length },
@@ -175,7 +149,7 @@ function parseCompilationErrorWithDocument(error, fallbackFileName, sourceText,
 			const endPosition = document.positionAt(Math.min(1, sourceText.length));
 
 			return {
-				severity: 1, // DiagnosticSeverity.Error
+				severity: DiagnosticSeverity.Error,
 				range: {
 					start: startPosition,
 					end: endPosition,
@@ -189,7 +163,7 @@ function parseCompilationErrorWithDocument(error, fallbackFileName, sourceText,
 		logError('Error parsing compilation error:', parseError);
 
 		return {
-			severity: 1,
+			severity: DiagnosticSeverity.Error,
 			range: {
 				start: { line: 0, character: 0 },
 				end: { line: 0, character: 1 },
@@ -201,40 +175,6 @@ function parseCompilationErrorWithDocument(error, fallbackFileName, sourceText,
 	}
 }
 
-/**
- * @param {LanguageServiceContext} context
- * @param {TextDocument} document
- */
-function getEmbeddedInfo(context, document) {
-	try {
-		const uri = URI.parse(document.uri);
-		const decoded = context.decodeEmbeddedDocumentUri(uri);
-		if (!decoded) {
-			return;
-		}
-
-		const [documentUri, embeddedCodeId] = decoded;
-
-		const sourceScript = context.language.scripts.get(documentUri);
-		if (!sourceScript?.generated) {
-			return;
-		}
-
-		const virtualCode = sourceScript.generated.embeddedCodes.get(embeddedCodeId);
-		if (!(virtualCode instanceof RippleVirtualCode)) {
-			return;
-		}
-
-		return {
-			sourceScript: sourceScript,
-			virtualCode,
-		};
-	} catch (err) {
-		logError('Failed to get embedded info:', err);
-		return null;
-	}
-}
-
 module.exports = {
-	createDiagnosticPlugin,
+	createCompileErrorDiagnosticPlugin,
 };

package/src/completionPlugin.js

@@ -1,20 +1,11 @@
 /**
- * @typedef {import('@volar/language-server').LanguageServicePlugin} LanguageServicePlugin
+ * @import {LanguageServicePlugin} from '@volar/language-server'
  */
 
 const { CompletionItemKind, InsertTextFormat } = require('@volar/language-server');
-const { URI } = require('vscode-uri');
+const { getVirtualCode, createLogging } = require('./utils.js');
 
-const DEBUG = process.env.RIPPLE_DEBUG === 'true';
-
-/**
- * @param {...unknown} args
- */
-function log(...args) {
-	if (DEBUG) {
-		console.log('[Ripple Completion]', ...args);
-	}
-}
+const { log } = createLogging('[Ripple Completion Plugin]');
 
 /**
  * Ripple-specific completion enhancements
@@ -143,6 +134,15 @@ const RIPPLE_SNIPPETS = [
 		insertTextFormat: InsertTextFormat.Snippet,
 		sortText: '0-untrack',
 	},
+	{
+		label: 'try-pending',
+		kind: CompletionItemKind.Snippet,
+		detail: 'try...pending block',
+		documentation: 'Handle async content with loading fallback',
+		insertText: "try {\n\t$1\n} pending {\n\t<div>{'Loading...'}</div>\n}",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-try-pending',
+	},
 ];
 
 /**
@@ -217,22 +217,13 @@ function createCompletionPlugin() {
 						return { items: [], isIncomplete: false };
 					}
 
+					const virtualCode = getVirtualCode(document, context);
+
 					// Check if we're inside an embedded code (like CSS in <style> blocks)
 					// If so, don't provide Ripple snippets - let CSS completions take priority
-					const uri = URI.parse(document.uri);
-					const decoded = context.decodeEmbeddedDocumentUri(uri);
-					if (decoded) {
-						const [documentUri, embeddedCodeId] = decoded;
-						const sourceScript = context.language.scripts.get(documentUri);
-
-						if (sourceScript?.generated) {
-							const virtualCode = sourceScript.generated.embeddedCodes.get(embeddedCodeId);
-							// If we're in a CSS embedded code (from <style> blocks), skip Ripple completions
-							if (virtualCode && virtualCode.languageId === 'css') {
-								log('Skipping Ripple completions in CSS context');
-								return { items: [], isIncomplete: false };
-							}
-						}
+					if (virtualCode && virtualCode.languageId === 'css') {
+						log('Skipping Ripple completions in CSS context');
+						return { items: [], isIncomplete: false };
 					}
 
 					const line = document.getText({
@@ -296,26 +287,6 @@ function createCompletionPlugin() {
 	};
 }
 
-/**
- * Heuristic to detect if we're inside a component template
- * @param {string} text
- * @returns {boolean}
- */
-function isLikelyInTemplate(text) {
-	// Simple heuristic: inside component body after opening brace
-	const componentMatch = text.match(/component\s+\w+\([^)]*\)\s*\{/);
-	if (!componentMatch || componentMatch.index === undefined) return false;
-
-	// Count braces to see if we're inside
-	let braceCount = 0;
-	for (let i = componentMatch.index + componentMatch[0].length; i < text.length; i++) {
-		if (text[i] === '{') braceCount++;
-		if (text[i] === '}') braceCount--;
-	}
-
-	return braceCount > 0;
-}
-
 module.exports = {
 	createCompletionPlugin,
 };

package/src/definitionPlugin.js

@@ -1,18 +1,8 @@
 /** @import { LanguageServicePlugin } from '@volar/language-server' */
-/** @import { RippleVirtualCode } from '@ripple-ts/typescript-plugin/src/language.js') */
 
-const { URI } = require('vscode-uri');
+const { getVirtualCode, createLogging } = require('./utils.js');
 
-const DEBUG = process.env.RIPPLE_DEBUG === 'true';
-
-/**
- * @param {...unknown} args
- */
-function log(...args) {
-	if (DEBUG) {
-		console.log('[Ripple Definition]', ...args);
-	}
-}
+const { log } = createLogging('[Ripple Definition Plugin]');
 
 /**
  * @returns {LanguageServicePlugin}
@@ -26,9 +16,6 @@ function createDefinitionPlugin() {
 		create(context) {
 			return {
 				async provideDefinition(document, position, token) {
-					const uri = URI.parse(document.uri);
-					const decoded = context.decodeEmbeddedDocumentUri(uri);
-
 					// Get TypeScript definition from typescript-semantic service
 					let tsDefinitions = [];
 					for (const [plugin, instance] of context.plugins) {
@@ -47,17 +34,6 @@ function createDefinitionPlugin() {
 						return;
 					}
 
-					// If not in a Ripple embedded context, just return TypeScript results
-					if (!decoded) {
-						return tsDefinitions;
-					}
-
-					const [sourceUri, virtualCodeId] = decoded;
-					const sourceScript = context.language.scripts.get(sourceUri);
-					const virtualCode = /** @type {RippleVirtualCode } */ (
-						sourceScript?.generated?.embeddedCodes.get(virtualCodeId)
-					);
-
 					// Get the range from TypeScript's definition to find the exact token
 					// This gives us the precise start and end of the token (e.g., "function")
 					const firstDefinition = tsDefinitions[0];
@@ -69,6 +45,8 @@ function createDefinitionPlugin() {
 					const rangeStart = document.offsetAt(range.start);
 					const rangeEnd = document.offsetAt(range.end);
 
+					const virtualCode = getVirtualCode(document, context);
+
 					// Find the mapping using the exact token range for O(1) lookup
 					const mapping = virtualCode.findMappingByGeneratedRange(rangeStart, rangeEnd);
 

package/src/documentHighlightPlugin.js

@@ -0,0 +1,121 @@
+/** @import { LanguageServicePlugin } from '@volar/language-server' */
+/** @import { LanguageServicePluginInstance } from '@volar/language-server' */
+
+const { getVirtualCode, getWordFromPosition, createLogging } = require('./utils.js');
+const { log } = createLogging('[Ripple Document Highlight Plugin]');
+
+/**
+ * Document Highlight plugin for Ripple
+ * Provides word highlighting (grey background) for custom Ripple keywords like 'pending'
+ * @returns {LanguageServicePlugin}
+ */
+function createDocumentHighlightPlugin() {
+	return {
+		name: 'ripple-document-highlight',
+		capabilities: {
+			documentHighlightProvider: true,
+		},
+		create(context) {
+			/** @type {LanguageServicePluginInstance['provideDocumentHighlights']} */
+			let originalProvideDocumentHighlights;
+			/** @type {LanguageServicePluginInstance} */
+			let originalInstance;
+
+			// Get TypeScript's document highlights provider
+			for (const [plugin, instance] of context.plugins) {
+				if (plugin.name === 'typescript-semantic' && instance.provideDocumentHighlights) {
+					originalInstance = instance;
+					originalProvideDocumentHighlights = instance.provideDocumentHighlights;
+					instance.provideDocumentHighlights = undefined;
+					break;
+				}
+			}
+
+			if (!originalProvideDocumentHighlights) {
+				log(
+					"'typescript-semantic plugin' was not found or has no 'provideDocumentHighlights'. \
+					Document highlights will be limited to custom Ripple keywords only.",
+				);
+			}
+
+			return {
+				async provideDocumentHighlights(document, position, token) {
+					if (!originalProvideDocumentHighlights) {
+						return null;
+					}
+
+					let tsHighlights = await originalProvideDocumentHighlights.call(
+						originalInstance,
+						document,
+						position,
+						token,
+					);
+
+					if (!tsHighlights || tsHighlights.length > 0) {
+						// If TypeScript recognized tokens and provided highlights, return them
+						return tsHighlights;
+					}
+
+					const virtualCode = getVirtualCode(document, context);
+
+					if (!virtualCode) {
+						return tsHighlights;
+					}
+
+					// Check if we're on a custom Ripple keyword
+					const offset = document.offsetAt(position);
+					const text = document.getText();
+
+					// Find word boundaries
+					const { word } = getWordFromPosition(text, offset);
+
+					// If the word is a Ripple keyword, find all occurrences in the document
+
+					const regex = new RegExp(`\\b${word}\\b`, 'g');
+					let match;
+
+					while ((match = regex.exec(text)) !== null) {
+						const start = match.index;
+						const end = match.index + word.length;
+						const mapping = virtualCode.findMappingByGeneratedRange(start, end);
+
+						if (!mapping) {
+							// If no mapping, skip all others as well
+							// This shouldn't happen as TS handles only mapped ranges
+							return tsHighlights;
+						}
+
+						if (!mapping.data.customData?.wordHighlight?.kind) {
+							// Skip if we didn't define word highlighting in segments
+							continue;
+						}
+
+						if (!tsHighlights) {
+							tsHighlights = [];
+						}
+
+						tsHighlights.push({
+							range: {
+								start: document.positionAt(start),
+								end: document.positionAt(end),
+							},
+
+							kind: mapping.data.customData.wordHighlight.kind,
+						});
+					}
+
+					if (tsHighlights.length > 0) {
+						log(`Found ${tsHighlights.length} occurrences of '${word}'`);
+					}
+
+					// Return TypeScript highlights if no custom keyword was found
+					return [...tsHighlights];
+				},
+			};
+		},
+	};
+}
+
+module.exports = {
+	createDocumentHighlightPlugin,
+};

package/src/hoverPlugin.js

@@ -1,26 +1,9 @@
 /** @import { LanguageServicePlugin } from '@volar/language-server' */
-/** @import { RippleVirtualCode } from '@ripple-ts/typescript-plugin/src/language.js') */
-/** @typedef {import('@volar/language-server').LanguageServicePluginInstance} LanguageServicePluginInstance */
+/** @import { LanguageServicePluginInstance } from '@volar/language-server' */
 
-const { URI } = require('vscode-uri');
+const { getVirtualCode, createLogging } = require('./utils.js');
 
-const DEBUG = process.env.RIPPLE_DEBUG === 'true';
-
-/**
- * @param {...unknown} args
- */
-function log(...args) {
-	if (DEBUG) {
-		console.log('[Ripple Hover]', ...args);
-	}
-}
-
-/**
- * @param {...unknown} args
- */
-function logError(...args) {
-	console.error('[Ripple Hover]', ...args);
-}
+const { log, logError } = createLogging('[Ripple Hover Plugin]');
 
 /**
  * @returns {LanguageServicePlugin}
@@ -55,9 +38,6 @@ function createHoverPlugin() {
 			}
 			return {
 				async provideHover(document, position, token) {
-					const uri = URI.parse(document.uri);
-					const decoded = context.decodeEmbeddedDocumentUri(uri);
-
 					// Get TypeScript hover from typescript-semantic service
 					let tsHover = null;
 					if (originalProvideHover) {
@@ -65,23 +45,13 @@ function createHoverPlugin() {
 					}
 
 					// If no TypeScript hover, nothing to modify
-					if (!tsHover) {
+					if (!tsHover || !tsHover.range) {
 						return;
 					}
 
-					// If not in a Ripple embedded context, just return TypeScript results
-					if (!decoded) {
-						return tsHover;
-					}
+					const virtualCode = getVirtualCode(document, context);
 
-					const [sourceUri, virtualCodeId] = decoded;
-					const sourceScript = context.language.scripts.get(sourceUri);
-					const virtualCode = /** @type {RippleVirtualCode } */ (
-						sourceScript?.generated?.embeddedCodes.get(virtualCodeId)
-					);
-
-					// If there's no range to adjust, return as-is
-					if (!tsHover.range) {
+					if (!virtualCode) {
 						return tsHover;
 					}
 
@@ -95,6 +65,26 @@ function createHoverPlugin() {
 						return tsHover;
 					}
 
+					const customHover = mapping?.data?.customData?.hover;
+					if (customHover) {
+						log('Found custom hover data in mapping');
+						return {
+							contents: {
+								kind: 'markdown',
+								value: customHover.contents,
+							},
+							range: {
+								start: position,
+								end: position,
+							},
+						};
+					} else if (customHover === false) {
+						log(
+							`Hover explicitly suppressed in mapping at range start: ${rangeStart}, end: ${rangeEnd}`,
+						);
+						return null;
+					}
+
 					log('Found mapping for hover at range', 'start: ', rangeStart, 'end: ', rangeEnd);
 
 					// Check if source length is greater than generated length (component -> function)

package/src/server.js

@@ -1,13 +1,18 @@
-const {
+/** @import {CompilerOptions} from 'typescript' */
+
+const { createLogging } = require('./utils.js');
+const {
 	createConnection,
 	createServer,
 	createTypeScriptProject,
 } = require('@volar/language-server/node');
-const { createDiagnosticPlugin } = require('./diagnosticPlugin.js');
+const { createCompileErrorDiagnosticPlugin } = require('./compileErrorDiagnosticPlugin.js');
 const { createDefinitionPlugin } = require('./definitionPlugin.js');
 const { createHoverPlugin } = require('./hoverPlugin.js');
 const { createCompletionPlugin } = require('./completionPlugin.js');
 const { createAutoInsertPlugin } = require('./autoInsertPlugin.js');
+const { createTypeScriptDiagnosticFilterPlugin } = require('./typescriptDiagnosticPlugin.js');
+const { createDocumentHighlightPlugin } = require('./documentHighlightPlugin.js');
 const {
 	getRippleLanguagePlugin,
 	resolveConfig,
@@ -15,25 +20,7 @@ const {
 const { createTypeScriptServices } = require('./typescriptService.js');
 const { create: createCssService } = require('volar-service-css');
 
-const DEBUG = process.env.RIPPLE_DEBUG === 'true';
-
-/** @typedef {import('typescript').CompilerOptions} CompilerOptions */
-
-/**
- * @param {...unknown} args
- */
-function log(...args) {
-	if (DEBUG) {
-		console.log('[Ripple Server]', ...args);
-	}
-}
-
-/**
- * @param {...unknown} args
- */
-function logError(...args) {
-	console.error('[Ripple Server ERROR]', ...args);
-}
+const { log, logError } = createLogging('[Ripple Language Server]');
 
 function createRippleLanguageServer() {
 	const connection = createConnection();
@@ -110,13 +97,16 @@ function createRippleLanguageServer() {
 				[
 					createAutoInsertPlugin(),
 					createCompletionPlugin(),
-					createDiagnosticPlugin(),
+					createCompileErrorDiagnosticPlugin(),
 					createDefinitionPlugin(),
 					createCssService(),
 					...createTypeScriptServices(ts),
-					// !IMPORTANT createHoverPlugin has to be loaded after Volar's ts plugins
-					// to overwrite `typescript-semantic` plugin's `provideHover`
+					// !IMPORTANT 'createTypeScriptDiagnosticFilterPlugin', 'createHoverPlugin',
+					// and 'createDocumentHighlightPlugin' must come after TypeScript services
+					// to intercept volar's and vscode default providers
+					createTypeScriptDiagnosticFilterPlugin(),
 					createHoverPlugin(),
+					createDocumentHighlightPlugin(),
 				],
 			);
 

package/src/typescriptDiagnosticPlugin.js

@@ -0,0 +1,103 @@
+/** @import { LanguageServicePlugin } from '@volar/language-server' */
+/** @import { LanguageServicePluginInstance } from '@volar/language-server' */
+
+const { getVirtualCode, createLogging } = require('./utils.js');
+
+const { log, logError } = createLogging('[Ripple TypeScript Diagnostic Plugin]');
+
+/**
+ * @returns {LanguageServicePlugin}
+ */
+function createTypeScriptDiagnosticFilterPlugin() {
+	log('Creating TypeScript diagnostic filter plugin...');
+
+	return {
+		name: 'ripple-typescript-diagnostic-filter',
+		capabilities: {
+			diagnosticProvider: {
+				interFileDependencies: false,
+				workspaceDiagnostics: false,
+			},
+		},
+		create(context) {
+			/** @type {LanguageServicePluginInstance['provideDiagnostics']} */
+			let originalProvideDiagnostics;
+			/** @type {LanguageServicePluginInstance} */
+			let originalInstance;
+
+			// Disable typescript-semantic's provideDiagnostics so it doesn't merge with ours
+			for (const [plugin, instance] of context.plugins) {
+				if (plugin.name === 'typescript-semantic') {
+					originalInstance = instance;
+					originalProvideDiagnostics = instance.provideDiagnostics;
+					instance.provideDiagnostics = undefined;
+					break;
+				}
+			}
+
+			if (!originalProvideDiagnostics) {
+				logError(
+					"'typescript-semantic plugin' was not found or has no 'provideDiagnostics'. \
+					This plugin must be loaded after Volar's typescript-semantic plugin.",
+				);
+			}
+
+			return {
+				async provideDiagnostics(document, token) {
+					let diagnostics;
+
+					if (originalProvideDiagnostics) {
+						diagnostics = await originalProvideDiagnostics.call(originalInstance, document, token);
+					}
+
+					if (!diagnostics || diagnostics.length === 0) {
+						return diagnostics;
+					}
+
+					log(`Filtering ${diagnostics.length} TypeScript diagnostics for ${document.uri}`);
+
+					const virtualCode = getVirtualCode(document, context);
+
+					const filtered = diagnostics.filter((diagnostic) => {
+						const range = diagnostic.range;
+						const rangeStart = document.offsetAt(range.start);
+						const rangeEnd = document.offsetAt(range.end);
+						// Get the mapping at this diagnostic position
+						const mapping = virtualCode.findMappingByGeneratedRange(rangeStart, rangeEnd);
+
+						if (!mapping) {
+							return true;
+						}
+
+						const suppressedCodes = mapping.data.customData?.suppressedDiagnostics;
+
+						if (!suppressedCodes || suppressedCodes.length === 0) {
+							return true;
+						}
+
+						const diagnosticCode =
+							typeof diagnostic.code === 'number'
+								? diagnostic.code
+								: typeof diagnostic.code === 'string'
+									? parseInt(diagnostic.code)
+									: null;
+
+						if (diagnosticCode && suppressedCodes.includes(diagnosticCode)) {
+							log(`Suppressing diagnostic ${diagnosticCode}: ${diagnostic.message}`);
+							return false; // Filter out this diagnostic
+						}
+
+						return true; // Keep this diagnostic
+					});
+
+					log(`Filtered from ${diagnostics.length} to ${filtered.length} diagnostics`);
+					return filtered;
+				},
+			};
+		},
+	};
+}
+
+module.exports = {
+	createTypeScriptDiagnosticFilterPlugin,
+};

package/src/typescriptService.js

@@ -1,6 +1,6 @@
 /**
- * @typedef {import('@volar/language-server').LanguageServiceContext} LanguageServiceContext
- * @typedef {import('vscode-languageserver-textdocument').TextDocument} TextDocument
+ * @import {LanguageServiceContext} from '@volar/language-server'
+ * @import {TextDocument} from 'vscode-languageserver-textdocument'
  */
 
 // Monkey-patch getUserPreferences before requiring the main module

package/src/utils.js

@@ -0,0 +1,58 @@
+/** @import { TextDocument } from 'vscode-languageserver-textdocument' */
+/** @import { LanguageServiceContext } from '@volar/language-server' */
+/** @import {RippleVirtualCode} from '@ripple-ts/typescript-plugin/src/language.js' */
+
+const { URI } = require('vscode-uri');
+const { createLogging, DEBUG } = require('@ripple-ts/typescript-plugin/src/utils.js');
+
+/**
+ * Get virtual code from the encoded document URI
+ * @param {LanguageServiceContext} context
+ * @param {TextDocument} document
+ * @returns {RippleVirtualCode}
+ */
+function getVirtualCode(document, context) {
+	const uri = URI.parse(document.uri);
+	const decoded = /** @type {[documentUri: URI, embeddedCodeId: string]} */ (
+		context.decodeEmbeddedDocumentUri(uri)
+	);
+	const [sourceUri, virtualCodeId] = decoded;
+	const sourceScript = context.language.scripts.get(sourceUri);
+	const virtualCode = /** @type {RippleVirtualCode} */ (
+		sourceScript?.generated?.embeddedCodes.get(virtualCodeId)
+	);
+
+	return virtualCode;
+}
+
+/**
+ * Get the word at a specific position in the text
+ * @param {string} text
+ * @param {number} start
+ * @returns {{word: string, start: number, end: number}}
+ */
+function getWordFromPosition(text, start) {
+	let wordStart = start;
+	let wordEnd = start;
+	while (wordStart > 0 && /\w/.test(text[wordStart - 1])) {
+		wordStart--;
+	}
+	while (wordEnd < text.length && /\w/.test(text[wordEnd])) {
+		wordEnd++;
+	}
+
+	const word = text.substring(wordStart, wordEnd);
+
+	return {
+		word,
+		start: wordStart,
+		end: wordEnd,
+	};
+}
+
+module.exports = {
+	getVirtualCode,
+	getWordFromPosition,
+	createLogging,
+	DEBUG,
+};