ripple 0.2.176 → 0.2.178

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.176",
+  "version": "0.2.178",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -83,6 +83,6 @@
     "@volar/language-core": "~2.4.23"
   },
   "peerDependencies": {
-    "ripple": "0.2.176"
+    "ripple": "0.2.178"
   }
 }

package/src/compiler/index.d.ts

@@ -22,7 +22,24 @@ export interface CompileResult {
 	css: string;
 }
 
-export interface CustomMappingData {
+export interface PluginActionOverrides {
+	/** TypeScript diagnostic codes to suppress for this mapping */
+	suppressedDiagnostics?: number[];
+	/** Custom hover documentation for this mapping, false to disable */
+	hover?:
+		| {
+				contents: string;
+		  }
+		| false;
+	/** Custom definition info for this mapping, false to disable */
+	definition?:
+		| {
+				description: string;
+		  }
+		| false;
+}
+
+export interface CustomMappingData extends PluginActionOverrides {
 	generatedLengths: number[];
 }
 

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

@@ -968,7 +968,12 @@ const visitors = {
 							const expression = visit(attr.value, { ...state, metadata });
 
 							if (metadata.tracking) {
-								local_updates.push({ operation: b.stmt(b.call('_$_.set_value', id, expression)) });
+								local_updates.push({
+									operation: (key) => b.stmt(b.call('_$_.set_value', id, key)),
+									expression,
+									identity: attr.value,
+									initial: b.void0,
+								});
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_value', id, expression)));
 							}
@@ -983,7 +988,10 @@ const visitors = {
 
 							if (metadata.tracking) {
 								local_updates.push({
-									operation: b.stmt(b.call('_$_.set_checked', id, expression)),
+									operation: (key) => b.stmt(b.call('_$_.set_checked', id, key)),
+									expression,
+									identity: attr.value,
+									initial: b.void0,
 								});
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_checked', id, expression)));
@@ -998,7 +1006,10 @@ const visitors = {
 
 							if (metadata.tracking) {
 								local_updates.push({
-									operation: b.stmt(b.call('_$_.set_selected', id, expression)),
+									operation: (key) => b.stmt(b.call('_$_.set_selected', id, key)),
+									expression,
+									identity: attr.value,
+									initial: b.void0,
 								});
 							} else {
 								state.init.push(b.stmt(b.call('_$_.set_selected', id, expression)));
@@ -1171,7 +1182,7 @@ const visitors = {
 			update.push(...local_updates);
 
 			if (update.length > 0) {
-				if (state.scope.parent.declarations.size > 0) {
+				if (state.scope.declarations.size > 0) {
 					apply_updates(init, update, state);
 				} else {
 					state.update.push(...update);
@@ -2181,6 +2192,18 @@ function transform_ts_child(node, context) {
 			catch_handler = b.catch_clause(node.handler.param || null, catch_body);
 		}
 
+		let pending_block = null;
+		if (node.pending) {
+			const pending_scope = context.state.scopes.get(node.pending);
+			pending_block = b.try_item_block(
+				transform_body(node.pending.body, {
+					...context,
+					state: { ...context.state, scope: pending_scope },
+				}),
+				node.pending.loc,
+			);
+		}
+
 		let finally_block = null;
 		if (node.finalizer) {
 			const finally_scope = context.state.scopes.get(node.finalizer);
@@ -2192,7 +2215,7 @@ function transform_ts_child(node, context) {
 			);
 		}
 
-		state.init.push(b.try(try_body, catch_handler, finally_block));
+		state.init.push(b.try(try_body, catch_handler, finally_block, pending_block));
 	} else if (node.type === 'Component') {
 		const component = visit(node, state);
 
@@ -2798,6 +2821,38 @@ function create_tsx_with_typescript_support() {
 				context.visit(node.body);
 			}
 		},
+		// Custom handler for TryStatement to support Ripple's pending block
+		TryStatement(node, context) {
+			context.write('try ');
+			context.visit(node.block);
+
+			if (node.pending) {
+				// Output the pending block with source mapping for the 'pending' keyword
+				context.write(' ');
+				context.location(
+					node.pending.loc.start.line,
+					node.pending.loc.start.column - 'pending '.length,
+				);
+				context.write('pending ');
+				context.visit(node.pending);
+			}
+
+			if (node.handler) {
+				context.write(' catch');
+				if (node.handler.param) {
+					context.write(' (');
+					context.visit(node.handler.param);
+					context.write(')');
+				}
+				context.write(' ');
+				context.visit(node.handler.body);
+			}
+
+			if (node.finalizer) {
+				context.write(' finally ');
+				context.visit(node.finalizer);
+			}
+		},
 	};
 }
 

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

@@ -1,7 +1,4 @@
-/**
- * @typedef {Object} CustomMappingData
- * @property {number[]} generatedLengths
- */
+/** @import { CustomMappingData, PluginActionOverrides } from 'ripple/compiler'; */
 
 /**
  * @typedef {import('estree').Position} Position
@@ -152,6 +149,7 @@ export function convert_source_map_to_mappings(
 	 *		is_full_import_statement?: boolean,
 	 *		loc: Location,
 	 *		end_loc?: Location,
+	 *		metadata?: PluginActionOverrides
 	 * }>}
 	 */
 	const tokens = [];
@@ -503,10 +501,50 @@ export function convert_source_map_to_mappings(
 				}
 				return;
 			} else if (node.type === 'TryStatement') {
-				// Visit in source order: block, handler, finalizer
+				// Visit in source order: block, pending, handler, finalizer
 				if (node.block) {
 					visit(node.block);
 				}
+				if (node.pending) {
+					// Add a special token for the 'pending' keyword with customData
+					// to suppress TypeScript diagnostics and provide custom hover/definition
+					const pendingKeywordLoc = {
+						start: {
+							line: node.pending.loc.start.line,
+							column: node.pending.loc.start.column - 'pending '.length,
+						},
+						end: {
+							line: node.pending.loc.start.line,
+							column: node.pending.loc.start.column - 1,
+						},
+					};
+					tokens.push({
+						source: 'pending',
+						generated: 'pending',
+						loc: pendingKeywordLoc,
+						metadata: {
+							suppressedDiagnostics: [
+								1472, // 'catch' or 'finally' expected
+								2304, // Cannot find name 'pending'
+							],
+							// suppress all hovers
+							hover: false,
+
+							// Example of a custom hover contents (uses markdown)
+							// hover: {
+							// 	contents:
+							// 		'```ripple\npending\n```\n\nRipple-specific keyword for try/pending blocks.\n\nThe `pending` block executes while async operations inside the `try` block are awaiting. This provides a built-in loading state for async components.',
+							// },
+
+							// TODO: Definition is not implemented yet, leaving for future use
+							// definition: {
+							// 	description:
+							// 		'Ripple pending block - executes during async operations in the try block',
+							// },
+						},
+					});
+					visit(node.pending);
+				}
 				if (node.handler) {
 					visit(node.handler);
 				}
@@ -1333,11 +1371,27 @@ export function convert_source_map_to_mappings(
 			);
 			gen_start = gen_loc_to_offset(gen_line_col.line, gen_line_col.column);
 
+			/** @type {CustomMappingData} */
+			const customData = {
+				generatedLengths: [gen_length],
+			};
+
+			// Add optional metadata from token if present
+			if (token.metadata) {
+				if ('suppressedDiagnostics' in token.metadata) {
+					customData.suppressedDiagnostics = token.metadata.suppressedDiagnostics;
+				}
+				if ('hover' in token.metadata) {
+					customData.hover = token.metadata.hover;
+				}
+				if ('definition' in token.metadata) {
+					customData.definition = token.metadata.definition;
+				}
+			}
+
 			data = {
 				...mapping_data,
-				customData: {
-					generatedLengths: [gen_length],
-				},
+				customData,
 			};
 		}
 

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

@@ -20,6 +20,10 @@ declare module 'estree' {
 		params: Pattern[];
 		body: BlockStatement;
 	}
+
+	interface TryStatement {
+		pending?: BlockStatement | null;
+	}
 }
 
 declare module 'estree-jsx' {

package/src/utils/builders.js

@@ -106,6 +106,15 @@ export function block(body) {
 	return { type: 'BlockStatement', body };
 }
 
+/**
+ * @param {ESTree.Statement[]} body
+ * @param {ESTree.SourceLocation} loc
+ * @returns {ESTree.BlockStatement}
+ */
+export function try_item_block(body, loc) {
+	return { type: 'BlockStatement', body, loc };
+}
+
 /**
  * @param {string} name
  * @param {ESTree.Statement} body
@@ -681,21 +690,23 @@ export function throw_error(str) {
  * @param {ESTree.BlockStatement} block
  * @param {ESTree.CatchClause | null} handler
  * @param {ESTree.BlockStatement | null} finalizer
+ * @param {ESTree.BlockStatement | null} pending
  * @returns {ESTree.TryStatement}
  */
-export function try_builder(block, handler = null, finalizer = null) {
+export function try_builder(block, handler = null, finalizer = null, pending = null) {
 	return {
 		type: 'TryStatement',
 		block,
 		handler,
 		finalizer,
+		pending,
 	};
 }
 
 /**
  * @param {ESTree.Pattern | null} param
  * @param {ESTree.BlockStatement} body
- * @returns {ESTree.CatchClause}
+ * @return {ESTree.CatchClause}
  */
 export function catch_clause_builder(param, body) {
 	return {

package/tests/client/__snapshots__/tracked-expression.test.ripple.snap

@@ -6,7 +6,7 @@ exports[`TrackedExpression tests > should handle the syntax correctly 1`] = `
     0
   </div>
   <div>
-    0
+    4
   </div>
   <div>
     1