ripple 0.3.68 → 0.3.70

package/tests/server/basic.attributes.test.tsrx

@@ -2,8 +2,8 @@ import { RippleObject, track } from 'ripple';
 
 describe('basic server > attribute rendering', () => {
 	it('render static attributes', async () => {
-		component Basic() {
-			<div class="foo" id="bar" style="color: red;">{'Hello World'}</div>
+		function Basic() {
+			return <><div class="foo" id="bar" style="color: red;">{'Hello World'}</div></>;
 		}
 
 		const { body } = await render(Basic);
@@ -18,16 +18,16 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render dynamic class attribute', async () => {
-		component Basic() {
-			let &[active] = track(false);
-
-			<div class={active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
-
-			<style>
-				.active {
-					color: green;
-				}
-			</style>
+		function Basic() {
+			return <>
+				let &[active] = track(false);
+				<div class={active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
+				<style>
+					.active {
+						color: green;
+					}
+				</style>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -42,29 +42,30 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render class attribute with array, nested array, nested object', async () => {
-		component Basic() {
-			<div
-				class={[
-					'foo',
-					'bar',
-					true && 'baz',
-					false && 'aaa',
-					null && 'bbb',
-					[
-						'ccc',
-						'ddd',
-						{ eee: true, fff: false },
-					],
-				]}
-			>
-				{'Class Array'}
-			</div>
-
-			<style>
-				.foo {
-					color: red;
-				}
-			</style>
+		function Basic() {
+			return <>
+				<div
+					class={[
+						'foo',
+						'bar',
+						true && 'baz',
+						false && 'aaa',
+						null && 'bbb',
+						[
+							'ccc',
+							'ddd',
+							{ eee: true, fff: false },
+						],
+					]}
+				>
+					{'Class Array'}
+				</div>
+				<style>
+					.foo {
+						color: red;
+					}
+				</style>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -88,32 +89,30 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('applies scoped classes inside tsx blocks and fragment shorthand', async () => {
-		component App() {
-			<tsx>
-				<div class="card">
-					<h2>
-						{'tsx block'}
-					</h2>
-				</div>
-			</tsx>
-
-			<>
-				<div class="card">
-					<h2>
-						{'fragment shorthand'}
-					</h2>
-				</div>
-			</>
-
-			<style>
-				.card {
-					padding: 1rem;
-				}
+		function App() {
+			return <>
+				<tsx>
+					<div class="card">
+						<h2>
+							{'tsx block'}
+						</h2>
+					</div>
+				</tsx>
+				<>
+					<div class="card">
+						<h2>{'fragment shorthand'}</h2>
+					</div>
+				</>
+				<style>
+					.card {
+						padding: 1rem;
+					}
 
-				h2 {
-					color: red;
-				}
-			</style>
+					h2 {
+						color: red;
+					}
+				</style>
+			</>;
 		}
 
 		const { body } = await render(App);
@@ -139,16 +138,16 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render dynamic class object', async () => {
-		component Basic() {
-			let &[active] = track(false);
-
-			<div class={{ active: active, inactive: !active }}>{'Dynamic Class'}</div>
-
-			<style>
-				.active {
-					color: green;
-				}
-			</style>
+		function Basic() {
+			return <>
+				let &[active] = track(false);
+				<div class={{ active: active, inactive: !active }}>{'Dynamic Class'}</div>
+				<style>
+					.active {
+						color: green;
+					}
+				</style>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -166,21 +165,21 @@ describe('basic server > attribute rendering', () => {
 	it(
 		'applies scoped ripple class to multiple elements with dynamic class expressions',
 		async () => {
-			component Basic() {
-				let &[selected] = track(1);
-
-				<div class={selected === 0 ? 'selected' : ''}>{`div 1`}</div>
-				<div class={selected === 0 ? 'selected' : ''}>{`div 2`}</div>
-
-				<style>
-					div {
-						background: green;
-						color: white;
-					}
-					div.selected {
-						background: indigo;
-					}
-				</style>
+			function Basic() {
+				return <>
+					let &[selected] = track(1);
+					<div class={selected === 0 ? 'selected' : ''}>{`div 1`}</div>
+					<div class={selected === 0 ? 'selected' : ''}>{`div 2`}</div>
+					<style>
+						div {
+							background: green;
+							color: white;
+						}
+						div.selected {
+							background: indigo;
+						}
+					</style>
+				</>;
 			}
 
 			const { body } = await render(Basic);
@@ -197,10 +196,11 @@ describe('basic server > attribute rendering', () => {
 	);
 
 	it('render dynamic id attribute', async () => {
-		component Basic() {
-			let &[count] = track(0);
-
-			<div id={`item-${count}`}>{'Dynamic ID'}</div>
+		function Basic() {
+			return <>
+				let &[count] = track(0);
+				<div id={`item-${count}`}>{'Dynamic ID'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -212,10 +212,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render dynamic style attribute', async () => {
-		component Basic() {
-			let &[color] = track('red');
-
-			<div style={`color: ${color}; font-weight: bold;`}>{'Dynamic Style'}</div>
+		function Basic() {
+			return <>
+				let &[color] = track('red');
+				<div style={`color: ${color}; font-weight: bold;`}>{'Dynamic Style'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -228,10 +229,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render style attribute as dynamic object', async () => {
-		component Basic() {
-			let &[color] = track('red');
-
-			<div style={{ color: color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
+		function Basic() {
+			return <>
+				let &[color] = track('red');
+				<div style={{ color: color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -244,10 +246,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render tracked variable as style attribute', async () => {
-		component Basic() {
-			let &[style] = track({ color: 'red', fontWeight: 'bold' });
-
-			<div {style}>{'Dynamic Style'}</div>
+		function Basic() {
+			return <>
+				let &[style] = track({ color: 'red', fontWeight: 'bold' });
+				<div {style}>{'Dynamic Style'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -260,13 +263,14 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render tracked object as style attribute', async () => {
-		component Basic() {
-			let style = new RippleObject({
-				color: 'red',
-				fontWeight: 'bold',
-			});
-
-			<div style={{ color: style.color, fontWeight: style.fontWeight }}>{'Dynamic Style'}</div>
+		function Basic() {
+			return <>
+				let style = new RippleObject({
+					color: 'red',
+					fontWeight: 'bold',
+				});
+				<div style={{ color: style.color, fontWeight: style.fontWeight }}>{'Dynamic Style'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -279,13 +283,14 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render spread attributes with style and class', async () => {
-		component Basic() {
-			const attributes = {
-				style: { color: 'red', fontWeight: 'bold' },
-				class: ['foo', false && 'bar'],
-			};
-
-			<div {...attributes}>{'Attributes with style and class'}</div>
+		function Basic() {
+			return <>
+				const attributes = {
+					style: { color: 'red', fontWeight: 'bold' },
+					class: ['foo', false && 'bar'],
+				};
+				<div {...attributes}>{'Attributes with style and class'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -300,13 +305,64 @@ describe('basic server > attribute rendering', () => {
 		expect(div.classList.contains('bar')).toBe(false);
 	});
 
-	it('render spread props without duplication', async () => {
-		component Basic() {
-			const checkBoxProp = { name: 'car' };
+	it('renders host innerHTML as content instead of an attribute', async () => {
+		function Basic() {
+			return <>
+				const html = '<span>Direct HTML</span>';
+				<code innerHTML={html} />
+			</>;
+		}
+
+		const { body } = await render(Basic);
+		const { document } = parseHtml(body);
+		const code = document.querySelector('code');
+
+		expect(code.innerHTML).toBe('<span>Direct HTML</span>');
+		expect(code.hasAttribute('innerhtml')).toBe(false);
+		expect(body).toBeHtml('<code><span>Direct HTML</span></code>');
+	});
+
+	it('renders spread innerHTML as content instead of an attribute', async () => {
+		function Basic() {
+			return <>
+				const attributes = { innerHTML: '<span>Spread HTML</span>' };
+				<code {...attributes} />
+			</>;
+		}
 
-			<div>
-				<input {...checkBoxProp} type="checkbox" id="vehicle1" value="Bike" />
-			</div>
+		const { body } = await render(Basic);
+		const { document } = parseHtml(body);
+		const code = document.querySelector('code');
+
+		expect(code.innerHTML).toBe('<span>Spread HTML</span>');
+		expect(code.hasAttribute('innerhtml')).toBe(false);
+		expect(body).toBeHtml('<code><span>Spread HTML</span></code>');
+	});
+
+	it('uses the last innerHTML value when spreads and direct props are mixed', async () => {
+		function Basic() {
+			return <>
+				const attributes = { innerHTML: '<span>Spread HTML</span>' };
+				<code {...attributes} innerHTML="<em>Direct HTML</em>" />
+			</>;
+		}
+
+		const { body } = await render(Basic);
+		const { document } = parseHtml(body);
+		const code = document.querySelector('code');
+
+		expect(code.innerHTML).toBe('<em>Direct HTML</em>');
+		expect(code.hasAttribute('innerhtml')).toBe(false);
+	});
+
+	it('render spread props without duplication', async () => {
+		function Basic() {
+			return <>
+				const checkBoxProp = { name: 'car' };
+				<div>
+					<input {...checkBoxProp} type="checkbox" id="vehicle1" value="Bike" />
+				</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -330,11 +386,12 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render dynamic boolean attributes as false', async () => {
-		component Basic() {
-			let &[disabled] = track(false);
-			let &[checked] = track(false);
-
-			<input type="checkbox" {disabled} {checked} />
+		function Basic() {
+			return <>
+				let &[disabled] = track(false);
+				let &[checked] = track(false);
+				<input type="checkbox" {disabled} {checked} />
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -348,10 +405,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render dynamic boolean attributes as false via spread', async () => {
-		component Basic() {
-			const spread = { disabled: false, checked: false };
-
-			<input type="checkbox" {...spread} />
+		function Basic() {
+			return <>
+				const spread = { disabled: false, checked: false };
+				<input type="checkbox" {...spread} />
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -365,11 +423,12 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render dynamic boolean attributes as true', async () => {
-		component Basic() {
-			let &[disabled] = track(true);
-			let &[checked] = track(true);
-
-			<input type="checkbox" {disabled} {checked} />
+		function Basic() {
+			return <>
+				let &[disabled] = track(true);
+				let &[checked] = track(true);
+				<input type="checkbox" {disabled} {checked} />
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -383,10 +442,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render dynamic boolean attributes as true via spread', async () => {
-		component Basic() {
-			const spread = { disabled: true, checked: true };
-
-			<input type="checkbox" {...spread} />
+		function Basic() {
+			return <>
+				const spread = { disabled: true, checked: true };
+				<input type="checkbox" {...spread} />
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -400,10 +460,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('renders formnovalidate as a boolean attribute', async () => {
-		component Basic() {
-			let &[formnovalidate] = track(true);
-
-			<button {formnovalidate}>{'Submit'}</button>
+		function Basic() {
+			return <>
+				let &[formnovalidate] = track(true);
+				<button {formnovalidate}>{'Submit'}</button>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -417,10 +478,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('renders hidden as a boolean attribute when true', async () => {
-		component Basic() {
-			let &[hidden] = track(true);
-
-			<div {hidden}>{'Hidden content'}</div>
+		function Basic() {
+			return <>
+				let &[hidden] = track(true);
+				<div {hidden}>{'Hidden content'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -434,10 +496,11 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('does not render hidden when false', async () => {
-		component Basic() {
-			let &[hidden] = track(false);
-
-			<div {hidden}>{'Visible content'}</div>
+		function Basic() {
+			return <>
+				let &[hidden] = track(false);
+				<div {hidden}>{'Visible content'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -450,13 +513,14 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render multiple dynamic attributes', async () => {
-		component Basic() {
-			let &[theme] = track('light');
-			let &[size] = track('medium');
-
-			<div class={`theme-${theme} size-${size}`} data-theme={theme} data-size={size}>
-				{'Multiple Dynamic Attributes'}
-			</div>
+		function Basic() {
+			return <>
+				let &[theme] = track('light');
+				let &[size] = track('medium');
+				<div class={`theme-${theme} size-${size}`} data-theme={theme} data-size={size}>
+					{'Multiple Dynamic Attributes'}
+				</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -470,16 +534,17 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render conditional attributes', async () => {
-		component Basic() {
-			let &[showTitle] = track(false);
-			let &[showAria] = track(false);
-
-			<div
-				title={showTitle ? 'This is a title' : undefined}
-				aria-label={showAria ? 'Accessible label' : undefined}
-			>
-				{'Conditional Attributes'}
-			</div>
+		function Basic() {
+			return <>
+				let &[showTitle] = track(false);
+				let &[showAria] = track(false);
+				<div
+					title={showTitle ? 'This is a title' : undefined}
+					aria-label={showAria ? 'Accessible label' : undefined}
+				>
+					{'Conditional Attributes'}
+				</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -492,13 +557,14 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('render spread attributes', async () => {
-		component Basic() {
-			let &[attrs] = track<TestAttributes>({
-				class: 'initial',
-				id: 'test-1',
-			});
-
-			<div {...attrs}>{'Spread Attributes'}</div>
+		function Basic() {
+			return <>
+				let &[attrs] = track<TestAttributes>({
+					class: 'initial',
+					id: 'test-1',
+				});
+				<div {...attrs}>{'Spread Attributes'}</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -512,16 +578,16 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('renders with reactive attributes with nested reactive attributes', async () => {
-		component Basic() {
-			let &[value] = track('parent-class');
-
-			<p class={value}>{'Colored parent value'}</p>
-
-			<div>
-				let &[nested] = track('nested-class');
-
-				<p class={nested}>{'Colored nested value'}</p>
-			</div>
+		function Basic() {
+			return <>
+				let &[value] = track('parent-class');
+				<p class={value}>{'Colored parent value'}</p>
+				<div>
+					let &[nested] = track('nested-class');
+
+					<p class={nested}>{'Colored nested value'}</p>
+				</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -534,10 +600,12 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('handles boolean attributes with no prop value provides', async () => {
-		component Basic() {
-			<div class="container">
-				<input type="checkbox" checked />
-			</div>
+		function Basic() {
+			return <>
+				<div class="container">
+					<input type="checkbox" checked />
+				</div>
+			</>;
 		}
 
 		const { body } = await render(Basic);
@@ -545,14 +613,15 @@ describe('basic server > attribute rendering', () => {
 	});
 
 	it('handles boolean props correctly', async () => {
-		component Basic() {
-			<div data-disabled />
-
-			<Child isDisabled />
+		function Basic() {
+			return <>
+				<div data-disabled />
+				<Child isDisabled />
+			</>;
 		}
 
-		component Child({ isDisabled }: { isDisabled: boolean }) {
-			<input disabled={isDisabled} />
+		function Child({ isDisabled }: { isDisabled: boolean }) {
+			return <><input disabled={isDisabled} /></>;
 		}
 
 		const { body } = await render(Basic);