ripple 0.2.116 → 0.2.119

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

@@ -0,0 +1,160 @@
+import { flushSync, track, TrackedURLSearchParams } from 'ripple';
+
+describe('TrackedURLSearchParams > retrieval', () => {
+	it('handles get operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&baz=qux');
+			let foo = track(() => params.get('foo'));
+			let baz = track(() => params.get('baz'));
+
+			<button onClick={() => params.set('foo', 'updated')}>{'update foo'}</button>
+			<pre>{@foo}</pre>
+			<pre>{@baz}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('qux');
+
+		// Test update
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('updated');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('qux');
+	});
+
+	it('handles get for nonexistent key', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let nonexistent = track(() => params.get('nonexistent'));
+
+			<pre>{String(@nonexistent)}</pre>
+		}
+
+		render(URLTest);
+
+		expect(container.querySelector('pre').textContent).toBe('null');
+	});
+
+	it('handles getAll operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&foo=baz');
+			let allFoo = track(() => params.getAll('foo'));
+
+			<button onClick={() => params.append('foo', 'qux')}>{'append foo'}</button>
+			<pre>{JSON.stringify(@allFoo)}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('["bar","baz"]');
+
+		// Test append
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('["bar","baz","qux"]');
+	});
+
+	it('handles has operation with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let hasFoo = track(() => params.has('foo'));
+			let 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>
+		}
+
+		render(URLTest);
+
+		const addButton = container.querySelectorAll('button')[0];
+		const deleteButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
+
+		// Test add
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+
+		// Test delete
+		deleteButton.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('false');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+	});
+
+	it('handles has with specific value', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar&foo=baz');
+			let hasBarValue = track(() => params.has('foo', 'bar'));
+			let hasQuxValue = track(() => params.has('foo', 'qux'));
+
+			<button onClick={() => params.append('foo', 'qux')}>{'add qux'}</button>
+			<pre>{@hasBarValue.toString()}</pre>
+			<pre>{@hasQuxValue.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('false');
+
+		// Test add
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('true');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('true');
+	});
+
+	it('handles size property with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let size = track(() => params.size);
+
+			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
+			<button onClick={() => params.delete('foo')}>{'delete'}</button>
+			<pre>{@size}</pre>
+		}
+
+		render(URLTest);
+
+		const addButton = container.querySelectorAll('button')[0];
+		const deleteButton = container.querySelectorAll('button')[1];
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('1');
+
+		// Test add
+		addButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('2');
+
+		// Test delete
+		deleteButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('1');
+	});
+});

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

@@ -0,0 +1,53 @@
+import { flushSync, track, TrackedURLSearchParams } from 'ripple';
+
+describe('TrackedURLSearchParams > serialization', () => {
+	it('handles toString method with reactivity', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams('foo=bar');
+			let string = track(() => params.toString());
+
+			<button onClick={() => params.append('baz', 'qux')}>{'add'}</button>
+			<pre>{@string}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelector('pre').textContent).toBe('foo=bar');
+
+		// Test add
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('foo=bar&baz=qux');
+	});
+
+	it('handles special characters encoding', () => {
+		component URLTest() {
+			const params = new TrackedURLSearchParams();
+
+			<button onClick={() => params.set('key', 'value with spaces')}>{'add spaces'}</button>
+			<button onClick={() => params.set('special', '!@#$%^&*()')}>{'add special'}</button>
+			<pre>{params.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const spacesButton = container.querySelectorAll('button')[0];
+		const specialButton = container.querySelectorAll('button')[1];
+
+		// Test spaces
+		spacesButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toBe('key=value+with+spaces');
+
+		// Test special characters
+		specialButton.click();
+		flushSync();
+
+		expect(container.querySelector('pre').textContent).toContain('special');
+	});
+});

package/tests/client/url-search-params/url-search-params.tracked-url.test.ripple

