ripple 0.3.84 → 0.3.86

package/tests/hydration/compiled/server/basic.js

@@ -6,14 +6,10 @@ import { track } from 'ripple/server';
 export function StaticText() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('Hello World');
-			}
-
-			_$_.output_push('</div>');
+			__out += '<div>Hello World</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -21,32 +17,10 @@ export function StaticText() {
 export function MultipleElements() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<h1');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Title');
-				}
-
-				_$_.output_push('</h1>');
-				_$_.output_push('<p');
-				_$_.output_push('>');
+			let __out = '';
 
-				{
-					_$_.output_push('Paragraph text');
-				}
-
-				_$_.output_push('</p>');
-				_$_.output_push('<span');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Span text');
-				}
-
-				_$_.output_push('</span>');
-			}
+			__out += '<h1>Title</h1><p>Paragraph text</p><span>Span text</span>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -54,30 +28,10 @@ export function MultipleElements() {
 export function NestedElements() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="outer"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('<div');
-				_$_.output_push(' class="inner"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<span');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('Nested content');
-					}
-
-					_$_.output_push('</span>');
-				}
-
-				_$_.output_push('</div>');
-			}
-
-			_$_.output_push('</div>');
+			__out += '<div class="outer"><div class="inner"><span>Nested content</span></div></div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -85,23 +39,10 @@ export function NestedElements() {
 export function WithAttributes() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<input');
-				_$_.output_push(' type="text"');
-				_$_.output_push(' placeholder="Enter text"');
-				_$_.output_push(' disabled');
-				_$_.output_push(' />');
-				_$_.output_push('<a');
-				_$_.output_push(' href="/link"');
-				_$_.output_push(' target="_blank"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Link');
-				}
+			let __out = '';
 
-				_$_.output_push('</a>');
-			}
+			__out += '<input type="text" placeholder="Enter text" disabled /><a href="/link" target="_blank">Link</a>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -109,15 +50,10 @@ export function WithAttributes() {
 export function ChildComponent() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<span');
-			_$_.output_push(' class="child"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('Child content');
-			}
+			let __out = '';
 
-			_$_.output_push('</span>');
+			__out += '<span class="child">Child content</span>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -125,20 +61,23 @@ export function ChildComponent() {
 export function ParentWithChild() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="parent"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="parent">';
 
 			{
 				{
 					const comp = ChildComponent;
 					const args = [{}];
 
+					_$_.output_push(__out);
+					__out = '';
 					_$_.render_component(comp, ...args);
 				}
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -146,15 +85,10 @@ export function ParentWithChild() {
 export function FirstSibling() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="first"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('First');
-			}
+			let __out = '';
 
-			_$_.output_push('</div>');
+			__out += '<div class="first">First</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -162,15 +96,10 @@ export function FirstSibling() {
 export function SecondSibling() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="second"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('Second');
-			}
-
-			_$_.output_push('</div>');
+			__out += '<div class="second">Second</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -200,14 +129,10 @@ export function SiblingComponents() {
 export function Greeting(props) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push(_$_.escape('Hello ' + String(props.name ?? '')));
-			}
-
-			_$_.output_push('</div>');
+			__out += '<div>' + _$_.escape('Hello ' + String(props.name ?? '')) + '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -231,24 +156,18 @@ export function ExpressionContent() {
 		const label = 'computed';
 
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<div');
-				_$_.output_push('>');
+			let __out = '';
 
-				{
-					_$_.output_push(_$_.escape(value));
-				}
-
-				_$_.output_push('</div>');
-				_$_.output_push('<span');
-				_$_.output_push('>');
-
-				{
-					_$_.render_expression(label.toUpperCase());
-				}
+			__out += '<div>' + _$_.escape(value) + '</div><span>';
 
-				_$_.output_push('</span>');
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(label.toUpperCase());
 			}
