ripple 0.3.72 → 0.3.76

package/tests/client/html.test.tsrx

@@ -2,11 +2,9 @@ import { Fragment, flushSync, track } from 'ripple';
 
 describe('Fragment innerHTML', () => {
 	it('renders host innerHTML as content instead of an attribute', () => {
-		function App() {
-			return <>
-				const html = '<span>Host HTML</span>';
-				<code innerHTML={html} />
-			</>;
+		function App() @{
+			const html = '<span>Host HTML</span>';
+			<code innerHTML={html} />
 		}
 
 		render(App);
@@ -17,14 +15,14 @@ describe('Fragment innerHTML', () => {
 	});
 
 	it('renders spread innerHTML as content instead of an attribute', () => {
-		function App() {
-			return <>
-				let &[attrs] = track<{ innerHTML?: string }>({
-					innerHTML: '<span>Spread HTML</span>',
-				});
+		function App() @{
+			let &[attrs] = track<{ innerHTML?: string }>({
+				innerHTML: '<span>Spread HTML</span>',
+			});
+			<>
 				<code {...attrs} />
 				<button onClick={() => (attrs = { innerHTML: '<em>Updated HTML</em>' })}>{'Update'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -42,11 +40,9 @@ describe('Fragment innerHTML', () => {
 	});
 
 	it('uses the last innerHTML value when spreads and direct props are mixed', () => {
-		function App() {
-			return <>
-				const attrs = { innerHTML: '<span>Spread HTML</span>' };
-				<code {...attrs} innerHTML="<em>Direct HTML</em>" />
-			</>;
+		function App() @{
+			const attrs = { innerHTML: '<span>Spread HTML</span>' };
+			<code {...attrs} innerHTML="<em>Direct HTML</em>" />
 		}
 
 		render(App);
@@ -57,11 +53,9 @@ describe('Fragment innerHTML', () => {
 	});
 
 	it('renders static innerHTML fragments', () => {
-		function App() {
-			return <>
-				let str = '<div>Test</div>';
-				<Fragment innerHTML={str} />
-			</>;
+		function App() @{
+			let str = '<div>Test</div>';
+			<Fragment innerHTML={str} />
 		}
 
 		render(App);
@@ -69,18 +63,16 @@ describe('Fragment innerHTML', () => {
 	});
 
 	it('renders dynamic innerHTML fragments', () => {
-		function App() {
-			return <>
-				let &[str] = track('<div>Test</div>');
+		function App() @{
+			let &[str] = track('<div>Test</div>');
+			<>
 				<Fragment innerHTML={str} />
 				<button
 					onClick={() => {
 						str = '<div>Updated</div>';
 					}}
-				>
-					{'Update'}
-				</button>
-			</>;
+				>{'Update'}</button>
+			</>
 		}
 
 		render(App);
@@ -94,11 +86,9 @@ describe('Fragment innerHTML', () => {
 	});
 
 	it('renders static Fragment innerHTML', () => {
-		function App() {
-			return <>
-				const html = '<strong>Fragment HTML</strong>';
-				<Fragment innerHTML={html} />
-			</>;
+		function App() @{
+			const html = '<strong>Fragment HTML</strong>';
+			<Fragment innerHTML={html} />
 		}
 
 		render(App);
@@ -108,12 +98,12 @@ describe('Fragment innerHTML', () => {
 	});
 
 	it('updates dynamic Fragment innerHTML', () => {
-		function App() {
-			return <>
-				let &[html] = track('<span>First</span>');
+		function App() @{
+			let &[html] = track('<span>First</span>');
+			<>
 				<Fragment innerHTML={html} />
 				<button onClick={() => (html = '<em>Second</em>')}>{'Update'}</button>
-			</>;
+			</>
 		}
 
 		render(App);
@@ -130,13 +120,11 @@ describe('Fragment innerHTML', () => {
 	});
 
 	it('renders the correct namespace for child svg element when html is surrounded by <svg>', () => {
-		function App() {
-			return <>
-				let str = '<circle r="45" cx="50" cy="50" fill="red" />';
-				<svg height="100" width="100">
-					<Fragment innerHTML={str} />
-				</svg>
-			</>;
+		function App() @{
+			let str = '<circle r="45" cx="50" cy="50" fill="red" />';
+			<svg height="100" width="100">
+				<Fragment innerHTML={str} />
+			</svg>
 		}
 
 		render(App);
@@ -148,11 +136,11 @@ describe('Fragment innerHTML', () => {
 	it(
 		'renders the correct namespace for child math element when html is surrounded by <math>',
 		() => {
-			function App() {
-				return <>
-					let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
-					<math><Fragment innerHTML={str} /></math>
-				</>;
+			function App() @{
+				let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
+				<math>
+					<Fragment innerHTML={str} />
+				</math>
 			}
 
 			render(App);