ripple 0.2.188 → 0.2.189

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.188",
+  "version": "0.2.189",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -38,6 +38,12 @@
       "require": "./src/compiler/index.js",
       "default": "./src/compiler/index.js"
     },
+    "./compiler/internal/import": {
+      "types": "./src/compiler/types/import.d.ts"
+    },
+    "./compiler/internal/import/utils": {
+      "default": "./src/compiler/import-utils.js"
+    },
     "./validator": {
       "types": "./types/index.d.ts",
       "require": "./validator/index.js",
@@ -86,6 +92,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.188"
+    "ripple": "0.2.189"
   }
 }

package/src/compiler/import-utils.js

@@ -0,0 +1,51 @@
+export const IMPORT_OBFUSCATION_PREFIX = '_$_';
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+export function obfuscate_imported(name) {
+	let start = 0;
+	if (name[0] === name[0].toUpperCase()) {
+		start = 1;
+	}
+	const index = find_next_uppercase(name, start);
+
+	const first_part = name.slice(0, index);
+	const second_part = name.slice(index);
+
+	return IMPORT_OBFUSCATION_PREFIX + (second_part ? second_part + '__' + first_part : first_part);
+}
+
+/**
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function is_imported_obfuscated(name) {
+	return name.startsWith(IMPORT_OBFUSCATION_PREFIX);
+}
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+export function deobfuscate_imported(name) {
+	name = name.replace(IMPORT_OBFUSCATION_PREFIX, '');
+	const parts = name.split('__');
+	return (parts[1] ? parts[1] : '') + parts[0];
+}
+
+/**
+ * Finds the next uppercase character or returns name.length
+ * @param {string} name
+ * @param {number} start
+ * @returns {number}
+ */
+function find_next_uppercase(name, start) {
+	for (let i = start; i < name.length; i++) {
+		if (name[i] === name[i].toUpperCase()) {
+			return i;
+		}
+	}
+	return name.length;
+}

package/src/compiler/index.d.ts

@@ -1,4 +1,4 @@
-import type { Program } from 'estree';
+import type * as AST from 'estree';
 import type {
 	CodeInformation as VolarCodeInformation,
 	Mapping as VolarMapping,
@@ -14,7 +14,7 @@ import type { SourceMapMappings } from '@jridgewell/sourcemap-codec';
  */
 export interface CompileResult {
 	/** The transformed AST */
-	ast: Program;
+	ast: AST.Program;
 	/** The generated JavaScript code with source map */
 	js: {
 		code: string;
@@ -49,6 +49,14 @@ export interface PluginActionOverrides {
 				description?: string; // just for reference
 				// Generic location for embedded content (CSS, etc.)
 				location?: DefinitionLocation;
+				// Replace the type name in hover/definition with a different name
+				// And provide the path to import the type definitions from
+				// the `ripple` package directory, e.g. `types/index.d.ts`
+				// Currently only supported by the definition plugin
+				typeReplace?: {
+					name: string;
+					path: string;
+				};
 		  }
 		| false;
 }
@@ -94,7 +102,7 @@ export interface AnalyzeOptions extends ParseOptions, Pick<CompileOptions, 'mode
 
 export interface VolarCompileOptions extends ParseOptions, SharedCompileOptions {}
 
-export function parse(source: string, options?: ParseOptions): Program;
+export function parse(source: string, options?: ParseOptions): AST.Program;
 
 export function compile(source: string, filename: string, options?: CompileOptions): CompileResult;
 

package/src/compiler/index.js

@@ -1,4 +1,4 @@
-/** @import { Program } from 'estree' */
+/** @import * as AST from 'estree' */
 
 import { parse as parse_module } from './phases/1-parse/index.js';
 import { analyze } from './phases/2-analyze/index.js';
@@ -9,7 +9,7 @@ import { convert_source_map_to_mappings } from './phases/3-transform/segments.js
 /**
  * Parse Ripple source code to ESTree AST
  * @param {string} source
- * @returns {Program}
+ * @returns {AST.Program}
  */
 export function parse(source) {
 	return parse_module(source, undefined);

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

@@ -342,8 +342,12 @@ function RipplePlugin(config) {
 						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
+							if (charAfter === 40 || charAfter === 60) {
+								// ( or < character (for generics like #Map<string, number>)
+								this.pos += 4; // consume '#Map'
+								return this.finishToken(tt.name, '#Map');
+							} else if (this.#loose) {
+								// In loose mode, produce token even without parens (incomplete syntax)
 								this.pos += 4; // consume '#Map'
 								return this.finishToken(tt.name, '#Map');
 							}
@@ -351,8 +355,12 @@ function RipplePlugin(config) {
 						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
+							if (charAfter === 40 || charAfter === 60) {
+								// ( or < character (for generics like #Set<number>)
+								this.pos += 4; // consume '#Set'
+								return this.finishToken(tt.name, '#Set');
+							} else if (this.#loose) {
+								// In loose mode, produce token even without parens (incomplete syntax)
 								this.pos += 4; // consume '#Set'
 								return this.finishToken(tt.name, '#Set');
 							}
@@ -379,8 +387,9 @@ function RipplePlugin(config) {
 						}
 
 						// Check if this is an invalid #Identifier pattern
-						// Valid patterns: #[, #{, #Map(, #Set(, #server
+						// Valid patterns: #[, #{, #Map(, #Map<, #Set(, #Set<, #server
 						// If we see # followed by an uppercase letter that isn't Map or Set, it's an error
+						// In loose mode, allow incomplete identifiers like #M, #Ma, #S, #Se for autocomplete
 						if (nextChar >= 65 && nextChar <= 90) {
 							// A-Z
 							// Extract the identifier name
@@ -401,12 +410,34 @@ function RipplePlugin(config) {
 							}
 							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.`,
-								);
+								// In loose mode, allow incomplete identifiers (prefixes of Map/Set)
+								// This supports autocomplete scenarios where user is still typing
+								const isIncompleteMap = 'Map'.startsWith(identName);
+								const isIncompleteSet = 'Set'.startsWith(identName);
+
+								if (!this.#loose || (!isIncompleteMap && !isIncompleteSet)) {
+									this.raise(
+										this.pos,
+										`Invalid tracked syntax '#${identName}'. Only #Map and #Set are currently supported using shorthand tracked syntax.`,
+									);
+								} else {
+									// In loose mode with valid prefix, consume the token and return it
+									// This allows the parser to handle incomplete syntax gracefully
+									this.pos = identEnd; // consume '#' + identifier
+									return this.finishToken(tt.name, '#' + identName);
+								}
 							}
 						}
+
+						// In loose mode, handle bare # or # followed by unrecognized characters
+						if (this.#loose) {
+							this.pos++; // consume '#'
+							return this.finishToken(tt.name, '#');
+						}
+					} else if (this.#loose) {
+						// In loose mode, handle bare # at EOF
+						this.pos++; // consume '#'
+						return this.finishToken(tt.name, '#');
 					}
 				}
 				if (code === 64) {
@@ -610,6 +641,20 @@ function RipplePlugin(config) {
 					return this.parseTrackedCollectionExpression(type);
 				}
 
+				// In loose mode, handle incomplete #Map/#Set prefixes (e.g., #M, #Ma, #S, #Se)
+				if (
+					this.#loose &&
+					this.type === tt.name &&
+					typeof this.value === 'string' &&
+					this.value.startsWith('#')
+				) {
+					// Return an Identifier node for incomplete tracked syntax
+					const node = /** @type {AST.Identifier} */ (this.startNode());
+					node.name = this.value;
+					this.next();
+					return this.finishNode(node, 'Identifier');
+				}
+
 				// Check if this is a tuple literal starting with #[
 				if (this.type === tt.bracketL && this.value === '#[') {
 					return this.parseTrackedArrayExpression();
@@ -728,8 +773,10 @@ function RipplePlugin(config) {
 					);
 				}
 
-				if (this.type === tt.parenL) {
-					// Don't consume parens - they belong to NewExpression
+				// Don't consume parens or generics - they belong to NewExpression
+				// When used as "new #Map(...)" the next token is '('
+				// When used as "new #Map<K,V>(...)" the next token is '<' (relational)
+				if (this.type === tt.parenL || (this.type === tt.relational && this.value === '<')) {
 					node.arguments = [];
 					return this.finishNode(node, type);
 				}

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

@@ -151,6 +151,10 @@ export function validate_nesting(element, context) {
 						context.state.analysis.module.filename,
 						element,
 					);
+				} else {
+					// if my parent has a set of invalid children
+					// and i'm not in it, then i'm valid
+					return;
 				}
 			}
 		}

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

