ripple 0.2.216 → 0.3.1

package/src/compiler/phases/3-transform/segments.js

@@ -413,7 +413,7 @@ export function convert_source_map_to_mappings(
 				if (node.name && node.loc) {
 					/** @type {Token} */
 					let token;
-					// Check if this identifier was changed in metadata (e.g., #Map -> TrackedMap)
+					// Check if this identifier was changed in metadata (e.g., #Map -> RippleMap)
 					// Or if it was capitalized during transformation
 					if (node.metadata?.source_name) {
 						token = {
@@ -422,6 +422,22 @@ 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,
@@ -429,9 +445,10 @@ export function convert_source_map_to_mappings(
 							loc: node.loc,
 							metadata: {},
 						};
-						if (node.name === '#') {
-							// Suppress 'Invalid character' to allow typing out the shorthands
-							token.metadata.suppressedDiagnostics = [1127];
+						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
 					}
@@ -618,7 +635,6 @@ export function convert_source_map_to_mappings(
 								data: {
 									...mapping_data,
 									customData: {
-										generatedLengths: [length],
 										hover:
 											'```css\n.' +
 											name +
@@ -639,6 +655,26 @@ export function convert_source_map_to_mappings(
 						if (node.name) {
 							visit(node.name);
 						}
+
+						if (
+							node.name.type === 'JSXIdentifier' &&
+							node.name.metadata?.is_component &&
+							node.name.loc
+						) {
+							const mapping = get_mapping_from_node(
+								node.name,
+								src_to_gen_map,
+								gen_line_offsets,
+								mapping_data,
+							);
+							mapping.sourceOffsets = [
+								/** @type {AST.NodeWithLocation} */ (node.name).start - 'component '.length,
+							];
+							mapping.lengths = ['component'.length];
+
+							mapping.data.customData.hover = replace_label_to_component;
+							mappings.push(mapping);
+						}
 						if (node.value) {
 							visit(node.value);
 						}
@@ -728,7 +764,6 @@ export function convert_source_map_to_mappings(
 					// but since we already map the opening - start, we just need the proper end
 					// and it was causing some issues with mappings
 					mapping.generatedLengths = [mapping.generatedLengths[0] + 1];
-					mapping.data.customData.generatedLengths = mapping.generatedLengths;
 					mappings.push(mapping);
 				}
 
@@ -1115,7 +1150,6 @@ export function convert_source_map_to_mappings(
 						if (node.optional) {
 							mapping.generatedLengths[0] = mapping.generatedLengths[0] + '.?'.length;
 						}
-						mapping.data.customData.generatedLengths = mapping.generatedLengths;
 					}
 
 					mappings.push(mapping);
@@ -1280,7 +1314,6 @@ export function convert_source_map_to_mappings(
 					const return_keyword_length = 'return'.length;
 					mapping.lengths = [return_keyword_length];
 					mapping.generatedLengths = [return_keyword_length];
-					mapping.data.customData.generatedLengths = mapping.generatedLengths;
 
 					mappings.push(mapping);
 				}
@@ -2015,9 +2048,7 @@ export function convert_source_map_to_mappings(
 		const gen_start = loc_to_offset(gen_line_col.line, gen_line_col.column, gen_line_offsets);
 
 		/** @type {CustomMappingData} */
-		const customData = {
-			generatedLengths: [gen_length],
-		};
+		const customData = {};
 
 		// Add optional metadata from token if present
 		if ('wordHighlight' in token.metadata) {
@@ -2087,9 +2118,7 @@ export function convert_source_map_to_mappings(
 			generatedLengths: [1],
 			data: {
 				...mapping_data,
-				customData: {
-					generatedLengths: [1],
-				},
+				customData: {},
 			},
 		});
 	}
@@ -2106,7 +2135,6 @@ export function convert_source_map_to_mappings(
 			data: {
 				...mapping_data,
 				customData: {
-					generatedLengths: [region.content.length],
 					embeddedId: region.id,
 					content: region.content,
 				},

package/src/compiler/phases/3-transform/server/index.js

@@ -25,8 +25,10 @@ import {
 	normalize_children,
 	is_binding_function,
 	is_element_dynamic,
+	is_ripple_track_call,
 	hash,
 	flatten_switch_consequent,
+	get_ripple_namespace_call_name,
 } from '../../../utils.js';
 import { escape } from '../../../../utils/escaping.js';
 import { is_event_attribute } from '../../../../utils/events.js';
@@ -450,25 +452,75 @@ const visitors = {
 		if (!context.state.to_ts) {
 			delete node.typeArguments;
 		}
+
+		const callee = node.callee;
+		const source_name = callee.type === 'Identifier' ? callee.metadata?.source_name : undefined;
+		const ripple_runtime_method = get_ripple_namespace_call_name(source_name);
+
+		if (ripple_runtime_method !== null) {
+			return {
+				...node,
+				callee: b.member(b.id('_$_'), b.id(ripple_runtime_method)),
+				arguments: /** @type {(AST.Expression | AST.SpreadElement)[]} */ ([
+					...node.arguments.map((arg) => context.visit(arg)),
+				]),
+			};
+		}
+
+		if (is_ripple_track_call(callee, context)) {
+			const track_method_name =
+				callee.type === 'Identifier'
+					? callee.name === 'trackSplit'
+						? 'track_split'
+						: 'track'
+					: callee.type === 'MemberExpression' && callee.property.type === 'Identifier'
+						? callee.property.name === 'trackSplit'
+							? 'track_split'
+							: 'track'
+						: 'track';
+
+			return {
+				...node,
+				callee: b.member(b.id('_$_'), b.id(track_method_name)),
+				arguments: /** @type {(AST.Expression | AST.SpreadElement)[]} */ (
+					node.arguments.map((arg) => context.visit(arg))
+				),
+			};
+		}
+
+		// Check for more than two nested level calls, like #ripple.array.from()
+		if (
+			callee.type === 'MemberExpression' &&
+			callee.object.metadata?.source_name?.startsWith('#ripple.') &&
+			callee.object.type === 'Identifier' &&
+			callee.property.type === 'Identifier'
+		) {
+			const object = callee.object;
+			const property = callee.property;
+			const source_name = /** @type {string} */ (object.metadata?.source_name);
+
+			const method_name = get_ripple_namespace_call_name(source_name);
+			if (method_name !== null) {
+				return b.member(
+					b.id('_$_'),
+					b.member(
+						b.id(method_name),
+						b.call(
+							b.id(property.name),
+							.../** @type {(AST.Expression | AST.SpreadElement)[]} */ (
+								node.arguments.map((arg) => context.visit(arg))
+							),
+						),
+					),
+				);
+			}
+		}
+
 		return context.next();
 	},
 
 	NewExpression(node, context) {
-		// Special handling for TrackedMapExpression and TrackedSetExpression
-		// When source is "new #Map(...)", the callee is TrackedMapExpression with empty arguments
-		// and the actual arguments are in NewExpression.arguments
 		const callee = node.callee;
-		if (callee.type === 'TrackedMapExpression' || callee.type === 'TrackedSetExpression') {
-			// Use NewExpression's arguments (the callee has empty arguments from parser)
-			const argsToUse = node.arguments.length > 0 ? node.arguments : callee.arguments;
-			// For SSR, use regular Map/Set
-			const constructorName = callee.type === 'TrackedMapExpression' ? 'Map' : 'Set';
-			return b.new(
-				b.id(constructorName),
-				undefined,
-				.../** @type {AST.Expression[]} */ (argsToUse.map((arg) => context.visit(arg))),
-			);
-		}
 
 		if (!context.state.to_ts) {
 			delete node.typeArguments;
@@ -1511,7 +1563,7 @@ const visitors = {
 		return b.call('_$_.get', /** @type {AST.Expression} */ (context.visit(node.argument)));
 	},
 
-	TrackedObjectExpression(node, context) {
+	RippleObjectExpression(node, context) {
 		// For SSR, we just evaluate the object as-is since there's no reactivity
 		return b.object(
 			/** @type {(AST.Property | AST.SpreadElement)[]} */
@@ -1519,12 +1571,10 @@ const visitors = {
 		);
 	},
 
-	TrackedArrayExpression(node, context) {
-		// For SSR, we just evaluate the array as-is since there's no reactivity
-		return b.array(
-			/** @type {(AST.Expression | AST.SpreadElement)[]} */
-			(
-				/** @param {AST.Node} el */
+	RippleArrayExpression(node, context) {
+		return b.call(
+			'_$_.ripple_array',
+			.../** @type {(AST.Expression | AST.SpreadElement)[]} */ (
 				node.elements.map((el) => context.visit(/** @type {AST.Node} */ (el)))
 			),
 		);

package/src/compiler/scope.js

@@ -3,7 +3,9 @@
 	Binding,
 	ScopeInterface,
 	ScopeRoot as ScopeRootInterface,
-	Context
+	Context,
+	ScopeConstructorInterface,
+	ScopeConstructorParameters
 } from '#compiler';
  @import * as AST from 'estree';
  */
@@ -12,6 +14,8 @@ import is_reference from 'is-reference';
 import { extract_identifiers, object, unwrap_pattern } from '../utils/ast.js';
 import { walk } from 'zimmerframe';
 import { is_reserved } from './utils.js';
+import { error } from './errors.js';
+import { IDENTIFIER_OBFUSCATION_PREFIX } from './identifier-utils.js';
 import * as b from '../utils/builders.js';
 
 /**
@@ -19,14 +23,15 @@ import * as b from '../utils/builders.js';
  * @param {AST.Node} ast - The AST to create scopes for
  * @param {ScopeRootInterface} root - Root scope manager
  * @param {ScopeInterface | null} parent - Parent scope
+ * @param {ScopeConstructorInterface['error_options']} error_options - Error options
  * @returns {{ scope: ScopeInterface, scopes: Map<AST.Node, ScopeInterface> }} Scope information
  */
-export function create_scopes(ast, root, parent) {
+export function create_scopes(ast, root, parent, error_options) {
 	/** @typedef {{ scope: ScopeInterface }} State */
 
 	/** @type {Map<AST.Node, ScopeInterface>} */
 	const scopes = new Map();
-	const scope = new Scope(root, parent, false);
+	const scope = new Scope(root, parent, false, error_options);
 	scopes.set(ast, scope);
 
 	/** @type {State} */
@@ -296,17 +301,19 @@ export class Scope {
 	 */
 	server_block = false;
 
+	/** @type {ScopeConstructorInterface['error_options']} */
+	#error_options;
+
 	/**
-	 *
-	 * @param {ScopeRootInterface} root
-	 * @param {ScopeInterface | null} parent
-	 * @param {boolean} porous
+	 * @param {ScopeConstructorParameters} params
 	 */
-	constructor(root, parent, porous) {
+	constructor(...params) {
+		const [root, parent, porous, error_options] = params;
 		this.root = root;
 		this.parent = parent;
 		this.#porous = porous;
 		this.function_depth = parent ? parent.function_depth + (porous ? 0 : 1) : 0;
+		this.#error_options = error_options ?? {};
 	}
 
 	/**
@@ -323,12 +330,24 @@ export class Scope {
 			}
 		}
 
-		if (node.name === '_$_') {
-			throw new Error('Cannot declare a variable named "_$_" as it is a reserved identifier');
+		if (node.name.startsWith(IDENTIFIER_OBFUSCATION_PREFIX)) {
+			error(
+				`Cannot declare a variable named "${node.name}" as identifiers starting with "${IDENTIFIER_OBFUSCATION_PREFIX}" are reserved`,
+				this.#error_options.filename,
+				node,
+				this.#error_options.loose ? this.#error_options.errors : undefined,
+				this.#error_options.comments,
+			);
 		}
 
 		if (this.declarations.has(node.name)) {
-			throw new Error(`'${node.name}' has already been declared in the current scope`);
+			error(
+				`'${node.name}' has already been declared in the current scope`,
+				this.#error_options.filename,
+				node,
+				this.#error_options.loose ? this.#error_options.errors : undefined,
+				this.#error_options.comments,
+			);
 		}
 
 		/** @type {Binding} */
@@ -355,7 +374,7 @@ export class Scope {
 	 * @type {ScopeInterface['child']}
 	 */
 	child(porous = false) {
-		return new Scope(this.root, this, porous);
+		return new Scope(this.root, this, porous, this.#error_options);
 	}
 
 	/**

package/src/compiler/source-map-utils.js

@@ -1,7 +1,7 @@
 /**
  @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js';
  @import * as AST from 'estree';
- @import { CodeMappingWithAll } from 'ripple/compiler';
+ @import { CodeMapping } from 'ripple/compiler';
  @import { CodeMapping as VolarCodeMapping } from '@volar/language-core';
  @import { RawSourceMap } from 'source-map';
  */
@@ -284,7 +284,7 @@ export function build_line_offsets(text) {
  * @param {Partial<VolarCodeMapping['data']>} [filtered_data]
  * @param {number} [src_max_len]
  * @param {number} [gen_max_len]
- * @returns {CodeMappingWithAll | Error}
+ * @returns {CodeMapping | Error}
  */
 function maybe_get_mapping_from_node(
 	node,
@@ -319,9 +319,7 @@ function maybe_get_mapping_from_node(
 		generatedLengths: [gen_length],
 		data: {
 			...(filtered_data || mapping_data),
-			customData: {
-				generatedLengths: [gen_length],
-			},
+			customData: {},
 		},
 	};
 }
@@ -333,7 +331,7 @@ function maybe_get_mapping_from_node(
  * @param {Partial<VolarCodeMapping['data']>} [filtered_data]
  * @param {number} [src_max_len]
  * @param {number} [gen_max_len]
- * @returns {CodeMappingWithAll}
+ * @returns {CodeMapping}
  */
 export function get_mapping_from_node(
 	node,

package/src/compiler/types/acorn.d.ts

@@ -0,0 +1,11 @@
+// Re-export acorn types with Ripple augmentations applied.
+// Since this file lives inside the ripple package, TypeScript resolves
+// '@types/acorn' from ripple's node_modules. Consumers can import from
+// 'ripple/types/acorn' to get the full augmented types without needing
+// @types/acorn in their own package.json.
+//
+// The relative import of './parser' loads the augmentation declarations
+// (declare module 'acorn' { ... }) so the re-exported types include
+// Ripple-specific nodes like Component, Element, TrackedExpression, etc.
+import './parser.d.ts';
+export * from 'acorn';

package/src/compiler/types/estree-jsx.d.ts

@@ -0,0 +1,11 @@
+// Re-export estree-jsx types with Ripple augmentations applied.
+// Since this file lives inside the ripple package, TypeScript resolves
+// '@types/estree-jsx' from ripple's node_modules. Consumers can import from
+// 'ripple/types/estree-jsx' to get the full augmented types without needing
+// @types/estree-jsx in their own package.json.
+//
+// The relative import of './index' loads the augmentation declarations
+// (declare module 'estree-jsx' { ... }) so the re-exported types include
+// Ripple-specific extensions like JSXAttribute.shorthand, etc.
+import './index';
+export * from 'estree-jsx';

package/src/compiler/types/estree.d.ts

@@ -0,0 +1,11 @@
+// Re-export estree types with Ripple augmentations applied.
+// Since this file lives inside the ripple package, TypeScript resolves
+// '@types/estree' from ripple's node_modules. Consumers can import from
+// 'ripple/types/estree' to get the full augmented types without needing
+// @types/estree in their own package.json.
+//
+// The relative import of './index' loads the augmentation declarations
+// (declare module 'estree' { ... }) so the re-exported types include
+// Ripple-specific nodes like Component, Element, TrackedExpression, etc.
+import './index';
+export * from 'estree';

package/src/compiler/types/import.d.ts

@@ -12,11 +12,11 @@
  * the user made a mistake when the user is missing an import.
  *
  * e.g.
- * // import { TrackedMap } from 'ripple'; -- assume TrackedMap import is missing
- * const map = new TrackedMap();
+ * // import { RippleMap } from 'ripple'; -- assume RippleMap import is missing
+ * const map = new RippleMap();
  *
- * If a type in the hidden import contains 'TrackedMap', e.g. '__TrackedMap',
- * TS would suggest to the user that they meant to use '__TrackedMap' instead of 'TrackedMap'.
+ * If a type in the hidden import contains 'RippleMap', e.g. '__RippleMap',
+ * TS would suggest to the user that they meant to use '__RippleMap' instead of 'RippleMap'.
  *
  * Add additional types as needed if they are used in hidden imports.
  *
@@ -30,23 +30,37 @@
  */
 
 import {
-	TrackedMap as _$_Map__Tracked,
-	TrackedSet as _$_Set__Tracked,
-	TrackedArray as _$_Array__Tracked,
-	TrackedObject as _$_Object__Tracked,
-	TrackedURL as _$_URL__Tracked,
-	TrackedURLSearchParams as _$_URLSearchParams__Tracked,
-	TrackedDate as _$_Date__Tracked,
+	RippleMap as _$_Map__Ripple,
+	RippleSet as _$_Set__Ripple,
+	RippleArray as _$_Array__Ripple,
+	RippleObject as _$_Object__Ripple,
+	Context as _$_Context__Ripple,
+	RippleURL as _$_URL__Ripple,
+	RippleURLSearchParams as _$_URLSearchParams__Ripple,
+	RippleDate as _$_Date__Ripple,
+	MediaQuery as _$_MediaQuery__,
 	createRefKey as _$_RefKey__create,
+	track as _$_track__,
+	trackSplit as _$_trackSplit__,
+	effect as _$_effect__,
+	untrack as _$_untrack__,
+	ripple_namespace as _$__u0023_ripple,
 } from 'ripple';
 
 export {
-	_$_Map__Tracked,
-	_$_Set__Tracked,
-	_$_Array__Tracked,
-	_$_Object__Tracked,
-	_$_URL__Tracked,
-	_$_URLSearchParams__Tracked,
-	_$_Date__Tracked,
+	_$_Map__Ripple,
+	_$_Set__Ripple,
+	_$_Array__Ripple,
+	_$_Object__Ripple,
+	_$_Context__Ripple,
+	_$_URL__Ripple,
+	_$_URLSearchParams__Ripple,
+	_$_Date__Ripple,
+	_$_MediaQuery__,
 	_$_RefKey__create,
+	_$_track__,
+	_$_trackSplit__,
+	_$_effect__,
+	_$_untrack__,
+	_$__u0023_ripple,
 };