ripple 0.3.12 → 0.3.13

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # ripple
 
+## 0.3.13
+
+### Patch Changes
+
+- [#842](https://github.com/Ripple-TS/ripple/pull/842)
+  [`4eb4d68`](https://github.com/Ripple-TS/ripple/commit/4eb4d6851573d771d65f1e85b1b442ad3cdc53d2)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - fix(server): inject SSR web
+  stream sinks instead of creating node streams
+
+- [#862](https://github.com/Ripple-TS/ripple/pull/862)
+  [`48af856`](https://github.com/Ripple-TS/ripple/commit/48af85678d5e1b32bb1c5e3fbb2fb07498bc88a3)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Add a release changeset for
+  the async tracking work introduced in commit
+  `4eb4d6851573d771d65f1e85b1b442ad3cdc53d2`.
+
+  This ships async tracking as a first-class feature in Ripple:
+  - remove and prohibit direct component-level `await`; async component flows now
+    require using `trackAsync()` (with `trackPending()` for pending state checks)
+  - add `trackAsync()` and `trackPending()` support so async values can be read
+    through Ripple's reactive runtime using tracked async values
+  - update compiler/runtime behavior for `try`/`catch`/`pending` boundaries so
+    async pending and error states can render and recover correctly in client and
+    SSR paths
+  - align `@ripple-ts/compat-react` async boundary behavior with the new Ripple
+    async tracking semantics
+  - update editor/tooling integration to match the new async syntax/runtime shape
+
+- [`6e11177`](https://github.com/Ripple-TS/ripple/commit/6e111778cae4e7d9876e51e293520f0859eb5890)
+  Thanks [@trueadm](https://github.com/trueadm)! - Add `.rsrx` support across
+  Ripple tooling and rename the repository's tracked `.ripple` modules to `.rsrx`.
+- Updated dependencies
+  [[`4eb4d68`](https://github.com/Ripple-TS/ripple/commit/4eb4d6851573d771d65f1e85b1b442ad3cdc53d2),
+  [`48af856`](https://github.com/Ripple-TS/ripple/commit/48af85678d5e1b32bb1c5e3fbb2fb07498bc88a3),
+  [`6e11177`](https://github.com/Ripple-TS/ripple/commit/6e111778cae4e7d9876e51e293520f0859eb5890)]:
+  - ripple@0.3.13
+
 ## 0.3.12
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -64,9 +64,15 @@
     "./internal/client": {
       "default": "./src/runtime/internal/client/index.js"
     },
+    "./internal/client-types": {
+      "types": "./src/runtime/internal/client/types.d.ts"
+    },
     "./internal/server": {
       "default": "./src/runtime/internal/server/index.js"
     },
+    "./internal/server-types": {
+      "types": "./src/runtime/internal/server/types.d.ts"
+    },
     "./jsx-runtime": {
       "types": "./src/jsx-runtime.d.ts",
       "import": "./src/jsx-runtime.js",
@@ -105,6 +111,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.12"
+    "ripple": "0.3.13"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -675,8 +675,7 @@ function RipplePlugin(config) {
 			 * Override isLet to recognize `let &{` and `let &[` as variable declarations.
 			 * Acorn's isLet checks the char after `let` and only recognizes `{`, `[`, or identifiers.
 			 * The `&` char (38) is not in that set, so `let &{...}` would not be parsed as a declaration.
-			 * @param {string} context
-			 * @returns {boolean}
+			 * @type {Parse.Parser['isLet']}
 			 */
 			isLet(context) {
 				if (!this.isContextual('let')) return false;
@@ -1337,12 +1336,44 @@ function RipplePlugin(config) {
 					const clause = /** @type {AST.CatchClause} */ (this.startNode());
 					this.next();
 					if (this.eat(tt.parenL)) {
-						clause.param = this.parseBindingAtom();
+						// Parse first param (error) manually to support optional second param (reset).
+						// We can't use parseCatchClauseParam() because it eats the closing paren.
+						const param = this.parseBindingAtom();
+						const simple = param.type === 'Identifier';
+						this.enterScope(simple ? BINDING_TYPES.BIND_SIMPLE_CATCH : 0);
+						this.checkLValPattern(
+							param,
+							simple ? BINDING_TYPES.BIND_SIMPLE_CATCH : BINDING_TYPES.BIND_LEXICAL,
+						);
+						const type = this.tsTryParseTypeAnnotation();
+						if (type) {
+							param.typeAnnotation = type;
+							this.resetEndLocation(param);
+						}
+						clause.param = param;
+
+						// Optional second parameter: reset function
+						if (this.eat(tt.comma)) {
+							const reset_param = this.parseBindingAtom();
+							this.checkLValSimple(reset_param, BINDING_TYPES.BIND_LEXICAL);
+							const reset_type = this.tsTryParseTypeAnnotation();
+							if (reset_type) {
+								reset_param.typeAnnotation = reset_type;
+								this.resetEndLocation(reset_param);
+							}
+							clause.resetParam = reset_param;
+						} else {
+							clause.resetParam = null;
+						}
+
 						this.expect(tt.parenR);
 					} else {
 						clause.param = null;
+						clause.resetParam = null;
+						this.enterScope(0);
 					}
-					clause.body = this.parseBlock();
+					clause.body = this.parseBlock(false);
+					this.exitScope();
 					node.handler = this.finishNode(clause, 'CatchClause');
 				}
 				node.finalizer = this.eat(tt._finally) ? this.parseBlock() : null;
@@ -2616,6 +2647,16 @@ function get_comment_handlers(source, comments, index = 0) {
 					next();
 
 					if (comments[0]) {
+						if (node.type === 'Program' && node.body.length === 0) {
+							// Collect all comments in an empty program (file with only comments)
+							while (comments.length) {
+								const comment = /** @type {AST.CommentWithLocation} */ (comments.shift());
+								(node.innerComments ||= []).push(comment);
+							}
+							if (node.innerComments && node.innerComments.length > 0) {
+								return;
+							}
+						}
 						if (node.type === 'BlockStatement' && node.body.length === 0) {
 							// Collect all comments that fall within this empty block
 							while (
@@ -2674,32 +2715,34 @@ function get_comment_handlers(source, comments, index = 0) {
 							let isArgument = false;
 							let isSwitchCaseSibling = false;
 
-							if (
-								parent.type === 'BlockStatement' ||
-								parent.type === 'Program' ||
-								parent.type === 'Component' ||
-								parent.type === 'ClassBody'
-							) {
-								node_array = parent.body;
-							} else if (parent.type === 'SwitchStatement') {
-								node_array = parent.cases;
-								isSwitchCaseSibling = true;
-							} else if (parent.type === 'SwitchCase') {
-								node_array = parent.consequent;
-							} else if (parent.type === 'ArrayExpression') {
-								node_array = parent.elements;
-							} else if (parent.type === 'ObjectExpression') {
-								node_array = parent.properties;
-							} else if (
-								parent.type === 'FunctionDeclaration' ||
-								parent.type === 'FunctionExpression' ||
-								parent.type === 'ArrowFunctionExpression'
-							) {
-								node_array = parent.params;
-								isParam = true;
-							} else if (parent.type === 'CallExpression' || parent.type === 'NewExpression') {
-								node_array = parent.arguments;
-								isArgument = true;
+							if (parent) {
+								if (
+									parent.type === 'BlockStatement' ||
+									parent.type === 'Program' ||
+									parent.type === 'Component' ||
+									parent.type === 'ClassBody'
+								) {
+									node_array = parent.body;
+								} else if (parent.type === 'SwitchStatement') {
+									node_array = parent.cases;
+									isSwitchCaseSibling = true;
+								} else if (parent.type === 'SwitchCase') {
+									node_array = parent.consequent;
+								} else if (parent.type === 'ArrayExpression') {
+									node_array = parent.elements;
+								} else if (parent.type === 'ObjectExpression') {
+									node_array = parent.properties;
+								} else if (
+									parent.type === 'FunctionDeclaration' ||
+									parent.type === 'FunctionExpression' ||
+									parent.type === 'ArrowFunctionExpression'
+								) {
+									node_array = parent.params;
+									isParam = true;
+								} else if (parent.type === 'CallExpression' || parent.type === 'NewExpression') {
+									node_array = parent.arguments;
+									isArgument = true;
+								}
 							}
 
 							if (node_array && Array.isArray(node_array)) {

package/src/compiler/phases/2-analyze/index.js

@@ -312,6 +312,7 @@ function setup_lazy_array_transforms(pattern, source_id, state, writable) {
 
 		const actual = element.type === 'AssignmentPattern' ? element.left : element;
 		const has_fallback = element.type === 'AssignmentPattern';
+		/** @type {AST.Expression | null}	 */
 		const fallback_value = has_fallback
 			? /** @type {AST.AssignmentPattern} */ (element).right
 			: null;
@@ -1127,7 +1128,7 @@ const visitors = {
 					context.state.analysis.comments,
 				);
 			}
-			const metadata = { tracking: false, await: false };
+			const metadata = { tracking: false };
 
 			if (declarator.id.type === 'Identifier') {
 				const binding = state.scope.get(declarator.id.name);
@@ -1136,10 +1137,14 @@ const visitors = {
 					// Check if it's a call to `track` or `tracked`
 					if (
 						(callee.type === 'Identifier' &&
-							(callee.name === 'track' || callee.name === 'tracked')) ||
+							(callee.name === 'track' ||
+								callee.name === 'trackAsync' ||
+								callee.name === 'tracked')) ||
 						(callee.type === 'MemberExpression' &&
 							callee.property.type === 'Identifier' &&
-							(callee.property.name === 'track' || callee.property.name === 'tracked'))
+							(callee.property.name === 'track' ||
+								callee.property.name === 'trackAsync' ||
+								callee.property.name === 'tracked'))
 					) {
 						binding.metadata = { ...binding.metadata, is_ripple_object: true };
 					}
@@ -1153,9 +1158,10 @@ const visitors = {
 				) {
 					const lazy_id = b.id(state.scope.generate('lazy'));
 					const writable = node.kind !== 'const';
-					const init_is_track =
+					const call_name =
 						declarator.init?.type === 'CallExpression' &&
-						is_ripple_track_call(declarator.init.callee, context) === 'track';
+						is_ripple_track_call(declarator.init.callee, context);
+					const init_is_track = call_name === 'track' || call_name === 'trackAsync';
 					setup_lazy_transforms(declarator.id, lazy_id, state, writable, !!init_is_track);
 					// Store the generated identifier name on the pattern for the transform phase
 					declarator.id.metadata = { ...declarator.id.metadata, lazy_id: lazy_id.name };
@@ -1267,7 +1273,6 @@ const visitors = {
 
 		// Track metadata for this component
 		const metadata = {
-			await: false,
 			styleClasses: /** @type {StyleClasses} */ (new Map()),
 		};
 
@@ -1317,7 +1322,6 @@ const visitors = {
 		if (node.id) {
 			context.state.analysis.component_metadata.push({
 				id: node.id.name,
-				async: metadata.await,
 			});
 		}
 	},
@@ -1352,14 +1356,13 @@ const visitors = {
 			node.metadata = {
 				...node.metadata,
 				has_template: false,
-				has_await: false,
 			};
 
 			context.visit(switch_case, context.state);
 
-			if (!node.metadata.has_template && !node.metadata.has_await) {
+			if (!node.metadata.has_template) {
 				error(
-					'Component switch statements must contain a template or an await expression in each of their cases. Move the switch statement into an effect if it does not render anything.',
+					'Component switch statements must contain a template in each of their cases. Move the switch statement into an effect if it does not render anything.',
 					context.state.analysis.module.filename,
 					switch_case,
 					context.state.loose ? context.state.analysis.errors : undefined,
@@ -1427,13 +1430,12 @@ const visitors = {
 		node.metadata = {
 			...node.metadata,
 			has_template: false,
-			has_await: false,
 		};
 		context.next();
 
-		if (!node.metadata.has_template && !node.metadata.has_await) {
+		if (!node.metadata.has_template) {
 			error(
-				'Component for...of loops must contain a template or an await expression in their body. Move the for loop into an effect if it does not render anything.',
+				'Component for...of loops must contain a template in their body. Move the for loop into an effect if it does not render anything.',
 				context.state.analysis.module.filename,
 				node.body,
 				context.state.loose ? context.state.analysis.errors : undefined,
@@ -1567,7 +1569,6 @@ const visitors = {
 		node.metadata = {
 			...node.metadata,
 			has_template: false,
-			has_await: false,
 			has_throw: false,
 		};
 
@@ -1604,7 +1605,6 @@ const visitors = {
 			const saved_has_return = node.metadata.has_return;
 			const saved_returns = node.metadata.returns;
 			node.metadata.has_template = false;
-			node.metadata.has_await = false;
 			node.metadata.has_throw = false;
 			context.visit(node.alternate, context.state);
 
@@ -1711,11 +1711,6 @@ const visitors = {
 		}
 
 		if (node.pending) {
-			// Try/pending blocks indicate async operations
-			if (state.metadata?.await === false) {
-				state.metadata.await = true;
-			}
-
 			node.metadata = {
 				...node.metadata,
 				has_template: false,
@@ -1749,6 +1744,8 @@ const visitors = {
 					context.state.analysis.comments,
 				);
 			}
+		} else {
+			context.visit(node.block, state);
 		}
 
 		if (node.handler) {
@@ -2109,16 +2106,6 @@ const visitors = {
 	RippleExpression(node, context) {
 		mark_control_flow_has_template(context.path);
 
-		if (expression_has_side_effects(node.expression)) {
-			error(
-				'Template expressions must not contain side effects.',
-				context.state.analysis.module.filename,
-				node.expression,
-				context.state.loose ? context.state.analysis.errors : undefined,
-				context.state.analysis.comments,
-			);
-		}
-
 		context.next();
 	},
 
@@ -2142,40 +2129,23 @@ const visitors = {
 		const parent_block = get_parent_block_node(context);
 
 		if (is_inside_component(context)) {
-			if (context.state.metadata?.await === false) {
-				context.state.metadata.await = true;
-			}
-
-			if (
-				parent_block !== null &&
-				parent_block?.type !== 'Component' &&
-				!context.state.ancestor_server_block &&
-				!(
-					parent_block.type === 'TryStatement' &&
-					parent_block.pending &&
-					is_inside_try_block(parent_block, context)
-				)
-			) {
-				// we want the error to live on the `await` keyword vs the whole expression
-				const adjusted_node /** @type {AST.AwaitExpression} */ = {
-					...node,
-					end: /** @type {AST.NodeWithLocation} */ (node).start + 'await'.length,
-				};
-				error(
-					'`await` is not allowed in client-side control-flow statements',
-					context.state.analysis.module.filename,
-					adjusted_node,
-					context.state.loose ? context.state.analysis.errors : undefined,
-					context.state.analysis.comments,
-				);
-			}
+			const adjusted_node /** @type {AST.AwaitExpression} */ = {
+				...node,
+				end: /** @type {AST.NodeWithLocation} */ (node).start + 'await'.length,
+			};
+			error(
+				'`await` is not allowed inside client components. Use `trackAsync(() => ...)` with an upstream `try { ... } pending { ... }` boundary instead.',
+				context.state.analysis.module.filename,
+				adjusted_node,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
 		}
 
 		if (parent_block) {
 			if (!parent_block.metadata) {
 				parent_block.metadata = { path: [...context.path] };
 			}
-			parent_block.metadata.has_await = true;
 		}
 
 		context.next();