ripple 0.2.109 → 0.2.110

package/package.json

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

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

@@ -165,18 +165,19 @@ function RipplePlugin(config) {
 
 						// Check if this is #server
 						if (this.input.slice(this.pos, this.pos + 7) === '#server') {
-							// Check that next char after 'server' is whitespace or {
+							// Check that next char after 'server' is whitespace, {, . (dot), or EOF
 							const charAfter =
 								this.pos + 7 < this.input.length ? this.input.charCodeAt(this.pos + 7) : -1;
 							if (
-								charAfter === 123 ||
-								charAfter === 32 ||
-								charAfter === 9 ||
-								charAfter === 10 ||
-								charAfter === 13 ||
-								charAfter === -1
+								charAfter === 123 || // {
+								charAfter === 46 || // . (dot)
+								charAfter === 32 || // space
+								charAfter === 9 || // tab
+								charAfter === 10 || // newline
+								charAfter === 13 || // carriage return
+								charAfter === -1 // EOF
 							) {
-								// { or whitespace or EOF
+								// { or . or whitespace or EOF
 								this.pos += 7; // consume '#server'
 								return this.finishToken(tt.name, '#server');
 							}
@@ -379,6 +380,13 @@ function RipplePlugin(config) {
 					return this.parseTrackedExpression();
 				}
 
+				// Check if this is #server identifier for server function calls
+				if (this.type === tt.name && this.value === '#server') {
+					const node = this.startNode();
+					this.next();
+					return this.finishNode(node, 'ServerIdentifier');
+				}
+
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -388,7 +396,6 @@ function RipplePlugin(config) {
 
 				return super.parseExprAtom(refDestructuringErrors, forNew, forInit);
 			}
-
 			/**
 			 * Parse `@(expression)` syntax for unboxing tracked values
 			 * Creates a TrackedExpression node with the argument property
@@ -419,7 +426,21 @@ function RipplePlugin(config) {
 			parseServerBlock() {
 				const node = this.startNode();
 				this.next();
-				node.body = this.parseBlock();
+
+				const body = this.startNode();
+				node.body = body;
+				body.body = [];
+
+				this.expect(tt.braceL);
+				this.enterScope(0);
+				while (this.type !== tt.braceR) {
+					var stmt = this.parseStatement(null, true);
+					body.body.push(stmt);
+				}
+				this.next();
+				this.exitScope();
+				this.finishNode(body, 'BlockStatement');
+
 				this.awaitPos = 0;
 				return this.finishNode(node, 'ServerBlock');
 			}

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

@@ -96,11 +96,46 @@ const visitors = {
 		return context.next({ ...context.state, function_depth: 0, expression: null });
 	},
 
+	ServerBlock(node, context) {
+		node.metadata = {
+			...node.metadata,
+			exports: [],
+		};
+		context.visit(node.body, { ...context.state, inside_server_block: true });
+	},
+
 	Identifier(node, context) {
 		const binding = context.state.scope.get(node.name);
 		const parent = context.path.at(-1);
 
-		if (binding?.kind === 'prop' || binding?.kind === 'prop_fallback') {
+		if (
+			is_reference(node, /** @type {Node} */ (parent)) &&
+			binding &&
+			context.state.inside_server_block
+		) {
+			let current_scope = binding.scope;
+
+			while (current_scope !== null) {
+				if (current_scope.server_block) {
+					break;
+				}
+				const parent_scope = current_scope.parent;
+				if (parent_scope === null) {
+					error(
+						`Cannot reference client-side variable "${node.name}" from a server block`,
+						context.state.analysis.module.filename,
+						node,
+					);
+				}
+				current_scope = parent_scope;
+			}
+		}
+
+		if (
+			binding?.kind === 'prop' ||
+			binding?.kind === 'prop_fallback' ||
+			binding?.kind === 'for_pattern'
+		) {
 			mark_as_tracked(context.path);
 			if (context.state.metadata?.tracking === false) {
 				context.state.metadata.tracking = true;
@@ -312,6 +347,7 @@ const visitors = {
 			}
 
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 
@@ -347,7 +383,38 @@ const visitors = {
 			}
 		}
 
+		if (node.key) {
+			const state = context.state;
+			const pattern = node.left.declarations[0].id;
+			const paths = extract_paths(pattern);
+			const scope = state.scopes.get(node);
+			const pattern_id = b.id(scope.generate('pattern'));
+
+			node.left.declarations[0].id = pattern_id;
+
+			for (const path of paths) {
+				const name = path.node.name;
+				const binding = context.state.scope.get(name);
+
+				binding.kind = 'for_pattern';
+				if (!binding.metadata) {
+					binding.metadata = {
+						pattern: pattern_id,
+					};
+				}
+
+				if (binding !== null) {
+					binding.transform = {
+						read: () => {
+							return path.expression(b.call('_$_.get', pattern_id));
+						},
+					};
+				}
+			}
+		}
+
 		node.metadata = {
+			...node.metadata,
 			has_template: false,
 		};
 		context.next();
@@ -361,6 +428,23 @@ const visitors = {
 		}
 	},
 
