* Use stable release in demos with HTML output
* Fix Activity sandboxes (#8035)
* Fix Activity sandboxes
* hacky fix
* Revert "Fix Activity sandboxes (#8035)"
This reverts commit f9fd07ca59.
* Bump to 19.2
* cleanup rest of sandpacks
* Pin deps
* Add back package.json with third-party deps
* "^" should be fixed now
* add back package.json for more toastify deps
* fuggin whitespace
* more fuggin whitespace
* fml like fr fr
---------
Co-authored-by: Sebastian Sebbie Silbermann <sebastian.silbermann@vercel.com>
Co-authored-by: Ricky <rickhanlonii@gmail.com>
Co-authored-by: Rick Hanlon <rickhanlonii@meta.com>
We're updating eslint-plugin-react-hooks with support for useEffectEvent usage and updated configuration options for applying the useEffectEvent and other effect rules to custom effect hooks.
This adds the documentation for the config syntax and adds mention to the useEffectEvent reference page that the linter should be used to ensure proper usage of Effect Events.
* docs: scaffold docs structure for Performance tracks
* docs: initial draft of Tracks section
* refactor: moved to reference root section and added to the sidebar
* chore: updated to canary and minor changes
* Docs for `cacheSignal`
* Apply suggestion from review
Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu>
* Apply suggestion from review
Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu>
* Update src/content/reference/react/cacheSignal.md
---------
Co-authored-by: Sebastian Markbåge <sebastian@calyptus.eu>
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.
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
* Add local eslint rule to validate markdown codeblocks with React Compiler
In https://github.com/facebook/react/pull/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.
In https://github.com/facebook/react/pull/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 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.
* 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
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
* 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 <rickhanlonii@gmail.com>
* fix: Correct which lines are highlighted in code example
---------
Co-authored-by: Ricky <rickhanlonii@gmail.com>
