ripple 0.3.74 → 0.3.76

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

@@ -1,11 +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() @{
 			let tag = track('div');
-			<@tag>{'Hello World'}</@tag>
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -13,13 +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() @{
 			let obj = { tag: track('div') };
 			let tag = obj.tag;
-			<@tag>{'Hello World'}</@tag>
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -27,11 +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() @{
 			let obj = track({ tag: track('div') });
 			let tag = obj.value.tag;
-			<@tag>{'Hello World'}</@tag>
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -45,7 +62,7 @@ describe('server dynamic DOM elements', () => {
 			function App() @{
 				let obj = track({ tag: track('div') });
 				let tag = obj.value['tag'];
-				<@tag>{'Hello World'}</@tag>
+				<Dynamic is={tag}>{'Hello World'}</Dynamic>
 			}
 
 			const { body } = await render(App);
@@ -57,7 +74,7 @@ describe('server dynamic DOM elements', () => {
 	it('renders self-closing dynamic element', async () => {
 		function App() @{
 			let tag = track('input');
-			<@tag type="text" value="test" />
+			<Dynamic is={tag} type="text" value="test" />
 		}
 
 		const { body } = await render(App);
@@ -69,7 +86,12 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			let &[className] = track('test-class');
-			<@tag class={className} id="test" data-testid="dynamic-element">{'Content'}</@tag>
+			<Dynamic
+				is={tag}
+				class={className}
+				id="test"
+				data-testid="dynamic-element"
+			>{'Content'}</Dynamic>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -86,9 +108,9 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let outerTag = track('div');
 			let innerTag = track('span');
-			<@outerTag class="outer">
-				<@innerTag class="inner">{'Nested content'}</@innerTag>
-			</@outerTag>
+			<Dynamic is={outerTag} class="outer">
+				<Dynamic is={innerTag} class="inner">{'Nested content'}</Dynamic>
+			</Dynamic>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -106,7 +128,10 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			let &[active] = track(true);
-			<@tag class={{ active: active, 'dynamic-element': true }}>{'Element with class object'}</@tag>
+			<Dynamic
+				is={tag}
+				class={{ active: active, 'dynamic-element': true }}
+			>{'Element with class object'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -121,13 +146,14 @@ describe('server dynamic DOM elements', () => {
 	it('handles dynamic element with style object', async () => {
 		function App() @{
 			let tag = track('span');
-			<@tag
+			<Dynamic
+				is={tag}
 				style={{
 					color: 'red',
 					fontSize: '16px',
 					fontWeight: 'bold',
 				}}
-			>{'Styled dynamic element'}</@tag>
+			>{'Styled dynamic element'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -148,7 +174,11 @@ describe('server dynamic DOM elements', () => {
 				'data-testid': 'spread-test',
 				class: 'spread-class',
 			};
-			<@tag {...attrs} data-extra="additional">{'Element with spread attributes'}</@tag>
+			<Dynamic
+				is={tag}
+				{...attrs}
+				data-extra="additional"
+			>{'Element with spread attributes'}</Dynamic>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -166,12 +196,13 @@ describe('server dynamic DOM elements', () => {
 
 		function App() @{
 			let tag = track('article');
-			<@tag
+			<Dynamic
+				is={tag}
 				ref={(node: HTMLElement) => {
 					capturedElement = node;
 				}}
 				id="ref-test"
-			>{'Element with ref'}</@tag>
+			>{'Element with ref'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -199,7 +230,7 @@ describe('server dynamic DOM elements', () => {
 				class: 'ref-element',
 				[createRefKey()]: elementRef,
 			};
-			<@tag {...dynamicProps}>{'Element with spread ref'}</@tag>
+			<Dynamic is={tag} {...dynamicProps}>{'Element with spread ref'}</Dynamic>
 		}
 
 		const { body } = await render(App);
@@ -218,7 +249,7 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<@tag class="test-class">{'Dynamic element'}</@tag>
+				<Dynamic is={tag} class="test-class">{'Dynamic element'}</Dynamic>
 				<style>
 					.test-class {
 						color: red;
@@ -246,7 +277,7 @@ describe('server dynamic DOM elements', () => {
 		}>) @{
 			const tag = track('button');
 			<>
-				<@tag {...rest}>{rest.class}</@tag>
+				<Dynamic is={tag} {...rest}>{rest.class}</Dynamic>
 				<style>
 					.even {
 						background-color: green;
@@ -283,9 +314,9 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<@tag class="scoped">
+				<Dynamic is={tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
-				</@tag>
+				</Dynamic>
 				<style>
 					.scoped {
 						color: blue;
@@ -312,9 +343,9 @@ describe('server dynamic DOM elements', () => {
 			function App() @{
 				let tag = track('div');
 				<>
-					<@tag class="scoped">
+					<Dynamic is={tag} class="scoped">
 						<p>{'Scoped dynamic element'}</p>
-					</@tag>
+					</Dynamic>
 					<style>
 						div {
 							color: blue;
@@ -351,10 +382,10 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track('div');
 			<>
-				<@tag class="scoped">
+				<Dynamic is={tag} class="scoped">
 					<p>{'Scoped dynamic element'}</p>
 					<Child />
-				</@tag>
+				</Dynamic>
 				<style>
 					div {
 						color: blue;
@@ -399,7 +430,7 @@ describe('server dynamic DOM elements', () => {
 		function App() @{
 			let tag = track(() => Child);
 			<>
-				<@tag />
+				<Dynamic is={tag} />
 				<style>
 					.child {
 						color: red;

package/tests/server/head.test.tsrx

@@ -90,6 +90,29 @@ describe('head elements', () => {
 		expect(document.title).toBe('');
 	});
 
+	it('renders external scripts with src attributes from a loop', async () => {
+		const Head = ({ scripts }: { scripts: { src: string }[] }) => @{
+			<head>
+				@for (const script of scripts) {
+					<script src={script.src} />
+				}
+			</head>
+		};
+
+		function App() @{
+			<Head scripts={[{ src: '/a.js' }, { src: '/b.js' }]} />
+		}
+
+		const { head, body } = await render(App);
+		const { document } = parseAsFullHtml(head, body);
+
+		const srcs = Array.from(document.querySelectorAll('head script[src]')).map(
+			(node) => node.getAttribute('src'),
+		).sort();
+
+		expect(srcs).toEqual(['/a.js', '/b.js']);
+	});
+
 	it('renders title with conditional content', async () => {
 		function App() @{
 			let &[showPrefix] = track(true);

package/tests/server/style-identifier.test.tsrx

@@ -1,4 +1,4 @@
-import { track } from 'ripple';
+import { Dynamic, track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
 const external_styles = <style>
@@ -178,7 +178,7 @@ describe('style class maps (server)', () => {
 
 			let dynamic = track(() => Child);
 			<div class="wrapper">
-				<@dynamic cls={styles.text} />
+				<Dynamic is={dynamic} cls={styles.text} />
 			</div>
 		}
 
@@ -269,9 +269,9 @@ describe('style class maps (server)', () => {
 		function App() @{
 			const DynamicWrapper = track(() => Wrapper);
 			<>
-				<@DynamicWrapper>
+				<Dynamic is={DynamicWrapper}>
 					<div class="green">{'Slotted child'}</div>
-				</@DynamicWrapper>
+				</Dynamic>
 				<style>
 					.green {
 						color: green;

package/types/index.d.ts

@@ -2,15 +2,16 @@ import type { ExtendedEventOptions } from '@tsrx/core/types';
 export type { RefValue } from '@tsrx/core/runtime/ref';
 export type { AddEventOptions, AddEventObject, ExtendedEventOptions } from '@tsrx/core/types';
 
-export type Component<T = Record<string, any>> = (props: T) => void;
+export type Component<T = Record<string, any>> = (props: T) => void | TSRXElement;
 
 declare const TSRX_ELEMENT: unique symbol;
 declare const REF_KEY: unique symbol;
 export type RefKey = typeof REF_KEY;
 
-export type TSRXElement = {
+export type TSRXElement<Tag = any> = {
 	readonly render: Function;
 	readonly [TSRX_ELEMENT]: true;
+	readonly __tag?: Tag;
 };
 
 /** Type for implicit children fragments rendered with `{children}`. */
@@ -26,6 +27,29 @@ export function tsrx_element(render: Function): TSRXElement;
 
 export function Fragment(props: FragmentProps): TSRXElement;
 
+type DynamicIntrinsicElements = JSX.IntrinsicElements;
+export type DynamicElementType = keyof DynamicIntrinsicElements | Component<any> | (string & {});
+type UnwrapTracked<T> = T extends Tracked<infer V> ? V : T;
+type DynamicTarget<T> = Exclude<UnwrapTracked<T>, null | undefined | false>;
+type DynamicComponentProps<T> = [T] extends [never]
+	? Props
+	: T extends Component<infer P>
+		? Omit<P, 'is'>
+		: T extends keyof DynamicIntrinsicElements
+			? DynamicIntrinsicElements[T]
+			: Props;
+export type DynamicProps<T> = Expand<
+	{
+		is: T;
+	} & DynamicComponentProps<DynamicTarget<NoInfer<T>>>
+>;
+
+export function Dynamic<T>(
+	props: {
+		is: T;
+	} & DynamicComponentProps<DynamicTarget<NoInfer<T>>>,
+): TSRXElement;
+
 export function mount(
 	component: Component,
 	options: { target: HTMLElement; props?: Record<string, any>; rootBoundary?: RootBoundaryOptions },
@@ -174,8 +198,8 @@ interface TrackedBase<V> {
 	'#v': V;
 	value: V;
 }
-// Augment Tracked to be callable when V is a Component
-// This allows <@Something /> to work in JSX when Something is Tracked<Component>
+// Augment Tracked to be callable when V is a Component.
+// This allows tracked component values to continue flowing through JSX checks.
 interface TrackedCallable<V> {
 	(props: V extends Component<infer P> ? P : never): V extends Component ? void : never;
 }