ripple 0.3.11 → 0.3.13

package/tests/hydration/build-components.js

@@ -39,13 +39,15 @@ function buildComponents() {
 	mkdirSync(clientOutDir, { recursive: true });
 	mkdirSync(serverOutDir, { recursive: true });
 
-	// Get all .ripple files in components directory
-	const componentFiles = readdirSync(componentsDir).filter((f) => f.endsWith('.ripple'));
+	// Get all supported component files in components directory
+	const componentFiles = readdirSync(componentsDir).filter(
+		(f) => f.endsWith('.ripple') || f.endsWith('.rsrx') || f.endsWith('.tsrx'),
+	);
 
 	for (const file of componentFiles) {
 		const filePath = join(componentsDir, file);
 		const source = readFileSync(filePath, 'utf-8');
-		const outputName = basename(file, '.ripple') + '.js';
+		const outputName = basename(basename(file, '.ripple'), '.rsrx').replace(/\.tsrx$/, '') + '.js';
 
 		// Compile for client
 		const clientResult = compile(source, file, {

package/tests/hydration/compiled/client/head.js

@@ -22,7 +22,7 @@ export function StaticTitle(__anchor, _, __block) {
 
 	var div_1 = root();
 
-	_$_.head('qwqurq', (__anchor) => {
+	_$_.head('p76zx7', (__anchor) => {
 		_$_.document.title = 'Static Test Title';
 	});
 
@@ -47,7 +47,7 @@ export function ReactiveTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('9zxmq0', (__anchor) => {
+	_$_.head('1nb8jjx', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(lazy);
 		});
@@ -62,7 +62,7 @@ export function MultipleHeadElements(__anchor, _, __block) {
 
 	var div_3 = root_2();
 
-	_$_.head('16pnxms', (__anchor) => {
+	_$_.head('8n8nfd', (__anchor) => {
 		var fragment = root_3();
 
 		_$_.document.title = 'Page Title';
@@ -87,7 +87,7 @@ export function ReactiveMetaTags(__anchor, _, __block) {
 		_$_.pop(div_4);
 	}
 
-	_$_.head('w5ribf', (__anchor) => {
+	_$_.head('1u7li02', (__anchor) => {
 		var meta_1 = root_5();
 
 		_$_.document.title = 'My Page';
@@ -112,7 +112,7 @@ export function TitleWithTemplate(__anchor, _, __block) {
 		_$_.pop(div_5);
 	}
 
-	_$_.head('2ch862', (__anchor) => {
+	_$_.head('1wzb5pb', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = `Hello ${_$_.get(lazy_2)}!`;
 		});
@@ -127,7 +127,7 @@ export function EmptyTitle(__anchor, _, __block) {
 
 	var div_6 = root_7();
 
-	_$_.head('u2seuf', (__anchor) => {
+	_$_.head('1vtxclq', (__anchor) => {
 		_$_.document.title = '';
 	});
 
@@ -149,7 +149,7 @@ export function ConditionalTitle(__anchor, _, __block) {
 		_$_.pop(div_7);
 	}
 
-	_$_.head('a0y861', (__anchor) => {
+	_$_.head('23prgg', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = _$_.get(lazy_3) ? 'App - ' + _$_.get(lazy_4) : _$_.get(lazy_4);
 		});
@@ -177,7 +177,7 @@ export function ComputedTitle(__anchor, _, __block) {
 		}
 	}
 
-	_$_.head('1bmcw8x', (__anchor) => {
+	_$_.head('dlz6ig', (__anchor) => {
 		_$_.render(() => {
 			_$_.document.title = prefix + _$_.get(lazy_5);
 		});
@@ -192,11 +192,11 @@ export function MultipleHeadBlocks(__anchor, _, __block) {
 
 	var div_9 = root_10();
 
-	_$_.head('1lpoxil', (__anchor) => {
+	_$_.head('143y0j8', (__anchor) => {
 		_$_.document.title = 'First Head';
 	});
 
-	_$_.head('n4z677', (__anchor) => {
+	_$_.head('ejrkl6', (__anchor) => {
 		var meta_2 = root_11();
 
 		_$_.append(__anchor, meta_2);
@@ -211,7 +211,7 @@ export function HeadWithStyle(__anchor, _, __block) {
 
 	var div_10 = root_12();
 
-	_$_.head('7j37lr', (__anchor) => {
+	_$_.head('1k4vrqu', (__anchor) => {
 		_$_.document.title = 'Styled Page';
 	});
 

package/tests/hydration/compiled/client/mixed-control-flow.js

@@ -28,7 +28,7 @@ var root_19 = _$_.template(`<!>`, 1, 1);
 var root_18 = _$_.template(`<div class="before">before</div><!>`, 1, 2);
 var root_25 = _$_.template(`<div class="resolved-row"> </div>`, 0);
 
-import { track } from 'ripple';
+import { track, trackAsync } from 'ripple';
 
 export function MixedControlFlowStatic(__anchor, _, __block) {
 	_$_.push_component();
@@ -62,22 +62,20 @@ export function MixedControlFlowStatic(__anchor, _, __block) {
 								_$_.try(
 									node_2,
 									(__anchor) => {
-										_$_.async(async () => {
-											var div_1 = root_4();
+										var div_1 = root_4();
 
-											{
-												var expression = _$_.child(div_1, true);
+										{
+											var expression = _$_.child(div_1, true);
 
-												_$_.expression(expression, () => `A-${_$_.get(pattern).id}`);
-												_$_.pop(div_1);
-											}
+											_$_.expression(expression, () => `A-${_$_.get(pattern).id}`);
+											_$_.pop(div_1);
+										}
 
-											_$_.render(() => {
-												_$_.set_class(div_1, `row row-${_$_.get(pattern).id} kind-a`, void 0, true);
-											});
-
-											_$_.append(__anchor, div_1);
+										_$_.render(() => {
+											_$_.set_class(div_1, `row row-${_$_.get(pattern).id} kind-a`, void 0, true);
 										});
+
+										_$_.append(__anchor, div_1);
 									},
 									null,
 									(__anchor) => {
@@ -101,22 +99,20 @@ export function MixedControlFlowStatic(__anchor, _, __block) {
 								_$_.try(
 									node_3,
 									(__anchor) => {
-										_$_.async(async () => {
-											var div_3 = root_7();
+										var div_3 = root_7();
 
-											{
-												var expression_1 = _$_.child(div_3, true);
+										{
+											var expression_1 = _$_.child(div_3, true);
 
-												_$_.expression(expression_1, () => `B-${_$_.get(pattern).id}`);
-												_$_.pop(div_3);
-											}
+											_$_.expression(expression_1, () => `B-${_$_.get(pattern).id}`);
+											_$_.pop(div_3);
+										}
 
-											_$_.render(() => {
-												_$_.set_class(div_3, `row row-${_$_.get(pattern).id} kind-b`, void 0, true);
-											});
-
-											_$_.append(__anchor, div_3);
+										_$_.render(() => {
+											_$_.set_class(div_3, `row row-${_$_.get(pattern).id} kind-b`, void 0, true);
 										});
+
+										_$_.append(__anchor, div_3);
 									},
 									null,
 									(__anchor) => {
@@ -216,22 +212,20 @@ export function MixedControlFlowReactive(__anchor, _, __block) {
 								_$_.try(
 									node_6,
 									(__anchor) => {
-										_$_.async(async () => {
-											var p_1 = root_13();
-
-											{
-												var expression_2 = _$_.child(p_1, true);
+										var p_1 = root_13();
 
-												_$_.expression(expression_2, () => `A:${_$_.get(pattern_1).label}`);
-												_$_.pop(p_1);
-											}
+										{
+											var expression_2 = _$_.child(p_1, true);
 
-											_$_.render(() => {
-												_$_.set_class(p_1, `item item-${_$_.get(pattern_1).id}`, void 0, true);
-											});
+											_$_.expression(expression_2, () => `A:${_$_.get(pattern_1).label}`);
+											_$_.pop(p_1);
+										}
 
-											_$_.append(__anchor, p_1);
+										_$_.render(() => {
+											_$_.set_class(p_1, `item item-${_$_.get(pattern_1).id}`, void 0, true);
 										});
+
+										_$_.append(__anchor, p_1);
 									},
 									null,
 									(__anchor) => {
@@ -251,22 +245,20 @@ export function MixedControlFlowReactive(__anchor, _, __block) {
 								_$_.try(
 									node_7,
 									(__anchor) => {
-										_$_.async(async () => {
-											var p_3 = root_16();
+										var p_3 = root_16();
 
-											{
-												var expression_3 = _$_.child(p_3, true);
+										{
+											var expression_3 = _$_.child(p_3, true);
 
-												_$_.expression(expression_3, () => `B:${_$_.get(pattern_1).label}`);
-												_$_.pop(p_3);
-											}
+											_$_.expression(expression_3, () => `B:${_$_.get(pattern_1).label}`);
+											_$_.pop(p_3);
+										}
 
-											_$_.render(() => {
-												_$_.set_class(p_3, `item item-${_$_.get(pattern_1).id}`, void 0, true);
-											});
-
-											_$_.append(__anchor, p_3);
+										_$_.render(() => {
+											_$_.set_class(p_3, `item item-${_$_.get(pattern_1).id}`, void 0, true);
 										});
+
+										_$_.append(__anchor, p_3);
 									},
 									null,
 									(__anchor) => {
@@ -344,13 +336,11 @@ export function MixedControlFlowAsyncPending(__anchor, _, __block) {
 							_$_.try(
 								node_11,
 								(__anchor) => {
-									_$_.async(async () => {
-										var fragment_12 = root_22();
-										var node_12 = _$_.first_child_frag(fragment_12);
+									var fragment_12 = root_22();
+									var node_12 = _$_.first_child_frag(fragment_12);
 
-										AsyncRow(node_12, { label: `row-${row}` }, _$_.active_block);
-										_$_.append(__anchor, fragment_12);
-									});
+									AsyncRow(node_12, { label: `row-${row}` }, _$_.active_block);
+									_$_.append(__anchor, fragment_12);
 								},
 								null,
 								(__anchor) => {
@@ -411,25 +401,20 @@ export function MixedControlFlowAsyncPending(__anchor, _, __block) {
 }
 
 function AsyncRow(__anchor, { label }, __block) {
-	_$_.async(async () => {
-		_$_.push_component();
-
-		let value = (await _$_.maybe_tracked(_$_.with_scope(__block, async () => Promise.resolve(label))))();
-
-		if (_$_.aborted()) return;
+	_$_.push_component();
 
-		var div_9 = root_25();
+	let lazy_3 = _$_.track_async(() => _$_.with_scope(__block, () => Promise.resolve(label)), __block);
+	var div_9 = root_25();
 
-		{
-			var expression_5 = _$_.child(div_9, true);
+	{
+		var expression_5 = _$_.child(div_9, true);
 
-			_$_.expression(expression_5, () => value);
-			_$_.pop(div_9);
-		}
+		_$_.expression(expression_5, () => _$_.get(lazy_3));
+		_$_.pop(div_9);
+	}
 
-		_$_.append(__anchor, div_9);
-		_$_.pop_component();
-	});
+	_$_.append(__anchor, div_9);
+	_$_.pop_component();
 }
 
 _$_.delegate(['click']);

package/tests/hydration/compiled/client/nested-control-flow.js

@@ -621,11 +621,9 @@ export function SwitchTry(__anchor, _, __block) {
 				_$_.try(
 					node_13,
 					(__anchor) => {
-						_$_.async(async () => {
-							var p_3 = root_32();
+						var p_3 = root_32();
 
-							_$_.append(__anchor, p_3);
-						});
+						_$_.append(__anchor, p_3);
 					},
 					null,
 					(__anchor) => {
@@ -688,22 +686,20 @@ export function ForSwitchTry(__anchor, _, __block) {
 						_$_.try(
 							node_15,
 							(__anchor) => {
-								_$_.async(async () => {
-									var li_10 = root_38();
-
-									{
-										var expression_9 = _$_.child(li_10, true);
+								var li_10 = root_38();
 
-										_$_.expression(expression_9, () => `A-${_$_.get(pattern_5).id}`);
-										_$_.pop(li_10);
-									}
+								{
+									var expression_9 = _$_.child(li_10, true);
 
-									_$_.render(() => {
-										_$_.set_class(li_10, `item item-${_$_.get(pattern_5).id} kind-a`, void 0, true);
-									});
+									_$_.expression(expression_9, () => `A-${_$_.get(pattern_5).id}`);
+									_$_.pop(li_10);
+								}
 
-									_$_.append(__anchor, li_10);
+								_$_.render(() => {
+									_$_.set_class(li_10, `item item-${_$_.get(pattern_5).id} kind-a`, void 0, true);
 								});
+
+								_$_.append(__anchor, li_10);
 							},
 							null,
 							(__anchor) => {
@@ -734,22 +730,20 @@ export function ForSwitchTry(__anchor, _, __block) {
 						_$_.try(
 							node_16,
 							(__anchor) => {
-								_$_.async(async () => {
-									var li_12 = root_41();
-
-									{
-										var expression_11 = _$_.child(li_12, true);
+								var li_12 = root_41();
 
-										_$_.expression(expression_11, () => `B-${_$_.get(pattern_5).id}`);
-										_$_.pop(li_12);
-									}
+								{
+									var expression_11 = _$_.child(li_12, true);
 
-									_$_.render(() => {
-										_$_.set_class(li_12, `item item-${_$_.get(pattern_5).id} kind-b`, void 0, true);
-									});
+									_$_.expression(expression_11, () => `B-${_$_.get(pattern_5).id}`);
+									_$_.pop(li_12);
+								}
 
-									_$_.append(__anchor, li_12);
+								_$_.render(() => {
+									_$_.set_class(li_12, `item item-${_$_.get(pattern_5).id} kind-b`, void 0, true);
 								});
+
+								_$_.append(__anchor, li_12);
 							},
 							null,
 							(__anchor) => {
@@ -823,22 +817,20 @@ export function ForIfTry(__anchor, _, __block) {
 						_$_.try(
 							node_18,
 							(__anchor) => {
-								_$_.async(async () => {
-									var li_14 = root_46();
+								var li_14 = root_46();
 
-									{
-										var expression_13 = _$_.child(li_14, true);
-
-										_$_.expression(expression_13, () => `item-${_$_.get(pattern_6).id}`);
-										_$_.pop(li_14);
-									}
+								{
+									var expression_13 = _$_.child(li_14, true);
 
-									_$_.render(() => {
-										_$_.set_class(li_14, `item item-${_$_.get(pattern_6).id}`, void 0, true);
-									});
+									_$_.expression(expression_13, () => `item-${_$_.get(pattern_6).id}`);
+									_$_.pop(li_14);
+								}
 
-									_$_.append(__anchor, li_14);
+								_$_.render(() => {
+									_$_.set_class(li_14, `item item-${_$_.get(pattern_6).id}`, void 0, true);
 								});
+
+								_$_.append(__anchor, li_14);
 							},
 							null,
 							(__anchor) => {
@@ -907,22 +899,20 @@ export function ForIfSwitchTrySingle(__anchor, _, __block) {
 								_$_.try(
 									node_21,
 									(__anchor) => {
-										_$_.async(async () => {
-											var li_16 = root_52();
-
-											{
-												var expression_15 = _$_.child(li_16, true);
+										var li_16 = root_52();
 
-												_$_.expression(expression_15, () => `A-${_$_.get(pattern_7).id}`);
-												_$_.pop(li_16);
-											}
+										{
+											var expression_15 = _$_.child(li_16, true);
 
-											_$_.render(() => {
-												_$_.set_class(li_16, `item item-${_$_.get(pattern_7).id} kind-a`, void 0, true);
-											});
+											_$_.expression(expression_15, () => `A-${_$_.get(pattern_7).id}`);
+											_$_.pop(li_16);
+										}
 
-											_$_.append(__anchor, li_16);
+										_$_.render(() => {
+											_$_.set_class(li_16, `item item-${_$_.get(pattern_7).id} kind-a`, void 0, true);
 										});
+
+										_$_.append(__anchor, li_16);
 									},
 									null,
 									(__anchor) => {
@@ -953,22 +943,20 @@ export function ForIfSwitchTrySingle(__anchor, _, __block) {
 								_$_.try(
 									node_22,
 									(__anchor) => {
-										_$_.async(async () => {
-											var li_18 = root_55();
-
-											{
-												var expression_17 = _$_.child(li_18, true);
+										var li_18 = root_55();
 
-												_$_.expression(expression_17, () => `D-${_$_.get(pattern_7).id}`);
-												_$_.pop(li_18);
-											}
+										{
+											var expression_17 = _$_.child(li_18, true);
 
-											_$_.render(() => {
-												_$_.set_class(li_18, `item item-${_$_.get(pattern_7).id} kind-default`, void 0, true);
-											});
+											_$_.expression(expression_17, () => `D-${_$_.get(pattern_7).id}`);
+											_$_.pop(li_18);
+										}
 
-											_$_.append(__anchor, li_18);
+										_$_.render(() => {
+											_$_.set_class(li_18, `item item-${_$_.get(pattern_7).id} kind-default`, void 0, true);
 										});
+
+										_$_.append(__anchor, li_18);
 									},
 									null,
 									(__anchor) => {
@@ -1059,22 +1047,20 @@ export function ForIfSwitchTryMulti(__anchor, _, __block) {
 								_$_.try(
 									node_25,
 									(__anchor) => {
-										_$_.async(async () => {
-											var li_20 = root_61();
-
-											{
-												var expression_19 = _$_.child(li_20, true);
+										var li_20 = root_61();
 
-												_$_.expression(expression_19, () => `A-${_$_.get(pattern_8).id}`);
-												_$_.pop(li_20);
-											}
+										{
+											var expression_19 = _$_.child(li_20, true);
 
-											_$_.render(() => {
-												_$_.set_class(li_20, `item item-${_$_.get(pattern_8).id} kind-a`, void 0, true);
-											});
+											_$_.expression(expression_19, () => `A-${_$_.get(pattern_8).id}`);
+											_$_.pop(li_20);
+										}
 
-											_$_.append(__anchor, li_20);
+										_$_.render(() => {
+											_$_.set_class(li_20, `item item-${_$_.get(pattern_8).id} kind-a`, void 0, true);
 										});
+
+										_$_.append(__anchor, li_20);
 									},
 									null,
 									(__anchor) => {
@@ -1105,22 +1091,20 @@ export function ForIfSwitchTryMulti(__anchor, _, __block) {
 								_$_.try(
 									node_26,
 									(__anchor) => {
-										_$_.async(async () => {
-											var li_22 = root_64();
-
-											{
-												var expression_21 = _$_.child(li_22, true);
+										var li_22 = root_64();
 
-												_$_.expression(expression_21, () => `B-${_$_.get(pattern_8).id}`);
-												_$_.pop(li_22);
-											}
+										{
+											var expression_21 = _$_.child(li_22, true);
 
-											_$_.render(() => {
-												_$_.set_class(li_22, `item item-${_$_.get(pattern_8).id} kind-b`, void 0, true);
-											});
+											_$_.expression(expression_21, () => `B-${_$_.get(pattern_8).id}`);
+											_$_.pop(li_22);
+										}
 
-											_$_.append(__anchor, li_22);
+										_$_.render(() => {
+											_$_.set_class(li_22, `item item-${_$_.get(pattern_8).id} kind-b`, void 0, true);
 										});
+
+										_$_.append(__anchor, li_22);
 									},
 									null,
 									(__anchor) => {