+
+			__out += '</span>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -256,15 +175,10 @@ export function ExpressionContent() {
 function NestedHelperItem({ item }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="helper-item"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push(_$_.escape(item));
-			}
-
-			_$_.output_push('</div>');
+			__out += '<div class="helper-item">' + _$_.escape(item) + '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -272,29 +186,23 @@ function NestedHelperItem({ item }) {
 function NestedTsxTsrxFragment({ label }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<span');
-				_$_.output_push(' class="label"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push(_$_.escape(label));
-				}
+			let __out = '';
 
-				_$_.output_push('</span>');
-				_$_.output_push('<!--[-->');
+			__out += '<span class="label">' + _$_.escape(label) + '</span><!--[-->';
 
-				for (const item of [1, 2, 3, 4]) {
-					{
-						const comp = NestedHelperItem;
-						const args = [{ item }];
+			for (const item of [1, 2, 3, 4]) {
+				{
+					const comp = NestedHelperItem;
+					const args = [{ item }];
 
-						_$_.render_component(comp, ...args);
-					}
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_component(comp, ...args);
 				}
-
-				_$_.output_push('<!--]-->');
 			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -302,36 +210,27 @@ function NestedTsxTsrxFragment({ label }) {
 export function NestedTsxTsrxExpressionValues() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="nested-expression-values"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('<!--[-->');
+			let __out = '';
 
-				for (const item of [1, 2, 3]) {
-					_$_.output_push('<div');
-					_$_.output_push(' class="app-item"');
-					_$_.output_push('>');
+			__out += '<div class="nested-expression-values"><!--[-->';
 
-					{
-						_$_.output_push(_$_.escape(item));
-					}
-
-					_$_.output_push('</div>');
-				}
+			for (const item of [1, 2, 3]) {
+				__out += '<div class="app-item">' + _$_.escape(item) + '</div>';
+			}
 
-				_$_.output_push('<!--]-->');
+			__out += '<!--]-->';
 
-				{
-					const comp = NestedTsxTsrxFragment;
-					const args = [{ label: "from helper" }];
+			{
+				const comp = NestedTsxTsrxFragment;
+				const args = [{ label: "from helper" }];
 
-					_$_.render_component(comp, ...args);
-				}
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -343,29 +242,19 @@ export function MixedTsrxCollectionText() {
 				_$_.render_expression([
 					'alpha ',
 					_$_.tsrx_element(() => {
-						_$_.output_push('<strong');
-						_$_.output_push(' class="middle"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('beta');
-						}
+						let __out = '';
 
-						_$_.output_push('</strong>');
+						__out += '<strong class="middle">beta</strong>';
+						_$_.output_push(__out);
 					}),
 					' gamma ',
 					[
 						'delta ',
 						_$_.tsrx_element(() => {
-							_$_.output_push('<em');
-							_$_.output_push(' class="tail"');
-							_$_.output_push('>');
+							let __out = '';
 
-							{
-								_$_.output_push('epsilon');
-							}
-
-							_$_.output_push('</em>');
+							__out += '<em class="tail">epsilon</em>';
+							_$_.output_push(__out);
 						}),
 						' zeta'
 					]
@@ -374,15 +263,18 @@ export function MixedTsrxCollectionText() {
 		});
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="mixed-collection"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="mixed-collection">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -394,29 +286,19 @@ export function MixedTsrxCollectionSplitServerText() {
 				_$_.render_expression([
 					'alpha ',
 					_$_.tsrx_element(() => {
-						_$_.output_push('<strong');
-						_$_.output_push(' class="middle"');
-						_$_.output_push('>');
+						let __out = '';
 
-						{
-							_$_.output_push('beta');
-						}
-
-						_$_.output_push('</strong>');
+						__out += '<strong class="middle">beta</strong>';
+						_$_.output_push(__out);
 					}),
 					' gamma ',
 					[
 						'delta ',
 						_$_.tsrx_element(() => {
-							_$_.output_push('<em');
-							_$_.output_push(' class="tail"');
-							_$_.output_push('>');
-
-							{
-								_$_.output_push('epsilon');
-							}
+							let __out = '';
 
-							_$_.output_push('</em>');
+							__out += '<em class="tail">epsilon</em>';
+							_$_.output_push(__out);
 						}),
 						' zeta'
 					]
@@ -425,15 +307,18 @@ export function MixedTsrxCollectionSplitServerText() {
 		});
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="mixed-collection-split"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="mixed-collection-split">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -445,29 +330,19 @@ export function MixedTsrxCollectionSplitClientText() {
 				_$_.render_expression([
 					'alpha ',
 					_$_.tsrx_element(() => {
-						_$_.output_push('<strong');
-						_$_.output_push(' class="middle"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('beta');
-						}
+						let __out = '';
 
-						_$_.output_push('</strong>');
+						__out += '<strong class="middle">beta</strong>';
+						_$_.output_push(__out);
 					}),
 					' gamma ',
 					[
 						'changed ',
 						_$_.tsrx_element(() => {
-							_$_.output_push('<em');
-							_$_.output_push(' class="tail"');
-							_$_.output_push('>');
+							let __out = '';
 
-							{
-								_$_.output_push('epsilon');
-							}
-
-							_$_.output_push('</em>');
+							__out += '<em class="tail">epsilon</em>';
+							_$_.output_push(__out);
 						}),
 						' zeta'
 					]
@@ -476,15 +351,18 @@ export function MixedTsrxCollectionSplitClientText() {
 		});
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="mixed-collection-split"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="mixed-collection-split">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -499,30 +377,28 @@ export function MixedTsrxCollectionPrimitiveServerText() {
 					' / ',
 					true,
 					_$_.tsrx_element(() => {
-						_$_.output_push('<span');
-						_$_.output_push(' class="primitive-tail"');
-						_$_.output_push('>');
+						let __out = '';
 
-						{
-							_$_.output_push(' ok');
-						}
-
-						_$_.output_push('</span>');
+						__out += '<span class="primitive-tail"> ok</span>';
+						_$_.output_push(__out);
 					})
 				]);
 			});
 		});
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="mixed-collection-primitive"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="mixed-collection-primitive">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -537,30 +413,28 @@ export function MixedTsrxCollectionPrimitiveClientText() {
 					' / ',
 					false,
 					_$_.tsrx_element(() => {
-						_$_.output_push('<span');
-						_$_.output_push(' class="primitive-tail"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push(' ok');
-						}
+						let __out = '';
 
-						_$_.output_push('</span>');
+						__out += '<span class="primitive-tail"> ok</span>';
+						_$_.output_push(__out);
 					})
 				]);
 			});
 		});
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="mixed-collection-primitive"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="mixed-collection-primitive">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -574,15 +448,18 @@ export function DynamicArrayFromCall() {
 		const items = createPrimitiveItems();
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="dynamic-array-call"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="dynamic-array-call">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(items);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -592,15 +469,18 @@ export function DynamicArrayFromTrack() {
 		let lazy = _$_.track(['start:', ['one', 2], true, null, false, ':end'], 'b5de6402');
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="dynamic-array-track"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="dynamic-array-track">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(lazy.value);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -614,15 +494,18 @@ export function DynamicArrayFromConditional() {
 			: ['fallback'];
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="dynamic-array-conditional"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="dynamic-array-conditional">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(items);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -633,15 +516,18 @@ export function DynamicArrayFromLogical() {
 		const items = condition && ['start:', ['one', 2], true, null, false, ':end'];
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="dynamic-array-logical"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="dynamic-array-logical">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(items);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -650,30 +536,26 @@ export function NestedTsrxInsideTopLevelTsxExpression() {
 	return _$_.tsrx_element(() => {
 		const content = _$_.tsrx_element(() => {
 			_$_.regular_block(() => {
-				_$_.output_push('<section');
-				_$_.output_push(' class="outer"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<div');
-					_$_.output_push(' class="inner"');
-					_$_.output_push('>');
+				let __out = '';
 
-					{
-						_$_.output_push('from tsrx');
-					}
-
-					_$_.output_push('</div>');
-				}
-
-				_$_.output_push('</section>');
+				__out += '<section class="outer"><div class="inner">from tsrx</div></section>';
+				_$_.output_push(__out);
 			});
 		});
 
 		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -682,38 +564,26 @@ export function NestedTsrxElementsInsideTopLevelTsxValue() {
 	return _$_.tsrx_element(() => {
 		const content = _$_.tsrx_element(() => {
 			_$_.regular_block(() => {
-				_$_.output_push('<div');
-				_$_.output_push(' class="wrapper"');
-				_$_.output_push('>');
+				let __out = '';
 
-				{
-					_$_.output_push('<section');
-					_$_.output_push(' class="native"');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('<span');
-						_$_.output_push(' class="nested-tsrx"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('inside nested tsrx');
-						}
-
-						_$_.output_push('</span>');
-					}
-
-					_$_.output_push('</section>');
-				}
-
-				_$_.output_push('</div>');
+				__out += '<div class="wrapper"><section class="native"><span class="nested-tsrx">inside nested tsrx</span></section></div>';
+				_$_.output_push(__out);
 			});
 		});
 
 		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -722,36 +592,43 @@ export function TsxDeclaredBeforeTopLevelTsx() {
 	return _$_.tsrx_element(() => {
 		const nested = _$_.tsrx_element(() => {
 			_$_.regular_block(() => {
-				_$_.output_push('<span');
-				_$_.output_push(' class="nested-tsx"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('inside nested tsx');
-				}
+				let __out = '';
 
-				_$_.output_push('</span>');
+				__out += '<span class="nested-tsx">inside nested tsx</span>';
+				_$_.output_push(__out);
 			});
 		});
 
 		const content = _$_.tsrx_element(() => {
 			_$_.regular_block(() => {
-				_$_.output_push('<div');
-				_$_.output_push(' class="native"');
-				_$_.output_push('>');
+				let __out = '';
+
+				__out += '<div class="native">';
 
 				{
+					_$_.output_push(__out);
+					__out = '';
 					_$_.render_expression(nested);
 				}
 
-				_$_.output_push('</div>');
+				__out += '</div>';
+				_$_.output_push(__out);
 			});
 		});
 
 		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(content);
 			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -759,15 +636,18 @@ export function TsxDeclaredBeforeTopLevelTsx() {
 function TextProp(__props) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="text-prop"');
-			_$_.output_push('>');
+			let __out = '';
+
+			__out += '<div class="text-prop">';
 
 			{
+				_$_.output_push(__out);
+				__out = '';
 				_$_.render_expression(__props.children);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -777,29 +657,27 @@ export function TextPropWithToggle() {
 		let lazy_1 = _$_.track(false, '1ba81c3b');
 
 		_$_.regular_block(() => {
-			{
-				{
-					const comp = TextProp;
-
-					const args = [
-						{
-							children: _$_.normalize_children(lazy_1.value ? 'hello' : '')
-						}
-					];
+			let __out = '';
 
-					_$_.render_component(comp, ...args);
-				}
+			{
+				const comp = TextProp;
 
-				_$_.output_push('<button');
-				_$_.output_push(' class="show-text"');
-				_$_.output_push('>');
+				_$_.output_push(__out);
+				__out = '';
 
-				{
-					_$_.output_push('Show');
-				}
+				const args = [
+					{
+						children: _$_.normalize_children(lazy_1.value ? 'hello' : '')
+					}
+				];
 
-				_$_.output_push('</button>');
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
+
+			__out += '<button class="show-text">Show</button>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -807,35 +685,10 @@ export function TextPropWithToggle() {
 function StaticHeader() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<h1');
-				_$_.output_push(' class="sr-only"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('heading');
-				}
-
-				_$_.output_push('</h1>');
-				_$_.output_push('<p');
-				_$_.output_push(' class="subtitle"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('first paragraph');
-				}
-
-				_$_.output_push('</p>');
-				_$_.output_push('<p');
-				_$_.output_push(' class="subtitle"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('second paragraph');
-				}
+			let __out = '';
 
-				_$_.output_push('</p>');
-			}
+			__out += '<h1 class="sr-only">heading</h1><p class="subtitle">first paragraph</p><p class="subtitle">second paragraph</p>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -845,33 +698,19 @@ export function StaticChildWithSiblings() {
 		const foo = 'bar';
 
 		_$_.regular_block(() => {
-			{
-				{
-					const comp = StaticHeader;
-					const args = [{}];
-
-					_$_.render_component(comp, ...args);
-				}
-
-				_$_.output_push('<span');
-				_$_.output_push(' class="sibling1"');
-				_$_.output_push('>');
+			let __out = '';
 
-				{
-					_$_.output_push(_$_.escape(foo));
-				}
-
-				_$_.output_push('</span>');
-				_$_.output_push('<span');
-				_$_.output_push(' class="sibling2"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push(_$_.escape(foo));
-				}
+			{
+				const comp = StaticHeader;
+				const args = [{}];
 
-				_$_.output_push('</span>');
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
+
+			__out += '<span class="sibling1">' + _$_.escape(foo) + '</span><span class="sibling2">' + _$_.escape(foo) + '</span>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -879,31 +718,10 @@ export function StaticChildWithSiblings() {
 function Header() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<h1');
-				_$_.output_push(' class="sr-only"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Ripple');
-				}
+			let __out = '';
 
-				_$_.output_push('</h1>');
-				_$_.output_push('<img');
-				_$_.output_push(' src="/images/logo.png"');
-				_$_.output_push(' alt="Logo"');
-				_$_.output_push(' class="logo"');
-				_$_.output_push(' />');
-				_$_.output_push('<p');
-				_$_.output_push(' class="subtitle"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('the elegant TypeScript UI framework');
-				}
-
-				_$_.output_push('</p>');
-			}
+			__out += '<h1 class="sr-only">Ripple</h1><img src="/images/logo.png" alt="Logo" class="logo" /><p class="subtitle">the elegant TypeScript UI framework</p>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -911,49 +729,23 @@ function Header() {
 function Actions({ playgroundVisible = false }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="social-links"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('<a');
-				_$_.output_push(' href="https://github.com"');
-				_$_.output_push(' class="github-link"');
-				_$_.output_push('>');
+			__out += '<div class="social-links"><a href="https://github.com" class="github-link">GitHub</a><a href="https://discord.com" class="discord-link">Discord</a>';
+			_$_.output_push(__out);
+			__out = '';
 
-				{
-					_$_.output_push('GitHub');
-				}
+			_$_.render_expression(playgroundVisible
+				? _$_.tsrx_element(() => {
+					let __out = '';
 
-				_$_.output_push('</a>');
-				_$_.output_push('<a');
-				_$_.output_push(' href="https://discord.com"');
-				_$_.output_push(' class="discord-link"');
-				_$_.output_push('>');
+					__out += '<a href="/playground" class="playground-link">Playground</a>';
+					_$_.output_push(__out);
+				})
+				: null);
 
-				{
-					_$_.output_push('Discord');
-				}
-
-				_$_.output_push('</a>');
-
-				_$_.render_expression(playgroundVisible
-					? _$_.tsrx_element(() => {
-						_$_.output_push('<a');
-						_$_.output_push(' href="/playground"');
-						_$_.output_push(' class="playground-link"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('Playground');
-						}
-
-						_$_.output_push('</a>');
-					})
-					: null);
-			}
-
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -961,22 +753,18 @@ function Actions({ playgroundVisible = false }) {
 function Layout({ children }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<main');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('<div');
-				_$_.output_push(' class="container"');
-				_$_.output_push('>');
-
-				{
-					_$_.render_expression(children);
-				}
+			__out += '<main><div class="container">';
 
-				_$_.output_push('</div>');
+			{
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_expression(children);
 			}
 
-			_$_.output_push('</main>');
+			__out += '</div></main>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -984,22 +772,10 @@ function Layout({ children }) {
 function Content() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="content"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('<p');
-				_$_.output_push('>');
+			let __out = '';
 
-				{
-					_$_.output_push('Some content here');
-				}
-
-				_$_.output_push('</p>');
-			}
-
-			_$_.output_push('</div>');
+			__out += '<div class="content"><p>Some content here</p></div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -1055,15 +831,10 @@ export function WebsiteIndex() {
 function LastChild() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<footer');
-			_$_.output_push(' class="last-child"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('I am the last child');
-			}
+			let __out = '';
 
-			_$_.output_push('</footer>');
+			__out += '<footer class="last-child">I am the last child</footer>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -1071,37 +842,21 @@ function LastChild() {
 export function ComponentAsLastSibling() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="wrapper"');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('<h1');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Header');
-				}
-
-				_$_.output_push('</h1>');
-				_$_.output_push('<p');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Some content');
-				}
+			let __out = '';
 
-				_$_.output_push('</p>');
+			__out += '<div class="wrapper"><h1>Header</h1><p>Some content</p>';
 
-				{
-					const comp = LastChild;
-					const args = [{}];
+			{
+				const comp = LastChild;
+				const args = [{}];
 
-					_$_.render_component(comp, ...args);
-				}
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -1109,29 +864,21 @@ export function ComponentAsLastSibling() {
 function InnerContent() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push(' class="inner"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('<span');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Inner text');
-				}
+			__out += '<div class="inner"><span>Inner text</span>';
 
-				_$_.output_push('</span>');
-
-				{
-					const comp = LastChild;
-					const args = [{}];
+			{
+				const comp = LastChild;
+				const args = [{}];
 
-					_$_.render_component(comp, ...args);
-				}
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
 
-			_$_.output_push('</div>');
+			__out += '</div>';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -1139,29 +886,21 @@ function InnerContent() {
 export function NestedComponentAsLastSibling() {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
-			_$_.output_push('<section');
-			_$_.output_push(' class="outer"');
-			_$_.output_push('>');
+			let __out = '';
 
-			{
-				_$_.output_push('<h2');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Section title');
-				}
+			__out += '<section class="outer"><h2>Section title</h2>';
 
-				_$_.output_push('</h2>');
-
-				{
-					const comp = InnerContent;
-					const args = [{}];
+			{
+				const comp = InnerContent;
+				const args = [{}];
 
-					_$_.render_component(comp, ...args);
-				}
+				_$_.output_push(__out);
+				__out = '';
+				_$_.render_component(comp, ...args);
 			}
 
-			_$_.output_push('</section>');
+			__out += '</section>';
+			_$_.output_push(__out);
 		});
 	});
 }