ripple 0.3.84 → 0.3.86

package/tests/hydration/compiled/server/if-fragment-controlflow.js

@@ -0,0 +1,227 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/server';
+
+export function IfFragmentForElement() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-c"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><span class="after">after</span><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfFragmentForIfIf() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><!--[-->';
+
+				if (muzes.length > 0) {
+					__out += '<span class="has-items">has items</span>';
+				}
+
+				__out += '<!--]--><!--[-->';
+
+				if (muzes.length === 0) {
+					__out += '<span class="empty">empty</span>';
+				}
+
+				__out += '<!--]--><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfFragmentElements() {
+	return _$_.tsrx_element(() => {
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-b"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[--><p class="muze">b</p><p class="muze">c</p><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function ComponentBodyFragmentControlFlow() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[--><!--[-->';
+
+			for (const muze of muzes) {
+				__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+			}
+
+			__out += '<!--]--><span class="after">after</span><!--]-->';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function ComponentBodyCodeBlockControlFlow() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<!--[-->';
+			_$_.output_push(__out);
+			__out = '';
+
+			_$_.render_expression(_$_.tsrx_element(() => {
+				let __out = '';
+				const rows = muzes;
+
+				__out += '<!--[-->';
+
+				for (const muze of rows) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]-->';
+				_$_.output_push(__out);
+			}));
+
+			__out += '<span class="after">after</span><!--]-->';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfCodeBlockControlFlow() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-f"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<!--[-->';
+				_$_.output_push(__out);
+				__out = '';
+
+				_$_.render_expression(_$_.tsrx_element(() => {
+					let __out = '';
+					const rows = muzes;
+
+					__out += '<!--[-->';
+
+					for (const muze of rows) {
+						__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+					}
+
+					__out += '<!--]-->';
+					_$_.output_push(__out);
+				}));
+
+				__out += '<span class="after">after</span><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfElseFragment() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = false;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-d"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<span class="loading">loading</span>';
+			} else {
+				__out += '<!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><span class="after">after</span><!--]-->';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}
+
+export function IfDivFragment() {
+	return _$_.tsrx_element(() => {
+		const muzes = [{ muzeId: 'b' }, { muzeId: 'c' }];
+		const hasLoaded = true;
+
+		_$_.regular_block(() => {
+			let __out = '';
+
+			__out += '<div class="feed-e"><!--[-->';
+
+			if (hasLoaded) {
+				__out += '<section><!--[--><!--[-->';
+
+				for (const muze of muzes) {
+					__out += '<p class="muze">' + _$_.escape(muze.muzeId) + '</p>';
+				}
+
+				__out += '<!--]--><span class="after">after</span><!--]--></section>';
+			}
+
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
+		});
+	});
+}

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

@@ -8,21 +8,16 @@ export function IfTruthy() {
 		const show = true;
 
 		_$_.regular_block(() => {
-			_$_.output_push('<!--[-->');
+			let __out = '';
 
-			if (show) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="shown"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Visible');
-				}
+			__out += '<!--[-->';
 
-				_$_.output_push('</div>');
+			if (show) {
+				__out += '<div class="shown">Visible</div>';
 			}
 
-			_$_.output_push('<!--]-->');
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -32,21 +27,16 @@ export function IfFalsy() {
 		const show = false;
 
 		_$_.regular_block(() => {
-			_$_.output_push('<!--[-->');
+			let __out = '';
 
-			if (show) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="shown"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Visible');
-				}
+			__out += '<!--[-->';
 
-				_$_.output_push('</div>');
+			if (show) {
+				__out += '<div class="shown">Visible</div>';
 			}
 
-			_$_.output_push('<!--]-->');
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -56,31 +46,18 @@ export function IfElse() {
 		const isLoggedIn = true;
 
 		_$_.regular_block(() => {
-			_$_.output_push('<!--[-->');
+			let __out = '';
 
-			if (isLoggedIn) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="logged-in"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Welcome back!');
-				}
+			__out += '<!--[-->';
 
-				_$_.output_push('</div>');
+			if (isLoggedIn) {
+				__out += '<div class="logged-in">Welcome back!</div>';
 			} else {
-				_$_.output_push('<div');
-				_$_.output_push(' class="logged-out"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Please log in');
-				}
-
-				_$_.output_push('</div>');
+				__out += '<div class="logged-out">Please log in</div>';
 			}
 
-			_$_.output_push('<!--]-->');
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -90,32 +67,16 @@ export function ReactiveIf() {
 		let lazy = _$_.track(true, '19a16ff0');
 
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<button');
-				_$_.output_push(' class="toggle"');
-				_$_.output_push('>');
+			let __out = '';
 
-				{
-					_$_.output_push('Toggle');
-				}
+			__out += '<button class="toggle">Toggle</button><!--[-->';
 
-				_$_.output_push('</button>');
-				_$_.output_push('<!--[-->');
-
-				if (lazy.value) {
-					_$_.output_push('<div');
-					_$_.output_push(' class="content"');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('Content visible');
-					}
-
-					_$_.output_push('</div>');
-				}
-
-				_$_.output_push('<!--]-->');
+			if (lazy.value) {
+				__out += '<div class="content">Content visible</div>';
 			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -125,42 +86,18 @@ export function ReactiveIfElse() {
 		let lazy_1 = _$_.track(false, '41177f39');
 
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<button');
-				_$_.output_push(' class="toggle"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Toggle');
-				}
+			let __out = '';
 
-				_$_.output_push('</button>');
-				_$_.output_push('<!--[-->');
-
-				if (lazy_1.value) {
-					_$_.output_push('<div');
-					_$_.output_push(' class="on"');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('ON');
-					}
-
-					_$_.output_push('</div>');
-				} else {
-					_$_.output_push('<div');
-					_$_.output_push(' class="off"');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('OFF');
-					}
-
-					_$_.output_push('</div>');
-				}
+			__out += '<button class="toggle">Toggle</button><!--[-->';
 
-				_$_.output_push('<!--]-->');
+			if (lazy_1.value) {
+				__out += '<div class="on">ON</div>';
+			} else {
+				__out += '<div class="off">OFF</div>';
 			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -171,56 +108,22 @@ export function NestedIf() {
 		let lazy_3 = _$_.track(true, 'f21b8c26');
 
 		_$_.regular_block(() => {
-			{
-				_$_.output_push('<button');
-				_$_.output_push(' class="outer-toggle"');
-				_$_.output_push('>');
+			let __out = '';
 
-				{
-					_$_.output_push('Outer');
-				}
+			__out += '<button class="outer-toggle">Outer</button><button class="inner-toggle">Inner</button><!--[-->';
 
-				_$_.output_push('</button>');
-				_$_.output_push('<button');
-				_$_.output_push(' class="inner-toggle"');
-				_$_.output_push('>');
+			if (lazy_2.value) {
+				__out += '<div class="outer-content">Outer<!--[-->';
 
-				{
-					_$_.output_push('Inner');
+				if (lazy_3.value) {
+					__out += '<span class="inner-content">Inner</span>';
 				}
 
-				_$_.output_push('</button>');
-				_$_.output_push('<!--[-->');
-
-				if (lazy_2.value) {
-					_$_.output_push('<div');
-					_$_.output_push(' class="outer-content"');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('Outer');
-						_$_.output_push('<!--[-->');
-
-						if (lazy_3.value) {
-							_$_.output_push('<span');
-							_$_.output_push(' class="inner-content"');
-							_$_.output_push('>');
-
-							{
-								_$_.output_push('Inner');
-							}
-
-							_$_.output_push('</span>');
-						}
-
-						_$_.output_push('<!--]-->');
-					}
-
-					_$_.output_push('</div>');
-				}
-
-				_$_.output_push('<!--]-->');
+				__out += '<!--]--></div>';
 			}
+
+			__out += '<!--]-->';
+			_$_.output_push(__out);
 		});
 	});
 }
@@ -230,81 +133,26 @@ export function IfElseIfChain() {
 		let lazy_4 = _$_.track('loading', '4c69c94a');
 
 		_$_.regular_block(() => {
-			_$_.output_push('<div');
-			_$_.output_push('>');
-
-			{
-				_$_.output_push('<button');
-				_$_.output_push(' class="success"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Success');
-				}
-
-				_$_.output_push('</button>');
-				_$_.output_push('<button');
-				_$_.output_push(' class="error"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Error');
-				}
-
-				_$_.output_push('</button>');
-				_$_.output_push('<button');
-				_$_.output_push(' class="loading"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('Loading');
-				}
-
-				_$_.output_push('</button>');
-				_$_.output_push('<!--[-->');
+			let __out = '';
 
-				if (lazy_4.value === 'loading') {
-					_$_.output_push('<div');
-					_$_.output_push(' class="state"');
-					_$_.output_push('>');
+			__out += '<div><button class="success">Success</button><button class="error">Error</button><button class="loading">Loading</button><!--[-->';
 
-					{
-						_$_.output_push('Loading...');
-					}
+			if (lazy_4.value === 'loading') {
+				__out += '<div class="state">Loading...</div>';
+			} else {
+				__out += '<!--[-->';
 
-					_$_.output_push('</div>');
+				if (lazy_4.value === 'success') {
+					__out += '<div class="state">Success!</div>';
 				} else {
-					_$_.output_push('<!--[-->');
-
-					if (lazy_4.value === 'success') {
-						_$_.output_push('<div');
-						_$_.output_push(' class="state"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('Success!');
-						}
-
-						_$_.output_push('</div>');
-					} else {
-						_$_.output_push('<div');
-						_$_.output_push(' class="state"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('Error occurred');
-						}
-
-						_$_.output_push('</div>');
-					}
-
-					_$_.output_push('<!--]-->');
+					__out += '<div class="state">Error occurred</div>';
 				}
 
-				_$_.output_push('<!--]-->');
+				__out += '<!--]-->';
 			}
 
-			_$_.output_push('</div>');
+			__out += '<!--]--></div>';
+			_$_.output_push(__out);
 		});
 	});
 }