ripple 0.3.10 → 0.3.11

package/tests/client/tsx.test.ripple

@@ -0,0 +1,486 @@
+import { flushSync, track } from 'ripple';
+
+describe('tsx expression', () => {
+	it('renders a basic tsx element', () => {
+		component App() {
+			const el = <tsx><div>hello world</div></tsx>;
+			{el}
+		}
+		render(App);
+		expect(container.textContent).toBe('hello world');
+		expect(container.querySelector('div')).toBeTruthy();
+	});
+
+	it('renders a tsx element assigned to a variable', () => {
+		component App() {
+			const el = <tsx><span class="test">content</span></tsx>;
+			{el}
+		}
+		render(App);
+		const span = container.querySelector('span.test');
+		expect(span).toBeTruthy();
+		expect(span.textContent).toBe('content');
+	});
+
+	it('renders a tsx element with multiple children', () => {
+		component App() {
+			const el = <tsx><div>first</div><div>second</div></tsx>;
+			{el}
+		}
+		render(App);
+		const divs = container.querySelectorAll('div');
+		expect(divs.length).toBe(2);
+		expect(divs[0].textContent).toBe('first');
+		expect(divs[1].textContent).toBe('second');
+	});
+
+	it('renders a tsx element with nested elements', () => {
+		component App() {
+			const el = <tsx>
+				<div class="outer">
+					<span class="inner">nested</span>
+				</div>
+			</tsx>;
+			{el}
+		}
+		render(App);
+		const outer = container.querySelector('div.outer');
+		expect(outer).toBeTruthy();
+		const inner = outer.querySelector('span.inner');
+		expect(inner).toBeTruthy();
+		expect(inner.textContent).toBe('nested');
+	});
+
+	it('renders a tsx element inline in a parent element', () => {
+		component App() {
+			const el = <tsx><span>inline</span></tsx>;
+			<div class="parent">{el}</div>
+		}
+		render(App);
+		const parent = container.querySelector('div.parent');
+		expect(parent).toBeTruthy();
+		expect(parent.querySelector('span')).toBeTruthy();
+		expect(parent.textContent).toBe('inline');
+	});
+
+	it('renders a tsx element with reactive expressions', () => {
+		component App() {
+			let &[count] = track(0);
+			const el = <tsx>
+				<div>
+					{'count: ' + count}
+				</div>
+			</tsx>;
+			{el}
+			<button onClick={() => count++}>{'increment'}</button>
+		}
+		render(App);
+		expect(container.querySelector('div').textContent).toBe('count: 0');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('div').textContent).toBe('count: 1');
+	});
+
+	it('conditionally renders tsx elements', () => {
+		component App() {
+			let &[show] = track(true);
+			const el = <tsx><div class="tsx-content">visible</div></tsx>;
+
+			if (show) {
+				{el}
+			}
+			<button onClick={() => (show = !show)}>{'toggle'}</button>
+		}
+		render(App);
+		expect(container.querySelector('.tsx-content')).toBeTruthy();
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.tsx-content')).toBeFalsy();
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.tsx-content')).toBeTruthy();
+	});
+
+	it('renders tsx element passed as children prop', () => {
+		component Child(&{ children }: { children: any }) {
+			<div class="wrapper">{children}</div>
+		}
+
+		component App() {
+			const el = <tsx><span>from tsx</span></tsx>;
+			<Child children={el} />
+		}
+		render(App);
+		const wrapper = container.querySelector('.wrapper');
+		expect(wrapper).toBeTruthy();
+		expect(wrapper.querySelector('span')).toBeTruthy();
+		expect(wrapper.textContent).toBe('from tsx');
+	});
+
+	it('renders tsx element with text content only', () => {
+		component App() {
+			const el = <tsx>just text</tsx>;
+			{el}
+		}
+		render(App);
+		expect(container.textContent).toBe('just text');
+	});
+
+	it('renders tsx element with static attributes', () => {
+		component App() {
+			const el = <tsx>
+				<div id="my-id" class="my-class" data-testid="test" aria-label="label">content</div>
+			</tsx>;
+			{el}
+		}
+		render(App);
+		const div = container.querySelector('div');
+		expect(div.id).toBe('my-id');
+		expect(div.className).toBe('my-class');
+		expect(div.getAttribute('data-testid')).toBe('test');
+		expect(div.getAttribute('aria-label')).toBe('label');
+	});
+
+	it('renders tsx element with dynamic attribute values', () => {
+		component App() {
+			let &[name] = track('initial');
+			const el = <tsx><div id={name} class={'cls-' + name}>content</div></tsx>;
+			{el}
+			<button onClick={() => (name = 'updated')}>{'update'}</button>
+		}
+		render(App);
+		const div = container.querySelector('div');
+		expect(div.id).toBe('initial');
+		expect(div.className).toBe('cls-initial');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(div.id).toBe('updated');
+		expect(div.className).toBe('cls-updated');
+	});
+
+	it('renders tsx element with event handlers', () => {
+		component App() {
+			let &[clicked] = track(false);
+			const el = <tsx>
+				<button onClick={() => (clicked = true)}>
+					{'click me'}
+				</button>
+			</tsx>;
+			{el}
+			<div class="status">{clicked ? 'clicked' : 'not clicked'}</div>
+		}
+		render(App);
+		expect(container.querySelector('.status').textContent).toBe('not clicked');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.status').textContent).toBe('clicked');
+	});
+
+	it('renders tsx element with boolean attributes', () => {
+		component App() {
+			let &[isDisabled] = track(true);
+			const el = <tsx>
+				<button disabled={isDisabled}>
+					{'btn'}
+				</button>
+			</tsx>;
+			{el}
+			<button class="toggle" onClick={() => (isDisabled = !isDisabled)}>{'toggle'}</button>
+		}
+		render(App);
+		expect(container.querySelector('button:not(.toggle)').disabled).toBe(true);
+
+		container.querySelector('.toggle').click();
+		flushSync();
+		expect(container.querySelector('button:not(.toggle)').disabled).toBe(false);
+	});
+
+	it('renders tsx element with style attribute', () => {
+		component App() {
+			let &[color] = track('red');
+			const el = <tsx><div style={'color: ' + color}>styled</div></tsx>;
+			{el}
+			<button onClick={() => (color = 'blue')}>{'change color'}</button>
+		}
+		render(App);
+		expect(container.querySelector('div').style.color).toBe('red');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('div').style.color).toBe('blue');
+	});
+
+	it('renders tsx element with multiple dynamic attributes', () => {
+		component App() {
+			let &[index] = track(0);
+			const el = <tsx>
+				<div id={'item-' + index} class={'item pos-' + index} data-index={index} title={'Item ' +
+					index}>
+					{'Item ' + index}
+				</div>
+			</tsx>;
+			{el}
+			<button onClick={() => index++}>{'next'}</button>
+		}
+		render(App);
+		const div = container.querySelector('div');
+		expect(div.id).toBe('item-0');
+		expect(div.className).toBe('item pos-0');
+		expect(div.getAttribute('data-index')).toBe('0');
+		expect(div.title).toBe('Item 0');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(div.id).toBe('item-1');
+		expect(div.className).toBe('item pos-1');
+		expect(div.getAttribute('data-index')).toBe('1');
+		expect(div.title).toBe('Item 1');
+	});
+
+	it('renders tsx passed directly as component prop', () => {
+		component Wrapper(&{ content }: { content: any }) {
+			<div class="wrapper">{content}</div>
+		}
+
+		component App() {
+			<Wrapper content={<tsx><span class="inner">direct prop</span></tsx>} />
+		}
+		render(App);
+		const wrapper = container.querySelector('.wrapper');
+		expect(wrapper).toBeTruthy();
+		expect(wrapper.querySelector('.inner')).toBeTruthy();
+		expect(wrapper.textContent).toBe('direct prop');
+	});
+
+	it('renders tsx passed directly as children prop', () => {
+		component Card(&{ title, children }: { title: any; children: any }) {
+			<div class="card">
+				<h2 class="card-title">{title}</h2>
+				<div class="card-body">{children}</div>
+			</div>
+		}
+
+		component App() {
+			<Card
+				title={<tsx><span class="bold">Title</span></tsx>}
+				children={<tsx><p>Card content here</p></tsx>}
+			/>
+		}
+		render(App);
+		const card = container.querySelector('.card');
+		expect(card.querySelector('.card-title .bold').textContent).toBe('Title');
+		expect(card.querySelector('.card-body p').textContent).toBe('Card content here');
+	});
+
+	it('renders tsx from function defined outside component', () => {
+		function createBadge(label: string) {
+			return <tsx>
+				<span class="badge">
+					{label}
+				</span>
+			</tsx>;
+		}
+
+		component App() {
+			const badge = createBadge('New');
+			{badge}
+		}
+		render(App);
+		expect(container.querySelector('.badge')).toBeTruthy();
+		expect(container.querySelector('.badge').textContent).toBe('New');
+	});
+
+	it('renders tsx from function with multiple elements', () => {
+		function createListItem(item: string) {
+			return <tsx>
+				<li class="list-item">
+					{item}
+				</li>
+			</tsx>;
+		}
+
+		component App() {
+			const items = ['Apple', 'Banana', 'Cherry'];
+			<ul>
+				for (const item of items) {
+					{createListItem(item)}
+				}
+			</ul>
+		}
+		render(App);
+		const listItems = container.querySelectorAll('.list-item');
+		expect(listItems.length).toBe(3);
+		expect(listItems[0].textContent).toBe('Apple');
+		expect(listItems[1].textContent).toBe('Banana');
+		expect(listItems[2].textContent).toBe('Cherry');
+	});
+
+	it('renders tsx from factory function passed to component', () => {
+		component List(&{ renderItem, items }: { renderItem: (item: string) => any; items: string[] }) {
+			<ul class="list">
+				for (const item of items) {
+					{renderItem(item)}
+				}
+			</ul>
+		}
+
+		function itemRenderer(item: string) {
+			return <tsx>
+				<li>
+					<span class="item-content">
+						{item}
+					</span>
+				</li>
+			</tsx>;
+		}
+
+		component App() {
+			<List items={['One', 'Two', 'Three']} renderItem={itemRenderer} />
+		}
+		render(App);
+		const items = container.querySelectorAll('.item-content');
+		expect(items.length).toBe(3);
+		expect(items[0].textContent).toBe('One');
+		expect(items[1].textContent).toBe('Two');
+		expect(items[2].textContent).toBe('Three');
+	});
+
+	it('renders tsx from function with reactive state', () => {
+		function createCounter(label: string, getCount: () => number) {
+			return <tsx>
+				<div class="counter-display">
+					<span class="label">
+						{label}
+					</span>
+					<span class="count">
+						{getCount()}
+					</span>
+				</div>
+			</tsx>;
+		}
+
+		component App() {
+			let &[count] = track(0);
+			const counterElement = createCounter('Count:', () => count);
+			{counterElement}
+			<button onClick={() => count++}>{'increment'}</button>
+		}
+		render(App);
+		expect(container.querySelector('.label').textContent).toBe('Count:');
+		expect(container.querySelector('.count').textContent).toBe('0');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.querySelector('.count').textContent).toBe('1');
+	});
+
+	it('renders nested tsx from multiple functions', () => {
+		function createIcon(name: string) {
+			return <tsx><i class={'icon icon-' + name}></i></tsx>;
+		}
+
+		function createButton(icon: string, label: string) {
+			return <tsx>
+				<button class="icon-button">
+					{createIcon(icon)}
+					<span class="btn-label">
+						{label}
+					</span>
+				</button>
+			</tsx>;
+		}
+
+		component App() {
+			const btn = createButton('save', 'Save');
+			{btn}
+		}
+		render(App);
+		const button = container.querySelector('.icon-button');
+		expect(button).toBeTruthy();
+		expect(button.querySelector('.icon-save')).toBeTruthy();
+		expect(button.querySelector('.btn-label').textContent).toBe('Save');
+	});
+
+	it('renders tsx as prop with fallback in component', () => {
+		component Alert(&{ icon, message }: { icon?: any; message: string }) {
+			<div class="alert">
+				{icon}
+				<span class="message">{message}</span>
+			</div>
+		}
+
+		component App() {
+			<Alert message="No icon" />
+			<Alert icon={<tsx><span class="custom-icon">✓</span></tsx>} message="Custom icon" />
+		}
+		render(App);
+		const alerts = container.querySelectorAll('.alert');
+		expect(alerts[0].querySelector('.message').textContent).toBe('No icon');
+		expect(alerts[1].querySelector('.custom-icon')).toBeTruthy();
+		expect(alerts[1].querySelector('.message').textContent).toBe('Custom icon');
+	});
+
+	it('renders tsx stored in array via function', () => {
+		function createItem(className: string, content: string) {
+			return <tsx>
+				<div class={className}>
+					{content}
+				</div>
+			</tsx>;
+		}
+
+		component App() {
+			const items = [
+				{ className: 'item-a', content: 'A' },
+				{ className: 'item-b', content: 'B' },
+				{ className: 'item-c', content: 'C' },
+			];
+
+			<div class="container">
+				for (const item of items) {
+					{createItem(item.className, item.content)}
+				}
+			</div>
+		}
+		render(App);
+		const container_el = container.querySelector('.container');
+		expect(container_el.querySelector('.item-a').textContent).toBe('A');
+		expect(container_el.querySelector('.item-b').textContent).toBe('B');
+		expect(container_el.querySelector('.item-c').textContent).toBe('C');
+	});
+
+	it('renders tsx conditionally from function', () => {
+		function createContent(type: string) {
+			if (type === 'success') {
+				return <tsx><div class="success">Success!</div></tsx>;
+			} else if (type === 'error') {
+				return <tsx><div class="error">Error!</div></tsx>;
+			}
+			return <tsx><div class="default">Default</div></tsx>;
+		}
+
+		component App() {
+			let &[status] = track('default');
+			{createContent(status)}
+			<button class="set-success" onClick={() => (status = 'success')}>{'Success'}</button>
+			<button class="set-error" onClick={() => (status = 'error')}>{'Error'}</button>
+		}
+		render(App);
+		expect(container.querySelector('.default')).toBeTruthy();
+
+		container.querySelector('.set-success').click();
+		flushSync();
+		expect(container.querySelector('.success')).toBeTruthy();
+		expect(container.querySelector('.default')).toBeFalsy();
+
+		container.querySelector('.set-error').click();
+		flushSync();
+		expect(container.querySelector('.error')).toBeTruthy();
+		expect(container.querySelector('.success')).toBeFalsy();
+	});
+});

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

