ripple 0.3.67 → 0.3.69

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

@@ -4,235 +4,227 @@ import * as _$_ from 'ripple/internal/server';
 import { Portal, track } from 'ripple/server';
 
 export function SimplePortal() {
-	_$_.push_component();
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="container"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<h1');
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="container"');
 			_$_.output_push('>');
 
 			{
-				_$_.output_push('Main Content');
-			}
-
-			_$_.output_push('</h1>');
-
-			{
-				const comp = Portal;
-
-				const args = [
-					{
-						target: typeof document !== 'undefined' ? document.body : null,
-						children: _$_.tsrx_element(function render_children() {
-							_$_.push_component();
-							_$_.output_push('<div');
-							_$_.output_push(' class="portal-content"');
-							_$_.output_push('>');
-
-							{
-								_$_.output_push('Portal content');
-							}
-
-							_$_.output_push('</div>');
-							_$_.pop_component();
-						})
-					}
-				];
+				_$_.output_push('<h1');
+				_$_.output_push('>');
 
-				if (comp) {
-					comp(...args);
+				{
+					_$_.output_push('Main Content');
 				}
-			}
-		}
 
-		_$_.output_push('</div>');
-	});
-
-	_$_.pop_component();
-}
-
-export function ConditionalPortal() {
-	_$_.push_component();
-
-	let lazy = _$_.track(true, '4f6df174');
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="container"');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<button');
-			_$_.output_push(' class="toggle"');
-			_$_.output_push('>');
+				_$_.output_push('</h1>');
 
