ripple 0.3.128 → 0.4.0

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

@@ -23,7 +23,7 @@ export function StaticTitle() {
 
 export function ReactiveTitle() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track('Initial Title', 'cbca63e3');
+		const title = _$_.track('Initial Title', 'cbca63e3');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -33,14 +33,14 @@ export function ReactiveTitle() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy.value);
+				_$_.render_expression(title.value);
 			}
 
 			__out += '</span></div>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--91435bee--><title>' + _$_.escape(lazy.value) + '</title>';
+			__out += '<!--56ee4dab--><title>' + _$_.escape(title.value) + '</title>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -58,7 +58,7 @@ export function MultipleHeadElements() {
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--07a54928--><title>Page Title</title><meta name="description" content="Page description" /><link rel="stylesheet" href="/styles.css" />';
+			__out += '<!--a718096c--><title>Page Title</title><meta name="description" content="Page description" /><link rel="stylesheet" href="/styles.css" />';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -69,7 +69,7 @@ export function MultipleHeadElements() {
 
 export function ReactiveMetaTags() {
 	return _$_.tsrx_element(() => {
-		let lazy_1 = _$_.track('Initial description', '38bfa3b2');
+		const description = _$_.track('Initial description', '38bfa3b2');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -79,14 +79,14 @@ export function ReactiveMetaTags() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_1.value);
+				_$_.render_expression(description.value);
 			}
 
 			__out += '</div>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--4ca6a546--><title>My Page</title><meta name="description"' + _$_.attr('content', lazy_1.value, false) + ' />';
+			__out += '<!--c297b350--><title>My Page</title><meta name="description"' + _$_.attr('content', description.value, false) + ' />';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -97,7 +97,7 @@ export function ReactiveMetaTags() {
 
 export function TitleWithTemplate() {
 	return _$_.tsrx_element(() => {
-		let lazy_2 = _$_.track('World', 'f3925cd5');
+		const name = _$_.track('World', 'f3925cd5');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -107,14 +107,14 @@ export function TitleWithTemplate() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_2.value);
+				_$_.render_expression(name.value);
 			}
 
 			__out += '</div>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--10dc944d--><title>' + _$_.escape(`Hello ${lazy_2.value}!`) + '</title>';
+			__out += '<!--9ab2373c--><title>' + _$_.escape(`Hello ${name.value}!`) + '</title>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -132,7 +132,7 @@ export function EmptyTitle() {
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--13ba9873--><title></title>';
+			__out += '<!--50cc7ae2--><title></title>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -143,8 +143,8 @@ export function EmptyTitle() {
 
 export function ConditionalTitle() {
 	return _$_.tsrx_element(() => {
-		let lazy_3 = _$_.track(true, 'ff71bf1f');
-		let lazy_4 = _$_.track('Main Page', '7cd7d671');
+		const showPrefix = _$_.track(true, 'ff71bf1f');
+		const title = _$_.track('Main Page', '7cd7d671');
 
 		_$_.regular_block(() => {
 			let __out = '';
@@ -154,14 +154,14 @@ export function ConditionalTitle() {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(lazy_4.value);
+				_$_.render_expression(title.value);
 			}
 
 			__out += '</div>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--4b39c36b--><title>' + _$_.escape(lazy_3.value ? 'App - ' + lazy_4.value : lazy_4.value) + '</title>';
+			__out += '<!--0877ba8e--><title>' + _$_.escape(showPrefix.value ? 'App - ' + title.value : title.value) + '</title>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -172,17 +172,17 @@ export function ConditionalTitle() {
 
 export function ComputedTitle() {
 	return _$_.tsrx_element(() => {
-		let lazy_5 = _$_.track(0, 'b6a48610');
+		const count = _$_.track(0, 'b6a48610');
 		let prefix = 'Count: ';
 
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div><span>' + _$_.escape(lazy_5.value) + '</span></div>';
+			__out += '<div><span>' + _$_.escape(count.value) + '</span></div>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--92c79d98--><title>' + _$_.escape(prefix + lazy_5.value) + '</title>';
+			__out += '<!--60e9fce1--><title>' + _$_.escape(prefix + count.value) + '</title>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -200,7 +200,7 @@ export function MultipleHeadBlocks() {
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--e50b427b--><title>First Head</title><!--68467dce--><meta name="author" content="Test Author" />';
+			__out += '<!--e56fc100--><title>First Head</title><!--ba797fb2--><meta name="author" content="Test Author" />';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);
@@ -218,7 +218,7 @@ export function HeadWithStyle() {
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target('head');
-			__out += '<!--3a8578a5--><title>Styled Page</title>';
+			__out += '<!--872692a0--><title>Styled Page</title>';
 			_$_.output_push(__out);
 			__out = '';
 			_$_.set_output_target(null);

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

@@ -24,14 +24,14 @@ export function Layout({ children }) {
 
 export function Content() {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(true, '0bdb1500');
+		const visible = _$_.track(true, '0bdb1500');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<div class="content"><!--[-->';
 
-			if (lazy.value) {
+			if (visible.value) {
 				__out += '<p class="text">Hello world</p>';
 			}
 

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

@@ -269,7 +269,7 @@ function DocFooter() {
 	});
 }
 
-export function DocLayout(__props) {
+export function DocLayout({ children, editPath = '', nextLink = null, toc = [] }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
 			let __out = '';
@@ -279,55 +279,27 @@ export function DocLayout(__props) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(__props.children);
+				_$_.render_expression(children);
 			}
 
 			__out += '</div></article><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
-
-			if (_$_.fallback(__props.editPath, '')) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="edit-link"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<a');
-					_$_.output_push(_$_.attr('href', `https://github.com/edit/${_$_.fallback(__props.editPath, '')}`, false));
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('Edit');
-					}
-
-					_$_.output_push('</a>');
-				}
 
-				_$_.output_push('</div>');
+			if (editPath) {
+				__out += '<div class="edit-link"><a' + _$_.attr('href', `https://github.com/edit/${editPath}`, false) + '>Edit</a></div>';
 			}
 
 			__out += '<!--]--><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
 
-			if (_$_.fallback(__props.nextLink, null)) {
-				_$_.output_push('<nav');
-				_$_.output_push(' class="prev-next"');
-				_$_.output_push('>');
+			if (nextLink) {
+				__out += '<nav class="prev-next"><a' + _$_.attr('href', nextLink.href, false) + '>';
 
 				{
-					_$_.output_push('<a');
-					_$_.output_push(_$_.attr('href', _$_.fallback(__props.nextLink, null).href, false));
-					_$_.output_push('>');
-
-					{
-						_$_.render_expression(_$_.fallback(__props.nextLink, null).text);
-					}
-
-					_$_.output_push('</a>');
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_expression(nextLink.text);
 				}
 
-				_$_.output_push('</nav>');
+				__out += '</a></nav>';
 			}
 
 			__out += '<!--]-->';
@@ -342,47 +314,15 @@ export function DocLayout(__props) {
 			}
 
 			__out += '</div><aside><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
-
-			if (_$_.fallback(__props.toc, []).length > 0) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="toc"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<ul');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('<!--[-->');
-
-						for (const item of _$_.fallback(__props.toc, [])) {
-							_$_.output_push('<li');
-							_$_.output_push('>');
 
-							{
-								_$_.output_push('<a');
-								_$_.output_push(_$_.attr('href', item.href, false));
-								_$_.output_push('>');
+			if (toc.length > 0) {
+				__out += '<div class="toc"><ul><!--[-->';
 
-								{
-									_$_.render_expression(item.text);
-								}
-
-								_$_.output_push('</a>');
-							}
-
-							_$_.output_push('</li>');
-						}
-
-						_$_.output_push('<!--]-->');
-					}
-
-					_$_.output_push('</ul>');
+				for (const item of toc) {
+					__out += '<li><a' + _$_.attr('href', item.href, false) + '>' + _$_.escape(item.text) + '</a></li>';
 				}
 
-				_$_.output_push('</div>');
+				__out += '<!--]--></ul></div>';
 			}
 
 			__out += '<!--]--></aside></div>';
@@ -941,31 +881,18 @@ export function HtmlAfterComponentInChildren() {
 	});
 }
 
-function NavItem(__props) {
+function NavItem({ href, text: label, active = false }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
 			let __out = '';
 
-			__out += '<div' + _$_.attr('class', `nav-item${_$_.fallback(__props.active, false) ? ' active' : ''}`) + '><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
-
-			if (_$_.fallback(__props.active, false)) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="indicator"');
-				_$_.output_push('>');
-				_$_.output_push('</div>');
-			}
-
-			__out += '<!--]--><a' + _$_.attr('href', __props.href, false) + '><span>';
+			__out += '<div' + _$_.attr('class', `nav-item${active ? ' active' : ''}`) + '><!--[-->';
 
-			{
-				_$_.output_push(__out);
-				__out = '';
-				_$_.render_expression(__props.text);
+			if (active) {
+				__out += '<div class="indicator"></div>';
 			}
 
-			__out += '</span></a></div>';
+			__out += '<!--]--><a' + _$_.attr('href', href, false) + '><span>' + _$_.escape(label) + '</span></a></div>';
 			_$_.output_push(__out);
 		});
 	});
@@ -973,14 +900,14 @@ function NavItem(__props) {
 
 function SidebarSection({ title, children }) {
 	return _$_.tsrx_element(() => {
-		let lazy = _$_.track(true, '6ac6906f');
+		const expanded = _$_.track(true, '6ac6906f');
 
 		_$_.regular_block(() => {
 			let __out = '';
 
 			__out += '<section class="sidebar-section"><div class="section-header"><h2>' + _$_.escape(title) + '</h2><button>Toggle</button></div><!--[-->';
 
-			if (lazy.value) {
+			if (expanded.value) {
 				__out += '<div class="section-items">';
 
 				{
@@ -1416,7 +1343,7 @@ function FooterStub() {
 	});
 }
 
-function DocsLayoutInner(__props) {
+function DocsLayoutInner({ children, editPath = '', nextLink = null }) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
 			let __out = '';
@@ -1448,55 +1375,27 @@ function DocsLayoutInner(__props) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(__props.children);
+				_$_.render_expression(children);
 			}
 
 			__out += '</div></article><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
-
-			if (_$_.fallback(__props.editPath, '')) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="edit-link"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<a');
-					_$_.output_push(' href="/edit"');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('Edit on GitHub');
-					}
-
-					_$_.output_push('</a>');
-				}
 
-				_$_.output_push('</div>');
+			if (editPath) {
+				__out += '<div class="edit-link"><a href="/edit">Edit on GitHub</a></div>';
 			}
 
 			__out += '<!--]--><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
 
-			if (_$_.fallback(__props.nextLink, null)) {
-				_$_.output_push('<nav');
-				_$_.output_push(' class="prev-next"');
-				_$_.output_push('>');
+			if (nextLink) {
+				__out += '<nav class="prev-next"><a' + _$_.attr('href', nextLink.href, false) + '>';
 
 				{
-					_$_.output_push('<a');
-					_$_.output_push(_$_.attr('href', _$_.fallback(__props.nextLink, null).href, false));
-					_$_.output_push('>');
-
-					{
-						_$_.render_expression(_$_.fallback(__props.nextLink, null).text);
-					}
-
-					_$_.output_push('</a>');
+					_$_.output_push(__out);
+					__out = '';
+					_$_.render_expression(nextLink.text);
 				}
 
-				_$_.output_push('</nav>');
+				__out += '</a></nav>';
 			}
 
 			__out += '<!--]-->';
@@ -1572,7 +1471,15 @@ export function DocsLayoutWithoutData() {
 	});
 }
 
-function DocsLayoutExact(__props) {
+function DocsLayoutExact(
+	{
+		children,
+		editPath = '',
+		prevLink = null,
+		nextLink = null,
+		toc = []
+	}
+) {
 	return _$_.tsrx_element(() => {
 		_$_.regular_block(() => {
 			let __out = '';
@@ -1604,98 +1511,49 @@ function DocsLayoutExact(__props) {
 			{
 				_$_.output_push(__out);
 				__out = '';
-				_$_.render_expression(__props.children);
+				_$_.render_expression(children);
 			}
 
 			__out += '</div></article><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
-
-			if (_$_.fallback(__props.editPath, '')) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="edit-link"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<a');
-					_$_.output_push(_$_.attr('href', `/edit/${_$_.fallback(__props.editPath, '')}`, false));
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('Edit on GitHub');
-					}
-
-					_$_.output_push('</a>');
-				}
 
-				_$_.output_push('</div>');
+			if (editPath) {
+				__out += '<div class="edit-link"><a' + _$_.attr('href', `/edit/${editPath}`, false) + '>Edit on GitHub</a></div>';
 			}
 
 			__out += '<!--]--><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
-
-			if (_$_.fallback(__props.prevLink, null) || _$_.fallback(__props.nextLink, null)) {
-				_$_.output_push('<nav');
-				_$_.output_push(' class="prev-next"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<!--[-->');
-
-					if (_$_.fallback(__props.prevLink, null)) {
-						_$_.output_push('<a');
-						_$_.output_push(_$_.attr('href', _$_.fallback(__props.prevLink, null).href, false));
-						_$_.output_push(' class="pager prev"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('<span');
-							_$_.output_push(' class="title"');
-							_$_.output_push('>');
 
-							{
-								_$_.render_expression(_$_.fallback(__props.prevLink, null).text);
-							}
+			if (prevLink || nextLink) {
+				__out += '<nav class="prev-next"><!--[-->';
 
-							_$_.output_push('</span>');
-						}
+				if (prevLink) {
+					__out += '<a' + _$_.attr('href', prevLink.href, false) + ' class="pager prev"><span class="title">';
 
-						_$_.output_push('</a>');
-					} else {
-						_$_.output_push('<span');
-						_$_.output_push('>');
-						_$_.output_push('</span>');
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(prevLink.text);
 					}
 
-					_$_.output_push('<!--]-->');
-					_$_.output_push('<!--[-->');
-
-					if (_$_.fallback(__props.nextLink, null)) {
-						_$_.output_push('<a');
-						_$_.output_push(_$_.attr('href', _$_.fallback(__props.nextLink, null).href, false));
-						_$_.output_push(' class="pager next"');
-						_$_.output_push('>');
-
-						{
-							_$_.output_push('<span');
-							_$_.output_push(' class="title"');
-							_$_.output_push('>');
+					__out += '</span></a>';
+				} else {
+					__out += '<span></span>';
+				}
 
-							{
-								_$_.render_expression(_$_.fallback(__props.nextLink, null).text);
-							}
+				__out += '<!--]--><!--[-->';
 
-							_$_.output_push('</span>');
-						}
+				if (nextLink) {
+					__out += '<a' + _$_.attr('href', nextLink.href, false) + ' class="pager next"><span class="title">';
 
-						_$_.output_push('</a>');
+					{
+						_$_.output_push(__out);
+						__out = '';
+						_$_.render_expression(nextLink.text);
 					}
 
-					_$_.output_push('<!--]-->');
+					__out += '</span></a>';
 				}
 
-				_$_.output_push('</nav>');
+				__out += '<!--]--></nav>';
 			}
 
 			__out += '<!--]-->';
@@ -1710,41 +1568,15 @@ function DocsLayoutExact(__props) {
 			}
 
 			__out += '</div></div><aside class="aside"><!--[-->';
-			_$_.output_push(__out);
-			__out = '';
-
-			if (_$_.fallback(__props.toc, []).length > 0) {
-				_$_.output_push('<div');
-				_$_.output_push(' class="aside-content"');
-				_$_.output_push('>');
-
-				{
-					_$_.output_push('<nav');
-					_$_.output_push(' class="outline"');
-					_$_.output_push('>');
-
-					{
-						_$_.output_push('<!--[-->');
-
-						for (const item of _$_.fallback(__props.toc, [])) {
-							_$_.output_push('<a');
-							_$_.output_push(_$_.attr('href', item.href, false));
-							_$_.output_push('>');
-
-							{
-								_$_.render_expression(item.text);
-							}
 
-							_$_.output_push('</a>');
-						}
-
-						_$_.output_push('<!--]-->');
-					}
+			if (toc.length > 0) {
+				__out += '<div class="aside-content"><nav class="outline"><!--[-->';
 
-					_$_.output_push('</nav>');
+				for (const item of toc) {
+					__out += '<a' + _$_.attr('href', item.href, false) + '>' + _$_.escape(item.text) + '</a>';
 				}
 
-				_$_.output_push('</div>');
+				__out += '<!--]--></nav></div>';
 			}
 
 			__out += '<!--]--></aside></div></main></div></div>';