ripple 0.2.124 → 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.124",
+  "version": "0.2.126",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

package/src/compiler/index.js

@@ -24,7 +24,7 @@ export function parse(source) {
  */
 export function compile(source, filename, options = {}) {
   const ast = parse_module(source);
-  const analysis = analyze(ast, filename);
+  const analysis = analyze(ast, filename, options);
   const result = options.mode === 'server'
       ? transform_server(filename, source, analysis)
       : transform_client(filename, source, analysis, false);

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

@@ -1392,6 +1392,7 @@ function RipplePlugin(config) {
 					this.next();
 					this.enterScope(0);
 					node.id = this.parseIdent();
+					this.declareName(node.id.name, 'var', node.id.start);		
 					this.parseFunctionParams(node);
 					this.eat(tt.braceL);
 					node.body = [];

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

@@ -111,7 +111,8 @@ const visitors = {
 		if (
 			is_reference(node, /** @type {Node} */ (parent)) &&
 			binding &&
-			context.state.inside_server_block
+			context.state.inside_server_block &&
+			context.state.scope.server_block
 		) {
 			let current_scope = binding.scope;
 
@@ -349,13 +350,14 @@ const visitors = {
 			node.metadata = {
 				...node.metadata,
 				has_template: false,
+				has_await: false,
 			};
 
 			context.visit(switch_case, context.state);
 
-			if (!node.metadata.has_template) {
+			if (!node.metadata.has_template && !node.metadata.has_await) {
 				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.',
+					'Component switch statements must contain a template or an await expression in each of their cases. Move the switch statement into an effect if it does not render anything.',
 					context.state.analysis.module.filename,
 					node,
 				);
@@ -416,15 +418,16 @@ const visitors = {
 		node.metadata = {
 			...node.metadata,
 			has_template: false,
+			has_await: false,
 		};
 		context.next();
 
-		if (!node.metadata.has_template) {
+		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-				'Component for...of loops must contain a template 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,
+				);
 		}
 	},
 
@@ -437,9 +440,14 @@ const visitors = {
 
 		if (declaration && declaration.type === 'FunctionDeclaration') {
 			server_block.metadata.exports.push(declaration.id.name);
+		} else if (declaration && declaration.type === 'Component') {
+			// Handle exported components in server blocks
+			if (server_block) {
+				server_block.metadata.exports.push(declaration.id.name);
+			}
 		} else {
 			// TODO
-			throw new Error('Not implemented');
+			throw new Error('Not implemented: Exported declaration type not supported in server blocks.');
 		}
 
 		return context.next();
@@ -462,35 +470,39 @@ const visitors = {
 		node.metadata = {
 			...node.metadata,
 			has_template: false,
+			has_await: false,
 		};
 
 		context.visit(node.consequent, context.state);
 
-		if (!node.metadata.has_template) {
+		if (!node.metadata.has_template && !node.metadata.has_await) {
 			error(
-				'Component if statements must contain a template 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) {
-			node.metadata = {
-				...node.metadata,
-				has_template: false,
-			};
+			node.metadata.has_template = false;
+			node.metadata.has_await = false;
 			context.visit(node.alternate, context.state);
 
-			if (!node.metadata.has_template) {
+			if (!node.metadata.has_template && !node.metadata.has_await) {
 				error(
-					'Component if statements must contain a template 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,
+					);
 			}
 		}
 	},
-
+	/**
+	 * 
+	 * @param {any} node 
+	 * @param {any} context 
+	 * @returns 
+	 */
 	TryStatement(node, context) {
 		if (!is_inside_component(context)) {
 			return context.next();
@@ -744,7 +756,12 @@ const visitors = {
 		mark_control_flow_has_template(context.path);
 		context.next();
 	},
-
+	
+ /**
+	* 
+	* @param {any} node 
+	* @param {any} context 
+	*/
 	AwaitExpression(node, context) {
 		if (is_inside_component(context)) {
 			if (context.state.metadata?.await === false) {
@@ -754,18 +771,27 @@ const visitors = {
 		const parent_block = get_parent_block_node(context);
 
 		if (parent_block !== null && parent_block.type !== 'Component') {
-			error(
-				'`await` expressions can only currently be used at the top-level of a component body. Support for using them in control flow statements will be added in the future.',
-				context.state.analysis.module.filename,
-				node,
-			);
+			if (context.state.inside_server_block === false) {
+				error(
+					'`await` is not allowed in client-side control-flow statements',
+					context.state.analysis.module.filename,
+					node
+				);
+			}
 		}
 
+		if (parent_block) {
+			if (!parent_block.metadata) {
+				parent_block.metadata = {};
+			}
+			parent_block.metadata.has_await = true;
+		}
+		
 		context.next();
 	},
 };
 
-export function analyze(ast, filename) {
+export function analyze(ast, filename, options = {}) {
 	const scope_root = new ScopeRoot();
 
 	const { scope, scopes } = create_scopes(ast, scope_root, null);
@@ -785,7 +811,7 @@ export function analyze(ast, filename) {
 			scopes,
 			analysis,
 			inside_head: false,
-			inside_server_block: false,
+			inside_server_block: options.mode === 'server',
 		},
 		visitors,
 	);

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/phases/3-transform/server/index.js

@@ -120,7 +120,18 @@ const visitors = {
 			component_fn = b.async(component_fn);
 		}
 
-		return component_fn;
+		const declaration = b.function_declaration(node.id, component_fn.params, component_fn.body, component_fn.async);
+
+		if (metadata.await) {
+			const parent = context.path.at(-1);
+			if (parent.type === 'Program' || parent.type === 'BlockStatement') {
+				const body = parent.body;
+				const index = body.indexOf(node);
+				body.splice(index + 1, 0, b.stmt(b.assignment('=', b.member(node.id, b.id('async')), b.true)));
+			}
+		}
+
+		return declaration;
 	},
 
 	CallExpression(node, context) {
@@ -270,11 +281,10 @@ const visitors = {
 			let class_attribute = null;
 
 			const handle_static_attr = (name, value) => {
-				const attr_str = ` ${name}${
-					is_boolean_attribute(name) && value === true
+				const attr_str = ` ${name}${is_boolean_attribute(name) && value === true
 						? ''
 						: `="${value === true ? '' : escape_html(value, true)}"`
-				}`;
+					}`;
 
 				if (is_spreading) {
 					// For spread attributes, store just the actual value, not the full attribute string
@@ -549,15 +559,22 @@ const visitors = {
 		context.state.init.push(b.if(context.visit(node.test), consequent, alternate));
 	},
 
-	Identifier(node, context) {
-		const parent = /** @type {Node} */ (context.path.at(-1));
+	AssignmentExpression(node, context) {
+		const left = node.left;
 
-		if (is_reference(node, parent) && node.tracked) {
-			add_ripple_internal_import(context);
-			return b.call('_$_.get', build_getter(node, context));
+		if (left.type === 'Identifier' && left.tracked) {
+			return b.call(
+				'set',
+				context.visit(left, { ...context.state, metadata: { tracking: false } }),
+				context.visit(node.right)
+			);
 		}
+
+		return context.next();
 	},
 
+
+
 	ServerIdentifier(node, context) {
 		return b.id('_$_server_$_');
 	},
@@ -605,22 +622,22 @@ const visitors = {
 			const try_statements =
 				node.handler !== null
 					? [
-							b.try(
-								b.block(body),
-								b.catch_clause(
-									node.handler.param || b.id('error'),
-									b.block(
-										transform_body(node.handler.body.body, {
-											...context,
-											state: {
-												...context.state,
-												scope: context.state.scopes.get(node.handler.body),
-											},
-										}),
-									),
+						b.try(
+							b.block(body),
+							b.catch_clause(
+								node.handler.param || b.id('error'),
+								b.block(
+									transform_body(node.handler.body.body, {
+										...context,
+										state: {
+											...context.state,
+											scope: context.state.scopes.get(node.handler.body),
+										},
+									}),
 								),
 							),
-						]
+						),
+					]
 					: body;
 
 			context.state.init.push(
@@ -647,6 +664,8 @@ const visitors = {
 	},
 
 	AwaitExpression(node, context) {
+		context.state.scope.server_block = true
+		context.inside_server_block = true
 		if (context.state.to_ts) {
 			return context.next();
 		}
@@ -672,10 +691,8 @@ const visitors = {
 		const parent = context.path.at(-1);
 
 		if (node.tracked || (node.property.type === 'Identifier' && node.property.tracked)) {
-			add_ripple_internal_import(context);
-
 			return b.call(
-				'_$_.get',
+				'get',
 				b.member(
 					context.visit(node.object),
 					node.computed ? context.visit(node.property) : node.property,
@@ -690,13 +707,15 @@ const visitors = {
 
 	Text(node, { visit, state }) {
 		const metadata = { await: false };
-		const expression = visit(node.expression, { ...state, metadata });
+		let expression = visit(node.expression, { ...state, metadata });
+
+		if (expression.type === 'Identifier' && expression.tracked) {
+			expression = b.call('get', expression);
+		}
 
 		if (expression.type === 'Literal') {
 			state.init.push(
-				b.stmt(
-					b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value))),
-				),
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value)))),
 			);
 		} else {
 			state.init.push(
@@ -791,13 +810,7 @@ export function transform_server(filename, source, analysis) {
 	}
 
 	// Add async property to component functions
-	for (const metadata of state.component_metadata) {
-		if (metadata.async) {
-			program.body.push(
-				b.stmt(b.assignment('=', b.member(b.id(metadata.id), b.id('async')), b.true)),
-			);
-		}
-	}
+	
 
 	for (const import_node of state.imports) {
 		program.body.unshift(b.stmt(b.id(import_node)));

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])) {