Sync with react.dev @ 366b5fbd #112
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Defaults permissions to none for all workflows, and only request extra permissions when needed. Similar to facebook/react#32708, prefer the less permissive `pull_request` trigger instead.
* [ci] Fix permissions and don't use pull_request_target Defaults permissions to none for all workflows, and only request extra permissions when needed. Similar to facebook/react#32708, prefer the less permissive `pull_request` trigger instead. * [ci] Pin 3rd party actions to specific hash
facebook/react#32727 removes the `is_remote` param.
* Add React Prague community * Update link
* Remove captureOwnerStack canary banner * Update nav and site config
* update reactrouter url * Update src/content/learn/build-a-react-app-from-scratch.md --------- Co-authored-by: Ricky <[email protected]>
1. Stop using `canary` for `captureOwnerStack` sandboxes 1. Remove remaining Canary badges from `captureOwnerStack` mentions
Updated `react-ahmedabad` community link to respective domain name
Co-authored-by: Rick Hanlon <[email protected]>
… (#7682) * Fix small grammatical mistake * Update src/content/learn/reusing-logic-with-custom-hooks.md --------- Co-authored-by: Ricky <[email protected]>
Co-authored-by: Sebastian "Sebbie" Silbermann <[email protected]>
* Add React Conf conferences.md and move past conferences * Update conferences.md
GitHub Copilot web search replies that React latest version is 19.0 because 19.1 is not present in this page
Co-authored-by: “Clatron” <“[email protected]”>
* Change the word 'Function' to 'Component' * Trigger actions
This was missed in the last blog post. Also fixed the incorrect date.
Blog post for Compiler RC
Tweaks to the post.
Co-authored-by: unknown <[email protected]~>
`a expensive` should be `an expensive`
Fix "documentatino" typo to "documentation" in comment about useOptimistic reference page.
…d example of the use API (#7767) * Update "Deep Dive" in reusing-logic-with-custom-hooks.md with link to and example of the use API * Remove mention of Server Components when explaining the use API * Update src/content/learn/reusing-logic-with-custom-hooks.md Co-authored-by: Ricky <[email protected]> * fix: Correct which lines are highlighted in code example --------- Co-authored-by: Ricky <[email protected]>
The previous examples used a service called loremflickr.com to link to placeholder images. Since that service is now down, I updated them to reference placecats.com instead, which we already use in other examples as well. placecats doesn't have the same random cat feature so I roughly approximated it in the example code. Closes #7966
* Fix handleClick compiler intro example * Use a note instead * Update src/content/learn/react-compiler/introduction.md
* fix: changed source file names in docs from App.js, index.js and styles.css to src/ dir * fix: updated wrong image with the correct one with current sandbox file structure * refactor: reverted all formatting and just just mention src folder in introductory section * Reverted changes tutorial-tic-tac-toe.md * added enhanced image of sandbox
* docs: add flushSync Troubleshooting section * Update src/content/reference/react-dom/flushSync.md * oops * Apply suggestions from code review * formatting and pitfall --------- Co-authored-by: Ricky <[email protected]> Co-authored-by: Rick Hanlon <[email protected]>
* correct IconExperimental naming and usage (from #7972) Co-authored-by: Tuna <[email protected]> * Bump Activity to Canary in docs --------- Co-authored-by: Tuna <[email protected]>
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.
This reverts commit 5cc9b7b.
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.
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
110.54 KB (🟡 +108 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/404 |
128.02 KB (🟡 +904 B) |
238.56 KB |
/500 |
128.03 KB (🟡 +903 B) |
238.57 KB |
/[[...markdownPath]] |
130.38 KB (🟡 +1.36 KB) |
240.92 KB |
/errors |
128.27 KB (🟡 +877 B) |
238.81 KB |
/errors/[errorCode] |
128.25 KB (🟡 +876 B) |
238.79 KB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR was automatically generated.
Merge changes from react.dev at 366b5fb
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.