@@ -52,6 +52,7 @@ import {
 	determine_namespace_for_children,
 	index_to_key,
 } from '../../../utils.js';
+import { obfuscate_imported } from '../../../import-utils.js';
 import is_reference from 'is-reference';
 import { object } from '../../../../utils/ast.js';
 import { render_stylesheets } from '../stylesheet.js';
@@ -314,14 +315,13 @@ function visit_title_element(node, context) {
  * @param {TransformClientContext} context
  * @returns {string}
  */
-function import_from_ripple_if_needed(name, context) {
-	const alias = context.state.ripple_user_imports?.get?.(name);
-
-	if (!alias && !context.state.imports.has(`import { ${name} } from 'ripple'`)) {
-		context.state.imports.add(`import { ${name} } from 'ripple'`);
+function set_hidden_import_from_ripple(name, context) {
+	name = obfuscate_imported(name);
+	if (!context.state.imports.has(`import { ${name} } from 'ripple/compiler/internal/import'`)) {
+		context.state.imports.add(`import { ${name} } from 'ripple/compiler/internal/import'`);
 	}
 
-	return alias ?? name;
+	return name;
 }
 
 /** @type {Visitors<AST.Node, TransformClientState>} */
@@ -531,25 +531,31 @@ const visitors = {
 		}
 
 		// Special handling for TrackedMapExpression and TrackedSetExpression
-		// When source is "new #Map(...)", the callee is TrackedMapExpression with empty arguments
-		// and the actual arguments are in NewExpression.arguments
+		// When source is "new #Map(...)" or "new #Map<K,V>(...)", the callee is TrackedMapExpression
+		// with empty arguments and the actual arguments are in NewExpression.arguments
 		if (callee.type === 'TrackedMapExpression' || callee.type === 'TrackedSetExpression') {
 			// Use NewExpression's arguments (the callee has empty arguments from parser)
 			const argsToUse = node.arguments.length > 0 ? node.arguments : callee.arguments;
 
 			if (context.state.to_ts) {
 				const className = callee.type === 'TrackedMapExpression' ? 'TrackedMap' : 'TrackedSet';
-				const alias = import_from_ripple_if_needed(className, context);
+				const alias = set_hidden_import_from_ripple(className, context);
 				const calleeId = b.id(alias);
 				calleeId.loc = callee.loc;
 				calleeId.metadata = {
 					tracked_shorthand: callee.type === 'TrackedMapExpression' ? '#Map' : '#Set',
 					path: [...context.path],
 				};
-				return b.new(
+				/** @type {AST.NewExpression} */
+				const newExpr = b.new(
 					calleeId,
 					.../** @type {AST.Expression[]} */ (argsToUse.map((arg) => context.visit(arg))),
 				);
+				// Preserve typeArguments for generics syntax like new #Map<string, number>()
+				if (node.typeArguments) {
+					newExpr.typeArguments = node.typeArguments;
+				}
+				return newExpr;
 			}
 
 			const helperName = callee.type === 'TrackedMapExpression' ? 'tracked_map' : 'tracked_set';
@@ -590,7 +596,7 @@ const visitors = {
 
 	TrackedArrayExpression(node, context) {
 		if (context.state.to_ts) {
-			const arrayAlias = import_from_ripple_if_needed('TrackedArray', context);
+			const arrayAlias = set_hidden_import_from_ripple('TrackedArray', context);
 
 			return b.call(
 				b.member(b.id(arrayAlias), b.id('from')),
@@ -615,7 +621,7 @@ const visitors = {
 
 	TrackedObjectExpression(node, context) {
 		if (context.state.to_ts) {
-			const objectAlias = import_from_ripple_if_needed('TrackedObject', context);
+			const objectAlias = set_hidden_import_from_ripple('TrackedObject', context);
 
 			return b.new(
 				b.id(objectAlias),
@@ -1282,7 +1288,7 @@ const visitors = {
 								b.stmt(b.call('_$_.set_class', id, key, hash_arg, b.literal(is_html))),
 							expression,
 							identity: attr_value,
-							initial: b.literal(''),
+							initial: b.call(b.id('Symbol')),
 						});
 					} else {
 						state.init?.push(
@@ -2254,7 +2260,7 @@ function transform_ts_child(node, context) {
 				const argument = visit(attr.argument, { ...state, metadata });
 				return b.jsx_spread_attribute(/** @type {AST.Expression} */ (argument));
 			} else if (attr.type === 'RefAttribute') {
-				const createRefKeyAlias = import_from_ripple_if_needed('createRefKey', context);
+				const createRefKeyAlias = set_hidden_import_from_ripple('createRefKey', context);
 				const metadata = { await: false };
 				const argument = visit(attr.argument, { ...state, metadata });
 				const wrapper = b.object([
@@ -3148,8 +3154,18 @@ function create_tsx_with_typescript_support() {
 			handle_function(node, context);
 		},
 		ImportDeclaration(node, context) {
-			// Write 'import' keyword with node location for source mapping
-			context.write('import', node);
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			// Write 'import' keyword with source location
+			// to mark the beginning of the import statement for a full import mapping
+			// The semicolon at the end with location will mark the end of the import statement
+			context.location(loc.start.line, loc.start.column);
+			context.write('import');
+
+			// Handle 'import type' syntax (importKind on the declaration itself)
+			if (node.importKind === 'type') {
+				context.write(' type');
+			}
+
 			context.write(' ');
 
 			// Write specifiers - handle default, namespace, and named imports
@@ -3199,6 +3215,29 @@ function create_tsx_with_typescript_support() {
 
 			// Write source
 			context.visit(node.source);
+			// Write semicolon at the end
+			// and record its position to mark the end of the import statement
+			// This should work regardless of whether the source has a semi or not
+			context.location(loc.end.line, loc.end.column - 1);
+			context.write(';');
+		},
+		ImportDefaultSpecifier(node, context) {
+			context.visit(node.local);
+		},
+		ImportNamespaceSpecifier(node, context) {
+			context.write('* as ');
+			context.visit(node.local);
+		},
+		ImportSpecifier(node, context) {
+			if (node.importKind === 'type') {
+				context.write('type ');
+			}
+			context.visit(node.imported);
+			// Only write 'as local' if imported !== local
+			if (/** @type {AST.Identifier} */ (node.imported).name !== node.local.name) {
+				context.write(' as ');
+				context.visit(node.local);
+			}
 		},
 		JSXOpeningElement(node, context) {
 			// Set location for '<'
@@ -3242,9 +3281,28 @@ function create_tsx_with_typescript_support() {
 				}
 			}
 			context.write('[');
-			// Visit the entire type parameter (TSTypeParameter node)
+			// Handle TSTypeParameter inline - mapped types use 'in' not 'extends'
 			if (node.typeParameter) {
-				context.visit(node.typeParameter);
+				const tp = node.typeParameter;
+				if (tp.loc) {
+					context.location(tp.loc.start.line, tp.loc.start.column);
+				}
+				// Write the parameter name
+				if (typeof tp.name === 'string') {
+					context.write(tp.name);
+				} else if (tp.name && tp.name.name) {
+					context.write(tp.name.name);
+				}
+				// In mapped types, constraint uses 'in' instead of 'extends'
+				if (tp.constraint) {
+					context.write(' in ');
+					context.visit(tp.constraint);
+				}
+				// Handle 'as' clause for key remapping (e.g., { [K in Keys as NewKey]: V })
+				if (node.nameType) {
+					context.write(' as ');
+					context.visit(node.nameType);
+				}
 			}
 			context.write(']');
 			if (node.optional) {
@@ -3255,11 +3313,9 @@ function create_tsx_with_typescript_support() {
 				}
 			}
 			context.write(': ');
-			// Visit the value type - could be either typeAnnotation or nameType
+			// Visit the value type
 			if (node.typeAnnotation) {
 				context.visit(node.typeAnnotation);
-			} else if (node.nameType) {
-				context.visit(node.nameType);
 			}
 			context.write(' }');
 		},
@@ -3391,39 +3447,9 @@ function create_tsx_with_typescript_support() {
  * @returns {{ ast: AST.Program, js: { code: string, map: SourceMapMappings, post_processing_changes?: PostProcessingChanges, line_offsets?: LineOffsets }, css: string }}
  */
 export function transform_client(filename, source, analysis, to_ts, minify_css) {
-	/**
-	 * User's named imports from 'ripple' so we can reuse them in TS output
-	 * when transforming shorthand syntax. E.g., if the user has already imported
-	 * TrackedArray, we want to reuse that import instead of importing it again
-	 * if we encounter `#[]`. It's a Map of export name to local name in case the
-	 * user renamed something when importing.
-	 * @type {Map<string, string>}
-	 */
-	const ripple_user_imports = new Map(); // exported -> local
-	if (analysis && analysis.ast && Array.isArray(analysis.ast.body)) {
-		for (const stmt of analysis.ast.body) {
-			if (
-				stmt &&
-				stmt.type === 'ImportDeclaration' &&
-				stmt.source &&
-				stmt.source.value === 'ripple'
-			) {
-				for (const spec of stmt.specifiers || []) {
-					if (spec.type === 'ImportSpecifier' && spec.imported && spec.local) {
-						ripple_user_imports.set(
-							/** @type {AST.Identifier} */ (spec.imported).name,
-							spec.local.name,
-						);
-					}
-				}
-			}
-		}
-	}
-
 	/** @type {TransformClientState} */
 	const state = {
 		imports: new Set(),
-		ripple_user_imports,
 		events: new Set(),
 		template: null,
 		hoisted: [],

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

@@ -24,7 +24,6 @@
 @typedef {{
 	source: string | null | undefined;
 	generated: string;
-	is_full_import_statement?: boolean;
 	loc: AST.SourceLocation;
 	end_loc?: AST.SourceLocation;
 	metadata?: PluginActionOverrides;
@@ -327,17 +326,6 @@ export function convert_source_map_to_mappings(
 	const src_line_offsets = build_line_offsets(source);
 	const gen_line_offsets = build_line_offsets(generated_code);
 
-	/**
-	 * Convert generated line/column to byte offset using pre-computed line_offsets
-	 * @param {number} line
-	 * @param {number} column
-	 * @returns {number}
-	 */
-	const gen_loc_to_offset = (line, column) => {
-		if (line === 1) return column;
-		return line_offsets[line - 1] + column;
-	};
-
 	const [src_to_gen_map] = build_src_to_gen_map(
 		source_map,
 		post_processing_changes,
@@ -382,8 +370,19 @@ export function convert_source_map_to_mappings(
 							loc: node.loc,
 						});
 					} else {
+						const token = /** @type {Token} */ ({
+							source: node.name,
+							generated: node.name,
+							loc: node.loc,
+						});
+						if (node.name === '#') {
+							// Suppress 'Invalid character' to allow typing out the shorthands
+							token.metadata = {
+								suppressedDiagnostics: [1127],
+							};
+						}
 						// No transformation - source and generated names are the same
-						tokens.push({ source: node.name, generated: node.name, loc: node.loc });
+						tokens.push(token);
 					}
 				}
 				return; // Leaf node, don't traverse further
@@ -409,15 +408,37 @@ export function convert_source_map_to_mappings(
 			} else if (node.type === 'ImportDeclaration') {
 				isImportDeclarationPresent = true;
 
-				// Add import declaration as a special token for full-statement mapping
-				// TypeScript reports unused imports with diagnostics covering the entire statement
-				if (node.loc && node.source?.loc) {
+				// Add 'import' keyword token to anchor statement-level diagnostics
+				// And the last character of the statement (semicolon or closing brace)
+				// (e.g., when ALL imports are unused, TS reports on the whole statement)
+				// We only map the 'import' and the last character
+				// to avoid overlapping with individual specifier mappings
+				// which would interfere when only SOME imports are unused.
+				if (node.loc) {
 					tokens.push({
-						source: '',
-						generated: '',
-						loc: node.loc,
-						is_full_import_statement: true,
-						end_loc: node.source.loc,
+						source: 'import',
+						generated: 'import',
+						loc: {
+							start: node.loc.start,
+							end: {
+								line: node.loc.start.line,
+								column: node.loc.start.column + 'import'.length,
+							},
+						},
+					});
+
+					tokens.push({
+						source:
+							source[loc_to_offset(node.loc.end.line, node.loc.end.column - 1, src_line_offsets)],
+						// we always add `;' in the generated import
+						generated: ';',
+						loc: {
+							start: {
+								line: node.loc.end.line,
+								column: node.loc.end.column - 1,
+							},
+							end: node.loc.end,
+						},
 					});
 				}
 
@@ -536,6 +557,7 @@ export function convert_source_map_to_mappings(
 								sourceOffsets: [sourceOffset],
 								generatedOffsets: [offset],
 								lengths: [length],
+								generatedLengths: [length],
 								data: {
 									...mapping_data,
 									customData: {
@@ -813,10 +835,12 @@ export function convert_source_map_to_mappings(
 							// 		'```ripple\npending\n```\n\nRipple-specific keyword for try/pending blocks.\n\nThe `pending` block executes while async operations inside the `try` block are awaiting. This provides a built-in loading state for async components.',
 							// },
 
-							// TODO: Definition is not implemented yet, leaving for future use
+							// Example of a custom definition and its type definition file
 							// definition: {
-							// 	description:
-							// 		'Ripple pending block - executes during async operations in the try block',
+							// 	typeReplace: {
+							// 		name: 'SomeType',
+							// 		path: 'types/index.d.ts',
+							// 	},
 							// },
 						},
 					});
@@ -1623,90 +1647,50 @@ export function convert_source_map_to_mappings(
 	for (const token of tokens) {
 		const source_text = token.source ?? '';
 		const gen_text = token.generated;
-
 		const source_start = loc_to_offset(
 			token.loc.start.line,
 			token.loc.start.column,
 			src_line_offsets,
 		);
+		const source_length = source_text.length;
+		const gen_length = gen_text.length;
+		const gen_line_col = get_generated_position(
+			token.loc.start.line,
+			token.loc.start.column,
+			src_to_gen_map,
+		);
+		const gen_start = loc_to_offset(gen_line_col.line, gen_line_col.column, gen_line_offsets);
 
-		let source_length = source_text.length;
-		let gen_length = gen_text.length;
-		/** @type {MappingData} */
-		let data;
-		/** @type {number} */
-		let gen_start;
-
-		if (token.is_full_import_statement) {
-			const end_loc = /** @type {AST.SourceLocation} */ (token.end_loc).end;
-			const source_end = loc_to_offset(end_loc.line, end_loc.column, src_line_offsets);
-
-			// Look up where import keyword and source literal map to in generated code
-			const gen_start_pos = get_generated_position(
-				token.loc.start.line,
-				token.loc.start.column,
-				src_to_gen_map,
-			);
-			const gen_end_pos = get_generated_position(end_loc.line, end_loc.column, src_to_gen_map);
-
-			gen_start = gen_loc_to_offset(gen_start_pos.line, gen_start_pos.column);
-			const gen_end = gen_loc_to_offset(gen_end_pos.line, gen_end_pos.column);
-
-			source_length = source_end - source_start;
-			gen_length = gen_end - gen_start;
-
-			data = {
-				// we only want verification here, like unused imports
-				// since this is synthetic and otherwise we'll get duplicated actions like intellisense
-				// each imported specifier has its own mapping
-				verification: true,
-				customData: {
-					generatedLengths: [gen_length],
-				},
-			};
-		} else {
-			const gen_line_col = get_generated_position(
-				token.loc.start.line,
-				token.loc.start.column,
-				src_to_gen_map,
-			);
-			gen_start = gen_loc_to_offset(gen_line_col.line, gen_line_col.column);
-
-			/** @type {CustomMappingData} */
-			const customData = {
-				generatedLengths: [gen_length],
-			};
-
-			// Add optional metadata from token if present
-			if (token.metadata) {
-				if ('wordHighlight' in token.metadata) {
-					customData.wordHighlight = token.metadata.wordHighlight;
-				}
+		/** @type {CustomMappingData} */
+		const customData = {
+			generatedLengths: [gen_length],
+		};
 
-				if ('suppressedDiagnostics' in token.metadata) {
-					customData.suppressedDiagnostics = token.metadata.suppressedDiagnostics;
-				}
-				if ('hover' in token.metadata) {
-					customData.hover = token.metadata.hover;
-				}
-				if ('definition' in token.metadata) {
-					customData.definition = token.metadata.definition;
-				}
+		// Add optional metadata from token if present
+		if (token.metadata) {
+			if ('wordHighlight' in token.metadata) {
+				customData.wordHighlight = token.metadata.wordHighlight;
+			}
+			if ('suppressedDiagnostics' in token.metadata) {
+				customData.suppressedDiagnostics = token.metadata.suppressedDiagnostics;
+			}
+			if ('hover' in token.metadata) {
+				customData.hover = token.metadata.hover;
+			}
+			if ('definition' in token.metadata) {
+				customData.definition = token.metadata.definition;
 			}
-
-			data = {
-				...mapping_data,
-				customData,
-			};
 		}
 
-		// !IMPORTANT: don't set generatedLengths, otherwise Volar will use that vs our source
-		// We're adding it to our custom metadata instead as we need it for patching positions
 		mappings.push({
 			sourceOffsets: [source_start],
 			generatedOffsets: [gen_start],
 			lengths: [source_length],
-			data,
+			generatedLengths: [gen_length],
+			data: {
+				...mapping_data,
+				customData,
+			},
 		});
 	}
 
@@ -1720,6 +1704,7 @@ export function convert_source_map_to_mappings(
 			sourceOffsets: [0],
 			generatedOffsets: [0],
 			lengths: [1],
+			generatedLengths: [1],
 			data: {
 				...mapping_data,
 				customData: {
@@ -1737,6 +1722,7 @@ export function convert_source_map_to_mappings(
 			sourceOffsets: [region.start],
 			generatedOffsets: [0],
 			lengths: [region.content.length],
+			generatedLengths: [region.content.length],
 			data: {
 				...mapping_data,
 				customData: {

package/src/compiler/types/import.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Types for Hidden Imports in TSX Generated Code
+ *
+ * Adds uniquely named exports to account for hidden imports
+ * in the tsx generated code for language server / IDE support.
+ * This is necessary because we need to keep hidden imports named differently
+ * for full TS support including adding missing imports in source and
+ * property reporting missing imports.
+ *
+ * The types are obfuscated to avoid name collisions and provide
+ * sufficiently different names so that TS cannot attempt to infer that
+ * the user made a mistake when the user is missing an import.
+ *
+ * e.g.
+ * // import { TrackedMap } from 'ripple'; -- assume TrackedMap import is missing
+ * const map = new TrackedMap();
+ *
+ * If a type in the hidden import contains 'TrackedMap', e.g. '__TrackedMap',
+ * TS would suggest to the user that they meant to use '__TrackedMap' instead of 'TrackedMap'.
+ *
+ * Add additional types as needed if they are used in hidden imports.
+ *
+ * This file is used by the package.json in exports
+ * The exports path is used by the TS compiler to resolve types.
+ *
+ * The intellisense is intercepted by hover language plugin
+ * to replace the obfuscated names with the actual types.
+ *
+ * Do not rename or move without updating those paths.
+ */
+
+import {
+	TrackedMap as _$_Map__Tracked,
+	TrackedSet as _$_Set__Tracked,
+	TrackedArray as _$_Array__Tracked,
+	TrackedObject as _$_Object__Tracked,
+	TrackedURL as _$_URL__Tracked,
+	TrackedURLSearchParams as _$_URLSearchParams__Tracked,
+	TrackedDate as _$_Date__Tracked,
+	createRefKey as _$_RefKey__create,
+} from 'ripple';
+
+export {
+	_$_Map__Tracked,
+	_$_Set__Tracked,
+	_$_Array__Tracked,
+	_$_Object__Tracked,
+	_$_URL__Tracked,
+	_$_URLSearchParams__Tracked,
+	_$_Date__Tracked,
+	_$_RefKey__create,
+};

package/src/compiler/types/index.d.ts

@@ -149,7 +149,9 @@ declare module 'estree' {
 	interface ImportSpecifier {
 		importKind: TSESTree.ImportSpecifier['importKind'];
 	}
-	interface ExportNamedDeclaration {
+	interface ExportNamedDeclaration
+		// doesn't seem we're using parent and assertions, removing to avoid builders errors
+		extends Omit<TSESTree.ExportNamedDeclaration, 'exportKind' | 'parent' | 'assertions'> {
 		exportKind: TSESTree.ExportNamedDeclaration['exportKind'];
 	}
 
@@ -1161,7 +1163,6 @@ export interface TransformClientState extends BaseState {
 	init: Array<AST.Statement> | null;
 	metadata: BaseStateMetaData;
 	namespace: NameSpace;
-	ripple_user_imports: Map<string, string>;
 	setup: Array<AST.Statement> | null;
 	stylesheets: Array<AST.CSS.StyleSheet>;
 	template: Array<string | AST.Expression> | null;

package/src/compiler/types/parse.d.ts

@@ -60,7 +60,7 @@ declare module 'zimmerframe' {
 	export function walk(
 		node: AST.CSS.Node,
 		state: any,
-		visitors: RippleCompiler.Visitors<(AST.CSS.Node), any>,
+		visitors: RippleCompiler.Visitors<AST.CSS.Node, any>,
 	): AST.CSS.Node;
 }
 
@@ -611,12 +611,12 @@ export namespace Parse {
 		 * @param type The node type string (e.g., "Identifier", "BinaryExpression")
 		 * @returns The finished node
 		 */
-		finishNode<T extends AST.Node>(node: T, type: string): T;
+		finishNode<T extends AST.Node>(node: T, type: T['type']): T;
 
 		/**
 		 * Finish a node at a specific position
 		 */
-		finishNodeAt<T extends AST.Node>(node: T, type: string, pos: number, loc: AST.Position): T;
+		finishNodeAt<T extends AST.Node>(node: T, type: T['type'], pos: number, loc: AST.Position): T;
 
 		/**
 		 * Start a new node at current position
@@ -925,7 +925,8 @@ export namespace Parse {
 			| AST.TrackedSetExpression
 			| AST.TrackedArrayExpression
 			| AST.TrackedObjectExpression
-			| AST.Component;
+			| AST.Component
+			| AST.Identifier;
 
 		/** Default handler for parseExprAtom when no other case matches */
 		parseExprAtomDefault(): AST.Expression;

package/tests/client/basic/basic.attributes.test.ripple

@@ -64,7 +64,7 @@ describe('basic client > attribute rendering', () => {
 					[
 						'ccc',
 						'ddd',
-						{eee: true, fff: false},
+						{ eee: true, fff: false },
 					],
 				]}
 			>
@@ -107,7 +107,7 @@ describe('basic client > attribute rendering', () => {
 			>
 				{'Toggle'}
 			</button>
-			<div class={{active: @active, inactive: !@active}}>{'Dynamic Class'}</div>
+			<div class={{ active: @active, inactive: !@active }}>{'Dynamic Class'}</div>
 
 			<style>
 				.active {
@@ -139,6 +139,35 @@ describe('basic client > attribute rendering', () => {
 		expect(div.classList.contains('active')).toBe(false);
 	});
 
+	it('applies scoped ripple classs to multiple elements with dynamic class expressions', () => {
+		component Basic() {
+			let selected = track(1);
+
+			<div class={@selected === 0 ? 'selected' : ''}>{`div 1`}</div>
+			<div class={@selected === 0 ? 'selected' : ''}>{`div 2`}</div>
+
+			<style>
+				div {
+					background: green;
+					color: white;
+				}
+				div.selected {
+					background: indigo;
+				}
+			</style>
+		}
+
+		render(Basic);
+
+		const divs = container.querySelectorAll('div');
+
+		divs.forEach((div) => {
+			expect(Array.from(div.classList).some((className) => className.startsWith('ripple-'))).toBe(
+				true,
+			);
+		});
+	});
+
 	it('render dynamic id attribute', () => {
 		component Basic() {
 			let count = track(0);
@@ -211,7 +240,7 @@ describe('basic client > attribute rendering', () => {
 			>
 				{'Change Color'}
 			</button>
-			<div style={{color: @color, fontWeight: 'bold'}}>{'Dynamic Style'}</div>
+			<div style={{ color: @color, fontWeight: 'bold' }}>{'Dynamic Style'}</div>
 		}
 
 		render(Basic);
@@ -265,7 +294,7 @@ describe('basic client > attribute rendering', () => {
 			}
 
 			<button onClick={toggleColor}>{'Change Color'}</button>
-			<div style={{...@style}}>{'Dynamic Style'}</div>
+			<div style={{ ...@style }}>{'Dynamic Style'}</div>
 		}
 
 		render(Basic);

package/tests/client/compiler/compiler.basic.test.ripple

@@ -1,6 +1,8 @@
 import { parse, compile, compile_to_volar_mappings } from 'ripple/compiler';
+import { obfuscate_imported } from 'ripple/compiler/internal/import/utils';
+import type * as AST from 'estree';
 
-function count_occurrences(string, subString) {
+function count_occurrences(string: string, subString: string): number {
 	let count = 0;
 	let pos = string.indexOf(subString);
 
@@ -25,15 +27,21 @@ describe('compiler > basics', () => {
 
 		let input = source.replace('#style', style1);
 		let ast = parse(input);
-		expect(ast.body[0].declaration.css.source).toEqual(style1);
+		expect(
+			((ast.body[0] as AST.ExportNamedDeclaration).declaration as AST.Component).css.source,
+		).toEqual(style1);
 
 		input = source.replace('#style', style2);
 		ast = parse(input);
-		expect(ast.body[0].declaration.css.source).toEqual(style2);
+		expect(
+			((ast.body[0] as AST.ExportNamedDeclaration).declaration as AST.Component).css.source,
+		).toEqual(style2);
 
 		input = source.replace('#style', style3);
 		ast = parse(input);
-		expect(ast.body[0].declaration.css.source).toEqual(style3);
+		expect(
+			((ast.body[0] as AST.ExportNamedDeclaration).declaration as AST.Component).css.source,
+		).toEqual(style3);
 	});
 
 	it('renders without crashing', () => {
@@ -113,7 +121,7 @@ describe('compiler > basics', () => {
 				},
 			};
 
-			const config3: { [key: RecordKey]: RecordValue } = {
+			const config3: { [key: string]: RecordValue } = {
 				test: {
 					a: 'test3',
 					b: 3,
@@ -192,6 +200,10 @@ describe('compiler > basics', () => {
 				method<T>(): T {
 					return this.value;
 				}
+
+				constructor(value: T) {
+					this.value = value;
+				}
 			}
 
 			let flag = true;
@@ -219,8 +231,10 @@ describe('compiler > basics', () => {
 		const result = compile(source, 'test.ripple', { mode: 'client' });
 	});
 
-	it('doesn\'t add duplicate imports when encountering shorthand syntax', () => {
-		const source = `
+	it(
+		'imports and uses only obfuscated Tracked imports when encountering only shorthand syntax',
+		() => {
+			const source = `
 import {
 	TrackedArray,
 	TrackedObject,
@@ -238,17 +252,18 @@ component App() {
 	<div {ref () => {}} />
 }
 `;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+			const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(count_occurrences(result, 'TrackedArray')).toBe(2);
-		expect(count_occurrences(result, 'TrackedObject')).toBe(2);
-		expect(count_occurrences(result, 'TrackedSet')).toBe(2);
-		expect(count_occurrences(result, 'TrackedMap')).toBe(2);
-		expect(count_occurrences(result, 'createRefKey')).toBe(2);
-	});
+			expect(count_occurrences(result, 'TrackedArray')).toBe(1);
+			expect(count_occurrences(result, 'TrackedObject')).toBe(1);
+			expect(count_occurrences(result, 'TrackedSet')).toBe(1);
+			expect(count_occurrences(result, 'TrackedMap')).toBe(1);
+			expect(count_occurrences(result, 'createRefKey')).toBe(1);
+		},
+	);
 
 	it(
-		'doesn\'t add duplicate imports for renamed imports when encountering shorthand syntax',
+		'adds obfuscated imports and keeps renamed Tracked imports intact when encountering shorthand syntax',
 		() => {
 			const source = `
 import {
@@ -270,43 +285,21 @@ component App() {
 `;
 			const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-			expect(count_occurrences(result, 'TrackedArray')).toBe(1);
-			expect(count_occurrences(result, 'TA')).toBe(2);
-			expect(count_occurrences(result, 'TrackedObject')).toBe(1);
-			expect(count_occurrences(result, 'TO')).toBe(2);
-			expect(count_occurrences(result, 'TrackedSet')).toBe(1);
-			expect(count_occurrences(result, 'TS')).toBe(2);
-			expect(count_occurrences(result, 'TrackedMap')).toBe(1);
-			expect(count_occurrences(result, 'TM')).toBe(2);
-			expect(count_occurrences(result, 'createRefKey')).toBe(1);
-			expect(count_occurrences(result, 'crk')).toBe(2);
+			expect(count_occurrences(result, obfuscate_imported('TrackedArray'))).toBe(2);
+			expect(count_occurrences(result, 'TA')).toBe(1);
+			expect(count_occurrences(result, obfuscate_imported('TrackedObject'))).toBe(2);
+			expect(count_occurrences(result, 'TO')).toBe(1);
+			expect(count_occurrences(result, obfuscate_imported('TrackedSet'))).toBe(2);
+			expect(count_occurrences(result, 'TS')).toBe(1);
+			expect(count_occurrences(result, obfuscate_imported('TrackedMap'))).toBe(2);
+			expect(count_occurrences(result, 'TM')).toBe(1);
+			expect(count_occurrences(result, obfuscate_imported('createRefKey'))).toBe(2);
+			expect(count_occurrences(result, 'crk')).toBe(1);
 		},
 	);
 
-	it('adds missing imports for shorthand syntax', () => {
-		const source = `
-component App() {
-	const items = #[1, 2, 3];
-	const obj = #{ a: 1, b: 2, c: 3 };
-	const set = new #Set([1, 2, 3]);
-	const map = new #Map([['a', 1], ['b', 2], ['c', 3]]);
-
-	<div {ref () => {}} />
-}
-`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
-
-		expect(count_occurrences(result, 'TrackedArray')).toBe(2);
-		expect(count_occurrences(result, 'TrackedObject')).toBe(2);
-		expect(count_occurrences(result, 'TrackedSet')).toBe(2);
-		expect(count_occurrences(result, 'TrackedMap')).toBe(2);
-		expect(count_occurrences(result, 'createRefKey')).toBe(2);
-	});
-
-	it('only adds missing imports for shorthand syntax, reusing existing ones', () => {
+	it('adds hidden obfuscated imports for shorthand syntax', () => {
 		const source = `
-import { TrackedArray, TrackedMap, createRefKey as crk } from 'ripple';
-
 component App() {
 	const items = #[1, 2, 3];
 	const obj = #{ a: 1, b: 2, c: 3 };
@@ -318,12 +311,11 @@ component App() {
 `;
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(count_occurrences(result, 'TrackedArray')).toBe(2);
-		expect(count_occurrences(result, 'TrackedObject')).toBe(2);
-		expect(count_occurrences(result, 'TrackedSet')).toBe(2);
-		expect(count_occurrences(result, 'TrackedMap')).toBe(2);
-		expect(count_occurrences(result, 'createRefKey')).toBe(1);
-		expect(count_occurrences(result, 'crk')).toBe(2);
+		expect(count_occurrences(result, obfuscate_imported('TrackedArray'))).toBe(2);
+		expect(count_occurrences(result, obfuscate_imported('TrackedObject'))).toBe(2);
+		expect(count_occurrences(result, obfuscate_imported('TrackedSet'))).toBe(2);
+		expect(count_occurrences(result, obfuscate_imported('TrackedMap'))).toBe(2);
+		expect(count_occurrences(result, obfuscate_imported('createRefKey'))).toBe(2);
 	});
 
 	it('should not error on having js below markup in the same scope', () => {

package/tsconfig.json

@@ -1,32 +1,32 @@
 {
-	"compilerOptions": {
-		"module": "esnext",
-		"lib": ["esnext", "dom", "dom.iterable"],
-		"target": "esnext",
-		"noEmit": true,
-		"moduleResolution": "bundler",
-		"resolveJsonModule": true,
-		"noEmitOnError": true,
-		"noErrorTruncation": true,
-		"allowSyntheticDefaultImports": true,
-		"verbatimModuleSyntax": true,
-		"types": ["node", "vitest/globals"],
-		"jsx": "preserve",
-		"jsxImportSource": "ripple",
-		"strict": true,
-		"allowJs": true,
-		"checkJs": true,
-		"paths": {
-			"ripple": ["./types/index.d.ts"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "target": "esnext",
+    "noEmit": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "noEmitOnError": true,
+    "noErrorTruncation": true,
+    "allowSyntheticDefaultImports": true,
+    "verbatimModuleSyntax": true,
+    "types": ["node", "vitest/globals"],
+    "jsx": "preserve",
+    "jsxImportSource": "ripple",
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true,
+    "paths": {
+      "ripple": ["./types/index.d.ts"],
       "rollup": ["./shims/rollup-estree-types.d.ts"],
       "rollup/*": ["./shims/rollup-estree-types.d.ts"]
-		}
-	},
-	"include": [
-		"./*.js",
-		"./src/",
-		"./tests/**/*.test.ripple",
-		"./tests/**/*.d.ts",
-		"./tests/**/*.js"
-	]
+    }
+  },
+  "include": [
+    "./*.js",
+    "./src/",
+    "./tests/**/*.test.ripple",
+    "./tests/**/*.d.ts",
+    "./tests/**/*.js"
+  ]
 }

package/types/index.d.ts

@@ -10,18 +10,18 @@ export type CompatOptions = {
 	[key: string]: CompatApi;
 };
 
-export declare function mount(
+export function mount(
 	component: () => void,
 	options: { target: HTMLElement; props?: Record<string, any>; compat?: CompatOptions },
 ): () => void;
 
-export declare function tick(): Promise<void>;
+export function tick(): Promise<void>;
 
-export declare function untrack<T>(fn: () => T): T;
+export function untrack<T>(fn: () => T): T;
 
-export declare function flushSync<T>(fn?: () => T): T;
+export function flushSync<T>(fn?: () => T): T;
 
-export declare function effect(fn: (() => void) | (() => () => void)): void;
+export function effect(fn: (() => void) | (() => () => void)): void;
 
 export interface TrackedArrayConstructor {
 	new <T>(...elements: T[]): TrackedArray<T>; // must be used with `new`
@@ -32,16 +32,16 @@ export interface TrackedArrayConstructor {
 
 export interface TrackedArray<T> extends Array<T> {}
 
-export declare const TrackedArray: TrackedArrayConstructor;
+export const TrackedArray: TrackedArrayConstructor;
 
-export declare class Context<T> {
+export class Context<T> {
 	constructor(initial_value: T);
 	get(): T;
 	set(value: T): void;
 	#private;
 }
 
-export declare class TrackedSet<T> extends Set<T> {
+export class TrackedSet<T> extends Set<T> {
 	isDisjointFrom<U>(other: ReadonlySetLike<U> | TrackedSet<U>): boolean;
 	isSubsetOf<U>(other: ReadonlySetLike<U> | TrackedSet<U>): boolean;
 	isSupersetOf<U>(other: ReadonlySetLike<U> | TrackedSet<U>): boolean;
@@ -53,7 +53,7 @@ export declare class TrackedSet<T> extends Set<T> {
 	#private;
 }
 
-export declare class TrackedMap<K, V> extends Map<K, V> {
+export class TrackedMap<K, V> extends Map<K, V> {
 	toJSON(): [K, V][];
 	#private;
 }
@@ -81,7 +81,7 @@ declare global {
 	};
 }
 
-export declare function createRefKey(): symbol;
+export function createRefKey(): symbol;
 
 // Base Tracked interface - all tracked values have a '#v' property containing the actual value
 export interface Tracked<V> {
@@ -115,24 +115,20 @@ type SplitResult<T extends Props, K extends readonly (keyof T)[]> = [
 	Tracked<RestKeys<T, K>>,
 ];
 
-export declare function get<V>(tracked: Tracked<V>): V;
+export function get<V>(tracked: Tracked<V>): V;
 
-export declare function set<V>(tracked: Tracked<V>, value: V): void;
+export function set<V>(tracked: Tracked<V>, value: V): void;
 
 // Overload for function values - infers the return type of the function
-export declare function track<V>(
+export function track<V>(
 	value: () => V,
 	get?: (v: InferComponent<V>) => InferComponent<V>,
 	set?: (next: InferComponent<V>, prev: InferComponent<V>) => InferComponent<V>,
 ): Tracked<InferComponent<V>>;
 // Overload for non-function values
-export declare function track<V>(
-	value?: V,
-	get?: (v: V) => V,
-	set?: (next: V, prev: V) => V,
-): Tracked<V>;
+export function track<V>(value?: V, get?: (v: V) => V, set?: (next: V, prev: V) => V): Tracked<V>;
 
-export declare function trackSplit<V extends Props, const K extends readonly (keyof V)[]>(
+export function trackSplit<V extends Props, const K extends readonly (keyof V)[]>(
 	value: V,
 	splitKeys: K,
 ): SplitResult<V, K>;
@@ -219,7 +215,7 @@ export interface TrackedObjectConstructor {
 	new <T extends object>(obj: T): TrackedObject<T>;
 }
 
-export declare const TrackedObject: TrackedObjectConstructor;
+export const TrackedObject: TrackedObjectConstructor;
 
 export class TrackedDate extends Date {
 	constructor(...params: any[]);
@@ -252,7 +248,7 @@ export interface MediaQuery extends Tracked<boolean> {
 	_brand: void;
 }
 
-export declare const MediaQuery: {
+export const MediaQuery: {
 	new (query: string, fallback?: boolean | undefined): Tracked<boolean>;
 };
 
@@ -268,7 +264,7 @@ export function Portal<V = HTMLElement>({
  * @param {Tracked<V>} tracked
  * @returns {(node: HTMLInputElement | HTMLSelectElement) => void}
  */
-export declare function bindValue<V>(
+export function bindValue<V>(
 	tracked: Tracked<V>,
 ): (node: HTMLInputElement | HTMLSelectElement) => void;
 
@@ -276,36 +272,34 @@ export declare function bindValue<V>(
  * @param {Tracked<V>} tracked
  * @returns {(node: HTMLInputElement) => void}
  */
-export declare function bindChecked<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
+export function bindChecked<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
 
-export declare function bindClientWidth<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindClientWidth<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindClientHeight<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindClientHeight<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindContentRect<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindContentRect<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindContentBoxSize<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindContentBoxSize<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindBorderBoxSize<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindBorderBoxSize<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindDevicePixelContentBoxSize<V>(
-	tracked: Tracked<V>,
-): (node: HTMLElement) => void;
+export function bindDevicePixelContentBoxSize<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindInnerHTML<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindInnerHTML<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindInnerText<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindInnerText<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindTextContent<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindTextContent<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindNode<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindNode<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindGroup<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
+export function bindGroup<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
 
-export declare function bindOffsetHeight<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindOffsetHeight<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindOffsetWidth<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
+export function bindOffsetWidth<V>(tracked: Tracked<V>): (node: HTMLElement) => void;
 
-export declare function bindIndeterminate<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
+export function bindIndeterminate<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
 
-export declare function bindFiles<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;
+export function bindFiles<V>(tracked: Tracked<V>): (node: HTMLInputElement) => void;