-			{
-				_$_.output_push('Toggle');
-			}
-
-			_$_.output_push('</button>');
-			_$_.output_push('<!--[-->');
-
-			if (lazy.value) {
 				{
 					const comp = Portal;
 
 					const args = [
 						{
 							target: typeof document !== 'undefined' ? document.body : null,
-							children: _$_.tsrx_element(function render_children() {
-								_$_.push_component();
-								_$_.output_push('<div');
-								_$_.output_push(' class="portal-content"');
-								_$_.output_push('>');
-
-								{
-									_$_.output_push('Portal is visible');
-								}
-
-								_$_.output_push('</div>');
-								_$_.pop_component();
+							children: _$_.tsrx_element(() => {
+								return _$_.tsrx_element(() => {
+									_$_.output_push('<div');
+									_$_.output_push(' class="portal-content"');
+									_$_.output_push('>');
+
+									{
+										_$_.output_push('Portal content');
+									}
+
+									_$_.output_push('</div>');
+								});
 							})
 						}
 					];
 
 					if (comp) {
-						comp(...args);
+						_$_.render_component(comp, ...args);
 					}
 				}
 			}
 
-			_$_.output_push('<!--]-->');
-		}
-
-		_$_.output_push('</div>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
-export function PortalWithMainContent() {
-	_$_.push_component();
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push('>');
+export function ConditionalPortal() {
+	return _$_.tsrx_element(() => {
+		let lazy = _$_.track(true, '4f6df174');
 
-		{
+		_$_.regular_block(() => {
 			_$_.output_push('<div');
-			_$_.output_push(' class="main-content"');
+			_$_.output_push(' class="container"');
 			_$_.output_push('>');
 
 			{
-				_$_.output_push('Main page content');
-			}
+				_$_.output_push('<button');
+				_$_.output_push(' class="toggle"');
+				_$_.output_push('>');
 
-			_$_.output_push('</div>');
+				{
+					_$_.output_push('Toggle');
+				}
 
-			{
-				const comp = Portal;
+				_$_.output_push('</button>');
+				_$_.output_push('<!--[-->');
 
-				const args = [
+				if (lazy.value) {
 					{
-						target: typeof document !== 'undefined' ? document.body : null,
-						children: _$_.tsrx_element(function render_children() {
-							_$_.push_component();
-							_$_.output_push('<div');
-							_$_.output_push(' class="portal-content"');
-							_$_.output_push('>');
+						const comp = Portal;
 
+						const args = [
 							{
-								_$_.output_push('Modal content');
+								target: typeof document !== 'undefined' ? document.body : null,
+								children: _$_.tsrx_element(() => {
+									return _$_.tsrx_element(() => {
+										_$_.output_push('<div');
+										_$_.output_push(' class="portal-content"');
+										_$_.output_push('>');
+
+										{
+											_$_.output_push('Portal is visible');
+										}
+
+										_$_.output_push('</div>');
+									});
+								})
 							}
+						];
 
-							_$_.output_push('</div>');
-							_$_.pop_component();
-						})
+						if (comp) {
+							_$_.render_component(comp, ...args);
+						}
 					}
-				];
-
-				if (comp) {
-					comp(...args);
 				}
+
+				_$_.output_push('<!--]-->');
 			}
 
+			_$_.output_push('</div>');
+		});
+	});
+}
+
+export function PortalWithMainContent() {
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
 			_$_.output_push('<div');
-			_$_.output_push(' class="footer"');
 			_$_.output_push('>');
 
 			{
-				_$_.output_push('Footer');
-			}
-
-			_$_.output_push('</div>');
-		}
+				_$_.output_push('<div');
+				_$_.output_push(' class="main-content"');
+				_$_.output_push('>');
 
-		_$_.output_push('</div>');
-	});
+				{
+					_$_.output_push('Main page content');
+				}
 
-	_$_.pop_component();
-}
+				_$_.output_push('</div>');
 
-export function NestedContentWithPortal() {
-	_$_.push_component();
+				{
+					const comp = Portal;
 
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="outer"');
-		_$_.output_push('>');
+					const args = [
+						{
+							target: typeof document !== 'undefined' ? document.body : null,
+							children: _$_.tsrx_element(() => {
+								return _$_.tsrx_element(() => {
+									_$_.output_push('<div');
+									_$_.output_push(' class="portal-content"');
+									_$_.output_push('>');
+
+									{
+										_$_.output_push('Modal content');
+									}
+
+									_$_.output_push('</div>');
+								});
+							})
+						}
+					];
 
-		{
-			_$_.output_push('<div');
-			_$_.output_push(' class="inner"');
-			_$_.output_push('>');
+					if (comp) {
+						_$_.render_component(comp, ...args);
+					}
+				}
 
-			{
-				_$_.output_push('<span');
+				_$_.output_push('<div');
+				_$_.output_push(' class="footer"');
 				_$_.output_push('>');
 
 				{
-					_$_.output_push('Nested content');
+					_$_.output_push('Footer');
 				}
 
-				_$_.output_push('</span>');
+				_$_.output_push('</div>');
 			}
 
 			_$_.output_push('</div>');
+		});
+	});
+}
+
+export function NestedContentWithPortal() {
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="outer"');
+			_$_.output_push('>');
 
 			{
-				const comp = Portal;
+				_$_.output_push('<div');
+				_$_.output_push(' class="inner"');
+				_$_.output_push('>');
+
+				{
+					_$_.output_push('<span');
+					_$_.output_push('>');
 
-				const args = [
 					{
-						target: typeof document !== 'undefined' ? document.body : null,
-						children: _$_.tsrx_element(function render_children() {
-							_$_.push_component();
-							_$_.output_push('<div');
-							_$_.output_push(' class="portal-content"');
-							_$_.output_push('>');
+						_$_.output_push('Nested content');
+					}
 
-							{
-								_$_.output_push('Portal content');
-							}
+					_$_.output_push('</span>');
+				}
 
-							_$_.output_push('</div>');
-							_$_.pop_component();
-						})
-					}
-				];
+				_$_.output_push('</div>');
 
-				if (comp) {
-					comp(...args);
+				{
+					const comp = Portal;
+
+					const args = [
+						{
+							target: typeof document !== 'undefined' ? document.body : null,
+							children: _$_.tsrx_element(() => {
+								return _$_.tsrx_element(() => {
+									_$_.output_push('<div');
+									_$_.output_push(' class="portal-content"');
+									_$_.output_push('>');
+
+									{
+										_$_.output_push('Portal content');
+									}
+
+									_$_.output_push('</div>');
+								});
+							})
+						}
+					];
+
+					if (comp) {
+						_$_.render_component(comp, ...args);
+					}
 				}
 			}
-		}
 
