diff --git a/examples/vite-react-dom-app/eslint.config.js b/examples/vite-react-dom-app/eslint.config.js index 40054b9874..781846924c 100644 --- a/examples/vite-react-dom-app/eslint.config.js +++ b/examples/vite-react-dom-app/eslint.config.js @@ -58,6 +58,7 @@ export default tseslint.config( }, rules: { ...eslintPluginReactHooks.configs.recommended.rules, + "@eslint-react/debug/jsx": "warn", }, }, ); diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts index e237c6cd7e..df0327cde6 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts @@ -1,6 +1,7 @@ import tsx from "dedent"; import { allValid, ruleTester } from "../../../../../test"; +import { stringify } from "../utils"; import rule, { RULE_NAME } from "./class-component"; ruleTester.run(RULE_NAME, rule, { @@ -16,7 +17,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, ], }, @@ -31,7 +32,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ClassComponent" }) }, + data: { json: stringify({ name: "ClassComponent" }) }, }, ], }, @@ -54,7 +55,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "UnstableNestedClassComponent" }) }, + data: { json: stringify({ name: "UnstableNestedClassComponent" }) }, }, ], }, @@ -79,11 +80,11 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, { messageId: "classComponent", - data: { json: JSON.stringify({ name: "UnstableNestedClassComponent" }) }, + data: { json: stringify({ name: "UnstableNestedClassComponent" }) }, }, ], }, @@ -108,11 +109,11 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, { messageId: "classComponent", - data: { json: JSON.stringify({ name: "UnstableNestedClassComponent" }) }, + data: { json: stringify({ name: "UnstableNestedClassComponent" }) }, }, ], }, @@ -135,7 +136,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, ], }, @@ -158,7 +159,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, ], }, @@ -181,7 +182,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, ], }, @@ -204,7 +205,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, ], }, @@ -223,7 +224,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, ], }, @@ -249,7 +250,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [ { messageId: "classComponent", - data: { json: JSON.stringify({ name: "ParentComponent" }) }, + data: { json: stringify({ name: "ParentComponent" }) }, }, ], }, diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts index e30439cb5f..cc1aa4a322 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts @@ -3,7 +3,7 @@ import type { RuleListener } from "@typescript-eslint/utils/ts-eslint"; import type { CamelCase } from "string-ts"; import * as ER from "@eslint-react/core"; -import { createRule } from "../utils"; +import { createRule, stringify } from "../utils"; export const RULE_NAME = "class-component"; @@ -41,7 +41,7 @@ export function create(context: RuleContext): RuleListener { messageId: "classComponent", node: component, data: { - json: JSON.stringify({ name }), + json: stringify({ name }), }, }); } diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts index 7acc088a0f..b4be020423 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts @@ -1,6 +1,7 @@ import tsx from "dedent"; import { allFunctions, ruleTester } from "../../../../../test"; +import { stringify } from "../utils"; import rule, { RULE_NAME } from "./function-component"; ruleTester.run(RULE_NAME, rule, { @@ -16,7 +17,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: `"TestDisplayName"`, forwardRef: false, @@ -36,7 +37,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: "none", forwardRef: false, @@ -53,7 +54,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: "none", forwardRef: false, @@ -74,7 +75,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: '`${"TestDisplayName"}`', forwardRef: false, @@ -97,7 +98,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: "none", forwardRef: false, @@ -114,7 +115,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: "none", forwardRef: true, @@ -133,7 +134,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MemoComponent", displayName: "none", forwardRef: false, @@ -155,7 +156,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ name: "Component", displayName: "none", forwardRef: false, hookCalls: 0, memo: true }), + json: stringify({ name: "Component", displayName: "none", forwardRef: false, hookCalls: 0, memo: true }), }, }], }, @@ -166,7 +167,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ForwardRefComponent", displayName: "none", forwardRef: true, @@ -185,7 +186,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MemoForwardRefComponent", displayName: "none", forwardRef: true, @@ -202,7 +203,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MemoForwardRefComponent", displayName: "none", forwardRef: true, @@ -223,7 +224,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ComponentWithHooks", displayName: "none", forwardRef: false, @@ -240,7 +241,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: "none", forwardRef: false, @@ -273,7 +274,7 @@ ruleTester.run(RULE_NAME, rule, { // forwardRef: false, // hookCalls: 0, // memo: false, - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -285,7 +286,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedFunctionComponent", displayName: "none", forwardRef: false, @@ -314,7 +315,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -326,7 +327,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedFunctionComponent", displayName: "none", forwardRef: false, @@ -355,7 +356,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -367,7 +368,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedVariableComponent", displayName: "none", forwardRef: false, @@ -396,7 +397,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -408,7 +409,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedVariableComponent", displayName: "none", forwardRef: false, @@ -437,7 +438,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -449,7 +450,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedFunctionComponent", displayName: "none", forwardRef: false, @@ -478,7 +479,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -490,7 +491,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedFunctionComponent", displayName: "none", forwardRef: false, @@ -519,7 +520,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "anonymous", displayName: "none", forwardRef: false, @@ -531,7 +532,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedFunctionComponent", displayName: "none", forwardRef: false, @@ -560,7 +561,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "anonymous", displayName: "none", forwardRef: false, @@ -572,7 +573,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedFunctionComponent", displayName: "none", forwardRef: false, @@ -601,7 +602,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -613,7 +614,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedVariableComponent", displayName: "none", forwardRef: false, @@ -642,7 +643,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -654,7 +655,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedVariableComponent", displayName: "none", forwardRef: false, @@ -684,7 +685,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -713,7 +714,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -742,7 +743,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedFunctionComponent", displayName: "none", forwardRef: false, @@ -771,7 +772,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedClassComponent", displayName: "none", forwardRef: false, @@ -800,7 +801,7 @@ ruleTester.run(RULE_NAME, rule, { errors: [{ messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedVariableComponent", displayName: "none", forwardRef: false, @@ -830,7 +831,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedClassComponent", displayName: "none", forwardRef: false, @@ -863,7 +864,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -875,7 +876,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "NestedUnstableFunctionComponent", displayName: "none", forwardRef: false, @@ -904,7 +905,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -916,7 +917,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "NestedUnstableFunctionComponent", displayName: "none", forwardRef: false, @@ -948,7 +949,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ComponentWithProps", displayName: "none", forwardRef: false, @@ -960,7 +961,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -989,7 +990,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ComponentWithProps", displayName: "none", forwardRef: false, @@ -1001,7 +1002,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1013,7 +1014,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "SomeFooter", displayName: "none", forwardRef: false, @@ -1040,7 +1041,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ComponentWithProps", displayName: "none", forwardRef: false, @@ -1052,7 +1053,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1079,7 +1080,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ComponentWithProps", displayName: "none", forwardRef: false, @@ -1091,7 +1092,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1130,7 +1131,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1142,7 +1143,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedComponent", displayName: "none", forwardRef: false, @@ -1169,7 +1170,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ComponentForProps", displayName: "none", forwardRef: false, @@ -1181,7 +1182,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1208,7 +1209,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ComponentForProps", displayName: "none", forwardRef: false, @@ -1220,7 +1221,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1243,7 +1244,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1255,7 +1256,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "Header", displayName: "none", forwardRef: false, @@ -1282,7 +1283,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "List", displayName: "none", forwardRef: false, @@ -1316,7 +1317,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "List", displayName: "none", forwardRef: false, @@ -1347,7 +1348,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1377,7 +1378,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1405,7 +1406,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1434,7 +1435,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1446,7 +1447,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedComponent", displayName: "none", forwardRef: false, @@ -1475,7 +1476,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1487,7 +1488,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedComponent", displayName: "none", forwardRef: false, @@ -1518,7 +1519,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1530,7 +1531,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedComponent", displayName: "none", forwardRef: false, @@ -1561,7 +1562,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "ParentComponent", displayName: "none", forwardRef: false, @@ -1573,7 +1574,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "UnstableNestedComponent", displayName: "none", forwardRef: false, @@ -1596,7 +1597,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MyComponent1", displayName: "none", forwardRef: false, @@ -1608,7 +1609,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MyComponent2", displayName: "none", forwardRef: false, @@ -1620,7 +1621,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MyComponent3", displayName: "none", forwardRef: false, @@ -1632,7 +1633,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MyComponent4", displayName: "none", forwardRef: false, @@ -1644,7 +1645,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "MyComponent5", displayName: "none", forwardRef: false, @@ -1665,7 +1666,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "functionComponent", data: { - json: JSON.stringify({ + json: stringify({ name: "App", displayName: "none", forwardRef: false, diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts index 2dc3250e50..8b775dafc1 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts @@ -3,7 +3,7 @@ import type { RuleListener } from "@typescript-eslint/utils/ts-eslint"; import type { CamelCase } from "string-ts"; import * as ER from "@eslint-react/core"; -import { createRule } from "../utils"; +import { createRule, stringify } from "../utils"; export const RULE_NAME = "function-component"; @@ -49,7 +49,7 @@ export function create(context: RuleContext): RuleListener { messageId: "functionComponent", node, data: { - json: JSON.stringify({ + json: stringify({ name, displayName: displayName == null ? "none" diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/hook.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/hook.spec.ts index 7ed1d5d473..cba179b629 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/hook.spec.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/hook.spec.ts @@ -1,6 +1,7 @@ import tsx from "dedent"; import { allFunctions, ruleTester } from "../../../../../test"; +import { stringify } from "../utils"; import rule, { RULE_NAME } from "./hook"; ruleTester.run(RULE_NAME, rule, { @@ -16,7 +17,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useToggle", hookCalls: 1, }), @@ -35,7 +36,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useSorted", hookCalls: 0, }), @@ -59,7 +60,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useToggle", hookCalls: 1, }), @@ -68,7 +69,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useSorted", hookCalls: 0, }), @@ -94,7 +95,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useClassnames", hookCalls: 0, }), @@ -120,7 +121,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useClassnames", hookCalls: 0, }), @@ -143,7 +144,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useNestedHook", hookCalls: 1, }), @@ -152,7 +153,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useInnerHook", hookCalls: 0, }), @@ -175,7 +176,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useNestedHook", hookCalls: 0, }), @@ -184,7 +185,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useInnerHook", hookCalls: 1, }), @@ -207,7 +208,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "hook", data: { - json: JSON.stringify({ + json: stringify({ name: "useNestedHook", hookCalls: 0, }), diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts index 9836f9a6fd..ec3b59f6d7 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts @@ -3,7 +3,7 @@ import type { RuleListener } from "@typescript-eslint/utils/ts-eslint"; import type { CamelCase } from "string-ts"; import * as ER from "@eslint-react/core"; -import { createRule } from "../utils"; +import { createRule, stringify } from "../utils"; export const RULE_NAME = "hook"; @@ -43,7 +43,7 @@ export function create(context: RuleContext): RuleListener { messageId: "hook", node, data: { - json: JSON.stringify({ + json: stringify({ name, hookCalls: hookCalls.length, }), diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.spec.ts index 5a6018395a..48e7f70ce1 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.spec.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.spec.ts @@ -1,6 +1,7 @@ import tsx from "dedent"; import { ruleTester } from "../../../../../test"; +import { stringify } from "../utils"; import rule, { RULE_NAME } from "./is-from-react"; ruleTester.run(RULE_NAME, rule, { @@ -14,7 +15,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ + json: stringify({ name: "React", importSource: "react", }), @@ -23,7 +24,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ + json: stringify({ name: "identifier", importSource: "react", }), @@ -32,7 +33,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ + json: stringify({ name: "React", importSource: "react", }), @@ -49,19 +50,19 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "identifier", importSource: "@pika/react" }), + json: stringify({ name: "identifier", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, ], @@ -80,25 +81,25 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "identifier", importSource: "@pika/react" }), + json: stringify({ name: "identifier", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, ], @@ -120,25 +121,25 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, ], @@ -159,19 +160,19 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, ], @@ -193,31 +194,31 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, ], @@ -240,43 +241,43 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "toArr", importSource: "@pika/react" }), + json: stringify({ name: "toArr", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "toArray", importSource: "@pika/react" }), + json: stringify({ name: "toArray", importSource: "@pika/react" }), }, }, ], @@ -298,31 +299,31 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "toArr", importSource: "@pika/react" }), + json: stringify({ name: "toArr", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "toArray", importSource: "@pika/react" }), + json: stringify({ name: "toArray", importSource: "@pika/react" }), }, }, ], @@ -341,19 +342,19 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "identifier", importSource: "@pika/react" }), + json: stringify({ name: "identifier", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, ], @@ -372,25 +373,25 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "identifier", importSource: "@pika/react" }), + json: stringify({ name: "identifier", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, ], @@ -412,25 +413,25 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, ], @@ -451,19 +452,19 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, ], @@ -485,31 +486,31 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Fragment", importSource: "@pika/react" }), + json: stringify({ name: "Fragment", importSource: "@pika/react" }), }, }, ], @@ -538,43 +539,43 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "React", importSource: "@pika/react" }), + json: stringify({ name: "React", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "toArr", importSource: "@pika/react" }), + json: stringify({ name: "toArr", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "@pika/react" }), + json: stringify({ name: "Children", importSource: "@pika/react" }), }, }, { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "toArray", importSource: "@pika/react" }), + json: stringify({ name: "toArray", importSource: "@pika/react" }), }, }, ], @@ -598,7 +599,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "Children", importSource: "react" }), + json: stringify({ name: "Children", importSource: "react" }), }, }, ], @@ -622,7 +623,7 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "isFromReact", data: { - json: JSON.stringify({ name: "ReactChildren", importSource: "react" }), + json: stringify({ name: "ReactChildren", importSource: "react" }), }, }, ], diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts index fd76f3c899..3cd7dc44b9 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts @@ -7,7 +7,7 @@ import * as ER from "@eslint-react/core"; import { getSettingsFromContext } from "@eslint-react/shared"; import { AST_NODE_TYPES as T } from "@typescript-eslint/utils"; -import { createRule } from "../utils"; +import { createRule, stringify } from "../utils"; export const RULE_NAME = "is-from-react"; @@ -65,7 +65,7 @@ export function create(context: RuleContext): RuleListener { messageId: "isFromReact", node, data: { - json: JSON.stringify({ + json: stringify({ name, importSource, }), diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.spec.ts index cd42a17e42..2966d705bf 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.spec.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.spec.ts @@ -4,6 +4,7 @@ import tsx from "dedent"; import { JsxEmit } from "typescript"; import { defaultLanguageOptionsWithTypes, getProjectForJsxEmit } from "../../../../../test"; +import { stringify } from "../utils"; import rule, { RULE_NAME } from "./jsx"; const ruleTester = new RuleTester({ @@ -28,8 +29,9 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "jsx", data: { - json: JSON.stringify({ - type: "element", + json: stringify({ + kind: "element", + type: "div", jsx: "react-jsx", jsxFactory: "React.createElement", jsxFragmentFactory: "React.Fragment", @@ -53,8 +55,9 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "jsx", data: { - json: JSON.stringify({ - type: "element", + json: stringify({ + kind: "element", + type: "div", jsx: "react", jsxFactory: "Preact.h", jsxFragmentFactory: "Preact.Fragment", @@ -75,8 +78,9 @@ ruleTester.run(RULE_NAME, rule, { { messageId: "jsx", data: { - json: JSON.stringify({ - type: "element", + json: stringify({ + kind: "element", + type: "div", jsx: "react", jsxFactory: "React.createElement", jsxFragmentFactory: "React.Fragment", diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.ts index c8c9fc7caa..ff9a496103 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/jsx.ts @@ -6,7 +6,7 @@ import { JsxConfig, Report, type RuleContext, type RuleFeature } from "@eslint-r import { AST_NODE_TYPES as T, type TSESTree } from "@typescript-eslint/types"; import { match, P } from "ts-pattern"; import { JsxEmit } from "typescript"; -import { createRule } from "../utils"; +import { createRule, stringify } from "../utils"; export const RULE_NAME = "jsx"; @@ -46,11 +46,12 @@ export function create(context: RuleContext): RuleListener { messageId: "jsx", node, data: { - json: JSON.stringify({ - type: match(node) + json: stringify({ + kind: match(node) .with({ type: T.JSXElement }, (n) => ER.isFragmentElement(context, n) ? "fragment" : "element") .with({ type: T.JSXFragment }, () => "fragment") .exhaustive(), + type: ER.getElementType(context, node), jsx: match(jsxConfig.jsx) .with(JsxEmit.None, () => "none") .with(JsxEmit.ReactJSX, () => "react-jsx") diff --git a/packages/plugins/eslint-plugin-react-debug/src/utils/index.ts b/packages/plugins/eslint-plugin-react-debug/src/utils/index.ts index 69d92f43e3..e333280d1d 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/utils/index.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/utils/index.ts @@ -1 +1,2 @@ export * from "./create-rule"; +export * from "./stringify"; diff --git a/packages/plugins/eslint-plugin-react-debug/src/utils/stringify.ts b/packages/plugins/eslint-plugin-react-debug/src/utils/stringify.ts new file mode 100644 index 0000000000..f892e0c24a --- /dev/null +++ b/packages/plugins/eslint-plugin-react-debug/src/utils/stringify.ts @@ -0,0 +1,3 @@ +export function stringify(value: unknown) { + return JSON.stringify(value, null, 2); +}