feat(naming): match @rbxts/react component types in .ts files (#661)

* fix(test): scrub git env before `git init` in oxlintTargets fixtures

Both fixtures ran `git init` with the ambient environment. Under a git hook,
GIT_DIR points at the repository being committed, so `git init` re-initialised
that repository instead of the temporary directory - and with no work tree in
the environment it set `core.bare = true`, which breaks every later git
command in the checkout and its worktrees. The temporary directory never
became a repository either, so both assertions failed.

Wrap the init calls in `withoutGitEnvironment`, the helper the assertions
already use.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* feat(naming): match @rbxts/react component types in .ts, cover ComponentType

Share the React selectors between the ts and tsx blocks; the ts block had
none, so `readonly FallbackComponent: React.ComponentType<P>` in a .ts file
fell through to the camelCase default.

`ComponentType` is a union alias (`ComponentClass | FunctionComponent`) and
the flawless type matcher splits unions before it compares names, so the alias
symbol never matches. List both members, plus the exotic component types
(memo/lazy/forwardRef) and Context.

Component-typed classProperty/typeProperty accept camelCase or PascalCase;
parameters and variables stay PascalCase-only, as tsx already required.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: christopher-buss

src/eslint/configs/naming.ts

@@ -9,6 +9,30 @@ import type {
 
 const RBXTS_REACT = "@rbxts/react";
 
+/**
+ * Component-valued types from `@rbxts/react`.
+ *
+ * `ComponentType` is an alias for `ComponentClass | FunctionComponent`, and the
+ * type matcher splits unions before matching, so both members have to be listed
+ * for a `ComponentType`-annotated name to match.
+ */
+const REACT_COMPONENT_TYPES = [
+	{ name: "ComponentClass", from: RBXTS_REACT },
+	{ name: "Context", from: RBXTS_REACT },
+	{ name: "ExoticComponent", from: RBXTS_REACT },
+	{ name: "FC", from: RBXTS_REACT },
+	{ name: "ForwardRefExoticComponent", from: RBXTS_REACT },
+	{ name: "FunctionComponent", from: RBXTS_REACT },
+	{ name: "LazyExoticComponent", from: RBXTS_REACT },
+	{ name: "MemoExoticComponent", from: RBXTS_REACT },
+	{ name: "NamedExoticComponent", from: RBXTS_REACT },
+];
+
+const REACT_ELEMENT_RETURN_TYPES = [
+	{ returns: { name: "Element", from: RBXTS_REACT } },
+	{ returns: { name: "ReactNode", from: RBXTS_REACT } },
+];
+
 export async function naming(
 	options: NamingConfig & OptionsTypeScriptParserOptions & OptionsTypeScriptWithTypes = {},
 ): Promise<Array<TypedFlatConfigItem>> {
@@ -53,6 +77,7 @@ export async function naming(
 									format: null,
 									selector: "import",
 								},
+								...(isRoblox ? reactSelectors() : []),
 								{
 									format: null,
 									modifiers: ["destructured"],
@@ -240,52 +265,7 @@ export async function naming(
 									leadingUnderscore: "allow",
 									selector: "variable",
 								},
-								...(isRoblox
-									? [
-											{
-												// React components and contexts
-												// conventionally use PascalCase
-												format: ["StrictPascalCase"],
-												selector: ["parameter", "variable"],
-												types: [
-													{ name: "Context", from: RBXTS_REACT },
-													{ name: "FC", from: RBXTS_REACT },
-													{
-														name: "FunctionComponent",
-														from: RBXTS_REACT,
-													},
-												],
-											},
-											{
-												// components typed as anonymous
-												// functions (e.g. `() =>
-												// React.ReactNode`) have no
-												// symbol name to match, so match
-												// by return type instead;
-												// permissive since camelCase
-												// helpers can also return
-												// elements. typeMethod covers
-												// function-typed interface
-												// members
-												format: ["strictCamelCase", "StrictPascalCase"],
-												selector: ["parameter", "typeMethod", "variable"],
-												types: [
-													{
-														returns: {
-															name: "Element",
-															from: RBXTS_REACT,
-														},
-													},
-													{
-														returns: {
-															name: "ReactNode",
-															from: RBXTS_REACT,
-														},
-													},
-												],
-											},
-										]
-									: []),
+								...(isRoblox ? reactSelectors() : []),
 
 								{
 									format: null,
@@ -424,3 +404,35 @@ export async function naming(
 			: []),
 	];
 }
+
+/**
+ * Selectors that let React component values carry component casing.
+ *
+ * @returns The naming-convention selectors for `@rbxts/react` types.
+ */
+function reactSelectors(): Array<Record<string, unknown>> {
+	return [
+		{
+			// React components and contexts conventionally use PascalCase
+			format: ["StrictPascalCase"],
+			selector: ["parameter", "variable"],
+			types: REACT_COMPONENT_TYPES,
+		},
+		{
+			// Properties holding a component are named for the component, but
+			// camelCase stays legal so existing props do not have to move
+			format: ["strictCamelCase", "StrictPascalCase"],
+			selector: ["classProperty", "typeProperty"],
+			types: REACT_COMPONENT_TYPES,
+		},
+		{
+			// components typed as anonymous functions (e.g. `() =>
+			// React.ReactNode`) have no symbol name to match, so match by return
+			// type instead; permissive since camelCase helpers can also return
+			// elements. typeMethod covers function-typed interface members
+			format: ["strictCamelCase", "StrictPascalCase"],
+			selector: ["parameter", "typeMethod", "variable"],
+			types: REACT_ELEMENT_RETURN_TYPES,
+		},
+	];
+}

test/lint-cli.spec.ts

@@ -633,7 +633,7 @@ describe("oxlintTargets", () => {
 		expect.assertions(1);
 
 		const directory = temporaryDirectory();
-		execFileSync("git", ["init", "-q"], { cwd: directory });
+		withoutGitEnvironment(() => execFileSync("git", ["init", "-q"], { cwd: directory }));
 		fs.writeFileSync(path.join(directory, ".gitignore"), "src/typegen.d.ts\n");
 
 		// The only oxlint-eligible target is the one git ignores, so the set
@@ -650,7 +650,7 @@ describe("oxlintTargets", () => {
 		expect.assertions(1);
 
 		const directory = temporaryDirectory();
-		execFileSync("git", ["init", "-q"], { cwd: directory });
+		withoutGitEnvironment(() => execFileSync("git", ["init", "-q"], { cwd: directory }));
 		fs.writeFileSync(path.join(directory, ".gitignore"), "src/typegen.d.ts\n");
 
 		expect(