ripple 0.2.211 → 0.2.213

package/tests/hydration/basic.test.js

@@ -81,4 +81,27 @@ describe('hydration > basic', () => {
 		expect(container.querySelector('.playground-link')?.textContent).toBe('Playground');
 		expect(container.querySelector('.content')).toBeTruthy();
 	});
+
+	// Test for hydrate_advance() in append() - component as last sibling with no following siblings
+	it('hydrates component as last sibling (no following siblings)', async () => {
+		await hydrateComponent(
+			ServerComponents.ComponentAsLastSibling,
+			ClientComponents.ComponentAsLastSibling,
+		);
+		expect(container.querySelector('.wrapper')).toBeTruthy();
+		expect(container.querySelector('h1')?.textContent).toBe('Header');
+		expect(container.querySelector('p')?.textContent).toBe('Some content');
+		expect(container.querySelector('.last-child')?.textContent).toBe('I am the last child');
+	});
+
+	it('hydrates nested component with inner component as last sibling', async () => {
+		await hydrateComponent(
+			ServerComponents.NestedComponentAsLastSibling,
+			ClientComponents.NestedComponentAsLastSibling,
+		);
+		expect(container.querySelector('.outer')).toBeTruthy();
+		expect(container.querySelector('h2')?.textContent).toBe('Section title');
+		expect(container.querySelector('.inner span')?.textContent).toBe('Inner text');
+		expect(container.querySelector('.inner .last-child')?.textContent).toBe('I am the last child');
+	});
 });

package/tests/hydration/build-components.js

@@ -57,7 +57,7 @@ function buildComponents() {
 		const clientResult = compile(source, file, {
 			mode: 'client',
 		});
-		writeFileSync(join(clientOutDir, outputName), clientResult.js.code);
+		writeFileSync(join(clientOutDir, outputName), '// @ts-nocheck\n' + clientResult.js.code);
 
 		// Compile for server
 		const serverResult = compile(source, file, {
@@ -65,7 +65,7 @@ function buildComponents() {
 		});
 		// Transform imports to use server runtime
 		const serverCode = transformServerImports(serverResult.js.code);
-		writeFileSync(join(serverOutDir, outputName), serverCode);
+		writeFileSync(join(serverOutDir, outputName), '// @ts-nocheck\n' + serverCode);
 
 		console.log(`Compiled ${file} -> client & server`);
 	}

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div>Hello World</div>`, 0);
@@ -21,6 +22,10 @@ var root_17 = _$_.template(`<main><div class="container"><!></div></main>`, 0);
 var root_18 = _$_.template(`<div class="content"><p>Some content here</p></div>`, 0);
 var root_20 = _$_.template(`<!><!><!><!>`, 1);
 var root_19 = _$_.template(`<!>`, 1);
+var root_21 = _$_.template(`<footer class="last-child">I am the last child</footer>`, 0);
+var root_22 = _$_.template(`<div class="wrapper"><h1>Header</h1><p>Some content</p><!></div>`, 0);
+var root_23 = _$_.template(`<div class="inner"><span>Inner text</span><!></div>`, 0);
+var root_24 = _$_.template(`<section class="outer"><h2>Section title</h2><!></section>`, 0);
 
 export function StaticText(__anchor, _, __block) {
 	_$_.push_component();
@@ -251,7 +256,7 @@ function Actions(__anchor, __props, __block) {
 			};
 
 			_$_.if(node_5, (__render) => {
-				if (_$_.get(_$_.fallback(__props.playgroundVisible, false))) __render(consequent);
+				if (_$_.fallback(__props.playgroundVisible, false)) __render(consequent);
 			});
 		}
 
@@ -328,4 +333,65 @@ export function WebsiteIndex(__anchor, _, __block) {
 
 	_$_.append(__anchor, fragment_8);
 	_$_.pop_component();
+}
+
+function LastChild(__anchor, _, __block) {
+	_$_.push_component();
+
+	var footer_1 = root_21();
+
+	_$_.append(__anchor, footer_1);
+	_$_.pop_component();
+}
+
+export function ComponentAsLastSibling(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_11 = root_22();
+
+	{
+		var h1_1 = _$_.child(div_11);
+		var p_1 = _$_.sibling(h1_1);
+		var node_12 = _$_.sibling(p_1);
+
+		LastChild(node_12, {}, _$_.active_block);
+		_$_.pop(div_11);
+	}
+
+	_$_.append(__anchor, div_11);
+	_$_.pop_component();
+}
+
+function InnerContent(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_12 = root_23();
+
+	{
+		var span_5 = _$_.child(div_12);
+		var node_13 = _$_.sibling(span_5);
+
+		LastChild(node_13, {}, _$_.active_block);
+		_$_.pop(div_12);
+	}
+
+	_$_.append(__anchor, div_12);
+	_$_.pop_component();
+}
+
+export function NestedComponentAsLastSibling(__anchor, _, __block) {
+	_$_.push_component();
+
+	var section_1 = root_24();
+
+	{
+		var h2_1 = _$_.child(section_1);
+		var node_14 = _$_.sibling(h2_1);
+
+		InnerContent(node_14, {}, _$_.active_block);
+		_$_.pop(section_1);
+	}
+
+	_$_.append(__anchor, section_1);
+	_$_.pop_component();
 }

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div class="layout"><!></div>`, 0);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div><button class="increment">Increment</button><span class="count"> </span></div>`, 0);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<li> </li>`, 0);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div>Content</div>`, 0);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div><!></div>`, 0);

