ripple 0.2.42 → 0.2.43

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

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);
 			}
@@ -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,11 @@ const visitors = {
 		return b.binary(node.operator, context.visit(node.left), context.visit(node.right));
 	},
 
+	TemplateLiteral(node, context) {
+		const expressions = node.expressions.map(expr => context.visit(expr));
+		return b.template(node.quasis, expressions);
+	},
+
 	RenderFragment(node, context) {
 		const identifer = node.expression.callee;