-		_$_.output_push('</div>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }

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

@@ -4,153 +4,141 @@ import * as _$_ from 'ripple/internal/server';
 import { track } from 'ripple/server';
 
 export function TrackedState() {
-	_$_.push_component();
+	return _$_.tsrx_element(() => {
+		let lazy = _$_.track(0, 'c1818584');
 
-	let lazy = _$_.track(0, 'c1818584');
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="count"');
-		_$_.output_push('>');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="count"');
+			_$_.output_push('>');
 
-		{
-			_$_.output_push(_$_.escape(lazy.value));
-		}
+			{
+				_$_.output_push(_$_.escape(lazy.value));
+			}
 
-		_$_.output_push('</div>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
 export function CounterWithInitial(props) {
-	_$_.push_component();
+	return _$_.tsrx_element(() => {
+		let lazy_1 = _$_.track(props.initial, '03ea4348');
 
-	let lazy_1 = _$_.track(props.initial, '03ea4348');
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push('>');
-
-		{
-			_$_.output_push('<span');
-			_$_.output_push(' class="count"');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
 			_$_.output_push('>');
 
 			{
-				_$_.output_push(_$_.escape(lazy_1.value));
-			}
+				_$_.output_push('<span');
+				_$_.output_push(' class="count"');
+				_$_.output_push('>');
 
-			_$_.output_push('</span>');
-		}
+				{
+					_$_.output_push(_$_.escape(lazy_1.value));
+				}
 
-		_$_.output_push('</div>');
-	});
+				_$_.output_push('</span>');
+			}
 
-	_$_.pop_component();
+			_$_.output_push('</div>');
+		});
+	});
 }
 
 export function CounterWrapper() {
-	_$_.push_component();
-
-	_$_.regular_block(() => {
-		{
-			const comp = CounterWithInitial;
-			const args = [{ initial: 5 }];
+	return _$_.tsrx_element(() => {
+		_$_.regular_block(() => {
+			{
+				const comp = CounterWithInitial;
+				const args = [{ initial: 5 }];
 
-			comp(...args);
-		}
+				_$_.render_component(comp, ...args);
+			}
+		});
 	});
-
-	_$_.pop_component();
 }
 
 export function ComputedValues() {
-	_$_.push_component();
-
-	let lazy_2 = _$_.track(2, 'b78281db');
-	let lazy_3 = _$_.track(3, 'a0cf6c6d');
-	const sum = () => lazy_2.value + lazy_3.value;
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="sum"');
-		_$_.output_push('>');
+	return _$_.tsrx_element(() => {
+		let lazy_2 = _$_.track(2, 'b78281db');
+		let lazy_3 = _$_.track(3, 'a0cf6c6d');
+		const sum = () => lazy_2.value + lazy_3.value;
+
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="sum"');
+			_$_.output_push('>');
 
-		{
-			_$_.output_push(_$_.escape(sum()));
-		}
+			{
+				_$_.output_push(_$_.escape(sum()));
+			}
 
-		_$_.output_push('</div>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
 export function MultipleTracked() {
-	_$_.push_component();
-
-	let lazy_4 = _$_.track(10, '843522de');
-	let lazy_5 = _$_.track(20, '1308996d');
-	let lazy_6 = _$_.track(30, '048c3fd0');
+	return _$_.tsrx_element(() => {
+		let lazy_4 = _$_.track(10, '843522de');
+		let lazy_5 = _$_.track(20, '1308996d');
+		let lazy_6 = _$_.track(30, '048c3fd0');
+
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="x"');
+			_$_.output_push('>');
 
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="x"');
-		_$_.output_push('>');
+			{
+				_$_.output_push(_$_.escape(lazy_4.value));
+			}
 
-		{
-			_$_.output_push(_$_.escape(lazy_4.value));
-		}
+			_$_.output_push('</div>');
+		});
 
-		_$_.output_push('</div>');
-	});
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="y"');
-		_$_.output_push('>');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="y"');
+			_$_.output_push('>');
 
-		{
-			_$_.output_push(_$_.escape(lazy_5.value));
-		}
+			{
+				_$_.output_push(_$_.escape(lazy_5.value));
+			}
 
-		_$_.output_push('</div>');
-	});
+			_$_.output_push('</div>');
+		});
 
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="z"');
-		_$_.output_push('>');
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="z"');
+			_$_.output_push('>');
 
-		{
-			_$_.output_push(_$_.escape(lazy_6.value));
-		}
+			{
+				_$_.output_push(_$_.escape(lazy_6.value));
+			}
 
-		_$_.output_push('</div>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }
 
 export function DerivedState() {
-	_$_.push_component();
-
-	let lazy_7 = _$_.track('John', '6015eeca');
-	let lazy_8 = _$_.track('Doe', '4fa9a20e');
-	const fullName = () => `${lazy_7.value} ${lazy_8.value}`;
-
-	_$_.regular_block(() => {
-		_$_.output_push('<div');
-		_$_.output_push(' class="name"');
-		_$_.output_push('>');
+	return _$_.tsrx_element(() => {
+		let lazy_7 = _$_.track('John', '6015eeca');
+		let lazy_8 = _$_.track('Doe', '4fa9a20e');
+		const fullName = () => `${lazy_7.value} ${lazy_8.value}`;
+
+		_$_.regular_block(() => {
+			_$_.output_push('<div');
+			_$_.output_push(' class="name"');
+			_$_.output_push('>');
 
-		{
-			_$_.output_push(_$_.escape(fullName()));
-		}
+			{
+				_$_.output_push(_$_.escape(fullName()));
+			}
 
-		_$_.output_push('</div>');
+			_$_.output_push('</div>');
+		});
 	});
-
-	_$_.pop_component();
 }