ripple 0.3.72 → 0.3.76

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

@@ -1,13 +1,11 @@
-import type { PropsWithExtras } from 'ripple';
-import { createRefKey, track } from 'ripple';
+import type { DynamicProps, PropsWithExtras, TSRXElement } from 'ripple';
+import { createRefKey, Dynamic, 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');
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -15,15 +13,11 @@ describe('server dynamic DOM elements', () => {
 		expect(body).toBeHtml('<div>Hello World</div>');
 	});
 
-	// 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;
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -31,13 +25,30 @@ describe('server dynamic DOM elements', () => {
 		expect(body).toBeHtml('<div>Hello World</div>');
 	});
 
+	it('does not pass is to dynamic component props', async () => {
+		function Child(props: Omit<DynamicProps<'div'>, 'is'> & {
+			label: string;
+			is?: Function;
+		}): TSRXElement<'div'> @{
+			<div>
+				{props.is === undefined && !('is' in props) ? 'hidden' : 'leaked'}
+			</div>
+		}
+
+		function App() @{
+			<Dynamic is={Child} label="child" class="yo" />
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<div>hidden</div>');
+	});
+
 	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;
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -48,12 +59,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'];
+				<Dynamic is={tag}>{'Hello World'}</Dynamic>
 			}
 
 			const { body } = await render(App);
@@ -63,11 +72,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');
+			<Dynamic is={tag} type="text" value="test" />
 		}
 
 		const { body } = await render(App);
@@ -76,12 +83,15 @@ 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');
+			<Dynamic
+				is={tag}
+				class={className}
+				id="test"
+				data-testid="dynamic-element"
+			>{'Content'}</Dynamic>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -95,14 +105,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');
+			<Dynamic is={outerTag} class="outer">
+				<Dynamic is={innerTag} class="inner">{'Nested content'}</Dynamic>
+			</Dynamic>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -117,14 +125,13 @@ 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);
+			<Dynamic
+				is={tag}
+				class={{ active: active, 'dynamic-element': true }}
+			>{'Element with class object'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -137,19 +144,16 @@ 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');
+			<Dynamic
+				is={tag}
+				style={{
+					color: 'red',
+					fontSize: '16px',
+					fontWeight: 'bold',
+				}}
+			>{'Styled dynamic element'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -163,16 +167,18 @@ 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',
+			};
+			<Dynamic
+				is={tag}
+				{...attrs}
+				data-extra="additional"
+			>{'Element with spread attributes'}</Dynamic>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -188,18 +194,15 @@ 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');
+			<Dynamic
+				is={tag}
+				ref={(node: HTMLElement) => {
+					capturedElement = node;
+				}}
+				id="ref-test"
+			>{'Element with ref'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -215,21 +218,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,
+			};
+			<Dynamic is={tag} {...dynamicProps}>{'Element with spread ref'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -245,16 +246,16 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('applies scoped CSS to dynamic elements', async () => {
-		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>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -273,10 +274,10 @@ describe('server dynamic DOM elements', () => {
 		function DynamicButton(&{ ...rest }: PropsWithExtras<{
 			class: string;
 			id: string;
-		}>) {
-			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;
@@ -285,14 +286,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,18 +311,18 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('adds scoping class to dynamic elements', async () => {
-		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>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -341,18 +340,18 @@ 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');
-					<@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>
-				</>;
+				</>
 			}
 
 			const { body } = await render(App);
@@ -367,8 +366,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,22 +376,22 @@ describe('server 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>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);
@@ -415,8 +414,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 +424,19 @@ describe('server 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>
-			</>;
+			</>
 		}
 
 		const { body } = await render(App);