ripple 0.2.104 → 0.2.106

package/src/runtime/internal/client/switch.js

@@ -0,0 +1,32 @@
+/** @import { Block } from '#client' */
+
+import { branch, destroy_block, render } from './blocks.js';
+import { SWITCH_BLOCK } from './constants.js';
+
+/**
+ * @param {Node} node
+ * @param {() => ((anchor: Node) => void)} fn
+ * @returns {void}
+ */
+export function switch_block(node, fn) {
+	var anchor = node;
+	/** @type {any} */
+	var current_branch = null;
+	/** @type {Block | null} */
+	var b = null;
+
+	render(() => {
+		const branch_fn = fn() ?? null;
+		if (current_branch === branch_fn) return;
+		current_branch = branch_fn;
+
+		if (b !== null) {
+			destroy_block(b);
+			b = null;
+		}
+
+		if (branch_fn !== null) {
+			b = branch(() => branch_fn(anchor));
+		}
+	}, SWITCH_BLOCK);
+}

package/src/runtime/media-query.js

@@ -0,0 +1,39 @@
+import { on } from './internal/client/events.js';
+import { get, safe_scope, set, tracked } from './internal/client/index.js';
+import { ReactiveValue } from './reactive-value.js';
+
+const parenthesis_regex = /\(.+\)/;
+const non_parenthesized_keywords = new Set(['all', 'print', 'screen', 'and', 'or', 'not', 'only']);
+
+/**
+ * @constructor
+ * @param {string} query
+ * @param {boolean | undefined} [fallback]
+ * @returns {ReactiveValue<boolean>}
+ */
+export function MediaQuery(query, fallback) {
+	if (!new.target) {
+		throw new TypeError('MediaQuery must be called with new');
+	}
+
+	var block = safe_scope();
+
+	let final_query =
+		parenthesis_regex.test(query) ||
+			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
+			? query
+			: `(${query})`;
+	const q = window.matchMedia(final_query);
+	const matches = tracked(q.matches, block);
+
+	return new ReactiveValue(
+		() => get(matches),
+		() => on(q, 'change', () => {
+			// skip wrapping in untrack as createSubscriber already does it
+			if (q.matches !== get(matches)) {
+				set(matches, q.matches, block)
+			}
+		})
+	);
+}

package/src/runtime/reactive-value.js

@@ -0,0 +1,21 @@
+/** @import { Derived } from '#client' */
+import { createSubscriber } from './create-subscriber.js';
+import { safe_scope, derived } from './internal/client/runtime.js';
+
+/**
+ * @template V
+ * @constructor
+ * @param {() => V} fn
+ * @param {() => void | (() => void)} start
+ * @returns {Derived}
+ */
+export function ReactiveValue(fn, start) {
+	if (!new.target) {
+		throw new TypeError('`ReactiveValue` must be called with new');
+	}
+
+	const s = createSubscriber(start);
+	const block = safe_scope();
+
+	return (derived(fn, block, () => { s(); return fn(); }, (_, prev) => prev));
+}

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/__snapshots__/tracked-expression.test.ripple.snap

@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TrackedExpression tests > should handle the syntax correctly 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    0
+  </div>
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+  <div>
+    4
+  </div>
+  <div>
+    false
+  </div>
+  <div>
+    true
+  </div>
+  
+</div>
+`;

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);
+	});
+});