Add local eslint rule to validate markdown codeblocks with React Compiler

In facebook/react#34462 for example, we found an issue where the compiler was incorrectly validating an example straight from the docs.

In order to find more issues like this + also provide more feedback to doc authors on valid/invalid patterns, this PR adds a new local eslint rule which validates all markdown codeblocks containing components/hooks with React Compiler. An autofixer is also provided.

To express that a codeblock has an expected error, we can use the following metadata:

```ts
// pseudo type def
type MarkdownCodeBlockMetadata = {
    expectedErrors?: {
      'react-compiler'?: number[];
    };
  };
```

and can be used like so:

````
```js {expectedErrors: {'react-compiler': [4]}}
// ❌ setState directly in render
function Component({value}) {
  const [count, setCount] = useState(0);
  setCount(value); // error on L4
  return <div>{count}</div>;
}
```
````

Because this is defined as a local rule, we don't have the same granular reporting that `eslint-plugin-react-hooks` yet. I can look into that later but for now this first PR just sets us up with something basic.

Author: poteto

.eslintrc

@@ -2,18 +2,38 @@
   "root": true,
   "extends": "next/core-web-vitals",
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"],
+  "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"],
   "rules": {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}],
     "react-hooks/exhaustive-deps": "error",
     "react/no-unknown-property": ["error", {"ignore": ["meta"]}],
-    "react-compiler/react-compiler": "error"
+    "react-compiler/react-compiler": "error",
+    "local-rules/lint-markdown-code-blocks": "error"
   },
   "env": {
     "node": true,
     "commonjs": true,
     "browser": true,
     "es6": true
-  }
+  },
+  "overrides": [
+    {
+      "files": ["src/content/**/*.md"],
+      "processor": "local-rules/markdown",
+      "parser": "espree",
+      "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "script"
+      },
+      "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "react-hooks/exhaustive-deps": "off",
+        "react/no-unknown-property": "off",
+        "react-compiler/react-compiler": "off",
+        "local-rules/lint-markdown-code-blocks": "error"
+      }
+    }
+  ]
 }

eslint-local-rules/index.js

@@ -0,0 +1,34 @@
+const lintMarkdownCodeBlocks = require('./rules/lint-markdown-code-blocks');
+
+module.exports = {
+  rules: {
+    'lint-markdown-code-blocks': lintMarkdownCodeBlocks,
+  },
+  processors: {
+    markdown: {
+      preprocess(text, filename) {
+        return [
+          `// Markdown content for processing\n/* ${text.replace(/\*\//g, '*\\/')} */`
+        ];
+      },
+      postprocess(messages) {
+        const processedMessages = messages.flat().map(message => {
+          if (message.suggestions) {
+            const processedSuggestions = message.suggestions.map(suggestion => {
+              if (suggestion.fix) {
+                // Unescape */ in fix text
+                const fixedText = suggestion.fix.text.replace(/\*\\\//g, '*/');
+                return { ...suggestion, fix: { ...suggestion.fix, text: fixedText } };
+              }
+              return suggestion;
+            });
+            return { ...message, suggestions: processedSuggestions };
+          }
+          return message;
+        });
+        return processedMessages;
+      },
+      supportsAutofix: true
+    }
+  }
+};

eslint-local-rules/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "eslint-plugin-local-rules",
+  "version": "0.0.0",
+  "main": "index.js",
+  "private": "true"
+}