ripple 0.2.125 → 0.2.128

package/package.json

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

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

@@ -109,7 +109,7 @@ const visitors = {
 		const parent = context.path.at(-1);
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			binding &&
 			context.state.inside_server_block &&
 			context.state.scope.server_block
@@ -144,7 +144,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -155,7 +155,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -174,6 +174,18 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
+		if (node.object.type === 'Identifier' && !node.object.tracked) {
+			const binding = context.state.scope.get(node.object.name);
+
+			if (binding !== null && binding.initial?.type === 'CallExpression' && is_ripple_track_call(binding.initial.callee, context)) {
+				error(
+					`Accessing a tracked object directly is not allowed, use the \`@\` prefix to read the value inside a tracked object - for example \`@${node.object.name}${node.property.type === 'Identifier' ? `.${node.property.name}` : ''}\``,
+					context.state.analysis.module.filename,
+					node,
+				)
+			}
+		}
+
 		context.next();
 	},
 
@@ -424,10 +436,10 @@ const visitors = {
 
 		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-					'Component for...of loops must contain a template or an await expression in their body. Move the for loop into an effect if it does not render anything.',
-					context.state.analysis.module.filename,
-					node,
-				);
+				'Component for...of loops must contain a template or an await expression in their body. Move the for loop into an effect if it does not render anything.',
+				context.state.analysis.module.filename,
+				node,
+			);
 		}
 	},
 
@@ -477,10 +489,10 @@ const visitors = {
 
 		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-					'Component if statements must contain a template or an await expression in their "then" body. Move the if statement into an effect if it does not render anything.',
-					context.state.analysis.module.filename,
-					node,
-				);
+				'Component if statements must contain a template or an await expression in their "then" body. Move the if statement into an effect if it does not render anything.',
+				context.state.analysis.module.filename,
+				node,
+			);
 		}
 
 		if (node.alternate) {
@@ -490,10 +502,10 @@ const visitors = {
 
 			if (!node.metadata.has_template && !node.metadata.has_await) {
 				error(
-						'Component if statements must contain a template or an await expression in their "else" body. Move the if statement into an effect if it does not render anything.',
-						context.state.analysis.module.filename,
-						node,
-					);
+					'Component if statements must contain a template or an await expression in their "else" body. Move the if statement into an effect if it does not render anything.',
+					context.state.analysis.module.filename,
+					node,
+				);
 			}
 		}
 	},
