ripple 0.3.67 → 0.3.69

package/tests/client/dynamic-elements.test.tsrx

@@ -3,10 +3,11 @@ import { createRefKey, effect, flushSync, track } from 'ripple';
 
 describe('dynamic DOM elements', () => {
 	it('renders static dynamic element', () => {
-		component App() {
-			let tag = track('div');
-
-			<@tag>{'Hello World'}</@tag>
+		function App() {
+			return <>
+				let tag = track('div');
+				<@tag>{'Hello World'}</@tag>
+			</>;
 		}
 		render(App);
 
@@ -18,10 +19,11 @@ describe('dynamic DOM elements', () => {
 	// The ts errors below are due to limitations in our current tsx generation for dynamic elements.
 	// They can be ignored for now. But we'll fix them via jsx() vs <jsx>
 	it('renders static dynamic element from a plain object with a tracked property', () => {
-		component App() {
-			let obj = { tag: track('div') };
-
-			<obj.tag.value>{'Hello World'}</obj.tag.value>
+		function App() {
+			return <>
+				let obj = { tag: track('div') };
+				<obj.tag.value>{'Hello World'}</obj.tag.value>
+			</>;
 		}
 		render(App);
 
@@ -31,11 +33,12 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('renders static dynamic element from a tracked object with a tracked property', () => {
-		component App() {
-			let obj = track({ tag: track('div') });
-			let tag = obj.value.tag;
-
-			<@tag>{'Hello World'}</@tag>
+		function App() {
+			return <>
+				let obj = track({ tag: track('div') });
+				let tag = obj.value.tag;
+				<@tag>{'Hello World'}</@tag>
+			</>;
 		}
 		render(App);
 
@@ -47,11 +50,12 @@ describe('dynamic DOM elements', () => {
 	it(
 		'renders static dynamic element from a tracked object with a computed tracked property',
 		() => {
-			component App() {
-				let obj = track({ tag: track('div') });
-				let tag = obj.value['tag'];
-
-				<@tag>{'Hello World'}</@tag>
+			function App() {
+				return <>
+					let obj = track({ tag: track('div') });
+					let tag = obj.value['tag'];
+					<@tag>{'Hello World'}</@tag>
+				</>;
 			}
 			render(App);
 
@@ -62,17 +66,18 @@ describe('dynamic DOM elements', () => {
 	);
 
 	it('renders reactive dynamic element', () => {
-		component App() {
-			let &[tag] = track('div');
-
-			<button
-				onClick={() => {
-					tag = 'span';
-				}}
-			>
-				{'Change Tag'}
-			</button>
-			<@tag id="dynamic">{'Hello World'}</@tag>
+		function App() {
+			return <>
+				let &[tag] = track('div');
+				<button
+					onClick={() => {
+						tag = 'span';
+					}}
+				>
+					{'Change Tag'}
+				</button>
+				<@tag id="dynamic">{'Hello World'}</@tag>
+			</>;
 		}
 		render(App);
 
@@ -93,10 +98,11 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('renders self-closing dynamic element', () => {
-		component App() {
-			let tag = track('input');
-
-			<@tag type="text" value="test" />
+		function App() {
+			return <>
+				let tag = track('input');
+				<@tag type="text" value="test" />
+			</>;
 		}
 		render(App);
 
@@ -107,11 +113,12 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with attributes', () => {
-		component App() {
-			let tag = track('div');
-			let &[className] = track('test-class');
-
-			<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
+		function App() {
+			return <>
+				let tag = track('div');
+				let &[className] = track('test-class');
+				<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
+			</>;
 		}
 		render(App);
 
@@ -123,13 +130,14 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles nested dynamic elements', () => {
-		component App() {
-			let outerTag = track('div');
-			let innerTag = track('span');
-
-			<@outerTag class="outer">
-				<@innerTag class="inner">{'Nested content'}</@innerTag>
-			</@outerTag>
+		function App() {
+			return <>
+				let outerTag = track('div');
+				let innerTag = track('span');
+				<@outerTag class="outer">
+					<@innerTag class="inner">{'Nested content'}</@innerTag>
+				</@outerTag>
+			</>;
 		}
 		render(App);
 
@@ -143,11 +151,14 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with class object', () => {
-		component App() {
-			let tag = track('div');
-			let &[active] = track(true);
-
-			<@tag class={{ active: active, 'dynamic-element': true }}>{'Element with class object'}</@tag>
+		function App() {
+			return <>
+				let tag = track('div');
+				let &[active] = track(true);
+				<@tag class={{ active: active, 'dynamic-element': true }}>
+					{'Element with class object'}
+				</@tag>
+			</>;
 		}
 		render(App);
 
@@ -158,18 +169,19 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with style object', () => {
-		component App() {
-			let tag = track('span');
-
-			<@tag
-				style={{
-					color: 'red',
-					fontSize: '16px',
-					fontWeight: 'bold',
-				}}
-			>
-				{'Styled dynamic element'}
-			</@tag>
+		function App() {
+			return <>
+				let tag = track('span');
+				<@tag
+					style={{
+						color: 'red',
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					{'Styled dynamic element'}
+				</@tag>
+			</>;
 		}
 		render(App);
 
@@ -181,15 +193,16 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with spread attributes', () => {
-		component App() {
-			let tag = track('section');
-			const attrs = {
-				id: 'spread-section',
-				'data-testid': 'spread-test',
-				class: 'spread-class',
-			};
-
-			<@tag {...attrs} data-extra="additional">{'Element with spread attributes'}</@tag>
+		function App() {
+			return <>
+				let tag = track('section');
+				const attrs = {
+					id: 'spread-section',
+					'data-testid': 'spread-test',
+					class: 'spread-class',
+				};
+				<@tag {...attrs} data-extra="additional">{'Element with spread attributes'}</@tag>
+			</>;
 		}
 		render(App);
 
@@ -204,17 +217,18 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with ref', () => {
 		let capturedElement: HTMLElement | null = null;
 
-		component App() {
-			let tag = track('article');
-
-			<@tag
-				{ref (node: HTMLElement) => {
-					capturedElement = node;
-				}}
-				id="ref-test"
-			>
-				{'Element with ref'}
-			</@tag>
+		function App() {
+			return <>
+				let tag = track('article');
+				<@tag
+					ref={(node: HTMLElement) => {
+						capturedElement = node;
+					}}
+					id="ref-test"
+				>
+					{'Element with ref'}
+				</@tag>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -225,30 +239,32 @@ describe('dynamic DOM elements', () => {
 		expect(capturedElement!.textContent).toBe('Element with ref');
 	});
 
-	it('handles ref={...}, {ref ...}, and named ref props on dynamic DOM elements', () => {
+	it('handles multiple ref targets on dynamic DOM elements', () => {
 		let refAttrElement: HTMLInputElement | null = null;
 		let anonymousRefElement: HTMLInputElement | null = null;
 		let namedRefElement: HTMLInputElement | null = null;
 
-		component App() {
-			let tag = track('input');
-			let input: HTMLInputElement | undefined;
-			const state: { anonymous?: HTMLInputElement } = {};
-
-			<@tag
-				id="dynamic-ref-combo"
-				type="text"
-				ref={input}
-				{ref state.anonymous}
-				input_ref={ref (node: HTMLInputElement | null) => {
-					namedRefElement = node;
-				}}
-			/>
-
-			effect(() => {
-				refAttrElement = input ?? null;
-				anonymousRefElement = state.anonymous ?? null;
-			});
+		function App() {
+			return <>
+				let tag = track('input');
+				let input: HTMLInputElement | undefined;
+				const state: { anonymous?: HTMLInputElement } = {};
+				<@tag
+					id="dynamic-ref-combo"
+					type="text"
+					ref={[
+						input,
+						state.anonymous,
+						(node: HTMLInputElement | null) => {
+							namedRefElement = node;
+						},
+					]}
+				/>
+				effect(() => {
+					refAttrElement = input ?? null;
+					anonymousRefElement = state.anonymous ?? null;
+				});
+			</>;
 		}
 
 		render(App);
@@ -263,32 +279,34 @@ describe('dynamic DOM elements', () => {
 		expect(element!.hasAttribute('input_ref')).toBe(false);
 	});
 
-	it('forwards dynamic ref forms through a dynamic component that spreads props', () => {
+	it('forwards multiple dynamic refs through a dynamic component that spreads props', () => {
 		let refAttrElement: HTMLInputElement | null = null;
 		let anonymousRefElement: HTMLInputElement | null = null;
 		let namedRefElement: HTMLInputElement | null = null;
 
-		component Child(props: PropsWithExtras<{}>) {
-			<input id="dynamic-component-ref-combo" type="text" {...props} />
-		}
-
-		component App() {
-			let dynamic = track(() => Child);
-			let input: HTMLInputElement | undefined;
-			const state: { anonymous?: HTMLInputElement } = {};
-
-			<@dynamic
-				ref={input}
-				{ref state.anonymous}
-				input_ref={ref (node: HTMLInputElement | null) => {
-					namedRefElement = node;
-				}}
-			/>
-
-			effect(() => {
-				refAttrElement = input ?? null;
-				anonymousRefElement = state.anonymous ?? null;
-			});
+		function Child(props: PropsWithExtras<{}>) {
+			return <><input id="dynamic-component-ref-combo" type="text" {...props} /></>;
+		}
+
+		function App() {
+			return <>
+				let dynamic = track(() => Child);
+				let input: HTMLInputElement | undefined;
+				const state: { anonymous?: HTMLInputElement } = {};
+				<@dynamic
+					ref={[
+						input,
+						state.anonymous,
+						(node: HTMLInputElement | null) => {
+							namedRefElement = node;
+						},
+					]}
+				/>
+				effect(() => {
+					refAttrElement = input ?? null;
+					anonymousRefElement = state.anonymous ?? null;
+				});
+			</>;
 		}
 
 		render(App);
@@ -304,22 +322,21 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with createRefKey in spread', () => {
-		component App() {
-			let tag = track('header');
-
-			function elementRef(node: HTMLElement) {
-				// Set an attribute on the element to prove ref was called
-				node.setAttribute('data-spread-ref-called', 'true');
-				node.setAttribute('data-spread-ref-tag', node.tagName.toLowerCase());
-			}
-
-			const dynamicProps = {
-				id: 'spread-ref-test',
-				class: 'ref-element',
-				[createRefKey()]: elementRef,
-			};
-
-			<@tag {...dynamicProps}>{'Element with spread ref'}</@tag>
+		function App() {
+			return <>
+				let tag = track('header');
+				function elementRef(node: HTMLElement) {
+					// Set an attribute on the element to prove ref was called
+					node.setAttribute('data-spread-ref-called', 'true');
+					node.setAttribute('data-spread-ref-tag', node.tagName.toLowerCase());
+				}
+				const dynamicProps = {
+					id: 'spread-ref-test',
+					class: 'ref-element',
+					[createRefKey()]: elementRef,
+				};
+				<@tag {...dynamicProps}>{'Element with spread ref'}</@tag>
+			</>;
 		}
 		render(App);
 		flushSync();
@@ -334,25 +351,26 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('has reactive attributes on dynamic elements', () => {
-		component App() {
-			let tag = track('div');
-			let &[count] = track(0);
-
-			<button
-				onClick={() => {
-					count++;
-				}}
-			>
-				{'Increment'}
-			</button>
-			<@tag
-				id={count % 2 ? 'even' : 'odd'}
-				class={count % 2 ? 'even-class' : 'odd-class'}
-				data-count={count}
-			>
-				{'Count: '}
-				{count}
-			</@tag>
+		function App() {
+			return <>
+				let tag = track('div');
+				let &[count] = track(0);
+				<button
+					onClick={() => {
+						count++;
+					}}
+				>
+					{'Increment'}
+				</button>
+				<@tag
+					id={count % 2 ? 'even' : 'odd'}
+					class={count % 2 ? 'even-class' : 'odd-class'}
+					data-count={count}
+				>
+					{'Count: '}
+					{count}
+				</@tag>
+			</>;
 		}
 
 		render(App);
@@ -388,16 +406,16 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('applies scoped CSS to dynamic elements', () => {
-		component App() {
-			let tag = track('div');
-
-			<@tag class="test-class">{'Dynamic element'}</@tag>
-
-			<style>
-				.test-class {
-					color: red;
-				}
-			</style>
+		function App() {
+			return <>
+				let tag = track('div');
+				<@tag class="test-class">{'Dynamic element'}</@tag>
+				<style>
+					.test-class {
+						color: red;
+					}
+				</style>
+			</>;
 		}
 
 		render(App);
@@ -413,31 +431,31 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('applies scoped CSS to dynamic elements with reactive classes', () => {
-		component App() {
-			let tag = track('button');
-			let &[count] = track(0);
-
-			<@tag
-				class={count % 2 ? 'even' : 'odd'}
-				id={count % 2 ? 'even' : 'odd'}
-				onClick={() => {
-					count++;
-				}}
-			>
-				{'Count: '}
-				{count}
-			</@tag>
-
-			<style>
-				.even {
-					background-color: green;
-					color: white;
-				}
-				.odd {
-					background-color: red;
-					color: white;
-				}
-			</style>
+		function App() {
+			return <>
+				let tag = track('button');
+				let &[count] = track(0);
+				<@tag
+					class={count % 2 ? 'even' : 'odd'}
+					id={count % 2 ? 'even' : 'odd'}
+					onClick={() => {
+						count++;
+					}}
+				>
+					{'Count: '}
+					{count}
+				</@tag>
+				<style>
+					.even {
+						background-color: green;
+						color: white;
+					}
+					.odd {
+						background-color: red;
+						color: white;
+					}
+				</style>
+			</>;
 		}
 
 		render(App);
@@ -483,33 +501,36 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles spread attributes with class and CSS scoping ', () => {
-		component DynamicButton(&{ ...rest }: PropsWithExtras<{
+		function DynamicButton(&{ ...rest }: PropsWithExtras<{
 			class: string;
 			id: string;
 			onClick: EventListener;
 		}>) {
-			const tag = track('button');
-			<@tag {...rest}>{rest.class}</@tag>
-
-			<style>
-				.even {
-					background-color: green;
-				}
-				.odd {
-					background-color: red;
-				}
-			</style>
-		}
-
-		component App() {
-			let &[count] = track(0);
-			<DynamicButton
-				class={count % 2 ? 'even' : 'odd'}
-				id={count % 2 ? 'even' : 'odd'}
-				onClick={() => {
-					count++;
-				}}
-			/>
+			return <>
+				const tag = track('button');
+				<@tag {...rest}>{rest.class}</@tag>
+				<style>
+					.even {
+						background-color: green;
+					}
+					.odd {
+						background-color: red;
+					}
+				</style>
+			</>;
+		}
+
+		function App() {
+			return <>
+				let &[count] = track(0);
+				<DynamicButton
+					class={count % 2 ? 'even' : 'odd'}
+					id={count % 2 ? 'even' : 'odd'}
+					onClick={() => {
+						count++;
+					}}
+				/>
+			</>;
 		}
 
 		render(App);
@@ -544,18 +565,18 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements', () => {
-		component App() {
-			let tag = track('div');
-
-			<@tag class="scoped">
-				<p>{'Scoped dynamic element'}</p>
-			</@tag>
-
-			<style>
-				.scoped {
-					color: blue;
-				}
-			</style>
+		function App() {
+			return <>
+				let tag = track('div');
+				<@tag class="scoped">
+					<p>{'Scoped dynamic element'}</p>
+				</@tag>
+				<style>
+					.scoped {
+						color: blue;
+					}
+				</style>
+			</>;
 		}
 		render(App);
 
@@ -567,18 +588,18 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements when selector targets by tag name', () => {
-		component App() {
-			let tag = track('div');
-
-			<@tag class="scoped">
-				<p>{'Scoped dynamic element'}</p>
-			</@tag>
-
-			<style>
-				div {
-					color: blue;
-				}
-			</style>
+		function App() {
+			return <>
+				let tag = track('div');
+				<@tag class="scoped">
+					<p>{'Scoped dynamic element'}</p>
+				</@tag>
+				<style>
+					div {
+						color: blue;
+					}
+				</style>
+			</>;
 		}
 		render(App);
 
@@ -590,31 +611,32 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('doesn\'t add scoping class to components inside dynamic element', () => {
-		component Child() {
-			<div class="child">
-				<p>{'I am a child component'}</p>
-			</div>
-
-			<style>
-				.child {
-					color: blue;
-				}
-			</style>
-		}
-
-		component App() {
-			let tag = track('div');
-
-			<@tag class="scoped">
-				<p>{'Scoped dynamic element'}</p>
-				<Child />
-			</@tag>
-
-			<style>
-				div {
-					color: blue;
-				}
-			</style>
+		function Child() {
+			return <>
+				<div class="child">
+					<p>{'I am a child component'}</p>
+				</div>
+				<style>
+					.child {
+						color: blue;
+					}
+				</style>
+			</>;
+		}
+
+		function App() {
+			return <>
+				let tag = track('div');
+				<@tag class="scoped">
+					<p>{'Scoped dynamic element'}</p>
+					<Child />
+				</@tag>
+				<style>
+					div {
+						color: blue;
+					}
+				</style>
+			</>;
 		}
 		render(App);
 
@@ -635,28 +657,29 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('doesn\'t add scoping class to dynamically rendered component', () => {
-		component Child() {
-			<div class="child">
-				<p>{'I am a child component'}</p>
-			</div>
-
-			<style>
-				.child {
-					color: green;
-				}
-			</style>
-		}
-
-		component App() {
-			let tag = track(() => Child);
-
-			<@tag />
-
-			<style>
-				.child {
-					color: red;
-				}
-			</style>
+		function Child() {
+			return <>
+				<div class="child">
+					<p>{'I am a child component'}</p>
+				</div>
+				<style>
+					.child {
+						color: green;
+					}
+				</style>
+			</>;
+		}
+
+		function App() {
+			return <>
+				let tag = track(() => Child);
+				<@tag />
+				<style>
+					.child {
+						color: red;
+					}
+				</style>
+			</>;
 		}
 		render(App);
 
@@ -674,26 +697,29 @@ describe('dynamic DOM elements', () => {
 		let capturedElement: HTMLElement | null = null;
 		let refCallCount = 0;
 
-		component Button(props: any) {
-			const el = track('button');
-			<@el {...props} />
-		}
-
-		component App() {
-			let &[active] = track(false);
-
-			<Button
-				data-active={String(active)}
-				onClick={() => {
-					active = !active;
-				}}
-				{ref (el: HTMLElement) => {
-					capturedElement = el;
-					refCallCount++;
-				}}
-			>
-				{'content'}
-			</Button>
+		function Button(props: any) {
+			return <>
+				const el = track('button');
+				<@el {...props} />
+			</>;
+		}
+
+		function App() {
+			return <>
+				let &[active] = track(false);
+				<Button
+					data-active={String(active)}
+					onClick={() => {
+						active = !active;
+					}}
+					ref={(el: HTMLElement) => {
+						capturedElement = el;
+						refCallCount++;
+					}}
+				>
+					{'content'}
+				</Button>
+			</>;
 		}
 
 		render(App);
@@ -717,32 +743,34 @@ describe('dynamic DOM elements', () => {
 	it('handles ref on dynamic element with spread props containing reactive values', () => {
 		let capturedElement: HTMLElement | null = null;
 
-		component Button(props: any) {
-			const el = track('button');
-			<@el {...props} />
-		}
-
-		component App() {
-			let &[active] = track(false);
-
-			let &[buttonProps] = track(
-				() => ({
-					'data-active': active,
-				}),
-			);
-
-			<Button
-				{...buttonProps}
-				onClick={() => {
-					active = !active;
-				}}
-				{ref (el: HTMLElement) => {
-					capturedElement = el;
-				}}
-			>
-				{'content: '}
-				{active}
-			</Button>
+		function Button(props: any) {
+			return <>
+				const el = track('button');
+				<@el {...props} />
+			</>;
+		}
+
+		function App() {
+			return <>
+				let &[active] = track(false);
+				let &[buttonProps] = track(
+					() => ({
+						'data-active': active,
+					}),
+				);
+				<Button
+					{...buttonProps}
+					onClick={() => {
+						active = !active;
+					}}
+					ref={(el: HTMLElement) => {
+						capturedElement = el;
+					}}
+				>
+					{'content: '}
+					{active}
+				</Button>
+			</>;
 		}
 
 		render(App);
@@ -764,29 +792,32 @@ describe('dynamic DOM elements', () => {
 		let refCallCount = 0;
 		let capturedElement: HTMLElement | null = null;
 
-		component Button(props: any) {
-			const el = track('button');
-			<@el {...props} />
-		}
-
-		component App() {
-			let &[active] = track(false);
-
-			<Button
-				data-active={String(active)}
-				onClick={() => {
-					active = !active;
-				}}
-				{ref (el: HTMLElement) => {
-					capturedElement = el;
-					refCallCount++;
-					return () => {
-						cleanupCount++;
-					};
-				}}
-			>
-				{'content'}
-			</Button>
+		function Button(props: any) {
+			return <>
+				const el = track('button');
+				<@el {...props} />
+			</>;
+		}
+
+		function App() {
+			return <>
+				let &[active] = track(false);
+				<Button
+					data-active={String(active)}
+					onClick={() => {
+						active = !active;
+					}}
+					ref={(el: HTMLElement) => {
+						capturedElement = el;
+						refCallCount++;
+						return () => {
+							cleanupCount++;
+						};
+					}}
+				>
+					{'content'}
+				</Button>
+			</>;
 		}
 
 		render(App);
@@ -806,14 +837,16 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('should remove and add back a text node in a conditional statement with a tracked', () => {
-		component App() {
-			let &[b] = track(true);
-			<div>
-				if (b) {
-					{'Inside if'}
-				}
-			</div>
-			<button onClick={() => (b = !b)}>{'Toggle b'}</button>
+		function App() {
+			return <>
+				let &[b] = track(true);
+				<div>
+					if (b) {
+						{'Inside if'}
+					}
+				</div>
+				<button onClick={() => (b = !b)}>{'Toggle b'}</button>
+			</>;
 		}
 
 		render(App);