ripple 0.2.208 → 0.2.210

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

@@ -0,0 +1,291 @@
+import * as _$_ from 'ripple/internal/server';
+
+import { track } from 'ripple/server';
+
+export function StaticTitle(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('Content');
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--qwqurq-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push('Static Test Title');
+	}
+
+	__output.push('</title>');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function ReactiveTitle(__output) {
+	_$_.push_component();
+
+	let title = track('Initial Title');
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('<span');
+		__output.push('>');
+
+		{
+			__output.push(_$_.escape(_$_.get(title)));
+		}
+
+		__output.push('</span>');
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--1h8nm28-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(_$_.get(title)));
+	}
+
+	__output.push('</title>');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function MultipleHeadElements(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('Page content');
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--9v67ol-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push('Page Title');
+	}
+
+	__output.push('</title>');
+	__output.push('<meta');
+	__output.push(' name="description"');
+	__output.push(' content="Page description"');
+	__output.push(' />');
+	__output.push('<link');
+	__output.push(' rel="stylesheet"');
+	__output.push(' href="/styles.css"');
+	__output.push(' />');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function ReactiveMetaTags(__output) {
+	_$_.push_component();
+
+	let description = track('Initial description');
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(_$_.get(description)));
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--166unm-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push('My Page');
+	}
+
+	__output.push('</title>');
+	__output.push('<meta');
+	__output.push(' name="description"');
+	__output.push(_$_.attr('content', _$_.get(description), false));
+	__output.push(' />');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function TitleWithTemplate(__output) {
+	_$_.push_component();
+
+	let name = track('World');
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(_$_.get(name)));
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--3o3mh2-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(`Hello ${_$_.get(name)}!`));
+	}
+
+	__output.push('</title>');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function EmptyTitle(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('Empty title test');
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--kwo3k6-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push('');
+	}
+
+	__output.push('</title>');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function ConditionalTitle(__output) {
+	_$_.push_component();
+
+	let showPrefix = track(true);
+	let title = track('Main Page');
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(_$_.get(title)));
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--c2i5xr-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(_$_.get(showPrefix) ? 'App - ' + _$_.get(title) : _$_.get(title)));
+	}
+
+	__output.push('</title>');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function ComputedTitle(__output) {
+	_$_.push_component();
+
+	let count = track(0);
+	let prefix = 'Count: ';
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('<span');
+		__output.push('>');
+
+		{
+			__output.push(_$_.escape(_$_.get(count)));
+		}
+
+		__output.push('</span>');
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--1h2z3z5-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(prefix + _$_.get(count)));
+	}
+
+	__output.push('</title>');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function MultipleHeadBlocks(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('Content');
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--14rv3le-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push('First Head');
+	}
+
+	__output.push('</title>');
+	__output.push('<!--1eh1mn5-->');
+	__output.push('<meta');
+	__output.push(' name="author"');
+	__output.push(' content="Test Author"');
+	__output.push(' />');
+	__output.target = null;
+	_$_.pop_component();
+}
+
+export function HeadWithStyle(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('Styled content');
+	}
+
+	__output.push('</div>');
+	__output.target = 'head';
+	__output.push('<!--1dxk6yg-->');
+	__output.push('<title');
+	__output.push('>');
+
+	{
+		__output.push('Styled Page');
+	}
+
+	__output.push('</title>');
+	__output.target = null;
+	_$_.pop_component();
+}

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

