ripple 0.2.116 → 0.2.118

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.116",
+  "version": "0.2.118",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -63,21 +63,21 @@
     "#public": "./types/index.d.ts"
   },
   "dependencies": {
-    "@jridgewell/sourcemap-codec": "^1.5.5",
-    "@sveltejs/acorn-typescript": "^1.0.6",
-    "acorn": "^8.15.0",
-    "clsx": "^2.1.1",
-    "devalue": "^5.3.2",
-    "esm-env": "^1.2.2",
-    "esrap": "^2.1.0",
-    "is-reference": "^3.0.3",
-    "magic-string": "^0.30.18",
-    "muggle-string": "^0.4.1",
-    "zimmerframe": "^1.1.2"
+    "@jridgewell/sourcemap-codec": "catalog:default",
+    "@sveltejs/acorn-typescript": "catalog:default",
+    "acorn": "catalog:default",
+    "clsx": "catalog:default",
+    "devalue": "catalog:default",
+    "esm-env": "catalog:default",
+    "esrap": "catalog:default",
+    "is-reference": "catalog:default",
+    "magic-string": "catalog:default",
+    "muggle-string": "catalog:default",
+    "zimmerframe": "catalog:default"
   },
   "devDependencies": {
-    "@types/estree": "^1.0.8",
-    "@types/node": "^24.3.0",
-    "typescript": "^5.9.2"
+    "@types/estree": "catalog:default",
+    "@types/node": "catalog:default",
+    "typescript": "catalog:default"
   }
-}
+}

package/src/compiler/index.js

