ripple 0.2.115 → 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.115",
+  "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/1-parse/index.js

@@ -167,6 +167,22 @@ function RipplePlugin(config) {
 							}
 						}
 
+						// Check if this is #Map or #Set
+						if (this.input.slice(this.pos, this.pos + 4) === '#Map') {
+							const charAfter = this.pos + 4 < this.input.length ? this.input.charCodeAt(this.pos + 4) : -1;
+							if (charAfter === 40) { // ( character
+								this.pos += 4; // consume '#Map'
+								return this.finishToken(tt.name, '#Map');
+							}
+						}
+						if (this.input.slice(this.pos, this.pos + 4) === '#Set') {
+							const charAfter = this.pos + 4 < this.input.length ? this.input.charCodeAt(this.pos + 4) : -1;
+							if (charAfter === 40) { // ( character
+								this.pos += 4; // consume '#Set'
+								return this.finishToken(tt.name, '#Set');
+							}
+						}
+
 						// Check if this is #server
 						if (this.input.slice(this.pos, this.pos + 7) === '#server') {
 							// Check that next char after 'server' is whitespace, {, . (dot), or EOF
@@ -186,6 +202,27 @@ function RipplePlugin(config) {
 								return this.finishToken(tt.name, '#server');
 							}
 						}
+
+						// Check if this is an invalid #Identifier pattern
+						// Valid patterns: #[, #{, #Map(, #Set(, #server
+						// If we see # followed by an uppercase letter that isn't Map or Set, it's an error
+						if (nextChar >= 65 && nextChar <= 90) { // A-Z
+							// Extract the identifier name
+							let identEnd = this.pos + 1;
+							while (identEnd < this.input.length) {
+								const ch = this.input.charCodeAt(identEnd);
+								if ((ch >= 65 && ch <= 90) || (ch >= 97 && ch <= 122) || (ch >= 48 && ch <= 57) || ch === 95) {
+									// A-Z, a-z, 0-9, _
+									identEnd++;
+								} else {
+									break;
+								}
+							}
+							const identName = this.input.slice(this.pos + 1, identEnd);
+							if (identName !== 'Map' && identName !== 'Set') {
+								this.raise(this.pos, `Invalid tracked syntax '#${identName}'. Only #Map and #Set are currently supported using shorthand tracked syntax.`);
+							}
+						}
 					}
 				}
 				if (code === 64) {
@@ -391,6 +428,12 @@ function RipplePlugin(config) {
 					return this.finishNode(node, 'ServerIdentifier');
 				}
 
+				// Check if this is #Map( or #Set(
+				if (this.type === tt.name && (this.value === '#Map' || this.value === '#Set')) {
+					const type = this.value === '#Map' ? 'TrackedMapExpression' : 'TrackedSetExpression';
+					return this.parseTrackedCollectionExpression(type);
+				}
+
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -449,6 +492,42 @@ function RipplePlugin(config) {
 				return this.finishNode(node, 'ServerBlock');
 			}
 
+			/**
+			 * Parse `#Map(...)` or `#Set(...)` syntax for tracked collections
+			 * Creates a TrackedMap or TrackedSet node with the arguments property
+			 * @param {string} type - Either 'TrackedMap' or 'TrackedSet'
+			 * @returns {any} TrackedMap or TrackedSet node
+			 */
+			parseTrackedCollectionExpression(type) {
+				const node = this.startNode();
+				this.next(); // consume '#Map' or '#Set'
+				this.expect(tt.parenL); // expect '('
+
+				node.arguments = [];
+
+				// Parse arguments similar to function call arguments
+				let first = true;
+				while (!this.eat(tt.parenR)) {
+					if (!first) {
+						this.expect(tt.comma);
+						if (this.afterTrailingComma(tt.parenR)) break;
+					} else {
+						first = false;
+					}
+
+					if (this.type === tt.ellipsis) {
+						// Spread argument
+						const arg = this.parseSpread();
+						node.arguments.push(arg);
+					} else {
+						// Regular argument
+						node.arguments.push(this.parseMaybeAssign(false));
+					}
+				}
+
+				return this.finishNode(node, type);
+			}
+
 			parseTrackedArrayExpression() {
 				const node = this.startNode();
 				this.next(); // consume the '#['

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

@@ -350,11 +350,9 @@ const visitors = {
 				context.state.imports.add(`import { TrackedArray } from 'ripple'`);
 			}
 
-			return b.new(
-				b.call(
-					b.member(b.id('TrackedArray'), b.id('from')),
-					node.elements.map((el) => context.visit(el)),
-				),
+			return b.call(
+				b.member(b.id('TrackedArray'), b.id('from')),
+				...node.elements.map((el) => context.visit(el)),
 			);
 		}
 
@@ -384,6 +382,48 @@ const visitors = {
 		);
 	},
 
+	TrackedMapExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedMap } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedMap } from 'ripple'`);
+			}
+
+			const calleeId = b.id('TrackedMap');
+			// Preserve location from original node for Volar mapping
+			calleeId.loc = node.loc;
+			// Add metadata for Volar mapping - map "TrackedMap" identifier to "#Map" in source
+			calleeId.metadata = { tracked_shorthand: '#Map' };
+			return b.new(calleeId, ...node.arguments.map((arg) => context.visit(arg)));
+		}
+
+		return b.call(
+			'_$_.tracked_map',
+			b.id('__block'),
+			...node.arguments.map((arg) => context.visit(arg)),
+		);
+	},
+
+	TrackedSetExpression(node, context) {
+		if (context.state.to_ts) {
+			if (!context.state.imports.has(`import { TrackedSet } from 'ripple'`)) {
+				context.state.imports.add(`import { TrackedSet } from 'ripple'`);
+			}
+
+			const calleeId = b.id('TrackedSet');
+			// Preserve location from original node for Volar mapping
+			calleeId.loc = node.loc;
+			// Add metadata for Volar mapping - map "TrackedSet" identifier to "#Set" in source
+			calleeId.metadata = { tracked_shorthand: '#Set' };
+			return b.new(calleeId, ...node.arguments.map((arg) => context.visit(arg)));
+		}
+
+		return b.call(
+			'_$_.tracked_set',
+			b.id('__block'),
+			...node.arguments.map((arg) => context.visit(arg)),
+		);
+	},
+
 	TrackedExpression(node, context) {
 		return b.call('_$_.get', context.visit(node.argument));
 	},
@@ -459,7 +499,7 @@ const visitors = {
 				return {
 					...node,
 					id: { ...node.id, name: capitalizedName },
-					init: node.init ? context.visit(node.init) : null
+					init: node.init ? context.visit(node.init) : null,
 				};
 			}
 		}
@@ -1517,12 +1557,18 @@ function transform_ts_child(node, context) {
 			};
 		}
 
-		const jsxElement = b.jsx_element(opening_type, attributes, children, node.selfClosing, closing_type);
+		const jsxElement = b.jsx_element(
+			opening_type,
+			attributes,
+			children,
+			node.selfClosing,
+			closing_type,
+		);
 		// Preserve metadata from Element node for mapping purposes
 		if (node.metadata && (node.metadata.ts_name || node.metadata.original_name)) {
 			jsxElement.metadata = {
 				ts_name: node.metadata.ts_name,
-				original_name: node.metadata.original_name
+				original_name: node.metadata.original_name,
 			};
 		}
 		state.init.push(b.stmt(jsxElement));

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, {
@@ -167,18 +168,29 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 			// Only collect tokens from nodes with .loc (skip synthesized nodes like children attribute)
 			if (node.type === 'Identifier' && node.name) {
 				if (node.loc) {
-					// Check if this identifier was capitalized (reverse lookup)
-					const originalName = reverseCapitalizedNames.get(node.name);
-					if (originalName) {
-						// This is a capitalized name in generated code, map to lowercase in source
-						tokens.push({ source: originalName, generated: node.name });
+					// Check if this identifier has tracked_shorthand metadata (e.g., TrackedMap -> #Map)
+					if (node.metadata?.tracked_shorthand) {
+						tokens.push({ source: node.metadata.tracked_shorthand, 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 });
+						// Check if this identifier was capitalized (reverse lookup)
+						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: original_name, generated: node.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 {
+								// 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);
+								}
+							}
 						}
 					}
 				}
@@ -186,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 {
@@ -206,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
@@ -310,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 {
@@ -1101,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,
 			});
 		}
@@ -1128,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/compiler/types/index.d.ts

@@ -78,6 +78,22 @@ export interface TrackedObjectExpression extends Omit<ObjectExpression, 'type'>
 	properties: (Property | SpreadElement)[];
 }
 
+/**
+ * Tracked Map expression node
+ */
+export interface TrackedMapExpression extends Omit<Node, 'type'> {
+	type: 'TrackedMapExpression';
+	arguments: (Expression | SpreadElement)[];
+}
+
+/**
+ * Tracked Set expression node
+ */
+export interface TrackedSetExpression extends Omit<Node, 'type'> {
+	type: 'TrackedSetExpression';
+	arguments: (Expression | SpreadElement)[];
+}
+
 /**
  * Ripple component node
  */