@@ -0,0 +1,55 @@
+import { flushSync, TrackedURL } from 'ripple';
+
+describe('TrackedURLSearchParams > TrackedURL integration', () => {
+	it('integrates with TrackedURL', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com?foo=bar');
+			const params = url.searchParams;
+
+			<button onClick={() => params.append('baz', 'qux')}>{'add param'}</button>
+			<pre>{url.href}</pre>
+			<pre>{params.toString()}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('foo=bar');
+
+		// Test add param - should update URL
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar&baz=qux');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('foo=bar&baz=qux');
+	});
+
+	it('handles empty search string in URL', () => {
+		component URLTest() {
+			const url = new TrackedURL('https://example.com');
+			const params = url.searchParams;
+
+			<button onClick={() => params.append('foo', 'bar')}>{'add first param'}</button>
+			<pre>{url.href}</pre>
+			<pre>{params.size}</pre>
+		}
+
+		render(URLTest);
+
+		const button = container.querySelector('button');
+
+		// Initial state - no search params
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
+
+		// Test add first param
+		button.click();
+		flushSync();
+
+		expect(container.querySelectorAll('pre')[0].textContent).toBe('https://example.com/?foo=bar');
+		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
+	});
+});

package/tests/client.d.ts

@@ -0,0 +1,12 @@
+declare var container: HTMLDivElement;
+declare var error: string | undefined;
+declare function render(component: () => void): void;
+
+interface HTMLElement {
+	// We don't care about checking if it returned an element or null in tests
+	// because if it returned null, those tests will fail anyway. This
+	// typing drastically simplifies testing: you don't have to check if the
+	// query returned null or an actual element, and you don't have to do
+	// optional chaining everywhere (elem?.textContent)
+	querySelector(selectors: string): HTMLElement;
+}

