ripple 0.2.151 → 0.2.153

package/tests/client/object.test.ripple

@@ -2,163 +2,199 @@ import { flushSync, TrackedObject } from 'ripple';
 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; }>({});
+	it('makes new properties reactive', () => {
+		component ObjectTest() {
+			const obj = new TrackedObject<{ a: number }>({});
 
-      obj.a = 0;
+			obj.a = 0;
 
-      <pre>{obj.a}</pre>
-      <button onClick={() => { obj.a++; }}>{'Increment A'}</button>
-    }
+			<pre>{obj.a}</pre>
+			<button
+				onClick={() => {
+					obj.a++;
+				}}
+			>
+				{'Increment A'}
+			</button>
+		}
 
-    render(ObjectTest);
+		render(ObjectTest);
 
-    const pre1 = container.querySelectorAll('pre')[0];
-    const button = container.querySelectorAll('button')[0 ];
+		const pre1 = container.querySelectorAll('pre')[0];
+		const button = container.querySelectorAll('button')[0];
 
-    expect(pre1.textContent).toBe('0');
+		expect(pre1.textContent).toBe('0');
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(pre1.textContent).toBe('1');
-  });
+		expect(pre1.textContent).toBe('1');
+	});
 
-  it('makes existing object properties reactive', () => {
-    component ObjectTest() {
-      const obj = new TrackedObject({ a: 0 });
+	it('makes existing object properties reactive', () => {
+		component ObjectTest() {
+			const obj = new TrackedObject({ a: 0 });
 
-      <pre>{obj.a}</pre>
-      <button onClick={() => { obj.a++; }}>{'Increment A'}</button>
-    }
+			<pre>{obj.a}</pre>
+			<button
+				onClick={() => {
+					obj.a++;
+				}}
+			>
+				{'Increment A'}
+			</button>
+		}
 
-    render(ObjectTest);
+		render(ObjectTest);
 
-    const pre1 = container.querySelectorAll('pre')[0];
-    const button = container.querySelectorAll('button')[0 ];
+		const pre1 = container.querySelectorAll('pre')[0];
+		const button = container.querySelectorAll('button')[0];
 
-    expect(pre1.textContent).toBe('0');
+		expect(pre1.textContent).toBe('0');
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(pre1.textContent).toBe('1');
-  });
+		expect(pre1.textContent).toBe('1');
+	});
 
-  it('checks if property exists via the has trap', () => {
-    component ObjectTest() {
-      const obj = new TrackedObject<{ a: number; b: number; }>({b: 1});
+	it('checks if property exists via the has trap', () => {
+		component ObjectTest() {
+			const obj = new TrackedObject<{ a: number; b: number }>({ b: 1 });
 
-      obj.a = 0;
+			obj.a = 0;
 
-      <pre>{'a' in obj && 'b' in obj}</pre>
-    }
+			<pre>{'a' in obj && 'b' in obj}</pre>
+		}
 
-    render(ObjectTest);
+		render(ObjectTest);
 
-    const pre1 = container.querySelectorAll('pre')[0];
+		const pre1 = container.querySelectorAll('pre')[0];
 
-    expect(pre1.textContent).toBe('true');
-  });
+		expect(pre1.textContent).toBe('true');
+	});
 
-  it('deletes properties via the delete trap', () => {
-    component ObjectTest() {
-      const obj = new TrackedObject<{ a?: number; b: number; }>({a: 0, b: 1});
+	it('deletes properties via the delete trap', () => {
+		component ObjectTest() {
+			const obj = new TrackedObject<{ a?: number; b: number }>({ a: 0, b: 1 });
 
-      <pre>{String(obj.a)}</pre>
-      <button onClick={() => { delete obj.a; }}>{'Delete A'}</button>
-    }
+			<pre>{String(obj.a)}</pre>
+			<button
+				onClick={() => {
+					delete obj.a;
+				}}
+			>
+				{'Delete A'}
+			</button>
+		}
 
-    render(ObjectTest);
+		render(ObjectTest);
 
-    const pre1 = container.querySelectorAll('pre')[0];
-    const button = container.querySelectorAll('button')[0 ];
+		const pre1 = container.querySelectorAll('pre')[0];
+		const button = container.querySelectorAll('button')[0];
 
-    expect(pre1.textContent).toBe('0');
+		expect(pre1.textContent).toBe('0');
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(pre1.textContent).toBe('undefined');
-  });
+		expect(pre1.textContent).toBe('undefined');
+	});
 
