Added support for renaming jsx props

Fixes #34

Author: timocov

package.json

@@ -32,6 +32,7 @@
     "@types/chai": "~4.3.3",
     "@types/mocha": "~10.0.0",
     "@types/node": "~14.18.26",
+    "@types/react": "^19.0.10",
     "@typescript-eslint/eslint-plugin": "~5.40.1",
     "@typescript-eslint/parser": "~5.40.1",
     "chai": "~4.3.6",

src/transformer.ts

@@ -139,6 +139,11 @@ function createTransformerFactory(program: ts.Program, options?: Partial<RenameO
 					return handleBindingElement(node);
 				}
 
+				// <Comp node={...} />
+				if (ts.isJsxAttribute(node.parent) && node.parent.name === node) {
+					return handleJsxAttributeName(node);
+				}
+
 				// constructor(public node: string) { // <--- this
 				//     console.log(node); // <--- and this
 				// }
@@ -207,6 +212,11 @@ function createTransformerFactory(program: ts.Program, options?: Partial<RenameO
 			return createNewIdentifier(node);
 		}
 
+		// <Comp node={...} />
+		function handleJsxAttributeName(node: ts.Identifier): ts.Identifier {
+			return createNewIdentifier(node);
+		}
+
 		// const a = { node: 123 }
 		function handlePropertyAssignment(node: ts.Identifier): ts.Identifier {
 			return createNewIdentifier(node);
@@ -425,6 +435,17 @@ function createTransformerFactory(program: ts.Program, options?: Partial<RenameO
 				return VisibilityType.External;
 			}
 
+			// <Comp node={...} />
+			if (ts.isJsxAttribute(node.parent)) {
+				const jsxTagSymbol = typeChecker.getSymbolAtLocation(node.parent.parent.parent.tagName);
+				if (jsxTagSymbol !== undefined && jsxTagSymbol.valueDeclaration !== undefined) {
+					const jsxPropsType = typeChecker.getTypeOfSymbolAtLocation(jsxTagSymbol, jsxTagSymbol.valueDeclaration);
+					if (isTypePropertyExternal(jsxPropsType, node.getText())) {
+						return VisibilityType.External;
+					}
+				}
+			}
+
 			const nodeSymbol = getNodeSymbol(node);
 			const classOfMember = nodeSymbol !== null ? getClassOfMemberSymbol(nodeSymbol) : null;
 			if (classOfMember !== null && isTypePropertyExternal(typeChecker.getTypeAtLocation(classOfMember), node.getText())) {

tests/functional-test-cases.ts

@@ -26,6 +26,20 @@ function prepareString(str: string): string {
 	return str.trim().replace(/\r\n/g, '\n');
 }
 
+function findInputFile(testCaseDir: string): string {
+	const tsFilePath = path.join(testCaseDir, 'input.ts');
+	if (fs.existsSync(tsFilePath)) {
+		return tsFilePath;
+	}
+
+	const tsxFilePath = path.join(testCaseDir, 'input.tsx');
+	if (fs.existsSync(tsxFilePath)) {
+		return tsxFilePath;
+	}
+
+	throw new Error(`Cannot find input file in ${testCaseDir}`);
+}
+
 function getTestCases(): TestCase[] {
 	if (!fs.existsSync(testCasesDir) || !fs.lstatSync(testCasesDir).isDirectory()) {
 		throw new Error(`${testCasesDir} folder does not exist`);
@@ -38,7 +52,7 @@ function getTestCases(): TestCase[] {
 		.map((directoryName: string) => {
 			const testCaseDir = path.resolve(testCasesDir, directoryName);
 			const outputFileName = path.resolve(testCaseDir, 'output.js');
-			const inputFileName = path.relative(process.cwd(), path.resolve(testCaseDir, 'input.ts'));
+			const inputFileName = path.relative(process.cwd(), findInputFile(testCaseDir));
 
 			assert(fs.existsSync(inputFileName), `Input file doesn't exist for ${directoryName}`);
 			assert(fs.existsSync(outputFileName), `Output file doesn't exist for ${directoryName}`);

tests/test-cases/tsx/input.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+interface SkeletonProps {
+  history: History;
+}
+
+const Skeleton = ({ history }: SkeletonProps) => (
+  <div className={String(history.length)} />
+);
+
+const AppImpl = () => (
+    <Skeleton history={history} />
+);

tests/test-cases/tsx/output.js

@@ -0,0 +1,3 @@
+import React from "react";
+const Skeleton = ({ _internal_history: history }) => (React.createElement("div", { className: String(history.length) }));
+const AppImpl = () => (React.createElement(Skeleton, { _internal_history: history }));

tests/test-cases/tsx/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"jsx": "react",
+		"target": "ES2015",
+		"moduleResolution": "node",
+		"esModuleInterop": true
+	}
+}