ripple 0.2.125 → 0.2.126

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.126",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

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/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

@@ -24,6 +24,7 @@ import {
 	TRY_BLOCK,
 	UNINITIALIZED,
 	REF_PROP,
+	TRACKED_OBJECT,
 } from './constants.js';
 import { capture, suspend } from './try.js';
 import {
@@ -412,7 +413,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) {
@@ -472,7 +473,7 @@ export function async_computed(fn, block) {
 		}
 
 		promise.then((v) => {
-			if (parent && is_destroyed(/** @type {Block} */ (parent))) {
+			if (parent && is_destroyed(/** @type {Block} */(parent))) {
 				return;
 			}
 			if (promise === current && t.v !== v) {
@@ -746,7 +747,7 @@ export function get(tracked) {
 	}
 
 	return (tracked.f & DERIVED) !== 0
-		? get_derived(/** @type {Derived} */ (tracked))
+		? get_derived(/** @type {Derived} */(tracked))
 		: get_tracked(tracked);
 }
 
@@ -872,7 +873,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 +883,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);
@@ -1164,7 +1179,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/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');
+		});
+	});
+});