@@ -0,0 +1,133 @@
+import * as _$_ from 'ripple/internal/server';
+
+import { track } from 'ripple/server';
+
+export function StaticHtml(__output) {
+	_$_.push_component();
+
+	const html = '<p><strong>Bold</strong> text</p>';
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		const html_value = String(html ?? '');
+
+		__output.push('<!--' + _$_.hash(html_value) + '-->');
+		__output.push(html_value);
+		__output.push('<!---->');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function DynamicHtml(__output) {
+	_$_.push_component();
+
+	const content = '<p>Dynamic <span>HTML</span> content</p>';
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		const html_value_1 = String(content ?? '');
+
+		__output.push('<!--' + _$_.hash(html_value_1) + '-->');
+		__output.push(html_value_1);
+		__output.push('<!---->');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function EmptyHtml(__output) {
+	_$_.push_component();
+
+	const html = '';
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		const html_value_2 = String(html ?? '');
+
+		__output.push('<!--' + _$_.hash(html_value_2) + '-->');
+		__output.push(html_value_2);
+		__output.push('<!---->');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function ComplexHtml(__output) {
+	_$_.push_component();
+
+	const html = '<div class="nested"><span>Nested <em>content</em></span></div>';
+
+	__output.push('<section');
+	__output.push('>');
+
+	{
+		const html_value_3 = String(html ?? '');
+
+		__output.push('<!--' + _$_.hash(html_value_3) + '-->');
+		__output.push(html_value_3);
+		__output.push('<!---->');
+	}
+
+	__output.push('</section>');
+	_$_.pop_component();
+}
+
+export function MultipleHtml(__output) {
+	_$_.push_component();
+
+	const html1 = '<p>First paragraph</p>';
+	const html2 = '<p>Second paragraph</p>';
+
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		const html_value_4 = String(html1 ?? '');
+
+		__output.push('<!--' + _$_.hash(html_value_4) + '-->');
+		__output.push(html_value_4);
+		__output.push('<!---->');
+
+		const html_value_5 = String(html2 ?? '');
+
+		__output.push('<!--' + _$_.hash(html_value_5) + '-->');
+		__output.push(html_value_5);
+		__output.push('<!---->');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function HtmlWithReactivity(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push('>');
+
+	{
+		__output.push('<!--1tb17hh-->');
+		__output.push('<p>Count: 0</p>');
+		__output.push('<!---->');
+		__output.push('<button');
+		__output.push('>');
+
+		{
+			__output.push('Increment');
+		}
+
+		__output.push('</button>');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}

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

@@ -1,6 +1,6 @@
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/ssr';
+import { track } from 'ripple/server';
 
 export function IfTruthy(__output) {
 	_$_.push_component();

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

@@ -0,0 +1,250 @@
+import * as _$_ from 'ripple/internal/server';
+
+import { Portal } from 'ripple/server';
+
+export async function SimplePortal(__output) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push(' class="container"');
+		__output.push('>');
+
+		{
+			__output.push('<h1');
+			__output.push('>');
+
+			{
+				__output.push('Main Content');
+			}
+
+			__output.push('</h1>');
+
+			{
+				const comp = Portal;
+
+				const args = [
+					__output,
+
+					{
+						target: typeof document !== 'undefined' ? document.body : null,
+
+						children: function children(__output) {
+							_$_.push_component();
+							__output.push('<div');
+							__output.push(' class="portal-content"');
+							__output.push('>');
+
+							{
+								__output.push('Portal content');
+							}
+
+							__output.push('</div>');
+							_$_.pop_component();
+						}
+					}
+				];
+
+				if (comp?.async) {
+					await comp(...args);
+				} else if (comp) {
+					comp(...args);
+				}
+			}
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}
+
+export async function ConditionalPortal(__output) {
+	return _$_.async(async () => {
+		_$_.push_component();
+
+		let show = _$_.get(true);
+
+		__output.push('<div');
+		__output.push(' class="container"');
+		__output.push('>');
+
+		{
+			__output.push('<button');
+			__output.push(' class="toggle"');
+			__output.push('>');
+
+			{
+				__output.push('Toggle');
+			}
+
+			__output.push('</button>');
+			__output.push('<!--[-->');
+
+			if (_$_.get(show)) {
+				{
+					const comp = Portal;
+
+					const args = [
+						__output,
+
+						{
+							target: typeof document !== 'undefined' ? document.body : null,
+
+							children: function children(__output) {
+								_$_.push_component();
+								__output.push('<div');
+								__output.push(' class="portal-content"');
+								__output.push('>');
+
+								{
+									__output.push('Portal is visible');
+								}
+
+								__output.push('</div>');
+								_$_.pop_component();
+							}
+						}
+					];
+
+					if (comp?.async) {
+						await comp(...args);
+					} else if (comp) {
+						comp(...args);
+					}
+				}
+			}
+
+			__output.push('<!--]-->');
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}
+
+export async function PortalWithMainContent(__output) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push('>');
+
+		{
+			__output.push('<div');
+			__output.push(' class="main-content"');
+			__output.push('>');
+
+			{
+				__output.push('Main page content');
+			}
+
+			__output.push('</div>');
+
+			{
+				const comp = Portal;
+
+				const args = [
+					__output,
+
+					{
+						target: typeof document !== 'undefined' ? document.body : null,
+
+						children: function children(__output) {
+							_$_.push_component();
+							__output.push('<div');
+							__output.push(' class="portal-content"');
+							__output.push('>');
+
+							{
+								__output.push('Modal content');
+							}
+
+							__output.push('</div>');
+							_$_.pop_component();
+						}
+					}
+				];
+
+				if (comp?.async) {
+					await comp(...args);
+				} else if (comp) {
+					comp(...args);
+				}
+			}
+
+			__output.push('<div');
+			__output.push(' class="footer"');
+			__output.push('>');
+
+			{
+				__output.push('Footer');
+			}
+
+			__output.push('</div>');
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}
+
+export async function NestedContentWithPortal(__output) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push(' class="outer"');
+		__output.push('>');
+
+		{
+			__output.push('<div');
+			__output.push(' class="inner"');
+			__output.push('>');
+
+			{
+				__output.push('<span');
+				__output.push('>');
+
+				{
+					__output.push('Nested content');
+				}
+
+				__output.push('</span>');
+			}
+
+			__output.push('</div>');
+
+			{
+				const comp = Portal;
+
+				const args = [
+					__output,
+
+					{
+						target: typeof document !== 'undefined' ? document.body : null,
+
+						children: function children(__output) {
+							_$_.push_component();
+							__output.push('<div');
+							__output.push(' class="portal-content"');
+							__output.push('>');
+
+							{
+								__output.push('Portal content');
+							}
+
+							__output.push('</div>');
+							_$_.pop_component();
+						}
+					}
+				];
+
+				if (comp?.async) {
+					await comp(...args);
+				} else if (comp) {
+					comp(...args);
+				}
+			}
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}

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

@@ -1,6 +1,6 @@
 import * as _$_ from 'ripple/internal/server';
 
-import { track } from 'ripple/ssr';
+import { track } from 'ripple/server';
 
 export function TrackedState(__output) {
 	_$_.push_component();