@@ -599,9 +611,9 @@ const visitors = {
 				state.elements.push(node);
 				// Mark dynamic elements as scoped by default since we can't match CSS at compile time
 				if (state.component?.css) {
-						node.metadata.scoped = true;
+					node.metadata.scoped = true;
 				}
-		}
+			}
 		}
 
 		if (is_dom_element) {
@@ -756,12 +768,12 @@ const visitors = {
 		mark_control_flow_has_template(context.path);
 		context.next();
 	},
-	
- /**
-	* 
-	* @param {any} node 
-	* @param {any} context 
-	*/
+
+	/**
+	 * 
+	 * @param {any} node 
+	 * @param {any} context 
+	 */
 	AwaitExpression(node, context) {
 		if (is_inside_component(context)) {
 			if (context.state.metadata?.await === false) {
@@ -786,7 +798,7 @@ const visitors = {
 			}
 			parent_block.metadata.has_await = true;
 		}
-		
+
 		context.next();
 	},
 };

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

@@ -48,6 +48,12 @@ function add_ripple_internal_import(context) {
 }
 
 function visit_function(node, context) {
+	// Function overload signatures don't have a body - they're TypeScript-only
+	// Remove them when compiling to JavaScript
+	if (!context.state.to_ts && !node.body) {
+		return b.empty;
+	}
+
 	if (context.state.to_ts) {
 		return context.next(context.state);
 	}
@@ -545,10 +551,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)}"`
 				}`,
 			);
 
@@ -880,16 +885,16 @@ const visitors = {
 				}
 			}
 
-		if (node.metadata.scoped && state.component.css) {
-			const hasClassAttr = node.attributes.some(attr => 
-				attr.type === 'Attribute' && attr.name.type === 'Identifier' && attr.name.name === 'class'
-			);
-			if (!hasClassAttr) {
-				const name = is_spreading ? '#class' : 'class';
-				const value = state.component.css.hash;
-				props.push(b.prop('init', b.key(name), b.literal(value)));
+			if (node.metadata.scoped && state.component.css) {
+				const hasClassAttr = node.attributes.some(attr =>
+					attr.type === 'Attribute' && attr.name.type === 'Identifier' && attr.name.name === 'class'
+				);
+				if (!hasClassAttr) {
+					const name = is_spreading ? '#class' : 'class';
+					const value = state.component.css.hash;
+					props.push(b.prop('init', b.key(name), b.literal(value)));
+				}
 			}
-		}
 
 			const children_filtered = [];
 
@@ -1039,10 +1044,10 @@ const visitors = {
 				operator === '='
 					? context.visit(right)
 					: b.binary(
-							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Expression} */ (context.visit(left)),
-							/** @type {Expression} */ (context.visit(right)),
-						),
+						operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Expression} */(context.visit(left)),
+							/** @type {Expression} */(context.visit(right)),
+					),
 				b.id('__block'),
 			);
 		}
@@ -1058,12 +1063,12 @@ const visitors = {
 				operator === '='
 					? context.visit(right)
 					: b.binary(
-							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {Expression} */ (
-								context.visit(left, { ...context.state, metadata: { tracking: false } })
-							),
-							/** @type {Expression} */ (context.visit(right)),
+						operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Expression} */(
+							context.visit(left, { ...context.state, metadata: { tracking: false } })
 						),
+							/** @type {Expression} */(context.visit(right)),
+					),
 				b.id('__block'),
 			);
 		}
@@ -1270,12 +1275,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,
 							),
 						]),
@@ -1307,6 +1312,22 @@ const visitors = {
 			return b.empty;
 		}
 
+		// Remove TSDeclareFunction nodes (function overload signatures) in JavaScript mode
+		if (!context.state.to_ts && node.declaration?.type === 'TSDeclareFunction') {
+			return b.empty;
+		}
+
+		return context.next();
+	},
+
+	TSDeclareFunction(node, context) {
+		// TSDeclareFunction nodes are TypeScript overload signatures - remove in JavaScript mode
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+
+		// In TypeScript mode, keep as TSDeclareFunction - esrap will print it with 'declare'
+		// We'll remove the 'declare' keyword in post-processing
 		return context.next();
 	},
 
@@ -1336,9 +1357,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))),
@@ -1464,7 +1485,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;
@@ -1947,7 +1968,7 @@ export function transform_client(filename, source, analysis, to_ts) {
 	};
 
 	const program = /** @type {Program} */ (
-		walk(/** @type {Node} */ (analysis.ast), { ...state, namespace: 'html' }, visitors)
+		walk(/** @type {Node} */(analysis.ast), { ...state, namespace: 'html' }, visitors)
 	);
 
 	for (const hoisted of state.hoisted) {
@@ -1971,6 +1992,15 @@ export function transform_client(filename, source, analysis, to_ts) {
 		sourceMapSource: path.basename(filename),
 	});
 
+	// Post-process TypeScript output to remove 'declare' from function overload signatures
+	// Function overload signatures in regular .ts files should not have 'declare' keyword
+	if (to_ts) {
+		// Remove 'export declare function' -> 'export function' (for overloads only, not implementations)
+		// Match: export declare function name(...): type;
+		// Don't match: export declare function name(...): type { (has body)
+		js.code = js.code.replace(/^(export\s+)declare\s+(function\s+\w+[^{\n]*;)$/gm, '$1$2');
+	}
+
 	const css = render_stylesheets(state.stylesheets);
 
 	return {

package/src/compiler/phases/3-transform/segments.js

@@ -1111,6 +1111,42 @@ export function convert_source_map_to_mappings(ast, source, generated_code, sour
 			} else if (node.type === 'TSAnyKeyword' || node.type === 'TSUnknownKeyword' || node.type === 'TSNumberKeyword' || node.type === 'TSObjectKeyword' || node.type === 'TSBooleanKeyword' || node.type === 'TSBigIntKeyword' || node.type === 'TSStringKeyword' || node.type === 'TSSymbolKeyword' || node.type === 'TSVoidKeyword' || node.type === 'TSUndefinedKeyword' || node.type === 'TSNullKeyword' || node.type === 'TSNeverKeyword' || node.type === 'TSThisType' || node.type === 'TSIntrinsicKeyword') {
 				// Primitive type keywords - leaf nodes, no children
 				return;
+			} else if (node.type === 'TSDeclareFunction') {
+				// TypeScript declare function: declare function foo(): void;
+				// Visit in source order: id, typeParameters, params, returnType
+				if (node.id) {
+					visit(node.id);
+				}
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				if (node.params) {
+					for (const param of node.params) {
+						visit(param);
+					}
+				}
+				if (node.returnType) {
+					visit(node.returnType);
+				}
+				return;
+			} else if (node.type === 'TSExportAssignment') {
+				// TypeScript export assignment: export = foo;
+				if (node.expression) {
+					visit(node.expression);
+				}
+				return;
+			} else if (node.type === 'TSNamespaceExportDeclaration') {
+				// TypeScript namespace export: export as namespace foo;
+				if (node.id) {
+					visit(node.id);
+				}
+				return;
+			} else if (node.type === 'TSExternalModuleReference') {
+				// TypeScript external module reference: import foo = require('bar');
+				if (node.expression) {
+					visit(node.expression);
+				}
+				return;
 			}
 
 			throw new Error(`Unhandled AST node type in mapping walker: ${node.type}`);

package/src/compiler/utils.js

@@ -1,4 +1,4 @@
-/** @import { Identifier, Pattern, Super, FunctionExpression, FunctionDeclaration, ArrowFunctionExpression, MemberExpression, AssignmentExpression, Expression, Node, AssignmentOperator } from 'estree' */
+/** @import { Identifier, Pattern, Super, FunctionExpression, FunctionDeclaration, ArrowFunctionExpression, MemberExpression, AssignmentExpression, Expression, Node, AssignmentOperator, CallExpression } from 'estree' */
 /** @import { Component, Element, Attribute, SpreadAttribute, ScopeInterface, Binding, RippleNode, CompilerState, TransformContext, DelegatedEventResult, TextNode } from '#compiler' */
 import { build_assignment_value, extract_paths } from '../utils/ast.js';
 import * as b from '../utils/builders.js';
@@ -352,7 +352,7 @@ export function build_hoisted_params(node, context) {
 		}
 	} else {
 		for (const param of node.params) {
-			params.push(/** @type {Pattern} */ (context.visit(param)));
+			params.push(/** @type {Pattern} */(context.visit(param)));
 		}
 	}
 
@@ -554,7 +554,7 @@ export function is_ripple_import(callee, context) {
  * @returns {boolean}
  */
 export function is_declared_function_within_component(node, context) {
-	const component = context.path?.find(/** @param {RippleNode} n */ (n) => n.type === 'Component');
+	const component = context.path?.find(/** @param {RippleNode} n */(n) => n.type === 'Component');
 
 	if (node.type === 'Identifier' && component) {
 		const binding = context.state.scope.get(node.name);
@@ -611,8 +611,8 @@ export function visit_assignment_expression(node, context, build_assignment) {
 				assignment ??
 				b.assignment(
 					'=',
-					/** @type {Pattern} */ (context.visit(path.node)),
-					/** @type {Expression} */ (context.visit(value)),
+					/** @type {Pattern} */(context.visit(path.node)),
+					/** @type {Expression} */(context.visit(value)),
 				)
 			);
 		});
@@ -702,8 +702,8 @@ export function build_assignment(operator, left, right, context) {
 			object,
 			b.assignment(
 				operator,
-				/** @type {Pattern} */ (context.visit(left)),
-				/** @type {Expression} */ (context.visit(right)),
+				/** @type {Pattern} */(context.visit(left)),
+				/** @type {Expression} */(context.visit(right)),
 			),
 		);
 	}
@@ -830,7 +830,7 @@ function normalize_child(node, normalized, context) {
  */
 export function get_parent_block_node(context) {
 	const path = context.path;
-	
+
 	for (let i = path.length - 1; i >= 0; i -= 1) {
 		const context_node = path[i];
 		if (

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

@@ -167,6 +167,7 @@ export function bindValue(maybe_tracked) {
 					value = [].map.call(select.querySelectorAll(query), get_option_value);
 				} else {
 					/** @type {HTMLOptionElement | null} */
+					// @ts-ignore
 					var selected_option =
 						select.querySelector(query) ??
 						// will fall back to first non-disabled option if no option is selected
@@ -184,6 +185,7 @@ export function bindValue(maybe_tracked) {
 				// Mounting and value undefined -> take selection from dom
 				if (mounting && value === undefined) {
 					/** @type {HTMLOptionElement | null} */
+					// @ts-ignore
 					var selected_option = select.querySelector(':checked');
 					if (selected_option !== null) {
 						value = get_option_value(selected_option);

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

@@ -1,7 +1,7 @@
 /** @import { Block } from '#client' */
 
 import { destroy_block, ref } from './blocks.js';
-import { REF_PROP } from './constants.js';
+import { REF_PROP, TRACKED, TRACKED_OBJECT } from './constants.js';
 import {
 	get_descriptors,
 	get_own_property_symbols,
@@ -310,6 +310,10 @@ export function apply_element_spread(element, fn) {
 		}
 
 		for (const symbol of get_own_property_symbols(next)) {
+			// Ensure we are not trying to write to a proxied object
+			if (TRACKED_OBJECT in next) {
+				next = {...next};
+			}
 			var ref_fn = next[symbol];
 
 			if (symbol.description === REF_PROP && (!prev || ref_fn !== prev[symbol])) {

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

@@ -1,5 +1,6 @@
 /** @import { Block, Component, Dependency, Derived, Tracked } from '#client' */
 
+import { DEV } from 'esm-env';
 import {
 	destroy_block,
 	destroy_non_branch_children,
@@ -24,6 +25,7 @@ import {
 	TRY_BLOCK,
 	UNINITIALIZED,
 	REF_PROP,
+	TRACKED_OBJECT,
 } from './constants.js';
 import { capture, suspend } from './try.js';
 import {
@@ -137,13 +139,13 @@ export function run_teardown(block) {
  * @param {Derived} computed
  */
 function update_derived(computed) {
-	var value = computed.v;
+	var value = computed.__v;
 
 	if (value === UNINITIALIZED || is_tracking_dirty(computed.d)) {
 		value = run_derived(computed);
 
-		if (value !== computed.v) {
-			computed.v = value;
+		if (value !== computed.__v) {
+			computed.__v = value;
 			computed.c = increment_clock();
 		}
 	}
@@ -276,12 +278,23 @@ var empty_get_set = { get: undefined, set: undefined };
  */
 export function tracked(v, block, get, set) {
 	// TODO: now we expose tracked, we should likely block access in DEV somehow
+	if (DEV) {
+		return {
+			DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY: true,
+			a: get || set ? { get, set } : empty_get_set,
+			b: block || active_block,
+			c: 0,
+			f: TRACKED,
+			__v: v,
+		};
+	}
+
 	return {
 		a: get || set ? { get, set } : empty_get_set,
 		b: block || active_block,
 		c: 0,
 		f: TRACKED,
-		v,
+		__v: v,
 	};
 }
 
@@ -293,6 +306,21 @@ export function tracked(v, block, get, set) {
  * @returns {Derived}
  */
 export function derived(fn, block, get, set) {
+	if (DEV) {
+		return {
+			DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY: true,
+			a: get || set ? { get, set } : empty_get_set,
+			b: block || active_block,
+			blocks: null,
+			c: 0,
+			co: active_component,
+			d: null,
+			f: TRACKED | DERIVED,
+			fn,
+			__v: UNINITIALIZED,
+		};
+	}
+
 	return {
 		a: get || set ? { get, set } : empty_get_set,
 		b: block || active_block,
@@ -302,7 +330,7 @@ export function derived(fn, block, get, set) {
 		d: null,
 		f: TRACKED | DERIVED,
 		fn,
-		v: UNINITIALIZED,
+		__v: UNINITIALIZED,
 	};
 }
 
@@ -353,7 +381,7 @@ export function track_split(v, l, b) {
 			t = tracked(undefined, b);
 			exists = !!descriptors[key];
 			if (exists) {
-				t = define_property(t, 'v', descriptors[key]);
+				t = define_property(t, '__v', descriptors[key]);
 			}
 		}
 
@@ -412,7 +440,7 @@ function is_tracking_dirty(tracking) {
 		var tracked = tracking.t;
 
 		if ((tracked.f & DERIVED) !== 0) {
-			update_derived(/** @type {Derived} **/ (tracked));
+			update_derived(/** @type {Derived} **/(tracked));
 		}
 
 		if (tracked.c > tracking.c) {
@@ -467,19 +495,19 @@ export function async_computed(fn, block) {
 		} else {
 			for (var i = 0; i < deferred.length; i++) {
 				var tracked = deferred[i];
-				new_values.set(tracked, { v: tracked.v, c: tracked.c });
+				new_values.set(tracked, { v: tracked.__v, c: tracked.c });
 			}
 		}
 
 		promise.then((v) => {
-			if (parent && is_destroyed(/** @type {Block} */ (parent))) {
+			if (parent && is_destroyed(/** @type {Block} */(parent))) {
 				return;
 			}
-			if (promise === current && t.v !== v) {
+			if (promise === current && t.__v !== v) {
 				restore();
 
-				if (t.v === UNINITIALIZED) {
-					t.v = v;
+				if (t.__v === UNINITIALIZED) {
+					t.__v = v;
 				} else {
 					set(t, v, block);
 				}
@@ -492,7 +520,7 @@ export function async_computed(fn, block) {
 					var tracked = deferred[i];
 					var stored = /** @type {{ v: any, c: number }} */ (new_values.get(tracked));
 					var { v, c } = stored;
-					tracked.v = v;
+					tracked.__v = v;
 					tracked.c = c;
 					schedule_update(tracked.b);
 				}
@@ -730,10 +758,10 @@ export function get_derived(computed) {
 	}
 	var get = computed.a.get;
 	if (get !== undefined) {
-		computed.v = trigger_track_get(get, computed.v);
+		computed.__v = trigger_track_get(get, computed.__v);
 	}
 
-	return computed.v;
+	return computed.__v;
 }
 
 /**
@@ -746,7 +774,7 @@ export function get(tracked) {
 	}
 
 	return (tracked.f & DERIVED) !== 0
-		? get_derived(/** @type {Derived} */ (tracked))
+		? get_derived(/** @type {Derived} */(tracked))
 		: get_tracked(tracked);
 }
 
@@ -754,7 +782,7 @@ export function get(tracked) {
  * @param {Tracked} tracked
  */
 export function get_tracked(tracked) {
-	var value = tracked.v;
+	var value = tracked.__v;
 	if (tracking) {
 		register_dependency(tracked);
 	}
@@ -790,7 +818,7 @@ export function set(tracked, value, block) {
 		);
 	}
 
-	var old_value = tracked.v;
+	var old_value = tracked.__v;
 
 	if (value !== old_value) {
 		var tracked_block = tracked.b;
@@ -808,7 +836,7 @@ export function set(tracked, value, block) {
 			value = untrack(() => set(value, old_value));
 		}
 
-		tracked.v = value;
+		tracked.__v = value;
 		tracked.c = increment_clock();
 		schedule_update(tracked_block);
 	}
@@ -872,7 +900,7 @@ export function flush_sync(fn) {
  * @returns {Object}
  */
 export function spread_props(fn, block) {
-	let computed = derived(fn, block);
+	var computed = derived(fn, block);
 
 	return new Proxy(
 		{},
@@ -882,9 +910,23 @@ export function spread_props(fn, block) {
 				return obj[property];
 			},
 			has(target, property) {
+				if (property === TRACKED_OBJECT) {
+					return true;
+				}
 				const obj = get_derived(computed);
 				return property in obj;
 			},
+			getOwnPropertyDescriptor(target, key) {
+				const obj = get_derived(computed);
+
+				if (key in obj) {
+					return {
+						enumerable: true,
+						configurable: true,
+						value: obj[key],
+					};
+				}
+			},
 			ownKeys() {
 				const obj = get_derived(computed);
 				return Reflect.ownKeys(obj);
@@ -976,7 +1018,7 @@ export function update(tracked, block, d = 1) {
  * @returns {void}
  */
 export function increment(tracked, block) {
-	set(tracked, tracked.v + 1, block);
+	set(tracked, tracked.__v + 1, block);
 }
 
 /**
@@ -985,7 +1027,7 @@ export function increment(tracked, block) {
  * @returns {void}
  */
 export function decrement(tracked, block) {
-	set(tracked, tracked.v - 1, block);
+	set(tracked, tracked.__v - 1, block);
 }
 
 /**
@@ -1164,7 +1206,7 @@ export async function maybe_tracked(v) {
 		} else {
 			value = await async_computed(async () => {
 				return await get_tracked(v);
-			}, /** @type {Block} */ (active_block));
+			}, /** @type {Block} */(active_block));
 		}
 	} else {
 		value = await v;

package/src/runtime/internal/client/types.d.ts

@@ -18,14 +18,16 @@ export type Dependency = {
 };
 
 export type Tracked<V = any> = {
+	DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY?: true;
 	a: { get?: Function, set?: Function };
 	b: Block;
 	c: number;
 	f: number;
-	v: V;
+	__v: V;
 };
 
 export type Derived = {
+	DO_NOT_ACCESS_THIS_OBJECT_DIRECTLY?: true;
 	a: { get?: Function, set?: Function };
 	b: Block;
 	blocks: null | Block[];
@@ -34,7 +36,7 @@ export type Derived = {
 	d: null;
 	f: number;
 	fn: Function;
-	v: any;
+	__v: any;
 };
 
 export type Block = {

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

@@ -62,7 +62,9 @@ class Output {
 /** @type {render} */
 export async function render(component) {
 	const output = new Output(null);
-	let head, body, css;
+	let head = '';
+	let body = '';
+	let css = new Set();
 
 	try {
 		if (component.async) {

package/src/runtime/proxy.js

@@ -40,6 +40,7 @@ export function proxy(value, block) {
     return value;
   }
 
+  /** @type {Map<any,Tracked>} */
   var tracked_elements = new Map();
   var is_proxied_array = is_array(value);
   /** @type {Tracked} */
@@ -97,8 +98,8 @@ export function proxy(value, block) {
       var t = tracked_elements.get(prop);
       var exists = prop in target;
 
-      if (is_proxied_array && prop === 'length') {
-        for (var i = value; i < t.v; i += 1) {
+      if (is_proxied_array && prop === 'length' && t !== undefined) {
+        for (var i = value; i < t.__v; i += 1) {
           var other_t = tracked_elements.get(i + '');
           if (other_t !== undefined) {
             set(other_t, UNINITIALIZED, block);
@@ -124,7 +125,7 @@ export function proxy(value, block) {
           tracked_elements.set(prop, t);
         }
       } else {
-        exists = t.v !== UNINITIALIZED;
+        exists = t.__v !== UNINITIALIZED;
 
         set(t, value, block);
       }
@@ -143,7 +144,7 @@ export function proxy(value, block) {
         // will not cause the length to be out of sync.
         var n = Number(prop);
 
-        if (Number.isInteger(n) && n >= tracked_len.v) {
+        if (Number.isInteger(n) && n >= tracked_len.__v) {
           set(tracked_len, n + 1, block);
         }
       }
@@ -180,7 +181,7 @@ export function proxy(value, block) {
       }
 
       var t = tracked_elements.get(prop);
-      var exists = (t !== undefined && t.v !== UNINITIALIZED) || Reflect.has(target, prop);
+      var exists = (t !== undefined && t.__v !== UNINITIALIZED) || Reflect.has(target, prop);
 
       if (t !== undefined || !exists || get_descriptor(target, prop)?.writable) {
         if (t === undefined) {
@@ -229,11 +230,11 @@ export function proxy(value, block) {
     ownKeys(target) {
       var own_keys = Reflect.ownKeys(target).filter((key) => {
         var t = tracked_elements.get(key);
-        return t === undefined || t.v !== UNINITIALIZED;
+        return t === undefined || t.__v !== UNINITIALIZED;
       });
 
       for (var [key, t] of tracked_elements) {
-        if (t.v !== UNINITIALIZED && !(key in target)) {
+        if (t.__v !== UNINITIALIZED && !(key in target)) {
           own_keys.push(key);
         }
       }
@@ -249,7 +250,7 @@ export function proxy(value, block) {
         if (t) descriptor.value = get(t);
       } else if (descriptor === undefined) {
         var t = tracked_elements.get(prop);
-        var value = t?.v;
+        var value = t?.__v;
 
         if (t !== undefined && value !== UNINITIALIZED) {
           return {

package/tests/client/function-overload-import.ripple

@@ -0,0 +1,10 @@
+export function test(arg: string): string
+export function test(arg: number): string
+
+export function test(arg: string | number): string {
+  if (typeof arg === 'string') {
+    return arg;
+  }
+
+  return arg.toString();
+}

package/tests/client/function-overload.test.ripple

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync } from 'ripple';
+
+import { test } from './function-overload-import.ripple';
+
+describe('function overload import tests', () => {
+	describe('function overloads', () => {
+		it('test function with string argument returns the string', () => {
+			const result = test('hello');
+			expect(result).toBe('hello');
+			expect(typeof result).toBe('string');
+		});
+
+		it('test function with number argument returns string representation', () => {
+			const result = test(42);
+			expect(result).toBe('42');
+			expect(typeof result).toBe('string');
+		});
+
+		it('test function with zero returns "0"', () => {
+			const result = test(0);
+			expect(result).toBe('0');
+		});
+
+		it('test function with negative number returns string representation', () => {
+			const result = test(-100);
+			expect(result).toBe('-100');
+		});
+
+		it('test function with empty string returns empty string', () => {
+			const result = test('');
+			expect(result).toBe('');
+		});
+
+		it('test function with decimal number returns string representation', () => {
+			const result = test(3.14159);
+			expect(result).toBe('3.14159');
+		});
+	});
+});