ripple 0.3.72 → 0.3.76

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

@@ -1,13 +1,11 @@
 import type { PropsWithExtras } from 'ripple';
-import { createRefKey, effect, flushSync, track } from 'ripple';
+import { createRefKey, Dynamic, effect, flushSync, track } from 'ripple';
 
 describe('dynamic DOM elements', () => {
 	it('renders static dynamic element', () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				<@tag>{'Hello World'}</@tag>
-			</>;
+		function App() @{
+			let tag = track('div');
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 		render(App);
 
@@ -16,14 +14,10 @@ describe('dynamic DOM elements', () => {
 		expect(element.textContent).toBe('Hello World');
 	});
 
-	// 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', () => {
-		function App() {
-			return <>
-				let obj = { tag: track('div') };
-				<obj.tag.value>{'Hello World'}</obj.tag.value>
-			</>;
+		function App() @{
+			let obj = { tag: track('div') };
+			<Dynamic is={obj.tag}>{'Hello World'}</Dynamic>
 		}
 		render(App);
 
@@ -33,12 +27,10 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('renders static dynamic element from a tracked object with a tracked property', () => {
-		function App() {
-			return <>
-				let obj = track({ tag: track('div') });
-				let tag = obj.value.tag;
-				<@tag>{'Hello World'}</@tag>
-			</>;
+		function App() @{
+			let obj = track({ tag: track('div') });
+			let tag = obj.value.tag;
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 		render(App);
 
@@ -50,12 +42,10 @@ describe('dynamic DOM elements', () => {
 	it(
 		'renders static dynamic element from a tracked object with a computed tracked property',
 		() => {
-			function App() {
-				return <>
-					let obj = track({ tag: track('div') });
-					let tag = obj.value['tag'];
-					<@tag>{'Hello World'}</@tag>
-				</>;
+			function App() @{
+				let obj = track({ tag: track('div') });
+				let tag = obj.value['tag'];
+				<Dynamic is={tag}>{'Hello World'}</Dynamic>
 			}
 			render(App);
 
@@ -66,18 +56,16 @@ describe('dynamic DOM elements', () => {
 	);
 
 	it('renders reactive dynamic element', () => {
-		function App() {
-			return <>
-				let &[tag] = track('div');
+		function App() @{
+			let &[tag] = track('div');
+			<>
 				<button
 					onClick={() => {
 						tag = 'span';
 					}}
-				>
-					{'Change Tag'}
-				</button>
-				<@tag id="dynamic">{'Hello World'}</@tag>
-			</>;
+				>{'Change Tag'}</button>
+				<Dynamic is={tag} id="dynamic">{'Hello World'}</Dynamic>
+			</>
 		}
 		render(App);
 
@@ -98,11 +86,9 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('renders self-closing dynamic element', () => {
-		function App() {
-			return <>
-				let tag = track('input');
-				<@tag type="text" value="test" />
-			</>;
+		function App() @{
+			let tag = track('input');
+			<Dynamic is={tag} type="text" value="test" />
 		}
 		render(App);
 
@@ -113,12 +99,15 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with attributes', () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				let &[className] = track('test-class');
-				<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
-			</>;
+		function App() @{
+			let tag = track('div');
+			let &[className] = track('test-class');
+			<Dynamic
+				is={tag}
+				class={className}
+				id="test"
+				data-testid="dynamic-element"
+			>{'Content'}</Dynamic>
 		}
 		render(App);
 
@@ -130,14 +119,12 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles nested dynamic elements', () => {
-		function App() {
-			return <>
-				let outerTag = track('div');
-				let innerTag = track('span');
-				<@outerTag class="outer">
-					<@innerTag class="inner">{'Nested content'}</@innerTag>
-				</@outerTag>
-			</>;
+		function App() @{
+			let outerTag = track('div');
+			let innerTag = track('span');
+			<Dynamic is={outerTag} class="outer">
+				<Dynamic is={innerTag} class="inner">{'Nested content'}</Dynamic>
+			</Dynamic>
 		}
 		render(App);
 
@@ -151,14 +138,13 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with class object', () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				let &[active] = track(true);
-				<@tag class={{ active: active, 'dynamic-element': true }}>
-					{'Element with class object'}
-				</@tag>
-			</>;
+		function App() @{
+			let tag = track('div');
+			let &[active] = track(true);
+			<Dynamic
+				is={tag}
+				class={{ active: active, 'dynamic-element': true }}
+			>{'Element with class object'}</Dynamic>
 		}
 		render(App);
 
@@ -169,19 +155,16 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with style object', () => {
-		function App() {
-			return <>
-				let tag = track('span');
-				<@tag
-					style={{
-						color: 'red',
-						fontSize: '16px',
-						fontWeight: 'bold',
-					}}
-				>
-					{'Styled dynamic element'}
-				</@tag>
-			</>;
+		function App() @{
+			let tag = track('span');
+			<Dynamic
+				is={tag}
+				style={{
+					color: 'red',
+					fontSize: '16px',
+					fontWeight: 'bold',
+				}}
+			>{'Styled dynamic element'}</Dynamic>
 		}
 		render(App);
 
@@ -193,16 +176,18 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with spread attributes', () => {
-		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>
-			</>;
+		function App() @{
+			let tag = track('section');
+			const attrs = {
+				id: 'spread-section',
+				'data-testid': 'spread-test',
+				class: 'spread-class',
+			};
+			<Dynamic
+				is={tag}
+				{...attrs}
+				data-extra="additional"
+			>{'Element with spread attributes'}</Dynamic>
 		}
 		render(App);
 
@@ -217,18 +202,15 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with ref', () => {
 		let capturedElement: HTMLElement | null = null;
 
-		function App() {
-			return <>
-				let tag = track('article');
-				<@tag
-					ref={(node: HTMLElement) => {
-						capturedElement = node;
-					}}
-					id="ref-test"
-				>
-					{'Element with ref'}
-				</@tag>
-			</>;
+		function App() @{
+			let tag = track('article');
+			<Dynamic
+				is={tag}
+				ref={(node: HTMLElement) => {
+					capturedElement = node;
+				}}
+				id="ref-test"
+			>{'Element with ref'}</Dynamic>
 		}
 		render(App);
 		flushSync();
@@ -244,27 +226,26 @@ describe('dynamic DOM elements', () => {
 		let anonymousRefElement: HTMLInputElement | null = null;
 		let namedRefElement: HTMLInputElement | null = 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;
-				});
-			</>;
+		function App() @{
+			let tag = track('input');
+			let input: HTMLInputElement | undefined;
+			const state: { anonymous?: HTMLInputElement } = {};
+			effect(() => {
+				refAttrElement = input ?? null;
+				anonymousRefElement = state.anonymous ?? null;
+			});
+			<Dynamic
+				is={tag}
+				id="dynamic-ref-combo"
+				type="text"
+				ref={[
+					input,
+					state.anonymous,
+					(node: HTMLInputElement | null) => {
+						namedRefElement = node;
+					},
+				]}
+			/>
 		}
 
 		render(App);
@@ -284,59 +265,115 @@ describe('dynamic DOM elements', () => {
 		let anonymousRefElement: HTMLInputElement | null = null;
 		let namedRefElement: HTMLInputElement | null = null;
 
-		function Child(props: PropsWithExtras<{}>) {
-			return <><input id="dynamic-component-ref-combo" type="text" {...props} /></>;
+		function Child(props: PropsWithExtras<{}>) @{
+			<input id="dynamic-component-ref-combo" type="text" {...props} />
+		}
+
+		function App() @{
+			let dynamic = track(() => Child);
+			let input: HTMLInputElement | undefined;
+			const state: { anonymous?: HTMLInputElement } = {};
+			effect(() => {
+				refAttrElement = input ?? null;
+				anonymousRefElement = state.anonymous ?? null;
+			});
+			<Dynamic
+				is={dynamic}
+				ref={[
+					input,
+					state.anonymous,
+					(node: HTMLInputElement | null) => {
+						namedRefElement = node;
+					},
+				]}
+			/>
+		}
+
+		render(App);
+		flushSync();
+
+		const element = container.querySelector('#dynamic-component-ref-combo');
+		expect(element).toBeInstanceOf(HTMLInputElement);
+		expect(refAttrElement).toBe(element);
+		expect(anonymousRefElement).toBe(element);
+		expect(namedRefElement).toBe(element);
+		expect(element!.hasAttribute('ref')).toBe(false);
+		expect(element!.hasAttribute('input_ref')).toBe(false);
+	});
+
+	it('updates forwarded refs when a dynamic component changes', () => {
+		let refAttrElement: HTMLInputElement | null = null;
+		let anonymousRefElement: HTMLInputElement | null = null;
+		let namedRefElement: HTMLInputElement | null = null;
+
+		function TextInput(props: PropsWithExtras<{}>) @{
+			<input id="dynamic-component-text" type="text" {...props} />
 		}
 
-		function App() {
-			return <>
-				let dynamic = track(() => Child);
-				let input: HTMLInputElement | undefined;
-				const state: { anonymous?: HTMLInputElement } = {};
-				<@dynamic
+		function SearchInput(props: PropsWithExtras<{}>) @{
+			<input id="dynamic-component-search" type="search" {...props} />
+		}
+
+		function App() @{
+			let &[dynamic] = track(() => TextInput);
+			<>
+				<button
+					onClick={() => {
+						dynamic = dynamic === TextInput ? SearchInput : TextInput;
+					}}
+				>{'Change Component'}</button>
+				<Dynamic
+					is={dynamic}
 					ref={[
-						input,
-						state.anonymous,
+						(node: HTMLInputElement | null) => {
+							refAttrElement = node;
+						},
+						(node: HTMLInputElement | null) => {
+							anonymousRefElement = node;
+						},
 						(node: HTMLInputElement | null) => {
 							namedRefElement = node;
 						},
 					]}
 				/>
-				effect(() => {
-					refAttrElement = input ?? null;
-					anonymousRefElement = state.anonymous ?? null;
-				});
-			</>;
+			</>
 		}
 
 		render(App);
 		flushSync();
 
-		const element = container.querySelector('#dynamic-component-ref-combo');
-		expect(element).toBeInstanceOf(HTMLInputElement);
-		expect(refAttrElement).toBe(element);
-		expect(anonymousRefElement).toBe(element);
-		expect(namedRefElement).toBe(element);
-		expect(element!.hasAttribute('ref')).toBe(false);
-		expect(element!.hasAttribute('input_ref')).toBe(false);
+		const button = container.querySelector('button')!;
+		const textInput = container.querySelector('#dynamic-component-text');
+		expect(textInput).toBeInstanceOf(HTMLInputElement);
+		expect(refAttrElement).toBe(textInput);
+		expect(anonymousRefElement).toBe(textInput);
+		expect(namedRefElement).toBe(textInput);
+
+		button.click();
+		flushSync();
+
+		const searchInput = container.querySelector('#dynamic-component-search');
+		expect(searchInput).toBeInstanceOf(HTMLInputElement);
+		expect(container.querySelector('#dynamic-component-text')).toBeNull();
+		expect(refAttrElement).toBe(searchInput);
+		expect(anonymousRefElement).toBe(searchInput);
+		expect(namedRefElement).toBe(searchInput);
 	});
 
 	it('handles dynamic element with createRefKey in spread', () => {
-		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>
-			</>;
+		function 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,
+			};
+			<Dynamic is={tag} {...dynamicProps}>{'Element with spread ref'}</Dynamic>
 		}
 		render(App);
 		flushSync();
@@ -351,26 +388,25 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('has reactive attributes on dynamic elements', () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				let &[count] = track(0);
+		function App() @{
+			let tag = track('div');
+			let &[count] = track(0);
+			<>
 				<button
 					onClick={() => {
 						count++;
 					}}
-				>
-					{'Increment'}
-				</button>
-				<@tag
+				>{'Increment'}</button>
+				<Dynamic
+					is={tag}
 					id={count % 2 ? 'even' : 'odd'}
 					class={count % 2 ? 'even-class' : 'odd-class'}
 					data-count={count}
 				>
 					{'Count: '}
 					{count}
-				</@tag>
-			</>;
+				</Dynamic>
+			</>
 		}
 
 		render(App);
@@ -406,16 +442,16 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('applies scoped CSS to dynamic elements', () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				<@tag class="test-class">{'Dynamic element'}</@tag>
+		function App() @{
+			let tag = track('div');
+			<>
+				<Dynamic is={tag} class="test-class">{'Dynamic element'}</Dynamic>
 				<style>
 					.test-class {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -431,11 +467,12 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('applies scoped CSS to dynamic elements with reactive classes', () => {
-		function App() {
-			return <>
-				let tag = track('button');
-				let &[count] = track(0);
-				<@tag
+		function App() @{
+			let tag = track('button');
+			let &[count] = track(0);
+			<>
+				<Dynamic
+					is={tag}
 					class={count % 2 ? 'even' : 'odd'}
 					id={count % 2 ? 'even' : 'odd'}
 					onClick={() => {
@@ -444,7 +481,7 @@ describe('dynamic DOM elements', () => {
 				>
 					{'Count: '}
 					{count}
-				</@tag>
+				</Dynamic>
 				<style>
 					.even {
 						background-color: green;
@@ -455,7 +492,7 @@ describe('dynamic DOM elements', () => {
 						color: white;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -505,10 +542,10 @@ describe('dynamic DOM elements', () => {
 			class: string;
 			id: string;
 			onClick: EventListener;
-		}>) {
-			return <>
-				const tag = track('button');
-				<@tag {...rest}>{rest.class}</@tag>
+		}>) @{
+			const tag = track('button');
+			<>
+				<Dynamic is={tag} {...rest}>{rest.class}</Dynamic>
 				<style>
 					.even {
 						background-color: green;
@@ -517,20 +554,18 @@ describe('dynamic DOM elements', () => {
 						background-color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				let &[count] = track(0);
-				<DynamicButton
-					class={count % 2 ? 'even' : 'odd'}
-					id={count % 2 ? 'even' : 'odd'}
-					onClick={() => {
-						count++;
-					}}
-				/>
-			</>;
+		function App() @{
+			let &[count] = track(0);
+			<DynamicButton
+				class={count % 2 ? 'even' : 'odd'}
+				id={count % 2 ? 'even' : 'odd'}
+				onClick={() => {
+					count++;
+				}}
+			/>
 		}
 
 		render(App);
@@ -565,18 +600,18 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements', () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				<@tag class="scoped">
+		function App() @{
+			let tag = track('div');
+			<>
+				<Dynamic is={tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
-				</@tag>
+				</Dynamic>
 				<style>
 					.scoped {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -588,18 +623,18 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements when selector targets by tag name', () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				<@tag class="scoped">
+		function App() @{
+			let tag = track('div');
+			<>
+				<Dynamic is={tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
-				</@tag>
+				</Dynamic>
 				<style>
 					div {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -611,8 +646,8 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('doesn\'t add scoping class to components inside dynamic element', () => {
-		function Child() {
-			return <>
+		function Child() @{
+			<>
 				<div class="child">
 					<p>{'I am a child component'}</p>
 				</div>
@@ -621,22 +656,22 @@ describe('dynamic DOM elements', () => {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				let tag = track('div');
-				<@tag class="scoped">
+		function App() @{
+			let tag = track('div');
+			<>
+				<Dynamic is={tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 					<Child />
-				</@tag>
+				</Dynamic>
 				<style>
 					div {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -657,8 +692,8 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('doesn\'t add scoping class to dynamically rendered component', () => {
-		function Child() {
-			return <>
+		function Child() @{
+			<>
 				<div class="child">
 					<p>{'I am a child component'}</p>
 				</div>
@@ -667,19 +702,19 @@ describe('dynamic DOM elements', () => {
 						color: green;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				let tag = track(() => Child);
-				<@tag />
+		function App() @{
+			let tag = track(() => Child);
+			<>
+				<Dynamic is={tag} />
 				<style>
 					.child {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -697,29 +732,23 @@ describe('dynamic DOM elements', () => {
 		let capturedElement: HTMLElement | null = null;
 		let refCallCount = 0;
 
-		function Button(props: any) {
-			return <>
-				const el = track('button');
-				<@el {...props} />
-			</>;
+		function Button(props: any) @{
+			const el = track('button');
+			<Dynamic is={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>
-			</>;
+		function App() @{
+			let &[active] = track(false);
+			<Button
+				data-active={String(active)}
+				onClick={() => {
+					active = !active;
+				}}
+				ref={(el: HTMLElement) => {
+					capturedElement = el;
+					refCallCount++;
+				}}
+			>{'content'}</Button>
 		}
 
 		render(App);
@@ -743,34 +772,30 @@ describe('dynamic DOM elements', () => {
 	it('handles ref on dynamic element with spread props containing reactive values', () => {
 		let capturedElement: HTMLElement | null = null;
 
-		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>
-			</>;
+		function Button(props: any) @{
+			const el = track('button');
+			<Dynamic is={el} {...props} />
+		}
+
+		function App() @{
+			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);
@@ -792,32 +817,26 @@ describe('dynamic DOM elements', () => {
 		let refCallCount = 0;
 		let capturedElement: HTMLElement | null = null;
 
-		function Button(props: any) {
-			return <>
-				const el = track('button');
-				<@el {...props} />
-			</>;
+		function Button(props: any) @{
+			const el = track('button');
+			<Dynamic is={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>
-			</>;
+		function App() @{
+			let &[active] = track(false);
+			<Button
+				data-active={String(active)}
+				onClick={() => {
+					active = !active;
+				}}
+				ref={(el: HTMLElement) => {
+					capturedElement = el;
+					refCallCount++;
+					return () => {
+						cleanupCount++;
+					};
+				}}
+			>{'content'}</Button>
 		}
 
 		render(App);
@@ -837,16 +856,16 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('should remove and add back a text node in a conditional statement with a tracked', () => {
-		function App() {
-			return <>
-				let &[b] = track(true);
+		function App() @{
+			let &[b] = track(true);
+			<>
 				<div>
-					if (b) {
-						{'Inside if'}
+					@if (b) {
+						<>Inside if</>
 					}
 				</div>
 				<button onClick={() => (b = !b)}>{'Toggle b'}</button>
-			</>;
+			</>
 		}
 
 		render(App);