ripple 0.2.41 → 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.41",
+  "version": "0.2.43",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -413,9 +413,9 @@ function RipplePlugin(config) {
 					}
 				} else {
 					if (open.name.name === 'style') {
-						// jsx_parseOpeningElementAt can treat a html element selector as an identifier and read it
-						// In that case, need to backtrack to include it in the css content
-						const start = this.pos - (this.value?.length ?? 1)
+						// jsx_parseOpeningElementAt treats ID selectors (ie. #myid) or type selectors (ie. div) as identifier and read it
+						// So backtrack to the end of the <style> tag to make sure everything is included
+						const start = open.end;
 						const input = this.input.slice(start);
 						const end = input.indexOf('</style>');
 						const content = input.slice(0, end);
@@ -428,7 +428,7 @@ function RipplePlugin(config) {
 
 						const newLines = content.match(regex_newline_characters)?.length;
 						if (newLines) {
-							this.curLine += newLines;
+							this.curLine = open.loc.end.line + newLines;
 							this.lineStart = start + content.lastIndexOf('\n') + 1;
 						}
 						this.pos = start + content.length + 1;

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)),
-						),
-					),
+						)
+					)
 				);
 			}
 		}
@@ -199,6 +216,27 @@ const visitors = {
 		);
 	},
 
+	TSTypeAliasDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
+	TSInterfaceDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		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);
@@ -469,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);
 			}
@@ -959,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',
@@ -1255,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;