docs: make the 'debug/is-from-react' rule visible in the documentation

Rel1cx · Aug 14, 2024 · 22e812b · 22e812b
1 parent 6c04d20
commit 22e812b
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 11 deletions.
diff --git a/packages/plugins/eslint-plugin-react-debug/README.md b/packages/plugins/eslint-plugin-react-debug/README.md
@@ -40,8 +40,9 @@ export default [
 
 ## Rules
 
-| Rule                 | Description                    | 💼  | 💭  |     |
-| :------------------- | :----------------------------- | :-: | :-: | :-: |
-| `class-component`    | Print all class components.    | 🐞  |     |     |
-| `function-component` | Print all function components. | 🐞  |     |     |
-| `react-hooks`        | Print all react hooks.         | 🐞  |     |     |
+| Rule                 | Description                                             | 💼  | 💭  |     |
+| :------------------- | :------------------------------------------------------ | :-: | :-: | :-: |
+| `class-component`    | Report all class components.                            | 🐞  |     |     |
+| `function-component` | Report all function components.                         | 🐞  |     |     |
+| `react-hooks`        | Report all react hooks.                                 | 🐞  |     |     |
+| `is-from-react`      | Report all identifiers that are initialized from 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
@@ -20,7 +20,7 @@ export default createRule<[], MessageID>({
       description: "report all identifiers that are initialized from React.",
     },
     messages: {
-      isFromReact: "[initialized from react] name: {{name}}, importSource: {{importSource}}.",
+      isFromReact: "[initialized from react] name: '{{name}}', importSource: '{{importSource}}'.",
     },
     schema: [],
   },

diff --git a/website/pages/docs/rules/_meta.ts b/website/pages/docs/rules/_meta.ts
@@ -77,4 +77,5 @@ export default {
   "debug-class-component": "debug/class-component",
   "debug-function-component": "debug/function-component",
   "debug-react-hooks": "debug/react-hooks",
+  "debug-is-from-react": "debug/is-from-react",
 };
diff --git a/website/pages/docs/rules/debug-is-from-react.mdx b/website/pages/docs/rules/debug-is-from-react.mdx
@@ -0,0 +1,61 @@
+# is-from-react
+
+## Rule category
+
+Debug.
+
+## What it does
+
+Reports all identifiers that are initialized from React. Useful for debugging. This rule should only be used for debugging purposes. Otherwise, leave it off.
+
+## Examples
+
+```tsx twoslash
+import { useState } from "react";
+//       ^^^^^^^^
+//       - [initialized from react] name: 'useState', importSource: 'react'.
+```
+
+```tsx twoslash
+import React from "react";
+//     ^^^^^
+//     - [initialized from react] name: 'React', importSource: 'react'.
+
+const Children = React.Children;
+//    ^^^^^^^^   ^^^^^ ^^^^^^^^
+//    |          |     - [initialized from react] name: 'Children', importSource: 'react'.
+//    |          - [initialized from react] name: 'React', importSource: 'react'.
+//    - [initialized from react] name: 'Children', importSource: 'react'.
+
+const toArray = Children.toArray;
+//    ^^^^^^^   ^^^^^^^^ ^^^^^^^
+//    |         |        - [initialized from react] name: 'toArray', importSource: 'react'.
+//    |         - [initialized from react] name: 'Children', importSource: 'react'.
+//    - [initialized from react] name: 'Children', importSource: 'react'.
+```
+
+### When [`settings["react-x"].importSource`](https://eslint-react.xyz/docs/configuration#importsource) is set to `"@pika/react"`
+
+```tsx
+import { useState } from "@pika/react";
+//       ^^^^^^^^
+//       - [initialized from react] name: 'useState', importSource: '@pika/react'.
+```
+
+```tsx twoslash
+import React from "@pika/react";
+//     ^^^^^
+//     - [initialized from react] name: 'React', importSource: '@pika/react'.
+
+const Children = React.Children;
+//    ^^^^^^^^   ^^^^^ ^^^^^^^^
+//    |          |     - [initialized from react] name: 'Children', importSource: '@pika/react'.
+//    |          - [initialized from react] name: 'React', importSource: '@pika/react'.
+//    - [initialized from react] name: 'Children', importSource: '@pika/react'.
+
+const toArray = Children.toArray;
+//    ^^^^^^^   ^^^^^^^^ ^^^^^^^
+//    |         |        - [initialized from react] name: 'toArray', importSource: '@pika/react'.
+//    |         - [initialized from react] name: 'Children', importSource: '@pika/react'.
+//    - [initialized from react] name: 'Children', importSource: '@pika/react'.
+```
diff --git a/website/pages/docs/rules/overview.md b/website/pages/docs/rules/overview.md
@@ -107,8 +107,9 @@
 
 ## Debug Rules
 
-| Rule                                                   | Description                    | 💼  | 💭  |     |
-| :----------------------------------------------------- | :----------------------------- | :-: | :-: | :-: |
-| [`debug/class-component`](debug-class-component)       | Print all class components.    | 🐞  |     |     |
-| [`debug/function-component`](debug-function-component) | Print all function components. | 🐞  |     |     |
-| [`debug/react-hooks`](debug-react-hooks)               | Print all react hooks.         | 🐞  |     |     |
+| Rule                                                   | Description                                             | 💼  | 💭  |     |
+| :----------------------------------------------------- | :------------------------------------------------------ | :-: | :-: | :-: |
+| [`debug/class-component`](debug-class-component)       | Report all class components.                            | 🐞  |     |     |
+| [`debug/function-component`](debug-function-component) | Report all function components.                         | 🐞  |     |     |
+| [`debug/react-hooks`](debug-react-hooks)               | Report all react hooks.                                 | 🐞  |     |     |
+| [`debug/is-from-react`](debug-is-from-react)           | Report all identifiers that are initialized from React. | 🐞  |     | 🚧  |