Improve source tracking with Babel integration and TSX context detection

Author: HumbleBee14

package-lock.json

@@ -129,8 +129,10 @@
     "zod": "^4.2.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.6",
     "@playwright/test": "^1.56.1",
     "@stylistic/eslint-plugin-ts": "^2.8.0",
+    "@types/babel__core": "^7.20.5",
     "@types/cookie": "^0.3.3",
     "@types/debug": "^4.1.5",
     "@types/eslint": "^9.6.1",

package.json

@@ -1003,22 +1003,17 @@ render(h(Component), root);
 		framework: Framework,
 		componentId: string
 	): Record<string, string> {
-		const transform = createSourceTrackingTransform(framework);
+		const transform = createSourceTrackingTransform(framework, this.logger);
 		const trackedFiles: Record<string, string> = {};
 
 		for (const [filename, content] of Object.entries(files)) {
 			try {
 				// Apply source tracking transformation
 				const transformedContent = transform(content, filename, componentId);
 				trackedFiles[filename] = transformedContent;
-
-				// Log if transformation happened
-				if (transformedContent !== content) {
-					this.logger.debug('Source tracking applied', { filename });
-				}
 			} catch (error) {
 				// Gracefully handle errors - use original content
-				this.logger.warn('Source tracking transformation failed', { filename, error });
+				this.logger.warn('[SOURCE_TRACKING] Transformation error', { filename, error });
 				trackedFiles[filename] = content;
 			}
 		}

src/vs/workbench/contrib/roopik/electron-main/build/esbuildTransformer.ts

@@ -120,6 +120,21 @@ export function isInsideTypeScriptTypeContext(code: string, position: number): b
 	// Look backwards from position to find context
 	const beforeMatch = code.substring(Math.max(0, position - 100), position);
 
+	// CRITICAL Pattern: Generic function/method calls - "useState<", "React.useState<", "useRef<T>"
+	// This is the MOST COMMON case that causes bugs!
+	// If an identifier immediately precedes '<', it's almost always a TypeScript generic, NOT JSX
+	// The ONLY exception is: "return <Component>" (the 'return' keyword)
+	// Note: "=> <Component>" doesn't match because '=>' isn't an identifier
+	const identifierBeforeAngleBracket = /[A-Za-z_$][A-Za-z0-9_$.]*\s*$/.exec(beforeMatch);
+	if (identifierBeforeAngleBracket) {
+		const matchedIdentifier = identifierBeforeAngleBracket[0].trim();
+		// If the identifier is 'return', it's JSX (e.g., "return <div>")
+		// Otherwise, it's a TypeScript generic (e.g., "useState<T>", "Array<string>")
+		if (matchedIdentifier !== 'return') {
+			return true; // Skip - it's a generic
+		}
+	}
+
 	// Pattern 1: Type annotation - "event: React.MouseEvent<" or "value: Array<"
 	// Look for ": TypeName<" pattern (colon followed by identifier then our position)
 	if (/:\s*[A-Za-z_$][A-Za-z0-9_$.<>]*$/.test(beforeMatch)) {