ripple 0.2.138 → 0.2.140

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.138",
+  "version": "0.2.140",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.138"
+    "ripple": "0.2.140"
   }
 }

package/src/compiler/index.js

@@ -12,7 +12,7 @@ import { convert_source_map_to_mappings } from './phases/3-transform/segments.js
  * @returns {Program}
  */
 export function parse(source) {
-  return parse_module(source);
+	return parse_module(source);
 }
 
 /**
@@ -23,13 +23,13 @@ export function parse(source) {
  * @returns {object}
  */
 export function compile(source, filename, options = {}) {
-  const ast = parse_module(source);
-  const analysis = analyze(ast, filename, options);
-  const result = options.mode === 'server'
-      ? transform_server(filename, source, analysis)
-      : transform_client(filename, source, analysis, false);
+	const ast = parse_module(source);
+	const analysis = analyze(ast, filename, options);
+	const result = options.mode === 'server'
+		? transform_server(filename, source, analysis)
+		: transform_client(filename, source, analysis, false);
 
-  return result;
+	return result;
 }
 
 /** @import { PostProcessingChanges, LineOffsets } from './phases/3-transform/client/index.js' */
@@ -41,17 +41,17 @@ export function compile(source, filename, options = {}) {
  * @returns {object} Volar mappings object
  */
 export function compile_to_volar_mappings(source, filename) {
-  const ast = parse_module(source);
-  const analysis = analyze(ast, filename, {});
-  const transformed = transform_client(filename, source, analysis, true);
+	const ast = parse_module(source);
+	const analysis = analyze(ast, filename, { to_ts: true });
+	const transformed = transform_client(filename, source, analysis, true);
 
-  // Create volar mappings with esrap source map for accurate positioning
-  return convert_source_map_to_mappings(
-    transformed.ast,
-    source,
-    transformed.js.code,
-    transformed.js.map,
-    /** @type {PostProcessingChanges} */ (transformed.js.post_processing_changes),
-    /** @type {LineOffsets} */ (transformed.js.line_offsets)
-  );
+	// Create volar mappings with esrap source map for accurate positioning
+	return convert_source_map_to_mappings(
+		transformed.ast,
+		source,
+		transformed.js.code,
+		transformed.js.map,
+    /** @type {PostProcessingChanges} */(transformed.js.post_processing_changes),
+    /** @type {LineOffsets} */(transformed.js.line_offsets)
+	);
 }

package/src/compiler/phases/1-parse/index.js

@@ -987,6 +987,7 @@ function RipplePlugin(config) {
 						this.finishNode(id, 'Identifier');
 						node.name = id;
 						node.value = id;
+						node.shorthand = true; // Mark as shorthand since name and value are the same
 						this.next();
 						this.expect(tt.braceR);
 						return this.finishNode(node, 'Attribute');

package/src/compiler/phases/2-analyze/index.js

@@ -436,9 +436,13 @@ const visitors = {
 			const pattern = node.left.declarations[0].id;
 			const paths = extract_paths(pattern);
 			const scope = state.scopes.get(node);
-			const pattern_id = b.id(scope.generate('pattern'));
-
-			node.left.declarations[0].id = pattern_id;
+			let pattern_id;
+			if (state.to_ts) {
+				pattern_id = pattern;
+			} else {
+				pattern_id = b.id(scope.generate('pattern'));
+				node.left.declarations[0].id = pattern_id;
+			}
 
 			for (const path of paths) {
 				const name = path.node.name;
@@ -544,10 +548,10 @@ const visitors = {
 		}
 	},
 	/**
-	 * 
-	 * @param {any} node 
-	 * @param {any} context 
-	 * @returns 
+	 *
+	 * @param {any} node
+	 * @param {any} context
+	 * @returns
 	 */
 	TryStatement(node, context) {
 		if (!is_inside_component(context)) {
@@ -808,9 +812,9 @@ const visitors = {
 	},
 
 	/**
-	 * 
-	 * @param {any} node 
-	 * @param {any} context 
+	 *
+	 * @param {any} node
+	 * @param {any} context
 	 */
 	AwaitExpression(node, context) {
 		if (is_inside_component(context)) {
@@ -862,6 +866,7 @@ export function analyze(ast, filename, options = {}) {
 			analysis,
 			inside_head: false,
 			inside_server_block: options.mode === 'server',
+			to_ts: options.to_ts ?? false,
 		},
 		visitors,
 	);

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

@@ -190,9 +190,17 @@ const visitors = {
 					const binding = context.state.scope.get(node.name);
 					if (binding?.metadata?.is_dynamic_component) {
 						// Capitalize the identifier for TypeScript
-						const capitalizedName = node.name.charAt(0).toUpperCase() + node.name.slice(1);
-						const capitalizedNode = { ...node, name: capitalizedName };
-						return b.member(capitalizedNode, b.literal('#v'), true);
+						const capitalized_name = node.name.charAt(0).toUpperCase() + node.name.slice(1);
+						const capitalized_node = {
+							...node,
+							name: capitalized_name,
+							metadata: {
+								...node.metadata,
+								original_name: node.name,
+								is_capitalized: true,
+							}
+						};
+						return b.member(capitalized_node, b.literal('#v'), true);
 					}
 					return b.member(node, b.literal('#v'), true);
 				}
@@ -525,13 +533,74 @@ const visitors = {
 
 	VariableDeclarator(node, context) {
 		// In TypeScript mode, capitalize identifiers that are used as dynamic components
-		if (context.state.to_ts && node.id.type === 'Identifier') {
-			const binding = context.state.scope.get(node.id.name);
-			if (binding?.metadata?.is_dynamic_component) {
-				const capitalizedName = node.id.name.charAt(0).toUpperCase() + node.id.name.slice(1);
+		if (context.state.to_ts) {
+			/**
+			 * Recursively capitalize identifiers in patterns (ArrayPattern, ObjectPattern)
+			 * @param {any} pattern - The pattern node to process
+			 * @returns {any} The transformed pattern
+			 */
+			const capitalize_pattern = (pattern) => {
+				if (pattern.type === 'Identifier') {
+					const binding = context.state.scope.get(pattern.name);
+					if (binding?.metadata?.is_dynamic_component) {
+						const capitalized_name = pattern.name.charAt(0).toUpperCase() + pattern.name.slice(1);
+						// Add metadata to track the original name for Volar mappings
+						return {
+							...pattern,
+							name: capitalized_name,
+							metadata: {
+								...pattern.metadata,
+								original_name: pattern.name,
+								is_capitalized: true,
+							}
+						};
+					}
+					return pattern;
+				} else if (pattern.type === 'ArrayPattern') {
+					return {
+						...pattern,
+						elements: pattern.elements.map((element) =>
+							element ? capitalize_pattern(element) : element
+						),
+					};
+				} else if (pattern.type === 'ObjectPattern') {
+					return {
+						...pattern,
+						properties: pattern.properties.map((prop) => {
+							if (prop.type === 'Property') {
+								return {
+									...prop,
+									value: capitalize_pattern(prop.value),
+								};
+							} else if (prop.type === 'RestElement') {
+								return {
+									...prop,
+									argument: capitalize_pattern(prop.argument),
+								};
+							}
+							return prop;
+						}),
+					};
+				} else if (pattern.type === 'RestElement') {
+					return {
+						...pattern,
+						argument: capitalize_pattern(pattern.argument),
+					};
+				} else if (pattern.type === 'AssignmentPattern') {
+					return {
+						...pattern,
+						left: capitalize_pattern(pattern.left),
+						right: context.visit(pattern.right),
+					};
+				}
+				return pattern;
+			};
+
+			const transformed_id = capitalize_pattern(node.id);
+			if (transformed_id !== node.id) {
 				return {
 					...node,
-					id: { ...node.id, name: capitalizedName },
+					id: transformed_id,
 					init: node.init ? context.visit(node.init) : null,
 				};
 			}
@@ -1244,7 +1313,6 @@ const visitors = {
 							/** @type {Expression} */ (context.visit(left)),
 							/** @type {Expression} */ (context.visit(right)),
 						),
-				b.id('__block'),
 			);
 		}
 
@@ -1265,7 +1333,6 @@ const visitors = {
 							),
 							/** @type {Expression} */ (context.visit(right)),
 						),
-				b.id('__block'),
 			);
 		}
 
@@ -1291,7 +1358,6 @@ const visitors = {
 				node.prefix ? '_$_.update_pre_property' : '_$_.update_property',
 				context.visit(argument.object, { ...context.state, metadata: { tracking: false } }),
 				argument.computed ? context.visit(argument.property) : b.literal(argument.property.name),
-				b.id('__block'),
 				node.operator === '--' ? b.literal(-1) : undefined,
 			);
 		}
@@ -1300,7 +1366,6 @@ const visitors = {
 			return b.call(
 				node.prefix ? '_$_.update_pre' : '_$_.update',
 				context.visit(argument, { ...context.state, metadata: { tracking: null } }),
-				b.id('__block'),
 				node.operator === '--' ? b.literal(-1) : undefined,
 			);
 		}
@@ -1309,7 +1374,6 @@ const visitors = {
 			return b.call(
 				node.prefix ? '_$_.update_pre' : '_$_.update',
 				context.visit(argument.argument, { ...context.state, metadata: { tracking: null } }),
-				b.id('__block'),
 				node.operator === '--' ? b.literal(-1) : undefined,
 			);
 		}
@@ -1740,7 +1804,10 @@ function transform_ts_child(node, context) {
 				}
 				jsx_name.loc = attr.name.loc || name.loc;
 
-				return b.jsx_attribute(jsx_name, b.jsx_expression_container(value));
+				const jsx_attr = b.jsx_attribute(jsx_name, b.jsx_expression_container(value));
+				// Preserve shorthand flag from parser (set for {identifier} syntax)
+				jsx_attr.shorthand = attr.shorthand ?? false;
+				return jsx_attr;
 			} else if (attr.type === 'SpreadAttribute') {
 				const metadata = { await: false };
 				const argument = visit(attr.argument, { ...state, metadata });
@@ -1783,31 +1850,75 @@ function transform_ts_child(node, context) {
 			closing_type = node.selfClosing ? undefined : type_expression;
 		} else {
 			opening_type = b.jsx_id(type_expression);
-			// Use node.id.loc if available, otherwise create a loc based on the element's position
-			opening_type.loc = node.id.loc || {
-				start: {
-					line: node.loc.start.line,
-					column: node.loc.start.column + 2, // After "<@"
-				},
-				end: {
-					line: node.loc.start.line,
-					column: node.loc.start.column + 2 + type_expression.length,
-				},
-			};
-
-			if (!node.selfClosing) {
-				closing_type = b.jsx_id(type_expression);
-				closing_type.loc = {
+			// For tracked identifiers (dynamic components), adjust the loc to skip the '@' prefix
+			// and add metadata for mapping
+			if (node.id.tracked && node.id.loc) {
+				// The original identifier loc includes the '@', so we need to skip it
+				opening_type.loc = {
+					start: {
+						line: node.id.loc.start.line,
+						column: node.id.loc.start.column + 1, // Skip '@'
+					},
+					end: node.id.loc.end,
+				};
+				// Add metadata if this was capitalized
+				if (node.metadata?.ts_name && node.metadata?.original_name) {
+					opening_type.metadata = {
+						original_name: node.metadata.original_name,
+						is_capitalized: true,
+					};
+				}
+			} else {
+				// Use node.id.loc if available, otherwise create a loc based on the element's position
+				opening_type.loc = node.id.loc || {
 					start: {
-						line: node.loc.end.line,
-						column: node.loc.end.column - type_expression.length - 1,
+						line: node.loc.start.line,
+						column: node.loc.start.column + 2, // After "<@"
 					},
 					end: {
-						line: node.loc.end.line,
-						column: node.loc.end.column - 1,
+						line: node.loc.start.line,
+						column: node.loc.start.column + 2 + type_expression.length,
 					},
 				};
 			}
+
+			if (!node.selfClosing) {
+				closing_type = b.jsx_id(type_expression);
+				// For tracked identifiers, also adjust closing tag location
+				if (node.id.tracked && node.id.loc) {
+					// Calculate position relative to closing tag
+					// Format: </@identifier>
+					const closing_tag_start = node.loc.end.column - type_expression.length - 3; // </@
+					closing_type.loc = {
+						start: {
+							line: node.loc.end.line,
+							column: closing_tag_start + 3, // Skip '</@'
+						},
+						end: {
+							line: node.loc.end.line,
+							column: closing_tag_start + 3 + (node.metadata?.original_name?.length || type_expression.length),
+						},
+					};
+					// Add metadata if this was capitalized
+					if (node.metadata?.ts_name && node.metadata?.original_name) {
+						closing_type.metadata = {
+							original_name: node.metadata.original_name,
+							is_capitalized: true,
+						};
+					}
+				} else {
+					closing_type.loc = {
+						start: {
+							line: node.loc.end.line,
+							column: node.loc.end.column - type_expression.length - 1,
+						},
+						end: {
+							line: node.loc.end.line,
+							column: node.loc.end.column - 1,
+						},
+					};
+				}
+			}
 		}
 
 		const jsxElement = b.jsx_element(
@@ -2396,12 +2507,13 @@ export function transform_client(filename, source, analysis, to_ts) {
 
 	const language_handler = to_ts ? create_tsx_with_typescript_support() : tsx();
 
-	const js = /** @type {ReturnType<typeof print> & { post_processing_changes?: PostProcessingChanges, line_offsets?: number[] }} */ (
-		print(program, language_handler, {
-			sourceMapContent: source,
-			sourceMapSource: path.basename(filename),
-		})
-	);
+	const js =
+		/** @type {ReturnType<typeof print> & { post_processing_changes?: PostProcessingChanges, line_offsets?: number[] }} */ (
+			print(program, language_handler, {
+				sourceMapContent: source,
+				sourceMapSource: path.basename(filename),
+			})
+		);
 
 	// Post-process TypeScript output to remove 'declare' from function overload signatures
 	// Function overload signatures in regular .ts files should not have 'declare' keyword
@@ -2427,7 +2539,10 @@ export function transform_client(filename, source, analysis, to_ts) {
 		 */
 		const offset_to_line = (offset) => {
 			for (let i = 0; i < line_offsets.length; i++) {
-				if (offset >= line_offsets[i] && (i === line_offsets.length - 1 || offset < line_offsets[i + 1])) {
+				if (
+					offset >= line_offsets[i] &&
+					(i === line_offsets.length - 1 || offset < line_offsets[i + 1])
+				) {
 					return i + 1;
 				}
 			}
@@ -2440,22 +2555,25 @@ export function transform_client(filename, source, analysis, to_ts) {
 		// Remove 'export declare function' -> 'export function' (for overloads only, not implementations)
 		// Match: export declare function name(...): type;
 		// Don't match: export declare function name(...): type { (has body)
-		js.code = js.code.replace(/^(export\s+)declare\s+(function\s+\w+[^{\n]*;)$/gm, (match, p1, p2, offset) => {
-			const replacement = p1 + p2;
-			const line = offset_to_line(offset);
-			const delta = replacement.length - match.length; // negative (removing 'declare ')
-
-			// Track first change offset and total delta per line
-			if (!line_deltas.has(line)) {
-				line_deltas.set(line, { offset, delta });
-			} else {
-				// Additional change on same line - accumulate delta
-				// @ts-ignore
-				line_deltas.get(line).delta += delta;
-			}
+		js.code = js.code.replace(
+			/^(export\s+)declare\s+(function\s+\w+[^{\n]*;)$/gm,
+			(match, p1, p2, offset) => {
+				const replacement = p1 + p2;
+				const line = offset_to_line(offset);
+				const delta = replacement.length - match.length; // negative (removing 'declare ')
+
+				// Track first change offset and total delta per line
+				if (!line_deltas.has(line)) {
+					line_deltas.set(line, { offset, delta });
+				} else {
+					// Additional change on same line - accumulate delta
+					// @ts-ignore
+					line_deltas.get(line).delta += delta;
+				}
 
-			return replacement;
-		});
+				return replacement;
+			},
+		);
 
 		post_processing_changes = line_deltas;
 	}

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

@@ -70,26 +70,6 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 		return line_offsets[line - 1] + column;
 	};
 
-	// Map to track capitalized names: original name -> capitalized name
-	/** @type {Map<string, string>} */
-	const capitalized_names = new Map();
-	// Reverse map: capitalized name -> original name
-	/** @type {Map<string, string>} */
-	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
-	walk(ast, null, {
-		_(node, { next }) {
-			// Check JSXElement nodes with metadata (preserved from Element nodes)
-			if (node.type === 'JSXElement' && 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();
-		}
-	});
-
 	const adjusted_source_map = build_source_to_generated_map(
 		esrap_source_map,
 		post_processing_changes,
@@ -110,51 +90,30 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 	walk(ast, null, {
 		_(node, { visit }) {
 			// Collect key node types: Identifiers, Literals, and JSX Elements
-			// Skip nodes without .loc (synthesized during transformation, not in original source)
-			if (node.type === 'Identifier' && node.name) {
-				if (node.loc) {
+			if (node.type === 'Identifier') {
+				// Only create mappings for identifiers with location info (from source)
+				// Synthesized identifiers (created by builders) don't have .loc and are skipped
+				if (node.name && node.loc) {
 					// 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, loc: node.loc });
+					} else if (node.metadata?.is_capitalized) {
+						// This identifier was capitalized during transformation
+						// Map the original lowercase name to the capitalized generated name
+						tokens.push({ source: node.metadata.original_name, generated: node.name, loc: node.loc });
 					} else {
-						// 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, loc: node.loc });
-						} 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, loc: node.loc });
-							} 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, loc: node.loc });
-								} else {
-									// Store token with .loc for accurate positioning
-									tokens.push({ source: node.name, generated: node.name, loc: node.loc });
-								}
-							}
-						}
+						// No transformation - source and generated names are the same
+						tokens.push({ source: node.name, generated: node.name, loc: node.loc });
 					}
 				}
 				return; // Leaf node, don't traverse further
-			} else if (node.type === 'JSXIdentifier' && node.name) {
-				if (node.loc) {
-					// Check if this was capitalized (reverse lookup)
-					const originalName = reverse_capitalized_names.get(node.name);
-					if (originalName) {
-						tokens.push({ source: originalName, generated: node.name, loc: node.loc });
+			} else if (node.type === 'JSXIdentifier') {
+				// JSXIdentifiers can also be capitalized (for dynamic components)
+				if (node.loc && node.name) {
+					if (node.metadata?.is_capitalized) {
+						tokens.push({ source: node.metadata.original_name, generated: node.name, loc: node.loc });
 					} else {
-						// Check if this should be capitalized (forward lookup)
-						const capitalizedName = capitalized_names.get(node.name);
-						if (capitalizedName) {
-							tokens.push({ source: node.name, generated: capitalizedName, loc: node.loc });
-						} else {
-							tokens.push({ source: node.name, generated: node.name, loc: node.loc });
-						}
+						tokens.push({ source: node.name, generated: node.name, loc: node.loc });
 					}
 				}
 				return; // Leaf node, don't traverse further
@@ -242,11 +201,18 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 				return;
 			} else if (node.type === 'JSXAttribute') {
 				// Visit name and value in source order
-				if (node.name) {
-					visit(node.name);
-				}
-				if (node.value) {
-					visit(node.value);
+				// For shorthand attributes ({ count }), key and value are the same node, only visit once
+				if (node.shorthand) {
+					if (node.value) {
+						visit(node.value);
+					}
+				} else {
+					if (node.name) {
+						visit(node.name);
+					}
+					if (node.value) {
+						visit(node.value);
+					}
 				}
 				return;
 			} else if (node.type === 'JSXSpreadAttribute') {
@@ -282,19 +248,10 @@ export function convert_source_map_to_mappings(ast, source, generated_code, esra
 				// 3. Push closing tag name (not visited by AST walker)
 				if (!node.openingElement?.selfClosing && node.closingElement?.name?.type === 'JSXIdentifier') {
 					const closingNameNode = node.closingElement.name;
-					const closingName = closingNameNode.name;
-					// Check if this was capitalized (reverse lookup)
-					const originalName = reverse_capitalized_names.get(closingName);
-					if (originalName) {
-						tokens.push({ source: originalName, generated: closingName, loc: closingNameNode.loc });
+					if (closingNameNode.metadata?.is_capitalized) {
+						tokens.push({ source: closingNameNode.metadata.original_name, generated: closingNameNode.name, loc: closingNameNode.loc });
 					} else {
-						// Check if this should be capitalized (forward lookup)
-						const capitalizedName = capitalized_names.get(closingName);
-						if (capitalizedName) {
-							tokens.push({ source: closingName, generated: capitalizedName, loc: closingNameNode.loc });
-						} else {
-							tokens.push({ source: closingName, generated: closingName, loc: closingNameNode.loc });
-						}
+						tokens.push({ source: closingNameNode.name, generated: closingNameNode.name, loc: closingNameNode.loc });
 					}
 				}
 

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

@@ -175,7 +175,7 @@ export function bindValue(maybe_tracked) {
 					value = selected_option && get_option_value(selected_option);
 				}
 
-				set(tracked, value, block);
+				set(tracked, value);
 			});
 
 			effect(() => {
@@ -189,7 +189,7 @@ export function bindValue(maybe_tracked) {
 					var selected_option = select.querySelector(':checked');
 					if (selected_option !== null) {
 						value = get_option_value(selected_option);
-						set(tracked, value, block);
+						set(tracked, value);
 					}
 				}
 
@@ -202,7 +202,7 @@ export function bindValue(maybe_tracked) {
 				/** @type {any} */
 				var value = input.value;
 				value = is_numberlike_input(input) ? to_number(value) : value;
-				set(tracked, value, block);
+				set(tracked, value);
 
 				await tick();
 
@@ -254,7 +254,7 @@ export function bindChecked(maybe_tracked) {
 
 	return (input) => {
 		const clear_event = on(input, 'change', () => {
-			set(tracked, input.checked, block);
+			set(tracked, input.checked);
 		});
 
 		return clear_event;
@@ -277,11 +277,11 @@ function bind_element_size(maybe_tracked, type) {
 
 	return (/** @type {HTMLElement} */ element) => {
 		var unsubscribe = resize_observer_border_box.observe(element, () =>
-			set(tracked, element[type], block),
+			set(tracked, element[type]),
 		);
 
 		effect(() => {
-			untrack(() => set(tracked, element[type], block));
+			untrack(() => set(tracked, element[type]));
 			return unsubscribe;
 		});
 	};
@@ -342,7 +342,7 @@ function bind_element_rect(maybe_tracked, type) {
 	return (/** @type {HTMLElement} */ element) => {
 		var unsubscribe = observer.observe(
 			element,
-			/** @param {any} entry */ (entry) => set(tracked, entry[type], block),
+			/** @param {any} entry */ (entry) => set(tracked, entry[type]),
 		);
 
 		effect(() => unsubscribe);
@@ -398,7 +398,7 @@ export function bind_content_editable(maybe_tracked, property) {
 
 	return (element) => {
 		const clear_event = on(element, 'input', () => {
-			set(tracked, element[property], block);
+			set(tracked, element[property]);
 		});
 
 		render(() => {
@@ -408,7 +408,7 @@ export function bind_content_editable(maybe_tracked, property) {
 				if (value == null) {
 					// @ts-ignore
 					var non_null_value = element[property];
-					set(tracked, non_null_value, block);
+					set(tracked, non_null_value);
 				} else {
 					// @ts-ignore
 					element[property] = value + '';

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

@@ -186,7 +186,7 @@ function reconcile_fast_clear(anchor, block, array) {
  * @returns {void}
  */
 function update_index(block, index) {
-	set(block.s.i, index, block);
+	set(block.s.i, index);
 }
 
 /**
@@ -195,7 +195,7 @@ function update_index(block, index) {
  * @returns {void}
  */
 function update_value(block, value) {
-	set(block.s.v, value, block);
+	set(block.s.v, value);
 }
 
 /**

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

@@ -345,6 +345,9 @@ export function track(v, get, set, b) {
 	if (is_tracked_object(v)) {
 		return v;
 	}
+	if (b === null) {
+		throw new TypeError('track() requires a valid component context');
+	}
 
 	if (typeof v === 'function') {
 		return derived(v, b, get, set);
@@ -440,7 +443,7 @@ function is_tracking_dirty(tracking) {
 		var tracked = tracking.t;
 
 		if ((tracked.f & DERIVED) !== 0) {
-			update_derived(/** @type {Derived} **/(tracked));
+			update_derived(/** @type {Derived} **/ (tracked));
 		}
 
 		if (tracked.c > tracking.c) {
@@ -500,7 +503,7 @@ export function async_computed(fn, block) {
 		}
 
 		promise.then((v) => {
-			if (parent && is_destroyed(/** @type {Block} */(parent))) {
+			if (parent && is_destroyed(/** @type {Block} */ (parent))) {
 				return;
 			}
 			if (promise === current && t.__v !== v) {
@@ -509,7 +512,7 @@ export function async_computed(fn, block) {
 				if (t.__v === UNINITIALIZED) {
 					t.__v = v;
 				} else {
-					set(t, v, block);
+					set(t, v);
 				}
 			}
 
@@ -774,7 +777,7 @@ export function get(tracked) {
 	}
 
 	return (tracked.f & DERIVED) !== 0
-		? get_derived(/** @type {Derived} */(tracked))
+		? get_derived(/** @type {Derived} */ (tracked))
 		: get_tracked(tracked);
 }
 
@@ -803,15 +806,14 @@ export function get_tracked(tracked) {
  * @param {any} value
  */
 export function public_set(tracked, value) {
-	set(tracked, value, safe_scope());
+	set(tracked, value);
 }
 
 /**
  * @param {Derived | Tracked} tracked
  * @param {any} value
- * @param {Block} block
  */
-export function set(tracked, value, block) {
+export function set(tracked, value) {
 	if (!is_mutating_allowed) {
 		throw new Error(
 			'Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation',
@@ -823,7 +825,7 @@ export function set(tracked, value, block) {
 	if (value !== old_value) {
 		var tracked_block = tracked.b;
 
-		if ((block.f & CONTAINS_TEARDOWN) !== 0) {
+		if ((tracked_block.f & CONTAINS_TEARDOWN) !== 0) {
 			if (teardown) {
 				old_values.set(tracked, value);
 			} else {
@@ -991,85 +993,78 @@ export function get_property(obj, property, chain = false) {
  * @param {any} obj
  * @param {string | number | symbol} property
  * @param {any} value
- * @param {Block} block
  * @returns {void}
  */
-export function set_property(obj, property, value, block) {
+export function set_property(obj, property, value) {
 	var tracked = obj[property];
-	set(tracked, value, block);
+	set(tracked, value);
 }
 
 /**
  * @param {Tracked} tracked
- * @param {Block} block
  * @param {number} [d]
  * @returns {number}
  */
-export function update(tracked, block, d = 1) {
+export function update(tracked, d = 1) {
 	var value = get(tracked);
 	var result = d === 1 ? value++ : value--;
-	set(tracked, value, block);
+	set(tracked, value);
 	return result;
 }
 
 /**
  * @param {Tracked} tracked
- * @param {Block} block
  * @returns {void}
  */
-export function increment(tracked, block) {
-	set(tracked, tracked.__v + 1, block);
+export function increment(tracked) {
+	set(tracked, tracked.__v + 1);
 }
 
 /**
  * @param {Tracked} tracked
- * @param {Block} block
  * @returns {void}
  */
-export function decrement(tracked, block) {
-	set(tracked, tracked.__v - 1, block);
+export function decrement(tracked) {
+	set(tracked, tracked.__v - 1);
 }
 
 /**
  * @param {Tracked} tracked
- * @param {Block} block
  * @param {number} [d]
  * @returns {number}
  */
-export function update_pre(tracked, block, d = 1) {
+export function update_pre(tracked, d = 1) {
 	var value = get(tracked);
 	var new_value = d === 1 ? ++value : --value;
-	set(tracked, new_value, block);
+	set(tracked, new_value);
 	return new_value;
 }
 
 /**
  * @param {any} obj
  * @param {string | number | symbol} property
- * @param {Block} block
  * @param {number} [d=1]
  * @returns {number}
  */
-export function update_property(obj, property, block, d = 1) {
+export function update_property(obj, property, d = 1) {
 	var tracked = obj[property];
 	var value = get(tracked);
 	var new_value = d === 1 ? value++ : value--;
-	set(tracked, value, block);
+	set(tracked, value);
 	return new_value;
 }
 
 /**
  * @param {any} obj
  * @param {string | number | symbol} property
- * @param {Block} block
  * @param {number} [d=1]
  * @returns {number}
  */
-export function update_pre_property(obj, property, block, d = 1) {
+export function update_pre_property(obj, property, d = 1) {
 	var tracked = obj[property];
 	var value = get(tracked);
 	var new_value = d === 1 ? ++value : --value;
-	set(tracked, new_value, block);
+	set(tracked, new_value);
 	return new_value;
 }
 
@@ -1093,7 +1088,7 @@ export function with_scope(block, fn) {
  * @returns {Block | null}
  */
 export function scope() {
-	return active_scope;
+	return active_scope || active_block;
 }
 
 /**
@@ -1206,7 +1201,7 @@ export async function maybe_tracked(v) {
 		} else {
 			value = await async_computed(async () => {
 				return await get_tracked(v);
-			}, /** @type {Block} */(active_block));
+			}, /** @type {Block} */ (active_block));
 		}
 	} else {
 		value = await v;

package/src/utils/builders.js

@@ -714,6 +714,7 @@ export function jsx_attribute(name, value = null) {
 		type: 'JSXAttribute',
 		name,
 		value,
+		shorthand: false,
 	};
 }
 

package/tests/client/basic/basic.get-set.test.ripple

@@ -39,11 +39,15 @@ describe('basic client > get/set functions', () => {
 			let count = track(0);
 
 			<p>{get(count)}</p>
-			<button onClick={() => {
-				@count++;
-				@count++;
-				@count++;
-			}}>{'increment'}</button>
+			<button
+				onClick={() => {
+					@count++;
+					@count++;
+					@count++;
+				}}
+			>
+				{'increment'}
+			</button>
 		}
 
 		render(Test);
@@ -83,11 +87,15 @@ describe('basic client > get/set functions', () => {
 			let count = track(0);
 
 			<p>{get(count)}</p>
-			<button onClick={() => {
-				set(count, 5);
-				set(count, 15);
-				set(count, 25);
-			}}>{'set multiple times'}</button>
+			<button
+				onClick={() => {
+					set(count, 5);
+					set(count, 15);
+					set(count, 25);
+				}}
+			>
+				{'set multiple times'}
+			</button>
 		}
 
 		render(Test);
@@ -133,11 +141,15 @@ describe('basic client > get/set functions', () => {
 			let count = track(0);
 
 			<p>{get(count)}</p>
-			<button onClick={() => {
-				set(count, get(count) + 5);
-				set(count, get(count) + 15);
-				set(count, get(count) + 25);
-			}}>{'add multiple times'}</button>
+			<button
+				onClick={() => {
+					set(count, get(count) + 5);
+					set(count, get(count) + 15);
+					set(count, get(count) + 25);
+				}}
+			>
+				{'add multiple times'}
+			</button>
 		}
 
 		render(Test);
@@ -158,11 +170,11 @@ describe('basic client > get/set functions', () => {
 		expect(p.textContent).toBe('90');
 	});
 
-	function store() {
-		return track(0);
-	}
-
 	it('gets value declared outside Ripple component', () => {
+		function store() {
+			return track(0);
+		}
+
 		component Test() {
 			let count = store();
 			<p>{get(count)}</p>
@@ -175,6 +187,10 @@ describe('basic client > get/set functions', () => {
 	});
 
 	it('sets value declared outside Ripple component', () => {
+		function store() {
+			return track(0);
+		}
+
 		component Test() {
 			let count = store();
 
@@ -257,35 +273,7 @@ describe('basic client > get/set functions', () => {
 		expect(p.textContent).toBe('2');
 	});
 
-	it("get isn't reactive when declared outside Ripple context", () => {
-		let count = store();
-
-		component Test() {
-			<p>{get(count)}</p>
-			<button onClick={() => { set(count, get(count) + 1) }}>{'increment'}</button>
-		}
-
-		expect(get(count)).toBe(0);
-
-		render(Test);
-
-		const p = container.querySelector('p');
-		expect(p.textContent).toBe('0');
-		expect(get(count)).toBe(0);
-
-		const button = container.querySelector('button');
-		button.click();
-		flushSync();
-
-		expect(p.textContent).toBe('0');
-		expect(get(count)).toBe(1);
-	});
-
-	it('throws on trying to set a value outside Ripple component', () => {
-		let count = store();
-
-		expect(get(count)).toBe(0);
-		expect(() => set(count, 1)).toThrow();
-		expect(get(count)).toBe(0);
+	it('throws on trying to create tracked Ripple component', () => {
+		expect(() => track(0)).toThrow();
 	});
 });

package/tests/client/compiler/__snapshots__/compiler.assignments.test.ripple.snap

@@ -4,9 +4,9 @@ exports[`compiler > assignments > compiles tracked values in effect with assignm
 
 exports[`compiler > assignments > compiles tracked values in effect with update expressions 1`] = `
 "_$_.with_scope(__block, () => untrack(() => {
-			state.preIncrement = _$_.update_pre(count, __block);
-			state.postIncrement = _$_.update(count, __block);
-			state.preDecrement = _$_.update_pre(count, __block, -1);
-			state.postDecrement = _$_.update(count, __block, -1);
+			state.preIncrement = _$_.update_pre(count);
+			state.postIncrement = _$_.update(count);
+			state.preDecrement = _$_.update_pre(count, -1);
+			state.postDecrement = _$_.update(count, -1);
 		}));"
 `;