ripple 0.2.44 → 0.2.46

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.44",
+  "version": "0.2.46",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -38,6 +38,84 @@ function RipplePlugin(config) {
 				return null;
 			}
 
+			// Override getTokenFromCode to handle @ as an identifier prefix
+			getTokenFromCode(code) {
+				if (code === 64) { // '@' character
+					// Look ahead to see if this is followed by a valid identifier character
+					if (this.pos + 1 < this.input.length) {
+						const nextChar = this.input.charCodeAt(this.pos + 1);
+						// Check if the next character can start an identifier
+						if ((nextChar >= 65 && nextChar <= 90) || // A-Z
+							(nextChar >= 97 && nextChar <= 122) || // a-z
+							nextChar === 95 || nextChar === 36) { // _ or $
+							
+							// Check if we're in an expression context
+							// In JSX expressions, inside parentheses, assignments, etc.
+							// we want to treat @ as an identifier prefix rather than decorator
+							const currentType = this.type;
+							const inExpression = this.exprAllowed || 
+								currentType === tt.braceL || // Inside { }
+								currentType === tt.parenL || // Inside ( )
+								currentType === tt.eq || // After =
+								currentType === tt.comma || // After ,
+								currentType === tt.colon || // After :
+								currentType === tt.question || // After ?
+								currentType === tt.logicalOR || // After ||
+								currentType === tt.logicalAND || // After &&
+								currentType === tt.dot || // After . (for member expressions like obj.@prop)
+								currentType === tt.questionDot; // After ?. (for optional chaining like obj?.@prop)
+							
+							if (inExpression) {
+								return this.readAtIdentifier();
+							}
+						}
+					}
+				}
+				return super.getTokenFromCode(code);
+			}
+
+			// Read an @ prefixed identifier
+			readAtIdentifier() {
+				const start = this.pos;
+				this.pos++; // skip '@'
+				
+				// Read the identifier part manually
+				let word = '';
+				while (this.pos < this.input.length) {
+					const ch = this.input.charCodeAt(this.pos);
+					if ((ch >= 65 && ch <= 90) || // A-Z
+						(ch >= 97 && ch <= 122) || // a-z
+						(ch >= 48 && ch <= 57) || // 0-9
+						ch === 95 || ch === 36) { // _ or $
+						word += this.input[this.pos++];
+					} else {
+						break;
+					}
+				}
+				
+				if (word === '') {
+					this.raise(start, 'Invalid @ identifier');
+				}
+				
+				// Return the full identifier including @
+				return this.finishToken(tt.name, '@' + word);
+			}
+
+			// Override parseIdent to mark @ identifiers as tracked
+			parseIdent(liberal) {
+				const node = super.parseIdent(liberal);
+				if (node.name && node.name.startsWith('@')) {
+					node.name = node.name.slice(1); // Remove the '@' for internal use
+					node.tracked = true;
+					node.start++;
+					const prev_pos = this.pos;
+					this.pos = node.start;
+					node.loc.start = this.curPosition();
+					this.pos = prev_pos;
+				}
+				return node;
+			}
+
 			parseExportDefaultDeclaration() {
 				// Check if this is "export default component"
 				if (this.value === 'component') {
@@ -159,6 +237,11 @@ function RipplePlugin(config) {
 						return this.finishNode(node, 'SpreadAttribute');
 					} else {
 						const id = this.parseIdentNode();
+						node.tracked = false;
+						if (id.name.startsWith('@')) {
+							node.tracked = true;
+							id.name = id.name.slice(1);
+						}
 						this.finishNode(id, 'Identifier');
 						node.name = id;
 						node.value = id;

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

@@ -79,6 +79,10 @@ function visit_function(node, context) {
 		function_depth: context.state.function_depth + 1,
 		expression: null,
 	});
+
+	if (node.metadata.tracked) {
+		mark_as_tracked(context.path);
+	}
 }
 
 function mark_as_tracked(path) {
@@ -117,11 +121,35 @@ const visitors = {
 
 		if (
 			is_reference(node, /** @type {Node} */ (parent)) &&
-			context.state.metadata?.tracking === false &&
-			is_tracked_name(node.name) &&
+			(is_tracked_name(node) || node.tracked) &&
 			binding?.node !== node
 		) {
-			context.state.metadata.tracking = true;
+			mark_as_tracked(context.path);
+			if (context.state.metadata?.tracking === false) {
+				context.state.metadata.tracking = true;
+			}
+		}
+
+		if (
+			is_reference(node, /** @type {Node} */ (parent)) &&
+			node.tracked &&
+			binding?.node !== node
+		) {
+			if (context.state.metadata?.tracking === false) {
+				context.state.metadata.tracking = true;
+			}
+			binding.transform = {
+				read_tracked: (node) => b.call('$.get_tracked', node),
+				assign_tracked: (node, value) => b.call('$.set', node, value, b.id('__block')),
+				update_tracked: (node) => {
+					return b.call(
+						node.prefix ? '$.update_pre' : '$.update',
+						node.argument,
+						b.id('__block'),
+						node.operator === '--' && b.literal(-1),
+					);
+				},
+			};
 		}
 
 		context.next();
@@ -247,7 +275,7 @@ const visitors = {
 										if (!computed) {
 											return node;
 										}
-										return b.call('$.set_property', node, computed, value, b.id('__block'));
+										return b.call('$.old_set_property', node, computed, value, b.id('__block'));
 									},
 								};
 								break;
@@ -264,6 +292,15 @@ const visitors = {
 				const has_tracked = paths.some(
 					(path) => path.node.type === 'Identifier' && is_tracked_name(path.node.name),
 				);
+				for (const path of paths) {
+					if (path.node.tracked) {
+						error(
+							'Variables cannot be reactively referenced using @',
+							state.analysis.module.filename,
+							path.node,
+						);
+					}
+				}
 
 				if (has_tracked) {
 					const tmp = state.scope.generate('tmp');
@@ -290,7 +327,7 @@ const visitors = {
 								} else if (metadata.tracking && !metadata.await) {
 									if (is_tracked_name(path.node.name) && value.type === 'MemberExpression') {
 										return b.call(
-											'$.get_property',
+											'$.old_get_property',
 											b.call('$.get_computed', value.object),
 											value.property.type === 'Identifier'
 												? b.literal(value.property.name)
@@ -312,7 +349,7 @@ const visitors = {
 
 								if (is_tracked_name(path.node.name) && value.type === 'MemberExpression') {
 									return b.call(
-										'$.get_property',
+										'$.old_get_property',
 										value.object,
 										value.property.type === 'Identifier'
 											? b.literal(value.property.name)
@@ -375,10 +412,10 @@ const visitors = {
 							};
 						} else {
 							binding.transform = {
-								read: (_) => b.call('$.get_property', b.id('__props'), b.literal(name)),
+								read: (_) => b.call('$.old_get_property', b.id('__props'), b.literal(name)),
 								assign: (node, value) => {
 									return b.call(
-										'$.set_property',
+										'$.old_set_property',
 										b.id('__props'),
 										b.literal(name),
 										value,
@@ -387,7 +424,7 @@ const visitors = {
 								},
 								update: (_) =>
 									b.call(
-										node.prefix ? '$.update_property_pre' : '$.update_property',
+										node.prefix ? '$.old_update_property_pre' : '$.old_update_property',
 										b.id('__props'),
 										b.literal(name),
 										b.id('__block'),
@@ -508,6 +545,8 @@ const visitors = {
 
 								attr.metadata.delegated = delegated_event;
 							}
+						} else {
+							visit(attr.value, state);
 						}
 					}
 				} else if (attr.type === 'AccessorAttribute') {

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

@@ -405,7 +405,9 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		if (attribute.type === 'SpreadAttribute') return true;
 
 		if (attribute.type !== 'Attribute') continue;
-		if (attribute.name.name.toLowerCase() !== name.toLowerCase()) continue;
+
+		const lowerCaseName = name.toLowerCase();
+		if (![lowerCaseName, `$${lowerCaseName}`].includes(attribute.name.name.toLowerCase())) continue;
 
 		if (expected_value === null) return true;
 

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

@@ -17,16 +17,25 @@ import {
 	is_boolean_attribute,
 	is_dom_property,
 	is_ripple_import,
-	is_declared_within_component,
+	is_declared_function_within_component,
 	is_inside_call_expression,
 	is_tracked_computed_property,
 	is_value_static,
 	is_void_element,
+	is_component_level_function,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { extract_paths, object } from '../../../utils/ast.js';
 import { render_stylesheets } from './stylesheet.js';
 
+function add_ripple_internal_import(context) {
+	if (!context.state.to_ts) {
+		if (!context.state.imports.has(`import * as $ from 'ripple/internal/client'`)) {
+			context.state.imports.add(`import * as $ from 'ripple/internal/client'`);
+		}
+	}
+}
+
 function visit_function(node, context) {
 	if (context.state.to_ts) {
 		context.next(context.state);
@@ -54,13 +63,18 @@ function visit_function(node, context) {
 	let body = context.visit(node.body, state);
 
 	if (metadata?.tracked === true) {
+		const new_body = [];
+
+		if (!is_inside_component(context, true) && is_component_level_function(context)) {
+			add_ripple_internal_import(context);
+			new_body.push(b.var('__block', b.call('$.scope')));
+		}
+		new_body.push(...body.body);
+
 		return /** @type {FunctionExpression} */ ({
 			...node,
 			params: node.params.map((param) => context.visit(param, state)),
-			body:
-				body.type === 'BlockStatement'
-					? { ...body, body: [b.var('__block', b.call('$.scope')), ...body.body] }
-					: body,
+			body: body.type === 'BlockStatement' ? { ...body, body: new_body } : body,
 		});
 	}
 
@@ -72,10 +86,17 @@ function build_getter(node, context) {
 
 	for (let i = context.path.length - 1; i >= 0; i -= 1) {
 		const binding = state.scope.get(node.name);
+		const transform = binding?.transform;
 
 		// don't transform the declaration itself
-		if (node !== binding?.node && binding?.transform?.read) {
-			return binding.transform.read(node, context.state?.metadata?.spread, context.visit);
+		if (node !== binding?.node) {
+			const read_fn = transform?.read || (node.tracked && transform?.read_tracked);
+
+			if (read_fn) {
+				add_ripple_internal_import(context);
+
+				return read_fn(node, context.state?.metadata?.spread, context.visit);
+			}
 		}
 	}
 
@@ -100,7 +121,7 @@ const visitors = {
 			const binding = context.state.scope.get(node.name);
 			if (
 				context.state.metadata?.tracking === false &&
-				is_tracked_name(node.name) &&
+				(is_tracked_name(node.name) || node.tracked) &&
 				binding?.node !== node
 			) {
 				context.state.metadata.tracking = true;
@@ -135,6 +156,18 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
+		if (
+			!context.state.to_ts &&
+			callee.type === 'Identifier' &&
+			callee.name === 'tracked' &&
+			is_ripple_import(callee, context)
+		) {
+			return {
+				...node,
+				arguments: [...node.arguments.map((arg) => context.visit(arg)), b.id('__block')],
+			};
+		}
+
 		if (
 			!is_inside_component(context, true) ||
 			context.state.to_ts ||
@@ -144,7 +177,7 @@ const visitors = {
 			(is_ripple_import(callee, context) &&
 				(callee.type !== 'Identifier' ||
 					(callee.name !== 'array' && callee.name !== 'deferred'))) ||
-			is_declared_within_component(callee, context)
+			is_declared_function_within_component(callee, context)
 		) {
 			return context.next();
 		}
@@ -199,8 +232,8 @@ const visitors = {
 							callee.optional ? b.true : undefined,
 							node.optional ? b.true : undefined,
 							...node.arguments.map((arg) => context.visit(arg)),
-						)
-					)
+						),
+					),
 				);
 			}
 		}
@@ -267,6 +300,18 @@ const visitors = {
 	MemberExpression(node, context) {
 		const parent = context.path.at(-1);
 
+		if (node.property.type === 'Identifier' && node.property.tracked) {
+			add_ripple_internal_import(context);
+
+			context.state.metadata.tracking = true;
+			return b.call(
+				'$.get_property',
+				context.visit(node.object),
+				node.computed ? context.visit(node.property) : b.literal(node.property.name),
+				node.optional ? b.true : undefined,
+			);
+		}
+
 		if (parent.type !== 'AssignmentExpression') {
 			const object = node.object;
 			const property = node.property;
@@ -286,14 +331,14 @@ const visitors = {
 
 				if (tracked_name) {
 					return b.call(
-						'$.get_property',
+						'$.old_get_property',
 						context.visit(object),
 						property.type === 'Identifier' ? b.literal(property.name) : property,
 						node.optional ? b.true : undefined,
 					);
 				} else {
 					return b.call(
-						'$.get_property',
+						'$.old_get_property',
 						context.visit(object),
 						context.visit(property),
 						node.optional ? b.true : undefined,
@@ -508,9 +553,10 @@ const visitors = {
 
 			if (is_spreading) {
 				// For spread attributes, store just the actual value, not the full attribute string
-				const actual_value = is_boolean_attribute(name) && value === true 
-					? b.literal(true) 
-					: b.literal(value === true ? '' : value);
+				const actual_value =
+					is_boolean_attribute(name) && value === true
+						? b.literal(true)
+						: b.literal(value === true ? '' : value);
 				spread_attributes.push(b.prop('init', b.literal(name), actual_value));
 			} else {
 				state.template.push(attr_value);
@@ -542,9 +588,10 @@ const visitors = {
 
 						if (name === 'value' || name === '$value') {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
+							const metadata = { tracking: false, await: false };
+							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$value') {
+							if (name === '$value' || metadata.tracking) {
 								local_updates.push(b.stmt(b.call('$.set_value', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_value', id, expression)));
@@ -555,9 +602,10 @@ const visitors = {
 
 						if (name === 'checked' || name === '$checked') {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
+							const metadata = { tracking: false, await: false };
+							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$checked') {
+							if (name === '$checked' || metadata.tracking) {
 								local_updates.push(b.stmt(b.call('$.set_checked', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_checked', id, expression)));
@@ -567,9 +615,10 @@ const visitors = {
 
 						if (name === 'selected' || name === '$selected') {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
+							const metadata = { tracking: false, await: false };
+							const expression = visit(attr.value, { ...state, metadata });
 
-							if (name === '$selected') {
+							if (name === '$selected' || metadata.tracking) {
 								local_updates.push(b.stmt(b.call('$.set_selected', id, expression)));
 							} else {
 								state.init.push(b.stmt(b.call('$.set_selected', id, expression)));
@@ -607,7 +656,7 @@ const visitors = {
 									delegated_assignment = b.array(args);
 								} else if (
 									handler.type === 'Identifier' &&
-									is_declared_within_component(handler, context)
+									is_declared_function_within_component(handler, context)
 								) {
 									delegated_assignment = handler;
 								} else {
@@ -639,11 +688,12 @@ const visitors = {
 							continue;
 						}
 
+						const metadata = { tracking: false, await: false };
+						const expression = visit(attr.value, { ...state, metadata });
 						// All other attributes
-						if (is_tracked_name(name)) {
-							const attribute = name.slice(1);
+						if (is_tracked_name(name) || metadata.tracking) {
+							const attribute = is_tracked_name(name) ? name.slice(1) : name;
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
 
 							if (is_dom_property(attribute)) {
 								local_updates.push(b.stmt(b.assignment('=', b.member(id, attribute), expression)));
@@ -654,7 +704,6 @@ const visitors = {
 							}
 						} else {
 							const id = state.flush_node();
-							const expression = visit(attr.value, state);
 
 							if (is_dom_property(name)) {
 								state.init.push(b.stmt(b.assignment('=', b.member(id, name), expression)));
@@ -682,13 +731,14 @@ const visitors = {
 					handle_static_attr(class_attribute.name.name, value);
 				} else {
 					const id = state.flush_node();
-					let expression = visit(class_attribute.value, state);
+					const metadata = { tracking: false, await: false };
+					let expression = visit(class_attribute.value, { ...state, metadata });
 
 					if (node.metadata.scoped && state.component.css) {
 						expression = b.binary('+', b.literal(state.component.css.hash + ' '), expression);
 					}
 
-					if (class_attribute.name.name === '$class') {
+					if (class_attribute.name.name === '$class' || metadata.tracking) {
 						local_updates.push(b.stmt(b.call('$.set_class', id, expression)));
 					} else {
 						state.init.push(b.stmt(b.call('$.set_class', id, expression)));
@@ -880,9 +930,7 @@ const visitors = {
 
 	Fragment(node, context) {
 		if (!context.state.to_ts) {
-			if (!context.state.imports.has(`import * as $ from 'ripple/internal/client'`)) {
-				context.state.imports.add(`import * as $ from 'ripple/internal/client'`);
-			}
+			add_ripple_internal_import(context);
 		}
 
 		const metadata = { await: false };
@@ -906,11 +954,7 @@ const visitors = {
 	Component(node, context) {
 		let prop_statements;
 
-		if (!context.state.to_ts) {
-			if (!context.state.imports.has(`import * as $ from 'ripple/internal/client'`)) {
-				context.state.imports.add(`import * as $ from 'ripple/internal/client'`);
-			}
-		}
+		add_ripple_internal_import(context);
 
 		const metadata = { await: false };
 
@@ -1000,12 +1044,43 @@ const visitors = {
 
 		const left = node.left;
 
+		if (
+			left.type === 'MemberExpression' &&
+			left.property.type === 'Identifier' &&
+			left.property.tracked
+		) {
+			add_ripple_internal_import(context);
+			const operator = node.operator;
+			const right = node.right;
+
+			if (operator !== '=') {
+				context.state.metadata.tracking = true;
+			}
+
+			return b.call(
+				'$.set_property',
+				context.visit(left.object),
+				left.computed ? context.visit(left.property) : b.literal(left.property.name),
+				operator === '='
+					? context.visit(right)
+					: b.binary(
+							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
+							/** @type {Pattern} */ (context.visit(left)),
+							/** @type {Expression} */ (context.visit(right)),
+						),
+				b.id('__block'),
+			);
+		}
+
 		if (left.type === 'MemberExpression') {
 			// need to capture setting length of array to throw a runtime error
-			if (left.property.type === 'Identifier' && (is_tracked_name(left.property.name) || left.property.name === 'length')) {
+			if (
+				left.property.type === 'Identifier' &&
+				(is_tracked_name(left.property.name) || left.property.name === 'length')
+			) {
 				if (left.property.name !== '$length') {
 					return b.call(
-						'$.set_property',
+						'$.old_set_property',
 						context.visit(left.object),
 						left.computed ? context.visit(left.property) : b.literal(left.property.name),
 						visit_assignment_expression(node, context, build_assignment) ?? context.next(),
@@ -1038,6 +1113,23 @@ const visitors = {
 		}
 		const argument = node.argument;
 
+		if (
+			argument.type === 'MemberExpression' &&
+			argument.property.type === 'Identifier' &&
+			argument.property.tracked
+		) {
+			add_ripple_internal_import(context);
+			context.state.metadata.tracking = true;
+
+			return b.call(
+				node.prefix ? '$.update_pre_property' : '$.update_property',
+				context.visit(argument.object),
+				argument.computed ? context.visit(argument.property) : b.literal(argument.property.name),
+				b.id('__block'),
+				node.operator === '--' ? b.literal(-1) : undefined,
+			);
+		}
+
 		if (
 			argument.type === 'MemberExpression' &&
 			((argument.property.type === 'Identifier' && is_tracked_name(argument.property.name)) ||
@@ -1045,7 +1137,7 @@ const visitors = {
 					is_tracked_computed_property(argument.object, argument.property, context)))
 		) {
 			return b.call(
-				node.prefix ? '$.update_pre_property' : '$.update_property',
+				node.prefix ? '$.old_update_pre_property' : '$.old_update_property',
 				context.visit(argument.object),
 				argument.computed ? context.visit(argument.property) : b.literal(argument.property.name),
 				b.id('__block'),
@@ -1058,8 +1150,9 @@ const visitors = {
 		const transformers = left && binding?.transform;
 
 		if (left === argument) {
-			if (transformers?.update) {
-				return transformers.update(node);
+			const update_fn = transformers?.update || transformers?.update_tracked;
+			if (update_fn) {
+				return update_fn(node);
 			}
 		}
 
@@ -1303,7 +1396,7 @@ const visitors = {
 			return b.literal(node.quasis[0].value.cooked);
 		}
 
-		const expressions = node.expressions.map(expr => context.visit(expr));
+		const expressions = node.expressions.map((expr) => context.visit(expr));
 		return b.template(node.quasis, expressions);
 	},