ripple 0.2.42 → 0.2.44

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.42",
+  "version": "0.2.44",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -139,15 +139,14 @@ function RipplePlugin(config) {
 				}
 
 				if (this.eat(tt.braceL)) {
-					if (this.type.label === '@') {
+					if (this.value === 'ref') {
 						this.next();
-						if (this.value !== 'use') {
-							this.unexpected();
+						if (this.type === tt.braceR) {
+							this.raise(this.start, '"ref" is a Ripple keyword and must be used in the form {ref fn}');
 						}
-						this.next();
 						node.argument = this.parseMaybeAssign();
 						this.expect(tt.braceR);
-						return this.finishNode(node, 'UseAttribute');
+						return this.finishNode(node, 'RefAttribute');
 					} else if (this.type === tt.ellipsis) {
 						this.expect(tt.ellipsis);
 						node.argument = this.parseMaybeAssign();

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

@@ -150,40 +150,57 @@ const visitors = {
 		}
 
 		// Handle array methods that access the array
-		if (
-			callee.type === 'MemberExpression' &&
-			!callee.optional &&
-			callee.property.type === 'Identifier'
-		) {
-			const name = callee.property.name;
-			if (
-				// TODO support the missing array methods
-				name === 'reduce' ||
-				name === 'map' ||
-				name === 'forEach' ||
-				name === 'join' ||
-				name === 'includes' ||
-				name === 'indexOf' ||
-				name === 'lastIndexOf' ||
-				name === 'filter' ||
-				name === 'every' ||
-				name === 'some' ||
-				name === 'toSpliced' ||
-				name === 'toSorted' ||
-				name === 'toString' ||
-				name === 'values' ||
-				name === 'entries'
-			) {
+		if (callee.type === 'MemberExpression') {
+			const property = callee.property;
+
+			if (property.type === 'Identifier' && !callee.optional) {
+				const name = property.name;
+				if (
+					// TODO support the missing array methods
+					name === 'reduce' ||
+					name === 'map' ||
+					name === 'forEach' ||
+					name === 'join' ||
+					name === 'includes' ||
+					name === 'indexOf' ||
+					name === 'lastIndexOf' ||
+					name === 'filter' ||
+					name === 'every' ||
+					name === 'some' ||
+					name === 'toSpliced' ||
+					name === 'toSorted' ||
+					name === 'toString' ||
+					name === 'values' ||
+					name === 'entries'
+				) {
+					return b.call(
+						'$.with_scope',
+						b.id('__block'),
+						b.thunk(
+							b.call(
+								'$.array_' + name,
+								context.visit(callee.object),
+								...node.arguments.map((arg) => context.visit(arg)),
+							),
+						),
+					);
+				}
+			}
+
+			if (callee.computed) {
 				return b.call(
 					'$.with_scope',
 					b.id('__block'),
 					b.thunk(
 						b.call(
-							'$.array_' + name,
+							'$.call_property',
 							context.visit(callee.object),
+							context.visit(property),
+							callee.optional ? b.true : undefined,
+							node.optional ? b.true : undefined,
 							...node.arguments.map((arg) => context.visit(arg)),
-						),
-					),
+						)
+					)
 				);
 			}
 		}
@@ -213,6 +230,13 @@ const visitors = {
 		context.next();
 	},
 
+	TSMappedType(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
 	NewExpression(node, context) {
 		const callee = node.callee;
 		const parent = context.path.at(-1);
@@ -483,7 +507,11 @@ const visitors = {
 			);
 
 			if (is_spreading) {
-				spread_attributes.push(b.prop('init', b.literal(name), attr_value));
+				// 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);
+				spread_attributes.push(b.prop('init', b.literal(name), actual_value));
 			} else {
 				state.template.push(attr_value);
 			}
@@ -637,9 +665,9 @@ const visitors = {
 					}
 				} else if (attr.type === 'SpreadAttribute') {
 					spread_attributes.push(b.spread(b.call('$.spread_object', visit(attr.argument, state))));
-				} else if (attr.type === 'UseAttribute') {
+				} else if (attr.type === 'RefAttribute') {
 					const id = state.flush_node();
-					state.init.push(b.stmt(b.call('$.use', id, b.thunk(visit(attr.argument, state)))));
+					state.init.push(b.stmt(b.call('$.ref', id, b.thunk(visit(attr.argument, state)))));
 				}
 			}
 
@@ -742,8 +770,8 @@ const visitors = {
 							),
 						),
 					);
-				} else if (attr.type === 'UseAttribute') {
-					props.push(b.prop('init', b.call('$.use_prop'), visit(attr.argument, state), true));
+				} else if (attr.type === 'RefAttribute') {
+					props.push(b.prop('init', b.call('$.ref_prop'), visit(attr.argument, state), true));
 				} else if (attr.type === 'AccessorAttribute') {
 					// # means it's an accessor to the runtime
 					tracked.push(b.literal('#' + attr.name.name));
@@ -973,7 +1001,8 @@ const visitors = {
 		const left = node.left;
 
 		if (left.type === 'MemberExpression') {
-			if (left.property.type === 'Identifier' && is_tracked_name(left.property.name)) {
+			// 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.name !== '$length') {
 					return b.call(
 						'$.set_property',
@@ -1269,6 +1298,15 @@ const visitors = {
 		return b.binary(node.operator, context.visit(node.left), context.visit(node.right));
 	},
 
+	TemplateLiteral(node, context) {
+		if (node.expressions.length === 0) {
+			return b.literal(node.quasis[0].value.cooked);
+		}
+
+		const expressions = node.expressions.map(expr => context.visit(expr));
+		return b.template(node.quasis, expressions);
+	},
+
 	RenderFragment(node, context) {
 		const identifer = node.expression.callee;
 
@@ -1375,12 +1413,12 @@ function transform_ts_child(node, context) {
 		const children = [];
 		let has_children_props = false;
 
-		// Filter out UseAttributes and handle them separately
-		const use_attributes = [];
+		// Filter out RefAttributes and handle them separately
+		const ref_attributes = [];
 		const attributes = node.attributes
 			.filter((attr) => {
-				if (attr.type === 'UseAttribute') {
-					use_attributes.push(attr);
+				if (attr.type === 'RefAttribute') {
+					ref_attributes.push(attr);
 					return false;
 				}
 				return true;
@@ -1404,10 +1442,10 @@ function transform_ts_child(node, context) {
 				}
 			});
 
-		// Add UseAttribute references separately for sourcemap purposes
-		for (const use_attr of use_attributes) {
+		// Add RefAttribute references separately for sourcemap purposes
+		for (const ref_attr of ref_attributes) {
 			const metadata = { await: false };
-			const argument = visit(use_attr.argument, { ...state, metadata });
+			const argument = visit(ref_attr.argument, { ...state, metadata });
 			state.init.push(b.stmt(argument));
 		}
 

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

@@ -61,8 +61,8 @@ export function convert_source_map_to_mappings(source_map, source, generated_cod
 			);
 			const source_content = source.substring(source_offset, source_offset + segment_length);
 
-			// Skip mappings for UseAttribute syntax to avoid overlapping sourcemaps
-			if (source_content.includes('{@use ') || source_content.match(/\{\s*@use\s+/)) {
+			// Skip mappings for RefAttribute syntax to avoid overlapping sourcemaps
+			if (source_content.includes('{ref ') || source_content.match(/\{\s*ref\s+/)) {
 				continue;
 			}