package/tests/server/if.test.ripple

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+
+describe('if statements in SSR', () => {
+	it('renders if block when condition is true', async () => {
+		component App() {
+			let condition = true;
+
+			if (condition) {
+				<div>{'If block'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>If block</div>');
+	});
+
+	it('renders else block when condition is false', async () => {
+		component App() {
+			let condition = false;
+
+			if (condition) {
+				<div>{'If block'}</div>
+			} else {
+				<div>{'Else block'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Else block</div>');
+	});
+
+	it('renders else if block when condition is true', async () => {
+		component App() {
+			let value = 'b';
+
+			if (value === 'a') {
+				<div>{'Case A'}</div>
+			} else if (value === 'b') {
+				<div>{'Case B'}</div>
+			} else {
+				<div>{'Default Case'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Case B</div>');
+	});
+
+	it('renders final else block in an if-else if-else chain', async () => {
+		component App() {
+			let value = 'c';
+
+			if (value === 'a') {
+				<div>{'Case A'}</div>
+			} else if (value === 'b') {
+				<div>{'Case B'}</div>
+			} else {
+				<div>{'Default Case'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Default Case</div>');
+	});
+});

package/tests/setup-client.js

@@ -0,0 +1,28 @@
+import { beforeEach, afterEach } from 'vitest';
+import { mount } from 'ripple';
+
+/**
+ * @param {() => void} component 
+ */
+globalThis.render = function render(component) {
+	mount(component, {
+		target: /** @type {HTMLDivElement} */ (globalThis.container)
+	});
+}
+
+beforeEach(() => {
+	globalThis.container = /** @type {HTMLDivElement} */ (document.createElement('div'));
+	document.body.appendChild(globalThis.container);
+
+	globalThis.error = undefined;
+});
+
+afterEach(() => {
+	// Container is guaranteed to exist in all tests, so it was easier to type it without undefined.
+	// And when we unset it, we just type-cast it to HTMLDivElement to avoid TS errors, because we
+	// know it's guaranteed to exist in the next test again.
+	document.body.removeChild(/** @type {HTMLDivElement} */ (globalThis.container));
+	globalThis.container = /** @type {HTMLDivElement} */ (/** @type {unknown} */(undefined));
+
+	globalThis.error = undefined;
+});

package/tsconfig.json

@@ -10,7 +10,7 @@
 		"noErrorTruncation": true,
 		"allowSyntheticDefaultImports": true,
 		"verbatimModuleSyntax": true,
-		"types": ["node"],
+		"types": ["node", "vitest/globals"],
 		"jsx": "preserve",
 		"jsxImportSource": "ripple",
 		"strict": true,
@@ -23,6 +23,8 @@
 	"include": [
 		"./*.js",
 		"./src/",
-		"./tests/*/test.ripple",
+		"./tests/**/*.test.ripple",
+		"./tests/**/*.d.ts",
+		"./tests/**/*.js"
 	]
 }

package/types/index.d.ts

@@ -9,7 +9,7 @@ export declare function tick(): Promise<void>;
 
 export declare function untrack<T>(fn: () => T): T;
 
-export declare function flushSync<T>(fn: () => T): T;
+export declare function flushSync<T>(fn?: () => T): T;
 
 export declare function effect(fn: (() => void) | (() => () => void)): void;
 
@@ -105,6 +105,10 @@ type SplitResult<T extends Props, K extends readonly (keyof T)[]> = [
 	Tracked<RestKeys<T, K>>,
 ];
 
+export declare function get<V>(tracked: Tracked<V>): V;
+
+export declare function set<V>(tracked: Tracked<V>, value: V): void;
+
 // Overload for function values - infers the return type of the function
 export declare function track<V>(
 	value: () => V,

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Dominic Gannaway
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

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

@@ -1,117 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`basic client > basic operations 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    5
-  </div>
-  <div>
-    2
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > 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 > handles boolean props correctly 1`] = `
-<div>
-  <div
-    data-disabled=""
-  />
-  <input
-    disabled=""
-  />
-  <!---->
-  
-</div>
-`;
-
-exports[`basic client > render semi-dynamic text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > render spread props without duplication 1`] = `
-<div>
-  <div>
-    <input
-      id="vehicle1"
-      name="car"
-      type="checkbox"
-      value="Bike"
-    />
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > render static attributes 1`] = `
-<div>
-  <div
-    class="foo"
-    id="bar"
-    style="color: red;"
-  >
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > render static text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > renders simple JS expression logic correctly 1`] = `
-<div>
-  <div>
-    {"0":"Test"}
-  </div>
-  <div>
-    1
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > should handle lexical scopes correctly 1`] = `
-<div>
-  <section>
-    Nested scope variable
-  </section>
-  
-</div>
-`;

package/tests/client/__snapshots__/compiler.test.ripple.snap

@@ -1,33 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`compiler success tests > compiles TSInstantiationExpression 1`] = `
-"import * as _$_ from 'ripple/internal/client';
-
-function makeBox(value) {
-	return { value };
-}
-
-const makeStringBox = (makeBox);
-const stringBox = makeStringBox('abc');
-const ErrorMap = (Map);
-const errorMap = new ErrorMap();"
-`;
-
-exports[`compiler success tests > compiles tracked values in effect with assignment expression 1`] = `"state.count = _$_.get(count);"`;
-
-exports[`compiler success tests > compiles tracked values in effect with update expressions 1`] = `
-"_$_.with_scope(__block, () => untrack(() => {
-			state.preIncrement = _$_.update_pre(count, __block);
-			state.postIncrement = _$_.update(count, __block);
-			state.preDecrement = _$_.update_pre(count, __block, -1);
-			state.postDecrement = _$_.update(count, __block, -1);
-		}));"
-`;
-
-exports[`compiler success tests > removes type assertions from function parameters and leaves default values 1`] = `
-"import * as _$_ from 'ripple/internal/client';
-
-function getString(e = 'test') {
-	return e;
-}"
-`;