@ripple-ts/language-server 0.2.216 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @ripple-ts/language-server
 
+## 0.3.0
+
+### Minor Changes
+
+- [#779](https://github.com/Ripple-TS/ripple/pull/779)
+  [`74a10cc`](https://github.com/Ripple-TS/ripple/commit/74a10cc5701962cd7c72b144d59b35ecb76263a3)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Introduces #ripple namespace
+  for creating ripple reactive entities without imports, such as array, object,
+  map, set, date, url, urlSearchParams, mediaQuery. Adds track, untrack,
+  trackSplit, effect, context, server, style to the namespace. Deprecates #[] and
+  #{} in favor of #ripple[] and #ripple{}. Renames types and actual reactive
+  imports for TrackedX entities, such as TrackedArray, TrackedObject, etc. into
+  RippleArray, RippleObjec, etc.
+
+### Patch Changes
+
+- Updated dependencies
+  [[`74a10cc`](https://github.com/Ripple-TS/ripple/commit/74a10cc5701962cd7c72b144d59b35ecb76263a3)]:
+  - @ripple-ts/typescript-plugin@0.3.0
+
 ## 0.2.216
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/language-server",
-  "version": "0.2.216",
+  "version": "0.3.0",
   "description": "Language Server Protocol implementation for Ripple",
   "main": "index.js",
   "bin": {
@@ -15,17 +15,17 @@
   },
   "dependencies": {
     "@volar/language-server": "~2.4.28",
-    "volar-service-css": "0.0.68",
-    "volar-service-typescript": "0.0.68",
+    "volar-service-css": "0.0.70",
+    "volar-service-typescript": "0.0.70",
     "vscode-languageserver-textdocument": "^1.0.12",
     "vscode-uri": "^3.1.0",
-    "@ripple-ts/typescript-plugin": "0.2.216"
+    "@ripple-ts/typescript-plugin": "0.3.0"
   },
   "devDependencies": {
-    "ripple": "0.2.216"
+    "ripple": "0.3.0"
   },
   "peerDependencies": {
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   },
   "publishConfig": {
     "access": "public"

package/src/compileErrorDiagnosticPlugin.js

@@ -93,10 +93,7 @@ function parseCompilationErrorWithDocument(error, virtualCode, sourceMap, docume
 
 		if (mapping) {
 			start = document.positionAt(mapping.generatedOffsets[0]);
-			end = document.positionAt(
-				mapping.generatedOffsets[0] +
-					(mapping.generatedLengths || mapping.data.customData.generatedLengths)[0],
-			);
+			end = document.positionAt(mapping.generatedOffsets[0] + mapping.generatedLengths[0]);
 		} else if (sourceMap) {
 			// try to find the match even across multiple mappings
 			const result = sourceMap.toGeneratedRange(start_offset, end_offset, true).next().value;

package/src/completionPlugin.js

@@ -11,84 +11,68 @@ const { log } = createLogging('[Ripple Completion Plugin]');
  */
 const TRACKED_COLLECTION_SNIPPETS = [
 	{
-		label: '#Map',
-		filterText: '#Map',
-		detail: 'Create a Shorthand TrackedMap',
+		label: 'RippleMap',
+		filterText: 'RippleMap',
+		detail: 'Create a RippleMap',
 		documentation: 'A reactive Map that triggers updates when modified',
-		insertText: 'new #Map(${1})',
-		importName: null,
+		insertText: 'new RippleMap(${1})',
+		importName: 'RippleMap',
 	},
 	{
-		label: '#Set',
-		filterText: '#Set',
-		detail: 'Create a Shorthand TrackedSet',
+		label: 'RippleSet',
+		filterText: 'RippleSet',
+		detail: 'Create a RippleSet',
 		documentation: 'A reactive Set that triggers updates when modified',
-		insertText: 'new #Set(${1})',
-		importName: null,
+		insertText: 'new RippleSet(${1})',
+		importName: 'RippleSet',
 	},
 	{
-		label: 'TrackedMap',
-		filterText: 'TrackedMap',
-		detail: 'Create a TrackedMap',
-		documentation: 'A reactive Map that triggers updates when modified',
-		insertText: 'new TrackedMap(${1})',
-		importName: 'TrackedMap',
-	},
-	{
-		label: 'TrackedSet',
-		filterText: 'TrackedSet',
-		detail: 'Create a TrackedSet',
-		documentation: 'A reactive Set that triggers updates when modified',
-		insertText: 'new TrackedSet(${1})',
-		importName: 'TrackedSet',
-	},
-	{
-		label: 'TrackedArray',
-		filterText: 'TrackedArray',
-		detail: 'Create a TrackedArray',
+		label: 'RippleArray',
+		filterText: 'RippleArray',
+		detail: 'Create a RippleArray',
 		documentation: 'A reactive Array that triggers updates when modified',
-		insertText: 'new TrackedArray(${1})',
-		importName: 'TrackedArray',
+		insertText: 'new RippleArray(${1})',
+		importName: 'RippleArray',
 	},
 	{
-		label: 'TrackedArray.from',
-		filterText: 'TrackedArray.from',
-		detail: 'Create a TrackedArray.from',
+		label: 'RippleArray.from',
+		filterText: 'RippleArray.from',
+		detail: 'Create a RippleArray.from',
 		documentation: 'A reactive Array that triggers when modified',
-		insertText: 'new TrackedArray.from(${1})',
-		importName: 'TrackedArray',
+		insertText: 'new RippleArray.from(${1})',
+		importName: 'RippleArray',
 	},
 	{
-		label: 'TrackedObject',
-		filterText: 'TrackedObject',
-		detail: 'Create a TrackedObject',
+		label: 'RippleObject',
+		filterText: 'RippleObject',
+		detail: 'Create a RippleObject',
 		documentation: 'A reactive Object that triggers updates when modified',
-		insertText: 'new TrackedObject(${1})',
-		importName: 'TrackedObject',
+		insertText: 'new RippleObject(${1})',
+		importName: 'RippleObject',
 	},
 	{
-		label: 'TrackedDate',
-		filterText: 'TrackedDate',
-		detail: 'Create a TrackedDate',
+		label: 'RippleDate',
+		filterText: 'RippleDate',
+		detail: 'Create a RippleDate',
 		documentation: 'A reactive Date that triggers updates when modified',
-		insertText: 'new TrackedDate(${1})',
-		importName: 'TrackedDate',
+		insertText: 'new RippleDate(${1})',
+		importName: 'RippleDate',
 	},
 	{
-		label: 'TrackedURL',
-		filterText: 'TrackedURL',
-		detail: 'Create a TrackedURL',
+		label: 'RippleURL',
+		filterText: 'RippleURL',
+		detail: 'Create a RippleURL',
 		documentation: 'A reactive URL that triggers updates when modified',
-		insertText: 'new TrackedURL(${1})',
-		importName: 'TrackedURL',
+		insertText: 'new RippleURL(${1})',
+		importName: 'RippleURL',
 	},
 	{
-		label: 'TrackedURLSearchParams',
-		filterText: 'TrackedURLSearchParams',
-		detail: 'Create a TrackedURLSearchParams',
+		label: 'RippleURLSearchParams',
+		filterText: 'RippleURLSearchParams',
+		detail: 'Create a RippleURLSearchParams',
 		documentation: 'A reactive URLSearchParams that triggers updates when modified',
-		insertText: 'new TrackedURLSearchParams(${1})',
-		importName: 'TrackedURLSearchParams',
+		insertText: 'new RippleURLSearchParams(${1})',
+		importName: 'RippleURLSearchParams',
 	},
 	{
 		label: 'MediaQuery',
@@ -132,7 +116,7 @@ function findRippleImport(text) {
 /**
  * Generate additionalTextEdits to add an import
  * @param {string} documentText - Full document text
- * @param {string} importName - Name to import (e.g., 'TrackedMap')
+ * @param {string} importName - Name to import (e.g., 'RippleMap')
  * @returns {TextEdit[]}
  */
 function generateImportEdit(documentText, importName) {
@@ -187,20 +171,30 @@ function generateImportEdit(documentText, importName) {
  */
 const RIPPLE_SNIPPETS = [
 	{
-		label: '#[]',
+		label: '#ripple.',
 		kind: CompletionItemKind.Snippet,
-		detail: 'Ripple Reactive Array Literal, shorthand for new TrackedArray',
+		detail: 'Ripple namespace APIs',
+		documentation:
+			'Type #ripple. to access all built-in Ripple namespace APIs (track, map, set, style, server, etc.).',
+		insertText: '#ripple.',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-#-namespace',
+	},
+	{
+		label: '#ripple[]',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Ripple Reactive Array Literal, shorthand for new RippleArray',
 		documentation: 'Create a new Ripple Array Literal',
-		insertText: '#[${1}]',
+		insertText: '#ripple[${1}]',
 		insertTextFormat: InsertTextFormat.Snippet,
 		sortText: '0-#-array-literal',
 	},
 	{
-		label: '#{}',
+		label: '#ripple{}',
 		kind: CompletionItemKind.Snippet,
-		detail: 'Ripple Reactive Object Literal, shorthand for new TrackedObject',
+		detail: 'Ripple Reactive Object Literal, shorthand for new RippleObject',
 		documentation: 'Create a new Ripple Object Literal',
-		insertText: '#{${1}}',
+		insertText: '#ripple{${1}}',
 		insertTextFormat: InsertTextFormat.Snippet,
 		sortText: '0-#-object-literal',
 	},
@@ -337,6 +331,174 @@ const RIPPLE_SNIPPETS = [
 	},
 ];
 
+/**
+ * All #ripple.* namespace completions — no imports required.
+ * Shown when the cursor follows `#ripple` or `#ripple.`
+ * @type {CompletionItem[]}
+ */
+const RIPPLE_NAMESPACE_SNIPPETS = [
+	{
+		label: '#ripple.track',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Reactive tracked value (no import needed)',
+		documentation:
+			'Creates a reactive tracked value. Equivalent to track() but requires no import.\n\nUsage: let count = #ripple.track(0);\nDerived: let double = #ripple.track(() => @count * 2);',
+		insertText: '#ripple.track(${1:initialValue})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-track',
+	},
+	{
+		label: '#ripple.trackSplit',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Reactive prop splitting (no import needed)',
+		documentation:
+			"Destructures props while preserving reactivity. Equivalent to trackSplit() but requires no import.\n\nUsage: const [children, rest] = #ripple.trackSplit(props, ['children']);",
+		insertText: "#ripple.trackSplit(${1:props}, ['${2:children}'])",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-trackSplit',
+	},
+	{
+		label: '#ripple.effect',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Reactive effect (no import needed)',
+		documentation:
+			'Registers a reactive side effect. Equivalent to effect() but requires no import.\n\nUsage: #ripple.effect(() => {\n  console.log(@count);\n});',
+		insertText: '#ripple.effect(() => {\n\t$0\n})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-effect',
+	},
+	{
+		label: '#ripple.untrack',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Read without dependency tracking (no import needed)',
+		documentation:
+			'Reads reactive values without creating dependencies. Equivalent to untrack() but requires no import.\n\nUsage: const snapshot = #ripple.untrack(() => @count);',
+		insertText: '#ripple.untrack(() => ${1:@value})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-untrack',
+	},
+	{
+		label: '#ripple.validate',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Validation wrapper (no import needed)',
+		documentation:
+			"Wraps a value with validation logic.\n\nUsage: let email = #ripple.validate(#ripple.track(''));",
+		insertText: '#ripple.validate(${1})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-validate',
+	},
+	{
+		label: '#ripple.context',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Create a Context (no import needed)',
+		documentation:
+			"Creates a reactive context. Equivalent to new Context() but requires no import.\n\nUsage: const ThemeCtx = #ripple.context('light');",
+		insertText: '#ripple.context(${1:defaultValue})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-context',
+	},
+	{
+		label: '#ripple.array',
+		kind: CompletionItemKind.Snippet,
+		detail: 'RippleArray class reference (no import needed)',
+		documentation:
+			'Reference to the RippleArray class. Use for static methods or as a type annotation.\n\nUsage: const copy = #ripple.array.from(existing);',
+		insertText: '#ripple.array',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-array',
+	},
+	{
+		label: '#ripple.object',
+		kind: CompletionItemKind.Snippet,
+		detail: 'RippleObject class reference (no import needed)',
+		documentation:
+			'Reference to the RippleObject class. Use for static methods or as a type annotation.\n\nUsage: const obj = #ripple.object({ a: 1 });',
+		insertText: '#ripple.object',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-object',
+	},
+	{
+		label: '#ripple.map',
+		kind: CompletionItemKind.Snippet,
+		detail: 'RippleMap (no import needed)',
+		documentation:
+			'Creates a reactive Map. Equivalent to new RippleMap() but requires no import.\n\nUsage: const map = #ripple.map([[key, value]]);',
+		insertText: '#ripple.map(${1})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-map',
+	},
+	{
+		label: '#ripple.set',
+		kind: CompletionItemKind.Snippet,
+		detail: 'RippleSet (no import needed)',
+		documentation:
+			'Creates a reactive Set. Equivalent to new RippleSet() but requires no import.\n\nUsage: const set = #ripple.set([1, 2, 3]);',
+		insertText: '#ripple.set(${1})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-set',
+	},
+	{
+		label: '#ripple.date',
+		kind: CompletionItemKind.Snippet,
+		detail: 'RippleDate (no import needed)',
+		documentation:
+			'Creates a reactive Date. Equivalent to new RippleDate() but requires no import.\n\nUsage: const today = #ripple.date();',
+		insertText: '#ripple.date(${1})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-date',
+	},
+	{
+		label: '#ripple.url',
+		kind: CompletionItemKind.Snippet,
+		detail: 'RippleURL (no import needed)',
+		documentation:
+			"Creates a reactive URL. Equivalent to new RippleURL() but requires no import.\n\nUsage: const url = #ripple.url('https://example.com');",
+		insertText: "#ripple.url('${1:https://example.com}')",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-url',
+	},
+	{
+		label: '#ripple.urlSearchParams',
+		kind: CompletionItemKind.Snippet,
+		detail: 'RippleURLSearchParams (no import needed)',
+		documentation:
+			'Creates a reactive URLSearchParams. Equivalent to new RippleURLSearchParams() but requires no import.\n\nUsage: const params = #ripple.urlSearchParams(${1});',
+		insertText: '#ripple.urlSearchParams(${1})',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-urlSearchParams',
+	},
+	{
+		label: '#ripple.mediaQuery',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Reactive CSS media query (no import needed)',
+		documentation:
+			"Creates a reactive media query that tracks whether the query currently matches.\n\nUsage: const isMobile = #ripple.mediaQuery('(max-width: 768px)');",
+		insertText: "#ripple.mediaQuery('${1:(max-width: 768px)}')",
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-mediaQuery',
+	},
+	{
+		label: '#ripple.style',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Scoped CSS class reference (no import needed)',
+		documentation:
+			'Produces a scoped CSS class string for passing to child components.\nThe class must be defined as a standalone selector in <style>.\n\nUsage: <Child cls={#ripple.style.highlight} />',
+		insertText: '#ripple.style.${1:className}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-style',
+	},
+	{
+		label: '#ripple.server',
+		kind: CompletionItemKind.Snippet,
+		detail: 'Server-only code block (module level)',
+		documentation:
+			'Marks a block as server-only. Code inside is tree-shaken on the client.\nMust be at module top level.\n\nUsage:\n#ripple.server {\n  export async function loadData() { ... }\n}',
+		insertText: '#ripple.server {\n\t$0\n}',
+		insertTextFormat: InsertTextFormat.Snippet,
+		sortText: '0-ripple-server',
+	},
+];
+
 /**
  * Import suggestions for Ripple
  */
@@ -383,6 +545,38 @@ const RIPPLE_IMPORTS = [
 	// },
 ];
 
+/**
+ * @param {string} line
+ * @returns {RegExpMatchArray | null}
+ */
+function get_ripple_namespace_match(line) {
+	return line.match(/#ripple(?:\.(\w*))?$/);
+}
+
+/**
+ * @param {RegExpMatchArray} namespace_match
+ * @param {{ line: number, character: number }} position
+ * @returns {CompletionItem[]}
+ */
+function create_ripple_namespace_completion_items(namespace_match, position) {
+	const start_character = position.character - namespace_match[0].length;
+
+	return RIPPLE_NAMESPACE_SNIPPETS.map((snippet) => ({
+		...snippet,
+		filterText: snippet.label,
+		textEdit: {
+			range: {
+				start: {
+					line: position.line,
+					character: start_character,
+				},
+				end: position,
+			},
+			newText: snippet.insertText ?? snippet.label,
+		},
+	}));
+}
+
 /**
  * @returns {LanguageServicePlugin}
  */
@@ -393,9 +587,9 @@ function createCompletionPlugin() {
 			completionProvider: {
 				// Trigger on Ripple-specific syntax:
 				// '<' - JSX/HTML tags
-				// '#' - TrackedMap/TrackedSet shortcuts
-				// Avoid '.' and ' ' to reduce noise - let manual trigger (Ctrl+Space) handle those
-				triggerCharacters: ['<', '#'],
+				// '#' - RippleMap/RippleSet shortcuts
+				// '.' - #ripple namespace member access
+				triggerCharacters: ['<', '#', '.'],
 				resolveProvider: false,
 			},
 		},
@@ -412,7 +606,7 @@ function createCompletionPlugin() {
 
 					const { virtualCode } = getVirtualCode(document, context);
 
-					if (virtualCode.languageId !== 'ripple') {
+					if (virtualCode && virtualCode.languageId !== 'ripple') {
 						// 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
 						log(`Skipping Ripple completions in the '${virtualCode.languageId}' context`);
@@ -454,6 +648,15 @@ function createCompletionPlugin() {
 						return { items, isIncomplete: false };
 					}
 
+					const ripple_namespace_match = get_ripple_namespace_match(line);
+
+					if (ripple_namespace_match) {
+						items.push(
+							...create_ripple_namespace_completion_items(ripple_namespace_match, position),
+						);
+						return { items, isIncomplete: false };
+					}
+
 					// @ accessor hint when typing after @
 					if (/@\w*$/.test(line)) {
 						items.push({
@@ -464,7 +667,7 @@ function createCompletionPlugin() {
 						});
 					}
 
-					// TrackedMap/TrackedSet completions when typing T...
+					// RippleMap/RippleSet completions when typing T...
 					// Also detects if 'new' is already typed before it to avoid duplicating
 					const trackedMatch = line.match(/(new\s+)?[T,M,#]([\w\.]*)$/);
 

package/src/definitionPlugin.js

@@ -105,8 +105,7 @@ function createDefinitionPlugin() {
 
 							// Create the origin selection range for #Map/#Set
 							const generatedStart = customMapping.generatedOffsets[0];
-							const generatedEnd =
-								generatedStart + customMapping.data.customData.generatedLengths[0];
+							const generatedEnd = generatedStart + customMapping.generatedLengths[0];
 							const originStart = document.positionAt(generatedStart);
 							const originEnd = document.positionAt(generatedEnd);
 
@@ -175,8 +174,7 @@ function createDefinitionPlugin() {
 							// 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 generatedEnd = generatedStart + customMapping.generatedLengths[0];
 							const originStart = document.positionAt(generatedStart);
 							const originEnd = document.positionAt(generatedEnd);
 

package/src/utils.js

@@ -5,9 +5,13 @@
 /** @import {is_identifier_obfuscated, deobfuscate_identifier, IDENTIFIER_OBFUSCATION_PREFIX} from 'ripple/compiler/internal/identifier/utils' */
 
 const { URI } = require('vscode-uri');
-const { createLogging, DEBUG } = require('@ripple-ts/typescript-plugin/src/utils.js');
-// Matches valid JS/CSS identifier characters: word chars, dashes (CSS), $, and # (Ripple shorthands)
-const charAllowedWordRegex = /[\w\-$#]/;
+const {
+	createLogging,
+	getWordFromPosition,
+	charAllowedWordRegex,
+	DEBUG,
+} = require('@ripple-ts/typescript-plugin/src/utils.js');
+
 const IMPORT_EXPORT_REGEX = {
 	import: {
 		findBefore: /import\s+(?:\{[^}]*|\*\s+as\s+\w*|\w*)$/s,
@@ -93,31 +97,6 @@ function getVirtualCode(document, context) {
 	return { virtualCode, sourceUri, sourceScript, sourceMap };
 }
 
-/**
- * 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 && charAllowedWordRegex.test(text[wordStart - 1])) {
-		wordStart--;
-	}
-	while (wordEnd < text.length && charAllowedWordRegex.test(text[wordEnd])) {
-		wordEnd++;
-	}
-
-	const word = text.substring(wordStart, wordEnd);
-
-	return {
-		word,
-		start: wordStart,
-		end: wordEnd,
-	};
-}
-
 /**
  * @param {'import' | 'export'} type
  * @param {string} text