ripple 0.2.104 → 0.2.106

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.104",
+  "version": "0.2.106",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -67,6 +67,7 @@
     "@sveltejs/acorn-typescript": "^1.0.6",
     "acorn": "^8.15.0",
     "clsx": "^2.1.1",
+    "esm-env": "^1.2.2",
     "esrap": "^2.1.0",
     "is-reference": "^3.0.3",
     "magic-string": "^0.30.18",

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

@@ -167,9 +167,17 @@ function RipplePlugin(config) {
 
 				if (code === 64) {
 					// @ character
-					// Look ahead to see if this is followed by a valid identifier character
+					// 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
+							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
@@ -348,6 +356,11 @@ function RipplePlugin(config) {
 			 * @returns {any} Parsed expression atom
 			 */
 			parseExprAtom(refDestructuringErrors, forNew, forInit) {
+				// Check if this is @(expression) for unboxing tracked values
+				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();
@@ -358,6 +371,33 @@ function RipplePlugin(config) {
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
 			}
 
+			/**
+			 * Parse `@(expression)` syntax for unboxing tracked values
+			 * Creates a TrackedExpression node with the argument property
+			 * @returns {any} TrackedExpression node
+			 */
+			parseTrackedExpression() {
+				const node = this.startNode();
+				this.next(); // consume '@(' token
+				node.argument = this.parseExpression();
+				this.expect(tt.parenR); // expect ')'
+				return this.finishNode(node, 'TrackedExpression');
+			}
+
+			/**
+			 * Override to allow TrackedExpression as a valid lvalue for update expressions
+			 * @param {any} expr - Expression to check
+			 * @param {any} bindingType - Binding type
+			 * @param {any} checkClashes - Check for clashes
+			 */
+			checkLValSimple(expr, bindingType, checkClashes) {
+				// Allow TrackedExpression as a valid lvalue for ++/-- operators
+				if (expr.type === 'TrackedExpression') {
+					return;
+				}
+				return super.checkLValSimple(expr, bindingType, checkClashes);
+			}
+
 			parseTrackedArrayExpression() {
 				const node = this.startNode();
 				this.next(); // consume the '#['
@@ -1280,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,11 @@ const visitors = {
 				}
 			} else {
 				const binding = context.state.scope.get(node.name);
+				const isRightSideOfAssignment = parent.type === 'AssignmentExpression' && parent.right === node;
 				if (
 					(context.state.metadata?.tracking === false ||
-						(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression')) &&
+						(parent.type !== 'AssignmentExpression' && parent.type !== 'UpdateExpression') ||
+						isRightSideOfAssignment) &&
 					(node.tracked ||
 						binding?.kind === 'prop' ||
 						binding?.kind === 'index' ||
@@ -175,10 +177,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);
+				}
 			}
 		}
 	},
@@ -362,6 +364,10 @@ const visitors = {
 		);
 	},
 
+	TrackedExpression(node, context) {
+		return b.call('_$_.get', context.visit(node.argument));
+	},
+
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
@@ -463,10 +469,9 @@ const visitors = {
 
 		const handle_static_attr = (name, value) => {
 			const attr_value = b.literal(
-				` ${name}${
-					is_boolean_attribute(name) && value === true
-						? ''
-						: `="${value === true ? '' : escape_html(value, true)}"`
+				` ${name}${is_boolean_attribute(name) && value === true
+					? ''
+					: `="${value === true ? '' : escape_html(value, true)}"`
 				}`,
 			);
 
@@ -938,10 +943,10 @@ const visitors = {
 				operator === '='
 					? context.visit(right)
 					: b.binary(
-							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Pattern} */ (context.visit(left)),
-							/** @type {Expression} */ (context.visit(right)),
-						),
+						operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Pattern} */(context.visit(left)),
+							/** @type {Expression} */(context.visit(right)),
+					),
 				b.id('__block'),
 			);
 		}
@@ -957,12 +962,12 @@ const visitors = {
 				operator === '='
 					? context.visit(right)
 					: b.binary(
-							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Pattern} */ (
-								context.visit(left, { ...context.state, metadata: { tracking: false } })
-							),
-							/** @type {Expression} */ (context.visit(right)),
+						operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Pattern} */(
+							context.visit(left, { ...context.state, metadata: { tracking: false } })
 						),
+							/** @type {Expression} */(context.visit(right)),
+					),
 				b.id('__block'),
 			);
 		}
@@ -1001,6 +1006,15 @@ const visitors = {
 			);
 		}
 
+		if (argument.type === 'TrackedExpression') {
+			return b.call(
+				node.prefix ? '_$_.update_pre' : '_$_.update',
+				context.visit(argument.argument, { ...context.state, metadata: { tracking: null } }),
+				b.id('__block'),
+				node.operator === '--' ? b.literal(-1) : undefined,
+			);
+		}
+
 		const left = object(argument);
 		const binding = context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;
@@ -1061,6 +1075,52 @@ 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();
@@ -1112,12 +1172,12 @@ const visitors = {
 								b.stmt(b.call(b.id('__render'), b.id(consequent_id))),
 								alternate_id
 									? b.stmt(
-											b.call(
-												b.id('__render'),
-												b.id(alternate_id),
-												node.alternate ? b.literal(false) : undefined,
-											),
-										)
+										b.call(
+											b.id('__render'),
+											b.id(alternate_id),
+											node.alternate ? b.literal(false) : undefined,
+										),
+									)
 									: undefined,
 							),
 						]),
@@ -1170,9 +1230,9 @@ const visitors = {
 					node.handler === null
 						? b.literal(null)
 						: b.arrow(
-								[b.id('__anchor'), ...(node.handler.param ? [node.handler.param] : [])],
-								b.block(transform_body(node.handler.body.body, context)),
-							),
+							[b.id('__anchor'), ...(node.handler.param ? [node.handler.param] : [])],
+							b.block(transform_body(node.handler.body.body, context)),
+						),
 					node.pending === null
 						? undefined
 						: b.arrow([b.id('__anchor')], b.block(transform_body(node.pending.body, context))),
@@ -1268,7 +1328,7 @@ function join_template(items) {
 	}
 
 	for (const quasi of template.quasis) {
-		quasi.value.raw = sanitize_template_string(/** @type {string} */ (quasi.value.cooked));
+		quasi.value.raw = sanitize_template_string(/** @type {string} */(quasi.value.cooked));
 	}
 
 	quasi.tail = true;
@@ -1469,6 +1529,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))),
@@ -1620,6 +1681,9 @@ 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 {
 				debugger;
 			}
@@ -1701,7 +1765,7 @@ export function transform_client(filename, source, analysis, to_ts) {
 		to_ts,
 	};
 
-	const program = /** @type {ESTree.Program} */ (
+	const program = /** @type {Program} */ (
 		walk(analysis.ast, { ...state, namespace: 'html' }, visitors)
 	);
 

package/src/compiler/types/index.d.ts

@@ -65,6 +65,11 @@ export interface TrackedArrayExpression extends Omit<ArrayExpression, 'type'> {
 	elements: (Expression | null)[];
 }
 
+export interface TrackedExpression extends Omit<Expression, 'type'> {
+	argument: Expression;
+	type: 'TrackedExpression';
+}
+
 /**
  * Tracked object expression node
  */

package/src/compiler/utils.js

@@ -808,7 +808,7 @@ export function normalize_children(children, context) {
  * @param {TransformContext} context
  */
 function normalize_child(node, normalized, context) {
-	if (node.type === 'EmptyStatement') {
+	if (node.type === 'EmptyStatement' || node.type === 'BreakStatement') {
 		return;
 	} else if (
 		node.type === 'Element' &&

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/css.js

@@ -1,3 +1,5 @@
+import { DEV } from 'esm-env';
+
 export function remove_ssr_css() {
 	if (!document || typeof requestAnimationFrame !== "function") {
 		return;
@@ -7,14 +9,14 @@ export function remove_ssr_css() {
 }
 
 function remove_styles() {
-	if (import.meta.env.DEV) {
+	if (DEV) {
 		const styles = document.querySelector('style[data-vite-dev-id]');
 		if (styles) {
 			remove();
 		} else {
 			requestAnimationFrame(remove_styles);
 		}
-	} else if (import.meta.env.PROD) {
+	} else {
 		remove_when_css_loaded(() => requestAnimationFrame(remove));
 	}
 }

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;