@ripple-ts/language-server 0.2.184 → 0.2.186

package/package.json

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

package/src/autoInsertPlugin.js

@@ -64,7 +64,7 @@ function createAutoInsertPlugin() {
 						return null;
 					}
 
-					const virtualCode = getVirtualCode(document, context);
+					const [virtualCode] = getVirtualCode(document, context);
 
 					// Map position back to source
 					const offset = document.offsetAt(position);

package/src/compileErrorDiagnosticPlugin.js

@@ -28,7 +28,7 @@ function createCompileErrorDiagnosticPlugin() {
 					try {
 						log('Providing Ripple diagnostics for:', document.uri);
 
-						const virtualCode = getVirtualCode(document, context);
+						const [virtualCode] = getVirtualCode(document, context);
 
 						if (!virtualCode || !virtualCode.errors || virtualCode.errors.length === 0) {
 							return [];

package/src/completionPlugin.js

@@ -217,7 +217,7 @@ function createCompletionPlugin() {
 						return { items: [], isIncomplete: false };
 					}
 
-					const virtualCode = getVirtualCode(document, context);
+					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

package/src/definitionPlugin.js

@@ -1,6 +1,9 @@
-/** @import { LanguageServicePlugin } from '@volar/language-server' */
+/** @import { LanguageServicePlugin, LocationLink } from '@volar/language-server'; */
+// @ts-expect-error type-only import from ESM module into CJS is fine
+/** @import { DefinitionLocation } from 'ripple/compiler'; */
 
-const { getVirtualCode, createLogging } = require('./utils.js');
+const { TextDocument } = require('vscode-languageserver-textdocument');
+const { getVirtualCode, createLogging, getWordFromPosition } = require('./utils.js');
 
 const { log } = createLogging('[Ripple Definition Plugin]');
 
@@ -17,6 +20,7 @@ function createDefinitionPlugin() {
 			return {
 				async provideDefinition(document, position, token) {
 					// Get TypeScript definition from typescript-semantic service
+					/** @type {LocationLink[]} */
 					let tsDefinitions = [];
 					for (const [plugin, instance] of context.plugins) {
 						if (plugin.name === 'typescript-semantic' && instance.provideDefinition) {
@@ -28,6 +32,92 @@ function createDefinitionPlugin() {
 						}
 					}
 
+					const [virtualCode, sourceUri] = getVirtualCode(document, context);
+
+					// First check for custom definitions (e.g., CSS class selectors)
+					const offset = document.offsetAt(position);
+					const text = document.getText();
+					// Find word boundaries
+					const { word, start, end } = getWordFromPosition(text, offset);
+					const customMapping = virtualCode.findMappingByGeneratedRange(start, end);
+
+					log(`Cursor position in generated code for word '${word}':`, position);
+					log(`Cursor offset in generated code for word '${word}':`, offset);
+
+					// If mapping has custom definition metadata with location, handle it
+					if (
+						customMapping?.data.customData.definition !== false &&
+						customMapping?.data.customData.definition?.location
+					) {
+						const def = customMapping.data.customData.definition;
+						const loc = /** @type {DefinitionLocation} */ (def.location);
+
+						const embeddedCode = loc.embeddedId
+							? virtualCode.embeddedCodes?.find(({ id }) => id === loc.embeddedId)
+							: undefined;
+
+						if (embeddedCode) {
+							const embedMapping = embeddedCode.mappings[0];
+
+							// Calculate the position in the source document
+							// CSS offset relative to embedded code start + source offset of CSS region
+							const sourceStartOffset = embedMapping.sourceOffsets[0] + loc.start;
+							const sourceEndOffset = embedMapping.sourceOffsets[0] + loc.end;
+
+							log(
+								'Source document offsets - start for matching css:',
+								sourceStartOffset,
+								'end:',
+								sourceEndOffset,
+							);
+
+							// Calculate line/column positions using the source document's proper encoding
+							// Create a TextDocument from the source code for proper position calculations
+							const sourceDocument = TextDocument.create(
+								sourceUri.toString(),
+								'ripple',
+								0,
+								virtualCode.originalCode,
+							);
+							const targetStart = sourceDocument.positionAt(sourceStartOffset);
+							const targetEnd = sourceDocument.positionAt(sourceEndOffset);
+
+							log('Target positions in source - start:', targetStart, 'end:', targetEnd);
+
+							// The origin selection range should be in the virtual document
+							// not in the source document!
+							const generatedStart = customMapping.generatedOffsets[0];
+							const generatedEnd =
+								generatedStart + customMapping.data.customData.generatedLengths[0];
+							const originStart = document.positionAt(generatedStart);
+							const originEnd = document.positionAt(generatedEnd);
+
+							log('Origin positions - start:', originStart, 'end:', originEnd);
+
+							/** @type {LocationLink} */
+							tsDefinitions.push({
+								targetUri: sourceUri.toString(), // Use the actual source file URI
+								targetRange: {
+									start: targetStart,
+									end: targetEnd,
+								},
+								targetSelectionRange: {
+									start: targetStart,
+									end: targetEnd,
+								},
+								originSelectionRange: {
+									start: originStart,
+									end: originEnd,
+								},
+							});
+
+							return tsDefinitions;
+						}
+					}
+
+					// Below here we handle adjusting TypeScript definitions for transformed tokens
+					// specifically, when "component" in Ripple maps to "function" in TS
+
 					// If no TypeScript definitions, nothing to modify
 					// Volar will let the next ts plugin handle it
 					if (tsDefinitions.length === 0) {
@@ -45,8 +135,6 @@ 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

@@ -56,7 +56,7 @@ function createDocumentHighlightPlugin() {
 						return tsHighlights;
 					}
 
-					const virtualCode = getVirtualCode(document, context);
+					const [virtualCode] = getVirtualCode(document, context);
 
 					if (!virtualCode) {
 						return tsHighlights;

package/src/hoverPlugin.js

@@ -1,7 +1,16 @@
-/** @import { LanguageServicePlugin } from '@volar/language-server' */
-/** @import { LanguageServicePluginInstance } from '@volar/language-server' */
-
-const { getVirtualCode, createLogging } = require('./utils.js');
+/**
+ @import {
+ 	LanguageServicePlugin,
+	LanguageServicePluginInstance,
+	MarkupContent,
+} from '@volar/language-server'; */
+
+const {
+	getVirtualCode,
+	createLogging,
+	getWordFromPosition,
+	concatMarkdownContents,
+} = require('./utils.js');
 
 const { log, logError } = createLogging('[Ripple Hover Plugin]');
 
@@ -44,22 +53,33 @@ function createHoverPlugin() {
 						tsHover = await originalProvideHover.call(originalInstance, document, position, token);
 					}
 
-					// If no TypeScript hover, nothing to modify
-					if (!tsHover || !tsHover.range) {
-						return;
-					}
-
-					const virtualCode = getVirtualCode(document, context);
+					const [virtualCode] = getVirtualCode(document, context);
 
 					if (!virtualCode) {
 						return tsHover;
 					}
 
-					const range = tsHover.range;
-					const rangeStart = document.offsetAt(range.start);
-					const rangeEnd = document.offsetAt(range.end);
+					/** @type {number} */
+					let starOffset;
+					/** @type {number} */
+					let endOffset;
+
+					if (tsHover && tsHover.range) {
+						starOffset = document.offsetAt(tsHover.range.start);
+						endOffset = document.offsetAt(tsHover.range.end);
+					} else {
+						const offset = document.offsetAt(position);
+						const text = document.getText();
+						// Find word boundaries
+						const { word, start, end } = getWordFromPosition(text, offset);
+						starOffset = start;
+						endOffset = end;
+
+						log(`Cursor position in generated code for word '${word}':`, position);
+						log(`Cursor offset in generated code for word '${word}':`, offset);
+					}
 
-					const mapping = virtualCode.findMappingByGeneratedRange(rangeStart, rangeEnd);
+					const mapping = virtualCode.findMappingByGeneratedRange(starOffset, endOffset);
 
 					if (!mapping) {
 						return tsHover;
@@ -67,11 +87,17 @@ function createHoverPlugin() {
 
 					const customHover = mapping?.data?.customData?.hover;
 					if (customHover) {
+						const contents = tsHover
+							? concatMarkdownContents(
+									/** @type {MarkupContent} **/ (tsHover.contents).value,
+									customHover.contents,
+								)
+							: customHover.contents;
 						log('Found custom hover data in mapping');
 						return {
 							contents: {
 								kind: 'markdown',
-								value: customHover.contents,
+								value: contents,
 							},
 							range: {
 								start: position,
@@ -80,33 +106,35 @@ function createHoverPlugin() {
 						};
 					} else if (customHover === false) {
 						log(
-							`Hover explicitly suppressed in mapping at range start: ${rangeStart}, end: ${rangeEnd}`,
+							`Hover explicitly suppressed in mapping at range start: ${starOffset}, end: ${endOffset}`,
 						);
 						return null;
 					}
 
-					log('Found mapping for hover at range', 'start: ', rangeStart, 'end: ', rangeEnd);
+					log('Found mapping for hover at range', 'start: ', starOffset, 'end: ', endOffset);
 
-					// 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 (tsHover && tsHover.range) {
+						// 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;
-					}
+						// If no generatedLengths, or source and generated are same length, no transformation
+						if (sourceLength <= generatedLength) {
+							return tsHover;
+						}
 
-					const diffLength = sourceLength - generatedLength;
+						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,
-						},
-					};
+						// Adjust the hover range to highlight the full "component" keyword
+						tsHover.range = {
+							start: tsHover.range.start,
+							end: {
+								line: tsHover.range.end.line,
+								character: tsHover.range.end.character + diffLength,
+							},
+						};
+					}
 
 					return tsHover;
 				},

package/src/typescriptDiagnosticPlugin.js

@@ -56,7 +56,7 @@ function createTypeScriptDiagnosticFilterPlugin() {
 
 					log(`Filtering ${diagnostics.length} TypeScript diagnostics for ${document.uri}`);
 
-					const virtualCode = getVirtualCode(document, context);
+					const [virtualCode] = getVirtualCode(document, context);
 
 					const filtered = diagnostics.filter((diagnostic) => {
 						const range = diagnostic.range;

package/src/utils.js

@@ -4,12 +4,21 @@
 
 const { URI } = require('vscode-uri');
 const { createLogging, DEBUG } = require('@ripple-ts/typescript-plugin/src/utils.js');
+const wordRegex = /\w/;
+
+/**
+ * @param  {...string} contents
+ * @returns string
+ */
+function concatMarkdownContents(...contents) {
+	return contents.join('\n\n<br>\n\n---\n\n<br><br>\n\n');
+}
 
 /**
  * Get virtual code from the encoded document URI
  * @param {LanguageServiceContext} context
  * @param {TextDocument} document
- * @returns {RippleVirtualCode}
+ * @returns {[RippleVirtualCode, URI]}
  */
 function getVirtualCode(document, context) {
 	const uri = URI.parse(document.uri);
@@ -22,7 +31,7 @@ function getVirtualCode(document, context) {
 		sourceScript?.generated?.embeddedCodes.get(virtualCodeId)
 	);
 
-	return virtualCode;
+	return [virtualCode, sourceUri];
 }
 
 /**
@@ -34,10 +43,10 @@ function getVirtualCode(document, context) {
 function getWordFromPosition(text, start) {
 	let wordStart = start;
 	let wordEnd = start;
-	while (wordStart > 0 && /\w/.test(text[wordStart - 1])) {
+	while (wordStart > 0 && wordRegex.test(text[wordStart - 1])) {
 		wordStart--;
 	}
-	while (wordEnd < text.length && /\w/.test(text[wordEnd])) {
+	while (wordEnd < text.length && wordRegex.test(text[wordEnd])) {
 		wordEnd++;
 	}
 
@@ -54,5 +63,6 @@ module.exports = {
 	getVirtualCode,
 	getWordFromPosition,
 	createLogging,
+	concatMarkdownContents,
 	DEBUG,
 };