@ripple-ts/language-server 0.2.174 → 0.2.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/language-server",
-  "version": "0.2.174",
+  "version": "0.2.176",
   "description": "Language Server Protocol implementation for Ripple",
   "main": "index.js",
   "bin": {
@@ -15,10 +15,11 @@
   },
   "dependencies": {
     "@volar/language-server": "~2.4.23",
+    "volar-service-css": "0.0.65",
     "volar-service-typescript": "0.0.65",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-uri": "^3.1.0",
-    "@ripple-ts/typescript-plugin": "0.2.174"
+    "@ripple-ts/typescript-plugin": "0.2.176"
   },
   "peerDependencies": {
     "typescript": "^5.9.2"

package/src/autoInsertPlugin.js

@@ -0,0 +1,183 @@
+/** @import { LanguageServicePlugin } from '@volar/language-server' */
+/** @import { RippleVirtualCode } from '@ripple-ts/typescript-plugin/src/language.js') */
+
+const { URI } = require('vscode-uri');
+
+const DEBUG = process.env.RIPPLE_DEBUG === 'true';
+
+/**
+ * @param {...unknown} args
+ */
+function log(...args) {
+	if (DEBUG) {
+		console.log('[Ripple Auto-Insert]', ...args);
+	}
+}
+
+/**
+ * List of HTML void/self-closing elements that don't need closing tags
+ * https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+ */
+const VOID_ELEMENTS = new Set([
+	'area',
+	'base',
+	'br',
+	'col',
+	'command',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr',
+]);
+
+/**
+ * Auto-insert plugin for Ripple
+ * Handles auto-closing tags when typing '>' after a tag name
+ * @returns {LanguageServicePlugin}
+ */
+function createAutoInsertPlugin() {
+	return {
+		name: 'ripple-auto-insert',
+		capabilities: {
+			autoInsertionProvider: {
+				triggerCharacters: ['>'],
+				configurationSections: ['ripple.autoClosingTags'],
+			},
+			documentOnTypeFormattingProvider: {
+				triggerCharacters: ['>'],
+			},
+		},
+		// leaving context for future use
+		create(context) {
+			return {
+				/**
+				 * @param {import('vscode-languageserver-textdocument').TextDocument} document
+				 * @param {import('@volar/language-server').Position} position
+				 * @param {{ rangeOffset: number; rangeLength: number; text: string }} lastChange
+				 * @param {import('@volar/language-server').CancellationToken} _token
+				 * @returns {Promise<string | null>}
+				 */
+				async provideAutoInsertSnippet(document, position, lastChange, _token) {
+					if (!document.uri.endsWith('.ripple')) {
+						return null;
+					}
+
+					// Only checking for '>' insertions
+					if (!lastChange.text.endsWith('>')) {
+						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)
+					);
+
+					// Map position back to source
+					const offset = document.offsetAt(position);
+					const mapping = virtualCode.findMappingByGeneratedRange(lastChange.rangeOffset, offset);
+
+					if (!mapping) {
+						return null;
+					}
+
+					const sourceOffset = mapping.sourceOffsets[0];
+
+					// search backwards from sourceOffset to find the line tag
+					const sourceCode = virtualCode.originalCode;
+					if (sourceCode[sourceOffset - 1] === '/') {
+						// self-closing tag '/>'
+						return null;
+					}
+
+					let attempts = 0;
+					let found = false;
+					let i = sourceOffset - 1;
+					for (; i >= 0; i--) {
+						const char = sourceCode[i];
+						if (char === '<') {
+							attempts++;
+							// Confirm that it's definitely the start of the tag
+							// We have `<` and `>` in source maps
+							if (virtualCode.findMappingBySourceRange(i, i + 1)) {
+								found = true;
+								break;
+							}
+						}
+
+						if (attempts === 3) {
+							break;
+						}
+					}
+
+					if (!found) {
+						// This shouldn't happen in reality
+						log(`No opening tag position found from source position ${sourceOffset}`);
+						return null;
+					}
+
+					const line = sourceCode.slice(i, sourceOffset + 1);
+
+					log('Auto-insert triggered at:', {
+						selection: `${position.line}:${position.character}`,
+						line,
+						change: lastChange,
+						sourceOffset,
+					});
+
+					// Check if we just typed '>' after a tag name
+					// Match patterns like: <div> or <Component> but not <div /> or <Component/>
+					const tagMatch = line.match(/<([@$\w][\w.-]*)[^>]*?(?<!\/)>$/);
+					if (!tagMatch) {
+						log('No tag match found');
+						return null;
+					}
+
+					const tagName = tagMatch[1];
+					log('Tag matched:', tagName);
+
+					// Don't auto-close void elements (self-closing HTML tags)
+					if (VOID_ELEMENTS.has(tagName.toLowerCase())) {
+						log('Void element, skipping auto-close:', tagName);
+						return null;
+					}
+
+					// Check if there's already a closing tag ahead
+					const restOfLine = document.getText({
+						start: position,
+						end: { line: position.line, character: position.character + 100 },
+					});
+					if (restOfLine.startsWith(`</${tagName}>`)) {
+						log('Closing tag already exists, skipping');
+						return null;
+					}
+
+					// Insert the closing tag
+					const closingTag = `</${tagName}>`;
+					log('Inserting closing tag:', closingTag);
+
+					// Return a snippet with $0 to place cursor between the tags
+					return `$0${closingTag}`;
+				},
+			};
+		},
+	};
+}
+
+module.exports = {
+	createAutoInsertPlugin,
+};

