ripple 0.3.72 → 0.3.74

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

@@ -3,11 +3,9 @@ import { createRefKey, 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');
+			<@tag>{'Hello World'}</@tag>
 		}
 		render(App);
 
@@ -19,11 +17,9 @@ 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', () => {
-		function App() {
-			return <>
-				let obj = { tag: track('div') };
-				<obj.tag.value>{'Hello World'}</obj.tag.value>
-			</>;
+		function App() @{
+			let obj = { tag: track('div') };
+			<obj.tag.value>{'Hello World'}</obj.tag.value>
 		}
 		render(App);
 
@@ -33,12 +29,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;
+			<@tag>{'Hello World'}</@tag>
 		}
 		render(App);
 
@@ -50,12 +44,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'];
+				<@tag>{'Hello World'}</@tag>
 			}
 			render(App);
 
@@ -66,18 +58,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>
+				>{'Change Tag'}</button>
 				<@tag id="dynamic">{'Hello World'}</@tag>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -98,11 +88,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');
+			<@tag type="text" value="test" />
 		}
 		render(App);
 
@@ -113,12 +101,10 @@ 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');
+			<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
 		}
 		render(App);
 
@@ -130,14 +116,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');
+			<@outerTag class="outer">
+				<@innerTag class="inner">{'Nested content'}</@innerTag>
+			</@outerTag>
 		}
 		render(App);
 
@@ -151,14 +135,10 @@ 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);
+			<@tag class={{ active: active, 'dynamic-element': true }}>{'Element with class object'}</@tag>
 		}
 		render(App);
 
@@ -169,19 +149,15 @@ 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');
+			<@tag
+				style={{
+					color: 'red',
+					fontSize: '16px',
+					fontWeight: 'bold',
+				}}
+			>{'Styled dynamic element'}</@tag>
 		}
 		render(App);
 
@@ -193,16 +169,14 @@ 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',
+			};
+			<@tag {...attrs} data-extra="additional">{'Element with spread attributes'}</@tag>
 		}
 		render(App);
 
@@ -217,18 +191,14 @@ 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');
+			<@tag
+				ref={(node: HTMLElement) => {
+					capturedElement = node;
+				}}
+				id="ref-test"
+			>{'Element with ref'}</@tag>
 		}
 		render(App);
 		flushSync();
@@ -244,27 +214,25 @@ 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;
+			});
+			<@tag
+				id="dynamic-ref-combo"
+				type="text"
+				ref={[
+					input,
+					state.anonymous,
+					(node: HTMLInputElement | null) => {
+						namedRefElement = node;
+					},
+				]}
+			/>
 		}
 
 		render(App);
@@ -284,29 +252,27 @@ 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 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;
-				});
-			</>;
+		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
+				ref={[
+					input,
+					state.anonymous,
+					(node: HTMLInputElement | null) => {
+						namedRefElement = node;
+					},
+				]}
+			/>
 		}
 
 		render(App);
@@ -322,21 +288,19 @@ describe('dynamic DOM elements', () => {
 	});
 
 	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,
+			};
+			<@tag {...dynamicProps}>{'Element with spread ref'}</@tag>
 		}
 		render(App);
 		flushSync();
@@ -351,17 +315,15 @@ 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>
+				>{'Increment'}</button>
 				<@tag
 					id={count % 2 ? 'even' : 'odd'}
 					class={count % 2 ? 'even-class' : 'odd-class'}
@@ -370,7 +332,7 @@ describe('dynamic DOM elements', () => {
 					{'Count: '}
 					{count}
 				</@tag>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -406,16 +368,16 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('applies scoped CSS to dynamic elements', () => {
-		function App() {
-			return <>
-				let tag = track('div');
+		function App() @{
+			let tag = track('div');
+			<>
 				<@tag class="test-class">{'Dynamic element'}</@tag>
 				<style>
 					.test-class {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -431,10 +393,10 @@ 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);
+		function App() @{
+			let tag = track('button');
+			let &[count] = track(0);
+			<>
 				<@tag
 					class={count % 2 ? 'even' : 'odd'}
 					id={count % 2 ? 'even' : 'odd'}
@@ -455,7 +417,7 @@ describe('dynamic DOM elements', () => {
 						color: white;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -505,9 +467,9 @@ describe('dynamic DOM elements', () => {
 			class: string;
 			id: string;
 			onClick: EventListener;
-		}>) {
-			return <>
-				const tag = track('button');
+		}>) @{
+			const tag = track('button');
+			<>
 				<@tag {...rest}>{rest.class}</@tag>
 				<style>
 					.even {
@@ -517,20 +479,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,9 +525,9 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements', () => {
-		function App() {
-			return <>
-				let tag = track('div');
+		function App() @{
+			let tag = track('div');
+			<>
 				<@tag class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 				</@tag>
@@ -576,7 +536,7 @@ describe('dynamic DOM elements', () => {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -588,9 +548,9 @@ describe('dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements when selector targets by tag name', () => {
-		function App() {
-			return <>
-				let tag = track('div');
+		function App() @{
+			let tag = track('div');
+			<>
 				<@tag class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 				</@tag>
@@ -599,7 +559,7 @@ describe('dynamic DOM elements', () => {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -611,8 +571,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,12 +581,12 @@ describe('dynamic DOM elements', () => {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				let tag = track('div');
+		function App() @{
+			let tag = track('div');
+			<>
 				<@tag class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 					<Child />
@@ -636,7 +596,7 @@ describe('dynamic DOM elements', () => {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -657,8 +617,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 +627,19 @@ describe('dynamic DOM elements', () => {
 						color: green;
 					}
 				</style>
-			</>;
+			</>
 		}
 
-		function App() {
-			return <>
-				let tag = track(() => Child);
+		function App() @{
+			let tag = track(() => Child);
+			<>
 				<@tag />
 				<style>
 					.child {
 						color: red;
 					}
 				</style>
-			</>;
+			</>
 		}
 		render(App);
 
@@ -697,29 +657,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');
+			<@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 +697,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');
+			<@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 +742,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');
+			<@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 +781,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);