ripple 0.2.105 → 0.2.106

package/src/runtime/url-search-params.js

@@ -0,0 +1,147 @@
+import { get, increment, safe_scope, tracked } from './internal/client/runtime.js';
+import { get_current_url } from './url.js';
+
+export const REPLACE = Symbol();
+
+
+export class TrackedURLSearchParams extends URLSearchParams {
+	#block = safe_scope();
+	#version = tracked(0, this.#block);
+	#url = get_current_url();
+
+	#updating = false;
+
+	#update_url() {
+		if (!this.#url || this.#updating) return;
+		this.#updating = true;
+
+		const search = this.toString();
+		this.#url.search = search && `?${search}`;
+
+		this.#updating = false;
+	}
+
+	/**
+	 * @param {URLSearchParams} params
+	 * @internal
+	 */
+	[REPLACE](params) {
+		if (this.#updating) return;
+		this.#updating = true;
+
+		for (const key of [...super.keys()]) {
+			super.delete(key);
+		}
+
+		for (const [key, value] of params) {
+			super.append(key, value);
+		}
+
+		increment(this.#version, this.#block);
+		this.#updating = false;
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} value
+	 * @returns {void}
+	 */
+	append(name, value) {
+		super.append(name, value);
+		this.#update_url();
+		increment(this.#version, this.#block);
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string=} value
+	 * @returns {void}
+	 */
+	delete(name, value) {
+		var has_value = super.has(name, value);
+		super.delete(name, value);
+		if (has_value) {
+			this.#update_url();
+			increment(this.#version, this.#block);
+		}
+	}
+
+	/**
+	 * @param {string} name
+	 * @returns {string|null}
+	 */
+	get(name) {
+		get(this.#version);
+		return super.get(name);
+	}
+
+	/**
+	 * @param {string} name
+	 * @returns {string[]}
+	 */
+	getAll(name) {
+		get(this.#version);
+		return super.getAll(name);
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string=} value
+	 * @returns {boolean}
+	 */
+	has(name, value) {
+		get(this.#version);
+		return super.has(name, value);
+	}
+
+	keys() {
+		get(this.#version);
+		return super.keys();
+	}
+
+	/**
+	 * @param {string} name
+	 * @param {string} value
+	 * @returns {void}
+	 */
+	set(name, value) {
+		var previous = super.getAll(name).join('');
+		super.set(name, value);
+		// can't use has(name, value), because for something like https://svelte.dev?foo=1&bar=2&foo=3
+		// if you set `foo` to 1, then foo=3 gets deleted whilst `has("foo", "1")` returns true
+		if (previous !== super.getAll(name).join('')) {
+			this.#update_url();
+			increment(this.#version, this.#block);
+		}
+	}
+
+	sort() {
+		super.sort();
+		this.#update_url();
+		increment(this.#version, this.#block);
+	}
+
+	toString() {
+		get(this.#version);
+		return super.toString();
+	}
+
+	values() {
+		get(this.#version);
+		return super.values();
+	}
+
+	entries() {
+		get(this.#version);
+		return super.entries();
+	}
+
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+
+	get size() {
+		get(this.#version);
+		return super.size;
+	}
+}

package/src/runtime/url.js

@@ -0,0 +1,164 @@
+import { get, set, safe_scope, tracked } from './internal/client/runtime.js';
+import { REPLACE, TrackedURLSearchParams } from './url-search-params.js';
+
+/** @type {TrackedURL | null} */
+let current_url = null;
+
+export function get_current_url() {
+	return current_url;
+}
+
+export class TrackedURL extends URL {
+	#block = safe_scope();
+	#protocol = tracked(super.protocol, this.#block);
+	#username = tracked(super.username, this.#block);
+	#password = tracked(super.password, this.#block);
+	#hostname = tracked(super.hostname, this.#block);
+	#port = tracked(super.port, this.#block);
+	#pathname = tracked(super.pathname, this.#block);
+	#hash = tracked(super.hash, this.#block);
+	#search = tracked(super.search, this.#block);
+	#searchParams;
+
+	/**
+	 * @param {string | URL} url
+	 * @param {string | URL} [base]
+	 */
+	constructor(url, base) {
+		url = new URL(url, base);
+		super(url);
+
+		current_url = this;
+		this.#searchParams = new TrackedURLSearchParams(url.searchParams);
+		current_url = null;
+	}
+
+	get hash() {
+		return get(this.#hash);
+	}
+
+	set hash(value) {
+		super.hash = value;
+		set(this.#hash, super.hash, this.#block);
+	}
+
+	get host() {
+		get(this.#hostname);
+		get(this.#port);
+		return super.host;
+	}
+
+	set host(value) {
+		super.host = value;
+		set(this.#hostname, super.hostname, this.#block);
+		set(this.#port, super.port, this.#block);
+	}
+
+	get hostname() {
+		return get(this.#hostname);
+	}
+
+	set hostname(value) {
+		super.hostname = value;
+		set(this.#hostname, super.hostname, this.#block);
+	}
+
+	get href() {
+		get(this.#protocol);
+		get(this.#username);
+		get(this.#password);
+		get(this.#hostname);
+		get(this.#port);
+		get(this.#pathname);
+		get(this.#hash);
+		get(this.#search);
+		return super.href;
+	}
+
+	set href(value) {
+		super.href = value;
+		set(this.#protocol, super.protocol, this.#block);
+		set(this.#username, super.username, this.#block);
+		set(this.#password, super.password, this.#block);
+		set(this.#hostname, super.hostname, this.#block);
+		set(this.#port, super.port, this.#block);
+		set(this.#pathname, super.pathname, this.#block);
+		set(this.#hash, super.hash, this.#block);
+		set(this.#search, super.search, this.#block);
+		this.#searchParams[REPLACE](super.searchParams);
+	}
+
+	get password() {
+		return get(this.#password);
+	}
+
+	set password(value) {
+		super.password = value;
+		set(this.#password, super.password, this.#block);
+	}
+
+	get pathname() {
+		return get(this.#pathname);
+	}
+
+	set pathname(value) {
+		super.pathname = value;
+		set(this.#pathname, super.pathname, this.#block);
+	}
+
+	get port() {
+		return get(this.#port);
+	}
+
+	set port(value) {
+		super.port = value;
+		set(this.#port, super.port, this.#block);
+	}
+
+	get protocol() {
+		return get(this.#protocol);
+	}
+
+	set protocol(value) {
+		super.protocol = value;
+		set(this.#protocol, super.protocol, this.#block);
+	}
+
+	get search() {
+		return get(this.#search);
+	}
+
+	set search(value) {
+		super.search = value;
+		set(this.#search, value, this.#block);
+		this.#searchParams[REPLACE](super.searchParams);
+	}
+
+	get username() {
+		return get(this.#username);
+	}
+
+	set username(value) {
+		super.username = value;
+		set(this.#username, super.username, this.#block);
+	}
+
+	get origin() {
+		get(this.#protocol);
+		get(this.#hostname);
+		get(this.#port);
+		return super.origin;
+	}
+
+	get searchParams() {
+		return this.#searchParams;
+	}
+
+	toString() {
+		return this.href;
+	}
+
+	toJSON() {
+		return this.href;
+	}
+}

package/src/utils/builders.js

@@ -774,8 +774,39 @@ export function jsx_spread_attribute(argument) {
   };
 }
 
+
+/**
+ * @returns {ESTree.SwitchStatement}
+ */
+export function switch_builder(discriminant, cases) {
+  return {
+    type: 'SwitchStatement',
+    discriminant,
+    cases,
+  };
+}
+
+/**
+ * @returns {ESTree.SwitchCase}
+ */
+export function switch_case(test = null, consequent = []) {
+  return {
+    type: 'SwitchCase',
+    test,
+    consequent,
+  };
+}
+
 export const void0 = unary('void', literal(0));
 
+/**
+ * @returns {ESTree.BreakStatement}
+ */
+export const break_statement = {
+  type: 'BreakStatement',
+  label: null,
+};
+
 export {
   await_builder as await,
   let_builder as let,
@@ -783,7 +814,9 @@ export {
   var_builder as var,
   true_instance as true,
   false_instance as false,
+  break_statement as break,
   for_builder as for,
+  switch_builder as switch,
   function_builder as function,
   return_builder as return,
   if_builder as if,

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

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+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);
+		}));"
+`;

package/tests/client/basic.test.ripple

@@ -1843,5 +1843,50 @@ describe('basic client', () => {
 
 		expect(error).toBe(undefined);
 	});
-});
 
+	it('unwraps tracked values inside effect', () => {
+		let state = {};
+
+		component Basic() {
+			let count = track(0);
+
+			effect(() => {
+				state.count = @count;
+			})
+		}
+
+		render(Basic);
+		flushSync();
+
+		expect(state.count).toBe(0);
+	});
+
+	it('does not unwrap values with update expressions inside effect', () => {
+		let state = {};
+
+		component Basic() {
+			let count = track(5);
+
+			effect(() => {
+				untrack(() => {
+					state.initialValue = @count;
+					state.preIncrement = ++@count;
+					state.postIncrement = @count++;
+					state.preDecrement = --@count;
+					state.postDecrement = @count--;
+					state.finalValue = @count;
+				});
+			})
+		}
+
+		render(Basic);
+		flushSync();
+
+		expect(state.initialValue).toBe(5);
+		expect(state.preIncrement).toBe(6);
+		expect(state.postIncrement).toBe(6);
+		expect(state.preDecrement).toBe(6);
+		expect(state.postDecrement).toBe(6);
+		expect(state.finalValue).toBe(5);
+	});
+});

package/tests/client/compiler.test.ripple

@@ -462,4 +462,37 @@ describe('compiler success tests', () => {
 			expect(splitResult.textContent).toBe('Split result: Paragraph, Content');
 		});
 	});
+
+	it('compiles tracked values in effect with assignment expression', () => {
+		const source = `component App() {
+let count = track(0);
+
+effect(() => {
+	state.count = @count;
+})
+}`;
+		const result = compile(source, 'test.ripple');
+		// Extract just the effect callback body
+		const effectMatch = result.js.code.match(/effect\(\(\) => \{([^}]+)\}\)/s);
+		expect(effectMatch[1].trim()).toMatchSnapshot();
+	});
+
+	it('compiles tracked values in effect with update expressions', () => {
+		const source = `component App() {
+let count = track(5);
+
+effect(() => {
+	untrack(() => {
+		state.preIncrement = ++@count;
+		state.postIncrement = @count++;
+		state.preDecrement = --@count;
+		state.postDecrement = @count--;
+	});
+})
+}`;
+		const result = compile(source, 'test.ripple');
+		// Extract just the effect callback body
+		const effectMatch = result.js.code.match(/effect\(\(\) => \{([\s\S]+?)\n\t\}\)\)/);
+		expect(effectMatch[1].trim()).toMatchSnapshot();
+	});
 });

package/tests/client/media-query.test.ripple

@@ -0,0 +1,130 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { mount, flushSync, MediaQuery, track } from 'ripple';
+
+function setupMatchMedia() {
+  let listeners = new Set();
+
+  // A mock implementation of matchMedia
+  const mockMatchMedia = vi.fn().mockImplementation(query => {
+    return {
+      media: query,
+      matches: false, // default value
+      addEventListener: (type, cb) => {
+        if (type === 'change') listeners.add(cb);
+      },
+      removeEventListener: (type, cb) => {
+        if (type === 'change') listeners.delete(cb);
+      },
+      /** @param {function(MediaQueryListEvent): void} cb */
+      addListener: (cb) => listeners.add(cb),
+      /** @param {function(MediaQueryListEvent): void} cb */
+      removeListener: (cb) => listeners.delete(cb),
+      dispatch: (event) => {
+        listeners.forEach((cb) => cb(event));
+      },
+			listenersCount: () => listeners.size,
+    };
+  });
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: mockMatchMedia
+  });
+
+  return { mockMatchMedia, listeners };
+}
+
+describe('MediaQuery', () => {
+	let container;
+	let mm;
+
+	function render(component) {
+			mount(component, {
+					target: container
+			});
+	}
+
+	beforeEach(() => {
+			mm = setupMatchMedia();
+			container = document.createElement('div');
+			document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+			document.body.removeChild(container);
+			container = null;
+	});
+
+	it('should be reactive if matchMedia changes', () => {
+		const media = '(min-width: 600px)';
+
+		component App() {
+			const medium = new MediaQuery(media);
+
+			<div>
+				<p>{@medium}</p>
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		const event = new Event('change');
+		Object.assign(event, { matches: true, media: media });
+
+		const p = container.querySelector('p');
+		expect(p.textContent).toBe('false');
+
+
+		mm.mockMatchMedia.mock.results[0].value.matches = true;
+		mm.mockMatchMedia.mock.results[0].value.dispatch(event);
+		flushSync();
+
+		expect(p.textContent).toBe('true');
+
+		Object.assign(event, { matches: false, media: media });
+
+		mm.mockMatchMedia.mock.results[0].value.matches = false;
+		mm.mockMatchMedia.mock.results[0].value.dispatch(event);
+		flushSync();
+
+		expect(p.textContent).toBe('false');
+	});
+
+
+	it('should have cleared event listeners after unmount', async () => {
+		const media = '(min-width: 600px)';
+
+		component App() {
+			let show = track(true);
+
+			if (@show) {
+				<Child />
+			}
+
+			<button onClick={() => @show = !@show}>{'Toggle Child'}</button>
+		}
+
+		component Child() {
+			const medium = new MediaQuery(media);
+
+			<div>
+				<p>{@medium}</p>
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(mm.mockMatchMedia.mock.results[0].value.listenersCount()).toBe(1);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		// wait for microtask queue to flush
+		await new Promise(resolve => setTimeout(resolve, 0));
+
+		expect(mm.mockMatchMedia.mock.results[0].value.listenersCount()).toBe(0);
+	});
+});