package/src/completionPlugin.js

@@ -0,0 +1,321 @@
+/**
+ * @typedef {import('@volar/language-server').LanguageServicePlugin} LanguageServicePlugin
+ */
+
+const { CompletionItemKind, InsertTextFormat } = require('@volar/language-server');
+const { URI } = require('vscode-uri');
+
+const DEBUG = process.env.RIPPLE_DEBUG === 'true';
+
+/**
+ * @param {...unknown} args
+ */
+function log(...args) {
+	if (DEBUG) {
+		console.log('[Ripple Completion]', ...args);
+	}
+}
+
+/**
+ * Ripple-specific completion enhancements
+ * Adds custom completions for Ripple syntax patterns
+ */
+const RIPPLE_SNIPPETS = [
+	{
+		label: 'component',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Ripple Component',
+		documentation: 'Create a new Ripple component',
+		insertText: 'component ${1:ComponentName}(${2:props}) {\n\t$0\n}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-component',
+	},
+	{
+		label: 'track',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Reactive state with track',
+		documentation: 'Create a reactive tracked value',
+		insertText: 'let ${1:name} = track(${2:initialValue});',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-track',
+	},
+	{
+		label: 'track-derived',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Derived reactive value',
+		documentation: 'Create a derived reactive value',
+		insertText: 'let ${1:name} = track(() => ${2:@dependency});',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-track-derived',
+	},
+	{
+		label: 'track-getter-setter',
+		kind: CompletionItemKind.Snippet,
+		detail: 'track with get/set',
+		documentation: 'Create tracked value with custom getter/setter',
+		insertText:
+			'let ${1:name} = track(${2:0},\n\t(current) => {\n\t\t$3\n\t\treturn current;\n\t},\n\t(next, prev) => {\n\t\t$4\n\t\treturn next;\n\t}\n);',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-track-getter-setter',
+	},
+	{
+		label: 'trackSplit',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Split props with trackSplit',
+		documentation: 'Destructure props while preserving reactivity',
+		insertText: "const [${1:children}, ${2:rest}] = trackSplit(props, [${3:'children'}]);",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-trackSplit',
+	},
+	{
+		label: 'effect',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Create an effect',
+		documentation: 'Run side effects when reactive dependencies change',
+		insertText: 'effect(() => {\n\t${1:console.log(@value);}\n});',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-effect',
+	},
+	{
+		label: 'for-of',
+		kind: CompletionItemKind.Snippet,
+		detail: 'for...of loop',
+		documentation: 'Iterate over items in Ripple template',
+		insertText: 'for (const ${1:item} of ${2:items}) {\n\t<${3:li}>{${1:item}}</${3:li}>\n}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-for-of',
+	},
+	{
+		label: 'for-index',
+		kind: CompletionItemKind.Snippet,
+		detail: 'for...of loop with index',
+		documentation: 'Iterate with index',
+		insertText:
+			'for (const ${1:item} of ${2:items}; index ${3:i}) {\n\t<${4:li}>{${1:item}}{" at "}{${3:i}}</${4:li}>\n}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-for-index',
+	},
+	{
+		label: 'for-key',
+		kind: CompletionItemKind.Snippet,
+		detail: 'for...of loop with key',
+		documentation: 'Iterate with key for identity',
+		insertText:
+			'for (const ${1:item} of ${2:items}; key ${1:item}.${3:id}) {\n\t<${4:li}>{${1:item}.${5:text}}</${4:li}>\n}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-for-key',
+	},
+	{
+		label: 'for-index-key',
+		kind: CompletionItemKind.Snippet,
+		detail: 'for...of loop with key',
+		documentation: 'Iterate with key for identity',
+		insertText:
+			"for (const ${1:item} of ${2:items}; index ${3:i}; key ${1:item}.${4:id}) {\n\t<${5:li}>{${1:item}.${6:text}}{' at index '}{${3}}</${5:li}>\n}",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-for-key-index',
+	},
+	{
+		label: 'if-else',
+		kind: CompletionItemKind.Snippet,
+		detail: 'if...else statement',
+		documentation: 'Conditional rendering',
+		insertText: 'if (${1:condition}) {\n\t$2\n} else {\n\t$3\n}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-if-else',
+	},
+	{
+		label: 'switch-case',
+		kind: CompletionItemKind.Snippet,
+		detail: 'switch statement',
+		documentation: 'Switch-based conditional rendering',
+		insertText:
+			"switch (${1:value}) {\n\tcase ${2:'case1'}:\n\t\t$3\n\t\tbreak;\n\tcase ${4:'case2'}:\n\t\t$5\n\t\tbreak;\n\tdefault:\n\t\t$6\n}",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-switch-case',
+	},
+	{
+		label: 'untrack',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Untrack reactive value',
+		documentation: 'Read reactive value without creating dependency',
+		insertText: 'untrack(() => @${1:value})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-untrack',
+	},
+];
+
+/**
+ * Import suggestions for Ripple
+ */
+const RIPPLE_IMPORTS = [
+	{
+		label: 'import track',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Import track from ripple',
+		insertText: "import { track } from 'ripple';",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-import-track',
+	},
+	{
+		label: 'import effect',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Import effect from ripple',
+		insertText: "import { effect } from 'ripple';",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-import-effect',
+	},
+	{
+		label: 'import trackSplit',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Import trackSplit from ripple',
+		insertText: "import { trackSplit } from 'ripple';",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-import-trackSplit',
+	},
+	{
+		label: 'import untrack',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Import untrack from ripple',
+		insertText: "import { untrack } from 'ripple';",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-import-untrack',
+	},
+	// {
+	// 	label: 'import ripple-types',
+	// 	kind: CompletionItemKind.Snippet,
+	// 	detail: 'Import Ripple types',
+	// 	insertText: "import type { Tracked, PropsWithChildren, Component } from 'ripple';",
+	// 	insertTextFormat: InsertTextFormat.Snippet,
+	// 	sortText: '0-import-types',
+	// },
+];
+
+/**
+ * @returns {LanguageServicePlugin}
+ */
+function createCompletionPlugin() {
+	return {
+		name: 'ripple-completion-enhancer',
+		capabilities: {
+			completionProvider: {
+				// Trigger on Ripple-specific syntax:
+				// '<' - JSX/HTML tags
+				// Avoid '.' and ' ' to reduce noise - let manual trigger (Ctrl+Space) handle those
+				triggerCharacters: ['<'],
+				resolveProvider: false,
+			},
+		},
+		// leaving context for future use
+		create(context) {
+			return {
+				// Mark this as providing additional completions, not replacing existing ones
+				// This ensures TypeScript/JavaScript completions are still shown alongside Ripple snippets
+				isAdditionalCompletion: true,
+				async provideCompletionItems(document, position, completionContext, _token) {
+					if (!document.uri.endsWith('.ripple')) {
+						return { items: [], isIncomplete: false };
+					}
+
+					// 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 };
+							}
+						}
+					}
+
+					const line = document.getText({
+						start: { line: position.line, character: 0 },
+						end: position,
+					});
+
+					const items = [];
+
+					// Debug: log trigger info with clear marker
+					// triggerKind: 1 = Invoked (Ctrl+Space), 2 = TriggerCharacter, 3 = TriggerForIncompleteCompletions
+					log('🔔 Completion triggered:', {
+						triggerKind: completionContext.triggerKind,
+						triggerKindName:
+							completionContext.triggerKind === 1
+								? 'Invoked'
+								: completionContext.triggerKind === 2
+									? 'TriggerCharacter'
+									: completionContext.triggerKind === 3
+										? 'Incomplete'
+										: 'Unknown',
+						triggerCharacter: completionContext.triggerCharacter || '(none)',
+						position: `${position.line}:${position.character}`,
+						lineEnd: line.substring(Math.max(0, line.length - 30)),
+					});
+
+					// Import completions when line starts with 'import'
+					if (line.trim().startsWith('import')) {
+						items.push(...RIPPLE_IMPORTS);
+					}
+
+					// @ accessor hint when typing after @
+					if (/@\w*$/.test(line)) {
+						items.push({
+							label: '@value',
+							kind: CompletionItemKind.Variable,
+							detail: 'Access tracked value',
+							documentation: 'Use @ to read/write tracked values',
+						});
+					}
+
+					// Ripple keywords - extract the last word being typed
+					const wordMatch = line.match(/(\w+)$/);
+					const currentWord = wordMatch ? wordMatch[1] : '';
+
+					// Debug: show what word we're matching
+					log('Current word:', currentWord, 'length:', currentWord.length);
+
+					// ALWAYS provide Ripple snippets and keywords
+					// Even with 1 character, we return items so that when combined with TypeScript completions,
+					// the merged result will include our items. VS Code's fuzzy matching will filter them.
+					items.push(...RIPPLE_SNIPPETS);
+
+					// Return isIncomplete=false and let VS Code handle filtering
+					// Since we're providing all items every time, VS Code can cache and filter client-side
+					// This works because our items have proper labels that match VS Code's fuzzy matching
+					return { items, isIncomplete: currentWord.length < 2 };
+				},
+			};
+		},
+	};
+}
+
+/**
+ * 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,10 +1,7 @@
-const { RippleVirtualCode } = require('@ripple-ts/typescript-plugin/src/language.js');
-const { URI } = require('vscode-uri');
+/** @import { LanguageServicePlugin } from '@volar/language-server' */
+/** @import { RippleVirtualCode } from '@ripple-ts/typescript-plugin/src/language.js') */
 
-/**
- * @typedef {import('@volar/language-server').LanguageServicePlugin} LanguageServicePlugin
- * @typedef {import('@volar/language-server').LanguageServiceContext} LanguageServiceContext
- */
+const { URI } = require('vscode-uri');
 
 const DEBUG = process.env.RIPPLE_DEBUG === 'true';
 
@@ -26,14 +23,8 @@ function createDefinitionPlugin() {
 		capabilities: {
 			definitionProvider: true,
 		},
-		create(/** @type {LanguageServiceContext} */ context) {
+		create(context) {
 			return {
-				/**
-				 * Provide definition with component keyword support
-				 * @param {import('vscode-languageserver-textdocument').TextDocument} document
-				 * @param {import('@volar/language-server').Position} position
-				 * @param {import('@volar/language-server').CancellationToken} token
-				 */
 				async provideDefinition(document, position, token) {
 					const uri = URI.parse(document.uri);
 					const decoded = context.decodeEmbeddedDocumentUri(uri);
@@ -63,11 +54,9 @@ function createDefinitionPlugin() {
 
 					const [sourceUri, virtualCodeId] = decoded;
 					const sourceScript = context.language.scripts.get(sourceUri);
-					const virtualCode = sourceScript?.generated?.embeddedCodes.get(virtualCodeId);
-
-					if (!(virtualCode instanceof RippleVirtualCode) || !virtualCode.mappings) {
-						return tsDefinitions;
-					}
+					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")

package/src/hoverPlugin.js

@@ -0,0 +1,130 @@
+/** @import { LanguageServicePlugin } from '@volar/language-server' */
+/** @import { RippleVirtualCode } from '@ripple-ts/typescript-plugin/src/language.js') */
+/** @typedef {import('@volar/language-server').LanguageServicePluginInstance} LanguageServicePluginInstance */
+
+const { URI } = require('vscode-uri');
+
+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);
+}
+
+/**
+ * @returns {LanguageServicePlugin}
+ */
+function createHoverPlugin() {
+	return {
+		name: 'ripple-hover',
+		capabilities: {
+			hoverProvider: true,
+		},
+		create(context) {
+			/** @type {LanguageServicePluginInstance['provideHover']} */
+			let originalProvideHover;
+			/** @type {LanguageServicePluginInstance} */
+			let originalInstance;
+
+			// Disable typescript-semantic's provideHover so it doesn't merge with ours
+			for (const [plugin, instance] of context.plugins) {
+				if (plugin.name === 'typescript-semantic') {
+					originalInstance = instance;
+					originalProvideHover = instance.provideHover;
+					instance.provideHover = undefined;
+					break;
+				}
+			}
+
+			if (!originalProvideHover) {
+				logError(
+					"'typescript-semantic plugin' was not found or has no 'provideHover'. \
+					This plugin must be loaded after Volar's typescript-semantic plugin.",
+				);
+			}
+			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) {
+						tsHover = await originalProvideHover.call(originalInstance, document, position, token);
+					}
+
+					// If no TypeScript hover, nothing to modify
+					if (!tsHover) {
+						return;
+					}
+
+					// If not in a Ripple embedded context, just return TypeScript results
+					if (!decoded) {
+						return tsHover;
+					}
+
+					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) {
+						return tsHover;
+					}
+
+					const range = tsHover.range;
+					const rangeStart = document.offsetAt(range.start);
+					const rangeEnd = document.offsetAt(range.end);
+
+					const mapping = virtualCode.findMappingByGeneratedRange(rangeStart, rangeEnd);
+
+					if (!mapping) {
+						return tsHover;
+					}
+
+					log('Found mapping for hover at range', 'start: ', rangeStart, 'end: ', rangeEnd);
+
+					// Check if source length is greater than generated length (component -> function)
+					const customData = mapping.data.customData;
+					const sourceLength = mapping.lengths[0];
+					const generatedLength = customData.generatedLengths[0];
+
+					// If no generatedLengths, or source and generated are same length, no transformation
+					if (sourceLength <= generatedLength) {
+						return tsHover;
+					}
+
+					const diffLength = sourceLength - generatedLength;
+
+					// Adjust the hover range to highlight the full "component" keyword
+					tsHover.range = {
+						start: range.start,
+						end: {
+							line: range.end.line,
+							character: range.end.character + diffLength,
+						},
+					};
+
+					return tsHover;
+				},
+			};
+		},
+	};
+}
+
+module.exports = {
+	createHoverPlugin,
+};

package/src/server.js

@@ -5,11 +5,15 @@
 } = require('@volar/language-server/node');
 const { createDiagnosticPlugin } = require('./diagnosticPlugin.js');
 const { createDefinitionPlugin } = require('./definitionPlugin.js');
+const { createHoverPlugin } = require('./hoverPlugin.js');
+const { createCompletionPlugin } = require('./completionPlugin.js');
+const { createAutoInsertPlugin } = require('./autoInsertPlugin.js');
 const {
 	getRippleLanguagePlugin,
 	resolveConfig,
 } = require('@ripple-ts/typescript-plugin/src/language.js');
-const { create: createTypeScriptServices } = require('volar-service-typescript');
+const { createTypeScriptServices } = require('./typescriptService.js');
+const { create: createCssService } = require('volar-service-css');
 
 const DEBUG = process.env.RIPPLE_DEBUG === 'true';
 
@@ -103,7 +107,17 @@ function createRippleLanguageServer() {
 						},
 					};
 				}),
-				[createDiagnosticPlugin(), createDefinitionPlugin(), ...createTypeScriptServices(ts)],
+				[
+					createAutoInsertPlugin(),
+					createCompletionPlugin(),
+					createDiagnosticPlugin(),
+					createDefinitionPlugin(),
+					createCssService(),
+					...createTypeScriptServices(ts),
+					// !IMPORTANT createHoverPlugin has to be loaded after Volar's ts plugins
+					// to overwrite `typescript-semantic` plugin's `provideHover`
+					createHoverPlugin(),
+				],
 			);
 
 			log('Server initialization complete');

