Skip to content

Conversation

react-translations-bot
Copy link
Collaborator

This PR was automatically generated.

Merge changes from react.dev at 49c2d26

The following files have conflicts and may need new translations:

Please fix the conflicts by pushing new commits to this pull request, either by editing the files directly on GitHub or by checking out this branch.

DO NOT SQUASH MERGE THIS PULL REQUEST!

Doing so will "erase" the commits from main and cause them to show up as conflicts the next time we merge.

poteto and others added 16 commits September 16, 2025 11:05
Happened to notice we were still on an old version of the compiler. This PR upgrades us to use the latest RC.
Copied over our copyright script from the react repo. I made a small fix to handle shebangs.
* Add copyright script

Copied over our copyright script from the react repo. I made a small fix to handle shebangs.

* Update copyright on all files

Run the script.
…iler (#7988)

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.
* 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.

* fix compiler errors

I went through the list of existing errors and tried to separate the expected errors from those that seem to be flagging unexpected issues.  In particular, our effects validations are flagging patterns that our own docs examples use. I added todos for these and will follow up later.
Previously, `createFileMap` split the MDX meta string on spaces and assumed the first token was the filename. Once we prefixed code fences with `{expectedErrors: ...}`, it would incorrectly parse the meta and crash.

This PR updates createFileMap to skip tokens in the meta containing a start and end brace pair (using a stack to ensure we close on the correct brace) while tokenizing the meta string as expected.

Test plan: pages reported in #7994 no longer crash on the next PR

Closes #7994
* Ignore braces when building Sandpack file map

Previously, `createFileMap` split the MDX meta string on spaces and assumed the first token was the filename. Once we prefixed code fences with `{expectedErrors: ...}`, it would incorrectly parse the meta and crash.

This PR updates createFileMap to skip tokens in the meta containing a start and end brace pair (using a stack to ensure we close on the correct brace) while tokenizing the meta string as expected.

Test plan: pages reported in #7994 no longer crash on the next PR

Closes #7994

* Restore lint corrections from #7989

Reverts the revert now that we've fixed the bug. These pages should no longer crash:

https://react-dev-git-pr7997-fbopensource.vercel.app/learn/referencing-values-with-refs
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/synchronizing-with-effects
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/separating-events-from-effects
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/removing-effect-dependencies
https://react-dev-git-pr7997-fbopensource.vercel.app/learn/you-might-not-need-an-effect
For local dev and CI we want to have the eslint-local-rules running, so let's make sure both have their dependencies installed. We don't use a monorepo setup here, which is why they're currently setup as a two completely independent yarn workspaces.
Adds new docs for our new eslint rules.
* Fix view transition example

* Empty commit

* Fix fullscreen example
* Update useEffectEvent docs for canary

* Clean up prefixed imports

* Fix import

* Update blog post link
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants