ripple 0.2.35 → 0.2.36

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

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

@@ -25,6 +25,18 @@ function RipplePlugin(config) {
 		class RippleParser extends Parser {
 			#path = [];
 
+			// Helper method to get the element name from a JSX identifier or member expression
+			getElementName(node) {
+				if (!node) return null;
+				if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
+					return node.name;
+				} else if (node.type === 'MemberExpression' || node.type === 'JSXMemberExpression') {
+					// For components like <Foo.Bar>, return "Foo.Bar"
+					return this.getElementName(node.object) + '.' + this.getElementName(node.property);
+				}
+				return null;
+			}
+
 			parseExportDefaultDeclaration() {
 				// Check if this is "export default component"
 				if (this.value === 'component') {
@@ -432,11 +444,19 @@ function RipplePlugin(config) {
 							this.context.pop();
 						}
 
+						this.finishNode(element, 'Element');
 						return element;
 					} else {
 						this.enterScope(0);
 						this.parseTemplateBody(element.children);
 						this.exitScope();
+						
+						// Check if this element was properly closed
+						// If we reach here and this element is still in the path, it means it was never closed
+						if (this.#path[this.#path.length - 1] === element) {
+							const tagName = this.getElementName(element.id);
+							this.raise(this.start, `Unclosed tag '<${tagName}>'. Expected '</${tagName}>' before end of component.`);
+						}
 					}
 					// Ensure we escape JSX <tag></tag> context
 					const tokContexts = this.acornTypeScript.tokContexts;
@@ -517,8 +537,22 @@ function RipplePlugin(config) {
 					this.next();
 					if (this.value === '/') {
 						this.next();
-						this.jsx_parseElementName();
+						const closingTag = this.jsx_parseElementName();
 						this.exprAllowed = true;
+						
+						// Validate that the closing tag matches the opening tag
+						const currentElement = this.#path[this.#path.length - 1];
+						if (!currentElement || currentElement.type !== 'Element') {
+							this.raise(this.start, 'Unexpected closing tag');
+						}
+						
+						const openingTagName = this.getElementName(currentElement.id);
+						const closingTagName = this.getElementName(closingTag);
+						
+						if (openingTagName !== closingTagName) {
+							this.raise(this.start, `Expected closing tag to match opening tag. Expected '</${openingTagName}>' but found '</${closingTagName}>'`);
+						}
+						
 						this.#path.pop();
 						this.next();
 						return;

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

@@ -26,20 +26,24 @@ function visit_function(node, context) {
 	if (node.params.length > 0) {
 		for (let i = 0; i < node.params.length; i += 1) {
 			const param = node.params[i];
-			if (param.type === 'ObjectPattern') {
+
+			if (param.type === 'ObjectPattern' || param.type === 'ArrayPattern') {
 				const paths = extract_paths(param);
+				const id = context.state.scope.generate('__arg');
+				const arg_id = b.id(id);
 
 				for (const path of paths) {
 					const name = path.node.name;
+
+					const expression = path.expression(arg_id);
 					const binding = context.state.scope.get(name);
 
 					if (binding !== null && is_tracked_name(name)) {
-						const id = context.state.scope.generate('arg');
 						node.params[i] = b.id(id);
 						binding.kind = path.has_default_value ? 'prop_fallback' : 'prop';
 
 						binding.transform = {
-							read: (_) => b.call('$.get_property', b.id(id), b.literal(name)),
+							read: (_, __, visit) => visit(expression),
 						};
 					}
 				}
@@ -55,7 +59,7 @@ function visit_function(node, context) {
 }
 
 function mark_as_tracked(path) {
-	for (let i = 0; i < path.length; i += 1) {
+	for (let i = path.length - 1; i >= 0; i -= 1) {
 		const node = path[i];
 
 		if (node.type === 'Component') {

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

@@ -75,7 +75,7 @@ function build_getter(node, context) {
 
 		// don't transform the declaration itself
 		if (node !== binding?.node && binding?.transform?.read) {
-			return binding.transform.read(node, context.state?.metadata?.spread);
+			return binding.transform.read(node, context.state?.metadata?.spread, context.visit);
 		}
 	}
 

package/tests/basic.test.ripple

@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, effect } from 'ripple';
+import { compile } from 'ripple/compiler';
 
 describe('basic', () => {
 	let container;
@@ -833,6 +834,25 @@ describe('basic', () => {
 		expect(paragraphs[1].className).toBe('nested-class');
 	});
 
+	it('should throw error for unclosed tag', () => {
+		const malformedCode = `export default component Example() {
+	<div></span>
+}`;
+		expect(() => {
+			compile(malformedCode, 'test.ripple', 'test.ripple');
+		}).toThrow('Expected closing tag to match opening tag');
+	});
+
+	it('should throw error for completely unclosed tag', () => {
+		const malformedCode = `export default component Example() {
+	<div>content
+}`;
+
+		expect(() => {
+			compile(malformedCode, 'test.ripple', 'test.ripple');
+		}).toThrow('Unclosed tag');
+	});
+
 	it('basic reactivity with standard arrays should work', () => {
 		let logs = [];
 
@@ -897,5 +917,5 @@ describe('basic', () => {
 		expect(divs[2].textContent).toBe('Number to string: 1,1');
 		expect(divs[3].textContent).toBe('Even numbers: ');
 		expect(logs).toEqual(['0, 0', '1, 0', 'arr includes 1', '1, 1']);
-	})
-});
+	});
+});

package/tests/{boundaries.ripple → boundaries.test.ripple}

@@ -35,7 +35,7 @@ describe('passing reactivity between boundaries tests', () => {
 
     component App() {
       let $count = 0;
-      
+
       const [ $double ] = createDouble([ $count ]);
 
       <div>{'Double: ' + $double}</div>