ripple 0.3.127 → 0.4.0

package/tests/client/tsx.test.tsrx

@@ -162,13 +162,13 @@ describe('tsx expression', () => {
 
 	it('renders a tsx element with reactive expressions', () => {
 		function App() @{
-			let &[count] = track(0);
+			const count = track(0);
 			const el = <>
-				<div>{'count: ' + count}</div>
+				<div>{'count: ' + count.value}</div>
 			</>;
 			<>
 				{el}
-				<button onClick={() => count++}>{'increment'}</button>
+				<button onClick={() => count.value++}>{'increment'}</button>
 			</>
 		}
 		render(App);
@@ -181,15 +181,15 @@ describe('tsx expression', () => {
 
 	it('conditionally renders tsx elements', () => {
 		function App() @{
-			let &[show] = track(true);
+			const show = track(true);
 			const el = <div class="tsx-content">{'content'}</div>;
 			<>
-				@if (show) {
+				@if (show.value) {
 					<>
 						{el}
 					</>
 				}
-				<button onClick={() => (show = !show)}>{'toggle'}</button>
+				<button onClick={() => (show.value = !show.value)}>{'toggle'}</button>
 			</>
 		}
 		render(App);
@@ -205,7 +205,7 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx element passed as children prop', () => {
-		function Child(&{ children }) @{
+		function Child({ children }) @{
 			<div class="wrapper">{children}</div>
 		}
 
@@ -252,11 +252,11 @@ describe('tsx expression', () => {
 
 	it('renders tsx element with dynamic attribute values', () => {
 		function App() @{
-			let &[name] = track('initial');
-			const el = <div id={name} class={'cls-' + name}>{'content'}</div>;
+			const name = track('initial');
+			const el = <div id={name.value} class={'cls-' + name.value}>{'content'}</div>;
 			<>
 				{el}
-				<button onClick={() => (name = 'updated')}>{'update'}</button>
+				<button onClick={() => (name.value = 'updated')}>{'update'}</button>
 			</>
 		}
 
@@ -273,12 +273,12 @@ describe('tsx expression', () => {
 
 	it('renders tsx element with event handlers', () => {
 		function App() @{
-			let &[clicked] = track(false);
-			const el = <button onClick={() => (clicked = true)}>{'click'}</button>;
+			const clicked = track(false);
+			const el = <button onClick={() => (clicked.value = true)}>{'click'}</button>;
 			<>
 				{el}
 				<div class="status">
-					{clicked ? 'clicked' : 'not clicked'}
+					{clicked.value ? 'clicked' : 'not clicked'}
 				</div>
 			</>
 		}
@@ -293,11 +293,14 @@ describe('tsx expression', () => {
 
 	it('renders tsx element with boolean attributes', () => {
 		function App() @{
-			let &[isDisabled] = track(true);
-			const el = <button disabled={isDisabled}>{'submit'}</button>;
+			const isDisabled = track(true);
+			const el = <button disabled={isDisabled.value}>{'submit'}</button>;
 			<>
 				{el}
-				<button class="toggle" onClick={() => (isDisabled = !isDisabled)}>{'toggle'}</button>
+				<button
+					class="toggle"
+					onClick={() => (isDisabled.value = !isDisabled.value)}
+				>{'toggle'}</button>
 			</>
 		}
 
@@ -311,11 +314,11 @@ describe('tsx expression', () => {
 
 	it('renders tsx element with style attribute', () => {
 		function App() @{
-			let &[color] = track('red');
-			const el = <div style={{ color }}>{'content'}</div>;
+			const color = track('red');
+			const el = <div style={{ color: color.value }}>{'content'}</div>;
 			<>
 				{el}
-				<button onClick={() => (color = 'blue')}>{'change color'}</button>
+				<button onClick={() => (color.value = 'blue')}>{'change color'}</button>
 			</>
 		}
 
@@ -329,18 +332,18 @@ describe('tsx expression', () => {
 
 	it('renders tsx element with multiple dynamic attributes', () => {
 		function App() @{
-			let &[index] = track(0);
+			const index = track(0);
 			const el = <div
-				id={'item-' + index}
-				class={'item pos-' + index}
-				data-index={index}
-				title={'Item ' + index}
+				id={'item-' + index.value}
+				class={'item pos-' + index.value}
+				data-index={index.value}
+				title={'Item ' + index.value}
 			>
-				{'Item ' + index}
+				{'Item ' + index.value}
 			</div>;
 			<>
 				{el}
-				<button onClick={() => index++}>{'next'}</button>
+				<button onClick={() => index.value++}>{'next'}</button>
 			</>
 		}
 
@@ -360,7 +363,7 @@ describe('tsx expression', () => {
 	});
 
 	it('renders fragment shorthand passed directly as component prop', () => {
-		function Wrapper(&{ content }) @{
+		function Wrapper({ content }) @{
 			<div class="wrapper">{content}</div>
 		}
 
@@ -376,7 +379,7 @@ describe('tsx expression', () => {
 	});
 
 	it('renders fragment shorthand passed directly as children prop', () => {
-		function Card(&{ title, children }) @{
+		function Card({ title, children }) @{
 			<div class="card">
 				<h2 class="card-title">{title}</h2>
 				<div class="card-body">{children}</div>
@@ -435,7 +438,7 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx from factory function passed to component', () => {
-		function List(&{ renderItem, items }) @{
+		function List({ renderItem, items }) @{
 			<ul class="list">
 				@for (const item of items) {
 					<>
@@ -472,11 +475,11 @@ describe('tsx expression', () => {
 		}
 
 		function App() @{
-			let &[count] = track(0);
-			const counterElement = createCounter('Count:', () => count);
+			const count = track(0);
+			const counterElement = createCounter('Count:', () => count.value);
 			<>
 				{counterElement}
-				<button onClick={() => count++}>{'increment'}</button>
+				<button onClick={() => count.value++}>{'increment'}</button>
 			</>
 		}
 
@@ -617,7 +620,7 @@ describe('tsx expression', () => {
 	});
 
 	it('renders tsx as prop with fallback in component', () => {
-		function Alert(&{ icon, message }) @{
+		function Alert({ icon, message }) @{
 			<div class="alert">
 				{icon}
 				<span class="message">{message}</span>
@@ -677,11 +680,11 @@ describe('tsx expression', () => {
 		}
 
 		function App() @{
-			let &[status] = track('default');
+			const status = track('default');
 			<>
-				{createContent(status)}
-				<button class="set-success" onClick={() => (status = 'success')}>{'Success'}</button>
-				<button class="set-error" onClick={() => (status = 'error')}>{'Error'}</button>
+				{createContent(status.value)}
+				<button class="set-success" onClick={() => (status.value = 'success')}>{'Success'}</button>
+				<button class="set-error" onClick={() => (status.value = 'error')}>{'Error'}</button>
 			</>
 		}
 
@@ -736,13 +739,13 @@ describe('tsrx expression', () => {
 
 	it('updates reactive expressions inside native fragments', () => {
 		function App() @{
-			let &[count] = track(0);
+			const count = track(0);
 			const el = <>
-				<div>{'count: ' + count}</div>
+				<div>{'count: ' + count.value}</div>
 			</>;
 			<>
 				{el}
-				<button onClick={() => count++}>{'increment'}</button>
+				<button onClick={() => count.value++}>{'increment'}</button>
 			</>
 		}
 

package/tests/client/url/url.derived.test.tsrx

@@ -4,13 +4,13 @@ describe('RippleURL > derived', () => {
 	it('handles reactive computed properties based on URL', () => {
 		function URLTest() @{
 			const url = RippleURL('https://example.com/users/123?tab=profile');
-			let &[userId] = track(() => url.pathname.split('/').pop());
-			let &[activeTab] = track(() => url.searchParams.get('tab'));
+			const userId = track(() => url.pathname.split('/').pop());
+			const activeTab = track(() => url.searchParams.get('tab'));
 			<>
 				<button onClick={() => (url.pathname = '/users/456')}>{'Change User'}</button>
 				<button onClick={() => url.searchParams.set('tab', 'settings')}>{'Change Tab'}</button>
-				<pre>{`User ID: ${userId}`}</pre>
-				<pre>{`Active Tab: ${activeTab}`}</pre>
+				<pre>{`User ID: ${userId.value}`}</pre>
+				<pre>{`Active Tab: ${activeTab.value}`}</pre>
 			</>
 		}
 
@@ -57,10 +57,10 @@ describe('RippleURL > derived', () => {
 		}
 
 		function ChildB({ url }: { url: RippleURL }) @{
-			let &[count] = track(() => url.searchParams.get('count'));
+			const count = track(() => url.searchParams.get('count'));
 			<>
 				<pre>{url.href}</pre>
-				<pre>{count}</pre>
+				<pre>{count.value}</pre>
 			</>
 		}
 

package/tests/client/url-search-params/url-search-params.derived.test.tsrx

@@ -4,15 +4,15 @@ describe('RippleURLSearchParams > derived', () => {
 	it('handles reactive computed properties based on search params', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('page=1&limit=10');
-			let &[page] = track(() => parseInt(params.get('page') || '1', 10));
-			let &[limit] = track(() => parseInt(params.get('limit') || '10', 10));
-			let &[offset] = track(() => (page - 1) * limit);
+			const page = track(() => parseInt(params.get('page') || '1', 10));
+			const limit = track(() => parseInt(params.get('limit') || '10', 10));
+			const offset = track(() => (page.value - 1) * limit.value);
 			<>
 				<button onClick={() => params.set('page', '2')}>{'next page'}</button>
 				<button onClick={() => params.set('page', '1')}>{'first page'}</button>
-				<pre>{`Page: ${page}`}</pre>
-				<pre>{`Limit: ${limit}`}</pre>
-				<pre>{`Offset: ${offset}`}</pre>
+				<pre>{`Page: ${page.value}`}</pre>
+				<pre>{`Limit: ${limit.value}`}</pre>
+				<pre>{`Offset: ${offset.value}`}</pre>
 			</>
 		}
 
@@ -62,8 +62,8 @@ describe('RippleURLSearchParams > derived', () => {
 		}
 
 		function ChildB({ params }: { params: RippleURLSearchParams }) @{
-			let &[count] = track(() => params.get('count'));
-			<pre>{count}</pre>
+			const count = track(() => params.get('count'));
+			<pre>{count.value}</pre>
 		}
 
 		render(ParentTest);

package/tests/client/url-search-params/url-search-params.iteration.test.tsrx

@@ -4,10 +4,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles keys method with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let &[keys] = track(() => Array.from(params.keys()));
+			const keys = track(() => Array.from(params.keys()));
 			<>
 				<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
-				<pre>{JSON.stringify(keys)}</pre>
+				<pre>{JSON.stringify(keys.value)}</pre>
 			</>
 		}
 
@@ -28,10 +28,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles values method with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let &[values] = track(() => Array.from(params.values()));
+			const values = track(() => Array.from(params.values()));
 			<>
 				<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
-				<pre>{JSON.stringify(values)}</pre>
+				<pre>{JSON.stringify(values.value)}</pre>
 			</>
 		}
 
@@ -52,10 +52,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles entries method with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let &[entries] = track(() => Array.from(params.entries()));
+			const entries = track(() => Array.from(params.entries()));
 			<>
 				<button onClick={() => params.append('new', 'value')}>{'add param'}</button>
-				<pre>{JSON.stringify(entries)}</pre>
+				<pre>{JSON.stringify(entries.value)}</pre>
 			</>
 		}
 
@@ -78,10 +78,10 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles Symbol.iterator with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let &[entries] = track(() => Array.from(params));
+			const entries = track(() => Array.from(params));
 			<>
 				<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
-				<pre>{JSON.stringify(entries)}</pre>
+				<pre>{JSON.stringify(entries.value)}</pre>
 			</>
 		}
 
@@ -130,7 +130,7 @@ describe('RippleURLSearchParams > iteration', () => {
 	it('handles forEach iteration', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('a=1&b=2&c=3');
-			let &[sum] = track(() => {
+			const sum = track(() => {
 				let total = 0;
 				// Access the params reactively through entries
 				for (const [key, value] of params.entries()) {
@@ -140,7 +140,7 @@ describe('RippleURLSearchParams > iteration', () => {
 			});
 			<>
 				<button onClick={() => params.append('d', '4')}>{'add d=4'}</button>
-				<pre>{sum}</pre>
+				<pre>{sum.value}</pre>
 			</>
 		}
 

package/tests/client/url-search-params/url-search-params.mutation.test.tsrx

@@ -30,11 +30,11 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles append with multiple values for same key', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar');
-			let &[allFoo] = track(() => params.getAll('foo'));
+			const allFoo = track(() => params.getAll('foo'));
 			<>
 				<button onClick={() => params.append('foo', 'baz')}>{'append foo'}</button>
 				<pre>{params.toString()}</pre>
-				<pre>{JSON.stringify(allFoo)}</pre>
+				<pre>{JSON.stringify(allFoo.value)}</pre>
 			</>
 		}
 
@@ -112,11 +112,11 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles delete when key does not exist', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar');
-			let &[reactiveSize] = track(() => params.size);
+			const reactiveSize = track(() => params.size);
 			<>
 				<button onClick={() => params.delete('nonexistent')}>{'delete nonexistent'}</button>
 				<pre>{params.toString()}</pre>
-				<pre>{reactiveSize}</pre>
+				<pre>{reactiveSize.value}</pre>
 			</>
 		}
 
@@ -174,11 +174,11 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles set with multiple existing values', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&foo=baz&foo=qux');
-			let &[allFoo] = track(() => params.getAll('foo'));
+			const allFoo = track(() => params.getAll('foo'));
 			<>
 				<button onClick={() => params.set('foo', 'single')}>{'set foo'}</button>
 				<pre>{params.toString()}</pre>
-				<pre>{JSON.stringify(allFoo)}</pre>
+				<pre>{JSON.stringify(allFoo.value)}</pre>
 			</>
 		}
 
@@ -201,10 +201,10 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles set when value is the same', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar');
-			let &[reactiveString] = track(() => params.toString());
+			const reactiveString = track(() => params.toString());
 			<>
 				<button onClick={() => params.set('foo', 'bar')}>{'set same value'}</button>
-				<pre>{reactiveString}</pre>
+				<pre>{reactiveString.value}</pre>
 				<pre>{params.size}</pre>
 			</>
 		}
@@ -319,12 +319,12 @@ describe('RippleURLSearchParams > mutation', () => {
 	it('handles duplicate keys with different values', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams();
-			let &[tags] = track(() => params.getAll('tag'));
+			const tags = track(() => params.getAll('tag'));
 			<>
 				<button onClick={() => params.append('tag', 'javascript')}>{'add js'}</button>
 				<button onClick={() => params.append('tag', 'typescript')}>{'add ts'}</button>
 				<button onClick={() => params.append('tag', 'ripple')}>{'add ripple'}</button>
-				<pre>{JSON.stringify(tags)}</pre>
+				<pre>{JSON.stringify(tags.value)}</pre>
 				<pre>{params.size}</pre>
 			</>
 		}

package/tests/client/url-search-params/url-search-params.retrieval.test.tsrx

@@ -4,12 +4,12 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles get operation with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&baz=qux');
-			let &[foo] = track(() => params.get('foo'));
-			let &[baz] = track(() => params.get('baz'));
+			const foo = track(() => params.get('foo'));
+			const baz = track(() => params.get('baz'));
 			<>
 				<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
-				<pre>{foo}</pre>
-				<pre>{baz}</pre>
+				<pre>{foo.value}</pre>
+				<pre>{baz.value}</pre>
 			</>
 		}
 
@@ -32,8 +32,8 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles get for nonexistent key', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar');
-			let &[nonexistent] = track(() => params.get('nonexistent'));
-			<pre>{String(nonexistent)}</pre>
+			const nonexistent = track(() => params.get('nonexistent'));
+			<pre>{String(nonexistent.value)}</pre>
 		}
 
 		render(URLTest);
@@ -44,10 +44,10 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles getAll operation with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&foo=baz');
-			let &[allFoo] = track(() => params.getAll('foo'));
+			const allFoo = track(() => params.getAll('foo'));
 			<>
 				<button onClick={() => params.append('foo', 'qux')}>{'append foo'}</button>
-				<pre>{JSON.stringify(allFoo)}</pre>
+				<pre>{JSON.stringify(allFoo.value)}</pre>
 			</>
 		}
 
@@ -68,13 +68,13 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles has operation with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar');
-			let &[hasFoo] = track(() => params.has('foo'));
-			let &[hasBaz] = track(() => params.has('baz'));
+			const hasFoo = track(() => params.has('foo'));
+			const hasBaz = track(() => params.has('baz'));
 			<>
 				<button onClick={() => params.append('baz', 'qux')}>{'add baz'}</button>
 				<button onClick={() => params.delete('foo')}>{'delete foo'}</button>
-				<pre>{hasFoo.toString()}</pre>
-				<pre>{hasBaz.toString()}</pre>
+				<pre>{hasFoo.value.toString()}</pre>
+				<pre>{hasBaz.value.toString()}</pre>
 			</>
 		}
 
@@ -105,12 +105,12 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles has with specific value', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar&foo=baz');
-			let &[hasBarValue] = track(() => params.has('foo', 'bar'));
-			let &[hasQuxValue] = track(() => params.has('foo', 'qux'));
+			const hasBarValue = track(() => params.has('foo', 'bar'));
+			const hasQuxValue = track(() => params.has('foo', 'qux'));
 			<>
 				<button onClick={() => params.append('foo', 'qux')}>{'add qux'}</button>
-				<pre>{hasBarValue.toString()}</pre>
-				<pre>{hasQuxValue.toString()}</pre>
+				<pre>{hasBarValue.value.toString()}</pre>
+				<pre>{hasQuxValue.value.toString()}</pre>
 			</>
 		}
 
@@ -133,11 +133,11 @@ describe('RippleURLSearchParams > retrieval', () => {
 	it('handles size property with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar');
-			let &[size] = track(() => params.size);
+			const size = track(() => params.size);
 			<>
 				<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
 				<button onClick={() => params.delete('foo')}>{'delete'}</button>
-				<pre>{size}</pre>
+				<pre>{size.value}</pre>
 			</>
 		}
 

package/tests/client/url-search-params/url-search-params.serialization.test.tsrx

@@ -4,10 +4,10 @@ describe('RippleURLSearchParams > serialization', () => {
 	it('handles toString method with reactivity', () => {
 		function URLTest() @{
 			const params = RippleURLSearchParams('foo=bar');
-			let &[string] = track(() => params.toString());
+			const string = track(() => params.toString());
 			<>
 				<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
-				<pre>{string}</pre>
+				<pre>{string.value}</pre>
 			</>
 		}
 

package/tests/hydration/basic.test.js

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { flushSync } from 'ripple';
+import { flushSync, hydrate } from 'ripple';
+import { render } from 'ripple/server';
 import { hydrateComponent, container } from '../setup-hydration.js';
 
 // Import server-compiled components
@@ -13,6 +14,26 @@ describe('hydration > basic', () => {
 		expect(container.innerHTML).toBeHtml('<div>Hello World</div>');
 	});
 
+	it('hydrates without a root boundary, adopting the server DOM', async () => {
+		const { body } = await render(ServerComponents.ParentWithChild);
+		expect(body.startsWith('<!--[-->')).toBe(true);
+		container.innerHTML = body;
+		const parent = container.querySelector('.parent');
+
+		const unmount = hydrate(ClientComponents.ParentWithChild, {
+			target: container,
+			rootBoundary: false,
+		});
+
+		expect(container.querySelector('.parent')).toBe(parent);
+		expect(container.innerHTML).toBeHtml(
+			'<div class="parent"><span class="child">Child content</span></div>',
+		);
+
+		unmount();
+		expect(container.querySelector('.parent')).toBeNull();
+	});
+
 	it('hydrates multiple static elements', async () => {
 		await hydrateComponent(ServerComponents.MultipleElements, ClientComponents.MultipleElements);
 		expect(container.innerHTML).toBeHtml(
@@ -209,6 +230,21 @@ describe('hydration > basic', () => {
 		expect(textIndex).toBeLessThan(endMarker);
 	});
 
+	it('restores typed text children hydrated from empty server text', async () => {
+		await hydrateComponent(
+			ServerComponents.TypedTextPropWithToggle,
+			ClientComponents.TypedTextPropWithToggle,
+		);
+
+		expect(container.querySelector('.text-prop')?.textContent).toBe('');
+
+		/** @type {any} */ (container.querySelector('.show-text'))?.click();
+		flushSync();
+
+		// A string-typed child is a text node, with no hydration markers.
+		expect(container.querySelector('.text-prop')?.innerHTML).toBe('hello');
+	});
+
 	it('hydrates static child component followed by sibling content', async () => {
 		await hydrateComponent(
 			ServerComponents.StaticChildWithSiblings,
@@ -294,3 +330,40 @@ describe('hydration > text runs with call-containing primitives', () => {
 		expect(container.textContent).toBe('fetchedafter-call');
 	});
 });
+
+describe('primitive text calls', () => {
+	it('hydrates merged primitive calls and updates their existing text node', async () => {
+		const { unmount } = await hydrateComponent(
+			ServerComponents.PrimitiveTextCalls,
+			ClientComponents.PrimitiveTextCalls,
+		);
+		try {
+			const node = container.querySelector('.primitive-calls');
+			const text = node.firstChild;
+			expect(node.textContent).toBe('sum: 4; big: 2');
+			container.querySelector('button').click();
+			flushSync();
+			expect(node.textContent).toBe('sum: 6; big: 3');
+			expect(node.firstChild).toBe(text);
+		} finally {
+			unmount();
+		}
+	});
+
+	it('hydrates elements returned by shadowed built-ins', async () => {
+		const { unmount } = await hydrateComponent(
+			ServerComponents.ShadowedTextCalls,
+			ClientComponents.ShadowedTextCalls,
+		);
+		try {
+			expect([...container.querySelectorAll('b')].map((node) => node.textContent)).toEqual([
+				'string',
+				'number',
+				'bigint',
+				'date',
+			]);
+		} finally {
+			unmount();
+		}
+	});
+});