-  it('checks if non-existent property is reactive when added later', () => {
-    component ObjectTest() {
-      const obj = new TrackedObject<{ a?: number; }>({});
+	it('checks if non-existent property is reactive when added later', () => {
+		component ObjectTest() {
+			const obj = new TrackedObject<{ a?: number }>({});
 
-      <pre>{String(obj.a)}  </pre>
-      <button onClick={() => { obj.a = 1; }}>{'Add A'}</button>
-    }
+			<pre>{String(obj.a)}</pre>
+			<button
+				onClick={() => {
+					obj.a = 1;
+				}}
+			>
+				{'Add A'}
+			</button>
+		}
 
-    render(ObjectTest);
+		render(ObjectTest);
 
-    const pre1 = container.querySelectorAll('pre')[0];
-    const button = container.querySelectorAll('button')[0 ];
+		const pre1 = container.querySelectorAll('pre')[0];
+		const button = container.querySelectorAll('button')[0];
 
-    expect(pre1.textContent).toBe('undefined');
+		expect(pre1.textContent).toBe('undefined');
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    expect(pre1.textContent).toBe('1');
-  });
+		expect(pre1.textContent).toBe('1');
+	});
 
-  it('checks that deeply nested objects are not proxied or reactive', () => {
-    component ObjectTest() {
-      const obj = new TrackedObject({ a: { b: 1 } });
+	it('checks that deeply nested objects are not proxied or reactive', () => {
+		component ObjectTest() {
+			const obj = new TrackedObject({ a: { b: 1 } });
 
-      <pre>{String(obj.a.b)}</pre>
-      <button onClick={() => { obj.a.b++; }}>{'Increment B'}</button>
-    }
+			<pre>{String(obj.a.b)}</pre>
+			<button
+				onClick={() => {
+					obj.a.b++;
+				}}
+			>
+				{'Increment B'}
+			</button>
+		}
 
-    render(ObjectTest);
+		render(ObjectTest);
 
-    const pre1 = container.querySelectorAll('pre')[0];
-    const button = container.querySelectorAll('button')[0 ];
+		const pre1 = container.querySelectorAll('pre')[0];
+		const button = container.querySelectorAll('button')[0];
 
-    expect(pre1.textContent).toBe('1');
+		expect(pre1.textContent).toBe('1');
 
-    button.click();
-    flushSync();
+		button.click();
+		flushSync();
 
-    // remains unchanged
-    expect(pre1.textContent).toBe('1');
-  });
+		// remains unchanged
+		expect(pre1.textContent).toBe('1');
+	});
 
-  it('checks if TRACKED_OBJECT symbol is present on TrackedObject instances', () => {
-    component ObjectTest() {
-      const obj = new TrackedObject({ a: 0 });
+	it('checks if TRACKED_OBJECT symbol is present on TrackedObject instances', () => {
+		component ObjectTest() {
+			const obj = new TrackedObject({ a: 0 });
 
-      expect(obj[TRACKED_OBJECT]).toBe(true);
-    }
-  });
+			expect(obj[TRACKED_OBJECT]).toBe(true);
+		}
+	});
 
-  it('uses the hash syntax for creating TrackedObject', () => {
-    component ObjectTest() {
-      const obj = #{ a: 0, b: 1, c: { d: {e: 8} } };
+	it('uses the hash syntax for creating TrackedObject', () => {
+		component ObjectTest() {
+			const obj = #{ a: 0, b: 1, c: { d: { e: 8 } } };
 
-      <pre>{obj.a}</pre>
-      <pre>{TRACKED_OBJECT in obj}</pre>
-      <pre>{JSON.stringify(obj)}</pre>
-      <button onClick={() => { obj.a++; }}>{'Increment A'}</button>
-    }
+			<pre>{obj.a}</pre>
+			<pre>{TRACKED_OBJECT in obj}</pre>
+			<pre>{JSON.stringify(obj)}</pre>
+			<button
+				onClick={() => {
+					obj.a++;
+				}}
+			>
+				{'Increment A'}
+			</button>
+		}
+
+		render(ObjectTest);
+
+		const pre1 = container.querySelectorAll('pre')[0];
+		const pre2 = container.querySelectorAll('pre')[1];
+		const pre3 = container.querySelectorAll('pre')[2];
+		const button = container.querySelectorAll('button')[0];
 
-    render(ObjectTest);
+		expect(pre1.textContent).toBe('0');
+		expect(pre2.textContent).toBe('true');
+		expect(pre3.textContent).toBe('{"a":0,"b":1,"c":{"d":{"e":8}}}');
 
-    const pre1 = container.querySelectorAll('pre')[0];
-    const pre2 = container.querySelectorAll('pre')[1];
-    const pre3 = container.querySelectorAll('pre')[2];
-    const button = container.querySelectorAll('button')[0 ];
-
-    expect(pre1.textContent).toBe('0');
-    expect(pre2.textContent).toBe('true');
-    expect(pre3.textContent).toBe('{"a":0,"b":1,"c":{"d":{"e":8}}}');
-
-    button.click();
-    flushSync();
-
-    expect(pre1.textContent).toBe('1');
-    expect(pre3.textContent).toBe('{"a":1,"b":1,"c":{"d":{"e":8}}}');
-  })
+		button.click();
+		flushSync();
+
+		expect(pre1.textContent).toBe('1');
+		expect(pre3.textContent).toBe('{"a":1,"b":1,"c":{"d":{"e":8}}}');
+	});
 });

