ripple 0.2.36 → 0.2.38

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

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,
@@ -407,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(
@@ -429,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);
 
@@ -567,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

@@ -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/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
+    };
+}