ripple 0.3.128 → 0.4.0

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

@@ -1,4 +1,4 @@
-import type { DynamicProps, PropsWithExtras, TSRXElement } from 'ripple';
+import type { Component, DynamicProps, PropsWithExtras, TSRXElement } from 'ripple';
 import { createRefKey, track } from 'ripple';
 
 describe('server dynamic DOM elements', () => {
@@ -13,6 +13,26 @@ describe('server dynamic DOM elements', () => {
 		expect(body).toBeHtml('<div>Hello World</div>');
 	});
 
+	it('renders a component held in a plain tracked assigned after creation', async () => {
+		function Child() @{
+			<p>{'I am the child'}</p>
+		}
+
+		function App() @{
+			// track(Child) would make a derived that calls the component, so an
+			// empty tracked receives the component through `.value` instead.
+			const Body = track<Component>();
+			Body.value = Child;
+			<div>
+				<{Body.value} />
+			</div>
+		}
+
+		const { body } = await render(App);
+
+		expect(body).toBeHtml('<div><p>I am the child</p></div>');
+	});
+
 	it('renders static dynamic element from a plain object with a tracked property', async () => {
 		function App() @{
 			let obj = { tag: track('div') };
@@ -85,8 +105,8 @@ describe('server dynamic DOM elements', () => {
 	it('handles dynamic element with attributes', async () => {
 		function App() @{
 			let tag = track('div');
-			let &[className] = track('test-class');
-			<{tag} class={className} id="test" data-testid="dynamic-element">{'Content'}</{tag}>
+			const className = track('test-class');
+			<{tag} class={className.value} id="test" data-testid="dynamic-element">{'Content'}</{tag}>
 		}
 		const { body } = await render(App);
 		const { document } = parseHtml(body);
@@ -122,9 +142,9 @@ describe('server dynamic DOM elements', () => {
 	it('handles dynamic element with class object', async () => {
 		function App() @{
 			let tag = track('div');
-			let &[active] = track(true);
+			const active = track(true);
 			<{tag}
-				class={{ active: active, 'dynamic-element': true }}
+				class={{ active: active.value, 'dynamic-element': true }}
 			>{'Element with class object'}</{tag}>
 		}
 
@@ -259,7 +279,7 @@ describe('server dynamic DOM elements', () => {
 	});
 
 	it('handles spread attributes with class and CSS scoping', async () => {
-		function DynamicButton(&{ ...rest }: PropsWithExtras<{
+		function DynamicButton({ ...rest }: PropsWithExtras<{
 			class: string;
 			id: string;
 		}>) @{
@@ -278,8 +298,11 @@ describe('server dynamic DOM elements', () => {
 		}
 
 		function App() @{
-			let &[count] = track(0);
-			<DynamicButton class={count % 2 ? 'even' : 'odd'} id={count % 2 ? 'even' : 'odd'} />
+			const count = track(0);
+			<DynamicButton
+				class={count.value % 2 ? 'even' : 'odd'}
+				id={count.value % 2 ? 'even' : 'odd'}
+			/>
 		}
 
 		const { body } = await render(App);

package/tests/server/for.test.tsrx

@@ -202,4 +202,98 @@ describe('for statements in SSR', () => {
 			),
 		).toThrow('Continue statements are not allowed inside TSRX template for...of loops');
 	});
+
+	it('renders the loop from a function that returns its template', async () => {
+		function Plain({ items }) {
+			return <ul>
+				@for (const item of items) {
+					<li>{item.text}</li>
+				}
+			</ul>;
+		}
+
+		function Indexed({ items }) {
+			return <ul>
+				@for (const item of items; index i) {
+					<li>{i + ': ' + item.text}</li>
+				}
+			</ul>;
+		}
+
+		function Keyed({ items }) {
+			return <ul>
+				@for (const item of items; key item.id) {
+					<li>{item.text}</li>
+				}
+			</ul>;
+		}
+
+		const Arrow = ({ items }) => <ul>
+			@for (const item of items; index i) {
+				<li>{i + ': ' + item.text}</li>
+			}
+		</ul>;
+
+		function App() @{
+			const items = [
+				{ id: 1, text: 'a' },
+				{ id: 2, text: 'b' },
+			];
+			<>
+				<Plain {items} />
+				<Indexed {items} />
+				<Keyed {items} />
+				<Arrow {items} />
+			</>
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml(
+			'<ul><li>a</li><li>b</li></ul>' + '<ul><li>0: a</li><li>1: b</li></ul>' +
+				'<ul><li>a</li><li>b</li></ul>' +
+				'<ul><li>0: a</li><li>1: b</li></ul>',
+		);
+	});
+
+	it('renders the loop from a template held in a variable', async () => {
+		function Indexed({ items }) {
+			const list = <ul>
+				@for (const item of items; index i) {
+					<li>{i + ': ' + item.text}</li>
+				}
+			</ul>;
+			return list;
+		}
+
+		function App() @{
+			const items = [
+				{ id: 1, text: 'a' },
+				{ id: 2, text: 'b' },
+			];
+			<Indexed {items} />
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<ul><li>0: a</li><li>1: b</li></ul>');
+	});
+
+	it('renders a bare `@for` held in a variable through an expression', async () => {
+		function Returned({ items }) {
+			const yo = @for (const item of items; index i; key item.id) {
+				<li>{i + ': ' + item.text}</li>
+			};
+			return <ul>{yo}</ul>;
+		}
+
+		function App() @{
+			const items = [
+				{ id: 1, text: 'a' },
+				{ id: 2, text: 'b' },
+			];
+			<Returned {items} />
+		}
+
+		const { body } = await render(App);
+		expect(body).toBeHtml('<ul><li>0: a</li><li>1: b</li></ul>');
+	});
 });

package/tests/server/head.test.tsrx

@@ -20,13 +20,13 @@ describe('head elements', () => {
 
 	it('renders reactive title element', async () => {
 		function App() @{
-			let &[title] = track('Initial Title');
+			const title = track('Initial Title');
 			<>
 				<head>
-					<title>{title}</title>
+					<title>{title.value}</title>
 				</head>
 				<div>
-					<span>{title}</span>
+					<span>{title.value}</span>
 				</div>
 			</>
 		}
@@ -40,9 +40,9 @@ describe('head elements', () => {
 
 	it('renders title with template literal', async () => {
 		function App() @{
-			let &[name] = track('World');
+			const name = track('World');
 			<head>
-				<title>{`Hello ${name}!`}</title>
+				<title>{`Hello ${name.value}!`}</title>
 			</head>
 		}
 
@@ -54,14 +54,14 @@ describe('head elements', () => {
 
 	it('renders title with computed value', async () => {
 		function App() @{
-			let &[count] = track(0);
+			const count = track(0);
 			let prefix = 'Count: ';
 			<>
 				<head>
-					<title>{prefix + count}</title>
+					<title>{prefix + count.value}</title>
 				</head>
 				<div>
-					<span>{count}</span>
+					<span>{count.value}</span>
 				</div>
 			</>
 		}
@@ -130,11 +130,11 @@ describe('head elements', () => {
 
 	it('renders title with conditional content', async () => {
 		function App() @{
-			let &[showPrefix] = track(true);
-			let &[title] = track('Main Page');
+			const showPrefix = track(true);
+			const title = track('Main Page');
 			<head>
 				<title>
-					{showPrefix ? 'App - ' + title : title}
+					{showPrefix.value ? 'App - ' + title.value : title.value}
 				</title>
 			</head>
 		}

package/tests/server/scoped-styles.test.tsrx

@@ -144,7 +144,7 @@ describe('sibling-scoped style blocks (server)', () => {
 	});
 
 	it('merges the scope classes into a spread', async () => {
-		function Button(&{ ...rest }: { id: string; class?: string }) @{
+		function Button({ ...rest }: { id: string; class?: string }) @{
 			<>
 				<style>
 					button {
@@ -177,7 +177,7 @@ describe('sibling-scoped style blocks (server)', () => {
 
 describe('spreads with an imported theme (server)', () => {
 	it('merges the scope classes of a static class into the spread once', async () => {
-		function Card(&{ ...rest }: { class?: string }) @{
+		function Card({ ...rest }: { class?: string }) @{
 			<>
 				<style apply={importedTheme}>
 					.box {

package/tests/server/streaming-ssr.test.tsrx

@@ -37,6 +37,17 @@ function recordingSink() {
 
 const SLOT_OPEN_RE = /<!--\[\?(\d+)-->/;
 
+/**
+ * Settled units stream once the current task's microtasks have drained, so
+ * units settling together share one chunk: wait a macrotask for the flush.
+ */
+async function flushed(): Promise<void> {
+	// the first macrotask lets the settle microtasks schedule the flush, the
+	// second lets that flush run
+	await new Promise((resolve) => setImmediate(resolve));
+	await new Promise((resolve) => setImmediate(resolve));
+}
+
 /**
  * Applies streamed chunks the way the inline swap runtime would: collects
  * chunk templates, then repeatedly replaces `<!--[?N-->…<!--]-->` slots
@@ -160,8 +171,8 @@ describe('streaming try/pending boundaries', () => {
 		const d = deferred<string>();
 
 		function Content() @{
-			let &[data] = trackAsync(() => d.promise);
-			<p>{data}</p>
+			const data = trackAsync(() => d.promise);
+			<p>{data.value}</p>
 		}
 
 		function App() @{
@@ -218,8 +229,8 @@ describe('streaming try/pending boundaries', () => {
 		const d = deferred<string>();
 
 		function Content() @{
-			let &[data] = trackAsync(() => d.promise);
-			<p>{data}</p>
+			const data = trackAsync(() => d.promise);
+			<p>{data.value}</p>
 		}
 
 		function App() @{
@@ -250,8 +261,8 @@ describe('streaming try/pending boundaries', () => {
 		const d = deferred<string>();
 
 		function Content() @{
-			let &[data] = trackAsync(() => d.promise);
-			<p>{data}</p>
+			const data = trackAsync(() => d.promise);
+			<p>{data.value}</p>
 		}
 
 		function App() @{
@@ -286,8 +297,8 @@ describe('streaming try/pending boundaries', () => {
 		const d = deferred<string>();
 
 		function Content() @{
-			let &[data] = trackAsync(() => d.promise);
-			<p>{data}</p>
+			const data = trackAsync(() => d.promise);
+			<p>{data.value}</p>
 		}
 
 		function App() @{
@@ -329,13 +340,13 @@ describe('streaming try/pending boundaries', () => {
 describe('streaming nested and sibling boundaries', () => {
 	function makeNestedApp(d_outer: Deferred<string>, d_inner: Deferred<string>) {
 		function OuterData() @{
-			let &[data] = trackAsync(() => d_outer.promise);
-			<p class="outer">{data}</p>
+			const data = trackAsync(() => d_outer.promise);
+			<p class="outer">{data.value}</p>
 		}
 
 		function InnerData() @{
-			let &[data] = trackAsync(() => d_inner.promise);
-			<p class="inner">{data}</p>
+			const data = trackAsync(() => d_inner.promise);
+			<p class="inner">{data.value}</p>
 		}
 
 		function App() @{
@@ -396,9 +407,7 @@ describe('streaming nested and sibling boundaries', () => {
 		const result = render(App, { stream: sink });
 
 		d_outer.resolve('outer-done');
-		await d_outer.promise;
-		await Promise.resolve();
-		await Promise.resolve();
+		await flushed();
 
 		expect(chunks).toHaveLength(2);
 		const parent_chunk = chunks[1];
@@ -420,13 +429,13 @@ describe('streaming nested and sibling boundaries', () => {
 		const d_second = deferred<string>();
 
 		function First() @{
-			let &[data] = trackAsync(() => d_first.promise);
-			<p>{'first: ' + data}</p>
+			const data = trackAsync(() => d_first.promise);
+			<p>{'first: ' + data.value}</p>
 		}
 
 		function Second() @{
-			let &[data] = trackAsync(() => d_second.promise);
-			<p>{'second: ' + data}</p>
+			const data = trackAsync(() => d_second.promise);
+			<p>{'second: ' + data.value}</p>
 		}
 
 		function App() @{
@@ -448,9 +457,7 @@ describe('streaming nested and sibling boundaries', () => {
 		const result = render(App, { stream: sink });
 
 		d_second.resolve('B');
-		await d_second.promise;
-		await Promise.resolve();
-		await Promise.resolve();
+		await flushed();
 
 		expect(chunks).toHaveLength(2);
 		expect(chunks[1]).toContain('second: B');
@@ -468,16 +475,16 @@ describe('streaming nested and sibling boundaries', () => {
 		async () => {
 			function makeApp(ds: Deferred<string>[]) {
 				function A() @{
-					let &[data] = trackAsync(() => ds[0].promise);
-					<p>{'A:' + data}</p>
+					const data = trackAsync(() => ds[0].promise);
+					<p>{'A:' + data.value}</p>
 				}
 				function B() @{
-					let &[data] = trackAsync(() => ds[1].promise);
-					<p>{'B:' + data}</p>
+					const data = trackAsync(() => ds[1].promise);
+					<p>{'B:' + data.value}</p>
 				}
 				function C() @{
-					let &[data] = trackAsync(() => ds[2].promise);
-					<p>{'C:' + data}</p>
+					const data = trackAsync(() => ds[2].promise);
+					<p>{'C:' + data.value}</p>
 				}
 
 				function App() @{
@@ -540,8 +547,8 @@ describe('streaming root boundary', () => {
 		const d = deferred<string>();
 
 		function App() @{
-			let &[data] = trackAsync(() => d.promise);
-			<p>{'app: ' + data}</p>
+			const data = trackAsync(() => d.promise);
+			<p>{'app: ' + data.value}</p>
 		}
 
 		function RootPending() @{
@@ -568,8 +575,8 @@ describe('streaming with a document template', () => {
 		const d = deferred<string>();
 
 		function Content() @{
-			let &[data] = trackAsync(() => d.promise);
-			<p>{data}</p>
+			const data = trackAsync(() => d.promise);
+			<p>{data.value}</p>
 		}
 
 		function App() @{
@@ -612,14 +619,14 @@ describe('streaming head content', () => {
 		const d = deferred<string>();
 
 		function LateHead() @{
-			let &[data] = trackAsync(() => d.promise);
+			const data = trackAsync(() => d.promise);
 			<>
-				@if (data) {
+				@if (data.value) {
 					<>
 						<head>
-							<title>{'title:' + data}</title>
+							<title>{'title:' + data.value}</title>
 						</head>
-						<p class="has-head">{data}</p>
+						<p class="has-head">{data.value}</p>
 					</>
 				}
 			</>
@@ -670,18 +677,18 @@ describe('streaming CSS', () => {
 		}
 
 		function GateOne() @{
-			let &[ready] = trackAsync(() => d_gate.promise);
+			const ready = trackAsync(() => d_gate.promise);
 			<>
-				@if (ready) {
+				@if (ready.value) {
 					<LateStyled />
 				}
 			</>
 		}
 
 		function GateTwo() @{
-			let &[ready] = trackAsync(() => d_gate2.promise);
+			const ready = trackAsync(() => d_gate2.promise);
 			<>
-				@if (ready) {
+				@if (ready.value) {
 					<LateStyled />
 				}
 			</>
@@ -716,9 +723,7 @@ describe('streaming CSS', () => {
 		expect(chunks[0]).not.toContain('.late-styled');
 
 		d_gate.resolve(true);
-		await d_gate.promise;
-		await Promise.resolve();
-		await Promise.resolve();
+		await flushed();
 
 		expect(chunks).toHaveLength(2);
 		// the chunk carries the style it needs, ahead of its template