ripple 0.3.72 → 0.3.74

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

@@ -3,11 +3,9 @@ import { createRefKey, track } from 'ripple';
 
 describe('server dynamic DOM elements', () => {
 	it('renders static dynamic element', async () => {
-		function App() {
-			return <>
-				let tag = track('div');
-				<@tag>{'Hello World'}</@tag>
-			</>;
+		function App() @{
+			let tag = track('div');
+			<@tag>{'Hello World'}</@tag>
 		}
 
 		const { body } = await render(App);
@@ -18,12 +16,10 @@ describe('server 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', async () => {
-		function App() {
-			return <>
-				let obj = { tag: track('div') };
-				let tag = obj.tag;
-				<@tag>{'Hello World'}</@tag>
-			</>;
+		function App() @{
+			let obj = { tag: track('div') };
+			let tag = obj.tag;
+			<@tag>{'Hello World'}</@tag>
 		}
 
 		const { body } = await render(App);
@@ -32,12 +28,10 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('renders static dynamic element from a tracked object with a tracked property', async () => {
-		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>
 		}
 
 		const { body } = await render(App);
@@ -48,12 +42,10 @@ describe('server dynamic DOM elements', () => {
 	it(
 		'renders static dynamic element from a tracked object with a computed tracked property',
 		async () => {
-			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>
 			}
 
 			const { body } = await render(App);
@@ -63,11 +55,9 @@ describe('server dynamic DOM elements', () => {
 	);
 
 	it('renders self-closing dynamic element', async () => {
-		function App() {
-			return <>
-				let tag = track('input');
-				<@tag type="text" value="test" />
-			</>;
+		function App() @{
+			let tag = track('input');
+			<@tag type="text" value="test" />
 		}
 
 		const { body } = await render(App);
@@ -76,12 +66,10 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with attributes', async () => {
-		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>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -95,14 +83,12 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles nested dynamic elements', async () => {
-		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>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -117,14 +103,10 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with class object', async () => {
-		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>
 		}
 
 		const { body } = await render(App);
@@ -137,19 +119,15 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with style object', async () => {
-		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>
 		}
 
 		const { body } = await render(App);
@@ -163,16 +141,14 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with spread attributes', async () => {
-		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>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -188,18 +164,14 @@ describe('server dynamic DOM elements', () => {
 	it('handles dynamic element with ref not rendered', async () => {
 		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>
 		}
 
 		const { body } = await render(App);
@@ -215,21 +187,19 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles dynamic element with createRefKey in spread', async () => {
-		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>
 		}
 
 		const { body } = await render(App);
@@ -245,16 +215,16 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('applies scoped CSS to dynamic elements', async () => {
-		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>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -273,9 +243,9 @@ describe('server dynamic DOM elements', () => {
 		function DynamicButton(&{ ...rest }: PropsWithExtras<{
 			class: string;
 			id: string;
-		}>) {
-			return <>
-				const tag = track('button');
+		}>) @{
+			const tag = track('button');
+			<>
 				<@tag {...rest}>{rest.class}</@tag>
 				<style>
 					.even {
@@ -285,14 +255,12 @@ describe('server 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'} />
-			</>;
+		function App() @{
+			let &[count] = track(0);
+			<DynamicButton class={count % 2 ? 'even' : 'odd'} id={count % 2 ? 'even' : 'odd'} />
 		}
 
 		const { body } = await render(App);
@@ -312,9 +280,9 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements', async () => {
-		function App() {
-			return <>
-				let tag = track('div');
+		function App() @{
+			let tag = track('div');
+			<>
 				<@tag class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 				</@tag>
@@ -323,7 +291,7 @@ describe('server dynamic DOM elements', () => {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -341,9 +309,9 @@ describe('server dynamic DOM elements', () => {
 		async () => {
 			// NOTE: We always add the class scoping hash if there is css
 			// but the tag selector will be marked as unused if it's not explicitly seen in the template.
-			function App() {
-				return <>
-					let tag = track('div');
+			function App() @{
+				let tag = track('div');
+				<>
 					<@tag class="scoped">
 						<p>{'Scoped dynamic element'}</p>
 					</@tag>
@@ -352,7 +320,7 @@ describe('server dynamic DOM elements', () => {
 							color: blue;
 						}
 					</style>
-				</>;
+				</>
 			}
 
 			const { body } = await render(App);
@@ -367,8 +335,8 @@ describe('server dynamic DOM elements', () => {
 	);
 
 	it('doesn\'t add scoping class to components inside dynamic element', async () => {
-		function Child() {
-			return <>
+		function Child() @{
+			<>
 				<div class="child">
 					<p>{'I am a child component'}</p>
 				</div>
@@ -377,12 +345,12 @@ describe('server 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 />
@@ -392,7 +360,7 @@ describe('server dynamic DOM elements', () => {
 						color: blue;
 					}
 				</style>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -415,8 +383,8 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('doesn\'t add scoping class to dynamically rendered component', async () => {
-		function Child() {
-			return <>
+		function Child() @{
+			<>
 				<div class="child">
 					<p>{'I am a child component'}</p>
 				</div>
@@ -425,19 +393,19 @@ describe('server 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>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);