ripple 0.2.208 → 0.2.210

package/tests/hydration/compiled/client/switch.js

@@ -0,0 +1,162 @@
+import * as _$_ from 'ripple/internal/client';
+
+var root_1 = _$_.template(`<div class="status-success">Success</div>`, 1);
+var root_2 = _$_.template(`<div class="status-error">Error</div>`, 1);
+var root_3 = _$_.template(`<div class="status-unknown">Unknown</div>`, 0);
+var root = _$_.template(`<!>`, 1);
+var root_5 = _$_.template(`<div class="case-a">Case A</div>`, 1);
+var root_6 = _$_.template(`<div class="case-b">Case B</div>`, 1);
+var root_7 = _$_.template(`<div class="case-c">Case C</div>`, 0);
+var root_4 = _$_.template(`<button class="toggle">Toggle</button><!>`, 1);
+var root_9 = _$_.template(`<div class="case-1-2">1 or 2</div>`, 1);
+var root_10 = _$_.template(`<div class="case-other">Other</div>`, 0);
+var root_8 = _$_.template(`<!>`, 1);
+
+import { track } from 'ripple';
+
+export function SwitchStatic(__anchor, _, __block) {
+	_$_.push_component();
+
+	const status = 'success';
+	var fragment = root();
+	var node = _$_.first_child_frag(fragment);
+
+	{
+		var switch_case_0 = (__anchor) => {
+			var fragment_1 = root_1();
+
+			_$_.append(__anchor, fragment_1);
+		};
+
+		var switch_case_1 = (__anchor) => {
+			var fragment_2 = root_2();
+
+			_$_.append(__anchor, fragment_2);
+		};
+
+		var switch_case_default = (__anchor) => {
+			var div_1 = root_3();
+
+			_$_.append(__anchor, div_1);
+		};
+
+		_$_.switch(node, () => {
+			var result = [];
+
+			switch (status) {
+				case 'success':
+					result.push(switch_case_0);
+					return result;
+
+				case 'error':
+					result.push(switch_case_1);
+					return result;
+
+				default:
+					result.push(switch_case_default);
+					return result;
+			}
+		});
+	}
+
+	_$_.append(__anchor, fragment);
+	_$_.pop_component();
+}
+
+export function SwitchReactive(__anchor, _, __block) {
+	_$_.push_component();
+
+	let status = track('a', void 0, void 0, __block);
+	var fragment_3 = root_4();
+	var button_1 = _$_.first_child_frag(fragment_3);
+
+	button_1.__click = () => {
+		if (_$_.get(status) === 'a') _$_.set(status, 'b'); else if (_$_.get(status) === 'b') _$_.set(status, 'c'); else _$_.set(status, 'a');
+	};
+
+	var node_1 = _$_.sibling(button_1);
+
+	{
+		var switch_case_0_1 = (__anchor) => {
+			var fragment_4 = root_5();
+
+			_$_.append(__anchor, fragment_4);
+		};
+
+		var switch_case_1_1 = (__anchor) => {
+			var fragment_5 = root_6();
+
+			_$_.append(__anchor, fragment_5);
+		};
+
+		var switch_case_default_1 = (__anchor) => {
+			var div_2 = root_7();
+
+			_$_.append(__anchor, div_2);
+		};
+
+		_$_.switch(node_1, () => {
+			var result = [];
+
+			switch (_$_.get(status)) {
+				case 'a':
+					result.push(switch_case_0_1);
+					return result;
+
+				case 'b':
+					result.push(switch_case_1_1);
+					return result;
+
+				default:
+					result.push(switch_case_default_1);
+					return result;
+			}
+		});
+	}
+
+	_$_.append(__anchor, fragment_3);
+	_$_.pop_component();
+}
+
+export function SwitchFallthrough(__anchor, _, __block) {
+	_$_.push_component();
+
+	const val = 1;
+	var fragment_6 = root_8();
+	var node_2 = _$_.first_child_frag(fragment_6);
+
+	{
+		var switch_case_0_2 = (__anchor) => {
+			var fragment_7 = root_9();
+
+			_$_.append(__anchor, fragment_7);
+		};
+
+		var switch_case_default_2 = (__anchor) => {
+			var div_3 = root_10();
+
+			_$_.append(__anchor, div_3);
+		};
+
+		_$_.switch(node_2, () => {
+			var result = [];
+
+			switch (val) {
+				case 1:
+
+				case 2:
+					result.push(switch_case_0_2);
+					return result;
+
+				default:
+					result.push(switch_case_default_2);
+					return result;
+			}
+		});
+	}
+
+	_$_.append(__anchor, fragment_6);
+	_$_.pop_component();
+}
+
+_$_.delegate(['click']);

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

