ripple 0.2.116 → 0.2.119

package/tests/client/array/array.static.test.ripple

@@ -0,0 +1,237 @@
+import { flushSync, TrackedArray } from 'ripple';
+import { MAX_ARRAY_LENGTH } from '../../../src/runtime/internal/client/constants.js';
+
+describe('TrackedArray > static', () => {
+	it('handles static methods - from and of', () => {
+		component ArrayTest() {
+			let itemsFrom = TrackedArray.from([1, 2, 3], (x: number) => x * 2);
+			let itemsOf = TrackedArray.of(4, 5, 6);
+
+			<button onClick={() => itemsFrom.push(8)}>{'add to from'}</button>
+			<button onClick={() => itemsOf.push(7)}>{'add to of'}</button>
+			<pre>{JSON.stringify(itemsFrom)}</pre>
+			<pre>{JSON.stringify(itemsOf)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addFromButton = container.querySelectorAll('button')[0];
+		const addOfButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,5,6]');
+
+		// Test adding to from-created array
+		addFromButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6,8]');
+
+		// Test adding to of-created array
+		addOfButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,5,6,7]');
+	});
+
+	('fromAsync' in Array.prototype ? describe : describe.skip)('TrackedArray fromAsync', async () => {
+		it('handles static fromAsync method with reactivity', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				let items = await TrackedArray.fromAsync([1, 2, 3]);
+
+				<button onClick={() => {
+					if (items) items.push(4);
+				}}>{'add item'}</button>
+
+				<pre>{JSON.stringify(items)}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			const addButton = container.querySelector('button');
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
+
+			// Test adding an item to the async-created array
+			addButton.click();
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
+		});
+
+		it('handles static fromAsync method with mapping function', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				let items = await TrackedArray.fromAsync(
+					[1, 2, 3],
+					(x: number) => x * 2
+				);
+
+				<button onClick={() => {
+					if (items) items.push(8);
+				}}>{'add item'}</button>
+				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			const addButton = container.querySelector('button');
+
+			expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
+
+			addButton.click();
+			flushSync();
+
+			expect(container.querySelector('pre').textContent).toBe('[2,4,6,8]');
+		});
+
+		// TODO: Fix this test case, needs some async love around try statements being using in a not template way
+		it.skip('handles error in fromAsync method', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				let items = null;
+				let error = null;
+
+				// try {
+				// 	items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
+				// } catch (e) {
+				// }
+			}
+
+			component ArrayTest() {
+				let items = null;
+				let error = null;
+
+				try {
+					// items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
+				} catch (e) {
+					error = (e as Error).message;
+				}
+
+				<pre>{error ? 'Error: ' + error : 'No error'}</pre>
+				<pre>{items ? JSON.stringify(items) : 'No items'}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('Error: Async error');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('No items');
+		});
+	});
+
+	describe('Creates TrackedArray with a single element', () => {
+		it('specifies int', () => {
+			component ArrayTest() {
+				let items = new TrackedArray(3);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[null,null,null]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
+		});
+
+		it('errors on exceeding max array size', () => {
+			component ArrayTest() {
+				let error = null;
+
+				try {
+					new TrackedArray(MAX_ARRAY_LENGTH + 1);
+				} catch (e) {
+					error = (e as Error).message;
+				}
+
+				<pre>{error}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelector('pre').textContent).toBe('Invalid array length');
+		});
+
+		it('specifies int using static from method', () => {
+			component ArrayTest() {
+				let items = TrackedArray.from([4]);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[4]');
+			// expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+
+		it('specifies int using static of method', () => {
+			component ArrayTest() {
+				let items = TrackedArray.of(5);
+				<pre>{JSON.stringify(items)}</pre>
+				<pre>{items.length}</pre>
+			}
+
+			render(ArrayTest);
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[5]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+
+		('fromAsync' in Array.prototype ? it : it.skip)('specifies int using static fromAsync method', async () => {
+			component Parent() {
+				try {
+					<ArrayTest />
+				} pending {
+					<div>{'Loading placeholder...'}</div>
+				}
+			}
+
+			component ArrayTest() {
+				const items = await TrackedArray.fromAsync([6]);
+
+				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+				<pre>{items ? items.length : ''}</pre>
+			}
+
+			render(Parent);
+
+			await new Promise(resolve => setTimeout(resolve, 0));
+			flushSync();
+
+			expect(container.querySelectorAll('pre')[0].textContent).toBe('[6]');
+			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+		});
+	});
+});

package/tests/client/array/array.to-methods.test.ripple

@@ -0,0 +1,93 @@
+import { track, flushSync, TrackedArray } from 'ripple';
+
+describe('TrackedArray > to* methods', () => {
+	it('handles toReversed method with reactivity', (context) => {
+		if (!('toReversed' in Array.prototype)) {
+			context.skip();
+		}
+
+		component ArrayTest() {
+			let items = new TrackedArray(1, 2, 3, 4);
+			let reversed = track(() => items.toReversed());
+
+			<button onClick={() => items.push(5)}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{JSON.stringify(@reversed)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,3,2,1]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[5,4,3,2,1]');
+	});
+
+	it('handles toSorted method with reactivity', (context) => {
+		if (!('toSorted' in Array.prototype)) {
+			context.skip();
+		}
+
+		component ArrayTest() {
+			let items = new TrackedArray(3, 1, 4, 2);
+			let sorted = track(() => items.toSorted());
+
+			<button onClick={() => items.push(0)}>{'add item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{JSON.stringify(@sorted)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const addButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[3,1,4,2]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
+
+		// Test adding an item
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[3,1,4,2,0]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2,3,4]');
+	});
+
+	it('handles toSpliced method with reactivity', (context) => {
+		if (!('toSpliced' in Array.prototype)) {
+			context.skip();
+		}
+
+		component ArrayTest() {
+			let items = new TrackedArray<string | number>(1, 2, 3, 4, 5);
+			let spliced = track(() => items.toSpliced(1, 2, 'a', 'b'));
+
+			<button onClick={() => items[2] = 30}>{'change item'}</button>
+			<pre>{JSON.stringify(items)}</pre>
+			<pre>{JSON.stringify(@spliced)}</pre>
+		}
+
+		render(ArrayTest);
+
+		const changeButton = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,"a","b",4,5]');
+
+		// Test changing an item
+		changeButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,5]');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,"a","b",4,5]');
+	});
+});

package/tests/client/basic/__snapshots__/basic.attributes.test.ripple.snap

@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > attribute rendering > handles boolean attributes with no prop value provides 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <button
+      disabled=""
+    >
+      Button
+    </button>
+    <input
+      checked=""
+      type="checkbox"
+    />
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > handles boolean props correctly 1`] = `
+<div>
+  <div
+    data-disabled=""
+  />
+  <input
+    disabled=""
+  />
+  <!---->
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > render spread props without duplication 1`] = `
+<div>
+  <div>
+    <input
+      id="vehicle1"
+      name="car"
+      type="checkbox"
+      value="Bike"
+    />
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > render static attributes 1`] = `
+<div>
+  <div
+    class="foo"
+    id="bar"
+    style="color: red;"
+  >
+    Hello World
+  </div>
+  
+</div>
+`;

package/tests/client/basic/__snapshots__/basic.rendering.test.ripple.snap

@@ -0,0 +1,106 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > rendering & text > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > renders static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > rendering & text > should handle lexical scopes correctly 1`] = `
+<div>
+  <section>
+    Nested scope variable
+  </section>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;

package/tests/client/basic/__snapshots__/basic.text.test.ripple.snap

@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > text rendering > basic operations 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    5
+  </div>
+  <div>
+    2
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders semi-dynamic text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders simple JS expression logic correctly 1`] = `
+<div>
+  <div>
+    {"0":"Test"}
+  </div>
+  <div>
+    1
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > text rendering > renders static text 1`] = `
+<div>
+  <div>
+    Hello World
+  </div>
+  
+</div>
+`;