feat(react): port no-object-type-as-default-prop rule (#2323)

Author: fansenze

internal/plugins/react/all.go

@@ -61,6 +61,7 @@ import (
 	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/no_is_mounted"
 	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/no_multi_comp"
 	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/no_namespace"
+	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/no_object_type_as_default_prop"
 	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/no_redundant_should_component_update"
 	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/no_render_return_value"
 	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/no_set_state"
@@ -163,6 +164,7 @@ func GetAllRules() []rule.Rule {
 		no_invalid_html_attribute.NoInvalidHtmlAttributeRule,
 		no_multi_comp.NoMultiCompRule,
 		no_namespace.NoNamespaceRule,
+		no_object_type_as_default_prop.NoObjectTypeAsDefaultPropRule,
 		no_unstable_nested_components.NoUnstableNestedComponentsRule,
 		no_unused_class_component_methods.NoUnusedClassComponentMethodsRule,
 		no_unused_prop_types.NoUnusedPropTypesRule,

internal/plugins/react/reactutil/component_detect.go

@@ -3,6 +3,7 @@ package reactutil
 import (
 	"github.com/microsoft/TypeScript/tsc/shim/ast"
 	"github.com/microsoft/TypeScript/tsc/shim/checker"
+	"github.com/web-infra-dev/rslint/internal/utils"
 	scopeAnalysis "github.com/web-infra-dev/rslint/internal/utils/scopeanalysis"
 )
 
@@ -325,8 +326,8 @@ func GetParentStatelessComponent(node *ast.Node, pragma string, wrappers []Compo
 //     upstream: VariableDeclarator/PropertyAssignment use the binding name;
 //     `Id = fn` assignments use the LHS Identifier; MemberExpression LHS
 //     uses the rightmost property name (with `module.exports = ...` as a
-//     special blanket-true case); a named FunctionExpression defers to its
-//     own Identifier.
+//     special blanket-true case). A named FunctionExpression uses its own
+//     Identifier only after these position-specific checks.
 //
 // Pass the empty string for `pragma` to default to `DefaultReactPragma`.
 //
@@ -386,10 +387,8 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 	switch fn.Kind {
 	case ast.KindMethodDeclaration, ast.KindGetAccessor, ast.KindSetAccessor:
 		// Object-literal shorthand method / accessor. Upstream's Property
-		// branch (method && !computed) | (!id && !computed) classifies the
-		// inner FE as a component when the property key is a capitalized
-		// Identifier AND the function returns strict JSX (isReturningJSX).
-		// Setters naturally fail functionReturnsJSX (no return value).
+		// branch requires a capitalized Identifier and a JSX return for
+		// non-computed keys. Computed keys reach the later name/null gates.
 		// Class-body occurrences have a ClassLike parent — NOT
 		// ObjectLiteralExpression — and are excluded so they continue to go
 		// through the ES6-class path.
@@ -398,6 +397,16 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 			return false
 		}
 		name := fn.Name()
+		if name != nil && name.Kind == ast.KindComputedPropertyName {
+			key := utils.ESTreeRuntimeExpression(name.AsComputedPropertyName().Expression)
+			if key.Kind == ast.KindIdentifier && IsLowercaseFirstLetter(key.Text()) && len(utils.ESTreeParameters(fn)) > 0 {
+				return false
+			}
+			if ast.IsAccessExpression(key) && !ast.IsOptionalChain(key) {
+				return functionReturnsJSXInternal(fn, false, pragma, tc, scopes)
+			}
+			return functionReturnsJSXInternal(fn, true, pragma, tc, scopes) && !functionReturnsOnlyNull(fn)
+		}
 		if name == nil || name.Kind != ast.KindIdentifier {
 			return false
 		}
@@ -419,7 +428,7 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 		return false
 	}
 
-	parent := fn.Parent
+	parent := utils.ESTreeParent(fn)
 	if parent == nil {
 		return false
 	}
@@ -428,17 +437,16 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 	// `isModuleExportsAssignment`.
 	isMEAssign := false
 	isModuleExportsAssign := false
+	var assignedProperty *ast.Node
 	if parent.Kind == ast.KindBinaryExpression {
 		bin := parent.AsBinaryExpression()
-		if bin.OperatorToken != nil && bin.OperatorToken.Kind == ast.KindEqualsToken && bin.Right == fn {
+		if bin.OperatorToken != nil && bin.OperatorToken.Kind == ast.KindEqualsToken && utils.ESTreeRuntimeExpression(bin.Right) == fn {
 			left := ast.SkipParentheses(bin.Left)
-			if left.Kind == ast.KindPropertyAccessExpression {
+			if object, property := utils.MemberExpressionParts(left); object != nil {
 				isMEAssign = true
-				pa := left.AsPropertyAccessExpression()
-				obj := ast.SkipParentheses(pa.Expression)
-				name := pa.Name()
-				if obj.Kind == ast.KindIdentifier && obj.AsIdentifier().Text == "module" &&
-					name != nil && name.Kind == ast.KindIdentifier && name.AsIdentifier().Text == "exports" {
+				obj := utils.ESTreeRuntimeExpression(object)
+				assignedProperty = utils.ESTreeRuntimeExpression(property)
+				if IdentifierOrPrivateName(obj) == "module" && IdentifierOrPrivateName(assignedProperty) == "exports" {
 					isModuleExportsAssign = true
 				}
 			}
@@ -465,7 +473,7 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 	// Branch 3 — early-reject in ReturnStatement / arrow-expression-body
 	// when not strictly returning JSX.
 	if parent.Kind == ast.KindReturnStatement ||
-		(parent.Kind == ast.KindArrowFunction && parent.AsArrowFunction().Body == fn) {
+		(parent.Kind == ast.KindArrowFunction && utils.ESTreeRuntimeExpression(parent.AsArrowFunction().Body) == fn) {
 		if !functionReturnsJSXInternal(fn, false, pragma, tc, scopes) {
 			return false
 		}
@@ -475,19 +483,10 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 	// (handled; Identifier LHS path).
 	if parent.Kind == ast.KindBinaryExpression && !isMEAssign {
 		bin := parent.AsBinaryExpression()
-		if bin.OperatorToken != nil && bin.OperatorToken.Kind == ast.KindEqualsToken && bin.Right == fn {
+		if bin.OperatorToken != nil && bin.OperatorToken.Kind == ast.KindEqualsToken && utils.ESTreeRuntimeExpression(bin.Right) == fn {
 			if !functionReturnsJSXInternal(fn, true, pragma, tc, scopes) {
 				return false
 			}
-			// Named FE defers to its own id (matches upstream's final
-			// `if (node.id)` check, which runs before the lowercase-LHS
-			// reject in the property-assignment tail).
-			if fn.Kind == ast.KindFunctionExpression {
-				name := fn.Name()
-				if name != nil && name.Kind == ast.KindIdentifier {
-					return isFirstLetterCapitalized(name.AsIdentifier().Text)
-				}
-			}
 			left := ast.SkipParentheses(bin.Left)
 			if left.Kind == ast.KindIdentifier {
 				return isFirstLetterCapitalized(left.AsIdentifier().Text)
@@ -498,13 +497,13 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 
 	// Branches 5 & 6 — nested Arrow whose outer Arrow is itself in an
 	// AssignmentExpression / PropertyAssignment position.
-	if parent.Kind == ast.KindArrowFunction && parent.AsArrowFunction().Body == fn {
-		grand := parent.Parent
+	if parent.Kind == ast.KindArrowFunction && utils.ESTreeRuntimeExpression(parent.AsArrowFunction().Body) == fn {
+		grand := utils.ESTreeParent(parent)
 		if grand != nil && !isMEAssign && functionReturnsJSXInternal(fn, true, pragma, tc, scopes) {
 			switch grand.Kind {
 			case ast.KindBinaryExpression:
 				bin := grand.AsBinaryExpression()
-				if bin.OperatorToken != nil && bin.OperatorToken.Kind == ast.KindEqualsToken && bin.Right == parent {
+				if bin.OperatorToken != nil && bin.OperatorToken.Kind == ast.KindEqualsToken && utils.ESTreeRuntimeExpression(bin.Right) == parent {
 					left := ast.SkipParentheses(bin.Left)
 					if left.Kind == ast.KindIdentifier {
 						return isFirstLetterCapitalized(left.AsIdentifier().Text)
@@ -645,17 +644,9 @@ func isStatelessReactComponentCore(fn *ast.Node, pragma string, tc *checker.Chec
 	}
 
 	// Branch 15 — isPropertyAssignment (MemberExpression LHS) but not
-	// module.exports: reject when rightmost property name is lowercase.
-	if isMEAssign && !isModuleExportsAssign {
-		bin := parent.AsBinaryExpression()
-		left := ast.SkipParentheses(bin.Left)
-		if left.Kind == ast.KindPropertyAccessExpression {
-			pa := left.AsPropertyAccessExpression()
-			name := pa.Name()
-			if name != nil && name.Kind == ast.KindIdentifier && !isFirstLetterCapitalized(name.AsIdentifier().Text) {
-				return false
-			}
-		}
+	// module.exports: compare property.name, not a computed string's value.
+	if isMEAssign && !isModuleExportsAssign && !isFirstLetterCapitalized(IdentifierOrPrivateName(assignedProperty)) {
+		return false
 	}
 
 	// Branch 16 — Property parent + returns only null ⇒ undefined.
@@ -703,6 +694,8 @@ func functionReturnsOnlyNull(fn *ast.Node) bool {
 		body = fn.AsMethodDeclaration().Body
 	case ast.KindGetAccessor:
 		body = fn.AsGetAccessorDeclaration().Body
+	case ast.KindSetAccessor:
+		body = fn.AsSetAccessorDeclaration().Body
 	}
 	if body == nil {
 		return false
@@ -759,7 +752,7 @@ func isExportDefaultAssignment(node *ast.Node) bool {
 // `const Hello = (init(), arrow)` — whose comma Sequence sits inside parens —
 // still reaches the VariableDeclaration ancestor.
 func isInAllowedPositionForComponent(fn *ast.Node) bool {
-	parent := skipParenParents(fn)
+	parent := utils.ESTreeParent(fn)
 	if parent == nil {
 		return false
 	}
@@ -779,28 +772,18 @@ func isInAllowedPositionForComponent(fn *ast.Node) bool {
 		switch bin.OperatorToken.Kind {
 		case ast.KindEqualsToken:
 			// AssignmentExpression — always allowed when `fn` is the RHS.
-			return bin.Right == fn
+			return utils.ESTreeRuntimeExpression(bin.Right) == fn
 		case ast.KindCommaToken:
 			// SequenceExpression — only the last operand inherits its parent's
 			// allowed-ness.
-			if bin.Right == fn {
+			if utils.ESTreeRuntimeExpression(bin.Right) == fn {
 				return isInAllowedPositionForComponent(parent)
 			}
 		}
 	}
 	return false
 }
 
-// skipParenParents walks up through ParenthesizedExpression wrappers and
-// returns the first non-paren ancestor of `node`, or nil.
-func skipParenParents(node *ast.Node) *ast.Node {
-	p := node.Parent
-	for p != nil && p.Kind == ast.KindParenthesizedExpression {
-		p = p.Parent
-	}
-	return p
-}
-
 // isPragmaComponentWrapperCall reports whether `call` is a React
 // component-wrapping call — `<pragma>.memo(fn)` / `<pragma>.forwardRef(fn)` /
 // bare `memo(fn)` / bare `forwardRef(fn)` — with `fn` as the first argument.

internal/plugins/react/reactutil/component_detect_shared.go

@@ -6,6 +6,15 @@ import (
 	scopeAnalysis "github.com/web-infra-dev/rslint/internal/utils/scopeanalysis"
 )
 
+// IsDetectedStatelessComponent reports whether Components.detect registers the
+// function itself. Wrapper calls have no parameters and replace their inner
+// function in the upstream component list; async generators are excluded.
+func IsDetectedStatelessComponent(node *ast.Node, pragma string, tc *checker.Checker, wrappers []ComponentWrapperEntry, scopes scopeAnalysis.Provider) bool {
+	return !IsAsyncGeneratorFunction(node) &&
+		OutermostComponentWrapperCall(node, pragma, wrappers, tc, scopes) == nil &&
+		IsStatelessReactComponentWithWrappers(node, pragma, tc, wrappers, scopes)
+}
+
 // IsAsyncGeneratorFunction reports whether `node` is a function expression /
 // declaration / object-literal shorthand method that is BOTH `async` AND a
 // generator (`async function*` or `async *Foo() {}`).

internal/plugins/react/rules/function_component_definition/function_component_definition.go

@@ -232,7 +232,7 @@ func (w *walker) fileVarType() string {
 }
 
 func (w *walker) validate(node *ast.Node, functionType string) {
-	if !w.isDetectedComponentNode(node) {
+	if !reactutil.IsDetectedStatelessComponent(node, w.pragma, w.ctx.TypeChecker, w.wrappers, w.scopes) {
 		return
 	}
 	// Upstream `if (node.parent && node.parent.type === 'Property') return;`.
@@ -515,29 +515,6 @@ func isFunctionExpressionWithName(node *ast.Node) bool {
 	return node.Kind == ast.KindFunctionExpression && identifierText(node.Name()) != ""
 }
 
-// isDetectedComponentNode answers upstream's `components.get(node)` for the
-// function node the rule is about to validate — that is, whether the
-// `Components.detect` pipeline registered THIS node (rather than nothing, or a
-// wrapper call around it) with a non-zero confidence.
-func (w *walker) isDetectedComponentNode(node *ast.Node) bool {
-	// Confidence 0: `Components.detect`'s FunctionExpression /
-	// FunctionDeclaration listeners permanently ban an async generator.
-	if node.Kind != ast.KindArrowFunction && reactutil.IsAsyncGeneratorFunction(node) {
-		return false
-	}
-	wrapper := reactutil.OutermostComponentWrapperCall(node, w.pragma, w.wrappers, w.ctx.TypeChecker, w.scopes)
-	if wrapper != nil && reactutil.WrapperWrapsKnownSiblingComponent(wrapper, node) {
-		return false
-	}
-	if !reactutil.IsStatelessReactComponentWithWrappers(node, w.pragma, w.ctx.TypeChecker, w.wrappers, w.scopes) {
-		return false
-	}
-	// `getStatelessComponent` redirects a wrapped function to its outer-most
-	// wrapper call, so the function node itself never enters the components
-	// list — `components.get(node)` is null and the rule stays silent.
-	return wrapper == nil
-}
-
 func contains(list []string, value string) bool {
 	for _, item := range list {
 		if item == value {

internal/plugins/react/rules/no_direct_mutation_state/no_direct_mutation_state_extras_test.go

@@ -0,0 +1,26 @@
+package no_direct_mutation_state
+
+import (
+	"testing"
+
+	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/fixtures"
+	"github.com/web-infra-dev/rslint/internal/rule_tester"
+)
+
+func TestNoDirectMutationStateExtras(t *testing.T) {
+	rule_tester.RunRuleTester(fixtures.GetRootDir(), "tsconfig.json", t, &NoDirectMutationStateRule, nil, []rule_tester.InvalidTestCase{
+		// Computed object methods returning JSX are components upstream.
+		// Verified with eslint-plugin-react v7.37.5 using both parsers.
+		{Code: `
+        const obj = {
+          ['Hello']() {
+            this.state.x = 1;
+            return <div/>;
+          },
+        };
+      `, Tsx: true,
+			Errors: []rule_tester.InvalidTestCaseError{
+				{MessageId: "noDirectMutation", Message: "Do not mutate state directly. Use setState().", Line: 4, Column: 13, EndLine: 4, EndColumn: 23},
+			}},
+	})
+}

internal/plugins/react/rules/no_direct_mutation_state/no_direct_mutation_state_test.go

@@ -399,17 +399,6 @@ func TestNoDirectMutationStateRule(t *testing.T) {
         };
       `, Tsx: true},
 
-		// ---- Edge: computed key on shorthand method (`[Hello]() {...}`) is
-		// NOT a component per upstream's `!node.parent.computed` guard. ----
-		{Code: `
-        const obj = {
-          ['Hello']() {
-            this.state.x = 1;
-            return <div/>;
-          },
-        };
-      `, Tsx: true},
-
 		// ---- Edge: object-literal setter `set Hello(v) { ... }` doesn't
 		// return JSX (no return value), so never a component. ----
 		{Code: `

internal/plugins/react/rules/no_multi_comp/no_multi_comp_extras_test.go

@@ -0,0 +1,20 @@
+package no_multi_comp
+
+import (
+	"testing"
+
+	"github.com/web-infra-dev/rslint/internal/plugins/react/rules/fixtures"
+	"github.com/web-infra-dev/rslint/internal/rule_tester"
+)
+
+func TestNoMultiCompAssignmentName(t *testing.T) {
+	// Checked against eslint-plugin-react v7.37.5: an identifier assignment
+	// uses the binding's name even when its function expression has a name.
+	rule_tester.RunRuleTester(fixtures.GetRootDir(), "tsconfig.json", t, &NoMultiCompRule, []rule_tester.ValidTestCase{
+		{Code: `
+        var helper;
+        helper = function NamedComp() { return <div /> }
+        class App extends React.Component { render() { return <div /> } }
+      `, Tsx: true},
+	}, nil)
+}

internal/plugins/react/rules/no_multi_comp/no_multi_comp_test.go

@@ -1120,7 +1120,7 @@ func TestNoMultiCompRule(t *testing.T) {
         class B extends React.Component { render() { return <div /> } }
         class C extends React.Component { render() { return <div /> } }
       `,
-			Tsx: true,
+			Tsx:     true,
 			Options: map[string]interface{}{"ignoreStateless": true},
 			Settings: map[string]interface{}{
 				"componentWrapperFunctions": []interface{}{"myObserver"},
@@ -1320,25 +1320,6 @@ func TestNoMultiCompRule(t *testing.T) {
 			},
 		},
 
-		// ---- Branch 4 lock-in: named-FE id takes priority over LHS ----
-		// `lower = function CapitalizedFE() { return <div/> }` — even
-		// though LHS is lowercase, the FE's named id is capitalized so
-		// the FE classifies as a component (Branch 4 in
-		// IsStatelessReactComponentWithWrappers explicitly checks
-		// `fn.Kind == FunctionExpression && fn.Name() != nil` BEFORE
-		// looking at LHS). Pair with sibling class.
-		{
-			Code: `
-        var helper;
-        helper = function NamedComp() { return <div /> }
-        class App extends React.Component { render() { return <div /> } }
-      `,
-			Tsx: true,
-			Errors: []rule_tester.InvalidTestCaseError{
-				{MessageId: onlyOne, Line: 4},
-			},
-		},
-
 		// ---- Branch 5 lock-in: nested arrow whose outer arrow is in AssignmentExpression ----
 		// `X = () => () => <div/>` — outer arrow in AE with capitalized
 		// LHS, inner arrow returns JSX → inner classifies as