feat: Editor support for #ripple.server (#804)

Author: leonidaz

.changeset/early-pots-ring.md

@@ -0,0 +1,5 @@
+---
+'ripple': patch
+---
+
+Editor support for #ripple.server

packages/ripple/src/compiler/identifier-utils.js

@@ -2,7 +2,12 @@ export const IDENTIFIER_OBFUSCATION_PREFIX = '_$_';
 export const RIPPLE_NAMESPACE_IDENTIFIER =
 	IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'ripple';
 export const STYLE_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'style';
-export const SERVER_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'server';
+export const SERVER_IDENTIFIER =
+	IDENTIFIER_OBFUSCATION_PREFIX +
+	encode_utf16_char('#') +
+	'ripple' +
+	encode_utf16_char('.') +
+	'server';
 export const CSS_HASH_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + 'hash';
 
 const DECODE_UTF16_REGEX = /_u([0-9a-fA-F]{4})_/g;

packages/ripple/src/compiler/phases/3-transform/client/index.js

@@ -541,9 +541,9 @@ const visitors = {
 	},
 
 	ServerIdentifier(node, context) {
-		const id = b.id(SERVER_IDENTIFIER);
+		const id = b.id(SERVER_IDENTIFIER, /** @type {AST.NodeWithLocation} */ (node));
 		id.metadata.source_name = '#ripple.server';
-		return { ...node, ...id };
+		return id;
 	},
 
 	StyleIdentifier(node, context) {
@@ -2716,8 +2716,10 @@ const visitors = {
 			);
 			value.loc = node.loc;
 
-			const server_identifier = b.id(SERVER_IDENTIFIER);
-			server_identifier.loc = node.loc;
+			const server_identifier = b.id(
+				SERVER_IDENTIFIER,
+				slice_loc_info(/** @type {AST.NodeWithLocation} */ (node), 0, '#ripple.server'.length),
+			);
 			// Add source_name to properly map longer generated back to '#ripple.server'
 			server_identifier.metadata.source_name = '#ripple.server';
 

packages/ripple/src/compiler/phases/3-transform/segments.js

@@ -422,35 +422,13 @@ export function convert_source_map_to_mappings(
 							loc: node.loc,
 							metadata: {},
 						};
-
-						if (node.metadata.source_name === '#ripple') {
-							// Suppress the private-identifier parse diagnostic while the user is
-							// still typing a namespace access like `#ripple.` for completions.
-							token.metadata.suppressedDiagnostics = [18016];
-						}
-
-						if (
-							node.metadata.source_name === '#ripple.server' ||
-							node.metadata.source_name === '#ripple.style'
-						) {
-							// Let TextMate own the coloring for these namespace forms.
-							// Their dedicated AST nodes otherwise cause semantic tokens to repaint
-							// the full '#ripple.server' / '#ripple.style' span after TS attaches.
-							token.mappingData = { ...mapping_data, semantic: false };
-						}
 					} else {
 						token = {
 							source: node.name,
 							generated: node.name,
 							loc: node.loc,
 							metadata: {},
 						};
-						if (node.name === '#ripple') {
-							// Suppress the private-identifier parse diagnostic while the user is
-							// still typing a namespace access like `#ripple.` for completions.
-							token.metadata.suppressedDiagnostics = [18016];
-						}
-						// No transformation - source and generated names are the same
 					}
 
 					if (node.metadata?.is_component) {

packages/ripple/tests/client/compiler/compiler.basic.test.ripple

@@ -519,8 +519,7 @@ export component App() {
 	});
 
 	it('parses bare #ripple in loose mode for autocomplete recovery', () => {
-		const source = `
-export component App() {
+		const source = `export component App() {
 	#ripple
 }
 `;
@@ -536,6 +535,6 @@ export component App() {
 				mapping.lengths[0] === '#ripple'.length,
 		);
 
-		expect(mapping?.data.customData.suppressedDiagnostics).toContain(18016);
+		expect(mapping).toBeDefined();
 	});
 });

packages/ripple/types/index.d.ts

@@ -545,6 +545,8 @@ export function bindFiles<V extends FileList>(
 	setter?: SetFunction<V>,
 ): (node: HTMLInputElement) => void;
 
+type ServerBlock = {};
+
 export interface RippleNamespace {
 	array: RippleArrayCallable;
 	object: RippleObjectCallable;
@@ -559,7 +561,8 @@ export interface RippleNamespace {
 	untrack: typeof untrack;
 	track: typeof track;
 	trackSplit: typeof trackSplit;
-	style: Record<string, string>; // Placeholder for style-related runtime class names (e.g., #ripple.style.someClass)
+	style: Record<string, string>;
+	server: ServerBlock;
 }
 
 export declare const ripple_namespace: RippleNamespace;