diff --git a/.claude/agents/docs-reviewer.md b/.claude/agents/docs-reviewer.md new file mode 100644 index 000000000..af0a856e4 --- /dev/null +++ b/.claude/agents/docs-reviewer.md @@ -0,0 +1,28 @@ +--- +name: docs-reviewer +description: "Lean docs reviewer that dispatches reviews docs for a particular skill." +model: opus +color: cyan +--- + +You are a direct, critical, expert reviewer for React documentation. + +Your role is to use given skills to validate given doc pages for consistency, correctness, and adherence to established patterns. + +Complete this process: + +## Phase 1: Task Creation +1. CRITICAL: Read the skill requested. +2. Understand the skill's requirements. +3. Create a task list to validate skills requirements. + +## Phase 2: Validate + +1. Read the docs files given. +2. Review each file with the task list to verify. + +## Phase 3: Respond + +You must respond with a checklist of the issues you identified, and line number. + +DO NOT respond with passed validations, ONLY respond with the problems. diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 000000000..111403183 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,32 @@ +{ + "skills": { + "suggest": [ + { + "pattern": "src/content/learn/**/*.md", + "skill": "docs-writer-learn" + }, + { + "pattern": "src/content/reference/**/*.md", + "skill": "docs-writer-reference" + } + ] + }, + "permissions": { + "allow": [ + "Skill(docs-voice)", + "Skill(docs-components)", + "Skill(docs-sandpack)", + "Skill(docs-rsc-sandpack)", + "Skill(docs-writer-learn)", + "Skill(docs-writer-reference)", + "Bash(yarn lint:*)", + "Bash(yarn lint-heading-ids:*)", + "Bash(yarn lint:fix:*)", + "Bash(yarn tsc:*)", + "Bash(yarn check-all:*)", + "Bash(yarn fix-headings:*)", + "Bash(yarn deadlinks:*)", + "Bash(yarn prettier:diff:*)" + ] + } +} diff --git a/.claude/skills/docs-components/SKILL.md b/.claude/skills/docs-components/SKILL.md new file mode 100644 index 000000000..4b75f27a1 --- /dev/null +++ b/.claude/skills/docs-components/SKILL.md @@ -0,0 +1,518 @@ +--- +name: docs-components +description: Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for all documentation types. Authoritative source for component usage, examples, and heading conventions. +--- + +# MDX Component Patterns + +## Quick Reference + +### Component Decision Tree + +| Need | Component | +|------|-----------| +| Helpful tip or terminology | `` | +| Common mistake warning | `` | +| Advanced technical explanation | `` | +| Canary-only feature | `` or `` | +| Server Components only | `` | +| Deprecated API | `` | +| Experimental/WIP | `` | +| Visual diagram | `` | +| Multiple related examples | `` | +| Interactive code | `` (see `/docs-sandpack`) | +| Console error display | `` | +| End-of-page exercises | `` (Learn pages only) | + +### Heading Level Conventions + +| Component | Heading Level | +|-----------|---------------| +| DeepDive title | `####` (h4) | +| Titled Pitfall | `#####` (h5) | +| Titled Note | `####` (h4) | +| Recipe items | `####` (h4) | +| Challenge items | `####` (h4) | + +### Callout Spacing Rules + +Callout components (Note, Pitfall, DeepDive) require a **blank line after the opening tag** before content begins. + +**Never place consecutively:** +- `` followed by `` - Combine into one with titled subsections, or separate with prose +- `` followed by `` - Combine into one, or separate with prose + +**Allowed consecutive patterns:** +- `` followed by `` - OK for multi-part explorations (see useMemo.md) +- `` followed by `` - OK when DeepDive explains "why" behind the Pitfall + +**Separation content:** Prose paragraphs, code examples (Sandpack), or section headers. + +**Why:** Consecutive warnings create a "wall of cautions" that overwhelms readers and causes important warnings to be skimmed. + +**Incorrect:** +```mdx + +Don't do X. + + + +Don't do Y. + +``` + +**Correct - combined:** +```mdx + + +##### Don't do X {/*pitfall-x*/} +Explanation. + +##### Don't do Y {/*pitfall-y*/} +Explanation. + + +``` + +**Correct - separated:** +```mdx + +Don't do X. + + +This leads to another common mistake: + + +Don't do Y. + +``` + +--- + +## `` + +Important clarifications, conventions, or tips. Less severe than Pitfall. + +### Simple Note + +```mdx + + +The optimization of caching return values is known as [_memoization_](https://en.wikipedia.org/wiki/Memoization). + + +``` + +### Note with Title + +Use `####` (h4) heading with an ID. + +```mdx + + +#### There is no directive for Server Components. {/*no-directive*/} + +A 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. + + +``` + +### Version-Specific Note + +```mdx + + +Starting in React 19, you can render `` as a provider. + +In older versions of React, use ``. + + +``` + +--- + +## `` + +Common mistakes that cause bugs. Use for errors readers will likely make. + +### Simple Pitfall + +```mdx + + +We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives) + + +``` + +### Titled Pitfall + +Use `#####` (h5) heading with an ID. + +```mdx + + +##### Calling different memoized functions will read from different caches. {/*pitfall-different-caches*/} + +To access the same cache, components must call the same memoized function. + + +``` + +### Pitfall with Wrong/Right Code + +```mdx + + +##### `useFormStatus` will not return status information for a `
` rendered in the same component. {/*pitfall-same-component*/} + +```js +function Form() { + // 🔴 `pending` will never be true + const { pending } = useFormStatus(); + return
; +} +``` + +Instead call `useFormStatus` from inside a component located inside `
`. + + +``` + +--- + +## `` + +Optional deep technical content. **First child must be `####` heading with ID.** + +### Standard DeepDive + +```mdx + + +#### Is using an updater always preferred? {/*is-updater-preferred*/} + +You 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. + +In 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. + + +``` + +### Comparison DeepDive + +For comparing related concepts: + +```mdx + + +#### When should I use `cache`, `memo`, or `useMemo`? {/*cache-memo-usememo*/} + +All mentioned APIs offer memoization but differ in what they memoize, who can access the cache, and when their cache is invalidated. + +#### `useMemo` {/*deep-dive-usememo*/} + +In general, you should use `useMemo` for caching expensive computations in Client Components across renders. + +#### `cache` {/*deep-dive-cache*/} + +In general, you should use `cache` in Server Components to memoize work that can be shared across components. + + +``` + +--- + +## `` + +Multiple related examples showing variations. Each recipe needs ``. + +```mdx + + +#### Counter (number) {/*counter-number*/} + +In this example, the `count` state variable holds a number. + + +{/* code */} + + + + +#### Text field (string) {/*text-field-string*/} + +In this example, the `text` state variable holds a string. + + +{/* code */} + + + + + +``` + +**Common titleText/titleId combinations:** +- "Basic [hookName] examples" / `examples-basic` +- "Examples of [concept]" / `examples-[concept]` +- "The difference between [A] and [B]" / `examples-[topic]` + +--- + +## `` + +End-of-page exercises. **Learn pages only.** Each challenge needs problem + solution Sandpack. + +```mdx + + +#### Fix the bug {/*fix-the-bug*/} + +Problem description... + + +Optional hint text. + + + +{/* problem code */} + + + + +Explanation... + + +{/* solution code */} + + + + + +``` + +**Guidelines:** +- Only at end of standard Learn pages +- No Challenges in chapter intros or tutorials +- Each challenge has `####` heading with ID + +--- + +## `` + +For deprecated APIs. Content should explain what to use instead. + +### Page-Level Deprecation + +```mdx + + +In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. + +`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). + + +``` + +### Method-Level Deprecation + +```mdx +### `componentWillMount()` {/*componentwillmount*/} + + + +This API has been renamed from `componentWillMount` to [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount) + +Run the [`rename-unsafe-lifecycles` codemod](codemod-link) to automatically update. + + +``` + +--- + +## `` + +For APIs that only work with React Server Components. + +### Basic RSC + +```mdx + + +`cache` is only for use with [React Server Components](/reference/rsc/server-components). + + +``` + +### Extended RSC (for Server Functions) + +```mdx + + +Server Functions are for use in [React Server Components](/reference/rsc/server-components). + +**Note:** Until September 2024, we referred to all Server Functions as "Server Actions". + + +``` + +--- + +## `` and `` + +For features only available in Canary releases. + +### Canary Wrapper (inline in Intro) + +```mdx + + +`` lets you group elements without a wrapper node. + +Fragments can also accept refs, enabling interaction with underlying DOM nodes. + + +``` + +### CanaryBadge in Section Headings + +```mdx +### FragmentInstance {/*fragmentinstance*/} +``` + +### CanaryBadge in Props Lists + +```mdx +* **optional** `ref`: A ref object from `useRef` or callback function. +``` + +### CanaryBadge in Caveats + +```mdx +* If you want to pass `ref` to a Fragment, you can't use the `<>...` syntax. +``` + +--- + +## `` + +Visual explanations of module dependencies, render trees, or data flow. + +```mdx + +`'use client'` segments the module dependency tree, marking `InspirationGenerator.js` and all dependencies as client-rendered. + +``` + +**Attributes:** +- `name`: Diagram identifier (used for image file) +- `height`: Height in pixels +- `width`: Width in pixels +- `alt`: Accessible description of the diagram + +--- + +## `` (Use Sparingly) + +Numbered callouts in prose. Pairs with code block annotations. + +### Syntax + +In code blocks: +```mdx +```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"]] +import { useState } from 'react'; + +function MyComponent() { + const [age, setAge] = useState(42); +} +``` +``` + +Format: `[[step_number, line_number, "text_to_highlight"], ...]` + +In prose: +```mdx +1. The current state initially set to the initial value. +2. The `set` function that lets you change it. +``` + +### Guidelines + +- Maximum 2-3 different colors per explanation +- Don't highlight every keyword - only key concepts +- Use for terms in prose, not entire code blocks +- Maintain consistent usage within a section + +✅ **Good use** - highlighting key concepts: +```mdx +React will compare the dependencies with the dependencies you passed... +``` + +🚫 **Avoid** - excessive highlighting: +```mdx +When an Activity boundary is hidden during its initial render... +``` + +--- + +## `` + +Display console output (errors, warnings, logs). + +```mdx + +Uncaught Error: Too many re-renders. + +``` + +**Levels:** `error`, `warning`, `info` + +--- + +## Component Usage by Page Type + +### Reference Pages + +For component placement rules specific to Reference pages, invoke `/docs-writer-reference`. + +Key placement patterns: +- `` goes before `` at top of page +- `` goes after `` for page-level deprecation +- `` goes after method heading for method-level deprecation +- `` wrapper goes inline within `` +- `` appears in headings, props lists, and caveats + +### Learn Pages + +For Learn page structure and patterns, invoke `/docs-writer-learn`. + +Key usage patterns: +- Challenges only at end of standard Learn pages +- No Challenges in chapter intros or tutorials +- DeepDive for optional advanced content +- CodeStep should be used sparingly + +### Blog Pages + +For Blog page structure and patterns, invoke `/docs-writer-blog`. + +Key usage patterns: +- Generally avoid deep technical components +- Note and Pitfall OK for clarifications +- Prefer inline explanations over DeepDive + +--- + +## Other Available Components + +**Version/Status:** ``, ``, ``, ``, `` + +**Visuals:** ``, ``, ``, ``, `` + +**Console:** ``, `` + +**Specialized:** ``, ``, ``, ``, ``, ``, ``, ``, `` + +See existing docs for usage examples of these components. diff --git a/.claude/skills/docs-rsc-sandpack/SKILL.md b/.claude/skills/docs-rsc-sandpack/SKILL.md new file mode 100644 index 000000000..42aba08af --- /dev/null +++ b/.claude/skills/docs-rsc-sandpack/SKILL.md @@ -0,0 +1,277 @@ +--- +name: docs-rsc-sandpack +description: Use when adding interactive RSC (React Server Components) code examples to React docs using , or when modifying the RSC sandpack infrastructure. +--- + +# RSC Sandpack Patterns + +For general Sandpack conventions (code style, naming, file naming, line highlighting, hidden files, CSS guidelines), see `/docs-sandpack`. This skill covers only RSC-specific patterns. + +## Quick Start Template + +Minimal single-file `` example: + +```mdx + + +` ` `js src/App.js +export default function App() { + return

Hello from a Server Component!

; +} +` ` ` + + +``` + +--- + +## How It Differs from `` + +| Feature | `` | `` | +|---------|-------------|-----------------| +| Execution model | All code runs in iframe | Server code runs in Web Worker, client code in iframe | +| `'use client'` directive | Ignored (everything is client) | Required to mark client components | +| `'use server'` directive | Not supported | Marks Server Functions callable from client | +| `async` components | Not supported | Supported (server components can be async) | +| External dependencies | Supported via `package.json` | Not supported (only React + react-dom) | +| Entry point | `App.js` with `export default` | `src/App.js` with `export default` | +| Component tag | `` | `` | + +--- + +## File Directives + +Files are classified by the directive at the top of the file: + +| Directive | Where it runs | Rules | +|-----------|--------------|-------| +| (none) | Web Worker (server) | Default. Can be `async`. Can import other server files. Cannot use hooks, event handlers, or browser APIs. | +| `'use client'` | Sandpack iframe (browser) | Must be first statement. Can use hooks, event handlers, browser APIs. Cannot be `async`. Cannot import server files. | +| `'use server'` | Web Worker (server) | Marks Server Functions. Can be module-level (all exports are actions) or function-level. Callable from client via props or form `action`. | + +--- + +## Common Patterns + +### 1. Server + Client Components + +```mdx + + +` ` `js src/App.js +import Counter from './Counter'; + +export default function App() { + return ( +
+

Server-rendered heading

+ +
+ ); +} +` ` ` + +` ` `js src/Counter.js +'use client'; + +import { useState } from 'react'; + +export default function Counter() { + const [count, setCount] = useState(0); + return ( + + ); +} +` ` ` + + +``` + +### 2. Async Server Component with Suspense + +```mdx + + +` ` `js src/App.js +import { Suspense } from 'react'; +import Albums from './Albums'; + +export default function App() { + return ( + Loading...

}> + + + ); +} +` ` ` + +` ` `js src/Albums.js +async function fetchAlbums() { + await new Promise(resolve => setTimeout(resolve, 1000)); + return ['Abbey Road', 'Let It Be', 'Revolver']; +} + +export default async function Albums() { + const albums = await fetchAlbums(); + return ( +
    + {albums.map(album => ( +
  • {album}
    • + ))} +
+ ); +} +` ` ` + + +``` + +### 3. Server Functions (Actions) + +```mdx + + +` ` `js src/App.js +import { addLike, getLikeCount } from './actions'; +import LikeButton from './LikeButton'; + +export default async function App() { + const count = await getLikeCount(); + return ( +
+

Likes: {count}

+ +
+ ); +} +` ` ` + +` ` `js src/actions.js +'use server'; + +let count = 0; + +export async function addLike() { + count++; +} + +export async function getLikeCount() { + return count; +} +` ` ` + +` ` `js src/LikeButton.js +'use client'; + +export default function LikeButton({ addLike }) { + return ( + + + + ); +} +` ` ` + + +``` + +--- + +## File Structure Requirements + +### Entry Point + +- **`src/App.js` is required** as the main entry point +- Must have `export default` (function component) +- Case-insensitive fallback: `src/app.js` also works + +### Auto-Injected Infrastructure Files + +These files are automatically injected by `sandpack-rsc-setup.ts` and should never be included in MDX: + +| File | Purpose | +|------|---------| +| `/src/index.js` | Bootstraps the RSC pipeline | +| `/src/rsc-client.js` | Client bridge — creates Worker, consumes Flight stream | +| `/src/rsc-server.js` | Wraps pre-bundled worker runtime as ES module | +| `/node_modules/__webpack_shim__/index.js` | Minimal webpack compatibility layer | +| `/node_modules/__rsdw_client__/index.js` | `react-server-dom-webpack/client` as local dependency | + +### No External Dependencies + +`` does not support external npm packages. Only `react` and `react-dom` are available. Do not include `package.json` in RSC examples. + +--- + +## Architecture Reference + +### Three-Layer Architecture + +``` +react.dev page (Next.js) + ┌─────────────────────────────────────────┐ + │ │ + │ ┌─────────┐ ┌──────────────────────┐ │ + │ │ Editor │ │ Preview (iframe) │ │ + │ │ App.js │ │ Client React app │ │ + │ │ (edit) │ │ consumes Flight │ │ + │ │ │ │ stream from Worker │ │ + │ └─────────┘ └──────────┬───────────┘ │ + └───────────────────────────┼─────────────┘ + │ postMessage + ┌───────────────────────────▼─────────────┐ + │ Web Worker (Blob URL) │ + │ - React server build (pre-bundled) │ + │ - react-server-dom-webpack/server │ + │ - webpack shim │ + │ - User server code (Sucrase → CJS) │ + └─────────────────────────────────────────┘ +``` + +### Key Source Files + +| File | Purpose | +|-----------------------------------------------------------------|--------------------------------------------------------------------------------| +| `src/components/MDX/Sandpack/sandpack-rsc/RscFileBridge.tsx` | Monitors Sandpack; posts raw files to iframe | +| `src/components/MDX/Sandpack/SandpackRSCRoot.tsx` | SandpackProvider setup, custom bundler URL, UI layout | +| `src/components/MDX/Sandpack/templateRSC.ts` | RSC template files | +| `.../sandbox-code/src/__react_refresh_init__.js` | React Refresh shim | +| `.../sandbox-code/src/rsc-server.js` | Worker runtime: module system, Sucrase compilation, `renderToReadableStream()` | +| `.../sandbox-code/src/rsc-client.source.js` | Client bridge: Worker creation, file classification, Flight stream consumption | +| `.../sandbox-code/src/webpack-shim.js` | Minimal `__webpack_require__` / `__webpack_module_cache__` shim | +| `.../sandbox-code/src/worker-bundle.dist.js` | Pre-bundled IIFE (generated): React server + RSDW/server + Sucrase | +| `scripts/buildRscWorker.mjs` | esbuild script: bundles rsc-server.js into worker-bundle.dist.js | + +--- + +## Build System + +### Rebuilding the Worker Bundle + +After modifying `rsc-server.js` or `webpack-shim.js`: + +```bash +node scripts/buildRscWorker.mjs +``` + +This runs esbuild with: +- `format: 'iife'`, `platform: 'browser'` +- `conditions: ['react-server', 'browser']` (activates React server export conditions) +- `minify: true` +- Prepends `webpack-shim.js` to the output + +### Raw-Loader Configuration + +In `templateRSC.js` files are loaded as raw strings with the `!raw-loader`. + +The strings are necessary to provide to Sandpack as local files (skips Sandpack bundling). + + +### Development Commands + +```bash +node scripts/buildRscWorker.mjs # Rebuild worker bundle after source changes +yarn dev # Start dev server to test examples +``` \ No newline at end of file diff --git a/.claude/skills/docs-sandpack/SKILL.md b/.claude/skills/docs-sandpack/SKILL.md new file mode 100644 index 000000000..0904a98c0 --- /dev/null +++ b/.claude/skills/docs-sandpack/SKILL.md @@ -0,0 +1,447 @@ +--- +name: docs-sandpack +description: Use when adding interactive code examples to React docs. +--- + +# Sandpack Patterns + +## Quick Start Template + +Most examples are single-file. Copy this and modify: + +```mdx + + +` ` `js +import { useState } from 'react'; + +export default function Example() { + const [value, setValue] = useState(0); + + return ( + + ); +} +` ` ` + + +``` + +--- + +## File Naming + +| Pattern | Usage | +|---------|-------| +| ` ```js ` | Main file (no prefix) | +| ` ```js src/FileName.js ` | Supporting files | +| ` ```js src/File.js active ` | Active file (reference pages) | +| ` ```js src/data.js hidden ` | Hidden files | +| ` ```css ` | CSS styles | +| ` ```json package.json ` | External dependencies | + +**Critical:** Main file must have `export default`. + +## Line Highlighting + +```mdx +```js {2-4} +function Example() { + // Lines 2-4 + // will be + // highlighted + return null; +} +``` + +## Code References (numbered callouts) + +```mdx +```js [[1, 4, "age"], [2, 4, "setAge"]] +// Creates numbered markers pointing to "age" and "setAge" on line 4 +``` + +## Expected Errors (intentionally broken examples) + +```mdx +```js {expectedErrors: {'react-compiler': [7]}} +// Line 7 shows as expected error +``` + +## Multi-File Example + +```mdx + + +```js src/App.js +import Gallery from './Gallery.js'; + +export default function App() { + return ; +} +``` + +```js src/Gallery.js +export default function Gallery() { + return

Gallery

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

Hello, {name}

; +}); +``` + +## Line Length + +- Prose: ~80 characters +- Code: ~60-70 characters +- Break long lines to avoid horizontal scrolling + +## Anti-Patterns + +| Pattern | Problem | Fix | +|---------|---------|-----| +| `const Comp = () => {}` | Not standard | `function Comp() {}` | +| `onClick={(event) => ...}` | Conflicts with global | `onClick={(e) => ...}` | +| `useState` for non-rendered values | Re-renders | Use `useRef` | +| Reading `window` during render | Hydration mismatch | Check in useEffect | +| Single-line if without braces | Harder to debug | Use multiline with braces | +| Chained `createRoot().render()` | Less clear | Two statements | +| `//...` without space | Inconsistent | `// ...` with space | +| Tabs | Inconsistent | 2 spaces | +| `ReactDOM.render` | Deprecated | Use `createRoot` | +| Fake package names | Confusing | Use `'./your-storage-layer'` | +| `PropsWithChildren` | Outdated | `children?: ReactNode` | +| Missing `key` in lists | Warnings | Always include key | + +## Additional Code Quality Rules + +### Always Include Keys in Lists +```js +// ✅ Correct +{items.map(item =>
  • {item.name}
    • )} + +// 🚫 Wrong - missing key +{items.map(item =>
  • {item.name}
    • )} +``` + +### Use Realistic Import Paths +```js +// ✅ Correct - descriptive path +import { fetchData } from './your-data-layer'; + +// 🚫 Wrong - looks like a real npm package +import { fetchData } from 'cool-data-lib'; +``` + +### Console.log Labels +```js +// ✅ Correct - labeled for clarity +console.log('User:', user); +console.log('Component Stack:', errorInfo.componentStack); + +// 🚫 Wrong - unlabeled +console.log(user); +``` + +### Keep Delays Reasonable +```js +// ✅ Correct - 1-1.5 seconds +setTimeout(() => setLoading(false), 1000); + +// 🚫 Wrong - too long, feels sluggish +setTimeout(() => setLoading(false), 3000); +``` + +## Updating Line Highlights + +When 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. + +## File Name Conventions + +- Capitalize file names for component files: `Gallery.js` not `gallery.js` +- After initially explaining files are in `src/`, refer to files by name only: `Gallery.js` not `src/Gallery.js` + +## Naming Conventions in Code + +**Components:** PascalCase +- `Profile`, `Avatar`, `TodoList`, `PackingList` + +**State variables:** Destructured pattern +- `const [count, setCount] = useState(0)` +- Booleans: `[isOnline, setIsOnline]`, `[isPacked, setIsPacked]` +- Status strings: `'typing'`, `'submitting'`, `'success'`, `'error'` + +**Event handlers:** +- `handleClick`, `handleSubmit`, `handleAddTask` + +**Props for callbacks:** +- `onClick`, `onChange`, `onAddTask`, `onSelect` + +**Custom Hooks:** +- `useOnlineStatus`, `useChatRoom`, `useFormInput` + +**Reducer actions:** +- Past tense: `'added'`, `'changed'`, `'deleted'` +- Snake_case compounds: `'changed_selection'`, `'sent_message'` + +**Updater functions:** Single letter +- `setCount(n => n + 1)` + +### Pedagogical Code Markers + +**Wrong vs right code:** +```js +// 🔴 Avoid: redundant state and unnecessary Effect +// ✅ Good: calculated during rendering +``` + +**Console.log for lifecycle teaching:** +```js +console.log('✅ Connecting...'); +console.log('❌ Disconnected.'); +``` + +### Server/Client Labeling + +```js +// Server Component +async function Notes() { + const notes = await db.notes.getAll(); +} + +// Client Component +"use client" +export default function Expandable({children}) { + const [expanded, setExpanded] = useState(false); +} +``` + +### Bundle Size Annotations + +```js +import marked from 'marked'; // 35.9K (11.2K gzipped) +import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped) +``` + +--- + +## Sandpack Example Guidelines + +### Package.json Rules + +**Include package.json when:** +- Using external npm packages (immer, remarkable, leaflet, toastify-js, etc.) +- Demonstrating experimental/canary React features +- Requiring specific React versions (`react: beta`, `react: 19.0.0-rc-*`) + +**Omit package.json when:** +- Example uses only built-in React features +- No external dependencies needed +- Teaching basic hooks, state, or components + +**Always mark package.json as hidden:** +```mdx +```json package.json hidden +{ + "dependencies": { + "react": "latest", + "react-dom": "latest", + "react-scripts": "latest", + "immer": "1.7.3" + } +} +``` +``` + +**Version conventions:** +- Use `"latest"` for stable features +- Use exact versions only when compatibility requires it +- Include minimal dependencies (just what the example needs) + +### Hidden File Patterns + +**Always hide these file types:** + +| File Type | Reason | +|-----------|--------| +| `package.json` | Configuration not the teaching point | +| `sandbox.config.json` | Sandbox setup is boilerplate | +| `public/index.html` | HTML structure not the focus | +| `src/data.js` | When it contains sample/mock data | +| `src/api.js` | When showing API usage, not implementation | +| `src/styles.css` | When styling is not the lesson | +| `src/router.js` | Supporting infrastructure | +| `src/actions.js` | Server action implementation details | + +**Rationale:** +- Reduces cognitive load +- Keeps focus on the primary concept +- Creates cleaner, more focused examples + +**Example:** +```mdx +```js src/data.js hidden +export const items = [ + { id: 1, name: 'Item 1' }, + { id: 2, name: 'Item 2' }, +]; +``` +``` + +### Active File Patterns + +**Mark as active when:** +- File contains the primary teaching concept +- Learner should focus on this code first +- Component demonstrates the hook/pattern being taught + +**Effect of the `active` marker:** +- Sets initial editor tab focus when Sandpack loads +- Signals "this is what you should study" +- Works with hidden files to create focused examples + +**Most common active file:** `src/index.js` or `src/App.js` + +**Example:** +```mdx +```js src/App.js active +// This file will be focused when example loads +export default function App() { + // ... +} +``` +``` + +### File Structure Guidelines + +| Scenario | Structure | Reason | +|----------|-----------|--------| +| Basic hook usage | Single file | Simple, focused | +| Teaching imports | 2-3 files | Shows modularity | +| Context patterns | 4-5 files | Realistic structure | +| Complex state | 3+ files | Separation of concerns | + +**Single File Examples (70% of cases):** +- Use for simple concepts +- 50-200 lines typical +- Best for: Counter, text inputs, basic hooks + +**Multi-File Examples (30% of cases):** +- Use when teaching modularity/imports +- Use for context patterns (4-5 files) +- Use when component is reused + +**File Naming:** +- Main component: `App.js` (capitalized) +- Component files: `Gallery.js`, `Button.js` (capitalized) +- Data files: `data.js` (lowercase) +- Utility files: `utils.js` (lowercase) +- Context files: `TasksContext.js` (named after what they provide) + +### Code Size Limits + +- Single file: **<200 lines** +- Multi-file total: **150-300 lines** +- Main component: **100-150 lines** +- Supporting files: **20-40 lines each** + +### CSS Guidelines + +**Always:** +- Include minimal CSS for demo interactivity +- Use semantic class names (`.panel`, `.button-primary`, `.panel-dark`) +- Support light/dark themes when showing UI concepts +- Keep CSS visible (never hidden) + +**Size Guidelines:** +- Minimal (5-10 lines): Basic button styling, spacing +- Medium (15-30 lines): Panel styling, form layouts +- Complex (40+ lines): Only for layout-focused examples diff --git a/.claude/skills/docs-voice/SKILL.md b/.claude/skills/docs-voice/SKILL.md new file mode 100644 index 000000000..124e5f048 --- /dev/null +++ b/.claude/skills/docs-voice/SKILL.md @@ -0,0 +1,137 @@ +--- +name: docs-voice +description: Use when writing any React documentation. Provides voice, tone, and style rules for all doc types. +--- + +# React Docs Voice & Style + +## Universal Rules + +- **Capitalize React terms** when referring to the React concept in headings or as standalone concepts: + - Core: Hook, Effect, State, Context, Ref, Component, Fragment + - Concurrent: Transition, Action, Suspense + - Server: Server Component, Client Component, Server Function, Server Action + - Patterns: Error Boundary + - Canary: Activity, View Transition, Transition Type + - **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" + - General usage stays lowercase: "the page transitions", "takes an action" +- **Product names:** ESLint, TypeScript, JavaScript, Next.js (not lowercase) +- **Bold** for key concepts: **state variable**, **event handler** +- **Italics** for new terms being defined: *event handlers* +- **Inline code** for APIs: `useState`, `startTransition`, `` +- **Avoid:** "simple", "easy", "just", time estimates +- Frame differences as "capabilities" not "advantages/disadvantages" +- Avoid passive voice and jargon + +## Tone by Page Type + +| Type | Tone | Example | +|------|------|---------| +| Learn | Conversational | "Here's what that looks like...", "You might be wondering..." | +| Reference | Technical | "Call `useState` at the top level...", "This Hook returns..." | +| Blog | Accurate | Focus on facts, not marketing | + +**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. + +## Avoiding Jargon + +**Pattern:** Explain behavior first, then name it. + +✅ "React waits until all code in event handlers runs before processing state updates. This is called *batching*." + +❌ "React uses batching to process state updates atomically." + +**Terms to avoid or explain:** +| Jargon | Plain Language | +|--------|----------------| +| atomic | all-or-nothing, batched together | +| idempotent | same inputs, same output | +| deterministic | predictable, same result every time | +| memoize | remember the result, skip recalculating | +| referentially transparent | (avoid - describe the behavior) | +| invariant | rule that must always be true | +| reify | (avoid - describe what's being created) | + +**Allowed technical terms in Reference pages:** +- "stale closures" - standard JS/React term, can be used in Caveats +- "stable identity" - React term for consistent object references across renders +- "reactive" - React term for values that trigger re-renders when changed +- These don't need explanation in Reference pages (readers are expected to know them) + +**Use established analogies sparingly—once when introducing a concept, not repeatedly:** + +| Concept | Analogy | +|---------|---------| +| Components/React | Kitchen (components as cooks, React as waiter) | +| Render phases | Restaurant ordering (trigger/render/commit) | +| State batching | Waiter collecting full order before going to kitchen | +| State behavior | Snapshot/photograph in time | +| State storage | React storing state "on a shelf" | +| State purpose | Component's memory | +| Pure functions | Recipes (same ingredients → same dish) | +| Pure functions | Math formulas (y = 2x) | +| Props | Adjustable "knobs" | +| Children prop | "Hole" to be filled by parent | +| Keys | File names in a folder | +| Curly braces in JSX | "Window into JavaScript" | +| Declarative UI | Taxi driver (destination, not turn-by-turn) | +| Imperative UI | Turn-by-turn navigation | +| State structure | Database normalization | +| Refs | "Secret pocket" React doesn't track | +| Effects/Refs | "Escape hatch" from React | +| Context | CSS inheritance / "Teleportation" | +| Custom Hooks | Design system | + +## Common Prose Patterns + +**Wrong vs Right code:** +```mdx +\`\`\`js +// 🚩 Don't mutate state: +obj.x = 10; +\`\`\` + +\`\`\`js +// ✅ Replace with new object: +setObj({ ...obj, x: 10 }); +\`\`\` +``` + +**Table comparisons:** +```mdx +| passing a function | calling a function | +| `onClick={handleClick}` | `onClick={handleClick()}` | +``` + +**Linking:** +```mdx +[Read about state](/learn/state-a-components-memory) +[See `useState` reference](/reference/react/useState) +``` + +## Code Style + +- Prefer JSX over createElement +- Use const/let, never var +- Prefer named function declarations for top-level functions +- Arrow functions for callbacks that need `this` preservation + +## Version Documentation + +When APIs change between versions: + +```mdx +Starting in React 19, render `` as a provider: +\`\`\`js +{children} +\`\`\` + +In older versions: +\`\`\`js +{children} +\`\`\` +``` + +Patterns: +- "Starting in React 19..." for new APIs +- "In older versions of React..." for legacy patterns diff --git a/.claude/skills/docs-writer-blog/SKILL.md b/.claude/skills/docs-writer-blog/SKILL.md new file mode 100644 index 000000000..ef28225f8 --- /dev/null +++ b/.claude/skills/docs-writer-blog/SKILL.md @@ -0,0 +1,756 @@ +--- +name: docs-writer-blog +description: Use when writing or editing files in src/content/blog/. Provides blog post structure and conventions. +--- + +# Blog Post Writer + +## Persona + +**Voice:** Official React team voice +**Tone:** Accurate, professional, forward-looking + +## Voice & Style + +For tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`. + +--- + +## Frontmatter Schema + +All blog posts use this YAML frontmatter structure: + +```yaml +--- +title: "Title in Quotes" +author: Author Name(s) +date: YYYY/MM/DD +description: One or two sentence summary. +--- +``` + +### Field Details + +| Field | Format | Example | +|-------|--------|---------| +| `title` | Quoted string | `"React v19"`, `"React Conf 2024 Recap"` | +| `author` | Unquoted, comma + "and" for multiple | `The React Team`, `Dan Abramov and Lauren Tan` | +| `date` | `YYYY/MM/DD` with forward slashes | `2024/12/05` | +| `description` | 1-2 sentences, often mirrors intro | Summarizes announcement or content | + +### Title Patterns by Post Type + +| Type | Pattern | Example | +|------|---------|---------| +| Release | `"React vX.Y"` or `"React X.Y"` | `"React v19"` | +| Upgrade | `"React [VERSION] Upgrade Guide"` | `"How to Upgrade to React 18"` | +| Labs | `"React Labs: [Topic] – [Month Year]"` | `"React Labs: What We've Been Working On – February 2024"` | +| Conf | `"React Conf [YEAR] Recap"` | `"React Conf 2024 Recap"` | +| Feature | `"Introducing [Feature]"` or descriptive | `"Introducing react.dev"` | +| Security | `"[Severity] Security Vulnerability in [Component]"` | `"Critical Security Vulnerability in React Server Components"` | + +--- + +## Author Byline + +Immediately after frontmatter, add a byline: + +```markdown +--- + +Month DD, YYYY by [Author Name](social-link) + +--- +``` + +### Conventions + +- Full date spelled out: `December 05, 2024` +- Team posts link to `/community/team`: `[The React Team](/community/team)` +- Individual authors link to Twitter/X or Bluesky +- Multiple authors: Oxford comma before "and" +- Followed by horizontal rule `---` + +**Examples:** + +```markdown +December 05, 2024 by [The React Team](/community/team) + +--- +``` + +```markdown +May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), and [Andrew Clark](https://twitter.com/acdlite) + +--- +``` + +--- + +## Universal Post Structure + +All blog posts follow this structure: + +1. **Frontmatter** (YAML) +2. **Author byline** with date +3. **Horizontal rule** (`---`) +4. **`` component** (1-3 sentences) +5. **Horizontal rule** (`---`) (optional) +6. **Main content sections** (H2 with IDs) +7. **Closing section** (Changelog, Thanks, etc.) + +--- + +## Post Type Templates + +### Major Release Announcement + +```markdown +--- +title: "React vX.Y" +author: The React Team +date: YYYY/MM/DD +description: React X.Y is now available on npm! In this post, we'll give an overview of the new features. +--- + +Month DD, YYYY by [The React Team](/community/team) + +--- + + + +React vX.Y is now available on npm! + + + +In 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. + +- [What's new in React X.Y](#whats-new) +- [Improvements](#improvements) +- [How to upgrade](#how-to-upgrade) + +--- + +## What's new in React X.Y {/*whats-new*/} + +### Feature Name {/*feature-name*/} + +[Problem this solves. Before/after code examples.] + +For more information, see the docs for [`Feature`](/reference/react/Feature). + +--- + +## Improvements in React X.Y {/*improvements*/} + +### Improvement Name {/*improvement-name*/} + +[Description of improvement.] + +--- + +## How to upgrade {/*how-to-upgrade*/} + +See [How to Upgrade to React X.Y](/blog/YYYY/MM/DD/react-xy-upgrade-guide) for step-by-step instructions. + +--- + +## Changelog {/*changelog*/} + +### React {/*react*/} + +* Add `useNewHook` for [purpose]. ([#12345](https://github.com/facebook/react/pull/12345) by [@contributor](https://github.com/contributor)) + +--- + +_Thanks to [Name](url) for reviewing this post._ +``` + +### Upgrade Guide + +```markdown +--- +title: "React [VERSION] Upgrade Guide" +author: Author Name +date: YYYY/MM/DD +description: Step-by-step instructions for upgrading to React [VERSION]. +--- + +Month DD, YYYY by [Author Name](social-url) + +--- + + + +[Summary of upgrade and what this guide covers.] + + + + + +#### Stepping stone version {/*stepping-stone*/} + +[If applicable, describe intermediate upgrade steps.] + + + +In this post, we will guide you through the steps for upgrading: + +- [Installing](#installing) +- [Codemods](#codemods) +- [Breaking changes](#breaking-changes) +- [New deprecations](#new-deprecations) + +--- + +## Installing {/*installing*/} + +```bash +npm install --save-exact react@^X.Y.Z react-dom@^X.Y.Z +``` + +## Codemods {/*codemods*/} + + + +#### Run all React [VERSION] codemods {/*run-all-codemods*/} + +```bash +npx codemod@latest react/[VERSION]/migration-recipe +``` + + + +## Breaking changes {/*breaking-changes*/} + +### Removed: `apiName` {/*removed-api-name*/} + +`apiName` was deprecated in [Month YYYY (vX.X.X)](link). + +```js +// Before +[old code] + +// After +[new code] +``` + + + +Codemod [description]: + +```bash +npx codemod@latest react/[VERSION]/codemod-name +``` + + + +## New deprecations {/*new-deprecations*/} + +### Deprecated: `apiName` {/*deprecated-api-name*/} + +[Explanation and migration path.] + +--- + +Thanks to [Contributor](link) for reviewing this post. +``` + +### React Labs Research Update + +```markdown +--- +title: "React Labs: What We've Been Working On – [Month Year]" +author: Author1, Author2, and Author3 +date: YYYY/MM/DD +description: In React Labs posts, we write about projects in active research and development. +--- + +Month DD, YYYY by [Author1](url), [Author2](url), and [Author3](url) + +--- + + + +In 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. + + + +[Optional: Roadmap disclaimer about timelines] + +--- + +## Feature Name {/*feature-name*/} + + + +`` is now available in React's Canary channel. + + + +[Description of feature, motivation, current status.] + +### Subsection {/*subsection*/} + +[Details, examples, use cases.] + +--- + +## Research Area {/*research-area*/} + +[Problem space description. Status communication.] + +This research is still early. We'll share more when we're further along. + +--- + +_Thanks to [Reviewer](url) for reviewing this post._ + +Thanks for reading, and see you in the next update! +``` + +### React Conf Recap + +```markdown +--- +title: "React Conf [YEAR] Recap" +author: Author1 and Author2 +date: YYYY/MM/DD +description: Last week we hosted React Conf [YEAR]. In this post, we'll summarize the talks and announcements. +--- + +Month DD, YYYY by [Author1](url) and [Author2](url) + +--- + + + +Last week we hosted React Conf [YEAR] [where we announced [key announcements]]. + + + +--- + +The entire [day 1](youtube-url) and [day 2](youtube-url) streams are available online. + +## Day 1 {/*day-1*/} + +_[Watch the full day 1 stream here.](youtube-url)_ + +[Description of day 1 opening and keynote highlights.] + +Watch the full day 1 keynote here: + + + +## Day 2 {/*day-2*/} + +_[Watch the full day 2 stream here.](youtube-url)_ + +[Day 2 summary.] + + + +## Q&A {/*q-and-a*/} + +* [Q&A Title](youtube-url) hosted by [Host](url) + +## And more... {/*and-more*/} + +We also heard talks including: +* [Talk Title](youtube-url) by [Speaker](url) + +## Thank you {/*thank-you*/} + +Thank you to all the staff, speakers, and participants who made React Conf [YEAR] possible. + +See you next time! +``` + +### Feature/Tool Announcement + +```markdown +--- +title: "Introducing [Feature Name]" +author: Author Name +date: YYYY/MM/DD +description: Today we are announcing [feature]. In this post, we'll explain [what this post covers]. +--- + +Month DD, YYYY by [Author Name](url) + +--- + + + +Today we are [excited/thrilled] to announce [feature]. [What this means for users.] + + + +--- + +## tl;dr {/*tldr*/} + +* Key announcement point with [relevant link](/path). +* What users can do now. +* Availability or adoption information. + +## What is [Feature]? {/*what-is-feature*/} + +[Explanation of the feature/tool.] + +## Why we built this {/*why-we-built-this*/} + +[Motivation, history, problem being solved.] + +## Getting started {/*getting-started*/} + +To install [feature]: + + +npm install package-name + + +[You can find more documentation here.](/path/to/docs) + +## What's next {/*whats-next*/} + +[Future plans and next steps.] + +## Thank you {/*thank-you*/} + +[Acknowledgments to contributors.] + +--- + +Thanks to [Reviewer](url) for reviewing this post. +``` + +### Security Announcement + +```markdown +--- +title: "[Severity] Security Vulnerability in [Component]" +author: The React Team +date: YYYY/MM/DD +description: Brief summary of the vulnerability. A fix has been published. We recommend upgrading immediately. + +--- + +Month DD, YYYY by [The React Team](/community/team) + +--- + + + +[One or two sentences summarizing the vulnerability.] + +We recommend upgrading immediately. + + + +--- + +On [date], [researcher] reported a security vulnerability that allows [description]. + +This vulnerability was disclosed as [CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN) and is rated CVSS [score]. + +The vulnerability is present in versions [list] of: + +* [package-name](https://www.npmjs.com/package/package-name) + +## Immediate Action Required {/*immediate-action-required*/} + +A fix was introduced in versions [linked versions]. Upgrade immediately. + +### Affected frameworks {/*affected-frameworks*/} + +[List of affected frameworks with npm links.] + +### Vulnerability overview {/*vulnerability-overview*/} + +[Technical explanation of the vulnerability.] + +## Update Instructions {/*update-instructions*/} + +### Framework Name {/*update-framework-name*/} + +```bash +npm install package@version +``` + +## Timeline {/*timeline*/} + +* **November 29th**: [Researcher] reported the vulnerability. +* **December 1st**: Fix was created and validated. +* **December 3rd**: Fix published and CVE disclosed. + +## Attribution {/*attribution*/} + +Thank you to [Researcher Name](url) for discovering and reporting this vulnerability. +``` + +--- + +## Heading Conventions + +### ID Syntax + +All headings require IDs using CSS comment syntax: + +```markdown +## Heading Text {/*heading-id*/} +``` + +### ID Rules + +- Lowercase +- Kebab-case (hyphens for spaces) +- Remove special characters (apostrophes, colons, backticks) +- Concise but descriptive + +### Heading Patterns + +| Context | Example | +|---------|---------| +| Feature section | `## New Feature: Automatic Batching {/*new-feature-automatic-batching*/}` | +| New hook | `### New hook: \`useActionState\` {/*new-hook-useactionstate*/}` | +| API in backticks | `### \`\` {/*activity*/}` | +| Removed API | `#### Removed: \`propTypes\` {/*removed-proptypes*/}` | +| tl;dr section | `## tl;dr {/*tldr*/}` | + +--- + +## Component Usage Guide + +### Blog-Appropriate Components + +| Component | Usage in Blog | +|-----------|---------------| +| `` | **Required** - Opening summary after byline | +| `` | Callouts, caveats, important clarifications | +| `` | Warnings about common mistakes | +| `` | Optional technical deep dives (use sparingly) | +| `` | CLI/installation commands | +| `` | Console error/warning output | +| `` | Multi-line console output | +| `` | Conference video embeds | +| `` | Visual explanations | +| `` | Auto-generated table of contents | + +### `` Pattern + +Always wrap opening paragraph: + +```markdown + + +React 19 is now available on npm! + + +``` + +### `` Patterns + +**Simple note:** +```markdown + + +For React Native users, React 18 ships with the New Architecture. + + +``` + +**Titled note (H4 inside):** +```markdown + + +#### React 18.3 has also been published {/*react-18-3*/} + +To help with the upgrade, we've published `react@18.3`... + + +``` + +### `` Pattern + +```markdown + +npm install react@latest react-dom@latest + +``` + +### `` Pattern + +```markdown + +``` + +--- + +## Link Patterns + +### Internal Links + +| Type | Pattern | Example | +|------|---------|---------| +| Blog post | `/blog/YYYY/MM/DD/slug` | `/blog/2024/12/05/react-19` | +| API reference | `/reference/react/HookName` | `/reference/react/useState` | +| Learn section | `/learn/topic-name` | `/learn/react-compiler` | +| Community | `/community/team` | `/community/team` | + +### External Links + +| Type | Pattern | +|------|---------| +| GitHub PR | `[#12345](https://github.com/facebook/react/pull/12345)` | +| GitHub user | `[@username](https://github.com/username)` | +| Twitter/X | `[@username](https://x.com/username)` | +| Bluesky | `[Name](https://bsky.app/profile/handle)` | +| CVE | `[CVE-YYYY-NNNNN](https://www.cve.org/CVERecord?id=CVE-YYYY-NNNNN)` | +| npm package | `[package](https://www.npmjs.com/package/package)` | + +### "See docs" Pattern + +```markdown +For more information, see the docs for [`useActionState`](/reference/react/useActionState). +``` + +--- + +## Changelog Format + +### Bullet Pattern + +```markdown +* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/facebook/react/pull/10426) by [@acdlite](https://github.com/acdlite)) +* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) +``` + +**Structure:** `Verb` + backticked API + description + `([#PR](url) by [@user](url))` + +**Verbs:** Add, Fix, Remove, Make, Improve, Allow, Deprecate + +### Section Organization + +```markdown +## Changelog {/*changelog*/} + +### React {/*react*/} + +* [changes] + +### React DOM {/*react-dom*/} + +* [changes] +``` + +--- + +## Acknowledgments Format + +### Post-closing Thanks + +```markdown +--- + +Thanks to [Name](url), [Name](url), and [Name](url) for reviewing this post. +``` + +Or italicized: + +```markdown +_Thanks to [Name](url) for reviewing this post._ +``` + +### Update Notes + +For post-publication updates: + +```markdown + + +[Updated content] + +----- + +_Updated January 26, 2026._ + + +``` + +--- + +## Tone & Length by Post Type + +| Type | Tone | Length | Key Elements | +|------|------|--------|--------------| +| Release | Celebratory, informative | Medium-long | Feature overview, upgrade link, changelog | +| Upgrade | Instructional, precise | Long | Step-by-step, codemods, breaking changes | +| Labs | Transparent, exploratory | Medium | Status updates, roadmap disclaimers | +| Conf | Enthusiastic, community-focused | Medium | YouTube embeds, speaker credits | +| Feature | Excited, explanatory | Medium | tl;dr, "why", getting started | +| Security | Urgent, factual | Short-medium | Immediate action, timeline, CVE | + +--- + +## Do's and Don'ts + +**Do:** +- Focus on facts over marketing +- Say "upcoming" explicitly for unreleased features +- Include FAQ sections for major announcements +- Credit contributors and link to GitHub +- Use "we" voice for team posts +- Link to upgrade guides from release posts +- Include table of contents for long posts +- End with acknowledgments + +**Don't:** +- Promise features not yet available +- Rewrite history (add update notes instead) +- Break existing URLs +- Use hyperbolic language ("revolutionary", "game-changing") +- Skip the `` component +- Forget heading IDs +- Use heavy component nesting in blogs +- Make time estimates or predictions + +--- + +## Updating Old Posts + +- Never break existing URLs; add redirects when URLs change +- Don't rewrite history; add update notes instead: + ```markdown + + + [Updated information] + + ----- + + _Updated Month Year._ + + + ``` + +--- + +## Critical Rules + +1. **Heading IDs required:** `## Title {/*title-id*/}` +2. **`` required:** Every post starts with `` component +3. **Byline required:** Date + linked author(s) after frontmatter +4. **Date format:** Frontmatter uses `YYYY/MM/DD`, byline uses `Month DD, YYYY` +5. **Link to docs:** New APIs must link to reference documentation +6. **Security posts:** Always include "We recommend upgrading immediately" + +--- + +## Components Reference + +For complete MDX component patterns, invoke `/docs-components`. + +Blog posts commonly use: ``, ``, ``, ``, ``, ``, ``, ``. + +Prefer inline explanations over heavy component usage. diff --git a/.claude/skills/docs-writer-learn/SKILL.md b/.claude/skills/docs-writer-learn/SKILL.md new file mode 100644 index 000000000..57dc9ef74 --- /dev/null +++ b/.claude/skills/docs-writer-learn/SKILL.md @@ -0,0 +1,299 @@ +--- +name: docs-writer-learn +description: Use when writing or editing files in src/content/learn/. Provides Learn page structure and tone. +--- + +# Learn Page Writer + +## Persona + +**Voice:** Patient teacher guiding a friend through concepts +**Tone:** Conversational, warm, encouraging + +## Voice & Style + +For tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`. + +## Page Structure Variants + +### 1. Standard Learn Page (Most Common) + +```mdx +--- +title: Page Title +--- + + +1-3 sentences introducing the concept. Use *italics* for new terms. + + + + +* Learning outcome 1 +* Learning outcome 2 +* Learning outcome 3-5 + + + +## Section Name {/*section-id*/} + +Content with Sandpack examples, Pitfalls, Notes, DeepDives... + +## Another Section {/*another-section*/} + +More content... + + + +* Summary point 1 +* Summary point 2 +* Summary points 3-9 + + + + + +#### Challenge title {/*challenge-id*/} + +Description... + + +Optional guidance (single paragraph) + + + +{/* Starting code */} + + + +Explanation... + + +{/* Fixed code */} + + + + +``` + +### 2. Chapter Introduction Page + +For pages that introduce a chapter (like describing-the-ui.md, managing-state.md): + +```mdx + + +* [Sub-page title](/learn/sub-page-name) to learn... +* [Another page](/learn/another-page) to learn... + + + +## Preview Section {/*section-id*/} + +Preview description with mini Sandpack example + + + +Read **[Page Title](/learn/sub-page-name)** to learn how to... + + + +## What's next? {/*whats-next*/} + +Head over to [First Page](/learn/first-page) to start reading this chapter page by page! +``` + +**Important:** Chapter intro pages do NOT include `` or `` sections. + +### 3. Tutorial Page + +For step-by-step tutorials (like tutorial-tic-tac-toe.md): + +```mdx + +Brief statement of what will be built + + + +Alternative learning path offered + + +Table of contents (prose listing of major sections) + +## Setup {/*setup*/} +... + +## Main Content {/*main-content*/} +Progressive code building with ### subsections + +No YouWillLearn, Recap, or Challenges + +Ends with ordered list of "extra credit" improvements +``` + +### 4. Reference-Style Learn Page + +For pages with heavy API documentation (like typescript.md): + +```mdx + + +* [Link to section](#section-anchor) +* [Link to another section](#another-section) + + + +## Sections with ### subsections + +## Further learning {/*further-learning*/} + +No Recap or Challenges +``` + +## Heading ID Conventions + +All headings require IDs in `{/*kebab-case*/}` format: + +```markdown +## Section Title {/*section-title*/} +### Subsection Title {/*subsection-title*/} +#### DeepDive Title {/*deepdive-title*/} +``` + +**ID Generation Rules:** +- Lowercase everything +- Replace spaces with hyphens +- Remove apostrophes, quotes +- Remove or convert special chars (`:`, `?`, `!`, `.`, parentheses) + +**Examples:** +- "What's React?" → `{/*whats-react*/}` +- "Step 1: Create the context" → `{/*step-1-create-the-context*/}` +- "Conditional (ternary) operator (? :)" → `{/*conditional-ternary-operator--*/}` + +## Teaching Patterns + +### Problem-First Teaching + +Show broken/problematic code BEFORE the solution: + +1. Present problematic approach with `// 🔴 Avoid:` comment +2. Explain WHY it's wrong (don't just say it is) +3. Show the solution with `// ✅ Good:` comment +4. Invite experimentation + +### Progressive Complexity + +Build understanding in layers: +1. Show simplest working version +2. Identify limitation or repetition +3. Introduce solution incrementally +4. Show complete solution +5. Invite experimentation: "Try changing..." + +### Numbered Step Patterns + +For multi-step processes: + +**As section headings:** +```markdown +### Step 1: Action to take {/*step-1-action*/} +### Step 2: Next action {/*step-2-next-action*/} +``` + +**As inline lists:** +```markdown +To implement this: +1. **Declare** `inputRef` with the `useRef` Hook. +2. **Pass it** as ``. +3. **Read** the input DOM node from `inputRef.current`. +``` + +### Interactive Invitations + +After Sandpack examples, encourage experimentation: +- "Try changing X to Y. See how...?" +- "Try it in the sandbox above!" +- "Click each button separately:" +- "Have a guess!" +- "Verify that..." + +### Decision Questions + +Help readers build intuition: +> "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." + +## Component Placement Order + +1. `` - First after frontmatter +2. `` - After Intro (standard/chapter pages) +3. Body content with ``, ``, `` placed contextually +4. `` - Before Challenges (standard pages only) +5. `` - End of page (standard pages only) + +For component structure and syntax, invoke `/docs-components`. + +## Code Examples + +For Sandpack file structure, naming conventions, code style, and pedagogical markers, invoke `/docs-sandpack`. + +## Cross-Referencing + +### When to Link + +**Link to /learn:** +- Explaining concepts or mental models +- Teaching how things work together +- Tutorials and guides +- "Why" questions + +**Link to /reference:** +- API details, Hook signatures +- Parameter lists and return values +- Rules and restrictions +- "What exactly" questions + +### Link Formats + +```markdown +[concept name](/learn/page-name) +[`useState`](/reference/react/useState) +[section link](/learn/page-name#section-id) +[MDN](https://developer.mozilla.org/...) +``` + +## Section Dividers + +**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. + +## Do's and Don'ts + +**Do:** +- Use "you" to address the reader +- Show broken code before fixes +- Explain behavior before naming concepts +- Build concepts progressively +- Include interactive Sandpack examples +- Use established analogies consistently +- Place Pitfalls AFTER explaining concepts +- Invite experimentation with "Try..." phrases + +**Don't:** +- Use "simple", "easy", "just", or time estimates +- Reference concepts not yet introduced +- Skip required components for page type +- Use passive voice without reason +- Place Pitfalls before teaching the concept +- Use `---` dividers between sections +- Create unnecessary abstraction in examples +- Place consecutive Pitfalls or Notes without separating prose (combine or separate) + +## Critical Rules + +1. **All headings require IDs:** `## Title {/*title-id*/}` +2. **Chapter intros use `isChapter={true}` and ``** +3. **Tutorial pages omit YouWillLearn/Recap/Challenges** +4. **Problem-first teaching:** Show broken → explain → fix +5. **No consecutive Pitfalls/Notes:** See `/docs-components` Callout Spacing Rules + +For component patterns, invoke `/docs-components`. For Sandpack patterns, invoke `/docs-sandpack`. diff --git a/.claude/skills/docs-writer-reference/SKILL.md b/.claude/skills/docs-writer-reference/SKILL.md new file mode 100644 index 000000000..e63c00fca --- /dev/null +++ b/.claude/skills/docs-writer-reference/SKILL.md @@ -0,0 +1,885 @@ +--- +name: docs-writer-reference +description: Reference page structure, templates, and writing patterns for src/content/reference/. For components, see /docs-components. For code examples, see /docs-sandpack. +--- + +# Reference Page Writer + +## Quick Reference + +### Page Type Decision Tree + +1. Is it a Hook? Use **Type A (Hook/Function)** +2. Is it a React component (``)? Use **Type B (Component)** +3. Is it a compiler configuration option? Use **Type C (Configuration)** +4. Is it a directive (`'use something'`)? Use **Type D (Directive)** +5. Is it an ESLint rule? Use **Type E (ESLint Rule)** +6. Is it listing multiple APIs? Use **Type F (Index/Category)** + +### Component Selection + +For component selection and patterns, invoke `/docs-components`. + +--- + +## Voice & Style + +**Voice:** Authoritative technical reference writer +**Tone:** Precise, comprehensive, neutral + +For tone, capitalization, jargon, and prose patterns, invoke `/docs-voice`. + +**Do:** +- Start with single-line description: "`useState` is a React Hook that lets you..." +- Include Parameters, Returns, Caveats sections for every API +- Document edge cases most developers will encounter +- Use section dividers between major sections +- Include "See more examples below" links +- Be assertive, not hedging - "This is designed for..." not "This helps avoid issues with..." +- State facts, not benefits - "The callback always accesses the latest values" not "This helps avoid stale closures" +- Use minimal but meaningful names - `onEvent` or `onTick` over `onSomething` + +**Don't:** +- Skip the InlineToc component +- Omit error cases or caveats +- Use conversational language +- Mix teaching with reference (that's Learn's job) +- Document past bugs or fixed issues +- Include niche edge cases (e.g., `this` binding, rare class patterns) +- Add phrases explaining "why you'd want this" - the Usage section examples do that +- Exception: Pitfall and DeepDive asides can use slightly conversational phrasing + +--- + +## Page Templates + +### Type A: Hook/Function + +**When to use:** Documenting React hooks and standalone functions (useState, useEffect, memo, lazy, etc.) + +```mdx +--- +title: hookName +--- + + + +`hookName` is a React Hook that lets you [brief description]. + +```js +const result = hookName(arg) +``` + + + + + +--- + +## Reference {/*reference*/} + +### `hookName(arg)` {/*hookname*/} + +Call `hookName` at the top level of your component to... + +```js +[signature example with annotations] +``` + +[See more examples below.](#usage) + +#### Parameters {/*parameters*/} +* `arg`: Description of the parameter. + +#### Returns {/*returns*/} +Description of return value. + +#### Caveats {/*caveats*/} +* Important caveat about usage. + +--- + +## Usage {/*usage*/} + +### Common Use Case {/*common-use-case*/} +Explanation with Sandpack examples... + +--- + +## Troubleshooting {/*troubleshooting*/} + +### Common Problem {/*common-problem*/} +How to solve it... +``` + +--- + +### Type B: Component + +**When to use:** Documenting React components (Suspense, Fragment, Activity, StrictMode) + +```mdx +--- +title: +--- + + + +`` lets you [primary action]. + +```js + + + +``` + + + + + +--- + +## Reference {/*reference*/} + +### `` {/*componentname*/} + +[Component purpose and behavior] + +#### Props {/*props*/} + +* `propName`: Description of the prop... +* **optional** `optionalProp`: Description... + +#### Caveats {/*caveats*/} + +* [Caveats specific to this component] +``` + +**Key differences from Hook pages:** +- Title uses JSX syntax: `` +- Uses `#### Props` instead of `#### Parameters` +- Reference heading uses JSX: `` ### `` `` + +--- + +### Type C: Configuration + +**When to use:** Documenting React Compiler configuration options + +```mdx +--- +title: optionName +--- + + + +The `optionName` option [controls/specifies/determines] [what it does]. + + + +```js +{ + optionName: 'value' // Quick example +} +``` + + + +--- + +## Reference {/*reference*/} + +### `optionName` {/*optionname*/} + +[Description of the option's purpose] + +#### Type {/*type*/} + +``` +'value1' | 'value2' | 'value3' +``` + +#### Default value {/*default-value*/} + +`'value1'` + +#### Options {/*options*/} + +- **`'value1'`** (default): Description +- **`'value2'`**: Description +- **`'value3'`**: Description + +#### Caveats {/*caveats*/} + +* [Usage caveats] +``` + +--- + +### Type D: Directive + +**When to use:** Documenting directives like 'use server', 'use client', 'use memo' + +```mdx +--- +title: "'use directive'" +titleForTitleTag: "'use directive' directive" +--- + + + +`'use directive'` is for use with [React Server Components](/reference/rsc/server-components). + + + + + +`'use directive'` marks [what it marks] for [purpose]. + +```js {1} +function MyComponent() { + 'use directive'; + // ... +} +``` + + + + + +--- + +## Reference {/*reference*/} + +### `'use directive'` {/*use-directive*/} + +Add `'use directive'` at the beginning of [location] to [action]. + +#### Caveats {/*caveats*/} + +* `'use directive'` must be at the very beginning... +* The directive must be written with single or double quotes, not backticks. +* [Other placement/syntax caveats] +``` + +**Key characteristics:** +- Title includes quotes: `title: "'use server'"` +- Uses `titleForTitleTag` for browser tab title +- `` block appears before `` +- Caveats focus on placement and syntax requirements + +--- + +### Type E: ESLint Rule + +**When to use:** Documenting ESLint plugin rules + +```mdx +--- +title: rule-name +--- + + +Validates that [what the rule checks]. + + +## Rule Details {/*rule-details*/} + +[Explanation of why this rule exists and React's underlying assumptions] + +## Common Violations {/*common-violations*/} + +[Description of violation patterns] + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// X Missing dependency +useEffect(() => { + console.log(count); +}, []); // Missing 'count' +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// checkmark All dependencies included +useEffect(() => { + console.log(count); +}, [count]); +``` + +## Troubleshooting {/*troubleshooting*/} + +### [Problem description] {/*problem-slug*/} + +[Solution] + +## Options {/*options*/} + +[Configuration options if applicable] +``` + +**Key characteristics:** +- Intro is a single "Validates that..." sentence +- Uses "Invalid"/"Valid" sections with emoji-prefixed code comments +- Rule Details explains "why" not just "what" + +--- + +### Type F: Index/Category + +**When to use:** Overview pages listing multiple APIs in a category + +```mdx +--- +title: "Built-in React [Type]" +--- + + + +*Concept* let you [purpose]. Brief scope statement. + + + +--- + +## Category Name {/*category-name*/} + +*Concept* explanation with [Learn section link](/learn/topic). + +To [action], use one of these [Type]: + +* [`apiName`](/reference/react/apiName) lets you [action]. +* [`apiName`](/reference/react/apiName) declares [thing]. + +```js +function Example() { + const value = useHookName(args); +} +``` + +--- + +## Your own [Type] {/*your-own-type*/} + +You can also [define your own](/learn/topic) as JavaScript functions. +``` + +**Key characteristics:** +- Title format: "Built-in React [Type]" +- Italicized concept definitions +- Horizontal rules between sections +- Closes with "Your own [Type]" section + +--- + +## Advanced Patterns + +### Multi-Function Documentation + +**When to use:** When a hook returns a function that needs its own documentation (useState's setter, useReducer's dispatch) + +```md +### `hookName(args)` {/*hookname*/} + +[Main hook documentation] + +#### Parameters {/*parameters*/} +#### Returns {/*returns*/} +#### Caveats {/*caveats*/} + +--- + +### `set` functions, like `setSomething(nextState)` {/*setstate*/} + +The `set` function returned by `hookName` lets you [action]. + +#### Parameters {/*setstate-parameters*/} +#### Returns {/*setstate-returns*/} +#### Caveats {/*setstate-caveats*/} +``` + +**Key conventions:** +- Horizontal rule (`---`) separates main hook from returned function +- Heading IDs include prefix: `{/*setstate-parameters*/}` vs `{/*parameters*/}` +- Use generic names: "set functions" not "setCount" + +--- + +### Compound Return Objects + +**When to use:** When a function returns an object with multiple properties/methods (createContext) + +```md +### `createContext(defaultValue)` {/*createcontext*/} + +[Main function documentation] + +#### Returns {/*returns*/} + +`createContext` returns a context object. + +**The context object itself does not hold any information.** It represents... + +* `SomeContext` lets you provide the context value. +* `SomeContext.Consumer` is an alternative way to read context. + +--- + +### `SomeContext` Provider {/*provider*/} + +[Documentation for Provider] + +#### Props {/*provider-props*/} + +--- + +### `SomeContext.Consumer` {/*consumer*/} + +[Documentation for Consumer] + +#### Props {/*consumer-props*/} +``` + +--- + +## Writing Patterns + +### Opening Lines by Page Type + +| Page Type | Pattern | Example | +|-----------|---------|---------| +| 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." | +| Component | `` `` lets you [action]. `` | "`` lets you display a fallback until its children have finished loading." | +| API | `` `apiName` lets you [action]. `` | "`memo` lets you skip re-rendering a component when its props are unchanged." | +| Configuration | `` The `optionName` option [controls/specifies/determines] [what]. `` | "The `target` option specifies which React version the compiler generates code for." | +| Directive | `` `'directive'` [marks/opts/prevents] [what] for [purpose]. `` | "`'use server'` marks a function as callable from the client." | +| ESLint Rule | `` Validates that [condition]. `` | "Validates that dependency arrays for React hooks contain all necessary dependencies." | + +--- + +### Parameter Patterns + +**Simple parameter:** +```md +* `paramName`: Description of what it does. +``` + +**Optional parameter:** +```md +* **optional** `paramName`: Description of what it does. +``` + +**Parameter with special function behavior:** +```md +* `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. + * 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. +``` + +**Callback parameter with sub-parameters:** +```md +* `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. +``` + +**Nested options object:** +```md +* **optional** `options`: An object with options for this React root. + * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. + * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by `useId`. +``` + +--- + +### Return Value Patterns + +**Single value return:** +```md +`hookName` returns the current value. The value will be the same as `initialValue` during the first render. +``` + +**Array return (numbered list):** +```md +`useState` returns an array with exactly two values: + +1. The current state. During the first render, it will match the `initialState` you have passed. +2. The [`set` function](#setstate) that lets you update the state to a different value and trigger a re-render. +``` + +**Object return (bulleted list):** +```md +`createElement` returns a React element object with a few properties: + +* `type`: The `type` you have passed. +* `props`: The `props` you have passed except for `ref` and `key`. +* `ref`: The `ref` you have passed. If missing, `null`. +* `key`: The `key` you have passed, coerced to a string. If missing, `null`. +``` + +**Promise return:** +```md +`prerender` returns a Promise: +- If rendering is successful, the Promise will resolve to an object containing: + - `prelude`: a [Web Stream](MDN-link) of HTML. + - `postponed`: a JSON-serializable object for resumption. +- If rendering fails, the Promise will be rejected. +``` + +**Wrapped function return:** +```md +`cache` returns a cached version of `fn` with the same type signature. It does not call `fn` in the process. + +When 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. +``` + +--- + +### Caveats Patterns + +**Standard Hook caveat (almost always first for Hooks):** +```md +* `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. +``` + +**Stable identity caveat (for returned functions):** +```md +* 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. +``` + +**Strict Mode caveat:** +```md +* 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. +``` + +**Caveat with code example:** +```md +* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. For example, the following is discouraged: + + ```js + const selectedProductId = useSyncExternalStore(...); + const data = use(fetchItem(selectedProductId)) // X Don't suspend based on store value + ``` +``` + +**Canary caveat:** +```md +* If you want to pass `ref` to a Fragment, you can't use the `<>...` syntax. +``` + +--- + +### Troubleshooting Patterns + +**Heading format (first person problem statements):** +```md +### I've updated the state, but logging gives me the old value {/*old-value*/} + +### My initializer or updater function runs twice {/*runs-twice*/} + +### I want to read the latest state from a callback {/*read-latest-state*/} +``` + +**Error message format:** +```md +### I'm getting an error: "Too many re-renders" {/*too-many-rerenders*/} + +### I'm getting an error: "Rendered more hooks than during the previous render" {/*more-hooks*/} +``` + +**Lint error format:** +```md +### I'm getting a lint error: "[exact error message]" {/*lint-error-slug*/} +``` + +**Problem-solution structure:** +1. State the problem with code showing the issue +2. Explain why it happens +3. Provide the solution with corrected code +4. Link to Learn section for deeper understanding + +--- + +### Code Comment Conventions + +For code comment conventions (wrong/right, legacy/recommended, server/client labeling, bundle size annotations), invoke `/docs-sandpack`. + +--- + +### Link Description Patterns + +| Pattern | Example | +|---------|---------| +| "lets you" + action | "`memo` lets you skip re-rendering when props are unchanged." | +| "declares" + thing | "`useState` declares a state variable that you can update directly." | +| "reads" + thing | "`useContext` reads and subscribes to a context." | +| "connects" + thing | "`useEffect` connects a component to an external system." | +| "Used with" | "Used with [`useContext`.](/reference/react/useContext)" | +| "Similar to" | "Similar to [`useTransition`.](/reference/react/useTransition)" | + +--- + +## Component Patterns + +For comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, Deprecated, RSC, Canary, Diagram, Code Steps), invoke `/docs-components`. + +For Sandpack-specific patterns and code style, invoke `/docs-sandpack`. + +### Reference-Specific Component Rules + +**Component placement in Reference pages:** +- `` goes before `` at top of page +- `` goes after `` for page-level deprecation +- `` goes after method heading for method-level deprecation +- `` wrapper goes inline within `` +- `` appears in headings, props lists, and caveats + +**Troubleshooting-specific components:** +- Use first-person problem headings +- Cross-reference Pitfall IDs when relevant + +**Callout spacing:** +- Never place consecutive Pitfalls or consecutive Notes +- Combine related warnings into one with titled subsections, or separate with prose/code +- Consecutive DeepDives OK for multi-part explorations +- See `/docs-components` Callout Spacing Rules + +--- + +## Content Principles + +### Intro Section +- **One sentence, ~15 words max** - State what the Hook does, not how it works +- ✅ "`useEffectEvent` is a React Hook that lets you separate events from Effects." +- ❌ "`useEffectEvent` is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an Effect Event." + +### Reference Code Example +- Show just the API call (5-10 lines), not a full component +- Move full component examples to Usage section + +### Usage Section Structure +1. **First example: Core mental model** - Show the canonical use case with simplest concrete example +2. **Subsequent examples: Canonical use cases** - Name the *why* (e.g., "Avoid reconnecting to external systems"), show a concrete *how* + - Prefer broad canonical use cases over multiple narrow concrete examples + - The section title IS the teaching - "When would I use this?" should be answered by the heading + +### What to Include vs. Exclude +- **Never** document past bugs or fixed issues +- **Include** edge cases most developers will encounter +- **Exclude** niche edge cases (e.g., `this` binding, rare class patterns) + +### Caveats Section +- Include rules the linter enforces or that cause immediate errors +- Include fundamental usage restrictions +- Exclude implementation details unless they affect usage +- Exclude repetition of things explained elsewhere +- Keep each caveat to one sentence when possible + +### Troubleshooting Section +- Error headings only: "I'm getting an error: '[message]'" format +- Never document past bugs - if it's fixed, it doesn't belong here +- Focus on errors developers will actually encounter today + +### DeepDive Content +- **Goldilocks principle** - Deep enough for curious developers, short enough to not overwhelm +- Answer "why is it designed this way?" - not exhaustive technical details +- Readers who skip it should miss nothing essential for using the API +- If the explanation is getting long, you're probably explaining too much + +--- + +## Domain-Specific Guidance + +### Hooks + +**Returned function documentation:** +- Document setter/dispatch functions as separate `###` sections +- Use generic names: "set functions" not "setCount" +- Include stable identity caveat for returned functions + +**Dependency array documentation:** +- List what counts as reactive values +- Explain when dependencies are ignored +- Link to removing effect dependencies guide + +**Recipes usage:** +- Group related examples with meaningful titleText +- Each recipe has brief intro, Sandpack, and `` + +--- + +### Components + +**Props documentation:** +- Use `#### Props` instead of `#### Parameters` +- Mark optional props with `**optional**` prefix +- Use `` inline for canary-only props + +**JSX syntax in titles/headings:** +- Frontmatter title: `title: ` +- Reference heading: `` ### `` {/*suspense*/} `` + +--- + +### React-DOM + +**Common props linking:** +```md +`` supports all [common element props.](/reference/react-dom/components/common#common-props) +``` + +**Props categorization:** +- Controlled vs uncontrolled props grouped separately +- Form-specific props documented with action patterns +- MDN links for standard HTML attributes + +**Environment-specific notes:** +```mdx + + +This 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. + + +``` + +**Progressive enhancement:** +- Document benefits for users without JavaScript +- Explain Server Function + form action integration +- Show hidden form field and `.bind()` patterns + +--- + +### RSC + +**RSC banner (before Intro):** +Always place `` component before `` for Server Component-only APIs. + +**Serialization type lists:** +When documenting Server Function arguments, list supported types: +```md +Supported types for Server Function arguments: + +* Primitives + * [string](MDN-link) + * [number](MDN-link) +* Iterables containing serializable values + * [Array](MDN-link) + * [Map](MDN-link) + +Notably, these are not supported: +* React elements, or [JSX](/learn/writing-markup-with-jsx) +* Functions (other than Server Functions) +``` + +**Bundle size comparisons:** +- Show "Not included in bundle" for server-only imports +- Annotate client bundle sizes with gzip: `// 35.9K (11.2K gzipped)` + +--- + +### Compiler + +**Configuration page structure:** +- Type (union type or interface) +- Default value +- Options/Valid values with descriptions + +**Directive documentation:** +- Placement requirements are critical +- Mode interaction tables showing combinations +- "Use sparingly" + "Plan for removal" patterns for escape hatches + +**Library author guides:** +- Audience-first intro +- Benefits/Why section +- Numbered step-by-step setup + +--- + +### ESLint + +**Rule Details section:** +- Explain "why" not just "what" +- Focus on React's underlying assumptions +- Describe consequences of violations + +**Invalid/Valid sections:** +- Standard intro: "Examples of [in]correct code for this rule:" +- Use X emoji for invalid, checkmark for valid +- Show inline comments explaining the violation + +**Configuration options:** +- Show shared settings (preferred) +- Show rule-level options (backward compatibility) +- Note precedence when both exist + +--- + +## Edge Cases + +For deprecated, canary, and version-specific component patterns (placement, syntax, examples), invoke `/docs-components`. + +**Quick placement rules:** +- `` after `` for page-level, after heading for method-level +- `` wrapper inline in Intro, `` in headings/props/caveats +- Version notes use `` with "Starting in React 19..." pattern + +**Removed APIs on index pages:** +```md +## Removed APIs {/*removed-apis*/} + +These APIs were removed in React 19: + +* [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead. +``` + +Link to previous version docs (18.react.dev) for removed API documentation. + +--- + +## Critical Rules + +1. **Heading IDs required:** `## Title {/*title-id*/}` (lowercase, hyphens) +2. **Sandpack main file needs `export default`** +3. **Active file syntax:** ` ```js src/File.js active ` +4. **Error headings in Troubleshooting:** Use `### I'm getting an error: "[message]" {/*id*/}` +5. **Section dividers (`---`)** required between headings (see Section Dividers below) +6. **InlineToc required:** Always include `` after Intro +7. **Consistent parameter format:** Use `* \`paramName\`: description` with `**optional**` prefix for optional params +8. **Numbered lists for array returns:** When hooks return arrays, use numbered lists in Returns section +9. **Generic names for returned functions:** Use "set functions" not "setCount" +10. **Props vs Parameters:** Use `#### Props` for Components (Type B), `#### Parameters` for Hooks/APIs (Type A) +11. **RSC placement:** `` component goes before ``, not after +12. **Canary markers:** Use `` wrapper inline in Intro, `` in headings/props +13. **Deprecated placement:** `` goes after `` for page-level, after heading for method-level +14. **Code comment emojis:** Use X for wrong, checkmark for correct in code examples +15. **No consecutive Pitfalls/Notes:** Combine into one component with titled subsections, or separate with prose/code (see `/docs-components`) + +For component heading level conventions (DeepDive, Pitfall, Note, Recipe headings), see `/docs-components`. + +### Section Dividers + +Use `---` horizontal rules to visually separate major sections: + +- **After ``** - Before `## Reference` heading +- **Between API subsections** - Between different function/hook definitions (e.g., between `useState()` and `set functions`) +- **Before `## Usage`** - Separates API reference from examples +- **Before `## Troubleshooting`** - Separates content from troubleshooting +- **Between EVERY Usage subsections** - When switching to a new major use case + +Always have a blank line before and after `---`. + +### Section ID Conventions + +| Section | ID Format | +|---------|-----------| +| Main function | `{/*functionname*/}` | +| Returned function | `{/*setstate*/}`, `{/*dispatch*/}` | +| Sub-section of returned function | `{/*setstate-parameters*/}` | +| Troubleshooting item | `{/*problem-description-slug*/}` | +| Pitfall | `{/*pitfall-description*/}` | +| Deep dive | `{/*deep-dive-topic*/}` | diff --git a/.claude/skills/react-expert/SKILL.md b/.claude/skills/react-expert/SKILL.md new file mode 100644 index 000000000..5ebcdee37 --- /dev/null +++ b/.claude/skills/react-expert/SKILL.md @@ -0,0 +1,335 @@ +--- +name: react-expert +description: Use when researching React APIs or concepts for documentation. Use when you need authoritative usage examples, caveats, warnings, or errors for a React feature. +--- + +# React Expert Research Skill + +## Overview + +This 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. + + +**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. + +**Red Flags - STOP if you catch yourself thinking:** +- "I know this API does X" → Find source evidence first +- "Common pattern is Y" → Verify in test files +- Generating example code → Must have source file reference + + +## Invocation + +``` +/react-expert useTransition +/react-expert suspense boundaries +/react-expert startTransition +``` + +## Sources (Priority Order) + +1. **React Repo Tests** - Most authoritative for actual behavior +2. **React Source Code** - Warnings, errors, implementation details +3. **Git History** - Commit messages with context +4. **GitHub PRs & Comments** - Design rationale (via `gh` CLI) +5. **GitHub Issues** - Confusion/questions (facebook/react + reactjs/react.dev) +6. **React Working Group** - Design discussions for newer APIs +7. **Flow Types** - Source of truth for type signatures +8. **TypeScript Types** - Note discrepancies with Flow +9. **Current react.dev docs** - Baseline (not trusted as complete) + +**No web search** - No Stack Overflow, blog posts, or web searches. GitHub API via `gh` CLI is allowed. + +## Workflow + +### Step 1: Setup React Repo + +First, ensure the React repo is available locally: + +```bash +# Check if React repo exists, clone or update +if [ -d ".claude/react" ]; then + cd .claude/react && git pull origin main +else + git clone --depth=100 https://github.com/facebook/react.git .claude/react +fi +``` + +Get the current commit hash for the research document: +```bash +cd .claude/react && git rev-parse --short HEAD +``` + +### Step 2: Dispatch 6 Parallel Research Agents + +Spawn these agents IN PARALLEL using the Task tool. Each agent receives the skepticism preamble: + +> "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." + +| Agent | subagent_type | Focus | Instructions | +|-------|---------------|-------|--------------| +| 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. | +| 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. | +| git-historian | Explore | Commit messages | Run `git log --all --grep="" --oneline -50` in `.claude/react`. Read full commit messages for context. | +| 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. | +| issue-hunter | Explore | Issues showing confusion | Search issues in both `facebook/react` and `reactjs/react.dev` repos. Look for common questions and misunderstandings. | +| 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. | + +### Step 3: Agent Prompts + +Use these exact prompts when spawning agents: + +#### test-explorer +``` +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. + +Your task: Find test files in .claude/react that demonstrate usage. + +1. Search for test files: Glob for `**/__tests__/**/**` and `**/__tests__/**/*.js` then grep for +2. For each relevant test file, extract: + - The test description (describe/it blocks) + - The actual usage code + - Any assertions about behavior + - Edge cases being tested +3. Report findings with exact file paths and line numbers + +Format your output as: +## Test File: +### Test: "" +```javascript + +``` +**Behavior:** +``` + +#### source-explorer +``` +You are researching React's . + +CRITICAL: Do NOT rely on your prior knowledge about this API. Only report what you find in the source files. + +Your task: Find warnings, errors, and implementation details for . + +1. Search .claude/react/packages/*/src/ for: + - console.error mentions of + - console.warn mentions of + - Error messages mentioning + - The main implementation file +2. For each warning/error, document: + - The exact message text + - The condition that triggers it + - The source file and line number + +Format your output as: +## Warnings & Errors +| Message | Trigger Condition | Source | +|---------|------------------|--------| +| "" | | | + +## Implementation Notes + +``` + +#### git-historian +``` +You are researching React's . + +CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in git history. + +Your task: Find commit messages that explain design decisions. + +1. Run: cd .claude/react && git log --all --grep="" --oneline -50 +2. For significant commits, read full message: git show --stat +3. Look for: + - Initial introduction of the API + - Bug fixes (reveal edge cases) + - Behavior changes + - Deprecation notices + +Format your output as: +## Key Commits +### - +**Date:** +**Context:** +**Impact:** +``` + +#### pr-researcher +``` +You are researching React's . + +CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in PRs. + +Your task: Find PRs that introduced or modified . + +1. Run: gh pr list -R facebook/react --search "" --state all --limit 20 --json number,title,url +2. For promising PRs, read details: gh pr view -R facebook/react +3. Look for: + - The original RFC/motivation + - Design discussions in comments + - Alternative approaches considered + - Breaking changes + +Format your output as: +## Key PRs +### PR #: +**URL:** <url> +**Summary:** <what it introduced/changed> +**Design Rationale:** <why this approach> +**Discussion Highlights:** <key points from comments> +``` + +#### issue-hunter +``` +You are researching React's <TOPIC>. + +CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issues. + +Your task: Find issues that reveal common confusion about <TOPIC>. + +1. Search facebook/react: gh issue list -R facebook/react --search "<topic>" --state all --limit 20 --json number,title,url +2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search "<topic>" --state all --limit 20 --json number,title,url +3. For each issue, identify: + - What the user was confused about + - What the resolution was + - Any gotchas revealed + +Format your output as: +## Common Confusion +### Issue #<number>: <title> +**Repo:** <facebook/react or reactjs/react.dev> +**Confusion:** <what they misunderstood> +**Resolution:** <correct understanding> +**Gotcha:** <if applicable> +``` + +#### types-inspector +``` +You are researching React's <TOPIC>. + +CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in type definitions. + +Your task: Find and compare Flow and TypeScript type signatures for <TOPIC>. + +1. Flow types (source of truth): Search .claude/react/packages/*/src/*.js for @flow annotations related to <topic> +2. TypeScript types: Search .claude/react/packages/*/index.d.ts and @types/react +3. Compare and note any discrepancies + +Format your output as: +## Flow Types (Source of Truth) +**File:** <path> +```flow +<exact type definition> +``` + +## TypeScript Types +**File:** <path> +```typescript +<exact type definition> +``` + +## Discrepancies +<any differences between Flow and TS definitions> +``` + +### Step 4: Synthesize Results + +After all agents complete, combine their findings into a single research document. + +**DO NOT add information from your own knowledge.** Only include what agents found in sources. + +### Step 5: Save Output + +Write the final document to `.claude/research/<topic>.md` + +Replace spaces in topic with hyphens (e.g., "suspense boundaries" → "suspense-boundaries.md") + +## Output Document Template + +```markdown +# React Research: <topic> + +> Generated by /react-expert on YYYY-MM-DD +> Sources: React repo (commit <hash>), N PRs, M issues + +## Summary + +[Brief summary based SOLELY on source findings, not prior knowledge] + +## API Signature + +### Flow Types (Source of Truth) + +[From types-inspector agent] + +### TypeScript Types + +[From types-inspector agent] + +### Discrepancies + +[Any differences between Flow and TS] + +## Usage Examples + +### From Tests + +[From test-explorer agent - with file:line references] + +### From PRs/Issues + +[Real-world patterns from discussions] + +## Caveats & Gotchas + +[Each with source link] + +- **<gotcha>** - Source: <link> + +## Warnings & Errors + +| Message | Trigger Condition | Source File | +|---------|------------------|-------------| +[From source-explorer agent] + +## Common Confusion + +[From issue-hunter agent] + +## Design Decisions + +[From git-historian and pr-researcher agents] + +## Source Links + +### Commits +- <hash>: <description> + +### Pull Requests +- PR #<number>: <title> - <url> + +### Issues +- Issue #<number>: <title> - <url> +``` + +## Common Mistakes to Avoid + +1. **Trusting prior knowledge** - If you "know" something about the API, find the source evidence anyway +2. **Generating example code** - Every code example must come from an actual source file +3. **Skipping agents** - All 6 agents must run; each provides unique perspective +4. **Summarizing without sources** - Every claim needs a file:line or PR/issue reference +5. **Using web search** - No Stack Overflow, no blog posts, no social media + +## Verification Checklist + +Before finalizing the research document: + +- [ ] React repo is at `.claude/react` with known commit hash +- [ ] All 6 agents were spawned in parallel +- [ ] Every code example has a source file reference +- [ ] Warnings/errors table has source locations +- [ ] No claims made without source evidence +- [ ] Discrepancies between Flow/TS types documented +- [ ] Source links section is complete diff --git a/.claude/skills/review-docs/SKILL.md b/.claude/skills/review-docs/SKILL.md new file mode 100644 index 000000000..61a6a0e05 --- /dev/null +++ b/.claude/skills/review-docs/SKILL.md @@ -0,0 +1,20 @@ +--- +name: review-docs +description: Use when reviewing React documentation for structure, components, and style compliance +--- +CRITICAL: do not load these skills yourself. + +Run these tasks in parallel for the given file(s). Each agent checks different aspects—not all apply to every file: + +- [ ] Ask docs-reviewer agent to review {files} with docs-writer-learn (only for files in src/content/learn/). +- [ ] Ask docs-reviewer agent to review {files} with docs-writer-reference (only for files in src/content/reference/). +- [ ] Ask docs-reviewer agent to review {files} with docs-writer-blog (only for files in src/content/blog/). +- [ ] Ask docs-reviewer agent to review {files} with docs-voice (all documentation files). +- [ ] Ask docs-reviewer agent to review {files} with docs-components (all documentation files). +- [ ] Ask docs-reviewer agent to review {files} with docs-sandpack (files containing Sandpack examples). + +If no file is specified, check git status for modified MDX files in `src/content/`. + +The 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. + + diff --git a/.claude/skills/write/SKILL.md b/.claude/skills/write/SKILL.md new file mode 100644 index 000000000..3099b3a0c --- /dev/null +++ b/.claude/skills/write/SKILL.md @@ -0,0 +1,176 @@ +--- +name: write +description: Use when creating new React documentation pages or updating existing ones. Accepts instructions like "add optimisticKey reference docs", "update ViewTransition with Activity", or "transition learn docs". +--- + +# Documentation Writer + +Orchestrates research, writing, and review for React documentation. + +## Invocation + +``` +/write add optimisticKey → creates new reference docs +/write update ViewTransition Activity → updates ViewTransition docs to cover Activity +/write transition learn docs → creates new learn docs for transitions +/write blog post for React 20 → creates a new blog post +``` + +## Workflow + +```dot +digraph write_flow { + rankdir=TB; + "Parse intent" [shape=box]; + "Research (parallel)" [shape=box]; + "Synthesize plan" [shape=box]; + "Write docs" [shape=box]; + "Review docs" [shape=box]; + "Issues found?" [shape=diamond]; + "Done" [shape=doublecircle]; + + "Parse intent" -> "Research (parallel)"; + "Research (parallel)" -> "Synthesize plan"; + "Synthesize plan" -> "Write docs"; + "Write docs" -> "Review docs"; + "Review docs" -> "Issues found?"; + "Issues found?" -> "Write docs" [label="yes - fix"]; + "Issues found?" -> "Done" [label="no"]; +} +``` + +### Step 1: Parse Intent + +Determine from the user's instruction: + +| Field | How to determine | +|-------|------------------| +| **Action** | "add"/"create"/"new" = new page; "update"/"edit"/"with" = modify existing | +| **Topic** | The React API or concept (e.g., `optimisticKey`, `ViewTransition`, `transitions`) | +| **Doc type** | "reference" (default for APIs/hooks/components), "learn" (for concepts/guides), "blog" (for announcements) | +| **Target file** | For updates: find existing file in `src/content/`. For new: determine path from doc type | + +If the intent is ambiguous, ask the user to clarify before proceeding. + +### Step 2: Research (Parallel Agents) + +Spawn these agents **in parallel**: + +#### Agent 1: React Expert Research + +Use a Task agent (subagent_type: `general-purpose`) to invoke `/react-expert <topic>`. This researches the React source code, tests, PRs, issues, and type signatures. + +**Prompt:** +``` +Invoke the /react-expert skill for <TOPIC>. Follow the skill's full workflow: +setup the React repo, dispatch all 6 research agents in parallel, synthesize +results, and save to .claude/research/<topic>.md. Return the full research document. +``` + +#### Agent 2: Existing Docs Audit + +Use a Task agent (subagent_type: `Explore`) to find and read existing documentation for the topic. + +**Prompt:** +``` +Find all existing documentation related to <TOPIC> in this repo: +1. Search src/content/ for files mentioning <TOPIC> +2. Read any matching files fully +3. For updates: identify what sections exist and what's missing +4. For new pages: identify related pages to understand linking/cross-references +5. Check src/sidebarLearn.json and src/sidebarReference.json for navigation placement + +Return: list of existing files with summaries, navigation structure, and gaps. +``` + +#### Agent 3: Use Case Research + +Use a Task agent (subagent_type: `general-purpose`) with web search to find common use cases and patterns. + +**Prompt:** +``` +Search the web for common use cases and patterns for React's <TOPIC>. +Focus on: +1. Real-world usage patterns developers actually need +2. Common mistakes or confusion points +3. Migration patterns (if replacing an older API) +4. Framework integration patterns (Next.js, Remix, etc.) + +Return a summary of the top 5-8 use cases with brief code sketches. +Do NOT search Stack Overflow. Focus on official docs, GitHub discussions, +and high-quality technical blogs. +``` + +### Step 3: Synthesize Writing Plan + +After all research agents complete, create a writing plan that includes: + +1. **Page type** (from docs-writer-reference decision tree or learn/blog type) +2. **File path** for the new or updated file +3. **Outline** with section headings matching the appropriate template +4. **Content notes** for each section, drawn from research: + - API signature and parameters (from react-expert types) + - Usage examples (from react-expert tests + use case research) + - Caveats and pitfalls (from react-expert warnings/errors/issues) + - Cross-references to related pages (from docs audit) +5. **Navigation changes** needed (sidebar JSON updates) + +Present this plan to the user and confirm before proceeding. + +### Step 4: Write Documentation + +Dispatch a Task agent (subagent_type: `general-purpose`) to write the documentation. + +**The agent prompt MUST include:** + +1. The full writing plan from Step 3 +2. An instruction to invoke the appropriate skill: + - `/docs-writer-reference` for reference pages + - `/docs-writer-learn` for learn pages + - `/docs-writer-blog` for blog posts +3. An instruction to invoke `/docs-components` for MDX component patterns +4. An instruction to invoke `/docs-sandpack` if adding interactive code examples +5. The research document content (key findings, not the full dump) + +**Prompt template:** +``` +You are writing React documentation. Follow these steps: + +1. Invoke /docs-writer-<TYPE> to load the page template and conventions +2. Invoke /docs-components to load MDX component patterns +3. Invoke /docs-sandpack if you need interactive code examples +4. Write the documentation following the plan below + +PLAN: +<writing plan from Step 3> + +RESEARCH FINDINGS: +<key findings from Step 2 agents> + +Write the file to: <target file path> +Also update <sidebar JSON> if adding a new page. +``` + +### Step 5: Review Documentation + +Invoke `/review-docs` on the written files. This dispatches parallel review agents checking: +- Structure compliance (docs-writer-*) +- Voice and style (docs-voice) +- Component usage (docs-components) +- Sandpack patterns (docs-sandpack) + +### Step 6: Fix Issues + +If the review finds issues: +1. Present the review checklist to the user +2. Fix the issues identified +3. Re-run `/review-docs` on the fixed files +4. Repeat until clean + +## Important Rules + +- **Always research before writing.** Never write docs from LLM knowledge alone. +- **Always confirm the plan** with the user before writing. +- **Always review** with `/review-docs` after writing. +- **Match existing patterns.** Read neighboring docs to match style and depth. +- **Update navigation.** New pages need sidebar entries. diff --git a/.claude/skills/write/diagrams/write_flow.svg b/.claude/skills/write/diagrams/write_flow.svg new file mode 100644 index 000000000..49056ef11 --- /dev/null +++ b/.claude/skills/write/diagrams/write_flow.svg @@ -0,0 +1,100 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<!-- Generated by graphviz version 14.1.2 (20260124.0452) + --> +<!-- Title: write_flow Pages: 1 --> +<svg width="182pt" height="531pt" + viewBox="0.00 0.00 182.00 531.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 527.26)"> +<title>write_flow + + + +Parse intent + +Parse intent + + + +Research (parallel) + +Research (parallel) + + + +Parse intent->Research (parallel) + + + + + +Synthesize plan + +Synthesize plan + + + +Research (parallel)->Synthesize plan + + + + + +Write docs + +Write docs + + + +Synthesize plan->Write docs + + + + + +Review docs + +Review docs + + + +Write docs->Review docs + + + + + +Issues found? + +Issues found? + + + +Review docs->Issues found? + + + + + +Issues found?->Write docs + + +yes - fix + + + +Done + + +Done + + + +Issues found?->Done + + +no + + + diff --git a/.eslintignore b/.eslintignore index 4738cb697..ae0737173 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,5 @@ scripts plugins next.config.js +.claude/ +worker-bundle.dist.js \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index f617dea26..935fa2f23 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,16 +2,37 @@ "root": true, "extends": "next/core-web-vitals", "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint"], + "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler", "local-rules"], "rules": { "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }], - "react-hooks/exhaustive-deps": "error" + "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}], + "react-hooks/exhaustive-deps": "error", + "react/no-unknown-property": ["error", {"ignore": ["meta"]}], + "react-compiler/react-compiler": "error", + "local-rules/lint-markdown-code-blocks": "error", + "no-trailing-spaces": "error" }, "env": { "node": true, "commonjs": true, "browser": true, "es6": true - } + }, + "overrides": [ + { + "files": ["src/content/**/*.md"], + "parser": "./eslint-local-rules/parser", + "parserOptions": { + "sourceType": "module" + }, + "rules": { + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", + "react-hooks/exhaustive-deps": "off", + "react/no-unknown-property": "off", + "react-compiler/react-compiler": "off", + "local-rules/lint-markdown-code-blocks": "error" + } + } + ] } diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml index b16a38fbc..8be547118 100644 --- a/.github/ISSUE_TEMPLATE/3-framework.yml +++ b/.github/ISSUE_TEMPLATE/3-framework.yml @@ -8,6 +8,7 @@ body: value: | ## Candidature pour l'inclusion d'un framework React recommandé +<<<<<<< HEAD _Ce formulaire s'adresse aux auteur·es de framework qui souhaitent candidater pour qu'il fasse partie de la liste des [frameworks React](https://react.dev/learn/start-a-new-react-project) recommandés. Si vous n'êtes pas l'auteur·e du framework, contactez ses auteur·es pour leur suggérer de candidater._ Lorsque nous recommandons un framework, nous le faisons afin que les développeur·ses puissent démarrer avec un projet React qui s'occupe d'entrée de jeu de sujets récurrents tels que la découpe de code, le chargement de données, le routage et la génération du HTML, sans avoir à fournir un travail complémentaire. Nous estimons que ça permettra aux gens de démarrer plus vite avec React, et de faire monter leur application à l'échelle en production. @@ -27,6 +28,27 @@ body: - **Compatible avec notre vision de l'avenir de React**. React évolue avec le temps, et les frameworks qui ne s'alignent pas avec la direction que prend React risquent au fil du temps d'isoler leurs utilisateurs de l'écosystème React principal. Pour vous inclure sur cette page, nous devons être confiants dans la capacité du framework à placer ses utilisateurs durablement sur le chemin du succès avec React. Notez bien que nous avons déjà passé en revue la plupart des frameworks populaires disponibles pour le moment, il est donc peu probable que nous n'ayons pas encore examiné votre framework. Mais si vous pensez que nous avons loupé quelque chose, veuillez remplir le formulaire ci-dessous. +======= + _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._ + + 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. + + 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). + + To be included, frameworks must meet the following criteria: + + - **Free & open-source**: must be open source and free to use. + - **Well maintained**. must be actively maintained, providing bug fixes and improvements. + - **Active community**: must have a sufficiently large and active community to support users. + - **Clear onboarding**: must have clear install steps to install the React version of the framework. + - **Ecosystem compatibility**: must support using the full range of libraries and tools in the React ecosystem. + - **Self-hosting option**: must support an option to self-host applications without losing access to features. + - **Developer experience**. must allow developers to be productive by supporting features like Fast Refresh. + - **User experience**. must provide built-in support for common problems like routing and data-fetching. + - **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. + + 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. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - type: input attributes: label: Nom diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index b1ef428d0..83e7f2e8a 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -7,6 +7,8 @@ on: - main # change this if your default branch is named differently workflow_dispatch: +permissions: {} + jobs: analyze: runs-on: ubuntu-latest @@ -23,7 +25,7 @@ jobs: - name: Restore cached node_modules uses: actions/cache@v4 with: - path: "**/node_modules" + path: '**/node_modules' key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} - name: Install deps @@ -55,7 +57,7 @@ jobs: name: bundle_analysis.json - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e if: success() && github.event.number with: workflow: analyze.yml diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 5a3047cfc..fcac37738 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -2,10 +2,15 @@ name: Analyze Bundle (Comment) on: workflow_run: - workflows: ["Analyze Bundle"] + workflows: ['Analyze Bundle'] types: - completed +permissions: + contents: read + issues: write + pull-requests: write + jobs: comment: runs-on: ubuntu-latest @@ -14,7 +19,7 @@ jobs: github.event.workflow_run.conclusion == 'success' }} steps: - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e with: workflow: analyze.yml run_id: ${{ github.event.workflow_run.id }} @@ -22,7 +27,7 @@ jobs: path: analysis_comment.txt - name: Download PR number - uses: dawidd6/action-download-artifact@v2 + uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e with: workflow: analyze.yml run_id: ${{ github.event.workflow_run.id }} @@ -48,7 +53,7 @@ jobs: echo "pr-number=$pr_number" >> $GITHUB_OUTPUT - name: Comment - uses: marocchino/sticky-pull-request-comment@v2 + uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 with: header: next-bundle-analysis number: ${{ steps.get-comment-body.outputs.pr-number }} diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 000000000..2f5b2a497 --- /dev/null +++ b/.github/workflows/discord_notify.yml @@ -0,0 +1,32 @@ +name: Discord Notify + +on: + pull_request_target: + types: [opened, ready_for_review] + +permissions: {} + +jobs: + check_maintainer: + uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read + with: + actor: ${{ github.event.pull_request.user.login }} + + notify: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + needs: check_maintainer + runs-on: ubuntu-latest + steps: + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v6.0.0 + with: + webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} + embed-author-name: ${{ github.event.pull_request.user.login }} + embed-author-url: ${{ github.event.pull_request.user.html_url }} + embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} + embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' + embed-description: ${{ github.event.pull_request.body }} + embed-url: ${{ github.event.pull_request.html_url }} diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml new file mode 100644 index 000000000..f9b3328ee --- /dev/null +++ b/.github/workflows/label_core_team_prs.yml @@ -0,0 +1,41 @@ +name: Label Core Team PRs + +on: + pull_request_target: + +permissions: {} + +env: + TZ: /usr/share/zoneinfo/America/Los_Angeles + # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout + SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1 + +jobs: + check_maintainer: + uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + permissions: + # Used by check_maintainer + contents: read + with: + actor: ${{ github.event.pull_request.user.login }} + + label: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + runs-on: ubuntu-latest + needs: check_maintainer + permissions: + # Used to add labels on issues + issues: write + # Used to add labels on PRs + pull-requests: write + steps: + - name: Label PR as React Core Team + uses: actions/github-script@v7 + with: + script: | + github.rest.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: ${{ github.event.number }}, + labels: ['React Core Team'] + }); diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml index 36f7642c9..81a04601c 100644 --- a/.github/workflows/site_lint.yml +++ b/.github/workflows/site_lint.yml @@ -7,6 +7,8 @@ on: pull_request: types: [opened, synchronize, reopened] +permissions: {} + jobs: lint: runs-on: ubuntu-latest @@ -25,7 +27,7 @@ jobs: - name: Restore cached node_modules uses: actions/cache@v4 with: - path: "**/node_modules" + path: '**/node_modules' key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }} - name: Install deps diff --git a/.gitignore b/.gitignore index 60980bab7..9adad7a30 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies -/node_modules +node_modules /.pnp .pnp.js @@ -43,3 +43,10 @@ public/fonts/**/Optimistic_*.woff2 # rss public/rss.xml + +# claude local settings +.claude/*.local.* +.claude/react/ + +# worktrees +.worktrees/ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..3a081e6d5 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,52 @@ +# CLAUDE.md + +This file provides guidance to Claude Code when working with this repository. + +## Project Overview + +This is the React documentation website (react.dev), built with Next.js 15.1.11 and React 19. Documentation is written in MDX format. + +## Development Commands + +```bash +yarn build # Production build +yarn lint # Run ESLint +yarn lint:fix # Auto-fix lint issues +yarn tsc # TypeScript type checking +yarn check-all # Run prettier, lint:fix, tsc, and rss together +``` + +## Project Structure + +``` +src/ +├── content/ # Documentation content (MDX files) +│ ├── learn/ # Tutorial/learning content +│ ├── reference/ # API reference docs +│ ├── blog/ # Blog posts +│ └── community/ # Community pages +├── components/ # React components +├── pages/ # Next.js pages +├── hooks/ # Custom React hooks +├── utils/ # Utility functions +└── styles/ # CSS/Tailwind styles +``` + +## Code Conventions + +### TypeScript/React +- Functional components only +- Tailwind CSS for styling + +### Documentation Style + +When editing files in `src/content/`, the appropriate skill will be auto-suggested: +- `src/content/learn/` - Learn page structure and tone +- `src/content/reference/` - Reference page structure and tone + +For MDX components (DeepDive, Pitfall, Note, etc.), invoke `/docs-components`. +For Sandpack code examples, invoke `/docs-sandpack`. + +See `.claude/docs/react-docs-patterns.md` for comprehensive style guidelines. + +Prettier is used for formatting (config in `.prettierrc`). diff --git a/README.md b/README.md index 966131db5..182192cb5 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [react.dev](https: ### Prerequisites 1. Git -1. Node: any 12.x version starting with v12.0.0 or greater +1. Node: any version starting with v16.8.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) 1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine diff --git a/colors.js b/colors.js index 872f33cac..2b282c820 100644 --- a/colors.js +++ b/colors.js @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md b/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md new file mode 100644 index 000000000..8e7670fdc --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/basic-error.md @@ -0,0 +1,8 @@ +```jsx +import {useState} from 'react'; +function Counter() { + const [count, setCount] = useState(0); + setCount(count + 1); + return
    {count}
    ; +} +``` diff --git a/eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md b/eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md new file mode 100644 index 000000000..67d6b62bb --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/duplicate-metadata.md @@ -0,0 +1,8 @@ +```jsx title="Counter" {expectedErrors: {'react-compiler': [99]}} {expectedErrors: {'react-compiler': [2]}} +import {useState} from 'react'; +function Counter() { + const [count, setCount] = useState(0); + setCount(count + 1); + return
    {count}
    ; +} +``` diff --git a/eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md b/eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md new file mode 100644 index 000000000..fd542bf03 --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/malformed-metadata.md @@ -0,0 +1,8 @@ +```jsx {expectedErrors: {'react-compiler': 'invalid'}} +import {useState} from 'react'; +function Counter() { + const [count, setCount] = useState(0); + setCount(count + 1); + return
    {count}
    ; +} +``` diff --git a/eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md b/eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md new file mode 100644 index 000000000..313b0e30f --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/mixed-language.md @@ -0,0 +1,7 @@ +```bash +setCount() +``` + +```txt +import {useState} from 'react'; +``` diff --git a/eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md b/eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md new file mode 100644 index 000000000..46e330ac0 --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/stale-expected-error.md @@ -0,0 +1,5 @@ +```jsx {expectedErrors: {'react-compiler': [3]}} +function Hello() { + return

    Hello

    ; +} +``` diff --git a/eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md b/eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md new file mode 100644 index 000000000..ecefa8495 --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/suppressed-error.md @@ -0,0 +1,8 @@ +```jsx {expectedErrors: {'react-compiler': [4]}} +import {useState} from 'react'; +function Counter() { + const [count, setCount] = useState(0); + setCount(count + 1); + return
    {count}
    ; +} +``` diff --git a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js new file mode 100644 index 000000000..250e0a1e5 --- /dev/null +++ b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js @@ -0,0 +1,131 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const assert = require('assert'); +const fs = require('fs'); +const path = require('path'); +const {ESLint} = require('eslint'); +const plugin = require('..'); + +const FIXTURES_DIR = path.join( + __dirname, + 'fixtures', + 'src', + 'content' +); +const PARSER_PATH = path.join(__dirname, '..', 'parser.js'); + +function createESLint({fix = false} = {}) { + return new ESLint({ + useEslintrc: false, + fix, + plugins: { + 'local-rules': plugin, + }, + overrideConfig: { + parser: PARSER_PATH, + plugins: ['local-rules'], + rules: { + 'local-rules/lint-markdown-code-blocks': 'error', + }, + parserOptions: { + sourceType: 'module', + }, + }, + }); +} + +function readFixture(name) { + return fs.readFileSync(path.join(FIXTURES_DIR, name), 'utf8'); +} + +async function lintFixture(name, {fix = false} = {}) { + const eslint = createESLint({fix}); + const filePath = path.join(FIXTURES_DIR, name); + const markdown = readFixture(name); + const [result] = await eslint.lintText(markdown, {filePath}); + return result; +} + +async function run() { + const basicResult = await lintFixture('basic-error.md'); + assert.strictEqual( + basicResult.messages.length, + 1, + 'expected one diagnostic' + ); + assert( + basicResult.messages[0].message.includes('Calling setState during render'), + 'expected message to mention setState during render' + ); + + const suppressedResult = await lintFixture('suppressed-error.md'); + assert.strictEqual( + suppressedResult.messages.length, + 0, + 'expected suppression metadata to silence diagnostic' + ); + + const staleResult = await lintFixture('stale-expected-error.md'); + assert.strictEqual( + staleResult.messages.length, + 1, + 'expected stale metadata error' + ); + assert.strictEqual( + staleResult.messages[0].message, + 'React Compiler expected error on line 3 was not triggered' + ); + + const duplicateResult = await lintFixture('duplicate-metadata.md'); + assert.strictEqual( + duplicateResult.messages.length, + 2, + 'expected duplicate metadata to surface compiler diagnostic and stale metadata notice' + ); + const duplicateFixed = await lintFixture('duplicate-metadata.md', { + fix: true, + }); + assert( + duplicateFixed.output.includes( + "{expectedErrors: {'react-compiler': [4]}}" + ), + 'expected duplicates to be rewritten to a single canonical block' + ); + assert( + !duplicateFixed.output.includes('[99]'), + 'expected stale line numbers to be removed from metadata' + ); + + const mixedLanguageResult = await lintFixture('mixed-language.md'); + assert.strictEqual( + mixedLanguageResult.messages.length, + 0, + 'expected non-js code fences to be ignored' + ); + + const malformedResult = await lintFixture('malformed-metadata.md'); + assert.strictEqual( + malformedResult.messages.length, + 1, + 'expected malformed metadata to fall back to compiler diagnostics' + ); + const malformedFixed = await lintFixture('malformed-metadata.md', { + fix: true, + }); + assert( + malformedFixed.output.includes( + "{expectedErrors: {'react-compiler': [4]}}" + ), + 'expected malformed metadata to be replaced with canonical form' + ); +} + +run().catch(error => { + console.error(error); + process.exitCode = 1; +}); diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js new file mode 100644 index 000000000..b1f747ccb --- /dev/null +++ b/eslint-local-rules/index.js @@ -0,0 +1,14 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const lintMarkdownCodeBlocks = require('./rules/lint-markdown-code-blocks'); + +module.exports = { + rules: { + 'lint-markdown-code-blocks': lintMarkdownCodeBlocks, + }, +}; diff --git a/eslint-local-rules/package.json b/eslint-local-rules/package.json new file mode 100644 index 000000000..9940fee20 --- /dev/null +++ b/eslint-local-rules/package.json @@ -0,0 +1,12 @@ +{ + "name": "eslint-plugin-local-rules", + "version": "0.0.0", + "main": "index.js", + "private": "true", + "scripts": { + "test": "node __tests__/lint-markdown-code-blocks.test.js" + }, + "devDependencies": { + "eslint-mdx": "^2" + } +} diff --git a/eslint-local-rules/parser.js b/eslint-local-rules/parser.js new file mode 100644 index 000000000..043f2e520 --- /dev/null +++ b/eslint-local-rules/parser.js @@ -0,0 +1,8 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +module.exports = require('eslint-mdx'); diff --git a/eslint-local-rules/rules/diagnostics.js b/eslint-local-rules/rules/diagnostics.js new file mode 100644 index 000000000..4e433164b --- /dev/null +++ b/eslint-local-rules/rules/diagnostics.js @@ -0,0 +1,77 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +function getRelativeLine(loc) { + return loc?.start?.line ?? loc?.line ?? 1; +} + +function getRelativeColumn(loc) { + return loc?.start?.column ?? loc?.column ?? 0; +} + +function getRelativeEndLine(loc, fallbackLine) { + if (loc?.end?.line != null) { + return loc.end.line; + } + if (loc?.line != null) { + return loc.line; + } + return fallbackLine; +} + +function getRelativeEndColumn(loc, fallbackColumn) { + if (loc?.end?.column != null) { + return loc.end.column; + } + if (loc?.column != null) { + return loc.column; + } + return fallbackColumn; +} + +/** + * @param {import('./markdown').MarkdownCodeBlock} block + * @param {Array<{detail: any, loc: any, message: string}>} diagnostics + * @returns {Array<{detail: any, message: string, relativeStartLine: number, markdownLoc: {start: {line: number, column: number}, end: {line: number, column: number}}}>} + */ +function normalizeDiagnostics(block, diagnostics) { + return diagnostics.map(({detail, loc, message}) => { + const relativeStartLine = Math.max(getRelativeLine(loc), 1); + const relativeStartColumn = Math.max(getRelativeColumn(loc), 0); + const relativeEndLine = Math.max( + getRelativeEndLine(loc, relativeStartLine), + relativeStartLine + ); + const relativeEndColumn = Math.max( + getRelativeEndColumn(loc, relativeStartColumn), + relativeStartColumn + ); + + const markdownStartLine = block.codeStartLine + relativeStartLine - 1; + const markdownEndLine = block.codeStartLine + relativeEndLine - 1; + + return { + detail, + message, + relativeStartLine, + markdownLoc: { + start: { + line: markdownStartLine, + column: relativeStartColumn, + }, + end: { + line: markdownEndLine, + column: relativeEndColumn, + }, + }, + }; + }); +} + +module.exports = { + normalizeDiagnostics, +}; diff --git a/eslint-local-rules/rules/lint-markdown-code-blocks.js b/eslint-local-rules/rules/lint-markdown-code-blocks.js new file mode 100644 index 000000000..5ec327947 --- /dev/null +++ b/eslint-local-rules/rules/lint-markdown-code-blocks.js @@ -0,0 +1,178 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const { + buildFenceLine, + getCompilerExpectedLines, + getSortedUniqueNumbers, + hasCompilerEntry, + metadataEquals, + metadataHasExpectedErrorsToken, + removeCompilerExpectedLines, + setCompilerExpectedLines, +} = require('./metadata'); +const {normalizeDiagnostics} = require('./diagnostics'); +const {parseMarkdownFile} = require('./markdown'); +const {runReactCompiler} = require('./react-compiler'); + +module.exports = { + meta: { + type: 'problem', + docs: { + description: 'Run React Compiler on markdown code blocks', + category: 'Possible Errors', + }, + fixable: 'code', + hasSuggestions: true, + schema: [], + }, + + create(context) { + return { + Program(node) { + const filename = context.getFilename(); + if (!filename.endsWith('.md') || !filename.includes('src/content')) { + return; + } + + const sourceCode = context.getSourceCode(); + const {blocks} = parseMarkdownFile(sourceCode.text, filename); + // For each supported code block, run the compiler and reconcile metadata. + for (const block of blocks) { + const compilerResult = runReactCompiler( + block.code, + `${filename}#codeblock` + ); + + const expectedLines = getCompilerExpectedLines(block.metadata); + const expectedLineSet = new Set(expectedLines); + const diagnostics = normalizeDiagnostics( + block, + compilerResult.diagnostics + ); + + const errorLines = new Set(); + const unexpectedDiagnostics = []; + + for (const diagnostic of diagnostics) { + const line = diagnostic.relativeStartLine; + errorLines.add(line); + if (!expectedLineSet.has(line)) { + unexpectedDiagnostics.push(diagnostic); + } + } + + const normalizedErrorLines = getSortedUniqueNumbers( + Array.from(errorLines) + ); + const missingExpectedLines = expectedLines.filter( + (line) => !errorLines.has(line) + ); + + const desiredMetadata = normalizedErrorLines.length + ? setCompilerExpectedLines(block.metadata, normalizedErrorLines) + : removeCompilerExpectedLines(block.metadata); + + // Compute canonical metadata and attach an autofix when it differs. + const metadataChanged = !metadataEquals( + block.metadata, + desiredMetadata + ); + const replacementLine = buildFenceLine(block.lang, desiredMetadata); + const replacementDiffers = block.fence.rawText !== replacementLine; + const applyReplacementFix = replacementDiffers + ? (fixer) => + fixer.replaceTextRange(block.fence.range, replacementLine) + : null; + + const hasDuplicateMetadata = + block.metadata.hadDuplicateExpectedErrors; + const hasExpectedErrorsMetadata = metadataHasExpectedErrorsToken( + block.metadata + ); + + const shouldFixUnexpected = + Boolean(applyReplacementFix) && + normalizedErrorLines.length > 0 && + (metadataChanged || + hasDuplicateMetadata || + !hasExpectedErrorsMetadata); + + let fixAlreadyAttached = false; + + for (const diagnostic of unexpectedDiagnostics) { + const reportData = { + node, + loc: diagnostic.markdownLoc, + message: diagnostic.message, + }; + + if ( + shouldFixUnexpected && + applyReplacementFix && + !fixAlreadyAttached + ) { + reportData.fix = applyReplacementFix; + reportData.suggest = [ + { + desc: 'Add expectedErrors metadata to suppress these errors', + fix: applyReplacementFix, + }, + ]; + fixAlreadyAttached = true; + } + + context.report(reportData); + } + + // Assert that expectedErrors is actually needed + if ( + Boolean(applyReplacementFix) && + missingExpectedLines.length > 0 && + hasCompilerEntry(block.metadata) + ) { + const plural = missingExpectedLines.length > 1; + const message = plural + ? `React Compiler expected errors on lines ${missingExpectedLines.join( + ', ' + )} were not triggered` + : `React Compiler expected error on line ${missingExpectedLines[0]} was not triggered`; + + const reportData = { + node, + loc: { + start: { + line: block.position.start.line, + column: 0, + }, + end: { + line: block.position.start.line, + column: block.fence.rawText.length, + }, + }, + message, + }; + + if (!fixAlreadyAttached && applyReplacementFix) { + reportData.fix = applyReplacementFix; + fixAlreadyAttached = true; + } else if (applyReplacementFix) { + reportData.suggest = [ + { + desc: 'Remove stale expectedErrors metadata', + fix: applyReplacementFix, + }, + ]; + } + + context.report(reportData); + } + } + }, + }; + }, +}; diff --git a/eslint-local-rules/rules/markdown.js b/eslint-local-rules/rules/markdown.js new file mode 100644 index 000000000..d888d1311 --- /dev/null +++ b/eslint-local-rules/rules/markdown.js @@ -0,0 +1,124 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const remark = require('remark'); +const {parseFenceMetadata} = require('./metadata'); + +/** + * @typedef {Object} MarkdownCodeBlock + * @property {string} code + * @property {number} codeStartLine + * @property {{start: {line: number, column: number}, end: {line: number, column: number}}} position + * @property {{lineIndex: number, rawText: string, metaText: string, range: [number, number]}} fence + * @property {string} filePath + * @property {string} lang + * @property {import('./metadata').FenceMetadata} metadata + */ + +const SUPPORTED_LANGUAGES = new Set([ + 'js', + 'jsx', + 'javascript', + 'ts', + 'tsx', + 'typescript', +]); + +function computeLineOffsets(lines) { + const offsets = []; + let currentOffset = 0; + + for (const line of lines) { + offsets.push(currentOffset); + currentOffset += line.length + 1; + } + + return offsets; +} + +function parseMarkdownFile(content, filePath) { + const tree = remark().parse(content); + const lines = content.split('\n'); + const lineOffsets = computeLineOffsets(lines); + const blocks = []; + + function traverse(node) { + if (!node || typeof node !== 'object') { + return; + } + + if (node.type === 'code') { + const rawLang = node.lang || ''; + const normalizedLang = rawLang.toLowerCase(); + if (!normalizedLang || !SUPPORTED_LANGUAGES.has(normalizedLang)) { + return; + } + + const fenceLineIndex = (node.position?.start?.line ?? 1) - 1; + const fenceStartOffset = node.position?.start?.offset ?? 0; + const fenceLine = lines[fenceLineIndex] ?? ''; + const fenceEndOffset = fenceStartOffset + fenceLine.length; + + let metaText = ''; + if (fenceLine) { + const prefixMatch = fenceLine.match(/^`{3,}\s*/); + const prefixLength = prefixMatch ? prefixMatch[0].length : 3; + metaText = fenceLine.slice(prefixLength + rawLang.length); + } else if (node.meta) { + metaText = ` ${node.meta}`; + } + + const metadata = parseFenceMetadata(metaText); + + blocks.push({ + lang: rawLang || normalizedLang, + metadata, + filePath, + code: node.value || '', + codeStartLine: (node.position?.start?.line ?? 1) + 1, + position: { + start: { + line: fenceLineIndex + 1, + column: (node.position?.start?.column ?? 1) - 1, + }, + end: { + line: fenceLineIndex + 1, + column: (node.position?.start?.column ?? 1) - 1 + fenceLine.length, + }, + }, + fence: { + lineIndex: fenceLineIndex, + rawText: fenceLine, + metaText, + range: [fenceStartOffset, fenceEndOffset], + }, + }); + return; + } + + if ('children' in node && Array.isArray(node.children)) { + for (const child of node.children) { + traverse(child); + } + } + } + + traverse(tree); + + return { + content, + blocks, + lines, + lineOffsets, + }; +} + +module.exports = { + SUPPORTED_LANGUAGES, + computeLineOffsets, + parseMarkdownFile, +}; diff --git a/eslint-local-rules/rules/metadata.js b/eslint-local-rules/rules/metadata.js new file mode 100644 index 000000000..fb58a37c2 --- /dev/null +++ b/eslint-local-rules/rules/metadata.js @@ -0,0 +1,377 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/** + * @typedef {{type: 'text', raw: string}} TextToken + * @typedef {{ + * type: 'expectedErrors', + * entries: Record>, + * raw?: string, + * }} ExpectedErrorsToken + * @typedef {TextToken | ExpectedErrorsToken} MetadataToken + * + * @typedef {{ + * leading: string, + * trailing: string, + * tokens: Array, + * parseError: boolean, + * hadDuplicateExpectedErrors: boolean, + * }} FenceMetadata + */ + +const EXPECTED_ERRORS_BLOCK_REGEX = /\{\s*expectedErrors\s*:/; +const REACT_COMPILER_KEY = 'react-compiler'; + +function getSortedUniqueNumbers(values) { + return Array.from(new Set(values)) + .filter((value) => typeof value === 'number' && !Number.isNaN(value)) + .sort((a, b) => a - b); +} + +function tokenizeMeta(body) { + if (!body) { + return []; + } + + const tokens = []; + let current = ''; + let depth = 0; + + for (let i = 0; i < body.length; i++) { + const char = body[i]; + if (char === '{') { + depth++; + } else if (char === '}') { + depth = Math.max(depth - 1, 0); + } + + if (char === ' ' && depth === 0) { + if (current) { + tokens.push(current); + current = ''; + } + continue; + } + + current += char; + } + + if (current) { + tokens.push(current); + } + + return tokens; +} + +function normalizeEntryValues(values) { + if (!Array.isArray(values)) { + return []; + } + return getSortedUniqueNumbers(values); +} + +function parseExpectedErrorsEntries(rawEntries) { + const normalized = rawEntries + .replace(/([{,]\s*)([a-zA-Z_$][\w$]*)\s*:/g, '$1"$2":') + .replace(/'([^']*)'/g, '"$1"'); + + const parsed = JSON.parse(normalized); + const entries = {}; + + if (parsed && typeof parsed === 'object') { + for (const [key, value] of Object.entries(parsed)) { + entries[key] = normalizeEntryValues(Array.isArray(value) ? value.flat() : value); + } + } + + return entries; +} + +function parseExpectedErrorsToken(tokenText) { + const match = tokenText.match(/^\{\s*expectedErrors\s*:\s*(\{[\s\S]*\})\s*\}$/); + if (!match) { + return null; + } + + const entriesSource = match[1]; + let parseError = false; + let entries; + + try { + entries = parseExpectedErrorsEntries(entriesSource); + } catch (error) { + parseError = true; + entries = {}; + } + + return { + token: { + type: 'expectedErrors', + entries, + raw: tokenText, + }, + parseError, + }; +} + +function parseFenceMetadata(metaText) { + if (!metaText) { + return { + leading: '', + trailing: '', + tokens: [], + parseError: false, + hadDuplicateExpectedErrors: false, + }; + } + + const leading = metaText.match(/^\s*/)?.[0] ?? ''; + const trailing = metaText.match(/\s*$/)?.[0] ?? ''; + const bodyStart = leading.length; + const bodyEnd = metaText.length - trailing.length; + const body = metaText.slice(bodyStart, bodyEnd).trim(); + + if (!body) { + return { + leading, + trailing, + tokens: [], + parseError: false, + hadDuplicateExpectedErrors: false, + }; + } + + const tokens = []; + let parseError = false; + let sawExpectedErrors = false; + let hadDuplicateExpectedErrors = false; + + for (const rawToken of tokenizeMeta(body)) { + const normalizedToken = rawToken.trim(); + if (!normalizedToken) { + continue; + } + + if (EXPECTED_ERRORS_BLOCK_REGEX.test(normalizedToken)) { + const parsed = parseExpectedErrorsToken(normalizedToken); + if (parsed) { + if (sawExpectedErrors) { + hadDuplicateExpectedErrors = true; + // Drop duplicates. We'll rebuild the canonical block on write. + continue; + } + tokens.push(parsed.token); + parseError = parseError || parsed.parseError; + sawExpectedErrors = true; + continue; + } + } + + tokens.push({type: 'text', raw: normalizedToken}); + } + + return { + leading, + trailing, + tokens, + parseError, + hadDuplicateExpectedErrors, + }; +} + +function cloneMetadata(metadata) { + return { + leading: metadata.leading, + trailing: metadata.trailing, + parseError: metadata.parseError, + hadDuplicateExpectedErrors: metadata.hadDuplicateExpectedErrors, + tokens: metadata.tokens.map((token) => { + if (token.type === 'expectedErrors') { + const clonedEntries = {}; + for (const [key, value] of Object.entries(token.entries)) { + clonedEntries[key] = [...value]; + } + return {type: 'expectedErrors', entries: clonedEntries}; + } + return {type: 'text', raw: token.raw}; + }), + }; +} + +function findExpectedErrorsToken(metadata) { + return metadata.tokens.find((token) => token.type === 'expectedErrors') || null; +} + +function getCompilerExpectedLines(metadata) { + const token = findExpectedErrorsToken(metadata); + if (!token) { + return []; + } + return getSortedUniqueNumbers(token.entries[REACT_COMPILER_KEY] || []); +} + +function hasCompilerEntry(metadata) { + const token = findExpectedErrorsToken(metadata); + return Boolean(token && token.entries[REACT_COMPILER_KEY]?.length); +} + +function metadataHasExpectedErrorsToken(metadata) { + return Boolean(findExpectedErrorsToken(metadata)); +} + +function stringifyExpectedErrorsToken(token) { + const entries = token.entries || {}; + const keys = Object.keys(entries).filter((key) => entries[key].length > 0); + if (keys.length === 0) { + return ''; + } + + keys.sort(); + + const segments = keys.map((key) => { + const values = entries[key]; + return `'${key}': [${values.join(', ')}]`; + }); + + return `{expectedErrors: {${segments.join(', ')}}}`; +} + +function stringifyFenceMetadata(metadata) { + if (!metadata.tokens.length) { + return ''; + } + + const parts = metadata.tokens + .map((token) => { + if (token.type === 'expectedErrors') { + return stringifyExpectedErrorsToken(token); + } + return token.raw; + }) + .filter(Boolean); + + if (!parts.length) { + return ''; + } + + const leading = metadata.leading || ' '; + const trailing = metadata.trailing ? metadata.trailing.trimEnd() : ''; + const body = parts.join(' '); + return `${leading}${body}${trailing}`; +} + +function buildFenceLine(lang, metadata) { + const meta = stringifyFenceMetadata(metadata); + return meta ? `\`\`\`${lang}${meta}` : `\`\`\`${lang}`; +} + +function metadataEquals(a, b) { + if (a.leading !== b.leading || a.trailing !== b.trailing) { + return false; + } + + if (a.tokens.length !== b.tokens.length) { + return false; + } + + for (let i = 0; i < a.tokens.length; i++) { + const left = a.tokens[i]; + const right = b.tokens[i]; + if (left.type !== right.type) { + return false; + } + if (left.type === 'text') { + if (left.raw !== right.raw) { + return false; + } + } else { + const leftKeys = Object.keys(left.entries).sort(); + const rightKeys = Object.keys(right.entries).sort(); + if (leftKeys.length !== rightKeys.length) { + return false; + } + for (let j = 0; j < leftKeys.length; j++) { + if (leftKeys[j] !== rightKeys[j]) { + return false; + } + const lValues = getSortedUniqueNumbers(left.entries[leftKeys[j]]); + const rValues = getSortedUniqueNumbers(right.entries[rightKeys[j]]); + if (lValues.length !== rValues.length) { + return false; + } + for (let k = 0; k < lValues.length; k++) { + if (lValues[k] !== rValues[k]) { + return false; + } + } + } + } + } + + return true; +} + +function normalizeMetadata(metadata) { + const normalized = cloneMetadata(metadata); + normalized.hadDuplicateExpectedErrors = false; + normalized.parseError = false; + if (!normalized.tokens.length) { + normalized.leading = ''; + normalized.trailing = ''; + } + return normalized; +} + +function setCompilerExpectedLines(metadata, lines) { + const normalizedLines = getSortedUniqueNumbers(lines); + if (normalizedLines.length === 0) { + return removeCompilerExpectedLines(metadata); + } + + const next = cloneMetadata(metadata); + let token = findExpectedErrorsToken(next); + if (!token) { + token = {type: 'expectedErrors', entries: {}}; + next.tokens = [token, ...next.tokens]; + } + + token.entries[REACT_COMPILER_KEY] = normalizedLines; + return normalizeMetadata(next); +} + +function removeCompilerExpectedLines(metadata) { + const next = cloneMetadata(metadata); + const token = findExpectedErrorsToken(next); + if (!token) { + return normalizeMetadata(next); + } + + delete token.entries[REACT_COMPILER_KEY]; + + const hasEntries = Object.values(token.entries).some( + (value) => Array.isArray(value) && value.length > 0 + ); + + if (!hasEntries) { + next.tokens = next.tokens.filter((item) => item !== token); + } + + return normalizeMetadata(next); +} + +module.exports = { + buildFenceLine, + getCompilerExpectedLines, + getSortedUniqueNumbers, + hasCompilerEntry, + metadataEquals, + metadataHasExpectedErrorsToken, + parseFenceMetadata, + removeCompilerExpectedLines, + setCompilerExpectedLines, + stringifyFenceMetadata, +}; diff --git a/eslint-local-rules/rules/react-compiler.js b/eslint-local-rules/rules/react-compiler.js new file mode 100644 index 000000000..26d3878ee --- /dev/null +++ b/eslint-local-rules/rules/react-compiler.js @@ -0,0 +1,122 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const {transformFromAstSync} = require('@babel/core'); +const {parse: babelParse} = require('@babel/parser'); +const BabelPluginReactCompiler = require('babel-plugin-react-compiler').default; +const { + parsePluginOptions, + validateEnvironmentConfig, +} = require('babel-plugin-react-compiler'); + +const COMPILER_OPTIONS = { + noEmit: true, + panicThreshold: 'none', + environment: validateEnvironmentConfig({ + validateRefAccessDuringRender: true, + validateNoSetStateInRender: true, + validateNoSetStateInEffects: true, + validateNoJSXInTryStatements: true, + validateNoImpureFunctionsInRender: true, + validateStaticComponents: true, + validateNoFreezingKnownMutableFunctions: true, + validateNoVoidUseMemo: true, + validateNoCapitalizedCalls: [], + validateHooksUsage: true, + validateNoDerivedComputationsInEffects: true, + }), +}; + +function hasRelevantCode(code) { + const functionPattern = /^(export\s+)?(default\s+)?function\s+\w+/m; + const arrowPattern = + /^(export\s+)?(const|let|var)\s+\w+\s*=\s*(\([^)]*\)|\w+)\s*=>/m; + const hasImports = /^import\s+/m.test(code); + + return functionPattern.test(code) || arrowPattern.test(code) || hasImports; +} + +function runReactCompiler(code, filename) { + const result = { + sourceCode: code, + events: [], + }; + + if (!hasRelevantCode(code)) { + return {...result, diagnostics: []}; + } + + const options = parsePluginOptions({ + ...COMPILER_OPTIONS, + }); + + options.logger = { + logEvent: (_, event) => { + if (event.kind === 'CompileError') { + const category = event.detail?.category; + if (category === 'Todo' || category === 'Invariant') { + return; + } + result.events.push(event); + } + }, + }; + + try { + const ast = babelParse(code, { + sourceFilename: filename, + sourceType: 'module', + plugins: ['jsx', 'typescript'], + }); + + transformFromAstSync(ast, code, { + filename, + highlightCode: false, + retainLines: true, + plugins: [[BabelPluginReactCompiler, options]], + sourceType: 'module', + configFile: false, + babelrc: false, + }); + } catch (error) { + return {...result, diagnostics: []}; + } + + const diagnostics = []; + + for (const event of result.events) { + if (event.kind !== 'CompileError') { + continue; + } + + const detail = event.detail; + if (!detail) { + continue; + } + + const loc = typeof detail.primaryLocation === 'function' + ? detail.primaryLocation() + : null; + + if (loc == null || typeof loc === 'symbol') { + continue; + } + + const message = typeof detail.printErrorMessage === 'function' + ? detail.printErrorMessage(result.sourceCode, {eslint: true}) + : detail.description || 'Unknown React Compiler error'; + + diagnostics.push({detail, loc, message}); + } + + return {...result, diagnostics}; +} + +module.exports = { + hasRelevantCode, + runReactCompiler, +}; diff --git a/eslint-local-rules/yarn.lock b/eslint-local-rules/yarn.lock new file mode 100644 index 000000000..5a7cf126d --- /dev/null +++ b/eslint-local-rules/yarn.lock @@ -0,0 +1,1421 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@babel/code-frame@^7.16.0": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be" + integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg== + dependencies: + "@babel/helper-validator-identifier" "^7.27.1" + js-tokens "^4.0.0" + picocolors "^1.1.1" + +"@babel/helper-validator-identifier@^7.27.1": + version "7.27.1" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8" + integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow== + +"@isaacs/cliui@^8.0.2": + version "8.0.2" + resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550" + integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA== + dependencies: + string-width "^5.1.2" + string-width-cjs "npm:string-width@^4.2.0" + strip-ansi "^7.0.1" + strip-ansi-cjs "npm:strip-ansi@^6.0.1" + wrap-ansi "^8.1.0" + wrap-ansi-cjs "npm:wrap-ansi@^7.0.0" + +"@npmcli/config@^6.0.0": + version "6.4.1" + resolved "https://registry.yarnpkg.com/@npmcli/config/-/config-6.4.1.tgz#006409c739635db008e78bf58c92421cc147911d" + integrity sha512-uSz+elSGzjCMANWa5IlbGczLYPkNI/LeR+cHrgaTqTrTSh9RHhOFA4daD2eRUz6lMtOW+Fnsb+qv7V2Zz8ML0g== + dependencies: + "@npmcli/map-workspaces" "^3.0.2" + ci-info "^4.0.0" + ini "^4.1.0" + nopt "^7.0.0" + proc-log "^3.0.0" + read-package-json-fast "^3.0.2" + semver "^7.3.5" + walk-up-path "^3.0.1" + +"@npmcli/map-workspaces@^3.0.2": + version "3.0.6" + resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-3.0.6.tgz#27dc06c20c35ef01e45a08909cab9cb3da08cea6" + integrity sha512-tkYs0OYnzQm6iIRdfy+LcLBjcKuQCeE5YLb8KnrIlutJfheNaPvPpgoFEyEFgbjzl5PLZ3IA/BWAwRU0eHuQDA== + dependencies: + "@npmcli/name-from-folder" "^2.0.0" + glob "^10.2.2" + minimatch "^9.0.0" + read-package-json-fast "^3.0.0" + +"@npmcli/name-from-folder@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@npmcli/name-from-folder/-/name-from-folder-2.0.0.tgz#c44d3a7c6d5c184bb6036f4d5995eee298945815" + integrity sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg== + +"@pkgjs/parseargs@^0.11.0": + version "0.11.0" + resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" + integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== + +"@pkgr/core@^0.1.0": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.2.tgz#1cf95080bb7072fafaa3cb13b442fab4695c3893" + integrity sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ== + +"@types/acorn@^4.0.0": + version "4.0.6" + resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22" + integrity sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ== + dependencies: + "@types/estree" "*" + +"@types/concat-stream@^2.0.0": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@types/concat-stream/-/concat-stream-2.0.3.tgz#1f5c2ad26525716c181191f7ed53408f78eb758e" + integrity sha512-3qe4oQAPNwVNwK4C9c8u+VJqv9kez+2MR4qJpoPFfXtgxxif1QbFusvXzK0/Wra2VX07smostI2VMmJNSpZjuQ== + dependencies: + "@types/node" "*" + +"@types/debug@^4.0.0": + version "4.1.12" + resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917" + integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ== + dependencies: + "@types/ms" "*" + +"@types/estree-jsx@^1.0.0": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.5.tgz#858a88ea20f34fe65111f005a689fa1ebf70dc18" + integrity sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg== + dependencies: + "@types/estree" "*" + +"@types/estree@*", "@types/estree@^1.0.0": + version "1.0.8" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e" + integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w== + +"@types/hast@^2.0.0": + version "2.3.10" + resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643" + integrity sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw== + dependencies: + "@types/unist" "^2" + +"@types/is-empty@^1.0.0": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@types/is-empty/-/is-empty-1.2.3.tgz#a2d55ea8a5ec57bf61e411ba2a9e5132fe4f0899" + integrity sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw== + +"@types/mdast@^3.0.0": + version "3.0.15" + resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5" + integrity sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ== + dependencies: + "@types/unist" "^2" + +"@types/ms@*": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@types/ms/-/ms-2.1.0.tgz#052aa67a48eccc4309d7f0191b7e41434b90bb78" + integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA== + +"@types/node@*": + version "24.5.1" + resolved "https://registry.yarnpkg.com/@types/node/-/node-24.5.1.tgz#dab6917c47113eb4502d27d06e89a407ec0eff95" + integrity sha512-/SQdmUP2xa+1rdx7VwB9yPq8PaKej8TD5cQ+XfKDPWWC+VDJU4rvVVagXqKUzhKjtFoNA8rXDJAkCxQPAe00+Q== + dependencies: + undici-types "~7.12.0" + +"@types/node@^18.0.0": + version "18.19.126" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.126.tgz#b1a9e0bac6338098f465ab242cbd6a8884d79b80" + integrity sha512-8AXQlBfrGmtYJEJUPs63F/uZQqVeFiN9o6NUjbDJYfxNxFnArlZufANPw4h6dGhYGKxcyw+TapXFvEsguzIQow== + dependencies: + undici-types "~5.26.4" + +"@types/supports-color@^8.0.0": + version "8.1.3" + resolved "https://registry.yarnpkg.com/@types/supports-color/-/supports-color-8.1.3.tgz#b769cdce1d1bb1a3fa794e35b62c62acdf93c139" + integrity sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg== + +"@types/unist@^2", "@types/unist@^2.0.0": + version "2.0.11" + resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4" + integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA== + +abbrev@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-2.0.0.tgz#cf59829b8b4f03f89dda2771cb7f3653828c89bf" + integrity sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ== + +acorn-jsx@^5.0.0, acorn-jsx@^5.3.2: + version "5.3.2" + resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" + integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== + +acorn@^8.0.0, acorn@^8.10.0, acorn@^8.9.0: + version "8.15.0" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816" + integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg== + +ansi-regex@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" + integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== + +ansi-regex@^6.0.1: + version "6.2.2" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1" + integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg== + +ansi-styles@^4.0.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937" + integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg== + dependencies: + color-convert "^2.0.1" + +ansi-styles@^6.1.0: + version "6.2.3" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041" + integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg== + +bail@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d" + integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw== + +balanced-match@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" + integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== + +brace-expansion@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7" + integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ== + dependencies: + balanced-match "^1.0.0" + +buffer-from@^1.0.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5" + integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ== + +ccount@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5" + integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg== + +character-entities-html4@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b" + integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA== + +character-entities-legacy@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b" + integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ== + +character-entities@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22" + integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ== + +character-reference-invalid@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9" + integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw== + +ci-info@^4.0.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.3.0.tgz#c39b1013f8fdbd28cd78e62318357d02da160cd7" + integrity sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ== + +color-convert@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" + integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== + dependencies: + color-name "~1.1.4" + +color-name@~1.1.4: + version "1.1.4" + resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" + integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== + +concat-stream@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1" + integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A== + dependencies: + buffer-from "^1.0.0" + inherits "^2.0.3" + readable-stream "^3.0.2" + typedarray "^0.0.6" + +cross-spawn@^7.0.6: + version "7.0.6" + resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f" + integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA== + dependencies: + path-key "^3.1.0" + shebang-command "^2.0.0" + which "^2.0.1" + +debug@^4.0.0: + version "4.4.3" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a" + integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA== + dependencies: + ms "^2.1.3" + +decode-named-character-reference@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz#25c32ae6dd5e21889549d40f676030e9514cc0ed" + integrity sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q== + dependencies: + character-entities "^2.0.0" + +dequal@^2.0.0: + version "2.0.3" + resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" + integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== + +diff@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531" + integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A== + +eastasianwidth@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb" + integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== + +emoji-regex@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" + integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== + +emoji-regex@^9.2.2: + version "9.2.2" + resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" + integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== + +error-ex@^1.3.2: + version "1.3.4" + resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.4.tgz#b3a8d8bb6f92eecc1629e3e27d3c8607a8a32414" + integrity sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ== + dependencies: + is-arrayish "^0.2.1" + +eslint-mdx@^2: + version "2.3.4" + resolved "https://registry.yarnpkg.com/eslint-mdx/-/eslint-mdx-2.3.4.tgz#87a5d95d6fcb27bafd2b15092f16f5aa559e336b" + integrity sha512-u4NszEUyoGtR7Q0A4qs0OymsEQdCO6yqWlTzDa9vGWsK7aMotdnW0hqifHTkf6lEtA2vHk2xlkWHTCrhYLyRbw== + dependencies: + acorn "^8.10.0" + acorn-jsx "^5.3.2" + espree "^9.6.1" + estree-util-visit "^1.2.1" + remark-mdx "^2.3.0" + remark-parse "^10.0.2" + remark-stringify "^10.0.3" + synckit "^0.9.0" + tslib "^2.6.1" + unified "^10.1.2" + unified-engine "^10.1.0" + unist-util-visit "^4.1.2" + uvu "^0.5.6" + vfile "^5.3.7" + +eslint-visitor-keys@^3.4.1: + version "3.4.3" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" + integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== + +espree@^9.6.1: + version "9.6.1" + resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f" + integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ== + dependencies: + acorn "^8.9.0" + acorn-jsx "^5.3.2" + eslint-visitor-keys "^3.4.1" + +estree-util-is-identifier-name@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz#fb70a432dcb19045e77b05c8e732f1364b4b49b2" + integrity sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ== + +estree-util-visit@^1.0.0, estree-util-visit@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.1.tgz#8bc2bc09f25b00827294703835aabee1cc9ec69d" + integrity sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw== + dependencies: + "@types/estree-jsx" "^1.0.0" + "@types/unist" "^2.0.0" + +extend@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" + integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== + +fault@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c" + integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ== + dependencies: + format "^0.2.0" + +foreground-child@^3.1.0: + version "3.3.1" + resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.1.tgz#32e8e9ed1b68a3497befb9ac2b6adf92a638576f" + integrity sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw== + dependencies: + cross-spawn "^7.0.6" + signal-exit "^4.0.1" + +format@^0.2.0: + version "0.2.2" + resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b" + integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww== + +fs.realpath@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" + integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== + +glob@^10.2.2: + version "10.4.5" + resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956" + integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg== + dependencies: + foreground-child "^3.1.0" + jackspeak "^3.1.2" + minimatch "^9.0.4" + minipass "^7.1.2" + package-json-from-dist "^1.0.0" + path-scurry "^1.11.1" + +glob@^8.0.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e" + integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^5.0.1" + once "^1.3.0" + +ignore@^5.0.0: + version "5.3.2" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5" + integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g== + +import-meta-resolve@^2.0.0: + version "2.2.2" + resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-2.2.2.tgz#75237301e72d1f0fbd74dbc6cca9324b164c2cc9" + integrity sha512-f8KcQ1D80V7RnqVm+/lirO9zkOxjGxhaTC1IPrBGd3MEfNgmNG67tSUO9gTi2F3Blr2Az6g1vocaxzkVnWl9MA== + +inflight@^1.0.4: + version "1.0.6" + resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" + integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA== + dependencies: + once "^1.3.0" + wrappy "1" + +inherits@2, inherits@^2.0.3: + version "2.0.4" + resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" + integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== + +ini@^4.1.0: + version "4.1.3" + resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795" + integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg== + +is-alphabetical@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b" + integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ== + +is-alphanumerical@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875" + integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw== + dependencies: + is-alphabetical "^2.0.0" + is-decimal "^2.0.0" + +is-arrayish@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" + integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg== + +is-buffer@^2.0.0: + version "2.0.5" + resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191" + integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ== + +is-decimal@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7" + integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A== + +is-empty@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-1.2.0.tgz#de9bb5b278738a05a0b09a57e1fb4d4a341a9f6b" + integrity sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w== + +is-fullwidth-code-point@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" + integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== + +is-hexadecimal@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027" + integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg== + +is-plain-obj@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0" + integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg== + +isexe@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" + integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw== + +jackspeak@^3.1.2: + version "3.4.3" + resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a" + integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw== + dependencies: + "@isaacs/cliui" "^8.0.2" + optionalDependencies: + "@pkgjs/parseargs" "^0.11.0" + +js-tokens@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + +json-parse-even-better-errors@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d" + integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w== + +json-parse-even-better-errors@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz#b43d35e89c0f3be6b5fbbe9dc6c82467b30c28da" + integrity sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ== + +kleur@^4.0.3: + version "4.1.5" + resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780" + integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ== + +lines-and-columns@^2.0.2: + version "2.0.4" + resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.4.tgz#d00318855905d2660d8c0822e3f5a4715855fc42" + integrity sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A== + +load-plugin@^5.0.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/load-plugin/-/load-plugin-5.1.0.tgz#15600f5191c742b16e058cfc908c227c13db0104" + integrity sha512-Lg1CZa1CFj2CbNaxijTL6PCbzd4qGTlZov+iH2p5Xwy/ApcZJh+i6jMN2cYePouTfjJfrNu3nXFdEw8LvbjPFQ== + dependencies: + "@npmcli/config" "^6.0.0" + import-meta-resolve "^2.0.0" + +longest-streak@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4" + integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g== + +lru-cache@^10.2.0: + version "10.4.3" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119" + integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ== + +mdast-util-from-markdown@^1.0.0, mdast-util-from-markdown@^1.1.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0" + integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww== + dependencies: + "@types/mdast" "^3.0.0" + "@types/unist" "^2.0.0" + decode-named-character-reference "^1.0.0" + mdast-util-to-string "^3.1.0" + micromark "^3.0.0" + micromark-util-decode-numeric-character-reference "^1.0.0" + micromark-util-decode-string "^1.0.0" + micromark-util-normalize-identifier "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + unist-util-stringify-position "^3.0.0" + uvu "^0.5.0" + +mdast-util-mdx-expression@^1.0.0: + version "1.3.2" + resolved "https://registry.yarnpkg.com/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.2.tgz#d027789e67524d541d6de543f36d51ae2586f220" + integrity sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA== + dependencies: + "@types/estree-jsx" "^1.0.0" + "@types/hast" "^2.0.0" + "@types/mdast" "^3.0.0" + mdast-util-from-markdown "^1.0.0" + mdast-util-to-markdown "^1.0.0" + +mdast-util-mdx-jsx@^2.0.0: + version "2.1.4" + resolved "https://registry.yarnpkg.com/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.1.4.tgz#7c1f07f10751a78963cfabee38017cbc8b7786d1" + integrity sha512-DtMn9CmVhVzZx3f+optVDF8yFgQVt7FghCRNdlIaS3X5Bnym3hZwPbg/XW86vdpKjlc1PVj26SpnLGeJBXD3JA== + dependencies: + "@types/estree-jsx" "^1.0.0" + "@types/hast" "^2.0.0" + "@types/mdast" "^3.0.0" + "@types/unist" "^2.0.0" + ccount "^2.0.0" + mdast-util-from-markdown "^1.1.0" + mdast-util-to-markdown "^1.3.0" + parse-entities "^4.0.0" + stringify-entities "^4.0.0" + unist-util-remove-position "^4.0.0" + unist-util-stringify-position "^3.0.0" + vfile-message "^3.0.0" + +mdast-util-mdx@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/mdast-util-mdx/-/mdast-util-mdx-2.0.1.tgz#49b6e70819b99bb615d7223c088d295e53bb810f" + integrity sha512-38w5y+r8nyKlGvNjSEqWrhG0w5PmnRA+wnBvm+ulYCct7nsGYhFVb0lljS9bQav4psDAS1eGkP2LMVcZBi/aqw== + dependencies: + mdast-util-from-markdown "^1.0.0" + mdast-util-mdx-expression "^1.0.0" + mdast-util-mdx-jsx "^2.0.0" + mdast-util-mdxjs-esm "^1.0.0" + mdast-util-to-markdown "^1.0.0" + +mdast-util-mdxjs-esm@^1.0.0: + version "1.3.1" + resolved "https://registry.yarnpkg.com/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.3.1.tgz#645d02cd607a227b49721d146fd81796b2e2d15b" + integrity sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w== + dependencies: + "@types/estree-jsx" "^1.0.0" + "@types/hast" "^2.0.0" + "@types/mdast" "^3.0.0" + mdast-util-from-markdown "^1.0.0" + mdast-util-to-markdown "^1.0.0" + +mdast-util-phrasing@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz#c7c21d0d435d7fb90956038f02e8702781f95463" + integrity sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg== + dependencies: + "@types/mdast" "^3.0.0" + unist-util-is "^5.0.0" + +mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz#c13343cb3fc98621911d33b5cd42e7d0731171c6" + integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A== + dependencies: + "@types/mdast" "^3.0.0" + "@types/unist" "^2.0.0" + longest-streak "^3.0.0" + mdast-util-phrasing "^3.0.0" + mdast-util-to-string "^3.0.0" + micromark-util-decode-string "^1.0.0" + unist-util-visit "^4.0.0" + zwitch "^2.0.0" + +mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789" + integrity sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg== + dependencies: + "@types/mdast" "^3.0.0" + +micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8" + integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw== + dependencies: + decode-named-character-reference "^1.0.0" + micromark-factory-destination "^1.0.0" + micromark-factory-label "^1.0.0" + micromark-factory-space "^1.0.0" + micromark-factory-title "^1.0.0" + micromark-factory-whitespace "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-chunked "^1.0.0" + micromark-util-classify-character "^1.0.0" + micromark-util-html-tag-name "^1.0.0" + micromark-util-normalize-identifier "^1.0.0" + micromark-util-resolve-all "^1.0.0" + micromark-util-subtokenize "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.1" + uvu "^0.5.0" + +micromark-extension-mdx-expression@^1.0.0: + version "1.0.8" + resolved "https://registry.yarnpkg.com/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.8.tgz#5bc1f5fd90388e8293b3ef4f7c6f06c24aff6314" + integrity sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw== + dependencies: + "@types/estree" "^1.0.0" + micromark-factory-mdx-expression "^1.0.0" + micromark-factory-space "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-events-to-acorn "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + uvu "^0.5.0" + +micromark-extension-mdx-jsx@^1.0.0: + version "1.0.5" + resolved "https://registry.yarnpkg.com/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.5.tgz#e72d24b7754a30d20fb797ece11e2c4e2cae9e82" + integrity sha512-gPH+9ZdmDflbu19Xkb8+gheqEDqkSpdCEubQyxuz/Hn8DOXiXvrXeikOoBA71+e8Pfi0/UYmU3wW3H58kr7akA== + dependencies: + "@types/acorn" "^4.0.0" + "@types/estree" "^1.0.0" + estree-util-is-identifier-name "^2.0.0" + micromark-factory-mdx-expression "^1.0.0" + micromark-factory-space "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + uvu "^0.5.0" + vfile-message "^3.0.0" + +micromark-extension-mdx-md@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.1.tgz#595d4b2f692b134080dca92c12272ab5b74c6d1a" + integrity sha512-7MSuj2S7xjOQXAjjkbjBsHkMtb+mDGVW6uI2dBL9snOBCbZmoNgDAeZ0nSn9j3T42UE/g2xVNMn18PJxZvkBEA== + dependencies: + micromark-util-types "^1.0.0" + +micromark-extension-mdxjs-esm@^1.0.0: + version "1.0.5" + resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.5.tgz#e4f8be9c14c324a80833d8d3a227419e2b25dec1" + integrity sha512-xNRBw4aoURcyz/S69B19WnZAkWJMxHMT5hE36GtDAyhoyn/8TuAeqjFJQlwk+MKQsUD7b3l7kFX+vlfVWgcX1w== + dependencies: + "@types/estree" "^1.0.0" + micromark-core-commonmark "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-events-to-acorn "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + unist-util-position-from-estree "^1.1.0" + uvu "^0.5.0" + vfile-message "^3.0.0" + +micromark-extension-mdxjs@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.1.tgz#f78d4671678d16395efeda85170c520ee795ded8" + integrity sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q== + dependencies: + acorn "^8.0.0" + acorn-jsx "^5.0.0" + micromark-extension-mdx-expression "^1.0.0" + micromark-extension-mdx-jsx "^1.0.0" + micromark-extension-mdx-md "^1.0.0" + micromark-extension-mdxjs-esm "^1.0.0" + micromark-util-combine-extensions "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-factory-destination@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f" + integrity sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg== + dependencies: + micromark-util-character "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-factory-label@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68" + integrity sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w== + dependencies: + micromark-util-character "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + uvu "^0.5.0" + +micromark-factory-mdx-expression@^1.0.0: + version "1.0.9" + resolved "https://registry.yarnpkg.com/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.9.tgz#57ba4571b69a867a1530f34741011c71c73a4976" + integrity sha512-jGIWzSmNfdnkJq05c7b0+Wv0Kfz3NJ3N4cBjnbO4zjXIlxJr+f8lk+5ZmwFvqdAbUy2q6B5rCY//g0QAAaXDWA== + dependencies: + "@types/estree" "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-events-to-acorn "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + unist-util-position-from-estree "^1.0.0" + uvu "^0.5.0" + vfile-message "^3.0.0" + +micromark-factory-space@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf" + integrity sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ== + dependencies: + micromark-util-character "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-factory-title@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1" + integrity sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ== + dependencies: + micromark-factory-space "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-factory-whitespace@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705" + integrity sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ== + dependencies: + micromark-factory-space "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-util-character@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc" + integrity sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg== + dependencies: + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-util-chunked@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b" + integrity sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ== + dependencies: + micromark-util-symbol "^1.0.0" + +micromark-util-classify-character@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d" + integrity sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw== + dependencies: + micromark-util-character "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-util-combine-extensions@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84" + integrity sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA== + dependencies: + micromark-util-chunked "^1.0.0" + micromark-util-types "^1.0.0" + +micromark-util-decode-numeric-character-reference@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6" + integrity sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw== + dependencies: + micromark-util-symbol "^1.0.0" + +micromark-util-decode-string@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c" + integrity sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ== + dependencies: + decode-named-character-reference "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-decode-numeric-character-reference "^1.0.0" + micromark-util-symbol "^1.0.0" + +micromark-util-encode@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5" + integrity sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw== + +micromark-util-events-to-acorn@^1.0.0: + version "1.2.3" + resolved "https://registry.yarnpkg.com/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.2.3.tgz#a4ab157f57a380e646670e49ddee97a72b58b557" + integrity sha512-ij4X7Wuc4fED6UoLWkmo0xJQhsktfNh1J0m8g4PbIMPlx+ek/4YdW5mvbye8z/aZvAPUoxgXHrwVlXAPKMRp1w== + dependencies: + "@types/acorn" "^4.0.0" + "@types/estree" "^1.0.0" + "@types/unist" "^2.0.0" + estree-util-visit "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + uvu "^0.5.0" + vfile-message "^3.0.0" + +micromark-util-html-tag-name@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588" + integrity sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q== + +micromark-util-normalize-identifier@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7" + integrity sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q== + dependencies: + micromark-util-symbol "^1.0.0" + +micromark-util-resolve-all@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188" + integrity sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA== + dependencies: + micromark-util-types "^1.0.0" + +micromark-util-sanitize-uri@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d" + integrity sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A== + dependencies: + micromark-util-character "^1.0.0" + micromark-util-encode "^1.0.0" + micromark-util-symbol "^1.0.0" + +micromark-util-subtokenize@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1" + integrity sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A== + dependencies: + micromark-util-chunked "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.0" + uvu "^0.5.0" + +micromark-util-symbol@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142" + integrity sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag== + +micromark-util-types@^1.0.0, micromark-util-types@^1.0.1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.1.0.tgz#e6676a8cae0bb86a2171c498167971886cb7e283" + integrity sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg== + +micromark@^3.0.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9" + integrity sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA== + dependencies: + "@types/debug" "^4.0.0" + debug "^4.0.0" + decode-named-character-reference "^1.0.0" + micromark-core-commonmark "^1.0.1" + micromark-factory-space "^1.0.0" + micromark-util-character "^1.0.0" + micromark-util-chunked "^1.0.0" + micromark-util-combine-extensions "^1.0.0" + micromark-util-decode-numeric-character-reference "^1.0.0" + micromark-util-encode "^1.0.0" + micromark-util-normalize-identifier "^1.0.0" + micromark-util-resolve-all "^1.0.0" + micromark-util-sanitize-uri "^1.0.0" + micromark-util-subtokenize "^1.0.0" + micromark-util-symbol "^1.0.0" + micromark-util-types "^1.0.1" + uvu "^0.5.0" + +minimatch@^5.0.1: + version "5.1.6" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96" + integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g== + dependencies: + brace-expansion "^2.0.1" + +minimatch@^9.0.0, minimatch@^9.0.4: + version "9.0.5" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5" + integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow== + dependencies: + brace-expansion "^2.0.1" + +"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2: + version "7.1.2" + resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707" + integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw== + +mri@^1.1.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b" + integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA== + +ms@^2.1.3: + version "2.1.3" + resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" + integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== + +nopt@^7.0.0: + version "7.2.1" + resolved "https://registry.yarnpkg.com/nopt/-/nopt-7.2.1.tgz#1cac0eab9b8e97c9093338446eddd40b2c8ca1e7" + integrity sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w== + dependencies: + abbrev "^2.0.0" + +npm-normalize-package-bin@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz#25447e32a9a7de1f51362c61a559233b89947832" + integrity sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ== + +once@^1.3.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" + integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w== + dependencies: + wrappy "1" + +package-json-from-dist@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505" + integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw== + +parse-entities@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.2.tgz#61d46f5ed28e4ee62e9ddc43d6b010188443f159" + integrity sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw== + dependencies: + "@types/unist" "^2.0.0" + character-entities-legacy "^3.0.0" + character-reference-invalid "^2.0.0" + decode-named-character-reference "^1.0.0" + is-alphanumerical "^2.0.0" + is-decimal "^2.0.0" + is-hexadecimal "^2.0.0" + +parse-json@^6.0.0: + version "6.0.2" + resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-6.0.2.tgz#6bf79c201351cc12d5d66eba48d5a097c13dc200" + integrity sha512-SA5aMiaIjXkAiBrW/yPgLgQAQg42f7K3ACO+2l/zOvtQBwX58DMUsFJXelW2fx3yMBmWOVkR6j1MGsdSbCA4UA== + dependencies: + "@babel/code-frame" "^7.16.0" + error-ex "^1.3.2" + json-parse-even-better-errors "^2.3.1" + lines-and-columns "^2.0.2" + +path-key@^3.1.0: + version "3.1.1" + resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" + integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== + +path-scurry@^1.11.1: + version "1.11.1" + resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2" + integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA== + dependencies: + lru-cache "^10.2.0" + minipass "^5.0.0 || ^6.0.2 || ^7.0.0" + +picocolors@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + +proc-log@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-3.0.0.tgz#fb05ef83ccd64fd7b20bbe9c8c1070fc08338dd8" + integrity sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A== + +read-package-json-fast@^3.0.0, read-package-json-fast@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz#394908a9725dc7a5f14e70c8e7556dff1d2b1049" + integrity sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw== + dependencies: + json-parse-even-better-errors "^3.0.0" + npm-normalize-package-bin "^3.0.0" + +readable-stream@^3.0.2: + version "3.6.2" + resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967" + integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA== + dependencies: + inherits "^2.0.3" + string_decoder "^1.1.1" + util-deprecate "^1.0.1" + +remark-mdx@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.3.0.tgz#efe678025a8c2726681bde8bf111af4a93943db4" + integrity sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g== + dependencies: + mdast-util-mdx "^2.0.0" + micromark-extension-mdxjs "^1.0.0" + +remark-parse@^10.0.2: + version "10.0.2" + resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262" + integrity sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw== + dependencies: + "@types/mdast" "^3.0.0" + mdast-util-from-markdown "^1.0.0" + unified "^10.0.0" + +remark-stringify@^10.0.3: + version "10.0.3" + resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-10.0.3.tgz#83b43f2445c4ffbb35b606f967d121b2b6d69717" + integrity sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A== + dependencies: + "@types/mdast" "^3.0.0" + mdast-util-to-markdown "^1.0.0" + unified "^10.0.0" + +sade@^1.7.3: + version "1.8.1" + resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701" + integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A== + dependencies: + mri "^1.1.0" + +safe-buffer@~5.2.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" + integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== + +semver@^7.3.5: + version "7.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58" + integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA== + +shebang-command@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" + integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA== + dependencies: + shebang-regex "^3.0.0" + +shebang-regex@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" + integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== + +signal-exit@^4.0.1: + version "4.1.0" + resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04" + integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== + +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" + integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA== + dependencies: + eastasianwidth "^0.2.0" + emoji-regex "^9.2.2" + strip-ansi "^7.0.1" + +string_decoder@^1.1.1: + version "1.3.0" + resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e" + integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA== + dependencies: + safe-buffer "~5.2.0" + +stringify-entities@^4.0.0: + version "4.0.4" + resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.4.tgz#b3b79ef5f277cc4ac73caeb0236c5ba939b3a4f3" + integrity sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg== + dependencies: + character-entities-html4 "^2.0.0" + character-entities-legacy "^3.0.0" + +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^7.0.1: + version "7.1.2" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba" + integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA== + dependencies: + ansi-regex "^6.0.1" + +supports-color@^9.0.0: + version "9.4.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.4.0.tgz#17bfcf686288f531db3dea3215510621ccb55954" + integrity sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw== + +synckit@^0.9.0: + version "0.9.3" + resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.3.tgz#1cfd60d9e61f931e07fb7f56f474b5eb31b826a7" + integrity sha512-JJoOEKTfL1urb1mDoEblhD9NhEbWmq9jHEMEnxoC4ujUaZ4itA8vKgwkFAyNClgxplLi9tsUKX+EduK0p/l7sg== + dependencies: + "@pkgr/core" "^0.1.0" + tslib "^2.6.2" + +to-vfile@^7.0.0: + version "7.2.4" + resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-7.2.4.tgz#b97ecfcc15905ffe020bc975879053928b671378" + integrity sha512-2eQ+rJ2qGbyw3senPI0qjuM7aut8IYXK6AEoOWb+fJx/mQYzviTckm1wDjq91QYHAPBTYzmdJXxMFA6Mk14mdw== + dependencies: + is-buffer "^2.0.0" + vfile "^5.1.0" + +trough@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f" + integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw== + +tslib@^2.6.1, tslib@^2.6.2: + version "2.8.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" + integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== + +typedarray@^0.0.6: + version "0.0.6" + resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" + integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== + +undici-types@~5.26.4: + version "5.26.5" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" + integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== + +undici-types@~7.12.0: + version "7.12.0" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.12.0.tgz#15c5c7475c2a3ba30659529f5cdb4674b622fafb" + integrity sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ== + +unified-engine@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/unified-engine/-/unified-engine-10.1.0.tgz#6899f00d1f53ee9af94f7abd0ec21242aae3f56c" + integrity sha512-5+JDIs4hqKfHnJcVCxTid1yBoI/++FfF/1PFdSMpaftZZZY+qg2JFruRbf7PaIwa9KgLotXQV3gSjtY0IdcFGQ== + dependencies: + "@types/concat-stream" "^2.0.0" + "@types/debug" "^4.0.0" + "@types/is-empty" "^1.0.0" + "@types/node" "^18.0.0" + "@types/unist" "^2.0.0" + concat-stream "^2.0.0" + debug "^4.0.0" + fault "^2.0.0" + glob "^8.0.0" + ignore "^5.0.0" + is-buffer "^2.0.0" + is-empty "^1.0.0" + is-plain-obj "^4.0.0" + load-plugin "^5.0.0" + parse-json "^6.0.0" + to-vfile "^7.0.0" + trough "^2.0.0" + unist-util-inspect "^7.0.0" + vfile-message "^3.0.0" + vfile-reporter "^7.0.0" + vfile-statistics "^2.0.0" + yaml "^2.0.0" + +unified@^10.0.0, unified@^10.1.2: + version "10.1.2" + resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df" + integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q== + dependencies: + "@types/unist" "^2.0.0" + bail "^2.0.0" + extend "^3.0.0" + is-buffer "^2.0.0" + is-plain-obj "^4.0.0" + trough "^2.0.0" + vfile "^5.0.0" + +unist-util-inspect@^7.0.0: + version "7.0.2" + resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-7.0.2.tgz#858e4f02ee4053f7c6ada8bc81662901a0ee1893" + integrity sha512-Op0XnmHUl6C2zo/yJCwhXQSm/SmW22eDZdWP2qdf4WpGrgO1ZxFodq+5zFyeRGasFjJotAnLgfuD1jkcKqiH1Q== + dependencies: + "@types/unist" "^2.0.0" + +unist-util-is@^5.0.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9" + integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw== + dependencies: + "@types/unist" "^2.0.0" + +unist-util-position-from-estree@^1.0.0, unist-util-position-from-estree@^1.1.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.2.tgz#8ac2480027229de76512079e377afbcabcfcce22" + integrity sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww== + dependencies: + "@types/unist" "^2.0.0" + +unist-util-remove-position@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-4.0.2.tgz#a89be6ea72e23b1a402350832b02a91f6a9afe51" + integrity sha512-TkBb0HABNmxzAcfLf4qsIbFbaPDvMO6wa3b3j4VcEzFVaw1LBKwnW4/sRJ/atSLSzoIg41JWEdnE7N6DIhGDGQ== + dependencies: + "@types/unist" "^2.0.0" + unist-util-visit "^4.0.0" + +unist-util-stringify-position@^3.0.0: + version "3.0.3" + resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d" + integrity sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg== + dependencies: + "@types/unist" "^2.0.0" + +unist-util-visit-parents@^5.1.1: + version "5.1.3" + resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb" + integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg== + dependencies: + "@types/unist" "^2.0.0" + unist-util-is "^5.0.0" + +unist-util-visit@^4.0.0, unist-util-visit@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2" + integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg== + dependencies: + "@types/unist" "^2.0.0" + unist-util-is "^5.0.0" + unist-util-visit-parents "^5.1.1" + +util-deprecate@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" + integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== + +uvu@^0.5.0, uvu@^0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df" + integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA== + dependencies: + dequal "^2.0.0" + diff "^5.0.0" + kleur "^4.0.3" + sade "^1.7.3" + +vfile-message@^3.0.0: + version "3.1.4" + resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea" + integrity sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw== + dependencies: + "@types/unist" "^2.0.0" + unist-util-stringify-position "^3.0.0" + +vfile-reporter@^7.0.0: + version "7.0.5" + resolved "https://registry.yarnpkg.com/vfile-reporter/-/vfile-reporter-7.0.5.tgz#a0cbf3922c08ad428d6db1161ec64a53b5725785" + integrity sha512-NdWWXkv6gcd7AZMvDomlQbK3MqFWL1RlGzMn++/O2TI+68+nqxCPTvLugdOtfSzXmjh+xUyhp07HhlrbJjT+mw== + dependencies: + "@types/supports-color" "^8.0.0" + string-width "^5.0.0" + supports-color "^9.0.0" + unist-util-stringify-position "^3.0.0" + vfile "^5.0.0" + vfile-message "^3.0.0" + vfile-sort "^3.0.0" + vfile-statistics "^2.0.0" + +vfile-sort@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/vfile-sort/-/vfile-sort-3.0.1.tgz#4b06ec63e2946749b0bb514e736554cd75e441a2" + integrity sha512-1os1733XY6y0D5x0ugqSeaVJm9lYgj0j5qdcZQFyxlZOSy1jYarL77lLyb5gK4Wqr1d5OxmuyflSO3zKyFnTFw== + dependencies: + vfile "^5.0.0" + vfile-message "^3.0.0" + +vfile-statistics@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/vfile-statistics/-/vfile-statistics-2.0.1.tgz#2e1adae1cd3a45c1ed4f2a24bd103c3d71e4bce3" + integrity sha512-W6dkECZmP32EG/l+dp2jCLdYzmnDBIw6jwiLZSER81oR5AHRcVqL+k3Z+pfH1R73le6ayDkJRMk0sutj1bMVeg== + dependencies: + vfile "^5.0.0" + vfile-message "^3.0.0" + +vfile@^5.0.0, vfile@^5.1.0, vfile@^5.3.7: + version "5.3.7" + resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7" + integrity sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g== + dependencies: + "@types/unist" "^2.0.0" + is-buffer "^2.0.0" + unist-util-stringify-position "^3.0.0" + vfile-message "^3.0.0" + +walk-up-path@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/walk-up-path/-/walk-up-path-3.0.1.tgz#c8d78d5375b4966c717eb17ada73dbd41490e886" + integrity sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA== + +which@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1" + integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA== + dependencies: + isexe "^2.0.0" + +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + +wrap-ansi@^8.1.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" + integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ== + dependencies: + ansi-styles "^6.1.0" + string-width "^5.0.1" + strip-ansi "^7.0.1" + +wrappy@1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" + integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== + +yaml@^2.0.0: + version "2.8.1" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79" + integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw== + +zwitch@^2.0.0: + version "2.0.4" + resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7" + integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A== diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..52e831b43 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/next.config.js b/next.config.js index 61ff1944a..c8d7bf0ed 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -9,10 +16,32 @@ const nextConfig = { pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], reactStrictMode: true, experimental: { - // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed - appDir: false, scrollRestoration: true, - legacyBrowsers: false, + reactCompiler: true, + }, + async rewrites() { + return { + beforeFiles: [ + // Explicit .md extension also serves markdown + { + source: '/:path*.md', + destination: '/api/md/:path*', + }, + // Serve markdown when Accept header prefers text/markdown + // Useful for LLM agents - https://www.skeptrune.com/posts/use-the-accept-header-to-serve-markdown-instead-of-html-to-llms/ + { + source: '/:path((?!llms\\.txt|api/md).*)', + has: [ + { + type: 'header', + key: 'accept', + value: '(.*text/markdown.*)', + }, + ], + destination: '/api/md/:path*', + }, + ], + }; }, env: {}, webpack: (config, {dev, isServer, ...options}) => { @@ -31,6 +60,14 @@ const nextConfig = { // Don't bundle the shim unnecessarily. config.resolve.alias['use-sync-external-store/shim'] = 'react'; + // ESLint depends on the CommonJS version of esquery, + // but Webpack loads the ESM version by default. This + // alias ensures the correct version is used. + // + // More info: + // https://github.com/reactjs/react.dev/pull/8115 + config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js'; + const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack'); config.plugins.push( new NormalModuleReplacementPlugin( diff --git a/package.json b/package.json index ad9b9baa4..359f30d3e 100644 --- a/package.json +++ b/package.json @@ -6,39 +6,43 @@ "scripts": { "analyze": "ANALYZE=true next build", "dev": "next-remote-watch ./src/content", - "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs", - "lint": "next lint", - "lint:fix": "next lint --fix", + "prebuild:rsc": "node scripts/buildRscWorker.mjs", + "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs", + "lint": "next lint && eslint \"src/content/**/*.md\"", + "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix", "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", "prettier": "yarn format:source", "prettier:diff": "yarn nit:source", "lint-heading-ids": "node scripts/headingIdLinter.js", "fix-headings": "node scripts/headingIdLinter.js --fix", - "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss", + "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks", "tsc": "tsc --noEmit", "start": "next start", - "postinstall": "patch-package && (is-ci || husky install .husky)", + "postinstall": "yarn --cwd eslint-local-rules install && is-ci || husky install .husky", "check-all": "npm-run-all prettier lint:fix tsc rss", - "rss": "node scripts/generateRss.js" + "rss": "node scripts/generateRss.js", + "deadlinks": "node scripts/deadLinkChecker.js", + "copyright": "node scripts/copyright.js", + "test:eslint-local-rules": "yarn --cwd eslint-local-rules test" }, "dependencies": { "@codesandbox/sandpack-react": "2.13.5", - "@docsearch/css": "^3.6.1", - "@docsearch/react": "^3.6.1", + "@docsearch/css": "^3.8.3", + "@docsearch/react": "^3.8.3", "@headlessui/react": "^1.7.0", "@radix-ui/react-context-menu": "^2.1.5", "body-scroll-lock": "^3.1.3", "classnames": "^2.2.6", - "date-fns": "^2.16.1", "debounce": "^1.2.1", "github-slugger": "^1.3.0", - "next": "^13.4.1", + "next": "15.1.12", "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", - "react": "^0.0.0-experimental-16d053d59-20230506", + "raw-loader": "^4.0.2", + "react": "^19.0.0", "react-collapsed": "4.0.4", - "react-dom": "^0.0.0-experimental-16d053d59-20230506", + "react-dom": "^19.0.0", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" }, @@ -54,20 +58,25 @@ "@types/mdx-js__react": "^1.5.2", "@types/node": "^14.6.4", "@types/parse-numeric-range": "^0.0.1", - "@types/react": "^18.0.9", - "@types/react-dom": "^18.0.5", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", "@typescript-eslint/eslint-plugin": "^5.36.2", "@typescript-eslint/parser": "^5.36.2", "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", + "babel-plugin-react-compiler": "^1.0.0", + "chalk": "4.1.2", + "esbuild": "^0.24.0", "eslint": "7.x", "eslint-config-next": "12.0.3", "eslint-config-react-app": "^5.2.1", "eslint-plugin-flowtype": "4.x", "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", + "eslint-plugin-local-rules": "link:eslint-local-rules", "eslint-plugin-react": "7.x", + "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112", "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215", "fs-extra": "^9.0.1", "globby": "^11.0.1", @@ -78,11 +87,11 @@ "mdast-util-to-string": "^1.1.0", "metro-cache": "0.72.2", "npm-run-all": "^4.1.5", - "patch-package": "^6.2.2", "postcss": "^8.4.5", "postcss-flexbugs-fixes": "4.2.1", "postcss-preset-env": "^6.7.0", "prettier": "^2.5.1", + "react-server-dom-webpack": "^19.2.4", "reading-time": "^1.2.0", "remark": "^12.0.1", "remark-external-links": "^7.0.0", @@ -94,7 +103,7 @@ "retext-smartypants": "^4.0.0", "rss": "^1.2.2", "tailwindcss": "^3.4.1", - "typescript": "^4.0.2", + "typescript": "^5.7.2", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" }, @@ -109,5 +118,6 @@ "lint-staged": { "*.{js,ts,jsx,tsx,css}": "yarn prettier", "src/**/*.md": "yarn fix-headings" - } + }, + "packageManager": "yarn@1.22.22" } diff --git a/patches/next+13.4.1.patch b/patches/next+13.4.1.patch deleted file mode 100644 index 6de490aa4..000000000 --- a/patches/next+13.4.1.patch +++ /dev/null @@ -1,22 +0,0 @@ -diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js -index a1f8648..1b3d608 100644 ---- a/node_modules/next/dist/server/render.js -+++ b/node_modules/next/dist/server/render.js -@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) { - // Always using react concurrent rendering mode with required react version 18.x - const renderShell = async (EnhancedApp, EnhancedComponent)=>{ - const content = renderContent(EnhancedApp, EnhancedComponent); -- return await (0, _nodewebstreamshelper.renderToInitialStream)({ -- ReactDOMServer: _serverbrowser.default, -- element: content -+ return new Promise((resolve, reject) => { -+ (0, _nodewebstreamshelper.renderToInitialStream)({ -+ ReactDOMServer: _serverbrowser.default, -+ element: content, -+ streamOptions: { -+ onError: reject -+ } -+ }).then(resolve, reject); - }); - }; - const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{ diff --git a/patches/next-remote-watch+1.0.0.patch b/patches/next-remote-watch+1.0.0.patch deleted file mode 100644 index c9ecef84d..000000000 --- a/patches/next-remote-watch+1.0.0.patch +++ /dev/null @@ -1,16 +0,0 @@ -diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch -index c055b66..a2f749c 100755 ---- a/node_modules/next-remote-watch/bin/next-remote-watch -+++ b/node_modules/next-remote-watch/bin/next-remote-watch -@@ -66,7 +66,10 @@ app.prepare().then(() => { - } - } - -- app.server.hotReloader.send('reloadPage') -+ app.server.hotReloader.send({ -+ event: 'serverOnlyChanges', -+ pages: ['/[[...markdownPath]]'] -+ }); - } - ) - } diff --git a/plugins/markdownToHtml.js b/plugins/markdownToHtml.js index 0d5fe7afb..e9b0c3ec3 100644 --- a/plugins/markdownToHtml.js +++ b/plugins/markdownToHtml.js @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + const remark = require('remark'); const externalLinks = require('remark-external-links'); // Add _target and rel to external links const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n diff --git a/plugins/remark-header-custom-ids.js b/plugins/remark-header-custom-ids.js index 356de1bf1..c5430ce8a 100644 --- a/plugins/remark-header-custom-ids.js +++ b/plugins/remark-header-custom-ids.js @@ -1,5 +1,8 @@ /** - * Copyright (c) Facebook, Inc. and its affiliates. + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ /*! diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js index 4694ff674..c819624ba 100644 --- a/plugins/remark-smartypants.js +++ b/plugins/remark-smartypants.js @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /*! * Based on 'silvenon/remark-smartypants' * https://github.com/silvenon/remark-smartypants/pull/80 @@ -7,12 +14,24 @@ const visit = require('unist-util-visit'); const retext = require('retext'); const smartypants = require('retext-smartypants'); -function check(parent) { +function check(node, parent) { + if (node.data?.skipSmartyPants) return false; if (parent.tagName === 'script') return false; if (parent.tagName === 'style') return false; return true; } +function markSkip(node) { + if (!node) return; + node.data ??= {}; + node.data.skipSmartyPants = true; + if (Array.isArray(node.children)) { + for (const child of node.children) { + markSkip(child); + } + } +} + module.exports = function (options) { const processor = retext().use(smartypants, { ...options, @@ -36,8 +55,14 @@ module.exports = function (options) { let startIndex = 0; const textOrInlineCodeNodes = []; + visit(tree, 'mdxJsxFlowElement', (node) => { + if (['TerminalBlock'].includes(node.name)) { + markSkip(node); // Mark all children to skip smarty pants + } + }); + visit(tree, ['text', 'inlineCode'], (node, _, parent) => { - if (check(parent)) { + if (check(node, parent)) { if (node.type === 'text') allText += node.value; // for the case when inlineCode contains just one part of quote: `foo'bar` else allText += 'A'.repeat(node.value.length); diff --git a/postcss.config.js b/postcss.config.js index 427294522..6b55f9277 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -17,4 +24,4 @@ module.exports = { }, }, }, -} +}; diff --git a/public/fonts/Source-Code-Pro-Bold.woff2 b/public/fonts/Source-Code-Pro-Bold.woff2 new file mode 100644 index 000000000..220bd5d96 Binary files /dev/null and b/public/fonts/Source-Code-Pro-Bold.woff2 differ diff --git a/public/fonts/Source-Code-Pro-Regular.woff2 b/public/fonts/Source-Code-Pro-Regular.woff2 index 655cd9e81..fd665c465 100644 Binary files a/public/fonts/Source-Code-Pro-Regular.woff2 and b/public/fonts/Source-Code-Pro-Regular.woff2 differ diff --git a/public/images/blog/react-foundation/react_foundation_logo.png b/public/images/blog/react-foundation/react_foundation_logo.png new file mode 100644 index 000000000..51c19598f Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo.png differ diff --git a/public/images/blog/react-foundation/react_foundation_logo.webp b/public/images/blog/react-foundation/react_foundation_logo.webp new file mode 100644 index 000000000..89efa6027 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo.webp differ diff --git a/public/images/blog/react-foundation/react_foundation_logo_dark.png b/public/images/blog/react-foundation/react_foundation_logo_dark.png new file mode 100644 index 000000000..4aedaf464 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo_dark.png differ diff --git a/public/images/blog/react-foundation/react_foundation_logo_dark.webp b/public/images/blog/react-foundation/react_foundation_logo_dark.webp new file mode 100644 index 000000000..09b48b70d Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo_dark.webp differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos.png b/public/images/blog/react-foundation/react_foundation_member_logos.png new file mode 100644 index 000000000..e83659693 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos.png differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos.webp b/public/images/blog/react-foundation/react_foundation_member_logos.webp new file mode 100644 index 000000000..babb3d57c Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos.webp differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_dark.png b/public/images/blog/react-foundation/react_foundation_member_logos_dark.png new file mode 100644 index 000000000..116e40337 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_dark.png differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_dark.webp b/public/images/blog/react-foundation/react_foundation_member_logos_dark.webp new file mode 100644 index 000000000..5fcf38ca9 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_dark.webp differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_dark_updated.png b/public/images/blog/react-foundation/react_foundation_member_logos_dark_updated.png new file mode 100644 index 000000000..f969cadc8 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_dark_updated.png differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_dark_updated.webp b/public/images/blog/react-foundation/react_foundation_member_logos_dark_updated.webp new file mode 100644 index 000000000..a6aa358f3 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_dark_updated.webp differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_updated.png b/public/images/blog/react-foundation/react_foundation_member_logos_updated.png new file mode 100644 index 000000000..ca30ca6f4 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_updated.png differ diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_updated.webp b/public/images/blog/react-foundation/react_foundation_member_logos_updated.webp new file mode 100644 index 000000000..4df97d799 Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_updated.webp differ diff --git a/public/images/blog/react-labs-april-2025/perf_tracks.png b/public/images/blog/react-labs-april-2025/perf_tracks.png new file mode 100644 index 000000000..835a247cf Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks.png differ diff --git a/public/images/blog/react-labs-april-2025/perf_tracks.webp b/public/images/blog/react-labs-april-2025/perf_tracks.webp new file mode 100644 index 000000000..88a7eb792 Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks.webp differ diff --git a/public/images/blog/react-labs-april-2025/perf_tracks_dark.png b/public/images/blog/react-labs-april-2025/perf_tracks_dark.png new file mode 100644 index 000000000..07513fe90 Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks_dark.png differ diff --git a/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp b/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp new file mode 100644 index 000000000..1a0521bf8 Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp differ diff --git a/public/images/docs/diagrams/19_2_batching_after.dark.png b/public/images/docs/diagrams/19_2_batching_after.dark.png new file mode 100644 index 000000000..29ff14093 Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_after.dark.png differ diff --git a/public/images/docs/diagrams/19_2_batching_after.png b/public/images/docs/diagrams/19_2_batching_after.png new file mode 100644 index 000000000..0ae652f79 Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_after.png differ diff --git a/public/images/docs/diagrams/19_2_batching_before.dark.png b/public/images/docs/diagrams/19_2_batching_before.dark.png new file mode 100644 index 000000000..758afceb1 Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_before.dark.png differ diff --git a/public/images/docs/diagrams/19_2_batching_before.png b/public/images/docs/diagrams/19_2_batching_before.png new file mode 100644 index 000000000..7e260135f Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_before.png differ diff --git a/public/images/docs/performance-tracks/changed-props.dark.png b/public/images/docs/performance-tracks/changed-props.dark.png new file mode 100644 index 000000000..6709a7ea8 Binary files /dev/null and b/public/images/docs/performance-tracks/changed-props.dark.png differ diff --git a/public/images/docs/performance-tracks/changed-props.png b/public/images/docs/performance-tracks/changed-props.png new file mode 100644 index 000000000..33efe9289 Binary files /dev/null and b/public/images/docs/performance-tracks/changed-props.png differ diff --git a/public/images/docs/performance-tracks/components-effects.dark.png b/public/images/docs/performance-tracks/components-effects.dark.png new file mode 100644 index 000000000..57e3a30b0 Binary files /dev/null and b/public/images/docs/performance-tracks/components-effects.dark.png differ diff --git a/public/images/docs/performance-tracks/components-effects.png b/public/images/docs/performance-tracks/components-effects.png new file mode 100644 index 000000000..ff315b99d Binary files /dev/null and b/public/images/docs/performance-tracks/components-effects.png differ diff --git a/public/images/docs/performance-tracks/components-render.dark.png b/public/images/docs/performance-tracks/components-render.dark.png new file mode 100644 index 000000000..c0608b153 Binary files /dev/null and b/public/images/docs/performance-tracks/components-render.dark.png differ diff --git a/public/images/docs/performance-tracks/components-render.png b/public/images/docs/performance-tracks/components-render.png new file mode 100644 index 000000000..436737767 Binary files /dev/null and b/public/images/docs/performance-tracks/components-render.png differ diff --git a/public/images/docs/performance-tracks/overview.dark.png b/public/images/docs/performance-tracks/overview.dark.png new file mode 100644 index 000000000..07513fe90 Binary files /dev/null and b/public/images/docs/performance-tracks/overview.dark.png differ diff --git a/public/images/docs/performance-tracks/overview.png b/public/images/docs/performance-tracks/overview.png new file mode 100644 index 000000000..835a247cf Binary files /dev/null and b/public/images/docs/performance-tracks/overview.png differ diff --git a/public/images/docs/performance-tracks/scheduler-cascading-update.dark.png b/public/images/docs/performance-tracks/scheduler-cascading-update.dark.png new file mode 100644 index 000000000..beb4512d2 Binary files /dev/null and b/public/images/docs/performance-tracks/scheduler-cascading-update.dark.png differ diff --git a/public/images/docs/performance-tracks/scheduler-cascading-update.png b/public/images/docs/performance-tracks/scheduler-cascading-update.png new file mode 100644 index 000000000..8631c4896 Binary files /dev/null and b/public/images/docs/performance-tracks/scheduler-cascading-update.png differ diff --git a/public/images/docs/performance-tracks/scheduler-update.dark.png b/public/images/docs/performance-tracks/scheduler-update.dark.png new file mode 100644 index 000000000..df252663a Binary files /dev/null and b/public/images/docs/performance-tracks/scheduler-update.dark.png differ diff --git a/public/images/docs/performance-tracks/scheduler-update.png b/public/images/docs/performance-tracks/scheduler-update.png new file mode 100644 index 000000000..79a361d2a Binary files /dev/null and b/public/images/docs/performance-tracks/scheduler-update.png differ diff --git a/public/images/docs/performance-tracks/scheduler.dark.png b/public/images/docs/performance-tracks/scheduler.dark.png new file mode 100644 index 000000000..7e48020f8 Binary files /dev/null and b/public/images/docs/performance-tracks/scheduler.dark.png differ diff --git a/public/images/docs/performance-tracks/scheduler.png b/public/images/docs/performance-tracks/scheduler.png new file mode 100644 index 000000000..1cd07a144 Binary files /dev/null and b/public/images/docs/performance-tracks/scheduler.png differ diff --git a/public/images/docs/performance-tracks/server-overview.dark.png b/public/images/docs/performance-tracks/server-overview.dark.png new file mode 100644 index 000000000..221fb1204 Binary files /dev/null and b/public/images/docs/performance-tracks/server-overview.dark.png differ diff --git a/public/images/docs/performance-tracks/server-overview.png b/public/images/docs/performance-tracks/server-overview.png new file mode 100644 index 000000000..85c7eed27 Binary files /dev/null and b/public/images/docs/performance-tracks/server-overview.png differ diff --git a/public/images/docs/scientists/1bX5QH6.jpg b/public/images/docs/scientists/1bX5QH6.jpg new file mode 100644 index 000000000..630b91bd2 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6.jpg differ diff --git a/public/images/docs/scientists/1bX5QH6b.jpg b/public/images/docs/scientists/1bX5QH6b.jpg new file mode 100644 index 000000000..7bd074365 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6b.jpg differ diff --git a/public/images/docs/scientists/1bX5QH6s.jpg b/public/images/docs/scientists/1bX5QH6s.jpg new file mode 100644 index 000000000..0bc3a6f40 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6s.jpg differ diff --git a/public/images/docs/scientists/2heNQDcm.jpg b/public/images/docs/scientists/2heNQDcm.jpg new file mode 100644 index 000000000..ecc8ab394 Binary files /dev/null and b/public/images/docs/scientists/2heNQDcm.jpg differ diff --git a/public/images/docs/scientists/3aIiwfm.jpg b/public/images/docs/scientists/3aIiwfm.jpg new file mode 100644 index 000000000..e93d8c802 Binary files /dev/null and b/public/images/docs/scientists/3aIiwfm.jpg differ diff --git a/public/images/docs/scientists/5qwVYb1.jpeg b/public/images/docs/scientists/5qwVYb1.jpeg new file mode 100644 index 000000000..cd8b4e556 Binary files /dev/null and b/public/images/docs/scientists/5qwVYb1.jpeg differ diff --git a/public/images/docs/scientists/6o5Vuyu.jpg b/public/images/docs/scientists/6o5Vuyu.jpg new file mode 100644 index 000000000..941563f8d Binary files /dev/null and b/public/images/docs/scientists/6o5Vuyu.jpg differ diff --git a/public/images/docs/scientists/7vQD0fPb.jpg b/public/images/docs/scientists/7vQD0fPb.jpg new file mode 100644 index 000000000..71baab951 Binary files /dev/null and b/public/images/docs/scientists/7vQD0fPb.jpg differ diff --git a/public/images/docs/scientists/7vQD0fPs.jpg b/public/images/docs/scientists/7vQD0fPs.jpg new file mode 100644 index 000000000..5da6b45f1 Binary files /dev/null and b/public/images/docs/scientists/7vQD0fPs.jpg differ diff --git a/public/images/docs/scientists/9EAYZrtl.jpg b/public/images/docs/scientists/9EAYZrtl.jpg new file mode 100644 index 000000000..7313ffdb2 Binary files /dev/null and b/public/images/docs/scientists/9EAYZrtl.jpg differ diff --git a/public/images/docs/scientists/AlHTAdDm.jpg b/public/images/docs/scientists/AlHTAdDm.jpg new file mode 100644 index 000000000..735c29cd5 Binary files /dev/null and b/public/images/docs/scientists/AlHTAdDm.jpg differ diff --git a/public/images/docs/scientists/DgXHVwul.jpg b/public/images/docs/scientists/DgXHVwul.jpg new file mode 100644 index 000000000..a9dba869c Binary files /dev/null and b/public/images/docs/scientists/DgXHVwul.jpg differ diff --git a/public/images/docs/scientists/FJeJR8M.jpg b/public/images/docs/scientists/FJeJR8M.jpg new file mode 100644 index 000000000..433fc3503 Binary files /dev/null and b/public/images/docs/scientists/FJeJR8M.jpg differ diff --git a/public/images/docs/scientists/HMFmH6m.jpg b/public/images/docs/scientists/HMFmH6m.jpg new file mode 100644 index 000000000..ac0a5f6c3 Binary files /dev/null and b/public/images/docs/scientists/HMFmH6m.jpg differ diff --git a/public/images/docs/scientists/IOjWm71s.jpg b/public/images/docs/scientists/IOjWm71s.jpg new file mode 100644 index 000000000..af912e34b Binary files /dev/null and b/public/images/docs/scientists/IOjWm71s.jpg differ diff --git a/public/images/docs/scientists/JBbMpWY.jpg b/public/images/docs/scientists/JBbMpWY.jpg new file mode 100644 index 000000000..a59002bca Binary files /dev/null and b/public/images/docs/scientists/JBbMpWY.jpg differ diff --git a/public/images/docs/scientists/K9HVAGHl.jpg b/public/images/docs/scientists/K9HVAGHl.jpg new file mode 100644 index 000000000..03894f397 Binary files /dev/null and b/public/images/docs/scientists/K9HVAGHl.jpg differ diff --git a/public/images/docs/scientists/MK3eW3Am.jpg b/public/images/docs/scientists/MK3eW3Am.jpg new file mode 100644 index 000000000..53287dd02 Binary files /dev/null and b/public/images/docs/scientists/MK3eW3Am.jpg differ diff --git a/public/images/docs/scientists/MK3eW3As.jpg b/public/images/docs/scientists/MK3eW3As.jpg new file mode 100644 index 000000000..43244d0c5 Binary files /dev/null and b/public/images/docs/scientists/MK3eW3As.jpg differ diff --git a/public/images/docs/scientists/Mx7dA2Y.jpg b/public/images/docs/scientists/Mx7dA2Y.jpg new file mode 100644 index 000000000..ee41fbbaf Binary files /dev/null and b/public/images/docs/scientists/Mx7dA2Y.jpg differ diff --git a/public/images/docs/scientists/OKS67lhb.jpg b/public/images/docs/scientists/OKS67lhb.jpg new file mode 100644 index 000000000..71d2917a7 Binary files /dev/null and b/public/images/docs/scientists/OKS67lhb.jpg differ diff --git a/public/images/docs/scientists/OKS67lhm.jpg b/public/images/docs/scientists/OKS67lhm.jpg new file mode 100644 index 000000000..9fe8f6307 Binary files /dev/null and b/public/images/docs/scientists/OKS67lhm.jpg differ diff --git a/public/images/docs/scientists/OKS67lhs.jpg b/public/images/docs/scientists/OKS67lhs.jpg new file mode 100644 index 000000000..fb3cf212c Binary files /dev/null and b/public/images/docs/scientists/OKS67lhs.jpg differ diff --git a/public/images/docs/scientists/QIrZWGIs.jpg b/public/images/docs/scientists/QIrZWGIs.jpg new file mode 100644 index 000000000..2bfa8ab82 Binary files /dev/null and b/public/images/docs/scientists/QIrZWGIs.jpg differ diff --git a/public/images/docs/scientists/QwUKKmF.jpg b/public/images/docs/scientists/QwUKKmF.jpg new file mode 100644 index 000000000..05aa061ea Binary files /dev/null and b/public/images/docs/scientists/QwUKKmF.jpg differ diff --git a/public/images/docs/scientists/RCwLEoQm.jpg b/public/images/docs/scientists/RCwLEoQm.jpg new file mode 100644 index 000000000..4d7d0b6df Binary files /dev/null and b/public/images/docs/scientists/RCwLEoQm.jpg differ diff --git a/public/images/docs/scientists/Sd1AgUOm.jpg b/public/images/docs/scientists/Sd1AgUOm.jpg new file mode 100644 index 000000000..b81b83d21 Binary files /dev/null and b/public/images/docs/scientists/Sd1AgUOm.jpg differ diff --git a/public/images/docs/scientists/Y3utgTi.jpg b/public/images/docs/scientists/Y3utgTi.jpg new file mode 100644 index 000000000..8d44e4fed Binary files /dev/null and b/public/images/docs/scientists/Y3utgTi.jpg differ diff --git a/public/images/docs/scientists/YfeOqp2b.jpg b/public/images/docs/scientists/YfeOqp2b.jpg new file mode 100644 index 000000000..44e0c65cb Binary files /dev/null and b/public/images/docs/scientists/YfeOqp2b.jpg differ diff --git a/public/images/docs/scientists/YfeOqp2s.jpg b/public/images/docs/scientists/YfeOqp2s.jpg new file mode 100644 index 000000000..19ef15704 Binary files /dev/null and b/public/images/docs/scientists/YfeOqp2s.jpg differ diff --git a/public/images/docs/scientists/ZF6s192.jpg b/public/images/docs/scientists/ZF6s192.jpg new file mode 100644 index 000000000..f50c7e348 Binary files /dev/null and b/public/images/docs/scientists/ZF6s192.jpg differ diff --git a/public/images/docs/scientists/ZF6s192m.jpg b/public/images/docs/scientists/ZF6s192m.jpg new file mode 100644 index 000000000..056f8d52b Binary files /dev/null and b/public/images/docs/scientists/ZF6s192m.jpg differ diff --git a/public/images/docs/scientists/ZfQOOzfl.jpg b/public/images/docs/scientists/ZfQOOzfl.jpg new file mode 100644 index 000000000..5c9e249bd Binary files /dev/null and b/public/images/docs/scientists/ZfQOOzfl.jpg differ diff --git a/public/images/docs/scientists/aTtVpES.jpg b/public/images/docs/scientists/aTtVpES.jpg new file mode 100644 index 000000000..00e09d093 Binary files /dev/null and b/public/images/docs/scientists/aTtVpES.jpg differ diff --git a/public/images/docs/scientists/aeO3rpIl.jpg b/public/images/docs/scientists/aeO3rpIl.jpg new file mode 100644 index 000000000..3b535b072 Binary files /dev/null and b/public/images/docs/scientists/aeO3rpIl.jpg differ diff --git a/public/images/docs/scientists/bE7W1jis.jpg b/public/images/docs/scientists/bE7W1jis.jpg new file mode 100644 index 000000000..a15a897ea Binary files /dev/null and b/public/images/docs/scientists/bE7W1jis.jpg differ diff --git a/public/images/docs/scientists/dB2LRbj.jpg b/public/images/docs/scientists/dB2LRbj.jpg new file mode 100644 index 000000000..f2ac04825 Binary files /dev/null and b/public/images/docs/scientists/dB2LRbj.jpg differ diff --git a/public/images/docs/scientists/jA8hHMpm.jpg b/public/images/docs/scientists/jA8hHMpm.jpg new file mode 100644 index 000000000..ba2168f85 Binary files /dev/null and b/public/images/docs/scientists/jA8hHMpm.jpg differ diff --git a/public/images/docs/scientists/kxsph5Cl.jpg b/public/images/docs/scientists/kxsph5Cl.jpg new file mode 100644 index 000000000..f33360729 Binary files /dev/null and b/public/images/docs/scientists/kxsph5Cl.jpg differ diff --git a/public/images/docs/scientists/lICfvbD.jpg b/public/images/docs/scientists/lICfvbD.jpg new file mode 100644 index 000000000..67393f31e Binary files /dev/null and b/public/images/docs/scientists/lICfvbD.jpg differ diff --git a/public/images/docs/scientists/lrWQx8ls.jpg b/public/images/docs/scientists/lrWQx8ls.jpg new file mode 100644 index 000000000..bc0708bd0 Binary files /dev/null and b/public/images/docs/scientists/lrWQx8ls.jpg differ diff --git a/public/images/docs/scientists/mynHUSas.jpg b/public/images/docs/scientists/mynHUSas.jpg new file mode 100644 index 000000000..e369df8c5 Binary files /dev/null and b/public/images/docs/scientists/mynHUSas.jpg differ diff --git a/public/images/docs/scientists/okTpbHhm.jpg b/public/images/docs/scientists/okTpbHhm.jpg new file mode 100644 index 000000000..a96c5c03c Binary files /dev/null and b/public/images/docs/scientists/okTpbHhm.jpg differ diff --git a/public/images/docs/scientists/rN7hY6om.jpg b/public/images/docs/scientists/rN7hY6om.jpg new file mode 100644 index 000000000..3c7afe1f9 Binary files /dev/null and b/public/images/docs/scientists/rN7hY6om.jpg differ diff --git a/public/images/docs/scientists/rTqKo46l.jpg b/public/images/docs/scientists/rTqKo46l.jpg new file mode 100644 index 000000000..4a0b3dc3b Binary files /dev/null and b/public/images/docs/scientists/rTqKo46l.jpg differ diff --git a/public/images/docs/scientists/szV5sdGb.jpg b/public/images/docs/scientists/szV5sdGb.jpg new file mode 100644 index 000000000..8d6579402 Binary files /dev/null and b/public/images/docs/scientists/szV5sdGb.jpg differ diff --git a/public/images/docs/scientists/szV5sdGs.jpg b/public/images/docs/scientists/szV5sdGs.jpg new file mode 100644 index 000000000..fc3c34260 Binary files /dev/null and b/public/images/docs/scientists/szV5sdGs.jpg differ diff --git a/public/images/docs/scientists/wIdGuZwm.png b/public/images/docs/scientists/wIdGuZwm.png new file mode 100644 index 000000000..5f482def6 Binary files /dev/null and b/public/images/docs/scientists/wIdGuZwm.png differ diff --git a/public/images/docs/scientists/yXOvdOSs.jpg b/public/images/docs/scientists/yXOvdOSs.jpg new file mode 100644 index 000000000..0a3269510 Binary files /dev/null and b/public/images/docs/scientists/yXOvdOSs.jpg differ diff --git a/public/images/docs/scientists/z08o2TS.jpg b/public/images/docs/scientists/z08o2TS.jpg new file mode 100644 index 000000000..42a0a00ef Binary files /dev/null and b/public/images/docs/scientists/z08o2TS.jpg differ diff --git a/public/images/team/andrey-lunyov.jpg b/public/images/team/andrey-lunyov.jpg deleted file mode 100644 index aeaaec06a..000000000 Binary files a/public/images/team/andrey-lunyov.jpg and /dev/null differ diff --git a/public/images/team/hendrik.jpg b/public/images/team/hendrik.jpg new file mode 100644 index 000000000..b39ea5be2 Binary files /dev/null and b/public/images/team/hendrik.jpg differ diff --git a/public/images/team/jordan.jpg b/public/images/team/jordan.jpg new file mode 100644 index 000000000..d8874a29f Binary files /dev/null and b/public/images/team/jordan.jpg differ diff --git a/public/images/team/kathryn-middleton.jpg b/public/images/team/kathryn-middleton.jpg deleted file mode 100644 index 904c3b134..000000000 Binary files a/public/images/team/kathryn-middleton.jpg and /dev/null differ diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg index cb08b9725..a8615aa00 100644 Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ diff --git a/public/images/team/luna-wei.jpg b/public/images/team/luna-wei.jpg deleted file mode 100644 index cdc4a2b6a..000000000 Binary files a/public/images/team/luna-wei.jpg and /dev/null differ diff --git a/public/images/team/mike.jpg b/public/images/team/mike.jpg new file mode 100644 index 000000000..39fe23fea Binary files /dev/null and b/public/images/team/mike.jpg differ diff --git a/public/images/team/noahlemen.jpg b/public/images/team/noahlemen.jpg deleted file mode 100644 index e3f788d89..000000000 Binary files a/public/images/team/noahlemen.jpg and /dev/null differ diff --git a/public/images/team/pieter.jpg b/public/images/team/pieter.jpg new file mode 100644 index 000000000..d098e5abe Binary files /dev/null and b/public/images/team/pieter.jpg differ diff --git a/public/images/team/sam.jpg b/public/images/team/sam.jpg deleted file mode 100644 index f73474b91..000000000 Binary files a/public/images/team/sam.jpg and /dev/null differ diff --git a/public/images/team/sathya.jpg b/public/images/team/sathya.jpg deleted file mode 100644 index 0f087f4a3..000000000 Binary files a/public/images/team/sathya.jpg and /dev/null differ diff --git a/public/images/team/tianyu.jpg b/public/images/team/tianyu.jpg deleted file mode 100644 index aeb6ed9fa..000000000 Binary files a/public/images/team/tianyu.jpg and /dev/null differ diff --git a/public/images/tutorial/react-starter-code-codesandbox.png b/public/images/tutorial/react-starter-code-codesandbox.png old mode 100644 new mode 100755 index d65f161bc..b01e18297 Binary files a/public/images/tutorial/react-starter-code-codesandbox.png and b/public/images/tutorial/react-starter-code-codesandbox.png differ diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js index 006c79c8a..56133855a 100644 --- a/public/js/jsfiddle-integration-babel.js +++ b/public/js/jsfiddle-integration-babel.js @@ -1,15 +1,20 @@ /** - * Copyright (c) Facebook, Inc. and its affiliates. + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ // Do not delete or move this file. // Many fiddles reference it so we have to keep it here. -(function() { +(function () { var tag = document.querySelector( 'script[type="application/javascript;version=1.7"]' ); if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) { - alert('Bad JSFiddle configuration, please fork the original React JSFiddle'); + alert( + 'Bad JSFiddle configuration, please fork the original React JSFiddle' + ); } tag.setAttribute('type', 'text/babel'); tag.textContent = tag.textContent.replace(/^\/\/ { + try { + const result = processFile(file); + if (result != null) { + updatedFiles.set(file, result); + } + } catch (e) { + console.error(e); + hasErrors = true; + } +}); +if (hasErrors) { + console.error('Update failed'); + process.exit(1); +} else { + for (const [file, source] of updatedFiles) { + fs.writeFileSync(file, source, 'utf8'); + } + console.log('Update complete'); +} + +function processFile(file) { + if (fs.lstatSync(file).isDirectory()) { + return; + } + let source = fs.readFileSync(file, 'utf8'); + let shebang = ''; + + if (source.startsWith('#!')) { + const newlineIndex = source.indexOf('\n'); + if (newlineIndex === -1) { + shebang = `${source}\n`; + source = ''; + } else { + shebang = source.slice(0, newlineIndex + 1); + source = source.slice(newlineIndex + 1); + } + } + + if (source.indexOf(META_COPYRIGHT_COMMENT_BLOCK) === 0) { + return null; + } + if (/^\/\*\*/.test(source)) { + source = source.replace(/\/\*\*[^\/]+\/\s+/, META_COPYRIGHT_COMMENT_BLOCK); + } else { + source = `${META_COPYRIGHT_COMMENT_BLOCK}${source}`; + } + + if (shebang) { + return `${shebang}${source}`; + } + return source; +} diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js new file mode 100644 index 000000000..46a21cdc9 --- /dev/null +++ b/scripts/deadLinkChecker.js @@ -0,0 +1,391 @@ +#!/usr/bin/env node +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const fs = require('fs'); +const path = require('path'); +const globby = require('globby'); +const chalk = require('chalk'); + +const CONTENT_DIR = path.join(__dirname, '../src/content'); +const PUBLIC_DIR = path.join(__dirname, '../public'); +const fileCache = new Map(); +const anchorMap = new Map(); // Map> +const contributorMap = new Map(); // Map +const redirectMap = new Map(); // Map +let errorCodes = new Set(); + +async function readFileWithCache(filePath) { + if (!fileCache.has(filePath)) { + try { + const content = await fs.promises.readFile(filePath, 'utf8'); + fileCache.set(filePath, content); + } catch (error) { + throw new Error(`Failed to read file ${filePath}: ${error.message}`); + } + } + return fileCache.get(filePath); +} + +async function fileExists(filePath) { + try { + await fs.promises.access(filePath, fs.constants.R_OK); + return true; + } catch { + return false; + } +} + +function getMarkdownFiles() { + // Convert Windows paths to POSIX for globby compatibility + const baseDir = CONTENT_DIR.replace(/\\/g, '/'); + const patterns = [ + path.posix.join(baseDir, '**/*.md'), + path.posix.join(baseDir, '**/*.mdx'), + ]; + return globby.sync(patterns); +} + +function extractAnchorsFromContent(content) { + const anchors = new Set(); + + // MDX-style heading IDs: {/*anchor-id*/} + const mdxPattern = /\{\/\*([a-zA-Z0-9-_]+)\*\/\}/g; + let match; + while ((match = mdxPattern.exec(content)) !== null) { + anchors.add(match[1].toLowerCase()); + } + + // HTML id attributes + const htmlIdPattern = /\sid=["']([a-zA-Z0-9-_]+)["']/g; + while ((match = htmlIdPattern.exec(content)) !== null) { + anchors.add(match[1].toLowerCase()); + } + + // Markdown heading with explicit ID: ## Heading {#anchor-id} + const markdownHeadingPattern = /^#+\s+.*\{#([a-zA-Z0-9-_]+)\}/gm; + while ((match = markdownHeadingPattern.exec(content)) !== null) { + anchors.add(match[1].toLowerCase()); + } + + return anchors; +} + +async function buildAnchorMap(files) { + for (const filePath of files) { + const content = await readFileWithCache(filePath); + const anchors = extractAnchorsFromContent(content); + if (anchors.size > 0) { + anchorMap.set(filePath, anchors); + } + } +} + +function extractLinksFromContent(content) { + const linkPattern = /\[([^\]]*)\]\(([^)]+)\)/g; + const links = []; + let match; + + while ((match = linkPattern.exec(content)) !== null) { + const [, linkText, linkUrl] = match; + if (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) { + const lines = content.substring(0, match.index).split('\n'); + const line = lines.length; + const lastLineStart = + lines.length > 1 ? content.lastIndexOf('\n', match.index - 1) + 1 : 0; + const column = match.index - lastLineStart + 1; + + links.push({ + text: linkText, + url: linkUrl, + line, + column, + }); + } + } + + return links; +} + +async function findTargetFile(urlPath) { + // Check if it's an image or static asset that might be in the public directory + const imageExtensions = [ + '.png', + '.jpg', + '.jpeg', + '.gif', + '.svg', + '.ico', + '.webp', + ]; + const hasImageExtension = imageExtensions.some((ext) => + urlPath.toLowerCase().endsWith(ext) + ); + + if (hasImageExtension || urlPath.includes('.')) { + // Check in public directory (with and without leading slash) + const publicPaths = [ + path.join(PUBLIC_DIR, urlPath), + path.join(PUBLIC_DIR, urlPath.substring(1)), + ]; + + for (const p of publicPaths) { + if (await fileExists(p)) { + return p; + } + } + } + + const possiblePaths = [ + path.join(CONTENT_DIR, urlPath + '.md'), + path.join(CONTENT_DIR, urlPath + '.mdx'), + path.join(CONTENT_DIR, urlPath, 'index.md'), + path.join(CONTENT_DIR, urlPath, 'index.mdx'), + // Without leading slash + path.join(CONTENT_DIR, urlPath.substring(1) + '.md'), + path.join(CONTENT_DIR, urlPath.substring(1) + '.mdx'), + path.join(CONTENT_DIR, urlPath.substring(1), 'index.md'), + path.join(CONTENT_DIR, urlPath.substring(1), 'index.mdx'), + ]; + + for (const p of possiblePaths) { + if (await fileExists(p)) { + return p; + } + } + return null; +} + +async function validateLink(link) { + const urlAnchorPattern = /#([a-zA-Z0-9-_]+)$/; + const anchorMatch = link.url.match(urlAnchorPattern); + const urlWithoutAnchor = link.url.replace(urlAnchorPattern, ''); + + if (urlWithoutAnchor === '/') { + return {valid: true}; + } + + // Check for redirects + if (redirectMap.has(urlWithoutAnchor)) { + const redirectDestination = redirectMap.get(urlWithoutAnchor); + if ( + redirectDestination.startsWith('http://') || + redirectDestination.startsWith('https://') + ) { + return {valid: true}; + } + const redirectedLink = { + ...link, + url: redirectDestination + (anchorMatch ? anchorMatch[0] : ''), + }; + return validateLink(redirectedLink); + } + + // Check if it's an error code link + const errorCodeMatch = urlWithoutAnchor.match(/^\/errors\/(\d+)$/); + if (errorCodeMatch) { + const code = errorCodeMatch[1]; + if (!errorCodes.has(code)) { + return { + valid: false, + reason: `Error code ${code} not found in React error codes`, + }; + } + return {valid: true}; + } + + // Check if it's a contributor link on the team or acknowledgements page + if ( + anchorMatch && + (urlWithoutAnchor === '/community/team' || + urlWithoutAnchor === '/community/acknowledgements') + ) { + const anchorId = anchorMatch[1].toLowerCase(); + if (contributorMap.has(anchorId)) { + const correctUrl = contributorMap.get(anchorId); + if (correctUrl !== link.url) { + return { + valid: false, + reason: `Contributor link should be updated to: ${correctUrl}`, + }; + } + return {valid: true}; + } else { + return { + valid: false, + reason: `Contributor link not found`, + }; + } + } + + const targetFile = await findTargetFile(urlWithoutAnchor); + + if (!targetFile) { + return { + valid: false, + reason: `Target file not found for: ${urlWithoutAnchor}`, + }; + } + + // Only check anchors for content files, not static assets + if (anchorMatch && targetFile.startsWith(CONTENT_DIR)) { + const anchorId = anchorMatch[1].toLowerCase(); + + // TODO handle more special cases. These are usually from custom MDX components that include + // a Heading from src/components/MDX/Heading.tsx which automatically injects an anchor tag. + switch (anchorId) { + case 'challenges': + case 'recap': { + return {valid: true}; + } + } + + const fileAnchors = anchorMap.get(targetFile); + + if (!fileAnchors || !fileAnchors.has(anchorId)) { + return { + valid: false, + reason: `Anchor #${anchorMatch[1]} not found in ${path.relative( + CONTENT_DIR, + targetFile + )}`, + }; + } + } + + return {valid: true}; +} + +async function processFile(filePath) { + const content = await readFileWithCache(filePath); + const links = extractLinksFromContent(content); + const deadLinks = []; + + for (const link of links) { + const result = await validateLink(link); + if (!result.valid) { + deadLinks.push({ + file: path.relative(process.cwd(), filePath), + line: link.line, + column: link.column, + text: link.text, + url: link.url, + reason: result.reason, + }); + } + } + + return {deadLinks, totalLinks: links.length}; +} + +async function buildContributorMap() { + const teamFile = path.join(CONTENT_DIR, 'community/team.md'); + const teamContent = await readFileWithCache(teamFile); + + const teamMemberPattern = /]*permalink=["']([^"']+)["']/g; + let match; + + while ((match = teamMemberPattern.exec(teamContent)) !== null) { + const permalink = match[1]; + contributorMap.set(permalink, `/community/team#${permalink}`); + } + + const ackFile = path.join(CONTENT_DIR, 'community/acknowledgements.md'); + const ackContent = await readFileWithCache(ackFile); + const contributorPattern = /\*\s*\[([^\]]+)\]\(([^)]+)\)/g; + + while ((match = contributorPattern.exec(ackContent)) !== null) { + const name = match[1]; + const url = match[2]; + const hyphenatedName = name.toLowerCase().replace(/\s+/g, '-'); + if (!contributorMap.has(hyphenatedName)) { + contributorMap.set(hyphenatedName, url); + } + } +} + +async function fetchErrorCodes() { + try { + const response = await fetch( + 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json' + ); + if (!response.ok) { + throw new Error(`Failed to fetch error codes: ${response.status}`); + } + const codes = await response.json(); + errorCodes = new Set(Object.keys(codes)); + console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`)); + } catch (error) { + throw new Error(`Failed to fetch error codes: ${error.message}`); + } +} + +async function buildRedirectsMap() { + try { + const vercelConfigPath = path.join(__dirname, '../vercel.json'); + const vercelConfig = JSON.parse( + await fs.promises.readFile(vercelConfigPath, 'utf8') + ); + + if (vercelConfig.redirects) { + for (const redirect of vercelConfig.redirects) { + redirectMap.set(redirect.source, redirect.destination); + } + console.log( + chalk.gray(`Loaded ${redirectMap.size} redirects from vercel.json`) + ); + } + } catch (error) { + console.log( + chalk.yellow( + `Warning: Could not load redirects from vercel.json: ${error.message}\n` + ) + ); + } +} + +async function main() { + const files = getMarkdownFiles(); + console.log(chalk.gray(`Checking ${files.length} markdown files...`)); + + await fetchErrorCodes(); + await buildRedirectsMap(); + await buildContributorMap(); + await buildAnchorMap(files); + + const filePromises = files.map((filePath) => processFile(filePath)); + const results = await Promise.all(filePromises); + const deadLinks = results.flatMap((r) => r.deadLinks); + const totalLinks = results.reduce((sum, r) => sum + r.totalLinks, 0); + + if (deadLinks.length > 0) { + console.log('\n'); + for (const link of deadLinks) { + console.log(chalk.yellow(`${link.file}:${link.line}:${link.column}`)); + console.log(chalk.reset(` Link text: ${link.text}`)); + console.log(chalk.reset(` URL: ${link.url}`)); + console.log(` ${chalk.red('✗')} ${chalk.red(link.reason)}\n`); + } + + console.log( + chalk.red( + `\nFound ${deadLinks.length} dead link${ + deadLinks.length > 1 ? 's' : '' + } out of ${totalLinks} total links\n` + ) + ); + process.exit(1); + } + + console.log(chalk.green(`\n✓ All ${totalLinks} links are valid!\n`)); + process.exit(0); +} + +main().catch((error) => { + console.log(chalk.red(`Error: ${error.message}`)); + process.exit(1); +}); diff --git a/scripts/generateRss.js b/scripts/generateRss.js index e0f3d5561..3231b1d73 100644 --- a/scripts/generateRss.js +++ b/scripts/generateRss.js @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/scripts/headingIDHelpers/generateHeadingIDs.js b/scripts/headingIDHelpers/generateHeadingIDs.js index 40925d444..79839f513 100644 --- a/scripts/headingIDHelpers/generateHeadingIDs.js +++ b/scripts/headingIDHelpers/generateHeadingIDs.js @@ -1,5 +1,8 @@ /** - * Copyright (c) Facebook, Inc. and its affiliates. + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ // To do: Make this ESM. diff --git a/scripts/headingIDHelpers/validateHeadingIDs.js b/scripts/headingIDHelpers/validateHeadingIDs.js index c3cf1ab8c..798a63e12 100644 --- a/scripts/headingIDHelpers/validateHeadingIDs.js +++ b/scripts/headingIDHelpers/validateHeadingIDs.js @@ -1,6 +1,10 @@ /** - * Copyright (c) Facebook, Inc. and its affiliates. + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ + const fs = require('fs'); const walk = require('./walk'); diff --git a/scripts/headingIDHelpers/walk.js b/scripts/headingIDHelpers/walk.js index 721274e09..f1ed5e0b3 100644 --- a/scripts/headingIDHelpers/walk.js +++ b/scripts/headingIDHelpers/walk.js @@ -1,11 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + const fs = require('fs'); module.exports = function walk(dir) { let results = []; - /** + /** * If the param is a directory we can return the file */ - if(dir.includes('md')){ + if (dir.includes('md')) { return [dir]; } const list = fs.readdirSync(dir); diff --git a/scripts/headingIdLinter.js b/scripts/headingIdLinter.js index 037e4945f..32116752b 100644 --- a/scripts/headingIdLinter.js +++ b/scripts/headingIdLinter.js @@ -1,12 +1,19 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs'); const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs'); -/** +/** * yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file) * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file) -*/ + */ const markdownPaths = process.argv.slice(2); if (markdownPaths.includes('--fix')) { diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index e64b486d1..177af2c56 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 65c0151ba..6b79a958f 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx index 23c971756..bd98d5b38 100644 --- a/src/components/ButtonLink.tsx +++ b/src/components/ButtonLink.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index c4c2dc2f3..db845602f 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -80,7 +87,11 @@ function FooterLink({ />
    +<<<<<<< HEAD {type === 'Next' ? 'Suivant' : 'Précédent'} +======= + {type === 'Previous' ? 'Previous' : 'Next'} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {title} diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx index 080969efe..77e9ebf7d 100644 --- a/src/components/ErrorDecoderContext.tsx +++ b/src/components/ErrorDecoderContext.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + // Error Decoder requires reading pregenerated error message from getStaticProps, // but MDX component doesn't support props. So we use React Context to populate // the value without prop-drilling. diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx index 38b1f2c5f..ccd91fe9c 100644 --- a/src/components/ExternalLink.tsx +++ b/src/components/ExternalLink.tsx @@ -1,13 +1,24 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ +import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react'; export function ExternalLink({ href, target, children, ...props -}: JSX.IntrinsicElements['a']) { +}: DetailedHTMLProps< + AnchorHTMLAttributes, + HTMLAnchorElement +>) { return ( {children} diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx index 714cccd82..2d0b9fecd 100644 --- a/src/components/Icon/IconArrow.tsx +++ b/src/components/Icon/IconArrow.tsx @@ -1,12 +1,20 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; import cn from 'classnames'; +import type {SVGProps} from 'react'; export const IconArrow = memo< - JSX.IntrinsicElements['svg'] & { + SVGProps & { /** * The direction the arrow should point. * `start` and `end` are relative to the current locale. diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index 6653dc387..81301c047 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -1,12 +1,20 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; import cn from 'classnames'; +import type {SVGProps} from 'react'; export const IconArrowSmall = memo< - JSX.IntrinsicElements['svg'] & { + SVGProps & { /** * The direction the arrow should point. * `start` and `end` are relative to the current locale. @@ -18,6 +26,7 @@ export const IconArrowSmall = memo< const classes = cn(className, { 'rotate-180': displayDirection === 'left', 'rotate-180 rtl:rotate-0': displayDirection === 'start', + 'rtl:rotate-180': displayDirection === 'end', 'rotate-90': displayDirection === 'down', }); return ( diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx index 6645152dd..ec930923d 100644 --- a/src/components/Icon/IconBsky.tsx +++ b/src/components/Icon/IconBsky.tsx @@ -1,12 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconBsky = memo(function IconBsky( - props -) { +export const IconBsky = memo>(function IconBsky(props) { return ( (function IconClose( +export const IconClose = memo>(function IconClose( props ) { return ( diff --git a/src/components/Icon/IconCodeBlock.tsx b/src/components/Icon/IconCodeBlock.tsx index 755a2ae34..ba61f237e 100644 --- a/src/components/Icon/IconCodeBlock.tsx +++ b/src/components/Icon/IconCodeBlock.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconCopy.tsx b/src/components/Icon/IconCopy.tsx index 500cd4fda..f62134607 100644 --- a/src/components/Icon/IconCopy.tsx +++ b/src/components/Icon/IconCopy.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconDeepDive.tsx b/src/components/Icon/IconDeepDive.tsx index dfe1a928c..121391f33 100644 --- a/src/components/Icon/IconDeepDive.tsx +++ b/src/components/Icon/IconDeepDive.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconDownload.tsx b/src/components/Icon/IconDownload.tsx index c0e7f49c2..be551d83e 100644 --- a/src/components/Icon/IconDownload.tsx +++ b/src/components/Icon/IconDownload.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconError.tsx b/src/components/Icon/IconError.tsx index f101f62b2..966777fd4 100644 --- a/src/components/Icon/IconError.tsx +++ b/src/components/Icon/IconError.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconExperimental.tsx b/src/components/Icon/IconExperimental.tsx new file mode 100644 index 000000000..c0dce97f4 --- /dev/null +++ b/src/components/Icon/IconExperimental.tsx @@ -0,0 +1,45 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconExperimental = memo< + JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} +>(function IconExperimental( + {className, title, size} = { + className: undefined, + title: undefined, + size: 'md', + } +) { + return ( + + {title && {title}} + + + + + + + ); +}); diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx index 0900d6815..dea2764d5 100644 --- a/src/components/Icon/IconFacebookCircle.tsx +++ b/src/components/Icon/IconFacebookCircle.tsx @@ -1,10 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconFacebookCircle = memo( +export const IconFacebookCircle = memo>( function IconFacebookCircle(props) { return ( ( - function IconGitHub(props) { - return ( - - - - ); - } -); +export const IconGitHub = memo>(function IconGitHub( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx index 5e6aa725a..5ab29fa37 100644 --- a/src/components/Icon/IconHamburger.tsx +++ b/src/components/Icon/IconHamburger.tsx @@ -1,10 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconHamburger = memo( +export const IconHamburger = memo>( function IconHamburger(props) { return ( ( +export const IconInstagram = memo>( function IconInstagram(props) { return ( (function IconLink( - props -) { +export const IconLink = memo>(function IconLink(props) { return ( ( - function IconNewPage(props) { - return ( - - - - - ); - } -); +export const IconNewPage = memo>(function IconNewPage( + props +) { + return ( + + + + + ); +}); diff --git a/src/components/Icon/IconNote.tsx b/src/components/Icon/IconNote.tsx index 1510c91c7..82ed947b4 100644 --- a/src/components/Icon/IconNote.tsx +++ b/src/components/Icon/IconNote.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconPitfall.tsx b/src/components/Icon/IconPitfall.tsx index ee6247891..a80fc7d68 100644 --- a/src/components/Icon/IconPitfall.tsx +++ b/src/components/Icon/IconPitfall.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconRestart.tsx b/src/components/Icon/IconRestart.tsx index b4a6b62f5..976203c65 100644 --- a/src/components/Icon/IconRestart.tsx +++ b/src/components/Icon/IconRestart.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx new file mode 100644 index 000000000..c5bb2473a --- /dev/null +++ b/src/components/Icon/IconRocket.tsx @@ -0,0 +1,39 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconRocket = memo< + JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} +>(function IconRocket({className, size = 'md'}) { + return ( + + ); +}); diff --git a/src/components/Icon/IconRss.tsx b/src/components/Icon/IconRss.tsx index f2a52ee25..13029ec96 100644 --- a/src/components/Icon/IconRss.tsx +++ b/src/components/Icon/IconRss.tsx @@ -1,12 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconRss = memo(function IconRss( - props -) { +export const IconRss = memo>(function IconRss(props) { return ( ( - function IconSearch(props) { - return ( - - - - ); - } -); +export const IconSearch = memo>(function IconSearch( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconSolution.tsx b/src/components/Icon/IconSolution.tsx index 668e41afe..b0f1d44b3 100644 --- a/src/components/Icon/IconSolution.tsx +++ b/src/components/Icon/IconSolution.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconTerminal.tsx b/src/components/Icon/IconTerminal.tsx index 7b3a97a8c..66dfd47b7 100644 --- a/src/components/Icon/IconTerminal.tsx +++ b/src/components/Icon/IconTerminal.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx index 5a007657f..72ded5201 100644 --- a/src/components/Icon/IconThreads.tsx +++ b/src/components/Icon/IconThreads.tsx @@ -1,24 +1,32 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconThreads = memo( - function IconThreads(props) { - return ( - - - - ); - } -); +export const IconThreads = memo>(function IconThreads( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx index e7b0cf09e..01802c253 100644 --- a/src/components/Icon/IconTwitter.tsx +++ b/src/components/Icon/IconTwitter.tsx @@ -1,22 +1,30 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconTwitter = memo( - function IconTwitter(props) { - return ( - - - - - ); - } -); +export const IconTwitter = memo>(function IconTwitter( + props +) { + return ( + + + + + ); +}); diff --git a/src/components/Icon/IconWarning.tsx b/src/components/Icon/IconWarning.tsx index 83534ec5f..90b7cd41e 100644 --- a/src/components/Icon/IconWarning.tsx +++ b/src/components/Icon/IconWarning.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 3042bcb1e..46f6fe2a0 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index bee8f524e..8d5dc31ea 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -249,12 +256,20 @@ export function HomeContent() { avec un framework +<<<<<<< HEAD React est une bibliothèque. Il vous permet d’assembler des composants, mais n’est pas prescriptif en ce qui concerne le routage ou le chargement de données. Pour construire une appli entière avec React, nous vous conseillons un framework React full-stack tels que Next.js{' '} ou Remix. +======= + React is a library. It lets you put components together, but it + doesn’t prescribe how to do routing and data fetching. To build an + entire app with React, we recommend a full-stack React framework + like Next.js or{' '} + React Router. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -272,8 +287,13 @@ export function HomeContent() { Démarrez avec un framework +======= + href="/learn/creating-a-react-app"> + Get started with a framework +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
    @@ -773,9 +793,7 @@ function CommunityGallery() { }, []); return ( -
    +
    - {alt} +
    + {alt} +
    ))} @@ -877,7 +900,8 @@ function ExampleLayout({
    + className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center" + dir="ltr"> {right}
    } right={ - + - + } /> ); diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index e5ba8e992..86f8c5ad5 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -30,7 +37,7 @@ interface PageProps { meta: { title?: string; titleForTitleTag?: string; - canary?: boolean; + version?: 'experimental' | 'canary'; description?: string; }; section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown'; @@ -52,7 +59,7 @@ export function Page({ routeTree ); const title = meta.title || route?.title || ''; - const canary = meta.canary || false; + const version = meta.version; const description = meta.description || route?.description || ''; const isHomePage = cleanedPath === '/'; const isBlogIndex = cleanedPath === '/blog'; @@ -69,7 +76,7 @@ export function Page({ )}> - - - {children} - - + + {children} +
    {!isBlogIndex && ( )} - {/**/} + {/* */} {title}{' '} - {canary && ( + {version === 'major' && ( + + React 19 + + )} + {version === 'canary' && ( + )} + {version === 'experimental' && ( + + )} + {version === 'rc' && ( + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> )}
    diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 3f058073c..863355bfd 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -38,6 +45,7 @@ function CollapseWrapper({ // Disable pointer events while animating. const isExpandedRef = useRef(isExpanded); if (typeof window !== 'undefined') { + // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/rules-of-hooks useLayoutEffect(() => { const wasExpanded = isExpandedRef.current; @@ -87,7 +95,7 @@ export function SidebarRouteTree({ path, title, routes, - canary, + version, heading, hasSectionHeader, sectionHeader, @@ -121,7 +129,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - canary={canary} + version={version} isExpanded={isExpanded} hideArrow={isForceExpanded} /> @@ -145,7 +153,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - canary={canary} + version={version} /> ); diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx index d0e291547..69664e6bc 100644 --- a/src/components/Layout/Sidebar/index.tsx +++ b/src/components/Layout/Sidebar/index.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx index 171270960..678d483c1 100644 --- a/src/components/Layout/SidebarNav/SidebarNav.tsx +++ b/src/components/Layout/SidebarNav/SidebarNav.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -5,7 +12,6 @@ import {Suspense} from 'react'; import * as React from 'react'; import cn from 'classnames'; -import {Feedback} from '../Feedback'; import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree'; import type {RouteItem} from '../getRouteMeta'; @@ -56,9 +62,6 @@ export default function SidebarNav({
    -
    - -
    diff --git a/src/components/Layout/SidebarNav/index.tsx b/src/components/Layout/SidebarNav/index.tsx index b268bbd29..f9680d803 100644 --- a/src/components/Layout/SidebarNav/index.tsx +++ b/src/components/Layout/SidebarNav/index.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index 624d3971b..551e93b95 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Layout/TopNav/BrandMenu.tsx b/src/components/Layout/TopNav/BrandMenu.tsx index 9eb858c63..01ce55985 100644 --- a/src/components/Layout/TopNav/BrandMenu.tsx +++ b/src/components/Layout/TopNav/BrandMenu.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + import * as ContextMenu from '@radix-ui/react-context-menu'; import {IconCopy} from 'components/Icon/IconCopy'; import {IconDownload} from 'components/Icon/IconDownload'; diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index 70a2ce281..1e1fc80bf 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -24,7 +31,11 @@ import {IconSearch} from 'components/Icon/IconSearch'; import {Search} from 'components/Search'; import {siteConfig} from 'siteConfig'; import {Logo} from '../../Logo'; +<<<<<<< HEAD import {Feedback} from '../Feedback'; +======= +import {SidebarRouteTree} from '../Sidebar'; +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a import type {RouteItem} from '../getRouteMeta'; import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree'; import BrandMenu from './BrandMenu'; @@ -267,7 +278,9 @@ export default function TopNav({
    - + logo by @sawaratsuki1004
    -
    - -
    )} diff --git a/src/components/Layout/TopNav/index.tsx b/src/components/Layout/TopNav/index.tsx index 8472fb126..e76fa5ed0 100644 --- a/src/components/Layout/TopNav/index.tsx +++ b/src/components/Layout/TopNav/index.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx index 3564dd738..5a85a3e21 100644 --- a/src/components/Layout/getRouteMeta.tsx +++ b/src/components/Layout/getRouteMeta.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -19,8 +26,8 @@ export type RouteTag = export interface RouteItem { /** Page title (for the sidebar) */ title: string; - /** Optional canary flag for heading */ - canary?: boolean; + /** Optional version flag for heading */ + version?: 'canary' | 'major'; /** Optional page description for heading */ description?: string; /* Additional meta info for page tagging */ diff --git a/src/components/Layout/useTocHighlight.tsx b/src/components/Layout/useTocHighlight.tsx index 544396c68..02385409f 100644 --- a/src/components/Layout/useTocHighlight.tsx +++ b/src/components/Layout/useTocHighlight.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index 07e72c992..3ea4ba9ac 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,8 +1,16 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ +import type {SVGProps} from 'react'; -export function Logo(props: JSX.IntrinsicElements['svg']) { +export function Logo(props: SVGProps) { return ( = {}; let content: React.ReactElement[] = []; Children.forEach(children, (child) => { - const {props, type} = child; + const {props, type} = child as React.ReactElement<{ + children?: string; + id?: string; + }>; switch ((type as any).mdxName) { case 'Solution': { challenge.solution = child; diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx index 3eda3c3e3..c6b9c1634 100644 --- a/src/components/MDX/Challenges/Navigation.tsx +++ b/src/components/MDX/Challenges/Navigation.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -108,7 +115,7 @@ export function Navigation({ onClick={handleScrollLeft} aria-label="Défiler vers la gauche" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0', { 'text-primary dark:text-primary-dark': canScrollLeft, 'text-gray-30': !canScrollLeft, @@ -120,7 +127,7 @@ export function Navigation({ onClick={handleScrollRight} aria-label="Défiler vers la droite" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e', { 'text-primary dark:text-primary-dark': canScrollRight, 'text-gray-30': !canScrollRight, diff --git a/src/components/MDX/Challenges/index.tsx b/src/components/MDX/Challenges/index.tsx index 413fd4611..27e3df1ef 100644 --- a/src/components/MDX/Challenges/index.tsx +++ b/src/components/MDX/Challenges/index.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx index 7eef0abe8..3eeac3945 100644 --- a/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -289,7 +296,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle { function getLineDecorators( code: string, - meta: string + meta?: string ): Array<{ line: number; className: string; @@ -309,7 +316,7 @@ function getLineDecorators( function getInlineDecorators( code: string, - meta: string + meta?: string ): Array<{ step: number; line: number; @@ -336,6 +343,7 @@ function getInlineDecorators( line.step === 3, 'bg-green-40 border-green-40 text-green-60 dark:text-green-30': line.step === 4, + // TODO: Some codeblocks use up to 6 steps. } ), }) diff --git a/src/components/MDX/CodeBlock/index.tsx b/src/components/MDX/CodeBlock/index.tsx index 551c1d1b6..d3ed3a065 100644 --- a/src/components/MDX/CodeBlock/index.tsx +++ b/src/components/MDX/CodeBlock/index.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/CodeDiagram.tsx b/src/components/MDX/CodeDiagram.tsx index 7a503f068..ba18ae973 100644 --- a/src/components/MDX/CodeDiagram.tsx +++ b/src/components/MDX/CodeDiagram.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -17,7 +24,14 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) { }); const content = Children.toArray(children).map((child: any) => { if (child.type?.mdxName === 'pre') { - return ; + return ( + + ); } else if (child.type === 'img') { return null; } else { diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx index 6e704b417..1847abc5c 100644 --- a/src/components/MDX/ConsoleBlock.tsx +++ b/src/components/MDX/ConsoleBlock.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -38,7 +45,8 @@ export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { if (typeof children === 'string') { message = children; } else if (isValidElement(children)) { - message = children.props.children; + message = (children as React.ReactElement<{children?: React.ReactNode}>) + .props.children; } return ( @@ -113,7 +121,8 @@ export function ConsoleLogLine({children, level}: ConsoleBlockProps) { if (typeof children === 'string') { message = children; } else if (isValidElement(children)) { - message = children.props.children; + message = (children as React.ReactElement<{children?: React.ReactNode}>) + .props.children; } else if (Array.isArray(children)) { message = children.reduce((result, child) => { if (typeof child === 'string') { diff --git a/src/components/MDX/Diagram.tsx b/src/components/MDX/Diagram.tsx index 649f48dff..579c86ebe 100644 --- a/src/components/MDX/Diagram.tsx +++ b/src/components/MDX/Diagram.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/DiagramGroup.tsx b/src/components/MDX/DiagramGroup.tsx index 6c5130a3d..8e3bf46c3 100644 --- a/src/components/MDX/DiagramGroup.tsx +++ b/src/components/MDX/DiagramGroup.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx index 198aa939d..423790198 100644 --- a/src/components/MDX/ErrorDecoder.tsx +++ b/src/components/MDX/ErrorDecoder.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + import {useEffect, useState} from 'react'; import {useErrorDecoderParams} from '../ErrorDecoderContext'; import cn from 'classnames'; @@ -11,7 +18,7 @@ function replaceArgs( return msg.replace(/%s/g, function () { const arg = argList[argIdx++]; // arg can be an empty string: ?args[0]=&args[1]=count - return arg === undefined || arg === '' ? replacer : arg; + return arg === undefined ? replacer : arg; }); } @@ -69,7 +76,7 @@ function parseQueryString(search: string): Array { } export default function ErrorDecoder() { - const {errorMessage} = useErrorDecoderParams(); + const {errorMessage, errorCode} = useErrorDecoderParams(); /** error messages that contain %s require reading location.search */ const hasParams = errorMessage?.includes('%s'); const [message, setMessage] = useState(() => @@ -82,23 +89,28 @@ export default function ErrorDecoder() { if (errorMessage == null || !hasParams) { return; } + const args = parseQueryString(window.location.search); + let message = errorMessage; + if (errorCode === '418') { + // Hydration errors have a %s for the diff, but we don't add that to the args for security reasons. + message = message.replace(/%s$/, ''); + + // Before React 19.1, the error message didn't have an arg, and was always HTML. + if (args.length === 0) { + args.push('HTML'); + } else if (args.length === 1 && args[0] === '') { + args[0] = 'HTML'; + } + } - setMessage( - urlify( - replaceArgs( - errorMessage, - parseQueryString(window.location.search), - '[missing argument]' - ) - ) - ); + setMessage(urlify(replaceArgs(message, args, '[missing argument]'))); setIsReady(true); - }, [hasParams, errorMessage]); + }, [errorCode, hasParams, errorMessage]); return ( {message} diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 5212aa9bd..d8c8b5383 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -8,8 +15,18 @@ import {IconNote} from '../Icon/IconNote'; import {IconWarning} from '../Icon/IconWarning'; import {IconPitfall} from '../Icon/IconPitfall'; import {IconCanary} from '../Icon/IconCanary'; +import {IconRocket} from '../Icon/IconRocket'; -type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary'; +type CalloutVariants = + | 'deprecated' + | 'pitfall' + | 'note' + | 'wip' + | 'canary' + | 'experimental' + | 'rc' + | 'major' + | 'rsc'; interface ExpandableCalloutProps { children: React.ReactNode; @@ -34,6 +51,15 @@ const variantMap = { overlayGradient: 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', }, + rc: { + title: 'RC', + Icon: IconCanary, + containerClasses: + 'bg-gray-5 dark:bg-gray-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', + textColor: 'text-gray-60 dark:text-gray-30', + overlayGradient: + 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', + }, canary: { title: 'Canary (fonctionnalité expérimentale)', Icon: IconCanary, @@ -43,6 +69,15 @@ const variantMap = { overlayGradient: 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', }, + experimental: { + title: 'Experimental Feature', + Icon: IconCanary, + containerClasses: + 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', + textColor: 'text-green-60 dark:text-green-40', + overlayGradient: + 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', + }, pitfall: { title: 'Piège', Icon: IconPitfall, @@ -59,6 +94,22 @@ const variantMap = { overlayGradient: 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, + major: { + title: 'React 19', + Icon: IconRocket, + containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20', + textColor: 'text-blue-50 dark:text-blue-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, + rsc: { + title: 'React Server Components', + Icon: null, + containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20', + textColor: 'text-blue-50 dark:text-blue-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, }; function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { @@ -72,9 +123,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { variant.containerClasses )}>

    - + {variant.Icon && ( + + )} {variant.title}

    diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index c26cc3f45..c835190bf 100644 --- a/src/components/MDX/ExpandableExample.tsx +++ b/src/components/MDX/ExpandableExample.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx index a9f3efc38..5890a3a48 100644 --- a/src/components/MDX/Heading.tsx +++ b/src/components/MDX/Heading.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx index 0e8db0165..17e4683b9 100644 --- a/src/components/MDX/InlineCode.tsx +++ b/src/components/MDX/InlineCode.tsx @@ -1,8 +1,16 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import cn from 'classnames'; +import type {HTMLAttributes} from 'react'; interface InlineCodeProps { isLink?: boolean; @@ -11,7 +19,7 @@ interface InlineCodeProps { function InlineCode({ isLink, ...props -}: JSX.IntrinsicElements['code'] & InlineCodeProps) { +}: HTMLAttributes & InlineCodeProps) { return ( in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()` diff --git a/src/components/MDX/Intro.tsx b/src/components/MDX/Intro.tsx index 0522df678..b0bee624d 100644 --- a/src/components/MDX/Intro.tsx +++ b/src/components/MDX/Intro.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/LanguagesContext.tsx b/src/components/MDX/LanguagesContext.tsx index 776a11c0d..cd9f88816 100644 --- a/src/components/MDX/LanguagesContext.tsx +++ b/src/components/MDX/LanguagesContext.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx index 7bf041e56..8a47c401f 100644 --- a/src/components/MDX/Link.tsx +++ b/src/components/MDX/Link.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index a6dfdfd31..da8591e07 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -5,6 +12,7 @@ import {Children, useContext, useMemo} from 'react'; import * as React from 'react'; import cn from 'classnames'; +import type {HTMLAttributes} from 'react'; import CodeBlock from './CodeBlock'; import {CodeDiagram} from './CodeDiagram'; @@ -18,7 +26,7 @@ import BlogCard from './BlogCard'; import Link from './Link'; import {PackageImport} from './PackageImport'; import Recap from './Recap'; -import Sandpack from './Sandpack'; +import {SandpackClient as Sandpack, SandpackRSC} from './Sandpack'; import SandpackWithHTMLOutput from './SandpackWithHTMLOutput'; import Diagram from './Diagram'; import DiagramGroup from './DiagramGroup'; @@ -36,6 +44,7 @@ import {finishedTranslations} from 'utils/finishedTranslations'; import ErrorDecoder from './ErrorDecoder'; import {IconCanary} from '../Icon/IconCanary'; +import {IconExperimental} from 'components/Icon/IconExperimental'; function CodeStep({children, step}: {children: any; step: number}) { return ( @@ -59,21 +68,31 @@ function CodeStep({children, step}: {children: any; step: number}) { ); } +<<<<<<< HEAD const P = (p: JSX.IntrinsicElements['p']) => (

    +======= +const P = (p: HTMLAttributes) => ( +

    +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ); -const Strong = (strong: JSX.IntrinsicElements['strong']) => ( +const Strong = (strong: HTMLAttributes) => ( ); -const OL = (p: JSX.IntrinsicElements['ol']) => ( +const OL = (p: HTMLAttributes) => (

      ); +<<<<<<< HEAD const LI = (p: JSX.IntrinsicElements['li']) => (
    1. +======= +const LI = (p: HTMLAttributes) => ( +
    2. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ); -const UL = (p: JSX.IntrinsicElements['ul']) => ( +const UL = (p: HTMLAttributes) => (
        ); @@ -97,6 +116,22 @@ const Canary = ({children}: {children: React.ReactNode}) => ( {children} ); +const RC = ({children}: {children: React.ReactNode}) => ( + {children} +); + +const Experimental = ({children}: {children: React.ReactNode}) => ( + {children} +); + +const NextMajor = ({children}: {children: React.ReactNode}) => ( + {children} +); + +const RSC = ({children}: {children: React.ReactNode}) => ( + {children} +); + const CanaryBadge = ({title}: {title: string}) => ( ( ); -const Blockquote = ({ - children, - ...props -}: JSX.IntrinsicElements['blockquote']) => { +const ExperimentalBadge = ({title}: {title: string}) => ( + + + Experimental only + +); + +const NextMajorBadge = ({title}: {title: string}) => ( + + React 19 + +); + +const RSCBadge = ({title}: {title: string}) => ( + + RSC + +); + +const Blockquote = ({children, ...props}: HTMLAttributes) => { return (
        )); return ( - +
        {sequential ? (
          @@ -325,7 +391,7 @@ function IllustrationBlock({ )}
        -         + ); } @@ -491,13 +557,21 @@ export const MDXComponents = { Math, MathI, Note, + RC, Canary, + Experimental, + ExperimentalBadge, CanaryBadge, + NextMajor, + NextMajorBadge, + RSC, + RSCBadge, PackageImport, ReadBlogPost, Recap, Recipes, Sandpack, + SandpackRSC, SandpackWithHTMLOutput, TeamMember, TerminalBlock, diff --git a/src/components/MDX/PackageImport.tsx b/src/components/MDX/PackageImport.tsx index 5e2da820e..222353ff5 100644 --- a/src/components/MDX/PackageImport.tsx +++ b/src/components/MDX/PackageImport.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/Recap.tsx b/src/components/MDX/Recap.tsx index aed0a2244..7efe87963 100644 --- a/src/components/MDX/Recap.tsx +++ b/src/components/MDX/Recap.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx new file mode 100644 index 000000000..be7451ab3 --- /dev/null +++ b/src/components/MDX/Sandpack/ClearButton.tsx @@ -0,0 +1,29 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import {IconClose} from '../../Icon/IconClose'; +export interface ClearButtonProps { + onClear: () => void; +} + +export function ClearButton({onClear}: ClearButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx index b5276fc13..625b1c365 100644 --- a/src/components/MDX/Sandpack/Console.tsx +++ b/src/components/MDX/Sandpack/Console.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -112,7 +119,7 @@ export const SandpackConsole = ({visible}: {visible: boolean}) => { setLogs((prev) => { const newLogs = message.log .filter((consoleData) => { - if (!consoleData.method) { + if (!consoleData.method || !consoleData.data) { return false; } if ( diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx index 561cd21da..46716bef8 100644 --- a/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/src/components/MDX/Sandpack/CustomPreset.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -19,8 +26,10 @@ import {useSandpackLint} from './useSandpackLint'; export const CustomPreset = memo(function CustomPreset({ providedFiles, + showOpenInCodeSandbox = true, }: { providedFiles: Array; + showOpenInCodeSandbox?: boolean; }) { const {lintErrors, lintExtensions} = useSandpackLint(); const {sandpack} = useSandpack(); @@ -28,6 +37,7 @@ export const CustomPreset = memo(function CustomPreset({ const {activeFile} = sandpack; const lineCountRef = useRef<{[key: string]: number}>({}); if (!lineCountRef.current[activeFile]) { + // eslint-disable-next-line react-compiler/react-compiler lineCountRef.current[activeFile] = code.split('\n').length; } const lineCount = lineCountRef.current[activeFile]; @@ -38,6 +48,7 @@ export const CustomPreset = memo(function CustomPreset({ lintErrors={lintErrors} lintExtensions={lintExtensions} isExpandable={isExpandable} + showOpenInCodeSandbox={showOpenInCodeSandbox} /> ); }); @@ -47,11 +58,13 @@ const SandboxShell = memo(function SandboxShell({ lintErrors, lintExtensions, isExpandable, + showOpenInCodeSandbox, }: { providedFiles: Array; lintErrors: Array; lintExtensions: Array; isExpandable: boolean; + showOpenInCodeSandbox: boolean; }) { const containerRef = useRef(null); const [isExpanded, setIsExpanded] = useState(false); @@ -63,7 +76,10 @@ const SandboxShell = memo(function SandboxShell({ style={{ contain: 'content', }}> - + ): JSX.Element | null => { +} & React.HTMLAttributes): React.ReactNode | null => { const loadingOverlayState = useLoadingOverlayState( clientId, dependenciesLoading, @@ -64,6 +71,7 @@ export const LoadingOverlay = ({ transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`, }}>
        + {/* @ts-ignore: the OpenInCodeSandboxButton type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
        diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index 8662c92f0..4598f1a0b 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -17,7 +24,8 @@ import { useSandpackNavigation, } from '@codesandbox/sandpack-react/unstyled'; import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; -import {ResetButton} from './ResetButton'; +import {ReloadButton} from './ReloadButton'; +import {ClearButton} from './ClearButton'; import {DownloadButton} from './DownloadButton'; import {IconChevron} from '../../Icon/IconChevron'; import {Listbox} from '@headlessui/react'; @@ -40,7 +48,13 @@ const getFileName = (filePath: string): string => { return filePath.slice(lastIndexOfSlash + 1); }; -export function NavigationBar({providedFiles}: {providedFiles: Array}) { +export function NavigationBar({ + providedFiles, + showOpenInCodeSandbox = true, +}: { + providedFiles: Array; + showOpenInCodeSandbox?: boolean; +}) { const {sandpack} = useSandpack(); const containerRef = useRef(null); const tabsRef = useRef(null); @@ -95,7 +109,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // Note: in a real useEvent, onContainerResize would be omitted. }, [isMultiFile, onContainerResize]); - const handleReset = () => { + const handleClear = () => { /** * resetAllFiles must come first, otherwise * the previous content will appear for a second @@ -103,19 +117,29 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { * * Plus, it should only prompt if there's any file changes */ +<<<<<<< HEAD if ( sandpack.editorState === 'dirty' && confirm('Effacer vos modifications aussi ?') ) { +======= + if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) { +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a sandpack.resetAllFiles(); } + refresh(); + }; + const handleReload = () => { refresh(); }; return (
        + {/* If Prettier reformats this block, the two @ts-ignore directives will no longer be adjacent to the problematic lines, causing TypeScript errors */} + {/* prettier-ignore */}
        + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
        @@ -129,8 +153,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { 'w-[fit-content]', showDropdown ? 'invisible' : '' )}> + {/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
        + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} {({open}) => ( // If tabs don't fit, display the dropdown instead. @@ -160,10 +186,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
        - {isMultiFile && showDropdown && ( - - {visibleFiles.map((filePath: string) => ( - + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} + {isMultiFile && showDropdown && ( + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} + {visibleFiles.map((filePath: string) => ( {({active}) => (
      • }) { className="px-3 flex items-center justify-end text-start" translate="yes"> - - + + + {showOpenInCodeSandbox && } {activeFile.endsWith('.tsx') && ( void; +} + +export function ReloadButton({onReload}: ReloadButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/SandpackRSCRoot.tsx b/src/components/MDX/Sandpack/SandpackRSCRoot.tsx new file mode 100644 index 000000000..1c9bd0582 --- /dev/null +++ b/src/components/MDX/Sandpack/SandpackRSCRoot.tsx @@ -0,0 +1,119 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {Children} from 'react'; +import * as React from 'react'; +import {SandpackProvider} from '@codesandbox/sandpack-react/unstyled'; +import {SandpackLogLevel} from '@codesandbox/sandpack-client'; +import {CustomPreset} from './CustomPreset'; +import {createFileMap} from './createFileMap'; +import {CustomTheme} from './Themes'; +import {templateRSC} from './templateRSC'; +import {RscFileBridge} from './sandpack-rsc/RscFileBridge'; + +type SandpackProps = { + children: React.ReactNode; + autorun?: boolean; +}; + +const sandboxStyle = ` +* { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + margin: 20px; + padding: 0; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} +`.trim(); + +function SandpackRSCRoot(props: SandpackProps) { + const {children, autorun = true} = props; + const codeSnippets = Children.toArray(children) as React.ReactElement[]; + const files = createFileMap(codeSnippets); + + if ('/index.html' in files) { + throw new Error( + 'You cannot use `index.html` file in sandboxes. ' + + 'Only `public/index.html` is respected by Sandpack and CodeSandbox (where forks are created).' + ); + } + + files['/src/styles.css'] = { + code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'), + hidden: !files['/src/styles.css']?.visible, + }; + + return ( +
        + + + + +
        + ); +} + +export default SandpackRSCRoot; diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index a47fa6860..48d8daee5 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -71,6 +78,13 @@ function SandpackRoot(props: SandpackProps) { const codeSnippets = Children.toArray(children) as React.ReactElement[]; const files = createFileMap(codeSnippets); + if ('/index.html' in files) { + throw new Error( + 'You cannot use `index.html` file in sandboxes. ' + + 'Only `public/index.html` is respected by Sandpack and CodeSandbox (where forks are created).' + ); + } + files['/src/styles.css'] = { code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'), hidden: !files['/src/styles.css']?.visible, diff --git a/src/components/MDX/Sandpack/Themes.tsx b/src/components/MDX/Sandpack/Themes.tsx index 3923470ca..8aa34dc95 100644 --- a/src/components/MDX/Sandpack/Themes.tsx +++ b/src/components/MDX/Sandpack/Themes.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/Sandpack/createFileMap.ts b/src/components/MDX/Sandpack/createFileMap.ts index 615d34c9a..049face93 100644 --- a/src/components/MDX/Sandpack/createFileMap.ts +++ b/src/components/MDX/Sandpack/createFileMap.ts @@ -1,13 +1,81 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import type {SandpackFile} from '@codesandbox/sandpack-react/unstyled'; +import type {PropsWithChildren, ReactElement, HTMLAttributes} from 'react'; export const AppJSPath = `/src/App.js`; export const StylesCSSPath = `/src/styles.css`; export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath]; +/** + * Tokenize meta attributes while ignoring brace-wrapped metadata (e.g. {expectedErrors: …}). + */ +function splitMeta(meta: string): string[] { + const tokens: string[] = []; + let current = ''; + let depth = 0; + const trimmed = meta.trim(); + + for (let ii = 0; ii < trimmed.length; ii++) { + const char = trimmed[ii]; + + if (char === '{') { + if (depth === 0 && current) { + tokens.push(current); + current = ''; + } + depth += 1; + continue; + } + + if (char === '}') { + if (depth > 0) { + depth -= 1; + } + if (depth === 0) { + current = ''; + } + if (depth < 0) { + throw new Error(`Unexpected closing brace in meta: ${meta}`); + } + continue; + } + + if (depth > 0) { + continue; + } + + if (/\s/.test(char)) { + if (current) { + tokens.push(current); + current = ''; + } + continue; + } + + current += char; + } + + if (current) { + tokens.push(current); + } + + if (depth !== 0) { + throw new Error(`Unclosed brace in meta: ${meta}`); + } + + return tokens; +} + export const createFileMap = (codeSnippets: any) => { return codeSnippets.reduce( (result: Record, codeSnippet: React.ReactElement) => { @@ -17,18 +85,29 @@ export const createFileMap = (codeSnippets: any) => { ) { return result; } - const {props} = codeSnippet.props.children; + const {props} = ( + codeSnippet.props as PropsWithChildren<{ + children: ReactElement< + HTMLAttributes & {meta?: string} + >; + }> + ).children; let filePath; // path in the folder structure let fileHidden = false; // if the file is available as a tab let fileActive = false; // if the file tab is shown by default if (props.meta) { - const [name, ...params] = props.meta.split(' '); - filePath = '/' + name; - if (params.includes('hidden')) { + const tokens = splitMeta(props.meta); + const name = tokens.find( + (token) => token.includes('/') || token.includes('.') + ); + if (name) { + filePath = name.startsWith('/') ? name : `/${name}`; + } + if (tokens.includes('hidden')) { fileHidden = true; } - if (params.includes('active')) { + if (tokens.includes('active')) { fileActive = true; } } else { @@ -43,6 +122,18 @@ export const createFileMap = (codeSnippets: any) => { } } + if (!filePath) { + if (props.className === 'language-js') { + filePath = AppJSPath; + } else if (props.className === 'language-css') { + filePath = StylesCSSPath; + } else { + throw new Error( + `Code block is missing a filename: ${props.children}` + ); + } + } + if (result[filePath]) { throw new Error( `File ${filePath} was defined multiple times. Each file snippet should have a unique path name` diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx index 6755ba8de..a8b802cec 100644 --- a/src/components/MDX/Sandpack/index.tsx +++ b/src/components/MDX/Sandpack/index.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -45,7 +52,7 @@ const SandpackGlimmer = ({code}: {code: string}) => (
        • ); -export default memo(function SandpackWrapper(props: any): any { +export const SandpackClient = memo(function SandpackWrapper(props: any): any { const codeSnippet = createFileMap(Children.toArray(props.children)); // To set the active file in the fallback we have to find the active file first. @@ -68,3 +75,31 @@ export default memo(function SandpackWrapper(props: any): any { ); }); + +const SandpackRSCRoot = lazy(() => import('./SandpackRSCRoot')); + +export const SandpackRSC = memo(function SandpackRSCWrapper(props: { + children: React.ReactNode; +}): any { + const codeSnippet = createFileMap(Children.toArray(props.children)); + + // To set the active file in the fallback we have to find the active file first. + // If there are no active files we fallback to App.js as default. + let activeCodeSnippet = Object.keys(codeSnippet).filter( + (fileName) => + codeSnippet[fileName]?.active === true && + codeSnippet[fileName]?.hidden === false + ); + let activeCode; + if (!activeCodeSnippet.length) { + activeCode = codeSnippet[AppJSPath]?.code ?? ''; + } else { + activeCode = codeSnippet[activeCodeSnippet[0]].code; + } + + return ( + }> + {props.children} + + ); +}); diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx index 5fea2f110..667b22d7e 100644 --- a/src/components/MDX/Sandpack/runESLint.tsx +++ b/src/components/MDX/Sandpack/runESLint.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + // @ts-nocheck import {Linter} from 'eslint/lib/linter/linter'; @@ -14,13 +21,6 @@ const getCodeMirrorPosition = ( const linter = new Linter(); -// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop. -// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`. -// This hack places the functions in the right place. -const esquery = require('esquery'); -esquery.parse = esquery.default?.parse; -esquery.matches = esquery.default?.matches; - const reactRules = require('eslint-plugin-react-hooks').rules; linter.defineRules({ 'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'], diff --git a/src/components/MDX/Sandpack/sandpack-rsc/RscFileBridge.tsx b/src/components/MDX/Sandpack/sandpack-rsc/RscFileBridge.tsx new file mode 100644 index 000000000..cca545a40 --- /dev/null +++ b/src/components/MDX/Sandpack/sandpack-rsc/RscFileBridge.tsx @@ -0,0 +1,40 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {useEffect, useRef} from 'react'; +import {useSandpack} from '@codesandbox/sandpack-react/unstyled'; + +/** + * Bridges file contents from the Sandpack editor to the RSC client entry + * running inside the iframe. When the Sandpack bundler finishes compiling, + * reads all raw file contents and posts them to the iframe via postMessage. + */ +export function RscFileBridge() { + const {sandpack, dispatch, listen} = useSandpack(); + const filesRef = useRef(sandpack.files); + + // TODO: fix this with useEffectEvent + // eslint-disable-next-line react-compiler/react-compiler + filesRef.current = sandpack.files; + + useEffect(() => { + const unsubscribe = listen((msg: any) => { + if (msg.type !== 'done') return; + + const files: Record = {}; + for (const [path, file] of Object.entries(filesRef.current)) { + files[path] = file.code; + } + + dispatch({type: 'rsc-file-update', files} as any); + }); + + return unsubscribe; + }, [dispatch, listen]); + + return null; +} diff --git a/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/__react_refresh_init__.js b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/__react_refresh_init__.js new file mode 100644 index 000000000..8d0efa9d0 --- /dev/null +++ b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/__react_refresh_init__.js @@ -0,0 +1,17 @@ +// Must run before React loads. Creates __REACT_DEVTOOLS_GLOBAL_HOOK__ so +// React's renderer injects into it, enabling react-refresh to work. +if (typeof window !== 'undefined' && !window.__REACT_DEVTOOLS_GLOBAL_HOOK__) { + var nextID = 0; + window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { + renderers: new Map(), + supportsFiber: true, + inject: function (injected) { + var id = nextID++; + this.renderers.set(id, injected); + return id; + }, + onScheduleFiberRoot: function () {}, + onCommitFiberRoot: function () {}, + onCommitFiberUnmount: function () {}, + }; +} diff --git a/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-client.js b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-client.js new file mode 100644 index 000000000..ed41755ed --- /dev/null +++ b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-client.js @@ -0,0 +1,381 @@ +// RSC Client Entry Point +// Runs inside the Sandpack iframe. Orchestrates the RSC pipeline: +// 1. Creates a Web Worker from pre-bundled server runtime +// 2. Receives file updates from parent (RscFileBridge) via postMessage +// 3. Sends all user files to Worker for directive detection + compilation +// 4. Worker compiles with Sucrase + executes, sends back Flight chunks +// 5. Renders the Flight stream result with React + +// Minimal webpack shim for RSDW compatibility. +// Works in both browser (window) and worker (self) contexts via globalThis. + +import * as React from 'react'; +import * as ReactJSXRuntime from 'react/jsx-runtime'; +import * as ReactJSXDevRuntime from 'react/jsx-dev-runtime'; +import {useState, startTransition, use} from 'react'; +import {jsx} from 'react/jsx-runtime'; +import {createRoot} from 'react-dom/client'; + +import rscServerForWorker from './rsc-server.js'; + +import './__webpack_shim__'; +import { + createFromReadableStream, + encodeReply, +} from 'react-server-dom-webpack/client.browser'; + +import { + injectIntoGlobalHook, + register as refreshRegister, + performReactRefresh, + isLikelyComponentType, +} from 'react-refresh/runtime'; + +// Patch the DevTools hook to capture renderer helpers and track roots. +// Must run after react-dom evaluates (injects renderer) but before createRoot(). +injectIntoGlobalHook(window); + +export function initClient() { + // Create Worker from pre-bundled server runtime + var blob = new Blob([rscServerForWorker], {type: 'application/javascript'}); + var workerUrl = URL.createObjectURL(blob); + var worker = new Worker(workerUrl); + + // Render tracking + var nextStreamId = 0; + var chunkControllers = {}; + var setCurrentPromise; + var firstRender = true; + var workerReady = false; + var pendingFiles = null; + + function Root({initialPromise}) { + var _state = useState(initialPromise); + setCurrentPromise = _state[1]; + return use(_state[0]); + } + + // Set up React root + var initialResolve; + var initialPromise = new Promise(function (resolve) { + initialResolve = resolve; + }); + + var rootEl = document.getElementById('root'); + if (!rootEl) throw new Error('#root element not found'); + var root = createRoot(rootEl, { + onUncaughtError: function (error) { + var msg = + error && error.digest + ? error.digest + : error && error.message + ? error.message + : String(error); + console.error(msg); + showError(msg); + }, + }); + startTransition(function () { + root.render(jsx(Root, {initialPromise: initialPromise})); + }); + + // Error overlay — rendered inside the iframe via DOM so it doesn't + // interfere with Sandpack's parent-frame message protocol. + function showError(message) { + var overlay = document.getElementById('rsc-error-overlay'); + if (!overlay) { + overlay = document.createElement('div'); + overlay.id = 'rsc-error-overlay'; + overlay.style.cssText = + 'background:#fff;border:2px solid #c00;border-radius:8px;padding:16px;margin:20px;font-family:sans-serif;'; + var heading = document.createElement('h2'); + heading.style.cssText = 'color:#c00;margin:0 0 8px;font-size:16px;'; + heading.textContent = 'Server Error'; + overlay.appendChild(heading); + var pre = document.createElement('pre'); + pre.style.cssText = + 'margin:0;white-space:pre-wrap;word-break:break-word;font-size:14px;color:#222;'; + overlay.appendChild(pre); + rootEl.parentNode.insertBefore(overlay, rootEl); + } + overlay.lastChild.textContent = message; + overlay.style.display = ''; + rootEl.style.display = 'none'; + } + + function clearError() { + var overlay = document.getElementById('rsc-error-overlay'); + if (overlay) overlay.style.display = 'none'; + rootEl.style.display = ''; + } + + // Worker message handler + worker.onmessage = function (e) { + var msg = e.data; + if (msg.type === 'ready') { + workerReady = true; + if (pendingFiles) { + processFiles(pendingFiles); + pendingFiles = null; + } + } else if (msg.type === 'deploy-result') { + clearError(); + // Register compiled client modules in the webpack cache before rendering + if (msg.result && msg.result.compiledClients) { + registerClientModules( + msg.result.compiledClients, + msg.result.clientEntries || {} + ); + } + triggerRender(); + } else if (msg.type === 'rsc-chunk') { + handleChunk(msg); + } else if (msg.type === 'rsc-error') { + showError(msg.error); + } + }; + + function callServer(id, args) { + return encodeReply(args).then(function (body) { + nextStreamId++; + var reqId = nextStreamId; + + var stream = new ReadableStream({ + start: function (controller) { + chunkControllers[reqId] = controller; + }, + }); + + // FormData is not structured-cloneable for postMessage. + // Serialize to an array of entries; the worker reconstructs it. + var encodedArgs; + if (typeof body === 'string') { + encodedArgs = body; + } else { + var entries = []; + body.forEach(function (value, key) { + entries.push([key, value]); + }); + encodedArgs = {__formData: entries}; + } + + worker.postMessage({ + type: 'callAction', + requestId: reqId, + actionId: id, + encodedArgs: encodedArgs, + }); + + var response = createFromReadableStream(stream, { + callServer: callServer, + }); + + // Update UI with re-rendered root + startTransition(function () { + updateUI( + Promise.resolve(response).then(function (v) { + return v.root; + }) + ); + }); + + // Return action's return value (for useActionState support) + return Promise.resolve(response).then(function (v) { + return v.returnValue; + }); + }); + } + + function triggerRender() { + // Close any in-flight streams from previous renders + Object.keys(chunkControllers).forEach(function (id) { + try { + chunkControllers[id].close(); + } catch (e) {} + delete chunkControllers[id]; + }); + + nextStreamId++; + var reqId = nextStreamId; + + var stream = new ReadableStream({ + start: function (controller) { + chunkControllers[reqId] = controller; + }, + }); + + worker.postMessage({type: 'render', requestId: reqId}); + + var promise = createFromReadableStream(stream, { + callServer: callServer, + }); + + updateUI(promise); + } + + function handleChunk(msg) { + var ctrl = chunkControllers[msg.requestId]; + if (!ctrl) return; + if (msg.done) { + ctrl.close(); + delete chunkControllers[msg.requestId]; + } else { + ctrl.enqueue(msg.chunk); + } + } + + function updateUI(promise) { + if (firstRender) { + firstRender = false; + if (initialResolve) initialResolve(promise); + } else { + startTransition(function () { + if (setCurrentPromise) setCurrentPromise(promise); + }); + } + } + + // File update handler — receives raw file contents from RscFileBridge + window.addEventListener('message', function (e) { + var msg = e.data; + if (msg.type !== 'rsc-file-update') return; + if (!workerReady) { + pendingFiles = msg.files; + return; + } + processFiles(msg.files); + }); + + function processFiles(files) { + console.clear(); + var userFiles = {}; + Object.keys(files).forEach(function (filePath) { + if (!filePath.match(/\.(js|jsx|ts|tsx)$/)) return; + if (filePath.indexOf('node_modules') !== -1) return; + if (filePath === '/src/index.js') return; + if (filePath === '/src/rsc-client.js') return; + if (filePath === '/src/rsc-server.js') return; + if (filePath === '/src/__webpack_shim__.js') return; + if (filePath === '/src/__react_refresh_init__.js') return; + userFiles[filePath] = files[filePath]; + }); + worker.postMessage({ + type: 'deploy', + files: userFiles, + }); + } + + // Resolve relative paths (e.g., './Button' from '/src/Counter.js' → '/src/Button') + function resolvePath(from, to) { + if (!to.startsWith('.')) return to; + var parts = from.split('/'); + parts.pop(); + var toParts = to.split('/'); + for (var i = 0; i < toParts.length; i++) { + if (toParts[i] === '.') continue; + if (toParts[i] === '..') { + parts.pop(); + continue; + } + parts.push(toParts[i]); + } + return parts.join('/'); + } + + // Evaluate compiled client modules and register them in the webpack cache + // so RSDW client can resolve them via __webpack_require__. + function registerClientModules(compiledClients, clientEntries) { + // Clear stale client modules from previous deploys + Object.keys(globalThis.__webpack_module_cache__).forEach(function (key) { + delete globalThis.__webpack_module_cache__[key]; + }); + + // Store all compiled code for lazy evaluation + var allCompiled = compiledClients; + + function evaluateModule(moduleId) { + if (globalThis.__webpack_module_cache__[moduleId]) { + var cached = globalThis.__webpack_module_cache__[moduleId]; + return cached.exports !== undefined ? cached.exports : cached; + } + var code = allCompiled[moduleId]; + if (!code) + throw new Error('Client require: module "' + moduleId + '" not found'); + + var mod = {exports: {}}; + // Register before evaluating to handle circular deps + var cacheEntry = {exports: mod.exports}; + globalThis.__webpack_module_cache__[moduleId] = cacheEntry; + + var clientRequire = function (id) { + if (id === 'react') return React; + if (id === 'react/jsx-runtime') return ReactJSXRuntime; + if (id === 'react/jsx-dev-runtime') return ReactJSXDevRuntime; + if (id.endsWith('.css')) return {}; + var resolvedId = id.startsWith('.') ? resolvePath(moduleId, id) : id; + var candidates = [resolvedId]; + var exts = ['.js', '.jsx', '.ts', '.tsx']; + for (var i = 0; i < exts.length; i++) { + candidates.push(resolvedId + exts[i]); + } + for (var j = 0; j < candidates.length; j++) { + if ( + allCompiled[candidates[j]] || + globalThis.__webpack_module_cache__[candidates[j]] + ) { + return evaluateModule(candidates[j]); + } + } + throw new Error('Client require: module "' + id + '" not found'); + }; + + try { + new Function('module', 'exports', 'require', 'React', code)( + mod, + mod.exports, + clientRequire, + React + ); + } catch (err) { + console.error('Error executing client module ' + moduleId + ':', err); + return mod.exports; + } + // Update the SAME cache entry's exports (don't replace the wrapper) + cacheEntry.exports = mod.exports; + return mod.exports; + } + + // Eagerly evaluate 'use client' entry points; their imports resolve lazily + Object.keys(clientEntries).forEach(function (moduleId) { + evaluateModule(moduleId); + }); + + // Register all evaluated components with react-refresh for Fast Refresh. + // This creates stable "component families" so React can preserve state + // across re-evaluations when component identity changes. + Object.keys(globalThis.__webpack_module_cache__).forEach(function ( + moduleId + ) { + var moduleExports = globalThis.__webpack_module_cache__[moduleId]; + var exports = + moduleExports.exports !== undefined + ? moduleExports.exports + : moduleExports; + if (exports && typeof exports === 'object') { + for (var key in exports) { + var exportValue = exports[key]; + if (isLikelyComponentType(exportValue)) { + refreshRegister(exportValue, moduleId + ' %exports% ' + key); + } + } + } + if (typeof exports === 'function' && isLikelyComponentType(exports)) { + refreshRegister(exports, moduleId + ' %exports% default'); + } + }); + + // Tell React about updated component families so it can + // preserve state for components whose implementation changed. + performReactRefresh(); + } +} diff --git a/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-server.js b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-server.js new file mode 100644 index 000000000..7570a350c --- /dev/null +++ b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-server.js @@ -0,0 +1,537 @@ +// Server Worker for RSC Sandboxes +// Runs inside a Blob URL Web Worker. +// Pre-bundled by esbuild with React (server build), react-server-dom-webpack/server.browser, and Sucrase. + +// IMPORTANT +// If this file changes, run: +// yarn prebuild:rsc + +var React = require('react'); +var ReactJSXRuntime = require('react/jsx-runtime'); +var RSDWServer = require('react-server-dom-webpack/server.browser'); +var Sucrase = require('sucrase'); +var acorn = require('acorn-loose'); + +var deployed = null; + +// Module map proxy: generates module references on-demand for client components. +// When server code imports a 'use client' file, it gets a proxy reference +// that serializes into the Flight stream. +function createModuleMap() { + return new Proxy( + {}, + { + get: function (target, key) { + if (key in target) return target[key]; + var parts = String(key).split('#'); + var moduleId = parts[0]; + var exportName = parts[1] || 'default'; + var entry = { + id: moduleId, + chunks: [moduleId], + name: exportName, + async: true, + }; + target[key] = entry; + return entry; + }, + } + ); +} + +// Server actions registry +var serverActionsRegistry = {}; + +function registerServerReference(impl, moduleId, name) { + var ref = RSDWServer.registerServerReference(impl, moduleId, name); + var id = moduleId + '#' + name; + serverActionsRegistry[id] = impl; + return ref; +} + +// Detect 'use client' / 'use server' directives using acorn-loose, +// matching the same approach as react-server-dom-webpack/node-register. +function parseDirective(code) { + if (code.indexOf('use client') === -1 && code.indexOf('use server') === -1) { + return null; + } + try { + var body = acorn.parse(code, { + ecmaVersion: '2024', + sourceType: 'source', + }).body; + } catch (x) { + return null; + } + for (var i = 0; i < body.length; i++) { + var node = body[i]; + if (node.type !== 'ExpressionStatement' || !node.directive) break; + if (node.directive === 'use client') return 'use client'; + if (node.directive === 'use server') return 'use server'; + } + return null; +} + +// Transform inline 'use server' functions (inside function bodies) into +// registered server references. Module-level 'use server' is handled +// separately by executeModule. +function transformInlineServerActions(code) { + if (code.indexOf('use server') === -1) return code; + var ast; + try { + ast = acorn.parse(code, {ecmaVersion: '2024', sourceType: 'source'}); + } catch (x) { + return code; + } + + var edits = []; + var counter = 0; + + function visit(node, fnDepth) { + if (!node || typeof node !== 'object') return; + var isFn = + node.type === 'FunctionDeclaration' || + node.type === 'FunctionExpression' || + node.type === 'ArrowFunctionExpression'; + + // Only look for 'use server' inside nested functions (fnDepth > 0) + if ( + isFn && + fnDepth > 0 && + node.body && + node.body.type === 'BlockStatement' + ) { + var body = node.body.body; + for (var s = 0; s < body.length; s++) { + var stmt = body[s]; + if (stmt.type !== 'ExpressionStatement') break; + if (stmt.directive === 'use server') { + edits.push({ + funcStart: node.start, + funcEnd: node.end, + dStart: stmt.start, + dEnd: stmt.end, + name: node.id ? node.id.name : 'action' + counter, + isDecl: node.type === 'FunctionDeclaration', + }); + counter++; + return; // don't recurse into this function + } + if (!stmt.directive) break; + } + } + + var nextDepth = isFn ? fnDepth + 1 : fnDepth; + for (var key in node) { + if (key === 'start' || key === 'end' || key === 'type') continue; + var child = node[key]; + if (Array.isArray(child)) { + for (var i = 0; i < child.length; i++) { + if (child[i] && typeof child[i].type === 'string') { + visit(child[i], nextDepth); + } + } + } else if (child && typeof child.type === 'string') { + visit(child, nextDepth); + } + } + } + + ast.body.forEach(function (stmt) { + visit(stmt, 0); + }); + if (edits.length === 0) return code; + + // Apply in reverse order to preserve positions + edits.sort(function (a, b) { + return b.funcStart - a.funcStart; + }); + + var result = code; + for (var i = 0; i < edits.length; i++) { + var e = edits[i]; + // Remove the 'use server' directive + trailing whitespace + var dEnd = e.dEnd; + var ch = result.charAt(dEnd); + while ( + dEnd < result.length && + (ch === ' ' || ch === '\n' || ch === '\r' || ch === '\t') + ) { + dEnd++; + ch = result.charAt(dEnd); + } + result = result.slice(0, e.dStart) + result.slice(dEnd); + var removed = dEnd - e.dStart; + var adjEnd = e.funcEnd - removed; + + // Wrap function with __rsa (register server action) + var funcCode = result.slice(e.funcStart, adjEnd); + if (e.isDecl) { + // async function foo() { ... } → + // var foo = __rsa(async function foo() { ... }, 'foo'); + result = + result.slice(0, e.funcStart) + + 'var ' + + e.name + + ' = __rsa(' + + funcCode + + ", '" + + e.name + + "');" + + result.slice(adjEnd); + } else { + // expression/arrow: just wrap in __rsa(...) + result = + result.slice(0, e.funcStart) + + '__rsa(' + + funcCode + + ", '" + + e.name + + "')" + + result.slice(adjEnd); + } + } + + return result; +} + +// Resolve relative paths (e.g., './Counter.js' from '/src/App.js' → '/src/Counter.js') +function resolvePath(from, to) { + if (!to.startsWith('.')) return to; + var parts = from.split('/'); + parts.pop(); // remove filename + var toParts = to.split('/'); + for (var i = 0; i < toParts.length; i++) { + if (toParts[i] === '.') continue; + if (toParts[i] === '..') { + parts.pop(); + continue; + } + parts.push(toParts[i]); + } + return parts.join('/'); +} + +// Deploy new server code into the Worker +// Receives raw source files — compiles them with Sucrase before execution. +function deploy(files) { + serverActionsRegistry = {}; + + // Build a require function for the server module scope + var modules = { + react: React, + 'react/jsx-runtime': ReactJSXRuntime, + }; + + // Compile all files first, then execute on-demand via require. + // This avoids ordering issues where a file imports another that hasn't been executed yet. + var compiled = {}; + var compileError = null; + Object.keys(files).forEach(function (filePath) { + if (compileError) return; + try { + compiled[filePath] = Sucrase.transform(files[filePath], { + transforms: ['jsx', 'imports'], + jsxRuntime: 'automatic', + production: true, + }).code; + } catch (err) { + compileError = filePath + ': ' + (err.message || String(err)); + } + }); + + if (compileError) { + return {type: 'error', error: compileError}; + } + + // Resolve a module id relative to a requesting file + function resolveModuleId(from, id) { + if (modules[id]) return id; + if (id.startsWith('.')) { + var resolved = resolvePath(from, id); + if (modules[resolved] || compiled[resolved]) return resolved; + var exts = ['.js', '.jsx', '.ts', '.tsx']; + for (var ei = 0; ei < exts.length; ei++) { + var withExt = resolved + exts[ei]; + if (modules[withExt] || compiled[withExt]) return withExt; + } + } + return id; + } + + // Execute a module lazily and cache its exports + var executing = {}; + var detectedClientFiles = {}; + + function executeModule(filePath) { + if (modules[filePath]) return modules[filePath]; + if (!compiled[filePath]) { + throw new Error('Module "' + filePath + '" not found'); + } + if (executing[filePath]) { + // Circular dependency — return partially populated exports + return executing[filePath].exports; + } + + // Replicate node-register's _compile hook: + // detect directives BEFORE executing the module. + var directive = parseDirective(files[filePath]); + + if (directive === 'use client') { + // Don't execute — return a client module proxy (same as node-register) + modules[filePath] = RSDWServer.createClientModuleProxy(filePath); + detectedClientFiles[filePath] = true; + return modules[filePath]; + } + + var mod = {exports: {}}; + executing[filePath] = mod; + + var localRequire = function (id) { + if (id.endsWith('.css')) return {}; + var resolved = resolveModuleId(filePath, id); + if (modules[resolved]) return modules[resolved]; + return executeModule(resolved); + }; + + // Transform inline 'use server' functions before execution + var codeToExecute = compiled[filePath]; + if (directive !== 'use server') { + codeToExecute = transformInlineServerActions(codeToExecute); + } + + new Function( + 'module', + 'exports', + 'require', + 'React', + '__rsa', + codeToExecute + )(mod, mod.exports, localRequire, React, function (fn, name) { + return registerServerReference(fn, filePath, name); + }); + + modules[filePath] = mod.exports; + + if (directive === 'use server') { + // Execute normally, then register server references (same as node-register) + var exportNames = Object.keys(mod.exports); + for (var i = 0; i < exportNames.length; i++) { + var name = exportNames[i]; + if (typeof mod.exports[name] === 'function') { + registerServerReference(mod.exports[name], filePath, name); + } + } + } + + delete executing[filePath]; + return mod.exports; + } + + // Execute all files (order no longer matters — require triggers lazy execution) + var mainModule = {exports: {}}; + Object.keys(compiled).forEach(function (filePath) { + executeModule(filePath); + if ( + filePath === '/src/App.js' || + filePath === './App.js' || + filePath === './src/App.js' + ) { + mainModule.exports = modules[filePath]; + } + }); + + deployed = { + module: mainModule.exports, + }; + + // Collect only client-reachable compiled code. + // Start from 'use client' entries and trace their require() calls. + var clientReachable = {}; + function traceClientDeps(filePath) { + if (clientReachable[filePath]) return; + clientReachable[filePath] = true; + var code = compiled[filePath]; + if (!code) return; + var requireRegex = /require\(["']([^"']+)["']\)/g; + var match; + while ((match = requireRegex.exec(code)) !== null) { + var dep = match[1]; + if ( + dep === 'react' || + dep === 'react/jsx-runtime' || + dep === 'react/jsx-dev-runtime' || + dep.endsWith('.css') + ) + continue; + var resolved = resolveModuleId(filePath, dep); + if (compiled[resolved]) { + traceClientDeps(resolved); + } + } + } + Object.keys(detectedClientFiles).forEach(function (filePath) { + traceClientDeps(filePath); + }); + + var clientCompiled = {}; + Object.keys(clientReachable).forEach(function (filePath) { + clientCompiled[filePath] = compiled[filePath]; + }); + + return { + type: 'deployed', + compiledClients: clientCompiled, + clientEntries: detectedClientFiles, + }; +} + +// Render the deployed app to a Flight stream +function render() { + if (!deployed) throw new Error('No code deployed'); + var App = deployed.module.default || deployed.module; + var element = React.createElement(App); + return RSDWServer.renderToReadableStream(element, createModuleMap(), { + onError: function (err) { + console.error('[RSC Server Error]', err); + return msg; + }, + }); +} + +// Execute a server action and re-render +function callAction(actionId, encodedArgs) { + if (!deployed) throw new Error('No code deployed'); + var action = serverActionsRegistry[actionId]; + if (!action) throw new Error('Action "' + actionId + '" not found'); + // Reconstruct FormData from serialized entries (postMessage can't clone FormData) + var decoded = encodedArgs; + if ( + typeof encodedArgs !== 'string' && + encodedArgs && + encodedArgs.__formData + ) { + decoded = new FormData(); + for (var i = 0; i < encodedArgs.__formData.length; i++) { + decoded.append( + encodedArgs.__formData[i][0], + encodedArgs.__formData[i][1] + ); + } + } + return Promise.resolve(RSDWServer.decodeReply(decoded)).then(function (args) { + var resultPromise = Promise.resolve(action.apply(null, args)); + return resultPromise.then(function () { + var App = deployed.module.default || deployed.module; + return RSDWServer.renderToReadableStream( + {root: React.createElement(App), returnValue: resultPromise}, + createModuleMap(), + { + onError: function (err) { + console.error('[RSC Server Error]', err); + return msg; + }, + } + ); + }); + }); +} + +// Stream chunks back to the main thread via postMessage +function sendStream(requestId, stream) { + var reader = stream.getReader(); + function pump() { + return reader.read().then(function (result) { + if (result.done) { + self.postMessage({type: 'rsc-chunk', requestId: requestId, done: true}); + return; + } + self.postMessage( + { + type: 'rsc-chunk', + requestId: requestId, + done: false, + chunk: result.value, + }, + [result.value.buffer] + ); + return pump(); + }); + } + pump().catch(function (err) { + self.postMessage({ + type: 'rsc-error', + requestId: requestId, + error: String(err), + }); + }); +} + +// RPC message handler +self.onmessage = function (e) { + var msg = e.data; + if (msg.type === 'deploy') { + try { + var result = deploy(msg.files); + if (result && result.type === 'error') { + self.postMessage({ + type: 'rsc-error', + error: result.error, + }); + } else if (result) { + self.postMessage({ + type: 'deploy-result', + result: result, + }); + } + } catch (err) { + self.postMessage({ + type: 'rsc-error', + error: String(err), + }); + } + } else if (msg.type === 'render') { + try { + var streamPromise = render(); + Promise.resolve(streamPromise) + .then(function (stream) { + sendStream(msg.requestId, stream); + }) + .catch(function (err) { + self.postMessage({ + type: 'rsc-error', + requestId: msg.requestId, + error: String(err), + }); + }); + } catch (err) { + self.postMessage({ + type: 'rsc-error', + requestId: msg.requestId, + error: String(err), + }); + } + } else if (msg.type === 'callAction') { + try { + callAction(msg.actionId, msg.encodedArgs) + .then(function (stream) { + sendStream(msg.requestId, stream); + }) + .catch(function (err) { + self.postMessage({ + type: 'rsc-error', + requestId: msg.requestId, + error: String(err), + }); + }); + } catch (err) { + self.postMessage({ + type: 'rsc-error', + requestId: msg.requestId, + error: String(err), + }); + } + } +}; + +self.postMessage({type: 'ready'}); diff --git a/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/webpack-shim.js b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/webpack-shim.js new file mode 100644 index 000000000..5573bf153 --- /dev/null +++ b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/webpack-shim.js @@ -0,0 +1,24 @@ +// Minimal webpack shim for RSDW compatibility. +// Works in both browser (window) and worker (self) contexts via globalThis. + +var moduleCache = {}; + +globalThis.__webpack_module_cache__ = moduleCache; + +globalThis.__webpack_require__ = function (moduleId) { + var cached = moduleCache[moduleId]; + if (cached) return cached.exports !== undefined ? cached.exports : cached; + throw new Error('Module "' + moduleId + '" not found in webpack shim cache'); +}; + +globalThis.__webpack_chunk_load__ = function () { + return Promise.resolve(); +}; + +globalThis.__webpack_require__.u = function (chunkId) { + return chunkId; +}; + +globalThis.__webpack_get_script_filename__ = function (chunkId) { + return chunkId; +}; diff --git a/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js new file mode 100644 index 000000000..e30f04935 --- /dev/null +++ b/src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/worker-bundle.dist.js @@ -0,0 +1,32233 @@ +// Minimal webpack shim for RSDW compatibility. +// Works in both browser (window) and worker (self) contexts via globalThis. + +var moduleCache = {}; + +globalThis.__webpack_module_cache__ = moduleCache; + +globalThis.__webpack_require__ = function (moduleId) { + var cached = moduleCache[moduleId]; + if (cached) return cached.exports !== undefined ? cached.exports : cached; + throw new Error('Module "' + moduleId + '" not found in webpack shim cache'); +}; + +globalThis.__webpack_chunk_load__ = function () { + return Promise.resolve(); +}; + +globalThis.__webpack_require__.u = function (chunkId) { + return chunkId; +}; + +globalThis.__webpack_get_script_filename__ = function (chunkId) { + return chunkId; +}; + +('use strict'); +(() => { + var Z = (e, t) => () => (t || e((t = {exports: {}}).exports, t), t.exports); + var Wc = Z((ht) => { + 'use strict'; + var ei = {H: null, A: null}; + function Yo(e) { + var t = 'https://react.dev/errors/' + e; + if (1 < arguments.length) { + t += '?args[]=' + encodeURIComponent(arguments[1]); + for (var s = 2; s < arguments.length; s++) + t += '&args[]=' + encodeURIComponent(arguments[s]); + } + return ( + 'Minified React error #' + + e + + '; visit ' + + t + + ' for the full message or use the non-minified dev environment for full errors and additional helpful warnings.' + ); + } + var jc = Array.isArray, + Jo = Symbol.for('react.transitional.element'), + Af = Symbol.for('react.portal'), + Pf = Symbol.for('react.fragment'), + Nf = Symbol.for('react.strict_mode'), + Rf = Symbol.for('react.profiler'), + Lf = Symbol.for('react.forward_ref'), + Of = Symbol.for('react.suspense'), + Df = Symbol.for('react.memo'), + Uc = Symbol.for('react.lazy'), + $c = Symbol.iterator; + function Mf(e) { + return e === null || typeof e != 'object' + ? null + : ((e = ($c && e[$c]) || e['@@iterator']), + typeof e == 'function' ? e : null); + } + var Hc = Object.prototype.hasOwnProperty, + Ff = Object.assign; + function Qo(e, t, s, i, r, a) { + return ( + (s = a.ref), + {$$typeof: Jo, type: e, key: t, ref: s !== void 0 ? s : null, props: a} + ); + } + function Bf(e, t) { + return Qo(e.type, t, void 0, void 0, void 0, e.props); + } + function Zo(e) { + return typeof e == 'object' && e !== null && e.$$typeof === Jo; + } + function Vf(e) { + var t = {'=': '=0', ':': '=2'}; + return ( + '$' + + e.replace(/[=:]/g, function (s) { + return t[s]; + }) + ); + } + var qc = /\/+/g; + function zo(e, t) { + return typeof e == 'object' && e !== null && e.key != null + ? Vf('' + e.key) + : t.toString(36); + } + function Kc() {} + function jf(e) { + switch (e.status) { + case 'fulfilled': + return e.value; + case 'rejected': + throw e.reason; + default: + switch ( + (typeof e.status == 'string' + ? e.then(Kc, Kc) + : ((e.status = 'pending'), + e.then( + function (t) { + e.status === 'pending' && + ((e.status = 'fulfilled'), (e.value = t)); + }, + function (t) { + e.status === 'pending' && + ((e.status = 'rejected'), (e.reason = t)); + } + )), + e.status) + ) { + case 'fulfilled': + return e.value; + case 'rejected': + throw e.reason; + } + } + throw e; + } + function Zs(e, t, s, i, r) { + var a = typeof e; + (a === 'undefined' || a === 'boolean') && (e = null); + var u = !1; + if (e === null) u = !0; + else + switch (a) { + case 'bigint': + case 'string': + case 'number': + u = !0; + break; + case 'object': + switch (e.$$typeof) { + case Jo: + case Af: + u = !0; + break; + case Uc: + return (u = e._init), Zs(u(e._payload), t, s, i, r); + } + } + if (u) + return ( + (r = r(e)), + (u = i === '' ? '.' + zo(e, 0) : i), + jc(r) + ? ((s = ''), + u != null && (s = u.replace(qc, '$&/') + '/'), + Zs(r, t, s, '', function (g) { + return g; + })) + : r != null && + (Zo(r) && + (r = Bf( + r, + s + + (r.key == null || (e && e.key === r.key) + ? '' + : ('' + r.key).replace(qc, '$&/') + '/') + + u + )), + t.push(r)), + 1 + ); + u = 0; + var d = i === '' ? '.' : i + ':'; + if (jc(e)) + for (var y = 0; y < e.length; y++) + (i = e[y]), (a = d + zo(i, y)), (u += Zs(i, t, s, a, r)); + else if (((y = Mf(e)), typeof y == 'function')) + for (e = y.call(e), y = 0; !(i = e.next()).done; ) + (i = i.value), (a = d + zo(i, y++)), (u += Zs(i, t, s, a, r)); + else if (a === 'object') { + if (typeof e.then == 'function') return Zs(jf(e), t, s, i, r); + throw ( + ((t = String(e)), + Error( + Yo( + 31, + t === '[object Object]' + ? 'object with keys {' + Object.keys(e).join(', ') + '}' + : t + ) + )) + ); + } + return u; + } + function _r(e, t, s) { + if (e == null) return e; + var i = [], + r = 0; + return ( + Zs(e, i, '', '', function (a) { + return t.call(s, a, r++); + }), + i + ); + } + function $f(e) { + if (e._status === -1) { + var t = e._result; + (t = t()), + t.then( + function (s) { + (e._status === 0 || e._status === -1) && + ((e._status = 1), (e._result = s)); + }, + function (s) { + (e._status === 0 || e._status === -1) && + ((e._status = 2), (e._result = s)); + } + ), + e._status === -1 && ((e._status = 0), (e._result = t)); + } + if (e._status === 1) return e._result.default; + throw e._result; + } + function qf() { + return new WeakMap(); + } + function Xo() { + return {s: 0, v: void 0, o: null, p: null}; + } + ht.Children = { + map: _r, + forEach: function (e, t, s) { + _r( + e, + function () { + t.apply(this, arguments); + }, + s + ); + }, + count: function (e) { + var t = 0; + return ( + _r(e, function () { + t++; + }), + t + ); + }, + toArray: function (e) { + return ( + _r(e, function (t) { + return t; + }) || [] + ); + }, + only: function (e) { + if (!Zo(e)) throw Error(Yo(143)); + return e; + }, + }; + ht.Fragment = Pf; + ht.Profiler = Rf; + ht.StrictMode = Nf; + ht.Suspense = Of; + ht.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = ei; + ht.cache = function (e) { + return function () { + var t = ei.A; + if (!t) return e.apply(null, arguments); + var s = t.getCacheForType(qf); + (t = s.get(e)), t === void 0 && ((t = Xo()), s.set(e, t)), (s = 0); + for (var i = arguments.length; s < i; s++) { + var r = arguments[s]; + if (typeof r == 'function' || (typeof r == 'object' && r !== null)) { + var a = t.o; + a === null && (t.o = a = new WeakMap()), + (t = a.get(r)), + t === void 0 && ((t = Xo()), a.set(r, t)); + } else + (a = t.p), + a === null && (t.p = a = new Map()), + (t = a.get(r)), + t === void 0 && ((t = Xo()), a.set(r, t)); + } + if (t.s === 1) return t.v; + if (t.s === 2) throw t.v; + try { + var u = e.apply(null, arguments); + return (s = t), (s.s = 1), (s.v = u); + } catch (d) { + throw ((u = t), (u.s = 2), (u.v = d), d); + } + }; + }; + ht.cloneElement = function (e, t, s) { + if (e == null) throw Error(Yo(267, e)); + var i = Ff({}, e.props), + r = e.key, + a = void 0; + if (t != null) + for (u in (t.ref !== void 0 && (a = void 0), + t.key !== void 0 && (r = '' + t.key), + t)) + !Hc.call(t, u) || + u === 'key' || + u === '__self' || + u === '__source' || + (u === 'ref' && t.ref === void 0) || + (i[u] = t[u]); + var u = arguments.length - 2; + if (u === 1) i.children = s; + else if (1 < u) { + for (var d = Array(u), y = 0; y < u; y++) d[y] = arguments[y + 2]; + i.children = d; + } + return Qo(e.type, r, void 0, void 0, a, i); + }; + ht.createElement = function (e, t, s) { + var i, + r = {}, + a = null; + if (t != null) + for (i in (t.key !== void 0 && (a = '' + t.key), t)) + Hc.call(t, i) && + i !== 'key' && + i !== '__self' && + i !== '__source' && + (r[i] = t[i]); + var u = arguments.length - 2; + if (u === 1) r.children = s; + else if (1 < u) { + for (var d = Array(u), y = 0; y < u; y++) d[y] = arguments[y + 2]; + r.children = d; + } + if (e && e.defaultProps) + for (i in ((u = e.defaultProps), u)) r[i] === void 0 && (r[i] = u[i]); + return Qo(e, a, void 0, void 0, null, r); + }; + ht.createRef = function () { + return {current: null}; + }; + ht.forwardRef = function (e) { + return {$$typeof: Lf, render: e}; + }; + ht.isValidElement = Zo; + ht.lazy = function (e) { + return {$$typeof: Uc, _payload: {_status: -1, _result: e}, _init: $f}; + }; + ht.memo = function (e, t) { + return {$$typeof: Df, type: e, compare: t === void 0 ? null : t}; + }; + ht.use = function (e) { + return ei.H.use(e); + }; + ht.useCallback = function (e, t) { + return ei.H.useCallback(e, t); + }; + ht.useDebugValue = function () {}; + ht.useId = function () { + return ei.H.useId(); + }; + ht.useMemo = function (e, t) { + return ei.H.useMemo(e, t); + }; + ht.version = '19.0.0'; + }); + var Li = Z((e_, Gc) => { + 'use strict'; + Gc.exports = Wc(); + }); + var Xc = Z((Oi) => { + 'use strict'; + var Kf = Li(), + Uf = Symbol.for('react.transitional.element'), + Hf = Symbol.for('react.fragment'); + if (!Kf.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE) + throw Error( + 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' + ); + function zc(e, t, s) { + var i = null; + if ( + (s !== void 0 && (i = '' + s), + t.key !== void 0 && (i = '' + t.key), + 'key' in t) + ) { + s = {}; + for (var r in t) r !== 'key' && (s[r] = t[r]); + } else s = t; + return ( + (t = s.ref), + {$$typeof: Uf, type: e, key: i, ref: t !== void 0 ? t : null, props: s} + ); + } + Oi.Fragment = Hf; + Oi.jsx = zc; + Oi.jsxDEV = void 0; + Oi.jsxs = zc; + }); + var Jc = Z((n_, Yc) => { + 'use strict'; + Yc.exports = Xc(); + }); + var Qc = Z((jn) => { + 'use strict'; + var Wf = Li(); + function ns() {} + var Sn = { + d: { + f: ns, + r: function () { + throw Error( + 'Invalid form element. requestFormReset must be passed a form that was rendered by React.' + ); + }, + D: ns, + C: ns, + L: ns, + m: ns, + X: ns, + S: ns, + M: ns, + }, + p: 0, + findDOMNode: null, + }; + if (!Wf.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE) + throw Error( + 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' + ); + function br(e, t) { + if (e === 'font') return ''; + if (typeof t == 'string') return t === 'use-credentials' ? t : ''; + } + jn.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = Sn; + jn.preconnect = function (e, t) { + typeof e == 'string' && + (t + ? ((t = t.crossOrigin), + (t = + typeof t == 'string' + ? t === 'use-credentials' + ? t + : '' + : void 0)) + : (t = null), + Sn.d.C(e, t)); + }; + jn.prefetchDNS = function (e) { + typeof e == 'string' && Sn.d.D(e); + }; + jn.preinit = function (e, t) { + if (typeof e == 'string' && t && typeof t.as == 'string') { + var s = t.as, + i = br(s, t.crossOrigin), + r = typeof t.integrity == 'string' ? t.integrity : void 0, + a = typeof t.fetchPriority == 'string' ? t.fetchPriority : void 0; + s === 'style' + ? Sn.d.S(e, typeof t.precedence == 'string' ? t.precedence : void 0, { + crossOrigin: i, + integrity: r, + fetchPriority: a, + }) + : s === 'script' && + Sn.d.X(e, { + crossOrigin: i, + integrity: r, + fetchPriority: a, + nonce: typeof t.nonce == 'string' ? t.nonce : void 0, + }); + } + }; + jn.preinitModule = function (e, t) { + if (typeof e == 'string') + if (typeof t == 'object' && t !== null) { + if (t.as == null || t.as === 'script') { + var s = br(t.as, t.crossOrigin); + Sn.d.M(e, { + crossOrigin: s, + integrity: typeof t.integrity == 'string' ? t.integrity : void 0, + nonce: typeof t.nonce == 'string' ? t.nonce : void 0, + }); + } + } else t == null && Sn.d.M(e); + }; + jn.preload = function (e, t) { + if ( + typeof e == 'string' && + typeof t == 'object' && + t !== null && + typeof t.as == 'string' + ) { + var s = t.as, + i = br(s, t.crossOrigin); + Sn.d.L(e, s, { + crossOrigin: i, + integrity: typeof t.integrity == 'string' ? t.integrity : void 0, + nonce: typeof t.nonce == 'string' ? t.nonce : void 0, + type: typeof t.type == 'string' ? t.type : void 0, + fetchPriority: + typeof t.fetchPriority == 'string' ? t.fetchPriority : void 0, + referrerPolicy: + typeof t.referrerPolicy == 'string' ? t.referrerPolicy : void 0, + imageSrcSet: + typeof t.imageSrcSet == 'string' ? t.imageSrcSet : void 0, + imageSizes: typeof t.imageSizes == 'string' ? t.imageSizes : void 0, + media: typeof t.media == 'string' ? t.media : void 0, + }); + } + }; + jn.preloadModule = function (e, t) { + if (typeof e == 'string') + if (t) { + var s = br(t.as, t.crossOrigin); + Sn.d.m(e, { + as: typeof t.as == 'string' && t.as !== 'script' ? t.as : void 0, + crossOrigin: s, + integrity: typeof t.integrity == 'string' ? t.integrity : void 0, + }); + } else Sn.d.m(e); + }; + jn.version = '19.0.0'; + }); + var eu = Z((i_, Zc) => { + 'use strict'; + Zc.exports = Qc(); + }); + var Zu = Z((En) => { + 'use strict'; + var Gf = eu(), + zf = Li(), + Tu = new MessageChannel(), + ku = []; + Tu.port1.onmessage = function () { + var e = ku.shift(); + e && e(); + }; + function Bi(e) { + ku.push(e), Tu.port2.postMessage(null); + } + function Xf(e) { + setTimeout(function () { + throw e; + }); + } + var Yf = Promise, + vu = + typeof queueMicrotask == 'function' + ? queueMicrotask + : function (e) { + Yf.resolve(null).then(e).catch(Xf); + }, + ln = null, + cn = 0; + function Cr(e, t) { + if (t.byteLength !== 0) + if (2048 < t.byteLength) + 0 < cn && + (e.enqueue(new Uint8Array(ln.buffer, 0, cn)), + (ln = new Uint8Array(2048)), + (cn = 0)), + e.enqueue(t); + else { + var s = ln.length - cn; + s < t.byteLength && + (s === 0 + ? e.enqueue(ln) + : (ln.set(t.subarray(0, s), cn), + e.enqueue(ln), + (t = t.subarray(s))), + (ln = new Uint8Array(2048)), + (cn = 0)), + ln.set(t, cn), + (cn += t.byteLength); + } + return !0; + } + var Jf = new TextEncoder(); + function pn(e) { + return Jf.encode(e); + } + function la(e) { + return e.byteLength; + } + function xu(e, t) { + typeof e.error == 'function' ? e.error(t) : e.close(); + } + var rs = Symbol.for('react.client.reference'), + Ar = Symbol.for('react.server.reference'); + function ti(e, t, s) { + return Object.defineProperties(e, { + $$typeof: {value: rs}, + $$id: {value: t}, + $$async: {value: s}, + }); + } + var Qf = Function.prototype.bind, + Zf = Array.prototype.slice; + function gu() { + var e = Qf.apply(this, arguments); + if (this.$$typeof === Ar) { + var t = Zf.call(arguments, 1), + s = {value: Ar}, + i = {value: this.$$id}; + return ( + (t = {value: this.$$bound ? this.$$bound.concat(t) : t}), + Object.defineProperties(e, { + $$typeof: s, + $$id: i, + $$bound: t, + bind: {value: gu, configurable: !0}, + }) + ); + } + return e; + } + var ed = { + value: function () { + return 'function () { [omitted code] }'; + }, + configurable: !0, + writable: !0, + }, + td = Promise.prototype, + nd = { + get: function (e, t) { + switch (t) { + case '$$typeof': + return e.$$typeof; + case '$$id': + return e.$$id; + case '$$async': + return e.$$async; + case 'name': + return e.name; + case 'displayName': + return; + case 'defaultProps': + return; + case '_debugInfo': + return; + case 'toJSON': + return; + case Symbol.toPrimitive: + return Object.prototype[Symbol.toPrimitive]; + case Symbol.toStringTag: + return Object.prototype[Symbol.toStringTag]; + case 'Provider': + throw Error( + 'Cannot render a Client Context Provider on the Server. Instead, you can export a Client Component wrapper that itself renders a Client Context Provider.' + ); + case 'then': + throw Error( + 'Cannot await or return from a thenable. You cannot await a client module from a server component.' + ); + } + throw Error( + 'Cannot access ' + + (String(e.name) + '.' + String(t)) + + ' on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.' + ); + }, + set: function () { + throw Error('Cannot assign to a client module from a server module.'); + }, + }; + function tu(e, t) { + switch (t) { + case '$$typeof': + return e.$$typeof; + case '$$id': + return e.$$id; + case '$$async': + return e.$$async; + case 'name': + return e.name; + case 'defaultProps': + return; + case '_debugInfo': + return; + case 'toJSON': + return; + case Symbol.toPrimitive: + return Object.prototype[Symbol.toPrimitive]; + case Symbol.toStringTag: + return Object.prototype[Symbol.toStringTag]; + case '__esModule': + var s = e.$$id; + return ( + (e.default = ti( + function () { + throw Error( + 'Attempted to call the default export of ' + + s + + " from the server but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component." + ); + }, + e.$$id + '#', + e.$$async + )), + !0 + ); + case 'then': + if (e.then) return e.then; + if (e.$$async) return; + var i = ti({}, e.$$id, !0), + r = new Proxy(i, _u); + return ( + (e.status = 'fulfilled'), + (e.value = r), + (e.then = ti( + function (a) { + return Promise.resolve(a(r)); + }, + e.$$id + '#then', + !1 + )) + ); + } + if (typeof t == 'symbol') + throw Error( + 'Cannot read Symbol exports. Only named exports are supported on a client module imported on the server.' + ); + return ( + (i = e[t]), + i || + ((i = ti( + function () { + throw Error( + 'Attempted to call ' + + String(t) + + '() from the server but ' + + String(t) + + " is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component." + ); + }, + e.$$id + '#' + t, + e.$$async + )), + Object.defineProperty(i, 'name', {value: t}), + (i = e[t] = new Proxy(i, nd))), + i + ); + } + var _u = { + get: function (e, t) { + return tu(e, t); + }, + getOwnPropertyDescriptor: function (e, t) { + var s = Object.getOwnPropertyDescriptor(e, t); + return ( + s || + ((s = { + value: tu(e, t), + writable: !1, + configurable: !1, + enumerable: !1, + }), + Object.defineProperty(e, t, s)), + s + ); + }, + getPrototypeOf: function () { + return td; + }, + set: function () { + throw Error('Cannot assign to a client module from a server module.'); + }, + }, + bu = Gf.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, + qn = bu.d; + bu.d = {f: qn.f, r: qn.r, D: sd, C: id, L: Sr, m: Cu, X: od, S: rd, M: ad}; + function sd(e) { + if (typeof e == 'string' && e) { + var t = st || null; + if (t) { + var s = t.hints, + i = 'D|' + e; + s.has(i) || (s.add(i), Ut(t, 'D', e)); + } else qn.D(e); + } + } + function id(e, t) { + if (typeof e == 'string') { + var s = st || null; + if (s) { + var i = s.hints, + r = 'C|' + (t ?? 'null') + '|' + e; + i.has(r) || + (i.add(r), + typeof t == 'string' ? Ut(s, 'C', [e, t]) : Ut(s, 'C', e)); + } else qn.C(e, t); + } + } + function Sr(e, t, s) { + if (typeof e == 'string') { + var i = st || null; + if (i) { + var r = i.hints, + a = 'L'; + if (t === 'image' && s) { + var u = s.imageSrcSet, + d = s.imageSizes, + y = ''; + typeof u == 'string' && u !== '' + ? ((y += '[' + u + ']'), + typeof d == 'string' && (y += '[' + d + ']')) + : (y += '[][]' + e), + (a += '[image]' + y); + } else a += '[' + t + ']' + e; + r.has(a) || + (r.add(a), + (s = ji(s)) ? Ut(i, 'L', [e, t, s]) : Ut(i, 'L', [e, t])); + } else qn.L(e, t, s); + } + } + function Cu(e, t) { + if (typeof e == 'string') { + var s = st || null; + if (s) { + var i = s.hints, + r = 'm|' + e; + return i.has(r) + ? void 0 + : (i.add(r), (t = ji(t)) ? Ut(s, 'm', [e, t]) : Ut(s, 'm', e)); + } + qn.m(e, t); + } + } + function rd(e, t, s) { + if (typeof e == 'string') { + var i = st || null; + if (i) { + var r = i.hints, + a = 'S|' + e; + return r.has(a) + ? void 0 + : (r.add(a), + (s = ji(s)) + ? Ut(i, 'S', [e, typeof t == 'string' ? t : 0, s]) + : typeof t == 'string' + ? Ut(i, 'S', [e, t]) + : Ut(i, 'S', e)); + } + qn.S(e, t, s); + } + } + function od(e, t) { + if (typeof e == 'string') { + var s = st || null; + if (s) { + var i = s.hints, + r = 'X|' + e; + return i.has(r) + ? void 0 + : (i.add(r), (t = ji(t)) ? Ut(s, 'X', [e, t]) : Ut(s, 'X', e)); + } + qn.X(e, t); + } + } + function ad(e, t) { + if (typeof e == 'string') { + var s = st || null; + if (s) { + var i = s.hints, + r = 'M|' + e; + return i.has(r) + ? void 0 + : (i.add(r), (t = ji(t)) ? Ut(s, 'M', [e, t]) : Ut(s, 'M', e)); + } + qn.M(e, t); + } + } + function ji(e) { + if (e == null) return null; + var t = !1, + s = {}, + i; + for (i in e) e[i] != null && ((t = !0), (s[i] = e[i])); + return t ? s : null; + } + function ld(e, t, s) { + switch (t) { + case 'img': + t = s.src; + var i = s.srcSet; + if ( + !( + s.loading === 'lazy' || + (!t && !i) || + (typeof t != 'string' && t != null) || + (typeof i != 'string' && i != null) || + s.fetchPriority === 'low' || + e & 3 + ) && + (typeof t != 'string' || + t[4] !== ':' || + (t[0] !== 'd' && t[0] !== 'D') || + (t[1] !== 'a' && t[1] !== 'A') || + (t[2] !== 't' && t[2] !== 'T') || + (t[3] !== 'a' && t[3] !== 'A')) && + (typeof i != 'string' || + i[4] !== ':' || + (i[0] !== 'd' && i[0] !== 'D') || + (i[1] !== 'a' && i[1] !== 'A') || + (i[2] !== 't' && i[2] !== 'T') || + (i[3] !== 'a' && i[3] !== 'A')) + ) { + var r = typeof s.sizes == 'string' ? s.sizes : void 0, + a = s.crossOrigin; + Sr(t || '', 'image', { + imageSrcSet: i, + imageSizes: r, + crossOrigin: + typeof a == 'string' + ? a === 'use-credentials' + ? a + : '' + : void 0, + integrity: s.integrity, + type: s.type, + fetchPriority: s.fetchPriority, + referrerPolicy: s.referrerPolicy, + }); + } + return e; + case 'link': + if ( + ((t = s.rel), + (i = s.href), + !( + e & 1 || + s.itemProp != null || + typeof t != 'string' || + typeof i != 'string' || + i === '' + )) + ) + switch (t) { + case 'preload': + Sr(i, s.as, { + crossOrigin: s.crossOrigin, + integrity: s.integrity, + nonce: s.nonce, + type: s.type, + fetchPriority: s.fetchPriority, + referrerPolicy: s.referrerPolicy, + imageSrcSet: s.imageSrcSet, + imageSizes: s.imageSizes, + media: s.media, + }); + break; + case 'modulepreload': + Cu(i, { + as: s.as, + crossOrigin: s.crossOrigin, + integrity: s.integrity, + nonce: s.nonce, + }); + break; + case 'stylesheet': + Sr(i, 'stylesheet', { + crossOrigin: s.crossOrigin, + integrity: s.integrity, + nonce: s.nonce, + type: s.type, + fetchPriority: s.fetchPriority, + referrerPolicy: s.referrerPolicy, + media: s.media, + }); + } + return e; + case 'picture': + return e | 2; + case 'noscript': + return e | 1; + default: + return e; + } + } + var ca = Symbol.for('react.temporary.reference'), + cd = { + get: function (e, t) { + switch (t) { + case '$$typeof': + return e.$$typeof; + case 'name': + return; + case 'displayName': + return; + case 'defaultProps': + return; + case '_debugInfo': + return; + case 'toJSON': + return; + case Symbol.toPrimitive: + return Object.prototype[Symbol.toPrimitive]; + case Symbol.toStringTag: + return Object.prototype[Symbol.toStringTag]; + case 'Provider': + throw Error( + 'Cannot render a Client Context Provider on the Server. Instead, you can export a Client Component wrapper that itself renders a Client Context Provider.' + ); + case 'then': + return; + } + throw Error( + 'Cannot access ' + + String(t) + + ' on the server. You cannot dot into a temporary client reference from a server component. You can only pass the value through to the client.' + ); + }, + set: function () { + throw Error( + 'Cannot assign to a temporary client reference from a server module.' + ); + }, + }; + function ud(e, t) { + var s = Object.defineProperties( + function () { + throw Error( + "Attempted to call a temporary Client Reference from the server but it is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component." + ); + }, + {$$typeof: {value: ca}} + ); + return (s = new Proxy(s, cd)), e.set(s, t), s; + } + var pd = Symbol.for('react.element'), + In = Symbol.for('react.transitional.element'), + ua = Symbol.for('react.fragment'), + nu = Symbol.for('react.context'), + wu = Symbol.for('react.forward_ref'), + hd = Symbol.for('react.suspense'), + fd = Symbol.for('react.suspense_list'), + Su = Symbol.for('react.memo'), + $i = Symbol.for('react.lazy'), + dd = Symbol.for('react.memo_cache_sentinel'); + Symbol.for('react.postpone'); + var su = Symbol.iterator; + function Iu(e) { + return e === null || typeof e != 'object' + ? null + : ((e = (su && e[su]) || e['@@iterator']), + typeof e == 'function' ? e : null); + } + var Ss = Symbol.asyncIterator; + function Cs() {} + var pa = Error( + "Suspense Exception: This is not a real error! It's an implementation detail of `use` to interrupt the current render. You must either rethrow it immediately, or move the `use` call outside of the `try/catch` block. Capturing without rethrowing will lead to unexpected behavior.\n\nTo handle async errors, wrap your component in an error boundary, or call the promise's `.catch` method and pass the result to `use`." + ); + function md(e, t, s) { + switch ( + ((s = e[s]), + s === void 0 ? e.push(t) : s !== t && (t.then(Cs, Cs), (t = s)), + t.status) + ) { + case 'fulfilled': + return t.value; + case 'rejected': + throw t.reason; + default: + switch ( + (typeof t.status == 'string' + ? t.then(Cs, Cs) + : ((e = t), + (e.status = 'pending'), + e.then( + function (i) { + if (t.status === 'pending') { + var r = t; + (r.status = 'fulfilled'), (r.value = i); + } + }, + function (i) { + if (t.status === 'pending') { + var r = t; + (r.status = 'rejected'), (r.reason = i); + } + } + )), + t.status) + ) { + case 'fulfilled': + return t.value; + case 'rejected': + throw t.reason; + } + throw ((Ir = t), pa); + } + } + var Ir = null; + function Eu() { + if (Ir === null) + throw Error( + 'Expected a suspended thenable. This is a bug in React. Please file an issue.' + ); + var e = Ir; + return (Ir = null), e; + } + var Mi = null, + ta = 0, + ni = null; + function Au() { + var e = ni || []; + return (ni = null), e; + } + var Pu = { + readContext: na, + use: kd, + useCallback: function (e) { + return e; + }, + useContext: na, + useEffect: Vt, + useImperativeHandle: Vt, + useLayoutEffect: Vt, + useInsertionEffect: Vt, + useMemo: function (e) { + return e(); + }, + useReducer: Vt, + useRef: Vt, + useState: Vt, + useDebugValue: function () {}, + useDeferredValue: Vt, + useTransition: Vt, + useSyncExternalStore: Vt, + useId: Td, + useHostTransitionStatus: Vt, + useFormState: Vt, + useActionState: Vt, + useOptimistic: Vt, + useMemoCache: function (e) { + for (var t = Array(e), s = 0; s < e; s++) t[s] = dd; + return t; + }, + useCacheRefresh: function () { + return yd; + }, + }; + Pu.useEffectEvent = Vt; + function Vt() { + throw Error('This Hook is not supported in Server Components.'); + } + function yd() { + throw Error( + 'Refreshing the cache is not supported in Server Components.' + ); + } + function na() { + throw Error('Cannot read a Client Context from a Server Component.'); + } + function Td() { + if (Mi === null) + throw Error('useId can only be used while React is rendering'); + var e = Mi.identifierCount++; + return '_' + Mi.identifierPrefix + 'S_' + e.toString(32) + '_'; + } + function kd(e) { + if ((e !== null && typeof e == 'object') || typeof e == 'function') { + if (typeof e.then == 'function') { + var t = ta; + return (ta += 1), ni === null && (ni = []), md(ni, e, t); + } + e.$$typeof === nu && na(); + } + throw e.$$typeof === rs + ? e.value != null && e.value.$$typeof === nu + ? Error('Cannot read a Client Context from a Server Component.') + : Error('Cannot use() an already resolved Client Reference.') + : Error('An unsupported type was passed to use(): ' + String(e)); + } + var iu = { + getCacheForType: function (e) { + var t = (t = st || null) ? t.cache : new Map(), + s = t.get(e); + return s === void 0 && ((s = e()), t.set(e, s)), s; + }, + cacheSignal: function () { + var e = st || null; + return e ? e.cacheController.signal : null; + }, + }, + Is = zf.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; + if (!Is) + throw Error( + 'The "react" package in this environment is not configured correctly. The "react-server" condition must be enabled in any environment that runs React Server Components.' + ); + var kn = Array.isArray, + ii = Object.getPrototypeOf; + function Nu(e) { + return (e = Object.prototype.toString.call(e)), e.slice(8, e.length - 1); + } + function ru(e) { + switch (typeof e) { + case 'string': + return JSON.stringify(10 >= e.length ? e : e.slice(0, 10) + '...'); + case 'object': + return kn(e) + ? '[...]' + : e !== null && e.$$typeof === sa + ? 'client' + : ((e = Nu(e)), e === 'Object' ? '{...}' : e); + case 'function': + return e.$$typeof === sa + ? 'client' + : (e = e.displayName || e.name) + ? 'function ' + e + : 'function'; + default: + return String(e); + } + } + function Er(e) { + if (typeof e == 'string') return e; + switch (e) { + case hd: + return 'Suspense'; + case fd: + return 'SuspenseList'; + } + if (typeof e == 'object') + switch (e.$$typeof) { + case wu: + return Er(e.render); + case Su: + return Er(e.type); + case $i: + var t = e._payload; + e = e._init; + try { + return Er(e(t)); + } catch {} + } + return ''; + } + var sa = Symbol.for('react.client.reference'); + function _s(e, t) { + var s = Nu(e); + if (s !== 'Object' && s !== 'Array') return s; + s = -1; + var i = 0; + if (kn(e)) { + for (var r = '[', a = 0; a < e.length; a++) { + 0 < a && (r += ', '); + var u = e[a]; + (u = typeof u == 'object' && u !== null ? _s(u) : ru(u)), + '' + a === t + ? ((s = r.length), (i = u.length), (r += u)) + : (r = + 10 > u.length && 40 > r.length + u.length + ? r + u + : r + '...'); + } + r += ']'; + } else if (e.$$typeof === In) r = '<' + Er(e.type) + '/>'; + else { + if (e.$$typeof === sa) return 'client'; + for (r = '{', a = Object.keys(e), u = 0; u < a.length; u++) { + 0 < u && (r += ', '); + var d = a[u], + y = JSON.stringify(d); + (r += ('"' + d + '"' === y ? d : y) + ': '), + (y = e[d]), + (y = typeof y == 'object' && y !== null ? _s(y) : ru(y)), + d === t + ? ((s = r.length), (i = y.length), (r += y)) + : (r = + 10 > y.length && 40 > r.length + y.length + ? r + y + : r + '...'); + } + r += '}'; + } + return t === void 0 + ? r + : -1 < s && 0 < i + ? ((e = ' '.repeat(s) + '^'.repeat(i)), + ` + ` + + r + + ` + ` + + e) + : ` + ` + r; + } + var Nr = Object.prototype.hasOwnProperty, + vd = Object.prototype, + Es = JSON.stringify; + function xd(e) { + console.error(e); + } + function Ru(e, t, s, i, r, a, u, d, y) { + if (Is.A !== null && Is.A !== iu) + throw Error( + 'Currently React only supports one RSC renderer at a time.' + ); + Is.A = iu; + var g = new Set(), + L = [], + p = new Set(); + (this.type = e), + (this.status = 10), + (this.flushScheduled = !1), + (this.destination = this.fatalError = null), + (this.bundlerConfig = s), + (this.cache = new Map()), + (this.cacheController = new AbortController()), + (this.pendingChunks = this.nextChunkId = 0), + (this.hints = p), + (this.abortableTasks = g), + (this.pingedTasks = L), + (this.completedImportChunks = []), + (this.completedHintChunks = []), + (this.completedRegularChunks = []), + (this.completedErrorChunks = []), + (this.writtenSymbols = new Map()), + (this.writtenClientReferences = new Map()), + (this.writtenServerReferences = new Map()), + (this.writtenObjects = new WeakMap()), + (this.temporaryReferences = y), + (this.identifierPrefix = d || ''), + (this.identifierCount = 1), + (this.taintCleanupQueue = []), + (this.onError = i === void 0 ? xd : i), + (this.onPostpone = r === void 0 ? Cs : r), + (this.onAllReady = a), + (this.onFatalError = u), + (e = os(this, t, null, !1, 0, g)), + L.push(e); + } + var st = null; + function ou(e, t, s) { + var i = os( + e, + s, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + ); + switch (s.status) { + case 'fulfilled': + return (i.model = s.value), Vi(e, i), i.id; + case 'rejected': + return Un(e, i, s.reason), i.id; + default: + if (e.status === 12) + return ( + e.abortableTasks.delete(i), + e.type === 21 + ? (ri(i), oi(i, e)) + : ((t = e.fatalError), ha(i), fa(i, e, t)), + i.id + ); + typeof s.status != 'string' && + ((s.status = 'pending'), + s.then( + function (r) { + s.status === 'pending' && + ((s.status = 'fulfilled'), (s.value = r)); + }, + function (r) { + s.status === 'pending' && + ((s.status = 'rejected'), (s.reason = r)); + } + )); + } + return ( + s.then( + function (r) { + (i.model = r), Vi(e, i); + }, + function (r) { + i.status === 0 && (Un(e, i, r), un(e)); + } + ), + i.id + ); + } + function gd(e, t, s) { + function i(g) { + if (y.status === 0) + if (g.done) + (y.status = 1), + (g = + y.id.toString(16) + + `:C +`), + e.completedRegularChunks.push(pn(g)), + e.abortableTasks.delete(y), + e.cacheController.signal.removeEventListener('abort', a), + un(e), + Or(e); + else + try { + (y.model = g.value), + e.pendingChunks++, + Bu(e, y), + un(e), + d.read().then(i, r); + } catch (L) { + r(L); + } + } + function r(g) { + y.status === 0 && + (e.cacheController.signal.removeEventListener('abort', a), + Un(e, y, g), + un(e), + d.cancel(g).then(r, r)); + } + function a() { + if (y.status === 0) { + var g = e.cacheController.signal; + g.removeEventListener('abort', a), + (g = g.reason), + e.type === 21 + ? (e.abortableTasks.delete(y), ri(y), oi(y, e)) + : (Un(e, y, g), un(e)), + d.cancel(g).then(r, r); + } + } + var u = s.supportsBYOB; + if (u === void 0) + try { + s.getReader({mode: 'byob'}).releaseLock(), (u = !0); + } catch { + u = !1; + } + var d = s.getReader(), + y = os( + e, + t.model, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + ); + return ( + e.pendingChunks++, + (t = + y.id.toString(16) + + ':' + + (u ? 'r' : 'R') + + ` +`), + e.completedRegularChunks.push(pn(t)), + e.cacheController.signal.addEventListener('abort', a), + d.read().then(i, r), + Ct(y.id) + ); + } + function _d(e, t, s, i) { + function r(y) { + if (d.status === 0) + if (y.done) { + if (((d.status = 1), y.value === void 0)) + var g = + d.id.toString(16) + + `:C +`; + else + try { + var L = bs(e, y.value, 0); + g = + d.id.toString(16) + + ':C' + + Es(Ct(L)) + + ` +`; + } catch (p) { + a(p); + return; + } + e.completedRegularChunks.push(pn(g)), + e.abortableTasks.delete(d), + e.cacheController.signal.removeEventListener('abort', u), + un(e), + Or(e); + } else + try { + (d.model = y.value), + e.pendingChunks++, + Bu(e, d), + un(e), + i.next().then(r, a); + } catch (p) { + a(p); + } + } + function a(y) { + d.status === 0 && + (e.cacheController.signal.removeEventListener('abort', u), + Un(e, d, y), + un(e), + typeof i.throw == 'function' && i.throw(y).then(a, a)); + } + function u() { + if (d.status === 0) { + var y = e.cacheController.signal; + y.removeEventListener('abort', u); + var g = y.reason; + e.type === 21 + ? (e.abortableTasks.delete(d), ri(d), oi(d, e)) + : (Un(e, d, y.reason), un(e)), + typeof i.throw == 'function' && i.throw(g).then(a, a); + } + } + s = s === i; + var d = os( + e, + t.model, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + ); + return ( + e.pendingChunks++, + (t = + d.id.toString(16) + + ':' + + (s ? 'x' : 'X') + + ` +`), + e.completedRegularChunks.push(pn(t)), + e.cacheController.signal.addEventListener('abort', u), + i.next().then(r, a), + Ct(d.id) + ); + } + function Ut(e, t, s) { + (s = Es(s)), + (t = pn( + ':H' + + t + + s + + ` +` + )), + e.completedHintChunks.push(t), + un(e); + } + function bd(e) { + if (e.status === 'fulfilled') return e.value; + throw e.status === 'rejected' ? e.reason : e; + } + function Cd(e, t, s) { + switch (s.status) { + case 'fulfilled': + return s.value; + case 'rejected': + break; + default: + typeof s.status != 'string' && + ((s.status = 'pending'), + s.then( + function (i) { + s.status === 'pending' && + ((s.status = 'fulfilled'), (s.value = i)); + }, + function (i) { + s.status === 'pending' && + ((s.status = 'rejected'), (s.reason = i)); + } + )); + } + return {$$typeof: $i, _payload: s, _init: bd}; + } + function au() {} + function wd(e, t, s, i) { + if (typeof i != 'object' || i === null || i.$$typeof === rs) return i; + if (typeof i.then == 'function') return Cd(e, t, i); + var r = Iu(i); + return r + ? ((e = {}), + (e[Symbol.iterator] = function () { + return r.call(i); + }), + e) + : typeof i[Ss] != 'function' || + (typeof ReadableStream == 'function' && i instanceof ReadableStream) + ? i + : ((e = {}), + (e[Ss] = function () { + return i[Ss](); + }), + e); + } + function lu(e, t, s, i, r) { + var a = t.thenableState; + if ( + ((t.thenableState = null), + (ta = 0), + (ni = a), + (r = i(r, void 0)), + e.status === 12) + ) + throw ( + (typeof r == 'object' && + r !== null && + typeof r.then == 'function' && + r.$$typeof !== rs && + r.then(au, au), + null) + ); + return ( + (r = wd(e, t, i, r)), + (i = t.keyPath), + (a = t.implicitSlot), + s !== null + ? (t.keyPath = i === null ? s : i + ',' + s) + : i === null && (t.implicitSlot = !0), + (e = qi(e, t, Lr, '', r)), + (t.keyPath = i), + (t.implicitSlot = a), + e + ); + } + function cu(e, t, s) { + return t.keyPath !== null + ? ((e = [In, ua, t.keyPath, {children: s}]), t.implicitSlot ? [e] : e) + : s; + } + var is = 0; + function uu(e, t) { + return ( + (t = os( + e, + t.model, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + )), + Vi(e, t), + ws(t.id) + ); + } + function ia(e, t, s, i, r, a) { + if (r != null) + throw Error( + 'Refs cannot be used in Server Components, nor passed to Client Components.' + ); + if (typeof s == 'function' && s.$$typeof !== rs && s.$$typeof !== ca) + return lu(e, t, i, s, a); + if (s === ua && i === null) + return ( + (s = t.implicitSlot), + t.keyPath === null && (t.implicitSlot = !0), + (a = qi(e, t, Lr, '', a.children)), + (t.implicitSlot = s), + a + ); + if (s != null && typeof s == 'object' && s.$$typeof !== rs) + switch (s.$$typeof) { + case $i: + var u = s._init; + if (((s = u(s._payload)), e.status === 12)) throw null; + return ia(e, t, s, i, r, a); + case wu: + return lu(e, t, i, s.render, a); + case Su: + return ia(e, t, s.type, i, r, a); + } + else + typeof s == 'string' && + ((r = t.formatContext), + (u = ld(r, s, a)), + r !== u && a.children != null && bs(e, a.children, u)); + return ( + (e = i), + (i = t.keyPath), + e === null ? (e = i) : i !== null && (e = i + ',' + e), + (a = [In, s, e, a]), + (t = t.implicitSlot && e !== null ? [a] : a), + t + ); + } + function Vi(e, t) { + var s = e.pingedTasks; + s.push(t), + s.length === 1 && + ((e.flushScheduled = e.destination !== null), + e.type === 21 || e.status === 10 + ? vu(function () { + return ra(e); + }) + : Bi(function () { + return ra(e); + })); + } + function os(e, t, s, i, r, a) { + e.pendingChunks++; + var u = e.nextChunkId++; + typeof t != 'object' || + t === null || + s !== null || + i || + e.writtenObjects.set(t, Ct(u)); + var d = { + id: u, + status: 0, + model: t, + keyPath: s, + implicitSlot: i, + formatContext: r, + ping: function () { + return Vi(e, d); + }, + toJSON: function (y, g) { + is += y.length; + var L = d.keyPath, + p = d.implicitSlot; + try { + var h = qi(e, d, this, y, g); + } catch (x) { + if ( + ((y = d.model), + (y = + typeof y == 'object' && + y !== null && + (y.$$typeof === In || y.$$typeof === $i)), + e.status === 12) + ) + (d.status = 3), + e.type === 21 + ? ((L = e.nextChunkId++), (L = y ? ws(L) : Ct(L)), (h = L)) + : ((L = e.fatalError), (h = y ? ws(L) : Ct(L))); + else if ( + ((g = x === pa ? Eu() : x), + typeof g == 'object' && g !== null && typeof g.then == 'function') + ) { + h = os( + e, + d.model, + d.keyPath, + d.implicitSlot, + d.formatContext, + e.abortableTasks + ); + var T = h.ping; + g.then(T, T), + (h.thenableState = Au()), + (d.keyPath = L), + (d.implicitSlot = p), + (h = y ? ws(h.id) : Ct(h.id)); + } else + (d.keyPath = L), + (d.implicitSlot = p), + e.pendingChunks++, + (L = e.nextChunkId++), + (p = Kn(e, g, d)), + Rr(e, L, p), + (h = y ? ws(L) : Ct(L)); + } + return h; + }, + thenableState: null, + }; + return a.add(d), d; + } + function Ct(e) { + return '$' + e.toString(16); + } + function ws(e) { + return '$L' + e.toString(16); + } + function Lu(e, t, s) { + return ( + (e = Es(s)), + (t = + t.toString(16) + + ':' + + e + + ` +`), + pn(t) + ); + } + function pu(e, t, s, i) { + var r = i.$$async ? i.$$id + '#async' : i.$$id, + a = e.writtenClientReferences, + u = a.get(r); + if (u !== void 0) return t[0] === In && s === '1' ? ws(u) : Ct(u); + try { + var d = e.bundlerConfig, + y = i.$$id; + u = ''; + var g = d[y]; + if (g) u = g.name; + else { + var L = y.lastIndexOf('#'); + if ((L !== -1 && ((u = y.slice(L + 1)), (g = d[y.slice(0, L)])), !g)) + throw Error( + 'Could not find the module "' + + y + + '" in the React Client Manifest. This is probably a bug in the React Server Components bundler.' + ); + } + if (g.async === !0 && i.$$async === !0) + throw Error( + 'The module "' + + y + + '" is marked as an async ESM module but was loaded as a CJS proxy. This is probably a bug in the React Server Components bundler.' + ); + var p = + g.async === !0 || i.$$async === !0 + ? [g.id, g.chunks, u, 1] + : [g.id, g.chunks, u]; + e.pendingChunks++; + var h = e.nextChunkId++, + T = Es(p), + x = + h.toString(16) + + ':I' + + T + + ` +`, + w = pn(x); + return ( + e.completedImportChunks.push(w), + a.set(r, h), + t[0] === In && s === '1' ? ws(h) : Ct(h) + ); + } catch (S) { + return ( + e.pendingChunks++, + (t = e.nextChunkId++), + (s = Kn(e, S, null)), + Rr(e, t, s), + Ct(t) + ); + } + } + function bs(e, t, s) { + return (t = os(e, t, null, !1, s, e.abortableTasks)), Fu(e, t), t.id; + } + function Yt(e, t, s) { + e.pendingChunks++; + var i = e.nextChunkId++; + return Kt(e, i, t, s, !1), Ct(i); + } + function Sd(e, t) { + function s(y) { + if (u.status === 0) + if (y.done) + e.cacheController.signal.removeEventListener('abort', r), Vi(e, u); + else return a.push(y.value), d.read().then(s).catch(i); + } + function i(y) { + u.status === 0 && + (e.cacheController.signal.removeEventListener('abort', r), + Un(e, u, y), + un(e), + d.cancel(y).then(i, i)); + } + function r() { + if (u.status === 0) { + var y = e.cacheController.signal; + y.removeEventListener('abort', r), + (y = y.reason), + e.type === 21 + ? (e.abortableTasks.delete(u), ri(u), oi(u, e)) + : (Un(e, u, y), un(e)), + d.cancel(y).then(i, i); + } + } + var a = [t.type], + u = os(e, a, null, !1, 0, e.abortableTasks), + d = t.stream().getReader(); + return ( + e.cacheController.signal.addEventListener('abort', r), + d.read().then(s).catch(i), + '$B' + u.id.toString(16) + ); + } + var ss = !1; + function qi(e, t, s, i, r) { + if (((t.model = r), r === In)) return '$'; + if (r === null) return null; + if (typeof r == 'object') { + switch (r.$$typeof) { + case In: + var a = null, + u = e.writtenObjects; + if (t.keyPath === null && !t.implicitSlot) { + var d = u.get(r); + if (d !== void 0) + if (ss === r) ss = null; + else return d; + else + i.indexOf(':') === -1 && + ((s = u.get(s)), + s !== void 0 && ((a = s + ':' + i), u.set(r, a))); + } + return 3200 < is + ? uu(e, t) + : ((i = r.props), + (s = i.ref), + (e = ia(e, t, r.type, r.key, s !== void 0 ? s : null, i)), + typeof e == 'object' && + e !== null && + a !== null && + (u.has(e) || u.set(e, a)), + e); + case $i: + if (3200 < is) return uu(e, t); + if ( + ((t.thenableState = null), + (i = r._init), + (r = i(r._payload)), + e.status === 12) + ) + throw null; + return qi(e, t, Lr, '', r); + case pd: + throw Error(`A React Element from an older version of React was rendered. This is not supported. It can happen if: +- Multiple copies of the "react" package is used. +- A library pre-bundled an old copy of "react" or "react/jsx-runtime". +- A compiler tries to "inline" JSX instead of using the runtime.`); + } + if (r.$$typeof === rs) return pu(e, s, i, r); + if ( + e.temporaryReferences !== void 0 && + ((a = e.temporaryReferences.get(r)), a !== void 0) + ) + return '$T' + a; + if ( + ((a = e.writtenObjects), (u = a.get(r)), typeof r.then == 'function') + ) { + if (u !== void 0) { + if (t.keyPath !== null || t.implicitSlot) + return '$@' + ou(e, t, r).toString(16); + if (ss === r) ss = null; + else return u; + } + return (e = '$@' + ou(e, t, r).toString(16)), a.set(r, e), e; + } + if (u !== void 0) + if (ss === r) { + if (u !== Ct(t.id)) return u; + ss = null; + } else return u; + else if (i.indexOf(':') === -1 && ((u = a.get(s)), u !== void 0)) { + if (((d = i), kn(s) && s[0] === In)) + switch (i) { + case '1': + d = 'type'; + break; + case '2': + d = 'key'; + break; + case '3': + d = 'props'; + break; + case '4': + d = '_owner'; + } + a.set(r, u + ':' + d); + } + if (kn(r)) return cu(e, t, r); + if (r instanceof Map) + return (r = Array.from(r)), '$Q' + bs(e, r, 0).toString(16); + if (r instanceof Set) + return (r = Array.from(r)), '$W' + bs(e, r, 0).toString(16); + if (typeof FormData == 'function' && r instanceof FormData) + return (r = Array.from(r.entries())), '$K' + bs(e, r, 0).toString(16); + if (r instanceof Error) return '$Z'; + if (r instanceof ArrayBuffer) return Yt(e, 'A', new Uint8Array(r)); + if (r instanceof Int8Array) return Yt(e, 'O', r); + if (r instanceof Uint8Array) return Yt(e, 'o', r); + if (r instanceof Uint8ClampedArray) return Yt(e, 'U', r); + if (r instanceof Int16Array) return Yt(e, 'S', r); + if (r instanceof Uint16Array) return Yt(e, 's', r); + if (r instanceof Int32Array) return Yt(e, 'L', r); + if (r instanceof Uint32Array) return Yt(e, 'l', r); + if (r instanceof Float32Array) return Yt(e, 'G', r); + if (r instanceof Float64Array) return Yt(e, 'g', r); + if (r instanceof BigInt64Array) return Yt(e, 'M', r); + if (r instanceof BigUint64Array) return Yt(e, 'm', r); + if (r instanceof DataView) return Yt(e, 'V', r); + if (typeof Blob == 'function' && r instanceof Blob) return Sd(e, r); + if ((a = Iu(r))) + return ( + (i = a.call(r)), + i === r + ? ((r = Array.from(i)), '$i' + bs(e, r, 0).toString(16)) + : cu(e, t, Array.from(i)) + ); + if (typeof ReadableStream == 'function' && r instanceof ReadableStream) + return gd(e, t, r); + if (((a = r[Ss]), typeof a == 'function')) + return ( + t.keyPath !== null + ? ((e = [In, ua, t.keyPath, {children: r}]), + (e = t.implicitSlot ? [e] : e)) + : ((i = a.call(r)), (e = _d(e, t, r, i))), + e + ); + if (r instanceof Date) return '$D' + r.toJSON(); + if (((e = ii(r)), e !== vd && (e === null || ii(e) !== null))) + throw Error( + 'Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.' + + _s(s, i) + ); + return r; + } + if (typeof r == 'string') + return ( + (is += r.length), + r[r.length - 1] === 'Z' && s[i] instanceof Date + ? '$D' + r + : 1024 <= r.length && la !== null + ? (e.pendingChunks++, (t = e.nextChunkId++), Du(e, t, r, !1), Ct(t)) + : ((e = r[0] === '$' ? '$' + r : r), e) + ); + if (typeof r == 'boolean') return r; + if (typeof r == 'number') + return Number.isFinite(r) + ? r === 0 && 1 / r === -1 / 0 + ? '$-0' + : r + : r === 1 / 0 + ? '$Infinity' + : r === -1 / 0 + ? '$-Infinity' + : '$NaN'; + if (typeof r > 'u') return '$undefined'; + if (typeof r == 'function') { + if (r.$$typeof === rs) return pu(e, s, i, r); + if (r.$$typeof === Ar) + return ( + (t = e.writtenServerReferences), + (i = t.get(r)), + i !== void 0 + ? (e = '$h' + i.toString(16)) + : ((i = r.$$bound), + (i = i === null ? null : Promise.resolve(i)), + (e = bs(e, {id: r.$$id, bound: i}, 0)), + t.set(r, e), + (e = '$h' + e.toString(16))), + e + ); + if ( + e.temporaryReferences !== void 0 && + ((e = e.temporaryReferences.get(r)), e !== void 0) + ) + return '$T' + e; + throw r.$$typeof === ca + ? Error( + 'Could not reference an opaque temporary reference. This is likely due to misconfiguring the temporaryReferences options on the server.' + ) + : /^on[A-Z]/.test(i) + ? Error( + 'Event handlers cannot be passed to Client Component props.' + + _s(s, i) + + ` +If you need interactivity, consider converting part of this to a Client Component.` + ) + : Error( + 'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.' + + _s(s, i) + ); + } + if (typeof r == 'symbol') { + if (((t = e.writtenSymbols), (a = t.get(r)), a !== void 0)) + return Ct(a); + if (((a = r.description), Symbol.for(a) !== r)) + throw Error( + 'Only global symbols received from Symbol.for(...) can be passed to Client Components. The symbol Symbol.for(' + + (r.description + ') cannot be found among global symbols.') + + _s(s, i) + ); + return ( + e.pendingChunks++, + (i = e.nextChunkId++), + (s = Lu(e, i, '$S' + a)), + e.completedImportChunks.push(s), + t.set(r, i), + Ct(i) + ); + } + if (typeof r == 'bigint') return '$n' + r.toString(10); + throw Error( + 'Type ' + + typeof r + + ' is not supported in Client Component props.' + + _s(s, i) + ); + } + function Kn(e, t) { + var s = st; + st = null; + try { + var i = e.onError, + r = i(t); + } finally { + st = s; + } + if (r != null && typeof r != 'string') + throw Error( + 'onError returned something with a type other than "string". onError should return a string and may return null or undefined but must not return anything else. It received something of type "' + + typeof r + + '" instead' + ); + return r || ''; + } + function Ki(e, t) { + var s = e.onFatalError; + s(t), + e.destination !== null + ? ((e.status = 14), xu(e.destination, t)) + : ((e.status = 13), (e.fatalError = t)), + e.cacheController.abort( + Error('The render was aborted due to a fatal error.', {cause: t}) + ); + } + function Rr(e, t, s) { + (s = {digest: s}), + (t = + t.toString(16) + + ':E' + + Es(s) + + ` +`), + (t = pn(t)), + e.completedErrorChunks.push(t); + } + function Ou(e, t, s) { + (t = + t.toString(16) + + ':' + + s + + ` +`), + (t = pn(t)), + e.completedRegularChunks.push(t); + } + function Kt(e, t, s, i, r) { + r ? e.pendingDebugChunks++ : e.pendingChunks++, + (r = new Uint8Array(i.buffer, i.byteOffset, i.byteLength)), + (i = 2048 < i.byteLength ? r.slice() : r), + (r = i.byteLength), + (t = t.toString(16) + ':' + s + r.toString(16) + ','), + (t = pn(t)), + e.completedRegularChunks.push(t, i); + } + function Du(e, t, s, i) { + if (la === null) + throw Error( + 'Existence of byteLengthOfChunk should have already been checked. This is a bug in React.' + ); + i ? e.pendingDebugChunks++ : e.pendingChunks++, + (s = pn(s)), + (i = s.byteLength), + (t = t.toString(16) + ':T' + i.toString(16) + ','), + (t = pn(t)), + e.completedRegularChunks.push(t, s); + } + function Mu(e, t, s) { + var i = t.id; + typeof s == 'string' && la !== null + ? Du(e, i, s, !1) + : s instanceof ArrayBuffer + ? Kt(e, i, 'A', new Uint8Array(s), !1) + : s instanceof Int8Array + ? Kt(e, i, 'O', s, !1) + : s instanceof Uint8Array + ? Kt(e, i, 'o', s, !1) + : s instanceof Uint8ClampedArray + ? Kt(e, i, 'U', s, !1) + : s instanceof Int16Array + ? Kt(e, i, 'S', s, !1) + : s instanceof Uint16Array + ? Kt(e, i, 's', s, !1) + : s instanceof Int32Array + ? Kt(e, i, 'L', s, !1) + : s instanceof Uint32Array + ? Kt(e, i, 'l', s, !1) + : s instanceof Float32Array + ? Kt(e, i, 'G', s, !1) + : s instanceof Float64Array + ? Kt(e, i, 'g', s, !1) + : s instanceof BigInt64Array + ? Kt(e, i, 'M', s, !1) + : s instanceof BigUint64Array + ? Kt(e, i, 'm', s, !1) + : s instanceof DataView + ? Kt(e, i, 'V', s, !1) + : ((s = Es(s, t.toJSON)), Ou(e, t.id, s)); + } + function Un(e, t, s) { + (t.status = 4), + (s = Kn(e, s, t)), + Rr(e, t.id, s), + e.abortableTasks.delete(t), + Or(e); + } + var Lr = {}; + function Fu(e, t) { + if (t.status === 0) { + t.status = 5; + var s = is; + try { + ss = t.model; + var i = qi(e, t, Lr, '', t.model); + if ( + ((ss = i), + (t.keyPath = null), + (t.implicitSlot = !1), + typeof i == 'object' && i !== null) + ) + e.writtenObjects.set(i, Ct(t.id)), Mu(e, t, i); + else { + var r = Es(i); + Ou(e, t.id, r); + } + (t.status = 1), e.abortableTasks.delete(t), Or(e); + } catch (y) { + if (e.status === 12) + if ((e.abortableTasks.delete(t), (t.status = 0), e.type === 21)) + ri(t), oi(t, e); + else { + var a = e.fatalError; + ha(t), fa(t, e, a); + } + else { + var u = y === pa ? Eu() : y; + if ( + typeof u == 'object' && + u !== null && + typeof u.then == 'function' + ) { + (t.status = 0), (t.thenableState = Au()); + var d = t.ping; + u.then(d, d); + } else Un(e, t, u); + } + } finally { + is = s; + } + } + } + function Bu(e, t) { + var s = is; + try { + Mu(e, t, t.model); + } finally { + is = s; + } + } + function ra(e) { + var t = Is.H; + Is.H = Pu; + var s = st; + Mi = st = e; + try { + var i = e.pingedTasks; + e.pingedTasks = []; + for (var r = 0; r < i.length; r++) Fu(e, i[r]); + ai(e); + } catch (a) { + Kn(e, a, null), Ki(e, a); + } finally { + (Is.H = t), (Mi = null), (st = s); + } + } + function ha(e) { + e.status === 0 && (e.status = 3); + } + function fa(e, t, s) { + e.status === 3 && + ((s = Ct(s)), (e = Lu(t, e.id, s)), t.completedErrorChunks.push(e)); + } + function ri(e) { + e.status === 0 && (e.status = 3); + } + function oi(e, t) { + e.status === 3 && t.pendingChunks--; + } + function ai(e) { + var t = e.destination; + if (t !== null) { + (ln = new Uint8Array(2048)), (cn = 0); + try { + for (var s = e.completedImportChunks, i = 0; i < s.length; i++) + e.pendingChunks--, Cr(t, s[i]); + s.splice(0, i); + var r = e.completedHintChunks; + for (i = 0; i < r.length; i++) Cr(t, r[i]); + r.splice(0, i); + var a = e.completedRegularChunks; + for (i = 0; i < a.length; i++) e.pendingChunks--, Cr(t, a[i]); + a.splice(0, i); + var u = e.completedErrorChunks; + for (i = 0; i < u.length; i++) e.pendingChunks--, Cr(t, u[i]); + u.splice(0, i); + } finally { + (e.flushScheduled = !1), + ln && + 0 < cn && + (t.enqueue(new Uint8Array(ln.buffer, 0, cn)), + (ln = null), + (cn = 0)); + } + } + e.pendingChunks === 0 && + (12 > e.status && + e.cacheController.abort( + Error( + 'This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.' + ) + ), + e.destination !== null && + ((e.status = 14), e.destination.close(), (e.destination = null))); + } + function Vu(e) { + (e.flushScheduled = e.destination !== null), + vu(function () { + return ra(e); + }), + Bi(function () { + e.status === 10 && (e.status = 11); + }); + } + function un(e) { + e.flushScheduled === !1 && + e.pingedTasks.length === 0 && + e.destination !== null && + ((e.flushScheduled = !0), + Bi(function () { + (e.flushScheduled = !1), ai(e); + })); + } + function Or(e) { + e.abortableTasks.size === 0 && ((e = e.onAllReady), e()); + } + function ju(e, t) { + if (e.status === 13) (e.status = 14), xu(t, e.fatalError); + else if (e.status !== 14 && e.destination === null) { + e.destination = t; + try { + ai(e); + } catch (s) { + Kn(e, s, null), Ki(e, s); + } + } + } + function Id(e, t) { + try { + t.forEach(function (i) { + return oi(i, e); + }); + var s = e.onAllReady; + s(), ai(e); + } catch (i) { + Kn(e, i, null), Ki(e, i); + } + } + function Ed(e, t, s) { + try { + t.forEach(function (r) { + return fa(r, e, s); + }); + var i = e.onAllReady; + i(), ai(e); + } catch (r) { + Kn(e, r, null), Ki(e, r); + } + } + function si(e, t) { + if (!(11 < e.status)) + try { + (e.status = 12), e.cacheController.abort(t); + var s = e.abortableTasks; + if (0 < s.size) + if (e.type === 21) + s.forEach(function (d) { + return ri(d, e); + }), + Bi(function () { + return Id(e, s); + }); + else { + var i = + t === void 0 + ? Error( + 'The render was aborted by the server without a reason.' + ) + : typeof t == 'object' && + t !== null && + typeof t.then == 'function' + ? Error( + 'The render was aborted by the server with a promise.' + ) + : t, + r = Kn(e, i, null), + a = e.nextChunkId++; + (e.fatalError = a), + e.pendingChunks++, + Rr(e, a, r, i, !1, null), + s.forEach(function (d) { + return ha(d, e, a); + }), + Bi(function () { + return Ed(e, s, a); + }); + } + else { + var u = e.onAllReady; + u(), ai(e); + } + } catch (d) { + Kn(e, d, null), Ki(e, d); + } + } + function $u(e, t) { + var s = '', + i = e[t]; + if (i) s = i.name; + else { + var r = t.lastIndexOf('#'); + if ((r !== -1 && ((s = t.slice(r + 1)), (i = e[t.slice(0, r)])), !i)) + throw Error( + 'Could not find the module "' + + t + + '" in the React Server Manifest. This is probably a bug in the React Server Components bundler.' + ); + } + return i.async ? [i.id, i.chunks, s, 1] : [i.id, i.chunks, s]; + } + var wr = new Map(); + function hu(e) { + var t = __webpack_require__(e); + return typeof t.then != 'function' || t.status === 'fulfilled' + ? null + : (t.then( + function (s) { + (t.status = 'fulfilled'), (t.value = s); + }, + function (s) { + (t.status = 'rejected'), (t.reason = s); + } + ), + t); + } + function Ad() {} + function qu(e) { + for (var t = e[1], s = [], i = 0; i < t.length; ) { + var r = t[i++], + a = t[i++], + u = wr.get(r); + u === void 0 + ? (Ku.set(r, a), + (a = __webpack_chunk_load__(r)), + s.push(a), + (u = wr.set.bind(wr, r, null)), + a.then(u, Ad), + wr.set(r, a)) + : u !== null && s.push(u); + } + return e.length === 4 + ? s.length === 0 + ? hu(e[0]) + : Promise.all(s).then(function () { + return hu(e[0]); + }) + : 0 < s.length + ? Promise.all(s) + : null; + } + function Fi(e) { + var t = __webpack_require__(e[0]); + if (e.length === 4 && typeof t.then == 'function') + if (t.status === 'fulfilled') t = t.value; + else throw t.reason; + if (e[2] === '*') return t; + if (e[2] === '') return t.__esModule ? t.default : t; + if (Nr.call(t, e[2])) return t[e[2]]; + } + var Ku = new Map(), + Pd = __webpack_require__.u; + __webpack_require__.u = function (e) { + var t = Ku.get(e); + return t !== void 0 ? t : Pd(e); + }; + var Dr = Symbol(); + function Ot(e, t, s) { + (this.status = e), (this.value = t), (this.reason = s); + } + Ot.prototype = Object.create(Promise.prototype); + Ot.prototype.then = function (e, t) { + switch (this.status) { + case 'resolved_model': + Br(this); + } + switch (this.status) { + case 'fulfilled': + if (typeof e == 'function') { + for (var s = this.value, i = 0, r = new Set(); s instanceof Ot; ) { + if ((i++, s === this || r.has(s) || 1e3 < i)) { + typeof t == 'function' && + t(Error('Cannot have cyclic thenables.')); + return; + } + if ((r.add(s), s.status === 'fulfilled')) s = s.value; + else break; + } + e(this.value); + } + break; + case 'pending': + case 'blocked': + typeof e == 'function' && + (this.value === null && (this.value = []), this.value.push(e)), + typeof t == 'function' && + (this.reason === null && (this.reason = []), this.reason.push(t)); + break; + default: + typeof t == 'function' && t(this.reason); + } + }; + var Uu = Object.prototype, + Hu = Array.prototype; + function Mr(e, t, s, i) { + for (var r = 0; r < t.length; r++) { + var a = t[r]; + typeof a == 'function' ? a(s) : zu(e, a, s, i.reason); + } + } + function da(e, t, s) { + for (var i = 0; i < t.length; i++) { + var r = t[i]; + typeof r == 'function' ? r(s) : Pr(e, r.handler, s); + } + } + function Fr(e, t, s) { + if (t.status !== 'pending' && t.status !== 'blocked') t.reason.error(s); + else { + var i = t.reason; + (t.status = 'rejected'), (t.reason = s), i !== null && da(e, i, s); + } + } + function Wu(e, t, s) { + var i = {}; + return new Ot('resolved_model', t, ((i.id = s), (i[Dr] = e), i)); + } + function Gu(e, t, s, i) { + if (t.status !== 'pending') + (t = t.reason), + s[0] === 'C' + ? t.close(s === 'C' ? '"$undefined"' : s.slice(1)) + : t.enqueueModel(s); + else { + var r = t.value, + a = t.reason; + if ( + ((t.status = 'resolved_model'), + (t.value = s), + (s = {}), + (t.reason = ((s.id = i), (s[Dr] = e), s)), + r !== null) + ) + switch ((Br(t), t.status)) { + case 'fulfilled': + Mr(e, r, t.value, t); + break; + case 'blocked': + case 'pending': + if (t.value) for (e = 0; e < r.length; e++) t.value.push(r[e]); + else t.value = r; + if (t.reason) { + if (a) for (r = 0; r < a.length; r++) t.reason.push(a[r]); + } else t.reason = a; + break; + case 'rejected': + a && da(e, a, t.reason); + } + } + } + function fu(e, t, s) { + var i = {}; + return new Ot( + 'resolved_model', + (s ? '{"done":true,"value":' : '{"done":false,"value":') + t + '}', + ((i.id = -1), (i[Dr] = e), i) + ); + } + function ea(e, t, s, i) { + Gu( + e, + t, + (i ? '{"done":true,"value":' : '{"done":false,"value":') + s + '}', + -1 + ); + } + function Nd(e, t, s, i) { + function r(L) { + var p = d.reason, + h = d; + (h.status = 'rejected'), + (h.value = null), + (h.reason = L), + p !== null && da(e, p, L), + Pr(e, g, L); + } + var a = t.id; + if (typeof a != 'string' || i === 'then') return null; + var u = t.$$promise; + if (u !== void 0) + return u.status === 'fulfilled' + ? ((u = u.value), i === '__proto__' ? null : (s[i] = u)) + : (Ye + ? ((a = Ye), a.deps++) + : (a = Ye = + { + chunk: null, + value: null, + reason: null, + deps: 1, + errored: !1, + }), + u.then(aa.bind(null, e, a, s, i), Pr.bind(null, e, a)), + null); + var d = new Ot('blocked', null, null); + t.$$promise = d; + var y = $u(e._bundlerConfig, a); + if (((u = t.bound), (a = qu(y)))) + u instanceof Ot && (a = Promise.all([a, u])); + else if (u instanceof Ot) a = Promise.resolve(u); + else return (u = Fi(y)), (a = d), (a.status = 'fulfilled'), (a.value = u); + if (Ye) { + var g = Ye; + g.deps++; + } else + g = Ye = {chunk: null, value: null, reason: null, deps: 1, errored: !1}; + return ( + a.then(function () { + var L = Fi(y); + if (t.bound) { + var p = t.bound.value; + if (((p = kn(p) ? p.slice(0) : []), 1e3 < p.length)) { + r( + Error( + 'Server Function has too many bound arguments. Received ' + + p.length + + ' but the limit is 1000.' + ) + ); + return; + } + p.unshift(null), (L = L.bind.apply(L, p)); + } + p = d.value; + var h = d; + (h.status = 'fulfilled'), + (h.value = L), + (h.reason = null), + p !== null && Mr(e, p, L, h), + aa(e, g, s, i, L); + }, r), + null + ); + } + function oa(e, t, s, i, r, a) { + if (typeof i == 'string') return Fd(e, t, s, i, r, a); + if (typeof i == 'object' && i !== null) + if ( + (r !== void 0 && + e._temporaryReferences !== void 0 && + e._temporaryReferences.set(i, r), + kn(i)) + ) { + if (a === null) { + var u = {count: 0, fork: !1}; + e._rootArrayContexts.set(i, u); + } else u = a; + for ( + 1 < i.length && (u.fork = !0), $n(u, i.length + 1, e), t = 0; + t < i.length; + t++ + ) + i[t] = oa( + e, + i, + '' + t, + i[t], + r !== void 0 ? r + ':' + t : void 0, + u + ); + } else + for (u in i) + Nr.call(i, u) && + (u === '__proto__' + ? delete i[u] + : ((t = + r !== void 0 && u.indexOf(':') === -1 + ? r + ':' + u + : void 0), + (t = oa(e, i, u, i[u], t, null)), + t !== void 0 ? (i[u] = t) : delete i[u])); + return i; + } + function $n(e, t, s) { + if ((e.count += t) > s._arraySizeLimit && e.fork) + throw Error( + 'Maximum array nesting exceeded. Large nested arrays can be dangerous. Try adding intermediate objects.' + ); + } + var Ye = null; + function Br(e) { + var t = Ye; + Ye = null; + var s = e.reason, + i = s[Dr]; + (s = s.id), (s = s === -1 ? void 0 : s.toString(16)); + var r = e.value; + (e.status = 'blocked'), (e.value = null), (e.reason = null); + try { + var a = JSON.parse(r); + r = {count: 0, fork: !1}; + var u = oa(i, {'': a}, '', a, s, r), + d = e.value; + if (d !== null) + for (e.value = null, e.reason = null, a = 0; a < d.length; a++) { + var y = d[a]; + typeof y == 'function' ? y(u) : zu(i, y, u, r); + } + if (Ye !== null) { + if (Ye.errored) throw Ye.reason; + if (0 < Ye.deps) { + (Ye.value = u), (Ye.reason = r), (Ye.chunk = e); + return; + } + } + (e.status = 'fulfilled'), (e.value = u), (e.reason = r); + } catch (g) { + (e.status = 'rejected'), (e.reason = g); + } finally { + Ye = t; + } + } + function Rd(e, t) { + (e._closed = !0), + (e._closedReason = t), + e._chunks.forEach(function (s) { + s.status === 'pending' + ? Fr(e, s, t) + : s.status === 'fulfilled' && + s.reason !== null && + ((s = s.reason), typeof s.error == 'function' && s.error(t)); + }); + } + function Vr(e, t) { + var s = e._chunks, + i = s.get(t); + return ( + i || + ((i = e._formData.get(e._prefix + t)), + (i = + typeof i == 'string' + ? Wu(e, i, t) + : e._closed + ? new Ot('rejected', null, e._closedReason) + : new Ot('pending', null, null)), + s.set(t, i)), + i + ); + } + function zu(e, t, s, i) { + var r = t.handler, + a = t.parentObject, + u = t.key, + d = t.map, + y = t.path; + try { + for (var g = 0, L = e._rootArrayContexts, p = 1; p < y.length; p++) { + var h = y[p]; + if ( + typeof s != 'object' || + s === null || + (ii(s) !== Uu && ii(s) !== Hu) || + !Nr.call(s, h) + ) + throw Error('Invalid reference.'); + if (((s = s[h]), kn(s))) (g = 0), (i = L.get(s) || i); + else if (((i = null), typeof s == 'string')) g = s.length; + else if (typeof s == 'bigint') { + var T = Math.abs(Number(s)); + g = T === 0 ? 1 : Math.floor(Math.log10(T)) + 1; + } else g = ArrayBuffer.isView(s) ? s.byteLength : 0; + } + var x = d(e, s, a, u), + w = t.arrayRoot; + w !== null && + (i !== null + ? (i.fork && (w.fork = !0), $n(w, i.count, e)) + : 0 < g && $n(w, g, e)); + } catch (S) { + Pr(e, r, S); + return; + } + aa(e, r, a, u, x); + } + function aa(e, t, s, i, r) { + i !== '__proto__' && (s[i] = r), + i === '' && t.value === null && (t.value = r), + t.deps--, + t.deps === 0 && + ((s = t.chunk), + s !== null && + s.status === 'blocked' && + ((i = s.value), + (s.status = 'fulfilled'), + (s.value = t.value), + (s.reason = t.reason), + i !== null && Mr(e, i, t.value, s))); + } + function Pr(e, t, s) { + t.errored || + ((t.errored = !0), + (t.value = null), + (t.reason = s), + (t = t.chunk), + t !== null && t.status === 'blocked' && Fr(e, t, s)); + } + function Di(e, t, s, i, r, a) { + t = t.split(':'); + var u = parseInt(t[0], 16), + d = Vr(e, u); + switch (d.status) { + case 'resolved_model': + Br(d); + } + switch (d.status) { + case 'fulfilled': + (u = d.value), (d = d.reason); + for (var y = 0, g = e._rootArrayContexts, L = 1; L < t.length; L++) { + if ( + ((y = t[L]), + typeof u != 'object' || + u === null || + (ii(u) !== Uu && ii(u) !== Hu) || + !Nr.call(u, y)) + ) + throw Error('Invalid reference.'); + (u = u[y]), + kn(u) + ? ((y = 0), (d = g.get(u) || d)) + : ((d = null), + typeof u == 'string' + ? (y = u.length) + : typeof u == 'bigint' + ? ((y = Math.abs(Number(u))), + (y = y === 0 ? 1 : Math.floor(Math.log10(y)) + 1)) + : (y = ArrayBuffer.isView(u) ? u.byteLength : 0)); + } + return ( + (s = a(e, u, s, i)), + r !== null && + (d !== null + ? (d.fork && (r.fork = !0), $n(r, d.count, e)) + : 0 < y && $n(r, y, e)), + s + ); + case 'blocked': + return ( + Ye + ? ((e = Ye), e.deps++) + : (e = Ye = + { + chunk: null, + value: null, + reason: null, + deps: 1, + errored: !1, + }), + (r = { + handler: e, + parentObject: s, + key: i, + map: a, + path: t, + arrayRoot: r, + }), + d.value === null ? (d.value = [r]) : d.value.push(r), + d.reason === null ? (d.reason = [r]) : d.reason.push(r), + null + ); + case 'pending': + throw Error('Invalid forward reference.'); + default: + return ( + Ye + ? ((Ye.errored = !0), (Ye.value = null), (Ye.reason = d.reason)) + : (Ye = { + chunk: null, + value: null, + reason: d.reason, + deps: 0, + errored: !0, + }), + null + ); + } + } + function Ld(e, t) { + if (!kn(t)) throw Error('Invalid Map initializer.'); + if (t.$$consumed === !0) throw Error('Already initialized Map.'); + return (e = new Map(t)), (t.$$consumed = !0), e; + } + function Od(e, t) { + if (!kn(t)) throw Error('Invalid Set initializer.'); + if (t.$$consumed === !0) throw Error('Already initialized Set.'); + return (e = new Set(t)), (t.$$consumed = !0), e; + } + function Dd(e, t) { + if (!kn(t)) throw Error('Invalid Iterator initializer.'); + if (t.$$consumed === !0) throw Error('Already initialized Iterator.'); + return (e = t[Symbol.iterator]()), (t.$$consumed = !0), e; + } + function Md(e, t, s, i) { + return i === 'then' && typeof t == 'function' ? null : t; + } + function Jt(e, t, s, i, r, a, u) { + function d(L) { + if (!g.errored) { + (g.errored = !0), (g.value = null), (g.reason = L); + var p = g.chunk; + p !== null && p.status === 'blocked' && Fr(e, p, L); + } + } + t = parseInt(t.slice(2), 16); + var y = e._prefix + t; + if (((i = e._chunks), i.has(t))) + throw Error('Already initialized typed array.'); + if ( + (i.set( + t, + new Ot('rejected', null, Error('Already initialized typed array.')) + ), + (t = e._formData.get(y).arrayBuffer()), + Ye) + ) { + var g = Ye; + g.deps++; + } else + g = Ye = {chunk: null, value: null, reason: null, deps: 1, errored: !1}; + return ( + t.then(function (L) { + try { + u !== null && $n(u, L.byteLength, e); + var p = s === ArrayBuffer ? L : new s(L); + y !== '__proto__' && (r[a] = p), + a === '' && g.value === null && (g.value = p); + } catch (h) { + d(h); + return; + } + g.deps--, + g.deps === 0 && + ((L = g.chunk), + L !== null && + L.status === 'blocked' && + ((p = L.value), + (L.status = 'fulfilled'), + (L.value = g.value), + (L.reason = null), + p !== null && Mr(e, p, g.value, L))); + }, d), + null + ); + } + function Xu(e, t, s, i) { + var r = e._chunks; + for ( + s = new Ot('fulfilled', s, i), + r.set(t, s), + e = e._formData.getAll(e._prefix + t), + t = 0; + t < e.length; + t++ + ) + (r = e[t]), + typeof r == 'string' && + (r[0] === 'C' + ? i.close(r === 'C' ? '"$undefined"' : r.slice(1)) + : i.enqueueModel(r)); + } + function du(e, t, s) { + function i(g) { + s !== 'bytes' || ArrayBuffer.isView(g) + ? r.enqueue(g) + : y.error(Error('Invalid data for bytes stream.')); + } + if (((t = parseInt(t.slice(2), 16)), e._chunks.has(t))) + throw Error('Already initialized stream.'); + var r = null, + a = !1, + u = new ReadableStream({ + type: s, + start: function (g) { + r = g; + }, + }), + d = null, + y = { + enqueueModel: function (g) { + if (d === null) { + var L = Wu(e, g, -1); + Br(L), + L.status === 'fulfilled' + ? i(L.value) + : (L.then(i, y.error), (d = L)); + } else { + L = d; + var p = new Ot('pending', null, null); + p.then(i, y.error), + (d = p), + L.then(function () { + d === p && (d = null), Gu(e, p, g, -1); + }); + } + }, + close: function () { + if (!a) + if (((a = !0), d === null)) r.close(); + else { + var g = d; + (d = null), + g.then(function () { + return r.close(); + }); + } + }, + error: function (g) { + if (!a) + if (((a = !0), d === null)) r.error(g); + else { + var L = d; + (d = null), + L.then(function () { + return r.error(g); + }); + } + }, + }; + return Xu(e, t, u, y), u; + } + function ma(e) { + this.next = e; + } + ma.prototype = {}; + ma.prototype[Ss] = function () { + return this; + }; + function mu(e, t, s) { + if (((t = parseInt(t.slice(2), 16)), e._chunks.has(t))) + throw Error('Already initialized stream.'); + var i = [], + r = !1, + a = 0, + u = {}; + return ( + (u = + ((u[Ss] = function () { + var d = 0; + return new ma(function (y) { + if (y !== void 0) + throw Error( + 'Values cannot be passed to next() of AsyncIterables passed to Client Components.' + ); + if (d === i.length) { + if (r) + return new Ot('fulfilled', {done: !0, value: void 0}, null); + i[d] = new Ot('pending', null, null); + } + return i[d++]; + }); + }), + u)), + (s = s ? u[Ss]() : u), + Xu(e, t, s, { + enqueueModel: function (d) { + a === i.length ? (i[a] = fu(e, d, !1)) : ea(e, i[a], d, !1), a++; + }, + close: function (d) { + if (!r) + for ( + r = !0, + a === i.length ? (i[a] = fu(e, d, !0)) : ea(e, i[a], d, !0), + a++; + a < i.length; + + ) + ea(e, i[a++], '"$undefined"', !0); + }, + error: function (d) { + if (!r) + for ( + r = !0, + a === i.length && (i[a] = new Ot('pending', null, null)); + a < i.length; + + ) + Fr(e, i[a++], d); + }, + }), + s + ); + } + function Fd(e, t, s, i, r, a) { + if (i[0] === '$') { + switch (i[1]) { + case '$': + return a !== null && $n(a, i.length - 1, e), i.slice(1); + case '@': + return (t = parseInt(i.slice(2), 16)), Vr(e, t); + case 'h': + return (a = i.slice(2)), Di(e, a, t, s, null, Nd); + case 'T': + if (r === void 0 || e._temporaryReferences === void 0) + throw Error( + 'Could not reference an opaque temporary reference. This is likely due to misconfiguring the temporaryReferences options on the server.' + ); + return ud(e._temporaryReferences, r); + case 'Q': + return (a = i.slice(2)), Di(e, a, t, s, null, Ld); + case 'W': + return (a = i.slice(2)), Di(e, a, t, s, null, Od); + case 'K': + for ( + t = i.slice(2), + t = e._prefix + t + '_', + s = new FormData(), + e = e._formData, + a = Array.from(e.keys()), + i = 0; + i < a.length; + i++ + ) + if (((r = a[i]), r.startsWith(t))) { + for ( + var u = e.getAll(r), d = r.slice(t.length), y = 0; + y < u.length; + y++ + ) + s.append(d, u[y]); + e.delete(r); + } + return s; + case 'i': + return (a = i.slice(2)), Di(e, a, t, s, null, Dd); + case 'I': + return 1 / 0; + case '-': + return i === '$-0' ? -0 : -1 / 0; + case 'N': + return NaN; + case 'u': + return; + case 'D': + return new Date(Date.parse(i.slice(2))); + case 'n': + if (((t = i.slice(2)), 300 < t.length)) + throw Error( + 'BigInt is too large. Received ' + + t.length + + ' digits but the limit is 300.' + ); + return a !== null && $n(a, t.length, e), BigInt(t); + case 'A': + return Jt(e, i, ArrayBuffer, 1, t, s, a); + case 'O': + return Jt(e, i, Int8Array, 1, t, s, a); + case 'o': + return Jt(e, i, Uint8Array, 1, t, s, a); + case 'U': + return Jt(e, i, Uint8ClampedArray, 1, t, s, a); + case 'S': + return Jt(e, i, Int16Array, 2, t, s, a); + case 's': + return Jt(e, i, Uint16Array, 2, t, s, a); + case 'L': + return Jt(e, i, Int32Array, 4, t, s, a); + case 'l': + return Jt(e, i, Uint32Array, 4, t, s, a); + case 'G': + return Jt(e, i, Float32Array, 4, t, s, a); + case 'g': + return Jt(e, i, Float64Array, 8, t, s, a); + case 'M': + return Jt(e, i, BigInt64Array, 8, t, s, a); + case 'm': + return Jt(e, i, BigUint64Array, 8, t, s, a); + case 'V': + return Jt(e, i, DataView, 1, t, s, a); + case 'B': + return ( + (t = parseInt(i.slice(2), 16)), e._formData.get(e._prefix + t) + ); + case 'R': + return du(e, i, void 0); + case 'r': + return du(e, i, 'bytes'); + case 'X': + return mu(e, i, !1); + case 'x': + return mu(e, i, !0); + } + return (i = i.slice(1)), Di(e, i, t, s, a, Md); + } + return a !== null && $n(a, i.length, e), i; + } + function Yu(e, t, s) { + var i = + 3 < arguments.length && arguments[3] !== void 0 + ? arguments[3] + : new FormData(), + r = + 4 < arguments.length && arguments[4] !== void 0 ? arguments[4] : 1e6, + a = new Map(); + return { + _bundlerConfig: e, + _prefix: t, + _formData: i, + _chunks: a, + _closed: !1, + _closedReason: null, + _temporaryReferences: s, + _rootArrayContexts: new WeakMap(), + _arraySizeLimit: r, + }; + } + function Ju(e) { + Rd(e, Error('Connection closed.')); + } + function yu(e, t) { + var s = t.id; + if (typeof s != 'string') return null; + var i = $u(e, s); + return ( + (e = qu(i)), + (t = t.bound), + t instanceof Promise + ? Promise.all([t, e]).then(function (r) { + r = r[0]; + var a = Fi(i); + if (1e3 < r.length) + throw Error( + 'Server Function has too many bound arguments. Received ' + + r.length + + ' but the limit is 1000.' + ); + return a.bind.apply(a, [null].concat(r)); + }) + : e + ? Promise.resolve(e).then(function () { + return Fi(i); + }) + : Promise.resolve(Fi(i)) + ); + } + function Qu(e, t, s, i) { + if ( + ((e = Yu(t, s, void 0, e, i)), + Ju(e), + (e = Vr(e, 0)), + e.then(function () {}), + e.status !== 'fulfilled') + ) + throw e.reason; + return e.value; + } + En.createClientModuleProxy = function (e) { + return (e = ti({}, e, !1)), new Proxy(e, _u); + }; + En.createTemporaryReferenceSet = function () { + return new WeakMap(); + }; + En.decodeAction = function (e, t) { + var s = new FormData(), + i = null, + r = new Set(); + return ( + e.forEach(function (a, u) { + u.startsWith('$ACTION_') + ? u.startsWith('$ACTION_REF_') + ? r.has(u) || + (r.add(u), + (a = '$ACTION_' + u.slice(12) + ':'), + (a = Qu(e, t, a)), + (i = yu(t, a))) + : u.startsWith('$ACTION_ID_') && + !r.has(u) && + (r.add(u), (a = u.slice(11)), (i = yu(t, {id: a, bound: null}))) + : s.append(u, a); + }), + i === null + ? null + : i.then(function (a) { + return a.bind(null, s); + }) + ); + }; + En.decodeFormState = function (e, t, s) { + var i = t.get('$ACTION_KEY'); + if (typeof i != 'string') return Promise.resolve(null); + var r = null; + if ( + (t.forEach(function (u, d) { + d.startsWith('$ACTION_REF_') && + ((u = '$ACTION_' + d.slice(12) + ':'), (r = Qu(t, s, u))); + }), + r === null) + ) + return Promise.resolve(null); + var a = r.id; + return Promise.resolve(r.bound).then(function (u) { + return u === null ? null : [e, i, a, u.length - 1]; + }); + }; + En.decodeReply = function (e, t, s) { + if (typeof e == 'string') { + var i = new FormData(); + i.append('0', e), (e = i); + } + return ( + (e = Yu( + t, + '', + s ? s.temporaryReferences : void 0, + e, + s ? s.arraySizeLimit : void 0 + )), + (t = Vr(e, 0)), + Ju(e), + t + ); + }; + En.prerender = function (e, t, s) { + return new Promise(function (i, r) { + var a = new Ru( + 21, + e, + t, + s ? s.onError : void 0, + s ? s.onPostpone : void 0, + function () { + var y = new ReadableStream( + { + type: 'bytes', + pull: function (g) { + ju(a, g); + }, + cancel: function (g) { + (a.destination = null), si(a, g); + }, + }, + {highWaterMark: 0} + ); + i({prelude: y}); + }, + r, + s ? s.identifierPrefix : void 0, + s ? s.temporaryReferences : void 0 + ); + if (s && s.signal) { + var u = s.signal; + if (u.aborted) si(a, u.reason); + else { + var d = function () { + si(a, u.reason), u.removeEventListener('abort', d); + }; + u.addEventListener('abort', d); + } + } + Vu(a); + }); + }; + En.registerClientReference = function (e, t, s) { + return ti(e, t + '#' + s, !1); + }; + En.registerServerReference = function (e, t, s) { + return Object.defineProperties(e, { + $$typeof: {value: Ar}, + $$id: {value: s === null ? t : t + '#' + s, configurable: !0}, + $$bound: {value: null, configurable: !0}, + bind: {value: gu, configurable: !0}, + toString: ed, + }); + }; + En.renderToReadableStream = function (e, t, s) { + var i = new Ru( + 20, + e, + t, + s ? s.onError : void 0, + s ? s.onPostpone : void 0, + Cs, + Cs, + s ? s.identifierPrefix : void 0, + s ? s.temporaryReferences : void 0 + ); + if (s && s.signal) { + var r = s.signal; + if (r.aborted) si(i, r.reason); + else { + var a = function () { + si(i, r.reason), r.removeEventListener('abort', a); + }; + r.addEventListener('abort', a); + } + } + return new ReadableStream( + { + type: 'bytes', + start: function () { + Vu(i); + }, + pull: function (u) { + ju(i, u); + }, + cancel: function (u) { + (i.destination = null), si(i, u); + }, + }, + {highWaterMark: 0} + ); + }; + }); + var e1 = Z((Wn) => { + 'use strict'; + var Hn; + Hn = Zu(); + Wn.renderToReadableStream = Hn.renderToReadableStream; + Wn.decodeReply = Hn.decodeReply; + Wn.decodeAction = Hn.decodeAction; + Wn.decodeFormState = Hn.decodeFormState; + Wn.registerServerReference = Hn.registerServerReference; + Wn.registerClientReference = Hn.registerClientReference; + Wn.createClientModuleProxy = Hn.createClientModuleProxy; + Wn.createTemporaryReferenceSet = Hn.createTemporaryReferenceSet; + }); + var It = Z((ya) => { + 'use strict'; + Object.defineProperty(ya, '__esModule', {value: !0}); + var t1; + (function (e) { + e[(e.NONE = 0)] = 'NONE'; + let s = 1; + e[(e._abstract = s)] = '_abstract'; + let i = s + 1; + e[(e._accessor = i)] = '_accessor'; + let r = i + 1; + e[(e._as = r)] = '_as'; + let a = r + 1; + e[(e._assert = a)] = '_assert'; + let u = a + 1; + e[(e._asserts = u)] = '_asserts'; + let d = u + 1; + e[(e._async = d)] = '_async'; + let y = d + 1; + e[(e._await = y)] = '_await'; + let g = y + 1; + e[(e._checks = g)] = '_checks'; + let L = g + 1; + e[(e._constructor = L)] = '_constructor'; + let p = L + 1; + e[(e._declare = p)] = '_declare'; + let h = p + 1; + e[(e._enum = h)] = '_enum'; + let T = h + 1; + e[(e._exports = T)] = '_exports'; + let x = T + 1; + e[(e._from = x)] = '_from'; + let w = x + 1; + e[(e._get = w)] = '_get'; + let S = w + 1; + e[(e._global = S)] = '_global'; + let A = S + 1; + e[(e._implements = A)] = '_implements'; + let U = A + 1; + e[(e._infer = U)] = '_infer'; + let M = U + 1; + e[(e._interface = M)] = '_interface'; + let c = M + 1; + e[(e._is = c)] = '_is'; + let R = c + 1; + e[(e._keyof = R)] = '_keyof'; + let W = R + 1; + e[(e._mixins = W)] = '_mixins'; + let X = W + 1; + e[(e._module = X)] = '_module'; + let ie = X + 1; + e[(e._namespace = ie)] = '_namespace'; + let pe = ie + 1; + e[(e._of = pe)] = '_of'; + let ae = pe + 1; + e[(e._opaque = ae)] = '_opaque'; + let He = ae + 1; + e[(e._out = He)] = '_out'; + let qe = He + 1; + e[(e._override = qe)] = '_override'; + let Bt = qe + 1; + e[(e._private = Bt)] = '_private'; + let mt = Bt + 1; + e[(e._protected = mt)] = '_protected'; + let kt = mt + 1; + e[(e._proto = kt)] = '_proto'; + let At = kt + 1; + e[(e._public = At)] = '_public'; + let tt = At + 1; + e[(e._readonly = tt)] = '_readonly'; + let nt = tt + 1; + e[(e._require = nt)] = '_require'; + let _t = nt + 1; + e[(e._satisfies = _t)] = '_satisfies'; + let ct = _t + 1; + e[(e._set = ct)] = '_set'; + let wt = ct + 1; + e[(e._static = wt)] = '_static'; + let $t = wt + 1; + e[(e._symbol = $t)] = '_symbol'; + let Pt = $t + 1; + e[(e._type = Pt)] = '_type'; + let qt = Pt + 1; + e[(e._unique = qt)] = '_unique'; + let Tn = qt + 1; + e[(e._using = Tn)] = '_using'; + })(t1 || (ya.ContextualKeyword = t1 = {})); + }); + var be = Z((jr) => { + 'use strict'; + Object.defineProperty(jr, '__esModule', {value: !0}); + var q; + (function (e) { + e[(e.PRECEDENCE_MASK = 15)] = 'PRECEDENCE_MASK'; + let s = 16; + e[(e.IS_KEYWORD = s)] = 'IS_KEYWORD'; + let i = 32; + e[(e.IS_ASSIGN = i)] = 'IS_ASSIGN'; + let r = 64; + e[(e.IS_RIGHT_ASSOCIATIVE = r)] = 'IS_RIGHT_ASSOCIATIVE'; + let a = 128; + e[(e.IS_PREFIX = a)] = 'IS_PREFIX'; + let u = 256; + e[(e.IS_POSTFIX = u)] = 'IS_POSTFIX'; + let d = 512; + e[(e.IS_EXPRESSION_START = d)] = 'IS_EXPRESSION_START'; + let y = 512; + e[(e.num = y)] = 'num'; + let g = 1536; + e[(e.bigint = g)] = 'bigint'; + let L = 2560; + e[(e.decimal = L)] = 'decimal'; + let p = 3584; + e[(e.regexp = p)] = 'regexp'; + let h = 4608; + e[(e.string = h)] = 'string'; + let T = 5632; + e[(e.name = T)] = 'name'; + let x = 6144; + e[(e.eof = x)] = 'eof'; + let w = 7680; + e[(e.bracketL = w)] = 'bracketL'; + let S = 8192; + e[(e.bracketR = S)] = 'bracketR'; + let A = 9728; + e[(e.braceL = A)] = 'braceL'; + let U = 10752; + e[(e.braceBarL = U)] = 'braceBarL'; + let M = 11264; + e[(e.braceR = M)] = 'braceR'; + let c = 12288; + e[(e.braceBarR = c)] = 'braceBarR'; + let R = 13824; + e[(e.parenL = R)] = 'parenL'; + let W = 14336; + e[(e.parenR = W)] = 'parenR'; + let X = 15360; + e[(e.comma = X)] = 'comma'; + let ie = 16384; + e[(e.semi = ie)] = 'semi'; + let pe = 17408; + e[(e.colon = pe)] = 'colon'; + let ae = 18432; + e[(e.doubleColon = ae)] = 'doubleColon'; + let He = 19456; + e[(e.dot = He)] = 'dot'; + let qe = 20480; + e[(e.question = qe)] = 'question'; + let Bt = 21504; + e[(e.questionDot = Bt)] = 'questionDot'; + let mt = 22528; + e[(e.arrow = mt)] = 'arrow'; + let kt = 23552; + e[(e.template = kt)] = 'template'; + let At = 24576; + e[(e.ellipsis = At)] = 'ellipsis'; + let tt = 25600; + e[(e.backQuote = tt)] = 'backQuote'; + let nt = 27136; + e[(e.dollarBraceL = nt)] = 'dollarBraceL'; + let _t = 27648; + e[(e.at = _t)] = 'at'; + let ct = 29184; + e[(e.hash = ct)] = 'hash'; + let wt = 29728; + e[(e.eq = wt)] = 'eq'; + let $t = 30752; + e[(e.assign = $t)] = 'assign'; + let Pt = 32640; + e[(e.preIncDec = Pt)] = 'preIncDec'; + let qt = 33664; + e[(e.postIncDec = qt)] = 'postIncDec'; + let Tn = 34432; + e[(e.bang = Tn)] = 'bang'; + let V = 35456; + e[(e.tilde = V)] = 'tilde'; + let G = 35841; + e[(e.pipeline = G)] = 'pipeline'; + let J = 36866; + e[(e.nullishCoalescing = J)] = 'nullishCoalescing'; + let re = 37890; + e[(e.logicalOR = re)] = 'logicalOR'; + let ve = 38915; + e[(e.logicalAND = ve)] = 'logicalAND'; + let he = 39940; + e[(e.bitwiseOR = he)] = 'bitwiseOR'; + let Ie = 40965; + e[(e.bitwiseXOR = Ie)] = 'bitwiseXOR'; + let Ee = 41990; + e[(e.bitwiseAND = Ee)] = 'bitwiseAND'; + let Le = 43015; + e[(e.equality = Le)] = 'equality'; + let Xe = 44040; + e[(e.lessThan = Xe)] = 'lessThan'; + let We = 45064; + e[(e.greaterThan = We)] = 'greaterThan'; + let Ke = 46088; + e[(e.relationalOrEqual = Ke)] = 'relationalOrEqual'; + let ut = 47113; + e[(e.bitShiftL = ut)] = 'bitShiftL'; + let pt = 48137; + e[(e.bitShiftR = pt)] = 'bitShiftR'; + let bt = 49802; + e[(e.plus = bt)] = 'plus'; + let yt = 50826; + e[(e.minus = yt)] = 'minus'; + let vt = 51723; + e[(e.modulo = vt)] = 'modulo'; + let bn = 52235; + e[(e.star = bn)] = 'star'; + let Dn = 53259; + e[(e.slash = Dn)] = 'slash'; + let Ge = 54348; + e[(e.exponent = Ge)] = 'exponent'; + let St = 55296; + e[(e.jsxName = St)] = 'jsxName'; + let ot = 56320; + e[(e.jsxText = ot)] = 'jsxText'; + let zt = 57344; + e[(e.jsxEmptyText = zt)] = 'jsxEmptyText'; + let Xt = 58880; + e[(e.jsxTagStart = Xt)] = 'jsxTagStart'; + let te = 59392; + e[(e.jsxTagEnd = te)] = 'jsxTagEnd'; + let Cn = 60928; + e[(e.typeParameterStart = Cn)] = 'typeParameterStart'; + let Zn = 61440; + e[(e.nonNullAssertion = Zn)] = 'nonNullAssertion'; + let _i = 62480; + e[(e._break = _i)] = '_break'; + let Mn = 63504; + e[(e._case = Mn)] = '_case'; + let xs = 64528; + e[(e._catch = xs)] = '_catch'; + let Ds = 65552; + e[(e._continue = Ds)] = '_continue'; + let bi = 66576; + e[(e._debugger = bi)] = '_debugger'; + let es = 67600; + e[(e._default = es)] = '_default'; + let Nt = 68624; + e[(e._do = Nt)] = '_do'; + let Rt = 69648; + e[(e._else = Rt)] = '_else'; + let Ue = 70672; + e[(e._finally = Ue)] = '_finally'; + let wn = 71696; + e[(e._for = wn)] = '_for'; + let de = 73232; + e[(e._function = de)] = '_function'; + let Ms = 73744; + e[(e._if = Ms)] = '_if'; + let gs = 74768; + e[(e._return = gs)] = '_return'; + let Ci = 75792; + e[(e._switch = Ci)] = '_switch'; + let ts = 77456; + e[(e._throw = ts)] = '_throw'; + let rn = 77840; + e[(e._try = rn)] = '_try'; + let wi = 78864; + e[(e._var = wi)] = '_var'; + let Fn = 79888; + e[(e._let = Fn)] = '_let'; + let Bn = 80912; + e[(e._const = Bn)] = '_const'; + let Fs = 81936; + e[(e._while = Fs)] = '_while'; + let Si = 82960; + e[(e._with = Si)] = '_with'; + let Bs = 84496; + e[(e._new = Bs)] = '_new'; + let Vs = 85520; + e[(e._this = Vs)] = '_this'; + let js = 86544; + e[(e._super = js)] = '_super'; + let $s = 87568; + e[(e._class = $s)] = '_class'; + let qs = 88080; + e[(e._extends = qs)] = '_extends'; + let Ii = 89104; + e[(e._export = Ii)] = '_export'; + let Ei = 90640; + e[(e._import = Ei)] = '_import'; + let Ai = 91664; + e[(e._yield = Ai)] = '_yield'; + let Pi = 92688; + e[(e._null = Pi)] = '_null'; + let Ks = 93712; + e[(e._true = Ks)] = '_true'; + let Us = 94736; + e[(e._false = Us)] = '_false'; + let Hs = 95256; + e[(e._in = Hs)] = '_in'; + let Ws = 96280; + e[(e._instanceof = Ws)] = '_instanceof'; + let Gs = 97936; + e[(e._typeof = Gs)] = '_typeof'; + let zs = 98960; + e[(e._void = zs)] = '_void'; + let jo = 99984; + e[(e._delete = jo)] = '_delete'; + let $o = 100880; + e[(e._async = $o)] = '_async'; + let mr = 101904; + e[(e._get = mr)] = '_get'; + let qo = 102928; + e[(e._set = qo)] = '_set'; + let Ni = 103952; + e[(e._declare = Ni)] = '_declare'; + let yr = 104976; + e[(e._readonly = yr)] = '_readonly'; + let Ko = 106e3; + e[(e._abstract = Ko)] = '_abstract'; + let le = 107024; + e[(e._static = le)] = '_static'; + let Xs = 107536; + e[(e._public = Xs)] = '_public'; + let on = 108560; + e[(e._private = on)] = '_private'; + let Uo = 109584; + e[(e._protected = Uo)] = '_protected'; + let Ho = 110608; + e[(e._override = Ho)] = '_override'; + let Tr = 112144; + e[(e._as = Tr)] = '_as'; + let Wo = 113168; + e[(e._enum = Wo)] = '_enum'; + let Go = 114192; + e[(e._type = Go)] = '_type'; + let kr = 115216; + e[(e._implements = kr)] = '_implements'; + })(q || (jr.TokenType = q = {})); + function Bd(e) { + switch (e) { + case q.num: + return 'num'; + case q.bigint: + return 'bigint'; + case q.decimal: + return 'decimal'; + case q.regexp: + return 'regexp'; + case q.string: + return 'string'; + case q.name: + return 'name'; + case q.eof: + return 'eof'; + case q.bracketL: + return '['; + case q.bracketR: + return ']'; + case q.braceL: + return '{'; + case q.braceBarL: + return '{|'; + case q.braceR: + return '}'; + case q.braceBarR: + return '|}'; + case q.parenL: + return '('; + case q.parenR: + return ')'; + case q.comma: + return ','; + case q.semi: + return ';'; + case q.colon: + return ':'; + case q.doubleColon: + return '::'; + case q.dot: + return '.'; + case q.question: + return '?'; + case q.questionDot: + return '?.'; + case q.arrow: + return '=>'; + case q.template: + return 'template'; + case q.ellipsis: + return '...'; + case q.backQuote: + return '`'; + case q.dollarBraceL: + return '${'; + case q.at: + return '@'; + case q.hash: + return '#'; + case q.eq: + return '='; + case q.assign: + return '_='; + case q.preIncDec: + return '++/--'; + case q.postIncDec: + return '++/--'; + case q.bang: + return '!'; + case q.tilde: + return '~'; + case q.pipeline: + return '|>'; + case q.nullishCoalescing: + return '??'; + case q.logicalOR: + return '||'; + case q.logicalAND: + return '&&'; + case q.bitwiseOR: + return '|'; + case q.bitwiseXOR: + return '^'; + case q.bitwiseAND: + return '&'; + case q.equality: + return '==/!='; + case q.lessThan: + return '<'; + case q.greaterThan: + return '>'; + case q.relationalOrEqual: + return '<=/>='; + case q.bitShiftL: + return '<<'; + case q.bitShiftR: + return '>>/>>>'; + case q.plus: + return '+'; + case q.minus: + return '-'; + case q.modulo: + return '%'; + case q.star: + return '*'; + case q.slash: + return '/'; + case q.exponent: + return '**'; + case q.jsxName: + return 'jsxName'; + case q.jsxText: + return 'jsxText'; + case q.jsxEmptyText: + return 'jsxEmptyText'; + case q.jsxTagStart: + return 'jsxTagStart'; + case q.jsxTagEnd: + return 'jsxTagEnd'; + case q.typeParameterStart: + return 'typeParameterStart'; + case q.nonNullAssertion: + return 'nonNullAssertion'; + case q._break: + return 'break'; + case q._case: + return 'case'; + case q._catch: + return 'catch'; + case q._continue: + return 'continue'; + case q._debugger: + return 'debugger'; + case q._default: + return 'default'; + case q._do: + return 'do'; + case q._else: + return 'else'; + case q._finally: + return 'finally'; + case q._for: + return 'for'; + case q._function: + return 'function'; + case q._if: + return 'if'; + case q._return: + return 'return'; + case q._switch: + return 'switch'; + case q._throw: + return 'throw'; + case q._try: + return 'try'; + case q._var: + return 'var'; + case q._let: + return 'let'; + case q._const: + return 'const'; + case q._while: + return 'while'; + case q._with: + return 'with'; + case q._new: + return 'new'; + case q._this: + return 'this'; + case q._super: + return 'super'; + case q._class: + return 'class'; + case q._extends: + return 'extends'; + case q._export: + return 'export'; + case q._import: + return 'import'; + case q._yield: + return 'yield'; + case q._null: + return 'null'; + case q._true: + return 'true'; + case q._false: + return 'false'; + case q._in: + return 'in'; + case q._instanceof: + return 'instanceof'; + case q._typeof: + return 'typeof'; + case q._void: + return 'void'; + case q._delete: + return 'delete'; + case q._async: + return 'async'; + case q._get: + return 'get'; + case q._set: + return 'set'; + case q._declare: + return 'declare'; + case q._readonly: + return 'readonly'; + case q._abstract: + return 'abstract'; + case q._static: + return 'static'; + case q._public: + return 'public'; + case q._private: + return 'private'; + case q._protected: + return 'protected'; + case q._override: + return 'override'; + case q._as: + return 'as'; + case q._enum: + return 'enum'; + case q._type: + return 'type'; + case q._implements: + return 'implements'; + default: + return ''; + } + } + jr.formatTokenType = Bd; + }); + var qr = Z((Ui) => { + 'use strict'; + Object.defineProperty(Ui, '__esModule', {value: !0}); + var Vd = It(), + jd = be(), + Ta = class { + constructor(t, s, i) { + (this.startTokenIndex = t), + (this.endTokenIndex = s), + (this.isFunctionScope = i); + } + }; + Ui.Scope = Ta; + var $r = class { + constructor(t, s, i, r, a, u, d, y, g, L, p, h, T) { + (this.potentialArrowAt = t), + (this.noAnonFunctionType = s), + (this.inDisallowConditionalTypesContext = i), + (this.tokensLength = r), + (this.scopesLength = a), + (this.pos = u), + (this.type = d), + (this.contextualKeyword = y), + (this.start = g), + (this.end = L), + (this.isType = p), + (this.scopeDepth = h), + (this.error = T); + } + }; + Ui.StateSnapshot = $r; + var ka = class e { + constructor() { + e.prototype.__init.call(this), + e.prototype.__init2.call(this), + e.prototype.__init3.call(this), + e.prototype.__init4.call(this), + e.prototype.__init5.call(this), + e.prototype.__init6.call(this), + e.prototype.__init7.call(this), + e.prototype.__init8.call(this), + e.prototype.__init9.call(this), + e.prototype.__init10.call(this), + e.prototype.__init11.call(this), + e.prototype.__init12.call(this), + e.prototype.__init13.call(this); + } + __init() { + this.potentialArrowAt = -1; + } + __init2() { + this.noAnonFunctionType = !1; + } + __init3() { + this.inDisallowConditionalTypesContext = !1; + } + __init4() { + this.tokens = []; + } + __init5() { + this.scopes = []; + } + __init6() { + this.pos = 0; + } + __init7() { + this.type = jd.TokenType.eof; + } + __init8() { + this.contextualKeyword = Vd.ContextualKeyword.NONE; + } + __init9() { + this.start = 0; + } + __init10() { + this.end = 0; + } + __init11() { + this.isType = !1; + } + __init12() { + this.scopeDepth = 0; + } + __init13() { + this.error = null; + } + snapshot() { + return new $r( + this.potentialArrowAt, + this.noAnonFunctionType, + this.inDisallowConditionalTypesContext, + this.tokens.length, + this.scopes.length, + this.pos, + this.type, + this.contextualKeyword, + this.start, + this.end, + this.isType, + this.scopeDepth, + this.error + ); + } + restoreFromSnapshot(t) { + (this.potentialArrowAt = t.potentialArrowAt), + (this.noAnonFunctionType = t.noAnonFunctionType), + (this.inDisallowConditionalTypesContext = + t.inDisallowConditionalTypesContext), + (this.tokens.length = t.tokensLength), + (this.scopes.length = t.scopesLength), + (this.pos = t.pos), + (this.type = t.type), + (this.contextualKeyword = t.contextualKeyword), + (this.start = t.start), + (this.end = t.end), + (this.isType = t.isType), + (this.scopeDepth = t.scopeDepth), + (this.error = t.error); + } + }; + Ui.default = ka; + }); + var Qt = Z((Kr) => { + 'use strict'; + Object.defineProperty(Kr, '__esModule', {value: !0}); + var as; + (function (e) { + e[(e.backSpace = 8)] = 'backSpace'; + let s = 10; + e[(e.lineFeed = s)] = 'lineFeed'; + let i = 9; + e[(e.tab = i)] = 'tab'; + let r = 13; + e[(e.carriageReturn = r)] = 'carriageReturn'; + let a = 14; + e[(e.shiftOut = a)] = 'shiftOut'; + let u = 32; + e[(e.space = u)] = 'space'; + let d = 33; + e[(e.exclamationMark = d)] = 'exclamationMark'; + let y = 34; + e[(e.quotationMark = y)] = 'quotationMark'; + let g = 35; + e[(e.numberSign = g)] = 'numberSign'; + let L = 36; + e[(e.dollarSign = L)] = 'dollarSign'; + let p = 37; + e[(e.percentSign = p)] = 'percentSign'; + let h = 38; + e[(e.ampersand = h)] = 'ampersand'; + let T = 39; + e[(e.apostrophe = T)] = 'apostrophe'; + let x = 40; + e[(e.leftParenthesis = x)] = 'leftParenthesis'; + let w = 41; + e[(e.rightParenthesis = w)] = 'rightParenthesis'; + let S = 42; + e[(e.asterisk = S)] = 'asterisk'; + let A = 43; + e[(e.plusSign = A)] = 'plusSign'; + let U = 44; + e[(e.comma = U)] = 'comma'; + let M = 45; + e[(e.dash = M)] = 'dash'; + let c = 46; + e[(e.dot = c)] = 'dot'; + let R = 47; + e[(e.slash = R)] = 'slash'; + let W = 48; + e[(e.digit0 = W)] = 'digit0'; + let X = 49; + e[(e.digit1 = X)] = 'digit1'; + let ie = 50; + e[(e.digit2 = ie)] = 'digit2'; + let pe = 51; + e[(e.digit3 = pe)] = 'digit3'; + let ae = 52; + e[(e.digit4 = ae)] = 'digit4'; + let He = 53; + e[(e.digit5 = He)] = 'digit5'; + let qe = 54; + e[(e.digit6 = qe)] = 'digit6'; + let Bt = 55; + e[(e.digit7 = Bt)] = 'digit7'; + let mt = 56; + e[(e.digit8 = mt)] = 'digit8'; + let kt = 57; + e[(e.digit9 = kt)] = 'digit9'; + let At = 58; + e[(e.colon = At)] = 'colon'; + let tt = 59; + e[(e.semicolon = tt)] = 'semicolon'; + let nt = 60; + e[(e.lessThan = nt)] = 'lessThan'; + let _t = 61; + e[(e.equalsTo = _t)] = 'equalsTo'; + let ct = 62; + e[(e.greaterThan = ct)] = 'greaterThan'; + let wt = 63; + e[(e.questionMark = wt)] = 'questionMark'; + let $t = 64; + e[(e.atSign = $t)] = 'atSign'; + let Pt = 65; + e[(e.uppercaseA = Pt)] = 'uppercaseA'; + let qt = 66; + e[(e.uppercaseB = qt)] = 'uppercaseB'; + let Tn = 67; + e[(e.uppercaseC = Tn)] = 'uppercaseC'; + let V = 68; + e[(e.uppercaseD = V)] = 'uppercaseD'; + let G = 69; + e[(e.uppercaseE = G)] = 'uppercaseE'; + let J = 70; + e[(e.uppercaseF = J)] = 'uppercaseF'; + let re = 71; + e[(e.uppercaseG = re)] = 'uppercaseG'; + let ve = 72; + e[(e.uppercaseH = ve)] = 'uppercaseH'; + let he = 73; + e[(e.uppercaseI = he)] = 'uppercaseI'; + let Ie = 74; + e[(e.uppercaseJ = Ie)] = 'uppercaseJ'; + let Ee = 75; + e[(e.uppercaseK = Ee)] = 'uppercaseK'; + let Le = 76; + e[(e.uppercaseL = Le)] = 'uppercaseL'; + let Xe = 77; + e[(e.uppercaseM = Xe)] = 'uppercaseM'; + let We = 78; + e[(e.uppercaseN = We)] = 'uppercaseN'; + let Ke = 79; + e[(e.uppercaseO = Ke)] = 'uppercaseO'; + let ut = 80; + e[(e.uppercaseP = ut)] = 'uppercaseP'; + let pt = 81; + e[(e.uppercaseQ = pt)] = 'uppercaseQ'; + let bt = 82; + e[(e.uppercaseR = bt)] = 'uppercaseR'; + let yt = 83; + e[(e.uppercaseS = yt)] = 'uppercaseS'; + let vt = 84; + e[(e.uppercaseT = vt)] = 'uppercaseT'; + let bn = 85; + e[(e.uppercaseU = bn)] = 'uppercaseU'; + let Dn = 86; + e[(e.uppercaseV = Dn)] = 'uppercaseV'; + let Ge = 87; + e[(e.uppercaseW = Ge)] = 'uppercaseW'; + let St = 88; + e[(e.uppercaseX = St)] = 'uppercaseX'; + let ot = 89; + e[(e.uppercaseY = ot)] = 'uppercaseY'; + let zt = 90; + e[(e.uppercaseZ = zt)] = 'uppercaseZ'; + let Xt = 91; + e[(e.leftSquareBracket = Xt)] = 'leftSquareBracket'; + let te = 92; + e[(e.backslash = te)] = 'backslash'; + let Cn = 93; + e[(e.rightSquareBracket = Cn)] = 'rightSquareBracket'; + let Zn = 94; + e[(e.caret = Zn)] = 'caret'; + let _i = 95; + e[(e.underscore = _i)] = 'underscore'; + let Mn = 96; + e[(e.graveAccent = Mn)] = 'graveAccent'; + let xs = 97; + e[(e.lowercaseA = xs)] = 'lowercaseA'; + let Ds = 98; + e[(e.lowercaseB = Ds)] = 'lowercaseB'; + let bi = 99; + e[(e.lowercaseC = bi)] = 'lowercaseC'; + let es = 100; + e[(e.lowercaseD = es)] = 'lowercaseD'; + let Nt = 101; + e[(e.lowercaseE = Nt)] = 'lowercaseE'; + let Rt = 102; + e[(e.lowercaseF = Rt)] = 'lowercaseF'; + let Ue = 103; + e[(e.lowercaseG = Ue)] = 'lowercaseG'; + let wn = 104; + e[(e.lowercaseH = wn)] = 'lowercaseH'; + let de = 105; + e[(e.lowercaseI = de)] = 'lowercaseI'; + let Ms = 106; + e[(e.lowercaseJ = Ms)] = 'lowercaseJ'; + let gs = 107; + e[(e.lowercaseK = gs)] = 'lowercaseK'; + let Ci = 108; + e[(e.lowercaseL = Ci)] = 'lowercaseL'; + let ts = 109; + e[(e.lowercaseM = ts)] = 'lowercaseM'; + let rn = 110; + e[(e.lowercaseN = rn)] = 'lowercaseN'; + let wi = 111; + e[(e.lowercaseO = wi)] = 'lowercaseO'; + let Fn = 112; + e[(e.lowercaseP = Fn)] = 'lowercaseP'; + let Bn = 113; + e[(e.lowercaseQ = Bn)] = 'lowercaseQ'; + let Fs = 114; + e[(e.lowercaseR = Fs)] = 'lowercaseR'; + let Si = 115; + e[(e.lowercaseS = Si)] = 'lowercaseS'; + let Bs = 116; + e[(e.lowercaseT = Bs)] = 'lowercaseT'; + let Vs = 117; + e[(e.lowercaseU = Vs)] = 'lowercaseU'; + let js = 118; + e[(e.lowercaseV = js)] = 'lowercaseV'; + let $s = 119; + e[(e.lowercaseW = $s)] = 'lowercaseW'; + let qs = 120; + e[(e.lowercaseX = qs)] = 'lowercaseX'; + let Ii = 121; + e[(e.lowercaseY = Ii)] = 'lowercaseY'; + let Ei = 122; + e[(e.lowercaseZ = Ei)] = 'lowercaseZ'; + let Ai = 123; + e[(e.leftCurlyBrace = Ai)] = 'leftCurlyBrace'; + let Pi = 124; + e[(e.verticalBar = Pi)] = 'verticalBar'; + let Ks = 125; + e[(e.rightCurlyBrace = Ks)] = 'rightCurlyBrace'; + let Us = 126; + e[(e.tilde = Us)] = 'tilde'; + let Hs = 160; + e[(e.nonBreakingSpace = Hs)] = 'nonBreakingSpace'; + let Ws = 5760; + e[(e.oghamSpaceMark = Ws)] = 'oghamSpaceMark'; + let Gs = 8232; + e[(e.lineSeparator = Gs)] = 'lineSeparator'; + let zs = 8233; + e[(e.paragraphSeparator = zs)] = 'paragraphSeparator'; + })(as || (Kr.charCodes = as = {})); + function $d(e) { + return ( + (e >= as.digit0 && e <= as.digit9) || + (e >= as.lowercaseA && e <= as.lowercaseF) || + (e >= as.uppercaseA && e <= as.uppercaseF) + ); + } + Kr.isDigit = $d; + }); + var Zt = Z((ft) => { + 'use strict'; + Object.defineProperty(ft, '__esModule', {value: !0}); + function qd(e) { + return e && e.__esModule ? e : {default: e}; + } + var Kd = qr(), + Ud = qd(Kd), + Hd = Qt(); + ft.isJSXEnabled; + ft.isTypeScriptEnabled; + ft.isFlowEnabled; + ft.state; + ft.input; + ft.nextContextId; + function Wd() { + return ft.nextContextId++; + } + ft.getNextContextId = Wd; + function Gd(e) { + if ('pos' in e) { + let t = n1(e.pos); + (e.message += ` (${t.line}:${t.column})`), (e.loc = t); + } + return e; + } + ft.augmentError = Gd; + var Ur = class { + constructor(t, s) { + (this.line = t), (this.column = s); + } + }; + ft.Loc = Ur; + function n1(e) { + let t = 1, + s = 1; + for (let i = 0; i < e; i++) + ft.input.charCodeAt(i) === Hd.charCodes.lineFeed ? (t++, (s = 1)) : s++; + return new Ur(t, s); + } + ft.locationForIndex = n1; + function zd(e, t, s, i) { + (ft.input = e), + (ft.state = new Ud.default()), + (ft.nextContextId = 1), + (ft.isJSXEnabled = t), + (ft.isTypeScriptEnabled = s), + (ft.isFlowEnabled = i); + } + ft.initParser = zd; + }); + var cs = Z((tn) => { + 'use strict'; + Object.defineProperty(tn, '__esModule', {value: !0}); + var ls = xt(), + As = be(), + Hr = Qt(), + en = Zt(); + function Xd(e) { + return en.state.contextualKeyword === e; + } + tn.isContextual = Xd; + function Yd(e) { + let t = ls.lookaheadTypeAndKeyword.call(void 0); + return t.type === As.TokenType.name && t.contextualKeyword === e; + } + tn.isLookaheadContextual = Yd; + function s1(e) { + return ( + en.state.contextualKeyword === e && + ls.eat.call(void 0, As.TokenType.name) + ); + } + tn.eatContextual = s1; + function Jd(e) { + s1(e) || Wr(); + } + tn.expectContextual = Jd; + function i1() { + return ( + ls.match.call(void 0, As.TokenType.eof) || + ls.match.call(void 0, As.TokenType.braceR) || + r1() + ); + } + tn.canInsertSemicolon = i1; + function r1() { + let e = en.state.tokens[en.state.tokens.length - 1], + t = e ? e.end : 0; + for (let s = t; s < en.state.start; s++) { + let i = en.input.charCodeAt(s); + if ( + i === Hr.charCodes.lineFeed || + i === Hr.charCodes.carriageReturn || + i === 8232 || + i === 8233 + ) + return !0; + } + return !1; + } + tn.hasPrecedingLineBreak = r1; + function Qd() { + let e = ls.nextTokenStart.call(void 0); + for (let t = en.state.end; t < e; t++) { + let s = en.input.charCodeAt(t); + if ( + s === Hr.charCodes.lineFeed || + s === Hr.charCodes.carriageReturn || + s === 8232 || + s === 8233 + ) + return !0; + } + return !1; + } + tn.hasFollowingLineBreak = Qd; + function o1() { + return ls.eat.call(void 0, As.TokenType.semi) || i1(); + } + tn.isLineTerminator = o1; + function Zd() { + o1() || Wr('Unexpected token, expected ";"'); + } + tn.semicolon = Zd; + function em(e) { + ls.eat.call(void 0, e) || + Wr( + `Unexpected token, expected "${As.formatTokenType.call(void 0, e)}"` + ); + } + tn.expect = em; + function Wr(e = 'Unexpected token', t = en.state.start) { + if (en.state.error) return; + let s = new SyntaxError(e); + (s.pos = t), + (en.state.error = s), + (en.state.pos = en.input.length), + ls.finishToken.call(void 0, As.TokenType.eof); + } + tn.unexpected = Wr; + }); + var xa = Z((Ps) => { + 'use strict'; + Object.defineProperty(Ps, '__esModule', {value: !0}); + var va = Qt(), + tm = [ + 9, + 11, + 12, + va.charCodes.space, + va.charCodes.nonBreakingSpace, + va.charCodes.oghamSpaceMark, + 8192, + 8193, + 8194, + 8195, + 8196, + 8197, + 8198, + 8199, + 8200, + 8201, + 8202, + 8239, + 8287, + 12288, + 65279, + ]; + Ps.WHITESPACE_CHARS = tm; + var nm = /(?:\s|\/\/.*|\/\*[^]*?\*\/)*/g; + Ps.skipWhiteSpace = nm; + var sm = new Uint8Array(65536); + Ps.IS_WHITESPACE = sm; + for (let e of Ps.WHITESPACE_CHARS) Ps.IS_WHITESPACE[e] = 1; + }); + var li = Z((vn) => { + 'use strict'; + Object.defineProperty(vn, '__esModule', {value: !0}); + var a1 = Qt(), + im = xa(); + function rm(e) { + if (e < 48) return e === 36; + if (e < 58) return !0; + if (e < 65) return !1; + if (e < 91) return !0; + if (e < 97) return e === 95; + if (e < 123) return !0; + if (e < 128) return !1; + throw new Error('Should not be called with non-ASCII char code.'); + } + var om = new Uint8Array(65536); + vn.IS_IDENTIFIER_CHAR = om; + for (let e = 0; e < 128; e++) vn.IS_IDENTIFIER_CHAR[e] = rm(e) ? 1 : 0; + for (let e = 128; e < 65536; e++) vn.IS_IDENTIFIER_CHAR[e] = 1; + for (let e of im.WHITESPACE_CHARS) vn.IS_IDENTIFIER_CHAR[e] = 0; + vn.IS_IDENTIFIER_CHAR[8232] = 0; + vn.IS_IDENTIFIER_CHAR[8233] = 0; + var am = vn.IS_IDENTIFIER_CHAR.slice(); + vn.IS_IDENTIFIER_START = am; + for (let e = a1.charCodes.digit0; e <= a1.charCodes.digit9; e++) + vn.IS_IDENTIFIER_START[e] = 0; + }); + var l1 = Z((ga) => { + 'use strict'; + Object.defineProperty(ga, '__esModule', {value: !0}); + var ge = It(), + Ce = be(), + lm = new Int32Array([ + -1, + 27, + 783, + 918, + 1755, + 2376, + 2862, + 3483, + -1, + 3699, + -1, + 4617, + 4752, + 4833, + 5130, + 5508, + 5940, + -1, + 6480, + 6939, + 7749, + 8181, + 8451, + 8613, + -1, + 8829, + -1, + -1, + -1, + 54, + 243, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 432, + -1, + -1, + -1, + 675, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 81, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 108, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 135, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 162, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 189, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 216, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._abstract << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 270, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 297, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 324, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 351, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 378, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 405, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._accessor << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._as << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 459, + -1, + -1, + -1, + -1, + -1, + 594, + -1, + -1, + -1, + -1, + -1, + -1, + 486, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 513, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 540, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._assert << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 567, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._asserts << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 621, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 648, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._async << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 702, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 729, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 756, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._await << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 810, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 837, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 864, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 891, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._break << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 945, + -1, + -1, + -1, + -1, + -1, + -1, + 1107, + -1, + -1, + -1, + 1242, + -1, + -1, + 1350, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 972, + 1026, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 999, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._case << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1053, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1080, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._catch << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1134, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1161, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1188, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1215, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._checks << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1269, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1296, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1323, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._class << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1377, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1404, + 1620, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1431, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._const << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1458, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1485, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1512, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1539, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1566, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1593, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._constructor << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1647, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1674, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1701, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1728, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._continue << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1782, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2349, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1809, + 1971, + -1, + -1, + 2106, + -1, + -1, + -1, + -1, + -1, + 2241, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1836, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1863, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1890, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1917, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1944, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._debugger << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 1998, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2025, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2052, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2079, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._declare << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2133, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2160, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2187, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2214, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._default << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2268, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2295, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2322, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._delete << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._do << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2403, + -1, + 2484, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2565, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2430, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2457, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._else << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2511, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2538, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._enum << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2592, + -1, + -1, + -1, + 2727, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2619, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2646, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2673, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._export << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2700, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._exports << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2754, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2781, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2808, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2835, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._extends << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2889, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2997, + -1, + -1, + -1, + -1, + -1, + 3159, + -1, + -1, + 3213, + -1, + -1, + 3294, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2916, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2943, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 2970, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._false << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3024, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3051, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3078, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3105, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3132, + -1, + (Ce.TokenType._finally << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3186, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._for << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3240, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3267, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._from << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3321, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3348, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3375, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3402, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3429, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3456, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._function << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3510, + -1, + -1, + -1, + -1, + -1, + -1, + 3564, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3537, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._get << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3591, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3618, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3645, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3672, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._global << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3726, + -1, + -1, + -1, + -1, + -1, + -1, + 3753, + 4077, + -1, + -1, + -1, + -1, + 4590, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._if << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3780, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3807, + -1, + -1, + 3996, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3834, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3861, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3888, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3915, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3942, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 3969, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._implements << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4023, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4050, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._import << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._in << 1) + 1, + -1, + -1, + -1, + -1, + -1, + 4104, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4185, + 4401, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4131, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4158, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._infer << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4212, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4239, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4266, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4293, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4320, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4347, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4374, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._instanceof << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4428, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4455, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4482, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4509, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4536, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4563, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._interface << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._is << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4644, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4671, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4698, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4725, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._keyof << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4779, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4806, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._let << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4860, + -1, + -1, + -1, + -1, + -1, + 4995, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4887, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4914, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4941, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 4968, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._mixins << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5022, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5049, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5076, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5103, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._module << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5157, + -1, + -1, + -1, + 5373, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5427, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5184, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5211, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5238, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5265, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5292, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5319, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5346, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._namespace << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5400, + -1, + -1, + -1, + (Ce.TokenType._new << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5454, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5481, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._null << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5535, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5562, + -1, + -1, + -1, + -1, + 5697, + 5751, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._of << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5589, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5616, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5643, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5670, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._opaque << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5724, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._out << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5778, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5805, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5832, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5859, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5886, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5913, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._override << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5967, + -1, + -1, + 6345, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 5994, + -1, + -1, + -1, + -1, + -1, + 6129, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6021, + -1, + -1, + -1, + -1, + -1, + 6048, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6075, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6102, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._private << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6156, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6183, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6318, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6210, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6237, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6264, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6291, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._protected << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._proto << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6372, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6399, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6426, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6453, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._public << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6507, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6534, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6696, + -1, + -1, + 6831, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6561, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6588, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6615, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6642, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6669, + -1, + ge.ContextualKeyword._readonly << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6723, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6750, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6777, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6804, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._require << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6858, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6885, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6912, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._return << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6966, + -1, + -1, + -1, + 7182, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7236, + 7371, + -1, + 7479, + -1, + 7614, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 6993, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7020, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7047, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7074, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7101, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7128, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7155, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._satisfies << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7209, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._set << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7263, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7290, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7317, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7344, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._static << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7398, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7425, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7452, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._super << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7506, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7533, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7560, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7587, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._switch << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7641, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7668, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7695, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7722, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._symbol << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7776, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7938, + -1, + -1, + -1, + -1, + -1, + -1, + 8046, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7803, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7857, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7830, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._this << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7884, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7911, + -1, + -1, + -1, + (Ce.TokenType._throw << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 7965, + -1, + -1, + -1, + 8019, + -1, + -1, + -1, + -1, + -1, + -1, + 7992, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._true << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._try << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8073, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8100, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._type << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8127, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8154, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._typeof << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8208, + -1, + -1, + -1, + -1, + 8343, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8235, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8262, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8289, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8316, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._unique << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8370, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8397, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8424, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ge.ContextualKeyword._using << 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8478, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8532, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8505, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._var << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8559, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8586, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._void << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8640, + 8748, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8667, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8694, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8721, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._while << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8775, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8802, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._with << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8856, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8883, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8910, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + 8937, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + (Ce.TokenType._yield << 1) + 1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + -1, + ]); + ga.READ_WORD_TREE = lm; + }); + var h1 = Z((ba) => { + 'use strict'; + Object.defineProperty(ba, '__esModule', {value: !0}); + var xn = Zt(), + us = Qt(), + c1 = li(), + _a = xt(), + u1 = l1(), + p1 = be(); + function cm() { + let e = 0, + t = 0, + s = xn.state.pos; + for ( + ; + s < xn.input.length && + ((t = xn.input.charCodeAt(s)), + !(t < us.charCodes.lowercaseA || t > us.charCodes.lowercaseZ)); + + ) { + let r = u1.READ_WORD_TREE[e + (t - us.charCodes.lowercaseA) + 1]; + if (r === -1) break; + (e = r), s++; + } + let i = u1.READ_WORD_TREE[e]; + if (i > -1 && !c1.IS_IDENTIFIER_CHAR[t]) { + (xn.state.pos = s), + i & 1 + ? _a.finishToken.call(void 0, i >>> 1) + : _a.finishToken.call(void 0, p1.TokenType.name, i >>> 1); + return; + } + for (; s < xn.input.length; ) { + let r = xn.input.charCodeAt(s); + if (c1.IS_IDENTIFIER_CHAR[r]) s++; + else if (r === us.charCodes.backslash) { + if ( + ((s += 2), xn.input.charCodeAt(s) === us.charCodes.leftCurlyBrace) + ) { + for ( + ; + s < xn.input.length && + xn.input.charCodeAt(s) !== us.charCodes.rightCurlyBrace; + + ) + s++; + s++; + } + } else if ( + r === us.charCodes.atSign && + xn.input.charCodeAt(s + 1) === us.charCodes.atSign + ) + s += 2; + else break; + } + (xn.state.pos = s), _a.finishToken.call(void 0, p1.TokenType.name); + } + ba.default = cm; + }); + var xt = Z((Be) => { + 'use strict'; + Object.defineProperty(Be, '__esModule', {value: !0}); + function um(e) { + return e && e.__esModule ? e : {default: e}; + } + var b = Zt(), + ci = cs(), + F = Qt(), + d1 = li(), + wa = xa(), + pm = It(), + hm = h1(), + fm = um(hm), + ne = be(), + it; + (function (e) { + e[(e.Access = 0)] = 'Access'; + let s = 1; + e[(e.ExportAccess = s)] = 'ExportAccess'; + let i = s + 1; + e[(e.TopLevelDeclaration = i)] = 'TopLevelDeclaration'; + let r = i + 1; + e[(e.FunctionScopedDeclaration = r)] = 'FunctionScopedDeclaration'; + let a = r + 1; + e[(e.BlockScopedDeclaration = a)] = 'BlockScopedDeclaration'; + let u = a + 1; + e[(e.ObjectShorthandTopLevelDeclaration = u)] = + 'ObjectShorthandTopLevelDeclaration'; + let d = u + 1; + e[(e.ObjectShorthandFunctionScopedDeclaration = d)] = + 'ObjectShorthandFunctionScopedDeclaration'; + let y = d + 1; + e[(e.ObjectShorthandBlockScopedDeclaration = y)] = + 'ObjectShorthandBlockScopedDeclaration'; + let g = y + 1; + e[(e.ObjectShorthand = g)] = 'ObjectShorthand'; + let L = g + 1; + e[(e.ImportDeclaration = L)] = 'ImportDeclaration'; + let p = L + 1; + e[(e.ObjectKey = p)] = 'ObjectKey'; + let h = p + 1; + e[(e.ImportAccess = h)] = 'ImportAccess'; + })(it || (Be.IdentifierRole = it = {})); + var f1; + (function (e) { + e[(e.NoChildren = 0)] = 'NoChildren'; + let s = 1; + e[(e.OneChild = s)] = 'OneChild'; + let i = s + 1; + e[(e.StaticChildren = i)] = 'StaticChildren'; + let r = i + 1; + e[(e.KeyAfterPropSpread = r)] = 'KeyAfterPropSpread'; + })(f1 || (Be.JSXRole = f1 = {})); + function dm(e) { + let t = e.identifierRole; + return ( + t === it.TopLevelDeclaration || + t === it.FunctionScopedDeclaration || + t === it.BlockScopedDeclaration || + t === it.ObjectShorthandTopLevelDeclaration || + t === it.ObjectShorthandFunctionScopedDeclaration || + t === it.ObjectShorthandBlockScopedDeclaration + ); + } + Be.isDeclaration = dm; + function mm(e) { + let t = e.identifierRole; + return ( + t === it.FunctionScopedDeclaration || + t === it.BlockScopedDeclaration || + t === it.ObjectShorthandFunctionScopedDeclaration || + t === it.ObjectShorthandBlockScopedDeclaration + ); + } + Be.isNonTopLevelDeclaration = mm; + function ym(e) { + let t = e.identifierRole; + return ( + t === it.TopLevelDeclaration || + t === it.ObjectShorthandTopLevelDeclaration || + t === it.ImportDeclaration + ); + } + Be.isTopLevelDeclaration = ym; + function Tm(e) { + let t = e.identifierRole; + return ( + t === it.TopLevelDeclaration || + t === it.BlockScopedDeclaration || + t === it.ObjectShorthandTopLevelDeclaration || + t === it.ObjectShorthandBlockScopedDeclaration + ); + } + Be.isBlockScopedDeclaration = Tm; + function km(e) { + let t = e.identifierRole; + return ( + t === it.FunctionScopedDeclaration || + t === it.ObjectShorthandFunctionScopedDeclaration + ); + } + Be.isFunctionScopedDeclaration = km; + function vm(e) { + return ( + e.identifierRole === it.ObjectShorthandTopLevelDeclaration || + e.identifierRole === it.ObjectShorthandBlockScopedDeclaration || + e.identifierRole === it.ObjectShorthandFunctionScopedDeclaration + ); + } + Be.isObjectShorthandDeclaration = vm; + var Hi = class { + constructor() { + (this.type = b.state.type), + (this.contextualKeyword = b.state.contextualKeyword), + (this.start = b.state.start), + (this.end = b.state.end), + (this.scopeDepth = b.state.scopeDepth), + (this.isType = b.state.isType), + (this.identifierRole = null), + (this.jsxRole = null), + (this.shadowsGlobal = !1), + (this.isAsyncOperation = !1), + (this.contextId = null), + (this.rhsEndIndex = null), + (this.isExpression = !1), + (this.numNullishCoalesceStarts = 0), + (this.numNullishCoalesceEnds = 0), + (this.isOptionalChainStart = !1), + (this.isOptionalChainEnd = !1), + (this.subscriptStartIndex = null), + (this.nullishStartIndex = null); + } + }; + Be.Token = Hi; + function zr() { + b.state.tokens.push(new Hi()), k1(); + } + Be.next = zr; + function xm() { + b.state.tokens.push(new Hi()), (b.state.start = b.state.pos), Km(); + } + Be.nextTemplateToken = xm; + function gm() { + b.state.type === ne.TokenType.assign && --b.state.pos, jm(); + } + Be.retokenizeSlashAsRegex = gm; + function _m(e) { + for (let s = b.state.tokens.length - e; s < b.state.tokens.length; s++) + b.state.tokens[s].isType = !0; + let t = b.state.isType; + return (b.state.isType = !0), t; + } + Be.pushTypeContext = _m; + function bm(e) { + b.state.isType = e; + } + Be.popTypeContext = bm; + function m1(e) { + return Sa(e) ? (zr(), !0) : !1; + } + Be.eat = m1; + function Cm(e) { + let t = b.state.isType; + (b.state.isType = !0), m1(e), (b.state.isType = t); + } + Be.eatTypeToken = Cm; + function Sa(e) { + return b.state.type === e; + } + Be.match = Sa; + function wm() { + let e = b.state.snapshot(); + zr(); + let t = b.state.type; + return b.state.restoreFromSnapshot(e), t; + } + Be.lookaheadType = wm; + var Gr = class { + constructor(t, s) { + (this.type = t), (this.contextualKeyword = s); + } + }; + Be.TypeAndKeyword = Gr; + function Sm() { + let e = b.state.snapshot(); + zr(); + let t = b.state.type, + s = b.state.contextualKeyword; + return b.state.restoreFromSnapshot(e), new Gr(t, s); + } + Be.lookaheadTypeAndKeyword = Sm; + function y1() { + return T1(b.state.pos); + } + Be.nextTokenStart = y1; + function T1(e) { + wa.skipWhiteSpace.lastIndex = e; + let t = wa.skipWhiteSpace.exec(b.input); + return e + t[0].length; + } + Be.nextTokenStartSince = T1; + function Im() { + return b.input.charCodeAt(y1()); + } + Be.lookaheadCharCode = Im; + function k1() { + if ( + (x1(), (b.state.start = b.state.pos), b.state.pos >= b.input.length) + ) { + let e = b.state.tokens; + e.length >= 2 && + e[e.length - 1].start >= b.input.length && + e[e.length - 2].start >= b.input.length && + ci.unexpected.call(void 0, 'Unexpectedly reached the end of input.'), + Ve(ne.TokenType.eof); + return; + } + Em(b.input.charCodeAt(b.state.pos)); + } + Be.nextToken = k1; + function Em(e) { + d1.IS_IDENTIFIER_START[e] || + e === F.charCodes.backslash || + (e === F.charCodes.atSign && + b.input.charCodeAt(b.state.pos + 1) === F.charCodes.atSign) + ? fm.default.call(void 0) + : _1(e); + } + function Am() { + for ( + ; + b.input.charCodeAt(b.state.pos) !== F.charCodes.asterisk || + b.input.charCodeAt(b.state.pos + 1) !== F.charCodes.slash; + + ) + if ((b.state.pos++, b.state.pos > b.input.length)) { + ci.unexpected.call(void 0, 'Unterminated comment', b.state.pos - 2); + return; + } + b.state.pos += 2; + } + function v1(e) { + let t = b.input.charCodeAt((b.state.pos += e)); + if (b.state.pos < b.input.length) + for ( + ; + t !== F.charCodes.lineFeed && + t !== F.charCodes.carriageReturn && + t !== F.charCodes.lineSeparator && + t !== F.charCodes.paragraphSeparator && + ++b.state.pos < b.input.length; + + ) + t = b.input.charCodeAt(b.state.pos); + } + Be.skipLineComment = v1; + function x1() { + for (; b.state.pos < b.input.length; ) { + let e = b.input.charCodeAt(b.state.pos); + switch (e) { + case F.charCodes.carriageReturn: + b.input.charCodeAt(b.state.pos + 1) === F.charCodes.lineFeed && + ++b.state.pos; + case F.charCodes.lineFeed: + case F.charCodes.lineSeparator: + case F.charCodes.paragraphSeparator: + ++b.state.pos; + break; + case F.charCodes.slash: + switch (b.input.charCodeAt(b.state.pos + 1)) { + case F.charCodes.asterisk: + (b.state.pos += 2), Am(); + break; + case F.charCodes.slash: + v1(2); + break; + default: + return; + } + break; + default: + if (wa.IS_WHITESPACE[e]) ++b.state.pos; + else return; + } + } + } + Be.skipSpace = x1; + function Ve(e, t = pm.ContextualKeyword.NONE) { + (b.state.end = b.state.pos), + (b.state.type = e), + (b.state.contextualKeyword = t); + } + Be.finishToken = Ve; + function Pm() { + let e = b.input.charCodeAt(b.state.pos + 1); + if (e >= F.charCodes.digit0 && e <= F.charCodes.digit9) { + b1(!0); + return; + } + e === F.charCodes.dot && + b.input.charCodeAt(b.state.pos + 2) === F.charCodes.dot + ? ((b.state.pos += 3), Ve(ne.TokenType.ellipsis)) + : (++b.state.pos, Ve(ne.TokenType.dot)); + } + function Nm() { + b.input.charCodeAt(b.state.pos + 1) === F.charCodes.equalsTo + ? Fe(ne.TokenType.assign, 2) + : Fe(ne.TokenType.slash, 1); + } + function Rm(e) { + let t = + e === F.charCodes.asterisk ? ne.TokenType.star : ne.TokenType.modulo, + s = 1, + i = b.input.charCodeAt(b.state.pos + 1); + e === F.charCodes.asterisk && + i === F.charCodes.asterisk && + (s++, + (i = b.input.charCodeAt(b.state.pos + 2)), + (t = ne.TokenType.exponent)), + i === F.charCodes.equalsTo && + b.input.charCodeAt(b.state.pos + 2) !== F.charCodes.greaterThan && + (s++, (t = ne.TokenType.assign)), + Fe(t, s); + } + function Lm(e) { + let t = b.input.charCodeAt(b.state.pos + 1); + if (t === e) { + b.input.charCodeAt(b.state.pos + 2) === F.charCodes.equalsTo + ? Fe(ne.TokenType.assign, 3) + : Fe( + e === F.charCodes.verticalBar + ? ne.TokenType.logicalOR + : ne.TokenType.logicalAND, + 2 + ); + return; + } + if (e === F.charCodes.verticalBar) { + if (t === F.charCodes.greaterThan) { + Fe(ne.TokenType.pipeline, 2); + return; + } else if (t === F.charCodes.rightCurlyBrace && b.isFlowEnabled) { + Fe(ne.TokenType.braceBarR, 2); + return; + } + } + if (t === F.charCodes.equalsTo) { + Fe(ne.TokenType.assign, 2); + return; + } + Fe( + e === F.charCodes.verticalBar + ? ne.TokenType.bitwiseOR + : ne.TokenType.bitwiseAND, + 1 + ); + } + function Om() { + b.input.charCodeAt(b.state.pos + 1) === F.charCodes.equalsTo + ? Fe(ne.TokenType.assign, 2) + : Fe(ne.TokenType.bitwiseXOR, 1); + } + function Dm(e) { + let t = b.input.charCodeAt(b.state.pos + 1); + if (t === e) { + Fe(ne.TokenType.preIncDec, 2); + return; + } + t === F.charCodes.equalsTo + ? Fe(ne.TokenType.assign, 2) + : e === F.charCodes.plusSign + ? Fe(ne.TokenType.plus, 1) + : Fe(ne.TokenType.minus, 1); + } + function Mm() { + let e = b.input.charCodeAt(b.state.pos + 1); + if (e === F.charCodes.lessThan) { + if (b.input.charCodeAt(b.state.pos + 2) === F.charCodes.equalsTo) { + Fe(ne.TokenType.assign, 3); + return; + } + b.state.isType + ? Fe(ne.TokenType.lessThan, 1) + : Fe(ne.TokenType.bitShiftL, 2); + return; + } + e === F.charCodes.equalsTo + ? Fe(ne.TokenType.relationalOrEqual, 2) + : Fe(ne.TokenType.lessThan, 1); + } + function g1() { + if (b.state.isType) { + Fe(ne.TokenType.greaterThan, 1); + return; + } + let e = b.input.charCodeAt(b.state.pos + 1); + if (e === F.charCodes.greaterThan) { + let t = + b.input.charCodeAt(b.state.pos + 2) === F.charCodes.greaterThan + ? 3 + : 2; + if (b.input.charCodeAt(b.state.pos + t) === F.charCodes.equalsTo) { + Fe(ne.TokenType.assign, t + 1); + return; + } + Fe(ne.TokenType.bitShiftR, t); + return; + } + e === F.charCodes.equalsTo + ? Fe(ne.TokenType.relationalOrEqual, 2) + : Fe(ne.TokenType.greaterThan, 1); + } + function Fm() { + b.state.type === ne.TokenType.greaterThan && ((b.state.pos -= 1), g1()); + } + Be.rescan_gt = Fm; + function Bm(e) { + let t = b.input.charCodeAt(b.state.pos + 1); + if (t === F.charCodes.equalsTo) { + Fe( + ne.TokenType.equality, + b.input.charCodeAt(b.state.pos + 2) === F.charCodes.equalsTo ? 3 : 2 + ); + return; + } + if (e === F.charCodes.equalsTo && t === F.charCodes.greaterThan) { + (b.state.pos += 2), Ve(ne.TokenType.arrow); + return; + } + Fe(e === F.charCodes.equalsTo ? ne.TokenType.eq : ne.TokenType.bang, 1); + } + function Vm() { + let e = b.input.charCodeAt(b.state.pos + 1), + t = b.input.charCodeAt(b.state.pos + 2); + e === F.charCodes.questionMark && !(b.isFlowEnabled && b.state.isType) + ? t === F.charCodes.equalsTo + ? Fe(ne.TokenType.assign, 3) + : Fe(ne.TokenType.nullishCoalescing, 2) + : e === F.charCodes.dot && + !(t >= F.charCodes.digit0 && t <= F.charCodes.digit9) + ? ((b.state.pos += 2), Ve(ne.TokenType.questionDot)) + : (++b.state.pos, Ve(ne.TokenType.question)); + } + function _1(e) { + switch (e) { + case F.charCodes.numberSign: + ++b.state.pos, Ve(ne.TokenType.hash); + return; + case F.charCodes.dot: + Pm(); + return; + case F.charCodes.leftParenthesis: + ++b.state.pos, Ve(ne.TokenType.parenL); + return; + case F.charCodes.rightParenthesis: + ++b.state.pos, Ve(ne.TokenType.parenR); + return; + case F.charCodes.semicolon: + ++b.state.pos, Ve(ne.TokenType.semi); + return; + case F.charCodes.comma: + ++b.state.pos, Ve(ne.TokenType.comma); + return; + case F.charCodes.leftSquareBracket: + ++b.state.pos, Ve(ne.TokenType.bracketL); + return; + case F.charCodes.rightSquareBracket: + ++b.state.pos, Ve(ne.TokenType.bracketR); + return; + case F.charCodes.leftCurlyBrace: + b.isFlowEnabled && + b.input.charCodeAt(b.state.pos + 1) === F.charCodes.verticalBar + ? Fe(ne.TokenType.braceBarL, 2) + : (++b.state.pos, Ve(ne.TokenType.braceL)); + return; + case F.charCodes.rightCurlyBrace: + ++b.state.pos, Ve(ne.TokenType.braceR); + return; + case F.charCodes.colon: + b.input.charCodeAt(b.state.pos + 1) === F.charCodes.colon + ? Fe(ne.TokenType.doubleColon, 2) + : (++b.state.pos, Ve(ne.TokenType.colon)); + return; + case F.charCodes.questionMark: + Vm(); + return; + case F.charCodes.atSign: + ++b.state.pos, Ve(ne.TokenType.at); + return; + case F.charCodes.graveAccent: + ++b.state.pos, Ve(ne.TokenType.backQuote); + return; + case F.charCodes.digit0: { + let t = b.input.charCodeAt(b.state.pos + 1); + if ( + t === F.charCodes.lowercaseX || + t === F.charCodes.uppercaseX || + t === F.charCodes.lowercaseO || + t === F.charCodes.uppercaseO || + t === F.charCodes.lowercaseB || + t === F.charCodes.uppercaseB + ) { + $m(); + return; + } + } + case F.charCodes.digit1: + case F.charCodes.digit2: + case F.charCodes.digit3: + case F.charCodes.digit4: + case F.charCodes.digit5: + case F.charCodes.digit6: + case F.charCodes.digit7: + case F.charCodes.digit8: + case F.charCodes.digit9: + b1(!1); + return; + case F.charCodes.quotationMark: + case F.charCodes.apostrophe: + qm(e); + return; + case F.charCodes.slash: + Nm(); + return; + case F.charCodes.percentSign: + case F.charCodes.asterisk: + Rm(e); + return; + case F.charCodes.verticalBar: + case F.charCodes.ampersand: + Lm(e); + return; + case F.charCodes.caret: + Om(); + return; + case F.charCodes.plusSign: + case F.charCodes.dash: + Dm(e); + return; + case F.charCodes.lessThan: + Mm(); + return; + case F.charCodes.greaterThan: + g1(); + return; + case F.charCodes.equalsTo: + case F.charCodes.exclamationMark: + Bm(e); + return; + case F.charCodes.tilde: + Fe(ne.TokenType.tilde, 1); + return; + default: + break; + } + ci.unexpected.call( + void 0, + `Unexpected character '${String.fromCharCode(e)}'`, + b.state.pos + ); + } + Be.getTokenFromCode = _1; + function Fe(e, t) { + (b.state.pos += t), Ve(e); + } + function jm() { + let e = b.state.pos, + t = !1, + s = !1; + for (;;) { + if (b.state.pos >= b.input.length) { + ci.unexpected.call(void 0, 'Unterminated regular expression', e); + return; + } + let i = b.input.charCodeAt(b.state.pos); + if (t) t = !1; + else { + if (i === F.charCodes.leftSquareBracket) s = !0; + else if (i === F.charCodes.rightSquareBracket && s) s = !1; + else if (i === F.charCodes.slash && !s) break; + t = i === F.charCodes.backslash; + } + ++b.state.pos; + } + ++b.state.pos, C1(), Ve(ne.TokenType.regexp); + } + function Ca() { + for (;;) { + let e = b.input.charCodeAt(b.state.pos); + if ( + (e >= F.charCodes.digit0 && e <= F.charCodes.digit9) || + e === F.charCodes.underscore + ) + b.state.pos++; + else break; + } + } + function $m() { + for (b.state.pos += 2; ; ) { + let t = b.input.charCodeAt(b.state.pos); + if ( + (t >= F.charCodes.digit0 && t <= F.charCodes.digit9) || + (t >= F.charCodes.lowercaseA && t <= F.charCodes.lowercaseF) || + (t >= F.charCodes.uppercaseA && t <= F.charCodes.uppercaseF) || + t === F.charCodes.underscore + ) + b.state.pos++; + else break; + } + b.input.charCodeAt(b.state.pos) === F.charCodes.lowercaseN + ? (++b.state.pos, Ve(ne.TokenType.bigint)) + : Ve(ne.TokenType.num); + } + function b1(e) { + let t = !1, + s = !1; + e || Ca(); + let i = b.input.charCodeAt(b.state.pos); + if ( + (i === F.charCodes.dot && + (++b.state.pos, Ca(), (i = b.input.charCodeAt(b.state.pos))), + (i === F.charCodes.uppercaseE || i === F.charCodes.lowercaseE) && + ((i = b.input.charCodeAt(++b.state.pos)), + (i === F.charCodes.plusSign || i === F.charCodes.dash) && + ++b.state.pos, + Ca(), + (i = b.input.charCodeAt(b.state.pos))), + i === F.charCodes.lowercaseN + ? (++b.state.pos, (t = !0)) + : i === F.charCodes.lowercaseM && (++b.state.pos, (s = !0)), + t) + ) { + Ve(ne.TokenType.bigint); + return; + } + if (s) { + Ve(ne.TokenType.decimal); + return; + } + Ve(ne.TokenType.num); + } + function qm(e) { + for (b.state.pos++; ; ) { + if (b.state.pos >= b.input.length) { + ci.unexpected.call(void 0, 'Unterminated string constant'); + return; + } + let t = b.input.charCodeAt(b.state.pos); + if (t === F.charCodes.backslash) b.state.pos++; + else if (t === e) break; + b.state.pos++; + } + b.state.pos++, Ve(ne.TokenType.string); + } + function Km() { + for (;;) { + if (b.state.pos >= b.input.length) { + ci.unexpected.call(void 0, 'Unterminated template'); + return; + } + let e = b.input.charCodeAt(b.state.pos); + if ( + e === F.charCodes.graveAccent || + (e === F.charCodes.dollarSign && + b.input.charCodeAt(b.state.pos + 1) === F.charCodes.leftCurlyBrace) + ) { + if (b.state.pos === b.state.start && Sa(ne.TokenType.template)) + if (e === F.charCodes.dollarSign) { + (b.state.pos += 2), Ve(ne.TokenType.dollarBraceL); + return; + } else { + ++b.state.pos, Ve(ne.TokenType.backQuote); + return; + } + Ve(ne.TokenType.template); + return; + } + e === F.charCodes.backslash && b.state.pos++, b.state.pos++; + } + } + function C1() { + for (; b.state.pos < b.input.length; ) { + let e = b.input.charCodeAt(b.state.pos); + if (d1.IS_IDENTIFIER_CHAR[e]) b.state.pos++; + else if (e === F.charCodes.backslash) { + if ( + ((b.state.pos += 2), + b.input.charCodeAt(b.state.pos) === F.charCodes.leftCurlyBrace) + ) { + for ( + ; + b.state.pos < b.input.length && + b.input.charCodeAt(b.state.pos) !== F.charCodes.rightCurlyBrace; + + ) + b.state.pos++; + b.state.pos++; + } + } else break; + } + } + Be.skipWord = C1; + }); + var Wi = Z((Ia) => { + 'use strict'; + Object.defineProperty(Ia, '__esModule', {value: !0}); + var w1 = be(); + function Um(e, t = e.currentIndex()) { + let s = t + 1; + if (Xr(e, s)) { + let i = e.identifierNameAtIndex(t); + return {isType: !1, leftName: i, rightName: i, endIndex: s}; + } + if ((s++, Xr(e, s))) + return {isType: !0, leftName: null, rightName: null, endIndex: s}; + if ((s++, Xr(e, s))) + return { + isType: !1, + leftName: e.identifierNameAtIndex(t), + rightName: e.identifierNameAtIndex(t + 2), + endIndex: s, + }; + if ((s++, Xr(e, s))) + return {isType: !0, leftName: null, rightName: null, endIndex: s}; + throw new Error(`Unexpected import/export specifier at ${t}`); + } + Ia.default = Um; + function Xr(e, t) { + let s = e.tokens[t]; + return s.type === w1.TokenType.braceR || s.type === w1.TokenType.comma; + } + }); + var S1 = Z((Ea) => { + 'use strict'; + Object.defineProperty(Ea, '__esModule', {value: !0}); + Ea.default = new Map([ + ['quot', '"'], + ['amp', '&'], + ['apos', "'"], + ['lt', '<'], + ['gt', '>'], + ['nbsp', '\xA0'], + ['iexcl', '\xA1'], + ['cent', '\xA2'], + ['pound', '\xA3'], + ['curren', '\xA4'], + ['yen', '\xA5'], + ['brvbar', '\xA6'], + ['sect', '\xA7'], + ['uml', '\xA8'], + ['copy', '\xA9'], + ['ordf', '\xAA'], + ['laquo', '\xAB'], + ['not', '\xAC'], + ['shy', '\xAD'], + ['reg', '\xAE'], + ['macr', '\xAF'], + ['deg', '\xB0'], + ['plusmn', '\xB1'], + ['sup2', '\xB2'], + ['sup3', '\xB3'], + ['acute', '\xB4'], + ['micro', '\xB5'], + ['para', '\xB6'], + ['middot', '\xB7'], + ['cedil', '\xB8'], + ['sup1', '\xB9'], + ['ordm', '\xBA'], + ['raquo', '\xBB'], + ['frac14', '\xBC'], + ['frac12', '\xBD'], + ['frac34', '\xBE'], + ['iquest', '\xBF'], + ['Agrave', '\xC0'], + ['Aacute', '\xC1'], + ['Acirc', '\xC2'], + ['Atilde', '\xC3'], + ['Auml', '\xC4'], + ['Aring', '\xC5'], + ['AElig', '\xC6'], + ['Ccedil', '\xC7'], + ['Egrave', '\xC8'], + ['Eacute', '\xC9'], + ['Ecirc', '\xCA'], + ['Euml', '\xCB'], + ['Igrave', '\xCC'], + ['Iacute', '\xCD'], + ['Icirc', '\xCE'], + ['Iuml', '\xCF'], + ['ETH', '\xD0'], + ['Ntilde', '\xD1'], + ['Ograve', '\xD2'], + ['Oacute', '\xD3'], + ['Ocirc', '\xD4'], + ['Otilde', '\xD5'], + ['Ouml', '\xD6'], + ['times', '\xD7'], + ['Oslash', '\xD8'], + ['Ugrave', '\xD9'], + ['Uacute', '\xDA'], + ['Ucirc', '\xDB'], + ['Uuml', '\xDC'], + ['Yacute', '\xDD'], + ['THORN', '\xDE'], + ['szlig', '\xDF'], + ['agrave', '\xE0'], + ['aacute', '\xE1'], + ['acirc', '\xE2'], + ['atilde', '\xE3'], + ['auml', '\xE4'], + ['aring', '\xE5'], + ['aelig', '\xE6'], + ['ccedil', '\xE7'], + ['egrave', '\xE8'], + ['eacute', '\xE9'], + ['ecirc', '\xEA'], + ['euml', '\xEB'], + ['igrave', '\xEC'], + ['iacute', '\xED'], + ['icirc', '\xEE'], + ['iuml', '\xEF'], + ['eth', '\xF0'], + ['ntilde', '\xF1'], + ['ograve', '\xF2'], + ['oacute', '\xF3'], + ['ocirc', '\xF4'], + ['otilde', '\xF5'], + ['ouml', '\xF6'], + ['divide', '\xF7'], + ['oslash', '\xF8'], + ['ugrave', '\xF9'], + ['uacute', '\xFA'], + ['ucirc', '\xFB'], + ['uuml', '\xFC'], + ['yacute', '\xFD'], + ['thorn', '\xFE'], + ['yuml', '\xFF'], + ['OElig', '\u0152'], + ['oelig', '\u0153'], + ['Scaron', '\u0160'], + ['scaron', '\u0161'], + ['Yuml', '\u0178'], + ['fnof', '\u0192'], + ['circ', '\u02C6'], + ['tilde', '\u02DC'], + ['Alpha', '\u0391'], + ['Beta', '\u0392'], + ['Gamma', '\u0393'], + ['Delta', '\u0394'], + ['Epsilon', '\u0395'], + ['Zeta', '\u0396'], + ['Eta', '\u0397'], + ['Theta', '\u0398'], + ['Iota', '\u0399'], + ['Kappa', '\u039A'], + ['Lambda', '\u039B'], + ['Mu', '\u039C'], + ['Nu', '\u039D'], + ['Xi', '\u039E'], + ['Omicron', '\u039F'], + ['Pi', '\u03A0'], + ['Rho', '\u03A1'], + ['Sigma', '\u03A3'], + ['Tau', '\u03A4'], + ['Upsilon', '\u03A5'], + ['Phi', '\u03A6'], + ['Chi', '\u03A7'], + ['Psi', '\u03A8'], + ['Omega', '\u03A9'], + ['alpha', '\u03B1'], + ['beta', '\u03B2'], + ['gamma', '\u03B3'], + ['delta', '\u03B4'], + ['epsilon', '\u03B5'], + ['zeta', '\u03B6'], + ['eta', '\u03B7'], + ['theta', '\u03B8'], + ['iota', '\u03B9'], + ['kappa', '\u03BA'], + ['lambda', '\u03BB'], + ['mu', '\u03BC'], + ['nu', '\u03BD'], + ['xi', '\u03BE'], + ['omicron', '\u03BF'], + ['pi', '\u03C0'], + ['rho', '\u03C1'], + ['sigmaf', '\u03C2'], + ['sigma', '\u03C3'], + ['tau', '\u03C4'], + ['upsilon', '\u03C5'], + ['phi', '\u03C6'], + ['chi', '\u03C7'], + ['psi', '\u03C8'], + ['omega', '\u03C9'], + ['thetasym', '\u03D1'], + ['upsih', '\u03D2'], + ['piv', '\u03D6'], + ['ensp', '\u2002'], + ['emsp', '\u2003'], + ['thinsp', '\u2009'], + ['zwnj', '\u200C'], + ['zwj', '\u200D'], + ['lrm', '\u200E'], + ['rlm', '\u200F'], + ['ndash', '\u2013'], + ['mdash', '\u2014'], + ['lsquo', '\u2018'], + ['rsquo', '\u2019'], + ['sbquo', '\u201A'], + ['ldquo', '\u201C'], + ['rdquo', '\u201D'], + ['bdquo', '\u201E'], + ['dagger', '\u2020'], + ['Dagger', '\u2021'], + ['bull', '\u2022'], + ['hellip', '\u2026'], + ['permil', '\u2030'], + ['prime', '\u2032'], + ['Prime', '\u2033'], + ['lsaquo', '\u2039'], + ['rsaquo', '\u203A'], + ['oline', '\u203E'], + ['frasl', '\u2044'], + ['euro', '\u20AC'], + ['image', '\u2111'], + ['weierp', '\u2118'], + ['real', '\u211C'], + ['trade', '\u2122'], + ['alefsym', '\u2135'], + ['larr', '\u2190'], + ['uarr', '\u2191'], + ['rarr', '\u2192'], + ['darr', '\u2193'], + ['harr', '\u2194'], + ['crarr', '\u21B5'], + ['lArr', '\u21D0'], + ['uArr', '\u21D1'], + ['rArr', '\u21D2'], + ['dArr', '\u21D3'], + ['hArr', '\u21D4'], + ['forall', '\u2200'], + ['part', '\u2202'], + ['exist', '\u2203'], + ['empty', '\u2205'], + ['nabla', '\u2207'], + ['isin', '\u2208'], + ['notin', '\u2209'], + ['ni', '\u220B'], + ['prod', '\u220F'], + ['sum', '\u2211'], + ['minus', '\u2212'], + ['lowast', '\u2217'], + ['radic', '\u221A'], + ['prop', '\u221D'], + ['infin', '\u221E'], + ['ang', '\u2220'], + ['and', '\u2227'], + ['or', '\u2228'], + ['cap', '\u2229'], + ['cup', '\u222A'], + ['int', '\u222B'], + ['there4', '\u2234'], + ['sim', '\u223C'], + ['cong', '\u2245'], + ['asymp', '\u2248'], + ['ne', '\u2260'], + ['equiv', '\u2261'], + ['le', '\u2264'], + ['ge', '\u2265'], + ['sub', '\u2282'], + ['sup', '\u2283'], + ['nsub', '\u2284'], + ['sube', '\u2286'], + ['supe', '\u2287'], + ['oplus', '\u2295'], + ['otimes', '\u2297'], + ['perp', '\u22A5'], + ['sdot', '\u22C5'], + ['lceil', '\u2308'], + ['rceil', '\u2309'], + ['lfloor', '\u230A'], + ['rfloor', '\u230B'], + ['lang', '\u2329'], + ['rang', '\u232A'], + ['loz', '\u25CA'], + ['spades', '\u2660'], + ['clubs', '\u2663'], + ['hearts', '\u2665'], + ['diams', '\u2666'], + ]); + }); + var Pa = Z((Aa) => { + 'use strict'; + Object.defineProperty(Aa, '__esModule', {value: !0}); + function Hm(e) { + let [t, s] = I1(e.jsxPragma || 'React.createElement'), + [i, r] = I1(e.jsxFragmentPragma || 'React.Fragment'); + return {base: t, suffix: s, fragmentBase: i, fragmentSuffix: r}; + } + Aa.default = Hm; + function I1(e) { + let t = e.indexOf('.'); + return t === -1 && (t = e.length), [e.slice(0, t), e.slice(t)]; + } + }); + var hn = Z((Ra) => { + 'use strict'; + Object.defineProperty(Ra, '__esModule', {value: !0}); + var Na = class { + getPrefixCode() { + return ''; + } + getHoistedCode() { + return ''; + } + getSuffixCode() { + return ''; + } + }; + Ra.default = Na; + }); + var Da = Z((Jr) => { + 'use strict'; + Object.defineProperty(Jr, '__esModule', {value: !0}); + function Oa(e) { + return e && e.__esModule ? e : {default: e}; + } + var Wm = S1(), + Gm = Oa(Wm), + Yr = xt(), + Re = be(), + An = Qt(), + zm = Pa(), + Xm = Oa(zm), + Ym = hn(), + Jm = Oa(Ym), + La = class e extends Jm.default { + __init() { + this.lastLineNumber = 1; + } + __init2() { + this.lastIndex = 0; + } + __init3() { + this.filenameVarName = null; + } + __init4() { + this.esmAutomaticImportNameResolutions = {}; + } + __init5() { + this.cjsAutomaticModuleNameResolutions = {}; + } + constructor(t, s, i, r, a) { + super(), + (this.rootTransformer = t), + (this.tokens = s), + (this.importProcessor = i), + (this.nameManager = r), + (this.options = a), + e.prototype.__init.call(this), + e.prototype.__init2.call(this), + e.prototype.__init3.call(this), + e.prototype.__init4.call(this), + e.prototype.__init5.call(this), + (this.jsxPragmaInfo = Xm.default.call(void 0, a)), + (this.isAutomaticRuntime = a.jsxRuntime === 'automatic'), + (this.jsxImportSource = a.jsxImportSource || 'react'); + } + process() { + return this.tokens.matches1(Re.TokenType.jsxTagStart) + ? (this.processJSXTag(), !0) + : !1; + } + getPrefixCode() { + let t = ''; + if ( + (this.filenameVarName && + (t += `const ${this.filenameVarName} = ${JSON.stringify( + this.options.filePath || '' + )};`), + this.isAutomaticRuntime) + ) + if (this.importProcessor) + for (let [s, i] of Object.entries( + this.cjsAutomaticModuleNameResolutions + )) + t += `var ${i} = require("${s}");`; + else { + let {createElement: s, ...i} = + this.esmAutomaticImportNameResolutions; + s && + (t += `import {createElement as ${s}} from "${this.jsxImportSource}";`); + let r = Object.entries(i) + .map(([a, u]) => `${a} as ${u}`) + .join(', '); + if (r) { + let a = + this.jsxImportSource + + (this.options.production + ? '/jsx-runtime' + : '/jsx-dev-runtime'); + t += `import {${r}} from "${a}";`; + } + } + return t; + } + processJSXTag() { + let {jsxRole: t, start: s} = this.tokens.currentToken(), + i = this.options.production ? null : this.getElementLocationCode(s); + this.isAutomaticRuntime && t !== Yr.JSXRole.KeyAfterPropSpread + ? this.transformTagToJSXFunc(i, t) + : this.transformTagToCreateElement(i); + } + getElementLocationCode(t) { + return `lineNumber: ${this.getLineNumberForIndex(t)}`; + } + getLineNumberForIndex(t) { + let s = this.tokens.code; + for (; this.lastIndex < t && this.lastIndex < s.length; ) + s[this.lastIndex] === + ` +` && this.lastLineNumber++, + this.lastIndex++; + return this.lastLineNumber; + } + transformTagToJSXFunc(t, s) { + let i = s === Yr.JSXRole.StaticChildren; + this.tokens.replaceToken(this.getJSXFuncInvocationCode(i)); + let r = null; + if (this.tokens.matches1(Re.TokenType.jsxTagEnd)) + this.tokens.replaceToken(`${this.getFragmentCode()}, {`), + this.processAutomaticChildrenAndEndProps(s); + else { + if ( + (this.processTagIntro(), + this.tokens.appendCode(', {'), + (r = this.processProps(!0)), + this.tokens.matches2(Re.TokenType.slash, Re.TokenType.jsxTagEnd)) + ) + this.tokens.appendCode('}'); + else if (this.tokens.matches1(Re.TokenType.jsxTagEnd)) + this.tokens.removeToken(), + this.processAutomaticChildrenAndEndProps(s); + else + throw new Error('Expected either /> or > at the end of the tag.'); + r && this.tokens.appendCode(`, ${r}`); + } + for ( + this.options.production || + (r === null && this.tokens.appendCode(', void 0'), + this.tokens.appendCode(`, ${i}, ${this.getDevSource(t)}, this`)), + this.tokens.removeInitialToken(); + !this.tokens.matches1(Re.TokenType.jsxTagEnd); + + ) + this.tokens.removeToken(); + this.tokens.replaceToken(')'); + } + transformTagToCreateElement(t) { + if ( + (this.tokens.replaceToken(this.getCreateElementInvocationCode()), + this.tokens.matches1(Re.TokenType.jsxTagEnd)) + ) + this.tokens.replaceToken(`${this.getFragmentCode()}, null`), + this.processChildren(!0); + else if ( + (this.processTagIntro(), + this.processPropsObjectWithDevInfo(t), + !this.tokens.matches2(Re.TokenType.slash, Re.TokenType.jsxTagEnd)) + ) + if (this.tokens.matches1(Re.TokenType.jsxTagEnd)) + this.tokens.removeToken(), this.processChildren(!0); + else + throw new Error('Expected either /> or > at the end of the tag.'); + for ( + this.tokens.removeInitialToken(); + !this.tokens.matches1(Re.TokenType.jsxTagEnd); + + ) + this.tokens.removeToken(); + this.tokens.replaceToken(')'); + } + getJSXFuncInvocationCode(t) { + return this.options.production + ? t + ? this.claimAutoImportedFuncInvocation('jsxs', '/jsx-runtime') + : this.claimAutoImportedFuncInvocation('jsx', '/jsx-runtime') + : this.claimAutoImportedFuncInvocation( + 'jsxDEV', + '/jsx-dev-runtime' + ); + } + getCreateElementInvocationCode() { + if (this.isAutomaticRuntime) + return this.claimAutoImportedFuncInvocation('createElement', ''); + { + let {jsxPragmaInfo: t} = this; + return `${ + (this.importProcessor && + this.importProcessor.getIdentifierReplacement(t.base)) || + t.base + }${t.suffix}(`; + } + } + getFragmentCode() { + if (this.isAutomaticRuntime) + return this.claimAutoImportedName( + 'Fragment', + this.options.production ? '/jsx-runtime' : '/jsx-dev-runtime' + ); + { + let {jsxPragmaInfo: t} = this; + return ( + ((this.importProcessor && + this.importProcessor.getIdentifierReplacement( + t.fragmentBase + )) || + t.fragmentBase) + t.fragmentSuffix + ); + } + } + claimAutoImportedFuncInvocation(t, s) { + let i = this.claimAutoImportedName(t, s); + return this.importProcessor ? `${i}.call(void 0, ` : `${i}(`; + } + claimAutoImportedName(t, s) { + if (this.importProcessor) { + let i = this.jsxImportSource + s; + return ( + this.cjsAutomaticModuleNameResolutions[i] || + (this.cjsAutomaticModuleNameResolutions[i] = + this.importProcessor.getFreeIdentifierForPath(i)), + `${this.cjsAutomaticModuleNameResolutions[i]}.${t}` + ); + } else + return ( + this.esmAutomaticImportNameResolutions[t] || + (this.esmAutomaticImportNameResolutions[t] = + this.nameManager.claimFreeName(`_${t}`)), + this.esmAutomaticImportNameResolutions[t] + ); + } + processTagIntro() { + let t = this.tokens.currentIndex() + 1; + for ( + ; + this.tokens.tokens[t].isType || + (!this.tokens.matches2AtIndex( + t - 1, + Re.TokenType.jsxName, + Re.TokenType.jsxName + ) && + !this.tokens.matches2AtIndex( + t - 1, + Re.TokenType.greaterThan, + Re.TokenType.jsxName + ) && + !this.tokens.matches1AtIndex(t, Re.TokenType.braceL) && + !this.tokens.matches1AtIndex(t, Re.TokenType.jsxTagEnd) && + !this.tokens.matches2AtIndex( + t, + Re.TokenType.slash, + Re.TokenType.jsxTagEnd + )); + + ) + t++; + if (t === this.tokens.currentIndex() + 1) { + let s = this.tokens.identifierName(); + A1(s) && this.tokens.replaceToken(`'${s}'`); + } + for (; this.tokens.currentIndex() < t; ) + this.rootTransformer.processToken(); + } + processPropsObjectWithDevInfo(t) { + let s = this.options.production + ? '' + : `__self: this, __source: ${this.getDevSource(t)}`; + if ( + !this.tokens.matches1(Re.TokenType.jsxName) && + !this.tokens.matches1(Re.TokenType.braceL) + ) { + s + ? this.tokens.appendCode(`, {${s}}`) + : this.tokens.appendCode(', null'); + return; + } + this.tokens.appendCode(', {'), + this.processProps(!1), + s ? this.tokens.appendCode(` ${s}}`) : this.tokens.appendCode('}'); + } + processProps(t) { + let s = null; + for (;;) { + if (this.tokens.matches2(Re.TokenType.jsxName, Re.TokenType.eq)) { + let i = this.tokens.identifierName(); + if (t && i === 'key') { + s !== null && this.tokens.appendCode(s.replace(/[^\n]/g, '')), + this.tokens.removeToken(), + this.tokens.removeToken(); + let r = this.tokens.snapshot(); + this.processPropValue(), + (s = this.tokens.dangerouslyGetAndRemoveCodeSinceSnapshot(r)); + continue; + } else + this.processPropName(i), + this.tokens.replaceToken(': '), + this.processPropValue(); + } else if (this.tokens.matches1(Re.TokenType.jsxName)) { + let i = this.tokens.identifierName(); + this.processPropName(i), this.tokens.appendCode(': true'); + } else if (this.tokens.matches1(Re.TokenType.braceL)) + this.tokens.replaceToken(''), + this.rootTransformer.processBalancedCode(), + this.tokens.replaceToken(''); + else break; + this.tokens.appendCode(','); + } + return s; + } + processPropName(t) { + t.includes('-') + ? this.tokens.replaceToken(`'${t}'`) + : this.tokens.copyToken(); + } + processPropValue() { + this.tokens.matches1(Re.TokenType.braceL) + ? (this.tokens.replaceToken(''), + this.rootTransformer.processBalancedCode(), + this.tokens.replaceToken('')) + : this.tokens.matches1(Re.TokenType.jsxTagStart) + ? this.processJSXTag() + : this.processStringPropValue(); + } + processStringPropValue() { + let t = this.tokens.currentToken(), + s = this.tokens.code.slice(t.start + 1, t.end - 1), + i = E1(s), + r = Zm(s); + this.tokens.replaceToken(r + i); + } + processAutomaticChildrenAndEndProps(t) { + t === Yr.JSXRole.StaticChildren + ? (this.tokens.appendCode(' children: ['), + this.processChildren(!1), + this.tokens.appendCode(']}')) + : (t === Yr.JSXRole.OneChild && + this.tokens.appendCode(' children: '), + this.processChildren(!1), + this.tokens.appendCode('}')); + } + processChildren(t) { + let s = t; + for (;;) { + if ( + this.tokens.matches2(Re.TokenType.jsxTagStart, Re.TokenType.slash) + ) + return; + let i = !1; + if (this.tokens.matches1(Re.TokenType.braceL)) + this.tokens.matches2(Re.TokenType.braceL, Re.TokenType.braceR) + ? (this.tokens.replaceToken(''), this.tokens.replaceToken('')) + : (this.tokens.replaceToken(s ? ', ' : ''), + this.rootTransformer.processBalancedCode(), + this.tokens.replaceToken(''), + (i = !0)); + else if (this.tokens.matches1(Re.TokenType.jsxTagStart)) + this.tokens.appendCode(s ? ', ' : ''), + this.processJSXTag(), + (i = !0); + else if ( + this.tokens.matches1(Re.TokenType.jsxText) || + this.tokens.matches1(Re.TokenType.jsxEmptyText) + ) + i = this.processChildTextElement(s); + else + throw new Error('Unexpected token when processing JSX children.'); + i && (s = !0); + } + } + processChildTextElement(t) { + let s = this.tokens.currentToken(), + i = this.tokens.code.slice(s.start, s.end), + r = E1(i), + a = Qm(i); + return a === '""' + ? (this.tokens.replaceToken(r), !1) + : (this.tokens.replaceToken(`${t ? ', ' : ''}${a}${r}`), !0); + } + getDevSource(t) { + return `{fileName: ${this.getFilenameVarName()}, ${t}}`; + } + getFilenameVarName() { + return ( + this.filenameVarName || + (this.filenameVarName = + this.nameManager.claimFreeName('_jsxFileName')), + this.filenameVarName + ); + } + }; + Jr.default = La; + function A1(e) { + let t = e.charCodeAt(0); + return t >= An.charCodes.lowercaseA && t <= An.charCodes.lowercaseZ; + } + Jr.startsWithLowerCase = A1; + function Qm(e) { + let t = '', + s = '', + i = !1, + r = !1; + for (let a = 0; a < e.length; a++) { + let u = e[a]; + if (u === ' ' || u === ' ' || u === '\r') i || (s += u); + else if ( + u === + ` +` + ) + (s = ''), (i = !0); + else { + if ((r && i && (t += ' '), (t += s), (s = ''), u === '&')) { + let {entity: d, newI: y} = P1(e, a + 1); + (a = y - 1), (t += d); + } else t += u; + (r = !0), (i = !1); + } + } + return i || (t += s), JSON.stringify(t); + } + function E1(e) { + let t = 0, + s = 0; + for (let i of e) + i === + ` +` + ? (t++, (s = 0)) + : i === ' ' && s++; + return ( + ` +`.repeat(t) + ' '.repeat(s) + ); + } + function Zm(e) { + let t = ''; + for (let s = 0; s < e.length; s++) { + let i = e[s]; + if ( + i === + ` +` + ) + if (/\s/.test(e[s + 1])) + for (t += ' '; s < e.length && /\s/.test(e[s + 1]); ) s++; + else + t += ` +`; + else if (i === '&') { + let {entity: r, newI: a} = P1(e, s + 1); + (t += r), (s = a - 1); + } else t += i; + } + return JSON.stringify(t); + } + function P1(e, t) { + let s = '', + i = 0, + r, + a = t; + if (e[a] === '#') { + let u = 10; + a++; + let d; + if (e[a] === 'x') + for (u = 16, a++, d = a; a < e.length && ty(e.charCodeAt(a)); ) a++; + else for (d = a; a < e.length && ey(e.charCodeAt(a)); ) a++; + if (e[a] === ';') { + let y = e.slice(d, a); + y && (a++, (r = String.fromCodePoint(parseInt(y, u)))); + } + } else + for (; a < e.length && i++ < 10; ) { + let u = e[a]; + if ((a++, u === ';')) { + r = Gm.default.get(s); + break; + } + s += u; + } + return r ? {entity: r, newI: a} : {entity: '&', newI: t}; + } + function ey(e) { + return e >= An.charCodes.digit0 && e <= An.charCodes.digit9; + } + function ty(e) { + return ( + (e >= An.charCodes.digit0 && e <= An.charCodes.digit9) || + (e >= An.charCodes.lowercaseA && e <= An.charCodes.lowercaseF) || + (e >= An.charCodes.uppercaseA && e <= An.charCodes.uppercaseF) + ); + } + }); + var Fa = Z((Ma) => { + 'use strict'; + Object.defineProperty(Ma, '__esModule', {value: !0}); + function ny(e) { + return e && e.__esModule ? e : {default: e}; + } + var Qr = xt(), + ui = be(), + sy = Da(), + iy = Pa(), + ry = ny(iy); + function oy(e, t) { + let s = ry.default.call(void 0, t), + i = new Set(); + for (let r = 0; r < e.tokens.length; r++) { + let a = e.tokens[r]; + if ( + (a.type === ui.TokenType.name && + !a.isType && + (a.identifierRole === Qr.IdentifierRole.Access || + a.identifierRole === Qr.IdentifierRole.ObjectShorthand || + a.identifierRole === Qr.IdentifierRole.ExportAccess) && + !a.shadowsGlobal && + i.add(e.identifierNameForToken(a)), + a.type === ui.TokenType.jsxTagStart && i.add(s.base), + a.type === ui.TokenType.jsxTagStart && + r + 1 < e.tokens.length && + e.tokens[r + 1].type === ui.TokenType.jsxTagEnd && + (i.add(s.base), i.add(s.fragmentBase)), + a.type === ui.TokenType.jsxName && + a.identifierRole === Qr.IdentifierRole.Access) + ) { + let u = e.identifierNameForToken(a); + (!sy.startsWithLowerCase.call(void 0, u) || + e.tokens[r + 1].type === ui.TokenType.dot) && + i.add(e.identifierNameForToken(a)); + } + } + return i; + } + Ma.getNonTypeIdentifiers = oy; + }); + var N1 = Z((Va) => { + 'use strict'; + Object.defineProperty(Va, '__esModule', {value: !0}); + function ay(e) { + return e && e.__esModule ? e : {default: e}; + } + var ly = xt(), + Zr = It(), + me = be(), + cy = Wi(), + uy = ay(cy), + py = Fa(), + Ba = class e { + __init() { + this.nonTypeIdentifiers = new Set(); + } + __init2() { + this.importInfoByPath = new Map(); + } + __init3() { + this.importsToReplace = new Map(); + } + __init4() { + this.identifierReplacements = new Map(); + } + __init5() { + this.exportBindingsByLocalName = new Map(); + } + constructor(t, s, i, r, a, u) { + (this.nameManager = t), + (this.tokens = s), + (this.enableLegacyTypeScriptModuleInterop = i), + (this.options = r), + (this.isTypeScriptTransformEnabled = a), + (this.helperManager = u), + e.prototype.__init.call(this), + e.prototype.__init2.call(this), + e.prototype.__init3.call(this), + e.prototype.__init4.call(this), + e.prototype.__init5.call(this); + } + preprocessTokens() { + for (let t = 0; t < this.tokens.tokens.length; t++) + this.tokens.matches1AtIndex(t, me.TokenType._import) && + !this.tokens.matches3AtIndex( + t, + me.TokenType._import, + me.TokenType.name, + me.TokenType.eq + ) && + this.preprocessImportAtIndex(t), + this.tokens.matches1AtIndex(t, me.TokenType._export) && + !this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType.eq + ) && + this.preprocessExportAtIndex(t); + this.generateImportReplacements(); + } + pruneTypeOnlyImports() { + this.nonTypeIdentifiers = py.getNonTypeIdentifiers.call( + void 0, + this.tokens, + this.options + ); + for (let [t, s] of this.importInfoByPath.entries()) { + if ( + s.hasBareImport || + s.hasStarExport || + s.exportStarNames.length > 0 || + s.namedExports.length > 0 + ) + continue; + [ + ...s.defaultNames, + ...s.wildcardNames, + ...s.namedImports.map(({localName: r}) => r), + ].every((r) => this.isTypeName(r)) && + this.importsToReplace.set(t, ''); + } + } + isTypeName(t) { + return ( + this.isTypeScriptTransformEnabled && !this.nonTypeIdentifiers.has(t) + ); + } + generateImportReplacements() { + for (let [t, s] of this.importInfoByPath.entries()) { + let { + defaultNames: i, + wildcardNames: r, + namedImports: a, + namedExports: u, + exportStarNames: d, + hasStarExport: y, + } = s; + if ( + i.length === 0 && + r.length === 0 && + a.length === 0 && + u.length === 0 && + d.length === 0 && + !y + ) { + this.importsToReplace.set(t, `require('${t}');`); + continue; + } + let g = this.getFreeIdentifierForPath(t), + L; + this.enableLegacyTypeScriptModuleInterop + ? (L = g) + : (L = r.length > 0 ? r[0] : this.getFreeIdentifierForPath(t)); + let p = `var ${g} = require('${t}');`; + if (r.length > 0) + for (let h of r) { + let T = this.enableLegacyTypeScriptModuleInterop + ? g + : `${this.helperManager.getHelperName( + 'interopRequireWildcard' + )}(${g})`; + p += ` var ${h} = ${T};`; + } + else + d.length > 0 && L !== g + ? (p += ` var ${L} = ${this.helperManager.getHelperName( + 'interopRequireWildcard' + )}(${g});`) + : i.length > 0 && + L !== g && + (p += ` var ${L} = ${this.helperManager.getHelperName( + 'interopRequireDefault' + )}(${g});`); + for (let {importedName: h, localName: T} of u) + p += ` ${this.helperManager.getHelperName( + 'createNamedExportFrom' + )}(${g}, '${T}', '${h}');`; + for (let h of d) p += ` exports.${h} = ${L};`; + y && + (p += ` ${this.helperManager.getHelperName( + 'createStarExport' + )}(${g});`), + this.importsToReplace.set(t, p); + for (let h of i) this.identifierReplacements.set(h, `${L}.default`); + for (let {importedName: h, localName: T} of a) + this.identifierReplacements.set(T, `${g}.${h}`); + } + } + getFreeIdentifierForPath(t) { + let s = t.split('/'), + r = s[s.length - 1].replace(/\W/g, ''); + return this.nameManager.claimFreeName(`_${r}`); + } + preprocessImportAtIndex(t) { + let s = [], + i = [], + r = []; + if ( + (t++, + ((this.tokens.matchesContextualAtIndex( + t, + Zr.ContextualKeyword._type + ) || + this.tokens.matches1AtIndex(t, me.TokenType._typeof)) && + !this.tokens.matches1AtIndex(t + 1, me.TokenType.comma) && + !this.tokens.matchesContextualAtIndex( + t + 1, + Zr.ContextualKeyword._from + )) || + this.tokens.matches1AtIndex(t, me.TokenType.parenL)) + ) + return; + if ( + (this.tokens.matches1AtIndex(t, me.TokenType.name) && + (s.push(this.tokens.identifierNameAtIndex(t)), + t++, + this.tokens.matches1AtIndex(t, me.TokenType.comma) && t++), + this.tokens.matches1AtIndex(t, me.TokenType.star) && + ((t += 2), i.push(this.tokens.identifierNameAtIndex(t)), t++), + this.tokens.matches1AtIndex(t, me.TokenType.braceL)) + ) { + let d = this.getNamedImports(t + 1); + t = d.newIndex; + for (let y of d.namedImports) + y.importedName === 'default' ? s.push(y.localName) : r.push(y); + } + if ( + (this.tokens.matchesContextualAtIndex( + t, + Zr.ContextualKeyword._from + ) && t++, + !this.tokens.matches1AtIndex(t, me.TokenType.string)) + ) + throw new Error( + 'Expected string token at the end of import statement.' + ); + let a = this.tokens.stringValueAtIndex(t), + u = this.getImportInfo(a); + u.defaultNames.push(...s), + u.wildcardNames.push(...i), + u.namedImports.push(...r), + s.length === 0 && + i.length === 0 && + r.length === 0 && + (u.hasBareImport = !0); + } + preprocessExportAtIndex(t) { + if ( + this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType._var + ) || + this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType._let + ) || + this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType._const + ) + ) + this.preprocessVarExportAtIndex(t); + else if ( + this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType._function + ) || + this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType._class + ) + ) { + let s = this.tokens.identifierNameAtIndex(t + 2); + this.addExportBinding(s, s); + } else if ( + this.tokens.matches3AtIndex( + t, + me.TokenType._export, + me.TokenType.name, + me.TokenType._function + ) + ) { + let s = this.tokens.identifierNameAtIndex(t + 3); + this.addExportBinding(s, s); + } else + this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType.braceL + ) + ? this.preprocessNamedExportAtIndex(t) + : this.tokens.matches2AtIndex( + t, + me.TokenType._export, + me.TokenType.star + ) && this.preprocessExportStarAtIndex(t); + } + preprocessVarExportAtIndex(t) { + let s = 0; + for (let i = t + 2; ; i++) + if ( + this.tokens.matches1AtIndex(i, me.TokenType.braceL) || + this.tokens.matches1AtIndex(i, me.TokenType.dollarBraceL) || + this.tokens.matches1AtIndex(i, me.TokenType.bracketL) + ) + s++; + else if ( + this.tokens.matches1AtIndex(i, me.TokenType.braceR) || + this.tokens.matches1AtIndex(i, me.TokenType.bracketR) + ) + s--; + else { + if (s === 0 && !this.tokens.matches1AtIndex(i, me.TokenType.name)) + break; + if (this.tokens.matches1AtIndex(1, me.TokenType.eq)) { + let r = this.tokens.currentToken().rhsEndIndex; + if (r == null) + throw new Error('Expected = token with an end index.'); + i = r - 1; + } else { + let r = this.tokens.tokens[i]; + if (ly.isDeclaration.call(void 0, r)) { + let a = this.tokens.identifierNameAtIndex(i); + this.identifierReplacements.set(a, `exports.${a}`); + } + } + } + } + preprocessNamedExportAtIndex(t) { + t += 2; + let {newIndex: s, namedImports: i} = this.getNamedImports(t); + if ( + ((t = s), + this.tokens.matchesContextualAtIndex(t, Zr.ContextualKeyword._from)) + ) + t++; + else { + for (let {importedName: u, localName: d} of i) + this.addExportBinding(u, d); + return; + } + if (!this.tokens.matches1AtIndex(t, me.TokenType.string)) + throw new Error( + 'Expected string token at the end of import statement.' + ); + let r = this.tokens.stringValueAtIndex(t); + this.getImportInfo(r).namedExports.push(...i); + } + preprocessExportStarAtIndex(t) { + let s = null; + if ( + (this.tokens.matches3AtIndex( + t, + me.TokenType._export, + me.TokenType.star, + me.TokenType._as + ) + ? ((t += 3), (s = this.tokens.identifierNameAtIndex(t)), (t += 2)) + : (t += 3), + !this.tokens.matches1AtIndex(t, me.TokenType.string)) + ) + throw new Error( + 'Expected string token at the end of star export statement.' + ); + let i = this.tokens.stringValueAtIndex(t), + r = this.getImportInfo(i); + s !== null ? r.exportStarNames.push(s) : (r.hasStarExport = !0); + } + getNamedImports(t) { + let s = []; + for (;;) { + if (this.tokens.matches1AtIndex(t, me.TokenType.braceR)) { + t++; + break; + } + let i = uy.default.call(void 0, this.tokens, t); + if ( + ((t = i.endIndex), + i.isType || + s.push({importedName: i.leftName, localName: i.rightName}), + this.tokens.matches2AtIndex( + t, + me.TokenType.comma, + me.TokenType.braceR + )) + ) { + t += 2; + break; + } else if (this.tokens.matches1AtIndex(t, me.TokenType.braceR)) { + t++; + break; + } else if (this.tokens.matches1AtIndex(t, me.TokenType.comma)) t++; + else + throw new Error( + `Unexpected token: ${JSON.stringify(this.tokens.tokens[t])}` + ); + } + return {newIndex: t, namedImports: s}; + } + getImportInfo(t) { + let s = this.importInfoByPath.get(t); + if (s) return s; + let i = { + defaultNames: [], + wildcardNames: [], + namedImports: [], + namedExports: [], + hasBareImport: !1, + exportStarNames: [], + hasStarExport: !1, + }; + return this.importInfoByPath.set(t, i), i; + } + addExportBinding(t, s) { + this.exportBindingsByLocalName.has(t) || + this.exportBindingsByLocalName.set(t, []), + this.exportBindingsByLocalName.get(t).push(s); + } + claimImportCode(t) { + let s = this.importsToReplace.get(t); + return this.importsToReplace.set(t, ''), s || ''; + } + getIdentifierReplacement(t) { + return this.identifierReplacements.get(t) || null; + } + resolveExportBinding(t) { + let s = this.exportBindingsByLocalName.get(t); + return !s || s.length === 0 + ? null + : s.map((i) => `exports.${i}`).join(' = '); + } + getGlobalNames() { + return new Set([ + ...this.identifierReplacements.keys(), + ...this.exportBindingsByLocalName.keys(), + ]); + } + }; + Va.default = Ba; + }); + var L1 = Z((eo, R1) => { + (function (e, t) { + typeof eo == 'object' && typeof R1 < 'u' + ? t(eo) + : typeof define == 'function' && define.amd + ? define(['exports'], t) + : ((e = typeof globalThis < 'u' ? globalThis : e || self), + t((e.setArray = {}))); + })(eo, function (e) { + 'use strict'; + (e.get = void 0), (e.put = void 0), (e.pop = void 0); + class t { + constructor() { + (this._indexes = {__proto__: null}), (this.array = []); + } + } + (e.get = (s, i) => s._indexes[i]), + (e.put = (s, i) => { + let r = e.get(s, i); + if (r !== void 0) return r; + let {array: a, _indexes: u} = s; + return (u[i] = a.push(i) - 1); + }), + (e.pop = (s) => { + let {array: i, _indexes: r} = s; + if (i.length === 0) return; + let a = i.pop(); + r[a] = void 0; + }), + (e.SetArray = t), + Object.defineProperty(e, '__esModule', {value: !0}); + }); + }); + var ja = Z((to, O1) => { + (function (e, t) { + typeof to == 'object' && typeof O1 < 'u' + ? t(to) + : typeof define == 'function' && define.amd + ? define(['exports'], t) + : ((e = typeof globalThis < 'u' ? globalThis : e || self), + t((e.sourcemapCodec = {}))); + })(to, function (e) { + 'use strict'; + let i = + 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', + r = new Uint8Array(64), + a = new Uint8Array(128); + for (let w = 0; w < i.length; w++) { + let S = i.charCodeAt(w); + (r[w] = S), (a[S] = w); + } + let u = + typeof TextDecoder < 'u' + ? new TextDecoder() + : typeof Buffer < 'u' + ? { + decode(w) { + return Buffer.from( + w.buffer, + w.byteOffset, + w.byteLength + ).toString(); + }, + } + : { + decode(w) { + let S = ''; + for (let A = 0; A < w.length; A++) + S += String.fromCharCode(w[A]); + return S; + }, + }; + function d(w) { + let S = new Int32Array(5), + A = [], + U = 0; + do { + let M = y(w, U), + c = [], + R = !0, + W = 0; + S[0] = 0; + for (let X = U; X < M; X++) { + let ie; + X = g(w, X, S, 0); + let pe = S[0]; + pe < W && (R = !1), + (W = pe), + L(w, X, M) + ? ((X = g(w, X, S, 1)), + (X = g(w, X, S, 2)), + (X = g(w, X, S, 3)), + L(w, X, M) + ? ((X = g(w, X, S, 4)), (ie = [pe, S[1], S[2], S[3], S[4]])) + : (ie = [pe, S[1], S[2], S[3]])) + : (ie = [pe]), + c.push(ie); + } + R || p(c), A.push(c), (U = M + 1); + } while (U <= w.length); + return A; + } + function y(w, S) { + let A = w.indexOf(';', S); + return A === -1 ? w.length : A; + } + function g(w, S, A, U) { + let M = 0, + c = 0, + R = 0; + do { + let X = w.charCodeAt(S++); + (R = a[X]), (M |= (R & 31) << c), (c += 5); + } while (R & 32); + let W = M & 1; + return (M >>>= 1), W && (M = -2147483648 | -M), (A[U] += M), S; + } + function L(w, S, A) { + return S >= A ? !1 : w.charCodeAt(S) !== 44; + } + function p(w) { + w.sort(h); + } + function h(w, S) { + return w[0] - S[0]; + } + function T(w) { + let S = new Int32Array(5), + A = 1024 * 16, + U = A - 36, + M = new Uint8Array(A), + c = M.subarray(0, U), + R = 0, + W = ''; + for (let X = 0; X < w.length; X++) { + let ie = w[X]; + if ( + (X > 0 && (R === A && ((W += u.decode(M)), (R = 0)), (M[R++] = 59)), + ie.length !== 0) + ) { + S[0] = 0; + for (let pe = 0; pe < ie.length; pe++) { + let ae = ie[pe]; + R > U && ((W += u.decode(c)), M.copyWithin(0, U, R), (R -= U)), + pe > 0 && (M[R++] = 44), + (R = x(M, R, S, ae, 0)), + ae.length !== 1 && + ((R = x(M, R, S, ae, 1)), + (R = x(M, R, S, ae, 2)), + (R = x(M, R, S, ae, 3)), + ae.length !== 4 && (R = x(M, R, S, ae, 4))); + } + } + } + return W + u.decode(M.subarray(0, R)); + } + function x(w, S, A, U, M) { + let c = U[M], + R = c - A[M]; + (A[M] = c), (R = R < 0 ? (-R << 1) | 1 : R << 1); + do { + let W = R & 31; + (R >>>= 5), R > 0 && (W |= 32), (w[S++] = r[W]); + } while (R > 0); + return S; + } + (e.decode = d), + (e.encode = T), + Object.defineProperty(e, '__esModule', {value: !0}); + }); + }); + var D1 = Z(($a, qa) => { + (function (e, t) { + typeof $a == 'object' && typeof qa < 'u' + ? (qa.exports = t()) + : typeof define == 'function' && define.amd + ? define(t) + : ((e = typeof globalThis < 'u' ? globalThis : e || self), + (e.resolveURI = t())); + })($a, function () { + 'use strict'; + let e = /^[\w+.-]+:\/\//, + t = + /^([\w+.-]+:)\/\/([^@/#?]*@)?([^:/#?]*)(:\d+)?(\/[^#?]*)?(\?[^#]*)?(#.*)?/, + s = /^file:(?:\/\/((?![a-z]:)[^/#?]*)?)?(\/?[^#?]*)(\?[^#]*)?(#.*)?/i; + var i; + (function (A) { + (A[(A.Empty = 1)] = 'Empty'), + (A[(A.Hash = 2)] = 'Hash'), + (A[(A.Query = 3)] = 'Query'), + (A[(A.RelativePath = 4)] = 'RelativePath'), + (A[(A.AbsolutePath = 5)] = 'AbsolutePath'), + (A[(A.SchemeRelative = 6)] = 'SchemeRelative'), + (A[(A.Absolute = 7)] = 'Absolute'); + })(i || (i = {})); + function r(A) { + return e.test(A); + } + function a(A) { + return A.startsWith('//'); + } + function u(A) { + return A.startsWith('/'); + } + function d(A) { + return A.startsWith('file:'); + } + function y(A) { + return /^[.?#]/.test(A); + } + function g(A) { + let U = t.exec(A); + return p( + U[1], + U[2] || '', + U[3], + U[4] || '', + U[5] || '/', + U[6] || '', + U[7] || '' + ); + } + function L(A) { + let U = s.exec(A), + M = U[2]; + return p( + 'file:', + '', + U[1] || '', + '', + u(M) ? M : '/' + M, + U[3] || '', + U[4] || '' + ); + } + function p(A, U, M, c, R, W, X) { + return { + scheme: A, + user: U, + host: M, + port: c, + path: R, + query: W, + hash: X, + type: i.Absolute, + }; + } + function h(A) { + if (a(A)) { + let M = g('http:' + A); + return (M.scheme = ''), (M.type = i.SchemeRelative), M; + } + if (u(A)) { + let M = g('http://foo.com' + A); + return (M.scheme = ''), (M.host = ''), (M.type = i.AbsolutePath), M; + } + if (d(A)) return L(A); + if (r(A)) return g(A); + let U = g('http://foo.com/' + A); + return ( + (U.scheme = ''), + (U.host = ''), + (U.type = A + ? A.startsWith('?') + ? i.Query + : A.startsWith('#') + ? i.Hash + : i.RelativePath + : i.Empty), + U + ); + } + function T(A) { + if (A.endsWith('/..')) return A; + let U = A.lastIndexOf('/'); + return A.slice(0, U + 1); + } + function x(A, U) { + w(U, U.type), + A.path === '/' ? (A.path = U.path) : (A.path = T(U.path) + A.path); + } + function w(A, U) { + let M = U <= i.RelativePath, + c = A.path.split('/'), + R = 1, + W = 0, + X = !1; + for (let pe = 1; pe < c.length; pe++) { + let ae = c[pe]; + if (!ae) { + X = !0; + continue; + } + if (((X = !1), ae !== '.')) { + if (ae === '..') { + W ? ((X = !0), W--, R--) : M && (c[R++] = ae); + continue; + } + (c[R++] = ae), W++; + } + } + let ie = ''; + for (let pe = 1; pe < R; pe++) ie += '/' + c[pe]; + (!ie || (X && !ie.endsWith('/..'))) && (ie += '/'), (A.path = ie); + } + function S(A, U) { + if (!A && !U) return ''; + let M = h(A), + c = M.type; + if (U && c !== i.Absolute) { + let W = h(U), + X = W.type; + switch (c) { + case i.Empty: + M.hash = W.hash; + case i.Hash: + M.query = W.query; + case i.Query: + case i.RelativePath: + x(M, W); + case i.AbsolutePath: + (M.user = W.user), (M.host = W.host), (M.port = W.port); + case i.SchemeRelative: + M.scheme = W.scheme; + } + X > c && (c = X); + } + w(M, c); + let R = M.query + M.hash; + switch (c) { + case i.Hash: + case i.Query: + return R; + case i.RelativePath: { + let W = M.path.slice(1); + return W ? (y(U || A) && !y(W) ? './' + W + R : W + R) : R || '.'; + } + case i.AbsolutePath: + return M.path + R; + default: + return M.scheme + '//' + M.user + M.host + M.port + M.path + R; + } + } + return S; + }); + }); + var F1 = Z((no, M1) => { + (function (e, t) { + typeof no == 'object' && typeof M1 < 'u' + ? t(no, ja(), D1()) + : typeof define == 'function' && define.amd + ? define( + [ + 'exports', + '@jridgewell/sourcemap-codec', + '@jridgewell/resolve-uri', + ], + t + ) + : ((e = typeof globalThis < 'u' ? globalThis : e || self), + t((e.traceMapping = {}), e.sourcemapCodec, e.resolveURI)); + })(no, function (e, t, s) { + 'use strict'; + function i(V) { + return V && typeof V == 'object' && 'default' in V ? V : {default: V}; + } + var r = i(s); + function a(V, G) { + return G && !G.endsWith('/') && (G += '/'), r.default(V, G); + } + function u(V) { + if (!V) return ''; + let G = V.lastIndexOf('/'); + return V.slice(0, G + 1); + } + let d = 0, + y = 1, + g = 2, + L = 3, + p = 4, + h = 1, + T = 2; + function x(V, G) { + let J = w(V, 0); + if (J === V.length) return V; + G || (V = V.slice()); + for (let re = J; re < V.length; re = w(V, re + 1)) V[re] = A(V[re], G); + return V; + } + function w(V, G) { + for (let J = G; J < V.length; J++) if (!S(V[J])) return J; + return V.length; + } + function S(V) { + for (let G = 1; G < V.length; G++) if (V[G][d] < V[G - 1][d]) return !1; + return !0; + } + function A(V, G) { + return G || (V = V.slice()), V.sort(U); + } + function U(V, G) { + return V[d] - G[d]; + } + let M = !1; + function c(V, G, J, re) { + for (; J <= re; ) { + let ve = J + ((re - J) >> 1), + he = V[ve][d] - G; + if (he === 0) return (M = !0), ve; + he < 0 ? (J = ve + 1) : (re = ve - 1); + } + return (M = !1), J - 1; + } + function R(V, G, J) { + for (let re = J + 1; re < V.length && V[re][d] === G; J = re++); + return J; + } + function W(V, G, J) { + for (let re = J - 1; re >= 0 && V[re][d] === G; J = re--); + return J; + } + function X() { + return {lastKey: -1, lastNeedle: -1, lastIndex: -1}; + } + function ie(V, G, J, re) { + let {lastKey: ve, lastNeedle: he, lastIndex: Ie} = J, + Ee = 0, + Le = V.length - 1; + if (re === ve) { + if (G === he) return (M = Ie !== -1 && V[Ie][d] === G), Ie; + G >= he ? (Ee = Ie === -1 ? 0 : Ie) : (Le = Ie); + } + return ( + (J.lastKey = re), (J.lastNeedle = G), (J.lastIndex = c(V, G, Ee, Le)) + ); + } + function pe(V, G) { + let J = G.map(He); + for (let re = 0; re < V.length; re++) { + let ve = V[re]; + for (let he = 0; he < ve.length; he++) { + let Ie = ve[he]; + if (Ie.length === 1) continue; + let Ee = Ie[y], + Le = Ie[g], + Xe = Ie[L], + We = J[Ee], + Ke = We[Le] || (We[Le] = []), + ut = G[Ee], + pt = R(Ke, Xe, ie(Ke, Xe, ut, Le)); + ae(Ke, (ut.lastIndex = pt + 1), [Xe, re, Ie[d]]); + } + } + return J; + } + function ae(V, G, J) { + for (let re = V.length; re > G; re--) V[re] = V[re - 1]; + V[G] = J; + } + function He() { + return {__proto__: null}; + } + let qe = function (V, G) { + let J = typeof V == 'string' ? JSON.parse(V) : V; + if (!('sections' in J)) return new wt(J, G); + let re = [], + ve = [], + he = [], + Ie = []; + Bt(J, G, re, ve, he, Ie, 0, 0, 1 / 0, 1 / 0); + let Ee = { + version: 3, + file: J.file, + names: Ie, + sources: ve, + sourcesContent: he, + mappings: re, + }; + return e.presortedDecodedMap(Ee); + }; + function Bt(V, G, J, re, ve, he, Ie, Ee, Le, Xe) { + let {sections: We} = V; + for (let Ke = 0; Ke < We.length; Ke++) { + let {map: ut, offset: pt} = We[Ke], + bt = Le, + yt = Xe; + if (Ke + 1 < We.length) { + let vt = We[Ke + 1].offset; + (bt = Math.min(Le, Ie + vt.line)), + bt === Le + ? (yt = Math.min(Xe, Ee + vt.column)) + : bt < Le && (yt = Ee + vt.column); + } + mt(ut, G, J, re, ve, he, Ie + pt.line, Ee + pt.column, bt, yt); + } + } + function mt(V, G, J, re, ve, he, Ie, Ee, Le, Xe) { + if ('sections' in V) return Bt(...arguments); + let We = new wt(V, G), + Ke = re.length, + ut = he.length, + pt = e.decodedMappings(We), + {resolvedSources: bt, sourcesContent: yt} = We; + if ((kt(re, bt), kt(he, We.names), yt)) kt(ve, yt); + else for (let vt = 0; vt < bt.length; vt++) ve.push(null); + for (let vt = 0; vt < pt.length; vt++) { + let bn = Ie + vt; + if (bn > Le) return; + let Dn = At(J, bn), + Ge = vt === 0 ? Ee : 0, + St = pt[vt]; + for (let ot = 0; ot < St.length; ot++) { + let zt = St[ot], + Xt = Ge + zt[d]; + if (bn === Le && Xt >= Xe) return; + if (zt.length === 1) { + Dn.push([Xt]); + continue; + } + let te = Ke + zt[y], + Cn = zt[g], + Zn = zt[L]; + Dn.push( + zt.length === 4 ? [Xt, te, Cn, Zn] : [Xt, te, Cn, Zn, ut + zt[p]] + ); + } + } + } + function kt(V, G) { + for (let J = 0; J < G.length; J++) V.push(G[J]); + } + function At(V, G) { + for (let J = V.length; J <= G; J++) V[J] = []; + return V[G]; + } + let tt = '`line` must be greater than 0 (lines start at line 1)', + nt = + '`column` must be greater than or equal to 0 (columns start at column 0)', + _t = -1, + ct = 1; + (e.encodedMappings = void 0), + (e.decodedMappings = void 0), + (e.traceSegment = void 0), + (e.originalPositionFor = void 0), + (e.generatedPositionFor = void 0), + (e.eachMapping = void 0), + (e.sourceContentFor = void 0), + (e.presortedDecodedMap = void 0), + (e.decodedMap = void 0), + (e.encodedMap = void 0); + class wt { + constructor(G, J) { + let re = typeof G == 'string'; + if (!re && G._decodedMemo) return G; + let ve = re ? JSON.parse(G) : G, + { + version: he, + file: Ie, + names: Ee, + sourceRoot: Le, + sources: Xe, + sourcesContent: We, + } = ve; + (this.version = he), + (this.file = Ie), + (this.names = Ee), + (this.sourceRoot = Le), + (this.sources = Xe), + (this.sourcesContent = We); + let Ke = a(Le || '', u(J)); + this.resolvedSources = Xe.map((pt) => a(pt || '', Ke)); + let {mappings: ut} = ve; + typeof ut == 'string' + ? ((this._encoded = ut), (this._decoded = void 0)) + : ((this._encoded = void 0), (this._decoded = x(ut, re))), + (this._decodedMemo = X()), + (this._bySources = void 0), + (this._bySourceMemos = void 0); + } + } + (e.encodedMappings = (V) => { + var G; + return (G = V._encoded) !== null && G !== void 0 + ? G + : (V._encoded = t.encode(V._decoded)); + }), + (e.decodedMappings = (V) => + V._decoded || (V._decoded = t.decode(V._encoded))), + (e.traceSegment = (V, G, J) => { + let re = e.decodedMappings(V); + return G >= re.length ? null : Tn(re[G], V._decodedMemo, G, J, ct); + }), + (e.originalPositionFor = (V, {line: G, column: J, bias: re}) => { + if ((G--, G < 0)) throw new Error(tt); + if (J < 0) throw new Error(nt); + let ve = e.decodedMappings(V); + if (G >= ve.length) return Pt(null, null, null, null); + let he = Tn(ve[G], V._decodedMemo, G, J, re || ct); + if (he == null || he.length == 1) return Pt(null, null, null, null); + let {names: Ie, resolvedSources: Ee} = V; + return Pt( + Ee[he[y]], + he[g] + 1, + he[L], + he.length === 5 ? Ie[he[p]] : null + ); + }), + (e.generatedPositionFor = ( + V, + {source: G, line: J, column: re, bias: ve} + ) => { + if ((J--, J < 0)) throw new Error(tt); + if (re < 0) throw new Error(nt); + let {sources: he, resolvedSources: Ie} = V, + Ee = he.indexOf(G); + if ((Ee === -1 && (Ee = Ie.indexOf(G)), Ee === -1)) + return qt(null, null); + let Le = + V._bySources || + (V._bySources = pe( + e.decodedMappings(V), + (V._bySourceMemos = he.map(X)) + )), + Xe = V._bySourceMemos, + We = Le[Ee][J]; + if (We == null) return qt(null, null); + let Ke = Tn(We, Xe[Ee], J, re, ve || ct); + return Ke == null ? qt(null, null) : qt(Ke[h] + 1, Ke[T]); + }), + (e.eachMapping = (V, G) => { + let J = e.decodedMappings(V), + {names: re, resolvedSources: ve} = V; + for (let he = 0; he < J.length; he++) { + let Ie = J[he]; + for (let Ee = 0; Ee < Ie.length; Ee++) { + let Le = Ie[Ee], + Xe = he + 1, + We = Le[0], + Ke = null, + ut = null, + pt = null, + bt = null; + Le.length !== 1 && + ((Ke = ve[Le[1]]), (ut = Le[2] + 1), (pt = Le[3])), + Le.length === 5 && (bt = re[Le[4]]), + G({ + generatedLine: Xe, + generatedColumn: We, + source: Ke, + originalLine: ut, + originalColumn: pt, + name: bt, + }); + } + } + }), + (e.sourceContentFor = (V, G) => { + let {sources: J, resolvedSources: re, sourcesContent: ve} = V; + if (ve == null) return null; + let he = J.indexOf(G); + return he === -1 && (he = re.indexOf(G)), he === -1 ? null : ve[he]; + }), + (e.presortedDecodedMap = (V, G) => { + let J = new wt($t(V, []), G); + return (J._decoded = V.mappings), J; + }), + (e.decodedMap = (V) => $t(V, e.decodedMappings(V))), + (e.encodedMap = (V) => $t(V, e.encodedMappings(V))); + function $t(V, G) { + return { + version: V.version, + file: V.file, + names: V.names, + sourceRoot: V.sourceRoot, + sources: V.sources, + sourcesContent: V.sourcesContent, + mappings: G, + }; + } + function Pt(V, G, J, re) { + return {source: V, line: G, column: J, name: re}; + } + function qt(V, G) { + return {line: V, column: G}; + } + function Tn(V, G, J, re, ve) { + let he = ie(V, re, G, J); + return ( + M ? (he = (ve === _t ? R : W)(V, re, he)) : ve === _t && he++, + he === -1 || he === V.length ? null : V[he] + ); + } + (e.AnyMap = qe), + (e.GREATEST_LOWER_BOUND = ct), + (e.LEAST_UPPER_BOUND = _t), + (e.TraceMap = wt), + Object.defineProperty(e, '__esModule', {value: !0}); + }); + }); + var V1 = Z((so, B1) => { + (function (e, t) { + typeof so == 'object' && typeof B1 < 'u' + ? t(so, L1(), ja(), F1()) + : typeof define == 'function' && define.amd + ? define( + [ + 'exports', + '@jridgewell/set-array', + '@jridgewell/sourcemap-codec', + '@jridgewell/trace-mapping', + ], + t + ) + : ((e = typeof globalThis < 'u' ? globalThis : e || self), + t((e.genMapping = {}), e.setArray, e.sourcemapCodec, e.traceMapping)); + })(so, function (e, t, s, i) { + 'use strict'; + (e.addSegment = void 0), + (e.addMapping = void 0), + (e.maybeAddSegment = void 0), + (e.maybeAddMapping = void 0), + (e.setSourceContent = void 0), + (e.toDecodedMap = void 0), + (e.toEncodedMap = void 0), + (e.fromMap = void 0), + (e.allMappings = void 0); + let L; + class p { + constructor({file: R, sourceRoot: W} = {}) { + (this._names = new t.SetArray()), + (this._sources = new t.SetArray()), + (this._sourcesContent = []), + (this._mappings = []), + (this.file = R), + (this.sourceRoot = W); + } + } + (e.addSegment = (c, R, W, X, ie, pe, ae, He) => + L(!1, c, R, W, X, ie, pe, ae, He)), + (e.maybeAddSegment = (c, R, W, X, ie, pe, ae, He) => + L(!0, c, R, W, X, ie, pe, ae, He)), + (e.addMapping = (c, R) => M(!1, c, R)), + (e.maybeAddMapping = (c, R) => M(!0, c, R)), + (e.setSourceContent = (c, R, W) => { + let {_sources: X, _sourcesContent: ie} = c; + ie[t.put(X, R)] = W; + }), + (e.toDecodedMap = (c) => { + let { + file: R, + sourceRoot: W, + _mappings: X, + _sources: ie, + _sourcesContent: pe, + _names: ae, + } = c; + return ( + w(X), + { + version: 3, + file: R || void 0, + names: ae.array, + sourceRoot: W || void 0, + sources: ie.array, + sourcesContent: pe, + mappings: X, + } + ); + }), + (e.toEncodedMap = (c) => { + let R = e.toDecodedMap(c); + return Object.assign(Object.assign({}, R), { + mappings: s.encode(R.mappings), + }); + }), + (e.allMappings = (c) => { + let R = [], + {_mappings: W, _sources: X, _names: ie} = c; + for (let pe = 0; pe < W.length; pe++) { + let ae = W[pe]; + for (let He = 0; He < ae.length; He++) { + let qe = ae[He], + Bt = {line: pe + 1, column: qe[0]}, + mt, + kt, + At; + qe.length !== 1 && + ((mt = X.array[qe[1]]), + (kt = {line: qe[2] + 1, column: qe[3]}), + qe.length === 5 && (At = ie.array[qe[4]])), + R.push({generated: Bt, source: mt, original: kt, name: At}); + } + } + return R; + }), + (e.fromMap = (c) => { + let R = new i.TraceMap(c), + W = new p({file: R.file, sourceRoot: R.sourceRoot}); + return ( + S(W._names, R.names), + S(W._sources, R.sources), + (W._sourcesContent = R.sourcesContent || R.sources.map(() => null)), + (W._mappings = i.decodedMappings(R)), + W + ); + }), + (L = (c, R, W, X, ie, pe, ae, He, qe) => { + let { + _mappings: Bt, + _sources: mt, + _sourcesContent: kt, + _names: At, + } = R, + tt = h(Bt, W), + nt = T(tt, X); + if (!ie) return c && A(tt, nt) ? void 0 : x(tt, nt, [X]); + let _t = t.put(mt, ie), + ct = He ? t.put(At, He) : -1; + if ( + (_t === kt.length && (kt[_t] = qe ?? null), + !(c && U(tt, nt, _t, pe, ae, ct))) + ) + return x(tt, nt, He ? [X, _t, pe, ae, ct] : [X, _t, pe, ae]); + }); + function h(c, R) { + for (let W = c.length; W <= R; W++) c[W] = []; + return c[R]; + } + function T(c, R) { + let W = c.length; + for (let X = W - 1; X >= 0; W = X--) { + let ie = c[X]; + if (R >= ie[0]) break; + } + return W; + } + function x(c, R, W) { + for (let X = c.length; X > R; X--) c[X] = c[X - 1]; + c[R] = W; + } + function w(c) { + let {length: R} = c, + W = R; + for (let X = W - 1; X >= 0 && !(c[X].length > 0); W = X, X--); + W < R && (c.length = W); + } + function S(c, R) { + for (let W = 0; W < R.length; W++) t.put(c, R[W]); + } + function A(c, R) { + return R === 0 ? !0 : c[R - 1].length === 1; + } + function U(c, R, W, X, ie, pe) { + if (R === 0) return !1; + let ae = c[R - 1]; + return ae.length === 1 + ? !1 + : W === ae[1] && + X === ae[2] && + ie === ae[3] && + pe === (ae.length === 5 ? ae[4] : -1); + } + function M(c, R, W) { + let {generated: X, source: ie, original: pe, name: ae, content: He} = W; + if (!ie) + return L(c, R, X.line - 1, X.column, null, null, null, null, null); + let qe = ie; + return L( + c, + R, + X.line - 1, + X.column, + qe, + pe.line - 1, + pe.column, + ae, + He + ); + } + (e.GenMapping = p), Object.defineProperty(e, '__esModule', {value: !0}); + }); + }); + var $1 = Z((Ka) => { + 'use strict'; + Object.defineProperty(Ka, '__esModule', {value: !0}); + var Gi = V1(), + j1 = Qt(); + function hy({code: e, mappings: t}, s, i, r, a) { + let u = fy(r, a), + d = new Gi.GenMapping({file: i.compiledFilename}), + y = 0, + g = t[0]; + for (; g === void 0 && y < t.length - 1; ) y++, (g = t[y]); + let L = 0, + p = 0; + g !== p && Gi.maybeAddSegment.call(void 0, d, L, 0, s, L, 0); + for (let w = 0; w < e.length; w++) { + if (w === g) { + let S = g - p, + A = u[y]; + for ( + Gi.maybeAddSegment.call(void 0, d, L, S, s, L, A); + (g === w || g === void 0) && y < t.length - 1; + + ) + y++, (g = t[y]); + } + e.charCodeAt(w) === j1.charCodes.lineFeed && + (L++, + (p = w + 1), + g !== p && Gi.maybeAddSegment.call(void 0, d, L, 0, s, L, 0)); + } + let { + sourceRoot: h, + sourcesContent: T, + ...x + } = Gi.toEncodedMap.call(void 0, d); + return x; + } + Ka.default = hy; + function fy(e, t) { + let s = new Array(t.length), + i = 0, + r = t[i].start, + a = 0; + for (let u = 0; u < e.length; u++) + u === r && ((s[i] = r - a), i++, (r = t[i].start)), + e.charCodeAt(u) === j1.charCodes.lineFeed && (a = u + 1); + return s; + } + }); + var q1 = Z((Ha) => { + 'use strict'; + Object.defineProperty(Ha, '__esModule', {value: !0}); + var dy = { + require: ` + import {createRequire as CREATE_REQUIRE_NAME} from "module"; + const require = CREATE_REQUIRE_NAME(import.meta.url); + `, + interopRequireWildcard: ` + function interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } else { + var newObj = {}; + if (obj != null) { + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + newObj[key] = obj[key]; + } + } + } + newObj.default = obj; + return newObj; + } + } + `, + interopRequireDefault: ` + function interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; + } + `, + createNamedExportFrom: ` + function createNamedExportFrom(obj, localName, importedName) { + Object.defineProperty(exports, localName, {enumerable: true, configurable: true, get: () => obj[importedName]}); + } + `, + createStarExport: ` + function createStarExport(obj) { + Object.keys(obj) + .filter((key) => key !== "default" && key !== "__esModule") + .forEach((key) => { + if (exports.hasOwnProperty(key)) { + return; + } + Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); + }); + } + `, + nullishCoalesce: ` + function nullishCoalesce(lhs, rhsFn) { + if (lhs != null) { + return lhs; + } else { + return rhsFn(); + } + } + `, + asyncNullishCoalesce: ` + async function asyncNullishCoalesce(lhs, rhsFn) { + if (lhs != null) { + return lhs; + } else { + return await rhsFn(); + } + } + `, + optionalChain: ` + function optionalChain(ops) { + let lastAccessLHS = undefined; + let value = ops[0]; + let i = 1; + while (i < ops.length) { + const op = ops[i]; + const fn = ops[i + 1]; + i += 2; + if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { + return undefined; + } + if (op === 'access' || op === 'optionalAccess') { + lastAccessLHS = value; + value = fn(value); + } else if (op === 'call' || op === 'optionalCall') { + value = fn((...args) => value.call(lastAccessLHS, ...args)); + lastAccessLHS = undefined; + } + } + return value; + } + `, + asyncOptionalChain: ` + async function asyncOptionalChain(ops) { + let lastAccessLHS = undefined; + let value = ops[0]; + let i = 1; + while (i < ops.length) { + const op = ops[i]; + const fn = ops[i + 1]; + i += 2; + if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { + return undefined; + } + if (op === 'access' || op === 'optionalAccess') { + lastAccessLHS = value; + value = await fn(value); + } else if (op === 'call' || op === 'optionalCall') { + value = await fn((...args) => value.call(lastAccessLHS, ...args)); + lastAccessLHS = undefined; + } + } + return value; + } + `, + optionalChainDelete: ` + function optionalChainDelete(ops) { + const result = OPTIONAL_CHAIN_NAME(ops); + return result == null ? true : result; + } + `, + asyncOptionalChainDelete: ` + async function asyncOptionalChainDelete(ops) { + const result = await ASYNC_OPTIONAL_CHAIN_NAME(ops); + return result == null ? true : result; + } + `, + }, + Ua = class e { + __init() { + this.helperNames = {}; + } + __init2() { + this.createRequireName = null; + } + constructor(t) { + (this.nameManager = t), + e.prototype.__init.call(this), + e.prototype.__init2.call(this); + } + getHelperName(t) { + let s = this.helperNames[t]; + return ( + s || + ((s = this.nameManager.claimFreeName(`_${t}`)), + (this.helperNames[t] = s), + s) + ); + } + emitHelpers() { + let t = ''; + this.helperNames.optionalChainDelete && + this.getHelperName('optionalChain'), + this.helperNames.asyncOptionalChainDelete && + this.getHelperName('asyncOptionalChain'); + for (let [s, i] of Object.entries(dy)) { + let r = this.helperNames[s], + a = i; + s === 'optionalChainDelete' + ? (a = a.replace( + 'OPTIONAL_CHAIN_NAME', + this.helperNames.optionalChain + )) + : s === 'asyncOptionalChainDelete' + ? (a = a.replace( + 'ASYNC_OPTIONAL_CHAIN_NAME', + this.helperNames.asyncOptionalChain + )) + : s === 'require' && + (this.createRequireName === null && + (this.createRequireName = + this.nameManager.claimFreeName('_createRequire')), + (a = a.replace( + /CREATE_REQUIRE_NAME/g, + this.createRequireName + ))), + r && + ((t += ' '), + (t += a.replace(s, r).replace(/\s+/g, ' ').trim())); + } + return t; + } + }; + Ha.HelperManager = Ua; + }); + var H1 = Z((ro) => { + 'use strict'; + Object.defineProperty(ro, '__esModule', {value: !0}); + var Wa = xt(), + io = be(); + function my(e, t, s) { + U1(e, s) && yy(e, t, s); + } + ro.default = my; + function U1(e, t) { + for (let s of e.tokens) + if ( + s.type === io.TokenType.name && + Wa.isNonTopLevelDeclaration.call(void 0, s) && + t.has(e.identifierNameForToken(s)) + ) + return !0; + return !1; + } + ro.hasShadowedGlobals = U1; + function yy(e, t, s) { + let i = [], + r = t.length - 1; + for (let a = e.tokens.length - 1; ; a--) { + for (; i.length > 0 && i[i.length - 1].startTokenIndex === a + 1; ) + i.pop(); + for (; r >= 0 && t[r].endTokenIndex === a + 1; ) i.push(t[r]), r--; + if (a < 0) break; + let u = e.tokens[a], + d = e.identifierNameForToken(u); + if (i.length > 1 && u.type === io.TokenType.name && s.has(d)) { + if (Wa.isBlockScopedDeclaration.call(void 0, u)) + K1(i[i.length - 1], e, d); + else if (Wa.isFunctionScopedDeclaration.call(void 0, u)) { + let y = i.length - 1; + for (; y > 0 && !i[y].isFunctionScope; ) y--; + if (y < 0) throw new Error('Did not find parent function scope.'); + K1(i[y], e, d); + } + } + } + if (i.length > 0) + throw new Error('Expected empty scope stack after processing file.'); + } + function K1(e, t, s) { + for (let i = e.startTokenIndex; i < e.endTokenIndex; i++) { + let r = t.tokens[i]; + (r.type === io.TokenType.name || r.type === io.TokenType.jsxName) && + t.identifierNameForToken(r) === s && + (r.shadowsGlobal = !0); + } + } + }); + var W1 = Z((Ga) => { + 'use strict'; + Object.defineProperty(Ga, '__esModule', {value: !0}); + var Ty = be(); + function ky(e, t) { + let s = []; + for (let i of t) + i.type === Ty.TokenType.name && s.push(e.slice(i.start, i.end)); + return s; + } + Ga.default = ky; + }); + var G1 = Z((Xa) => { + 'use strict'; + Object.defineProperty(Xa, '__esModule', {value: !0}); + function vy(e) { + return e && e.__esModule ? e : {default: e}; + } + var xy = W1(), + gy = vy(xy), + za = class e { + __init() { + this.usedNames = new Set(); + } + constructor(t, s) { + e.prototype.__init.call(this), + (this.usedNames = new Set(gy.default.call(void 0, t, s))); + } + claimFreeName(t) { + let s = this.findFreeName(t); + return this.usedNames.add(s), s; + } + findFreeName(t) { + if (!this.usedNames.has(t)) return t; + let s = 2; + for (; this.usedNames.has(t + String(s)); ) s++; + return t + String(s); + } + }; + Xa.default = za; + }); + var oo = Z((Pn) => { + 'use strict'; + var _y = + (Pn && Pn.__extends) || + (function () { + var e = function (t, s) { + return ( + (e = + Object.setPrototypeOf || + ({__proto__: []} instanceof Array && + function (i, r) { + i.__proto__ = r; + }) || + function (i, r) { + for (var a in r) r.hasOwnProperty(a) && (i[a] = r[a]); + }), + e(t, s) + ); + }; + return function (t, s) { + e(t, s); + function i() { + this.constructor = t; + } + t.prototype = + s === null + ? Object.create(s) + : ((i.prototype = s.prototype), new i()); + }; + })(); + Object.defineProperty(Pn, '__esModule', {value: !0}); + Pn.DetailContext = Pn.NoopContext = Pn.VError = void 0; + var z1 = (function (e) { + _y(t, e); + function t(s, i) { + var r = e.call(this, i) || this; + return (r.path = s), Object.setPrototypeOf(r, t.prototype), r; + } + return t; + })(Error); + Pn.VError = z1; + var by = (function () { + function e() {} + return ( + (e.prototype.fail = function (t, s, i) { + return !1; + }), + (e.prototype.unionResolver = function () { + return this; + }), + (e.prototype.createContext = function () { + return this; + }), + (e.prototype.resolveUnion = function (t) {}), + e + ); + })(); + Pn.NoopContext = by; + var X1 = (function () { + function e() { + (this._propNames = ['']), (this._messages = [null]), (this._score = 0); + } + return ( + (e.prototype.fail = function (t, s, i) { + return ( + this._propNames.push(t), + this._messages.push(s), + (this._score += i), + !1 + ); + }), + (e.prototype.unionResolver = function () { + return new Cy(); + }), + (e.prototype.resolveUnion = function (t) { + for ( + var s, i, r = t, a = null, u = 0, d = r.contexts; + u < d.length; + u++ + ) { + var y = d[u]; + (!a || y._score >= a._score) && (a = y); + } + a && + a._score > 0 && + ((s = this._propNames).push.apply(s, a._propNames), + (i = this._messages).push.apply(i, a._messages)); + }), + (e.prototype.getError = function (t) { + for (var s = [], i = this._propNames.length - 1; i >= 0; i--) { + var r = this._propNames[i]; + t += typeof r == 'number' ? '[' + r + ']' : r ? '.' + r : ''; + var a = this._messages[i]; + a && s.push(t + ' ' + a); + } + return new z1(t, s.join('; ')); + }), + (e.prototype.getErrorDetail = function (t) { + for (var s = [], i = this._propNames.length - 1; i >= 0; i--) { + var r = this._propNames[i]; + t += typeof r == 'number' ? '[' + r + ']' : r ? '.' + r : ''; + var a = this._messages[i]; + a && s.push({path: t, message: a}); + } + for (var u = null, i = s.length - 1; i >= 0; i--) + u && (s[i].nested = [u]), (u = s[i]); + return u; + }), + e + ); + })(); + Pn.DetailContext = X1; + var Cy = (function () { + function e() { + this.contexts = []; + } + return ( + (e.prototype.createContext = function () { + var t = new X1(); + return this.contexts.push(t), t; + }), + e + ); + })(); + }); + var sl = Z((ce) => { + 'use strict'; + var nn = + (ce && ce.__extends) || + (function () { + var e = function (t, s) { + return ( + (e = + Object.setPrototypeOf || + ({__proto__: []} instanceof Array && + function (i, r) { + i.__proto__ = r; + }) || + function (i, r) { + for (var a in r) r.hasOwnProperty(a) && (i[a] = r[a]); + }), + e(t, s) + ); + }; + return function (t, s) { + e(t, s); + function i() { + this.constructor = t; + } + t.prototype = + s === null + ? Object.create(s) + : ((i.prototype = s.prototype), new i()); + }; + })(); + Object.defineProperty(ce, '__esModule', {value: !0}); + ce.basicTypes = + ce.BasicType = + ce.TParamList = + ce.TParam = + ce.param = + ce.TFunc = + ce.func = + ce.TProp = + ce.TOptional = + ce.opt = + ce.TIface = + ce.iface = + ce.TEnumLiteral = + ce.enumlit = + ce.TEnumType = + ce.enumtype = + ce.TIntersection = + ce.intersection = + ce.TUnion = + ce.union = + ce.TTuple = + ce.tuple = + ce.TArray = + ce.array = + ce.TLiteral = + ce.lit = + ce.TName = + ce.name = + ce.TType = + void 0; + var Q1 = oo(), + Ht = (function () { + function e() {} + return e; + })(); + ce.TType = Ht; + function ps(e) { + return typeof e == 'string' ? Z1(e) : e; + } + function Qa(e, t) { + var s = e[t]; + if (!s) throw new Error('Unknown type ' + t); + return s; + } + function Z1(e) { + return new Za(e); + } + ce.name = Z1; + var Za = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return (i.name = s), (i._failMsg = 'is not a ' + s), i; + } + return ( + (t.prototype.getChecker = function (s, i, r) { + var a = this, + u = Qa(s, this.name), + d = u.getChecker(s, i, r); + return u instanceof Dt || u instanceof t + ? d + : function (y, g) { + return d(y, g) ? !0 : g.fail(null, a._failMsg, 0); + }; + }), + t + ); + })(Ht); + ce.TName = Za; + function wy(e) { + return new el(e); + } + ce.lit = wy; + var el = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return ( + (i.value = s), + (i.name = JSON.stringify(s)), + (i._failMsg = 'is not ' + i.name), + i + ); + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this; + return function (a, u) { + return a === r.value ? !0 : u.fail(null, r._failMsg, -1); + }; + }), + t + ); + })(Ht); + ce.TLiteral = el; + function Sy(e) { + return new ep(ps(e)); + } + ce.array = Sy; + var ep = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return (i.ttype = s), i; + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this.ttype.getChecker(s, i); + return function (a, u) { + if (!Array.isArray(a)) return u.fail(null, 'is not an array', 0); + for (var d = 0; d < a.length; d++) { + var y = r(a[d], u); + if (!y) return u.fail(d, null, 1); + } + return !0; + }; + }), + t + ); + })(Ht); + ce.TArray = ep; + function Iy() { + for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; + return new tp( + e.map(function (s) { + return ps(s); + }) + ); + } + ce.tuple = Iy; + var tp = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return (i.ttypes = s), i; + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this.ttypes.map(function (u) { + return u.getChecker(s, i); + }), + a = function (u, d) { + if (!Array.isArray(u)) return d.fail(null, 'is not an array', 0); + for (var y = 0; y < r.length; y++) { + var g = r[y](u[y], d); + if (!g) return d.fail(y, null, 1); + } + return !0; + }; + return i + ? function (u, d) { + return a(u, d) + ? u.length <= r.length + ? !0 + : d.fail(r.length, 'is extraneous', 2) + : !1; + } + : a; + }), + t + ); + })(Ht); + ce.TTuple = tp; + function Ey() { + for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; + return new np( + e.map(function (s) { + return ps(s); + }) + ); + } + ce.union = Ey; + var np = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + i.ttypes = s; + var r = s + .map(function (u) { + return u instanceof Za || u instanceof el ? u.name : null; + }) + .filter(function (u) { + return u; + }), + a = s.length - r.length; + return ( + r.length + ? (a > 0 && r.push(a + ' more'), + (i._failMsg = 'is none of ' + r.join(', '))) + : (i._failMsg = 'is none of ' + a + ' types'), + i + ); + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this, + a = this.ttypes.map(function (u) { + return u.getChecker(s, i); + }); + return function (u, d) { + for (var y = d.unionResolver(), g = 0; g < a.length; g++) { + var L = a[g](u, y.createContext()); + if (L) return !0; + } + return d.resolveUnion(y), d.fail(null, r._failMsg, 0); + }; + }), + t + ); + })(Ht); + ce.TUnion = np; + function Ay() { + for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; + return new sp( + e.map(function (s) { + return ps(s); + }) + ); + } + ce.intersection = Ay; + var sp = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return (i.ttypes = s), i; + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = new Set(), + a = this.ttypes.map(function (u) { + return u.getChecker(s, i, r); + }); + return function (u, d) { + var y = a.every(function (g) { + return g(u, d); + }); + return y ? !0 : d.fail(null, null, 0); + }; + }), + t + ); + })(Ht); + ce.TIntersection = sp; + function Py(e) { + return new tl(e); + } + ce.enumtype = Py; + var tl = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return ( + (i.members = s), + (i.validValues = new Set()), + (i._failMsg = 'is not a valid enum value'), + (i.validValues = new Set( + Object.keys(s).map(function (r) { + return s[r]; + }) + )), + i + ); + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this; + return function (a, u) { + return r.validValues.has(a) ? !0 : u.fail(null, r._failMsg, 0); + }; + }), + t + ); + })(Ht); + ce.TEnumType = tl; + function Ny(e, t) { + return new ip(e, t); + } + ce.enumlit = Ny; + var ip = (function (e) { + nn(t, e); + function t(s, i) { + var r = e.call(this) || this; + return ( + (r.enumName = s), + (r.prop = i), + (r._failMsg = 'is not ' + s + '.' + i), + r + ); + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this, + a = Qa(s, this.enumName); + if (!(a instanceof tl)) + throw new Error( + 'Type ' + this.enumName + ' used in enumlit is not an enum type' + ); + var u = a.members[this.prop]; + if (!a.members.hasOwnProperty(this.prop)) + throw new Error( + 'Unknown value ' + + this.enumName + + '.' + + this.prop + + ' used in enumlit' + ); + return function (d, y) { + return d === u ? !0 : y.fail(null, r._failMsg, -1); + }; + }), + t + ); + })(Ht); + ce.TEnumLiteral = ip; + function Ry(e) { + return Object.keys(e).map(function (t) { + return Ly(t, e[t]); + }); + } + function Ly(e, t) { + return t instanceof nl ? new Ja(e, t.ttype, !0) : new Ja(e, ps(t), !1); + } + function Oy(e, t) { + return new rp(e, Ry(t)); + } + ce.iface = Oy; + var rp = (function (e) { + nn(t, e); + function t(s, i) { + var r = e.call(this) || this; + return ( + (r.bases = s), + (r.props = i), + (r.propSet = new Set( + i.map(function (a) { + return a.name; + }) + )), + r + ); + } + return ( + (t.prototype.getChecker = function (s, i, r) { + var a = this, + u = this.bases.map(function (h) { + return Qa(s, h).getChecker(s, i); + }), + d = this.props.map(function (h) { + return h.ttype.getChecker(s, i); + }), + y = new Q1.NoopContext(), + g = this.props.map(function (h, T) { + return !h.isOpt && !d[T](void 0, y); + }), + L = function (h, T) { + if (typeof h != 'object' || h === null) + return T.fail(null, 'is not an object', 0); + for (var x = 0; x < u.length; x++) if (!u[x](h, T)) return !1; + for (var x = 0; x < d.length; x++) { + var w = a.props[x].name, + S = h[w]; + if (S === void 0) { + if (g[x]) return T.fail(w, 'is missing', 1); + } else { + var A = d[x](S, T); + if (!A) return T.fail(w, null, 1); + } + } + return !0; + }; + if (!i) return L; + var p = this.propSet; + return ( + r && + (this.propSet.forEach(function (h) { + return r.add(h); + }), + (p = r)), + function (h, T) { + if (!L(h, T)) return !1; + for (var x in h) + if (!p.has(x)) return T.fail(x, 'is extraneous', 2); + return !0; + } + ); + }), + t + ); + })(Ht); + ce.TIface = rp; + function Dy(e) { + return new nl(ps(e)); + } + ce.opt = Dy; + var nl = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return (i.ttype = s), i; + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this.ttype.getChecker(s, i); + return function (a, u) { + return a === void 0 || r(a, u); + }; + }), + t + ); + })(Ht); + ce.TOptional = nl; + var Ja = (function () { + function e(t, s, i) { + (this.name = t), (this.ttype = s), (this.isOpt = i); + } + return e; + })(); + ce.TProp = Ja; + function My(e) { + for (var t = [], s = 1; s < arguments.length; s++) + t[s - 1] = arguments[s]; + return new op(new lp(t), ps(e)); + } + ce.func = My; + var op = (function (e) { + nn(t, e); + function t(s, i) { + var r = e.call(this) || this; + return (r.paramList = s), (r.result = i), r; + } + return ( + (t.prototype.getChecker = function (s, i) { + return function (r, a) { + return typeof r == 'function' + ? !0 + : a.fail(null, 'is not a function', 0); + }; + }), + t + ); + })(Ht); + ce.TFunc = op; + function Fy(e, t, s) { + return new ap(e, ps(t), !!s); + } + ce.param = Fy; + var ap = (function () { + function e(t, s, i) { + (this.name = t), (this.ttype = s), (this.isOpt = i); + } + return e; + })(); + ce.TParam = ap; + var lp = (function (e) { + nn(t, e); + function t(s) { + var i = e.call(this) || this; + return (i.params = s), i; + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this, + a = this.params.map(function (g) { + return g.ttype.getChecker(s, i); + }), + u = new Q1.NoopContext(), + d = this.params.map(function (g, L) { + return !g.isOpt && !a[L](void 0, u); + }), + y = function (g, L) { + if (!Array.isArray(g)) return L.fail(null, 'is not an array', 0); + for (var p = 0; p < a.length; p++) { + var h = r.params[p]; + if (g[p] === void 0) { + if (d[p]) return L.fail(h.name, 'is missing', 1); + } else { + var T = a[p](g[p], L); + if (!T) return L.fail(h.name, null, 1); + } + } + return !0; + }; + return i + ? function (g, L) { + return y(g, L) + ? g.length <= a.length + ? !0 + : L.fail(a.length, 'is extraneous', 2) + : !1; + } + : y; + }), + t + ); + })(Ht); + ce.TParamList = lp; + var Dt = (function (e) { + nn(t, e); + function t(s, i) { + var r = e.call(this) || this; + return (r.validator = s), (r.message = i), r; + } + return ( + (t.prototype.getChecker = function (s, i) { + var r = this; + return function (a, u) { + return r.validator(a) ? !0 : u.fail(null, r.message, 0); + }; + }), + t + ); + })(Ht); + ce.BasicType = Dt; + ce.basicTypes = { + any: new Dt(function (e) { + return !0; + }, 'is invalid'), + number: new Dt(function (e) { + return typeof e == 'number'; + }, 'is not a number'), + object: new Dt(function (e) { + return typeof e == 'object' && e; + }, 'is not an object'), + boolean: new Dt(function (e) { + return typeof e == 'boolean'; + }, 'is not a boolean'), + string: new Dt(function (e) { + return typeof e == 'string'; + }, 'is not a string'), + symbol: new Dt(function (e) { + return typeof e == 'symbol'; + }, 'is not a symbol'), + void: new Dt(function (e) { + return e == null; + }, 'is not void'), + undefined: new Dt(function (e) { + return e === void 0; + }, 'is not undefined'), + null: new Dt(function (e) { + return e === null; + }, 'is not null'), + never: new Dt(function (e) { + return !1; + }, 'is unexpected'), + Date: new Dt(Y1('[object Date]'), 'is not a Date'), + RegExp: new Dt(Y1('[object RegExp]'), 'is not a RegExp'), + }; + var By = Object.prototype.toString; + function Y1(e) { + return function (t) { + return typeof t == 'object' && t && By.call(t) === e; + }; + } + typeof Buffer < 'u' && + (ce.basicTypes.Buffer = new Dt(function (e) { + return Buffer.isBuffer(e); + }, 'is not a Buffer')); + var Vy = function (e) { + ce.basicTypes[e.name] = new Dt(function (t) { + return t instanceof e; + }, 'is not a ' + e.name); + }; + for ( + ao = 0, + Ya = [ + Int8Array, + Uint8Array, + Uint8ClampedArray, + Int16Array, + Uint16Array, + Int32Array, + Uint32Array, + Float32Array, + Float64Array, + ArrayBuffer, + ]; + ao < Ya.length; + ao++ + ) + (J1 = Ya[ao]), Vy(J1); + var J1, ao, Ya; + }); + var il = Z((we) => { + 'use strict'; + var jy = + (we && we.__spreadArrays) || + function () { + for (var e = 0, t = 0, s = arguments.length; t < s; t++) + e += arguments[t].length; + for (var i = Array(e), r = 0, t = 0; t < s; t++) + for (var a = arguments[t], u = 0, d = a.length; u < d; u++, r++) + i[r] = a[u]; + return i; + }; + Object.defineProperty(we, '__esModule', {value: !0}); + we.Checker = we.createCheckers = void 0; + var zi = sl(), + pi = oo(), + ze = sl(); + Object.defineProperty(we, 'TArray', { + enumerable: !0, + get: function () { + return ze.TArray; + }, + }); + Object.defineProperty(we, 'TEnumType', { + enumerable: !0, + get: function () { + return ze.TEnumType; + }, + }); + Object.defineProperty(we, 'TEnumLiteral', { + enumerable: !0, + get: function () { + return ze.TEnumLiteral; + }, + }); + Object.defineProperty(we, 'TFunc', { + enumerable: !0, + get: function () { + return ze.TFunc; + }, + }); + Object.defineProperty(we, 'TIface', { + enumerable: !0, + get: function () { + return ze.TIface; + }, + }); + Object.defineProperty(we, 'TLiteral', { + enumerable: !0, + get: function () { + return ze.TLiteral; + }, + }); + Object.defineProperty(we, 'TName', { + enumerable: !0, + get: function () { + return ze.TName; + }, + }); + Object.defineProperty(we, 'TOptional', { + enumerable: !0, + get: function () { + return ze.TOptional; + }, + }); + Object.defineProperty(we, 'TParam', { + enumerable: !0, + get: function () { + return ze.TParam; + }, + }); + Object.defineProperty(we, 'TParamList', { + enumerable: !0, + get: function () { + return ze.TParamList; + }, + }); + Object.defineProperty(we, 'TProp', { + enumerable: !0, + get: function () { + return ze.TProp; + }, + }); + Object.defineProperty(we, 'TTuple', { + enumerable: !0, + get: function () { + return ze.TTuple; + }, + }); + Object.defineProperty(we, 'TType', { + enumerable: !0, + get: function () { + return ze.TType; + }, + }); + Object.defineProperty(we, 'TUnion', { + enumerable: !0, + get: function () { + return ze.TUnion; + }, + }); + Object.defineProperty(we, 'TIntersection', { + enumerable: !0, + get: function () { + return ze.TIntersection; + }, + }); + Object.defineProperty(we, 'array', { + enumerable: !0, + get: function () { + return ze.array; + }, + }); + Object.defineProperty(we, 'enumlit', { + enumerable: !0, + get: function () { + return ze.enumlit; + }, + }); + Object.defineProperty(we, 'enumtype', { + enumerable: !0, + get: function () { + return ze.enumtype; + }, + }); + Object.defineProperty(we, 'func', { + enumerable: !0, + get: function () { + return ze.func; + }, + }); + Object.defineProperty(we, 'iface', { + enumerable: !0, + get: function () { + return ze.iface; + }, + }); + Object.defineProperty(we, 'lit', { + enumerable: !0, + get: function () { + return ze.lit; + }, + }); + Object.defineProperty(we, 'name', { + enumerable: !0, + get: function () { + return ze.name; + }, + }); + Object.defineProperty(we, 'opt', { + enumerable: !0, + get: function () { + return ze.opt; + }, + }); + Object.defineProperty(we, 'param', { + enumerable: !0, + get: function () { + return ze.param; + }, + }); + Object.defineProperty(we, 'tuple', { + enumerable: !0, + get: function () { + return ze.tuple; + }, + }); + Object.defineProperty(we, 'union', { + enumerable: !0, + get: function () { + return ze.union; + }, + }); + Object.defineProperty(we, 'intersection', { + enumerable: !0, + get: function () { + return ze.intersection; + }, + }); + Object.defineProperty(we, 'BasicType', { + enumerable: !0, + get: function () { + return ze.BasicType; + }, + }); + var $y = oo(); + Object.defineProperty(we, 'VError', { + enumerable: !0, + get: function () { + return $y.VError; + }, + }); + function qy() { + for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; + for ( + var s = Object.assign.apply(Object, jy([{}, zi.basicTypes], e)), + i = {}, + r = 0, + a = e; + r < a.length; + r++ + ) + for (var u = a[r], d = 0, y = Object.keys(u); d < y.length; d++) { + var g = y[d]; + i[g] = new cp(s, u[g]); + } + return i; + } + we.createCheckers = qy; + var cp = (function () { + function e(t, s, i) { + if ( + (i === void 0 && (i = 'value'), + (this.suite = t), + (this.ttype = s), + (this._path = i), + (this.props = new Map()), + s instanceof zi.TIface) + ) + for (var r = 0, a = s.props; r < a.length; r++) { + var u = a[r]; + this.props.set(u.name, u.ttype); + } + (this.checkerPlain = this.ttype.getChecker(t, !1)), + (this.checkerStrict = this.ttype.getChecker(t, !0)); + } + return ( + (e.prototype.setReportedPath = function (t) { + this._path = t; + }), + (e.prototype.check = function (t) { + return this._doCheck(this.checkerPlain, t); + }), + (e.prototype.test = function (t) { + return this.checkerPlain(t, new pi.NoopContext()); + }), + (e.prototype.validate = function (t) { + return this._doValidate(this.checkerPlain, t); + }), + (e.prototype.strictCheck = function (t) { + return this._doCheck(this.checkerStrict, t); + }), + (e.prototype.strictTest = function (t) { + return this.checkerStrict(t, new pi.NoopContext()); + }), + (e.prototype.strictValidate = function (t) { + return this._doValidate(this.checkerStrict, t); + }), + (e.prototype.getProp = function (t) { + var s = this.props.get(t); + if (!s) throw new Error('Type has no property ' + t); + return new e(this.suite, s, this._path + '.' + t); + }), + (e.prototype.methodArgs = function (t) { + var s = this._getMethod(t); + return new e(this.suite, s.paramList); + }), + (e.prototype.methodResult = function (t) { + var s = this._getMethod(t); + return new e(this.suite, s.result); + }), + (e.prototype.getArgs = function () { + if (!(this.ttype instanceof zi.TFunc)) + throw new Error('getArgs() applied to non-function'); + return new e(this.suite, this.ttype.paramList); + }), + (e.prototype.getResult = function () { + if (!(this.ttype instanceof zi.TFunc)) + throw new Error('getResult() applied to non-function'); + return new e(this.suite, this.ttype.result); + }), + (e.prototype.getType = function () { + return this.ttype; + }), + (e.prototype._doCheck = function (t, s) { + var i = new pi.NoopContext(); + if (!t(s, i)) { + var r = new pi.DetailContext(); + throw (t(s, r), r.getError(this._path)); + } + }), + (e.prototype._doValidate = function (t, s) { + var i = new pi.NoopContext(); + if (t(s, i)) return null; + var r = new pi.DetailContext(); + return t(s, r), r.getErrorDetail(this._path); + }), + (e.prototype._getMethod = function (t) { + var s = this.props.get(t); + if (!s) throw new Error('Type has no property ' + t); + if (!(s instanceof zi.TFunc)) + throw new Error('Property ' + t + ' is not a method'); + return s; + }), + e + ); + })(); + we.Checker = cp; + }); + var up = Z((Gn) => { + 'use strict'; + Object.defineProperty(Gn, '__esModule', {value: !0}); + function Ky(e) { + if (e && e.__esModule) return e; + var t = {}; + if (e != null) + for (var s in e) + Object.prototype.hasOwnProperty.call(e, s) && (t[s] = e[s]); + return (t.default = e), t; + } + var Uy = il(), + Qe = Ky(Uy), + Hy = Qe.union( + Qe.lit('jsx'), + Qe.lit('typescript'), + Qe.lit('flow'), + Qe.lit('imports'), + Qe.lit('react-hot-loader'), + Qe.lit('jest') + ); + Gn.Transform = Hy; + var Wy = Qe.iface([], {compiledFilename: 'string'}); + Gn.SourceMapOptions = Wy; + var Gy = Qe.iface([], { + transforms: Qe.array('Transform'), + disableESTransforms: Qe.opt('boolean'), + jsxRuntime: Qe.opt( + Qe.union(Qe.lit('classic'), Qe.lit('automatic'), Qe.lit('preserve')) + ), + production: Qe.opt('boolean'), + jsxImportSource: Qe.opt('string'), + jsxPragma: Qe.opt('string'), + jsxFragmentPragma: Qe.opt('string'), + preserveDynamicImport: Qe.opt('boolean'), + injectCreateRequireForImportRequire: Qe.opt('boolean'), + enableLegacyTypeScriptModuleInterop: Qe.opt('boolean'), + enableLegacyBabel5ModuleInterop: Qe.opt('boolean'), + sourceMapOptions: Qe.opt('SourceMapOptions'), + filePath: Qe.opt('string'), + }); + Gn.Options = Gy; + var zy = { + Transform: Gn.Transform, + SourceMapOptions: Gn.SourceMapOptions, + Options: Gn.Options, + }; + Gn.default = zy; + }); + var pp = Z((rl) => { + 'use strict'; + Object.defineProperty(rl, '__esModule', {value: !0}); + function Xy(e) { + return e && e.__esModule ? e : {default: e}; + } + var Yy = il(), + Jy = up(), + Qy = Xy(Jy), + {Options: Zy} = Yy.createCheckers.call(void 0, Qy.default); + function eT(e) { + Zy.strictCheck(e); + } + rl.validateOptions = eT; + }); + var lo = Z((Nn) => { + 'use strict'; + Object.defineProperty(Nn, '__esModule', {value: !0}); + var tT = Ji(), + hp = hi(), + Mt = xt(), + Xi = It(), + fn = be(), + gt = Zt(), + Yi = Ns(), + ol = cs(); + function nT() { + Mt.next.call(void 0), Yi.parseMaybeAssign.call(void 0, !1); + } + Nn.parseSpread = nT; + function fp(e) { + Mt.next.call(void 0), ll(e); + } + Nn.parseRest = fp; + function dp(e) { + Yi.parseIdentifier.call(void 0), mp(e); + } + Nn.parseBindingIdentifier = dp; + function sT() { + Yi.parseIdentifier.call(void 0), + (gt.state.tokens[gt.state.tokens.length - 1].identifierRole = + Mt.IdentifierRole.ImportDeclaration); + } + Nn.parseImportedIdentifier = sT; + function mp(e) { + let t; + gt.state.scopeDepth === 0 + ? (t = Mt.IdentifierRole.TopLevelDeclaration) + : e + ? (t = Mt.IdentifierRole.BlockScopedDeclaration) + : (t = Mt.IdentifierRole.FunctionScopedDeclaration), + (gt.state.tokens[gt.state.tokens.length - 1].identifierRole = t); + } + Nn.markPriorBindingIdentifier = mp; + function ll(e) { + switch (gt.state.type) { + case fn.TokenType._this: { + let t = Mt.pushTypeContext.call(void 0, 0); + Mt.next.call(void 0), Mt.popTypeContext.call(void 0, t); + return; + } + case fn.TokenType._yield: + case fn.TokenType.name: { + (gt.state.type = fn.TokenType.name), dp(e); + return; + } + case fn.TokenType.bracketL: { + Mt.next.call(void 0), yp(fn.TokenType.bracketR, e, !0); + return; + } + case fn.TokenType.braceL: + Yi.parseObj.call(void 0, !0, e); + return; + default: + ol.unexpected.call(void 0); + } + } + Nn.parseBindingAtom = ll; + function yp(e, t, s = !1, i = !1, r = 0) { + let a = !0, + u = !1, + d = gt.state.tokens.length; + for (; !Mt.eat.call(void 0, e) && !gt.state.error; ) + if ( + (a + ? (a = !1) + : (ol.expect.call(void 0, fn.TokenType.comma), + (gt.state.tokens[gt.state.tokens.length - 1].contextId = r), + !u && + gt.state.tokens[d].isType && + ((gt.state.tokens[gt.state.tokens.length - 1].isType = !0), + (u = !0))), + !(s && Mt.match.call(void 0, fn.TokenType.comma))) + ) { + if (Mt.eat.call(void 0, e)) break; + if (Mt.match.call(void 0, fn.TokenType.ellipsis)) { + fp(t), + Tp(), + Mt.eat.call(void 0, fn.TokenType.comma), + ol.expect.call(void 0, e); + break; + } else iT(i, t); + } + } + Nn.parseBindingList = yp; + function iT(e, t) { + e && + hp.tsParseModifiers.call(void 0, [ + Xi.ContextualKeyword._public, + Xi.ContextualKeyword._protected, + Xi.ContextualKeyword._private, + Xi.ContextualKeyword._readonly, + Xi.ContextualKeyword._override, + ]), + al(t), + Tp(), + al(t, !0); + } + function Tp() { + gt.isFlowEnabled + ? tT.flowParseAssignableListItemTypes.call(void 0) + : gt.isTypeScriptEnabled && + hp.tsParseAssignableListItemTypes.call(void 0); + } + function al(e, t = !1) { + if ((t || ll(e), !Mt.eat.call(void 0, fn.TokenType.eq))) return; + let s = gt.state.tokens.length - 1; + Yi.parseMaybeAssign.call(void 0), + (gt.state.tokens[s].rhsEndIndex = gt.state.tokens.length); + } + Nn.parseMaybeDefault = al; + }); + var hi = Z((Oe) => { + 'use strict'; + Object.defineProperty(Oe, '__esModule', {value: !0}); + var v = xt(), + oe = It(), + k = be(), + I = Zt(), + _e = Ns(), + di = lo(), + Rn = nr(), + H = cs(), + rT = vl(); + function ul() { + return v.match.call(void 0, k.TokenType.name); + } + function oT() { + return ( + v.match.call(void 0, k.TokenType.name) || + !!(I.state.type & k.TokenType.IS_KEYWORD) || + v.match.call(void 0, k.TokenType.string) || + v.match.call(void 0, k.TokenType.num) || + v.match.call(void 0, k.TokenType.bigint) || + v.match.call(void 0, k.TokenType.decimal) + ); + } + function _p() { + let e = I.state.snapshot(); + return ( + v.next.call(void 0), + (v.match.call(void 0, k.TokenType.bracketL) || + v.match.call(void 0, k.TokenType.braceL) || + v.match.call(void 0, k.TokenType.star) || + v.match.call(void 0, k.TokenType.ellipsis) || + v.match.call(void 0, k.TokenType.hash) || + oT()) && + !H.hasPrecedingLineBreak.call(void 0) + ? !0 + : (I.state.restoreFromSnapshot(e), !1) + ); + } + function bp(e) { + for (; dl(e) !== null; ); + } + Oe.tsParseModifiers = bp; + function dl(e) { + if (!v.match.call(void 0, k.TokenType.name)) return null; + let t = I.state.contextualKeyword; + if (e.indexOf(t) !== -1 && _p()) { + switch (t) { + case oe.ContextualKeyword._readonly: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._readonly; + break; + case oe.ContextualKeyword._abstract: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._abstract; + break; + case oe.ContextualKeyword._static: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._static; + break; + case oe.ContextualKeyword._public: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._public; + break; + case oe.ContextualKeyword._private: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._private; + break; + case oe.ContextualKeyword._protected: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._protected; + break; + case oe.ContextualKeyword._override: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._override; + break; + case oe.ContextualKeyword._declare: + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._declare; + break; + default: + break; + } + return t; + } + return null; + } + Oe.tsParseModifier = dl; + function Zi() { + for ( + _e.parseIdentifier.call(void 0); + v.eat.call(void 0, k.TokenType.dot); + + ) + _e.parseIdentifier.call(void 0); + } + function aT() { + Zi(), + !H.hasPrecedingLineBreak.call(void 0) && + v.match.call(void 0, k.TokenType.lessThan) && + yi(); + } + function lT() { + v.next.call(void 0), tr(); + } + function cT() { + v.next.call(void 0); + } + function uT() { + H.expect.call(void 0, k.TokenType._typeof), + v.match.call(void 0, k.TokenType._import) ? Cp() : Zi(), + !H.hasPrecedingLineBreak.call(void 0) && + v.match.call(void 0, k.TokenType.lessThan) && + yi(); + } + function Cp() { + H.expect.call(void 0, k.TokenType._import), + H.expect.call(void 0, k.TokenType.parenL), + H.expect.call(void 0, k.TokenType.string), + H.expect.call(void 0, k.TokenType.parenR), + v.eat.call(void 0, k.TokenType.dot) && Zi(), + v.match.call(void 0, k.TokenType.lessThan) && yi(); + } + function pT() { + v.eat.call(void 0, k.TokenType._const); + let e = v.eat.call(void 0, k.TokenType._in), + t = H.eatContextual.call(void 0, oe.ContextualKeyword._out); + v.eat.call(void 0, k.TokenType._const), + (e || t) && !v.match.call(void 0, k.TokenType.name) + ? (I.state.tokens[I.state.tokens.length - 1].type = k.TokenType.name) + : _e.parseIdentifier.call(void 0), + v.eat.call(void 0, k.TokenType._extends) && rt(), + v.eat.call(void 0, k.TokenType.eq) && rt(); + } + function mi() { + v.match.call(void 0, k.TokenType.lessThan) && uo(); + } + Oe.tsTryParseTypeParameters = mi; + function uo() { + let e = v.pushTypeContext.call(void 0, 0); + for ( + v.match.call(void 0, k.TokenType.lessThan) || + v.match.call(void 0, k.TokenType.typeParameterStart) + ? v.next.call(void 0) + : H.unexpected.call(void 0); + !v.eat.call(void 0, k.TokenType.greaterThan) && !I.state.error; + + ) + pT(), v.eat.call(void 0, k.TokenType.comma); + v.popTypeContext.call(void 0, e); + } + function ml(e) { + let t = e === k.TokenType.arrow; + mi(), + H.expect.call(void 0, k.TokenType.parenL), + I.state.scopeDepth++, + hT(!1), + I.state.scopeDepth--, + (t || v.match.call(void 0, e)) && Qi(e); + } + function hT(e) { + di.parseBindingList.call(void 0, k.TokenType.parenR, e); + } + function co() { + v.eat.call(void 0, k.TokenType.comma) || H.semicolon.call(void 0); + } + function kp() { + ml(k.TokenType.colon), co(); + } + function fT() { + let e = I.state.snapshot(); + v.next.call(void 0); + let t = + v.eat.call(void 0, k.TokenType.name) && + v.match.call(void 0, k.TokenType.colon); + return I.state.restoreFromSnapshot(e), t; + } + function wp() { + if (!(v.match.call(void 0, k.TokenType.bracketL) && fT())) return !1; + let e = v.pushTypeContext.call(void 0, 0); + return ( + H.expect.call(void 0, k.TokenType.bracketL), + _e.parseIdentifier.call(void 0), + tr(), + H.expect.call(void 0, k.TokenType.bracketR), + er(), + co(), + v.popTypeContext.call(void 0, e), + !0 + ); + } + function vp(e) { + v.eat.call(void 0, k.TokenType.question), + !e && + (v.match.call(void 0, k.TokenType.parenL) || + v.match.call(void 0, k.TokenType.lessThan)) + ? (ml(k.TokenType.colon), co()) + : (er(), co()); + } + function dT() { + if ( + v.match.call(void 0, k.TokenType.parenL) || + v.match.call(void 0, k.TokenType.lessThan) + ) { + kp(); + return; + } + if (v.match.call(void 0, k.TokenType._new)) { + v.next.call(void 0), + v.match.call(void 0, k.TokenType.parenL) || + v.match.call(void 0, k.TokenType.lessThan) + ? kp() + : vp(!1); + return; + } + let e = !!dl([oe.ContextualKeyword._readonly]); + wp() || + ((H.isContextual.call(void 0, oe.ContextualKeyword._get) || + H.isContextual.call(void 0, oe.ContextualKeyword._set)) && + _p(), + _e.parsePropertyName.call(void 0, -1), + vp(e)); + } + function mT() { + Sp(); + } + function Sp() { + for ( + H.expect.call(void 0, k.TokenType.braceL); + !v.eat.call(void 0, k.TokenType.braceR) && !I.state.error; + + ) + dT(); + } + function yT() { + let e = I.state.snapshot(), + t = TT(); + return I.state.restoreFromSnapshot(e), t; + } + function TT() { + return ( + v.next.call(void 0), + v.eat.call(void 0, k.TokenType.plus) || + v.eat.call(void 0, k.TokenType.minus) + ? H.isContextual.call(void 0, oe.ContextualKeyword._readonly) + : (H.isContextual.call(void 0, oe.ContextualKeyword._readonly) && + v.next.call(void 0), + !v.match.call(void 0, k.TokenType.bracketL) || + (v.next.call(void 0), !ul()) + ? !1 + : (v.next.call(void 0), v.match.call(void 0, k.TokenType._in))) + ); + } + function kT() { + _e.parseIdentifier.call(void 0), + H.expect.call(void 0, k.TokenType._in), + rt(); + } + function vT() { + H.expect.call(void 0, k.TokenType.braceL), + v.match.call(void 0, k.TokenType.plus) || + v.match.call(void 0, k.TokenType.minus) + ? (v.next.call(void 0), + H.expectContextual.call(void 0, oe.ContextualKeyword._readonly)) + : H.eatContextual.call(void 0, oe.ContextualKeyword._readonly), + H.expect.call(void 0, k.TokenType.bracketL), + kT(), + H.eatContextual.call(void 0, oe.ContextualKeyword._as) && rt(), + H.expect.call(void 0, k.TokenType.bracketR), + v.match.call(void 0, k.TokenType.plus) || + v.match.call(void 0, k.TokenType.minus) + ? (v.next.call(void 0), H.expect.call(void 0, k.TokenType.question)) + : v.eat.call(void 0, k.TokenType.question), + LT(), + H.semicolon.call(void 0), + H.expect.call(void 0, k.TokenType.braceR); + } + function xT() { + for ( + H.expect.call(void 0, k.TokenType.bracketL); + !v.eat.call(void 0, k.TokenType.bracketR) && !I.state.error; + + ) + gT(), v.eat.call(void 0, k.TokenType.comma); + } + function gT() { + v.eat.call(void 0, k.TokenType.ellipsis) + ? rt() + : (rt(), v.eat.call(void 0, k.TokenType.question)), + v.eat.call(void 0, k.TokenType.colon) && rt(); + } + function _T() { + H.expect.call(void 0, k.TokenType.parenL), + rt(), + H.expect.call(void 0, k.TokenType.parenR); + } + function bT() { + for ( + v.nextTemplateToken.call(void 0), v.nextTemplateToken.call(void 0); + !v.match.call(void 0, k.TokenType.backQuote) && !I.state.error; + + ) + H.expect.call(void 0, k.TokenType.dollarBraceL), + rt(), + v.nextTemplateToken.call(void 0), + v.nextTemplateToken.call(void 0); + v.next.call(void 0); + } + var hs; + (function (e) { + e[(e.TSFunctionType = 0)] = 'TSFunctionType'; + let s = 1; + e[(e.TSConstructorType = s)] = 'TSConstructorType'; + let i = s + 1; + e[(e.TSAbstractConstructorType = i)] = 'TSAbstractConstructorType'; + })(hs || (hs = {})); + function cl(e) { + e === hs.TSAbstractConstructorType && + H.expectContextual.call(void 0, oe.ContextualKeyword._abstract), + (e === hs.TSConstructorType || e === hs.TSAbstractConstructorType) && + H.expect.call(void 0, k.TokenType._new); + let t = I.state.inDisallowConditionalTypesContext; + (I.state.inDisallowConditionalTypesContext = !1), + ml(k.TokenType.arrow), + (I.state.inDisallowConditionalTypesContext = t); + } + function CT() { + switch (I.state.type) { + case k.TokenType.name: + aT(); + return; + case k.TokenType._void: + case k.TokenType._null: + v.next.call(void 0); + return; + case k.TokenType.string: + case k.TokenType.num: + case k.TokenType.bigint: + case k.TokenType.decimal: + case k.TokenType._true: + case k.TokenType._false: + _e.parseLiteral.call(void 0); + return; + case k.TokenType.minus: + v.next.call(void 0), _e.parseLiteral.call(void 0); + return; + case k.TokenType._this: { + cT(), + H.isContextual.call(void 0, oe.ContextualKeyword._is) && + !H.hasPrecedingLineBreak.call(void 0) && + lT(); + return; + } + case k.TokenType._typeof: + uT(); + return; + case k.TokenType._import: + Cp(); + return; + case k.TokenType.braceL: + yT() ? vT() : mT(); + return; + case k.TokenType.bracketL: + xT(); + return; + case k.TokenType.parenL: + _T(); + return; + case k.TokenType.backQuote: + bT(); + return; + default: + if (I.state.type & k.TokenType.IS_KEYWORD) { + v.next.call(void 0), + (I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType.name); + return; + } + break; + } + H.unexpected.call(void 0); + } + function wT() { + for ( + CT(); + !H.hasPrecedingLineBreak.call(void 0) && + v.eat.call(void 0, k.TokenType.bracketL); + + ) + v.eat.call(void 0, k.TokenType.bracketR) || + (rt(), H.expect.call(void 0, k.TokenType.bracketR)); + } + function ST() { + if ( + (H.expectContextual.call(void 0, oe.ContextualKeyword._infer), + _e.parseIdentifier.call(void 0), + v.match.call(void 0, k.TokenType._extends)) + ) { + let e = I.state.snapshot(); + H.expect.call(void 0, k.TokenType._extends); + let t = I.state.inDisallowConditionalTypesContext; + (I.state.inDisallowConditionalTypesContext = !0), + rt(), + (I.state.inDisallowConditionalTypesContext = t), + (I.state.error || + (!I.state.inDisallowConditionalTypesContext && + v.match.call(void 0, k.TokenType.question))) && + I.state.restoreFromSnapshot(e); + } + } + function pl() { + if ( + H.isContextual.call(void 0, oe.ContextualKeyword._keyof) || + H.isContextual.call(void 0, oe.ContextualKeyword._unique) || + H.isContextual.call(void 0, oe.ContextualKeyword._readonly) + ) + v.next.call(void 0), pl(); + else if (H.isContextual.call(void 0, oe.ContextualKeyword._infer)) ST(); + else { + let e = I.state.inDisallowConditionalTypesContext; + (I.state.inDisallowConditionalTypesContext = !1), + wT(), + (I.state.inDisallowConditionalTypesContext = e); + } + } + function xp() { + if ( + (v.eat.call(void 0, k.TokenType.bitwiseAND), + pl(), + v.match.call(void 0, k.TokenType.bitwiseAND)) + ) + for (; v.eat.call(void 0, k.TokenType.bitwiseAND); ) pl(); + } + function IT() { + if ( + (v.eat.call(void 0, k.TokenType.bitwiseOR), + xp(), + v.match.call(void 0, k.TokenType.bitwiseOR)) + ) + for (; v.eat.call(void 0, k.TokenType.bitwiseOR); ) xp(); + } + function ET() { + return v.match.call(void 0, k.TokenType.lessThan) + ? !0 + : v.match.call(void 0, k.TokenType.parenL) && PT(); + } + function AT() { + if ( + v.match.call(void 0, k.TokenType.name) || + v.match.call(void 0, k.TokenType._this) + ) + return v.next.call(void 0), !0; + if ( + v.match.call(void 0, k.TokenType.braceL) || + v.match.call(void 0, k.TokenType.bracketL) + ) { + let e = 1; + for (v.next.call(void 0); e > 0 && !I.state.error; ) + v.match.call(void 0, k.TokenType.braceL) || + v.match.call(void 0, k.TokenType.bracketL) + ? e++ + : (v.match.call(void 0, k.TokenType.braceR) || + v.match.call(void 0, k.TokenType.bracketR)) && + e--, + v.next.call(void 0); + return !0; + } + return !1; + } + function PT() { + let e = I.state.snapshot(), + t = NT(); + return I.state.restoreFromSnapshot(e), t; + } + function NT() { + return ( + v.next.call(void 0), + !!( + v.match.call(void 0, k.TokenType.parenR) || + v.match.call(void 0, k.TokenType.ellipsis) || + (AT() && + (v.match.call(void 0, k.TokenType.colon) || + v.match.call(void 0, k.TokenType.comma) || + v.match.call(void 0, k.TokenType.question) || + v.match.call(void 0, k.TokenType.eq) || + (v.match.call(void 0, k.TokenType.parenR) && + (v.next.call(void 0), + v.match.call(void 0, k.TokenType.arrow))))) + ) + ); + } + function Qi(e) { + let t = v.pushTypeContext.call(void 0, 0); + H.expect.call(void 0, e), OT() || rt(), v.popTypeContext.call(void 0, t); + } + function RT() { + v.match.call(void 0, k.TokenType.colon) && Qi(k.TokenType.colon); + } + function er() { + v.match.call(void 0, k.TokenType.colon) && tr(); + } + Oe.tsTryParseTypeAnnotation = er; + function LT() { + v.eat.call(void 0, k.TokenType.colon) && rt(); + } + function OT() { + let e = I.state.snapshot(); + return H.isContextual.call(void 0, oe.ContextualKeyword._asserts) + ? (v.next.call(void 0), + H.eatContextual.call(void 0, oe.ContextualKeyword._is) + ? (rt(), !0) + : ul() || v.match.call(void 0, k.TokenType._this) + ? (v.next.call(void 0), + H.eatContextual.call(void 0, oe.ContextualKeyword._is) && rt(), + !0) + : (I.state.restoreFromSnapshot(e), !1)) + : ul() || v.match.call(void 0, k.TokenType._this) + ? (v.next.call(void 0), + H.isContextual.call(void 0, oe.ContextualKeyword._is) && + !H.hasPrecedingLineBreak.call(void 0) + ? (v.next.call(void 0), rt(), !0) + : (I.state.restoreFromSnapshot(e), !1)) + : !1; + } + function tr() { + let e = v.pushTypeContext.call(void 0, 0); + H.expect.call(void 0, k.TokenType.colon), + rt(), + v.popTypeContext.call(void 0, e); + } + Oe.tsParseTypeAnnotation = tr; + function rt() { + if ( + (hl(), + I.state.inDisallowConditionalTypesContext || + H.hasPrecedingLineBreak.call(void 0) || + !v.eat.call(void 0, k.TokenType._extends)) + ) + return; + let e = I.state.inDisallowConditionalTypesContext; + (I.state.inDisallowConditionalTypesContext = !0), + hl(), + (I.state.inDisallowConditionalTypesContext = e), + H.expect.call(void 0, k.TokenType.question), + rt(), + H.expect.call(void 0, k.TokenType.colon), + rt(); + } + Oe.tsParseType = rt; + function DT() { + return ( + H.isContextual.call(void 0, oe.ContextualKeyword._abstract) && + v.lookaheadType.call(void 0) === k.TokenType._new + ); + } + function hl() { + if (ET()) { + cl(hs.TSFunctionType); + return; + } + if (v.match.call(void 0, k.TokenType._new)) { + cl(hs.TSConstructorType); + return; + } else if (DT()) { + cl(hs.TSAbstractConstructorType); + return; + } + IT(); + } + Oe.tsParseNonConditionalType = hl; + function MT() { + let e = v.pushTypeContext.call(void 0, 1); + rt(), + H.expect.call(void 0, k.TokenType.greaterThan), + v.popTypeContext.call(void 0, e), + _e.parseMaybeUnary.call(void 0); + } + Oe.tsParseTypeAssertion = MT; + function FT() { + if (v.eat.call(void 0, k.TokenType.jsxTagStart)) { + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType.typeParameterStart; + let e = v.pushTypeContext.call(void 0, 1); + for ( + ; + !v.match.call(void 0, k.TokenType.greaterThan) && !I.state.error; + + ) + rt(), v.eat.call(void 0, k.TokenType.comma); + rT.nextJSXTagToken.call(void 0), v.popTypeContext.call(void 0, e); + } + } + Oe.tsTryParseJSXTypeArgument = FT; + function Ip() { + for (; !v.match.call(void 0, k.TokenType.braceL) && !I.state.error; ) + BT(), v.eat.call(void 0, k.TokenType.comma); + } + function BT() { + Zi(), v.match.call(void 0, k.TokenType.lessThan) && yi(); + } + function VT() { + di.parseBindingIdentifier.call(void 0, !1), + mi(), + v.eat.call(void 0, k.TokenType._extends) && Ip(), + Sp(); + } + function jT() { + di.parseBindingIdentifier.call(void 0, !1), + mi(), + H.expect.call(void 0, k.TokenType.eq), + rt(), + H.semicolon.call(void 0); + } + function $T() { + if ( + (v.match.call(void 0, k.TokenType.string) + ? _e.parseLiteral.call(void 0) + : _e.parseIdentifier.call(void 0), + v.eat.call(void 0, k.TokenType.eq)) + ) { + let e = I.state.tokens.length - 1; + _e.parseMaybeAssign.call(void 0), + (I.state.tokens[e].rhsEndIndex = I.state.tokens.length); + } + } + function yl() { + for ( + di.parseBindingIdentifier.call(void 0, !1), + H.expect.call(void 0, k.TokenType.braceL); + !v.eat.call(void 0, k.TokenType.braceR) && !I.state.error; + + ) + $T(), v.eat.call(void 0, k.TokenType.comma); + } + function Tl() { + H.expect.call(void 0, k.TokenType.braceL), + Rn.parseBlockBody.call(void 0, k.TokenType.braceR); + } + function fl() { + di.parseBindingIdentifier.call(void 0, !1), + v.eat.call(void 0, k.TokenType.dot) ? fl() : Tl(); + } + function Ep() { + H.isContextual.call(void 0, oe.ContextualKeyword._global) + ? _e.parseIdentifier.call(void 0) + : v.match.call(void 0, k.TokenType.string) + ? _e.parseExprAtom.call(void 0) + : H.unexpected.call(void 0), + v.match.call(void 0, k.TokenType.braceL) + ? Tl() + : H.semicolon.call(void 0); + } + function Ap() { + di.parseImportedIdentifier.call(void 0), + H.expect.call(void 0, k.TokenType.eq), + KT(), + H.semicolon.call(void 0); + } + Oe.tsParseImportEqualsDeclaration = Ap; + function qT() { + return ( + H.isContextual.call(void 0, oe.ContextualKeyword._require) && + v.lookaheadType.call(void 0) === k.TokenType.parenL + ); + } + function KT() { + qT() ? UT() : Zi(); + } + function UT() { + H.expectContextual.call(void 0, oe.ContextualKeyword._require), + H.expect.call(void 0, k.TokenType.parenL), + v.match.call(void 0, k.TokenType.string) || H.unexpected.call(void 0), + _e.parseLiteral.call(void 0), + H.expect.call(void 0, k.TokenType.parenR); + } + function HT() { + if (H.isLineTerminator.call(void 0)) return !1; + switch (I.state.type) { + case k.TokenType._function: { + let e = v.pushTypeContext.call(void 0, 1); + v.next.call(void 0); + let t = I.state.start; + return ( + Rn.parseFunction.call(void 0, t, !0), + v.popTypeContext.call(void 0, e), + !0 + ); + } + case k.TokenType._class: { + let e = v.pushTypeContext.call(void 0, 1); + return ( + Rn.parseClass.call(void 0, !0, !1), + v.popTypeContext.call(void 0, e), + !0 + ); + } + case k.TokenType._const: + if ( + v.match.call(void 0, k.TokenType._const) && + H.isLookaheadContextual.call(void 0, oe.ContextualKeyword._enum) + ) { + let e = v.pushTypeContext.call(void 0, 1); + return ( + H.expect.call(void 0, k.TokenType._const), + H.expectContextual.call(void 0, oe.ContextualKeyword._enum), + (I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._enum), + yl(), + v.popTypeContext.call(void 0, e), + !0 + ); + } + case k.TokenType._var: + case k.TokenType._let: { + let e = v.pushTypeContext.call(void 0, 1); + return ( + Rn.parseVarStatement.call( + void 0, + I.state.type !== k.TokenType._var + ), + v.popTypeContext.call(void 0, e), + !0 + ); + } + case k.TokenType.name: { + let e = v.pushTypeContext.call(void 0, 1), + t = I.state.contextualKeyword, + s = !1; + return ( + t === oe.ContextualKeyword._global + ? (Ep(), (s = !0)) + : (s = po(t, !0)), + v.popTypeContext.call(void 0, e), + s + ); + } + default: + return !1; + } + } + function gp() { + return po(I.state.contextualKeyword, !0); + } + function WT(e) { + switch (e) { + case oe.ContextualKeyword._declare: { + let t = I.state.tokens.length - 1; + if (HT()) return (I.state.tokens[t].type = k.TokenType._declare), !0; + break; + } + case oe.ContextualKeyword._global: + if (v.match.call(void 0, k.TokenType.braceL)) return Tl(), !0; + break; + default: + return po(e, !1); + } + return !1; + } + function po(e, t) { + switch (e) { + case oe.ContextualKeyword._abstract: + if (fi(t) && v.match.call(void 0, k.TokenType._class)) + return ( + (I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._abstract), + Rn.parseClass.call(void 0, !0, !1), + !0 + ); + break; + case oe.ContextualKeyword._enum: + if (fi(t) && v.match.call(void 0, k.TokenType.name)) + return ( + (I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._enum), + yl(), + !0 + ); + break; + case oe.ContextualKeyword._interface: + if (fi(t) && v.match.call(void 0, k.TokenType.name)) { + let s = v.pushTypeContext.call(void 0, t ? 2 : 1); + return VT(), v.popTypeContext.call(void 0, s), !0; + } + break; + case oe.ContextualKeyword._module: + if (fi(t)) { + if (v.match.call(void 0, k.TokenType.string)) { + let s = v.pushTypeContext.call(void 0, t ? 2 : 1); + return Ep(), v.popTypeContext.call(void 0, s), !0; + } else if (v.match.call(void 0, k.TokenType.name)) { + let s = v.pushTypeContext.call(void 0, t ? 2 : 1); + return fl(), v.popTypeContext.call(void 0, s), !0; + } + } + break; + case oe.ContextualKeyword._namespace: + if (fi(t) && v.match.call(void 0, k.TokenType.name)) { + let s = v.pushTypeContext.call(void 0, t ? 2 : 1); + return fl(), v.popTypeContext.call(void 0, s), !0; + } + break; + case oe.ContextualKeyword._type: + if (fi(t) && v.match.call(void 0, k.TokenType.name)) { + let s = v.pushTypeContext.call(void 0, t ? 2 : 1); + return jT(), v.popTypeContext.call(void 0, s), !0; + } + break; + default: + break; + } + return !1; + } + function fi(e) { + return e ? (v.next.call(void 0), !0) : !H.isLineTerminator.call(void 0); + } + function GT() { + let e = I.state.snapshot(); + return ( + uo(), + Rn.parseFunctionParams.call(void 0), + RT(), + H.expect.call(void 0, k.TokenType.arrow), + I.state.error + ? (I.state.restoreFromSnapshot(e), !1) + : (_e.parseFunctionBody.call(void 0, !0), !0) + ); + } + function kl() { + I.state.type === k.TokenType.bitShiftL && + ((I.state.pos -= 1), v.finishToken.call(void 0, k.TokenType.lessThan)), + yi(); + } + function yi() { + let e = v.pushTypeContext.call(void 0, 0); + for ( + H.expect.call(void 0, k.TokenType.lessThan); + !v.eat.call(void 0, k.TokenType.greaterThan) && !I.state.error; + + ) + rt(), v.eat.call(void 0, k.TokenType.comma); + v.popTypeContext.call(void 0, e); + } + function zT() { + if (v.match.call(void 0, k.TokenType.name)) + switch (I.state.contextualKeyword) { + case oe.ContextualKeyword._abstract: + case oe.ContextualKeyword._declare: + case oe.ContextualKeyword._enum: + case oe.ContextualKeyword._interface: + case oe.ContextualKeyword._module: + case oe.ContextualKeyword._namespace: + case oe.ContextualKeyword._type: + return !0; + default: + break; + } + return !1; + } + Oe.tsIsDeclarationStart = zT; + function XT(e, t) { + if ( + (v.match.call(void 0, k.TokenType.colon) && Qi(k.TokenType.colon), + !v.match.call(void 0, k.TokenType.braceL) && + H.isLineTerminator.call(void 0)) + ) { + let s = I.state.tokens.length - 1; + for ( + ; + s >= 0 && + (I.state.tokens[s].start >= e || + I.state.tokens[s].type === k.TokenType._default || + I.state.tokens[s].type === k.TokenType._export); + + ) + (I.state.tokens[s].isType = !0), s--; + return; + } + _e.parseFunctionBody.call(void 0, !1, t); + } + Oe.tsParseFunctionBodyAndFinish = XT; + function YT(e, t, s) { + if ( + !H.hasPrecedingLineBreak.call(void 0) && + v.eat.call(void 0, k.TokenType.bang) + ) { + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType.nonNullAssertion; + return; + } + if ( + v.match.call(void 0, k.TokenType.lessThan) || + v.match.call(void 0, k.TokenType.bitShiftL) + ) { + let i = I.state.snapshot(); + if (!t && _e.atPossibleAsync.call(void 0) && GT()) return; + if ( + (kl(), + !t && v.eat.call(void 0, k.TokenType.parenL) + ? ((I.state.tokens[I.state.tokens.length - 1].subscriptStartIndex = + e), + _e.parseCallExpressionArguments.call(void 0)) + : v.match.call(void 0, k.TokenType.backQuote) + ? _e.parseTemplate.call(void 0) + : (I.state.type === k.TokenType.greaterThan || + (I.state.type !== k.TokenType.parenL && + I.state.type & k.TokenType.IS_EXPRESSION_START && + !H.hasPrecedingLineBreak.call(void 0))) && + H.unexpected.call(void 0), + I.state.error) + ) + I.state.restoreFromSnapshot(i); + else return; + } else + !t && + v.match.call(void 0, k.TokenType.questionDot) && + v.lookaheadType.call(void 0) === k.TokenType.lessThan && + (v.next.call(void 0), + (I.state.tokens[e].isOptionalChainStart = !0), + (I.state.tokens[I.state.tokens.length - 1].subscriptStartIndex = e), + yi(), + H.expect.call(void 0, k.TokenType.parenL), + _e.parseCallExpressionArguments.call(void 0)); + _e.baseParseSubscript.call(void 0, e, t, s); + } + Oe.tsParseSubscript = YT; + function JT() { + if (v.eat.call(void 0, k.TokenType._import)) + return ( + H.isContextual.call(void 0, oe.ContextualKeyword._type) && + v.lookaheadType.call(void 0) !== k.TokenType.eq && + H.expectContextual.call(void 0, oe.ContextualKeyword._type), + Ap(), + !0 + ); + if (v.eat.call(void 0, k.TokenType.eq)) + return _e.parseExpression.call(void 0), H.semicolon.call(void 0), !0; + if (H.eatContextual.call(void 0, oe.ContextualKeyword._as)) + return ( + H.expectContextual.call(void 0, oe.ContextualKeyword._namespace), + _e.parseIdentifier.call(void 0), + H.semicolon.call(void 0), + !0 + ); + if (H.isContextual.call(void 0, oe.ContextualKeyword._type)) { + let e = v.lookaheadType.call(void 0); + (e === k.TokenType.braceL || e === k.TokenType.star) && + v.next.call(void 0); + } + return !1; + } + Oe.tsTryParseExport = JT; + function QT() { + if ( + (_e.parseIdentifier.call(void 0), + v.match.call(void 0, k.TokenType.comma) || + v.match.call(void 0, k.TokenType.braceR)) + ) { + I.state.tokens[I.state.tokens.length - 1].identifierRole = + v.IdentifierRole.ImportDeclaration; + return; + } + if ( + (_e.parseIdentifier.call(void 0), + v.match.call(void 0, k.TokenType.comma) || + v.match.call(void 0, k.TokenType.braceR)) + ) { + (I.state.tokens[I.state.tokens.length - 1].identifierRole = + v.IdentifierRole.ImportDeclaration), + (I.state.tokens[I.state.tokens.length - 2].isType = !0), + (I.state.tokens[I.state.tokens.length - 1].isType = !0); + return; + } + if ( + (_e.parseIdentifier.call(void 0), + v.match.call(void 0, k.TokenType.comma) || + v.match.call(void 0, k.TokenType.braceR)) + ) { + (I.state.tokens[I.state.tokens.length - 3].identifierRole = + v.IdentifierRole.ImportAccess), + (I.state.tokens[I.state.tokens.length - 1].identifierRole = + v.IdentifierRole.ImportDeclaration); + return; + } + _e.parseIdentifier.call(void 0), + (I.state.tokens[I.state.tokens.length - 3].identifierRole = + v.IdentifierRole.ImportAccess), + (I.state.tokens[I.state.tokens.length - 1].identifierRole = + v.IdentifierRole.ImportDeclaration), + (I.state.tokens[I.state.tokens.length - 4].isType = !0), + (I.state.tokens[I.state.tokens.length - 3].isType = !0), + (I.state.tokens[I.state.tokens.length - 2].isType = !0), + (I.state.tokens[I.state.tokens.length - 1].isType = !0); + } + Oe.tsParseImportSpecifier = QT; + function ZT() { + if ( + (_e.parseIdentifier.call(void 0), + v.match.call(void 0, k.TokenType.comma) || + v.match.call(void 0, k.TokenType.braceR)) + ) { + I.state.tokens[I.state.tokens.length - 1].identifierRole = + v.IdentifierRole.ExportAccess; + return; + } + if ( + (_e.parseIdentifier.call(void 0), + v.match.call(void 0, k.TokenType.comma) || + v.match.call(void 0, k.TokenType.braceR)) + ) { + (I.state.tokens[I.state.tokens.length - 1].identifierRole = + v.IdentifierRole.ExportAccess), + (I.state.tokens[I.state.tokens.length - 2].isType = !0), + (I.state.tokens[I.state.tokens.length - 1].isType = !0); + return; + } + if ( + (_e.parseIdentifier.call(void 0), + v.match.call(void 0, k.TokenType.comma) || + v.match.call(void 0, k.TokenType.braceR)) + ) { + I.state.tokens[I.state.tokens.length - 3].identifierRole = + v.IdentifierRole.ExportAccess; + return; + } + _e.parseIdentifier.call(void 0), + (I.state.tokens[I.state.tokens.length - 3].identifierRole = + v.IdentifierRole.ExportAccess), + (I.state.tokens[I.state.tokens.length - 4].isType = !0), + (I.state.tokens[I.state.tokens.length - 3].isType = !0), + (I.state.tokens[I.state.tokens.length - 2].isType = !0), + (I.state.tokens[I.state.tokens.length - 1].isType = !0); + } + Oe.tsParseExportSpecifier = ZT; + function ek() { + if ( + H.isContextual.call(void 0, oe.ContextualKeyword._abstract) && + v.lookaheadType.call(void 0) === k.TokenType._class + ) + return ( + (I.state.type = k.TokenType._abstract), + v.next.call(void 0), + Rn.parseClass.call(void 0, !0, !0), + !0 + ); + if (H.isContextual.call(void 0, oe.ContextualKeyword._interface)) { + let e = v.pushTypeContext.call(void 0, 2); + return ( + po(oe.ContextualKeyword._interface, !0), + v.popTypeContext.call(void 0, e), + !0 + ); + } + return !1; + } + Oe.tsTryParseExportDefaultExpression = ek; + function tk() { + if (I.state.type === k.TokenType._const) { + let e = v.lookaheadTypeAndKeyword.call(void 0); + if ( + e.type === k.TokenType.name && + e.contextualKeyword === oe.ContextualKeyword._enum + ) + return ( + H.expect.call(void 0, k.TokenType._const), + H.expectContextual.call(void 0, oe.ContextualKeyword._enum), + (I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._enum), + yl(), + !0 + ); + } + return !1; + } + Oe.tsTryParseStatementContent = tk; + function nk(e) { + let t = I.state.tokens.length; + bp([ + oe.ContextualKeyword._abstract, + oe.ContextualKeyword._readonly, + oe.ContextualKeyword._declare, + oe.ContextualKeyword._static, + oe.ContextualKeyword._override, + ]); + let s = I.state.tokens.length; + if (wp()) { + let r = e ? t - 1 : t; + for (let a = r; a < s; a++) I.state.tokens[a].isType = !0; + return !0; + } + return !1; + } + Oe.tsTryParseClassMemberWithIsStatic = nk; + function sk(e) { + WT(e) || H.semicolon.call(void 0); + } + Oe.tsParseIdentifierStatement = sk; + function ik() { + let e = H.eatContextual.call(void 0, oe.ContextualKeyword._declare); + e && + (I.state.tokens[I.state.tokens.length - 1].type = k.TokenType._declare); + let t = !1; + if (v.match.call(void 0, k.TokenType.name)) + if (e) { + let s = v.pushTypeContext.call(void 0, 2); + (t = gp()), v.popTypeContext.call(void 0, s); + } else t = gp(); + if (!t) + if (e) { + let s = v.pushTypeContext.call(void 0, 2); + Rn.parseStatement.call(void 0, !0), v.popTypeContext.call(void 0, s); + } else Rn.parseStatement.call(void 0, !0); + } + Oe.tsParseExportDeclaration = ik; + function rk(e) { + if ( + (e && + (v.match.call(void 0, k.TokenType.lessThan) || + v.match.call(void 0, k.TokenType.bitShiftL)) && + kl(), + H.eatContextual.call(void 0, oe.ContextualKeyword._implements)) + ) { + I.state.tokens[I.state.tokens.length - 1].type = + k.TokenType._implements; + let t = v.pushTypeContext.call(void 0, 1); + Ip(), v.popTypeContext.call(void 0, t); + } + } + Oe.tsAfterParseClassSuper = rk; + function ok() { + mi(); + } + Oe.tsStartParseObjPropValue = ok; + function ak() { + mi(); + } + Oe.tsStartParseFunctionParams = ak; + function lk() { + let e = v.pushTypeContext.call(void 0, 0); + H.hasPrecedingLineBreak.call(void 0) || + v.eat.call(void 0, k.TokenType.bang), + er(), + v.popTypeContext.call(void 0, e); + } + Oe.tsAfterParseVarHead = lk; + function ck() { + v.match.call(void 0, k.TokenType.colon) && tr(); + } + Oe.tsStartParseAsyncArrowFromCallExpression = ck; + function uk(e, t) { + return I.isJSXEnabled ? Pp(e, t) : Np(e, t); + } + Oe.tsParseMaybeAssign = uk; + function Pp(e, t) { + if (!v.match.call(void 0, k.TokenType.lessThan)) + return _e.baseParseMaybeAssign.call(void 0, e, t); + let s = I.state.snapshot(), + i = _e.baseParseMaybeAssign.call(void 0, e, t); + if (I.state.error) I.state.restoreFromSnapshot(s); + else return i; + return ( + (I.state.type = k.TokenType.typeParameterStart), + uo(), + (i = _e.baseParseMaybeAssign.call(void 0, e, t)), + i || H.unexpected.call(void 0), + i + ); + } + Oe.tsParseMaybeAssignWithJSX = Pp; + function Np(e, t) { + if (!v.match.call(void 0, k.TokenType.lessThan)) + return _e.baseParseMaybeAssign.call(void 0, e, t); + let s = I.state.snapshot(); + uo(); + let i = _e.baseParseMaybeAssign.call(void 0, e, t); + if ((i || H.unexpected.call(void 0), I.state.error)) + I.state.restoreFromSnapshot(s); + else return i; + return _e.baseParseMaybeAssign.call(void 0, e, t); + } + Oe.tsParseMaybeAssignWithoutJSX = Np; + function pk() { + if (v.match.call(void 0, k.TokenType.colon)) { + let e = I.state.snapshot(); + Qi(k.TokenType.colon), + H.canInsertSemicolon.call(void 0) && H.unexpected.call(void 0), + v.match.call(void 0, k.TokenType.arrow) || H.unexpected.call(void 0), + I.state.error && I.state.restoreFromSnapshot(e); + } + return v.eat.call(void 0, k.TokenType.arrow); + } + Oe.tsParseArrow = pk; + function hk() { + let e = v.pushTypeContext.call(void 0, 0); + v.eat.call(void 0, k.TokenType.question), + er(), + v.popTypeContext.call(void 0, e); + } + Oe.tsParseAssignableListItemTypes = hk; + function fk() { + (v.match.call(void 0, k.TokenType.lessThan) || + v.match.call(void 0, k.TokenType.bitShiftL)) && + kl(), + Rn.baseParseMaybeDecoratorArguments.call(void 0); + } + Oe.tsParseMaybeDecoratorArguments = fk; + }); + var vl = Z((fo) => { + 'use strict'; + Object.defineProperty(fo, '__esModule', {value: !0}); + var Se = xt(), + Me = be(), + fe = Zt(), + ho = Ns(), + fs = cs(), + at = Qt(), + Rp = li(), + dk = hi(); + function mk() { + let e = !1, + t = !1; + for (;;) { + if (fe.state.pos >= fe.input.length) { + fs.unexpected.call(void 0, 'Unterminated JSX contents'); + return; + } + let s = fe.input.charCodeAt(fe.state.pos); + if (s === at.charCodes.lessThan || s === at.charCodes.leftCurlyBrace) { + if (fe.state.pos === fe.state.start) { + if (s === at.charCodes.lessThan) { + fe.state.pos++, + Se.finishToken.call(void 0, Me.TokenType.jsxTagStart); + return; + } + Se.getTokenFromCode.call(void 0, s); + return; + } + e && !t + ? Se.finishToken.call(void 0, Me.TokenType.jsxEmptyText) + : Se.finishToken.call(void 0, Me.TokenType.jsxText); + return; + } + s === at.charCodes.lineFeed + ? (e = !0) + : s !== at.charCodes.space && + s !== at.charCodes.carriageReturn && + s !== at.charCodes.tab && + (t = !0), + fe.state.pos++; + } + } + function yk(e) { + for (fe.state.pos++; ; ) { + if (fe.state.pos >= fe.input.length) { + fs.unexpected.call(void 0, 'Unterminated string constant'); + return; + } + if (fe.input.charCodeAt(fe.state.pos) === e) { + fe.state.pos++; + break; + } + fe.state.pos++; + } + Se.finishToken.call(void 0, Me.TokenType.string); + } + function Tk() { + let e; + do { + if (fe.state.pos > fe.input.length) { + fs.unexpected.call(void 0, 'Unexpectedly reached the end of input.'); + return; + } + e = fe.input.charCodeAt(++fe.state.pos); + } while (Rp.IS_IDENTIFIER_CHAR[e] || e === at.charCodes.dash); + Se.finishToken.call(void 0, Me.TokenType.jsxName); + } + function xl() { + dn(); + } + function Lp(e) { + if ((xl(), !Se.eat.call(void 0, Me.TokenType.colon))) { + fe.state.tokens[fe.state.tokens.length - 1].identifierRole = e; + return; + } + xl(); + } + function Op() { + let e = fe.state.tokens.length; + Lp(Se.IdentifierRole.Access); + let t = !1; + for (; Se.match.call(void 0, Me.TokenType.dot); ) (t = !0), dn(), xl(); + if (!t) { + let s = fe.state.tokens[e], + i = fe.input.charCodeAt(s.start); + i >= at.charCodes.lowercaseA && + i <= at.charCodes.lowercaseZ && + (s.identifierRole = null); + } + } + function kk() { + switch (fe.state.type) { + case Me.TokenType.braceL: + Se.next.call(void 0), ho.parseExpression.call(void 0), dn(); + return; + case Me.TokenType.jsxTagStart: + Mp(), dn(); + return; + case Me.TokenType.string: + dn(); + return; + default: + fs.unexpected.call( + void 0, + 'JSX value should be either an expression or a quoted JSX text' + ); + } + } + function vk() { + fs.expect.call(void 0, Me.TokenType.ellipsis), + ho.parseExpression.call(void 0); + } + function xk(e) { + if (Se.match.call(void 0, Me.TokenType.jsxTagEnd)) return !1; + Op(), fe.isTypeScriptEnabled && dk.tsTryParseJSXTypeArgument.call(void 0); + let t = !1; + for ( + ; + !Se.match.call(void 0, Me.TokenType.slash) && + !Se.match.call(void 0, Me.TokenType.jsxTagEnd) && + !fe.state.error; + + ) { + if (Se.eat.call(void 0, Me.TokenType.braceL)) { + (t = !0), + fs.expect.call(void 0, Me.TokenType.ellipsis), + ho.parseMaybeAssign.call(void 0), + dn(); + continue; + } + t && + fe.state.end - fe.state.start === 3 && + fe.input.charCodeAt(fe.state.start) === at.charCodes.lowercaseK && + fe.input.charCodeAt(fe.state.start + 1) === at.charCodes.lowercaseE && + fe.input.charCodeAt(fe.state.start + 2) === at.charCodes.lowercaseY && + (fe.state.tokens[e].jsxRole = Se.JSXRole.KeyAfterPropSpread), + Lp(Se.IdentifierRole.ObjectKey), + Se.match.call(void 0, Me.TokenType.eq) && (dn(), kk()); + } + let s = Se.match.call(void 0, Me.TokenType.slash); + return s && dn(), s; + } + function gk() { + Se.match.call(void 0, Me.TokenType.jsxTagEnd) || Op(); + } + function Dp() { + let e = fe.state.tokens.length - 1; + fe.state.tokens[e].jsxRole = Se.JSXRole.NoChildren; + let t = 0; + if (!xk(e)) + for (Ti(); ; ) + switch (fe.state.type) { + case Me.TokenType.jsxTagStart: + if ((dn(), Se.match.call(void 0, Me.TokenType.slash))) { + dn(), + gk(), + fe.state.tokens[e].jsxRole !== + Se.JSXRole.KeyAfterPropSpread && + (t === 1 + ? (fe.state.tokens[e].jsxRole = Se.JSXRole.OneChild) + : t > 1 && + (fe.state.tokens[e].jsxRole = + Se.JSXRole.StaticChildren)); + return; + } + t++, Dp(), Ti(); + break; + case Me.TokenType.jsxText: + t++, Ti(); + break; + case Me.TokenType.jsxEmptyText: + Ti(); + break; + case Me.TokenType.braceL: + Se.next.call(void 0), + Se.match.call(void 0, Me.TokenType.ellipsis) + ? (vk(), Ti(), (t += 2)) + : (Se.match.call(void 0, Me.TokenType.braceR) || + (t++, ho.parseExpression.call(void 0)), + Ti()); + break; + default: + fs.unexpected.call(void 0); + return; + } + } + function Mp() { + dn(), Dp(); + } + fo.jsxParseElement = Mp; + function dn() { + fe.state.tokens.push(new Se.Token()), + Se.skipSpace.call(void 0), + (fe.state.start = fe.state.pos); + let e = fe.input.charCodeAt(fe.state.pos); + if (Rp.IS_IDENTIFIER_START[e]) Tk(); + else if ( + e === at.charCodes.quotationMark || + e === at.charCodes.apostrophe + ) + yk(e); + else + switch ((++fe.state.pos, e)) { + case at.charCodes.greaterThan: + Se.finishToken.call(void 0, Me.TokenType.jsxTagEnd); + break; + case at.charCodes.lessThan: + Se.finishToken.call(void 0, Me.TokenType.jsxTagStart); + break; + case at.charCodes.slash: + Se.finishToken.call(void 0, Me.TokenType.slash); + break; + case at.charCodes.equalsTo: + Se.finishToken.call(void 0, Me.TokenType.eq); + break; + case at.charCodes.leftCurlyBrace: + Se.finishToken.call(void 0, Me.TokenType.braceL); + break; + case at.charCodes.dot: + Se.finishToken.call(void 0, Me.TokenType.dot); + break; + case at.charCodes.colon: + Se.finishToken.call(void 0, Me.TokenType.colon); + break; + default: + fs.unexpected.call(void 0); + } + } + fo.nextJSXTagToken = dn; + function Ti() { + fe.state.tokens.push(new Se.Token()), + (fe.state.start = fe.state.pos), + mk(); + } + }); + var Bp = Z((yo) => { + 'use strict'; + Object.defineProperty(yo, '__esModule', {value: !0}); + var mo = xt(), + ki = be(), + Fp = Zt(), + _k = Ns(), + bk = Ji(), + Ck = hi(); + function wk(e) { + if (mo.match.call(void 0, ki.TokenType.question)) { + let t = mo.lookaheadType.call(void 0); + if ( + t === ki.TokenType.colon || + t === ki.TokenType.comma || + t === ki.TokenType.parenR + ) + return; + } + _k.baseParseConditional.call(void 0, e); + } + yo.typedParseConditional = wk; + function Sk() { + mo.eatTypeToken.call(void 0, ki.TokenType.question), + mo.match.call(void 0, ki.TokenType.colon) && + (Fp.isTypeScriptEnabled + ? Ck.tsParseTypeAnnotation.call(void 0) + : Fp.isFlowEnabled && bk.flowParseTypeAnnotation.call(void 0)); + } + yo.typedParseParenItem = Sk; + }); + var Ns = Z((et) => { + 'use strict'; + Object.defineProperty(et, '__esModule', {value: !0}); + var Yn = Ji(), + Ik = vl(), + Vp = Bp(), + ms = hi(), + K = xt(), + zn = It(), + jp = qr(), + B = be(), + $p = Qt(), + Ek = li(), + j = Zt(), + ds = lo(), + gn = nr(), + Pe = cs(), + vo = class { + constructor(t) { + this.stop = t; + } + }; + et.StopState = vo; + function sr(e = !1) { + if ((mn(e), K.match.call(void 0, B.TokenType.comma))) + for (; K.eat.call(void 0, B.TokenType.comma); ) mn(e); + } + et.parseExpression = sr; + function mn(e = !1, t = !1) { + return j.isTypeScriptEnabled + ? ms.tsParseMaybeAssign.call(void 0, e, t) + : j.isFlowEnabled + ? Yn.flowParseMaybeAssign.call(void 0, e, t) + : qp(e, t); + } + et.parseMaybeAssign = mn; + function qp(e, t) { + if (K.match.call(void 0, B.TokenType._yield)) return Hk(), !1; + (K.match.call(void 0, B.TokenType.parenL) || + K.match.call(void 0, B.TokenType.name) || + K.match.call(void 0, B.TokenType._yield)) && + (j.state.potentialArrowAt = j.state.start); + let s = Ak(e); + return ( + t && wl(), + j.state.type & B.TokenType.IS_ASSIGN + ? (K.next.call(void 0), mn(e), !1) + : s + ); + } + et.baseParseMaybeAssign = qp; + function Ak(e) { + return Nk(e) ? !0 : (Pk(e), !1); + } + function Pk(e) { + j.isTypeScriptEnabled || j.isFlowEnabled + ? Vp.typedParseConditional.call(void 0, e) + : Kp(e); + } + function Kp(e) { + K.eat.call(void 0, B.TokenType.question) && + (mn(), Pe.expect.call(void 0, B.TokenType.colon), mn(e)); + } + et.baseParseConditional = Kp; + function Nk(e) { + let t = j.state.tokens.length; + return rr() ? !0 : (To(t, -1, e), !1); + } + function To(e, t, s) { + if ( + j.isTypeScriptEnabled && + (B.TokenType._in & B.TokenType.PRECEDENCE_MASK) > t && + !Pe.hasPrecedingLineBreak.call(void 0) && + (Pe.eatContextual.call(void 0, zn.ContextualKeyword._as) || + Pe.eatContextual.call(void 0, zn.ContextualKeyword._satisfies)) + ) { + let r = K.pushTypeContext.call(void 0, 1); + ms.tsParseType.call(void 0), + K.popTypeContext.call(void 0, r), + K.rescan_gt.call(void 0), + To(e, t, s); + return; + } + let i = j.state.type & B.TokenType.PRECEDENCE_MASK; + if (i > 0 && (!s || !K.match.call(void 0, B.TokenType._in)) && i > t) { + let r = j.state.type; + K.next.call(void 0), + r === B.TokenType.nullishCoalescing && + (j.state.tokens[j.state.tokens.length - 1].nullishStartIndex = e); + let a = j.state.tokens.length; + rr(), + To(a, r & B.TokenType.IS_RIGHT_ASSOCIATIVE ? i - 1 : i, s), + r === B.TokenType.nullishCoalescing && + (j.state.tokens[e].numNullishCoalesceStarts++, + j.state.tokens[j.state.tokens.length - 1].numNullishCoalesceEnds++), + To(e, t, s); + } + } + function rr() { + if ( + j.isTypeScriptEnabled && + !j.isJSXEnabled && + K.eat.call(void 0, B.TokenType.lessThan) + ) + return ms.tsParseTypeAssertion.call(void 0), !1; + if ( + Pe.isContextual.call(void 0, zn.ContextualKeyword._module) && + K.lookaheadCharCode.call(void 0) === $p.charCodes.leftCurlyBrace && + !Pe.hasFollowingLineBreak.call(void 0) + ) + return Wk(), !1; + if (j.state.type & B.TokenType.IS_PREFIX) + return K.next.call(void 0), rr(), !1; + if (Up()) return !0; + for ( + ; + j.state.type & B.TokenType.IS_POSTFIX && + !Pe.canInsertSemicolon.call(void 0); + + ) + j.state.type === B.TokenType.preIncDec && + (j.state.type = B.TokenType.postIncDec), + K.next.call(void 0); + return !1; + } + et.parseMaybeUnary = rr; + function Up() { + let e = j.state.tokens.length; + return _o() + ? !0 + : (bl(e), + j.state.tokens.length > e && + j.state.tokens[e].isOptionalChainStart && + (j.state.tokens[j.state.tokens.length - 1].isOptionalChainEnd = !0), + !1); + } + et.parseExprSubscripts = Up; + function bl(e, t = !1) { + j.isFlowEnabled ? Yn.flowParseSubscripts.call(void 0, e, t) : Hp(e, t); + } + function Hp(e, t = !1) { + let s = new vo(!1); + do Rk(e, t, s); + while (!s.stop && !j.state.error); + } + et.baseParseSubscripts = Hp; + function Rk(e, t, s) { + j.isTypeScriptEnabled + ? ms.tsParseSubscript.call(void 0, e, t, s) + : j.isFlowEnabled + ? Yn.flowParseSubscript.call(void 0, e, t, s) + : Wp(e, t, s); + } + function Wp(e, t, s) { + if (!t && K.eat.call(void 0, B.TokenType.doubleColon)) + Cl(), (s.stop = !0), bl(e, t); + else if (K.match.call(void 0, B.TokenType.questionDot)) { + if ( + ((j.state.tokens[e].isOptionalChainStart = !0), + t && K.lookaheadType.call(void 0) === B.TokenType.parenL) + ) { + s.stop = !0; + return; + } + K.next.call(void 0), + (j.state.tokens[j.state.tokens.length - 1].subscriptStartIndex = e), + K.eat.call(void 0, B.TokenType.bracketL) + ? (sr(), Pe.expect.call(void 0, B.TokenType.bracketR)) + : K.eat.call(void 0, B.TokenType.parenL) + ? ko() + : xo(); + } else if (K.eat.call(void 0, B.TokenType.dot)) + (j.state.tokens[j.state.tokens.length - 1].subscriptStartIndex = e), + xo(); + else if (K.eat.call(void 0, B.TokenType.bracketL)) + (j.state.tokens[j.state.tokens.length - 1].subscriptStartIndex = e), + sr(), + Pe.expect.call(void 0, B.TokenType.bracketR); + else if (!t && K.match.call(void 0, B.TokenType.parenL)) + if (Gp()) { + let i = j.state.snapshot(), + r = j.state.tokens.length; + K.next.call(void 0), + (j.state.tokens[j.state.tokens.length - 1].subscriptStartIndex = e); + let a = j.getNextContextId.call(void 0); + (j.state.tokens[j.state.tokens.length - 1].contextId = a), + ko(), + (j.state.tokens[j.state.tokens.length - 1].contextId = a), + Lk() && + (j.state.restoreFromSnapshot(i), + (s.stop = !0), + j.state.scopeDepth++, + gn.parseFunctionParams.call(void 0), + Ok(r)); + } else { + K.next.call(void 0), + (j.state.tokens[j.state.tokens.length - 1].subscriptStartIndex = e); + let i = j.getNextContextId.call(void 0); + (j.state.tokens[j.state.tokens.length - 1].contextId = i), + ko(), + (j.state.tokens[j.state.tokens.length - 1].contextId = i); + } + else K.match.call(void 0, B.TokenType.backQuote) ? Sl() : (s.stop = !0); + } + et.baseParseSubscript = Wp; + function Gp() { + return ( + j.state.tokens[j.state.tokens.length - 1].contextualKeyword === + zn.ContextualKeyword._async && !Pe.canInsertSemicolon.call(void 0) + ); + } + et.atPossibleAsync = Gp; + function ko() { + let e = !0; + for (; !K.eat.call(void 0, B.TokenType.parenR) && !j.state.error; ) { + if (e) e = !1; + else if ( + (Pe.expect.call(void 0, B.TokenType.comma), + K.eat.call(void 0, B.TokenType.parenR)) + ) + break; + Zp(!1); + } + } + et.parseCallExpressionArguments = ko; + function Lk() { + return ( + K.match.call(void 0, B.TokenType.colon) || + K.match.call(void 0, B.TokenType.arrow) + ); + } + function Ok(e) { + j.isTypeScriptEnabled + ? ms.tsStartParseAsyncArrowFromCallExpression.call(void 0) + : j.isFlowEnabled && + Yn.flowStartParseAsyncArrowFromCallExpression.call(void 0), + Pe.expect.call(void 0, B.TokenType.arrow), + ir(e); + } + function Cl() { + let e = j.state.tokens.length; + _o(), bl(e, !0); + } + function _o() { + if (K.eat.call(void 0, B.TokenType.modulo)) return Xn(), !1; + if ( + K.match.call(void 0, B.TokenType.jsxText) || + K.match.call(void 0, B.TokenType.jsxEmptyText) + ) + return zp(), !1; + if (K.match.call(void 0, B.TokenType.lessThan) && j.isJSXEnabled) + return ( + (j.state.type = B.TokenType.jsxTagStart), + Ik.jsxParseElement.call(void 0), + K.next.call(void 0), + !1 + ); + let e = j.state.potentialArrowAt === j.state.start; + switch (j.state.type) { + case B.TokenType.slash: + case B.TokenType.assign: + K.retokenizeSlashAsRegex.call(void 0); + case B.TokenType._super: + case B.TokenType._this: + case B.TokenType.regexp: + case B.TokenType.num: + case B.TokenType.bigint: + case B.TokenType.decimal: + case B.TokenType.string: + case B.TokenType._null: + case B.TokenType._true: + case B.TokenType._false: + return K.next.call(void 0), !1; + case B.TokenType._import: + return ( + K.next.call(void 0), + K.match.call(void 0, B.TokenType.dot) && + ((j.state.tokens[j.state.tokens.length - 1].type = + B.TokenType.name), + K.next.call(void 0), + Xn()), + !1 + ); + case B.TokenType.name: { + let t = j.state.tokens.length, + s = j.state.start, + i = j.state.contextualKeyword; + return ( + Xn(), + i === zn.ContextualKeyword._await + ? (Uk(), !1) + : i === zn.ContextualKeyword._async && + K.match.call(void 0, B.TokenType._function) && + !Pe.canInsertSemicolon.call(void 0) + ? (K.next.call(void 0), gn.parseFunction.call(void 0, s, !1), !1) + : e && + i === zn.ContextualKeyword._async && + !Pe.canInsertSemicolon.call(void 0) && + K.match.call(void 0, B.TokenType.name) + ? (j.state.scopeDepth++, + ds.parseBindingIdentifier.call(void 0, !1), + Pe.expect.call(void 0, B.TokenType.arrow), + ir(t), + !0) + : K.match.call(void 0, B.TokenType._do) && + !Pe.canInsertSemicolon.call(void 0) + ? (K.next.call(void 0), gn.parseBlock.call(void 0), !1) + : e && + !Pe.canInsertSemicolon.call(void 0) && + K.match.call(void 0, B.TokenType.arrow) + ? (j.state.scopeDepth++, + ds.markPriorBindingIdentifier.call(void 0, !1), + Pe.expect.call(void 0, B.TokenType.arrow), + ir(t), + !0) + : ((j.state.tokens[j.state.tokens.length - 1].identifierRole = + K.IdentifierRole.Access), + !1) + ); + } + case B.TokenType._do: + return K.next.call(void 0), gn.parseBlock.call(void 0), !1; + case B.TokenType.parenL: + return Xp(e); + case B.TokenType.bracketL: + return K.next.call(void 0), Qp(B.TokenType.bracketR, !0), !1; + case B.TokenType.braceL: + return Yp(!1, !1), !1; + case B.TokenType._function: + return Dk(), !1; + case B.TokenType.at: + gn.parseDecorators.call(void 0); + case B.TokenType._class: + return gn.parseClass.call(void 0, !1), !1; + case B.TokenType._new: + return Bk(), !1; + case B.TokenType.backQuote: + return Sl(), !1; + case B.TokenType.doubleColon: + return K.next.call(void 0), Cl(), !1; + case B.TokenType.hash: { + let t = K.lookaheadCharCode.call(void 0); + return ( + Ek.IS_IDENTIFIER_START[t] || t === $p.charCodes.backslash + ? xo() + : K.next.call(void 0), + !1 + ); + } + default: + return Pe.unexpected.call(void 0), !1; + } + } + et.parseExprAtom = _o; + function xo() { + K.eat.call(void 0, B.TokenType.hash), Xn(); + } + function Dk() { + let e = j.state.start; + Xn(), + K.eat.call(void 0, B.TokenType.dot) && Xn(), + gn.parseFunction.call(void 0, e, !1); + } + function zp() { + K.next.call(void 0); + } + et.parseLiteral = zp; + function Mk() { + Pe.expect.call(void 0, B.TokenType.parenL), + sr(), + Pe.expect.call(void 0, B.TokenType.parenR); + } + et.parseParenExpression = Mk; + function Xp(e) { + let t = j.state.snapshot(), + s = j.state.tokens.length; + Pe.expect.call(void 0, B.TokenType.parenL); + let i = !0; + for (; !K.match.call(void 0, B.TokenType.parenR) && !j.state.error; ) { + if (i) i = !1; + else if ( + (Pe.expect.call(void 0, B.TokenType.comma), + K.match.call(void 0, B.TokenType.parenR)) + ) + break; + if (K.match.call(void 0, B.TokenType.ellipsis)) { + ds.parseRest.call(void 0, !1), wl(); + break; + } else mn(!1, !0); + } + return ( + Pe.expect.call(void 0, B.TokenType.parenR), + e && Fk() && gl() + ? (j.state.restoreFromSnapshot(t), + j.state.scopeDepth++, + gn.parseFunctionParams.call(void 0), + gl(), + ir(s), + j.state.error ? (j.state.restoreFromSnapshot(t), Xp(!1), !1) : !0) + : !1 + ); + } + function Fk() { + return ( + K.match.call(void 0, B.TokenType.colon) || + !Pe.canInsertSemicolon.call(void 0) + ); + } + function gl() { + return j.isTypeScriptEnabled + ? ms.tsParseArrow.call(void 0) + : j.isFlowEnabled + ? Yn.flowParseArrow.call(void 0) + : K.eat.call(void 0, B.TokenType.arrow); + } + et.parseArrow = gl; + function wl() { + (j.isTypeScriptEnabled || j.isFlowEnabled) && + Vp.typedParseParenItem.call(void 0); + } + function Bk() { + if ( + (Pe.expect.call(void 0, B.TokenType._new), + K.eat.call(void 0, B.TokenType.dot)) + ) { + Xn(); + return; + } + Vk(), + j.isFlowEnabled && Yn.flowStartParseNewArguments.call(void 0), + K.eat.call(void 0, B.TokenType.parenL) && Qp(B.TokenType.parenR); + } + function Vk() { + Cl(), K.eat.call(void 0, B.TokenType.questionDot); + } + function Sl() { + for ( + K.nextTemplateToken.call(void 0), K.nextTemplateToken.call(void 0); + !K.match.call(void 0, B.TokenType.backQuote) && !j.state.error; + + ) + Pe.expect.call(void 0, B.TokenType.dollarBraceL), + sr(), + K.nextTemplateToken.call(void 0), + K.nextTemplateToken.call(void 0); + K.next.call(void 0); + } + et.parseTemplate = Sl; + function Yp(e, t) { + let s = j.getNextContextId.call(void 0), + i = !0; + for ( + K.next.call(void 0), + j.state.tokens[j.state.tokens.length - 1].contextId = s; + !K.eat.call(void 0, B.TokenType.braceR) && !j.state.error; + + ) { + if (i) i = !1; + else if ( + (Pe.expect.call(void 0, B.TokenType.comma), + K.eat.call(void 0, B.TokenType.braceR)) + ) + break; + let r = !1; + if (K.match.call(void 0, B.TokenType.ellipsis)) { + let a = j.state.tokens.length; + if ( + (ds.parseSpread.call(void 0), + e && + (j.state.tokens.length === a + 2 && + ds.markPriorBindingIdentifier.call(void 0, t), + K.eat.call(void 0, B.TokenType.braceR))) + ) + break; + continue; + } + e || (r = K.eat.call(void 0, B.TokenType.star)), + !e && Pe.isContextual.call(void 0, zn.ContextualKeyword._async) + ? (r && Pe.unexpected.call(void 0), + Xn(), + K.match.call(void 0, B.TokenType.colon) || + K.match.call(void 0, B.TokenType.parenL) || + K.match.call(void 0, B.TokenType.braceR) || + K.match.call(void 0, B.TokenType.eq) || + K.match.call(void 0, B.TokenType.comma) || + (K.match.call(void 0, B.TokenType.star) && + (K.next.call(void 0), (r = !0)), + go(s))) + : go(s), + Kk(e, t, s); + } + j.state.tokens[j.state.tokens.length - 1].contextId = s; + } + et.parseObj = Yp; + function jk(e) { + return ( + !e && + (K.match.call(void 0, B.TokenType.string) || + K.match.call(void 0, B.TokenType.num) || + K.match.call(void 0, B.TokenType.bracketL) || + K.match.call(void 0, B.TokenType.name) || + !!(j.state.type & B.TokenType.IS_KEYWORD)) + ); + } + function $k(e, t) { + let s = j.state.start; + return K.match.call(void 0, B.TokenType.parenL) + ? (e && Pe.unexpected.call(void 0), _l(s, !1), !0) + : jk(e) + ? (go(t), _l(s, !1), !0) + : !1; + } + function qk(e, t) { + if (K.eat.call(void 0, B.TokenType.colon)) { + e ? ds.parseMaybeDefault.call(void 0, t) : mn(!1); + return; + } + let s; + e + ? j.state.scopeDepth === 0 + ? (s = K.IdentifierRole.ObjectShorthandTopLevelDeclaration) + : t + ? (s = K.IdentifierRole.ObjectShorthandBlockScopedDeclaration) + : (s = K.IdentifierRole.ObjectShorthandFunctionScopedDeclaration) + : (s = K.IdentifierRole.ObjectShorthand), + (j.state.tokens[j.state.tokens.length - 1].identifierRole = s), + ds.parseMaybeDefault.call(void 0, t, !0); + } + function Kk(e, t, s) { + j.isTypeScriptEnabled + ? ms.tsStartParseObjPropValue.call(void 0) + : j.isFlowEnabled && Yn.flowStartParseObjPropValue.call(void 0), + $k(e, s) || qk(e, t); + } + function go(e) { + j.isFlowEnabled && Yn.flowParseVariance.call(void 0), + K.eat.call(void 0, B.TokenType.bracketL) + ? ((j.state.tokens[j.state.tokens.length - 1].contextId = e), + mn(), + Pe.expect.call(void 0, B.TokenType.bracketR), + (j.state.tokens[j.state.tokens.length - 1].contextId = e)) + : (K.match.call(void 0, B.TokenType.num) || + K.match.call(void 0, B.TokenType.string) || + K.match.call(void 0, B.TokenType.bigint) || + K.match.call(void 0, B.TokenType.decimal) + ? _o() + : xo(), + (j.state.tokens[j.state.tokens.length - 1].identifierRole = + K.IdentifierRole.ObjectKey), + (j.state.tokens[j.state.tokens.length - 1].contextId = e)); + } + et.parsePropertyName = go; + function _l(e, t) { + let s = j.getNextContextId.call(void 0); + j.state.scopeDepth++; + let i = j.state.tokens.length, + r = t; + gn.parseFunctionParams.call(void 0, r, s), Jp(e, s); + let a = j.state.tokens.length; + j.state.scopes.push(new jp.Scope(i, a, !0)), j.state.scopeDepth--; + } + et.parseMethod = _l; + function ir(e) { + Il(!0); + let t = j.state.tokens.length; + j.state.scopes.push(new jp.Scope(e, t, !0)), j.state.scopeDepth--; + } + et.parseArrowExpression = ir; + function Jp(e, t = 0) { + j.isTypeScriptEnabled + ? ms.tsParseFunctionBodyAndFinish.call(void 0, e, t) + : j.isFlowEnabled + ? Yn.flowParseFunctionBodyAndFinish.call(void 0, t) + : Il(!1, t); + } + et.parseFunctionBodyAndFinish = Jp; + function Il(e, t = 0) { + e && !K.match.call(void 0, B.TokenType.braceL) + ? mn() + : gn.parseBlock.call(void 0, !0, t); + } + et.parseFunctionBody = Il; + function Qp(e, t = !1) { + let s = !0; + for (; !K.eat.call(void 0, e) && !j.state.error; ) { + if (s) s = !1; + else if ( + (Pe.expect.call(void 0, B.TokenType.comma), K.eat.call(void 0, e)) + ) + break; + Zp(t); + } + } + function Zp(e) { + (e && K.match.call(void 0, B.TokenType.comma)) || + (K.match.call(void 0, B.TokenType.ellipsis) + ? (ds.parseSpread.call(void 0), wl()) + : K.match.call(void 0, B.TokenType.question) + ? K.next.call(void 0) + : mn(!1, !0)); + } + function Xn() { + K.next.call(void 0), + (j.state.tokens[j.state.tokens.length - 1].type = B.TokenType.name); + } + et.parseIdentifier = Xn; + function Uk() { + rr(); + } + function Hk() { + K.next.call(void 0), + !K.match.call(void 0, B.TokenType.semi) && + !Pe.canInsertSemicolon.call(void 0) && + (K.eat.call(void 0, B.TokenType.star), mn()); + } + function Wk() { + Pe.expectContextual.call(void 0, zn.ContextualKeyword._module), + Pe.expect.call(void 0, B.TokenType.braceL), + gn.parseBlockBody.call(void 0, B.TokenType.braceR); + } + }); + var Ji = Z((Je) => { + 'use strict'; + Object.defineProperty(Je, '__esModule', {value: !0}); + var C = xt(), + ye = It(), + _ = be(), + ue = Zt(), + je = Ns(), + ys = nr(), + z = cs(); + function Gk(e) { + return ( + (e.type === _.TokenType.name || !!(e.type & _.TokenType.IS_KEYWORD)) && + e.contextualKeyword !== ye.ContextualKeyword._from + ); + } + function Ln(e) { + let t = C.pushTypeContext.call(void 0, 0); + z.expect.call(void 0, e || _.TokenType.colon), + Wt(), + C.popTypeContext.call(void 0, t); + } + function eh() { + z.expect.call(void 0, _.TokenType.modulo), + z.expectContextual.call(void 0, ye.ContextualKeyword._checks), + C.eat.call(void 0, _.TokenType.parenL) && + (je.parseExpression.call(void 0), + z.expect.call(void 0, _.TokenType.parenR)); + } + function Pl() { + let e = C.pushTypeContext.call(void 0, 0); + z.expect.call(void 0, _.TokenType.colon), + C.match.call(void 0, _.TokenType.modulo) + ? eh() + : (Wt(), C.match.call(void 0, _.TokenType.modulo) && eh()), + C.popTypeContext.call(void 0, e); + } + function zk() { + C.next.call(void 0), Nl(!0); + } + function Xk() { + C.next.call(void 0), + je.parseIdentifier.call(void 0), + C.match.call(void 0, _.TokenType.lessThan) && On(), + z.expect.call(void 0, _.TokenType.parenL), + Al(), + z.expect.call(void 0, _.TokenType.parenR), + Pl(), + z.semicolon.call(void 0); + } + function El() { + C.match.call(void 0, _.TokenType._class) + ? zk() + : C.match.call(void 0, _.TokenType._function) + ? Xk() + : C.match.call(void 0, _.TokenType._var) + ? Yk() + : z.eatContextual.call(void 0, ye.ContextualKeyword._module) + ? C.eat.call(void 0, _.TokenType.dot) + ? Zk() + : Jk() + : z.isContextual.call(void 0, ye.ContextualKeyword._type) + ? e0() + : z.isContextual.call(void 0, ye.ContextualKeyword._opaque) + ? t0() + : z.isContextual.call(void 0, ye.ContextualKeyword._interface) + ? n0() + : C.match.call(void 0, _.TokenType._export) + ? Qk() + : z.unexpected.call(void 0); + } + function Yk() { + C.next.call(void 0), oh(), z.semicolon.call(void 0); + } + function Jk() { + for ( + C.match.call(void 0, _.TokenType.string) + ? je.parseExprAtom.call(void 0) + : je.parseIdentifier.call(void 0), + z.expect.call(void 0, _.TokenType.braceL); + !C.match.call(void 0, _.TokenType.braceR) && !ue.state.error; + + ) + C.match.call(void 0, _.TokenType._import) + ? (C.next.call(void 0), ys.parseImport.call(void 0)) + : z.unexpected.call(void 0); + z.expect.call(void 0, _.TokenType.braceR); + } + function Qk() { + z.expect.call(void 0, _.TokenType._export), + C.eat.call(void 0, _.TokenType._default) + ? C.match.call(void 0, _.TokenType._function) || + C.match.call(void 0, _.TokenType._class) + ? El() + : (Wt(), z.semicolon.call(void 0)) + : C.match.call(void 0, _.TokenType._var) || + C.match.call(void 0, _.TokenType._function) || + C.match.call(void 0, _.TokenType._class) || + z.isContextual.call(void 0, ye.ContextualKeyword._opaque) + ? El() + : C.match.call(void 0, _.TokenType.star) || + C.match.call(void 0, _.TokenType.braceL) || + z.isContextual.call(void 0, ye.ContextualKeyword._interface) || + z.isContextual.call(void 0, ye.ContextualKeyword._type) || + z.isContextual.call(void 0, ye.ContextualKeyword._opaque) + ? ys.parseExport.call(void 0) + : z.unexpected.call(void 0); + } + function Zk() { + z.expectContextual.call(void 0, ye.ContextualKeyword._exports), + vi(), + z.semicolon.call(void 0); + } + function e0() { + C.next.call(void 0), Ll(); + } + function t0() { + C.next.call(void 0), Ol(!0); + } + function n0() { + C.next.call(void 0), Nl(); + } + function Nl(e = !1) { + if ( + (So(), + C.match.call(void 0, _.TokenType.lessThan) && On(), + C.eat.call(void 0, _.TokenType._extends)) + ) + do bo(); + while (!e && C.eat.call(void 0, _.TokenType.comma)); + if (z.isContextual.call(void 0, ye.ContextualKeyword._mixins)) { + C.next.call(void 0); + do bo(); + while (C.eat.call(void 0, _.TokenType.comma)); + } + if (z.isContextual.call(void 0, ye.ContextualKeyword._implements)) { + C.next.call(void 0); + do bo(); + while (C.eat.call(void 0, _.TokenType.comma)); + } + Co(e, !1, e); + } + function bo() { + sh(!1), C.match.call(void 0, _.TokenType.lessThan) && Rs(); + } + function Rl() { + Nl(); + } + function So() { + je.parseIdentifier.call(void 0); + } + function Ll() { + So(), + C.match.call(void 0, _.TokenType.lessThan) && On(), + Ln(_.TokenType.eq), + z.semicolon.call(void 0); + } + function Ol(e) { + z.expectContextual.call(void 0, ye.ContextualKeyword._type), + So(), + C.match.call(void 0, _.TokenType.lessThan) && On(), + C.match.call(void 0, _.TokenType.colon) && Ln(_.TokenType.colon), + e || Ln(_.TokenType.eq), + z.semicolon.call(void 0); + } + function s0() { + Fl(), oh(), C.eat.call(void 0, _.TokenType.eq) && Wt(); + } + function On() { + let e = C.pushTypeContext.call(void 0, 0); + C.match.call(void 0, _.TokenType.lessThan) || + C.match.call(void 0, _.TokenType.typeParameterStart) + ? C.next.call(void 0) + : z.unexpected.call(void 0); + do + s0(), + C.match.call(void 0, _.TokenType.greaterThan) || + z.expect.call(void 0, _.TokenType.comma); + while (!C.match.call(void 0, _.TokenType.greaterThan) && !ue.state.error); + z.expect.call(void 0, _.TokenType.greaterThan), + C.popTypeContext.call(void 0, e); + } + Je.flowParseTypeParameterDeclaration = On; + function Rs() { + let e = C.pushTypeContext.call(void 0, 0); + for ( + z.expect.call(void 0, _.TokenType.lessThan); + !C.match.call(void 0, _.TokenType.greaterThan) && !ue.state.error; + + ) + Wt(), + C.match.call(void 0, _.TokenType.greaterThan) || + z.expect.call(void 0, _.TokenType.comma); + z.expect.call(void 0, _.TokenType.greaterThan), + C.popTypeContext.call(void 0, e); + } + function i0() { + if ( + (z.expectContextual.call(void 0, ye.ContextualKeyword._interface), + C.eat.call(void 0, _.TokenType._extends)) + ) + do bo(); + while (C.eat.call(void 0, _.TokenType.comma)); + Co(!1, !1, !1); + } + function Dl() { + C.match.call(void 0, _.TokenType.num) || + C.match.call(void 0, _.TokenType.string) + ? je.parseExprAtom.call(void 0) + : je.parseIdentifier.call(void 0); + } + function r0() { + C.lookaheadType.call(void 0) === _.TokenType.colon ? (Dl(), Ln()) : Wt(), + z.expect.call(void 0, _.TokenType.bracketR), + Ln(); + } + function o0() { + Dl(), + z.expect.call(void 0, _.TokenType.bracketR), + z.expect.call(void 0, _.TokenType.bracketR), + C.match.call(void 0, _.TokenType.lessThan) || + C.match.call(void 0, _.TokenType.parenL) + ? Ml() + : (C.eat.call(void 0, _.TokenType.question), Ln()); + } + function Ml() { + for ( + C.match.call(void 0, _.TokenType.lessThan) && On(), + z.expect.call(void 0, _.TokenType.parenL); + !C.match.call(void 0, _.TokenType.parenR) && + !C.match.call(void 0, _.TokenType.ellipsis) && + !ue.state.error; + + ) + wo(), + C.match.call(void 0, _.TokenType.parenR) || + z.expect.call(void 0, _.TokenType.comma); + C.eat.call(void 0, _.TokenType.ellipsis) && wo(), + z.expect.call(void 0, _.TokenType.parenR), + Ln(); + } + function a0() { + Ml(); + } + function Co(e, t, s) { + let i; + for ( + t && C.match.call(void 0, _.TokenType.braceBarL) + ? (z.expect.call(void 0, _.TokenType.braceBarL), + (i = _.TokenType.braceBarR)) + : (z.expect.call(void 0, _.TokenType.braceL), + (i = _.TokenType.braceR)); + !C.match.call(void 0, i) && !ue.state.error; + + ) { + if (s && z.isContextual.call(void 0, ye.ContextualKeyword._proto)) { + let r = C.lookaheadType.call(void 0); + r !== _.TokenType.colon && + r !== _.TokenType.question && + (C.next.call(void 0), (e = !1)); + } + if (e && z.isContextual.call(void 0, ye.ContextualKeyword._static)) { + let r = C.lookaheadType.call(void 0); + r !== _.TokenType.colon && + r !== _.TokenType.question && + C.next.call(void 0); + } + if ((Fl(), C.eat.call(void 0, _.TokenType.bracketL))) + C.eat.call(void 0, _.TokenType.bracketL) ? o0() : r0(); + else if ( + C.match.call(void 0, _.TokenType.parenL) || + C.match.call(void 0, _.TokenType.lessThan) + ) + a0(); + else { + if ( + z.isContextual.call(void 0, ye.ContextualKeyword._get) || + z.isContextual.call(void 0, ye.ContextualKeyword._set) + ) { + let r = C.lookaheadType.call(void 0); + (r === _.TokenType.name || + r === _.TokenType.string || + r === _.TokenType.num) && + C.next.call(void 0); + } + l0(); + } + c0(); + } + z.expect.call(void 0, i); + } + function l0() { + if (C.match.call(void 0, _.TokenType.ellipsis)) { + if ( + (z.expect.call(void 0, _.TokenType.ellipsis), + C.eat.call(void 0, _.TokenType.comma) || + C.eat.call(void 0, _.TokenType.semi), + C.match.call(void 0, _.TokenType.braceR)) + ) + return; + Wt(); + } else + Dl(), + C.match.call(void 0, _.TokenType.lessThan) || + C.match.call(void 0, _.TokenType.parenL) + ? Ml() + : (C.eat.call(void 0, _.TokenType.question), Ln()); + } + function c0() { + !C.eat.call(void 0, _.TokenType.semi) && + !C.eat.call(void 0, _.TokenType.comma) && + !C.match.call(void 0, _.TokenType.braceR) && + !C.match.call(void 0, _.TokenType.braceBarR) && + z.unexpected.call(void 0); + } + function sh(e) { + for ( + e || je.parseIdentifier.call(void 0); + C.eat.call(void 0, _.TokenType.dot); + + ) + je.parseIdentifier.call(void 0); + } + function u0() { + sh(!0), C.match.call(void 0, _.TokenType.lessThan) && Rs(); + } + function p0() { + z.expect.call(void 0, _.TokenType._typeof), ih(); + } + function h0() { + for ( + z.expect.call(void 0, _.TokenType.bracketL); + ue.state.pos < ue.input.length && + !C.match.call(void 0, _.TokenType.bracketR) && + (Wt(), !C.match.call(void 0, _.TokenType.bracketR)); + + ) + z.expect.call(void 0, _.TokenType.comma); + z.expect.call(void 0, _.TokenType.bracketR); + } + function wo() { + let e = C.lookaheadType.call(void 0); + e === _.TokenType.colon || e === _.TokenType.question + ? (je.parseIdentifier.call(void 0), + C.eat.call(void 0, _.TokenType.question), + Ln()) + : Wt(); + } + function Al() { + for ( + ; + !C.match.call(void 0, _.TokenType.parenR) && + !C.match.call(void 0, _.TokenType.ellipsis) && + !ue.state.error; + + ) + wo(), + C.match.call(void 0, _.TokenType.parenR) || + z.expect.call(void 0, _.TokenType.comma); + C.eat.call(void 0, _.TokenType.ellipsis) && wo(); + } + function ih() { + let e = !1, + t = ue.state.noAnonFunctionType; + switch (ue.state.type) { + case _.TokenType.name: { + if (z.isContextual.call(void 0, ye.ContextualKeyword._interface)) { + i0(); + return; + } + je.parseIdentifier.call(void 0), u0(); + return; + } + case _.TokenType.braceL: + Co(!1, !1, !1); + return; + case _.TokenType.braceBarL: + Co(!1, !0, !1); + return; + case _.TokenType.bracketL: + h0(); + return; + case _.TokenType.lessThan: + On(), + z.expect.call(void 0, _.TokenType.parenL), + Al(), + z.expect.call(void 0, _.TokenType.parenR), + z.expect.call(void 0, _.TokenType.arrow), + Wt(); + return; + case _.TokenType.parenL: + if ( + (C.next.call(void 0), + !C.match.call(void 0, _.TokenType.parenR) && + !C.match.call(void 0, _.TokenType.ellipsis)) + ) + if (C.match.call(void 0, _.TokenType.name)) { + let s = C.lookaheadType.call(void 0); + e = s !== _.TokenType.question && s !== _.TokenType.colon; + } else e = !0; + if (e) + if ( + ((ue.state.noAnonFunctionType = !1), + Wt(), + (ue.state.noAnonFunctionType = t), + ue.state.noAnonFunctionType || + !( + C.match.call(void 0, _.TokenType.comma) || + (C.match.call(void 0, _.TokenType.parenR) && + C.lookaheadType.call(void 0) === _.TokenType.arrow) + )) + ) { + z.expect.call(void 0, _.TokenType.parenR); + return; + } else C.eat.call(void 0, _.TokenType.comma); + Al(), + z.expect.call(void 0, _.TokenType.parenR), + z.expect.call(void 0, _.TokenType.arrow), + Wt(); + return; + case _.TokenType.minus: + C.next.call(void 0), je.parseLiteral.call(void 0); + return; + case _.TokenType.string: + case _.TokenType.num: + case _.TokenType._true: + case _.TokenType._false: + case _.TokenType._null: + case _.TokenType._this: + case _.TokenType._void: + case _.TokenType.star: + C.next.call(void 0); + return; + default: + if (ue.state.type === _.TokenType._typeof) { + p0(); + return; + } else if (ue.state.type & _.TokenType.IS_KEYWORD) { + C.next.call(void 0), + (ue.state.tokens[ue.state.tokens.length - 1].type = + _.TokenType.name); + return; + } + } + z.unexpected.call(void 0); + } + function f0() { + for ( + ih(); + !z.canInsertSemicolon.call(void 0) && + (C.match.call(void 0, _.TokenType.bracketL) || + C.match.call(void 0, _.TokenType.questionDot)); + + ) + C.eat.call(void 0, _.TokenType.questionDot), + z.expect.call(void 0, _.TokenType.bracketL), + C.eat.call(void 0, _.TokenType.bracketR) || + (Wt(), z.expect.call(void 0, _.TokenType.bracketR)); + } + function rh() { + C.eat.call(void 0, _.TokenType.question) ? rh() : f0(); + } + function th() { + rh(), + !ue.state.noAnonFunctionType && + C.eat.call(void 0, _.TokenType.arrow) && + Wt(); + } + function nh() { + for ( + C.eat.call(void 0, _.TokenType.bitwiseAND), th(); + C.eat.call(void 0, _.TokenType.bitwiseAND); + + ) + th(); + } + function d0() { + for ( + C.eat.call(void 0, _.TokenType.bitwiseOR), nh(); + C.eat.call(void 0, _.TokenType.bitwiseOR); + + ) + nh(); + } + function Wt() { + d0(); + } + function vi() { + Ln(); + } + Je.flowParseTypeAnnotation = vi; + function oh() { + je.parseIdentifier.call(void 0), + C.match.call(void 0, _.TokenType.colon) && vi(); + } + function Fl() { + (C.match.call(void 0, _.TokenType.plus) || + C.match.call(void 0, _.TokenType.minus)) && + (C.next.call(void 0), + (ue.state.tokens[ue.state.tokens.length - 1].isType = !0)); + } + Je.flowParseVariance = Fl; + function m0(e) { + C.match.call(void 0, _.TokenType.colon) && Pl(), + je.parseFunctionBody.call(void 0, !1, e); + } + Je.flowParseFunctionBodyAndFinish = m0; + function y0(e, t, s) { + if ( + C.match.call(void 0, _.TokenType.questionDot) && + C.lookaheadType.call(void 0) === _.TokenType.lessThan + ) { + if (t) { + s.stop = !0; + return; + } + C.next.call(void 0), + Rs(), + z.expect.call(void 0, _.TokenType.parenL), + je.parseCallExpressionArguments.call(void 0); + return; + } else if (!t && C.match.call(void 0, _.TokenType.lessThan)) { + let i = ue.state.snapshot(); + if ( + (Rs(), + z.expect.call(void 0, _.TokenType.parenL), + je.parseCallExpressionArguments.call(void 0), + ue.state.error) + ) + ue.state.restoreFromSnapshot(i); + else return; + } + je.baseParseSubscript.call(void 0, e, t, s); + } + Je.flowParseSubscript = y0; + function T0() { + if (C.match.call(void 0, _.TokenType.lessThan)) { + let e = ue.state.snapshot(); + Rs(), ue.state.error && ue.state.restoreFromSnapshot(e); + } + } + Je.flowStartParseNewArguments = T0; + function k0() { + if ( + C.match.call(void 0, _.TokenType.name) && + ue.state.contextualKeyword === ye.ContextualKeyword._interface + ) { + let e = C.pushTypeContext.call(void 0, 0); + return C.next.call(void 0), Rl(), C.popTypeContext.call(void 0, e), !0; + } else if (z.isContextual.call(void 0, ye.ContextualKeyword._enum)) + return ah(), !0; + return !1; + } + Je.flowTryParseStatement = k0; + function v0() { + return z.isContextual.call(void 0, ye.ContextualKeyword._enum) + ? (ah(), !0) + : !1; + } + Je.flowTryParseExportDefaultExpression = v0; + function x0(e) { + if (e === ye.ContextualKeyword._declare) { + if ( + C.match.call(void 0, _.TokenType._class) || + C.match.call(void 0, _.TokenType.name) || + C.match.call(void 0, _.TokenType._function) || + C.match.call(void 0, _.TokenType._var) || + C.match.call(void 0, _.TokenType._export) + ) { + let t = C.pushTypeContext.call(void 0, 1); + El(), C.popTypeContext.call(void 0, t); + } + } else if (C.match.call(void 0, _.TokenType.name)) { + if (e === ye.ContextualKeyword._interface) { + let t = C.pushTypeContext.call(void 0, 1); + Rl(), C.popTypeContext.call(void 0, t); + } else if (e === ye.ContextualKeyword._type) { + let t = C.pushTypeContext.call(void 0, 1); + Ll(), C.popTypeContext.call(void 0, t); + } else if (e === ye.ContextualKeyword._opaque) { + let t = C.pushTypeContext.call(void 0, 1); + Ol(!1), C.popTypeContext.call(void 0, t); + } + } + z.semicolon.call(void 0); + } + Je.flowParseIdentifierStatement = x0; + function g0() { + return ( + z.isContextual.call(void 0, ye.ContextualKeyword._type) || + z.isContextual.call(void 0, ye.ContextualKeyword._interface) || + z.isContextual.call(void 0, ye.ContextualKeyword._opaque) || + z.isContextual.call(void 0, ye.ContextualKeyword._enum) + ); + } + Je.flowShouldParseExportDeclaration = g0; + function _0() { + return ( + C.match.call(void 0, _.TokenType.name) && + (ue.state.contextualKeyword === ye.ContextualKeyword._type || + ue.state.contextualKeyword === ye.ContextualKeyword._interface || + ue.state.contextualKeyword === ye.ContextualKeyword._opaque || + ue.state.contextualKeyword === ye.ContextualKeyword._enum) + ); + } + Je.flowShouldDisallowExportDefaultSpecifier = _0; + function b0() { + if (z.isContextual.call(void 0, ye.ContextualKeyword._type)) { + let e = C.pushTypeContext.call(void 0, 1); + C.next.call(void 0), + C.match.call(void 0, _.TokenType.braceL) + ? (ys.parseExportSpecifiers.call(void 0), + ys.parseExportFrom.call(void 0)) + : Ll(), + C.popTypeContext.call(void 0, e); + } else if (z.isContextual.call(void 0, ye.ContextualKeyword._opaque)) { + let e = C.pushTypeContext.call(void 0, 1); + C.next.call(void 0), Ol(!1), C.popTypeContext.call(void 0, e); + } else if (z.isContextual.call(void 0, ye.ContextualKeyword._interface)) { + let e = C.pushTypeContext.call(void 0, 1); + C.next.call(void 0), Rl(), C.popTypeContext.call(void 0, e); + } else ys.parseStatement.call(void 0, !0); + } + Je.flowParseExportDeclaration = b0; + function C0() { + return ( + C.match.call(void 0, _.TokenType.star) || + (z.isContextual.call(void 0, ye.ContextualKeyword._type) && + C.lookaheadType.call(void 0) === _.TokenType.star) + ); + } + Je.flowShouldParseExportStar = C0; + function w0() { + if (z.eatContextual.call(void 0, ye.ContextualKeyword._type)) { + let e = C.pushTypeContext.call(void 0, 2); + ys.baseParseExportStar.call(void 0), C.popTypeContext.call(void 0, e); + } else ys.baseParseExportStar.call(void 0); + } + Je.flowParseExportStar = w0; + function S0(e) { + if ( + (e && C.match.call(void 0, _.TokenType.lessThan) && Rs(), + z.isContextual.call(void 0, ye.ContextualKeyword._implements)) + ) { + let t = C.pushTypeContext.call(void 0, 0); + C.next.call(void 0), + (ue.state.tokens[ue.state.tokens.length - 1].type = + _.TokenType._implements); + do So(), C.match.call(void 0, _.TokenType.lessThan) && Rs(); + while (C.eat.call(void 0, _.TokenType.comma)); + C.popTypeContext.call(void 0, t); + } + } + Je.flowAfterParseClassSuper = S0; + function I0() { + C.match.call(void 0, _.TokenType.lessThan) && + (On(), + C.match.call(void 0, _.TokenType.parenL) || z.unexpected.call(void 0)); + } + Je.flowStartParseObjPropValue = I0; + function E0() { + let e = C.pushTypeContext.call(void 0, 0); + C.eat.call(void 0, _.TokenType.question), + C.match.call(void 0, _.TokenType.colon) && vi(), + C.popTypeContext.call(void 0, e); + } + Je.flowParseAssignableListItemTypes = E0; + function A0() { + if ( + C.match.call(void 0, _.TokenType._typeof) || + z.isContextual.call(void 0, ye.ContextualKeyword._type) + ) { + let e = C.lookaheadTypeAndKeyword.call(void 0); + (Gk(e) || + e.type === _.TokenType.braceL || + e.type === _.TokenType.star) && + C.next.call(void 0); + } + } + Je.flowStartParseImportSpecifiers = A0; + function P0() { + let e = + ue.state.contextualKeyword === ye.ContextualKeyword._type || + ue.state.type === _.TokenType._typeof; + e ? C.next.call(void 0) : je.parseIdentifier.call(void 0), + z.isContextual.call(void 0, ye.ContextualKeyword._as) && + !z.isLookaheadContextual.call(void 0, ye.ContextualKeyword._as) + ? (je.parseIdentifier.call(void 0), + (e && + !C.match.call(void 0, _.TokenType.name) && + !(ue.state.type & _.TokenType.IS_KEYWORD)) || + je.parseIdentifier.call(void 0)) + : (e && + (C.match.call(void 0, _.TokenType.name) || + ue.state.type & _.TokenType.IS_KEYWORD) && + je.parseIdentifier.call(void 0), + z.eatContextual.call(void 0, ye.ContextualKeyword._as) && + je.parseIdentifier.call(void 0)); + } + Je.flowParseImportSpecifier = P0; + function N0() { + if (C.match.call(void 0, _.TokenType.lessThan)) { + let e = C.pushTypeContext.call(void 0, 0); + On(), C.popTypeContext.call(void 0, e); + } + } + Je.flowStartParseFunctionParams = N0; + function R0() { + C.match.call(void 0, _.TokenType.colon) && vi(); + } + Je.flowAfterParseVarHead = R0; + function L0() { + if (C.match.call(void 0, _.TokenType.colon)) { + let e = ue.state.noAnonFunctionType; + (ue.state.noAnonFunctionType = !0), + vi(), + (ue.state.noAnonFunctionType = e); + } + } + Je.flowStartParseAsyncArrowFromCallExpression = L0; + function O0(e, t) { + if (C.match.call(void 0, _.TokenType.lessThan)) { + let s = ue.state.snapshot(), + i = je.baseParseMaybeAssign.call(void 0, e, t); + if (ue.state.error) + ue.state.restoreFromSnapshot(s), + (ue.state.type = _.TokenType.typeParameterStart); + else return i; + let r = C.pushTypeContext.call(void 0, 0); + if ( + (On(), + C.popTypeContext.call(void 0, r), + (i = je.baseParseMaybeAssign.call(void 0, e, t)), + i) + ) + return !0; + z.unexpected.call(void 0); + } + return je.baseParseMaybeAssign.call(void 0, e, t); + } + Je.flowParseMaybeAssign = O0; + function D0() { + if (C.match.call(void 0, _.TokenType.colon)) { + let e = C.pushTypeContext.call(void 0, 0), + t = ue.state.snapshot(), + s = ue.state.noAnonFunctionType; + (ue.state.noAnonFunctionType = !0), + Pl(), + (ue.state.noAnonFunctionType = s), + z.canInsertSemicolon.call(void 0) && z.unexpected.call(void 0), + C.match.call(void 0, _.TokenType.arrow) || z.unexpected.call(void 0), + ue.state.error && ue.state.restoreFromSnapshot(t), + C.popTypeContext.call(void 0, e); + } + return C.eat.call(void 0, _.TokenType.arrow); + } + Je.flowParseArrow = D0; + function M0(e, t = !1) { + if ( + ue.state.tokens[ue.state.tokens.length - 1].contextualKeyword === + ye.ContextualKeyword._async && + C.match.call(void 0, _.TokenType.lessThan) + ) { + let s = ue.state.snapshot(); + if (F0() && !ue.state.error) return; + ue.state.restoreFromSnapshot(s); + } + je.baseParseSubscripts.call(void 0, e, t); + } + Je.flowParseSubscripts = M0; + function F0() { + ue.state.scopeDepth++; + let e = ue.state.tokens.length; + return ( + ys.parseFunctionParams.call(void 0), + je.parseArrow.call(void 0) + ? (je.parseArrowExpression.call(void 0, e), !0) + : !1 + ); + } + function ah() { + z.expectContextual.call(void 0, ye.ContextualKeyword._enum), + (ue.state.tokens[ue.state.tokens.length - 1].type = _.TokenType._enum), + je.parseIdentifier.call(void 0), + B0(); + } + function B0() { + z.eatContextual.call(void 0, ye.ContextualKeyword._of) && + C.next.call(void 0), + z.expect.call(void 0, _.TokenType.braceL), + V0(), + z.expect.call(void 0, _.TokenType.braceR); + } + function V0() { + for ( + ; + !C.match.call(void 0, _.TokenType.braceR) && + !ue.state.error && + !C.eat.call(void 0, _.TokenType.ellipsis); + + ) + j0(), + C.match.call(void 0, _.TokenType.braceR) || + z.expect.call(void 0, _.TokenType.comma); + } + function j0() { + je.parseIdentifier.call(void 0), + C.eat.call(void 0, _.TokenType.eq) && C.next.call(void 0); + } + }); + var nr = Z((Tt) => { + 'use strict'; + Object.defineProperty(Tt, '__esModule', {value: !0}); + var $0 = Ul(), + Ft = Ji(), + dt = hi(), + $ = xt(), + ke = It(), + Ts = qr(), + D = be(), + lh = Qt(), + P = Zt(), + De = Ns(), + ks = lo(), + ee = cs(); + function q0() { + if ( + (ql(D.TokenType.eof), + P.state.scopes.push(new Ts.Scope(0, P.state.tokens.length, !0)), + P.state.scopeDepth !== 0) + ) + throw new Error( + `Invalid scope depth at end of file: ${P.state.scopeDepth}` + ); + return new $0.File(P.state.tokens, P.state.scopes); + } + Tt.parseTopLevel = q0; + function _n(e) { + (P.isFlowEnabled && Ft.flowTryParseStatement.call(void 0)) || + ($.match.call(void 0, D.TokenType.at) && $l(), K0(e)); + } + Tt.parseStatement = _n; + function K0(e) { + if (P.isTypeScriptEnabled && dt.tsTryParseStatementContent.call(void 0)) + return; + let t = P.state.type; + switch (t) { + case D.TokenType._break: + case D.TokenType._continue: + H0(); + return; + case D.TokenType._debugger: + W0(); + return; + case D.TokenType._do: + G0(); + return; + case D.TokenType._for: + z0(); + return; + case D.TokenType._function: + if ($.lookaheadType.call(void 0) === D.TokenType.dot) break; + e || ee.unexpected.call(void 0), J0(); + return; + case D.TokenType._class: + e || ee.unexpected.call(void 0), Io(!0); + return; + case D.TokenType._if: + Q0(); + return; + case D.TokenType._return: + Z0(); + return; + case D.TokenType._switch: + ev(); + return; + case D.TokenType._throw: + tv(); + return; + case D.TokenType._try: + sv(); + return; + case D.TokenType._let: + case D.TokenType._const: + e || ee.unexpected.call(void 0); + case D.TokenType._var: + Vl(t !== D.TokenType._var); + return; + case D.TokenType._while: + iv(); + return; + case D.TokenType.braceL: + gi(); + return; + case D.TokenType.semi: + rv(); + return; + case D.TokenType._export: + case D.TokenType._import: { + let r = $.lookaheadType.call(void 0); + if (r === D.TokenType.parenL || r === D.TokenType.dot) break; + $.next.call(void 0), t === D.TokenType._import ? xh() : Th(); + return; + } + case D.TokenType.name: + if (P.state.contextualKeyword === ke.ContextualKeyword._async) { + let r = P.state.start, + a = P.state.snapshot(); + if ( + ($.next.call(void 0), + $.match.call(void 0, D.TokenType._function) && + !ee.canInsertSemicolon.call(void 0)) + ) { + ee.expect.call(void 0, D.TokenType._function), lr(r, !0); + return; + } else P.state.restoreFromSnapshot(a); + } else if ( + P.state.contextualKeyword === ke.ContextualKeyword._using && + !ee.hasFollowingLineBreak.call(void 0) && + $.lookaheadType.call(void 0) === D.TokenType.name + ) { + Vl(!0); + return; + } + default: + break; + } + let s = P.state.tokens.length; + De.parseExpression.call(void 0); + let i = null; + if (P.state.tokens.length === s + 1) { + let r = P.state.tokens[P.state.tokens.length - 1]; + r.type === D.TokenType.name && (i = r.contextualKeyword); + } + if (i == null) { + ee.semicolon.call(void 0); + return; + } + $.eat.call(void 0, D.TokenType.colon) ? ov() : av(i); + } + function $l() { + for (; $.match.call(void 0, D.TokenType.at); ) ph(); + } + Tt.parseDecorators = $l; + function ph() { + if (($.next.call(void 0), $.eat.call(void 0, D.TokenType.parenL))) + De.parseExpression.call(void 0), + ee.expect.call(void 0, D.TokenType.parenR); + else { + for ( + De.parseIdentifier.call(void 0); + $.eat.call(void 0, D.TokenType.dot); + + ) + De.parseIdentifier.call(void 0); + U0(); + } + } + function U0() { + P.isTypeScriptEnabled + ? dt.tsParseMaybeDecoratorArguments.call(void 0) + : hh(); + } + function hh() { + $.eat.call(void 0, D.TokenType.parenL) && + De.parseCallExpressionArguments.call(void 0); + } + Tt.baseParseMaybeDecoratorArguments = hh; + function H0() { + $.next.call(void 0), + ee.isLineTerminator.call(void 0) || + (De.parseIdentifier.call(void 0), ee.semicolon.call(void 0)); + } + function W0() { + $.next.call(void 0), ee.semicolon.call(void 0); + } + function G0() { + $.next.call(void 0), + _n(!1), + ee.expect.call(void 0, D.TokenType._while), + De.parseParenExpression.call(void 0), + $.eat.call(void 0, D.TokenType.semi); + } + function z0() { + P.state.scopeDepth++; + let e = P.state.tokens.length; + Y0(); + let t = P.state.tokens.length; + P.state.scopes.push(new Ts.Scope(e, t, !1)), P.state.scopeDepth--; + } + function X0() { + return !( + !ee.isContextual.call(void 0, ke.ContextualKeyword._using) || + ee.isLookaheadContextual.call(void 0, ke.ContextualKeyword._of) + ); + } + function Y0() { + $.next.call(void 0); + let e = !1; + if ( + (ee.isContextual.call(void 0, ke.ContextualKeyword._await) && + ((e = !0), $.next.call(void 0)), + ee.expect.call(void 0, D.TokenType.parenL), + $.match.call(void 0, D.TokenType.semi)) + ) { + e && ee.unexpected.call(void 0), Bl(); + return; + } + if ( + $.match.call(void 0, D.TokenType._var) || + $.match.call(void 0, D.TokenType._let) || + $.match.call(void 0, D.TokenType._const) || + X0() + ) { + if ( + ($.next.call(void 0), + fh(!0, P.state.type !== D.TokenType._var), + $.match.call(void 0, D.TokenType._in) || + ee.isContextual.call(void 0, ke.ContextualKeyword._of)) + ) { + ch(e); + return; + } + Bl(); + return; + } + if ( + (De.parseExpression.call(void 0, !0), + $.match.call(void 0, D.TokenType._in) || + ee.isContextual.call(void 0, ke.ContextualKeyword._of)) + ) { + ch(e); + return; + } + e && ee.unexpected.call(void 0), Bl(); + } + function J0() { + let e = P.state.start; + $.next.call(void 0), lr(e, !0); + } + function Q0() { + $.next.call(void 0), + De.parseParenExpression.call(void 0), + _n(!1), + $.eat.call(void 0, D.TokenType._else) && _n(!1); + } + function Z0() { + $.next.call(void 0), + ee.isLineTerminator.call(void 0) || + (De.parseExpression.call(void 0), ee.semicolon.call(void 0)); + } + function ev() { + $.next.call(void 0), + De.parseParenExpression.call(void 0), + P.state.scopeDepth++; + let e = P.state.tokens.length; + for ( + ee.expect.call(void 0, D.TokenType.braceL); + !$.match.call(void 0, D.TokenType.braceR) && !P.state.error; + + ) + if ( + $.match.call(void 0, D.TokenType._case) || + $.match.call(void 0, D.TokenType._default) + ) { + let s = $.match.call(void 0, D.TokenType._case); + $.next.call(void 0), + s && De.parseExpression.call(void 0), + ee.expect.call(void 0, D.TokenType.colon); + } else _n(!0); + $.next.call(void 0); + let t = P.state.tokens.length; + P.state.scopes.push(new Ts.Scope(e, t, !1)), P.state.scopeDepth--; + } + function tv() { + $.next.call(void 0), + De.parseExpression.call(void 0), + ee.semicolon.call(void 0); + } + function nv() { + ks.parseBindingAtom.call(void 0, !0), + P.isTypeScriptEnabled && dt.tsTryParseTypeAnnotation.call(void 0); + } + function sv() { + if ( + ($.next.call(void 0), gi(), $.match.call(void 0, D.TokenType._catch)) + ) { + $.next.call(void 0); + let e = null; + if ( + ($.match.call(void 0, D.TokenType.parenL) && + (P.state.scopeDepth++, + (e = P.state.tokens.length), + ee.expect.call(void 0, D.TokenType.parenL), + nv(), + ee.expect.call(void 0, D.TokenType.parenR)), + gi(), + e != null) + ) { + let t = P.state.tokens.length; + P.state.scopes.push(new Ts.Scope(e, t, !1)), P.state.scopeDepth--; + } + } + $.eat.call(void 0, D.TokenType._finally) && gi(); + } + function Vl(e) { + $.next.call(void 0), fh(!1, e), ee.semicolon.call(void 0); + } + Tt.parseVarStatement = Vl; + function iv() { + $.next.call(void 0), De.parseParenExpression.call(void 0), _n(!1); + } + function rv() { + $.next.call(void 0); + } + function ov() { + _n(!0); + } + function av(e) { + P.isTypeScriptEnabled + ? dt.tsParseIdentifierStatement.call(void 0, e) + : P.isFlowEnabled + ? Ft.flowParseIdentifierStatement.call(void 0, e) + : ee.semicolon.call(void 0); + } + function gi(e = !1, t = 0) { + let s = P.state.tokens.length; + P.state.scopeDepth++, + ee.expect.call(void 0, D.TokenType.braceL), + t && (P.state.tokens[P.state.tokens.length - 1].contextId = t), + ql(D.TokenType.braceR), + t && (P.state.tokens[P.state.tokens.length - 1].contextId = t); + let i = P.state.tokens.length; + P.state.scopes.push(new Ts.Scope(s, i, e)), P.state.scopeDepth--; + } + Tt.parseBlock = gi; + function ql(e) { + for (; !$.eat.call(void 0, e) && !P.state.error; ) _n(!0); + } + Tt.parseBlockBody = ql; + function Bl() { + ee.expect.call(void 0, D.TokenType.semi), + $.match.call(void 0, D.TokenType.semi) || + De.parseExpression.call(void 0), + ee.expect.call(void 0, D.TokenType.semi), + $.match.call(void 0, D.TokenType.parenR) || + De.parseExpression.call(void 0), + ee.expect.call(void 0, D.TokenType.parenR), + _n(!1); + } + function ch(e) { + e + ? ee.eatContextual.call(void 0, ke.ContextualKeyword._of) + : $.next.call(void 0), + De.parseExpression.call(void 0), + ee.expect.call(void 0, D.TokenType.parenR), + _n(!1); + } + function fh(e, t) { + for (;;) { + if ((lv(t), $.eat.call(void 0, D.TokenType.eq))) { + let s = P.state.tokens.length - 1; + De.parseMaybeAssign.call(void 0, e), + (P.state.tokens[s].rhsEndIndex = P.state.tokens.length); + } + if (!$.eat.call(void 0, D.TokenType.comma)) break; + } + } + function lv(e) { + ks.parseBindingAtom.call(void 0, e), + P.isTypeScriptEnabled + ? dt.tsAfterParseVarHead.call(void 0) + : P.isFlowEnabled && Ft.flowAfterParseVarHead.call(void 0); + } + function lr(e, t, s = !1) { + $.match.call(void 0, D.TokenType.star) && $.next.call(void 0), + t && + !s && + !$.match.call(void 0, D.TokenType.name) && + !$.match.call(void 0, D.TokenType._yield) && + ee.unexpected.call(void 0); + let i = null; + $.match.call(void 0, D.TokenType.name) && + (t || ((i = P.state.tokens.length), P.state.scopeDepth++), + ks.parseBindingIdentifier.call(void 0, !1)); + let r = P.state.tokens.length; + P.state.scopeDepth++, dh(), De.parseFunctionBodyAndFinish.call(void 0, e); + let a = P.state.tokens.length; + P.state.scopes.push(new Ts.Scope(r, a, !0)), + P.state.scopeDepth--, + i !== null && + (P.state.scopes.push(new Ts.Scope(i, a, !0)), P.state.scopeDepth--); + } + Tt.parseFunction = lr; + function dh(e = !1, t = 0) { + P.isTypeScriptEnabled + ? dt.tsStartParseFunctionParams.call(void 0) + : P.isFlowEnabled && Ft.flowStartParseFunctionParams.call(void 0), + ee.expect.call(void 0, D.TokenType.parenL), + t && (P.state.tokens[P.state.tokens.length - 1].contextId = t), + ks.parseBindingList.call(void 0, D.TokenType.parenR, !1, !1, e, t), + t && (P.state.tokens[P.state.tokens.length - 1].contextId = t); + } + Tt.parseFunctionParams = dh; + function Io(e, t = !1) { + let s = P.getNextContextId.call(void 0); + $.next.call(void 0), + (P.state.tokens[P.state.tokens.length - 1].contextId = s), + (P.state.tokens[P.state.tokens.length - 1].isExpression = !e); + let i = null; + e || ((i = P.state.tokens.length), P.state.scopeDepth++), hv(e, t), fv(); + let r = P.state.tokens.length; + if ( + (cv(s), + !P.state.error && + ((P.state.tokens[r].contextId = s), + (P.state.tokens[P.state.tokens.length - 1].contextId = s), + i !== null)) + ) { + let a = P.state.tokens.length; + P.state.scopes.push(new Ts.Scope(i, a, !1)), P.state.scopeDepth--; + } + } + Tt.parseClass = Io; + function mh() { + return ( + $.match.call(void 0, D.TokenType.eq) || + $.match.call(void 0, D.TokenType.semi) || + $.match.call(void 0, D.TokenType.braceR) || + $.match.call(void 0, D.TokenType.bang) || + $.match.call(void 0, D.TokenType.colon) + ); + } + function yh() { + return ( + $.match.call(void 0, D.TokenType.parenL) || + $.match.call(void 0, D.TokenType.lessThan) + ); + } + function cv(e) { + for ( + ee.expect.call(void 0, D.TokenType.braceL); + !$.eat.call(void 0, D.TokenType.braceR) && !P.state.error; + + ) { + if ($.eat.call(void 0, D.TokenType.semi)) continue; + if ($.match.call(void 0, D.TokenType.at)) { + ph(); + continue; + } + let t = P.state.start; + uv(t, e); + } + } + function uv(e, t) { + P.isTypeScriptEnabled && + dt.tsParseModifiers.call(void 0, [ + ke.ContextualKeyword._declare, + ke.ContextualKeyword._public, + ke.ContextualKeyword._protected, + ke.ContextualKeyword._private, + ke.ContextualKeyword._override, + ]); + let s = !1; + if ( + $.match.call(void 0, D.TokenType.name) && + P.state.contextualKeyword === ke.ContextualKeyword._static + ) { + if ((De.parseIdentifier.call(void 0), yh())) { + or(e, !1); + return; + } else if (mh()) { + ar(); + return; + } + if ( + ((P.state.tokens[P.state.tokens.length - 1].type = + D.TokenType._static), + (s = !0), + $.match.call(void 0, D.TokenType.braceL)) + ) { + (P.state.tokens[P.state.tokens.length - 1].contextId = t), gi(); + return; + } + } + pv(e, s, t); + } + function pv(e, t, s) { + if ( + P.isTypeScriptEnabled && + dt.tsTryParseClassMemberWithIsStatic.call(void 0, t) + ) + return; + if ($.eat.call(void 0, D.TokenType.star)) { + xi(s), or(e, !1); + return; + } + xi(s); + let i = !1, + r = P.state.tokens[P.state.tokens.length - 1]; + r.contextualKeyword === ke.ContextualKeyword._constructor && (i = !0), + jl(), + yh() + ? or(e, i) + : mh() + ? ar() + : r.contextualKeyword === ke.ContextualKeyword._async && + !ee.isLineTerminator.call(void 0) + ? ((P.state.tokens[P.state.tokens.length - 1].type = + D.TokenType._async), + $.match.call(void 0, D.TokenType.star) && $.next.call(void 0), + xi(s), + jl(), + or(e, !1)) + : (r.contextualKeyword === ke.ContextualKeyword._get || + r.contextualKeyword === ke.ContextualKeyword._set) && + !( + ee.isLineTerminator.call(void 0) && + $.match.call(void 0, D.TokenType.star) + ) + ? (r.contextualKeyword === ke.ContextualKeyword._get + ? (P.state.tokens[P.state.tokens.length - 1].type = + D.TokenType._get) + : (P.state.tokens[P.state.tokens.length - 1].type = + D.TokenType._set), + xi(s), + or(e, !1)) + : r.contextualKeyword === ke.ContextualKeyword._accessor && + !ee.isLineTerminator.call(void 0) + ? (xi(s), ar()) + : ee.isLineTerminator.call(void 0) + ? ar() + : ee.unexpected.call(void 0); + } + function or(e, t) { + P.isTypeScriptEnabled + ? dt.tsTryParseTypeParameters.call(void 0) + : P.isFlowEnabled && + $.match.call(void 0, D.TokenType.lessThan) && + Ft.flowParseTypeParameterDeclaration.call(void 0), + De.parseMethod.call(void 0, e, t); + } + function xi(e) { + De.parsePropertyName.call(void 0, e); + } + Tt.parseClassPropertyName = xi; + function jl() { + if (P.isTypeScriptEnabled) { + let e = $.pushTypeContext.call(void 0, 0); + $.eat.call(void 0, D.TokenType.question), + $.popTypeContext.call(void 0, e); + } + } + Tt.parsePostMemberNameModifiers = jl; + function ar() { + if ( + (P.isTypeScriptEnabled + ? ($.eatTypeToken.call(void 0, D.TokenType.bang), + dt.tsTryParseTypeAnnotation.call(void 0)) + : P.isFlowEnabled && + $.match.call(void 0, D.TokenType.colon) && + Ft.flowParseTypeAnnotation.call(void 0), + $.match.call(void 0, D.TokenType.eq)) + ) { + let e = P.state.tokens.length; + $.next.call(void 0), + De.parseMaybeAssign.call(void 0), + (P.state.tokens[e].rhsEndIndex = P.state.tokens.length); + } + ee.semicolon.call(void 0); + } + Tt.parseClassProperty = ar; + function hv(e, t = !1) { + (P.isTypeScriptEnabled && + (!e || t) && + ee.isContextual.call(void 0, ke.ContextualKeyword._implements)) || + ($.match.call(void 0, D.TokenType.name) && + ks.parseBindingIdentifier.call(void 0, !0), + P.isTypeScriptEnabled + ? dt.tsTryParseTypeParameters.call(void 0) + : P.isFlowEnabled && + $.match.call(void 0, D.TokenType.lessThan) && + Ft.flowParseTypeParameterDeclaration.call(void 0)); + } + function fv() { + let e = !1; + $.eat.call(void 0, D.TokenType._extends) + ? (De.parseExprSubscripts.call(void 0), (e = !0)) + : (e = !1), + P.isTypeScriptEnabled + ? dt.tsAfterParseClassSuper.call(void 0, e) + : P.isFlowEnabled && Ft.flowAfterParseClassSuper.call(void 0, e); + } + function Th() { + let e = P.state.tokens.length - 1; + (P.isTypeScriptEnabled && dt.tsTryParseExport.call(void 0)) || + (Tv() + ? kv() + : yv() + ? (De.parseIdentifier.call(void 0), + $.match.call(void 0, D.TokenType.comma) && + $.lookaheadType.call(void 0) === D.TokenType.star + ? (ee.expect.call(void 0, D.TokenType.comma), + ee.expect.call(void 0, D.TokenType.star), + ee.expectContextual.call(void 0, ke.ContextualKeyword._as), + De.parseIdentifier.call(void 0)) + : kh(), + cr()) + : $.eat.call(void 0, D.TokenType._default) + ? dv() + : xv() + ? mv() + : (Kl(), cr()), + (P.state.tokens[e].rhsEndIndex = P.state.tokens.length)); + } + Tt.parseExport = Th; + function dv() { + if ( + (P.isTypeScriptEnabled && + dt.tsTryParseExportDefaultExpression.call(void 0)) || + (P.isFlowEnabled && Ft.flowTryParseExportDefaultExpression.call(void 0)) + ) + return; + let e = P.state.start; + $.eat.call(void 0, D.TokenType._function) + ? lr(e, !0, !0) + : ee.isContextual.call(void 0, ke.ContextualKeyword._async) && + $.lookaheadType.call(void 0) === D.TokenType._function + ? (ee.eatContextual.call(void 0, ke.ContextualKeyword._async), + $.eat.call(void 0, D.TokenType._function), + lr(e, !0, !0)) + : $.match.call(void 0, D.TokenType._class) + ? Io(!0, !0) + : $.match.call(void 0, D.TokenType.at) + ? ($l(), Io(!0, !0)) + : (De.parseMaybeAssign.call(void 0), ee.semicolon.call(void 0)); + } + function mv() { + P.isTypeScriptEnabled + ? dt.tsParseExportDeclaration.call(void 0) + : P.isFlowEnabled + ? Ft.flowParseExportDeclaration.call(void 0) + : _n(!0); + } + function yv() { + if (P.isTypeScriptEnabled && dt.tsIsDeclarationStart.call(void 0)) + return !1; + if ( + P.isFlowEnabled && + Ft.flowShouldDisallowExportDefaultSpecifier.call(void 0) + ) + return !1; + if ($.match.call(void 0, D.TokenType.name)) + return P.state.contextualKeyword !== ke.ContextualKeyword._async; + if (!$.match.call(void 0, D.TokenType._default)) return !1; + let e = $.nextTokenStart.call(void 0), + t = $.lookaheadTypeAndKeyword.call(void 0), + s = + t.type === D.TokenType.name && + t.contextualKeyword === ke.ContextualKeyword._from; + if (t.type === D.TokenType.comma) return !0; + if (s) { + let i = P.input.charCodeAt($.nextTokenStartSince.call(void 0, e + 4)); + return ( + i === lh.charCodes.quotationMark || i === lh.charCodes.apostrophe + ); + } + return !1; + } + function kh() { + $.eat.call(void 0, D.TokenType.comma) && Kl(); + } + function cr() { + ee.eatContextual.call(void 0, ke.ContextualKeyword._from) && + (De.parseExprAtom.call(void 0), gh()), + ee.semicolon.call(void 0); + } + Tt.parseExportFrom = cr; + function Tv() { + return P.isFlowEnabled + ? Ft.flowShouldParseExportStar.call(void 0) + : $.match.call(void 0, D.TokenType.star); + } + function kv() { + P.isFlowEnabled ? Ft.flowParseExportStar.call(void 0) : vh(); + } + function vh() { + ee.expect.call(void 0, D.TokenType.star), + ee.isContextual.call(void 0, ke.ContextualKeyword._as) ? vv() : cr(); + } + Tt.baseParseExportStar = vh; + function vv() { + $.next.call(void 0), + (P.state.tokens[P.state.tokens.length - 1].type = D.TokenType._as), + De.parseIdentifier.call(void 0), + kh(), + cr(); + } + function xv() { + return ( + (P.isTypeScriptEnabled && dt.tsIsDeclarationStart.call(void 0)) || + (P.isFlowEnabled && Ft.flowShouldParseExportDeclaration.call(void 0)) || + P.state.type === D.TokenType._var || + P.state.type === D.TokenType._const || + P.state.type === D.TokenType._let || + P.state.type === D.TokenType._function || + P.state.type === D.TokenType._class || + ee.isContextual.call(void 0, ke.ContextualKeyword._async) || + $.match.call(void 0, D.TokenType.at) + ); + } + function Kl() { + let e = !0; + for ( + ee.expect.call(void 0, D.TokenType.braceL); + !$.eat.call(void 0, D.TokenType.braceR) && !P.state.error; + + ) { + if (e) e = !1; + else if ( + (ee.expect.call(void 0, D.TokenType.comma), + $.eat.call(void 0, D.TokenType.braceR)) + ) + break; + gv(); + } + } + Tt.parseExportSpecifiers = Kl; + function gv() { + if (P.isTypeScriptEnabled) { + dt.tsParseExportSpecifier.call(void 0); + return; + } + De.parseIdentifier.call(void 0), + (P.state.tokens[P.state.tokens.length - 1].identifierRole = + $.IdentifierRole.ExportAccess), + ee.eatContextual.call(void 0, ke.ContextualKeyword._as) && + De.parseIdentifier.call(void 0); + } + function _v() { + let e = P.state.snapshot(); + return ( + ee.expectContextual.call(void 0, ke.ContextualKeyword._module), + ee.eatContextual.call(void 0, ke.ContextualKeyword._from) + ? ee.isContextual.call(void 0, ke.ContextualKeyword._from) + ? (P.state.restoreFromSnapshot(e), !0) + : (P.state.restoreFromSnapshot(e), !1) + : $.match.call(void 0, D.TokenType.comma) + ? (P.state.restoreFromSnapshot(e), !1) + : (P.state.restoreFromSnapshot(e), !0) + ); + } + function bv() { + ee.isContextual.call(void 0, ke.ContextualKeyword._module) && + _v() && + $.next.call(void 0); + } + function xh() { + if ( + P.isTypeScriptEnabled && + $.match.call(void 0, D.TokenType.name) && + $.lookaheadType.call(void 0) === D.TokenType.eq + ) { + dt.tsParseImportEqualsDeclaration.call(void 0); + return; + } + if ( + P.isTypeScriptEnabled && + ee.isContextual.call(void 0, ke.ContextualKeyword._type) + ) { + let e = $.lookaheadTypeAndKeyword.call(void 0); + if ( + e.type === D.TokenType.name && + e.contextualKeyword !== ke.ContextualKeyword._from + ) { + if ( + (ee.expectContextual.call(void 0, ke.ContextualKeyword._type), + $.lookaheadType.call(void 0) === D.TokenType.eq) + ) { + dt.tsParseImportEqualsDeclaration.call(void 0); + return; + } + } else + (e.type === D.TokenType.star || e.type === D.TokenType.braceL) && + ee.expectContextual.call(void 0, ke.ContextualKeyword._type); + } + $.match.call(void 0, D.TokenType.string) || + (bv(), + wv(), + ee.expectContextual.call(void 0, ke.ContextualKeyword._from)), + De.parseExprAtom.call(void 0), + gh(), + ee.semicolon.call(void 0); + } + Tt.parseImport = xh; + function Cv() { + return $.match.call(void 0, D.TokenType.name); + } + function uh() { + ks.parseImportedIdentifier.call(void 0); + } + function wv() { + P.isFlowEnabled && Ft.flowStartParseImportSpecifiers.call(void 0); + let e = !0; + if (!(Cv() && (uh(), !$.eat.call(void 0, D.TokenType.comma)))) { + if ($.match.call(void 0, D.TokenType.star)) { + $.next.call(void 0), + ee.expectContextual.call(void 0, ke.ContextualKeyword._as), + uh(); + return; + } + for ( + ee.expect.call(void 0, D.TokenType.braceL); + !$.eat.call(void 0, D.TokenType.braceR) && !P.state.error; + + ) { + if (e) e = !1; + else if ( + ($.eat.call(void 0, D.TokenType.colon) && + ee.unexpected.call( + void 0, + 'ES2015 named imports do not destructure. Use another statement for destructuring after the import.' + ), + ee.expect.call(void 0, D.TokenType.comma), + $.eat.call(void 0, D.TokenType.braceR)) + ) + break; + Sv(); + } + } + } + function Sv() { + if (P.isTypeScriptEnabled) { + dt.tsParseImportSpecifier.call(void 0); + return; + } + if (P.isFlowEnabled) { + Ft.flowParseImportSpecifier.call(void 0); + return; + } + ks.parseImportedIdentifier.call(void 0), + ee.isContextual.call(void 0, ke.ContextualKeyword._as) && + ((P.state.tokens[P.state.tokens.length - 1].identifierRole = + $.IdentifierRole.ImportAccess), + $.next.call(void 0), + ks.parseImportedIdentifier.call(void 0)); + } + function gh() { + ee.isContextual.call(void 0, ke.ContextualKeyword._assert) && + !ee.hasPrecedingLineBreak.call(void 0) && + ($.next.call(void 0), De.parseObj.call(void 0, !1, !1)); + } + }); + var Ch = Z((Wl) => { + 'use strict'; + Object.defineProperty(Wl, '__esModule', {value: !0}); + var _h = xt(), + bh = Qt(), + Hl = Zt(), + Iv = nr(); + function Ev() { + return ( + Hl.state.pos === 0 && + Hl.input.charCodeAt(0) === bh.charCodes.numberSign && + Hl.input.charCodeAt(1) === bh.charCodes.exclamationMark && + _h.skipLineComment.call(void 0, 2), + _h.nextToken.call(void 0), + Iv.parseTopLevel.call(void 0) + ); + } + Wl.parseFile = Ev; + }); + var Ul = Z((Ao) => { + 'use strict'; + Object.defineProperty(Ao, '__esModule', {value: !0}); + var Eo = Zt(), + Av = Ch(), + Gl = class { + constructor(t, s) { + (this.tokens = t), (this.scopes = s); + } + }; + Ao.File = Gl; + function Pv(e, t, s, i) { + if (i && s) + throw new Error('Cannot combine flow and typescript plugins.'); + Eo.initParser.call(void 0, e, t, s, i); + let r = Av.parseFile.call(void 0); + if (Eo.state.error) throw Eo.augmentError.call(void 0, Eo.state.error); + return r; + } + Ao.parse = Pv; + }); + var wh = Z((zl) => { + 'use strict'; + Object.defineProperty(zl, '__esModule', {value: !0}); + var Nv = It(); + function Rv(e) { + let t = e.currentIndex(), + s = 0, + i = e.currentToken(); + do { + let r = e.tokens[t]; + if ( + (r.isOptionalChainStart && s++, + r.isOptionalChainEnd && s--, + (s += r.numNullishCoalesceStarts), + (s -= r.numNullishCoalesceEnds), + r.contextualKeyword === Nv.ContextualKeyword._await && + r.identifierRole == null && + r.scopeDepth === i.scopeDepth) + ) + return !0; + t += 1; + } while (s > 0 && t < e.tokens.length); + return !1; + } + zl.default = Rv; + }); + var Sh = Z((Yl) => { + 'use strict'; + Object.defineProperty(Yl, '__esModule', {value: !0}); + function Lv(e) { + return e && e.__esModule ? e : {default: e}; + } + var Po = be(), + Ov = wh(), + Dv = Lv(Ov), + Xl = class e { + __init() { + this.resultCode = ''; + } + __init2() { + this.resultMappings = new Array(this.tokens.length); + } + __init3() { + this.tokenIndex = 0; + } + constructor(t, s, i, r, a) { + (this.code = t), + (this.tokens = s), + (this.isFlowEnabled = i), + (this.disableESTransforms = r), + (this.helperManager = a), + e.prototype.__init.call(this), + e.prototype.__init2.call(this), + e.prototype.__init3.call(this); + } + snapshot() { + return {resultCode: this.resultCode, tokenIndex: this.tokenIndex}; + } + restoreToSnapshot(t) { + (this.resultCode = t.resultCode), (this.tokenIndex = t.tokenIndex); + } + dangerouslyGetAndRemoveCodeSinceSnapshot(t) { + let s = this.resultCode.slice(t.resultCode.length); + return (this.resultCode = t.resultCode), s; + } + reset() { + (this.resultCode = ''), + (this.resultMappings = new Array(this.tokens.length)), + (this.tokenIndex = 0); + } + matchesContextualAtIndex(t, s) { + return ( + this.matches1AtIndex(t, Po.TokenType.name) && + this.tokens[t].contextualKeyword === s + ); + } + identifierNameAtIndex(t) { + return this.identifierNameForToken(this.tokens[t]); + } + identifierNameAtRelativeIndex(t) { + return this.identifierNameForToken(this.tokenAtRelativeIndex(t)); + } + identifierName() { + return this.identifierNameForToken(this.currentToken()); + } + identifierNameForToken(t) { + return this.code.slice(t.start, t.end); + } + rawCodeForToken(t) { + return this.code.slice(t.start, t.end); + } + stringValueAtIndex(t) { + return this.stringValueForToken(this.tokens[t]); + } + stringValue() { + return this.stringValueForToken(this.currentToken()); + } + stringValueForToken(t) { + return this.code.slice(t.start + 1, t.end - 1); + } + matches1AtIndex(t, s) { + return this.tokens[t].type === s; + } + matches2AtIndex(t, s, i) { + return this.tokens[t].type === s && this.tokens[t + 1].type === i; + } + matches3AtIndex(t, s, i, r) { + return ( + this.tokens[t].type === s && + this.tokens[t + 1].type === i && + this.tokens[t + 2].type === r + ); + } + matches1(t) { + return this.tokens[this.tokenIndex].type === t; + } + matches2(t, s) { + return ( + this.tokens[this.tokenIndex].type === t && + this.tokens[this.tokenIndex + 1].type === s + ); + } + matches3(t, s, i) { + return ( + this.tokens[this.tokenIndex].type === t && + this.tokens[this.tokenIndex + 1].type === s && + this.tokens[this.tokenIndex + 2].type === i + ); + } + matches4(t, s, i, r) { + return ( + this.tokens[this.tokenIndex].type === t && + this.tokens[this.tokenIndex + 1].type === s && + this.tokens[this.tokenIndex + 2].type === i && + this.tokens[this.tokenIndex + 3].type === r + ); + } + matches5(t, s, i, r, a) { + return ( + this.tokens[this.tokenIndex].type === t && + this.tokens[this.tokenIndex + 1].type === s && + this.tokens[this.tokenIndex + 2].type === i && + this.tokens[this.tokenIndex + 3].type === r && + this.tokens[this.tokenIndex + 4].type === a + ); + } + matchesContextual(t) { + return this.matchesContextualAtIndex(this.tokenIndex, t); + } + matchesContextIdAndLabel(t, s) { + return this.matches1(t) && this.currentToken().contextId === s; + } + previousWhitespaceAndComments() { + let t = this.code.slice( + this.tokenIndex > 0 ? this.tokens[this.tokenIndex - 1].end : 0, + this.tokenIndex < this.tokens.length + ? this.tokens[this.tokenIndex].start + : this.code.length + ); + return this.isFlowEnabled && (t = t.replace(/@flow/g, '')), t; + } + replaceToken(t) { + (this.resultCode += this.previousWhitespaceAndComments()), + this.appendTokenPrefix(), + (this.resultMappings[this.tokenIndex] = this.resultCode.length), + (this.resultCode += t), + this.appendTokenSuffix(), + this.tokenIndex++; + } + replaceTokenTrimmingLeftWhitespace(t) { + (this.resultCode += this.previousWhitespaceAndComments().replace( + /[^\r\n]/g, + '' + )), + this.appendTokenPrefix(), + (this.resultMappings[this.tokenIndex] = this.resultCode.length), + (this.resultCode += t), + this.appendTokenSuffix(), + this.tokenIndex++; + } + removeInitialToken() { + this.replaceToken(''); + } + removeToken() { + this.replaceTokenTrimmingLeftWhitespace(''); + } + removeBalancedCode() { + let t = 0; + for (; !this.isAtEnd(); ) { + if (this.matches1(Po.TokenType.braceL)) t++; + else if (this.matches1(Po.TokenType.braceR)) { + if (t === 0) return; + t--; + } + this.removeToken(); + } + } + copyExpectedToken(t) { + if (this.tokens[this.tokenIndex].type !== t) + throw new Error(`Expected token ${t}`); + this.copyToken(); + } + copyToken() { + (this.resultCode += this.previousWhitespaceAndComments()), + this.appendTokenPrefix(), + (this.resultMappings[this.tokenIndex] = this.resultCode.length), + (this.resultCode += this.code.slice( + this.tokens[this.tokenIndex].start, + this.tokens[this.tokenIndex].end + )), + this.appendTokenSuffix(), + this.tokenIndex++; + } + copyTokenWithPrefix(t) { + (this.resultCode += this.previousWhitespaceAndComments()), + this.appendTokenPrefix(), + (this.resultCode += t), + (this.resultMappings[this.tokenIndex] = this.resultCode.length), + (this.resultCode += this.code.slice( + this.tokens[this.tokenIndex].start, + this.tokens[this.tokenIndex].end + )), + this.appendTokenSuffix(), + this.tokenIndex++; + } + appendTokenPrefix() { + let t = this.currentToken(); + if ( + ((t.numNullishCoalesceStarts || t.isOptionalChainStart) && + (t.isAsyncOperation = Dv.default.call(void 0, this)), + !this.disableESTransforms) + ) { + if (t.numNullishCoalesceStarts) + for (let s = 0; s < t.numNullishCoalesceStarts; s++) + t.isAsyncOperation + ? ((this.resultCode += 'await '), + (this.resultCode += this.helperManager.getHelperName( + 'asyncNullishCoalesce' + ))) + : (this.resultCode += + this.helperManager.getHelperName('nullishCoalesce')), + (this.resultCode += '('); + t.isOptionalChainStart && + (t.isAsyncOperation && (this.resultCode += 'await '), + this.tokenIndex > 0 && + this.tokenAtRelativeIndex(-1).type === Po.TokenType._delete + ? t.isAsyncOperation + ? (this.resultCode += this.helperManager.getHelperName( + 'asyncOptionalChainDelete' + )) + : (this.resultCode += this.helperManager.getHelperName( + 'optionalChainDelete' + )) + : t.isAsyncOperation + ? (this.resultCode += + this.helperManager.getHelperName('asyncOptionalChain')) + : (this.resultCode += + this.helperManager.getHelperName('optionalChain')), + (this.resultCode += '([')); + } + } + appendTokenSuffix() { + let t = this.currentToken(); + if ( + (t.isOptionalChainEnd && + !this.disableESTransforms && + (this.resultCode += '])'), + t.numNullishCoalesceEnds && !this.disableESTransforms) + ) + for (let s = 0; s < t.numNullishCoalesceEnds; s++) + this.resultCode += '))'; + } + appendCode(t) { + this.resultCode += t; + } + currentToken() { + return this.tokens[this.tokenIndex]; + } + currentTokenCode() { + let t = this.currentToken(); + return this.code.slice(t.start, t.end); + } + tokenAtRelativeIndex(t) { + return this.tokens[this.tokenIndex + t]; + } + currentIndex() { + return this.tokenIndex; + } + nextToken() { + if (this.tokenIndex === this.tokens.length) + throw new Error('Unexpectedly reached end of input.'); + this.tokenIndex++; + } + previousToken() { + this.tokenIndex--; + } + finish() { + if (this.tokenIndex !== this.tokens.length) + throw new Error( + 'Tried to finish processing tokens before reaching the end.' + ); + return ( + (this.resultCode += this.previousWhitespaceAndComments()), + {code: this.resultCode, mappings: this.resultMappings} + ); + } + isAtEnd() { + return this.tokenIndex === this.tokens.length; + } + }; + Yl.default = Xl; + }); + var Ah = Z((Ql) => { + 'use strict'; + Object.defineProperty(Ql, '__esModule', {value: !0}); + var Ih = It(), + Ne = be(); + function Mv(e, t, s, i) { + let r = t.snapshot(), + a = Fv(t), + u = [], + d = [], + y = [], + g = null, + L = [], + p = [], + h = t.currentToken().contextId; + if (h == null) + throw new Error( + 'Expected non-null class context ID on class open-brace.' + ); + for (t.nextToken(); !t.matchesContextIdAndLabel(Ne.TokenType.braceR, h); ) + if ( + t.matchesContextual(Ih.ContextualKeyword._constructor) && + !t.currentToken().isType + ) + ({constructorInitializerStatements: u, constructorInsertPos: g} = + Eh(t)); + else if (t.matches1(Ne.TokenType.semi)) + i || p.push({start: t.currentIndex(), end: t.currentIndex() + 1}), + t.nextToken(); + else if (t.currentToken().isType) t.nextToken(); + else { + let T = t.currentIndex(), + x = !1, + w = !1, + S = !1; + for (; No(t.currentToken()); ) + t.matches1(Ne.TokenType._static) && (x = !0), + t.matches1(Ne.TokenType.hash) && (w = !0), + (t.matches1(Ne.TokenType._declare) || + t.matches1(Ne.TokenType._abstract)) && + (S = !0), + t.nextToken(); + if (x && t.matches1(Ne.TokenType.braceL)) { + Jl(t, h); + continue; + } + if (w) { + Jl(t, h); + continue; + } + if ( + t.matchesContextual(Ih.ContextualKeyword._constructor) && + !t.currentToken().isType + ) { + ({constructorInitializerStatements: u, constructorInsertPos: g} = + Eh(t)); + continue; + } + let A = t.currentIndex(); + if ( + (Bv(t), + t.matches1(Ne.TokenType.lessThan) || + t.matches1(Ne.TokenType.parenL)) + ) { + Jl(t, h); + continue; + } + for (; t.currentToken().isType; ) t.nextToken(); + if (t.matches1(Ne.TokenType.eq)) { + let U = t.currentIndex(), + M = t.currentToken().rhsEndIndex; + if (M == null) + throw new Error( + 'Expected rhsEndIndex on class field assignment.' + ); + for (t.nextToken(); t.currentIndex() < M; ) e.processToken(); + let c; + x + ? ((c = s.claimFreeName('__initStatic')), y.push(c)) + : ((c = s.claimFreeName('__init')), d.push(c)), + L.push({ + initializerName: c, + equalsIndex: U, + start: A, + end: t.currentIndex(), + }); + } else (!i || S) && p.push({start: T, end: t.currentIndex()}); + } + return ( + t.restoreToSnapshot(r), + i + ? { + headerInfo: a, + constructorInitializerStatements: u, + instanceInitializerNames: [], + staticInitializerNames: [], + constructorInsertPos: g, + fields: [], + rangesToRemove: p, + } + : { + headerInfo: a, + constructorInitializerStatements: u, + instanceInitializerNames: d, + staticInitializerNames: y, + constructorInsertPos: g, + fields: L, + rangesToRemove: p, + } + ); + } + Ql.default = Mv; + function Jl(e, t) { + for (e.nextToken(); e.currentToken().contextId !== t; ) e.nextToken(); + for (; No(e.tokenAtRelativeIndex(-1)); ) e.previousToken(); + } + function Fv(e) { + let t = e.currentToken(), + s = t.contextId; + if (s == null) throw new Error('Expected context ID on class token.'); + let i = t.isExpression; + if (i == null) throw new Error('Expected isExpression on class token.'); + let r = null, + a = !1; + for ( + e.nextToken(), + e.matches1(Ne.TokenType.name) && (r = e.identifierName()); + !e.matchesContextIdAndLabel(Ne.TokenType.braceL, s); + + ) + e.matches1(Ne.TokenType._extends) && + !e.currentToken().isType && + (a = !0), + e.nextToken(); + return {isExpression: i, className: r, hasSuperclass: a}; + } + function Eh(e) { + let t = []; + e.nextToken(); + let s = e.currentToken().contextId; + if (s == null) + throw new Error( + 'Expected context ID on open-paren starting constructor params.' + ); + for (; !e.matchesContextIdAndLabel(Ne.TokenType.parenR, s); ) + if (e.currentToken().contextId === s) { + if ((e.nextToken(), No(e.currentToken()))) { + for (e.nextToken(); No(e.currentToken()); ) e.nextToken(); + let a = e.currentToken(); + if (a.type !== Ne.TokenType.name) + throw new Error( + 'Expected identifier after access modifiers in constructor arg.' + ); + let u = e.identifierNameForToken(a); + t.push(`this.${u} = ${u}`); + } + } else e.nextToken(); + e.nextToken(); + let i = e.currentIndex(), + r = !1; + for (; !e.matchesContextIdAndLabel(Ne.TokenType.braceR, s); ) { + if (!r && e.matches2(Ne.TokenType._super, Ne.TokenType.parenL)) { + e.nextToken(); + let a = e.currentToken().contextId; + if (a == null) + throw new Error('Expected a context ID on the super call'); + for (; !e.matchesContextIdAndLabel(Ne.TokenType.parenR, a); ) + e.nextToken(); + (i = e.currentIndex()), (r = !0); + } + e.nextToken(); + } + return ( + e.nextToken(), + {constructorInitializerStatements: t, constructorInsertPos: i} + ); + } + function No(e) { + return [ + Ne.TokenType._async, + Ne.TokenType._get, + Ne.TokenType._set, + Ne.TokenType.plus, + Ne.TokenType.minus, + Ne.TokenType._readonly, + Ne.TokenType._static, + Ne.TokenType._public, + Ne.TokenType._private, + Ne.TokenType._protected, + Ne.TokenType._override, + Ne.TokenType._abstract, + Ne.TokenType.star, + Ne.TokenType._declare, + Ne.TokenType.hash, + ].includes(e.type); + } + function Bv(e) { + if (e.matches1(Ne.TokenType.bracketL)) { + let s = e.currentToken().contextId; + if (s == null) + throw new Error( + 'Expected class context ID on computed name open bracket.' + ); + for (; !e.matchesContextIdAndLabel(Ne.TokenType.bracketR, s); ) + e.nextToken(); + e.nextToken(); + } else e.nextToken(); + } + }); + var ec = Z((Zl) => { + 'use strict'; + Object.defineProperty(Zl, '__esModule', {value: !0}); + var Ph = be(); + function Vv(e) { + if ( + (e.removeInitialToken(), + e.removeToken(), + e.removeToken(), + e.removeToken(), + e.matches1(Ph.TokenType.parenL)) + ) + e.removeToken(), e.removeToken(), e.removeToken(); + else + for (; e.matches1(Ph.TokenType.dot); ) e.removeToken(), e.removeToken(); + } + Zl.default = Vv; + }); + var tc = Z((Ro) => { + 'use strict'; + Object.defineProperty(Ro, '__esModule', {value: !0}); + var jv = xt(), + $v = be(), + qv = {typeDeclarations: new Set(), valueDeclarations: new Set()}; + Ro.EMPTY_DECLARATION_INFO = qv; + function Kv(e) { + let t = new Set(), + s = new Set(); + for (let i = 0; i < e.tokens.length; i++) { + let r = e.tokens[i]; + r.type === $v.TokenType.name && + jv.isTopLevelDeclaration.call(void 0, r) && + (r.isType + ? t.add(e.identifierNameForToken(r)) + : s.add(e.identifierNameForToken(r))); + } + return {typeDeclarations: t, valueDeclarations: s}; + } + Ro.default = Kv; + }); + var sc = Z((nc) => { + 'use strict'; + Object.defineProperty(nc, '__esModule', {value: !0}); + var Uv = It(), + Nh = be(); + function Hv(e) { + e.matches2(Nh.TokenType.name, Nh.TokenType.braceL) && + e.matchesContextual(Uv.ContextualKeyword._assert) && + (e.removeToken(), + e.removeToken(), + e.removeBalancedCode(), + e.removeToken()); + } + nc.removeMaybeImportAssertion = Hv; + }); + var rc = Z((ic) => { + 'use strict'; + Object.defineProperty(ic, '__esModule', {value: !0}); + var Rh = be(); + function Wv(e, t, s) { + if (!e) return !1; + let i = t.currentToken(); + if (i.rhsEndIndex == null) + throw new Error('Expected non-null rhsEndIndex on export token.'); + let r = i.rhsEndIndex - t.currentIndex(); + if ( + r !== 3 && + !(r === 4 && t.matches1AtIndex(i.rhsEndIndex - 1, Rh.TokenType.semi)) + ) + return !1; + let a = t.tokenAtRelativeIndex(2); + if (a.type !== Rh.TokenType.name) return !1; + let u = t.identifierNameForToken(a); + return s.typeDeclarations.has(u) && !s.valueDeclarations.has(u); + } + ic.default = Wv; + }); + var Oh = Z((ac) => { + 'use strict'; + Object.defineProperty(ac, '__esModule', {value: !0}); + function ur(e) { + return e && e.__esModule ? e : {default: e}; + } + var Lo = xt(), + Ls = It(), + N = be(), + Gv = ec(), + zv = ur(Gv), + Lh = tc(), + Xv = ur(Lh), + Yv = Wi(), + Jv = ur(Yv), + Oo = sc(), + Qv = rc(), + Zv = ur(Qv), + ex = hn(), + tx = ur(ex), + oc = class e extends tx.default { + __init() { + this.hadExport = !1; + } + __init2() { + this.hadNamedExport = !1; + } + __init3() { + this.hadDefaultExport = !1; + } + constructor(t, s, i, r, a, u, d, y, g, L) { + super(), + (this.rootTransformer = t), + (this.tokens = s), + (this.importProcessor = i), + (this.nameManager = r), + (this.helperManager = a), + (this.reactHotLoaderTransformer = u), + (this.enableLegacyBabel5ModuleInterop = d), + (this.enableLegacyTypeScriptModuleInterop = y), + (this.isTypeScriptTransformEnabled = g), + (this.preserveDynamicImport = L), + e.prototype.__init.call(this), + e.prototype.__init2.call(this), + e.prototype.__init3.call(this), + (this.declarationInfo = g + ? Xv.default.call(void 0, s) + : Lh.EMPTY_DECLARATION_INFO); + } + getPrefixCode() { + let t = ''; + return ( + this.hadExport && + (t += + 'Object.defineProperty(exports, "__esModule", {value: true});'), + t + ); + } + getSuffixCode() { + return this.enableLegacyBabel5ModuleInterop && + this.hadDefaultExport && + !this.hadNamedExport + ? ` +module.exports = exports.default; +` + : ''; + } + process() { + return this.tokens.matches3( + N.TokenType._import, + N.TokenType.name, + N.TokenType.eq + ) + ? this.processImportEquals() + : this.tokens.matches1(N.TokenType._import) + ? (this.processImport(), !0) + : this.tokens.matches2(N.TokenType._export, N.TokenType.eq) + ? (this.tokens.replaceToken('module.exports'), !0) + : this.tokens.matches1(N.TokenType._export) && + !this.tokens.currentToken().isType + ? ((this.hadExport = !0), this.processExport()) + : this.tokens.matches2(N.TokenType.name, N.TokenType.postIncDec) && + this.processPostIncDec() + ? !0 + : this.tokens.matches1(N.TokenType.name) || + this.tokens.matches1(N.TokenType.jsxName) + ? this.processIdentifier() + : this.tokens.matches1(N.TokenType.eq) + ? this.processAssignment() + : this.tokens.matches1(N.TokenType.assign) + ? this.processComplexAssignment() + : this.tokens.matches1(N.TokenType.preIncDec) + ? this.processPreIncDec() + : !1; + } + processImportEquals() { + let t = this.tokens.identifierNameAtIndex( + this.tokens.currentIndex() + 1 + ); + return ( + this.importProcessor.isTypeName(t) + ? zv.default.call(void 0, this.tokens) + : this.tokens.replaceToken('const'), + !0 + ); + } + processImport() { + if (this.tokens.matches2(N.TokenType._import, N.TokenType.parenL)) { + if (this.preserveDynamicImport) { + this.tokens.copyToken(); + return; + } + let s = this.enableLegacyTypeScriptModuleInterop + ? '' + : `${this.helperManager.getHelperName( + 'interopRequireWildcard' + )}(`; + this.tokens.replaceToken( + `Promise.resolve().then(() => ${s}require` + ); + let i = this.tokens.currentToken().contextId; + if (i == null) + throw new Error( + 'Expected context ID on dynamic import invocation.' + ); + for ( + this.tokens.copyToken(); + !this.tokens.matchesContextIdAndLabel(N.TokenType.parenR, i); + + ) + this.rootTransformer.processToken(); + this.tokens.replaceToken(s ? ')))' : '))'); + return; + } + if (this.removeImportAndDetectIfType()) this.tokens.removeToken(); + else { + let s = this.tokens.stringValue(); + this.tokens.replaceTokenTrimmingLeftWhitespace( + this.importProcessor.claimImportCode(s) + ), + this.tokens.appendCode(this.importProcessor.claimImportCode(s)); + } + Oo.removeMaybeImportAssertion.call(void 0, this.tokens), + this.tokens.matches1(N.TokenType.semi) && this.tokens.removeToken(); + } + removeImportAndDetectIfType() { + if ( + (this.tokens.removeInitialToken(), + this.tokens.matchesContextual(Ls.ContextualKeyword._type) && + !this.tokens.matches1AtIndex( + this.tokens.currentIndex() + 1, + N.TokenType.comma + ) && + !this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 1, + Ls.ContextualKeyword._from + )) + ) + return this.removeRemainingImport(), !0; + if ( + this.tokens.matches1(N.TokenType.name) || + this.tokens.matches1(N.TokenType.star) + ) + return this.removeRemainingImport(), !1; + if (this.tokens.matches1(N.TokenType.string)) return !1; + let t = !1; + for (; !this.tokens.matches1(N.TokenType.string); ) + ((!t && this.tokens.matches1(N.TokenType.braceL)) || + this.tokens.matches1(N.TokenType.comma)) && + (this.tokens.removeToken(), + (this.tokens.matches2(N.TokenType.name, N.TokenType.comma) || + this.tokens.matches2(N.TokenType.name, N.TokenType.braceR) || + this.tokens.matches4( + N.TokenType.name, + N.TokenType.name, + N.TokenType.name, + N.TokenType.comma + ) || + this.tokens.matches4( + N.TokenType.name, + N.TokenType.name, + N.TokenType.name, + N.TokenType.braceR + )) && + (t = !0)), + this.tokens.removeToken(); + return !t; + } + removeRemainingImport() { + for (; !this.tokens.matches1(N.TokenType.string); ) + this.tokens.removeToken(); + } + processIdentifier() { + let t = this.tokens.currentToken(); + if (t.shadowsGlobal) return !1; + if (t.identifierRole === Lo.IdentifierRole.ObjectShorthand) + return this.processObjectShorthand(); + if (t.identifierRole !== Lo.IdentifierRole.Access) return !1; + let s = this.importProcessor.getIdentifierReplacement( + this.tokens.identifierNameForToken(t) + ); + if (!s) return !1; + let i = this.tokens.currentIndex() + 1; + for ( + ; + i < this.tokens.tokens.length && + this.tokens.tokens[i].type === N.TokenType.parenR; + + ) + i++; + return ( + this.tokens.tokens[i].type === N.TokenType.parenL + ? this.tokens.tokenAtRelativeIndex(1).type === + N.TokenType.parenL && + this.tokens.tokenAtRelativeIndex(-1).type !== N.TokenType._new + ? (this.tokens.replaceToken(`${s}.call(void 0, `), + this.tokens.removeToken(), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(N.TokenType.parenR)) + : this.tokens.replaceToken(`(0, ${s})`) + : this.tokens.replaceToken(s), + !0 + ); + } + processObjectShorthand() { + let t = this.tokens.identifierName(), + s = this.importProcessor.getIdentifierReplacement(t); + return s ? (this.tokens.replaceToken(`${t}: ${s}`), !0) : !1; + } + processExport() { + if ( + this.tokens.matches2(N.TokenType._export, N.TokenType._enum) || + this.tokens.matches3( + N.TokenType._export, + N.TokenType._const, + N.TokenType._enum + ) + ) + return !1; + if (this.tokens.matches2(N.TokenType._export, N.TokenType._default)) + return ( + (this.hadDefaultExport = !0), + this.tokens.matches3( + N.TokenType._export, + N.TokenType._default, + N.TokenType._enum + ) + ? !1 + : (this.processExportDefault(), !0) + ); + if ( + ((this.hadNamedExport = !0), + this.tokens.matches2(N.TokenType._export, N.TokenType._var) || + this.tokens.matches2(N.TokenType._export, N.TokenType._let) || + this.tokens.matches2(N.TokenType._export, N.TokenType._const)) + ) + return this.processExportVar(), !0; + if ( + this.tokens.matches2(N.TokenType._export, N.TokenType._function) || + this.tokens.matches3( + N.TokenType._export, + N.TokenType.name, + N.TokenType._function + ) + ) + return this.processExportFunction(), !0; + if ( + this.tokens.matches2(N.TokenType._export, N.TokenType._class) || + this.tokens.matches3( + N.TokenType._export, + N.TokenType._abstract, + N.TokenType._class + ) || + this.tokens.matches2(N.TokenType._export, N.TokenType.at) + ) + return this.processExportClass(), !0; + if (this.tokens.matches2(N.TokenType._export, N.TokenType.braceL)) + return this.processExportBindings(), !0; + if (this.tokens.matches2(N.TokenType._export, N.TokenType.star)) + return this.processExportStar(), !0; + if ( + this.tokens.matches2(N.TokenType._export, N.TokenType.name) && + this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 1, + Ls.ContextualKeyword._type + ) + ) { + if ( + (this.tokens.removeInitialToken(), + this.tokens.removeToken(), + this.tokens.matches1(N.TokenType.braceL)) + ) { + for (; !this.tokens.matches1(N.TokenType.braceR); ) + this.tokens.removeToken(); + this.tokens.removeToken(); + } else + this.tokens.removeToken(), + this.tokens.matches1(N.TokenType._as) && + (this.tokens.removeToken(), this.tokens.removeToken()); + return ( + this.tokens.matchesContextual(Ls.ContextualKeyword._from) && + this.tokens.matches1AtIndex( + this.tokens.currentIndex() + 1, + N.TokenType.string + ) && + (this.tokens.removeToken(), + this.tokens.removeToken(), + Oo.removeMaybeImportAssertion.call(void 0, this.tokens)), + !0 + ); + } else throw new Error('Unrecognized export syntax.'); + } + processAssignment() { + let t = this.tokens.currentIndex(), + s = this.tokens.tokens[t - 1]; + if ( + s.isType || + s.type !== N.TokenType.name || + s.shadowsGlobal || + (t >= 2 && this.tokens.matches1AtIndex(t - 2, N.TokenType.dot)) || + (t >= 2 && + [N.TokenType._var, N.TokenType._let, N.TokenType._const].includes( + this.tokens.tokens[t - 2].type + )) + ) + return !1; + let i = this.importProcessor.resolveExportBinding( + this.tokens.identifierNameForToken(s) + ); + return i + ? (this.tokens.copyToken(), this.tokens.appendCode(` ${i} =`), !0) + : !1; + } + processComplexAssignment() { + let t = this.tokens.currentIndex(), + s = this.tokens.tokens[t - 1]; + if ( + s.type !== N.TokenType.name || + s.shadowsGlobal || + (t >= 2 && this.tokens.matches1AtIndex(t - 2, N.TokenType.dot)) + ) + return !1; + let i = this.importProcessor.resolveExportBinding( + this.tokens.identifierNameForToken(s) + ); + return i + ? (this.tokens.appendCode(` = ${i}`), this.tokens.copyToken(), !0) + : !1; + } + processPreIncDec() { + let t = this.tokens.currentIndex(), + s = this.tokens.tokens[t + 1]; + if ( + s.type !== N.TokenType.name || + s.shadowsGlobal || + (t + 2 < this.tokens.tokens.length && + (this.tokens.matches1AtIndex(t + 2, N.TokenType.dot) || + this.tokens.matches1AtIndex(t + 2, N.TokenType.bracketL) || + this.tokens.matches1AtIndex(t + 2, N.TokenType.parenL))) + ) + return !1; + let i = this.tokens.identifierNameForToken(s), + r = this.importProcessor.resolveExportBinding(i); + return r + ? (this.tokens.appendCode(`${r} = `), this.tokens.copyToken(), !0) + : !1; + } + processPostIncDec() { + let t = this.tokens.currentIndex(), + s = this.tokens.tokens[t], + i = this.tokens.tokens[t + 1]; + if ( + s.type !== N.TokenType.name || + s.shadowsGlobal || + (t >= 1 && this.tokens.matches1AtIndex(t - 1, N.TokenType.dot)) + ) + return !1; + let r = this.tokens.identifierNameForToken(s), + a = this.importProcessor.resolveExportBinding(r); + if (!a) return !1; + let u = this.tokens.rawCodeForToken(i), + d = this.importProcessor.getIdentifierReplacement(r) || r; + if (u === '++') + this.tokens.replaceToken(`(${d} = ${a} = ${d} + 1, ${d} - 1)`); + else if (u === '--') + this.tokens.replaceToken(`(${d} = ${a} = ${d} - 1, ${d} + 1)`); + else throw new Error(`Unexpected operator: ${u}`); + return this.tokens.removeToken(), !0; + } + processExportDefault() { + if ( + this.tokens.matches4( + N.TokenType._export, + N.TokenType._default, + N.TokenType._function, + N.TokenType.name + ) || + (this.tokens.matches5( + N.TokenType._export, + N.TokenType._default, + N.TokenType.name, + N.TokenType._function, + N.TokenType.name + ) && + this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 2, + Ls.ContextualKeyword._async + )) + ) { + this.tokens.removeInitialToken(), this.tokens.removeToken(); + let t = this.processNamedFunction(); + this.tokens.appendCode(` exports.default = ${t};`); + } else if ( + this.tokens.matches4( + N.TokenType._export, + N.TokenType._default, + N.TokenType._class, + N.TokenType.name + ) || + this.tokens.matches5( + N.TokenType._export, + N.TokenType._default, + N.TokenType._abstract, + N.TokenType._class, + N.TokenType.name + ) || + this.tokens.matches3( + N.TokenType._export, + N.TokenType._default, + N.TokenType.at + ) + ) { + this.tokens.removeInitialToken(), + this.tokens.removeToken(), + this.copyDecorators(), + this.tokens.matches1(N.TokenType._abstract) && + this.tokens.removeToken(); + let t = this.rootTransformer.processNamedClass(); + this.tokens.appendCode(` exports.default = ${t};`); + } else if ( + Zv.default.call( + void 0, + this.isTypeScriptTransformEnabled, + this.tokens, + this.declarationInfo + ) + ) + this.tokens.removeInitialToken(), + this.tokens.removeToken(), + this.tokens.removeToken(); + else if (this.reactHotLoaderTransformer) { + let t = this.nameManager.claimFreeName('_default'); + this.tokens.replaceToken(`let ${t}; exports.`), + this.tokens.copyToken(), + this.tokens.appendCode(` = ${t} =`), + this.reactHotLoaderTransformer.setExtractedDefaultExportName(t); + } else + this.tokens.replaceToken('exports.'), + this.tokens.copyToken(), + this.tokens.appendCode(' ='); + } + copyDecorators() { + for (; this.tokens.matches1(N.TokenType.at); ) + if ( + (this.tokens.copyToken(), + this.tokens.matches1(N.TokenType.parenL)) + ) + this.tokens.copyExpectedToken(N.TokenType.parenL), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(N.TokenType.parenR); + else { + for ( + this.tokens.copyExpectedToken(N.TokenType.name); + this.tokens.matches1(N.TokenType.dot); + + ) + this.tokens.copyExpectedToken(N.TokenType.dot), + this.tokens.copyExpectedToken(N.TokenType.name); + this.tokens.matches1(N.TokenType.parenL) && + (this.tokens.copyExpectedToken(N.TokenType.parenL), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(N.TokenType.parenR)); + } + } + processExportVar() { + this.isSimpleExportVar() + ? this.processSimpleExportVar() + : this.processComplexExportVar(); + } + isSimpleExportVar() { + let t = this.tokens.currentIndex(); + if ((t++, t++, !this.tokens.matches1AtIndex(t, N.TokenType.name))) + return !1; + for ( + t++; + t < this.tokens.tokens.length && this.tokens.tokens[t].isType; + + ) + t++; + return !!this.tokens.matches1AtIndex(t, N.TokenType.eq); + } + processSimpleExportVar() { + this.tokens.removeInitialToken(), this.tokens.copyToken(); + let t = this.tokens.identifierName(); + for (; !this.tokens.matches1(N.TokenType.eq); ) + this.rootTransformer.processToken(); + let s = this.tokens.currentToken().rhsEndIndex; + if (s == null) throw new Error('Expected = token with an end index.'); + for (; this.tokens.currentIndex() < s; ) + this.rootTransformer.processToken(); + this.tokens.appendCode(`; exports.${t} = ${t}`); + } + processComplexExportVar() { + this.tokens.removeInitialToken(), this.tokens.removeToken(); + let t = this.tokens.matches1(N.TokenType.braceL); + t && this.tokens.appendCode('('); + let s = 0; + for (;;) + if ( + this.tokens.matches1(N.TokenType.braceL) || + this.tokens.matches1(N.TokenType.dollarBraceL) || + this.tokens.matches1(N.TokenType.bracketL) + ) + s++, this.tokens.copyToken(); + else if ( + this.tokens.matches1(N.TokenType.braceR) || + this.tokens.matches1(N.TokenType.bracketR) + ) + s--, this.tokens.copyToken(); + else { + if ( + s === 0 && + !this.tokens.matches1(N.TokenType.name) && + !this.tokens.currentToken().isType + ) + break; + if (this.tokens.matches1(N.TokenType.eq)) { + let i = this.tokens.currentToken().rhsEndIndex; + if (i == null) + throw new Error('Expected = token with an end index.'); + for (; this.tokens.currentIndex() < i; ) + this.rootTransformer.processToken(); + } else { + let i = this.tokens.currentToken(); + if (Lo.isDeclaration.call(void 0, i)) { + let r = this.tokens.identifierName(), + a = this.importProcessor.getIdentifierReplacement(r); + if (a === null) + throw new Error( + `Expected a replacement for ${r} in \`export var\` syntax.` + ); + Lo.isObjectShorthandDeclaration.call(void 0, i) && + (a = `${r}: ${a}`), + this.tokens.replaceToken(a); + } else this.rootTransformer.processToken(); + } + } + if (t) { + let i = this.tokens.currentToken().rhsEndIndex; + if (i == null) + throw new Error('Expected = token with an end index.'); + for (; this.tokens.currentIndex() < i; ) + this.rootTransformer.processToken(); + this.tokens.appendCode(')'); + } + } + processExportFunction() { + this.tokens.replaceToken(''); + let t = this.processNamedFunction(); + this.tokens.appendCode(` exports.${t} = ${t};`); + } + processNamedFunction() { + if (this.tokens.matches1(N.TokenType._function)) + this.tokens.copyToken(); + else if ( + this.tokens.matches2(N.TokenType.name, N.TokenType._function) + ) { + if (!this.tokens.matchesContextual(Ls.ContextualKeyword._async)) + throw new Error('Expected async keyword in function export.'); + this.tokens.copyToken(), this.tokens.copyToken(); + } + if ( + (this.tokens.matches1(N.TokenType.star) && this.tokens.copyToken(), + !this.tokens.matches1(N.TokenType.name)) + ) + throw new Error('Expected identifier for exported function name.'); + let t = this.tokens.identifierName(); + if ((this.tokens.copyToken(), this.tokens.currentToken().isType)) + for ( + this.tokens.removeInitialToken(); + this.tokens.currentToken().isType; + + ) + this.tokens.removeToken(); + return ( + this.tokens.copyExpectedToken(N.TokenType.parenL), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(N.TokenType.parenR), + this.rootTransformer.processPossibleTypeRange(), + this.tokens.copyExpectedToken(N.TokenType.braceL), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(N.TokenType.braceR), + t + ); + } + processExportClass() { + this.tokens.removeInitialToken(), + this.copyDecorators(), + this.tokens.matches1(N.TokenType._abstract) && + this.tokens.removeToken(); + let t = this.rootTransformer.processNamedClass(); + this.tokens.appendCode(` exports.${t} = ${t};`); + } + processExportBindings() { + this.tokens.removeInitialToken(), this.tokens.removeToken(); + let t = []; + for (;;) { + if (this.tokens.matches1(N.TokenType.braceR)) { + this.tokens.removeToken(); + break; + } + let s = Jv.default.call(void 0, this.tokens); + for (; this.tokens.currentIndex() < s.endIndex; ) + this.tokens.removeToken(); + if (!s.isType && !this.shouldElideExportedIdentifier(s.leftName)) { + let i = s.leftName, + r = s.rightName, + a = this.importProcessor.getIdentifierReplacement(i); + t.push(`exports.${r} = ${a || i};`); + } + if (this.tokens.matches1(N.TokenType.braceR)) { + this.tokens.removeToken(); + break; + } + if (this.tokens.matches2(N.TokenType.comma, N.TokenType.braceR)) { + this.tokens.removeToken(), this.tokens.removeToken(); + break; + } else if (this.tokens.matches1(N.TokenType.comma)) + this.tokens.removeToken(); + else + throw new Error( + `Unexpected token: ${JSON.stringify( + this.tokens.currentToken() + )}` + ); + } + if (this.tokens.matchesContextual(Ls.ContextualKeyword._from)) { + this.tokens.removeToken(); + let s = this.tokens.stringValue(); + this.tokens.replaceTokenTrimmingLeftWhitespace( + this.importProcessor.claimImportCode(s) + ), + Oo.removeMaybeImportAssertion.call(void 0, this.tokens); + } else this.tokens.appendCode(t.join(' ')); + this.tokens.matches1(N.TokenType.semi) && this.tokens.removeToken(); + } + processExportStar() { + for ( + this.tokens.removeInitialToken(); + !this.tokens.matches1(N.TokenType.string); + + ) + this.tokens.removeToken(); + let t = this.tokens.stringValue(); + this.tokens.replaceTokenTrimmingLeftWhitespace( + this.importProcessor.claimImportCode(t) + ), + Oo.removeMaybeImportAssertion.call(void 0, this.tokens), + this.tokens.matches1(N.TokenType.semi) && this.tokens.removeToken(); + } + shouldElideExportedIdentifier(t) { + return ( + this.isTypeScriptTransformEnabled && + !this.declarationInfo.valueDeclarations.has(t) + ); + } + }; + ac.default = oc; + }); + var Bh = Z((cc) => { + 'use strict'; + Object.defineProperty(cc, '__esModule', {value: !0}); + function pr(e) { + return e && e.__esModule ? e : {default: e}; + } + var Jn = It(), + se = be(), + nx = ec(), + sx = pr(nx), + Fh = tc(), + ix = pr(Fh), + rx = Wi(), + Dh = pr(rx), + ox = Fa(), + Mh = sc(), + ax = rc(), + lx = pr(ax), + cx = hn(), + ux = pr(cx), + lc = class extends ux.default { + constructor(t, s, i, r, a, u) { + super(), + (this.tokens = t), + (this.nameManager = s), + (this.helperManager = i), + (this.reactHotLoaderTransformer = r), + (this.isTypeScriptTransformEnabled = a), + (this.nonTypeIdentifiers = a + ? ox.getNonTypeIdentifiers.call(void 0, t, u) + : new Set()), + (this.declarationInfo = a + ? ix.default.call(void 0, t) + : Fh.EMPTY_DECLARATION_INFO), + (this.injectCreateRequireForImportRequire = + !!u.injectCreateRequireForImportRequire); + } + process() { + if ( + this.tokens.matches3( + se.TokenType._import, + se.TokenType.name, + se.TokenType.eq + ) + ) + return this.processImportEquals(); + if ( + this.tokens.matches4( + se.TokenType._import, + se.TokenType.name, + se.TokenType.name, + se.TokenType.eq + ) && + this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 1, + Jn.ContextualKeyword._type + ) + ) { + this.tokens.removeInitialToken(); + for (let t = 0; t < 7; t++) this.tokens.removeToken(); + return !0; + } + if (this.tokens.matches2(se.TokenType._export, se.TokenType.eq)) + return this.tokens.replaceToken('module.exports'), !0; + if ( + this.tokens.matches5( + se.TokenType._export, + se.TokenType._import, + se.TokenType.name, + se.TokenType.name, + se.TokenType.eq + ) && + this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 2, + Jn.ContextualKeyword._type + ) + ) { + this.tokens.removeInitialToken(); + for (let t = 0; t < 8; t++) this.tokens.removeToken(); + return !0; + } + if (this.tokens.matches1(se.TokenType._import)) + return this.processImport(); + if (this.tokens.matches2(se.TokenType._export, se.TokenType._default)) + return this.processExportDefault(); + if (this.tokens.matches2(se.TokenType._export, se.TokenType.braceL)) + return this.processNamedExports(); + if ( + this.tokens.matches2(se.TokenType._export, se.TokenType.name) && + this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 1, + Jn.ContextualKeyword._type + ) + ) { + if ( + (this.tokens.removeInitialToken(), + this.tokens.removeToken(), + this.tokens.matches1(se.TokenType.braceL)) + ) { + for (; !this.tokens.matches1(se.TokenType.braceR); ) + this.tokens.removeToken(); + this.tokens.removeToken(); + } else + this.tokens.removeToken(), + this.tokens.matches1(se.TokenType._as) && + (this.tokens.removeToken(), this.tokens.removeToken()); + return ( + this.tokens.matchesContextual(Jn.ContextualKeyword._from) && + this.tokens.matches1AtIndex( + this.tokens.currentIndex() + 1, + se.TokenType.string + ) && + (this.tokens.removeToken(), + this.tokens.removeToken(), + Mh.removeMaybeImportAssertion.call(void 0, this.tokens)), + !0 + ); + } + return !1; + } + processImportEquals() { + let t = this.tokens.identifierNameAtIndex( + this.tokens.currentIndex() + 1 + ); + return ( + this.isTypeName(t) + ? sx.default.call(void 0, this.tokens) + : this.injectCreateRequireForImportRequire + ? (this.tokens.replaceToken('const'), + this.tokens.copyToken(), + this.tokens.copyToken(), + this.tokens.replaceToken( + this.helperManager.getHelperName('require') + )) + : this.tokens.replaceToken('const'), + !0 + ); + } + processImport() { + if (this.tokens.matches2(se.TokenType._import, se.TokenType.parenL)) + return !1; + let t = this.tokens.snapshot(); + if (this.removeImportTypeBindings()) { + for ( + this.tokens.restoreToSnapshot(t); + !this.tokens.matches1(se.TokenType.string); + + ) + this.tokens.removeToken(); + this.tokens.removeToken(), + Mh.removeMaybeImportAssertion.call(void 0, this.tokens), + this.tokens.matches1(se.TokenType.semi) && + this.tokens.removeToken(); + } + return !0; + } + removeImportTypeBindings() { + if ( + (this.tokens.copyExpectedToken(se.TokenType._import), + this.tokens.matchesContextual(Jn.ContextualKeyword._type) && + !this.tokens.matches1AtIndex( + this.tokens.currentIndex() + 1, + se.TokenType.comma + ) && + !this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 1, + Jn.ContextualKeyword._from + )) + ) + return !0; + if (this.tokens.matches1(se.TokenType.string)) + return this.tokens.copyToken(), !1; + this.tokens.matchesContextual(Jn.ContextualKeyword._module) && + this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 2, + Jn.ContextualKeyword._from + ) && + this.tokens.copyToken(); + let t = !1, + s = !1; + if ( + (this.tokens.matches1(se.TokenType.name) && + (this.isTypeName(this.tokens.identifierName()) + ? (this.tokens.removeToken(), + this.tokens.matches1(se.TokenType.comma) && + this.tokens.removeToken()) + : ((t = !0), + this.tokens.copyToken(), + this.tokens.matches1(se.TokenType.comma) && + ((s = !0), this.tokens.removeToken()))), + this.tokens.matches1(se.TokenType.star)) + ) + this.isTypeName(this.tokens.identifierNameAtRelativeIndex(2)) + ? (this.tokens.removeToken(), + this.tokens.removeToken(), + this.tokens.removeToken()) + : (s && this.tokens.appendCode(','), + (t = !0), + this.tokens.copyExpectedToken(se.TokenType.star), + this.tokens.copyExpectedToken(se.TokenType.name), + this.tokens.copyExpectedToken(se.TokenType.name)); + else if (this.tokens.matches1(se.TokenType.braceL)) { + for ( + s && this.tokens.appendCode(','), this.tokens.copyToken(); + !this.tokens.matches1(se.TokenType.braceR); + + ) { + let i = Dh.default.call(void 0, this.tokens); + if (i.isType || this.isTypeName(i.rightName)) { + for (; this.tokens.currentIndex() < i.endIndex; ) + this.tokens.removeToken(); + this.tokens.matches1(se.TokenType.comma) && + this.tokens.removeToken(); + } else { + for (t = !0; this.tokens.currentIndex() < i.endIndex; ) + this.tokens.copyToken(); + this.tokens.matches1(se.TokenType.comma) && + this.tokens.copyToken(); + } + } + this.tokens.copyExpectedToken(se.TokenType.braceR); + } + return !t; + } + isTypeName(t) { + return ( + this.isTypeScriptTransformEnabled && !this.nonTypeIdentifiers.has(t) + ); + } + processExportDefault() { + if ( + lx.default.call( + void 0, + this.isTypeScriptTransformEnabled, + this.tokens, + this.declarationInfo + ) + ) + return ( + this.tokens.removeInitialToken(), + this.tokens.removeToken(), + this.tokens.removeToken(), + !0 + ); + if ( + !( + this.tokens.matches4( + se.TokenType._export, + se.TokenType._default, + se.TokenType._function, + se.TokenType.name + ) || + (this.tokens.matches5( + se.TokenType._export, + se.TokenType._default, + se.TokenType.name, + se.TokenType._function, + se.TokenType.name + ) && + this.tokens.matchesContextualAtIndex( + this.tokens.currentIndex() + 2, + Jn.ContextualKeyword._async + )) || + this.tokens.matches4( + se.TokenType._export, + se.TokenType._default, + se.TokenType._class, + se.TokenType.name + ) || + this.tokens.matches5( + se.TokenType._export, + se.TokenType._default, + se.TokenType._abstract, + se.TokenType._class, + se.TokenType.name + ) + ) && + this.reactHotLoaderTransformer + ) { + let s = this.nameManager.claimFreeName('_default'); + return ( + this.tokens.replaceToken(`let ${s}; export`), + this.tokens.copyToken(), + this.tokens.appendCode(` ${s} =`), + this.reactHotLoaderTransformer.setExtractedDefaultExportName(s), + !0 + ); + } + return !1; + } + processNamedExports() { + if (!this.isTypeScriptTransformEnabled) return !1; + for ( + this.tokens.copyExpectedToken(se.TokenType._export), + this.tokens.copyExpectedToken(se.TokenType.braceL); + !this.tokens.matches1(se.TokenType.braceR); + + ) { + let t = Dh.default.call(void 0, this.tokens); + if (t.isType || this.shouldElideExportedName(t.leftName)) { + for (; this.tokens.currentIndex() < t.endIndex; ) + this.tokens.removeToken(); + this.tokens.matches1(se.TokenType.comma) && + this.tokens.removeToken(); + } else { + for (; this.tokens.currentIndex() < t.endIndex; ) + this.tokens.copyToken(); + this.tokens.matches1(se.TokenType.comma) && + this.tokens.copyToken(); + } + } + return this.tokens.copyExpectedToken(se.TokenType.braceR), !0; + } + shouldElideExportedName(t) { + return ( + this.isTypeScriptTransformEnabled && + this.declarationInfo.typeDeclarations.has(t) && + !this.declarationInfo.valueDeclarations.has(t) + ); + } + }; + cc.default = lc; + }); + var jh = Z((pc) => { + 'use strict'; + Object.defineProperty(pc, '__esModule', {value: !0}); + function px(e) { + return e && e.__esModule ? e : {default: e}; + } + var Vh = It(), + sn = be(), + hx = hn(), + fx = px(hx), + uc = class extends fx.default { + constructor(t, s, i) { + super(), + (this.rootTransformer = t), + (this.tokens = s), + (this.isImportsTransformEnabled = i); + } + process() { + return this.rootTransformer.processPossibleArrowParamEnd() || + this.rootTransformer.processPossibleAsyncArrowWithTypeParams() || + this.rootTransformer.processPossibleTypeRange() + ? !0 + : this.tokens.matches1(sn.TokenType._enum) + ? (this.processEnum(), !0) + : this.tokens.matches2(sn.TokenType._export, sn.TokenType._enum) + ? (this.processNamedExportEnum(), !0) + : this.tokens.matches3( + sn.TokenType._export, + sn.TokenType._default, + sn.TokenType._enum + ) + ? (this.processDefaultExportEnum(), !0) + : !1; + } + processNamedExportEnum() { + if (this.isImportsTransformEnabled) { + this.tokens.removeInitialToken(); + let t = this.tokens.identifierNameAtRelativeIndex(1); + this.processEnum(), this.tokens.appendCode(` exports.${t} = ${t};`); + } else this.tokens.copyToken(), this.processEnum(); + } + processDefaultExportEnum() { + this.tokens.removeInitialToken(), this.tokens.removeToken(); + let t = this.tokens.identifierNameAtRelativeIndex(1); + this.processEnum(), + this.isImportsTransformEnabled + ? this.tokens.appendCode(` exports.default = ${t};`) + : this.tokens.appendCode(` export default ${t};`); + } + processEnum() { + this.tokens.replaceToken('const'), + this.tokens.copyExpectedToken(sn.TokenType.name); + let t = !1; + this.tokens.matchesContextual(Vh.ContextualKeyword._of) && + (this.tokens.removeToken(), + (t = this.tokens.matchesContextual(Vh.ContextualKeyword._symbol)), + this.tokens.removeToken()); + let s = this.tokens.matches3( + sn.TokenType.braceL, + sn.TokenType.name, + sn.TokenType.eq + ); + this.tokens.appendCode(' = require("flow-enums-runtime")'); + let i = !t && !s; + for ( + this.tokens.replaceTokenTrimmingLeftWhitespace( + i ? '.Mirrored([' : '({' + ); + !this.tokens.matches1(sn.TokenType.braceR); + + ) { + if (this.tokens.matches1(sn.TokenType.ellipsis)) { + this.tokens.removeToken(); + break; + } + this.processEnumElement(t, s), + this.tokens.matches1(sn.TokenType.comma) && + this.tokens.copyToken(); + } + this.tokens.replaceToken(i ? ']);' : '});'); + } + processEnumElement(t, s) { + if (t) { + let i = this.tokens.identifierName(); + this.tokens.copyToken(), this.tokens.appendCode(`: Symbol("${i}")`); + } else + s + ? (this.tokens.copyToken(), + this.tokens.replaceTokenTrimmingLeftWhitespace(':'), + this.tokens.copyToken()) + : this.tokens.replaceToken(`"${this.tokens.identifierName()}"`); + } + }; + pc.default = uc; + }); + var $h = Z((fc) => { + 'use strict'; + Object.defineProperty(fc, '__esModule', {value: !0}); + function dx(e) { + return e && e.__esModule ? e : {default: e}; + } + function mx(e) { + let t, + s = e[0], + i = 1; + for (; i < e.length; ) { + let r = e[i], + a = e[i + 1]; + if ( + ((i += 2), + (r === 'optionalAccess' || r === 'optionalCall') && s == null) + ) + return; + r === 'access' || r === 'optionalAccess' + ? ((t = s), (s = a(s))) + : (r === 'call' || r === 'optionalCall') && + ((s = a((...u) => s.call(t, ...u))), (t = void 0)); + } + return s; + } + var Qn = be(), + yx = hn(), + Tx = dx(yx), + Do = 'jest', + kx = ['mock', 'unmock', 'enableAutomock', 'disableAutomock'], + hc = class e extends Tx.default { + __init() { + this.hoistedFunctionNames = []; + } + constructor(t, s, i, r) { + super(), + (this.rootTransformer = t), + (this.tokens = s), + (this.nameManager = i), + (this.importProcessor = r), + e.prototype.__init.call(this); + } + process() { + return this.tokens.currentToken().scopeDepth === 0 && + this.tokens.matches4( + Qn.TokenType.name, + Qn.TokenType.dot, + Qn.TokenType.name, + Qn.TokenType.parenL + ) && + this.tokens.identifierName() === Do + ? mx([ + this, + 'access', + (t) => t.importProcessor, + 'optionalAccess', + (t) => t.getGlobalNames, + 'call', + (t) => t(), + 'optionalAccess', + (t) => t.has, + 'call', + (t) => t(Do), + ]) + ? !1 + : this.extractHoistedCalls() + : !1; + } + getHoistedCode() { + return this.hoistedFunctionNames.length > 0 + ? this.hoistedFunctionNames.map((t) => `${t}();`).join('') + : ''; + } + extractHoistedCalls() { + this.tokens.removeToken(); + let t = !1; + for ( + ; + this.tokens.matches3( + Qn.TokenType.dot, + Qn.TokenType.name, + Qn.TokenType.parenL + ); + + ) { + let s = this.tokens.identifierNameAtIndex( + this.tokens.currentIndex() + 1 + ); + if (kx.includes(s)) { + let r = this.nameManager.claimFreeName('__jestHoist'); + this.hoistedFunctionNames.push(r), + this.tokens.replaceToken(`function ${r}(){${Do}.`), + this.tokens.copyToken(), + this.tokens.copyToken(), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(Qn.TokenType.parenR), + this.tokens.appendCode(';}'), + (t = !1); + } else + t ? this.tokens.copyToken() : this.tokens.replaceToken(`${Do}.`), + this.tokens.copyToken(), + this.tokens.copyToken(), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(Qn.TokenType.parenR), + (t = !0); + } + return !0; + } + }; + fc.default = hc; + }); + var qh = Z((mc) => { + 'use strict'; + Object.defineProperty(mc, '__esModule', {value: !0}); + function vx(e) { + return e && e.__esModule ? e : {default: e}; + } + var xx = be(), + gx = hn(), + _x = vx(gx), + dc = class extends _x.default { + constructor(t) { + super(), (this.tokens = t); + } + process() { + if (this.tokens.matches1(xx.TokenType.num)) { + let t = this.tokens.currentTokenCode(); + if (t.includes('_')) + return this.tokens.replaceToken(t.replace(/_/g, '')), !0; + } + return !1; + } + }; + mc.default = dc; + }); + var Uh = Z((Tc) => { + 'use strict'; + Object.defineProperty(Tc, '__esModule', {value: !0}); + function bx(e) { + return e && e.__esModule ? e : {default: e}; + } + var Kh = be(), + Cx = hn(), + wx = bx(Cx), + yc = class extends wx.default { + constructor(t, s) { + super(), (this.tokens = t), (this.nameManager = s); + } + process() { + return this.tokens.matches2(Kh.TokenType._catch, Kh.TokenType.braceL) + ? (this.tokens.copyToken(), + this.tokens.appendCode( + ` (${this.nameManager.claimFreeName('e')})` + ), + !0) + : !1; + } + }; + Tc.default = yc; + }); + var Hh = Z((vc) => { + 'use strict'; + Object.defineProperty(vc, '__esModule', {value: !0}); + function Sx(e) { + return e && e.__esModule ? e : {default: e}; + } + var jt = be(), + Ix = hn(), + Ex = Sx(Ix), + kc = class extends Ex.default { + constructor(t, s) { + super(), (this.tokens = t), (this.nameManager = s); + } + process() { + if (this.tokens.matches1(jt.TokenType.nullishCoalescing)) { + let i = this.tokens.currentToken(); + return ( + this.tokens.tokens[i.nullishStartIndex].isAsyncOperation + ? this.tokens.replaceTokenTrimmingLeftWhitespace( + ', async () => (' + ) + : this.tokens.replaceTokenTrimmingLeftWhitespace(', () => ('), + !0 + ); + } + if ( + this.tokens.matches1(jt.TokenType._delete) && + this.tokens.tokenAtRelativeIndex(1).isOptionalChainStart + ) + return this.tokens.removeInitialToken(), !0; + let s = this.tokens.currentToken().subscriptStartIndex; + if ( + s != null && + this.tokens.tokens[s].isOptionalChainStart && + this.tokens.tokenAtRelativeIndex(-1).type !== jt.TokenType._super + ) { + let i = this.nameManager.claimFreeName('_'), + r; + if ( + (s > 0 && + this.tokens.matches1AtIndex(s - 1, jt.TokenType._delete) && + this.isLastSubscriptInChain() + ? (r = `${i} => delete ${i}`) + : (r = `${i} => ${i}`), + this.tokens.tokens[s].isAsyncOperation && (r = `async ${r}`), + this.tokens.matches2( + jt.TokenType.questionDot, + jt.TokenType.parenL + ) || + this.tokens.matches2( + jt.TokenType.questionDot, + jt.TokenType.lessThan + )) + ) + this.justSkippedSuper() && this.tokens.appendCode('.bind(this)'), + this.tokens.replaceTokenTrimmingLeftWhitespace( + `, 'optionalCall', ${r}` + ); + else if ( + this.tokens.matches2( + jt.TokenType.questionDot, + jt.TokenType.bracketL + ) + ) + this.tokens.replaceTokenTrimmingLeftWhitespace( + `, 'optionalAccess', ${r}` + ); + else if (this.tokens.matches1(jt.TokenType.questionDot)) + this.tokens.replaceTokenTrimmingLeftWhitespace( + `, 'optionalAccess', ${r}.` + ); + else if (this.tokens.matches1(jt.TokenType.dot)) + this.tokens.replaceTokenTrimmingLeftWhitespace( + `, 'access', ${r}.` + ); + else if (this.tokens.matches1(jt.TokenType.bracketL)) + this.tokens.replaceTokenTrimmingLeftWhitespace( + `, 'access', ${r}[` + ); + else if (this.tokens.matches1(jt.TokenType.parenL)) + this.justSkippedSuper() && this.tokens.appendCode('.bind(this)'), + this.tokens.replaceTokenTrimmingLeftWhitespace( + `, 'call', ${r}(` + ); + else + throw new Error( + 'Unexpected subscript operator in optional chain.' + ); + return !0; + } + return !1; + } + isLastSubscriptInChain() { + let t = 0; + for (let s = this.tokens.currentIndex() + 1; ; s++) { + if (s >= this.tokens.tokens.length) + throw new Error( + 'Reached the end of the code while finding the end of the access chain.' + ); + if ( + (this.tokens.tokens[s].isOptionalChainStart + ? t++ + : this.tokens.tokens[s].isOptionalChainEnd && t--, + t < 0) + ) + return !0; + if (t === 0 && this.tokens.tokens[s].subscriptStartIndex != null) + return !1; + } + } + justSkippedSuper() { + let t = 0, + s = this.tokens.currentIndex() - 1; + for (;;) { + if (s < 0) + throw new Error( + 'Reached the start of the code while finding the start of the access chain.' + ); + if ( + (this.tokens.tokens[s].isOptionalChainStart + ? t-- + : this.tokens.tokens[s].isOptionalChainEnd && t++, + t < 0) + ) + return !1; + if (t === 0 && this.tokens.tokens[s].subscriptStartIndex != null) + return this.tokens.tokens[s - 1].type === jt.TokenType._super; + s--; + } + } + }; + vc.default = kc; + }); + var Gh = Z((gc) => { + 'use strict'; + Object.defineProperty(gc, '__esModule', {value: !0}); + function Ax(e) { + return e && e.__esModule ? e : {default: e}; + } + var Wh = xt(), + Et = be(), + Px = hn(), + Nx = Ax(Px), + xc = class extends Nx.default { + constructor(t, s, i, r) { + super(), + (this.rootTransformer = t), + (this.tokens = s), + (this.importProcessor = i), + (this.options = r); + } + process() { + let t = this.tokens.currentIndex(); + if (this.tokens.identifierName() === 'createReactClass') { + let s = + this.importProcessor && + this.importProcessor.getIdentifierReplacement('createReactClass'); + return ( + s + ? this.tokens.replaceToken(`(0, ${s})`) + : this.tokens.copyToken(), + this.tryProcessCreateClassCall(t), + !0 + ); + } + if ( + this.tokens.matches3( + Et.TokenType.name, + Et.TokenType.dot, + Et.TokenType.name + ) && + this.tokens.identifierName() === 'React' && + this.tokens.identifierNameAtIndex( + this.tokens.currentIndex() + 2 + ) === 'createClass' + ) { + let s = + (this.importProcessor && + this.importProcessor.getIdentifierReplacement('React')) || + 'React'; + return ( + s + ? (this.tokens.replaceToken(s), + this.tokens.copyToken(), + this.tokens.copyToken()) + : (this.tokens.copyToken(), + this.tokens.copyToken(), + this.tokens.copyToken()), + this.tryProcessCreateClassCall(t), + !0 + ); + } + return !1; + } + tryProcessCreateClassCall(t) { + let s = this.findDisplayName(t); + s && + this.classNeedsDisplayName() && + (this.tokens.copyExpectedToken(Et.TokenType.parenL), + this.tokens.copyExpectedToken(Et.TokenType.braceL), + this.tokens.appendCode(`displayName: '${s}',`), + this.rootTransformer.processBalancedCode(), + this.tokens.copyExpectedToken(Et.TokenType.braceR), + this.tokens.copyExpectedToken(Et.TokenType.parenR)); + } + findDisplayName(t) { + return t < 2 + ? null + : this.tokens.matches2AtIndex( + t - 2, + Et.TokenType.name, + Et.TokenType.eq + ) + ? this.tokens.identifierNameAtIndex(t - 2) + : t >= 2 && + this.tokens.tokens[t - 2].identifierRole === + Wh.IdentifierRole.ObjectKey + ? this.tokens.identifierNameAtIndex(t - 2) + : this.tokens.matches2AtIndex( + t - 2, + Et.TokenType._export, + Et.TokenType._default + ) + ? this.getDisplayNameFromFilename() + : null; + } + getDisplayNameFromFilename() { + let s = (this.options.filePath || 'unknown').split('/'), + i = s[s.length - 1], + r = i.lastIndexOf('.'), + a = r === -1 ? i : i.slice(0, r); + return a === 'index' && s[s.length - 2] ? s[s.length - 2] : a; + } + classNeedsDisplayName() { + let t = this.tokens.currentIndex(); + if (!this.tokens.matches2(Et.TokenType.parenL, Et.TokenType.braceL)) + return !1; + let s = t + 1, + i = this.tokens.tokens[s].contextId; + if (i == null) + throw new Error( + 'Expected non-null context ID on object open-brace.' + ); + for (; t < this.tokens.tokens.length; t++) { + let r = this.tokens.tokens[t]; + if (r.type === Et.TokenType.braceR && r.contextId === i) { + t++; + break; + } + if ( + this.tokens.identifierNameAtIndex(t) === 'displayName' && + this.tokens.tokens[t].identifierRole === + Wh.IdentifierRole.ObjectKey && + r.contextId === i + ) + return !1; + } + if (t === this.tokens.tokens.length) + throw new Error( + 'Unexpected end of input when processing React class.' + ); + return ( + this.tokens.matches1AtIndex(t, Et.TokenType.parenR) || + this.tokens.matches2AtIndex( + t, + Et.TokenType.comma, + Et.TokenType.parenR + ) + ); + } + }; + gc.default = xc; + }); + var Xh = Z((bc) => { + 'use strict'; + Object.defineProperty(bc, '__esModule', {value: !0}); + function Rx(e) { + return e && e.__esModule ? e : {default: e}; + } + var zh = xt(), + Lx = hn(), + Ox = Rx(Lx), + _c = class e extends Ox.default { + __init() { + this.extractedDefaultExportName = null; + } + constructor(t, s) { + super(), + (this.tokens = t), + (this.filePath = s), + e.prototype.__init.call(this); + } + setExtractedDefaultExportName(t) { + this.extractedDefaultExportName = t; + } + getPrefixCode() { + return ` + (function () { + var enterModule = require('react-hot-loader').enterModule; + enterModule && enterModule(module); + })();` + .replace(/\s+/g, ' ') + .trim(); + } + getSuffixCode() { + let t = new Set(); + for (let i of this.tokens.tokens) + !i.isType && + zh.isTopLevelDeclaration.call(void 0, i) && + i.identifierRole !== zh.IdentifierRole.ImportDeclaration && + t.add(this.tokens.identifierNameForToken(i)); + let s = Array.from(t).map((i) => ({ + variableName: i, + uniqueLocalName: i, + })); + return ( + this.extractedDefaultExportName && + s.push({ + variableName: this.extractedDefaultExportName, + uniqueLocalName: 'default', + }), + ` +;(function () { + var reactHotLoader = require('react-hot-loader').default; + var leaveModule = require('react-hot-loader').leaveModule; + if (!reactHotLoader) { + return; + } +${s.map( + ({variableName: i, uniqueLocalName: r}) => + ` reactHotLoader.register(${i}, "${r}", ${JSON.stringify( + this.filePath || '' + )});` +).join(` +`)} + leaveModule(module); +})();` + ); + } + process() { + return !1; + } + }; + bc.default = _c; + }); + var Jh = Z((Cc) => { + 'use strict'; + Object.defineProperty(Cc, '__esModule', {value: !0}); + var Yh = li(), + Dx = new Set([ + 'break', + 'case', + 'catch', + 'class', + 'const', + 'continue', + 'debugger', + 'default', + 'delete', + 'do', + 'else', + 'export', + 'extends', + 'finally', + 'for', + 'function', + 'if', + 'import', + 'in', + 'instanceof', + 'new', + 'return', + 'super', + 'switch', + 'this', + 'throw', + 'try', + 'typeof', + 'var', + 'void', + 'while', + 'with', + 'yield', + 'enum', + 'implements', + 'interface', + 'let', + 'package', + 'private', + 'protected', + 'public', + 'static', + 'await', + 'false', + 'null', + 'true', + ]); + function Mx(e) { + if (e.length === 0 || !Yh.IS_IDENTIFIER_START[e.charCodeAt(0)]) return !1; + for (let t = 1; t < e.length; t++) + if (!Yh.IS_IDENTIFIER_CHAR[e.charCodeAt(t)]) return !1; + return !Dx.has(e); + } + Cc.default = Mx; + }); + var ef = Z((Sc) => { + 'use strict'; + Object.defineProperty(Sc, '__esModule', {value: !0}); + function Zh(e) { + return e && e.__esModule ? e : {default: e}; + } + var $e = be(), + Fx = Jh(), + Qh = Zh(Fx), + Bx = hn(), + Vx = Zh(Bx), + wc = class extends Vx.default { + constructor(t, s, i) { + super(), + (this.rootTransformer = t), + (this.tokens = s), + (this.isImportsTransformEnabled = i); + } + process() { + return this.rootTransformer.processPossibleArrowParamEnd() || + this.rootTransformer.processPossibleAsyncArrowWithTypeParams() || + this.rootTransformer.processPossibleTypeRange() + ? !0 + : this.tokens.matches1($e.TokenType._public) || + this.tokens.matches1($e.TokenType._protected) || + this.tokens.matches1($e.TokenType._private) || + this.tokens.matches1($e.TokenType._abstract) || + this.tokens.matches1($e.TokenType._readonly) || + this.tokens.matches1($e.TokenType._override) || + this.tokens.matches1($e.TokenType.nonNullAssertion) + ? (this.tokens.removeInitialToken(), !0) + : this.tokens.matches1($e.TokenType._enum) || + this.tokens.matches2($e.TokenType._const, $e.TokenType._enum) + ? (this.processEnum(), !0) + : this.tokens.matches2($e.TokenType._export, $e.TokenType._enum) || + this.tokens.matches3( + $e.TokenType._export, + $e.TokenType._const, + $e.TokenType._enum + ) + ? (this.processEnum(!0), !0) + : !1; + } + processEnum(t = !1) { + for ( + this.tokens.removeInitialToken(); + this.tokens.matches1($e.TokenType._const) || + this.tokens.matches1($e.TokenType._enum); + + ) + this.tokens.removeToken(); + let s = this.tokens.identifierName(); + this.tokens.removeToken(), + t && + !this.isImportsTransformEnabled && + this.tokens.appendCode('export '), + this.tokens.appendCode(`var ${s}; (function (${s})`), + this.tokens.copyExpectedToken($e.TokenType.braceL), + this.processEnumBody(s), + this.tokens.copyExpectedToken($e.TokenType.braceR), + t && this.isImportsTransformEnabled + ? this.tokens.appendCode(`)(${s} || (exports.${s} = ${s} = {}));`) + : this.tokens.appendCode(`)(${s} || (${s} = {}));`); + } + processEnumBody(t) { + let s = null; + for (; !this.tokens.matches1($e.TokenType.braceR); ) { + let {nameStringCode: i, variableName: r} = this.extractEnumKeyInfo( + this.tokens.currentToken() + ); + this.tokens.removeInitialToken(), + this.tokens.matches3( + $e.TokenType.eq, + $e.TokenType.string, + $e.TokenType.comma + ) || + this.tokens.matches3( + $e.TokenType.eq, + $e.TokenType.string, + $e.TokenType.braceR + ) + ? this.processStringLiteralEnumMember(t, i, r) + : this.tokens.matches1($e.TokenType.eq) + ? this.processExplicitValueEnumMember(t, i, r) + : this.processImplicitValueEnumMember(t, i, r, s), + this.tokens.matches1($e.TokenType.comma) && + this.tokens.removeToken(), + r != null ? (s = r) : (s = `${t}[${i}]`); + } + } + extractEnumKeyInfo(t) { + if (t.type === $e.TokenType.name) { + let s = this.tokens.identifierNameForToken(t); + return { + nameStringCode: `"${s}"`, + variableName: Qh.default.call(void 0, s) ? s : null, + }; + } else if (t.type === $e.TokenType.string) { + let s = this.tokens.stringValueForToken(t); + return { + nameStringCode: this.tokens.code.slice(t.start, t.end), + variableName: Qh.default.call(void 0, s) ? s : null, + }; + } else + throw new Error( + 'Expected name or string at beginning of enum element.' + ); + } + processStringLiteralEnumMember(t, s, i) { + i != null + ? (this.tokens.appendCode(`const ${i}`), + this.tokens.copyToken(), + this.tokens.copyToken(), + this.tokens.appendCode(`; ${t}[${s}] = ${i};`)) + : (this.tokens.appendCode(`${t}[${s}]`), + this.tokens.copyToken(), + this.tokens.copyToken(), + this.tokens.appendCode(';')); + } + processExplicitValueEnumMember(t, s, i) { + let r = this.tokens.currentToken().rhsEndIndex; + if (r == null) + throw new Error('Expected rhsEndIndex on enum assign.'); + if (i != null) { + for ( + this.tokens.appendCode(`const ${i}`), this.tokens.copyToken(); + this.tokens.currentIndex() < r; + + ) + this.rootTransformer.processToken(); + this.tokens.appendCode(`; ${t}[${t}[${s}] = ${i}] = ${s};`); + } else { + for ( + this.tokens.appendCode(`${t}[${t}[${s}]`), + this.tokens.copyToken(); + this.tokens.currentIndex() < r; + + ) + this.rootTransformer.processToken(); + this.tokens.appendCode(`] = ${s};`); + } + } + processImplicitValueEnumMember(t, s, i, r) { + let a = r != null ? `${r} + 1` : '0'; + i != null && (this.tokens.appendCode(`const ${i} = ${a}; `), (a = i)), + this.tokens.appendCode(`${t}[${t}[${s}] = ${a}] = ${s};`); + } + }; + Sc.default = wc; + }); + var tf = Z((Ec) => { + 'use strict'; + Object.defineProperty(Ec, '__esModule', {value: !0}); + function yn(e) { + return e && e.__esModule ? e : {default: e}; + } + var jx = It(), + lt = be(), + $x = Ah(), + qx = yn($x), + Kx = Oh(), + Ux = yn(Kx), + Hx = Bh(), + Wx = yn(Hx), + Gx = jh(), + zx = yn(Gx), + Xx = $h(), + Yx = yn(Xx), + Jx = Da(), + Qx = yn(Jx), + Zx = qh(), + eg = yn(Zx), + tg = Uh(), + ng = yn(tg), + sg = Hh(), + ig = yn(sg), + rg = Gh(), + og = yn(rg), + ag = Xh(), + lg = yn(ag), + cg = ef(), + ug = yn(cg), + Ic = class e { + __init() { + this.transformers = []; + } + __init2() { + this.generatedVariables = []; + } + constructor(t, s, i, r) { + e.prototype.__init.call(this), + e.prototype.__init2.call(this), + (this.nameManager = t.nameManager), + (this.helperManager = t.helperManager); + let {tokenProcessor: a, importProcessor: u} = t; + (this.tokens = a), + (this.isImportsTransformEnabled = s.includes('imports')), + (this.isReactHotLoaderTransformEnabled = + s.includes('react-hot-loader')), + (this.disableESTransforms = !!r.disableESTransforms), + r.disableESTransforms || + (this.transformers.push(new ig.default(a, this.nameManager)), + this.transformers.push(new eg.default(a)), + this.transformers.push(new ng.default(a, this.nameManager))), + s.includes('jsx') && + (r.jsxRuntime !== 'preserve' && + this.transformers.push( + new Qx.default(this, a, u, this.nameManager, r) + ), + this.transformers.push(new og.default(this, a, u, r))); + let d = null; + if (s.includes('react-hot-loader')) { + if (!r.filePath) + throw new Error( + 'filePath is required when using the react-hot-loader transform.' + ); + (d = new lg.default(a, r.filePath)), this.transformers.push(d); + } + if (s.includes('imports')) { + if (u === null) + throw new Error( + 'Expected non-null importProcessor with imports transform enabled.' + ); + this.transformers.push( + new Ux.default( + this, + a, + u, + this.nameManager, + this.helperManager, + d, + i, + !!r.enableLegacyTypeScriptModuleInterop, + s.includes('typescript'), + !!r.preserveDynamicImport + ) + ); + } else + this.transformers.push( + new Wx.default( + a, + this.nameManager, + this.helperManager, + d, + s.includes('typescript'), + r + ) + ); + s.includes('flow') && + this.transformers.push( + new zx.default(this, a, s.includes('imports')) + ), + s.includes('typescript') && + this.transformers.push( + new ug.default(this, a, s.includes('imports')) + ), + s.includes('jest') && + this.transformers.push( + new Yx.default(this, a, this.nameManager, u) + ); + } + transform() { + this.tokens.reset(), this.processBalancedCode(); + let s = this.isImportsTransformEnabled ? '"use strict";' : ''; + for (let u of this.transformers) s += u.getPrefixCode(); + (s += this.helperManager.emitHelpers()), + (s += this.generatedVariables.map((u) => ` var ${u};`).join('')); + for (let u of this.transformers) s += u.getHoistedCode(); + let i = ''; + for (let u of this.transformers) i += u.getSuffixCode(); + let r = this.tokens.finish(), + {code: a} = r; + if (a.startsWith('#!')) { + let u = a.indexOf(` +`); + return ( + u === -1 && + ((u = a.length), + (a += ` +`)), + { + code: a.slice(0, u + 1) + s + a.slice(u + 1) + i, + mappings: this.shiftMappings(r.mappings, s.length), + } + ); + } else + return { + code: s + a + i, + mappings: this.shiftMappings(r.mappings, s.length), + }; + } + processBalancedCode() { + let t = 0, + s = 0; + for (; !this.tokens.isAtEnd(); ) { + if ( + this.tokens.matches1(lt.TokenType.braceL) || + this.tokens.matches1(lt.TokenType.dollarBraceL) + ) + t++; + else if (this.tokens.matches1(lt.TokenType.braceR)) { + if (t === 0) return; + t--; + } + if (this.tokens.matches1(lt.TokenType.parenL)) s++; + else if (this.tokens.matches1(lt.TokenType.parenR)) { + if (s === 0) return; + s--; + } + this.processToken(); + } + } + processToken() { + if (this.tokens.matches1(lt.TokenType._class)) { + this.processClass(); + return; + } + for (let t of this.transformers) if (t.process()) return; + this.tokens.copyToken(); + } + processNamedClass() { + if (!this.tokens.matches2(lt.TokenType._class, lt.TokenType.name)) + throw new Error('Expected identifier for exported class name.'); + let t = this.tokens.identifierNameAtIndex( + this.tokens.currentIndex() + 1 + ); + return this.processClass(), t; + } + processClass() { + let t = qx.default.call( + void 0, + this, + this.tokens, + this.nameManager, + this.disableESTransforms + ), + s = + (t.headerInfo.isExpression || !t.headerInfo.className) && + t.staticInitializerNames.length + + t.instanceInitializerNames.length > + 0, + i = t.headerInfo.className; + s && + ((i = this.nameManager.claimFreeName('_class')), + this.generatedVariables.push(i), + this.tokens.appendCode(` (${i} =`)); + let a = this.tokens.currentToken().contextId; + if (a == null) + throw new Error('Expected class to have a context ID.'); + for ( + this.tokens.copyExpectedToken(lt.TokenType._class); + !this.tokens.matchesContextIdAndLabel(lt.TokenType.braceL, a); + + ) + this.processToken(); + this.processClassBody(t, i); + let u = t.staticInitializerNames.map((d) => `${i}.${d}()`); + s + ? this.tokens.appendCode( + `, ${u.map((d) => `${d}, `).join('')}${i})` + ) + : t.staticInitializerNames.length > 0 && + this.tokens.appendCode(` ${u.map((d) => `${d};`).join(' ')}`); + } + processClassBody(t, s) { + let { + headerInfo: i, + constructorInsertPos: r, + constructorInitializerStatements: a, + fields: u, + instanceInitializerNames: d, + rangesToRemove: y, + } = t, + g = 0, + L = 0, + p = this.tokens.currentToken().contextId; + if (p == null) + throw new Error('Expected non-null context ID on class.'); + this.tokens.copyExpectedToken(lt.TokenType.braceL), + this.isReactHotLoaderTransformEnabled && + this.tokens.appendCode( + '__reactstandin__regenerateByEval(key, code) {this[key] = eval(code);}' + ); + let h = a.length + d.length > 0; + if (r === null && h) { + let T = this.makeConstructorInitCode(a, d, s); + if (i.hasSuperclass) { + let x = this.nameManager.claimFreeName('args'); + this.tokens.appendCode( + `constructor(...${x}) { super(...${x}); ${T}; }` + ); + } else this.tokens.appendCode(`constructor() { ${T}; }`); + } + for ( + ; + !this.tokens.matchesContextIdAndLabel(lt.TokenType.braceR, p); + + ) + if (g < u.length && this.tokens.currentIndex() === u[g].start) { + let T = !1; + for ( + this.tokens.matches1(lt.TokenType.bracketL) + ? this.tokens.copyTokenWithPrefix( + `${u[g].initializerName}() {this` + ) + : this.tokens.matches1(lt.TokenType.string) || + this.tokens.matches1(lt.TokenType.num) + ? (this.tokens.copyTokenWithPrefix( + `${u[g].initializerName}() {this[` + ), + (T = !0)) + : this.tokens.copyTokenWithPrefix( + `${u[g].initializerName}() {this.` + ); + this.tokens.currentIndex() < u[g].end; + + ) + T && + this.tokens.currentIndex() === u[g].equalsIndex && + this.tokens.appendCode(']'), + this.processToken(); + this.tokens.appendCode('}'), g++; + } else if ( + L < y.length && + this.tokens.currentIndex() >= y[L].start + ) { + for ( + this.tokens.currentIndex() < y[L].end && + this.tokens.removeInitialToken(); + this.tokens.currentIndex() < y[L].end; + + ) + this.tokens.removeToken(); + L++; + } else + this.tokens.currentIndex() === r + ? (this.tokens.copyToken(), + h && + this.tokens.appendCode( + `;${this.makeConstructorInitCode(a, d, s)};` + ), + this.processToken()) + : this.processToken(); + this.tokens.copyExpectedToken(lt.TokenType.braceR); + } + makeConstructorInitCode(t, s, i) { + return [...t, ...s.map((r) => `${i}.prototype.${r}.call(this)`)].join( + ';' + ); + } + processPossibleArrowParamEnd() { + if ( + this.tokens.matches2(lt.TokenType.parenR, lt.TokenType.colon) && + this.tokens.tokenAtRelativeIndex(1).isType + ) { + let t = this.tokens.currentIndex() + 1; + for (; this.tokens.tokens[t].isType; ) t++; + if (this.tokens.matches1AtIndex(t, lt.TokenType.arrow)) { + for ( + this.tokens.removeInitialToken(); + this.tokens.currentIndex() < t; + + ) + this.tokens.removeToken(); + return this.tokens.replaceTokenTrimmingLeftWhitespace(') =>'), !0; + } + } + return !1; + } + processPossibleAsyncArrowWithTypeParams() { + if ( + !this.tokens.matchesContextual(jx.ContextualKeyword._async) && + !this.tokens.matches1(lt.TokenType._async) + ) + return !1; + let t = this.tokens.tokenAtRelativeIndex(1); + if (t.type !== lt.TokenType.lessThan || !t.isType) return !1; + let s = this.tokens.currentIndex() + 1; + for (; this.tokens.tokens[s].isType; ) s++; + if (this.tokens.matches1AtIndex(s, lt.TokenType.parenL)) { + for ( + this.tokens.replaceToken('async ('), + this.tokens.removeInitialToken(); + this.tokens.currentIndex() < s; + + ) + this.tokens.removeToken(); + return ( + this.tokens.removeToken(), + this.processBalancedCode(), + this.processToken(), + !0 + ); + } + return !1; + } + processPossibleTypeRange() { + if (this.tokens.currentToken().isType) { + for ( + this.tokens.removeInitialToken(); + this.tokens.currentToken().isType; + + ) + this.tokens.removeToken(); + return !0; + } + return !1; + } + shiftMappings(t, s) { + for (let i = 0; i < t.length; i++) { + let r = t[i]; + r !== void 0 && (t[i] = r + s); + } + return t; + } + }; + Ec.default = Ic; + }); + var rf = Z((hr) => { + 'use strict'; + hr.__esModule = !0; + hr.LinesAndColumns = void 0; + var Mo = ` +`, + nf = '\r', + sf = (function () { + function e(t) { + this.string = t; + for (var s = [0], i = 0; i < t.length; ) + switch (t[i]) { + case Mo: + (i += Mo.length), s.push(i); + break; + case nf: + (i += nf.length), t[i] === Mo && (i += Mo.length), s.push(i); + break; + default: + i++; + break; + } + this.offsets = s; + } + return ( + (e.prototype.locationForIndex = function (t) { + if (t < 0 || t > this.string.length) return null; + for (var s = 0, i = this.offsets; i[s + 1] <= t; ) s++; + var r = t - i[s]; + return {line: s, column: r}; + }), + (e.prototype.indexForLocation = function (t) { + var s = t.line, + i = t.column; + return s < 0 || + s >= this.offsets.length || + i < 0 || + i > this.lengthOfLine(s) + ? null + : this.offsets[s] + i; + }), + (e.prototype.lengthOfLine = function (t) { + var s = this.offsets[t], + i = + t === this.offsets.length - 1 + ? this.string.length + : this.offsets[t + 1]; + return i - s; + }), + e + ); + })(); + hr.LinesAndColumns = sf; + hr.default = sf; + }); + var of = Z((Ac) => { + 'use strict'; + Object.defineProperty(Ac, '__esModule', {value: !0}); + function pg(e) { + return e && e.__esModule ? e : {default: e}; + } + var hg = rf(), + fg = pg(hg), + dg = be(); + function mg(e, t) { + if (t.length === 0) return ''; + let s = Object.keys(t[0]).filter( + (h) => + h !== 'type' && + h !== 'value' && + h !== 'start' && + h !== 'end' && + h !== 'loc' + ), + i = Object.keys(t[0].type).filter( + (h) => h !== 'label' && h !== 'keyword' + ), + r = ['Location', 'Label', 'Raw', ...s, ...i], + a = new fg.default(e), + u = [r, ...t.map(y)], + d = r.map(() => 0); + for (let h of u) + for (let T = 0; T < h.length; T++) d[T] = Math.max(d[T], h[T].length); + return u.map((h) => h.map((T, x) => T.padEnd(d[x])).join(' ')).join(` +`); + function y(h) { + let T = e.slice(h.start, h.end); + return [ + L(h.start, h.end), + dg.formatTokenType.call(void 0, h.type), + yg(String(T), 14), + ...s.map((x) => g(h[x], x)), + ...i.map((x) => g(h.type[x], x)), + ]; + } + function g(h, T) { + return h === !0 ? T : h === !1 || h === null ? '' : String(h); + } + function L(h, T) { + return `${p(h)}-${p(T)}`; + } + function p(h) { + let T = a.locationForIndex(h); + return T ? `${T.line + 1}:${T.column + 1}` : 'Unknown'; + } + } + Ac.default = mg; + function yg(e, t) { + return e.length > t ? `${e.slice(0, t - 3)}...` : e; + } + }); + var af = Z((Pc) => { + 'use strict'; + Object.defineProperty(Pc, '__esModule', {value: !0}); + function Tg(e) { + return e && e.__esModule ? e : {default: e}; + } + var Gt = be(), + kg = Wi(), + vg = Tg(kg); + function xg(e) { + let t = new Set(); + for (let s = 0; s < e.tokens.length; s++) + e.matches1AtIndex(s, Gt.TokenType._import) && + !e.matches3AtIndex( + s, + Gt.TokenType._import, + Gt.TokenType.name, + Gt.TokenType.eq + ) && + gg(e, s, t); + return t; + } + Pc.default = xg; + function gg(e, t, s) { + t++, + !e.matches1AtIndex(t, Gt.TokenType.parenL) && + (e.matches1AtIndex(t, Gt.TokenType.name) && + (s.add(e.identifierNameAtIndex(t)), + t++, + e.matches1AtIndex(t, Gt.TokenType.comma) && t++), + e.matches1AtIndex(t, Gt.TokenType.star) && + ((t += 2), s.add(e.identifierNameAtIndex(t)), t++), + e.matches1AtIndex(t, Gt.TokenType.braceL) && (t++, _g(e, t, s))); + } + function _g(e, t, s) { + for (;;) { + if (e.matches1AtIndex(t, Gt.TokenType.braceR)) return; + let i = vg.default.call(void 0, e, t); + if ( + ((t = i.endIndex), + i.isType || s.add(i.rightName), + e.matches2AtIndex(t, Gt.TokenType.comma, Gt.TokenType.braceR)) + ) + return; + if (e.matches1AtIndex(t, Gt.TokenType.braceR)) return; + if (e.matches1AtIndex(t, Gt.TokenType.comma)) t++; + else + throw new Error(`Unexpected token: ${JSON.stringify(e.tokens[t])}`); + } + } + }); + var uf = Z((fr) => { + 'use strict'; + Object.defineProperty(fr, '__esModule', {value: !0}); + function vs(e) { + return e && e.__esModule ? e : {default: e}; + } + var bg = N1(), + Cg = vs(bg), + wg = $1(), + Sg = vs(wg), + Ig = q1(), + Eg = H1(), + lf = vs(Eg), + Ag = G1(), + Pg = vs(Ag), + Ng = pp(), + Rg = Ul(), + Lg = Sh(), + Og = vs(Lg), + Dg = tf(), + Mg = vs(Dg), + Fg = of(), + Bg = vs(Fg), + Vg = af(), + jg = vs(Vg); + function $g() { + return '3.32.0'; + } + fr.getVersion = $g; + function qg(e, t) { + Ng.validateOptions.call(void 0, t); + try { + let s = cf(e, t), + r = new Mg.default( + s, + t.transforms, + !!t.enableLegacyBabel5ModuleInterop, + t + ).transform(), + a = {code: r.code}; + if (t.sourceMapOptions) { + if (!t.filePath) + throw new Error( + 'filePath must be specified when generating a source map.' + ); + a = { + ...a, + sourceMap: Sg.default.call( + void 0, + r, + t.filePath, + t.sourceMapOptions, + e, + s.tokenProcessor.tokens + ), + }; + } + return a; + } catch (s) { + throw ( + (t.filePath && + (s.message = `Error transforming ${t.filePath}: ${s.message}`), + s) + ); + } + } + fr.transform = qg; + function Kg(e, t) { + let s = cf(e, t).tokenProcessor.tokens; + return Bg.default.call(void 0, e, s); + } + fr.getFormattedTokens = Kg; + function cf(e, t) { + let s = t.transforms.includes('jsx'), + i = t.transforms.includes('typescript'), + r = t.transforms.includes('flow'), + a = t.disableESTransforms === !0, + u = Rg.parse.call(void 0, e, s, i, r), + d = u.tokens, + y = u.scopes, + g = new Pg.default(e, d), + L = new Ig.HelperManager(g), + p = new Og.default(e, d, r, a, L), + h = !!t.enableLegacyTypeScriptModuleInterop, + T = null; + return ( + t.transforms.includes('imports') + ? ((T = new Cg.default( + g, + p, + h, + t, + t.transforms.includes('typescript'), + L + )), + T.preprocessTokens(), + lf.default.call(void 0, p, y, T.getGlobalNames()), + t.transforms.includes('typescript') && T.pruneTypeOnlyImports()) + : t.transforms.includes('typescript') && + lf.default.call(void 0, p, y, jg.default.call(void 0, p)), + { + tokenProcessor: p, + scopes: y, + nameManager: g, + importProcessor: T, + helperManager: L, + } + ); + } + }); + var hf = Z((Fo, pf) => { + (function (e, t) { + typeof Fo == 'object' && typeof pf < 'u' + ? t(Fo) + : typeof define == 'function' && define.amd + ? define(['exports'], t) + : ((e = typeof globalThis < 'u' ? globalThis : e || self), + t((e.acorn = {}))); + })(Fo, function (e) { + 'use strict'; + var t = [ + 509, 0, 227, 0, 150, 4, 294, 9, 1368, 2, 2, 1, 6, 3, 41, 2, 5, 0, 166, + 1, 574, 3, 9, 9, 7, 9, 32, 4, 318, 1, 80, 3, 71, 10, 50, 3, 123, 2, + 54, 14, 32, 10, 3, 1, 11, 3, 46, 10, 8, 0, 46, 9, 7, 2, 37, 13, 2, 9, + 6, 1, 45, 0, 13, 2, 49, 13, 9, 3, 2, 11, 83, 11, 7, 0, 3, 0, 158, 11, + 6, 9, 7, 3, 56, 1, 2, 6, 3, 1, 3, 2, 10, 0, 11, 1, 3, 6, 4, 4, 68, 8, + 2, 0, 3, 0, 2, 3, 2, 4, 2, 0, 15, 1, 83, 17, 10, 9, 5, 0, 82, 19, 13, + 9, 214, 6, 3, 8, 28, 1, 83, 16, 16, 9, 82, 12, 9, 9, 7, 19, 58, 14, 5, + 9, 243, 14, 166, 9, 71, 5, 2, 1, 3, 3, 2, 0, 2, 1, 13, 9, 120, 6, 3, + 6, 4, 0, 29, 9, 41, 6, 2, 3, 9, 0, 10, 10, 47, 15, 343, 9, 54, 7, 2, + 7, 17, 9, 57, 21, 2, 13, 123, 5, 4, 0, 2, 1, 2, 6, 2, 0, 9, 9, 49, 4, + 2, 1, 2, 4, 9, 9, 330, 3, 10, 1, 2, 0, 49, 6, 4, 4, 14, 10, 5350, 0, + 7, 14, 11465, 27, 2343, 9, 87, 9, 39, 4, 60, 6, 26, 9, 535, 9, 470, 0, + 2, 54, 8, 3, 82, 0, 12, 1, 19628, 1, 4178, 9, 519, 45, 3, 22, 543, 4, + 4, 5, 9, 7, 3, 6, 31, 3, 149, 2, 1418, 49, 513, 54, 5, 49, 9, 0, 15, + 0, 23, 4, 2, 14, 1361, 6, 2, 16, 3, 6, 2, 1, 2, 4, 101, 0, 161, 6, 10, + 9, 357, 0, 62, 13, 499, 13, 245, 1, 2, 9, 726, 6, 110, 6, 6, 9, 4759, + 9, 787719, 239, + ], + s = [ + 0, 11, 2, 25, 2, 18, 2, 1, 2, 14, 3, 13, 35, 122, 70, 52, 268, 28, 4, + 48, 48, 31, 14, 29, 6, 37, 11, 29, 3, 35, 5, 7, 2, 4, 43, 157, 19, 35, + 5, 35, 5, 39, 9, 51, 13, 10, 2, 14, 2, 6, 2, 1, 2, 10, 2, 14, 2, 6, 2, + 1, 4, 51, 13, 310, 10, 21, 11, 7, 25, 5, 2, 41, 2, 8, 70, 5, 3, 0, 2, + 43, 2, 1, 4, 0, 3, 22, 11, 22, 10, 30, 66, 18, 2, 1, 11, 21, 11, 25, + 71, 55, 7, 1, 65, 0, 16, 3, 2, 2, 2, 28, 43, 28, 4, 28, 36, 7, 2, 27, + 28, 53, 11, 21, 11, 18, 14, 17, 111, 72, 56, 50, 14, 50, 14, 35, 39, + 27, 10, 22, 251, 41, 7, 1, 17, 2, 60, 28, 11, 0, 9, 21, 43, 17, 47, + 20, 28, 22, 13, 52, 58, 1, 3, 0, 14, 44, 33, 24, 27, 35, 30, 0, 3, 0, + 9, 34, 4, 0, 13, 47, 15, 3, 22, 0, 2, 0, 36, 17, 2, 24, 20, 1, 64, 6, + 2, 0, 2, 3, 2, 14, 2, 9, 8, 46, 39, 7, 3, 1, 3, 21, 2, 6, 2, 1, 2, 4, + 4, 0, 19, 0, 13, 4, 31, 9, 2, 0, 3, 0, 2, 37, 2, 0, 26, 0, 2, 0, 45, + 52, 19, 3, 21, 2, 31, 47, 21, 1, 2, 0, 185, 46, 42, 3, 37, 47, 21, 0, + 60, 42, 14, 0, 72, 26, 38, 6, 186, 43, 117, 63, 32, 7, 3, 0, 3, 7, 2, + 1, 2, 23, 16, 0, 2, 0, 95, 7, 3, 38, 17, 0, 2, 0, 29, 0, 11, 39, 8, 0, + 22, 0, 12, 45, 20, 0, 19, 72, 200, 32, 32, 8, 2, 36, 18, 0, 50, 29, + 113, 6, 2, 1, 2, 37, 22, 0, 26, 5, 2, 1, 2, 31, 15, 0, 328, 18, 16, 0, + 2, 12, 2, 33, 125, 0, 80, 921, 103, 110, 18, 195, 2637, 96, 16, 1071, + 18, 5, 26, 3994, 6, 582, 6842, 29, 1763, 568, 8, 30, 18, 78, 18, 29, + 19, 47, 17, 3, 32, 20, 6, 18, 433, 44, 212, 63, 129, 74, 6, 0, 67, 12, + 65, 1, 2, 0, 29, 6135, 9, 1237, 42, 9, 8936, 3, 2, 6, 2, 1, 2, 290, + 16, 0, 30, 2, 3, 0, 15, 3, 9, 395, 2309, 106, 6, 12, 4, 8, 8, 9, 5991, + 84, 2, 70, 2, 1, 3, 0, 3, 1, 3, 3, 2, 11, 2, 0, 2, 6, 2, 64, 2, 3, 3, + 7, 2, 6, 2, 27, 2, 3, 2, 4, 2, 0, 4, 6, 2, 339, 3, 24, 2, 24, 2, 30, + 2, 24, 2, 30, 2, 24, 2, 30, 2, 24, 2, 30, 2, 24, 2, 7, 1845, 30, 7, 5, + 262, 61, 147, 44, 11, 6, 17, 0, 322, 29, 19, 43, 485, 27, 229, 29, 3, + 0, 496, 6, 2, 3, 2, 1, 2, 14, 2, 196, 60, 67, 8, 0, 1205, 3, 2, 26, 2, + 1, 2, 0, 3, 0, 2, 9, 2, 3, 2, 0, 2, 0, 7, 0, 5, 0, 2, 0, 2, 0, 2, 2, + 2, 1, 2, 0, 3, 0, 2, 0, 2, 0, 2, 0, 2, 0, 2, 1, 2, 0, 3, 3, 2, 6, 2, + 3, 2, 3, 2, 0, 2, 9, 2, 16, 6, 2, 2, 4, 2, 16, 4421, 42719, 33, 4153, + 7, 221, 3, 5761, 15, 7472, 16, 621, 2467, 541, 1507, 4938, 6, 4191, + ], + i = + '\u200C\u200D\xB7\u0300-\u036F\u0387\u0483-\u0487\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u0610-\u061A\u064B-\u0669\u0670\u06D6-\u06DC\u06DF-\u06E4\u06E7\u06E8\u06EA-\u06ED\u06F0-\u06F9\u0711\u0730-\u074A\u07A6-\u07B0\u07C0-\u07C9\u07EB-\u07F3\u07FD\u0816-\u0819\u081B-\u0823\u0825-\u0827\u0829-\u082D\u0859-\u085B\u0897-\u089F\u08CA-\u08E1\u08E3-\u0903\u093A-\u093C\u093E-\u094F\u0951-\u0957\u0962\u0963\u0966-\u096F\u0981-\u0983\u09BC\u09BE-\u09C4\u09C7\u09C8\u09CB-\u09CD\u09D7\u09E2\u09E3\u09E6-\u09EF\u09FE\u0A01-\u0A03\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A66-\u0A71\u0A75\u0A81-\u0A83\u0ABC\u0ABE-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AE2\u0AE3\u0AE6-\u0AEF\u0AFA-\u0AFF\u0B01-\u0B03\u0B3C\u0B3E-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B55-\u0B57\u0B62\u0B63\u0B66-\u0B6F\u0B82\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD7\u0BE6-\u0BEF\u0C00-\u0C04\u0C3C\u0C3E-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C62\u0C63\u0C66-\u0C6F\u0C81-\u0C83\u0CBC\u0CBE-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CE2\u0CE3\u0CE6-\u0CEF\u0CF3\u0D00-\u0D03\u0D3B\u0D3C\u0D3E-\u0D44\u0D46-\u0D48\u0D4A-\u0D4D\u0D57\u0D62\u0D63\u0D66-\u0D6F\u0D81-\u0D83\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E31\u0E34-\u0E3A\u0E47-\u0E4E\u0E50-\u0E59\u0EB1\u0EB4-\u0EBC\u0EC8-\u0ECE\u0ED0-\u0ED9\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E\u0F3F\u0F71-\u0F84\u0F86\u0F87\u0F8D-\u0F97\u0F99-\u0FBC\u0FC6\u102B-\u103E\u1040-\u1049\u1056-\u1059\u105E-\u1060\u1062-\u1064\u1067-\u106D\u1071-\u1074\u1082-\u108D\u108F-\u109D\u135D-\u135F\u1369-\u1371\u1712-\u1715\u1732-\u1734\u1752\u1753\u1772\u1773\u17B4-\u17D3\u17DD\u17E0-\u17E9\u180B-\u180D\u180F-\u1819\u18A9\u1920-\u192B\u1930-\u193B\u1946-\u194F\u19D0-\u19DA\u1A17-\u1A1B\u1A55-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AB0-\u1ABD\u1ABF-\u1ACE\u1B00-\u1B04\u1B34-\u1B44\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1B82\u1BA1-\u1BAD\u1BB0-\u1BB9\u1BE6-\u1BF3\u1C24-\u1C37\u1C40-\u1C49\u1C50-\u1C59\u1CD0-\u1CD2\u1CD4-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1DC0-\u1DFF\u200C\u200D\u203F\u2040\u2054\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2CEF-\u2CF1\u2D7F\u2DE0-\u2DFF\u302A-\u302F\u3099\u309A\u30FB\uA620-\uA629\uA66F\uA674-\uA67D\uA69E\uA69F\uA6F0\uA6F1\uA802\uA806\uA80B\uA823-\uA827\uA82C\uA880\uA881\uA8B4-\uA8C5\uA8D0-\uA8D9\uA8E0-\uA8F1\uA8FF-\uA909\uA926-\uA92D\uA947-\uA953\uA980-\uA983\uA9B3-\uA9C0\uA9D0-\uA9D9\uA9E5\uA9F0-\uA9F9\uAA29-\uAA36\uAA43\uAA4C\uAA4D\uAA50-\uAA59\uAA7B-\uAA7D\uAAB0\uAAB2-\uAAB4\uAAB7\uAAB8\uAABE\uAABF\uAAC1\uAAEB-\uAAEF\uAAF5\uAAF6\uABE3-\uABEA\uABEC\uABED\uABF0-\uABF9\uFB1E\uFE00-\uFE0F\uFE20-\uFE2F\uFE33\uFE34\uFE4D-\uFE4F\uFF10-\uFF19\uFF3F\uFF65', + r = + '\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u0870-\u0887\u0889-\u088E\u08A0-\u08C9\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C5D\u0C60\u0C61\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D04-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E86-\u0E8A\u0E8C-\u0EA3\u0EA5\u0EA7-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u1711\u171F-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1878\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4C\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1C80-\u1C8A\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF3\u1CF5\u1CF6\u1CFA\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309B-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u31A0-\u31BF\u31F0-\u31FF\u3400-\u4DBF\u4E00-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7CD\uA7D0\uA7D1\uA7D3\uA7D5-\uA7DC\uA7F2-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB69\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC', + a = { + 3: 'abstract boolean byte char class double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile', + 5: 'class enum extends super const export import', + 6: 'enum', + strict: + 'implements interface let package private protected public static yield', + strictBind: 'eval arguments', + }, + u = + 'break case catch continue debugger default do else finally for function if return switch throw try var while with null true false instanceof typeof void delete new in this', + d = { + 5: u, + '5module': u + ' export import', + 6: u + ' const class extends export import super', + }, + y = /^in(stanceof)?$/, + g = new RegExp('[' + r + ']'), + L = new RegExp('[' + r + i + ']'); + function p(n, o) { + for (var l = 65536, f = 0; f < o.length; f += 2) { + if (((l += o[f]), l > n)) return !1; + if (((l += o[f + 1]), l >= n)) return !0; + } + return !1; + } + function h(n, o) { + return n < 65 + ? n === 36 + : n < 91 + ? !0 + : n < 97 + ? n === 95 + : n < 123 + ? !0 + : n <= 65535 + ? n >= 170 && g.test(String.fromCharCode(n)) + : o === !1 + ? !1 + : p(n, s); + } + function T(n, o) { + return n < 48 + ? n === 36 + : n < 58 + ? !0 + : n < 65 + ? !1 + : n < 91 + ? !0 + : n < 97 + ? n === 95 + : n < 123 + ? !0 + : n <= 65535 + ? n >= 170 && L.test(String.fromCharCode(n)) + : o === !1 + ? !1 + : p(n, s) || p(n, t); + } + var x = function (o, l) { + l === void 0 && (l = {}), + (this.label = o), + (this.keyword = l.keyword), + (this.beforeExpr = !!l.beforeExpr), + (this.startsExpr = !!l.startsExpr), + (this.isLoop = !!l.isLoop), + (this.isAssign = !!l.isAssign), + (this.prefix = !!l.prefix), + (this.postfix = !!l.postfix), + (this.binop = l.binop || null), + (this.updateContext = null); + }; + function w(n, o) { + return new x(n, {beforeExpr: !0, binop: o}); + } + var S = {beforeExpr: !0}, + A = {startsExpr: !0}, + U = {}; + function M(n, o) { + return o === void 0 && (o = {}), (o.keyword = n), (U[n] = new x(n, o)); + } + var c = { + num: new x('num', A), + regexp: new x('regexp', A), + string: new x('string', A), + name: new x('name', A), + privateId: new x('privateId', A), + eof: new x('eof'), + bracketL: new x('[', {beforeExpr: !0, startsExpr: !0}), + bracketR: new x(']'), + braceL: new x('{', {beforeExpr: !0, startsExpr: !0}), + braceR: new x('}'), + parenL: new x('(', {beforeExpr: !0, startsExpr: !0}), + parenR: new x(')'), + comma: new x(',', S), + semi: new x(';', S), + colon: new x(':', S), + dot: new x('.'), + question: new x('?', S), + questionDot: new x('?.'), + arrow: new x('=>', S), + template: new x('template'), + invalidTemplate: new x('invalidTemplate'), + ellipsis: new x('...', S), + backQuote: new x('`', A), + dollarBraceL: new x('${', {beforeExpr: !0, startsExpr: !0}), + eq: new x('=', {beforeExpr: !0, isAssign: !0}), + assign: new x('_=', {beforeExpr: !0, isAssign: !0}), + incDec: new x('++/--', {prefix: !0, postfix: !0, startsExpr: !0}), + prefix: new x('!/~', {beforeExpr: !0, prefix: !0, startsExpr: !0}), + logicalOR: w('||', 1), + logicalAND: w('&&', 2), + bitwiseOR: w('|', 3), + bitwiseXOR: w('^', 4), + bitwiseAND: w('&', 5), + equality: w('==/!=/===/!==', 6), + relational: w('/<=/>=', 7), + bitShift: w('<>/>>>', 8), + plusMin: new x('+/-', { + beforeExpr: !0, + binop: 9, + prefix: !0, + startsExpr: !0, + }), + modulo: w('%', 10), + star: w('*', 10), + slash: w('/', 10), + starstar: new x('**', {beforeExpr: !0}), + coalesce: w('??', 1), + _break: M('break'), + _case: M('case', S), + _catch: M('catch'), + _continue: M('continue'), + _debugger: M('debugger'), + _default: M('default', S), + _do: M('do', {isLoop: !0, beforeExpr: !0}), + _else: M('else', S), + _finally: M('finally'), + _for: M('for', {isLoop: !0}), + _function: M('function', A), + _if: M('if'), + _return: M('return', S), + _switch: M('switch'), + _throw: M('throw', S), + _try: M('try'), + _var: M('var'), + _const: M('const'), + _while: M('while', {isLoop: !0}), + _with: M('with'), + _new: M('new', {beforeExpr: !0, startsExpr: !0}), + _this: M('this', A), + _super: M('super', A), + _class: M('class', A), + _extends: M('extends', S), + _export: M('export'), + _import: M('import', A), + _null: M('null', A), + _true: M('true', A), + _false: M('false', A), + _in: M('in', {beforeExpr: !0, binop: 7}), + _instanceof: M('instanceof', {beforeExpr: !0, binop: 7}), + _typeof: M('typeof', {beforeExpr: !0, prefix: !0, startsExpr: !0}), + _void: M('void', {beforeExpr: !0, prefix: !0, startsExpr: !0}), + _delete: M('delete', {beforeExpr: !0, prefix: !0, startsExpr: !0}), + }, + R = /\r\n?|\n|\u2028|\u2029/, + W = new RegExp(R.source, 'g'); + function X(n) { + return n === 10 || n === 13 || n === 8232 || n === 8233; + } + function ie(n, o, l) { + l === void 0 && (l = n.length); + for (var f = o; f < l; f++) { + var m = n.charCodeAt(f); + if (X(m)) + return f < l - 1 && m === 13 && n.charCodeAt(f + 1) === 10 + ? f + 2 + : f + 1; + } + return -1; + } + var pe = /[\u1680\u2000-\u200a\u202f\u205f\u3000\ufeff]/, + ae = /(?:\s|\/\/.*|\/\*[^]*?\*\/)*/g, + He = Object.prototype, + qe = He.hasOwnProperty, + Bt = He.toString, + mt = + Object.hasOwn || + function (n, o) { + return qe.call(n, o); + }, + kt = + Array.isArray || + function (n) { + return Bt.call(n) === '[object Array]'; + }, + At = Object.create(null); + function tt(n) { + return ( + At[n] || (At[n] = new RegExp('^(?:' + n.replace(/ /g, '|') + ')$')) + ); + } + function nt(n) { + return n <= 65535 + ? String.fromCharCode(n) + : ((n -= 65536), + String.fromCharCode((n >> 10) + 55296, (n & 1023) + 56320)); + } + var _t = + /(?:[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/, + ct = function (o, l) { + (this.line = o), (this.column = l); + }; + ct.prototype.offset = function (o) { + return new ct(this.line, this.column + o); + }; + var wt = function (o, l, f) { + (this.start = l), + (this.end = f), + o.sourceFile !== null && (this.source = o.sourceFile); + }; + function $t(n, o) { + for (var l = 1, f = 0; ; ) { + var m = ie(n, f, o); + if (m < 0) return new ct(l, o - f); + ++l, (f = m); + } + } + var Pt = { + ecmaVersion: null, + sourceType: 'script', + onInsertedSemicolon: null, + onTrailingComma: null, + allowReserved: null, + allowReturnOutsideFunction: !1, + allowImportExportEverywhere: !1, + allowAwaitOutsideFunction: null, + allowSuperOutsideMethod: null, + allowHashBang: !1, + checkPrivateFields: !0, + locations: !1, + onToken: null, + onComment: null, + ranges: !1, + program: null, + sourceFile: null, + directSourceFile: null, + preserveParens: !1, + }, + qt = !1; + function Tn(n) { + var o = {}; + for (var l in Pt) o[l] = n && mt(n, l) ? n[l] : Pt[l]; + if ( + (o.ecmaVersion === 'latest' + ? (o.ecmaVersion = 1e8) + : o.ecmaVersion == null + ? (!qt && + typeof console == 'object' && + console.warn && + ((qt = !0), + console.warn(`Since Acorn 8.0.0, options.ecmaVersion is required. +Defaulting to 2020, but this will stop working in the future.`)), + (o.ecmaVersion = 11)) + : o.ecmaVersion >= 2015 && (o.ecmaVersion -= 2009), + o.allowReserved == null && (o.allowReserved = o.ecmaVersion < 5), + (!n || n.allowHashBang == null) && + (o.allowHashBang = o.ecmaVersion >= 14), + kt(o.onToken)) + ) { + var f = o.onToken; + o.onToken = function (m) { + return f.push(m); + }; + } + return kt(o.onComment) && (o.onComment = V(o, o.onComment)), o; + } + function V(n, o) { + return function (l, f, m, E, O, Y) { + var Q = {type: l ? 'Block' : 'Line', value: f, start: m, end: E}; + n.locations && (Q.loc = new wt(this, O, Y)), + n.ranges && (Q.range = [m, E]), + o.push(Q); + }; + } + var G = 1, + J = 2, + re = 4, + ve = 8, + he = 16, + Ie = 32, + Ee = 64, + Le = 128, + Xe = 256, + We = 512, + Ke = G | J | Xe; + function ut(n, o) { + return J | (n ? re : 0) | (o ? ve : 0); + } + var pt = 0, + bt = 1, + yt = 2, + vt = 3, + bn = 4, + Dn = 5, + Ge = function (o, l, f) { + (this.options = o = Tn(o)), + (this.sourceFile = o.sourceFile), + (this.keywords = tt( + d[ + o.ecmaVersion >= 6 + ? 6 + : o.sourceType === 'module' + ? '5module' + : 5 + ] + )); + var m = ''; + o.allowReserved !== !0 && + ((m = a[o.ecmaVersion >= 6 ? 6 : o.ecmaVersion === 5 ? 5 : 3]), + o.sourceType === 'module' && (m += ' await')), + (this.reservedWords = tt(m)); + var E = (m ? m + ' ' : '') + a.strict; + (this.reservedWordsStrict = tt(E)), + (this.reservedWordsStrictBind = tt(E + ' ' + a.strictBind)), + (this.input = String(l)), + (this.containsEsc = !1), + f + ? ((this.pos = f), + (this.lineStart = + this.input.lastIndexOf( + ` +`, + f - 1 + ) + 1), + (this.curLine = this.input + .slice(0, this.lineStart) + .split(R).length)) + : ((this.pos = this.lineStart = 0), (this.curLine = 1)), + (this.type = c.eof), + (this.value = null), + (this.start = this.end = this.pos), + (this.startLoc = this.endLoc = this.curPosition()), + (this.lastTokEndLoc = this.lastTokStartLoc = null), + (this.lastTokStart = this.lastTokEnd = this.pos), + (this.context = this.initialContext()), + (this.exprAllowed = !0), + (this.inModule = o.sourceType === 'module'), + (this.strict = this.inModule || this.strictDirective(this.pos)), + (this.potentialArrowAt = -1), + (this.potentialArrowInForAwait = !1), + (this.yieldPos = this.awaitPos = this.awaitIdentPos = 0), + (this.labels = []), + (this.undefinedExports = Object.create(null)), + this.pos === 0 && + o.allowHashBang && + this.input.slice(0, 2) === '#!' && + this.skipLineComment(2), + (this.scopeStack = []), + this.enterScope(G), + (this.regexpState = null), + (this.privateNameStack = []); + }, + St = { + inFunction: {configurable: !0}, + inGenerator: {configurable: !0}, + inAsync: {configurable: !0}, + canAwait: {configurable: !0}, + allowSuper: {configurable: !0}, + allowDirectSuper: {configurable: !0}, + treatFunctionsAsVar: {configurable: !0}, + allowNewDotTarget: {configurable: !0}, + inClassStaticBlock: {configurable: !0}, + }; + (Ge.prototype.parse = function () { + var o = this.options.program || this.startNode(); + return this.nextToken(), this.parseTopLevel(o); + }), + (St.inFunction.get = function () { + return (this.currentVarScope().flags & J) > 0; + }), + (St.inGenerator.get = function () { + return (this.currentVarScope().flags & ve) > 0; + }), + (St.inAsync.get = function () { + return (this.currentVarScope().flags & re) > 0; + }), + (St.canAwait.get = function () { + for (var n = this.scopeStack.length - 1; n >= 0; n--) { + var o = this.scopeStack[n], + l = o.flags; + if (l & (Xe | We)) return !1; + if (l & J) return (l & re) > 0; + } + return ( + (this.inModule && this.options.ecmaVersion >= 13) || + this.options.allowAwaitOutsideFunction + ); + }), + (St.allowSuper.get = function () { + var n = this.currentThisScope(), + o = n.flags; + return (o & Ee) > 0 || this.options.allowSuperOutsideMethod; + }), + (St.allowDirectSuper.get = function () { + return (this.currentThisScope().flags & Le) > 0; + }), + (St.treatFunctionsAsVar.get = function () { + return this.treatFunctionsAsVarInScope(this.currentScope()); + }), + (St.allowNewDotTarget.get = function () { + for (var n = this.scopeStack.length - 1; n >= 0; n--) { + var o = this.scopeStack[n], + l = o.flags; + if (l & (Xe | We) || (l & J && !(l & he))) return !0; + } + return !1; + }), + (St.inClassStaticBlock.get = function () { + return (this.currentVarScope().flags & Xe) > 0; + }), + (Ge.extend = function () { + for (var o = [], l = arguments.length; l--; ) o[l] = arguments[l]; + for (var f = this, m = 0; m < o.length; m++) f = o[m](f); + return f; + }), + (Ge.parse = function (o, l) { + return new this(l, o).parse(); + }), + (Ge.parseExpressionAt = function (o, l, f) { + var m = new this(f, o, l); + return m.nextToken(), m.parseExpression(); + }), + (Ge.tokenizer = function (o, l) { + return new this(l, o); + }), + Object.defineProperties(Ge.prototype, St); + var ot = Ge.prototype, + zt = /^(?:'((?:\\[^]|[^'\\])*?)'|"((?:\\[^]|[^"\\])*?)")/; + (ot.strictDirective = function (n) { + if (this.options.ecmaVersion < 5) return !1; + for (;;) { + (ae.lastIndex = n), (n += ae.exec(this.input)[0].length); + var o = zt.exec(this.input.slice(n)); + if (!o) return !1; + if ((o[1] || o[2]) === 'use strict') { + ae.lastIndex = n + o[0].length; + var l = ae.exec(this.input), + f = l.index + l[0].length, + m = this.input.charAt(f); + return ( + m === ';' || + m === '}' || + (R.test(l[0]) && + !( + /[(`.[+\-/*%<>=,?^&]/.test(m) || + (m === '!' && this.input.charAt(f + 1) === '=') + )) + ); + } + (n += o[0].length), + (ae.lastIndex = n), + (n += ae.exec(this.input)[0].length), + this.input[n] === ';' && n++; + } + }), + (ot.eat = function (n) { + return this.type === n ? (this.next(), !0) : !1; + }), + (ot.isContextual = function (n) { + return this.type === c.name && this.value === n && !this.containsEsc; + }), + (ot.eatContextual = function (n) { + return this.isContextual(n) ? (this.next(), !0) : !1; + }), + (ot.expectContextual = function (n) { + this.eatContextual(n) || this.unexpected(); + }), + (ot.canInsertSemicolon = function () { + return ( + this.type === c.eof || + this.type === c.braceR || + R.test(this.input.slice(this.lastTokEnd, this.start)) + ); + }), + (ot.insertSemicolon = function () { + if (this.canInsertSemicolon()) + return ( + this.options.onInsertedSemicolon && + this.options.onInsertedSemicolon( + this.lastTokEnd, + this.lastTokEndLoc + ), + !0 + ); + }), + (ot.semicolon = function () { + !this.eat(c.semi) && !this.insertSemicolon() && this.unexpected(); + }), + (ot.afterTrailingComma = function (n, o) { + if (this.type === n) + return ( + this.options.onTrailingComma && + this.options.onTrailingComma( + this.lastTokStart, + this.lastTokStartLoc + ), + o || this.next(), + !0 + ); + }), + (ot.expect = function (n) { + this.eat(n) || this.unexpected(); + }), + (ot.unexpected = function (n) { + this.raise(n ?? this.start, 'Unexpected token'); + }); + var Xt = function () { + this.shorthandAssign = + this.trailingComma = + this.parenthesizedAssign = + this.parenthesizedBind = + this.doubleProto = + -1; + }; + (ot.checkPatternErrors = function (n, o) { + if (n) { + n.trailingComma > -1 && + this.raiseRecoverable( + n.trailingComma, + 'Comma is not permitted after the rest element' + ); + var l = o ? n.parenthesizedAssign : n.parenthesizedBind; + l > -1 && + this.raiseRecoverable( + l, + o ? 'Assigning to rvalue' : 'Parenthesized pattern' + ); + } + }), + (ot.checkExpressionErrors = function (n, o) { + if (!n) return !1; + var l = n.shorthandAssign, + f = n.doubleProto; + if (!o) return l >= 0 || f >= 0; + l >= 0 && + this.raise( + l, + 'Shorthand property assignments are valid only in destructuring patterns' + ), + f >= 0 && + this.raiseRecoverable(f, 'Redefinition of __proto__ property'); + }), + (ot.checkYieldAwaitInDefaultParams = function () { + this.yieldPos && + (!this.awaitPos || this.yieldPos < this.awaitPos) && + this.raise( + this.yieldPos, + 'Yield expression cannot be a default value' + ), + this.awaitPos && + this.raise( + this.awaitPos, + 'Await expression cannot be a default value' + ); + }), + (ot.isSimpleAssignTarget = function (n) { + return n.type === 'ParenthesizedExpression' + ? this.isSimpleAssignTarget(n.expression) + : n.type === 'Identifier' || n.type === 'MemberExpression'; + }); + var te = Ge.prototype; + te.parseTopLevel = function (n) { + var o = Object.create(null); + for (n.body || (n.body = []); this.type !== c.eof; ) { + var l = this.parseStatement(null, !0, o); + n.body.push(l); + } + if (this.inModule) + for ( + var f = 0, m = Object.keys(this.undefinedExports); + f < m.length; + f += 1 + ) { + var E = m[f]; + this.raiseRecoverable( + this.undefinedExports[E].start, + "Export '" + E + "' is not defined" + ); + } + return ( + this.adaptDirectivePrologue(n.body), + this.next(), + (n.sourceType = this.options.sourceType), + this.finishNode(n, 'Program') + ); + }; + var Cn = {kind: 'loop'}, + Zn = {kind: 'switch'}; + (te.isLet = function (n) { + if (this.options.ecmaVersion < 6 || !this.isContextual('let')) + return !1; + ae.lastIndex = this.pos; + var o = ae.exec(this.input), + l = this.pos + o[0].length, + f = this.input.charCodeAt(l); + if (f === 91 || f === 92) return !0; + if (n) return !1; + if (f === 123 || (f > 55295 && f < 56320)) return !0; + if (h(f, !0)) { + for (var m = l + 1; T((f = this.input.charCodeAt(m)), !0); ) ++m; + if (f === 92 || (f > 55295 && f < 56320)) return !0; + var E = this.input.slice(l, m); + if (!y.test(E)) return !0; + } + return !1; + }), + (te.isAsyncFunction = function () { + if (this.options.ecmaVersion < 8 || !this.isContextual('async')) + return !1; + ae.lastIndex = this.pos; + var n = ae.exec(this.input), + o = this.pos + n[0].length, + l; + return ( + !R.test(this.input.slice(this.pos, o)) && + this.input.slice(o, o + 8) === 'function' && + (o + 8 === this.input.length || + !( + T((l = this.input.charCodeAt(o + 8))) || + (l > 55295 && l < 56320) + )) + ); + }), + (te.isUsingKeyword = function (n, o) { + if ( + this.options.ecmaVersion < 17 || + !this.isContextual(n ? 'await' : 'using') + ) + return !1; + ae.lastIndex = this.pos; + var l = ae.exec(this.input), + f = this.pos + l[0].length; + if (R.test(this.input.slice(this.pos, f))) return !1; + if (n) { + var m = f + 5, + E; + if ( + this.input.slice(f, m) !== 'using' || + m === this.input.length || + T((E = this.input.charCodeAt(m))) || + (E > 55295 && E < 56320) + ) + return !1; + ae.lastIndex = m; + var O = ae.exec(this.input); + if (O && R.test(this.input.slice(m, m + O[0].length))) return !1; + } + if (o) { + var Y = f + 2, + Q; + if ( + this.input.slice(f, Y) === 'of' && + (Y === this.input.length || + (!T((Q = this.input.charCodeAt(Y))) && + !(Q > 55295 && Q < 56320))) + ) + return !1; + } + var Te = this.input.charCodeAt(f); + return h(Te, !0) || Te === 92; + }), + (te.isAwaitUsing = function (n) { + return this.isUsingKeyword(!0, n); + }), + (te.isUsing = function (n) { + return this.isUsingKeyword(!1, n); + }), + (te.parseStatement = function (n, o, l) { + var f = this.type, + m = this.startNode(), + E; + switch ((this.isLet(n) && ((f = c._var), (E = 'let')), f)) { + case c._break: + case c._continue: + return this.parseBreakContinueStatement(m, f.keyword); + case c._debugger: + return this.parseDebuggerStatement(m); + case c._do: + return this.parseDoStatement(m); + case c._for: + return this.parseForStatement(m); + case c._function: + return ( + n && + (this.strict || (n !== 'if' && n !== 'label')) && + this.options.ecmaVersion >= 6 && + this.unexpected(), + this.parseFunctionStatement(m, !1, !n) + ); + case c._class: + return n && this.unexpected(), this.parseClass(m, !0); + case c._if: + return this.parseIfStatement(m); + case c._return: + return this.parseReturnStatement(m); + case c._switch: + return this.parseSwitchStatement(m); + case c._throw: + return this.parseThrowStatement(m); + case c._try: + return this.parseTryStatement(m); + case c._const: + case c._var: + return ( + (E = E || this.value), + n && E !== 'var' && this.unexpected(), + this.parseVarStatement(m, E) + ); + case c._while: + return this.parseWhileStatement(m); + case c._with: + return this.parseWithStatement(m); + case c.braceL: + return this.parseBlock(!0, m); + case c.semi: + return this.parseEmptyStatement(m); + case c._export: + case c._import: + if (this.options.ecmaVersion > 10 && f === c._import) { + ae.lastIndex = this.pos; + var O = ae.exec(this.input), + Y = this.pos + O[0].length, + Q = this.input.charCodeAt(Y); + if (Q === 40 || Q === 46) + return this.parseExpressionStatement( + m, + this.parseExpression() + ); + } + return ( + this.options.allowImportExportEverywhere || + (o || + this.raise( + this.start, + "'import' and 'export' may only appear at the top level" + ), + this.inModule || + this.raise( + this.start, + "'import' and 'export' may appear only with 'sourceType: module'" + )), + f === c._import ? this.parseImport(m) : this.parseExport(m, l) + ); + default: + if (this.isAsyncFunction()) + return ( + n && this.unexpected(), + this.next(), + this.parseFunctionStatement(m, !0, !n) + ); + var Te = this.isAwaitUsing(!1) + ? 'await using' + : this.isUsing(!1) + ? 'using' + : null; + if (Te) + return ( + o && + this.options.sourceType === 'script' && + this.raise( + this.start, + 'Using declaration cannot appear in the top level when source type is `script`' + ), + Te === 'await using' && + (this.canAwait || + this.raise( + this.start, + 'Await using cannot appear outside of async function' + ), + this.next()), + this.next(), + this.parseVar(m, !1, Te), + this.semicolon(), + this.finishNode(m, 'VariableDeclaration') + ); + var xe = this.value, + Ze = this.parseExpression(); + return f === c.name && + Ze.type === 'Identifier' && + this.eat(c.colon) + ? this.parseLabeledStatement(m, xe, Ze, n) + : this.parseExpressionStatement(m, Ze); + } + }), + (te.parseBreakContinueStatement = function (n, o) { + var l = o === 'break'; + this.next(), + this.eat(c.semi) || this.insertSemicolon() + ? (n.label = null) + : this.type !== c.name + ? this.unexpected() + : ((n.label = this.parseIdent()), this.semicolon()); + for (var f = 0; f < this.labels.length; ++f) { + var m = this.labels[f]; + if ( + (n.label == null || m.name === n.label.name) && + ((m.kind != null && (l || m.kind === 'loop')) || (n.label && l)) + ) + break; + } + return ( + f === this.labels.length && this.raise(n.start, 'Unsyntactic ' + o), + this.finishNode(n, l ? 'BreakStatement' : 'ContinueStatement') + ); + }), + (te.parseDebuggerStatement = function (n) { + return ( + this.next(), + this.semicolon(), + this.finishNode(n, 'DebuggerStatement') + ); + }), + (te.parseDoStatement = function (n) { + return ( + this.next(), + this.labels.push(Cn), + (n.body = this.parseStatement('do')), + this.labels.pop(), + this.expect(c._while), + (n.test = this.parseParenExpression()), + this.options.ecmaVersion >= 6 ? this.eat(c.semi) : this.semicolon(), + this.finishNode(n, 'DoWhileStatement') + ); + }), + (te.parseForStatement = function (n) { + this.next(); + var o = + this.options.ecmaVersion >= 9 && + this.canAwait && + this.eatContextual('await') + ? this.lastTokStart + : -1; + if ( + (this.labels.push(Cn), + this.enterScope(0), + this.expect(c.parenL), + this.type === c.semi) + ) + return o > -1 && this.unexpected(o), this.parseFor(n, null); + var l = this.isLet(); + if (this.type === c._var || this.type === c._const || l) { + var f = this.startNode(), + m = l ? 'let' : this.value; + return ( + this.next(), + this.parseVar(f, !0, m), + this.finishNode(f, 'VariableDeclaration'), + this.parseForAfterInit(n, f, o) + ); + } + var E = this.isContextual('let'), + O = !1, + Y = this.isUsing(!0) + ? 'using' + : this.isAwaitUsing(!0) + ? 'await using' + : null; + if (Y) { + var Q = this.startNode(); + return ( + this.next(), + Y === 'await using' && this.next(), + this.parseVar(Q, !0, Y), + this.finishNode(Q, 'VariableDeclaration'), + this.parseForAfterInit(n, Q, o) + ); + } + var Te = this.containsEsc, + xe = new Xt(), + Ze = this.start, + Lt = + o > -1 + ? this.parseExprSubscripts(xe, 'await') + : this.parseExpression(!0, xe); + return this.type === c._in || + (O = this.options.ecmaVersion >= 6 && this.isContextual('of')) + ? (o > -1 + ? (this.type === c._in && this.unexpected(o), (n.await = !0)) + : O && + this.options.ecmaVersion >= 8 && + (Lt.start === Ze && + !Te && + Lt.type === 'Identifier' && + Lt.name === 'async' + ? this.unexpected() + : this.options.ecmaVersion >= 9 && (n.await = !1)), + E && + O && + this.raise( + Lt.start, + "The left-hand side of a for-of loop may not start with 'let'." + ), + this.toAssignable(Lt, !1, xe), + this.checkLValPattern(Lt), + this.parseForIn(n, Lt)) + : (this.checkExpressionErrors(xe, !0), + o > -1 && this.unexpected(o), + this.parseFor(n, Lt)); + }), + (te.parseForAfterInit = function (n, o, l) { + return (this.type === c._in || + (this.options.ecmaVersion >= 6 && this.isContextual('of'))) && + o.declarations.length === 1 + ? (this.options.ecmaVersion >= 9 && + (this.type === c._in + ? l > -1 && this.unexpected(l) + : (n.await = l > -1)), + this.parseForIn(n, o)) + : (l > -1 && this.unexpected(l), this.parseFor(n, o)); + }), + (te.parseFunctionStatement = function (n, o, l) { + return this.next(), this.parseFunction(n, Mn | (l ? 0 : xs), !1, o); + }), + (te.parseIfStatement = function (n) { + return ( + this.next(), + (n.test = this.parseParenExpression()), + (n.consequent = this.parseStatement('if')), + (n.alternate = this.eat(c._else) + ? this.parseStatement('if') + : null), + this.finishNode(n, 'IfStatement') + ); + }), + (te.parseReturnStatement = function (n) { + return ( + !this.inFunction && + !this.options.allowReturnOutsideFunction && + this.raise(this.start, "'return' outside of function"), + this.next(), + this.eat(c.semi) || this.insertSemicolon() + ? (n.argument = null) + : ((n.argument = this.parseExpression()), this.semicolon()), + this.finishNode(n, 'ReturnStatement') + ); + }), + (te.parseSwitchStatement = function (n) { + this.next(), + (n.discriminant = this.parseParenExpression()), + (n.cases = []), + this.expect(c.braceL), + this.labels.push(Zn), + this.enterScope(0); + for (var o, l = !1; this.type !== c.braceR; ) + if (this.type === c._case || this.type === c._default) { + var f = this.type === c._case; + o && this.finishNode(o, 'SwitchCase'), + n.cases.push((o = this.startNode())), + (o.consequent = []), + this.next(), + f + ? (o.test = this.parseExpression()) + : (l && + this.raiseRecoverable( + this.lastTokStart, + 'Multiple default clauses' + ), + (l = !0), + (o.test = null)), + this.expect(c.colon); + } else + o || this.unexpected(), + o.consequent.push(this.parseStatement(null)); + return ( + this.exitScope(), + o && this.finishNode(o, 'SwitchCase'), + this.next(), + this.labels.pop(), + this.finishNode(n, 'SwitchStatement') + ); + }), + (te.parseThrowStatement = function (n) { + return ( + this.next(), + R.test(this.input.slice(this.lastTokEnd, this.start)) && + this.raise(this.lastTokEnd, 'Illegal newline after throw'), + (n.argument = this.parseExpression()), + this.semicolon(), + this.finishNode(n, 'ThrowStatement') + ); + }); + var _i = []; + (te.parseCatchClauseParam = function () { + var n = this.parseBindingAtom(), + o = n.type === 'Identifier'; + return ( + this.enterScope(o ? Ie : 0), + this.checkLValPattern(n, o ? bn : yt), + this.expect(c.parenR), + n + ); + }), + (te.parseTryStatement = function (n) { + if ( + (this.next(), + (n.block = this.parseBlock()), + (n.handler = null), + this.type === c._catch) + ) { + var o = this.startNode(); + this.next(), + this.eat(c.parenL) + ? (o.param = this.parseCatchClauseParam()) + : (this.options.ecmaVersion < 10 && this.unexpected(), + (o.param = null), + this.enterScope(0)), + (o.body = this.parseBlock(!1)), + this.exitScope(), + (n.handler = this.finishNode(o, 'CatchClause')); + } + return ( + (n.finalizer = this.eat(c._finally) ? this.parseBlock() : null), + !n.handler && + !n.finalizer && + this.raise(n.start, 'Missing catch or finally clause'), + this.finishNode(n, 'TryStatement') + ); + }), + (te.parseVarStatement = function (n, o, l) { + return ( + this.next(), + this.parseVar(n, !1, o, l), + this.semicolon(), + this.finishNode(n, 'VariableDeclaration') + ); + }), + (te.parseWhileStatement = function (n) { + return ( + this.next(), + (n.test = this.parseParenExpression()), + this.labels.push(Cn), + (n.body = this.parseStatement('while')), + this.labels.pop(), + this.finishNode(n, 'WhileStatement') + ); + }), + (te.parseWithStatement = function (n) { + return ( + this.strict && this.raise(this.start, "'with' in strict mode"), + this.next(), + (n.object = this.parseParenExpression()), + (n.body = this.parseStatement('with')), + this.finishNode(n, 'WithStatement') + ); + }), + (te.parseEmptyStatement = function (n) { + return this.next(), this.finishNode(n, 'EmptyStatement'); + }), + (te.parseLabeledStatement = function (n, o, l, f) { + for (var m = 0, E = this.labels; m < E.length; m += 1) { + var O = E[m]; + O.name === o && + this.raise(l.start, "Label '" + o + "' is already declared"); + } + for ( + var Y = this.type.isLoop + ? 'loop' + : this.type === c._switch + ? 'switch' + : null, + Q = this.labels.length - 1; + Q >= 0; + Q-- + ) { + var Te = this.labels[Q]; + if (Te.statementStart === n.start) + (Te.statementStart = this.start), (Te.kind = Y); + else break; + } + return ( + this.labels.push({name: o, kind: Y, statementStart: this.start}), + (n.body = this.parseStatement( + f ? (f.indexOf('label') === -1 ? f + 'label' : f) : 'label' + )), + this.labels.pop(), + (n.label = l), + this.finishNode(n, 'LabeledStatement') + ); + }), + (te.parseExpressionStatement = function (n, o) { + return ( + (n.expression = o), + this.semicolon(), + this.finishNode(n, 'ExpressionStatement') + ); + }), + (te.parseBlock = function (n, o, l) { + for ( + n === void 0 && (n = !0), + o === void 0 && (o = this.startNode()), + o.body = [], + this.expect(c.braceL), + n && this.enterScope(0); + this.type !== c.braceR; + + ) { + var f = this.parseStatement(null); + o.body.push(f); + } + return ( + l && (this.strict = !1), + this.next(), + n && this.exitScope(), + this.finishNode(o, 'BlockStatement') + ); + }), + (te.parseFor = function (n, o) { + return ( + (n.init = o), + this.expect(c.semi), + (n.test = this.type === c.semi ? null : this.parseExpression()), + this.expect(c.semi), + (n.update = this.type === c.parenR ? null : this.parseExpression()), + this.expect(c.parenR), + (n.body = this.parseStatement('for')), + this.exitScope(), + this.labels.pop(), + this.finishNode(n, 'ForStatement') + ); + }), + (te.parseForIn = function (n, o) { + var l = this.type === c._in; + return ( + this.next(), + o.type === 'VariableDeclaration' && + o.declarations[0].init != null && + (!l || + this.options.ecmaVersion < 8 || + this.strict || + o.kind !== 'var' || + o.declarations[0].id.type !== 'Identifier') && + this.raise( + o.start, + (l ? 'for-in' : 'for-of') + + ' loop variable declaration may not have an initializer' + ), + (n.left = o), + (n.right = l ? this.parseExpression() : this.parseMaybeAssign()), + this.expect(c.parenR), + (n.body = this.parseStatement('for')), + this.exitScope(), + this.labels.pop(), + this.finishNode(n, l ? 'ForInStatement' : 'ForOfStatement') + ); + }), + (te.parseVar = function (n, o, l, f) { + for (n.declarations = [], n.kind = l; ; ) { + var m = this.startNode(); + if ( + (this.parseVarId(m, l), + this.eat(c.eq) + ? (m.init = this.parseMaybeAssign(o)) + : !f && + l === 'const' && + !( + this.type === c._in || + (this.options.ecmaVersion >= 6 && this.isContextual('of')) + ) + ? this.unexpected() + : !f && + (l === 'using' || l === 'await using') && + this.options.ecmaVersion >= 17 && + this.type !== c._in && + !this.isContextual('of') + ? this.raise( + this.lastTokEnd, + 'Missing initializer in ' + l + ' declaration' + ) + : !f && + m.id.type !== 'Identifier' && + !(o && (this.type === c._in || this.isContextual('of'))) + ? this.raise( + this.lastTokEnd, + 'Complex binding patterns require an initialization value' + ) + : (m.init = null), + n.declarations.push(this.finishNode(m, 'VariableDeclarator')), + !this.eat(c.comma)) + ) + break; + } + return n; + }), + (te.parseVarId = function (n, o) { + (n.id = + o === 'using' || o === 'await using' + ? this.parseIdent() + : this.parseBindingAtom()), + this.checkLValPattern(n.id, o === 'var' ? bt : yt, !1); + }); + var Mn = 1, + xs = 2, + Ds = 4; + (te.parseFunction = function (n, o, l, f, m) { + this.initFunction(n), + (this.options.ecmaVersion >= 9 || + (this.options.ecmaVersion >= 6 && !f)) && + (this.type === c.star && o & xs && this.unexpected(), + (n.generator = this.eat(c.star))), + this.options.ecmaVersion >= 8 && (n.async = !!f), + o & Mn && + ((n.id = o & Ds && this.type !== c.name ? null : this.parseIdent()), + n.id && + !(o & xs) && + this.checkLValSimple( + n.id, + this.strict || n.generator || n.async + ? this.treatFunctionsAsVar + ? bt + : yt + : vt + )); + var E = this.yieldPos, + O = this.awaitPos, + Y = this.awaitIdentPos; + return ( + (this.yieldPos = 0), + (this.awaitPos = 0), + (this.awaitIdentPos = 0), + this.enterScope(ut(n.async, n.generator)), + o & Mn || (n.id = this.type === c.name ? this.parseIdent() : null), + this.parseFunctionParams(n), + this.parseFunctionBody(n, l, !1, m), + (this.yieldPos = E), + (this.awaitPos = O), + (this.awaitIdentPos = Y), + this.finishNode( + n, + o & Mn ? 'FunctionDeclaration' : 'FunctionExpression' + ) + ); + }), + (te.parseFunctionParams = function (n) { + this.expect(c.parenL), + (n.params = this.parseBindingList( + c.parenR, + !1, + this.options.ecmaVersion >= 8 + )), + this.checkYieldAwaitInDefaultParams(); + }), + (te.parseClass = function (n, o) { + this.next(); + var l = this.strict; + (this.strict = !0), this.parseClassId(n, o), this.parseClassSuper(n); + var f = this.enterClassBody(), + m = this.startNode(), + E = !1; + for (m.body = [], this.expect(c.braceL); this.type !== c.braceR; ) { + var O = this.parseClassElement(n.superClass !== null); + O && + (m.body.push(O), + O.type === 'MethodDefinition' && O.kind === 'constructor' + ? (E && + this.raiseRecoverable( + O.start, + 'Duplicate constructor in the same class' + ), + (E = !0)) + : O.key && + O.key.type === 'PrivateIdentifier' && + bi(f, O) && + this.raiseRecoverable( + O.key.start, + "Identifier '#" + O.key.name + "' has already been declared" + )); + } + return ( + (this.strict = l), + this.next(), + (n.body = this.finishNode(m, 'ClassBody')), + this.exitClassBody(), + this.finishNode(n, o ? 'ClassDeclaration' : 'ClassExpression') + ); + }), + (te.parseClassElement = function (n) { + if (this.eat(c.semi)) return null; + var o = this.options.ecmaVersion, + l = this.startNode(), + f = '', + m = !1, + E = !1, + O = 'method', + Y = !1; + if (this.eatContextual('static')) { + if (o >= 13 && this.eat(c.braceL)) + return this.parseClassStaticBlock(l), l; + this.isClassElementNameStart() || this.type === c.star + ? (Y = !0) + : (f = 'static'); + } + if ( + ((l.static = Y), + !f && + o >= 8 && + this.eatContextual('async') && + ((this.isClassElementNameStart() || this.type === c.star) && + !this.canInsertSemicolon() + ? (E = !0) + : (f = 'async')), + !f && (o >= 9 || !E) && this.eat(c.star) && (m = !0), + !f && !E && !m) + ) { + var Q = this.value; + (this.eatContextual('get') || this.eatContextual('set')) && + (this.isClassElementNameStart() ? (O = Q) : (f = Q)); + } + if ( + (f + ? ((l.computed = !1), + (l.key = this.startNodeAt( + this.lastTokStart, + this.lastTokStartLoc + )), + (l.key.name = f), + this.finishNode(l.key, 'Identifier')) + : this.parseClassElementName(l), + o < 13 || this.type === c.parenL || O !== 'method' || m || E) + ) { + var Te = !l.static && es(l, 'constructor'), + xe = Te && n; + Te && + O !== 'method' && + this.raise( + l.key.start, + "Constructor can't have get/set modifier" + ), + (l.kind = Te ? 'constructor' : O), + this.parseClassMethod(l, m, E, xe); + } else this.parseClassField(l); + return l; + }), + (te.isClassElementNameStart = function () { + return ( + this.type === c.name || + this.type === c.privateId || + this.type === c.num || + this.type === c.string || + this.type === c.bracketL || + this.type.keyword + ); + }), + (te.parseClassElementName = function (n) { + this.type === c.privateId + ? (this.value === 'constructor' && + this.raise( + this.start, + "Classes can't have an element named '#constructor'" + ), + (n.computed = !1), + (n.key = this.parsePrivateIdent())) + : this.parsePropertyName(n); + }), + (te.parseClassMethod = function (n, o, l, f) { + var m = n.key; + n.kind === 'constructor' + ? (o && this.raise(m.start, "Constructor can't be a generator"), + l && this.raise(m.start, "Constructor can't be an async method")) + : n.static && + es(n, 'prototype') && + this.raise( + m.start, + 'Classes may not have a static property named prototype' + ); + var E = (n.value = this.parseMethod(o, l, f)); + return ( + n.kind === 'get' && + E.params.length !== 0 && + this.raiseRecoverable(E.start, 'getter should have no params'), + n.kind === 'set' && + E.params.length !== 1 && + this.raiseRecoverable( + E.start, + 'setter should have exactly one param' + ), + n.kind === 'set' && + E.params[0].type === 'RestElement' && + this.raiseRecoverable( + E.params[0].start, + 'Setter cannot use rest params' + ), + this.finishNode(n, 'MethodDefinition') + ); + }), + (te.parseClassField = function (n) { + return ( + es(n, 'constructor') + ? this.raise( + n.key.start, + "Classes can't have a field named 'constructor'" + ) + : n.static && + es(n, 'prototype') && + this.raise( + n.key.start, + "Classes can't have a static field named 'prototype'" + ), + this.eat(c.eq) + ? (this.enterScope(We | Ee), + (n.value = this.parseMaybeAssign()), + this.exitScope()) + : (n.value = null), + this.semicolon(), + this.finishNode(n, 'PropertyDefinition') + ); + }), + (te.parseClassStaticBlock = function (n) { + n.body = []; + var o = this.labels; + for ( + this.labels = [], this.enterScope(Xe | Ee); + this.type !== c.braceR; + + ) { + var l = this.parseStatement(null); + n.body.push(l); + } + return ( + this.next(), + this.exitScope(), + (this.labels = o), + this.finishNode(n, 'StaticBlock') + ); + }), + (te.parseClassId = function (n, o) { + this.type === c.name + ? ((n.id = this.parseIdent()), + o && this.checkLValSimple(n.id, yt, !1)) + : (o === !0 && this.unexpected(), (n.id = null)); + }), + (te.parseClassSuper = function (n) { + n.superClass = this.eat(c._extends) + ? this.parseExprSubscripts(null, !1) + : null; + }), + (te.enterClassBody = function () { + var n = {declared: Object.create(null), used: []}; + return this.privateNameStack.push(n), n.declared; + }), + (te.exitClassBody = function () { + var n = this.privateNameStack.pop(), + o = n.declared, + l = n.used; + if (this.options.checkPrivateFields) + for ( + var f = this.privateNameStack.length, + m = f === 0 ? null : this.privateNameStack[f - 1], + E = 0; + E < l.length; + ++E + ) { + var O = l[E]; + mt(o, O.name) || + (m + ? m.used.push(O) + : this.raiseRecoverable( + O.start, + "Private field '#" + + O.name + + "' must be declared in an enclosing class" + )); + } + }); + function bi(n, o) { + var l = o.key.name, + f = n[l], + m = 'true'; + return ( + o.type === 'MethodDefinition' && + (o.kind === 'get' || o.kind === 'set') && + (m = (o.static ? 's' : 'i') + o.kind), + (f === 'iget' && m === 'iset') || + (f === 'iset' && m === 'iget') || + (f === 'sget' && m === 'sset') || + (f === 'sset' && m === 'sget') + ? ((n[l] = 'true'), !1) + : f + ? !0 + : ((n[l] = m), !1) + ); + } + function es(n, o) { + var l = n.computed, + f = n.key; + return ( + !l && + ((f.type === 'Identifier' && f.name === o) || + (f.type === 'Literal' && f.value === o)) + ); + } + (te.parseExportAllDeclaration = function (n, o) { + return ( + this.options.ecmaVersion >= 11 && + (this.eatContextual('as') + ? ((n.exported = this.parseModuleExportName()), + this.checkExport(o, n.exported, this.lastTokStart)) + : (n.exported = null)), + this.expectContextual('from'), + this.type !== c.string && this.unexpected(), + (n.source = this.parseExprAtom()), + this.options.ecmaVersion >= 16 && + (n.attributes = this.parseWithClause()), + this.semicolon(), + this.finishNode(n, 'ExportAllDeclaration') + ); + }), + (te.parseExport = function (n, o) { + if ((this.next(), this.eat(c.star))) + return this.parseExportAllDeclaration(n, o); + if (this.eat(c._default)) + return ( + this.checkExport(o, 'default', this.lastTokStart), + (n.declaration = this.parseExportDefaultDeclaration()), + this.finishNode(n, 'ExportDefaultDeclaration') + ); + if (this.shouldParseExportStatement()) + (n.declaration = this.parseExportDeclaration(n)), + n.declaration.type === 'VariableDeclaration' + ? this.checkVariableExport(o, n.declaration.declarations) + : this.checkExport(o, n.declaration.id, n.declaration.id.start), + (n.specifiers = []), + (n.source = null), + this.options.ecmaVersion >= 16 && (n.attributes = []); + else { + if ( + ((n.declaration = null), + (n.specifiers = this.parseExportSpecifiers(o)), + this.eatContextual('from')) + ) + this.type !== c.string && this.unexpected(), + (n.source = this.parseExprAtom()), + this.options.ecmaVersion >= 16 && + (n.attributes = this.parseWithClause()); + else { + for (var l = 0, f = n.specifiers; l < f.length; l += 1) { + var m = f[l]; + this.checkUnreserved(m.local), + this.checkLocalExport(m.local), + m.local.type === 'Literal' && + this.raise( + m.local.start, + 'A string literal cannot be used as an exported binding without `from`.' + ); + } + (n.source = null), + this.options.ecmaVersion >= 16 && (n.attributes = []); + } + this.semicolon(); + } + return this.finishNode(n, 'ExportNamedDeclaration'); + }), + (te.parseExportDeclaration = function (n) { + return this.parseStatement(null); + }), + (te.parseExportDefaultDeclaration = function () { + var n; + if (this.type === c._function || (n = this.isAsyncFunction())) { + var o = this.startNode(); + return ( + this.next(), + n && this.next(), + this.parseFunction(o, Mn | Ds, !1, n) + ); + } else if (this.type === c._class) { + var l = this.startNode(); + return this.parseClass(l, 'nullableID'); + } else { + var f = this.parseMaybeAssign(); + return this.semicolon(), f; + } + }), + (te.checkExport = function (n, o, l) { + n && + (typeof o != 'string' && + (o = o.type === 'Identifier' ? o.name : o.value), + mt(n, o) && + this.raiseRecoverable(l, "Duplicate export '" + o + "'"), + (n[o] = !0)); + }), + (te.checkPatternExport = function (n, o) { + var l = o.type; + if (l === 'Identifier') this.checkExport(n, o, o.start); + else if (l === 'ObjectPattern') + for (var f = 0, m = o.properties; f < m.length; f += 1) { + var E = m[f]; + this.checkPatternExport(n, E); + } + else if (l === 'ArrayPattern') + for (var O = 0, Y = o.elements; O < Y.length; O += 1) { + var Q = Y[O]; + Q && this.checkPatternExport(n, Q); + } + else + l === 'Property' + ? this.checkPatternExport(n, o.value) + : l === 'AssignmentPattern' + ? this.checkPatternExport(n, o.left) + : l === 'RestElement' && this.checkPatternExport(n, o.argument); + }), + (te.checkVariableExport = function (n, o) { + if (n) + for (var l = 0, f = o; l < f.length; l += 1) { + var m = f[l]; + this.checkPatternExport(n, m.id); + } + }), + (te.shouldParseExportStatement = function () { + return ( + this.type.keyword === 'var' || + this.type.keyword === 'const' || + this.type.keyword === 'class' || + this.type.keyword === 'function' || + this.isLet() || + this.isAsyncFunction() + ); + }), + (te.parseExportSpecifier = function (n) { + var o = this.startNode(); + return ( + (o.local = this.parseModuleExportName()), + (o.exported = this.eatContextual('as') + ? this.parseModuleExportName() + : o.local), + this.checkExport(n, o.exported, o.exported.start), + this.finishNode(o, 'ExportSpecifier') + ); + }), + (te.parseExportSpecifiers = function (n) { + var o = [], + l = !0; + for (this.expect(c.braceL); !this.eat(c.braceR); ) { + if (l) l = !1; + else if ((this.expect(c.comma), this.afterTrailingComma(c.braceR))) + break; + o.push(this.parseExportSpecifier(n)); + } + return o; + }), + (te.parseImport = function (n) { + return ( + this.next(), + this.type === c.string + ? ((n.specifiers = _i), (n.source = this.parseExprAtom())) + : ((n.specifiers = this.parseImportSpecifiers()), + this.expectContextual('from'), + (n.source = + this.type === c.string + ? this.parseExprAtom() + : this.unexpected())), + this.options.ecmaVersion >= 16 && + (n.attributes = this.parseWithClause()), + this.semicolon(), + this.finishNode(n, 'ImportDeclaration') + ); + }), + (te.parseImportSpecifier = function () { + var n = this.startNode(); + return ( + (n.imported = this.parseModuleExportName()), + this.eatContextual('as') + ? (n.local = this.parseIdent()) + : (this.checkUnreserved(n.imported), (n.local = n.imported)), + this.checkLValSimple(n.local, yt), + this.finishNode(n, 'ImportSpecifier') + ); + }), + (te.parseImportDefaultSpecifier = function () { + var n = this.startNode(); + return ( + (n.local = this.parseIdent()), + this.checkLValSimple(n.local, yt), + this.finishNode(n, 'ImportDefaultSpecifier') + ); + }), + (te.parseImportNamespaceSpecifier = function () { + var n = this.startNode(); + return ( + this.next(), + this.expectContextual('as'), + (n.local = this.parseIdent()), + this.checkLValSimple(n.local, yt), + this.finishNode(n, 'ImportNamespaceSpecifier') + ); + }), + (te.parseImportSpecifiers = function () { + var n = [], + o = !0; + if ( + this.type === c.name && + (n.push(this.parseImportDefaultSpecifier()), !this.eat(c.comma)) + ) + return n; + if (this.type === c.star) + return n.push(this.parseImportNamespaceSpecifier()), n; + for (this.expect(c.braceL); !this.eat(c.braceR); ) { + if (o) o = !1; + else if ((this.expect(c.comma), this.afterTrailingComma(c.braceR))) + break; + n.push(this.parseImportSpecifier()); + } + return n; + }), + (te.parseWithClause = function () { + var n = []; + if (!this.eat(c._with)) return n; + this.expect(c.braceL); + for (var o = {}, l = !0; !this.eat(c.braceR); ) { + if (l) l = !1; + else if ((this.expect(c.comma), this.afterTrailingComma(c.braceR))) + break; + var f = this.parseImportAttribute(), + m = f.key.type === 'Identifier' ? f.key.name : f.key.value; + mt(o, m) && + this.raiseRecoverable( + f.key.start, + "Duplicate attribute key '" + m + "'" + ), + (o[m] = !0), + n.push(f); + } + return n; + }), + (te.parseImportAttribute = function () { + var n = this.startNode(); + return ( + (n.key = + this.type === c.string + ? this.parseExprAtom() + : this.parseIdent(this.options.allowReserved !== 'never')), + this.expect(c.colon), + this.type !== c.string && this.unexpected(), + (n.value = this.parseExprAtom()), + this.finishNode(n, 'ImportAttribute') + ); + }), + (te.parseModuleExportName = function () { + if (this.options.ecmaVersion >= 13 && this.type === c.string) { + var n = this.parseLiteral(this.value); + return ( + _t.test(n.value) && + this.raise( + n.start, + 'An export name cannot include a lone surrogate.' + ), + n + ); + } + return this.parseIdent(!0); + }), + (te.adaptDirectivePrologue = function (n) { + for (var o = 0; o < n.length && this.isDirectiveCandidate(n[o]); ++o) + n[o].directive = n[o].expression.raw.slice(1, -1); + }), + (te.isDirectiveCandidate = function (n) { + return ( + this.options.ecmaVersion >= 5 && + n.type === 'ExpressionStatement' && + n.expression.type === 'Literal' && + typeof n.expression.value == 'string' && + (this.input[n.start] === '"' || this.input[n.start] === "'") + ); + }); + var Nt = Ge.prototype; + (Nt.toAssignable = function (n, o, l) { + if (this.options.ecmaVersion >= 6 && n) + switch (n.type) { + case 'Identifier': + this.inAsync && + n.name === 'await' && + this.raise( + n.start, + "Cannot use 'await' as identifier inside an async function" + ); + break; + case 'ObjectPattern': + case 'ArrayPattern': + case 'AssignmentPattern': + case 'RestElement': + break; + case 'ObjectExpression': + (n.type = 'ObjectPattern'), l && this.checkPatternErrors(l, !0); + for (var f = 0, m = n.properties; f < m.length; f += 1) { + var E = m[f]; + this.toAssignable(E, o), + E.type === 'RestElement' && + (E.argument.type === 'ArrayPattern' || + E.argument.type === 'ObjectPattern') && + this.raise(E.argument.start, 'Unexpected token'); + } + break; + case 'Property': + n.kind !== 'init' && + this.raise( + n.key.start, + "Object pattern can't contain getter or setter" + ), + this.toAssignable(n.value, o); + break; + case 'ArrayExpression': + (n.type = 'ArrayPattern'), + l && this.checkPatternErrors(l, !0), + this.toAssignableList(n.elements, o); + break; + case 'SpreadElement': + (n.type = 'RestElement'), + this.toAssignable(n.argument, o), + n.argument.type === 'AssignmentPattern' && + this.raise( + n.argument.start, + 'Rest elements cannot have a default value' + ); + break; + case 'AssignmentExpression': + n.operator !== '=' && + this.raise( + n.left.end, + "Only '=' operator can be used for specifying default value." + ), + (n.type = 'AssignmentPattern'), + delete n.operator, + this.toAssignable(n.left, o); + break; + case 'ParenthesizedExpression': + this.toAssignable(n.expression, o, l); + break; + case 'ChainExpression': + this.raiseRecoverable( + n.start, + 'Optional chaining cannot appear in left-hand side' + ); + break; + case 'MemberExpression': + if (!o) break; + default: + this.raise(n.start, 'Assigning to rvalue'); + } + else l && this.checkPatternErrors(l, !0); + return n; + }), + (Nt.toAssignableList = function (n, o) { + for (var l = n.length, f = 0; f < l; f++) { + var m = n[f]; + m && this.toAssignable(m, o); + } + if (l) { + var E = n[l - 1]; + this.options.ecmaVersion === 6 && + o && + E && + E.type === 'RestElement' && + E.argument.type !== 'Identifier' && + this.unexpected(E.argument.start); + } + return n; + }), + (Nt.parseSpread = function (n) { + var o = this.startNode(); + return ( + this.next(), + (o.argument = this.parseMaybeAssign(!1, n)), + this.finishNode(o, 'SpreadElement') + ); + }), + (Nt.parseRestBinding = function () { + var n = this.startNode(); + return ( + this.next(), + this.options.ecmaVersion === 6 && + this.type !== c.name && + this.unexpected(), + (n.argument = this.parseBindingAtom()), + this.finishNode(n, 'RestElement') + ); + }), + (Nt.parseBindingAtom = function () { + if (this.options.ecmaVersion >= 6) + switch (this.type) { + case c.bracketL: + var n = this.startNode(); + return ( + this.next(), + (n.elements = this.parseBindingList(c.bracketR, !0, !0)), + this.finishNode(n, 'ArrayPattern') + ); + case c.braceL: + return this.parseObj(!0); + } + return this.parseIdent(); + }), + (Nt.parseBindingList = function (n, o, l, f) { + for (var m = [], E = !0; !this.eat(n); ) + if ( + (E ? (E = !1) : this.expect(c.comma), o && this.type === c.comma) + ) + m.push(null); + else { + if (l && this.afterTrailingComma(n)) break; + if (this.type === c.ellipsis) { + var O = this.parseRestBinding(); + this.parseBindingListItem(O), + m.push(O), + this.type === c.comma && + this.raiseRecoverable( + this.start, + 'Comma is not permitted after the rest element' + ), + this.expect(n); + break; + } else m.push(this.parseAssignableListItem(f)); + } + return m; + }), + (Nt.parseAssignableListItem = function (n) { + var o = this.parseMaybeDefault(this.start, this.startLoc); + return this.parseBindingListItem(o), o; + }), + (Nt.parseBindingListItem = function (n) { + return n; + }), + (Nt.parseMaybeDefault = function (n, o, l) { + if ( + ((l = l || this.parseBindingAtom()), + this.options.ecmaVersion < 6 || !this.eat(c.eq)) + ) + return l; + var f = this.startNodeAt(n, o); + return ( + (f.left = l), + (f.right = this.parseMaybeAssign()), + this.finishNode(f, 'AssignmentPattern') + ); + }), + (Nt.checkLValSimple = function (n, o, l) { + o === void 0 && (o = pt); + var f = o !== pt; + switch (n.type) { + case 'Identifier': + this.strict && + this.reservedWordsStrictBind.test(n.name) && + this.raiseRecoverable( + n.start, + (f ? 'Binding ' : 'Assigning to ') + + n.name + + ' in strict mode' + ), + f && + (o === yt && + n.name === 'let' && + this.raiseRecoverable( + n.start, + 'let is disallowed as a lexically bound name' + ), + l && + (mt(l, n.name) && + this.raiseRecoverable(n.start, 'Argument name clash'), + (l[n.name] = !0)), + o !== Dn && this.declareName(n.name, o, n.start)); + break; + case 'ChainExpression': + this.raiseRecoverable( + n.start, + 'Optional chaining cannot appear in left-hand side' + ); + break; + case 'MemberExpression': + f && this.raiseRecoverable(n.start, 'Binding member expression'); + break; + case 'ParenthesizedExpression': + return ( + f && + this.raiseRecoverable( + n.start, + 'Binding parenthesized expression' + ), + this.checkLValSimple(n.expression, o, l) + ); + default: + this.raise(n.start, (f ? 'Binding' : 'Assigning to') + ' rvalue'); + } + }), + (Nt.checkLValPattern = function (n, o, l) { + switch ((o === void 0 && (o = pt), n.type)) { + case 'ObjectPattern': + for (var f = 0, m = n.properties; f < m.length; f += 1) { + var E = m[f]; + this.checkLValInnerPattern(E, o, l); + } + break; + case 'ArrayPattern': + for (var O = 0, Y = n.elements; O < Y.length; O += 1) { + var Q = Y[O]; + Q && this.checkLValInnerPattern(Q, o, l); + } + break; + default: + this.checkLValSimple(n, o, l); + } + }), + (Nt.checkLValInnerPattern = function (n, o, l) { + switch ((o === void 0 && (o = pt), n.type)) { + case 'Property': + this.checkLValInnerPattern(n.value, o, l); + break; + case 'AssignmentPattern': + this.checkLValPattern(n.left, o, l); + break; + case 'RestElement': + this.checkLValPattern(n.argument, o, l); + break; + default: + this.checkLValPattern(n, o, l); + } + }); + var Rt = function (o, l, f, m, E) { + (this.token = o), + (this.isExpr = !!l), + (this.preserveSpace = !!f), + (this.override = m), + (this.generator = !!E); + }, + Ue = { + b_stat: new Rt('{', !1), + b_expr: new Rt('{', !0), + b_tmpl: new Rt('${', !1), + p_stat: new Rt('(', !1), + p_expr: new Rt('(', !0), + q_tmpl: new Rt('`', !0, !0, function (n) { + return n.tryReadTemplateToken(); + }), + f_stat: new Rt('function', !1), + f_expr: new Rt('function', !0), + f_expr_gen: new Rt('function', !0, !1, null, !0), + f_gen: new Rt('function', !1, !1, null, !0), + }, + wn = Ge.prototype; + (wn.initialContext = function () { + return [Ue.b_stat]; + }), + (wn.curContext = function () { + return this.context[this.context.length - 1]; + }), + (wn.braceIsBlock = function (n) { + var o = this.curContext(); + return o === Ue.f_expr || o === Ue.f_stat + ? !0 + : n === c.colon && (o === Ue.b_stat || o === Ue.b_expr) + ? !o.isExpr + : n === c._return || (n === c.name && this.exprAllowed) + ? R.test(this.input.slice(this.lastTokEnd, this.start)) + : n === c._else || + n === c.semi || + n === c.eof || + n === c.parenR || + n === c.arrow + ? !0 + : n === c.braceL + ? o === Ue.b_stat + : n === c._var || n === c._const || n === c.name + ? !1 + : !this.exprAllowed; + }), + (wn.inGeneratorContext = function () { + for (var n = this.context.length - 1; n >= 1; n--) { + var o = this.context[n]; + if (o.token === 'function') return o.generator; + } + return !1; + }), + (wn.updateContext = function (n) { + var o, + l = this.type; + l.keyword && n === c.dot + ? (this.exprAllowed = !1) + : (o = l.updateContext) + ? o.call(this, n) + : (this.exprAllowed = l.beforeExpr); + }), + (wn.overrideContext = function (n) { + this.curContext() !== n && + (this.context[this.context.length - 1] = n); + }), + (c.parenR.updateContext = c.braceR.updateContext = + function () { + if (this.context.length === 1) { + this.exprAllowed = !0; + return; + } + var n = this.context.pop(); + n === Ue.b_stat && + this.curContext().token === 'function' && + (n = this.context.pop()), + (this.exprAllowed = !n.isExpr); + }), + (c.braceL.updateContext = function (n) { + this.context.push(this.braceIsBlock(n) ? Ue.b_stat : Ue.b_expr), + (this.exprAllowed = !0); + }), + (c.dollarBraceL.updateContext = function () { + this.context.push(Ue.b_tmpl), (this.exprAllowed = !0); + }), + (c.parenL.updateContext = function (n) { + var o = + n === c._if || n === c._for || n === c._with || n === c._while; + this.context.push(o ? Ue.p_stat : Ue.p_expr), (this.exprAllowed = !0); + }), + (c.incDec.updateContext = function () {}), + (c._function.updateContext = c._class.updateContext = + function (n) { + n.beforeExpr && + n !== c._else && + !(n === c.semi && this.curContext() !== Ue.p_stat) && + !( + n === c._return && + R.test(this.input.slice(this.lastTokEnd, this.start)) + ) && + !( + (n === c.colon || n === c.braceL) && + this.curContext() === Ue.b_stat + ) + ? this.context.push(Ue.f_expr) + : this.context.push(Ue.f_stat), + (this.exprAllowed = !1); + }), + (c.colon.updateContext = function () { + this.curContext().token === 'function' && this.context.pop(), + (this.exprAllowed = !0); + }), + (c.backQuote.updateContext = function () { + this.curContext() === Ue.q_tmpl + ? this.context.pop() + : this.context.push(Ue.q_tmpl), + (this.exprAllowed = !1); + }), + (c.star.updateContext = function (n) { + if (n === c._function) { + var o = this.context.length - 1; + this.context[o] === Ue.f_expr + ? (this.context[o] = Ue.f_expr_gen) + : (this.context[o] = Ue.f_gen); + } + this.exprAllowed = !0; + }), + (c.name.updateContext = function (n) { + var o = !1; + this.options.ecmaVersion >= 6 && + n !== c.dot && + ((this.value === 'of' && !this.exprAllowed) || + (this.value === 'yield' && this.inGeneratorContext())) && + (o = !0), + (this.exprAllowed = o); + }); + var de = Ge.prototype; + (de.checkPropClash = function (n, o, l) { + if ( + !(this.options.ecmaVersion >= 9 && n.type === 'SpreadElement') && + !( + this.options.ecmaVersion >= 6 && + (n.computed || n.method || n.shorthand) + ) + ) { + var f = n.key, + m; + switch (f.type) { + case 'Identifier': + m = f.name; + break; + case 'Literal': + m = String(f.value); + break; + default: + return; + } + var E = n.kind; + if (this.options.ecmaVersion >= 6) { + m === '__proto__' && + E === 'init' && + (o.proto && + (l + ? l.doubleProto < 0 && (l.doubleProto = f.start) + : this.raiseRecoverable( + f.start, + 'Redefinition of __proto__ property' + )), + (o.proto = !0)); + return; + } + m = '$' + m; + var O = o[m]; + if (O) { + var Y; + E === 'init' + ? (Y = (this.strict && O.init) || O.get || O.set) + : (Y = O.init || O[E]), + Y && this.raiseRecoverable(f.start, 'Redefinition of property'); + } else O = o[m] = {init: !1, get: !1, set: !1}; + O[E] = !0; + } + }), + (de.parseExpression = function (n, o) { + var l = this.start, + f = this.startLoc, + m = this.parseMaybeAssign(n, o); + if (this.type === c.comma) { + var E = this.startNodeAt(l, f); + for (E.expressions = [m]; this.eat(c.comma); ) + E.expressions.push(this.parseMaybeAssign(n, o)); + return this.finishNode(E, 'SequenceExpression'); + } + return m; + }), + (de.parseMaybeAssign = function (n, o, l) { + if (this.isContextual('yield')) { + if (this.inGenerator) return this.parseYield(n); + this.exprAllowed = !1; + } + var f = !1, + m = -1, + E = -1, + O = -1; + o + ? ((m = o.parenthesizedAssign), + (E = o.trailingComma), + (O = o.doubleProto), + (o.parenthesizedAssign = o.trailingComma = -1)) + : ((o = new Xt()), (f = !0)); + var Y = this.start, + Q = this.startLoc; + (this.type === c.parenL || this.type === c.name) && + ((this.potentialArrowAt = this.start), + (this.potentialArrowInForAwait = n === 'await')); + var Te = this.parseMaybeConditional(n, o); + if ((l && (Te = l.call(this, Te, Y, Q)), this.type.isAssign)) { + var xe = this.startNodeAt(Y, Q); + return ( + (xe.operator = this.value), + this.type === c.eq && (Te = this.toAssignable(Te, !1, o)), + f || + (o.parenthesizedAssign = o.trailingComma = o.doubleProto = -1), + o.shorthandAssign >= Te.start && (o.shorthandAssign = -1), + this.type === c.eq + ? this.checkLValPattern(Te) + : this.checkLValSimple(Te), + (xe.left = Te), + this.next(), + (xe.right = this.parseMaybeAssign(n)), + O > -1 && (o.doubleProto = O), + this.finishNode(xe, 'AssignmentExpression') + ); + } else f && this.checkExpressionErrors(o, !0); + return ( + m > -1 && (o.parenthesizedAssign = m), + E > -1 && (o.trailingComma = E), + Te + ); + }), + (de.parseMaybeConditional = function (n, o) { + var l = this.start, + f = this.startLoc, + m = this.parseExprOps(n, o); + if (this.checkExpressionErrors(o)) return m; + if (this.eat(c.question)) { + var E = this.startNodeAt(l, f); + return ( + (E.test = m), + (E.consequent = this.parseMaybeAssign()), + this.expect(c.colon), + (E.alternate = this.parseMaybeAssign(n)), + this.finishNode(E, 'ConditionalExpression') + ); + } + return m; + }), + (de.parseExprOps = function (n, o) { + var l = this.start, + f = this.startLoc, + m = this.parseMaybeUnary(o, !1, !1, n); + return this.checkExpressionErrors(o) || + (m.start === l && m.type === 'ArrowFunctionExpression') + ? m + : this.parseExprOp(m, l, f, -1, n); + }), + (de.parseExprOp = function (n, o, l, f, m) { + var E = this.type.binop; + if (E != null && (!m || this.type !== c._in) && E > f) { + var O = this.type === c.logicalOR || this.type === c.logicalAND, + Y = this.type === c.coalesce; + Y && (E = c.logicalAND.binop); + var Q = this.value; + this.next(); + var Te = this.start, + xe = this.startLoc, + Ze = this.parseExprOp( + this.parseMaybeUnary(null, !1, !1, m), + Te, + xe, + E, + m + ), + Lt = this.buildBinary(o, l, n, Ze, Q, O || Y); + return ( + ((O && this.type === c.coalesce) || + (Y && + (this.type === c.logicalOR || this.type === c.logicalAND))) && + this.raiseRecoverable( + this.start, + 'Logical expressions and coalesce expressions cannot be mixed. Wrap either by parentheses' + ), + this.parseExprOp(Lt, o, l, f, m) + ); + } + return n; + }), + (de.buildBinary = function (n, o, l, f, m, E) { + f.type === 'PrivateIdentifier' && + this.raise( + f.start, + 'Private identifier can only be left side of binary expression' + ); + var O = this.startNodeAt(n, o); + return ( + (O.left = l), + (O.operator = m), + (O.right = f), + this.finishNode(O, E ? 'LogicalExpression' : 'BinaryExpression') + ); + }), + (de.parseMaybeUnary = function (n, o, l, f) { + var m = this.start, + E = this.startLoc, + O; + if (this.isContextual('await') && this.canAwait) + (O = this.parseAwait(f)), (o = !0); + else if (this.type.prefix) { + var Y = this.startNode(), + Q = this.type === c.incDec; + (Y.operator = this.value), + (Y.prefix = !0), + this.next(), + (Y.argument = this.parseMaybeUnary(null, !0, Q, f)), + this.checkExpressionErrors(n, !0), + Q + ? this.checkLValSimple(Y.argument) + : this.strict && Y.operator === 'delete' && Ms(Y.argument) + ? this.raiseRecoverable( + Y.start, + 'Deleting local variable in strict mode' + ) + : Y.operator === 'delete' && gs(Y.argument) + ? this.raiseRecoverable( + Y.start, + 'Private fields can not be deleted' + ) + : (o = !0), + (O = this.finishNode( + Y, + Q ? 'UpdateExpression' : 'UnaryExpression' + )); + } else if (!o && this.type === c.privateId) + (f || this.privateNameStack.length === 0) && + this.options.checkPrivateFields && + this.unexpected(), + (O = this.parsePrivateIdent()), + this.type !== c._in && this.unexpected(); + else { + if ( + ((O = this.parseExprSubscripts(n, f)), + this.checkExpressionErrors(n)) + ) + return O; + for (; this.type.postfix && !this.canInsertSemicolon(); ) { + var Te = this.startNodeAt(m, E); + (Te.operator = this.value), + (Te.prefix = !1), + (Te.argument = O), + this.checkLValSimple(O), + this.next(), + (O = this.finishNode(Te, 'UpdateExpression')); + } + } + if (!l && this.eat(c.starstar)) + if (o) this.unexpected(this.lastTokStart); + else + return this.buildBinary( + m, + E, + O, + this.parseMaybeUnary(null, !1, !1, f), + '**', + !1 + ); + else return O; + }); + function Ms(n) { + return ( + n.type === 'Identifier' || + (n.type === 'ParenthesizedExpression' && Ms(n.expression)) + ); + } + function gs(n) { + return ( + (n.type === 'MemberExpression' && + n.property.type === 'PrivateIdentifier') || + (n.type === 'ChainExpression' && gs(n.expression)) || + (n.type === 'ParenthesizedExpression' && gs(n.expression)) + ); + } + (de.parseExprSubscripts = function (n, o) { + var l = this.start, + f = this.startLoc, + m = this.parseExprAtom(n, o); + if ( + m.type === 'ArrowFunctionExpression' && + this.input.slice(this.lastTokStart, this.lastTokEnd) !== ')' + ) + return m; + var E = this.parseSubscripts(m, l, f, !1, o); + return ( + n && + E.type === 'MemberExpression' && + (n.parenthesizedAssign >= E.start && (n.parenthesizedAssign = -1), + n.parenthesizedBind >= E.start && (n.parenthesizedBind = -1), + n.trailingComma >= E.start && (n.trailingComma = -1)), + E + ); + }), + (de.parseSubscripts = function (n, o, l, f, m) { + for ( + var E = + this.options.ecmaVersion >= 8 && + n.type === 'Identifier' && + n.name === 'async' && + this.lastTokEnd === n.end && + !this.canInsertSemicolon() && + n.end - n.start === 5 && + this.potentialArrowAt === n.start, + O = !1; + ; + + ) { + var Y = this.parseSubscript(n, o, l, f, E, O, m); + if ( + (Y.optional && (O = !0), + Y === n || Y.type === 'ArrowFunctionExpression') + ) { + if (O) { + var Q = this.startNodeAt(o, l); + (Q.expression = Y), (Y = this.finishNode(Q, 'ChainExpression')); + } + return Y; + } + n = Y; + } + }), + (de.shouldParseAsyncArrow = function () { + return !this.canInsertSemicolon() && this.eat(c.arrow); + }), + (de.parseSubscriptAsyncArrow = function (n, o, l, f) { + return this.parseArrowExpression(this.startNodeAt(n, o), l, !0, f); + }), + (de.parseSubscript = function (n, o, l, f, m, E, O) { + var Y = this.options.ecmaVersion >= 11, + Q = Y && this.eat(c.questionDot); + f && + Q && + this.raise( + this.lastTokStart, + 'Optional chaining cannot appear in the callee of new expressions' + ); + var Te = this.eat(c.bracketL); + if ( + Te || + (Q && this.type !== c.parenL && this.type !== c.backQuote) || + this.eat(c.dot) + ) { + var xe = this.startNodeAt(o, l); + (xe.object = n), + Te + ? ((xe.property = this.parseExpression()), + this.expect(c.bracketR)) + : this.type === c.privateId && n.type !== 'Super' + ? (xe.property = this.parsePrivateIdent()) + : (xe.property = this.parseIdent( + this.options.allowReserved !== 'never' + )), + (xe.computed = !!Te), + Y && (xe.optional = Q), + (n = this.finishNode(xe, 'MemberExpression')); + } else if (!f && this.eat(c.parenL)) { + var Ze = new Xt(), + Lt = this.yieldPos, + Ri = this.awaitPos, + Ys = this.awaitIdentPos; + (this.yieldPos = 0), (this.awaitPos = 0), (this.awaitIdentPos = 0); + var gr = this.parseExprList( + c.parenR, + this.options.ecmaVersion >= 8, + !1, + Ze + ); + if (m && !Q && this.shouldParseAsyncArrow()) + return ( + this.checkPatternErrors(Ze, !1), + this.checkYieldAwaitInDefaultParams(), + this.awaitIdentPos > 0 && + this.raise( + this.awaitIdentPos, + "Cannot use 'await' as identifier inside an async function" + ), + (this.yieldPos = Lt), + (this.awaitPos = Ri), + (this.awaitIdentPos = Ys), + this.parseSubscriptAsyncArrow(o, l, gr, O) + ); + this.checkExpressionErrors(Ze, !0), + (this.yieldPos = Lt || this.yieldPos), + (this.awaitPos = Ri || this.awaitPos), + (this.awaitIdentPos = Ys || this.awaitIdentPos); + var Js = this.startNodeAt(o, l); + (Js.callee = n), + (Js.arguments = gr), + Y && (Js.optional = Q), + (n = this.finishNode(Js, 'CallExpression')); + } else if (this.type === c.backQuote) { + (Q || E) && + this.raise( + this.start, + 'Optional chaining cannot appear in the tag of tagged template expressions' + ); + var Qs = this.startNodeAt(o, l); + (Qs.tag = n), + (Qs.quasi = this.parseTemplate({isTagged: !0})), + (n = this.finishNode(Qs, 'TaggedTemplateExpression')); + } + return n; + }), + (de.parseExprAtom = function (n, o, l) { + this.type === c.slash && this.readRegexp(); + var f, + m = this.potentialArrowAt === this.start; + switch (this.type) { + case c._super: + return ( + this.allowSuper || + this.raise(this.start, "'super' keyword outside a method"), + (f = this.startNode()), + this.next(), + this.type === c.parenL && + !this.allowDirectSuper && + this.raise( + f.start, + 'super() call outside constructor of a subclass' + ), + this.type !== c.dot && + this.type !== c.bracketL && + this.type !== c.parenL && + this.unexpected(), + this.finishNode(f, 'Super') + ); + case c._this: + return ( + (f = this.startNode()), + this.next(), + this.finishNode(f, 'ThisExpression') + ); + case c.name: + var E = this.start, + O = this.startLoc, + Y = this.containsEsc, + Q = this.parseIdent(!1); + if ( + this.options.ecmaVersion >= 8 && + !Y && + Q.name === 'async' && + !this.canInsertSemicolon() && + this.eat(c._function) + ) + return ( + this.overrideContext(Ue.f_expr), + this.parseFunction(this.startNodeAt(E, O), 0, !1, !0, o) + ); + if (m && !this.canInsertSemicolon()) { + if (this.eat(c.arrow)) + return this.parseArrowExpression( + this.startNodeAt(E, O), + [Q], + !1, + o + ); + if ( + this.options.ecmaVersion >= 8 && + Q.name === 'async' && + this.type === c.name && + !Y && + (!this.potentialArrowInForAwait || + this.value !== 'of' || + this.containsEsc) + ) + return ( + (Q = this.parseIdent(!1)), + (this.canInsertSemicolon() || !this.eat(c.arrow)) && + this.unexpected(), + this.parseArrowExpression( + this.startNodeAt(E, O), + [Q], + !0, + o + ) + ); + } + return Q; + case c.regexp: + var Te = this.value; + return ( + (f = this.parseLiteral(Te.value)), + (f.regex = {pattern: Te.pattern, flags: Te.flags}), + f + ); + case c.num: + case c.string: + return this.parseLiteral(this.value); + case c._null: + case c._true: + case c._false: + return ( + (f = this.startNode()), + (f.value = + this.type === c._null ? null : this.type === c._true), + (f.raw = this.type.keyword), + this.next(), + this.finishNode(f, 'Literal') + ); + case c.parenL: + var xe = this.start, + Ze = this.parseParenAndDistinguishExpression(m, o); + return ( + n && + (n.parenthesizedAssign < 0 && + !this.isSimpleAssignTarget(Ze) && + (n.parenthesizedAssign = xe), + n.parenthesizedBind < 0 && (n.parenthesizedBind = xe)), + Ze + ); + case c.bracketL: + return ( + (f = this.startNode()), + this.next(), + (f.elements = this.parseExprList(c.bracketR, !0, !0, n)), + this.finishNode(f, 'ArrayExpression') + ); + case c.braceL: + return this.overrideContext(Ue.b_expr), this.parseObj(!1, n); + case c._function: + return ( + (f = this.startNode()), this.next(), this.parseFunction(f, 0) + ); + case c._class: + return this.parseClass(this.startNode(), !1); + case c._new: + return this.parseNew(); + case c.backQuote: + return this.parseTemplate(); + case c._import: + return this.options.ecmaVersion >= 11 + ? this.parseExprImport(l) + : this.unexpected(); + default: + return this.parseExprAtomDefault(); + } + }), + (de.parseExprAtomDefault = function () { + this.unexpected(); + }), + (de.parseExprImport = function (n) { + var o = this.startNode(); + if ( + (this.containsEsc && + this.raiseRecoverable( + this.start, + 'Escape sequence in keyword import' + ), + this.next(), + this.type === c.parenL && !n) + ) + return this.parseDynamicImport(o); + if (this.type === c.dot) { + var l = this.startNodeAt(o.start, o.loc && o.loc.start); + return ( + (l.name = 'import'), + (o.meta = this.finishNode(l, 'Identifier')), + this.parseImportMeta(o) + ); + } else this.unexpected(); + }), + (de.parseDynamicImport = function (n) { + if ( + (this.next(), + (n.source = this.parseMaybeAssign()), + this.options.ecmaVersion >= 16) + ) + this.eat(c.parenR) + ? (n.options = null) + : (this.expect(c.comma), + this.afterTrailingComma(c.parenR) + ? (n.options = null) + : ((n.options = this.parseMaybeAssign()), + this.eat(c.parenR) || + (this.expect(c.comma), + this.afterTrailingComma(c.parenR) || this.unexpected()))); + else if (!this.eat(c.parenR)) { + var o = this.start; + this.eat(c.comma) && this.eat(c.parenR) + ? this.raiseRecoverable( + o, + 'Trailing comma is not allowed in import()' + ) + : this.unexpected(o); + } + return this.finishNode(n, 'ImportExpression'); + }), + (de.parseImportMeta = function (n) { + this.next(); + var o = this.containsEsc; + return ( + (n.property = this.parseIdent(!0)), + n.property.name !== 'meta' && + this.raiseRecoverable( + n.property.start, + "The only valid meta property for import is 'import.meta'" + ), + o && + this.raiseRecoverable( + n.start, + "'import.meta' must not contain escaped characters" + ), + this.options.sourceType !== 'module' && + !this.options.allowImportExportEverywhere && + this.raiseRecoverable( + n.start, + "Cannot use 'import.meta' outside a module" + ), + this.finishNode(n, 'MetaProperty') + ); + }), + (de.parseLiteral = function (n) { + var o = this.startNode(); + return ( + (o.value = n), + (o.raw = this.input.slice(this.start, this.end)), + o.raw.charCodeAt(o.raw.length - 1) === 110 && + (o.bigint = + o.value != null + ? o.value.toString() + : o.raw.slice(0, -1).replace(/_/g, '')), + this.next(), + this.finishNode(o, 'Literal') + ); + }), + (de.parseParenExpression = function () { + this.expect(c.parenL); + var n = this.parseExpression(); + return this.expect(c.parenR), n; + }), + (de.shouldParseArrow = function (n) { + return !this.canInsertSemicolon(); + }), + (de.parseParenAndDistinguishExpression = function (n, o) { + var l = this.start, + f = this.startLoc, + m, + E = this.options.ecmaVersion >= 8; + if (this.options.ecmaVersion >= 6) { + this.next(); + var O = this.start, + Y = this.startLoc, + Q = [], + Te = !0, + xe = !1, + Ze = new Xt(), + Lt = this.yieldPos, + Ri = this.awaitPos, + Ys; + for (this.yieldPos = 0, this.awaitPos = 0; this.type !== c.parenR; ) + if ( + (Te ? (Te = !1) : this.expect(c.comma), + E && this.afterTrailingComma(c.parenR, !0)) + ) { + xe = !0; + break; + } else if (this.type === c.ellipsis) { + (Ys = this.start), + Q.push(this.parseParenItem(this.parseRestBinding())), + this.type === c.comma && + this.raiseRecoverable( + this.start, + 'Comma is not permitted after the rest element' + ); + break; + } else Q.push(this.parseMaybeAssign(!1, Ze, this.parseParenItem)); + var gr = this.lastTokEnd, + Js = this.lastTokEndLoc; + if ( + (this.expect(c.parenR), + n && this.shouldParseArrow(Q) && this.eat(c.arrow)) + ) + return ( + this.checkPatternErrors(Ze, !1), + this.checkYieldAwaitInDefaultParams(), + (this.yieldPos = Lt), + (this.awaitPos = Ri), + this.parseParenArrowList(l, f, Q, o) + ); + (!Q.length || xe) && this.unexpected(this.lastTokStart), + Ys && this.unexpected(Ys), + this.checkExpressionErrors(Ze, !0), + (this.yieldPos = Lt || this.yieldPos), + (this.awaitPos = Ri || this.awaitPos), + Q.length > 1 + ? ((m = this.startNodeAt(O, Y)), + (m.expressions = Q), + this.finishNodeAt(m, 'SequenceExpression', gr, Js)) + : (m = Q[0]); + } else m = this.parseParenExpression(); + if (this.options.preserveParens) { + var Qs = this.startNodeAt(l, f); + return ( + (Qs.expression = m), + this.finishNode(Qs, 'ParenthesizedExpression') + ); + } else return m; + }), + (de.parseParenItem = function (n) { + return n; + }), + (de.parseParenArrowList = function (n, o, l, f) { + return this.parseArrowExpression(this.startNodeAt(n, o), l, !1, f); + }); + var Ci = []; + (de.parseNew = function () { + this.containsEsc && + this.raiseRecoverable(this.start, 'Escape sequence in keyword new'); + var n = this.startNode(); + if ( + (this.next(), this.options.ecmaVersion >= 6 && this.type === c.dot) + ) { + var o = this.startNodeAt(n.start, n.loc && n.loc.start); + (o.name = 'new'), + (n.meta = this.finishNode(o, 'Identifier')), + this.next(); + var l = this.containsEsc; + return ( + (n.property = this.parseIdent(!0)), + n.property.name !== 'target' && + this.raiseRecoverable( + n.property.start, + "The only valid meta property for new is 'new.target'" + ), + l && + this.raiseRecoverable( + n.start, + "'new.target' must not contain escaped characters" + ), + this.allowNewDotTarget || + this.raiseRecoverable( + n.start, + "'new.target' can only be used in functions and class static block" + ), + this.finishNode(n, 'MetaProperty') + ); + } + var f = this.start, + m = this.startLoc; + return ( + (n.callee = this.parseSubscripts( + this.parseExprAtom(null, !1, !0), + f, + m, + !0, + !1 + )), + this.eat(c.parenL) + ? (n.arguments = this.parseExprList( + c.parenR, + this.options.ecmaVersion >= 8, + !1 + )) + : (n.arguments = Ci), + this.finishNode(n, 'NewExpression') + ); + }), + (de.parseTemplateElement = function (n) { + var o = n.isTagged, + l = this.startNode(); + return ( + this.type === c.invalidTemplate + ? (o || + this.raiseRecoverable( + this.start, + 'Bad escape sequence in untagged template literal' + ), + (l.value = { + raw: this.value.replace( + /\r\n?/g, + ` +` + ), + cooked: null, + })) + : (l.value = { + raw: this.input.slice(this.start, this.end).replace( + /\r\n?/g, + ` +` + ), + cooked: this.value, + }), + this.next(), + (l.tail = this.type === c.backQuote), + this.finishNode(l, 'TemplateElement') + ); + }), + (de.parseTemplate = function (n) { + n === void 0 && (n = {}); + var o = n.isTagged; + o === void 0 && (o = !1); + var l = this.startNode(); + this.next(), (l.expressions = []); + var f = this.parseTemplateElement({isTagged: o}); + for (l.quasis = [f]; !f.tail; ) + this.type === c.eof && + this.raise(this.pos, 'Unterminated template literal'), + this.expect(c.dollarBraceL), + l.expressions.push(this.parseExpression()), + this.expect(c.braceR), + l.quasis.push((f = this.parseTemplateElement({isTagged: o}))); + return this.next(), this.finishNode(l, 'TemplateLiteral'); + }), + (de.isAsyncProp = function (n) { + return ( + !n.computed && + n.key.type === 'Identifier' && + n.key.name === 'async' && + (this.type === c.name || + this.type === c.num || + this.type === c.string || + this.type === c.bracketL || + this.type.keyword || + (this.options.ecmaVersion >= 9 && this.type === c.star)) && + !R.test(this.input.slice(this.lastTokEnd, this.start)) + ); + }), + (de.parseObj = function (n, o) { + var l = this.startNode(), + f = !0, + m = {}; + for (l.properties = [], this.next(); !this.eat(c.braceR); ) { + if (f) f = !1; + else if ( + (this.expect(c.comma), + this.options.ecmaVersion >= 5 && + this.afterTrailingComma(c.braceR)) + ) + break; + var E = this.parseProperty(n, o); + n || this.checkPropClash(E, m, o), l.properties.push(E); + } + return this.finishNode(l, n ? 'ObjectPattern' : 'ObjectExpression'); + }), + (de.parseProperty = function (n, o) { + var l = this.startNode(), + f, + m, + E, + O; + if (this.options.ecmaVersion >= 9 && this.eat(c.ellipsis)) + return n + ? ((l.argument = this.parseIdent(!1)), + this.type === c.comma && + this.raiseRecoverable( + this.start, + 'Comma is not permitted after the rest element' + ), + this.finishNode(l, 'RestElement')) + : ((l.argument = this.parseMaybeAssign(!1, o)), + this.type === c.comma && + o && + o.trailingComma < 0 && + (o.trailingComma = this.start), + this.finishNode(l, 'SpreadElement')); + this.options.ecmaVersion >= 6 && + ((l.method = !1), + (l.shorthand = !1), + (n || o) && ((E = this.start), (O = this.startLoc)), + n || (f = this.eat(c.star))); + var Y = this.containsEsc; + return ( + this.parsePropertyName(l), + !n && + !Y && + this.options.ecmaVersion >= 8 && + !f && + this.isAsyncProp(l) + ? ((m = !0), + (f = this.options.ecmaVersion >= 9 && this.eat(c.star)), + this.parsePropertyName(l)) + : (m = !1), + this.parsePropertyValue(l, n, f, m, E, O, o, Y), + this.finishNode(l, 'Property') + ); + }), + (de.parseGetterSetter = function (n) { + var o = n.key.name; + this.parsePropertyName(n), + (n.value = this.parseMethod(!1)), + (n.kind = o); + var l = n.kind === 'get' ? 0 : 1; + if (n.value.params.length !== l) { + var f = n.value.start; + n.kind === 'get' + ? this.raiseRecoverable(f, 'getter should have no params') + : this.raiseRecoverable( + f, + 'setter should have exactly one param' + ); + } else + n.kind === 'set' && + n.value.params[0].type === 'RestElement' && + this.raiseRecoverable( + n.value.params[0].start, + 'Setter cannot use rest params' + ); + }), + (de.parsePropertyValue = function (n, o, l, f, m, E, O, Y) { + (l || f) && this.type === c.colon && this.unexpected(), + this.eat(c.colon) + ? ((n.value = o + ? this.parseMaybeDefault(this.start, this.startLoc) + : this.parseMaybeAssign(!1, O)), + (n.kind = 'init')) + : this.options.ecmaVersion >= 6 && this.type === c.parenL + ? (o && this.unexpected(), + (n.method = !0), + (n.value = this.parseMethod(l, f)), + (n.kind = 'init')) + : !o && + !Y && + this.options.ecmaVersion >= 5 && + !n.computed && + n.key.type === 'Identifier' && + (n.key.name === 'get' || n.key.name === 'set') && + this.type !== c.comma && + this.type !== c.braceR && + this.type !== c.eq + ? ((l || f) && this.unexpected(), this.parseGetterSetter(n)) + : this.options.ecmaVersion >= 6 && + !n.computed && + n.key.type === 'Identifier' + ? ((l || f) && this.unexpected(), + this.checkUnreserved(n.key), + n.key.name === 'await' && + !this.awaitIdentPos && + (this.awaitIdentPos = m), + o + ? (n.value = this.parseMaybeDefault( + m, + E, + this.copyNode(n.key) + )) + : this.type === c.eq && O + ? (O.shorthandAssign < 0 && (O.shorthandAssign = this.start), + (n.value = this.parseMaybeDefault( + m, + E, + this.copyNode(n.key) + ))) + : (n.value = this.copyNode(n.key)), + (n.kind = 'init'), + (n.shorthand = !0)) + : this.unexpected(); + }), + (de.parsePropertyName = function (n) { + if (this.options.ecmaVersion >= 6) { + if (this.eat(c.bracketL)) + return ( + (n.computed = !0), + (n.key = this.parseMaybeAssign()), + this.expect(c.bracketR), + n.key + ); + n.computed = !1; + } + return (n.key = + this.type === c.num || this.type === c.string + ? this.parseExprAtom() + : this.parseIdent(this.options.allowReserved !== 'never')); + }), + (de.initFunction = function (n) { + (n.id = null), + this.options.ecmaVersion >= 6 && (n.generator = n.expression = !1), + this.options.ecmaVersion >= 8 && (n.async = !1); + }), + (de.parseMethod = function (n, o, l) { + var f = this.startNode(), + m = this.yieldPos, + E = this.awaitPos, + O = this.awaitIdentPos; + return ( + this.initFunction(f), + this.options.ecmaVersion >= 6 && (f.generator = n), + this.options.ecmaVersion >= 8 && (f.async = !!o), + (this.yieldPos = 0), + (this.awaitPos = 0), + (this.awaitIdentPos = 0), + this.enterScope(ut(o, f.generator) | Ee | (l ? Le : 0)), + this.expect(c.parenL), + (f.params = this.parseBindingList( + c.parenR, + !1, + this.options.ecmaVersion >= 8 + )), + this.checkYieldAwaitInDefaultParams(), + this.parseFunctionBody(f, !1, !0, !1), + (this.yieldPos = m), + (this.awaitPos = E), + (this.awaitIdentPos = O), + this.finishNode(f, 'FunctionExpression') + ); + }), + (de.parseArrowExpression = function (n, o, l, f) { + var m = this.yieldPos, + E = this.awaitPos, + O = this.awaitIdentPos; + return ( + this.enterScope(ut(l, !1) | he), + this.initFunction(n), + this.options.ecmaVersion >= 8 && (n.async = !!l), + (this.yieldPos = 0), + (this.awaitPos = 0), + (this.awaitIdentPos = 0), + (n.params = this.toAssignableList(o, !0)), + this.parseFunctionBody(n, !0, !1, f), + (this.yieldPos = m), + (this.awaitPos = E), + (this.awaitIdentPos = O), + this.finishNode(n, 'ArrowFunctionExpression') + ); + }), + (de.parseFunctionBody = function (n, o, l, f) { + var m = o && this.type !== c.braceL, + E = this.strict, + O = !1; + if (m) + (n.body = this.parseMaybeAssign(f)), + (n.expression = !0), + this.checkParams(n, !1); + else { + var Y = + this.options.ecmaVersion >= 7 && + !this.isSimpleParamList(n.params); + (!E || Y) && + ((O = this.strictDirective(this.end)), + O && + Y && + this.raiseRecoverable( + n.start, + "Illegal 'use strict' directive in function with non-simple parameter list" + )); + var Q = this.labels; + (this.labels = []), + O && (this.strict = !0), + this.checkParams( + n, + !E && !O && !o && !l && this.isSimpleParamList(n.params) + ), + this.strict && n.id && this.checkLValSimple(n.id, Dn), + (n.body = this.parseBlock(!1, void 0, O && !E)), + (n.expression = !1), + this.adaptDirectivePrologue(n.body.body), + (this.labels = Q); + } + this.exitScope(); + }), + (de.isSimpleParamList = function (n) { + for (var o = 0, l = n; o < l.length; o += 1) { + var f = l[o]; + if (f.type !== 'Identifier') return !1; + } + return !0; + }), + (de.checkParams = function (n, o) { + for ( + var l = Object.create(null), f = 0, m = n.params; + f < m.length; + f += 1 + ) { + var E = m[f]; + this.checkLValInnerPattern(E, bt, o ? null : l); + } + }), + (de.parseExprList = function (n, o, l, f) { + for (var m = [], E = !0; !this.eat(n); ) { + if (E) E = !1; + else if ((this.expect(c.comma), o && this.afterTrailingComma(n))) + break; + var O = void 0; + l && this.type === c.comma + ? (O = null) + : this.type === c.ellipsis + ? ((O = this.parseSpread(f)), + f && + this.type === c.comma && + f.trailingComma < 0 && + (f.trailingComma = this.start)) + : (O = this.parseMaybeAssign(!1, f)), + m.push(O); + } + return m; + }), + (de.checkUnreserved = function (n) { + var o = n.start, + l = n.end, + f = n.name; + if ( + (this.inGenerator && + f === 'yield' && + this.raiseRecoverable( + o, + "Cannot use 'yield' as identifier inside a generator" + ), + this.inAsync && + f === 'await' && + this.raiseRecoverable( + o, + "Cannot use 'await' as identifier inside an async function" + ), + !(this.currentThisScope().flags & Ke) && + f === 'arguments' && + this.raiseRecoverable( + o, + "Cannot use 'arguments' in class field initializer" + ), + this.inClassStaticBlock && + (f === 'arguments' || f === 'await') && + this.raise( + o, + 'Cannot use ' + f + ' in class static initialization block' + ), + this.keywords.test(f) && + this.raise(o, "Unexpected keyword '" + f + "'"), + !( + this.options.ecmaVersion < 6 && + this.input.slice(o, l).indexOf('\\') !== -1 + )) + ) { + var m = this.strict ? this.reservedWordsStrict : this.reservedWords; + m.test(f) && + (!this.inAsync && + f === 'await' && + this.raiseRecoverable( + o, + "Cannot use keyword 'await' outside an async function" + ), + this.raiseRecoverable(o, "The keyword '" + f + "' is reserved")); + } + }), + (de.parseIdent = function (n) { + var o = this.parseIdentNode(); + return ( + this.next(!!n), + this.finishNode(o, 'Identifier'), + n || + (this.checkUnreserved(o), + o.name === 'await' && + !this.awaitIdentPos && + (this.awaitIdentPos = o.start)), + o + ); + }), + (de.parseIdentNode = function () { + var n = this.startNode(); + return ( + this.type === c.name + ? (n.name = this.value) + : this.type.keyword + ? ((n.name = this.type.keyword), + (n.name === 'class' || n.name === 'function') && + (this.lastTokEnd !== this.lastTokStart + 1 || + this.input.charCodeAt(this.lastTokStart) !== 46) && + this.context.pop(), + (this.type = c.name)) + : this.unexpected(), + n + ); + }), + (de.parsePrivateIdent = function () { + var n = this.startNode(); + return ( + this.type === c.privateId + ? (n.name = this.value) + : this.unexpected(), + this.next(), + this.finishNode(n, 'PrivateIdentifier'), + this.options.checkPrivateFields && + (this.privateNameStack.length === 0 + ? this.raise( + n.start, + "Private field '#" + + n.name + + "' must be declared in an enclosing class" + ) + : this.privateNameStack[ + this.privateNameStack.length - 1 + ].used.push(n)), + n + ); + }), + (de.parseYield = function (n) { + this.yieldPos || (this.yieldPos = this.start); + var o = this.startNode(); + return ( + this.next(), + this.type === c.semi || + this.canInsertSemicolon() || + (this.type !== c.star && !this.type.startsExpr) + ? ((o.delegate = !1), (o.argument = null)) + : ((o.delegate = this.eat(c.star)), + (o.argument = this.parseMaybeAssign(n))), + this.finishNode(o, 'YieldExpression') + ); + }), + (de.parseAwait = function (n) { + this.awaitPos || (this.awaitPos = this.start); + var o = this.startNode(); + return ( + this.next(), + (o.argument = this.parseMaybeUnary(null, !0, !1, n)), + this.finishNode(o, 'AwaitExpression') + ); + }); + var ts = Ge.prototype; + (ts.raise = function (n, o) { + var l = $t(this.input, n); + (o += ' (' + l.line + ':' + l.column + ')'), + this.sourceFile && (o += ' in ' + this.sourceFile); + var f = new SyntaxError(o); + throw ((f.pos = n), (f.loc = l), (f.raisedAt = this.pos), f); + }), + (ts.raiseRecoverable = ts.raise), + (ts.curPosition = function () { + if (this.options.locations) + return new ct(this.curLine, this.pos - this.lineStart); + }); + var rn = Ge.prototype, + wi = function (o) { + (this.flags = o), + (this.var = []), + (this.lexical = []), + (this.functions = []); + }; + (rn.enterScope = function (n) { + this.scopeStack.push(new wi(n)); + }), + (rn.exitScope = function () { + this.scopeStack.pop(); + }), + (rn.treatFunctionsAsVarInScope = function (n) { + return n.flags & J || (!this.inModule && n.flags & G); + }), + (rn.declareName = function (n, o, l) { + var f = !1; + if (o === yt) { + var m = this.currentScope(); + (f = + m.lexical.indexOf(n) > -1 || + m.functions.indexOf(n) > -1 || + m.var.indexOf(n) > -1), + m.lexical.push(n), + this.inModule && m.flags & G && delete this.undefinedExports[n]; + } else if (o === bn) { + var E = this.currentScope(); + E.lexical.push(n); + } else if (o === vt) { + var O = this.currentScope(); + this.treatFunctionsAsVar + ? (f = O.lexical.indexOf(n) > -1) + : (f = O.lexical.indexOf(n) > -1 || O.var.indexOf(n) > -1), + O.functions.push(n); + } else + for (var Y = this.scopeStack.length - 1; Y >= 0; --Y) { + var Q = this.scopeStack[Y]; + if ( + (Q.lexical.indexOf(n) > -1 && + !(Q.flags & Ie && Q.lexical[0] === n)) || + (!this.treatFunctionsAsVarInScope(Q) && + Q.functions.indexOf(n) > -1) + ) { + f = !0; + break; + } + if ( + (Q.var.push(n), + this.inModule && Q.flags & G && delete this.undefinedExports[n], + Q.flags & Ke) + ) + break; + } + f && + this.raiseRecoverable( + l, + "Identifier '" + n + "' has already been declared" + ); + }), + (rn.checkLocalExport = function (n) { + this.scopeStack[0].lexical.indexOf(n.name) === -1 && + this.scopeStack[0].var.indexOf(n.name) === -1 && + (this.undefinedExports[n.name] = n); + }), + (rn.currentScope = function () { + return this.scopeStack[this.scopeStack.length - 1]; + }), + (rn.currentVarScope = function () { + for (var n = this.scopeStack.length - 1; ; n--) { + var o = this.scopeStack[n]; + if (o.flags & (Ke | We | Xe)) return o; + } + }), + (rn.currentThisScope = function () { + for (var n = this.scopeStack.length - 1; ; n--) { + var o = this.scopeStack[n]; + if (o.flags & (Ke | We | Xe) && !(o.flags & he)) return o; + } + }); + var Fn = function (o, l, f) { + (this.type = ''), + (this.start = l), + (this.end = 0), + o.options.locations && (this.loc = new wt(o, f)), + o.options.directSourceFile && + (this.sourceFile = o.options.directSourceFile), + o.options.ranges && (this.range = [l, 0]); + }, + Bn = Ge.prototype; + (Bn.startNode = function () { + return new Fn(this, this.start, this.startLoc); + }), + (Bn.startNodeAt = function (n, o) { + return new Fn(this, n, o); + }); + function Fs(n, o, l, f) { + return ( + (n.type = o), + (n.end = l), + this.options.locations && (n.loc.end = f), + this.options.ranges && (n.range[1] = l), + n + ); + } + (Bn.finishNode = function (n, o) { + return Fs.call(this, n, o, this.lastTokEnd, this.lastTokEndLoc); + }), + (Bn.finishNodeAt = function (n, o, l, f) { + return Fs.call(this, n, o, l, f); + }), + (Bn.copyNode = function (n) { + var o = new Fn(this, n.start, this.startLoc); + for (var l in n) o[l] = n[l]; + return o; + }); + var Si = + 'Gara Garay Gukh Gurung_Khema Hrkt Katakana_Or_Hiragana Kawi Kirat_Rai Krai Nag_Mundari Nagm Ol_Onal Onao Sunu Sunuwar Todhri Todr Tulu_Tigalari Tutg Unknown Zzzz', + Bs = + 'ASCII ASCII_Hex_Digit AHex Alphabetic Alpha Any Assigned Bidi_Control Bidi_C Bidi_Mirrored Bidi_M Case_Ignorable CI Cased Changes_When_Casefolded CWCF Changes_When_Casemapped CWCM Changes_When_Lowercased CWL Changes_When_NFKC_Casefolded CWKCF Changes_When_Titlecased CWT Changes_When_Uppercased CWU Dash Default_Ignorable_Code_Point DI Deprecated Dep Diacritic Dia Emoji Emoji_Component Emoji_Modifier Emoji_Modifier_Base Emoji_Presentation Extender Ext Grapheme_Base Gr_Base Grapheme_Extend Gr_Ext Hex_Digit Hex IDS_Binary_Operator IDSB IDS_Trinary_Operator IDST ID_Continue IDC ID_Start IDS Ideographic Ideo Join_Control Join_C Logical_Order_Exception LOE Lowercase Lower Math Noncharacter_Code_Point NChar Pattern_Syntax Pat_Syn Pattern_White_Space Pat_WS Quotation_Mark QMark Radical Regional_Indicator RI Sentence_Terminal STerm Soft_Dotted SD Terminal_Punctuation Term Unified_Ideograph UIdeo Uppercase Upper Variation_Selector VS White_Space space XID_Continue XIDC XID_Start XIDS', + Vs = Bs + ' Extended_Pictographic', + js = Vs, + $s = js + ' EBase EComp EMod EPres ExtPict', + qs = $s, + Ii = qs, + Ei = {9: Bs, 10: Vs, 11: js, 12: $s, 13: qs, 14: Ii}, + Ai = + 'Basic_Emoji Emoji_Keycap_Sequence RGI_Emoji_Modifier_Sequence RGI_Emoji_Flag_Sequence RGI_Emoji_Tag_Sequence RGI_Emoji_ZWJ_Sequence RGI_Emoji', + Pi = {9: '', 10: '', 11: '', 12: '', 13: '', 14: Ai}, + Ks = + 'Cased_Letter LC Close_Punctuation Pe Connector_Punctuation Pc Control Cc cntrl Currency_Symbol Sc Dash_Punctuation Pd Decimal_Number Nd digit Enclosing_Mark Me Final_Punctuation Pf Format Cf Initial_Punctuation Pi Letter L Letter_Number Nl Line_Separator Zl Lowercase_Letter Ll Mark M Combining_Mark Math_Symbol Sm Modifier_Letter Lm Modifier_Symbol Sk Nonspacing_Mark Mn Number N Open_Punctuation Ps Other C Other_Letter Lo Other_Number No Other_Punctuation Po Other_Symbol So Paragraph_Separator Zp Private_Use Co Punctuation P punct Separator Z Space_Separator Zs Spacing_Mark Mc Surrogate Cs Symbol S Titlecase_Letter Lt Unassigned Cn Uppercase_Letter Lu', + Us = + 'Adlam Adlm Ahom Anatolian_Hieroglyphs Hluw Arabic Arab Armenian Armn Avestan Avst Balinese Bali Bamum Bamu Bassa_Vah Bass Batak Batk Bengali Beng Bhaiksuki Bhks Bopomofo Bopo Brahmi Brah Braille Brai Buginese Bugi Buhid Buhd Canadian_Aboriginal Cans Carian Cari Caucasian_Albanian Aghb Chakma Cakm Cham Cham Cherokee Cher Common Zyyy Coptic Copt Qaac Cuneiform Xsux Cypriot Cprt Cyrillic Cyrl Deseret Dsrt Devanagari Deva Duployan Dupl Egyptian_Hieroglyphs Egyp Elbasan Elba Ethiopic Ethi Georgian Geor Glagolitic Glag Gothic Goth Grantha Gran Greek Grek Gujarati Gujr Gurmukhi Guru Han Hani Hangul Hang Hanunoo Hano Hatran Hatr Hebrew Hebr Hiragana Hira Imperial_Aramaic Armi Inherited Zinh Qaai Inscriptional_Pahlavi Phli Inscriptional_Parthian Prti Javanese Java Kaithi Kthi Kannada Knda Katakana Kana Kayah_Li Kali Kharoshthi Khar Khmer Khmr Khojki Khoj Khudawadi Sind Lao Laoo Latin Latn Lepcha Lepc Limbu Limb Linear_A Lina Linear_B Linb Lisu Lisu Lycian Lyci Lydian Lydi Mahajani Mahj Malayalam Mlym Mandaic Mand Manichaean Mani Marchen Marc Masaram_Gondi Gonm Meetei_Mayek Mtei Mende_Kikakui Mend Meroitic_Cursive Merc Meroitic_Hieroglyphs Mero Miao Plrd Modi Mongolian Mong Mro Mroo Multani Mult Myanmar Mymr Nabataean Nbat New_Tai_Lue Talu Newa Newa Nko Nkoo Nushu Nshu Ogham Ogam Ol_Chiki Olck Old_Hungarian Hung Old_Italic Ital Old_North_Arabian Narb Old_Permic Perm Old_Persian Xpeo Old_South_Arabian Sarb Old_Turkic Orkh Oriya Orya Osage Osge Osmanya Osma Pahawh_Hmong Hmng Palmyrene Palm Pau_Cin_Hau Pauc Phags_Pa Phag Phoenician Phnx Psalter_Pahlavi Phlp Rejang Rjng Runic Runr Samaritan Samr Saurashtra Saur Sharada Shrd Shavian Shaw Siddham Sidd SignWriting Sgnw Sinhala Sinh Sora_Sompeng Sora Soyombo Soyo Sundanese Sund Syloti_Nagri Sylo Syriac Syrc Tagalog Tglg Tagbanwa Tagb Tai_Le Tale Tai_Tham Lana Tai_Viet Tavt Takri Takr Tamil Taml Tangut Tang Telugu Telu Thaana Thaa Thai Thai Tibetan Tibt Tifinagh Tfng Tirhuta Tirh Ugaritic Ugar Vai Vaii Warang_Citi Wara Yi Yiii Zanabazar_Square Zanb', + Hs = + Us + + ' Dogra Dogr Gunjala_Gondi Gong Hanifi_Rohingya Rohg Makasar Maka Medefaidrin Medf Old_Sogdian Sogo Sogdian Sogd', + Ws = + Hs + + ' Elymaic Elym Nandinagari Nand Nyiakeng_Puachue_Hmong Hmnp Wancho Wcho', + Gs = + Ws + + ' Chorasmian Chrs Diak Dives_Akuru Khitan_Small_Script Kits Yezi Yezidi', + zs = + Gs + + ' Cypro_Minoan Cpmn Old_Uyghur Ougr Tangsa Tnsa Toto Vithkuqi Vith', + jo = zs + ' ' + Si, + $o = {9: Us, 10: Hs, 11: Ws, 12: Gs, 13: zs, 14: jo}, + mr = {}; + function qo(n) { + var o = (mr[n] = { + binary: tt(Ei[n] + ' ' + Ks), + binaryOfStrings: tt(Pi[n]), + nonBinary: {General_Category: tt(Ks), Script: tt($o[n])}, + }); + (o.nonBinary.Script_Extensions = o.nonBinary.Script), + (o.nonBinary.gc = o.nonBinary.General_Category), + (o.nonBinary.sc = o.nonBinary.Script), + (o.nonBinary.scx = o.nonBinary.Script_Extensions); + } + for (var Ni = 0, yr = [9, 10, 11, 12, 13, 14]; Ni < yr.length; Ni += 1) { + var Ko = yr[Ni]; + qo(Ko); + } + var le = Ge.prototype, + Xs = function (o, l) { + (this.parent = o), (this.base = l || this); + }; + (Xs.prototype.separatedFrom = function (o) { + for (var l = this; l; l = l.parent) + for (var f = o; f; f = f.parent) + if (l.base === f.base && l !== f) return !0; + return !1; + }), + (Xs.prototype.sibling = function () { + return new Xs(this.parent, this.base); + }); + var on = function (o) { + (this.parser = o), + (this.validFlags = + 'gim' + + (o.options.ecmaVersion >= 6 ? 'uy' : '') + + (o.options.ecmaVersion >= 9 ? 's' : '') + + (o.options.ecmaVersion >= 13 ? 'd' : '') + + (o.options.ecmaVersion >= 15 ? 'v' : '')), + (this.unicodeProperties = + mr[o.options.ecmaVersion >= 14 ? 14 : o.options.ecmaVersion]), + (this.source = ''), + (this.flags = ''), + (this.start = 0), + (this.switchU = !1), + (this.switchV = !1), + (this.switchN = !1), + (this.pos = 0), + (this.lastIntValue = 0), + (this.lastStringValue = ''), + (this.lastAssertionIsQuantifiable = !1), + (this.numCapturingParens = 0), + (this.maxBackReference = 0), + (this.groupNames = Object.create(null)), + (this.backReferenceNames = []), + (this.branchID = null); + }; + (on.prototype.reset = function (o, l, f) { + var m = f.indexOf('v') !== -1, + E = f.indexOf('u') !== -1; + (this.start = o | 0), + (this.source = l + ''), + (this.flags = f), + m && this.parser.options.ecmaVersion >= 15 + ? ((this.switchU = !0), (this.switchV = !0), (this.switchN = !0)) + : ((this.switchU = E && this.parser.options.ecmaVersion >= 6), + (this.switchV = !1), + (this.switchN = E && this.parser.options.ecmaVersion >= 9)); + }), + (on.prototype.raise = function (o) { + this.parser.raiseRecoverable( + this.start, + 'Invalid regular expression: /' + this.source + '/: ' + o + ); + }), + (on.prototype.at = function (o, l) { + l === void 0 && (l = !1); + var f = this.source, + m = f.length; + if (o >= m) return -1; + var E = f.charCodeAt(o); + if (!(l || this.switchU) || E <= 55295 || E >= 57344 || o + 1 >= m) + return E; + var O = f.charCodeAt(o + 1); + return O >= 56320 && O <= 57343 ? (E << 10) + O - 56613888 : E; + }), + (on.prototype.nextIndex = function (o, l) { + l === void 0 && (l = !1); + var f = this.source, + m = f.length; + if (o >= m) return m; + var E = f.charCodeAt(o), + O; + return !(l || this.switchU) || + E <= 55295 || + E >= 57344 || + o + 1 >= m || + (O = f.charCodeAt(o + 1)) < 56320 || + O > 57343 + ? o + 1 + : o + 2; + }), + (on.prototype.current = function (o) { + return o === void 0 && (o = !1), this.at(this.pos, o); + }), + (on.prototype.lookahead = function (o) { + return ( + o === void 0 && (o = !1), this.at(this.nextIndex(this.pos, o), o) + ); + }), + (on.prototype.advance = function (o) { + o === void 0 && (o = !1), (this.pos = this.nextIndex(this.pos, o)); + }), + (on.prototype.eat = function (o, l) { + return ( + l === void 0 && (l = !1), + this.current(l) === o ? (this.advance(l), !0) : !1 + ); + }), + (on.prototype.eatChars = function (o, l) { + l === void 0 && (l = !1); + for (var f = this.pos, m = 0, E = o; m < E.length; m += 1) { + var O = E[m], + Y = this.at(f, l); + if (Y === -1 || Y !== O) return !1; + f = this.nextIndex(f, l); + } + return (this.pos = f), !0; + }), + (le.validateRegExpFlags = function (n) { + for ( + var o = n.validFlags, l = n.flags, f = !1, m = !1, E = 0; + E < l.length; + E++ + ) { + var O = l.charAt(E); + o.indexOf(O) === -1 && + this.raise(n.start, 'Invalid regular expression flag'), + l.indexOf(O, E + 1) > -1 && + this.raise(n.start, 'Duplicate regular expression flag'), + O === 'u' && (f = !0), + O === 'v' && (m = !0); + } + this.options.ecmaVersion >= 15 && + f && + m && + this.raise(n.start, 'Invalid regular expression flag'); + }); + function Uo(n) { + for (var o in n) return !0; + return !1; + } + (le.validateRegExpPattern = function (n) { + this.regexp_pattern(n), + !n.switchN && + this.options.ecmaVersion >= 9 && + Uo(n.groupNames) && + ((n.switchN = !0), this.regexp_pattern(n)); + }), + (le.regexp_pattern = function (n) { + (n.pos = 0), + (n.lastIntValue = 0), + (n.lastStringValue = ''), + (n.lastAssertionIsQuantifiable = !1), + (n.numCapturingParens = 0), + (n.maxBackReference = 0), + (n.groupNames = Object.create(null)), + (n.backReferenceNames.length = 0), + (n.branchID = null), + this.regexp_disjunction(n), + n.pos !== n.source.length && + (n.eat(41) && n.raise("Unmatched ')'"), + (n.eat(93) || n.eat(125)) && n.raise('Lone quantifier brackets')), + n.maxBackReference > n.numCapturingParens && + n.raise('Invalid escape'); + for (var o = 0, l = n.backReferenceNames; o < l.length; o += 1) { + var f = l[o]; + n.groupNames[f] || n.raise('Invalid named capture referenced'); + } + }), + (le.regexp_disjunction = function (n) { + var o = this.options.ecmaVersion >= 16; + for ( + o && (n.branchID = new Xs(n.branchID, null)), + this.regexp_alternative(n); + n.eat(124); + + ) + o && (n.branchID = n.branchID.sibling()), + this.regexp_alternative(n); + o && (n.branchID = n.branchID.parent), + this.regexp_eatQuantifier(n, !0) && n.raise('Nothing to repeat'), + n.eat(123) && n.raise('Lone quantifier brackets'); + }), + (le.regexp_alternative = function (n) { + for (; n.pos < n.source.length && this.regexp_eatTerm(n); ); + }), + (le.regexp_eatTerm = function (n) { + return this.regexp_eatAssertion(n) + ? (n.lastAssertionIsQuantifiable && + this.regexp_eatQuantifier(n) && + n.switchU && + n.raise('Invalid quantifier'), + !0) + : ( + n.switchU + ? this.regexp_eatAtom(n) + : this.regexp_eatExtendedAtom(n) + ) + ? (this.regexp_eatQuantifier(n), !0) + : !1; + }), + (le.regexp_eatAssertion = function (n) { + var o = n.pos; + if (((n.lastAssertionIsQuantifiable = !1), n.eat(94) || n.eat(36))) + return !0; + if (n.eat(92)) { + if (n.eat(66) || n.eat(98)) return !0; + n.pos = o; + } + if (n.eat(40) && n.eat(63)) { + var l = !1; + if ( + (this.options.ecmaVersion >= 9 && (l = n.eat(60)), + n.eat(61) || n.eat(33)) + ) + return ( + this.regexp_disjunction(n), + n.eat(41) || n.raise('Unterminated group'), + (n.lastAssertionIsQuantifiable = !l), + !0 + ); + } + return (n.pos = o), !1; + }), + (le.regexp_eatQuantifier = function (n, o) { + return ( + o === void 0 && (o = !1), + this.regexp_eatQuantifierPrefix(n, o) ? (n.eat(63), !0) : !1 + ); + }), + (le.regexp_eatQuantifierPrefix = function (n, o) { + return ( + n.eat(42) || + n.eat(43) || + n.eat(63) || + this.regexp_eatBracedQuantifier(n, o) + ); + }), + (le.regexp_eatBracedQuantifier = function (n, o) { + var l = n.pos; + if (n.eat(123)) { + var f = 0, + m = -1; + if ( + this.regexp_eatDecimalDigits(n) && + ((f = n.lastIntValue), + n.eat(44) && + this.regexp_eatDecimalDigits(n) && + (m = n.lastIntValue), + n.eat(125)) + ) + return ( + m !== -1 && + m < f && + !o && + n.raise('numbers out of order in {} quantifier'), + !0 + ); + n.switchU && !o && n.raise('Incomplete quantifier'), (n.pos = l); + } + return !1; + }), + (le.regexp_eatAtom = function (n) { + return ( + this.regexp_eatPatternCharacters(n) || + n.eat(46) || + this.regexp_eatReverseSolidusAtomEscape(n) || + this.regexp_eatCharacterClass(n) || + this.regexp_eatUncapturingGroup(n) || + this.regexp_eatCapturingGroup(n) + ); + }), + (le.regexp_eatReverseSolidusAtomEscape = function (n) { + var o = n.pos; + if (n.eat(92)) { + if (this.regexp_eatAtomEscape(n)) return !0; + n.pos = o; + } + return !1; + }), + (le.regexp_eatUncapturingGroup = function (n) { + var o = n.pos; + if (n.eat(40)) { + if (n.eat(63)) { + if (this.options.ecmaVersion >= 16) { + var l = this.regexp_eatModifiers(n), + f = n.eat(45); + if (l || f) { + for (var m = 0; m < l.length; m++) { + var E = l.charAt(m); + l.indexOf(E, m + 1) > -1 && + n.raise('Duplicate regular expression modifiers'); + } + if (f) { + var O = this.regexp_eatModifiers(n); + !l && + !O && + n.current() === 58 && + n.raise('Invalid regular expression modifiers'); + for (var Y = 0; Y < O.length; Y++) { + var Q = O.charAt(Y); + (O.indexOf(Q, Y + 1) > -1 || l.indexOf(Q) > -1) && + n.raise('Duplicate regular expression modifiers'); + } + } + } + } + if (n.eat(58)) { + if ((this.regexp_disjunction(n), n.eat(41))) return !0; + n.raise('Unterminated group'); + } + } + n.pos = o; + } + return !1; + }), + (le.regexp_eatCapturingGroup = function (n) { + if (n.eat(40)) { + if ( + (this.options.ecmaVersion >= 9 + ? this.regexp_groupSpecifier(n) + : n.current() === 63 && n.raise('Invalid group'), + this.regexp_disjunction(n), + n.eat(41)) + ) + return (n.numCapturingParens += 1), !0; + n.raise('Unterminated group'); + } + return !1; + }), + (le.regexp_eatModifiers = function (n) { + for (var o = '', l = 0; (l = n.current()) !== -1 && Ho(l); ) + (o += nt(l)), n.advance(); + return o; + }); + function Ho(n) { + return n === 105 || n === 109 || n === 115; + } + (le.regexp_eatExtendedAtom = function (n) { + return ( + n.eat(46) || + this.regexp_eatReverseSolidusAtomEscape(n) || + this.regexp_eatCharacterClass(n) || + this.regexp_eatUncapturingGroup(n) || + this.regexp_eatCapturingGroup(n) || + this.regexp_eatInvalidBracedQuantifier(n) || + this.regexp_eatExtendedPatternCharacter(n) + ); + }), + (le.regexp_eatInvalidBracedQuantifier = function (n) { + return ( + this.regexp_eatBracedQuantifier(n, !0) && + n.raise('Nothing to repeat'), + !1 + ); + }), + (le.regexp_eatSyntaxCharacter = function (n) { + var o = n.current(); + return Tr(o) ? ((n.lastIntValue = o), n.advance(), !0) : !1; + }); + function Tr(n) { + return ( + n === 36 || + (n >= 40 && n <= 43) || + n === 46 || + n === 63 || + (n >= 91 && n <= 94) || + (n >= 123 && n <= 125) + ); + } + (le.regexp_eatPatternCharacters = function (n) { + for (var o = n.pos, l = 0; (l = n.current()) !== -1 && !Tr(l); ) + n.advance(); + return n.pos !== o; + }), + (le.regexp_eatExtendedPatternCharacter = function (n) { + var o = n.current(); + return o !== -1 && + o !== 36 && + !(o >= 40 && o <= 43) && + o !== 46 && + o !== 63 && + o !== 91 && + o !== 94 && + o !== 124 + ? (n.advance(), !0) + : !1; + }), + (le.regexp_groupSpecifier = function (n) { + if (n.eat(63)) { + this.regexp_eatGroupName(n) || n.raise('Invalid group'); + var o = this.options.ecmaVersion >= 16, + l = n.groupNames[n.lastStringValue]; + if (l) + if (o) + for (var f = 0, m = l; f < m.length; f += 1) { + var E = m[f]; + E.separatedFrom(n.branchID) || + n.raise('Duplicate capture group name'); + } + else n.raise('Duplicate capture group name'); + o + ? (l || (n.groupNames[n.lastStringValue] = [])).push(n.branchID) + : (n.groupNames[n.lastStringValue] = !0); + } + }), + (le.regexp_eatGroupName = function (n) { + if (((n.lastStringValue = ''), n.eat(60))) { + if (this.regexp_eatRegExpIdentifierName(n) && n.eat(62)) return !0; + n.raise('Invalid capture group name'); + } + return !1; + }), + (le.regexp_eatRegExpIdentifierName = function (n) { + if ( + ((n.lastStringValue = ''), this.regexp_eatRegExpIdentifierStart(n)) + ) { + for ( + n.lastStringValue += nt(n.lastIntValue); + this.regexp_eatRegExpIdentifierPart(n); + + ) + n.lastStringValue += nt(n.lastIntValue); + return !0; + } + return !1; + }), + (le.regexp_eatRegExpIdentifierStart = function (n) { + var o = n.pos, + l = this.options.ecmaVersion >= 11, + f = n.current(l); + return ( + n.advance(l), + f === 92 && + this.regexp_eatRegExpUnicodeEscapeSequence(n, l) && + (f = n.lastIntValue), + Wo(f) ? ((n.lastIntValue = f), !0) : ((n.pos = o), !1) + ); + }); + function Wo(n) { + return h(n, !0) || n === 36 || n === 95; + } + le.regexp_eatRegExpIdentifierPart = function (n) { + var o = n.pos, + l = this.options.ecmaVersion >= 11, + f = n.current(l); + return ( + n.advance(l), + f === 92 && + this.regexp_eatRegExpUnicodeEscapeSequence(n, l) && + (f = n.lastIntValue), + Go(f) ? ((n.lastIntValue = f), !0) : ((n.pos = o), !1) + ); + }; + function Go(n) { + return T(n, !0) || n === 36 || n === 95 || n === 8204 || n === 8205; + } + (le.regexp_eatAtomEscape = function (n) { + return this.regexp_eatBackReference(n) || + this.regexp_eatCharacterClassEscape(n) || + this.regexp_eatCharacterEscape(n) || + (n.switchN && this.regexp_eatKGroupName(n)) + ? !0 + : (n.switchU && + (n.current() === 99 && n.raise('Invalid unicode escape'), + n.raise('Invalid escape')), + !1); + }), + (le.regexp_eatBackReference = function (n) { + var o = n.pos; + if (this.regexp_eatDecimalEscape(n)) { + var l = n.lastIntValue; + if (n.switchU) + return l > n.maxBackReference && (n.maxBackReference = l), !0; + if (l <= n.numCapturingParens) return !0; + n.pos = o; + } + return !1; + }), + (le.regexp_eatKGroupName = function (n) { + if (n.eat(107)) { + if (this.regexp_eatGroupName(n)) + return n.backReferenceNames.push(n.lastStringValue), !0; + n.raise('Invalid named reference'); + } + return !1; + }), + (le.regexp_eatCharacterEscape = function (n) { + return ( + this.regexp_eatControlEscape(n) || + this.regexp_eatCControlLetter(n) || + this.regexp_eatZero(n) || + this.regexp_eatHexEscapeSequence(n) || + this.regexp_eatRegExpUnicodeEscapeSequence(n, !1) || + (!n.switchU && this.regexp_eatLegacyOctalEscapeSequence(n)) || + this.regexp_eatIdentityEscape(n) + ); + }), + (le.regexp_eatCControlLetter = function (n) { + var o = n.pos; + if (n.eat(99)) { + if (this.regexp_eatControlLetter(n)) return !0; + n.pos = o; + } + return !1; + }), + (le.regexp_eatZero = function (n) { + return n.current() === 48 && !vr(n.lookahead()) + ? ((n.lastIntValue = 0), n.advance(), !0) + : !1; + }), + (le.regexp_eatControlEscape = function (n) { + var o = n.current(); + return o === 116 + ? ((n.lastIntValue = 9), n.advance(), !0) + : o === 110 + ? ((n.lastIntValue = 10), n.advance(), !0) + : o === 118 + ? ((n.lastIntValue = 11), n.advance(), !0) + : o === 102 + ? ((n.lastIntValue = 12), n.advance(), !0) + : o === 114 + ? ((n.lastIntValue = 13), n.advance(), !0) + : !1; + }), + (le.regexp_eatControlLetter = function (n) { + var o = n.current(); + return kr(o) ? ((n.lastIntValue = o % 32), n.advance(), !0) : !1; + }); + function kr(n) { + return (n >= 65 && n <= 90) || (n >= 97 && n <= 122); + } + le.regexp_eatRegExpUnicodeEscapeSequence = function (n, o) { + o === void 0 && (o = !1); + var l = n.pos, + f = o || n.switchU; + if (n.eat(117)) { + if (this.regexp_eatFixedHexDigits(n, 4)) { + var m = n.lastIntValue; + if (f && m >= 55296 && m <= 56319) { + var E = n.pos; + if ( + n.eat(92) && + n.eat(117) && + this.regexp_eatFixedHexDigits(n, 4) + ) { + var O = n.lastIntValue; + if (O >= 56320 && O <= 57343) + return ( + (n.lastIntValue = (m - 55296) * 1024 + (O - 56320) + 65536), + !0 + ); + } + (n.pos = E), (n.lastIntValue = m); + } + return !0; + } + if ( + f && + n.eat(123) && + this.regexp_eatHexDigits(n) && + n.eat(125) && + vf(n.lastIntValue) + ) + return !0; + f && n.raise('Invalid unicode escape'), (n.pos = l); + } + return !1; + }; + function vf(n) { + return n >= 0 && n <= 1114111; + } + (le.regexp_eatIdentityEscape = function (n) { + if (n.switchU) + return this.regexp_eatSyntaxCharacter(n) + ? !0 + : n.eat(47) + ? ((n.lastIntValue = 47), !0) + : !1; + var o = n.current(); + return o !== 99 && (!n.switchN || o !== 107) + ? ((n.lastIntValue = o), n.advance(), !0) + : !1; + }), + (le.regexp_eatDecimalEscape = function (n) { + n.lastIntValue = 0; + var o = n.current(); + if (o >= 49 && o <= 57) { + do (n.lastIntValue = 10 * n.lastIntValue + (o - 48)), n.advance(); + while ((o = n.current()) >= 48 && o <= 57); + return !0; + } + return !1; + }); + var Rc = 0, + Vn = 1, + an = 2; + le.regexp_eatCharacterClassEscape = function (n) { + var o = n.current(); + if (xf(o)) return (n.lastIntValue = -1), n.advance(), Vn; + var l = !1; + if ( + n.switchU && + this.options.ecmaVersion >= 9 && + ((l = o === 80) || o === 112) + ) { + (n.lastIntValue = -1), n.advance(); + var f; + if ( + n.eat(123) && + (f = this.regexp_eatUnicodePropertyValueExpression(n)) && + n.eat(125) + ) + return l && f === an && n.raise('Invalid property name'), f; + n.raise('Invalid property name'); + } + return Rc; + }; + function xf(n) { + return ( + n === 100 || + n === 68 || + n === 115 || + n === 83 || + n === 119 || + n === 87 + ); + } + (le.regexp_eatUnicodePropertyValueExpression = function (n) { + var o = n.pos; + if (this.regexp_eatUnicodePropertyName(n) && n.eat(61)) { + var l = n.lastStringValue; + if (this.regexp_eatUnicodePropertyValue(n)) { + var f = n.lastStringValue; + return this.regexp_validateUnicodePropertyNameAndValue(n, l, f), Vn; + } + } + if (((n.pos = o), this.regexp_eatLoneUnicodePropertyNameOrValue(n))) { + var m = n.lastStringValue; + return this.regexp_validateUnicodePropertyNameOrValue(n, m); + } + return Rc; + }), + (le.regexp_validateUnicodePropertyNameAndValue = function (n, o, l) { + mt(n.unicodeProperties.nonBinary, o) || + n.raise('Invalid property name'), + n.unicodeProperties.nonBinary[o].test(l) || + n.raise('Invalid property value'); + }), + (le.regexp_validateUnicodePropertyNameOrValue = function (n, o) { + if (n.unicodeProperties.binary.test(o)) return Vn; + if (n.switchV && n.unicodeProperties.binaryOfStrings.test(o)) + return an; + n.raise('Invalid property name'); + }), + (le.regexp_eatUnicodePropertyName = function (n) { + var o = 0; + for (n.lastStringValue = ''; Lc((o = n.current())); ) + (n.lastStringValue += nt(o)), n.advance(); + return n.lastStringValue !== ''; + }); + function Lc(n) { + return kr(n) || n === 95; + } + le.regexp_eatUnicodePropertyValue = function (n) { + var o = 0; + for (n.lastStringValue = ''; gf((o = n.current())); ) + (n.lastStringValue += nt(o)), n.advance(); + return n.lastStringValue !== ''; + }; + function gf(n) { + return Lc(n) || vr(n); + } + (le.regexp_eatLoneUnicodePropertyNameOrValue = function (n) { + return this.regexp_eatUnicodePropertyValue(n); + }), + (le.regexp_eatCharacterClass = function (n) { + if (n.eat(91)) { + var o = n.eat(94), + l = this.regexp_classContents(n); + return ( + n.eat(93) || n.raise('Unterminated character class'), + o && + l === an && + n.raise('Negated character class may contain strings'), + !0 + ); + } + return !1; + }), + (le.regexp_classContents = function (n) { + return n.current() === 93 + ? Vn + : n.switchV + ? this.regexp_classSetExpression(n) + : (this.regexp_nonEmptyClassRanges(n), Vn); + }), + (le.regexp_nonEmptyClassRanges = function (n) { + for (; this.regexp_eatClassAtom(n); ) { + var o = n.lastIntValue; + if (n.eat(45) && this.regexp_eatClassAtom(n)) { + var l = n.lastIntValue; + n.switchU && + (o === -1 || l === -1) && + n.raise('Invalid character class'), + o !== -1 && + l !== -1 && + o > l && + n.raise('Range out of order in character class'); + } + } + }), + (le.regexp_eatClassAtom = function (n) { + var o = n.pos; + if (n.eat(92)) { + if (this.regexp_eatClassEscape(n)) return !0; + if (n.switchU) { + var l = n.current(); + (l === 99 || Mc(l)) && n.raise('Invalid class escape'), + n.raise('Invalid escape'); + } + n.pos = o; + } + var f = n.current(); + return f !== 93 ? ((n.lastIntValue = f), n.advance(), !0) : !1; + }), + (le.regexp_eatClassEscape = function (n) { + var o = n.pos; + if (n.eat(98)) return (n.lastIntValue = 8), !0; + if (n.switchU && n.eat(45)) return (n.lastIntValue = 45), !0; + if (!n.switchU && n.eat(99)) { + if (this.regexp_eatClassControlLetter(n)) return !0; + n.pos = o; + } + return ( + this.regexp_eatCharacterClassEscape(n) || + this.regexp_eatCharacterEscape(n) + ); + }), + (le.regexp_classSetExpression = function (n) { + var o = Vn, + l; + if (!this.regexp_eatClassSetRange(n)) + if ((l = this.regexp_eatClassSetOperand(n))) { + l === an && (o = an); + for (var f = n.pos; n.eatChars([38, 38]); ) { + if ( + n.current() !== 38 && + (l = this.regexp_eatClassSetOperand(n)) + ) { + l !== an && (o = Vn); + continue; + } + n.raise('Invalid character in character class'); + } + if (f !== n.pos) return o; + for (; n.eatChars([45, 45]); ) + this.regexp_eatClassSetOperand(n) || + n.raise('Invalid character in character class'); + if (f !== n.pos) return o; + } else n.raise('Invalid character in character class'); + for (;;) + if (!this.regexp_eatClassSetRange(n)) { + if (((l = this.regexp_eatClassSetOperand(n)), !l)) return o; + l === an && (o = an); + } + }), + (le.regexp_eatClassSetRange = function (n) { + var o = n.pos; + if (this.regexp_eatClassSetCharacter(n)) { + var l = n.lastIntValue; + if (n.eat(45) && this.regexp_eatClassSetCharacter(n)) { + var f = n.lastIntValue; + return ( + l !== -1 && + f !== -1 && + l > f && + n.raise('Range out of order in character class'), + !0 + ); + } + n.pos = o; + } + return !1; + }), + (le.regexp_eatClassSetOperand = function (n) { + return this.regexp_eatClassSetCharacter(n) + ? Vn + : this.regexp_eatClassStringDisjunction(n) || + this.regexp_eatNestedClass(n); + }), + (le.regexp_eatNestedClass = function (n) { + var o = n.pos; + if (n.eat(91)) { + var l = n.eat(94), + f = this.regexp_classContents(n); + if (n.eat(93)) + return ( + l && + f === an && + n.raise('Negated character class may contain strings'), + f + ); + n.pos = o; + } + if (n.eat(92)) { + var m = this.regexp_eatCharacterClassEscape(n); + if (m) return m; + n.pos = o; + } + return null; + }), + (le.regexp_eatClassStringDisjunction = function (n) { + var o = n.pos; + if (n.eatChars([92, 113])) { + if (n.eat(123)) { + var l = this.regexp_classStringDisjunctionContents(n); + if (n.eat(125)) return l; + } else n.raise('Invalid escape'); + n.pos = o; + } + return null; + }), + (le.regexp_classStringDisjunctionContents = function (n) { + for (var o = this.regexp_classString(n); n.eat(124); ) + this.regexp_classString(n) === an && (o = an); + return o; + }), + (le.regexp_classString = function (n) { + for (var o = 0; this.regexp_eatClassSetCharacter(n); ) o++; + return o === 1 ? Vn : an; + }), + (le.regexp_eatClassSetCharacter = function (n) { + var o = n.pos; + if (n.eat(92)) + return this.regexp_eatCharacterEscape(n) || + this.regexp_eatClassSetReservedPunctuator(n) + ? !0 + : n.eat(98) + ? ((n.lastIntValue = 8), !0) + : ((n.pos = o), !1); + var l = n.current(); + return l < 0 || (l === n.lookahead() && _f(l)) || bf(l) + ? !1 + : (n.advance(), (n.lastIntValue = l), !0); + }); + function _f(n) { + return ( + n === 33 || + (n >= 35 && n <= 38) || + (n >= 42 && n <= 44) || + n === 46 || + (n >= 58 && n <= 64) || + n === 94 || + n === 96 || + n === 126 + ); + } + function bf(n) { + return ( + n === 40 || + n === 41 || + n === 45 || + n === 47 || + (n >= 91 && n <= 93) || + (n >= 123 && n <= 125) + ); + } + le.regexp_eatClassSetReservedPunctuator = function (n) { + var o = n.current(); + return Cf(o) ? ((n.lastIntValue = o), n.advance(), !0) : !1; + }; + function Cf(n) { + return ( + n === 33 || + n === 35 || + n === 37 || + n === 38 || + n === 44 || + n === 45 || + (n >= 58 && n <= 62) || + n === 64 || + n === 96 || + n === 126 + ); + } + (le.regexp_eatClassControlLetter = function (n) { + var o = n.current(); + return vr(o) || o === 95 + ? ((n.lastIntValue = o % 32), n.advance(), !0) + : !1; + }), + (le.regexp_eatHexEscapeSequence = function (n) { + var o = n.pos; + if (n.eat(120)) { + if (this.regexp_eatFixedHexDigits(n, 2)) return !0; + n.switchU && n.raise('Invalid escape'), (n.pos = o); + } + return !1; + }), + (le.regexp_eatDecimalDigits = function (n) { + var o = n.pos, + l = 0; + for (n.lastIntValue = 0; vr((l = n.current())); ) + (n.lastIntValue = 10 * n.lastIntValue + (l - 48)), n.advance(); + return n.pos !== o; + }); + function vr(n) { + return n >= 48 && n <= 57; + } + le.regexp_eatHexDigits = function (n) { + var o = n.pos, + l = 0; + for (n.lastIntValue = 0; Oc((l = n.current())); ) + (n.lastIntValue = 16 * n.lastIntValue + Dc(l)), n.advance(); + return n.pos !== o; + }; + function Oc(n) { + return ( + (n >= 48 && n <= 57) || (n >= 65 && n <= 70) || (n >= 97 && n <= 102) + ); + } + function Dc(n) { + return n >= 65 && n <= 70 + ? 10 + (n - 65) + : n >= 97 && n <= 102 + ? 10 + (n - 97) + : n - 48; + } + (le.regexp_eatLegacyOctalEscapeSequence = function (n) { + if (this.regexp_eatOctalDigit(n)) { + var o = n.lastIntValue; + if (this.regexp_eatOctalDigit(n)) { + var l = n.lastIntValue; + o <= 3 && this.regexp_eatOctalDigit(n) + ? (n.lastIntValue = o * 64 + l * 8 + n.lastIntValue) + : (n.lastIntValue = o * 8 + l); + } else n.lastIntValue = o; + return !0; + } + return !1; + }), + (le.regexp_eatOctalDigit = function (n) { + var o = n.current(); + return Mc(o) + ? ((n.lastIntValue = o - 48), n.advance(), !0) + : ((n.lastIntValue = 0), !1); + }); + function Mc(n) { + return n >= 48 && n <= 55; + } + le.regexp_eatFixedHexDigits = function (n, o) { + var l = n.pos; + n.lastIntValue = 0; + for (var f = 0; f < o; ++f) { + var m = n.current(); + if (!Oc(m)) return (n.pos = l), !1; + (n.lastIntValue = 16 * n.lastIntValue + Dc(m)), n.advance(); + } + return !0; + }; + var xr = function (o) { + (this.type = o.type), + (this.value = o.value), + (this.start = o.start), + (this.end = o.end), + o.options.locations && (this.loc = new wt(o, o.startLoc, o.endLoc)), + o.options.ranges && (this.range = [o.start, o.end]); + }, + Ae = Ge.prototype; + (Ae.next = function (n) { + !n && + this.type.keyword && + this.containsEsc && + this.raiseRecoverable( + this.start, + 'Escape sequence in keyword ' + this.type.keyword + ), + this.options.onToken && this.options.onToken(new xr(this)), + (this.lastTokEnd = this.end), + (this.lastTokStart = this.start), + (this.lastTokEndLoc = this.endLoc), + (this.lastTokStartLoc = this.startLoc), + this.nextToken(); + }), + (Ae.getToken = function () { + return this.next(), new xr(this); + }), + typeof Symbol < 'u' && + (Ae[Symbol.iterator] = function () { + var n = this; + return { + next: function () { + var o = n.getToken(); + return {done: o.type === c.eof, value: o}; + }, + }; + }), + (Ae.nextToken = function () { + var n = this.curContext(); + if ( + ((!n || !n.preserveSpace) && this.skipSpace(), + (this.start = this.pos), + this.options.locations && (this.startLoc = this.curPosition()), + this.pos >= this.input.length) + ) + return this.finishToken(c.eof); + if (n.override) return n.override(this); + this.readToken(this.fullCharCodeAtPos()); + }), + (Ae.readToken = function (n) { + return h(n, this.options.ecmaVersion >= 6) || n === 92 + ? this.readWord() + : this.getTokenFromCode(n); + }), + (Ae.fullCharCodeAtPos = function () { + var n = this.input.charCodeAt(this.pos); + if (n <= 55295 || n >= 56320) return n; + var o = this.input.charCodeAt(this.pos + 1); + return o <= 56319 || o >= 57344 ? n : (n << 10) + o - 56613888; + }), + (Ae.skipBlockComment = function () { + var n = this.options.onComment && this.curPosition(), + o = this.pos, + l = this.input.indexOf('*/', (this.pos += 2)); + if ( + (l === -1 && this.raise(this.pos - 2, 'Unterminated comment'), + (this.pos = l + 2), + this.options.locations) + ) + for ( + var f = void 0, m = o; + (f = ie(this.input, m, this.pos)) > -1; + + ) + ++this.curLine, (m = this.lineStart = f); + this.options.onComment && + this.options.onComment( + !0, + this.input.slice(o + 2, l), + o, + this.pos, + n, + this.curPosition() + ); + }), + (Ae.skipLineComment = function (n) { + for ( + var o = this.pos, + l = this.options.onComment && this.curPosition(), + f = this.input.charCodeAt((this.pos += n)); + this.pos < this.input.length && !X(f); + + ) + f = this.input.charCodeAt(++this.pos); + this.options.onComment && + this.options.onComment( + !1, + this.input.slice(o + n, this.pos), + o, + this.pos, + l, + this.curPosition() + ); + }), + (Ae.skipSpace = function () { + e: for (; this.pos < this.input.length; ) { + var n = this.input.charCodeAt(this.pos); + switch (n) { + case 32: + case 160: + ++this.pos; + break; + case 13: + this.input.charCodeAt(this.pos + 1) === 10 && ++this.pos; + case 10: + case 8232: + case 8233: + ++this.pos, + this.options.locations && + (++this.curLine, (this.lineStart = this.pos)); + break; + case 47: + switch (this.input.charCodeAt(this.pos + 1)) { + case 42: + this.skipBlockComment(); + break; + case 47: + this.skipLineComment(2); + break; + default: + break e; + } + break; + default: + if ( + (n > 8 && n < 14) || + (n >= 5760 && pe.test(String.fromCharCode(n))) + ) + ++this.pos; + else break e; + } + } + }), + (Ae.finishToken = function (n, o) { + (this.end = this.pos), + this.options.locations && (this.endLoc = this.curPosition()); + var l = this.type; + (this.type = n), (this.value = o), this.updateContext(l); + }), + (Ae.readToken_dot = function () { + var n = this.input.charCodeAt(this.pos + 1); + if (n >= 48 && n <= 57) return this.readNumber(!0); + var o = this.input.charCodeAt(this.pos + 2); + return this.options.ecmaVersion >= 6 && n === 46 && o === 46 + ? ((this.pos += 3), this.finishToken(c.ellipsis)) + : (++this.pos, this.finishToken(c.dot)); + }), + (Ae.readToken_slash = function () { + var n = this.input.charCodeAt(this.pos + 1); + return this.exprAllowed + ? (++this.pos, this.readRegexp()) + : n === 61 + ? this.finishOp(c.assign, 2) + : this.finishOp(c.slash, 1); + }), + (Ae.readToken_mult_modulo_exp = function (n) { + var o = this.input.charCodeAt(this.pos + 1), + l = 1, + f = n === 42 ? c.star : c.modulo; + return ( + this.options.ecmaVersion >= 7 && + n === 42 && + o === 42 && + (++l, + (f = c.starstar), + (o = this.input.charCodeAt(this.pos + 2))), + o === 61 ? this.finishOp(c.assign, l + 1) : this.finishOp(f, l) + ); + }), + (Ae.readToken_pipe_amp = function (n) { + var o = this.input.charCodeAt(this.pos + 1); + if (o === n) { + if (this.options.ecmaVersion >= 12) { + var l = this.input.charCodeAt(this.pos + 2); + if (l === 61) return this.finishOp(c.assign, 3); + } + return this.finishOp(n === 124 ? c.logicalOR : c.logicalAND, 2); + } + return o === 61 + ? this.finishOp(c.assign, 2) + : this.finishOp(n === 124 ? c.bitwiseOR : c.bitwiseAND, 1); + }), + (Ae.readToken_caret = function () { + var n = this.input.charCodeAt(this.pos + 1); + return n === 61 + ? this.finishOp(c.assign, 2) + : this.finishOp(c.bitwiseXOR, 1); + }), + (Ae.readToken_plus_min = function (n) { + var o = this.input.charCodeAt(this.pos + 1); + return o === n + ? o === 45 && + !this.inModule && + this.input.charCodeAt(this.pos + 2) === 62 && + (this.lastTokEnd === 0 || + R.test(this.input.slice(this.lastTokEnd, this.pos))) + ? (this.skipLineComment(3), this.skipSpace(), this.nextToken()) + : this.finishOp(c.incDec, 2) + : o === 61 + ? this.finishOp(c.assign, 2) + : this.finishOp(c.plusMin, 1); + }), + (Ae.readToken_lt_gt = function (n) { + var o = this.input.charCodeAt(this.pos + 1), + l = 1; + return o === n + ? ((l = + n === 62 && this.input.charCodeAt(this.pos + 2) === 62 ? 3 : 2), + this.input.charCodeAt(this.pos + l) === 61 + ? this.finishOp(c.assign, l + 1) + : this.finishOp(c.bitShift, l)) + : o === 33 && + n === 60 && + !this.inModule && + this.input.charCodeAt(this.pos + 2) === 45 && + this.input.charCodeAt(this.pos + 3) === 45 + ? (this.skipLineComment(4), this.skipSpace(), this.nextToken()) + : (o === 61 && (l = 2), this.finishOp(c.relational, l)); + }), + (Ae.readToken_eq_excl = function (n) { + var o = this.input.charCodeAt(this.pos + 1); + return o === 61 + ? this.finishOp( + c.equality, + this.input.charCodeAt(this.pos + 2) === 61 ? 3 : 2 + ) + : n === 61 && o === 62 && this.options.ecmaVersion >= 6 + ? ((this.pos += 2), this.finishToken(c.arrow)) + : this.finishOp(n === 61 ? c.eq : c.prefix, 1); + }), + (Ae.readToken_question = function () { + var n = this.options.ecmaVersion; + if (n >= 11) { + var o = this.input.charCodeAt(this.pos + 1); + if (o === 46) { + var l = this.input.charCodeAt(this.pos + 2); + if (l < 48 || l > 57) return this.finishOp(c.questionDot, 2); + } + if (o === 63) { + if (n >= 12) { + var f = this.input.charCodeAt(this.pos + 2); + if (f === 61) return this.finishOp(c.assign, 3); + } + return this.finishOp(c.coalesce, 2); + } + } + return this.finishOp(c.question, 1); + }), + (Ae.readToken_numberSign = function () { + var n = this.options.ecmaVersion, + o = 35; + if ( + n >= 13 && + (++this.pos, (o = this.fullCharCodeAtPos()), h(o, !0) || o === 92) + ) + return this.finishToken(c.privateId, this.readWord1()); + this.raise(this.pos, "Unexpected character '" + nt(o) + "'"); + }), + (Ae.getTokenFromCode = function (n) { + switch (n) { + case 46: + return this.readToken_dot(); + case 40: + return ++this.pos, this.finishToken(c.parenL); + case 41: + return ++this.pos, this.finishToken(c.parenR); + case 59: + return ++this.pos, this.finishToken(c.semi); + case 44: + return ++this.pos, this.finishToken(c.comma); + case 91: + return ++this.pos, this.finishToken(c.bracketL); + case 93: + return ++this.pos, this.finishToken(c.bracketR); + case 123: + return ++this.pos, this.finishToken(c.braceL); + case 125: + return ++this.pos, this.finishToken(c.braceR); + case 58: + return ++this.pos, this.finishToken(c.colon); + case 96: + if (this.options.ecmaVersion < 6) break; + return ++this.pos, this.finishToken(c.backQuote); + case 48: + var o = this.input.charCodeAt(this.pos + 1); + if (o === 120 || o === 88) return this.readRadixNumber(16); + if (this.options.ecmaVersion >= 6) { + if (o === 111 || o === 79) return this.readRadixNumber(8); + if (o === 98 || o === 66) return this.readRadixNumber(2); + } + case 49: + case 50: + case 51: + case 52: + case 53: + case 54: + case 55: + case 56: + case 57: + return this.readNumber(!1); + case 34: + case 39: + return this.readString(n); + case 47: + return this.readToken_slash(); + case 37: + case 42: + return this.readToken_mult_modulo_exp(n); + case 124: + case 38: + return this.readToken_pipe_amp(n); + case 94: + return this.readToken_caret(); + case 43: + case 45: + return this.readToken_plus_min(n); + case 60: + case 62: + return this.readToken_lt_gt(n); + case 61: + case 33: + return this.readToken_eq_excl(n); + case 63: + return this.readToken_question(); + case 126: + return this.finishOp(c.prefix, 1); + case 35: + return this.readToken_numberSign(); + } + this.raise(this.pos, "Unexpected character '" + nt(n) + "'"); + }), + (Ae.finishOp = function (n, o) { + var l = this.input.slice(this.pos, this.pos + o); + return (this.pos += o), this.finishToken(n, l); + }), + (Ae.readRegexp = function () { + for (var n, o, l = this.pos; ; ) { + this.pos >= this.input.length && + this.raise(l, 'Unterminated regular expression'); + var f = this.input.charAt(this.pos); + if ( + (R.test(f) && this.raise(l, 'Unterminated regular expression'), n) + ) + n = !1; + else { + if (f === '[') o = !0; + else if (f === ']' && o) o = !1; + else if (f === '/' && !o) break; + n = f === '\\'; + } + ++this.pos; + } + var m = this.input.slice(l, this.pos); + ++this.pos; + var E = this.pos, + O = this.readWord1(); + this.containsEsc && this.unexpected(E); + var Y = this.regexpState || (this.regexpState = new on(this)); + Y.reset(l, m, O), + this.validateRegExpFlags(Y), + this.validateRegExpPattern(Y); + var Q = null; + try { + Q = new RegExp(m, O); + } catch {} + return this.finishToken(c.regexp, {pattern: m, flags: O, value: Q}); + }), + (Ae.readInt = function (n, o, l) { + for ( + var f = this.options.ecmaVersion >= 12 && o === void 0, + m = l && this.input.charCodeAt(this.pos) === 48, + E = this.pos, + O = 0, + Y = 0, + Q = 0, + Te = o ?? 1 / 0; + Q < Te; + ++Q, ++this.pos + ) { + var xe = this.input.charCodeAt(this.pos), + Ze = void 0; + if (f && xe === 95) { + m && + this.raiseRecoverable( + this.pos, + 'Numeric separator is not allowed in legacy octal numeric literals' + ), + Y === 95 && + this.raiseRecoverable( + this.pos, + 'Numeric separator must be exactly one underscore' + ), + Q === 0 && + this.raiseRecoverable( + this.pos, + 'Numeric separator is not allowed at the first of digits' + ), + (Y = xe); + continue; + } + if ( + (xe >= 97 + ? (Ze = xe - 97 + 10) + : xe >= 65 + ? (Ze = xe - 65 + 10) + : xe >= 48 && xe <= 57 + ? (Ze = xe - 48) + : (Ze = 1 / 0), + Ze >= n) + ) + break; + (Y = xe), (O = O * n + Ze); + } + return ( + f && + Y === 95 && + this.raiseRecoverable( + this.pos - 1, + 'Numeric separator is not allowed at the last of digits' + ), + this.pos === E || (o != null && this.pos - E !== o) ? null : O + ); + }); + function wf(n, o) { + return o ? parseInt(n, 8) : parseFloat(n.replace(/_/g, '')); + } + function Fc(n) { + return typeof BigInt != 'function' ? null : BigInt(n.replace(/_/g, '')); + } + (Ae.readRadixNumber = function (n) { + var o = this.pos; + this.pos += 2; + var l = this.readInt(n); + return ( + l == null && + this.raise(this.start + 2, 'Expected number in radix ' + n), + this.options.ecmaVersion >= 11 && + this.input.charCodeAt(this.pos) === 110 + ? ((l = Fc(this.input.slice(o, this.pos))), ++this.pos) + : h(this.fullCharCodeAtPos()) && + this.raise(this.pos, 'Identifier directly after number'), + this.finishToken(c.num, l) + ); + }), + (Ae.readNumber = function (n) { + var o = this.pos; + !n && + this.readInt(10, void 0, !0) === null && + this.raise(o, 'Invalid number'); + var l = this.pos - o >= 2 && this.input.charCodeAt(o) === 48; + l && this.strict && this.raise(o, 'Invalid number'); + var f = this.input.charCodeAt(this.pos); + if (!l && !n && this.options.ecmaVersion >= 11 && f === 110) { + var m = Fc(this.input.slice(o, this.pos)); + return ( + ++this.pos, + h(this.fullCharCodeAtPos()) && + this.raise(this.pos, 'Identifier directly after number'), + this.finishToken(c.num, m) + ); + } + l && /[89]/.test(this.input.slice(o, this.pos)) && (l = !1), + f === 46 && + !l && + (++this.pos, + this.readInt(10), + (f = this.input.charCodeAt(this.pos))), + (f === 69 || f === 101) && + !l && + ((f = this.input.charCodeAt(++this.pos)), + (f === 43 || f === 45) && ++this.pos, + this.readInt(10) === null && this.raise(o, 'Invalid number')), + h(this.fullCharCodeAtPos()) && + this.raise(this.pos, 'Identifier directly after number'); + var E = wf(this.input.slice(o, this.pos), l); + return this.finishToken(c.num, E); + }), + (Ae.readCodePoint = function () { + var n = this.input.charCodeAt(this.pos), + o; + if (n === 123) { + this.options.ecmaVersion < 6 && this.unexpected(); + var l = ++this.pos; + (o = this.readHexChar( + this.input.indexOf('}', this.pos) - this.pos + )), + ++this.pos, + o > 1114111 && + this.invalidStringToken(l, 'Code point out of bounds'); + } else o = this.readHexChar(4); + return o; + }), + (Ae.readString = function (n) { + for (var o = '', l = ++this.pos; ; ) { + this.pos >= this.input.length && + this.raise(this.start, 'Unterminated string constant'); + var f = this.input.charCodeAt(this.pos); + if (f === n) break; + f === 92 + ? ((o += this.input.slice(l, this.pos)), + (o += this.readEscapedChar(!1)), + (l = this.pos)) + : f === 8232 || f === 8233 + ? (this.options.ecmaVersion < 10 && + this.raise(this.start, 'Unterminated string constant'), + ++this.pos, + this.options.locations && + (this.curLine++, (this.lineStart = this.pos))) + : (X(f) && this.raise(this.start, 'Unterminated string constant'), + ++this.pos); + } + return ( + (o += this.input.slice(l, this.pos++)), + this.finishToken(c.string, o) + ); + }); + var Bc = {}; + (Ae.tryReadTemplateToken = function () { + this.inTemplateElement = !0; + try { + this.readTmplToken(); + } catch (n) { + if (n === Bc) this.readInvalidTemplateToken(); + else throw n; + } + this.inTemplateElement = !1; + }), + (Ae.invalidStringToken = function (n, o) { + if (this.inTemplateElement && this.options.ecmaVersion >= 9) throw Bc; + this.raise(n, o); + }), + (Ae.readTmplToken = function () { + for (var n = '', o = this.pos; ; ) { + this.pos >= this.input.length && + this.raise(this.start, 'Unterminated template'); + var l = this.input.charCodeAt(this.pos); + if ( + l === 96 || + (l === 36 && this.input.charCodeAt(this.pos + 1) === 123) + ) + return this.pos === this.start && + (this.type === c.template || this.type === c.invalidTemplate) + ? l === 36 + ? ((this.pos += 2), this.finishToken(c.dollarBraceL)) + : (++this.pos, this.finishToken(c.backQuote)) + : ((n += this.input.slice(o, this.pos)), + this.finishToken(c.template, n)); + if (l === 92) + (n += this.input.slice(o, this.pos)), + (n += this.readEscapedChar(!0)), + (o = this.pos); + else if (X(l)) { + switch (((n += this.input.slice(o, this.pos)), ++this.pos, l)) { + case 13: + this.input.charCodeAt(this.pos) === 10 && ++this.pos; + case 10: + n += ` +`; + break; + default: + n += String.fromCharCode(l); + break; + } + this.options.locations && + (++this.curLine, (this.lineStart = this.pos)), + (o = this.pos); + } else ++this.pos; + } + }), + (Ae.readInvalidTemplateToken = function () { + for (; this.pos < this.input.length; this.pos++) + switch (this.input[this.pos]) { + case '\\': + ++this.pos; + break; + case '$': + if (this.input[this.pos + 1] !== '{') break; + case '`': + return this.finishToken( + c.invalidTemplate, + this.input.slice(this.start, this.pos) + ); + case '\r': + this.input[this.pos + 1] === + ` +` && ++this.pos; + case ` +`: + case '\u2028': + case '\u2029': + ++this.curLine, (this.lineStart = this.pos + 1); + break; + } + this.raise(this.start, 'Unterminated template'); + }), + (Ae.readEscapedChar = function (n) { + var o = this.input.charCodeAt(++this.pos); + switch ((++this.pos, o)) { + case 110: + return ` +`; + case 114: + return '\r'; + case 120: + return String.fromCharCode(this.readHexChar(2)); + case 117: + return nt(this.readCodePoint()); + case 116: + return ' '; + case 98: + return '\b'; + case 118: + return '\v'; + case 102: + return '\f'; + case 13: + this.input.charCodeAt(this.pos) === 10 && ++this.pos; + case 10: + return ( + this.options.locations && + ((this.lineStart = this.pos), ++this.curLine), + '' + ); + case 56: + case 57: + if ( + (this.strict && + this.invalidStringToken( + this.pos - 1, + 'Invalid escape sequence' + ), + n) + ) { + var l = this.pos - 1; + this.invalidStringToken( + l, + 'Invalid escape sequence in template string' + ); + } + default: + if (o >= 48 && o <= 55) { + var f = this.input.substr(this.pos - 1, 3).match(/^[0-7]+/)[0], + m = parseInt(f, 8); + return ( + m > 255 && ((f = f.slice(0, -1)), (m = parseInt(f, 8))), + (this.pos += f.length - 1), + (o = this.input.charCodeAt(this.pos)), + (f !== '0' || o === 56 || o === 57) && + (this.strict || n) && + this.invalidStringToken( + this.pos - 1 - f.length, + n + ? 'Octal literal in template string' + : 'Octal literal in strict mode' + ), + String.fromCharCode(m) + ); + } + return X(o) + ? (this.options.locations && + ((this.lineStart = this.pos), ++this.curLine), + '') + : String.fromCharCode(o); + } + }), + (Ae.readHexChar = function (n) { + var o = this.pos, + l = this.readInt(16, n); + return ( + l === null && + this.invalidStringToken(o, 'Bad character escape sequence'), + l + ); + }), + (Ae.readWord1 = function () { + this.containsEsc = !1; + for ( + var n = '', o = !0, l = this.pos, f = this.options.ecmaVersion >= 6; + this.pos < this.input.length; + + ) { + var m = this.fullCharCodeAtPos(); + if (T(m, f)) this.pos += m <= 65535 ? 1 : 2; + else if (m === 92) { + (this.containsEsc = !0), (n += this.input.slice(l, this.pos)); + var E = this.pos; + this.input.charCodeAt(++this.pos) !== 117 && + this.invalidStringToken( + this.pos, + 'Expecting Unicode escape sequence \\uXXXX' + ), + ++this.pos; + var O = this.readCodePoint(); + (o ? h : T)(O, f) || + this.invalidStringToken(E, 'Invalid Unicode escape'), + (n += nt(O)), + (l = this.pos); + } else break; + o = !1; + } + return n + this.input.slice(l, this.pos); + }), + (Ae.readWord = function () { + var n = this.readWord1(), + o = c.name; + return this.keywords.test(n) && (o = U[n]), this.finishToken(o, n); + }); + var Vc = '8.15.0'; + Ge.acorn = { + Parser: Ge, + version: Vc, + defaultOptions: Pt, + Position: ct, + SourceLocation: wt, + getLineInfo: $t, + Node: Fn, + TokenType: x, + tokTypes: c, + keywordTypes: U, + TokContext: Rt, + tokContexts: Ue, + isIdentifierChar: T, + isIdentifierStart: h, + Token: xr, + isNewLine: X, + lineBreak: R, + lineBreakG: W, + nonASCIIwhitespace: pe, + }; + function Sf(n, o) { + return Ge.parse(n, o); + } + function If(n, o, l) { + return Ge.parseExpressionAt(n, o, l); + } + function Ef(n, o) { + return Ge.tokenizer(n, o); + } + (e.Node = Fn), + (e.Parser = Ge), + (e.Position = ct), + (e.SourceLocation = wt), + (e.TokContext = Rt), + (e.Token = xr), + (e.TokenType = x), + (e.defaultOptions = Pt), + (e.getLineInfo = $t), + (e.isIdentifierChar = T), + (e.isIdentifierStart = h), + (e.isNewLine = X), + (e.keywordTypes = U), + (e.lineBreak = R), + (e.lineBreakG = W), + (e.nonASCIIwhitespace = pe), + (e.parse = Sf), + (e.parseExpressionAt = If), + (e.tokContexts = Ue), + (e.tokTypes = c), + (e.tokenizer = Ef), + (e.version = Vc); + }); + }); + var df = Z((Bo, ff) => { + (function (e, t) { + typeof Bo == 'object' && typeof ff < 'u' + ? t(Bo, hf()) + : typeof define == 'function' && define.amd + ? define(['exports', 'acorn'], t) + : ((e = typeof globalThis < 'u' ? globalThis : e || self), + t(((e.acorn = e.acorn || {}), (e.acorn.loose = {})), e.acorn)); + })(Bo, function (e, t) { + 'use strict'; + var s = '\u2716'; + function i(p) { + return p.name === s; + } + function r() {} + var a = function (h, T) { + if ( + (T === void 0 && (T = {}), + (this.toks = this.constructor.BaseParser.tokenizer(h, T)), + (this.options = this.toks.options), + (this.input = this.toks.input), + (this.tok = this.last = {type: t.tokTypes.eof, start: 0, end: 0}), + (this.tok.validateRegExpFlags = r), + (this.tok.validateRegExpPattern = r), + this.options.locations) + ) { + var x = this.toks.curPosition(); + this.tok.loc = new t.SourceLocation(this.toks, x, x); + } + (this.ahead = []), + (this.context = []), + (this.curIndent = 0), + (this.curLineStart = 0), + (this.nextLineStart = this.lineEnd(this.curLineStart) + 1), + (this.inAsync = !1), + (this.inGenerator = !1), + (this.inFunction = !1); + }; + (a.prototype.startNode = function () { + return new t.Node( + this.toks, + this.tok.start, + this.options.locations ? this.tok.loc.start : null + ); + }), + (a.prototype.storeCurrentPos = function () { + return this.options.locations + ? [this.tok.start, this.tok.loc.start] + : this.tok.start; + }), + (a.prototype.startNodeAt = function (h) { + return this.options.locations + ? new t.Node(this.toks, h[0], h[1]) + : new t.Node(this.toks, h); + }), + (a.prototype.finishNode = function (h, T) { + return ( + (h.type = T), + (h.end = this.last.end), + this.options.locations && (h.loc.end = this.last.loc.end), + this.options.ranges && (h.range[1] = this.last.end), + h + ); + }), + (a.prototype.dummyNode = function (h) { + var T = this.startNode(); + return ( + (T.type = h), + (T.end = T.start), + this.options.locations && (T.loc.end = T.loc.start), + this.options.ranges && (T.range[1] = T.start), + (this.last = { + type: t.tokTypes.name, + start: T.start, + end: T.start, + loc: T.loc, + }), + T + ); + }), + (a.prototype.dummyIdent = function () { + var h = this.dummyNode('Identifier'); + return (h.name = s), h; + }), + (a.prototype.dummyString = function () { + var h = this.dummyNode('Literal'); + return (h.value = h.raw = s), h; + }), + (a.prototype.eat = function (h) { + return this.tok.type === h ? (this.next(), !0) : !1; + }), + (a.prototype.isContextual = function (h) { + return this.tok.type === t.tokTypes.name && this.tok.value === h; + }), + (a.prototype.eatContextual = function (h) { + return this.tok.value === h && this.eat(t.tokTypes.name); + }), + (a.prototype.canInsertSemicolon = function () { + return ( + this.tok.type === t.tokTypes.eof || + this.tok.type === t.tokTypes.braceR || + t.lineBreak.test(this.input.slice(this.last.end, this.tok.start)) + ); + }), + (a.prototype.semicolon = function () { + return this.eat(t.tokTypes.semi); + }), + (a.prototype.expect = function (h) { + if (this.eat(h)) return !0; + for (var T = 1; T <= 2; T++) + if (this.lookAhead(T).type === h) { + for (var x = 0; x < T; x++) this.next(); + return !0; + } + }), + (a.prototype.pushCx = function () { + this.context.push(this.curIndent); + }), + (a.prototype.popCx = function () { + this.curIndent = this.context.pop(); + }), + (a.prototype.lineEnd = function (h) { + for ( + ; + h < this.input.length && !t.isNewLine(this.input.charCodeAt(h)); + + ) + ++h; + return h; + }), + (a.prototype.indentationAfter = function (h) { + for (var T = 0; ; ++h) { + var x = this.input.charCodeAt(h); + if (x === 32) ++T; + else if (x === 9) T += this.options.tabSize; + else return T; + } + }), + (a.prototype.closes = function (h, T, x, w) { + return this.tok.type === h || this.tok.type === t.tokTypes.eof + ? !0 + : x !== this.curLineStart && + this.curIndent < T && + this.tokenStartsLine() && + (!w || + this.nextLineStart >= this.input.length || + this.indentationAfter(this.nextLineStart) < T); + }), + (a.prototype.tokenStartsLine = function () { + for (var h = this.tok.start - 1; h >= this.curLineStart; --h) { + var T = this.input.charCodeAt(h); + if (T !== 9 && T !== 32) return !1; + } + return !0; + }), + (a.prototype.extend = function (h, T) { + this[h] = T(this[h]); + }), + (a.prototype.parse = function () { + return this.next(), this.parseTopLevel(); + }), + (a.extend = function () { + for (var h = [], T = arguments.length; T--; ) h[T] = arguments[T]; + for (var x = this, w = 0; w < h.length; w++) x = h[w](x); + return x; + }), + (a.parse = function (h, T) { + return new this(h, T).parse(); + }), + (a.BaseParser = t.Parser); + var u = a.prototype; + function d(p) { + return (p < 14 && p > 8) || p === 32 || p === 160 || t.isNewLine(p); + } + (u.next = function () { + if ( + ((this.last = this.tok), + this.ahead.length + ? (this.tok = this.ahead.shift()) + : (this.tok = this.readToken()), + this.tok.start >= this.nextLineStart) + ) { + for (; this.tok.start >= this.nextLineStart; ) + (this.curLineStart = this.nextLineStart), + (this.nextLineStart = this.lineEnd(this.curLineStart) + 1); + this.curIndent = this.indentationAfter(this.curLineStart); + } + }), + (u.readToken = function () { + for (;;) + try { + return ( + this.toks.next(), + this.toks.type === t.tokTypes.dot && + this.input.substr(this.toks.end, 1) === '.' && + this.options.ecmaVersion >= 6 && + (this.toks.end++, (this.toks.type = t.tokTypes.ellipsis)), + new t.Token(this.toks) + ); + } catch (S) { + if (!(S instanceof SyntaxError)) throw S; + var p = S.message, + h = S.raisedAt, + T = !0; + if (/unterminated/i.test(p)) + if (((h = this.lineEnd(S.pos + 1)), /string/.test(p))) + T = { + start: S.pos, + end: h, + type: t.tokTypes.string, + value: this.input.slice(S.pos + 1, h), + }; + else if (/regular expr/i.test(p)) { + var x = this.input.slice(S.pos, h); + try { + x = new RegExp(x); + } catch {} + T = {start: S.pos, end: h, type: t.tokTypes.regexp, value: x}; + } else + /template/.test(p) + ? (T = { + start: S.pos, + end: h, + type: t.tokTypes.template, + value: this.input.slice(S.pos, h), + }) + : (T = !1); + else if ( + /invalid (unicode|regexp|number)|expecting unicode|octal literal|is reserved|directly after number|expected number in radix|numeric separator/i.test( + p + ) + ) + for (; h < this.input.length && !d(this.input.charCodeAt(h)); ) + ++h; + else if (/character escape|expected hexadecimal/i.test(p)) + for (; h < this.input.length; ) { + var w = this.input.charCodeAt(h++); + if (w === 34 || w === 39 || t.isNewLine(w)) break; + } + else if (/unexpected character/i.test(p)) h++, (T = !1); + else if (/regular expression/i.test(p)) T = !0; + else throw S; + if ( + (this.resetTo(h), + T === !0 && + (T = {start: h, end: h, type: t.tokTypes.name, value: s}), + T) + ) + return ( + this.options.locations && + (T.loc = new t.SourceLocation( + this.toks, + t.getLineInfo(this.input, T.start), + t.getLineInfo(this.input, T.end) + )), + T + ); + } + }), + (u.resetTo = function (p) { + (this.toks.pos = p), (this.toks.containsEsc = !1); + var h = this.input.charAt(p - 1); + if ( + ((this.toks.exprAllowed = + !h || + /[[{(,;:?/*=+\-~!|&%^<>]/.test(h) || + (/[enwfd]/.test(h) && + /\b(case|else|return|throw|new|in|(instance|type)?of|delete|void)$/.test( + this.input.slice(p - 10, p) + ))), + this.options.locations) + ) { + (this.toks.curLine = 1), + (this.toks.lineStart = t.lineBreakG.lastIndex = 0); + for (var T; (T = t.lineBreakG.exec(this.input)) && T.index < p; ) + ++this.toks.curLine, + (this.toks.lineStart = T.index + T[0].length); + } + }), + (u.lookAhead = function (p) { + for (; p > this.ahead.length; ) this.ahead.push(this.readToken()); + return this.ahead[p - 1]; + }); + var y = a.prototype; + (y.parseTopLevel = function () { + var p = this.startNodeAt( + this.options.locations ? [0, t.getLineInfo(this.input, 0)] : 0 + ); + for (p.body = []; this.tok.type !== t.tokTypes.eof; ) + p.body.push(this.parseStatement()); + return ( + this.toks.adaptDirectivePrologue(p.body), + (this.last = this.tok), + (p.sourceType = + this.options.sourceType === 'commonjs' + ? 'script' + : this.options.sourceType), + this.finishNode(p, 'Program') + ); + }), + (y.parseStatement = function () { + var p = this.tok.type, + h = this.startNode(), + T; + switch ( + (this.toks.isLet() && ((p = t.tokTypes._var), (T = 'let')), p) + ) { + case t.tokTypes._break: + case t.tokTypes._continue: + this.next(); + var x = p === t.tokTypes._break; + return ( + this.semicolon() || this.canInsertSemicolon() + ? (h.label = null) + : ((h.label = + this.tok.type === t.tokTypes.name + ? this.parseIdent() + : null), + this.semicolon()), + this.finishNode(h, x ? 'BreakStatement' : 'ContinueStatement') + ); + case t.tokTypes._debugger: + return ( + this.next(), + this.semicolon(), + this.finishNode(h, 'DebuggerStatement') + ); + case t.tokTypes._do: + return ( + this.next(), + (h.body = this.parseStatement()), + (h.test = this.eat(t.tokTypes._while) + ? this.parseParenExpression() + : this.dummyIdent()), + this.semicolon(), + this.finishNode(h, 'DoWhileStatement') + ); + case t.tokTypes._for: + this.next(); + var w = + this.options.ecmaVersion >= 9 && this.eatContextual('await'); + if ( + (this.pushCx(), + this.expect(t.tokTypes.parenL), + this.tok.type === t.tokTypes.semi) + ) + return this.parseFor(h, null); + var S = this.toks.isLet(), + A = this.toks.isAwaitUsing(!0), + U = !A && this.toks.isUsing(!0); + if ( + S || + this.tok.type === t.tokTypes._var || + this.tok.type === t.tokTypes._const || + U || + A + ) { + var M = S + ? 'let' + : U + ? 'using' + : A + ? 'await using' + : this.tok.value, + c = this.startNode(); + return ( + U || A + ? (A && this.next(), this.parseVar(c, !0, M)) + : (c = this.parseVar(c, !0, M)), + c.declarations.length === 1 && + (this.tok.type === t.tokTypes._in || this.isContextual('of')) + ? (this.options.ecmaVersion >= 9 && + this.tok.type !== t.tokTypes._in && + (h.await = w), + this.parseForIn(h, c)) + : this.parseFor(h, c) + ); + } + var R = this.parseExpression(!0); + return this.tok.type === t.tokTypes._in || this.isContextual('of') + ? (this.options.ecmaVersion >= 9 && + this.tok.type !== t.tokTypes._in && + (h.await = w), + this.parseForIn(h, this.toAssignable(R))) + : this.parseFor(h, R); + case t.tokTypes._function: + return this.next(), this.parseFunction(h, !0); + case t.tokTypes._if: + return ( + this.next(), + (h.test = this.parseParenExpression()), + (h.consequent = this.parseStatement()), + (h.alternate = this.eat(t.tokTypes._else) + ? this.parseStatement() + : null), + this.finishNode(h, 'IfStatement') + ); + case t.tokTypes._return: + return ( + this.next(), + this.eat(t.tokTypes.semi) || this.canInsertSemicolon() + ? (h.argument = null) + : ((h.argument = this.parseExpression()), this.semicolon()), + this.finishNode(h, 'ReturnStatement') + ); + case t.tokTypes._switch: + var W = this.curIndent, + X = this.curLineStart; + this.next(), + (h.discriminant = this.parseParenExpression()), + (h.cases = []), + this.pushCx(), + this.expect(t.tokTypes.braceL); + for (var ie; !this.closes(t.tokTypes.braceR, W, X, !0); ) + if ( + this.tok.type === t.tokTypes._case || + this.tok.type === t.tokTypes._default + ) { + var pe = this.tok.type === t.tokTypes._case; + ie && this.finishNode(ie, 'SwitchCase'), + h.cases.push((ie = this.startNode())), + (ie.consequent = []), + this.next(), + pe ? (ie.test = this.parseExpression()) : (ie.test = null), + this.expect(t.tokTypes.colon); + } else + ie || + (h.cases.push((ie = this.startNode())), + (ie.consequent = []), + (ie.test = null)), + ie.consequent.push(this.parseStatement()); + return ( + ie && this.finishNode(ie, 'SwitchCase'), + this.popCx(), + this.eat(t.tokTypes.braceR), + this.finishNode(h, 'SwitchStatement') + ); + case t.tokTypes._throw: + return ( + this.next(), + (h.argument = this.parseExpression()), + this.semicolon(), + this.finishNode(h, 'ThrowStatement') + ); + case t.tokTypes._try: + if ( + (this.next(), + (h.block = this.parseBlock()), + (h.handler = null), + this.tok.type === t.tokTypes._catch) + ) { + var ae = this.startNode(); + this.next(), + this.eat(t.tokTypes.parenL) + ? ((ae.param = this.toAssignable(this.parseExprAtom(), !0)), + this.expect(t.tokTypes.parenR)) + : (ae.param = null), + (ae.body = this.parseBlock()), + (h.handler = this.finishNode(ae, 'CatchClause')); + } + return ( + (h.finalizer = this.eat(t.tokTypes._finally) + ? this.parseBlock() + : null), + !h.handler && !h.finalizer + ? h.block + : this.finishNode(h, 'TryStatement') + ); + case t.tokTypes._var: + case t.tokTypes._const: + return this.parseVar(h, !1, T || this.tok.value); + case t.tokTypes._while: + return ( + this.next(), + (h.test = this.parseParenExpression()), + (h.body = this.parseStatement()), + this.finishNode(h, 'WhileStatement') + ); + case t.tokTypes._with: + return ( + this.next(), + (h.object = this.parseParenExpression()), + (h.body = this.parseStatement()), + this.finishNode(h, 'WithStatement') + ); + case t.tokTypes.braceL: + return this.parseBlock(); + case t.tokTypes.semi: + return this.next(), this.finishNode(h, 'EmptyStatement'); + case t.tokTypes._class: + return this.parseClass(!0); + case t.tokTypes._import: + if (this.options.ecmaVersion > 10) { + var He = this.lookAhead(1).type; + if (He === t.tokTypes.parenL || He === t.tokTypes.dot) + return ( + (h.expression = this.parseExpression()), + this.semicolon(), + this.finishNode(h, 'ExpressionStatement') + ); + } + return this.parseImport(); + case t.tokTypes._export: + return this.parseExport(); + default: + if (this.toks.isAsyncFunction()) + return this.next(), this.next(), this.parseFunction(h, !0, !0); + if (this.toks.isUsing(!1)) return this.parseVar(h, !1, 'using'); + if (this.toks.isAwaitUsing(!1)) + return this.next(), this.parseVar(h, !1, 'await using'); + var qe = this.parseExpression(); + return i(qe) + ? (this.next(), + this.tok.type === t.tokTypes.eof + ? this.finishNode(h, 'EmptyStatement') + : this.parseStatement()) + : p === t.tokTypes.name && + qe.type === 'Identifier' && + this.eat(t.tokTypes.colon) + ? ((h.body = this.parseStatement()), + (h.label = qe), + this.finishNode(h, 'LabeledStatement')) + : ((h.expression = qe), + this.semicolon(), + this.finishNode(h, 'ExpressionStatement')); + } + }), + (y.parseBlock = function () { + var p = this.startNode(); + this.pushCx(), this.expect(t.tokTypes.braceL); + var h = this.curIndent, + T = this.curLineStart; + for (p.body = []; !this.closes(t.tokTypes.braceR, h, T, !0); ) + p.body.push(this.parseStatement()); + return ( + this.popCx(), + this.eat(t.tokTypes.braceR), + this.finishNode(p, 'BlockStatement') + ); + }), + (y.parseFor = function (p, h) { + return ( + (p.init = h), + (p.test = p.update = null), + this.eat(t.tokTypes.semi) && + this.tok.type !== t.tokTypes.semi && + (p.test = this.parseExpression()), + this.eat(t.tokTypes.semi) && + this.tok.type !== t.tokTypes.parenR && + (p.update = this.parseExpression()), + this.popCx(), + this.expect(t.tokTypes.parenR), + (p.body = this.parseStatement()), + this.finishNode(p, 'ForStatement') + ); + }), + (y.parseForIn = function (p, h) { + var T = + this.tok.type === t.tokTypes._in + ? 'ForInStatement' + : 'ForOfStatement'; + return ( + this.next(), + (p.left = h), + (p.right = this.parseExpression()), + this.popCx(), + this.expect(t.tokTypes.parenR), + (p.body = this.parseStatement()), + this.finishNode(p, T) + ); + }), + (y.parseVar = function (p, h, T) { + (p.kind = T), this.next(), (p.declarations = []); + do { + var x = this.startNode(); + (x.id = + this.options.ecmaVersion >= 6 + ? this.toAssignable(this.parseExprAtom(), !0) + : this.parseIdent()), + (x.init = this.eat(t.tokTypes.eq) + ? this.parseMaybeAssign(h) + : null), + p.declarations.push(this.finishNode(x, 'VariableDeclarator')); + } while (this.eat(t.tokTypes.comma)); + if (!p.declarations.length) { + var w = this.startNode(); + (w.id = this.dummyIdent()), + p.declarations.push(this.finishNode(w, 'VariableDeclarator')); + } + return ( + h || this.semicolon(), this.finishNode(p, 'VariableDeclaration') + ); + }), + (y.parseClass = function (p) { + var h = this.startNode(); + this.next(), + this.tok.type === t.tokTypes.name + ? (h.id = this.parseIdent()) + : p === !0 + ? (h.id = this.dummyIdent()) + : (h.id = null), + (h.superClass = this.eat(t.tokTypes._extends) + ? this.parseExpression() + : null), + (h.body = this.startNode()), + (h.body.body = []), + this.pushCx(); + var T = this.curIndent + 1, + x = this.curLineStart; + for ( + this.eat(t.tokTypes.braceL), + this.curIndent + 1 < T && + ((T = this.curIndent), (x = this.curLineStart)); + !this.closes(t.tokTypes.braceR, T, x); + + ) { + var w = this.parseClassElement(); + w && h.body.body.push(w); + } + return ( + this.popCx(), + this.eat(t.tokTypes.braceR) || + ((this.last.end = this.tok.start), + this.options.locations && + (this.last.loc.end = this.tok.loc.start)), + this.semicolon(), + this.finishNode(h.body, 'ClassBody'), + this.finishNode(h, p ? 'ClassDeclaration' : 'ClassExpression') + ); + }), + (y.parseClassElement = function () { + if (this.eat(t.tokTypes.semi)) return null; + var p = this.options, + h = p.ecmaVersion, + T = p.locations, + x = this.curIndent, + w = this.curLineStart, + S = this.startNode(), + A = '', + U = !1, + M = !1, + c = 'method', + R = !1; + if (this.eatContextual('static')) { + if (h >= 13 && this.eat(t.tokTypes.braceL)) + return this.parseClassStaticBlock(S), S; + this.isClassElementNameStart() || this.toks.type === t.tokTypes.star + ? (R = !0) + : (A = 'static'); + } + if ( + ((S.static = R), + !A && + h >= 8 && + this.eatContextual('async') && + ((this.isClassElementNameStart() || + this.toks.type === t.tokTypes.star) && + !this.canInsertSemicolon() + ? (M = !0) + : (A = 'async')), + !A) + ) { + U = this.eat(t.tokTypes.star); + var W = this.toks.value; + (this.eatContextual('get') || this.eatContextual('set')) && + (this.isClassElementNameStart() ? (c = W) : (A = W)); + } + if (A) + (S.computed = !1), + (S.key = this.startNodeAt( + T + ? [this.toks.lastTokStart, this.toks.lastTokStartLoc] + : this.toks.lastTokStart + )), + (S.key.name = A), + this.finishNode(S.key, 'Identifier'); + else if ((this.parseClassElementName(S), i(S.key))) + return ( + i(this.parseMaybeAssign()) && this.next(), + this.eat(t.tokTypes.comma), + null + ); + if ( + h < 13 || + this.toks.type === t.tokTypes.parenL || + c !== 'method' || + U || + M + ) { + var X = + !S.computed && + !S.static && + !U && + !M && + c === 'method' && + ((S.key.type === 'Identifier' && S.key.name === 'constructor') || + (S.key.type === 'Literal' && S.key.value === 'constructor')); + (S.kind = X ? 'constructor' : c), + (S.value = this.parseMethod(U, M)), + this.finishNode(S, 'MethodDefinition'); + } else { + if (this.eat(t.tokTypes.eq)) + if ( + this.curLineStart !== w && + this.curIndent <= x && + this.tokenStartsLine() + ) + S.value = null; + else { + var ie = this.inAsync, + pe = this.inGenerator; + (this.inAsync = !1), + (this.inGenerator = !1), + (S.value = this.parseMaybeAssign()), + (this.inAsync = ie), + (this.inGenerator = pe); + } + else S.value = null; + this.semicolon(), this.finishNode(S, 'PropertyDefinition'); + } + return S; + }), + (y.parseClassStaticBlock = function (p) { + var h = this.curIndent, + T = this.curLineStart; + for ( + p.body = [], this.pushCx(); + !this.closes(t.tokTypes.braceR, h, T, !0); + + ) + p.body.push(this.parseStatement()); + return ( + this.popCx(), + this.eat(t.tokTypes.braceR), + this.finishNode(p, 'StaticBlock') + ); + }), + (y.isClassElementNameStart = function () { + return this.toks.isClassElementNameStart(); + }), + (y.parseClassElementName = function (p) { + this.toks.type === t.tokTypes.privateId + ? ((p.computed = !1), (p.key = this.parsePrivateIdent())) + : this.parsePropertyName(p); + }), + (y.parseFunction = function (p, h, T) { + var x = this.inAsync, + w = this.inGenerator, + S = this.inFunction; + return ( + this.initFunction(p), + this.options.ecmaVersion >= 6 && + (p.generator = this.eat(t.tokTypes.star)), + this.options.ecmaVersion >= 8 && (p.async = !!T), + this.tok.type === t.tokTypes.name + ? (p.id = this.parseIdent()) + : h === !0 && (p.id = this.dummyIdent()), + (this.inAsync = p.async), + (this.inGenerator = p.generator), + (this.inFunction = !0), + (p.params = this.parseFunctionParams()), + (p.body = this.parseBlock()), + this.toks.adaptDirectivePrologue(p.body.body), + (this.inAsync = x), + (this.inGenerator = w), + (this.inFunction = S), + this.finishNode(p, h ? 'FunctionDeclaration' : 'FunctionExpression') + ); + }), + (y.parseExport = function () { + var p = this.startNode(); + if ((this.next(), this.eat(t.tokTypes.star))) + return ( + this.options.ecmaVersion >= 11 && + (this.eatContextual('as') + ? (p.exported = this.parseExprAtom()) + : (p.exported = null)), + (p.source = this.eatContextual('from') + ? this.parseExprAtom() + : this.dummyString()), + this.options.ecmaVersion >= 16 && + (p.attributes = this.parseWithClause()), + this.semicolon(), + this.finishNode(p, 'ExportAllDeclaration') + ); + if (this.eat(t.tokTypes._default)) { + var h; + if ( + this.tok.type === t.tokTypes._function || + (h = this.toks.isAsyncFunction()) + ) { + var T = this.startNode(); + this.next(), + h && this.next(), + (p.declaration = this.parseFunction(T, 'nullableID', h)); + } else + this.tok.type === t.tokTypes._class + ? (p.declaration = this.parseClass('nullableID')) + : ((p.declaration = this.parseMaybeAssign()), this.semicolon()); + return this.finishNode(p, 'ExportDefaultDeclaration'); + } + return ( + this.tok.type.keyword || + this.toks.isLet() || + this.toks.isAsyncFunction() + ? ((p.declaration = this.parseStatement()), + (p.specifiers = []), + (p.source = null)) + : ((p.declaration = null), + (p.specifiers = this.parseExportSpecifierList()), + (p.source = this.eatContextual('from') + ? this.parseExprAtom() + : null), + this.options.ecmaVersion >= 16 && + (p.attributes = this.parseWithClause()), + this.semicolon()), + this.finishNode(p, 'ExportNamedDeclaration') + ); + }), + (y.parseImport = function () { + var p = this.startNode(); + if ((this.next(), this.tok.type === t.tokTypes.string)) + (p.specifiers = []), (p.source = this.parseExprAtom()); + else { + var h; + this.tok.type === t.tokTypes.name && + this.tok.value !== 'from' && + ((h = this.startNode()), + (h.local = this.parseIdent()), + this.finishNode(h, 'ImportDefaultSpecifier'), + this.eat(t.tokTypes.comma)), + (p.specifiers = this.parseImportSpecifiers()), + (p.source = + this.eatContextual('from') && + this.tok.type === t.tokTypes.string + ? this.parseExprAtom() + : this.dummyString()), + h && p.specifiers.unshift(h); + } + return ( + this.options.ecmaVersion >= 16 && + (p.attributes = this.parseWithClause()), + this.semicolon(), + this.finishNode(p, 'ImportDeclaration') + ); + }), + (y.parseImportSpecifiers = function () { + var p = []; + if (this.tok.type === t.tokTypes.star) { + var h = this.startNode(); + this.next(), + (h.local = this.eatContextual('as') + ? this.parseIdent() + : this.dummyIdent()), + p.push(this.finishNode(h, 'ImportNamespaceSpecifier')); + } else { + var T = this.curIndent, + x = this.curLineStart, + w = this.nextLineStart; + for ( + this.pushCx(), + this.eat(t.tokTypes.braceL), + this.curLineStart > w && (w = this.curLineStart); + !this.closes( + t.tokTypes.braceR, + T + (this.curLineStart <= w ? 1 : 0), + x + ); + + ) { + var S = this.startNode(); + if (this.eat(t.tokTypes.star)) + (S.local = this.eatContextual('as') + ? this.parseModuleExportName() + : this.dummyIdent()), + this.finishNode(S, 'ImportNamespaceSpecifier'); + else { + if ( + this.isContextual('from') || + ((S.imported = this.parseModuleExportName()), i(S.imported)) + ) + break; + (S.local = this.eatContextual('as') + ? this.parseModuleExportName() + : S.imported), + this.finishNode(S, 'ImportSpecifier'); + } + p.push(S), this.eat(t.tokTypes.comma); + } + this.eat(t.tokTypes.braceR), this.popCx(); + } + return p; + }), + (y.parseWithClause = function () { + var p = []; + if (!this.eat(t.tokTypes._with)) return p; + var h = this.curIndent, + T = this.curLineStart, + x = this.nextLineStart; + for ( + this.pushCx(), + this.eat(t.tokTypes.braceL), + this.curLineStart > x && (x = this.curLineStart); + !this.closes( + t.tokTypes.braceR, + h + (this.curLineStart <= x ? 1 : 0), + T + ); + + ) { + var w = this.startNode(); + if ( + ((w.key = + this.tok.type === t.tokTypes.string + ? this.parseExprAtom() + : this.parseIdent()), + this.eat(t.tokTypes.colon)) + ) + this.tok.type === t.tokTypes.string + ? (w.value = this.parseExprAtom()) + : (w.value = this.dummyString()); + else { + if (i(w.key)) break; + if (this.tok.type === t.tokTypes.string) + w.value = this.parseExprAtom(); + else break; + } + p.push(this.finishNode(w, 'ImportAttribute')), + this.eat(t.tokTypes.comma); + } + return this.eat(t.tokTypes.braceR), this.popCx(), p; + }), + (y.parseExportSpecifierList = function () { + var p = [], + h = this.curIndent, + T = this.curLineStart, + x = this.nextLineStart; + for ( + this.pushCx(), + this.eat(t.tokTypes.braceL), + this.curLineStart > x && (x = this.curLineStart); + !this.closes( + t.tokTypes.braceR, + h + (this.curLineStart <= x ? 1 : 0), + T + ) && !this.isContextual('from'); + + ) { + var w = this.startNode(); + if (((w.local = this.parseModuleExportName()), i(w.local))) break; + (w.exported = this.eatContextual('as') + ? this.parseModuleExportName() + : w.local), + this.finishNode(w, 'ExportSpecifier'), + p.push(w), + this.eat(t.tokTypes.comma); + } + return this.eat(t.tokTypes.braceR), this.popCx(), p; + }), + (y.parseModuleExportName = function () { + return this.options.ecmaVersion >= 13 && + this.tok.type === t.tokTypes.string + ? this.parseExprAtom() + : this.parseIdent(); + }); + var g = a.prototype; + (g.checkLVal = function (p) { + if (!p) return p; + switch (p.type) { + case 'Identifier': + case 'MemberExpression': + return p; + case 'ParenthesizedExpression': + return (p.expression = this.checkLVal(p.expression)), p; + default: + return this.dummyIdent(); + } + }), + (g.parseExpression = function (p) { + var h = this.storeCurrentPos(), + T = this.parseMaybeAssign(p); + if (this.tok.type === t.tokTypes.comma) { + var x = this.startNodeAt(h); + for (x.expressions = [T]; this.eat(t.tokTypes.comma); ) + x.expressions.push(this.parseMaybeAssign(p)); + return this.finishNode(x, 'SequenceExpression'); + } + return T; + }), + (g.parseParenExpression = function () { + this.pushCx(), this.expect(t.tokTypes.parenL); + var p = this.parseExpression(); + return this.popCx(), this.expect(t.tokTypes.parenR), p; + }), + (g.parseMaybeAssign = function (p) { + if (this.inGenerator && this.toks.isContextual('yield')) { + var h = this.startNode(); + return ( + this.next(), + this.semicolon() || + this.canInsertSemicolon() || + (this.tok.type !== t.tokTypes.star && !this.tok.type.startsExpr) + ? ((h.delegate = !1), (h.argument = null)) + : ((h.delegate = this.eat(t.tokTypes.star)), + (h.argument = this.parseMaybeAssign())), + this.finishNode(h, 'YieldExpression') + ); + } + var T = this.storeCurrentPos(), + x = this.parseMaybeConditional(p); + if (this.tok.type.isAssign) { + var w = this.startNodeAt(T); + return ( + (w.operator = this.tok.value), + (w.left = + this.tok.type === t.tokTypes.eq + ? this.toAssignable(x) + : this.checkLVal(x)), + this.next(), + (w.right = this.parseMaybeAssign(p)), + this.finishNode(w, 'AssignmentExpression') + ); + } + return x; + }), + (g.parseMaybeConditional = function (p) { + var h = this.storeCurrentPos(), + T = this.parseExprOps(p); + if (this.eat(t.tokTypes.question)) { + var x = this.startNodeAt(h); + return ( + (x.test = T), + (x.consequent = this.parseMaybeAssign()), + (x.alternate = this.expect(t.tokTypes.colon) + ? this.parseMaybeAssign(p) + : this.dummyIdent()), + this.finishNode(x, 'ConditionalExpression') + ); + } + return T; + }), + (g.parseExprOps = function (p) { + var h = this.storeCurrentPos(), + T = this.curIndent, + x = this.curLineStart; + return this.parseExprOp(this.parseMaybeUnary(!1), h, -1, p, T, x); + }), + (g.parseExprOp = function (p, h, T, x, w, S) { + if ( + this.curLineStart !== S && + this.curIndent < w && + this.tokenStartsLine() + ) + return p; + var A = this.tok.type.binop; + if (A != null && (!x || this.tok.type !== t.tokTypes._in) && A > T) { + var U = this.startNodeAt(h); + if ( + ((U.left = p), + (U.operator = this.tok.value), + this.next(), + this.curLineStart !== S && + this.curIndent < w && + this.tokenStartsLine()) + ) + U.right = this.dummyIdent(); + else { + var M = this.storeCurrentPos(); + U.right = this.parseExprOp( + this.parseMaybeUnary(!1), + M, + A, + x, + w, + S + ); + } + return ( + this.finishNode( + U, + /&&|\|\||\?\?/.test(U.operator) + ? 'LogicalExpression' + : 'BinaryExpression' + ), + this.parseExprOp(U, h, T, x, w, S) + ); + } + return p; + }), + (g.parseMaybeUnary = function (p) { + var h = this.storeCurrentPos(), + T; + if ( + this.options.ecmaVersion >= 8 && + this.toks.isContextual('await') && + (this.inAsync || + (this.toks.inModule && this.options.ecmaVersion >= 13) || + (!this.inFunction && this.options.allowAwaitOutsideFunction)) + ) + (T = this.parseAwait()), (p = !0); + else if (this.tok.type.prefix) { + var x = this.startNode(), + w = this.tok.type === t.tokTypes.incDec; + w || (p = !0), + (x.operator = this.tok.value), + (x.prefix = !0), + this.next(), + (x.argument = this.parseMaybeUnary(!0)), + w && (x.argument = this.checkLVal(x.argument)), + (T = this.finishNode( + x, + w ? 'UpdateExpression' : 'UnaryExpression' + )); + } else if (this.tok.type === t.tokTypes.ellipsis) { + var S = this.startNode(); + this.next(), + (S.argument = this.parseMaybeUnary(p)), + (T = this.finishNode(S, 'SpreadElement')); + } else if (!p && this.tok.type === t.tokTypes.privateId) + T = this.parsePrivateIdent(); + else + for ( + T = this.parseExprSubscripts(); + this.tok.type.postfix && !this.canInsertSemicolon(); + + ) { + var A = this.startNodeAt(h); + (A.operator = this.tok.value), + (A.prefix = !1), + (A.argument = this.checkLVal(T)), + this.next(), + (T = this.finishNode(A, 'UpdateExpression')); + } + if (!p && this.eat(t.tokTypes.starstar)) { + var U = this.startNodeAt(h); + return ( + (U.operator = '**'), + (U.left = T), + (U.right = this.parseMaybeUnary(!1)), + this.finishNode(U, 'BinaryExpression') + ); + } + return T; + }), + (g.parseExprSubscripts = function () { + var p = this.storeCurrentPos(); + return this.parseSubscripts( + this.parseExprAtom(), + p, + !1, + this.curIndent, + this.curLineStart + ); + }), + (g.parseSubscripts = function (p, h, T, x, w) { + for (var S = this.options.ecmaVersion >= 11, A = !1; ; ) { + if ( + this.curLineStart !== w && + this.curIndent <= x && + this.tokenStartsLine() + ) + if (this.tok.type === t.tokTypes.dot && this.curIndent === x) --x; + else break; + var U = + p.type === 'Identifier' && + p.name === 'async' && + !this.canInsertSemicolon(), + M = S && this.eat(t.tokTypes.questionDot); + if ( + (M && (A = !0), + (M && + this.tok.type !== t.tokTypes.parenL && + this.tok.type !== t.tokTypes.bracketL && + this.tok.type !== t.tokTypes.backQuote) || + this.eat(t.tokTypes.dot)) + ) { + var c = this.startNodeAt(h); + (c.object = p), + this.curLineStart !== w && + this.curIndent <= x && + this.tokenStartsLine() + ? (c.property = this.dummyIdent()) + : (c.property = + this.parsePropertyAccessor() || this.dummyIdent()), + (c.computed = !1), + S && (c.optional = M), + (p = this.finishNode(c, 'MemberExpression')); + } else if (this.tok.type === t.tokTypes.bracketL) { + this.pushCx(), this.next(); + var R = this.startNodeAt(h); + (R.object = p), + (R.property = this.parseExpression()), + (R.computed = !0), + S && (R.optional = M), + this.popCx(), + this.expect(t.tokTypes.bracketR), + (p = this.finishNode(R, 'MemberExpression')); + } else if (!T && this.tok.type === t.tokTypes.parenL) { + var W = this.parseExprList(t.tokTypes.parenR); + if (U && this.eat(t.tokTypes.arrow)) + return this.parseArrowExpression(this.startNodeAt(h), W, !0); + var X = this.startNodeAt(h); + (X.callee = p), + (X.arguments = W), + S && (X.optional = M), + (p = this.finishNode(X, 'CallExpression')); + } else if (this.tok.type === t.tokTypes.backQuote) { + var ie = this.startNodeAt(h); + (ie.tag = p), + (ie.quasi = this.parseTemplate()), + (p = this.finishNode(ie, 'TaggedTemplateExpression')); + } else break; + } + if (A) { + var pe = this.startNodeAt(h); + (pe.expression = p), (p = this.finishNode(pe, 'ChainExpression')); + } + return p; + }), + (g.parseExprAtom = function () { + var p; + switch (this.tok.type) { + case t.tokTypes._this: + case t.tokTypes._super: + var h = + this.tok.type === t.tokTypes._this ? 'ThisExpression' : 'Super'; + return (p = this.startNode()), this.next(), this.finishNode(p, h); + case t.tokTypes.name: + var T = this.storeCurrentPos(), + x = this.parseIdent(), + w = !1; + if (x.name === 'async' && !this.canInsertSemicolon()) { + if (this.eat(t.tokTypes._function)) + return ( + this.toks.overrideContext(t.tokContexts.f_expr), + this.parseFunction(this.startNodeAt(T), !1, !0) + ); + this.tok.type === t.tokTypes.name && + ((x = this.parseIdent()), (w = !0)); + } + return this.eat(t.tokTypes.arrow) + ? this.parseArrowExpression(this.startNodeAt(T), [x], w) + : x; + case t.tokTypes.regexp: + p = this.startNode(); + var S = this.tok.value; + return ( + (p.regex = {pattern: S.pattern, flags: S.flags}), + (p.value = S.value), + (p.raw = this.input.slice(this.tok.start, this.tok.end)), + this.next(), + this.finishNode(p, 'Literal') + ); + case t.tokTypes.num: + case t.tokTypes.string: + return ( + (p = this.startNode()), + (p.value = this.tok.value), + (p.raw = this.input.slice(this.tok.start, this.tok.end)), + this.tok.type === t.tokTypes.num && + p.raw.charCodeAt(p.raw.length - 1) === 110 && + (p.bigint = + p.value != null + ? p.value.toString() + : p.raw.slice(0, -1).replace(/_/g, '')), + this.next(), + this.finishNode(p, 'Literal') + ); + case t.tokTypes._null: + case t.tokTypes._true: + case t.tokTypes._false: + return ( + (p = this.startNode()), + (p.value = + this.tok.type === t.tokTypes._null + ? null + : this.tok.type === t.tokTypes._true), + (p.raw = this.tok.type.keyword), + this.next(), + this.finishNode(p, 'Literal') + ); + case t.tokTypes.parenL: + var A = this.storeCurrentPos(); + this.next(); + var U = this.parseExpression(); + if ( + (this.expect(t.tokTypes.parenR), this.eat(t.tokTypes.arrow)) + ) { + var M = U.expressions || [U]; + return ( + M.length && i(M[M.length - 1]) && M.pop(), + this.parseArrowExpression(this.startNodeAt(A), M) + ); + } + if (this.options.preserveParens) { + var c = this.startNodeAt(A); + (c.expression = U), + (U = this.finishNode(c, 'ParenthesizedExpression')); + } + return U; + case t.tokTypes.bracketL: + return ( + (p = this.startNode()), + (p.elements = this.parseExprList(t.tokTypes.bracketR, !0)), + this.finishNode(p, 'ArrayExpression') + ); + case t.tokTypes.braceL: + return ( + this.toks.overrideContext(t.tokContexts.b_expr), this.parseObj() + ); + case t.tokTypes._class: + return this.parseClass(!1); + case t.tokTypes._function: + return ( + (p = this.startNode()), this.next(), this.parseFunction(p, !1) + ); + case t.tokTypes._new: + return this.parseNew(); + case t.tokTypes.backQuote: + return this.parseTemplate(); + case t.tokTypes._import: + return this.options.ecmaVersion >= 11 + ? this.parseExprImport() + : this.dummyIdent(); + default: + return this.dummyIdent(); + } + }), + (g.parseExprImport = function () { + var p = this.startNode(), + h = this.parseIdent(!0); + switch (this.tok.type) { + case t.tokTypes.parenL: + return this.parseDynamicImport(p); + case t.tokTypes.dot: + return (p.meta = h), this.parseImportMeta(p); + default: + return (p.name = 'import'), this.finishNode(p, 'Identifier'); + } + }), + (g.parseDynamicImport = function (p) { + var h = this.parseExprList(t.tokTypes.parenR); + return ( + (p.source = h[0] || this.dummyString()), + (p.options = h[1] || null), + this.finishNode(p, 'ImportExpression') + ); + }), + (g.parseImportMeta = function (p) { + return ( + this.next(), + (p.property = this.parseIdent(!0)), + this.finishNode(p, 'MetaProperty') + ); + }), + (g.parseNew = function () { + var p = this.startNode(), + h = this.curIndent, + T = this.curLineStart, + x = this.parseIdent(!0); + if (this.options.ecmaVersion >= 6 && this.eat(t.tokTypes.dot)) + return ( + (p.meta = x), + (p.property = this.parseIdent(!0)), + this.finishNode(p, 'MetaProperty') + ); + var w = this.storeCurrentPos(); + return ( + (p.callee = this.parseSubscripts( + this.parseExprAtom(), + w, + !0, + h, + T + )), + this.tok.type === t.tokTypes.parenL + ? (p.arguments = this.parseExprList(t.tokTypes.parenR)) + : (p.arguments = []), + this.finishNode(p, 'NewExpression') + ); + }), + (g.parseTemplateElement = function () { + var p = this.startNode(); + return ( + this.tok.type === t.tokTypes.invalidTemplate + ? (p.value = {raw: this.tok.value, cooked: null}) + : (p.value = { + raw: this.input.slice(this.tok.start, this.tok.end).replace( + /\r\n?/g, + ` +` + ), + cooked: this.tok.value, + }), + this.next(), + (p.tail = this.tok.type === t.tokTypes.backQuote), + this.finishNode(p, 'TemplateElement') + ); + }), + (g.parseTemplate = function () { + var p = this.startNode(); + this.next(), (p.expressions = []); + var h = this.parseTemplateElement(); + for (p.quasis = [h]; !h.tail; ) + this.next(), + p.expressions.push(this.parseExpression()), + this.expect(t.tokTypes.braceR) + ? (h = this.parseTemplateElement()) + : ((h = this.startNode()), + (h.value = {cooked: '', raw: ''}), + (h.tail = !0), + this.finishNode(h, 'TemplateElement')), + p.quasis.push(h); + return ( + this.expect(t.tokTypes.backQuote), + this.finishNode(p, 'TemplateLiteral') + ); + }), + (g.parseObj = function () { + var p = this.startNode(); + (p.properties = []), this.pushCx(); + var h = this.curIndent + 1, + T = this.curLineStart; + for ( + this.eat(t.tokTypes.braceL), + this.curIndent + 1 < h && + ((h = this.curIndent), (T = this.curLineStart)); + !this.closes(t.tokTypes.braceR, h, T); + + ) { + var x = this.startNode(), + w = void 0, + S = void 0, + A = void 0; + if ( + this.options.ecmaVersion >= 9 && + this.eat(t.tokTypes.ellipsis) + ) { + (x.argument = this.parseMaybeAssign()), + p.properties.push(this.finishNode(x, 'SpreadElement')), + this.eat(t.tokTypes.comma); + continue; + } + if ( + (this.options.ecmaVersion >= 6 && + ((A = this.storeCurrentPos()), + (x.method = !1), + (x.shorthand = !1), + (w = this.eat(t.tokTypes.star))), + this.parsePropertyName(x), + this.toks.isAsyncProp(x) + ? ((S = !0), + (w = + this.options.ecmaVersion >= 9 && this.eat(t.tokTypes.star)), + this.parsePropertyName(x)) + : (S = !1), + i(x.key)) + ) { + i(this.parseMaybeAssign()) && this.next(), + this.eat(t.tokTypes.comma); + continue; + } + if (this.eat(t.tokTypes.colon)) + (x.kind = 'init'), (x.value = this.parseMaybeAssign()); + else if ( + this.options.ecmaVersion >= 6 && + (this.tok.type === t.tokTypes.parenL || + this.tok.type === t.tokTypes.braceL) + ) + (x.kind = 'init'), + (x.method = !0), + (x.value = this.parseMethod(w, S)); + else if ( + this.options.ecmaVersion >= 5 && + x.key.type === 'Identifier' && + !x.computed && + (x.key.name === 'get' || x.key.name === 'set') && + this.tok.type !== t.tokTypes.comma && + this.tok.type !== t.tokTypes.braceR && + this.tok.type !== t.tokTypes.eq + ) + (x.kind = x.key.name), + this.parsePropertyName(x), + (x.value = this.parseMethod(!1)); + else { + if (((x.kind = 'init'), this.options.ecmaVersion >= 6)) + if (this.eat(t.tokTypes.eq)) { + var U = this.startNodeAt(A); + (U.operator = '='), + (U.left = x.key), + (U.right = this.parseMaybeAssign()), + (x.value = this.finishNode(U, 'AssignmentExpression')); + } else x.value = x.key; + else x.value = this.dummyIdent(); + x.shorthand = !0; + } + p.properties.push(this.finishNode(x, 'Property')), + this.eat(t.tokTypes.comma); + } + return ( + this.popCx(), + this.eat(t.tokTypes.braceR) || + ((this.last.end = this.tok.start), + this.options.locations && + (this.last.loc.end = this.tok.loc.start)), + this.finishNode(p, 'ObjectExpression') + ); + }), + (g.parsePropertyName = function (p) { + if (this.options.ecmaVersion >= 6) + if (this.eat(t.tokTypes.bracketL)) { + (p.computed = !0), + (p.key = this.parseExpression()), + this.expect(t.tokTypes.bracketR); + return; + } else p.computed = !1; + var h = + this.tok.type === t.tokTypes.num || + this.tok.type === t.tokTypes.string + ? this.parseExprAtom() + : this.parseIdent(); + p.key = h || this.dummyIdent(); + }), + (g.parsePropertyAccessor = function () { + if (this.tok.type === t.tokTypes.name || this.tok.type.keyword) + return this.parseIdent(); + if (this.tok.type === t.tokTypes.privateId) + return this.parsePrivateIdent(); + }), + (g.parseIdent = function () { + var p = + this.tok.type === t.tokTypes.name + ? this.tok.value + : this.tok.type.keyword; + if (!p) return this.dummyIdent(); + this.tok.type.keyword && (this.toks.type = t.tokTypes.name); + var h = this.startNode(); + return this.next(), (h.name = p), this.finishNode(h, 'Identifier'); + }), + (g.parsePrivateIdent = function () { + var p = this.startNode(); + return ( + (p.name = this.tok.value), + this.next(), + this.finishNode(p, 'PrivateIdentifier') + ); + }), + (g.initFunction = function (p) { + (p.id = null), + (p.params = []), + this.options.ecmaVersion >= 6 && + ((p.generator = !1), (p.expression = !1)), + this.options.ecmaVersion >= 8 && (p.async = !1); + }), + (g.toAssignable = function (p, h) { + if ( + !( + !p || + p.type === 'Identifier' || + (p.type === 'MemberExpression' && !h) + ) + ) + if (p.type === 'ParenthesizedExpression') + this.toAssignable(p.expression, h); + else { + if (this.options.ecmaVersion < 6) return this.dummyIdent(); + if (p.type === 'ObjectExpression') { + p.type = 'ObjectPattern'; + for (var T = 0, x = p.properties; T < x.length; T += 1) { + var w = x[T]; + this.toAssignable(w, h); + } + } else if (p.type === 'ArrayExpression') + (p.type = 'ArrayPattern'), this.toAssignableList(p.elements, h); + else if (p.type === 'Property') this.toAssignable(p.value, h); + else if (p.type === 'SpreadElement') + (p.type = 'RestElement'), this.toAssignable(p.argument, h); + else if (p.type === 'AssignmentExpression') + (p.type = 'AssignmentPattern'), delete p.operator; + else return this.dummyIdent(); + } + return p; + }), + (g.toAssignableList = function (p, h) { + for (var T = 0, x = p; T < x.length; T += 1) { + var w = x[T]; + this.toAssignable(w, h); + } + return p; + }), + (g.parseFunctionParams = function (p) { + return ( + (p = this.parseExprList(t.tokTypes.parenR)), + this.toAssignableList(p, !0) + ); + }), + (g.parseMethod = function (p, h) { + var T = this.startNode(), + x = this.inAsync, + w = this.inGenerator, + S = this.inFunction; + return ( + this.initFunction(T), + this.options.ecmaVersion >= 6 && (T.generator = !!p), + this.options.ecmaVersion >= 8 && (T.async = !!h), + (this.inAsync = T.async), + (this.inGenerator = T.generator), + (this.inFunction = !0), + (T.params = this.parseFunctionParams()), + (T.body = this.parseBlock()), + this.toks.adaptDirectivePrologue(T.body.body), + (this.inAsync = x), + (this.inGenerator = w), + (this.inFunction = S), + this.finishNode(T, 'FunctionExpression') + ); + }), + (g.parseArrowExpression = function (p, h, T) { + var x = this.inAsync, + w = this.inGenerator, + S = this.inFunction; + return ( + this.initFunction(p), + this.options.ecmaVersion >= 8 && (p.async = !!T), + (this.inAsync = p.async), + (this.inGenerator = !1), + (this.inFunction = !0), + (p.params = this.toAssignableList(h, !0)), + (p.expression = this.tok.type !== t.tokTypes.braceL), + p.expression + ? (p.body = this.parseMaybeAssign()) + : ((p.body = this.parseBlock()), + this.toks.adaptDirectivePrologue(p.body.body)), + (this.inAsync = x), + (this.inGenerator = w), + (this.inFunction = S), + this.finishNode(p, 'ArrowFunctionExpression') + ); + }), + (g.parseExprList = function (p, h) { + this.pushCx(); + var T = this.curIndent, + x = this.curLineStart, + w = []; + for (this.next(); !this.closes(p, T + 1, x); ) { + if (this.eat(t.tokTypes.comma)) { + w.push(h ? null : this.dummyIdent()); + continue; + } + var S = this.parseMaybeAssign(); + if (i(S)) { + if (this.closes(p, T, x)) break; + this.next(); + } else w.push(S); + this.eat(t.tokTypes.comma); + } + return ( + this.popCx(), + this.eat(p) || + ((this.last.end = this.tok.start), + this.options.locations && + (this.last.loc.end = this.tok.loc.start)), + w + ); + }), + (g.parseAwait = function () { + var p = this.startNode(); + return ( + this.next(), + (p.argument = this.parseMaybeUnary()), + this.finishNode(p, 'AwaitExpression') + ); + }), + (t.defaultOptions.tabSize = 4); + function L(p, h) { + return a.parse(p, h); + } + (e.LooseParser = a), (e.isDummy = i), (e.parse = L); + }); + }); + var Vo = Li(), + Ug = Jc(), + dr = e1(), + Hg = uf(), + Tf = df(), + Os = null; + function kf() { + return new Proxy( + {}, + { + get: function (e, t) { + if (t in e) return e[t]; + var s = String(t).split('#'), + i = s[0], + r = s[1] || 'default', + a = {id: i, chunks: [i], name: r, async: !0}; + return (e[t] = a), a; + }, + } + ); + } + var Nc = {}; + function mf(e, t, s) { + var i = dr.registerServerReference(e, t, s), + r = t + '#' + s; + return (Nc[r] = e), i; + } + function Wg(e) { + if (e.indexOf('use client') === -1 && e.indexOf('use server') === -1) + return null; + try { + var t = Tf.parse(e, {ecmaVersion: '2024', sourceType: 'source'}).body; + } catch { + return null; + } + for (var s = 0; s < t.length; s++) { + var i = t[s]; + if (i.type !== 'ExpressionStatement' || !i.directive) break; + if (i.directive === 'use client') return 'use client'; + if (i.directive === 'use server') return 'use server'; + } + return null; + } + function Gg(e) { + if (e.indexOf('use server') === -1) return e; + var t; + try { + t = Tf.parse(e, {ecmaVersion: '2024', sourceType: 'source'}); + } catch { + return e; + } + var s = [], + i = 0; + function r(T, x) { + if (!(!T || typeof T != 'object')) { + var w = + T.type === 'FunctionDeclaration' || + T.type === 'FunctionExpression' || + T.type === 'ArrowFunctionExpression'; + if (w && x > 0 && T.body && T.body.type === 'BlockStatement') + for (var S = T.body.body, A = 0; A < S.length; A++) { + var U = S[A]; + if (U.type !== 'ExpressionStatement') break; + if (U.directive === 'use server') { + s.push({ + funcStart: T.start, + funcEnd: T.end, + dStart: U.start, + dEnd: U.end, + name: T.id ? T.id.name : 'action' + i, + isDecl: T.type === 'FunctionDeclaration', + }), + i++; + return; + } + if (!U.directive) break; + } + var M = w ? x + 1 : x; + for (var c in T) + if (!(c === 'start' || c === 'end' || c === 'type')) { + var R = T[c]; + if (Array.isArray(R)) + for (var W = 0; W < R.length; W++) + R[W] && typeof R[W].type == 'string' && r(R[W], M); + else R && typeof R.type == 'string' && r(R, M); + } + } + } + if ( + (t.body.forEach(function (T) { + r(T, 0); + }), + s.length === 0) + ) + return e; + s.sort(function (T, x) { + return x.funcStart - T.funcStart; + }); + for (var a = e, u = 0; u < s.length; u++) { + for ( + var d = s[u], y = d.dEnd, g = a.charAt(y); + y < a.length && + (g === ' ' || + g === + ` +` || + g === '\r' || + g === ' '); + + ) + y++, (g = a.charAt(y)); + a = a.slice(0, d.dStart) + a.slice(y); + var L = y - d.dStart, + p = d.funcEnd - L, + h = a.slice(d.funcStart, p); + d.isDecl + ? (a = + a.slice(0, d.funcStart) + + 'var ' + + d.name + + ' = __rsa(' + + h + + ", '" + + d.name + + "');" + + a.slice(p)) + : (a = + a.slice(0, d.funcStart) + + '__rsa(' + + h + + ", '" + + d.name + + "')" + + a.slice(p)); + } + return a; + } + function zg(e, t) { + if (!t.startsWith('.')) return t; + var s = e.split('/'); + s.pop(); + for (var i = t.split('/'), r = 0; r < i.length; r++) + if (i[r] !== '.') { + if (i[r] === '..') { + s.pop(); + continue; + } + s.push(i[r]); + } + return s.join('/'); + } + function Xg(e) { + Nc = {}; + var t = {react: Vo, 'react/jsx-runtime': Ug}, + s = {}, + i = null; + if ( + (Object.keys(e).forEach(function (h) { + if (!i) + try { + s[h] = Hg.transform(e[h], { + transforms: ['jsx', 'imports'], + jsxRuntime: 'automatic', + production: !0, + }).code; + } catch (T) { + i = h + ': ' + (T.message || String(T)); + } + }), + i) + ) + return {type: 'error', error: i}; + function r(h, T) { + if (t[T]) return T; + if (T.startsWith('.')) { + var x = zg(h, T); + if (t[x] || s[x]) return x; + for (var w = ['.js', '.jsx', '.ts', '.tsx'], S = 0; S < w.length; S++) { + var A = x + w[S]; + if (t[A] || s[A]) return A; + } + } + return T; + } + var a = {}, + u = {}; + function d(h) { + if (t[h]) return t[h]; + if (!s[h]) throw new Error('Module "' + h + '" not found'); + if (a[h]) return a[h].exports; + var T = Wg(e[h]); + if (T === 'use client') + return (t[h] = dr.createClientModuleProxy(h)), (u[h] = !0), t[h]; + var x = {exports: {}}; + a[h] = x; + var w = function (c) { + if (c.endsWith('.css')) return {}; + var R = r(h, c); + return t[R] ? t[R] : d(R); + }, + S = s[h]; + if ( + (T !== 'use server' && (S = Gg(S)), + new Function('module', 'exports', 'require', 'React', '__rsa', S)( + x, + x.exports, + w, + Vo, + function (c, R) { + return mf(c, h, R); + } + ), + (t[h] = x.exports), + T === 'use server') + ) + for (var A = Object.keys(x.exports), U = 0; U < A.length; U++) { + var M = A[U]; + typeof x.exports[M] == 'function' && mf(x.exports[M], h, M); + } + return delete a[h], x.exports; + } + var y = {exports: {}}; + Object.keys(s).forEach(function (h) { + d(h), + (h === '/src/App.js' || h === './App.js' || h === './src/App.js') && + (y.exports = t[h]); + }), + (Os = {module: y.exports}); + var g = {}; + function L(h) { + if (!g[h]) { + g[h] = !0; + var T = s[h]; + if (T) + for ( + var x = /require\(["']([^"']+)["']\)/g, w; + (w = x.exec(T)) !== null; + + ) { + var S = w[1]; + if ( + !( + S === 'react' || + S === 'react/jsx-runtime' || + S === 'react/jsx-dev-runtime' || + S.endsWith('.css') + ) + ) { + var A = r(h, S); + s[A] && L(A); + } + } + } + } + Object.keys(u).forEach(function (h) { + L(h); + }); + var p = {}; + return ( + Object.keys(g).forEach(function (h) { + p[h] = s[h]; + }), + {type: 'deployed', compiledClients: p, clientEntries: u} + ); + } + function Yg() { + if (!Os) throw new Error('No code deployed'); + var e = Os.module.default || Os.module, + t = Vo.createElement(e); + return dr.renderToReadableStream(t, kf(), { + onError: function (s) { + return console.error('[RSC Server Error]', s), msg; + }, + }); + } + function Jg(e, t) { + if (!Os) throw new Error('No code deployed'); + var s = Nc[e]; + if (!s) throw new Error('Action "' + e + '" not found'); + var i = t; + if (typeof t != 'string' && t && t.__formData) { + i = new FormData(); + for (var r = 0; r < t.__formData.length; r++) + i.append(t.__formData[r][0], t.__formData[r][1]); + } + return Promise.resolve(dr.decodeReply(i)).then(function (a) { + var u = Promise.resolve(s.apply(null, a)); + return u.then(function () { + var d = Os.module.default || Os.module; + return dr.renderToReadableStream( + {root: Vo.createElement(d), returnValue: u}, + kf(), + { + onError: function (y) { + return console.error('[RSC Server Error]', y), msg; + }, + } + ); + }); + }); + } + function yf(e, t) { + var s = t.getReader(); + function i() { + return s.read().then(function (r) { + if (r.done) { + self.postMessage({type: 'rsc-chunk', requestId: e, done: !0}); + return; + } + return ( + self.postMessage( + {type: 'rsc-chunk', requestId: e, done: !1, chunk: r.value}, + [r.value.buffer] + ), + i() + ); + }); + } + i().catch(function (r) { + self.postMessage({type: 'rsc-error', requestId: e, error: String(r)}); + }); + } + self.onmessage = function (e) { + var t = e.data; + if (t.type === 'deploy') + try { + var s = Xg(t.files); + s && s.type === 'error' + ? self.postMessage({type: 'rsc-error', error: s.error}) + : s && self.postMessage({type: 'deploy-result', result: s}); + } catch (r) { + self.postMessage({type: 'rsc-error', error: String(r)}); + } + else if (t.type === 'render') + try { + var i = Yg(); + Promise.resolve(i) + .then(function (r) { + yf(t.requestId, r); + }) + .catch(function (r) { + self.postMessage({ + type: 'rsc-error', + requestId: t.requestId, + error: String(r), + }); + }); + } catch (r) { + self.postMessage({ + type: 'rsc-error', + requestId: t.requestId, + error: String(r), + }); + } + else if (t.type === 'callAction') + try { + Jg(t.actionId, t.encodedArgs) + .then(function (r) { + yf(t.requestId, r); + }) + .catch(function (r) { + self.postMessage({ + type: 'rsc-error', + requestId: t.requestId, + error: String(r), + }); + }); + } catch (r) { + self.postMessage({ + type: 'rsc-error', + requestId: t.requestId, + error: String(r), + }); + } + }; + self.postMessage({type: 'ready'}); +})(); +/*! Bundled license information: + +react/cjs/react.react-server.production.js: + (** + * @license React + * react.react-server.production.js + * + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + *) + +react/cjs/react-jsx-runtime.react-server.production.js: + (** + * @license React + * react-jsx-runtime.react-server.production.js + * + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + *) + +react-dom/cjs/react-dom.react-server.production.js: + (** + * @license React + * react-dom.react-server.production.js + * + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + *) + +react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js: + (** + * @license React + * react-server-dom-webpack-server.browser.production.js + * + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + *) +*/ diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index e1169b7ae..eab07e3ac 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -1,7 +1,14 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + export const template = { '/src/index.js': { hidden: true, - code: `import React, { StrictMode } from "react"; + code: `import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./styles.css"; @@ -28,8 +35,8 @@ root.render( eject: 'react-scripts eject', }, dependencies: { - react: '^18.0.0', - 'react-dom': '^18.0.0', + react: '^19.2.1', + 'react-dom': '^19.2.1', 'react-scripts': '^5.0.0', }, }, diff --git a/src/components/MDX/Sandpack/templateRSC.ts b/src/components/MDX/Sandpack/templateRSC.ts new file mode 100644 index 000000000..efc4c940c --- /dev/null +++ b/src/components/MDX/Sandpack/templateRSC.ts @@ -0,0 +1,102 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import type {SandpackFiles} from '@codesandbox/sandpack-react/unstyled'; + +function hideFiles(files: SandpackFiles): SandpackFiles { + return Object.fromEntries( + Object.entries(files).map(([name, code]) => [ + name, + typeof code === 'string' ? {code, hidden: true} : {...code, hidden: true}, + ]) + ); +} + +// --- Load RSC infrastructure files as raw strings via raw-loader --- +const RSC_SOURCE_FILES = { + 'webpack-shim': + require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/webpack-shim.js') as string, + 'rsc-client': + require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/rsc-client.js') as string, + 'react-refresh-init': + require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/__react_refresh_init__.js') as string, + 'worker-bundle': `export default ${JSON.stringify( + require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/worker-bundle.dist.js') as string + )};`, + 'rsdw-client': + require('!raw-loader?esModule=false!../../../../node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js') as string, +}; + +// Load react-refresh runtime and strip the process.env.NODE_ENV guard +// so it works in Sandpack's bundler which may not replace process.env. +const reactRefreshRaw = + require('!raw-loader?esModule=false!../../../../node_modules/next/dist/compiled/react-refresh/cjs/react-refresh-runtime.development.js') as string; + +// Wrap as a CJS module that Sandpack can require. +// Strip the `if (process.env.NODE_ENV !== "production")` guard so the +// runtime always executes inside the sandbox. +const reactRefreshModule = reactRefreshRaw.replace( + /if \(process\.env\.NODE_ENV !== "production"\) \{/, + '{' +); + +// Entry point that bootstraps the RSC client pipeline. +// __react_refresh_init__ must be imported BEFORE rsc-client so the +// DevTools hook stub exists before React's renderer loads. +const indexEntry = ` +import './styles.css'; +import './__react_refresh_init__'; +import { initClient } from './rsc-client.js'; +initClient(); +`.trim(); + +const indexHTML = ` + + + + + + Document + + +
        + + +`.trim(); + +export const templateRSC: SandpackFiles = { + ...hideFiles({ + '/public/index.html': indexHTML, + '/src/index.js': indexEntry, + '/src/__react_refresh_init__.js': RSC_SOURCE_FILES['react-refresh-init'], + '/src/rsc-client.js': RSC_SOURCE_FILES['rsc-client'], + '/src/rsc-server.js': RSC_SOURCE_FILES['worker-bundle'], + '/src/__webpack_shim__.js': RSC_SOURCE_FILES['webpack-shim'], + // RSDW client as a Sandpack local dependency (bypasses Babel bundler) + '/node_modules/react-server-dom-webpack/package.json': + '{"name":"react-server-dom-webpack","main":"index.js"}', + '/node_modules/react-server-dom-webpack/client.browser.js': + RSC_SOURCE_FILES['rsdw-client'], + // react-refresh runtime as a Sandpack local dependency + '/node_modules/react-refresh/package.json': + '{"name":"react-refresh","main":"runtime.js"}', + '/node_modules/react-refresh/runtime.js': reactRefreshModule, + '/package.json': JSON.stringify( + { + name: 'react.dev', + version: '0.0.0', + main: '/src/index.js', + dependencies: { + react: '19.2.4', + 'react-dom': '19.2.4', + }, + }, + null, + 2 + ), + }), +}; diff --git a/src/components/MDX/Sandpack/useSandpackLint.tsx b/src/components/MDX/Sandpack/useSandpackLint.tsx index ec05fbe0d..479b53ee0 100644 --- a/src/components/MDX/Sandpack/useSandpackLint.tsx +++ b/src/components/MDX/Sandpack/useSandpackLint.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx index 18c137439..22fdd0f1a 100644 --- a/src/components/MDX/SandpackWithHTMLOutput.tsx +++ b/src/components/MDX/SandpackWithHTMLOutput.tsx @@ -1,6 +1,13 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + import {Children, memo} from 'react'; import InlineCode from './InlineCode'; -import Sandpack from './Sandpack'; +import {SandpackClient} from './Sandpack'; const ShowRenderedHTML = ` import { renderToStaticMarkup } from 'react-dom/server'; @@ -49,8 +56,8 @@ export default function formatHTML(markup) { const packageJSON = ` { "dependencies": { - "react": "18.3.0-canary-6db7f4209-20231021", - "react-dom": "18.3.0-canary-6db7f4209-20231021", + "react": "^19.2.1", + "react-dom": "^19.2.1", "react-scripts": "^5.0.0", "html-format": "^1.1.2" }, @@ -73,7 +80,7 @@ function createFile(meta: string, source: string) { } export default memo(function SandpackWithHTMLOutput( - props: React.ComponentProps + props: React.ComponentProps ) { const children = [ ...Children.toArray(props.children), @@ -81,5 +88,5 @@ export default memo(function SandpackWithHTMLOutput( createFile('src/formatHTML.js hidden', formatHTML), createFile('package.json hidden', packageJSON), ]; - return {children}; + return {children}; }); diff --git a/src/components/MDX/SimpleCallout.tsx b/src/components/MDX/SimpleCallout.tsx index ae259bcf5..0e124baa7 100644 --- a/src/components/MDX/SimpleCallout.tsx +++ b/src/components/MDX/SimpleCallout.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index dffb767dc..7bfa31d3e 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -1,9 +1,16 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ import * as React from 'react'; -import Image from 'next/image'; +import Image from 'next/legacy/image'; import {IconTwitter} from '../Icon/IconTwitter'; import {IconThreads} from '../Icon/IconThreads'; import {IconBsky} from '../Icon/IconBsky'; @@ -39,11 +46,9 @@ export function TeamMember({ personal, }: TeamMemberProps) { if (name == null || title == null || permalink == null || children == null) { + const identifier = name ?? title ?? permalink ?? 'unknown'; throw new Error( - 'Expected name, title, permalink, and children for ' + name ?? - title ?? - permalink ?? - 'unknown' + `Expected name, title, permalink, and children for ${identifier}` ); } return ( diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index fc13af338..0fd0160d6 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -31,9 +38,11 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { message = children; } else if ( isValidElement(children) && - typeof children.props.children === 'string' + typeof (children as React.ReactElement<{children: string}>).props + .children === 'string' ) { - message = children.props.children; + message = (children as React.ReactElement<{children: string}>).props + .children; } else { throw Error('Expected TerminalBlock children to be a plain string.'); } @@ -70,13 +79,15 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
        -
        - - {message} -
        + + + {message} + +
    ); } diff --git a/src/components/MDX/TocContext.tsx b/src/components/MDX/TocContext.tsx index 8aeead370..924e6e09e 100644 --- a/src/components/MDX/TocContext.tsx +++ b/src/components/MDX/TocContext.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx index d46a70277..20fc3b5fe 100644 --- a/src/components/MDX/YouWillLearnCard.tsx +++ b/src/components/MDX/YouWillLearnCard.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index 0a71658a2..97b22c9c1 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -7,33 +14,105 @@ import Tag from 'components/Tag'; import {H1} from './MDX/Heading'; import type {RouteTag, RouteItem} from './Layout/getRouteMeta'; import * as React from 'react'; +import {useState, useEffect} from 'react'; +import {useRouter} from 'next/router'; import {IconCanary} from './Icon/IconCanary'; +import {IconExperimental} from './Icon/IconExperimental'; +import {IconCopy} from './Icon/IconCopy'; +import {Button} from './Button'; interface PageHeadingProps { title: string; - canary?: boolean; + version?: 'experimental' | 'canary' | 'rc'; + experimental?: boolean; status?: string; description?: string; tags?: RouteTag[]; breadcrumbs: RouteItem[]; } +function CopyAsMarkdownButton() { + const {asPath} = useRouter(); + const [copied, setCopied] = useState(false); + + useEffect(() => { + if (!copied) return; + const timer = setTimeout(() => setCopied(false), 2000); + return () => clearTimeout(timer); + }, [copied]); + + async function fetchPageBlob() { + const cleanPath = asPath.split(/[?#]/)[0]; + const res = await fetch(cleanPath + '.md'); + if (!res.ok) throw new Error('Failed to fetch'); + const text = await res.text(); + return new Blob([text], {type: 'text/plain'}); + } + + async function handleCopy() { + try { + await navigator.clipboard.write([ + // Don't wait for the blob, or Safari will refuse clipboard access + new ClipboardItem({'text/plain': fetchPageBlob()}), + ]); + setCopied(true); + } catch { + // Silently fail + } + } + + return ( + + ); +} + function PageHeading({ title, status, - canary, + version, tags = [], breadcrumbs, }: PageHeadingProps) { return (
    - {breadcrumbs ? : null} +
    +
    + {breadcrumbs ? : null} +
    + +

    {title} - {canary && ( + {version === 'canary' && ( + )} + {version === 'rc' && ( + + )} + {version === 'experimental' && ( + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]" /> )} diff --git a/src/components/Search.tsx b/src/components/Search.tsx index f5c963f67..24b066d70 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -9,6 +16,8 @@ import {lazy, useEffect} from 'react'; import * as React from 'react'; import {createPortal} from 'react-dom'; import {siteConfig} from 'siteConfig'; +import type {ComponentType, PropsWithChildren} from 'react'; +import type {DocSearchModalProps} from '@docsearch/react/modal'; export interface SearchProps { appId?: string; @@ -83,9 +92,10 @@ const options = { }; const DocSearchModal: any = lazy(() => - // @ts-ignore import('@docsearch/react/modal').then((mod) => ({ - default: mod.DocSearchModal, + default: mod.DocSearchModal as ComponentType< + PropsWithChildren + >, })) ); diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index 93d27983d..e4ad064ac 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ @@ -124,7 +131,14 @@ export const Seo = withRouter( )} + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a const bannerLink = 'https://conf.react.dev/'; const bannerLinkText = 'En savoir plus'; diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index fa2ff0038..99c98661c 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -1,3 +1,10 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + /* * Copyright (c) Facebook, Inc. and its affiliates. */ diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md index df7bfc1fd..48d602dd0 100644 --- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md +++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md @@ -6,7 +6,11 @@ description: 2020, c'était long. Alors que l'année se termine, nous voulions --- +<<<<<<< HEAD Le 21 décembre 2020 par [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS) et [Sebastian Markbåge](https://twitter.com/sebmarkbage) +======= +December 21, 2020 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index 10f74aeb7..e2521a077 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -5,7 +5,11 @@ date: 2021/06/08 description: L'équipe React est ravie de vous donner quelques nouvelles. Nous avons commencé à travailler sur React 18, qui sera notre prochaine version majeure. Nous avons créé un groupe de travail pour préparer la communauté à l'adoption graduelle des nouvelles fonctionnalités de React 18. Nous avons publié une React 18 Alpha pour que les mainteneurs de bibliothèques puissent l'essayer et nous faire leurs retours… --- +<<<<<<< HEAD Le 8 juin 2021 par [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://twitter.com/dan_abramov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Seth Webster](https://twitter.com/sethwebster) +======= +June 8, 2021 by [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md index 944902a7e..12211e741 100644 --- a/src/content/blog/2021/12/17/react-conf-2021-recap.md +++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md @@ -132,7 +132,11 @@ C'était la première fois que nous planifiions une conférence nous-mêmes, et Merci tout d'abord à nos orateurs et oratrices [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0) et [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +<<<<<<< HEAD Merci à celles et ceux qui ont aidé en fournissant des retours sur les présentations, notamment [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors) et [Tim Yung](https://twitter.com/yungsters). +======= +Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Merci [Lauren Tan](https://twitter.com/potetotes) pour avoir mis en place le Discord de la conférence et avoir joué le rôle de notre administrateur Discord. diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index a545d370e..8dab03c3c 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -6,7 +6,11 @@ description: React 18 a pris des années, mais il était porteur de précieuses --- +<<<<<<< HEAD Le 15 juin 2022 par [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Xuan Huang](https://twitter.com/Huxpro) +======= +June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Xuan Huang](https://twitter.com/Huxpro) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- @@ -28,7 +32,11 @@ Nous avons annoncé une [démo expérimentale des React Server Components](/blog Nous avons notamment abandonné l'idée de versions dédiées de bibliothèques d'E/S (ex. react-fetch), pour plutôt adopter un modèle à base d'async/await pour une meilleure compatibilité. Ça ne bloque pas en soit la sortie des RSC parce que vous pouvez aussi utiliser des routeurs pour le chargement de données. Autre évolution : nous avons délaissé l'approche à base d'extension de fichiers au profit [d'annotations](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278). +<<<<<<< HEAD Nous collaborons avec Vercel et Shopify pour unifier la prise en charge de *bundlers* pour viser une sémantique partagée avec Webpack et Vite. D'ici la sortie, nous souhaitons nous assurer que la sémantique des RSC sera la même à travers tout l'écosystème de React. C'est le principal point bloquant pour arriver à une version stable. +======= +We’re working together with Vercel and Shopify to unify bundler support for shared semantics in both webpack and Vite. Before launch, we want to make sure that the semantics of RSCs are the same across the whole React ecosystem. This is the major blocker for reaching stable. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Chargement de ressources {/*asset-loading*/} diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 41fbf7328..9031bae11 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -5,7 +5,11 @@ date: 2023/03/16 description: Nous sommes enchantés d'annoncer aujourd'hui la sortie de react.dev, le nouveau site officiel de React et de sa documentation. Dans ce billet, nous aimerions vous faire faire un tour du nouveau site. --- +<<<<<<< HEAD Le 16 mars 2023 par [Dan Abramov](https://twitter.com/dan_abramov) et [Rachel Nabors](https://twitter.com/rachelnabors) +======= +March 16, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Rachel Nabors](https://twitter.com/rachelnabors) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- @@ -282,6 +286,7 @@ export default function PackingList() {
      + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    @@ -320,6 +336,7 @@ export default function PackingList() {
      + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    @@ -368,6 +396,7 @@ export default function PackingList() {
      + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    @@ -412,6 +452,7 @@ export default function PackingList() {
      + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    @@ -632,7 +684,11 @@ Nous pensons qu'il n'y a jamais eu de meilleur moment pour apprendre React. ## Qui a travaillé sur tout ça ? {/*who-worked-on-this*/} +<<<<<<< HEAD Dans l'équipe React, [Rachel Nabors](https://twitter.com/rachelnabors/) a piloté le projet (et fourni les illustrations) et [Dan Abramov](https://twitter.com/dan_abramov) a conçu le cursus. Ils ont par ailleurs co-écrit ensemble la majorité du contenu. +======= +On the React team, [Rachel Nabors](https://twitter.com/rachelnabors/) led the project (and provided the illustrations), and [Dan Abramov](https://bsky.app/profile/danabra.mov) designed the curriculum. They co-authored most of the content together as well. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Naturellement, un projet de cette taille ne se fait pas avec une petite équipe dans son coin ! Nous avons beaucoup de monde à remercier ! diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index 66599c139..2e28178a8 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md @@ -31,8 +31,12 @@ Le plus gros changement survenu tient à l'introduction de [`async` / `await`](h À présent que nous avons suffisamment débroussaillé le sujet du chargement de données, nous explorons l'autre direction : l'envoi de données du client vers le serveur, afin que vous puissiez exécuter des modifications de base de données et implémenter des formulaires. Nous vous permettons pour cela de passer des fonctions d'Actions Serveur à travers la frontière serveur/client, fonctions que le code client peut alors appeler, ce qui fournit une sorte de RPC *(Remote Procedure Call, NdT)* transparent. Les Actions Serveur vous permettent aussi de proposer des formulaires en amélioration progressive pendant le chargement de JavaScript. +<<<<<<< HEAD Une implémentation des React Server Components a été livrée au travers de [l'*App Router* de Next.js](/learn/start-a-new-react-project#nextjs-app-router). C'est un bon exemple d'une intégration profonde d'un routeur qui traite les RSC comme une primitive importante, mais ce n'est pas la seule façon de construire un routeur ou un framework compatibles RSC. Il existe une distinction claire entre les fonctionnalités que permet la spec des RSC, et leur implémentation. Les React Server Components sont pensés comme une spec de composants qui puisse être prise en charge par n'importe quel framework React compatible. +======= +React Server Components has shipped in [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). This showcases a deep integration of a router that really buys into RSC as a primitive, but it's not the only way to build a RSC-compatible router and framework. There's a clear separation for features provided by the RSC spec and implementation. React Server Components is meant as a spec for components that work across compatible React frameworks. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Nous vous conseillons généralement d'utiliser un framework existant, mais si vous devez construire votre propre framework, c'est possible. Créer votre propre framework compatible RSC n'est pas aussi aisé que nous le voudrions, principalement en raison d'une exigence d'intégration profonde avec votre *bundler*. La génération actuelle de *bundlers* est super pour un usage centré sur le client, mais ils n'ont pas été conçus avec une prise en charge de premier plan pour la découpe d'un graphe de modules selon un axe client / serveur. C'est pourquoi nous avons un partenariat en cours avec les développeurs de *bundlers* afin d'intégrer dans leurs outils les primitives nécessaires à RSC. @@ -92,13 +96,24 @@ L'idée, c'est que vous devriez pouvoir faire le rendu d'un arbre React hors-éc Depuis notre dernier bulletin, nous avons testé une version expérimentale du prérendu en interne chez Meta dans nos applis React Native sur Android et iOS, avec des résultats de performance encourageants. Nous avons aussi amélioré la collaboration du rendu hors-écran avec Suspense — suspendre au sein d'un arbre hors-écran ne déclenchera pas les rendus de secours de Suspense. Il nous reste à finaliser les primitives qui seront exposées aux développeurs de bibliothèques. Nous prévoyons de publier une RFC plus tard cette année, accompagnée d'une API expérimentale pour vos tests et retours d'expérience. +<<<<<<< HEAD ## Pistage des transitions {/*transition-tracing*/} +======= +The Transition Tracing API lets you detect when [React Transitions](/reference/react/useTransition) become slower and investigate why they may be slow. Following our last update, we have completed the initial design of the API and published an [RFC](https://github.com/reactjs/rfcs/pull/238). The basic capabilities have also been implemented. The project is currently on hold. We welcome feedback on the RFC and look forward to resuming its development to provide a better performance measurement tool for React. This will be particularly useful with routers built on top of React Transitions, like the [Next.js App Router](/learn/creating-a-react-app#nextjs-app-router). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a L'API de pistage des transitions vous permet de détecter que des [transitions React](/reference/react/useTransition) ralentissent, et d'enquêter sur les causes du ralentissement. Depuis notre dernier bulletin, nous avons terminé la conception initiale de l'API et publié une [RFC](https://github.com/reactjs/rfcs/pull/238). Les capacités de base ont été implémentées. Le projet est actuellement en suspens. Nous sommes à l'écoute de vos retours sur la RFC et espérons reprendre le développement pour fournir de meilleurs outils de mesure de la performance pour React. Ça sera particulièrement utile pour les routeurs basés sur les transitions React, tels que [l'*App Router* de Next.js](/learn/start-a-new-react-project#nextjs-app-router). +<<<<<<< HEAD --- En complément de ce bulletin, notre équipe est récemment apparue dans des podcasts communautaires et des *livestreams* pour parler de notre travail et répondre à vos questions. +======= +* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were interviewed by [Kent C. Dodds on his YouTube channel](https://www.youtube.com/watch?v=h7tur48JSaw), where they discussed concerns around React Server Components. +* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were guests on the [JSParty podcast](https://jsparty.fm/267) and shared their thoughts about the future of React. + +Thanks to [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Luna Wei](https://twitter.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Sean Keegan](https://twitter.com/DevRelSean), [Sebastian Silbermann](https://twitter.com/sebsilbermann), [Seth Webster](https://twitter.com/sethwebster), and [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this post. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * [Dan Abramov](https://twitter.com/dan_abramov) et [Joe Savona](https://twitter.com/en_JS) étaient interviewés par [Kent C. Dodds sur sa chaîne YouTube](https://www.youtube.com/watch?v=h7tur48JSaw), pour parler de leurs préoccupations sur les React Server Components. * [Dan Abramov](https://twitter.com/dan_abramov) et [Joe Savona](https://twitter.com/en_JS) étaient les invités du [podcast JSParty](https://jsparty.fm/267) pour parler de leurd visions respectives de l'avenir de React. diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md index f7a39d268..dff516d46 100644 --- a/src/content/blog/2023/05/03/react-canaries.md +++ b/src/content/blog/2023/05/03/react-canaries.md @@ -6,7 +6,11 @@ description: Nous aimerions offrir à la communauté React un moyen d'adopter in --- +<<<<<<< HEAD Le 3 mai 2023 par [Dan Abramov](https://twitter.com/dan_abramov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Andrew Clark](https://twitter.com/acdlite) +======= +May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md index fed42389a..2a3dd2297 100644 --- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md +++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md @@ -5,7 +5,11 @@ date: 2024/02/15 description: Dans les billets React Labs, nous vous parlons de nos projets de recherche et développement actifs. Depuis notre dernier bulletin, nous avons fait des progrès significatifs et nous aimerions partager ce que nous avons appris. --- +<<<<<<< HEAD Le 15 février 2024 par [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode) et [Dan Abramov](https://twitter.com/dan_abramov). +======= +February 15, 2024 by [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://bsky.app/profile/danabra.mov). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- @@ -15,6 +19,7 @@ Dans les billets React Labs, nous vous parlons de nos projets de recherche et d +<<<<<<< HEAD La React Conf 2024 est prévue pour les 15–16 mai à Henderson, Nevada ! Si vous avez l'intention de participer à la React Conf en personne, vous pouvez [participer à un tirage au sort](https://forms.reform.app/bLaLeE/react-conf-2024-ticket-lottery/1aRQLK) jusqu’au 28 février. @@ -23,6 +28,8 @@ Pour en savoir plus sur les billets, la diffusion gratuite en ligne, les partena +======= +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- ## React Compiler {/*react-compiler*/} @@ -56,19 +63,31 @@ Nous appelons cette collection plus large de fonctionnalités simplement « Act La fonction `action` peut être synchrone ou asynchrone. Vous pouvez la définir côté client avec du JavaScript classique, ou côté serveur avec la directive [`'use server'`](/reference/rsc/use-server). Lorsque vous utilisez une Action, React gère le cycle de vie de l'envoi de données pour vous, en fournissant des Hooks tels que [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) et [`useActionState`](/reference/react/hooks/useActionState) pour accéder à l'état courant et la réponse à l'action du formulaire. +<<<<<<< HEAD Par défaut, les Actions sont exécutées au sein d'une [transition](/reference/react/useTransition), ce qui permet de conserver une page interactive pendant leur traitement. Dans la mesure où les Actions autorisent les fonctions asynchrones, nous avons ajouté la possibilité d'utiliser `async/await` dans les transitions. Ça vous permet d'afficher une UI avec l'état `isPending` d'une transition lorsqu'une requête asynchrone telle que `fetch` démarre, et de maintenir cette UI d'attente tout le temps de la mise à jour. +======= +By default, Actions are submitted within a [transition](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a En complément des Actions, nous dévoilons une fonctionnalité appelée [`useOptimistic`](/reference/react/useOptimistic) pour gérer les mises à jour optimistes d'état. Avec ce Hook, vous pouvez appliquer des mises à jour temporaires qui sont automatiquement ajustées lorsque l'état final est ancré. Pour les Actions, ça vous permet de mettre le client dans son état final de façon optimiste, en supposant donc que l'envoi aura réussi, mais de vous recaler à terme sur la donnée renvoyée par le serveur. Ça fonctionne avec du `async`/`await` classique, de sorte que le comportement est identique que vous utilisiez `fetch` côté client ou des Actions Serveur depuis le serveur. Les auteur·es de bibliothèques peuvent implémenter leurs propres props `action={fn}` dans leurs composants, en combinaison avec `useTransition`. Nous souhaitons que les bibliothèques puissent adopter cette approche à base d'Actions lorsqu'elles conçoivent l'API de leurs composants, afin de fournir une expérience cohérente aux développeur·ses React. Si par exemple votre bibliothèque fournit un composant ``, envisagez de proposer aussi une API ``. +<<<<<<< HEAD Même si nous nous sommes d'abord concentrés sur les Actions Serveur pour le transfert de données entre client et serveur, notre philosophie pour React consiste à fournir un modèle de programmation unifié pour toutes les plateformes et tous les environnements. Chaque fois que posssible, si nous ajoutons une fonctionnalité côté client nous essayons de la faire fonctionner également côté serveur, et réciproquement. Cette philosophie nous permet de créer un jeu unique d'API qui fonctionnent où que votre appli s'exécute, ce qui facilite sa migration ultérieure vers d'autres environnements. +======= +While we initially focused on Server Actions for client-server data transfer, our philosophy for React is to provide the same programming model across all platforms and environments. When possible, if we introduce a feature on the client, we aim to make it also work on the server, and vice versa. This philosophy allows us to create a single set of APIs that work no matter where your app runs, making it easier to upgrade to different environments later. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Les Actions sont désormais disponibles sur le canal de livraison Canary, et feront partie de la prochaine version stable de React. ## Nouvelles fonctionnalités dans React Canary {/*new-features-in-react-canary*/} +<<<<<<< HEAD Nous avons proposé les [React Canaries](/blog/2023/05/03/react-canaries) comme une option pour adopter de nouvelles fonctionnalités stables au cas par cas, dès que leur conception est quasi-bouclée, sans avoir besoin d'attendre qu'elles apparaissent dans une version stable. +======= +We introduced [React Canaries](/blog/2023/05/03/react-canaries) as an option to adopt individual new stable features as soon as their design is close to final, before they’re released in a stable semver version. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Les Canaries changent la façon dont nous développons React. Par le passé, chaque fonctionnalité était conçue, testée et construite en privé chez Meta, de sorte que nos utilistaurs ne voyaient que le produit final, peaufiné, dans une version du canal Stable. Avec les Canaries, nous construisons davantage en public, avec l'aide de la communauté, pour finaliser des fonctionnalités que nous partageons au travers de la série de bulletins React Labs. Vous entendez ainsi parler des nouvelles fonctionnalités plus tôt, au fil de leur finalisation plutôt qu'une fois qu'elles sont totalement terminées. @@ -82,7 +101,11 @@ Les Composants Serveur, le Chargement de ressources, les Métadonnées de docume - **Actions** : comme vu plus haut, nous avons ajouté les Actions pour gérer l'envoi de données du client vers le serveur. Vous pouvez ajouter `action` à des éléments tels que [`
    `](/reference/react-dom/components/form), accéder à l'état d'envoi avec [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), traiter le résultat avec [`useActionState`](/reference/react/hooks/useActionState) et mettre à jour l'UI de façon optimiste avec [`useOptimistic`](/reference/react/useOptimistic). +<<<<<<< HEAD Dans la mesure où toutes ces fonctionnalités travaillent ensemble, il serait délicat de les publier sur le canal Stable de façon indépendante. Livrer les Actions sans les Hooks complémentaire d'accès aux états de formulaire en limiterait l'utilité pratique. Dévoiler les Composants Serveur sans intégrer les Actions Serveur compliquerait la modification de données côté serveur. +======= +Since all of these features work together, it’s difficult to release them in the Stable channel individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Avant de pouvoir publier un jeu de fonctionnalités sur le canal Stable, nous avons besoin de nous assurer qu'elles forment un tout cohérent, et que les développeur·ses ont tout ce qu'il leur faut pour les utiliser en production. Les React Canaries nous permettent de développer ces fonctionnalités indépendamment, et de livrer les API stables de façon incrémentale tant que le jeu complet de fonctionnalités n'est pas encore prêt. @@ -106,7 +129,11 @@ Activité est toujours en phase de recherche, et nous devons encore finaliser le En complément de ce bulletin, notre équipe est intervenue en conférences ou dans des podcasts pour en dire davantage sur nos travaux et répondre à vos questions. +<<<<<<< HEAD - [Sathya Gunasekaran](/community/team#sathya-gunasekaran) a parlé de React Compiler lors de la conférence [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) +======= +- [Sathya Gunasekaran](https://github.com/gsathya) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - [Dan Abramov](/community/team#dan-abramov) a donné une présentation à [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s) intitulée « React dans une autre dimension », qui explorait une histoire alternative de la création des React Server Components et des Actions. diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 08529b4a0..f375615b8 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -1,5 +1,9 @@ --- +<<<<<<< HEAD title: "React 19 RC : guide de migration" +======= +title: "React 19 Upgrade Guide" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a author: Ricky Hanlon date: 2024/04/25 description: Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19. @@ -12,7 +16,11 @@ Le 25 avril 2024 par [Ricky Hanlon](https://twitter.com/rickhanlonii) +<<<<<<< HEAD Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. +======= +The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -20,11 +28,19 @@ Les améliorations apportées par React 19 RC nécessitent quelques ruptures de #### React 18.3 est également sorti {/*react-18-3*/} +<<<<<<< HEAD Pour vous aider à migrer vers React 19, nous avons publié une version `react@18.3` identique à la 18.2 mais avec des avertissements sur les API dépréciées et d'autres changements nécessaires pour React 19. +======= +To help make the upgrade to React 19 easier, we've published a `react@18.3` release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Nous vous conseillons de d'abord mettre à jour vers React 18.3 pour vous aider à identifier tout problème avant de passer à React 19. +<<<<<<< HEAD Pour une liste détaillées des modifications de la 18.3, consultez ses [notes de publication](https://github.com/facebook/react/blob/main/CHANGELOG.md). +======= +For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -38,7 +54,11 @@ Dans cet article, nous vous guidons à travers les étapes nécessaires à une m - [Changements liés à TypeScript](#typescript-changes) - [Changelog](#changelog) +<<<<<<< HEAD Si vous aimeriez nous aider à tester React 19, suivez les étapes de ce guide de migration et [signalez-nous tout problème](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) que vous rencontreriez. Pour une liste des nouveautés de React 19, consultez [l’annonce de sortie de React 19](/blog/2024/04/25/react-19). +======= +If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- @@ -71,28 +91,27 @@ Nous estimons que la plupart des applis ne seront pas affectées par ça, dans l Pour installer la dernière version de React et React DOM : ```bash -npm install --save-exact react@rc react-dom@rc +npm install --save-exact react@^19.0.0 react-dom@^19.0.0 ``` Ou si vous utilisez Yarn : ```bash -yarn add --exact react@rc react-dom@rc +yarn add --exact react@^19.0.0 react-dom@^19.0.0 ``` +<<<<<<< HEAD Si vous utilisez TypeScript, vous aurez aussi besoin de mettre à jour les types. Une fois que React 19 sortira en version stable, vous pourrez installer les types au travers des paquets habituels `@types/react` et `@types/react-dom`. D'ici là, ces types sont mis à disposition par des paquets distincts que vous devrez forcer dans votre `package.json` : +======= +If you're using TypeScript, you also need to update the types. +```bash +npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0 +``` +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -```json -{ - "dependencies": { - "@types/react": "npm:types-react@rc", - "@types/react-dom": "npm:types-react-dom@rc" - }, - "overrides": { - "@types/react": "npm:types-react@rc", - "@types/react-dom": "npm:types-react-dom@rc" - } -} +Or, if you're using Yarn: +```bash +yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0 ``` Nous fournissons par ailleurs un codemod pour les remplacements les plus courants. Consultez par exemple la section [Changements liés à TypeScript](#typescript-changes) plus loin. @@ -113,18 +132,30 @@ Pour lancer tous les codemods listés dans ce guide, vous disposez de la recette npx codemod@latest react/19/migration-recipe ``` +<<<<<<< HEAD Elle exploitera les codemods suivants du dépôt `react-codemod` : +======= +This will run the following codemods from `react-codemod`: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) - [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref) - [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import) - [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) +<<<<<<< HEAD - [`prop-types-typescript`](TODO) +======= +- [`prop-types-typescript`](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Ça n'inclut toutefois pas les changements liés à TypeScript. Consultez la section [Changements liés à TypeScript](#typescript-changes) plus loin. +<<<<<<< HEAD Dans le reste de cet article, les changements proposant un codemod indiquent la commande à employer. +======= +Changes that include a codemod include the command below. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Pour une liste complète des codemods disponibles, consultez le [dépôt `react-codemod`](https://github.com/reactjs/react-codemod). @@ -132,7 +163,11 @@ Pour une liste complète des codemods disponibles, consultez le [dépôt `react- ### Les erreurs lors du rendu ne sont pas propagées {/*errors-in-render-are-not-re-thrown*/} +<<<<<<< HEAD Dans les versions précédentes de React, les erreurs survenant lors du rendu étaient interceptées puis relancées. En mode développement, nous les affichions également avec `console.error`, ce qui pouvait entraîner des doublons dans les journaux d'erreurs. +======= +In previous versions of React, errors thrown during render were caught and rethrown. In DEV, we would also log to `console.error`, resulting in duplicate error logs. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Avec React 19, nous avons [amélioré la gestion des erreurs](/blog/2024/04/25/react-19#error-handling) pour réduire cette duplication en évitant de propager ces erreurs : @@ -357,7 +392,11 @@ npm install react-shallow-renderer --save-dev ##### Le rendu superficiel, une fausse bonne idée {/*please-reconsider-shallow-rendering*/} +<<<<<<< HEAD Le rendu superficiel dépend des détails d'implémentation de React et peut vous empêcher de faire de futures mises à jour. Nous vous conseillons de migrer vos tests vers [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) ou [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). +======= +Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -476,7 +515,11 @@ npx codemod@latest react/19/replace-reactdom-render #### Retirée : `ReactDOM.findDOMNode` {/*removed-reactdom-finddomnode*/} +<<<<<<< HEAD `ReactDOM.findDOMNode` était dépréciéee depuis [octobre 2018 (v16.6.0)](https://fr.legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode). +======= +`ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Nous retirons `findDOMNode` parce qu'il s'agit d'un échappatoire historique particulièrement lent à exécuter, fragile à refactorer, ne renvoyant que le premier enfant, et qui mélangeait les niveaux d'abstraction (apprenez-en davantage [ici](https://fr.legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). Vous pouvez remplacer `ReactDOM.findDOMNode` par des [refs DOM](/learn/manipulating-the-dom-with-refs) : @@ -564,7 +607,11 @@ Grâce à ce changement, les contenus de secours Suspense sont affichés plus t ### Builds UMD retirés {/*umd-builds-removed*/} +<<<<<<< HEAD UMD était largement utilisé par le passé, en tant que moyen pratique d'utiliser React sans étape de build. Il existe aujourd'hui des façons modernes de charger des modules en tant que scripts dans des documents HTML. À partir de React 19, React ne fournira plus de builds UMD afin de réduire la complexité de ses processus de tests et de livraison. +======= +UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Pour charger React 19 ay moyen d'une balise script, nous vous conseillons un CDN compatible ESM, tel qu'[esm.sh](https://esm.sh/). @@ -582,7 +629,11 @@ Cette version inclut des changements à la mécanique interne de React qui sont Au regard de notre [politique de versions](/community/versioning-policy#what-counts-as-a-breaking-change), ces mises à jour ne sont pas listées comme des ruptures de compatibilité ascendante, et nous ne fournissons pas de documentation liée à leur migration. Notre recommandation reste de retirer tout code basé sur ces détails internes. +<<<<<<< HEAD Pour refléter l'impact du recours à ces détails internes, nous avons renommé le suffixe `SECRET_INTERNALS` vers `_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`. +======= +To reflect the impact of using internals, we have renamed the `SECRET_INTERNALS` suffix to: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a À l'avenir, nous bloquerons de façon plus agressive l'accès aux détails internes de React pour en décourager l'utilisation et nous assurer que les utilisateurs ne seront pas bloqués sur leurs chemins de migration. @@ -746,6 +797,7 @@ const reducer = (state: State, action: Action) => state; ### Autres ruptures de compatibilité ascendante {/*other-breaking-changes*/} +<<<<<<< HEAD - **react-dom**: Erreur sur URL JavaScript dans src/href [#26507](https://github.com/facebook/react/pull/26507) - **react-dom**: Retrait de `errorInfo.digest` dans `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222) - **react-dom**: Retrait de `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397) @@ -753,6 +805,15 @@ const reducer = (state: State, action: Action) => state; - **react-dom**: Retrait de `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271) - **react-dom**: Retrait de `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271) - **react-is**: Retrait de méthodes dépréciées dans `react-is` [28224](https://github.com/facebook/react/pull/28224) +======= +- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507) +- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222) +- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397) +- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271) +- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271) +- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271) +- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Autres changements notables {/*other-notable-changes*/} @@ -763,7 +824,11 @@ const reducer = (state: State, action: Action) => state; - **react-dom**: Retire l'avertissement des Effets de layout lors du SSR [#26395](https://github.com/facebook/react/pull/26395) - **react-dom**: Avertit et évite les chaînes vides pour src/href (sauf sur balises d'ancres) [#28124](https://github.com/facebook/react/pull/28124) +<<<<<<< HEAD Nous publierons un changelog complet avec la version stable de React 19. +======= +For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index 46063b260..d27eadd5e 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -17,7 +17,11 @@ La semaine dernière nous avons organisé React Conf 2024, une conférence de de --- +<<<<<<< HEAD Lors de la React Conf 2024, nous avons annoncé [React 19 RC](/blog/2024/04/25/react-19), la [beta de la nouvelle architecture React Native](https://github.com/reactwg/react-native-new-architecture/discussions/189), et une sortie expérimentale du [React Compiler](/learn/react-compiler). La communauté est également montée sur scène pour annoncer [React Router v7](https://remix.run/blog/merging-remix-and-react-router), les [Composants Serveur universels](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) dans Expo Router, les Composants Serveur dans [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), et bien plus encore. +======= +At React Conf 2024, we announced the [React 19 RC](/blog/2024/12/05/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a L'intégralité des flux pour le [jour 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) et le [jour 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) est disponible en ligne. Dans cet article, nous récapitulons les présentations et annonces de l'événement. @@ -36,6 +40,7 @@ Pour en apprendre davantage, allez voir ces présentations de la communauté plu - [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) par [Amy Dutton](https://twitter.com/selfteachme) - [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) par [Evan Bacon](https://twitter.com/Baconbrix) +<<<<<<< HEAD Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et [Andrew Clark](https://twitter.com/acdlite) ont présenté de nouvelles fonctionnalités à venir dans React 19, et annoncé que React 19 RC était prête pour être testée en production. Découvrez toutes ces nouveautés dans [l'annonce de sortie de React 19](/blog/2024/04/25/react-19) et allez voir ces présentations qui explorent en détail les nouvelles fonctionnalités : - [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) par [Lydia Hallie](https://twitter.com/lydiahallie) @@ -44,6 +49,16 @@ Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et - [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) par [Aurora Walberg Scharff](https://twitter.com/aurorascharff) - [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) par [Dan Abramov](https://twitter.com/dan_abramov2) - [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) par [Kent C. Dodds](https://twitter.com/kentcdodds) +======= +Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/12/05/react-19), and see these talks for deep dives on the new features: + +- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) by [Lydia Hallie](https://twitter.com/lydiahallie) +- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff) +- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) by [Josh Story](https://twitter.com/joshcstory) +- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff) +- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://bsky.app/profile/danabra.mov) +- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Nous avons conclu la plénière avec [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya) et [Mofei Zhang](https://twitter.com/zmofei) qui ont annoncé que le React Compiler était désormais [*open source*](https://github.com/facebook/react/pull/29061) et ont mis à disposition une version expérimentale du React Compiler pour que chacun·e puisse l'essayer. @@ -112,7 +127,11 @@ Merci à [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) pou Merci à [Callstack](https://www.callstack.com/) d'avoir créé le site de la conférence, et à [Kadi Kraman](https://twitter.com/kadikraman) et l'équipe [Expo](https://expo.dev/) d'avoir créé l'appli mobile de la conférence. +<<<<<<< HEAD Merci à tous les sponsors qui ont rendu l'événement possible : [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/) et [Vercel](https://vercel.com). +======= +Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://rwsdk.com/), and [Vercel](https://vercel.com). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Merci à notre équipe AV pour les visuels, la scène et la sono, et au Westin Hotel pour nous avoir accueillis. diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index 303a95840..147f4ce3e 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -10,6 +10,14 @@ Le 21 octobre 2024 par [Lauren Tan](https://twitter.com/potetotes). --- + + +### React Compiler is now stable! {/*react-compiler-is-now-in-rc*/} + +Please see the [stable release blog post](/blog/2025/10/07/react-compiler-1) for details. + + + L'équipe React est heureuse de partager avec vous les annonces suivantes : @@ -64,11 +72,19 @@ Ou si vous utilisez Yarn : yarn add -D eslint-plugin-react-compiler@beta +<<<<<<< HEAD Après l'installation vous pouvez activer le *linter* en [l'ajoutant à votre configuration ESLint](/learn/react-compiler#installing-eslint-plugin-react-compiler). Utiliser ce *linter* vous aidera à identifier les infractions aux Règles de React, ce qui facilitera l'adoption du compilateur lorsqu'il sera officiellement prêt. +======= +After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler/installation#eslint-integration). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Rétrocompatibilité {/*backwards-compatibility*/} +<<<<<<< HEAD React Compiler produit du code qui s'appuie sur des API à l'exécution apparues avec React 19, mais le compilateur prend désormais également en charge les projets utilisant React 17 et 18. Si vous n'êtes pas encore sur React 19, la version beta vous permet d'essayer néanmoins React Compiler en spécifiant une `target` minimum dans votre configuration de compilation, et en ajoutant `react-compiler-runtime` comme dépendance. [Vous trouverez la documentation associée ici](/learn/react-compiler#using-react-compiler-with-react-17-or-18). +======= +React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/reference/react-compiler/configuration#react-17-18). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Utiliser React Compiler dans des bibliothèques {/*using-react-compiler-in-libraries*/} @@ -78,7 +94,11 @@ React Compiler peut donc être utilisé pour compiler des bibliothèques. Dans l Puisque votre code est pré-compilé, les utilisateur·rices de votre bibliothèque n'auront pas besoin d'activer le compilateur pour bénéficier de la mémoïsation automatique appliquée à votre bibliothèque. Si celle-ci s'adresse à des applications pas forcément encore sur React 19, pensez à préciser une `target` minimum et à ajouter `react-compiler-runtime` comme dépendance explicite de production. Ce module d'exécution utilisera une implémentation correcte des API selon la version de React de l'application, et émulera les API manquantes lorsque c'est nécessaire. +<<<<<<< HEAD [Vous trouverez la documentation associée ici](/learn/react-compiler#using-the-compiler-on-libraries). +======= +[You can find more docs on this here.](/reference/react-compiler/compiling-libraries) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Ouverture du groupe de travail React Compiler au public {/*opening-up-react-compiler-working-group-to-everyone*/} diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/12/05/react-19.md similarity index 83% rename from src/content/blog/2024/04/25/react-19.md rename to src/content/blog/2024/12/05/react-19.md index 44dac8fcd..cead3db0b 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -1,4 +1,5 @@ --- +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md title: "React 19 RC" author: L'équipe React date: 2024/04/25 @@ -6,16 +7,45 @@ description: React 19 RC est désormais disponible sur npm ! Dans cet article, --- Le 25 avril 2024 par [l'équipe React](/community/team) +======= +title: "React v19" +author: The React Team +date: 2024/12/05 +description: React 19 is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them. +--- + +December 05, 2024 by [The React Team](/community/team) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md --- + + +### React 19 is now stable! {/*react-19-is-now-stable*/} + +Additions since this post was originally shared with the React 19 RC in April: + +- **Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense). +- **React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis). + +_The date for this post has been updated to reflect the stable release date._ + + +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md React 19 RC est désormais disponible sur npm ! Dans notre [guide de migration pour React 19 RC](/blog/2024/04/25/react-19-upgrade-guide), nous avons fourni des instructions pas à pas pour mettre à jour votre appli vers React 19. Dans cet article, nous allons passer en revue les nouveautés de React 19, et voir comment vous pouvez les adopter. +======= +React v19 is now available on npm! + + + +In our [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md - [Quoi de neuf dans React 19](#whats-new-in-react-19) - [React Server Components](#react-server-components) @@ -48,7 +78,7 @@ function UpdateName({}) { if (error) { setError(error); return; - } + } redirect("/path"); }; @@ -81,7 +111,7 @@ function UpdateName({}) { if (error) { setError(error); return; - } + } redirect("/path"); }) }; @@ -165,7 +195,11 @@ const [error, submitAction, isPending] = useActionState( ); ``` +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md `useActionState` accepte une fonction (« l'Action ») et renvoie une Action enrobée à appeler. Ça fonctionne car les Actions peuvent être composées. Lorsque l'Action enrobée est appelée, `useActionState` ernverra le dernier résultat connu de l'Action en tant que `data`, et l'état en attente de l'Action en tant que `pending`. +======= +`useActionState` accepts a function (the "Action"), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, `useActionState` will return the last result of the Action as `data`, and the pending state of the Action as `pending`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md @@ -283,9 +317,13 @@ A component was suspended by an uncached promise. Creating promises inside a Cli +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md *(« Un composant est suspendu sur une promesse absente du cache. Nous ne prenons pas encore en charge les promesses créées dans un Composant Client ou dans un Hook, sauf au travers de bibliothèques ou frameworks compatibles avec Suspense. » — NdT)* Pour corriger ça, vous devez passer une promesse issue d'une bibliothèque ou d'un framework prenant en charge la mise en cache de promesses à destination de Suspense. Nous prévoyons de livrer à l'avenir des fonctionnalités qui faciliteront la mise en cache de promesses au sein du rendu. +======= +To fix, you need to pass a promise from a Suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md @@ -300,8 +338,13 @@ function Heading({children}) { return null; } +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md // Ça ne marcherait pas avec `useContext` // puisqu’on est derrière un retour anticipé. +======= + // This would not work with useContext + // because of the early return. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md const theme = use(ThemeContext); return (

    @@ -313,13 +356,46 @@ function Heading({children}) { La fonction `use` ne peut être appelée qu'au sein du rendu, comme pour les Hooks. Mais contrairement aux Hooks, `use` peut être appelée conditionnellement. Nous prévoyons d'ajouter à l'avenir des modes supplémentaires de consommation de ressources lors du rendu grâce à `use`. +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Pour en apprendre davantage, consultez la documentation de [`use`](/reference/react/use). +======= +## New React DOM Static APIs {/*new-react-dom-static-apis*/} + +We've added two new APIs to `react-dom/static` for static site generation: +- [`prerender`](/reference/react-dom/static/prerender) +- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) + +These new APIs improve on `renderToString` by waiting for data to load for static HTML generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. For example, in a Web Stream environment, you can prerender a React tree to static HTML with `prerender`: + +```js +import { prerender } from 'react-dom/static'; + +async function handler(request) { + const {prelude} = await prerender(, { + bootstrapScripts: ['/main.js'] + }); + return new Response(prelude, { + headers: { 'content-type': 'text/html' }, + }); +} +``` + +Prerender APIs will wait for all data to load before returning the static HTML stream. Streams can be converted to strings, or sent with a streaming response. They do not support streaming content as it loads, which is supported by the existing [React DOM server rendering APIs](/reference/react-dom/server). + +For more information, see [React DOM Static APIs](/reference/react-dom/static). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md ## React Server Components {/*react-server-components*/} ### Composants Serveur {/*server-components*/} +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Les Composants Serveur *(React Server Components, ou RSC — NdT)* sont un nouveau type de Composant qui font un rendu anticipé, avant le *bundling*, dans un environnement distinct de votre appli client et d'un serveur SSR. Cet environnement séparé est le « serveur » des Composants Serveur. Les Composants Serveur peuvent n'être exécutés qu'une seule fois au moment du build sur votre serveur de CI, ou peuvent l'être à chaque requête au sein d'un serveur web. +======= +Server Components are a new option that allows rendering components ahead of time, before bundling, in an environment separate from your client application or SSR server. This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server. + +React 19 includes all of the React Server Components features included from the Canary channel. This means libraries that ship with Server Components can now target React 19 as a peer dependency with a `react-server` [export condition](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) for use in frameworks that support the [Full-stack React Architecture](/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md React 19 inclut toutes les fonctionnalités de Composants Serveur issues du canal Canari. Ça signifie que les bibliothèques qui utilisent les Composants Serveur peuvent désormais cibler React 19 comme dépendance de pair avec une [condition d'export](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports) `react-server` afin d'être utilisables par des frameworks qui prennent en charge [l'architecture Full-stack React](/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). @@ -327,7 +403,11 @@ React 19 inclut toutes les fonctionnalités de Composants Serveur issues du cana #### Comment prendre en charge les Composants Serveur ? {/*how-do-i-build-support-for-server-components*/} +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Même si les Composants Serveur dans React 19 sont stables et ne casseront pas la compatibilité entre les versions majeures, les API sous-jacentes utilisées pour implémenter les Composants Serveur au sein d'un *bundler* ou framework ne suivent pas, elles, le versionnage sémantique et sont susceptibles de casser la compatibilité entre les versions mineures de React 19.x. +======= +While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md Pour prendre en charge les Composants Serveur dans un *bundler* ou framework, nous vous conseillons de figer React sur une version spécifique, ou d'utiliser une version Canari. Nous allons continuer à collaborer avec les *bundlers* et frameworks pour stabiliser les API utilisées pour implémenter les Composants Serveur à l'avenir. @@ -374,7 +454,11 @@ Les nouvelles fonctions composants n'ont plus besoin de `forwardRef`, et nous pu +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Les `refs` passées aux classes ne sont pas passées comme props puisqu'elles référencent l'instance du composant. +======= +`ref`s passed to classes are not passed as props since they reference the component instance. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md @@ -460,7 +544,7 @@ function App({children}) { {children} - ); + ); } ``` @@ -484,7 +568,11 @@ Nous permettons désormais le renvoi d'une fonction de nettoyage depuis les fonc /> ``` +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Lorsque le composant est démonté, React appellera la fonction de nettoyage renvoyée par la fonction de rappel de `ref`. Ça fonctionne pour les refs DOM, les refs des composants à base de classe, et même la fonction `useImperativeHandle`. +======= +When the component unmounts, React will call the cleanup function returned from the `ref` callback. This works for DOM refs, refs to class components, and `useImperativeHandle`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md @@ -514,7 +602,7 @@ function Search({deferredValue}) { // Au rendu initial la valeur est ''. // Un rendu ultérieur sera planifié avec `deferredValue`. const value = useDeferredValue(deferredValue, ''); - + return ( ); @@ -527,7 +615,11 @@ Pour en apprendre davantage, consultez la documentation de [`useDeferredValue`]( ### Prise en charge des métadonnées du document {/*support-for-metadata-tags*/} +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md En HTML, les balises de métadonnées du document telles que ``, `<link>` et `<meta>` ne peuvent être placées que dans la section `<head>` du document. Avec React, le composant qui décide de quelles métadonnées sont pertinentes pour l'appli est généralement bien éloigné de l'endroit où vous définissez `<head>`. Par le passé, ces éléments auraient nécessité une insertion manuelle dans un Effet, ou au travers de bibliothèques telles que [`react-helmet`](https://github.com/nfl/react-helmet), et auraient nécessité quelques précautions lors du rendu côté serveur d'une application React. +======= +In HTML, document metadata tags like `<title>`, `<link>`, and `<meta>` are reserved for placement in the `<head>` section of the document. In React, the component that decides what metadata is appropriate for the app may be very far from the place where you render the `<head>` or React does not render the `<head>` at all. In the past, these elements would need to be inserted manually in an effect, or by libraries like [`react-helmet`](https://github.com/nfl/react-helmet), and required careful handling when server rendering a React application. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md React 19 prend désormais nativement en charge le rendu de métadonnées du document depuis vos composants : @@ -690,7 +782,11 @@ Avec React 19, les balises inattendues dans `<head>` et `<body>` sont ignorées, ### Meilleur signalement d'erreurs {/*error-handling*/} +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Nous avons amélioré la gestion d'erreurs dans React 19 pour retirer les doublons et fournir des options pour gérer vous-même les erreurs interceptées ou non interceptées. Lorsque par exemple une erreur survenue lors d'un rendu est interceptée par un Périmètre d'Erreurs, auparavant React aurait levé l'erreur deux fois (une pour l'erreur originale, puis une autre après avoir échoué à retomber sur ses pieds), pour finir par appeler `console.error` avec des infos d'emplacement pour l'erreur. +======= +We improved error handling in React 19 to remove duplication and provide options for handling caught and uncaught errors. For example, when there's an error in render caught by an Error Boundary, previously React would throw the error twice (once for the original error, then again after failing to automatically recover), and then call `console.error` with info about where the error occurred. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md Ça donnait trois erreurs listées pour chaque erreur interceptée : @@ -765,8 +861,12 @@ Dans les précédentes versions, utiliser des éléments personnalisés dans Rea - **Côté serveur** : les props passées à un élément personnalisé produisent des attributs si leur type est primitif (ex. `string`, `number`) ou si la valeur est `true`. Les props de type non primitif tels qu’`object`, `symbol`, `function` ainsi que la valeur `false` sont ignorés. - **Côté client** : les props qui correspondent à une propriété de l'instance de l'élément personnalisé sont affectées à ces propriétés, à défaut de quoi elles produisent des attributs. +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Merci à [Joey Arhar](https://github.com/josepharhar) pour avoir piloté la conception et l'implémentation de la prise en charge des éléments personnalisés dans React. ## Comment mettre à jour {/*how-to-upgrade*/} -Consultez le [guide de migration React 19](/blog/2024/04/25/react-19-upgrade-guide) pour des instructions pas à pas et la liste complète des ruptures de compatibilité ascendante et des changements notables. \ No newline at end of file +Consultez le [guide de migration React 19](/blog/2024/04/25/react-19-upgrade-guide) pour des instructions pas à pas et la liste complète des ruptures de compatibilité ascendante et des changements notables. +======= +_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._ +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a:src/content/blog/2024/12/05/react-19.md diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md new file mode 100644 index 000000000..45c0090d5 --- /dev/null +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -0,0 +1,320 @@ +--- +title: "Sunsetting Create React App" +author: Matt Carroll and Ricky Hanlon +date: 2025/02/14 +description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. +--- + +February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm) + +--- + +<Intro> + +Today, we’re deprecating [Create React App](https://create-react-app.dev/) for new apps, and encouraging existing apps to migrate to a [framework](#how-to-migrate-to-a-framework), or to [migrate to a build tool](#how-to-migrate-to-a-build-tool) like Vite, Parcel, or RSBuild. + +We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by [building a React app from scratch](/learn/build-a-react-app-from-scratch). + +</Intro> + +----- + +When we released Create React App in 2016, there was no clear way to build a new React app. + +To create a React app, you had to install a bunch of tools and wire them up together yourself to support basic features like JSX, linting, and hot reloading. This was very tricky to do correctly, so the [community](https://github.com/react-boilerplate/react-boilerplate) [created](https://github.com/kriasoft/react-starter-kit) [boilerplates](https://github.com/petehunt/react-boilerplate) for [common](https://github.com/gaearon/react-hot-boilerplate) [setups](https://github.com/erikras/react-redux-universal-hot-example). However, boilerplates were difficult to update and fragmentation made it difficult for React to release new features. + +Create React App solved these problems by combining several tools into a single recommended configuration. This allowed apps a simple way to upgrade to new tooling features, and allowed the React team to deploy non-trivial tooling changes (Fast Refresh support, React Hooks lint rules) to the broadest possible audience. + +This model became so popular that there's an entire category of tools working this way today. + +## Deprecating Create React App {/*deprecating-create-react-app*/} + +Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks). + +However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App. + +Starting today, if you install a new app, you will see a deprecation warning: + +<ConsoleBlockMulti> +<ConsoleLogLine level="error"> + +create-react-app is deprecated. +{'\n\n'} +You can find a list of up-to-date React frameworks on react.dev +For more info see: react.dev/link/cra +{'\n\n'} +This error message will only be shown once per install. + +</ConsoleLogLine> +</ConsoleBlockMulti> + +We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19. + +## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/} +We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server. + +For existing apps, these guides will help you migrate to a client-only SPA: + +* [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app) +* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes). +* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/) + +## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/} + +If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild. + +For existing apps, these guides will help you migrate to a build tool: + +* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/) +* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/) +* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra) + +To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch). + +<DeepDive> + +#### Do I need a framework? {/*do-i-need-a-framework*/} + +Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework. + +Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself. + +However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild. + +</DeepDive> + +Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks). + +## Limitations of Build Tools {/*limitations-of-build-tools*/} + +Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build. + +For example, if you're building an internal admin tool, you can start with a landing page: + +```js +export default function App() { + return ( + <div> + <h1>Welcome to the Admin Tool!</h1> + </div> + ) +} +``` + +This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app. + +Most production apps need solutions to problems like routing, data fetching, and code splitting. + +### Routing {/*routing*/} + +Create React App does not include a specific routing solution. If you're just getting started, one option is to use `useState` to switch between routes. But doing this means that you can't share links to your app - every link would go to the same page - and structuring your app becomes difficult over time: + +```js +import {useState} from 'react'; + +import Home from './Home'; +import Dashboard from './Dashboard'; + +export default function App() { + // ❌ Routing in state does not create URLs + const [route, setRoute] = useState('home'); + return ( + <div> + {route === 'home' && <Home />} + {route === 'dashboard' && <Dashboard />} + </div> + ) +} +``` + +This is why most apps that use Create React App solve add routing with a routing library like [React Router](https://reactrouter.com/) or [Tanstack Router](https://tanstack.com/router/latest). With a routing library, you can add additional routes to the app, which provides opinions on the structure of your app, and allows you to start sharing links to routes. For example, with React Router you can define routes: + +```js +import {RouterProvider, createBrowserRouter} from 'react-router'; + +import Home from './Home'; +import Dashboard from './Dashboard'; + +// ✅ Each route has it's own URL +const router = createBrowserRouter([ + {path: '/', element: <Home />}, + {path: '/dashboard', element: <Dashboard />} +]); + +export default function App() { + return ( + <RouterProvider value={router} /> + ) +} +``` + +With this change, you can share a link to `/dashboard` and the app will navigate to the dashboard page . Once you have a routing library, you can add additional features like nested routes, route guards, and route transitions, which are difficult to implement without a routing library. + +There's a tradeoff being made here: the routing library adds complexity to the app, but it also adds features that are difficult to implement without it. + +### Data Fetching {/*data-fetching*/} + +Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data. + +But doing this means that the data is fetched after the component renders, which can cause network waterfalls. Network waterfalls are caused by fetching data when your app renders instead of in parallel while the code is downloading: + +```js +export default function Dashboard() { + const [data, setData] = useState(null); + + // ❌ Fetching data in a component causes network waterfalls + useEffect(() => { + fetch('/api/data') + .then(response => response.json()) + .then(data => setData(data)); + }, []); + + return ( + <div> + {data.map(item => <div key={item.id}>{item.name}</div>)} + </div> + ) +} +``` + +Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [TanStack Query](https://tanstack.com/query/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders. + +These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches: + +```js +export async function loader() { + const response = await fetch(`/api/data`); + const data = await response.json(); + return data; +} + +// ✅ Fetching data in parallel while the code is downloading +export default function Dashboard({loaderData}) { + return ( + <div> + {loaderData.map(item => <div key={item.id}>{item.name}</div>)} + </div> + ) +} +``` + +On initial load, the router can fetch the data immediately before the route is rendered. As the user navigates around the app, the router is able to fetch both the data and the route at the same time, parallelizing the fetches. This reduces the time it takes to see the content on the screen, and can improve the user experience. + +However, this requires correctly configuring the loaders in your app and trades off complexity for performance. + +### Code Splitting {/*code-splitting*/} + +Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all. + +This means your app is shipped as a single bundle: + +```txt +- bundle.js 75kb +``` + +But for ideal performance, you should "split" your code into separate bundles so the user only needs to download what they need. This decreases the time the user needs to wait to load your app, by only downloading the code they need to see the page they are on. + +```txt +- core.js 25kb +- home.js 25kb +- dashboard.js 25kb +``` + +One way to do code-splitting is with `React.lazy`. However, this means that the code is not fetched until the component renders, which can cause network waterfalls. A more optimal solution is to use a router feature that fetches the code in parallel while the code is downloading. For example, React Router provides a `lazy` option to specify that a route should be code split and optimize when it is loaded: + +```js +import Home from './Home'; +import Dashboard from './Dashboard'; + +// ✅ Routes are downloaded before rendering +const router = createBrowserRouter([ + {path: '/', lazy: () => import('./Home')}, + {path: '/dashboard', lazy: () => import('Dashboard')} +]); +``` + +Optimized code-splitting is tricky to get right, and it's easy to make mistakes that can cause the user to download more code than they need. It works best when integrated with your router and data loading solutions to maximize caching, parallelize fetches, and support ["import on interaction"](https://www.patterns.dev/vanilla/import-on-interaction) patterns. + +### And more... {/*and-more*/} + +These are just a few examples of the limitations of Create React App. + +Once you've integrated routing, data-fetching, and code splitting, you now also need to consider pending states, navigation interruptions, error messages to the user, and revalidation of the data. There are entire categories of problems that users need to solve like: + +<div style={{display: 'flex', width: '100%', justifyContent: 'space-around'}}> + <ul> + <li>Accessibility</li> + <li>Asset loading</li> + <li>Authentication</li> + <li>Caching</li> + </ul> + <ul> + <li>Error handling</li> + <li>Mutating data</li> + <li>Navigations</li> + <li>Optimistic updates</li> + </ul> + <ul> + <li>Progressive enhancement</li> + <li>Server-side rendering</li> + <li>Static site generation</li> + <li>Streaming</li> + </ul> +</div> + +All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence). + +Solving each of these problems individually in Create React App can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas users may not be familiar with. In order to solve these problems, users end up building their own bespoke solutions on top of Create React App, which was the problem Create React App originally tried to solve. + +## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/} + +Although you could solve all these pieces yourself in a build tool like Create React App, Vite, or Parcel, it is hard to do well. Just like when Create React App itself integrated several build tools together, you need a tool to integrate all of these features together to provide the best experience to users. + +This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks". + +Frameworks impose some opinions about structuring your app in order to provide a much better user experience, in the same way build tools impose some opinions to make tooling easier. This is why we started recommending frameworks like [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/), and [Expo](https://expo.dev/) for new projects. + +Frameworks provide the same getting started experience as Create React App, but also provide solutions to problems users need to solve anyway in real production apps. + +<DeepDive> + +#### Server rendering is optional {/*server-rendering-is-optional*/} + +The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app. + +In some cases, CSR is the right choice for a page, but many times it's not. Even if most of your app is client-side, there are often individual pages that could benefit from server rendering features like [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) or [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), for example a Terms of Service page, or documentation. + +Server rendering generally sends less JavaScript to the client, and a full HTML document which produces a faster [First Contentful Paint (FCP)](https://web.dev/articles/fcp) by reducing [Total Blocking Time (TBD)](https://web.dev/articles/tbt), which can also lower [Interaction to Next Paint (INP)](https://web.dev/articles/inp). This is why the [Chrome team has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance. + +There are tradeoffs to using a server, and it is not always the best option for every page. Generating pages on the server incurs additional cost and takes time to generate which can increase [Time to First Byte (TTFB)](https://web.dev/articles/ttfb). The best performing apps are able to pick the right rendering strategy on a per-page basis, based on the tradeoffs of each strategy. + +Frameworks provide the option to use a server on any page if you want to, but do not force you to use a server. This allows you to pick the right rendering strategy for each page in your app. + +#### What About Server Components {/*server-components*/} + +The frameworks we recommend also include support for React Server Components. + +Server Components help solve these problems by moving routing and data fetching to the server, and allowing code splitting to be done for client components based on the data you render, instead of just the route rendered, and reducing the amount of JavaScript shipped for the best possible [loading sequence](https://www.patterns.dev/vanilla/loading-sequence). + +Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app. + +See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) and [the docs](/reference/rsc/server-components) for more info. + +</DeepDive> + +<Note> + +#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/} + +A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO). + +While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen. + +This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance. + +</Note> + +--- + +_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._ + diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md new file mode 100644 index 000000000..9b6095f8b --- /dev/null +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -0,0 +1,14365 @@ +--- +title: "React Labs: View Transitions, Activity, and more" +author: Ricky Hanlon +date: 2025/04/23 +description: In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now. +--- + +April 23, 2025 by [Ricky Hanlon](https://twitter.com/rickhanlonii) + +--- + +<Intro> + +In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now. + +</Intro> + + +Today, we're excited to release documentation for two new experimental features that are ready for testing: + +- [View Transitions](#view-transitions) +- [Activity](#activity) + +We're also sharing updates on new features currently in development: +- [React Performance Tracks](#react-performance-tracks) +- [Compiler IDE Extension](#compiler-ide-extension) +- [Automatic Effect Dependencies](#automatic-effect-dependencies) +- [Fragment Refs](#fragment-refs) +- [Concurrent Stores](#concurrent-stores) + +--- + +# New Experimental Features {/*new-experimental-features*/} + +<Note> + +`<Activity />` has shipped in `react@19.2`. + +`<ViewTransition />` and `addTransitionType` are now available in `react@canary`. + +</Note> + +View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback. + +You can try them by upgrading React packages to the most recent experimental version: + +- `react@experimental` +- `react-dom@experimental` + +Read on to learn how to use these features in your app, or check out the newly published docs: + +- [`<ViewTransition>`](/reference/react/ViewTransition): A component that lets you activate an animation for a Transition. +- [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition. +- [`<Activity>`](/reference/react/Activity): A component that lets you hide and show parts of the UI. + +## View Transitions {/*view-transitions*/} + +React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers. + +To opt-in to animating an element, wrap it in the new `<ViewTransition>` component: + +```js +// "what" to animate. +<ViewTransition> + <div>animate me</div> +</ViewTransition> +``` + +This new component lets you declaratively define "what" to animate when an animation is activated. + +You can define "when" to animate by using one of these three triggers for a View Transition: + +```js +// "when" to animate. + +// Transitions +startTransition(() => setState(...)); + +// Deferred Values +const deferred = useDeferredValue(value); + +// Suspense +<Suspense fallback={<Fallback />}> + <div>Loading...</div> +</Suspense> +``` + +By default, these animations use the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (typically a smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, you can use `*` to change the default animation for all transitions: + +``` +// "how" to animate. +::view-transition-old(*) { + animation: 300ms ease-out fade-out; +} +::view-transition-new(*) { + animation: 300ms ease-in fade-in; +} +``` + +When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching to content—React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `<ViewTransition>` components to activate for the animation. The browser will then run the animation that's defined in CSS. + +If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs. + +In this post, let's take a look at a few examples of how to use View Transitions. + +We'll start with this app, which doesn't animate any of the following interactions: +- Click a video to view the details. +- Click "back" to go back to the feed. +- Type in the list to filter the videos. + +<Sandpack> + +```js src/App.js active +import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router'; + +export default function App() { + const {url} = useRouter(); + + // 🚩This version doesn't include any animations yet + return url === '/' ? <Home /> : <TalkDetails />; +} +``` + +```js src/Details.js +import { fetchVideo, fetchVideoDetails } from "./data"; +import { Thumbnail, VideoControls } from "./Videos"; +import { useRouter } from "./router"; +import Layout from "./Layout"; +import { use, Suspense } from "react"; +import { ChevronLeft } from "./Icons"; + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <Suspense fallback={<VideoInfoFallback />}> + <VideoInfo id={video.id} /> + </Suspense> + </div> + </Layout> + ); +} + +``` + +```js src/Home.js +import { Video } from "./Videos"; +import Layout from "./Layout"; +import { fetchVideos } from "./data"; +import { useId, useState, use } from "react"; +import { IconSearch } from "./Icons"; + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(""); + const foundVideos = filterVideos(videos, searchText); + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <div className="video-list"> + {foundVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {foundVideos.map((video) => ( + <Video key={video.id} video={video} /> + ))} + </div> + </div> + </Layout> + ); +} + +``` + +```js src/Icons.js +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js +import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {heading} + {isPending && <span className="loader"></span>} + </div> + </div> + + <div className="bottom"> + <div className="content">{children}</div> + </div> + </div> + ); +} +``` + +```js src/LikeButton.js +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js +import { useState } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Thumbnail({ video, children }) { + return ( + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js +import { + useState, + createContext, + use, + useTransition, + useLayoutEffect, + useEffect, +} from "react"; + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +export function Router({ children }) { + const [routerState, setRouterState] = useState({ + pendingNav: () => {}, + url: document.location.pathname, + }); + const [isPending, startTransition] = useTransition(); + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + function navigate(url) { + // Update router state in transition. + startTransition(() => { + go(url); + }); + } + + function navigateBack(url) { + // Update router state in transition. + startTransition(() => { + go(url); + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} +``` + +```css src/styles.css +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +<Note> + +#### View Transitions do not replace CSS and JS driven animations {/*view-transitions-do-not-replace-css-and-js-driven-animations*/} + +View Transitions are meant to be used for UI transitions such as navigation, expanding, opening, or re-ordering. They are not meant to replace all the animations in your app. + +In our example app above, notice that there are already animations when you click the "like" button and in the Suspense fallback glimmer. These are good use cases for CSS animations because they are animating a specific element. + +</Note> + +### Animating navigations {/*animating-navigations*/} + +Our app includes a Suspense-enabled router, with [page transitions already marked as Transitions](/reference/react/useTransition#building-a-suspense-enabled-router), which means navigations are performed with `startTransition`: + +```js +function navigate(url) { + startTransition(() => { + go(url); + }); +} +``` + +`startTransition` is a View Transition trigger, so we can add `<ViewTransition>` to animate between pages: + +```js +// "what" to animate +<ViewTransition key={url}> + {url === '/' ? <Home /> : <TalkDetails />} +</ViewTransition> +``` + +When the `url` changes, the `<ViewTransition>` and new route are rendered. Since the `<ViewTransition>` was updated inside of `startTransition`, the `<ViewTransition>` is activated for an animation. + + +By default, View Transitions include the browser default cross-fade animation. Adding this to our example, we now have a cross-fade whenever we navigate between pages: + +<Sandpack> + +```js src/App.js active +import {ViewTransition} from 'react'; import Details from './Details'; +import Home from './Home'; import {useRouter} from './router'; + +export default function App() { + const {url} = useRouter(); + + // Use ViewTransition to animate between pages. + // No additional CSS needed by default. + return ( + <ViewTransition> + {url === '/' ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js hidden +import { fetchVideo, fetchVideoDetails } from "./data"; +import { Thumbnail, VideoControls } from "./Videos"; +import { useRouter } from "./router"; +import Layout from "./Layout"; +import { use, Suspense } from "react"; +import { ChevronLeft } from "./Icons"; + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <Suspense fallback={<VideoInfoFallback />}> + <VideoInfo id={video.id} /> + </Suspense> + </div> + </Layout> + ); +} + +``` + +```js src/Home.js hidden +import { Video } from "./Videos"; +import Layout from "./Layout"; +import { fetchVideos } from "./data"; +import { useId, useState, use } from "react"; +import { IconSearch } from "./Icons"; + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(""); + const foundVideos = filterVideos(videos, searchText); + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <div className="video-list"> + {foundVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {foundVideos.map((video) => ( + <Video key={video.id} video={video} /> + ))} + </div> + </div> + </Layout> + ); +} + +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {heading} + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Thumbnail({ video, children }) { + return ( + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js +import {useState, createContext,use,useTransition,useLayoutEffect,useEffect} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + + function navigate(url) { + // Update router state in transition. + startTransition(() => { + go(url); + }); + } + + + + + const [routerState, setRouterState] = useState({ + pendingNav: () => {}, + url: document.location.pathname, + }); + + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + + function navigateBack(url) { + startTransition(() => { + go(url); + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +Since our router already updates the route using `startTransition`, this one line change to add `<ViewTransition>` activates with the default cross-fade animation. + +If you're curious how this works, see the docs for [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work) + +<Note> + +#### Opting out of `<ViewTransition>` animations {/*opting-out-of-viewtransition-animations*/} + +In this example, we're wrapping the root of the app in `<ViewTransition>` for simplicity, but this means that all transitions in the app will be animated, which can lead to unexpected animations. + +To fix, we're wrapping route children with `"none"` so each page can control its own animation: + +```js +// Layout.js +<ViewTransition default="none"> + {children} +</ViewTransition> +``` + +In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types. + +</Note> + +### Customizing animations {/*customizing-animations*/} + +By default, `<ViewTransition>` includes the default cross-fade from the browser. + +To customize animations, you can provide props to the `<ViewTransition>` component to specify which animations to use, based on [how the `<ViewTransition>` activates](/reference/react/ViewTransition#props). + +For example, we can slow down the `default` cross fade animation: + +```js +<ViewTransition default="slow-fade"> + <Home /> +</ViewTransition> +``` + +And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-class): + +```css +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +Now, the cross fade is slower: + +<Sandpack> + +```js src/App.js active +import { ViewTransition } from "react"; +import Details from "./Details"; +import Home from "./Home"; +import { useRouter } from "./router"; + +export default function App() { + const { url } = useRouter(); + + // Define a default animation of .slow-fade. + // See animations.css for the animation definition. + return ( + <ViewTransition default="slow-fade"> + {url === '/' ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js hidden +import { fetchVideo, fetchVideoDetails } from "./data"; +import { Thumbnail, VideoControls } from "./Videos"; +import { useRouter } from "./router"; +import Layout from "./Layout"; +import { use, Suspense } from "react"; +import { ChevronLeft } from "./Icons"; + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <Suspense fallback={<VideoInfoFallback />}> + <VideoInfo id={video.id} /> + </Suspense> + </div> + </Layout> + ); +} + +``` + +```js src/Home.js hidden +import { Video } from "./Videos"; +import Layout from "./Layout"; +import { fetchVideos } from "./data"; +import { useId, useState, use } from "react"; +import { IconSearch } from "./Icons"; + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(""); + const foundVideos = filterVideos(videos, searchText); + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <div className="video-list"> + {foundVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {foundVideos.map((video) => ( + <Video key={video.id} video={video} /> + ))} + </div> + </div> + </Layout> + ); +} + +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js hidden +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {heading} + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Thumbnail({ video, children }) { + return ( + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js hidden +import { + useState, + createContext, + use, + useTransition, + useLayoutEffect, + useEffect, +} from "react"; + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +export function Router({ children }) { + const [routerState, setRouterState] = useState({ + pendingNav: () => {}, + url: document.location.pathname, + }); + const [isPending, startTransition] = useTransition(); + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + function navigate(url) { + // Update router state in transition. + startTransition(() => { + go(url); + }); + } + + function navigateBack(url) { + // Update router state in transition. + startTransition(() => { + go(url); + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* Define .slow-fade using view transition classes */ +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +See [Styling View Transitions](/reference/react/ViewTransition#styling-view-transitions) for a full guide on styling `<ViewTransition>`. + +### Shared Element Transitions {/*shared-element-transitions*/} + +When two pages include the same element, often you want to animate it from one page to the next. + +To do this you can add a unique `name` to the `<ViewTransition>`: + +```js +<ViewTransition name={`video-${video.id}`}> + <Thumbnail video={video} /> +</ViewTransition> +``` + +Now the video thumbnail animates between the two pages: + +<Sandpack> + +```js src/App.js +import { ViewTransition } from "react"; +import Details from "./Details"; +import Home from "./Home"; +import { useRouter } from "./router"; + +export default function App() { + const { url } = useRouter(); + + // Keeping our default slow-fade. + // This allows the content not in the shared + // element transition to cross-fade. + return ( + <ViewTransition default="slow-fade"> + {url === "/" ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js hidden +import { fetchVideo, fetchVideoDetails } from "./data"; +import { Thumbnail, VideoControls } from "./Videos"; +import { useRouter } from "./router"; +import Layout from "./Layout"; +import { use, Suspense } from "react"; +import { ChevronLeft } from "./Icons"; + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <Suspense fallback={<VideoInfoFallback />}> + <VideoInfo id={video.id} /> + </Suspense> + </div> + </Layout> + ); +} + +``` + +```js src/Home.js hidden +import { Video } from "./Videos"; +import Layout from "./Layout"; +import { fetchVideos } from "./data"; +import { useId, useState, use } from "react"; +import { IconSearch } from "./Icons"; + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(""); + const foundVideos = filterVideos(videos, searchText); + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <div className="video-list"> + {foundVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {foundVideos.map((video) => ( + <Video key={video.id} video={video} /> + ))} + </div> + </div> + </Layout> + ); +} + +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js hidden +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {heading} + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js active +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + // This uses the default animation, no additional css needed. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js hidden +import { + useState, + createContext, + use, + useTransition, + useLayoutEffect, + useEffect, +} from "react"; + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +export function Router({ children }) { + const [routerState, setRouterState] = useState({ + pendingNav: () => {}, + url: document.location.pathname, + }); + const [isPending, startTransition] = useTransition(); + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + function navigate(url) { + // Update router state in transition. + startTransition(() => { + go(url); + }); + } + + function navigateBack(url) { + // Update router state in transition. + startTransition(() => { + go(url); + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* No additional animations needed */ + + + + + + + + + +/* Previously defined animations below */ + + + + + +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +By default, React automatically generates a unique `name` for each element activated for a transition (see [How does `<ViewTransition>` work](/reference/react/ViewTransition#how-does-viewtransition-work)). When React sees a transition where a `<ViewTransition>` with a `name` is removed and a new `<ViewTransition>` with the same `name` is added, it will activate a shared element transition. + +For more info, see the docs for [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element). + +### Animating based on cause {/*animating-based-on-cause*/} + +Sometimes, you may want elements to animate differently based on how it was triggered. For this use case, we've added a new API called `addTransitionType` to specify the cause of a transition: + +```js {4,11} +function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); +} +function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); +} +``` + +With transition types, you can provide custom animations via props to `<ViewTransition>`. Let's add a shared element transition to the header for "6 Videos" and "Back": + +```js {4,5} +<ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} +</ViewTransition> +``` + +Here we pass a `share` prop to define how to animate based on the transition type. When the share transition activates from `nav-forward`, the view transition class `slide-forward` is applied. When it's from `nav-back`, the `slide-back` animation is activated. Let's define these animations in CSS: + +```css +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: ... +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: ... +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: ... +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: ... +} +``` + +Now we can animate the header along with thumbnail based on navigation type: + +<Sandpack> + +```js src/App.js hidden +import { ViewTransition } from "react"; +import Details from "./Details"; +import Home from "./Home"; +import { useRouter } from "./router"; + +export default function App() { + const { url } = useRouter(); + + // Keeping our default slow-fade. + return ( + <ViewTransition default="slow-fade"> + {url === "/" ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js hidden +import { fetchVideo, fetchVideoDetails } from "./data"; +import { Thumbnail, VideoControls } from "./Videos"; +import { useRouter } from "./router"; +import Layout from "./Layout"; +import { use, Suspense } from "react"; +import { ChevronLeft } from "./Icons"; + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <Suspense fallback={<VideoInfoFallback />}> + <VideoInfo id={video.id} /> + </Suspense> + </div> + </Layout> + ); +} + +``` + +```js src/Home.js hidden +import { Video } from "./Videos"; +import Layout from "./Layout"; +import { fetchVideos } from "./data"; +import { useId, useState, use } from "react"; +import { IconSearch } from "./Icons"; + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(""); + const foundVideos = filterVideos(videos, searchText); + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <div className="video-list"> + {foundVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {foundVideos.map((video) => ( + <Video key={video.id} video={video} /> + ))} + </div> + </div> + </Layout> + ); +} + +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js active +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {/* Custom classes based on transition type. */} + <ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} + </ViewTransition> + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState, ViewTransition } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + // This uses the default animation, no additional css needed. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + + function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); + } + function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); + } + + + const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* Animations for view transition classed added by transition type */ +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left; +} + +/* New keyframes to support our animations above. */ +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-to-right { + to { + transform: translateX(50px); + } +} + +@keyframes slide-from-right { + from { + transform: translateX(50px); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-50px); + } +} + +@keyframes slide-from-left { + from { + transform: translateX(-50px); + } + to { + transform: translateX(0); + } +} + +/* Previously defined animations. */ + +/* Default .slow-fade. */ +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +### Animating Suspense Boundaries {/*animating-suspense-boundaries*/} + +Suspense will also activate View Transitions. + +To animate the fallback to content, we can wrap `Suspense` with `<ViewTranstion>`: + +```js +<ViewTransition> + <Suspense fallback={<VideoInfoFallback />}> + <VideoInfo /> + </Suspense> +</ViewTransition> +``` + +By adding this, the fallback will cross-fade into the content. Click a video and see the video info animate in: + +<Sandpack> + +```js src/App.js hidden +import { ViewTransition } from "react"; +import Details from "./Details"; +import Home from "./Home"; +import { useRouter } from "./router"; + +export default function App() { + const { url } = useRouter(); + + // Default slow-fade animation. + return ( + <ViewTransition default="slow-fade"> + {url === "/" ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js active +import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons"; + +function VideoDetails({ id }) { + // Cross-fade the fallback to content. + return ( + <ViewTransition default="slow-fade"> + <Suspense fallback={<VideoInfoFallback />}> + <VideoInfo id={id} /> + </Suspense> + </ViewTransition> + ); +} + +function VideoInfoFallback() { + return ( + <div> + <div className="fit fallback title"></div> + <div className="fit fallback description"></div> + </div> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <VideoDetails id={video.id} /> + </div> + </Layout> + ); +} + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <div> + <p className="fit info-title">{details.title}</p> + <p className="fit info-description">{details.description}</p> + </div> + ); +} +``` + +```js src/Home.js hidden +import { Video } from "./Videos"; +import Layout from "./Layout"; +import { fetchVideos } from "./data"; +import { useId, useState, use } from "react"; +import { IconSearch } from "./Icons"; + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(""); + const foundVideos = filterVideos(videos, searchText); + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <div className="video-list"> + {foundVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {foundVideos.map((video) => ( + <Video key={video.id} video={video} /> + ))} + </div> + </div> + </Layout> + ); +} + +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js hidden +import {ViewTransition} from 'react'; +import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {/* Custom classes based on transition type. */} + <ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} + </ViewTransition> + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState, ViewTransition } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + // This uses the default animation, no additional css needed. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js hidden +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); + function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); + } + function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); + } + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* Slide the fallback down */ +::view-transition-old(.slide-down) { + animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down; +} + +/* Slide the content up */ +::view-transition-new(.slide-up) { + animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up; +} + +/* Define the new keyframes */ +@keyframes slide-up { + from { + transform: translateY(10px); + } + to { + transform: translateY(0); + } +} + +@keyframes slide-down { + from { + transform: translateY(0); + } + to { + transform: translateY(10px); + } +} + +/* Previously defined animations below */ + +/* Animations for view transition classed added by transition type */ +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left; +} + +/* Keyframes to support our animations above. */ +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-to-right { + to { + transform: translateX(50px); + } +} + +@keyframes slide-from-right { + from { + transform: translateX(50px); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-50px); + } +} + +@keyframes slide-from-left { + from { + transform: translateX(-50px); + } + to { + transform: translateX(0); + } +} + +/* Default .slow-fade. */ +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +We can also provide custom animations using an `exit` on the fallback, and `enter` on the content: + +```js {3,8} +<Suspense + fallback={ + <ViewTransition exit="slide-down"> + <VideoInfoFallback /> + </ViewTransition> + } +> + <ViewTransition enter="slide-up"> + <VideoInfo id={id} /> + </ViewTransition> +</Suspense> +``` + +Here's how we'll define `slide-down` and `slide-up` with CSS: + +```css {1, 6} +::view-transition-old(.slide-down) { + /* Slide the fallback down */ + animation: ...; +} + +::view-transition-new(.slide-up) { + /* Slide the content up */ + animation: ...; +} +``` + +Now, the Suspense content replaces the fallback with a sliding animation: + +<Sandpack> + +```js src/App.js hidden +import { ViewTransition } from "react"; +import Details from "./Details"; +import Home from "./Home"; +import { useRouter } from "./router"; + +export default function App() { + const { url } = useRouter(); + + // Default slow-fade animation. + return ( + <ViewTransition default="slow-fade"> + {url === "/" ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js active +import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons"; + +function VideoDetails({ id }) { + return ( + <Suspense + fallback={ + // Animate the fallback down. + <ViewTransition exit="slide-down"> + <VideoInfoFallback /> + </ViewTransition> + } + > + {/* Animate the content up */} + <ViewTransition enter="slide-up"> + <VideoInfo id={id} /> + </ViewTransition> + </Suspense> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <VideoDetails id={video.id} /> + </div> + </Layout> + ); +} + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} +``` + +```js src/Home.js hidden +import { Video } from "./Videos"; +import Layout from "./Layout"; +import { fetchVideos } from "./data"; +import { useId, useState, use } from "react"; +import { IconSearch } from "./Icons"; + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(""); + const foundVideos = filterVideos(videos, searchText); + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <div className="video-list"> + {foundVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {foundVideos.map((video) => ( + <Video key={video.id} video={video} /> + ))} + </div> + </div> + </Layout> + ); +} + +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js hidden +import {ViewTransition} from 'react'; +import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {/* Custom classes based on transition type. */} + <ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} + </ViewTransition> + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState, ViewTransition } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + // This uses the default animation, no additional css needed. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js hidden +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); + function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); + } + function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); + } + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* Slide the fallback down */ +::view-transition-old(.slide-down) { + animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down; +} + +/* Slide the content up */ +::view-transition-new(.slide-up) { + animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up; +} + +/* Define the new keyframes */ +@keyframes slide-up { + from { + transform: translateY(10px); + } + to { + transform: translateY(0); + } +} + +@keyframes slide-down { + from { + transform: translateY(0); + } + to { + transform: translateY(10px); + } +} + +/* Previously defined animations below */ + +/* Animations for view transition classed added by transition type */ +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left; +} + +/* Keyframes to support our animations above. */ +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-to-right { + to { + transform: translateX(50px); + } +} + +@keyframes slide-from-right { + from { + transform: translateX(50px); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-50px); + } +} + +@keyframes slide-from-left { + from { + transform: translateX(-50px); + } + to { + transform: translateX(0); + } +} + +/* Default .slow-fade. */ +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + + +### Animating Lists {/*animating-lists*/} + +You can also use `<ViewTransition>` to animate lists of items as they re-order, like in a searchable list of items: + +```js {3,5} +<div className="videos"> + {filteredVideos.map((video) => ( + <ViewTransition key={video.id}> + <Video video={video} /> + </ViewTransition> + ))} +</div> +``` + +To activate the ViewTransition, we can use `useDeferredValue`: + +```js {2} +const [searchText, setSearchText] = useState(''); +const deferredSearchText = useDeferredValue(searchText); +const filteredVideos = filterVideos(videos, deferredSearchText); +``` + +Now the items animate as you type in the search bar: + +<Sandpack> + +```js src/App.js hidden +import { ViewTransition } from "react"; +import Details from "./Details"; +import Home from "./Home"; +import { useRouter } from "./router"; + +export default function App() { + const { url } = useRouter(); + + // Default slow-fade animation. + return ( + <ViewTransition default="slow-fade"> + {url === "/" ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js hidden +import { use, Suspense, ViewTransition } from "react"; +import { fetchVideo, fetchVideoDetails } from "./data"; +import { Thumbnail, VideoControls } from "./Videos"; +import { useRouter } from "./router"; +import Layout from "./Layout"; +import { ChevronLeft } from "./Icons"; + +function VideoDetails({id}) { + // Animate from Suspense fallback to content + return ( + <Suspense + fallback={ + // Animate the fallback down. + <ViewTransition exit="slide-down"> + <VideoInfoFallback /> + </ViewTransition> + } + > + {/* Animate the content up */} + <ViewTransition enter="slide-up"> + <VideoInfo id={id} /> + </ViewTransition> + </Suspense> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <VideoDetails id={video.id} /> + </div> + </Layout> + ); +} + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} +``` + +```js src/Home.js +import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; + +function SearchList({searchText, videos}) { + // Activate with useDeferredValue ("when") + const deferredSearchText = useDeferredValue(searchText); + const filteredVideos = filterVideos(videos, deferredSearchText); + return ( + <div className="video-list"> + <div className="videos"> + {filteredVideos.map((video) => ( + // Animate each item in list ("what") + <ViewTransition key={video.id}> + <Video video={video} /> + </ViewTransition> + ))} + </div> + {filteredVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + </div> + ); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(''); + + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <SearchList videos={videos} searchText={searchText} /> + </Layout> + ); +} + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js hidden +import {ViewTransition} from 'react'; +import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {/* Custom classes based on transition type. */} + <ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} + </ViewTransition> + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState, ViewTransition } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + // This uses the default animation, no additional css needed. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js hidden +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); + function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); + } + function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); + } + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* No additional animations needed */ + + + + + + + + + +/* Previously defined animations below */ + + + + + + +/* Slide animation for Suspense */ +::view-transition-old(.slide-down) { + animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down; +} + +::view-transition-new(.slide-up) { + animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up; +} + +/* Animations for view transition classed added by transition type */ +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left; +} + +/* Keyframes to support our animations above. */ +@keyframes slide-up { + from { + transform: translateY(10px); + } + to { + transform: translateY(0); + } +} + +@keyframes slide-down { + from { + transform: translateY(0); + } + to { + transform: translateY(10px); + } +} + +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-to-right { + to { + transform: translateX(50px); + } +} + +@keyframes slide-from-right { + from { + transform: translateX(50px); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-50px); + } +} + +@keyframes slide-from-left { + from { + transform: translateX(-50px); + } + to { + transform: translateX(0); + } +} + + +/* Default .slow-fade. */ +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +### Final result {/*final-result*/} + +By adding a few `<ViewTransition>` components and a few lines of CSS, we were able to add all the animations above into the final result. + +We're excited about View Transitions and think they will level up the apps you're able to build. They're ready to start trying today in the experimental channel of React releases. + +Let's remove the slow fade, and take a look at the final result: + +<Sandpack> + +```js src/App.js +import {ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router'; + +export default function App() { + const {url} = useRouter(); + + // Animate with a cross fade between pages. + return ( + <ViewTransition key={url}> + {url === '/' ? <Home /> : <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js +import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons"; + +function VideoDetails({id}) { + // Animate from Suspense fallback to content + return ( + <Suspense + fallback={ + // Animate the fallback down. + <ViewTransition exit="slide-down"> + <VideoInfoFallback /> + </ViewTransition> + } + > + {/* Animate the content up */} + <ViewTransition enter="slide-up"> + <VideoInfo id={id} /> + </ViewTransition> + </Suspense> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <VideoDetails id={video.id} /> + </div> + </Layout> + ); +} + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} +``` + +```js src/Home.js +import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; + +function SearchList({searchText, videos}) { + // Activate with useDeferredValue ("when") + const deferredSearchText = useDeferredValue(searchText); + const filteredVideos = filterVideos(videos, deferredSearchText); + return ( + <div className="video-list"> + <div className="videos"> + {filteredVideos.map((video) => ( + // Animate each item in list ("what") + <ViewTransition key={video.id}> + <Video video={video} /> + </ViewTransition> + ))} + </div> + {filteredVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + </div> + ); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(''); + + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <SearchList videos={videos} searchText={searchText} /> + </Layout> + ); +} + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {/* Custom classes based on transition type. */} + <ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} + </ViewTransition> + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + + + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); + } + function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); + } + + const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* Slide animations for Suspense the fallback down */ +::view-transition-old(.slide-down) { + animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down; +} + +::view-transition-new(.slide-up) { + animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up; +} + +/* Animations for view transition classed added by transition type */ +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left; +} + +/* Keyframes to support our animations above. */ +@keyframes slide-up { + from { + transform: translateY(10px); + } + to { + transform: translateY(0); + } +} + +@keyframes slide-down { + from { + transform: translateY(0); + } + to { + transform: translateY(10px); + } +} + +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-to-right { + to { + transform: translateX(50px); + } +} + +@keyframes slide-from-right { + from { + transform: translateX(50px); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-50px); + } +} + +@keyframes slide-from-left { + from { + transform: translateX(-50px); + } + to { + transform: translateX(0); + } +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +If you're curious to know more about how they work, check out [How Does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs. + +_For more background on how we built View Transitions, see: [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._ + +--- + +## Activity {/*activity*/} + +<Note> + +**`<Activity />` is now available in React’s Canary channel.** + +[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) + +</Note> + +In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS. + +We're now ready to share the API and how it works, so you can start testing it in experimental React versions. + +`<Activity>` is a new component to hide and show parts of the UI: + +```js [[1, 1, "'visible'"], [2, 1, "'hidden'"]] +<Activity mode={isVisible ? 'visible' : 'hidden'}> + <Page /> +</Activity> +``` + +When an Activity is <CodeStep step={1}>visible</CodeStep> it's rendered as normal. When an Activity is <CodeStep step={2}>hidden</CodeStep> it is unmounted, but will save its state and continue to render at a lower priority than anything visible on screen. + +You can use `Activity` to save state for parts of the UI the user isn't using, or pre-render parts that a user is likely to use next. + +Let's look at some examples improving the View Transition examples above. + +<Note> + +**Effects don’t mount when an Activity is hidden.** + +When an `<Activity>` is `hidden`, Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later. + +In practice, this works as expected if you have followed the [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side effects. + +</Note> + +### Restoring state with Activity {/*restoring-state-with-activity*/} + +When a user navigates away from a page, it's common to stop rendering the old page: + +```js {6,7} +function App() { + const { url } = useRouter(); + + return ( + <> + {url === '/' && <Home />} + {url !== '/' && <Details />} + </> + ); +} +``` + +However, this means if the user goes back to the old page, all of the previous state is lost. For example, if the `<Home />` page has an `<input>` field, when the user leaves the page the `<input>` is unmounted, and all of the text they had typed is lost. + +Activity allows you to keep the state around as the user changes pages, so when they come back they can resume where they left off. This is done by wrapping part of the tree in `<Activity>` and toggling the `mode`: + +```js {6-8} +function App() { + const { url } = useRouter(); + + return ( + <> + <Activity mode={url === '/' ? 'visible' : 'hidden'}> + <Home /> + </Activity> + {url !== '/' && <Details />} + </> + ); +} +``` + +With this change, we can improve on our View Transitions example above. Before, when you searched for a video, selected one, and returned, your search filter was lost. With Activity, your search filter is restored and you can pick up where you left off. + +Try searching for a video, selecting it, and clicking "back": + +<Sandpack> + +```js src/App.js +import { Activity, ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; + +export default function App() { + const { url } = useRouter(); + + return ( + // View Transitions know about Activity + <ViewTransition> + {/* Render Home in Activity so we don't lose state */} + <Activity mode={url === '/' ? 'visible' : 'hidden'}> + <Home /> + </Activity> + {url !== '/' && <Details />} + </ViewTransition> + ); +} +``` + +```js src/Details.js hidden +import { use, Suspense, ViewTransition } from "react"; +import { fetchVideo, fetchVideoDetails } from "./data"; +import { Thumbnail, VideoControls } from "./Videos"; +import { useRouter } from "./router"; +import Layout from "./Layout"; +import { ChevronLeft } from "./Icons"; + +function VideoDetails({id}) { + // Animate from Suspense fallback to content + return ( + <Suspense + fallback={ + // Animate the fallback down. + <ViewTransition exit="slide-down"> + <VideoInfoFallback /> + </ViewTransition> + } + > + {/* Animate the content up */} + <ViewTransition enter="slide-up"> + <VideoInfo id={id} /> + </ViewTransition> + </Suspense> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details() { + const { url, navigateBack } = useRouter(); + const videoId = url.split("/").pop(); + const video = use(fetchVideo(videoId)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <VideoDetails id={video.id} /> + </div> + </Layout> + ); +} + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} +``` + +```js src/Home.js hidden +import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; + +function SearchList({searchText, videos}) { + // Activate with useDeferredValue ("when") + const deferredSearchText = useDeferredValue(searchText); + const filteredVideos = filterVideos(videos, deferredSearchText); + return ( + <div className="video-list"> + {filteredVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {filteredVideos.map((video) => ( + // Animate each item in list ("what") + <ViewTransition key={video.id}> + <Video video={video} /> + </ViewTransition> + ))} + </div> + </div> + ); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(''); + + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <SearchList videos={videos} searchText={searchText} /> + </Layout> + ); +} + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js hidden +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {/* Custom classes based on transition type. */} + <ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} + </ViewTransition> + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState, ViewTransition } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + // This uses the default animation, no additional css needed. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js hidden +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); + function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); + } + function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); + } + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* No additional animations needed */ + + + + + + + + + +/* Previously defined animations below */ + + + + + + +/* Slide animations for Suspense the fallback down */ +::view-transition-old(.slide-down) { + animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down; +} + +::view-transition-new(.slide-up) { + animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up; +} + +/* Animations for view transition classed added by transition type */ +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left; +} + +/* Keyframes to support our animations above. */ +@keyframes slide-up { + from { + transform: translateY(10px); + } + to { + transform: translateY(0); + } +} + +@keyframes slide-down { + from { + transform: translateY(0); + } + to { + transform: translateY(10px); + } +} + +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-to-right { + to { + transform: translateX(50px); + } +} + +@keyframes slide-from-right { + from { + transform: translateX(50px); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-50px); + } +} + +@keyframes slide-from-left { + from { + transform: translateX(-50px); + } + to { + transform: translateX(0); + } +} + +/* Default .slow-fade. */ +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +### Pre-rendering with Activity {/*prerender-with-activity*/} + +Sometimes, you may want to prepare the next part of the UI a user is likely to use ahead of time, so it's ready by the time they are ready to use it. This is especially useful if the next route needs to suspend on data it needs to render, because you can help ensure the data is already fetched before the user navigates. + +For example, our app currently needs to suspend to load the data for each video when you select one. We can improve this by rendering all of the pages in a hidden `<Activity>` until the user navigates: + +```js {2,5,8} +<ViewTransition> + <Activity mode={url === '/' ? 'visible' : 'hidden'}> + <Home /> + </Activity> + <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}> + <Details id={id} /> + </Activity> + <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}> + <Details id={id} /> + </Activity> +<ViewTransition> +``` + +With this update, if the content on the next page has time to pre-render, it will animate in without the Suspense fallback. Click a video, and notice that the video title and description on the Details page render immediately, without a fallback: + +<Sandpack> + +```js src/App.js +import { Activity, ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'; + +export default function App() { + const { url } = useRouter(); + const videoId = url.split("/").pop(); + const videos = use(fetchVideos()); + + return ( + <ViewTransition> + {/* Render videos in Activity to pre-render them */} + {videos.map(({id}) => ( + <Activity key={id} mode={videoId === id ? 'visible' : 'hidden'}> + <Details id={id}/> + </Activity> + ))} + <Activity mode={url === '/' ? 'visible' : 'hidden'}> + <Home /> + </Activity> + </ViewTransition> + ); +} +``` + +```js src/Details.js +import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons"; + +function VideoDetails({id}) { + // Animate from Suspense fallback to content. + // If this is pre-rendered then the fallback + // won't need to show. + return ( + <Suspense + fallback={ + // Animate the fallback down. + <ViewTransition exit="slide-down"> + <VideoInfoFallback /> + </ViewTransition> + } + > + {/* Animate the content up */} + <ViewTransition enter="slide-up"> + <VideoInfo id={id} /> + </ViewTransition> + </Suspense> + ); +} + +function VideoInfoFallback() { + return ( + <> + <div className="fallback title"></div> + <div className="fallback description"></div> + </> + ); +} + +export default function Details({id}) { + const { url, navigateBack } = useRouter(); + const video = use(fetchVideo(id)); + + return ( + <Layout + heading={ + <div + className="fit back" + onClick={() => { + navigateBack("/"); + }} + > + <ChevronLeft /> Back + </div> + } + > + <div className="details"> + <Thumbnail video={video} large> + <VideoControls /> + </Thumbnail> + <VideoDetails id={video.id} /> + </div> + </Layout> + ); +} + +function VideoInfo({ id }) { + const details = use(fetchVideoDetails(id)); + return ( + <> + <p className="info-title">{details.title}</p> + <p className="info-description">{details.description}</p> + </> + ); +} +``` + +```js src/Home.js hidden +import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; + +function SearchList({searchText, videos}) { + // Activate with useDeferredValue ("when") + const deferredSearchText = useDeferredValue(searchText); + const filteredVideos = filterVideos(videos, deferredSearchText); + return ( + <div className="video-list"> + {filteredVideos.length === 0 && ( + <div className="no-results">No results</div> + )} + <div className="videos"> + {filteredVideos.map((video) => ( + // Animate each item in list ("what") + <ViewTransition key={video.id}> + <Video video={video} /> + </ViewTransition> + ))} + </div> + </div> + ); +} + +export default function Home() { + const videos = use(fetchVideos()); + const count = videos.length; + const [searchText, setSearchText] = useState(''); + + return ( + <Layout heading={<div className="fit">{count} Videos</div>}> + <SearchInput value={searchText} onChange={setSearchText} /> + <SearchList videos={videos} searchText={searchText} /> + </Layout> + ); +} + +function SearchInput({ value, onChange }) { + const id = useId(); + return ( + <form className="search" onSubmit={(e) => e.preventDefault()}> + <label htmlFor={id} className="sr-only"> + Search + </label> + <div className="search-input"> + <div className="search-icon"> + <IconSearch /> + </div> + <input + type="text" + id={id} + placeholder="Search" + value={value} + onChange={(e) => onChange(e.target.value)} + /> + </div> + </form> + ); +} + +function filterVideos(videos, query) { + const keywords = query + .toLowerCase() + .split(" ") + .filter((s) => s !== ""); + if (keywords.length === 0) { + return videos; + } + return videos.filter((video) => { + const words = (video.title + " " + video.description) + .toLowerCase() + .split(" "); + return keywords.every((kw) => words.some((w) => w.includes(kw))); + }); +} +``` + +```js src/Icons.js hidden +export function ChevronLeft() { + return ( + <svg + className="chevron-left" + xmlns="http://www.w3.org/2000/svg" + width="20" + height="20" + viewBox="0 0 20 20"> + <g fill="none" fillRule="evenodd" transform="translate(-446 -398)"> + <path + fill="currentColor" + fillRule="nonzero" + d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" + transform="translate(356.5 164.5)" + /> + <polygon points="446 418 466 418 466 398 446 398" /> + </g> + </svg> + ); +} + +export function PauseIcon() { + return ( + <svg + className="control-icon" + style={{padding: '4px'}} + width="100" + height="100" + viewBox="0 0 512 512" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M256 0C114.617 0 0 114.615 0 256s114.617 256 256 256 256-114.615 256-256S397.383 0 256 0zm-32 320c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128zm128 0c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16V192c0-8.836 7.164-16 16-16h32c8.836 0 16 7.164 16 16v128z" + fill="currentColor" + /> + </svg> + ); +} + +export function PlayIcon() { + return ( + <svg + className="control-icon" + width="100" + height="100" + viewBox="0 0 72 72" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + fillRule="evenodd" + clipRule="evenodd" + d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" + fill="currentColor" + /> + </svg> + ); +} +export function Heart({liked, animate}) { + return ( + <> + <svg + className="absolute overflow-visible" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <circle + className={`circle ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + cx="12" + cy="12" + r="11.5" + fill="transparent" + strokeWidth="0" + stroke="currentColor" + /> + </svg> + + <svg + className={`heart ${liked ? 'liked' : ''} ${animate ? 'animate' : ''}`} + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + {liked ? ( + <path + d="M12 23a.496.496 0 0 1-.26-.074C7.023 19.973 0 13.743 0 8.68c0-4.12 2.322-6.677 6.058-6.677 2.572 0 5.108 2.387 5.134 2.41l.808.771.808-.771C12.834 4.387 15.367 2 17.935 2 21.678 2 24 4.558 24 8.677c0 5.06-7.022 11.293-11.74 14.246a.496.496 0 0 1-.26.074V23z" + fill="currentColor" + /> + ) : ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" + fill="currentColor" + /> + )} + </svg> + </> + ); +} + +export function IconSearch(props) { + return ( + <svg width="1em" height="1em" viewBox="0 0 20 20"> + <path + d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" + stroke="currentColor" + fill="none" + strokeWidth="2" + fillRule="evenodd" + strokeLinecap="round" + strokeLinejoin="round"></path> + </svg> + ); +} +``` + +```js src/Layout.js hidden +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; + +export default function Page({ heading, children }) { + const isPending = useIsNavPending(); + return ( + <div className="page"> + <div className="top"> + <div className="top-nav"> + {/* Custom classes based on transition type. */} + <ViewTransition + name="nav" + share={{ + 'nav-forward': 'slide-forward', + 'nav-back': 'slide-back', + }}> + {heading} + </ViewTransition> + {isPending && <span className="loader"></span>} + </div> + </div> + {/* Opt-out of ViewTransition for the content. */} + {/* Content can define it's own ViewTransition. */} + <ViewTransition default="none"> + <div className="bottom"> + <div className="content">{children}</div> + </div> + </ViewTransition> + </div> + ); +} +``` + +```js src/LikeButton.js hidden +import {useState} from 'react'; +import {Heart} from './Icons'; + +// A hack since we don't actually have a backend. +// Unlike local state, this survives videos being filtered. +const likedVideos = new Set(); + +export default function LikeButton({video}) { + const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id)); + const [animate, setAnimate] = useState(false); + return ( + <button + className={`like-button ${isLiked && 'liked'}`} + aria-label={isLiked ? 'Unsave' : 'Save'} + onClick={() => { + const nextIsLiked = !isLiked; + if (nextIsLiked) { + likedVideos.add(video.id); + } else { + likedVideos.delete(video.id); + } + setAnimate(true); + setIsLiked(nextIsLiked); + }}> + <Heart liked={isLiked} animate={animate} /> + </button> + ); +} +``` + +```js src/Videos.js hidden +import { useState, ViewTransition } from "react"; +import LikeButton from "./LikeButton"; +import { useRouter } from "./router"; +import { PauseIcon, PlayIcon } from "./Icons"; +import { startTransition } from "react"; + +export function Thumbnail({ video, children }) { + // Add a name to animate with a shared element transition. + // This uses the default animation, no additional css needed. + return ( + <ViewTransition name={`video-${video.id}`}> + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + > + {children} + </div> + </ViewTransition> + ); +} + +export function VideoControls() { + const [isPlaying, setIsPlaying] = useState(false); + + return ( + <span + className="controls" + onClick={() => + startTransition(() => { + setIsPlaying((p) => !p); + }) + } + > + {isPlaying ? <PauseIcon /> : <PlayIcon />} + </span> + ); +} + +export function Video({ video }) { + const { navigate } = useRouter(); + + return ( + <div className="video"> + <div + className="link" + onClick={(e) => { + e.preventDefault(); + navigate(`/video/${video.id}`); + }} + > + <Thumbnail video={video}></Thumbnail> + + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + <LikeButton video={video} /> + </div> + ); +} +``` + + +```js src/data.js hidden +const videos = [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; + +let videosCache = new Map(); +let videoCache = new Map(); +let videoDetailsCache = new Map(); +const VIDEO_DELAY = 1; +const VIDEO_DETAILS_DELAY = 1000; +export function fetchVideos() { + if (videosCache.has(0)) { + return videosCache.get(0); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos); + }, VIDEO_DELAY); + }); + videosCache.set(0, promise); + return promise; +} + +export function fetchVideo(id) { + if (videoCache.has(id)) { + return videoCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DELAY); + }); + videoCache.set(id, promise); + return promise; +} + +export function fetchVideoDetails(id) { + if (videoDetailsCache.has(id)) { + return videoDetailsCache.get(id); + } + const promise = new Promise((resolve) => { + setTimeout(() => { + resolve(videos.find((video) => video.id === id)); + }, VIDEO_DETAILS_DELAY); + }); + videoDetailsCache.set(id, promise); + return promise; +} +``` + +```js src/router.js hidden +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; + +export function Router({ children }) { + const [isPending, startTransition] = useTransition(); + const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); + function navigate(url) { + startTransition(() => { + // Transition type for the cause "nav forward" + addTransitionType('nav-forward'); + go(url); + }); + } + function navigateBack(url) { + startTransition(() => { + // Transition type for the cause "nav backward" + addTransitionType('nav-back'); + go(url); + }); + } + + function go(url) { + setRouterState({ + url, + pendingNav() { + window.history.pushState({}, "", url); + }, + }); + } + + useEffect(() => { + function handlePopState() { + // This should not animate because restoration has to be synchronous. + // Even though it's a transition. + startTransition(() => { + setRouterState({ + url: document.location.pathname + document.location.search, + pendingNav() { + // Noop. URL has already updated. + }, + }); + }); + } + window.addEventListener("popstate", handlePopState); + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + const pendingNav = routerState.pendingNav; + useLayoutEffect(() => { + pendingNav(); + }, [pendingNav]); + + return ( + <RouterContext + value={{ + url: routerState.url, + navigate, + navigateBack, + isPending, + params: {}, + }} + > + {children} + </RouterContext> + ); +} + +const RouterContext = createContext({ url: "/", params: {} }); + +export function useRouter() { + return use(RouterContext); +} + +export function useIsNavPending() { + return use(RouterContext).isPending; +} + +``` + +```css src/styles.css hidden +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Optimistic Text; + src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +* { + box-sizing: border-box; +} + +html { + background-image: url(https://react.dev/images/meta-gradient-dark.png); + background-size: 100%; + background-position: -100%; + background-color: rgb(64 71 86); + background-repeat: no-repeat; + height: 100%; + width: 100%; +} + +body { + font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + padding: 10px 0 10px 0; + margin: 0; + display: flex; + justify-content: center; +} + +#root { + flex: 1 1; + height: auto; + background-color: #fff; + border-radius: 10px; + max-width: 450px; + min-height: 600px; + padding-bottom: 10px; +} + +h1 { + margin-top: 0; + font-size: 22px; +} + +h2 { + margin-top: 0; + font-size: 20px; +} + +h3 { + margin-top: 0; + font-size: 18px; +} + +h4 { + margin-top: 0; + font-size: 16px; +} + +h5 { + margin-top: 0; + font-size: 14px; +} + +h6 { + margin-top: 0; + font-size: 12px; +} + +code { + font-size: 1.2em; +} + +ul { + padding-inline-start: 20px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.absolute { + position: absolute; +} + +.overflow-visible { + overflow: visible; +} + +.visible { + overflow: visible; +} + +.fit { + width: fit-content; +} + + +/* Layout */ +.page { + display: flex; + flex-direction: column; + height: 100%; +} + +.top-hero { + height: 200px; + display: flex; + justify-content: center; + align-items: center; + background-image: conic-gradient( + from 90deg at -10% 100%, + #2b303b 0deg, + #2b303b 90deg, + #16181d 1turn + ); +} + +.bottom { + flex: 1; + overflow: auto; +} + +.top-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding: 0 12px; + top: 0; + width: 100%; + height: 44px; + color: #23272f; + font-weight: 700; + font-size: 20px; + z-index: 100; + cursor: default; +} + +.content { + padding: 0 12px; + margin-top: 4px; +} + + +.loader { + color: #23272f; + font-size: 3px; + width: 1em; + margin-right: 18px; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: loading-spinner 1.3s infinite linear; + animation-delay: 200ms; + transform: translateZ(0); +} + +@keyframes loading-spinner { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} + +/* LikeButton */ +.like-button { + outline-offset: 2px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + cursor: pointer; + border-radius: 9999px; + border: none; + outline: none 2px; + color: #5e687e; + background: none; +} + +.like-button:focus { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); +} + +.like-button:active { + color: #a6423a; + background-color: rgba(166, 66, 58, .05); + transform: scaleX(0.95) scaleY(0.95); +} + +.like-button:hover { + background-color: #f6f7f9; +} + +.like-button.liked { + color: #a6423a; +} + +/* Icons */ +@keyframes circle { + 0% { + transform: scale(0); + stroke-width: 16px; + } + + 50% { + transform: scale(.5); + stroke-width: 16px; + } + + to { + transform: scale(1); + stroke-width: 0; + } +} + +.circle { + color: rgba(166, 66, 58, .5); + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4,0,.2,1); +} + +.circle.liked.animate { + animation: circle .3s forwards; +} + +.heart { + width: 1.5rem; + height: 1.5rem; +} + +.heart.liked { + transform-origin: center; + transition-property: all; + transition-duration: .15s; + transition-timing-function: cubic-bezier(.4, 0, .2, 1); +} + +.heart.liked.animate { + animation: scale .35s ease-in-out forwards; +} + +.control-icon { + color: hsla(0, 0%, 100%, .5); + filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08)); +} + +.chevron-left { + margin-top: 2px; + rotate: 90deg; +} + + +/* Video */ +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; +} + +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} + +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} + +.video .info:hover { + text-decoration: underline; +} + +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} + +.video-description { + color: #5e687e; + font-size: 13px; +} + +/* Details */ +.details .thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 100%; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} + +.video-details-title { + margin-top: 8px; +} + +.video-details-speaker { + display: flex; + gap: 8px; + margin-top: 10px +} + +.back { + display: flex; + align-items: center; + margin-left: -5px; + cursor: pointer; +} + +.back:hover { + text-decoration: underline; +} + +.info-title { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.25; + margin: 8px 0 0 0 ; +} + +.info-description { + margin: 8px 0 0 0; +} + +.controls { + cursor: pointer; +} + +.fallback { + background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat; + background-size: 800px 104px; + display: block; + line-height: 1.25; + margin: 8px 0 0 0; + border-radius: 5px; + overflow: hidden; + + animation: 1s linear 1s infinite shimmer; + animation-delay: 300ms; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: shimmer; + animation-timing-function: linear; +} + + +.fallback.title { + width: 130px; + height: 30px; + +} + +.fallback.description { + width: 150px; + height: 21px; +} + +@keyframes shimmer { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + +.search { + margin-bottom: 10px; +} +.search-input { + width: 100%; + position: relative; +} + +.search-icon { + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + display: flex; + align-items: center; + padding-inline-start: 1rem; + pointer-events: none; + color: #99a1b3; +} + +.search-input input { + display: flex; + padding-inline-start: 2.75rem; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + text-align: start; + background-color: rgb(235 236 240); + outline: 2px solid transparent; + cursor: pointer; + border: none; + align-items: center; + color: rgb(35 39 47); + border-radius: 9999px; + vertical-align: middle; + font-size: 15px; +} + +.search-input input:hover, .search-input input:active { + background-color: rgb(235 236 240/ 0.8); + color: rgb(35 39 47/ 0.8); +} + +/* Home */ +.video-list { + position: relative; +} + +.video-list .videos { + display: flex; + flex-direction: column; + gap: 1rem; + overflow-y: auto; + height: 100%; +} +``` + + +```css src/animations.css +/* No additional animations needed */ + + + + + + + + + +/* Previously defined animations below */ + + + + + + +/* Slide animations for Suspense the fallback down */ +::view-transition-old(.slide-down) { + animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down; +} + +::view-transition-new(.slide-up) { + animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up; +} + +/* Animations for view transition classed added by transition type */ +::view-transition-old(.slide-forward) { + /* when sliding forward, the "old" page should slide out to left. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(.slide-forward) { + /* when sliding forward, the "new" page should slide in from right. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +::view-transition-old(.slide-back) { + /* when sliding back, the "old" page should slide out to right. */ + animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right; +} + +::view-transition-new(.slide-back) { + /* when sliding back, the "new" page should slide in from left. */ + animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in, + 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left; +} + +/* Keyframes to support our animations above. */ +@keyframes slide-up { + from { + transform: translateY(10px); + } + to { + transform: translateY(0); + } +} + +@keyframes slide-down { + from { + transform: translateY(0); + } + to { + transform: translateY(10px); + } +} + +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-to-right { + to { + transform: translateX(50px); + } +} + +@keyframes slide-from-right { + from { + transform: translateX(50px); + } + to { + transform: translateX(0); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-50px); + } +} + +@keyframes slide-from-left { + from { + transform: translateX(-50px); + } + to { + transform: translateX(0); + } +} + +/* Default .slow-fade. */ +::view-transition-old(.slow-fade) { + animation-duration: 500ms; +} + +::view-transition-new(.slow-fade) { + animation-duration: 500ms; +} +``` + +```js src/index.js hidden +import React, {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import './styles.css'; +import './animations.css'; + +import App from './App'; +import {Router} from './router'; + +const root = createRoot(document.getElementById('root')); +root.render( + <StrictMode> + <Router> + <App /> + </Router> + </StrictMode> +); +``` + +```json package.json hidden +{ + "dependencies": { + "react": "canary", + "react-dom": "canary", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + +</Sandpack> + +### Server-Side Rendering with Activity {/*server-side-rendering-with-activity*/} + +When using Activity on a page that uses server-side rendering (SSR), there are additional optimizations. + +If part of the page is rendered with `mode="hidden"`, then it will not be included in the SSR response. Instead, React will schedule a client render for the content inside Activity while the rest of the page hydrates, prioritizing the visible content on screen. + +For parts of the UI rendered with `mode="visible"`, React will de-prioritize hydration of content within Activity, similar to how Suspense content is hydrated at a lower priority. If the user interacts with the page, we'll prioritize hydration within the boundary if needed. + +These are advanced use cases, but they show the additional benefits considered with Activity. + +### Future modes for Activity {/*future-modes-for-activity*/} + +In the future, we may add more modes to Activity. + +For example, a common use case is rendering a modal, where the previous "inactive" page is visible behind the "active" modal view. The "hidden" mode does not work for this use case because it's not visible and not included in SSR. + +Instead, we're considering a new mode that would keep the content visible—and included in SSR—but keep it unmounted and de-prioritize updates. This mode may also need to "pause" DOM updates, since it can be distracting to see backgrounded content updating while a modal is open. + +Another mode we're considering for Activity is the ability to automatically destroy state for hidden Activities if there is too much memory being used. Since the component is already unmounted, it may be preferable to destroy state for the least recently used hidden parts of the app rather than consume too many resources. + +These are areas we're still exploring, and we'll share more as we make progress. For more information on what Activity includes today, [check out the docs](/reference/react/Activity). + +--- + +# Features in development {/*features-in-development*/} + +We're also developing features to help solve the common problems below. + +As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out. + +When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind. + +As these features progress, we'll announce them on the blog with docs included so you can try them out. + +## React Performance Tracks {/*react-performance-tracks*/} + +We're working on a new set of custom tracks to performance profilers using browser APIs that [allow adding custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to provide more information about the performance of your React app. + +This feature is still in progress, so we're not ready to publish docs to fully release it as an experimental feature yet. You can get a sneak preview when using an experimental version of React, which will automatically add the performance tracks to profiles: + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <picture > + <source srcset="/images/blog/react-labs-april-2025/perf_tracks.png" /> + <img className="w-full light-image" src="/images/blog/react-labs-april-2025/perf_tracks.webp" /> + </picture> + <picture > + <source srcset="/images/blog/react-labs-april-2025/perf_tracks_dark.png" /> + <img className="w-full dark-image" src="/images/blog/react-labs-april-2025/perf_tracks_dark.webp" /> + </picture> +</div> + +There are a few known issues we plan to address such as performance, and the scheduler track not always "connecting" work across Suspended trees, so it's not quite ready to try. We're also still collecting feedback from early adopters to improve the design and usability of the tracks. + +Once we solve those issues, we'll publish experimental docs and share that it's ready to try. + +--- + +## Automatic Effect Dependencies {/*automatic-effect-dependencies*/} + +When we released hooks, we had three motivations: + +- **Sharing code between components**: hooks replaced patterns like render props and higher-order components to allow you to reuse stateful logic without changing your component hierarchy. +- **Think in terms of function, not lifecycles**: hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods. +- **Support ahead-of-time compilation**: hooks were designed to support ahead-of-time compilation with less pitfalls causing unintentional de-optimizations caused by lifecycle methods, and limitations of classes. + +Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components. + +### Effects can be hard {/*effects-can-be-hard*/} + +Unfortunately, some hooks are still hard to think in terms of function instead of lifecycles. Effects specifically are still hard to understand and are the most common pain point we hear from developers. Last year, we spent a significant amount of time researching how Effects were used, and how those use cases could be simplified and easier to understand. + +We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles. + +We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does). + +Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective): + +```js +useEffect(() => { + // Your Effect connected to the room specified with roomId... + const connection = createConnection(serverUrl, roomId); + connection.connect(); + return () => { + // ...until it disconnected + connection.disconnect(); + }; +}, [roomId]); +``` + +Many users would read this code as "on mount, connect to the roomId. whenever `roomId` changes, disconnect to the old room and re-create the connection". However, this is thinking from the component's lifecycle perspective, which means you will need to think of every component lifecycle state to write the Effect correctly. This can be difficult, so it's understandable that Effects seem harder than class lifecycles when using the component perspective. + +### Effects without dependencies {/*effects-without-dependencies*/} + +Instead, it's better to think from the Effect's perspective. The Effect doesn't know about the component lifecycles. It only describes how to start synchronization and how to stop it. When users think of Effects in this way, their Effects tend to be easier to write, and more resilient to being started and stopped as many times as is needed. + +We spent some time researching why Effects are thought of from the component perspective, and we think one of the reasons is the dependency array. Since you have to write it, it's right there and in your face reminding you of what you're "reacting" to and baiting you into the mental model of 'do this when these values change'. + +When we released hooks, we knew we could make them easier to use with ahead-of-time compilation. With the React Compiler, you're now able to avoid writing `useCallback` and `useMemo` yourself in most cases. For Effects, the compiler can insert the dependencies for you: + +```js +useEffect(() => { + const connection = createConnection(serverUrl, roomId); + connection.connect(); + return () => { + connection.disconnect(); + }; +}); // compiler inserted dependencies. +``` + +With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else. + +Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles. + +--- + +## Compiler IDE Extension {/*compiler-ide-extension*/} + +Later in 2025 [we shared](/blog/2025/10/07/react-compiler-1) the first stable release of React Compiler, and we're continuing to invest in shipping more improvements. + +We've also begun exploring ways to use the React Compiler to provide information that can improve understanding and debugging your code. One idea we've started exploring is a new experimental LSP-based React IDE extension powered by React Compiler, similar to the extension used in [Lauren Tan's React Conf talk](https://conf2024.react.dev/talks/5). + +Our idea is that we can use the compiler's static analysis to provide more information, suggestions, and optimization opportunities directly in your IDE. For example, we can provide diagnostics for code breaking the Rules of React, hovers to show if components and hooks were optimized by the compiler, or a CodeLens to see [automatically inserted Effect dependencies](#automatic-effect-dependencies). + +The IDE extension is still an early exploration, but we'll share our progress in future updates. + +--- + +## Fragment Refs {/*fragment-refs*/} + +Many DOM APIs like those for event management, positioning, and focus are difficult to compose when writing with React. This often leads developers to reach for Effects, managing multiple Refs, by using APIs like `findDOMNode` (removed in React 19). + +We are exploring adding refs to Fragments that would point to a group of DOM elements, rather than just a single element. Our hope is that this will simplify managing multiple children and make it easier to write composable React code when calling DOM APIs. + +Fragment refs are still being researched. We'll share more when we're closer to having the final API finished. + +--- + +## Gesture Animations {/*gesture-animations*/} + +We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel. + +Gestures present new challenges for a few reasons: + +- **Gestures are continuous**: as you swipe the animation is tied to your finger placement time, rather than triggering and running to completion. +- **Gestures don't complete**: when you release your finger gesture animations can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go. +- **Gestures invert old and new**: while you're animating, you want the page you are animating from to stay "alive" and interactive. This inverts the browser View Transition model where the "old" state is a snapshot and the "new" state is the live DOM. + +We believe we’ve found an approach that works well and may introduce a new API for triggering gesture transitions. For now, we're focused on shipping `<ViewTransition>`, and will revisit gestures afterward. + +--- + +## Concurrent Stores {/*concurrent-stores*/} + +When we released React 18 with concurrent rendering, we also released `useSyncExternalStore` so external store libraries that did not use React state or context could [support concurrent rendering](https://github.com/reactwg/react-18/discussions/70) by forcing a synchronous render when the store is updated. + +Using `useSyncExternalStore` comes at a cost though, since it forces a bail out from concurrent features like transitions, and forces existing content to show Suspense fallbacks. + +Now that React 19 has shipped, we're revisiting this problem space to create a primitive to fully support concurrent external stores with the `use` API: + +```js +const value = use(store); +``` + +Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers. + +This research is still early. We'll share more, and what the new APIs will look like, when we're further along. + +--- + +_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._ diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md new file mode 100644 index 000000000..51c30f70a --- /dev/null +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -0,0 +1,339 @@ +--- +title: "React 19.2" +author: The React Team +date: 2025/10/01 +description: React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. +--- + +October 1, 2025 by [The React Team](/community/team) + +--- + +<Intro> + +React 19.2 is now available on npm! + +</Intro> + +This is our third release in the last year, following React 19 in December and React 19.1 in June. In this post, we'll give an overview of the new features in React 19.2, and highlight some notable changes. + +<InlineToc /> + +--- + +## New React Features {/*new-react-features*/} + +### `<Activity />` {/*activity*/} + +`<Activity>` lets you break your app into "activities" that can be controlled and prioritized. + +You can use Activity as an alternative to conditionally rendering parts of your app: + +```js +// Before +{isVisible && <Page />} + +// After +<Activity mode={isVisible ? 'visible' : 'hidden'}> + <Page /> +</Activity> +``` + +In React 19.2, Activity supports two modes: `visible` and `hidden`. + +- `hidden`: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. +- `visible`: shows the children, mounts effects, and allows updates to be processed normally. + +This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen. + +You can use Activity to render hidden parts of the app that a user is likely to navigate to next, or to save the state of parts the user navigates away from. This helps make navigations quicker by loading data, css, and images in the background, and allows back navigations to maintain state such as input fields. + +In the future, we plan to add more modes to Activity for different use cases. + +For examples on how to use Activity, check out the [Activity docs](/reference/react/Activity). + +--- + +### `useEffectEvent` {/*use-effect-event*/} + +One common pattern with `useEffect` is to notify the app code about some kind of "events" from an external system. For example, when a chat room gets connected, you might want to display a notification: + +```js {5,11} +function ChatRoom({ roomId, theme }) { + useEffect(() => { + const connection = createConnection(serverUrl, roomId); + connection.on('connected', () => { + showNotification('Connected!', theme); + }); + connection.connect(); + return () => { + connection.disconnect() + }; + }, [roomId, theme]); + // ... +``` + +The problem with the code above is that a change to any values used inside such an "event" will cause the surrounding Effect to re-run. For example, changing the `theme` will cause the chat room to reconnect. This makes sense for values related to the Effect logic itself, like `roomId`, but it doesn't make sense for `theme`. + +To solve this, most users just disable the lint rule and exclude the dependency. But that can lead to bugs since the linter can no longer help you keep the dependencies up to date if you need to update the Effect later. + +With `useEffectEvent`, you can split the "event" part of this logic out of the Effect that emits it: + +```js {2,3,4,9} +function ChatRoom({ roomId, theme }) { + const onConnected = useEffectEvent(() => { + showNotification('Connected!', theme); + }); + + useEffect(() => { + const connection = createConnection(serverUrl, roomId); + connection.on('connected', () => { + onConnected(); + }); + connection.connect(); + return () => connection.disconnect(); + }, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies) + // ... +``` + +Similar to DOM events, Effect Events always “see” the latest props and state. + +**Effect Events should _not_ be declared in the dependency array**. You'll need to upgrade to `eslint-plugin-react-hooks@latest` so that the linter doesn't try to insert them as dependencies. Note that Effect Events can only be declared in the same component or Hook as "their" Effect. These restrictions are verified by the linter. + +<Note> + +#### When to use `useEffectEvent` {/*when-to-use-useeffectevent*/} + +You should use `useEffectEvent` for functions that are conceptually "events" that happen to be fired from an Effect instead of a user event (that's what makes it an "Effect Event"). You don't need to wrap everything in `useEffectEvent`, or to use it just to silence the lint error, as this can lead to bugs. + +For a deep dive on how to think about Event Effects, see: [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects). + +</Note> + +--- + +### `cacheSignal` {/*cache-signal*/} + +<RSC> + +`cacheSignal` is only for use with [React Server Components](/reference/rsc/server-components). + +</RSC> + +`cacheSignal` allows you to know when the [`cache()`](/reference/react/cache) lifetime is over: + +``` +import {cache, cacheSignal} from 'react'; +const dedupedFetch = cache(fetch); + +async function Component() { + await dedupedFetch(url, { signal: cacheSignal() }); +} +``` + +This allows you to clean up or abort work when the result will no longer be used in the cache, such as: + +- React has successfully completed rendering +- The render was aborted +- The render has failed + +For more info, see the [`cacheSignal` docs](/reference/react/cacheSignal). + +--- + +### Performance Tracks {/*performance-tracks*/} + +React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to Chrome DevTools performance profiles to provide more information about the performance of your React app: + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <picture > + <source srcset="/images/blog/react-labs-april-2025/perf_tracks.png" /> + <img className="w-full light-image" src="/images/blog/react-labs-april-2025/perf_tracks.webp" /> + </picture> + <picture > + <source srcset="/images/blog/react-labs-april-2025/perf_tracks_dark.png" /> + <img className="w-full dark-image" src="/images/blog/react-labs-april-2025/perf_tracks_dark.webp" /> + </picture> +</div> + +The [React Performance Tracks docs](/reference/dev-tools/react-performance-tracks) explain everything included in the tracks, but here is a high-level overview. + +#### Scheduler ⚛ {/*scheduler-*/} + +The Scheduler track shows what React is working on for different priorities such as "blocking" for user interactions, or "transition" for updates inside startTransition. Inside each track, you will see the type of work being performed such as the event that scheduled an update, and when the render for that update happened. + +We also show information such as when an update is blocked waiting for a different priority, or when React is waiting for paint before continuing. The Scheduler track helps you understand how React splits your code into different priorities, and the order it completed the work. + +See the [Scheduler track](/reference/dev-tools/react-performance-tracks#scheduler) docs to see everything included. + +#### Components ⚛ {/*components-*/} + +The Components track shows the tree of components that React is working on either to render or run effects. Inside you'll see labels such as "Mount" for when children mount or effects are mounted, or "Blocked" for when rendering is blocked due to yielding to work outside React. + +The Components track helps you understand when components are rendered or run effects, and the time it takes to complete that work to help identify performance problems. + +See the [Components track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included. + +--- + +## New React DOM Features {/*new-react-dom-features*/} + +### Partial Pre-rendering {/*partial-pre-rendering*/} + +In 19.2 we're adding a new capability to pre-render part of the app ahead of time, and resume rendering it later. + +This feature is called "Partial Pre-rendering", and allows you to pre-render the static parts of your app and serve it from a CDN, and then resume rendering the shell to fill it in with dynamic content later. + +To pre-render an app to resume later, first call `prerender` with an `AbortController`: + +``` +const {prelude, postponed} = await prerender(<App />, { + signal: controller.signal, +}); + +// Save the postponed state for later +await savePostponedState(postponed); + +// Send prelude to client or CDN. +``` + +Then, you can return the `prelude` shell to the client, and later call `resume` to "resume" to a SSR stream: + +``` +const postponed = await getPostponedState(request); +const resumeStream = await resume(<App />, postponed); + +// Send stream to client. +``` + +Or you can call `resumeAndPrerender` to resume to get static HTML for SSG: + +``` +const postponedState = await getPostponedState(request); +const { prelude } = await resumeAndPrerender(<App />, postponedState); + +// Send complete HTML prelude to CDN. +``` + +For more info, see the docs for the new APIs: +- `react-dom/server` + - [`resume`](/reference/react-dom/server/resume): for Web Streams. + - [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) for Node Streams. +- `react-dom/static` + - [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) for Web Streams. + - [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) for Node Streams. + +Additionally, the prerender apis now return a `postpone` state to pass to the `resume` apis. + +--- + +## Notable Changes {/*notable-changes*/} + +### Batching Suspense Boundaries for SSR {/*batching-suspense-boundaries-for-ssr*/} + +We fixed a behavioral bug where Suspense boundaries would reveal differently depending on if they were rendered on the client or when streaming from server-side rendering. + +Starting in 19.2, React will batch reveals of server-rendered Suspense boundaries for a short time, to allow more content to be revealed together and align with the client-rendered behavior. + +<Diagram name="19_2_batching_before" height={162} width={1270} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a page rectangle showing a glimmer loading state with faded bars. The second panel shows the top half of the page revealed and highlighted in blue. The third panel shows the entire the page revealed and highlighted in blue."> + +Previously, during streaming server-side rendering, suspense content would immediately replace fallbacks. + +</Diagram> + +<Diagram name="19_2_batching_after" height={162} width={1270} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a page rectangle showing a glimmer loading state with faded bars. The second panel shows the same page. The third panel shows the entire the page revealed and highlighted in blue."> + +In React 19.2, suspense boundaries are batched for a small amount of time, to allow revealing more content together. + +</Diagram> + +This fix also prepares apps for supporting `<ViewTransition>` for Suspense during SSR. By revealing more content together, animations can run in larger batches of content, and avoid chaining animations of content that stream in close together. + +<Note> + +React uses heuristics to ensure throttling does not impact core web vitals and search ranking. + +For example, if the total page load time is approaching 2.5s (which is the time considered "good" for [LCP](https://web.dev/articles/lcp)), React will stop batching and reveal content immediately so that the throttling is not the reason to miss the metric. + +</Note> + +--- + +### SSR: Web Streams support for Node {/*ssr-web-streams-support-for-node*/} + +React 19.2 adds support for Web Streams for streaming SSR in Node.js: +- [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) is now available for Node.js +- [`prerender`](/reference/react-dom/static/prerender) is now available for Node.js + +As well as the new `resume` APIs: +- [`resume`](/reference/react-dom/server/resume) is available for Node.js. +- [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) is available for Node.js. + + +<Pitfall> + +#### Prefer Node Streams for server-side rendering in Node.js {/*prefer-node-streams-for-server-side-rendering-in-nodejs*/} + +In Node.js environments, we still highly recommend using the Node Streams APIs: + +- [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) +- [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) +- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) +- [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) + +This is because Node Streams are much faster than Web Streams in Node, and Web Streams do not support compression by default, leading to users accidentally missing the benefits of streaming. + +</Pitfall> + +--- + +### `eslint-plugin-react-hooks` v6 {/*eslint-plugin-react-hooks*/} + +We also published `eslint-plugin-react-hooks@latest` with flat config by default in the `recommended` preset, and opt-in for new React Compiler powered rules. + +To continue using the legacy config, you can change to `recommended-legacy`: + +```diff +- extends: ['plugin:react-hooks/recommended'] ++ extends: ['plugin:react-hooks/recommended-legacy'] +``` + +For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#recommended). + +Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). + +--- + +### Update the default `useId` prefix {/*update-the-default-useid-prefix*/} + +In 19.2, we're updating the default `useId` prefix from `:r:` (19.0.0) or `«r»` (19.1.0) to `_r_`. + +The original intent of using a special character that was not valid for CSS selectors was that it would be unlikely to collide with IDs written by users. However, to support View Transitions, we need to ensure that IDs generated by `useId` are valid for `view-transition-name` and XML 1.0 names. + +--- + +## Changelog {/*changelog*/} + +Other notable changes +- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/facebook/react/pull/32461) +- `react-dom`: Warn for using a React owned node as a Container if it also has text content [#32774](https://github.com/facebook/react/pull/32774) + +Notable bug fixes +- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/facebook/react/pull/33507) +- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/facebook/react/pull/32821) +- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/facebook/react/pull/34376) +- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/facebook/react/pull/33055) +- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/facebook/react/pull/32900) +- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/facebook/react/pull/34145) +- `react`: Improve component stacks in various places [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723) +- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/facebook/react/pull/33941) +- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/facebook/react/pull/34264) +- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/facebook/react/pull/33467) +- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/facebook/react/pull/34192) + +For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md). + + +--- + +_Thanks to [Ricky Hanlon](https://bsky.app/profile/ricky.fm) for [writing this post](https://www.youtube.com/shorts/T9X3YkgZRG0), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), and [Joe Savona](https://x.com/en_JS) for reviewing this post._ diff --git a/src/content/blog/2025/10/07/introducing-the-react-foundation.md b/src/content/blog/2025/10/07/introducing-the-react-foundation.md new file mode 100644 index 000000000..a9b922dbc --- /dev/null +++ b/src/content/blog/2025/10/07/introducing-the-react-foundation.md @@ -0,0 +1,67 @@ +--- +title: "Introducing the React Foundation" +author: Seth Webster, Matt Carroll, Joe Savona +date: 2025/10/07 +description: Today, we're announcing our plans to create the React Foundation a new technical governance structure +--- + +October 7, 2025 by [Seth Webster](https://x.com/sethwebster), [Matt Carroll](https://x.com/mattcarrollcode), [Joe Savona](https://x.com/en_JS), [Sophie Alpert](https://x.com/sophiebits) + +--- + + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem', marginLeft: '7rem', marginRight: '7rem' }}> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_logo.png" /> + <img className="w-full light-image" src="/images/blog/react-foundation/react_foundation_logo.webp" /> + </picture> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_logo_dark.png" /> + <img className="w-full dark-image" src="/images/blog/react-foundation/react_foundation_logo_dark.webp" /> + </picture> +</div> + +<Intro> + +Today, we're announcing our plans to create the React Foundation and a new technical governance structure. + +</Intro> + +--- + +We open sourced React over a decade ago to help developers build great user experiences. From its earliest days, React has received substantial contributions from contributors outside of Meta. Over time, the number of contributors and the scope of their contributions has grown significantly. What started out as a tool developed for Meta has expanded into a project that spans multiple companies with regular contributions from across the ecosystem. React has outgrown the confines of any one company. + +To better serve the React community, we are announcing our plans to move React and React Native from Meta to a new React Foundation. As a part of this change, we will also be implementing a new independent technical governance structure. We believe these changes will enable us to give React ecosystem projects more resources. + +## The React Foundation {/*the-react-foundation*/} + +We will make the React Foundation the new home for React, React Native, and some supporting projects like JSX. The React Foundation’s mission will be to support the React community and ecosystem. Once implemented, the React Foundation will + +* Maintain React’s infrastructure like GitHub, CI, and trademarks +* Organize React Conf +* Create initiatives to support the React ecosystem like financial support of ecosystem projects, issuing grants, and creating programs + +The React Foundation will be governed by a board of directors, with Seth Webster serving as the executive director. This board will direct funds and resources to support React’s development, community, and ecosystem. We believe that this is the best structure to ensure that the React Foundation is vendor-neutral and reflects the best interests of the community. + +The founding corporate members of the React Foundation will be Amazon, Callstack, Expo, Meta, Microsoft, Software Mansion, and Vercel. These companies have had a major impact on the React and React Native ecosystems and we are grateful for their support. We are excited to welcome even more members in the future. + +<div style={{display: 'flex', justifyContent: 'center', margin: '2rem'}}> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_member_logos.png" /> + <img className="w-full light-image" src="/images/blog/react-foundation/react_foundation_member_logos.webp" /> + </picture> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_member_logos_dark.png" /> + <img className="w-full dark-image" src="/images/blog/react-foundation/react_foundation_member_logos_dark.webp" /> + </picture> +</div> + +## React’s technical governance {/*reacts-technical-governance*/} + +We believe that React's technical direction should be set by the people who contribute to and maintain React. As React moves to a foundation, it is important that no single company or organization is overrepresented. To achieve this, we plan to define a new technical governance structure for React that is independent from the React Foundation. + +As a part of creating React’s new technical governance structure we will reach out to the community for feedback. Once finalized, we will share details in a future post. + +## Thank you {/*thank-you*/} + +React's incredible growth is thanks to the thousands of people, companies, and projects that have shaped React. The creation of the React Foundation is a testament to the strength and vibrancy of the React community. Together, the React Foundation and React’s new technical governance will ensure that React’s future is secure for years to come. diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md new file mode 100644 index 000000000..080f3586e --- /dev/null +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -0,0 +1,194 @@ +--- +title: "React Compiler v1.0" +author: Lauren Tan, Joe Savona, and Mofei Zhang +date: 2025/10/07 +description: We are releasing the compiler's first stable release today. + +--- + +Oct 7, 2025 by [Lauren Tan](https://x.com/potetotes), [Joe Savona](https://x.com/en_JS), and [Mofei Zhang](https://x.com/zmofei). + +--- + +<Intro> + +The React team is excited to share new updates: + +</Intro> + +1. React Compiler 1.0 is available today. +2. Compiler-powered lint rules ship in `eslint-plugin-react-hooks`'s `recommended` and `recommended-latest` preset. +3. We've published an incremental adoption guide, and partnered with Expo, Vite, and Next.js so new apps can start with the compiler enabled. + +--- + +We are releasing the compiler's first stable release today. React Compiler works on both React and React Native, and automatically optimizes components and hooks without requiring rewrites. The compiler has been battle tested on major apps at Meta and is fully production-ready. + +[React Compiler](/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler's [first beta](/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We're excited about the wins we've seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are excited to bring the compiler to more users in the React community. + +This release is the culmination of a huge and complex engineering effort spanning almost a decade. The React team's first exploration into compilers started with [Prepack](https://github.com/facebookarchive/prepack) in 2017. While this project was eventually shut down, there were many learnings that informed the team on the design of Hooks, which were designed with a future compiler in mind. In 2021, [Xuan Huang](https://x.com/Huxpro) demoed the [first iteration](https://www.youtube.com/watch?v=lGEMwh32soc) of a new take on React Compiler. + +Although this first version of the new React Compiler was eventually rewritten, the first prototype gave us increased confidence that this was a tractable problem, and the learnings that an alternative compiler architecture could precisely give us the memoization characteristics we wanted. [Joe Savona](https://x.com/en_JS), [Sathya Gunasekaran](https://x.com/_gsathya), [Mofei Zhang](https://x.com/zmofei), and [Lauren Tan](https://x.com/potetotes) worked through our first rewrite, moving the compiler's architecture into a Control Flow Graph (CFG) based High-Level Intermediate Representation (HIR). This paved the way for much more precise analysis and even type inference within React Compiler. Since then, many significant portions of the compiler have been rewritten, with each rewrite informed by our learnings from the previous attempt. And we have received significant help and contributions from many members of the [React team](/community/team) along the way. + +This stable release is our first of many. The compiler will continue to evolve and improve, and we expect to see it become a new foundation and era for the next decade and more of React. + +You can jump straight to the [quickstart](/learn/react-compiler), or read on for the highlights from React Conf 2025. + +<DeepDive> + +#### How does React Compiler work? {/*how-does-react-compiler-work*/} + +React Compiler is an optimizing compiler that optimizes components and hooks through automatic memoization. While it is implemented as a Babel plugin currently, the compiler is largely decoupled from Babel and lowers the Abstract Syntax Tree (AST) provided by Babel into its own novel HIR, and through multiple compiler passes, carefully understands data-flow and mutability of your React code. This allows the compiler to granularly memoize values used in rendering, including the ability to memoize conditionally, which is not possible through manual memoization. + +```js {8} +import { use } from 'react'; + +export default function ThemeProvider(props) { + if (!props.children) { + return null; + } + // The compiler can still memoize code after a conditional return + const theme = mergeTheme(props.theme, use(ThemeContext)); + return ( + <ThemeContext value={theme}> + {props.children} + </ThemeContext> + ); +} +``` +_See this example in the [React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCBAvgQGYwQYEDkMCAhnHowNwA6AdvwQAPHPgIATBNVZQANoWpQ+HNBD4EAKgAsEGBAAU6ANzSSYACix0sYAJRF+BAmmoFzAQisQbAOjha0WXEWPntgRycCFjxYdT45WV51Sgi4NTBCPB09AgBeAj0YAHMEbV0ES2swHyzygBoSMnMyvQBhNTxhPFtbJKdo2LcIpwAeFoR2vk6hQiNWWSgEXOBavQoAPmHI4C9ff0DghD4KLZGAenHJ6bxN5N7+ChA6kDS+ajQilHRsXEyATyw5GI+gWRTQfAA8lg8Ko+GBKDQ6AxGAAjVgohCyAC0WFB4KxLHYeCxaWwgQQMDO4jQGW4-H45nCyTOZ1JWECrBhagAshBJMgCDwQPNZEKHgQwJyae8EPCQVAwZDobC7FwnuAtBAAO4ASSmFL48zAKGksjIFCAA)_ + +In addition to automatic memoization, React Compiler also has validation passes that run on your React code. These passes encode the [Rules of React](/reference/rules), and uses the compiler's understanding of data-flow and mutability to provide diagnostics where the Rules of React are broken. These diagnostics often expose latent bugs hiding in React code, and are primarily surfaced through `eslint-plugin-react-hooks`. + +To learn more about how the compiler optimizes your code, visit the [Playground](https://playground.react.dev). + +</DeepDive> + +## Use React Compiler Today {/*use-react-compiler-today*/} +To install the compiler: + +npm +<TerminalBlock> +npm install --save-dev --save-exact babel-plugin-react-compiler@latest +</TerminalBlock> + +pnpm +<TerminalBlock> +pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest +</TerminalBlock> + +yarn +<TerminalBlock> +yarn add --dev --exact babel-plugin-react-compiler@latest +</TerminalBlock> + +As part of the stable release, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Compiler now supports optional chains and array indices as dependencies. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code. + +You can find more details on using the Compiler in [our docs](/learn/react-compiler). + +## What we're seeing in production {/*react-compiler-at-meta*/} +[The compiler has already shipped in apps like Meta Quest Store](https://youtu.be/lyEKhv8-3n0?t=3002). We've seen initial loads and cross-page navigations improve by up to 12%, while certain interactions are more than 2.5× faster. Memory usage stays neutral even with these wins. Although your mileage may vary, we recommend experimenting with the compiler in your app to see similar performance gains. + +## Backwards Compatibility {/*backwards-compatibility*/} +As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](/reference/react-compiler/target#targeting-react-17-or-18). + +## Enforce the Rules of React with compiler-powered linting {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} +React Compiler includes an ESLint rule that helps identify code that breaks the [Rules of React](/reference/rules). The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today. + +If you have already installed `eslint-plugin-react-compiler`, you can now remove it and use `eslint-plugin-react-hooks@latest`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! + +To install: + +npm +<TerminalBlock> +npm install --save-dev eslint-plugin-react-hooks@latest +</TerminalBlock> + +pnpm +<TerminalBlock> +pnpm add --save-dev eslint-plugin-react-hooks@latest +</TerminalBlock> + +yarn +<TerminalBlock> +yarn add --dev eslint-plugin-react-hooks@latest +</TerminalBlock> + +```js {6} +// eslint.config.js (Flat Config) +import reactHooks from 'eslint-plugin-react-hooks'; +import { defineConfig } from 'eslint/config'; + +export default defineConfig([ + reactHooks.configs.flat.recommended, +]); +``` + +```js {3} +// eslintrc.json (Legacy Config) +{ + "extends": ["plugin:react-hooks/recommended"], + // ... +} +``` + +To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md) for more instructions. Here are a few examples we featured at React Conf: + +- Catching `setState` patterns that cause render loops with [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render). +- Flagging expensive work inside effects via [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect). +- Preventing unsafe ref access during render with [`refs`](/reference/eslint-plugin-react-hooks/lints/refs). + +## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} +By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written — and as noted above, the compiler can memoize even in cases where `useMemo`/`useCallback` cannot be used, such as after an early return. + +However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change. + +For new code, we recommend relying on the compiler for memoization and using `useMemo`/`useCallback` where needed to achieve precise control. + +For existing code, we recommend either leaving existing memoization in place (removing it can change compilation output) or carefully testing before removing the memoization. + +## New apps should use React Compiler {/*new-apps-should-use-react-compiler*/} +We have partnered with the Expo, Vite, and Next.js teams to add the compiler to the new app experience. + +[Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) and up has the compiler enabled by default, so new apps will automatically be able to take advantage of the compiler from the start. + +<TerminalBlock> +npx create-expo-app@latest +</TerminalBlock> + +[Vite](https://vite.dev/guide/) and [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) users can choose the compiler enabled templates in `create-vite` and `create-next-app`. + +<TerminalBlock> +npm create vite@latest +</TerminalBlock> + +<br /> + +<TerminalBlock> +npx create-next-app@latest +</TerminalBlock> + +## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/} +If you're maintaining an existing application, you can roll out the compiler at your own pace. We published a step-by-step [incremental adoption guide](/learn/react-compiler/incremental-adoption) that covers gating strategies, compatibility checks, and rollout tooling so you can enable the compiler with confidence. + +## swc support (experimental) {/*swc-support-experimental*/} +React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild. + +In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler). + +We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance. + +Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](/learn/react-compiler/installation#vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate. + +## Upgrading React Compiler {/*upgrading-react-compiler*/} +React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise. + +However, because product code may sometimes break the [rules of React](/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a `useEffect` somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that `useEffect`. While we encourage [useEffect only for synchronization](/learn/synchronizing-with-effects), your codebase may have `useEffect`s that cover other use cases, such as effects that needs to only run in response to specific values changing. + +In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues. + +If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `1.0.0`) rather than a SemVer range (eg `^1.0.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected. + +--- + +Thanks to [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev), and [Dan Abramov](https://bsky.app/profile/danabra.mov) for reviewing and editing this post. diff --git a/src/content/blog/2025/10/16/react-conf-2025-recap.md b/src/content/blog/2025/10/16/react-conf-2025-recap.md new file mode 100644 index 000000000..8476b02aa --- /dev/null +++ b/src/content/blog/2025/10/16/react-conf-2025-recap.md @@ -0,0 +1,133 @@ +--- +title: "React Conf 2025 Recap" +author: Matt Carroll and Ricky Hanlon +date: 2025/10/16 +description: Last week we hosted React Conf 2025, in this post, we summarize the talks and announcements from the event... +--- + +Oct 16, 2025 by [Matt Carroll](https://x.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm) + +--- + +<Intro> + +Last week we hosted React Conf 2025 where we announced the [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) and showcased new features coming to React and React Native. + +</Intro> + +--- + +React Conf 2025 was held on October 7-8, 2025, in Henderson, Nevada. + +The entire [day 1](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s) and [day 2](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s) streams are available online, and you can view photos from the event [here](https://conf.react.dev/photos). + +In this post, we'll summarize the talks and announcements from the event. + + +## Day 1 Keynote {/*day-1-keynote*/} + +_Watch the full day 1 stream [here.](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=1067s)_ + +In the day 1 keynote, Joe Savona shared the updates from the team and community since the last React Conf and highlights from React 19.0 and 19.1. + +Mofei Zhang highlighted the new features in React 19.2 including: +* [`<Activity />`](https://react.dev/reference/react/Activity) — a new component to manage visibility. +* [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) to fire events from Effects. +* [Performance Tracks](https://react.dev/reference/dev-tools/react-performance-tracks) — a new profiling tool in DevTools. +* [Partial Pre-Rendering](https://react.dev/blog/2025/10/01/react-19-2#partial-pre-rendering) to pre-render part of an app ahead of time, and resume rendering it later. + +Jack Pope announced new features in Canary including: + +* [`<ViewTransition />`](https://react.dev/reference/react/ViewTransition) — a new component to animate page transitions. +* [Fragment Refs](https://react.dev/reference/react/Fragment#fragmentinstance) — a new way to interact with the DOM nodes wrapped by a Fragment. + +Lauren Tan announced [React Compiler v1.0](https://react.dev/blog/2025/10/07/react-compiler-1) and recommended all apps use React Compiler for benefits like: +* [Automatic memoization](/learn/react-compiler/introduction#what-does-react-compiler-do) that understands React code. +* [New lint rules](/learn/react-compiler/installation#eslint-integration) powered by React Compiler to teach best practices. +* [Default support](/learn/react-compiler/installation#basic-setup) for new apps in Vite, Next.js, and Expo. +* [Migration guides](/learn/react-compiler/incremental-adoption) for existing apps migrating to React Compiler. + +Finally, Seth Webster announced the [React Foundation](/blog/2025/10/07/introducing-the-react-foundation) to steward React's open source development and community. + +Watch day 1 here: + +<YouTubeIframe src="https://www.youtube.com/embed/zyVRg2QR6LA?si=z-8t_xCc12HwGJH_&t=1067s" /> + +## Day 2 Keynote {/*day-2-keynote*/} + +_Watch the full day 2 stream [here.](https://www.youtube.com/watch?v=p9OcztRyDl0&t=2299s)_ + +Jorge Cohen and Nicola Corti kicked off day 2 highlighting React Native’s incredible growth with 4M weekly downloads (100% growth YoY), and some notable app migrations from Shopify, Zalando, and HelloFresh, award-winning apps like RISE, RUNNA, and Partyful, and AI apps from Mistral, Replit, and v0. + +Riccardo Cipolleschi shared two major announcements for React Native: +- [React Native 0.82 will be New Architecture only](https://reactnative.dev/blog/2025/10/08/react-native-0.82#new-architecture-only) +- [Experimental Hermes V1 support](https://reactnative.dev/blog/2025/10/08/react-native-0.82#experimental-hermes-v1) + +Ruben Norte and Alex Hunt finished out the keynote by announcing: +- [New web-aligned DOM APIs](https://reactnative.dev/blog/2025/10/08/react-native-0.82#dom-node-apis) for improved compatibility with React on the web. +- [New Performance APIs](https://reactnative.dev/blog/2025/10/08/react-native-0.82#web-performance-apis-canary) with a new network panel and desktop app. + +Watch day 2 here: + +<YouTubeIframe src="https://www.youtube.com/embed/p9OcztRyDl0?si=qPTHftsUE07cjZpS&t=2299s" /> + + +## React team talks {/*react-team-talks*/} + +Throughout the conference, there were talks from the React team including: +* [Async React Part I](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=10907s) and [Part II](https://www.youtube.com/watch?v=p9OcztRyDl0&t=29073s) [(Ricky Hanlon)](https://x.com/rickhanlonii) showed what's possible using the last 10 years of innovation. +* [Exploring React Performance](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=20274s) [(Joe Savona)](https://x.com/en_js) showed the results of our React performance research. +* [Reimagining Lists in React Native](https://www.youtube.com/watch?v=p9OcztRyDl0&t=10382s) [(Luna Wei)](https://x.com/lunaleaps) introduced Virtual View, a new primitive for lists that manages visibility with mode-based rendering (hidden/pre-render/visible). +* [Profiling with React Performance tracks](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=8276s) [(Ruslan Lesiutin)](https://x.com/ruslanlesiutin) showed how to use the new React Performance Tracks to debug performance issues and build great apps. +* [React Strict DOM](https://www.youtube.com/watch?v=p9OcztRyDl0&t=9026s) [(Nicolas Gallagher)](https://nicolasgallagher.com/) talked about Meta's approach to using web code on native. +* [View Transitions and Activity](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=4870s) [(Chance Strickland)](https://x.com/chancethedev) — Chance worked with the React team to showcase how to use `<Activity />` and `<ViewTransition />` to build fast, native-feeling animations. +* [In case you missed the memo](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=9525s) [(Cody Olsen)](https://bsky.app/profile/codey.bsky.social) - Cody worked with the React team to adopt the Compiler at Sanity Studio, and shared how it went. +## React framework talks {/*react-framework-talks*/} + +The second half of day 2 had a series of talks from React Framework teams including: + +* [React Native, Amplified](https://www.youtube.com/watch?v=p9OcztRyDl0&t=5737s) by [Giovanni Laquidara](https://x.com/giolaq) and [Eric Fahsl](https://x.com/efahsl). +* [React Everywhere: Bringing React Into Native Apps](https://www.youtube.com/watch?v=p9OcztRyDl0&t=18213s) by [Mike Grabowski](https://x.com/grabbou). +* [How Parcel Bundles React Server Components](https://www.youtube.com/watch?v=p9OcztRyDl0&t=19538s) by [Devon Govett](https://x.com/devonovett). +* [Designing Page Transitions](https://www.youtube.com/watch?v=p9OcztRyDl0&t=20640s) by [Delba de Oliveira](https://x.com/delba_oliveira). +* [Build Fast, Deploy Faster — Expo in 2025](https://www.youtube.com/watch?v=p9OcztRyDl0&t=21350s) by [Evan Bacon](https://x.com/baconbrix). +* [The React Router's take on RSC](https://www.youtube.com/watch?v=p9OcztRyDl0&t=22367s) by [Kent C. Dodds](https://x.com/kentcdodds). +* [RedwoodSDK: Web Standards Meet Full-Stack React](https://www.youtube.com/watch?v=p9OcztRyDl0&t=24992s) by [Peter Pistorius](https://x.com/appfactory) and [Aurora Scharff](https://x.com/aurorascharff). +* [TanStack Start](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26065s) by [Tanner Linsley](https://x.com/tannerlinsley). + +## Q&A {/*q-and-a*/} +There were three Q&A panels during the conference: + +* [React Team at Meta Q&A](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=26304s) hosted by [Shruti Kapoor](https://x.com/shrutikapoor08) +* [React Frameworks Q&A](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26812s) hosted by [Jack Herrington](https://x.com/jherr) +* [React and AI Panel](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=18741s) hosted by [Lee Robinson](https://x.com/leerob) + +## And more... {/*and-more*/} + +We also heard talks from the community including: +* [Building an MCP Server](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24204s) by [James Swinton](https://x.com/JamesSwintonDev) ([AG Grid](https://www.ag-grid.com/?utm_source=react-conf&utm_medium=react-conf-homepage&utm_campaign=react-conf-sponsorship-2025)) +* [Modern Emails using React](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=25521s) by [Zeno Rocha](https://x.com/zenorocha) ([Resend](https://resend.com/)) +* [Why React Native Apps Make All the Money](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=24917s) by [Perttu Lähteenlahti](https://x.com/plahteenlahti) ([RevenueCat](https://www.revenuecat.com/)) +* [The invisible craft of great UX](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=23400s) by [Michał Dudak](https://x.com/michaldudak) ([MUI](https://mui.com/)) + +## Thanks {/*thanks*/} + +Thank you to all the staff, speakers, and participants, who made React Conf 2025 possible. There are too many to list, but we want to thank a few in particular. + +Thank you to [Matt Carroll](https://x.com/mattcarrollcode) for planning the entire event and building the conference website. + +Thank you to [Michael Chan](https://x.com/chantastic) for MCing React Conf with incredible dedication and energy, delivering thoughtful speaker intros, fun jokes, and genuine enthusiasm throughout the event. Thank you to [Jorge Cohen](https://x.com/JorgeWritesCode) for hosting the livestream, interviewing each speaker, and bringing the in-person React Conf experience online. + +Thank you to [Mateusz Kornacki](https://x.com/mat_kornacki), [Mike Grabowski](https://x.com/grabbou), [Kris Lis](https://www.linkedin.com/in/krzysztoflisakakris/) and the team at [Callstack](https://www.callstack.com/) for co-organizing React Conf and providing design, engineering, and marketing support. Thank you to the [ZeroSlope team](https://zeroslopeevents.com/contact-us/): Sunny Leggett, Tracey Harrison, Tara Larish, Whitney Pogue, and Brianne Smythia for helping to organize the event. + +Thank you to [Jorge Cabiedes Acosta](https://github.com/jorge-cab), [Gijs Weterings](https://x.com/gweterings), [Tim Yung](https://x.com/yungsters), and [Jason Bonta](https://x.com/someextent) for bringing questions from the Discord to the livestream. Thank you to [Lynn Yu](https://github.com/lynnshaoyu) for leading the moderation of the Discord. Thank you to [Seth Webster](https://x.com/sethwebster) for welcoming us each day; and to [Christopher Chedeau](https://x.com/vjeux), [Kevin Gozali](https://x.com/fkgozali), and [Pieter De Baets](https://x.com/Javache) for joining us with a special message during the after-party. + +Thank you to [Kadi Kraman](https://x.com/kadikraman), [Beto](https://x.com/betomoedano) and [Nicolas Solerieu](https://www.linkedin.com/in/nicolas-solerieu/) for building the conference mobile app. Thank you [Wojtek Szafraniec](https://x.com/wojteg1337) for help with the conference website. Thank you to [Mustache](https://www.mustachepower.com/) & [Cornerstone](https://cornerstoneav.com/) for the visuals, stage, and sound; and to the Westin Hotel for hosting us. + +Thank you to all the sponsors who made the event possible: [Amazon](https://www.developer.amazon.com), [MUI](https://mui.com/), [Vercel](https://vercel.com/), [Expo](https://expo.dev/), [RedwoodSDK](https://rwsdk.com), [Ag Grid](https://www.ag-grid.com), [RevenueCat](https://www.revenuecat.com/), [Resend](https://resend.com), [Mux](https://www.mux.com/), [Old Mission](https://www.oldmissioncapital.com/), [Arcjet](https://arcjet.com), [Infinite Red](https://infinite.red/), and [RenderATL](https://renderatl.com). + +Thank you to all the speakers who shared their knowledge and experience with the community. + +Finally, thank you to everyone who attended in person and online to show what makes React, React. React is more than a library, it is a community, and it was inspiring to see everyone come together to share and learn together. + +See you next time! diff --git a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md new file mode 100644 index 000000000..310a84116 --- /dev/null +++ b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md @@ -0,0 +1,208 @@ +--- +title: "Critical Security Vulnerability in React Server Components" +author: The React Team +date: 2025/12/03 +description: There is an unauthenticated remote code execution vulnerability in React Server Components. A fix has been published in versions 19.0.1, 19.1.2, and 19.2.1. We recommend upgrading immediately. + +--- + +December 3, 2025 by [The React Team](/community/team) + +--- + +<Intro> + +There is an unauthenticated remote code execution vulnerability in React Server Components. + +We recommend upgrading immediately. + +</Intro> + +--- + +On November 29th, Lachlan Davidson reported a security vulnerability in React that allows unauthenticated remote code execution by exploiting a flaw in how React decodes payloads sent to React Server Function endpoints. + +Even if your app does not implement any React Server Function endpoints it may still be vulnerable if your app supports React Server Components. + +This vulnerability was disclosed as [CVE-2025-55182](https://www.cve.org/CVERecord?id=CVE-2025-55182) and is rated CVSS 10.0. + +The vulnerability is present in versions 19.0, 19.1.0, 19.1.1, and 19.2.0 of: + +* [react-server-dom-webpack](https://www.npmjs.com/package/react-server-dom-webpack) +* [react-server-dom-parcel](https://www.npmjs.com/package/react-server-dom-parcel) +* [react-server-dom-turbopack](https://www.npmjs.com/package/react-server-dom-turbopack?activeTab=readme) + +## Immediate Action Required {/*immediate-action-required*/} + +A fix was introduced in versions [19.0.1](https://github.com/facebook/react/releases/tag/v19.0.1), [19.1.2](https://github.com/facebook/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/facebook/react/releases/tag/v19.2.1). If you are using any of the above packages please upgrade to any of the fixed versions immediately. + +If your app’s React code does not use a server, your app is not affected by this vulnerability. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by this vulnerability. + +### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/} + +Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk). + +See the [update instructions below](#update-instructions) for how to upgrade to these patches. + +### Hosting Provider Mitigations {/*hosting-provider-mitigations*/} + +We have worked with a number of hosting providers to apply temporary mitigations. + +You should not depend on these to secure your app, and still update immediately. + +### Vulnerability overview {/*vulnerability-overview*/} + +[React Server Functions](https://react.dev/reference/rsc/server-functions) allow a client to call a function on a server. React provides integration points and tools that frameworks and bundlers use to help React code run on both the client and the server. React translates requests on the client into HTTP requests which are forwarded to a server. On the server, React translates the HTTP request into a function call and returns the needed data to the client. + +An unauthenticated attacker could craft a malicious HTTP request to any Server Function endpoint that, when deserialized by React, achieves remote code execution on the server. Further details of the vulnerability will be provided after the rollout of the fix is complete. + +## Update Instructions {/*update-instructions*/} + +<Note> + +These instructions have been updated to include the new vulnerabilities: + +- **Denial of Service - High Severity**: [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) and [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779) (CVSS 7.5) +- **Source Code Exposure - Medium Severity**: [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) (CVSS 5.3) +- **Denial of Service - High Severity**: January 26, 2026 [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) (CVSS 7.5) + +See the [follow-up blog post](/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components) for more info. + +----- + +_Updated January 26, 2026._ +</Note> + +### Next.js {/*update-next-js*/} + +All users should upgrade to the latest patched version in their release line: + +```bash +npm install next@14.2.35 // for 13.3.x, 13.4.x, 13.5.x, 14.x +npm install next@15.0.8 // for 15.0.x +npm install next@15.1.12 // for 15.1.x +npm install next@15.2.9 // for 15.2.x +npm install next@15.3.9 // for 15.3.x +npm install next@15.4.11 // for 15.4.x +npm install next@15.5.10 // for 15.5.x +npm install next@16.0.11 // for 16.0.x +npm install next@16.1.5 // for 16.1.x + +npm install next@15.6.0-canary.60 // for 15.x canary releases +npm install next@16.1.0-canary.19 // for 16.x canary releases +``` + +15.0.8, 15.1.12, 15.2.9, 15.3.9, 15.4.10, 15.5.10, 15.6.0-canary.61, 16.0.11, 16.1.5 + +If you are on version `13.3` or later version of Next.js 13 (`13.3.x`, `13.4.x`, or `13.5.x`) please upgrade to version `14.2.35`. + +If you are on `next@14.3.0-canary.77` or a later canary release, downgrade to the latest stable 14.x release: + +```bash +npm install next@14 +``` + +See the [Next.js blog](https://nextjs.org/blog/security-update-2025-12-11) for the latest update instructions and the [previous changelog](https://nextjs.org/blog/CVE-2025-66478) for more info. + +### React Router {/*update-react-router*/} + +If you are using React Router's unstable RSC APIs, you should upgrade the following package.json dependencies if they exist: + +```bash +npm install react@latest +npm install react-dom@latest +npm install react-server-dom-parcel@latest +npm install react-server-dom-webpack@latest +npm install @vitejs/plugin-rsc@latest +``` + +### Expo {/*expo*/} + +To learn more about mitigating, read the article on [expo.dev/changelog](https://expo.dev/changelog/mitigating-critical-security-vulnerability-in-react-server-components). + +### Redwood SDK {/*update-redwood-sdk*/} + +Ensure you are on rwsdk>=1.0.0-alpha.0 + +For the latest beta version: + +```bash +npm install rwsdk@latest +``` + +Upgrade to the latest `react-server-dom-webpack`: + +```bash +npm install react@latest react-dom@latest react-server-dom-webpack@latest +``` + +See [Redwood docs](https://docs.rwsdk.com/migrating/) for more migration instructions. + +### Waku {/*update-waku*/} + +Upgrade to the latest `react-server-dom-webpack`: + +```bash +npm install react@latest react-dom@latest react-server-dom-webpack@latest waku@latest +``` + +See [Waku announcement](https://github.com/wakujs/waku/discussions/1823) for more migration instructions. + +### `@vitejs/plugin-rsc` {/*vitejs-plugin-rsc*/} + +Upgrade to the latest RSC plugin: + +```bash +npm install react@latest react-dom@latest @vitejs/plugin-rsc@latest +``` + +### `react-server-dom-parcel` {/*update-react-server-dom-parcel*/} + +Update to the latest version: + + ```bash + npm install react@latest react-dom@latest react-server-dom-parcel@latest + ``` + +### `react-server-dom-turbopack` {/*update-react-server-dom-turbopack*/} + +Update to the latest version: + + ```bash + npm install react@latest react-dom@latest react-server-dom-turbopack@latest + ``` + +### `react-server-dom-webpack` {/*update-react-server-dom-webpack*/} + +Update to the latest version: + + ```bash +npm install react@latest react-dom@latest react-server-dom-webpack@latest + ``` + + +### React Native {/*react-native*/} + +For React Native users not using a monorepo or `react-dom`, your `react` version should be pinned in your `package.json`, and there are no additional steps needed. + +If you are using React Native in a monorepo, you should update _only_ the impacted packages if they are installed: + +- `react-server-dom-webpack` +- `react-server-dom-parcel` +- `react-server-dom-turbopack` + +This is required to mitigate the security advisory, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. + +See [this issue](https://github.com/facebook/react-native/issues/54772#issuecomment-3617929832) for more information. + + +## Timeline {/*timeline*/} + +* **November 29th**: Lachlan Davidson reported the security vulnerability via [Meta Bug Bounty](https://bugbounty.meta.com/). +* **November 30th**: Meta security researchers confirmed and began working with the React team on a fix. +* **December 1st**: A fix was created and the React team began working with affected hosting providers and open source projects to validate the fix, implement mitigations and roll out the fix +* **December 3rd**: The fix was published to npm and the publicly disclosed as CVE-2025-55182. + +## Attribution {/*attribution*/} + +Thank you to [Lachlan Davidson](https://github.com/lachlan2k) for discovering, reporting, and working to help fix this vulnerability. diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md new file mode 100644 index 000000000..70e5c2e65 --- /dev/null +++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md @@ -0,0 +1,202 @@ +--- +title: "Denial of Service and Source Code Exposure in React Server Components" +author: The React Team +date: 2025/12/11 +description: Security researchers have found and disclosed two additional vulnerabilities in React Server Components while attempting to exploit the patches in last week’s critical vulnerability. High vulnerability Denial of Service (CVE-2025-55184), and medium vulnerability Source Code Exposure (CVE-2025-55183) + + +--- + +December 11, 2025 by [The React Team](/community/team) + +_Updated January 26, 2026._ + +--- + +<Intro> + +Security researchers have found and disclosed two additional vulnerabilities in React Server Components while attempting to exploit the patches in last week’s critical vulnerability. + +**These new vulnerabilities do not allow for Remote Code Execution.** The patch for React2Shell remains effective at mitigating the Remote Code Execution exploit. + +</Intro> + +--- + +The new vulnerabilities are disclosed as: + +- **Denial of Service - High Severity**: [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184), [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779), and [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) (CVSS 7.5) +- **Source Code Exposure - Medium Severity**: [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) (CVSS 5.3) + +We recommend upgrading immediately due to the severity of the newly disclosed vulnerabilities. + +<Note> + +#### The patches published earlier are vulnerable. {/*the-patches-published-earlier-are-vulnerable*/} + +If you already updated for the previous vulnerabilities, you will need to update again. + +If you updated to 19.0.3, 19.1.4, and 19.2.3, [these are incomplete](#additional-fix-published), and you will need to update again. + +Please see [the instructions in the previous post](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) for upgrade steps. + +----- + +_Updated January 26, 2026._ + +</Note> + +Further details of these vulnerabilities will be provided after the rollout of the fixes are complete. + +## Immediate Action Required {/*immediate-action-required*/} + +These vulnerabilities are present in the same packages and versions as [CVE-2025-55182](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components). + +This includes 19.0.0, 19.0.1, 19.0.2, 19.0.3, 19.1.0, 19.1.1, 19.1.2, 19.1.3, 19.2.0, 19.2.1, 19.2.2, and 19.2.3 of: + +* [react-server-dom-webpack](https://www.npmjs.com/package/react-server-dom-webpack) +* [react-server-dom-parcel](https://www.npmjs.com/package/react-server-dom-parcel) +* [react-server-dom-turbopack](https://www.npmjs.com/package/react-server-dom-turbopack?activeTab=readme) + +Fixes were backported to versions 19.0.4, 19.1.5, and 19.2.4. If you are using any of the above packages please upgrade to any of the fixed versions immediately. + +As before, if your app’s React code does not use a server, your app is not affected by these vulnerabilities. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by these vulnerabilities. + +<Note> + +#### It’s common for critical CVEs to uncover follow‑up vulnerabilities. {/*its-common-for-critical-cves-to-uncover-followup-vulnerabilities*/} + +When a critical vulnerability is disclosed, researchers scrutinize adjacent code paths looking for variant exploit techniques to test whether the initial mitigation can be bypassed. + +This pattern shows up across the industry, not just in JavaScript. For example, after [Log4Shell](https://nvd.nist.gov/vuln/detail/cve-2021-44228), additional CVEs ([1](https://nvd.nist.gov/vuln/detail/cve-2021-45046), [2](https://nvd.nist.gov/vuln/detail/cve-2021-45105)) were reported as the community probed the original fix. + +Additional disclosures can be frustrating, but they are generally a sign of a healthy response cycle. + +</Note> + +### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/} + +Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vite/rsc-plugin](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk). + +Please see [the instructions in the previous post](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) for upgrade steps. + +### Hosting Provider Mitigations {/*hosting-provider-mitigations*/} + +As before, we have worked with a number of hosting providers to apply temporary mitigations. + +You should not depend on these to secure your app, and still update immediately. + +### React Native {/*react-native*/} + +For React Native users not using a monorepo or `react-dom`, your `react` version should be pinned in your `package.json`, and there are no additional steps needed. + +If you are using React Native in a monorepo, you should update _only_ the impacted packages if they are installed: + +- `react-server-dom-webpack` +- `react-server-dom-parcel` +- `react-server-dom-turbopack` + +This is required to mitigate the security advisories, but you do not need to update `react` and `react-dom` so this will not cause the version mismatch error in React Native. + +See [this issue](https://github.com/facebook/react-native/issues/54772#issuecomment-3617929832) for more information. + +--- + +## High Severity: Multiple Denial of Service {/*high-severity-multiple-denial-of-service*/} + +**CVEs:** [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864) +**Base Score:** 7.5 (High) +**Date**: January 26, 2026 + +Security researchers discovered additional DoS vulnerabilities still exist in React Server Components. + +The vulnerabilities are triggered by sending specially crafted HTTP requests to Server Function endpoints, and could lead to server crashes, out-of-memory exceptions or excessive CPU usage; depending on the vulnerable code path being exercised, the application configuration and application code. + +The patches published January 26th mitigate these DoS vulnerabilities. + +<Note> + +#### Additional fixes published {/*additional-fix-published*/} + +The original fix addressing the DoS in [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) was incomplete. + +This left previous versions vulnerable. Versions 19.0.4, 19.1.5, 19.2.4 are safe. + +----- + +_Updated January 26, 2026._ + +</Note> + +--- + +## High Severity: Denial of Service {/*high-severity-denial-of-service*/} + +**CVEs:** [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184) and [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779) +**Base Score:** 7.5 (High) + +Security researchers have discovered that a malicious HTTP request can be crafted and sent to any Server Functions endpoint that, when deserialized by React, can cause an infinite loop that hangs the server process and consumes CPU. Even if your app does not implement any React Server Function endpoints it may still be vulnerable if your app supports React Server Components. + +This creates a vulnerability vector where an attacker may be able to deny users from accessing the product, and potentially have a performance impact on the server environment. + +The patches published today mitigate by preventing the infinite loop. + +## Medium Severity: Source Code Exposure {/*low-severity-source-code-exposure*/} + +**CVE:** [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) +**Base Score**: 5.3 (Medium) + +A security researcher has discovered that a malicious HTTP request sent to a vulnerable Server Function may unsafely return the source code of any Server Function. Exploitation requires the existence of a Server Function which explicitly or implicitly exposes a stringified argument: + +```javascript +'use server'; + +export async function serverFunction(name) { + const conn = db.createConnection('SECRET KEY'); + const user = await conn.createUser(name); // implicitly stringified, leaked in db + + return { + id: user.id, + message: `Hello, ${name}!` // explicitly stringified, leaked in reply + }} +``` + +An attacker may be able to leak the following: + +```txt +0:{"a":"$@1","f":"","b":"Wy43RxUKdxmr5iuBzJ1pN"} +1:{"id":"tva1sfodwq","message":"Hello, async function(a){console.log(\"serverFunction\");let b=i.createConnection(\"SECRET KEY\");return{id:(await b.createUser(a)).id,message:`Hello, ${a}!`}}!"} +``` + +The patches published today prevent stringifying the Server Function source code. + +<Note> + +#### Only secrets in source code may be exposed. {/*only-secrets-in-source-code-may-be-exposed*/} + +Secrets hardcoded in source code may be exposed, but runtime secrets such as `process.env.SECRET` are not affected. + +The scope of the exposed code is limited to the code inside the Server Function, which may include other functions depending on the amount of inlining your bundler provides. + +Always verify against production bundles. + +</Note> + +--- + +## Timeline {/*timeline*/} +* **December 3rd**: Leak reported to Vercel and [Meta Bug Bounty](https://bugbounty.meta.com/) by [Andrew MacPherson](https://github.com/AndrewMohawk). +* **December 4th**: Initial DoS reported to [Meta Bug Bounty](https://bugbounty.meta.com/) by [RyotaK](https://ryotak.net). +* **December 6th**: Both issues confirmed by the React team, and the team began investigating. +* **December 7th**: Initial fixes created and the React team began verifying and planning new patch. +* **December 8th**: Affected hosting providers and open source projects notified. +* **December 10th**: Hosting provider mitigations in place and patches verified. +* **December 11th**: Additional DoS reported to [Meta Bug Bounty](https://bugbounty.meta.com/) by Shinsaku Nomura. +* **December 11th**: Patches published and publicly disclosed as [CVE-2025-55183](https://www.cve.org/CVERecord?id=CVE-2025-55183) and [CVE-2025-55184](https://www.cve.org/CVERecord?id=CVE-2025-55184). +* **December 11th**: Missing DoS case found internally, patched and publicly disclosed as [CVE-2025-67779](https://www.cve.org/CVERecord?id=CVE-2025-67779). +* **January 26th**: Additional DoS cases found, patched, and publicly disclosed as [CVE-2026-23864](https://www.cve.org/CVERecord?id=CVE-2026-23864). +--- + +## Attribution {/*attribution*/} + +Thank you to [Andrew MacPherson (AndrewMohawk)](https://github.com/AndrewMohawk) for reporting the Source Code Exposure, [RyotaK](https://ryotak.net) from GMO Flatt Security Inc and Shinsaku Nomura of Bitforest Co., Ltd. for reporting the Denial of Service vulnerabilities. Thank you to [Mufeed VH](https://x.com/mufeedvh) from [Winfunc Research](https://winfunc.com), [Joachim Viide](https://jviide.iki.fi), [RyotaK](https://ryotak.net) from [GMO Flatt Security Inc](https://flatt.tech/en/) and Xiangwei Zhang of Tencent Security YUNDING LAB for reporting the additional DoS vulnerabilities. diff --git a/src/content/blog/2026/02/24/the-react-foundation.md b/src/content/blog/2026/02/24/the-react-foundation.md new file mode 100644 index 000000000..17b17b7b9 --- /dev/null +++ b/src/content/blog/2026/02/24/the-react-foundation.md @@ -0,0 +1,67 @@ +--- +title: "The React Foundation: A New Home for React Hosted by the Linux Foundation" +author: Matt Carroll +date: 2026/02/24 +description: The React Foundation has officially launched, hosted by the Linux Foundation. +--- + +February 24, 2026 by [Matt Carroll](https://x.com/mattcarrollcode) + +--- + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem', marginLeft: '7rem', marginRight: '7rem' }}> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_logo.png" /> + <img className="w-full light-image" src="/images/blog/react-foundation/react_foundation_logo.webp" /> + </picture> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_logo_dark.png" /> + <img className="w-full dark-image" src="/images/blog/react-foundation/react_foundation_logo_dark.webp" /> + </picture> +</div> + +<Intro> + +The React Foundation has officially launched, hosted by the Linux Foundation. + +</Intro> + +--- + +[In October](/blog/2025/10/07/introducing-the-react-foundation), we announced our intent to form the React Foundation. Today, we're excited to share that the React Foundation has officially launched. + +React, React Native, and supporting projects like JSX are no longer owned by Meta — they are now owned by the React Foundation, an independent foundation hosted by the Linux Foundation. You can read more in the [Linux Foundation's press release](https://www.linuxfoundation.org/press/linux-foundation-announces-the-formation-of-the-react-foundation). + +### Founding Members {/*founding-members*/} + +The React Foundation has eight Platinum founding members: **Amazon**, **Callstack**, **Expo**, **Huawei**, **Meta**, **Microsoft**, **Software Mansion**, and **Vercel**. **Huawei** has joined since [our announcement in October](/blog/2025/10/07/introducing-the-react-foundation). The React Foundation will be governed by a board of directors composed of representatives from each member, with [Seth Webster](https://sethwebster.com/) serving as executive director. + +<div style={{display: 'flex', justifyContent: 'center', margin: '2rem'}}> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_member_logos_updated.png" /> + <img className="w-full light-image" src="/images/blog/react-foundation/react_foundation_member_logos_updated.webp" /> + </picture> + <picture > + <source srcset="/images/blog/react-foundation/react_foundation_member_logos_dark_updated.png" /> + <img className="w-full dark-image" src="/images/blog/react-foundation/react_foundation_member_logos_dark_updated.webp" /> + </picture> +</div> + +### New Provisional Leadership Council {/*new-provisional-leadership-council*/} + +React's technical governance will always be independent from the React Foundation board — React's technical direction will continue to be set by the people who contribute to and maintain React. We have formed a provisional leadership council to determine this structure. We will share an update in the coming months. + +### Next Steps {/*next-steps*/} + +There is still work to do to complete the transition. In the coming months we will be: + +* Finalizing the technical governance structure for React +* Transferring repositories, websites, and other infrastructure to the React Foundation +* Exploring programs to support the React ecosystem +* Kicking off planning for the next React Conf + +We will share updates as this work progresses. + +### Thank You {/*thank-you*/} + +None of this would be possible without the thousands of contributors who have shaped React over the past decade. Thank you to our founding members, to every contributor who has opened a pull request, filed an issue, or helped someone learn React, and to the millions of developers who build with React every day. The React Foundation exists because of this community, and we're looking forward to building its future together. diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 165fac7ab..c5ef9b98b 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -4,13 +4,83 @@ title: Blog React <Intro> +<<<<<<< HEAD Ce blog est la source officielle des mises à jour par l'équipe React. Toute annonce importante, y compris les notes de versions et les avertissements de dépréciation, sera faite ici en premier. Vous pouvez aussi suivre le compte [@reactjs](https://twitter.com/reactjs) sur Twitter, mais vous êtes sûr·e de ne rien rater d'important si vous ne lisez que ce blog. +======= +This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. + +You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Intro> <div className="sm:-mx-5 flex flex-col gap-5 mt-12"> +<<<<<<< HEAD <BlogCard title="React Compiler : beta et feuille de route" date="21 octobre 2024" url="/blog/2024/10/21/react-compiler-beta-release"> +======= +<BlogCard title="The React Foundation: A New Home for React Hosted by the Linux Foundation" date="February 24, 2026" url="/blog/2026/02/24/the-react-foundation"> + +The React Foundation has officially launched under the Linux Foundation. + +</BlogCard> + +<BlogCard title="Denial of Service and Source Code Exposure in React Server Components" date="December 11, 2025" url="/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components"> + +Security researchers have found and disclosed two additional vulnerabilities in React Server Components while attempting to exploit the patches in last week’s critical vulnerability... + +</BlogCard> + +<BlogCard title="Critical Security Vulnerability in React Server Components" date="December 3, 2025" url="/blog/2025/12/03/critical-security-vulnerability-in-react-server-components"> + +There is an unauthenticated remote code execution vulnerability in React Server Components. A fix has been published in versions 19.0.1, 19.1.2, and 19.2.1. We recommend upgrading immediately. + +</BlogCard> + +<BlogCard title="React Conf 2025 Recap" date="October 16, 2025" url="/blog/2025/10/16/react-conf-2025-recap"> + +Last week we hosted React Conf 2025. In this post, we summarize the talks and announcements from the event... + +</BlogCard> + +<BlogCard title="React Compiler v1.0" date="October 7, 2025" url="/blog/2025/10/07/react-compiler-1"> + +We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier. + +</BlogCard> + +<BlogCard title="Introducing the React Foundation" date="October 7, 2025" url="/blog/2025/10/07/introducing-the-react-foundation"> + +Today, we're announcing our plans to create the React Foundation and a new technical governance structure ... + +</BlogCard> + +<BlogCard title="React 19.2" date="October 1, 2025" url="/blog/2025/10/01/react-19-2"> + +React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ... + +</BlogCard> + +<BlogCard title="React Labs: View Transitions, Activity, and more" date="April 23, 2025" url="/blog/2025/04/23/react-labs-view-transitions-activity-and-more"> + +In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ... + +</BlogCard> + +<BlogCard title="Sunsetting Create React App" date="February 14, 2025" url="/blog/2025/02/14/sunsetting-create-react-app"> + +Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ... + +</BlogCard> + +<BlogCard title="React v19 " date="December 5, 2024" url="/blog/2024/12/05/react-19"> + +In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ... + +</BlogCard> + +<BlogCard title="React Compiler Beta Release" date="October 21, 2024" url="/blog/2024/10/21/react-compiler-beta-release"> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Nous avions annoncé la sortie expérimentale de React Compiler lors de la React Conf 2024. Nous avons beaucoup avancé depuis, et dans cet article nous aimerions partager avec vous la suite de nos travaux sur ce compilateur… @@ -27,6 +97,7 @@ Dans le guide de migration vers React 19 RC, nous vous donnions des instructions </BlogCard> +<<<<<<< HEAD <BlogCard title="React 19 RC : guide de migration" date="25 avril 2024" url="/blog/2024/04/25/react-19-upgrade-guide"> Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19… @@ -34,6 +105,9 @@ Les améliorations apportées par React 19 RC nécessitent quelques ruptures de </BlogCard> <BlogCard title="React Labs : ce sur quoi nous bossons – février 2024" date="15 février 2024" url="/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024"> +======= +<BlogCard title="React 19 Upgrade Guide" date="April 25, 2024" url="/blog/2024/04/25/react-19-upgrade-guide"> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Dans les billets React Labs, nous vous parlons de nos projets de recherche et développement actifs. Depuis notre dernier bulletin, nous avons fait des progrès significatifs sur le React Compiler et React 19, et nous aimerions partager ce que nous avons appris. diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index 2e6dca4fb..207679e3f 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -36,6 +36,8 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d * [Joe Critchley](https://github.com/joecritch) * [Jeff Morrison](https://github.com/jeffmo) * [Luna Ruan](https://github.com/lunaruan) +* [Luna Wei](https://github.com/lunaleaps) +* [Noah Lemen](https://github.com/noahlemen) * [Kathryn Middleton](https://github.com/kmiddleton14) * [Keyan Zhang](https://github.com/keyz) * [Marco Salazar](https://github.com/salazarm) @@ -51,9 +53,10 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d * [Samuel Susla](https://github.com/sammy-SC) * [Sander Spies](https://github.com/sanderspies) * [Sasha Aickin](https://github.com/aickin) -* [Sean Keegan](https://github.com/seanryankeegan) +* [Sathya Gunasekaran](https://github.com/gsathya) * [Sophia Shoemaker](https://github.com/mrscobbler) * [Sunil Pai](https://github.com/threepointone) +* [Tianyu Yao](https://github.com/) * [Tim Yung](https://github.com/yungsters) * [Xuan Huang](https://github.com/huxpro) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 27c1b7018..802e4137b 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,62 +10,206 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse ## Conférences à venir {/*upcoming-conferences*/} -### React Universe Conf 2024 {/*react-universe-conf-2024*/} -September 5-6, 2024. Wrocław, Poland. +### React Paris 2026 {/*react-paris-2026*/} +March 26 - 27, 2026. In-person in Paris, France (hybrid event) +<<<<<<< HEAD [Site web](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +======= +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -### React Alicante 2024 {/*react-alicante-2024*/} -September 19-21, 2024. Alicante, Spain. +### CityJS London 2026 {/*cityjs-london-2026*/} +April 14-17, 2026. In-person in London +<<<<<<< HEAD [Site web](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) +======= +[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} -October 04 - 05, 2024. Nairobi, Kenya +### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/} +September 10-11, 2026. In-person in Zurich, Switzerland +<<<<<<< HEAD [Site web](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) +======= +[Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -### React India 2024 {/*react-india-2024*/} -October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day +## Past Conferences {/*past-conferences*/} +<<<<<<< HEAD [Site web](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) +======= +### CityJS New Delhi 2026 {/*cityjs-newdelhi-2026*/} +February 12-13, 2026. In-person in New Delhi, India +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -### React Brussels 2024 {/*react-brussels-2024*/} -October 18, 2024. In-person in Brussels, Belgium (hybrid event) +[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) +<<<<<<< HEAD [Site web](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) +======= +### CityJS Singapore 2026 {/*cityjs-singapore-2026*/} +February 4-6, 2026. In-person in Singapore +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -### reactjsday 2024 {/*reactjsday-2024*/} -October 25, 2024. In-person in Verona, Italy + online (hybrid event) +[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) +<<<<<<< HEAD [Site web](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) ### React Advanced London 2024 {/*react-advanced-london-2024*/} October 25 & 28, 2024. In-person in London, UK + online (hybrid event) +======= +### React Advanced London 2025 {/*react-advanced-london-2025*/} +November 28 & December 1, 2025. In-person in London, UK + online (hybrid event) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a [Site web](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) -### React Native London Conf 2024 {/*react-native-london-2024*/} -November 14 & 15, 2024. In-person in London, UK +### React Summit US 2025 {/*react-summit-us-2025*/} +November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event) +<<<<<<< HEAD [Site web](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) +======= +[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -### React Summit US 2024 {/*react-summit-us-2024*/} -November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) +### React India 2025 {/*react-india-2025*/} +October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day +<<<<<<< HEAD [Site web](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) +======= +[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -### React Africa 2024 {/*react-africa-2024*/} -November 29, 2024. In-person in Casablanca, Morocco (hybrid event) +### React Conf 2025 {/*react-conf-2025*/} +October 7-8, 2025. Henderson, Nevada, USA and free livestream +<<<<<<< HEAD [Site web](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) +======= +[Website](https://conf.react.dev/) - [Twitter](https://x.com/reactjs) - [Bluesky](https://bsky.app/profile/react.dev) + +### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/} +October 04, 2025. Nairobi, Kenya + +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + +### React Universe Conf 2025 {/*react-universe-conf-2025*/} +September 2-4, 2025. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) + +### React Nexus 2025 {/*react-nexus-2025*/} +July 03 - 05, 2025. In-person in Bangalore, India + +[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in) + +### React Summit 2025 {/*react-summit-2025*/} +June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) + +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) + +### React Norway 2025 {/*react-norway-2025*/} +June 13, 2025. In-person in Oslo, Norway + remote (virtual event) + +[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway) + +### CityJS Athens 2025 {/*cityjs-athens*/} +May 27 - 31, 2025. In-person in Athens, Greece + +[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + +### App.js Conf 2025 {/*appjs-conf-2025*/} +May 28 - 30, 2025. In-person in Kraków, Poland + remote + +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) + +### CityJS London 2025 {/*cityjs-london*/} +April 23 - 25, 2025. In-person in London, UK + +[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + +### React Paris 2025 {/*react-paris-2025*/} +March 20 - 21, 2025. In-person in Paris, France (hybrid event) + +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj) + +### React Native Connection 2025 {/*react-native-connection-2025*/} +April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France. + +[Website](https://reactnativeconnection.io/) - [X](https://x.com/reactnativeconn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React Day Berlin 2024 {/*react-day-berlin-2024*/} December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) [Site web](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) +<<<<<<< HEAD ## Conférences passées {/*past-conferences*/} +======= +### React Africa 2024 {/*react-africa-2024*/} +November 29, 2024. In-person in Casablanca, Morocco (hybrid event) + +[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) + +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) + +[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) + +### React Native London Conf 2024 {/*react-native-london-2024*/} +November 14 & 15, 2024. In-person in London, UK + +[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) + +### React Advanced London 2024 {/*react-advanced-london-2024*/} +October 25 & 28, 2024. In-person in London, UK + online (hybrid event) + +[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) + +### reactjsday 2024 {/*reactjsday-2024*/} +October 25, 2024. In-person in Verona, Italy + online (hybrid event) + +[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) + +### React Brussels 2024 {/*react-brussels-2024*/} +October 18, 2024. In-person in Brussels, Belgium (hybrid event) + +[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWimQ0U75woee2zNUIFsiDC3) + +### React India 2024 {/*react-india-2024*/} +October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day + +[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) + +### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} +October 04 - 05, 2024. Nairobi, Kenya + +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + +### React Alicante 2024 {/*react-alicante-2024*/} +September 19-21, 2024. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + +### React Universe Conf 2024 {/*react-universe-conf-2024*/} +September 5-6, 2024. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React Rally 2024 🐙 {/*react-rally-2024*/} August 12-13, 2024. Park City, UT, USA @@ -118,7 +262,7 @@ May 15 - 16, 2024. In-person in Henderson, NV, USA + remote [Site web](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs) ### React Native Connection 2024 {/*react-native-connection-2024*/} -April 23, 2024. In-person in Paris, France +April 23, 2024. In-person in Paris, France [Site web](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn) @@ -160,7 +304,11 @@ October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hyb ### React Brussels 2023 {/*react-brussels-2023*/} October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid) +<<<<<<< HEAD [Site web](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [Vidéos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWh85KeMomUoVz8_brrmh_aC) +======= +[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [Videos](https://www.youtube.com/playlist?list=PL53Z0yyYnpWh85KeMomUoVz8_brrmh_aC) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React India 2023 {/*react-india-2023*/} October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day @@ -183,7 +331,7 @@ September 28 - 30, 2023. Alicante, Spain [Site web](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) ### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/} -September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) +September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) [Site web](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs) diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md index b04ac17ee..332cef863 100644 --- a/src/content/community/docs-contributors.md +++ b/src/content/community/docs-contributors.md @@ -10,6 +10,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun ## Contenu {/*content*/} +<<<<<<< HEAD * [Rachel Nabors](https://twitter.com/RachelNabors) : révisions, rédaction, illustrations * [Dan Abramov](https://twitter.com/dan_abramov) : rédaction, conception du curriculum * [Sylwia Vargas](https://twitter.com/SylwiaVargas) : codes d'exemple @@ -21,6 +22,19 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun * [Matt Carroll](https://twitter.com/mattcarrollcode) : révisions, rédaction * [Natalia Tepluhina](https://twitter.com/n_tepluhina) : révisions, avis * [Sebastian Markbåge](https://twitter.com/sebmarkbage) : retours +======= +* [Rachel Nabors](https://twitter.com/RachelNabors): editing, writing, illustrating +* [Dan Abramov](https://bsky.app/profile/danabra.mov): writing, curriculum design +* [Sylwia Vargas](https://twitter.com/SylwiaVargas): example code +* [Rick Hanlon](https://twitter.com/rickhanlonii): writing +* [David McCabe](https://twitter.com/mcc_abe): writing +* [Sophie Alpert](https://twitter.com/sophiebits): writing +* [Pete Hunt](https://twitter.com/floydophone): writing +* [Andrew Clark](https://twitter.com/acdlite): writing +* [Matt Carroll](https://twitter.com/mattcarrollcode): editing, writing +* [Natalia Tepluhina](https://twitter.com/n_tepluhina): reviews, advice +* [Sebastian Markbåge](https://twitter.com/sebmarkbage): feedback +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Design {/*design*/} @@ -31,6 +45,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun ## Développement {/*development*/} +<<<<<<< HEAD * [Jared Palmer](https://twitter.com/jaredpalmer) : développement du site * [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando) et [Dustin Goodman](https://twitter.com/dustinsgoodman)) : développement du site * [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor) et [Danilo Woznica](https://twitter.com/danilowoz)) : intégration des bacs à sable @@ -38,5 +53,14 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun * [Rick Hanlon](https://twitter.com/rickhanlonii) : développement du site * [Harish Kumar](https://www.strek.in/) : development et maintenance * [Luna Ruan](https://twitter.com/lunaruan) : améliorations des bacs à sable +======= +* [Jared Palmer](https://twitter.com/jaredpalmer): site development +* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): site development +* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor), [Danilo Woznica](https://twitter.com/danilowoz)): sandbox integration +* [Dan Abramov](https://bsky.app/profile/danabra.mov): site development +* [Rick Hanlon](https://twitter.com/rickhanlonii): site development +* [Harish Kumar](https://www.strek.in/): development and maintenance +* [Luna Ruan](https://twitter.com/lunaruan): sandbox improvements +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Nous aimerions aussi remercier les innombrables testeurs de la première heure et membres de la communautés qui nous ont fourni des retours tout au long de notre travail. diff --git a/src/content/community/index.md b/src/content/community/index.md index 68208a7ec..6b56ccd47 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -29,4 +29,8 @@ Chaque communauté est composée de plusieurs milliers d'utilisateurs de React. ## Actualités {/*news*/} +<<<<<<< HEAD Pour les dernières nouvelles sur React, [suivez **@reactjs** sur Twitter](https://twitter.com/reactjs) et le [blog officiel de React](/blog/) sur ce site. +======= +For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index bed42f779..4e6871ad7 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -53,7 +53,7 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un ## Canada {/*canada*/} * [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/) -* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/) +* [Montreal, QC](https://guild.host/react-montreal/) * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/) * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/) * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/) @@ -62,17 +62,133 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un ## Colombie {/*colombia*/} * [Medellin](https://www.meetup.com/React-Medellin/) +<<<<<<< HEAD ## Danemark {/*denmark*/} * [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/) * [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/) ## Écosse (R.-U.) {/*scotland-uk*/} * [Edinburgh](https://www.meetup.com/React-Scotland/) +======= +## Czechia {/*czechia*/} +* [Prague](https://guild.host/react-prague/) + +## Denmark {/*denmark*/} +* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/) +* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/) + +## England (UK) {/*england-uk*/} +* [Manchester](https://www.meetup.com/Manchester-React-User-Group/) +* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/) +* [React Advanced London](https://guild.host/react-advanced-london) +* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/) +* [React Native London](https://guild.host/RNLDN) + +## Finland {/*finland*/} +* [Helsinki](https://www.meetabit.com/communities/react-helsinki) + +## France {/*france*/} +* [Lille](https://www.meetup.com/ReactBeerLille/) +* [Paris](https://www.meetup.com/ReactJS-Paris/) + +## Germany {/*germany*/} +* [Cologne](https://www.meetup.com/React-Cologne/) +* [Düsseldorf](https://www.meetup.com/de-DE/ReactJS-Meetup-Dusseldorf/) +* [Hamburg](https://www.meetup.com/Hamburg-React-js-Meetup/) +* [Karlsruhe](https://www.meetup.com/react_ka/) +* [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/) +* [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/) +* [React Berlin](https://guild.host/react-berlin) + +## Greece {/*greece*/} +* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/) +* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/) + +## India {/*india*/} +* [Ahmedabad](https://reactahmedabad.dev/) +* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/) +* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup) +* [Chennai](https://www.linkedin.com/company/chennaireact) +* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) +* [Mumbai](https://reactmumbai.dev) +* [Pune](https://www.meetup.com/ReactJS-and-Friends/) +* [Rajasthan](https://reactrajasthan.com) + +## Indonesia {/*indonesia*/} +* [Indonesia](https://www.meetup.com/reactindonesia/) + +## Ireland {/*ireland*/} +* [Dublin](https://guild.host/reactjs-dublin) + +## Israel {/*israel*/} +* [Tel Aviv](https://www.meetup.com/ReactJS-Israel/) + +## Italy {/*italy*/} +* [Milan](https://www.meetup.com/React-JS-Milano/) + +## Japan {/*japan*/} +* [Osaka](https://react-osaka.connpass.com/) + +## Kenya {/*kenya*/} +* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske) + +## Malaysia {/*malaysia*/} +* [Kuala Lumpur](https://www.kl-react.com/) +* [Penang](https://www.facebook.com/groups/reactpenang/) + +## Netherlands {/*netherlands*/} +* [Amsterdam](https://guild.host/react-amsterdam) + +## New Zealand {/*new-zealand*/} +* [Wellington](https://www.meetup.com/React-Wellington/) + +## Norway {/*norway*/} +* [Norway](https://reactjs-norway.webflow.io/) +* [Oslo](https://www.meetup.com/ReactJS-Oslo-Meetup/) + +## Pakistan {/*pakistan*/} +* [Karachi](https://www.facebook.com/groups/902678696597634/) +* [Lahore](https://www.facebook.com/groups/ReactjsLahore/) + +## Philippines {/*philippines*/} +* [Manila](https://www.meetup.com/reactjs-developers-manila/) +* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/) + +## Poland {/*poland*/} +* [Warsaw](https://www.meetup.com/React-js-Warsaw/) +* [Wrocław](https://www.meetup.com/ReactJS-Wroclaw/) + +## Portugal {/*portugal*/} +* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/) + +## Scotland (UK) {/*scotland-uk*/} +* [Edinburgh](https://www.meetup.com/react-edinburgh/) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Espagne {/*spain*/} * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/) +<<<<<<< HEAD ## États-Unis {/*us*/} +======= +## Sri Lanka {/*sri-lanka*/} +* [Colombo](https://www.javascriptcolombo.com/) + +## Sweden {/*sweden*/} +* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/) +* [Stockholm](https://www.meetup.com/Stockholm-ReactJS-Meetup/) + +## Switzerland {/*switzerland*/} +* [Zurich](https://www.meetup.com/Zurich-ReactJS-Meetup/) + +## Turkey {/*turkey*/} +* [Istanbul](https://kommunity.com/reactjs-istanbul) + +## Ukraine {/*ukraine*/} +* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup) + +## US {/*us*/} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/) * [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/) * [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/) @@ -83,6 +199,7 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un * [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/) * [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/) * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/) +* [Denver, CO - React Denver](https://reactdenver.com/) * [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/) * [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy) * [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/) diff --git a/src/content/community/team.md b/src/content/community/team.md index 225d089ac..1c7ff0365 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -22,12 +22,25 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Dan a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint. Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie. </TeamMember> +<<<<<<< HEAD <TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Manager d’ingénieurs chez Meta"> Eli a commencé la programmation après avoir été suspendu au collège pour piratage. Il travaille sur React et React Native depuis 2017. Il aime manger des sucreries, en particulier les crèmes glacées et la tarte aux pommes. Vous le trouverez généralement en train d'essayer des trucs un peu fous comme le parkour, les simulateurs de chute libre ou la danse aérienne sur rubans de soie. </TeamMember> <TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Ingénieur chez Meta"> Peut après avoir découvert AutoHotkey, Jack écrivait des scripts pour automatiser tout ce à quoi il pouvait penser. Lorsqu'il a atteint les limites de l'exercice, il s'est plongé dans le développement web et n'a jamais regardé en arrière. Dernièrement, Jack a travaillé sur la plateforme web d'Instagram, avant de migrer vers React. Son langage de programmation préféré est JSX. +======= +<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="elicwhite" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta"> + Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks. +</TeamMember> + +<TeamMember name="Hendrik Liebau" permalink="hendrik-liebau" photo="/images/team/hendrik.jpg" github="unstubbable" bsky="unstubbable.bsky.social" twitter="unstubbable" title="Engineer at Vercel"> + Hendrik’s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop. +</TeamMember> + +<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta"> + Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </TeamMember> <TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Manager d’ingénieurs chez Meta"> @@ -38,6 +51,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Joe pensait axer ses études sur les maths et la philosophie, mais s'est retrouvé en informatique après avoir écrit des simulations de physique dans Matlab. Avant React, il travaillait sur Relay, RSocket.js et le langage de programmation Skip. Lorsqu'il n'est pas en train de pondre un système réactif il aime courir, apprendre le japonais, et passer du temps en famille. </TeamMember> +<<<<<<< HEAD <TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Ingénieur chez Vercel"> Josh a étudié les Mathématiques et découvert la programmation pendant ses études. Son premier boulot de développeur professionnel consistait à calculer des taux d'assurance dans Microsoft Excel, ce parangon de Programmation Réactive, ce qui explique probablement pourquoi il bosse désormais sur React. Entre les deux Josh a été contributeur, manager voire directeur dans quelques startups. Hors du boulot, il aime se lancer des défis de cuisine. </TeamMember> @@ -48,18 +62,43 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab <TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" threads="lunaleaps" title="Ingénieure chez Meta"> Luna a appris les bases de Python à 6 ans grâce à son père. Depuis plus rien ne l'arrête. Luna a bien l'intention d'être une Génération Z, et le chemin du succès passe par la défense de l'environnement, du jardinage urbain et beaucoup de temps précieux passé avec Voo-Doo (voir photo). +======= +<TeamMember name="Jordan Brown" permalink="jordan-brown" photo="/images/team/jordan.jpg" github="jbrown215" title="Engineer at Meta"> + Jordan started coding by building iPhone apps, where he was pushing and popping view controllers before he knew that for-loops were a thing. He enjoys working on technology that developers love, which naturally drew him to React. Outside of work he enjoys reading, kiteboarding, and playing guitar. +</TeamMember> + +<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel"> + Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking. +</TeamMember> + +<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta"> + Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </TeamMember> <TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" threads="mattcarrollcode" title="Developer Advocate chez Meta"> Matt est tombé par hasard dans le code, et depuis il adore créer grâce à des communautés des trucs qu'on ne peut pas créer tout seuls. Avant React, il a travaillé sur YouTube, l'Assistant Google, Fuchsia, Google Cloud AI et Evernote. Lorsqu'il n'est pas en train d'améliorer l'outillage des développeurs il aime la montagne, le jazz, et passer du temps en famille. </TeamMember> +<<<<<<< HEAD <TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Ingénieure chez Meta"> Mofei a commencé à programmer dès qu'elle a réalisé que ça pouvait l'aider à tricher aux jeux vidéos. Ses études se sont concentrées sur les systèmes d'exploitation (OS), mais elle aime aujourd'hui triturer React. Hors du boulot, elle aime déboguer des problèmes d'escalade de bloc et planifier ses prochaines randonnées. </TeamMember> <TeamMember name="Noah Lemen" permalink="noah-lemen" photo="/images/team/noahlemen.jpg" github="noahlemen" twitter="noahlemen" threads="noahlemen" personal="noahle.men" title="Ingénieur chez Meta"> Noah a commencé à s'intéresser à la programmation d'UI lors de ses études en technologies musicales à NYU. Chez Meta, il a travaillé sur des outils internes, des navigateurs, la performance web, et se concentre actuellement sur React. Quand il n'est pas au boulot, Noah est généralement en train de triturer des synthétiseurs ou de passer du temps avec son chat. +======= +<TeamMember name="Mike Vitousek" permalink="mike-vitousek" photo="/images/team/mike.jpg" github="mvitousek" title="Engineer at Meta"> + Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest. +</TeamMember> + +<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Engineer at Meta"> + Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s). +</TeamMember> + +<TeamMember name="Pieter Vanderwerff" permalink="pieter-vanderwerff" photo="/images/team/pieter.jpg" github="pieterv" threads="pietervanderwerff" title="Engineer at Meta"> + Pieter studied building science but after failing to get a job he made himself a website and things escalated from there. At Meta, he enjoys working on performance, languages and now React. When he's not programming you can find him off-road in the mountains. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </TeamMember> <TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" bsky="ricky.fm" title="Ingénieur chez Meta"> @@ -70,12 +109,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Ruslan a commencé enfant à programmer des UI en modifiant des gabarits HTML pour ses forums personnalisés de jeux. Sans trop savoir comment, il a fini par spécialiser ses études en informatique. Il aime la musique, les jeux, et les mèmes. Surtout les mèmes. </TeamMember> +<<<<<<< HEAD <TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" threads="gsathya.03" title="Ingénieur chez Meta"> Sathya a détesté le *Dragon Book* durant ses études, et pourtant a fini par consacrer sa carrière aux compilateurs. Lorsqu'il n'est pas en train de compiler des composants React, soit il boit du café soit il mange encore un Dosa. </TeamMember> <TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Ingénieur chez Vercel"> Sébastien a étudié la psychologie. Il est généralement silencieux. Même lorsqu'il dit quelque chose, ça ne finit par avoir du sens pour le reste d'entre nous que quelques mois plus tard. La véritable pronconciation de son nom de famille est « marc-bau-jai », mais il a fini par tolérer « marc-beige » par pur pragmatisme — une approche qu'il applique aussi à React. +======= +<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Engineer at Vercel"> + Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </TeamMember> <TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Ingénieur chez Vercel"> @@ -90,12 +134,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Quatre jours après la sortie de React, Sophie réécrivait l'intégralité de son projet d'alors pour s'en servir, ce qui avec le recul lui semble un brin téméraire. Après être devenue la principale contributrice au projet, elle s'est demandée pourquoi elle n'était pas payée par Facebook comme tous les autres et a officiellement rejoint l'équipe pour guider React à travers sa phase adolescente. Même si elle a quitté le poste il y a plusieurs années, on la trouve encore dans les forums de discussion de l'équipe où elle « ajoute de la valeur ». </TeamMember> +<<<<<<< HEAD <TeamMember name="Tianyu Yao" permalink="tianyu-yao" photo="/images/team/tianyu.jpg" github="tyao1" twitter="tianyu0" threads="sophiebits" title="Ingénieur chez Meta"> Tianyu s'est intéressé aux ordinateurs dès l'enfance par amour des jeux vidéos. Il a donc étudié l'informatique et joue encore à des jeux pour enfants comme *League of Legends*. Lorsqu'il n'est pas devant son ordinateur, il aime jouer avec ses deux chatons, randonner et faire du kayak. </TeamMember> <TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Manager d’ingénieurs chez Meta"> Yuzhi a étudié l'informatique à l'école. Elle aimait cette gratification instantanée ressentie en voyant son code prendre vie sans avoir à être physiquement dans un laboratoire. Elle gère aujourd'hui l'organisation React. Avant cela, elle travaillait sur le framework de chargement de données Relay. Dans son temps libre, Yuzhi aime optimiser sa vie au travers du jardinage et de projets d'amélioration de sa maison. +======= +<TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Engineering Manager at Meta"> + Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </TeamMember> ## Contributeurs historiques {/*past-contributors*/} diff --git a/src/content/community/translations.md b/src/content/community/translations.md index 19bbe425e..399bec65c 100644 --- a/src/content/community/translations.md +++ b/src/content/community/translations.md @@ -28,7 +28,11 @@ Pour examiner le taux de progression de chaque traductions, consultez [Is React ## Comment contribuer {/*how-to-contribute*/} +<<<<<<< HEAD Vous pouvez contribuer aux efforts de traduction ! +======= +You can contribute to the translation efforts! +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a La communauté gère le travail de traduction de la documentation React dans des *forks* de react.dev dédiés pour chaque langue. Généralement, une tâche de traduction revient à traduire directement un fichier Markdown et à créer une *Pull request*. Cliquez sur le lien « Contribuer » ci-dessus pour accéder au dépôt GitHub de votre langue, et suivez les instructions qui y figurent pour aider à la traduction. diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index a13f39e22..aaf9c5daf 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -8,7 +8,11 @@ Toutes les versions stables de React sont soumises à un niveau élevé de tests </Intro> +<<<<<<< HEAD Pour une liste des versions antérieures, consultez la page [Versions](/versions). +======= +This versioning policy describes our approach to version numbers for packages such as `react` and `react-dom`. For a list of previous releases, see the [Versions](/versions) page. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Versions stables {/*stable-releases*/} @@ -24,7 +28,13 @@ Les livraisons majeures peuvent également intégrer de nouvelles fonctionnalit Les livraisons mineures sont les plus fréquentes. +<<<<<<< HEAD ### Ruptures de compatibilité ascendante {/*breaking-changes*/} +======= +We know our users continue to use old versions of React in production. If we learn of a security vulnerability in React, we release a backported fix for all major versions that are affected by the vulnerability. + +### Breaking changes {/*breaking-changes*/} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Les ruptures de compatibilité ascendante sont gênantes pour tout le monde, aussi nous essayons de limiter le nombre de livraisons majeures — par exemple, React 15 a été publié en avril 2016, React 16 en septembre 2017 et React 17 en octobre 2020. diff --git a/src/content/community/videos.md b/src/content/community/videos.md index 12e380810..9eea7436c 100644 --- a/src/content/community/videos.md +++ b/src/content/community/videos.md @@ -8,6 +8,75 @@ Des vidéos centrées sur React et son écosystème. </Intro> +## React Conf 2024 {/*react-conf-2024*/} + +At React Conf 2024, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message to kick off the conference: + +<YouTubeIframe src="https://www.youtube.com/embed/T8TZQ6k4SLE?t=975s" title="Boz and Seth Intro" /> + +### React 19 Keynote {/*react-19-keynote*/} + +In the Day 1 keynote, we shared vision for React starting with React 19 and the React Compiler. Watch the full keynote from [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Andrew Clark](https://twitter.com/acdlite), [Josh Story](https://twitter.com/joshcstory), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei): + + +<YouTubeIframe src="https://www.youtube.com/embed/lyEKhv8-3n0" title="YouTube video player" /> + +### React Unpacked: A Roadmap to React 19 {/*react-unpacked-a-roadmap-to-react-19*/} + +React 19 introduced new features including Actions, `use()`, `useOptimistic` and more. For a deep dive on using new features in React 19, see [Sam Selikoff's](https://twitter.com/samselikoff) talk: + +<YouTubeIframe src="https://www.youtube.com/embed/R0B2HsSM78s" title="React Unpacked: A Roadmap to React 19" /> + +### What's New in React 19 {/*whats-new-in-react-19*/} + +[Lydia Hallie](https://twitter.com/lydiahallie) gave a visual deep dive of React 19's new features: + +<YouTubeIframe src="https://www.youtube.com/embed/AJOGzVygGcY" title="What's New in React 19" /> + +### React 19 Deep Dive: Coordinating HTML {/*react-19-deep-dive-coordinating-html*/} + +[Josh Story](https://twitter.com/joshcstory) provided a deep dive on the document and resource streaming APIs in React 19: + +<YouTubeIframe src="https://www.youtube.com/embed/IBBN-s77YSI" title="React 19 Deep Dive: Coordinating HTML" /> + +### React for Two Computers {/*react-for-two-computers*/} + +[Dan Abramov](https://bsky.app/profile/danabra.mov) imagined an alternate history where React started server-first: + +<YouTubeIframe src="https://www.youtube.com/embed/ozI4V_29fj4" title="React for Two Computers" /> + +### Forget About Memo {/*forget-about-memo*/} + +[Lauren Tan](https://twitter.com/potetotes) gave a talk on using the React Compiler in practice: + +<YouTubeIframe src="https://www.youtube.com/embed/lvhPq5chokM" title="Forget About Memo" /> + +### React Compiler Deep Dive {/*react-compiler-deep-dive*/} + +[Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei) provided a deep dive on how the React Compiler works: + +<YouTubeIframe src="https://www.youtube.com/embed/uA_PVyZP7AI" title="React Compiler Deep Dive" /> + +### And more... {/*and-more-2024*/} + +**We also heard talks from the community on Server Components:** +* [Enhancing Forms with React Server Components](https://www.youtube.com/embed/0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff) +* [And Now You Understand React Server Components](https://www.youtube.com/embed/pOo7x8OiAec) by [Kent C. Dodds](https://twitter.com/kentcdodds) +* [Real-time Server Components](https://www.youtube.com/embed/6sMANTHWtLM) by [Sunil Pai](https://twitter.com/threepointone) + +**Talks from React frameworks using new features:** + +* [Vanilla React](https://www.youtube.com/embed/ZcwA0xt8FlQ) by [Ryan Florence](https://twitter.com/ryanflorence) +* [React Rhythm & Blues](https://www.youtube.com/embed/rs9X5MjvC4s) by [Lee Robinson](https://twitter.com/leeerob) +* [RedwoodJS, now with React Server Components](https://www.youtube.com/embed/sjyY4MTECUU) by [Amy Dutton](https://twitter.com/selfteachme) +* [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/embed/djhEgxQf3Kw) by [Evan Bacon](https://twitter.com/Baconbrix) + +**And Q&As with the React and React Native teams:** +- [React Q&A](https://www.youtube.com/embed/T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic) +- [React Native Q&A](https://www.youtube.com/embed/0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren) + +You can watch all of the talks at React Conf 2024 at [conf2024.react.dev](https://conf2024.react.dev/talks). + ## React Conf 2021 {/*react-conf-2021*/} ### React 18 Keynote {/*react-18-keynote*/} @@ -16,13 +85,21 @@ Dans cette plénière, nous partagions notre vision de l'avenir de React, à com Regardez la session plénière intégrale présentée par [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes) et [Rick Hanlon](https://twitter.com/rickhanlonii) : +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="Lecteur vidéo YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="React 18 Keynote" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React 18 for Application Developers {/*react-18-for-application-developers*/} Pour une démo de mise à jour vers React 18, regardez cette présentation de [Shruti Kapoor](https://twitter.com/shrutikapoor08) : +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="Lecteur vidéo YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="React 18 for Application Developers" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/} @@ -32,7 +109,11 @@ Le rendu *streamé* côté serveur permet de générer du HTML à partir de comp La présentation de [Shaundai Person](https://twitter.com/shaundai) ci-dessous explore ce sujet dans le détail : +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="Lecteur vidéo YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="Streaming Server Rendering with Suspense" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### The first React working group {/*the-first-react-working-group*/} @@ -40,7 +121,11 @@ Nous avons créé pour React 18 notre premier groupe de travail afin de collabor Cette présentation d'[Aakansha Doshi](https://twitter.com/aakansha1216) fait un tour d'horizon de ce travail : +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="Lecteur vidéo YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="The first React working group" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React Developer Tooling {/*react-developer-tooling*/} @@ -48,19 +133,31 @@ Pour prendre en charge les nouvelles fonctionnalités de cette version, nous avo Pour plus d'informations et une démo des nouvelles fonctionnalités des outils de développement, regardez la présentation de [Brian Vaughn](https://twitter.com/brian_d_vaughn) : +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="Lecteur vidéo YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="React Developer Tooling" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React without memo {/*react-without-memo*/} En regardant plus loin encore vers l'avenir, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) nous partage la progression de la recherche des React Labs research autour d'un compilateur auto-mémoïsant. Regardez sa présentation pour plus d'informations et une démo d'un prototype du compilateur : +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="Lecteur vidéo YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="React without memo" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React docs keynote {/*react-docs-keynote*/} [Rachel Nabors](https://twitter.com/rachelnabors) a inauguré une séquence de présentations sur l'apprentissage et la conception avec React, au travers d'une plénière retraçant notre investissement dans les nouvelles docs de React ([react.dev](/blog/2023/03/16/introducing-react-dev)) : +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="Lecteur vidéo YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="React docs keynote" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Et plus encore… {/*and-more*/} diff --git a/src/content/errors/index.md b/src/content/errors/index.md index 4c775f90b..0a8b7ccd2 100644 --- a/src/content/errors/index.md +++ b/src/content/errors/index.md @@ -6,4 +6,10 @@ Dans le *build* de production minifié de React, nous évitons d'inclure les mes Nous vous recommandons fortement d'utiliser le *build* de développement en local lorsque vous déboguez votre appli, dans la mesure où il fournit des informations de débogage supplémentaires et des avertissements utiles sur des problèmes potentiels dans vos applis, mais si vous rencontrez une exception en utilisant le *build* de production, le message d'erreur incluera un lien vers la documentation pour cette erreur. +<<<<<<< HEAD À titre d'exemple, consultez : [https://fr.react.dev/errors/421](/errors/421). +======= +We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error. + +For an example, see: [https://react.dev/errors/149](/errors/149). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 8afc2e747..bc2f464ff 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -20,11 +20,19 @@ Supposons que vous ayez une application web existante sur `example.com` dévelop Voici comment nous vous recommandons de procéder : +<<<<<<< HEAD 1. **Construisez la partie React de votre appli** en utilisant l'un des [frameworks basés sur React](/learn/start-a-new-react-project). 2. **Indiquez `/some-app` comme *chemin de base*** dans la configuration de votre framework (voici comment faire avec [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath) ou [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). 3. **Configurez votre serveur ou un proxy** de manière à ce que toutes les requêtes sous `/some-app/` soient traitées par votre application React. Ça garantit que la partie React de votre application peut [bénéficier de tout un tas de bonnes pratiques](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) intégrées à ces frameworks. +======= +1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app). +2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. + +This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a De nombreux frameworks basés sur React sont des frameworks full-stack qui permettent à votre application React de tirer parti du serveur. Cependant, vous pouvez utiliser la même approche même si vous ne pouvez pas ou ne souhaitez pas exécuter JavaScript côté serveur. Dans ce cas, servez plutôt l'export HTML/CSS/JS ([`next export`](https://nextjs.org/docs/advanced-features/static-html-export) pour Next.js, résultat par défaut pour Gatsby) à l'emplacement `/some-app/`. @@ -45,7 +53,11 @@ Un environnement JavaScript modulaire vous permet d'écrire vos composants React * **Si votre application est déjà divisée en fichiers qui utilisent des déclarations `import`**, essayez d'utiliser la configuration que vous avez déjà. Vérifiez si l'écriture de `<div />` dans votre code JS provoque une erreur de syntaxe. Si tel est le cas, vous devrez peut-être [transformer votre code JavaScript avec Babel](https://babeljs.io/setup), et activer le [préréglage Babel React](https://babeljs.io/docs/babel-preset-react) pour utiliser JSX. +<<<<<<< HEAD * **Si votre application n'a pas de configuration existante pour la compilation des modules JavaScript**, mettez-en une en place avec [Vite](https://vitejs.dev/). La communauté Vite propose de [nombreuses intégrations avec des frameworks backend](https://github.com/vitejs/awesome-vite#integrations-with-backends), notament Rails, Django et Laravel. Si votre framework backend ne figure pas dans leur liste, [suivez ce guide](https://vitejs.dev/guide/backend-integration.html) pour intégrer manuellement les builds Vite à votre backend. +======= +* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Pour vérifier si votre configuration fonctionne, exécutez cette commande dans le dossier de votre projet : @@ -57,12 +69,17 @@ Ensuite, ajoutez ces lignes de code en haut de votre fichier JavaScript principa <Sandpack> -```html index.html hidden +```html public/index.html hidden <!DOCTYPE html> <html> <head><title>Mon appli +<<<<<<< HEAD +======= + +
    +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ``` @@ -84,7 +101,11 @@ Si tout le contenu de votre page a été remplacé par un « Bonjour tout le mo +<<<<<<< HEAD Intégrer pour la première fois un environnement JavaScript modulaire dans un projet existant pour la première fois peut sembler intimidant, mais ça en vaut la peine ! Si vous êtes bloqué, essayez nos [ressources communautaires](/community) ou discutez sur [le forum Vite](https://chat.vitejs.dev/). +======= +Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -119,7 +140,7 @@ Vous souhaitez probablement plutôt afficher vos composants React à des emplace -```html index.html +```html public/index.html Mon appli @@ -148,7 +169,11 @@ root.render(); Voyez comment le contenu HTML d'origine de `index.html` est préservé, alors que votre propre composant React `NavigationBar` apparaît désormais à l'intérieur de la balise `

    Gregorio Y. Zara
      @@ -266,7 +270,7 @@ export default function TodoList() {

      Liste des tâches de {person}

      Gregorio Y. Zara
        @@ -318,7 +322,7 @@ export default function TodoList() {

        Liste des tâches de {person.name}

        Gregorio Y. Zara
          @@ -362,7 +366,7 @@ export default function TodoList() {

          Liste des tâches de {person.name}

          Gregorio Y. Zara
            @@ -392,7 +396,7 @@ Déplacez l'URL de l'image dans une propriété `imageUrl` au sein de l'objet `p ```js const person = { name: 'Gregorio Y. Zara', - imageUrl: "https://i.imgur.com/7vQD0fPs.jpg", + imageUrl: "https://react.dev/images/docs/scientists/7vQD0fPs.jpg", theme: { backgroundColor: 'black', color: 'pink' @@ -432,7 +436,11 @@ body > div > div { padding: 20px; } Dans l'objet ci-dessous, l'URL complète de l'image est découpée en quatre parties : l'URL de base, `imageId`, `imageSize` et l'extension de fichier. +<<<<<<< HEAD Nous souhaitons que l'URL de l'image combine ces attributs : URL de base (toujours `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), et l'extension de fichier (toujours `'.jpg'`). Hélas, quelque chose ne va pas dans la façon dont la balise `` spécifie son `src`. +======= +We want the image URL to combine these attributes together: base URL (always `'https://react.dev/images/docs/scientists/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `` tag specifies its `src`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Pouvez-vous réparer ça ? @@ -440,7 +448,7 @@ Pouvez-vous réparer ça ? ```js -const baseUrl = 'https://i.imgur.com/'; +const baseUrl = 'https://react.dev/images/docs/scientists/'; const person = { name: 'Gregorio Y. Zara', imageId: '7vQD0fP', @@ -491,7 +499,7 @@ Vous pouvez écrire la composition de l'URL avec une concaténation JavaScript, ```js -const baseUrl = 'https://i.imgur.com/'; +const baseUrl = 'https://react.dev/images/docs/scientists/'; const person = { name: 'Gregorio Y. Zara', imageId: '7vQD0fP', @@ -568,7 +576,7 @@ export default function TodoList() { ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + person.imageSize + '.jpg' diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 6f5c4f1b3..978855bd2 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -27,6 +27,7 @@ Vous avez peut-être déjà l'habitude d'une catégorie de fonctions pures : le Prenons la formule suivante : y = 2x. +<<<<<<< HEAD Si x = 2 alors y = 4. Toujours. Si x = 3 alors y = 6. Toujours. @@ -34,6 +35,15 @@ Si x = 3 alors y = 6. To Si x = 3, y ne vaudra pas parfois 9, parfois –1 ou parfois 2,5 en fonction du moment de la journée ou de l'état du marché boursier. Si y = 2x et x = 3, y vaudra *toujours* 6. +======= +If x = 2 then y = 4. Always. + +If x = 3 then y = 6. Always. + +If x = 3, y won't sometimes be 9 or –1 or 2.5 depending on the time of day or the state of the stock market. + +If y = 2x and x = 3, y will _always_ be 6. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si nous en faisions une fonction JavaScript, elle ressemblerait à ça : @@ -53,9 +63,15 @@ React est fondé sur cette notion. **React suppose que chaque composant que vous function Recipe({ drinkers }) { return (
              +<<<<<<< HEAD
            1. Faire bouillir {drinkers} tasses d’eau.
            2. Ajouter {drinkers} cuillers de thé et {0.5 * drinkers} cuillers d’épices.
            3. Ajouter {0.5 * drinkers} tasses de lait jusqu’à ébullition, et du sucre selon les goûts de chacun.
              4. +======= +
            4. Boil {drinkers} cups of water.
              5. +
            5. Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
              6. +
            6. Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
              7. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
            ); } @@ -75,11 +91,19 @@ export default function App() {             +<<<<<<< HEAD Lorsque vous passez `drinkers={2}` à `Recipe`, il renverra du JSX avec `2 tasses d’eau`. Toujours. +======= +When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si vous passez `drinkers={4}`, il renverra du JSX avec `4 tasses d’eau`. Toujours. +<<<<<<< HEAD Comme une formule de maths. +======= +Just like a math formula. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Vous pourriez voir vos composants comme des recettes : si vous les suivez et n'introduisez pas de nouveaux ingrédients lors du processus de confection, vous obtiendrez le même plat à chaque fois. Ce « plat » est le JSX que le composant sert à React pour le [rendu](/learn/render-and-commit). @@ -93,7 +117,7 @@ Voici un composant qui enfreint cette règle : -```js +```js {expectedErrors: {'react-compiler': [5]}} let guest = 0; function Cup() { @@ -175,7 +199,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -215,6 +239,7 @@ Toutes les nouvelles fonctionnalités de React que nous sommes en train de const +<<<<<<< HEAD - Un composant doit être pur, ce qui signifie que : - **Il s'occupe de ses affaires.** Il ne modifie aucun objet ou variable qui existaient avant son rendu. - **Pour les mêmes entrées, il produit la même sortie.** Pour un jeu d'entrées données, un composant renverra toujours le même JSX. @@ -225,6 +250,20 @@ Toutes les nouvelles fonctionnalités de React que nous sommes en train de const +======= +* A component must be pure, meaning: + * **It minds its own business.** It should not change any objects or variables that existed before rendering. + * **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. +* Rendering can happen at any time, so components should not depend on each others' rendering sequence. +* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects. +* Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`. +* Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm. + + + + + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Réparer une horloge {/*fix-a-broken-clock*/} @@ -243,7 +282,7 @@ Le rendu est un *calcul*, il ne devrait pas essayer de « faire » des choses. ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -305,7 +344,7 @@ Vous pouvez corriger ce composant en calculant le `className` puis en l'incluant ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -378,7 +417,7 @@ Le code problématique est dans `Profile.js`. Assurez-vous de bien l'avoir comp -```js src/Profile.js +```js {expectedErrors: {'react-compiler': [7]}} src/Profile.js import Panel from './Panel.js'; import { getImageUrl } from './utils.js'; @@ -449,7 +488,7 @@ export default function App() { ```js src/utils.js hidden export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -547,7 +586,7 @@ export default function App() { ```js src/utils.js hidden export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -600,18 +639,24 @@ export default function StoryTray({ stories }) { } ``` -```js src/App.js hidden +```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "L’histoire d’Ankit" }, {id: 1, label: "L’histoire de Clara" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: évite à la mémoire d'être trop phagocytée pendant // que vous lisez les docs. On enfreint ici nos propres @@ -697,18 +742,24 @@ export default function StoryTray({ stories }) { } ``` -```js src/App.js hidden +```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "L’histoire d’Ankit" }, {id: 1, label: "L’histoire de Clara" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: évite à la mémoire d'être trop phagocytée pendant // que vous lisez les docs. On enfreint ici nos propres @@ -769,8 +820,13 @@ Une autre approche consisterait à créer un *nouveau* tableau (en partant de ce ```js src/StoryTray.js active export default function StoryTray({ stories }) { +<<<<<<< HEAD // Copier le tableau ! let storiesToDisplay = stories.slice(); +======= + // Copy the array! + const storiesToDisplay = stories.slice(); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a // N'affecte plus le tableau d'origine : storiesToDisplay.push({ @@ -790,18 +846,24 @@ export default function StoryTray({ stories }) { } ``` -```js src/App.js hidden +```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "L’histoire d’Ankit" }, {id: 1, label: "L’histoire de Clara" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: évite à la mémoire d'être trop phagocytée pendant // que vous lisez les docs. On enfreint ici nos propres diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index 43b61ee74..aa313117a 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -294,7 +294,11 @@ Vous vous demandez peut-être comment React a su que votre Effet devait se resyn ```js {1,3,8} function ChatRoom({ roomId }) { // La prop roomId peut changer au cours du temps useEffect(() => { +<<<<<<< HEAD const connection = createConnection(serverUrl, roomId); // Cet Effet lit roomId +======= + const connection = createConnection(serverUrl, roomId); // This Effect reads roomId +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a connection.connect(); return () => { connection.disconnect(); @@ -1132,7 +1136,7 @@ Si vous constatez qu'une règle du *linter* est ignorée, réactivez-la ! C'est -```js +```js {expectedErrors: {'react-compiler': [16]}} import { useState, useEffect } from 'react'; export default function App() { @@ -1375,7 +1379,7 @@ export default function App() { } ``` -```js src/ChatRoom.js active +```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active import { useState, useEffect } from 'react'; export default function ChatRoom({ roomId, createConnection }) { @@ -1736,7 +1740,11 @@ async function fetchPlaces(planetId) { name: 'Espagne' }, { id: 'vietnam', +<<<<<<< HEAD name: 'Viêt Nam' +======= + name: 'Vietnam' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]); } else if (planetId === 'venus') { resolve([{ @@ -1904,7 +1912,11 @@ async function fetchPlaces(planetId) { name: 'Espagne' }, { id: 'vietnam', +<<<<<<< HEAD name: 'Viêt Nam' +======= + name: 'Vietnam' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]); } else if (planetId === 'venus') { resolve([{ @@ -2067,7 +2079,11 @@ async function fetchPlaces(planetId) { name: 'Espagne' }, { id: 'vietnam', +<<<<<<< HEAD name: 'Viêt Nam' +======= + name: 'Vietnam' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]); } else if (planetId === 'venus') { resolve([{ diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 0712ef6a5..f0301d4fb 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -744,9 +744,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
            - + {children} - +
            ); } @@ -839,13 +839,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index d24f89f77..d1f8dd9e7 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -211,7 +211,11 @@ C'est parce que **les Hooks ne doivent être appelés qu'à la racine de votre c Un premier contournement possible consisterait à n'obtenir une ref que vers leur élément parent, puis à utiliser des méthodes de manipulation du DOM du genre [`querySelectorAll`](https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll) pour « retrouver » les nœuds enfants individuels à partir de là. C'est toutefois une approche fragile, qui peut dérailler si la structure de votre DOM change. +<<<<<<< HEAD Une autre solution serait de **passer une fonction à la prop `ref`**. On parle alors de [fonction de rappel `ref`](/reference/react-dom/components/common#ref-callback) *(ref callback, NdT)*. React appellera votre fonction de rappel ref en lui passant le nœud DOM lorsqu'il sera temps de définir la ref, et avec `null` quand il sera temps de la nettoyer. Ça vous permettra de tenir à jour votre propre tableau ou [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) et d'accéder aux refs par leur position ou par une sorte de clé de correspondance. +======= +Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a L'exemple qui suit utilise cette approche pour défiler vers un nœud quelconque dans une longue liste : @@ -247,26 +251,30 @@ export default function CatFriends() {
              {catList.map((cat) => (
            • { const map = getMap(); - if (node) { - map.set(cat, node); - } else { + map.set(cat, node); + + return () => { map.delete(cat); - } + }; }} > +<<<<<<< HEAD {'Chat +======= + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
              • ))}
            @@ -276,11 +284,22 @@ export default function CatFriends() { } function setupCatList() { - const catList = []; - for (let i = 0; i < 10; i++) { - catList.push("https://loremflickr.com/320/240/cat?lock=" + i); + const catCount = 10; + const catList = new Array(catCount) + for (let i = 0; i < catCount; i++) { + let imageUrl = ''; + if (i < 5) { + imageUrl = "https://placecats.com/neo/320/240"; + } else if (i < 8) { + imageUrl = "https://placecats.com/millie/320/240"; + } else { + imageUrl = "https://placecats.com/bella/320/240"; + } + catList[i] = { + id: i, + imageUrl, + }; } - return catList; } @@ -312,16 +331,6 @@ li { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - } -} -``` - Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient plutôt une [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) associant chaque ID d'élément à un nœud DOM. ([Les refs peuvent stocker n'importe quelle valeur !](/learn/referencing-values-with-refs)) La [fonction de rappel `ref`](/reference/react-dom/components/common#ref-callback) sur chaque élément de la liste s'occupe de mettre à jour les correspondances : @@ -331,6 +340,7 @@ Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient key={cat.id} ref={node => { const map = getMap(); +<<<<<<< HEAD if (node) { // Ajoute à la Map map.set(cat, node); @@ -353,6 +363,8 @@ This example shows another approach for managing the Map with a `ref` callback c key={cat.id} ref={node => { const map = getMap(); +======= +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a // Add to the Map map.set(cat, node); @@ -364,23 +376,56 @@ This example shows another approach for managing the Map with a `ref` callback c > ``` - +This lets you read individual DOM nodes from the Map later. + + + +When Strict Mode is enabled, ref callbacks will run twice in development. + +Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs. + + ## Accéder aux nœuds DOM d'un autre composant {/*accessing-another-components-dom-nodes*/} +<<<<<<< HEAD Quand vous posez une ref sur un composant natif qui produit un élément navigateur tel que ``, React place une référence vers le nœud DOM correspondant (le véritable élément `` du navigateur) dans la propriété `current` de cette ref. En revanche, si vous essayez d'obtenir une ref vers **votre propre** composant, tel que ``, vous obtiendrez par défaut `null`. Voici un exemple qui illustre ça : voyez comme les clics sur le bouton **ne donnent pas** le focus au champ de saisie : +======= + +Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile. + + +You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component). + +```js {3-4,9} +import { useRef } from 'react'; + +function MyInput({ ref }) { + return ; +} + +function MyForm() { + const inputRef = useRef(null); + return +} +``` + +In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to ``. Because `` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `` DOM element. + +The `inputRef` created in `MyForm` now points to the `` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on ``. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js import { useRef } from 'react'; -function MyInput(props) { - return ; +function MyInput({ ref }) { + return ; } export default function MyForm() { @@ -403,6 +448,7 @@ export default function MyForm() { +<<<<<<< HEAD Pour vous aider à repérer le problème, React affichera aussi une erreur dans la console : @@ -462,22 +508,32 @@ export default function Form() { Dans les Design Systems, il est courant pour les composants de bas niveau tels que les boutons, champs, etc. de transmettre leurs refs à leurs nœuds DOM. À l'inverse, les composants de haut niveau tels que les formulaires, listes ou sections de page n'exposent généralement pas leurs nœuds DOM pour éviter d'introduire des dépendances indésirables envers la structure de leur DOM. +======= +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Exposer une partie de votre API grâce à un point d'accès impératif {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/} +<<<<<<< HEAD Dans l'exemple qui précède, `MyInput` expose l'élément DOM original du champ de saisie. Ça permet au composant parent d'en appeler la méthode `focus()`. Hélas, ça permet aussi au composant parent de faire d'autres choses avec, par exemple modifier ses styles CSS. Dans certains cas rares, vous voudrez restreindre les fonctionnalités natives accessibles. Utilisez alors `useImperativeHandle` : +======= +In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle): +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js +<<<<<<< HEAD import { forwardRef, useRef, useImperativeHandle } from 'react'; +======= +import { useRef, useImperativeHandle } from "react"; +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -const MyInput = forwardRef((props, ref) => { +function MyInput({ ref }) { const realInputRef = useRef(null); useImperativeHandle(ref, () => ({ // N'expose que la méthode `focus()`, rien de plus @@ -485,8 +541,8 @@ const MyInput = forwardRef((props, ref) => { realInputRef.current.focus(); }, })); - return ; -}); + return ; +}; export default function Form() { const inputRef = useRef(null); @@ -498,9 +554,13 @@ export default function Form() { return ( <> +<<<<<<< HEAD +======= + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ); } @@ -508,7 +568,11 @@ export default function Form() { +<<<<<<< HEAD Ici, `realInputRef` dans `MyInput` référence le nœud DOM effectif du champ de saisie. En revanche, `useImperativeHandle` indique à React de fournir votre propre objet sur-mesure comme valeur de la ref pour le composant parent. Ainsi `inputRef.current` dans le composant `Form` ne verra que la méthode`focus`. Au final, le « point d'accès » de la ref n'est pas le nœud DOM, mais l'objet dédié que vous avez créé dans l'appel à `useImperativeHandle`. +======= +Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -717,11 +781,20 @@ Ceci étant dit, ça ne signifie pas que l'interdiction est absolue. Il faut ju +<<<<<<< HEAD - Les Refs sont un concept générique, mais sont généralement utilisées pour référencer des nœuds DOM. - Pour indiquer à React de placer une référence à un nœud DOM dans `myRef.current`, utilisez la prop `ref`, comme dans `
            `. - En général, vous utiliserez les refs pour des actions non destructrices telles que la gestion du focus, le défilement ou la mesure des dimensions et positions d'éléments du DOM. - Un composant n'expose pas, par défaut, ses nœuds DOM. Vous pouvez choisir d'en exposer un en utilisant `forwardRef` et en passant le second argument `ref` de la fonction de rappel au nœud désiré. - Évitez de modifier les nœuds DOM gérés par React. Si vous devez absolument le faire, limitez-vous aux parties que React n'a aucune raison de mettre à jour. +======= +- Refs are a generic concept, but most often you'll use them to hold DOM elements. +- You instruct React to put a DOM node into `myRef.current` by passing `
            `. +- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements. +- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop. +- Avoid changing DOM nodes managed by React. +- If you do modify DOM nodes managed by React, modify parts that React has no reason to update. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -946,12 +1019,30 @@ export default function CatFriends() { ); } -const catList = []; -for (let i = 0; i < 10; i++) { - catList.push({ +const catCount = 10; +const catList = new Array(catCount); +for (let i = 0; i < catCount; i++) { + const bucket = Math.floor(Math.random() * catCount) % 2; + let imageUrl = ''; + switch (bucket) { + case 0: { + imageUrl = "https://placecats.com/neo/250/200"; + break; + } + case 1: { + imageUrl = "https://placecats.com/millie/250/200"; + break; + } + case 2: + default: { + imageUrl = "https://placecats.com/bella/250/200"; + break; + } + } + catList[i] = { id: i, - imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i - }); + imageUrl, + }; } ``` @@ -1063,12 +1154,30 @@ export default function CatFriends() { ); } -const catList = []; -for (let i = 0; i < 10; i++) { - catList.push({ +const catCount = 10; +const catList = new Array(catCount); +for (let i = 0; i < catCount; i++) { + const bucket = Math.floor(Math.random() * catCount) % 2; + let imageUrl = ''; + switch (bucket) { + case 0: { + imageUrl = "https://placecats.com/neo/250/200"; + break; + } + case 1: { + imageUrl = "https://placecats.com/millie/250/200"; + break; + } + case 2: + default: { + imageUrl = "https://placecats.com/bella/250/200"; + break; + } + } + catList[i] = { id: i, - imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i - }); + imageUrl, + }; } ``` @@ -1119,7 +1228,11 @@ Faites en sorte qu'un clic sur le bouton « Recherche » donne le focus au cha +<<<<<<< HEAD Vous aurez besoin de `forwardRef` pour choisir d'exposer un nœud DOM pour votre propre composant `SearchInput`. +======= +You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -1204,6 +1317,7 @@ export default function SearchButton({ onClick }) { ``` ```js src/SearchInput.js +<<<<<<< HEAD import { forwardRef } from 'react'; export default forwardRef( @@ -1216,6 +1330,16 @@ export default forwardRef( ); } ); +======= +export default function SearchInput({ ref }) { + return ( + + ); +} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ``` ```css diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 197f0da92..7c122e522 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -468,15 +468,19 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
            - + {children} - +
            ); } ``` +<<<<<<< HEAD React le comprend ainsi : « si un composant à l'intérieur de `
            ` demande `LevelContext`, alors donne-lui ce `level` ». Le composant utilisera la valeur du `` le plus proche dans l'arbre au-dessus de lui. +======= +This tells React: "if any component inside this `
            ` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -514,9 +518,9 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
            - + {children} - +
            ); } @@ -566,9 +570,15 @@ export const LevelContext = createContext(1); Le résultat est le même qu'avec le code d'origine, mais vous n'avez plus besoin de transmettre la prop `level` à chaque composant `Heading`. Au lieu de ça, il « détermine » son niveau d'en-tête en interrogeant la `Section` la plus proche : +<<<<<<< HEAD 1. Vous passez une prop `level` à la `
            `. 2. `Section` enrobe ses enfants dans un ``. 3. `Heading` demande la valeur la plus proche de `LevelContext` avec `useContext(LevelContext)`. +======= +1. You pass a `level` prop to the `
            `. +2. `Section` wraps its children into ``. +3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Utiliser et fournir le contexte depuis le même composant {/*using-and-providing-context-from-the-same-component*/} @@ -595,9 +605,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
            - + {children} - +
            ); } @@ -643,9 +653,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
            - + {children} - +
            ); } @@ -776,9 +786,9 @@ export default function Section({ children, isFancy }) { 'section ' + (isFancy ? 'fancy' : '') }> - + {children} - +
            ); } @@ -853,10 +863,19 @@ Si aucune de ces approches ne vous convient, envisagez un contexte. ## Cas d'utilisation des contextes {/*use-cases-for-context*/} +<<<<<<< HEAD * **Thème :** si votre appli permet à l'utilisateur d'en changer l'apparence (comme le mode sombre), vous pouvez mettre un fournisseur de contexte tout en haut de votre appli et utiliser ce contexte dans les composants qui ont besoin d'ajuster leur aspect. * **Compte utilisateur :** de nombreux composants peuvent avoir besoin de connaître l'utilisateur actuellement connecté. Le fait de le placer dans le contexte en facilite la lecture depuis n'importe quel endroit de l'arbre. Certaines applis vous permettent d'utiliser plusieurs comptes simultanément (par exemple pour laisser un commentaire avec un utilisateur différent). Dans ce cas, il peut être pratique d'enrober une partie de l'interface utilisateur dans un fournisseur avec un compte utilisateur différent. * **Routage :** la plupart des solutions de routage utilise un contexte en interne pour conserver la route actuelle. C'est ainsi que chaque lien « sait » s'il est actif ou non. Si vous construisez votre propre routeur, vous serez peut-être tenté·e de faire de même. * **Gestion d'état :** au fur et à mesure que votre appli grandit, vous pouvez vous retrouver avec de nombreux états proches de la racine de votre appli. De nombreux composants distants pourraient vouloir les changer. Il est courant [d'utiliser un réducteur avec un contexte](/learn/scaling-up-with-reducer-and-context) pour gérer des états complexes et les transmettre à des composants distants sans trop galérer. +======= +* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look. +* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value. +* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too. +* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle. + +Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Le contexte ne se limite pas aux valeurs statiques. Si vous passez une valeur différente au prochain rendu, React mettra à jour tous les composants descendants qui le lisent ! C'est pourquoi le contexte est souvent utilisé en combinaison avec l'état. @@ -864,6 +883,7 @@ D'une manière générale, si certaines informations sont nécessaires pour des +<<<<<<< HEAD * Le contexte permet à un composant de fournir certaines informations à l'ensemble de l'arbre situé en dessous de lui. * Pour transmettre un contexte : 1. Créez-le et exportez-le avec `export const MyContext = createContext(defaultValue)`. @@ -872,6 +892,16 @@ D'une manière générale, si certaines informations sont nécessaires pour des * Le contexte traverse tous les composants intermédiaires. * Le contexte vous permet d'écrire des composants qui « s'adaptent à leur environnement ». * Avant d'utiliser un contexte, essayez de passer par les props ou en mettant du JSX dans les `children`. +======= +* Context lets a component provide some information to the entire tree below it. +* To pass context: + 1. Create and export it with `export const MyContext = createContext(defaultValue)`. + 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. + 3. Wrap children into `` to provide it from a parent. +* Context passes through any components in the middle. +* Context lets you write components that "adapt to their surroundings". +* Before you use context, try passing props or passing JSX as `children`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -964,6 +994,7 @@ export const places = [{ imageId: 'K9HVAGH' }, { id: 1, +<<<<<<< HEAD name: 'Rainbow Village à Taichung, Taiwan', description: "Pour sauver les maisons de la démolition, Huang Yung-Fu, un résident de la région, a peint l'ensemble des 1 200 maisons en 1924.", imageId: '9EAYZrt' @@ -986,6 +1017,30 @@ export const places = [{ id: 5, name: 'Chefchaouen, Maroc', description: "Plusieurs théories expliquent pourquoi les maisons sont peintes en bleu, notamment parce que cette couleur repousserait les moustiques ou qu'elle symboliserait le ciel et le paradis.", +======= + name: 'Rainbow Village in Taichung, Taiwan', + description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.', + imageId: '9EAYZrt' +}, { + id: 2, + name: 'Macromural de Pachuca, Mexico', + description: 'One of the largest murals in the world covering homes in a hillside neighborhood.', + imageId: 'DgXHVwu' +}, { + id: 3, + name: 'Selarón Staircase in Rio de Janeiro, Brazil', + description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people."', + imageId: 'aeO3rpI' +}, { + id: 4, + name: 'Burano, Italy', + description: 'The houses are painted following a specific color system dating back to 16th century.', + imageId: 'kxsph5C' +}, { + id: 5, + name: 'Chefchaouen, Marocco', + description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a imageId: 'rTqKo46' }, { id: 6, @@ -998,7 +1053,7 @@ export const places = [{ ```js src/utils.js export function getImageUrl(place) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + place.imageId + 'l.jpg' ); @@ -1022,7 +1077,11 @@ li { Retirez la prop `imageSize` de tous les composants. +<<<<<<< HEAD Créez et exportez `ImageSizeContext` depuis `Context.js`. Ensuite, enrobez la `List` dans `` pour propager la valeur vers le bas, puis `useContext(ImageSizeContext)` pour la lire dans `PlaceImage` : +======= +Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -1036,7 +1095,7 @@ export default function App() { const [isLarge, setIsLarge] = useState(false); const imageSize = isLarge ? 150 : 100; return ( -
            -             +             ) } @@ -1103,6 +1162,7 @@ export const places = [{ imageId: 'K9HVAGH' }, { id: 1, +<<<<<<< HEAD name: 'Rainbow Village à Taichung, Taiwan', description: "Pour sauver les maisons de la démolition, Huang Yung-Fu, un résident de la région, a peint l'ensemble des 1 200 maisons en 1924.", imageId: '9EAYZrt' @@ -1125,6 +1185,30 @@ export const places = [{ id: 5, name: 'Chefchaouen, Maroc', description: "Plusieurs théories expliquent pourquoi les maisons sont peintes en bleu, notamment parce que cette couleur repousserait les moustiques ou qu'elle symboliserait le ciel et le paradis.", +======= + name: 'Rainbow Village in Taichung, Taiwan', + description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.', + imageId: '9EAYZrt' +}, { + id: 2, + name: 'Macromural de Pachuca, Mexico', + description: 'One of the largest murals in the world covering homes in a hillside neighborhood.', + imageId: 'DgXHVwu' +}, { + id: 3, + name: 'Selarón Staircase in Rio de Janeiro, Brazil', + description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people".', + imageId: 'aeO3rpI' +}, { + id: 4, + name: 'Burano, Italy', + description: 'The houses are painted following a specific color system dating back to 16th century.', + imageId: 'kxsph5C' +}, { + id: 5, + name: 'Chefchaouen, Marocco', + description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a imageId: 'rTqKo46' }, { id: 6, @@ -1137,7 +1221,7 @@ export const places = [{ ```js src/utils.js export function getImageUrl(place) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + place.imageId + 'l.jpg' ); diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index 6a542151d..0eaf4236b 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -29,7 +29,7 @@ function Avatar() { return ( Lin Lanying
            • +<<<<<<< HEAD Profession : physicienne et chimiste
            • Récompenses : 4 (Prix Nobel de Physique, Prix Nobel de Chimie, Médaille Davy, Médaille Matteucci) +======= + Profession: + physicist and chemist +
              • +
            • + Awards: 4 + (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
            • A découvert : @@ -475,12 +484,21 @@ export default function Gallery() { />
              • +<<<<<<< HEAD Profession : géochimiste
              • Récompenses : 2 (Prix Miyake de géochimie, Prix Tanaka) +======= + Profession: + geochemist +
                • +
              • + Awards: 2 + (Miyake Prize for geochemistry, Tanaka Prize) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
              • A découvert : @@ -496,7 +514,7 @@ export default function Gallery() { ```js src/utils.js export function getImageUrl(imageId, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + imageId + size + '.jpg' @@ -604,7 +622,7 @@ export default function Gallery() { ```js src/utils.js export function getImageUrl(imageId, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + imageId + size + '.jpg' @@ -701,7 +719,7 @@ export default function Gallery() { ```js src/utils.js export function getImageUrl(person, size = 's') { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -768,7 +786,7 @@ export default function Profile() { ```js src/utils.js export function getImageUrl(person, size) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -832,7 +850,7 @@ export default function Profile() { ```js src/utils.js export function getImageUrl(person, size) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -903,7 +921,7 @@ export default function Profile() { ```js src/utils.js export function getImageUrl(person, size) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + size + '.jpg' @@ -936,7 +954,7 @@ export default function Profile() {

                Photo

                Aklilu LemmaPhoto

    Aklilu Lemma Aklilu Lemma +<<<<<<< HEAD Voici comment les visualiser sous forme d'arbre : +======= +Here's how these look as a tree: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -496,7 +500,11 @@ export default function App() { return (
    {isPaused ? ( +<<<<<<< HEAD

    À bientôt !

    +======= +

    See you later!

    +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ) : ( )} @@ -672,7 +680,11 @@ label { +<<<<<<< HEAD L'état du compteur se réinitialise quand vous cliquez sur la case. Bien que vous affichiez un `Counter`, le premier enfant du `div` passe d'un `div` à une `section`. Lorsque l'enfant `div` a été retiré du DOM, tout l'arbre en dessous de lui (ce qui inclut le `Counter` et son état) a également été détruit. +======= +The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -704,7 +716,7 @@ Ici, la fonction du composant `MyTextField` est définie à *l'intérieur de* `M -```js +```js {expectedErrors: {'react-compiler': [7]}} import { useState } from 'react'; export default function MyComponent() { @@ -1431,16 +1443,26 @@ export default function App() { if (reverse) { return ( <> +<<<<<<< HEAD +======= + + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} ); } else { return ( <> +<<<<<<< HEAD +======= + + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} ); @@ -1493,16 +1515,26 @@ export default function App() { if (reverse) { return ( <> +<<<<<<< HEAD +======= + + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} ); } else { return ( <> +<<<<<<< HEAD +======= + + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} ); @@ -1887,6 +1919,7 @@ export default function Gallery() { } let images = [{ +<<<<<<< HEAD place: 'Penang, Malaisie', src: 'https://i.imgur.com/FJeJR8M.jpg' }, { @@ -1907,6 +1940,28 @@ let images = [{ }, { place: 'Ljubljana, Slovénie', src: 'https://i.imgur.com/3aIiwfm.jpg' +======= + place: 'Penang, Malaysia', + src: 'https://react.dev/images/docs/scientists/FJeJR8M.jpg' +}, { + place: 'Lisbon, Portugal', + src: 'https://react.dev/images/docs/scientists/dB2LRbj.jpg' +}, { + place: 'Bilbao, Spain', + src: 'https://react.dev/images/docs/scientists/z08o2TS.jpg' +}, { + place: 'Valparaíso, Chile', + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' +}, { + place: 'Schwyz, Switzerland', + src: 'https://react.dev/images/docs/scientists/JBbMpWY.jpg' +}, { + place: 'Prague, Czechia', + src: 'https://react.dev/images/docs/scientists/QwUKKmF.jpg' +}, { + place: 'Ljubljana, Slovenia', + src: 'https://react.dev/images/docs/scientists/3aIiwfm.jpg' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -1955,6 +2010,7 @@ export default function Gallery() { } let images = [{ +<<<<<<< HEAD place: 'Penang, Malaisie', src: 'https://i.imgur.com/FJeJR8M.jpg' }, { @@ -1975,6 +2031,28 @@ let images = [{ }, { place: 'Ljubljana, Slovénie', src: 'https://i.imgur.com/3aIiwfm.jpg' +======= + place: 'Penang, Malaysia', + src: 'https://react.dev/images/docs/scientists/FJeJR8M.jpg' +}, { + place: 'Lisbon, Portugal', + src: 'https://react.dev/images/docs/scientists/dB2LRbj.jpg' +}, { + place: 'Bilbao, Spain', + src: 'https://react.dev/images/docs/scientists/z08o2TS.jpg' +}, { + place: 'Valparaíso, Chile', + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' +}, { + place: 'Schwyz, Switzerland', + src: 'https://react.dev/images/docs/scientists/JBbMpWY.jpg' +}, { + place: 'Prague, Czechia', + src: 'https://react.dev/images/docs/scientists/QwUKKmF.jpg' +}, { + place: 'Ljubljana, Slovenia', + src: 'https://react.dev/images/docs/scientists/3aIiwfm.jpg' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -2011,7 +2089,7 @@ export default function ContactList() {
    ); @@ -648,8 +658,13 @@ export default function Picture() { > Des maisons multicolores à Kampung Pelangi, Indonésie>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a onClick={e => e.stopPropagation()} />
    @@ -659,8 +674,13 @@ export default function Picture() {
    Des maisons multicolores à Kampung Pelangi, Indonésie>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a onClick={() => setIsActive(true)} />
    diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 6af5d46a8..535fe0a2a 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -35,7 +35,11 @@ const ref = useRef(0); ```js { +<<<<<<< HEAD current: 0 // La valeur que vous avez passée à useRef +======= + current: 0 // The value you passed to useRef +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } ``` @@ -211,7 +215,7 @@ Si vous utilisiez une ref, React ne déclencherait jamais un nouveau rendu du co -```js +```js {expectedErrors: {'react-compiler': [13]}} import { useRef } from 'react'; export default function Counter() { @@ -311,7 +315,7 @@ Les simples variables comme `let timeoutID` ne « survivent » pas d'un rendu -```js +```js {expectedErrors: {'react-compiler': [10]}} import { useState } from 'react'; export default function Chat() { @@ -416,7 +420,7 @@ Ce bouton est censé basculer entre un affichage "On" et "Off". Pourtant, il aff -```js +```js {expectedErrors: {'react-compiler': [10]}} import { useRef } from 'react'; export default function Toggle() { @@ -462,7 +466,11 @@ export default function Toggle() { #### Corriger le *debouncing* {/*fix-debouncing*/} +<<<<<<< HEAD Dans l'exemple qui suit, tous les gestionnaires de clic des boutons sont *["debounced"](https://redd.one/blog/debounce-vs-throttle)*. Pour saisir ce que ça signifie, pressez l'un des boutons. Remarquez que le message apparaît une seconde plus tard. Si vous pressez le bouton pendant que vous attendez le message, le timer sera réinitialisé. Du coup, si vous cliquez en rafale sur le même bouton, le message n'apparaîtra qu'une seconde *après* que vous aurez arrêté de cliquer. Le *debouncing* permet de retarder une action jusqu'à ce que l'utilisateur « termine ce qu'il est en train de faire ». +======= +In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Cet exemple fonctionne, mais pas tout à fait comme prévu. Les boutons ne sont pas indépendants. Pour comprendre le problème, cliquez sur l'un des boutons, puis cliquez immédiatement sur un autre bouton. Vous vous attendriez à ce qu'une fois le délai écoulé, vous obteniez les messages des deux boutons. Mais seul le message du dernier bouton apparaît. Celui du premier bouton est perdu. diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 01bcbb539..cbefdf341 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -303,7 +303,7 @@ Mettre le *linter* en sourdine entraîne des bugs surprenants qui sont difficile -```js +```js {expectedErrors: {'react-compiler': [14]}} import { useState, useEffect } from 'react'; export default function Timer() { @@ -428,7 +428,11 @@ function Form() { function handleSubmit() { // ✅ Correct : logique événementielle dans un gestionnaire d’événement post('/api/register'); +<<<<<<< HEAD showNotification('Votre inscription est confirmée !', theme); +======= + showNotification('Successfully registered!', theme); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } // ... @@ -609,6 +613,7 @@ function ChatRoom({ roomId }) { ### Voulez-vous lire une valeur sans « réagir » à ses changements ? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/} +<<<<<<< HEAD Cette section décrit une **API expérimentale : elle n’a donc pas encore été livrée** dans une version stable de React. @@ -616,6 +621,9 @@ Cette section décrit une **API expérimentale : elle n’a donc pas encore ét Disons que vous souhaitez jouer un son lorsque l'utilisateur reçoit un nouveau message, à moins que `isMuted` ne soit à `true` : +======= +Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js {3,10-12} function ChatRoom({ roomId }) { @@ -794,7 +802,7 @@ C'est important de déclarer cet objet comme dépendance ! Ça garantit par exe -```js +```js {expectedErrors: {'react-compiler': [10]}} import { useState, useEffect } from 'react'; import { createConnection } from './chat.js'; @@ -885,7 +893,11 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' }; console.log(Object.is(options1, options2)); // false ``` +<<<<<<< HEAD **Les dépendances aux objets et fonctions peuvent entraîner des resynchronisations excessives de votre Effet.** +======= +**Object and function dependencies can make your Effect re-synchronize more often than you need.** +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Voilà pourquoi, autant que possible, vous devriez essayer d'éviter les objets et fonctions dans les dépendances de votre Effet. Essayez plutôt de les sortir de votre composant, ou de les déplacer au sein de votre Effet, ou d'en extraire les valeurs primitives. @@ -1242,7 +1254,11 @@ export default function Timer() { +<<<<<<< HEAD Au lieu de lire `count` au sein de l'Effet, passez à React la fonction `c => c + 1` (« incrémente ce nombre ! »). React l'appliquera pour le prochain rendu. Et comme vous n'avez plus besoin de lire la valeur de `count` depuis votre Effet, vous pouvez ramener ses dépendances à un tableau vide (`[]`). Ça évite que votre Effet ne recrée l'intervalle à chaque fois. +======= +Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -1260,25 +1276,9 @@ Y'a-t-il une ligne de code dans votre Effet qui ne devrait pas être réactive  -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js import { useState, useEffect, useRef } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; import { FadeInAnimation } from './animation.js'; function Welcome({ duration }) { @@ -1387,26 +1387,10 @@ Votre Effet a besoin de lire la dernière valeur à jour de `duration`, mais vou -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js import { useState, useEffect, useRef } from 'react'; import { FadeInAnimation } from './animation.js'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; function Welcome({ duration }) { const ref = useRef(null); @@ -1826,8 +1810,8 @@ Une autre fonction n'existe que pour passer des données issues de l'état à un ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1908,7 +1892,7 @@ export default function App() { ```js src/ChatRoom.js active import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export default function ChatRoom({ roomId, createConnection, onMessage }) { useEffect(() => { @@ -2121,8 +2105,8 @@ Par conséquent, la reconnexion au serveur n'a lieu que lorsqu'une modification ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -2190,7 +2174,7 @@ export default function App() { ```js src/ChatRoom.js active import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; import { createEncryptedConnection, createUnencryptedConnection, diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index e83b99e31..1c1c3f542 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -54,8 +54,13 @@ root.render(); export default function Image() { return ( 'Floralis Genérica' par Eduardo Catalano : une sculpture de fleur métallique gigantesque avec des pétales réfléchissants.>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> ); } @@ -70,9 +75,15 @@ Essayez de commenter l'appel à `root.render()` pour voir votre composant dispar Une fois que le composant a fait son rendu initial, vous pouvez déclencher des rendus supplémentaires en mettant à jour son état au moyen d'une [fonction `set`](/reference/react/useState#setstate). Mettre à jour l'état local d'un composant met automatiquement un rendu en file d'attente. (C'est un peu comme le convive d'un restaurant qui commanderait du thé, un dessert et plein d'autres choses après avoir passé sa commande initiale, en fonction de l'état de sa faim et de sa soif.) +<<<<<<< HEAD +======= + + + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Étape 2 : rendu des composants par React {/*step-2-react-renders-your-components*/} @@ -84,7 +95,11 @@ Après que vous avez déclenché un rendu, React appelle vos composants pour dé Ce processus est récursif : si le composant mis à jour renvoie un autre composant, React fera le rendu de *ce* composant-là ensuite, et si ce dernier renvoie à son tour un autre composant, il fera le rendu de *ce* composant-là, et ainsi de suite. Le processus continue jusqu'à ce qu'il ne reste plus de composants imbriqués à traiter, pour que React sache exactement ce qu'il doit afficher à l'écran. +<<<<<<< HEAD Dans l'exemple qui suit, React appellera `Gallery()`, puis plusieurs fois `Image()` : +======= +In the following example, React will call `Gallery()` and `Image()` several times: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -103,8 +118,13 @@ export default function Gallery() { function Image() { return ( Floralis Genérica' par Eduardo Catalano : une sculpture de fleur métallique gigantesque avec des pétales réfléchissants.>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> ); } @@ -124,8 +144,13 @@ img { margin: 0 10px 10px 0; } +<<<<<<< HEAD - **Lors du rendu initial**, React [créera les nœuds DOM](https://developer.mozilla.org/fr/docs/Web/API/Document/createElement) pour les balises `
    `, `

    ` et les trois ``. - **Lors des rendus ultérieurs**, React déterminera si certaines de leurs propriétés ont changé depuis le rendu précédent. Il gardera cette information au chaud jusqu'à l'étape suivante : la phase de commit. +======= +* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `
    `, `

    `, and three `` tags. +* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -148,10 +173,17 @@ Le comportement par défaut, qui fait le rendu de tous les composants enveloppé ## Étape 3 : commit dans le DOM par React {/*step-3-react-commits-changes-to-the-dom*/} +<<<<<<< HEAD Après avoir fait le rendu de vos composants (c'est-à-dire après avoir appelé leurs fonctions), React devra mettre à jour le DOM. - **Lors du rendu initial**, React utilisera l'API DOM [`appendChild()`](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) pour retranscrire à l'écran tous les nœuds DOM qu'il a créés. - **Lors des rendus ultérieurs**, React s'attachera à effectuer le strict minimum d'opérations nécessaires (qu'il aura déterminées lors de la phase de rendu !) pour mettre le DOM en correspondance avec le résultat du dernier rendu en date. +======= +After rendering (calling) your components, React will modify the DOM. + +* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. +* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a **React ne modifie les nœuds DOM que s'il y a un écart d'un rendu à l'autre.** Par exemple, voici un composant qui refait son rendu avec des props différentes passées depuis son parent à chaque seconde. Remarquez que vous pouvez ajouter du texte dans l'``, modifier sa `value`, mais le texte ne disparaît pas quand le composant refait son rendu : diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 1a0d25487..3f7402b6e 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -117,7 +117,11 @@ const people = [{ }, { id: 3, name: 'Percy Lavon Julian', +<<<<<<< HEAD profession: 'chimiste', +======= + profession: 'chemist', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { id: 4, name: 'Subrahmanyan Chandrasekhar', @@ -225,7 +229,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -357,7 +361,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -516,7 +520,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -631,7 +635,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -745,7 +749,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); @@ -863,7 +867,7 @@ export const people = [{ ```js src/utils.js export function getImageUrl(person) { return ( - 'https://i.imgur.com/' + + 'https://react.dev/images/docs/scientists/' + person.imageId + 's.jpg' ); diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md index 2253d86c9..29aa4e690 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -171,7 +171,11 @@ button { margin-right: 10px; } ### Passer des gestionnaires d’événements en tant que props {/*passing-event-handlers-as-props*/} +<<<<<<< HEAD Souvent, vous souhaiterez que le composant parent spécifie le gestionnaire d’événement d’un composant enfant. Prenons l’exemple des boutons : en fonction de l’endroit où vous utilisez un composant `Button`, vous voudrez peut-être exécuter une fonction différente, par exemple voir un film ou téléverser une image. +======= +Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Pour ça, vous devez passer une prop reçue du composant parent en tant que gestionnaire d’événement, comme ceci : @@ -314,11 +318,19 @@ button { margin-right: 10px; } +<<<<<<< HEAD Remarquez que le composant `App` n’a pas besoin de savoir *ce que fera* `Toolbar` avec `onPlayMovie` ou `onUploadImage`. C’est un détail d’implémentation de `Toolbar`. Ici, `Toolbar` les transmet en tant que gestionnaires `onClick` à ses `Button`s, mais il pourrait également les déclencher ultérieurement avec un raccourci clavier. Nommer les props d’après des interactions spécifiques à l’application telles que `onPlayMovie` vous donne de la flexibilité pour modifier leur utilisation ultérieurement. Assurez-vous d’utiliser les balises HTML appropriées pour vos gestionnaires d’événements. Par exemple, utilisez [` + ); +} +``` + + + +## Async Server Component with Suspense {/*async-suspense*/} + + + +```js src/App.js +import { Suspense } from 'react'; +import Albums from './Albums'; + +export default function App() { + return ( +
    +

    Music

    + Loading albums...

    }> + +     +
    + ); +} +``` + +```js src/Albums.js +async function fetchAlbums() { + await new Promise(resolve => setTimeout(resolve, 1000)); + return ['Abbey Road', 'Let It Be', 'Revolver']; +} + +export default async function Albums() { + const albums = await fetchAlbums(); + return ( +
      + {albums.map(album => ( +
    • {album}
      • + ))} +
    + ); +} +``` + +     + +## Streaming Proof {/*streaming-proof*/} + +This demo proves streaming is incremental. The shell renders instantly with a `` fallback. After 2 seconds the async component streams in and replaces it — without re-rendering the outer content. The timestamps show the gap. + + + +```js src/App.js +import { Suspense } from 'react'; +import SlowData from './SlowData'; +import Timestamp from './Timestamp'; + +export default function App() { + return ( +
    +

    Streaming Proof

    +

    Shell rendered at:

    + ⏳ Waiting for data to stream in...

    }> + +     +
    + ); +} +``` + +```js src/SlowData.js +import Timestamp from './Timestamp'; + +async function fetchData() { + await new Promise(resolve => setTimeout(resolve, 2000)); + return ['Chunk A', 'Chunk B', 'Chunk C']; +} + +export default async function SlowData() { + const items = await fetchData(); + return ( +
    +

    Data streamed in at:

    +
      + {items.map(item => ( +
    • {item}
      • + ))} +
    +
    + ); +} +``` + +```js src/Timestamp.js +'use client'; + +export default function Timestamp() { + return {new Date().toLocaleTimeString()}; +} +``` + +     + +## Flight Data Types {/*flight-data-types*/} + +This demo passes Map, Set, Date, and BigInt from a server component through the Flight stream to a client component, proving the full Flight protocol type system works end-to-end. + + + +```js src/App.js +import DataViewer from './DataViewer'; + +export default function App() { + const map = new Map([ + ['alice', 100], + ['bob', 200], + ]); + const set = new Set(['react', 'next', 'remix']); + const date = new Date('2025-06-15T12:00:00Z'); + const big = 9007199254740993n; + + return ( +
    +

    Flight Data Types

    + +
    + ); +} +``` + +```js src/DataViewer.js +'use client'; + +export default function DataViewer({ map, set, date, big }) { + const checks = [ + ['Map', map instanceof Map, () => ( +
      {[...map.entries()].map(([k, v]) =>
    • {k}: {v}
      • )}
    + )], + ['Set', set instanceof Set, () => ( +
      {[...set].map(v =>
    • {v}
      • )}
    + )], + ['Date', date instanceof Date, () => ( +

    {date.toISOString()}

    + )], + ['BigInt', typeof big === 'bigint', () => ( +

    {big.toString()}

    + )], + ]; + + return ( +
    + {checks.map(([label, passed, render]) => ( +
    + {label}: {passed ? 'pass' : 'FAIL'} + {render()} +
    + ))} +
    + ); +} +``` + +     + +## Promise Streaming with use() {/*promise-streaming-use*/} + +The server creates a promise (resolves in 2s) and passes it as a prop through a parent async component that suspends for 3s. When the parent reveals at ~3s, the promise is already resolved — so `use()` returns instantly with no inner fallback. The elapsed time should be ~3000ms (the parent's delay), not ~5000ms (which would mean the promise restarted on the client). + + + +```js src/App.js +import { Suspense } from 'react'; +import SlowParent from './SlowParent'; +import UserCard from './UserCard'; + +async function fetchUser() { + await new Promise(resolve => setTimeout(resolve, 2000)); + return { name: 'Alice', role: 'Engineer' }; +} + +function now() { + return Date.now(); +} + +export default function App() { + const serverTime = now(); + const userPromise = fetchUser(); + return ( +
    +

    Promise Streaming

    +

    Promise resolves in 2s. Parent suspends for 3s.

    + Outer: waiting for parent (3s)...

    }> + + Inner: waiting for data (should not appear!)

    }> + +     +     +     +
    + ); +} +``` + +```js src/SlowParent.js +export default async function SlowParent({ children }) { + await new Promise(resolve => setTimeout(resolve, 3000)); + return
    {children}
    ; +} +``` + +```js src/UserCard.js +'use client'; +import { use } from 'react'; + +function now() { + return Date.now(); +} +export default function UserCard({ userPromise, serverTime }) { + const user = use(userPromise); + const elapsed = now() - serverTime; + return ( +
    + {user.name} +

    {user.role}

    +

    + Rendered {elapsed}ms after server created the promise. +

    +

    + ~3000ms = promise already resolved, waited only for parent. + ~5000ms would mean the promise restarted on the client. +

    +
    + ); +} +``` + +     + +## Flight Data Types in Server Actions {/*flight-data-types-actions*/} + +This demo sends Map, Set, Date, and BigInt from a client component *to* a server action via `encodeReply`/`decodeReply`, then verifies the types survived the round trip. + + + +```js src/App.js +import { testTypes, getResults } from './actions'; +import TestButton from './TestButton'; + +export default async function App() { + const results = await getResults(); + return ( +
    +

    Flight Types in Server Actions

    + + {results ? ( +
    + {results.map(r => ( +
    + {r.label}: {r.ok ? 'pass' : 'FAIL'} +

    {r.detail}

    +
    + ))} +
    + ) : ( +

    Click the button to send typed data to the server action.

    + )} +
    + ); +} +``` + +```js src/actions.js +'use server'; + +let results = null; + +export async function testTypes(map, set, date, big) { + results = [ + { + label: 'Map', + ok: map instanceof Map, + detail: map instanceof Map + ? 'entries: ' + JSON.stringify([...map.entries()]) + : 'received: ' + typeof map, + }, + { + label: 'Set', + ok: set instanceof Set, + detail: set instanceof Set + ? 'values: ' + JSON.stringify([...set]) + : 'received: ' + typeof set, + }, + { + label: 'Date', + ok: date instanceof Date, + detail: date instanceof Date + ? date.toISOString() + : 'received: ' + typeof date, + }, + { + label: 'BigInt', + ok: typeof big === 'bigint', + detail: typeof big === 'bigint' + ? big.toString() + : 'received: ' + typeof big, + }, + ]; +} + +export async function getResults() { + return results; +} +``` + +```js src/TestButton.js +'use client'; +import { useTransition } from 'react'; + +export default function TestButton({ testTypes }) { + const [pending, startTransition] = useTransition(); + + function handleClick() { + startTransition(async () => { + await testTypes( + new Map([['alice', 100], ['bob', 200]]), + new Set(['react', 'next', 'remix']), + new Date('2025-06-15T12:00:00Z'), + 9007199254740993n + ); + }); + } + + return ( + + ); +} +``` + +     + +## Server Action Mutation + Re-render {/*action-mutation-rerender*/} + +The server action mutates server-side data and returns a confirmation string. The updated list is only visible because the framework automatically re-renders the entire server component tree after the action completes — the server component re-reads the data and streams the new UI to the client. + + + +```js src/App.js +import { getTodos } from './db'; +import { createTodo } from './actions'; +import AddTodo from './AddTodo'; + +export default function App() { + const todos = getTodos(); + return ( +
    +

    Todo List

    +

    + This list is rendered by a server component + reading server-side data. It only updates because + the server re-renders after each action. +

    +
      + {todos.map((todo, i) => ( +
    • {todo}
      • + ))} +
    + +
    + ); +} +``` + +```js src/db.js +let todos = ['Buy groceries']; + +export function getTodos() { + return [...todos]; +} + +export function addTodo(text) { + todos.push(text); +} +``` + +```js src/actions.js +'use server'; +import { addTodo } from './db'; + +export async function createTodo(text) { + if (!text) return 'Please enter a todo.'; + addTodo(text); + return 'Added: ' + text; +} +``` + +```js src/AddTodo.js +'use client'; +import { useState, useTransition } from 'react'; + +export default function AddTodo({ createTodo }) { + const [text, setText] = useState(''); + const [message, setMessage] = useState(''); + const [pending, startTransition] = useTransition(); + + function handleSubmit(e) { + e.preventDefault(); + startTransition(async () => { + const result = await createTodo(text); + setMessage(result); + setText(''); + }); + } + + return ( +
    + + setText(e.target.value)} + placeholder="New todo" + /> + + + {message && ( +

    + Action returned: "{message}" +

    + )} +
    + ); +} +``` + +     + +## Inline Server Actions {/*inline-server-actions*/} + +Server actions defined inline inside a server component with `'use server'` on the function body. The action closes over module-level state and is passed as a prop — no separate `actions.js` file needed. + + + +```js src/App.js +import LikeButton from './LikeButton'; + +let count = 0; + +export default function App() { + async function addLike() { + 'use server'; + count++; + } + + return ( +
    +

    Inline Server Actions

    +

    Likes: {count}

    + +
    + ); +} +``` + +```js src/LikeButton.js +'use client'; + +export default function LikeButton({ addLike }) { + return ( +
    + +
    + ); +} +``` + +     + +## Server Functions {/*server-functions*/} + + + +```js src/App.js +import { addLike, getLikeCount } from './actions'; +import LikeButton from './LikeButton'; + +export default async function App() { + const count = await getLikeCount(); + return ( +
    +

    Server Functions

    +

    Likes: {count}

    + +
    + ); +} +``` + +```js src/actions.js +'use server'; + +let count = 0; + +export async function addLike() { + count++; +} + +export async function getLikeCount() { + return count; +} +``` + +```js src/LikeButton.js +'use client'; + +export default function LikeButton({ addLike }) { + return ( +
    + +
    + ); +} +``` + +     \ No newline at end of file diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 4f719571c..c066f57c6 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -461,11 +461,11 @@ export default function TaskApp() { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); // ... return ( - - + + ... - - + + ); } ``` @@ -509,9 +509,15 @@ export default function TaskApp() { } return ( +<<<<<<< HEAD

    Jour de repos à Kyoto

    +======= + + +

    Day off in Kyoto

    +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -520,8 +526,8 @@ export default function TaskApp() { onChangeTask={handleChangeTask} onDeleteTask={handleDeleteTask} /> -     -     + + ); } @@ -676,16 +682,26 @@ Vous cesserez d'utiliser les props dans la prochaine étape. Vous n'avez désormais plus besoin de passer la liste de tâches ou les gestionnaires d'événements à travers l'arbre à coups de props : ```js {4-5} +<<<<<<< HEAD

    Jour de repos à Kyoto

    +======= + + +

    Day off in Kyoto

    +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -     -     + + ``` +<<<<<<< HEAD Au lieu de ça, un composant qui a besoin de la liste de tâches peut la lire depuis le `TaskContext` : +======= +Instead, any component that needs the task list can read it from the `TasksContext`: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js {2} export default function TaskList() { @@ -730,13 +746,19 @@ export default function TaskApp() { ); return ( +<<<<<<< HEAD

    Jour de repos à Kyoto

    +======= + + +

    Day off in Kyoto

    +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a -     -     + + ); } @@ -802,7 +824,11 @@ export default function AddTask() { id: nextId++, text: text, }); +<<<<<<< HEAD }}>Ajouter +======= + }}>Add +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ); } @@ -921,11 +947,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - - + + {children} - - + + ); } ``` @@ -963,11 +989,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1026,7 +1052,11 @@ export default function AddTask() { id: nextId++, text: text, }); +<<<<<<< HEAD }}>Ajouter +======= + }}>Add +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ); } @@ -1174,11 +1204,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1245,7 +1275,11 @@ export default function AddTask() { id: nextId++, text: text, }); +<<<<<<< HEAD }}>Ajouter +======= + }}>Add +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ); } diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index bfb00c454..b9823f568 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -400,6 +400,7 @@ Vous devez trouver une façon de séparer cette logique non réactive de l’Eff ### Déclarer un Événement d’Effet {/*declaring-an-effect-event*/} +<<<<<<< HEAD Cette section décrit une **API expérimentale : elle n’a donc pas encore été livrée** dans une version stable de React. @@ -407,6 +408,9 @@ Cette section décrit une **API expérimentale : elle n’a donc pas encore ét Utilisez un Hook spécial appelé [`useEffectEvent`](/reference/react/experimental_useEffectEvent) pour extraire cette logique non réactive de votre Effet : +======= +Use a special Hook called [`useEffectEvent`](/reference/react/useEffectEvent) to extract this non-reactive logic out of your Effect: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js {1,4-6} import { useEffect, useEffectEvent } from 'react'; @@ -439,7 +443,11 @@ function ChatRoom({ roomId, theme }) { // ... ``` +<<<<<<< HEAD Ça résout le problème. Remarquez que vous avez dû *retirer* `onConnected` de la liste des dépendances de votre Effet. **Les Événements d’Effets ne sont pas réactifs et ne doivent pas figurer dans vos dépendances.** +======= +This solves the problem. Note that you had to *remove* `theme` from the list of your Effect's dependencies, because it's no longer used in the Effect. You also don't need to *add* `onConnected` to it, because **Effect Events are not reactive and must be omitted from dependencies.** +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Vérifiez que le nouveau comportement fonctionne comme attendu : @@ -448,8 +456,8 @@ Vérifiez que le nouveau comportement fonctionne comme attendu : ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -464,7 +472,7 @@ Vérifiez que le nouveau comportement fonctionne comme attendu : ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; import { createConnection, sendMessage } from './chat.js'; import { showNotification } from './notifications.js'; @@ -574,10 +582,15 @@ label { display: block; margin-top: 10px; } +<<<<<<< HEAD Vous pouvez considérer les Événements d’Effets comme étant très similaires aux gestionnaires d’événements. La différence majeure tient à ce que les gestionnaires d’événements réagissent aux interactions de l’utilisateur, alors que les Événements d’Effets sont déclenchés depuis vos Effets. Les Événements d’Effets vous permettent de « briser la chaîne » entre la réactivité des Effets et le code qui ne doit pas être réactif. +======= +You can think of Effect Events as being very similar to event handlers. The main difference is that event handlers run in response to user interactions, whereas Effect Events are triggered by you from Effects. Effect Events let you "break the chain" between the reactivity of Effects and code that should not be reactive. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Lire les dernières props et états à jour avec des Événements d’Effets {/*reading-latest-props-and-state-with-effect-events*/} +<<<<<<< HEAD Cette section décrit une **API expérimentale : elle n’a donc pas encore été livrée** dans une version stable de React. @@ -585,6 +598,9 @@ Cette section décrit une **API expérimentale : elle n’a donc pas encore ét Les Événements d’Effets vous permettent de corriger de nombreuses situations où vous seriez tenté·e de réduire le *linter* de dépendances au silence. +======= +Effect Events let you fix many patterns where you might be tempted to suppress the dependency linter. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Par exemple, disons que vous avez un Effet qui enregistre les visites de la page : @@ -711,7 +727,7 @@ Ici, `url` à l’intérieur de `onVisit` correspond à la *dernière* `url` (qu Dans les bases de code existantes, vous risquer de tomber sur des désactivations de cette règle du *linter*, comme ci-dessous : -```js {7-9} +```js {expectedErrors: {'react-compiler': [8]}} {7-9} function Page({ url }) { const { items } = useContext(ShoppingCartContext); const numberOfItems = items.length; @@ -725,7 +741,11 @@ function Page({ url }) { } ``` +<<<<<<< HEAD Dès que `useEffectEvent` sera devenu une partie stable de React, nous recommanderons de **ne jamais réduire le *linter* au silence**. +======= +We recommend **never suppressing the linter**. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Désactiver localement cette règle du *linter* présente un inconvénient majeur : vous empêchez désormais React de vous avertir quand votre Effet doit « réagir » à une nouvelle dépendance réactive que vous avez introduite dans votre code. Dans l’exemple précédent, vous avez ajouté `url` aux dépendances *parce que* React vous l’a rappelé. Vous n’aurez plus de tels rappels pour vos prochaines modifications de cet Effet si vous désactivez le *linter*. Ça entraîne des bugs. @@ -735,7 +755,7 @@ Voyez-vous pourquoi ? -```js +```js {expectedErrors: {'react-compiler': [16]}} import { useState, useEffect } from 'react'; export default function App() { @@ -800,25 +820,9 @@ Avec `useEffectEvent`, il est inutile de « mentir » au *linter* et le code f -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export default function App() { const [position, setPosition] = useState({ x: 0, y: 0 }); @@ -878,6 +882,7 @@ Lisez [Alléger les dépendances des Effets](/learn/removing-effect-dependencies ### Limitations des Événements d'Effets {/*limitations-of-effect-events*/} +<<<<<<< HEAD Cette section décrit une **API expérimentale : elle n'a donc pas encore été livrée** dans une version stable de React. @@ -885,6 +890,9 @@ Cette section décrit une **API expérimentale : elle n'a donc pas encore été Les Événements d’Effets sont très limités dans leur utilisation : +======= +Effect Events are very limited in how you can use them: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * **Ne les appelez qu’à l’intérieur des Effets.** * **Ne les transmettez jamais à d’autres composants ou Hooks.** @@ -973,7 +981,7 @@ Pour corriger ce code, il suffit de suivre les règles. -```js +```js {expectedErrors: {'react-compiler': [14]}} import { useState, useEffect } from 'react'; export default function Timer() { @@ -1088,25 +1096,9 @@ Il semble que l’Effet qui met en place le minuteur « réagisse » à la val -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export default function Timer() { const [count, setCount] = useState(0); @@ -1157,25 +1149,9 @@ Pour résoudre ce problème, extrayez un Événement d’Effet `onTick` de votre -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export default function Timer() { const [count, setCount] = useState(0); @@ -1239,25 +1215,9 @@ Le code à l’intérieur des Événements d’Effets n’est pas réactif. Exis -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export default function Timer() { const [count, setCount] = useState(0); @@ -1326,25 +1286,9 @@ Le problème avec l’exemple ci-dessus, c'est qu’il a extrait un Événement -```json package.json hidden -{ - "dependencies": { - "react": "experimental", - "react-dom": "experimental", - "react-scripts": "latest" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" - } -} -``` - ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export default function Timer() { const [count, setCount] = useState(0); @@ -1427,8 +1371,8 @@ Votre Effet sait à quel salon il est connecté. Y a-t-il des informations que v ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1443,7 +1387,7 @@ Votre Effet sait à quel salon il est connecté. Y a-t-il des informations que v ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; import { createConnection, sendMessage } from './chat.js'; import { showNotification } from './notifications.js'; @@ -1568,8 +1512,8 @@ Pour résoudre ce problème, au lieu de lire la *dernière* valeur de `roomId` d ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1584,7 +1528,7 @@ Pour résoudre ce problème, au lieu de lire la *dernière* valeur de `roomId` d ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; import { createConnection, sendMessage } from './chat.js'; import { showNotification } from './notifications.js'; @@ -1705,8 +1649,8 @@ Pour résoudre le défi supplémentaire, enregistrez l’ID du timer de notifica ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1721,7 +1665,7 @@ Pour résoudre le défi supplémentaire, enregistrez l’ID du timer de notifica ```js import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; import { createConnection, sendMessage } from './chat.js'; import { showNotification } from './notifications.js'; diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md new file mode 100644 index 000000000..2c46ee148 --- /dev/null +++ b/src/content/learn/setup.md @@ -0,0 +1,28 @@ +--- +title: Setup +--- + + +React integrates with tools like editors, TypeScript, browser extensions, and compilers. This section will help you get your environment set up. + + + +## Editor Setup {/*editor-setup*/} + +See our [recommended editors](/learn/editor-setup) and learn how to set them up to work with React. + +## Using TypeScript {/*using-typescript*/} + +TypeScript is a popular way to add type definitions to JavaScript codebases. [Learn how to integrate TypeScript into your React projects](/learn/typescript). + +## React Developer Tools {/*react-developer-tools*/} + +React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools). + +## React Compiler {/*react-compiler*/} + +React Compiler is a tool that automatically optimizes your React app. [Learn more](/learn/react-compiler). + +## Next steps {/*next-steps*/} + +Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index fd9ed6088..3d6060fcc 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -324,7 +324,11 @@ Pour voir ce que ça donne en pratique avec quelques composants supplémentaires #### Saisies synchronisées {/*synced-inputs*/} +<<<<<<< HEAD Ces deux champs de saisie sont indépendants. Faites en sorte qu'ils soient synchronisés : modifier l'un des champs doit également mettre à jour l'autre champ avec le même texte, et vice-versa. +======= +These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 7bfaeaf36..e69b25249 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -23,7 +23,7 @@ Voici un composant qui affiche une image de sculpture. Cliquer sur le bouton « -```js +```js {expectedErrors: {'react-compiler': [7]}} import { sculptureList } from './data.js'; export default function Gallery() { @@ -41,10 +41,17 @@ export default function Gallery() {

    {sculpture.name} +<<<<<<< HEAD par {sculpture.artist}

    ({index + 1} sur {sculptureList.length}) +======= + by {sculpture.artist} +

    +

    + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a

    >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -221,10 +300,17 @@ export default function Gallery() {

    {sculpture.name} +<<<<<<< HEAD par {sculpture.artist}

    ({index + 1} sur {sculptureList.length}) +======= + by {sculpture.artist} +

    +

    + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a

    >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -361,7 +519,11 @@ La convention consiste à nommer la paire quelque chose comme `const [something,     +<<<<<<< HEAD Le seul argument de `useState` est la **valeur initiale** de votre variable d'état. Dans cet exemple, la valeur initiale d'`index` est définie à `0` avec `useState(0)`. +======= +The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Chaque fois que votre composant fait son rendu, `useState` vous fournit un tableau contenant deux valeurs : @@ -409,10 +571,17 @@ export default function Gallery() {

    {sculpture.name} +<<<<<<< HEAD par {sculpture.artist}

    ({index + 1} sur {sculptureList.length}) +======= + by {sculpture.artist} +

    +

    + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a

    {sculpture.name} +<<<<<<< HEAD par {sculpture.artist}

    ({index + 1} sur {sculptureList.length}) +======= + by {sculpture.artist} +

    +

    + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a

    {sculpture.name} +<<<<<<< HEAD par {sculpture.artist}

    ({index + 1} sur {sculptureList.length}) +======= + by {sculpture.artist} +

    +

    + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a

    {sculpture.name} +<<<<<<< HEAD par {sculpture.artist}

    ({index + 1} sur {sculptureList.length}) +======= + by {sculpture.artist} +

    +

    + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a

    +>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" class="photo" > @@ -100,10 +106,17 @@ Si vous le copiez-collez tel quel, ça ne marchera pas : ```js export default function TodoList() { return ( +<<<<<<< HEAD // Ça ne marche pas tout à fait !

    Liste de tâches de Hedy Lamarr

    Hedy Lamarr's Todos

    + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" class="photo" > @@ -140,9 +153,15 @@ Par exemple, vous pouvez utiliser une `
    ` : ```js {1,11}
    +<<<<<<< HEAD

    Liste de tâches de Hedy Lamarr

    Hedy Lamarr's Todos + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" class="photo" > @@ -156,9 +175,15 @@ Si vous ne voulez pas ajouter une `
    ` superflue à votre balisage, vous pouv ```js {1,11} <> +<<<<<<< HEAD

    Liste de tâches de Hedy Lamarr

    Hedy Lamarr's Todos + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" class="photo" > @@ -187,7 +212,11 @@ Voici à quoi ressemblent l'image et les tâches de Hedy Lamarr une fois correct ```js {2-6,8-10} <> >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" class="photo" /> @@ -207,7 +236,11 @@ C'est pourquoi, en React, de nombreux attributs HTML et SVG sont écrits en cass ```js {4} >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" className="photo" /> @@ -233,9 +266,15 @@ Voici notre résultat final : export default function TodoList() { return ( <> +<<<<<<< HEAD

    Liste de tâches de Hedy Lamarr

    Hedy Lamarr's Todos + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" className="photo" /> diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 5bc995c35..4069efefa 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -26,7 +26,11 @@ Il y a deux scénarios principaux pour lesquels vous n’avez pas besoin d’Eff - **Vous n’avez pas besoin d’Effets pour transformer des données utilisées par le rendu.** Disons par exemple que vous souhaitez filtrer une liste avant de l’afficher. Vous pourriez etre tenté·e d’écrire un Effet qui mette à jour une variable d’état lorsque la liste change. C’est pourtant inefficace. Lorsque vous mettez à jour l’état, React va d’abord appeler vos fonctions composants pour calculer ce qu’il doit afficher à l’écran. Puis React va [retranscrire](/learn/render-and-commit) ces modifications auprès du DOM (_phase de “commit”, NdT)_, ce qui mettra l’écran à jour. Ensuite React exécutera vos Effets. Si votre Effet met immédiatement l’état à jour *lui aussi*, ça va tout refaire du début ! Pour éviter des passes de rendu superflues, transformez les données à la racine de vos composants. Ce code sera automatiquement ré-exécuté dès que vos props ou votre état changera. - **Vous n’avez pas besoin d’Effets pour gérer les événements utilisateurs.** Supposons que vous souhaitez envoyer une requête POST à `/api/buy` et afficher une notification lorsque l’utilisateur achète un produit. Dans le gestionnaire d’événement clic du bouton Acheter, vous savez précisément pourquoi vous êtes là. Alors qu’au moment où l’Effet s’exécutera, vous ne saurez pas *ce qu’a fait* l’utilisateur (par exemple, quel bouton il a cliqué). C’est pourquoi vous traiterez généralement les événements utilisateurs directement au sein des gestionnaires d’événements concernés. +<<<<<<< HEAD En revanche, *vous avez besoin* d’Effets pour [synchroniser](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) votre composant avec des systèmes extérieurs. Par exemple, vous pouvez écrire un Effet qui synchronise un widget basé jQuery avec votre état React. Vous pouvez aussi charger des données avec les Effets, par exemple pour synchroniser des résultats de recherche avec la requête à jour. Gardez toutefois à l’esprit que les [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) modernes vous fournissent de base des mécanismes de chargement de données plus efficaces que si vous l’écrivez directement dans vos Effets. +======= +You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Pour vous aider à affiner votre intuition sur ce sujet, examinons ensemble plusieurs cas concrets courants ! @@ -34,7 +38,7 @@ Pour vous aider à affiner votre intuition sur ce sujet, examinons ensemble plus Supposons que vous ayez un composant avec deux variables d’état : `firstName` et `lastName`. Vous souhaitez calculer `fullName` en les concaténant. Par ailleurs, vous aimeriez que `fullName` soit mis à jour dès que `firstName` ou `lastName` change. Votre première pensée serait peut-être d’ajouter une variable d’état `fullName` et de la mettre à jour dans un Effet : -```js {5-9} +```js {expectedErrors: {'react-compiler': [8]}} {5-9} function Form() { const [firstName, setFirstName] = useState('Clara'); const [lastName, setLastName] = useState('Luciani'); @@ -66,7 +70,7 @@ function Form() { Le composant ci-après calcule `visibleTodos` en partant de sa prop `todos` et en la filtrant selon sa prop `filter`. Vous pourriez être tenté·e de stocker le résultat dans l’état et de le mettre à jour depuis un Effet : -```js {4-8} +```js {expectedErrors: {'react-compiler': [7]}} {4-8} function TodoList({ todos, filter }) { const [newTodo, setNewTodo] = useState(''); @@ -95,6 +99,12 @@ En général, ça ira très bien comme ça ! Mais peut-être que `getFilteredT Vous pouvez alors mettre en cache (ou [« mémoïser »](https://fr.wikipedia.org/wiki/M%C3%A9mo%C3%AFsation)) un calcul coûteux en l’enrobant dans un Hook [`useMemo`](/reference/react/useMemo) : + + +[React Compiler](/learn/react-compiler) can automatically memoize expensive calculations for you, eliminating the need for manual `useMemo` in many cases. + + + ```js {5-8} import { useMemo, useState } from 'react'; @@ -159,7 +169,7 @@ Remarquez aussi que mesurer la performance en développement ne vous donnera pas Le composant `ProfilePage` ci-dessous reçoit une prop `userId`. La page contient un champ de commentaire, et vous utilisez la variable d’état `comment` pour en stocker la valeur. Un beau jour, vous remarquez un problème : quand vous passez d’un profil à l’autre, l’état `comment` n’est pas réinitialisé. Du coup, il n’est que trop facile d’envoyer par accident un commentaire au mauvais profil utilisateur. Pour corriger ça, vous essayez de vider la variable d’état `comment` chaque fois que `userId` change : -```js {4-7} +```js {expectedErrors: {'react-compiler': [6]}} {4-7} export default function ProfilePage({ userId }) { const [comment, setComment] = useState(''); @@ -203,7 +213,7 @@ Il arrive que vous souhaitiez ne réinitialiser, ou ajuster, qu’une partie de Le composant `List` ci-après reçoit une liste d’éléments *via* sa prop `items`, et garde l’élément sélectionné dans sa variable d’état `selection`. Vous souhaitez ramener `selection` à `null` chaque fois que `items` reçoit un nouveau tableau : -```js {5-8} +```js {expectedErrors: {'react-compiler': [7]}} {5-8} function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selection, setSelection] = useState(null); @@ -432,7 +442,7 @@ function Game() { // ✅ Calculer le prochain état dans le gestionnaire d’événement setCard(nextCard); if (nextCard.gold) { - if (goldCardCount <= 3) { + if (goldCardCount < 3) { setGoldCardCount(goldCardCount + 1); } else { setGoldCardCount(0); @@ -752,7 +762,11 @@ function SearchResults({ query }) { La gestion des *race conditions* n’est d’ailleurs pas la seule difficulté lorsqu’on implémente un chargement de données. Vous aurez peut-être à vous préoccuper de la mise en cache des données (afin qu’en naviguant en arrière vos utilisateurs retrouvent instantanément l’écran précédent), de leur chargement côté serveur (pour que le HTML initial fourni par le serveur contienne déjà les données plutôt qu’un indicateur de chargement), et d’éviter les cascades réseau (afin qu’un composant enfant puisse charger ses données sans devoir attendre que chaque parent ait fini ses chargements). +<<<<<<< HEAD **Ces problématiques existent dans toutes les bibliothèques d’UI, pas seulement dans React. Leur résolution n’est pas chose aisée, c’est pourquoi les [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) modernes fournissent des mécanismes intégrés de chargement de données plus efficaces que du chargement manuel au sein d’Effets.** +======= +**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.** +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si vous n’utilisez pas de framework (et ne voulez pas créer le vôtre) mais aimeriez quand même améliorer l’ergonomie du chargement de données depuis des Effets, envisagez d’extraire votre logique de chargement dans un Hook personnalisé, comme dans l’exemple que voici : @@ -814,7 +828,7 @@ Simplifiez ce composant en retirant les variables d'état et Effets superflus. -```js +```js {expectedErrors: {'react-compiler': [12, 16, 20]}} import { useState, useEffect } from 'react'; import { initialTodos, createTodo } from './todos.js'; @@ -1017,7 +1031,7 @@ Une solution serait d’ajouter un `useMemo` pour mettre en cache les tâches vi -```js +```js {expectedErrors: {'react-compiler': [11]}} import { useState, useEffect } from 'react'; import { initialTodos, createTodo, getVisibleTodos } from './todos.js'; @@ -1358,7 +1372,7 @@ export default function ContactList({ } ``` -```js src/EditContact.js active +```js {expectedErrors: {'react-compiler': [8, 9]}} src/EditContact.js active import { useState, useEffect } from 'react'; export default function EditContact({ savedContact, onSave }) { diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 0c4113a9b..71c7575c0 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -63,7 +63,7 @@ Traditionnellement, lorsqu'ils créent des pages web, les développeurs web écr export default function Profile() { return ( Katherine Johnson ) @@ -99,7 +99,7 @@ Le composant renvoie une balise `` avec des attributs `src` et `alt`. `; +return Katherine Johnson; ``` Mais si votre balisage n'est pas entièrement sur la même ligne que le mot-clé `return`, vous aurez intérêt à l'enrober de parenthèses : @@ -107,7 +107,7 @@ Mais si votre balisage n'est pas entièrement sur la même ligne que le mot-clé ```js return (
    - Katherine Johnson + Katherine Johnson
    ); ``` @@ -128,7 +128,7 @@ Sans ces parenthèses, tout code qui suit un `return` seul sur sa ligne [serait function Profile() { return ( Katherine Johnson ); @@ -163,10 +163,17 @@ Et `Profile` contient lui-même du HTML : ``. Au final, voici ce que vo ```html
    +<<<<<<< HEAD

    Scientifiques de renom

    Katherine Johnson Katherine Johnson Katherine Johnson +======= +

    Amazing scientists

    + Katherine Johnson + Katherine Johnson + Katherine Johnson +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
    ``` @@ -215,7 +222,11 @@ Votre application React commence avec un composant « racine ». En général La plupart des applis React utilisent des composants « jusqu'au bout ». Ça signifie que vous utiliserez des composants non seulement pour des éléments réutilisables tels que des boutons, mais aussi pour des blocs plus importants tels que des barres latérales, des listes, et au final des pages complètes ! Les composants sont un moyen pratique d'organiser le code et le balisage de l'UI, même si certains ne seront utilisés qu'une fois. +<<<<<<< HEAD [Les frameworks basés sur React](/learn/start-a-new-react-project) poussent cette logique plus loin. Plutôt que d'utiliser un fichier HTML vide et de laisser React « prendre la main » pour gérer la page avec JavaScript, ils génèrent *aussi* automatiquement le HTML de vos composants React. Ça permet à votre appli d'afficher du contenu avant même que le JavaScript ne soit chargé. +======= +[React-based frameworks](/learn/creating-a-react-app) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Ceci dit, de nombreux sites web utilisent uniquement React pour [ajouter de l'interactivité à des pages HTML existantes](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). Ils ont plusieurs composants racines au lieu d'un seul pour la page entière. Vous pouvez utiliser React aussi largement — ou légèrement – que vous le souhaitez. @@ -246,7 +257,7 @@ Ce bac à sable ne fonctionne pas, parce que le composant racine n'est pas expor function Profile() { return ( Aklilu Lemma ); @@ -271,7 +282,7 @@ Ajoutez `export default` avant la définition de la fonction, comme ceci : export default function Profile() { return ( Aklilu Lemma ); @@ -303,7 +314,7 @@ Vous aurez peut-être une erreur *“Unexpected token”* en tentant de corriger ```js export default function Profile() { return - Katsuko Saruhashi; + Katsuko Saruhashi; } ``` @@ -321,7 +332,7 @@ Vous pouvez corriger ce composant en ramenant l'instruction `return` sur une seu ```js export default function Profile() { - return Katsuko Saruhashi; + return Katsuko Saruhashi; } ``` @@ -339,7 +350,11 @@ Ou alors, enrobez le JSX renvoyé par des parenthèses qui s'ouvrent immédiatem export default function Profile() { return ( >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Katsuko Saruhashi" /> ); @@ -364,7 +379,7 @@ Il y a un souci dans la façon dont le composant `Profile` est déclaré et util function profile() { return ( Alan L. Hart ); @@ -400,7 +415,7 @@ Changez `function profile()` en `function Profile()`, et changez chaque ` ); diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md new file mode 100644 index 000000000..d4757b9ec --- /dev/null +++ b/src/content/reference/dev-tools/react-performance-tracks.md @@ -0,0 +1,159 @@ +--- +title: React Performance tracks +--- + + + +React Performance tracks are specialized custom entries that appear on the Performance panel's timeline in your browser developer tools. + + + +These tracks are designed to provide developers with comprehensive insights into their React application's performance by visualizing React-specific events and metrics alongside other critical data sources such as network requests, JavaScript execution, and event loop activity, all synchronized on a unified timeline within the Performance panel for a complete understanding of application behavior. + +
    + React Performance Tracks + React Performance Tracks +
    + + + +--- + +## Usage {/*usage*/} + +React Performance tracks are only available in development and profiling builds of React: + +- **Development**: enabled by default. +- **Profiling**: Only Scheduler tracks are enabled by default. The Components track only lists Components that are in subtrees wrapped with [``](/reference/react/Profiler). If you have [React Developer Tools extension](/learn/react-developer-tools) enabled, all Components are included in the Components track even if they're not wrapped in ``. Server tracks are not available in profiling builds. + +If enabled, tracks should appear automatically in the traces you record with the Performance panel of browsers that provide [extensibility APIs](https://developer.chrome.com/docs/devtools/performance/extension). + + + +The profiling instrumentation that powers React Performance tracks adds some additional overhead, so it is disabled in production builds by default. +Server Components and Server Requests tracks are only available in development builds. + + + +### Using profiling builds {/*using-profiling-builds*/} + +In addition to production and development builds, React also includes a special profiling build. +To use profiling builds, you have to use `react-dom/profiling` instead of `react-dom/client`. +We recommend that you alias `react-dom/client` to `react-dom/profiling` at build time via bundler aliases instead of manually updating each `react-dom/client` import. +Your framework might have built-in support for enabling React's profiling build. + +--- + +## Tracks {/*tracks*/} + +### Scheduler {/*scheduler*/} + +The Scheduler is an internal React concept used for managing tasks with different priorities. This track consists of 4 subtracks, each representing work of a specific priority: + +- **Blocking** - The synchronous updates, which could've been initiated by user interactions. +- **Transition** - Non-blocking work that happens in the background, usually initiated via [`startTransition`](/reference/react/startTransition). +- **Suspense** - Work related to Suspense boundaries, such as displaying fallbacks or revealing content. +- **Idle** - The lowest priority work that is done when there are no other tasks with higher priority. + +
    + Scheduler track + Scheduler track +
    + +#### Renders {/*renders*/} + +Every render pass consists of multiple phases that you can see on a timeline: + +- **Update** - this is what caused a new render pass. +- **Render** - React renders the updated subtree by calling render functions of components. You can see the rendered components subtree on [Components track](#components), which follows the same color scheme. +- **Commit** - After rendering components, React will submit the changes to the DOM and run layout effects, like [`useLayoutEffect`](/reference/react/useLayoutEffect). +- **Remaining Effects** - React runs passive effects of a rendered subtree. This usually happens after the paint, and this is when React runs hooks like [`useEffect`](/reference/react/useEffect). One known exception is user interactions, like clicks, or other discrete events. In this scenario, this phase could run before the paint. + +
    + Scheduler track: updates + Scheduler track: updates +
    + +[Learn more about renders and commits](/learn/render-and-commit). + +#### Cascading updates {/*cascading-updates*/} + +Cascading updates is one of the patterns for performance regressions. If an update was scheduled during a render pass, React could discard completed work and start a new pass. + +In development builds, React can show you which Component scheduled a new update. This includes both general updates and cascading ones. You can see the enhanced stack trace by clicking on the "Cascading update" entry, which should also display the name of the method that scheduled an update. + +
    + Scheduler track: cascading updates + Scheduler track: cascading updates +
    + +[Learn more about Effects](/learn/you-might-not-need-an-effect). + +### Components {/*components*/} + +The Components track visualizes the durations of React components. They are displayed as a flamegraph, where each entry represents the duration of the corresponding component render and all its descendant children components. + +
    + Components track: render durations + Components track: render durations +
    + +Similar to render durations, effect durations are also represented as a flamegraph, but with a different color scheme that aligns with the corresponding phase on the Scheduler track. + +
    + Components track: effects durations + Components track: effects durations +
    + + + +Unlike renders, not all effects are shown on the Components track by default. + +To maintain performance and prevent UI clutter, React will only display those effects, which had a duration of 0.05ms or longer, or triggered an update. + + + +Additional events may be displayed during the render and effects phases: + +- Mount - A corresponding subtree of component renders or effects was mounted. +- Unmount - A corresponding subtree of component renders or effects was unmounted. +- Reconnect - Similar to Mount, but limited to cases when [``](/reference/react/Activity) is used. +- Disconnect - Similar to Unmount, but limited to cases when [``](/reference/react/Activity) is used. + +#### Changed props {/*changed-props*/} + +In development builds, when you click on a component render entry, you can inspect potential changes in props. You can use this information to identify unnecessary renders. + +
    + Components track: changed props + Components track: changed props +
    + +### Server {/*server*/} + +
    + React Server Performance Tracks + React Server Performance Tracks +
    + +#### Server Requests {/*server-requests*/} + +The Server Requests track visualized all Promises that eventually end up in a React Server Component. This includes any `async` operations like calling `fetch` or async Node.js file operations. + +React will try to combine Promises that are started from inside third-party code into a single span representing the the duration of the entire operation blocking 1st party code. +For example, a third party library method called `getUser` that calls `fetch` internally multiple times will be represented as a single span called `getUser`, instead of showing multiple `fetch` spans. + +Clicking on spans will show you a stack trace of where the Promise was created as well as a view of the value that the Promise resolved to, if available. + +Rejected Promises are displayed as red with their rejected value. + +#### Server Components {/*server-components*/} + +The Server Components tracks visualize the durations of React Server Components Promises they awaited. Timings are displayed as a flamegraph, where each entry represents the duration of the corresponding component render and all its descendant children components. + +If you await a Promise, React will display duration of that Promise. To see all I/O operations, use the Server Requests track. + +Different colors are used to indicate the duration of the component render. The darker the color, the longer the duration. + +The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display addititional "Parallel" tracks. +If more than 8 Server Components are rendered concurrently, React will associate them with the last "Parallel" track instead of adding more tracks. diff --git a/src/content/reference/eslint-plugin-react-hooks/index.md b/src/content/reference/eslint-plugin-react-hooks/index.md new file mode 100644 index 000000000..b3a16bc37 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/index.md @@ -0,0 +1,40 @@ +--- +title: eslint-plugin-react-hooks +version: rc +--- + + + +`eslint-plugin-react-hooks` provides ESLint rules to enforce the [Rules of React](/reference/rules). + + + +This plugin helps you catch violations of React's rules at build time, ensuring your components and hooks follow React's rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn't adopted the compiler yet. + + +When the compiler reports a diagnostic, it means that the compiler was able to statically detect a pattern that is not supported or breaks the Rules of React. When it detects this, it **automatically** skips over those components and hooks, while keeping the rest of your app compiled. This ensures optimal coverage of safe optimizations that won't break your app. + +What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components. + + +## Recommended Rules {/*recommended*/} + +These rules are included in the `recommended` preset in `eslint-plugin-react-hooks`: + +* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - Validates that dependency arrays for React hooks contain all necessary dependencies +* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - Validates that components and hooks follow the Rules of Hooks +* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - Validates higher order functions defining nested components or hooks +* [`config`](/reference/eslint-plugin-react-hooks/lints/config) - Validates the compiler configuration options +* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - Validates usage of Error Boundaries instead of try/catch for child errors +* [`gating`](/reference/eslint-plugin-react-hooks/lints/gating) - Validates configuration of gating mode +* [`globals`](/reference/eslint-plugin-react-hooks/lints/globals) - Validates against assignment/mutation of globals during render +* [`immutability`](/reference/eslint-plugin-react-hooks/lints/immutability) - Validates against mutating props, state, and other immutable values +* [`incompatible-library`](/reference/eslint-plugin-react-hooks/lints/incompatible-library) - Validates against usage of libraries which are incompatible with memoization +* [`preserve-manual-memoization`](/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) - Validates that existing manual memoization is preserved by the compiler +* [`purity`](/reference/eslint-plugin-react-hooks/lints/purity) - Validates that components/hooks are pure by checking known-impure functions +* [`refs`](/reference/eslint-plugin-react-hooks/lints/refs) - Validates correct usage of refs, not reading/writing during render +* [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) - Validates against calling setState synchronously in an effect +* [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render) - Validates against setting state during render +* [`static-components`](/reference/eslint-plugin-react-hooks/lints/static-components) - Validates that components are static, not recreated every render +* [`unsupported-syntax`](/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) - Validates against syntax that React Compiler does not support +* [`use-memo`](/reference/eslint-plugin-react-hooks/lints/use-memo) - Validates usage of the `useMemo` hook without a return value \ No newline at end of file diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md new file mode 100644 index 000000000..537903abd --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md @@ -0,0 +1,102 @@ +--- +title: component-hook-factories +--- + + + +Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level. + + + +## Rule Details {/*rule-details*/} + +Defining components or hooks inside other functions creates new instances on every call. React treats each as a completely different component, destroying and recreating the entire component tree, losing all state, and causing performance problems. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js {expectedErrors: {'react-compiler': [14]}} +// ❌ Factory function creating components +function createComponent(defaultValue) { + return function Component() { + // ... + }; +} + +// ❌ Component defined inside component +function Parent() { + function Child() { + // ... + } + + return ; +} + +// ❌ Hook factory function +function createCustomHook(endpoint) { + return function useData() { + // ... + }; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Component defined at module level +function Component({ defaultValue }) { + // ... +} + +// ✅ Custom hook at module level +function useData(endpoint) { + // ... +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I need dynamic component behavior {/*dynamic-behavior*/} + +You might think you need a factory to create customized components: + +```js +// ❌ Wrong: Factory pattern +function makeButton(color) { + return function Button({children}) { + return ( + + ); + }; +} + +const RedButton = makeButton('red'); +const BlueButton = makeButton('blue'); +``` + +Pass [JSX as children](/learn/passing-props-to-a-component#passing-jsx-as-children) instead: + +```js +// ✅ Better: Pass JSX as children +function Button({color, children}) { + return ( + + ); +} + +function App() { + return ( + <> + + + + ); +} +``` diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/config.md b/src/content/reference/eslint-plugin-react-hooks/lints/config.md new file mode 100644 index 000000000..719e08412 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/config.md @@ -0,0 +1,90 @@ +--- +title: config +--- + + + +Validates the compiler [configuration options](/reference/react-compiler/configuration). + + + +## Rule Details {/*rule-details*/} + +React Compiler accepts various [configuration options](/reference/react-compiler/configuration) to control its behavior. This rule validates that your configuration uses correct option names and value types, preventing silent failures from typos or incorrect settings. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Unknown option name +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + compileMode: 'all' // Typo: should be compilationMode + }] + ] +}; + +// ❌ Invalid option value +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + compilationMode: 'everything' // Invalid: use 'all' or 'infer' + }] + ] +}; +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Valid compiler configuration +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + compilationMode: 'infer', + panicThreshold: 'critical_errors' + }] + ] +}; +``` + +## Troubleshooting {/*troubleshooting*/} + +### Configuration not working as expected {/*config-not-working*/} + +Your compiler configuration might have typos or incorrect values: + +```js +// ❌ Wrong: Common configuration mistakes +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + // Typo in option name + compilationMod: 'all', + // Wrong value type + panicThreshold: true, + // Unknown option + optimizationLevel: 'max' + }] + ] +}; +``` + +Check the [configuration documentation](/reference/react-compiler/configuration) for valid options: + +```js +// ✅ Better: Valid configuration +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + compilationMode: 'all', // or 'infer' + panicThreshold: 'none', // or 'critical_errors', 'all_errors' + // Only use documented options + }] + ] +}; +``` diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md new file mode 100644 index 000000000..830098e5b --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md @@ -0,0 +1,72 @@ +--- +title: error-boundaries +--- + + + +Validates usage of Error Boundaries instead of try/catch for errors in child components. + + + +## Rule Details {/*rule-details*/} + +Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or hooks bubble up through the component tree. Only [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js {expectedErrors: {'react-compiler': [4]}} +// ❌ Try/catch won't catch render errors +function Parent() { + try { + return ; // If this throws, catch won't help + } catch (error) { + return
    Error occurred
    ; + } +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Using error boundary +function Parent() { + return ( + + + + ); +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### Why is the linter telling me not to wrap `use` in `try`/`catch`? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/} + +The `use` hook doesn't throw errors in the traditional sense, it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run. + +```js {expectedErrors: {'react-compiler': [5]}} +// ❌ Try/catch around `use` hook +function Component({promise}) { + try { + const data = use(promise); // Won't catch - `use` suspends, not throws + return
    {data}
    ; + } catch (error) { + return
    Failed to load
    ; // Unreachable + } +} + +// ✅ Error boundary catches `use` errors +function App() { + return ( + Failed to load
    }> + Loading...
    }> + + + + ); +} +``` \ No newline at end of file diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md b/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md new file mode 100644 index 000000000..daa7db6a8 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md @@ -0,0 +1,169 @@ +--- +title: exhaustive-deps +--- + + + +Validates that dependency arrays for React hooks contain all necessary dependencies. + + + +## Rule Details {/*rule-details*/} + +React hooks like `useEffect`, `useMemo`, and `useCallback` accept dependency arrays. When a value referenced inside these hooks isn't included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes. This causes stale closures where the hook uses outdated values. + +## Common Violations {/*common-violations*/} + +This error often happens when you try to "trick" React about dependencies to control when an effect runs. Effects should synchronize your component with external systems. The dependency array tells React which values the effect uses, so React knows when to re-synchronize. + +If you find yourself fighting with the linter, you likely need to restructure your code. See [Removing Effect Dependencies](/learn/removing-effect-dependencies) to learn how. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Missing dependency +useEffect(() => { + console.log(count); +}, []); // Missing 'count' + +// ❌ Missing prop +useEffect(() => { + fetchUser(userId); +}, []); // Missing 'userId' + +// ❌ Incomplete dependencies +useMemo(() => { + return items.sort(sortOrder); +}, [items]); // Missing 'sortOrder' +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ All dependencies included +useEffect(() => { + console.log(count); +}, [count]); + +// ✅ All dependencies included +useEffect(() => { + fetchUser(userId); +}, [userId]); +``` + +## Troubleshooting {/*troubleshooting*/} + +### Adding a function dependency causes infinite loops {/*function-dependency-loops*/} + +You have an effect, but you're creating a new function on every render: + +```js +// ❌ Causes infinite loop +const logItems = () => { + console.log(items); +}; + +useEffect(() => { + logItems(); +}, [logItems]); // Infinite loop! +``` + +In most cases, you don't need the effect. Call the function where the action happens instead: + +```js +// ✅ Call it from the event handler +const logItems = () => { + console.log(items); +}; + +return ; + +// ✅ Or derive during render if there's no side effect +items.forEach(item => { + console.log(item); +}); +``` + +If you genuinely need the effect (for example, to subscribe to something external), make the dependency stable: + +```js +// ✅ useCallback keeps the function reference stable +const logItems = useCallback(() => { + console.log(items); +}, [items]); + +useEffect(() => { + logItems(); +}, [logItems]); + +// ✅ Or move the logic straight into the effect +useEffect(() => { + console.log(items); +}, [items]); +``` + +### Running an effect only once {/*effect-on-mount*/} + +You want to run an effect once on mount, but the linter complains about missing dependencies: + +```js +// ❌ Missing dependency +useEffect(() => { + sendAnalytics(userId); +}, []); // Missing 'userId' +``` + +Either include the dependency (recommended) or use a ref if you truly need to run once: + +```js +// ✅ Include dependency +useEffect(() => { + sendAnalytics(userId); +}, [userId]); + +// ✅ Or use a ref guard inside an effect +const sent = useRef(false); + +useEffect(() => { + if (sent.current) { + return; + } + + sent.current = true; + sendAnalytics(userId); +}, [userId]); +``` + +## Options {/*options*/} + +You can configure custom effect hooks using shared ESLint settings (available in `eslint-plugin-react-hooks` 6.1.1 and later): + +```js +{ + "settings": { + "react-hooks": { + "additionalEffectHooks": "(useMyEffect|useCustomEffect)" + } + } +} +``` + +- `additionalEffectHooks`: Regex pattern matching custom hooks that should be checked for exhaustive dependencies. This configuration is shared across all `react-hooks` rules. + +For backward compatibility, this rule also accepts a rule-level option: + +```js +{ + "rules": { + "react-hooks/exhaustive-deps": ["warn", { + "additionalHooks": "(useMyCustomHook|useAnotherHook)" + }] + } +} +``` + +- `additionalHooks`: Regex for hooks that should be checked for exhaustive dependencies. **Note:** If this rule-level option is specified, it takes precedence over the shared `settings` configuration. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/gating.md b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md new file mode 100644 index 000000000..3bd662a86 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md @@ -0,0 +1,72 @@ +--- +title: gating +--- + + + +Validates configuration of [gating mode](/reference/react-compiler/gating). + + + +## Rule Details {/*rule-details*/} + +Gating mode lets you gradually adopt React Compiler by marking specific components for optimization. This rule ensures your gating configuration is valid so the compiler knows which components to process. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Missing required fields +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + gating: { + importSpecifierName: '__experimental_useCompiler' + // Missing 'source' field + } + }] + ] +}; + +// ❌ Invalid gating type +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + gating: '__experimental_useCompiler' // Should be object + }] + ] +}; +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Complete gating configuration +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + gating: { + importSpecifierName: 'isCompilerEnabled', // exported function name + source: 'featureFlags' // module name + } + }] + ] +}; + +// featureFlags.js +export function isCompilerEnabled() { + // ... +} + +// ✅ No gating (compile everything) +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + // No gating field - compiles all components + }] + ] +}; +``` diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/globals.md b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md new file mode 100644 index 000000000..fe0cbe008 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md @@ -0,0 +1,84 @@ +--- +title: globals +--- + + + +Validates against assignment/mutation of globals during render, part of ensuring that [side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render). + + + +## Rule Details {/*rule-details*/} + +Global variables exist outside React's control. When you modify them during render, you break React's assumption that rendering is pure. This can cause components to behave differently in development vs production, break Fast Refresh, and make your app impossible to optimize with features like React Compiler. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Global counter +let renderCount = 0; +function Component() { + renderCount++; // Mutating global + return
    Count: {renderCount}
    ; +} + +// ❌ Modifying window properties +function Component({userId}) { + window.currentUser = userId; // Global mutation + return
    User: {userId}
    ; +} + +// ❌ Global array push +const events = []; +function Component({event}) { + events.push(event); // Mutating global array + return
    Events: {events.length}
    ; +} + +// ❌ Cache manipulation +const cache = {}; +function Component({id}) { + if (!cache[id]) { + cache[id] = fetchData(id); // Modifying cache during render + } + return
    {cache[id]}
    ; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Use state for counters +function Component() { + const [clickCount, setClickCount] = useState(0); + + const handleClick = () => { + setClickCount(c => c + 1); + }; + + return ( + + ); +} + +// ✅ Use context for global values +function Component() { + const user = useContext(UserContext); + return
    User: {user.id}
    ; +} + +// ✅ Synchronize external state with React +function Component({title}) { + useEffect(() => { + document.title = title; // OK in effect + }, [title]); + + return
    Page: {title}
    ; +} +``` diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md new file mode 100644 index 000000000..2314cde06 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md @@ -0,0 +1,161 @@ +--- +title: immutability +--- + + + +Validates against mutating props, state, and other values that [are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable). + + + +## Rule Details {/*rule-details*/} + +A component’s props and state are immutable snapshots. Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`. + +## Common Violations {/*common-violations*/} + +### Invalid {/*invalid*/} + +```js +// ❌ Array push mutation +function Component() { + const [items, setItems] = useState([1, 2, 3]); + + const addItem = () => { + items.push(4); // Mutating! + setItems(items); // Same reference, no re-render + }; +} + +// ❌ Object property assignment +function Component() { + const [user, setUser] = useState({name: 'Alice'}); + + const updateName = () => { + user.name = 'Bob'; // Mutating! + setUser(user); // Same reference + }; +} + +// ❌ Sort without spreading +function Component() { + const [items, setItems] = useState([3, 1, 2]); + + const sortItems = () => { + setItems(items.sort()); // sort mutates! + }; +} +``` + +### Valid {/*valid*/} + +```js +// ✅ Create new array +function Component() { + const [items, setItems] = useState([1, 2, 3]); + + const addItem = () => { + setItems([...items, 4]); // New array + }; +} + +// ✅ Create new object +function Component() { + const [user, setUser] = useState({name: 'Alice'}); + + const updateName = () => { + setUser({...user, name: 'Bob'}); // New object + }; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I need to add items to an array {/*add-items-array*/} + +Mutating arrays with methods like `push()` won't trigger re-renders: + +```js +// ❌ Wrong: Mutating the array +function TodoList() { + const [todos, setTodos] = useState([]); + + const addTodo = (id, text) => { + todos.push({id, text}); + setTodos(todos); // Same array reference! + }; + + return ( +
      + {todos.map(todo =>
    • {todo.text}
      • )} +
    + ); +} +``` + +Create a new array instead: + +```js +// ✅ Better: Create a new array +function TodoList() { + const [todos, setTodos] = useState([]); + + const addTodo = (id, text) => { + setTodos([...todos, {id, text}]); + // Or: setTodos(todos => [...todos, {id: Date.now(), text}]) + }; + + return ( +
      + {todos.map(todo =>
    • {todo.text}
      • )} +
    + ); +} +``` + +### I need to update nested objects {/*update-nested-objects*/} + +Mutating nested properties doesn't trigger re-renders: + +```js +// ❌ Wrong: Mutating nested object +function UserProfile() { + const [user, setUser] = useState({ + name: 'Alice', + settings: { + theme: 'light', + notifications: true + } + }); + + const toggleTheme = () => { + user.settings.theme = 'dark'; // Mutation! + setUser(user); // Same object reference + }; +} +``` + +Spread at each level that needs updating: + +```js +// ✅ Better: Create new objects at each level +function UserProfile() { + const [user, setUser] = useState({ + name: 'Alice', + settings: { + theme: 'light', + notifications: true + } + }); + + const toggleTheme = () => { + setUser({ + ...user, + settings: { + ...user.settings, + theme: 'dark' + } + }); + }; +} +``` \ No newline at end of file diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md new file mode 100644 index 000000000..e057e1978 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md @@ -0,0 +1,138 @@ +--- +title: incompatible-library +--- + + + +Validates against usage of libraries which are incompatible with memoization (manual or automatic). + + + + + +These libraries were designed before React's memoization rules were fully documented. They made the correct choices at the time to optimize for ergonomic ways to keep components just the right amount of reactive as app state changes. While these legacy patterns worked, we have since discovered that it's incompatible with React's programming model. We will continue working with library authors to migrate these libraries to use patterns that follow the Rules of React. + + + +## Rule Details {/*rule-details*/} + +Some libraries use patterns that aren't supported by React. When the linter detects usages of these APIs from a [known list](https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts), it flags them under this rule. This means that React Compiler can automatically skip over components that use these incompatible APIs, in order to avoid breaking your app. + +```js +// Example of how memoization breaks with these libraries +function Form() { + const { watch } = useForm(); + + // ❌ This value will never update, even when 'name' field changes + const name = useMemo(() => watch('name'), [watch]); + + return
    Name: {name}
    ; // UI appears "frozen" +} +``` + +React Compiler automatically memoizes values following the Rules of React. If something breaks with manual `useMemo`, it will also break the compiler's automatic optimization. This rule helps identify these problematic patterns. + + + +#### Designing APIs that follow the Rules of React {/*designing-apis-that-follow-the-rules-of-react*/} + +One question to think about when designing a library API or hook is whether calling the API can be safely memoized with `useMemo`. If it can't, then both manual and React Compiler memoizations will break your user's code. + +For example, one such incompatible pattern is "interior mutability". Interior mutability is when an object or function keeps its own hidden state that changes over time, even though the reference to it stays the same. Think of it like a box that looks the same on the outside but secretly rearranges its contents. React can't tell anything changed because it only checks if you gave it a different box, not what's inside. This breaks memoization, since React relies on the outer object (or function) changing if part of its value has changed. + +As a rule of thumb, when designing React APIs, think about whether `useMemo` would break it: + +```js +function Component() { + const { someFunction } = useLibrary(); + // it should always be safe to memoize functions like this + const result = useMemo(() => someFunction(), [someFunction]); +} +``` + +Instead, design APIs that return immutable state and use explicit update functions: + +```js +// ✅ Good: Return immutable state that changes reference when updated +function Component() { + const { field, updateField } = useLibrary(); + // this is always safe to memo + const greeting = useMemo(() => `Hello, ${field.name}!`, [field.name]); + + return ( +
    + updateField('name', e.target.value)} + /> +

    {greeting}

    +
    + ); +} +``` + +     + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ react-hook-form `watch` +function Component() { + const {watch} = useForm(); + const value = watch('field'); // Interior mutability + return
    {value}
    ; +} + +// ❌ TanStack Table `useReactTable` +function Component({data}) { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + }); + // table instance uses interior mutability + return ; +} +``` + + + +#### MobX {/*mobx*/} + +MobX patterns like `observer` also break memoization assumptions, but the linter does not yet detect them. If you rely on MobX and find that your app doesn't work with React Compiler, you may need to use the `"use no memo" directive`. + +```js +// ❌ MobX `observer` +const Component = observer(() => { + const [timer] = useState(() => new Timer()); + return Seconds passed: {timer.secondsPassed}; +}); +``` + + + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ For react-hook-form, use `useWatch`: +function Component() { + const {register, control} = useForm(); + const watchedValue = useWatch({ + control, + name: 'field' + }); + + return ( + <> + +
    Current value: {watchedValue}
    + + ); +} +``` + +Some other libraries do not yet have alternative APIs that are compatible with React's memoization model. If the linter doesn't automatically skip over your components or hooks that call these APIs, please [file an issue](https://github.com/facebook/react/issues) so we can add it to the linter. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md new file mode 100644 index 000000000..93b582b1e --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md @@ -0,0 +1,93 @@ +--- +title: preserve-manual-memoization +--- + + + +Validates that existing manual memoization is preserved by the compiler. React Compiler will only compile components and hooks if its inference [matches or exceeds the existing manual memoization](/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo). + + + +## Rule Details {/*rule-details*/} + +React Compiler preserves your existing `useMemo`, `useCallback`, and `React.memo` calls. If you've manually memoized something, the compiler assumes you had a good reason and won't remove it. However, incomplete dependencies prevent the compiler from understanding your code's data flow and applying further optimizations. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Missing dependencies in useMemo +function Component({ data, filter }) { + const filtered = useMemo( + () => data.filter(filter), + [data] // Missing 'filter' dependency + ); + + return ; +} + +// ❌ Missing dependencies in useCallback +function Component({ onUpdate, value }) { + const handleClick = useCallback(() => { + onUpdate(value); + }, [onUpdate]); // Missing 'value' + + return ; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Complete dependencies +function Component({ data, filter }) { + const filtered = useMemo( + () => data.filter(filter), + [data, filter] // All dependencies included + ); + + return ; +} + +// ✅ Or let the compiler handle it +function Component({ data, filter }) { + // No manual memoization needed + const filtered = data.filter(filter); + return ; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### Should I remove my manual memoization? {/*remove-manual-memoization*/} + +You might wonder if React Compiler makes manual memoization unnecessary: + +```js +// Do I still need this? +function Component({items, sortBy}) { + const sorted = useMemo(() => { + return [...items].sort((a, b) => { + return a[sortBy] - b[sortBy]; + }); + }, [items, sortBy]); + + return ; +} +``` + +You can safely remove it if using React Compiler: + +```js +// ✅ Better: Let the compiler optimize +function Component({items, sortBy}) { + const sorted = [...items].sort((a, b) => { + return a[sortBy] - b[sortBy]; + }); + + return ; +} +``` \ No newline at end of file diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md new file mode 100644 index 000000000..af8aacc61 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md @@ -0,0 +1,83 @@ +--- +title: purity +--- + + + +Validates that [components/hooks are pure](/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions. + + + +## Rule Details {/*rule-details*/} + +React components must be pure functions - given the same props, they should always return the same JSX. When components use functions like `Math.random()` or `Date.now()` during render, they produce different output each time, breaking React's assumptions and causing bugs like hydration mismatches, incorrect memoization, and unpredictable behavior. + +## Common Violations {/*common-violations*/} + +In general, any API that returns a different value for the same inputs violates this rule. Usual examples include: + +- `Math.random()` +- `Date.now()` / `new Date()` +- `crypto.randomUUID()` +- `performance.now()` + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Math.random() in render +function Component() { + const id = Math.random(); // Different every render + return
    Content
    ; +} + +// ❌ Date.now() for values +function Component() { + const timestamp = Date.now(); // Changes every render + return
    Created at: {timestamp}
    ; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Stable IDs from initial state +function Component() { + const [id] = useState(() => crypto.randomUUID()); + return
    Content
    ; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I need to show the current time {/*current-time*/} + +Calling `Date.now()` during render makes your component impure: + +```js {expectedErrors: {'react-compiler': [3]}} +// ❌ Wrong: Time changes every render +function Clock() { + return
    Current time: {Date.now()}
    ; +} +``` + +Instead, [move the impure function outside of render](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent): + +```js +function Clock() { + const [time, setTime] = useState(() => Date.now()); + + useEffect(() => { + const interval = setInterval(() => { + setTime(Date.now()); + }, 1000); + + return () => clearInterval(interval); + }, []); + + return
    Current time: {time}
    ; +} +``` \ No newline at end of file diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/refs.md b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md new file mode 100644 index 000000000..3108fdd89 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md @@ -0,0 +1,115 @@ +--- +title: refs +--- + + + +Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](/reference/react/useRef#usage). + + + +## Rule Details {/*rule-details*/} + +Refs hold values that aren't used for rendering. Unlike state, changing a ref doesn't trigger a re-render. Reading or writing `ref.current` during render breaks React's expectations. Refs might not be initialized when you try to read them, and their values can be stale or inconsistent. + +## How It Detects Refs {/*how-it-detects-refs*/} + +The lint only applies these rules to values it knows are refs. A value is inferred as a ref when the compiler sees any of the following patterns: + +- Returned from `useRef()` or `React.createRef()`. + + ```js + const scrollRef = useRef(null); + ``` + +- An identifier named `ref` or ending in `Ref` that reads from or writes to `.current`. + + ```js + buttonRef.current = node; + ``` + +- Passed through a JSX `ref` prop (for example `
    `). + + ```jsx + + ``` + +Once something is marked as a ref, that inference follows the value through assignments, destructuring, or helper calls. This lets the lint surface violations even when `ref.current` is accessed inside another function that received the ref as an argument. + +## Common Violations {/*common-violations*/} + +- Reading `ref.current` during render +- Updating `refs` during render +- Using `refs` for values that should be state + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Reading ref during render +function Component() { + const ref = useRef(0); + const value = ref.current; // Don't read during render + return
    {value}
    ; +} + +// ❌ Modifying ref during render +function Component({value}) { + const ref = useRef(null); + ref.current = value; // Don't modify during render + return
    ; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Read ref in effects/handlers +function Component() { + const ref = useRef(null); + + useEffect(() => { + if (ref.current) { + console.log(ref.current.offsetWidth); // OK in effect + } + }); + + return
    ; +} + +// ✅ Use state for UI values +function Component() { + const [count, setCount] = useState(0); + + return ( + + ); +} + +// ✅ Lazy initialization of ref value +function Component() { + const ref = useRef(null); + + // Initialize only once on first use + if (ref.current === null) { + ref.current = expensiveComputation(); // OK - lazy initialization + } + + const handleClick = () => { + console.log(ref.current); // Use the initialized value + }; + + return ; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### The lint flagged my plain object with `.current` {/*plain-object-current*/} + +The name heuristic intentionally treats `ref.current` and `fooRef.current` as real refs. If you're modeling a custom container object, pick a different name (for example, `box`) or move the mutable value into state. Renaming avoids the lint because the compiler stops inferring it as a ref. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md new file mode 100644 index 000000000..a364ab67f --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md @@ -0,0 +1,179 @@ +--- +title: rules-of-hooks +--- + + + +Validates that components and hooks follow the [Rules of Hooks](/reference/rules/rules-of-hooks). + + + +## Rule Details {/*rule-details*/} + +React relies on the order in which hooks are called to correctly preserve state between renders. Each time your component renders, React expects the exact same hooks to be called in the exact same order. When hooks are called conditionally or in loops, React loses track of which state corresponds to which hook call, leading to bugs like state mismatches and "Rendered fewer/more hooks than expected" errors. + +## Common Violations {/*common-violations*/} + +These patterns violate the Rules of Hooks: + +- **Hooks in conditions** (`if`/`else`, ternary, `&&`/`||`) +- **Hooks in loops** (`for`, `while`, `do-while`) +- **Hooks after early returns** +- **Hooks in callbacks/event handlers** +- **Hooks in async functions** +- **Hooks in class methods** +- **Hooks at module level** + + + +### `use` hook {/*use-hook*/} + +The `use` hook is different from other React hooks. You can call it conditionally and in loops: + +```js +// ✅ `use` can be conditional +if (shouldFetch) { + const data = use(fetchPromise); +} + +// ✅ `use` can be in loops +for (const promise of promises) { + results.push(use(promise)); +} +``` + +However, `use` still has restrictions: +- Can't be wrapped in try/catch +- Must be called inside a component or hook + +Learn more: [`use` API Reference](/reference/react/use) + + + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Hook in condition +if (isLoggedIn) { + const [user, setUser] = useState(null); +} + +// ❌ Hook after early return +if (!data) return ; +const [processed, setProcessed] = useState(data); + +// ❌ Hook in callback + + ); +} + +// ✅ Derive from props instead of setting state +function Component({user}) { + const name = user?.name || ''; + const email = user?.email || ''; + return
    {name}
    ; +} + +// ✅ Conditionally derive state from props and state from previous renders +function Component({ items }) { + const [isReverse, setIsReverse] = useState(false); + const [selection, setSelection] = useState(null); + + const [prevItems, setPrevItems] = useState(items); + if (items !== prevItems) { // This condition makes it valid + setPrevItems(items); + setSelection(null); + } + // ... +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I want to sync state to a prop {/*clamp-state-to-prop*/} + +A common problem is trying to "fix" state after it renders. Suppose you want to keep a counter from exceeding a `max` prop: + +```js +// ❌ Wrong: clamps during render +function Counter({max}) { + const [count, setCount] = useState(0); + + if (count > max) { + setCount(max); + } + + return ( + + ); +} +``` + +As soon as `count` exceeds `max`, an infinite loop is triggered. + +Instead, it's often better to move this logic to the event (the place where the state is first set). For example, you can enforce the maximum at the moment you update state: + +```js +// ✅ Clamp when updating +function Counter({max}) { + const [count, setCount] = useState(0); + + const increment = () => { + setCount(current => Math.min(current + 1, max)); + }; + + return ; +} +``` + +Now the setter only runs in response to the click, React finishes the render normally, and `count` never crosses `max`. + +In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](https://react.dev/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md new file mode 100644 index 000000000..bd52f0703 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md @@ -0,0 +1,103 @@ +--- +title: static-components +--- + + + +Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering. + + + +## Rule Details {/*rule-details*/} + +Components defined inside other components are recreated on every render. React sees each as a brand new component type, unmounting the old one and mounting the new one, destroying all state and DOM nodes in the process. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Component defined inside component +function Parent() { + const ChildComponent = () => { // New component every render! + const [count, setCount] = useState(0); + return ; + }; + + return ; // State resets every render +} + +// ❌ Dynamic component creation +function Parent({type}) { + const Component = type === 'button' + ? () => + : () =>
    Text
    ; + + return ; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Components at module level +const ButtonComponent = () => ; +const TextComponent = () =>
    Text
    ; + +function Parent({type}) { + const Component = type === 'button' + ? ButtonComponent // Reference existing component + : TextComponent; + + return ; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I need to render different components conditionally {/*conditional-components*/} + +You might define components inside to access local state: + +```js {expectedErrors: {'react-compiler': [13]}} +// ❌ Wrong: Inner component to access parent state +function Parent() { + const [theme, setTheme] = useState('light'); + + function ThemedButton() { // Recreated every render! + return ( + + ); + } + + return ; +} +``` + +Pass data as props instead: + +```js +// ✅ Better: Pass props to static component +function ThemedButton({theme}) { + return ( + + ); +} + +function Parent() { + const [theme, setTheme] = useState('light'); + return ; +} +``` + + + +If you find yourself wanting to define components inside other components to access local variables, that's a sign you should be passing props instead. This makes components more reusable and testable. + + \ No newline at end of file diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md new file mode 100644 index 000000000..a3eefcdb2 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md @@ -0,0 +1,102 @@ +--- +title: unsupported-syntax +--- + + + +Validates against syntax that React Compiler does not support. If you need to, you can still use this syntax outside of React, such as in a standalone utility function. + + + +## Rule Details {/*rule-details*/} + +React Compiler needs to statically analyze your code to apply optimizations. Features like `eval` and `with` make it impossible to statically understand what the code does at compile time, so the compiler can't optimize components that use them. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Using eval in component +function Component({ code }) { + const result = eval(code); // Can't be analyzed + return
    {result}
    ; +} + +// ❌ Using with statement +function Component() { + with (Math) { // Changes scope dynamically + return
    {sin(PI / 2)}
    ; + } +} + +// ❌ Dynamic property access with eval +function Component({propName}) { + const value = eval(`props.${propName}`); + return
    {value}
    ; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Use normal property access +function Component({propName, props}) { + const value = props[propName]; // Analyzable + return
    {value}
    ; +} + +// ✅ Use standard Math methods +function Component() { + return
    {Math.sin(Math.PI / 2)}
    ; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I need to evaluate dynamic code {/*evaluate-dynamic-code*/} + +You might need to evaluate user-provided code: + +```js {expectedErrors: {'react-compiler': [3]}} +// ❌ Wrong: eval in component +function Calculator({expression}) { + const result = eval(expression); // Unsafe and unoptimizable + return
    Result: {result}
    ; +} +``` + +Use a safe expression parser instead: + +```js +// ✅ Better: Use a safe parser +import {evaluate} from 'mathjs'; // or similar library + +function Calculator({expression}) { + const [result, setResult] = useState(null); + + const calculate = () => { + try { + // Safe mathematical expression evaluation + setResult(evaluate(expression)); + } catch (error) { + setResult('Invalid expression'); + } + }; + + return ( +
    + + {result &&
    Result: {result}
    } +
    + ); +} +``` + + + +Never use `eval` with user input - it's a security risk. Use dedicated parsing libraries for specific use cases like mathematical expressions, JSON parsing, or template evaluation. + + \ No newline at end of file diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md new file mode 100644 index 000000000..a5a77e5f6 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md @@ -0,0 +1,94 @@ +--- +title: use-memo +--- + + + +Validates that the `useMemo` hook is used with a return value. See [`useMemo` docs](/reference/react/useMemo) for more information. + + + +## Rule Details {/*rule-details*/} + +`useMemo` is for computing and caching expensive values, not for side effects. Without a return value, `useMemo` returns `undefined`, which defeats its purpose and likely indicates you're using the wrong hook. + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js {expectedErrors: {'react-compiler': [3]}} +// ❌ No return value +function Component({ data }) { + const processed = useMemo(() => { + data.forEach(item => console.log(item)); + // Missing return! + }, [data]); + + return
    {processed}
    ; // Always undefined +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// ✅ Returns computed value +function Component({ data }) { + const processed = useMemo(() => { + return data.map(item => item * 2); + }, [data]); + + return
    {processed}
    ; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I need to run side effects when dependencies change {/*side-effects*/} + +You might try to use `useMemo` for side effects: + +{/* TODO(@poteto) fix compiler validation to check for unassigned useMemos */} +```js {expectedErrors: {'react-compiler': [4]}} +// ❌ Wrong: Side effects in useMemo +function Component({user}) { + // No return value, just side effect + useMemo(() => { + analytics.track('UserViewed', {userId: user.id}); + }, [user.id]); + + // Not assigned to a variable + useMemo(() => { + return analytics.track('UserViewed', {userId: user.id}); + }, [user.id]); +} +``` + +If the side effect needs to happen in response to user interaction, it's best to colocate the side effect with the event: + +```js +// ✅ Good: Side effects in event handlers +function Component({user}) { + const handleClick = () => { + analytics.track('ButtonClicked', {userId: user.id}); + // Other click logic... + }; + + return ; +} +``` + +If the side effect sychronizes React state with some external state (or vice versa), use `useEffect`: + +```js +// ✅ Good: Synchronization in useEffect +function Component({theme}) { + useEffect(() => { + localStorage.setItem('preferredTheme', theme); + document.body.className = theme; + }, [theme]); + + return
    Current theme: {theme}
    ; +} +``` diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md new file mode 100644 index 000000000..5513d1c6a --- /dev/null +++ b/src/content/reference/react-compiler/compilationMode.md @@ -0,0 +1,201 @@ +--- +title: compilationMode +--- + + + +The `compilationMode` option controls how the React Compiler selects which functions to compile. + + + +```js +{ + compilationMode: 'infer' // or 'annotation', 'syntax', 'all' +} +``` + + + +--- + +## Reference {/*reference*/} + +### `compilationMode` {/*compilationmode*/} + +Controls the strategy for determining which functions the React Compiler will optimize. + +#### Type {/*type*/} + +``` +'infer' | 'syntax' | 'annotation' | 'all' +``` + +#### Default value {/*default-value*/} + +`'infer'` + +#### Options {/*options*/} + +- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks: + - Functions explicitly annotated with `"use memo"` directive + - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks + +- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption. + +- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax. + +- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions. + +#### Caveats {/*caveats*/} + +- The `'infer'` mode requires functions to follow React naming conventions to be detected +- Using `'all'` mode may negatively impact performance by compiling utility functions +- The `'syntax'` mode requires Flow and won't work with TypeScript +- Regardless of mode, functions with `"use no memo"` directive are always skipped + +--- + +## Usage {/*usage*/} + +### Default inference mode {/*default-inference-mode*/} + +The default `'infer'` mode works well for most codebases that follow React conventions: + +```js +{ + compilationMode: 'infer' +} +``` + +With this mode, these functions will be compiled: + +```js +// ✅ Compiled: Named like a component + returns JSX +function Button(props) { + return ; +} + +// ✅ Compiled: Named like a hook + calls hooks +function useCounter() { + const [count, setCount] = useState(0); + return [count, setCount]; +} + +// ✅ Compiled: Explicit directive +function expensiveCalculation(data) { + "use memo"; + return data.reduce(/* ... */); +} + +// ❌ Not compiled: Not a component/hook pattern +function calculateTotal(items) { + return items.reduce((a, b) => a + b, 0); +} +``` + +### Incremental adoption with annotation mode {/*incremental-adoption*/} + +For gradual migration, use `'annotation'` mode to only compile marked functions: + +```js +{ + compilationMode: 'annotation' +} +``` + +Then explicitly mark functions to compile: + +```js +// Only this function will be compiled +function ExpensiveList(props) { + "use memo"; + return ( +
      + {props.items.map(item => ( +
    • {item.name}
      • + ))} +
    + ); +} + +// This won't be compiled without the directive +function NormalComponent(props) { + return
    {props.content}
    ; +} +``` + +### Using Flow syntax mode {/*flow-syntax-mode*/} + +If your codebase uses Flow instead of TypeScript: + +```js +{ + compilationMode: 'syntax' +} +``` + +Then use Flow's component syntax: + +```js +// Compiled: Flow component syntax +component Button(label: string) { + return ; +} + +// Compiled: Flow hook syntax +hook useCounter(initial: number) { + const [count, setCount] = useState(initial); + return [count, setCount]; +} + +// Not compiled: Regular function syntax +function helper(data) { + return process(data); +} +``` + +### Opting out specific functions {/*opting-out*/} + +Regardless of compilation mode, use `"use no memo"` to skip compilation: + +```js +function ComponentWithSideEffects() { + "use no memo"; // Prevent compilation + + // This component has side effects that shouldn't be memoized + logToAnalytics('component_rendered'); + + return
    Content
    ; +} +``` + +--- + +## Troubleshooting {/*troubleshooting*/} + +### Component not being compiled in infer mode {/*component-not-compiled-infer*/} + +In `'infer'` mode, ensure your component follows React conventions: + +```js +// ❌ Won't be compiled: lowercase name +function button(props) { + return ; +} + +// ✅ Will be compiled: PascalCase name +function Button(props) { + return ; +} + +// ❌ Won't be compiled: doesn't create JSX or call hooks +function useData() { + return window.localStorage.getItem('data'); +} + +// ✅ Will be compiled: calls a hook +function useData() { + const [data] = useState(() => window.localStorage.getItem('data')); + return data; +} +``` diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md new file mode 100644 index 000000000..ec0a7581e --- /dev/null +++ b/src/content/reference/react-compiler/compiling-libraries.md @@ -0,0 +1,106 @@ +--- +title: Compiling Libraries +--- + + +This guide helps library authors understand how to use React Compiler to ship optimized library code to their users. + + + + +## Why Ship Compiled Code? {/*why-ship-compiled-code*/} + +As a library author, you can compile your library code before publishing to npm. This provides several benefits: + +- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet +- **No configuration required by users** - The optimizations work out of the box +- **Consistent behavior** - All users get the same optimized version regardless of their build setup + +## Setting Up Compilation {/*setting-up-compilation*/} + +Add React Compiler to your library's build process: + + +npm install -D babel-plugin-react-compiler@latest + + +Configure your build tool to compile your library. For example, with Babel: + +```js +// babel.config.js +module.exports = { + plugins: [ + 'babel-plugin-react-compiler', + ], + // ... other config +}; +``` + +## Backwards Compatibility {/*backwards-compatibility*/} + +If your library supports React versions below 19, you'll need additional configuration: + +### 1. Install the runtime package {/*install-runtime-package*/} + +We recommend installing react-compiler-runtime as a direct dependency: + + +npm install react-compiler-runtime@latest + + +```json +{ + "dependencies": { + "react-compiler-runtime": "^1.0.0" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + } +} +``` + +### 2. Configure the target version {/*configure-target-version*/} + +Set the minimum React version your library supports: + +```js +{ + target: '17', // Minimum supported React version +} +``` + +## Testing Strategy {/*testing-strategy*/} + +Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios. + +## Troubleshooting {/*troubleshooting*/} + +### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/} + +If your compiled library throws errors in React 17 or 18: + +1. Verify you've installed `react-compiler-runtime` as a dependency +2. Check that your `target` configuration matches your minimum supported React version +3. Ensure the runtime package is included in your published bundle + +### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/} + +Some Babel plugins may conflict with React Compiler: + +1. Place `babel-plugin-react-compiler` early in your plugin list +2. Disable conflicting optimizations in other plugins +3. Test your build output thoroughly + +### Runtime module not found {/*runtime-module-not-found*/} + +If users see "Cannot find module 'react-compiler-runtime'": + +1. Ensure the runtime is listed in `dependencies`, not `devDependencies` +2. Check that your bundler includes the runtime in the output +3. Verify the package is published to npm with your library + +## Next Steps {/*next-steps*/} + +- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code +- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options +- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization \ No newline at end of file diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md new file mode 100644 index 000000000..ec9b27e6f --- /dev/null +++ b/src/content/reference/react-compiler/configuration.md @@ -0,0 +1,151 @@ +--- +title: Configuration +--- + + + +This page lists all configuration options available in React Compiler. + + + + + +For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options. + + + +```js +// babel.config.js +module.exports = { + plugins: [ + [ + 'babel-plugin-react-compiler', { + // compiler options + } + ] + ] +}; +``` + +--- + +## Compilation Control {/*compilation-control*/} + +These options control *what* the compiler optimizes and *how* it selects components and hooks to compile. + +* [`compilationMode`](/reference/react-compiler/compilationMode) controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection). + +```js +{ + compilationMode: 'annotation' // Only compile "use memo" functions +} +``` + +--- + +## Version Compatibility {/*version-compatibility*/} + +React version configuration ensures the compiler generates code compatible with your React version. + +[`target`](/reference/react-compiler/target) specifies which React version you're using (17, 18, or 19). + +```js +// For React 18 projects +{ + target: '18' // Also requires react-compiler-runtime package +} +``` + +--- + +## Error Handling {/*error-handling*/} + +These options control how the compiler responds to code that doesn't follow the [Rules of React](/reference/rules). + +[`panicThreshold`](/reference/react-compiler/panicThreshold) determines whether to fail the build or skip problematic components. + +```js +// Recommended for production +{ + panicThreshold: 'none' // Skip components with errors instead of failing the build +} +``` + +--- + +## Debugging {/*debugging*/} + +Logging and analysis options help you understand what the compiler is doing. + +[`logger`](/reference/react-compiler/logger) provides custom logging for compilation events. + +```js +{ + logger: { + logEvent(filename, event) { + if (event.kind === 'CompileSuccess') { + console.log('Compiled:', filename); + } + } + } +} +``` + +--- + +## Feature Flags {/*feature-flags*/} + +Conditional compilation lets you control when optimized code is used. + +[`gating`](/reference/react-compiler/gating) enables runtime feature flags for A/B testing or gradual rollouts. + +```js +{ + gating: { + source: 'my-feature-flags', + importSpecifierName: 'isCompilerEnabled' + } +} +``` + +--- + +## Common Configuration Patterns {/*common-patterns*/} + +### Default configuration {/*default-configuration*/} + +For most React 19 applications, the compiler works without configuration: + +```js +// babel.config.js +module.exports = { + plugins: [ + 'babel-plugin-react-compiler' + ] +}; +``` + +### React 17/18 projects {/*react-17-18*/} + +Older React versions need the runtime package and target configuration: + +```bash +npm install react-compiler-runtime@latest +``` + +```js +{ + target: '18' // or '17' +} +``` + +### Incremental adoption {/*incremental-adoption*/} + +Start with specific directories and expand gradually: + +```js +{ + compilationMode: 'annotation' // Only compile "use memo" functions +} +``` + diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md new file mode 100644 index 000000000..705d0f620 --- /dev/null +++ b/src/content/reference/react-compiler/directives.md @@ -0,0 +1,198 @@ +--- +title: Directives +--- + + +React Compiler directives are special string literals that control whether specific functions are compiled. + + +```js +function MyComponent() { + "use memo"; // Opt this component into compilation + return
    {/* ... */}
    ; +} +``` + + + +--- + +## Overview {/*overview*/} + +React Compiler directives provide fine-grained control over which functions are optimized by the compiler. They are string literals placed at the beginning of a function body or at the top of a module. + +### Available directives {/*available-directives*/} + +* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - Opts a function into compilation +* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - Opts a function out of compilation + +### Quick comparison {/*quick-comparison*/} + +| Directive | Purpose | When to use | +|-----------|---------|-------------| +| [`"use memo"`](/reference/react-compiler/directives/use-memo) | Force compilation | When using `annotation` mode or to override `infer` mode heuristics | +| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | Prevent compilation | Debugging issues or working with incompatible code | + +--- + +## Usage {/*usage*/} + +### Function-level directives {/*function-level*/} + +Place directives at the beginning of a function to control its compilation: + +```js +// Opt into compilation +function OptimizedComponent() { + "use memo"; + return
    This will be optimized
    ; +} + +// Opt out of compilation +function UnoptimizedComponent() { + "use no memo"; + return
    This won't be optimized
    ; +} +``` + +### Module-level directives {/*module-level*/} + +Place directives at the top of a file to affect all functions in that module: + +```js +// At the very top of the file +"use memo"; + +// All functions in this file will be compiled +function Component1() { + return
    Compiled
    ; +} + +function Component2() { + return
    Also compiled
    ; +} + +// Can be overridden at function level +function Component3() { + "use no memo"; // This overrides the module directive + return
    Not compiled
    ; +} +``` + +### Compilation modes interaction {/*compilation-modes*/} + +Directives behave differently depending on your [`compilationMode`](/reference/react-compiler/compilationMode): + +* **`annotation` mode**: Only functions with `"use memo"` are compiled +* **`infer` mode**: Compiler decides what to compile, directives override decisions +* **`all` mode**: Everything is compiled, `"use no memo"` can exclude specific functions + +--- + +## Best practices {/*best-practices*/} + +### Use directives sparingly {/*use-sparingly*/} + +Directives are escape hatches. Prefer configuring the compiler at the project level: + +```js +// ✅ Good - project-wide configuration +{ + plugins: [ + ['babel-plugin-react-compiler', { + compilationMode: 'infer' + }] + ] +} + +// ⚠️ Use directives only when needed +function SpecialCase() { + "use no memo"; // Document why this is needed + // ... +} +``` + +### Document directive usage {/*document-usage*/} + +Always explain why a directive is used: + +```js +// ✅ Good - clear explanation +function DataGrid() { + "use no memo"; // TODO: Remove after fixing issue with dynamic row heights (JIRA-123) + // Complex grid implementation +} + +// ❌ Bad - no explanation +function Mystery() { + "use no memo"; + // ... +} +``` + +### Plan for removal {/*plan-removal*/} + +Opt-out directives should be temporary: + +1. Add the directive with a TODO comment +2. Create a tracking issue +3. Fix the underlying problem +4. Remove the directive + +```js +function TemporaryWorkaround() { + "use no memo"; // TODO: Remove after upgrading ThirdPartyLib to v2.0 + return ; +} +``` + +--- + +## Common patterns {/*common-patterns*/} + +### Gradual adoption {/*gradual-adoption*/} + +When adopting the React Compiler in a large codebase: + +```js +// Start with annotation mode +{ + compilationMode: 'annotation' +} + +// Opt in stable components +function StableComponent() { + "use memo"; + // Well-tested component +} + +// Later, switch to infer mode and opt out problematic ones +function ProblematicComponent() { + "use no memo"; // Fix issues before removing + // ... +} +``` + + +--- + +## Troubleshooting {/*troubleshooting*/} + +For specific issues with directives, see the troubleshooting sections in: + +* [`"use memo"` troubleshooting](/reference/react-compiler/directives/use-memo#troubleshooting) +* [`"use no memo"` troubleshooting](/reference/react-compiler/directives/use-no-memo#troubleshooting) + +### Common issues {/*common-issues*/} + +1. **Directive ignored**: Check placement (must be first) and spelling +2. **Compilation still happens**: Check `ignoreUseNoForget` setting +3. **Module directive not working**: Ensure it's before all imports + +--- + +## See also {/*see-also*/} + +* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize +* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options +* [React Compiler documentation](https://react.dev/learn/react-compiler) - Getting started guide \ No newline at end of file diff --git a/src/content/reference/react-compiler/directives/use-memo.md b/src/content/reference/react-compiler/directives/use-memo.md new file mode 100644 index 000000000..431862682 --- /dev/null +++ b/src/content/reference/react-compiler/directives/use-memo.md @@ -0,0 +1,157 @@ +--- +title: "use memo" +titleForTitleTag: "'use memo' directive" +--- + + + +`"use memo"` marks a function for React Compiler optimization. + + + + + +In most cases, you don't need `"use memo"`. It's primarily needed in `annotation` mode where you must explicitly mark functions for optimization. In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`. + + + + + +--- + +## Reference {/*reference*/} + +### `"use memo"` {/*use-memo*/} + +Add `"use memo"` at the beginning of a function to mark it for React Compiler optimization. + +```js {1} +function MyComponent() { + "use memo"; + // ... +} +``` + +When a function contains `"use memo"`, the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders. + +#### Caveats {/*caveats*/} + +* `"use memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK). +* The directive must be written with double or single quotes, not backticks. +* The directive must exactly match `"use memo"`. +* Only the first directive in a function is processed; additional directives are ignored. +* The effect of the directive depends on your [`compilationMode`](/reference/react-compiler/compilationMode) setting. + +### How `"use memo"` marks functions for optimization {/*how-use-memo-marks*/} + +In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your [`compilationMode`](/reference/react-compiler/compilationMode) setting if you've set it. + +`"use memo"` explicitly marks a function for optimization, overriding the default behavior: + +* In `annotation` mode: Only functions with `"use memo"` are optimized +* In `infer` mode: The compiler uses heuristics, but `"use memo"` forces optimization +* In `all` mode: Everything is optimized by default, making `"use memo"` redundant + +The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process. + +### When to use `"use memo"` {/*when-to-use*/} + +You should consider using `"use memo"` when: + +#### You're using annotation mode {/*annotation-mode-use*/} +In `compilationMode: 'annotation'`, the directive is required for any function you want optimized: + +```js +// ✅ This component will be optimized +function OptimizedList() { + "use memo"; + // ... +} + +// ❌ This component won't be optimized +function SimpleWrapper() { + // ... +} +``` + +#### You're gradually adopting React Compiler {/*gradual-adoption*/} +Start with `annotation` mode and selectively optimize stable components: + +```js +// Start by optimizing leaf components +function Button({ onClick, children }) { + "use memo"; + // ... +} + +// Gradually move up the tree as you verify behavior +function ButtonGroup({ buttons }) { + "use memo"; + // ... +} +``` + +--- + +## Usage {/*usage*/} + +### Working with different compilation modes {/*compilation-modes*/} + +The behavior of `"use memo"` changes based on your compiler configuration: + +```js +// babel.config.js +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + compilationMode: 'annotation' // or 'infer' or 'all' + }] + ] +}; +``` + +#### Annotation mode {/*annotation-mode-example*/} +```js +// ✅ Optimized with "use memo" +function ProductCard({ product }) { + "use memo"; + // ... +} + +// ❌ Not optimized (no directive) +function ProductList({ products }) { + // ... +} +``` + +#### Infer mode (default) {/*infer-mode-example*/} +```js +// Automatically memoized because this is named like a Component +function ComplexDashboard({ data }) { + // ... +} + +// Skipped: Is not named like a Component +function simpleDisplay({ text }) { + // ... +} +``` + +In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`. + +--- + +## Troubleshooting {/*troubleshooting*/} + +### Verifying optimization {/*verifying-optimization*/} + +To confirm your component is being optimized: + +1. Check the compiled output in your build +2. Use React DevTools to check for Memo ✨ badge + +### See also {/*see-also*/} + +* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Opt out of compilation +* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure compilation behavior +* [React Compiler](/learn/react-compiler) - Getting started guide \ No newline at end of file diff --git a/src/content/reference/react-compiler/directives/use-no-memo.md b/src/content/reference/react-compiler/directives/use-no-memo.md new file mode 100644 index 000000000..e6c419bc6 --- /dev/null +++ b/src/content/reference/react-compiler/directives/use-no-memo.md @@ -0,0 +1,147 @@ +--- +title: "use no memo" +titleForTitleTag: "'use no memo' directive" +--- + + + +`"use no memo"` prevents a function from being optimized by React Compiler. + + + + + +--- + +## Reference {/*reference*/} + +### `"use no memo"` {/*use-no-memo*/} + +Add `"use no memo"` at the beginning of a function to prevent React Compiler optimization. + +```js {1} +function MyComponent() { + "use no memo"; + // ... +} +``` + +When a function contains `"use no memo"`, the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn't work correctly with the compiler. + +#### Caveats {/*caveats*/} + +* `"use no memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK). +* The directive must be written with double or single quotes, not backticks. +* The directive must exactly match `"use no memo"` or its alias `"use no forget"`. +* This directive takes precedence over all compilation modes and other directives. +* It's intended as a temporary debugging tool, not a permanent solution. + +### How `"use no memo"` opts-out of optimization {/*how-use-no-memo-opts-out*/} + +React Compiler analyzes your code at build time to apply optimizations. `"use no memo"` creates an explicit boundary that tells the compiler to skip a function entirely. + +This directive takes precedence over all other settings: +* In `all` mode: The function is skipped despite the global setting +* In `infer` mode: The function is skipped even if heuristics would optimize it + +The compiler treats these functions as if the React Compiler wasn't enabled, leaving them exactly as written. + +### When to use `"use no memo"` {/*when-to-use*/} + +`"use no memo"` should be used sparingly and temporarily. Common scenarios include: + +#### Debugging compiler issues {/*debugging-compiler*/} +When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem: + +```js +function ProblematicComponent({ data }) { + "use no memo"; // TODO: Remove after fixing issue #123 + + // Rules of React violations that weren't statically detected + // ... +} +``` + +#### Third-party library integration {/*third-party*/} +When integrating with libraries that might not be compatible with the compiler: + +```js +function ThirdPartyWrapper() { + "use no memo"; + + useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly + // ... +} +``` + +--- + +## Usage {/*usage*/} + +The `"use no memo"` directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function: + +```js +function MyComponent() { + "use no memo"; + // Function body +} +``` + +The directive can also be placed at the top of a file to affect all functions in that module: + +```js +"use no memo"; + +// All functions in this file will be skipped by the compiler +``` + +`"use no memo"` at the function level overrides the module level directive. + +--- + +## Troubleshooting {/*troubleshooting*/} + +### Directive not preventing compilation {/*not-preventing*/} + +If `"use no memo"` isn't working: + +```js +// ❌ Wrong - directive after code +function Component() { + const data = getData(); + "use no memo"; // Too late! +} + +// ✅ Correct - directive first +function Component() { + "use no memo"; + const data = getData(); +} +``` + +Also check: +* Spelling - must be exactly `"use no memo"` +* Quotes - must use single or double quotes, not backticks + +### Best practices {/*best-practices*/} + +**Always document why** you're disabling optimization: + +```js +// ✅ Good - clear explanation and tracking +function DataProcessor() { + "use no memo"; // TODO: Remove after fixing rule of react violation + // ... +} + +// ❌ Bad - no explanation +function Mystery() { + "use no memo"; + // ... +} +``` + +### See also {/*see-also*/} + +* [`"use memo"`](/reference/react-compiler/directives/use-memo) - Opt into compilation +* [React Compiler](/learn/react-compiler) - Getting started guide \ No newline at end of file diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md new file mode 100644 index 000000000..479506af3 --- /dev/null +++ b/src/content/reference/react-compiler/gating.md @@ -0,0 +1,141 @@ +--- +title: gating +--- + + + +The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime. + + + +```js +{ + gating: { + source: 'my-feature-flags', + importSpecifierName: 'shouldUseCompiler' + } +} +``` + + + +--- + +## Reference {/*reference*/} + +### `gating` {/*gating*/} + +Configures runtime feature flag gating for compiled functions. + +#### Type {/*type*/} + +``` +{ + source: string; + importSpecifierName: string; +} | null +``` + +#### Default value {/*default-value*/} + +`null` + +#### Properties {/*properties*/} + +- **`source`**: Module path to import the feature flag from +- **`importSpecifierName`**: Name of the exported function to import + +#### Caveats {/*caveats*/} + +- The gating function must return a boolean +- Both compiled and original versions increase bundle size +- The import is added to every file with compiled functions + +--- + +## Usage {/*usage*/} + +### Basic feature flag setup {/*basic-setup*/} + +1. Create a feature flag module: + +```js +// src/utils/feature-flags.js +export function shouldUseCompiler() { + // your logic here + return getFeatureFlag('react-compiler-enabled'); +} +``` + +2. Configure the compiler: + +```js +{ + gating: { + source: './src/utils/feature-flags', + importSpecifierName: 'shouldUseCompiler' + } +} +``` + +3. The compiler generates gated code: + +```js +// Input +function Button(props) { + return ; +} + +// Output (simplified) +import { shouldUseCompiler } from './src/utils/feature-flags'; + +const Button = shouldUseCompiler() + ? function Button_optimized(props) { /* compiled version */ } + : function Button_original(props) { /* original version */ }; +``` + +Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session. + +--- + +## Troubleshooting {/*troubleshooting*/} + +### Feature flag not working {/*flag-not-working*/} + +Verify your flag module exports the correct function: + +```js +// ❌ Wrong: Default export +export default function shouldUseCompiler() { + return true; +} + +// ✅ Correct: Named export matching importSpecifierName +export function shouldUseCompiler() { + return true; +} +``` + +### Import errors {/*import-errors*/} + +Ensure the source path is correct: + +```js +// ❌ Wrong: Relative to babel.config.js +{ + source: './src/flags', + importSpecifierName: 'flag' +} + +// ✅ Correct: Module resolution path +{ + source: '@myapp/feature-flags', + importSpecifierName: 'flag' +} + +// ✅ Also correct: Absolute path from project root +{ + source: './src/utils/flags', + importSpecifierName: 'flag' +} +``` diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md new file mode 100644 index 000000000..41e2a1da0 --- /dev/null +++ b/src/content/reference/react-compiler/logger.md @@ -0,0 +1,118 @@ +--- +title: logger +--- + + + +The `logger` option provides custom logging for React Compiler events during compilation. + + + +```js +{ + logger: { + logEvent(filename, event) { + console.log(`[Compiler] ${event.kind}: ${filename}`); + } + } +} +``` + + + +--- + +## Reference {/*reference*/} + +### `logger` {/*logger*/} + +Configures custom logging to track compiler behavior and debug issues. + +#### Type {/*type*/} + +``` +{ + logEvent: (filename: string | null, event: LoggerEvent) => void; +} | null +``` + +#### Default value {/*default-value*/} + +`null` + +#### Methods {/*methods*/} + +- **`logEvent`**: Called for each compiler event with the filename and event details + +#### Event types {/*event-types*/} + +- **`CompileSuccess`**: Function successfully compiled +- **`CompileError`**: Function skipped due to errors +- **`CompileDiagnostic`**: Non-fatal diagnostic information +- **`CompileSkip`**: Function skipped for other reasons +- **`PipelineError`**: Unexpected compilation error +- **`Timing`**: Performance timing information + +#### Caveats {/*caveats*/} + +- Event structure may change between versions +- Large codebases generate many log entries + +--- + +## Usage {/*usage*/} + +### Basic logging {/*basic-logging*/} + +Track compilation success and failures: + +```js +{ + logger: { + logEvent(filename, event) { + switch (event.kind) { + case 'CompileSuccess': { + console.log(`✅ Compiled: ${filename}`); + break; + } + case 'CompileError': { + console.log(`❌ Skipped: ${filename}`); + break; + } + default: {} + } + } + } +} +``` + +### Detailed error logging {/*detailed-error-logging*/} + +Get specific information about compilation failures: + +```js +{ + logger: { + logEvent(filename, event) { + if (event.kind === 'CompileError') { + console.error(`\nCompilation failed: ${filename}`); + console.error(`Reason: ${event.detail.reason}`); + + if (event.detail.description) { + console.error(`Details: ${event.detail.description}`); + } + + if (event.detail.loc) { + const { line, column } = event.detail.loc.start; + console.error(`Location: Line ${line}, Column ${column}`); + } + + if (event.detail.suggestions) { + console.error('Suggestions:', event.detail.suggestions); + } + } + } + } +} +``` + diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md new file mode 100644 index 000000000..e20f5c0c5 --- /dev/null +++ b/src/content/reference/react-compiler/panicThreshold.md @@ -0,0 +1,87 @@ +--- +title: panicThreshold +--- + + + +The `panicThreshold` option controls how the React Compiler handles errors during compilation. + + + +```js +{ + panicThreshold: 'none' // Recommended +} +``` + + + +--- + +## Reference {/*reference*/} + +### `panicThreshold` {/*panicthreshold*/} + +Determines whether compilation errors should fail the build or skip optimization. + +#### Type {/*type*/} + +``` +'none' | 'critical_errors' | 'all_errors' +``` + +#### Default value {/*default-value*/} + +`'none'` + +#### Options {/*options*/} + +- **`'none'`** (default, recommended): Skip components that can't be compiled and continue building +- **`'critical_errors'`**: Fail the build only on critical compiler errors +- **`'all_errors'`**: Fail the build on any compiler diagnostic + +#### Caveats {/*caveats*/} + +- Production builds should always use `'none'` +- Build failures prevent your application from building +- The compiler automatically detects and skips problematic code with `'none'` +- Higher thresholds are only useful during development for debugging + +--- + +## Usage {/*usage*/} + +### Production configuration (recommended) {/*production-configuration*/} + +For production builds, always use `'none'`. This is the default value: + +```js +{ + panicThreshold: 'none' +} +``` + +This ensures: +- Your build never fails due to compiler issues +- Components that can't be optimized run normally +- Maximum components get optimized +- Stable production deployments + +### Development debugging {/*development-debugging*/} + +Temporarily use stricter thresholds to find issues: + +```js +const isDevelopment = process.env.NODE_ENV === 'development'; + +{ + panicThreshold: isDevelopment ? 'critical_errors' : 'none', + logger: { + logEvent(filename, event) { + if (isDevelopment && event.kind === 'CompileError') { + // ... + } + } + } +} +``` \ No newline at end of file diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md new file mode 100644 index 000000000..8ccc4a6b1 --- /dev/null +++ b/src/content/reference/react-compiler/target.md @@ -0,0 +1,148 @@ +--- +title: target +--- + + + +The `target` option specifies which React version the compiler should generate code for. + + + +```js +{ + target: '19' // or '18', '17' +} +``` + + + +--- + +## Reference {/*reference*/} + +### `target` {/*target*/} + +Configures the React version compatibility for the compiled output. + +#### Type {/*type*/} + +``` +'17' | '18' | '19' +``` + +#### Default value {/*default-value*/} + +`'19'` + +#### Valid values {/*valid-values*/} + +- **`'19'`**: Target React 19 (default). No additional runtime required. +- **`'18'`**: Target React 18. Requires `react-compiler-runtime` package. +- **`'17'`**: Target React 17. Requires `react-compiler-runtime` package. + +#### Caveats {/*caveats*/} + +- Always use string values, not numbers (e.g., `'17'` not `17`) +- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`) +- React 19 includes built-in compiler runtime APIs +- React 17 and 18 require installing `react-compiler-runtime@latest` + +--- + +## Usage {/*usage*/} + +### Targeting React 19 (default) {/*targeting-react-19*/} + +For React 19, no special configuration is needed: + +```js +{ + // defaults to target: '19' +} +``` + +The compiler will use React 19's built-in runtime APIs: + +```js +// Compiled output uses React 19's native APIs +import { c as _c } from 'react/compiler-runtime'; +``` + +### Targeting React 17 or 18 {/*targeting-react-17-or-18*/} + +For React 17 and React 18 projects, you need two steps: + +1. Install the runtime package: + +```bash +npm install react-compiler-runtime@latest +``` + +2. Configure the target: + +```js +// For React 18 +{ + target: '18' +} + +// For React 17 +{ + target: '17' +} +``` + +The compiler will use the polyfill runtime for both versions: + +```js +// Compiled output uses the polyfill +import { c as _c } from 'react-compiler-runtime'; +``` + +--- + +## Troubleshooting {/*troubleshooting*/} + +### Runtime errors about missing compiler runtime {/*missing-runtime*/} + +If you see errors like "Cannot find module 'react/compiler-runtime'": + +1. Check your React version: + ```bash + npm why react + ``` + +2. If using React 17 or 18, install the runtime: + ```bash + npm install react-compiler-runtime@latest + ``` + +3. Ensure your target matches your React version: + ```js + { + target: '18' // Must match your React major version + } + ``` + +### Runtime package not working {/*runtime-not-working*/} + +Ensure the runtime package is: + +1. Installed in your project (not globally) +2. Listed in your `package.json` dependencies +3. The correct version (`@latest` tag) +4. Not in `devDependencies` (it's needed at runtime) + +### Checking compiled output {/*checking-output*/} + +To verify the correct runtime is being used, note the different import (`react/compiler-runtime` for builtin, `react-compiler-runtime` standalone package for 17/18): + +```js +// For React 19 (built-in runtime) +import { c } from 'react/compiler-runtime' +// ^ + +// For React 17/18 (polyfill runtime) +import { c } from 'react-compiler-runtime' +// ^ +``` \ No newline at end of file diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 6f761b035..88ae3db73 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -49,7 +49,14 @@ Une appli entièrement construite en React n'aura généralement qu'un appel à * `onRecoverableError` **optionnelle** : fonction de rappel appelée lorsque React retombe automatiquement sur ses pieds suite à une erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. Certaines de ces erreurs peuvent exposer leur cause originelle dans `error.cause`. * `identifierPrefix` **optionnel** : un préfixe textuel utilisé pour les ID générés par [`useId`](/reference/react/useId). Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page. +<<<<<<< HEAD #### Valeur renvoyée {/*returns*/} +======= + * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. + * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`. + * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a `createRoot` renvoie un objet avec deux méthodes : [`render`](#root-render) et [`unmount`](#root-unmount). @@ -89,6 +96,15 @@ React affichera `` dans le `root`, et prendra la main sur la gestion du D * Si vous appelez `render` sur la même racine plusieurs fois, React mettra à jour le DOM si nécessaire pour refléter le dernier JSX que vous lui avez passé. React décidera quelles parties du DOM réutiliser et lesquelles nécessitent une création à froid en [« examinant la correspondance »](/learn/preserving-and-resetting-state) entre l'arbre React et celui du précédent rendu. Appeler `render` à nouveau sur la même racine est similaire à un appel de [fonction `set`](/reference/react/useState#setstate) sur le composant racine : React évite les mises à jour DOM superflues. +* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously. + + ```js + const root = createRoot(document.getElementById('root')); + root.render(); + // 🚩 The HTML will not include the rendered yet: + console.log(document.body.innerHTML); + ``` + --- ### `root.unmount()` {/*root-unmount*/} @@ -103,7 +119,11 @@ Une appli entièrement construite avec React n'appellera généralement pas `roo C'est principalement utile si le nœud DOM de votre racine React (ou un de ses ancêtres) est susceptible d'être retiré du DOM par du code tiers. Imaginez par exemple une gestion d'onglet basée sur jQuery qui retire les onglets inactifs du DOM. Si un onglet est retiré, tout ce qu'il contient (y compris d'éventuelles racines React) sera également retiré du DOM. Dans un tel cas, vous devez dire à React de « cesser » de gérer le contenu de la racine retirée en appelant `root.unmount`. Si vous ne le faisiez pas, les composants au sein de la racine retirée ne pourraient pas être nettoyés et libérer leurs ressources globales, telles que des abonnements. +<<<<<<< HEAD Un appel à `root.unmount` démontera tous les composants dans cette racine et « détachera » React du nœud DOM racine, y compris pour la gestion événementielle et les états de l'arbre. +======= +Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Paramètres {/*root-unmount-parameters*/} @@ -141,7 +161,7 @@ En général, vous n'aurez besoin de ce code qu'une fois, au démarrage. Il va  -```html index.html +```html public/index.html Mon appli @@ -185,7 +205,11 @@ function Counter() { +<<<<<<< HEAD **Si votre appli est entièrement construite avec React, vous ne devriez pas avoir besoin de créer davantage de racines, ni de rappeler [`root.render`](#root-render).** +======= +**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a À partir de là, React gèrera le DOM de votre appli entière. Pour ajouter d'autres composants, [imbriquez-les dans le composant `App`](/learn/importing-and-exporting-components). Si vous avez besoin de mettre à jour l'interface utilisateur (UI), chaque composant peut le faire en [utilisant l'état](/reference/react/useState). Si vous souhaitez afficher du contenu complémentaire (comme une boîte de dialogue modale ou une infobulle) hors du nœud DOM, [affichez-le dans un portail](/reference/react-dom/createPortal). @@ -197,7 +221,11 @@ Lorsque votre HTML est vide, l'utilisateur voit une page vierge jusqu'à ce que
    ``` +<<<<<<< HEAD Ça peut sembler très lent ! Pour remédier à ça, vous pouvez générer le HTML initial de vos composants [côté serveur ou lors du *build*](/reference/react-dom/server). Ainsi vos visiteurs pourront lire le texte, regarder les images, et cliquer sur les liens en attendant que votre code JavaScript soit chargé. Nous vous conseillons [d'utiliser un framework](/learn/start-a-new-react-project#production-grade-react-frameworks) qui propose ce genre d'optimisations d'entrée de jeu. En fonction de son approche, il pourra s'agir de rendu côté serveur *(SSR pour server-side rendering, NdT)* ou de génération de site statique *(SSG pour static-site generation, NdT)*. +======= +This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/creating-a-react-app#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -341,10 +369,15 @@ export default function App({counter}) { Il est toutefois rare d'appeler `render` plusieurs fois. En général, vos composants [mettront plutôt à jour l'état](/reference/react/useState). +<<<<<<< HEAD ### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/} +======= +### Error logging in production {/*error-logging-in-production*/} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - +By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`: +<<<<<<< HEAD `onUncaughtError` n'est disponible que dans la dernière version React Canary. @@ -788,16 +821,22 @@ import { createRoot } from "react-dom/client"; import App from "./App.js"; import {reportCaughtError} from "./reportError"; import "./styles.css"; +======= +```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack", 15]] +import { createRoot } from "react-dom/client"; +import { reportCaughtError } from "./reportError"; +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a const container = document.getElementById("root"); const root = createRoot(container, { onCaughtError: (error, errorInfo) => { - if (error.message !== 'Known error') { + if (error.message !== "Known error") { reportCaughtError({ - error, + error, componentStack: errorInfo.componentStack, }); } +<<<<<<< HEAD } }); root.render(); @@ -867,13 +906,15 @@ function Throw({error}) { "react-dom": "canary", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" +======= +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, - "main": "/index.js" -} +}); ``` - +The onCaughtError option is a function called with two arguments: +<<<<<<< HEAD ### Afficher un dialogue lors d'erreurs récupérables {/*displaying-a-dialog-for-recoverable-errors*/} React est susceptible de refaire le rendu d'un composant afin de tenter de retomber sur ses pieds lorsqu'un rendu lève une erreur. S'il réussit, React affichera en console une erreur récupérable, pour notifier le développeur. Pour remplacer ce comportement, vous pouvez fournir l'option `onRecoverableError` : @@ -1060,37 +1101,93 @@ export function reportUncaughtError({error, cause, componentStack}) { export function reportRecoverableError({error, cause, componentStack}) { reportError({ title: "Erreur récupérable", error, componentStack, dismissable: true }); +======= +1. The error that was thrown. +2. An errorInfo object that contains the componentStack of the error. + +Together with `onUncaughtError` and `onRecoverableError`, you can can implement your own error reporting system: + + + +```js src/reportError.js +function reportError({ type, error, errorInfo }) { + // The specific implementation is up to you. + // `console.error()` is only used for demonstration purposes. + console.error(type, error, "Component Stack: "); + console.error("Component Stack: ", errorInfo.componentStack); +} + +export function onCaughtErrorProd(error, errorInfo) { + if (error.message !== "Known error") { + reportError({ type: "Caught", error, errorInfo }); + } +} + +export function onUncaughtErrorProd(error, errorInfo) { + reportError({ type: "Uncaught", error, errorInfo }); +} + +export function onRecoverableErrorProd(error, errorInfo) { + reportError({ type: "Recoverable", error, errorInfo }); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } ``` ```js src/index.js active import { createRoot } from "react-dom/client"; import App from "./App.js"; -import {reportRecoverableError} from "./reportError"; -import "./styles.css"; +import { + onCaughtErrorProd, + onRecoverableErrorProd, + onUncaughtErrorProd, +} from "./reportError"; const container = document.getElementById("root"); const root = createRoot(container, { - onRecoverableError: (error, errorInfo) => { - reportRecoverableError({ - error, - cause: error.cause, - componentStack: errorInfo.componentStack, - }); - } + // Keep in mind to remove these options in development to leverage + // React's default handlers or implement your own overlay for development. + // The handlers are only specfied unconditionally here for demonstration purposes. + onCaughtError: onCaughtErrorProd, + onRecoverableError: onRecoverableErrorProd, + onUncaughtError: onUncaughtErrorProd, }); root.render(); ``` ```js src/App.js -import { useState } from 'react'; -import { ErrorBoundary } from "react-error-boundary"; +import { Component, useState } from "react"; + +function Boom() { + foo.bar = "baz"; +} + +class ErrorBoundary extends Component { + state = { hasError: false }; + + static getDerivedStateFromError(error) { + return { hasError: true }; + } + render() { + if (this.state.hasError) { + return

    Something went wrong.

    ; + } + return this.props.children; + } +} + +<<<<<<< HEAD // 🚩 Bug : ne faites jamais ça. Ça va forcer une erreur. let errorThrown = false; +======= +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a export default function App() { + const [triggerUncaughtError, settriggerUncaughtError] = useState(false); + const [triggerCaughtError, setTriggerCaughtError] = useState(false); + return ( <> +<<<<<<< HEAD @@ -1128,12 +1225,33 @@ function Throw({error}) { }, "main": "/index.js" } +======= + + {triggerUncaughtError && } + + {triggerCaughtError && ( + + + + )} + + ); +} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```     +<<<<<<< HEAD --- +======= +## Troubleshooting {/*troubleshooting*/} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Dépannage {/*troubleshooting*/} @@ -1172,8 +1290,13 @@ Pour corriger ça, passez ces options à `createRoot(...)`, pas à `root.render( // 🚩 Incorrect : root.render ne prend qu’un argument. root.render(App, {onUncaughtError}); +<<<<<<< HEAD // ✅ Correct : passez les options à createRoot. const root = createRoot(container, {onUncaughtError}); +======= +// ✅ Correct: pass options to createRoot. +const root = createRoot(container, {onUncaughtError}); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a root.render(); ``` diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 92e6ec097..0806568bf 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -41,10 +41,17 @@ React s'attachera au HTML existant à l'intérieur de `domNode`, et prendra la m * `options` **optionnelles** : un objet avec des options pour la racine React. +<<<<<<< HEAD * `onCaughtError` **optionelle** : fonction de rappel appelée lorsque React capture une erreur au sein d'un Périmètre d'Erreur. Appelée avec l'`error` capturée par le Périmètre d'Erreur, et un objet `errorInfo` contenant la `componentStack`. * `onUncaughtError` **optionnelle** : fonction de rappel appelée lorsqu'une erreur est levée sans être capturée par un Périmètre d'Erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. * `onRecoverableError` **optionnel** : fonction de rappel appelée lorsque React retombe automatiquement sur ses pieds suite à une erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. Certaines de ces erreurs peuvent exposer leur cause originelle dans `error.cause`. * `identifierPrefix` **optionnel** : un préfixe textuel utilisé pour les ID générés par [`useId`](/reference/react/useId). Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page. +======= + * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. + * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`. + * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Valeur renvoyée {/*returns*/} @@ -97,7 +104,11 @@ Une appli entièrement construite avec React n'appellera généralement pas `roo C'est principalement utile si le nœud DOM de votre racine React (ou un de ses ancêtres) est susceptible d'être retiré du DOM par du code tiers. Imaginez par exemple une gestion d'onglet basée sur jQuery qui retire les onglets inactifs du DOM. Si un onglet est retiré, tout ce qu'il contient (y compris d'éventuelles racines React) sera également retiré du DOM. Dans un tel cas, vous devez dire à React de « cesser » de gérer le contenu de la racine retirée en appelant `root.unmount`. Si vous ne le faisiez pas, les composants au sein de la racine retirée ne pourraient pas être nettoyés et libérer leurs ressources globales, telles que des abonnements. +<<<<<<< HEAD Un appel à `root.unmount` démontera tous les composants dans cette racine et « détachera » React du nœud DOM racine, y compris pour la gestion événementielle et les états de l'arbre. +======= +Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Paramètres {/*root-unmount-parameters*/} @@ -267,7 +278,11 @@ export default function App() { +<<<<<<< HEAD Ça ne fonctionne qu'à un niveau de profondeur, et c'est vraiment une échappatoire. N'en abusez pas. React ne rattrapera le coup que pour les contenus textuels, il risque donc de rester quelques incohérences jusqu'au prochain rendu. +======= +This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. React will **not** attempt to patch mismatched text content. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- @@ -293,7 +308,8 @@ import App from './App.js'; hydrateRoot(document.getElementById('root'), ); ``` -```js src/App.js active +{/* kind of an edge case, seems fine to use this hack here */} +```js {expectedErrors: {'react-compiler': [7]}} src/App.js active import { useState, useEffect } from "react"; export default function App() { @@ -371,10 +387,15 @@ export default function App({counter}) { Il est toutefois rare d'appeler [`root.render`](#root-render) sur une racine hydratée. En général, vos composants [mettront plutôt à jour l'état](/reference/react/useState). +<<<<<<< HEAD ### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/} +======= +### Error logging in production {/*error-logging-in-production*/} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - +By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`: +<<<<<<< HEAD `onUncaughtError` n'est disponible que dans la dernière version React Canary. @@ -821,37 +842,107 @@ import { hydrateRoot } from "react-dom/client"; import App from "./App.js"; import {reportCaughtError} from "./reportError"; import "./styles.css"; +======= +```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack", 15]] +import { hydrateRoot } from "react-dom/client"; +import App from "./App.js"; +import { reportCaughtError } from "./reportError"; +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a const container = document.getElementById("root"); const root = hydrateRoot(container, , { onCaughtError: (error, errorInfo) => { - if (error.message !== 'Known error') { + if (error.message !== "Known error") { reportCaughtError({ error, - componentStack: errorInfo.componentStack + componentStack: errorInfo.componentStack, }); } + }, +}); +``` + +The onCaughtError option is a function called with two arguments: + +1. The error that was thrown. +2. An errorInfo object that contains the componentStack of the error. + +Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system: + + + +```js src/reportError.js +function reportError({ type, error, errorInfo }) { + // The specific implementation is up to you. + // `console.error()` is only used for demonstration purposes. + console.error(type, error, "Component Stack: "); + console.error("Component Stack: ", errorInfo.componentStack); +} + +export function onCaughtErrorProd(error, errorInfo) { + if (error.message !== "Known error") { + reportError({ type: "Caught", error, errorInfo }); } +} + +export function onUncaughtErrorProd(error, errorInfo) { + reportError({ type: "Uncaught", error, errorInfo }); +} + +export function onRecoverableErrorProd(error, errorInfo) { + reportError({ type: "Recoverable", error, errorInfo }); +} +``` + +```js src/index.js active +import { hydrateRoot } from "react-dom/client"; +import App from "./App.js"; +import { + onCaughtErrorProd, + onRecoverableErrorProd, + onUncaughtErrorProd, +} from "./reportError"; + +const container = document.getElementById("root"); +hydrateRoot(container, , { + // Keep in mind to remove these options in development to leverage + // React's default handlers or implement your own overlay for development. + // The handlers are only specfied unconditionally here for demonstration purposes. + onCaughtError: onCaughtErrorProd, + onRecoverableError: onRecoverableErrorProd, + onUncaughtError: onUncaughtErrorProd, }); ``` ```js src/App.js -import { useState } from 'react'; -import { ErrorBoundary } from "react-error-boundary"; +import { Component, useState } from "react"; -export default function App() { - const [error, setError] = useState(null); - - function handleUnknown() { - setError("unknown"); +function Boom() { + foo.bar = "baz"; +} + +class ErrorBoundary extends Component { + state = { hasError: false }; + + static getDerivedStateFromError(error) { + return { hasError: true }; } - function handleKnown() { - setError("known"); + render() { + if (this.state.hasError) { + return

    Something went wrong.

    ; + } + return this.props.children; } - +} + +export default function App() { + const [triggerUncaughtError, settriggerUncaughtError] = useState(false); + const [triggerCaughtError, setTriggerCaughtError] = useState(false); + return ( <> +<<<<<<< HEAD { @@ -939,6 +1030,26 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d ```html index.html hidden +======= + + {triggerUncaughtError && } + + {triggerCaughtError && ( + + + + )} + + ); +} +``` + +```html public/index.html hidden +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a @@ -946,6 +1057,7 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d @@ -1161,6 +1273,14 @@ function Throw({error}) { } ``` +======= + Purposefully using HTML content that differs from the server-rendered content to trigger recoverable errors. +--> +
    Server content before hydration.
    + + +``` +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a     ## Dépannage {/*troubleshooting*/} diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index 43733c087..907b60608 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -4,7 +4,11 @@ title: API React DOM côté client +<<<<<<< HEAD Les API `react-dom/client` vous permettent d'afficher des composants React côté client (dans le navigateur). Ces API sont généralement utilisées à la racine de votre appli pour initialiser l'arborescence React. Un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) pourrait les appeler pour vous. La plupart de vos composants n'auront pas besoin de les importer, encore moins de les utiliser. +======= +The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index b689fc043..d18f46c5a 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -40,6 +40,7 @@ Ces props spécifiques à React sont prises en charge pour tous les composants n Ces props standard du DOM sont également prises en charge pour tous les composants natifs : +<<<<<<< HEAD * [`accessKey`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/accesskey) : une chaîne de caractères. Elle spécifie un raccourci clavier pour l'élément. [Son utilisation est généralement déconseillée](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/accesskey#accessibilité). * [`aria-*`](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Attributes) : les attributs ARIA vous permettent de spécifier les informations de l'arbre d'accessibilité pour cet élément. Consultez [les attributs ARIA](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Attributes) pour une référence exhaustive. En React, les noms des attributs ARIA sont exactement les mêmes qu'en HTML. * [`autoCapitalize`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/autocapitalize) : une chaîne de caractères. Elle spécifie la façon dont le texte saisi bénéficie de conversions automatiques en majuscules (sur des claviers virtuels). @@ -154,6 +155,122 @@ Ces props standard du DOM sont également prises en charge pour tous les composa * [`tabIndex`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex) : un nombre. Celui-ci surcharge le comportement par défaut de la touche Tab. [Évitez d'utiliser d'autres valeurs que `-1` et `0`](https://www.tpgi.com/using-the-tabindex-attribute/). * [`title`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/title) : une chaîne de caractères. Elle spécifie le texte pour l'infobulle de l'élément. * [`translate`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/translate) : `'yes'` ou `'no'`. Le contenu de l'élément n'est pas sujet à traduction lorsqu'il vaut `'no'`. +======= +* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): A string. Specifies a keyboard shortcut for the element. [Not generally recommended.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns) +* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attributes let you specify the accessibility tree information for this element. See [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML. +* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): A string. Specifies whether and how the user input should be capitalized. +* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): A string. Specifies the element's CSS class name. [Read more about applying CSS styles.](#applying-css-styles) +* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): A boolean. If `true`, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like [Lexical.](https://lexical.dev/) React warns if you try to pass React children to an element with `contentEditable={true}` because React will not be able to update its content after user edits. +* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attributes let you attach some string data to the element, for example `data-fruit="banana"`. In React, they are not commonly used because you would usually read data from props or state instead. +* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): Either `'ltr'` or `'rtl'`. Specifies the text direction of the element. +* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): A boolean. Specifies whether the element is draggable. Part of [HTML Drag and Drop API.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) +* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): A string. Specifies which action to present for the enter key on virtual keyboards. +* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): A string. For [`