@@ -135,13 +135,10 @@ export function Greeting(__anchor, props, __block) {
 	{
 		var expression = _$_.child(div_6, true);
 
+		_$_.expression(expression, () => 'Hello ' + _$_.with_scope(__block, () => String(props.name)));
 		_$_.pop(div_6);
 	}
 
-	_$_.render(() => {
-		_$_.set_text(expression, 'Hello ' + _$_.with_scope(__block, () => String(props.name)));
-	});
-
 	_$_.append(__anchor, div_6);
 	_$_.pop_component();
 }
@@ -168,7 +165,7 @@ export function ExpressionContent(__anchor, _, __block) {
 	{
 		var expression_1 = _$_.child(div_7, true);
 
-		expression_1.nodeValue = value;
+		_$_.expression(expression_1, () => value);
 		_$_.pop(div_7);
 	}
 
@@ -177,15 +174,11 @@ export function ExpressionContent(__anchor, _, __block) {
 	{
 		var expression_2 = _$_.child(span_2, true);
 
+		_$_.expression(expression_2, () => _$_.with_scope(__block, () => label.toUpperCase()));
 		_$_.pop(span_2);
 	}
 
 	_$_.next();
-
-	_$_.render(() => {
-		_$_.set_text(expression_2, _$_.with_scope(__block, () => label.toUpperCase()));
-	});
-
 	_$_.append(__anchor, fragment_4, true);
 	_$_.pop_component();
 }
@@ -198,13 +191,10 @@ function TextProp(__anchor, __props, __block) {
 	{
 		var expression_3 = _$_.child(div_8);
 
+		_$_.expression(expression_3, () => __props.children);
 		_$_.pop(div_8);
 	}
 
-	_$_.render(() => {
-		_$_.expression(expression_3, () => __props.children);
-	});
-
 	_$_.append(__anchor, div_8);
 	_$_.pop_component();
 }
@@ -257,7 +247,7 @@ export function StaticChildWithSiblings(__anchor, _, __block) {
 	{
 		var expression_4 = _$_.child(span_3, true);
 
-		expression_4.nodeValue = foo;
+		_$_.expression(expression_4, () => foo);
 		_$_.pop(span_3);
 	}
 
@@ -266,7 +256,7 @@ export function StaticChildWithSiblings(__anchor, _, __block) {
 	{
 		var expression_5 = _$_.child(span_4, true);
 
-		expression_5.nodeValue = foo;
+		_$_.expression(expression_5, () => foo);
 		_$_.pop(span_4);
 	}
 
@@ -325,14 +315,11 @@ function Layout(__anchor, { children }, __block) {
 		{
 			var expression_6 = _$_.child(div_10);
 
+			_$_.expression(expression_6, () => children);
 			_$_.pop(div_10);
 		}
 	}
 
-	_$_.render(() => {
-		_$_.expression(expression_6, () => children);
-	});
-
 	_$_.append(__anchor, main_1);
 	_$_.pop_component();
 }
@@ -355,9 +342,7 @@ export function WebsiteIndex(__anchor, _, __block) {
 	Layout(
 		node_7,
 		{
-			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-				_$_.push_component();
-
+			children: _$_.ripple_element(function render_children(__anchor, __block) {
 				var fragment_10 = root_22();
 				var node_8 = _$_.first_child_frag(fragment_10);
 
@@ -375,7 +360,6 @@ export function WebsiteIndex(__anchor, _, __block) {
 
 				Actions(node_11, { playgroundVisible: false }, _$_.active_block);
 				_$_.append(__anchor, fragment_10);
-				_$_.pop_component();
 			})
 		},
 		_$_.active_block

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

@@ -23,13 +23,10 @@ export function Layout(__anchor, __props, __block) {
 	{
 		var expression = _$_.child(div_1);
 
+		_$_.expression(expression, () => __props.children);
 		_$_.pop(div_1);
 	}
 
-	_$_.render(() => {
-		_$_.expression(expression, () => __props.children);
-	});
-
 	_$_.append(__anchor, div_1);
 	_$_.pop_component();
 }
@@ -43,13 +40,10 @@ export function TextWrappedLayout(__anchor, __props, __block) {
 		var text = _$_.child(div_2);
 		var expression_1 = _$_.sibling(text);
 
+		_$_.expression(expression_1, () => __props.children);
 		_$_.pop(div_2);
 	}
 
-	_$_.render(() => {
-		_$_.expression(expression_1, () => __props.children);
-	});
-
 	_$_.append(__anchor, div_2);
 	_$_.pop_component();
 }
@@ -93,15 +87,12 @@ export function LayoutWithSingleChild(__anchor, _, __block) {
 	Layout(
 		node_1,
 		{
-			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-				_$_.push_component();
-
+			children: _$_.ripple_element(function render_children(__anchor, __block) {
 				var fragment_3 = root_6();
 				var node_2 = _$_.first_child_frag(fragment_3);
 
 				SingleChild(node_2, {}, _$_.active_block);
 				_$_.append(__anchor, fragment_3);
-				_$_.pop_component();
 			})
 		},
 		_$_.active_block
@@ -120,15 +111,12 @@ export function LayoutWithMultipleChildren(__anchor, _, __block) {
 	Layout(
 		node_3,
 		{
-			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-				_$_.push_component();
-
+			children: _$_.ripple_element(function render_children(__anchor, __block) {
 				var fragment_5 = root_8();
 				var node_4 = _$_.first_child_frag(fragment_5);
 
 				SingleChild(node_4, {}, _$_.active_block);
 				_$_.append(__anchor, fragment_5);
-				_$_.pop_component();
 			})
 		},
 		_$_.active_block
@@ -147,15 +135,12 @@ export function LayoutWithMultiRootChild(__anchor, _, __block) {
 	Layout(
 		node_5,
 		{
-			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-				_$_.push_component();
-
+			children: _$_.ripple_element(function render_children(__anchor, __block) {
 				var fragment_7 = root_10();
 				var node_6 = _$_.first_child_frag(fragment_7);
 
 				MultiRootChild(node_6, {}, _$_.active_block);
 				_$_.append(__anchor, fragment_7);
-				_$_.pop_component();
 			})
 		},
 		_$_.active_block
@@ -174,15 +159,12 @@ export function LayoutWithTextAroundChildren(__anchor, _, __block) {
 	TextWrappedLayout(
 		node_7,
 		{
-			children: _$_.ripple_element(function render_children(__anchor, _, __block) {
-				_$_.push_component();
-
+			children: _$_.ripple_element(function render_children(__anchor, __block) {
 				var fragment_9 = root_12();
 				var node_8 = _$_.first_child_frag(fragment_9);
 
 				SingleChild(node_8, {}, _$_.active_block);
 				_$_.append(__anchor, fragment_9);
-				_$_.pop_component();
 			})
 		},
 		_$_.active_block