ripple 0.2.35 → 0.2.37

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.37",
   "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

@@ -15,6 +15,29 @@ import is_reference from 'is-reference';
 import { prune_css } from './prune.js';
 import { error } from '../../errors.js';
 
+function mark_for_loop_has_template(path) {
+	for (let i = path.length - 1; i >= 0; i -= 1) {
+		const node = path[i];
+
+		if (
+			node.type === 'Component' ||
+			node.type === 'FunctionExpression' ||
+			node.type === 'ArrowFunctionExpression' ||
+			node.type === 'FunctionDeclaration'
+		) {
+			break;
+		}
+		if (
+			node.type === 'ForStatement' ||
+			node.type === 'ForInStatement' ||
+			node.type === 'ForOfStatement'
+		) {
+			node.metadata.has_template = true;
+			break;
+		}
+	}
+}
+
 function visit_function(node, context) {
 	node.metadata = {
 		hoisted: false,
@@ -26,20 +49,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 +82,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') {
@@ -403,6 +430,20 @@ const visitors = {
 		context.next();
 	},
 
+	ForOfStatement(node, context) {
+		node.metadata = {
+			has_template: false,
+		};
+		context.next();
+		if (!node.metadata.has_template) {
+			error(
+				'For...of loops must contain a template in their body. Move the for loop into an effect if it does not render anything.',
+				context.state.analysis.module.filename,
+				node,
+			);
+		}
+	},
+
 	ForInStatement(node, context) {
 		if (is_inside_component(context)) {
 			error(
@@ -425,13 +466,15 @@ const visitors = {
 		}
 	},
 
-	Element(node, { state, visit }) {
+	Element(node, { state, visit, path }) {
 		const is_dom_element =
 			node.id.type === 'Identifier' &&
 			node.id.name[0].toLowerCase() === node.id.name[0] &&
 			node.id.name[0] !== '$';
 		const attribute_names = new Set();
 
+		mark_for_loop_has_template(path);
+
 		if (is_dom_element) {
 			const is_void = is_void_element(node.id.name);
 
@@ -563,6 +606,11 @@ const visitors = {
 		};
 	},
 
+	Text(node, context) {
+		mark_for_loop_has_template(context.path);
+		context.next();
+	},
+
 	AwaitExpression(node, context) {
 		if (is_inside_component(context)) {
 			if (context.state.metadata?.await === false) {

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);
 		}
 	}
 
@@ -328,34 +328,52 @@ const visitors = {
 					delete declarator.id.typeAnnotation;
 				}
 
-				if (binding !== null && binding.kind === 'tracked' && !context.state.to_ts) {
+				if (binding !== null && binding.kind === 'tracked') {
 					let expression;
 
-					if (metadata.tracking && metadata.await) {
-						expression = b.call(
-							b.await(
-								b.call(
-									'$.resume_context',
+					if (context.state.to_ts) {
+						// TypeScript mode: lighter transformation
+						if (metadata.tracking && !metadata.await) {
+							expression = b.call(
+								'$.computed',
+								b.thunk(context.visit(declarator.init)),
+								b.id('__block'),
+							);
+						} else {
+							expression = b.call(
+								'$.tracked',
+								declarator.init === null ? undefined : context.visit(declarator.init),
+								b.id('__block'),
+							);
+						}
+					} else {
+						// Runtime mode: full transformation
+						if (metadata.tracking && metadata.await) {
+							expression = b.call(
+								b.await(
 									b.call(
-										'$.async_computed',
-										b.thunk(context.visit(declarator.init), true),
-										b.id('__block'),
+										'$.resume_context',
+										b.call(
+											'$.async_computed',
+											b.thunk(context.visit(declarator.init), true),
+											b.id('__block'),
+										),
 									),
 								),
-							),
-						);
-					} else if (metadata.tracking && !metadata.await) {
-						expression = b.call(
-							'$.computed',
-							b.thunk(context.visit(declarator.init)),
-							b.id('__block'),
-						);
-					} else {
-						expression = b.call(
-							'$.tracked',
-							declarator.init === null ? undefined : context.visit(declarator.init),
-							b.id('__block'),
-						);
+							);
+						} else if (metadata.tracking && !metadata.await) {
+							expression = b.call(
+								'$.computed',
+								b.thunk(context.visit(declarator.init)),
+								b.id('__block'),
+							);
+						} else {
+							expression = b.call(
+								'$.tracked',
+								declarator.init === null ? undefined : context.visit(declarator.init),
+								b.id('__block'),
+							);
+						}
 					}
 
 					declarations.push(b.declarator(declarator.id, expression));
@@ -372,11 +390,32 @@ const visitors = {
 					delete declarator.id.typeAnnotation;
 				}
 
-				if (!has_tracked || context.state.to_ts) {
+				if (!has_tracked) {
 					declarations.push(context.visit(declarator));
 					continue;
 				}
 
+				// For TypeScript mode, we still need to transform tracked variables
+				// but use a lighter approach that maintains type information
+				if (context.state.to_ts) {
+					const transformed = declarator.transformed || declarator.id;
+					let expression;
+
+					if (metadata.tracking && !metadata.await) {
+						expression = b.call(
+							'$.computed',
+							b.thunk(context.visit(declarator.init)),
+							b.id('__block'),
+						);
+					} else {
+						// Simple tracked variable - always use $.tracked for $ prefixed variables
+						expression = b.call('$.tracked', context.visit(declarator.init), b.id('__block'));
+					}
+
+					declarations.push(b.declarator(transformed, expression));
+					continue;
+				}
+
 				const transformed = declarator.transformed;
 				let expression;
 

package/src/runtime/internal/client/index.js

@@ -64,7 +64,7 @@ export {
 	array_entries,
 } from './array.js';
 
-export { for_block as for } from './for.js';
+export { for_block as for, for_effect } from './for.js';
 
 export { if_block as if } from './if.js';
 

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>

package/types/index.d.ts

@@ -55,3 +55,27 @@ export class RippleMap<K, V> extends Map<K, V> {
     get $size(): number;
     toJSON(): [K, V][];
 }
+
+// Compiler-injected runtime symbols (for Ripple component development)
+declare global {
+    /**
+     * Runtime block context injected by the Ripple compiler.
+     * This is automatically available in component scopes and passed to runtime functions.
+     */
+    var __block: any;
+
+    /**
+     * Ripple runtime namespace - injected by the compiler
+     * These functions are available in compiled Ripple components for TypeScript analysis
+     */
+    var $: {
+        tracked<T>(value: T, block?: any): T;
+        tracked_object<T extends Record<string, any>>(obj: T, props: string[], block?: any): T;
+        computed<T>(fn: () => T, block?: any): T;
+        scope(): any;
+        get_tracked(node: any): any;
+        get_computed(node: any): any;
+        set(node: any, value: any, block?: any): any;
+        // Add other runtime functions as needed for TypeScript analysis
+    };
+}