ripple 0.2.208 → 0.2.210

package/tests/client/basic/basic.errors.test.ripple

@@ -61,6 +61,34 @@ describe('basic client > errors', () => {
 		}).toThrow('Unclosed tag');
 	});
 
+	it('should throw error for interpolating children as text', () => {
+		const code = `
+			export component Layout({ children }) {
+				<div>{children}</div>
+			}
+		`;
+
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow(
+			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
+		);
+	});
+
+	it('should throw error for interpolating props.children as text', () => {
+		const code = `
+			export component Layout(props) {
+				<div>{props.children}</div>
+			}
+		`;
+
+		expect(() => {
+			compile(code, 'test.ripple');
+		}).toThrow(
+			'`children` cannot be rendered using text interpolation. Use `<children />` instead.',
+		);
+	});
+
 	it('errors on mutating tracked value inside computed track() evaluation', () => {
 		component Basic() {
 			let count = track(0);

package/tests/client/basic/basic.events.test.ripple

@@ -42,9 +42,12 @@ describe('basic client > events', () => {
 			let bubbleClicks = track(0);
 
 			<div
-				onClick={{handleEvent: () => {
-					@captureClicks++;
-				}, capture: true}}
+				onClick={{
+					handleEvent: () => {
+						@captureClicks++;
+					},
+					capture: true,
+				}}
 			>
 				<button
 					onClick={() => {

package/tests/client/basic/basic.utilities.test.ripple

@@ -3,7 +3,7 @@ import { track, effect, untrack, tick } from 'ripple';
 describe('basic client > utilities', () => {
 	it('tick function', async () => {
 		let resolve: () => void;
-		const promise = new Promise<void>((res) => resolve = res);
+		const promise = new Promise<void>((res) => (resolve = res));
 
 		component Basic() {
 			let value = track(0);

package/tests/client/compiler/compiler.regex.test.ripple

@@ -59,16 +59,18 @@ describe('compiler > regex', () => {
 			// Mix of regex parsing and legitimate JSX
 			let paragraphs = htmlString.match(/<p[^>]*>.*?<\/p>/g);
 			let cleaned = htmlString.replace(/<\/?[^>]+>/g, '');
-			let splitArray = htmlString.split(/<\/?\w+>/g).filter(s => s.trim());
+			let splitArray = htmlString.split(/<\/?\w+>/g).filter((s) => s.trim());
 
-			<div class='container'>
-				<span class='result'>{String(paragraphs)}</span>
-				<span class='cleaned'>{cleaned}</span>
+			<div class="container">
+				<span class="result">{String(paragraphs)}</span>
+				<span class="cleaned">{cleaned}</span>
 				<p>{'This is real JSX'}</p>
-				<div><span>
-					{'Split result: '}
-					{splitArray.join(', ')}
-				</span></div>
+				<div>
+					<span>
+						{'Split result: '}
+						{splitArray.join(', ')}
+					</span>
+				</div>
 			</div>
 		}
 

package/tests/client/composite/composite.generics.test.ripple

@@ -201,8 +201,11 @@ describe('composite > generics', () => {
 					this.map = new Map<Key, Value>();
 				}
 			}
-			const gg = new Mapper<// key type
-			string /* value type */, number>();
+			const gg = new Mapper<
+				// key type
+				string /* value type */,
+				number
+			>();
 
 			// 33. Map of generic instance as key
 			const mm = new Map<TrackedArray<number>, TrackedArray<string>>();

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

@@ -1,4 +1,4 @@
-import type { Props, PropsWithChildren, PropsNoChildren, PropsWithExtras } from 'ripple';
+import type { PropsWithExtras } from 'ripple';
 import { flushSync, track, createRefKey, trackSplit } from 'ripple';
 
 describe('dynamic DOM elements', () => {
@@ -592,4 +592,33 @@ describe('dynamic DOM elements', () => {
 		expect(outerScopes).toHaveLength(1);
 		expect(innerScopes).toHaveLength(0);
 	});
+
+	it('should remove and add back a text node in a conditional statement with a tracked', () => {
+		component App() {
+			let b = track(true);
+			<div>
+				if (@b) {
+					{'Inside if'}
+				}
+			</div>
+			<button onClick={() => (@b = !@b)}>{'Toggle b'}</button>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.textContent).toBe('Inside if');
+
+		button.click();
+		flushSync();
+
+		expect(div.textContent).toBe('');
+
+		button.click();
+		flushSync();
+
+		expect(div.textContent).toBe('Inside if');
+	});
 });

package/tests/client/function-overload-import.ripple

@@ -1,10 +1,9 @@
-export function test(arg: string): string
-export function test(arg: number): string
-
+export function test(arg: string): string;
+export function test(arg: number): string;
 export function test(arg: string | number): string {
-  if (typeof arg === 'string') {
-    return arg;
-  }
+	if (typeof arg === 'string') {
+		return arg;
+	}
 
-  return arg.toString();
+	return arg.toString();
 }

package/tests/client/html.test.ripple

@@ -57,7 +57,6 @@ describe('html directive', () => {
 				let str = '<mi>x</mi><mo>+</mo><mi>y</mi>';
 
 				<math>{html str}</math>
-
 			}
 
 			render(App);

package/tests/client/object.test.ripple

@@ -4,7 +4,7 @@ import { TRACKED_OBJECT } from '../../src/runtime/internal/client/constants.js';
 describe('TrackedObject', () => {
 	it('makes new properties reactive', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject<{ a: number }>({a: -1});
+			const obj = new TrackedObject<{ a: number }>({ a: -1 });
 
 			obj.a = 0;
 
@@ -60,7 +60,7 @@ describe('TrackedObject', () => {
 
 	it('checks if property exists via the has trap', () => {
 		component ObjectTest() {
-			const obj = new TrackedObject<{ a: number; b: number }>({ a: - 1, b: 1 });
+			const obj = new TrackedObject<{ a: number; b: number }>({ a: -1, b: 1 });
 
 			obj.a = 0;
 

package/tests/client/portal.test.ripple

@@ -54,7 +54,7 @@ describe('Portal', () => {
 				</Portal>
 			}
 
-			<button onClick={() => @open = false}>{'Close'}</button>
+			<button onClick={() => (@open = false)}>{'Close'}</button>
 		}
 
 		render(TestPortal);
@@ -78,13 +78,13 @@ describe('Portal', () => {
 				<Portal target={document.body}>
 					<div class="test-portal">
 						{'Content'}
-						<button onClick={() => @open = false}>{'Close'}</button>
+						<button onClick={() => (@open = false)}>{'Close'}</button>
 					</div>
 				</Portal>
 			}
 
 			if (!@open) {
-				<button onClick={() => @open = true}>{'Open'}</button>
+				<button onClick={() => (@open = true)}>{'Open'}</button>
 			}
 		}