package/src/typescriptService.js

@@ -0,0 +1,46 @@
+/**
+ * @typedef {import('@volar/language-server').LanguageServiceContext} LanguageServiceContext
+ * @typedef {import('vscode-languageserver-textdocument').TextDocument} TextDocument
+ */
+
+// Monkey-patch getUserPreferences before requiring the main module
+const getUserPreferencesModule = require('volar-service-typescript/lib/configs/getUserPreferences');
+const originalGetUserPreferences = getUserPreferencesModule.getUserPreferences;
+
+/**
+ * Enhanced getUserPreferences to add all ts and ripple preferences
+ * Specifically makes preferTypeOnlyAutoImports true if not set
+ * @param {LanguageServiceContext} context
+ * @param {TextDocument} document
+ */
+getUserPreferencesModule.getUserPreferences = async function (context, document) {
+	const origPreferences = await originalGetUserPreferences.call(this, context, document);
+
+	const [tsConfig, rippleConfig] = await Promise.all([
+		context.env.getConfiguration?.('typescript'),
+		context.env.getConfiguration?.('ripple'),
+	]);
+
+	return {
+		preferTypeOnlyAutoImports: true,
+		...origPreferences,
+		...tsConfig?.preferences,
+		...rippleConfig?.preferences,
+	};
+};
+
+// Now require the main module which will use our patched getUserPreferences
+const { create } = require('volar-service-typescript');
+
+/**
+ * Create TypeScript services with Ripple-specific enhancements.
+ * @param {typeof import('typescript')} ts
+ * @returns {ReturnType<typeof create>}
+ */
+function createTypeScriptServices(ts) {
+	return create(ts);
+}
+
+module.exports = {
+	createTypeScriptServices,
+};