ripple 0.2.105 → 0.2.107

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.105",
+  "version": "0.2.107",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

package/src/compiler/phases/1-parse/index.js

@@ -170,13 +170,14 @@ function RipplePlugin(config) {
 					// Look ahead to see if this is followed by a valid identifier character or opening paren
 					if (this.pos + 1 < this.input.length) {
 						const nextChar = this.input.charCodeAt(this.pos + 1);
-						
+
 						// Check if this is @( for unboxing expression syntax
-						if (nextChar === 40) { // ( character
+						if (nextChar === 40) {
+							// ( character
 							this.pos += 2; // skip '@('
 							return this.finishToken(tt.parenL, '@(');
 						}
-						
+
 						// Check if the next character can start an identifier
 						if (
 							(nextChar >= 65 && nextChar <= 90) || // A-Z
@@ -359,7 +360,7 @@ function RipplePlugin(config) {
 				if (this.type === tt.parenL && this.value === '@(') {
 					return this.parseTrackedExpression();
 				}
-				
+
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -1319,6 +1320,19 @@ function RipplePlugin(config) {
 					}
 				}
 
+				if (this.type.label === 'jsxTagStart') {
+					this.next();
+					if (this.value === '/') {
+						this.unexpected();
+					}
+					const node = this.parseElement();
+					
+					if (!node) {
+						this.unexpected();
+					}
+					return node;
+				}
+
 				return super.parseStatement(context, topLevel, exports);
 			}
 

package/src/compiler/phases/2-analyze/index.js

@@ -34,7 +34,8 @@ function mark_control_flow_has_template(path) {
 			node.type === 'ForInStatement' ||
 			node.type === 'ForOfStatement' ||
 			node.type === 'TryStatement' ||
-			node.type === 'IfStatement'
+			node.type === 'IfStatement' ||
+			node.type === 'SwitchStatement'
 		) {
 			node.metadata.has_template = true;
 		}
@@ -106,7 +107,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -117,7 +118,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */(parent)) &&
+			is_reference(node, /** @type {Node} */ (parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -253,7 +254,12 @@ const visitors = {
 		// Track metadata for this component
 		const metadata = { await: false };
 
-		context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1, metadata });
+		context.next({
+			...context.state,
+			elements,
+			function_depth: context.state.function_depth + 1,
+			metadata,
+		});
 
 		const css = node.css;
 
@@ -282,6 +288,41 @@ const visitors = {
 		context.next();
 	},
 
+	SwitchStatement(node, context) {
+		if (!is_inside_component(context)) {
+			return context.next();
+		}
+
+		context.visit(node.discriminant, context.state);
+
+		for (const switch_case of node.cases) {
+			// Validate that each cases ends in a break statement, except for the last case
+			const last = switch_case.consequent?.[switch_case.consequent.length - 1];
+
+			if (last.type !== 'BreakStatement' && node.cases.indexOf(switch_case) !== node.cases.length - 1) {
+				error(
+					'Template switch cases must end with a break statement (with the exception of the last case).',
+					context.state.analysis.module.filename,
+					switch_case,
+				);
+			}
+
+			node.metadata = {
+				has_template: false,
+			};
+
+			context.visit(switch_case, context.state);
+
+			if (!node.metadata.has_template) {
+				error(
+					'Component switch statements must contain a template in each of their cases. Move the switch statement into an effect if it does not render anything.',
+					context.state.analysis.module.filename,
+					node,
+				);
+			}
+		}
+	},
+
 	ForOfStatement(node, context) {
 		if (!is_inside_component(context)) {
 			return context.next();

package/src/compiler/phases/3-transform/client/index.js

@@ -1,4 +1,4 @@
-/** @import {Expression, FunctionExpression, Pattern} from 'estree' */
+/** @import {Expression, FunctionExpression, Pattern, Node, Program} from 'estree' */
 
 import { walk } from 'zimmerframe';
 import path from 'node:path';
@@ -72,7 +72,7 @@ function visit_function(node, context) {
 	let body = context.visit(node.body, {
 		...state,
 		// we are new context so tracking no longer applies
-		metadata: { ...state.metadata, tracked: false },
+		metadata: { ...state.metadata, tracking: false },
 	});
 
 	if (metadata?.tracked === true) {
@@ -159,9 +159,12 @@ const visitors = {
 				}
 			} else {
 				const binding = context.state.scope.get(node.name);
+				const is_right_side_of_assignment =
+					parent.type === 'AssignmentExpression' && parent.right === node;
 				if (
 					(context.state.metadata?.tracking === false ||
-						(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression')) &&
+						(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression') ||
+						is_right_side_of_assignment) &&
 					(node.tracked ||
 						binding?.kind === 'prop' ||
 						binding?.kind === 'index' ||
@@ -175,10 +178,10 @@ const visitors = {
 						add_ripple_internal_import(context);
 						return b.call('_$_.get', build_getter(node, context));
 					}
-				}
 
-				add_ripple_internal_import(context);
-				return build_getter(node, context);
+					add_ripple_internal_import(context);
+					return build_getter(node, context);
+				}
 			}
 		}
 	},
@@ -943,7 +946,7 @@ const visitors = {
 					? context.visit(right)
 					: b.binary(
 							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Pattern} */ (context.visit(left)),
+							/** @type {Expression} */ (context.visit(left)),
 							/** @type {Expression} */ (context.visit(right)),
 						),
 				b.id('__block'),
@@ -962,7 +965,7 @@ const visitors = {
 					? context.visit(right)
 					: b.binary(
 							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Pattern} */ (
+							/** @type {Expression} */ (
 								context.visit(left, { ...context.state, metadata: { tracking: false } })
 							),
 							/** @type {Expression} */ (context.visit(right)),
@@ -1014,7 +1017,6 @@ const visitors = {
 			);
 		}
 
-
 		const left = object(argument);
 		const binding = context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;
@@ -1075,6 +1077,54 @@ const visitors = {
 		);
 	},
 
+	SwitchStatement(node, context) {
+		if (!is_inside_component(context)) {
+			return context.next();
+		}
+		context.state.template.push('<!>');
+
+		const id = context.state.flush_node();
+		const statements = [];
+		const cases = [];
+
+		let i = 1;
+
+		for (const switch_case of node.cases) {
+			const consequent_scope =
+				context.state.scopes.get(switch_case.consequent) || context.state.scope;
+			const consequent_id = context.state.scope.generate(
+				'switch_case_' + (switch_case.test == null ? 'default' : i),
+			);
+			const consequent = b.block(
+				transform_body(switch_case.consequent, {
+					...context,
+					state: { ...context.state, scope: consequent_scope },
+				}),
+			);
+
+			statements.push(b.var(b.id(consequent_id), b.arrow([b.id('__anchor')], consequent)));
+
+			cases.push(
+				b.switch_case(switch_case.test ? context.visit(switch_case.test) : null, [
+					b.return(b.id(consequent_id)),
+				]),
+			);
+			i++;
+		}
+
+		statements.push(
+			b.stmt(
+				b.call(
+					'_$_.switch',
+					id,
+					b.thunk(b.block([b.switch(context.visit(node.discriminant), cases)])),
+				),
+			),
+		);
+
+		context.state.init.push(b.block(statements));
+	},
+
 	IfStatement(node, context) {
 		if (!is_inside_component(context)) {
 			return context.next();
@@ -1263,7 +1313,7 @@ function join_template(items) {
 				push(e);
 			}
 
-			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
+			const last = /** @type {any} */ (expression.quasis.at(-1));
 			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
 		} else if (expression.type === 'Literal') {
 			/** @type {string} */ (quasi.value.cooked) += expression.value;
@@ -1412,6 +1462,23 @@ function transform_ts_child(node, context) {
 		}
 
 		state.init.push(b.if(visit(node.test), consequent, alternate));
+	} else if (node.type === 'SwitchStatement') {
+		const cases = [];
+
+		for (const switch_case of node.cases) {
+			const consequent_scope =
+				context.state.scopes.get(switch_case.consequent) || context.state.scope;
+			const consequent_body = transform_body(switch_case.consequent, {
+				...context,
+				state: { ...context.state, scope: consequent_scope },
+			});
+
+			cases.push(
+				b.switch_case(switch_case.test ? context.visit(switch_case.test) : null, consequent_body),
+			);
+		}
+
+		context.state.init.push(b.switch(context.visit(node.discriminant), cases));
 	} else if (node.type === 'ForOfStatement') {
 		const body_scope = context.state.scopes.get(node.body);
 		const block_body = transform_body(node.body.body, {
@@ -1464,6 +1531,8 @@ function transform_ts_child(node, context) {
 		const component = visit(node, state);
 
 		state.init.push(component);
+	} else if (node.type === 'BreakStatement') {
+		state.init.push(b.break);
 	} else {
 		debugger;
 		throw new Error('TODO');
@@ -1483,6 +1552,7 @@ function transform_children(children, context) {
 				node.type === 'IfStatement' ||
 				node.type === 'TryStatement' ||
 				node.type === 'ForOfStatement' ||
+				node.type === 'SwitchStatement' ||
 				node.type === 'Html' ||
 				(node.type === 'Element' &&
 					(node.id.type !== 'Identifier' || !is_element_dom_element(node))),
@@ -1634,6 +1704,11 @@ function transform_children(children, context) {
 			} else if (node.type === 'TryStatement') {
 				node.is_controlled = is_controlled;
 				visit(node, { ...state, flush_node, namespace: state.namespace });
+			} else if (node.type === 'SwitchStatement') {
+				node.is_controlled = is_controlled;
+				visit(node, { ...state, flush_node, namespace: state.namespace });
+			} else if (node.type === 'BreakStatement') {
+				// do nothing
 			} else {
 				debugger;
 			}
@@ -1715,8 +1790,8 @@ export function transform_client(filename, source, analysis, to_ts) {
 		to_ts,
 	};
 
-	const program = /** @type {ESTree.Program} */ (
-		walk(analysis.ast, { ...state, namespace: 'html' }, visitors)
+	const program = /** @type {Program} */ (
+		walk(/** @type {Node} */ (analysis.ast), { ...state, namespace: 'html' }, visitors)
 	);
 
 	for (const hoisted of state.hoisted) {

package/src/runtime/create-subscriber.js

@@ -0,0 +1,34 @@
+/** @import { createSubscriber } from '#public' */
+import { untrack, queue_microtask } from './internal/client/runtime.js';
+import { effect } from './internal/client/blocks.js'
+
+/** @type {createSubscriber} */
+export function createSubscriber(start) {
+	let subscribers = 0;
+	/** @type {(() => void) | void} */
+	let stop;
+
+	return () => {
+		effect(() => {
+			if (subscribers === 0) {
+				stop = untrack(start);
+			}
+
+			subscribers += 1;
+
+			return () => {
+				queue_microtask(() => {
+					// Only count down after a microtask, else we would reach 0 before our own render effect reruns,
+					// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
+					// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
+					subscribers -= 1;
+
+					if (subscribers === 0) {
+						stop?.();
+						stop = undefined;
+					}
+				});
+			};
+		});
+	};
+}

package/src/runtime/index-client.js

@@ -62,6 +62,14 @@ export { TrackedMap } from './map.js';
 
 export { TrackedDate } from './date.js';
 
+export { TrackedURL } from './url.js';
+
+export { TrackedURLSearchParams } from './url-search-params.js';
+
+export { createSubscriber } from './create-subscriber.js';
+
+export { MediaQuery } from './media-query.js';
+
 export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';

package/src/runtime/index-server.js

@@ -10,8 +10,6 @@ export function effect() {
 	// NO-OP
 }
 
-export const TrackedArray = Array;
-
 var empty_get_set = { get: undefined, set: undefined };
 
 /**
@@ -44,3 +42,30 @@ export function track(v, get, set) {
 		v,
 	};
 }
+
+export const TrackedObject = globalThis.Object;
+export const TrackedArray = globalThis.Array;
+export const TrackedDate = globalThis.Date;
+export const TrackedSet = globalThis.Set;
+export const TrackedMap = globalThis.Map;
+export const TrackedURL = globalThis.URL;
+export const TrackedURLSearchParams = globalThis.URLSearchParams;
+
+/**
+ * @param {string} query A media query string
+ * @param {boolean} [matches] Fallback value for the server
+ */
+export function MediaQuery(query, matches = false) {
+	if (!new.target) {
+		throw new TypeError('MediaQuery must be called with new');
+	}
+
+	return matches;
+}
+
+/**
+ * @param {any} _
+ */
+export function createSubscriber(_) {
+	return () => { /* NO-OP */ };
+}

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

@@ -5,19 +5,20 @@ export var BRANCH_BLOCK = 1 << 4;
 export var FOR_BLOCK = 1 << 5;
 export var TRY_BLOCK = 1 << 6;
 export var IF_BLOCK = 1 << 7;
-export var COMPOSITE_BLOCK = 1 << 8;
-export var ASYNC_BLOCK = 1 << 9;
-export var HEAD_BLOCK = 1 << 10;
-export var CONTAINS_UPDATE = 1 << 11;
-export var CONTAINS_TEARDOWN = 1 << 12;
-export var BLOCK_HAS_RUN = 1 << 13;
-export var TRACKED = 1 << 14;
-export var DERIVED = 1 << 15;
-export var DEFERRED = 1 << 16;
-export var PAUSED = 1 << 17;
-export var DESTROYED = 1 << 18;
+export var SWITCH_BLOCK = 1 << 8;
+export var COMPOSITE_BLOCK = 1 << 9;
+export var ASYNC_BLOCK = 1 << 10;
+export var HEAD_BLOCK = 1 << 11;
+export var CONTAINS_UPDATE = 1 << 12;
+export var CONTAINS_TEARDOWN = 1 << 13;
+export var BLOCK_HAS_RUN = 1 << 14;
+export var TRACKED = 1 << 15;
+export var DERIVED = 1 << 16;
+export var DEFERRED = 1 << 17;
+export var PAUSED = 1 << 18;
+export var DESTROYED = 1 << 19;
 
-export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
+export var CONTROL_FLOW_BLOCK = FOR_BLOCK | IF_BLOCK | SWITCH_BLOCK | TRY_BLOCK | COMPOSITE_BLOCK;
 
 export var UNINITIALIZED = Symbol();
 /** @type {unique symbol} */

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

@@ -57,6 +57,8 @@ export { if_block as if } from './if.js';
 
 export { try_block as try, aborted } from './try.js';
 
+export { switch_block as switch } from './switch.js';
+
 export { template, append } from './template.js';
 
 export { tracked_array } from '../../array.js';

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

@@ -172,7 +172,7 @@ function run_derived(computed) {
 	var previous_tracking = tracking;
 	var previous_dependency = active_dependency;
 	var previous_component = active_component;
-  var previous_is_mutating_allowed = is_mutating_allowed;
+	var previous_is_mutating_allowed = is_mutating_allowed;
 
 	try {
 		active_block = computed.b;
@@ -180,7 +180,7 @@ function run_derived(computed) {
 		tracking = true;
 		active_dependency = null;
 		active_component = computed.co;
-    is_mutating_allowed = false;
+		is_mutating_allowed = false;
 
 		destroy_computed_children(computed);
 
@@ -195,7 +195,7 @@ function run_derived(computed) {
 		tracking = previous_tracking;
 		active_dependency = previous_dependency;
 		active_component = previous_component;
-    is_mutating_allowed = previous_is_mutating_allowed;
+		is_mutating_allowed = previous_is_mutating_allowed;
 	}
 }
 
@@ -270,8 +270,8 @@ var empty_get_set = { get: undefined, set: undefined };
  *
  * @param {any} v
  * @param {Block} b
- * @param {Function} [get]
- * @param {Function} [set]
+ * @param {(value: any) => any} [get]
+ * @param {(next: any, prev: any) => any} [set]
  * @returns {Tracked}
  */
 export function tracked(v, b, get, set) {
@@ -288,8 +288,8 @@ export function tracked(v, b, get, set) {
 /**
  * @param {any} fn
  * @param {any} block
- * @param {Function} [get]
- * @param {Function} [set]
+ * @param {(value: any) => any} [get]
+ * @param {(next: any, prev: any) => any} [set]
  * @returns {Derived}
  */
 export function derived(fn, block, get, set) {
@@ -510,17 +510,17 @@ export function async_computed(fn, block) {
 
 /**
  * @template V
- * @param {Function} fn 
- * @param {V} v 
+ * @param {Function} fn
+ * @param {V} v
  */
 function trigger_track_get(fn, v) {
-  var previous_is_mutating_allowed = is_mutating_allowed;
-  try {
-    is_mutating_allowed = false;
-    return untrack(() => fn(v));
-  } finally {
-    is_mutating_allowed = previous_is_mutating_allowed;
-  }
+	var previous_is_mutating_allowed = is_mutating_allowed;
+	try {
+		is_mutating_allowed = false;
+		return untrack(() => fn(v));
+	} finally {
+		is_mutating_allowed = previous_is_mutating_allowed;
+	}
 }
 
 /**
@@ -774,9 +774,9 @@ export function get_tracked(tracked) {
  * @param {Block} block
  */
 export function set(tracked, value, block) {
-  if (!is_mutating_allowed) {
-    throw new Error('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
-  }
+	if (!is_mutating_allowed) {
+		throw new Error('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
+	}
 
 	var old_value = tracked.v;
 

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