ripple 0.2.34 → 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.34",
+  "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

@@ -8,6 +8,7 @@ import {
 	is_ripple_import,
 	is_tracked_computed_property,
 	is_tracked_name,
+	is_void_element,
 } from '../../utils.js';
 import { extract_paths } from '../../../utils/ast.js';
 import is_reference from 'is-reference';
@@ -25,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),
 						};
 					}
 				}
@@ -54,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') {
@@ -432,6 +437,8 @@ const visitors = {
 		const attribute_names = new Set();
 
 		if (is_dom_element) {
+			const is_void = is_void_element(node.id.name);
+
 			if (state.elements) {
 				state.elements.push(node);
 			}
@@ -468,6 +475,14 @@ const visitors = {
 					);
 				}
 			}
+
+			if (is_void && node.children.length > 0) {
+				error(
+					`The <${node.id.name}> element is a void element and cannot have children`,
+					state.analysis.module.filename,
+					node,
+				);
+			}
 		} else {
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {

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

@@ -21,6 +21,7 @@ import {
 	is_inside_call_expression,
 	is_tracked_computed_property,
 	is_value_static,
+	is_void_element,
 } from '../../utils.js';
 import is_reference from 'is-reference';
 import { extract_paths, object } from '../../../utils/ast.js';
@@ -74,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);
 		}
 	}
 
@@ -438,6 +439,7 @@ const visitors = {
 		if (is_dom_element) {
 			let class_attribute = null;
 			const local_updates = [];
+			const is_void = is_void_element(node.id.name);
 
 			state.template.push(`<${node.id.name}`);
 
@@ -629,7 +631,14 @@ const visitors = {
 			const init = [];
 			const update = [];
 
-			transform_children(node.children, { visit, state: { ...state, init, update }, root: false });
+			if (!is_void) {
+				transform_children(node.children, {
+					visit,
+					state: { ...state, init, update },
+					root: false,
+				});
+				state.template.push(`</${node.id.name}>`);
+			}
 
 			update.push(...local_updates);
 
@@ -640,8 +649,6 @@ const visitors = {
 			if (update.length > 0) {
 				state.init.push(b.stmt(b.call('$.render', b.thunk(b.block(update)))));
 			}
-
-			state.template.push(`</${node.id.name}>`);
 		} else {
 			const id = state.flush_node();
 

package/src/compiler/utils.js

@@ -3,6 +3,33 @@ import * as b from '../utils/builders.js';
 
 const regex_return_characters = /\r/g;
 
+const VOID_ELEMENT_NAMES = [
+	'area',
+	'base',
+	'br',
+	'col',
+	'command',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr'
+];
+
+/**
+ * Returns `true` if `name` is of a void element
+ * @param {string} name
+ */
+export function is_void_element(name) {
+	return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
+}
+
 const RESERVED_WORDS = [
 	'arguments',
 	'await',

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>