package/tests/hydration/compiled/client/if-children.js

@@ -0,0 +1,407 @@
+// @ts-nocheck
+import * as _$_ from 'ripple/internal/client';
+
+var root_1 = _$_.template(`<div class="content"><!></div>`, 0);
+var root = _$_.template(`<div class="container"><div role="button" class="header">Toggle</div><!></div>`, 0);
+var root_2 = _$_.template(`<div class="item"> </div>`, 0);
+var root_4 = _$_.template(`<!><!>`, 1);
+var root_3 = _$_.template(`<!>`, 1);
+var root_6 = _$_.template(`<div class="content"><span>Static child 1</span><span>Static child 2</span></div>`, 0);
+var root_5 = _$_.template(`<div class="container"><div role="button" class="header">Toggle</div><!></div>`, 0);
+var root_8 = _$_.template(`<div class="items"><!></div>`, 0);
+var root_7 = _$_.template(`<section class="group"><div role="button" class="item"><div class="indicator"></div><h2 class="text">Title</h2><div class="caret"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"></path></svg></div></div><!></section>`, 0);
+var root_10 = _$_.template(`<!><!>`, 1);
+var root_9 = _$_.template(`<!>`, 1);
+var root_12 = _$_.template(`<div class="conditional">Conditional content</div>`, 0);
+var root_11 = _$_.template(`<div class="wrapper"><div class="nested-parent"><div class="nested-child"><span class="deep">Deep content</span></div></div><!></div><button class="toggle">Toggle</button>`, 1);
+var root_14 = _$_.template(`<footer class="footer">Footer</footer>`, 0);
+var root_13 = _$_.template(`<section class="outer"><article class="middle"><div class="inner"><p class="leaf"><strong>Bold</strong><em>Italic</em></p></div></article><!></section><button class="btn">Toggle</button>`, 1);
+var root_16 = _$_.template(`<pre class="code">const x = 1;</pre>`, 0);
+var root_17 = _$_.template(`<div class="preview">Preview content</div>`, 0);
+var root_15 = _$_.template(`<div class="tabs"><div class="tab-list"><button class="tab">Code</button><button class="tab">Preview</button></div><div class="panel"><!></div></div>`, 0);
+var root_18 = _$_.template(`<div class="container"><ul class="list"><li class="item"> </li><li class="item">Another item</li></ul><h2 class="heading">Static Heading</h2><p class="para">Static paragraph</p></div><button class="inc">Increment</button>`, 1);
+var root_19 = _$_.template(`<div class="wrapper"><ul class="features"><li><strong>Feature One</strong>: Description of feature one with <code>code</code> reference</li><li><strong>Feature Two</strong>: Another feature description</li><li><strong>Feature Three</strong>: Third feature</li></ul><h2 class="section-heading">Section Heading</h2><p class="section-content">Static paragraph with <a href="/link">a link</a> and more text.</p></div>`, 0);
+
+import { track } from 'ripple';
+
+export function IfWithChildren(__anchor, __props, __block) {
+	_$_.push_component();
+
+	let expanded = track(true, void 0, void 0, __block);
+	var div_1 = root();
+
+	{
+		var div_2 = _$_.child(div_1);
+
+		div_2.__click = () => _$_.set(expanded, !_$_.get(expanded));
+
+		var node = _$_.sibling(div_2);
+
+		{
+			var consequent = (__anchor) => {
+				var div_3 = root_1();
+
+				{
+					var node_1 = _$_.child(div_3);
+
+					_$_.composite(() => __props.children, node_1, {});
+					_$_.pop(div_3);
+				}
+
+				_$_.append(__anchor, div_3);
+			};
+
+			_$_.if(node, (__render) => {
+				if (_$_.get(expanded)) __render(consequent);
+			});
+		}
+
+		_$_.pop(div_1);
+	}
+
+	_$_.append(__anchor, div_1);
+	_$_.pop_component();
+}
+
+export function ChildItem(__anchor, __props, __block) {
+	_$_.push_component();
+
+	var div_4 = root_2();
+
+	{
+		var text_1 = _$_.child(div_4, true);
+
+		_$_.pop(div_4);
+	}
+
+	_$_.render(() => {
+		_$_.set_text(text_1, __props.text);
+	});
+
+	_$_.append(__anchor, div_4);
+	_$_.pop_component();
+}
+
+export function TestIfWithChildren(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment = root_3();
+	var node_2 = _$_.first_child_frag(fragment);
+
+	IfWithChildren(
+		node_2,
+		{
+			children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_1 = root_4();
+				var node_3 = _$_.first_child_frag(fragment_1);
+
+				ChildItem(node_3, { text: "Item 1" }, _$_.active_block);
+
+				var node_4 = _$_.sibling(node_3);
+
+				ChildItem(node_4, { text: "Item 2" }, _$_.active_block);
+				_$_.append(__anchor, fragment_1);
+				_$_.pop_component();
+			}
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment);
+	_$_.pop_component();
+}
+
+export function IfWithStaticChildren(__anchor, _, __block) {
+	_$_.push_component();
+
+	let expanded = track(true, void 0, void 0, __block);
+	var div_5 = root_5();
+
+	{
+		var div_6 = _$_.child(div_5);
+
+		div_6.__click = () => _$_.set(expanded, !_$_.get(expanded));
+
+		var node_5 = _$_.sibling(div_6);
+
+		{
+			var consequent_1 = (__anchor) => {
+				var div_7 = root_6();
+
+				_$_.append(__anchor, div_7);
+			};
+
+			_$_.if(node_5, (__render) => {
+				if (_$_.get(expanded)) __render(consequent_1);
+			});
+		}
+
+		_$_.pop(div_5);
+	}
+
+	_$_.append(__anchor, div_5);
+	_$_.pop_component();
+}
+
+export function IfWithSiblingsAndChildren(__anchor, __props, __block) {
+	_$_.push_component();
+
+	let expanded = track(true, void 0, void 0, __block);
+	var section_1 = root_7();
+
+	{
+		var div_8 = _$_.child(section_1);
+
+		div_8.__click = () => _$_.set(expanded, !_$_.get(expanded));
+		_$_.pop(div_8);
+
+		var node_6 = _$_.sibling(div_8);
+
+		{
+			var consequent_2 = (__anchor) => {
+				var div_9 = root_8();
+
+				{
+					var node_7 = _$_.child(div_9);
+
+					_$_.composite(() => __props.children, node_7, {});
+					_$_.pop(div_9);
+				}
+
+				_$_.append(__anchor, div_9);
+			};
+
+			_$_.if(node_6, (__render) => {
+				if (_$_.get(expanded)) __render(consequent_2);
+			});
+		}
+
+		_$_.pop(section_1);
+	}
+
+	_$_.append(__anchor, section_1);
+	_$_.pop_component();
+}
+
+export function TestIfWithSiblingsAndChildren(__anchor, _, __block) {
+	_$_.push_component();
+
+	var fragment_2 = root_9();
+	var node_8 = _$_.first_child_frag(fragment_2);
+
+	IfWithSiblingsAndChildren(
+		node_8,
+		{
+			children(__anchor, _, __block) {
+				_$_.push_component();
+
+				var fragment_3 = root_10();
+				var node_9 = _$_.first_child_frag(fragment_3);
+
+				ChildItem(node_9, { text: "Item A" }, _$_.active_block);
+
+				var node_10 = _$_.sibling(node_9);
+
+				ChildItem(node_10, { text: "Item B" }, _$_.active_block);
+				_$_.append(__anchor, fragment_3);
+				_$_.pop_component();
+			}
+		},
+		_$_.active_block
+	);
+
+	_$_.append(__anchor, fragment_2);
+	_$_.pop_component();
+}
+
+export function ElementWithChildrenThenIf(__anchor, _, __block) {
+	_$_.push_component();
+
+	let show = track(true, void 0, void 0, __block);
+	var fragment_4 = root_11();
+	var div_11 = _$_.first_child_frag(fragment_4);
+
+	{
+		var div_10 = _$_.child(div_11);
+
+		_$_.pop(div_10);
+
+		var node_11 = _$_.sibling(div_10);
+
+		{
+			var consequent_3 = (__anchor) => {
+				var div_12 = root_12();
+
+				_$_.append(__anchor, div_12);
+			};
+
+			_$_.if(node_11, (__render) => {
+				if (_$_.get(show)) __render(consequent_3);
+			});
+		}
+
+		_$_.pop(div_11);
+	}
+
+	var button_1 = _$_.sibling(div_11);
+
+	button_1.__click = () => _$_.set(show, !_$_.get(show));
+	_$_.next();
+	_$_.append(__anchor, fragment_4, true);
+	_$_.pop_component();
+}
+
+export function DeepNestingThenIf(__anchor, _, __block) {
+	_$_.push_component();
+
+	let visible = track(true, void 0, void 0, __block);
+	var fragment_5 = root_13();
+	var section_2 = _$_.first_child_frag(fragment_5);
+
+	{
+		var article_1 = _$_.child(section_2);
+
+		_$_.pop(article_1);
+
+		var node_12 = _$_.sibling(article_1);
+
+		{
+			var consequent_4 = (__anchor) => {
+				var footer_1 = root_14();
+
+				_$_.append(__anchor, footer_1);
+			};
+
+			_$_.if(node_12, (__render) => {
+				if (_$_.get(visible)) __render(consequent_4);
+			});
+		}
+
+		_$_.pop(section_2);
+	}
+
+	var button_2 = _$_.sibling(section_2);
+
+	button_2.__click = () => _$_.set(visible, !_$_.get(visible));
+	_$_.next();
+	_$_.append(__anchor, fragment_5, true);
+	_$_.pop_component();
+}
+
+export function DomElementChildrenThenSibling(__anchor, _, __block) {
+	_$_.push_component();
+
+	let activeTab = track('code', void 0, void 0, __block);
+	var div_13 = root_15();
+
+	{
+		var div_14 = _$_.child(div_13);
+
+		{
+			var button_3 = _$_.child(div_14);
+
+			button_3.__click = () => _$_.set(activeTab, 'code');
+
+			var button_4 = _$_.sibling(button_3);
+
+			button_4.__click = () => _$_.set(activeTab, 'preview');
+		}
+
+		_$_.pop(div_14);
+
+		var div_15 = _$_.sibling(div_14);
+
+		{
+			var node_13 = _$_.child(div_15);
+
+			{
+				var consequent_5 = (__anchor) => {
+					var pre_1 = root_16();
+
+					_$_.append(__anchor, pre_1);
+				};
+
+				var alternate = (__anchor) => {
+					var div_16 = root_17();
+
+					_$_.append(__anchor, div_16);
+				};
+
+				_$_.if(node_13, (__render) => {
+					if (_$_.get(activeTab) === 'code') __render(consequent_5); else __render(alternate, false);
+				});
+			}
+
+			_$_.pop(div_15);
+		}
+	}
+
+	_$_.render(
+		(__prev) => {
+			var __a = _$_.get(activeTab) === 'code' ? 'true' : 'false';
+
+			if (__prev.a !== __a) {
+				_$_.set_attribute(button_3, 'aria-selected', __prev.a = __a);
+			}
+
+			var __b = _$_.get(activeTab) === 'preview' ? 'true' : 'false';
+
+			if (__prev.b !== __b) {
+				_$_.set_attribute(button_4, 'aria-selected', __prev.b = __b);
+			}
+		},
+		{ a: void 0, b: void 0 }
+	);
+
+	_$_.append(__anchor, div_13);
+	_$_.pop_component();
+}
+
+export function DomChildrenThenStaticSiblings(__anchor, _, __block) {
+	_$_.push_component();
+
+	let count = track(0, void 0, void 0, __block);
+	var fragment_6 = root_18();
+	var div_17 = _$_.first_child_frag(fragment_6);
+
+	{
+		var ul_1 = _$_.child(div_17);
+
+		{
+			var li_1 = _$_.child(ul_1);
+
+			{
+				var text_2 = _$_.child(li_1, true);
+
+				_$_.pop(li_1);
+			}
+		}
+	}
+
+	_$_.pop(div_17);
+
+	var button_5 = _$_.sibling(div_17);
+
+	button_5.__click = () => _$_.update(count);
+	_$_.next();
+
+	_$_.render(() => {
+		_$_.set_text(text_2, 'Item count: ' + _$_.with_scope(__block, () => String(_$_.get(count))));
+	});
+
+	_$_.append(__anchor, fragment_6, true);
+	_$_.pop_component();
+}
+
+export function StaticListThenStaticSiblings(__anchor, _, __block) {
+	_$_.push_component();
+
+	var div_18 = root_19();
+
+	_$_.append(__anchor, div_18);
+	_$_.pop_component();
+}
+
+_$_.delegate(['click']);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<div class="shown">Visible</div>`, 0);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<div class="portal-content">Portal content</div>`, 0);
@@ -141,6 +142,9 @@ export function NestedContentWithPortal(__anchor, _, __block) {
 
 	{
 		var div_9 = _$_.child(div_8);
+
+		_$_.pop(div_9);
+
 		var node_4 = _$_.sibling(div_9);
 
 		Portal(

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div class="count"> </div>`, 0);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<div class="after">after</div>`, 0);

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<div class="status-success">Success</div>`, 1);