package/tests/client/portal.test.ripple

@@ -4,7 +4,7 @@ describe('Portal', () => {
 	afterEach(() => {
 		// Clean up any leftover portal content from document.body
 		const portals = document.body.querySelectorAll('.test-portal');
-		portals.forEach(el => el.remove());
+		portals.forEach((el) => el.remove());
 	});
 
 	it('renders portal content to target element', () => {
@@ -12,7 +12,9 @@ describe('Portal', () => {
 		document.body.appendChild(target);
 
 		component TestPortal() {
-			<Portal target={target}><div class='test-portal'>{'Portal works!'}</div></Portal>
+			<Portal {target}>
+				<div class="test-portal">{'Portal works!'}</div>
+			</Portal>
 		}
 
 		render(TestPortal);
@@ -27,7 +29,9 @@ describe('Portal', () => {
 
 	it('renders portal content to document.body', () => {
 		component TestPortal() {
-			<Portal target={document.body}><div class='test-portal'>{'In document.body!'}</div></Portal>
+			<Portal target={document.body}>
+				<div class="test-portal">{'In document.body!'}</div>
+			</Portal>
 		}
 
 		render(TestPortal);
@@ -45,7 +49,9 @@ describe('Portal', () => {
 			let open = track(true);
 
 			if (@open) {
-				<Portal target={document.body}><div class='test-portal'>{'Conditional content'}</div></Portal>
+				<Portal target={document.body}>
+					<div class="test-portal">{'Conditional content'}</div>
+				</Portal>
 			}
 
 			<button onClick={() => @open = false}>{'Close'}</button>
@@ -69,10 +75,12 @@ describe('Portal', () => {
 			let open = track(false);
 
 			if (@open) {
-				<Portal target={document.body}><div class='test-portal'>
-					{'Content'}
-					<button onClick={() => @open = false}>{'Close'}</button>
-				</div></Portal>
+				<Portal target={document.body}>
+					<div class="test-portal">
+						{'Content'}
+						<button onClick={() => @open = false}>{'Close'}</button>
+					</div>
+				</Portal>
 			}
 
 			if (!@open) {
@@ -106,9 +114,13 @@ describe('Portal', () => {
 		document.body.appendChild(target2);
 
 		component TestMultiPortal() {
-			<Portal target={target1}><div class='test-portal'>{'Portal 1 content'}</div></Portal>
+			<Portal target={target1}>
+				<div class="test-portal">{'Portal 1 content'}</div>
+			</Portal>
 
-			<Portal target={target2}><div class='test-portal'>{'Portal 2 content'}</div></Portal>
+			<Portal target={target2}>
+				<div class="test-portal">{'Portal 2 content'}</div>
+			</Portal>
 		}
 
 		render(TestMultiPortal);
@@ -128,11 +140,13 @@ describe('Portal', () => {
 		component TestReactivePortal() {
 			let count = track(0);
 
-			<Portal target={document.body}><div class='test-portal'>
-				{'Count: '}
-				{String(@count)}
-				<button onClick={() => @count++}>{'Increment'}</button>
-			</div></Portal>
+			<Portal target={document.body}>
+				<div class="test-portal">
+					{'Count: '}
+					{String(@count)}
+					<button onClick={() => @count++}>{'Increment'}</button>
+				</div>
+			</Portal>
 		}
 
 		render(TestReactivePortal);

package/tests/client/ref.test.ripple

@@ -6,7 +6,13 @@ describe('refs', () => {
 		let div: HTMLDivElement | undefined;
 
 		component Component() {
-			<div {ref (node: HTMLDivElement) => { div = node; }}>{'Hello World'}</div>
+			<div
+				{ref (node: HTMLDivElement) => {
+					div = node;
+				}}
+			>
+				{'Hello World'}
+			</div>
 		}
 		render(Component);
 		flushSync();
@@ -49,9 +55,9 @@ describe('refs', () => {
 			}
 
 			const props = {
-				id: "example",
+				id: 'example',
 				@value,
-				[createRefKey()]: inputRef
+				[createRefKey()]: inputRef,
 			};
 
 			<input type="text" {...props} />