+	ExportNamedDeclaration(node, context) {
+		if (!context.state.inside_server_block) {
+			return context.next();
+		}
+		const server_block = context.path.find((n) => n.type === 'ServerBlock');
+		const declaration = node.declaration;
+
+		if (declaration && declaration.type === 'FunctionDeclaration') {
+			server_block.metadata.exports.push(declaration.id.name);
+		} else {
+			// TODO
+			throw new Error('Not implemented');
+		}
+
+		return context.next();
+	},
+
 	TSTypeReference(node, context) {
 		// bug in our acorn pasrer: it uses typeParameters instead of typeArguments
 		if (node.typeParameters) {
@@ -376,6 +460,7 @@ const visitors = {
 		}
 
 		node.metadata = {
+			...node.metadata,
 			has_template: false,
 		};
 
@@ -391,6 +476,7 @@ const visitors = {
 
 		if (node.alternate) {
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 			context.visit(node.alternate, context.state);
@@ -417,6 +503,7 @@ const visitors = {
 			}
 
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 
@@ -431,6 +518,7 @@ const visitors = {
 			}
 
 			node.metadata = {
+				...node.metadata,
 				has_template: false,
 			};
 
@@ -672,6 +760,7 @@ export function analyze(ast, filename) {
 			scopes,
 			analysis,
 			inside_head: false,
+			inside_server_block: false,
 		},
 		visitors,
 	);

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

@@ -1,4 +1,4 @@
-/** @import {Expression, FunctionExpression, Pattern, Node, Program} from 'estree' */
+/** @import {Expression, FunctionExpression, Node, Program} from 'estree' */
 
 import { walk } from 'zimmerframe';
 import path from 'node:path';
@@ -37,6 +37,7 @@ import is_reference from 'is-reference';
 import { object } from '../../../../utils/ast.js';
 import { render_stylesheets } from '../stylesheet.js';
 import { is_event_attribute, is_passive_event } from '../../../../utils/events.js';
+import { createHash } from 'node:crypto';
 
 function add_ripple_internal_import(context) {
 	if (!context.state.to_ts) {
@@ -54,6 +55,7 @@ function visit_function(node, context) {
 	const state = context.state;
 
 	delete node.returnType;
+	delete node.typeParameters;
 
 	for (const param of node.params) {
 		delete param.typeAnnotation;
@@ -168,7 +170,8 @@ const visitors = {
 					(node.tracked ||
 						binding?.kind === 'prop' ||
 						binding?.kind === 'index' ||
-						binding?.kind === 'prop_fallback') &&
+						binding?.kind === 'prop_fallback' ||
+						binding?.kind === 'for_pattern') &&
 					binding?.node !== node
 				) {
 					if (context.state.metadata?.tracking === false) {
@@ -185,6 +188,10 @@ const visitors = {
 		}
 	},
 
+	ServerIdentifier(node, context) {
+		return b.id('_$_server_$_');
+	},
+
 	ImportDeclaration(node, context) {
 		if (!context.state.to_ts && node.importKind === 'type') {
 			return b.empty;
@@ -1199,6 +1206,14 @@ const visitors = {
 		return context.next();
 	},
 
+	TSInstantiationExpression(node, context) {
+		if (!context.state.to_ts) {
+			// In JavaScript, just return the expression wrapped in parentheses
+			return b.sequence([context.visit(node.expression)]);
+		}
+		return context.next();
+	},
+
 	ExportNamedDeclaration(node, context) {
 		if (!context.state.to_ts && node.exportKind === 'type') {
 			return b.empty;
@@ -1281,8 +1296,34 @@ const visitors = {
 		return b.block(statements);
 	},
 
-	ServerBlock() {
-		return b.empty;
+	ServerBlock(node, context) {
+		const exports = node.metadata.exports;
+
+		if (exports.length === 0) {
+			return b.empty;
+		}
+		const file_path = context.state.filename;
+
+		return b.const(
+			'_$_server_$_',
+			b.object(
+				exports.map((name) => {
+					const func_path = file_path + '#' + name;
+					// needs to be a sha256 hash of func_path, to avoid leaking file structure
+					const hash = createHash('sha256').update(func_path).digest('hex').slice(0, 8);
+
+					return b.prop(
+						'init',
+						b.id(name),
+						b.function(
+							null,
+							[b.rest(b.id('args'))],
+							b.block([b.return(b.call('_$_.rpc', b.literal(hash), b.id('args')))]),
+						),
+					);
+				}),
+			),
+		);
 	},
 
 	Program(node, context) {
@@ -1791,6 +1832,7 @@ export function transform_client(filename, source, analysis, to_ts) {
 		scopes: analysis.scopes,
 		stylesheets: [],
 		to_ts,
+		filename,
 	};
 
 	const program = /** @type {Program} */ (

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

@@ -17,6 +17,7 @@ import is_reference from 'is-reference';
 import { escape } from '../../../../utils/escaping.js';
 import { is_event_attribute } from '../../../../utils/events.js';
 import { render_stylesheets } from '../stylesheet.js';
+import { createHash } from 'node:crypto';
 
 function add_ripple_internal_import(context) {
 	if (!context.state.to_ts) {
@@ -31,6 +32,10 @@ function transform_children(children, context) {
 	const normalized = normalize_children(children, context);
 
 	for (const node of normalized) {
+		if (node.type === 'BreakStatement') {
+			state.init.push(b.break);
+			continue;
+		}
 		if (
 			node.type === 'VariableDeclaration' ||
 			node.type === 'ExpressionStatement' ||
@@ -132,6 +137,39 @@ const visitors = {
 		return context.next();
 	},
 
+	FunctionDeclaration(node, context) {
+		if (!context.state.to_ts) {
+			delete node.returnType;
+			delete node.typeParameters;
+			for (const param of node.params) {
+				delete param.typeAnnotation;
+			}
+		}
+		return context.next();
+	},
+
+	FunctionExpression(node, context) {
+		if (!context.state.to_ts) {
+			delete node.returnType;
+			delete node.typeParameters;
+			for (const param of node.params) {
+				delete param.typeAnnotation;
+			}
+		}
+		return context.next();
+	},
+
+	ArrowFunctionExpression(node, context) {
+		if (!context.state.to_ts) {
+			delete node.returnType;
+			delete node.typeParameters;
+			for (const param of node.params) {
+				delete param.typeAnnotation;
+			}
+		}
+		return context.next();
+	},
+
 	TSAsExpression(node, context) {
 		if (!context.state.to_ts) {
 			return context.visit(node.expression);
@@ -139,6 +177,14 @@ const visitors = {
 		return context.next();
 	},
 
+	TSInstantiationExpression(node, context) {
+		if (!context.state.to_ts) {
+			// In JavaScript, just return the expression wrapped in parentheses
+			return b.sequence([context.visit(node.expression)]);
+		}
+		return context.next();
+	},
+
 	TSTypeAliasDeclaration(_, context) {
 		if (!context.state.to_ts) {
 			return b.empty;
@@ -157,8 +203,23 @@ const visitors = {
 		if (!context.state.to_ts && node.exportKind === 'type') {
 			return b.empty;
 		}
-
-		return context.next();
+		if (!context.state.inside_server_block) {
+			return context.next();
+		}
+		const declaration = node.declaration;
+
+		if (declaration && declaration.type === 'FunctionDeclaration') {
+			return b.stmt(
+				b.assignment(
+					'=',
+					b.member(b.id('_$_server_$_'), b.id(declaration.id.name)),
+					context.visit(declaration),
+				),
+			);
+		} else {
+			// TODO
+			throw new Error('Not implemented');
+		}
 	},
 
 	VariableDeclaration(node, context) {
@@ -380,15 +441,43 @@ const visitors = {
 				}
 			} else {
 				// Component is imported or dynamic - check .async property at runtime
-				const conditional_await = b.conditional(
-					b.member(visit(node.id, state), b.id('async')),
-					b.await(component_call),
-					component_call,
+				// Use if-statement instead of ternary to avoid parser issues with await in conditionals
+				state.init.push(
+					b.if(
+						b.member(visit(node.id, state), b.id('async')),
+						b.block([b.stmt(b.await(component_call))]),
+						b.block([b.stmt(component_call)]),
+					),
 				);
-				state.init.push(b.stmt(conditional_await));
+
+				// Mark parent component as async since we're using await
+				if (state.metadata?.await === false) {
+					state.metadata.await = true;
+				}
 			}
 		}
 	},
+	SwitchStatement(node, context) {
+		if (!is_inside_component(context)) {
+			return context.next();
+		}
+		const cases = [];
+		for (const switch_case of node.cases) {
+			const consequent_scope =
+				context.state.scopes.get(switch_case.consequent) || context.state.scope;
+			const consequent = b.block(
+				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));
+	},
+
 	ForOfStatement(node, context) {
 		if (!is_inside_component(context)) {
 			context.next();
@@ -440,6 +529,10 @@ const visitors = {
 		}
 	},
 
+	ServerIdentifier(node, context) {
+		return b.id('_$_server_$_');
+	},
+
 	ImportDeclaration(node, context) {
 		if (!context.state.to_ts && node.importKind === 'type') {
 			return b.empty;
@@ -599,7 +692,38 @@ const visitors = {
 	},
 
 	ServerBlock(node, context) {
-		return context.visit(node.body);
+		const exports = node.metadata.exports;
+
+		if (exports.length === 0) {
+			return context.visit(node.body);
+		}
+		const file_path = context.state.filename;
+		const block = context.visit(node.body, { ...context.state, inside_server_block: true });
+		const rpc_modules = globalThis.rpc_modules;
+
+		if (rpc_modules) {
+			for (const name of exports) {
+				const func_path = file_path + '#' + name;
+				// needs to be a sha256 hash of func_path, to avoid leaking file structure
+				const hash = createHash('sha256').update(func_path).digest('hex').slice(0, 8);
+				rpc_modules.set(hash, [file_path, name]);
+			}
+		}
+
+		return b.export(
+			b.const(
+				'_$_server_$_',
+				b.call(
+					b.thunk(
+						b.block([
+							b.var('_$_server_$_', b.object([])),
+							...block.body,
+							b.return(b.id('_$_server_$_')),
+						]),
+					),
+				),
+			),
+		);
 	},
 };
 
@@ -614,6 +738,8 @@ export function transform_server(filename, source, analysis) {
 		scopes: analysis.scopes,
 		stylesheets: [],
 		component_metadata,
+		inside_server_block: false,
+		filename,
 	};
 
 	const program = /** @type {ESTree.Program} */ (

package/src/compiler/scope.js

@@ -169,6 +169,14 @@ export function create_scopes(ast, root, parent) {
 			next({ scope });
 		},
 
+		ServerBlock(node, { state, next }) {
+			const scope = state.scope.child();
+			scope.server_block = true;
+			scopes.set(node, scope);
+
+			next({ scope });
+		},
+
 		FunctionExpression(node, { state, next }) {
 			const scope = state.scope.child();
 			scopes.set(node, scope);
@@ -327,6 +335,12 @@ export class Scope {
 	 */
 	tracing = null;
 
+	/**
+	 * Is this scope a top-level server block scope
+	 * @type {boolean}
+	 */
+	server_block = false;
+
 	/**
 	 *
 	 * @param {ScopeRoot} root
@@ -353,7 +367,7 @@ export class Scope {
 				return this.parent.declare(node, kind, declaration_kind);
 			}
 
-			if (declaration_kind === 'import') {
+			if (declaration_kind === 'import' && !this.parent.server_block) {
 				return this.parent.declare(node, kind, declaration_kind, initial);
 			}
 		}

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

@@ -151,7 +151,7 @@ export type DeclarationKind =
 /**
  * Binding kinds
  */
-export type BindingKind = 'normal' | 'each' | 'rest_prop' | 'prop' | 'prop_fallback';
+export type BindingKind = 'normal' | 'for_pattern' | 'rest_prop' | 'prop' | 'prop_fallback';
 
 /**
  * A variable binding in a scope
@@ -299,4 +299,4 @@ export interface DelegatedEventResult {
 	hoisted: boolean;
 	/** The hoisted function */
 	function?: FunctionExpression | FunctionDeclaration | ArrowFunctionExpression;
-}
+}

package/src/compiler/utils.js

@@ -316,6 +316,8 @@ function get_hoisted_params(node, context) {
 		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
 			if (binding.kind === 'prop') {
 				push_unique(b.id('__props'));
+			} else if (binding.kind === 'for_pattern') {
+				push_unique(binding.metadata.pattern);
 			} else if (binding.kind === 'prop_fallback') {
 				push_unique(b.id(binding.node.name));
 			} else if (

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

@@ -1,4 +1,4 @@
-/** @import { Block } from '#client' */
+/** @import { Block, Tracked } from '#client' */
 
 import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
 import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
@@ -12,31 +12,45 @@ import { array_from, is_array } from './utils.js';
  * @param {Node} anchor
  * @param {V} value
  * @param {number} index
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {boolean} is_indexed
+ * @param {boolean} is_keyed
  * @returns {Block}
  */
-function create_item(anchor, value, index, render_fn, is_indexed) {
+function create_item(anchor, value, index, render_fn, is_indexed, is_keyed) {
 	var b = branch(() => {
 		var tracked_index;
+		/** @type {V | Tracked} */
+		var tracked_value = value;
 
-		if (is_indexed) {
+		if (is_indexed || is_keyed) {
 			var block = /** @type {Block} */ (active_block);
 
 			if (block.s === null) {
-				tracked_index = tracked(index, block);
+				if (is_indexed) {
+					tracked_index = tracked(index, block);
+				}
+				if (is_keyed) {
+					tracked_value = tracked(value, block);
+				}
 
 				block.s = {
 					start: null,
 					end: null,
 					i: tracked_index,
+					v: tracked_value,
 				};
 			} else {
-				tracked_index = block.s.i;
+				if (is_indexed) {
+					tracked_index = block.s.i;
+				}
+				if (is_keyed) {
+					tracked_index = block.s.v;
+				}
 			}
-			render_fn(anchor, value, tracked_index);
+			render_fn(anchor, tracked_value, tracked_index);
 		} else {
-			render_fn(anchor, value);
+			render_fn(anchor, tracked_value);
 		}
 	});
 	return b;
@@ -87,7 +101,7 @@ function collection_to_array(collection) {
  * @template V
  * @param {Element} node
  * @param {() => V[] | Iterable<V>} get_collection
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
  * @returns {void}
  */
@@ -116,7 +130,7 @@ export function for_block(node, get_collection, render_fn, flags) {
  * @template K
  * @param {Element} node
  * @param {() => V[] | Iterable<V>} get_collection
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {number} flags
  * @param {(item: V) => K} [get_key]
  * @returns {void}
@@ -175,13 +189,22 @@ function update_index(block, index) {
 	set(block.s.i, index, block);
 }
 
+/**
+ * @param {Block} block
+ * @param {any} value
+ * @returns {void}
+ */
+function update_value(block, value) {
+	set(block.s.v, value, block);
+}
+
 /**
  * @template V
  * @template K
  * @param {Element | Text} anchor
  * @param {Block} block
  * @param {V[]} b
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {boolean} is_controlled
  * @param {boolean} is_indexed
  * @param {(item: V) => K} get_key
@@ -236,7 +259,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 	// Fast-path for create
 	if (a_length === 0) {
 		for (; j < b_length; j++) {
-			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed);
+			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, true);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -261,6 +284,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 			if (is_indexed) {
 				update_index(b_block, j);
 			}
+			update_value(b_block, b_val);
 			++j;
 			if (j > a_end || j > b_end) {
 				break outer;
@@ -282,6 +306,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 			if (is_indexed) {
 				update_index(b_block, b_end);
 			}
+			update_value(b_block, b_val);
 			a_end--;
 			b_end--;
 			if (j > a_end || j > b_end) {
@@ -301,7 +326,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 			while (j <= b_end) {
 				b_val = b[j];
 				var target = j >= a_length ? anchor : a_blocks[j].s.start;
-				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed);
+				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, true);
 				j++;
 			}
 		}
@@ -348,6 +373,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 							if (is_indexed) {
 								update_index(b_block, j);
 							}
+							update_value(b_block, b_val);
 							++patched;
 							break;
 						}
@@ -387,9 +413,11 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 							pos = j;
 						}
 						block = b_blocks[j] = a_blocks[i];
+						b_val = b[j];
 						if (is_indexed) {
 							update_index(block, j);
 						}
+						update_value(b_block, b_val);
 						++patched;
 					} else if (!fast_path_removal) {
 						destroy_block(a_blocks[i]);
@@ -417,7 +445,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
@@ -437,7 +465,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, true);
 			}
 		}
 	}
@@ -452,7 +480,7 @@ function reconcile_by_key(anchor, block, b, render_fn, is_controlled, is_indexed
  * @param {Element | Text} anchor
  * @param {Block} block
  * @param {V[]} b
- * @param {(anchor: Node, value: V, index?: any) => Block} render_fn
+ * @param {(anchor: Node, value: V | Tracked, index?: any) => Block} render_fn
  * @param {boolean} is_controlled
  * @param {boolean} is_indexed
  * @returns {void}
@@ -505,7 +533,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 	// Fast-path for create
 	if (a_length === 0) {
 		for (; j < b_length; j++) {
-			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed);
+			b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed, false);
 		}
 		state.array = b;
 		state.blocks = b_blocks;
@@ -560,7 +588,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 			while (j <= b_end) {
 				b_val = b[j];
 				var target = j >= a_length ? anchor : a_blocks[j].s.start;
-				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed);
+				b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed, false);
 				j++;
 			}
 		}
@@ -673,7 +701,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			} else if (j < 0 || i !== seq[j]) {
 				pos = i + b_start;
 				b_val = b[pos];
@@ -693,7 +721,7 @@ function reconcile_by_ref(anchor, block, b, render_fn, is_controlled, is_indexed
 				next_pos = pos + 1;
 
 				var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
+				b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed, false);
 			}
 		}
 	}

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

@@ -70,3 +70,5 @@ export { head } from './head.js';
 export { script } from './script.js';
 
 export { html } from './html.js';
+
+export { rpc } from './rpc.js';

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

@@ -0,0 +1,14 @@
+
+/**
+ * @param {string} hash 
+ * @param {any[]} args 
+ */
+export function rpc(hash, args) {
+  return fetch('/_$_ripple_rpc_$_/' + hash, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(args)
+  }).then(res => res.json());
+}

package/src/utils/builders.js

@@ -220,6 +220,17 @@ export function export_default(declaration) {
   return { type: 'ExportDefaultDeclaration', declaration };
 }
 
+/**
+ * @param {ESTree.Declaration | null} declaration
+ * @param {ESTree.ExportSpecifier[]} [specifiers]
+ * @param {ESTree.ImportAttribute[]} [attributes]
+ * @param {ESTree.Literal | null} [source]
+ * @returns {ESTree.ExportNamedDeclaration}
+ */
+export function export_builder(declaration, specifiers = [], attributes = [], source = null) {
+  return { type: 'ExportNamedDeclaration', declaration, specifiers, attributes, source };
+}
+
 /**
  * @param {ESTree.Identifier} id
  * @param {ESTree.Pattern[]} params
@@ -581,16 +592,17 @@ export function method(kind, key, params, body, computed = false, is_static = fa
  * @param {ESTree.Identifier | null} id
  * @param {ESTree.Pattern[]} params
  * @param {ESTree.BlockStatement} body
+ * @param {boolean} async
  * @returns {ESTree.FunctionExpression}
  */
-function function_builder(id, params, body) {
+function function_builder(id, params, body, async = false) {
   return {
     type: 'FunctionExpression',
     id,
     params,
     body,
     generator: false,
-    async: false,
+    async,
     metadata: /** @type {any} */ (null), // should not be used by codegen
   };
 }
@@ -812,6 +824,7 @@ export {
   let_builder as let,
   const_builder as const,
   var_builder as var,
+  export_builder as export,
   true_instance as true,
   false_instance as false,
   break_statement as break,

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

@@ -1,5 +1,18 @@
 // 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`] = `

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

@@ -198,7 +198,7 @@ exports[`for statements > correctly handles the index in a for...of loop 3`] = `
 </div>
 `;
 
-exports[`for statements > handles reversing an array manually 1`] = `
+exports[`for statements > handles updating with new objects with same key 1`] = `
 <div>
   <!---->
   <div>
@@ -218,17 +218,17 @@ exports[`for statements > handles reversing an array manually 1`] = `
 </div>
 `;
 
-exports[`for statements > handles reversing an array manually 2`] = `
+exports[`for statements > handles updating with new objects with same key 2`] = `
 <div>
   <!---->
   <div>
-    0:Item 3
+    0:Item 1!
   </div>
   <div>
-    1:Item 2
+    1:Item 2!
   </div>
   <div>
-    2:Item 1
+    2:Item 3!
   </div>
   <!---->
   <button>

package/tests/client/compiler.test.ripple

@@ -495,4 +495,19 @@ effect(() => {
 		const effectMatch = result.js.code.match(/effect\(\(\) => \{([\s\S]+?)\n\t\}\)\)/);
 		expect(effectMatch[1].trim()).toMatchSnapshot();
 	});
+
+	it('compiles TSInstantiationExpression', () => {
+		const source =
+`function makeBox<T>(value: T) {
+	return { value };
+}
+const makeStringBox = makeBox<string>;
+const stringBox = makeStringBox('abc');
+const ErrorMap = Map<string, Error>;
+const errorMap = new ErrorMap();`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
 });

package/tests/client/composite.test.ripple

@@ -659,4 +659,35 @@ describe('composite components', () => {
 
 		expect(container.querySelector('#container').textContent).toBe('I am child 1');
 	});
+
+	it('mutating a tracked value prop should work as intended', () => {
+		const logs = [];
+
+		component Counter({count}) {
+			effect(() => {
+				logs.push(@count);
+			})
+			
+			<button onClick={() => @count = @count + 1}>{'+'}</button>
+		} 
+
+		component App() {
+			const count = track(0);
+
+			<div>
+				<Counter count={count} />
+			</div>
+		}
+
+		render(App);
+		flushSync();
+
+		expect(logs).toEqual([0]);
+
+		const button = container.querySelector('button');
+		button.click();
+		flushSync();
+
+		expect(logs).toEqual([0, 1]);
+	})
 });

package/tests/client/for.test.ripple

@@ -145,12 +145,12 @@ describe('for statements', () => {
 		expect(container).toMatchSnapshot();
 	});
 
-	it('handles reversing an array manually', () => {
+	it('handles updating with new objects with same key', () => {
 		component App() {
 			let items = track([
-				#{ id: 1, text: 'Item 1' },
-				#{ id: 2, text: 'Item 2' },
-				#{ id: 3, text: 'Item 3' },
+				{ id: 1, text: 'Item 1' },
+				{ id: 2, text: 'Item 2' },
+				{ id: 3, text: 'Item 3' },
 			]);
 
 			for (let item of @items; index i; key item.id) {
@@ -163,9 +163,9 @@ describe('for statements', () => {
 				@items[2].id = 1;
 
 				@items = [
-					@items[0],
-					@items[1],
-					@items[2],
+					{...@items[0], text: 'Item 1!'},
+					{...@items[1], text: 'Item 2!'},
+					{...@items[2], text: 'Item 3!'},
 				];
 			}}>{"Reverse"}</button>
 		}

package/tests/client/switch.test.ripple

@@ -0,0 +1,152 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync, track } from 'ripple';
+
+describe('switch statements', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('renders simple switch with literal cases', () => {
+		component App() {
+			let value = track('b');
+
+			<button onClick={() => @value = 'c'}>{'Change to C'}</button>
+			<button onClick={() => @value = 'a'}>{'Change to A'}</button>
+
+			switch (@value) {
+				case 'a':
+					<div>{'Case A'}</div>
+					break;
+				case 'b':
+					<div>{'Case B'}</div>
+					break;
+				case 'c':
+					<div>{'Case C'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('Change to CChange to ACase B');
+
+		container.querySelectorAll('button')[0].click(); // Change to C
+		flushSync();
+		expect(container.textContent).toBe('Change to CChange to ACase C');
+
+		container.querySelectorAll('button')[1].click(); // Change to A
+		flushSync();
+		expect(container.textContent).toBe('Change to CChange to ACase A');
+	});
+
+	it('renders switch with reactive discriminant', () => {
+		component App() {
+			let count = track(1);
+
+			<button onClick={() => @count++}>{'Increment'}</button>
+
+			switch (@count) {
+				case 1:
+					<div>{'Count is 1'}</div>
+					break;
+				case 2:
+					<div>{'Count is 2'}</div>
+					break;
+				default:
+					<div>{'Count is other'}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('IncrementCount is 1');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.textContent).toBe('IncrementCount is 2');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.textContent).toBe('IncrementCount is other');
+	});
+
+	it('renders switch with default clause only', () => {
+		component App() {
+			let value = track('x');
+
+			<button onClick={() => @value = 'y'}>{'Change Value'}</button>
+
+			switch (@value) {
+				default:
+					<div>{'Default for ' + @value}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('Change ValueDefault for x');
+
+		container.querySelector('button').click();
+		flushSync();
+		expect(container.textContent).toBe('Change ValueDefault for y');
+	});
+
+	it('renders switch with template content and JS logic', () => {
+		component App() {
+			let status = track('active');
+			let message = track('');
+
+			<button onClick={() => @status = 'pending'}>{'Pending'}</button>
+			<button onClick={() => @status = 'completed'}>{'Completed'}</button>
+			<button onClick={() => @status = 'error'}>{'Error'}</button>
+
+			switch (@status) {
+				case 'active':
+					message = 'Currently active.';
+					<div>{'Status: ' + @message}</div>
+					break;
+				case 'pending':
+					message = 'Waiting for completion.';
+					<div>{'Status: ' + @message}</div>
+					break;
+				case 'completed':
+					message = 'Task finished!';
+					<div class="success">{'Status: ' + @message}</div>
+					break;
+				default:
+					message = 'An error occurred.';
+					<div class="error">{'Status: ' + @message}</div>
+			}
+		}
+
+		render(App);
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: Currently active.');
+
+		container.querySelectorAll('button')[0].click(); // Pending
+		flushSync();
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: Waiting for completion.');
+
+		container.querySelectorAll('button')[1].click(); // Completed
+		flushSync();
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: Task finished!');
+		expect(container.querySelector('.success')).toBeTruthy();
+
+		container.querySelectorAll('button')[2].click(); // Error
+		flushSync();
+		expect(container.textContent).toBe('PendingCompletedErrorStatus: An error occurred.');
+		expect(container.querySelector('.error')).toBeTruthy();
+	});
+});

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

@@ -0,0 +1,37 @@
+// 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 imported component with conditional async in SSR 1`] = `
+"import * as _$_ from 'ripple/internal/server';
+
+import { ChildComponent } from './Child.ripple';
+
+export async function App(__output) {
+	return _$_.async(async () => {
+		_$_.push_component();
+		__output.push('<div');
+		__output.push('>');
+
+		if (ChildComponent.async) {
+			await ChildComponent(__output, { message: "hello" });
+		} else {
+			ChildComponent(__output, { message: "hello" });
+		}
+
+		__output.push('</div>');
+		_$_.pop_component();
+	});
+}"
+`;

package/tests/server/compiler.test.ripple

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { compile } from 'ripple/compiler'
+
+describe('compiler success tests', () => {
+
+
+	it('compiles TSInstantiationExpression', () => {
+		const source =
+`function makeBox<T>(value: T) {
+	return { value };
+}
+const makeStringBox = makeBox<string>;
+const stringBox = makeStringBox('abc');
+const ErrorMap = Map<string, Error>;
+const errorMap = new ErrorMap();`;
+
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+
+		expect(result.js.code).toMatchSnapshot();
+	});
+
+	it('compiles imported component with conditional async in SSR', () => {
+		const source =
+`import { ChildComponent } from './Child.ripple';
+
+export component App() {
+	<div>
+		<ChildComponent message="hello" />
+	</div>
+}`;
+
+		const result = compile(source, 'test.ripple', { mode: 'server' });
+
+		// Should use if-statement instead of ternary to avoid parser issues
+		expect(result.js.code).toContain('if (ChildComponent.async)');
+		expect(result.js.code).toContain('await ChildComponent');
+		expect(result.js.code).toMatchSnapshot();
+	});
+});

package/tests/server/switch.test.ripple

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+
+describe('SSR: switch statements', () => {
+	it('renders simple switch with literal cases', async () => {
+		component App() {
+			let value = 'b';
+
+			switch (value) {
+				case 'a':
+					<div>{'Case A'}</div>
+					break;
+				case 'b':
+					<div>{'Case B'}</div>
+					break;
+				case 'c':
+					<div>{'Case C'}</div>
+					break;
+				default:
+					<div>{'Default Case'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Case B</div>');
+	});
+});