@@ -220,5 +220,254 @@ export function ExpressionContent(__output) {
 	}
 
 	__output.push('</span>');
+	_$_.pop_component();
+}
+
+function StaticHeader(__output) {
+	_$_.push_component();
+	__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');
+	}
+
+	__output.push('</p>');
+	_$_.pop_component();
+}
+
+export function StaticChildWithSiblings(__output) {
+	_$_.push_component();
+
+	const foo = 'bar';
+
+	{
+		const comp = StaticHeader;
+		const args = [__output, {}];
+
+		comp(...args);
+	}
+
+	__output.push('<span');
+	__output.push(' class="sibling1"');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(foo));
+	}
+
+	__output.push('</span>');
+	__output.push('<span');
+	__output.push(' class="sibling2"');
+	__output.push('>');
+
+	{
+		__output.push(_$_.escape(foo));
+	}
+
+	__output.push('</span>');
+	_$_.pop_component();
+}
+
+function Header(__output) {
+	_$_.push_component();
+	__output.push('<h1');
+	__output.push(' class="sr-only"');
+	__output.push('>');
+
+	{
+		__output.push('Ripple');
+	}
+
+	__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>');
+	_$_.pop_component();
+}
+
+function Actions(__output, { playgroundVisible = false }) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push(' class="social-links"');
+	__output.push('>');
+
+	{
+		__output.push('<a');
+		__output.push(' href="https://github.com"');
+		__output.push(' class="github-link"');
+		__output.push('>');
+
+		{
+			__output.push('GitHub');
+		}
+
+		__output.push('</a>');
+		__output.push('<a');
+		__output.push(' href="https://discord.com"');
+		__output.push(' class="discord-link"');
+		__output.push('>');
+
+		{
+			__output.push('Discord');
+		}
+
+		__output.push('</a>');
+		__output.push('<!--[-->');
+
+		if (_$_.get(playgroundVisible)) {
+			__output.push('<a');
+			__output.push(' href="/playground"');
+			__output.push(' class="playground-link"');
+			__output.push('>');
+
+			{
+				__output.push('Playground');
+			}
+
+			__output.push('</a>');
+		}
+
+		__output.push('<!--]-->');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+async function Layout(__output, { children }) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<main');
+		__output.push('>');
+
+		{
+			__output.push('<div');
+			__output.push(' class="container"');
+			__output.push('>');
+
+			{
+				{
+					const comp = children;
+					const args = [__output, {}];
+
+					if (comp?.async) {
+						await comp(...args);
+					} else if (comp) {
+						comp(...args);
+					}
+				}
+			}
+
+			__output.push('</div>');
+		}
+
+		__output.push('</main>');
+		_$_.pop_component();
+	});
+}
+
+Layout.async = true;
+
+function Content(__output) {
+	_$_.push_component();
+	__output.push('<div');
+	__output.push(' class="content"');
+	__output.push('>');
+
+	{
+		__output.push('<p');
+		__output.push('>');
+
+		{
+			__output.push('Some content here');
+		}
+
+		__output.push('</p>');
+	}
+
+	__output.push('</div>');
+	_$_.pop_component();
+}
+
+export function WebsiteIndex(__output) {
+	_$_.push_component();
+
+	{
+		const comp = Layout;
+
+		const args = [
+			__output,
+
+			{
+				children: function children(__output) {
+					_$_.push_component();
+
+					{
+						const comp = Header;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					{
+						const comp = Actions;
+						const args = [__output, { playgroundVisible: true }];
+
+						comp(...args);
+					}
+
+					{
+						const comp = Content;
+						const args = [__output, {}];
+
+						comp(...args);
+					}
+
+					{
+						const comp = Actions;
+						const args = [__output, { playgroundVisible: false }];
+
+						comp(...args);
+					}
+
+					_$_.pop_component();
+				}
+			}
+		];
+
+		comp(...args);
+	}
+
 	_$_.pop_component();
 }

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

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