@ripple-ts/typescript-plugin 0.2.216 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @ripple-ts/typescript-plugin
 
+## 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
+  [[`61271cb`](https://github.com/Ripple-TS/ripple/commit/61271cb1c4777f2ab9093c6c89a5ad771ec98b7d),
+  [`21dd402`](https://github.com/Ripple-TS/ripple/commit/21dd4029d7e027a0706cb133b09530a722feb73d),
+  [`c2dbefe`](https://github.com/Ripple-TS/ripple/commit/c2dbefe5645c0c4f6e0ff4dc00d9c4de81616667),
+  [`74a10cc`](https://github.com/Ripple-TS/ripple/commit/74a10cc5701962cd7c72b144d59b35ecb76263a3)]:
+  - ripple@0.3.0
+
 ## 0.2.216
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "TypeScript plugin for Ripple",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.216",
+  "version": "0.3.0",
   "main": "src/index.js",
   "homepage": "https://ripple-ts.com",
   "repository": {
@@ -19,11 +19,12 @@
     "@volar/typescript": "~2.4.28"
   },
   "devDependencies": {
-    "tsdown": "^0.15.4"
+    "@types/node": "^24.3.0",
+    "tsdown": "^0.20.3"
   },
   "peerDependencies": {
-    "typescript": "^5.9.2",
-    "ripple": "0.2.216"
+    "typescript": "^5.9.3",
+    "ripple": "0.3.0"
   },
   "publishConfig": {
     "access": "public"

package/src/language.js

@@ -1,7 +1,6 @@
-// @ts-expect-error ESM import
 /** @import { CodeMapping } from 'ripple/compiler' */
-// @ts-expect-error ESM import
-/** @import {RippleCompiler, RippleCompileError, VolarMappingsResult} from 'ripple/compiler' */
+/** @import {RippleCompileError, VolarMappingsResult} from 'ripple/compiler' */
+/** @import * as RippleCompiler from 'ripple/compiler' */
 
 /** @typedef {Map<string, CodeMapping>} CachedMappings */
 /** @typedef {import('typescript').CompilerOptions} CompilerOptions */
@@ -191,7 +190,7 @@ class RippleVirtualCode {
 				const charBeforeDot = newEnd > 1 ? newCode[newEnd - 2] : '';
 				log('  Char before dot:', JSON.stringify(charBeforeDot));
 
-				if (/[a-zA-Z0-9_\)\]\}]/.test(charBeforeDot)) {
+				if (/[$#_\u200C\u200D\p{ID_Continue}\)\]\}]/u.test(charBeforeDot)) {
 					isDotTyped = true;
 					dotPosition = newEnd - 1; // Position of the dot
 					log('ChangeRange detected dot typed at position', dotPosition);
@@ -200,40 +199,25 @@ class RippleVirtualCode {
 		}
 
 		try {
-			// If user typed a ".", use placeholder technique to get completions
+			// If user typed a ".", compile without it and then stitch it back into
+			// the generated output so completions can still resolve.
 			if (isDotTyped && dotPosition >= 0) {
-				const charBeforeDot = newCode[dotPosition - 1];
-				const codeWithPlaceholder =
-					newCode.substring(0, dotPosition) + charBeforeDot + newCode.substring(dotPosition + 1);
+				const codeWithoutDot =
+					newCode.substring(0, dotPosition) + newCode.substring(dotPosition + 1);
 
-				log('Using placeholder technique for dot at position', dotPosition);
-				transpiled = this.ripple.compile_to_volar_mappings(codeWithPlaceholder, this.fileName);
-				log('Compilation with placeholder successful');
+				log('Compiling without typed dot at position', dotPosition);
+				transpiled = this.ripple.compile_to_volar_mappings(codeWithoutDot, this.fileName, {
+					loose: true,
+				});
+				log('Compilation without dot successful');
 
-				// Find where the placeholder ended up in generated code and replace with "."
 				if (transpiled && transpiled.code && transpiled.mappings.length > 0) {
-					let placeholderMapping = null;
-					for (const mapping of transpiled.mappings) {
-						const sourceStart = mapping.sourceOffsets[0];
-						const sourceEnd = sourceStart + mapping.lengths[0];
-
-						if (dotPosition >= sourceStart && dotPosition < sourceEnd) {
-							placeholderMapping = mapping;
-							break;
-						}
-					}
+					const insertedDotPosition = restore_typed_dot_in_transpiled_code(transpiled, dotPosition);
 
-					if (placeholderMapping) {
-						const offsetInMapping = dotPosition - placeholderMapping.sourceOffsets[0];
-						const placeholderPosInGenerated =
-							placeholderMapping.generatedOffsets[0] + offsetInMapping;
-
-						transpiled.code =
-							transpiled.code.substring(0, placeholderPosInGenerated) +
-							'.' +
-							transpiled.code.substring(placeholderPosInGenerated + 1);
-
-						log('Replaced placeholder at position', placeholderPosInGenerated, 'with dot');
+					if (insertedDotPosition === null) {
+						logWarning('Failed to restore typed dot into transpiled output');
+					} else {
+						log('Inserted typed dot at generated position', insertedDotPosition);
 					}
 				}
 			} else {
@@ -325,7 +309,7 @@ class RippleVirtualCode {
 					generatedLengths: [newCode.length],
 					data: {
 						verification: true, // disable TS since we're using source code as generated code
-						customData: { generatedLengths: [newCode.length] },
+						customData: {},
 					},
 				},
 			];
@@ -355,7 +339,7 @@ class RippleVirtualCode {
 			mapping = this.mappings[i];
 
 			genStart = mapping.generatedOffsets[0];
-			genLength = mapping.data.customData.generatedLengths[0];
+			genLength = mapping.generatedLengths[0];
 			genEnd = genStart + genLength;
 			genKey = `${genStart}-${genEnd}`;
 			this.#mappingGenToSource.set(genKey, mapping);
@@ -427,7 +411,6 @@ function extractCssFromSource(code) {
 				structure: true,
 				format: false,
 				customData: {
-					generatedLengths: [cssLength],
 					content: cssContent,
 					embeddedId: `style_${index}`,
 				},
@@ -456,6 +439,75 @@ function extractCssFromSource(code) {
 	return embeddedCodes;
 }
 
+/**
+ * Insert a typed dot back into the transpiled code and update mappings so the
+ * source and generated offsets stay aligned for completion requests.
+ * @param {VolarMappingsResult} transpiled
+ * @param {number} dotPosition
+ * @returns {number | null}
+ */
+function restore_typed_dot_in_transpiled_code(transpiled, dotPosition) {
+	let dot_mapping = null;
+
+	for (const mapping of transpiled.mappings) {
+		const source_end = mapping.sourceOffsets[0] + mapping.lengths[0];
+		if (source_end === dotPosition) {
+			dot_mapping = mapping;
+			break;
+		}
+	}
+
+	if (!dot_mapping) {
+		return null;
+	}
+
+	const generated_length = dot_mapping.generatedLengths[0];
+	const insertedDotPosition = dot_mapping.generatedOffsets[0] + generated_length;
+
+	transpiled.code =
+		transpiled.code.substring(0, insertedDotPosition) +
+		'.' +
+		transpiled.code.substring(insertedDotPosition);
+
+	// Create a separate 1:1 mapping for the dot character instead of extending
+	// the existing mapping. When source and generated lengths differ (e.g.
+	// #ripple → _$__u0023_ripple), Volar's translateOffset uses
+	// Math.min(relativePos, toLength) which would map the cursor after the dot
+	// to the middle of the generated identifier instead of after it.
+
+	/** @type {CodeMapping} */
+	const new_dot_mapping = {
+		sourceOffsets: [dotPosition],
+		generatedOffsets: [insertedDotPosition],
+		lengths: [1],
+		generatedLengths: [1],
+		data: { ...dot_mapping.data },
+	};
+
+	// Find the index to insert after dot_mapping
+	const dot_mapping_index = transpiled.mappings.indexOf(dot_mapping);
+	transpiled.mappings.splice(dot_mapping_index + 1, 0, new_dot_mapping);
+
+	for (const mapping of transpiled.mappings) {
+		if (
+			mapping !== dot_mapping &&
+			mapping !== new_dot_mapping &&
+			mapping.generatedOffsets[0] >= insertedDotPosition
+		) {
+			mapping.generatedOffsets[0] += 1;
+		}
+		if (
+			mapping !== dot_mapping &&
+			mapping !== new_dot_mapping &&
+			mapping.sourceOffsets[0] >= dotPosition
+		) {
+			mapping.sourceOffsets[0] += 1;
+		}
+	}
+
+	return insertedDotPosition;
+}
+
 /**
  * @template T
  * @param {{ options?: CompilerOptions } & T} config

package/src/utils.js

@@ -1,4 +1,6 @@
 const DEBUG = process.env.RIPPLE_DEBUG === 'true';
+// Matches valid JS/CSS identifier characters: word chars, dashes (CSS), $, and # (Ripple shorthands)
+const charAllowedWordRegex = /[\w\-$#]/;
 
 /**
  * Create a logging utility with a specific label
@@ -29,7 +31,34 @@ function createLogging(label) {
 	};
 }
 
+/**
+ * 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,
+	};
+}
+
 module.exports = {
 	createLogging,
+	getWordFromPosition,
+	charAllowedWordRegex,
 	DEBUG,
 };

package/tsconfig.json

@@ -1,7 +1,16 @@
 {
   "compilerOptions": {
+    "module": "node20",
+    "moduleResolution": "node16",
+    "target": "es2021",
+    "lib": ["es2021"],
     "allowJs": true,
-    "noEmit": true
+    "checkJs": true,
+    "noEmit": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
   },
   "include": ["./src/**/*", "./tests/**/*"],
   "exclude": ["dist", "node_modules"]

package/tsdown.config.js

@@ -1,8 +1,10 @@
-const { defineConfig } = require('tsdown');
+import { defineConfig } from 'tsdown';
 
-module.exports = defineConfig({
+export default defineConfig({
+	inlineOnly: false,
 	entry: ['src/index.js'],
 	format: ['cjs'],
+	fixedExtension: false,
 	platform: 'node',
 	target: 'node20',
 	outDir: 'dist',