@@ -41,9 +41,28 @@ export function compile(source, filename, options = {}) {
 export function compile_to_volar_mappings(source, filename) {
   // Parse and transform
   const ast = parse_module(source);
+
+  // Add unique IDs to import declarations before transformation
+  // This allows us to match source imports with generated imports reliably
+	// This strategy can potentially be used for other node types in the future
+  let gen_id = 0;
+  const source_import_map = new Map();
+  for (const node of ast.body) {
+    if (node.type === 'ImportDeclaration') {
+      const start = /** @type {any} */ (node).start;
+      const end = /** @type {any} */ (node).end;
+      if (start !== undefined && end !== undefined) {
+        // Add a unique ID as a string property that will be copied during transformation
+        const id = `__volar_import_${gen_id++}__`;
+        /** @type {any} */ (node).__volar_id = id;
+        source_import_map.set(id, { start, end });
+      }
+    }
+  }
+
   const analysis = analyze(ast, filename);
   const transformed = transform_client(filename, source, analysis, true);
 
   // Create volar mappings directly from the AST instead of relying on esrap's sourcemap
-  return convert_source_map_to_mappings(transformed.ast, source, transformed.js.code);
+  return convert_source_map_to_mappings(transformed.ast, source, transformed.js.code, source_import_map);
 }

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

@@ -20,22 +20,23 @@ export const mapping_data = {
  * @param {any} ast - The transformed AST
  * @param {string} source - Original source code
  * @param {string} generated_code - Generated code from esrap
+ * @param {Map<string, {start: number, end: number}>} [source_import_map] - Map of __volar_id strings to source positions
  * @returns {object}
  */
-export function convert_source_map_to_mappings(ast, source, generated_code) {
+export function convert_source_map_to_mappings(ast, source, generated_code, source_import_map) {
 	/** @type {Array<{sourceOffsets: number[], generatedOffsets: number[], lengths: number[], data: any}>} */
 	const mappings = [];
 
 	// Maintain indices that walk through source and generated code
-	let sourceIndex = 0;
-	let generatedIndex = 0;
+	let source_index = 0;
+	let generated_index = 0;
 
 	// Map to track capitalized names: original name -> capitalized name
 	/** @type {Map<string, string>} */
-	const capitalizedNames = new Map();
+	const capitalized_names = new Map();
 	// Reverse map: capitalized name -> original name
 	/** @type {Map<string, string>} */
-	const reverseCapitalizedNames = new Map();
+	const reverse_capitalized_names = new Map();
 
 	// Pre-walk to collect capitalized names from JSXElement nodes (transformed AST)
 	// These are identifiers that are used as dynamic components/elements
@@ -43,8 +44,8 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 		_(node, { next }) {
 			// Check JSXElement nodes with metadata (preserved from Element nodes)
 			if (node.type === 'JSXElement' && node.metadata?.ts_name && node.metadata?.original_name) {
-				capitalizedNames.set(node.metadata.original_name, node.metadata.ts_name);
-				reverseCapitalizedNames.set(node.metadata.ts_name, node.metadata.original_name);
+				capitalized_names.set(node.metadata.original_name, node.metadata.ts_name);
+				reverse_capitalized_names.set(node.metadata.ts_name, node.metadata.original_name);
 			}
 			next();
 		}
@@ -55,7 +56,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	 * @param {string} char
 	 * @returns {boolean}
 	 */
-	const isWordBoundary = (char) => {
+	const is_word_boundary = (char) => {
 		return char === undefined || !/[a-zA-Z0-9_$]/.test(char);
 	};
 
@@ -64,7 +65,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	 * @param {number} pos - Position to check
 	 * @returns {boolean}
 	 */
-	const isInComment = (pos) => {
+	const is_in_comment = (pos) => {
 		// Check for single-line comment: find start of line and check if there's // before this position
 		let lineStart = source.lastIndexOf('\n', pos - 1) + 1;
 		const lineBeforePos = source.substring(lineStart, pos);
@@ -87,8 +88,8 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	 * @param {string} text - Text to find
 	 * @returns {number|null} - Source position or null
 	 */
-	const findInSource = (text) => {
-		for (let i = sourceIndex; i <= source.length - text.length; i++) {
+	const find_in_source = (text) => {
+		for (let i = source_index; i <= source.length - text.length; i++) {
 			let match = true;
 			for (let j = 0; j < text.length; j++) {
 				if (source[i + j] !== text[j]) {
@@ -98,7 +99,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 			}
 			if (match) {
 				// Skip if this match is inside a comment
-				if (isInComment(i)) {
+				if (is_in_comment(i)) {
 					continue;
 				}
 
@@ -107,12 +108,12 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				if (isIdentifierLike) {
 					const charBefore = source[i - 1];
 					const charAfter = source[i + text.length];
-					if (!isWordBoundary(charBefore) || !isWordBoundary(charAfter)) {
+					if (!is_word_boundary(charBefore) || !is_word_boundary(charAfter)) {
 						continue; // Not a whole word match, keep searching
 					}
 				}
 
-				sourceIndex = i + text.length;
+				source_index = i + text.length;
 				return i;
 			}
 		}
@@ -120,12 +121,12 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	};
 
 	/**
-	 * Find text in generated code, searching character by character from generatedIndex
+	 * Find text in generated code, searching character by character from generated_index
 	 * @param {string} text - Text to find
 	 * @returns {number|null} - Generated position or null
 	 */
-	const findInGenerated = (text) => {
-		for (let i = generatedIndex; i <= generated_code.length - text.length; i++) {
+	const find_in_generated = (text) => {
+		for (let i = generated_index; i <= generated_code.length - text.length; i++) {
 			let match = true;
 			for (let j = 0; j < text.length; j++) {
 				if (generated_code[i + j] !== text[j]) {
@@ -139,12 +140,12 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				if (isIdentifierLike) {
 					const charBefore = generated_code[i - 1];
 					const charAfter = generated_code[i + text.length];
-					if (!isWordBoundary(charBefore) || !isWordBoundary(charAfter)) {
+					if (!is_word_boundary(charBefore) || !is_word_boundary(charAfter)) {
 						continue; // Not a whole word match, keep searching
 					}
 				}
 
-				generatedIndex = i + text.length;
+				generated_index = i + text.length;
 				return i;
 			}
 		}
@@ -157,8 +158,8 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	const tokens = [];
 
 	// Collect import declarations for full-statement mappings
-	/** @type {Array<{start: number, end: number}>} */
-	const importDeclarations = [];
+	/** @type {Array<{id: string, node: any}>} */
+	const import_declarations = [];
 
 	// We have to visit everything in generated order to maintain correct indices
 	walk(ast, null, {
@@ -172,17 +173,23 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 						tokens.push({ source: node.metadata.tracked_shorthand, generated: node.name });
 					} else {
 						// Check if this identifier was capitalized (reverse lookup)
-						const originalName = reverseCapitalizedNames.get(node.name);
-						if (originalName) {
+						const original_name = reverse_capitalized_names.get(node.name);
+						if (original_name) {
 							// This is a capitalized name in generated code, map to lowercase in source
-							tokens.push({ source: originalName, generated: node.name });
+							tokens.push({ source: original_name, generated: node.name });
 						} else {
 							// Check if this identifier should be capitalized (forward lookup)
-							const capitalizedName = capitalizedNames.get(node.name);
-							if (capitalizedName) {
-								tokens.push({ source: node.name, generated: capitalizedName });
+							const cap_name = capitalized_names.get(node.name);
+							if (cap_name) {
+								tokens.push({ source: node.name, generated: cap_name });
 							} else {
-								tokens.push(node.name);
+								// Check if this identifier should be capitalized (forward lookup)
+								const cap_name = capitalized_names.get(node.name);
+								if (cap_name) {
+									tokens.push({ source: node.name, generated: cap_name });
+								} else {
+									tokens.push(node.name);
+								}
 							}
 						}
 					}
@@ -191,12 +198,12 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 			} else if (node.type === 'JSXIdentifier' && node.name) {
 				if (node.loc) {
 					// Check if this was capitalized (reverse lookup)
-					const originalName = reverseCapitalizedNames.get(node.name);
+					const originalName = reverse_capitalized_names.get(node.name);
 					if (originalName) {
 						tokens.push({ source: originalName, generated: node.name });
 					} else {
 						// Check if this should be capitalized (forward lookup)
-						const capitalizedName = capitalizedNames.get(node.name);
+						const capitalizedName = capitalized_names.get(node.name);
 						if (capitalizedName) {
 							tokens.push({ source: node.name, generated: capitalizedName });
 						} else {
@@ -211,10 +218,16 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'ImportDeclaration') {
-				// Collect import declaration range for full-statement mapping
+				// Collect import declaration for full-statement mapping
 				// TypeScript reports unused imports with diagnostics covering the entire statement
-				if (node.start !== undefined && node.end !== undefined) {
-					importDeclarations.push({ start: node.start, end: node.end });
+				// Store the __volar_id - we'll find the generated position later by searching
+				const volar_id = /** @type {any} */ (node).__volar_id;
+				if (volar_id) {
+					import_declarations.push({
+						id: volar_id,
+						// We'll calculate genStart/genEnd later by searching in generated code
+						node: node
+					});
 				}
 
 				// Visit specifiers in source order
@@ -315,12 +328,12 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				if (!node.openingElement?.selfClosing && node.closingElement?.name?.type === 'JSXIdentifier') {
 					const closingName = node.closingElement.name.name;
 					// Check if this was capitalized (reverse lookup)
-					const originalName = reverseCapitalizedNames.get(closingName);
+					const originalName = reverse_capitalized_names.get(closingName);
 					if (originalName) {
 						tokens.push({ source: originalName, generated: closingName });
 					} else {
 						// Check if this should be capitalized (forward lookup)
-						const capitalizedName = capitalizedNames.get(closingName);
+						const capitalizedName = capitalized_names.get(closingName);
 						if (capitalizedName) {
 							tokens.push({ source: closingName, generated: capitalizedName });
 						} else {
@@ -1106,25 +1119,25 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 
 	// Process each token in order
 	for (const token of tokens) {
-		let sourceText, generatedText;
+		let source_text, generated_text;
 
 		if (typeof token === 'string') {
-			sourceText = token;
-			generatedText = token;
+			source_text = token;
+			generated_text = token;
 		} else {
 			// Token with different source and generated names
-			sourceText = token.source;
-			generatedText = token.generated;
+			source_text = token.source;
+			generated_text = token.generated;
 		}
 
-		const sourcePos = findInSource(sourceText);
-		const genPos = findInGenerated(generatedText);
+		const source_pos = find_in_source(source_text);
+		const gen_pos = find_in_generated(generated_text);
 
-		if (sourcePos !== null && genPos !== null) {
+		if (source_pos !== null && gen_pos !== null) {
 			mappings.push({
-				sourceOffsets: [sourcePos],
-				generatedOffsets: [genPos],
-				lengths: [sourceText.length],
+				sourceOffsets: [source_pos],
+				generatedOffsets: [gen_pos],
+				lengths: [source_text.length],
 				data: mapping_data,
 			});
 		}
@@ -1133,17 +1146,46 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	// Add full-statement mappings for import declarations
 	// TypeScript reports unused import diagnostics covering the entire import statement
 	// Use verification-only mapping to avoid duplicate hover/completion
-	for (const importDecl of importDeclarations) {
-		const length = importDecl.end - importDecl.start;
-		mappings.push({
-			sourceOffsets: [importDecl.start],
-			generatedOffsets: [importDecl.start], // Same position in generated code
-			lengths: [length],
-			data: {
-				// only verification (diagnostics) to avoid duplicate hover/completion
-				verification: true
-			},
-		});
+
+	// Use the source import map from the original AST (before transformation)
+	// The __volar_id property is preserved through transformation via object spread
+	if (source_import_map && import_declarations.length > 0) {
+		// We need to find where each import appears in the generated code
+		// Search for "import" keywords and match them to our collected imports
+		let gen_search_index = 0;
+
+		for (const import_decl of import_declarations) {
+			// Look up the source position using the __volar_id
+			const source_range = source_import_map.get(import_decl.id);
+			if (!source_range) continue; // Skip if we don't have source info for this ID
+
+			// Find this import statement in the generated code
+			// Search for "import " starting from our last position
+			const import_keyword_index = generated_code.indexOf('import ', gen_search_index);
+			if (import_keyword_index === -1) continue; // Couldn't find it
+
+			// Find the semicolon or end of line for this import
+			let gen_end = generated_code.indexOf(';', import_keyword_index);
+			if (gen_end === -1) gen_end = generated_code.indexOf('\n', import_keyword_index);
+			if (gen_end === -1) gen_end = generated_code.length;
+			else gen_end += 1; // Include the semicolon
+
+			const get_start = import_keyword_index;
+			gen_search_index = gen_end; // Next search starts after this import
+
+			const source_length = source_range.end - source_range.start;
+			const get_length = gen_end - get_start;
+
+			mappings.push({
+				sourceOffsets: [source_range.start],
+				generatedOffsets: [get_start],
+				lengths: [Math.min(source_length, get_length)],
+				data: {
+					// only verification (diagnostics) to avoid duplicate hover/completion
+					verification: true
+				},
+			});
+		}
 	}
 
 	// Sort mappings by source offset

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

@@ -525,18 +525,28 @@ const visitors = {
 			return;
 		}
 
-		// TODO: alternative (else if / else)
-		context.state.init.push(
-			b.if(
-				context.visit(node.test),
-				b.block(
-					transform_body(node.consequent.body, {
-						...context,
-						state: { ...context.state, scope: context.state.scopes.get(node.consequent) },
-					}),
-				),
-			),
+		const consequent = b.block(
+			transform_body(node.consequent.body, {
+				...context,
+				state: { ...context.state, scope: context.state.scopes.get(node.consequent) },
+			}),
 		);
+
+		let alternate = null;
+		if (node.alternate) {
+			const alternate_scope = context.state.scopes.get(node.alternate) || context.state.scope;
+			const alternate_body_nodes =
+				node.alternate.type === 'IfStatement' ? [node.alternate] : node.alternate.body;
+
+			alternate = b.block(
+				transform_body(alternate_body_nodes, {
+					...context,
+					state: { ...context.state, scope: alternate_scope },
+				}),
+			);
+		}
+
+		context.state.init.push(b.if(context.visit(node.test), consequent, alternate));
 	},
 
 	Identifier(node, context) {

package/src/runtime/index-client.js

@@ -74,7 +74,7 @@ export { user_effect as effect } from './internal/client/blocks.js';
 
 export { Portal } from './internal/client/portal.js';
 
-export { ref_prop as createRefKey } from './internal/client/runtime.js';
+export { ref_prop as createRefKey, get, public_set as set } from './internal/client/runtime.js';
 
 export { on } from './internal/client/events.js';
 

package/src/runtime/index-server.js

@@ -12,6 +12,30 @@ export function effect() {
 
 var empty_get_set = { get: undefined, set: undefined };
 
+/**
+ * @param {Derived | Tracked} tracked
+ * @returns {any}
+ */
+export function get(tracked) {
+	if (!is_tracked_object(tracked)) {
+		return tracked;
+	}
+
+	var g = tracked.a.get;
+
+	return g ? g(tracked.v) : tracked.v;
+}
+
+/**
+ * @param {Tracked} tracked
+ * @param {any} value
+ */
+export function set(tracked, value) {
+	var s = tracked.a.set;
+
+	tracked.v = s ? s(value, tracked.v) : value;
+}
+
 /**
  *
  * @param {any} v

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

@@ -768,6 +768,16 @@ export function get_tracked(tracked) {
 	return value;
 }
 
+/**
+ * Exposed version of `set` to avoid internal bugs
+ * since block is required on the internal `set`
+ * @param {Derived | Tracked} tracked
+ * @param {any} value
+ */
+export function public_set(tracked, value) {
+	set(tracked, value, safe_scope());
+}
+
 /**
  * @param {Derived | Tracked} tracked
  * @param {any} value

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

@@ -35,14 +35,6 @@ export function create_anchor() {
 	return t;
 }
 
-/**
- * @param {any} value
- * @returns {boolean}
- */
-export function is_positive_integer(value) {
-	return Number.isInteger(value) && /**@type {number} */ (value) >= 0;
-}
-
 /**
  * Checks if an object is a tracked object (has a numeric 'f' property).
  * @param {any} v - The object to check.

package/tests/client/__snapshots__/for.test.ripple.snap

@@ -317,3 +317,83 @@ exports[`for statements > render a simple static array 1`] = `
   
 </div>
 `;
+
+exports[`for statements > renders a simple dynamic array 1`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <!---->
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > renders a simple dynamic array 2`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <div
+    class="Item 4"
+  >
+    Item 4
+  </div>
+  <!---->
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > renders a simple static array 1`] = `
+<div>
+  <!---->
+  <div
+    class="Item 1"
+  >
+    Item 1
+  </div>
+  <div
+    class="Item 2"
+  >
+    Item 2
+  </div>
+  <div
+    class="Item 3"
+  >
+    Item 3
+  </div>
+  <!---->
+  
+</div>
+`;

package/tests/client/_etc.test.ripple

@@ -0,0 +1,5 @@
+// This file is for tests that don't fit anywhere else
+
+describe('etc', () => {
+	it.skip('this is here so the empty test suite does not fail');
+});