[ { "path": ".claude/agents/docs-reviewer.md", "content": "---\nname: docs-reviewer\ndescription: \"Lean docs reviewer that dispatches reviews docs for a particular skill.\"\nmodel: opus\ncolor: cyan\n---\n\nYou are a direct, critical, expert reviewer for React documentation. \n\nYour role is to use given skills to validate given doc pages for consistency, correctness, and adherence to established patterns.\n\nComplete this process:\n\n## Phase 1: Task Creation\n1. CRITICAL: Read the skill requested.\n2. Understand the skill's requirements.\n3. Create a task list to validate skills requirements.\n\n## Phase 2: Validate\n\n1. Read the docs files given.\n2. Review each file with the task list to verify.\n\n## Phase 3: Respond\n\nYou must respond with a checklist of the issues you identified, and line number.\n\nDO NOT respond with passed validations, ONLY respond with the problems. \n" }, { "path": ".claude/settings.json", "content": "{\n \"skills\": {\n \"suggest\": [\n {\n \"pattern\": \"src/content/learn/**/*.md\",\n \"skill\": \"docs-writer-learn\"\n },\n {\n \"pattern\": \"src/content/reference/**/*.md\",\n \"skill\": \"docs-writer-reference\"\n }\n ]\n },\n \"permissions\": {\n \"allow\": [\n \"Skill(docs-voice)\",\n \"Skill(docs-components)\",\n \"Skill(docs-sandpack)\",\n \"Skill(docs-writer-learn)\",\n \"Skill(docs-writer-reference)\",\n \"Bash(yarn lint:*)\",\n \"Bash(yarn lint-heading-ids:*)\",\n \"Bash(yarn lint:fix:*)\",\n \"Bash(yarn tsc:*)\",\n \"Bash(yarn check-all:*)\",\n \"Bash(yarn fix-headings:*)\",\n \"Bash(yarn deadlinks:*)\",\n \"Bash(yarn prettier:diff:*)\"\n ]\n }\n}\n" }, { "path": ".claude/skills/docs-components/SKILL.md", "content": "---\nname: docs-components\ndescription: Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for all documentation types. Authoritative source for component usage, examples, and heading conventions.\n---\n\n# MDX Component Patterns\n\n## Quick Reference\n\n### Component Decision Tree\n\n| Need | Component |\n|------|-----------|\n| Helpful tip or terminology | `` |\n| Common mistake warning | `` |\n| Advanced technical explanation | `` |\n| Canary-only feature | `` or `` |\n| Server Components only | `` |\n| Deprecated API | `` |\n| Experimental/WIP | `` |\n| Visual diagram | `` |\n| Multiple related examples | `` |\n| Interactive code | `` (see `/docs-sandpack`) |\n| Console error display | `` |\n| End-of-page exercises | `` (Learn pages only) |\n\n### Heading Level Conventions\n\n| Component | Heading Level |\n|-----------|---------------|\n| DeepDive title | `####` (h4) |\n| Titled Pitfall | `#####` (h5) |\n| Titled Note | `####` (h4) |\n| Recipe items | `####` (h4) |\n| Challenge items | `####` (h4) |\n\n### Callout Spacing Rules\n\nCallout components (Note, Pitfall, DeepDive) require a **blank line after the opening tag** before content begins.\n\n**Never place consecutively:**\n- `` followed by `` - Combine into one with titled subsections, or separate with prose\n- `` followed by `` - Combine into one, or separate with prose\n\n**Allowed consecutive patterns:**\n- `` followed by `` - OK for multi-part explorations (see useMemo.md)\n- `` followed by `` - OK when DeepDive explains \"why\" behind the Pitfall\n\n**Separation content:** Prose paragraphs, code examples (Sandpack), or section headers.\n\n**Why:** Consecutive warnings create a \"wall of cautions\" that overwhelms readers and causes important warnings to be skimmed.\n\n**Incorrect:**\n```mdx\n\nDon't do X.\n\n\n\nDon't do Y.\n\n```\n\n**Correct - combined:**\n```mdx\n\n\n##### Don't do X {/*pitfall-x*/}\nExplanation.\n\n##### Don't do Y {/*pitfall-y*/}\nExplanation.\n\n\n```\n\n**Correct - separated:**\n```mdx\n\nDon't do X.\n\n\nThis leads to another common mistake:\n\n\nDon't do Y.\n\n```\n\n---\n\n## ``\n\nImportant clarifications, conventions, or tips. Less severe than Pitfall.\n\n### Simple Note\n\n```mdx\n\n\nThe optimization of caching return values is known as [_memoization_](https://en.wikipedia.org/wiki/Memoization).\n\n\n```\n\n### Note with Title\n\nUse `####` (h4) heading with an ID.\n\n```mdx\n\n\n#### There is no directive for Server Components. {/*no-directive*/}\n\nA common misunderstanding is that Server Components are denoted by `\"use server\"`, but there is no directive for Server Components. The `\"use server\"` directive is for Server Functions.\n\n\n```\n\n### Version-Specific Note\n\n```mdx\n\n\nStarting in React 19, you can render `` as a provider.\n\nIn older versions of React, use ``.\n\n\n```\n\n---\n\n## ``\n\nCommon mistakes that cause bugs. Use for errors readers will likely make.\n\n### Simple Pitfall\n\n```mdx\n\n\nWe recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)\n\n\n```\n\n### Titled Pitfall\n\nUse `#####` (h5) heading with an ID.\n\n```mdx\n\n\n##### Calling different memoized functions will read from different caches. {/*pitfall-different-caches*/}\n\nTo access the same cache, components must call the same memoized function.\n\n\n```\n\n### Pitfall with Wrong/Right Code\n\n```mdx\n\n\n##### `useFormStatus` will not return status information for a `
` rendered in the same component. {/*pitfall-same-component*/}\n\n```js\nfunction Form() {\n // 🔴 `pending` will never be true\n const { pending } = useFormStatus();\n return
;\n}\n```\n\nInstead call `useFormStatus` from inside a component located inside `
`.\n\n\n```\n\n---\n\n## ``\n\nOptional deep technical content. **First child must be `####` heading with ID.**\n\n### Standard DeepDive\n\n```mdx\n\n\n#### Is using an updater always preferred? {/*is-updater-preferred*/}\n\nYou might hear a recommendation to always write code like `setAge(a => a + 1)` if the state you're setting is calculated from the previous state. There's no harm in it, but it's also not always necessary.\n\nIn most cases, there is no difference between these two approaches. React always makes sure that for intentional user actions, like clicks, the `age` state variable would be updated before the next click.\n\n\n```\n\n### Comparison DeepDive\n\nFor comparing related concepts:\n\n```mdx\n\n\n#### When should I use `cache`, `memo`, or `useMemo`? {/*cache-memo-usememo*/}\n\nAll mentioned APIs offer memoization but differ in what they memoize, who can access the cache, and when their cache is invalidated.\n\n#### `useMemo` {/*deep-dive-usememo*/}\n\nIn general, you should use `useMemo` for caching expensive computations in Client Components across renders.\n\n#### `cache` {/*deep-dive-cache*/}\n\nIn general, you should use `cache` in Server Components to memoize work that can be shared across components.\n\n\n```\n\n---\n\n## ``\n\nMultiple related examples showing variations. Each recipe needs ``.\n\n```mdx\n\n\n#### Counter (number) {/*counter-number*/}\n\nIn this example, the `count` state variable holds a number.\n\n\n{/* code */}\n\n\n\n\n#### Text field (string) {/*text-field-string*/}\n\nIn this example, the `text` state variable holds a string.\n\n\n{/* code */}\n\n\n\n\n\n```\n\n**Common titleText/titleId combinations:**\n- \"Basic [hookName] examples\" / `examples-basic`\n- \"Examples of [concept]\" / `examples-[concept]`\n- \"The difference between [A] and [B]\" / `examples-[topic]`\n\n---\n\n## ``\n\nEnd-of-page exercises. **Learn pages only.** Each challenge needs problem + solution Sandpack.\n\n```mdx\n\n\n#### Fix the bug {/*fix-the-bug*/}\n\nProblem description...\n\n\nOptional hint text.\n\n\n\n{/* problem code */}\n\n\n\n\nExplanation...\n\n\n{/* solution code */}\n\n\n\n\n\n```\n\n**Guidelines:**\n- Only at end of standard Learn pages\n- No Challenges in chapter intros or tutorials\n- Each challenge has `####` heading with ID\n\n---\n\n## ``\n\nFor deprecated APIs. Content should explain what to use instead.\n\n### Page-Level Deprecation\n\n```mdx\n\n\nIn React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.\n\n`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop).\n\n\n```\n\n### Method-Level Deprecation\n\n```mdx\n### `componentWillMount()` {/*componentwillmount*/}\n\n\n\nThis API has been renamed from `componentWillMount` to [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount)\n\nRun the [`rename-unsafe-lifecycles` codemod](codemod-link) to automatically update.\n\n\n```\n\n---\n\n## ``\n\nFor APIs that only work with React Server Components.\n\n### Basic RSC\n\n```mdx\n\n\n`cache` is only for use with [React Server Components](/reference/rsc/server-components).\n\n\n```\n\n### Extended RSC (for Server Functions)\n\n```mdx\n\n\nServer Functions are for use in [React Server Components](/reference/rsc/server-components).\n\n**Note:** Until September 2024, we referred to all Server Functions as \"Server Actions\".\n\n\n```\n\n---\n\n## `` and ``\n\nFor features only available in Canary releases.\n\n### Canary Wrapper (inline in Intro)\n\n```mdx\n\n\n`` lets you group elements without a wrapper node.\n\nFragments can also accept refs, enabling interaction with underlying DOM nodes.\n\n\n```\n\n### CanaryBadge in Section Headings\n\n```mdx\n### FragmentInstance {/*fragmentinstance*/}\n```\n\n### CanaryBadge in Props Lists\n\n```mdx\n* **optional** `ref`: A ref object from `useRef` or callback function.\n```\n\n### CanaryBadge in Caveats\n\n```mdx\n* If you want to pass `ref` to a Fragment, you can't use the `<>...` syntax.\n```\n\n---\n\n## ``\n\nVisual explanations of module dependencies, render trees, or data flow.\n\n```mdx\n\n`'use client'` segments the module dependency tree, marking `InspirationGenerator.js` and all dependencies as client-rendered.\n\n```\n\n**Attributes:**\n- `name`: Diagram identifier (used for image file)\n- `height`: Height in pixels\n- `width`: Width in pixels\n- `alt`: Accessible description of the diagram\n\n---\n\n## `` (Use Sparingly)\n\nNumbered callouts in prose. Pairs with code block annotations.\n\n### Syntax\n\nIn code blocks:\n```mdx\n```js [[1, 4, \"age\"], [2, 4, \"setAge\"], [3, 4, \"42\"]]\nimport { useState } from 'react';\n\nfunction MyComponent() {\n const [age, setAge] = useState(42);\n}\n```\n```\n\nFormat: `[[step_number, line_number, \"text_to_highlight\"], ...]`\n\nIn prose:\n```mdx\n1. The current state initially set to the initial value.\n2. The `set` function that lets you change it.\n```\n\n### Guidelines\n\n- Maximum 2-3 different colors per explanation\n- Don't highlight every keyword - only key concepts\n- Use for terms in prose, not entire code blocks\n- Maintain consistent usage within a section\n\n✅ **Good use** - highlighting key concepts:\n```mdx\nReact will compare the dependencies with the dependencies you passed...\n```\n\n🚫 **Avoid** - excessive highlighting:\n```mdx\nWhen an Activity boundary is hidden during its initial render...\n```\n\n---\n\n## ``\n\nDisplay console output (errors, warnings, logs).\n\n```mdx\n\nUncaught Error: Too many re-renders.\n\n```\n\n**Levels:** `error`, `warning`, `info`\n\n---\n\n## Component Usage by Page Type\n\n### Reference Pages\n\nFor component placement rules specific to Reference pages, invoke `/docs-writer-reference`.\n\nKey placement patterns:\n- `` goes before `` at top of page\n- `` goes after `` for page-level deprecation\n- `` goes after method heading for method-level deprecation\n- `` wrapper goes inline within ``\n- `` appears in headings, props lists, and caveats\n\n### Learn Pages\n\nFor Learn page structure and patterns, invoke `/docs-writer-learn`.\n\nKey usage patterns:\n- Challenges only at end of standard Learn pages\n- No Challenges in chapter intros or tutorials\n- DeepDive for optional advanced content\n- CodeStep should be used sparingly\n\n### Blog Pages\n\nFor Blog page structure and patterns, invoke `/docs-writer-blog`.\n\nKey usage patterns:\n- Generally avoid deep technical components\n- Note and Pitfall OK for clarifications\n- Prefer inline explanations over DeepDive\n\n---\n\n## Other Available Components\n\n**Version/Status:** ``, ``, ``, ``, ``\n\n**Visuals:** ``, ``, ``, ``, ``\n\n**Console:** ``, ``\n\n**Specialized:** ``, ``, ``, ``, ``, ``, ``, ``, ``\n\nSee existing docs for usage examples of these components.\n" }, { "path": ".claude/skills/docs-sandpack/SKILL.md", "content": "---\nname: docs-sandpack\ndescription: Use when adding interactive code examples to React docs.\n---\n\n# Sandpack Patterns\n\n## Quick Start Template\n\nMost examples are single-file. Copy this and modify:\n\n```mdx\n\n\n` ` `js\nimport { useState } from 'react';\n\nexport default function Example() {\n const [value, setValue] = useState(0);\n\n return (\n \n );\n}\n` ` `\n\n\n```\n\n---\n\n## File Naming\n\n| Pattern | Usage |\n|---------|-------|\n| ` ```js ` | Main file (no prefix) |\n| ` ```js src/FileName.js ` | Supporting files |\n| ` ```js src/File.js active ` | Active file (reference pages) |\n| ` ```js src/data.js hidden ` | Hidden files |\n| ` ```css ` | CSS styles |\n| ` ```json package.json ` | External dependencies |\n\n**Critical:** Main file must have `export default`.\n\n## Line Highlighting\n\n```mdx\n```js {2-4}\nfunction Example() {\n // Lines 2-4\n // will be\n // highlighted\n return null;\n}\n```\n\n## Code References (numbered callouts)\n\n```mdx\n```js [[1, 4, \"age\"], [2, 4, \"setAge\"]]\n// Creates numbered markers pointing to \"age\" and \"setAge\" on line 4\n```\n\n## Expected Errors (intentionally broken examples)\n\n```mdx\n```js {expectedErrors: {'react-compiler': [7]}}\n// Line 7 shows as expected error\n```\n\n## Multi-File Example\n\n```mdx\n\n\n```js src/App.js\nimport Gallery from './Gallery.js';\n\nexport default function App() {\n return ;\n}\n```\n\n```js src/Gallery.js\nexport default function Gallery() {\n return

Gallery

;\n}\n```\n\n```css\nh1 { color: purple; }\n```\n\n\n```\n\n## External Dependencies\n\n```mdx\n\n\n```js\nimport { useImmer } from 'use-immer';\n// ...\n```\n\n```json package.json\n{\n \"dependencies\": {\n \"immer\": \"1.7.3\",\n \"use-immer\": \"0.5.1\",\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"react-scripts\": \"latest\"\n }\n}\n```\n\n\n```\n\n## Code Style in Sandpack (Required)\n\nSandpack examples are held to strict code style standards:\n\n1. **Function declarations** for components (not arrows)\n2. **`e`** for event parameters\n3. **Single quotes** in JSX\n4. **`const`** unless reassignment needed\n5. **Spaces in destructuring**: `({ props })` not `({props})`\n6. **Two-line createRoot**: separate declaration and render call\n7. **Multiline if statements**: always use braces\n\n### Don't Create Hydration Mismatches\n\nSandpack examples must produce the same output on server and client:\n\n```js\n// 🚫 This will cause hydration warnings\nexport default function App() {\n const isClient = typeof window !== 'undefined';\n return
{isClient ? 'Client' : 'Server'}
;\n}\n```\n\n### Use Ref for Non-Rendered State\n\n```js\n// 🚫 Don't trigger re-renders for non-visual state\nconst [mounted, setMounted] = useState(false);\nuseEffect(() => { setMounted(true); }, []);\n\n// ✅ Use ref instead\nconst mounted = useRef(false);\nuseEffect(() => { mounted.current = true; }, []);\n```\n\n## forwardRef and memo Patterns\n\n### forwardRef - Use Named Function\n```js\n// ✅ Named function for DevTools display name\nconst MyInput = forwardRef(function MyInput(props, ref) {\n return ;\n});\n\n// 🚫 Anonymous loses name\nconst MyInput = forwardRef((props, ref) => { ... });\n```\n\n### memo - Use Named Function\n```js\n// ✅ Preserves component name\nconst Greeting = memo(function Greeting({ name }) {\n return

Hello, {name}

;\n});\n```\n\n## Line Length\n\n- Prose: ~80 characters\n- Code: ~60-70 characters\n- Break long lines to avoid horizontal scrolling\n\n## Anti-Patterns\n\n| Pattern | Problem | Fix |\n|---------|---------|-----|\n| `const Comp = () => {}` | Not standard | `function Comp() {}` |\n| `onClick={(event) => ...}` | Conflicts with global | `onClick={(e) => ...}` |\n| `useState` for non-rendered values | Re-renders | Use `useRef` |\n| Reading `window` during render | Hydration mismatch | Check in useEffect |\n| Single-line if without braces | Harder to debug | Use multiline with braces |\n| Chained `createRoot().render()` | Less clear | Two statements |\n| `//...` without space | Inconsistent | `// ...` with space |\n| Tabs | Inconsistent | 2 spaces |\n| `ReactDOM.render` | Deprecated | Use `createRoot` |\n| Fake package names | Confusing | Use `'./your-storage-layer'` |\n| `PropsWithChildren` | Outdated | `children?: ReactNode` |\n| Missing `key` in lists | Warnings | Always include key |\n\n## Additional Code Quality Rules\n\n### Always Include Keys in Lists\n```js\n// ✅ Correct\n{items.map(item =>
  • {item.name}
    • )}\n\n// 🚫 Wrong - missing key\n{items.map(item =>
  • {item.name}
    • )}\n```\n\n### Use Realistic Import Paths\n```js\n// ✅ Correct - descriptive path\nimport { fetchData } from './your-data-layer';\n\n// 🚫 Wrong - looks like a real npm package\nimport { fetchData } from 'cool-data-lib';\n```\n\n### Console.log Labels\n```js\n// ✅ Correct - labeled for clarity\nconsole.log('User:', user);\nconsole.log('Component Stack:', errorInfo.componentStack);\n\n// 🚫 Wrong - unlabeled\nconsole.log(user);\n```\n\n### Keep Delays Reasonable\n```js\n// ✅ Correct - 1-1.5 seconds\nsetTimeout(() => setLoading(false), 1000);\n\n// 🚫 Wrong - too long, feels sluggish\nsetTimeout(() => setLoading(false), 3000);\n```\n\n## Updating Line Highlights\n\nWhen modifying code in examples with line highlights (`{2-4}`), **always update the highlight line numbers** to match the new code. Incorrect line numbers cause rendering crashes.\n\n## File Name Conventions\n\n- Capitalize file names for component files: `Gallery.js` not `gallery.js`\n- After initially explaining files are in `src/`, refer to files by name only: `Gallery.js` not `src/Gallery.js`\n\n## Naming Conventions in Code\n\n**Components:** PascalCase\n- `Profile`, `Avatar`, `TodoList`, `PackingList`\n\n**State variables:** Destructured pattern\n- `const [count, setCount] = useState(0)`\n- Booleans: `[isOnline, setIsOnline]`, `[isPacked, setIsPacked]`\n- Status strings: `'typing'`, `'submitting'`, `'success'`, `'error'`\n\n**Event handlers:**\n- `handleClick`, `handleSubmit`, `handleAddTask`\n\n**Props for callbacks:**\n- `onClick`, `onChange`, `onAddTask`, `onSelect`\n\n**Custom Hooks:**\n- `useOnlineStatus`, `useChatRoom`, `useFormInput`\n\n**Reducer actions:**\n- Past tense: `'added'`, `'changed'`, `'deleted'`\n- Snake_case compounds: `'changed_selection'`, `'sent_message'`\n\n**Updater functions:** Single letter\n- `setCount(n => n + 1)`\n\n### Pedagogical Code Markers\n\n**Wrong vs right code:**\n```js\n// 🔴 Avoid: redundant state and unnecessary Effect\n// ✅ Good: calculated during rendering\n```\n\n**Console.log for lifecycle teaching:**\n```js\nconsole.log('✅ Connecting...');\nconsole.log('❌ Disconnected.');\n```\n\n### Server/Client Labeling\n\n```js\n// Server Component\nasync function Notes() {\n const notes = await db.notes.getAll();\n}\n\n// Client Component\n\"use client\"\nexport default function Expandable({children}) {\n const [expanded, setExpanded] = useState(false);\n}\n```\n\n### Bundle Size Annotations\n\n```js\nimport marked from 'marked'; // 35.9K (11.2K gzipped)\nimport sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)\n```\n\n---\n\n## Sandpack Example Guidelines\n\n### Package.json Rules\n\n**Include package.json when:**\n- Using external npm packages (immer, remarkable, leaflet, toastify-js, etc.)\n- Demonstrating experimental/canary React features\n- Requiring specific React versions (`react: beta`, `react: 19.0.0-rc-*`)\n\n**Omit package.json when:**\n- Example uses only built-in React features\n- No external dependencies needed\n- Teaching basic hooks, state, or components\n\n**Always mark package.json as hidden:**\n```mdx\n```json package.json hidden\n{\n \"dependencies\": {\n \"react\": \"latest\",\n \"react-dom\": \"latest\",\n \"react-scripts\": \"latest\",\n \"immer\": \"1.7.3\"\n }\n}\n```\n```\n\n**Version conventions:**\n- Use `\"latest\"` for stable features\n- Use exact versions only when compatibility requires it\n- Include minimal dependencies (just what the example needs)\n\n### Hidden File Patterns\n\n**Always hide these file types:**\n\n| File Type | Reason |\n|-----------|--------|\n| `package.json` | Configuration not the teaching point |\n| `sandbox.config.json` | Sandbox setup is boilerplate |\n| `public/index.html` | HTML structure not the focus |\n| `src/data.js` | When it contains sample/mock data |\n| `src/api.js` | When showing API usage, not implementation |\n| `src/styles.css` | When styling is not the lesson |\n| `src/router.js` | Supporting infrastructure |\n| `src/actions.js` | Server action implementation details |\n\n**Rationale:**\n- Reduces cognitive load\n- Keeps focus on the primary concept\n- Creates cleaner, more focused examples\n\n**Example:**\n```mdx\n```js src/data.js hidden\nexport const items = [\n { id: 1, name: 'Item 1' },\n { id: 2, name: 'Item 2' },\n];\n```\n```\n\n### Active File Patterns\n\n**Mark as active when:**\n- File contains the primary teaching concept\n- Learner should focus on this code first\n- Component demonstrates the hook/pattern being taught\n\n**Effect of the `active` marker:**\n- Sets initial editor tab focus when Sandpack loads\n- Signals \"this is what you should study\"\n- Works with hidden files to create focused examples\n\n**Most common active file:** `src/index.js` or `src/App.js`\n\n**Example:**\n```mdx\n```js src/App.js active\n// This file will be focused when example loads\nexport default function App() {\n // ...\n}\n```\n```\n\n### File Structure Guidelines\n\n| Scenario | Structure | Reason |\n|----------|-----------|--------|\n| Basic hook usage | Single file | Simple, focused |\n| Teaching imports | 2-3 files | Shows modularity |\n| Context patterns | 4-5 files | Realistic structure |\n| Complex state | 3+ files | Separation of concerns |\n\n**Single File Examples (70% of cases):**\n- Use for simple concepts\n- 50-200 lines typical\n- Best for: Counter, text inputs, basic hooks\n\n**Multi-File Examples (30% of cases):**\n- Use when teaching modularity/imports\n- Use for context patterns (4-5 files)\n- Use when component is reused\n\n**File Naming:**\n- Main component: `App.js` (capitalized)\n- Component files: `Gallery.js`, `Button.js` (capitalized)\n- Data files: `data.js` (lowercase)\n- Utility files: `utils.js` (lowercase)\n- Context files: `TasksContext.js` (named after what they provide)\n\n### Code Size Limits\n\n- Single file: **<200 lines**\n- Multi-file total: **150-300 lines**\n- Main component: **100-150 lines**\n- Supporting files: **20-40 lines each**\n\n### CSS Guidelines\n\n**Always:**\n- Include minimal CSS for demo interactivity\n- Use semantic class names (`.panel`, `.button-primary`, `.panel-dark`)\n- Support light/dark themes when showing UI concepts\n- Keep CSS visible (never hidden)\n\n**Size Guidelines:**\n- Minimal (5-10 lines): Basic button styling, spacing\n- Medium (15-30 lines): Panel styling, form layouts\n- Complex (40+ lines): Only for layout-focused examples\n" }, { "path": ".claude/skills/docs-voice/SKILL.md", "content": "---\nname: docs-voice\ndescription: Use when writing any React documentation. Provides voice, tone, and style rules for all doc types.\n---\n\n# React Docs Voice & Style\n\n## Universal Rules\n\n- **Capitalize React terms** when referring to the React concept in headings or as standalone concepts:\n - Core: Hook, Effect, State, Context, Ref, Component, Fragment\n - Concurrent: Transition, Action, Suspense\n - Server: Server Component, Client Component, Server Function, Server Action\n - Patterns: Error Boundary\n - Canary: Activity, View Transition, Transition Type\n - **In prose:** Use lowercase when paired with descriptors: \"state variable\", \"state updates\", \"event handler\". Capitalize when the concept stands alone or in headings: \"State is isolated and private\"\n - General usage stays lowercase: \"the page transitions\", \"takes an action\"\n- **Product names:** ESLint, TypeScript, JavaScript, Next.js (not lowercase)\n- **Bold** for key concepts: **state variable**, **event handler**\n- **Italics** for new terms being defined: *event handlers*\n- **Inline code** for APIs: `useState`, `startTransition`, ``\n- **Avoid:** \"simple\", \"easy\", \"just\", time estimates\n- Frame differences as \"capabilities\" not \"advantages/disadvantages\"\n- Avoid passive voice and jargon\n\n## Tone by Page Type\n\n| Type | Tone | Example |\n|------|------|---------|\n| Learn | Conversational | \"Here's what that looks like...\", \"You might be wondering...\" |\n| Reference | Technical | \"Call `useState` at the top level...\", \"This Hook returns...\" |\n| Blog | Accurate | Focus on facts, not marketing |\n\n**Note:** Pitfall and DeepDive components can use slightly more conversational phrasing (\"You might wonder...\", \"It might be tempting...\") even in Reference pages, since they're explanatory asides.\n\n## Avoiding Jargon\n\n**Pattern:** Explain behavior first, then name it.\n\n✅ \"React waits until all code in event handlers runs before processing state updates. This is called *batching*.\"\n\n❌ \"React uses batching to process state updates atomically.\"\n\n**Terms to avoid or explain:**\n| Jargon | Plain Language |\n|--------|----------------|\n| atomic | all-or-nothing, batched together |\n| idempotent | same inputs, same output |\n| deterministic | predictable, same result every time |\n| memoize | remember the result, skip recalculating |\n| referentially transparent | (avoid - describe the behavior) |\n| invariant | rule that must always be true |\n| reify | (avoid - describe what's being created) |\n\n**Allowed technical terms in Reference pages:**\n- \"stale closures\" - standard JS/React term, can be used in Caveats\n- \"stable identity\" - React term for consistent object references across renders\n- \"reactive\" - React term for values that trigger re-renders when changed\n- These don't need explanation in Reference pages (readers are expected to know them)\n\n**Use established analogies sparingly—once when introducing a concept, not repeatedly:**\n\n| Concept | Analogy |\n|---------|---------|\n| Components/React | Kitchen (components as cooks, React as waiter) |\n| Render phases | Restaurant ordering (trigger/render/commit) |\n| State batching | Waiter collecting full order before going to kitchen |\n| State behavior | Snapshot/photograph in time |\n| State storage | React storing state \"on a shelf\" |\n| State purpose | Component's memory |\n| Pure functions | Recipes (same ingredients → same dish) |\n| Pure functions | Math formulas (y = 2x) |\n| Props | Adjustable \"knobs\" |\n| Children prop | \"Hole\" to be filled by parent |\n| Keys | File names in a folder |\n| Curly braces in JSX | \"Window into JavaScript\" |\n| Declarative UI | Taxi driver (destination, not turn-by-turn) |\n| Imperative UI | Turn-by-turn navigation |\n| State structure | Database normalization |\n| Refs | \"Secret pocket\" React doesn't track |\n| Effects/Refs | \"Escape hatch\" from React |\n| Context | CSS inheritance / \"Teleportation\" |\n| Custom Hooks | Design system |\n\n## Common Prose Patterns\n\n**Wrong vs Right code:**\n```mdx\n\\`\\`\\`js\n// 🚩 Don't mutate state:\nobj.x = 10;\n\\`\\`\\`\n\n\\`\\`\\`js\n// ✅ Replace with new object:\nsetObj({ ...obj, x: 10 });\n\\`\\`\\`\n```\n\n**Table comparisons:**\n```mdx\n| passing a function | calling a function |\n| `onClick={handleClick}` | `onClick={handleClick()}` |\n```\n\n**Linking:**\n```mdx\n[Read about state](/learn/state-a-components-memory)\n[See `useState` reference](/reference/react/useState)\n```\n\n## Code Style\n\n- Prefer JSX over createElement\n- Use const/let, never var\n- Prefer named function declarations for top-level functions\n- Arrow functions for callbacks that need `this` preservation\n\n## Version Documentation\n\nWhen APIs change between versions:\n\n```mdx\nStarting in React 19, render `` as a provider:\n\\`\\`\\`js\n{children}\n\\`\\`\\`\n\nIn older versions:\n\\`\\`\\`js\n{children}\n\\`\\`\\`\n```\n\nPatterns:\n- \"Starting in React 19...\" for new APIs\n- \"In older versions of React...\" for legacy patterns\n" }, { "path": ".claude/skills/docs-writer-blog/SKILL.md", "content": "---\nname: docs-writer-blog\ndescription: Use when writing or editing files in src/content/blog/. Provides blog post structure and conventions.\n---\n\n# Blog Post Writer\n\n## Persona\n\n**Voice:** Official React team voice\n**Tone:** Accurate, professional, forward-looking\n\n## Voice & Style\n\nFor tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`.\n\n---\n\n## Frontmatter Schema\n\nAll blog posts use this YAML frontmatter structure:\n\n```yaml\n---\ntitle: \"Title in Quotes\"\nauthor: Author Name(s)\ndate: YYYY/MM/DD\ndescription: One or two sentence summary.\n---\n```\n\n### Field Details\n\n| Field | Format | Example |\n|-------|--------|---------|\n| `title` | Quoted string | `\"React v19\"`, `\"React Conf 2024 Recap\"` |\n| `author` | Unquoted, comma + \"and\" for multiple | `The React Team`, `Dan Abramov and Lauren Tan` |\n| `date` | `YYYY/MM/DD` with forward slashes | `2024/12/05` |\n| `description` | 1-2 sentences, often mirrors intro | Summarizes announcement or content |\n\n### Title Patterns by Post Type\n\n| Type | Pattern | Example |\n|------|---------|---------|\n| Release | `\"React vX.Y\"` or `\"React X.Y\"` | `\"React v19\"` |\n| Upgrade | `\"React [VERSION] Upgrade Guide\"` | `\"How to Upgrade to React 18\"` |\n| Labs | `\"React Labs: [Topic] – [Month Year]\"` | `\"React Labs: What We've Been Working On – February 2024\"` |\n| Conf | `\"React Conf [YEAR] Recap\"` | `\"React Conf 2024 Recap\"` |\n| Feature | `\"Introducing [Feature]\"` or descriptive | `\"Introducing react.dev\"` |\n| Security | `\"[Severity] Security Vulnerability in [Component]\"` | `\"Critical Security Vulnerability in React Server Components\"` |\n\n---\n\n## Author Byline\n\nImmediately after frontmatter, add a byline:\n\n```markdown\n---\n\nMonth DD, YYYY by [Author Name](social-link)\n\n---\n```\n\n### Conventions\n\n- Full date spelled out: `December 05, 2024`\n- Team posts link to `/community/team`: `[The React Team](/community/team)`\n- Individual authors link to Twitter/X or Bluesky\n- Multiple authors: Oxford comma before \"and\"\n- Followed by horizontal rule `---`\n\n**Examples:**\n\n```markdown\nDecember 05, 2024 by [The React Team](/community/team)\n\n---\n```\n\n```markdown\nMay 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), and [Andrew Clark](https://twitter.com/acdlite)\n\n---\n```\n\n---\n\n## Universal Post Structure\n\nAll blog posts follow this structure:\n\n1. **Frontmatter** (YAML)\n2. **Author byline** with date\n3. **Horizontal rule** (`---`)\n4. **`` component** (1-3 sentences)\n5. **Horizontal rule** (`---`) (optional)\n6. **Main content sections** (H2 with IDs)\n7. **Closing section** (Changelog, Thanks, etc.)\n\n---\n\n## Post Type Templates\n\n### Major Release Announcement\n\n```markdown\n---\ntitle: \"React vX.Y\"\nauthor: The React Team\ndate: YYYY/MM/DD\ndescription: React X.Y is now available on npm! In this post, we'll give an overview of the new features.\n---\n\nMonth DD, YYYY by [The React Team](/community/team)\n\n---\n\n\n\nReact vX.Y is now available on npm!\n\n\n\nIn our [Upgrade Guide](/blog/YYYY/MM/DD/react-xy-upgrade-guide), we shared step-by-step instructions for upgrading. In this post, we'll give an overview of what's new.\n\n- [What's new in React X.Y](#whats-new)\n- [Improvements](#improvements)\n- [How to upgrade](#how-to-upgrade)\n\n---\n\n## What's new in React X.Y {/*whats-new*/}\n\n### Feature Name {/*feature-name*/}\n\n[Problem this solves. Before/after code examples.]\n\nFor more information, see the docs for [`Feature`](/reference/react/Feature).\n\n---\n\n## Improvements in React X.Y {/*improvements*/}\n\n### Improvement Name {/*improvement-name*/}\n\n[Description of improvement.]\n\n---\n\n## How to upgrade {/*how-to-upgrade*/}\n\nSee [How to Upgrade to React X.Y](/blog/YYYY/MM/DD/react-xy-upgrade-guide) for step-by-step instructions.\n\n---\n\n## Changelog {/*changelog*/}\n\n### React {/*react*/}\n\n* Add `useNewHook` for [purpose]. ([#12345](https://github.com/facebook/react/pull/12345) by [@contributor](https://github.com/contributor))\n\n---\n\n_Thanks to [Name](url) for reviewing this post._\n```\n\n### Upgrade Guide\n\n```markdown\n---\ntitle: \"React [VERSION] Upgrade Guide\"\nauthor: Author Name\ndate: YYYY/MM/DD\ndescription: Step-by-step instructions for upgrading to React [VERSION].\n---\n\nMonth DD, YYYY by [Author Name](social-url)\n\n---\n\n\n\n[Summary of upgrade and what this guide covers.]\n\n\n\n\n\n#### Stepping stone version {/*stepping-stone*/}\n\n[If applicable, describe intermediate upgrade steps.]\n\n\n\nIn this post, we will guide you through the steps for upgrading:\n\n- [Installing](#installing)\n- [Codemods](#codemods)\n- [Breaking changes](#breaking-changes)\n- [New deprecations](#new-deprecations)\n\n---\n\n## Installing {/*installing*/}\n\n```bash\nnpm install --save-exact react@^X.Y.Z react-dom@^X.Y.Z\n```\n\n## Codemods {/*codemods*/}\n\n\n\n#### Run all React [VERSION] codemods {/*run-all-codemods*/}\n\n```bash\nnpx codemod@latest react/[VERSION]/migration-recipe\n```\n\n\n\n## Breaking changes {/*breaking-changes*/}\n\n### Removed: `apiName` {/*removed-api-name*/}\n\n`apiName` was deprecated in [Month YYYY (vX.X.X)](link).\n\n```js\n// Before\n[old code]\n\n// After\n[new code]\n```\n\n\n\nCodemod [description]:\n\n```bash\nnpx codemod@latest react/[VERSION]/codemod-name\n```\n\n\n\n## New deprecations {/*new-deprecations*/}\n\n### Deprecated: `apiName` {/*deprecated-api-name*/}\n\n[Explanation and migration path.]\n\n---\n\nThanks to [Contributor](link) for reviewing this post.\n```\n\n### React Labs Research Update\n\n```markdown\n---\ntitle: \"React Labs: What We've Been Working On – [Month Year]\"\nauthor: Author1, Author2, and Author3\ndate: YYYY/MM/DD\ndescription: In React Labs posts, we write about projects in active research and development.\n---\n\nMonth DD, YYYY by [Author1](url), [Author2](url), and [Author3](url)\n\n---\n\n\n\nIn React Labs posts, we write about projects in active research and development. We've made significant progress since our [last update](/blog/previous-labs-post), and we'd like to share our progress.\n\n\n\n[Optional: Roadmap disclaimer about timelines]\n\n---\n\n## Feature Name {/*feature-name*/}\n\n\n\n`` is now available in React's Canary channel.\n\n\n\n[Description of feature, motivation, current status.]\n\n### Subsection {/*subsection*/}\n\n[Details, examples, use cases.]\n\n---\n\n## Research Area {/*research-area*/}\n\n[Problem space description. Status communication.]\n\nThis research is still early. We'll share more when we're further along.\n\n---\n\n_Thanks to [Reviewer](url) for reviewing this post._\n\nThanks for reading, and see you in the next update!\n```\n\n### React Conf Recap\n\n```markdown\n---\ntitle: \"React Conf [YEAR] Recap\"\nauthor: Author1 and Author2\ndate: YYYY/MM/DD\ndescription: Last week we hosted React Conf [YEAR]. In this post, we'll summarize the talks and announcements.\n---\n\nMonth DD, YYYY by [Author1](url) and [Author2](url)\n\n---\n\n\n\nLast week we hosted React Conf [YEAR] [where we announced [key announcements]].\n\n\n\n---\n\nThe entire [day 1](youtube-url) and [day 2](youtube-url) streams are available online.\n\n## Day 1 {/*day-1*/}\n\n_[Watch the full day 1 stream here.](youtube-url)_\n\n[Description of day 1 opening and keynote highlights.]\n\nWatch the full day 1 keynote here:\n\n\n\n## Day 2 {/*day-2*/}\n\n_[Watch the full day 2 stream here.](youtube-url)_\n\n[Day 2 summary.]\n\n\n\n## Q&A {/*q-and-a*/}\n\n* [Q&A Title](youtube-url) hosted by [Host](url)\n\n## And more... {/*and-more*/}\n\nWe also heard talks including:\n* [Talk Title](youtube-url) by [Speaker](url)\n\n## Thank you {/*thank-you*/}\n\nThank you to all the staff, speakers, and participants who made React Conf [YEAR] possible.\n\nSee you next time!\n```\n\n### Feature/Tool Announcement\n\n```markdown\n---\ntitle: \"Introducing [Feature Name]\"\nauthor: Author Name\ndate: YYYY/MM/DD\ndescription: Today we are announcing [feature]. In this post, we'll explain [what this post covers].\n---\n\nMonth DD, YYYY by [Author Name](url)\n\n---\n\n\n\nToday we are [excited/thrilled] to announce [feature]. [What this means for users.]\n\n\n\n---\n\n## tl;dr {/*tldr*/}\n\n* Key announcement point with [relevant link](/path).\n* What users can do now.\n* Availability or adoption information.\n\n## What is [Feature]? {/*what-is-feature*/}\n\n[Explanation of the feature/tool.]\n\n## Why we built this {/*why-we-built-this*/}\n\n[Motivation, history, problem being solved.]\n\n## Getting started {/*getting-started*/}\n\nTo install [feature]:\n\n\nnpm install package-name\n\n\n[You can find more documentation here.](/path/to/docs)\n\n## What's next {/*whats-next*/}\n\n[Future plans and next steps.]\n\n## Thank you {/*thank-you*/}\n\n[Acknowledgments to contributors.]\n\n---\n\nThanks to [Reviewer](url) for reviewing this post.\n```\n\n### Security Announcement\n\n```markdown\n---\ntitle: \"[Severity] Security Vulnerability in [Component]\"\nauthor: The React Team\ndate: YYYY/MM/DD\ndescription: Brief summary of the vulnerability. A fix has been published. We recommend upgrading immediately.\n\n---\n\nMonth DD, YYYY by [The React Team](/community/team)\n\n---\n\n\n\n[One or two sentences summarizing the vulnerability.]\n\nWe recommend upgrading immediately.\n\n\n\n---\n\nOn [date], [researcher] reported a security vulnerability that allows [description].\n\nThis vulnerability was disclosed as [CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN) and is rated CVSS [score].\n\nThe vulnerability is present in versions [list] of:\n\n* [package-name](https://www.npmjs.com/package/package-name)\n\n## Immediate Action Required {/*immediate-action-required*/}\n\nA fix was introduced in versions [linked versions]. Upgrade immediately.\n\n### Affected frameworks {/*affected-frameworks*/}\n\n[List of affected frameworks with npm links.]\n\n### Vulnerability overview {/*vulnerability-overview*/}\n\n[Technical explanation of the vulnerability.]\n\n## Update Instructions {/*update-instructions*/}\n\n### Framework Name {/*update-framework-name*/}\n\n```bash\nnpm install package@version\n```\n\n## Timeline {/*timeline*/}\n\n* **November 29th**: [Researcher] reported the vulnerability.\n* **December 1st**: Fix was created and validated.\n* **December 3rd**: Fix published and CVE disclosed.\n\n## Attribution {/*attribution*/}\n\nThank you to [Researcher Name](url) for discovering and reporting this vulnerability.\n```\n\n---\n\n## Heading Conventions\n\n### ID Syntax\n\nAll headings require IDs using CSS comment syntax:\n\n```markdown\n## Heading Text {/*heading-id*/}\n```\n\n### ID Rules\n\n- Lowercase\n- Kebab-case (hyphens for spaces)\n- Remove special characters (apostrophes, colons, backticks)\n- Concise but descriptive\n\n### Heading Patterns\n\n| Context | Example |\n|---------|---------|\n| Feature section | `## New Feature: Automatic Batching {/*new-feature-automatic-batching*/}` |\n| New hook | `### New hook: \\`useActionState\\` {/*new-hook-useactionstate*/}` |\n| API in backticks | `### \\`\\` {/*activity*/}` |\n| Removed API | `#### Removed: \\`propTypes\\` {/*removed-proptypes*/}` |\n| tl;dr section | `## tl;dr {/*tldr*/}` |\n\n---\n\n## Component Usage Guide\n\n### Blog-Appropriate Components\n\n| Component | Usage in Blog |\n|-----------|---------------|\n| `` | **Required** - Opening summary after byline |\n| `` | Callouts, caveats, important clarifications |\n| `` | Warnings about common mistakes |\n| `` | Optional technical deep dives (use sparingly) |\n| `` | CLI/installation commands |\n| `` | Console error/warning output |\n| `` | Multi-line console output |\n| `` | Conference video embeds |\n| `` | Visual explanations |\n| `` | Auto-generated table of contents |\n\n### `` Pattern\n\nAlways wrap opening paragraph:\n\n```markdown\n\n\nReact 19 is now available on npm!\n\n\n```\n\n### `` Patterns\n\n**Simple note:**\n```markdown\n\n\nFor React Native users, React 18 ships with the New Architecture.\n\n\n```\n\n**Titled note (H4 inside):**\n```markdown\n\n\n#### React 18.3 has also been published {/*react-18-3*/}\n\nTo help with the upgrade, we've published `react@18.3`...\n\n\n```\n\n### `` Pattern\n\n```markdown\n\nnpm install react@latest react-dom@latest\n\n```\n\n### `` Pattern\n\n```markdown\n\n```\n\n---\n\n## Link Patterns\n\n### Internal Links\n\n| Type | Pattern | Example |\n|------|---------|---------|\n| Blog post | `/blog/YYYY/MM/DD/slug` | `/blog/2024/12/05/react-19` |\n| API reference | `/reference/react/HookName` | `/reference/react/useState` |\n| Learn section | `/learn/topic-name` | `/learn/react-compiler` |\n| Community | `/community/team` | `/community/team` |\n\n### External Links\n\n| Type | Pattern |\n|------|---------|\n| GitHub PR | `[#12345](https://github.com/facebook/react/pull/12345)` |\n| GitHub user | `[@username](https://github.com/username)` |\n| Twitter/X | `[@username](https://x.com/username)` |\n| Bluesky | `[Name](https://bsky.app/profile/handle)` |\n| CVE | `[CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN)` |\n| npm package | `[package](https://www.npmjs.com/package/package)` |\n\n### \"See docs\" Pattern\n\n```markdown\nFor more information, see the docs for [`useActionState`](/reference/react/useActionState).\n```\n\n---\n\n## Changelog Format\n\n### Bullet Pattern\n\n```markdown\n* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/facebook/react/pull/10426) by [@acdlite](https://github.com/acdlite))\n* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona))\n```\n\n**Structure:** `Verb` + backticked API + description + `([#PR](url) by [@user](url))`\n\n**Verbs:** Add, Fix, Remove, Make, Improve, Allow, Deprecate\n\n### Section Organization\n\n```markdown\n## Changelog {/*changelog*/}\n\n### React {/*react*/}\n\n* [changes]\n\n### React DOM {/*react-dom*/}\n\n* [changes]\n```\n\n---\n\n## Acknowledgments Format\n\n### Post-closing Thanks\n\n```markdown\n---\n\nThanks to [Name](url), [Name](url), and [Name](url) for reviewing this post.\n```\n\nOr italicized:\n\n```markdown\n_Thanks to [Name](url) for reviewing this post._\n```\n\n### Update Notes\n\nFor post-publication updates:\n\n```markdown\n\n\n[Updated content]\n\n-----\n\n_Updated January 26, 2026._\n\n\n```\n\n---\n\n## Tone & Length by Post Type\n\n| Type | Tone | Length | Key Elements |\n|------|------|--------|--------------|\n| Release | Celebratory, informative | Medium-long | Feature overview, upgrade link, changelog |\n| Upgrade | Instructional, precise | Long | Step-by-step, codemods, breaking changes |\n| Labs | Transparent, exploratory | Medium | Status updates, roadmap disclaimers |\n| Conf | Enthusiastic, community-focused | Medium | YouTube embeds, speaker credits |\n| Feature | Excited, explanatory | Medium | tl;dr, \"why\", getting started |\n| Security | Urgent, factual | Short-medium | Immediate action, timeline, CVE |\n\n---\n\n## Do's and Don'ts\n\n**Do:**\n- Focus on facts over marketing\n- Say \"upcoming\" explicitly for unreleased features\n- Include FAQ sections for major announcements\n- Credit contributors and link to GitHub\n- Use \"we\" voice for team posts\n- Link to upgrade guides from release posts\n- Include table of contents for long posts\n- End with acknowledgments\n\n**Don't:**\n- Promise features not yet available\n- Rewrite history (add update notes instead)\n- Break existing URLs\n- Use hyperbolic language (\"revolutionary\", \"game-changing\")\n- Skip the `` component\n- Forget heading IDs\n- Use heavy component nesting in blogs\n- Make time estimates or predictions\n\n---\n\n## Updating Old Posts\n\n- Never break existing URLs; add redirects when URLs change\n- Don't rewrite history; add update notes instead:\n ```markdown\n \n\n [Updated information]\n\n -----\n\n _Updated Month Year._\n\n \n ```\n\n---\n\n## Critical Rules\n\n1. **Heading IDs required:** `## Title {/*title-id*/}`\n2. **`` required:** Every post starts with `` component\n3. **Byline required:** Date + linked author(s) after frontmatter\n4. **Date format:** Frontmatter uses `YYYY/MM/DD`, byline uses `Month DD, YYYY`\n5. **Link to docs:** New APIs must link to reference documentation\n6. **Security posts:** Always include \"We recommend upgrading immediately\"\n\n---\n\n## Components Reference\n\nFor complete MDX component patterns, invoke `/docs-components`.\n\nBlog posts commonly use: ``, ``, ``, ``, ``, ``, ``, ``.\n\nPrefer inline explanations over heavy component usage.\n" }, { "path": ".claude/skills/docs-writer-learn/SKILL.md", "content": "---\nname: docs-writer-learn\ndescription: Use when writing or editing files in src/content/learn/. Provides Learn page structure and tone.\n---\n\n# Learn Page Writer\n\n## Persona\n\n**Voice:** Patient teacher guiding a friend through concepts\n**Tone:** Conversational, warm, encouraging\n\n## Voice & Style\n\nFor tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`.\n\n## Page Structure Variants\n\n### 1. Standard Learn Page (Most Common)\n\n```mdx\n---\ntitle: Page Title\n---\n\n\n1-3 sentences introducing the concept. Use *italics* for new terms.\n\n\n\n\n* Learning outcome 1\n* Learning outcome 2\n* Learning outcome 3-5\n\n\n\n## Section Name {/*section-id*/}\n\nContent with Sandpack examples, Pitfalls, Notes, DeepDives...\n\n## Another Section {/*another-section*/}\n\nMore content...\n\n\n\n* Summary point 1\n* Summary point 2\n* Summary points 3-9\n\n\n\n\n\n#### Challenge title {/*challenge-id*/}\n\nDescription...\n\n\nOptional guidance (single paragraph)\n\n\n\n{/* Starting code */}\n\n\n\nExplanation...\n\n\n{/* Fixed code */}\n\n\n\n\n```\n\n### 2. Chapter Introduction Page\n\nFor pages that introduce a chapter (like describing-the-ui.md, managing-state.md):\n\n```mdx\n\n\n* [Sub-page title](/learn/sub-page-name) to learn...\n* [Another page](/learn/another-page) to learn...\n\n\n\n## Preview Section {/*section-id*/}\n\nPreview description with mini Sandpack example\n\n\n\nRead **[Page Title](/learn/sub-page-name)** to learn how to...\n\n\n\n## What's next? {/*whats-next*/}\n\nHead over to [First Page](/learn/first-page) to start reading this chapter page by page!\n```\n\n**Important:** Chapter intro pages do NOT include `` or `` sections.\n\n### 3. Tutorial Page\n\nFor step-by-step tutorials (like tutorial-tic-tac-toe.md):\n\n```mdx\n\nBrief statement of what will be built\n\n\n\nAlternative learning path offered\n\n\nTable of contents (prose listing of major sections)\n\n## Setup {/*setup*/}\n...\n\n## Main Content {/*main-content*/}\nProgressive code building with ### subsections\n\nNo YouWillLearn, Recap, or Challenges\n\nEnds with ordered list of \"extra credit\" improvements\n```\n\n### 4. Reference-Style Learn Page\n\nFor pages with heavy API documentation (like typescript.md):\n\n```mdx\n\n\n* [Link to section](#section-anchor)\n* [Link to another section](#another-section)\n\n\n\n## Sections with ### subsections\n\n## Further learning {/*further-learning*/}\n\nNo Recap or Challenges\n```\n\n## Heading ID Conventions\n\nAll headings require IDs in `{/*kebab-case*/}` format:\n\n```markdown\n## Section Title {/*section-title*/}\n### Subsection Title {/*subsection-title*/}\n#### DeepDive Title {/*deepdive-title*/}\n```\n\n**ID Generation Rules:**\n- Lowercase everything\n- Replace spaces with hyphens\n- Remove apostrophes, quotes\n- Remove or convert special chars (`:`, `?`, `!`, `.`, parentheses)\n\n**Examples:**\n- \"What's React?\" → `{/*whats-react*/}`\n- \"Step 1: Create the context\" → `{/*step-1-create-the-context*/}`\n- \"Conditional (ternary) operator (? :)\" → `{/*conditional-ternary-operator--*/}`\n\n## Teaching Patterns\n\n### Problem-First Teaching\n\nShow broken/problematic code BEFORE the solution:\n\n1. Present problematic approach with `// 🔴 Avoid:` comment\n2. Explain WHY it's wrong (don't just say it is)\n3. Show the solution with `// ✅ Good:` comment\n4. Invite experimentation\n\n### Progressive Complexity\n\nBuild understanding in layers:\n1. Show simplest working version\n2. Identify limitation or repetition\n3. Introduce solution incrementally\n4. Show complete solution\n5. Invite experimentation: \"Try changing...\"\n\n### Numbered Step Patterns\n\nFor multi-step processes:\n\n**As section headings:**\n```markdown\n### Step 1: Action to take {/*step-1-action*/}\n### Step 2: Next action {/*step-2-next-action*/}\n```\n\n**As inline lists:**\n```markdown\nTo implement this:\n1. **Declare** `inputRef` with the `useRef` Hook.\n2. **Pass it** as ``.\n3. **Read** the input DOM node from `inputRef.current`.\n```\n\n### Interactive Invitations\n\nAfter Sandpack examples, encourage experimentation:\n- \"Try changing X to Y. See how...?\"\n- \"Try it in the sandbox above!\"\n- \"Click each button separately:\"\n- \"Have a guess!\"\n- \"Verify that...\"\n\n### Decision Questions\n\nHelp readers build intuition:\n> \"When you're not sure whether some code should be in an Effect or in an event handler, ask yourself *why* this code needs to run.\"\n\n## Component Placement Order\n\n1. `` - First after frontmatter\n2. `` - After Intro (standard/chapter pages)\n3. Body content with ``, ``, `` placed contextually\n4. `` - Before Challenges (standard pages only)\n5. `` - End of page (standard pages only)\n\nFor component structure and syntax, invoke `/docs-components`.\n\n## Code Examples\n\nFor Sandpack file structure, naming conventions, code style, and pedagogical markers, invoke `/docs-sandpack`.\n\n## Cross-Referencing\n\n### When to Link\n\n**Link to /learn:**\n- Explaining concepts or mental models\n- Teaching how things work together\n- Tutorials and guides\n- \"Why\" questions\n\n**Link to /reference:**\n- API details, Hook signatures\n- Parameter lists and return values\n- Rules and restrictions\n- \"What exactly\" questions\n\n### Link Formats\n\n```markdown\n[concept name](/learn/page-name)\n[`useState`](/reference/react/useState)\n[section link](/learn/page-name#section-id)\n[MDN](https://developer.mozilla.org/...)\n```\n\n## Section Dividers\n\n**Important:** Learn pages typically do NOT use `---` dividers. The heading hierarchy provides sufficient structure. Only consider dividers in exceptional cases like separating main content from meta/contribution sections.\n\n## Do's and Don'ts\n\n**Do:**\n- Use \"you\" to address the reader\n- Show broken code before fixes\n- Explain behavior before naming concepts\n- Build concepts progressively\n- Include interactive Sandpack examples\n- Use established analogies consistently\n- Place Pitfalls AFTER explaining concepts\n- Invite experimentation with \"Try...\" phrases\n\n**Don't:**\n- Use \"simple\", \"easy\", \"just\", or time estimates\n- Reference concepts not yet introduced\n- Skip required components for page type\n- Use passive voice without reason\n- Place Pitfalls before teaching the concept\n- Use `---` dividers between sections\n- Create unnecessary abstraction in examples\n- Place consecutive Pitfalls or Notes without separating prose (combine or separate)\n\n## Critical Rules\n\n1. **All headings require IDs:** `## Title {/*title-id*/}`\n2. **Chapter intros use `isChapter={true}` and ``**\n3. **Tutorial pages omit YouWillLearn/Recap/Challenges**\n4. **Problem-first teaching:** Show broken → explain → fix\n5. **No consecutive Pitfalls/Notes:** See `/docs-components` Callout Spacing Rules\n\nFor component patterns, invoke `/docs-components`. For Sandpack patterns, invoke `/docs-sandpack`.\n" }, { "path": ".claude/skills/docs-writer-reference/SKILL.md", "content": "---\nname: docs-writer-reference\ndescription: Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack.\n---\n\n# Reference Page Writer\n\n## Quick Reference\n\n### Page Type Decision Tree\n\n1. Is it a Hook? Use **Type A (Hook/Function)**\n2. Is it a React component (``)? Use **Type B (Component)**\n3. Is it a compiler configuration option? Use **Type C (Configuration)**\n4. Is it a directive (`'use something'`)? Use **Type D (Directive)**\n5. Is it an ESLint rule? Use **Type E (ESLint Rule)**\n6. Is it listing multiple APIs? Use **Type F (Index/Category)**\n\n### Component Selection\n\nFor component selection and patterns, invoke `/docs-components`.\n\n---\n\n## Voice & Style\n\n**Voice:** Authoritative technical reference writer\n**Tone:** Precise, comprehensive, neutral\n\nFor tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`.\n\n**Do:**\n- Start with single-line description: \"`useState` is a React Hook that lets you...\"\n- Include Parameters, Returns, Caveats sections for every API\n- Document edge cases most developers will encounter\n- Use section dividers between major sections\n- Include \"See more examples below\" links\n- Be assertive, not hedging - \"This is designed for...\" not \"This helps avoid issues with...\"\n- State facts, not benefits - \"The callback always accesses the latest values\" not \"This helps avoid stale closures\"\n- Use minimal but meaningful names - `onEvent` or `onTick` over `onSomething`\n\n**Don't:**\n- Skip the InlineToc component\n- Omit error cases or caveats\n- Use conversational language\n- Mix teaching with reference (that's Learn's job)\n- Document past bugs or fixed issues\n- Include niche edge cases (e.g., `this` binding, rare class patterns)\n- Add phrases explaining \"why you'd want this\" - the Usage section examples do that\n- Exception: Pitfall and DeepDive asides can use slightly conversational phrasing\n\n---\n\n## Page Templates\n\n### Type A: Hook/Function\n\n**When to use:** Documenting React hooks and standalone functions (useState, useEffect, memo, lazy, etc.)\n\n```mdx\n---\ntitle: hookName\n---\n\n\n\n`hookName` is a React Hook that lets you [brief description].\n\n```js\nconst result = hookName(arg)\n```\n\n\n\n\n\n---\n\n## Reference {/*reference*/}\n\n### `hookName(arg)` {/*hookname*/}\n\nCall `hookName` at the top level of your component to...\n\n```js\n[signature example with annotations]\n```\n\n[See more examples below.](#usage)\n\n#### Parameters {/*parameters*/}\n* `arg`: Description of the parameter.\n\n#### Returns {/*returns*/}\nDescription of return value.\n\n#### Caveats {/*caveats*/}\n* Important caveat about usage.\n\n---\n\n## Usage {/*usage*/}\n\n### Common Use Case {/*common-use-case*/}\nExplanation with Sandpack examples...\n\n---\n\n## Troubleshooting {/*troubleshooting*/}\n\n### Common Problem {/*common-problem*/}\nHow to solve it...\n```\n\n---\n\n### Type B: Component\n\n**When to use:** Documenting React components (Suspense, Fragment, Activity, StrictMode)\n\n```mdx\n---\ntitle: \n---\n\n\n\n`` lets you [primary action].\n\n```js\n\n \n\n```\n\n\n\n\n\n---\n\n## Reference {/*reference*/}\n\n### `` {/*componentname*/}\n\n[Component purpose and behavior]\n\n#### Props {/*props*/}\n\n* `propName`: Description of the prop...\n* **optional** `optionalProp`: Description...\n\n#### Caveats {/*caveats*/}\n\n* [Caveats specific to this component]\n```\n\n**Key differences from Hook pages:**\n- Title uses JSX syntax: ``\n- Uses `#### Props` instead of `#### Parameters`\n- Reference heading uses JSX: `` ### `` ``\n\n---\n\n### Type C: Configuration\n\n**When to use:** Documenting React Compiler configuration options\n\n```mdx\n---\ntitle: optionName\n---\n\n\n\nThe `optionName` option [controls/specifies/determines] [what it does].\n\n\n\n```js\n{\n optionName: 'value' // Quick example\n}\n```\n\n\n\n---\n\n## Reference {/*reference*/}\n\n### `optionName` {/*optionname*/}\n\n[Description of the option's purpose]\n\n#### Type {/*type*/}\n\n```\n'value1' | 'value2' | 'value3'\n```\n\n#### Default value {/*default-value*/}\n\n`'value1'`\n\n#### Options {/*options*/}\n\n- **`'value1'`** (default): Description\n- **`'value2'`**: Description\n- **`'value3'`**: Description\n\n#### Caveats {/*caveats*/}\n\n* [Usage caveats]\n```\n\n---\n\n### Type D: Directive\n\n**When to use:** Documenting directives like 'use server', 'use client', 'use memo'\n\n```mdx\n---\ntitle: \"'use directive'\"\ntitleForTitleTag: \"'use directive' directive\"\n---\n\n\n\n`'use directive'` is for use with [React Server Components](/reference/rsc/server-components).\n\n\n\n\n\n`'use directive'` marks [what it marks] for [purpose].\n\n```js {1}\nfunction MyComponent() {\n 'use directive';\n // ...\n}\n```\n\n\n\n\n\n---\n\n## Reference {/*reference*/}\n\n### `'use directive'` {/*use-directive*/}\n\nAdd `'use directive'` at the beginning of [location] to [action].\n\n#### Caveats {/*caveats*/}\n\n* `'use directive'` must be at the very beginning...\n* The directive must be written with single or double quotes, not backticks.\n* [Other placement/syntax caveats]\n```\n\n**Key characteristics:**\n- Title includes quotes: `title: \"'use server'\"`\n- Uses `titleForTitleTag` for browser tab title\n- `` block appears before ``\n- Caveats focus on placement and syntax requirements\n\n---\n\n### Type E: ESLint Rule\n\n**When to use:** Documenting ESLint plugin rules\n\n```mdx\n---\ntitle: rule-name\n---\n\n\nValidates that [what the rule checks].\n\n\n## Rule Details {/*rule-details*/}\n\n[Explanation of why this rule exists and React's underlying assumptions]\n\n## Common Violations {/*common-violations*/}\n\n[Description of violation patterns]\n\n### Invalid {/*invalid*/}\n\nExamples of incorrect code for this rule:\n\n```js\n// X Missing dependency\nuseEffect(() => {\n console.log(count);\n}, []); // Missing 'count'\n```\n\n### Valid {/*valid*/}\n\nExamples of correct code for this rule:\n\n```js\n// checkmark All dependencies included\nuseEffect(() => {\n console.log(count);\n}, [count]);\n```\n\n## Troubleshooting {/*troubleshooting*/}\n\n### [Problem description] {/*problem-slug*/}\n\n[Solution]\n\n## Options {/*options*/}\n\n[Configuration options if applicable]\n```\n\n**Key characteristics:**\n- Intro is a single \"Validates that...\" sentence\n- Uses \"Invalid\"/\"Valid\" sections with emoji-prefixed code comments\n- Rule Details explains \"why\" not just \"what\"\n\n---\n\n### Type F: Index/Category\n\n**When to use:** Overview pages listing multiple APIs in a category\n\n```mdx\n---\ntitle: \"Built-in React [Type]\"\n---\n\n\n\n*Concept* let you [purpose]. Brief scope statement.\n\n\n\n---\n\n## Category Name {/*category-name*/}\n\n*Concept* explanation with [Learn section link](/learn/topic).\n\nTo [action], use one of these [Type]:\n\n* [`apiName`](/reference/react/apiName) lets you [action].\n* [`apiName`](/reference/react/apiName) declares [thing].\n\n```js\nfunction Example() {\n const value = useHookName(args);\n}\n```\n\n---\n\n## Your own [Type] {/*your-own-type*/}\n\nYou can also [define your own](/learn/topic) as JavaScript functions.\n```\n\n**Key characteristics:**\n- Title format: \"Built-in React [Type]\"\n- Italicized concept definitions\n- Horizontal rules between sections\n- Closes with \"Your own [Type]\" section\n\n---\n\n## Advanced Patterns\n\n### Multi-Function Documentation\n\n**When to use:** When a hook returns a function that needs its own documentation (useState's setter, useReducer's dispatch)\n\n```md\n### `hookName(args)` {/*hookname*/}\n\n[Main hook documentation]\n\n#### Parameters {/*parameters*/}\n#### Returns {/*returns*/}\n#### Caveats {/*caveats*/}\n\n---\n\n### `set` functions, like `setSomething(nextState)` {/*setstate*/}\n\nThe `set` function returned by `hookName` lets you [action].\n\n#### Parameters {/*setstate-parameters*/}\n#### Returns {/*setstate-returns*/}\n#### Caveats {/*setstate-caveats*/}\n```\n\n**Key conventions:**\n- Horizontal rule (`---`) separates main hook from returned function\n- Heading IDs include prefix: `{/*setstate-parameters*/}` vs `{/*parameters*/}`\n- Use generic names: \"set functions\" not \"setCount\"\n\n---\n\n### Compound Return Objects\n\n**When to use:** When a function returns an object with multiple properties/methods (createContext)\n\n```md\n### `createContext(defaultValue)` {/*createcontext*/}\n\n[Main function documentation]\n\n#### Returns {/*returns*/}\n\n`createContext` returns a context object.\n\n**The context object itself does not hold any information.** It represents...\n\n* `SomeContext` lets you provide the context value.\n* `SomeContext.Consumer` is an alternative way to read context.\n\n---\n\n### `SomeContext` Provider {/*provider*/}\n\n[Documentation for Provider]\n\n#### Props {/*provider-props*/}\n\n---\n\n### `SomeContext.Consumer` {/*consumer*/}\n\n[Documentation for Consumer]\n\n#### Props {/*consumer-props*/}\n```\n\n---\n\n## Writing Patterns\n\n### Opening Lines by Page Type\n\n| Page Type | Pattern | Example |\n|-----------|---------|---------|\n| Hook | `` `hookName` is a React Hook that lets you [action]. `` | \"`useState` is a React Hook that lets you add a state variable to your component.\" |\n| Component | `` `` lets you [action]. `` | \"`` lets you display a fallback until its children have finished loading.\" |\n| API | `` `apiName` lets you [action]. `` | \"`memo` lets you skip re-rendering a component when its props are unchanged.\" |\n| Configuration | `` The `optionName` option [controls/specifies/determines] [what]. `` | \"The `target` option specifies which React version the compiler generates code for.\" |\n| Directive | `` `'directive'` [marks/opts/prevents] [what] for [purpose]. `` | \"`'use server'` marks a function as callable from the client.\" |\n| ESLint Rule | `` Validates that [condition]. `` | \"Validates that dependency arrays for React hooks contain all necessary dependencies.\" |\n\n---\n\n### Parameter Patterns\n\n**Simple parameter:**\n```md\n* `paramName`: Description of what it does.\n```\n\n**Optional parameter:**\n```md\n* **optional** `paramName`: Description of what it does.\n```\n\n**Parameter with special function behavior:**\n```md\n* `initialState`: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render.\n * If you pass a function as `initialState`, it will be treated as an _initializer function_. It should be pure, should take no arguments, and should return a value of any type.\n```\n\n**Callback parameter with sub-parameters:**\n```md\n* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`. The `subscribe` function should return a function that cleans up the subscription.\n```\n\n**Nested options object:**\n```md\n* **optional** `options`: An object with options for this React root.\n * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary.\n * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught.\n * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by `useId`.\n```\n\n---\n\n### Return Value Patterns\n\n**Single value return:**\n```md\n`hookName` returns the current value. The value will be the same as `initialValue` during the first render.\n```\n\n**Array return (numbered list):**\n```md\n`useState` returns an array with exactly two values:\n\n1. The current state. During the first render, it will match the `initialState` you have passed.\n2. The [`set` function](#setstate) that lets you update the state to a different value and trigger a re-render.\n```\n\n**Object return (bulleted list):**\n```md\n`createElement` returns a React element object with a few properties:\n\n* `type`: The `type` you have passed.\n* `props`: The `props` you have passed except for `ref` and `key`.\n* `ref`: The `ref` you have passed. If missing, `null`.\n* `key`: The `key` you have passed, coerced to a string. If missing, `null`.\n```\n\n**Promise return:**\n```md\n`prerender` returns a Promise:\n- If rendering is successful, the Promise will resolve to an object containing:\n - `prelude`: a [Web Stream](MDN-link) of HTML.\n - `postponed`: a JSON-serializable object for resumption.\n- If rendering fails, the Promise will be rejected.\n```\n\n**Wrapped function return:**\n```md\n`cache` returns a cached version of `fn` with the same type signature. It does not call `fn` in the process.\n\nWhen calling `cachedFn` with given arguments, it first checks if a cached result exists. If cached, it returns the result. If not, it calls `fn`, stores the result, and returns it.\n```\n\n---\n\n### Caveats Patterns\n\n**Standard Hook caveat (almost always first for Hooks):**\n```md\n* `useXxx` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.\n```\n\n**Stable identity caveat (for returned functions):**\n```md\n* The `set` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire.\n```\n\n**Strict Mode caveat:**\n```md\n* In Strict Mode, React will **call your render function twice** in order to help you find accidental impurities. This is development-only behavior and does not affect production.\n```\n\n**Caveat with code example:**\n```md\n* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. For example, the following is discouraged:\n\n ```js\n const selectedProductId = useSyncExternalStore(...);\n const data = use(fetchItem(selectedProductId)) // X Don't suspend based on store value\n ```\n```\n\n**Canary caveat:**\n```md\n* If you want to pass `ref` to a Fragment, you can't use the `<>...` syntax.\n```\n\n---\n\n### Troubleshooting Patterns\n\n**Heading format (first person problem statements):**\n```md\n### I've updated the state, but logging gives me the old value {/*old-value*/}\n\n### My initializer or updater function runs twice {/*runs-twice*/}\n\n### I want to read the latest state from a callback {/*read-latest-state*/}\n```\n\n**Error message format:**\n```md\n### I'm getting an error: \"Too many re-renders\" {/*too-many-rerenders*/}\n\n### I'm getting an error: \"Rendered more hooks than during the previous render\" {/*more-hooks*/}\n```\n\n**Lint error format:**\n```md\n### I'm getting a lint error: \"[exact error message]\" {/*lint-error-slug*/}\n```\n\n**Problem-solution structure:**\n1. State the problem with code showing the issue\n2. Explain why it happens\n3. Provide the solution with corrected code\n4. Link to Learn section for deeper understanding\n\n---\n\n### Code Comment Conventions\n\nFor code comment conventions (wrong/right, legacy/recommended, server/client labeling, bundle size annotations), invoke `/docs-sandpack`.\n\n---\n\n### Link Description Patterns\n\n| Pattern | Example |\n|---------|---------|\n| \"lets you\" + action | \"`memo` lets you skip re-rendering when props are unchanged.\" |\n| \"declares\" + thing | \"`useState` declares a state variable that you can update directly.\" |\n| \"reads\" + thing | \"`useContext` reads and subscribes to a context.\" |\n| \"connects\" + thing | \"`useEffect` connects a component to an external system.\" |\n| \"Used with\" | \"Used with [`useContext`.](/reference/react/useContext)\" |\n| \"Similar to\" | \"Similar to [`useTransition`.](/reference/react/useTransition)\" |\n\n---\n\n## Component Patterns\n\nFor comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, Deprecated, RSC, Canary, Diagram, Code Steps), invoke `/docs-components`.\n\nFor Sandpack-specific patterns and code style, invoke `/docs-sandpack`.\n\n### Reference-Specific Component Rules\n\n**Component placement in Reference pages:**\n- `` goes before `` at top of page\n- `` goes after `` for page-level deprecation\n- `` goes after method heading for method-level deprecation\n- `` wrapper goes inline within ``\n- `` appears in headings, props lists, and caveats\n\n**Troubleshooting-specific components:**\n- Use first-person problem headings\n- Cross-reference Pitfall IDs when relevant\n\n**Callout spacing:**\n- Never place consecutive Pitfalls or consecutive Notes\n- Combine related warnings into one with titled subsections, or separate with prose/code\n- Consecutive DeepDives OK for multi-part explorations\n- See `/docs-components` Callout Spacing Rules\n\n---\n\n## Content Principles\n\n### Intro Section\n- **One sentence, ~15 words max** - State what the Hook does, not how it works\n- ✅ \"`useEffectEvent` is a React Hook that lets you separate events from Effects.\"\n- ❌ \"`useEffectEvent` is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an Effect Event.\"\n\n### Reference Code Example\n- Show just the API call (5-10 lines), not a full component\n- Move full component examples to Usage section\n\n### Usage Section Structure\n1. **First example: Core mental model** - Show the canonical use case with simplest concrete example\n2. **Subsequent examples: Canonical use cases** - Name the *why* (e.g., \"Avoid reconnecting to external systems\"), show a concrete *how*\n - Prefer broad canonical use cases over multiple narrow concrete examples\n - The section title IS the teaching - \"When would I use this?\" should be answered by the heading\n\n### What to Include vs. Exclude\n- **Never** document past bugs or fixed issues\n- **Include** edge cases most developers will encounter\n- **Exclude** niche edge cases (e.g., `this` binding, rare class patterns)\n\n### Caveats Section\n- Include rules the linter enforces or that cause immediate errors\n- Include fundamental usage restrictions\n- Exclude implementation details unless they affect usage\n- Exclude repetition of things explained elsewhere\n- Keep each caveat to one sentence when possible\n\n### Troubleshooting Section\n- Error headings only: \"I'm getting an error: '[message]'\" format\n- Never document past bugs - if it's fixed, it doesn't belong here\n- Focus on errors developers will actually encounter today\n\n### DeepDive Content\n- **Goldilocks principle** - Deep enough for curious developers, short enough to not overwhelm\n- Answer \"why is it designed this way?\" - not exhaustive technical details\n- Readers who skip it should miss nothing essential for using the API\n- If the explanation is getting long, you're probably explaining too much\n\n---\n\n## Domain-Specific Guidance\n\n### Hooks\n\n**Returned function documentation:**\n- Document setter/dispatch functions as separate `###` sections\n- Use generic names: \"set functions\" not \"setCount\"\n- Include stable identity caveat for returned functions\n\n**Dependency array documentation:**\n- List what counts as reactive values\n- Explain when dependencies are ignored\n- Link to removing effect dependencies guide\n\n**Recipes usage:**\n- Group related examples with meaningful titleText\n- Each recipe has brief intro, Sandpack, and ``\n\n---\n\n### Components\n\n**Props documentation:**\n- Use `#### Props` instead of `#### Parameters`\n- Mark optional props with `**optional**` prefix\n- Use `` inline for canary-only props\n\n**JSX syntax in titles/headings:**\n- Frontmatter title: `title: `\n- Reference heading: `` ### `` {/*suspense*/} ``\n\n---\n\n### React-DOM\n\n**Common props linking:**\n```md\n`` supports all [common element props.](/reference/react-dom/components/common#common-props)\n```\n\n**Props categorization:**\n- Controlled vs uncontrolled props grouped separately\n- Form-specific props documented with action patterns\n- MDN links for standard HTML attributes\n\n**Environment-specific notes:**\n```mdx\n\n\nThis API is specific to Node.js. Environments with [Web Streams](MDN-link), like Deno and modern edge runtimes, should use [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) instead.\n\n\n```\n\n**Progressive enhancement:**\n- Document benefits for users without JavaScript\n- Explain Server Function + form action integration\n- Show hidden form field and `.bind()` patterns\n\n---\n\n### RSC\n\n**RSC banner (before Intro):**\nAlways place `` component before `` for Server Component-only APIs.\n\n**Serialization type lists:**\nWhen documenting Server Function arguments, list supported types:\n```md\nSupported types for Server Function arguments:\n\n* Primitives\n\t* [string](MDN-link)\n\t* [number](MDN-link)\n* Iterables containing serializable values\n\t* [Array](MDN-link)\n\t* [Map](MDN-link)\n\nNotably, these are not supported:\n* React elements, or [JSX](/learn/writing-markup-with-jsx)\n* Functions (other than Server Functions)\n```\n\n**Bundle size comparisons:**\n- Show \"Not included in bundle\" for server-only imports\n- Annotate client bundle sizes with gzip: `// 35.9K (11.2K gzipped)`\n\n---\n\n### Compiler\n\n**Configuration page structure:**\n- Type (union type or interface)\n- Default value\n- Options/Valid values with descriptions\n\n**Directive documentation:**\n- Placement requirements are critical\n- Mode interaction tables showing combinations\n- \"Use sparingly\" + \"Plan for removal\" patterns for escape hatches\n\n**Library author guides:**\n- Audience-first intro\n- Benefits/Why section\n- Numbered step-by-step setup\n\n---\n\n### ESLint\n\n**Rule Details section:**\n- Explain \"why\" not just \"what\"\n- Focus on React's underlying assumptions\n- Describe consequences of violations\n\n**Invalid/Valid sections:**\n- Standard intro: \"Examples of [in]correct code for this rule:\"\n- Use X emoji for invalid, checkmark for valid\n- Show inline comments explaining the violation\n\n**Configuration options:**\n- Show shared settings (preferred)\n- Show rule-level options (backward compatibility)\n- Note precedence when both exist\n\n---\n\n## Edge Cases\n\nFor deprecated, canary, and version-specific component patterns (placement, syntax, examples), invoke `/docs-components`.\n\n**Quick placement rules:**\n- `` after `` for page-level, after heading for method-level\n- `` wrapper inline in Intro, `` in headings/props/caveats\n- Version notes use `` with \"Starting in React 19...\" pattern\n\n**Removed APIs on index pages:**\n```md\n## Removed APIs {/*removed-apis*/}\n\nThese APIs were removed in React 19:\n\n* [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead.\n```\n\nLink to previous version docs (18.react.dev) for removed API documentation.\n\n---\n\n## Critical Rules\n\n1. **Heading IDs required:** `## Title {/*title-id*/}` (lowercase, hyphens)\n2. **Sandpack main file needs `export default`**\n3. **Active file syntax:** ` ```js src/File.js active `\n4. **Error headings in Troubleshooting:** Use `### I'm getting an error: \"[message]\" {/*id*/}`\n5. **Section dividers (`---`)** required between headings (see Section Dividers below)\n6. **InlineToc required:** Always include `` after Intro\n7. **Consistent parameter format:** Use `* \\`paramName\\`: description` with `**optional**` prefix for optional params\n8. **Numbered lists for array returns:** When hooks return arrays, use numbered lists in Returns section\n9. **Generic names for returned functions:** Use \"set functions\" not \"setCount\"\n10. **Props vs Parameters:** Use `#### Props` for Components (Type B), `#### Parameters` for Hooks/APIs (Type A)\n11. **RSC placement:** `` component goes before ``, not after\n12. **Canary markers:** Use `` wrapper inline in Intro, `` in headings/props\n13. **Deprecated placement:** `` goes after `` for page-level, after heading for method-level\n14. **Code comment emojis:** Use X for wrong, checkmark for correct in code examples\n15. **No consecutive Pitfalls/Notes:** Combine into one component with titled subsections, or separate with prose/code (see `/docs-components`)\n\nFor component heading level conventions (DeepDive, Pitfall, Note, Recipe headings), see `/docs-components`.\n\n### Section Dividers\n\nUse `---` horizontal rules to visually separate major sections:\n\n- **After ``** - Before `## Reference` heading\n- **Between API subsections** - Between different function/hook definitions (e.g., between `useState()` and `set functions`)\n- **Before `## Usage`** - Separates API reference from examples\n- **Before `## Troubleshooting`** - Separates content from troubleshooting\n- **Between EVERY Usage subsections** - When switching to a new major use case\n\nAlways have a blank line before and after `---`.\n\n### Section ID Conventions\n\n| Section | ID Format |\n|---------|-----------|\n| Main function | `{/*functionname*/}` |\n| Returned function | `{/*setstate*/}`, `{/*dispatch*/}` |\n| Sub-section of returned function | `{/*setstate-parameters*/}` |\n| Troubleshooting item | `{/*problem-description-slug*/}` |\n| Pitfall | `{/*pitfall-description*/}` |\n| Deep dive | `{/*deep-dive-topic*/}` |\n" }, { "path": ".claude/skills/react-expert/SKILL.md", "content": "---\nname: react-expert\ndescription: Use when researching React APIs or concepts for documentation. Use when you need authoritative usage examples, caveats, warnings, or errors for a React feature.\n---\n\n# React Expert Research Skill\n\n## Overview\n\nThis skill produces exhaustive documentation research on any React API or concept by searching authoritative sources (tests, source code, PRs, issues) rather than relying on LLM training knowledge.\n\n\n**Skepticism Mandate:** You must be skeptical of your own knowledge. Claude is often trained on outdated or incorrect React patterns. Treat source material as the sole authority. If findings contradict your prior understanding, explicitly flag this discrepancy.\n\n**Red Flags - STOP if you catch yourself thinking:**\n- \"I know this API does X\" → Find source evidence first\n- \"Common pattern is Y\" → Verify in test files\n- Generating example code → Must have source file reference\n\n\n## Invocation\n\n```\n/react-expert useTransition\n/react-expert suspense boundaries\n/react-expert startTransition\n```\n\n## Sources (Priority Order)\n\n1. **React Repo Tests** - Most authoritative for actual behavior\n2. **React Source Code** - Warnings, errors, implementation details\n3. **Git History** - Commit messages with context\n4. **GitHub PRs & Comments** - Design rationale (via `gh` CLI)\n5. **GitHub Issues** - Confusion/questions (facebook/react + reactjs/react.dev)\n6. **React Working Group** - Design discussions for newer APIs\n7. **Flow Types** - Source of truth for type signatures\n8. **TypeScript Types** - Note discrepancies with Flow\n9. **Current react.dev docs** - Baseline (not trusted as complete)\n\n**No web search** - No Stack Overflow, blog posts, or web searches. GitHub API via `gh` CLI is allowed.\n\n## Workflow\n\n### Step 1: Setup React Repo\n\nFirst, ensure the React repo is available locally:\n\n```bash\n# Check if React repo exists, clone or update\nif [ -d \".claude/react\" ]; then\n cd .claude/react && git pull origin main\nelse\n git clone --depth=100 https://github.com/facebook/react.git .claude/react\nfi\n```\n\nGet the current commit hash for the research document:\n```bash\ncd .claude/react && git rev-parse --short HEAD\n```\n\n### Step 2: Dispatch 6 Parallel Research Agents\n\nSpawn these agents IN PARALLEL using the Task tool. Each agent receives the skepticism preamble:\n\n> \"You are researching React's ``. CRITICAL: Do NOT rely on your prior knowledge about this API. Your training may contain outdated or incorrect patterns. Only report what you find in the source files. If your findings contradict common understanding, explicitly highlight this discrepancy.\"\n\n| Agent | subagent_type | Focus | Instructions |\n|-------|---------------|-------|--------------|\n| test-explorer | Explore | Test files for usage patterns | Search `.claude/react/packages/*/src/__tests__/` for test files mentioning the topic. Extract actual usage examples WITH file paths and line numbers. |\n| source-explorer | Explore | Warnings/errors in source | Search `.claude/react/packages/*/src/` for console.error, console.warn, and error messages mentioning the topic. Document trigger conditions. |\n| git-historian | Explore | Commit messages | Run `git log --all --grep=\"\" --oneline -50` in `.claude/react`. Read full commit messages for context. |\n| pr-researcher | Explore | PRs introducing/modifying API | Run `gh pr list -R facebook/react --search \"\" --state all --limit 20`. Read key PR descriptions and comments. |\n| issue-hunter | Explore | Issues showing confusion | Search issues in both `facebook/react` and `reactjs/react.dev` repos. Look for common questions and misunderstandings. |\n| types-inspector | Explore | Flow + TypeScript signatures | Find Flow types in `.claude/react/packages/*/src/*.js` (look for `@flow` annotations). Find TS types in `.claude/react/packages/*/index.d.ts`. Note discrepancies. |\n\n### Step 3: Agent Prompts\n\nUse these exact prompts when spawning agents:\n\n#### test-explorer\n```\nYou are researching React's .\n\nCRITICAL: Do NOT rely on your prior knowledge about this API. Your training may contain outdated or incorrect patterns. Only report what you find in the source files.\n\nYour task: Find test files in .claude/react that demonstrate usage.\n\n1. Search for test files: Glob for `**/__tests__/**/**` and `**/__tests__/**/*.js` then grep for \n2. For each relevant test file, extract:\n - The test description (describe/it blocks)\n - The actual usage code\n - Any assertions about behavior\n - Edge cases being tested\n3. Report findings with exact file paths and line numbers\n\nFormat your output as:\n## Test File: \n### Test: \"\"\n```javascript\n\n```\n**Behavior:** \n```\n\n#### source-explorer\n```\nYou are researching React's .\n\nCRITICAL: Do NOT rely on your prior knowledge about this API. Only report what you find in the source files.\n\nYour task: Find warnings, errors, and implementation details for .\n\n1. Search .claude/react/packages/*/src/ for:\n - console.error mentions of \n - console.warn mentions of \n - Error messages mentioning \n - The main implementation file\n2. For each warning/error, document:\n - The exact message text\n - The condition that triggers it\n - The source file and line number\n\nFormat your output as:\n## Warnings & Errors\n| Message | Trigger Condition | Source |\n|---------|------------------|--------|\n| \"\" | | |\n\n## Implementation Notes\n\n```\n\n#### git-historian\n```\nYou are researching React's .\n\nCRITICAL: Do NOT rely on your prior knowledge. Only report what you find in git history.\n\nYour task: Find commit messages that explain design decisions.\n\n1. Run: cd .claude/react && git log --all --grep=\"\" --oneline -50\n2. For significant commits, read full message: git show --stat\n3. Look for:\n - Initial introduction of the API\n - Bug fixes (reveal edge cases)\n - Behavior changes\n - Deprecation notices\n\nFormat your output as:\n## Key Commits\n### - \n**Date:** \n**Context:** \n**Impact:** \n```\n\n#### pr-researcher\n```\nYou are researching React's .\n\nCRITICAL: Do NOT rely on your prior knowledge. Only report what you find in PRs.\n\nYour task: Find PRs that introduced or modified .\n\n1. Run: gh pr list -R facebook/react --search \"\" --state all --limit 20 --json number,title,url\n2. For promising PRs, read details: gh pr view -R facebook/react\n3. Look for:\n - The original RFC/motivation\n - Design discussions in comments\n - Alternative approaches considered\n - Breaking changes\n\nFormat your output as:\n## Key PRs\n### PR #: \n**URL:** <url>\n**Summary:** <what it introduced/changed>\n**Design Rationale:** <why this approach>\n**Discussion Highlights:** <key points from comments>\n```\n\n#### issue-hunter\n```\nYou are researching React's <TOPIC>.\n\nCRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issues.\n\nYour task: Find issues that reveal common confusion about <TOPIC>.\n\n1. Search facebook/react: gh issue list -R facebook/react --search \"<topic>\" --state all --limit 20 --json number,title,url\n2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search \"<topic>\" --state all --limit 20 --json number,title,url\n3. For each issue, identify:\n - What the user was confused about\n - What the resolution was\n - Any gotchas revealed\n\nFormat your output as:\n## Common Confusion\n### Issue #<number>: <title>\n**Repo:** <facebook/react or reactjs/react.dev>\n**Confusion:** <what they misunderstood>\n**Resolution:** <correct understanding>\n**Gotcha:** <if applicable>\n```\n\n#### types-inspector\n```\nYou are researching React's <TOPIC>.\n\nCRITICAL: Do NOT rely on your prior knowledge. Only report what you find in type definitions.\n\nYour task: Find and compare Flow and TypeScript type signatures for <TOPIC>.\n\n1. Flow types (source of truth): Search .claude/react/packages/*/src/*.js for @flow annotations related to <topic>\n2. TypeScript types: Search .claude/react/packages/*/index.d.ts and @types/react\n3. Compare and note any discrepancies\n\nFormat your output as:\n## Flow Types (Source of Truth)\n**File:** <path>\n```flow\n<exact type definition>\n```\n\n## TypeScript Types\n**File:** <path>\n```typescript\n<exact type definition>\n```\n\n## Discrepancies\n<any differences between Flow and TS definitions>\n```\n\n### Step 4: Synthesize Results\n\nAfter all agents complete, combine their findings into a single research document.\n\n**DO NOT add information from your own knowledge.** Only include what agents found in sources.\n\n### Step 5: Save Output\n\nWrite the final document to `.claude/research/<topic>.md`\n\nReplace spaces in topic with hyphens (e.g., \"suspense boundaries\" → \"suspense-boundaries.md\")\n\n## Output Document Template\n\n```markdown\n# React Research: <topic>\n\n> Generated by /react-expert on YYYY-MM-DD\n> Sources: React repo (commit <hash>), N PRs, M issues\n\n## Summary\n\n[Brief summary based SOLELY on source findings, not prior knowledge]\n\n## API Signature\n\n### Flow Types (Source of Truth)\n\n[From types-inspector agent]\n\n### TypeScript Types\n\n[From types-inspector agent]\n\n### Discrepancies\n\n[Any differences between Flow and TS]\n\n## Usage Examples\n\n### From Tests\n\n[From test-explorer agent - with file:line references]\n\n### From PRs/Issues\n\n[Real-world patterns from discussions]\n\n## Caveats & Gotchas\n\n[Each with source link]\n\n- **<gotcha>** - Source: <link>\n\n## Warnings & Errors\n\n| Message | Trigger Condition | Source File |\n|---------|------------------|-------------|\n[From source-explorer agent]\n\n## Common Confusion\n\n[From issue-hunter agent]\n\n## Design Decisions\n\n[From git-historian and pr-researcher agents]\n\n## Source Links\n\n### Commits\n- <hash>: <description>\n\n### Pull Requests\n- PR #<number>: <title> - <url>\n\n### Issues\n- Issue #<number>: <title> - <url>\n```\n\n## Common Mistakes to Avoid\n\n1. **Trusting prior knowledge** - If you \"know\" something about the API, find the source evidence anyway\n2. **Generating example code** - Every code example must come from an actual source file\n3. **Skipping agents** - All 6 agents must run; each provides unique perspective\n4. **Summarizing without sources** - Every claim needs a file:line or PR/issue reference\n5. **Using web search** - No Stack Overflow, no blog posts, no social media\n\n## Verification Checklist\n\nBefore finalizing the research document:\n\n- [ ] React repo is at `.claude/react` with known commit hash\n- [ ] All 6 agents were spawned in parallel\n- [ ] Every code example has a source file reference\n- [ ] Warnings/errors table has source locations\n- [ ] No claims made without source evidence\n- [ ] Discrepancies between Flow/TS types documented\n- [ ] Source links section is complete\n" }, { "path": ".claude/skills/review-docs/SKILL.md", "content": "---\nname: review-docs\ndescription: Use when reviewing React documentation for structure, components, and style compliance\n---\nCRITICAL: do not load these skills yourself.\n\nRun these tasks in parallel for the given file(s). Each agent checks different aspects—not all apply to every file:\n\n- [ ] Ask docs-reviewer agent to review {files} with docs-writer-learn (only for files in src/content/learn/).\n- [ ] Ask docs-reviewer agent to review {files} with docs-writer-reference (only for files in src/content/reference/).\n- [ ] Ask docs-reviewer agent to review {files} with docs-writer-blog (only for files in src/content/blog/).\n- [ ] Ask docs-reviewer agent to review {files} with docs-voice (all documentation files).\n- [ ] Ask docs-reviewer agent to review {files} with docs-components (all documentation files).\n- [ ] Ask docs-reviewer agent to review {files} with docs-sandpack (files containing Sandpack examples).\n\nIf no file is specified, check git status for modified MDX files in `src/content/`.\n\nThe docs-reviewer will return a checklist of the issues it found. Respond with the full checklist and line numbers from all agents, and prompt the user to create a plan to fix these issues.\n\n\n" }, { "path": ".eslintignore", "content": "scripts\nplugins\nnext.config.js\n.claude/\n" }, { "path": ".eslintrc", "content": "{\n \"root\": true,\n \"extends\": \"next/core-web-vitals\",\n \"parser\": \"@typescript-eslint/parser\",\n \"plugins\": [\"@typescript-eslint\", \"eslint-plugin-react-compiler\", \"local-rules\"],\n \"rules\": {\n \"no-unused-vars\": \"off\",\n \"@typescript-eslint/no-unused-vars\": [\"error\", {\"varsIgnorePattern\": \"^_\"}],\n \"react-hooks/exhaustive-deps\": \"error\",\n \"react/no-unknown-property\": [\"error\", {\"ignore\": [\"meta\"]}],\n \"react-compiler/react-compiler\": \"error\",\n \"local-rules/lint-markdown-code-blocks\": \"error\"\n },\n \"env\": {\n \"node\": true,\n \"commonjs\": true,\n \"browser\": true,\n \"es6\": true\n },\n \"overrides\": [\n {\n \"files\": [\"src/content/**/*.md\"],\n \"parser\": \"./eslint-local-rules/parser\",\n \"parserOptions\": {\n \"sourceType\": \"module\"\n },\n \"rules\": {\n \"no-unused-vars\": \"off\",\n \"@typescript-eslint/no-unused-vars\": \"off\",\n \"react-hooks/exhaustive-deps\": \"off\",\n \"react/no-unknown-property\": \"off\",\n \"react-compiler/react-compiler\": \"off\",\n \"local-rules/lint-markdown-code-blocks\": \"error\"\n }\n }\n ]\n}\n" }, { "path": ".github/ISSUE_TEMPLATE/0-bug.yml", "content": "name: \"🐛 Report a bug\"\ndescription: \"Report a problem on the website.\"\ntitle: \"[Bug]: \"\nlabels: [\"bug: unconfirmed\"]\nbody:\n - type: textarea\n attributes:\n label: Summary\n description: |\n A clear and concise summary of what the bug is.\n placeholder: |\n Example bug report:\n When I click the \"Submit\" button on \"Feedback\", nothing happens.\n validations:\n required: true\n - type: input\n attributes:\n label: Page\n description: |\n What page(s) did you encounter this bug on?\n placeholder: |\n https://react.dev/\n validations:\n required: true\n - type: textarea\n attributes:\n label: Details\n description: |\n Please provide any additional details about the bug.\n placeholder: |\n Example details:\n The \"Submit\" button is unresponsive. I've tried refreshing the page and using a different browser, but the issue persists.\n validations:\n required: false\n" }, { "path": ".github/ISSUE_TEMPLATE/1-typo.yml", "content": "name: \"🤦 Typo or mistake\"\ndescription: \"Report a typo or mistake in the docs.\"\ntitle: \"[Typo]: \"\nlabels: [\"type: typos\"]\nbody:\n - type: textarea\n attributes:\n label: Summary\n description: |\n A clear and concise summary of what the mistake is.\n placeholder: |\n Example:\n The code example on the \"useReducer\" page includes an unused variable `nextId`.\n validations:\n required: true\n - type: input\n attributes:\n label: Page\n description: |\n What page is the typo on?\n placeholder: |\n https://react.dev/\n validations:\n required: true\n - type: textarea\n attributes:\n label: Details\n description: |\n Please provide a explanation for why this is a mistake.\n placeholder: |\n Example mistake:\n In the \"useReducer\" section of the \"API Reference\" page, the code example under \"Writing a reducer function\" includes an unused variable `nextId` that should be removed.\n validations:\n required: false\n" }, { "path": ".github/ISSUE_TEMPLATE/2-suggestion.yml", "content": "name: \"💡 Suggestions\"\ndescription: \"Suggest a new page, section, or edit for an existing page.\"\ntitle: \"[Suggestion]: \"\nlabels: [\"type: documentation\"]\nbody:\n - type: textarea\n attributes:\n label: Summary\n description: |\n A clear and concise summary of what we should add.\n placeholder: |\n Example:\n Add a new page for how to use React with TypeScript.\n validations:\n required: true\n - type: input\n attributes:\n label: Page\n description: |\n What page is this about?\n placeholder: |\n https://react.dev/\n validations:\n required: false\n - type: textarea\n attributes:\n label: Details\n description: |\n Please provide a explanation for what you're suggesting.\n placeholder: |\n Example:\n I think it would be helpful to have a page that explains how to use React with TypeScript. This could include a basic example of a component written in TypeScript, and a link to the TypeScript documentation.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/3-framework.yml", "content": "name: \"📄 Suggest new framework\"\ndescription: \"I am a framework author applying to be included as a recommended framework.\"\ntitle: \"[Framework]: \"\nlabels: [\"type: framework\"]\nbody:\n - type: markdown\n attributes:\n value: |\n ## Apply to be included as a recommended React framework\n\n _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/creating-a-react-app). If you are not a framework author, please contact the authors before submitting._\n \n Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production.\n \n While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision).\n \n To be included, frameworks must meet the following criteria:\n \n - **Free & open-source**: must be open source and free to use.\n - **Well maintained**. must be actively maintained, providing bug fixes and improvements.\n - **Active community**: must have a sufficiently large and active community to support users.\n - **Clear onboarding**: must have clear install steps to install the React version of the framework.\n - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem.\n - **Self-hosting option**: must support an option to self-host applications without losing access to features.\n - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh.\n - **User experience**. must provide built-in support for common problems like routing and data-fetching.\n - **Compatible with our future vision for React**. React evolves over time, and frameworks that do not align with React’s direction risk isolating their users from the main React ecosystem over time. To be included on this page we must feel confident that the framework is setting its users up for success with React over time.\n \n Please note, we have reviewed most of the popular frameworks available today, so it is unlikely we have not considered your framework already. But if you think we missed something, please complete the application below.\n - type: input\n attributes:\n label: Name\n description: |\n What is the name of your framework?\n validations:\n required: true\n - type: input\n attributes:\n label: Homepage\n description: |\n What is the URL of your homepage?\n validations:\n required: true\n - type: input\n attributes:\n label: Install instructions\n description: |\n What is the URL of your getting started guide?\n validations:\n required: true\n - type: dropdown\n attributes:\n label: Is your framework open source?\n description: |\n We only recommend free and open source frameworks.\n options:\n - 'No'\n - 'Yes'\n validations:\n required: true\n - type: textarea\n attributes:\n label: Well maintained\n description: |\n Please describe how your framework is actively maintained. Include recent releases, bug fixes, and improvements as examples.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Active community\n description: |\n Please describe your community. Include the size of your community, and links to community resources.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Clear onboarding\n description: |\n Please describe how a user can install your framework with React. Include links to any relevant documentation.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Ecosystem compatibility\n description: |\n Please describe any limitations your framework has with the React ecosystem. Include any libraries or tools that are not compatible with your framework.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Self-hosting option\n description: |\n Please describe how your framework supports self-hosting. Include any limitations to features when self-hosting. Also include whether you require a server to deploy your framework.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Developer Experience\n description: |\n Please describe how your framework provides a great developer experience. Include any limitations to React features like React DevTools, Chrome DevTools, and Fast Refresh.\n validations:\n required: true\n - type: textarea\n attributes:\n label: User Experience\n description: |\n Please describe how your framework helps developers create high quality user experiences by solving common use-cases. Include specifics for how your framework offers built-in support for code-splitting, routing, HTML generation, and data-fetching in a way that avoids client/server waterfalls by default. Include details on how you offer features such as SSG and SSR.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Compatible with our future vision for React\n description: |\n Please describe how your framework aligns with our future vision for React. Include how your framework will evolve with React over time, and your plans to support future React features like React Server Components.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "contact_links:\n - name: 📃 Bugs in React\n url: https://github.com/facebook/react/issues/new/choose\n about: This issue tracker is not for bugs in React. Please file React issues here.\n - name: 🤔 Questions and Help\n url: https://reactjs.org/community/support.html\n about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "<!--\n\n日本語版 (ja.react.dev) リポジトリでのPR/Issueは、日本語版固有の問題\n（翻訳や日本語版独自機能に関係するもの）のみ受け付けます。\n\n全言語に関わる問題や改善（英語部分のスペルミス、コードサンプルの修正、ビルドシステム改善等）\nについては、英語版リポジトリ (https://github.com/reactjs/react.dev)\nでPR/Issueを作成してください。\n\n日本語版の作業フローについては以下を参照してください。\nhttps://github.com/reactjs/ja.react.dev/wiki\n\n-->\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n - package-ecosystem: \"npm\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n # Disable Dependabot. Doing it here so it propagates to translation forks.\n open-pull-requests-limit: 0\n" }, { "path": ".github/workflows/analyze.yml", "content": "name: Analyze Bundle\n\non:\n pull_request:\n push:\n branches:\n - main # change this if your default branch is named differently\n workflow_dispatch:\n\npermissions: {}\n\njobs:\n analyze:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n\n - name: Set up node\n uses: actions/setup-node@v4\n with:\n node-version: '20.x'\n cache: yarn\n cache-dependency-path: yarn.lock\n\n - name: Restore cached node_modules\n uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}\n\n - name: Install deps\n run: yarn install --frozen-lockfile\n\n - name: Restore next build\n uses: actions/cache@v4\n id: restore-build-cache\n env:\n cache-name: cache-next-build\n with:\n path: .next/cache\n # change this if you prefer a more strict cache\n key: ${{ runner.os }}-build-${{ env.cache-name }}\n\n - name: Build next.js app\n # change this if your site requires a custom build command\n run: ./node_modules/.bin/next build\n\n # Here's the first place where next-bundle-analysis' own script is used\n # This step pulls the raw bundle stats for the current bundle\n - name: Analyze bundle\n run: npx -p nextjs-bundle-analysis@0.5.0 report\n\n - name: Upload bundle\n uses: actions/upload-artifact@v4\n with:\n path: .next/analyze/__bundle_analysis.json\n name: bundle_analysis.json\n\n - name: Download base branch bundle stats\n uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e\n if: success() && github.event.number\n with:\n workflow: analyze.yml\n branch: ${{ github.event.pull_request.base.ref }}\n name: bundle_analysis.json\n path: .next/analyze/base/bundle\n\n # And here's the second place - this runs after we have both the current and\n # base branch bundle stats, and will compare them to determine what changed.\n # There are two configurable arguments that come from package.json:\n #\n # - budget: optional, set a budget (bytes) against which size changes are measured\n # it's set to 350kb here by default, as informed by the following piece:\n # https://infrequently.org/2021/03/the-performance-inequality-gap/\n #\n # - red-status-percentage: sets the percent size increase where you get a red\n # status indicator, defaults to 20%\n #\n # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`\n # entry in your package.json file.\n - name: Compare with base branch bundle\n if: success() && github.event.number\n run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare\n\n - name: Upload analysis comment\n uses: actions/upload-artifact@v4\n with:\n name: analysis_comment.txt\n path: .next/analyze/__bundle_analysis_comment.txt\n\n - name: Save PR number\n run: echo ${{ github.event.number }} > ./pr_number\n\n - name: Upload PR number\n uses: actions/upload-artifact@v4\n with:\n name: pr_number\n path: ./pr_number\n\n # The actual commenting happens in the other action, matching the guidance in\n # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/\n" }, { "path": ".github/workflows/analyze_comment.yml", "content": "name: Analyze Bundle (Comment)\n\non:\n workflow_run:\n workflows: ['Analyze Bundle']\n types:\n - completed\n\npermissions:\n contents: read\n issues: write\n pull-requests: write\n \njobs:\n comment:\n runs-on: ubuntu-latest\n if: >\n ${{ github.event.workflow_run.event == 'pull_request' &&\n github.event.workflow_run.conclusion == 'success' }}\n steps:\n - name: Download base branch bundle stats\n uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e\n with:\n workflow: analyze.yml\n run_id: ${{ github.event.workflow_run.id }}\n name: analysis_comment.txt\n path: analysis_comment.txt\n\n - name: Download PR number\n uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e\n with:\n workflow: analyze.yml\n run_id: ${{ github.event.workflow_run.id }}\n name: pr_number\n path: pr_number\n\n - name: Get comment body\n id: get-comment-body\n if: success()\n run: |\n echo 'body<<EOF' >> $GITHUB_OUTPUT\n echo '' >> $GITHUB_OUTPUT\n echo '## Size changes' >> $GITHUB_OUTPUT\n echo '' >> $GITHUB_OUTPUT\n echo '<details>' >> $GITHUB_OUTPUT\n echo '' >> $GITHUB_OUTPUT\n cat analysis_comment.txt/__bundle_analysis_comment.txt >> $GITHUB_OUTPUT\n echo '' >> $GITHUB_OUTPUT\n echo '</details>' >> $GITHUB_OUTPUT\n echo '' >> $GITHUB_OUTPUT\n echo 'EOF' >> $GITHUB_OUTPUT\n pr_number=$(cat pr_number/pr_number)\n echo \"pr-number=$pr_number\" >> $GITHUB_OUTPUT\n\n - name: Comment\n uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728\n with:\n header: next-bundle-analysis\n number: ${{ steps.get-comment-body.outputs.pr-number }}\n message: ${{ steps.get-comment-body.outputs.body }}\n" }, { "path": ".github/workflows/discord_notify.yml", "content": "name: Discord Notify\n\non:\n pull_request_target:\n types: [opened, ready_for_review]\n\npermissions: {}\n\njobs:\n check_maintainer:\n uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main\n permissions:\n # Used by check_maintainer\n contents: read\n with:\n actor: ${{ github.event.pull_request.user.login }}\n\n notify:\n if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}\n needs: check_maintainer\n runs-on: ubuntu-latest\n steps:\n - name: Discord Webhook Action\n uses: tsickert/discord-webhook@v6.0.0\n with:\n webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}\n embed-author-name: ${{ github.event.pull_request.user.login }}\n embed-author-url: ${{ github.event.pull_request.user.html_url }}\n embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}\n embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'\n embed-description: ${{ github.event.pull_request.body }}\n embed-url: ${{ github.event.pull_request.html_url }}\n" }, { "path": ".github/workflows/label_core_team_prs.yml", "content": "name: Label Core Team PRs\n\non:\n pull_request_target:\n\npermissions: {}\n\nenv:\n TZ: /usr/share/zoneinfo/America/Los_Angeles\n # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout\n SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1\n\njobs:\n check_maintainer:\n uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main\n permissions:\n # Used by check_maintainer\n contents: read\n with:\n actor: ${{ github.event.pull_request.user.login }}\n\n label:\n if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}\n runs-on: ubuntu-latest\n needs: check_maintainer\n permissions:\n # Used to add labels on issues\n issues: write\n # Used to add labels on PRs\n pull-requests: write\n steps:\n - name: Label PR as React Core Team\n uses: actions/github-script@v7\n with:\n script: |\n github.rest.issues.addLabels({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: ${{ github.event.number }},\n labels: ['React Core Team']\n });\n" }, { "path": ".github/workflows/site_lint.yml", "content": "name: Site Lint / Heading ID check\n\non:\n push:\n branches:\n - main # change this if your default branch is named differently\n pull_request:\n types: [opened, synchronize, reopened]\n\npermissions: {}\n\njobs:\n lint:\n runs-on: ubuntu-latest\n\n name: Lint on node 20.x and ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n - name: Use Node.js 20.x\n uses: actions/setup-node@v4\n with:\n node-version: 20.x\n cache: yarn\n cache-dependency-path: yarn.lock\n\n - name: Restore cached node_modules\n uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}\n\n - name: Install deps\n run: yarn install --frozen-lockfile\n\n - name: Lint codebase\n run: yarn ci-check\n\n - name: Textlint (Japanese)\n run: yarn textlint" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\ntsconfig.tsbuildinfo\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n\n# external fonts\npublic/fonts/**/Optimistic_*.woff2\n\n# rss\npublic/rss.xml\n\n# claude local settings\n.claude/*.local.*\n.claude/react/\n" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nyarn lint-staged" }, { "path": ".prettierignore", "content": "src/content/**/*.md\n" }, { "path": ".prettierrc", "content": "{\n \"bracketSpacing\": false,\n \"singleQuote\": true,\n \"bracketSameLine\": true,\n \"trailingComma\": \"es5\",\n \"printWidth\": 80,\n \"overrides\": [\n {\n \"files\": \"*.css\",\n \"options\": {\n \"parser\": \"css\"\n }\n },\n {\n \"files\": \"*.md\",\n \"options\": {\n \"parser\": \"mdx\"\n }\n }\n ]\n}\n" }, { "path": "CLAUDE.md", "content": "# CLAUDE.md\n\nThis file provides guidance to Claude Code when working with this repository.\n\n## Project Overview\n\nThis is the React documentation website (react.dev), built with Next.js 15.1.11 and React 19. Documentation is written in MDX format.\n\n## Development Commands\n\n```bash\nyarn build # Production build\nyarn lint # Run ESLint\nyarn lint:fix # Auto-fix lint issues\nyarn tsc # TypeScript type checking\nyarn check-all # Run prettier, lint:fix, tsc, and rss together\n```\n\n## Project Structure\n\n```\nsrc/\n├── content/ # Documentation content (MDX files)\n│ ├── learn/ # Tutorial/learning content\n│ ├── reference/ # API reference docs\n│ ├── blog/ # Blog posts\n│ └── community/ # Community pages\n├── components/ # React components\n├── pages/ # Next.js pages\n├── hooks/ # Custom React hooks\n├── utils/ # Utility functions\n└── styles/ # CSS/Tailwind styles\n```\n\n## Code Conventions\n\n### TypeScript/React\n- Functional components only\n- Tailwind CSS for styling\n\n### Documentation Style\n\nWhen editing files in `src/content/`, the appropriate skill will be auto-suggested:\n- `src/content/learn/` - Learn page structure and tone\n- `src/content/reference/` - Reference page structure and tone\n\nFor MDX components (DeepDive, Pitfall, Note, etc.), invoke `/docs-components`.\nFor Sandpack code examples, invoke `/docs-sandpack`.\n\nSee `.claude/docs/react-docs-patterns.md` for comprehensive style guidelines.\n\nPrettier is used for formatting (config in `.prettierrc`).\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to make participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies within all project spaces, and it also applies when\nan individual is representing the project or its community in public spaces.\nExamples of representing a project or community include using an official\nproject e-mail address, posting via an official social media account, or acting\nas an appointed representative at an online or offline event. Representation of\na project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at <opensource-conduct@fb.com>. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\nThank you for your interest in contributing to the React Docs!\n\n## Code of Conduct\n\nFacebook has adopted a Code of Conduct that we expect project\nparticipants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct)\nso that you can understand what actions will and will not be tolerated.\n\n## Technical Writing Tips\n\nThis is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs.\n\n## Guidelines for Text\n\n**Different sections intentionally have different styles.**\n\nThe documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below.\n\n**[Learn React](https://react.dev/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any \"cyclical dependencies\" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to \"look ahead\" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that \"thinking in React\" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them.\n\n**[API Reference](https://react.dev/reference/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs.\n\n**Try to follow your own instructions.**\n\nWhen writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated.\n\n## Guidelines for Code Examples\n\n### Syntax\n\n#### Prefer JSX to `createElement`.\n\nIgnore this if you're specifically describing `createElement`.\n\n#### Use `const` where possible, otherwise `let`. Don't use `var`.\n\nIgnore this if you're specifically writing about ES5.\n\n#### Don't use ES6 features when equivalent ES5 features have no downsides.\n\nRemember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it.\n\nIn particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature.\n\n#### Don't use features that aren't standardized yet.\n\nFor example, **don't** write this:\n\n```js\nclass MyComponent extends React.Component {\n state = {value: ''};\n handleChange = (e) => {\n this.setState({value: e.target.value});\n };\n}\n```\n\nInstead, **do** write this:\n\n```js\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.state = {value: ''};\n }\n handleChange(e) {\n this.setState({value: e.target.value});\n }\n}\n```\n\nIgnore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text.\n\n### Style\n\n- Use semicolons.\n- No space between function names and parens (`method() {}` not `method () {}`).\n- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).\n- Always capitalize React concepts such as Hooks, Effects, and Transitions.\n\n### Highlighting\n\nUse `js` as the highlighting language in Markdown code blocks:\n\n````\n```js\n// code\n```\n````\n\nSometimes you'll see blocks with numbers. \nThey tell the website to highlight specific lines.\n\nYou can highlight a single line:\n\n````\n```js {2}\nfunction hello() {\n // this line will get highlighted\n}\n```\n````\n\nA range of lines:\n\n````\n```js {2-4}\nfunction hello() {\n // these lines\n // will get\n // highlighted\n}\n```\n````\n\nOr even multiple ranges:\n\n````\n```js {2-4,6}\nfunction hello() {\n // these lines\n // will get\n // highlighted\n console.log('hello');\n // also this one\n console.log('there');\n}\n```\n````\n\nBe mindful that if you move some code in an example with highlighting, you also need to update the highlighting.\n\nDon't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss.\n" }, { "path": "LICENSE-DOCS.md", "content": "Attribution 4.0 International\n\n=======================================================================\n\nCreative Commons Corporation (\"Creative Commons\") is not a law firm and\ndoes not provide legal services or legal advice. Distribution of\nCreative Commons public licenses does not create a lawyer-client or\nother relationship. Creative Commons makes its licenses and related\ninformation available on an \"as-is\" basis. Creative Commons gives no\nwarranties regarding its licenses, any material licensed under their\nterms and conditions, or any related information. Creative Commons\ndisclaims all liability for damages resulting from their use to the\nfullest extent possible.\n\nUsing Creative Commons Public Licenses\n\nCreative Commons public licenses provide a standard set of terms and\nconditions that creators and other rights holders may use to share\noriginal works of authorship and other material subject to copyright\nand certain other rights specified in the public license below. The\nfollowing considerations are for informational purposes only, are not\nexhaustive, and do not form part of our licenses.\n\n Considerations for licensors: Our public licenses are\n intended for use by those authorized to give the public\n permission to use material in ways otherwise restricted by\n copyright and certain other rights. Our licenses are\n irrevocable. Licensors should read and understand the terms\n and conditions of the license they choose before applying it.\n Licensors should also secure all rights necessary before\n applying our licenses so that the public can reuse the\n material as expected. Licensors should clearly mark any\n material not subject to the license. This includes other CC-\n licensed material, or material used under an exception or\n limitation to copyright. More considerations for licensors:\n wiki.creativecommons.org/Considerations_for_licensors\n\n Considerations for the public: By using one of our public\n licenses, a licensor grants the public permission to use the\n licensed material under specified terms and conditions. If\n the licensor's permission is not necessary for any reason--for\n example, because of any applicable exception or limitation to\n copyright--then that use is not regulated by the license. Our\n licenses grant only permissions under copyright and certain\n other rights that a licensor has authority to grant. Use of\n the licensed material may still be restricted for other\n reasons, including because others have copyright or other\n rights in the material. A licensor may make special requests,\n such as asking that all changes be marked or described.\n Although not required by our licenses, you are encouraged to\n respect those requests where reasonable. More_considerations\n for the public:\n wiki.creativecommons.org/Considerations_for_licensees\n\n=======================================================================\n\nCreative Commons Attribution 4.0 International Public License\n\nBy exercising the Licensed Rights (defined below), You accept and agree\nto be bound by the terms and conditions of this Creative Commons\nAttribution 4.0 International Public License (\"Public License\"). To the\nextent this Public License may be interpreted as a contract, You are\ngranted the Licensed Rights in consideration of Your acceptance of\nthese terms and conditions, and the Licensor grants You such rights in\nconsideration of benefits the Licensor receives from making the\nLicensed Material available under these terms and conditions.\n\n\nSection 1 -- Definitions.\n\n a. Adapted Material means material subject to Copyright and Similar\n Rights that is derived from or based upon the Licensed Material\n and in which the Licensed Material is translated, altered,\n arranged, transformed, or otherwise modified in a manner requiring\n permission under the Copyright and Similar Rights held by the\n Licensor. For purposes of this Public License, where the Licensed\n Material is a musical work, performance, or sound recording,\n Adapted Material is always produced where the Licensed Material is\n synched in timed relation with a moving image.\n\n b. Adapter's License means the license You apply to Your Copyright\n and Similar Rights in Your contributions to Adapted Material in\n accordance with the terms and conditions of this Public License.\n\n c. Copyright and Similar Rights means copyright and/or similar rights\n closely related to copyright including, without limitation,\n performance, broadcast, sound recording, and Sui Generis Database\n Rights, without regard to how the rights are labeled or\n categorized. For purposes of this Public License, the rights\n specified in Section 2(b)(1)-(2) are not Copyright and Similar\n Rights.\n\n d. Effective Technological Measures means those measures that, in the\n absence of proper authority, may not be circumvented under laws\n fulfilling obligations under Article 11 of the WIPO Copyright\n Treaty adopted on December 20, 1996, and/or similar international\n agreements.\n\n e. Exceptions and Limitations means fair use, fair dealing, and/or\n any other exception or limitation to Copyright and Similar Rights\n that applies to Your use of the Licensed Material.\n\n f. Licensed Material means the artistic or literary work, database,\n or other material to which the Licensor applied this Public\n License.\n\n g. Licensed Rights means the rights granted to You subject to the\n terms and conditions of this Public License, which are limited to\n all Copyright and Similar Rights that apply to Your use of the\n Licensed Material and that the Licensor has authority to license.\n\n h. Licensor means the individual(s) or entity(ies) granting rights\n under this Public License.\n\n i. Share means to provide material to the public by any means or\n process that requires permission under the Licensed Rights, such\n as reproduction, public display, public performance, distribution,\n dissemination, communication, or importation, and to make material\n available to the public including in ways that members of the\n public may access the material from a place and at a time\n individually chosen by them.\n\n j. Sui Generis Database Rights means rights other than copyright\n resulting from Directive 96/9/EC of the European Parliament and of\n the Council of 11 March 1996 on the legal protection of databases,\n as amended and/or succeeded, as well as other essentially\n equivalent rights anywhere in the world.\n\n k. You means the individual or entity exercising the Licensed Rights\n under this Public License. Your has a corresponding meaning.\n\n\nSection 2 -- Scope.\n\n a. License grant.\n\n 1. Subject to the terms and conditions of this Public License,\n the Licensor hereby grants You a worldwide, royalty-free,\n non-sublicensable, non-exclusive, irrevocable license to\n exercise the Licensed Rights in the Licensed Material to:\n\n a. reproduce and Share the Licensed Material, in whole or\n in part; and\n\n b. produce, reproduce, and Share Adapted Material.\n\n 2. Exceptions and Limitations. For the avoidance of doubt, where\n Exceptions and Limitations apply to Your use, this Public\n License does not apply, and You do not need to comply with\n its terms and conditions.\n\n 3. Term. The term of this Public License is specified in Section\n 6(a).\n\n 4. Media and formats; technical modifications allowed. The\n Licensor authorizes You to exercise the Licensed Rights in\n all media and formats whether now known or hereafter created,\n and to make technical modifications necessary to do so. The\n Licensor waives and/or agrees not to assert any right or\n authority to forbid You from making technical modifications\n necessary to exercise the Licensed Rights, including\n technical modifications necessary to circumvent Effective\n Technological Measures. For purposes of this Public License,\n simply making modifications authorized by this Section 2(a)\n (4) never produces Adapted Material.\n\n 5. Downstream recipients.\n\n a. Offer from the Licensor -- Licensed Material. Every\n recipient of the Licensed Material automatically\n receives an offer from the Licensor to exercise the\n Licensed Rights under the terms and conditions of this\n Public License.\n\n b. No downstream restrictions. You may not offer or impose\n any additional or different terms or conditions on, or\n apply any Effective Technological Measures to, the\n Licensed Material if doing so restricts exercise of the\n Licensed Rights by any recipient of the Licensed\n Material.\n\n 6. No endorsement. Nothing in this Public License constitutes or\n may be construed as permission to assert or imply that You\n are, or that Your use of the Licensed Material is, connected\n with, or sponsored, endorsed, or granted official status by,\n the Licensor or others designated to receive attribution as\n provided in Section 3(a)(1)(A)(i).\n\n b. Other rights.\n\n 1. Moral rights, such as the right of integrity, are not\n licensed under this Public License, nor are publicity,\n privacy, and/or other similar personality rights; however, to\n the extent possible, the Licensor waives and/or agrees not to\n assert any such rights held by the Licensor to the limited\n extent necessary to allow You to exercise the Licensed\n Rights, but not otherwise.\n\n 2. Patent and trademark rights are not licensed under this\n Public License.\n\n 3. To the extent possible, the Licensor waives any right to\n collect royalties from You for the exercise of the Licensed\n Rights, whether directly or through a collecting society\n under any voluntary or waivable statutory or compulsory\n licensing scheme. In all other cases the Licensor expressly\n reserves any right to collect such royalties.\n\n\nSection 3 -- License Conditions.\n\nYour exercise of the Licensed Rights is expressly made subject to the\nfollowing conditions.\n\n a. Attribution.\n\n 1. If You Share the Licensed Material (including in modified\n form), You must:\n\n a. retain the following if it is supplied by the Licensor\n with the Licensed Material:\n\n i. identification of the creator(s) of the Licensed\n Material and any others designated to receive\n attribution, in any reasonable manner requested by\n the Licensor (including by pseudonym if\n designated);\n\n ii. a copyright notice;\n\n iii. a notice that refers to this Public License;\n\n iv. a notice that refers to the disclaimer of\n warranties;\n\n v. a URI or hyperlink to the Licensed Material to the\n extent reasonably practicable;\n\n b. indicate if You modified the Licensed Material and\n retain an indication of any previous modifications; and\n\n c. indicate the Licensed Material is licensed under this\n Public License, and include the text of, or the URI or\n hyperlink to, this Public License.\n\n 2. You may satisfy the conditions in Section 3(a)(1) in any\n reasonable manner based on the medium, means, and context in\n which You Share the Licensed Material. For example, it may be\n reasonable to satisfy the conditions by providing a URI or\n hyperlink to a resource that includes the required\n information.\n\n 3. If requested by the Licensor, You must remove any of the\n information required by Section 3(a)(1)(A) to the extent\n reasonably practicable.\n\n 4. If You Share Adapted Material You produce, the Adapter's\n License You apply must not prevent recipients of the Adapted\n Material from complying with this Public License.\n\n\nSection 4 -- Sui Generis Database Rights.\n\nWhere the Licensed Rights include Sui Generis Database Rights that\napply to Your use of the Licensed Material:\n\n a. for the avoidance of doubt, Section 2(a)(1) grants You the right\n to extract, reuse, reproduce, and Share all or a substantial\n portion of the contents of the database;\n\n b. if You include all or a substantial portion of the database\n contents in a database in which You have Sui Generis Database\n Rights, then the database in which You have Sui Generis Database\n Rights (but not its individual contents) is Adapted Material; and\n\n c. You must comply with the conditions in Section 3(a) if You Share\n all or a substantial portion of the contents of the database.\n\nFor the avoidance of doubt, this Section 4 supplements and does not\nreplace Your obligations under this Public License where the Licensed\nRights include other Copyright and Similar Rights.\n\n\nSection 5 -- Disclaimer of Warranties and Limitation of Liability.\n\n a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE\n EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS\n AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF\n ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,\n IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,\n WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR\n PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,\n ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT\n KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT\n ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.\n\n b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE\n TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,\n NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,\n INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,\n COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR\n USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN\n ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR\n DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR\n IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.\n\n c. The disclaimer of warranties and limitation of liability provided\n above shall be interpreted in a manner that, to the extent\n possible, most closely approximates an absolute disclaimer and\n waiver of all liability.\n\n\nSection 6 -- Term and Termination.\n\n a. This Public License applies for the term of the Copyright and\n Similar Rights licensed here. However, if You fail to comply with\n this Public License, then Your rights under this Public License\n terminate automatically.\n\n b. Where Your right to use the Licensed Material has terminated under\n Section 6(a), it reinstates:\n\n 1. automatically as of the date the violation is cured, provided\n it is cured within 30 days of Your discovery of the\n violation; or\n\n 2. upon express reinstatement by the Licensor.\n\n For the avoidance of doubt, this Section 6(b) does not affect any\n right the Licensor may have to seek remedies for Your violations\n of this Public License.\n\n c. For the avoidance of doubt, the Licensor may also offer the\n Licensed Material under separate terms or conditions or stop\n distributing the Licensed Material at any time; however, doing so\n will not terminate this Public License.\n\n d. Sections 1, 5, 6, 7, and 8 survive termination of this Public\n License.\n\n\nSection 7 -- Other Terms and Conditions.\n\n a. The Licensor shall not be bound by any additional or different\n terms or conditions communicated by You unless expressly agreed.\n\n b. Any arrangements, understandings, or agreements regarding the\n Licensed Material not stated herein are separate from and\n independent of the terms and conditions of this Public License.\n\n\nSection 8 -- Interpretation.\n\n a. For the avoidance of doubt, this Public License does not, and\n shall not be interpreted to, reduce, limit, restrict, or impose\n conditions on any use of the Licensed Material that could lawfully\n be made without permission under this Public License.\n\n b. To the extent possible, if any provision of this Public License is\n deemed unenforceable, it shall be automatically reformed to the\n minimum extent necessary to make it enforceable. If the provision\n cannot be reformed, it shall be severed from this Public License\n without affecting the enforceability of the remaining terms and\n conditions.\n\n c. No term or condition of this Public License will be waived and no\n failure to comply consented to unless expressly agreed to by the\n Licensor.\n\n d. Nothing in this Public License constitutes or may be interpreted\n as a limitation upon, or waiver of, any privileges and immunities\n that apply to the Licensor or You, including from the legal\n processes of any jurisdiction or authority.\n\n\n=======================================================================\n\nCreative Commons is not a party to its public licenses.\nNotwithstanding, Creative Commons may elect to apply one of its public\nlicenses to material it publishes and in those instances will be\nconsidered the \"Licensor.\" Except for the limited purpose of indicating\nthat material is shared under a Creative Commons public license or as\notherwise permitted by the Creative Commons policies published at\ncreativecommons.org/policies, Creative Commons does not authorize the\nuse of the trademark \"Creative Commons\" or any other trademark or logo\nof Creative Commons without its prior written consent including,\nwithout limitation, in connection with any unauthorized modifications\nto any of its public licenses or any other arrangements,\nunderstandings, or agreements concerning use of licensed material. For\nthe avoidance of doubt, this paragraph does not form part of the public\nlicenses.\n\nCreative Commons may be contacted at creativecommons.org.\n" }, { "path": "README.md", "content": "# react.dev\n\nThis repo contains the source code and documentation powering [react.dev](https://react.dev/).\n\n> 以下はオリジナル（英語版）リポジトリの README です。日本語版 React ドキュメントへの貢献（翻訳・修正など）に興味がある方は[こちらの Wiki ページ](https://github.com/reactjs/ja.react.dev/wiki)を参照してください。\n\n## Getting started\n\n### Prerequisites\n\n1. Git\n1. Node: any version starting with v16.8.0 or greater\n1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)\n1. A fork of the repo (for any contributions)\n1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine\n\n### Installation\n\n1. `cd react.dev` to go into the project root\n3. `yarn` to install the website's npm dependencies\n\n### Running locally\n\n1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/))\n1. `open http://localhost:3000` to open the site in your favorite browser\n\n## Contributing\n\n### Guidelines\n\nThe documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.\n\n### Create a branch\n\n1. `git checkout main` from any folder in your local `react.dev` repository\n1. `git pull origin main` to ensure you have the latest main code\n1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch\n\n### Make the change\n\n1. Follow the [\"Running locally\"](#running-locally) instructions\n1. Save the files and check in the browser\n 1. Changes to React components in `src` will hot-reload\n 1. Changes to markdown files in `content` will hot-reload\n 1. If working with plugins, you may need to remove the `.cache` directory and restart the server\n\n### Test the change\n\n1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.\n2. Run `yarn check-all`. (This will run Prettier, ESLint and validate types.)\n\n### Push it\n\n1. `git add -A && git commit -m \"My message\"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes\n1. `git push my-fork-name the-name-of-my-branch`\n1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches.\n1. Follow GitHub's instructions.\n1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.\n\n## Translation\n\nIf you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135).\n\n## License\nContent submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file." }, { "path": "colors.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nmodule.exports = {\n // Text colors\n primary: '#23272F', // gray-90\n 'primary-dark': '#F6F7F9', // gray-5\n secondary: '#404756', // gray-70\n 'secondary-dark': '#EBECF0', // gray-10\n tertiary: '#5E687E', // gray-50\n 'tertiary-dark': '#99A1B3', // gray-30\n link: '#087EA4', // blue-50\n 'link-dark': '#58C4DC', // blue-40\n syntax: '#EBECF0', // gray-10\n wash: '#FFFFFF',\n 'wash-dark': '#23272F', // gray-90\n card: '#F6F7F9', // gray-05\n 'card-dark': '#343A46', // gray-80\n highlight: '#E6F7FF', // blue-10\n 'highlight-dark': 'rgba(88,175,223,.1)',\n border: '#EBECF0', // gray-10\n 'border-dark': '#343A46', // gray-80\n 'secondary-button': '#EBECF0', // gray-10\n 'secondary-button-dark': '#404756', // gray-70\n brand: '#087EA4', // blue-40\n 'brand-dark': '#58C4DC', // blue-40\n\n // Gray\n 'gray-95': '#16181D',\n 'gray-90': '#23272F',\n 'gray-80': '#343A46',\n 'gray-70': '#404756',\n 'gray-60': '#4E5769',\n 'gray-50': '#5E687E',\n 'gray-40': '#78839B',\n 'gray-30': '#99A1B3',\n 'gray-20': '#BCC1CD',\n 'gray-15': '#D0D3DC',\n 'gray-10': '#EBECF0',\n 'gray-5': '#F6F7F9',\n\n // Blue\n 'blue-80': '#043849',\n 'blue-60': '#045975',\n 'blue-50': '#087EA4',\n 'blue-40': '#149ECA', // Brand Blue\n 'blue-30': '#58C4DC', // unused\n 'blue-20': '#ABE2ED',\n 'blue-10': '#E6F7FF', // todo: doesn't match illustrations\n 'blue-5': '#E6F6FA',\n\n // Yellow\n 'yellow-60': '#B65700',\n 'yellow-50': '#C76A15',\n 'yellow-40': '#DB7D27', // unused\n 'yellow-30': '#FABD62', // unused\n 'yellow-20': '#FCDEB0', // unused\n 'yellow-10': '#FDE7C7',\n 'yellow-5': '#FEF5E7',\n\n // Purple\n 'purple-60': '#2B3491', // unused\n 'purple-50': '#575FB7',\n 'purple-40': '#6B75DB',\n 'purple-30': '#8891EC',\n 'purple-20': '#C3C8F5', // unused\n 'purple-10': '#E7E9FB',\n 'purple-5': '#F3F4FD',\n\n // Green\n 'green-60': '#2B6E62',\n 'green-50': '#388F7F',\n 'green-40': '#44AC99',\n 'green-30': '#7FCCBF',\n 'green-20': '#ABDED5',\n 'green-10': '#E5F5F2',\n 'green-5': '#F4FBF9',\n\n // RED\n 'red-60': '#712D28',\n 'red-50': '#A6423A', // unused\n 'red-40': '#C1554D',\n 'red-30': '#D07D77',\n 'red-20': '#E5B7B3', // unused\n 'red-10': '#F2DBD9', // unused\n 'red-5': '#FAF1F0',\n\n // MISC\n 'code-block': '#99a1b30f', // gray-30 @ 6%\n 'gradient-blue': '#58C4DC', // Only used for the landing gradient for now.\n github: {\n highlight: '#fffbdd',\n },\n};\n" }, { "path": "eslint-local-rules/__tests__/fixtures/src/content/basic-error.md", "content": "```jsx\nimport {useState} from 'react';\nfunction Counter() {\n const [count, setCount] = useState(0);\n setCount(count + 1);\n return <div>{count}</div>;\n}\n```\n" }, { "path": "eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md", "content": "```jsx title=\"Counter\" {expectedErrors: {'react-compiler': [99]}} {expectedErrors: {'react-compiler': [2]}}\nimport {useState} from 'react';\nfunction Counter() {\n const [count, setCount] = useState(0);\n setCount(count + 1);\n return <div>{count}</div>;\n}\n```\n" }, { "path": "eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md", "content": "```jsx {expectedErrors: {'react-compiler': 'invalid'}}\nimport {useState} from 'react';\nfunction Counter() {\n const [count, setCount] = useState(0);\n setCount(count + 1);\n return <div>{count}</div>;\n}\n```\n" }, { "path": "eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md", "content": "```bash\nsetCount()\n```\n\n```txt\nimport {useState} from 'react';\n```\n" }, { "path": "eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md", "content": "```jsx {expectedErrors: {'react-compiler': [3]}}\nfunction Hello() {\n return <h1>Hello</h1>;\n}\n```\n" }, { "path": "eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md", "content": "```jsx {expectedErrors: {'react-compiler': [4]}}\nimport {useState} from 'react';\nfunction Counter() {\n const [count, setCount] = useState(0);\n setCount(count + 1);\n return <div>{count}</div>;\n}\n```\n" }, { "path": "eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst assert = require('assert');\nconst fs = require('fs');\nconst path = require('path');\nconst {ESLint} = require('eslint');\nconst plugin = require('..');\n\nconst FIXTURES_DIR = path.join(\n __dirname,\n 'fixtures',\n 'src',\n 'content'\n);\nconst PARSER_PATH = path.join(__dirname, '..', 'parser.js');\n\nfunction createESLint({fix = false} = {}) {\n return new ESLint({\n useEslintrc: false,\n fix,\n plugins: {\n 'local-rules': plugin,\n },\n overrideConfig: {\n parser: PARSER_PATH,\n plugins: ['local-rules'],\n rules: {\n 'local-rules/lint-markdown-code-blocks': 'error',\n },\n parserOptions: {\n sourceType: 'module',\n },\n },\n });\n}\n\nfunction readFixture(name) {\n return fs.readFileSync(path.join(FIXTURES_DIR, name), 'utf8');\n}\n\nasync function lintFixture(name, {fix = false} = {}) {\n const eslint = createESLint({fix});\n const filePath = path.join(FIXTURES_DIR, name);\n const markdown = readFixture(name);\n const [result] = await eslint.lintText(markdown, {filePath});\n return result;\n}\n\nasync function run() {\n const basicResult = await lintFixture('basic-error.md');\n assert.strictEqual(\n basicResult.messages.length,\n 1,\n 'expected one diagnostic'\n );\n assert(\n basicResult.messages[0].message.includes('Calling setState during render'),\n 'expected message to mention setState during render'\n );\n\n const suppressedResult = await lintFixture('suppressed-error.md');\n assert.strictEqual(\n suppressedResult.messages.length,\n 0,\n 'expected suppression metadata to silence diagnostic'\n );\n\n const staleResult = await lintFixture('stale-expected-error.md');\n assert.strictEqual(\n staleResult.messages.length,\n 1,\n 'expected stale metadata error'\n );\n assert.strictEqual(\n staleResult.messages[0].message,\n 'React Compiler expected error on line 3 was not triggered'\n );\n\n const duplicateResult = await lintFixture('duplicate-metadata.md');\n assert.strictEqual(\n duplicateResult.messages.length,\n 2,\n 'expected duplicate metadata to surface compiler diagnostic and stale metadata notice'\n );\n const duplicateFixed = await lintFixture('duplicate-metadata.md', {\n fix: true,\n });\n assert(\n duplicateFixed.output.includes(\n \"{expectedErrors: {'react-compiler': [4]}}\"\n ),\n 'expected duplicates to be rewritten to a single canonical block'\n );\n assert(\n !duplicateFixed.output.includes('[99]'),\n 'expected stale line numbers to be removed from metadata'\n );\n\n const mixedLanguageResult = await lintFixture('mixed-language.md');\n assert.strictEqual(\n mixedLanguageResult.messages.length,\n 0,\n 'expected non-js code fences to be ignored'\n );\n\n const malformedResult = await lintFixture('malformed-metadata.md');\n assert.strictEqual(\n malformedResult.messages.length,\n 1,\n 'expected malformed metadata to fall back to compiler diagnostics'\n );\n const malformedFixed = await lintFixture('malformed-metadata.md', {\n fix: true,\n });\n assert(\n malformedFixed.output.includes(\n \"{expectedErrors: {'react-compiler': [4]}}\"\n ),\n 'expected malformed metadata to be replaced with canonical form'\n );\n}\n\nrun().catch(error => {\n console.error(error);\n process.exitCode = 1;\n});\n" }, { "path": "eslint-local-rules/index.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst lintMarkdownCodeBlocks = require('./rules/lint-markdown-code-blocks');\n\nmodule.exports = {\n rules: {\n 'lint-markdown-code-blocks': lintMarkdownCodeBlocks,\n },\n};\n" }, { "path": "eslint-local-rules/package.json", "content": "{\n \"name\": \"eslint-plugin-local-rules\",\n \"version\": \"0.0.0\",\n \"main\": \"index.js\",\n \"private\": \"true\",\n \"scripts\": {\n \"test\": \"node __tests__/lint-markdown-code-blocks.test.js\"\n },\n \"devDependencies\": {\n \"eslint-mdx\": \"^2\"\n }\n}\n" }, { "path": "eslint-local-rules/parser.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nmodule.exports = require('eslint-mdx');\n" }, { "path": "eslint-local-rules/rules/diagnostics.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nfunction getRelativeLine(loc) {\n return loc?.start?.line ?? loc?.line ?? 1;\n}\n\nfunction getRelativeColumn(loc) {\n return loc?.start?.column ?? loc?.column ?? 0;\n}\n\nfunction getRelativeEndLine(loc, fallbackLine) {\n if (loc?.end?.line != null) {\n return loc.end.line;\n }\n if (loc?.line != null) {\n return loc.line;\n }\n return fallbackLine;\n}\n\nfunction getRelativeEndColumn(loc, fallbackColumn) {\n if (loc?.end?.column != null) {\n return loc.end.column;\n }\n if (loc?.column != null) {\n return loc.column;\n }\n return fallbackColumn;\n}\n\n/**\n * @param {import('./markdown').MarkdownCodeBlock} block\n * @param {Array<{detail: any, loc: any, message: string}>} diagnostics\n * @returns {Array<{detail: any, message: string, relativeStartLine: number, markdownLoc: {start: {line: number, column: number}, end: {line: number, column: number}}}>}\n */\nfunction normalizeDiagnostics(block, diagnostics) {\n return diagnostics.map(({detail, loc, message}) => {\n const relativeStartLine = Math.max(getRelativeLine(loc), 1);\n const relativeStartColumn = Math.max(getRelativeColumn(loc), 0);\n const relativeEndLine = Math.max(\n getRelativeEndLine(loc, relativeStartLine),\n relativeStartLine\n );\n const relativeEndColumn = Math.max(\n getRelativeEndColumn(loc, relativeStartColumn),\n relativeStartColumn\n );\n\n const markdownStartLine = block.codeStartLine + relativeStartLine - 1;\n const markdownEndLine = block.codeStartLine + relativeEndLine - 1;\n\n return {\n detail,\n message,\n relativeStartLine,\n markdownLoc: {\n start: {\n line: markdownStartLine,\n column: relativeStartColumn,\n },\n end: {\n line: markdownEndLine,\n column: relativeEndColumn,\n },\n },\n };\n });\n}\n\nmodule.exports = {\n normalizeDiagnostics,\n};\n" }, { "path": "eslint-local-rules/rules/lint-markdown-code-blocks.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst {\n buildFenceLine,\n getCompilerExpectedLines,\n getSortedUniqueNumbers,\n hasCompilerEntry,\n metadataEquals,\n metadataHasExpectedErrorsToken,\n removeCompilerExpectedLines,\n setCompilerExpectedLines,\n} = require('./metadata');\nconst {normalizeDiagnostics} = require('./diagnostics');\nconst {parseMarkdownFile} = require('./markdown');\nconst {runReactCompiler} = require('./react-compiler');\n\nmodule.exports = {\n meta: {\n type: 'problem',\n docs: {\n description: 'Run React Compiler on markdown code blocks',\n category: 'Possible Errors',\n },\n fixable: 'code',\n hasSuggestions: true,\n schema: [],\n },\n\n create(context) {\n return {\n Program(node) {\n const filename = context.getFilename();\n if (!filename.endsWith('.md') || !filename.includes('src/content')) {\n return;\n }\n\n const sourceCode = context.getSourceCode();\n const {blocks} = parseMarkdownFile(sourceCode.text, filename);\n // For each supported code block, run the compiler and reconcile metadata.\n for (const block of blocks) {\n const compilerResult = runReactCompiler(\n block.code,\n `${filename}#codeblock`\n );\n\n const expectedLines = getCompilerExpectedLines(block.metadata);\n const expectedLineSet = new Set(expectedLines);\n const diagnostics = normalizeDiagnostics(\n block,\n compilerResult.diagnostics\n );\n\n const errorLines = new Set();\n const unexpectedDiagnostics = [];\n\n for (const diagnostic of diagnostics) {\n const line = diagnostic.relativeStartLine;\n errorLines.add(line);\n if (!expectedLineSet.has(line)) {\n unexpectedDiagnostics.push(diagnostic);\n }\n }\n\n const normalizedErrorLines = getSortedUniqueNumbers(\n Array.from(errorLines)\n );\n const missingExpectedLines = expectedLines.filter(\n (line) => !errorLines.has(line)\n );\n\n const desiredMetadata = normalizedErrorLines.length\n ? setCompilerExpectedLines(block.metadata, normalizedErrorLines)\n : removeCompilerExpectedLines(block.metadata);\n\n // Compute canonical metadata and attach an autofix when it differs.\n const metadataChanged = !metadataEquals(\n block.metadata,\n desiredMetadata\n );\n const replacementLine = buildFenceLine(block.lang, desiredMetadata);\n const replacementDiffers = block.fence.rawText !== replacementLine;\n const applyReplacementFix = replacementDiffers\n ? (fixer) =>\n fixer.replaceTextRange(block.fence.range, replacementLine)\n : null;\n\n const hasDuplicateMetadata =\n block.metadata.hadDuplicateExpectedErrors;\n const hasExpectedErrorsMetadata = metadataHasExpectedErrorsToken(\n block.metadata\n );\n\n const shouldFixUnexpected =\n Boolean(applyReplacementFix) &&\n normalizedErrorLines.length > 0 &&\n (metadataChanged ||\n hasDuplicateMetadata ||\n !hasExpectedErrorsMetadata);\n\n let fixAlreadyAttached = false;\n\n for (const diagnostic of unexpectedDiagnostics) {\n const reportData = {\n node,\n loc: diagnostic.markdownLoc,\n message: diagnostic.message,\n };\n\n if (\n shouldFixUnexpected &&\n applyReplacementFix &&\n !fixAlreadyAttached\n ) {\n reportData.fix = applyReplacementFix;\n reportData.suggest = [\n {\n desc: 'Add expectedErrors metadata to suppress these errors',\n fix: applyReplacementFix,\n },\n ];\n fixAlreadyAttached = true;\n }\n\n context.report(reportData);\n }\n\n // Assert that expectedErrors is actually needed\n if (\n Boolean(applyReplacementFix) &&\n missingExpectedLines.length > 0 &&\n hasCompilerEntry(block.metadata)\n ) {\n const plural = missingExpectedLines.length > 1;\n const message = plural\n ? `React Compiler expected errors on lines ${missingExpectedLines.join(\n ', '\n )} were not triggered`\n : `React Compiler expected error on line ${missingExpectedLines[0]} was not triggered`;\n\n const reportData = {\n node,\n loc: {\n start: {\n line: block.position.start.line,\n column: 0,\n },\n end: {\n line: block.position.start.line,\n column: block.fence.rawText.length,\n },\n },\n message,\n };\n\n if (!fixAlreadyAttached && applyReplacementFix) {\n reportData.fix = applyReplacementFix;\n fixAlreadyAttached = true;\n } else if (applyReplacementFix) {\n reportData.suggest = [\n {\n desc: 'Remove stale expectedErrors metadata',\n fix: applyReplacementFix,\n },\n ];\n }\n\n context.report(reportData);\n }\n }\n },\n };\n },\n};\n" }, { "path": "eslint-local-rules/rules/markdown.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst remark = require('remark');\nconst {parseFenceMetadata} = require('./metadata');\n\n/**\n * @typedef {Object} MarkdownCodeBlock\n * @property {string} code\n * @property {number} codeStartLine\n * @property {{start: {line: number, column: number}, end: {line: number, column: number}}} position\n * @property {{lineIndex: number, rawText: string, metaText: string, range: [number, number]}} fence\n * @property {string} filePath\n * @property {string} lang\n * @property {import('./metadata').FenceMetadata} metadata\n */\n\nconst SUPPORTED_LANGUAGES = new Set([\n 'js',\n 'jsx',\n 'javascript',\n 'ts',\n 'tsx',\n 'typescript',\n]);\n\nfunction computeLineOffsets(lines) {\n const offsets = [];\n let currentOffset = 0;\n\n for (const line of lines) {\n offsets.push(currentOffset);\n currentOffset += line.length + 1;\n }\n\n return offsets;\n}\n\nfunction parseMarkdownFile(content, filePath) {\n const tree = remark().parse(content);\n const lines = content.split('\\n');\n const lineOffsets = computeLineOffsets(lines);\n const blocks = [];\n\n function traverse(node) {\n if (!node || typeof node !== 'object') {\n return;\n }\n\n if (node.type === 'code') {\n const rawLang = node.lang || '';\n const normalizedLang = rawLang.toLowerCase();\n if (!normalizedLang || !SUPPORTED_LANGUAGES.has(normalizedLang)) {\n return;\n }\n\n const fenceLineIndex = (node.position?.start?.line ?? 1) - 1;\n const fenceStartOffset = node.position?.start?.offset ?? 0;\n const fenceLine = lines[fenceLineIndex] ?? '';\n const fenceEndOffset = fenceStartOffset + fenceLine.length;\n\n let metaText = '';\n if (fenceLine) {\n const prefixMatch = fenceLine.match(/^`{3,}\\s*/);\n const prefixLength = prefixMatch ? prefixMatch[0].length : 3;\n metaText = fenceLine.slice(prefixLength + rawLang.length);\n } else if (node.meta) {\n metaText = ` ${node.meta}`;\n }\n\n const metadata = parseFenceMetadata(metaText);\n\n blocks.push({\n lang: rawLang || normalizedLang,\n metadata,\n filePath,\n code: node.value || '',\n codeStartLine: (node.position?.start?.line ?? 1) + 1,\n position: {\n start: {\n line: fenceLineIndex + 1,\n column: (node.position?.start?.column ?? 1) - 1,\n },\n end: {\n line: fenceLineIndex + 1,\n column: (node.position?.start?.column ?? 1) - 1 + fenceLine.length,\n },\n },\n fence: {\n lineIndex: fenceLineIndex,\n rawText: fenceLine,\n metaText,\n range: [fenceStartOffset, fenceEndOffset],\n },\n });\n return;\n }\n\n if ('children' in node && Array.isArray(node.children)) {\n for (const child of node.children) {\n traverse(child);\n }\n }\n }\n\n traverse(tree);\n\n return {\n content,\n blocks,\n lines,\n lineOffsets,\n };\n}\n\nmodule.exports = {\n SUPPORTED_LANGUAGES,\n computeLineOffsets,\n parseMarkdownFile,\n};\n" }, { "path": "eslint-local-rules/rules/metadata.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * @typedef {{type: 'text', raw: string}} TextToken\n * @typedef {{\n * type: 'expectedErrors',\n * entries: Record<string, Array<number>>,\n * raw?: string,\n * }} ExpectedErrorsToken\n * @typedef {TextToken | ExpectedErrorsToken} MetadataToken\n *\n * @typedef {{\n * leading: string,\n * trailing: string,\n * tokens: Array<MetadataToken>,\n * parseError: boolean,\n * hadDuplicateExpectedErrors: boolean,\n * }} FenceMetadata\n */\n\nconst EXPECTED_ERRORS_BLOCK_REGEX = /\\{\\s*expectedErrors\\s*:/;\nconst REACT_COMPILER_KEY = 'react-compiler';\n\nfunction getSortedUniqueNumbers(values) {\n return Array.from(new Set(values))\n .filter((value) => typeof value === 'number' && !Number.isNaN(value))\n .sort((a, b) => a - b);\n}\n\nfunction tokenizeMeta(body) {\n if (!body) {\n return [];\n }\n\n const tokens = [];\n let current = '';\n let depth = 0;\n\n for (let i = 0; i < body.length; i++) {\n const char = body[i];\n if (char === '{') {\n depth++;\n } else if (char === '}') {\n depth = Math.max(depth - 1, 0);\n }\n\n if (char === ' ' && depth === 0) {\n if (current) {\n tokens.push(current);\n current = '';\n }\n continue;\n }\n\n current += char;\n }\n\n if (current) {\n tokens.push(current);\n }\n\n return tokens;\n}\n\nfunction normalizeEntryValues(values) {\n if (!Array.isArray(values)) {\n return [];\n }\n return getSortedUniqueNumbers(values);\n}\n\nfunction parseExpectedErrorsEntries(rawEntries) {\n const normalized = rawEntries\n .replace(/([{,]\\s*)([a-zA-Z_$][\\w$]*)\\s*:/g, '$1\"$2\":')\n .replace(/'([^']*)'/g, '\"$1\"');\n\n const parsed = JSON.parse(normalized);\n const entries = {};\n\n if (parsed && typeof parsed === 'object') {\n for (const [key, value] of Object.entries(parsed)) {\n entries[key] = normalizeEntryValues(Array.isArray(value) ? value.flat() : value);\n }\n }\n\n return entries;\n}\n\nfunction parseExpectedErrorsToken(tokenText) {\n const match = tokenText.match(/^\\{\\s*expectedErrors\\s*:\\s*(\\{[\\s\\S]*\\})\\s*\\}$/);\n if (!match) {\n return null;\n }\n\n const entriesSource = match[1];\n let parseError = false;\n let entries;\n\n try {\n entries = parseExpectedErrorsEntries(entriesSource);\n } catch (error) {\n parseError = true;\n entries = {};\n }\n\n return {\n token: {\n type: 'expectedErrors',\n entries,\n raw: tokenText,\n },\n parseError,\n };\n}\n\nfunction parseFenceMetadata(metaText) {\n if (!metaText) {\n return {\n leading: '',\n trailing: '',\n tokens: [],\n parseError: false,\n hadDuplicateExpectedErrors: false,\n };\n }\n\n const leading = metaText.match(/^\\s*/)?.[0] ?? '';\n const trailing = metaText.match(/\\s*$/)?.[0] ?? '';\n const bodyStart = leading.length;\n const bodyEnd = metaText.length - trailing.length;\n const body = metaText.slice(bodyStart, bodyEnd).trim();\n\n if (!body) {\n return {\n leading,\n trailing,\n tokens: [],\n parseError: false,\n hadDuplicateExpectedErrors: false,\n };\n }\n\n const tokens = [];\n let parseError = false;\n let sawExpectedErrors = false;\n let hadDuplicateExpectedErrors = false;\n\n for (const rawToken of tokenizeMeta(body)) {\n const normalizedToken = rawToken.trim();\n if (!normalizedToken) {\n continue;\n }\n\n if (EXPECTED_ERRORS_BLOCK_REGEX.test(normalizedToken)) {\n const parsed = parseExpectedErrorsToken(normalizedToken);\n if (parsed) {\n if (sawExpectedErrors) {\n hadDuplicateExpectedErrors = true;\n // Drop duplicates. We'll rebuild the canonical block on write.\n continue;\n }\n tokens.push(parsed.token);\n parseError = parseError || parsed.parseError;\n sawExpectedErrors = true;\n continue;\n }\n }\n\n tokens.push({type: 'text', raw: normalizedToken});\n }\n\n return {\n leading,\n trailing,\n tokens,\n parseError,\n hadDuplicateExpectedErrors,\n };\n}\n\nfunction cloneMetadata(metadata) {\n return {\n leading: metadata.leading,\n trailing: metadata.trailing,\n parseError: metadata.parseError,\n hadDuplicateExpectedErrors: metadata.hadDuplicateExpectedErrors,\n tokens: metadata.tokens.map((token) => {\n if (token.type === 'expectedErrors') {\n const clonedEntries = {};\n for (const [key, value] of Object.entries(token.entries)) {\n clonedEntries[key] = [...value];\n }\n return {type: 'expectedErrors', entries: clonedEntries};\n }\n return {type: 'text', raw: token.raw};\n }),\n };\n}\n\nfunction findExpectedErrorsToken(metadata) {\n return metadata.tokens.find((token) => token.type === 'expectedErrors') || null;\n}\n\nfunction getCompilerExpectedLines(metadata) {\n const token = findExpectedErrorsToken(metadata);\n if (!token) {\n return [];\n }\n return getSortedUniqueNumbers(token.entries[REACT_COMPILER_KEY] || []);\n}\n\nfunction hasCompilerEntry(metadata) {\n const token = findExpectedErrorsToken(metadata);\n return Boolean(token && token.entries[REACT_COMPILER_KEY]?.length);\n}\n\nfunction metadataHasExpectedErrorsToken(metadata) {\n return Boolean(findExpectedErrorsToken(metadata));\n}\n\nfunction stringifyExpectedErrorsToken(token) {\n const entries = token.entries || {};\n const keys = Object.keys(entries).filter((key) => entries[key].length > 0);\n if (keys.length === 0) {\n return '';\n }\n\n keys.sort();\n\n const segments = keys.map((key) => {\n const values = entries[key];\n return `'${key}': [${values.join(', ')}]`;\n });\n\n return `{expectedErrors: {${segments.join(', ')}}}`;\n}\n\nfunction stringifyFenceMetadata(metadata) {\n if (!metadata.tokens.length) {\n return '';\n }\n\n const parts = metadata.tokens\n .map((token) => {\n if (token.type === 'expectedErrors') {\n return stringifyExpectedErrorsToken(token);\n }\n return token.raw;\n })\n .filter(Boolean);\n\n if (!parts.length) {\n return '';\n }\n\n const leading = metadata.leading || ' ';\n const trailing = metadata.trailing ? metadata.trailing.trimEnd() : '';\n const body = parts.join(' ');\n return `${leading}${body}${trailing}`;\n}\n\nfunction buildFenceLine(lang, metadata) {\n const meta = stringifyFenceMetadata(metadata);\n return meta ? `\\`\\`\\`${lang}${meta}` : `\\`\\`\\`${lang}`;\n}\n\nfunction metadataEquals(a, b) {\n if (a.leading !== b.leading || a.trailing !== b.trailing) {\n return false;\n }\n\n if (a.tokens.length !== b.tokens.length) {\n return false;\n }\n\n for (let i = 0; i < a.tokens.length; i++) {\n const left = a.tokens[i];\n const right = b.tokens[i];\n if (left.type !== right.type) {\n return false;\n }\n if (left.type === 'text') {\n if (left.raw !== right.raw) {\n return false;\n }\n } else {\n const leftKeys = Object.keys(left.entries).sort();\n const rightKeys = Object.keys(right.entries).sort();\n if (leftKeys.length !== rightKeys.length) {\n return false;\n }\n for (let j = 0; j < leftKeys.length; j++) {\n if (leftKeys[j] !== rightKeys[j]) {\n return false;\n }\n const lValues = getSortedUniqueNumbers(left.entries[leftKeys[j]]);\n const rValues = getSortedUniqueNumbers(right.entries[rightKeys[j]]);\n if (lValues.length !== rValues.length) {\n return false;\n }\n for (let k = 0; k < lValues.length; k++) {\n if (lValues[k] !== rValues[k]) {\n return false;\n }\n }\n }\n }\n }\n\n return true;\n}\n\nfunction normalizeMetadata(metadata) {\n const normalized = cloneMetadata(metadata);\n normalized.hadDuplicateExpectedErrors = false;\n normalized.parseError = false;\n if (!normalized.tokens.length) {\n normalized.leading = '';\n normalized.trailing = '';\n }\n return normalized;\n}\n\nfunction setCompilerExpectedLines(metadata, lines) {\n const normalizedLines = getSortedUniqueNumbers(lines);\n if (normalizedLines.length === 0) {\n return removeCompilerExpectedLines(metadata);\n }\n\n const next = cloneMetadata(metadata);\n let token = findExpectedErrorsToken(next);\n if (!token) {\n token = {type: 'expectedErrors', entries: {}};\n next.tokens = [token, ...next.tokens];\n }\n\n token.entries[REACT_COMPILER_KEY] = normalizedLines;\n return normalizeMetadata(next);\n}\n\nfunction removeCompilerExpectedLines(metadata) {\n const next = cloneMetadata(metadata);\n const token = findExpectedErrorsToken(next);\n if (!token) {\n return normalizeMetadata(next);\n }\n\n delete token.entries[REACT_COMPILER_KEY];\n\n const hasEntries = Object.values(token.entries).some(\n (value) => Array.isArray(value) && value.length > 0\n );\n\n if (!hasEntries) {\n next.tokens = next.tokens.filter((item) => item !== token);\n }\n\n return normalizeMetadata(next);\n}\n\nmodule.exports = {\n buildFenceLine,\n getCompilerExpectedLines,\n getSortedUniqueNumbers,\n hasCompilerEntry,\n metadataEquals,\n metadataHasExpectedErrorsToken,\n parseFenceMetadata,\n removeCompilerExpectedLines,\n setCompilerExpectedLines,\n stringifyFenceMetadata,\n};\n" }, { "path": "eslint-local-rules/rules/react-compiler.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst {transformFromAstSync} = require('@babel/core');\nconst {parse: babelParse} = require('@babel/parser');\nconst BabelPluginReactCompiler = require('babel-plugin-react-compiler').default;\nconst {\n parsePluginOptions,\n validateEnvironmentConfig,\n} = require('babel-plugin-react-compiler');\n\nconst COMPILER_OPTIONS = {\n noEmit: true,\n panicThreshold: 'none',\n environment: validateEnvironmentConfig({\n validateRefAccessDuringRender: true,\n validateNoSetStateInRender: true,\n validateNoSetStateInEffects: true,\n validateNoJSXInTryStatements: true,\n validateNoImpureFunctionsInRender: true,\n validateStaticComponents: true,\n validateNoFreezingKnownMutableFunctions: true,\n validateNoVoidUseMemo: true,\n validateNoCapitalizedCalls: [],\n validateHooksUsage: true,\n validateNoDerivedComputationsInEffects: true,\n }),\n};\n\nfunction hasRelevantCode(code) {\n const functionPattern = /^(export\\s+)?(default\\s+)?function\\s+\\w+/m;\n const arrowPattern =\n /^(export\\s+)?(const|let|var)\\s+\\w+\\s*=\\s*(\\([^)]*\\)|\\w+)\\s*=>/m;\n const hasImports = /^import\\s+/m.test(code);\n\n return functionPattern.test(code) || arrowPattern.test(code) || hasImports;\n}\n\nfunction runReactCompiler(code, filename) {\n const result = {\n sourceCode: code,\n events: [],\n };\n\n if (!hasRelevantCode(code)) {\n return {...result, diagnostics: []};\n }\n\n const options = parsePluginOptions({\n ...COMPILER_OPTIONS,\n });\n\n options.logger = {\n logEvent: (_, event) => {\n if (event.kind === 'CompileError') {\n const category = event.detail?.category;\n if (category === 'Todo' || category === 'Invariant') {\n return;\n }\n result.events.push(event);\n }\n },\n };\n\n try {\n const ast = babelParse(code, {\n sourceFilename: filename,\n sourceType: 'module',\n plugins: ['jsx', 'typescript'],\n });\n\n transformFromAstSync(ast, code, {\n filename,\n highlightCode: false,\n retainLines: true,\n plugins: [[BabelPluginReactCompiler, options]],\n sourceType: 'module',\n configFile: false,\n babelrc: false,\n });\n } catch (error) {\n return {...result, diagnostics: []};\n }\n\n const diagnostics = [];\n\n for (const event of result.events) {\n if (event.kind !== 'CompileError') {\n continue;\n }\n\n const detail = event.detail;\n if (!detail) {\n continue;\n }\n\n const loc = typeof detail.primaryLocation === 'function'\n ? detail.primaryLocation()\n : null;\n\n if (loc == null || typeof loc === 'symbol') {\n continue;\n }\n\n const message = typeof detail.printErrorMessage === 'function'\n ? detail.printErrorMessage(result.sourceCode, {eslint: true})\n : detail.description || 'Unknown React Compiler error';\n\n diagnostics.push({detail, loc, message});\n }\n\n return {...result, diagnostics};\n}\n\nmodule.exports = {\n hasRelevantCode,\n runReactCompiler,\n};\n" }, { "path": "next-env.d.ts", "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.\n" }, { "path": "next.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\n/**\n * @type {import('next').NextConfig}\n **/\nconst nextConfig = {\n pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],\n reactStrictMode: true,\n experimental: {\n scrollRestoration: true,\n reactCompiler: true,\n },\n async rewrites() {\n return {\n beforeFiles: [\n // Serve markdown when Accept header prefers text/markdown\n // Useful for LLM agents - https://www.skeptrune.com/posts/use-the-accept-header-to-serve-markdown-instead-of-html-to-llms/\n {\n source: '/:path((?!llms.txt).*)',\n has: [\n {\n type: 'header',\n key: 'accept',\n value: '(.*text/markdown.*)',\n },\n ],\n destination: '/api/md/:path*',\n },\n // Explicit .md extension also serves markdown\n {\n source: '/:path*.md',\n destination: '/api/md/:path*',\n },\n ],\n };\n },\n env: {},\n webpack: (config, {dev, isServer, ...options}) => {\n if (process.env.ANALYZE) {\n const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');\n config.plugins.push(\n new BundleAnalyzerPlugin({\n analyzerMode: 'static',\n reportFilename: options.isServer\n ? '../analyze/server.html'\n : './analyze/client.html',\n })\n );\n }\n\n // Don't bundle the shim unnecessarily.\n config.resolve.alias['use-sync-external-store/shim'] = 'react';\n\n // ESLint depends on the CommonJS version of esquery,\n // but Webpack loads the ESM version by default. This\n // alias ensures the correct version is used.\n //\n // More info:\n // https://github.com/reactjs/react.dev/pull/8115\n config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js';\n\n const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');\n config.plugins.push(\n new NormalModuleReplacementPlugin(\n /^raf$/,\n require.resolve('./src/utils/rafShim.js')\n ),\n new NormalModuleReplacementPlugin(\n /^process$/,\n require.resolve('./src/utils/processShim.js')\n ),\n new IgnorePlugin({\n checkResource(resource, context) {\n if (\n /\\/eslint\\/lib\\/rules$/.test(context) &&\n /\\.\\/[\\w-]+(\\.js)?$/.test(resource)\n ) {\n // Skips imports of built-in rules that ESLint\n // tries to carry into the bundle by default.\n // We only want the engine and the React rules.\n return true;\n }\n return false;\n },\n })\n );\n\n return config;\n },\n};\n\nmodule.exports = nextConfig;\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-dev\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"license\": \"CC\",\n \"scripts\": {\n \"analyze\": \"ANALYZE=true next build\",\n \"dev\": \"next-remote-watch ./src/content\",\n \"build\": \"next build && node --experimental-modules ./scripts/downloadFonts.mjs\",\n \"lint\": \"next lint && eslint \\\"src/content/**/*.md\\\"\",\n \"lint:fix\": \"next lint --fix && eslint \\\"src/content/**/*.md\\\" --fix\",\n \"format:source\": \"prettier --config .prettierrc --write \\\"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\\\"\",\n \"nit:source\": \"prettier --config .prettierrc --list-different \\\"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\\\"\",\n \"prettier\": \"yarn format:source\",\n \"prettier:diff\": \"yarn nit:source\",\n \"lint-heading-ids\": \"node scripts/headingIdLinter.js\",\n \"fix-headings\": \"node scripts/headingIdLinter.js --fix\",\n \"ci-check\": \"npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks\",\n \"tsc\": \"tsc --noEmit\",\n \"start\": \"next start\",\n \"postinstall\": \"yarn --cwd eslint-local-rules install && is-ci || husky install .husky\",\n \"check-all\": \"npm-run-all prettier lint:fix tsc rss\",\n \"rss\": \"node scripts/generateRss.js\",\n \"deadlinks\": \"node scripts/deadLinkChecker.js\",\n \"copyright\": \"node scripts/copyright.js\",\n \"test:eslint-local-rules\": \"yarn --cwd eslint-local-rules test\",\n \"textlint\": \"cd textlint && yarn --frozen-lockfile && yarn textlint\",\n \"textlint-staged\": \"cd textlint && yarn --frozen-lockfile && yarn textlint-staged --\"\n },\n \"dependencies\": {\n \"@codesandbox/sandpack-react\": \"2.13.5\",\n \"@docsearch/css\": \"^3.8.3\",\n \"@docsearch/react\": \"^3.8.3\",\n \"@headlessui/react\": \"^1.7.0\",\n \"@radix-ui/react-context-menu\": \"^2.1.5\",\n \"body-scroll-lock\": \"^3.1.3\",\n \"classnames\": \"^2.2.6\",\n \"debounce\": \"^1.2.1\",\n \"github-slugger\": \"^1.3.0\",\n \"next\": \"15.1.12\",\n \"next-remote-watch\": \"^1.0.0\",\n \"parse-numeric-range\": \"^1.2.0\",\n \"react\": \"^19.0.0\",\n \"react-collapsed\": \"4.0.4\",\n \"react-dom\": \"^19.0.0\",\n \"remark-frontmatter\": \"^4.0.1\",\n \"remark-gfm\": \"^3.0.1\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.12.9\",\n \"@babel/plugin-transform-modules-commonjs\": \"^7.18.6\",\n \"@babel/preset-react\": \"^7.18.6\",\n \"@mdx-js/mdx\": \"^2.1.3\",\n \"@types/body-scroll-lock\": \"^2.6.1\",\n \"@types/classnames\": \"^2.2.10\",\n \"@types/debounce\": \"^1.2.1\",\n \"@types/github-slugger\": \"^1.3.0\",\n \"@types/mdx-js__react\": \"^1.5.2\",\n \"@types/node\": \"^14.6.4\",\n \"@types/parse-numeric-range\": \"^0.0.1\",\n \"@types/react\": \"^19.0.0\",\n \"@types/react-dom\": \"^19.0.0\",\n \"@typescript-eslint/eslint-plugin\": \"^5.36.2\",\n \"@typescript-eslint/parser\": \"^5.36.2\",\n \"asyncro\": \"^3.0.0\",\n \"autoprefixer\": \"^10.4.2\",\n \"babel-eslint\": \"10.x\",\n \"babel-plugin-react-compiler\": \"^1.0.0\",\n \"chalk\": \"4.1.2\",\n \"eslint\": \"7.x\",\n \"eslint-config-next\": \"12.0.3\",\n \"eslint-config-react-app\": \"^5.2.1\",\n \"eslint-plugin-flowtype\": \"4.x\",\n \"eslint-plugin-import\": \"2.x\",\n \"eslint-plugin-jsx-a11y\": \"6.x\",\n \"eslint-plugin-local-rules\": \"link:eslint-local-rules\",\n \"eslint-plugin-react\": \"7.x\",\n \"eslint-plugin-react-compiler\": \"^19.0.0-beta-e552027-20250112\",\n \"eslint-plugin-react-hooks\": \"^0.0.0-experimental-fabef7a6b-20221215\",\n \"fs-extra\": \"^9.0.1\",\n \"globby\": \"^11.0.1\",\n \"gray-matter\": \"^4.0.2\",\n \"husky\": \"^7.0.4\",\n \"is-ci\": \"^3.0.1\",\n \"lint-staged\": \">=10\",\n \"mdast-util-to-string\": \"^1.1.0\",\n \"metro-cache\": \"0.72.2\",\n \"npm-run-all\": \"^4.1.5\",\n \"postcss\": \"^8.4.5\",\n \"postcss-flexbugs-fixes\": \"4.2.1\",\n \"postcss-preset-env\": \"^6.7.0\",\n \"prettier\": \"^2.5.1\",\n \"reading-time\": \"^1.2.0\",\n \"remark\": \"^12.0.1\",\n \"remark-external-links\": \"^7.0.0\",\n \"remark-html\": \"^12.0.0\",\n \"remark-images\": \"^2.0.0\",\n \"remark-slug\": \"^7.0.0\",\n \"remark-unwrap-images\": \"^2.0.0\",\n \"retext\": \"^7.0.1\",\n \"retext-smartypants\": \"^4.0.0\",\n \"rss\": \"^1.2.2\",\n \"tailwindcss\": \"^3.4.1\",\n \"typescript\": \"^5.7.2\",\n \"unist-util-visit\": \"^2.0.3\",\n \"webpack-bundle-analyzer\": \"^4.5.0\"\n },\n \"engines\": {\n \"node\": \">=16.8.0\"\n },\n \"nextBundleAnalysis\": {\n \"budget\": null,\n \"budgetPercentIncreaseRed\": 10,\n \"showDetails\": true\n },\n \"lint-staged\": {\n \"*.{js,ts,jsx,tsx,css}\": \"yarn prettier\",\n \"src/**/*.md\": [\"yarn fix-headings\", \"yarn textlint-staged --\"]\n },\n \"packageManager\": \"yarn@1.22.22\"\n}\n" }, { "path": "plugins/gatsby-remark-japanese-fix/index.js", "content": "const toString = require('mdast-util-to-string');\nconst visit = require('unist-util-visit');\n\nconst hasJapaneseCharacter = (str) => {\n // Detects katakana, hiragana, iteration marks, and CJK unified ideographs\n return /[\\u30a0-\\u30ff\\u3040-\\u309f\\u3005-\\u3006\\u4e00-\\u9fea。、]/.test(str);\n};\n\n/**\n * Iterates over emphases (<em>'s) within the AST created by remark.\n * Applies 'em-ja' class only when it contains a Japanese character,\n * so that it can be displayed with a different style.\n */\n\nmodule.exports = ({markdownAST}, options) => {\n visit(markdownAST, 'emphasis', (node) => {\n const nodeStr = toString(node);\n if (hasJapaneseCharacter(nodeStr)) {\n // Patch AST\n node.data = node.data || {};\n node.data.hProperties = node.data.hProperties || {};\n node.data.hProperties.class = 'em-ja';\n }\n });\n return markdownAST;\n};\n" }, { "path": "plugins/gatsby-remark-japanese-fix/package.json", "content": "{\n \"name\": \"gatsby-remark-japanese-fix\",\n \"version\": \"0.0.1\"\n}\n" }, { "path": "plugins/markdownToHtml.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst remark = require('remark');\nconst externalLinks = require('remark-external-links'); // Add _target and rel to external links\nconst customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n\nconst images = require('remark-images'); // Improved image syntax\nconst unrwapImages = require('remark-unwrap-images'); // Removes <p> wrapper around images\nconst smartyPants = require('./remark-smartypants'); // Cleans up typography\nconst html = require('remark-html');\n\nmodule.exports = {\n remarkPlugins: [\n externalLinks,\n customHeaders,\n images,\n unrwapImages,\n smartyPants,\n ],\n markdownToHtml,\n};\n\nasync function markdownToHtml(markdown) {\n const result = await remark()\n .use(externalLinks)\n .use(customHeaders)\n .use(images)\n .use(unrwapImages)\n .use(smartyPants)\n .use(html)\n .process(markdown);\n return result.toString();\n}\n" }, { "path": "plugins/remark-header-custom-ids.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*!\n * Based on 'gatsby-remark-autolink-headers'\n * Original Author: Kyle Mathews <mathews.kyle@gmail.com>\n * Updated by Jared Palmer;\n * Copyright (c) 2015 Gatsbyjs\n */\n\nconst toString = require('mdast-util-to-string');\nconst visit = require('unist-util-visit');\nconst toSlug = require('github-slugger').slug;\n\nfunction patch(context, key, value) {\n if (!context[key]) {\n context[key] = value;\n }\n return context[key];\n}\n\nconst svgIcon = `<svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>`;\n\nmodule.exports = ({icon = svgIcon, className = `anchor`} = {}) => {\n return function transformer(tree) {\n const ids = new Set();\n visit(tree, 'heading', (node) => {\n let children = [...node.children];\n let id;\n if (children[children.length - 1].type === 'mdxTextExpression') {\n // # My header {/*my-header*/}\n id = children.pop().value;\n const isValidCustomId = id.startsWith('/*') && id.endsWith('*/');\n if (!isValidCustomId) {\n throw Error(\n 'Expected header ID to be like: {/*some-header*/}. ' +\n 'Instead, received: ' +\n id\n );\n }\n id = id.slice(2, id.length - 2);\n if (id !== toSlug(id)) {\n throw Error(\n 'Expected header ID to be a valid slug. You specified: {/*' +\n id +\n '*/}. Replace it with: {/*' +\n toSlug(id) +\n '*/}'\n );\n }\n } else {\n // # My header\n id = toSlug(toString(node));\n }\n\n if (ids.has(id)) {\n throw Error(\n 'Cannot have a duplicate header with id \"' +\n id +\n '\" on the page. ' +\n 'Rename the section or give it an explicit unique ID. ' +\n 'For example: #### Arguments {/*setstate-arguments*/}'\n );\n }\n ids.add(id);\n\n const data = patch(node, 'data', {});\n patch(data, 'id', id);\n patch(data, 'htmlAttributes', {});\n patch(data, 'hProperties', {});\n patch(data.htmlAttributes, 'id', id);\n patch(data.hProperties, 'id', id);\n });\n };\n};\n" }, { "path": "plugins/remark-smartypants.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*!\n * Based on 'silvenon/remark-smartypants'\n * https://github.com/silvenon/remark-smartypants/pull/80\n */\n\nconst visit = require('unist-util-visit');\nconst retext = require('retext');\nconst smartypants = require('retext-smartypants');\n\nfunction check(node, parent) {\n if (node.data?.skipSmartyPants) return false;\n if (parent.tagName === 'script') return false;\n if (parent.tagName === 'style') return false;\n return true;\n}\n\nfunction markSkip(node) {\n if (!node) return;\n node.data ??= {};\n node.data.skipSmartyPants = true;\n if (Array.isArray(node.children)) {\n for (const child of node.children) {\n markSkip(child);\n }\n }\n}\n\nmodule.exports = function (options) {\n const processor = retext().use(smartypants, {\n ...options,\n // Do not replace ellipses, dashes, backticks because they change string\n // length, and we couldn't guarantee right splice of text in second visit of\n // tree\n ellipses: false,\n dashes: false,\n backticks: false,\n });\n\n const processor2 = retext().use(smartypants, {\n ...options,\n // Do not replace quotes because they are already replaced in the first\n // processor\n quotes: false,\n });\n\n function transformer(tree) {\n let allText = '';\n let startIndex = 0;\n const textOrInlineCodeNodes = [];\n\n visit(tree, 'mdxJsxFlowElement', (node) => {\n if (['TerminalBlock'].includes(node.name)) {\n markSkip(node); // Mark all children to skip smarty pants\n }\n });\n\n visit(tree, ['text', 'inlineCode'], (node, _, parent) => {\n if (check(node, parent)) {\n if (node.type === 'text') allText += node.value;\n // for the case when inlineCode contains just one part of quote: `foo'bar`\n else allText += 'A'.repeat(node.value.length);\n textOrInlineCodeNodes.push(node);\n }\n });\n\n // Concat all text into one string, to properly replace quotes around non-\"text\" nodes\n allText = String(processor.processSync(allText));\n\n for (const node of textOrInlineCodeNodes) {\n const endIndex = startIndex + node.value.length;\n if (node.type === 'text') {\n const processedText = allText.slice(startIndex, endIndex);\n node.value = String(processor2.processSync(processedText));\n }\n startIndex = endIndex;\n }\n }\n\n return transformer;\n};\n" }, { "path": "postcss.config.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n 'postcss-flexbugs-fixes': {},\n 'postcss-preset-env': {\n autoprefixer: {\n flexbox: 'no-2009',\n },\n stage: 3,\n features: {\n 'custom-properties': false,\n },\n },\n },\n};\n" }, { "path": "public/.well-known/atproto-did", "content": "did:plc:uorpbnp2q32vuvyeruwauyhe" }, { "path": "public/browserconfig.xml", "content": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square150x150logo src=\"/mstile-150x150.png\"/>\n <TileColor>#2b5797</TileColor>\n </tile>\n </msapplication>\n</browserconfig>\n" }, { "path": "public/html/single-file-example.html", "content": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n <title>Hello World\n \n \n\n \n \n \n \n
    \n \n \n \n\n" }, { "path": "public/js/jsfiddle-integration-babel.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n// Do not delete or move this file.\n// Many fiddles reference it so we have to keep it here.\n(function () {\n var tag = document.querySelector(\n 'script[type=\"application/javascript;version=1.7\"]'\n );\n if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {\n alert(\n 'Bad JSFiddle configuration, please fork the original React JSFiddle'\n );\n }\n tag.setAttribute('type', 'text/babel');\n tag.textContent = tag.textContent.replace(/^\\/\\/ {\n try {\n const result = processFile(file);\n if (result != null) {\n updatedFiles.set(file, result);\n }\n } catch (e) {\n console.error(e);\n hasErrors = true;\n }\n});\nif (hasErrors) {\n console.error('Update failed');\n process.exit(1);\n} else {\n for (const [file, source] of updatedFiles) {\n fs.writeFileSync(file, source, 'utf8');\n }\n console.log('Update complete');\n}\n\nfunction processFile(file) {\n if (fs.lstatSync(file).isDirectory()) {\n return;\n }\n let source = fs.readFileSync(file, 'utf8');\n let shebang = '';\n\n if (source.startsWith('#!')) {\n const newlineIndex = source.indexOf('\\n');\n if (newlineIndex === -1) {\n shebang = `${source}\\n`;\n source = '';\n } else {\n shebang = source.slice(0, newlineIndex + 1);\n source = source.slice(newlineIndex + 1);\n }\n }\n\n if (source.indexOf(META_COPYRIGHT_COMMENT_BLOCK) === 0) {\n return null;\n }\n if (/^\\/\\*\\*/.test(source)) {\n source = source.replace(/\\/\\*\\*[^\\/]+\\/\\s+/, META_COPYRIGHT_COMMENT_BLOCK);\n } else {\n source = `${META_COPYRIGHT_COMMENT_BLOCK}${source}`;\n }\n\n if (shebang) {\n return `${shebang}${source}`;\n }\n return source;\n}\n" }, { "path": "scripts/deadLinkChecker.js", "content": "#!/usr/bin/env node\n/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst fs = require('fs');\nconst path = require('path');\nconst globby = require('globby');\nconst chalk = require('chalk');\n\nconst CONTENT_DIR = path.join(__dirname, '../src/content');\nconst PUBLIC_DIR = path.join(__dirname, '../public');\nconst fileCache = new Map();\nconst anchorMap = new Map(); // Map>\nconst contributorMap = new Map(); // Map\nconst redirectMap = new Map(); // Map\nlet errorCodes = new Set();\n\nasync function readFileWithCache(filePath) {\n if (!fileCache.has(filePath)) {\n try {\n const content = await fs.promises.readFile(filePath, 'utf8');\n fileCache.set(filePath, content);\n } catch (error) {\n throw new Error(`Failed to read file ${filePath}: ${error.message}`);\n }\n }\n return fileCache.get(filePath);\n}\n\nasync function fileExists(filePath) {\n try {\n await fs.promises.access(filePath, fs.constants.R_OK);\n return true;\n } catch {\n return false;\n }\n}\n\nfunction getMarkdownFiles() {\n // Convert Windows paths to POSIX for globby compatibility\n const baseDir = CONTENT_DIR.replace(/\\\\/g, '/');\n const patterns = [\n path.posix.join(baseDir, '**/*.md'),\n path.posix.join(baseDir, '**/*.mdx'),\n ];\n return globby.sync(patterns);\n}\n\nfunction extractAnchorsFromContent(content) {\n const anchors = new Set();\n\n // MDX-style heading IDs: {/*anchor-id*/}\n const mdxPattern = /\\{\\/\\*([a-zA-Z0-9-_]+)\\*\\/\\}/g;\n let match;\n while ((match = mdxPattern.exec(content)) !== null) {\n anchors.add(match[1].toLowerCase());\n }\n\n // HTML id attributes\n const htmlIdPattern = /\\sid=[\"']([a-zA-Z0-9-_]+)[\"']/g;\n while ((match = htmlIdPattern.exec(content)) !== null) {\n anchors.add(match[1].toLowerCase());\n }\n\n // Markdown heading with explicit ID: ## Heading {#anchor-id}\n const markdownHeadingPattern = /^#+\\s+.*\\{#([a-zA-Z0-9-_]+)\\}/gm;\n while ((match = markdownHeadingPattern.exec(content)) !== null) {\n anchors.add(match[1].toLowerCase());\n }\n\n return anchors;\n}\n\nasync function buildAnchorMap(files) {\n for (const filePath of files) {\n const content = await readFileWithCache(filePath);\n const anchors = extractAnchorsFromContent(content);\n if (anchors.size > 0) {\n anchorMap.set(filePath, anchors);\n }\n }\n}\n\nfunction extractLinksFromContent(content) {\n const linkPattern = /\\[([^\\]]*)\\]\\(([^)]+)\\)/g;\n const links = [];\n let match;\n\n while ((match = linkPattern.exec(content)) !== null) {\n const [, linkText, linkUrl] = match;\n if (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) {\n const lines = content.substring(0, match.index).split('\\n');\n const line = lines.length;\n const lastLineStart =\n lines.length > 1 ? content.lastIndexOf('\\n', match.index - 1) + 1 : 0;\n const column = match.index - lastLineStart + 1;\n\n links.push({\n text: linkText,\n url: linkUrl,\n line,\n column,\n });\n }\n }\n\n return links;\n}\n\nasync function findTargetFile(urlPath) {\n // Check if it's an image or static asset that might be in the public directory\n const imageExtensions = [\n '.png',\n '.jpg',\n '.jpeg',\n '.gif',\n '.svg',\n '.ico',\n '.webp',\n ];\n const hasImageExtension = imageExtensions.some((ext) =>\n urlPath.toLowerCase().endsWith(ext)\n );\n\n if (hasImageExtension || urlPath.includes('.')) {\n // Check in public directory (with and without leading slash)\n const publicPaths = [\n path.join(PUBLIC_DIR, urlPath),\n path.join(PUBLIC_DIR, urlPath.substring(1)),\n ];\n\n for (const p of publicPaths) {\n if (await fileExists(p)) {\n return p;\n }\n }\n }\n\n const possiblePaths = [\n path.join(CONTENT_DIR, urlPath + '.md'),\n path.join(CONTENT_DIR, urlPath + '.mdx'),\n path.join(CONTENT_DIR, urlPath, 'index.md'),\n path.join(CONTENT_DIR, urlPath, 'index.mdx'),\n // Without leading slash\n path.join(CONTENT_DIR, urlPath.substring(1) + '.md'),\n path.join(CONTENT_DIR, urlPath.substring(1) + '.mdx'),\n path.join(CONTENT_DIR, urlPath.substring(1), 'index.md'),\n path.join(CONTENT_DIR, urlPath.substring(1), 'index.mdx'),\n ];\n\n for (const p of possiblePaths) {\n if (await fileExists(p)) {\n return p;\n }\n }\n return null;\n}\n\nasync function validateLink(link) {\n const urlAnchorPattern = /#([a-zA-Z0-9-_]+)$/;\n const anchorMatch = link.url.match(urlAnchorPattern);\n const urlWithoutAnchor = link.url.replace(urlAnchorPattern, '');\n\n if (urlWithoutAnchor === '/') {\n return {valid: true};\n }\n\n // Check for redirects\n if (redirectMap.has(urlWithoutAnchor)) {\n const redirectDestination = redirectMap.get(urlWithoutAnchor);\n if (\n redirectDestination.startsWith('http://') ||\n redirectDestination.startsWith('https://')\n ) {\n return {valid: true};\n }\n const redirectedLink = {\n ...link,\n url: redirectDestination + (anchorMatch ? anchorMatch[0] : ''),\n };\n return validateLink(redirectedLink);\n }\n\n // Check if it's an error code link\n const errorCodeMatch = urlWithoutAnchor.match(/^\\/errors\\/(\\d+)$/);\n if (errorCodeMatch) {\n const code = errorCodeMatch[1];\n if (!errorCodes.has(code)) {\n return {\n valid: false,\n reason: `Error code ${code} not found in React error codes`,\n };\n }\n return {valid: true};\n }\n\n // Check if it's a contributor link on the team or acknowledgements page\n if (\n anchorMatch &&\n (urlWithoutAnchor === '/community/team' ||\n urlWithoutAnchor === '/community/acknowledgements')\n ) {\n const anchorId = anchorMatch[1].toLowerCase();\n if (contributorMap.has(anchorId)) {\n const correctUrl = contributorMap.get(anchorId);\n if (correctUrl !== link.url) {\n return {\n valid: false,\n reason: `Contributor link should be updated to: ${correctUrl}`,\n };\n }\n return {valid: true};\n } else {\n return {\n valid: false,\n reason: `Contributor link not found`,\n };\n }\n }\n\n const targetFile = await findTargetFile(urlWithoutAnchor);\n\n if (!targetFile) {\n return {\n valid: false,\n reason: `Target file not found for: ${urlWithoutAnchor}`,\n };\n }\n\n // Only check anchors for content files, not static assets\n if (anchorMatch && targetFile.startsWith(CONTENT_DIR)) {\n const anchorId = anchorMatch[1].toLowerCase();\n\n // TODO handle more special cases. These are usually from custom MDX components that include\n // a Heading from src/components/MDX/Heading.tsx which automatically injects an anchor tag.\n switch (anchorId) {\n case 'challenges':\n case 'recap': {\n return {valid: true};\n }\n }\n\n const fileAnchors = anchorMap.get(targetFile);\n\n if (!fileAnchors || !fileAnchors.has(anchorId)) {\n return {\n valid: false,\n reason: `Anchor #${anchorMatch[1]} not found in ${path.relative(\n CONTENT_DIR,\n targetFile\n )}`,\n };\n }\n }\n\n return {valid: true};\n}\n\nasync function processFile(filePath) {\n const content = await readFileWithCache(filePath);\n const links = extractLinksFromContent(content);\n const deadLinks = [];\n\n for (const link of links) {\n const result = await validateLink(link);\n if (!result.valid) {\n deadLinks.push({\n file: path.relative(process.cwd(), filePath),\n line: link.line,\n column: link.column,\n text: link.text,\n url: link.url,\n reason: result.reason,\n });\n }\n }\n\n return {deadLinks, totalLinks: links.length};\n}\n\nasync function buildContributorMap() {\n const teamFile = path.join(CONTENT_DIR, 'community/team.md');\n const teamContent = await readFileWithCache(teamFile);\n\n const teamMemberPattern = /]*permalink=[\"']([^\"']+)[\"']/g;\n let match;\n\n while ((match = teamMemberPattern.exec(teamContent)) !== null) {\n const permalink = match[1];\n contributorMap.set(permalink, `/community/team#${permalink}`);\n }\n\n const ackFile = path.join(CONTENT_DIR, 'community/acknowledgements.md');\n const ackContent = await readFileWithCache(ackFile);\n const contributorPattern = /\\*\\s*\\[([^\\]]+)\\]\\(([^)]+)\\)/g;\n\n while ((match = contributorPattern.exec(ackContent)) !== null) {\n const name = match[1];\n const url = match[2];\n const hyphenatedName = name.toLowerCase().replace(/\\s+/g, '-');\n if (!contributorMap.has(hyphenatedName)) {\n contributorMap.set(hyphenatedName, url);\n }\n }\n}\n\nasync function fetchErrorCodes() {\n try {\n const response = await fetch(\n 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'\n );\n if (!response.ok) {\n throw new Error(`Failed to fetch error codes: ${response.status}`);\n }\n const codes = await response.json();\n errorCodes = new Set(Object.keys(codes));\n console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));\n } catch (error) {\n throw new Error(`Failed to fetch error codes: ${error.message}`);\n }\n}\n\nasync function buildRedirectsMap() {\n try {\n const vercelConfigPath = path.join(__dirname, '../vercel.json');\n const vercelConfig = JSON.parse(\n await fs.promises.readFile(vercelConfigPath, 'utf8')\n );\n\n if (vercelConfig.redirects) {\n for (const redirect of vercelConfig.redirects) {\n redirectMap.set(redirect.source, redirect.destination);\n }\n console.log(\n chalk.gray(`Loaded ${redirectMap.size} redirects from vercel.json`)\n );\n }\n } catch (error) {\n console.log(\n chalk.yellow(\n `Warning: Could not load redirects from vercel.json: ${error.message}\\n`\n )\n );\n }\n}\n\nasync function main() {\n const files = getMarkdownFiles();\n console.log(chalk.gray(`Checking ${files.length} markdown files...`));\n\n await fetchErrorCodes();\n await buildRedirectsMap();\n await buildContributorMap();\n await buildAnchorMap(files);\n\n const filePromises = files.map((filePath) => processFile(filePath));\n const results = await Promise.all(filePromises);\n const deadLinks = results.flatMap((r) => r.deadLinks);\n const totalLinks = results.reduce((sum, r) => sum + r.totalLinks, 0);\n\n if (deadLinks.length > 0) {\n console.log('\\n');\n for (const link of deadLinks) {\n console.log(chalk.yellow(`${link.file}:${link.line}:${link.column}`));\n console.log(chalk.reset(` Link text: ${link.text}`));\n console.log(chalk.reset(` URL: ${link.url}`));\n console.log(` ${chalk.red('✗')} ${chalk.red(link.reason)}\\n`);\n }\n\n console.log(\n chalk.red(\n `\\nFound ${deadLinks.length} dead link${\n deadLinks.length > 1 ? 's' : ''\n } out of ${totalLinks} total links\\n`\n )\n );\n process.exit(1);\n }\n\n console.log(chalk.green(`\\n✓ All ${totalLinks} links are valid!\\n`));\n process.exit(0);\n}\n\nmain().catch((error) => {\n console.log(chalk.red(`Error: ${error.message}`));\n process.exit(1);\n});\n" }, { "path": "scripts/downloadFonts.mjs", "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport { exec } from 'child_process';\nimport { mkdir, promises as fsPromises } from 'fs';\nimport { dirname } from 'path';\nimport { promisify } from 'util';\n\nconst execAsync = promisify(exec);\n\n// Taken from Downloads on https://www.facebook.com/brand/meta/typography/.\n// To refresh the list, go to the Conf website's public/fonts/ folder and run this:\n// printf \"\\n[\\n%s\\n]\\n\" \"$(find . -type f ! -path \"*/.*\" -name \"*.woff2\" | sed 's|^./||' | sort | awk '{printf \" \\\"%s\\\",\\n\", $0}' | sed '$s/,$//')\"\nconst paths = [\n \"Optimistic_Display_Arbc_W_Bd.woff2\",\n \"Optimistic_Display_Arbc_W_Md.woff2\",\n \"Optimistic_Display_Arbc_W_SBd.woff2\",\n \"Optimistic_Display_Cyrl_W_Bd.woff2\",\n \"Optimistic_Display_Cyrl_W_Md.woff2\",\n \"Optimistic_Display_Cyrl_W_SBd.woff2\",\n \"Optimistic_Display_Deva_W_Bd.woff2\",\n \"Optimistic_Display_Deva_W_Md.woff2\",\n \"Optimistic_Display_Deva_W_SBd.woff2\",\n \"Optimistic_Display_Viet_W_Bd.woff2\",\n \"Optimistic_Display_Viet_W_Md.woff2\",\n \"Optimistic_Display_Viet_W_SBd.woff2\",\n \"Optimistic_Display_W_Bd.woff2\",\n \"Optimistic_Display_W_BdIt.woff2\",\n \"Optimistic_Display_W_Lt.woff2\",\n \"Optimistic_Display_W_Md.woff2\",\n \"Optimistic_Display_W_MdIt.woff2\",\n \"Optimistic_Display_W_SBd.woff2\",\n \"Optimistic_Display_W_SBdIt.woff2\",\n \"Optimistic_Display_W_XBd.woff2\",\n \"Optimistic_Display_W_XLt.woff2\",\n \"Optimistic_Text_Arbc_W_Bd.woff2\",\n \"Optimistic_Text_Arbc_W_Md.woff2\",\n \"Optimistic_Text_Arbc_W_Rg.woff2\",\n \"Optimistic_Text_Arbc_W_XBd.woff2\",\n \"Optimistic_Text_Cyrl_W_Bd.woff2\",\n \"Optimistic_Text_Cyrl_W_Md.woff2\",\n \"Optimistic_Text_Cyrl_W_Rg.woff2\",\n \"Optimistic_Text_Cyrl_W_XBd.woff2\",\n \"Optimistic_Text_Deva_W_Bd.woff2\",\n \"Optimistic_Text_Deva_W_Md.woff2\",\n \"Optimistic_Text_Deva_W_Rg.woff2\",\n \"Optimistic_Text_Deva_W_XBd.woff2\",\n \"Optimistic_Text_Viet_W_Bd.woff2\",\n \"Optimistic_Text_Viet_W_Md.woff2\",\n \"Optimistic_Text_Viet_W_Rg.woff2\",\n \"Optimistic_Text_Viet_W_XBd.woff2\",\n \"Optimistic_Text_W_Bd.woff2\",\n \"Optimistic_Text_W_BdIt.woff2\",\n \"Optimistic_Text_W_It.woff2\",\n \"Optimistic_Text_W_Md.woff2\",\n \"Optimistic_Text_W_MdIt.woff2\",\n \"Optimistic_Text_W_Rg.woff2\",\n \"Optimistic_Text_W_XBd.woff2\",\n \"Optimistic_Text_W_XBdIt.woff2\"\n];\n\nconst baseURL = \"https://conf.reactjs.org/fonts/\";\nconst outputDir = \"public/fonts/\";\n\nawait Promise.all(\n paths.map(async (path) => {\n const localPath = `${outputDir}${path}`;\n const localDir = dirname(localPath);\n await fsPromises.mkdir(localDir, { recursive: true });\n\n const command = `curl ${baseURL}${path} --output ${localPath}`;\n await execAsync(command);\n console.log(`Downloaded ${path}`);\n })\n);\n\nconsole.log(\"All fonts downloaded.\");\n" }, { "path": "scripts/generateRss.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\nconst {generateRssFeed} = require('../src/utils/rss');\n\ngenerateRssFeed();\n" }, { "path": "scripts/headingIDHelpers/generateHeadingIDs.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n// To do: Make this ESM.\n// To do: properly check heading numbers (headings with the same text get\n// numbered, this script doesn’t check that).\n\nconst assert = require('assert');\nconst fs = require('fs');\nconst GithubSlugger = require('github-slugger');\nconst walk = require('./walk');\n\nlet modules;\n\nfunction stripLinks(line) {\n return line.replace(/\\[([^\\]]+)\\]\\([^)]+\\)/, (match, p1) => p1);\n}\n\nfunction addHeaderID(line, slugger) {\n // check if we're a header at all\n if (!line.startsWith('#')) {\n return line;\n }\n\n const match =\n /^(#+\\s+)(.+?)(\\s*\\{(?:\\/\\*|#)([^\\}\\*\\/]+)(?:\\*\\/)?\\}\\s*)?$/.exec(line);\n const before = match[1] + match[2];\n const proc = modules\n .unified()\n .use(modules.remarkParse)\n .use(modules.remarkSlug);\n const tree = proc.runSync(proc.parse(before));\n const head = tree.children[0];\n assert(\n head && head.type === 'heading',\n 'expected `' +\n before +\n '` to be a heading, is it using a normal space after `#`?'\n );\n const autoId = head.data.id;\n const existingId = match[4];\n const id = existingId || autoId;\n // Ignore numbers:\n const cleanExisting = existingId\n ? existingId.replace(/-\\d+$/, '')\n : undefined;\n const cleanAuto = autoId.replace(/-\\d+$/, '');\n\n if (cleanExisting && cleanExisting !== cleanAuto) {\n console.log(\n 'Note: heading `%s` has a different ID (`%s`) than what GH generates for it: `%s`:',\n before,\n existingId,\n autoId\n );\n }\n\n return match[1] + match[2] + ' {/*' + id + '*/}';\n}\n\nfunction addHeaderIDs(lines) {\n // Sluggers should be per file\n const slugger = new GithubSlugger();\n let inCode = false;\n const results = [];\n lines.forEach((line) => {\n // Ignore code blocks\n if (line.startsWith('```')) {\n inCode = !inCode;\n results.push(line);\n return;\n }\n if (inCode) {\n results.push(line);\n return;\n }\n\n results.push(addHeaderID(line, slugger));\n });\n return results;\n}\n\nasync function main(paths) {\n paths = paths.length === 0 ? ['src/content'] : paths;\n\n const [unifiedMod, remarkParseMod, remarkSlugMod] = await Promise.all([\n import('unified'),\n import('remark-parse'),\n import('remark-slug'),\n ]);\n const unified = unifiedMod.unified;\n const remarkParse = remarkParseMod.default;\n const remarkSlug = remarkSlugMod.default;\n modules = {unified, remarkParse, remarkSlug};\n const files = paths.map((path) => [...walk(path)]).flat();\n\n files.forEach((file) => {\n if (!(file.endsWith('.md') || file.endsWith('.mdx'))) {\n return;\n }\n\n const content = fs.readFileSync(file, 'utf8');\n const lines = content.split('\\n');\n const updatedLines = addHeaderIDs(lines);\n fs.writeFileSync(file, updatedLines.join('\\n'));\n });\n}\n\nmodule.exports = main;\n" }, { "path": "scripts/headingIDHelpers/validateHeadingIDs.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst fs = require('fs');\nconst walk = require('./walk');\n\n/**\n * Validate if there is a custom heading id and exit if there isn't a heading\n * @param {string} line\n * @returns\n */\nfunction validateHeaderId(line) {\n if (!line.startsWith('#')) {\n return;\n }\n\n const match = /\\{\\/\\*(.*?)\\*\\/}/.exec(line);\n const id = match;\n if (!id) {\n console.error('Run yarn fix-headings to generate headings.');\n process.exit(1);\n }\n}\n\n/**\n * Loops through the lines to skip code blocks\n * @param {Array} lines\n */\nfunction validateHeaderIds(lines) {\n let inCode = false;\n const results = [];\n lines.forEach((line) => {\n // Ignore code blocks\n if (line.startsWith('```')) {\n inCode = !inCode;\n\n results.push(line);\n return;\n }\n if (inCode) {\n results.push(line);\n return;\n }\n validateHeaderId(line);\n });\n}\n/**\n * paths are basically array of path for which we have to validate heading IDs\n * @param {Array} paths\n */\nasync function main(paths) {\n paths = paths.length === 0 ? ['src/content'] : paths;\n const files = paths.map((path) => [...walk(path)]).flat();\n\n files.forEach((file) => {\n if (!(file.endsWith('.md') || file.endsWith('.mdx'))) {\n return;\n }\n\n const content = fs.readFileSync(file, 'utf8');\n const lines = content.split('\\n');\n validateHeaderIds(lines);\n });\n}\n\nmodule.exports = main;\n" }, { "path": "scripts/headingIDHelpers/walk.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst fs = require('fs');\n\nmodule.exports = function walk(dir) {\n let results = [];\n /**\n * If the param is a directory we can return the file\n */\n if (dir.includes('md')) {\n return [dir];\n }\n const list = fs.readdirSync(dir);\n list.forEach(function (file) {\n file = dir + '/' + file;\n const stat = fs.statSync(file);\n if (stat && stat.isDirectory()) {\n /* Recurse into a subdirectory */\n results = results.concat(walk(file));\n } else {\n /* Is a file */\n results.push(file);\n }\n });\n return results;\n};\n" }, { "path": "scripts/headingIdLinter.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nconst validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs');\nconst generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs');\n\n/**\n * yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing\n * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs\n * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file)\n * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file)\n */\n\nconst markdownPaths = process.argv.slice(2);\nif (markdownPaths.includes('--fix')) {\n generateHeadingIds(markdownPaths.filter((path) => path !== '--fix'));\n} else {\n validateHeaderIds(markdownPaths);\n}\n" }, { "path": "src/components/Breadcrumbs.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Fragment} from 'react';\nimport Link from 'next/link';\nimport type {RouteItem} from 'components/Layout/getRouteMeta';\n\nfunction Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {\n return (\n
    \n {breadcrumbs.map(\n (crumb, i) =>\n crumb.path &&\n !crumb.skipBreadcrumb && (\n
    \n \n \n {crumb.title}\n \n \n \n \n \n \n \n
    \n )\n )}\n
    \n );\n}\n\nexport default Breadcrumbs;\n" }, { "path": "src/components/Button.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport cn from 'classnames';\n\ninterface ButtonProps {\n children: React.ReactNode;\n onClick?: (event: React.MouseEvent) => void;\n active?: boolean;\n className?: string;\n style?: Record;\n}\n\nexport function Button({\n children,\n onClick,\n active = false,\n className,\n style,\n}: ButtonProps) {\n return (\n {\n evt.preventDefault();\n evt.stopPropagation();\n }}\n onClick={onClick}\n className={cn(\n className,\n 'text-base leading-tight font-bold rounded-full py-2 px-4 focus:outline focus:outline-offset-2 focus:outline-link dark:focus:outline-link-dark inline-flex items-center my-1',\n {\n 'bg-link border-link text-white hover:bg-link focus:bg-link active:bg-link':\n active,\n 'bg-transparent text-primary dark:text-primary-dark active:text-primary shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':\n !active,\n }\n )}>\n {children}\n \n );\n}\n\nexport default Button;\n" }, { "path": "src/components/ButtonLink.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport cn from 'classnames';\nimport NextLink from 'next/link';\n\ninterface ButtonLinkProps {\n size?: 'md' | 'lg';\n type?: 'primary' | 'secondary';\n label?: string;\n target?: '_self' | '_blank';\n}\n\nfunction ButtonLink({\n href,\n className,\n children,\n type = 'primary',\n size = 'md',\n label,\n target = '_self',\n ...props\n}: React.AnchorHTMLAttributes & ButtonLinkProps) {\n const classes = cn(\n className,\n 'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',\n {\n 'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':\n type === 'primary',\n 'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':\n type === 'secondary',\n 'text-lg py-3 rounded-full px-4 sm:px-6': size === 'lg',\n 'text-base rounded-full px-4 py-2': size === 'md',\n }\n );\n return (\n \n {children}\n \n );\n}\n\nexport default ButtonLink;\n" }, { "path": "src/components/DocsFooter.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport NextLink from 'next/link';\nimport {memo} from 'react';\nimport cn from 'classnames';\nimport {IconNavArrow} from './Icon/IconNavArrow';\nimport type {RouteMeta} from './Layout/getRouteMeta';\n\nexport type DocsPageFooterProps = Pick<\n RouteMeta,\n 'route' | 'nextRoute' | 'prevRoute'\n>;\n\nfunction areEqual(prevProps: DocsPageFooterProps, props: DocsPageFooterProps) {\n return prevProps.route?.path === props.route?.path;\n}\n\nexport const DocsPageFooter = memo(\n function DocsPageFooter({nextRoute, prevRoute, route}) {\n if (!route || route?.heading) {\n return null;\n }\n\n return (\n <>\n {prevRoute?.path || nextRoute?.path ? (\n <>\n
    \n {prevRoute?.path ? (\n \n ) : (\n
    \n )}\n\n {nextRoute?.path ? (\n \n ) : (\n
    \n )}\n
    \n \n ) : null}\n \n );\n },\n areEqual\n);\n\nfunction FooterLink({\n href,\n title,\n type,\n}: {\n href: string;\n title: string;\n type: 'Previous' | 'Next';\n}) {\n return (\n \n \n
    \n \n {type === 'Previous' ? 'Previous' : 'Next'}\n \n \n {title}\n \n
    \n \n );\n}\n" }, { "path": "src/components/ErrorDecoderContext.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n// Error Decoder requires reading pregenerated error message from getStaticProps,\n// but MDX component doesn't support props. So we use React Context to populate\n// the value without prop-drilling.\n// TODO: Replace with React.cache + React.use when migrating to Next.js App Router\n\nimport {createContext, useContext} from 'react';\n\nconst notInErrorDecoderContext = Symbol('not in error decoder context');\n\nexport const ErrorDecoderContext = createContext<\n | {errorMessage: string | null; errorCode: string | null}\n | typeof notInErrorDecoderContext\n>(notInErrorDecoderContext);\n\nexport const useErrorDecoderParams = () => {\n const params = useContext(ErrorDecoderContext);\n\n if (params === notInErrorDecoderContext) {\n throw new Error('useErrorDecoder must be used in error decoder pages only');\n }\n\n return params;\n};\n" }, { "path": "src/components/ExternalLink.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\nimport type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react';\n\nexport function ExternalLink({\n href,\n target,\n children,\n ...props\n}: DetailedHTMLProps<\n AnchorHTMLAttributes,\n HTMLAnchorElement\n>) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/Icon/IconArrow.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport cn from 'classnames';\nimport type {SVGProps} from 'react';\n\nexport const IconArrow = memo<\n SVGProps & {\n /**\n * The direction the arrow should point.\n * `start` and `end` are relative to the current locale.\n * for example, in LTR, `start` is left and `end` is right.\n */\n displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';\n }\n>(function IconArrow({displayDirection, className, ...rest}) {\n return (\n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconArrowSmall.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport cn from 'classnames';\nimport type {SVGProps} from 'react';\n\nexport const IconArrowSmall = memo<\n SVGProps & {\n /**\n * The direction the arrow should point.\n * `start` and `end` are relative to the current locale.\n * for example, in LTR, `start` is left and `end` is right.\n */\n displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';\n }\n>(function IconArrowSmall({displayDirection, className, ...rest}) {\n const classes = cn(className, {\n 'rotate-180': displayDirection === 'left',\n 'rotate-180 rtl:rotate-0': displayDirection === 'start',\n 'rtl:rotate-180': displayDirection === 'end',\n 'rotate-90': displayDirection === 'down',\n });\n return (\n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconBsky.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconBsky = memo>(function IconBsky(props) {\n return (\n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconCanary.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconCanary = memo<\n JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}\n>(function IconCanary(\n {className, title, size} = {\n className: undefined,\n title: undefined,\n size: 'md',\n }\n) {\n return (\n \n {title && {title}}\n \n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconChevron.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport cn from 'classnames';\n\nexport const IconChevron = memo<\n JSX.IntrinsicElements['svg'] & {\n /**\n * The direction the arrow should point.\n * `start` and `end` are relative to the current locale.\n * for example, in LTR, `start` is left and `end` is right.\n */\n displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';\n }\n>(function IconChevron({className, displayDirection}) {\n const classes = cn(\n {\n 'rotate-0': displayDirection === 'down',\n 'rotate-90': displayDirection === 'left',\n 'rotate-180': displayDirection === 'up',\n '-rotate-90': displayDirection === 'right',\n 'rotate-90 rtl:-rotate-90': displayDirection === 'start',\n '-rotate-90 rtl:rotate-90': displayDirection === 'end',\n },\n className\n );\n return (\n \n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconClose.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconClose = memo>(function IconClose(\n props\n) {\n return (\n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconCodeBlock.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconCodeBlock = memo(\n function IconCodeBlock({className}) {\n return (\n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconCopy.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconCopy = memo(function IconCopy({\n className,\n}) {\n return (\n \n {' '}\n \n \n );\n});\n" }, { "path": "src/components/Icon/IconDeepDive.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconDeepDive = memo(\n function IconDeepDive({className}) {\n return (\n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconDownload.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconDownload = memo(\n function IconDownload({className}) {\n return (\n \n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconError.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconError = memo(function IconError({\n className,\n}) {\n return (\n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconExperimental.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconExperimental = memo<\n JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}\n>(function IconExperimental(\n {className, title, size} = {\n className: undefined,\n title: undefined,\n size: 'md',\n }\n) {\n return (\n \n {title && {title}}\n \n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconFacebookCircle.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconFacebookCircle = memo>(\n function IconFacebookCircle(props) {\n return (\n \n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconGitHub.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconGitHub = memo>(function IconGitHub(\n props\n) {\n return (\n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconHamburger.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconHamburger = memo>(\n function IconHamburger(props) {\n return (\n \n \n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconHint.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport cn from 'classnames';\n\nexport const IconHint = memo(function IconHint({\n className,\n}) {\n return (\n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconInstagram.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconInstagram = memo>(\n function IconInstagram(props) {\n return (\n \n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconLink.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconLink = memo>(function IconLink(props) {\n return (\n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconNavArrow.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport cn from 'classnames';\n\nexport const IconNavArrow = memo<\n JSX.IntrinsicElements['svg'] & {\n /**\n * The direction the arrow should point.\n * `start` and `end` are relative to the current locale.\n * for example, in LTR, `start` is left and `end` is right.\n */\n displayDirection: 'start' | 'end' | 'right' | 'left' | 'down';\n }\n>(function IconNavArrow({displayDirection = 'start', className}) {\n const classes = cn(\n 'duration-100 ease-in transition',\n {\n 'rotate-0': displayDirection === 'down',\n 'rotate-90': displayDirection === 'left',\n '-rotate-90': displayDirection === 'right',\n 'rotate-90 rtl:-rotate-90': displayDirection === 'start',\n '-rotate-90 rtl:rotate-90': displayDirection === 'end',\n },\n className\n );\n\n return (\n \n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconNewPage.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconNewPage = memo>(function IconNewPage(\n props\n) {\n return (\n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconNote.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconNote = memo(function IconNote({\n className,\n}) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconPitfall.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconPitfall = memo(\n function IconPitfall({className}) {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconRestart.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconRestart = memo(\n function IconRestart({className}) {\n return (\n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconRocket.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconRocket = memo<\n JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}\n>(function IconRocket({className, size = 'md'}) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconRss.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconRss = memo>(function IconRss(props) {\n return (\n \n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconSearch.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconSearch = memo>(function IconSearch(\n props\n) {\n return (\n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconSolution.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport cn from 'classnames';\n\nexport const IconSolution = memo(\n function IconSolution({className}) {\n return (\n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconTerminal.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconTerminal = memo(\n function IconTerminal({className}) {\n return (\n \n \n \n );\n }\n);\n" }, { "path": "src/components/Icon/IconThreads.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconThreads = memo>(function IconThreads(\n props\n) {\n return (\n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconTwitter.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\nimport type {SVGProps} from 'react';\n\nexport const IconTwitter = memo>(function IconTwitter(\n props\n) {\n return (\n \n \n \n \n );\n});\n" }, { "path": "src/components/Icon/IconWarning.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {memo} from 'react';\n\nexport const IconWarning = memo(\n function IconWarning({className}) {\n return (\n \n \n \n \n \n );\n }\n);\n" }, { "path": "src/components/Layout/Footer.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport NextLink from 'next/link';\nimport cn from 'classnames';\nimport {ExternalLink} from 'components/ExternalLink';\nimport {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';\nimport {IconTwitter} from 'components/Icon/IconTwitter';\nimport {IconBsky} from 'components/Icon/IconBsky';\nimport {IconGitHub} from 'components/Icon/IconGitHub';\n\nexport function Footer() {\n const socialLinkClasses = 'hover:text-primary dark:text-primary-dark';\n return (\n
    \n
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n \n\n \n Copyright © Meta Platforms, Inc\n
    \n {\n // @ts-ignore\n window.__setUwu(false);\n }}>\n no uwu plz\n
    \n {\n // @ts-ignore\n window.__setUwu(true);\n }}>\n uwu?\n
    \n
    \n Logo by\n \n @sawaratsuki1004\n \n
    \n
    \n
    \n \n React を学ぶ\n \n クイックスタート\n インストール\n UI の記述\n \n インタラクティビティの追加\n \n state の管理\n 避難ハッチ\n
    \n
    \n \n API リファレンス\n \n React APIs\n React DOM APIs\n
    \n
    \n \n コミュニティ\n \n \n 行動規範\n \n チーム紹介\n \n ドキュメント貢献者\n \n 謝辞\n
    \n
    \n More\n ブログ\n React Native\n \n プライバシー\n \n \n 利用規約\n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n );\n}\n\nfunction FooterLink({\n href,\n children,\n isHeader = false,\n}: {\n href?: string;\n children: React.ReactNode;\n isHeader?: boolean;\n}) {\n const classes = cn('border-b inline-block border-transparent', {\n 'text-sm text-primary dark:text-primary-dark': !isHeader,\n 'text-md text-secondary dark:text-secondary-dark my-2 font-bold': isHeader,\n 'hover:border-gray-10': href,\n });\n\n if (!href) {\n return
    {children}
    ;\n }\n\n if (href.startsWith('https://')) {\n return (\n
    \n \n {children}\n \n
    \n );\n }\n\n return (\n
    \n \n {children}\n \n
    \n );\n}\n" }, { "path": "src/components/Layout/HomeContent.js", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {\n createContext,\n memo,\n useState,\n useContext,\n useId,\n Suspense,\n useEffect,\n useRef,\n useTransition,\n} from 'react';\nimport cn from 'classnames';\nimport NextLink from 'next/link';\n\nimport ButtonLink from '../ButtonLink';\nimport {IconRestart} from '../Icon/IconRestart';\nimport BlogCard from 'components/MDX/BlogCard';\nimport {IconChevron} from 'components/Icon/IconChevron';\nimport {IconSearch} from 'components/Icon/IconSearch';\nimport {Logo} from 'components/Logo';\nimport Link from 'components/MDX/Link';\nimport CodeBlock from 'components/MDX/CodeBlock';\nimport {ExternalLink} from 'components/ExternalLink';\nimport sidebarBlog from '../../sidebarBlog.json';\nimport * as React from 'react';\nimport Image from 'next/image';\n\nfunction Section({children, background = null}) {\n return (\n \n
    \n {children}\n
    \n \n );\n}\n\nfunction Header({children}) {\n // \"lg:max-w-xl\" has been removed in Japanese version\n return (\n

    \n {children}\n

    \n );\n}\n\nfunction Para({children}) {\n return (\n

    \n {children}\n

    \n );\n}\n\nfunction Center({children}) {\n return (\n
    \n {children}\n
    \n );\n}\n\nfunction FullBleed({children}) {\n return (\n
    {children}
    \n );\n}\n\nfunction CurrentTime() {\n const [date, setDate] = useState(new Date());\n const currentTime = date.toLocaleTimeString([], {\n hour: 'numeric',\n minute: 'numeric',\n });\n useEffect(() => {\n const msPerMinute = 60 * 1000;\n let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;\n\n const timeout = setTimeout(() => {\n if (Date.now() > nextMinute) {\n setDate(new Date());\n }\n }, nextMinute - Date.now());\n return () => clearTimeout(timeout);\n }, [date]);\n\n return {currentTime};\n}\n\nconst blogSidebar = sidebarBlog.routes[1];\nif (blogSidebar.path !== '/blog') {\n throw Error('Could not find the blog route in sidebarBlog.json');\n}\nconst recentPosts = blogSidebar.routes.slice(0, 4).map((entry) => ({\n title: entry.titleForHomepage,\n icon: entry.icon,\n date: entry.date,\n url: entry.path,\n}));\n\nexport function HomeContent() {\n return (\n <>\n
    \n
    \n
    \n \n
    \n \n

    \n React\n

    \n

    \n Web とネイティブユーザインターフェースのためのライブラリ\n

    \n
    \n \n React を学ぶ\n \n \n API リファレンス\n \n
    \n
    \n\n
    \n
    \n
    \n コンポーネントから\n
    \n ユーザインターフェースを作成\n
    \n \n React ではユーザインターフェースを、{''}\n コンポーネントと呼ばれる部品を使って構築できます。\n Thumbnail、LikeButton、\n Video\n といった React コンポーネントを書き、{''}\n それらを組み合わせて画面やページやアプリの全体を組み立てましょう。\n \n
    \n \n \n \n
    \n \n 独りで開発していても、数千の開発者と共同開発していても、{''}\n React の開発体験は同じです。個人、チーム、大規模な組織によって{''}\n 書かれたさまざまなコンポーネントを、シームレスに組み合わせながら\n {''}\n 開発できる。それが React の設計理念です。\n \n
    \n
    \n\n
    \n
    \n
    \n マークアップとコードから\n
    \n コンポーネントを作成\n
    \n \n React コンポーネントは単なる JavaScript の関数です。{''}\n 条件によってコンテンツの表示を変えたければ if{' '}\n 文を使いましょう！ リストを表示したいなら配列の map(){' '}\n を使いましょう！ React\n を学ぶということは、プログラミングを学ぶということなのです。\n \n
    \n \n \n \n
    \n \n このマークアップ構文は JSX と呼ばれます。React が普及させた\n JavaScript の構文拡張です。JSX マークアップは関連する{''}\n レンダリングロジックのすぐそばに配置できるので、React\n コンポーネントは簡単に作成、保守、削除ができます。\n \n
    \n
    \n\n
    \n
    \n
    \n インタラクティブ機能を\n
    \n どこでも必要な場所に\n
    \n \n React\n コンポーネントはデータを受け取り、画面に表示するものを返します。\n {''}\n 入力フィールドへのタイピングなどのユーザ操作によって{''}\n 新しいデータができたら、コンポーネントにそれを渡します。{''}\n React が新しいデータに基づいて画面を更新します。\n \n
    \n \n \n \n
    \n \n ページ全体を React で構築する必要はありません。既存の HTML\n ページに React を追加すれば、どんな場所にでもインタラクティブな\n React コンポーネントを表示できます。\n \n
    \n \n 既存のページに React を追加する\n \n
    \n
    \n
    \n\n
    \n
    \n
    \n フレームワークで\n
    \n フルスタックな開発を\n
    \n \n React はライブラリです。{''}\n コンポーネントを組み合わせることはできますが、{''}\n ルーティングやデータフェッチの方法までは指定しません。{''}\n React でアプリ全体を構築する場合は、{''}\n Next.js や{' '}\n React Router{' '}\n のようなフルスタックのフレームワークをお勧めします。\n \n
    \n \n \n \n
    \n \n React とはアーキテクチャでもあります。{''}\n フレームワークでは、サーバやビルド時に動作する{''}\n 非同期コンポーネントを使ってデータの取得が可能です。{''}\n ファイルやデータベースからデータを読み込んで、{''}\n インタラクティブなコンポーネントに渡しましょう。\n \n
    \n \n フレームワークで始める\n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n あらゆるプラットフォームの\n
    \n 能力を最大限に活用\n
    \n \n 人々はウェブを愛し、そしてネイティブアプリを愛しています。{''}\n その理由は様々です。{''}\n React\n を使えば、同じスキルを使ってウェブアプリとネイティブアプリの{''}\n 両方を構築できます。{''}\n 各プラットフォームが持つ独自の強みを活かし、{''}\n どんなプラットフォームにおいても自然なインターフェースを実現します。\n \n
    \n
    \n
    \n
    \n \n
    \n \n
    \n
    \n
    \n
    \n

    \n ウェブの本質に忠実に\n

    \n

    \n 人々はウェブアプリが素早く読み込まれることを期待します。\n {''}\n React を使用すれば、サーバ上でデータが取得中でも HTML\n のストリーミングを開始でき、JavaScript\n コードが読み込まれる前に{''}\n コンテンツを段階的にロードすることができます。{''}\n クライアント側では、React は標準的な Web API\n を使用して、レンダーの最中でも UI の応答性を保ちます。\n

    \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n \n \n \n
    \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n
    \n
    \n
    \n

    \n 真にネイティブな体験を実現\n

    \n

    \n 人々はネイティブアプリがそのプラットフォームに見合った\n {''}\n ルック＆フィールを持つことを期待します。\n \n React Native\n {' '}\n や{' '}\n Expo{' '}\n を使えば、React で Android、iOS\n などのアプリを構築できます。{''}\n ネイティブアプリのように感じるのは、{''}\n ウェブビューではなく真のネイティブ UI だからです。{''}\n React コンポーネントは、プラットフォーム固有の、{''}\n 本物の Android や iOS のビューを表示できます。\n

    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n React を使えば、{''}\n ウェブ開発者にもネイティブアプリ開発者にもなれるのです。{''}\n ユーザー体験を犠牲にすることなく、{''}\n 多くのプラットフォームでリリースを行えます。{''}\n ひとつのプラットフォームに縛られることなく、{''}\n すべての機能をエンドツーエンドで担当するチームを作れます。\n \n
    \n \n ネイティブプラットフォーム向けに開発する\n \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n
    \n
    \n 完成した機能だけが\n
    \n リリースされる\n
    \n \n React は開発アプローチの変更に慎重に取り組みます。{''}\n すべてのコミットは 10 億人以上のユーザによる{''}\n ビジネスクリティカルな環境においてテストされます。{''}\n Meta にある 10 万以上の React コンポーネントが、{''}\n すべての移行戦略の検証を支援します。\n \n
    \n \n React チームは、常に React\n を改善する方法を模索していますが、{''}\n 研究によっては成果が出るまでに何年もかかることもあります。\n {''}\n 研究のアイデアをリリースするまでの高いハードルを越えた、{''}\n 実証済みのアプローチだけが React の一部となるのです。\n \n
    \n \n React のニュースを読む\n \n
    \n
    \n
    \n
    \n

    \n \n 最新の React ニュース\n

    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n \n Read more React news\n \n
    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n
    \n
    \n 数百万人の\n
    \n コミュニティに参加しよう\n
    \n \n あなたは 1 人ではありません。世界中から毎月 200 万人の開発者が\n React ドキュメントに訪れています。{''}\n 人々とチームが共感できる技術、それが React なのです。\n \n
    \n
    \n \n
    \n
    \n \n React は単なるライブラリやアーキテクチャ、{''}\n あるいはエコシステム以上の存在です。{''}\n React とはコミュニティです。{''}\n ヘルプを求め、チャンスを見つけ、新しい友人に会える場所です。\n {''}\n 開発者やデザイナ、初心者やエキスパート、{''}\n 研究者やアーティスト、教師や学生と出会える場所です。{''}\n 私たちのバックグラウンドはさまざまですが、React を通じて皆で\n {''}\n ユーザーインターフェースの創造に取り組んでいるのです。\n \n
    \n
    \n
    \n\n
    \n
    \n \n
    \n \n
    \n React コミュニティに\n
    \n ようこそ！\n
    \n \n はじめる\n \n
    \n
    \n
    \n \n );\n}\n\nfunction CTA({children, icon, href}) {\n let Tag;\n let extraProps;\n if (href.startsWith('https://')) {\n Tag = ExternalLink;\n } else {\n Tag = NextLink;\n extraProps = {legacyBehavior: false};\n }\n return (\n \n {icon === 'native' && (\n \n \n \n \n \n \n \n \n \n \n \n \n )}\n {icon === 'framework' && (\n \n \n \n \n \n \n \n \n \n \n )}\n {icon === 'code' && (\n \n \n \n \n \n \n \n \n \n \n \n \n )}\n {icon === 'news' && (\n \n \n \n )}\n {children}\n \n \n \n \n \n );\n}\n\nconst reactConf2021Cover = '/images/home/conf2021/cover.svg';\nconst reactConf2019Cover = '/images/home/conf2019/cover.svg';\nconst communityImages = [\n {\n src: '/images/home/community/react_conf_fun.webp',\n alt: 'People singing karaoke at React Conf',\n },\n {\n src: '/images/home/community/react_india_sunil.webp',\n alt: 'Sunil Pai speaking at React India',\n },\n {\n src: '/images/home/community/react_conf_hallway.webp',\n alt: 'A hallway conversation between two people at React Conf',\n },\n {\n src: '/images/home/community/react_india_hallway.webp',\n alt: 'A hallway conversation at React India',\n },\n {\n src: '/images/home/community/react_conf_elizabet.webp',\n alt: 'Elizabet Oliveira speaking at React Conf',\n },\n {\n src: '/images/home/community/react_india_selfie.webp',\n alt: 'People taking a group selfie at React India',\n },\n {\n src: '/images/home/community/react_conf_nat.webp',\n alt: 'Nat Alison speaking at React Conf',\n },\n {\n src: '/images/home/community/react_india_team.webp',\n alt: 'Organizers greeting attendees at React India',\n },\n];\n\nfunction CommunityGallery() {\n const ref = useRef();\n\n const [shouldPlay, setShouldPlay] = useState(false);\n useEffect(() => {\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n setShouldPlay(entry.isIntersecting);\n });\n },\n {\n root: null,\n rootMargin: `${window.innerHeight}px 0px`,\n }\n );\n observer.observe(ref.current);\n return () => observer.disconnect();\n }, []);\n\n const [isLazy, setIsLazy] = useState(true);\n // Either wait until we're scrolling close...\n useEffect(() => {\n if (!isLazy) {\n return;\n }\n const rootVertical = parseInt(window.innerHeight * 2.5);\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setIsLazy(false);\n }\n });\n },\n {\n root: null,\n rootMargin: `${rootVertical}px 0px`,\n }\n );\n observer.observe(ref.current);\n return () => observer.disconnect();\n }, [isLazy]);\n // ... or until it's been a while after hydration.\n useEffect(() => {\n const timeout = setTimeout(() => {\n setIsLazy(false);\n }, 20 * 1000);\n return () => clearTimeout(timeout);\n }, []);\n\n return (\n
    \n \n \n
    \n \n \n \n \n );\n}\n\nconst CommunityImages = memo(function CommunityImages({isLazy}) {\n return (\n <>\n {communityImages.map(({src, alt}, i) => (\n \n \n \n \n \n \n \n ))}\n \n );\n});\n\nfunction ExampleLayout({\n filename,\n left,\n right,\n activeArea,\n hoverTopOffset = 0,\n}) {\n const contentRef = useRef(null);\n useNestedScrollLock(contentRef);\n\n const [overlayStyles, setOverlayStyles] = useState([]);\n useEffect(() => {\n if (activeArea) {\n const nodes = contentRef.current.querySelectorAll(\n '[data-hover=\"' + activeArea.name + '\"]'\n );\n const nextOverlayStyles = Array.from(nodes)\n .map((node) => {\n const parentRect = contentRef.current.getBoundingClientRect();\n const nodeRect = node.getBoundingClientRect();\n let top = Math.round(nodeRect.top - parentRect.top) - 8;\n let bottom = Math.round(nodeRect.bottom - parentRect.top) + 8;\n let left = Math.round(nodeRect.left - parentRect.left) - 8;\n let right = Math.round(nodeRect.right - parentRect.left) + 8;\n top = Math.max(top, hoverTopOffset);\n bottom = Math.min(bottom, parentRect.height - 12);\n if (top >= bottom) {\n return null;\n }\n return {\n width: right - left + 'px',\n height: bottom - top + 'px',\n transform: `translate(${left}px, ${top}px)`,\n };\n })\n .filter((s) => s !== null);\n setOverlayStyles(nextOverlayStyles);\n }\n }, [activeArea, hoverTopOffset]);\n return (\n
    \n
    \n
    \n
    \n
    \n

    \n {filename}\n

    \n
    \n {left}\n
    \n \n {right}\n \n {overlayStyles.map((styles, i) => (\n \n ))}\n
    \n
    \n
    \n \n \n );\n}\n\nfunction useCodeHover(areas) {\n const [hoverLine, setHoverLine] = useState(null);\n const area = areas.get(hoverLine);\n let meta;\n if (area) {\n const highlightLines = area.lines ?? [hoverLine];\n meta = '```js {' + highlightLines.map((l) => l + 1).join(',') + '}';\n }\n return [area, meta, setHoverLine];\n}\n\nconst example1Areas = new Map([\n [2, {name: 'Video'}],\n [3, {name: 'Thumbnail'}],\n [4, {name: 'a'}],\n [5, {name: 'h3'}],\n [6, {name: 'p'}],\n [7, {name: 'a'}],\n [8, {name: 'LikeButton'}],\n [9, {name: 'Video'}],\n]);\n\nfunction Example1() {\n const [area, meta, onLineHover] = useCodeHover(example1Areas);\n return (\n \n
    {`function Video({ video }) {\n return (\n \n );\n}\n `}
    \n \n }\n right={\n \n \n \n }\n />\n );\n}\n\nconst example2Areas = new Map([\n [8, {name: 'VideoList'}],\n [9, {name: 'h2'}],\n [11, {name: 'Video', lines: [11]}],\n [13, {name: 'VideoList'}],\n]);\n\nfunction Example2() {\n const [area, meta, onLineHover] = useCodeHover(example2Areas);\n const videos = [\n {\n id: 'ex2-0',\n title: 'First video',\n description: 'Video description',\n image: 'blue',\n },\n {\n id: 'ex2-1',\n title: 'Second video',\n description: 'Video description',\n image: 'red',\n },\n {\n id: 'ex2-2',\n title: 'Third video',\n description: 'Video description',\n image: 'green',\n },\n ];\n\n return (\n \n
    {`function VideoList({ videos, emptyHeading }) {\n const count = videos.length;\n let heading = emptyHeading;\n if (count > 0) {\n const noun = count > 1 ? 'Videos' : 'Video';\n heading = count + ' ' + noun;\n }\n return (\n
    \n

    {heading}

    \n {videos.map(video =>\n
    \n );\n}`}
    \n \n }\n right={\n \n
    \n \n
    \n     \n }\n />\n );\n}\n\nconst example3Areas = new Map([\n [6, {name: 'SearchableVideoList'}],\n [7, {name: 'SearchInput', lines: [7, 8, 9]}],\n [8, {name: 'SearchInput', lines: [7, 8, 9]}],\n [9, {name: 'SearchInput', lines: [7, 8, 9]}],\n [10, {name: 'VideoList', lines: [10, 11, 12]}],\n [11, {name: 'VideoList', lines: [10, 11, 12]}],\n [12, {name: 'VideoList', lines: [10, 11, 12]}],\n [13, {name: 'SearchableVideoList'}],\n]);\n\nfunction Example3() {\n const [area, meta, onLineHover] = useCodeHover(example3Areas);\n const videos = [\n {\n id: 'vids-0',\n title: 'React: The Documentary',\n description: 'The origin story of React',\n image: '/images/home/videos/documentary.webp',\n url: 'https://www.youtube.com/watch?v=8pDqJVdNa44',\n },\n {\n id: 'vids-1',\n title: 'Rethinking Best Practices',\n description: 'Pete Hunt (2013)',\n image: '/images/home/videos/rethinking.jpg',\n url: 'https://www.youtube.com/watch?v=x7cQ3mrcKaY',\n },\n {\n id: 'vids-2',\n title: 'Introducing React Native',\n description: 'Tom Occhino (2015)',\n image: '/images/home/videos/rn.jpg',\n url: 'https://www.youtube.com/watch?v=KVZ-P-ZI6W4',\n },\n {\n id: 'vids-3',\n title: 'Introducing React Hooks',\n description: 'Sophie Alpert and Dan Abramov (2018)',\n image: '/images/home/videos/hooks.jpg',\n url: 'https://www.youtube.com/watch?v=V-QO-KO90iQ',\n },\n {\n id: 'vids-4',\n title: 'Introducing Server Components',\n description: 'Dan Abramov and Lauren Tan (2020)',\n image: '/images/home/videos/rsc.jpg',\n url: 'https://www.youtube.com/watch?v=TQQPAU21ZUw',\n },\n ];\n\n return (\n \n
    {`import { useState } from 'react';\n\nfunction SearchableVideoList({ videos }) {\n const [searchText, setSearchText] = useState('');\n const foundVideos = filterVideos(videos, searchText);\n return (\n <>\n setSearchText(newText)} />\n \n \n );\n}`}
    \n \n }\n right={\n \n \n

    \n React Videos\n

    \n

    \n A brief history of React\n

    \n
    \n \n
    \n \n     \n }\n />\n );\n}\n\nconst example4Areas = new Map([\n [6, {name: 'ConferenceLayout'}],\n [7, {name: 'Suspense'}],\n [8, {name: 'SearchableVideoList'}],\n [9, {name: 'Suspense'}],\n [10, {name: 'ConferenceLayout'}],\n [17, {name: 'SearchableVideoList'}],\n]);\n\nfunction Example4() {\n const [area, meta, onLineHover] = useCodeHover(example4Areas);\n const [slug, setSlug] = useState('react-conf-2021');\n const [animate, setAnimate] = useState(false);\n\n function navigate(newSlug) {\n setSlug(newSlug);\n setAnimate(true);\n }\n\n return (\n \n
    {`import { db } from './database.js';\nimport { Suspense } from 'react';\n\nasync function ConferencePage({ slug }) {\n const conf = await db.Confs.find({ slug });\n return (\n \n }>\n \n \n \n );\n}\n\nasync function Talks({ confId }) {\n const talks = await db.Talks.findAll({ confId });\n const videos = talks.map(talk => talk.video);\n return ;\n}`}
    \n \n }\n right={\n \n \n \n \n
    \n \n \n \n
    \n     \n \n \n     \n }\n />\n );\n}\n\nfunction useNestedScrollLock(ref) {\n useEffect(() => {\n let node = ref.current;\n let isLocked = false;\n let lastScroll = performance.now();\n\n function handleScroll() {\n if (!isLocked) {\n isLocked = true;\n node.style.pointerEvents = 'none';\n }\n lastScroll = performance.now();\n }\n\n function updateLock() {\n if (isLocked && performance.now() - lastScroll > 150) {\n isLocked = false;\n node.style.pointerEvents = '';\n }\n }\n\n window.addEventListener('scroll', handleScroll);\n const interval = setInterval(updateLock, 60);\n return () => {\n window.removeEventListener('scroll', handleScroll);\n clearInterval(interval);\n };\n }, [ref]);\n}\n\nfunction ExamplePanel({\n children,\n noPadding,\n noShadow,\n height,\n contentMarginTop,\n}) {\n return (\n \n \n {children}\n \n \n );\n}\n\nconst NavContext = createContext(null);\n\nfunction BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {\n const [restartId, setRestartId] = useState(0);\n const isPulsing = hasPulse && restartId === 0;\n const [shouldAnimatePulse, setShouldAnimatePulse] = useState(false);\n const refreshRef = useRef(null);\n\n useEffect(() => {\n if (!isPulsing) {\n return;\n }\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n setShouldAnimatePulse(entry.isIntersecting);\n });\n },\n {\n root: null,\n rootMargin: `0px 0px`,\n }\n );\n observer.observe(refreshRef.current);\n return () => observer.disconnect();\n }, [isPulsing]);\n\n function handleRestart() {\n confCache = new Map();\n talksCache = new Map();\n setRestartId((i) => i + 1);\n }\n\n return (\n
    \n
    \n
    \n {hasRefresh &&
    }\n
    \n \n \n \n\n \n {domain}\n {path != null && '/'}\n \n {path}\n
    \n {hasRefresh && (\n \n {isPulsing && shouldAnimatePulse && (\n
    \n )}\n \n \n \n
    \n )}\n
    \n {restartId > 0 && (\n \n )}\n
    \n
    \n {children}\n
    \n
    \n );\n}\n\nfunction ConferencePage({slug}) {\n const conf = use(fetchConf(slug));\n return (\n \n
    \n }>\n \n \n
    \n     \n );\n}\n\nfunction TalksLoading() {\n return (\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n );\n}\n\nfunction Talks({confId}) {\n const videos = use(fetchTalks(confId));\n return ;\n}\n\nfunction SearchableVideoList({videos}) {\n const [searchText, setSearchText] = useState('');\n const foundVideos = filterVideos(videos, searchText);\n return (\n
    \n \n \n
    \n );\n}\n\nfunction filterVideos(videos, query) {\n const keywords = query\n .toLowerCase()\n .split(' ')\n .filter((s) => s !== '');\n if (keywords.length === 0) {\n return videos;\n }\n return videos.filter((video) => {\n const words = (video.title + ' ' + video.description)\n .toLowerCase()\n .split(' ');\n return keywords.every((kw) => words.some((w) => w.startsWith(kw)));\n });\n}\n\nfunction VideoList({videos, emptyHeading}) {\n let heading = emptyHeading;\n const count = videos.length;\n if (count > 0) {\n const noun = count > 1 ? 'Videos' : 'Video';\n heading = count + ' ' + noun;\n }\n return (\n
    \n \n {heading}\n \n
    \n {videos.map((video) => (\n
    \n
    \n );\n}\n\nfunction SearchInput({value, onChange}) {\n const id = useId();\n return (\n e.preventDefault()}>\n \n
    \n
    \n \n
    \n onChange(e.target.value)}\n />\n
    \n \n );\n}\n\nfunction ConferenceLayout({conf, children}) {\n const {slug, navigate} = useContext(NavContext);\n const [isPending, startTransition] = useTransition();\n return (\n \n \n {\n startTransition(() => {\n navigate(e.target.value);\n });\n }}\n className=\"appearance-none pe-8 ps-2 bg-transparent text-primary-dark text-2xl font-bold mb-0.5\"\n style={{\n backgroundSize: '4px 4px, 4px 4px',\n backgroundRepeat: 'no-repeat',\n backgroundPosition:\n 'calc(100% - 20px) calc(1px + 50%),calc(100% - 16px) calc(1px + 50%)',\n backgroundImage:\n 'linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)',\n }}>\n \n React Conf 2021\n \n \n React Conf 2019\n \n \n \n
    \n {children}\n
    \n
    \n );\n}\n\nfunction Cover({background, children}) {\n return (\n
    \n
    \n {children}\n
    \n \n
    \n );\n}\n\nfunction Video({video}) {\n return (\n
    \n \n \n \n {video.title}\n \n

    \n {video.description}\n

    \n \n \n
    \n );\n}\n\nfunction Code({children}) {\n return (\n \n {children}\n \n );\n}\n\nfunction Thumbnail({video}) {\n const {image} = video;\n return (\n \n {typeof image !== 'string' ? (\n <>\n
    \n {image.speakers.map((src, i) => (\n \n ))}\n
    \n
    \n \n \n React Conf\n \n
    \n \n ) : image.startsWith('/') ? null : (\n \n )}\n \n );\n}\n\nfunction ThumbnailPlaceholder() {\n return (\n \n \n \n );\n}\n\n// A hack since we don't actually have a backend.\n// Unlike local state, this survives videos being filtered.\nconst likedVideos = new Set();\n\nfunction LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n \n {isLiked ? (\n \n \n \n ) : (\n \n \n \n )}\n \n );\n}\nfunction SvgContainer({children}) {\n return (\n \n {children}\n \n );\n}\n\nfunction NativeIcons() {\n return (\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n}\n\nfunction WebIcons() {\n return (\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n}\n\n// TODO: upgrade React and use the built-in version.\nfunction use(promise) {\n if (promise.status === 'fulfilled') {\n return promise.value;\n } else if (promise.status === 'rejected') {\n throw promise.reason;\n } else if (promise.status === 'pending') {\n throw promise;\n } else {\n promise.status = 'pending';\n promise.then(\n (result) => {\n promise.status = 'fulfilled';\n promise.value = result;\n },\n (reason) => {\n promise.status = 'rejected';\n promise.reason = reason;\n }\n );\n throw promise;\n }\n}\n\nlet confCache = new Map();\nlet talksCache = new Map();\nconst loadConfDelay = 250;\nconst loadTalksDelay = 1000;\n\nfunction fetchConf(slug) {\n if (confCache.has(slug)) {\n return confCache.get(slug);\n }\n const promise = new Promise((resolve) => {\n setTimeout(() => {\n if (slug === 'react-conf-2021') {\n resolve({\n id: 0,\n cover: reactConf2021Cover,\n name: 'React Conf 2021',\n });\n } else if (slug === 'react-conf-2019') {\n resolve({\n id: 1,\n cover: reactConf2019Cover,\n name: 'React Conf 2019',\n });\n }\n }, loadConfDelay);\n });\n confCache.set(slug, promise);\n return promise;\n}\n\nfunction fetchTalks(confId) {\n if (talksCache.has(confId)) {\n return talksCache.get(confId);\n }\n const promise = new Promise((resolve) => {\n setTimeout(() => {\n if (confId === 0) {\n resolve([\n {\n id: 'conf-2021-0',\n title: 'React 18 Keynote',\n description: 'The React Team',\n url: 'https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1',\n image: {\n speakers: [\n '/images/home/conf2021/andrew.jpg',\n '/images/home/conf2021/lauren.jpg',\n '/images/home/conf2021/juan.jpg',\n '/images/home/conf2021/rick.jpg',\n ],\n },\n },\n {\n id: 'conf-2021-1',\n title: 'React 18 for App Developers',\n description: 'Shruti Kapoor',\n url: 'https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2',\n image: {\n speakers: ['/images/home/conf2021/shruti.jpg'],\n },\n },\n {\n id: 'conf-2021-2',\n title: 'Streaming Server Rendering with Suspense',\n description: 'Shaundai Person',\n url: 'https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3',\n image: {\n speakers: ['/images/home/conf2021/shaundai.jpg'],\n },\n },\n {\n id: 'conf-2021-3',\n title: 'The First React Working Group',\n description: 'Aakansha Doshi',\n url: 'https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4',\n image: {\n speakers: ['/images/home/conf2021/aakansha.jpg'],\n },\n },\n {\n id: 'conf-2021-4',\n title: 'React Developer Tooling',\n description: 'Brian Vaughn',\n url: 'https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5',\n image: {\n speakers: ['/images/home/conf2021/brian.jpg'],\n },\n },\n {\n id: 'conf-2021-5',\n title: 'React without memo',\n description: 'Xuan Huang (黄玄)',\n url: 'https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6',\n image: {\n speakers: ['/images/home/conf2021/xuan.jpg'],\n },\n },\n {\n id: 'conf-2021-6',\n title: 'React Docs Keynote',\n description: 'Rachel Nabors',\n url: 'https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=7',\n image: {\n speakers: ['/images/home/conf2021/rachel.jpg'],\n },\n },\n {\n id: 'conf-2021-7',\n title: 'Things I Learnt from the New React Docs',\n description: \"Debbie O'Brien\",\n url: 'https://www.youtube.com/watch?v=-7odLW_hG7s&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=8',\n image: {\n speakers: ['/images/home/conf2021/debbie.jpg'],\n },\n },\n {\n id: 'conf-2021-8',\n title: 'Learning in the Browser',\n description: 'Sarah Rainsberger',\n url: 'https://www.youtube.com/watch?v=5X-WEQflCL0&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=9',\n image: {\n speakers: ['/images/home/conf2021/sarah.jpg'],\n },\n },\n {\n id: 'conf-2021-9',\n title: 'The ROI of Designing with React',\n description: 'Linton Ye',\n url: 'https://www.youtube.com/watch?v=7cPWmID5XAk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=10',\n image: {\n speakers: ['/images/home/conf2021/linton.jpg'],\n },\n },\n {\n id: 'conf-2021-10',\n title: 'Interactive Playgrounds with React',\n description: 'Delba de Oliveira',\n url: 'https://www.youtube.com/watch?v=zL8cz2W0z34&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=11',\n image: {\n speakers: ['/images/home/conf2021/delba.jpg'],\n },\n },\n {\n id: 'conf-2021-11',\n title: 'Re-introducing Relay',\n description: 'Robert Balicki',\n url: 'https://www.youtube.com/watch?v=lhVGdErZuN4&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=12',\n image: {\n speakers: ['/images/home/conf2021/robert.jpg'],\n },\n },\n {\n id: 'conf-2021-12',\n title: 'React Native Desktop',\n description: 'Eric Rozell and Steven Moyes',\n url: 'https://www.youtube.com/watch?v=9L4FFrvwJwY&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=13',\n image: {\n speakers: [\n '/images/home/conf2021/eric.jpg',\n '/images/home/conf2021/steven.jpg',\n ],\n },\n },\n {\n id: 'conf-2021-13',\n title: 'On-device Machine Learning for React Native',\n description: 'Roman Rädle',\n url: 'https://www.youtube.com/watch?v=NLj73vrc2I8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=14',\n image: {\n speakers: ['/images/home/conf2021/roman.jpg'],\n },\n },\n {\n id: 'conf-2021-14',\n title: 'React 18 for External Store Libraries',\n description: 'Daishi Kato',\n url: 'https://www.youtube.com/watch?v=oPfSC5bQPR8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=15',\n image: {\n speakers: ['/images/home/conf2021/daishi.jpg'],\n },\n },\n {\n id: 'conf-2021-15',\n title: 'Building Accessible Components with React 18',\n description: 'Diego Haz',\n url: 'https://www.youtube.com/watch?v=dcm8fjBfro8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=16',\n image: {\n speakers: ['/images/home/conf2021/diego.jpg'],\n },\n },\n {\n id: 'conf-2021-16',\n title: 'Accessible Japanese Form Components with React',\n description: 'Tafu Nakazaki',\n url: 'https://www.youtube.com/watch?v=S4a0QlsH0pU&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=17',\n image: {\n speakers: ['/images/home/conf2021/tafu.jpg'],\n },\n },\n {\n id: 'conf-2021-17',\n title: 'UI Tools for Artists',\n description: 'Lyle Troxell',\n url: 'https://www.youtube.com/watch?v=b3l4WxipFsE&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=18',\n image: {\n speakers: ['/images/home/conf2021/lyle.jpg'],\n },\n },\n {\n id: 'conf-2021-18',\n title: 'Hydrogen + React 18',\n description: 'Helen Lin',\n url: 'https://www.youtube.com/watch?v=HS6vIYkSNks&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=19',\n image: {\n speakers: ['/images/home/conf2021/helen.jpg'],\n },\n },\n ]);\n } else if (confId === 1) {\n resolve([\n {\n id: 'conf-2019-0',\n title: 'Keynote (Part 1)',\n description: 'Tom Occhino',\n url: 'https://www.youtube.com/watch?v=QnZHO7QvjaM&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh',\n image: {\n speakers: ['/images/home/conf2019/tom.jpg'],\n },\n },\n {\n id: 'conf-2019-1',\n title: 'Keynote (Part 2)',\n description: 'Yuzhi Zheng',\n url: 'https://www.youtube.com/watch?v=uXEEL9mrkAQ&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=2',\n image: {\n speakers: ['https://conf2019.reactjs.org/img/speakers/yuzhi.jpg'],\n },\n },\n {\n id: 'conf-2019-2',\n title: 'Building The New Facebook With React and Relay (Part 1)',\n description: 'Frank Yan',\n url: 'https://www.youtube.com/watch?v=9JZHodNR184&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=3',\n image: {\n speakers: ['/images/home/conf2019/frank.jpg'],\n },\n },\n {\n id: 'conf-2019-3',\n title: 'Building The New Facebook With React and Relay (Part 2)',\n description: 'Ashley Watkins',\n url: 'https://www.youtube.com/watch?v=KT3XKDBZW7M&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=4',\n image: {\n speakers: ['/images/home/conf2019/ashley.jpg'],\n },\n },\n {\n id: 'conf-2019-4',\n title: 'How Our Team Is Using React Native to Save The World',\n description: 'Tania Papazafeiropoulou',\n url: 'https://www.youtube.com/watch?v=zVHWugBPGBE&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=5',\n image: {\n speakers: ['/images/home/conf2019/tania.jpg'],\n },\n },\n {\n id: 'conf-2019-5',\n title:\n 'Using Hooks and Codegen to Bring the Benefits of GraphQL to REST APIs',\n description: 'Tejas Kumar',\n url: 'https://www.youtube.com/watch?v=cdsnzfJUqm0&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=6',\n image: {\n speakers: ['/images/home/conf2019/tejas.jpg'],\n },\n },\n {\n id: 'conf-2019-6',\n title: 'Building a Custom React Renderer',\n description: 'Sophie Alpert',\n url: 'https://www.youtube.com/watch?v=CGpMlWVcHok&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=7',\n image: {\n speakers: ['/images/home/conf2019/sophie.jpg'],\n },\n },\n {\n id: 'conf-2019-7',\n title: 'Is React Translated Yet?',\n description: 'Nat Alison',\n url: 'https://www.youtube.com/watch?v=lLE4Jqaek5k&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=12',\n image: {\n speakers: ['/images/home/conf2019/nat.jpg'],\n },\n },\n {\n id: 'conf-2019-8',\n title: 'Building (And Re-Building) the Airbnb Design System',\n description: 'Maja Wichrowska and Tae Kim',\n url: 'https://www.youtube.com/watch?v=fHQ1WSx41CA&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=13',\n image: {\n speakers: [\n '/images/home/conf2019/maja.jpg',\n '/images/home/conf2019/tae.jpg',\n ],\n },\n },\n {\n id: 'conf-2019-9',\n title: 'Accessibility Is a Marathon, Not a Sprint',\n description: 'Brittany Feenstra',\n url: 'https://www.youtube.com/watch?v=ONSD-t4gBb8&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=14',\n image: {\n speakers: ['/images/home/conf2019/brittany.jpg'],\n },\n },\n {\n id: 'conf-2019-10',\n title: 'The State of React State in 2019',\n description: 'Becca Bailey',\n url: 'https://www.youtube.com/watch?v=wUMMUyQtMSg&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=15',\n image: {\n speakers: ['/images/home/conf2019/becca.jpg'],\n },\n },\n {\n id: 'conf-2019-11',\n title: 'Let’s Program Like It’s 1999',\n description: 'Lee Byron',\n url: 'https://www.youtube.com/watch?v=vG8WpLr6y_U&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=16',\n image: {\n speakers: ['/images/home/conf2019/lee.jpg'],\n },\n },\n {\n id: 'conf-2019-12',\n title: 'React Developer Tooling',\n description: 'Brian Vaughn',\n url: 'https://www.youtube.com/watch?v=Mjrfb1r3XEM&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=17',\n image: {\n speakers: ['/images/home/conf2019/brian.jpg'],\n },\n },\n {\n id: 'conf-2019-13',\n title: 'Data Fetching With Suspense In Relay',\n description: 'Joe Savona',\n url: 'https://www.youtube.com/watch?v=Tl0S7QkxFE4&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=18',\n image: {\n speakers: ['/images/home/conf2019/joe.jpg'],\n },\n },\n {\n id: 'conf-2019-14',\n title: 'Automatic Visualizations of the Frontend',\n description: 'Cameron Yick',\n url: 'https://www.youtube.com/watch?v=SbreAPNmZOk&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=19',\n image: {\n speakers: ['/images/home/conf2019/cameron.jpg'],\n },\n },\n {\n id: 'conf-2019-15',\n title: 'React Is Fiction',\n description: 'Jenn Creighton',\n url: 'https://www.youtube.com/watch?v=kqh4lz2Lkzs&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=20',\n image: {\n speakers: ['/images/home/conf2019/jenn.jpg'],\n },\n },\n {\n id: 'conf-2019-16',\n title: 'Progressive Web Animations',\n description: 'Alexandra Holachek',\n url: 'https://www.youtube.com/watch?v=laPsceJ4tTY&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=21',\n image: {\n speakers: ['/images/home/conf2019/alexandra.jpg'],\n },\n },\n {\n id: 'conf-2019-17',\n title:\n 'Creating Games, Animations and Interactions with the Wick Editor',\n description: 'Luca Damasco',\n url: 'https://www.youtube.com/watch?v=laPsceJ4tTY&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=21',\n image: {\n speakers: ['/images/home/conf2019/luca.jpg'],\n },\n },\n {\n id: 'conf-2019-18',\n title: 'Building React-Select',\n description: 'Jed Watson',\n url: 'https://www.youtube.com/watch?v=yS0jUnmBujE&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=25',\n image: {\n speakers: ['/images/home/conf2019/jed.jpg'],\n },\n },\n {\n id: 'conf-2019-19',\n title: 'Promoting Transparency in Government Spending with React',\n description: 'Lizzie Salita',\n url: 'https://www.youtube.com/watch?v=CVfXICcNfHE&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=26',\n image: {\n speakers: ['/images/home/conf2019/lizzie.jpg'],\n },\n },\n {\n id: 'conf-2019-20',\n title: 'Wonder-driven Development: Using React to Make a Spaceship',\n description: 'Alex Anderson',\n url: 'https://www.youtube.com/watch?v=aV0uOPWHKt4&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=27',\n image: {\n speakers: ['/images/home/conf2019/alex.jpg'],\n },\n },\n ]);\n }\n }, loadTalksDelay);\n });\n talksCache.set(confId, promise);\n return promise;\n}\n" }, { "path": "src/components/Layout/Page.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Suspense} from 'react';\nimport * as React from 'react';\nimport {useRouter} from 'next/router';\nimport {SidebarNav} from './SidebarNav';\nimport {Footer} from './Footer';\nimport {Toc} from './Toc';\n// import SocialBanner from '../SocialBanner';\nimport {DocsPageFooter} from 'components/DocsFooter';\nimport {Seo} from 'components/Seo';\nimport PageHeading from 'components/PageHeading';\nimport {getRouteMeta} from './getRouteMeta';\nimport {TocContext} from '../MDX/TocContext';\nimport {Languages, LanguagesContext} from '../MDX/LanguagesContext';\nimport type {TocItem} from 'components/MDX/TocContext';\nimport type {RouteItem} from 'components/Layout/getRouteMeta';\nimport {HomeContent} from './HomeContent';\nimport {TopNav} from './TopNav';\nimport cn from 'classnames';\nimport Head from 'next/head';\n\nimport(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');\n\ninterface PageProps {\n children: React.ReactNode;\n toc: Array;\n routeTree: RouteItem;\n meta: {\n title?: string;\n titleForTitleTag?: string;\n version?: 'experimental' | 'canary';\n description?: string;\n };\n section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';\n languages?: Languages | null;\n}\n\nexport function Page({\n children,\n toc,\n routeTree,\n meta,\n section,\n languages = null,\n}: PageProps) {\n const {asPath} = useRouter();\n const cleanedPath = asPath.split(/[\\?\\#]/)[0];\n const {route, nextRoute, prevRoute, breadcrumbs, order} = getRouteMeta(\n cleanedPath,\n routeTree\n );\n const title = meta.title || route?.title || '';\n const version = meta.version;\n const description = meta.description || route?.description || '';\n const isHomePage = cleanedPath === '/';\n const isBlogIndex = cleanedPath === '/blog';\n\n let content;\n if (isHomePage) {\n content = ;\n } else {\n content = (\n
    \n \n \n
    \n
    \n \n \n {children}\n \n
    \n {!isBlogIndex && (\n \n )}\n \n \n );\n }\n\n let hasColumns = true;\n let showSidebar = true;\n let showToc = true;\n if (isHomePage || isBlogIndex) {\n hasColumns = false;\n showSidebar = false;\n showToc = false;\n } else if (section === 'blog') {\n showToc = false;\n hasColumns = false;\n showSidebar = false;\n }\n\n let searchOrder;\n if (section === 'learn' || (section === 'blog' && !isBlogIndex)) {\n searchOrder = order;\n }\n\n return (\n <>\n \n {(isHomePage || isBlogIndex) && (\n \n \n \n )}\n {/* */}\n \n \n {showSidebar && (\n
    \n
    \n \n
    \n
    \n )}\n {/* No fallback UI so need to be careful not to suspend directly inside. */}\n \n
    \n \n {content}\n \n \n {!isHomePage && (\n
    \n
    \n
    \n )}\n \n
    \n \n \n
    \n     \n
    \n {showToc && toc.length > 0 && }\n
    \n \n \n );\n}\n" }, { "path": "src/components/Layout/Sidebar/SidebarButton.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport cn from 'classnames';\nimport {IconNavArrow} from 'components/Icon/IconNavArrow';\n\ninterface SidebarButtonProps {\n title: string;\n heading: boolean;\n level: number;\n onClick: (event: React.MouseEvent) => void;\n isExpanded?: boolean;\n isBreadcrumb?: boolean;\n}\n\nexport function SidebarButton({\n title,\n heading,\n level,\n onClick,\n isExpanded,\n isBreadcrumb,\n}: SidebarButtonProps) {\n return (\n 1,\n })}>\n 1,\n 'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':\n !heading && isBreadcrumb && !isExpanded,\n 'p-4 my-6 text-2xl lg:my-auto lg:text-sm font-bold': heading,\n 'p-2 hover:text-gray-70 text-base font-bold text-primary dark:text-primary-dark':\n !heading && !isBreadcrumb,\n 'text-primary dark:text-primary-dark': heading && !isBreadcrumb,\n 'text-primary dark:text-primary-dark text-base font-bold bg-card dark:bg-card-dark':\n !heading && isExpanded,\n }\n )}\n onClick={onClick}>\n {title}\n {typeof isExpanded && !heading && (\n \n \n \n )}\n \n \n );\n}\n" }, { "path": "src/components/Layout/Sidebar/SidebarLink.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport {useRef, useEffect} from 'react';\nimport * as React from 'react';\nimport cn from 'classnames';\nimport {IconNavArrow} from 'components/Icon/IconNavArrow';\nimport {IconCanary} from 'components/Icon/IconCanary';\nimport {IconExperimental} from 'components/Icon/IconExperimental';\nimport Link from 'next/link';\n\ninterface SidebarLinkProps {\n href: string;\n selected?: boolean;\n title: string;\n level: number;\n version?: 'canary' | 'major' | 'experimental' | 'rc';\n icon?: React.ReactNode;\n isExpanded?: boolean;\n hideArrow?: boolean;\n isPending: boolean;\n}\n\nexport function SidebarLink({\n href,\n selected = false,\n title,\n version,\n level,\n isExpanded,\n hideArrow,\n isPending,\n}: SidebarLinkProps) {\n const ref = useRef(null);\n\n useEffect(() => {\n if (selected && ref && ref.current) {\n // @ts-ignore\n if (typeof ref.current.scrollIntoViewIfNeeded === 'function') {\n // @ts-ignore\n ref.current.scrollIntoViewIfNeeded();\n }\n }\n }, [ref, selected]);\n\n let target = '';\n if (href.startsWith('https://')) {\n target = '_blank';\n }\n return (\n 0,\n 'ps-5': level < 2,\n 'text-base font-bold': level === 0,\n 'text-primary dark:text-primary-dark': level === 0 && !selected,\n 'text-base text-secondary dark:text-secondary-dark':\n level > 0 && !selected,\n 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':\n selected,\n 'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':\n isPending,\n }\n )}>\n {/* This here needs to be refactored ofc */}\n
    \n {title}{' '}\n {version === 'major' && (\n \n React 19\n \n )}\n {version === 'canary' && (\n \n )}\n {version === 'experimental' && (\n \n )}\n {version === 'rc' && (\n \n )}\n
    \n\n {isExpanded != null && !hideArrow && (\n \n \n \n )}\n \n );\n}\n" }, { "path": "src/components/Layout/Sidebar/SidebarRouteTree.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {useRef, useLayoutEffect, Fragment} from 'react';\n\nimport cn from 'classnames';\nimport {useRouter} from 'next/router';\nimport {SidebarLink} from './SidebarLink';\nimport {useCollapse} from 'react-collapsed';\nimport usePendingRoute from 'hooks/usePendingRoute';\nimport type {RouteItem} from 'components/Layout/getRouteMeta';\nimport {siteConfig} from 'siteConfig';\n\ninterface SidebarRouteTreeProps {\n isForceExpanded: boolean;\n breadcrumbs: RouteItem[];\n routeTree: RouteItem;\n level?: number;\n}\n\nfunction CollapseWrapper({\n isExpanded,\n duration,\n children,\n}: {\n isExpanded: boolean;\n duration: number;\n children: any;\n}) {\n const ref = useRef(null);\n const timeoutRef = useRef(null);\n const {getCollapseProps} = useCollapse({\n isExpanded,\n duration,\n });\n\n // Disable pointer events while animating.\n const isExpandedRef = useRef(isExpanded);\n if (typeof window !== 'undefined') {\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useLayoutEffect(() => {\n const wasExpanded = isExpandedRef.current;\n if (wasExpanded === isExpanded) {\n return;\n }\n isExpandedRef.current = isExpanded;\n if (ref.current !== null) {\n const node: HTMLDivElement = ref.current;\n node.style.pointerEvents = 'none';\n if (timeoutRef.current !== null) {\n window.clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = window.setTimeout(() => {\n node.style.pointerEvents = '';\n }, duration + 100);\n }\n });\n }\n\n return (\n \n
    {children}
    \n \n );\n}\n\nexport function SidebarRouteTree({\n isForceExpanded,\n breadcrumbs,\n routeTree,\n level = 0,\n}: SidebarRouteTreeProps) {\n const slug = useRouter().asPath.split(/[\\?\\#]/)[0];\n const pendingRoute = usePendingRoute();\n const currentRoutes = routeTree.routes as RouteItem[];\n return (\n
      \n {currentRoutes.map(\n (\n {\n path,\n title,\n routes,\n version,\n heading,\n hasSectionHeader,\n sectionHeader,\n },\n index\n ) => {\n const selected = slug === path;\n let listItem = null;\n if (!path || heading) {\n // if current route item has no path and children treat it as an API sidebar heading\n listItem = (\n \n );\n } else if (routes) {\n // if route has a path and child routes, treat it as an expandable sidebar item\n const isBreadcrumb =\n breadcrumbs.length > 1 &&\n breadcrumbs[breadcrumbs.length - 1].path === path;\n const isExpanded = isForceExpanded || isBreadcrumb || selected;\n listItem = (\n
    • \n \n \n \n \n
      • \n );\n } else {\n // if route has a path and no child routes, treat it as a sidebar link\n listItem = (\n
    • \n \n
      • \n );\n }\n if (hasSectionHeader) {\n let sectionHeaderText =\n sectionHeader != null\n ? sectionHeader.replace('{{version}}', siteConfig.version)\n : '';\n return (\n \n {index !== 0 && (\n \n )}\n \n {sectionHeaderText}\n \n \n );\n } else {\n return listItem;\n }\n }\n )}\n
    \n );\n}\n" }, { "path": "src/components/Layout/Sidebar/index.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nexport {SidebarButton} from './SidebarButton';\nexport {SidebarLink} from './SidebarLink';\nexport {SidebarRouteTree} from './SidebarRouteTree';\n" }, { "path": "src/components/Layout/SidebarNav/SidebarNav.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Suspense} from 'react';\nimport * as React from 'react';\nimport cn from 'classnames';\nimport {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';\nimport type {RouteItem} from '../getRouteMeta';\n\ndeclare global {\n interface Window {\n __theme: string;\n __setPreferredTheme: (theme: string) => void;\n }\n}\n\nexport default function SidebarNav({\n routeTree,\n breadcrumbs,\n}: {\n routeTree: RouteItem;\n breadcrumbs: RouteItem[];\n}) {\n // HACK. Fix up the data structures instead.\n if ((routeTree as any).routes.length === 1) {\n routeTree = (routeTree as any).routes[0];\n }\n\n return (\n \n \n     \n );\n});\n" }, { "path": "src/components/MDX/CodeDiagram.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Children} from 'react';\nimport * as React from 'react';\nimport CodeBlock from './CodeBlock';\n\ninterface CodeDiagramProps {\n children: React.ReactNode;\n flip?: boolean;\n}\n\nexport function CodeDiagram({children, flip = false}: CodeDiagramProps) {\n const illustration = Children.toArray(children).filter((child: any) => {\n return child.type === 'img';\n });\n const content = Children.toArray(children).map((child: any) => {\n if (child.type?.mdxName === 'pre') {\n return (\n \n );\n } else if (child.type === 'img') {\n return null;\n } else {\n return child;\n }\n });\n if (flip) {\n return (\n
    \n {illustration}\n
    {content}
    \n
    \n );\n }\n return (\n
    \n
    {content}
    \n
    {illustration}
    \n
    \n );\n}\n" }, { "path": "src/components/MDX/ConsoleBlock.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {isValidElement} from 'react';\nimport * as React from 'react';\nimport cn from 'classnames';\nimport {IconWarning} from '../Icon/IconWarning';\nimport {IconError} from '../Icon/IconError';\n\ntype LogLevel = 'warning' | 'error' | 'info';\n\ninterface ConsoleBlockProps {\n level?: LogLevel;\n children: React.ReactNode;\n}\n\ninterface ConsoleBlockMultiProps {\n children: React.ReactNode;\n}\n\nconst Box = ({\n width = '60px',\n height = '17px',\n className,\n customStyles,\n}: {\n width?: string;\n height?: string;\n className?: string;\n customStyles?: Record;\n}) => (\n
    \n);\n\nexport function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {\n let message: React.ReactNode | null;\n if (typeof children === 'string') {\n message = children;\n } else if (isValidElement(children)) {\n message = (children as React.ReactElement<{children?: React.ReactNode}>)\n .props.children;\n }\n\n return (\n \n
    \n
    \n \n
    \n
    \n
    \n Console\n
    \n
    \n \n
    \n
    \n
    \n \n {level === 'error' && }\n {level === 'warning' && }\n
    {message}
    \n \n \n );\n}\n\nexport function ConsoleBlockMulti({children}: ConsoleBlockMultiProps) {\n return (\n \n
    \n
    \n \n
    \n
    \n
    \n Console\n
    \n
    \n \n
    \n
    \n
    \n
    \n {children}\n
    \n \n );\n}\n\nexport function ConsoleLogLine({children, level}: ConsoleBlockProps) {\n let message: React.ReactNode | null;\n if (typeof children === 'string') {\n message = children;\n } else if (isValidElement(children)) {\n message = (children as React.ReactElement<{children?: React.ReactNode}>)\n .props.children;\n } else if (Array.isArray(children)) {\n message = children.reduce((result, child) => {\n if (typeof child === 'string') {\n result += child;\n } else if (isValidElement(child)) {\n // @ts-ignore\n result += child.props.children;\n }\n return result;\n }, '');\n }\n\n return (\n \n {level === 'error' && (\n \n )}\n {level === 'warning' && (\n \n )}\n
    \n {message}\n
    \n \n );\n}\n" }, { "path": "src/components/MDX/Diagram.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport Image from 'next/image';\n\ninterface DiagramProps {\n name: string;\n alt: string;\n height: number;\n width: number;\n children: string;\n captionPosition: 'top' | 'bottom' | null;\n}\n\nfunction Caption({text}: {text: string}) {\n return (\n
    \n
    \n {text}\n
    \n
    \n );\n}\n\nexport function Diagram({\n name,\n alt,\n height,\n width,\n children,\n captionPosition,\n}: DiagramProps) {\n return (\n
    \n {captionPosition === 'top' && }\n
    \n \n
    \n
    \n \n
    \n {(!captionPosition || captionPosition === 'bottom') && (\n \n )}\n
    \n );\n}\n\nexport default Diagram;\n" }, { "path": "src/components/MDX/DiagramGroup.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {ReactNode} from 'react';\n\ninterface DiagramGroupProps {\n children: ReactNode;\n}\n\nexport function DiagramGroup({children}: DiagramGroupProps) {\n return (\n
    \n {children}\n
    \n );\n}\n\nexport default DiagramGroup;\n" }, { "path": "src/components/MDX/ErrorDecoder.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {useEffect, useState} from 'react';\nimport {useErrorDecoderParams} from '../ErrorDecoderContext';\nimport cn from 'classnames';\n\nfunction replaceArgs(\n msg: string,\n argList: Array,\n replacer = '[missing argument]'\n): string {\n let argIdx = 0;\n return msg.replace(/%s/g, function () {\n const arg = argList[argIdx++];\n // arg can be an empty string: ?args[0]=&args[1]=count\n return arg === undefined ? replacer : arg;\n });\n}\n\n/**\n * Sindre Sorhus \n * Released under MIT license\n * https://github.com/sindresorhus/linkify-urls/blob/b2397096df152e2f799011f7a48e5f73b4bf1c7e/index.js#L5C1-L7C1\n *\n * The regex is used to extract URL from the string for linkify.\n */\nconst urlRegex = () =>\n /((?:https?(?::\\/\\/))(?:www\\.)?(?:[a-zA-Z\\d-_.]+(?:(?:\\.|@)[a-zA-Z\\d]{2,})|localhost)(?:(?:[-a-zA-Z\\d:%_+.~#!?&//=@]*)(?:[,](?![\\s]))*)*)/g;\n\n// When the message contains a URL (like https://fb.me/react-refs-must-have-owner),\n// make it a clickable link.\nfunction urlify(str: string): React.ReactNode[] {\n const segments = str.split(urlRegex());\n\n return segments.map((message, i) => {\n if (i % 2 === 1) {\n return (\n \n {message}\n \n );\n }\n return message;\n });\n}\n\n// `?args[]=foo&args[]=bar`\n// or `// ?args[0]=foo&args[1]=bar`\nfunction parseQueryString(search: string): Array {\n const rawQueryString = search.substring(1);\n if (!rawQueryString) {\n return [];\n }\n\n const args: Array = [];\n\n const queries = rawQueryString.split('&');\n for (let i = 0; i < queries.length; i++) {\n const query = decodeURIComponent(queries[i]);\n if (query.startsWith('args[')) {\n args.push(query.slice(query.indexOf(']=') + 2));\n }\n }\n\n return args;\n}\n\nexport default function ErrorDecoder() {\n const {errorMessage, errorCode} = useErrorDecoderParams();\n /** error messages that contain %s require reading location.search */\n const hasParams = errorMessage?.includes('%s');\n const [message, setMessage] = useState(() =>\n errorMessage ? urlify(errorMessage) : null\n );\n\n const [isReady, setIsReady] = useState(errorMessage == null || !hasParams);\n\n useEffect(() => {\n if (errorMessage == null || !hasParams) {\n return;\n }\n const args = parseQueryString(window.location.search);\n let message = errorMessage;\n if (errorCode === '418') {\n // Hydration errors have a %s for the diff, but we don't add that to the args for security reasons.\n message = message.replace(/%s$/, '');\n\n // Before React 19.1, the error message didn't have an arg, and was always HTML.\n if (args.length === 0) {\n args.push('HTML');\n } else if (args.length === 1 && args[0] === '') {\n args[0] = 'HTML';\n }\n }\n\n setMessage(urlify(replaceArgs(message, args, '[missing argument]')));\n setIsReady(true);\n }, [errorCode, hasParams, errorMessage]);\n\n return (\n \n {message}\n \n );\n}\n" }, { "path": "src/components/MDX/ExpandableCallout.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport cn from 'classnames';\nimport {IconNote} from '../Icon/IconNote';\nimport {IconWarning} from '../Icon/IconWarning';\nimport {IconPitfall} from '../Icon/IconPitfall';\nimport {IconCanary} from '../Icon/IconCanary';\nimport {IconRocket} from '../Icon/IconRocket';\n\ntype CalloutVariants =\n | 'deprecated'\n | 'pitfall'\n | 'note'\n | 'wip'\n | 'canary'\n | 'experimental'\n | 'rc'\n | 'major'\n | 'rsc';\n\ninterface ExpandableCalloutProps {\n children: React.ReactNode;\n type: CalloutVariants;\n}\n\nconst variantMap = {\n deprecated: {\n title: 'Deprecated',\n Icon: IconWarning,\n containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20',\n textColor: 'text-red-50 dark:text-red-40',\n overlayGradient:\n 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',\n },\n note: {\n title: '補足',\n Icon: IconNote,\n containerClasses:\n 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',\n textColor: 'text-green-60 dark:text-green-40',\n overlayGradient:\n 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',\n },\n rc: {\n title: 'RC',\n Icon: IconCanary,\n containerClasses:\n 'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',\n textColor: 'text-gray-60 dark:text-gray-30',\n overlayGradient:\n 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',\n },\n canary: {\n title: 'Canary',\n Icon: IconCanary,\n containerClasses:\n 'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',\n textColor: 'text-gray-60 dark:text-gray-30',\n overlayGradient:\n 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',\n },\n experimental: {\n title: '実験的機能',\n Icon: IconCanary,\n containerClasses:\n 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',\n textColor: 'text-green-60 dark:text-green-40',\n overlayGradient:\n 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',\n },\n pitfall: {\n title: '落とし穴',\n Icon: IconPitfall,\n containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',\n textColor: 'text-yellow-50 dark:text-yellow-40',\n overlayGradient:\n 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',\n },\n wip: {\n title: '準備中',\n Icon: IconNote,\n containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',\n textColor: 'text-yellow-50 dark:text-yellow-40',\n overlayGradient:\n 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',\n },\n major: {\n title: 'React 19',\n Icon: IconRocket,\n containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',\n textColor: 'text-blue-50 dark:text-blue-40',\n overlayGradient:\n 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',\n },\n rsc: {\n title: 'React Server Components',\n Icon: null,\n containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',\n textColor: 'text-blue-50 dark:text-blue-40',\n overlayGradient:\n 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',\n },\n};\n\nfunction ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {\n const variant = variantMap[type];\n\n return (\n \n

    \n {variant.Icon && (\n \n )}\n {variant.title}\n

    \n
    \n
    {children}
    \n
    \n \n );\n}\n\nexport default ExpandableCallout;\n" }, { "path": "src/components/MDX/ExpandableExample.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport cn from 'classnames';\nimport {IconChevron} from '../Icon/IconChevron';\nimport {IconDeepDive} from '../Icon/IconDeepDive';\nimport {IconCodeBlock} from '../Icon/IconCodeBlock';\nimport {Button} from '../Button';\nimport {H4} from './Heading';\nimport {useRouter} from 'next/router';\nimport {useEffect, useRef, useState} from 'react';\n\ninterface ExpandableExampleProps {\n children: React.ReactNode;\n excerpt?: string;\n type: 'DeepDive' | 'Example';\n}\n\nfunction ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {\n if (!Array.isArray(children) || children[0].type.mdxName !== 'h4') {\n throw Error(\n `Expandable content ${type} is missing a corresponding title at the beginning`\n );\n }\n const isDeepDive = type === 'DeepDive';\n const isExample = type === 'Example';\n const id = children[0].props.id;\n\n const {asPath} = useRouter();\n const shouldAutoExpand = id === asPath.split('#')[1];\n const queuedExpandRef = useRef(shouldAutoExpand);\n const [isExpanded, setIsExpanded] = useState(false);\n\n useEffect(() => {\n if (queuedExpandRef.current) {\n queuedExpandRef.current = false;\n setIsExpanded(true);\n }\n }, []);\n\n return (\n {\n setIsExpanded(e.currentTarget!.open);\n }}\n className={cn(\n 'my-12 rounded-2xl shadow-inner-border dark:shadow-inner-border-dark relative',\n {\n 'dark:bg-opacity-20 dark:bg-purple-60 bg-purple-5': isDeepDive,\n 'dark:bg-opacity-20 dark:bg-yellow-60 bg-yellow-5': isExample,\n }\n )}>\n {\n // We toggle using a button instead of this whole area,\n // with an escape case for the header anchor link\n if (!(e.target instanceof SVGElement)) {\n e.preventDefault();\n }\n }}>\n \n {isDeepDive && (\n <>\n \n さらに深く知る\n \n )}\n {isExample && (\n <>\n \n 例\n \n )}\n \n
    \n \n {children[0].props.children}\n \n {excerpt &&
    {excerpt}
    }\n
    \n setIsExpanded((current) => !current)}>\n \n \n \n {isExpanded ? '詳細を隠す' : '詳細を開く'}\n \n \n \n {children.slice(1)}\n \n \n );\n}\n\nexport default ExpandableExample;\n" }, { "path": "src/components/MDX/Heading.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport cn from 'classnames';\nimport * as React from 'react';\nimport {forwardRefWithAs} from 'utils/forwardRefWithAs';\nexport interface HeadingProps {\n className?: string;\n isPageAnchor?: boolean;\n children: React.ReactNode;\n id?: string;\n as?: any;\n}\n\nconst Heading = forwardRefWithAs(function Heading(\n {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props},\n ref\n) {\n let label = 'Link for this heading';\n if (typeof children === 'string') {\n label = 'Link for ' + children;\n }\n\n return (\n \n {children}\n {isPageAnchor && (\n \n \n \n \n \n \n \n \n )}\n \n );\n});\n\nexport const H1 = ({className, ...props}: HeadingProps) => (\n \n);\n\nexport const H2 = ({className, ...props}: HeadingProps) => (\n \n);\n\nexport const H3 = ({className, ...props}: HeadingProps) => (\n \n);\n\nexport const H4 = ({className, ...props}: HeadingProps) => (\n \n);\n\nexport const H5 = ({className, ...props}: HeadingProps) => (\n \n);\n" }, { "path": "src/components/MDX/InlineCode.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport cn from 'classnames';\nimport type {HTMLAttributes} from 'react';\n\ninterface InlineCodeProps {\n isLink?: boolean;\n meta?: string;\n}\nfunction InlineCode({\n isLink,\n ...props\n}: HTMLAttributes & InlineCodeProps) {\n return (\n in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()`\n className={cn(\n 'inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline',\n {\n 'bg-gray-30 bg-opacity-10 py-px': !isLink,\n 'bg-highlight dark:bg-highlight-dark py-0': isLink,\n }\n )}\n {...props}\n />\n );\n}\n\nexport default InlineCode;\n" }, { "path": "src/components/MDX/Intro.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\n\nexport interface IntroProps {\n children?: React.ReactNode;\n}\n\nfunction Intro({children}: IntroProps) {\n return (\n
    \n {children}\n
    \n );\n}\n\nexport default Intro;\n" }, { "path": "src/components/MDX/LanguagesContext.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {createContext} from 'react';\n\nexport type LanguageItem = {\n code: string;\n name: string;\n enName: string;\n};\nexport type Languages = Array;\n\nexport const LanguagesContext = createContext(null);\n" }, { "path": "src/components/MDX/Link.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Children, cloneElement} from 'react';\nimport NextLink from 'next/link';\nimport cn from 'classnames';\n\nimport {ExternalLink} from 'components/ExternalLink';\n\nfunction Link({\n href,\n className,\n children,\n ...props\n}: React.AnchorHTMLAttributes) {\n const classes =\n 'inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal';\n const modifiedChildren = Children.toArray(children).map((child: any) => {\n if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') {\n return cloneElement(child, {\n isLink: true,\n });\n }\n return child;\n });\n\n if (!href) {\n // eslint-disable-next-line jsx-a11y/anchor-has-content\n return ;\n }\n\n // Tweak external links (added by ja.react.dev team)\n href = href\n .replace(\n 'https://developer.mozilla.org/en-US/',\n 'https://developer.mozilla.org/'\n )\n .replace('https://reactjs.org/', 'https://ja.reactjs.org/')\n .replace('https://legacy.reactjs.org/', 'https://ja.legacy.reactjs.org/');\n\n return (\n <>\n {href.startsWith('https://') ? (\n \n {modifiedChildren}\n \n ) : href.startsWith('#') ? (\n // eslint-disable-next-line jsx-a11y/anchor-has-content\n \n {modifiedChildren}\n \n ) : (\n \n {modifiedChildren}\n \n )}\n \n );\n}\n\nexport default Link;\n" }, { "path": "src/components/MDX/MDXComponents.module.css", "content": "/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\n/* Stop purging. */\n.markdown p {\n @apply mb-4 leading-7 whitespace-pre-wrap text-gray-70;\n}\n\n.markdown ol {\n @apply mb-4 ms-8 list-decimal;\n}\n\n.markdown ul {\n @apply mb-4 ms-8 list-disc;\n}\n\n.markdown h1 {\n @apply mb-6 text-4xl font-extrabold tracking-tight;\n}\n\n.markdown h2 {\n @apply mt-12 mb-4 text-3xl font-extrabold tracking-tight;\n}\n.markdown h3 {\n @apply mt-8 mb-3 text-2xl font-extrabold tracking-tight;\n}\n.markdown h4 {\n @apply mt-8 mb-3 text-xl font-extrabold tracking-tight;\n}\n\n.markdown code {\n @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline;\n font-size: 90%;\n}\n\n.markdown li {\n @apply mb-2;\n}\n\n.markdown a {\n @apply inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal;\n}\n" }, { "path": "src/components/MDX/MDXComponents.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Children, useContext, useMemo} from 'react';\nimport * as React from 'react';\nimport cn from 'classnames';\nimport type {HTMLAttributes} from 'react';\n\nimport CodeBlock from './CodeBlock';\nimport {CodeDiagram} from './CodeDiagram';\nimport {ConsoleBlock, ConsoleLogLine, ConsoleBlockMulti} from './ConsoleBlock';\nimport ExpandableCallout from './ExpandableCallout';\nimport ExpandableExample from './ExpandableExample';\nimport {H1, H2, H3, H4, H5} from './Heading';\nimport InlineCode from './InlineCode';\nimport Intro from './Intro';\nimport BlogCard from './BlogCard';\nimport Link from './Link';\nimport {PackageImport} from './PackageImport';\nimport Recap from './Recap';\nimport Sandpack from './Sandpack';\nimport SandpackWithHTMLOutput from './SandpackWithHTMLOutput';\nimport Diagram from './Diagram';\nimport DiagramGroup from './DiagramGroup';\nimport SimpleCallout from './SimpleCallout';\nimport TerminalBlock from './TerminalBlock';\nimport YouWillLearnCard from './YouWillLearnCard';\nimport {Challenges, Hint, Solution} from './Challenges';\nimport {IconNavArrow} from '../Icon/IconNavArrow';\nimport ButtonLink from 'components/ButtonLink';\nimport {TocContext} from './TocContext';\nimport type {Toc, TocItem} from './TocContext';\nimport {TeamMember} from './TeamMember';\nimport {LanguagesContext} from './LanguagesContext';\nimport {finishedTranslations} from 'utils/finishedTranslations';\n\nimport ErrorDecoder from './ErrorDecoder';\nimport {IconCanary} from '../Icon/IconCanary';\nimport {IconExperimental} from 'components/Icon/IconExperimental';\n\nfunction CodeStep({children, step}: {children: any; step: number}) {\n return (\n \n {children}\n \n );\n}\n\nconst P = (p: HTMLAttributes) => (\n

    \n);\n\nconst Strong = (strong: HTMLAttributes) => (\n \n);\n\nconst OL = (p: HTMLAttributes) => (\n

      \n);\nconst LI = (p: HTMLAttributes) => (\n
    1. \n);\nconst UL = (p: HTMLAttributes) => (\n
        \n);\n\nconst Divider = () => (\n
        \n);\nconst Wip = ({children}: {children: React.ReactNode}) => (\n {children}\n);\nconst Pitfall = ({children}: {children: React.ReactNode}) => (\n {children}\n);\nconst Deprecated = ({children}: {children: React.ReactNode}) => (\n {children}\n);\nconst Note = ({children}: {children: React.ReactNode}) => (\n {children}\n);\n\nconst Canary = ({children}: {children: React.ReactNode}) => (\n {children}\n);\n\nconst RC = ({children}: {children: React.ReactNode}) => (\n {children}\n);\n\nconst Experimental = ({children}: {children: React.ReactNode}) => (\n {children}\n);\n\nconst NextMajor = ({children}: {children: React.ReactNode}) => (\n {children}\n);\n\nconst RSC = ({children}: {children: React.ReactNode}) => (\n {children}\n);\n\nconst CanaryBadge = ({title}: {title: string}) => (\n \n \n Canary only\n \n);\n\nconst ExperimentalBadge = ({title}: {title: string}) => (\n \n \n Experimental only\n \n);\n\nconst NextMajorBadge = ({title}: {title: string}) => (\n \n React 19\n \n);\n\nconst RSCBadge = ({title}: {title: string}) => (\n \n RSC\n \n);\n\nconst Blockquote = ({children, ...props}: HTMLAttributes) => {\n return (\n \n {children}\n \n );\n};\n\nfunction LearnMore({\n children,\n path,\n}: {\n title: string;\n path?: string;\n children: any;\n}) {\n return (\n <>\n
        \n
        \n

        \n Ready to learn this topic?\n

        \n {children}\n {path ? (\n \n Read More\n \n \n ) : null}\n
        \n
        \n
        \n \n );\n}\n\nfunction ReadBlogPost({path}: {path: string}) {\n return (\n \n Read Post\n \n \n );\n}\n\nfunction Math({children}: {children: any}) {\n return (\n \n {children}\n \n );\n}\n\nfunction MathI({children}: {children: any}) {\n return (\n \n {children}\n \n );\n}\n\nfunction YouWillLearn({\n children,\n isChapter,\n}: {\n children: any;\n isChapter?: boolean;\n}) {\n let title = isChapter ? 'この章で学ぶこと' : 'このページで学ぶこと';\n return {children};\n}\n\n// TODO: typing.\nfunction Recipes(props: any) {\n return ;\n}\n\nfunction AuthorCredit({\n author = 'Rachel Lee Nabors',\n authorLink = 'https://nearestnabors.com/',\n}: {\n author: string;\n authorLink: string;\n}) {\n return (\n
        \n

        \n \n Illustrated by{' '}\n {authorLink ? (\n \n {author}\n \n ) : (\n author\n )}\n \n

        \n
        \n );\n}\n\nconst IllustrationContext = React.createContext<{\n isInBlock?: boolean;\n}>({\n isInBlock: false,\n});\n\nfunction Illustration({\n caption,\n src,\n alt,\n author,\n authorLink,\n}: {\n caption: string;\n src: string;\n alt: string;\n author: string;\n authorLink: string;\n}) {\n const {isInBlock} = React.useContext(IllustrationContext);\n\n return (\n
        \n
        \n \n {caption ? (\n
        \n {caption}\n
        \n ) : null}\n
        \n {!isInBlock && }\n
        \n );\n}\n\nconst isInBlockTrue = {isInBlock: true};\n\nfunction IllustrationBlock({\n sequential,\n author,\n authorLink,\n children,\n}: {\n author: string;\n authorLink: string;\n sequential: boolean;\n children: any;\n}) {\n const imageInfos = Children.toArray(children).map(\n (child: any) => child.props\n );\n const images = imageInfos.map((info, index) => (\n
        \n
        \n \n
        \n {info.caption ? (\n
        \n {info.caption}\n
        \n ) : null}\n
        \n ));\n return (\n \n
        \n {sequential ? (\n
          \n {images.map((x: any, i: number) => (\n
        1. \n {x}\n
          2. \n ))}\n
        \n ) : (\n
        {images}
        \n )}\n \n
        \n         \n );\n}\n\ntype NestedTocRoot = {\n item: null;\n children: Array;\n};\n\ntype NestedTocNode = {\n item: TocItem;\n children: Array;\n};\n\nfunction calculateNestedToc(toc: Toc): NestedTocRoot {\n const currentAncestors = new Map();\n const root: NestedTocRoot = {\n item: null,\n children: [],\n };\n const startIndex = 1; // Skip \"Overview\"\n for (let i = startIndex; i < toc.length; i++) {\n const item = toc[i];\n const currentParent: NestedTocNode | NestedTocRoot =\n currentAncestors.get(item.depth - 1) || root;\n const node: NestedTocNode = {\n item,\n children: [],\n };\n currentParent.children.push(node);\n currentAncestors.set(item.depth, node);\n }\n return root;\n}\n\nfunction InlineToc() {\n const toc = useContext(TocContext);\n const root = useMemo(() => calculateNestedToc(toc), [toc]);\n if (root.children.length < 2) {\n return null;\n }\n return ;\n}\n\nfunction InlineTocItem({items}: {items: Array}) {\n return (\n
          \n {items.map((node) => (\n
        • \n {node.item.text}\n {node.children.length > 0 && }\n
          • \n ))}\n
        \n );\n}\n\ntype TranslationProgress = 'complete' | 'in-progress';\n\nfunction LanguageList({progress}: {progress: TranslationProgress}) {\n const allLanguages = React.useContext(LanguagesContext) ?? [];\n const languages = allLanguages\n .filter(\n ({code}) =>\n code !== 'en' &&\n (progress === 'complete'\n ? finishedTranslations.includes(code)\n : !finishedTranslations.includes(code))\n )\n .sort((a, b) => a.enName.localeCompare(b.enName));\n return (\n
          \n {languages.map(({code, name, enName}) => {\n return (\n
        • \n \n {enName} ({name})\n {' '}\n —{' '}\n \n Contribute\n \n
          • \n );\n })}\n
        \n );\n}\n\nfunction YouTubeIframe(props: any) {\n return (\n
        \n \n
        \n );\n}\n\nfunction Image(props: any) {\n const {alt, ...rest} = props;\n return {alt};\n}\n\nexport const MDXComponents = {\n p: P,\n strong: Strong,\n blockquote: Blockquote,\n ol: OL,\n ul: UL,\n li: LI,\n h1: H1,\n h2: H2,\n h3: H3,\n h4: H4,\n h5: H5,\n hr: Divider,\n a: Link,\n img: Image,\n BlogCard,\n code: InlineCode,\n pre: CodeBlock,\n CodeDiagram,\n ConsoleBlock,\n ConsoleBlockMulti,\n ConsoleLogLine,\n DeepDive: (props: {\n children: React.ReactNode;\n title: string;\n excerpt: string;\n }) => ,\n Diagram,\n DiagramGroup,\n FullWidth({children}: {children: any}) {\n return children;\n },\n MaxWidth({children}: {children: any}) {\n return
        {children}
        ;\n },\n Pitfall,\n Deprecated,\n Wip,\n Illustration,\n IllustrationBlock,\n Intro,\n InlineToc,\n LanguageList,\n LearnMore,\n Math,\n MathI,\n Note,\n RC,\n Canary,\n Experimental,\n ExperimentalBadge,\n CanaryBadge,\n NextMajor,\n NextMajorBadge,\n RSC,\n RSCBadge,\n PackageImport,\n ReadBlogPost,\n Recap,\n Recipes,\n Sandpack,\n SandpackWithHTMLOutput,\n TeamMember,\n TerminalBlock,\n YouWillLearn,\n YouWillLearnCard,\n Challenges,\n Hint,\n Solution,\n CodeStep,\n YouTubeIframe,\n ErrorDecoder,\n};\n\nfor (let key in MDXComponents) {\n if (MDXComponents.hasOwnProperty(key)) {\n const MDXComponent: any = (MDXComponents as any)[key];\n MDXComponent.mdxName = key;\n }\n}\n" }, { "path": "src/components/MDX/PackageImport.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Children} from 'react';\nimport * as React from 'react';\nimport CodeBlock from './CodeBlock';\n\ninterface PackageImportProps {\n children: React.ReactNode;\n}\n\nexport function PackageImport({children}: PackageImportProps) {\n const terminal = Children.toArray(children).filter((child: any) => {\n return child.type?.mdxName !== 'pre';\n });\n const code = Children.toArray(children).map((child: any, i: number) => {\n if (child.type?.mdxName === 'pre') {\n return (\n \n );\n } else {\n return null;\n }\n });\n return (\n
        \n
        {terminal}
        \n
        {code}
        \n
        \n );\n}\n" }, { "path": "src/components/MDX/Recap.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport {H2} from './Heading';\n\ninterface RecapProps {\n children: React.ReactNode;\n}\n\nfunction Recap({children}: RecapProps) {\n return (\n
        \n

        \n まとめ\n

        \n {children}\n
        \n );\n}\n\nexport default Recap;\n" }, { "path": "src/components/MDX/Sandpack/ClearButton.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport {IconClose} from '../../Icon/IconClose';\nexport interface ClearButtonProps {\n onClear: () => void;\n}\n\nexport function ClearButton({onClear}: ClearButtonProps) {\n return (\n \n \n Clear\n \n );\n}\n" }, { "path": "src/components/MDX/Sandpack/Console.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\nimport cn from 'classnames';\nimport {useState, useRef, useEffect} from 'react';\nimport {IconChevron} from 'components/Icon/IconChevron';\n\nimport {\n SandpackCodeViewer,\n useSandpack,\n} from '@codesandbox/sandpack-react/unstyled';\nimport type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client';\n\nconst getType = (\n message: SandpackMessageConsoleMethods\n): 'info' | 'warning' | 'error' => {\n if (message === 'log' || message === 'info') {\n return 'info';\n }\n\n if (message === 'warn') {\n return 'warning';\n }\n\n return 'error';\n};\n\nconst getColor = (message: SandpackMessageConsoleMethods): string => {\n if (message === 'warn') {\n return 'text-yellow-50';\n } else if (message === 'error') {\n return 'text-red-40';\n } else {\n return 'text-secondary dark:text-secondary-dark';\n }\n};\n\n// based on https://github.com/tmpfs/format-util/blob/0e62d430efb0a1c51448709abd3e2406c14d8401/format.js#L1\n// based on https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions\n// Implements s, d, i and f placeholders\nfunction formatStr(...inputArgs: any[]): any[] {\n const maybeMessage = inputArgs[0];\n if (typeof maybeMessage !== 'string') {\n return inputArgs;\n }\n // If the first argument is a string, check for substitutions.\n const args = inputArgs.slice(1);\n let formatted: string = String(maybeMessage);\n if (args.length) {\n const REGEXP = /(%?)(%([jds]))/g;\n\n formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {\n let arg = args.shift();\n switch (flag) {\n case 's':\n arg += '';\n break;\n case 'd':\n case 'i':\n arg = parseInt(arg, 10).toString();\n break;\n case 'f':\n arg = parseFloat(arg).toString();\n break;\n }\n if (!escaped) {\n return arg;\n }\n args.unshift(arg);\n return match;\n });\n }\n\n // Arguments that remain after formatting.\n if (args.length) {\n for (let i = 0; i < args.length; i++) {\n formatted += ' ' + String(args[i]);\n }\n }\n\n // Update escaped %% values.\n return [formatted.replace(/%{2,2}/g, '%')];\n}\n\ntype ConsoleData = Array<{\n data: Array>;\n id: string;\n method: SandpackMessageConsoleMethods;\n}>;\n\nconst MAX_MESSAGE_COUNT = 100;\n\nexport const SandpackConsole = ({visible}: {visible: boolean}) => {\n const {listen} = useSandpack();\n const [logs, setLogs] = useState([]);\n const wrapperRef = useRef(null);\n\n useEffect(() => {\n let isActive = true;\n const unsubscribe = listen((message) => {\n if (!isActive) {\n console.warn('Received an unexpected log from Sandpack.');\n return;\n }\n if (\n (message.type === 'start' && message.firstLoad) ||\n message.type === 'refresh'\n ) {\n setLogs([]);\n }\n if (message.type === 'console' && message.codesandbox) {\n setLogs((prev) => {\n const newLogs = message.log\n .filter((consoleData) => {\n if (!consoleData.method) {\n return false;\n }\n if (\n typeof consoleData.data[0] === 'string' &&\n consoleData.data[0].indexOf('The above error occurred') !== -1\n ) {\n // Don't show React error addendum because\n // we have a custom error overlay.\n return false;\n }\n return true;\n })\n .map((consoleData) => {\n return {\n ...consoleData,\n data: formatStr(...consoleData.data),\n };\n });\n let messages = [...prev, ...newLogs];\n while (messages.length > MAX_MESSAGE_COUNT) {\n messages.shift();\n }\n return messages;\n });\n }\n });\n\n return () => {\n unsubscribe();\n isActive = false;\n };\n }, [listen]);\n\n const [isExpanded, setIsExpanded] = useState(true);\n\n useEffect(() => {\n if (wrapperRef.current) {\n wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;\n }\n }, [logs]);\n\n if (!visible || logs.length === 0) {\n return null;\n }\n\n return (\n
        \n
        \n setIsExpanded(!isExpanded)}>\n \n Console ({logs.length})\n \n {\n setLogs([]);\n }}>\n \n \n \n \n \n
        \n {isExpanded && (\n
        \n
        \n {logs.map(({data, id, method}) => {\n return (\n \n \n {data.map((msg, index) => {\n if (typeof msg === 'string') {\n return {msg};\n }\n\n let children;\n if (msg != null && typeof msg['@t'] === 'string') {\n // CodeSandbox wraps custom types\n children = msg['@t'];\n } else {\n try {\n children = JSON.stringify(msg, null, 2);\n } catch (error) {\n try {\n children = Object.prototype.toString.call(msg);\n } catch (err) {\n children = '[' + typeof msg + ']';\n }\n }\n }\n\n return (\n \n \n \n );\n })}\n \n
        \n );\n })}\n
        \n
        \n )}\n \n );\n};\n" }, { "path": "src/components/MDX/Sandpack/CustomPreset.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\nimport {memo, useRef, useState} from 'react';\nimport {flushSync} from 'react-dom';\nimport {\n useSandpack,\n useActiveCode,\n SandpackCodeEditor,\n SandpackLayout,\n} from '@codesandbox/sandpack-react/unstyled';\nimport cn from 'classnames';\n\nimport {IconChevron} from 'components/Icon/IconChevron';\nimport {NavigationBar} from './NavigationBar';\nimport {Preview} from './Preview';\n\nimport {useSandpackLint} from './useSandpackLint';\n\nexport const CustomPreset = memo(function CustomPreset({\n providedFiles,\n}: {\n providedFiles: Array;\n}) {\n const {lintErrors, lintExtensions} = useSandpackLint();\n const {sandpack} = useSandpack();\n const {code} = useActiveCode();\n const {activeFile} = sandpack;\n const lineCountRef = useRef<{[key: string]: number}>({});\n if (!lineCountRef.current[activeFile]) {\n // eslint-disable-next-line react-compiler/react-compiler\n lineCountRef.current[activeFile] = code.split('\\n').length;\n }\n const lineCount = lineCountRef.current[activeFile];\n const isExpandable = lineCount > 16;\n return (\n \n );\n});\n\nconst SandboxShell = memo(function SandboxShell({\n providedFiles,\n lintErrors,\n lintExtensions,\n isExpandable,\n}: {\n providedFiles: Array;\n lintErrors: Array;\n lintExtensions: Array;\n isExpandable: boolean;\n}) {\n const containerRef = useRef(null);\n const [isExpanded, setIsExpanded] = useState(false);\n return (\n <>\n \n \n \n \n \n {(isExpandable || isExpanded) && (\n {\n const nextIsExpanded = !isExpanded;\n flushSync(() => {\n setIsExpanded(nextIsExpanded);\n });\n if (!nextIsExpanded && containerRef.current !== null) {\n // @ts-ignore\n if (containerRef.current.scrollIntoViewIfNeeded) {\n // @ts-ignore\n containerRef.current.scrollIntoViewIfNeeded();\n } else {\n containerRef.current.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n });\n }\n }\n }}>\n \n \n {isExpanded ? 'Show less' : 'Show more'}\n \n \n )}\n \n \n \n );\n});\n\nconst Editor = memo(function Editor({\n lintExtensions,\n}: {\n lintExtensions: Array;\n}) {\n return (\n \n );\n});\n" }, { "path": "src/components/MDX/Sandpack/DownloadButton.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {useSyncExternalStore} from 'react';\nimport {useSandpack} from '@codesandbox/sandpack-react/unstyled';\nimport {IconDownload} from '../../Icon/IconDownload';\nimport {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap';\nexport interface DownloadButtonProps {}\n\nlet supportsImportMap = false;\n\nfunction subscribe(cb: () => void) {\n // This shouldn't actually need to update, but this works around\n // https://github.com/facebook/react/issues/26095\n let timeout = setTimeout(() => {\n supportsImportMap =\n (HTMLScriptElement as any).supports &&\n (HTMLScriptElement as any).supports('importmap');\n cb();\n }, 0);\n return () => clearTimeout(timeout);\n}\n\nfunction useSupportsImportMap() {\n function getCurrentValue() {\n return supportsImportMap;\n }\n function getServerSnapshot() {\n return false;\n }\n\n return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot);\n}\n\nexport function DownloadButton({\n providedFiles,\n}: {\n providedFiles: Array;\n}) {\n const {sandpack} = useSandpack();\n const supported = useSupportsImportMap();\n if (!supported) {\n return null;\n }\n if (providedFiles.some((file) => !SUPPORTED_FILES.includes(file))) {\n return null;\n }\n\n const downloadHTML = () => {\n const css = sandpack.files[StylesCSSPath]?.code ?? '';\n const code = sandpack.files[AppJSPath]?.code ?? '';\n const blob = new Blob([\n `\n\n\n
        \n\n\n\n\n\n\n\n\n`,\n ]);\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.style.display = 'none';\n a.href = url;\n a.download = 'sandbox.html';\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n };\n\n return (\n \n Download\n \n );\n}\n" }, { "path": "src/components/MDX/Sandpack/ErrorMessage.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\ninterface ErrorType {\n title?: string;\n message: string;\n column?: number;\n line?: number;\n path?: string;\n}\n\nexport function ErrorMessage({error, ...props}: {error: ErrorType}) {\n const {message, title} = error;\n\n return (\n
        \n

        {title || 'Error'}

        \n 
        \n        {message}\n
        \n
        \n );\n}\n" }, { "path": "src/components/MDX/Sandpack/LoadingOverlay.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {useState} from 'react';\n\nimport {\n LoadingOverlayState,\n OpenInCodeSandboxButton,\n useSandpack,\n} from '@codesandbox/sandpack-react/unstyled';\nimport {useEffect} from 'react';\n\nconst FADE_ANIMATION_DURATION = 200;\n\nexport const LoadingOverlay = ({\n clientId,\n dependenciesLoading,\n forceLoading,\n}: {\n clientId: string;\n dependenciesLoading: boolean;\n forceLoading: boolean;\n} & React.HTMLAttributes): React.ReactNode | null => {\n const loadingOverlayState = useLoadingOverlayState(\n clientId,\n dependenciesLoading,\n forceLoading\n );\n\n if (loadingOverlayState === 'HIDDEN') {\n return null;\n }\n\n if (loadingOverlayState === 'TIMEOUT') {\n return (\n
        \n
        \n Unable to establish connection with the sandpack bundler. Make sure\n you are online or try again later. If the problem persists, please\n report it via{' '}\n \n email\n {' '}\n or submit an issue on{' '}\n \n GitHub.\n \n
        \n
        \n );\n }\n\n const stillLoading =\n loadingOverlayState === 'LOADING' || loadingOverlayState === 'PRE_FADING';\n\n return (\n \n
        \n {/* @ts-ignore: the OpenInCodeSandboxButton type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}\n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n );\n};\n\nconst useLoadingOverlayState = (\n clientId: string,\n dependenciesLoading: boolean,\n forceLoading: boolean\n): LoadingOverlayState => {\n const {sandpack, listen} = useSandpack();\n const [state, setState] = useState('HIDDEN');\n\n if (state !== 'LOADING' && forceLoading) {\n setState('LOADING');\n }\n\n /**\n * Sandpack listener\n */\n const sandpackIdle = sandpack.status === 'idle';\n useEffect(() => {\n const unsubscribe = listen((message) => {\n if (message.type === 'done') {\n setState((prev) => {\n return prev === 'LOADING' ? 'PRE_FADING' : 'HIDDEN';\n });\n }\n }, clientId);\n\n return () => {\n unsubscribe();\n };\n }, [listen, clientId, sandpackIdle]);\n\n /**\n * Fading transient state\n */\n useEffect(() => {\n let fadeTimeout: ReturnType;\n\n if (state === 'PRE_FADING' && !dependenciesLoading) {\n setState('FADING');\n } else if (state === 'FADING') {\n fadeTimeout = setTimeout(\n () => setState('HIDDEN'),\n FADE_ANIMATION_DURATION\n );\n }\n\n return () => {\n clearTimeout(fadeTimeout);\n };\n }, [state, dependenciesLoading]);\n\n if (sandpack.status === 'timeout') {\n return 'TIMEOUT';\n }\n\n if (sandpack.status !== 'running') {\n return 'HIDDEN';\n }\n\n return state;\n};\n" }, { "path": "src/components/MDX/Sandpack/NavigationBar.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {\n useRef,\n useInsertionEffect,\n useCallback,\n useState,\n useEffect,\n Fragment,\n} from 'react';\nimport cn from 'classnames';\nimport {\n FileTabs,\n useSandpack,\n useSandpackNavigation,\n} from '@codesandbox/sandpack-react/unstyled';\nimport {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';\nimport {ReloadButton} from './ReloadButton';\nimport {ClearButton} from './ClearButton';\nimport {DownloadButton} from './DownloadButton';\nimport {IconChevron} from '../../Icon/IconChevron';\nimport {Listbox} from '@headlessui/react';\nimport {OpenInTypeScriptPlaygroundButton} from './OpenInTypeScriptPlayground';\n\nexport function useEvent(fn: any): any {\n const ref = useRef(null);\n useInsertionEffect(() => {\n ref.current = fn;\n }, [fn]);\n return useCallback((...args: any) => {\n const f = ref.current!;\n // @ts-ignore\n return f(...args);\n }, []);\n}\n\nconst getFileName = (filePath: string): string => {\n const lastIndexOfSlash = filePath.lastIndexOf('/');\n return filePath.slice(lastIndexOfSlash + 1);\n};\n\nexport function NavigationBar({providedFiles}: {providedFiles: Array}) {\n const {sandpack} = useSandpack();\n const containerRef = useRef(null);\n const tabsRef = useRef(null);\n // By default, show the dropdown because all tabs may not fit.\n // We don't know whether they'll fit or not until after hydration:\n const [showDropdown, setShowDropdown] = useState(true);\n const {activeFile, setActiveFile, visibleFiles, clients} = sandpack;\n const clientId = Object.keys(clients)[0];\n const {refresh} = useSandpackNavigation(clientId);\n const isMultiFile = visibleFiles.length > 1;\n const hasJustToggledDropdown = useRef(false);\n\n // Keep track of whether we can show all tabs or just the dropdown.\n const onContainerResize = useEvent((containerWidth: number) => {\n if (hasJustToggledDropdown.current === true) {\n // Ignore changes likely caused by ourselves.\n hasJustToggledDropdown.current = false;\n return;\n }\n if (tabsRef.current === null) {\n // Some ResizeObserver calls come after unmount.\n return;\n }\n const tabsWidth = tabsRef.current.getBoundingClientRect().width;\n const needsDropdown = tabsWidth >= containerWidth;\n if (needsDropdown !== showDropdown) {\n hasJustToggledDropdown.current = true;\n setShowDropdown(needsDropdown);\n }\n });\n\n useEffect(() => {\n if (isMultiFile) {\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (entry.contentBoxSize) {\n const contentBoxSize = Array.isArray(entry.contentBoxSize)\n ? entry.contentBoxSize[0]\n : entry.contentBoxSize;\n const width = contentBoxSize.inlineSize;\n onContainerResize(width);\n }\n }\n });\n const container = containerRef.current!;\n resizeObserver.observe(container);\n return () => resizeObserver.unobserve(container);\n } else {\n return;\n }\n\n // Note: in a real useEvent, onContainerResize would be omitted.\n }, [isMultiFile, onContainerResize]);\n\n const handleClear = () => {\n /**\n * resetAllFiles must come first, otherwise\n * the previous content will appear for a second\n * when the iframe loads.\n *\n * Plus, it should only prompt if there's any file changes\n */\n if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {\n sandpack.resetAllFiles();\n }\n refresh();\n };\n\n const handleReload = () => {\n refresh();\n };\n\n return (\n
        \n {/* If Prettier reformats this block, the two @ts-ignore directives will no longer be adjacent to the problematic lines, causing TypeScript errors */}\n {/* prettier-ignore */}\n
        \n {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}\n \n
        \n
        \n \n {/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}\n \n
        \n {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}\n \n {({open}) => (\n // If tabs don't fit, display the dropdown instead.\n // The dropdown is absolutely positioned inside the\n // space that's taken by the (invisible) tab list.\n \n \n {getFileName(activeFile)}\n {isMultiFile && (\n \n \n \n )}\n \n \n )}\n \n
        \n
        \n {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}\n {isMultiFile && showDropdown && (\n {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}\n {visibleFiles.map((filePath: string) => (\n {({active}) => (\n \n {getFileName(filePath)}\n \n )}\n \n ))}\n \n )}\n \n
        \n \n \n \n \n \n {activeFile.endsWith('.tsx') && (\n \n )}\n
        \n
        \n );\n}\n" }, { "path": "src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react/unstyled';\nimport {IconNewPage} from '../../Icon/IconNewPage';\n\nexport const OpenInCodeSandboxButton = () => {\n return (\n \n \n Fork\n \n );\n};\n" }, { "path": "src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {IconNewPage} from '../../Icon/IconNewPage';\n\nexport const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {\n const contentWithReactImport = `import * as React from 'react';\\n\\n${props.content}`;\n return (\n \n \n TypeScript Playground\n \n );\n};\n" }, { "path": "src/components/MDX/Sandpack/Preview.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\n// eslint-disable-next-line react-compiler/react-compiler\n/* eslint-disable react-hooks/exhaustive-deps */\nimport {useRef, useState, useEffect, useMemo, useId} from 'react';\nimport {useSandpack, SandpackStack} from '@codesandbox/sandpack-react/unstyled';\nimport cn from 'classnames';\nimport {ErrorMessage} from './ErrorMessage';\nimport {SandpackConsole} from './Console';\nimport type {LintDiagnostic} from './useSandpackLint';\nimport {CSSProperties} from 'react';\nimport {LoadingOverlay} from './LoadingOverlay';\n\ntype CustomPreviewProps = {\n className?: string;\n isExpanded: boolean;\n lintErrors: LintDiagnostic;\n};\n\nfunction useDebounced(value: any): any {\n const ref = useRef(null);\n const [saved, setSaved] = useState(value);\n useEffect(() => {\n clearTimeout(ref.current);\n ref.current = setTimeout(() => {\n setSaved(value);\n }, 300);\n }, [value]);\n return saved;\n}\n\nexport function Preview({\n isExpanded,\n className,\n lintErrors,\n}: CustomPreviewProps) {\n const {sandpack, listen} = useSandpack();\n const [bundlerIsReady, setBundlerIsReady] = useState(false);\n const [showLoading, setShowLoading] = useState(false);\n const [iframeComputedHeight, setComputedAutoHeight] = useState(\n null\n );\n\n let {error: rawError, registerBundler, unregisterBundler} = sandpack;\n\n if (\n rawError &&\n rawError.message === '_csbRefreshUtils.prelude is not a function'\n ) {\n // Work around a noisy internal error.\n rawError = null;\n }\n\n // When throwing a new Error in Sandpack - we want to disable the dev error dialog\n // to show the Error Boundary fallback\n if (rawError && rawError.message.includes('Example Error:')) {\n rawError = null;\n }\n\n // Memoized because it's fed to debouncing.\n const firstLintError = useMemo(() => {\n if (lintErrors.length === 0) {\n return null;\n } else {\n const {line, column, message} = lintErrors[0];\n return {\n title: 'Lint Error',\n message: `${line}:${column} - ${message}`,\n };\n }\n }, [lintErrors]);\n\n if (rawError == null || rawError.title === 'Runtime Exception') {\n if (firstLintError !== null) {\n rawError = firstLintError;\n }\n }\n\n if (rawError != null && rawError.title === 'Runtime Exception') {\n rawError.title = 'Runtime Error';\n }\n\n // It changes too fast, causing flicker.\n const error = useDebounced(rawError);\n\n const clientId = useId();\n const iframeRef = useRef(null);\n\n const sandpackIdle = sandpack.status === 'idle';\n\n useEffect(function createBundler() {\n const iframeElement = iframeRef.current!;\n registerBundler(iframeElement, clientId);\n\n return () => {\n unregisterBundler(clientId);\n };\n }, []);\n\n useEffect(\n function bundlerListener() {\n let timeout: ReturnType;\n\n const unsubscribe = listen((message) => {\n if (message.type === 'resize') {\n setComputedAutoHeight(message.height);\n } else if (message.type === 'start') {\n if (message.firstLoad) {\n setBundlerIsReady(false);\n }\n\n /**\n * The spinner component transition might be longer than\n * the bundler loading, so we only show the spinner if\n * it takes more than 500s to load the bundler.\n */\n timeout = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n } else if (message.type === 'done') {\n setBundlerIsReady(true);\n setShowLoading(false);\n clearTimeout(timeout);\n }\n }, clientId);\n\n return () => {\n clearTimeout(timeout);\n setBundlerIsReady(false);\n setComputedAutoHeight(null);\n unsubscribe();\n };\n },\n [sandpackIdle]\n );\n\n // WARNING:\n // The layout and styling here is convoluted and really easy to break.\n // If you make changes to it, you need to test different cases:\n // - Content -> (compile | runtime) error -> content editing flow should work.\n // - Errors should expand parent height rather than scroll.\n // - Long sandboxes should scroll unless \"show more\" is toggled.\n // - Expanded sandboxes (\"show more\") have sticky previews and errors.\n // - Sandboxes have autoheight based on content.\n // - That autoheight should be measured correctly! (Check some long ones.)\n // - You shouldn't see nested scrolls (that means autoheight is borked).\n // - Ideally you shouldn't see a blank preview tile while recompiling.\n // - Container shouldn't be horizontally scrollable (even while loading).\n // - It should work on mobile.\n // The best way to test it is to actually go through some challenges.\n\n const hideContent = error || !iframeComputedHeight || !bundlerIsReady;\n\n const iframeWrapperPosition = (): CSSProperties => {\n if (hideContent) {\n return {position: 'relative'};\n }\n\n if (isExpanded) {\n return {position: 'sticky', top: 'calc(2em + 64px)'};\n }\n\n return {};\n };\n\n return (\n \n \n
        \n \n
        \n\n {error && (\n \n \n
        \n )}\n\n \n
        \n \n \n );\n}\n" }, { "path": "src/components/MDX/Sandpack/ReloadButton.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport * as React from 'react';\nimport {IconRestart} from '../../Icon/IconRestart';\nexport interface ReloadButtonProps {\n onReload: () => void;\n}\n\nexport function ReloadButton({onReload}: ReloadButtonProps) {\n return (\n \n \n Reload\n \n );\n}\n" }, { "path": "src/components/MDX/Sandpack/SandpackRoot.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {Children} from 'react';\nimport * as React from 'react';\nimport {SandpackProvider} from '@codesandbox/sandpack-react/unstyled';\nimport {SandpackLogLevel} from '@codesandbox/sandpack-client';\nimport {CustomPreset} from './CustomPreset';\nimport {createFileMap} from './createFileMap';\nimport {CustomTheme} from './Themes';\nimport {template} from './template';\n\ntype SandpackProps = {\n children: React.ReactNode;\n autorun?: boolean;\n};\n\nconst sandboxStyle = `\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: sans-serif;\n margin: 20px;\n padding: 0;\n}\n\nh1 {\n margin-top: 0;\n font-size: 22px;\n}\n\nh2 {\n margin-top: 0;\n font-size: 20px;\n}\n\nh3 {\n margin-top: 0;\n font-size: 18px;\n}\n\nh4 {\n margin-top: 0;\n font-size: 16px;\n}\n\nh5 {\n margin-top: 0;\n font-size: 14px;\n}\n\nh6 {\n margin-top: 0;\n font-size: 12px;\n}\n\ncode {\n font-size: 1.2em;\n}\n\nul {\n padding-inline-start: 20px;\n}\n`.trim();\n\nfunction SandpackRoot(props: SandpackProps) {\n let {children, autorun = true} = props;\n const codeSnippets = Children.toArray(children) as React.ReactElement[];\n const files = createFileMap(codeSnippets);\n\n if ('/index.html' in files) {\n throw new Error(\n 'You cannot use `index.html` file in sandboxes. ' +\n 'Only `public/index.html` is respected by Sandpack and CodeSandbox (where forks are created).'\n );\n }\n\n files['/src/styles.css'] = {\n code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\\n\\n'),\n hidden: !files['/src/styles.css']?.visible,\n };\n\n return (\n
        \n \n \n \n
        \n );\n}\n\nexport default SandpackRoot;\n" }, { "path": "src/components/MDX/Sandpack/Themes.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport tailwindConfig from '../../../../tailwind.config';\n\nexport const CustomTheme = {\n colors: {\n accent: 'inherit',\n base: 'inherit',\n clickable: 'inherit',\n disabled: 'inherit',\n error: 'inherit',\n errorSurface: 'inherit',\n hover: 'inherit',\n surface1: 'inherit',\n surface2: 'inherit',\n surface3: 'inherit',\n warning: 'inherit',\n warningSurface: 'inherit',\n },\n syntax: {\n plain: 'inherit',\n comment: 'inherit',\n keyword: 'inherit',\n tag: 'inherit',\n punctuation: 'inherit',\n definition: 'inherit',\n property: 'inherit',\n static: 'inherit',\n string: 'inherit',\n },\n font: {\n body: tailwindConfig.theme.extend.fontFamily.text\n .join(', ')\n .replace(/\"/gm, ''),\n mono: tailwindConfig.theme.extend.fontFamily.mono\n .join(', ')\n .replace(/\"/gm, ''),\n size: tailwindConfig.theme.extend.fontSize.code,\n lineHeight: '24px',\n },\n};\n" }, { "path": "src/components/MDX/Sandpack/createFileMap.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport type {SandpackFile} from '@codesandbox/sandpack-react/unstyled';\nimport type {PropsWithChildren, ReactElement, HTMLAttributes} from 'react';\n\nexport const AppJSPath = `/src/App.js`;\nexport const StylesCSSPath = `/src/styles.css`;\nexport const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];\n\n/**\n * Tokenize meta attributes while ignoring brace-wrapped metadata (e.g. {expectedErrors: …}).\n */\nfunction splitMeta(meta: string): string[] {\n const tokens: string[] = [];\n let current = '';\n let depth = 0;\n const trimmed = meta.trim();\n\n for (let ii = 0; ii < trimmed.length; ii++) {\n const char = trimmed[ii];\n\n if (char === '{') {\n if (depth === 0 && current) {\n tokens.push(current);\n current = '';\n }\n depth += 1;\n continue;\n }\n\n if (char === '}') {\n if (depth > 0) {\n depth -= 1;\n }\n if (depth === 0) {\n current = '';\n }\n if (depth < 0) {\n throw new Error(`Unexpected closing brace in meta: ${meta}`);\n }\n continue;\n }\n\n if (depth > 0) {\n continue;\n }\n\n if (/\\s/.test(char)) {\n if (current) {\n tokens.push(current);\n current = '';\n }\n continue;\n }\n\n current += char;\n }\n\n if (current) {\n tokens.push(current);\n }\n\n if (depth !== 0) {\n throw new Error(`Unclosed brace in meta: ${meta}`);\n }\n\n return tokens;\n}\n\nexport const createFileMap = (codeSnippets: any) => {\n return codeSnippets.reduce(\n (result: Record, codeSnippet: React.ReactElement) => {\n if (\n (codeSnippet.type as any).mdxName !== 'pre' &&\n codeSnippet.type !== 'pre'\n ) {\n return result;\n }\n const {props} = (\n codeSnippet.props as PropsWithChildren<{\n children: ReactElement<\n HTMLAttributes & {meta?: string}\n >;\n }>\n ).children;\n let filePath; // path in the folder structure\n let fileHidden = false; // if the file is available as a tab\n let fileActive = false; // if the file tab is shown by default\n\n if (props.meta) {\n const tokens = splitMeta(props.meta);\n const name = tokens.find(\n (token) => token.includes('/') || token.includes('.')\n );\n if (name) {\n filePath = name.startsWith('/') ? name : `/${name}`;\n }\n if (tokens.includes('hidden')) {\n fileHidden = true;\n }\n if (tokens.includes('active')) {\n fileActive = true;\n }\n } else {\n if (props.className === 'language-js') {\n filePath = AppJSPath;\n } else if (props.className === 'language-css') {\n filePath = StylesCSSPath;\n } else {\n throw new Error(\n `Code block is missing a filename: ${props.children}`\n );\n }\n }\n\n if (!filePath) {\n if (props.className === 'language-js') {\n filePath = AppJSPath;\n } else if (props.className === 'language-css') {\n filePath = StylesCSSPath;\n } else {\n throw new Error(\n `Code block is missing a filename: ${props.children}`\n );\n }\n }\n\n if (result[filePath]) {\n throw new Error(\n `File ${filePath} was defined multiple times. Each file snippet should have a unique path name`\n );\n }\n result[filePath] = {\n code: (props.children || '') as string,\n hidden: fileHidden,\n active: fileActive,\n };\n\n return result;\n },\n {}\n );\n};\n" }, { "path": "src/components/MDX/Sandpack/index.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\nimport {lazy, memo, Children, Suspense} from 'react';\nimport {AppJSPath, createFileMap} from './createFileMap';\n\nconst SandpackRoot = lazy(() => import('./SandpackRoot'));\n\nconst SandpackGlimmer = ({code}: {code: string}) => (\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n {code}\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n {code.split('\\n').length > 16 && (\n
        \n )}\n
        \n
        \n
        \n
        \n);\n\nexport default memo(function SandpackWrapper(props: any): any {\n const codeSnippet = createFileMap(Children.toArray(props.children));\n\n // To set the active file in the fallback we have to find the active file first.\n // If there are no active files we fallback to App.js as default.\n let activeCodeSnippet = Object.keys(codeSnippet).filter(\n (fileName) =>\n codeSnippet[fileName]?.active === true &&\n codeSnippet[fileName]?.hidden === false\n );\n let activeCode;\n if (!activeCodeSnippet.length) {\n activeCode = codeSnippet[AppJSPath].code;\n } else {\n activeCode = codeSnippet[activeCodeSnippet[0]].code;\n }\n\n return (\n }>\n \n \n );\n});\n" }, { "path": "src/components/MDX/Sandpack/runESLint.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n// @ts-nocheck\n\nimport {Linter} from 'eslint/lib/linter/linter';\n\nimport type {Diagnostic} from '@codemirror/lint';\nimport type {Text} from '@codemirror/text';\n\nconst getCodeMirrorPosition = (\n doc: Text,\n {line, column}: {line: number; column?: number}\n): number => {\n return doc.line(line).from + (column ?? 0) - 1;\n};\n\nconst linter = new Linter();\n\nconst reactRules = require('eslint-plugin-react-hooks').rules;\nlinter.defineRules({\n 'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'],\n 'react-hooks/exhaustive-deps': reactRules['exhaustive-deps'],\n});\n\nconst options = {\n parserOptions: {\n ecmaVersion: 12,\n sourceType: 'module',\n ecmaFeatures: {jsx: true},\n },\n rules: {\n 'react-hooks/rules-of-hooks': 'error',\n 'react-hooks/exhaustive-deps': 'error',\n },\n};\n\nexport const runESLint = (\n doc: Text\n): {errors: any[]; codeMirrorErrors: Diagnostic[]} => {\n const codeString = doc.toString();\n const errors = linter.verify(codeString, options) as any[];\n\n const severity = {\n 1: 'warning',\n 2: 'error',\n };\n\n const codeMirrorErrors = errors\n .map((error) => {\n if (!error) return undefined;\n\n const from = getCodeMirrorPosition(doc, {\n line: error.line,\n column: error.column,\n });\n\n const to = getCodeMirrorPosition(doc, {\n line: error.endLine ?? error.line,\n column: error.endColumn ?? error.column,\n });\n\n return {\n ruleId: error.ruleId,\n from,\n to,\n severity: severity[error.severity],\n message: error.message,\n };\n })\n .filter(Boolean) as Diagnostic[];\n\n return {\n codeMirrorErrors,\n errors: errors.map((item) => {\n return {\n ...item,\n severity: severity[item.severity],\n };\n }),\n };\n};\n" }, { "path": "src/components/MDX/Sandpack/template.ts", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport const template = {\n '/src/index.js': {\n hidden: true,\n code: `import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);`,\n },\n '/package.json': {\n hidden: true,\n code: JSON.stringify(\n {\n name: 'react.dev',\n version: '0.0.0',\n main: '/src/index.js',\n scripts: {\n start: 'react-scripts start',\n build: 'react-scripts build',\n test: 'react-scripts test --env=jsdom',\n eject: 'react-scripts eject',\n },\n dependencies: {\n react: '^19.2.1',\n 'react-dom': '^19.2.1',\n 'react-scripts': '^5.0.0',\n },\n },\n null,\n 2\n ),\n },\n '/public/index.html': {\n hidden: true,\n code: `\n\n\n \n \n Document\n\n\n
        \n\n`,\n },\n};\n" }, { "path": "src/components/MDX/Sandpack/useSandpackLint.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n * Copyright (c) Facebook, Inc. and its affiliates.\n */\n\n// @ts-nocheck\n\nimport {useState, useEffect} from 'react';\nimport type {EditorView} from '@codemirror/view';\n\nexport type LintDiagnostic = {\n line: number;\n column: number;\n severity: 'warning' | 'error';\n message: string;\n}[];\n\nexport const useSandpackLint = () => {\n const [lintErrors, setLintErrors] = useState([]);\n const [lintExtensions, setLintExtensions] = useState([]);\n useEffect(() => {\n const loadLinter = async () => {\n const {linter} = await import('@codemirror/lint');\n const onLint = linter(async (props: EditorView) => {\n // This is intentionally delayed until CodeMirror calls it\n // so that we don't take away bandwidth from things loading early.\n const {runESLint} = await import('./runESLint');\n const editorState = props.state.doc;\n let {errors, codeMirrorErrors} = runESLint(editorState);\n // Ignore parsing or internal linter errors.\n const isReactRuleError = (error: any) => error.ruleId != null;\n setLintErrors(errors.filter(isReactRuleError));\n return codeMirrorErrors.filter(isReactRuleError);\n });\n setLintExtensions([onLint]);\n };\n\n loadLinter();\n }, []);\n return {lintErrors, lintExtensions};\n};\n" }, { "path": "src/components/MDX/SandpackWithHTMLOutput.tsx", "content": "/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {Children, memo} from 'react';\nimport InlineCode from './InlineCode';\nimport Sandpack from './Sandpack';\n\nconst ShowRenderedHTML = `\nimport { renderToStaticMarkup } from 'react-dom/server';\nimport formatHTML from './formatHTML.js';\n\nexport default function ShowRenderedHTML({children}) {\n const markup = renderToStaticMarkup(\n \n \n {children}\n \n );\n return (\n <>\n

        Rendered HTML:

        \n 
        \n        {formatHTML(markup)}\n
        \n \n );\n}`;\n\nconst formatHTML = `\nimport format from 'html-format';\n\nexport default function formatHTML(markup) {\n // Cheap tricks to format the HTML readably -- haven't been able to\n // find a package that runs in browser and prettifies the HTML if it\n // lacks line-breaks.\n return format(markup\n .replace('', '\\\\n')\n .replace('', '\\\\n')\n .replaceAll(/<\\\\/script>/g, '<\\\\/script>\\\\n')\n .replaceAll(/]*)\\\\/>/g, '`) の場合でも、DOM 内での配置を慎重に考える必要があります。コンポーネントのコンポジション能力を保ちつつ、コンポーネント内でスタイルシート機能を構築することは困難です。そのためユーザはよく、スタイルに依存するコンポーネントから遠く離れた場所でスタイルをまとめてロードするか、この複雑さをカプセル化するスタイルライブラリを使用する必要がありました。\n\nReact 19 では、スタイルシートに対する組み込みのサポートを提供することでこの複雑さに対処し、またクライアントにおける並行レンダー機能やサーバにおけるストリーミングレンダー機能との深い統合を行います。スタイルシートの `precedence`（優先度）を React に伝えることで、スタイルシートの DOM への挿入順序を管理し、また外部スタイルシートの場合はそれがロードされてからそのスタイルルールに依存するコンテンツが表示されるよう保証します。\n\n```js {4,5,17}\nfunction ComponentOne() {\n return (\n \n \n \n
        \n {...}\n
        \n         \n )\n}\n\nfunction ComponentTwo() {\n return (\n
        \n

        {...}

        \n <-- will be inserted between foo & bar\n
        \n )\n}\n```\n\nサーバサイドレンダリングの場合、React は `` にスタイルシートを含めることで、それをブラウザがロードするまで描画が起きないことを保証します。ストリーミングを既に開始した後でスタイルシートが見つかった場合でも、React はサスペンスバウンダリ内でスタイルシートに依存するコンテンツが表示される前に、クライアントの `` にそのスタイルシートが挿入されることを保証します。\n\nクライアントサイドレンダリングの場合、React は新しくレンダーされたスタイルシートが読み込まれるのを待ってからレンダーをコミットします。そのコンポーネントをアプリケーション内の複数の場所からレンダーする場合でも、React はドキュメントにスタイルシートを一度だけ挿入します。\n\n```js {5}\nfunction App() {\n return <>\n \n ...\n // won't lead to a duplicate stylesheet link in the DOM\n \n}\n```\n\nスタイルシートを手動で読み込むことに慣れているユーザにとっては、これはスタイルシートをそれに依存するコンポーネントの隣に配置することで局所的な理解をしやすくできる機会となり、また実際に使用するスタイルシートのみが読み込まれることを保証しやすくなるでしょう。\n\nスタイル関連ライブラリやバンドラ統合のスタイル機能もこの新しい機能を採用できるため、自分でスタイルシートを直接レンダーしない場合でも、ツールがこの機能を使用するようにアップグレードされるにつれ、やはりメリットを享受できるようになるでしょう。\n\n詳細については、[``](/reference/react-dom/components/link) と [`\n```\n\n\n\nUI を命令的に操作することは、小さなサンプルではうまくいくかもしれませんが、より複雑なシステムでは指数関数的に難しくなります。例えばこのような様々なフォームでいっぱいのページを更新することを想像してみてください。新しい UI 要素や新しい操作方法を追加する場合、既存のすべてのコードを注意深くチェックして、バグ（例えば、何かを表示または非表示にすることを忘れていないか）を確認する必要があります。\n\nReact はこの問題を解決するために作られました。\n\nReact では、あなたが UI を直接操作することはありません。つまり、コンポーネントの有効化、無効化、表示、非表示を直接行うことはありません。代わりに、**表示したいものを宣言する**ことで、React が UI を更新する方法を考えてくれるのです。タクシーに乗ったとき、どこで曲がるかを正確に伝えるのではなく、どこに行きたいかを運転手に伝えることを思い浮かべてください。運転手はあなたをそこに連れていくのが仕事ですし、あなたが考えもしなかった近道も知っているかもしれません！\n\n\n\n## UI を宣言的に考える {/*thinking-about-ui-declaratively*/}\n\n上記では、フォームを命令的に実装する方法を見てきました。React 的な思考法をより理解するために、以下でこの UI を React で再実装する方法を確認していきます。\n\n1. コンポーネントの様々な視覚状態を**特定**する\n2. それらの状態変更を引き起こすトリガを**決定**する\n3. `useState` を使用してメモリ上に state を**表現**する\n4. 必要不可欠でない state 変数をすべて**削除**する\n5. イベントハンドラを**接続**して state を設定する\n\n### Step 1: コンポーネントの様々な視覚状態を特定する {/*step-1-identify-your-components-different-visual-states*/}\n\nコンピュータサイエンス用語で、複数の「状態」間を行き来する仕組みである[「ステートマシン」](https://en.wikipedia.org/wiki/Finite-state_machine) というものを聞いたことがあるかもしれません。あるいはデザイナと一緒に仕事をしていて、さまざまな「視覚状態」のモックアップを見たことがあるかもしれません。React はデザインとコンピュータサイエンスの交点に位置しているため、これら両方のアイデアがインスピレーションの源になります。\n\nまず、ユーザが目にする可能性のある UI の様々な「状態」をすべて可視化する必要があります。\n\n* **Empty**：フォームには無効な \"Submit\" ボタンがある。\n* **Typing**：フォームには有効な \"Submit\" ボタンがある。\n* **Submitting**：フォームは完全に無効化される。スピナが表示される。\n* **Success**：フォームの代わりにお礼のメッセージが表示される。\n* **Error**：Typing 状態と同様だがエラーメッセージも表示される。\n\nデザイナのように、ロジックを追加する前に様々な状態の「モックアップ」を作成することをお勧めします。例えば、フォームの表示部分だけのモックを以下に示します。このモックはデフォルト値が `'empty'` の `status` という props によって制御されます。\n\n\n\n```js\nexport default function Form({\n status = 'empty'\n}) {\n if (status === 'success') {\n return

        That's right!

        \n }\n return (\n <>\n

        City quiz

        \n

        \n In which city is there a billboard that turns air into drinkable water?\n

        \n
        \n ` のように子要素を渡すことはできません。[初期内容の指定には `defaultValue` を使用してください](#providing-an-initial-value-for-a-text-area)。\n- テキストエリアが props として文字列型の `value` を受け取ると、[制御されたテキストエリアとして扱われます](#controlling-a-text-area-with-a-state-variable)。\n- テキストエリアは制御されたコンポーネントと非制御コンポーネントに同時になることはできません。。\n- テキストエリアは、ライフタイム中に制御されたコンポーネントから非制御コンポーネント、またはその逆に切り替えることはできません。\n- すべての制御されたテキストエリアには、制御に使っている state を同期的に更新するための `onChange` イベントハンドラが必要です。\n\n---\n\n## 使用法 {/*usage*/}\n\n### テキストエリアを表示する {/*displaying-a-text-area*/}\n\nテキストエリアを表示するには、`` のようにして渡すことはサポートされていません。\n\n\n\n---\n\n### フォーム送信時にテキストエリアから値を読み取る {/*reading-the-text-area-value-when-submitting-a-form*/}\n\nテキストエリアを [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) で囲み、その中に [`\n \n
        \n );\n}\n```\n\n```css\nlabel { display: block; }\ninput { margin: 5px; }\n```\n\n        \n\n\n\n`