ripple 0.3.74 → 0.3.76

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

@@ -1,11 +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() @{
 			let tag = track('div');
-			<@tag>{'Hello World'}</@tag>
+			<Dynamic is={tag}>{'Hello World'}</Dynamic>
 		}
 		render(App);
 
@@ -14,12 +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() @{
 			let obj = { tag: track('div') };
-			<obj.tag.value>{'Hello World'}</obj.tag.value>
+			<Dynamic is={obj.tag}>{'Hello World'}</Dynamic>
 		}
 		render(App);
 
@@ -32,7 +30,7 @@ describe('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>
 		}
 		render(App);
 
@@ -47,7 +45,7 @@ describe('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>
 			}
 			render(App);
 
@@ -66,7 +64,7 @@ describe('dynamic DOM elements', () => {
 						tag = 'span';
 					}}
 				>{'Change Tag'}</button>
-				<@tag id="dynamic">{'Hello World'}</@tag>
+				<Dynamic is={tag} id="dynamic">{'Hello World'}</Dynamic>
 			</>
 		}
 		render(App);
@@ -90,7 +88,7 @@ describe('dynamic DOM elements', () => {
 	it('renders self-closing dynamic element', () => {
 		function App() @{
 			let tag = track('input');
-			<@tag type="text" value="test" />
+			<Dynamic is={tag} type="text" value="test" />
 		}
 		render(App);
 
@@ -104,7 +102,12 @@ describe('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>
 		}
 		render(App);
 
@@ -119,9 +122,9 @@ describe('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>
 		}
 		render(App);
 
@@ -138,7 +141,10 @@ describe('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>
 		}
 		render(App);
 
@@ -151,13 +157,14 @@ describe('dynamic DOM elements', () => {
 	it('handles dynamic element with style object', () => {
 		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>
 		}
 		render(App);
 
@@ -176,7 +183,11 @@ describe('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>
 		}
 		render(App);
 
@@ -193,12 +204,13 @@ describe('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>
 		}
 		render(App);
 		flushSync();
@@ -222,7 +234,8 @@ describe('dynamic DOM elements', () => {
 				refAttrElement = input ?? null;
 				anonymousRefElement = state.anonymous ?? null;
 			});
-			<@tag
+			<Dynamic
+				is={tag}
 				id="dynamic-ref-combo"
 				type="text"
 				ref={[
@@ -264,7 +277,8 @@ describe('dynamic DOM elements', () => {
 				refAttrElement = input ?? null;
 				anonymousRefElement = state.anonymous ?? null;
 			});
-			<@dynamic
+			<Dynamic
+				is={dynamic}
 				ref={[
 					input,
 					state.anonymous,
@@ -287,6 +301,65 @@ describe('dynamic DOM elements', () => {
 		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 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={[
+						(node: HTMLInputElement | null) => {
+							refAttrElement = node;
+						},
+						(node: HTMLInputElement | null) => {
+							anonymousRefElement = node;
+						},
+						(node: HTMLInputElement | null) => {
+							namedRefElement = node;
+						},
+					]}
+				/>
+			</>
+		}
+
+		render(App);
+		flushSync();
+
+		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() @{
 			let tag = track('header');
@@ -300,7 +373,7 @@ describe('dynamic DOM elements', () => {
 				class: 'ref-element',
 				[createRefKey()]: elementRef,
 			};
-			<@tag {...dynamicProps}>{'Element with spread ref'}</@tag>
+			<Dynamic is={tag} {...dynamicProps}>{'Element with spread ref'}</Dynamic>
 		}
 		render(App);
 		flushSync();
@@ -324,14 +397,15 @@ describe('dynamic DOM elements', () => {
 						count++;
 					}}
 				>{'Increment'}</button>
-				<@tag
+				<Dynamic
+					is={tag}
 					id={count % 2 ? 'even' : 'odd'}
 					class={count % 2 ? 'even-class' : 'odd-class'}
 					data-count={count}
 				>
 					{'Count: '}
 					{count}
-				</@tag>
+				</Dynamic>
 			</>
 		}
 
@@ -371,7 +445,7 @@ describe('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;
@@ -397,7 +471,8 @@ describe('dynamic DOM elements', () => {
 			let tag = track('button');
 			let &[count] = track(0);
 			<>
-				<@tag
+				<Dynamic
+					is={tag}
 					class={count % 2 ? 'even' : 'odd'}
 					id={count % 2 ? 'even' : 'odd'}
 					onClick={() => {
@@ -406,7 +481,7 @@ describe('dynamic DOM elements', () => {
 				>
 					{'Count: '}
 					{count}
-				</@tag>
+				</Dynamic>
 				<style>
 					.even {
 						background-color: green;
@@ -470,7 +545,7 @@ describe('dynamic DOM elements', () => {
 		}>) @{
 			const tag = track('button');
 			<>
-				<@tag {...rest}>{rest.class}</@tag>
+				<Dynamic is={tag} {...rest}>{rest.class}</Dynamic>
 				<style>
 					.even {
 						background-color: green;
@@ -528,9 +603,9 @@ describe('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;
@@ -551,9 +626,9 @@ describe('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;
@@ -587,10 +662,10 @@ describe('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;
@@ -633,7 +708,7 @@ describe('dynamic DOM elements', () => {
 		function App() @{
 			let tag = track(() => Child);
 			<>
-				<@tag />
+				<Dynamic is={tag} />
 				<style>
 					.child {
 						color: red;
@@ -659,7 +734,7 @@ describe('dynamic DOM elements', () => {
 
 		function Button(props: any) @{
 			const el = track('button');
-			<@el {...props} />
+			<Dynamic is={el} {...props} />
 		}
 
 		function App() @{
@@ -699,7 +774,7 @@ describe('dynamic DOM elements', () => {
 
 		function Button(props: any) @{
 			const el = track('button');
-			<@el {...props} />
+			<Dynamic is={el} {...props} />
 		}
 
 		function App() @{
@@ -744,7 +819,7 @@ describe('dynamic DOM elements', () => {
 
 		function Button(props: any) @{
 			const el = track('button');
-			<@el {...props} />
+			<Dynamic is={el} {...props} />
 		}
 
 		function App() @{

package/tests/client/head.test.tsrx

@@ -172,6 +172,40 @@ describe('head elements', () => {
 		expect(document.title).toBe('');
 	});
 
+	it('renders external scripts with src attributes from a loop', () => {
+		const added: HTMLScriptElement[] = [];
+		const scripts = [{ src: '/a.js' }, { src: '/b.js' }];
+
+		function App() @{
+			<head>
+				@for (const script of scripts) {
+					<script src={script.src} />
+				}
+			</head>
+		}
+
+		try {
+			render(App);
+
+			const head_scripts = Array.from(
+				document.head.querySelectorAll('script[src]'),
+			) as HTMLScriptElement[];
+
+			for (const node of head_scripts) {
+				if (node.getAttribute('src') === '/a.js' || node.getAttribute('src') === '/b.js') {
+					added.push(node);
+				}
+			}
+
+			const srcs = added.map((node) => node.getAttribute('src')).sort();
+			expect(srcs).toEqual(['/a.js', '/b.js']);
+		} finally {
+			for (const node of added) {
+				node.remove();
+			}
+		}
+	});
+
 	it('renders title with conditional content', () => {
 		function App() @{
 			let &[showPrefix] = track(true);

package/tests/client/svg.test.tsrx

@@ -1,4 +1,4 @@
-import { track } from 'ripple';
+import { Dynamic, track } from 'ripple';
 import type { Component, PropsWithChildren, PropsWithExtras } from 'ripple';
 
 describe('SVG namespace handling', () => {
@@ -296,7 +296,7 @@ describe('SVG namespace handling', () => {
 		function App() @{
 			let &[dynTag] = track('polygon');
 			<SVG>
-				<@dynTag points="0,0 30,0 15,10" />
+				<Dynamic is={dynTag} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 
@@ -327,7 +327,7 @@ describe('SVG namespace handling', () => {
 		function App() @{
 			let &[Component] = track(() => Polygon);
 			<SVG>
-				<@Component points="0,0 30,0 15,10" />
+				<Dynamic is={Component} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 
@@ -343,24 +343,25 @@ describe('SVG namespace handling', () => {
 	it('should render SVG as a dynamic top element with any dynamic children elements', () => {
 		function SVG({ children }: PropsWithChildren<{}>) @{
 			let &[tag] = track('svg');
-			<@tag
+			<Dynamic
+				is={tag}
 				width={100}
 				height={50}
 				fill="red"
 				viewBox="0 0 30 10"
 				preserveAspectRatio="none"
-			>{children}</@tag>
+			>{children}</Dynamic>
 		}
 
 		function Polygon({ points }: PropsWithExtras<{ points: string }>) @{
 			let &[dynTag] = track('polygon');
-			<@dynTag {points} />
+			<Dynamic is={dynTag} {points} />
 		}
 
 		function App() @{
 			let &[Component] = track(() => Polygon);
 			<SVG>
-				<@Component points="0,0 30,0 15,10" />
+				<Dynamic is={Component} points="0,0 30,0 15,10" />
 			</SVG>
 		}
 

package/tests/server/basic.components.test.tsrx

@@ -1,4 +1,4 @@
-import { track } from 'ripple';
+import { Dynamic, track } from 'ripple';
 import type {
 	Tracked,
 	PropsWithChildren,
@@ -331,7 +331,7 @@ describe('basic server > components & composition', () => {
 
 		function App() @{
 			let Content = track(() => Noop);
-			<@Content />
+			<Dynamic is={Content} />
 		}
 
 		const { body } = await render(App);

package/tests/server/basic.test.tsrx

@@ -1,4 +1,4 @@
-import { Fragment, track } from 'ripple';
+import { Dynamic, Fragment, track } from 'ripple';
 import type { Tracked, PropsNoChildren } from 'ripple';
 
 describe('basic client', () => {
@@ -402,8 +402,8 @@ second
 
 		function Parent() @{
 			const count = track(10);
-			let Dynamic = track(() => Child);
-			<@Dynamic {count} class={{ test: true }} />
+			let DynamicChild = track(() => Child);
+			<Dynamic is={DynamicChild} {count} class={{ test: true }} />
 		}
 
 		const { body } = await render(Parent);