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 f8b03f98a..935fa2f23 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,18 +2,37 @@ "root": true, "extends": "next/core-web-vitals", "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"], + "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", "react/no-unknown-property": ["error", {"ignore": ["meta"]}], - "react-compiler/react-compiler": "error" + "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 a47295e1e..87f03a660 100644 --- a/.github/ISSUE_TEMPLATE/3-framework.yml +++ b/.github/ISSUE_TEMPLATE/3-framework.yml @@ -8,11 +8,11 @@ body: value: | ## Apply to be included as a recommended React framework - _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._ + _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/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). + 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: diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 1e086b9b7..fcac37738 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -6,8 +6,11 @@ on: types: - completed -permissions: {} - +permissions: + contents: read + issues: write + pull-requests: write + jobs: comment: runs-on: ubuntu-latest diff --git a/.gitignore b/.gitignore index 7bf71dbc5..92626a1e6 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 @@ -39,3 +39,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/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.config.js b/next.config.js index 861792c8e..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. */ @@ -12,6 +19,30 @@ const nextConfig = { scrollRestoration: true, 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}) => { if (process.env.ANALYZE) { @@ -29,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 db4106809..473faf53e 100644 --- a/package.json +++ b/package.json @@ -6,21 +6,25 @@ "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": "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", @@ -30,12 +34,16 @@ "@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", +<<<<<<< HEAD "next": "15.4.8", +======= + "next": "15.1.12", +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", + "raw-loader": "^4.0.2", "react": "^19.0.0", "react-collapsed": "4.0.4", "react-dom": "^19.0.0", @@ -61,13 +69,16 @@ "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", - "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112", + "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", @@ -84,6 +95,7 @@ "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", 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 d55c43c90..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. */ 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/flip.gif b/public/images/blog/react-labs-april-2025/flip.gif deleted file mode 100644 index a7363ebf6..000000000 Binary files a/public/images/blog/react-labs-april-2025/flip.gif and /dev/null 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/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 56059472f..56133855a 100644 --- a/public/js/jsfiddle-integration-babel.js +++ b/public/js/jsfiddle-integration-babel.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. */ // Do not delete or move this file. diff --git a/public/js/jsfiddle-integration.js b/public/js/jsfiddle-integration.js index 2151435d4..aeae13607 100644 --- a/public/js/jsfiddle-integration.js +++ b/public/js/jsfiddle-integration.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. */ // Do not delete or move this file. diff --git a/scripts/buildRscWorker.mjs b/scripts/buildRscWorker.mjs new file mode 100644 index 000000000..b02cb8f43 --- /dev/null +++ b/scripts/buildRscWorker.mjs @@ -0,0 +1,44 @@ +/** + * 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 esbuild from 'esbuild'; +import fs from 'fs'; +import path from 'path'; +import {fileURLToPath} from 'url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const root = path.resolve(__dirname, '..'); +const sandboxBase = path.resolve( + root, + 'src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src' +); + +// 1. Bundle the server Worker runtime (React server build + RSDW/server.browser + Sucrase β†’ IIFE) +// Minified because this runs inside a Web Worker (not parsed by Sandpack's Babel). +const workerOutfile = path.resolve(sandboxBase, 'worker-bundle.dist.js'); +await esbuild.build({ + entryPoints: [path.resolve(sandboxBase, 'rsc-server.js')], + bundle: true, + format: 'iife', + platform: 'browser', + conditions: ['react-server', 'browser'], + outfile: workerOutfile, + define: {'process.env.NODE_ENV': '"production"'}, + minify: true, +}); + +// Post-process worker bundle: +// Prepend the webpack shim so __webpack_require__ (used by react-server-dom-webpack) +// is defined before the IIFE evaluates. The shim sets globalThis.__webpack_require__, +// which is accessible as a bare identifier since globalThis IS the Worker's global scope. +let workerCode = fs.readFileSync(workerOutfile, 'utf8'); + +const shimPath = path.resolve(sandboxBase, 'webpack-shim.js'); +const shimCode = fs.readFileSync(shimPath, 'utf8'); +workerCode = shimCode + '\n' + workerCode; + +fs.writeFileSync(workerOutfile, workerCode); diff --git a/scripts/copyright.js b/scripts/copyright.js new file mode 100644 index 000000000..f1c6f786c --- /dev/null +++ b/scripts/copyright.js @@ -0,0 +1,84 @@ +/** + * 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. + */ + +'use strict'; + +const fs = require('fs'); +const glob = require('glob'); + +const META_COPYRIGHT_COMMENT_BLOCK = + `/** + * 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. + */`.trim() + '\n\n'; + +const files = glob.sync('**/*.{js,ts,tsx,jsx,rs}', { + ignore: [ + '**/dist/**', + '**/node_modules/**', + '**/tests/fixtures/**', + '**/__tests__/fixtures/**', + ], +}); + +const updatedFiles = new Map(); +let hasErrors = false; +files.forEach((file) => { + 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 54cd500ca..f1ed5e0b3 100644 --- a/scripts/headingIDHelpers/walk.js +++ b/scripts/headingIDHelpers/walk.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 fs = require('fs'); module.exports = function walk(dir) { diff --git a/scripts/headingIdLinter.js b/scripts/headingIdLinter.js index 6b8f75fc7..32116752b 100644 --- a/scripts/headingIdLinter.js +++ b/scripts/headingIdLinter.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 validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs'); const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs'); 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 ea777649e..253df258a 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. */ @@ -81,7 +88,11 @@ function FooterLink({ />
    +<<<<<<< HEAD {typeTranslation} +======= + {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 13fe6d3a9..ccd91fe9c 100644 --- a/src/components/ExternalLink.tsx +++ b/src/components/ExternalLink.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/IconArrow.tsx b/src/components/Icon/IconArrow.tsx index 61e4e52cd..2d0b9fecd 100644 --- a/src/components/Icon/IconArrow.tsx +++ b/src/components/Icon/IconArrow.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/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index 4a3d3ad02..81301c047 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.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,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 5d461556f..ec930923d 100644 --- a/src/components/Icon/IconBsky.tsx +++ b/src/components/Icon/IconBsky.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/IconCanary.tsx b/src/components/Icon/IconCanary.tsx index 7f584fed7..97b9f7cef 100644 --- a/src/components/Icon/IconCanary.tsx +++ b/src/components/Icon/IconCanary.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/IconChevron.tsx b/src/components/Icon/IconChevron.tsx index 4d40330ce..15f34e153 100644 --- a/src/components/Icon/IconChevron.tsx +++ b/src/components/Icon/IconChevron.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/IconClose.tsx b/src/components/Icon/IconClose.tsx index d685fb217..dc4ad7c72 100644 --- a/src/components/Icon/IconClose.tsx +++ b/src/components/Icon/IconClose.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/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 index 0bba612eb..c0dce97f4 100644 --- a/src/components/Icon/IconExperimental.tsx +++ b/src/components/Icon/IconExperimental.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. */ @@ -6,7 +13,7 @@ import {memo} from 'react'; export const IconExperimental = memo< JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} ->(function IconCanary( +>(function IconExperimental( {className, title, size} = { className: undefined, title: undefined, diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx index 7f1080afa..dea2764d5 100644 --- a/src/components/Icon/IconFacebookCircle.tsx +++ b/src/components/Icon/IconFacebookCircle.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/IconGitHub.tsx b/src/components/Icon/IconGitHub.tsx index 1852f52f1..06c8f1556 100644 --- a/src/components/Icon/IconGitHub.tsx +++ b/src/components/Icon/IconGitHub.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/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx index 8bc90ee0c..5ab29fa37 100644 --- a/src/components/Icon/IconHamburger.tsx +++ b/src/components/Icon/IconHamburger.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/IconHint.tsx b/src/components/Icon/IconHint.tsx index b802bc79c..802382b5d 100644 --- a/src/components/Icon/IconHint.tsx +++ b/src/components/Icon/IconHint.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/IconInstagram.tsx b/src/components/Icon/IconInstagram.tsx index 79def08e3..00d25a909 100644 --- a/src/components/Icon/IconInstagram.tsx +++ b/src/components/Icon/IconInstagram.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/IconLink.tsx b/src/components/Icon/IconLink.tsx index e6e716d00..0f7d4dfed 100644 --- a/src/components/Icon/IconLink.tsx +++ b/src/components/Icon/IconLink.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/IconNavArrow.tsx b/src/components/Icon/IconNavArrow.tsx index f61175e9b..40fde8afe 100644 --- a/src/components/Icon/IconNavArrow.tsx +++ b/src/components/Icon/IconNavArrow.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/IconNewPage.tsx b/src/components/Icon/IconNewPage.tsx index dfa13bac9..aaf3e8157 100644 --- a/src/components/Icon/IconNewPage.tsx +++ b/src/components/Icon/IconNewPage.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/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 index 457736c7c..c5bb2473a 100644 --- a/src/components/Icon/IconRocket.tsx +++ b/src/components/Icon/IconRocket.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/IconRss.tsx b/src/components/Icon/IconRss.tsx index 6208236f4..13029ec96 100644 --- a/src/components/Icon/IconRss.tsx +++ b/src/components/Icon/IconRss.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/IconSearch.tsx b/src/components/Icon/IconSearch.tsx index 917513561..1dda00eb2 100644 --- a/src/components/Icon/IconSearch.tsx +++ b/src/components/Icon/IconSearch.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/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 9ea0bafdf..72ded5201 100644 --- a/src/components/Icon/IconThreads.tsx +++ b/src/components/Icon/IconThreads.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/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx index e84971f4e..01802c253 100644 --- a/src/components/Icon/IconTwitter.tsx +++ b/src/components/Icon/IconTwitter.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/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 0d0d9d1e7..29f310ed2 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 600e37c74..0f0facb77 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. */ @@ -244,12 +251,20 @@ export function HomeContent() { con un framework +<<<<<<< HEAD React es una biblioteca. Te permite agrupar componentes, pero no prescribe cΓ³mo hacer el enrutamiento y la obtenciΓ³n de datos. Para construir una aplicaciΓ³n completa en React, recomendamos un framework full-stack de React como{' '} Next.js o{' '} 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 @@ -267,8 +282,13 @@ export function HomeContent() { Comienza a usar un framework +======= + href="/learn/creating-a-react-app"> + Get started with a framework +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
    @@ -769,9 +789,7 @@ function CommunityGallery() { }, []); return ( -
    +
    +<<<<<<< HEAD +======= +
    + {alt} +
    +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a
    ))} @@ -875,7 +907,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 ec3a6eba0..aa39fe5fc 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. */ @@ -8,7 +15,7 @@ import {useRouter} from 'next/router'; import {SidebarNav} from './SidebarNav'; import {Footer} from './Footer'; import {Toc} from './Toc'; -import SocialBanner from '../SocialBanner'; +// import SocialBanner from '../SocialBanner'; import {DocsPageFooter} from 'components/DocsFooter'; import {Seo} from 'components/Seo'; import PageHeading from 'components/PageHeading'; @@ -82,11 +89,9 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - - {children} - - + + {children} +
    {!isBlogIndex && ( )} - + {/* */} )} + {version === 'rc' && ( + + )}
    {isExpanded != null && !hideArrow && ( diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 72003df74..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. */ 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 22a9a06a4..b36762f0e 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 3bd8776f2..218e423ce 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 357fd2828..5b61768c6 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. */ @@ -22,7 +29,6 @@ import {IconHamburger} from 'components/Icon/IconHamburger'; import {IconSearch} from 'components/Icon/IconSearch'; import {Search} from 'components/Search'; import {Logo} from '../../Logo'; -import {Feedback} from '../Feedback'; import {SidebarRouteTree} from '../Sidebar'; import type {RouteItem} from '../getRouteMeta'; import {siteConfig} from 'siteConfig'; @@ -266,7 +272,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 b3d14725d..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. */ 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 8c4f7da4f..3ea4ba9ac 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.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/BlogCard.tsx b/src/components/MDX/BlogCard.tsx index 6102c2c56..5890013ec 100644 --- a/src/components/MDX/BlogCard.tsx +++ b/src/components/MDX/BlogCard.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/Challenges/Challenge.tsx b/src/components/MDX/Challenges/Challenge.tsx index 74170cf3a..694b71d86 100644 --- a/src/components/MDX/Challenges/Challenge.tsx +++ b/src/components/MDX/Challenges/Challenge.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/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx index dfc54bfee..770a62fee 100644 --- a/src/components/MDX/Challenges/Challenges.tsx +++ b/src/components/MDX/Challenges/Challenges.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/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx index 736db093c..0511bd05a 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="Scroll left" 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="Scroll right" 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 42165c57d..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. */ 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 2a198fc56..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. */ diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx index 6044b1370..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. */ 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 a9b7455df..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'; diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index f208d6a73..c991834c8 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. */ @@ -17,6 +24,7 @@ type CalloutVariants = | 'wip' | 'canary' | 'experimental' + | 'rc' | 'major' | 'rsc'; @@ -43,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', Icon: IconCanary, diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index 77a593a14..befe44744 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 5759a7c0a..17e4683b9 100644 --- a/src/components/MDX/InlineCode.tsx +++ b/src/components/MDX/InlineCode.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/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 4b2c0f216..70b83f07a 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. */ @@ -20,7 +27,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'; @@ -38,6 +45,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 ( @@ -99,6 +107,10 @@ const Canary = ({children}: {children: React.ReactNode}) => ( {children} ); +const RC = ({children}: {children: React.ReactNode}) => ( + {children} +); + const Experimental = ({children}: {children: React.ReactNode}) => ( {children} ); @@ -131,7 +143,7 @@ const ExperimentalBadge = ({title}: {title: string}) => ( className={ 'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded' }> - @@ -358,7 +370,7 @@ function IllustrationBlock({ )); return ( - +
    {sequential ? (
      @@ -373,7 +385,7 @@ function IllustrationBlock({ )}
    -     + ); } @@ -537,6 +549,7 @@ export const MDXComponents = { Math, MathI, Note, + RC, Canary, Experimental, ExperimentalBadge, @@ -550,6 +563,7 @@ export const MDXComponents = { 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 ec3ba0ea4..68b8c1562 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 1f472f157..474553d09 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(); @@ -39,6 +48,7 @@ export const CustomPreset = memo(function CustomPreset({ lintErrors={lintErrors} lintExtensions={lintExtensions} isExpandable={isExpandable} + showOpenInCodeSandbox={showOpenInCodeSandbox} /> ); }); @@ -48,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); @@ -64,7 +76,10 @@ const SandboxShell = memo(function SandboxShell({ style={{ contain: 'content', }}> - + { 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,13 +117,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { * * Plus, it should only prompt if there's any file changes */ - if ( - sandpack.editorState === 'dirty' && - confirm('Reset all your edits too?') - ) { + if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) { sandpack.resetAllFiles(); } + refresh(); + }; + const handleReload = () => { refresh(); }; @@ -188,8 +202,9 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { 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 67f40d0b3..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. */ 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 193b07be8..049face93 100644 --- a/src/components/MDX/Sandpack/createFileMap.ts +++ b/src/components/MDX/Sandpack/createFileMap.ts @@ -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,66 @@ 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) => { @@ -30,12 +97,17 @@ export const createFileMap = (codeSnippets: any) => { 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 { @@ -50,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 7fbd537e7..fa8c9e486 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: '^19.1.0', - 'react-dom': '^19.1.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 51ce28dc1..1d9e7f42d 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 2c2fffa73..2d0c65537 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.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/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index 475292716..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. */ @@ -72,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 670035aaa..97379f599 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 409bd03b8..ba4b413a0 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,12 +14,16 @@ 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; - version?: 'experimental' | 'canary'; + version?: 'experimental' | 'canary' | 'rc'; experimental?: boolean; status?: string; description?: string; @@ -20,6 +31,51 @@ interface PageHeadingProps { 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, @@ -27,11 +83,15 @@ function PageHeading({ tags = [], breadcrumbs, }: PageHeadingProps) { - console.log('version', version); return (
    - {breadcrumbs ? : null} +
    +
    + {breadcrumbs ? : null} +
    + +

    {title} {version === 'canary' && ( @@ -40,6 +100,12 @@ function PageHeading({ className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]" /> )} + {version === 'rc' && ( + + )} {version === 'experimental' && ( +

    Lista de equipaje de Sally

      +<<<<<<< HEAD + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    @@ -317,6 +331,7 @@ export default function PackingList() {

    Lista de equipaje de Sally

      +<<<<<<< HEAD + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    @@ -365,6 +393,7 @@ export default function PackingList() {

    Lista de equipaje de Sally Ride

      +<<<<<<< HEAD + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    @@ -409,6 +451,7 @@ export default function PackingList() {

    Lista de equipaje de Sally Ride

      +<<<<<<< HEAD + + >>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a />
    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 1bc78149d..df1fd085d 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,7 +31,7 @@ The biggest change is that we introduced [`async` / `await`](https://github.com/ Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads. -React Server Components has shipped in [Next.js App Router](/learn/start-a-new-react-project#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. +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. We generally recommend using an existing framework, but if you need to build your own custom framework, it is possible. Building your own RSC-compatible framework is not as easy as we'd like it to be, mainly due to the deep bundler integration needed. The current generation of bundlers are great for use on the client, but they weren't designed with first-class support for splitting a single module graph between the server and the client. This is why we're now partnering directly with bundler developers to get the primitives for RSC built-in. @@ -92,7 +92,7 @@ Since our last update, we've tested an experimental version of prerendering inte ## Transition Tracing {/*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/start-a-new-react-project#nextjs-app-router). +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). * * * In addition to this update, our team has made recent guest appearances on community podcasts and livestreams to speak more on our work and answer questions. 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 ffe761624..002dae2a9 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 @@ -15,14 +15,6 @@ In React Labs posts, we write about projects in active research and development. - - -React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can [sign up for the ticket lottery](https://forms.reform.app/bLaLeE/react-conf-2024-ticket-lottery/1aRQLK) until February 28th. - -For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev). - - - --- ## React Compiler {/*react-compiler*/} @@ -57,19 +49,19 @@ We refer to this broader collection of features as simply "Actions". Actions all The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the [`'use server'`](/reference/rsc/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useActionState`](/reference/react/useActionState) to access the current state and response of the form action. -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. +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. Alongside Actions, we're introducing a feature named [`useOptimistic`](/reference/react/useOptimistic) for managing optimistic state updates. With this hook, you can apply temporary updates that are automatically reverted once the final state commits. For Actions, this allows you to optimistically set the final state of the data on the client, assuming the submission is successful, and revert to the value for data received from the server. It works using regular `async`/`await`, so it works the same whether you're using `fetch` on the client, or a Server Action from the server. Library authors can implement custom `action={fn}` props in their own components with `useTransition`. Our intent is for libraries to adopt the Actions pattern when designing their component APIs, to provide a consistent experience for React developers. For example, if your library provides a `` component, consider also exposing a `` API, too. -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. +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. Actions are now available in the Canary channel and will ship in the next release of React. ## New Features in React Canary {/*new-features-in-react-canary*/} -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. +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. Canaries are a change to the way we develop React. Previously, features would be researched and built privately inside of Meta, so users would only see the final polished product when released to Stable. With Canaries, we’re building in public with the help of the community to finalize features we share in the React Labs blog series. This means you hear about new features sooner, as they’re being finalized instead of after they’re complete. @@ -83,7 +75,7 @@ React Server Components, Asset Loading, Document Metadata, and Actions have all - **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`
    `](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useActionState`](/reference/react/useActionState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic). -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. +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. Before we can release a set of features to the Stable channel, we need to ensure they work cohesively and developers have everything they need to use them in production. React Canaries allow us to develop these features individually, and release the stable APIs incrementally until the entire feature set is complete. @@ -107,7 +99,7 @@ Activity is still under research and our remaining work is to finalize the primi In addition to this update, our team has presented at conferences and made appearances on podcasts to speak more on our work and answer questions. -- [Sathya Gunasekaran](/community/team#sathya-gunasekaran) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference +- [Sathya Gunasekaran](https://github.com/gsathya) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference - [Dan Abramov](/community/team#dan-abramov) gave a talk at [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s) titled β€œReact from Another Dimension” which explores an alternative history of how React Server Components and Actions could have been created 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 cb83a6176..1823ebdfb 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 @@ -20,7 +20,7 @@ The improvements added to React 19 require some breaking changes, but we've work #### React 18.3 has also been published {/*react-18-3*/} -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. +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. We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19. @@ -109,17 +109,17 @@ npx codemod@latest react/19/migration-recipe ``` This will run the following codemods from `react-codemod`: -- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) +- [`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) +- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) - [`prop-types-typescript`](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below. -Changes that include a codemod include the command below. +Changes that include a codemod include the command below. For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod). @@ -127,7 +127,7 @@ For a list of all available codemods, see the [`react-codemod` repo](https://git ### Errors in render are not re-thrown {/*errors-in-render-are-not-re-thrown*/} -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. +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. In React 19, we've [improved how errors are handled](/blog/2024/04/25/react-19#error-handling) to reduce duplication by not re-throwing: @@ -348,7 +348,7 @@ npm install react-shallow-renderer --save-dev ##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/} -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). +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). @@ -465,7 +465,7 @@ npx codemod@latest react/19/replace-reactdom-render #### Removed: `ReactDOM.findDOMNode` {/*removed-reactdom-finddomnode*/} -`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). +`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). We're removing `findDOMNode` because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). You can replace `ReactDOM.findDOMNode` with [DOM refs](/learn/manipulating-the-dom-with-refs): @@ -551,7 +551,7 @@ This change means Suspense fallbacks display faster, while still warming lazy re ### UMD builds removed {/*umd-builds-removed*/} -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. +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. To load React 19 with a script tag, we recommend using an ESM-based CDN such as [esm.sh](https://esm.sh/). @@ -569,7 +569,7 @@ This release includes changes to React internals that may impact libraries that Based on our [Versioning Policy](https://react.dev/community/versioning-policy#what-counts-as-a-breaking-change), these updates are not listed as breaking changes, and we are not including docs for how to upgrade them. The recommendation is to remove any code that depends on internals. -To reflect the impact of using internals, we have renamed the `SECRET_INTERNALS` suffix to: +To reflect the impact of using internals, we have renamed the `SECRET_INTERNALS` suffix to: `_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` 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 7cb7d42ee..e22464010 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 @@ -112,7 +112,7 @@ Thank you [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) fo Thank you [Callstack](https://www.callstack.com/) for building the conference website; and to [Kadi Kraman](https://twitter.com/kadikraman) and the [Expo](https://expo.dev/) team for building the conference mobile app. -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://redwoodjs.com/), and [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). Thank you to the AV Team for the visuals, stage, and sound; and to the Westin Hotel for hosting us. 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 58e6b24aa..750c0f3b8 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 @@ -12,9 +12,9 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). -### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/} +### React Compiler is now stable! {/*react-compiler-is-now-in-rc*/} -Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details. +Please see the [stable release blog post](/blog/2025/10/07/react-compiler-1) for details. @@ -72,11 +72,11 @@ Or, if you're using Yarn: yarn add -D eslint-plugin-react-compiler@beta -After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. +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. ## Backwards Compatibility {/*backwards-compatibility*/} -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](/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). ## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/} @@ -86,7 +86,7 @@ React Compiler can also be used to compile libraries. Because React Compiler nee Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary. -[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries) +[You can find more docs on this here.](/reference/react-compiler/compiling-libraries) ## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/} diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index aac80a44f..749646458 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -59,7 +59,7 @@ function UpdateName({}) { if (error) { setError(error); return; - } + } redirect("/path"); }; @@ -92,7 +92,7 @@ function UpdateName({}) { if (error) { setError(error); return; - } + } redirect("/path"); }) }; @@ -176,7 +176,7 @@ const [error, submitAction, isPending] = useActionState( ); ``` -`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`. +`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`. @@ -308,7 +308,7 @@ function Heading({children}) { if (children == null) { return null; } - + // This would not work with useContext // because of the early return. const theme = use(ThemeContext); @@ -330,7 +330,7 @@ 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`: +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'; @@ -355,14 +355,14 @@ For more information, see [React DOM Static APIs](/reference/react-dom/static). 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/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). +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). #### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/} -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. +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. To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future. @@ -410,7 +410,7 @@ New function components will no longer need `forwardRef`, and we will be publish -`refs` passed to classes are not passed as props since they reference the component instance. +`ref`s passed to classes are not passed as props since they reference the component instance. @@ -497,7 +497,7 @@ function App({children}) { {children} - ); + ); } ``` @@ -521,7 +521,7 @@ We now support returning a cleanup function from `ref` callbacks: /> ``` -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`. +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`. @@ -551,7 +551,7 @@ function Search({deferredValue}) { // On initial render the value is ''. // Then a re-render is scheduled with the deferredValue. const value = useDeferredValue(deferredValue, ''); - + return ( ); @@ -564,7 +564,7 @@ For more, see [`useDeferredValue`](/reference/react/useDeferredValue). ### Support for Document Metadata {/*support-for-metadata-tags*/} -In HTML, document metadata tags like ``, `<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. +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. In React 19, we're adding support for rendering document metadata tags in components natively: @@ -726,7 +726,7 @@ In React 19, unexpected tags in the `<head>` and `<body>` will be skipped over, ### Better error reporting {/*error-handling*/} -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. +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. This resulted in three errors for every caught error: 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 index 9ced6231c..45c0090d5 100644 --- a/src/content/blog/2025/02/14/sunsetting-create-react-app.md +++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md @@ -11,7 +11,7 @@ February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ri <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. +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). @@ -75,7 +75,7 @@ To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Buil #### 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. +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. @@ -177,7 +177,7 @@ export default function Dashboard() { } ``` -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 [React Query](https://react-query.tanstack.com/), [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. +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: diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md deleted file mode 100644 index ecbbb8747..000000000 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: "React Compiler RC" -author: Lauren Tan and Mofei Zhang -date: 2025/04/21 -description: We are releasing the compiler's first Release Candidate (RC) today. - ---- - -April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei). - ---- - -<Intro> - -The React team is excited to share new updates: - -</Intro> - -1. We're publishing React Compiler RC today, in preparation of the compiler's stable release. -2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`. -3. We've added support for swc and are working with oxc to support Babel-free builds. - ---- - -[React Compiler](https://react.dev/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](https://react.dev/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 working towards a stable release. - -We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production. - -## Use React Compiler RC today {/*use-react-compiler-rc-today*/} -To install the RC: - -npm -<TerminalBlock> -{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`} -</TerminalBlock> - -pnpm -<TerminalBlock> -{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`} -</TerminalBlock> - -yarn -<TerminalBlock> -{`yarn add --dev --exact babel-plugin-react-compiler@rc`} -</TerminalBlock> - -As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs. - -We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release. - -You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler). - -## Feedback {/*feedback*/} -During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions). - -## 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](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). - -## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. 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@6.0.0-rc.1`} -</TerminalBlock> - -pnpm -<TerminalBlock> -{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} -</TerminalBlock> - -yarn -<TerminalBlock> -{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`} -</TerminalBlock> - -```js -// eslint.config.js -import * as reactHooks from 'eslint-plugin-react-hooks'; - -export default [ - // Flat Config (eslint 9+) - reactHooks.configs.recommended, - - // Legacy Config - reactHooks.configs['recommended-latest'] -]; -``` - -To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration. - -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. - -## 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](https://react.dev/learn/react-compiler#usage-with-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](https://react.dev/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](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects 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 `19.1.0`) rather than a SemVer range (eg `^19.1.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. - -## Roadmap to Stable {/*roadmap-to-stable*/} -*This is not a final roadmap, and is subject to change.* - -After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler. - -* βœ… Experimental: Released at React Conf 2024, primarily for feedback from application developers. -* βœ… Public Beta: Available today, for feedback from library authors. -* βœ… Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. -* General Availability: After final feedback period from the community. - -Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. - ---- - -Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing 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 index e4bb25a4a..9b6095f8b 100644 --- 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 @@ -16,16 +16,6 @@ In React Labs posts, we write about projects in active research and development. </Intro> -<Note> - -React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada! - -We're looking for speakers to help us create talks about the features covered in this post. If you're interested in speaking at ReactConf, [please apply here](https://forms.reform.app/react-conf/call-for-speakers/) (no talk proposal required). - -For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev). - -</Note> - Today, we're excited to release documentation for two new experimental features that are ready for testing: - [View Transitions](#view-transitions) @@ -42,6 +32,14 @@ We're also sharing updates on new features currently in development: # 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: @@ -68,7 +66,7 @@ To opt-in to animating an element, wrap it in the new `<ViewTransition>` compone </ViewTransition> ``` -This new component lets you declaratively define "what" to animate when an animation is activated. +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: @@ -101,9 +99,9 @@ By default, these animations use the [default CSS animations for View Transition 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. +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. +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. @@ -1247,8 +1245,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -1296,16 +1294,17 @@ function navigate(url) { 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: +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 {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router'; +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 ( @@ -1564,11 +1563,11 @@ export function IconSearch(props) { ``` ```js src/Layout.js -import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router"; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); - + return ( <div className="page"> <div className="top"> @@ -1772,22 +1771,22 @@ import {useState, createContext,use,useTransition,useLayoutEffect,useEffect} fro 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({ @@ -1797,7 +1796,7 @@ export function Router({ children }) { }, }); } - + function navigateBack(url) { startTransition(() => { @@ -2443,8 +2442,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -2458,7 +2457,7 @@ root.render( </Sandpack> -Since our router already updates the route using `startTransition`, this one line change to add `<ViewTransition>` activates with the default cross-fade animation. +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) @@ -2466,7 +2465,7 @@ If you're curious how this works, see the docs for [How does `<ViewTransition>` #### 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. +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: @@ -2477,7 +2476,7 @@ To fix, we're wrapping route children with `"none"` so each page can control its </ViewTransition> ``` -In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types. +In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types. </Note> @@ -2495,7 +2494,7 @@ For example, we can slow down the `default` cross fade animation: </ViewTransition> ``` -And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-classes): +And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-class): ```css ::view-transition-old(.slow-fade) { @@ -2512,7 +2511,7 @@ Now, the cross fade is slower: <Sandpack> ```js src/App.js active -import { unstable_ViewTransition as ViewTransition } from "react"; +import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; @@ -2521,7 +2520,7 @@ export default function App() { const { url } = useRouter(); // Define a default animation of .slow-fade. - // See animations.css for the animation definiton. + // See animations.css for the animation definition. return ( <ViewTransition default="slow-fade"> {url === '/' ? <Home /> : <Details />} @@ -2778,7 +2777,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js hidden -import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router"; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); @@ -3671,8 +3670,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -3705,7 +3704,7 @@ Now the video thumbnail animates between the two pages: <Sandpack> ```js src/App.js -import { unstable_ViewTransition as ViewTransition } from "react"; +import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; @@ -3972,7 +3971,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js hidden -import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router"; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); @@ -4029,7 +4028,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js active -import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react"; +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. @@ -4880,8 +4879,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -4962,7 +4961,7 @@ Now we can animate the header along with thumbnail based on navigation type: <Sandpack> ```js src/App.js hidden -import { unstable_ViewTransition as ViewTransition } from "react"; +import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; @@ -5227,7 +5226,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js active -import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router"; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); @@ -5291,7 +5290,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js hidden -import { useState, unstable_ViewTransition as ViewTransition } from "react"; +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; @@ -5442,11 +5441,11 @@ export function fetchVideoDetails(id) { ``` ```js src/router.js -import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react"; +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" @@ -5473,7 +5472,7 @@ export function Router({ children }) { }, }); } - + useEffect(() => { function handlePopState() { // This should not animate because restoration has to be synchronous. @@ -6196,8 +6195,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -6213,7 +6212,7 @@ root.render( ### Animating Suspense Boundaries {/*animating-suspense-boundaries*/} -Suspense will also activate View Transitions. +Suspense will also activate View Transitions. To animate the fallback to content, we can wrap `Suspense` with `<ViewTranstion>`: @@ -6230,7 +6229,7 @@ By adding this, the fallback will cross-fade into the content. Click a video and <Sandpack> ```js src/App.js hidden -import { unstable_ViewTransition as ViewTransition } from "react"; +import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; @@ -6248,7 +6247,7 @@ export default function App() { ``` ```js src/Details.js active -import { use, Suspense, unstable_ViewTransition as 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"; +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. @@ -6498,7 +6497,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js hidden -import {unstable_ViewTransition as ViewTransition} from 'react'; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { @@ -6563,7 +6562,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js hidden -import { useState, unstable_ViewTransition as ViewTransition } from "react"; +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; @@ -6714,7 +6713,7 @@ export function fetchVideoDetails(id) { ``` ```js src/router.js hidden -import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react"; +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; export function Router({ children }) { const [isPending, startTransition] = useTransition(); @@ -6742,7 +6741,7 @@ export function Router({ children }) { }, }); } - + useEffect(() => { function handlePopState() { // This should not animate because restoration has to be synchronous. @@ -7494,8 +7493,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -7528,7 +7527,7 @@ We can also provide custom animations using an `exit` on the fallback, and `ente Here's how we'll define `slide-down` and `slide-up` with CSS: ```css {1, 6} -::view-transition-old(.slide-down) { +::view-transition-old(.slide-down) { /* Slide the fallback down */ animation: ...; } @@ -7544,7 +7543,7 @@ Now, the Suspense content replaces the fallback with a sliding animation: <Sandpack> ```js src/App.js hidden -import { unstable_ViewTransition as ViewTransition } from "react"; +import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; @@ -7562,7 +7561,7 @@ export default function App() { ``` ```js src/Details.js active -import { use, Suspense, unstable_ViewTransition as 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"; +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 ( @@ -7819,7 +7818,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js hidden -import {unstable_ViewTransition as ViewTransition} from 'react'; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { @@ -7884,7 +7883,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js hidden -import { useState, unstable_ViewTransition as ViewTransition } from "react"; +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; @@ -8035,7 +8034,7 @@ export function fetchVideoDetails(id) { ``` ```js src/router.js hidden -import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react"; +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; export function Router({ children }) { const [isPending, startTransition] = useTransition(); @@ -8063,7 +8062,7 @@ export function Router({ children }) { }, }); } - + useEffect(() => { function handlePopState() { // This should not animate because restoration has to be synchronous. @@ -8815,8 +8814,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -8858,7 +8857,7 @@ Now the items animate as you type in the search bar: <Sandpack> ```js src/App.js hidden -import { unstable_ViewTransition as ViewTransition } from "react"; +import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; @@ -8876,7 +8875,7 @@ export default function App() { ``` ```js src/Details.js hidden -import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; +import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; @@ -8951,17 +8950,17 @@ function VideoInfo({ id }) { ``` ```js src/Home.js -import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; +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") + // 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") + // Animate each item in list ("what") <ViewTransition key={video.id}> <Video video={video} /> </ViewTransition> @@ -8978,7 +8977,7 @@ 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} /> @@ -9146,7 +9145,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js hidden -import {unstable_ViewTransition as ViewTransition} from 'react'; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { @@ -9211,7 +9210,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js hidden -import { useState, unstable_ViewTransition as ViewTransition } from "react"; +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; @@ -9362,7 +9361,7 @@ export function fetchVideoDetails(id) { ``` ```js src/router.js hidden -import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react"; +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; export function Router({ children }) { const [isPending, startTransition] = useTransition(); @@ -9390,7 +9389,7 @@ export function Router({ children }) { }, }); } - + useEffect(() => { function handlePopState() { // This should not animate because restoration has to be synchronous. @@ -10156,8 +10155,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -10182,7 +10181,7 @@ Let's remove the slow fade, and take a look at the final result: <Sandpack> ```js src/App.js -import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router'; +import {ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router'; export default function App() { const {url} = useRouter(); @@ -10197,7 +10196,7 @@ export default function App() { ``` ```js src/Details.js -import { use, Suspense, unstable_ViewTransition as 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"; +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 @@ -10267,17 +10266,17 @@ function VideoInfo({ id }) { ``` ```js src/Home.js -import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; +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") + // 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") + // Animate each item in list ("what") <ViewTransition key={video.id}> <Video video={video} /> </ViewTransition> @@ -10294,7 +10293,7 @@ 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} /> @@ -10462,7 +10461,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js -import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router"; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); @@ -10526,7 +10525,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js -import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react"; +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. @@ -10674,7 +10673,7 @@ export function fetchVideoDetails(id) { ``` ```js src/router.js -import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react"; +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; export function Router({ children }) { const [isPending, startTransition] = useTransition(); @@ -10694,7 +10693,7 @@ export function Router({ children }) { } const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname}); - + function go(url) { setRouterState({ url, @@ -10703,7 +10702,7 @@ export function Router({ children }) { }, }); } - + useEffect(() => { function handlePopState() { // This should not animate because restoration has to be synchronous. @@ -11442,8 +11441,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -11465,6 +11464,14 @@ _For more background on how we built View Transitions, see: [#31975](https://git ## 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. @@ -11500,7 +11507,7 @@ When a user navigates away from a page, it's common to stop rendering the old pa ```js {6,7} function App() { const { url } = useRouter(); - + return ( <> {url === '/' && <Home />} @@ -11517,7 +11524,7 @@ Activity allows you to keep the state around as the user changes pages, so when ```js {6-8} function App() { const { url } = useRouter(); - + return ( <> <Activity mode={url === '/' ? 'visible' : 'hidden'}> @@ -11536,11 +11543,11 @@ Try searching for a video, selecting it, and clicking "back": <Sandpack> ```js src/App.js -import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; +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> @@ -11555,7 +11562,7 @@ export default function App() { ``` ```js src/Details.js hidden -import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; +import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; @@ -11630,10 +11637,10 @@ function VideoInfo({ id }) { ``` ```js src/Home.js hidden -import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; +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") + // Activate with useDeferredValue ("when") const deferredSearchText = useDeferredValue(searchText); const filteredVideos = filterVideos(videos, deferredSearchText); return ( @@ -11643,7 +11650,7 @@ function SearchList({searchText, videos}) { )} <div className="videos"> {filteredVideos.map((video) => ( - // Animate each item in list ("what") + // Animate each item in list ("what") <ViewTransition key={video.id}> <Video video={video} /> </ViewTransition> @@ -11657,7 +11664,7 @@ 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} /> @@ -11825,7 +11832,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js hidden -import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router"; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); @@ -11889,7 +11896,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js hidden -import { useState, unstable_ViewTransition as ViewTransition } from "react"; +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; @@ -12040,7 +12047,7 @@ export function fetchVideoDetails(id) { ``` ```js src/router.js hidden -import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react"; +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; export function Router({ children }) { const [isPending, startTransition] = useTransition(); @@ -12068,7 +12075,7 @@ export function Router({ children }) { }, }); } - + useEffect(() => { function handlePopState() { // This should not animate because restoration has to be synchronous. @@ -12833,8 +12840,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -12873,13 +12880,13 @@ With this update, if the content on the next page has time to pre-render, it wil <Sandpack> ```js src/App.js -import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data' +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 */} @@ -12897,7 +12904,7 @@ export default function App() { ``` ```js src/Details.js -import { use, Suspense, unstable_ViewTransition as 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"; +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. @@ -12968,10 +12975,10 @@ function VideoInfo({ id }) { ``` ```js src/Home.js hidden -import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons"; +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") + // Activate with useDeferredValue ("when") const deferredSearchText = useDeferredValue(searchText); const filteredVideos = filterVideos(videos, deferredSearchText); return ( @@ -12981,7 +12988,7 @@ function SearchList({searchText, videos}) { )} <div className="videos"> {filteredVideos.map((video) => ( - // Animate each item in list ("what") + // Animate each item in list ("what") <ViewTransition key={video.id}> <Video video={video} /> </ViewTransition> @@ -12995,7 +13002,7 @@ 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} /> @@ -13163,7 +13170,7 @@ export function IconSearch(props) { ``` ```js src/Layout.js hidden -import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router"; +import {ViewTransition} from 'react'; import { useIsNavPending } from "./router"; export default function Page({ heading, children }) { const isPending = useIsNavPending(); @@ -13227,7 +13234,7 @@ export default function LikeButton({video}) { ``` ```js src/Videos.js hidden -import { useState, unstable_ViewTransition as ViewTransition } from "react"; +import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; @@ -13378,7 +13385,7 @@ export function fetchVideoDetails(id) { ``` ```js src/router.js hidden -import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react"; +import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react"; export function Router({ children }) { const [isPending, startTransition] = useTransition(); @@ -13406,7 +13413,7 @@ export function Router({ children }) { }, }); } - + useEffect(() => { function handlePopState() { // This should not animate because restoration has to be synchronous. @@ -14171,8 +14178,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "canary", + "react-dom": "canary", "react-scripts": "latest" }, "scripts": { @@ -14212,13 +14219,13 @@ These are areas we're still exploring, and we'll share more as we make progress. # Features in development {/*features-in-development*/} -We're also developing features to help solve the common problems below. +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. +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. +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. +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*/} @@ -14251,7 +14258,7 @@ When we released hooks, we had three motivations: - **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. +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*/} @@ -14292,18 +14299,18 @@ useEffect(() => { return () => { connection.disconnect(); }; -}); // compiler inserted dependencies. +}); // 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/experimental_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. +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. +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*/} -Earlier this week [we shared](/blog/2025/04/21/react-compiler-rc) the React Compiler release candidate, and we're working towards shipping the first SemVer stable version of the compiler in the coming months. +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). @@ -14325,7 +14332,7 @@ Fragment refs are still being researched. We'll share more when we're closer to ## 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. +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: @@ -14349,9 +14356,9 @@ Now that React 19 has shipped, we're revisiting this problem space to create a p 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. +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. +This research is still early. We'll share more, and what the new APIs will look like, when we're further along. --- 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 e52112f39..c3c06b037 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -10,15 +10,51 @@ Este blog es la fuente oficial de las actualizaciones del equipo React. Cualquie <div className="sm:-mx-5 flex flex-col gap-5 mt-12"> -<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"> +<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"> -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 ... +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 RC" date="April 21, 2025" url="/blog/2025/04/21/react-compiler-rc"> +<BlogCard title="React Compiler v1.0" date="October 7, 2025" url="/blog/2025/10/07/react-compiler-1"> -We are releasing the compiler's first Release Candidate (RC) today. +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> diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index a2bcd196e..2079cdd65 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,68 +10,102 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### CityJS London 2025 {/*cityjs-london*/} -April 23 - 25, 2025. In-person in London, UK +### React Paris 2026 {/*react-paris-2026*/} +March 26 - 27, 2026. In-person in Paris, France (hybrid event) -[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) -### App.js Conf 2025 {/*appjs-conf-2025*/} -May 28 - 30, 2025. In-person in KrakΓ³w, Poland + remote +### CityJS London 2026 {/*cityjs-london-2026*/} +April 14-17, 2026. In-person in London -[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) +[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) -### CityJS Athens 2025 {/*cityjs-athens*/} -May 27 - 31, 2025. In-person in Athens, Greece +### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/} +September 10-11, 2026. In-person in Zurich, Switzerland -[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) +[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/) -### React Norway 2025 {/*react-norway-2025*/} -June 13, 2025. In-person in Oslo, Norway + remote (virtual event) +## Past Conferences {/*past-conferences*/} -[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway) +### CityJS New Delhi 2026 {/*cityjs-newdelhi-2026*/} +February 12-13, 2026. In-person in New Delhi, India -### React Summit 2025 {/*react-summit-2025*/} -June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) +[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) -[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) +### CityJS Singapore 2026 {/*cityjs-singapore-2026*/} +February 4-6, 2026. In-person in Singapore -### React Nexus 2025 {/*react-nexus-2025*/} -July 03 - 05, 2025. In-person in Bangalore, India +[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) -[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 Advanced London 2025 {/*react-advanced-london-2025*/} +November 28 & December 1, 2025. In-person in London, UK + online (hybrid event) -### React Universe Conf 2025 {/*react-universe-conf-2025*/} -September 2-4, 2025. WrocΕ‚aw, Poland. +[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) -[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +### React Summit US 2025 {/*react-summit-us-2025*/} +November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event) + +[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit) + +### React India 2025 {/*react-india-2025*/} +October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - 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) ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream [Website](https://conf.react.dev/) - [Twitter](https://x.com/reactjs) - [Bluesky](https://bsky.app/profile/react.dev) -### React India 2025 {/*react-india-2025*/} -October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day +### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/} +October 04, 2025. Nairobi, Kenya -[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) +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) -### React Summit US 2025 {/*react-summit-us-2025*/} -November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event) +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. -[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit) +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) -### React Advanced London 2025 {/*react-advanced-london-2025*/} -November 28 & December 1, 2025. In-person in London, UK + online (hybrid event) +### React Universe Conf 2025 {/*react-universe-conf-2025*/} +September 2-4, 2025. WrocΕ‚aw, Poland. -[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) +[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 -## Past Conferences {/*past-conferences*/} +[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_) +[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. @@ -185,7 +219,7 @@ May 15 - 16, 2024. In-person in Henderson, NV, USA + remote [Website](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 [Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn) @@ -227,7 +261,7 @@ 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) -[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) - [Videos](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) ### React India 2023 {/*react-india-2023*/} October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day @@ -250,7 +284,7 @@ September 28 - 30, 2023. Alicante, Spain [Website](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) [Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs) diff --git a/src/content/community/index.md b/src/content/community/index.md index a22e50e13..676fa2dec 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -29,4 +29,8 @@ Cada comunidad estΓ‘ constituida por miles de usuarios de React. ## Noticias {/*news*/} +<<<<<<< HEAD Para conocer las ΓΊltimas noticias sobre React, [sigue **@reactjs** en Twitter](https://twitter.com/reactjs) y el [blog oficial de React](/blog/) en este sitio web. +======= +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 f6b0c27a6..a9f592605 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -38,7 +38,7 @@ title: Reuniones de React ## CanadΓ‘ {/*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/) @@ -58,6 +58,7 @@ title: Reuniones de React * [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) ## Finlandia {/*finland*/} @@ -88,6 +89,7 @@ title: Reuniones de React * [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/) @@ -136,8 +138,13 @@ title: Reuniones de React ## Portugal {/*portugal*/} * [Lisboa](https://www.meetup.com/JavaScript-Lisbon/) +<<<<<<< HEAD ## Escocia (Reino Unido) {/*scotland-uk*/} * [Edimburgo](https://www.meetup.com/React-Scotland/) +======= +## Scotland (UK) {/*scotland-uk*/} +* [Edinburgh](https://www.meetup.com/react-edinburgh/) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## EspaΓ±a {/*spain*/} * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/) diff --git a/src/content/community/translations.md b/src/content/community/translations.md index 4c07e6a1e..fd49bd3e9 100644 --- a/src/content/community/translations.md +++ b/src/content/community/translations.md @@ -28,7 +28,7 @@ For the progress of each translation, see: [Is React Translated Yet?](https://tr ## How to contribute {/*how-to-contribute*/} -You can contribute to the translation efforts! +You can contribute to the translation efforts! The community conducts the translation work for the React docs on each language-specific fork of react.dev. Typical translation work involves directly translating a Markdown file and creating a pull request. Click the "contribute" link above to the GitHub repository for your language, and follow the instructions there to help with the translation effort. diff --git a/src/content/community/videos.md b/src/content/community/videos.md index d9d122338..0ffc114e2 100644 --- a/src/content/community/videos.md +++ b/src/content/community/videos.md @@ -8,7 +8,80 @@ Videos dedicados al debate sobre React y su ecosistema. </Intro> +<<<<<<< HEAD ## Conferencia de React 2021 {/*react-conf-2021*/} +======= +## 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*/} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Discurso de React 18 {/*react-18-keynote*/} @@ -16,13 +89,21 @@ En el discurso de apertura, compartimos nuestra visiΓ³n sobre el futuro de React Observa el discurso completo de [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), y [Rick Hanlon](https://twitter.com/rickhanlonii) aquΓ­: +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="Reproductor de video de YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="React 18 Keynote" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React 18 para desarrolladores de aplicaciones {/*react-18-for-application-developers*/} Para ver un demo de cΓ³mo actualizar a React 18, mira la charla de [Shruti Kapoor](https://twitter.com/shrutikapoor08) aquΓ­: +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="Reproductor de video de YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="React 18 for Application Developers" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Renderizado de transmisiΓ³n desde el servidor con Suspense {/*streaming-server-rendering-with-suspense*/} @@ -32,7 +113,11 @@ El renderizado de transmisiΓ³n desde el servidor te permite generar HTML con los Para averiguar mΓ‘s a fondo, mira la charla de [Shaundai Person](https://twitter.com/shaundai) aquΓ­: +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="Reproductor de video de YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="Streaming Server Rendering with Suspense" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### El primer grupo de trabajo de React {/*the-first-react-working-group*/} @@ -40,7 +125,11 @@ Para React 18, hemos creado nuestro primer grupo de trabajo para colaborar con u Para ver una descripciΓ³n general sobre este trabajo, mira la charla de [Aakansha' Doshi](https://twitter.com/aakansha1216): +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="Reproductor de video de YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="The first React working group" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Herramientas de desarrollo de React {/*react-developer-tooling*/} @@ -48,19 +137,31 @@ Para dar soporte a las nuevas funcionalidades en este lanzamiento, tambiΓ©n hemo Para mΓ‘s informaciΓ³n y una demo de las nuevas funcionalidades de las Herramientas de Desarrollo, mira la charla de [Brian Vaughn](https://twitter.com/brian_d_vaughn): +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="Reproductor de video de YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="React Developer Tooling" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### React sin memoizaciΓ³n {/*react-without-memo*/} De vista al futuro, [Xuan Huang (ι»„ηŽ„)](https://twitter.com/Huxpro) una actualizaciΓ³n de la investigaciΓ³n de nuestros laboratorios de React sobre un compilador para el auto-memoizado. Verifica esta charla para mΓ‘s informaciΓ³n y una demo sobre el prototipo del compilador: +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="Reproductor de video de YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="React without memo" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Discurso sobre la documentaciΓ³n de React {/*react-docs-keynote*/} [Rachel Nabors](https://twitter.com/rachelnabors) iniciΓ³ una secciΓ³n de charlas sobre el aprendizaje y el diseΓ±o con React con un discurso sobre la inversiΓ³n en la nueva documentaciΓ³n de React ([ahora publicada como react.dev](/blog/2023/03/16/introducing-react-dev)): +<<<<<<< HEAD <YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="Reproductor de video de YouTube" /> +======= +<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="React docs keynote" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Y mΓ‘s... {/*and-more*/} diff --git a/src/content/errors/index.md b/src/content/errors/index.md index 25746d25d..d4fc3927a 100644 --- a/src/content/errors/index.md +++ b/src/content/errors/index.md @@ -7,4 +7,4 @@ In the minified production build of React, we avoid sending down full error mess 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/421). +For an example, see: [https://react.dev/errors/149](/errors/149). 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 a1332e669..62ffb5ae2 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 @@ Digamos que tienes una aplicaciΓ³n web existente en `example.com` construida con AsΓ­ es como recomendamos configurarlo: +<<<<<<< HEAD 1. **Construye la parte React de tu app** utilizando uno de los [*frameworks* basados en React](/learn/start-a-new-react-project). 2. **Especifica `/some-app` como la *ruta base*** en la configuraciΓ³n de tu framework (aquΓ­ tienes como: [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. **Configura tu servidor o un proxy** para que todas las peticiones bajo `/some-app/` sean manejadas por tu aplicaciΓ³n React. Esto garantiza que la parte React de tu aplicaciΓ³n se pueda [beneficiar de las mejoras practicas](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) integradas en aquellos 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 Muchos frameworks basados en React son full-stack y permiten que tu aplicaciΓ³n React aproveche el servidor. Sin embargo, puedes utilizar el mismo enfoque incluso si no puedes o no quieres ejecutar JavaScript en el servidor. En ese caso, sirve la exportaciΓ³n HTML/CSS/JS ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) para Next.js, por defecto para Gatsby) en `/some-app/` en su lugar. @@ -149,7 +157,11 @@ root.render(<NavigationBar />); Observa como el contenido HTML original de `index.html` se mantiene, pero ahora tu propio componente React `NavigationBar` aparece dentro del `<nav id="navigation">` de tu HTML. Lee la [documentaciΓ³n sobre el uso de `createRoot`](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) para aprender mΓ‘s sobre renderizar componentes React dentro de una pΓ‘gina HTML existente. +<<<<<<< HEAD Cuando adoptas React en un proyecto existente, es comΓΊn empezar con pequeΓ±os componentes interactivos (como botones), y luego seguir "moviendo hacia arriba" gradualmente hasta que finalmente toda tu pΓ‘gina estΓ‘ construida con React. Si logras llegar a este punto, recomendamos migrar a [un framework de React](/learn/start-a-new-react-project) enseguida para sacar el mΓ‘ximo provecho de React. +======= +When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/creating-a-react-app) right after to get the most out of React. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## Utilizar React Native en una aplicaciΓ³n mΓ³vil nativa existente {/*using-react-native-in-an-existing-native-mobile-app*/} diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index d4fb0db56..3d065f4bb 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -138,18 +138,31 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -159,15 +172,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘is, o estatuas monumentales existentes, creadas por los primeros rapanui, que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -177,9 +208,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -189,15 +232,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -207,6 +268,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -421,9 +493,15 @@ export default function Form() { const [person, setPerson] = useState({ name: 'Niki de Saint Phalle', artwork: { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } }); @@ -529,9 +607,15 @@ export default function Form() { const [person, updatePerson] = useImmer({ name: 'Niki de Saint Phalle', artwork: { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } }); diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index 9e319796c..b020820c0 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -12,7 +12,11 @@ Si tu aplicaciΓ³n tiene limitaciones que no estΓ‘n bien cubiertas por los framew #### Considere usar un framework {/*consider-using-a-framework*/} +<<<<<<< HEAD Comenzar desde cero es una manera sencilla de iniciar con React, pero una desventaja importante a tener en cuenta es que tomar esta ruta es a menudo lo mismo que montar tu propio framework improvisado. Conforme tus necesidades evolucionen, podrΓ­as tener que solucionar problemas mΓ‘s similares a los de un framework, para los cuales nuestros frameworks recomendados ya cuentan con soluciones bien desarrolladas y respaldadas. +======= +Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Por ejemplo, si en el futuro tu aplicaciΓ³n necesita soporte para server-side rendering (SSR), static site generation (SSG), y/o React Server Components (RSC), tendrΓ‘s que implementarlos por tu cuenta. Del mismo modo, las futuras caracterΓ­sticas de React que requieran integraciΓ³n a nivel de framework tendrΓ‘n que ser implementadas por ti mismo si quieres utilizarlas. @@ -34,7 +38,7 @@ El primer paso es instalar una herramienta de compilaciΓ³n como `vite`, `parcel` [Vite](https://es.vite.dev/) es una herramienta de compilaciΓ³n cuyo objetivo es proporcionar una experiencia de desarrollo mΓ‘s rΓ‘pida y sencilla para los proyectos web modernos. <TerminalBlock> -{`npm create vite@latest my-app -- --template react`} +npm create vite@latest my-app -- --template react-ts </TerminalBlock> Vite sigue una filosofΓ­a bien definida y viene con configuraciones predeterminadas sensatas listas para usar. Vite tiene un rico ecosistema de plugins para dar soporte a Fast Refresh (actualizaciΓ³n rΓ‘pida), JSX, Babel/SWC y otras caracterΓ­sticas comunes. Consulta el [plugin React](https://es.vite.dev/plugins/#vite-plugin-react) de Vite o el [plugin React SWC](https://es.vite.dev/plugins/#vite-plugin-react-swc) y el [proyecto de ejemplo de React SSR](https://es.vite.dev/guide/ssr#proyectos-de-ejemplo) para empezar. @@ -46,7 +50,7 @@ Vite ya se estΓ‘ utilizando como herramienta de compilaciΓ³n en uno de nuestros [Parcel](https://parceljs.org/) combina una excelente experiencia de desarrollo sin configuraciΓ³n inicial con una arquitectura escalable que puede llevar tu proyecto desde sus inicios hasta aplicaciones masivas en producciΓ³n. <TerminalBlock> -{`npm install --save-dev parcel`} +npm install --save-dev parcel </TerminalBlock> Parcel es compatible de fΓ‘brica con Fast Refresh (actualizaciΓ³n rΓ‘pida), JSX, TypeScript, Flow y estilos. Consulta la [guΓ­a React de Parcel](https://parceljs.org/recipes/react/#getting-started) para empezar. @@ -56,7 +60,7 @@ Parcel es compatible de fΓ‘brica con Fast Refresh (actualizaciΓ³n rΓ‘pida), JSX, [Rsbuild](https://rsbuild.dev/) es una herramienta de desarrollo basada en Rspack que ofrece una experiencia de desarrollo fluida para aplicaciones React. Incluye valores predeterminados cuidadosamente ajustados y optimizaciones de rendimiento listas para usar. <TerminalBlock> -{`npx create-rsbuild --template react`} +npx create-rsbuild --template react </TerminalBlock> Rsbuild incluye compatibilidad integrada para funcionalidades de React como Fast Refresh, JSX, TypeScript y estilos. Consulte la [guΓ­a React de Rsbuild](https://rsbuild.dev/guide/framework/react) para empezar. @@ -97,7 +101,7 @@ Tenga en cuenta que la obtenciΓ³n de datos directamente en los componentes puede Si estΓ‘s obteniendo datos de la mayorΓ­a de backends o APIs de estilo REST, sugerimos usar: -- [React Query](https://react-query.tanstack.com/) +- [TanStack Query](https://tanstack.com/query/) - [SWR](https://swr.vercel.app/) - [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) @@ -115,14 +119,25 @@ De manera similar, si confΓ­as en que las aplicaciones usen tu framework para di La divisiΓ³n del cΓ³digo por rutas, cuando se integra con el empaquetamiento y la obtenciΓ³n de datos, puede reducir el tiempo de carga inicial de su aplicaciΓ³n y el tiempo que tarda en renderizarse el contenido visible mΓ‘s grande de la aplicaciΓ³n. ([Largest Contentful Paint](https://web.dev/articles/lcp?hl=es-419)). +<<<<<<< HEAD Para obtener instrucciones sobre cΓ³mo dividir el cΓ³digo, consulte la documentaciΓ³n de su herramienta de compilaciΓ³n: - [Optimizaciones de compilaciΓ³n](https://es.vite.dev/guide/features.html#optimizaciones-de-compilacion) - [DivisiΓ³n de cΓ³digo con Parcel](https://parceljs.org/features/code-splitting/) - [DivisiΓ³n de cΓ³digo con Rsbuild](https://rsbuild.dev/guide/optimization/code-splitting) +======= +For code-splitting instructions, see your build tool docs: +- [Vite build optimizations](https://vite.dev/guide/features.html#build-optimizations) +- [Parcel code splitting](https://parceljs.org/features/code-splitting/) +- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ### Mejorar el rendimiento de las aplicaciones {/*improving-application-performance*/} +<<<<<<< HEAD Dado que la herramienta de compilaciΓ³n que elija sΓ³lo admite aplicaciones de una sola pΓ‘gina (SPA), tendrΓ‘ que implementar otras [patrones de renderizado](https://www.patterns.dev/vanilla/rendering-patterns) como server-side rendering (SSR), static site generation (SSG), y/o React Server Components (RSC). Aunque al principio no necesites estas funciones, en el futuro puede que haya algunas rutas que se beneficien de SSR, SSG o RSC. +======= +Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * **Single-page apps (SPA)** cargan una ΓΊnica pΓ‘gina HTML y la actualizan dinΓ‘micamente a medida que el usuario interactΓΊa con la aplicaciΓ³n. Las SPA son mΓ‘s fΓ‘ciles de usar, pero pueden tener tiempos de carga iniciales mΓ‘s lentos. Las SPA son la arquitectura por defecto de la mayorΓ­a de las herramientas de compilaciΓ³n. @@ -132,12 +147,22 @@ Dado que la herramienta de compilaciΓ³n que elija sΓ³lo admite aplicaciones de u * **React Server Components (RSC)** Permite mezclar componentes de tiempo de compilaciΓ³n, solo de servidor e interactivos dentro de un ΓΊnico Γ‘rbol de React. RSC puede mejorar el rendimiento, pero a dΓ­a de hoy requiere una gran experiencia para su configuraciΓ³n y mantenimiento. Consulte los [ejemplos de RSC de Parcel](https://github.com/parcel-bundler/rsc-examples). +<<<<<<< HEAD Tus estrategias de renderizado necesitan integrarse con tu router para que las aplicaciones construidas con tu framework puedan elegir la estrategia de renderizado a nivel de ruta. Esto permitirΓ‘ diferentes estrategias de renderizado sin tener que reescribir toda la aplicaciΓ³n. Por ejemplo, la pΓ‘gina de destino de tu aplicaciΓ³n podrΓ­a beneficiarse de la generaciΓ³n estΓ‘tica (SSG), mientras que una pΓ‘gina con un feed de contenido podrΓ­a funcionar mejor con la renderizaciΓ³n del lado del servidor. +======= +Your rendering strategies need to integrate with your router so apps built with your framework can choose the rendering strategy on a per-route level. This will enable different rendering strategies without having to rewrite your whole app. For example, the landing page for your app might benefit from being statically generated (SSG), while a page with a content feed might perform best with server-side rendering. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Utilizar la estrategia de renderizaciΓ³n adecuada para las rutas correctas puede reducir el tiempo que tarda en cargarse el primer byte de contenido ([Time to First Byte](https://web.dev/articles/ttfb?hl=es-419)), el primer contenido que se muestra ([First Contentful Paint](https://web.dev/articles/fcp?hl=es-419)), y el mayor contenido visible de la aplicaciΓ³n para renderizar ([Largest Contentful Paint](https://web.dev/articles/lcp?hl=es-419)). ### Y mΓ‘s... {/*and-more*/} +<<<<<<< HEAD Estos son sΓ³lo algunos ejemplos de las caracterΓ­sticas que una nueva aplicaciΓ³n tendrΓ‘ que tener en cuenta cuando se construya desde cero. Muchas de las limitaciones con las que te encontrarΓ‘s pueden ser difΓ­ciles de resolver, ya que cada problema estΓ‘ interconectado con los demΓ‘s y puede requerir profundos conocimientos en Γ‘reas problemΓ‘ticas con las que quizΓ‘ no estΓ©s familiarizado. Si no quieres resolver estos problemas por tu cuenta, puedes [empezar con un framework](/learn/creating-a-react-app) que ofrece estas funciones desde el primer momento. +======= +These are just a few examples of the features a new app will need to consider when building from scratch. Many limitations you'll hit can be difficult to solve as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with. + +If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index a09b9e7d5..27c2f4f1c 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -458,7 +458,11 @@ export default function Menu() { return ( <> +<<<<<<< HEAD <h2>ΒΏCuΓ‘l es tu merienda de viaje?</h2> +======= + <h2>What's your travel snack?</h2> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <ul> {items.map((item, index) => ( <li key={item.id}> @@ -920,7 +924,11 @@ export const initialTravelPlan = { }, 10: { id: 10, +<<<<<<< HEAD title: 'Las AmΓ©ricas', +======= + title: 'Americas', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { @@ -966,7 +974,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25], + childIds: [20, 21, 22, 23, 24, 25], }, 20: { id: 20, @@ -1000,8 +1008,13 @@ export const initialTravelPlan = { }, 26: { id: 26, +<<<<<<< HEAD title: 'Europa', childIds: [27, 28, 29, 30, 31, 32, 33], +======= + title: 'Europe', + childIds: [27, 28, 29, 30, 31, 32, 33], +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, 27: { id: 27, @@ -1040,8 +1053,13 @@ export const initialTravelPlan = { }, 34: { id: 34, +<<<<<<< HEAD title: 'OceanΓ­a', childIds: [35, 36, 37, 38, 39, 40, 41], +======= + title: 'Oceania', + childIds: [35, 36, 37, 38, 39, 40, 41], +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, 35: { id: 35, @@ -1256,7 +1274,11 @@ export const initialTravelPlan = { }, 10: { id: 10, +<<<<<<< HEAD title: 'Las AmΓ©ricas', +======= + title: 'Americas', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { @@ -1302,7 +1324,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25], + childIds: [20, 21, 22, 23, 24, 25], }, 20: { id: 20, @@ -1336,8 +1358,13 @@ export const initialTravelPlan = { }, 26: { id: 26, +<<<<<<< HEAD title: 'Europa', childIds: [27, 28, 29, 30, 31, 32, 33], +======= + title: 'Europe', + childIds: [27, 28, 29, 30, 31, 32, 33], +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, 27: { id: 27, @@ -1376,8 +1403,13 @@ export const initialTravelPlan = { }, 34: { id: 34, +<<<<<<< HEAD title: 'OceanΓ­a', childIds: [35, 36, 37, 38, 39, 40, 41], +======= + title: 'Oceania', + childIds: [35, 36, 37, 38, 39, 40, 41], +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, 35: { id: 35, @@ -1595,7 +1627,11 @@ export const initialTravelPlan = { }, 10: { id: 10, +<<<<<<< HEAD title: 'Las AmΓ©ricas', +======= + title: 'Americas', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { @@ -1641,7 +1677,7 @@ export const initialTravelPlan = { 19: { id: 19, title: 'Asia', - childIds: [20, 21, 22, 23, 24, 25,], + childIds: [20, 21, 22, 23, 24, 25,], }, 20: { id: 20, @@ -1675,8 +1711,13 @@ export const initialTravelPlan = { }, 26: { id: 26, +<<<<<<< HEAD title: 'Europa', childIds: [27, 28, 29, 30, 31, 32, 33], +======= + title: 'Europe', + childIds: [27, 28, 29, 30, 31, 32, 33], +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, 27: { id: 27, @@ -1715,8 +1756,13 @@ export const initialTravelPlan = { }, 34: { id: 34, +<<<<<<< HEAD title: 'OceanΓ­a', childIds: [35, 36, 37, 38, 39, 40, 41], +======= + title: 'Oceania', + childIds: [35, 36, 37, 38, 39, 40, 41], +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, 35: { id: 35, @@ -1821,6 +1867,7 @@ A veces, tambiΓ©n puedes reducir el anidamiento de estados moviendo algunos de l <Recap> +<<<<<<< HEAD * Si dos variables de estado siempre se actualizan juntas, considera combinarlas en una. * Elige cuidadosamente tus variables de estado para evitar crear estados "imposibles". * Estructura tu estado de una manera que reduzca las posibilidades de que cometas un error al actualizarlo. @@ -1828,6 +1875,15 @@ A veces, tambiΓ©n puedes reducir el anidamiento de estados moviendo algunos de l * No pongas props *en* estado a menos que desees evitar especΓ­ficamente las actualizaciones. * Para patrones de interfaz de usuario como la selecciΓ³n, mantΓ©n el ID o el Γ­ndice en estado en lugar del objeto mismo. * Si actualizar el estado profundamente anidado es complicado, intenta aplanarlo. +======= +* If two state variables always update together, consider merging them into one. +* Choose your state variables carefully to avoid creating "impossible" states. +* Structure your state in a way that reduces the chances that you'll make a mistake updating it. +* Avoid redundant and duplicate state so that you don't need to keep it in sync. +* Don't put props *into* state unless you specifically want to prevent updates. +* For UI patterns like selection, keep ID or index in state instead of the object itself. +* If updating deeply nested state is complicated, try flattening it. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Recap> diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 2d4eb2afe..342cbf74e 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -32,6 +32,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -43,6 +44,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -80,6 +94,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -91,6 +106,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -132,6 +160,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -143,6 +172,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -236,6 +278,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -247,6 +290,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -290,6 +346,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -301,6 +358,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -371,6 +441,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -382,6 +453,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -417,6 +501,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -428,6 +513,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -474,6 +572,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -485,6 +584,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -512,6 +624,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item isPacked={true} name="Traje de vuelo" @@ -523,6 +636,19 @@ export default function PackingList() { <Item isPacked={false} name="FotografΓ­a de Tam" +======= + <Item + isPacked={true} + name="Space suit" + /> + <Item + isPacked={true} + name="Helmet with a golden leaf" + /> + <Item + isPacked={false} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -560,6 +686,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item importance={9} name="Traje de vuelo" @@ -571,6 +698,19 @@ export default function PackingList() { <Item importance={6} name="FotografΓ­a de Tam" +======= + <Item + importance={9} + name="Space suit" + /> + <Item + importance={0} + name="Helmet with a golden leaf" + /> + <Item + importance={6} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> @@ -604,6 +744,7 @@ export default function PackingList() { <section> <h1>Lista de equipaje de Sally Ride</h1> <ul> +<<<<<<< HEAD <Item importance={9} name="Traje de vuelo" @@ -615,6 +756,19 @@ export default function PackingList() { <Item importance={6} name="FotografΓ­a de Tam" +======= + <Item + importance={9} + name="Space suit" + /> + <Item + importance={0} + name="Helmet with a golden leaf" + /> + <Item + importance={6} + name="Photo of Tam" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </ul> </section> diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index b63c957f8..ff7e3958b 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -63,8 +63,13 @@ Expo es mantenido por [Expo (la empresa)](https://expo.dev/about). Crear aplicac Hay otros frameworks emergentes que estΓ‘n trabajando hacia nuestra visiΓ³n de React full-stack: +<<<<<<< HEAD - [TanStack Start (Beta)](https://tanstack.com/): TanStack Start es un framework React full-stack potenciado por TanStack Router. Proporciona SSR de documento completo, streaming, funciones del servidor, empaquetado y mΓ‘s usando herramientas como Nitro y Vite. - [RedwoodJS](https://redwoodjs.com/): Redwood es un framework React full-stack con muchos paquetes y configuraciones preinstaladas que facilitan la creaciΓ³n de aplicaciones web full-stack. +======= +- [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite. +- [RedwoodSDK](https://rwsdk.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <DeepDive> @@ -104,7 +109,11 @@ Server Components y Suspense son funcionalidades de React en lugar de funcionali Si tu aplicaciΓ³n tiene restricciones que no son bien atendidas por los frameworks existentes, prefieres construir tu propio framework, o simplemente quieres aprender lo bΓ‘sico de una aplicaciΓ³n de React, hay otras opciones disponibles para iniciar un proyecto de React desde cero. +<<<<<<< HEAD Empezar desde cero te da mΓ‘s flexibilidad, pero requiere que tomes decisiones sobre quΓ© herramientas usar para el enrutamiento, la obtenciΓ³n de datos y otros patrones de uso comunes. Es muy parecido a construir tu propio framework, en lugar de usar uno que ya existe. Los [frameworks que recomendamos](#full-stack-frameworks) tienen soluciones integradas para estos problemas. +======= +Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#full-stack-frameworks) have built-in solutions for these problems. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si quieres construir tus propias soluciones, consulta nuestra guΓ­a para [crear una aplicaciΓ³n de React desde cero](/learn/build-a-react-app-from-scratch) para instrucciones sobre cΓ³mo configurar un nuevo proyecto de React comenzando con una herramienta de compilaciΓ³n como [Vite](https://vite.dev/), [Parcel](https://parceljs.org/) o [RSbuild](https://rsbuild.dev/). diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index d78c4594e..fe6601f24 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -32,7 +32,7 @@ Las aplicaciones de React se construyen a partir de piezas independientes de UI function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3As.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); @@ -98,7 +98,7 @@ export default function Gallery() { export default function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -131,7 +131,7 @@ export default function TodoList() { // Β‘Esto no funciona! <h1>Tareas Pendientes de Hedy Lamarr</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" > @@ -160,7 +160,7 @@ export default function TodoList() { <> <h1>Tareas Pendientes de Hedy Lamarr</h1> <img - src="https://i.imgur.com/yXOvdOSs.jpg" + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" /> @@ -207,7 +207,7 @@ export default function TodoList() { <h1>Tareas Pendientes de {person.name}</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -282,7 +282,7 @@ function Card({ children }) { ```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' @@ -435,7 +435,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' ); @@ -474,7 +474,7 @@ Si de forma estricta solo escribes tus componentes como funciones puras, puedes <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [5]}} let guest = 0; function Cup() { @@ -526,9 +526,15 @@ Lee **[Mantener los componentes puros](/learn/keeping-components-pure)** para ap ## Tu UI como un Γ‘rbol {/*your-ui-as-a-tree*/} +<<<<<<< HEAD React utiliza Γ‘rboles para modelar las relaciones entre componentes y mΓ³dulos. Un Γ‘rbol de renderizado de React es una representaciΓ³n de la relaciΓ³n padre-hijo entre componentes. +======= +React uses trees to model the relationships between components and modules. + +A React render tree is a representation of the parent and child relationship between components. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <Diagram name="generic_render_tree" height={250} width={500} alt="Un grΓ‘fo de Γ‘rbol con cinco nodos, con cada nodo que representa un componente. El nodo raΓ­z se localiza en la cima del grafo de Γ‘rbol y estΓ‘ etiquetado como 'Root Component'. Tiene dos flechas que se extienden hacia abajo a dos nodos etiquetados como 'Component A' y 'Component C'. Cada una de las flechas estΓ‘ etiquetada con 'renders'. El 'Component A' tiene una sola flecha 'renders' hacia un nodo etiquetado como 'Component B'. 'Component C' tiene una sola flecha 'renders' hacia un nodo etiquetado como 'Component D'."> @@ -538,7 +544,11 @@ Un ejemplo de un Γ‘rbol de renderizado de React. Los componentes cercanos a la cima del Γ‘rbol, cerca del componente raΓ­z, se consideran componentes de nivel superior. Los componentes sin componentes hijos son componentes hoja. Esta categorizaciΓ³n de los componentes es ΓΊtil para entender el flujo de datos y el rendimiento del renderizado. +<<<<<<< HEAD Modelar la relaciΓ³n entre los mΓ³dulos de JavaScript es otra forma ΓΊtil de entender tu apliaciΓ³n. Nos referimos a esto como un Γ‘rbol de dependencia de mΓ³dulos. +======= +Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <Diagram name="generic_dependency_tree" height={250} width={500} alt="Un grafo de Γ‘rbol con cinco nodos. Cada nodo representa un mΓ³dulo de JavaScript. El nodo superior estΓ‘ etiquetado como 'RootModule.js'. Tiene tres flechas que se extienden hacia los nodos: 'ModuleA.js', 'ModuleB.js' y 'ModuleC.js'. Cada flecha se etiqueta como 'imports'. El nodo 'ModuleC.js' tiene una sola flecha 'imports' que apunta al nodo etiquetado como 'ModuleD.js'."> @@ -546,7 +556,11 @@ Un ejemplo de un Γ‘rbol de dependecias de mΓ³dulos. </Diagram> +<<<<<<< HEAD Un Γ‘rbol de dependencias se usa a menudo para construir herramientas que empaquetan todo el cΓ³digo relevante de JavaScript para que el cliente descargue y renderice. Un tamaΓ±o grande del paquete significa una regresiΓ³n en la experiencia de usuario para las aplicaciones de React. Entender el Γ‘rbol de dependencias de los mΓ³duls ayuda a depurar tales problemas. +======= +A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <LearnMore path="/learn/understanding-your-ui-as-a-tree"> diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 9d55fec7e..dfeb972d1 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -31,7 +31,11 @@ Algunos editores vienen con estas funcionalidades integradas por defecto, pero o ### Linting (anΓ‘lisis de cΓ³digo) {/*linting*/} +<<<<<<< HEAD Las herramientas de anΓ‘lisis de cΓ³digo de tipo *linters* permiten encontrar problemas en tu cΓ³digo mientras lo escribes, ayudando a corregirlos de forma temprana. [ESLint](https://eslint.org/) es un *linter* popular de cΓ³digo abierto para JavaScript. +======= +Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * [Instala ESLint con la recomendaciΓ³n recomendada para React](https://www.npmjs.com/package/eslint-config-react-app) (Β‘asegΓΊrate de tener [Node instalado!](https://nodejs.org/en/download/current/)) * [Integra ESLint en VSCode con la extensiΓ³n oficial](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 25ca57753..b17042374 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -201,7 +201,7 @@ Hay dos casos comunes en los que no necesitas Efectos: Por ejemplo, no necesitas un Efecto para ajustar algΓΊn estado basado en otro estado: -```js {5-9} +```js {expectedErrors: {'react-compiler': [8]}} {5-9} function Form() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); @@ -227,7 +227,11 @@ function Form() { } ``` +<<<<<<< HEAD Sin embargo, *necesitas* Efectos para sincronizar con sistemas externos. +======= +However, you *do* need Effects to synchronize with external systems. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <LearnMore path="/learn/you-might-not-need-an-effect"> @@ -312,6 +316,7 @@ Lee **[Ciclo de vida de eventos reactivos](/learn/lifecycle-of-reactive-effects) ## Separar eventos de Efectos {/*separating-events-from-effects*/} +<<<<<<< HEAD <Wip> Esta secciΓ³n describe una **API experimental que aΓΊn no se ha publicado** en una versiΓ³n estable de React. @@ -319,6 +324,9 @@ Esta secciΓ³n describe una **API experimental que aΓΊn no se ha publicado** en u </Wip> Los controladores de eventos ΓΊnicamente se vuelven a ejecutar cuando realizas de nuevo la misma interacciΓ³n. A diferencia de los controladores de eventos, los Efectos se vuelven a sincronizar si alguno de los valores que leen, como props o estados, son diferentes a los del ΓΊltimo renderizado. Algunas veces, quieres una mezcla de ambos comportamientos: un Efecto que se vuelve a ejecutar en respuesta de algunos valores. +======= +Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if any of the values they read, like props or state, are different than during last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Todo el cΓ³digo dentro de los Efectos es *reactivo.* Se ejecutarΓ‘ de nuevo si algΓΊn valor reactivo que lee, ha cambiado debido a una nueva renderizaciΓ³n. Por ejemplo, este Efecto volverΓ‘ a conectarse con el chat si `roomId` o `theme` han cambiado: @@ -388,7 +396,7 @@ export default function App() { <hr /> <ChatRoom roomId={roomId} - theme={isDark ? 'dark' : 'light'} + theme={isDark ? 'dark' : 'light'} /> </> ); @@ -455,8 +463,8 @@ Esto no es lo ideal. Quieres volver a conectar con el chat ΓΊnicamente si el `ro ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -471,7 +479,7 @@ Esto no es lo ideal. Quieres volver a conectar con el chat ΓΊnicamente si el `ro ```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'; @@ -521,7 +529,7 @@ export default function App() { <hr /> <ChatRoom roomId={roomId} - theme={isDark ? 'dark' : 'light'} + theme={isDark ? 'dark' : 'light'} /> </> ); diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 619160441..6d27e6054 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -28,7 +28,7 @@ En [Tu primer componente](/learn/your-first-component), hiciste un componente `P function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3As.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); @@ -80,7 +80,7 @@ export default function App() { function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -118,7 +118,7 @@ Nota cΓ³mo este ejemplo estΓ‘ ahora descompuesto en dos archivos: Puede que te encuentres archivos que omiten la extensiΓ³n de archivo `.js` de esta forma: -```js +```js import Gallery from './Gallery'; ``` @@ -198,7 +198,7 @@ export default function App() { export function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -286,7 +286,7 @@ export default function App() { export function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -354,7 +354,7 @@ export default function Gallery() { export function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -404,7 +404,7 @@ export default function Gallery() { export default function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); diff --git a/src/content/learn/index.md b/src/content/learn/index.md index ac1570ac4..b870fd6af 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -143,7 +143,7 @@ Puedes tambiΓ©n poner expresiones mΓ‘s complejas dentro de llaves, por ejemplo, ```js const user = { name: 'Hedy Lamarr', - imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', + imageUrl: 'https://react.dev/images/docs/scientists/yXOvdOSs.jpg', imageSize: 90, }; diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 0fa264feb..7baee2cbf 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -28,7 +28,7 @@ export default function Avatar() { return ( <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> ); @@ -41,7 +41,11 @@ export default function Avatar() { </Sandpack> +<<<<<<< HEAD AquΓ­, `"https://i.imgur.com/7vQD0fPs.jpg"` y `"Gregorio Y. Zara"` estΓ‘n siendo pasados como strings. +======= +Here, `"https://react.dev/images/docs/scientists/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Pero, ΒΏquΓ© sucede si quieres especificar dinΓ‘micamente el texto `src` o `alt`? Puedes **usar un valor de JavaScript reemplazando las comillas de apertura `"` y de cierre `"` con las llaves de apertura `{` y de cierre `}`**: @@ -49,7 +53,7 @@ Pero, ΒΏquΓ© sucede si quieres especificar dinΓ‘micamente el texto `src` o `alt` ```js export default function Avatar() { - const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; + const avatar = 'https://react.dev/images/docs/scientists/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( <img @@ -190,7 +194,7 @@ export default function TodoList() { <h1>Tareas pendientes de {person.name}</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -266,7 +270,7 @@ export default function TodoList() { <h1>Tareas pendientes de {person}</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -314,7 +318,7 @@ export default function TodoList() { <h1>Tareas pendientes de {person.name}</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -358,7 +362,7 @@ export default function TodoList() { <h1>Tareas pendientes de {person.name}</h1> <img className="avatar" - src="https://i.imgur.com/7vQD0fPs.jpg" + src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg" alt="Gregorio Y. Zara" /> <ul> @@ -388,7 +392,7 @@ Mueve la URL de la imagen a una propiedad llamada `person.imageUrl` y lΓ©ela des ```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' @@ -428,7 +432,11 @@ body > div > div { padding: 20px; } En el objeto a continuaciΓ³n, la URL de la imagen completa estΓ‘ dividida en 4 partes: la URL de base, `imageId`, `imageSize` y la extensiΓ³n del archivo. +<<<<<<< HEAD Queremos que la URL de la imagen combine estos atributos juntos: la URL de base (siempre `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), y la extensiΓ³n del archivo (siempre `'.jpg'`). Sin embargo, algo estΓ‘ mal con la forma en que la etiqueta `<img>` especifica su `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 `<img>` tag specifies its `src`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ΒΏPuedes arreglarlo? @@ -436,7 +444,7 @@ Queremos que la URL de la imagen combine estos atributos juntos: la URL de base ```js -const baseUrl = 'https://i.imgur.com/'; +const baseUrl = 'https://react.dev/images/docs/scientists/'; const person = { name: 'Gregorio Y. Zara', imageId: '7vQD0fP', @@ -487,7 +495,7 @@ Puedes escribirlo como `src={baseUrl + person.imageId + person.imageSize + '.jpg <Sandpack> ```js -const baseUrl = 'https://i.imgur.com/'; +const baseUrl = 'https://react.dev/images/docs/scientists/'; const person = { name: 'Gregorio Y. Zara', imageId: '7vQD0fP', @@ -564,7 +572,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 8c6d2fd61..8ea0eeae6 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -27,6 +27,7 @@ Es posible que ya estΓ©s familiarizado con un ejemplo de funciones puras: fΓ³rmu Considera esta fΓ³rmula matemΓ‘tica: <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>. +<<<<<<< HEAD Si <Math><MathI>x</MathI> = 2</Math> entonces <Math><MathI>y</MathI> = 4</Math>. Siempre. Si <Math><MathI>x</MathI> = 3</Math> entonces <Math><MathI>y</MathI> = 6</Math>. Siempre. @@ -34,6 +35,15 @@ Si <Math><MathI>x</MathI> = 3</Math> entonces <Math><MathI>y</MathI> = 6</Math>. Si <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> a veces no serΓ‘ <Math>9</Math> o <Math>–1</Math> o <Math>2.5</Math> dependiendo de la hora del dΓ­a o del estado del mercado de valores. Si <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> y <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> _siempre_ serΓ‘ <Math>6</Math>. +======= +If <Math><MathI>x</MathI> = 2</Math> then <Math><MathI>y</MathI> = 4</Math>. Always. + +If <Math><MathI>x</MathI> = 3</Math> then <Math><MathI>y</MathI> = 6</Math>. Always. + +If <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> won't sometimes be <Math>9</Math> or <Math>–1</Math> or <Math>2.5</Math> depending on the time of day or the state of the stock market. + +If <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> and <Math><MathI>x</MathI> = 3</Math>, <MathI>y</MathI> will _always_ be <Math>6</Math>. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si convirtiΓ©ramos esto en una funciΓ³n de JavaScript, se verΓ­a asΓ­: @@ -52,10 +62,17 @@ React estΓ‘ diseΓ±ado en torno a este concepto. **React supone que cada componen ```js src/App.js function Recipe({ drinkers }) { return ( +<<<<<<< HEAD <ol> <li>Hervir {drinkers} tazas de agua.</li> <li>AΓ±adir {drinkers} cucharadas de tΓ© y {0.5 * drinkers} cucharada de especias.</li> <li>AΓ±adir {0.5 * drinkers} tazas de leche hirviendo y azΓΊcar a gusto.</li> +======= + <ol> + <li>Boil {drinkers} cups of water.</li> + <li>Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.</li> + <li>Add {0.5 * drinkers} cups of milk to boil and sugar to taste.</li> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </ol> ); } @@ -75,11 +92,19 @@ export default function App() { </Sandpack> +<<<<<<< HEAD Cuando pasas `drinkers={2}` a `Recipe`, devolverΓ‘ el JSX que contiene `2 cups of water`. Siempre. +======= +When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si pasas `drinkers={4}`, devolverΓ‘ el JSX que contiene `4 cups of water`. Siempre. +<<<<<<< HEAD Como una fΓ³rmula matemΓ‘tica. +======= +Just like a math formula. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Puedes pensar en tus componentes como recetas: si las sigues y no agregas nuevos ingredientes durante el proceso de cocciΓ³n, obtendrΓ‘s el mismo plato siempre. Ese "plato" es el JSX que el componente le pasa a React para [renderizar.](/learn/render-and-commit) @@ -93,7 +118,7 @@ AquΓ­ hay un componente que rompe esta regla: <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [5]}} let guest = 0; function Cup() { @@ -175,7 +200,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(<Cup key={i} guest={i} />); } @@ -215,6 +240,7 @@ Cada nueva caracterΓ­stica de React que estamos construyendo aprovecha la pureza <Recap> +<<<<<<< HEAD * Lo que significa que un componente debe ser puro: * **Se ocupa de sus propios asuntos.** No debe cambiar ningΓΊn objeto o variable que existiera antes del renderizado. * **Las mismas entradas, la misma salida.** Dadas las mismas entradas, un componente siempre debe devolver el mismo JSX. @@ -222,6 +248,15 @@ Cada nueva caracterΓ­stica de React que estamos construyendo aprovecha la pureza * No debe mutar ninguna de las entradas que usan sus componentes para renderizar. Eso incluye props, estado y contexto. Para actualizar la pantalla, ["asignar" el estado](/learn/state-a-components-memory) en lugar de mutar objetos preexistentes. * EsfuΓ©rzate por expresar la lΓ³gica de tu componente en el JSX. Cuando necesites "cambiar cosas", generalmente querrΓ‘s hacerlo en un controlador de evento. Como ΓΊltimo recurso, puedes usar `useEffect`. * Escribir funciones puras requiere un poco de prΓ‘ctica, pero desbloquea el poder del paradigma de React. +======= +* 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 </Recap> @@ -245,7 +280,7 @@ Renderizar es un *cΓ‘lculo*, no deberΓ­a tratar de "hacer" cosas. ΒΏPuedes expre ```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 { @@ -307,7 +342,7 @@ Puedes arreglar este componente calculando el `className` e incluirlo en la sali ```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'; @@ -380,7 +415,7 @@ El cΓ³digo con errores estΓ‘ en `Profile.js`. Β‘AsegΓΊrate de leerlo todo de arr <Sandpack> -```js src/Profile.js +```js {expectedErrors: {'react-compiler': [7]}} src/Profile.js import Panel from './Panel.js'; import { getImageUrl } from './utils.js'; @@ -451,7 +486,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' @@ -549,7 +584,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' @@ -602,18 +637,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: "Historia de Ankit" }, {id: 1, label: "Historia de Taylor" }, +======= +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(); // PISTA: Evita que la memoria crezca por siempre mientras lees documentos. // Estamos rompiendo nuestras propias reglas aquΓ­. @@ -698,18 +739,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: "Historia de Ankit" }, {id: 1, label: "Historia de Taylor" }, +======= +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(); // PISTA: Evita que la memoria crezca por siempre mientras lees documentos. // Estamos rompiendo nuestras propias reglas aquΓ­. @@ -769,8 +816,13 @@ Como alternativa, podrΓ­as crear un _nuevo_ array (copiando el existente) antes ```js src/StoryTray.js active export default function StoryTray({ stories }) { +<<<<<<< HEAD // Β‘Copia el array! let storiesToDisplay = stories.slice(); +======= + // Copy the array! + const storiesToDisplay = stories.slice(); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a // Esto no afecta al array original: storiesToDisplay.push({ @@ -790,18 +842,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: "Historia de Ankit" }, {id: 1, label: "Historia de Taylor" }, +======= +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(); // PISTA: Evita que la memoria crezca por siempre mientras lees documentos. // Estamos rompiendo nuestras propias reglas aquΓ­. diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index 8d2837529..2769bf11b 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -293,7 +293,11 @@ PodrΓ­as estarte preguntando cΓ³mo React conoce que tu Efecto necesita volverse ```js {1,3,8} function ChatRoom({ roomId }) { // La prop roomId puede cambiar con el tiempo useEffect(() => { +<<<<<<< HEAD const connection = createConnection(serverUrl, roomId); // Este Efecto lee roomId +======= + const connection = createConnection(serverUrl, roomId); // This Effect reads roomId +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a connection.connect(); return () => { connection.disconnect(); @@ -969,7 +973,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> El punto puede moverse </label> @@ -1027,7 +1031,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> El punto puede moverse </label> @@ -1083,7 +1087,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> El punto puede moverse </label> @@ -1131,7 +1135,7 @@ Si ves una regla de linter suprimida, Β‘elimina la supresiΓ³n! AhΓ­ es donde sue <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [16]}} import { useState, useEffect } from 'react'; export default function App() { @@ -1155,7 +1159,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> El punto puede moverse </label> @@ -1220,7 +1224,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> El punto puede moverse </label> @@ -1279,7 +1283,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> El punto puede moverse </label> @@ -1374,7 +1378,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 }) { @@ -1711,7 +1715,11 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', +<<<<<<< HEAD name: 'Marte' +======= + name: 'Mars' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]); }, 1000); }); @@ -1735,7 +1743,7 @@ async function fetchPlaces(planetId) { name: 'EspaΓ±a' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -1746,7 +1754,7 @@ async function fetchPlaces(planetId) { name: 'Diana Chasma' }, { id: 'kumsong-vallis', - name: 'KΕ­msŏng Vallis' + name: 'KΕ­msŏng Vallis' }]); } else if (planetId === 'mars') { resolve([{ @@ -1879,7 +1887,11 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', +<<<<<<< HEAD name: 'Marte' +======= + name: 'Mars' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]); }, 1000); }); @@ -1903,7 +1915,7 @@ async function fetchPlaces(planetId) { name: 'EspaΓ±a' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -1914,7 +1926,7 @@ async function fetchPlaces(planetId) { name: 'Diana Chasma' }, { id: 'kumsong-vallis', - name: 'KΕ­msŏng Vallis' + name: 'KΕ­msŏng Vallis' }]); } else if (planetId === 'mars') { resolve([{ @@ -2042,7 +2054,11 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', +<<<<<<< HEAD name: 'Marte' +======= + name: 'Mars' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]); }, 1000); }); @@ -2066,7 +2082,7 @@ async function fetchPlaces(planetId) { name: 'EspaΓ±a' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -2077,7 +2093,7 @@ async function fetchPlaces(planetId) { name: 'Diana Chasma' }, { id: 'kumsong-vallis', - name: 'KΕ­msŏng Vallis' + name: 'KΕ­msŏng Vallis' }]); } else if (planetId === 'mars') { resolve([{ diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index b11a07d55..b9689e43f 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -741,9 +741,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return ( <section className="section"> - <LevelContext.Provider value={level + 1}> + <LevelContext value={level + 1}> {children} - </LevelContext.Provider> + </LevelContext> </section> ); } @@ -836,13 +836,11 @@ export function TasksProvider({ children }) { ); return ( - <TasksContext.Provider value={tasks}> - <TasksDispatchContext.Provider - value={dispatch} - > + <TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> {children} - </TasksDispatchContext.Provider> - </TasksContext.Provider> + </TasksDispatchContext> + </TasksContext> ); } diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 84bef51b8..686d99fa5 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 @@ Esto es porque los **Hooks solo tienen que ser llamados en el nivel mΓ‘s alto de Una posible forma de evitar esto es hacer una sola ref a su elemento padre, y luego usar mΓ©todos de manipulaciΓ³n del DOM como [`querySelectorAll`](https://developer.mozilla.org/es/docs/Web/API/Document/querySelectorAll) para "encontrar" los nodos hijos individuales a partir de Γ©l. Sin embargo, esto es frΓ‘gil y puede romperse si la estructura del DOM cambia. +<<<<<<< HEAD Otra soluciΓ³n es **pasar una funciΓ³n al atributo `ref`.** A esto se le llama un [callback `ref`.](/reference/react-dom/components/common#ref-callback) React llamarΓ‘ tu callback ref con el nodo DOM cuando sea el momento de poner la ref, y con `null` cuando sea el momento de limpiarla. Esto te permite mantener tu propio array o un [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), y acceder a cualquier ref por su Γ­ndice o algΓΊn tipo de ID. +======= +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 Este ejemplo te muestra cΓ³mo puedes usar este enfoque para desplazarte a un nodo arbitrario en una lista larga: @@ -247,13 +251,13 @@ export default function CatFriends() { <nav> <button onClick={() => scrollToCat(catList[0])}>Neo</button> <button onClick={() => scrollToCat(catList[5])}>Millie</button> - <button onClick={() => scrollToCat(catList[9])}>Bella</button> + <button onClick={() => scrollToCat(catList[8])}>Bella</button> </nav> <div> <ul> {catList.map((cat) => ( <li - key={cat} + key={cat.id} ref={(node) => { const map = getMap(); map.set(cat, node); @@ -263,7 +267,7 @@ export default function CatFriends() { }; }} > - <img src={cat} /> + <img src={cat.imageUrl} /> </li> ))} </ul> @@ -273,11 +277,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; } @@ -877,12 +892,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, + }; } ``` @@ -962,7 +995,7 @@ export default function CatFriends() { behavior: 'smooth', block: 'nearest', inline: 'center' - }); + }); }}> Siguiente </button> @@ -994,12 +1027,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, + }; } ``` diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index a8625e047..6a71f8806 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -853,10 +853,19 @@ Si ninguna de estas alternativas funcionan bien para ti, considera el contexto. ## Casos de uso para el contexto {/*use-cases-for-context*/} +<<<<<<< HEAD * **Temas:** Si tus aplicaciones permiten que los usuarios cambien la apariencia (por ejemplo, modo oscuro), puedes poner un proveedor de contexto en el primer nivel de tu aplicaciΓ³n, y usar ese contexto en componentes que necesiten ajustar su comportamiento visual. * **Cuenta actual:** Muchos componentes podrΓ­an necesitar saber el usuario actual que iniciΓ³ sesiΓ³n. Ponerlo en un contexto lo hace conveniente para leerlo desde cualquier lado del Γ‘rbol. Algunas aplicaciones tambiΓ©n te permiten manejar mΓΊltiples cuentas al mismo tiempo (por ejemplo, dejar un comentario con un usuario distinto). En esos casos, puede ser conveniente envolver parte de la UI con un proveedor anidado que tenga una cuenta actual diferente. * **Enrutamiento:** La mayorΓ­a de las soluciones de enrutamiento usan contexto internamente para mantener la ruta actual. AsΓ­ es como cada enlace "sabe" si estΓ‘ activo o no. Si construyes tu propio enrutador, podrΓ­as necesitar hacerlo tambiΓ©n. * **Gestionar estados:** A medida que tu aplicaciΓ³n crece, podrΓ­as terminar con muchos estados cerca de la parte superior de tu aplicaciΓ³n. Muchos componentes distantes de abajo podrΓ­an querer cambiarlos. Es comΓΊn [usar un reducer con un contexto](/learn/scaling-up-with-reducer-and-context) para gestionar estados complejos y pasarlos a componentes lejanos sin mucha molestia. +======= +* **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 El contexto no estΓ‘ limitado a valores estΓ‘ticos. Si pasas un valor distinto en el siguiente render, Β‘React actualizarΓ‘ todos los componentes debajo que lean el contexto! Es por esto que muchas veces el contexto es usado en combinaciΓ³n con estados. @@ -963,6 +972,7 @@ export const places = [{ description: 'La tradiciΓ³n de elegir colores vivos para las casas comenzΓ³ a finales del siglo XX.', imageId: 'K9HVAGH' }, { +<<<<<<< HEAD id: 1, name: 'Pueblo del Arco Iris en Taichung, TaiwΓ‘n', description: 'Para salvar las casas de la demoliciΓ³n, Huang Yung-Fu, un residente local, pintΓ³ la totalidad de las 1.200 de ellas en 1924.', @@ -986,6 +996,31 @@ export const places = [{ id: 5, name: 'Chefchaouen, Marruecos', description: 'Hay varias teorΓ­as sobre por quΓ© las casas estΓ‘n pintadas de azul, entre ellas que el color repele a los mosquitos o que simboliza el cielo y el paraΓ­so.', +======= + id: 1, + 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 +1033,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' ); @@ -1007,9 +1042,9 @@ export function getImageUrl(place) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; @@ -1102,6 +1137,7 @@ export const places = [{ description: 'La tradiciΓ³n de elegir colores vivos para las casas comenzΓ³ a finales del siglo XX.', imageId: 'K9HVAGH' }, { +<<<<<<< HEAD id: 1, name: 'Pueblo del Arco Iris en Taichung, TaiwΓ‘n', description: 'Para salvar las casas de la demoliciΓ³n, Huang Yung-Fu, un residente local, pintΓ³ la totalidad de las 1.200 de ellas en 1924.', @@ -1125,6 +1161,31 @@ export const places = [{ id: 5, name: 'Chefchaouen, Marruecos', description: 'Hay varias teorΓ­as sobre por quΓ© las casas estΓ‘n pintadas de azul, entre ellas que el color repele a los mosquitos o que simboliza el cielo y el paraΓ­so.', +======= + id: 1, + 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 +1198,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' ); @@ -1146,9 +1207,9 @@ export function getImageUrl(place) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index 2dfd724df..44ea0f78a 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 ( <img className="avatar" - src="https://i.imgur.com/1bX5QH6.jpg" + src="https://react.dev/images/docs/scientists/1bX5QH6.jpg" alt="Lin Lanying" width={100} height={100} @@ -126,21 +126,21 @@ export default function Profile() { <div> <Avatar size={100} - person={{ - name: 'Katsuko Saruhashi', + person={{ + name: 'Katsuko Saruhashi', imageId: 'YfeOqp2' }} /> <Avatar size={80} person={{ - name: 'Aklilu Lemma', + name: 'Aklilu Lemma', imageId: 'OKS67lh' }} /> <Avatar size={50} - person={{ + person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} @@ -153,7 +153,7 @@ export default function Profile() { ```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' @@ -291,7 +291,7 @@ export default function Profile() { <Card> <Avatar size={100} - person={{ + person={{ name: 'Katsuko Saruhashi', imageId: 'YfeOqp2' }} @@ -320,7 +320,7 @@ export default function Avatar({ person, size }) { ```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' @@ -453,12 +453,21 @@ export default function Gallery() { /> <ul> <li> +<<<<<<< HEAD <b>ProfesiΓ³n: </b> fΓ­sica y quΓ­mica </li> <li> <b>Premios: 4 </b> (Premio Nobel de FΓ­sica, Premio Nobel de QuΓ­mica, Medalla Davy, Medalla Matteucci) +======= + <b>Profession: </b> + physicist and chemist + </li> + <li> + <b>Awards: 4 </b> + (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </li> <li> <b>DescubriΓ³: </b> @@ -477,12 +486,21 @@ export default function Gallery() { /> <ul> <li> +<<<<<<< HEAD <b>ProfesiΓ³n: </b> geoquΓ­mica </li> <li> <b>Premios: 2 </b> (Premio Miyake de geoquΓ­mica, Premio Tanaka) +======= + <b>Profession: </b> + geochemist + </li> + <li> + <b>Awards: 2 </b> + (Miyake Prize for geochemistry, Tanaka Prize) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </li> <li> <b>DescubriΓ³: </b> @@ -498,7 +516,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' @@ -606,7 +624,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' @@ -703,7 +721,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' @@ -758,8 +776,8 @@ export default function Profile() { return ( <Avatar size={40} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> @@ -770,7 +788,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' @@ -814,15 +832,15 @@ export default function Profile() { <> <Avatar size={40} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> <Avatar size={120} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> @@ -834,7 +852,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' @@ -878,22 +896,22 @@ export default function Profile() { <> <Avatar size={40} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> <Avatar size={70} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> <Avatar size={120} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> @@ -905,7 +923,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' @@ -938,7 +956,7 @@ export default function Profile() { <h1>Foto</h1> <img className="avatar" - src="https://i.imgur.com/OKS67lhm.jpg" + src="https://react.dev/images/docs/scientists/OKS67lhm.jpg" alt="Aklilu Lemma" width={70} height={70} @@ -1011,7 +1029,7 @@ export default function Profile() { <h1>Foto</h1> <img className="avatar" - src="https://i.imgur.com/OKS67lhm.jpg" + src="https://react.dev/images/docs/scientists/OKS67lhm.jpg" alt="Aklilu Lemma" width={100} height={100} @@ -1073,7 +1091,7 @@ export default function Profile() { <Card title="Foto"> <img className="avatar" - src="https://i.imgur.com/OKS67lhm.jpg" + src="https://react.dev/images/docs/scientists/OKS67lhm.jpg" alt="Aklilu Lemma" width={100} height={100} diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index 16000f269..cbd75a7a0 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -86,7 +86,11 @@ label { </Sandpack> +<<<<<<< HEAD Esta serΓ­a la apariencia del Γ‘rbol: +======= +Here's how these look as a tree: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <DiagramGroup> @@ -186,7 +190,7 @@ export default function App() { return ( <div> <Counter /> - {showB && <Counter />} + {showB && <Counter />} <label> <input type="checkbox" @@ -288,9 +292,9 @@ export default function App() { return ( <div> {isFancy ? ( - <Counter isFancy={true} /> + <Counter isFancy={true} /> ) : ( - <Counter isFancy={false} /> + <Counter isFancy={false} /> )} <label> <input @@ -496,9 +500,13 @@ export default function App() { return ( <div> {isPaused ? ( +<<<<<<< HEAD <p>Β‘Nos vemos luego!</p> +======= + <p>See you later!</p> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ) : ( - <Counter /> + <Counter /> )} <label> <input @@ -596,7 +604,7 @@ export default function App() { <div> {isFancy ? ( <div> - <Counter isFancy={true} /> + <Counter isFancy={true} /> </div> ) : ( <section> @@ -672,7 +680,11 @@ label { </Sandpack> +<<<<<<< HEAD El estado del contador se reinicia cuando se hace clic en la casilla de verificaciΓ³n. Aunque se renderiza un `Counter`, el primer hijo del `div` cambia de `div` a `section`. Cuando el `div` hijo se eliminΓ³ del DOM, todo el Γ‘rbol debajo de Γ©l (incluyendo el `Counter` y su estado) se destruyΓ³ tambiΓ©n. +======= +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 <DiagramGroup> @@ -704,7 +716,7 @@ AquΓ­, la funciΓ³n del componente `MyTextField` se define *dentro* de `MyCompone <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [7]}} import { useState } from 'react'; export default function MyComponent() { @@ -1431,19 +1443,29 @@ export default function App() { if (reverse) { return ( <> +<<<<<<< HEAD <Field label="Apellido" /> <Field label="Nombre" /> +======= + <Field label="Last name" /> + <Field label="First name" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} </> ); } else { return ( <> +<<<<<<< HEAD <Field label="Nombre" /> <Field label="Apellido" /> +======= + <Field label="First name" /> + <Field label="Last name" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} </> - ); + ); } } @@ -1493,19 +1515,29 @@ export default function App() { if (reverse) { return ( <> +<<<<<<< HEAD <Field key="lastName" label="Apellido" /> <Field key="firstName" label="Nombre" /> +======= + <Field key="lastName" label="Last name" /> + <Field key="firstName" label="First name" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} </> ); } else { return ( <> +<<<<<<< HEAD <Field key="firstName" label="Nombre" /> <Field key="lastName" label="Apellido" /> +======= + <Field key="firstName" label="First name" /> + <Field key="lastName" label="Last name" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a {checkbox} </> - ); + ); } } @@ -1887,6 +1919,7 @@ export default function Gallery() { } let images = [{ +<<<<<<< HEAD place: 'Penang, Malasia', src: 'https://i.imgur.com/FJeJR8M.jpg' }, { @@ -1895,10 +1928,21 @@ let images = [{ }, { place: 'Bilbao, EspaΓ±a', src: 'https://i.imgur.com/z08o2TS.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' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { place: 'ValparaΓ­so, Chile', - src: 'https://i.imgur.com/Y3utgTi.jpg' + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' }, { +<<<<<<< HEAD place: 'Schwyz, Suiza', src: 'https://i.imgur.com/JBbMpWY.jpg' }, { @@ -1907,6 +1951,16 @@ let images = [{ }, { place: 'Liubliana, Eslovenia', src: 'https://i.imgur.com/3aIiwfm.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 +2009,7 @@ export default function Gallery() { } let images = [{ +<<<<<<< HEAD place: 'Penang, Malasia', src: 'https://i.imgur.com/FJeJR8M.jpg' }, { @@ -1963,10 +2018,21 @@ let images = [{ }, { place: 'Bilbao, EspaΓ±a', src: 'https://i.imgur.com/z08o2TS.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' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { place: 'ValparaΓ­so, Chile', - src: 'https://i.imgur.com/Y3utgTi.jpg' + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' }, { +<<<<<<< HEAD place: 'Schwyz, Suiza', src: 'https://i.imgur.com/JBbMpWY.jpg' }, { @@ -1975,6 +2041,16 @@ let images = [{ }, { place: 'Liubliana, Eslovenia', src: 'https://i.imgur.com/3aIiwfm.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 +2087,7 @@ export default function ContactList() { <label> <input type="checkbox" - value={reverse} + checked={reverse} onChange={e => { setReverse(e.target.checked) }} @@ -2110,7 +2186,7 @@ export default function ContactList() { <label> <input type="checkbox" - value={reverse} + checked={reverse} onChange={e => { setReverse(e.target.checked) }} diff --git a/src/content/learn/queueing-a-series-of-state-updates.md b/src/content/learn/queueing-a-series-of-state-updates.md index 9ca5ac004..214eb1226 100644 --- a/src/content/learn/queueing-a-series-of-state-updates.md +++ b/src/content/learn/queueing-a-series-of-state-updates.md @@ -177,7 +177,11 @@ Durante el siguiente renderizado, React recorre la cola de estados: | "reemplazar con `5`" | `0` (sin usar) | `5` | | `n => n + 1` | `5` | `5 + 1 = 6` | +<<<<<<< HEAD React almacena `6` como resultado final y lo devuelve desde `useState`. +======= +React stores `6` as the final result and returns it from `useState`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <Note> @@ -305,7 +309,11 @@ export default function RequestTracker() { Completado: {completed} </h3> <button onClick={handleClick}> +<<<<<<< HEAD Comprar +======= + Buy +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </button> </> ); @@ -349,7 +357,11 @@ export default function RequestTracker() { Completado: {completed} </h3> <button onClick={handleClick}> +<<<<<<< HEAD Comprar +======= + Buy +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </button> </> ); diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md deleted file mode 100644 index 9d4e19d21..000000000 --- a/src/content/learn/react-compiler.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: React Compiler ---- - -<Intro> -This page will give you an introduction to React Compiler and how to try it out successfully. -</Intro> - -<YouWillLearn> - -* Getting started with the compiler -* Installing the compiler and ESLint plugin -* Troubleshooting - -</YouWillLearn> - -<Note> -React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to try the compiler and provide feedback. - -The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`. -</Note> - -React Compiler is a new compiler that we've open sourced to get feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. - -eslint-plugin-react-hooks also includes an [ESLint rule](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler. - -The compiler is currently released as `rc`, and is available to try out on React 17+ apps and libraries. To install the RC: - -<TerminalBlock> -{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`} -</TerminalBlock> - -Or, if you're using Yarn: - -<TerminalBlock> -{`yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`} -</TerminalBlock> - -If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions. - -### What does the compiler do? {/*what-does-the-compiler-do*/} - -In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as `useMemo`, `useCallback`, and `React.memo`. With these APIs you can tell React that certain parts of your application don't need to recompute if their inputs haven't changed, reducing work on updates. While powerful, it's easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don't have any _meaningful_ changes. - -The compiler uses its knowledge of JavaScript and React's rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code. - -<Note> -React Compiler can statically detect when Rules of React are broken, and safely opt-out of optimizing just the affected components or hooks. It is not necessary for the compiler to optimize 100% of your codebase. -</Note> - -If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand. - -<DeepDive> -#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/} - -The initial release of React Compiler is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases: - -1. **Skipping cascading re-rendering of components** - * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed -1. **Skipping expensive calculations from outside of React** - * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data - -#### Optimizing Re-renders {/*optimizing-re-renders*/} - -React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ β€” unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes: - -```javascript -function FriendList({ friends }) { - const onlineCount = useFriendOnlineCount(); - if (friends.length === 0) { - return <NoFriends />; - } - return ( - <div> - <span>{onlineCount} online</span> - {friends.map((friend) => ( - <FriendListCard key={friend.id} friend={friend} /> - ))} - <MessageButton /> - </div> - ); -} -``` -[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA) - -React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes. - -#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/} - -The compiler can also automatically memoize for expensive calculations used during rendering: - -```js -// **Not** memoized by React Compiler, since this is not a component or hook -function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ } - -// Memoized by React Compiler since this is a component -function TableContainer({ items }) { - // This function call would be memoized: - const data = expensivelyProcessAReallyLargeArrayOfObjects(items); - // ... -} -``` -[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA) - -However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because: - -- React Compiler only memoizes React components and hooks, not every function -- React Compiler's memoization is not shared across multiple components or hooks - -So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated. -</DeepDive> - -### Should I try out the compiler? {/*should-i-try-out-the-compiler*/} - -The compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). - -**You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better. - -## Getting Started {/*getting-started*/} - -In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. - -### Installing eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/} - -React Compiler also powers an ESLint plugin. You can try it out by installing eslint-plugin-react-hooks@^6.0.0-rc.1. - -<TerminalBlock> -{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`} -</TerminalBlock> - -See our [editor setup](/learn/editor-setup#linting) guide for more details. - -The ESLint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. - -<Note> -**You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler. -</Note> - -### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/} - -#### Existing projects {/*existing-projects*/} -The compiler is designed to compile functional components and hooks that follow the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior. - -For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do this by configuring the compiler to only run on a specific set of directories: - -```js {3} -const ReactCompilerConfig = { - sources: (filename) => { - return filename.indexOf('src/path/to/dir') !== -1; - }, -}; -``` - -When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app. - -#### New projects {/*new-projects*/} - -If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior. - -### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/} - -React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. - -<TerminalBlock> -{`npm install react-compiler-runtime@rc`} -</TerminalBlock> - -You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: - -```js {3} -// babel.config.js -const ReactCompilerConfig = { - target: '18' // '17' | '18' | '19' -}; - -module.exports = function () { - return { - plugins: [ - ['babel-plugin-react-compiler', ReactCompilerConfig], - ], - }; -}; -``` - -### Using the compiler on libraries {/*using-the-compiler-on-libraries*/} - -React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm. - -Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum [`target` and add `react-compiler-runtime` as a direct dependency](#using-react-compiler-with-react-17-or-18). The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary. - -Library code can often require more complex patterns and usage of escape hatches. For this reason, we recommend ensuring that you have sufficient testing in order to identify any issues that might arise from using the compiler on your library. If you identify any issues, you can always opt-out the specific components or hooks with the [`'use no memo'` directive](#something-is-not-working-after-compilation). - -Similarly to apps, it is not necessary to fully compile 100% of your components or hooks to see benefits in your library. A good starting point might be to identify the most performance sensitive parts of your library and ensuring that they don't break the [Rules of React](/reference/rules), which you can use `eslint-plugin-react-compiler` to identify. - -## Usage {/*installation*/} - -### Babel {/*usage-with-babel*/} - -<TerminalBlock> -{`npm install babel-plugin-react-compiler@rc`} -</TerminalBlock> - -The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. - -After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline: - -```js {7} -// babel.config.js -const ReactCompilerConfig = { /* ... */ }; - -module.exports = function () { - return { - plugins: [ - ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first! - // ... - ], - }; -}; -``` - -`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis. - -### Vite {/*usage-with-vite*/} - -If you use Vite, you can add the plugin to vite-plugin-react: - -```js {10} -// vite.config.js -const ReactCompilerConfig = { /* ... */ }; - -export default defineConfig(() => { - return { - plugins: [ - react({ - babel: { - plugins: [ - ["babel-plugin-react-compiler", ReactCompilerConfig], - ], - }, - }), - ], - // ... - }; -}); -``` - -### Next.js {/*usage-with-nextjs*/} - -Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information. - -### Remix {/*usage-with-remix*/} -Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: - -<TerminalBlock> -{`npm install vite-plugin-babel`} -</TerminalBlock> - -```js {2,14} -// vite.config.js -import babel from "vite-plugin-babel"; - -const ReactCompilerConfig = { /* ... */ }; - -export default defineConfig({ - plugins: [ - remix({ /* ... */}), - babel({ - filter: /\.[jt]sx?$/, - babelConfig: { - presets: ["@babel/preset-typescript"], // if you use TypeScript - plugins: [ - ["babel-plugin-react-compiler", ReactCompilerConfig], - ], - }, - }), - ], -}); -``` - -### Webpack {/*usage-with-webpack*/} - -A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack). - -### Expo {/*usage-with-expo*/} - -Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps. - -### Metro (React Native) {/*usage-with-react-native-metro*/} - -React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions. - -### Rspack {/*usage-with-rspack*/} - -Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps. - -### Rsbuild {/*usage-with-rsbuild*/} - -Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps. - -## Troubleshooting {/*troubleshooting*/} - -To report issues, please first create a minimal repro on the [React Compiler Playground](https://playground.react.dev/) and include it in your bug report. You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo. - -You can also provide feedback in the React Compiler Working Group by applying to be a member. Please see [the README for more details on joining](https://github.com/reactwg/react-compiler). - -### What does the compiler assume? {/*what-does-the-compiler-assume*/} - -React Compiler assumes that your code: - -1. Is valid, semantic JavaScript. -2. Tests that nullable/optional values and properties are defined before accessing them (for example, by enabling [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) if using TypeScript), i.e., `if (object.nullableProperty) { object.nullableProperty.foo }` or with optional-chaining `object.nullableProperty?.foo`. -3. Follows the [Rules of React](https://react.dev/reference/rules). - -React Compiler can verify many of the Rules of React statically, and will safely skip compilation when it detects an error. To see the errors we recommend also installing [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler). - -### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/} - -[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler. - -### Something is not working after compilation {/*something-is-not-working-after-compilation*/} -If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized. - -Due to the flexible and dynamic nature of JavaScript however, it's not possible to comprehensively detect all cases. Bugs and undefined behavior such as infinite loops may occur in those cases. - -If your app doesn't work properly after compilation and you aren't seeing any ESLint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component). - -```js {2} -function SuspiciousComponent() { - "use no memo"; // opts out this component from being compiled by React Compiler - // ... -} -``` - -<Note> -#### `"use no memo"` {/*use-no-memo*/} - -`"use no memo"` is a _temporary_ escape hatch that lets you opt-out components and hooks from being compiled by the React Compiler. This directive is not meant to be long lived the same way as eg [`"use client"`](/reference/rsc/use-client) is. - -It is not recommended to reach for this directive unless it's strictly necessary. Once you opt-out a component or hook, it is opted-out forever until the directive is removed. This means that even if you fix the code, the compiler will still skip over compiling it unless you remove the directive. -</Note> - -When you make the error go away, confirm that removing the opt out directive makes the issue come back. Then share a bug report with us (you can try to reduce it to a small repro, or if it's open source code you can also just paste the entire source) using the [React Compiler Playground](https://playground.react.dev) so we can identify and help fix the issue. - -### Other issues {/*other-issues*/} - -Please see https://github.com/reactwg/react-compiler/discussions/7. diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md new file mode 100644 index 000000000..1883125a6 --- /dev/null +++ b/src/content/learn/react-compiler/debugging.md @@ -0,0 +1,93 @@ +--- +title: Debugging and Troubleshooting +--- + +<Intro> +This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues. +</Intro> + +<YouWillLearn> + +* The difference between compiler errors and runtime issues +* Common patterns that break compilation +* Step-by-step debugging workflow + +</YouWillLearn> + +## Understanding Compiler Behavior {/*understanding-compiler-behavior*/} + +React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior. + +### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/} + +**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail. + +**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped. + +When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur. + + +## Common Breaking Patterns {/*common-breaking-patterns*/} + +One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates. + +Common scenarios where this occurs: + +- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders +- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops +- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization + +## Debugging Workflow {/*debugging-workflow*/} + +Follow these steps when you encounter issues: + +### Compiler Build Errors {/*compiler-build-errors*/} + +If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with: +- The error message +- The code that caused the error +- Your React and compiler versions + +### Runtime Issues {/*runtime-issues*/} + +For runtime behavior issues: + +### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/} + +Use `"use no memo"` to isolate whether an issue is compiler-related: + +```js +function ProblematicComponent() { + "use no memo"; // Skip compilation for this component + // ... rest of component +} +``` + +If the issue disappears, it's likely related to a Rules of React violation. + +You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed. + +### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/} + +1. Identify the root cause (often memoization-for-correctness) +2. Test after each fix +3. Remove `"use no memo"` once fixed +4. Verify the component shows the ✨ badge in React DevTools + +## Reporting Compiler Bugs {/*reporting-compiler-bugs*/} + +If you believe you've found a compiler bug: + +1. **Verify it's not a Rules of React violation** - Check with ESLint +2. **Create a minimal reproduction** - Isolate the issue in a small example +3. **Test without the compiler** - Confirm the issue only occurs with compilation +4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**: + - React and compiler versions + - Minimal reproduction code + - Expected vs actual behavior + - Any error messages + +## Next Steps {/*next-steps*/} + +- Review the [Rules of React](/reference/rules) to prevent issues +- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies \ No newline at end of file diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md new file mode 100644 index 000000000..56d932034 --- /dev/null +++ b/src/content/learn/react-compiler/incremental-adoption.md @@ -0,0 +1,225 @@ +--- +title: Incremental Adoption +--- + +<Intro> +React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects. +</Intro> + +<YouWillLearn> + +* Why incremental adoption is recommended +* Using Babel overrides for directory-based adoption +* Using the "use memo" directive for opt-in compilation +* Using the "use no memo" directive to exclude components +* Runtime feature flags with gating +* Monitoring your adoption progress + +</YouWillLearn> + +## Why Incremental Adoption? {/*why-incremental-adoption*/} + +React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest. + +Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical. + +Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs. + +By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team. + +## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/} + +There are three main approaches to adopt React Compiler incrementally: + +1. **Babel overrides** - Apply the compiler to specific directories +2. **Opt-in with "use memo"** - Only compile components that explicitly opt in +3. **Runtime gating** - Control compilation with feature flags + +All approaches allow you to test the compiler on specific parts of your application before full rollout. + +## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/} + +Babel's `overrides` option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory. + +### Basic Configuration {/*basic-configuration*/} + +Start by applying the compiler to a specific directory: + +```js +// babel.config.js +module.exports = { + plugins: [ + // Global plugins that apply to all files + ], + overrides: [ + { + test: './src/modern/**/*.{js,jsx,ts,tsx}', + plugins: [ + 'babel-plugin-react-compiler' + ] + } + ] +}; +``` + +### Expanding Coverage {/*expanding-coverage*/} + +As you gain confidence, add more directories: + +```js +// babel.config.js +module.exports = { + plugins: [ + // Global plugins + ], + overrides: [ + { + test: ['./src/modern/**/*.{js,jsx,ts,tsx}', './src/features/**/*.{js,jsx,ts,tsx}'], + plugins: [ + 'babel-plugin-react-compiler' + ] + }, + { + test: './src/legacy/**/*.{js,jsx,ts,tsx}', + plugins: [ + // Different plugins for legacy code + ] + } + ] +}; +``` + +### With Compiler Options {/*with-compiler-options*/} + +You can also configure compiler options per override: + +```js +// babel.config.js +module.exports = { + plugins: [], + overrides: [ + { + test: './src/experimental/**/*.{js,jsx,ts,tsx}', + plugins: [ + ['babel-plugin-react-compiler', { + // options ... + }] + ] + }, + { + test: './src/production/**/*.{js,jsx,ts,tsx}', + plugins: [ + ['babel-plugin-react-compiler', { + // options ... + }] + ] + } + ] +}; +``` + + +## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/} + +For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive. + +<Note> +This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories. +</Note> + +### Annotation Mode Configuration {/*annotation-mode-configuration*/} + +```js +// babel.config.js +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + compilationMode: 'annotation', + }], + ], +}; +``` + +### Using the Directive {/*using-the-directive*/} + +Add `"use memo"` at the beginning of functions you want to compile: + +```js +function TodoList({ todos }) { + "use memo"; // Opt this component into compilation + + const sortedTodos = todos.slice().sort(); + + return ( + <ul> + {sortedTodos.map(todo => ( + <TodoItem key={todo.id} todo={todo} /> + ))} + </ul> + ); +} + +function useSortedData(data) { + "use memo"; // Opt this hook into compilation + + return data.slice().sort(); +} +``` + +With `compilationMode: 'annotation'`, you must: +- Add `"use memo"` to every component you want optimized +- Add `"use memo"` to every custom hook +- Remember to add it to new components + +This gives you precise control over which components are compiled while you evaluate the compiler's impact. + +## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/} + +The `gating` option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments. + +### How Gating Works {/*how-gating-works*/} + +The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs. + +### Gating Configuration {/*gating-configuration*/} + +```js +// babel.config.js +module.exports = { + plugins: [ + ['babel-plugin-react-compiler', { + gating: { + source: 'ReactCompilerFeatureFlags', + importSpecifierName: 'isCompilerEnabled', + }, + }], + ], +}; +``` + +### Implementing the Feature Flag {/*implementing-the-feature-flag*/} + +Create a module that exports your gating function: + +```js +// ReactCompilerFeatureFlags.js +export function isCompilerEnabled() { + // Use your feature flag system + return getFeatureFlag('react-compiler-enabled'); +} +``` + +## Troubleshooting Adoption {/*troubleshooting-adoption*/} + +If you encounter issues during adoption: + +1. Use `"use no memo"` to temporarily exclude problematic components +2. Check the [debugging guide](/learn/react-compiler/debugging) for common issues +3. Fix Rules of React violations identified by the ESLint plugin +4. Consider using `compilationMode: 'annotation'` for more gradual adoption + +## Next Steps {/*next-steps*/} + +- Read the [configuration guide](/reference/react-compiler/configuration) for more options +- Learn about [debugging techniques](/learn/react-compiler/debugging) +- Check the [API reference](/reference/react-compiler/configuration) for all compiler options \ No newline at end of file diff --git a/src/content/learn/react-compiler/index.md b/src/content/learn/react-compiler/index.md new file mode 100644 index 000000000..480187ed5 --- /dev/null +++ b/src/content/learn/react-compiler/index.md @@ -0,0 +1,33 @@ +--- +title: React Compiler +--- + +## Introduction {/*introduction*/} + +Learn [what React Compiler does](/learn/react-compiler/introduction) and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`. + +## Installation {/*installation*/} + +Get started with [installing React Compiler](/learn/react-compiler/installation) and learn how to configure it with your build tools. + + +## Incremental Adoption {/*incremental-adoption*/} + +Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet. + +## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/} + +When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow. + +## Configuration and Reference {/*configuration-and-reference*/} + +For detailed configuration options and API reference: + +- [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility +- [Directives](/reference/react-compiler/directives) - Function-level compilation control +- [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries + +## Additional resources {/*additional-resources*/} + +In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. + diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md new file mode 100644 index 000000000..6cce34c6b --- /dev/null +++ b/src/content/learn/react-compiler/installation.md @@ -0,0 +1,245 @@ +--- +title: Installation +--- + +<Intro> +This guide will help you install and configure React Compiler in your React application. +</Intro> + +<YouWillLearn> + +* How to install React Compiler +* Basic configuration for different build tools +* How to verify your setup is working + +</YouWillLearn> + +## Prerequisites {/*prerequisites*/} + +React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target). + +## Installation {/*installation*/} + +Install React Compiler as a `devDependency`: + +<TerminalBlock> +npm install -D babel-plugin-react-compiler@latest +</TerminalBlock> + +Or with Yarn: + +<TerminalBlock> +yarn add -D babel-plugin-react-compiler@latest +</TerminalBlock> + +Or with pnpm: + +<TerminalBlock> +pnpm install -D babel-plugin-react-compiler@latest +</TerminalBlock> + +## Basic Setup {/*basic-setup*/} + +React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration). + +The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline. + +<Pitfall> +React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations. +</Pitfall> + +### Babel {/*babel*/} + +Create or update your `babel.config.js`: + +```js {3} +module.exports = { + plugins: [ + 'babel-plugin-react-compiler', // must run first! + // ... other plugins + ], + // ... other config +}; +``` + +### Vite {/*vite*/} + +If you use Vite, you can add the plugin to vite-plugin-react: + +```js {3,9} +// vite.config.js +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [ + react({ + babel: { + plugins: ['babel-plugin-react-compiler'], + }, + }), + ], +}); +``` + +Alternatively, if you prefer a separate Babel plugin for Vite: + +<TerminalBlock> +npm install -D vite-plugin-babel +</TerminalBlock> + +```js {2,11} +// vite.config.js +import babel from 'vite-plugin-babel'; +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [ + react(), + babel({ + babelConfig: { + plugins: ['babel-plugin-react-compiler'], + }, + }), + ], +}); +``` + +### Next.js {/*usage-with-nextjs*/} + +Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information. + +### React Router {/*usage-with-react-router*/} +Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: + +<TerminalBlock> +npm install vite-plugin-babel +</TerminalBlock> + +```js {3-4,16} +// vite.config.js +import { defineConfig } from "vite"; +import babel from "vite-plugin-babel"; +import { reactRouter } from "@react-router/dev/vite"; + +const ReactCompilerConfig = { /* ... */ }; + +export default defineConfig({ + plugins: [ + reactRouter(), + babel({ + filter: /\.[jt]sx?$/, + babelConfig: { + presets: ["@babel/preset-typescript"], // if you use TypeScript + plugins: [ + ["babel-plugin-react-compiler", ReactCompilerConfig], + ], + }, + }), + ], +}); +``` + +### Webpack {/*usage-with-webpack*/} + +A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack). + +### Expo {/*usage-with-expo*/} + +Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps. + +### Metro (React Native) {/*usage-with-react-native-metro*/} + +React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions. + +### Rspack {/*usage-with-rspack*/} + +Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps. + +### Rsbuild {/*usage-with-rsbuild*/} + +Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps. + + +## ESLint Integration {/*eslint-integration*/} + +React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components. + +Install the ESLint plugin: + +<TerminalBlock> +npm install -D eslint-plugin-react-hooks@latest +</TerminalBlock> + +If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset. + +The ESLint rule will: +- Identify violations of the [Rules of React](/reference/rules) +- Show which components can't be optimized +- Provide helpful error messages for fixing issues + +## Verify Your Setup {/*verify-your-setup*/} + +After installation, verify that React Compiler is working correctly. + +### Check React DevTools {/*check-react-devtools*/} + +Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools: + +1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension +2. Open your app in development mode +3. Open React DevTools +4. Look for the ✨ emoji next to component names + +If the compiler is working: +- Components will show a "Memo ✨" badge in React DevTools +- Expensive calculations will be automatically memoized +- No manual `useMemo` is required + +### Check Build Output {/*check-build-output*/} + +You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically. + +```js +import { c as _c } from "react/compiler-runtime"; +export default function MyApp() { + const $ = _c(1); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = <div>Hello World</div>; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + +``` + +## Troubleshooting {/*troubleshooting*/} + +### Opting out specific components {/*opting-out-specific-components*/} + +If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive: + +```js +function ProblematicComponent() { + "use no memo"; + // Component code here +} +``` + +This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved. + +For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging). + +## Next Steps {/*next-steps*/} + +Now that you have React Compiler installed, learn more about: + +- [React version compatibility](/reference/react-compiler/target) for React 17 and 18 +- [Configuration options](/reference/react-compiler/configuration) to customize the compiler +- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases +- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues +- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md new file mode 100644 index 000000000..ff5d6eae4 --- /dev/null +++ b/src/content/learn/react-compiler/introduction.md @@ -0,0 +1,191 @@ +--- +title: Introduction +--- + +<Intro> +React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. +</Intro> + +<YouWillLearn> + +* What React Compiler does +* Getting started with the compiler +* Incremental adoption strategies +* Debugging and troubleshooting when things go wrong +* Using the compiler on your React library + +</YouWillLearn> + +## What does React Compiler do? {/*what-does-react-compiler-do*/} + +React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features. + +### Before React Compiler {/*before-react-compiler*/} + +Without the compiler, you need to manually memoize components and values to optimize re-renders: + +```js +import { useMemo, useCallback, memo } from 'react'; + +const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { + const processedData = useMemo(() => { + return expensiveProcessing(data); + }, [data]); + + const handleClick = useCallback((item) => { + onClick(item.id); + }, [onClick]); + + return ( + <div> + {processedData.map(item => ( + <Item key={item.id} onClick={() => handleClick(item)} /> + ))} + </div> + ); +}); +``` + + +<Note> + +This manual memoization has a subtle bug that breaks memoization: + +```js [[2, 1, "() => handleClick(item)"]] +<Item key={item.id} onClick={() => handleClick(item)} /> +``` + +Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization. + +React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes. + +</Note> + +### After React Compiler {/*after-react-compiler*/} + +With React Compiler, you write the same code without manual memoization: + +```js +function ExpensiveComponent({ data, onClick }) { + const processedData = expensiveProcessing(data); + + const handleClick = (item) => { + onClick(item.id); + }; + + return ( + <div> + {processedData.map(item => ( + <Item key={item.id} onClick={() => handleClick(item)} /> + ))} + </div> + ); +} +``` + +_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_ + +React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary. + +<DeepDive> +#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/} + +React Compiler's automatic memoization is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases: + +1. **Skipping cascading re-rendering of components** + * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed +1. **Skipping expensive calculations from outside of React** + * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data + +#### Optimizing Re-renders {/*optimizing-re-renders*/} + +React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ β€” unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes: + +```javascript +function FriendList({ friends }) { + const onlineCount = useFriendOnlineCount(); + if (friends.length === 0) { + return <NoFriends />; + } + return ( + <div> + <span>{onlineCount} online</span> + {friends.map((friend) => ( + <FriendListCard key={friend.id} friend={friend} /> + ))} + <MessageButton /> + </div> + ); +} +``` +[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA) + +React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes. + +#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/} + +React Compiler can also automatically memoize expensive calculations used during rendering: + +```js +// **Not** memoized by React Compiler, since this is not a component or hook +function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ } + +// Memoized by React Compiler since this is a component +function TableContainer({ items }) { + // This function call would be memoized: + const data = expensivelyProcessAReallyLargeArrayOfObjects(items); + // ... +} +``` +[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA) + +However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because: + +- React Compiler only memoizes React components and hooks, not every function +- React Compiler's memoization is not shared across multiple components or hooks + +So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated. +</DeepDive> + +## Should I try out the compiler? {/*should-i-try-out-the-compiler*/} + +We encourage everyone to start using React Compiler. While the compiler is still an optional addition to React today, in the future some features may require the compiler in order to fully work. + +### Is it safe to use? {/*is-it-safe-to-use*/} + +React Compiler is now stable and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). + +## What build tools are supported? {/*what-build-tools-are-supported*/} + +React Compiler can be installed across [several build tools](/learn/react-compiler/installation) such as Babel, Vite, Metro, and Rsbuild. + +React Compiler is primarily a light Babel plugin wrapper around the core compiler, which was designed to be decoupled from Babel itself. While the initial stable version of the compiler will remain primarily a Babel plugin, we are working with the swc and [oxc](https://github.com/oxc-project/oxc/issues/10048) teams to build first class support for React Compiler so you won't have to add Babel back to your build pipelines in the future. + +Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) and up. + +## 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. + +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. + +## Try React Compiler {/*try-react-compiler*/} + +This section will help you get started with React Compiler and understand how to use it effectively in your projects. + +* **[Installation](/learn/react-compiler/installation)** - Install React Compiler and configure it for your build tools +* **[React Version Compatibility](/reference/react-compiler/target)** - Support for React 17, 18, and 19 +* **[Configuration](/reference/react-compiler/configuration)** - Customize the compiler for your specific needs +* **[Incremental Adoption](/learn/react-compiler/incremental-adoption)** - Strategies for gradually rolling out the compiler in existing codebases +* **[Debugging and Troubleshooting](/learn/react-compiler/debugging)** - Identify and fix issues when using the compiler +* **[Compiling Libraries](/reference/react-compiler/compiling-libraries)** - Best practices for shipping compiled code +* **[API Reference](/reference/react-compiler/configuration)** - Detailed documentation of all configuration options + +## Additional resources {/*additional-resources*/} + +In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. + diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md index bf0d7be23..fb6fdfd97 100644 --- a/src/content/learn/reacting-to-input-with-state.md +++ b/src/content/learn/reacting-to-input-with-state.md @@ -517,8 +517,13 @@ export default function Picture() { <div className="background background--active"> <img className="picture" +<<<<<<< HEAD alt="Casas de arcoiris en Kampung Pelangi, Indonesia" src="https://i.imgur.com/5qwVYb1.jpeg" +======= + alt="Rainbow houses in Kampung Pelangi, Indonesia" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </div> ); @@ -593,8 +598,13 @@ export default function Picture() { setIsActive(true); }} className={pictureClassName} +<<<<<<< HEAD alt="Casas de arcoiris en Kampung Pelangi, Indonesia" src="https://i.imgur.com/5qwVYb1.jpeg" +======= + alt="Rainbow houses in Kampung Pelangi, Indonesia" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> </div> ); @@ -648,8 +658,13 @@ export default function Picture() { > <img className="picture picture--active" +<<<<<<< HEAD alt="Casas de arcoiris en Kampung Pelangi, Indonesia" src="https://i.imgur.com/5qwVYb1.jpeg" +======= + alt="Rainbow houses in Kampung Pelangi, Indonesia" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a onClick={e => e.stopPropagation()} /> </div> @@ -659,8 +674,13 @@ export default function Picture() { <div className="background background--active"> <img className="picture" +<<<<<<< HEAD alt="Casas de arcoiris en Kampung Pelangi, Indonesia" src="https://i.imgur.com/5qwVYb1.jpeg" +======= + alt="Rainbow houses in Kampung Pelangi, Indonesia" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a onClick={() => setIsActive(true)} /> </div> diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 1c693b394..15afab2d4 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -34,8 +34,13 @@ const ref = useRef(0); `useRef` devuelve un objeto como este: ```js +<<<<<<< HEAD { current: 0 // El valor que le pasaste a useRef +======= +{ + current: 0 // The value you passed to useRef +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } ``` @@ -211,7 +216,7 @@ Si intentaras implementarlo con una ref, React nunca rerenderizarΓ­a el componen <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [13]}} import { useRef } from 'react'; export default function Counter() { @@ -313,7 +318,7 @@ Variables comunes como `let timeoutID` no "sobreviven" entre rerenderizados porq <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [10]}} import { useState } from 'react'; export default function Chat() { @@ -418,7 +423,7 @@ Este botΓ³n se supone que alterna entre mostrar "Encendido" y "Apagado". Sin emb <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [10]}} import { useRef } from 'react'; export default function Toggle() { @@ -464,7 +469,11 @@ export default function Toggle() { #### Arregla el _debounce_ {/*fix-debouncing*/} +<<<<<<< HEAD En este ejemplo, todos los controladores de clic usan [el "corte de rebote" o _"debounce"_.](https://redd.one/blog/debounce-vs-throttle) Para ver que significa esto, presiona uno de los botones. FΓ­jate como el mensaje aparece un segundo despuΓ©s. Si presionas el botΓ³n mientras esperas el mensaje, el temporizador se reiniciarΓ‘. AsΓ­ que si te mantienes cliqueando el mismo botΓ³n rΓ‘pidamente muchas veces, el mensaje no aparecerΓ‘ hasta un segundo *despuΓ©s* de que pares de hacer clic. El _debounce_ te permite retrasar algunas acciones hasta que el usuario "pare de hacer cosas". +======= +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 Este ejemplo funciona, pero no tan bien como se esperaba. Los botones no son independientes. Para ver el problema, haz clic en uno de los botones, y luego inmediatamente haz clic en otro botΓ³n. EsperarΓ­as que despuΓ©s de un retraso, podrΓ­as ver los mensajes de ambos botones. Pero solo se muestra el mensaje del ΓΊltimo botΓ³n. El mensaje del primer botΓ³n se pierde. diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 708d8f55f..2948ff0e5 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -301,7 +301,7 @@ Suprimir la advertencia del *linter* conduce a errores muy poco intuitivos que s <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [14]}} import { useState, useEffect } from 'react'; export default function Timer() { @@ -409,7 +409,7 @@ function Form() { function handleSubmit() { setSubmitted(true); - } + } // ... } @@ -427,7 +427,7 @@ function Form() { // βœ… Bien: LΓ³gica especΓ­fica de Evento se llama desde controladores de eventos post('/api/register'); showNotification('Successfully registered!', theme); - } + } // ... } @@ -607,6 +607,7 @@ function ChatRoom({ roomId }) { ### ΒΏQuieres leer un valor sin "reaccionar" as sus cambios? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/} +<<<<<<< HEAD <Wip> Esta secciΓ³n describe una **API experimental que aΓΊn no se ha aΓ±adido a React**, por lo que aΓΊn no puedes usarla. @@ -614,6 +615,9 @@ Esta secciΓ³n describe una **API experimental que aΓΊn no se ha aΓ±adido a React </Wip> SupΓ³n que quieres poner un sonido cuando el usuario recibe un nuevo mensaje a menos que `isMuted` sea `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 }) { @@ -792,7 +796,7 @@ Este objeto se declara en el cuerpo del componente, por lo que es un [valor reac <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [10]}} import { useState, useEffect } from 'react'; import { createConnection } from './chat.js'; @@ -882,7 +886,11 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'mΓΊsica' }; console.log(Object.is(options1, options2)); // falso ``` +<<<<<<< HEAD **Objetos y funciones como dependencias crean un riesgo de que tu Efecto se resincronice mΓ‘s a menudo de lo que necesitas.** +======= +**Object and function dependencies can make your Effect re-synchronize more often than you need.** +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Es por esto que, siempre que sea posible, debes intentar evitar objetos y funciones como dependencias de los Efectos. En su lugar, intenta moverlos fuera del componente, o dentro del Efecto, o extraer valores primitivos fuera de ellos. @@ -1239,7 +1247,11 @@ export default function Timer() { </Sandpack> +<<<<<<< HEAD En lugar de leer `count` dentro del Efecto, pasas a React una instrucciΓ³n `c => c + 1` ("Β‘incrementa este nΓΊmero!"). React la aplicarΓ‘ en el prΓ³ximo renderizado. Y dado que ya no tienes que leer el valor de `count` dentro de tu Efecto, puedes mantener vacΓ­o (`[]`) el *array* de dependencias de tu Efecto. AsΓ­ se evita que tu Efecto recree el intervalo en cada tic. +======= +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 </Solution> @@ -1257,25 +1269,9 @@ Este cΓ³digo ya funciona, pero hay algo que quieres cambiar. Actualmente, cuando <Sandpack> -```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 }) { @@ -1384,26 +1380,10 @@ Tu Efecto necesita leer el ΓΊltimo valor de `duration`, pero no quieres que "rea <Sandpack> -```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); @@ -1823,8 +1803,8 @@ La otra funciΓ³n solo existe para pasar algΓΊn estado a un mΓ©todo de una API im ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1905,7 +1885,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(() => { @@ -2118,8 +2098,8 @@ As a result, the chat re-connects only when something meaningful (`roomId` or `i ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -2187,7 +2167,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 70bc6d316..ba2d1cd6f 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -54,8 +54,13 @@ root.render(<Image />); export default function Image() { return ( <img +<<<<<<< HEAD src="https://i.imgur.com/ZF6s192.jpg" alt="'Floralis GenΓ©rica' de Eduardo Catalano: una gigantesca escultura floral metΓ‘lica con pΓ©talos reflectantes" +======= + src="https://react.dev/images/docs/scientists/ZF6s192.jpg" + alt="'Floralis GenΓ©rica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> ); } @@ -103,8 +108,13 @@ export default function Gallery() { function Image() { return ( <img +<<<<<<< HEAD src="https://i.imgur.com/ZF6s192.jpg" alt="'Floralis GenΓ©rica' de Eduardo Catalano: una gigantesca escultura floral metΓ‘lica con pΓ©talos reflectantes" +======= + src="https://react.dev/images/docs/scientists/ZF6s192.jpg" + alt="'Floralis GenΓ©rica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> ); } @@ -124,8 +134,13 @@ img { margin: 0 10px 10px 0; } </Sandpack> +<<<<<<< HEAD * **Durante el renderizado inicial,** React [crearΓ‘ los nodos del DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) para `<section>`, `<h1>`, y tres etiquetas `<img>`. * **Durante un rerenderizado,** React calcularΓ‘ cuΓ‘les de sus propiedades, si es que hay alguna, han cambiado desde el renderizado anterior. No harΓ‘ nada con esa informaciΓ³n hasta el siguiente paso, la fase de confirmaciΓ³n. +======= +* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` 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 <Pitfall> diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index cea4b5895..cf17cea5d 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -115,7 +115,11 @@ const people = [{ }, { id: 3, name: 'Percy Lavon Julian', +<<<<<<< HEAD profession: 'quΓ­mico', +======= + profession: 'chemist', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { id: 4, name: 'Subrahmanyan Chandrasekhar', @@ -223,7 +227,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' ); @@ -232,9 +236,9 @@ export function getImageUrl(person) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; @@ -353,7 +357,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' ); @@ -362,9 +366,9 @@ export function getImageUrl(person) { ```css ul { list-style-type: none; padding: 0px 10px; } -li { - margin-bottom: 10px; - display: grid; +li { + margin-bottom: 10px; + display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; @@ -514,7 +518,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' ); @@ -629,7 +633,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' ); @@ -743,7 +747,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' ); @@ -861,7 +865,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 9b30735f1..8befd6e3b 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -169,7 +169,11 @@ Esto le permite a estos dos botones mostrar diferentes mensajes. Intenta cambiar ### Pasar controladores de eventos como props {/*passing-event-handlers-as-props*/} +<<<<<<< HEAD A menudo querrΓ‘s que el componente padre especifique un controlador de evento de un componente hijo. Considera unos botones: dependiendo de dΓ³nde estΓ‘s usando un componente `Button`, es posible que quieras ejecutar una funciΓ³n diferente, tal vez una reproduzca una pelΓ­cula y otra cargue una imagen. +======= +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 Para hacer esto, pasa una prop que el componente recibe de su padre como el controlador de evento asΓ­: @@ -312,12 +316,21 @@ button { margin-right: 10px; } </Sandpack> +<<<<<<< HEAD FΓ­jate como el componente `App` no necesita saber *quΓ©* harΓ‘ `Toolbar` con `onPlayMovie` o `onUploadImage`. Eso es un detalle de implementaciΓ³n del `Toolbar`. AquΓ­, `Toolbar` los pasa como controladores `onClick` en sus `Button`s, pero podrΓ­a luego iniciarlos con un atajo de teclado. Nombrar props a partir de interacciones especΓ­ficas de la aplicaciΓ³n como `onPlayMovie` te da la flexibilidad de cambiar cΓ³mo se usan mΓ‘s tarde. <Note> AsegΓΊrate de usar las etiquetas HTML apropiadas para tus controladores de eventos. Por ejemplo, para controlar clics, utiliza [`<button onClick={handleClick}>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/button) en lugar de `<div onClick={handleClick}>`. Al utilizar un botΓ³n (`<button>`) real del navegador se habilitan comportamientos integrados del navegador como la navegaciΓ³n por teclado. Si no te gustan los estilos predeterminados del navegador de un botΓ³n y quieres que se parezca mΓ‘s a un enlace u otro elemento diferente de UI, puedes lograrlo con CSS. [Aprende mΓ‘s sobre cΓ³mo escribir cΓ³digo de marcado accesible.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) +======= +Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later. + +<Note> + +Make sure that you use the appropriate HTML tags for your event handlers. For example, to handle clicks, use [`<button onClick={handleClick}>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) instead of `<div onClick={handleClick}>`. Using a real browser `<button>` enables built-in browser behaviors like keyboard navigation. If you don't like the default browser styling of a button and want to make it look more like a link or a different UI element, you can achieve it with CSS. [Learn more about writing accessible markup.](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> ## PropagaciΓ³n de eventos {/*event-propagation*/} @@ -411,12 +424,21 @@ button { margin: 5px; } Cuando haces clic en un botΓ³n: +<<<<<<< HEAD 1. React llama al controlador `onClick` pasado al `<button>`. 2. Ese controlador, definido en `Button`, hace lo siguiente: * Llama `e.stopPropagation()`, que evita que el evento se expanda aΓΊn mΓ‘s. * Llama a la funciΓ³n `onClick`, la cual es una prop pasada desde el componente `Toolbar`. 3. Esa funciΓ³n, definida en el componente `Toolbar`, muestra la alerta propia del botΓ³n. 4. Como la propagaciΓ³n fue detenida, el controlador `onClick` del `<div>` padre no se ejecuta. +======= +1. React calls the `onClick` handler passed to `<button>`. +2. That handler, defined in `Button`, does the following: + * Calls `e.stopPropagation()`, preventing the event from bubbling further. + * Calls the `onClick` function, which is a prop passed from the `Toolbar` component. +3. That function, defined in the `Toolbar` component, displays the button's own alert. +4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Como resultado del `e.stopPropagation()`, al hacer clic en los botones ahora solo muestra una alerta (la del `<button>`) en lugar de las dos (la del `<button>` y la del `<div>` del toolbar padre). Hacer clic en un botΓ³n no es lo mismo que hacer clic en el toolbar que lo rodea, asΓ­ que detener la propagaciΓ³n tiene sentido para esta interfaz. @@ -433,11 +455,19 @@ En raros casos, puede que necesites capturar todos los eventos en elementos hijo </div> ``` +<<<<<<< HEAD Cada evento se propaga en tres fases: 1. Viaja hacia abajo, llamando a todos los controladores `onClickCapture`. 2. Ejecuta el controlador `onClick` del elemento en que se hace clic. 3. Viaja hacia arriba, llamando a todos los controladores `onClick`. +======= +Each event propagates in three phases: + +1. It travels down, calling all `onClickCapture` handlers. +2. It runs the clicked element's `onClick` handler. +3. It travels upwards, calling all `onClick` handlers. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Los eventos de captura son ΓΊtiles para cΓ³digo como enrutadores o para analΓ­tica, pero probablemente no lo usarΓ‘s en cΓ³digo de aplicaciones. @@ -546,7 +576,7 @@ Al hacer clic en este botΓ³n se supone que debe cambiar el fondo de la pΓ‘gina e <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [5, 7]}} export default function LightSwitch() { function handleClick() { let bodyStyle = document.body.style; diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index ad6f92564..a083b3a55 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -820,7 +820,11 @@ export default function ChatRoom({ roomId }) { // ... ``` +<<<<<<< HEAD y lo pasas como entrada a otro Hook: +======= +and passing it as an input to another Hook: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js {6} export default function ChatRoom({ roomId }) { @@ -837,6 +841,7 @@ Cada vez que tu componente `ChatRoom` se vuelve a renderizar, pasa el ΓΊltimo `r ### Pasar controladores de eventos a los Hooks personalizados {/*passing-event-handlers-to-custom-hooks*/} +<<<<<<< HEAD <Wip> Esta secciΓ³n describe una **API experimental que aΓΊn no se ha agregado a React,** por lo que aΓΊn no puedes usarla. @@ -844,6 +849,9 @@ Esta secciΓ³n describe una **API experimental que aΓΊn no se ha agregado a React </Wip> A medida que comiences a usar `useChatRoom` en mΓ‘s componentes, es posible que desees permitir diferentes componentes que personalicen su comportamiento. Por ejemplo, actualmente, la lΓ³gica de quΓ© hacer cuando llega un mensaje estΓ‘ escrita dentro del Hook: +======= +As you start using `useChatRoom` in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js {9-11} export function useChatRoom({ serverUrl, roomId }) { @@ -985,7 +993,7 @@ export default function ChatRoom({ roomId }) { ```js src/useChatRoom.js import { useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; import { createConnection } from './chat.js'; export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) { @@ -1070,8 +1078,8 @@ export function showNotification(message, theme = 'dark') { ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1419,10 +1427,36 @@ De manera similar a un [sistema de diseΓ±o,](https://uxdesign.cc/everything-you- #### ΒΏProporcionarΓ‘ React alguna soluciΓ³n integrada para la obtenciΓ³n de datos? {/*will-react-provide-any-built-in-solution-for-data-fetching*/} +<<<<<<< HEAD TodavΓ­a estamos trabajando en los detalles, pero esperamos que en el futuro escribas la obtenciΓ³n de datos de esta manera: ```js {1,4,6} import { use } from 'react'; // Β‘No disponible aΓΊn! +======= +Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`: + +```js {1,4,11} +import { use, Suspense } from "react"; + +function Message({ messagePromise }) { + const messageContent = use(messagePromise); + return <p>Here is the message: {messageContent}</p>; +} + +export function MessageContainer({ messagePromise }) { + return ( + <Suspense fallback={<p>βŒ›Downloading message...</p>}> + <Message messagePromise={messagePromise} /> + </Suspense> + ); +} +``` + +We're still working out the details, but we expect that in the future, you'll write data fetching like this: + +```js {1,4,6} +import { use } from 'react'; +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); @@ -1647,7 +1681,7 @@ export default function App() { ```js src/useFadeIn.js active import { useState, useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export function useFadeIn(ref, duration) { const [isRunning, setIsRunning] = useState(true); @@ -1697,22 +1731,6 @@ html, body { min-height: 300px; } } ``` -```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" - } -} -``` - </Sandpack> Sin embargo, no *tenΓ­as* que hacer eso. Al igual que con las funciones normales, en ΓΊltima instancia, decides dΓ³nde dibujar los lΓ­mites entre las diferentes partes de tu cΓ³digo. Por ejemplo, tambiΓ©n podrΓ­as adoptar un enfoque muy diferente. En lugar de mantener la lΓ³gica en el Efecto, podrΓ­as mover la mayor parte de la lΓ³gica imperativa dentro de una [clase de JavaScript:](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Classes) @@ -2081,7 +2099,6 @@ Escribe `useInterval` en el archivo `useInterval.js` e impΓ³rtalo en el archivo <Sandpack> ```js -import { useState } from 'react'; import { useCounter } from './useCounter.js'; export default function Counter() { @@ -2187,22 +2204,6 @@ Parece que tu Hook `useInterval` acepta un controlador de evento como un argumen <Sandpack> -```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 { useCounter } from './useCounter.js'; import { useInterval } from './useInterval.js'; @@ -2234,7 +2235,7 @@ export function useCounter(delay) { ```js src/useInterval.js import { useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export function useInterval(onTick, delay) { useEffect(() => { @@ -2258,22 +2259,6 @@ Con este cambio, ambos intervalos funcionan como se esperaba y no interfieren en <Sandpack> -```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 { useCounter } from './useCounter.js'; @@ -2306,7 +2291,7 @@ export function useCounter(delay) { ```js src/useInterval.js active import { useEffect } from 'react'; -import { experimental_useEffectEvent as useEffectEvent } from 'react'; +import { useEffectEvent } from 'react'; export function useInterval(callback, delay) { const onTick = useEffectEvent(callback); diff --git a/src/content/learn/rsc-sandbox-test.md b/src/content/learn/rsc-sandbox-test.md new file mode 100644 index 000000000..f914ea4ae --- /dev/null +++ b/src/content/learn/rsc-sandbox-test.md @@ -0,0 +1,575 @@ +--- +title: RSC Sandbox Test +--- + +## Basic Server Component {/*basic-server-component*/} + +<SandpackRSC> + +```js src/App.js +export default function App() { + return <h1>Hello from a Server Component!</h1>; +} +``` + +</SandpackRSC> + +## Server + Client Components {/*server-client*/} + +<SandpackRSC> + +```js src/App.js +import Counter from './Counter'; + +export default function App() { + return ( + <div> + <h1>Server Component</h1> + <p>This text is rendered on the server.</p> + <Counter /> + </div> + ); +} +``` + +```js src/Counter.js +'use client'; +import { useState } from 'react'; + +export default function Counter() { + const [count, setCount] = useState(0); + return ( + <button onClick={() => setCount(count + 1)}> + Count: {count} + </button> + ); +} +``` + +</SandpackRSC> + +## Async Server Component with Suspense {/*async-suspense*/} + +<SandpackRSC> + +```js src/App.js +import { Suspense } from 'react'; +import Albums from './Albums'; + +export default function App() { + return ( + <div> + <h1>Music</h1> + <Suspense fallback={<p>Loading albums...</p>}> + <Albums /> + </Suspense> + </div> + ); +} +``` + +```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 ( + <ul> + {albums.map(album => ( + <li key={album}>{album}</li> + ))} + </ul> + ); +} +``` + +</SandpackRSC> + +## Streaming Proof {/*streaming-proof*/} + +This demo proves streaming is incremental. The shell renders instantly with a `<Suspense>` fallback. After 2 seconds the async component streams in and replaces it β€” without re-rendering the outer content. The timestamps show the gap. + +<SandpackRSC> + +```js src/App.js +import { Suspense } from 'react'; +import SlowData from './SlowData'; +import Timestamp from './Timestamp'; + +export default function App() { + return ( + <div> + <h1>Streaming Proof</h1> + <p>Shell rendered at: <Timestamp /></p> + <Suspense fallback={<p>⏳ Waiting for data to stream in...</p>}> + <SlowData /> + </Suspense> + </div> + ); +} +``` + +```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 ( + <div> + <p>Data streamed in at: <Timestamp /></p> + <ul> + {items.map(item => ( + <li key={item}>{item}</li> + ))} + </ul> + </div> + ); +} +``` + +```js src/Timestamp.js +'use client'; + +export default function Timestamp() { + return <strong>{new Date().toLocaleTimeString()}</strong>; +} +``` + +</SandpackRSC> + +## 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. + +<SandpackRSC> + +```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 ( + <div> + <h1>Flight Data Types</h1> + <DataViewer map={map} set={set} date={date} big={big} /> + </div> + ); +} +``` + +```js src/DataViewer.js +'use client'; + +export default function DataViewer({ map, set, date, big }) { + const checks = [ + ['Map', map instanceof Map, () => ( + <ul>{[...map.entries()].map(([k, v]) => <li key={k}>{k}: {v}</li>)}</ul> + )], + ['Set', set instanceof Set, () => ( + <ul>{[...set].map(v => <li key={v}>{v}</li>)}</ul> + )], + ['Date', date instanceof Date, () => ( + <p>{date.toISOString()}</p> + )], + ['BigInt', typeof big === 'bigint', () => ( + <p>{big.toString()}</p> + )], + ]; + + return ( + <div> + {checks.map(([label, passed, render]) => ( + <div key={label} style={{ marginBottom: 12 }}> + <strong>{label}: {passed ? 'pass' : 'FAIL'}</strong> + {render()} + </div> + ))} + </div> + ); +} +``` + +</SandpackRSC> + +## 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). + +<SandpackRSC> + +```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 ( + <div> + <h1>Promise Streaming</h1> + <p>Promise resolves in 2s. Parent suspends for 3s.</p> + <Suspense fallback={<p>Outer: waiting for parent (3s)...</p>}> + <SlowParent> + <Suspense fallback={<p>Inner: waiting for data (should not appear!)</p>}> + <UserCard userPromise={userPromise} serverTime={serverTime} /> + </Suspense> + </SlowParent> + </Suspense> + </div> + ); +} +``` + +```js src/SlowParent.js +export default async function SlowParent({ children }) { + await new Promise(resolve => setTimeout(resolve, 3000)); + return <div>{children}</div>; +} +``` + +```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 ( + <div style={{ + border: '1px solid #ccc', + borderRadius: 8, + padding: 16, + }}> + <strong>{user.name}</strong> + <p>{user.role}</p> + <p style={{ fontSize: 13 }}> + Rendered {elapsed}ms after server created the promise. + </p> + <p style={{ color: '#666', fontSize: 12 }}> + ~3000ms = promise already resolved, waited only for parent. + ~5000ms would mean the promise restarted on the client. + </p> + </div> + ); +} +``` + +</SandpackRSC> + +## 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. + +<SandpackRSC> + +```js src/App.js +import { testTypes, getResults } from './actions'; +import TestButton from './TestButton'; + +export default async function App() { + const results = await getResults(); + return ( + <div> + <h1>Flight Types in Server Actions</h1> + <TestButton testTypes={testTypes} /> + {results ? ( + <div> + {results.map(r => ( + <div key={r.label} style={{ marginBottom: 12 }}> + <strong>{r.label}: {r.ok ? 'pass' : 'FAIL'}</strong> + <p>{r.detail}</p> + </div> + ))} + </div> + ) : ( + <p>Click the button to send typed data to the server action.</p> + )} + </div> + ); +} +``` + +```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 ( + <button onClick={handleClick} disabled={pending}> + {pending ? 'Sending...' : 'Send typed data to server'} + </button> + ); +} +``` + +</SandpackRSC> + +## 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. + +<SandpackRSC> + +```js src/App.js +import { getTodos } from './db'; +import { createTodo } from './actions'; +import AddTodo from './AddTodo'; + +export default function App() { + const todos = getTodos(); + return ( + <div> + <h1>Todo List</h1> + <p style={{ color: '#666', fontSize: 13 }}> + This list is rendered by a server component + reading server-side data. It only updates because + the server re-renders after each action. + </p> + <ul> + {todos.map((todo, i) => ( + <li key={i}>{todo}</li> + ))} + </ul> + <AddTodo createTodo={createTodo} /> + </div> + ); +} +``` + +```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 ( + <div> + <form onSubmit={handleSubmit}> + <input + value={text} + onChange={e => setText(e.target.value)} + placeholder="New todo" + /> + <button disabled={pending}> + {pending ? 'Adding...' : 'Add'} + </button> + </form> + {message && ( + <p style={{ color: '#666', fontSize: 13 }}> + Action returned: "{message}" + </p> + )} + </div> + ); +} +``` + +</SandpackRSC> + +## 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. + +<SandpackRSC> + +```js src/App.js +import LikeButton from './LikeButton'; + +let count = 0; + +export default function App() { + async function addLike() { + 'use server'; + count++; + } + + return ( + <div> + <h1>Inline Server Actions</h1> + <p>Likes: {count}</p> + <LikeButton addLike={addLike} /> + </div> + ); +} +``` + +```js src/LikeButton.js +'use client'; + +export default function LikeButton({ addLike }) { + return ( + <form action={addLike}> + <button type="submit">Like</button> + </form> + ); +} +``` + +</SandpackRSC> + +## Server Functions {/*server-functions*/} + +<SandpackRSC> + +```js src/App.js +import { addLike, getLikeCount } from './actions'; +import LikeButton from './LikeButton'; + +export default async function App() { + const count = await getLikeCount(); + return ( + <div> + <h1>Server Functions</h1> + <p>Likes: {count}</p> + <LikeButton addLike={addLike} /> + </div> + ); +} +``` + +```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 ( + <form action={addLike}> + <button type="submit">Like</button> + </form> + ); +} +``` + +</SandpackRSC> \ 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 9a68e4704..c7813e4d6 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 ( - <TasksContext.Provider value={tasks}> - <TasksDispatchContext.Provider value={dispatch}> + <TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> ... - </TasksDispatchContext.Provider> - </TasksContext.Provider> + </TasksDispatchContext> + </TasksContext> ); } ``` @@ -509,9 +509,15 @@ export default function TaskApp() { } return ( +<<<<<<< HEAD <TasksContext.Provider value={tasks}> <TasksDispatchContext.Provider value={dispatch}> <h1>DΓ­a libre en Kyoto</h1> +======= + <TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> + <h1>Day off in Kyoto</h1> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <AddTask onAddTask={handleAddTask} /> @@ -520,8 +526,8 @@ export default function TaskApp() { onChangeTask={handleChangeTask} onDeleteTask={handleDeleteTask} /> - </TasksDispatchContext.Provider> - </TasksContext.Provider> + </TasksDispatchContext> + </TasksContext> ); } @@ -676,16 +682,26 @@ En el siguiente paso, se eliminarΓ‘ el paso de props. Ahora no es necesario pasar la lista de tareas o los controladores de eventos por el Γ‘rbol: ```js {4-5} +<<<<<<< HEAD <TasksContext.Provider value={tasks}> <TasksDispatchContext.Provider value={dispatch}> <h1>DΓ­a libre en Kyoto</h1> +======= +<TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> + <h1>Day off in Kyoto</h1> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <AddTask /> <TaskList /> - </TasksDispatchContext.Provider> -</TasksContext.Provider> + </TasksDispatchContext> +</TasksContext> ``` +<<<<<<< HEAD En cambio, cualquier componente que necesite la lista de tareas puede leerla del `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 <TasksContext.Provider value={tasks}> <TasksDispatchContext.Provider value={dispatch}> <h1>DΓ­a libre en Kyoto</h1> +======= + <TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> + <h1>Day off in Kyoto</h1> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <AddTask /> <TaskList /> - </TasksDispatchContext.Provider> - </TasksContext.Provider> + </TasksDispatchContext> + </TasksContext> ); } @@ -801,8 +823,13 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, +<<<<<<< HEAD }); }}>Agregar</button> +======= + }); + }}>Add</button> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </> ); } @@ -921,11 +948,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - <TasksContext.Provider value={tasks}> - <TasksDispatchContext.Provider value={dispatch}> + <TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> {children} - </TasksDispatchContext.Provider> - </TasksContext.Provider> + </TasksDispatchContext> + </TasksContext> ); } ``` @@ -963,11 +990,11 @@ export function TasksProvider({ children }) { ); return ( - <TasksContext.Provider value={tasks}> - <TasksDispatchContext.Provider value={dispatch}> + <TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> {children} - </TasksDispatchContext.Provider> - </TasksContext.Provider> + </TasksDispatchContext> + </TasksContext> ); } @@ -1025,8 +1052,13 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, +<<<<<<< HEAD }); }}>Agregar</button> +======= + }); + }}>Add</button> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </> ); } @@ -1174,11 +1206,11 @@ export function TasksProvider({ children }) { ); return ( - <TasksContext.Provider value={tasks}> - <TasksDispatchContext.Provider value={dispatch}> + <TasksContext value={tasks}> + <TasksDispatchContext value={dispatch}> {children} - </TasksDispatchContext.Provider> - </TasksContext.Provider> + </TasksDispatchContext> + </TasksContext> ); } @@ -1244,8 +1276,13 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, +<<<<<<< HEAD }); }}>Agregar</button> +======= + }); + }}>Add</button> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </> ); } @@ -1363,4 +1400,3 @@ A medida que tu aplicaciΓ³n crece, puedes tener muchos pares contexto-_reducer_ - Puedes tener muchos pares context-_reducer_ como este en tu aplicaciΓ³n. </Recap> - diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index 5df506f44..2cd75fe3d 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -400,6 +400,7 @@ Necesitas una forma de separar esta lΓ³gica no reactiva del Efecto reactivo que ### DeclaraciΓ³n de un Evento de Efecto {/*declaring-an-effect-event*/} +<<<<<<< HEAD <Wip> Esta secciΓ³n describe una API **experimental que aΓΊn no se ha publicado** en una versiΓ³n estable de React. @@ -407,6 +408,9 @@ Esta secciΓ³n describe una API **experimental que aΓΊn no se ha publicado** en u </Wip> Utiliza un Hook especial llamado [`useEffectEvent`](/reference/react/experimental_useEffectEvent) para extraer esta lΓ³gica no reactiva de su Efecto: +======= +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,16 +443,22 @@ function ChatRoom({ roomId, theme }) { // ... ``` +<<<<<<< HEAD Esto resuelve el problema. Ten en cuenta que has tenido que *eliminar* `onConnected` de la lista de dependencias de tu Efecto. **Los Eventos de Efecto no son reactivos y deben ser omitidos de las dependencias.** Verifica que el nuevo comportamiento funciona como esperas: +======= +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.** + +Verify that the new behavior works as you would expect: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <Sandpack> ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -463,7 +473,7 @@ Verifica que el nuevo comportamiento funciona como esperas: ```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'; @@ -573,10 +583,15 @@ label { display: block; margin-top: 10px; } </Sandpack> +<<<<<<< HEAD Puedes pensar que los Eventos de Efecto son muy similares a los controladores de eventos. La principal diferencia es que los controladores de eventos se ejecutan en respuesta a las interacciones del usuario, mientras que los Eventos de Efecto son disparados por ti desde los Efectos. Los Eventos de Efecto te permiten "romper la cadena" entre la reactividad de los Efectos y el cΓ³digo que no deberΓ­a ser reactivo. +======= +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 ### Leer las ΓΊltimas propiedades y el estado con los Eventos de Efecto {/*reading-latest-props-and-state-with-effect-events*/} +<<<<<<< HEAD <Wip> Esta secciΓ³n describe una API **experimental que aΓΊn no se ha publicado** en una versiΓ³n estable de React. @@ -584,6 +599,9 @@ Esta secciΓ³n describe una API **experimental que aΓΊn no se ha publicado** en u </Wip> Los Eventos de Efecto le permiten arreglar muchos patrones en los que podrΓ­a verse tentado a eliminar el linter de dependencias. +======= +Effect Events let you fix many patterns where you might be tempted to suppress the dependency linter. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Por ejemplo, digamos que tienes un Efecto para registrar las visitas a la pΓ‘gina: @@ -710,7 +728,7 @@ AquΓ­, `url` dentro de `onVisit` corresponde a la *ΓΊltima* `url` (que podrΓ­a h En las bases de cΓ³digo existentes, a veces puede ver la regla lint suprimida de esta manera: -```js {7-9} +```js {expectedErrors: {'react-compiler': [8]}} {7-9} function Page({ url }) { const { items } = useContext(ShoppingCartContext); const numberOfItems = items.length; @@ -724,7 +742,11 @@ function Page({ url }) { } ``` +<<<<<<< HEAD DespuΓ©s de que `useEffectEvent` se convierta en una parte estable de React, recomendamos **nunca suprimir el linter**. +======= +We recommend **never suppressing the linter**. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a La primera desventaja de suprimir la regla es que React ya no te avisarΓ‘ cuando tu Efecto necesite "reaccionar" a una nueva dependencia reactiva que hayas introducido en tu cΓ³digo. En el ejemplo anterior, aΓ±adiste `url` a las dependencias *porque* React te lo recordΓ³. Si desactivas el linter, ya no recibirΓ‘s esos recordatorios para futuras ediciones de ese Efecto. Esto conduce a errores. @@ -734,7 +756,7 @@ AquΓ­ hay un ejemplo de un error confuso causado por la supresiΓ³n del linter. E <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [16]}} import { useState, useEffect } from 'react'; export default function App() { @@ -799,25 +821,9 @@ Con `useEffectEvent`, no hay necesidad de "mentir" al linter, y el cΓ³digo funci <Sandpack> -```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 }); @@ -877,6 +883,7 @@ Leer [Eliminar dependencias de Efectos](/learn/removing-effect-dependencies) par ### Limitaciones de los Eventos de Efecto {/*limitations-of-effect-events*/} +<<<<<<< HEAD <Wip> Esta secciΓ³n describe una API **experimental que aΓΊn no se ha publicado** en una versiΓ³n estable de React. @@ -884,6 +891,9 @@ Esta secciΓ³n describe una API **experimental que aΓΊn no se ha publicado** en u </Wip> Los Eventos de Efecto tienen un uso muy limitado: +======= +Effect Events are very limited in how you can use them: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * **LlΓ‘malos solo desde dentro Efectos.** * **Nunca los pases a otros componentes o Hooks.** @@ -972,7 +982,7 @@ Para arreglar este cΓ³digo, basta con seguir las reglas. <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [14]}} import { useState, useEffect } from 'react'; export default function Timer() { @@ -1087,25 +1097,9 @@ Parece que el Efecto que configura el temporizador "reacciona" al valor de `incr <Sandpack> -```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); @@ -1156,25 +1150,9 @@ Para resolver el problema, extrae un Evento de Efecto `onTick` del Efecto: <Sandpack> -```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); @@ -1238,25 +1216,9 @@ El cΓ³digo dentro de los Eventos de Efecto no es reactivo. ΒΏHay casos en los qu <Sandpack> -```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); @@ -1325,25 +1287,9 @@ El problema con el ejemplo anterior es que extrajo un Evento de Efecto llamado ` <Sandpack> -```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); @@ -1424,8 +1370,8 @@ Tu Efecto sabe a quΓ© sala estΓ‘ conectado. ΒΏHay alguna informaciΓ³n que quiera ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1440,7 +1386,7 @@ Tu Efecto sabe a quΓ© sala estΓ‘ conectado. ΒΏHay alguna informaciΓ³n que quiera ```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'; @@ -1565,8 +1511,8 @@ Para solucionar el problema, en lugar de leer el *latest* `roomId` dentro del Ev ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1581,7 +1527,7 @@ Para solucionar el problema, en lugar de leer el *latest* `roomId` dentro del Ev ```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'; @@ -1702,8 +1648,8 @@ Para resolver el problema adicional, guarda el ID del tiempo de espera de la not ```json package.json hidden { "dependencies": { - "react": "experimental", - "react-dom": "experimental", + "react": "latest", + "react-dom": "latest", "react-scripts": "latest", "toastify-js": "1.12.0" }, @@ -1718,7 +1664,7 @@ Para resolver el problema adicional, guarda el ID del tiempo de espera de la not ```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/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 78a5c2da7..673f50c49 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -322,7 +322,11 @@ Para ver cΓ³mo se siente esto en la prΓ‘ctica con algunos componentes mΓ‘s, lee #### Entradas sincronizadas {/*synced-inputs*/} +<<<<<<< HEAD Estas dos entradas son independientes. Haz que se mantengan sincronizadas: la ediciΓ³n de una entrada deberΓ­a actualizar la otra con el mismo texto, y viceversa. +======= +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 <Hint> @@ -570,7 +574,7 @@ function SearchBar({ query, onChange }) { function List({ items }) { return ( <table> - <tbody> + <tbody> {items.map(food => ( <tr key={food.id}> <td>{food.name}</td> diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 9b545f01a..42f15ba3a 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -23,7 +23,7 @@ AquΓ­ hay un componente que renderiza una imagen de una escultura. Al hacer clic <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [7]}} import { sculptureList } from './data.js'; export default function Gallery() { @@ -40,14 +40,22 @@ export default function Gallery() { Siguiente </button> <h2> +<<<<<<< HEAD <i>{sculpture.name} </i> por {sculpture.artist} </h2> <h3> ({index + 1} de {sculptureList.length}) +======= + <i>{sculpture.name} </i> + by {sculpture.artist} + </h2> + <h3> + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </h3> - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> <p> @@ -62,18 +70,31 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -83,15 +104,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘i, o estatuas monumentales existentes, creadas por los primeros rapanui , que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -101,9 +140,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -113,15 +164,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -131,6 +200,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -220,14 +300,22 @@ export default function Gallery() { Siguiente </button> <h2> +<<<<<<< HEAD <i>{sculpture.name} </i> por {sculpture.artist} </h2> <h3> ({index + 1} de {sculptureList.length}) +======= + <i>{sculpture.name} </i> + by {sculpture.artist} + </h2> + <h3> + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </h3> - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> <p> @@ -242,18 +330,31 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -263,15 +364,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘i, o estatuas monumentales existentes, creadas por los primeros rapanui , que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -281,9 +400,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -293,15 +424,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -311,6 +460,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -361,7 +521,11 @@ En este caso, queremos que React recuerde el `index`. </Note> +<<<<<<< HEAD El ΓΊnico argumento para `useState` es el **valor inicial** de su variable de estado. En este ejemplo, el valor inicial de `index` se establece en `0` con `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 Cada vez que el componente se renderiza, el `useState` devuelve un *array* que contiene dos valores: @@ -408,18 +572,26 @@ export default function Gallery() { Siguiente </button> <h2> +<<<<<<< HEAD <i>{sculpture.name} </i> por {sculpture.artist} </h2> <h3> ({index + 1} de {sculptureList.length}) +======= + <i>{sculpture.name} </i> + by {sculpture.artist} + </h2> + <h3> + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </h3> <button onClick={handleMoreClick}> {showMore ? 'Ocultar' : 'Mostrar'} detalles </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -431,18 +603,31 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -452,15 +637,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘i, o estatuas monumentales existentes, creadas por los primeros rapanui , que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -470,9 +673,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -482,15 +697,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -500,6 +733,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -627,18 +871,31 @@ let image = document.getElementById('image'); export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -648,15 +905,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘i, o estatuas monumentales existentes, creadas por los primeros rapanui , que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -666,9 +941,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -678,15 +965,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -696,6 +1001,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; // Hacemos que la interfaz de usuario coincida con el estado inicial.. @@ -773,18 +1089,26 @@ export default function Gallery() { Siguiente </button> <h2> +<<<<<<< HEAD <i>{sculpture.name} </i> por {sculpture.artist} </h2> <h3> ({index + 1} de {sculptureList.length}) +======= + <i>{sculpture.name} </i> + by {sculpture.artist} + </h2> + <h3> + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </h3> <button onClick={handleMoreClick}> {showMore ? 'Ocultar' : 'Mostrar'} detalles </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </section> @@ -796,18 +1120,31 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -817,15 +1154,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘i, o estatuas monumentales existentes, creadas por los primeros rapanui , que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -835,9 +1190,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -847,15 +1214,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -865,6 +1250,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -944,18 +1340,26 @@ export default function Gallery() { Siguiente </button> <h2> +<<<<<<< HEAD <i>{sculpture.name} </i> por {sculpture.artist} </h2> <h3> ({index + 1} de {sculptureList.length}) +======= + <i>{sculpture.name} </i> + by {sculpture.artist} + </h2> + <h3> + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </h3> <button onClick={handleMoreClick}> {showMore ? 'Ocultar' : 'Mostrar'} detalles </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -967,18 +1371,31 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -988,15 +1405,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘i, o estatuas monumentales existentes, creadas por los primeros rapanui , que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -1006,9 +1441,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -1018,15 +1465,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -1036,6 +1501,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -1106,18 +1582,26 @@ export default function Gallery() { Siguiente </button> <h2> +<<<<<<< HEAD <i>{sculpture.name} </i> por {sculpture.artist} </h2> <h3> ({index + 1} de {sculptureList.length}) +======= + <i>{sculpture.name} </i> + by {sculpture.artist} + </h2> + <h3> + ({index + 1} of {sculptureList.length}) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </h3> <button onClick={handleMoreClick}> {showMore ? 'Ocultar' : 'Mostrar'} detalles </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -1129,18 +1613,31 @@ export default function Gallery() { export const sculptureList = [{ name: 'Homenaje a la neurocirugΓ­a', artist: 'Marta Colvin Andrade', +<<<<<<< HEAD description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a sΓ­mbolos prehispΓ‘nicos, esta gigantesca escultura, un homenaje a la neurocirugΓ­a, es una de sus obras de arte pΓΊblico mΓ‘s reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano en la punta de sus dedos.' +======= + description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + url: 'https://react.dev/images/docs/scientists/Mx7dA2Y.jpg', + alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Floralis genΓ©rica', artist: 'Eduardo Catalano', +<<<<<<< HEAD description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. EstΓ‘ diseΓ±ado para moverse, cerrando sus pΓ©talos por la tarde o cuando soplan fuertes vientos y abriΓ©ndolos por la maΓ±ana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'Una gigantesca escultura de flor metΓ‘lica con pΓ©talos reflectantes como espejos y fuertes estambres.' +======= + description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', + alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Presencia eterna', artist: 'John Woodrow Wilson', +<<<<<<< HEAD description: 'Wilson era conocido por su preocupaciΓ³n por la igualdad, la justicia social, asΓ­ como por las cualidades esenciales y espirituales de la humanidad. Este bronce masivo (7 pies o 2,13 m) representa lo que Γ©l describiΓ³ como "una presencia negra simbΓ³lica infundida con un sentido de humanidad universal"."', url: 'https://i.imgur.com/aTtVpES.jpg', alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' @@ -1150,15 +1647,33 @@ export const sculptureList = [{ description: 'Ubicados en la Isla de Pascua, hay 1,000 moΓ‘i, o estatuas monumentales existentes, creadas por los primeros rapanui , que algunos creen que representan a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombrΓ­os.' +======= + description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + url: 'https://react.dev/images/docs/scientists/aTtVpES.jpg', + alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' +}, { + name: 'Moai', + artist: 'Unknown Artist', + description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', + alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Nana azul', artist: 'Niki de Saint Phalle', +<<<<<<< HEAD description: 'Las Nanas son criaturas triunfantes, sΓ­mbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y mΓ‘s tarde introdujo el poliΓ©ster para conseguir un efecto mΓ‘s vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', alt: 'Gran escultura en mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegrΓ­a.' +======= + description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + url: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', + alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Forma definitiva', artist: 'Barbara Hepworth', +<<<<<<< HEAD description: 'Esta escultura abstracta de bronce es parte de la serie La Familia del Hombre ubicada en Yorkshire Sculpture Park. Hepworth optΓ³ por no crear representaciones literales del mundo, sino que desarrollΓ³ formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' @@ -1168,9 +1683,21 @@ export const sculptureList = [{ description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinΓ³ temas yoruba tradicionales y contemporΓ‘neos.", url: 'https://i.imgur.com/wIdGuZwm.png', alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con motivos.' +======= + description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + url: 'https://react.dev/images/docs/scientists/2heNQDcm.jpg', + alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' +}, { + name: 'Cavaliere', + artist: 'Lamidi Olonade Fakeye', + description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + url: 'https://react.dev/images/docs/scientists/wIdGuZwm.png', + alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Grandes barrigas', artist: 'Alina Szapocznikow', +<<<<<<< HEAD description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metΓ‘fora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos barrigas grandes muy realistas apiladas una encima de otra, cada una de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clΓ‘sicas.' @@ -1180,15 +1707,33 @@ export const sculptureList = [{ description: 'Los Guerreros de terracota es una colecciΓ³n de esculturas de terracota que representan los ejΓ©rcitos de Qin Shi Huang, el primer emperador de China. El ejΓ©rcito constaba de mΓ‘s de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballerΓ­a.', url: 'https://i.imgur.com/HMFmH6m.jpg', alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresiΓ³n facial y una armadura ΓΊnicas.' +======= + description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + url: 'https://react.dev/images/docs/scientists/AlHTAdDm.jpg', + alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' +}, { + name: 'Terracotta Army', + artist: 'Unknown Artist', + description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', + alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Paisaje lunar', artist: 'Louise Nevelson', +<<<<<<< HEAD description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblarΓ­a en construcciones monumentales. En este, usΓ³ partes dispares como un poste de cama, una clava de malabarista y un fragmento de asiento, clavΓ‘ndolos y pegΓ‘ndolos en cajas que reflejan la influencia de la abstracciΓ³n geomΓ©trica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' +======= + description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', + alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, { name: 'Aureola', artist: 'Ranjani Shettar', +<<<<<<< HEAD description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relaciΓ³n entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto en sentido abstracto como figurado, que desafΓ­a la gravedad y una "fina sΓ­ntesis de materiales inverosΓ­miles".', url: 'https://i.imgur.com/okTpbHhm.jpg', alt: 'Una escultura parecida a un alambre pΓ‘lido montada en una pared de hormigΓ³n y descendiendo al suelo. Parece ligero.' @@ -1198,6 +1743,17 @@ export const sculptureList = [{ description: 'El ZoolΓ³gico de Taipei encargΓ³ una Plaza del HipopΓ³tamo con hipopΓ³tamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', alt: 'Un grupo de esculturas de hipopΓ³tamos de bronce que emergen de la acera como si estuvieran nadando.' +======= + description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + url: 'https://react.dev/images/docs/scientists/okTpbHhm.jpg', + alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' +}, { + name: 'Hippos', + artist: 'Taipei Zoo', + description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + url: 'https://react.dev/images/docs/scientists/6o5Vuyu.jpg', + alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }]; ``` @@ -1229,7 +1785,7 @@ Cuando escribimos en los campos del formulario, no obtenemos nada. Es como si lo <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [6]}} export default function Form() { let firstName = ''; let lastName = ''; @@ -1266,7 +1822,7 @@ export default function Form() { } ``` -```css +```css h1 { margin-top: 10px; } ``` @@ -1317,7 +1873,7 @@ export default function Form() { } ``` -```css +```css h1 { margin-top: 10px; } ``` @@ -1337,7 +1893,7 @@ AquΓ­ hay un pequeΓ±o formulario que se supone que permite al usuario dejar algu <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [9]}} import { useState } from 'react'; export default function FeedbackForm() { @@ -1446,7 +2002,11 @@ export default function FeedbackForm() { Intenta mover la segunda llamada `useState` despuΓ©s de la condiciΓ³n `if` y observa cΓ³mo esto la rompe de nuevo. +<<<<<<< HEAD Si tu linter estΓ‘ [configurado para React](/learn/editor-setup#linting), deberΓ­as ver un error cuando cometas un error como este. Si aparece un error cuando escribes el cΓ³digo errado localmente, deberΓ­as configurar el plugin del linter en tu proyecto. +======= +If your linter is [configured for React](/learn/editor-setup#linting), you should see a lint error when you make a mistake like this. If you don't see an error when you try the faulty code locally, you need to set up linting for your project. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Solution> diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 7fee078a4..06d10498b 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -95,7 +95,7 @@ Puede que sientas la tentaciΓ³n de intentar llamar a `play()` o `pause()` durant <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [7, 9]}} import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { @@ -617,7 +617,7 @@ A common pitfall for preventing Effects firing twice in development is to use a This makes it so you only see `"βœ… Connecting..."` once in development, but it doesn't fix the bug. -When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix". +When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix". To fix the bug, it is not enough to just make the Effect run once. The effect needs to work after re-mounting, which means the connection needs to be cleaned up like in the solution above. @@ -732,8 +732,13 @@ Escribir llamadas `fetch` dentro de Efectos es una forma [popular de obtener dat Esta lista de inconvenientes no es especΓ­fica de React. Se aplica a la obtenciΓ³n de datos en el montaje con cualquier biblioteca. Al igual que con el enrutamiento, la obtenciΓ³n de datos no es trivial para hacerlo bien, por lo que recomendamos los siguientes enfoques: +<<<<<<< HEAD - **Si usas un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks), utiliza su mecanismo de obtenciΓ³n de datos integrado.** Los frameworks modernos de React han integrado mecanismos de obtenciΓ³n de datos que son eficientes y no sufren los inconvenientes anteriores. - **De lo contrario, considera la posibilidad de utilizar o construir una cachΓ© del lado del cliente.** Las soluciones populares de cΓ³digo abierto incluyen [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), y [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) TambiΓ©n puedes crear tu propia soluciΓ³n, en cuyo caso se usarΓ­an Efectos por debajo, pero tambiΓ©n se aΓ±adirΓ­a lΓ³gica para deduplicar las peticiones, almacenar en cachΓ© las respuestas y evitar las cascadas de red (precargando los datos o elevando los requisitos de datos a las rutas). +======= +- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls. +- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Puedes seguir obteniendo datos directamente en Efectos si ninguno de estos enfoques te conviene. @@ -1004,8 +1009,13 @@ import { useEffect, useRef } from 'react'; export default function MyInput({ value, onChange }) { const ref = useRef(null); +<<<<<<< HEAD // TODO: Esto no funciona del todo. CorrΓ­gelo. // ref.current.focus() +======= + // TODO: This doesn't quite work. Fix it. + // ref.current.focus() +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a return ( <input @@ -1468,7 +1478,8 @@ Este componente muestra la biografΓ­a de la persona seleccionada. Carga la biogr <Sandpack> -```js src/App.js +{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */} +```js {expectedErrors: {'react-compiler': [9]}} src/App.js import { useState, useEffect } from 'react'; import { fetchBio } from './api.js'; @@ -1541,7 +1552,8 @@ Para solucionar esta condiciΓ³n de carrera, aΓ±ade una funciΓ³n de limpieza: <Sandpack> -```js src/App.js +{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */} +```js {expectedErrors: {'react-compiler': [9]}} src/App.js import { useState, useEffect } from 'react'; import { fetchBio } from './api.js'; @@ -1605,4 +1617,3 @@ Para ignorar el resultado de una llamada de API desactualizada, tambiΓ©n puedes </Solution> </Challenges> - diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index ff47bba6a..8ae8838e7 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -37,9 +37,15 @@ Comienza por dibujar cuadros alrededor de cada componente y subcomponente en el Dependiendo de tu formaciΓ³n y experiencia, puedes pensar en dividir un diseΓ±o en componentes de distintas maneras: +<<<<<<< HEAD * **ProgramaciΓ³n**--utiliza las mismas tΓ©cnicas para decidir si debes crear una nueva funciΓ³n o un objeto. Una de estas tΓ©cnicas es el [principio de responsabilidad ΓΊnica](https://es.wikipedia.org/wiki/Principio_de_responsabilidad_ΓΊnica), es decir, lo ideal es que un componente sΓ³lo haga una cosa. Si termina creciendo, deberΓ­a descomponerse en subcomponentes mΓ‘s pequeΓ±os. * **CSS**--considera para quΓ© harΓ­as selectores de clase. (Sin embargo, los componentes son un poco menos granulares). * **DiseΓ±o**--considera cΓ³mo organizarΓ­as las capas del diseΓ±o. +======= +* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), that is, a component should ideally only be concerned with one thing. If it ends up growing, it should be decomposed into smaller subcomponents. +* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) +* **Design**--consider how you would organize the design's layers. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si tu JSON estΓ‘ bien estructurado, a menudo encontrarΓ‘s que se corresponde naturalmente con la estructura de componentes de tu UI. Esto ocurre porque la UI y los modelos de datos a menudo tienen la misma arquitectura de informaciΓ³n--o sea, la misma forma. Separa tu UI en componentes, de manera que cada componente se corresponda con una pieza de tu modelo de datos. @@ -228,10 +234,17 @@ Lo que queda probablemente es estado. VeΓ‘moslos uno por uno nuevamente: +<<<<<<< HEAD 1. La lista original de productos se **pasa como props, por lo que no es estado**. 2. El texto de bΓΊsqueda parece ser estado dado que cambia con el tiempo y no puede ser calculado a partir de algo mΓ‘s. 3. El valor del *checkbox* parece ser estado porque cambia con el tiempo y no puede ser calculado a partir de algo mΓ‘s. 4. La lista filtrada de productos **no es estado porque puede ser calculada** tomando la lista original de productos y filtrΓ‘ndola de acuerdo al texto de bΓΊsqueda y el valor del *checkbox*. +======= +1. The original list of products is **passed in as props, so it's not state.** +2. The search text seems to be state since it changes over time and can't be computed from anything. +3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything. +4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Β‘Esto significa que solo el texto de bΓΊsqueda y el valor del *checkbox* son estado! Β‘Bien hecho! @@ -265,6 +278,7 @@ En el paso anterior, encontraste dos elementos de estado en esta aplicaciΓ³n: el Ahora utilicemos nuestra estrategia para este estado: +<<<<<<< HEAD 1. **Identifica componentes que usen estado:** * `ProductTable` necesita filtrar la lista de productos con base en ese estado (texto de bΓΊsqueda y valor del *checkbox*). * `SearchBar` necesita mostrar ese estado (texto de bΓΊsqueda y valor del *checkbox*). @@ -272,23 +286,32 @@ Ahora utilicemos nuestra estrategia para este estado: 3. **Decide donde reside el estado:** Mantendremos el texto de filtrado y el estado de valor seleccionado en `FilterableProductTable`. Por tanto los valores del estado residirΓ‘n en `FilterableProductTable`. +======= +1. **Identify components that use state:** + * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). + * `SearchBar` needs to display that state (search text and checkbox value). +2. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. +3. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. + +So the state values will live in `FilterableProductTable`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a AΓ±ade estado al componente con el [Hook `useState()`](/reference/react/useState). Los Hooks te permiten "engancharte" al [ciclo de renderizado](/learn/render-and-commit) de un componente (<abbr title="Nota de TraducciΓ³n">N. de T.</abbr>: *hook* en inglΓ©s se puede traducir como "gancho"). AΓ±ade dos variables de estado al inicio de `FilterableProductTable` y especifica el estado inicial de tu aplicaciΓ³n: ```js function FilterableProductTable({ products }) { const [filterText, setFilterText] = useState(''); - const [inStockOnly, setInStockOnly] = useState(false); + const [inStockOnly, setInStockOnly] = useState(false); ``` Pasa entonces `filterText` e `inStockOnly` a `ProductTable` y `SearchBar` como props: ```js <div> - <SearchBar - filterText={filterText} + <SearchBar + filterText={filterText} inStockOnly={inStockOnly} /> - <ProductTable + <ProductTable products={products} filterText={filterText} inStockOnly={inStockOnly} /> @@ -308,10 +331,10 @@ function FilterableProductTable({ products }) { return ( <div> - <SearchBar - filterText={filterText} + <SearchBar + filterText={filterText} inStockOnly={inStockOnly} /> - <ProductTable + <ProductTable products={products} filterText={filterText} inStockOnly={inStockOnly} /> @@ -389,13 +412,20 @@ function ProductTable({ products, filterText, inStockOnly }) { function SearchBar({ filterText, inStockOnly }) { return ( <form> +<<<<<<< HEAD <input type="text" value={filterText} placeholder="Buscar..."/> +======= + <input + type="text" + value={filterText} + placeholder="Search..."/> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <label> - <input - type="checkbox" + <input + type="checkbox" checked={inStockOnly} /> {' '} Mostrar solo productos en stock @@ -451,10 +481,17 @@ En el ejemplo de cΓ³digo de arriba `ProductTable` y `SearchBar` leen las props ` function SearchBar({ filterText, inStockOnly }) { return ( <form> +<<<<<<< HEAD <input type="text" value={filterText} placeholder="Buscar..."/> +======= + <input + type="text" + value={filterText} + placeholder="Search..."/> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ``` Sin embargo, no has aΓ±adido ningΓΊn cΓ³digo para responder a las acciones del usuario como la escritura en el teclado. Este serΓ‘ tu ΓΊltimo paso. @@ -462,7 +499,11 @@ Sin embargo, no has aΓ±adido ningΓΊn cΓ³digo para responder a las acciones del u ## Paso 5: AΓ±ade flujo de datos inverso {/*step-5-add-inverse-data-flow*/} +<<<<<<< HEAD Actualmente tu aplicaciΓ³n se renderiza correctamente con props y estado fluyendo hacia abajo en la jerarquΓ­a. Pero para cambiar el estado de acuerdo a la entrada del usuario necesitarΓ‘s ser capaz de manejar datos fluyendo en la otra direcciΓ³n: los componentes de formulario que se encuentran debajo en la jerarquΓ­a necesitan actualizar el estado en `FilterableProductTable`. +======= +Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a React hace este flujo de datos explΓ­cito, pero requiere un poco mΓ‘s de escritura que el enlazado de datos en doble sentido. Si tratas de escribir o seleccionar el *checkbox* en el ejemplo de arriba, verΓ‘s que React ignora tu entrada. Esto es intencional. Al escribir `<input value={filterText} />`, haz establecido que la prop `value` del `input` sea siempre igual al estado `filterState` pasado desde `FilterableProductTable`. Dado que el estado `filterText` nunca es modificado, el *input* nunca cambia. @@ -475,8 +516,8 @@ function FilterableProductTable({ products }) { return ( <div> - <SearchBar - filterText={filterText} + <SearchBar + filterText={filterText} inStockOnly={inStockOnly} onFilterTextChange={setFilterText} onInStockOnlyChange={setInStockOnly} /> @@ -519,13 +560,13 @@ function FilterableProductTable({ products }) { return ( <div> - <SearchBar - filterText={filterText} - inStockOnly={inStockOnly} - onFilterTextChange={setFilterText} + <SearchBar + filterText={filterText} + inStockOnly={inStockOnly} + onFilterTextChange={setFilterText} onInStockOnlyChange={setInStockOnly} /> - <ProductTable - products={products} + <ProductTable + products={products} filterText={filterText} inStockOnly={inStockOnly} /> </div> @@ -607,14 +648,20 @@ function SearchBar({ }) { return ( <form> +<<<<<<< HEAD <input type="text" value={filterText} placeholder="Buscar..." +======= + <input + type="text" + value={filterText} placeholder="Search..." +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a onChange={(e) => onFilterTextChange(e.target.value)} /> <label> - <input - type="checkbox" - checked={inStockOnly} + <input + type="checkbox" + checked={inStockOnly} onChange={(e) => onInStockOnlyChange(e.target.checked)} /> {' '} Mostrar solo productos en stock diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 7d1376adc..9f8532fc0 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -283,9 +283,15 @@ En CodeSandbox verΓ‘s tres secciones principales: ![CodeSandbox con cΓ³digo de inicio](../images/tutorial/react-starter-code-codesandbox.png) +<<<<<<< HEAD 1. La secciΓ³n *Files* con una lista de archivos como `App.js`, `index.js`, `styles.css` y una carpeta llamada `public` 2. El *code editor* donde verΓ‘s el cΓ³digo fuente de tu archivo seleccionado 3. La secciΓ³n *browser* donde verΓ‘s cΓ³mo se mostrarΓ‘ el cΓ³digo que has escrito +======= +1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` in `src` folder and a folder called `public` +1. The _code editor_ where you'll see the source code of your selected file +1. The _browser_ section where you'll see how the code you've written will be displayed +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a El archivo `App.js` debe seleccionarse en la secciΓ³n *Files*. El contenido de ese archivo en el *code editor* deberΓ­a ser: @@ -337,7 +343,11 @@ import './styles.css'; import App from './App'; ``` +<<<<<<< HEAD Las lΓ­neas 1-5 reΓΊnen todas las piezas necesarias: +======= +Lines 1-5 bring all the necessary pieces together: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - React - Biblioteca de React para hablar con los navegadores web (React DOM) @@ -551,7 +561,11 @@ export default function Board() { } ``` +<<<<<<< HEAD Observa cΓ³mo, a diferencia de los `div`s del navegador, tus propios componentes `Board` y `Square` deben comenzar con una letra mayΓΊscula. +======= +Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Vamos a ver: @@ -1096,7 +1110,11 @@ function Square({ value, onSquareClick }) { } ``` +<<<<<<< HEAD Ahora conecta la prop `onSquareClick` a una funciΓ³n en el componente `Board` que llamarΓ‘s `handleClick`. Para conectar `onSquareClick` a `handleClick`, pasa una funciΓ³n a la prop `onSquareClick` del primer componente `Square`: +======= +Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```js {7} export default function Board() { @@ -2077,13 +2095,22 @@ export default function Game() { } ``` +<<<<<<< HEAD Puedes ver cΓ³mo deberΓ­a verse tu cΓ³digo a continuaciΓ³n. Ten en cuenta que deberΓ­as ver un error en la consola de herramientas para desarrolladores que dice: +======= +You can see what your code should look like below. Note that you should see an error in the developer tools console that says: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <ConsoleBlock level="warning"> Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. </ConsoleBlock> +<<<<<<< HEAD ResolverΓ‘s este error en la siguiente secciΓ³n. +======= + +You'll fix this error in the next section. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <Sandpack> diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 737e052c2..fe22490af 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -11,16 +11,27 @@ TypeScript es una forma popular de aΓ±adir definiciones de tipos a bases de cΓ³d <YouWillLearn> +<<<<<<< HEAD * [TypeScript con Componentes de React](/learn/typescript#typescript-with-react-components) * [Ejemplos de tipado con Hooks](/learn/typescript#example-hooks) * [Tipos comunes de `@types/react`](/learn/typescript/#useful-types) * [Lugares de aprendizaje adicional](/learn/typescript/#further-learning) +======= +* [TypeScript with React Components](/learn/typescript#typescript-with-react-components) +* [Examples of typing with Hooks](/learn/typescript#example-hooks) +* [Common types from `@types/react`](/learn/typescript#useful-types) +* [Further learning locations](/learn/typescript#further-learning) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </YouWillLearn> ## InstalaciΓ³n {/*installation*/} +<<<<<<< HEAD Todos los [frameworks React de grado de producciΓ³n](/learn/start-a-new-react-project#production-grade-react-frameworks) ofrecen soporte para el uso de TypeScript. Sigue la guΓ­a especΓ­fica del framework para la instalaciΓ³n: +======= +All [production-grade React frameworks](/learn/creating-a-react-app#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) @@ -32,14 +43,20 @@ Todos los [frameworks React de grado de producciΓ³n](/learn/start-a-new-react-pr Para instalar la ΓΊltima versiΓ³n de las definiciones de tipos de React: <TerminalBlock> -npm install @types/react @types/react-dom +npm install --save-dev @types/react @types/react-dom </TerminalBlock> Las siguientes opciones del compilador deben ser configuradas en tu `tsconfig.json`: +<<<<<<< HEAD 1. `dom` debe incluirse en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica la opciΓ³n `lib`, `dom` se incluye por defecto). 1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) debe configurarse con una de las opciones vΓ‘lidas. `preserve` deberΓ­a ser suficiente para la mayorΓ­a de las aplicaciones. Si vas a publicar una biblioteca, consulta la [documentaciΓ³n `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) para saber quΓ© valor elegir. +======= +1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). +2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. + If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ## TypeScript con Componentes de React {/*typescript-with-react-components*/} @@ -124,7 +141,11 @@ El tipo que describe las props de tu componente puede ser tan simple o tan compl ## Ejemplos de Hooks {/*example-hooks*/} +<<<<<<< HEAD Las definiciones de tipos de `@types/react` incluyen tipos para los Hooks incorporados, por lo que puedes usarlos en tus componentes sin ninguna configuraciΓ³n adicional. EstΓ‘n construidos para tener en cuenta el cΓ³digo que escribes en tu componente, por lo que obtendrΓ‘s [tipos inferidos](https://www.typescriptlang.org/docs/handbook/type-inference.html) la mayor parte del tiempo e idealmente no necesitarΓ‘s manejar las minucias de proporcionar los tipos. +======= +The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Sin embargo, podemos ver algunos ejemplos de cΓ³mo proporcionar tipos para Hooks. @@ -139,8 +160,13 @@ const [enabled, setEnabled] = useState(false); Esto asignarΓ‘ el tipo `boolean` a `enabled`, y `setEnabled` serΓ‘ una funciΓ³n que acepte un argumento `boolean`, o una funciΓ³n que devuelva un `boolean`. Si quieres proporcionar explΓ­citamente un tipo para el estado, puedes hacerlo proporcionando un argumento de tipo a la llamada `useState`: +<<<<<<< HEAD ```ts // Definiendo explΓ­citamente el tipo como "boolean" +======= +```ts +// Explicitly set the type to "boolean" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a const [enabled, setEnabled] = useState<boolean>(false); ``` @@ -174,7 +200,7 @@ El [Hook `useReducer`](/reference/react/useReducer) es un Hook mΓ‘s complejo que import {useReducer} from 'react'; interface State { - count: number + count: number }; type CounterAction = @@ -260,9 +286,9 @@ export default function MyApp() { const [theme, setTheme] = useState<Theme>('light'); return ( - <ThemeContext.Provider value={theme}> + <ThemeContext value={theme}> <MyComponent /> - </ThemeContext.Provider> + </ThemeContext> ) } @@ -284,7 +310,11 @@ export default App = AppTSX; </Sandpack> +<<<<<<< HEAD Esta tΓ©cnica funciona cuando tienes un valor por defecto que tiene sentido - pero hay casos ocasionales en los que no, y en esos casos `null` puede parecer razonable como valor por defecto. Sin embargo, para permitir que el sistema de tipos entienda tu cΓ³digo, necesitas establecer explΓ­citamente `ContextShape | null` en el `createContext`. +======= +This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Esto causa el problema de que necesitas eliminar el `| null` en el tipo para los consumidores de contexto. Nuestra recomendaciΓ³n es que el Hook compruebe su existencia en tiempo de ejecuciΓ³n y lance un error si no estΓ‘ presente: @@ -310,9 +340,9 @@ export default function MyApp() { const object = useMemo(() => ({ kind: "complex" }), []); return ( - <Context.Provider value={object}> + <Context value={object}> <MyComponent /> - </Context.Provider> + </Context> ) } @@ -329,7 +359,17 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} +<<<<<<< HEAD Los hooks [`useMemo`](/reference/react/useMemo) crearΓ‘n/reaccederΓ‘n a un valor memorizado desde una llamada a una funciΓ³n, reejecutando la funciΓ³n sΓ³lo cuando las dependencias pasadas como segundo parΓ‘metro cambien. El resultado de llamar al Hook se infiere del valor de devoluciΓ³n de la funciΓ³n en el primer parΓ‘metro. Se puede ser mΓ‘s explΓ­cito proporcionando un argumento de tipo al Hook. +======= +<Note> + +[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically. + +</Note> + +The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```ts // El tipo de visibleTodos se infiere del valor de devoluciΓ³n de filterTodos @@ -339,7 +379,17 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); ### `useCallback` {/*typing-usecallback*/} +<<<<<<< HEAD El [`useCallback`](/reference/react/useCallback) proporciona una referencia estable a una funcion siempre y cuando las dependencias pasadas como segundo parΓ‘metro sean las mismas. Al igual que con `useMemo`, el tipo de la funciΓ³n se infiere del valor de devoluciΓ³n de la funciΓ³n en el primer parΓ‘metro, y puedes ser mΓ‘s explΓ­cito al proporcionar un argumento de tipo al Hook. +======= +<Note> + +[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically. + +</Note> + +The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```ts @@ -350,7 +400,11 @@ const handleClick = useCallback(() => { Cuando trabajas en el modo estricto de TypeScript, `useCallback` necesita que agregues tipos para los parΓ‘metros en tu funciΓ³n callback. Esto se debe a que el tipo del callback se infiere a partir del valor de devoluciΓ³n de la funciΓ³n, y sin parΓ‘metros no se puede entender completamente el tipo. +<<<<<<< HEAD Dependiendo de tus preferencias de estilo de cΓ³digo, podrΓ­as usar las funciones `*EventHandler` de los tipos de React para proporcionar el tipo para el controlador de eventos al mismo tiempo que defines el callback: +======= +Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a ```ts import { useState, useCallback } from 'react'; @@ -361,7 +415,7 @@ export default function Form() { const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => { setValue(event.currentTarget.value); }, [setValue]) - + return ( <> <input value={value} onChange={handleChange} /> @@ -433,7 +487,11 @@ interface ModalRendererProps { } ``` +<<<<<<< HEAD Ten en cuenta que no puedes usar TypeScript para describir que los hijos son un cierto tipo de elementos JSX, por lo que no puedes usar el sistema de tipos para describir un componente que sΓ³lo acepta hijos `<li>`. +======= +Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Puedes ver un ejemplo tanto de `React.ReactNode` como de `React.ReactElement` con el verificador de tipos en [este playground de TypeScript](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index aaa52fbfc..5b30ef4bf 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -20,7 +20,11 @@ React, al igual que muchas otras bibliotecas de UI, modela la UI como un Γ‘rbol. ## Tu UI como un Γ‘rbol {/*your-ui-as-a-tree*/} +<<<<<<< HEAD Los Γ‘rboles son un modelo de relaciΓ³n entre elementos, y la UI se representa frecuentemente utilizando estructuras de Γ‘rbol. Por ejemplo, los navegadores utilizan estructuras de Γ‘rbol para modelar HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) y CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Las plataformas mΓ³viles tambiΓ©n utilizan Γ‘rboles para representar su jerarquΓ­a de vistas. +======= +Trees are a relationship model between items. The UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagrama con tres secciones dispuestas horizontalmente. En la primera secciΓ³n, hay tres rectΓ‘ngulos apilados verticalmente, con las etiquetas 'Componente A', 'Componente B' y 'Componente C'. Transicionando a la siguiente secciΓ³n hay una flecha con el logo de React en la parte superior etiquetada 'React'. La secciΓ³n del medio contiene un Γ‘rbol de componentes, con la raΓ­z etiquetada 'A' y dos hijos etiquetados 'B' y 'C'. La siguiente secciΓ³n se transiciona nuevamente usando una flecha con el logo de React en la parte superior etiquetada 'React DOM'. La tercera y ΓΊltima secciΓ³n es un esquema de un navegador, que contiene un Γ‘rbol de 8 nodos, de los cuales solo un subconjunto estΓ‘ resaltado (indicando el subΓ‘rbol de la secciΓ³n del medio)."> diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index 76c4e316e..ae33f0a16 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -55,7 +55,7 @@ Este ejemplo mantiene un objeto en el estado para representar la posiciΓ³n actua <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [11]}} import { useState } from 'react'; export default function MovingDot() { @@ -199,7 +199,7 @@ setPosition({ La mutaciΓ³n sΓ³lo es un problema cuando cambias objetos *existentes* que ya estΓ‘n en el estado. Mutar un objeto que acabas de crear estΓ‘ bien porque *ningΓΊn otro cΓ³digo hace referencia a Γ©l todavΓ­a.* Cambiarlo no va a afectar accidentalmente a algo que dependa de Γ©l. Esto se llama "mutaciΓ³n local". Incluso puedes hacer una mutaciΓ³n local [mientras renderizas.](/learn/keeping-components-pure#local-mutation-your-components-little-secret) Β‘Muy conveniente y completamente bien! -</DeepDive> +</DeepDive> ## Copiar objetos con la sintaxis extendida {/*copying-objects-with-the-spread-syntax*/} @@ -209,7 +209,7 @@ Estos campos de entrada no funcionan porque los controladores `onChange` mutan e <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [11, 15, 19]}} import { useState } from 'react'; export default function Form() { @@ -296,7 +296,11 @@ setPerson({ }); ``` +<<<<<<< HEAD Β‘Ahora el formulario funciona! +======= +Now the form works! +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a FΓ­jate en que no has declarado una variable de estado distinta para cada campo de entrada. Para los formularios grandes, es muy conveniente mantener todos los datos agrupados - Β‘siempre y cuando los actualices correctamente! @@ -373,7 +377,11 @@ input { margin-left: 5px; margin-bottom: 5px; } </Sandpack> +<<<<<<< HEAD Ten en cuenta que la sintaxis extendida `...` es "superficial": sΓ³lo copia las cosas a un nivel de profundidad. Esto lo hace rΓ‘pido, pero tambiΓ©n significa que si quieres actualizar una propiedad anidada, tendrΓ‘s que usarla mΓ‘s de una vez. +======= +Note that the `...` spread syntax is "shallow"--it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you'll have to use it more than once. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <DeepDive> @@ -455,9 +463,15 @@ Considera una estructura de objetos anidados como esta: const [person, setPerson] = useState({ name: 'Niki de Saint Phalle', artwork: { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } }); ``` @@ -499,9 +513,15 @@ export default function Form() { const [person, setPerson] = useState({ name: 'Niki de Saint Phalle', artwork: { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } }); @@ -579,8 +599,8 @@ export default function Form() { <br /> (situada en {person.artwork.city}) </p> - <img - src={person.artwork.image} + <img + src={person.artwork.image} alt={person.artwork.title} /> </> @@ -606,9 +626,15 @@ Un objeto de este tipo aparece "anidado" en el cΓ³digo: let obj = { name: 'Niki de Saint Phalle', artwork: { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } }; ``` @@ -617,9 +643,15 @@ Sin embargo, la "anidaciΓ³n" es una forma inexacta de pensar en el comportamient ```js let obj1 = { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }; let obj2 = { @@ -632,9 +664,15 @@ El objeto `obj1` no estΓ‘ "dentro" de `obj2`. Por ejemplo, `obj3` tambiΓ©n podr ```js let obj1 = { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }; let obj2 = { @@ -650,7 +688,7 @@ let obj3 = { Si se muta `obj3.artwork.city`, afectarΓ­a tanto a `obj2.artwork.city` como a `obj1.city`. Esto se debe a que `obj3.artwork`, `obj2.artwork` y `obj1` son el mismo objeto. Esto es difΓ­cil de ver cuando se piensa en los objetos como "anidados". En cambio, son objetos separados que se "apuntan" unos a otros con propiedades. -</DeepDive> +</DeepDive> ### Escribe una lΓ³gica de actualizaciΓ³n concisa con Immer {/*write-concise-update-logic-with-immer*/} @@ -688,9 +726,15 @@ export default function Form() { const [person, updatePerson] = useImmer({ name: 'Niki de Saint Phalle', artwork: { +<<<<<<< HEAD title: 'Nana azul', city: 'Hamburgo', image: 'https://i.imgur.com/Sd1AgUOm.jpg', +======= + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a } }); @@ -755,8 +799,8 @@ export default function Form() { <br /> (situada en {person.artwork.city}) </p> - <img - src={person.artwork.image} + <img + src={person.artwork.image} alt={person.artwork.title} /> </> @@ -832,7 +876,7 @@ Tu tarea es arreglar todos estos errores. A medida que los vayas arreglando, exp <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [11]}} import { useState } from 'react'; export default function Scoreboard() { @@ -988,7 +1032,7 @@ Si algo inesperado cambia, hay una mutaciΓ³n. Encuentra la mutaciΓ³n en `App.js` <Sandpack> -```js src/App.js +```js {expectedErrors: {'react-compiler': [17]}} src/App.js import { useState } from 'react'; import Background from './Background.js'; import Box from './Box.js'; @@ -1293,7 +1337,7 @@ Este es el mismo ejemplo con errores que en el desafΓ­o anterior. Esta vez, arre <Sandpack> -```js src/App.js +```js {expectedErrors: {'react-compiler': [18]}} src/App.js import { useState } from 'react'; import { useImmer } from 'use-immer'; import Background from './Background.js'; diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 337849894..29bf37eac 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -70,9 +70,15 @@ Supongamos que tienes algo de HTML (perfectamente vΓ‘lido): ```html +<<<<<<< HEAD <h1>Tareas Pendientes de Hedy Lamarr</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" +======= +<h1>Hedy Lamarr's Todos</h1> +<img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a alt="Hedy Lamarr" class="photo" > @@ -101,11 +107,19 @@ Si lo copias y pegas tal como estΓ‘, no funcionarΓ‘: ```js export default function TodoList() { return ( +<<<<<<< HEAD // Β‘Esto no funciona! <h1>Tareas Pendientes de Hedy Lamarr</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" +======= + // This doesn't quite work! + <h1>Hedy Lamarr's Todos</h1> + <img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" + alt="Hedy Lamarr" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a class="photo" > <ul> @@ -141,10 +155,17 @@ Por ejemplo, puedes usar un `<div>`: ```js {1,11} <div> +<<<<<<< HEAD <h1>Tareas Pendientes de Hedy Lamarr</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" +======= + <h1>Hedy Lamarr's Todos</h1> + <img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" + alt="Hedy Lamarr" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a class="photo" > <ul> @@ -158,10 +179,17 @@ Si no deseas agregar un `<div>` adicional a tu marcado, puedes escribir `<>` y ` ```js {1,11} <> +<<<<<<< HEAD <h1>Tareas Pendientes de Hedy Lamarr</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" +======= + <h1>Hedy Lamarr's Todos</h1> + <img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" + alt="Hedy Lamarr" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a class="photo" > <ul> @@ -188,9 +216,9 @@ AsΓ­ es como la imagen y los elementos de lista de Hedy Lamarr se ven cerrados: ```js {2-6,8-10} <> - <img - src="https://i.imgur.com/yXOvdOSs.jpg" - alt="Hedy Lamarr" + <img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" + alt="Hedy Lamarr" class="photo" /> <ul> @@ -208,9 +236,9 @@ JSX se convierte en JavaScript y los atributos escritos en JSX se convierten en Por eso, en React, muchos atributos HTML y SVG estΓ‘n escritos en camelCase. Por ejemplo, en lugar de `stroke-width` usa `strokeWidth`. Dado que `class` es una palabra reservada, en React escribes `className` en su lugar, con el nombre de la [propiedad DOM correspondiente](https://developer.mozilla.org/es/docs/Web/API/Element/className): ```js {4} -<img - src="https://i.imgur.com/yXOvdOSs.jpg" - alt="Hedy Lamarr" +<img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" + alt="Hedy Lamarr" className="photo" /> ``` @@ -235,11 +263,19 @@ AquΓ­ estΓ‘ tu resultado final: export default function TodoList() { return ( <> +<<<<<<< HEAD <h1>Tareas Pendientes de Hedy Lamarr</h1> <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo" +======= + <h1>Hedy Lamarr's Todos</h1> + <img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" + alt="Hedy Lamarr" + className="photo" +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a /> <ul> <li>Inventar nuevo semΓ‘foro</li> 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 6b4f58d57..3b3434fdd 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 @@ Hay dos casos comunes en los cuales no necesitas utilizar Efectos: * **No necesitas Efectos para transformar datos antes de renderizar.** Por ejemplo, supongamos que deseas filtrar una lista antes de mostrarla. PodrΓ­as sentirte tentado/a a escribir un Efecto que actualice una variable de estado cuando cambie la lista. Sin embargo, esto es ineficiente. Cuando actualizas el estado, React primero llama a las funciones de tu componente para calcular lo que deberΓ­a mostrarse en la pantalla. Luego, React ["confirmarΓ‘"](/learn/render-and-commit) estos cambios en el DOM, actualizando la pantalla. DespuΓ©s, React ejecuta tus Efectos. Si tu Efecto tambiΓ©n actualiza inmediatamente el estado, Β‘esto reinicia todo el proceso desde cero! Para evitar pasadas de renderizado innecesarias, transforma todos los datos en el nivel superior de tus componentes. Ese cΓ³digo se volverΓ‘ a ejecutar automΓ‘ticamente cada vez que tus _props_ o estado cambien. * **No necesitas Efectos para manejar eventos del usuario.** Por ejemplo, supongamos que deseas enviar una solicitud POST `/api/buy` y mostrar una notificaciΓ³n cuando el usuario compra un producto. En el controlador de eventos del botΓ³n "Comprar", sabes exactamente lo que sucediΓ³. Para el momento en que se ejecuta un Efecto, no sabes *quΓ©* hizo el usuario (por ejemplo, en quΓ© botΓ³n se hizo clic). Por esta razΓ³n, generalmente se manejan los eventos del usuario en los controladores de eventos correspondientes. +<<<<<<< HEAD Es *cierto* que necesitas Efectos para [sincronizar](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) con sistemas externos. Por ejemplo, puedes escribir un Efecto que mantenga sincronizado un _widget_ de jQuery con el estado de React. TambiΓ©n puedes obtener datos con Efectos, por ejemplo, puedes sincronizar los resultados de bΓΊsqueda con la consulta de bΓΊsqueda actual. Ten en cuenta que los [_frameworks_](/learn/start-a-new-react-project#production-grade-react-frameworks) modernos proporcionan mecanismos mΓ‘s eficientes y nativos para obtener datos que escribir Efectos directamente en tus componentes. +======= +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 Para ayudarte a desarrollar la intuiciΓ³n adecuada, Β‘veamos algunos ejemplos concretos comunes! @@ -34,7 +38,7 @@ Para ayudarte a desarrollar la intuiciΓ³n adecuada, Β‘veamos algunos ejemplos co Supongamos que tienes un componente con dos variables de estado: `firstName` y `lastName`. Deseas calcular un `fullName` a partir de ellos concatenΓ‘ndolos. AdemΓ‘s, te gustarΓ­a que `fullName` se actualice cada vez que `firstName` o `lastName` cambien. Tu primer instinto podrΓ­a ser agregar una variable de estado `fullName` y actualizarla en un Efecto: -```js {5-9} +```js {expectedErrors: {'react-compiler': [8]}} {5-9} function Form() { const [firstName, setFirstName] = useState('Taylor'); const [lastName, setLastName] = useState('Swift'); @@ -66,7 +70,7 @@ function Form() { Este componente calcula `visibleTodos` tomando los `todos` que recibe a travΓ©s de _props_ y filtrΓ‘ndolos segΓΊn la _prop_ `filter`. PodrΓ­as sentirte tentado/a de almacenar el resultado en el estado y actualizarlo desde un Efecto: -```js {4-8} +```js {expectedErrors: {'react-compiler': [7]}} {4-8} function TodoList({ todos, filter }) { const [newTodo, setNewTodo] = useState(''); @@ -95,6 +99,12 @@ Usualmente, Β‘este cΓ³digo estΓ‘ bien! Pero tal vez `getFilteredTodos()` sea len Puedes almacenar en cachΓ© (o ["memoizar"](https://es.wikipedia.org/wiki/MemoizaciΓ³n)) un cΓ‘lculo costoso envolviΓ©ndolo en un Hook de React [`useMemo`](/reference/react/useMemo): +<Note> + +[React Compiler](/learn/react-compiler) can automatically memoize expensive calculations for you, eliminating the need for manual `useMemo` in many cases. + +</Note> + ```js {5-8} import { useMemo, useState } from 'react'; @@ -159,7 +169,7 @@ TambiΓ©n ten en cuenta que medir el rendimiento en desarrollo no te darΓ‘ los re Este componente `ProfilePage` recibe una _prop_ `userId`. La pΓ‘gina contiene una _input_ (entrada) de comentario, y tΓΊ usas una variable de estado `comment` para mantener este valor. Un dΓ­a, tΓΊ te das cuenta de un problema: cuando navegas de un perfil a otro, el estado `comment` no se reinicia. Como resultado, es fΓ‘cil publicar accidentalmente un comentario en el perfil de un usuario equivocado. Para arreglar el problema, tΓΊ quieres borrar la variable de estado `comment` cada vez que el `userId` cambie: -```js {4-7} +```js {expectedErrors: {'react-compiler': [6]}} {4-7} export default function ProfilePage({ userId }) { const [comment, setComment] = useState(''); @@ -202,7 +212,7 @@ A veces, es posible que desees reiniciar o ajustar una parte del estado cuando c Este componente `List` recibe una lista de `items` como prop y mantiene el _item_ seleccionado en la variable de estado `selection`. Deseas reiniciar la `selection` a `null` cada vez que la _prop_ `items` reciba un _array_ diferente: -```js {5-8} +```js {expectedErrors: {'react-compiler': [7]}} {5-8} function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selection, setSelection] = useState(null); @@ -431,7 +441,7 @@ function Game() { // βœ… Calcula todo el prΓ³ximo estado en el controlador de eventos. setCard(nextCard); if (nextCard.gold) { - if (goldCardCount <= 3) { + if (goldCardCount < 3) { setGoldCardCount(goldCardCount + 1); } else { setGoldCardCount(0); @@ -751,7 +761,11 @@ Esto asegura que cuando tu Efecto obtiene datos, todas las respuestas excepto la Manejar las condiciones de carrera no es la ΓΊnica dificultad al implementar la obtenciΓ³n de datos. TambiΓ©n podrΓ­as considerar el almacenamiento en cachΓ© de las respuestas (para que el usuario pueda hacer clic en "AtrΓ‘s" y ver la pantalla anterior instantΓ‘neamente), cΓ³mo obtener datos en el servidor (para que el HTML renderizado inicialmente por el servidor contenga el contenido obtenido en lugar de un indicador de carga (_spinner_)), y cΓ³mo evitar cascadas de red (para que un hijo pueda obtener datos sin tener que esperar por cada padre). +<<<<<<< HEAD **Estos problemas aplican a cualquier biblioteca de UI, no solo a React. Resolverlos no es trivial, por eso los [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) modernos ofrecen mecanismos incorporados mΓ‘s eficientes de obtenciΓ³n de datos que obtener datos en Efectos.** +======= +**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 no utilizas un framework (y no quieres construir el tuyo propio) pero te gustarΓ­a hacer que la obtenciΓ³n de datos desde Efectos sea mΓ‘s cΓ³moda, considera extraer tu lΓ³gica de obtenciΓ³n de datos en un Hook personalizado, como en este ejemplo: @@ -813,7 +827,7 @@ Simplifica este componente eliminando todo el estado y los Efectos innecesarios. <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [12, 16, 20]}} import { useState, useEffect } from 'react'; import { initialTodos, createTodo } from './todos.js'; @@ -1016,7 +1030,7 @@ Una soluciΓ³n es agregar una llamada a `useMemo` para cachear las tareas visible <Sandpack> -```js +```js {expectedErrors: {'react-compiler': [11]}} import { useState, useEffect } from 'react'; import { initialTodos, createTodo, getVisibleTodos } from './todos.js'; @@ -1357,7 +1371,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 ffec05c9b..be6036f8e 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -63,7 +63,7 @@ Tradicionalmente, cuando se creaban pΓ‘ginas web, los desarrolladores web usaban export default function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3Am.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3Am.jpg" alt="Katherine Johnson" /> ) @@ -99,7 +99,7 @@ El componente devuelve una etiqueta `<img />` con atributos `src` y `alt`. `<img Las sentencias `return` se pueden escribir todo en una lΓ­nea, como en este componente: ```js -return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />; +return <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />; ``` Pero si tu marcado no estΓ‘ todo en la misma lΓ­nea que la palabra clave `return`, debes ponerlo dentro de parΓ©ntesis como en este ejemplo: @@ -107,7 +107,7 @@ Pero si tu marcado no estΓ‘ todo en la misma lΓ­nea que la palabra clave `return ```js return ( <div> - <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> </div> ); ``` @@ -128,7 +128,7 @@ Ahora que has definido tu componente `Profile`, puedes anidarlo dentro de otros function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3As.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); @@ -163,10 +163,17 @@ Y `Profile` contiene aΓΊn mΓ‘s HTML: `<img />`. Al final lo que el navegador ve ```html <section> +<<<<<<< HEAD <h1>CientΓ­ficos increΓ­bles</h1> <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> +======= + <h1>Amazing scientists</h1> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> + <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </section> ``` @@ -215,7 +222,11 @@ Tu aplicaciΓ³n React comienza en un componente _"root"_ (raΓ­z). Normalmente, se La mayorΓ­a de las aplicaciones React usan componentes *root*. Esto significa que no solo usarΓ‘s componentes para piezas reutilizables como botones, sino tambiΓ©n para piezas mΓ‘s grandes como barras laterales, listas y, en ΓΊltima instancia, Β‘pΓ‘ginas completas! Los componentes son una forma prΓ‘ctica de organizar el cΓ³digo de UI y el marcado, incluso si algunos de ellos solo se utilicen una vez. +<<<<<<< HEAD [Los frameworks basados en React](/learn/start-a-new-react-project) llevan esto un paso mΓ‘s allΓ‘. En lugar de utilizar un archivo HTML vacΓ­o y dejar que React "se encargue" de gestionar la pΓ‘gina con JavaScript, *tambiΓ©n* generan el HTML automΓ‘ticamente a partir de tus componentes React. Esto permite que tu aplicaciΓ³n muestre algΓΊn contenido antes de que se cargue el cΓ³digo JavaScript. +======= +[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 AΓΊn asΓ­, muchos sitios web sΓ³lo usan React para [aΓ±adir interactividad a pΓ‘ginas HTML existentes](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). Tienen muchos componentes *root* en lugar de uno solo para toda la pΓ‘gina. Puedes utilizar la cantidad de React que necesites. @@ -248,7 +259,7 @@ Este ejemplo interactivo no funciona porque el componente *root* no estΓ‘ export function Profile() { return ( <img - src="https://i.imgur.com/lICfvbD.jpg" + src="https://react.dev/images/docs/scientists/lICfvbD.jpg" alt="Aklilu Lemma" /> ); @@ -273,7 +284,7 @@ AΓ±ade `export default` antes de la definiciΓ³n de la funciΓ³n de esta forma: export default function Profile() { return ( <img - src="https://i.imgur.com/lICfvbD.jpg" + src="https://react.dev/images/docs/scientists/lICfvbD.jpg" alt="Aklilu Lemma" /> ); @@ -306,7 +317,7 @@ Puede que tengas un error "Unexpected token" mientras intentas arreglar este eje ```js export default function Profile() { return - <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; + <img src="https://react.dev/images/docs/scientists/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; } ``` @@ -324,7 +335,7 @@ Puedes arreglar este componente moviendo la sentencia return a una sola lΓ­nea d ```js export default function Profile() { - return <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; + return <img src="https://react.dev/images/docs/scientists/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />; } ``` @@ -341,9 +352,9 @@ O poniendo el marcado JSX que se va a devolver dentro de parΓ©ntesis que se abre ```js export default function Profile() { return ( - <img - src="https://i.imgur.com/jA8hHMpm.jpg" - alt="Katsuko Saruhashi" + <img + src="https://react.dev/images/docs/scientists/jA8hHMpm.jpg" + alt="Katsuko Saruhashi" /> ); } @@ -367,7 +378,7 @@ Hay algo mal con cΓ³mo se declara y usa el componente `Profile`. ΒΏPuedes detect function profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); @@ -403,7 +414,7 @@ Cambia `function profile()` a `function Profile()`, y luego cambia cada `<profil function Profile() { return ( <img - src="https://i.imgur.com/QIrZWGIs.jpg" + src="https://react.dev/images/docs/scientists/QIrZWGIs.jpg" alt="Alan L. Hart" /> ); 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 +--- + +<Intro> + +React Performance tracks are specialized custom entries that appear on the Performance panel's timeline in your browser developer tools. + +</Intro> + +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. + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/overview.png" alt="React Performance Tracks" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/overview.dark.png" alt="React Performance Tracks" /> +</div> + +<InlineToc /> + +--- + +## 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 [`<Profiler>`](/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 `<Profiler>`. 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). + +<Pitfall> + +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. + +</Pitfall> + +### 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. + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/scheduler.png" alt="Scheduler track" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/scheduler.dark.png" alt="Scheduler track" /> +</div> + +#### 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. + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/scheduler-update.png" alt="Scheduler track: updates" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/scheduler-update.dark.png" alt="Scheduler track: updates" /> +</div> + +[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. + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/scheduler-cascading-update.png" alt="Scheduler track: cascading updates" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/scheduler-cascading-update.dark.png" alt="Scheduler track: cascading updates" /> +</div> + +[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. + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/components-render.png" alt="Components track: render durations" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/components-render.dark.png" alt="Components track: render durations" /> +</div> + +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. + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/components-effects.png" alt="Components track: effects durations" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/components-effects.dark.png" alt="Components track: effects durations" /> +</div> + +<Note> + +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. + +</Note> + +Additional events may be displayed during the render and effects phases: + +- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Mount</span> - A corresponding subtree of component renders or effects was mounted. +- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Unmount</span> - A corresponding subtree of component renders or effects was unmounted. +- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Reconnect</span> - Similar to Mount, but limited to cases when [`<Activity>`](/reference/react/Activity) is used. +- <span style={{padding: '0.125rem 0.25rem', backgroundColor: '#facc15', color: '#1f1f1fff'}}>Disconnect</span> - Similar to Unmount, but limited to cases when [`<Activity>`](/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. + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/changed-props.png" alt="Components track: changed props" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/changed-props.dark.png" alt="Components track: changed props" /> +</div> + +### Server {/*server*/} + +<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}> + <img className="w-full light-image" src="/images/docs/performance-tracks/server-overview.png" alt="React Server Performance Tracks" /> + <img className="w-full dark-image" src="/images/docs/performance-tracks/server-overview.dark.png" alt="React Server Performance Tracks" /> +</div> + +#### 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 +--- + +<Intro> + +`eslint-plugin-react-hooks` provides ESLint rules to enforce the [Rules of React](/reference/rules). + +</Intro> + +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. + +<Note> +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. +</Note> + +## 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 +--- + +<Intro> + +Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level. + +</Intro> + +## 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 <Child />; +} + +// ❌ 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 ( + <button style={{backgroundColor: color}}> + {children} + </button> + ); + }; +} + +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 ( + <button style={{backgroundColor: color}}> + {children} + </button> + ); +} + +function App() { + return ( + <> + <Button color="red">Red</Button> + <Button color="blue">Blue</Button> + </> + ); +} +``` 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 +--- + +<Intro> + +Validates the compiler [configuration options](/reference/react-compiler/configuration). + +</Intro> + +## 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 +--- + +<Intro> + +Validates usage of Error Boundaries instead of try/catch for errors in child components. + +</Intro> + +## 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 <ChildComponent />; // If this throws, catch won't help + } catch (error) { + return <div>Error occurred</div>; + } +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// βœ… Using error boundary +function Parent() { + return ( + <ErrorBoundary> + <ChildComponent /> + </ErrorBoundary> + ); +} +``` + +## 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 <div>{data}</div>; + } catch (error) { + return <div>Failed to load</div>; // Unreachable + } +} + +// βœ… Error boundary catches `use` errors +function App() { + return ( + <ErrorBoundary fallback={<div>Failed to load</div>}> + <Suspense fallback={<div>Loading...</div>}> + <DataComponent promise={fetchData()} /> + </Suspense> + </ErrorBoundary> + ); +} +``` \ 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 +--- + +<Intro> + +Validates that dependency arrays for React hooks contain all necessary dependencies. + +</Intro> + +## 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 <button onClick={logItems}>Log</button>; + +// βœ… 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 +--- + +<Intro> + +Validates configuration of [gating mode](/reference/react-compiler/gating). + +</Intro> + +## 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 +--- + +<Intro> + +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). + +</Intro> + +## 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 <div>Count: {renderCount}</div>; +} + +// ❌ Modifying window properties +function Component({userId}) { + window.currentUser = userId; // Global mutation + return <div>User: {userId}</div>; +} + +// ❌ Global array push +const events = []; +function Component({event}) { + events.push(event); // Mutating global array + return <div>Events: {events.length}</div>; +} + +// ❌ Cache manipulation +const cache = {}; +function Component({id}) { + if (!cache[id]) { + cache[id] = fetchData(id); // Modifying cache during render + } + return <div>{cache[id]}</div>; +} +``` + +### 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 ( + <button onClick={handleClick}> + Clicked: {clickCount} times + </button> + ); +} + +// βœ… Use context for global values +function Component() { + const user = useContext(UserContext); + return <div>User: {user.id}</div>; +} + +// βœ… Synchronize external state with React +function Component({title}) { + useEffect(() => { + document.title = title; // OK in effect + }, [title]); + + return <div>Page: {title}</div>; +} +``` 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 +--- + +<Intro> + +Validates against mutating props, state, and other values that [are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable). + +</Intro> + +## 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 ( + <ul> + {todos.map(todo => <li key={todo.id}>{todo.text}</li>)} + </ul> + ); +} +``` + +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 ( + <ul> + {todos.map(todo => <li key={todo.id}>{todo.text}</li>)} + </ul> + ); +} +``` + +### 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 +--- + +<Intro> + +Validates against usage of libraries which are incompatible with memoization (manual or automatic). + +</Intro> + +<Note> + +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. + +</Note> + +## 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 <div>Name: {name}</div>; // 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. + +<DeepDive> + +#### 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 ( + <div> + <input + value={field.name} + onChange={(e) => updateField('name', e.target.value)} + /> + <p>{greeting}</p> + </div> + ); +} +``` + +</DeepDive> + +### 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 <div>{value}</div>; +} + +// ❌ TanStack Table `useReactTable` +function Component({data}) { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + }); + // table instance uses interior mutability + return <Table table={table} />; +} +``` + +<Pitfall> + +#### 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 <span>Seconds passed: {timer.secondsPassed}</span>; +}); +``` + +</Pitfall> + +### 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 ( + <> + <input {...register('field')} /> + <div>Current value: {watchedValue}</div> + </> + ); +} +``` + +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 +--- + +<Intro> + +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). + +</Intro> + +## 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 <List items={filtered} />; +} + +// ❌ Missing dependencies in useCallback +function Component({ onUpdate, value }) { + const handleClick = useCallback(() => { + onUpdate(value); + }, [onUpdate]); // Missing 'value' + + return <button onClick={handleClick}>Update</button>; +} +``` + +### 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 <List items={filtered} />; +} + +// βœ… Or let the compiler handle it +function Component({ data, filter }) { + // No manual memoization needed + const filtered = data.filter(filter); + return <List items={filtered} />; +} +``` + +## 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 <List items={sorted} />; +} +``` + +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 <List items={sorted} />; +} +``` \ 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 +--- + +<Intro> + +Validates that [components/hooks are pure](/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions. + +</Intro> + +## 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 <div key={id}>Content</div>; +} + +// ❌ Date.now() for values +function Component() { + const timestamp = Date.now(); // Changes every render + return <div>Created at: {timestamp}</div>; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// βœ… Stable IDs from initial state +function Component() { + const [id] = useState(() => crypto.randomUUID()); + return <div key={id}>Content</div>; +} +``` + +## 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 <div>Current time: {Date.now()}</div>; +} +``` + +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 <div>Current time: {time}</div>; +} +``` \ 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 +--- + +<Intro> + +Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](/reference/react/useRef#usage). + +</Intro> + +## 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 `<div ref={someRef} />`). + + ```jsx + <input ref={inputRef} /> + ``` + +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 <div>{value}</div>; +} + +// ❌ Modifying ref during render +function Component({value}) { + const ref = useRef(null); + ref.current = value; // Don't modify during render + return <div />; +} +``` + +### 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 <div ref={ref} />; +} + +// βœ… Use state for UI values +function Component() { + const [count, setCount] = useState(0); + + return ( + <button onClick={() => setCount(count + 1)}> + {count} + </button> + ); +} + +// βœ… 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 <button onClick={handleClick}>Click</button>; +} +``` + +## 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 +--- + +<Intro> + +Validates that components and hooks follow the [Rules of Hooks](/reference/rules/rules-of-hooks). + +</Intro> + +## 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** + +<Note> + +### `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) + +</Note> + +### 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 <Loading />; +const [processed, setProcessed] = useState(data); + +// ❌ Hook in callback +<button onClick={() => { + const [clicked, setClicked] = useState(false); +}}/> + +// ❌ `use` in try/catch +try { + const data = use(promise); +} catch (e) { + // error handling +} + +// ❌ Hook at module level +const globalState = useState(0); // Outside component +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +function Component({ isSpecial, shouldFetch, fetchPromise }) { + // βœ… Hooks at top level + const [count, setCount] = useState(0); + const [name, setName] = useState(''); + + if (!isSpecial) { + return null; + } + + if (shouldFetch) { + // βœ… `use` can be conditional + const data = use(fetchPromise); + return <div>{data}</div>; + } + + return <div>{name}: {count}</div>; +} +``` + +## Troubleshooting {/*troubleshooting*/} + +### I want to fetch data based on some condition {/*conditional-data-fetching*/} + +You're trying to conditionally call useEffect: + +```js +// ❌ Conditional hook +if (isLoggedIn) { + useEffect(() => { + fetchUserData(); + }, []); +} +``` + +Call the hook unconditionally, check condition inside: + +```js +// βœ… Condition inside hook +useEffect(() => { + if (isLoggedIn) { + fetchUserData(); + } +}, [isLoggedIn]); +``` + +<Note> + +There are better ways to fetch data rather than in a useEffect. Consider using TanStack Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls. + +Learn more: [Fetching Data](/learn/synchronizing-with-effects#fetching-data) + +</Note> + +### I need different state for different scenarios {/*conditional-state-initialization*/} + +You're trying to conditionally initialize state: + +```js +// ❌ Conditional state +if (userType === 'admin') { + const [permissions, setPermissions] = useState(adminPerms); +} else { + const [permissions, setPermissions] = useState(userPerms); +} +``` + +Always call useState, conditionally set the initial value: + +```js +// βœ… Conditional initial value +const [permissions, setPermissions] = useState( + userType === 'admin' ? adminPerms : userPerms +); +``` + +## 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 treated as effects. This allows `useEffectEvent` and similar event functions to be called from your custom effect hooks. + +This shared configuration is used by both `rules-of-hooks` and `exhaustive-deps` rules, ensuring consistent behavior across all hook-related linting. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md new file mode 100644 index 000000000..64fa5c655 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md @@ -0,0 +1,93 @@ +--- +title: set-state-in-effect +--- + +<Intro> + +Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance. + +</Intro> + +## Rule Details {/*rule-details*/} + +Setting state immediately inside an effect forces React to restart the entire render cycle. When you update state in an effect, React must re-render your component, apply changes to the DOM, and then run effects again. This creates an extra render pass that could have been avoided by transforming data directly during render or deriving state from props. Transform data at the top level of your component instead. This code will naturally re-run when props or state change without triggering additional render cycles. + +Synchronous `setState` calls in effects trigger immediate re-renders before the browser can paint, causing performance issues and visual jank. React has to render twice: once to apply the state update, then again after effects run. This double rendering is wasteful when the same result could be achieved with a single render. + +In many cases, you may also not need an effect at all. Please see [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) for more information. + +## Common Violations {/*common-violations*/} + +This rule catches several patterns where synchronous setState is used unnecessarily: + +- Setting loading state synchronously +- Deriving state from props in effects +- Transforming data in effects instead of render + +### Invalid {/*invalid*/} + +Examples of incorrect code for this rule: + +```js +// ❌ Synchronous setState in effect +function Component({data}) { + const [items, setItems] = useState([]); + + useEffect(() => { + setItems(data); // Extra render, use initial state instead + }, [data]); +} + +// ❌ Setting loading state synchronously +function Component() { + const [loading, setLoading] = useState(false); + + useEffect(() => { + setLoading(true); // Synchronous, causes extra render + fetchData().then(() => setLoading(false)); + }, []); +} + +// ❌ Transforming data in effect +function Component({rawData}) { + const [processed, setProcessed] = useState([]); + + useEffect(() => { + setProcessed(rawData.map(transform)); // Should derive in render + }, [rawData]); +} + +// ❌ Deriving state from props +function Component({selectedId, items}) { + const [selected, setSelected] = useState(null); + + useEffect(() => { + setSelected(items.find(i => i.id === selectedId)); + }, [selectedId, items]); +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// βœ… setState in an effect is fine if the value comes from a ref +function Tooltip() { + const ref = useRef(null); + const [tooltipHeight, setTooltipHeight] = useState(0); + + useLayoutEffect(() => { + const { height } = ref.current.getBoundingClientRect(); + setTooltipHeight(height); + }, []); +} + +// βœ… Calculate during render +function Component({selectedId, items}) { + const selected = items.find(i => i.id === selectedId); + return <div>{selected?.name}</div>; +} +``` + +**When something can be calculated from the existing props or state, don't put it in state.** Instead, calculate it during rendering. This makes your code faster, simpler, and less error-prone. Learn more in [You Might Not Need an Effect](/learn/you-might-not-need-an-effect). diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md new file mode 100644 index 000000000..7517d5f92 --- /dev/null +++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md @@ -0,0 +1,110 @@ +--- +title: set-state-in-render +--- + +<Intro> + +Validates against unconditionally setting state during render, which can trigger additional renders and potential infinite render loops. + +</Intro> + +## Rule Details {/*rule-details*/} + +Calling `setState` during render unconditionally triggers another render before the current one finishes. This creates an infinite loop that crashes your app. + +## Common Violations {/*common-violations*/} + +### Invalid {/*invalid*/} + +```js {expectedErrors: {'react-compiler': [4]}} +// ❌ Unconditional setState directly in render +function Component({value}) { + const [count, setCount] = useState(0); + setCount(value); // Infinite loop! + return <div>{count}</div>; +} +``` + +### Valid {/*valid*/} + +```js +// βœ… Derive during render +function Component({items}) { + const sorted = [...items].sort(); // Just calculate it in render + return <ul>{sorted.map(/*...*/)}</ul>; +} + +// βœ… Set state in event handler +function Component() { + const [count, setCount] = useState(0); + return ( + <button onClick={() => setCount(count + 1)}> + {count} + </button> + ); +} + +// βœ… Derive from props instead of setting state +function Component({user}) { + const name = user?.name || ''; + const email = user?.email || ''; + return <div>{name}</div>; +} + +// βœ… 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 ( + <button onClick={() => setCount(count + 1)}> + {count} + </button> + ); +} +``` + +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 <button onClick={increment}>{count}</button>; +} +``` + +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 +--- + +<Intro> + +Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering. + +</Intro> + +## 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 <button onClick={() => setCount(count + 1)}>{count}</button>; + }; + + return <ChildComponent />; // State resets every render +} + +// ❌ Dynamic component creation +function Parent({type}) { + const Component = type === 'button' + ? () => <button>Click</button> + : () => <div>Text</div>; + + return <Component />; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// βœ… Components at module level +const ButtonComponent = () => <button>Click</button>; +const TextComponent = () => <div>Text</div>; + +function Parent({type}) { + const Component = type === 'button' + ? ButtonComponent // Reference existing component + : TextComponent; + + return <Component />; +} +``` + +## 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 ( + <button className={theme}> + Click me + </button> + ); + } + + return <ThemedButton />; +} +``` + +Pass data as props instead: + +```js +// βœ… Better: Pass props to static component +function ThemedButton({theme}) { + return ( + <button className={theme}> + Click me + </button> + ); +} + +function Parent() { + const [theme, setTheme] = useState('light'); + return <ThemedButton theme={theme} />; +} +``` + +<Note> + +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. + +</Note> \ 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 +--- + +<Intro> + +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. + +</Intro> + +## 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 <div>{result}</div>; +} + +// ❌ Using with statement +function Component() { + with (Math) { // Changes scope dynamically + return <div>{sin(PI / 2)}</div>; + } +} + +// ❌ Dynamic property access with eval +function Component({propName}) { + const value = eval(`props.${propName}`); + return <div>{value}</div>; +} +``` + +### Valid {/*valid*/} + +Examples of correct code for this rule: + +```js +// βœ… Use normal property access +function Component({propName, props}) { + const value = props[propName]; // Analyzable + return <div>{value}</div>; +} + +// βœ… Use standard Math methods +function Component() { + return <div>{Math.sin(Math.PI / 2)}</div>; +} +``` + +## 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 <div>Result: {result}</div>; +} +``` + +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 ( + <div> + <button onClick={calculate}>Calculate</button> + {result && <div>Result: {result}</div>} + </div> + ); +} +``` + +<Note> + +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. + +</Note> \ 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 +--- + +<Intro> + +Validates that the `useMemo` hook is used with a return value. See [`useMemo` docs](/reference/react/useMemo) for more information. + +</Intro> + +## 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 <div>{processed}</div>; // 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 <div>{processed}</div>; +} +``` + +## 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 <button onClick={handleClick}>Click me</button>; +} +``` + +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 <div>Current theme: {theme}</div>; +} +``` 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 +--- + +<Intro> + +The `compilationMode` option controls how the React Compiler selects which functions to compile. + +</Intro> + +```js +{ + compilationMode: 'infer' // or 'annotation', 'syntax', 'all' +} +``` + +<InlineToc /> + +--- + +## 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 <button>{props.label}</button>; +} + +// βœ… 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 ( + <ul> + {props.items.map(item => ( + <li key={item.id}>{item.name}</li> + ))} + </ul> + ); +} + +// This won't be compiled without the directive +function NormalComponent(props) { + return <div>{props.content}</div>; +} +``` + +### 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 <button>{label}</button>; +} + +// 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 <div>Content</div>; +} +``` + +--- + +## 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 <button>{props.label}</button>; +} + +// βœ… Will be compiled: PascalCase name +function Button(props) { + return <button>{props.label}</button>; +} + +// ❌ 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 +--- + +<Intro> +This guide helps library authors understand how to use React Compiler to ship optimized library code to their users. +</Intro> + +<InlineToc /> + +## 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: + +<TerminalBlock> +npm install -D babel-plugin-react-compiler@latest +</TerminalBlock> + +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: + +<TerminalBlock> +npm install react-compiler-runtime@latest +</TerminalBlock> + +```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 +--- + +<Intro> + +This page lists all configuration options available in React Compiler. + +</Intro> + +<Note> + +For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options. + +</Note> + +```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 +--- + +<Intro> +React Compiler directives are special string literals that control whether specific functions are compiled. +</Intro> + +```js +function MyComponent() { + "use memo"; // Opt this component into compilation + return <div>{/* ... */}</div>; +} +``` + +<InlineToc /> + +--- + +## 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 <div>This will be optimized</div>; +} + +// Opt out of compilation +function UnoptimizedComponent() { + "use no memo"; + return <div>This won't be optimized</div>; +} +``` + +### 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 <div>Compiled</div>; +} + +function Component2() { + return <div>Also compiled</div>; +} + +// Can be overridden at function level +function Component3() { + "use no memo"; // This overrides the module directive + return <div>Not compiled</div>; +} +``` + +### 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 <ThirdPartyComponent />; +} +``` + +--- + +## 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" +--- + +<Intro> + +`"use memo"` marks a function for React Compiler optimization. + +</Intro> + +<Note> + +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"`. + +</Note> + +<InlineToc /> + +--- + +## 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" +--- + +<Intro> + +`"use no memo"` prevents a function from being optimized by React Compiler. + +</Intro> + +<InlineToc /> + +--- + +## 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 +--- + +<Intro> + +The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime. + +</Intro> + +```js +{ + gating: { + source: 'my-feature-flags', + importSpecifierName: 'shouldUseCompiler' + } +} +``` + +<InlineToc /> + +--- + +## 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 <button>{props.label}</button>; +} + +// 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 +--- + +<Intro> + +The `logger` option provides custom logging for React Compiler events during compilation. + +</Intro> + +```js +{ + logger: { + logEvent(filename, event) { + console.log(`[Compiler] ${event.kind}: ${filename}`); + } + } +} +``` + +<InlineToc /> + +--- + +## 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 +--- + +<Intro> + +The `panicThreshold` option controls how the React Compiler handles errors during compilation. + +</Intro> + +```js +{ + panicThreshold: 'none' // Recommended +} +``` + +<InlineToc /> + +--- + +## 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 +--- + +<Intro> + +The `target` option specifies which React version the compiler should generate code for. + +</Intro> + +```js +{ + target: '19' // or '18', '17' +} +``` + +<InlineToc /> + +--- + +## 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 d3c86c064..6d4c8b8ff 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -90,8 +90,8 @@ React mostrarΓ‘ `<App />` en la raΓ­z (`root`) y se encargarΓ‘ de administrar el * Si llamas a `render` en la misma raΓ­z mΓ‘s de una vez, React actualizarΓ‘ el DOM segΓΊn sea necesario para reflejar el ΓΊltimo JSX que pasaste. React decidirΓ‘ quΓ© partes del DOM se pueden reutilizar y cuΓ‘les deben ser recreadas para ["emparejarlo"](/learn/preserving-and-resetting-state) con el Γ‘rbol renderizado previamente. Llamar a `render` en la misma raΓ­z nuevamente es similar a llamar a la [funciΓ³n `set`](/reference/react/useState#setstate) en el componente raΓ­z: React evita actualizaciones del DOM innecesarias. -* 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/client/flushSync) to ensure the initial render runs fully synchronously. - +* 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(<App />); @@ -113,7 +113,11 @@ Una aplicaciΓ³n completamente construida con React usualmente no tendrΓ‘ ninguna Esto es ΓΊtil sobre todo si el nodo del DOM de tu raΓ­z de React (o cualquiera de sus ancestros) puede ser eliminado del DOM por algΓΊn otro cΓ³digo. Por ejemplo, imagina un panel de pestaΓ±as de jQuery que elimine las pestaΓ±as inactivas del DOM. Si se elimina una pestaΓ±a, todo lo que contiene (incluidas las raΓ­ces de React) tambiΓ©n se eliminarΓ‘ del DOM. En ese caso, debes decirle a React que "detenga" la administraciΓ³n del contenido de la raΓ­z eliminada con la llamada a `root.unmount`. Si no, los componentes dentro de la raΓ­z eliminada no sabrΓ‘n cΓ³mo limpiar y liberar recursos globales como suscripciones. +<<<<<<< HEAD Llamar a `root.unmount` desmontarΓ‘ todos los componentes en la raΓ­z y "separarΓ‘" React del nodo del DOM raΓ­z, incluida la eliminaciΓ³n de cualquier controlador de evento o estado en el Γ‘rbol. +======= +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 #### ParΓ‘metros {/*root-unmount-parameters*/} @@ -197,7 +201,11 @@ function Counter() { </Sandpack> +<<<<<<< HEAD **Si tu aplicaciΓ³n estΓ‘ construida completamente con React, no deberΓ­as necesitar crear mΓ‘s raΓ­ces, o llamar a [`root.render`](#root-render) otra vez.** +======= +**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 A partir de este punto, React administrarΓ‘ el DOM de tu aplicaciΓ³n entera. Para agregar mΓ‘s componentes, [anΓ­dalos dentro del componente de la aplicaciΓ³n `App`.](/learn/importing-and-exporting-components) Cuando necesitas actualizar la interfaz de usuario (UI), cada uno de tus componentes puede lograrlo [con el uso de estado.](/reference/react/useState) Cuando necesitas mostrar contenido adicional como un modal o globos de ayuda fuera del nodo del DOM, [renderΓ­zalo con un portal.](/reference/react-dom/createPortal) @@ -209,7 +217,11 @@ Cuando tu HTML estΓ‘ vacΓ­o, el usuario ve una pΓ‘gina en blanco hasta que el c <div id="root"></div> ``` +<<<<<<< HEAD Β‘Esto puede sentirse muy lento! Para resolverlo, puedes generar el HTML inicial a partir de tus componentes [en el servidor o durante la compilaciΓ³n.](/reference/react-dom/server) Entonces tus visitantes pueden leer el texto, ver imΓ‘genes, y hacer clic en los enlaces antes de que se cargue cualquiera de los cΓ³digos de JavaScript. Recomendamos [utilizar un framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework) que tenga esta optimizaciΓ³n incorporada. Dependiendo de cuando se ejecuta, se llama *renderizado de lado del servidor (SSR)* o *generaciΓ³n de sitios estΓ‘ticos (SSG)* +======= +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 </Note> @@ -249,11 +261,11 @@ import { createRoot } from 'react-dom/client'; import { Comments, Navigation } from './Components.js'; const navDomNode = document.getElementById('navigation'); -const navRoot = createRoot(navDomNode); +const navRoot = createRoot(navDomNode); navRoot.render(<Navigation />); const commentDomNode = document.getElementById('comments'); -const commentRoot = createRoot(commentDomNode); +const commentRoot = createRoot(commentDomNode); commentRoot.render(<Comments />); ``` @@ -303,7 +315,7 @@ TambiΓ©n se puede crear un nodo del DOM nuevo con [`document.createElement()`](h ```js const domNode = document.createElement('div'); -const root = createRoot(domNode); +const root = createRoot(domNode); root.render(<Comment />); document.body.appendChild(domNode); // Puedes aΓ±adirlo en cualquier parte del documento ``` @@ -508,7 +520,7 @@ To fix, pass the root options to `createRoot(...)`, not `root.render(...)`: root.render(App, {onUncaughtError}); // βœ… Correct: pass options to createRoot. -const root = createRoot(container, {onUncaughtError}); +const root = createRoot(container, {onUncaughtError}); root.render(<App />); ``` diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 8c3b8f3d0..99971e1f5 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -295,7 +295,8 @@ import App from './App.js'; hydrateRoot(document.getElementById('root'), <App />); ``` -```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() { diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index a0b092f35..e91c3deb4 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -4,7 +4,11 @@ title: APIs del cliente React DOM <Intro> +<<<<<<< HEAD Las APIs de `react-dom/client` te permiten renderizar componentes de React en el cliente (en el navegador). Estas APIs son tΓ­picamente usadas en el nivel superior de tu aplicaciΓ³n para inicializar tu Γ‘rbol de React. Un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) podrΓ­a llamar a estas APIs por ti. La mayorΓ­a de tus componentes no necesitan importarlas o usarlas. +======= +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 </Intro> diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index e174b9de2..1b49a143f 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -40,6 +40,7 @@ Estas props especiales de React son compatibles con todos los componentes integr Estas propiedades DOM estΓ‘ndar tambiΓ©n son compatibles con todos los componentes integrados: +<<<<<<< HEAD * [`accessKey`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/accesskey): Un string. Especifica un acceso directo del teclado para el elemento. [Generalmente no se recomienda.](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/accesskey) * [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): Los atributos ARIA te permiten especificar la informaciΓ³n del Γ‘rbol de accesibilidad para este elemento. Consulta [atributos ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) para obtener una referencia completa. En React, todos los nombres de atributos ARIA son exactamente iguales que en HTML. * [`autoCapitalize`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/autocapitalize): Un string. Especifica si la entrada de texto que escribe el usuario se escribe en mayΓΊsculas y cΓ³mo. @@ -154,6 +155,122 @@ Estas propiedades DOM estΓ‘ndar tambiΓ©n son compatibles con todos los component * [`tabIndex`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/tabindex): Un nΓΊmero. Anula el comportamiento por defecto del botΓ³n Tab. [Evita utilizar valores distintos de -1 y 0.](https://www.tpgi.com/using-the-tabindex-attribute/) * [`title`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/title): Un string. Especifica el texto de informaciΓ³n de ayuda para el elemento. * [`translate`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/translate): Ya sea `'yes'` o `'no'`. Pasar `'no'` excluye el contenido del elemento de ser traducido. +======= +* [`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 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) and [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output), lets you [associate the label with some control.](/reference/react-dom/components/input#providing-a-label-for-an-input) Same as [`for` HTML attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for) React uses the standard DOM property names (`htmlFor`) instead of HTML attribute names. +* [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden): A boolean or a string. Specifies whether the element should be hidden. +* [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id): A string. Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with [`useId`](/reference/react/useId) to avoid clashes between multiple instances of the same component. +* [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is): A string. If specified, the component will behave like a [custom element.](/reference/react-dom/components#custom-html-elements) +* [`inputMode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode): A string. Specifies what kind of keyboard to display (for example, text, number or telephone). +* [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop): A string. Specifies which property the element represents for structured data crawlers. +* [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): A string. Specifies the language of the element. +* [`onAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation completes. +* `onAnimationEndCapture`: A version of `onAnimationEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when an iteration of a CSS animation ends, and another one begins. +* `onAnimationIterationCapture`: A version of `onAnimationIteration` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event): An [`AnimationEvent` handler](#animationevent-handler) function. Fires when a CSS animation starts. +* `onAnimationStartCapture`: `onAnimationStart`, but fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onAuxClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when a non-primary pointer button was clicked. +* `onAuxClickCapture`: A version of `onAuxClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* `onBeforeInput`: An [`InputEvent` handler](#inputevent-handler) function. Fires before the value of an editable element is modified. React does *not* yet use the native [`beforeinput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event) event, and instead attempts to polyfill it using other events. +* `onBeforeInputCapture`: A version of `onBeforeInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* `onBlur`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element lost focus. Unlike the built-in browser [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) event, in React the `onBlur` event bubbles. +* `onBlurCapture`: A version of `onBlur` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onClick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the primary button was clicked on the pointing device. +* `onClickCapture`: A version of `onClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onCompositionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) starts a new composition session. +* `onCompositionStartCapture`: A version of `onCompositionStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onCompositionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) completes or cancels a composition session. +* `onCompositionEndCapture`: A version of `onCompositionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onCompositionUpdate`](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event): A [`CompositionEvent` handler](#compositionevent-handler) function. Fires when an [input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) receives a new character. +* `onCompositionUpdateCapture`: A version of `onCompositionUpdate` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onContextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user tries to open a context menu. +* `onContextMenuCapture`: A version of `onContextMenu` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onCopy`](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to copy something into the clipboard. +* `onCopyCapture`: A version of `onCopy` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onCut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to cut something into the clipboard. +* `onCutCapture`: A version of `onCut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* `onDoubleClick`: A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the user clicks twice. Corresponds to the browser [`dblclick` event.](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event) +* `onDoubleClickCapture`: A version of `onDoubleClick` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onDrag`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event): A [`DragEvent` handler](#dragevent-handler) function. Fires while the user is dragging something. +* `onDragCapture`: A version of `onDrag` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onDragEnd`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user stops dragging something. +* `onDragEndCapture`: A version of `onDragEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onDragEnter`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the dragged content enters a valid drop target. +* `onDragEnterCapture`: A version of `onDragEnter` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onDragOver`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event): A [`DragEvent` handler](#dragevent-handler) function. Fires on a valid drop target while the dragged content is dragged over it. You must call `e.preventDefault()` here to allow dropping. +* `onDragOverCapture`: A version of `onDragOver` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onDragStart`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when the user starts dragging an element. +* `onDragStartCapture`: A version of `onDragStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onDrop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event): A [`DragEvent` handler](#dragevent-handler) function. Fires when something is dropped on a valid drop target. +* `onDropCapture`: A version of `onDrop` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* `onFocus`: A [`FocusEvent` handler](#focusevent-handler) function. Fires when an element receives focus. Unlike the built-in browser [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event, in React the `onFocus` event bubbles. +* `onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer. +* `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Fires when a key is pressed. +* `onKeyDownCapture`: A version of `onKeyDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead. +* `onKeyPressCapture`: A version of `onKeyPress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Fires when a key is released. +* `onKeyUpCapture`: A version of `onKeyUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element stops capturing a pointer. +* `onLostPointerCaptureCapture`: A version of `onLostPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onMouseDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is pressed down. +* `onMouseDownCapture`: A version of `onMouseDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onMouseEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves inside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered. +* [`onMouseLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element. Does not have a capture phase. Instead, `onMouseLeave` and `onMouseEnter` propagate from the element being left to the one being entered. +* [`onMouseMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer changes coordinates. +* `onMouseMoveCapture`: A version of `onMouseMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onMouseOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer moves outside an element, or if it moves into a child element. +* `onMouseOutCapture`: A version of `onMouseOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onMouseUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event): A [`MouseEvent` handler](#mouseevent-handler) function. Fires when the pointer is released. +* `onMouseUpCapture`: A version of `onMouseUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onPointerCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when the browser cancels a pointer interaction. +* `onPointerCancelCapture`: A version of `onPointerCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onPointerDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer becomes active. +* `onPointerDownCapture`: A version of `onPointerDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onPointerEnter`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerenter_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves inside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered. +* [`onPointerLeave`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerleave_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element. Does not have a capture phase. Instead, `onPointerLeave` and `onPointerEnter` propagate from the element being left to the one being entered. +* [`onPointerMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer changes coordinates. +* `onPointerMoveCapture`: A version of `onPointerMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onPointerOut`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and [a few other reasons.](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event) +* `onPointerOutCapture`: A version of `onPointerOut` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onPointerUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when a pointer is no longer active. +* `onPointerUpCapture`: A version of `onPointerUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onPaste`](https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event): A [`ClipboardEvent` handler](#clipboardevent-handler) function. Fires when the user tries to paste something from the clipboard. +* `onPasteCapture`: A version of `onPaste` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onScroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event): An [`Event` handler](#event-handler) function. Fires when an element has been scrolled. This event does not bubble. +* `onScrollCapture`: A version of `onScroll` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event): An [`Event` handler](#event-handler) function. Fires after the selection inside an editable element like an input changes. React extends the `onSelect` event to work for `contentEditable={true}` elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection). +* `onSelectCapture`: A version of `onSelect` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onTouchCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when the browser cancels a touch interaction. +* `onTouchCancelCapture`: A version of `onTouchCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onTouchEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are removed. +* `onTouchEndCapture`: A version of `onTouchEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onTouchMove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires one or more touch points are moved. +* `onTouchMoveCapture`: A version of `onTouchMove` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onTouchStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event): A [`TouchEvent` handler](#touchevent-handler) function. Fires when one or more touch points are placed. +* `onTouchStartCapture`: A version of `onTouchStart` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event): A [`TransitionEvent` handler](#transitionevent-handler) function. Fires when a CSS transition completes. +* `onTransitionEndCapture`: A version of `onTransitionEnd` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`onWheel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event): A [`WheelEvent` handler](#wheelevent-handler) function. Fires when the user rotates a wheel button. +* `onWheelCapture`: A version of `onWheel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) +* [`role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the element role explicitly for assistive technologies. +* [`slot`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles): A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example `<Layout left={<Sidebar />} right={<Content />} />`. +* [`spellCheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck): A boolean or null. If explicitly set to `true` or `false`, enables or disables spellchecking. +* [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex): A number. Overrides the default Tab button behavior. [Avoid using values other than `-1` and `0`.](https://www.tpgi.com/using-the-tabindex-attribute/) +* [`title`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title): A string. Specifies the tooltip text for the element. +* [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate): Either `'yes'` or `'no'`. Passing `'no'` excludes the element content from being translated. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a TambiΓ©n puedes pasar atributos personalizados como props, por ejemplo `mycustomprop="someValue"`. Esto puede ser ΓΊtil al integrar bibliotecas de terceros. El nombre del atributo personalizado debe estar en minΓΊsculas y no debe empezar con `on`. El valor se convertirΓ‘ a un string. Si pasas `null` o `undefined`, se eliminarΓ‘ el atributo personalizado. @@ -302,6 +419,7 @@ Algunos eventos de React no se asignan directamente a los eventos nativos del na Los objetos de evento de React implementan algunas de las propiedades estΓ‘ndar de [`Evento`](https://developer.mozilla.org/es/docs/Web/API/Event): +<<<<<<< HEAD * [`bubbles`](https://developer.mozilla.org/es/docs/Web/API/Event/bubbles): Un booleano. Devuelve si el evento se propaga a travΓ©s del DOM. * [`cancelable`](https://developer.mozilla.org/es/docs/Web/API/Event/cancelable): Un booleano. Devuelve si el evento se puede cancelar. * [`currentTarget`](https://developer.mozilla.org/es/docs/Web/API/Event/currentTarget): Un nodo del DOM. Devuelve el nodo al que se vincula el controlador de evento actual en el Γ‘rbol de React. @@ -310,6 +428,16 @@ Los objetos de evento de React implementan algunas de las propiedades estΓ‘ndar * [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): Un booleano. Devuelve si el evento fue iniciado por el usuario. * [`target`](https://developer.mozilla.org/es/docs/Web/API/Event/target): Un nodo del DOM. Devuelve el nodo en el que ha ocurrido el evento (que podrΓ­a ser un hijo distante) * [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): Un nΓΊmero. Devuelve la hora (en milisegundos) en la que ocurriΓ³ el evento. +======= +* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): A boolean. Returns whether the event bubbles through the DOM. +* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): A boolean. Returns whether the event can be canceled. +* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): A DOM node. Returns the node to which the current handler is attached in the React tree. +* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): A boolean. Returns whether `preventDefault` was called. +* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): A number. Returns which phase the event is currently in. +* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): A boolean. Returns whether the event was initiated by user. +* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): A DOM node. Returns the node on which the event has occurred (which could be a distant child). +* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): A number. Returns the time when the event occurred. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a AdemΓ‘s, los objetos de evento de React proporcionan estas propiedades: @@ -662,8 +790,13 @@ Un tipo de controlador de evento para [eventos tΓ‘ctiles.](https://developer.moz * [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/shiftKey) * [`touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) * [`targetTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches) +<<<<<<< HEAD TambiΓ©n incluye las propiedades heredadas de [`UIEvent`](https://developer.mozilla.org/es/docs/Web/API/UIEvent): +======= + + It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties: +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail) * [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view) @@ -795,7 +928,7 @@ import Avatar from './Avatar.js'; const user = { name: 'Hedy Lamarr', - imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', + imageUrl: 'https://react.dev/images/docs/scientists/yXOvdOSs.jpg', imageSize: 90, }; @@ -916,7 +1049,11 @@ export default function Form() { </Sandpack> +<<<<<<< HEAD Lee mΓ‘s sobre cΓ³mo [manipular el DOM con refs](/learn/manipulating-the-dom-with-refs) y [consulta mΓ‘s ejemplos.](/reference/react/useRef#examples-dom) +======= +Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#usage) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Para casos de uso mΓ‘s avanzados, el atributo ref tambiΓ©n acepta una [funciΓ³n callback.](#ref-callback) diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 115e6a4cd..1043b13a0 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -36,9 +36,9 @@ To create interactive controls for submitting information, render the [built-in #### Props {/*props*/} -`<form>` supports all [common element props.](/reference/react-dom/components/common#props) +`<form>` supports all [common element props.](/reference/react-dom/components/common#common-props) -[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` component. +[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission in a Transition following [the Action prop pattern](/reference/react/useTransition#exposing-action-props-from-components). The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` component. #### Caveats {/*caveats*/} @@ -229,8 +229,8 @@ export async function deliverMessage(message) { </Sandpack> -[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published' -[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/hooks/useOptimistic).' +[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentation page is published' +[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).' ### Handling form submission errors {/*handling-form-submission-errors*/} @@ -278,7 +278,7 @@ export default function Search() { Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that: -1. `<form>` be rendered by a [Server Component](/reference/rsc/use-client) +1. `<form>` be rendered by a [Client Component](/reference/rsc/use-client) 1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions) 1. the `useActionState` Hook be used to display the error message diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index 64dcf76fc..9289b4d9e 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -162,16 +162,138 @@ Similar al [estΓ‘ndar DOM,](https://developer.mozilla.org/es/docs/Web/API/Docume ### Elementos HTML personalizados {/*custom-html-elements*/} +<<<<<<< HEAD Si renderizas una etiqueta con un guiΓ³n, como `<my-element>`, React asumirΓ‘ que quieres renderizar un [elemento HTML personalizado.](https://developer.mozilla.org/es/docs/Web/Web_Components/Using_custom_elements) En React, el renderizado de elementos personalizados funciona de manera diferente desde el renderizado de etiquetas integradas del navegador: - Todas las props de los elementos personalizados son serializadas a strings y siempre se configuran usando atributos. +======= +If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - Los elementos personalizados aceptan `class` en vez de `className`, y `for` en vez de `htmlFor`. Si renderizas un elemento HTML integrado en el navegador con un atributo [`is`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/is), tambiΓ©n serΓ‘ tratado como un elemento personalizado. +#### Setting values on custom elements {/*attributes-vs-properties*/} + +Custom elements have two methods of passing data into them: + +1) Attributes: Which are displayed in markup and can only be set to string values +2) Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values + +By default, React will pass values bound in JSX as attributes: + +```jsx +<my-element value="Hello, world!"></my-element> +``` + +Non-string JavaScript values passed to custom elements will be serialized by default: + +```jsx +// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()` +<my-element value={[1,2,3]}></my-element> +``` + +React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction: + +<Sandpack> + +```js src/index.js hidden +import {MyElement} from './MyElement.js'; +import { createRoot } from 'react-dom/client'; +import {App} from "./App.js"; + +customElements.define('my-element', MyElement); + +const root = createRoot(document.getElementById('root')) +root.render(<App />); +``` + +```js src/MyElement.js active +export class MyElement extends HTMLElement { + constructor() { + super(); + // The value here will be overwritten by React + // when initialized as an element + this.value = undefined; + } + + connectedCallback() { + this.innerHTML = this.value.join(", "); + } +} +``` + +```js src/App.js +export function App() { + return <my-element value={[1,2,3]}></my-element> +} +``` + +</Sandpack> + +#### Listening for events on custom elements {/*custom-element-events*/} + +A common pattern when using custom elements is that they may dispatch [`CustomEvent`s](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) rather than accept a function to call when an event occur. You can listen for these events using an `on` prefix when binding to the event via JSX. + +<Sandpack> + +```js src/index.js hidden +import {MyElement} from './MyElement.js'; +import { createRoot } from 'react-dom/client'; +import {App} from "./App.js"; + +customElements.define('my-element', MyElement); + +const root = createRoot(document.getElementById('root')) +root.render(<App />); +``` + +```javascript src/MyElement.js +export class MyElement extends HTMLElement { + constructor() { + super(); + this.test = undefined; + this.emitEvent = this._emitEvent.bind(this); + } + + _emitEvent() { + const event = new CustomEvent('speak', { + detail: { + message: 'Hello, world!', + }, + }); + this.dispatchEvent(event); + } + + connectedCallback() { + this.el = document.createElement('button'); + this.el.innerText = 'Say hi'; + this.el.addEventListener('click', this.emitEvent); + this.appendChild(this.el); + } + + disconnectedCallback() { + this.el.removeEventListener('click', this.emitEvent); + } +} +``` + +```jsx src/App.js active +export function App() { + return ( + <my-element + onspeak={e => console.log(e.detail.message)} + ></my-element> + ) +} +``` + +</Sandpack> + <Note> +<<<<<<< HEAD [Una versiΓ³n futura de React incluirΓ‘ un soporte mΓ‘s completo para elementos personalizados.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286) Puedes probar actualizando los paquetes de React a la versiΓ³n experimental mΓ‘s reciente: @@ -180,6 +302,16 @@ Puedes probar actualizando los paquetes de React a la versiΓ³n experimental mΓ‘s - `react-dom@experimental` Las versiones experimentales de React pueden contener errores. No las uses en producciΓ³n. +======= +Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events: + +```jsx +// Listens for `say-hi` events +<my-element onsay-hi={console.log}></my-element> +// Listens for `sayHi` events +<my-element onsayHi={console.log}></my-element> +``` +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> --- diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md index ed6bce81b..23e94177f 100644 --- a/src/content/reference/react-dom/components/input.md +++ b/src/content/reference/react-dom/components/input.md @@ -30,7 +30,11 @@ Para mostrar un input, renderiza el componente [`<input>` incorporado en el nave #### Props {/*props*/} +<<<<<<< HEAD `<input>` admite todas las [props comunes de los elementos.](/reference/react-dom/components/common#props) +======= +`<input>` supports all [common element props.](/reference/react-dom/components/common#common-props) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a - [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props). @@ -212,7 +216,7 @@ export default function MyForm() { type="radio" name="myRadio" value="option2" - defaultChecked={true} + defaultChecked={true} /> OpciΓ³n 2 </label> diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index 41236eb3d..6d374807c 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -30,7 +30,7 @@ To link to external resources such as stylesheets, fonts, and icons, or to annot #### Props {/*props*/} -`<link>` supports all [common element props.](/reference/react-dom/components/common#props) +`<link>` supports all [common element props.](/reference/react-dom/components/common#common-props) * `rel`: a string, required. Specifies the [relationship to the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). React [treats links with `rel="stylesheet"` differently](#special-rendering-behavior) from other links. @@ -151,7 +151,7 @@ export default function SiteMapPage() { ### Controlling stylesheet precedence {/*controlling-stylesheet-precedence*/} -Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. +Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. <SandpackWithHTMLOutput> diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md index 2173ce002..35a95c5aa 100644 --- a/src/content/reference/react-dom/components/meta.md +++ b/src/content/reference/react-dom/components/meta.md @@ -30,11 +30,11 @@ To add document metadata, render the [built-in browser `<meta>` component](https #### Props {/*props*/} -`<meta>` supports all [common element props.](/reference/react-dom/components/common#props) +`<meta>` supports all [common element props.](/reference/react-dom/components/common#common-props) It should have *exactly one* of the following props: `name`, `httpEquiv`, `charset`, `itemProp`. The `<meta>` component does something different depending on which of these props is specified. -* `name`: a string. Specifies the [kind of metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) to be attached to the document. +* `name`: a string. Specifies the [kind of metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) to be attached to the document. * `charset`: a string. Specifies the character set used by the document. The only valid value is `"utf-8"`. * `httpEquiv`: a string. Specifies a directive for processing the document. * `itemProp`: a string. Specifies metadata about a particular item within the document rather than the document as a whole. @@ -42,9 +42,9 @@ It should have *exactly one* of the following props: `name`, `httpEquiv`, `chars #### Special rendering behavior {/*special-rendering-behavior*/} -React will always place the DOM element corresponding to the `<meta>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<meta>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<meta>` components itself. +React will always place the DOM element corresponding to the `<meta>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<meta>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<meta>` components itself. -There is one exception to this: if `<meta>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page. +There is one exception to this: if `<meta>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page. --- @@ -52,7 +52,7 @@ There is one exception to this: if `<meta>` has an [`itemProp`](https://develope ### Annotating the document with metadata {/*annotating-the-document-with-metadata*/} -You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document `<head>` regardless of where in the React tree it is rendered. +You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document `<head>` regardless of where in the React tree it is rendered. ```html <meta name="author" content="John Smith" /> @@ -83,7 +83,7 @@ export default function SiteMapPage() { ### Annotating specific items within the document with metadata {/*annotating-specific-items-within-the-document-with-metadata*/} -You can use the `<meta>` component with the `itemProp` prop to annotate specific items within the document with metadata. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component. +You can use the `<meta>` component with the `itemProp` prop to annotate specific items within the document with metadata. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component. ```js <section itemScope> diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md index 33d46f1ae..c850362c3 100644 --- a/src/content/reference/react-dom/components/option.md +++ b/src/content/reference/react-dom/components/option.md @@ -36,7 +36,11 @@ El [componente integrado `<option>` del navegador](https://developer.mozilla.org #### Props {/*props*/} +<<<<<<< HEAD `<option>` es compatible con todas las [props de elementos comunes.](/reference/react-dom/components/common#props) +======= +`<option>` supports all [common element props.](/reference/react-dom/components/common#common-props) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a AdemΓ‘s, `<option>` admite estas props: @@ -80,3 +84,7 @@ select { margin: 5px; } ``` </Sandpack> +<<<<<<< HEAD +======= + +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md index 384fd7074..c37eba0a1 100644 --- a/src/content/reference/react-dom/components/progress.md +++ b/src/content/reference/react-dom/components/progress.md @@ -30,7 +30,11 @@ Para mostrar un indicador de progreso, renderiza el componente [`<progress>` inc #### Props {/*props*/} +<<<<<<< HEAD `<progress>` admite todas las [propiedades comunes de los elementos.](/reference/react-dom/components/common#props) +======= +`<progress>` supports all [common element props.](/reference/react-dom/components/common#common-props) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a AdemΓ‘s, `<progress>` admite estas propiedades: diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md index 6bf3d83c7..06032a893 100644 --- a/src/content/reference/react-dom/components/script.md +++ b/src/content/reference/react-dom/components/script.md @@ -31,7 +31,7 @@ To add inline or external scripts to your document, render the [built-in browser #### Props {/*props*/} -`<script>` supports all [common element props.](/reference/react-dom/components/common#props) +`<script>` supports all [common element props.](/reference/react-dom/components/common#common-props) It should have *either* `children` or a `src` prop. @@ -46,7 +46,7 @@ Other supported props: * `integrity`: a string. A cryptographic hash of the script, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). * `noModule`: a boolean. Disables the script in browsers that support ES modules β€” allowing for a fallback script for browsers that do not. * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. -* `referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) when fetching the script and any resources that the script fetches in turn. +* `referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) when fetching the script and any resources that the script fetches in turn. * `type`: a string. Says whether the script is a [classic script, ES module, or import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type). Props that disable React's [special treatment of scripts](#special-rendering-behavior): diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md index fe229d602..95b654e8b 100644 --- a/src/content/reference/react-dom/components/select.md +++ b/src/content/reference/react-dom/components/select.md @@ -36,7 +36,11 @@ Para mostrar un recuadro de selecciΓ³n, renderiza el componente [nativo del nave #### Props {/*props*/} +<<<<<<< HEAD `<select>` soporta todos los [elementos prop comunes.](/reference/react-dom/components/common#props) +======= +`<select>` supports all [common element props.](/reference/react-dom/components/common#common-props) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Puedes [hacer un recuadro de selecciΓ³n controlado](#controlling-a-select-box-with-a-state-variable) al pasar una prop `value`: diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md index 39df92d9f..561c207d1 100644 --- a/src/content/reference/react-dom/components/style.md +++ b/src/content/reference/react-dom/components/style.md @@ -30,7 +30,7 @@ To add inline styles to your document, render the [built-in browser `<style>` co #### Props {/*props*/} -`<style>` supports all [common element props.](/reference/react-dom/components/common#props) +`<style>` supports all [common element props.](/reference/react-dom/components/common#common-props) * `children`: a string, required. The contents of the stylesheet. * `precedence`: a string. Tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". Many style systems can work fine using a single precedence value because style rules are atomic. Stylesheets with the same precedence go together whether they are `<link>` or inline `<style>` tags or loaded using [`preinit`](/reference/react-dom/preinit) functions. @@ -49,7 +49,7 @@ React can move `<style>` components to the document's `<head>`, de-duplicate ide To opt into this behavior, provide the `href` and `precedence` props. React will de-duplicate styles if they have the same `href`. The precedence prop tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other. -This special treatment comes with two caveats: +This special treatment comes with three caveats: * React will ignore changes to props after the style has been rendered. (React will issue a warning in development if this happens.) * React will drop all extraneous props when using the `precedence` prop (beyond `href` and `precedence`). diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md index 351f6ce12..7f93c5ad6 100644 --- a/src/content/reference/react-dom/components/textarea.md +++ b/src/content/reference/react-dom/components/textarea.md @@ -30,7 +30,11 @@ Para mostrar un text area, renderiza el componente [`<textarea>` que viene integ #### Props {/*props*/} +<<<<<<< HEAD `<textarea>` soporta todas [ las props comunes de los elementos.](/reference/react-dom/components/common#props) +======= +`<textarea>` supports all [common element props.](/reference/react-dom/components/common#common-props) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Puedes [hacer un text area controlado](#controlling-a-text-area-with-a-state-variable) pasando la prop `value`: diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md index 005939046..9e4d8e65a 100644 --- a/src/content/reference/react-dom/components/title.md +++ b/src/content/reference/react-dom/components/title.md @@ -30,17 +30,17 @@ To specify the title of the document, render the [built-in browser `<title>` com #### Props {/*props*/} -`<title>` supports all [common element props.](/reference/react-dom/components/common#props) +`<title>` supports all [common element props.](/reference/react-dom/components/common#common-props) * `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text. #### Special rendering behavior {/*special-rendering-behavior*/} -React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself. +React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself. There are two exception to this: * If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title). -* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page. +* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page. <Pitfall> diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index c1cb86c10..bfb75a6be 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -50,7 +50,11 @@ Un portal modifica solamente la ubicaciΓ³n fΓ­sica del nodo de DOM, mientras que * `domNode`: Un nodo de DOM, como el que devuelve `document.getElementById()`. El nodo debe existir previamente. Si durante una actualizaciΓ³n se pasa un nodo de DOM diferente, el contenido del portal se volverΓ‘ a crear. +<<<<<<< HEAD * **opcional** `key`: Un valor ΓΊnico en forma de string o nΓΊmero que se usarΓ‘ como [key](/learn/rendering-lists/#keeping-list-items-in-order-with-key) para el portal. +======= +* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Devuelve {/*returns*/} @@ -240,7 +244,11 @@ export default function ModalContent({ onClose }) { Es importante garantizar la accesibilidad de tu aplicaciΓ³n al utilizar portales. Para ello, puede que tengas que gestionar el foco del teclado para que el usuario pueda navegar dentro y fuera del portal de forma natural. +<<<<<<< HEAD Sigue la [GuΓ­a de CreaciΓ³n de Ventanas Modales con WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) al crear portales. Si usas paquetes de la comunidad, asegΓΊrate de que sean accesibles y sigan estas pautas. +======= +Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Pitfall> diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md index 829319641..eaadfe69a 100644 --- a/src/content/reference/react-dom/flushSync.md +++ b/src/content/reference/react-dom/flushSync.md @@ -133,3 +133,75 @@ Sin `flushSync`, el diΓ‘logo de impresiΓ³n mostrarΓ‘ `isPrinting` como "no". Est La mayorΓ­a de las veces, `flushSync` puede evitarse, asΓ­ que utiliza `flushSync` como ΓΊltimo recurso. </Pitfall> + +--- + +## Troubleshooting {/*troubleshooting*/} + +### I'm getting an error: "flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/} + + +React cannot `flushSync` in the middle of a render. If you do, it will noop and warn: + +<ConsoleBlock level="error"> + +Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task. + +</ConsoleBlock> + +This includes calling `flushSync` inside: + +- rendering a component. +- `useLayoutEffect` or `useEffect` hooks. +- Class component lifecycle methods. + +For example, calling `flushSync` in an Effect will noop and warn: + +```js +import { useEffect } from 'react'; +import { flushSync } from 'react-dom'; + +function MyComponent() { + useEffect(() => { + // 🚩 Wrong: calling flushSync inside an effect + flushSync(() => { + setSomething(newValue); + }); + }, []); + + return <div>{/* ... */}</div>; +} +``` + +To fix this, you usually want to move the `flushSync` call to an event: + +```js +function handleClick() { + // βœ… Correct: flushSync in event handlers is safe + flushSync(() => { + setSomething(newValue); + }); +} +``` + + +If it's difficult to move to an event, you can defer `flushSync` in a microtask: + +```js {3,7} +useEffect(() => { + // βœ… Correct: defer flushSync to a microtask + queueMicrotask(() => { + flushSync(() => { + setSomething(newValue); + }); + }); +}, []); +``` + +This will allow the current render to finish and schedule another syncronous render to flush the updates. + +<Pitfall> + +`flushSync` can significantly hurt performance, but this particular pattern is even worse for performance. Exhaust all other options before calling `flushSync` in a microtask as an escape hatch. + +</Pitfall> diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md index 869e53c4a..fb9a6f929 100644 --- a/src/content/reference/react-dom/hooks/index.md +++ b/src/content/reference/react-dom/hooks/index.md @@ -4,7 +4,11 @@ title: "Hooks integrados de React DOM" <Intro> +<<<<<<< HEAD El paquete de `react-dom` contiene Hooks que solo se admiten para aplicaciones web (que se ejecutan en el entorno DOM del navegador). Estos Hooks no son compatibles en entornos que no son de navegador, como en aplicaciones de iOS, Android o Windows. Si estΓ‘s buscando Hooks que sean compatibles en navegadores web *y otros entornos*, consulta [la pΓ‘gina de Hooks de React](/reference/react). Esta pΓ‘gina enumera todos los Hooks en el paquete `react-dom`. +======= +The `react-dom` package contains Hooks that are only supported for web applications (which run in the browser DOM environment). These Hooks are not supported in non-browser environments like iOS, Android, or Windows applications. If you are looking for Hooks that are supported in web browsers *and other environments* see [the React Hooks page](/reference/react/hooks). This page lists all the Hooks in the `react-dom` package. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Intro> diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 3ed5f5d62..6df46fca5 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -40,7 +40,11 @@ export default function App() { } ``` +<<<<<<< HEAD Para obtener informaciΓ³n de estado, el componente de `Enviar` tiene que ser renderizado dentro de un `<form>`. El Hook retorna informaciΓ³n como la propiedad <CodeStep step={1}>`pending`</CodeStep> que te dice si el formulario se estΓ‘ enviando activamente. +======= +To get status information, the `Submit` component must be rendered within a `<form>`. The Hook returns information like the <CodeStep step={1}>`pending`</CodeStep> property which tells you if the form is actively submitting. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a En el ejemplo de arriba, `Enviar` usa esta informaciΓ³n para deshabilitar la pulsaciΓ³n de `<button>` mientras el formulario se estΓ‘ enviando. @@ -65,8 +69,13 @@ Un objeto de `status` con las siguientes propiedades: #### Advertencias {/*caveats*/} +<<<<<<< HEAD * El Hook `useFormStatus` debe llamarse desde un componente que se renderiza dentro de un `<form>`. * `useFormStatus` solo retornarΓ‘ informaciΓ³n de estado para un `<form>` padre. No retornarΓ‘ informaciΓ³n de estado a ningΓΊn `<form>` renderizado en ese mismo componente o componente hijos. +======= +* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`. +* `useFormStatus` will only return status information for a parent `<form>`. It will not return status information for any `<form>` rendered in that same component or children components. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- @@ -75,7 +84,11 @@ Un objeto de `status` con las siguientes propiedades: ### Muestra un estado pendiente durante el envΓ­o de un formulario {/*display-a-pending-state-during-form-submission*/} Para mostrar un estado pendiente mientras un formulario se estΓ‘ enviando, puedes llamar al Hook `useFormStatus` en un componente renderizado en un `<form>` y leer la propiedad `pending` que retorna. +<<<<<<< HEAD AquΓ­, usamos la propiedad `pending` para indicar que el formulario se estΓ‘ enviando. +======= +Here, we use the `pending` property to indicate the form is submitting. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a <Sandpack> @@ -110,7 +123,7 @@ export async function submitForm(query) { await new Promise((res) => setTimeout(res, 1000)); } ``` -</Sandpack> +</Sandpack> <Pitfall> @@ -131,8 +144,13 @@ En su lugar llama a `useFormStatus` desde dentro de un componente que se encuent ```js function Submit() { +<<<<<<< HEAD // βœ… `pending` se derivarΓ‘ del formulario que envuelve el componente Enviar const { pending } = useFormStatus(); +======= + // βœ… `pending` will be derived from the form that wraps the Submit component + const { pending } = useFormStatus(); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a return <button disabled={pending}>...</button>; } @@ -215,7 +233,7 @@ button { ``` -</Sandpack> +</Sandpack> --- @@ -223,7 +241,11 @@ button { ### `status.pending` nunca es `true` {/*pending-is-never-true*/} +<<<<<<< HEAD `useFormStatus` solo retornarΓ‘ informaciΓ³n de estado a un `<form>` padre. +======= +`useFormStatus` will only return status information for a parent `<form>`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Si el componente que llama a `useFormStatus` no estΓ‘ anidado en un `<form>`, `status.pending` siempre retornarΓ‘ `false`. Verifica que `useFormStatus` estΓ‘ siendo llamado en un componente que es hijo de un elemento `<form>`. diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md index 1671f891c..ffb9de851 100644 --- a/src/content/reference/react-dom/index.md +++ b/src/content/reference/react-dom/index.md @@ -21,7 +21,11 @@ Puedes importar las siguientes APIs en tus componentes, pero su uso es poco com Estas APIs se pueden utilizar para hacer las aplicaciones mΓ‘s rΓ‘pidas al precargar recursos como scripts, hojas de estilos y fuentes tan pronto como sepas que los necesitarΓ‘s, por ejemplo antes de navegar a otra pΓ‘gina donde se utilizarΓ‘n los recursos. +<<<<<<< HEAD [Los frameworks basados en React](/learn/start-a-new-react-project) con frecuencia manejan la carga de recursos por ti, por lo que es posible que no necesites llamar a estas APIs tΓΊ mismo. Consulta la documentaciΓ³n de tu framework para mΓ‘s detalles. +======= +[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call these APIs yourself. Consult your framework's documentation for details. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a * [`prefetchDNS`](/reference/react-dom/prefetchDNS) te permite precargar la direcciΓ³n IP de un nombre de dominio DNS al que esperas conectarte. * [`preconnect`](/reference/react-dom/preconnect) te permite conectarte a un servidor del que esperas solicitar recursos, incluso si aΓΊn no sabes quΓ© recursos necesitarΓ‘s. diff --git a/src/content/reference/react-dom/preconnect.md b/src/content/reference/react-dom/preconnect.md index 2b4bee8da..582d765b6 100644 --- a/src/content/reference/react-dom/preconnect.md +++ b/src/content/reference/react-dom/preconnect.md @@ -34,7 +34,11 @@ function AppRoot() { [Ver mΓ‘s ejemplos a continuaciΓ³n.](#usage) +<<<<<<< HEAD La funciΓ³n `preconnect` proporciona al navegador una sugerencia de que deberΓ­a abrir una conexiΓ³n al servidor dado. Si el navegador decide hacerlo, esto puede acelerar la carga de recursos desde ese servidor. +======= +The `preconnect` function provides the browser with a hint that it should open a connection to the given server. If the browser chooses to do so, this can speed up the loading of resources from that server. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### ParΓ‘metros {/*parameters*/} diff --git a/src/content/reference/react-dom/prefetchDNS.md b/src/content/reference/react-dom/prefetchDNS.md index 7efaf4e52..68c565747 100644 --- a/src/content/reference/react-dom/prefetchDNS.md +++ b/src/content/reference/react-dom/prefetchDNS.md @@ -34,7 +34,11 @@ function AppRoot() { [Ver mΓ‘s ejemplos a continuaciΓ³n.](#usage) +<<<<<<< HEAD La funciΓ³n `prefetchDNS` proporciona al navegador una sugerencia de que deberΓ­a buscar la direcciΓ³n IP de un servidor determinado. Si el navegador decide hacerlo, esto puede acelerar la carga de recursos desde ese servidor. +======= +The prefetchDNS function provides the browser with a hint that it should look up the IP address of a given server. If the browser chooses to do so, this can speed up the loading of resources from that server. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### ParΓ‘metros {/*parameters*/} diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md index 980c0e8e4..1f2a06a13 100644 --- a/src/content/reference/react-dom/preinit.md +++ b/src/content/reference/react-dom/preinit.md @@ -4,7 +4,11 @@ title: preinit <Note> +<<<<<<< HEAD Los [frameworks basados en React](/learn/start-a-new-react-project) frecuentemente manejan la carga de recursos por ti, por lo que es posible que no necesites llamar a esta API tΓΊ mismo. Consulta la documentaciΓ³n de tu framework para mΓ‘s detalles. +======= +[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> @@ -44,6 +48,7 @@ La funciΓ³n `preinit` proporciona al navegador una sugerencia de que deberΓ­a co #### ParΓ‘metros {/*parameters*/} +<<<<<<< HEAD * `href`: una cadena. La URL del recurso que deseas descargar y ejecutar. * `options`: un objeto. Contiene las siguientes propiedades: * `as`: una cadena requerida. El tipo de recurso. Sus valores posibles son `script` y `style`. @@ -52,6 +57,16 @@ La funciΓ³n `preinit` proporciona al navegador una sugerencia de que deberΓ­a co * `integrity`: una cadena. Un hash criptogrΓ‘fico del recurso, para [verificar su autenticidad](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). * `nonce`: una cadena. Un [nonce criptogrΓ‘fico para permitir el recurso](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) al usar una PolΓ­tica de Seguridad de Contenido estricta. * `fetchPriority`: una cadena. Sugiere una prioridad relativa para obtener el recurso. Los valores posibles son `auto` (el predeterminado), `high` y `low`. +======= +* `href`: a string. The URL of the resource you want to download and execute. +* `options`: an object. It contains the following properties: + * `as`: a required string. The type of resource. Its possible values are `script` and `style`. + * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`. + * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. + * `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). + * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. + * `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Devuelve {/*returns*/} diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md index dff867fa7..674fe510d 100644 --- a/src/content/reference/react-dom/preinitModule.md +++ b/src/content/reference/react-dom/preinitModule.md @@ -4,7 +4,11 @@ title: preinitModule <Note> +<<<<<<< HEAD [Los frameworks basados en React](/learn/start-a-new-react-project) con frecuencia manejan la carga de recursos por ti, por lo que es posible que no necesites llamar a esta API tΓΊ mismo. Consulta la documentaciΓ³n de tu framework para mΓ‘s detalles. +======= +[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> @@ -44,12 +48,21 @@ La funciΓ³n `preinitModule` proporciona al navegador una seΓ±al de que deberΓ­a #### ParΓ‘metros {/*parameters*/} +<<<<<<< HEAD * `href`: un string. La URL del mΓ³dulo que deseas descargar y ejecutar. * `options`: un objeto. Contiene las siguientes propiedades: * `as`: un string requerido. Debe ser `'script'`. * `crossOrigin`: un string. La [polΓ­tica de CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) a utilizar. Sus valores posibles son `anonymous` y `use-credentials`. * `integrity`: un string. Un hash criptogrΓ‘fico del mΓ³dulo, para [verificar su autenticidad](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). * `nonce`: un string. Un [nonce criptogrΓ‘fico para permitir el mΓ³dulo](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) cuando se utiliza una PolΓ­tica de Seguridad de Contenido estricta. +======= +* `href`: a string. The URL of the module you want to download and execute. +* `options`: an object. It contains the following properties: + * `as`: a required string. It must be `'script'`. + * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. + * `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). + * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Devuelve {/*returns*/} diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md index ac8588f7e..32cc5082e 100644 --- a/src/content/reference/react-dom/preload.md +++ b/src/content/reference/react-dom/preload.md @@ -4,7 +4,11 @@ title: preload <Note> +<<<<<<< HEAD Los [frameworks basados en React](/learn/start-a-new-react-project) frecuentemente manejan la carga de recursos por ti, por lo que es posible que no necesites llamar a esta API tΓΊ mismo. Consulta la documentaciΓ³n de tu framework para mΓ‘s detalles. +======= +[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> @@ -44,6 +48,7 @@ La funciΓ³n `preload` proporciona al navegador una sugerencia de que deberΓ­a co #### ParΓ‘metros {/*parameters*/} +<<<<<<< HEAD * `href`: una cadena. La URL del recurso que deseas descargar. * `options`: un objeto. Contiene las siguientes propiedades: * `as`: una cadena requerida. El tipo de recurso. Sus [valores posibles](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#as) son `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`. @@ -55,6 +60,19 @@ La funciΓ³n `preload` proporciona al navegador una sugerencia de que deberΓ­a co * `fetchPriority`: una cadena. Sugiere una prioridad relativa para obtener el recurso. Los valores posibles son `auto` (el predeterminado), `high` y `low`. * `imageSrcSet`: una cadena. Para uso exclusivo con `as: "image"`. Especifica el [conjunto de fuentes de la imagen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). * `imageSizes`: una cadena. Para uso exclusivo con `as: "image"`. Especifica los [tamaΓ±os de la imagen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). +======= +* `href`: a string. The URL of the resource you want to download. +* `options`: an object. It contains the following properties: + * `as`: a required string. The type of resource. Its [possible values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#as) are `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`. + * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. It is required when `as` is set to `"fetch"`. + * `referrerPolicy`: a string. The [Referrer header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy) to send when fetching. Its possible values are `no-referrer-when-downgrade` (the default), `no-referrer`, `origin`, `origin-when-cross-origin`, and `unsafe-url`. + * `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). + * `type`: a string. The MIME type of the resource. + * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. + * `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`. + * `imageSrcSet`: a string. For use only with `as: "image"`. Specifies the [source set of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). + * `imageSizes`: a string. For use only with `as: "image"`. Specifies the [sizes of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Devuelve {/*returns*/} diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md index 99a89e7e4..9ec0af9e1 100644 --- a/src/content/reference/react-dom/preloadModule.md +++ b/src/content/reference/react-dom/preloadModule.md @@ -4,7 +4,11 @@ title: preloadModule <Note> +<<<<<<< HEAD [Los frameworks basados en React](/learn/start-a-new-react-project) con frecuencia manejan la carga de recursos por ti, por lo que es posible que no necesites llamar a esta API tΓΊ mismo. Consulta la documentaciΓ³n de tu framework para mΓ‘s detalles. +======= +[React-based frameworks](/learn/creating-a-react-app) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> @@ -44,12 +48,21 @@ La funciΓ³n `preloadModule` proporciona al navegador una seΓ±al de que deberΓ­a #### ParΓ‘metros {/*parameters*/} +<<<<<<< HEAD * `href`: un string. La URL del mΓ³dulo que deseas descargar. * `options`: un objeto. Contiene las siguientes propiedades: * `as`: un string requerido. Debe ser `'script'`. * `crossOrigin`: un string. La [polΓ­tica de CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) a utilizar. Sus valores posibles son `anonymous` y `use-credentials`. * `integrity`: un string. Un hash criptogrΓ‘fico del mΓ³dulo, para [verificar su autenticidad](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). * `nonce`: un string. Un [nonce criptogrΓ‘fico para permitir el mΓ³dulo](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) cuando se utiliza una PolΓ­tica de Seguridad de Contenido estricta. +======= +* `href`: a string. The URL of the module you want to download. +* `options`: an object. It contains the following properties: + * `as`: a required string. It must be `'script'`. + * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. + * `integrity`: a string. A cryptographic hash of the module, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). + * `nonce`: a string. A cryptographic [nonce to allow the module](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a #### Devuelve {/*returns*/} diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md index a786f82a5..2107b1f4f 100644 --- a/src/content/reference/react-dom/server/index.md +++ b/src/content/reference/react-dom/server/index.md @@ -4,12 +4,17 @@ title: APIs del servidor de React DOM <Intro> +<<<<<<< HEAD Las APIs del `react-dom/server` te permiten renderizar del lado del servidor componentes de React a HTML. Estas API solo se usan en el servidor en el nivel superior de su aplicaciΓ³n para generar el HTML inicial. Un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) puede llamarlos por ti. La mayorΓ­a de tus componentes no necesitan importarlos o usarlos. +======= +The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. 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 </Intro> --- +<<<<<<< HEAD ## APIs del servidor para transmisiones (streams) de Node.js {/*server-apis-for-nodejs-streams*/} Estos mΓ©todos solo estΓ‘n disponibles en los entornos con [Node.js Streams:](https://nodejs.org/api/stream.html) @@ -19,10 +24,33 @@ Estos mΓ©todos solo estΓ‘n disponibles en los entornos con [Node.js Streams:](ht --- ## APIs del servidor para Web Streams {/*server-apis-for-web-streams*/} +======= +## Server APIs for Web Streams {/*server-apis-for-web-streams*/} +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a Estos mΓ©todos solo estΓ‘n disponibles en los entornos con [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), que incluye navegadores, Deno y algunos entornos de ejecuciΓ³n modernos: +<<<<<<< HEAD * [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) renderiza un Γ‘rbol de React a un [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +======= +* [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +* [`resume`](/reference/react-dom/server/renderToPipeableStream) resumes [`prerender`](/reference/react-dom/static/prerender) to a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). + + +<Note> + +Node.js also includes these methods for compatibility, but they are not recommended due to worse performance. Use the [dedicated Node.js APIs](#server-apis-for-nodejs-streams) instead. + +</Note> +--- + +## Server APIs for Node.js Streams {/*server-apis-for-nodejs-streams*/} + +These methods are only available in the environments with [Node.js Streams:](https://nodejs.org/api/stream.html) + +* [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) +* [`resumeToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) resumes [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a --- diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index d3e8704eb..45887e4c6 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -294,7 +294,11 @@ Suspense **no** detectarΓ‘ cuando se obtengan datos dentro de un Efecto o contro La forma exacta de cargar los datos en el componente `Posts` anterior dependerΓ‘ de tu *framework*. Si usas un *framework* habilitado para Suspense, encontrarΓ‘s los detalles en su documentaciΓ³n de obtenciΓ³n de datos. +<<<<<<< HEAD Por ahora, no se admite la obtenciΓ³n de datos habilitada para Suspense sin el uso de un *framework* con enfoque especΓ­fico. Los requisitos para implementar una fuente de datos habilitada para Suspense son inestables y no estΓ‘n documentados. En una versiΓ³n futura de React, se publicarΓ‘ una API oficial para integrar fuentes de datos con Suspense. +======= +Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> @@ -401,7 +405,11 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); +<<<<<<< HEAD response.send('<h1>Algo saliΓ³ mal</h1>'); +======= + response.send('<h1>Something went wrong</h1>'); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, onError(error) { console.error(error); @@ -460,7 +468,11 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); +<<<<<<< HEAD response.send('<h1>Algo saliΓ³ mal</h1>'); +======= + response.send('<h1>Something went wrong</h1>'); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, onError(error) { console.error(error); @@ -486,7 +498,11 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); +<<<<<<< HEAD response.send('<h1>Algo saliΓ³ mal</h1>'); +======= + response.send('<h1>Something went wrong</h1>'); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, onError(error) { didError = true; @@ -530,7 +546,11 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = getStatusCode(); response.setHeader('content-type', 'text/html'); +<<<<<<< HEAD response.send('<h1>Algo saliΓ³ mal</h1>'); +======= + response.send('<h1>Something went wrong</h1>'); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, onError(error) { didError = true; @@ -570,13 +590,17 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); +<<<<<<< HEAD response.send('<h1>Algo saliΓ³ mal</h1>'); +======= + response.send('<h1>Something went wrong</h1>'); +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a }, onAllReady() { if (isCrawler) { response.statusCode = didError ? 500 : 200; response.setHeader('content-type', 'text/html'); - pipe(response); + pipe(response); } }, onError(error) { diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index 576be3d2f..cf357f2e9 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -293,7 +293,11 @@ Suspense **no** detecta cuando la informaciΓ³n es obtenida dentro de un Hook de La forma exacta en la que se cargarΓ‘ la informaciΓ³n dentro del componente `Posts` depende del framework que se use. Si usas un framework "Suspense-enabled", podrΓ‘s consultar en la documentaciΓ³n los detalles de cΓ³mo funciona la obtenciΓ³n de datos. +<<<<<<< HEAD La obtenciΓ³n de datos "Suspense-enabled" sin el uso de un framework dogmΓ‘tico no estΓ‘ soportado todavΓ­a. Los requisitos para implementar una fuente de datos "Suspense-enabled" son inestables y se encuentran indocumentados. La API oficial para implementar fuentes de datos "Suspense-enabled" serΓ‘ publicada en versiones futuras de React. +======= +Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. +>>>>>>> abe931a8cb3aee3e8b15ef7e187214789164162a </Note> diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md new file mode 100644 index 000000000..ad61f6da5 --- /dev/null +++ b/src/content/reference/react-dom/server/resume.md @@ -0,0 +1,236 @@ +--- +title: resume +--- + +<Intro> + +`resume` streams a pre-rendered React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) + +```js +const stream = await resume(reactNode, postponedState, options?) +``` + +</Intro> + +<InlineToc /> + +<Note> + +This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`resumeToNodeStream`](/reference/react-dom/server/renderToPipeableStream) instead. + +</Note> + +--- + +## Reference {/*reference*/} + +### `resume(node, postponedState, options?)` {/*resume*/} + +Call `resume` to resume rendering a pre-rendered React tree as HTML into a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) + +```js +import { resume } from 'react-dom/server'; +import {getPostponedState} from './storage'; + +async function handler(request, writable) { + const postponed = await getPostponedState(request); + const resumeStream = await resume(<App />, postponed); + return resumeStream.pipeTo(writable) +} +``` + +[See more examples below.](#usage) + +#### Parameters {/*parameters*/} + +* `reactNode`: The React node you called `prerender` with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag. +* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3). +* **optional** `options`: An object with streaming options. + * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). + * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. + * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. + + +#### Returns {/*returns*/} + +`resume` returns a Promise: + +- If `resume` successfully produced a [shell](/reference/react-dom/server/renderToReadableStream#specifying-what-goes-into-the-shell), that Promise will resolve to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) that can be piped to a [Writable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream). +- If an error happens in the shell, the Promise will reject with that error. + +The returned stream has an additional property: + +* `allReady`: A Promise that resolves when all rendering is complete. You can `await stream.allReady` before returning a response [for crawlers and static generation.](/reference/react-dom/server/renderToReadableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you do that, you won't get any progressive loading. The stream will contain the final HTML. + +#### Caveats {/*caveats*/} + +- `resume` does not accept options for `bootstrapScripts`, `bootstrapScriptContent`, or `bootstrapModules`. Instead, you need to pass these options to the `prerender` call that generates the `postponedState`. You can also inject bootstrap content into the writable stream manually. +- `resume` does not accept `identifierPrefix` since the prefix needs to be the same in both `prerender` and `resume`. +- Since `nonce` cannot be provided to prerender, you should only provide `nonce` to `resume` if you're not providing scripts to prerender. +- `resume` re-renders from the root until it finds a component that was not fully pre-rendered. Only fully prerendered Components (the Component and its children finished prerendering) are skipped entirely. + +## Usage {/*usage*/} + +### Resuming a prerender {/*resuming-a-prerender*/} + +<Sandpack> + +```js src/App.js hidden +``` + +```html public/index.html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Document + + + + + +``` + +```js src/index.js +import { + flushReadableStreamToFrame, + getUser, + Postponed, + sleep, +} from "./demo-helpers"; +import { StrictMode, Suspense, use, useEffect } from "react"; +import { prerender } from "react-dom/static"; +import { resume } from "react-dom/server"; +import { hydrateRoot } from "react-dom/client"; + +function Header() { + return
    Me and my descendants can be prerendered
    ; +} + +const { promise: cookies, resolve: resolveCookies } = Promise.withResolvers(); + +function Main() { + const { sessionID } = use(cookies); + const user = getUser(sessionID); + + useEffect(() => { + console.log("reached interactivity!"); + }, []); + + return ( +
    + Hello, {user.name}! + +
    + ); +} + +function Shell({ children }) { + // In a real app, this is where you would put your html and body. + // We're just using tags here we can include in an existing body for demonstration purposes + return ( + + {children} + + ); +} + +function App() { + return ( + + +
    + + +
    + + + ); +} + +async function main(frame) { + // Layer 1 + const controller = new AbortController(); + const prerenderedApp = prerender(, { + signal: controller.signal, + onError(error) { + if (error instanceof Postponed) { + } else { + console.error(error); + } + }, + }); + // We're immediately aborting in a macrotask. + // Any data fetching that's not available synchronously, or in a microtask, will not have finished. + setTimeout(() => { + controller.abort(new Postponed()); + }); + + const { prelude, postponed } = await prerenderedApp; + await flushReadableStreamToFrame(prelude, frame); + + // Layer 2 + // Just waiting here for demonstration purposes. + // In a real app, the prelude and postponed state would've been serialized in Layer 1 and Layer would deserialize them. + // The prelude content could be flushed immediated as plain HTML while + // React is continuing to render from where the prerender left off. + await sleep(2000); + + // You would get the cookies from the incoming HTTP request + resolveCookies({ sessionID: "abc" }); + + const stream = await resume(, postponed); + + await flushReadableStreamToFrame(stream, frame); + + // Layer 3 + // Just waiting here for demonstration purposes. + await sleep(2000); + + hydrateRoot(frame.contentWindow.document, ); +} + +main(document.getElementById("container")); + +``` + +```js src/demo-helpers.js +export async function flushReadableStreamToFrame(readable, frame) { + const document = frame.contentWindow.document; + const decoder = new TextDecoder(); + for await (const chunk of readable) { + const partialHTML = decoder.decode(chunk); + document.write(partialHTML); + } +} + +// This doesn't need to be an error. +// You can use any other means to check if an error during prerender was +// from an intentional abort or a real error. +export class Postponed extends Error {} + +// We're just hardcoding a session here. +export function getUser(sessionID) { + return { + name: "Alice", + }; +} + +export function sleep(timeoutMS) { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, timeoutMS); + }); +} +``` + + + +### Further reading {/*further-reading*/} + +Resuming behaves like `renderToReadableStream`. For more examples, check out the [usage section of `renderToReadableStream`](/reference/react-dom/server/renderToReadableStream#usage). +The [usage section of `prerender`](/reference/react-dom/static/prerender#usage) includes examples of how to use `prerender` specifically. \ No newline at end of file diff --git a/src/content/reference/react-dom/server/resumeToPipeableStream.md b/src/content/reference/react-dom/server/resumeToPipeableStream.md new file mode 100644 index 000000000..48caa3be6 --- /dev/null +++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md @@ -0,0 +1,78 @@ +--- +title: resumeToPipeableStream +--- + + + +`resumeToPipeableStream` streams a pre-rendered React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) + +```js +const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, options?) +``` + + + + + + + +This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`resume`](/reference/react-dom/server/renderToReadableStream) instead. + + + +--- + +## Reference {/*reference*/} + +### `resumeToPipeableStream(node, postponed, options?)` {/*resume-to-pipeable-stream*/} + +Call `resume` to resume rendering a pre-rendered React tree as HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) + +```js +import { resume } from 'react-dom/server'; +import {getPostponedState} from './storage'; + +async function handler(request, response) { + const postponed = await getPostponedState(request); + const {pipe} = resumeToPipeableStream(, postponed, { + onShellReady: () => { + pipe(response); + } + }); +} +``` + +[See more examples below.](#usage) + +#### Parameters {/*parameters*/} + +* `reactNode`: The React node you called `prerender` with. For example, a JSX element like ``. It is expected to represent the entire document, so the `App` component should render the `` tag. +* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3). +* **optional** `options`: An object with streaming options. + * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src). + * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. + * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. + * **optional** `onShellReady`: A callback that fires right after the [shell](#specifying-what-goes-into-the-shell) has finished. You can call `pipe` here to start streaming. React will [stream the additional content](#streaming-more-content-as-it-loads) after the shell along with the inline `