diff --git a/.claude/skills/docs-writer-blog/SKILL.md b/.claude/skills/docs-writer-blog/SKILL.md index ef28225f8..baa21c34d 100644 --- a/.claude/skills/docs-writer-blog/SKILL.md +++ b/.claude/skills/docs-writer-blog/SKILL.md @@ -159,7 +159,7 @@ See [How to Upgrade to React X.Y](/blog/YYYY/MM/DD/react-xy-upgrade-guide) for s ### React {/*react*/} -* Add `useNewHook` for [purpose]. ([#12345](https://github.com/facebook/react/pull/12345) by [@contributor](https://github.com/contributor)) +* Add `useNewHook` for [purpose]. ([#12345](https://github.com/react/react/pull/12345) by [@contributor](https://github.com/contributor)) --- @@ -603,7 +603,7 @@ npm install react@latest react-dom@latest | Type | Pattern | |------|---------| -| GitHub PR | `[#12345](https://github.com/facebook/react/pull/12345)` | +| GitHub PR | `[#12345](https://github.com/react/react/pull/12345)` | | GitHub user | `[@username](https://github.com/username)` | | Twitter/X | `[@username](https://x.com/username)` | | Bluesky | `[Name](https://bsky.app/profile/handle)` | @@ -623,8 +623,8 @@ For more information, see the docs for [`useActionState`](/reference/react/useAc ### 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)) +* Add `useTransition` for concurrent rendering. ([#10426](https://github.com/react/react/pull/10426) by [@acdlite](https://github.com/acdlite)) +* Fix `useReducer` observing incorrect props. ([#22445](https://github.com/react/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) ``` **Structure:** `Verb` + backticked API + description + `([#PR](url) by [@user](url))` diff --git a/.claude/skills/react-expert/SKILL.md b/.claude/skills/react-expert/SKILL.md index 5ebcdee37..c252f6ce0 100644 --- a/.claude/skills/react-expert/SKILL.md +++ b/.claude/skills/react-expert/SKILL.md @@ -32,7 +32,7 @@ This skill produces exhaustive documentation research on any React API or concep 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) +5. **GitHub Issues** - Confusion/questions (react/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 @@ -51,7 +51,7 @@ First, ensure the React repo is available locally: 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 + git clone --depth=100 https://github.com/react/react.git .claude/react fi ``` @@ -71,8 +71,8 @@ Spawn these agents IN PARALLEL using the Task tool. Each agent receives the skep | 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. | +| pr-researcher | Explore | PRs introducing/modifying API | Run `gh pr list -R react/react --search "" --state all --limit 20`. Read key PR descriptions and comments. | +| issue-hunter | Explore | Issues showing confusion | Search issues in both `react/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 @@ -164,8 +164,8 @@ 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 +1. Run: gh pr list -R react/react --search "" --state all --limit 20 --json number,title,url +2. For promising PRs, read details: gh pr view -R react/react 3. Look for: - The original RFC/motivation - Design discussions in comments @@ -189,7 +189,7 @@ CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issu Your task: Find issues that reveal common confusion about . -1. Search facebook/react: gh issue list -R facebook/react --search "" --state all --limit 20 --json number,title,url +1. Search react/react: gh issue list -R react/react --search "" --state all --limit 20 --json number,title,url 2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search "" --state all --limit 20 --json number,title,url 3. For each issue, identify: - What the user was confused about @@ -199,7 +199,7 @@ Your task: Find issues that reveal common confusion about . Format your output as: ## Common Confusion ### Issue #: -**Repo:** <facebook/react or reactjs/react.dev> +**Repo:** <react/react or reactjs/react.dev> **Confusion:** <what they misunderstood> **Resolution:** <correct understanding> **Gotcha:** <if applicable> diff --git a/.eslintrc b/.eslintrc index 7bc6ab933..935fa2f23 100644 --- a/.eslintrc +++ b/.eslintrc @@ -9,7 +9,8 @@ "react-hooks/exhaustive-deps": "error", "react/no-unknown-property": ["error", {"ignore": ["meta"]}], "react-compiler/react-compiler": "error", - "local-rules/lint-markdown-code-blocks": "error" + "local-rules/lint-markdown-code-blocks": "error", + "no-trailing-spaces": "error" }, "env": { "node": true, diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 63e310e0b..de2bfc362 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,6 +1,6 @@ contact_links: - name: 📃 Bugs in React - url: https://github.com/facebook/react/issues/new/choose + url: https://github.com/react/react/issues/new/choose about: This issue tracker is not for bugs in React. Please file React issues here. - name: 🤔 Questions and Help url: https://reactjs.org/community/support.html diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml index 2f5b2a497..97f8d183b 100644 --- a/.github/workflows/discord_notify.yml +++ b/.github/workflows/discord_notify.yml @@ -8,7 +8,7 @@ permissions: {} jobs: check_maintainer: - uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + uses: react/react/.github/workflows/shared_check_maintainer.yml@main permissions: # Used by check_maintainer contents: read diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml index f9b3328ee..4cb6fbc71 100644 --- a/.github/workflows/label_core_team_prs.yml +++ b/.github/workflows/label_core_team_prs.yml @@ -12,7 +12,7 @@ env: jobs: check_maintainer: - uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + uses: react/react/.github/workflows/shared_check_maintainer.yml@main permissions: # Used by check_maintainer contents: read diff --git a/.gitignore b/.gitignore index 92626a1e6..ed9efe38d 100644 --- a/.gitignore +++ b/.gitignore @@ -46,3 +46,6 @@ public/rss.xml # worktrees .worktrees/ + +# Generated OG images (scripts/generateOgImages.mjs) +public/images/og/ diff --git a/eslint-local-rules/__tests__/fixtures/src/content/missing-highlight.md b/eslint-local-rules/__tests__/fixtures/src/content/missing-highlight.md new file mode 100644 index 000000000..f6dc1e734 --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/missing-highlight.md @@ -0,0 +1,3 @@ +```js [[1, 1, "submitAction"]] +function UpdateName() {} +``` diff --git a/eslint-local-rules/__tests__/fixtures/src/content/out-of-bounds-highlight.md b/eslint-local-rules/__tests__/fixtures/src/content/out-of-bounds-highlight.md new file mode 100644 index 000000000..ac65974ad --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/out-of-bounds-highlight.md @@ -0,0 +1,3 @@ +```js [[1, 3, "submitAction"]] +function submitAction() {} +``` diff --git a/eslint-local-rules/__tests__/fixtures/src/content/valid-highlight.md b/eslint-local-rules/__tests__/fixtures/src/content/valid-highlight.md new file mode 100644 index 000000000..dd6074029 --- /dev/null +++ b/eslint-local-rules/__tests__/fixtures/src/content/valid-highlight.md @@ -0,0 +1,7 @@ +```js [[1, 1, "submitAction"]] +function submitAction() {} +``` + +```js [[1, 1, "\\"hidden\\""]] +const mode = "hidden"; +``` diff --git a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js index 250e0a1e5..f0b0e991e 100644 --- a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js +++ b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js @@ -123,6 +123,37 @@ async function run() { ), 'expected malformed metadata to be replaced with canonical form' ); + + const validHighlightResult = await lintFixture('valid-highlight.md'); + assert.strictEqual( + validHighlightResult.messages.length, + 0, + 'expected a valid inline highlight to pass' + ); + + const missingHighlightResult = await lintFixture('missing-highlight.md'); + assert.strictEqual( + missingHighlightResult.messages.length, + 1, + 'expected a highlight with text missing from its line to fail' + ); + assert.strictEqual( + missingHighlightResult.messages[0].message, + "Could not find 'submitAction' on highlighted line 1" + ); + + const outOfBoundsHighlightResult = await lintFixture( + 'out-of-bounds-highlight.md' + ); + assert.strictEqual( + outOfBoundsHighlightResult.messages.length, + 1, + 'expected an out-of-bounds highlight line to fail' + ); + assert.strictEqual( + outOfBoundsHighlightResult.messages[0].message, + 'Code highlight line 3 is outside this code block' + ); } run().catch(error => { diff --git a/eslint-local-rules/rules/inline-highlights.js b/eslint-local-rules/rules/inline-highlights.js new file mode 100644 index 000000000..1e25fa6b9 --- /dev/null +++ b/eslint-local-rules/rules/inline-highlights.js @@ -0,0 +1,66 @@ +/** + * 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 INLINE_HIGHLIGHT_REGEX = /(\[\[.*\]\])/; + +function validateInlineHighlights(meta, code) { + const match = INLINE_HIGHLIGHT_REGEX.exec(meta); + if (!match) { + return []; + } + + let highlights; + try { + highlights = JSON.parse(match[1]); + } catch (error) { + return ['Code highlight metadata must be valid JSON']; + } + + if (!Array.isArray(highlights)) { + return ['Code highlight metadata must be an array']; + } + + const lines = code.split('\n'); + const errors = []; + + for (const highlight of highlights) { + if (!Array.isArray(highlight) || highlight.length < 3) { + errors.push('Each code highlight must specify a step, line, and text'); + continue; + } + + const [, lineNo, text, fromIndex] = highlight; + if (!Number.isInteger(lineNo) || lineNo < 1 || lineNo > lines.length) { + errors.push(`Code highlight line ${lineNo} is outside this code block`); + continue; + } + if (typeof text !== 'string') { + errors.push(`Code highlight text on line ${lineNo} must be a string`); + continue; + } + + const line = lines[lineNo - 1]; + let index = line.indexOf(text); + const lastIndex = line.lastIndexOf(text); + if (index !== lastIndex) { + if (fromIndex === undefined) { + errors.push( + `Found '${text}' twice on highlighted line ${lineNo}; specify fromIndex` + ); + continue; + } + index = line.indexOf(text, fromIndex); + } + if (index === -1) { + errors.push(`Could not find '${text}' on highlighted line ${lineNo}`); + } + } + + return errors; +} + +module.exports = {validateInlineHighlights}; diff --git a/eslint-local-rules/rules/lint-markdown-code-blocks.js b/eslint-local-rules/rules/lint-markdown-code-blocks.js index 5ec327947..14bf10a12 100644 --- a/eslint-local-rules/rules/lint-markdown-code-blocks.js +++ b/eslint-local-rules/rules/lint-markdown-code-blocks.js @@ -16,6 +16,7 @@ const { setCompilerExpectedLines, } = require('./metadata'); const {normalizeDiagnostics} = require('./diagnostics'); +const {validateInlineHighlights} = require('./inline-highlights'); const {parseMarkdownFile} = require('./markdown'); const {runReactCompiler} = require('./react-compiler'); @@ -23,7 +24,7 @@ module.exports = { meta: { type: 'problem', docs: { - description: 'Run React Compiler on markdown code blocks', + description: 'Validate and compile markdown code blocks', category: 'Possible Errors', }, fixable: 'code', @@ -43,6 +44,17 @@ module.exports = { const {blocks} = parseMarkdownFile(sourceCode.text, filename); // For each supported code block, run the compiler and reconcile metadata. for (const block of blocks) { + for (const message of validateInlineHighlights( + block.meta, + block.code + )) { + context.report({ + node, + loc: block.position, + message, + }); + } + const compilerResult = runReactCompiler( block.code, `${filename}#codeblock` diff --git a/eslint-local-rules/rules/markdown.js b/eslint-local-rules/rules/markdown.js index d888d1311..5d3be73cf 100644 --- a/eslint-local-rules/rules/markdown.js +++ b/eslint-local-rules/rules/markdown.js @@ -16,6 +16,7 @@ const {parseFenceMetadata} = require('./metadata'); * @property {{lineIndex: number, rawText: string, metaText: string, range: [number, number]}} fence * @property {string} filePath * @property {string} lang + * @property {string} meta * @property {import('./metadata').FenceMetadata} metadata */ @@ -76,6 +77,7 @@ function parseMarkdownFile(content, filePath) { blocks.push({ lang: rawLang || normalizedLang, + meta: node.meta || metaText.trim(), metadata, filePath, code: node.value || '', diff --git a/package.json b/package.json index c1fe99575..ce8f69a01 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "analyze": "ANALYZE=true next build", "dev": "next-remote-watch ./src/content", "prebuild:rsc": "node scripts/buildRscWorker.mjs", - "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs", + "build": "node scripts/buildRscWorker.mjs && next build && node --experimental-modules ./scripts/downloadFonts.mjs && node ./scripts/generateOgImages.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}\"", @@ -16,7 +16,7 @@ "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 deadlinks", + "ci-check": "npm-run-all prettier:diff --parallel lint test:eslint-local-rules tsc lint-heading-ids rss deadlinks", "tsc": "tsc --noEmit", "start": "next start", "postinstall": "yarn --cwd eslint-local-rules install && is-ci || husky install .husky", @@ -51,6 +51,8 @@ "@babel/plugin-transform-modules-commonjs": "^7.18.6", "@babel/preset-react": "^7.18.6", "@mdx-js/mdx": "^2.1.3", + "@resvg/resvg-js": "^2.6.2", + "@shuding/opentype.js": "1.4.0-beta.0", "@types/body-scroll-lock": "^2.6.1", "@types/classnames": "^2.2.10", "@types/debounce": "^1.2.1", @@ -91,7 +93,7 @@ "postcss-flexbugs-fixes": "4.2.1", "postcss-preset-env": "^6.7.0", "prettier": "^2.5.1", - "react-server-dom-webpack": "^19.2.4", + "react-server-dom-webpack": "^19.3.0", "reading-time": "^1.2.0", "remark": "^12.0.1", "remark-external-links": "^7.0.0", @@ -102,6 +104,7 @@ "retext": "^7.0.1", "retext-smartypants": "^4.0.0", "rss": "^1.2.2", + "satori": "^0.26.0", "tailwindcss": "^3.4.1", "typescript": "^5.7.2", "unist-util-visit": "^2.0.3", diff --git a/public/fonts/Optimistic_Display_W_Bd.ttf b/public/fonts/Optimistic_Display_W_Bd.ttf new file mode 100644 index 000000000..9d0cff450 Binary files /dev/null and b/public/fonts/Optimistic_Display_W_Bd.ttf differ diff --git a/public/fonts/Optimistic_Display_W_Md.ttf b/public/fonts/Optimistic_Display_W_Md.ttf new file mode 100644 index 000000000..3fbdb483d Binary files /dev/null and b/public/fonts/Optimistic_Display_W_Md.ttf differ diff --git a/public/images/docs/scientists/1bX5QH6.jpg b/public/images/docs/scientists/1bX5QH6.jpg new file mode 100644 index 000000000..630b91bd2 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6.jpg differ diff --git a/public/images/docs/scientists/1bX5QH6b.jpg b/public/images/docs/scientists/1bX5QH6b.jpg new file mode 100644 index 000000000..7bd074365 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6b.jpg differ diff --git a/public/images/docs/scientists/1bX5QH6s.jpg b/public/images/docs/scientists/1bX5QH6s.jpg new file mode 100644 index 000000000..0bc3a6f40 Binary files /dev/null and b/public/images/docs/scientists/1bX5QH6s.jpg differ diff --git a/public/images/docs/scientists/2heNQDcm.jpg b/public/images/docs/scientists/2heNQDcm.jpg new file mode 100644 index 000000000..ecc8ab394 Binary files /dev/null and b/public/images/docs/scientists/2heNQDcm.jpg differ diff --git a/public/images/docs/scientists/3aIiwfm.jpg b/public/images/docs/scientists/3aIiwfm.jpg new file mode 100644 index 000000000..e93d8c802 Binary files /dev/null and b/public/images/docs/scientists/3aIiwfm.jpg differ diff --git a/public/images/docs/scientists/5qwVYb1.jpeg b/public/images/docs/scientists/5qwVYb1.jpeg new file mode 100644 index 000000000..cd8b4e556 Binary files /dev/null and b/public/images/docs/scientists/5qwVYb1.jpeg differ diff --git a/public/images/docs/scientists/6o5Vuyu.jpg b/public/images/docs/scientists/6o5Vuyu.jpg new file mode 100644 index 000000000..941563f8d Binary files /dev/null and b/public/images/docs/scientists/6o5Vuyu.jpg differ diff --git a/public/images/docs/scientists/7vQD0fPb.jpg b/public/images/docs/scientists/7vQD0fPb.jpg new file mode 100644 index 000000000..71baab951 Binary files /dev/null and b/public/images/docs/scientists/7vQD0fPb.jpg differ diff --git a/public/images/docs/scientists/7vQD0fPs.jpg b/public/images/docs/scientists/7vQD0fPs.jpg new file mode 100644 index 000000000..5da6b45f1 Binary files /dev/null and b/public/images/docs/scientists/7vQD0fPs.jpg differ diff --git a/public/images/docs/scientists/9EAYZrtl.jpg b/public/images/docs/scientists/9EAYZrtl.jpg new file mode 100644 index 000000000..7313ffdb2 Binary files /dev/null and b/public/images/docs/scientists/9EAYZrtl.jpg differ diff --git a/public/images/docs/scientists/AlHTAdDm.jpg b/public/images/docs/scientists/AlHTAdDm.jpg new file mode 100644 index 000000000..735c29cd5 Binary files /dev/null and b/public/images/docs/scientists/AlHTAdDm.jpg differ diff --git a/public/images/docs/scientists/DgXHVwul.jpg b/public/images/docs/scientists/DgXHVwul.jpg new file mode 100644 index 000000000..a9dba869c Binary files /dev/null and b/public/images/docs/scientists/DgXHVwul.jpg differ diff --git a/public/images/docs/scientists/FJeJR8M.jpg b/public/images/docs/scientists/FJeJR8M.jpg new file mode 100644 index 000000000..433fc3503 Binary files /dev/null and b/public/images/docs/scientists/FJeJR8M.jpg differ diff --git a/public/images/docs/scientists/HMFmH6m.jpg b/public/images/docs/scientists/HMFmH6m.jpg new file mode 100644 index 000000000..ac0a5f6c3 Binary files /dev/null and b/public/images/docs/scientists/HMFmH6m.jpg differ diff --git a/public/images/docs/scientists/IOjWm71s.jpg b/public/images/docs/scientists/IOjWm71s.jpg new file mode 100644 index 000000000..af912e34b Binary files /dev/null and b/public/images/docs/scientists/IOjWm71s.jpg differ diff --git a/public/images/docs/scientists/JBbMpWY.jpg b/public/images/docs/scientists/JBbMpWY.jpg new file mode 100644 index 000000000..a59002bca Binary files /dev/null and b/public/images/docs/scientists/JBbMpWY.jpg differ diff --git a/public/images/docs/scientists/K9HVAGHl.jpg b/public/images/docs/scientists/K9HVAGHl.jpg new file mode 100644 index 000000000..03894f397 Binary files /dev/null and b/public/images/docs/scientists/K9HVAGHl.jpg differ diff --git a/public/images/docs/scientists/MK3eW3Am.jpg b/public/images/docs/scientists/MK3eW3Am.jpg new file mode 100644 index 000000000..53287dd02 Binary files /dev/null and b/public/images/docs/scientists/MK3eW3Am.jpg differ diff --git a/public/images/docs/scientists/MK3eW3As.jpg b/public/images/docs/scientists/MK3eW3As.jpg new file mode 100644 index 000000000..43244d0c5 Binary files /dev/null and b/public/images/docs/scientists/MK3eW3As.jpg differ diff --git a/public/images/docs/scientists/Mx7dA2Y.jpg b/public/images/docs/scientists/Mx7dA2Y.jpg new file mode 100644 index 000000000..ee41fbbaf Binary files /dev/null and b/public/images/docs/scientists/Mx7dA2Y.jpg differ diff --git a/public/images/docs/scientists/OKS67lhb.jpg b/public/images/docs/scientists/OKS67lhb.jpg new file mode 100644 index 000000000..71d2917a7 Binary files /dev/null and b/public/images/docs/scientists/OKS67lhb.jpg differ diff --git a/public/images/docs/scientists/OKS67lhm.jpg b/public/images/docs/scientists/OKS67lhm.jpg new file mode 100644 index 000000000..9fe8f6307 Binary files /dev/null and b/public/images/docs/scientists/OKS67lhm.jpg differ diff --git a/public/images/docs/scientists/OKS67lhs.jpg b/public/images/docs/scientists/OKS67lhs.jpg new file mode 100644 index 000000000..fb3cf212c Binary files /dev/null and b/public/images/docs/scientists/OKS67lhs.jpg differ diff --git a/public/images/docs/scientists/QIrZWGIs.jpg b/public/images/docs/scientists/QIrZWGIs.jpg new file mode 100644 index 000000000..2bfa8ab82 Binary files /dev/null and b/public/images/docs/scientists/QIrZWGIs.jpg differ diff --git a/public/images/docs/scientists/QwUKKmF.jpg b/public/images/docs/scientists/QwUKKmF.jpg new file mode 100644 index 000000000..05aa061ea Binary files /dev/null and b/public/images/docs/scientists/QwUKKmF.jpg differ diff --git a/public/images/docs/scientists/RCwLEoQm.jpg b/public/images/docs/scientists/RCwLEoQm.jpg new file mode 100644 index 000000000..4d7d0b6df Binary files /dev/null and b/public/images/docs/scientists/RCwLEoQm.jpg differ diff --git a/public/images/docs/scientists/Sd1AgUOm.jpg b/public/images/docs/scientists/Sd1AgUOm.jpg new file mode 100644 index 000000000..b81b83d21 Binary files /dev/null and b/public/images/docs/scientists/Sd1AgUOm.jpg differ diff --git a/public/images/docs/scientists/Y3utgTi.jpg b/public/images/docs/scientists/Y3utgTi.jpg new file mode 100644 index 000000000..8d44e4fed Binary files /dev/null and b/public/images/docs/scientists/Y3utgTi.jpg differ diff --git a/public/images/docs/scientists/YfeOqp2b.jpg b/public/images/docs/scientists/YfeOqp2b.jpg new file mode 100644 index 000000000..44e0c65cb Binary files /dev/null and b/public/images/docs/scientists/YfeOqp2b.jpg differ diff --git a/public/images/docs/scientists/YfeOqp2s.jpg b/public/images/docs/scientists/YfeOqp2s.jpg new file mode 100644 index 000000000..19ef15704 Binary files /dev/null and b/public/images/docs/scientists/YfeOqp2s.jpg differ diff --git a/public/images/docs/scientists/ZF6s192.jpg b/public/images/docs/scientists/ZF6s192.jpg new file mode 100644 index 000000000..f50c7e348 Binary files /dev/null and b/public/images/docs/scientists/ZF6s192.jpg differ diff --git a/public/images/docs/scientists/ZF6s192m.jpg b/public/images/docs/scientists/ZF6s192m.jpg new file mode 100644 index 000000000..056f8d52b Binary files /dev/null and b/public/images/docs/scientists/ZF6s192m.jpg differ diff --git a/public/images/docs/scientists/ZfQOOzfl.jpg b/public/images/docs/scientists/ZfQOOzfl.jpg new file mode 100644 index 000000000..5c9e249bd Binary files /dev/null and b/public/images/docs/scientists/ZfQOOzfl.jpg differ diff --git a/public/images/docs/scientists/aTtVpES.jpg b/public/images/docs/scientists/aTtVpES.jpg new file mode 100644 index 000000000..00e09d093 Binary files /dev/null and b/public/images/docs/scientists/aTtVpES.jpg differ diff --git a/public/images/docs/scientists/aeO3rpIl.jpg b/public/images/docs/scientists/aeO3rpIl.jpg new file mode 100644 index 000000000..3b535b072 Binary files /dev/null and b/public/images/docs/scientists/aeO3rpIl.jpg differ diff --git a/public/images/docs/scientists/bE7W1jis.jpg b/public/images/docs/scientists/bE7W1jis.jpg new file mode 100644 index 000000000..a15a897ea Binary files /dev/null and b/public/images/docs/scientists/bE7W1jis.jpg differ diff --git a/public/images/docs/scientists/dB2LRbj.jpg b/public/images/docs/scientists/dB2LRbj.jpg new file mode 100644 index 000000000..f2ac04825 Binary files /dev/null and b/public/images/docs/scientists/dB2LRbj.jpg differ diff --git a/public/images/docs/scientists/jA8hHMpm.jpg b/public/images/docs/scientists/jA8hHMpm.jpg new file mode 100644 index 000000000..ba2168f85 Binary files /dev/null and b/public/images/docs/scientists/jA8hHMpm.jpg differ diff --git a/public/images/docs/scientists/kxsph5Cl.jpg b/public/images/docs/scientists/kxsph5Cl.jpg new file mode 100644 index 000000000..f33360729 Binary files /dev/null and b/public/images/docs/scientists/kxsph5Cl.jpg differ diff --git a/public/images/docs/scientists/lICfvbD.jpg b/public/images/docs/scientists/lICfvbD.jpg new file mode 100644 index 000000000..67393f31e Binary files /dev/null and b/public/images/docs/scientists/lICfvbD.jpg differ diff --git a/public/images/docs/scientists/lrWQx8ls.jpg b/public/images/docs/scientists/lrWQx8ls.jpg new file mode 100644 index 000000000..bc0708bd0 Binary files /dev/null and b/public/images/docs/scientists/lrWQx8ls.jpg differ diff --git a/public/images/docs/scientists/mynHUSas.jpg b/public/images/docs/scientists/mynHUSas.jpg new file mode 100644 index 000000000..e369df8c5 Binary files /dev/null and b/public/images/docs/scientists/mynHUSas.jpg differ diff --git a/public/images/docs/scientists/okTpbHhm.jpg b/public/images/docs/scientists/okTpbHhm.jpg new file mode 100644 index 000000000..a96c5c03c Binary files /dev/null and b/public/images/docs/scientists/okTpbHhm.jpg differ diff --git a/public/images/docs/scientists/rN7hY6om.jpg b/public/images/docs/scientists/rN7hY6om.jpg new file mode 100644 index 000000000..3c7afe1f9 Binary files /dev/null and b/public/images/docs/scientists/rN7hY6om.jpg differ diff --git a/public/images/docs/scientists/rTqKo46l.jpg b/public/images/docs/scientists/rTqKo46l.jpg new file mode 100644 index 000000000..4a0b3dc3b Binary files /dev/null and b/public/images/docs/scientists/rTqKo46l.jpg differ diff --git a/public/images/docs/scientists/szV5sdGb.jpg b/public/images/docs/scientists/szV5sdGb.jpg new file mode 100644 index 000000000..8d6579402 Binary files /dev/null and b/public/images/docs/scientists/szV5sdGb.jpg differ diff --git a/public/images/docs/scientists/szV5sdGs.jpg b/public/images/docs/scientists/szV5sdGs.jpg new file mode 100644 index 000000000..fc3c34260 Binary files /dev/null and b/public/images/docs/scientists/szV5sdGs.jpg differ diff --git a/public/images/docs/scientists/wIdGuZwm.png b/public/images/docs/scientists/wIdGuZwm.png new file mode 100644 index 000000000..5f482def6 Binary files /dev/null and b/public/images/docs/scientists/wIdGuZwm.png differ diff --git a/public/images/docs/scientists/yXOvdOSs.jpg b/public/images/docs/scientists/yXOvdOSs.jpg new file mode 100644 index 000000000..0a3269510 Binary files /dev/null and b/public/images/docs/scientists/yXOvdOSs.jpg differ diff --git a/public/images/docs/scientists/z08o2TS.jpg b/public/images/docs/scientists/z08o2TS.jpg new file mode 100644 index 000000000..42a0a00ef Binary files /dev/null and b/public/images/docs/scientists/z08o2TS.jpg differ diff --git a/public/images/team/gh-aurorascharff.jpg b/public/images/team/gh-aurorascharff.jpg new file mode 100644 index 000000000..10476e5e8 Binary files /dev/null and b/public/images/team/gh-aurorascharff.jpg differ diff --git a/public/images/team/gh-brentvatne.jpg b/public/images/team/gh-brentvatne.jpg new file mode 100644 index 000000000..c66a5cd6d Binary files /dev/null and b/public/images/team/gh-brentvatne.jpg differ diff --git a/public/images/team/gh-captbaritone.jpg b/public/images/team/gh-captbaritone.jpg new file mode 100644 index 000000000..0100fa16b Binary files /dev/null and b/public/images/team/gh-captbaritone.jpg differ diff --git a/public/images/team/gh-cipolleschi.png b/public/images/team/gh-cipolleschi.png new file mode 100644 index 000000000..a90bec66e Binary files /dev/null and b/public/images/team/gh-cipolleschi.png differ diff --git a/public/images/team/gh-cortinico.jpg b/public/images/team/gh-cortinico.jpg new file mode 100644 index 000000000..e806a103b Binary files /dev/null and b/public/images/team/gh-cortinico.jpg differ diff --git a/public/images/team/gh-fbmal7.jpg b/public/images/team/gh-fbmal7.jpg new file mode 100644 index 000000000..0f79e181d Binary files /dev/null and b/public/images/team/gh-fbmal7.jpg differ diff --git a/public/images/team/gh-fkgozali.jpg b/public/images/team/gh-fkgozali.jpg new file mode 100644 index 000000000..9f87e7efb Binary files /dev/null and b/public/images/team/gh-fkgozali.jpg differ diff --git a/public/images/team/gh-huntie.jpg b/public/images/team/gh-huntie.jpg new file mode 100644 index 000000000..a4de75801 Binary files /dev/null and b/public/images/team/gh-huntie.jpg differ diff --git a/public/images/team/gh-javache.jpg b/public/images/team/gh-javache.jpg new file mode 100644 index 000000000..1f63907ea Binary files /dev/null and b/public/images/team/gh-javache.jpg differ diff --git a/public/images/team/gh-khalef1.jpg b/public/images/team/gh-khalef1.jpg new file mode 100644 index 000000000..94d96f670 Binary files /dev/null and b/public/images/team/gh-khalef1.jpg differ diff --git a/public/images/team/gh-kmagiera.jpg b/public/images/team/gh-kmagiera.jpg new file mode 100644 index 000000000..0e03ecb77 Binary files /dev/null and b/public/images/team/gh-kmagiera.jpg differ diff --git a/public/images/team/gh-motiz88.jpg b/public/images/team/gh-motiz88.jpg new file mode 100644 index 000000000..a67e30b1b Binary files /dev/null and b/public/images/team/gh-motiz88.jpg differ diff --git a/public/images/team/gh-robhogan.jpg b/public/images/team/gh-robhogan.jpg new file mode 100644 index 000000000..4d5a5e830 Binary files /dev/null and b/public/images/team/gh-robhogan.jpg differ diff --git a/public/images/team/gh-rubennorte.jpg b/public/images/team/gh-rubennorte.jpg new file mode 100644 index 000000000..459c267e4 Binary files /dev/null and b/public/images/team/gh-rubennorte.jpg differ diff --git a/public/images/team/gh-samselikoff.jpg b/public/images/team/gh-samselikoff.jpg new file mode 100644 index 000000000..7887765b4 Binary files /dev/null and b/public/images/team/gh-samselikoff.jpg differ diff --git a/public/images/team/gh-simek.png b/public/images/team/gh-simek.png new file mode 100644 index 000000000..23a950103 Binary files /dev/null and b/public/images/team/gh-simek.png differ diff --git a/public/images/team/gh-stmoy.jpg b/public/images/team/gh-stmoy.jpg new file mode 100644 index 000000000..7694a7fb6 Binary files /dev/null and b/public/images/team/gh-stmoy.jpg differ diff --git a/public/images/team/gh-thymikee.jpg b/public/images/team/gh-thymikee.jpg new file mode 100644 index 000000000..d0debc5be Binary files /dev/null and b/public/images/team/gh-thymikee.jpg differ diff --git a/public/images/team/gh-vzaidman.jpg b/public/images/team/gh-vzaidman.jpg new file mode 100644 index 000000000..c76905615 Binary files /dev/null and b/public/images/team/gh-vzaidman.jpg differ diff --git a/public/images/team/jimmy-lai.jpg b/public/images/team/jimmy-lai.jpg new file mode 100644 index 000000000..57b50c800 Binary files /dev/null and b/public/images/team/jimmy-lai.jpg differ diff --git a/public/images/tutorial/codesandbox-devtools.png b/public/images/tutorial/codesandbox-devtools.png deleted file mode 100644 index 1f7ebd500..000000000 Binary files a/public/images/tutorial/codesandbox-devtools.png and /dev/null differ diff --git a/public/images/tutorial/components-tab.png b/public/images/tutorial/components-tab.png new file mode 100644 index 000000000..90ce0770e Binary files /dev/null and b/public/images/tutorial/components-tab.png differ diff --git a/public/images/tutorial/devtools-inspect.gif b/public/images/tutorial/devtools-inspect.gif new file mode 100644 index 000000000..5c623e6a7 Binary files /dev/null and b/public/images/tutorial/devtools-inspect.gif differ diff --git a/public/images/tutorial/devtools-select.gif b/public/images/tutorial/devtools-select.gif deleted file mode 100644 index dd1e1aa61..000000000 Binary files a/public/images/tutorial/devtools-select.gif and /dev/null differ diff --git a/public/images/tutorial/sandbox-new-tab.png b/public/images/tutorial/sandbox-new-tab.png new file mode 100644 index 000000000..093a363fb Binary files /dev/null and b/public/images/tutorial/sandbox-new-tab.png differ diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js index 46a21cdc9..287dde36a 100644 --- a/scripts/deadLinkChecker.js +++ b/scripts/deadLinkChecker.js @@ -311,7 +311,7 @@ async function buildContributorMap() { async function fetchErrorCodes() { try { const response = await fetch( - 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json' + 'https://raw.githubusercontent.com/react/react/main/scripts/error-codes/codes.json' ); if (!response.ok) { throw new Error(`Failed to fetch error codes: ${response.status}`); diff --git a/scripts/generateOgImages.mjs b/scripts/generateOgImages.mjs new file mode 100644 index 000000000..bc805d386 --- /dev/null +++ b/scripts/generateOgImages.mjs @@ -0,0 +1,247 @@ +/** + * 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. + */ + +// Generates a static OG image for every content page, so social +// cards show the page title without any runtime image generation. +// Run after `next build` (see the `build` script in package.json). + +import fs from 'fs'; +import path from 'path'; +import satori from 'satori'; +import {Resvg} from '@resvg/resvg-js'; +import matter from 'gray-matter'; +import opentype from '@shuding/opentype.js'; + +const ROOT = process.cwd(); +const CONTENT_DIR = path.join(ROOT, 'src', 'content'); +const OUT_DIR = path.join(ROOT, 'public', 'images', 'og'); +const CONCURRENCY = 8; + +const SECTION_LABELS = { + learn: 'Learn React', + reference: 'API Reference', + community: 'Community', + blog: 'Blog', +}; + +const bold = fs.readFileSync( + path.join(ROOT, 'public', 'fonts', 'Optimistic_Display_W_Bd.ttf') +); +const medium = fs.readFileSync( + path.join(ROOT, 'public', 'fonts', 'Optimistic_Display_W_Md.ttf') +); + +// Title area width: card width minus the horizontal padding (80px per side). +const TITLE_MAX_WIDTH = 1200 - 80 * 2; +const TITLE_MAX_FONT = 96; +const TITLE_MIN_FONT = 56; +// Small margin so borderline titles don't wrap and orphan a single trailing +// character (e.g. the "p" in "renderToStaticMarkup", which is 1px too wide +// to fit on one line at 96px). +const TITLE_SAFETY = 8; + +const boldFont = opentype.parse( + bold.buffer.slice(bold.byteOffset, bold.byteOffset + bold.byteLength) +); + +// Multi-word titles wrap cleanly at spaces, so a length bucket is fine for +// them. Single-word titles (most API names) can only break mid-word, which +// leaves an orphaned letter on its own line, so instead shrink them just +// enough to fit on a single line. +function titleFontSize(title) { + const trimmed = title.trim(); + if (/\s/.test(trimmed)) { + return trimmed.length > 24 ? 72 : 96; + } + const widthPerPx = boldFont.getAdvanceWidth(trimmed, 1); + const fit = Math.floor((TITLE_MAX_WIDTH - TITLE_SAFETY) / widthPerPx); + return Math.max(TITLE_MIN_FONT, Math.min(TITLE_MAX_FONT, fit)); +} + +function el(type, style, children) { + return {type, props: {style, children}}; +} + +function card(title, pagePath) { + const section = pagePath.split('/')[1] ?? ''; + const label = SECTION_LABELS[section] ?? 'React'; + const logo = { + type: 'svg', + props: { + width: 80, + height: 72, + viewBox: '-10.5 -9.45 21 18.9', + fill: 'none', + children: [ + {type: 'circle', props: {cx: 0, cy: 0, r: 2, fill: '#58c4dc'}}, + { + type: 'g', + props: { + stroke: '#58c4dc', + strokeWidth: 1, + fill: 'none', + children: [ + {type: 'ellipse', props: {rx: 10, ry: 4.5}}, + { + type: 'ellipse', + props: {rx: 10, ry: 4.5, transform: 'rotate(60)'}, + }, + { + type: 'ellipse', + props: {rx: 10, ry: 4.5, transform: 'rotate(120)'}, + }, + ], + }, + }, + ], + }, + }; + return el( + 'div', + { + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + padding: '72px 80px', + backgroundColor: '#23272f', + backgroundImage: + 'radial-gradient(circle at 25% 30%, #343a46 0%, #23272f 55%)', + }, + [ + el('div', {display: 'flex', alignItems: 'center', gap: '20px'}, [ + logo, + el( + 'div', + { + fontSize: 48, + fontFamily: 'Optimistic Display Bold', + color: '#f6f7f9', + }, + 'React' + ), + ]), + el( + 'div', + { + flexGrow: 1, + display: 'flex', + alignItems: 'center', + fontSize: titleFontSize(title), + fontFamily: 'Optimistic Display Bold', + color: '#f6f7f9', + lineHeight: 1.1, + wordBreak: 'break-word', + }, + title + ), + el( + 'div', + { + fontSize: 40, + fontFamily: 'Optimistic Display Medium', + color: '#99a1b3', + }, + label + ), + ] + ); +} + +async function renderCard(title, pagePath) { + const svg = await satori(card(title, pagePath), { + width: 1200, + height: 630, + fonts: [ + { + name: 'Optimistic Display Bold', + data: bold, + weight: 700, + style: 'normal', + }, + { + name: 'Optimistic Display Medium', + data: medium, + weight: 500, + style: 'normal', + }, + ], + }); + return new Resvg(svg, {fitTo: {mode: 'width', value: 1200}}).render().asPng(); +} + +function collectSidebarTitles() { + const titles = new Map(); + for (const name of fs.readdirSync(path.join(ROOT, 'src'))) { + if (!/^sidebar.*\.json$/.test(name)) continue; + const walk = (node) => { + if (node.path && node.title) { + titles.set(node.path, node.title); + } + for (const child of node.routes ?? []) walk(child); + }; + walk(JSON.parse(fs.readFileSync(path.join(ROOT, 'src', name), 'utf8'))); + } + return titles; +} + +const sidebarTitles = collectSidebarTitles(); + +function collectPages(dir, out) { + for (const entry of fs.readdirSync(dir, {withFileTypes: true})) { + const full = path.join(dir, entry.name); + if (entry.isDirectory()) { + collectPages(full, out); + } else if (entry.name.endsWith('.md')) { + const rel = path.relative(CONTENT_DIR, full).replace(/\.md$/, ''); + const segments = rel.split(path.sep); + if (segments[segments.length - 1] === 'index') { + segments.pop(); + } + const pagePath = '/' + segments.join('/'); + if (pagePath === '/' || pagePath.startsWith('/errors')) { + continue; + } + const {data} = matter(fs.readFileSync(full, 'utf8')); + const title = data.title ?? sidebarTitles.get(pagePath); + if (title) { + out.push({title: String(title), pagePath}); + } + } + } + return out; +} + +export function ogImageFileName(pagePath) { + return pagePath.replace(/^\//, '').replace(/\//g, '-') + '.png'; +} + +async function main() { + const pages = collectPages(CONTENT_DIR, []); + fs.mkdirSync(OUT_DIR, {recursive: true}); + let done = 0; + const queue = [...pages]; + async function worker() { + for (;;) { + const page = queue.shift(); + if (!page) return; + const png = await renderCard(page.title, page.pagePath); + fs.writeFileSync(path.join(OUT_DIR, ogImageFileName(page.pagePath)), png); + done++; + if (done % 100 === 0) { + console.log(`og-images: ${done}/${pages.length}`); + } + } + } + await Promise.all(Array.from({length: CONCURRENCY}, worker)); + console.log(`og-images: generated ${done} images in public/images/og`); +} + +main().catch((error) => { + console.error(error); + process.exit(1); +}); diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx index bd98d5b38..dff09ed3a 100644 --- a/src/components/ButtonLink.tsx +++ b/src/components/ButtonLink.tsx @@ -33,7 +33,7 @@ function ButtonLink({ className, 'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug', { - 'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80': + 'bg-link text-white dark:bg-brand-dark dark:text-gray-90 hover:bg-opacity-80': type === 'primary', 'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10': type === 'secondary', diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index d11e1469d..50aed2118 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -344,7 +344,7 @@ export function Footer() { <FooterLink href="/community" isHeader={true}> Community </FooterLink> - <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md"> + <FooterLink href="https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md"> Code of Conduct </FooterLink> <FooterLink href="/community/team">Meet the Team</FooterLink> @@ -386,7 +386,7 @@ export function Footer() { </ExternalLink> <ExternalLink aria-label="React on Github" - href="https://github.com/facebook/react" + href="https://github.com/react/react" className={socialLinkClasses}> <IconGitHub /> </ExternalLink> diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index aa39fe5fc..59cf4386d 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -129,7 +129,18 @@ export function Page({ title={title} titleForTitleTag={meta.titleForTitleTag} isHomePage={isHomePage} - image={`/images/og-` + section + '.png'} + image={ + // OG images are generated per page at build time by + // scripts/generateOgImages.mjs. Pages without a generated + // card (home, errors, 404, 500) use the static section image. + isHomePage || + !title || + cleanedPath.startsWith('/errors') || + cleanedPath === '/404' || + cleanedPath === '/500' + ? `/images/og-${section ?? 'unknown'}.png` + : `/images/og/${cleanedPath.slice(1).replace(/\//g, '-')}.png` + } searchOrder={searchOrder} /> {(isHomePage || isBlogIndex) && ( diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index eac40a5a1..1deb0a6d9 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -11,6 +11,7 @@ import cx from 'classnames'; import {useTocHighlight} from './useTocHighlight'; +import {IsInTocContext} from '../MDX/TocContext'; import type {Toc} from '../MDX/TocContext'; export function Toc({headings}: {headings: Toc}) { @@ -32,37 +33,39 @@ export function Toc({headings}: {headings: Toc}) { overscrollBehavior: 'contain', }}> <ul className="space-y-2 pb-16"> - {headings.length > 0 && - headings.map((h, i) => { - if (!h.url && process.env.NODE_ENV === 'development') { - console.error('Heading does not have URL'); - } - return ( - <li - key={`heading-${h.url}-${i}`} - className={cx( - 'text-sm px-2 rounded-s-xl', - selectedIndex === i - ? 'bg-highlight dark:bg-highlight-dark' - : null, - { - 'ps-4': h?.depth === 3, - hidden: h.depth && h.depth > 3, - } - )}> - <a + <IsInTocContext.Provider value={true}> + {headings.length > 0 && + headings.map((h, i) => { + if (!h.url && process.env.NODE_ENV === 'development') { + console.error('Heading does not have URL'); + } + return ( + <li + key={`heading-${h.url}-${i}`} className={cx( + 'text-sm px-2 rounded-s-xl', selectedIndex === i - ? 'text-link dark:text-link-dark font-bold' - : 'text-secondary dark:text-secondary-dark', - 'block hover:text-link dark:hover:text-link-dark leading-normal py-2' - )} - href={h.url}> - {h.text} - </a> - </li> - ); - })} + ? 'bg-highlight dark:bg-highlight-dark' + : null, + { + 'ps-4': h?.depth === 3, + hidden: h.depth && h.depth > 3, + } + )}> + <a + className={cx( + selectedIndex === i + ? 'text-link dark:text-link-dark font-bold' + : 'text-secondary dark:text-secondary-dark', + 'block hover:text-link dark:hover:text-link-dark leading-normal py-2' + )} + href={h.url}> + {h.text} + </a> + </li> + ); + })} + </IsInTocContext.Provider> </ul> </div> </nav> diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index f2bbc8384..f9c2901e1 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -386,7 +386,7 @@ export default function TopNav({ </div> <div className="flex"> <Link - href="https://github.com/facebook/react/releases" + href="https://github.com/react/react/releases" target="_blank" rel="noreferrer noopener" aria-label="Open on GitHub" diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 89f3bf5ff..d6df071c4 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -36,7 +36,7 @@ import YouWillLearnCard from './YouWillLearnCard'; import {Challenges, Hint, Solution} from './Challenges'; import {IconNavArrow} from '../Icon/IconNavArrow'; import ButtonLink from 'components/ButtonLink'; -import {TocContext} from './TocContext'; +import {TocContext, IsInTocContext} from './TocContext'; import type {Toc, TocItem} from './TocContext'; import {TeamMember} from './TeamMember'; import {LanguagesContext} from './LanguagesContext'; @@ -122,33 +122,57 @@ const RSC = ({children}: {children: React.ReactNode}) => ( <ExpandableCallout type="rsc">{children}</ExpandableCallout> ); -const CanaryBadge = ({title}: {title: string}) => ( - <span - title={title} - 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' - }> - <IconCanary - size="s" - className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} - /> - Canary only - </span> -); +const CanaryBadge = ({title}: {title: string}) => { + const isInToc = useContext(IsInTocContext); + if (isInToc) { + return ( + <IconCanary + size="s" + title={title} + className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10" + /> + ); + } + return ( + <span + title={title} + 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' + }> + <IconCanary + size="s" + className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} + /> + Canary only + </span> + ); +}; -const ExperimentalBadge = ({title}: {title: string}) => ( - <span - title={title} - 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' - }> - <IconExperimental - size="s" - className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} - /> - Experimental only - </span> -); +const ExperimentalBadge = ({title}: {title: string}) => { + const isInToc = useContext(IsInTocContext); + if (isInToc) { + return ( + <IconExperimental + size="s" + title={title} + className="inline me-1 mb-0.5 text-gray-60 dark:text-gray-10" + /> + ); + } + return ( + <span + title={title} + 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' + }> + <IconExperimental + size="s" + className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'} + /> + Experimental only + </span> + ); +}; const NextMajorBadge = ({title}: {title: string}) => ( <span @@ -422,7 +446,11 @@ function InlineToc() { if (root.children.length < 2) { return null; } - return <InlineTocItem items={root.children} />; + return ( + <IsInTocContext.Provider value={true}> + <InlineTocItem items={root.children} /> + </IsInTocContext.Provider> + ); } function InlineTocItem({items}: {items: Array<NestedTocNode>}) { diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx index 7e0d68963..1139be87d 100644 --- a/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/src/components/MDX/Sandpack/DownloadButton.tsx @@ -19,7 +19,7 @@ let supportsImportMap = false; function subscribe(cb: () => void) { // This shouldn't actually need to update, but this works around - // https://github.com/facebook/react/issues/26095 + // https://github.com/react/react/issues/26095 let timeout = setTimeout(() => { supportsImportMap = (HTMLScriptElement as any).supports && 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 index e30f04935..5d2bf7a45 100644 --- 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 @@ -26,10 +26,10 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ('use strict'); (() => { var Z = (e, t) => () => (t || e((t = {exports: {}}).exports, t), t.exports); - var Wc = Z((ht) => { + var nu = Z((ft) => { 'use strict'; - var ei = {H: null, A: null}; - function Yo(e) { + var si = {H: null, A: null}; + function ta(e) { var t = 'https://react.dev/errors/' + e; if (1 < arguments.length) { t += '?args[]=' + encodeURIComponent(arguments[1]); @@ -44,38 +44,38 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ' 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) { + var Yc = Array.isArray, + na = Symbol.for('react.transitional.element'), + $f = Symbol.for('react.portal'), + Kf = Symbol.for('react.fragment'), + qf = Symbol.for('react.strict_mode'), + Uf = Symbol.for('react.profiler'), + Hf = Symbol.for('react.forward_ref'), + Wf = Symbol.for('react.suspense'), + Gf = Symbol.for('react.memo'), + eu = Symbol.for('react.lazy'), + Jc = Symbol.iterator; + function zf(e) { return e === null || typeof e != 'object' ? null - : ((e = ($c && e[$c]) || e['@@iterator']), + : ((e = (Jc && e[Jc]) || e['@@iterator']), typeof e == 'function' ? e : null); } - var Hc = Object.prototype.hasOwnProperty, - Ff = Object.assign; - function Qo(e, t, s, i, r, a) { + var tu = Object.prototype.hasOwnProperty, + Xf = Object.assign; + function sa(e, t, s, i, r, a) { return ( (s = a.ref), - {$$typeof: Jo, type: e, key: t, ref: s !== void 0 ? s : null, props: a} + {$$typeof: na, 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 Yf(e, t) { + return sa(e.type, t, void 0, void 0, void 0, e.props); } - function Zo(e) { - return typeof e == 'object' && e !== null && e.$$typeof === Jo; + function ia(e) { + return typeof e == 'object' && e !== null && e.$$typeof === na; } - function Vf(e) { + function Jf(e) { var t = {'=': '=0', ':': '=2'}; return ( '$' + @@ -84,14 +84,14 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { }) ); } - var qc = /\/+/g; - function zo(e, t) { + var Qc = /\/+/g; + function Zo(e, t) { return typeof e == 'object' && e !== null && e.key != null - ? Vf('' + e.key) + ? Jf('' + e.key) : t.toString(36); } - function Kc() {} - function jf(e) { + function Zc() {} + function Qf(e) { switch (e.status) { case 'fulfilled': return e.value; @@ -100,7 +100,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { default: switch ( (typeof e.status == 'string' - ? e.then(Kc, Kc) + ? e.then(Zc, Zc) : ((e.status = 'pending'), e.then( function (t) { @@ -122,7 +122,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { } throw e; } - function Zs(e, t, s, i, r) { + function ni(e, t, s, i, r) { var a = typeof e; (a === 'undefined' || a === 'boolean') && (e = null); var u = !1; @@ -136,32 +136,32 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { break; case 'object': switch (e.$$typeof) { - case Jo: - case Af: + case na: + case $f: u = !0; break; - case Uc: - return (u = e._init), Zs(u(e._payload), t, s, i, r); + case eu: + return (u = e._init), ni(u(e._payload), t, s, i, r); } } if (u) return ( (r = r(e)), - (u = i === '' ? '.' + zo(e, 0) : i), - jc(r) + (u = i === '' ? '.' + Zo(e, 0) : i), + Yc(r) ? ((s = ''), - u != null && (s = u.replace(qc, '$&/') + '/'), - Zs(r, t, s, '', function (g) { + u != null && (s = u.replace(Qc, '$&/') + '/'), + ni(r, t, s, '', function (g) { return g; })) : r != null && - (Zo(r) && - (r = Bf( + (ia(r) && + (r = Yf( r, s + (r.key == null || (e && e.key === r.key) ? '' - : ('' + r.key).replace(qc, '$&/') + '/') + + : ('' + r.key).replace(Qc, '$&/') + '/') + u )), t.push(r)), @@ -169,18 +169,18 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ); 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)); + if (Yc(e)) + for (var v = 0; v < e.length; v++) + (i = e[v]), (a = d + Zo(i, v)), (u += ni(i, t, s, a, r)); + else if (((v = zf(e)), typeof v == 'function')) + for (e = v.call(e), v = 0; !(i = e.next()).done; ) + (i = i.value), (a = d + Zo(i, v++)), (u += ni(i, t, s, a, r)); else if (a === 'object') { - if (typeof e.then == 'function') return Zs(jf(e), t, s, i, r); + if (typeof e.then == 'function') return ni(Qf(e), t, s, i, r); throw ( ((t = String(e)), Error( - Yo( + ta( 31, t === '[object Object]' ? 'object with keys {' + Object.keys(e).join(', ') + '}' @@ -191,18 +191,18 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { } return u; } - function _r(e, t, s) { + function Ir(e, t, s) { if (e == null) return e; var i = [], r = 0; return ( - Zs(e, i, '', '', function (a) { + ni(e, i, '', '', function (a) { return t.call(s, a, r++); }), i ); } - function $f(e) { + function Zf(e) { if (e._status === -1) { var t = e._result; (t = t()), @@ -221,16 +221,16 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { if (e._status === 1) return e._result.default; throw e._result; } - function qf() { + function ed() { return new WeakMap(); } - function Xo() { + function ea() { return {s: 0, v: void 0, o: null, p: null}; } - ht.Children = { - map: _r, + ft.Children = { + map: Ir, forEach: function (e, t, s) { - _r( + Ir( e, function () { t.apply(this, arguments); @@ -241,7 +241,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { count: function (e) { var t = 0; return ( - _r(e, function () { + Ir(e, function () { t++; }), t @@ -249,39 +249,39 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { }, toArray: function (e) { return ( - _r(e, function (t) { + Ir(e, function (t) { return t; }) || [] ); }, only: function (e) { - if (!Zo(e)) throw Error(Yo(143)); + if (!ia(e)) throw Error(ta(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) { + ft.Fragment = Kf; + ft.Profiler = Uf; + ft.StrictMode = qf; + ft.Suspense = Wf; + ft.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = si; + ft.cache = function (e) { return function () { - var t = ei.A; + var t = si.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); + var s = t.getCacheForType(ed); + (t = s.get(e)), t === void 0 && ((t = ea()), 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)); + t === void 0 && ((t = ea()), 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)); + t === void 0 && ((t = ea()), a.set(r, t)); } if (t.s === 1) return t.v; if (t.s === 2) throw t.v; @@ -293,16 +293,16 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { } }; }; - ht.cloneElement = function (e, t, s) { - if (e == null) throw Error(Yo(267, e)); - var i = Ff({}, e.props), + ft.cloneElement = function (e, t, s) { + if (e == null) throw Error(ta(267, e)); + var i = Xf({}, 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) || + !tu.call(t, u) || u === 'key' || u === '__self' || u === '__source' || @@ -311,18 +311,18 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { 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]; + for (var d = Array(u), v = 0; v < u; v++) d[v] = arguments[v + 2]; i.children = d; } - return Qo(e.type, r, void 0, void 0, a, i); + return sa(e.type, r, void 0, void 0, a, i); }; - ht.createElement = function (e, t, s) { + ft.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) && + tu.call(t, i) && i !== 'key' && i !== '__self' && i !== '__source' && @@ -330,55 +330,55 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { 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]; + for (var d = Array(u), v = 0; v < u; v++) d[v] = arguments[v + 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); + return sa(e, a, void 0, void 0, null, r); }; - ht.createRef = function () { + ft.createRef = function () { return {current: null}; }; - ht.forwardRef = function (e) { - return {$$typeof: Lf, render: e}; + ft.forwardRef = function (e) { + return {$$typeof: Hf, render: e}; }; - ht.isValidElement = Zo; - ht.lazy = function (e) { - return {$$typeof: Uc, _payload: {_status: -1, _result: e}, _init: $f}; + ft.isValidElement = ia; + ft.lazy = function (e) { + return {$$typeof: eu, _payload: {_status: -1, _result: e}, _init: Zf}; }; - ht.memo = function (e, t) { - return {$$typeof: Df, type: e, compare: t === void 0 ? null : t}; + ft.memo = function (e, t) { + return {$$typeof: Gf, type: e, compare: t === void 0 ? null : t}; }; - ht.use = function (e) { - return ei.H.use(e); + ft.use = function (e) { + return si.H.use(e); }; - ht.useCallback = function (e, t) { - return ei.H.useCallback(e, t); + ft.useCallback = function (e, t) { + return si.H.useCallback(e, t); }; - ht.useDebugValue = function () {}; - ht.useId = function () { - return ei.H.useId(); + ft.useDebugValue = function () {}; + ft.useId = function () { + return si.H.useId(); }; - ht.useMemo = function (e, t) { - return ei.H.useMemo(e, t); + ft.useMemo = function (e, t) { + return si.H.useMemo(e, t); }; - ht.version = '19.0.0'; + ft.version = '19.0.0'; }); - var Li = Z((e_, Gc) => { + var Di = Z((d_, su) => { 'use strict'; - Gc.exports = Wc(); + su.exports = nu(); }); - var Xc = Z((Oi) => { + var ru = Z((Mi) => { '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) + var td = Di(), + nd = Symbol.for('react.transitional.element'), + sd = Symbol.for('react.fragment'); + if (!td.__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) { + function iu(e, t, s) { var i = null; if ( (s !== void 0 && (i = '' + s), @@ -390,51 +390,51 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { } else s = t; return ( (t = s.ref), - {$$typeof: Uf, type: e, key: i, ref: t !== void 0 ? t : null, props: s} + {$$typeof: nd, 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; + Mi.Fragment = sd; + Mi.jsx = iu; + Mi.jsxDEV = void 0; + Mi.jsxs = iu; }); - var Jc = Z((n_, Yc) => { + var au = Z((T_, ou) => { 'use strict'; - Yc.exports = Xc(); + ou.exports = ru(); }); - var Qc = Z((jn) => { + var lu = Z((qn) => { 'use strict'; - var Wf = Li(); - function ns() {} - var Sn = { + var id = Di(); + function as() {} + var In = { d: { - f: ns, + f: as, 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, + D: as, + C: as, + L: as, + m: as, + X: as, + S: as, + M: as, }, p: 0, findDOMNode: null, }; - if (!Wf.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE) + if (!id.__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) { + function Er(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) { + qn.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = In; + qn.preconnect = function (e, t) { typeof e == 'string' && (t ? ((t = t.crossOrigin), @@ -445,25 +445,25 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { : '' : void 0)) : (t = null), - Sn.d.C(e, t)); + In.d.C(e, t)); }; - jn.prefetchDNS = function (e) { - typeof e == 'string' && Sn.d.D(e); + qn.prefetchDNS = function (e) { + typeof e == 'string' && In.d.D(e); }; - jn.preinit = function (e, t) { + qn.preinit = function (e, t) { if (typeof e == 'string' && t && typeof t.as == 'string') { var s = t.as, - i = br(s, t.crossOrigin), + i = Er(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, { + ? In.d.S(e, typeof t.precedence == 'string' ? t.precedence : void 0, { crossOrigin: i, integrity: r, fetchPriority: a, }) : s === 'script' && - Sn.d.X(e, { + In.d.X(e, { crossOrigin: i, integrity: r, fetchPriority: a, @@ -471,20 +471,20 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { }); } }; - jn.preinitModule = function (e, t) { + qn.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, { + var s = Er(t.as, t.crossOrigin); + In.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); + } else t == null && In.d.M(e); }; - jn.preload = function (e, t) { + qn.preload = function (e, t) { if ( typeof e == 'string' && typeof t == 'object' && @@ -492,8 +492,8 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { typeof t.as == 'string' ) { var s = t.as, - i = br(s, t.crossOrigin); - Sn.d.L(e, s, { + i = Er(s, t.crossOrigin); + In.d.L(e, s, { crossOrigin: i, integrity: typeof t.integrity == 'string' ? t.integrity : void 0, nonce: typeof t.nonce == 'string' ? t.nonce : void 0, @@ -509,99 +509,116 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { }); } }; - jn.preloadModule = function (e, t) { + qn.preloadModule = function (e, t) { if (typeof e == 'string') if (t) { - var s = br(t.as, t.crossOrigin); - Sn.d.m(e, { + var s = Er(t.as, t.crossOrigin); + In.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); + } else In.d.m(e); }; - jn.version = '19.0.0'; + qn.version = '19.0.0'; }); - var eu = Z((i_, Zc) => { + var uu = Z((k_, cu) => { 'use strict'; - Zc.exports = Qc(); + cu.exports = lu(); }); - var Zu = Z((En) => { + var p1 = Z((Nn) => { 'use strict'; - var Gf = eu(), - zf = Li(), - Tu = new MessageChannel(), - ku = []; - Tu.port1.onmessage = function () { - var e = ku.shift(); + var rd = uu(), + od = Di(); + function ce(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 Iu = new MessageChannel(), + Eu = []; + Iu.port1.onmessage = function () { + var e = Eu.shift(); e && e(); }; - function Bi(e) { - ku.push(e), Tu.port2.postMessage(null); + function Ki(e) { + Eu.push(e), Iu.port2.postMessage(null); } - function Xf(e) { + function ad(e) { setTimeout(function () { throw e; }); } - var Yf = Promise, - vu = + var ld = Promise, + Au = typeof queueMicrotask == 'function' ? queueMicrotask : function (e) { - Yf.resolve(null).then(e).catch(Xf); + ld.resolve(null).then(e).catch(ad); }, - ln = null, - cn = 0; - function Cr(e, t) { + pn = null, + hn = 0; + function Pu(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)), + 0 < hn && + (e.enqueue(new Uint8Array(pn.buffer, 0, hn)), + (pn = new Uint8Array(2048)), + (hn = 0)), e.enqueue(t); else { - var s = ln.length - cn; + var s = pn.length - hn; s < t.byteLength && (s === 0 - ? e.enqueue(ln) - : (ln.set(t.subarray(0, s), cn), - e.enqueue(ln), + ? e.enqueue(pn) + : (pn.set(t.subarray(0, s), hn), + e.enqueue(pn), (t = t.subarray(s))), - (ln = new Uint8Array(2048)), - (cn = 0)), - ln.set(t, cn), - (cn += t.byteLength); + (pn = new Uint8Array(2048)), + (hn = 0)), + pn.set(t, hn), + (hn += t.byteLength); } - return !0; } - var Jf = new TextEncoder(); - function pn(e) { - return Jf.encode(e); + function Fi(e, t) { + return Pu(e, t), !0; } - function la(e) { + var cd = new TextEncoder(); + function Zt(e) { + return cd.encode(e); + } + function Ta(e) { return e.byteLength; } - function xu(e, t) { + function Nu(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) { + var us = Symbol.for('react.client.reference'), + Dr = Symbol.for('react.server.reference'); + function ii(e, t, s) { return Object.defineProperties(e, { - $$typeof: {value: rs}, + $$typeof: {value: us}, $$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}, + var ud = Function.prototype.bind, + pd = Array.prototype.slice; + function Ru() { + var e = ud.apply(this, arguments); + if (this.$$typeof === Dr) { + var t = pd.call(arguments, 1), + s = {value: Dr}, i = {value: this.$$id}; return ( (t = {value: this.$$bound ? this.$$bound.concat(t) : t}), @@ -609,22 +626,22 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { $$typeof: s, $$id: i, $$bound: t, - bind: {value: gu, configurable: !0}, + bind: {value: Ru, configurable: !0}, }) ); } return e; } - var ed = { + var hd = { value: function () { return 'function () { [omitted code] }'; }, configurable: !0, writable: !0, }, - td = Promise.prototype, - nd = { - get: function (e, t) { + fd = Promise.prototype, + dd = { + get: function (e, t, s) { switch (t) { case '$$typeof': return e.$$typeof; @@ -647,25 +664,17 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { 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.' - ); + return s; case 'then': - throw Error( - 'Cannot await or return from a thenable. You cannot await a client module from a server component.' - ); + throw Error(ce(590)); } - 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.' - ); + throw Error(ce(591, String(e.name) + '.' + String(t))); }, set: function () { - throw Error('Cannot assign to a client module from a server module.'); + throw Error(ce(592)); }, }; - function tu(e, t) { + function pu(e, t) { switch (t) { case '$$typeof': return e.$$typeof; @@ -688,13 +697,9 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { case '__esModule': var s = e.$$id; return ( - (e.default = ti( + (e.default = ii( 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." - ); + throw Error(ce(593, s)); }, e.$$id + '#', e.$$async @@ -704,12 +709,12 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { case 'then': if (e.then) return e.then; if (e.$$async) return; - var i = ti({}, e.$$id, !0), - r = new Proxy(i, _u); + var i = ii({}, e.$$id, !0), + r = new Proxy(i, Lu); return ( (e.status = 'fulfilled'), (e.value = r), - (e.then = ti( + (e.then = ii( function (a) { return Promise.resolve(a(r)); }, @@ -718,41 +723,32 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { )) ); } - if (typeof t == 'symbol') - throw Error( - 'Cannot read Symbol exports. Only named exports are supported on a client module imported on the server.' - ); + if (typeof t == 'symbol') throw Error(ce(594)); return ( (i = e[t]), i || - ((i = ti( + ((i = ii( 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." - ); + throw Error(ce(595, String(t), String(t))); }, e.$$id + '#' + t, e.$$async )), Object.defineProperty(i, 'name', {value: t}), - (i = e[t] = new Proxy(i, nd))), + (i = e[t] = new Proxy(i, dd))), i ); } - var _u = { + var Lu = { get: function (e, t) { - return tu(e, t); + return pu(e, t); }, getOwnPropertyDescriptor: function (e, t) { var s = Object.getOwnPropertyDescriptor(e, t); return ( s || ((s = { - value: tu(e, t), + value: pu(e, t), writable: !1, configurable: !1, enumerable: !1, @@ -762,117 +758,117 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ); }, getPrototypeOf: function () { - return td; + return fd; }, set: function () { - throw Error('Cannot assign to a client module from a server module.'); + throw Error(ce(592)); }, }, - 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) { + Ou = rd.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, + Wn = Ou.d; + Ou.d = {f: Wn.f, r: Wn.r, D: md, C: Td, L: Pr, m: Du, X: kd, S: yd, M: vd}; + function md(e) { if (typeof e == 'string' && e) { - var t = st || null; + var t = it || null; if (t) { var s = t.hints, i = 'D|' + e; - s.has(i) || (s.add(i), Ut(t, 'D', e)); - } else qn.D(e); + s.has(i) || (s.add(i), Ht(t, 'D', e)); + } else Wn.D(e); } } - function id(e, t) { + function Td(e, t) { if (typeof e == 'string') { - var s = st || null; + var s = it || 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); + typeof t == 'string' ? Ht(s, 'C', [e, t]) : Ht(s, 'C', e)); + } else Wn.C(e, t); } } - function Sr(e, t, s) { + function Pr(e, t, s) { if (typeof e == 'string') { - var i = st || null; + var i = it || null; if (i) { var r = i.hints, a = 'L'; if (t === 'image' && s) { var u = s.imageSrcSet, d = s.imageSizes, - y = ''; + v = ''; typeof u == 'string' && u !== '' - ? ((y += '[' + u + ']'), - typeof d == 'string' && (y += '[' + d + ']')) - : (y += '[][]' + e), - (a += '[image]' + y); + ? ((v += '[' + u + ']'), + typeof d == 'string' && (v += '[' + d + ']')) + : (v += '[][]' + e), + (a += '[image]' + v); } 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); + (s = Ui(s)) ? Ht(i, 'L', [e, t, s]) : Ht(i, 'L', [e, t])); + } else Wn.L(e, t, s); } } - function Cu(e, t) { + function Du(e, t) { if (typeof e == 'string') { - var s = st || null; + var s = it || 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)); + : (i.add(r), (t = Ui(t)) ? Ht(s, 'm', [e, t]) : Ht(s, 'm', e)); } - qn.m(e, t); + Wn.m(e, t); } } - function rd(e, t, s) { + function yd(e, t, s) { if (typeof e == 'string') { - var i = st || null; + var i = it || 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]) + (s = Ui(s)) + ? Ht(i, 'S', [e, typeof t == 'string' ? t : 0, s]) : typeof t == 'string' - ? Ut(i, 'S', [e, t]) - : Ut(i, 'S', e)); + ? Ht(i, 'S', [e, t]) + : Ht(i, 'S', e)); } - qn.S(e, t, s); + Wn.S(e, t, s); } } - function od(e, t) { + function kd(e, t) { if (typeof e == 'string') { - var s = st || null; + var s = it || 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)); + : (i.add(r), (t = Ui(t)) ? Ht(s, 'X', [e, t]) : Ht(s, 'X', e)); } - qn.X(e, t); + Wn.X(e, t); } } - function ad(e, t) { + function vd(e, t) { if (typeof e == 'string') { - var s = st || null; + var s = it || 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)); + : (i.add(r), (t = Ui(t)) ? Ht(s, 'M', [e, t]) : Ht(s, 'M', e)); } - qn.M(e, t); + Wn.M(e, t); } } - function ji(e) { + function Ui(e) { if (e == null) return null; var t = !1, s = {}, @@ -880,7 +876,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { for (i in e) e[i] != null && ((t = !0), (s[i] = e[i])); return t ? s : null; } - function ld(e, t, s) { + function xd(e, t, s) { switch (t) { case 'img': t = s.src; @@ -909,7 +905,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ) { var r = typeof s.sizes == 'string' ? s.sizes : void 0, a = s.crossOrigin; - Sr(t || '', 'image', { + Pr(t || '', 'image', { imageSrcSet: i, imageSizes: r, crossOrigin: @@ -939,7 +935,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ) switch (t) { case 'preload': - Sr(i, s.as, { + Pr(i, s.as, { crossOrigin: s.crossOrigin, integrity: s.integrity, nonce: s.nonce, @@ -952,7 +948,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { }); break; case 'modulepreload': - Cu(i, { + Du(i, { as: s.as, crossOrigin: s.crossOrigin, integrity: s.integrity, @@ -960,7 +956,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { }); break; case 'stylesheet': - Sr(i, 'stylesheet', { + Pr(i, 'style', { crossOrigin: s.crossOrigin, integrity: s.integrity, nonce: s.nonce, @@ -979,9 +975,9 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { return e; } } - var ca = Symbol.for('react.temporary.reference'), - cd = { - get: function (e, t) { + var ya = Symbol.for('react.temporary.reference'), + gd = { + get: function (e, t, s) { switch (t) { case '$$typeof': return e.$$typeof; @@ -1000,72 +996,64 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { 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.' - ); + return s; 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.' - ); + throw Error(ce(514, String(t))); }, set: function () { - throw Error( - 'Cannot assign to a temporary client reference from a server module.' - ); + throw Error(ce(515)); }, }; - function ud(e, t) { + function _d(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." - ); + throw Error(ce(516)); }, - {$$typeof: {value: ca}} + {$$typeof: {value: ya}} ); - 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 (s = new Proxy(s, gd)), e.set(s, t), s; + } + var bd = Symbol.for('react.element'), + En = Symbol.for('react.transitional.element'), + ka = Symbol.for('react.fragment'), + hu = Symbol.for('react.context'), + Mu = Symbol.for('react.forward_ref'), + Cd = Symbol.for('react.suspense'), + wd = Symbol.for('react.suspense_list'), + Fu = Symbol.for('react.memo'), + Hi = Symbol.for('react.lazy'), + Sd = Symbol.for('react.memo_cache_sentinel'), + Id = Symbol.for('react.view_transition'), + fu = Symbol.iterator; + function Bu(e) { return e === null || typeof e != 'object' ? null - : ((e = (su && e[su]) || e['@@iterator']), + : ((e = (fu && e[fu]) || 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) { + var As = Symbol.asyncIterator, + ri = Symbol.for('react.optimistic_key'); + function An() {} + var va = Error(ce(460)); + function Ed(e, t, s) { switch ( ((s = e[s]), - s === void 0 ? e.push(t) : s !== t && (t.then(Cs, Cs), (t = s)), + s === void 0 ? e.push(t) : s !== t && (t.then(An, An), (t = s)), t.status) ) { case 'fulfilled': return t.value; case 'rejected': - throw t.reason; + throw ( + ((e = t.reason), + e === void 0 && !('reason' in t) ? Error(ce(600)) : e) + ); default: switch ( (typeof t.status == 'string' - ? t.then(Cs, Cs) + ? t.then(An, An) : ((e = t), (e.status = 'pending'), e.then( @@ -1089,32 +1077,29 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { case 'rejected': throw t.reason; } - throw ((Ir = t), pa); + throw ((Nr = t), va); } } - 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, + var Nr = null; + function Vu() { + if (Nr === null) throw Error(ce(459)); + var e = Nr; + return (Nr = null), e; + } + var Vi = null, + oa = 0, + oi = null; + function ju() { + var e = oi || []; + return (oi = null), e; + } + var Ad = { + readContext: aa, + use: Rd, useCallback: function (e) { return e; }, - useContext: na, + useContext: aa, useEffect: Vt, useImperativeHandle: Vt, useLayoutEffect: Vt, @@ -1129,84 +1114,78 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { useDeferredValue: Vt, useTransition: Vt, useSyncExternalStore: Vt, - useId: Td, + useId: Nd, useHostTransitionStatus: Vt, useFormState: Vt, useActionState: Vt, useOptimistic: Vt, useMemoCache: function (e) { - for (var t = Array(e), s = 0; s < e; s++) t[s] = dd; + for (var t = Array(e), s = 0; s < e; s++) t[s] = Sd; return t; }, useCacheRefresh: function () { - return yd; + return Pd; }, + useEffectEvent: Vt, }; - Pu.useEffectEvent = Vt; function Vt() { - throw Error('This Hook is not supported in Server Components.'); + throw Error(ce(373)); } - function yd() { - throw Error( - 'Refreshing the cache is not supported in Server Components.' - ); + function Pd() { + throw Error(ce(384)); } - function na() { - throw Error('Cannot read a Client Context from a Server Component.'); + function aa() { + throw Error(ce(502)); } - 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 Nd() { + if (Vi === null) throw Error(ce(433)); + var e = Vi.identifierCount++; + return '_' + Vi.identifierPrefix + 'S_' + e.toString(32) + '_'; } - function kd(e) { + function Rd(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); + var t = oa; + return (oa += 1), oi === null && (oi = []), Ed(oi, e, t); } - e.$$typeof === nu && na(); + e.$$typeof === hu && aa(); } - 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)); + throw e.$$typeof === us + ? e.value != null && e.value.$$typeof === hu + ? Error(ce(502)) + : Error(ce(503)) + : Error(ce(438, String(e))); } - var iu = { + var du = { getCacheForType: function (e) { - var t = (t = st || null) ? t.cache : new Map(), + var t = (t = it || 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; + var e = it || 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) { + Ps = od.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; + if (!Ps) throw Error(ce(492)); + var en = Array.isArray, + Ns = Object.getPrototypeOf; + function $u(e) { return (e = Object.prototype.toString.call(e)), e.slice(8, e.length - 1); } - function ru(e) { + function mu(e) { switch (typeof e) { case 'string': return JSON.stringify(10 >= e.length ? e : e.slice(0, 10) + '...'); case 'object': - return kn(e) + return en(e) ? '[...]' - : e !== null && e.$$typeof === sa + : e !== null && e.$$typeof === la ? 'client' - : ((e = Nu(e)), e === 'Object' ? '{...}' : e); + : ((e = $u(e)), e === 'Object' ? '{...}' : e); case 'function': - return e.$$typeof === sa + return e.$$typeof === la ? 'client' : (e = e.displayName || e.name) ? 'function ' + e @@ -1215,40 +1194,42 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { return String(e); } } - function Er(e) { + function Rr(e) { if (typeof e == 'string') return e; switch (e) { - case hd: + case Cd: return 'Suspense'; - case fd: + case wd: return 'SuspenseList'; + case Id: + return 'ViewTransition'; } if (typeof e == 'object') switch (e.$$typeof) { - case wu: - return Er(e.render); - case Su: - return Er(e.type); - case $i: + case Mu: + return Rr(e.render); + case Fu: + return Rr(e.type); + case Hi: var t = e._payload; e = e._init; try { - return Er(e(t)); + return Rr(e(t)); } catch {} } return ''; } - var sa = Symbol.for('react.client.reference'); - function _s(e, t) { - var s = Nu(e); + var la = Symbol.for('react.client.reference'); + function Ss(e, t) { + var s = $u(e); if (s !== 'Object' && s !== 'Array') return s; s = -1; var i = 0; - if (kn(e)) { + if (en(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)), + (u = typeof u == 'object' && u !== null ? Ss(u) : mu(u)), '' + a === t ? ((s = r.length), (i = u.length), (r += u)) : (r = @@ -1257,21 +1238,21 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { : r + '...'); } r += ']'; - } else if (e.$$typeof === In) r = '<' + Er(e.type) + '/>'; + } else if (e.$$typeof === En) r = '<' + Rr(e.type) + '/>'; else { - if (e.$$typeof === sa) return 'client'; + if (e.$$typeof === la) 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)), + v = JSON.stringify(d); + (r += ('"' + d + '"' === v ? d : v) + ': '), + (v = e[d]), + (v = typeof v == 'object' && v !== null ? Ss(v) : mu(v)), d === t - ? ((s = r.length), (i = y.length), (r += y)) + ? ((s = r.length), (i = v.length), (r += v)) : (r = - 10 > y.length && 40 > r.length + y.length - ? r + y + 10 > v.length && 40 > r.length + v.length + ? r + v : r + '...'); } r += '}'; @@ -1289,21 +1270,19 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { : ` ` + r; } - var Nr = Object.prototype.hasOwnProperty, - vd = Object.prototype, - Es = JSON.stringify; - function xd(e) { + var Wi = Object.prototype.hasOwnProperty, + ca = Object.prototype, + Gn = JSON.stringify, + xa = Symbol(); + function Ld(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(); + function Ku(e, t, s, i, r, a, u, d) { + if (Ps.A !== null && Ps.A !== du) throw Error(ce(458)); + Ps.A = du; + var v = new Set(), + g = [], + O = new Set(); (this.type = e), (this.status = 10), (this.flushScheduled = !1), @@ -1312,9 +1291,9 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { (this.cache = new Map()), (this.cacheController = new AbortController()), (this.pendingChunks = this.nextChunkId = 0), - (this.hints = p), - (this.abortableTasks = g), - (this.pingedTasks = L), + (this.hints = O), + (this.abortableTasks = v), + (this.pingedTasks = g), (this.completedImportChunks = []), (this.completedHintChunks = []), (this.completedRegularChunks = []), @@ -1323,107 +1302,127 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { (this.writtenClientReferences = new Map()), (this.writtenServerReferences = new Map()), (this.writtenObjects = new WeakMap()), - (this.temporaryReferences = y), - (this.identifierPrefix = d || ''), + (this.writtenImportStrings = new Map()), + (this.writtenImportStringsSize = 0), + (this.temporaryReferences = d), + (this.identifierPrefix = u || ''), (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 - ); + (this.onError = i === void 0 ? Ld : i), + (this.onAllReady = r), + (this.onFatalError = a), + (e = Pn(this, t, null, !1, 0, v)), + g.push(e); + } + var it = null; + function Tu(e, t, s) { switch (s.status) { case 'fulfilled': - return (i.model = s.value), Vi(e, i), i.id; + return ( + (t = Pn( + e, + s, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + )), + (t.model = s.value), + qi(e, t), + t.id + ); case 'rejected': - return Un(e, i, s.reason), i.id; + return ( + (t = Pn( + e, + s, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + )), + Xn(e, t, s.reason), + t.id + ); default: - if (e.status === 12) - return ( - e.abortableTasks.delete(i), + var i = Pn( + e, + s, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + ); + return e.status === 12 + ? (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)); - } - )); + ? (ai(i), li(i, e)) + : ((t = e.fatalError), _a(i), ba(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)); + } + )), + s.then( + function (r) { + (i.model = r), qi(e, i); + }, + function (r) { + i.status === 0 && (Xn(e, i, r), fn(e)); + } + ), + i.id); } - 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) + + function Od(e, t, s) { + function i(O) { + if (g.status === 0) + if (O.done) + (g.status = 1), + (O = + g.id.toString(16) + `:C `), - e.completedRegularChunks.push(pn(g)), - e.abortableTasks.delete(y), + e.completedRegularChunks.push(Zt(O)), + e.abortableTasks.delete(g), e.cacheController.signal.removeEventListener('abort', a), - un(e), - Or(e); + fn(e), + Vr(e); else try { - (y.model = g.value), - e.pendingChunks++, - Bu(e, y), - un(e), - d.read().then(i, r); - } catch (L) { - r(L); + e.pendingChunks++, + (g.model = O.value), + d ? jt(e, g.id, 'b', g.model, !1) : zu(e, g), + fn(e), + v.read().then(i, r); + } catch (p) { + r(p); } } - function r(g) { - y.status === 0 && + function r(O) { + g.status === 0 && (e.cacheController.signal.removeEventListener('abort', a), - Un(e, y, g), - un(e), - d.cancel(g).then(r, r)); + Xn(e, g, O), + fn(e), + v.cancel(O).then(r, r)); } function a() { - if (y.status === 0) { - var g = e.cacheController.signal; - g.removeEventListener('abort', a), - (g = g.reason), + if (g.status === 0) { + var O = e.cacheController.signal; + O.removeEventListener('abort', a), + (O = O.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); + ? (e.abortableTasks.delete(g), ai(g), li(g, e)) + : (Xn(e, g, O), fn(e)), + v.cancel(O).then(r, r); } } var u = s.supportsBYOB; @@ -1433,8 +1432,9 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { } catch { u = !1; } - var d = s.getReader(), - y = os( + var d = u, + v = s.getReader(), + g = Pn( e, t.model, t.keyPath, @@ -1445,75 +1445,75 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { return ( e.pendingChunks++, (t = - y.id.toString(16) + + g.id.toString(16) + ':' + - (u ? 'r' : 'R') + + (d ? 'r' : 'R') + ` `), - e.completedRegularChunks.push(pn(t)), + e.completedRegularChunks.push(Zt(t)), e.cacheController.signal.addEventListener('abort', a), - d.read().then(i, r), - Ct(y.id) + v.read().then(i, r), + gt(g.id) ); } - function _d(e, t, s, i) { - function r(y) { + function Dd(e, t, s, i) { + function r(v) { if (d.status === 0) - if (y.done) { - if (((d.status = 1), y.value === void 0)) + if (v.done) { + if (((d.status = 1), v.value === void 0)) var g = d.id.toString(16) + `:C `; else try { - var L = bs(e, y.value, 0); + var O = Is(e, v.value, 0); g = d.id.toString(16) + ':C' + - Es(Ct(L)) + + Gn(gt(O)) + ` `; } catch (p) { a(p); return; } - e.completedRegularChunks.push(pn(g)), + e.completedRegularChunks.push(Zt(g)), e.abortableTasks.delete(d), e.cacheController.signal.removeEventListener('abort', u), - un(e), - Or(e); + fn(e), + Vr(e); } else try { - (d.model = y.value), + (d.model = v.value), e.pendingChunks++, - Bu(e, d), - un(e), + zu(e, d), + fn(e), i.next().then(r, a); } catch (p) { a(p); } } - function a(y) { + function a(v) { 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)); + Xn(e, d, v), + fn(e), + typeof i.throw == 'function' && i.throw(v).then(An, An)); } function u() { if (d.status === 0) { - var y = e.cacheController.signal; - y.removeEventListener('abort', u); - var g = y.reason; + var v = e.cacheController.signal; + v.removeEventListener('abort', u); + var g = v.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); + ? (e.abortableTasks.delete(d), ai(d), li(d, e)) + : (Xn(e, d, v.reason), fn(e)), + typeof i.throw == 'function' && i.throw(g).then(An, An); } } s = s === i; - var d = os( + var d = Pn( e, t.model, t.keyPath, @@ -1529,15 +1529,15 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { (s ? 'x' : 'X') + ` `), - e.completedRegularChunks.push(pn(t)), + e.completedRegularChunks.push(Zt(t)), e.cacheController.signal.addEventListener('abort', u), i.next().then(r, a), - Ct(d.id) + gt(d.id) ); } - function Ut(e, t, s) { - (s = Es(s)), - (t = pn( + function Ht(e, t, s) { + (s = Gn(s)), + (t = Zt( ':H' + t + s + @@ -1545,13 +1545,13 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ` )), e.completedHintChunks.push(t), - un(e); + fn(e); } - function bd(e) { + function Md(e) { if (e.status === 'fulfilled') return e.value; throw e.status === 'rejected' ? e.reason : e; } - function Cd(e, t, s) { + function Fd(e, t, s) { switch (s.status) { case 'fulfilled': return s.value; @@ -1571,34 +1571,34 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { } )); } - return {$$typeof: $i, _payload: s, _init: bd}; + return {$$typeof: Hi, _payload: s, _init: Md}; } - 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); + function yu() {} + function Bd(e, t, s, i) { + if (typeof i != 'object' || i === null || i.$$typeof === us) return i; + if (typeof i.then == 'function') return Fd(e, t, i); + var r = Bu(i); return r ? ((e = {}), (e[Symbol.iterator] = function () { return r.call(i); }), e) - : typeof i[Ss] != 'function' || + : typeof i[As] != 'function' || (typeof ReadableStream == 'function' && i instanceof ReadableStream) ? i : ((e = {}), - (e[Ss] = function () { - return i[Ss](); + (e[As] = function () { + return i[As](); }), e); } - function lu(e, t, s, i, r) { + function ku(e, t, s, i, r) { var a = t.thenableState; if ( ((t.thenableState = null), - (ta = 0), - (ni = a), + (oa = 0), + (oi = a), (r = i(r, void 0)), e.status === 12) ) @@ -1606,32 +1606,33 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { (typeof r == 'object' && r !== null && typeof r.then == 'function' && - r.$$typeof !== rs && - r.then(au, au), + r.$$typeof !== us && + r.then(yu, yu), null) ); return ( - (r = wd(e, t, i, r)), + (r = Bd(e, t, i, r)), (i = t.keyPath), (a = t.implicitSlot), s !== null - ? (t.keyPath = i === null ? s : i + ',' + s) + ? (t.keyPath = + s === ri || i === ri ? ri : i === null ? s : i + ',' + s) : i === null && (t.implicitSlot = !0), - (e = qi(e, t, Lr, '', r)), + (e = Gi(e, t, ga, '', r)), (t.keyPath = i), (t.implicitSlot = a), e ); } - function cu(e, t, s) { + function vu(e, t, s) { return t.keyPath !== null - ? ((e = [In, ua, t.keyPath, {children: s}]), t.implicitSlot ? [e] : e) + ? ((e = [En, ka, t.keyPath, {children: s}]), t.implicitSlot ? [e] : e) : s; } - var is = 0; - function uu(e, t) { + var cs = 0; + function xu(e, t) { return ( - (t = os( + (t = Pn( e, t.model, t.keyPath, @@ -1639,241 +1640,264 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { t.formatContext, e.abortableTasks )), - Vi(e, t), - ws(t.id) + qi(e, t), + Es(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) + function ua(e, t, s, i, r, a) { + if (r != null) throw Error(ce(379)); + if (typeof s == 'function' && s.$$typeof !== us && s.$$typeof !== ya) + return ku(e, t, i, s, a); + if (s === ka && i === null) return ( (s = t.implicitSlot), t.keyPath === null && (t.implicitSlot = !0), - (a = qi(e, t, Lr, '', a.children)), + (a = Gi(e, t, ga, '', a.children)), (t.implicitSlot = s), a ); - if (s != null && typeof s == 'object' && s.$$typeof !== rs) + if (s != null && typeof s == 'object' && s.$$typeof !== us) switch (s.$$typeof) { - case $i: + case Hi: 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); + return ua(e, t, s, i, r, a); + case Mu: + return ku(e, t, i, s.render, a); + case Fu: + return ua(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)); + (u = xd(r, s, a)), + r !== u && a.children != null && Is(e, a.children, u)); return ( (e = i), (i = t.keyPath), - e === null ? (e = i) : i !== null && (e = i + ',' + e), - (a = [In, s, e, a]), + e === null + ? (e = i) + : i !== null && (e = i === ri || e === ri ? ri : i + ',' + e), + (a = [En, s, e, a]), (t = t.implicitSlot && e !== null ? [a] : a), t ); } - function Vi(e, t) { + function qi(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); + ? Au(function () { + return fa(e); }) - : Bi(function () { - return ra(e); + : Ki(function () { + return fa(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)); + function Pn(e, t, s, i, r, a) { + return Vd(e, e.nextChunkId++, t, s, i, r, a); + } + function Vd(e, t, s, i, r, a, u) { + e.pendingChunks++, + typeof s != 'object' || + s === null || + i !== null || + r || + e.writtenObjects.set(s, gt(t)); var d = { - id: u, + id: t, status: 0, - model: t, - keyPath: s, - implicitSlot: i, - formatContext: r, + model: s, + keyPath: i, + implicitSlot: r, + formatContext: a, 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; + return qi(e, d); }, thenableState: null, }; - return a.add(d), d; + return u.add(d), d; + } + function pa(e, t, s, i, r) { + var a = r; + r !== null && + typeof r == 'object' && + typeof r.toJSON == 'function' && + (a = r.toJSON(i)), + (cs += i.length), + (r = t.keyPath); + var u = t.implicitSlot; + try { + var d = Gi(e, t, s, i, a); + } catch (g) { + (s = t.model), + (s = + typeof s == 'object' && + s !== null && + (s.$$typeof === En || s.$$typeof === Hi)), + e.status === 12 + ? ((t.status = 3), + e.type === 21 + ? ((r = e.nextChunkId++), (r = s ? Es(r) : gt(r)), (d = r)) + : ((r = e.fatalError), (d = s ? Es(r) : gt(r)))) + : ((i = g === va ? Vu() : g), + typeof i == 'object' && i !== null && typeof i.then == 'function' + ? ((a = Pn( + e, + t.model, + t.keyPath, + t.implicitSlot, + t.formatContext, + e.abortableTasks + )), + (d = a.ping), + i.then(d, d), + (a.thenableState = ju()), + (t.keyPath = r), + (t.implicitSlot = u), + (d = s ? Es(a.id) : gt(a.id))) + : ((t.keyPath = r), + (t.implicitSlot = u), + e.pendingChunks++, + (r = e.nextChunkId++), + (u = zn(e, i, t)), + Br(e, r, u), + (d = s ? Es(r) : gt(r)))); + } + if (((r = d), r === null || typeof r != 'object')) return r; + if (en(r)) { + var v = []; + for (u = 0; u < r.length; u++) v[u] = pa(e, t, r, '' + u, r[u]); + return v; + } + u = {}; + for (v in r) + Wi.call(r, v) && + ((s = pa(e, t, r, v, r[v])), + v === '__proto__' + ? Object.defineProperty(u, v, { + value: s, + enumerable: !0, + writable: !0, + configurable: !0, + }) + : (u[v] = s)); + return u; } - function Ct(e) { + function gt(e) { return '$' + e.toString(16); } - function ws(e) { + function Es(e) { return '$L' + e.toString(16); } - function Lu(e, t, s) { + function qu(e, t, s) { return ( - (e = Es(s)), + (e = Gn(s)), (t = t.toString(16) + ':' + e + ` `), - pn(t) + Zt(t) ); } - function pu(e, t, s, i) { + function gu(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); + if (u !== void 0) return t[0] === En && s === '1' ? Es(u) : gt(u); try { var d = e.bundlerConfig, - y = i.$$id; + v = i.$$id; u = ''; - var g = d[y]; + var g = d[v]; 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.' - ); + var O = v.lastIndexOf('#'); + if ((O !== -1 && ((u = v.slice(O + 1)), (g = d[v.slice(0, O)])), !g)) + throw Error(ce(596, v)); } - 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.' - ); + if (g.async === !0 && i.$$async === !0) throw Error(ce(597, v)); var p = - g.async === !0 || i.$$async === !0 - ? [g.id, g.chunks, u, 1] - : [g.id, g.chunks, u]; + g.async === !0 || i.$$async === !0 + ? [g.id, g.chunks, u, 1] + : [g.id, g.chunks, u], + f = ha(e, p, 0); + if (f !== Un) var T = Gn(f); + else + e: { + (i = Or), (Or = e); + try { + T = Gn(p, $d); + break e; + } finally { + Or = i; + } + T = void 0; + } + var x = T; e.pendingChunks++; - var h = e.nextChunkId++, - T = Es(p), - x = - h.toString(16) + + var w = e.nextChunkId++, + S = + w.toString(16) + ':I' + - T + + x + ` `, - w = pn(x); + A = Zt(S); return ( - e.completedImportChunks.push(w), - a.set(r, h), - t[0] === In && s === '1' ? ws(h) : Ct(h) + e.completedImportChunks.push(A), + a.set(r, w), + t[0] === En && s === '1' ? Es(w) : gt(w) ); - } catch (S) { + } catch (q) { return ( e.pendingChunks++, (t = e.nextChunkId++), - (s = Kn(e, S, null)), - Rr(e, t, s), - Ct(t) + (s = zn(e, q, null)), + Br(e, t, s), + gt(t) ); } } - function bs(e, t, s) { - return (t = os(e, t, null, !1, s, e.abortableTasks)), Fu(e, t), t.id; + function Is(e, t, s) { + return (t = Pn(e, t, null, !1, s, e.abortableTasks)), Gu(e, t), t.id; } - function Yt(e, t, s) { + function Jt(e, t, s) { e.pendingChunks++; var i = e.nextChunkId++; - return Kt(e, i, t, s, !1), Ct(i); + return jt(e, i, t, s, !1), gt(i); } - function Sd(e, t) { - function s(y) { + function jd(e, t) { + function s(v) { 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); + if (v.done) + e.cacheController.signal.removeEventListener('abort', r), qi(e, u); + else return a.push(v.value), d.read().then(s).catch(i); } - function i(y) { + function i(v) { u.status === 0 && (e.cacheController.signal.removeEventListener('abort', r), - Un(e, u, y), - un(e), - d.cancel(y).then(i, i)); + Xn(e, u, v), + fn(e), + d.cancel(v).then(i, i)); } function r() { if (u.status === 0) { - var y = e.cacheController.signal; - y.removeEventListener('abort', r), - (y = y.reason), + var v = e.cacheController.signal; + v.removeEventListener('abort', r), + (v = v.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); + ? (e.abortableTasks.delete(u), ai(u), li(u, e)) + : (Xn(e, u, v), fn(e)), + d.cancel(v).then(i, i); } } var a = [t.type], - u = os(e, a, null, !1, 0, e.abortableTasks), + u = Pn(e, a, null, !1, 0, e.abortableTasks), d = t.stream().getReader(); return ( e.cacheController.signal.addEventListener('abort', r), @@ -1881,52 +1905,78 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { '$B' + u.id.toString(16) ); } - var ss = !1; - function qi(e, t, s, i, r) { - if (((t.model = r), r === In)) return '$'; + function ji(e) { + return e[0] === '$' ? '$' + e : e; + } + function Lr(e, t) { + if (16 > t.length) return ji(t); + var s = e.writtenImportStrings, + i = s.get(t); + if (i !== void 0) return i; + if (((i = e.writtenImportStringsSize + t.length), 32768 < i)) + return ji(t); + (e.writtenImportStringsSize = i), + e.pendingChunks++, + (i = e.nextChunkId++); + var r = Gn(ji(t)); + return ( + e.completedImportChunks.push( + Zt( + i.toString(16) + + ':' + + r + + ` +` + ) + ), + (e = gt(i)), + s.set(t, e), + e + ); + } + var ls = !1; + function Gi(e, t, s, i, r) { + if (((t.model = r), r === En)) return '$'; if (r === null) return null; if (typeof r == 'object') { switch (r.$$typeof) { - case In: + case En: 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; + if (ls === r) ls = 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) + return 3200 < cs + ? xu(e, t) : ((i = r.props), (s = i.ref), - (e = ia(e, t, r.type, r.key, s !== void 0 ? s : null, i)), + (e = ua(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); + case Hi: + if (3200 < cs) return xu(e, t); if ( ((t.thenableState = null), - (i = r._init), - (r = i(r._payload)), + (a = r._init), + (r = a(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); + return Gi(e, t, s, i, r); + case bd: + throw Error(ce(525)); + } + if (r.$$typeof === us) return gu(e, s, i, r); if ( e.temporaryReferences !== void 0 && ((a = e.temporaryReferences.get(r)), a !== void 0) @@ -1937,19 +1987,19 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ) { if (u !== void 0) { if (t.keyPath !== null || t.implicitSlot) - return '$@' + ou(e, t, r).toString(16); - if (ss === r) ss = null; + return '$@' + Tu(e, t, r).toString(16); + if (ls === r) ls = null; else return u; } - return (e = '$@' + ou(e, t, r).toString(16)), a.set(r, e), e; + return (e = '$@' + Tu(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; + if (ls === r) { + if (u !== gt(t.id)) return u; + ls = null; } else return u; else if (i.indexOf(':') === -1 && ((u = a.get(s)), u !== void 0)) { - if (((d = i), kn(s) && s[0] === In)) + if (((d = i), en(s) && s[0] === En)) switch (i) { case '1': d = 'type'; @@ -1965,61 +2015,58 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { } a.set(r, u + ':' + d); } - if (kn(r)) return cu(e, t, r); + if (en(r)) return vu(e, t, r); if (r instanceof Map) - return (r = Array.from(r)), '$Q' + bs(e, r, 0).toString(16); + return (r = Array.from(r)), '$Q' + Is(e, r, 0).toString(16); if (r instanceof Set) - return (r = Array.from(r)), '$W' + bs(e, r, 0).toString(16); + return (r = Array.from(r)), '$W' + Is(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); + return (r = Array.from(r.entries())), '$K' + Is(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))) + if (r instanceof ArrayBuffer) return Jt(e, 'A', new Uint8Array(r)); + if (r instanceof Int8Array) return Jt(e, 'O', r); + if (r instanceof Uint8Array) return Jt(e, 'o', r); + if (r instanceof Uint8ClampedArray) return Jt(e, 'U', r); + if (r instanceof Int16Array) return Jt(e, 'S', r); + if (r instanceof Uint16Array) return Jt(e, 's', r); + if (r instanceof Int32Array) return Jt(e, 'L', r); + if (r instanceof Uint32Array) return Jt(e, 'l', r); + if (r instanceof Float32Array) return Jt(e, 'G', r); + if (r instanceof Float64Array) return Jt(e, 'g', r); + if (r instanceof BigInt64Array) return Jt(e, 'M', r); + if (r instanceof BigUint64Array) return Jt(e, 'm', r); + if (r instanceof DataView) return Jt(e, 'V', r); + if (typeof Blob == 'function' && r instanceof Blob) return jd(e, r); + if ((a = Bu(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)) + ? ((r = Array.from(i)), '$i' + Is(e, r, 0).toString(16)) + : vu(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 Od(e, t, r); + if (((a = r[As]), typeof a == 'function')) return ( t.keyPath !== null - ? ((e = [In, ua, t.keyPath, {children: r}]), + ? ((e = [En, ka, t.keyPath, {children: r}]), (e = t.implicitSlot ? [e] : e)) - : ((i = a.call(r)), (e = _d(e, t, r, i))), + : ((i = a.call(r)), (e = Dd(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) - ); + if (((e = Ns(r)), e !== ca && (e === null || Ns(e) !== null))) + throw Error(ce(498, Ss(s, i))); return r; } if (typeof r == 'string') return ( - (is += r.length), + (cs += 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) + : 1024 <= r.length && Ta !== null + ? (e.pendingChunks++, (t = e.nextChunkId++), Hu(e, t, r, !1), gt(t)) + : ji(r) ); if (typeof r == 'boolean') return r; if (typeof r == 'number') @@ -2034,8 +2081,8 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { : '$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) + if (r.$$typeof === us) return gu(e, s, i, r); + if (r.$$typeof === Dr) return ( (t = e.writtenServerReferences), (i = t.get(r)), @@ -2043,7 +2090,7 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ? (e = '$h' + i.toString(16)) : ((i = r.$$bound), (i = i === null ? null : Promise.resolve(i)), - (e = bs(e, {id: r.$$id, bound: i}, 0)), + (e = Is(e, {id: r.$$id, bound: i}, 0)), t.set(r, e), (e = '$h' + e.toString(16))), e @@ -2053,56 +2100,37 @@ globalThis.__webpack_get_script_filename__ = function (chunkId) { ((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.' - ) + throw r.$$typeof === ya + ? Error(ce(526)) : /^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) - ); + ? Error(ce(374, Ss(s, i))) + : Error(ce(375, Ss(s, i))); } if (typeof r == 'symbol') { if (((t = e.writtenSymbols), (a = t.get(r)), a !== void 0)) - return Ct(a); + return gt(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) - ); + throw Error(ce(376, r.description, Ss(s, i))); return ( e.pendingChunks++, (i = e.nextChunkId++), - (s = Lu(e, i, '$S' + a)), + (s = qu(e, i, '$S' + a)), e.completedImportChunks.push(s), t.set(r, i), - Ct(i) + gt(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) - ); + throw Error(ce(378, typeof r, Ss(s, i))); } - function Kn(e, t) { - var s = st; - st = null; + function zn(e, t) { + var s = it; + it = null; try { var i = e.onError, r = i(t); } finally { - st = s; + it = s; } if (r != null && typeof r != 'string') throw Error( @@ -2112,270 +2140,332 @@ If you need interactivity, consider converting part of this to a Client Componen ); return r || ''; } - function Ki(e, t) { + function zi(e, t) { var s = e.onFatalError; s(t), e.destination !== null - ? ((e.status = 14), xu(e.destination, t)) + ? ((e.status = 14), Nu(e.destination, t)) : ((e.status = 13), (e.fatalError = t)), - e.cacheController.abort( - Error('The render was aborted due to a fatal error.', {cause: t}) - ); + (t = Error(ce(562), {cause: t})), + e.cacheController.abort(t); } - function Rr(e, t, s) { + function Br(e, t, s) { (s = {digest: s}), (t = t.toString(16) + ':E' + - Es(s) + + Gn(s) + ` `), - (t = pn(t)), + (t = Zt(t)), e.completedErrorChunks.push(t); } - function Ou(e, t, s) { + var Or = null; + function $d(e, t) { + return typeof t == 'string' + ? ((e = Or), e === null ? ji(t) : Lr(e, t)) + : t; + } + var Un = {}; + function ha(e, t, s) { + switch (typeof t) { + case 'string': + return Lr(e, t); + case 'number': + case 'boolean': + case 'undefined': + return t; + case 'object': + if (t === null) return null; + if (16 < s || typeof t.toJSON == 'function') return Un; + if (en(t)) { + for (var i = t.length, r = Array(i), a = 0; a < i; a++) { + var u = t[a]; + if (typeof u == 'string') r[a] = Lr(e, u); + else { + if (((u = ha(e, u, s + 1)), u === Un)) return Un; + r[a] = u; + } + } + return r; + } + if (((i = Ns(t)), i !== ca && i !== null)) return Un; + for (i = Object.keys(t), r = {}, a = 0; a < i.length; a++) { + if (((u = i[a]), u in ca)) return Un; + var d = t[u]; + if (typeof d == 'string') r[u] = Lr(e, d); + else { + if (((d = ha(e, d, s + 1)), d === Un)) return Un; + r[u] = d; + } + } + return r; + default: + return Un; + } + } + function Uu(e, t, s) { (t = t.toString(16) + ':' + s + ` `), - (t = pn(t)), + (t = Zt(t)), e.completedRegularChunks.push(t); } - function Kt(e, t, s, i, r) { + function jt(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); + (t = Zt(t)), + e.completedRegularChunks.push(xa, t, i); } - function Du(e, t, s, i) { - if (la === null) + function Hu(e, t, s, i) { + if (Ta === 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)), + (s = Zt(s)), (i = s.byteLength), (t = t.toString(16) + ':T' + i.toString(16) + ','), - (t = pn(t)), - e.completedRegularChunks.push(t, s); + (t = Zt(t)), + e.completedRegularChunks.push(xa, t, s); } - function Mu(e, t, s) { + function Wu(e, t, s) { var i = t.id; - typeof s == 'string' && la !== null - ? Du(e, i, s, !1) + typeof s == 'string' && Ta !== null + ? Hu(e, i, s, !1) : s instanceof ArrayBuffer - ? Kt(e, i, 'A', new Uint8Array(s), !1) + ? jt(e, i, 'A', new Uint8Array(s), !1) : s instanceof Int8Array - ? Kt(e, i, 'O', s, !1) + ? jt(e, i, 'O', s, !1) : s instanceof Uint8Array - ? Kt(e, i, 'o', s, !1) + ? jt(e, i, 'o', s, !1) : s instanceof Uint8ClampedArray - ? Kt(e, i, 'U', s, !1) + ? jt(e, i, 'U', s, !1) : s instanceof Int16Array - ? Kt(e, i, 'S', s, !1) + ? jt(e, i, 'S', s, !1) : s instanceof Uint16Array - ? Kt(e, i, 's', s, !1) + ? jt(e, i, 's', s, !1) : s instanceof Int32Array - ? Kt(e, i, 'L', s, !1) + ? jt(e, i, 'L', s, !1) : s instanceof Uint32Array - ? Kt(e, i, 'l', s, !1) + ? jt(e, i, 'l', s, !1) : s instanceof Float32Array - ? Kt(e, i, 'G', s, !1) + ? jt(e, i, 'G', s, !1) : s instanceof Float64Array - ? Kt(e, i, 'g', s, !1) + ? jt(e, i, 'g', s, !1) : s instanceof BigInt64Array - ? Kt(e, i, 'M', s, !1) + ? jt(e, i, 'M', s, !1) : s instanceof BigUint64Array - ? Kt(e, i, 'm', s, !1) + ? jt(e, i, 'm', s, !1) : s instanceof DataView - ? Kt(e, i, 'V', s, !1) - : ((s = Es(s, t.toJSON)), Ou(e, t.id, s)); + ? jt(e, i, 'V', s, !1) + : ((s = pa(e, t, {'': s}, '', s)), (s = Gn(s)), Uu(e, t.id, s)); } - function Un(e, t, s) { + function Xn(e, t, s) { (t.status = 4), - (s = Kn(e, s, t)), - Rr(e, t.id, s), + (s = zn(e, s, t)), + Br(e, t.id, s), e.abortableTasks.delete(t), - Or(e); + Vr(e); } - var Lr = {}; - function Fu(e, t) { + var ga = {}; + function Gu(e, t) { if (t.status === 0) { t.status = 5; - var s = is; + var s = cs; try { - ss = t.model; - var i = qi(e, t, Lr, '', t.model); + ls = t.model; + var i = Gi(e, t, ga, '', t.model); if ( - ((ss = i), + ((ls = i), (t.keyPath = null), (t.implicitSlot = !1), typeof i == 'object' && i !== null) ) - e.writtenObjects.set(i, Ct(t.id)), Mu(e, t, i); + e.writtenObjects.set(i, gt(t.id)), Wu(e, t, i); else { - var r = Es(i); - Ou(e, t.id, r); + var r = Gn(i); + Uu(e, t.id, r); } - (t.status = 1), e.abortableTasks.delete(t), Or(e); - } catch (y) { + (t.status = 1), e.abortableTasks.delete(t), Vr(e); + } catch (v) { if (e.status === 12) if ((e.abortableTasks.delete(t), (t.status = 0), e.type === 21)) - ri(t), oi(t, e); + ai(t), li(t, e); else { var a = e.fatalError; - ha(t), fa(t, e, a); + _a(t), ba(t, e, a); } else { - var u = y === pa ? Eu() : y; + var u = v === va ? Vu() : v; if ( typeof u == 'object' && u !== null && typeof u.then == 'function' ) { - (t.status = 0), (t.thenableState = Au()); + (t.status = 0), (t.thenableState = ju()); var d = t.ping; u.then(d, d); - } else Un(e, t, u); + } else Xn(e, t, u); } } finally { - is = s; + cs = s; } } } - function Bu(e, t) { - var s = is; + function zu(e, t) { + var s = cs; try { - Mu(e, t, t.model); + Wu(e, t, t.model); } finally { - is = s; + cs = s; } } - function ra(e) { - var t = Is.H; - Is.H = Pu; - var s = st; - Mi = st = e; + function fa(e) { + var t = Ps.H; + Ps.H = Ad; + var s = it; + Vi = it = e; try { var i = e.pingedTasks; e.pingedTasks = []; - for (var r = 0; r < i.length; r++) Fu(e, i[r]); - ai(e); + for (var r = 0; r < i.length; r++) Gu(e, i[r]); + ci(e); } catch (a) { - Kn(e, a, null), Ki(e, a); + zn(e, a, null), zi(e, a); } finally { - (Is.H = t), (Mi = null), (st = s); + (Ps.H = t), (Vi = null), (it = s); } } - function ha(e) { + function _a(e) { e.status === 0 && (e.status = 3); } - function fa(e, t, s) { + function ba(e, t, s) { e.status === 3 && - ((s = Ct(s)), (e = Lu(t, e.id, s)), t.completedErrorChunks.push(e)); + ((s = gt(s)), (e = qu(t, e.id, s)), t.completedErrorChunks.push(e)); } - function ri(e) { + function ai(e) { e.status === 0 && (e.status = 3); } - function oi(e, t) { + function li(e, t) { e.status === 3 && t.pendingChunks--; } - function ai(e) { + function ci(e) { var t = e.destination; if (t !== null) { - (ln = new Uint8Array(2048)), (cn = 0); + (pn = new Uint8Array(2048)), (hn = 0); try { for (var s = e.completedImportChunks, i = 0; i < s.length; i++) - e.pendingChunks--, Cr(t, s[i]); + e.pendingChunks--, Fi(t, s[i]); s.splice(0, i); var r = e.completedHintChunks; - for (i = 0; i < r.length; i++) Cr(t, r[i]); + for (i = 0; i < r.length; i++) Fi(t, r[i]); r.splice(0, i); var a = e.completedRegularChunks; - for (i = 0; i < a.length; i++) e.pendingChunks--, Cr(t, a[i]); + for (i = 0; i < a.length; i++) { + var u = a[i]; + if (((s = void 0), u === xa)) { + if (i + 2 >= a.length) throw Error(ce(601)); + (e.pendingChunks -= 2), + Pu(t, a[i + 1]), + (s = Fi(t, a[i + 2])), + (i += 2); + } else e.pendingChunks--, (s = Fi(t, u)); + if (!s) { + (e.destination = null), i++; + break; + } + } 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); + var d = e.completedErrorChunks; + for (i = 0; i < d.length; i++) e.pendingChunks--, Fi(t, d[i]); + d.splice(0, i); } finally { (e.flushScheduled = !1), - ln && - 0 < cn && - (t.enqueue(new Uint8Array(ln.buffer, 0, cn)), - (ln = null), - (cn = 0)); + pn && + 0 < hn && + (t.enqueue(new Uint8Array(pn.buffer, 0, hn)), + (pn = null), + (hn = 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.' - ) - ), + (12 > e.status && ((t = Error(ce(563))), e.cacheController.abort(t)), e.destination !== null && ((e.status = 14), e.destination.close(), (e.destination = null))); } - function Vu(e) { + function Xu(e) { (e.flushScheduled = e.destination !== null), - vu(function () { - return ra(e); + Au(function () { + return fa(e); }), - Bi(function () { + Ki(function () { e.status === 10 && (e.status = 11); }); } - function un(e) { + function fn(e) { e.flushScheduled === !1 && e.pingedTasks.length === 0 && e.destination !== null && ((e.flushScheduled = !0), - Bi(function () { - (e.flushScheduled = !1), ai(e); + Ki(function () { + (e.flushScheduled = !1), ci(e); })); } - function Or(e) { + function Vr(e) { e.abortableTasks.size === 0 && ((e = e.onAllReady), e()); } - function ju(e, t) { - if (e.status === 13) (e.status = 14), xu(t, e.fatalError); + function Yu(e, t) { + if (e.status === 13) (e.status = 14), Nu(t, e.fatalError); else if (e.status !== 14 && e.destination === null) { e.destination = t; try { - ai(e); + ci(e); } catch (s) { - Kn(e, s, null), Ki(e, s); + zn(e, s, null), zi(e, s); } } } - function Id(e, t) { + function Kd(e, t) { try { t.forEach(function (i) { - return oi(i, e); + return li(i, e); }); var s = e.onAllReady; - s(), ai(e); + s(), ci(e); } catch (i) { - Kn(e, i, null), Ki(e, i); + zn(e, i, null), zi(e, i); } } - function Ed(e, t, s) { + function qd(e, t, s) { try { t.forEach(function (r) { - return fa(r, e, s); + return ba(r, e, s); }); var i = e.onAllReady; - i(), ai(e); + i(), ci(e); } catch (r) { - Kn(e, r, null), Ki(e, r); + zn(e, r, null), zi(e, r); } } - function si(e, t) { + function Ju(e, t) { + t.aborted + ? Mr(e, t.reason) + : t.addEventListener( + 'abort', + function () { + Mr(e, t.reason); + }, + {signal: e.cacheController.signal} + ); + } + function Mr(e, t) { if (!(11 < e.status)) try { (e.status = 12), e.cacheController.abort(t); @@ -2383,61 +2473,53 @@ If you need interactivity, consider converting part of this to a Client Componen if (0 < s.size) if (e.type === 21) s.forEach(function (d) { - return ri(d, e); + return ai(d, e); }), - Bi(function () { - return Id(e, s); + Ki(function () { + return Kd(e, s); }); else { var i = t === void 0 - ? Error( - 'The render was aborted by the server without a reason.' - ) + ? Error(ce(432)) : typeof t == 'object' && t !== null && typeof t.then == 'function' - ? Error( - 'The render was aborted by the server with a promise.' - ) + ? Error(ce(530)) : t, - r = Kn(e, i, null), + r = zn(e, i, null), a = e.nextChunkId++; (e.fatalError = a), e.pendingChunks++, - Rr(e, a, r, i, !1, null), + Br(e, a, r, i, !1, null), s.forEach(function (d) { - return ha(d, e, a); + return _a(d, e, a); }), - Bi(function () { - return Ed(e, s, a); + Ki(function () { + return qd(e, s, a); }); } else { var u = e.onAllReady; - u(), ai(e); + u(), ci(e); } } catch (d) { - Kn(e, d, null), Ki(e, d); + zn(e, d, null), zi(e, d); } } - function $u(e, t) { + function Qu(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.' - ); + throw Error(ce(589, t)); } return i.async ? [i.id, i.chunks, s, 1] : [i.id, i.chunks, s]; } - var wr = new Map(); - function hu(e) { + var Ar = new Map(); + function _u(e) { var t = __webpack_require__(e); return typeof t.then != 'function' || t.status === 'fulfilled' ? null @@ -2451,108 +2533,120 @@ If you need interactivity, consider converting part of this to a Client Componen ), t); } - function Ad() {} - function qu(e) { + function Ud() {} + function Zu(e) { for (var t = e[1], s = [], i = 0; i < t.length; ) { var r = t[i++], a = t[i++], - u = wr.get(r); + u = Ar.get(r); u === void 0 - ? (Ku.set(r, a), + ? (e1.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 = Ar.set.bind(Ar, r, null)), + a.then(u, Ud), + Ar.set(r, a)) : u !== null && s.push(u); } return e.length === 4 ? s.length === 0 - ? hu(e[0]) + ? _u(e[0]) : Promise.all(s).then(function () { - return hu(e[0]); + return _u(e[0]); }) : 0 < s.length ? Promise.all(s) : null; } - function Fi(e) { + function $i(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]]; + if (Wi.call(t, e[2])) return t[e[2]]; } - var Ku = new Map(), - Pd = __webpack_require__.u; + var e1 = new Map(), + Hd = __webpack_require__.u; __webpack_require__.u = function (e) { - var t = Ku.get(e); - return t !== void 0 ? t : Pd(e); + var t = e1.get(e); + return t !== void 0 ? t : Hd(e); }; - var Dr = Symbol(); - function Ot(e, t, s) { + var jr = Symbol(); + function $t(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; + $t.prototype = Object.create(Promise.prototype); + Object.defineProperty($t.prototype, 'then', { + writable: !0, + enumerable: !0, + configurable: !0, + value: function (e, t) { + switch (this.status) { + case 'resolved_model': + qr(this); + } + switch (this.status) { + case 'fulfilled': + if (typeof e == 'function') { + for ( + var s = this.value, i = 0, r = new Set(); + s instanceof $t; + + ) { + if ((i++, s === this || r.has(s) || 1e3 < i)) { + typeof t == 'function' && t(Error(ce(569))); + return; + } + if ((r.add(s), s.status === 'fulfilled')) s = s.value; + else break; } - if ((r.add(s), s.status === 'fulfilled')) s = s.value; - else break; + e(this.value); } - 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) { + 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 t1 = Object.prototype, + n1 = Array.prototype; + function $r(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); + typeof a == 'function' ? a(s) : a1(e, a, s, i.reason); } } - function da(e, t, s) { + function Ca(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); + typeof r == 'function' ? r(s) : Fr(e, r.handler, s); } } - function Fr(e, t, s) { + function Kr(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); + (t.status = 'rejected'), (t.reason = s), i !== null && Ca(e, i, s); } } - function Wu(e, t, s) { + function s1(e, t, s) { var i = {}; - return new Ot('resolved_model', t, ((i.id = s), (i[Dr] = e), i)); + return new $t('resolved_model', t, ((i.id = s), (i[jr] = e), i)); + } + function i1(e, t) { + return new $t('rejected', null, t); } - function Gu(e, t, s, i) { + function r1(e, t, s, i) { if (t.status !== 'pending') (t = t.reason), s[0] === 'C' @@ -2565,12 +2659,12 @@ If you need interactivity, consider converting part of this to a Client Componen ((t.status = 'resolved_model'), (t.value = s), (s = {}), - (t.reason = ((s.id = i), (s[Dr] = e), s)), + (t.reason = ((s.id = i), (s[jr] = e), s)), r !== null) ) - switch ((Br(t), t.status)) { + switch ((qr(t), t.status)) { case 'fulfilled': - Mr(e, r, t.value, t); + $r(e, r, t.value, t); break; case 'blocked': case 'pending': @@ -2581,35 +2675,35 @@ If you need interactivity, consider converting part of this to a Client Componen } else t.reason = a; break; case 'rejected': - a && da(e, a, t.reason); + a && Ca(e, a, t.reason); } } } - function fu(e, t, s) { + function bu(e, t, s) { var i = {}; - return new Ot( + return new $t( 'resolved_model', (s ? '{"done":true,"value":' : '{"done":false,"value":') + t + '}', - ((i.id = -1), (i[Dr] = e), i) + ((i.id = -1), (i[jr] = e), i) ); } - function ea(e, t, s, i) { - Gu( + function ra(e, t, s, i) { + r1( e, t, (i ? '{"done":true,"value":' : '{"done":false,"value":') + s + '}', -1 ); } - function Nd(e, t, s, i) { - function r(L) { + function Wd(e, t, s, i) { + function r(O) { 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); + f = d; + (f.status = 'rejected'), + (f.value = null), + (f.reason = O), + p !== null && Ca(e, p, O), + Fr(e, g, O); } var a = t.id; if (typeof a != 'string' || i === 'then') return null; @@ -2617,9 +2711,9 @@ If you need interactivity, consider converting part of this to a Client Componen if (u !== void 0) return u.status === 'fulfilled' ? ((u = u.value), i === '__proto__' ? null : (s[i] = u)) - : (Ye - ? ((a = Ye), a.deps++) - : (a = Ye = + : (Je + ? ((a = Je), a.deps++) + : (a = Je = { chunk: null, value: null, @@ -2627,67 +2721,69 @@ If you need interactivity, consider converting part of this to a Client Componen deps: 1, errored: !1, }), - u.then(aa.bind(null, e, a, s, i), Pr.bind(null, e, a)), + u.then(ma.bind(null, e, a, s, i), Fr.bind(null, e, a)), null); - var d = new Ot('blocked', null, null); + var d = new $t('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; + var v = Qu(e._bundlerConfig, a); + if (((u = t.bound), (a = Zu(v)))) + u instanceof $t && (a = Promise.all([a, u])); + else if (u instanceof $t) a = Promise.resolve(u); + else + return ( + (u = $i(v)), + (a = d), + (a.status = 'fulfilled'), + (a.value = u), + (a.reason = null), + u + ); + if (Je) { + var g = Je; g.deps++; } else - g = Ye = {chunk: null, value: null, reason: null, deps: 1, errored: !1}; + g = Je = {chunk: null, value: null, reason: null, deps: 1, errored: !1}; return ( a.then(function () { - var L = Fi(y); + var O = $i(v); 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.' - ) - ); + if (((p = en(p) ? p.slice(0) : []), 1e3 < p.length)) { + r(Error(ce(580, p.length, 1e3))); return; } - p.unshift(null), (L = L.bind.apply(L, p)); + p.unshift(null), (O = O.bind.apply(O, 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); + var f = d; + (f.status = 'fulfilled'), + (f.value = O), + (f.reason = null), + p !== null && $r(e, p, O, f), + ma(e, g, s, i, O); }, r), null ); } - function oa(e, t, s, i, r, a) { - if (typeof i == 'string') return Fd(e, t, s, i, r, a); + function da(e, t, s, i, r, a) { + if (typeof i == 'string') return Jd(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)) + en(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; + 1 < i.length && (u.fork = !0), Hn(u, i.length + 1, e), t = 0; t < i.length; t++ ) - i[t] = oa( + i[t] = da( e, i, '' + t, @@ -2697,46 +2793,43 @@ If you need interactivity, consider converting part of this to a Client Componen ); } else for (u in i) - Nr.call(i, u) && + Wi.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 = da(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.' - ); + function Hn(e, t, s) { + if ((e.count += t) > s._arraySizeLimit && e.fork) throw Error(ce(571)); } - var Ye = null; - function Br(e) { - var t = Ye; - Ye = null; + var Je = null; + function qr(e) { + var t = Je; + Je = null; var s = e.reason, - i = s[Dr]; + i = s[jr]; (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), + var u = da(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); + var v = d[a]; + typeof v == 'function' ? v(u) : a1(i, v, u, r); } - if (Ye !== null) { - if (Ye.errored) throw Ye.reason; - if (0 < Ye.deps) { - (Ye.value = u), (Ye.reason = r), (Ye.chunk = e); + if (Je !== null) { + if (Je.errored) throw Je.reason; + if (0 < Je.deps) { + (Je.value = u), (Je.reason = r), (Je.chunk = e); return; } } @@ -2744,53 +2837,53 @@ If you need interactivity, consider converting part of this to a Client Componen } catch (g) { (e.status = 'rejected'), (e.reason = g); } finally { - Ye = t; + Je = t; } } - function Rd(e, t) { + function o1(e, t) { (e._closed = !0), (e._closedReason = t), e._chunks.forEach(function (s) { s.status === 'pending' - ? Fr(e, s, t) + ? Kr(e, s, t) : s.status === 'fulfilled' && s.reason !== null && ((s = s.reason), typeof s.error == 'function' && s.error(t)); }); } - function Vr(e, t) { + function Ur(e, t) { var s = e._chunks, i = s.get(t); return ( i || - ((i = e._formData.get(e._prefix + t)), + ((i = e._formData.data.get(e._prefix + t)), (i = typeof i == 'string' - ? Wu(e, i, t) + ? s1(e, i, t) : e._closed - ? new Ot('rejected', null, e._closedReason) - : new Ot('pending', null, null)), + ? i1(e, e._closedReason) + : new $t('pending', null, null)), s.set(t, i)), i ); } - function zu(e, t, s, i) { + function a1(e, t, s, i) { var r = t.handler, a = t.parentObject, u = t.key, d = t.map, - y = t.path; + v = t.path; try { - for (var g = 0, L = e._rootArrayContexts, p = 1; p < y.length; p++) { - var h = y[p]; + for (var g = 0, O = e._rootArrayContexts, p = 1; p < v.length; p++) { + var f = v[p]; if ( typeof s != 'object' || s === null || - (ii(s) !== Uu && ii(s) !== Hu) || - !Nr.call(s, h) + (Ns(s) !== t1 && Ns(s) !== n1) || + !Wi.call(s, f) ) - throw Error('Invalid reference.'); - if (((s = s[h]), kn(s))) (g = 0), (i = L.get(s) || i); + throw Error(ce(570)); + if (((s = s[f]), en(s))) (g = 0), (i = O.get(s) || i); else if (((i = null), typeof s == 'string')) g = s.length; else if (typeof s == 'bigint') { var T = Math.abs(Number(s)); @@ -2801,15 +2894,15 @@ If you need interactivity, consider converting part of this to a Client Componen w = t.arrayRoot; w !== null && (i !== null - ? (i.fork && (w.fork = !0), $n(w, i.count, e)) - : 0 < g && $n(w, g, e)); + ? (i.fork && (w.fork = !0), Hn(w, i.count, e)) + : 0 < g && Hn(w, g, e)); } catch (S) { - Pr(e, r, S); + Fr(e, r, S); return; } - aa(e, r, a, u, x); + ma(e, r, a, u, x); } - function aa(e, t, s, i, r) { + function ma(e, t, s, i, r) { i !== '__proto__' && (s[i] = r), i === '' && t.value === null && (t.value = r), t.deps--, @@ -2821,60 +2914,61 @@ If you need interactivity, consider converting part of this to a Client Componen (s.status = 'fulfilled'), (s.value = t.value), (s.reason = t.reason), - i !== null && Mr(e, i, t.value, s))); + i !== null && $r(e, i, t.value, s))); } - function Pr(e, t, s) { + function Fr(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)); + t !== null && t.status === 'blocked' && Kr(e, t, s)); } - function Di(e, t, s, i, r, a) { + function Bi(e, t, s, i, r, a) { t = t.split(':'); var u = parseInt(t[0], 16), - d = Vr(e, u); + d = Ur(e, u); switch (d.status) { case 'resolved_model': - Br(d); + qr(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 (((u = d.value), (d = d.reason), d !== null && 'error' in d)) + throw Error(ce(599)); + for (var v = 0, g = e._rootArrayContexts, O = 1; O < t.length; O++) { if ( - ((y = t[L]), + ((v = t[O]), typeof u != 'object' || u === null || - (ii(u) !== Uu && ii(u) !== Hu) || - !Nr.call(u, y)) + (Ns(u) !== t1 && Ns(u) !== n1) || + !Wi.call(u, v)) ) - throw Error('Invalid reference.'); - (u = u[y]), - kn(u) - ? ((y = 0), (d = g.get(u) || d)) + throw Error(ce(570)); + (u = u[v]), + en(u) + ? ((v = 0), (d = g.get(u) || d)) : ((d = null), typeof u == 'string' - ? (y = u.length) + ? (v = 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)); + ? ((v = Math.abs(Number(u))), + (v = v === 0 ? 1 : Math.floor(Math.log10(v)) + 1)) + : (v = 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)), + ? (d.fork && (r.fork = !0), Hn(r, d.count, e)) + : 0 < v && Hn(r, v, e)), s ); case 'blocked': return ( - Ye - ? ((e = Ye), e.deps++) - : (e = Ye = + Je + ? ((e = Je), e.deps++) + : (e = Je = { chunk: null, value: null, @@ -2895,12 +2989,12 @@ If you need interactivity, consider converting part of this to a Client Componen null ); case 'pending': - throw Error('Invalid forward reference.'); + throw Error(ce(574)); default: return ( - Ye - ? ((Ye.errored = !0), (Ye.value = null), (Ye.reason = d.reason)) - : (Ye = { + Je + ? ((Je.errored = !0), (Je.value = null), (Je.reason = d.reason)) + : (Je = { chunk: null, value: null, reason: d.reason, @@ -2911,79 +3005,75 @@ If you need interactivity, consider converting part of this to a Client Componen ); } } - 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 Gd(e, t) { + if (!en(t)) throw Error(ce(575)); + if (t.$$consumed === !0) throw Error(ce(572)); + return (t.$$consumed = !0), new Map(t); } - 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 zd(e, t) { + if (!en(t)) throw Error(ce(576)); + if (t.$$consumed === !0) throw Error(ce(573)); + return (t.$$consumed = !0), new Set(t); } - 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 Xd(e, t) { + if (!en(t)) throw Error(ce(577)); + if (t.$$consumed === !0) throw Error(ce(578)); + return (t.$$consumed = !0), t[Symbol.iterator](); } - function Md(e, t, s, i) { + function Yd(e, t, s, i) { return i === 'then' && typeof t == 'function' ? null : t; } - function Jt(e, t, s, i, r, a, u) { - function d(L) { + function Qt(e, t, s, i, r, a, u) { + function d(O) { if (!g.errored) { - (g.errored = !0), (g.value = null), (g.reason = L); + (g.errored = !0), (g.value = null), (g.reason = O); var p = g.chunk; - p !== null && p.status === 'blocked' && Fr(e, p, L); + p !== null && p.status === 'blocked' && Kr(e, p, O); } } t = parseInt(t.slice(2), 16); - var y = e._prefix + t; - if (((i = e._chunks), i.has(t))) - throw Error('Already initialized typed array.'); + var v = e._prefix + t; + if (((i = e._chunks), i.has(t))) throw Error(ce(568)); if ( - (i.set( - t, - new Ot('rejected', null, Error('Already initialized typed array.')) - ), - (t = e._formData.get(y).arrayBuffer()), - Ye) + (i.set(t, i1(e, Error(ce(568)))), + (t = e._formData.data.get(v).arrayBuffer()), + Je) ) { - var g = Ye; + var g = Je; g.deps++; } else - g = Ye = {chunk: null, value: null, reason: null, deps: 1, errored: !1}; + g = Je = {chunk: null, value: null, reason: null, deps: 1, errored: !1}; return ( - t.then(function (L) { + t.then(function (O) { try { - u !== null && $n(u, L.byteLength, e); - var p = s === ArrayBuffer ? L : new s(L); - y !== '__proto__' && (r[a] = p), + u !== null && Hn(u, O.byteLength, e); + var p = s === ArrayBuffer ? O : new s(O); + v !== '__proto__' && (r[a] = p), a === '' && g.value === null && (g.value = p); - } catch (h) { - d(h); + } catch (f) { + d(f); 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))); + ((O = g.chunk), + O !== null && + O.status === 'blocked' && + ((p = O.value), + (O.status = 'fulfilled'), + (O.value = g.value), + (O.reason = null), + p !== null && $r(e, p, g.value, O))); }, d), null ); } - function Xu(e, t, s, i) { + function l1(e, t, s, i) { var r = e._chunks; for ( - s = new Ot('fulfilled', s, i), + s = new $t('fulfilled', s, i), r.set(t, s), - e = e._formData.getAll(e._prefix + t), + e = e._formData.data.getAll(e._prefix + t), t = 0; t < e.length; t++ @@ -2994,14 +3084,14 @@ If you need interactivity, consider converting part of this to a Client Componen ? i.close(r === 'C' ? '"$undefined"' : r.slice(1)) : i.enqueueModel(r)); } - function du(e, t, s) { + function Cu(e, t, s) { function i(g) { s !== 'bytes' || ArrayBuffer.isView(g) ? r.enqueue(g) - : y.error(Error('Invalid data for bytes stream.')); + : v.error(Error(ce(579))); } if (((t = parseInt(t.slice(2), 16)), e._chunks.has(t))) - throw Error('Already initialized stream.'); + throw Error(ce(567)); var r = null, a = !1, u = new ReadableStream({ @@ -3011,21 +3101,21 @@ If you need interactivity, consider converting part of this to a Client Componen }, }), d = null, - y = { + v = { 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)); + var O = s1(e, g, -1); + qr(O), + O.status === 'fulfilled' + ? i(O.value) + : (O.then(i, v.error), (d = O)); } else { - L = d; - var p = new Ot('pending', null, null); - p.then(i, y.error), + O = d; + var p = new $t('pending', null, null); + p.then(i, v.error), (d = p), - L.then(function () { - d === p && (d = null), Gu(e, p, g, -1); + O.then(function () { + d === p && (d = null), r1(e, p, g, -1); }); } }, @@ -3044,120 +3134,119 @@ If you need interactivity, consider converting part of this to a Client Componen if (!a) if (((a = !0), d === null)) r.error(g); else { - var L = d; + var O = d; (d = null), - L.then(function () { + O.then(function () { return r.error(g); }); } }, }; - return Xu(e, t, u, y), u; + return l1(e, t, u, v), u; } - function ma(e) { + function wa(e) { this.next = e; } - ma.prototype = {}; - ma.prototype[Ss] = function () { + wa.prototype = {}; + wa.prototype[As] = function () { return this; }; - function mu(e, t, s) { + function wu(e, t, s) { if (((t = parseInt(t.slice(2), 16)), e._chunks.has(t))) - throw Error('Already initialized stream.'); + throw Error(ce(567)); var i = [], r = !1, a = 0, u = {}; return ( (u = - ((u[Ss] = function () { + ((u[As] = 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.' - ); + return new wa(function (v) { + if (v !== void 0) throw Error(ce(524)); if (d === i.length) { if (r) - return new Ot('fulfilled', {done: !0, value: void 0}, null); - i[d] = new Ot('pending', null, null); + return new $t('fulfilled', {done: !0, value: void 0}, null); + i[d] = new $t('pending', null, null); } return i[d++]; }); }), u)), - (s = s ? u[Ss]() : u), - Xu(e, t, s, { + (s = s ? u[As]() : u), + l1(e, t, s, { enqueueModel: function (d) { - a === i.length ? (i[a] = fu(e, d, !1)) : ea(e, i[a], d, !1), a++; + a === i.length ? (i[a] = bu(e, d, !1)) : ra(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 === i.length ? (i[a] = bu(e, d, !0)) : ra(e, i[a], d, !0), a++; a < i.length; ) - ea(e, i[a++], '"$undefined"', !0); + ra(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 && (i[a] = new $t('pending', null, null)); a < i.length; ) - Fr(e, i[a++], d); + Kr(e, i[a++], d); }, }), s ); } - function Fd(e, t, s, i, r, a) { + function Jd(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); + return a !== null && Hn(a, i.length - 1, e), i.slice(1); case '@': - return (t = parseInt(i.slice(2), 16)), Vr(e, t); + return (t = parseInt(i.slice(2), 16)), Ur(e, t); case 'h': - return (a = i.slice(2)), Di(e, a, t, s, null, Nd); + return (a = i.slice(2)), Bi(e, a, t, s, null, Wd); 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); + throw Error(ce(526)); + return _d(e._temporaryReferences, r); case 'Q': - return (a = i.slice(2)), Di(e, a, t, s, null, Ld); + return (a = i.slice(2)), Bi(e, a, t, s, null, Gd); case 'W': - return (a = i.slice(2)), Di(e, a, t, s, null, Od); + return (a = i.slice(2)), Bi(e, a, t, s, null, zd); 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++ + s = i.slice(2), + t = e._prefix + '_', + s = t + s + '_', + a = new FormData(), + e = e._formData; + (i = e.keys), + i === null && + ((i = e.keys = Array.from(e.data.keys())), + (e.keyPointer = 0)), + (i = i[e.keyPointer]), + i !== void 0; + ) - 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); + if (i.startsWith(s)) { + r = e.data.getAll(i); + for (var u = i.slice(s.length), d = 0; d < r.length; d++) + a.append(u, r[d]); + e.data.delete(i), e.keyPointer++; + } else { + if (i.startsWith(t)) break; + e.keyPointer++; } - return s; + return a; case 'i': - return (a = i.slice(2)), Di(e, a, t, s, null, Dd); + return (a = i.slice(2)), Bi(e, a, t, s, null, Xd); case 'I': return 1 / 0; case '-': @@ -3170,56 +3259,56 @@ If you need interactivity, consider converting part of this to a Client Componen 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); + throw Error(ce(581, t.length, 300)); + return a !== null && Hn(a, t.length, e), BigInt(t); case 'A': - return Jt(e, i, ArrayBuffer, 1, t, s, a); + return Qt(e, i, ArrayBuffer, 1, t, s, a); case 'O': - return Jt(e, i, Int8Array, 1, t, s, a); + return Qt(e, i, Int8Array, 1, t, s, a); case 'o': - return Jt(e, i, Uint8Array, 1, t, s, a); + return Qt(e, i, Uint8Array, 1, t, s, a); case 'U': - return Jt(e, i, Uint8ClampedArray, 1, t, s, a); + return Qt(e, i, Uint8ClampedArray, 1, t, s, a); case 'S': - return Jt(e, i, Int16Array, 2, t, s, a); + return Qt(e, i, Int16Array, 2, t, s, a); case 's': - return Jt(e, i, Uint16Array, 2, t, s, a); + return Qt(e, i, Uint16Array, 2, t, s, a); case 'L': - return Jt(e, i, Int32Array, 4, t, s, a); + return Qt(e, i, Int32Array, 4, t, s, a); case 'l': - return Jt(e, i, Uint32Array, 4, t, s, a); + return Qt(e, i, Uint32Array, 4, t, s, a); case 'G': - return Jt(e, i, Float32Array, 4, t, s, a); + return Qt(e, i, Float32Array, 4, t, s, a); case 'g': - return Jt(e, i, Float64Array, 8, t, s, a); + return Qt(e, i, Float64Array, 8, t, s, a); case 'M': - return Jt(e, i, BigInt64Array, 8, t, s, a); + return Qt(e, i, BigInt64Array, 8, t, s, a); case 'm': - return Jt(e, i, BigUint64Array, 8, t, s, a); + return Qt(e, i, BigUint64Array, 8, t, s, a); case 'V': - return Jt(e, i, DataView, 1, t, s, a); + return Qt(e, i, DataView, 1, t, s, a); case 'B': - return ( - (t = parseInt(i.slice(2), 16)), e._formData.get(e._prefix + t) - ); + if ( + ((t = parseInt(i.slice(2), 16)), + (e = e._formData.data.get(e._prefix + t)), + !(e instanceof Blob)) + ) + throw Error(ce(582)); + return e; case 'R': - return du(e, i, void 0); + return Cu(e, i, void 0); case 'r': - return du(e, i, 'bytes'); + return Cu(e, i, 'bytes'); case 'X': - return mu(e, i, !1); + return wu(e, i, !1); case 'x': - return mu(e, i, !0); + return wu(e, i, !0); } - return (i = i.slice(1)), Di(e, i, t, s, a, Md); + return (i = i.slice(1)), Bi(e, i, t, s, a, Yd); } - return a !== null && $n(a, i.length, e), i; + return a !== null && Hn(a, i.length, e), i; } - function Yu(e, t, s) { + function c1(e, t, s) { var i = 3 < arguments.length && arguments[3] !== void 0 ? arguments[3] @@ -3230,7 +3319,7 @@ If you need interactivity, consider converting part of this to a Client Componen return { _bundlerConfig: e, _prefix: t, - _formData: i, + _formData: {data: i, keyPointer: -1, keys: null}, _chunks: a, _closed: !1, _closedReason: null, @@ -3239,220 +3328,193 @@ If you need interactivity, consider converting part of this to a Client Componen _arraySizeLimit: r, }; } - function Ju(e) { - Rd(e, Error('Connection closed.')); - } - function yu(e, t) { + function Su(e, t) { var s = t.id; if (typeof s != 'string') return null; - var i = $u(e, s); + var i = Qu(e, s); return ( - (e = qu(i)), + (e = Zu(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.' - ); + var a = $i(i); + if (1e3 < r.length) throw Error(ce(580, r.length, 1e3)); return a.bind.apply(a, [null].concat(r)); }) : e ? Promise.resolve(e).then(function () { - return Fi(i); + return $i(i); }) - : Promise.resolve(Fi(i)) + : Promise.resolve($i(i)) ); } - function Qu(e, t, s, i) { + function u1(e, t, s, i) { if ( - ((e = Yu(t, s, void 0, e, i)), - Ju(e), - (e = Vr(e, 0)), + ((e = c1(t, s, void 0, e, i)), + o1(e, Error(ce(412))), + (e = Ur(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); + Nn.createClientModuleProxy = function (e) { + return (e = ii({}, e, !1)), new Proxy(e, Lu); }; - En.createTemporaryReferenceSet = function () { + Nn.createTemporaryReferenceSet = function () { return new WeakMap(); }; - En.decodeAction = function (e, t) { + Nn.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); - }) - ); + i = null; + if ( + (e.forEach(function (u, d) { + d.startsWith('$ACTION_') + ? (d.startsWith('$ACTION_REF_') || d.startsWith('$ACTION_ID_')) && + (i = d) + : s.append(d, u); + }), + i === null) + ) + return null; + var r = i, + a = null; + if (r.startsWith('$ACTION_REF_')) + (r = '$ACTION_' + r.slice(12) + ':'), (e = u1(e, t, r)), (a = Su(t, e)); + else if (r.startsWith('$ACTION_ID_')) + (e = r.slice(11)), (a = Su(t, {id: e, bound: null})); + else throw Error(ce(602)); + return a.then(function (u) { + return u.bind(null, s); + }); }; - En.decodeFormState = function (e, t, s) { + Nn.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))); + (t.forEach(function (d, v) { + v.startsWith('$ACTION_REF_') && (r = v); }), 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]; + var a = '$ACTION_' + r.slice(12) + ':'; + t = u1(t, s, a); + var u = t.id; + return Promise.resolve(t.bound).then(function (d) { + return d === null ? null : [e, i, u, d.length - 1]; }); }; - En.decodeReply = function (e, t, s) { + Nn.decodeReply = function (e, t, s) { if (typeof e == 'string') { var i = new FormData(); i.append('0', e), (e = i); } return ( - (e = Yu( + (e = c1( t, '', s ? s.temporaryReferences : void 0, e, s ? s.arraySizeLimit : void 0 )), - (t = Vr(e, 0)), - Ju(e), + (t = Ur(e, 0)), + o1(e, Error(ce(412))), t ); }; - En.prerender = function (e, t, s) { + Nn.prerender = function (e, t, s) { return new Promise(function (i, r) { - var a = new Ru( + var a = new Ku( 21, e, t, s ? s.onError : void 0, - s ? s.onPostpone : void 0, function () { - var y = new ReadableStream( + var u = new ReadableStream( { type: 'bytes', - pull: function (g) { - ju(a, g); + pull: function (d) { + Yu(a, d); }, - cancel: function (g) { - (a.destination = null), si(a, g); + cancel: function (d) { + (a.destination = null), Mr(a, d); }, }, {highWaterMark: 0} ); - i({prelude: y}); + i({prelude: u}); }, 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); + s && s.signal && Ju(a, s.signal), Xu(a); }); }; - En.registerClientReference = function (e, t, s) { - return ti(e, t + '#' + s, !1); + Nn.registerClientReference = function (e, t, s) { + return ii(e, t + '#' + s, !1); }; - En.registerServerReference = function (e, t, s) { + Nn.registerServerReference = function (e, t, s) { return Object.defineProperties(e, { - $$typeof: {value: Ar}, + $$typeof: {value: Dr}, $$id: {value: s === null ? t : t + '#' + s, configurable: !0}, $$bound: {value: null, configurable: !0}, - bind: {value: gu, configurable: !0}, - toString: ed, + bind: {value: Ru, configurable: !0}, + toString: hd, }); }; - En.renderToReadableStream = function (e, t, s) { - var i = new Ru( + Nn.renderToReadableStream = function (e, t, s) { + var i = new Ku( 20, e, t, s ? s.onError : void 0, - s ? s.onPostpone : void 0, - Cs, - Cs, + An, + An, 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); + return ( + s && s.signal && Ju(i, s.signal), + new ReadableStream( + { + type: 'bytes', + start: function () { + Xu(i); + }, + pull: function (r) { + Yu(i, r); + }, + cancel: function (r) { + (i.destination = null), Mr(i, r); + }, }, - }, - {highWaterMark: 0} + {highWaterMark: 0} + ) ); }; }); - var e1 = Z((Wn) => { + var h1 = Z((Jn) => { '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 Yn; + Yn = p1(); + Jn.renderToReadableStream = Yn.renderToReadableStream; + Jn.decodeReply = Yn.decodeReply; + Jn.decodeAction = Yn.decodeAction; + Jn.decodeFormState = Yn.decodeFormState; + Jn.registerServerReference = Yn.registerServerReference; + Jn.registerClientReference = Yn.registerClientReference; + Jn.createClientModuleProxy = Yn.createClientModuleProxy; + Jn.createTemporaryReferenceSet = Yn.createTemporaryReferenceSet; }); - var It = Z((ya) => { + var Et = Z((Sa) => { 'use strict'; - Object.defineProperty(ya, '__esModule', {value: !0}); - var t1; + Object.defineProperty(Sa, '__esModule', {value: !0}); + var f1; (function (e) { e[(e.NONE = 0)] = 'NONE'; let s = 1; @@ -3467,17 +3529,17 @@ If you need interactivity, consider converting part of this to a Client Componen 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; + let v = d + 1; + e[(e._await = v)] = '_await'; + let g = v + 1; e[(e._checks = g)] = '_checks'; - let L = g + 1; - e[(e._constructor = L)] = '_constructor'; - let p = L + 1; + let O = g + 1; + e[(e._constructor = O)] = '_constructor'; + let p = O + 1; e[(e._declare = p)] = '_declare'; - let h = p + 1; - e[(e._enum = h)] = '_enum'; - let T = h + 1; + let f = p + 1; + e[(e._enum = f)] = '_enum'; + let T = f + 1; e[(e._exports = T)] = '_exports'; let x = T + 1; e[(e._from = x)] = '_from'; @@ -3487,9 +3549,9 @@ If you need interactivity, consider converting part of this to a Client Componen 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; + let q = A + 1; + e[(e._infer = q)] = '_infer'; + let M = q + 1; e[(e._interface = M)] = '_interface'; let c = M + 1; e[(e._is = c)] = '_is'; @@ -3501,46 +3563,46 @@ If you need interactivity, consider converting part of this to a Client Componen 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; + let he = ie + 1; + e[(e._of = he)] = '_of'; + let ae = he + 1; e[(e._opaque = ae)] = '_opaque'; - let He = ae + 1; - e[(e._out = He)] = '_out'; - let qe = He + 1; + let We = ae + 1; + e[(e._out = We)] = '_out'; + let qe = We + 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 = {})); + let Tt = Bt + 1; + e[(e._protected = Tt)] = '_protected'; + let vt = Tt + 1; + e[(e._proto = vt)] = '_proto'; + let Pt = vt + 1; + e[(e._public = Pt)] = '_public'; + let nt = Pt + 1; + e[(e._readonly = nt)] = '_readonly'; + let st = nt + 1; + e[(e._require = st)] = '_require'; + let Ct = st + 1; + e[(e._satisfies = Ct)] = '_satisfies'; + let ut = Ct + 1; + e[(e._set = ut)] = '_set'; + let St = ut + 1; + e[(e._static = St)] = '_static'; + let qt = St + 1; + e[(e._symbol = qt)] = '_symbol'; + let Nt = qt + 1; + e[(e._type = Nt)] = '_type'; + let Ut = Nt + 1; + e[(e._unique = Ut)] = '_unique'; + let vn = Ut + 1; + e[(e._using = vn)] = '_using'; + })(f1 || (Sa.ContextualKeyword = f1 = {})); }); - var be = Z((jr) => { + var Ce = Z((Hr) => { 'use strict'; - Object.defineProperty(jr, '__esModule', {value: !0}); - var q; + Object.defineProperty(Hr, '__esModule', {value: !0}); + var K; (function (e) { e[(e.PRECEDENCE_MASK = 15)] = 'PRECEDENCE_MASK'; let s = 16; @@ -3555,16 +3617,16 @@ If you need interactivity, consider converting part of this to a Client Componen 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 v = 512; + e[(e.num = v)] = 'num'; let g = 1536; e[(e.bigint = g)] = 'bigint'; - let L = 2560; - e[(e.decimal = L)] = 'decimal'; + let O = 2560; + e[(e.decimal = O)] = 'decimal'; let p = 3584; e[(e.regexp = p)] = 'regexp'; - let h = 4608; - e[(e.string = h)] = 'string'; + let f = 4608; + e[(e.string = f)] = 'string'; let T = 5632; e[(e.name = T)] = 'name'; let x = 6144; @@ -3575,8 +3637,8 @@ If you need interactivity, consider converting part of this to a Client Componen e[(e.bracketR = S)] = 'bracketR'; let A = 9728; e[(e.braceL = A)] = 'braceL'; - let U = 10752; - e[(e.braceBarL = U)] = 'braceBarL'; + let q = 10752; + e[(e.braceBarL = q)] = 'braceBarL'; let M = 11264; e[(e.braceR = M)] = 'braceR'; let c = 12288; @@ -3589,40 +3651,40 @@ If you need interactivity, consider converting part of this to a Client Componen e[(e.comma = X)] = 'comma'; let ie = 16384; e[(e.semi = ie)] = 'semi'; - let pe = 17408; - e[(e.colon = pe)] = 'colon'; + let he = 17408; + e[(e.colon = he)] = 'colon'; let ae = 18432; e[(e.doubleColon = ae)] = 'doubleColon'; - let He = 19456; - e[(e.dot = He)] = 'dot'; + let We = 19456; + e[(e.dot = We)] = '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 Tt = 22528; + e[(e.arrow = Tt)] = 'arrow'; + let vt = 23552; + e[(e.template = vt)] = 'template'; + let Pt = 24576; + e[(e.ellipsis = Pt)] = 'ellipsis'; + let nt = 25600; + e[(e.backQuote = nt)] = 'backQuote'; + let st = 27136; + e[(e.dollarBraceL = st)] = 'dollarBraceL'; + let Ct = 27648; + e[(e.at = Ct)] = 'at'; + let ut = 29184; + e[(e.hash = ut)] = 'hash'; + let St = 29728; + e[(e.eq = St)] = 'eq'; + let qt = 30752; + e[(e.assign = qt)] = 'assign'; + let Nt = 32640; + e[(e.preIncDec = Nt)] = 'preIncDec'; + let Ut = 33664; + e[(e.postIncDec = Ut)] = 'postIncDec'; + let vn = 34432; + e[(e.bang = vn)] = 'bang'; let V = 35456; e[(e.tilde = V)] = 'tilde'; let G = 35841; @@ -3631,406 +3693,406 @@ If you need interactivity, consider converting part of this to a Client Componen 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 xe = 38915; + e[(e.logicalAND = xe)] = 'logicalAND'; + let fe = 39940; + e[(e.bitwiseOR = fe)] = 'bitwiseOR'; + let Ee = 40965; + e[(e.bitwiseXOR = Ee)] = 'bitwiseXOR'; + let Ae = 41990; + e[(e.bitwiseAND = Ae)] = 'bitwiseAND'; + let Oe = 43015; + e[(e.equality = Oe)] = 'equality'; + let Ye = 44040; + e[(e.lessThan = Ye)] = 'lessThan'; + let Ge = 45064; + e[(e.greaterThan = Ge)] = 'greaterThan'; + let Ue = 46088; + e[(e.relationalOrEqual = Ue)] = 'relationalOrEqual'; + let pt = 47113; + e[(e.bitShiftL = pt)] = 'bitShiftL'; + let ht = 48137; + e[(e.bitShiftR = ht)] = 'bitShiftR'; + let wt = 49802; + e[(e.plus = wt)] = '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 xt = 51723; + e[(e.modulo = xt)] = 'modulo'; + let Cn = 52235; + e[(e.star = Cn)] = 'star'; + let Bn = 53259; + e[(e.slash = Bn)] = 'slash'; + let ze = 54348; + e[(e.exponent = ze)] = 'exponent'; + let It = 55296; + e[(e.jsxName = It)] = 'jsxName'; + let at = 56320; + e[(e.jsxText = at)] = 'jsxText'; + let Xt = 57344; + e[(e.jsxEmptyText = Xt)] = 'jsxEmptyText'; + let Yt = 58880; + e[(e.jsxTagStart = Yt)] = '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 wn = 60928; + e[(e.typeParameterStart = wn)] = 'typeParameterStart'; + let is = 61440; + e[(e.nonNullAssertion = is)] = 'nonNullAssertion'; + let Ci = 62480; + e[(e._break = Ci)] = '_break'; + let Vn = 63504; + e[(e._case = Vn)] = '_case'; + let Cs = 64528; + e[(e._catch = Cs)] = '_catch'; + let Bs = 65552; + e[(e._continue = Bs)] = '_continue'; + let wi = 66576; + e[(e._debugger = wi)] = '_debugger'; + let rs = 67600; + e[(e._default = rs)] = '_default'; + let Rt = 68624; + e[(e._do = Rt)] = '_do'; + let Lt = 69648; + e[(e._else = Lt)] = '_else'; + let He = 70672; + e[(e._finally = He)] = '_finally'; + let Sn = 71696; + e[(e._for = Sn)] = '_for'; + let me = 73232; + e[(e._function = me)] = '_function'; + let Vs = 73744; + e[(e._if = Vs)] = '_if'; + let ws = 74768; + e[(e._return = ws)] = '_return'; + let Si = 75792; + e[(e._switch = Si)] = '_switch'; + let os = 77456; + e[(e._throw = os)] = '_throw'; + let ln = 77840; + e[(e._try = ln)] = '_try'; + let Ii = 78864; + e[(e._var = Ii)] = '_var'; + let jn = 79888; + e[(e._let = jn)] = '_let'; + let $n = 80912; + e[(e._const = $n)] = '_const'; + let js = 81936; + e[(e._while = js)] = '_while'; + let Ei = 82960; + e[(e._with = Ei)] = '_with'; + let $s = 84496; + e[(e._new = $s)] = '_new'; + let Ks = 85520; + e[(e._this = Ks)] = '_this'; + let qs = 86544; + e[(e._super = qs)] = '_super'; + let Us = 87568; + e[(e._class = Us)] = '_class'; + let Hs = 88080; + e[(e._extends = Hs)] = '_extends'; + let Ai = 89104; + e[(e._export = Ai)] = '_export'; + let Pi = 90640; + e[(e._import = Pi)] = '_import'; + let Ni = 91664; + e[(e._yield = Ni)] = '_yield'; + let Ri = 92688; + e[(e._null = Ri)] = '_null'; + let Ws = 93712; + e[(e._true = Ws)] = '_true'; + let Gs = 94736; + e[(e._false = Gs)] = '_false'; + let zs = 95256; + e[(e._in = zs)] = '_in'; + let Xs = 96280; + e[(e._instanceof = Xs)] = '_instanceof'; + let Ys = 97936; + e[(e._typeof = Ys)] = '_typeof'; + let Js = 98960; + e[(e._void = Js)] = '_void'; + let Ho = 99984; + e[(e._delete = Ho)] = '_delete'; + let Wo = 100880; + e[(e._async = Wo)] = '_async'; + let xr = 101904; + e[(e._get = xr)] = '_get'; + let Go = 102928; + e[(e._set = Go)] = '_set'; + let Li = 103952; + e[(e._declare = Li)] = '_declare'; + let gr = 104976; + e[(e._readonly = gr)] = '_readonly'; + let zo = 106e3; + e[(e._abstract = zo)] = '_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) { + let Qs = 107536; + e[(e._public = Qs)] = '_public'; + let cn = 108560; + e[(e._private = cn)] = '_private'; + let Xo = 109584; + e[(e._protected = Xo)] = '_protected'; + let Yo = 110608; + e[(e._override = Yo)] = '_override'; + let _r = 112144; + e[(e._as = _r)] = '_as'; + let Jo = 113168; + e[(e._enum = Jo)] = '_enum'; + let Qo = 114192; + e[(e._type = Qo)] = '_type'; + let br = 115216; + e[(e._implements = br)] = '_implements'; + })(K || (Hr.TokenType = K = {})); + function Qd(e) { switch (e) { - case q.num: + case K.num: return 'num'; - case q.bigint: + case K.bigint: return 'bigint'; - case q.decimal: + case K.decimal: return 'decimal'; - case q.regexp: + case K.regexp: return 'regexp'; - case q.string: + case K.string: return 'string'; - case q.name: + case K.name: return 'name'; - case q.eof: + case K.eof: return 'eof'; - case q.bracketL: + case K.bracketL: return '['; - case q.bracketR: + case K.bracketR: return ']'; - case q.braceL: + case K.braceL: return '{'; - case q.braceBarL: + case K.braceBarL: return '{|'; - case q.braceR: + case K.braceR: return '}'; - case q.braceBarR: + case K.braceBarR: return '|}'; - case q.parenL: + case K.parenL: return '('; - case q.parenR: + case K.parenR: return ')'; - case q.comma: + case K.comma: return ','; - case q.semi: + case K.semi: return ';'; - case q.colon: + case K.colon: return ':'; - case q.doubleColon: + case K.doubleColon: return '::'; - case q.dot: + case K.dot: return '.'; - case q.question: + case K.question: return '?'; - case q.questionDot: + case K.questionDot: return '?.'; - case q.arrow: + case K.arrow: return '=>'; - case q.template: + case K.template: return 'template'; - case q.ellipsis: + case K.ellipsis: return '...'; - case q.backQuote: + case K.backQuote: return '`'; - case q.dollarBraceL: + case K.dollarBraceL: return '${'; - case q.at: + case K.at: return '@'; - case q.hash: + case K.hash: return '#'; - case q.eq: + case K.eq: return '='; - case q.assign: + case K.assign: return '_='; - case q.preIncDec: + case K.preIncDec: return '++/--'; - case q.postIncDec: + case K.postIncDec: return '++/--'; - case q.bang: + case K.bang: return '!'; - case q.tilde: + case K.tilde: return '~'; - case q.pipeline: + case K.pipeline: return '|>'; - case q.nullishCoalescing: + case K.nullishCoalescing: return '??'; - case q.logicalOR: + case K.logicalOR: return '||'; - case q.logicalAND: + case K.logicalAND: return '&&'; - case q.bitwiseOR: + case K.bitwiseOR: return '|'; - case q.bitwiseXOR: + case K.bitwiseXOR: return '^'; - case q.bitwiseAND: + case K.bitwiseAND: return '&'; - case q.equality: + case K.equality: return '==/!='; - case q.lessThan: + case K.lessThan: return '<'; - case q.greaterThan: + case K.greaterThan: return '>'; - case q.relationalOrEqual: + case K.relationalOrEqual: return '<=/>='; - case q.bitShiftL: + case K.bitShiftL: return '<<'; - case q.bitShiftR: + case K.bitShiftR: return '>>/>>>'; - case q.plus: + case K.plus: return '+'; - case q.minus: + case K.minus: return '-'; - case q.modulo: + case K.modulo: return '%'; - case q.star: + case K.star: return '*'; - case q.slash: + case K.slash: return '/'; - case q.exponent: + case K.exponent: return '**'; - case q.jsxName: + case K.jsxName: return 'jsxName'; - case q.jsxText: + case K.jsxText: return 'jsxText'; - case q.jsxEmptyText: + case K.jsxEmptyText: return 'jsxEmptyText'; - case q.jsxTagStart: + case K.jsxTagStart: return 'jsxTagStart'; - case q.jsxTagEnd: + case K.jsxTagEnd: return 'jsxTagEnd'; - case q.typeParameterStart: + case K.typeParameterStart: return 'typeParameterStart'; - case q.nonNullAssertion: + case K.nonNullAssertion: return 'nonNullAssertion'; - case q._break: + case K._break: return 'break'; - case q._case: + case K._case: return 'case'; - case q._catch: + case K._catch: return 'catch'; - case q._continue: + case K._continue: return 'continue'; - case q._debugger: + case K._debugger: return 'debugger'; - case q._default: + case K._default: return 'default'; - case q._do: + case K._do: return 'do'; - case q._else: + case K._else: return 'else'; - case q._finally: + case K._finally: return 'finally'; - case q._for: + case K._for: return 'for'; - case q._function: + case K._function: return 'function'; - case q._if: + case K._if: return 'if'; - case q._return: + case K._return: return 'return'; - case q._switch: + case K._switch: return 'switch'; - case q._throw: + case K._throw: return 'throw'; - case q._try: + case K._try: return 'try'; - case q._var: + case K._var: return 'var'; - case q._let: + case K._let: return 'let'; - case q._const: + case K._const: return 'const'; - case q._while: + case K._while: return 'while'; - case q._with: + case K._with: return 'with'; - case q._new: + case K._new: return 'new'; - case q._this: + case K._this: return 'this'; - case q._super: + case K._super: return 'super'; - case q._class: + case K._class: return 'class'; - case q._extends: + case K._extends: return 'extends'; - case q._export: + case K._export: return 'export'; - case q._import: + case K._import: return 'import'; - case q._yield: + case K._yield: return 'yield'; - case q._null: + case K._null: return 'null'; - case q._true: + case K._true: return 'true'; - case q._false: + case K._false: return 'false'; - case q._in: + case K._in: return 'in'; - case q._instanceof: + case K._instanceof: return 'instanceof'; - case q._typeof: + case K._typeof: return 'typeof'; - case q._void: + case K._void: return 'void'; - case q._delete: + case K._delete: return 'delete'; - case q._async: + case K._async: return 'async'; - case q._get: + case K._get: return 'get'; - case q._set: + case K._set: return 'set'; - case q._declare: + case K._declare: return 'declare'; - case q._readonly: + case K._readonly: return 'readonly'; - case q._abstract: + case K._abstract: return 'abstract'; - case q._static: + case K._static: return 'static'; - case q._public: + case K._public: return 'public'; - case q._private: + case K._private: return 'private'; - case q._protected: + case K._protected: return 'protected'; - case q._override: + case K._override: return 'override'; - case q._as: + case K._as: return 'as'; - case q._enum: + case K._enum: return 'enum'; - case q._type: + case K._type: return 'type'; - case q._implements: + case K._implements: return 'implements'; default: return ''; } } - jr.formatTokenType = Bd; + Hr.formatTokenType = Qd; }); - var qr = Z((Ui) => { + var Gr = Z((Xi) => { 'use strict'; - Object.defineProperty(Ui, '__esModule', {value: !0}); - var Vd = It(), - jd = be(), - Ta = class { + Object.defineProperty(Xi, '__esModule', {value: !0}); + var Zd = Et(), + em = Ce(), + Ia = 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) { + Xi.Scope = Ia; + var Wr = class { + constructor(t, s, i, r, a, u, d, v, g, O, p, f, T) { (this.potentialArrowAt = t), (this.noAnonFunctionType = s), (this.inDisallowConditionalTypesContext = i), @@ -4038,16 +4100,16 @@ If you need interactivity, consider converting part of this to a Client Componen (this.scopesLength = a), (this.pos = u), (this.type = d), - (this.contextualKeyword = y), + (this.contextualKeyword = v), (this.start = g), - (this.end = L), + (this.end = O), (this.isType = p), - (this.scopeDepth = h), + (this.scopeDepth = f), (this.error = T); } }; - Ui.StateSnapshot = $r; - var ka = class e { + Xi.StateSnapshot = Wr; + var Ea = class e { constructor() { e.prototype.__init.call(this), e.prototype.__init2.call(this), @@ -4082,10 +4144,10 @@ If you need interactivity, consider converting part of this to a Client Componen this.pos = 0; } __init7() { - this.type = jd.TokenType.eof; + this.type = em.TokenType.eof; } __init8() { - this.contextualKeyword = Vd.ContextualKeyword.NONE; + this.contextualKeyword = Zd.ContextualKeyword.NONE; } __init9() { this.start = 0; @@ -4103,7 +4165,7 @@ If you need interactivity, consider converting part of this to a Client Componen this.error = null; } snapshot() { - return new $r( + return new Wr( this.potentialArrowAt, this.noAnonFunctionType, this.inDisallowConditionalTypesContext, @@ -4136,12 +4198,12 @@ If you need interactivity, consider converting part of this to a Client Componen (this.error = t.error); } }; - Ui.default = ka; + Xi.default = Ea; }); - var Qt = Z((Kr) => { + var tn = Z((zr) => { 'use strict'; - Object.defineProperty(Kr, '__esModule', {value: !0}); - var as; + Object.defineProperty(zr, '__esModule', {value: !0}); + var ps; (function (e) { e[(e.backSpace = 8)] = 'backSpace'; let s = 10; @@ -4156,16 +4218,16 @@ If you need interactivity, consider converting part of this to a Client Componen e[(e.space = u)] = 'space'; let d = 33; e[(e.exclamationMark = d)] = 'exclamationMark'; - let y = 34; - e[(e.quotationMark = y)] = 'quotationMark'; + let v = 34; + e[(e.quotationMark = v)] = 'quotationMark'; let g = 35; e[(e.numberSign = g)] = 'numberSign'; - let L = 36; - e[(e.dollarSign = L)] = 'dollarSign'; + let O = 36; + e[(e.dollarSign = O)] = 'dollarSign'; let p = 37; e[(e.percentSign = p)] = 'percentSign'; - let h = 38; - e[(e.ampersand = h)] = 'ampersand'; + let f = 38; + e[(e.ampersand = f)] = 'ampersand'; let T = 39; e[(e.apostrophe = T)] = 'apostrophe'; let x = 40; @@ -4176,8 +4238,8 @@ If you need interactivity, consider converting part of this to a Client Componen e[(e.asterisk = S)] = 'asterisk'; let A = 43; e[(e.plusSign = A)] = 'plusSign'; - let U = 44; - e[(e.comma = U)] = 'comma'; + let q = 44; + e[(e.comma = q)] = 'comma'; let M = 45; e[(e.dash = M)] = 'dash'; let c = 46; @@ -4190,40 +4252,40 @@ If you need interactivity, consider converting part of this to a Client Componen e[(e.digit1 = X)] = 'digit1'; let ie = 50; e[(e.digit2 = ie)] = 'digit2'; - let pe = 51; - e[(e.digit3 = pe)] = 'digit3'; + let he = 51; + e[(e.digit3 = he)] = 'digit3'; let ae = 52; e[(e.digit4 = ae)] = 'digit4'; - let He = 53; - e[(e.digit5 = He)] = 'digit5'; + let We = 53; + e[(e.digit5 = We)] = '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 Tt = 56; + e[(e.digit8 = Tt)] = 'digit8'; + let vt = 57; + e[(e.digit9 = vt)] = 'digit9'; + let Pt = 58; + e[(e.colon = Pt)] = 'colon'; + let nt = 59; + e[(e.semicolon = nt)] = 'semicolon'; + let st = 60; + e[(e.lessThan = st)] = 'lessThan'; + let Ct = 61; + e[(e.equalsTo = Ct)] = 'equalsTo'; + let ut = 62; + e[(e.greaterThan = ut)] = 'greaterThan'; + let St = 63; + e[(e.questionMark = St)] = 'questionMark'; + let qt = 64; + e[(e.atSign = qt)] = 'atSign'; + let Nt = 65; + e[(e.uppercaseA = Nt)] = 'uppercaseA'; + let Ut = 66; + e[(e.uppercaseB = Ut)] = 'uppercaseB'; + let vn = 67; + e[(e.uppercaseC = vn)] = 'uppercaseC'; let V = 68; e[(e.uppercaseD = V)] = 'uppercaseD'; let G = 69; @@ -4232,228 +4294,228 @@ If you need interactivity, consider converting part of this to a Client Componen 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 xe = 72; + e[(e.uppercaseH = xe)] = 'uppercaseH'; + let fe = 73; + e[(e.uppercaseI = fe)] = 'uppercaseI'; + let Ee = 74; + e[(e.uppercaseJ = Ee)] = 'uppercaseJ'; + let Ae = 75; + e[(e.uppercaseK = Ae)] = 'uppercaseK'; + let Oe = 76; + e[(e.uppercaseL = Oe)] = 'uppercaseL'; + let Ye = 77; + e[(e.uppercaseM = Ye)] = 'uppercaseM'; + let Ge = 78; + e[(e.uppercaseN = Ge)] = 'uppercaseN'; + let Ue = 79; + e[(e.uppercaseO = Ue)] = 'uppercaseO'; + let pt = 80; + e[(e.uppercaseP = pt)] = 'uppercaseP'; + let ht = 81; + e[(e.uppercaseQ = ht)] = 'uppercaseQ'; + let wt = 82; + e[(e.uppercaseR = wt)] = '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 xt = 84; + e[(e.uppercaseT = xt)] = 'uppercaseT'; + let Cn = 85; + e[(e.uppercaseU = Cn)] = 'uppercaseU'; + let Bn = 86; + e[(e.uppercaseV = Bn)] = 'uppercaseV'; + let ze = 87; + e[(e.uppercaseW = ze)] = 'uppercaseW'; + let It = 88; + e[(e.uppercaseX = It)] = 'uppercaseX'; + let at = 89; + e[(e.uppercaseY = at)] = 'uppercaseY'; + let Xt = 90; + e[(e.uppercaseZ = Xt)] = 'uppercaseZ'; + let Yt = 91; + e[(e.leftSquareBracket = Yt)] = '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) { + let wn = 93; + e[(e.rightSquareBracket = wn)] = 'rightSquareBracket'; + let is = 94; + e[(e.caret = is)] = 'caret'; + let Ci = 95; + e[(e.underscore = Ci)] = 'underscore'; + let Vn = 96; + e[(e.graveAccent = Vn)] = 'graveAccent'; + let Cs = 97; + e[(e.lowercaseA = Cs)] = 'lowercaseA'; + let Bs = 98; + e[(e.lowercaseB = Bs)] = 'lowercaseB'; + let wi = 99; + e[(e.lowercaseC = wi)] = 'lowercaseC'; + let rs = 100; + e[(e.lowercaseD = rs)] = 'lowercaseD'; + let Rt = 101; + e[(e.lowercaseE = Rt)] = 'lowercaseE'; + let Lt = 102; + e[(e.lowercaseF = Lt)] = 'lowercaseF'; + let He = 103; + e[(e.lowercaseG = He)] = 'lowercaseG'; + let Sn = 104; + e[(e.lowercaseH = Sn)] = 'lowercaseH'; + let me = 105; + e[(e.lowercaseI = me)] = 'lowercaseI'; + let Vs = 106; + e[(e.lowercaseJ = Vs)] = 'lowercaseJ'; + let ws = 107; + e[(e.lowercaseK = ws)] = 'lowercaseK'; + let Si = 108; + e[(e.lowercaseL = Si)] = 'lowercaseL'; + let os = 109; + e[(e.lowercaseM = os)] = 'lowercaseM'; + let ln = 110; + e[(e.lowercaseN = ln)] = 'lowercaseN'; + let Ii = 111; + e[(e.lowercaseO = Ii)] = 'lowercaseO'; + let jn = 112; + e[(e.lowercaseP = jn)] = 'lowercaseP'; + let $n = 113; + e[(e.lowercaseQ = $n)] = 'lowercaseQ'; + let js = 114; + e[(e.lowercaseR = js)] = 'lowercaseR'; + let Ei = 115; + e[(e.lowercaseS = Ei)] = 'lowercaseS'; + let $s = 116; + e[(e.lowercaseT = $s)] = 'lowercaseT'; + let Ks = 117; + e[(e.lowercaseU = Ks)] = 'lowercaseU'; + let qs = 118; + e[(e.lowercaseV = qs)] = 'lowercaseV'; + let Us = 119; + e[(e.lowercaseW = Us)] = 'lowercaseW'; + let Hs = 120; + e[(e.lowercaseX = Hs)] = 'lowercaseX'; + let Ai = 121; + e[(e.lowercaseY = Ai)] = 'lowercaseY'; + let Pi = 122; + e[(e.lowercaseZ = Pi)] = 'lowercaseZ'; + let Ni = 123; + e[(e.leftCurlyBrace = Ni)] = 'leftCurlyBrace'; + let Ri = 124; + e[(e.verticalBar = Ri)] = 'verticalBar'; + let Ws = 125; + e[(e.rightCurlyBrace = Ws)] = 'rightCurlyBrace'; + let Gs = 126; + e[(e.tilde = Gs)] = 'tilde'; + let zs = 160; + e[(e.nonBreakingSpace = zs)] = 'nonBreakingSpace'; + let Xs = 5760; + e[(e.oghamSpaceMark = Xs)] = 'oghamSpaceMark'; + let Ys = 8232; + e[(e.lineSeparator = Ys)] = 'lineSeparator'; + let Js = 8233; + e[(e.paragraphSeparator = Js)] = 'paragraphSeparator'; + })(ps || (zr.charCodes = ps = {})); + function tm(e) { return ( - (e >= as.digit0 && e <= as.digit9) || - (e >= as.lowercaseA && e <= as.lowercaseF) || - (e >= as.uppercaseA && e <= as.uppercaseF) + (e >= ps.digit0 && e <= ps.digit9) || + (e >= ps.lowercaseA && e <= ps.lowercaseF) || + (e >= ps.uppercaseA && e <= ps.uppercaseF) ); } - Kr.isDigit = $d; + zr.isDigit = tm; }); - var Zt = Z((ft) => { + var nn = Z((dt) => { 'use strict'; - Object.defineProperty(ft, '__esModule', {value: !0}); - function qd(e) { + Object.defineProperty(dt, '__esModule', {value: !0}); + function nm(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) { + var sm = Gr(), + im = nm(sm), + rm = tn(); + dt.isJSXEnabled; + dt.isTypeScriptEnabled; + dt.isFlowEnabled; + dt.state; + dt.input; + dt.nextContextId; + function om() { + return dt.nextContextId++; + } + dt.getNextContextId = om; + function am(e) { if ('pos' in e) { - let t = n1(e.pos); + let t = d1(e.pos); (e.message += ` (${t.line}:${t.column})`), (e.loc = t); } return e; } - ft.augmentError = Gd; - var Ur = class { + dt.augmentError = am; + var Xr = class { constructor(t, s) { (this.line = t), (this.column = s); } }; - ft.Loc = Ur; - function n1(e) { + dt.Loc = Xr; + function d1(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; + dt.input.charCodeAt(i) === rm.charCodes.lineFeed ? (t++, (s = 1)) : s++; + return new Xr(t, s); + } + dt.locationForIndex = d1; + function lm(e, t, s, i) { + (dt.input = e), + (dt.state = new im.default()), + (dt.nextContextId = 1), + (dt.isJSXEnabled = t), + (dt.isTypeScriptEnabled = s), + (dt.isFlowEnabled = i); + } + dt.initParser = lm; }); - var cs = Z((tn) => { + var fs = Z((rn) => { '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) { + Object.defineProperty(rn, '__esModule', {value: !0}); + var hs = _t(), + Rs = Ce(), + Yr = tn(), + sn = nn(); + function cm(e) { + return sn.state.contextualKeyword === e; + } + rn.isContextual = cm; + function um(e) { + let t = hs.lookaheadTypeAndKeyword.call(void 0); + return t.type === Rs.TokenType.name && t.contextualKeyword === e; + } + rn.isLookaheadContextual = um; + function m1(e) { return ( - en.state.contextualKeyword === e && - ls.eat.call(void 0, As.TokenType.name) + sn.state.contextualKeyword === e && + hs.eat.call(void 0, Rs.TokenType.name) ); } - tn.eatContextual = s1; - function Jd(e) { - s1(e) || Wr(); + rn.eatContextual = m1; + function pm(e) { + m1(e) || Jr(); } - tn.expectContextual = Jd; - function i1() { + rn.expectContextual = pm; + function T1() { return ( - ls.match.call(void 0, As.TokenType.eof) || - ls.match.call(void 0, As.TokenType.braceR) || - r1() + hs.match.call(void 0, Rs.TokenType.eof) || + hs.match.call(void 0, Rs.TokenType.braceR) || + y1() ); } - tn.canInsertSemicolon = i1; - function r1() { - let e = en.state.tokens[en.state.tokens.length - 1], + rn.canInsertSemicolon = T1; + function y1() { + let e = sn.state.tokens[sn.state.tokens.length - 1], t = e ? e.end : 0; - for (let s = t; s < en.state.start; s++) { - let i = en.input.charCodeAt(s); + for (let s = t; s < sn.state.start; s++) { + let i = sn.input.charCodeAt(s); if ( - i === Hr.charCodes.lineFeed || - i === Hr.charCodes.carriageReturn || + i === Yr.charCodes.lineFeed || + i === Yr.charCodes.carriageReturn || i === 8232 || i === 8233 ) @@ -4461,14 +4523,14 @@ If you need interactivity, consider converting part of this to a Client Componen } 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); + rn.hasPrecedingLineBreak = y1; + function hm() { + let e = hs.nextTokenStart.call(void 0); + for (let t = sn.state.end; t < e; t++) { + let s = sn.input.charCodeAt(t); if ( - s === Hr.charCodes.lineFeed || - s === Hr.charCodes.carriageReturn || + s === Yr.charCodes.lineFeed || + s === Yr.charCodes.carriageReturn || s === 8232 || s === 8233 ) @@ -4476,43 +4538,43 @@ If you need interactivity, consider converting part of this to a Client Componen } return !1; } - tn.hasFollowingLineBreak = Qd; - function o1() { - return ls.eat.call(void 0, As.TokenType.semi) || i1(); + rn.hasFollowingLineBreak = hm; + function k1() { + return hs.eat.call(void 0, Rs.TokenType.semi) || T1(); } - tn.isLineTerminator = o1; - function Zd() { - o1() || Wr('Unexpected token, expected ";"'); + rn.isLineTerminator = k1; + function fm() { + k1() || Jr('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)}"` + rn.semicolon = fm; + function dm(e) { + hs.eat.call(void 0, e) || + Jr( + `Unexpected token, expected "${Rs.formatTokenType.call(void 0, e)}"` ); } - tn.expect = em; - function Wr(e = 'Unexpected token', t = en.state.start) { - if (en.state.error) return; + rn.expect = dm; + function Jr(e = 'Unexpected token', t = sn.state.start) { + if (sn.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); + (sn.state.error = s), + (sn.state.pos = sn.input.length), + hs.finishToken.call(void 0, Rs.TokenType.eof); } - tn.unexpected = Wr; + rn.unexpected = Jr; }); - var xa = Z((Ps) => { + var Pa = Z((Ls) => { 'use strict'; - Object.defineProperty(Ps, '__esModule', {value: !0}); - var va = Qt(), - tm = [ + Object.defineProperty(Ls, '__esModule', {value: !0}); + var Aa = tn(), + mm = [ 9, 11, 12, - va.charCodes.space, - va.charCodes.nonBreakingSpace, - va.charCodes.oghamSpaceMark, + Aa.charCodes.space, + Aa.charCodes.nonBreakingSpace, + Aa.charCodes.oghamSpaceMark, 8192, 8193, 8194, @@ -4529,19 +4591,19 @@ If you need interactivity, consider converting part of this to a Client Componen 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; + Ls.WHITESPACE_CHARS = mm; + var Tm = /(?:\s|\/\/.*|\/\*[^]*?\*\/)*/g; + Ls.skipWhiteSpace = Tm; + var ym = new Uint8Array(65536); + Ls.IS_WHITESPACE = ym; + for (let e of Ls.WHITESPACE_CHARS) Ls.IS_WHITESPACE[e] = 1; }); - var li = Z((vn) => { + var ui = Z((xn) => { 'use strict'; - Object.defineProperty(vn, '__esModule', {value: !0}); - var a1 = Qt(), - im = xa(); - function rm(e) { + Object.defineProperty(xn, '__esModule', {value: !0}); + var v1 = tn(), + km = Pa(); + function vm(e) { if (e < 48) return e === 36; if (e < 58) return !0; if (e < 65) return !1; @@ -4551,24 +4613,24 @@ If you need interactivity, consider converting part of this to a Client Componen 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 xm = new Uint8Array(65536); + xn.IS_IDENTIFIER_CHAR = xm; + for (let e = 0; e < 128; e++) xn.IS_IDENTIFIER_CHAR[e] = vm(e) ? 1 : 0; + for (let e = 128; e < 65536; e++) xn.IS_IDENTIFIER_CHAR[e] = 1; + for (let e of km.WHITESPACE_CHARS) xn.IS_IDENTIFIER_CHAR[e] = 0; + xn.IS_IDENTIFIER_CHAR[8232] = 0; + xn.IS_IDENTIFIER_CHAR[8233] = 0; + var gm = xn.IS_IDENTIFIER_CHAR.slice(); + xn.IS_IDENTIFIER_START = gm; + for (let e = v1.charCodes.digit0; e <= v1.charCodes.digit9; e++) + xn.IS_IDENTIFIER_START[e] = 0; }); - var l1 = Z((ga) => { + var x1 = Z((Na) => { 'use strict'; - Object.defineProperty(ga, '__esModule', {value: !0}); - var ge = It(), - Ce = be(), - lm = new Int32Array([ + Object.defineProperty(Na, '__esModule', {value: !0}); + var _e = Et(), + we = Ce(), + _m = new Int32Array([ -1, 27, 783, @@ -4785,7 +4847,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._abstract << 1, + _e.ContextualKeyword._abstract << 1, -1, -1, -1, @@ -4974,7 +5036,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._accessor << 1, + _e.ContextualKeyword._accessor << 1, -1, -1, -1, @@ -5001,7 +5063,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._as << 1, + _e.ContextualKeyword._as << 1, -1, -1, -1, @@ -5109,7 +5171,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._assert << 1, + _e.ContextualKeyword._assert << 1, -1, -1, -1, @@ -5136,7 +5198,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._asserts << 1, + _e.ContextualKeyword._asserts << 1, -1, -1, -1, @@ -5217,7 +5279,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._async << 1, + _e.ContextualKeyword._async << 1, -1, -1, -1, @@ -5325,7 +5387,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._await << 1, + _e.ContextualKeyword._await << 1, -1, -1, -1, @@ -5460,7 +5522,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._break << 1) + 1, + (we.TokenType._break << 1) + 1, -1, -1, -1, @@ -5568,7 +5630,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._case << 1) + 1, + (we.TokenType._case << 1) + 1, -1, -1, -1, @@ -5649,7 +5711,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._catch << 1) + 1, + (we.TokenType._catch << 1) + 1, -1, -1, -1, @@ -5784,7 +5846,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._checks << 1, + _e.ContextualKeyword._checks << 1, -1, -1, -1, @@ -5892,7 +5954,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._class << 1) + 1, + (we.TokenType._class << 1) + 1, -1, -1, -1, @@ -6000,7 +6062,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._const << 1) + 1, + (we.TokenType._const << 1) + 1, -1, -1, -1, @@ -6162,7 +6224,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._constructor << 1, + _e.ContextualKeyword._constructor << 1, -1, -1, -1, @@ -6297,7 +6359,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._continue << 1) + 1, + (we.TokenType._continue << 1) + 1, -1, -1, -1, @@ -6513,7 +6575,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._debugger << 1) + 1, + (we.TokenType._debugger << 1) + 1, -1, -1, -1, @@ -6648,7 +6710,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._declare << 1, + _e.ContextualKeyword._declare << 1, -1, -1, -1, @@ -6783,7 +6845,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._default << 1) + 1, + (we.TokenType._default << 1) + 1, -1, -1, -1, @@ -6891,7 +6953,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._delete << 1) + 1, + (we.TokenType._delete << 1) + 1, -1, -1, -1, @@ -6918,7 +6980,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._do << 1) + 1, + (we.TokenType._do << 1) + 1, -1, -1, -1, @@ -7026,7 +7088,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._else << 1) + 1, + (we.TokenType._else << 1) + 1, -1, -1, -1, @@ -7107,7 +7169,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._enum << 1, + _e.ContextualKeyword._enum << 1, -1, -1, -1, @@ -7242,7 +7304,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._export << 1) + 1, + (we.TokenType._export << 1) + 1, -1, -1, -1, @@ -7269,7 +7331,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._exports << 1, + _e.ContextualKeyword._exports << 1, -1, -1, -1, @@ -7404,7 +7466,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._extends << 1) + 1, + (we.TokenType._extends << 1) + 1, -1, -1, -1, @@ -7539,7 +7601,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._false << 1) + 1, + (we.TokenType._false << 1) + 1, -1, -1, -1, @@ -7701,7 +7763,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, 3132, -1, - (Ce.TokenType._finally << 1) + 1, + (we.TokenType._finally << 1) + 1, -1, -1, -1, @@ -7755,7 +7817,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._for << 1) + 1, + (we.TokenType._for << 1) + 1, -1, -1, -1, @@ -7836,7 +7898,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._from << 1, + _e.ContextualKeyword._from << 1, -1, -1, -1, @@ -8025,7 +8087,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._function << 1) + 1, + (we.TokenType._function << 1) + 1, -1, -1, -1, @@ -8106,7 +8168,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._get << 1, + _e.ContextualKeyword._get << 1, -1, -1, -1, @@ -8241,7 +8303,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._global << 1, + _e.ContextualKeyword._global << 1, -1, -1, -1, @@ -8295,7 +8357,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._if << 1) + 1, + (we.TokenType._if << 1) + 1, -1, -1, -1, @@ -8538,7 +8600,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._implements << 1, + _e.ContextualKeyword._implements << 1, -1, -1, -1, @@ -8619,7 +8681,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._import << 1) + 1, + (we.TokenType._import << 1) + 1, -1, -1, -1, @@ -8646,7 +8708,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._in << 1) + 1, + (we.TokenType._in << 1) + 1, -1, -1, -1, @@ -8727,7 +8789,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._infer << 1, + _e.ContextualKeyword._infer << 1, -1, -1, -1, @@ -8943,7 +9005,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._instanceof << 1) + 1, + (we.TokenType._instanceof << 1) + 1, -1, -1, -1, @@ -9132,7 +9194,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._interface << 1, + _e.ContextualKeyword._interface << 1, -1, -1, -1, @@ -9159,7 +9221,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._is << 1, + _e.ContextualKeyword._is << 1, -1, -1, -1, @@ -9294,7 +9356,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._keyof << 1, + _e.ContextualKeyword._keyof << 1, -1, -1, -1, @@ -9375,7 +9437,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._let << 1) + 1, + (we.TokenType._let << 1) + 1, -1, -1, -1, @@ -9537,7 +9599,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._mixins << 1, + _e.ContextualKeyword._mixins << 1, -1, -1, -1, @@ -9672,7 +9734,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._module << 1, + _e.ContextualKeyword._module << 1, -1, -1, -1, @@ -9915,7 +9977,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._namespace << 1, + _e.ContextualKeyword._namespace << 1, -1, -1, -1, @@ -9969,7 +10031,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._new << 1) + 1, + (we.TokenType._new << 1) + 1, -1, -1, -1, @@ -10050,7 +10112,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._null << 1) + 1, + (we.TokenType._null << 1) + 1, -1, -1, -1, @@ -10104,7 +10166,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._of << 1, + _e.ContextualKeyword._of << 1, -1, -1, -1, @@ -10239,7 +10301,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._opaque << 1, + _e.ContextualKeyword._opaque << 1, -1, -1, -1, @@ -10293,7 +10355,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._out << 1, + _e.ContextualKeyword._out << 1, -1, -1, -1, @@ -10482,7 +10544,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._override << 1, + _e.ContextualKeyword._override << 1, -1, -1, -1, @@ -10671,7 +10733,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._private << 1, + _e.ContextualKeyword._private << 1, -1, -1, -1, @@ -10860,7 +10922,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._protected << 1, + _e.ContextualKeyword._protected << 1, -1, -1, -1, @@ -10887,7 +10949,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._proto << 1, + _e.ContextualKeyword._proto << 1, -1, -1, -1, @@ -11022,7 +11084,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._public << 1, + _e.ContextualKeyword._public << 1, -1, -1, -1, @@ -11238,7 +11300,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, 6669, -1, - ge.ContextualKeyword._readonly << 1, + _e.ContextualKeyword._readonly << 1, -1, -1, -1, @@ -11373,7 +11435,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._require << 1, + _e.ContextualKeyword._require << 1, -1, -1, -1, @@ -11481,7 +11543,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._return << 1) + 1, + (we.TokenType._return << 1) + 1, -1, -1, -1, @@ -11724,7 +11786,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._satisfies << 1, + _e.ContextualKeyword._satisfies << 1, -1, -1, -1, @@ -11778,7 +11840,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._set << 1, + _e.ContextualKeyword._set << 1, -1, -1, -1, @@ -11913,7 +11975,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._static << 1, + _e.ContextualKeyword._static << 1, -1, -1, -1, @@ -12021,7 +12083,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._super << 1) + 1, + (we.TokenType._super << 1) + 1, -1, -1, -1, @@ -12156,7 +12218,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._switch << 1) + 1, + (we.TokenType._switch << 1) + 1, -1, -1, -1, @@ -12291,7 +12353,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._symbol << 1, + _e.ContextualKeyword._symbol << 1, -1, -1, -1, @@ -12399,7 +12461,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._this << 1) + 1, + (we.TokenType._this << 1) + 1, -1, -1, -1, @@ -12480,7 +12542,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._throw << 1) + 1, + (we.TokenType._throw << 1) + 1, -1, -1, -1, @@ -12561,7 +12623,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._true << 1) + 1, + (we.TokenType._true << 1) + 1, -1, -1, -1, @@ -12588,7 +12650,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._try << 1) + 1, + (we.TokenType._try << 1) + 1, -1, -1, -1, @@ -12669,7 +12731,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._type << 1, + _e.ContextualKeyword._type << 1, -1, -1, -1, @@ -12723,7 +12785,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._typeof << 1) + 1, + (we.TokenType._typeof << 1) + 1, -1, -1, -1, @@ -12885,7 +12947,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._unique << 1, + _e.ContextualKeyword._unique << 1, -1, -1, -1, @@ -12993,7 +13055,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - ge.ContextualKeyword._using << 1, + _e.ContextualKeyword._using << 1, -1, -1, -1, @@ -13074,7 +13136,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._var << 1) + 1, + (we.TokenType._var << 1) + 1, -1, -1, -1, @@ -13155,7 +13217,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._void << 1) + 1, + (we.TokenType._void << 1) + 1, -1, -1, -1, @@ -13290,7 +13352,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._while << 1) + 1, + (we.TokenType._while << 1) + 1, -1, -1, -1, @@ -13371,7 +13433,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._with << 1) + 1, + (we.TokenType._with << 1) + 1, -1, -1, -1, @@ -13506,7 +13568,7 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, -1, - (Ce.TokenType._yield << 1) + 1, + (we.TokenType._yield << 1) + 1, -1, -1, -1, @@ -13534,83 +13596,83 @@ If you need interactivity, consider converting part of this to a Client Componen -1, -1, ]); - ga.READ_WORD_TREE = lm; + Na.READ_WORD_TREE = _m; }); - var h1 = Z((ba) => { + var C1 = Z((La) => { 'use strict'; - Object.defineProperty(ba, '__esModule', {value: !0}); - var xn = Zt(), - us = Qt(), - c1 = li(), - _a = xt(), - u1 = l1(), - p1 = be(); - function cm() { + Object.defineProperty(La, '__esModule', {value: !0}); + var gn = nn(), + ds = tn(), + g1 = ui(), + Ra = _t(), + _1 = x1(), + b1 = Ce(); + function bm() { let e = 0, t = 0, - s = xn.state.pos; + s = gn.state.pos; for ( ; - s < xn.input.length && - ((t = xn.input.charCodeAt(s)), - !(t < us.charCodes.lowercaseA || t > us.charCodes.lowercaseZ)); + s < gn.input.length && + ((t = gn.input.charCodeAt(s)), + !(t < ds.charCodes.lowercaseA || t > ds.charCodes.lowercaseZ)); ) { - let r = u1.READ_WORD_TREE[e + (t - us.charCodes.lowercaseA) + 1]; + let r = _1.READ_WORD_TREE[e + (t - ds.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), + let i = _1.READ_WORD_TREE[e]; + if (i > -1 && !g1.IS_IDENTIFIER_CHAR[t]) { + (gn.state.pos = s), i & 1 - ? _a.finishToken.call(void 0, i >>> 1) - : _a.finishToken.call(void 0, p1.TokenType.name, i >>> 1); + ? Ra.finishToken.call(void 0, i >>> 1) + : Ra.finishToken.call(void 0, b1.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) { + for (; s < gn.input.length; ) { + let r = gn.input.charCodeAt(s); + if (g1.IS_IDENTIFIER_CHAR[r]) s++; + else if (r === ds.charCodes.backslash) { if ( - ((s += 2), xn.input.charCodeAt(s) === us.charCodes.leftCurlyBrace) + ((s += 2), gn.input.charCodeAt(s) === ds.charCodes.leftCurlyBrace) ) { for ( ; - s < xn.input.length && - xn.input.charCodeAt(s) !== us.charCodes.rightCurlyBrace; + s < gn.input.length && + gn.input.charCodeAt(s) !== ds.charCodes.rightCurlyBrace; ) s++; s++; } } else if ( - r === us.charCodes.atSign && - xn.input.charCodeAt(s + 1) === us.charCodes.atSign + r === ds.charCodes.atSign && + gn.input.charCodeAt(s + 1) === ds.charCodes.atSign ) s += 2; else break; } - (xn.state.pos = s), _a.finishToken.call(void 0, p1.TokenType.name); + (gn.state.pos = s), Ra.finishToken.call(void 0, b1.TokenType.name); } - ba.default = cm; + La.default = bm; }); - var xt = Z((Be) => { + var _t = Z((Ve) => { 'use strict'; - Object.defineProperty(Be, '__esModule', {value: !0}); - function um(e) { + Object.defineProperty(Ve, '__esModule', {value: !0}); + function Cm(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; + var b = nn(), + pi = fs(), + F = tn(), + S1 = ui(), + Da = Pa(), + wm = Et(), + Sm = C1(), + Im = Cm(Sm), + ne = Ce(), + rt; (function (e) { e[(e.Access = 0)] = 'Access'; let s = 1; @@ -13627,19 +13689,19 @@ If you need interactivity, consider converting part of this to a Client Componen let d = u + 1; e[(e.ObjectShorthandFunctionScopedDeclaration = d)] = 'ObjectShorthandFunctionScopedDeclaration'; - let y = d + 1; - e[(e.ObjectShorthandBlockScopedDeclaration = y)] = + let v = d + 1; + e[(e.ObjectShorthandBlockScopedDeclaration = v)] = 'ObjectShorthandBlockScopedDeclaration'; - let g = y + 1; + let g = v + 1; e[(e.ObjectShorthand = g)] = 'ObjectShorthand'; - let L = g + 1; - e[(e.ImportDeclaration = L)] = 'ImportDeclaration'; - let p = L + 1; + let O = g + 1; + e[(e.ImportDeclaration = O)] = 'ImportDeclaration'; + let p = O + 1; e[(e.ObjectKey = p)] = 'ObjectKey'; - let h = p + 1; - e[(e.ImportAccess = h)] = 'ImportAccess'; - })(it || (Be.IdentifierRole = it = {})); - var f1; + let f = p + 1; + e[(e.ImportAccess = f)] = 'ImportAccess'; + })(rt || (Ve.IdentifierRole = rt = {})); + var w1; (function (e) { e[(e.NoChildren = 0)] = 'NoChildren'; let s = 1; @@ -13648,65 +13710,65 @@ If you need interactivity, consider converting part of this to a Client Componen e[(e.StaticChildren = i)] = 'StaticChildren'; let r = i + 1; e[(e.KeyAfterPropSpread = r)] = 'KeyAfterPropSpread'; - })(f1 || (Be.JSXRole = f1 = {})); - function dm(e) { + })(w1 || (Ve.JSXRole = w1 = {})); + function Em(e) { let t = e.identifierRole; return ( - t === it.TopLevelDeclaration || - t === it.FunctionScopedDeclaration || - t === it.BlockScopedDeclaration || - t === it.ObjectShorthandTopLevelDeclaration || - t === it.ObjectShorthandFunctionScopedDeclaration || - t === it.ObjectShorthandBlockScopedDeclaration + t === rt.TopLevelDeclaration || + t === rt.FunctionScopedDeclaration || + t === rt.BlockScopedDeclaration || + t === rt.ObjectShorthandTopLevelDeclaration || + t === rt.ObjectShorthandFunctionScopedDeclaration || + t === rt.ObjectShorthandBlockScopedDeclaration ); } - Be.isDeclaration = dm; - function mm(e) { + Ve.isDeclaration = Em; + function Am(e) { let t = e.identifierRole; return ( - t === it.FunctionScopedDeclaration || - t === it.BlockScopedDeclaration || - t === it.ObjectShorthandFunctionScopedDeclaration || - t === it.ObjectShorthandBlockScopedDeclaration + t === rt.FunctionScopedDeclaration || + t === rt.BlockScopedDeclaration || + t === rt.ObjectShorthandFunctionScopedDeclaration || + t === rt.ObjectShorthandBlockScopedDeclaration ); } - Be.isNonTopLevelDeclaration = mm; - function ym(e) { + Ve.isNonTopLevelDeclaration = Am; + function Pm(e) { let t = e.identifierRole; return ( - t === it.TopLevelDeclaration || - t === it.ObjectShorthandTopLevelDeclaration || - t === it.ImportDeclaration + t === rt.TopLevelDeclaration || + t === rt.ObjectShorthandTopLevelDeclaration || + t === rt.ImportDeclaration ); } - Be.isTopLevelDeclaration = ym; - function Tm(e) { + Ve.isTopLevelDeclaration = Pm; + function Nm(e) { let t = e.identifierRole; return ( - t === it.TopLevelDeclaration || - t === it.BlockScopedDeclaration || - t === it.ObjectShorthandTopLevelDeclaration || - t === it.ObjectShorthandBlockScopedDeclaration + t === rt.TopLevelDeclaration || + t === rt.BlockScopedDeclaration || + t === rt.ObjectShorthandTopLevelDeclaration || + t === rt.ObjectShorthandBlockScopedDeclaration ); } - Be.isBlockScopedDeclaration = Tm; - function km(e) { + Ve.isBlockScopedDeclaration = Nm; + function Rm(e) { let t = e.identifierRole; return ( - t === it.FunctionScopedDeclaration || - t === it.ObjectShorthandFunctionScopedDeclaration + t === rt.FunctionScopedDeclaration || + t === rt.ObjectShorthandFunctionScopedDeclaration ); } - Be.isFunctionScopedDeclaration = km; - function vm(e) { + Ve.isFunctionScopedDeclaration = Rm; + function Lm(e) { return ( - e.identifierRole === it.ObjectShorthandTopLevelDeclaration || - e.identifierRole === it.ObjectShorthandBlockScopedDeclaration || - e.identifierRole === it.ObjectShorthandFunctionScopedDeclaration + e.identifierRole === rt.ObjectShorthandTopLevelDeclaration || + e.identifierRole === rt.ObjectShorthandBlockScopedDeclaration || + e.identifierRole === rt.ObjectShorthandFunctionScopedDeclaration ); } - Be.isObjectShorthandDeclaration = vm; - var Hi = class { + Ve.isObjectShorthandDeclaration = Lm; + var Yi = class { constructor() { (this.type = b.state.type), (this.contextualKeyword = b.state.contextualKeyword), @@ -13729,102 +13791,102 @@ If you need interactivity, consider converting part of this to a Client Componen (this.nullishStartIndex = null); } }; - Be.Token = Hi; - function zr() { - b.state.tokens.push(new Hi()), k1(); + Ve.Token = Yi; + function Zr() { + b.state.tokens.push(new Yi()), P1(); } - Be.next = zr; - function xm() { - b.state.tokens.push(new Hi()), (b.state.start = b.state.pos), Km(); + Ve.next = Zr; + function Om() { + b.state.tokens.push(new Yi()), (b.state.start = b.state.pos), sT(); } - Be.nextTemplateToken = xm; - function gm() { - b.state.type === ne.TokenType.assign && --b.state.pos, jm(); + Ve.nextTemplateToken = Om; + function Dm() { + b.state.type === ne.TokenType.assign && --b.state.pos, eT(); } - Be.retokenizeSlashAsRegex = gm; - function _m(e) { + Ve.retokenizeSlashAsRegex = Dm; + function Mm(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) { + Ve.pushTypeContext = Mm; + function Fm(e) { b.state.isType = e; } - Be.popTypeContext = bm; - function m1(e) { - return Sa(e) ? (zr(), !0) : !1; + Ve.popTypeContext = Fm; + function I1(e) { + return Ma(e) ? (Zr(), !0) : !1; } - Be.eat = m1; - function Cm(e) { + Ve.eat = I1; + function Bm(e) { let t = b.state.isType; - (b.state.isType = !0), m1(e), (b.state.isType = t); + (b.state.isType = !0), I1(e), (b.state.isType = t); } - Be.eatTypeToken = Cm; - function Sa(e) { + Ve.eatTypeToken = Bm; + function Ma(e) { return b.state.type === e; } - Be.match = Sa; - function wm() { + Ve.match = Ma; + function Vm() { let e = b.state.snapshot(); - zr(); + Zr(); let t = b.state.type; return b.state.restoreFromSnapshot(e), t; } - Be.lookaheadType = wm; - var Gr = class { + Ve.lookaheadType = Vm; + var Qr = class { constructor(t, s) { (this.type = t), (this.contextualKeyword = s); } }; - Be.TypeAndKeyword = Gr; - function Sm() { + Ve.TypeAndKeyword = Qr; + function jm() { let e = b.state.snapshot(); - zr(); + Zr(); let t = b.state.type, s = b.state.contextualKeyword; - return b.state.restoreFromSnapshot(e), new Gr(t, s); + return b.state.restoreFromSnapshot(e), new Qr(t, s); } - Be.lookaheadTypeAndKeyword = Sm; - function y1() { - return T1(b.state.pos); + Ve.lookaheadTypeAndKeyword = jm; + function E1() { + return A1(b.state.pos); } - Be.nextTokenStart = y1; - function T1(e) { - wa.skipWhiteSpace.lastIndex = e; - let t = wa.skipWhiteSpace.exec(b.input); + Ve.nextTokenStart = E1; + function A1(e) { + Da.skipWhiteSpace.lastIndex = e; + let t = Da.skipWhiteSpace.exec(b.input); return e + t[0].length; } - Be.nextTokenStartSince = T1; - function Im() { - return b.input.charCodeAt(y1()); + Ve.nextTokenStartSince = A1; + function $m() { + return b.input.charCodeAt(E1()); } - Be.lookaheadCharCode = Im; - function k1() { + Ve.lookaheadCharCode = $m; + function P1() { if ( - (x1(), (b.state.start = b.state.pos), b.state.pos >= b.input.length) + (R1(), (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); + pi.unexpected.call(void 0, 'Unexpectedly reached the end of input.'), + je(ne.TokenType.eof); return; } - Em(b.input.charCodeAt(b.state.pos)); + Km(b.input.charCodeAt(b.state.pos)); } - Be.nextToken = k1; - function Em(e) { - d1.IS_IDENTIFIER_START[e] || + Ve.nextToken = P1; + function Km(e) { + S1.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); + ? Im.default.call(void 0) + : O1(e); } - function Am() { + function qm() { for ( ; b.input.charCodeAt(b.state.pos) !== F.charCodes.asterisk || @@ -13832,12 +13894,12 @@ If you need interactivity, consider converting part of this to a Client Componen ) if ((b.state.pos++, b.state.pos > b.input.length)) { - ci.unexpected.call(void 0, 'Unterminated comment', b.state.pos - 2); + pi.unexpected.call(void 0, 'Unterminated comment', b.state.pos - 2); return; } b.state.pos += 2; } - function v1(e) { + function N1(e) { let t = b.input.charCodeAt((b.state.pos += e)); if (b.state.pos < b.input.length) for ( @@ -13851,8 +13913,8 @@ If you need interactivity, consider converting part of this to a Client Componen ) t = b.input.charCodeAt(b.state.pos); } - Be.skipLineComment = v1; - function x1() { + Ve.skipLineComment = N1; + function R1() { for (; b.state.pos < b.input.length; ) { let e = b.input.charCodeAt(b.state.pos); switch (e) { @@ -13867,45 +13929,45 @@ If you need interactivity, consider converting part of this to a Client Componen case F.charCodes.slash: switch (b.input.charCodeAt(b.state.pos + 1)) { case F.charCodes.asterisk: - (b.state.pos += 2), Am(); + (b.state.pos += 2), qm(); break; case F.charCodes.slash: - v1(2); + N1(2); break; default: return; } break; default: - if (wa.IS_WHITESPACE[e]) ++b.state.pos; + if (Da.IS_WHITESPACE[e]) ++b.state.pos; else return; } } } - Be.skipSpace = x1; - function Ve(e, t = pm.ContextualKeyword.NONE) { + Ve.skipSpace = R1; + function je(e, t = wm.ContextualKeyword.NONE) { (b.state.end = b.state.pos), (b.state.type = e), (b.state.contextualKeyword = t); } - Be.finishToken = Ve; - function Pm() { + Ve.finishToken = je; + function Um() { let e = b.input.charCodeAt(b.state.pos + 1); if (e >= F.charCodes.digit0 && e <= F.charCodes.digit9) { - b1(!0); + D1(!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)); + ? ((b.state.pos += 3), je(ne.TokenType.ellipsis)) + : (++b.state.pos, je(ne.TokenType.dot)); } - function Nm() { + function Hm() { b.input.charCodeAt(b.state.pos + 1) === F.charCodes.equalsTo - ? Fe(ne.TokenType.assign, 2) - : Fe(ne.TokenType.slash, 1); + ? Be(ne.TokenType.assign, 2) + : Be(ne.TokenType.slash, 1); } - function Rm(e) { + function Wm(e) { let t = e === F.charCodes.asterisk ? ne.TokenType.star : ne.TokenType.modulo, s = 1, @@ -13918,14 +13980,14 @@ If you need interactivity, consider converting part of this to a Client Componen i === F.charCodes.equalsTo && b.input.charCodeAt(b.state.pos + 2) !== F.charCodes.greaterThan && (s++, (t = ne.TokenType.assign)), - Fe(t, s); + Be(t, s); } - function Lm(e) { + function Gm(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( + ? Be(ne.TokenType.assign, 3) + : Be( e === F.charCodes.verticalBar ? ne.TokenType.logicalOR : ne.TokenType.logicalAND, @@ -13935,60 +13997,60 @@ If you need interactivity, consider converting part of this to a Client Componen } if (e === F.charCodes.verticalBar) { if (t === F.charCodes.greaterThan) { - Fe(ne.TokenType.pipeline, 2); + Be(ne.TokenType.pipeline, 2); return; } else if (t === F.charCodes.rightCurlyBrace && b.isFlowEnabled) { - Fe(ne.TokenType.braceBarR, 2); + Be(ne.TokenType.braceBarR, 2); return; } } if (t === F.charCodes.equalsTo) { - Fe(ne.TokenType.assign, 2); + Be(ne.TokenType.assign, 2); return; } - Fe( + Be( e === F.charCodes.verticalBar ? ne.TokenType.bitwiseOR : ne.TokenType.bitwiseAND, 1 ); } - function Om() { + function zm() { b.input.charCodeAt(b.state.pos + 1) === F.charCodes.equalsTo - ? Fe(ne.TokenType.assign, 2) - : Fe(ne.TokenType.bitwiseXOR, 1); + ? Be(ne.TokenType.assign, 2) + : Be(ne.TokenType.bitwiseXOR, 1); } - function Dm(e) { + function Xm(e) { let t = b.input.charCodeAt(b.state.pos + 1); if (t === e) { - Fe(ne.TokenType.preIncDec, 2); + Be(ne.TokenType.preIncDec, 2); return; } t === F.charCodes.equalsTo - ? Fe(ne.TokenType.assign, 2) + ? Be(ne.TokenType.assign, 2) : e === F.charCodes.plusSign - ? Fe(ne.TokenType.plus, 1) - : Fe(ne.TokenType.minus, 1); + ? Be(ne.TokenType.plus, 1) + : Be(ne.TokenType.minus, 1); } - function Mm() { + function Ym() { 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); + Be(ne.TokenType.assign, 3); return; } b.state.isType - ? Fe(ne.TokenType.lessThan, 1) - : Fe(ne.TokenType.bitShiftL, 2); + ? Be(ne.TokenType.lessThan, 1) + : Be(ne.TokenType.bitShiftL, 2); return; } e === F.charCodes.equalsTo - ? Fe(ne.TokenType.relationalOrEqual, 2) - : Fe(ne.TokenType.lessThan, 1); + ? Be(ne.TokenType.relationalOrEqual, 2) + : Be(ne.TokenType.lessThan, 1); } - function g1() { + function L1() { if (b.state.isType) { - Fe(ne.TokenType.greaterThan, 1); + Be(ne.TokenType.greaterThan, 1); return; } let e = b.input.charCodeAt(b.state.pos + 1); @@ -13998,95 +14060,95 @@ If you need interactivity, consider converting part of this to a Client Componen ? 3 : 2; if (b.input.charCodeAt(b.state.pos + t) === F.charCodes.equalsTo) { - Fe(ne.TokenType.assign, t + 1); + Be(ne.TokenType.assign, t + 1); return; } - Fe(ne.TokenType.bitShiftR, t); + Be(ne.TokenType.bitShiftR, t); return; } e === F.charCodes.equalsTo - ? Fe(ne.TokenType.relationalOrEqual, 2) - : Fe(ne.TokenType.greaterThan, 1); + ? Be(ne.TokenType.relationalOrEqual, 2) + : Be(ne.TokenType.greaterThan, 1); } - function Fm() { - b.state.type === ne.TokenType.greaterThan && ((b.state.pos -= 1), g1()); + function Jm() { + b.state.type === ne.TokenType.greaterThan && ((b.state.pos -= 1), L1()); } - Be.rescan_gt = Fm; - function Bm(e) { + Ve.rescan_gt = Jm; + function Qm(e) { let t = b.input.charCodeAt(b.state.pos + 1); if (t === F.charCodes.equalsTo) { - Fe( + Be( 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); + (b.state.pos += 2), je(ne.TokenType.arrow); return; } - Fe(e === F.charCodes.equalsTo ? ne.TokenType.eq : ne.TokenType.bang, 1); + Be(e === F.charCodes.equalsTo ? ne.TokenType.eq : ne.TokenType.bang, 1); } - function Vm() { + function Zm() { 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) + ? Be(ne.TokenType.assign, 3) + : Be(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)); + ? ((b.state.pos += 2), je(ne.TokenType.questionDot)) + : (++b.state.pos, je(ne.TokenType.question)); } - function _1(e) { + function O1(e) { switch (e) { case F.charCodes.numberSign: - ++b.state.pos, Ve(ne.TokenType.hash); + ++b.state.pos, je(ne.TokenType.hash); return; case F.charCodes.dot: - Pm(); + Um(); return; case F.charCodes.leftParenthesis: - ++b.state.pos, Ve(ne.TokenType.parenL); + ++b.state.pos, je(ne.TokenType.parenL); return; case F.charCodes.rightParenthesis: - ++b.state.pos, Ve(ne.TokenType.parenR); + ++b.state.pos, je(ne.TokenType.parenR); return; case F.charCodes.semicolon: - ++b.state.pos, Ve(ne.TokenType.semi); + ++b.state.pos, je(ne.TokenType.semi); return; case F.charCodes.comma: - ++b.state.pos, Ve(ne.TokenType.comma); + ++b.state.pos, je(ne.TokenType.comma); return; case F.charCodes.leftSquareBracket: - ++b.state.pos, Ve(ne.TokenType.bracketL); + ++b.state.pos, je(ne.TokenType.bracketL); return; case F.charCodes.rightSquareBracket: - ++b.state.pos, Ve(ne.TokenType.bracketR); + ++b.state.pos, je(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)); + ? Be(ne.TokenType.braceBarL, 2) + : (++b.state.pos, je(ne.TokenType.braceL)); return; case F.charCodes.rightCurlyBrace: - ++b.state.pos, Ve(ne.TokenType.braceR); + ++b.state.pos, je(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)); + ? Be(ne.TokenType.doubleColon, 2) + : (++b.state.pos, je(ne.TokenType.colon)); return; case F.charCodes.questionMark: - Vm(); + Zm(); return; case F.charCodes.atSign: - ++b.state.pos, Ve(ne.TokenType.at); + ++b.state.pos, je(ne.TokenType.at); return; case F.charCodes.graveAccent: - ++b.state.pos, Ve(ne.TokenType.backQuote); + ++b.state.pos, je(ne.TokenType.backQuote); return; case F.charCodes.digit0: { let t = b.input.charCodeAt(b.state.pos + 1); @@ -14098,7 +14160,7 @@ If you need interactivity, consider converting part of this to a Client Componen t === F.charCodes.lowercaseB || t === F.charCodes.uppercaseB ) { - $m(); + tT(); return; } } @@ -14111,63 +14173,63 @@ If you need interactivity, consider converting part of this to a Client Componen case F.charCodes.digit7: case F.charCodes.digit8: case F.charCodes.digit9: - b1(!1); + D1(!1); return; case F.charCodes.quotationMark: case F.charCodes.apostrophe: - qm(e); + nT(e); return; case F.charCodes.slash: - Nm(); + Hm(); return; case F.charCodes.percentSign: case F.charCodes.asterisk: - Rm(e); + Wm(e); return; case F.charCodes.verticalBar: case F.charCodes.ampersand: - Lm(e); + Gm(e); return; case F.charCodes.caret: - Om(); + zm(); return; case F.charCodes.plusSign: case F.charCodes.dash: - Dm(e); + Xm(e); return; case F.charCodes.lessThan: - Mm(); + Ym(); return; case F.charCodes.greaterThan: - g1(); + L1(); return; case F.charCodes.equalsTo: case F.charCodes.exclamationMark: - Bm(e); + Qm(e); return; case F.charCodes.tilde: - Fe(ne.TokenType.tilde, 1); + Be(ne.TokenType.tilde, 1); return; default: break; } - ci.unexpected.call( + pi.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); + Ve.getTokenFromCode = O1; + function Be(e, t) { + (b.state.pos += t), je(e); } - function jm() { + function eT() { 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); + pi.unexpected.call(void 0, 'Unterminated regular expression', e); return; } let i = b.input.charCodeAt(b.state.pos); @@ -14180,9 +14242,9 @@ If you need interactivity, consider converting part of this to a Client Componen } ++b.state.pos; } - ++b.state.pos, C1(), Ve(ne.TokenType.regexp); + ++b.state.pos, M1(), je(ne.TokenType.regexp); } - function Ca() { + function Oa() { for (;;) { let e = b.input.charCodeAt(b.state.pos); if ( @@ -14193,7 +14255,7 @@ If you need interactivity, consider converting part of this to a Client Componen else break; } } - function $m() { + function tT() { for (b.state.pos += 2; ; ) { let t = b.input.charCodeAt(b.state.pos); if ( @@ -14206,41 +14268,41 @@ If you need interactivity, consider converting part of this to a Client Componen else break; } b.input.charCodeAt(b.state.pos) === F.charCodes.lowercaseN - ? (++b.state.pos, Ve(ne.TokenType.bigint)) - : Ve(ne.TokenType.num); + ? (++b.state.pos, je(ne.TokenType.bigint)) + : je(ne.TokenType.num); } - function b1(e) { + function D1(e) { let t = !1, s = !1; - e || Ca(); + e || Oa(); let i = b.input.charCodeAt(b.state.pos); if ( (i === F.charCodes.dot && - (++b.state.pos, Ca(), (i = b.input.charCodeAt(b.state.pos))), + (++b.state.pos, Oa(), (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(), + Oa(), (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); + je(ne.TokenType.bigint); return; } if (s) { - Ve(ne.TokenType.decimal); + je(ne.TokenType.decimal); return; } - Ve(ne.TokenType.num); + je(ne.TokenType.num); } - function qm(e) { + function nT(e) { for (b.state.pos++; ; ) { if (b.state.pos >= b.input.length) { - ci.unexpected.call(void 0, 'Unterminated string constant'); + pi.unexpected.call(void 0, 'Unterminated string constant'); return; } let t = b.input.charCodeAt(b.state.pos); @@ -14248,12 +14310,12 @@ If you need interactivity, consider converting part of this to a Client Componen else if (t === e) break; b.state.pos++; } - b.state.pos++, Ve(ne.TokenType.string); + b.state.pos++, je(ne.TokenType.string); } - function Km() { + function sT() { for (;;) { if (b.state.pos >= b.input.length) { - ci.unexpected.call(void 0, 'Unterminated template'); + pi.unexpected.call(void 0, 'Unterminated template'); return; } let e = b.input.charCodeAt(b.state.pos); @@ -14262,24 +14324,24 @@ If you need interactivity, consider converting part of this to a Client Componen (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 (b.state.pos === b.state.start && Ma(ne.TokenType.template)) if (e === F.charCodes.dollarSign) { - (b.state.pos += 2), Ve(ne.TokenType.dollarBraceL); + (b.state.pos += 2), je(ne.TokenType.dollarBraceL); return; } else { - ++b.state.pos, Ve(ne.TokenType.backQuote); + ++b.state.pos, je(ne.TokenType.backQuote); return; } - Ve(ne.TokenType.template); + je(ne.TokenType.template); return; } e === F.charCodes.backslash && b.state.pos++, b.state.pos++; } } - function C1() { + function M1() { for (; b.state.pos < b.input.length; ) { let e = b.input.charCodeAt(b.state.pos); - if (d1.IS_IDENTIFIER_CHAR[e]) b.state.pos++; + if (S1.IS_IDENTIFIER_CHAR[e]) b.state.pos++; else if (e === F.charCodes.backslash) { if ( ((b.state.pos += 2), @@ -14297,41 +14359,41 @@ If you need interactivity, consider converting part of this to a Client Componen } else break; } } - Be.skipWord = C1; + Ve.skipWord = M1; }); - var Wi = Z((Ia) => { + var Ji = Z((Fa) => { 'use strict'; - Object.defineProperty(Ia, '__esModule', {value: !0}); - var w1 = be(); - function Um(e, t = e.currentIndex()) { + Object.defineProperty(Fa, '__esModule', {value: !0}); + var F1 = Ce(); + function iT(e, t = e.currentIndex()) { let s = t + 1; - if (Xr(e, s)) { + if (eo(e, s)) { let i = e.identifierNameAtIndex(t); return {isType: !1, leftName: i, rightName: i, endIndex: s}; } - if ((s++, Xr(e, s))) + if ((s++, eo(e, s))) return {isType: !0, leftName: null, rightName: null, endIndex: s}; - if ((s++, Xr(e, s))) + if ((s++, eo(e, s))) return { isType: !1, leftName: e.identifierNameAtIndex(t), rightName: e.identifierNameAtIndex(t + 2), endIndex: s, }; - if ((s++, Xr(e, s))) + if ((s++, eo(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) { + Fa.default = iT; + function eo(e, t) { let s = e.tokens[t]; - return s.type === w1.TokenType.braceR || s.type === w1.TokenType.comma; + return s.type === F1.TokenType.braceR || s.type === F1.TokenType.comma; } }); - var S1 = Z((Ea) => { + var B1 = Z((Ba) => { 'use strict'; - Object.defineProperty(Ea, '__esModule', {value: !0}); - Ea.default = new Map([ + Object.defineProperty(Ba, '__esModule', {value: !0}); + Ba.default = new Map([ ['quot', '"'], ['amp', '&'], ['apos', "'"], @@ -14587,24 +14649,24 @@ If you need interactivity, consider converting part of this to a Client Componen ['diams', '\u2666'], ]); }); - var Pa = Z((Aa) => { + var ja = Z((Va) => { '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'); + Object.defineProperty(Va, '__esModule', {value: !0}); + function rT(e) { + let [t, s] = V1(e.jsxPragma || 'React.createElement'), + [i, r] = V1(e.jsxFragmentPragma || 'React.Fragment'); return {base: t, suffix: s, fragmentBase: i, fragmentSuffix: r}; } - Aa.default = Hm; - function I1(e) { + Va.default = rT; + function V1(e) { let t = e.indexOf('.'); return t === -1 && (t = e.length), [e.slice(0, t), e.slice(t)]; } }); - var hn = Z((Ra) => { + var dn = Z((Ka) => { 'use strict'; - Object.defineProperty(Ra, '__esModule', {value: !0}); - var Na = class { + Object.defineProperty(Ka, '__esModule', {value: !0}); + var $a = class { getPrefixCode() { return ''; } @@ -14615,24 +14677,24 @@ If you need interactivity, consider converting part of this to a Client Componen return ''; } }; - Ra.default = Na; + Ka.default = $a; }); - var Da = Z((Jr) => { + var Ha = Z((no) => { 'use strict'; - Object.defineProperty(Jr, '__esModule', {value: !0}); - function Oa(e) { + Object.defineProperty(no, '__esModule', {value: !0}); + function Ua(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 { + var oT = B1(), + aT = Ua(oT), + to = _t(), + Le = Ce(), + Rn = tn(), + lT = ja(), + cT = Ua(lT), + uT = dn(), + pT = Ua(uT), + qa = class e extends pT.default { __init() { this.lastLineNumber = 1; } @@ -14660,12 +14722,12 @@ If you need interactivity, consider converting part of this to a Client Componen e.prototype.__init3.call(this), e.prototype.__init4.call(this), e.prototype.__init5.call(this), - (this.jsxPragmaInfo = Xm.default.call(void 0, a)), + (this.jsxPragmaInfo = cT.default.call(void 0, a)), (this.isAutomaticRuntime = a.jsxRuntime === 'automatic'), (this.jsxImportSource = a.jsxImportSource || 'react'); } process() { - return this.tokens.matches1(Re.TokenType.jsxTagStart) + return this.tokens.matches1(Le.TokenType.jsxTagStart) ? (this.processJSXTag(), !0) : !1; } @@ -14705,7 +14767,7 @@ If you need interactivity, consider converting part of this to a Client Componen processJSXTag() { let {jsxRole: t, start: s} = this.tokens.currentToken(), i = this.options.production ? null : this.getElementLocationCode(s); - this.isAutomaticRuntime && t !== Yr.JSXRole.KeyAfterPropSpread + this.isAutomaticRuntime && t !== to.JSXRole.KeyAfterPropSpread ? this.transformTagToJSXFunc(i, t) : this.transformTagToCreateElement(i); } @@ -14722,10 +14784,10 @@ If you need interactivity, consider converting part of this to a Client Componen return this.lastLineNumber; } transformTagToJSXFunc(t, s) { - let i = s === Yr.JSXRole.StaticChildren; + let i = s === to.JSXRole.StaticChildren; this.tokens.replaceToken(this.getJSXFuncInvocationCode(i)); let r = null; - if (this.tokens.matches1(Re.TokenType.jsxTagEnd)) + if (this.tokens.matches1(Le.TokenType.jsxTagEnd)) this.tokens.replaceToken(`${this.getFragmentCode()}, {`), this.processAutomaticChildrenAndEndProps(s); else { @@ -14733,10 +14795,10 @@ If you need interactivity, consider converting part of this to a Client Componen (this.processTagIntro(), this.tokens.appendCode(', {'), (r = this.processProps(!0)), - this.tokens.matches2(Re.TokenType.slash, Re.TokenType.jsxTagEnd)) + this.tokens.matches2(Le.TokenType.slash, Le.TokenType.jsxTagEnd)) ) this.tokens.appendCode('}'); - else if (this.tokens.matches1(Re.TokenType.jsxTagEnd)) + else if (this.tokens.matches1(Le.TokenType.jsxTagEnd)) this.tokens.removeToken(), this.processAutomaticChildrenAndEndProps(s); else @@ -14748,7 +14810,7 @@ If you need interactivity, consider converting part of this to a Client Componen (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.matches1(Le.TokenType.jsxTagEnd); ) this.tokens.removeToken(); @@ -14757,22 +14819,22 @@ If you need interactivity, consider converting part of this to a Client Componen transformTagToCreateElement(t) { if ( (this.tokens.replaceToken(this.getCreateElementInvocationCode()), - this.tokens.matches1(Re.TokenType.jsxTagEnd)) + this.tokens.matches1(Le.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)) + !this.tokens.matches2(Le.TokenType.slash, Le.TokenType.jsxTagEnd)) ) - if (this.tokens.matches1(Re.TokenType.jsxTagEnd)) + if (this.tokens.matches1(Le.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.matches1(Le.TokenType.jsxTagEnd); ) this.tokens.removeToken(); @@ -14845,27 +14907,27 @@ If you need interactivity, consider converting part of this to a Client Componen this.tokens.tokens[t].isType || (!this.tokens.matches2AtIndex( t - 1, - Re.TokenType.jsxName, - Re.TokenType.jsxName + Le.TokenType.jsxName, + Le.TokenType.jsxName ) && !this.tokens.matches2AtIndex( t - 1, - Re.TokenType.greaterThan, - Re.TokenType.jsxName + Le.TokenType.greaterThan, + Le.TokenType.jsxName ) && - !this.tokens.matches1AtIndex(t, Re.TokenType.braceL) && - !this.tokens.matches1AtIndex(t, Re.TokenType.jsxTagEnd) && + !this.tokens.matches1AtIndex(t, Le.TokenType.braceL) && + !this.tokens.matches1AtIndex(t, Le.TokenType.jsxTagEnd) && !this.tokens.matches2AtIndex( t, - Re.TokenType.slash, - Re.TokenType.jsxTagEnd + Le.TokenType.slash, + Le.TokenType.jsxTagEnd )); ) t++; if (t === this.tokens.currentIndex() + 1) { let s = this.tokens.identifierName(); - A1(s) && this.tokens.replaceToken(`'${s}'`); + $1(s) && this.tokens.replaceToken(`'${s}'`); } for (; this.tokens.currentIndex() < t; ) this.rootTransformer.processToken(); @@ -14875,8 +14937,8 @@ If you need interactivity, consider converting part of this to a Client Componen ? '' : `__self: this, __source: ${this.getDevSource(t)}`; if ( - !this.tokens.matches1(Re.TokenType.jsxName) && - !this.tokens.matches1(Re.TokenType.braceL) + !this.tokens.matches1(Le.TokenType.jsxName) && + !this.tokens.matches1(Le.TokenType.braceL) ) { s ? this.tokens.appendCode(`, {${s}}`) @@ -14890,7 +14952,7 @@ If you need interactivity, consider converting part of this to a Client Componen processProps(t) { let s = null; for (;;) { - if (this.tokens.matches2(Re.TokenType.jsxName, Re.TokenType.eq)) { + if (this.tokens.matches2(Le.TokenType.jsxName, Le.TokenType.eq)) { let i = this.tokens.identifierName(); if (t && i === 'key') { s !== null && this.tokens.appendCode(s.replace(/[^\n]/g, '')), @@ -14904,10 +14966,10 @@ If you need interactivity, consider converting part of this to a Client Componen this.processPropName(i), this.tokens.replaceToken(': '), this.processPropValue(); - } else if (this.tokens.matches1(Re.TokenType.jsxName)) { + } else if (this.tokens.matches1(Le.TokenType.jsxName)) { let i = this.tokens.identifierName(); this.processPropName(i), this.tokens.appendCode(': true'); - } else if (this.tokens.matches1(Re.TokenType.braceL)) + } else if (this.tokens.matches1(Le.TokenType.braceL)) this.tokens.replaceToken(''), this.rootTransformer.processBalancedCode(), this.tokens.replaceToken(''); @@ -14922,27 +14984,27 @@ If you need interactivity, consider converting part of this to a Client Componen : this.tokens.copyToken(); } processPropValue() { - this.tokens.matches1(Re.TokenType.braceL) + this.tokens.matches1(Le.TokenType.braceL) ? (this.tokens.replaceToken(''), this.rootTransformer.processBalancedCode(), this.tokens.replaceToken('')) - : this.tokens.matches1(Re.TokenType.jsxTagStart) + : this.tokens.matches1(Le.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); + i = j1(s), + r = fT(s); this.tokens.replaceToken(r + i); } processAutomaticChildrenAndEndProps(t) { - t === Yr.JSXRole.StaticChildren + t === to.JSXRole.StaticChildren ? (this.tokens.appendCode(' children: ['), this.processChildren(!1), this.tokens.appendCode(']}')) - : (t === Yr.JSXRole.OneChild && + : (t === to.JSXRole.OneChild && this.tokens.appendCode(' children: '), this.processChildren(!1), this.tokens.appendCode('}')); @@ -14951,24 +15013,24 @@ If you need interactivity, consider converting part of this to a Client Componen let s = t; for (;;) { if ( - this.tokens.matches2(Re.TokenType.jsxTagStart, Re.TokenType.slash) + this.tokens.matches2(Le.TokenType.jsxTagStart, Le.TokenType.slash) ) return; let i = !1; - if (this.tokens.matches1(Re.TokenType.braceL)) - this.tokens.matches2(Re.TokenType.braceL, Re.TokenType.braceR) + if (this.tokens.matches1(Le.TokenType.braceL)) + this.tokens.matches2(Le.TokenType.braceL, Le.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)) + else if (this.tokens.matches1(Le.TokenType.jsxTagStart)) this.tokens.appendCode(s ? ', ' : ''), this.processJSXTag(), (i = !0); else if ( - this.tokens.matches1(Re.TokenType.jsxText) || - this.tokens.matches1(Re.TokenType.jsxEmptyText) + this.tokens.matches1(Le.TokenType.jsxText) || + this.tokens.matches1(Le.TokenType.jsxEmptyText) ) i = this.processChildTextElement(s); else @@ -14979,8 +15041,8 @@ If you need interactivity, consider converting part of this to a Client Componen processChildTextElement(t) { let s = this.tokens.currentToken(), i = this.tokens.code.slice(s.start, s.end), - r = E1(i), - a = Qm(i); + r = j1(i), + a = hT(i); return a === '""' ? (this.tokens.replaceToken(r), !1) : (this.tokens.replaceToken(`${t ? ', ' : ''}${a}${r}`), !0); @@ -14997,13 +15059,13 @@ If you need interactivity, consider converting part of this to a Client Componen ); } }; - Jr.default = La; - function A1(e) { + no.default = qa; + function $1(e) { let t = e.charCodeAt(0); - return t >= An.charCodes.lowercaseA && t <= An.charCodes.lowercaseZ; + return t >= Rn.charCodes.lowercaseA && t <= Rn.charCodes.lowercaseZ; } - Jr.startsWithLowerCase = A1; - function Qm(e) { + no.startsWithLowerCase = $1; + function hT(e) { let t = '', s = '', i = !1, @@ -15019,15 +15081,15 @@ If you need interactivity, consider converting part of this to a Client Componen (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); + let {entity: d, newI: v} = K1(e, a + 1); + (a = v - 1), (t += d); } else t += u; (r = !0), (i = !1); } } return i || (t += s), JSON.stringify(t); } - function E1(e) { + function j1(e) { let t = 0, s = 0; for (let i of e) @@ -15041,7 +15103,7 @@ If you need interactivity, consider converting part of this to a Client Componen `.repeat(t) + ' '.repeat(s) ); } - function Zm(e) { + function fT(e) { let t = ''; for (let s = 0; s < e.length; s++) { let i = e[s]; @@ -15056,13 +15118,13 @@ If you need interactivity, consider converting part of this to a Client Componen t += ` `; else if (i === '&') { - let {entity: r, newI: a} = P1(e, s + 1); + let {entity: r, newI: a} = K1(e, s + 1); (t += r), (s = a - 1); } else t += i; } return JSON.stringify(t); } - function P1(e, t) { + function K1(e, t) { let s = '', i = 0, r, @@ -15072,89 +15134,89 @@ If you need interactivity, consider converting part of this to a Client Componen 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++; + for (u = 16, a++, d = a; a < e.length && mT(e.charCodeAt(a)); ) a++; + else for (d = a; a < e.length && dT(e.charCodeAt(a)); ) a++; if (e[a] === ';') { - let y = e.slice(d, a); - y && (a++, (r = String.fromCodePoint(parseInt(y, u)))); + let v = e.slice(d, a); + v && (a++, (r = String.fromCodePoint(parseInt(v, u)))); } } else for (; a < e.length && i++ < 10; ) { let u = e[a]; if ((a++, u === ';')) { - r = Gm.default.get(s); + r = aT.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 dT(e) { + return e >= Rn.charCodes.digit0 && e <= Rn.charCodes.digit9; } - function ty(e) { + function mT(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) + (e >= Rn.charCodes.digit0 && e <= Rn.charCodes.digit9) || + (e >= Rn.charCodes.lowercaseA && e <= Rn.charCodes.lowercaseF) || + (e >= Rn.charCodes.uppercaseA && e <= Rn.charCodes.uppercaseF) ); } }); - var Fa = Z((Ma) => { + var Ga = Z((Wa) => { 'use strict'; - Object.defineProperty(Ma, '__esModule', {value: !0}); - function ny(e) { + Object.defineProperty(Wa, '__esModule', {value: !0}); + function TT(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), + var so = _t(), + hi = Ce(), + yT = Ha(), + kT = ja(), + vT = TT(kT); + function xT(e, t) { + let s = vT.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.type === hi.TokenType.name && !a.isType && - (a.identifierRole === Qr.IdentifierRole.Access || - a.identifierRole === Qr.IdentifierRole.ObjectShorthand || - a.identifierRole === Qr.IdentifierRole.ExportAccess) && + (a.identifierRole === so.IdentifierRole.Access || + a.identifierRole === so.IdentifierRole.ObjectShorthand || + a.identifierRole === so.IdentifierRole.ExportAccess) && !a.shadowsGlobal && i.add(e.identifierNameForToken(a)), - a.type === ui.TokenType.jsxTagStart && i.add(s.base), - a.type === ui.TokenType.jsxTagStart && + a.type === hi.TokenType.jsxTagStart && i.add(s.base), + a.type === hi.TokenType.jsxTagStart && r + 1 < e.tokens.length && - e.tokens[r + 1].type === ui.TokenType.jsxTagEnd && + e.tokens[r + 1].type === hi.TokenType.jsxTagEnd && (i.add(s.base), i.add(s.fragmentBase)), - a.type === ui.TokenType.jsxName && - a.identifierRole === Qr.IdentifierRole.Access) + a.type === hi.TokenType.jsxName && + a.identifierRole === so.IdentifierRole.Access) ) { let u = e.identifierNameForToken(a); - (!sy.startsWithLowerCase.call(void 0, u) || - e.tokens[r + 1].type === ui.TokenType.dot) && + (!yT.startsWithLowerCase.call(void 0, u) || + e.tokens[r + 1].type === hi.TokenType.dot) && i.add(e.identifierNameForToken(a)); } } return i; } - Ma.getNonTypeIdentifiers = oy; + Wa.getNonTypeIdentifiers = xT; }); - var N1 = Z((Va) => { + var q1 = Z((Xa) => { 'use strict'; - Object.defineProperty(Va, '__esModule', {value: !0}); - function ay(e) { + Object.defineProperty(Xa, '__esModule', {value: !0}); + function gT(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 { + var _T = _t(), + io = Et(), + Te = Ce(), + bT = Ji(), + CT = gT(bT), + wT = Ga(), + za = class e { __init() { this.nonTypeIdentifiers = new Set(); } @@ -15185,25 +15247,25 @@ If you need interactivity, consider converting part of this to a Client Componen } preprocessTokens() { for (let t = 0; t < this.tokens.tokens.length; t++) - this.tokens.matches1AtIndex(t, me.TokenType._import) && + this.tokens.matches1AtIndex(t, Te.TokenType._import) && !this.tokens.matches3AtIndex( t, - me.TokenType._import, - me.TokenType.name, - me.TokenType.eq + Te.TokenType._import, + Te.TokenType.name, + Te.TokenType.eq ) && this.preprocessImportAtIndex(t), - this.tokens.matches1AtIndex(t, me.TokenType._export) && + this.tokens.matches1AtIndex(t, Te.TokenType._export) && !this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType.eq + Te.TokenType._export, + Te.TokenType.eq ) && this.preprocessExportAtIndex(t); this.generateImportReplacements(); } pruneTypeOnlyImports() { - this.nonTypeIdentifiers = py.getNonTypeIdentifiers.call( + this.nonTypeIdentifiers = wT.getNonTypeIdentifiers.call( void 0, this.tokens, this.options @@ -15237,7 +15299,7 @@ If you need interactivity, consider converting part of this to a Client Componen namedImports: a, namedExports: u, exportStarNames: d, - hasStarExport: y, + hasStarExport: v, } = s; if ( i.length === 0 && @@ -15245,49 +15307,49 @@ If you need interactivity, consider converting part of this to a Client Componen a.length === 0 && u.length === 0 && d.length === 0 && - !y + !v ) { this.importsToReplace.set(t, `require('${t}');`); continue; } let g = this.getFreeIdentifierForPath(t), - L; + O; this.enableLegacyTypeScriptModuleInterop - ? (L = g) - : (L = r.length > 0 ? r[0] : this.getFreeIdentifierForPath(t)); + ? (O = g) + : (O = r.length > 0 ? r[0] : this.getFreeIdentifierForPath(t)); let p = `var ${g} = require('${t}');`; if (r.length > 0) - for (let h of r) { + for (let f of r) { let T = this.enableLegacyTypeScriptModuleInterop ? g : `${this.helperManager.getHelperName( 'interopRequireWildcard' )}(${g})`; - p += ` var ${h} = ${T};`; + p += ` var ${f} = ${T};`; } else - d.length > 0 && L !== g - ? (p += ` var ${L} = ${this.helperManager.getHelperName( + d.length > 0 && O !== g + ? (p += ` var ${O} = ${this.helperManager.getHelperName( 'interopRequireWildcard' )}(${g});`) : i.length > 0 && - L !== g && - (p += ` var ${L} = ${this.helperManager.getHelperName( + O !== g && + (p += ` var ${O} = ${this.helperManager.getHelperName( 'interopRequireDefault' )}(${g});`); - for (let {importedName: h, localName: T} of u) + for (let {importedName: f, localName: T} of u) p += ` ${this.helperManager.getHelperName( 'createNamedExportFrom' - )}(${g}, '${T}', '${h}');`; - for (let h of d) p += ` exports.${h} = ${L};`; - y && + )}(${g}, '${T}', '${f}');`; + for (let f of d) p += ` exports.${f} = ${O};`; + v && (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}`); + for (let f of i) this.identifierReplacements.set(f, `${O}.default`); + for (let {importedName: f, localName: T} of a) + this.identifierReplacements.set(T, `${g}.${f}`); } } getFreeIdentifierForPath(t) { @@ -15303,37 +15365,37 @@ If you need interactivity, consider converting part of this to a Client Componen (t++, ((this.tokens.matchesContextualAtIndex( t, - Zr.ContextualKeyword._type + io.ContextualKeyword._type ) || - this.tokens.matches1AtIndex(t, me.TokenType._typeof)) && - !this.tokens.matches1AtIndex(t + 1, me.TokenType.comma) && + this.tokens.matches1AtIndex(t, Te.TokenType._typeof)) && + !this.tokens.matches1AtIndex(t + 1, Te.TokenType.comma) && !this.tokens.matchesContextualAtIndex( t + 1, - Zr.ContextualKeyword._from + io.ContextualKeyword._from )) || - this.tokens.matches1AtIndex(t, me.TokenType.parenL)) + this.tokens.matches1AtIndex(t, Te.TokenType.parenL)) ) return; if ( - (this.tokens.matches1AtIndex(t, me.TokenType.name) && + (this.tokens.matches1AtIndex(t, Te.TokenType.name) && (s.push(this.tokens.identifierNameAtIndex(t)), t++, - this.tokens.matches1AtIndex(t, me.TokenType.comma) && t++), - this.tokens.matches1AtIndex(t, me.TokenType.star) && + this.tokens.matches1AtIndex(t, Te.TokenType.comma) && t++), + this.tokens.matches1AtIndex(t, Te.TokenType.star) && ((t += 2), i.push(this.tokens.identifierNameAtIndex(t)), t++), - this.tokens.matches1AtIndex(t, me.TokenType.braceL)) + this.tokens.matches1AtIndex(t, Te.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); + for (let v of d.namedImports) + v.importedName === 'default' ? s.push(v.localName) : r.push(v); } if ( (this.tokens.matchesContextualAtIndex( t, - Zr.ContextualKeyword._from + io.ContextualKeyword._from ) && t++, - !this.tokens.matches1AtIndex(t, me.TokenType.string)) + !this.tokens.matches1AtIndex(t, Te.TokenType.string)) ) throw new Error( 'Expected string token at the end of import statement.' @@ -15352,31 +15414,31 @@ If you need interactivity, consider converting part of this to a Client Componen if ( this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType._var + Te.TokenType._export, + Te.TokenType._var ) || this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType._let + Te.TokenType._export, + Te.TokenType._let ) || this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType._const + Te.TokenType._export, + Te.TokenType._const ) ) this.preprocessVarExportAtIndex(t); else if ( this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType._function + Te.TokenType._export, + Te.TokenType._function ) || this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType._class + Te.TokenType._export, + Te.TokenType._class ) ) { let s = this.tokens.identifierNameAtIndex(t + 2); @@ -15384,9 +15446,9 @@ If you need interactivity, consider converting part of this to a Client Componen } else if ( this.tokens.matches3AtIndex( t, - me.TokenType._export, - me.TokenType.name, - me.TokenType._function + Te.TokenType._export, + Te.TokenType.name, + Te.TokenType._function ) ) { let s = this.tokens.identifierNameAtIndex(t + 3); @@ -15394,41 +15456,41 @@ If you need interactivity, consider converting part of this to a Client Componen } else this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType.braceL + Te.TokenType._export, + Te.TokenType.braceL ) ? this.preprocessNamedExportAtIndex(t) : this.tokens.matches2AtIndex( t, - me.TokenType._export, - me.TokenType.star + Te.TokenType._export, + Te.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) + this.tokens.matches1AtIndex(i, Te.TokenType.braceL) || + this.tokens.matches1AtIndex(i, Te.TokenType.dollarBraceL) || + this.tokens.matches1AtIndex(i, Te.TokenType.bracketL) ) s++; else if ( - this.tokens.matches1AtIndex(i, me.TokenType.braceR) || - this.tokens.matches1AtIndex(i, me.TokenType.bracketR) + this.tokens.matches1AtIndex(i, Te.TokenType.braceR) || + this.tokens.matches1AtIndex(i, Te.TokenType.bracketR) ) s--; else { - if (s === 0 && !this.tokens.matches1AtIndex(i, me.TokenType.name)) + if (s === 0 && !this.tokens.matches1AtIndex(i, Te.TokenType.name)) break; - if (this.tokens.matches1AtIndex(1, me.TokenType.eq)) { + if (this.tokens.matches1AtIndex(1, Te.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)) { + if (_T.isDeclaration.call(void 0, r)) { let a = this.tokens.identifierNameAtIndex(i); this.identifierReplacements.set(a, `exports.${a}`); } @@ -15440,7 +15502,7 @@ If you need interactivity, consider converting part of this to a Client Componen let {newIndex: s, namedImports: i} = this.getNamedImports(t); if ( ((t = s), - this.tokens.matchesContextualAtIndex(t, Zr.ContextualKeyword._from)) + this.tokens.matchesContextualAtIndex(t, io.ContextualKeyword._from)) ) t++; else { @@ -15448,7 +15510,7 @@ If you need interactivity, consider converting part of this to a Client Componen this.addExportBinding(u, d); return; } - if (!this.tokens.matches1AtIndex(t, me.TokenType.string)) + if (!this.tokens.matches1AtIndex(t, Te.TokenType.string)) throw new Error( 'Expected string token at the end of import statement.' ); @@ -15460,13 +15522,13 @@ If you need interactivity, consider converting part of this to a Client Componen if ( (this.tokens.matches3AtIndex( t, - me.TokenType._export, - me.TokenType.star, - me.TokenType._as + Te.TokenType._export, + Te.TokenType.star, + Te.TokenType._as ) ? ((t += 3), (s = this.tokens.identifierNameAtIndex(t)), (t += 2)) : (t += 3), - !this.tokens.matches1AtIndex(t, me.TokenType.string)) + !this.tokens.matches1AtIndex(t, Te.TokenType.string)) ) throw new Error( 'Expected string token at the end of star export statement.' @@ -15478,27 +15540,27 @@ If you need interactivity, consider converting part of this to a Client Componen getNamedImports(t) { let s = []; for (;;) { - if (this.tokens.matches1AtIndex(t, me.TokenType.braceR)) { + if (this.tokens.matches1AtIndex(t, Te.TokenType.braceR)) { t++; break; } - let i = uy.default.call(void 0, this.tokens, t); + let i = CT.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 + Te.TokenType.comma, + Te.TokenType.braceR )) ) { t += 2; break; - } else if (this.tokens.matches1AtIndex(t, me.TokenType.braceR)) { + } else if (this.tokens.matches1AtIndex(t, Te.TokenType.braceR)) { t++; break; - } else if (this.tokens.matches1AtIndex(t, me.TokenType.comma)) t++; + } else if (this.tokens.matches1AtIndex(t, Te.TokenType.comma)) t++; else throw new Error( `Unexpected token: ${JSON.stringify(this.tokens.tokens[t])}` @@ -15545,17 +15607,17 @@ If you need interactivity, consider converting part of this to a Client Componen ]); } }; - Va.default = Ba; + Xa.default = za; }); - var L1 = Z((eo, R1) => { + var H1 = Z((ro, U1) => { (function (e, t) { - typeof eo == 'object' && typeof R1 < 'u' - ? t(eo) + typeof ro == 'object' && typeof U1 < 'u' + ? t(ro) : typeof define == 'function' && define.amd ? define(['exports'], t) : ((e = typeof globalThis < 'u' ? globalThis : e || self), t((e.setArray = {}))); - })(eo, function (e) { + })(ro, function (e) { 'use strict'; (e.get = void 0), (e.put = void 0), (e.pop = void 0); class t { @@ -15580,15 +15642,15 @@ If you need interactivity, consider converting part of this to a Client Componen Object.defineProperty(e, '__esModule', {value: !0}); }); }); - var ja = Z((to, O1) => { + var Ya = Z((oo, W1) => { (function (e, t) { - typeof to == 'object' && typeof O1 < 'u' - ? t(to) + typeof oo == 'object' && typeof W1 < 'u' + ? t(oo) : typeof define == 'function' && define.amd ? define(['exports'], t) : ((e = typeof globalThis < 'u' ? globalThis : e || self), t((e.sourcemapCodec = {}))); - })(to, function (e) { + })(oo, function (e) { 'use strict'; let i = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', @@ -15622,38 +15684,38 @@ If you need interactivity, consider converting part of this to a Client Componen function d(w) { let S = new Int32Array(5), A = [], - U = 0; + q = 0; do { - let M = y(w, U), + let M = v(w, q), c = [], R = !0, W = 0; S[0] = 0; - for (let X = U; X < M; X++) { + for (let X = q; 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) + let he = S[0]; + he < W && (R = !1), + (W = he), + O(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]), + O(w, X, M) + ? ((X = g(w, X, S, 4)), (ie = [he, S[1], S[2], S[3], S[4]])) + : (ie = [he, S[1], S[2], S[3]])) + : (ie = [he]), c.push(ie); } - R || p(c), A.push(c), (U = M + 1); - } while (U <= w.length); + R || p(c), A.push(c), (q = M + 1); + } while (q <= w.length); return A; } - function y(w, S) { + function v(w, S) { let A = w.indexOf(';', S); return A === -1 ? w.length : A; } - function g(w, S, A, U) { + function g(w, S, A, q) { let M = 0, c = 0, R = 0; @@ -15662,23 +15724,23 @@ If you need interactivity, consider converting part of this to a Client Componen (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; + return (M >>>= 1), W && (M = -2147483648 | -M), (A[q] += M), S; } - function L(w, S, A) { + function O(w, S, A) { return S >= A ? !1 : w.charCodeAt(S) !== 44; } function p(w) { - w.sort(h); + w.sort(f); } - function h(w, S) { + function f(w, S) { return w[0] - S[0]; } function T(w) { let S = new Int32Array(5), A = 1024 * 16, - U = A - 36, + q = A - 36, M = new Uint8Array(A), - c = M.subarray(0, U), + c = M.subarray(0, q), R = 0, W = ''; for (let X = 0; X < w.length; X++) { @@ -15688,10 +15750,10 @@ If you need interactivity, consider converting part of this to a Client Componen 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), + for (let he = 0; he < ie.length; he++) { + let ae = ie[he]; + R > q && ((W += u.decode(c)), M.copyWithin(0, q, R), (R -= q)), + he > 0 && (M[R++] = 44), (R = x(M, R, S, ae, 0)), ae.length !== 1 && ((R = x(M, R, S, ae, 1)), @@ -15703,8 +15765,8 @@ If you need interactivity, consider converting part of this to a Client Componen } return W + u.decode(M.subarray(0, R)); } - function x(w, S, A, U, M) { - let c = U[M], + function x(w, S, A, q, M) { + let c = q[M], R = c - A[M]; (A[M] = c), (R = R < 0 ? (-R << 1) | 1 : R << 1); do { @@ -15718,15 +15780,15 @@ If you need interactivity, consider converting part of this to a Client Componen Object.defineProperty(e, '__esModule', {value: !0}); }); }); - var D1 = Z(($a, qa) => { + var G1 = Z((Ja, Qa) => { (function (e, t) { - typeof $a == 'object' && typeof qa < 'u' - ? (qa.exports = t()) + typeof Ja == '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 () { + })(Ja, function () { 'use strict'; let e = /^[\w+.-]+:\/\//, t = @@ -15754,38 +15816,38 @@ If you need interactivity, consider converting part of this to a Client Componen function d(A) { return A.startsWith('file:'); } - function y(A) { + function v(A) { return /^[.?#]/.test(A); } function g(A) { - let U = t.exec(A); + let q = t.exec(A); return p( - U[1], - U[2] || '', - U[3], - U[4] || '', - U[5] || '/', - U[6] || '', - U[7] || '' + q[1], + q[2] || '', + q[3], + q[4] || '', + q[5] || '/', + q[6] || '', + q[7] || '' ); } - function L(A) { - let U = s.exec(A), - M = U[2]; + function O(A) { + let q = s.exec(A), + M = q[2]; return p( 'file:', '', - U[1] || '', + q[1] || '', '', u(M) ? M : '/' + M, - U[3] || '', - U[4] || '' + q[3] || '', + q[4] || '' ); } - function p(A, U, M, c, R, W, X) { + function p(A, q, M, c, R, W, X) { return { scheme: A, - user: U, + user: q, host: M, port: c, path: R, @@ -15794,7 +15856,7 @@ If you need interactivity, consider converting part of this to a Client Componen type: i.Absolute, }; } - function h(A) { + function f(A) { if (a(A)) { let M = g('http:' + A); return (M.scheme = ''), (M.type = i.SchemeRelative), M; @@ -15803,39 +15865,39 @@ If you need interactivity, consider converting part of this to a Client Componen let M = g('http://foo.com' + A); return (M.scheme = ''), (M.host = ''), (M.type = i.AbsolutePath), M; } - if (d(A)) return L(A); + if (d(A)) return O(A); if (r(A)) return g(A); - let U = g('http://foo.com/' + A); + let q = g('http://foo.com/' + A); return ( - (U.scheme = ''), - (U.host = ''), - (U.type = A + (q.scheme = ''), + (q.host = ''), + (q.type = A ? A.startsWith('?') ? i.Query : A.startsWith('#') ? i.Hash : i.RelativePath : i.Empty), - U + q ); } function T(A) { if (A.endsWith('/..')) return A; - let U = A.lastIndexOf('/'); - return A.slice(0, U + 1); + let q = A.lastIndexOf('/'); + return A.slice(0, q + 1); } - function x(A, U) { - w(U, U.type), - A.path === '/' ? (A.path = U.path) : (A.path = T(U.path) + A.path); + function x(A, q) { + w(q, q.type), + A.path === '/' ? (A.path = q.path) : (A.path = T(q.path) + A.path); } - function w(A, U) { - let M = U <= i.RelativePath, + function w(A, q) { + let M = q <= i.RelativePath, c = A.path.split('/'), R = 1, W = 0, X = !1; - for (let pe = 1; pe < c.length; pe++) { - let ae = c[pe]; + for (let he = 1; he < c.length; he++) { + let ae = c[he]; if (!ae) { X = !0; continue; @@ -15849,15 +15911,15 @@ If you need interactivity, consider converting part of this to a Client Componen } } let ie = ''; - for (let pe = 1; pe < R; pe++) ie += '/' + c[pe]; + for (let he = 1; he < R; he++) ie += '/' + c[he]; (!ie || (X && !ie.endsWith('/..'))) && (ie += '/'), (A.path = ie); } - function S(A, U) { - if (!A && !U) return ''; - let M = h(A), + function S(A, q) { + if (!A && !q) return ''; + let M = f(A), c = M.type; - if (U && c !== i.Absolute) { - let W = h(U), + if (q && c !== i.Absolute) { + let W = f(q), X = W.type; switch (c) { case i.Empty: @@ -15882,7 +15944,7 @@ If you need interactivity, consider converting part of this to a Client Componen return R; case i.RelativePath: { let W = M.path.slice(1); - return W ? (y(U || A) && !y(W) ? './' + W + R : W + R) : R || '.'; + return W ? (v(q || A) && !v(W) ? './' + W + R : W + R) : R || '.'; } case i.AbsolutePath: return M.path + R; @@ -15893,10 +15955,10 @@ If you need interactivity, consider converting part of this to a Client Componen return S; }); }); - var F1 = Z((no, M1) => { + var X1 = Z((ao, z1) => { (function (e, t) { - typeof no == 'object' && typeof M1 < 'u' - ? t(no, ja(), D1()) + typeof ao == 'object' && typeof z1 < 'u' + ? t(ao, Ya(), G1()) : typeof define == 'function' && define.amd ? define( [ @@ -15908,7 +15970,7 @@ If you need interactivity, consider converting part of this to a Client Componen ) : ((e = typeof globalThis < 'u' ? globalThis : e || self), t((e.traceMapping = {}), e.sourcemapCodec, e.resolveURI)); - })(no, function (e, t, s) { + })(ao, function (e, t, s) { 'use strict'; function i(V) { return V && typeof V == 'object' && 'default' in V ? V : {default: V}; @@ -15923,11 +15985,11 @@ If you need interactivity, consider converting part of this to a Client Componen return V.slice(0, G + 1); } let d = 0, - y = 1, + v = 1, g = 2, - L = 3, + O = 3, p = 4, - h = 1, + f = 1, T = 2; function x(V, G) { let J = w(V, 0); @@ -15945,18 +16007,18 @@ If you need interactivity, consider converting part of this to a Client Componen return !0; } function A(V, G) { - return G || (V = V.slice()), V.sort(U); + return G || (V = V.slice()), V.sort(q); } - function U(V, G) { + function q(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); + let xe = J + ((re - J) >> 1), + fe = V[xe][d] - G; + if (fe === 0) return (M = !0), xe; + fe < 0 ? (J = xe + 1) : (re = xe - 1); } return (M = !1), J - 1; } @@ -15972,32 +16034,32 @@ If you need interactivity, consider converting part of this to a Client Componen 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); + let {lastKey: xe, lastNeedle: fe, lastIndex: Ee} = J, + Ae = 0, + Oe = V.length - 1; + if (re === xe) { + if (G === fe) return (M = Ee !== -1 && V[Ee][d] === G), Ee; + G >= fe ? (Ae = Ee === -1 ? 0 : Ee) : (Oe = Ee); } return ( - (J.lastKey = re), (J.lastNeedle = G), (J.lastIndex = c(V, G, Ee, Le)) + (J.lastKey = re), (J.lastNeedle = G), (J.lastIndex = c(V, G, Ae, Oe)) ); } - function pe(V, G) { - let J = G.map(He); + function he(V, G) { + let J = G.map(We); 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]]); + let xe = V[re]; + for (let fe = 0; fe < xe.length; fe++) { + let Ee = xe[fe]; + if (Ee.length === 1) continue; + let Ae = Ee[v], + Oe = Ee[g], + Ye = Ee[O], + Ge = J[Ae], + Ue = Ge[Oe] || (Ge[Oe] = []), + pt = G[Ae], + ht = R(Ue, Ye, ie(Ue, Ye, pt, Oe)); + ae(Ue, (pt.lastIndex = ht + 1), [Ye, re, Ee[d]]); } } return J; @@ -16006,87 +16068,87 @@ If you need interactivity, consider converting part of this to a Client Componen for (let re = V.length; re > G; re--) V[re] = V[re - 1]; V[G] = J; } - function He() { + function We() { 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); + if (!('sections' in J)) return new St(J, G); let re = [], - ve = [], - he = [], - Ie = []; - Bt(J, G, re, ve, he, Ie, 0, 0, 1 / 0, 1 / 0); - let Ee = { + xe = [], + fe = [], + Ee = []; + Bt(J, G, re, xe, fe, Ee, 0, 0, 1 / 0, 1 / 0); + let Ae = { version: 3, file: J.file, - names: Ie, - sources: ve, - sourcesContent: he, + names: Ee, + sources: xe, + sourcesContent: fe, mappings: re, }; - return e.presortedDecodedMap(Ee); + return e.presortedDecodedMap(Ae); }; - 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); + function Bt(V, G, J, re, xe, fe, Ee, Ae, Oe, Ye) { + let {sections: Ge} = V; + for (let Ue = 0; Ue < Ge.length; Ue++) { + let {map: pt, offset: ht} = Ge[Ue], + wt = Oe, + yt = Ye; + if (Ue + 1 < Ge.length) { + let xt = Ge[Ue + 1].offset; + (wt = Math.min(Oe, Ee + xt.line)), + wt === Oe + ? (yt = Math.min(Ye, Ae + xt.column)) + : wt < Oe && (yt = Ae + xt.column); } - mt(ut, G, J, re, ve, he, Ie + pt.line, Ee + pt.column, bt, yt); + Tt(pt, G, J, re, xe, fe, Ee + ht.line, Ae + ht.column, wt, yt); } } - function mt(V, G, J, re, ve, he, Ie, Ee, Le, Xe) { + function Tt(V, G, J, re, xe, fe, Ee, Ae, Oe, Ye) { 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]); + let Ge = new St(V, G), + Ue = re.length, + pt = fe.length, + ht = e.decodedMappings(Ge), + {resolvedSources: wt, sourcesContent: yt} = Ge; + if ((vt(re, wt), vt(fe, Ge.names), yt)) vt(xe, yt); + else for (let xt = 0; xt < wt.length; xt++) xe.push(null); + for (let xt = 0; xt < ht.length; xt++) { + let Cn = Ee + xt; + if (Cn > Oe) return; + let Bn = Pt(J, Cn), + ze = xt === 0 ? Ae : 0, + It = ht[xt]; + for (let at = 0; at < It.length; at++) { + let Xt = It[at], + Yt = ze + Xt[d]; + if (Cn === Oe && Yt >= Ye) return; + if (Xt.length === 1) { + Bn.push([Yt]); 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]] + let te = Ue + Xt[v], + wn = Xt[g], + is = Xt[O]; + Bn.push( + Xt.length === 4 ? [Yt, te, wn, is] : [Yt, te, wn, is, pt + Xt[p]] ); } } } - function kt(V, G) { + function vt(V, G) { for (let J = 0; J < G.length; J++) V.push(G[J]); } - function At(V, G) { + function Pt(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 = + let nt = '`line` must be greater than 0 (lines start at line 1)', + st = '`column` must be greater than or equal to 0 (columns start at column 0)', - _t = -1, - ct = 1; + Ct = -1, + ut = 1; (e.encodedMappings = void 0), (e.decodedMappings = void 0), (e.traceSegment = void 0), @@ -16097,31 +16159,31 @@ If you need interactivity, consider converting part of this to a Client Componen (e.presortedDecodedMap = void 0), (e.decodedMap = void 0), (e.encodedMap = void 0); - class wt { + class St { constructor(G, J) { let re = typeof G == 'string'; if (!re && G._decodedMemo) return G; - let ve = re ? JSON.parse(G) : G, + let xe = 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))), + version: fe, + file: Ee, + names: Ae, + sourceRoot: Oe, + sources: Ye, + sourcesContent: Ge, + } = xe; + (this.version = fe), + (this.file = Ee), + (this.names = Ae), + (this.sourceRoot = Oe), + (this.sources = Ye), + (this.sourcesContent = Ge); + let Ue = a(Oe || '', u(J)); + this.resolvedSources = Ye.map((ht) => a(ht || '', Ue)); + let {mappings: pt} = xe; + typeof pt == 'string' + ? ((this._encoded = pt), (this._decoded = void 0)) + : ((this._encoded = void 0), (this._decoded = x(pt, re))), (this._decodedMemo = X()), (this._bySources = void 0), (this._bySourceMemos = void 0); @@ -16137,85 +16199,85 @@ If you need interactivity, consider converting part of this to a Client Componen 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); + return G >= re.length ? null : vn(re[G], V._decodedMemo, G, J, ut); }), (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 + if ((G--, G < 0)) throw new Error(nt); + if (J < 0) throw new Error(st); + let xe = e.decodedMappings(V); + if (G >= xe.length) return Nt(null, null, null, null); + let fe = vn(xe[G], V._decodedMemo, G, J, re || ut); + if (fe == null || fe.length == 1) return Nt(null, null, null, null); + let {names: Ee, resolvedSources: Ae} = V; + return Nt( + Ae[fe[v]], + fe[g] + 1, + fe[O], + fe.length === 5 ? Ee[fe[p]] : null ); }), (e.generatedPositionFor = ( V, - {source: G, line: J, column: re, bias: ve} + {source: G, line: J, column: re, bias: xe} ) => { - 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 = + if ((J--, J < 0)) throw new Error(nt); + if (re < 0) throw new Error(st); + let {sources: fe, resolvedSources: Ee} = V, + Ae = fe.indexOf(G); + if ((Ae === -1 && (Ae = Ee.indexOf(G)), Ae === -1)) + return Ut(null, null); + let Oe = V._bySources || - (V._bySources = pe( + (V._bySources = he( e.decodedMappings(V), - (V._bySourceMemos = he.map(X)) + (V._bySourceMemos = fe.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]); + Ye = V._bySourceMemos, + Ge = Oe[Ae][J]; + if (Ge == null) return Ut(null, null); + let Ue = vn(Ge, Ye[Ae], J, re, xe || ut); + return Ue == null ? Ut(null, null) : Ut(Ue[f] + 1, Ue[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, + {names: re, resolvedSources: xe} = V; + for (let fe = 0; fe < J.length; fe++) { + let Ee = J[fe]; + for (let Ae = 0; Ae < Ee.length; Ae++) { + let Oe = Ee[Ae], + Ye = fe + 1, + Ge = Oe[0], + Ue = 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]]), + ht = null, + wt = null; + Oe.length !== 1 && + ((Ue = xe[Oe[1]]), (pt = Oe[2] + 1), (ht = Oe[3])), + Oe.length === 5 && (wt = re[Oe[4]]), G({ - generatedLine: Xe, - generatedColumn: We, - source: Ke, - originalLine: ut, - originalColumn: pt, - name: bt, + generatedLine: Ye, + generatedColumn: Ge, + source: Ue, + originalLine: pt, + originalColumn: ht, + name: wt, }); } } }), (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]; + let {sources: J, resolvedSources: re, sourcesContent: xe} = V; + if (xe == null) return null; + let fe = J.indexOf(G); + return fe === -1 && (fe = re.indexOf(G)), fe === -1 ? null : xe[fe]; }), (e.presortedDecodedMap = (V, G) => { - let J = new wt($t(V, []), G); + let J = new St(qt(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) { + (e.decodedMap = (V) => qt(V, e.decodedMappings(V))), + (e.encodedMap = (V) => qt(V, e.encodedMappings(V))); + function qt(V, G) { return { version: V.version, file: V.file, @@ -16226,30 +16288,30 @@ If you need interactivity, consider converting part of this to a Client Componen mappings: G, }; } - function Pt(V, G, J, re) { + function Nt(V, G, J, re) { return {source: V, line: G, column: J, name: re}; } - function qt(V, G) { + function Ut(V, G) { return {line: V, column: G}; } - function Tn(V, G, J, re, ve) { - let he = ie(V, re, G, J); + function vn(V, G, J, re, xe) { + let fe = 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] + M ? (fe = (xe === Ct ? R : W)(V, re, fe)) : xe === Ct && fe++, + fe === -1 || fe === V.length ? null : V[fe] ); } (e.AnyMap = qe), - (e.GREATEST_LOWER_BOUND = ct), - (e.LEAST_UPPER_BOUND = _t), - (e.TraceMap = wt), + (e.GREATEST_LOWER_BOUND = ut), + (e.LEAST_UPPER_BOUND = Ct), + (e.TraceMap = St), Object.defineProperty(e, '__esModule', {value: !0}); }); }); - var V1 = Z((so, B1) => { + var J1 = Z((lo, Y1) => { (function (e, t) { - typeof so == 'object' && typeof B1 < 'u' - ? t(so, L1(), ja(), F1()) + typeof lo == 'object' && typeof Y1 < 'u' + ? t(lo, H1(), Ya(), X1()) : typeof define == 'function' && define.amd ? define( [ @@ -16262,7 +16324,7 @@ If you need interactivity, consider converting part of this to a Client Componen ) : ((e = typeof globalThis < 'u' ? globalThis : e || self), t((e.genMapping = {}), e.setArray, e.sourcemapCodec, e.traceMapping)); - })(so, function (e, t, s, i) { + })(lo, function (e, t, s, i) { 'use strict'; (e.addSegment = void 0), (e.addMapping = void 0), @@ -16273,7 +16335,7 @@ If you need interactivity, consider converting part of this to a Client Componen (e.toEncodedMap = void 0), (e.fromMap = void 0), (e.allMappings = void 0); - let L; + let O; class p { constructor({file: R, sourceRoot: W} = {}) { (this._names = new t.SetArray()), @@ -16284,10 +16346,10 @@ If you need interactivity, consider converting part of this to a Client Componen (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.addSegment = (c, R, W, X, ie, he, ae, We) => + O(!1, c, R, W, X, ie, he, ae, We)), + (e.maybeAddSegment = (c, R, W, X, ie, he, ae, We) => + O(!0, c, R, W, X, ie, he, ae, We)), (e.addMapping = (c, R) => M(!1, c, R)), (e.maybeAddMapping = (c, R) => M(!0, c, R)), (e.setSourceContent = (c, R, W) => { @@ -16300,7 +16362,7 @@ If you need interactivity, consider converting part of this to a Client Componen sourceRoot: W, _mappings: X, _sources: ie, - _sourcesContent: pe, + _sourcesContent: he, _names: ae, } = c; return ( @@ -16311,7 +16373,7 @@ If you need interactivity, consider converting part of this to a Client Componen names: ae.array, sourceRoot: W || void 0, sources: ie.array, - sourcesContent: pe, + sourcesContent: he, mappings: X, } ); @@ -16325,19 +16387,19 @@ If you need interactivity, consider converting part of this to a Client Componen (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; + for (let he = 0; he < W.length; he++) { + let ae = W[he]; + for (let We = 0; We < ae.length; We++) { + let qe = ae[We], + Bt = {line: he + 1, column: qe[0]}, + Tt, + vt, + Pt; 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}); + ((Tt = X.array[qe[1]]), + (vt = {line: qe[2] + 1, column: qe[3]}), + qe.length === 5 && (Pt = ie.array[qe[4]])), + R.push({generated: Bt, source: Tt, original: vt, name: Pt}); } } return R; @@ -16353,25 +16415,25 @@ If you need interactivity, consider converting part of this to a Client Componen W ); }), - (L = (c, R, W, X, ie, pe, ae, He, qe) => { + (O = (c, R, W, X, ie, he, ae, We, qe) => { let { _mappings: Bt, - _sources: mt, - _sourcesContent: kt, - _names: At, + _sources: Tt, + _sourcesContent: vt, + _names: Pt, } = 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; + nt = f(Bt, W), + st = T(nt, X); + if (!ie) return c && A(nt, st) ? void 0 : x(nt, st, [X]); + let Ct = t.put(Tt, ie), + ut = We ? t.put(Pt, We) : -1; if ( - (_t === kt.length && (kt[_t] = qe ?? null), - !(c && U(tt, nt, _t, pe, ae, ct))) + (Ct === vt.length && (vt[Ct] = qe ?? null), + !(c && q(nt, st, Ct, he, ae, ut))) ) - return x(tt, nt, He ? [X, _t, pe, ae, ct] : [X, _t, pe, ae]); + return x(nt, st, We ? [X, Ct, he, ae, ut] : [X, Ct, he, ae]); }); - function h(c, R) { + function f(c, R) { for (let W = c.length; W <= R; W++) c[W] = []; return c[R]; } @@ -16399,7 +16461,7 @@ If you need interactivity, consider converting part of this to a Client Componen function A(c, R) { return R === 0 ? !0 : c[R - 1].length === 1; } - function U(c, R, W, X, ie, pe) { + function q(c, R, W, X, ie, he) { if (R === 0) return !1; let ae = c[R - 1]; return ae.length === 1 @@ -16407,81 +16469,81 @@ If you need interactivity, consider converting part of this to a Client Componen : W === ae[1] && X === ae[2] && ie === ae[3] && - pe === (ae.length === 5 ? ae[4] : -1); + he === (ae.length === 5 ? ae[4] : -1); } function M(c, R, W) { - let {generated: X, source: ie, original: pe, name: ae, content: He} = W; + let {generated: X, source: ie, original: he, name: ae, content: We} = W; if (!ie) - return L(c, R, X.line - 1, X.column, null, null, null, null, null); + return O(c, R, X.line - 1, X.column, null, null, null, null, null); let qe = ie; - return L( + return O( c, R, X.line - 1, X.column, qe, - pe.line - 1, - pe.column, + he.line - 1, + he.column, ae, - He + We ); } (e.GenMapping = p), Object.defineProperty(e, '__esModule', {value: !0}); }); }); - var $1 = Z((Ka) => { + var Z1 = Z((Za) => { '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, + Object.defineProperty(Za, '__esModule', {value: !0}); + var Qi = J1(), + Q1 = tn(); + function ST({code: e, mappings: t}, s, i, r, a) { + let u = IT(r, a), + d = new Qi.GenMapping({file: i.compiledFilename}), + v = 0, g = t[0]; - for (; g === void 0 && y < t.length - 1; ) y++, (g = t[y]); - let L = 0, + for (; g === void 0 && v < t.length - 1; ) v++, (g = t[v]); + let O = 0, p = 0; - g !== p && Gi.maybeAddSegment.call(void 0, d, L, 0, s, L, 0); + g !== p && Qi.maybeAddSegment.call(void 0, d, O, 0, s, O, 0); for (let w = 0; w < e.length; w++) { if (w === g) { let S = g - p, - A = u[y]; + A = u[v]; for ( - Gi.maybeAddSegment.call(void 0, d, L, S, s, L, A); - (g === w || g === void 0) && y < t.length - 1; + Qi.maybeAddSegment.call(void 0, d, O, S, s, O, A); + (g === w || g === void 0) && v < t.length - 1; ) - y++, (g = t[y]); + v++, (g = t[v]); } - e.charCodeAt(w) === j1.charCodes.lineFeed && - (L++, + e.charCodeAt(w) === Q1.charCodes.lineFeed && + (O++, (p = w + 1), - g !== p && Gi.maybeAddSegment.call(void 0, d, L, 0, s, L, 0)); + g !== p && Qi.maybeAddSegment.call(void 0, d, O, 0, s, O, 0)); } let { - sourceRoot: h, + sourceRoot: f, sourcesContent: T, ...x - } = Gi.toEncodedMap.call(void 0, d); + } = Qi.toEncodedMap.call(void 0, d); return x; } - Ka.default = hy; - function fy(e, t) { + Za.default = ST; + function IT(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); + e.charCodeAt(u) === Q1.charCodes.lineFeed && (a = u + 1); return s; } }); - var q1 = Z((Ha) => { + var ep = Z((tl) => { 'use strict'; - Object.defineProperty(Ha, '__esModule', {value: !0}); - var dy = { + Object.defineProperty(tl, '__esModule', {value: !0}); + var ET = { require: ` import {createRequire as CREATE_REQUIRE_NAME} from "module"; const require = CREATE_REQUIRE_NAME(import.meta.url); @@ -16603,7 +16665,7 @@ If you need interactivity, consider converting part of this to a Client Componen } `, }, - Ua = class e { + el = class e { __init() { this.helperNames = {}; } @@ -16630,7 +16692,7 @@ If you need interactivity, consider converting part of this to a Client Componen this.getHelperName('optionalChain'), this.helperNames.asyncOptionalChainDelete && this.getHelperName('asyncOptionalChain'); - for (let [s, i] of Object.entries(dy)) { + for (let [s, i] of Object.entries(ET)) { let r = this.helperNames[s], a = i; s === 'optionalChainDelete' @@ -16658,29 +16720,29 @@ If you need interactivity, consider converting part of this to a Client Componen return t; } }; - Ha.HelperManager = Ua; + tl.HelperManager = el; }); - var H1 = Z((ro) => { + var sp = Z((uo) => { '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) { + Object.defineProperty(uo, '__esModule', {value: !0}); + var nl = _t(), + co = Ce(); + function AT(e, t, s) { + np(e, s) && PT(e, t, s); + } + uo.default = AT; + function np(e, t) { for (let s of e.tokens) if ( - s.type === io.TokenType.name && - Wa.isNonTopLevelDeclaration.call(void 0, s) && + s.type === co.TokenType.name && + nl.isNonTopLevelDeclaration.call(void 0, s) && t.has(e.identifierNameForToken(s)) ) return !0; return !1; } - ro.hasShadowedGlobals = U1; - function yy(e, t, s) { + uo.hasShadowedGlobals = np; + function PT(e, t, s) { let i = [], r = t.length - 1; for (let a = e.tokens.length - 1; ; a--) { @@ -16690,56 +16752,56 @@ If you need interactivity, consider converting part of this to a Client Componen 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 > 1 && u.type === co.TokenType.name && s.has(d)) { + if (nl.isBlockScopedDeclaration.call(void 0, u)) + tp(i[i.length - 1], e, d); + else if (nl.isFunctionScopedDeclaration.call(void 0, u)) { + let v = i.length - 1; + for (; v > 0 && !i[v].isFunctionScope; ) v--; + if (v < 0) throw new Error('Did not find parent function scope.'); + tp(i[v], e, d); } } } if (i.length > 0) throw new Error('Expected empty scope stack after processing file.'); } - function K1(e, t, s) { + function tp(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) && + (r.type === co.TokenType.name || r.type === co.TokenType.jsxName) && t.identifierNameForToken(r) === s && (r.shadowsGlobal = !0); } } }); - var W1 = Z((Ga) => { + var ip = Z((sl) => { 'use strict'; - Object.defineProperty(Ga, '__esModule', {value: !0}); - var Ty = be(); - function ky(e, t) { + Object.defineProperty(sl, '__esModule', {value: !0}); + var NT = Ce(); + function RT(e, t) { let s = []; for (let i of t) - i.type === Ty.TokenType.name && s.push(e.slice(i.start, i.end)); + i.type === NT.TokenType.name && s.push(e.slice(i.start, i.end)); return s; } - Ga.default = ky; + sl.default = RT; }); - var G1 = Z((Xa) => { + var rp = Z((rl) => { 'use strict'; - Object.defineProperty(Xa, '__esModule', {value: !0}); - function vy(e) { + Object.defineProperty(rl, '__esModule', {value: !0}); + function LT(e) { return e && e.__esModule ? e : {default: e}; } - var xy = W1(), - gy = vy(xy), - za = class e { + var OT = ip(), + DT = LT(OT), + il = 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))); + (this.usedNames = new Set(DT.default.call(void 0, t, s))); } claimFreeName(t) { let s = this.findFreeName(t); @@ -16752,12 +16814,12 @@ If you need interactivity, consider converting part of this to a Client Componen return t + String(s); } }; - Xa.default = za; + rl.default = il; }); - var oo = Z((Pn) => { + var po = Z((Ln) => { 'use strict'; - var _y = - (Pn && Pn.__extends) || + var MT = + (Ln && Ln.__extends) || (function () { var e = function (t, s) { return ( @@ -16784,18 +16846,18 @@ If you need interactivity, consider converting part of this to a Client Componen : ((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); + Object.defineProperty(Ln, '__esModule', {value: !0}); + Ln.DetailContext = Ln.NoopContext = Ln.VError = void 0; + var op = (function (e) { + MT(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 () { + Ln.VError = op; + var FT = (function () { function e() {} return ( (e.prototype.fail = function (t, s, i) { @@ -16811,8 +16873,8 @@ If you need interactivity, consider converting part of this to a Client Componen e ); })(); - Pn.NoopContext = by; - var X1 = (function () { + Ln.NoopContext = FT; + var ap = (function () { function e() { (this._propNames = ['']), (this._messages = [null]), (this._score = 0); } @@ -16826,7 +16888,7 @@ If you need interactivity, consider converting part of this to a Client Componen ); }), (e.prototype.unionResolver = function () { - return new Cy(); + return new BT(); }), (e.prototype.resolveUnion = function (t) { for ( @@ -16834,8 +16896,8 @@ If you need interactivity, consider converting part of this to a Client Componen u < d.length; u++ ) { - var y = d[u]; - (!a || y._score >= a._score) && (a = y); + var v = d[u]; + (!a || v._score >= a._score) && (a = v); } a && a._score > 0 && @@ -16849,7 +16911,7 @@ If you need interactivity, consider converting part of this to a Client Componen var a = this._messages[i]; a && s.push(t + ' ' + a); } - return new z1(t, s.join('; ')); + return new op(t, s.join('; ')); }), (e.prototype.getErrorDetail = function (t) { for (var s = [], i = this._propNames.length - 1; i >= 0; i--) { @@ -16865,24 +16927,24 @@ If you need interactivity, consider converting part of this to a Client Componen e ); })(); - Pn.DetailContext = X1; - var Cy = (function () { + Ln.DetailContext = ap; + var BT = (function () { function e() { this.contexts = []; } return ( (e.prototype.createContext = function () { - var t = new X1(); + var t = new ap(); return this.contexts.push(t), t; }), e ); })(); }); - var sl = Z((ce) => { + var fl = Z((ue) => { 'use strict'; - var nn = - (ce && ce.__extends) || + var on = + (ue && ue.__extends) || (function () { var e = function (t, s) { return ( @@ -16909,57 +16971,57 @@ If you need interactivity, consider converting part of this to a Client Componen : ((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 = + Object.defineProperty(ue, '__esModule', {value: !0}); + ue.basicTypes = + ue.BasicType = + ue.TParamList = + ue.TParam = + ue.param = + ue.TFunc = + ue.func = + ue.TProp = + ue.TOptional = + ue.opt = + ue.TIface = + ue.iface = + ue.TEnumLiteral = + ue.enumlit = + ue.TEnumType = + ue.enumtype = + ue.TIntersection = + ue.intersection = + ue.TUnion = + ue.union = + ue.TTuple = + ue.tuple = + ue.TArray = + ue.array = + ue.TLiteral = + ue.lit = + ue.TName = + ue.name = + ue.TType = void 0; - var Q1 = oo(), - Ht = (function () { + var up = po(), + Wt = (function () { function e() {} return e; })(); - ce.TType = Ht; - function ps(e) { - return typeof e == 'string' ? Z1(e) : e; + ue.TType = Wt; + function ms(e) { + return typeof e == 'string' ? pp(e) : e; } - function Qa(e, t) { + function ll(e, t) { var s = e[t]; if (!s) throw new Error('Unknown type ' + t); return s; } - function Z1(e) { - return new Za(e); + function pp(e) { + return new cl(e); } - ce.name = Z1; - var Za = (function (e) { - nn(t, e); + ue.name = pp; + var cl = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return (i.name = s), (i._failMsg = 'is not a ' + s), i; @@ -16967,24 +17029,24 @@ If you need interactivity, consider converting part of this to a Client Componen return ( (t.prototype.getChecker = function (s, i, r) { var a = this, - u = Qa(s, this.name), + u = ll(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); + : function (v, g) { + return d(v, 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); + })(Wt); + ue.TName = cl; + function VT(e) { + return new ul(e); + } + ue.lit = VT; + var ul = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return ( @@ -17003,14 +17065,14 @@ If you need interactivity, consider converting part of this to a Client Componen }), t ); - })(Ht); - ce.TLiteral = el; - function Sy(e) { - return new ep(ps(e)); - } - ce.array = Sy; - var ep = (function (e) { - nn(t, e); + })(Wt); + ue.TLiteral = ul; + function jT(e) { + return new hp(ms(e)); + } + ue.array = jT; + var hp = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return (i.ttype = s), i; @@ -17021,27 +17083,27 @@ If you need interactivity, consider converting part of this to a Client Componen 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); + var v = r(a[d], u); + if (!v) return u.fail(d, null, 1); } return !0; }; }), t ); - })(Ht); - ce.TArray = ep; - function Iy() { + })(Wt); + ue.TArray = hp; + function $T() { for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; - return new tp( + return new fp( e.map(function (s) { - return ps(s); + return ms(s); }) ); } - ce.tuple = Iy; - var tp = (function (e) { - nn(t, e); + ue.tuple = $T; + var fp = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return (i.ttypes = s), i; @@ -17053,9 +17115,9 @@ If you need interactivity, consider converting part of this to a Client Componen }), 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); + for (var v = 0; v < r.length; v++) { + var g = r[v](u[v], d); + if (!g) return d.fail(v, null, 1); } return !0; }; @@ -17071,25 +17133,25 @@ If you need interactivity, consider converting part of this to a Client Componen }), t ); - })(Ht); - ce.TTuple = tp; - function Ey() { + })(Wt); + ue.TTuple = fp; + function KT() { for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; - return new np( + return new dp( e.map(function (s) { - return ps(s); + return ms(s); }) ); } - ce.union = Ey; - var np = (function (e) { - nn(t, e); + ue.union = KT; + var dp = (function (e) { + on(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; + return u instanceof cl || u instanceof ul ? u.name : null; }) .filter(function (u) { return u; @@ -17110,28 +17172,28 @@ If you need interactivity, consider converting part of this to a Client Componen 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; + for (var v = d.unionResolver(), g = 0; g < a.length; g++) { + var O = a[g](u, v.createContext()); + if (O) return !0; } - return d.resolveUnion(y), d.fail(null, r._failMsg, 0); + return d.resolveUnion(v), d.fail(null, r._failMsg, 0); }; }), t ); - })(Ht); - ce.TUnion = np; - function Ay() { + })(Wt); + ue.TUnion = dp; + function qT() { for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; - return new sp( + return new mp( e.map(function (s) { - return ps(s); + return ms(s); }) ); } - ce.intersection = Ay; - var sp = (function (e) { - nn(t, e); + ue.intersection = qT; + var mp = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return (i.ttypes = s), i; @@ -17143,22 +17205,22 @@ If you need interactivity, consider converting part of this to a Client Componen return u.getChecker(s, i, r); }); return function (u, d) { - var y = a.every(function (g) { + var v = a.every(function (g) { return g(u, d); }); - return y ? !0 : d.fail(null, null, 0); + return v ? !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); + })(Wt); + ue.TIntersection = mp; + function UT(e) { + return new pl(e); + } + ue.enumtype = UT; + var pl = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return ( @@ -17182,14 +17244,14 @@ If you need interactivity, consider converting part of this to a Client Componen }), t ); - })(Ht); - ce.TEnumType = tl; - function Ny(e, t) { - return new ip(e, t); - } - ce.enumlit = Ny; - var ip = (function (e) { - nn(t, e); + })(Wt); + ue.TEnumType = pl; + function HT(e, t) { + return new Tp(e, t); + } + ue.enumlit = HT; + var Tp = (function (e) { + on(t, e); function t(s, i) { var r = e.call(this) || this; return ( @@ -17202,8 +17264,8 @@ If you need interactivity, consider converting part of this to a Client Componen return ( (t.prototype.getChecker = function (s, i) { var r = this, - a = Qa(s, this.enumName); - if (!(a instanceof tl)) + a = ll(s, this.enumName); + if (!(a instanceof pl)) throw new Error( 'Type ' + this.enumName + ' used in enumlit is not an enum type' ); @@ -17216,28 +17278,28 @@ If you need interactivity, consider converting part of this to a Client Componen this.prop + ' used in enumlit' ); - return function (d, y) { - return d === u ? !0 : y.fail(null, r._failMsg, -1); + return function (d, v) { + return d === u ? !0 : v.fail(null, r._failMsg, -1); }; }), t ); - })(Ht); - ce.TEnumLiteral = ip; - function Ry(e) { + })(Wt); + ue.TEnumLiteral = Tp; + function WT(e) { return Object.keys(e).map(function (t) { - return Ly(t, e[t]); + return GT(t, e[t]); }); } - function Ly(e, t) { - return t instanceof nl ? new Ja(e, t.ttype, !0) : new Ja(e, ps(t), !1); + function GT(e, t) { + return t instanceof hl ? new al(e, t.ttype, !0) : new al(e, ms(t), !1); } - function Oy(e, t) { - return new rp(e, Ry(t)); + function zT(e, t) { + return new yp(e, WT(t)); } - ce.iface = Oy; - var rp = (function (e) { - nn(t, e); + ue.iface = zT; + var yp = (function (e) { + on(t, e); function t(s, i) { var r = e.call(this) || this; return ( @@ -17254,23 +17316,23 @@ If you need interactivity, consider converting part of this to a Client Componen return ( (t.prototype.getChecker = function (s, i, r) { var a = this, - u = this.bases.map(function (h) { - return Qa(s, h).getChecker(s, i); + u = this.bases.map(function (f) { + return ll(s, f).getChecker(s, i); }), - d = this.props.map(function (h) { - return h.ttype.getChecker(s, i); + d = this.props.map(function (f) { + return f.ttype.getChecker(s, i); }), - y = new Q1.NoopContext(), - g = this.props.map(function (h, T) { - return !h.isOpt && !d[T](void 0, y); + v = new up.NoopContext(), + g = this.props.map(function (f, T) { + return !f.isOpt && !d[T](void 0, v); }), - L = function (h, T) { - if (typeof h != 'object' || h === null) + O = function (f, T) { + if (typeof f != 'object' || f === 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 < u.length; x++) if (!u[x](f, T)) return !1; for (var x = 0; x < d.length; x++) { var w = a.props[x].name, - S = h[w]; + S = f[w]; if (S === void 0) { if (g[x]) return T.fail(w, 'is missing', 1); } else { @@ -17280,17 +17342,17 @@ If you need interactivity, consider converting part of this to a Client Componen } return !0; }; - if (!i) return L; + if (!i) return O; var p = this.propSet; return ( r && - (this.propSet.forEach(function (h) { - return r.add(h); + (this.propSet.forEach(function (f) { + return r.add(f); }), (p = r)), - function (h, T) { - if (!L(h, T)) return !1; - for (var x in h) + function (f, T) { + if (!O(f, T)) return !1; + for (var x in f) if (!p.has(x)) return T.fail(x, 'is extraneous', 2); return !0; } @@ -17298,14 +17360,14 @@ If you need interactivity, consider converting part of this to a Client Componen }), t ); - })(Ht); - ce.TIface = rp; - function Dy(e) { - return new nl(ps(e)); - } - ce.opt = Dy; - var nl = (function (e) { - nn(t, e); + })(Wt); + ue.TIface = yp; + function XT(e) { + return new hl(ms(e)); + } + ue.opt = XT; + var hl = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return (i.ttype = s), i; @@ -17319,23 +17381,23 @@ If you need interactivity, consider converting part of this to a Client Componen }), t ); - })(Ht); - ce.TOptional = nl; - var Ja = (function () { + })(Wt); + ue.TOptional = hl; + var al = (function () { function e(t, s, i) { (this.name = t), (this.ttype = s), (this.isOpt = i); } return e; })(); - ce.TProp = Ja; - function My(e) { + ue.TProp = al; + function YT(e) { for (var t = [], s = 1; s < arguments.length; s++) t[s - 1] = arguments[s]; - return new op(new lp(t), ps(e)); + return new kp(new xp(t), ms(e)); } - ce.func = My; - var op = (function (e) { - nn(t, e); + ue.func = YT; + var kp = (function (e) { + on(t, e); function t(s, i) { var r = e.call(this) || this; return (r.paramList = s), (r.result = i), r; @@ -17350,21 +17412,21 @@ If you need interactivity, consider converting part of this to a Client Componen }), t ); - })(Ht); - ce.TFunc = op; - function Fy(e, t, s) { - return new ap(e, ps(t), !!s); + })(Wt); + ue.TFunc = kp; + function JT(e, t, s) { + return new vp(e, ms(t), !!s); } - ce.param = Fy; - var ap = (function () { + ue.param = JT; + var vp = (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); + ue.TParam = vp; + var xp = (function (e) { + on(t, e); function t(s) { var i = e.call(this) || this; return (i.params = s), i; @@ -17375,39 +17437,39 @@ If you need interactivity, consider converting part of this to a Client Componen 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); + u = new up.NoopContext(), + d = this.params.map(function (g, O) { + return !g.isOpt && !a[O](void 0, u); }), - y = function (g, L) { - if (!Array.isArray(g)) return L.fail(null, 'is not an array', 0); + v = function (g, O) { + if (!Array.isArray(g)) return O.fail(null, 'is not an array', 0); for (var p = 0; p < a.length; p++) { - var h = r.params[p]; + var f = r.params[p]; if (g[p] === void 0) { - if (d[p]) return L.fail(h.name, 'is missing', 1); + if (d[p]) return O.fail(f.name, 'is missing', 1); } else { - var T = a[p](g[p], L); - if (!T) return L.fail(h.name, null, 1); + var T = a[p](g[p], O); + if (!T) return O.fail(f.name, null, 1); } } return !0; }; return i - ? function (g, L) { - return y(g, L) + ? function (g, O) { + return v(g, O) ? g.length <= a.length ? !0 - : L.fail(a.length, 'is extraneous', 2) + : O.fail(a.length, 'is extraneous', 2) : !1; } - : y; + : v; }), t ); - })(Ht); - ce.TParamList = lp; + })(Wt); + ue.TParamList = xp; var Dt = (function (e) { - nn(t, e); + on(t, e); function t(s, i) { var r = e.call(this) || this; return (r.validator = s), (r.message = i), r; @@ -17421,9 +17483,9 @@ If you need interactivity, consider converting part of this to a Client Componen }), t ); - })(Ht); - ce.BasicType = Dt; - ce.basicTypes = { + })(Wt); + ue.BasicType = Dt; + ue.basicTypes = { any: new Dt(function (e) { return !0; }, 'is invalid'), @@ -17454,27 +17516,27 @@ If you need interactivity, consider converting part of this to a Client Componen 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'), + Date: new Dt(lp('[object Date]'), 'is not a Date'), + RegExp: new Dt(lp('[object RegExp]'), 'is not a RegExp'), }; - var By = Object.prototype.toString; - function Y1(e) { + var QT = Object.prototype.toString; + function lp(e) { return function (t) { - return typeof t == 'object' && t && By.call(t) === e; + return typeof t == 'object' && t && QT.call(t) === e; }; } typeof Buffer < 'u' && - (ce.basicTypes.Buffer = new Dt(function (e) { + (ue.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) { + var ZT = function (e) { + ue.basicTypes[e.name] = new Dt(function (t) { return t instanceof e; }, 'is not a ' + e.name); }; for ( - ao = 0, - Ya = [ + ho = 0, + ol = [ Int8Array, Uint8Array, Uint8ClampedArray, @@ -17486,16 +17548,16 @@ If you need interactivity, consider converting part of this to a Client Componen Float64Array, ArrayBuffer, ]; - ao < Ya.length; - ao++ + ho < ol.length; + ho++ ) - (J1 = Ya[ao]), Vy(J1); - var J1, ao, Ya; + (cp = ol[ho]), ZT(cp); + var cp, ho, ol; }); - var il = Z((we) => { + var dl = Z((Se) => { 'use strict'; - var jy = - (we && we.__spreadArrays) || + var ey = + (Se && Se.__spreadArrays) || function () { for (var e = 0, t = 0, s = arguments.length; t < s; t++) e += arguments[t].length; @@ -17504,204 +17566,204 @@ If you need interactivity, consider converting part of this to a Client Componen 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', { + Object.defineProperty(Se, '__esModule', {value: !0}); + Se.Checker = Se.createCheckers = void 0; + var Zi = fl(), + fi = po(), + Xe = fl(); + Object.defineProperty(Se, 'TArray', { enumerable: !0, get: function () { - return ze.TArray; + return Xe.TArray; }, }); - Object.defineProperty(we, 'TEnumType', { + Object.defineProperty(Se, 'TEnumType', { enumerable: !0, get: function () { - return ze.TEnumType; + return Xe.TEnumType; }, }); - Object.defineProperty(we, 'TEnumLiteral', { + Object.defineProperty(Se, 'TEnumLiteral', { enumerable: !0, get: function () { - return ze.TEnumLiteral; + return Xe.TEnumLiteral; }, }); - Object.defineProperty(we, 'TFunc', { + Object.defineProperty(Se, 'TFunc', { enumerable: !0, get: function () { - return ze.TFunc; + return Xe.TFunc; }, }); - Object.defineProperty(we, 'TIface', { + Object.defineProperty(Se, 'TIface', { enumerable: !0, get: function () { - return ze.TIface; + return Xe.TIface; }, }); - Object.defineProperty(we, 'TLiteral', { + Object.defineProperty(Se, 'TLiteral', { enumerable: !0, get: function () { - return ze.TLiteral; + return Xe.TLiteral; }, }); - Object.defineProperty(we, 'TName', { + Object.defineProperty(Se, 'TName', { enumerable: !0, get: function () { - return ze.TName; + return Xe.TName; }, }); - Object.defineProperty(we, 'TOptional', { + Object.defineProperty(Se, 'TOptional', { enumerable: !0, get: function () { - return ze.TOptional; + return Xe.TOptional; }, }); - Object.defineProperty(we, 'TParam', { + Object.defineProperty(Se, 'TParam', { enumerable: !0, get: function () { - return ze.TParam; + return Xe.TParam; }, }); - Object.defineProperty(we, 'TParamList', { + Object.defineProperty(Se, 'TParamList', { enumerable: !0, get: function () { - return ze.TParamList; + return Xe.TParamList; }, }); - Object.defineProperty(we, 'TProp', { + Object.defineProperty(Se, 'TProp', { enumerable: !0, get: function () { - return ze.TProp; + return Xe.TProp; }, }); - Object.defineProperty(we, 'TTuple', { + Object.defineProperty(Se, 'TTuple', { enumerable: !0, get: function () { - return ze.TTuple; + return Xe.TTuple; }, }); - Object.defineProperty(we, 'TType', { + Object.defineProperty(Se, 'TType', { enumerable: !0, get: function () { - return ze.TType; + return Xe.TType; }, }); - Object.defineProperty(we, 'TUnion', { + Object.defineProperty(Se, 'TUnion', { enumerable: !0, get: function () { - return ze.TUnion; + return Xe.TUnion; }, }); - Object.defineProperty(we, 'TIntersection', { + Object.defineProperty(Se, 'TIntersection', { enumerable: !0, get: function () { - return ze.TIntersection; + return Xe.TIntersection; }, }); - Object.defineProperty(we, 'array', { + Object.defineProperty(Se, 'array', { enumerable: !0, get: function () { - return ze.array; + return Xe.array; }, }); - Object.defineProperty(we, 'enumlit', { + Object.defineProperty(Se, 'enumlit', { enumerable: !0, get: function () { - return ze.enumlit; + return Xe.enumlit; }, }); - Object.defineProperty(we, 'enumtype', { + Object.defineProperty(Se, 'enumtype', { enumerable: !0, get: function () { - return ze.enumtype; + return Xe.enumtype; }, }); - Object.defineProperty(we, 'func', { + Object.defineProperty(Se, 'func', { enumerable: !0, get: function () { - return ze.func; + return Xe.func; }, }); - Object.defineProperty(we, 'iface', { + Object.defineProperty(Se, 'iface', { enumerable: !0, get: function () { - return ze.iface; + return Xe.iface; }, }); - Object.defineProperty(we, 'lit', { + Object.defineProperty(Se, 'lit', { enumerable: !0, get: function () { - return ze.lit; + return Xe.lit; }, }); - Object.defineProperty(we, 'name', { + Object.defineProperty(Se, 'name', { enumerable: !0, get: function () { - return ze.name; + return Xe.name; }, }); - Object.defineProperty(we, 'opt', { + Object.defineProperty(Se, 'opt', { enumerable: !0, get: function () { - return ze.opt; + return Xe.opt; }, }); - Object.defineProperty(we, 'param', { + Object.defineProperty(Se, 'param', { enumerable: !0, get: function () { - return ze.param; + return Xe.param; }, }); - Object.defineProperty(we, 'tuple', { + Object.defineProperty(Se, 'tuple', { enumerable: !0, get: function () { - return ze.tuple; + return Xe.tuple; }, }); - Object.defineProperty(we, 'union', { + Object.defineProperty(Se, 'union', { enumerable: !0, get: function () { - return ze.union; + return Xe.union; }, }); - Object.defineProperty(we, 'intersection', { + Object.defineProperty(Se, 'intersection', { enumerable: !0, get: function () { - return ze.intersection; + return Xe.intersection; }, }); - Object.defineProperty(we, 'BasicType', { + Object.defineProperty(Se, 'BasicType', { enumerable: !0, get: function () { - return ze.BasicType; + return Xe.BasicType; }, }); - var $y = oo(); - Object.defineProperty(we, 'VError', { + var ty = po(); + Object.defineProperty(Se, 'VError', { enumerable: !0, get: function () { - return $y.VError; + return ty.VError; }, }); - function qy() { + function ny() { for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t]; for ( - var s = Object.assign.apply(Object, jy([{}, zi.basicTypes], e)), + var s = Object.assign.apply(Object, ey([{}, 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]); + for (var u = a[r], d = 0, v = Object.keys(u); d < v.length; d++) { + var g = v[d]; + i[g] = new gp(s, u[g]); } return i; } - we.createCheckers = qy; - var cp = (function () { + Se.createCheckers = ny; + var gp = (function () { function e(t, s, i) { if ( (i === void 0 && (i = 'value'), @@ -17709,7 +17771,7 @@ If you need interactivity, consider converting part of this to a Client Componen (this.ttype = s), (this._path = i), (this.props = new Map()), - s instanceof zi.TIface) + s instanceof Zi.TIface) ) for (var r = 0, a = s.props; r < a.length; r++) { var u = a[r]; @@ -17726,7 +17788,7 @@ If you need interactivity, consider converting part of this to a Client Componen return this._doCheck(this.checkerPlain, t); }), (e.prototype.test = function (t) { - return this.checkerPlain(t, new pi.NoopContext()); + return this.checkerPlain(t, new fi.NoopContext()); }), (e.prototype.validate = function (t) { return this._doValidate(this.checkerPlain, t); @@ -17735,7 +17797,7 @@ If you need interactivity, consider converting part of this to a Client Componen return this._doCheck(this.checkerStrict, t); }), (e.prototype.strictTest = function (t) { - return this.checkerStrict(t, new pi.NoopContext()); + return this.checkerStrict(t, new fi.NoopContext()); }), (e.prototype.strictValidate = function (t) { return this._doValidate(this.checkerStrict, t); @@ -17754,12 +17816,12 @@ If you need interactivity, consider converting part of this to a Client Componen return new e(this.suite, s.result); }), (e.prototype.getArgs = function () { - if (!(this.ttype instanceof zi.TFunc)) + 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)) + if (!(this.ttype instanceof Zi.TFunc)) throw new Error('getResult() applied to non-function'); return new e(this.suite, this.ttype.result); }), @@ -17767,34 +17829,34 @@ If you need interactivity, consider converting part of this to a Client Componen return this.ttype; }), (e.prototype._doCheck = function (t, s) { - var i = new pi.NoopContext(); + var i = new fi.NoopContext(); if (!t(s, i)) { - var r = new pi.DetailContext(); + var r = new fi.DetailContext(); throw (t(s, r), r.getError(this._path)); } }), (e.prototype._doValidate = function (t, s) { - var i = new pi.NoopContext(); + var i = new fi.NoopContext(); if (t(s, i)) return null; - var r = new pi.DetailContext(); + var r = new fi.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)) + if (!(s instanceof Zi.TFunc)) throw new Error('Property ' + t + ' is not a method'); return s; }), e ); })(); - we.Checker = cp; + Se.Checker = gp; }); - var up = Z((Gn) => { + var _p = Z((Qn) => { 'use strict'; - Object.defineProperty(Gn, '__esModule', {value: !0}); - function Ky(e) { + Object.defineProperty(Qn, '__esModule', {value: !0}); + function sy(e) { if (e && e.__esModule) return e; var t = {}; if (e != null) @@ -17802,256 +17864,256 @@ If you need interactivity, consider converting part of this to a Client Componen 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') + var iy = dl(), + Ze = sy(iy), + ry = Ze.union( + Ze.lit('jsx'), + Ze.lit('typescript'), + Ze.lit('flow'), + Ze.lit('imports'), + Ze.lit('react-hot-loader'), + Ze.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')) + Qn.Transform = ry; + var oy = Ze.iface([], {compiledFilename: 'string'}); + Qn.SourceMapOptions = oy; + var ay = Ze.iface([], { + transforms: Ze.array('Transform'), + disableESTransforms: Ze.opt('boolean'), + jsxRuntime: Ze.opt( + Ze.union(Ze.lit('classic'), Ze.lit('automatic'), Ze.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'), + production: Ze.opt('boolean'), + jsxImportSource: Ze.opt('string'), + jsxPragma: Ze.opt('string'), + jsxFragmentPragma: Ze.opt('string'), + preserveDynamicImport: Ze.opt('boolean'), + injectCreateRequireForImportRequire: Ze.opt('boolean'), + enableLegacyTypeScriptModuleInterop: Ze.opt('boolean'), + enableLegacyBabel5ModuleInterop: Ze.opt('boolean'), + sourceMapOptions: Ze.opt('SourceMapOptions'), + filePath: Ze.opt('string'), }); - Gn.Options = Gy; - var zy = { - Transform: Gn.Transform, - SourceMapOptions: Gn.SourceMapOptions, - Options: Gn.Options, + Qn.Options = ay; + var ly = { + Transform: Qn.Transform, + SourceMapOptions: Qn.SourceMapOptions, + Options: Qn.Options, }; - Gn.default = zy; + Qn.default = ly; }); - var pp = Z((rl) => { + var bp = Z((ml) => { 'use strict'; - Object.defineProperty(rl, '__esModule', {value: !0}); - function Xy(e) { + Object.defineProperty(ml, '__esModule', {value: !0}); + function cy(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); + var uy = dl(), + py = _p(), + hy = cy(py), + {Options: fy} = uy.createCheckers.call(void 0, hy.default); + function dy(e) { + fy.strictCheck(e); } - rl.validateOptions = eT; + ml.validateOptions = dy; }); - var lo = Z((Nn) => { + var fo = Z((On) => { '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 = + Object.defineProperty(On, '__esModule', {value: !0}); + var my = nr(), + Cp = di(), + Mt = _t(), + er = Et(), + mn = Ce(), + bt = nn(), + tr = Os(), + Tl = fs(); + function Ty() { + Mt.next.call(void 0), tr.parseMaybeAssign.call(void 0, !1); + } + On.parseSpread = Ty; + function wp(e) { + Mt.next.call(void 0), kl(e); + } + On.parseRest = wp; + function Sp(e) { + tr.parseIdentifier.call(void 0), Ip(e); + } + On.parseBindingIdentifier = Sp; + function yy() { + tr.parseIdentifier.call(void 0), + (bt.state.tokens[bt.state.tokens.length - 1].identifierRole = Mt.IdentifierRole.ImportDeclaration); } - Nn.parseImportedIdentifier = sT; - function mp(e) { + On.parseImportedIdentifier = yy; + function Ip(e) { let t; - gt.state.scopeDepth === 0 + bt.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); + (bt.state.tokens[bt.state.tokens.length - 1].identifierRole = t); } - Nn.markPriorBindingIdentifier = mp; - function ll(e) { - switch (gt.state.type) { - case fn.TokenType._this: { + On.markPriorBindingIdentifier = Ip; + function kl(e) { + switch (bt.state.type) { + case mn.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); + case mn.TokenType._yield: + case mn.TokenType.name: { + (bt.state.type = mn.TokenType.name), Sp(e); return; } - case fn.TokenType.bracketL: { - Mt.next.call(void 0), yp(fn.TokenType.bracketR, e, !0); + case mn.TokenType.bracketL: { + Mt.next.call(void 0), Ep(mn.TokenType.bracketR, e, !0); return; } - case fn.TokenType.braceL: - Yi.parseObj.call(void 0, !0, e); + case mn.TokenType.braceL: + tr.parseObj.call(void 0, !0, e); return; default: - ol.unexpected.call(void 0); + Tl.unexpected.call(void 0); } } - Nn.parseBindingAtom = ll; - function yp(e, t, s = !1, i = !1, r = 0) { + On.parseBindingAtom = kl; + function Ep(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; ) + d = bt.state.tokens.length; + for (; !Mt.eat.call(void 0, e) && !bt.state.error; ) if ( (a ? (a = !1) - : (ol.expect.call(void 0, fn.TokenType.comma), - (gt.state.tokens[gt.state.tokens.length - 1].contextId = r), + : (Tl.expect.call(void 0, mn.TokenType.comma), + (bt.state.tokens[bt.state.tokens.length - 1].contextId = r), !u && - gt.state.tokens[d].isType && - ((gt.state.tokens[gt.state.tokens.length - 1].isType = !0), + bt.state.tokens[d].isType && + ((bt.state.tokens[bt.state.tokens.length - 1].isType = !0), (u = !0))), - !(s && Mt.match.call(void 0, fn.TokenType.comma))) + !(s && Mt.match.call(void 0, mn.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); + if (Mt.match.call(void 0, mn.TokenType.ellipsis)) { + wp(t), + Ap(), + Mt.eat.call(void 0, mn.TokenType.comma), + Tl.expect.call(void 0, e); break; - } else iT(i, t); + } else ky(i, t); } } - Nn.parseBindingList = yp; - function iT(e, t) { + On.parseBindingList = Ep; + function ky(e, t) { e && - hp.tsParseModifiers.call(void 0, [ - Xi.ContextualKeyword._public, - Xi.ContextualKeyword._protected, - Xi.ContextualKeyword._private, - Xi.ContextualKeyword._readonly, - Xi.ContextualKeyword._override, + Cp.tsParseModifiers.call(void 0, [ + er.ContextualKeyword._public, + er.ContextualKeyword._protected, + er.ContextualKeyword._private, + er.ContextualKeyword._readonly, + er.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; + yl(t), + Ap(), + yl(t, !0); + } + function Ap() { + bt.isFlowEnabled + ? my.flowParseAssignableListItemTypes.call(void 0) + : bt.isTypeScriptEnabled && + Cp.tsParseAssignableListItemTypes.call(void 0); + } + function yl(e, t = !1) { + if ((t || kl(e), !Mt.eat.call(void 0, mn.TokenType.eq))) return; + let s = bt.state.tokens.length - 1; + tr.parseMaybeAssign.call(void 0), + (bt.state.tokens[s].rhsEndIndex = bt.state.tokens.length); + } + On.parseMaybeDefault = yl; }); - var hi = Z((Oe) => { + var di = Z((De) => { '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() { + Object.defineProperty(De, '__esModule', {value: !0}); + var k = _t(), + oe = Et(), + y = Ce(), + I = nn(), + be = Os(), + Ti = fo(), + Dn = ar(), + H = fs(), + vy = Al(); + function xl() { + return k.match.call(void 0, y.TokenType.name); + } + function xy() { 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) + k.match.call(void 0, y.TokenType.name) || + !!(I.state.type & y.TokenType.IS_KEYWORD) || + k.match.call(void 0, y.TokenType.string) || + k.match.call(void 0, y.TokenType.num) || + k.match.call(void 0, y.TokenType.bigint) || + k.match.call(void 0, y.TokenType.decimal) ); } - function _p() { + function Op() { 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()) && + k.next.call(void 0), + (k.match.call(void 0, y.TokenType.bracketL) || + k.match.call(void 0, y.TokenType.braceL) || + k.match.call(void 0, y.TokenType.star) || + k.match.call(void 0, y.TokenType.ellipsis) || + k.match.call(void 0, y.TokenType.hash) || + xy()) && !H.hasPrecedingLineBreak.call(void 0) ? !0 : (I.state.restoreFromSnapshot(e), !1) ); } - function bp(e) { - for (; dl(e) !== null; ); + function Dp(e) { + for (; Cl(e) !== null; ); } - Oe.tsParseModifiers = bp; - function dl(e) { - if (!v.match.call(void 0, k.TokenType.name)) return null; + De.tsParseModifiers = Dp; + function Cl(e) { + if (!k.match.call(void 0, y.TokenType.name)) return null; let t = I.state.contextualKeyword; - if (e.indexOf(t) !== -1 && _p()) { + if (e.indexOf(t) !== -1 && Op()) { switch (t) { case oe.ContextualKeyword._readonly: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._readonly; + y.TokenType._readonly; break; case oe.ContextualKeyword._abstract: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._abstract; + y.TokenType._abstract; break; case oe.ContextualKeyword._static: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._static; + y.TokenType._static; break; case oe.ContextualKeyword._public: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._public; + y.TokenType._public; break; case oe.ContextualKeyword._private: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._private; + y.TokenType._private; break; case oe.ContextualKeyword._protected: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._protected; + y.TokenType._protected; break; case oe.ContextualKeyword._override: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._override; + y.TokenType._override; break; case oe.ContextualKeyword._declare: I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._declare; + y.TokenType._declare; break; default: break; @@ -18060,652 +18122,652 @@ If you need interactivity, consider converting part of this to a Client Componen } return null; } - Oe.tsParseModifier = dl; - function Zi() { + De.tsParseModifier = Cl; + function ir() { for ( - _e.parseIdentifier.call(void 0); - v.eat.call(void 0, k.TokenType.dot); + be.parseIdentifier.call(void 0); + k.eat.call(void 0, y.TokenType.dot); ) - _e.parseIdentifier.call(void 0); + be.parseIdentifier.call(void 0); } - function aT() { - Zi(), + function gy() { + ir(), !H.hasPrecedingLineBreak.call(void 0) && - v.match.call(void 0, k.TokenType.lessThan) && - yi(); + k.match.call(void 0, y.TokenType.lessThan) && + ki(); } - function lT() { - v.next.call(void 0), tr(); + function _y() { + k.next.call(void 0), or(); } - function cT() { - v.next.call(void 0); + function by() { + k.next.call(void 0); } - function uT() { - H.expect.call(void 0, k.TokenType._typeof), - v.match.call(void 0, k.TokenType._import) ? Cp() : Zi(), + function Cy() { + H.expect.call(void 0, y.TokenType._typeof), + k.match.call(void 0, y.TokenType._import) ? Mp() : ir(), !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), + k.match.call(void 0, y.TokenType.lessThan) && + ki(); + } + function Mp() { + H.expect.call(void 0, y.TokenType._import), + H.expect.call(void 0, y.TokenType.parenL), + H.expect.call(void 0, y.TokenType.string), + H.expect.call(void 0, y.TokenType.parenR), + k.eat.call(void 0, y.TokenType.dot) && ir(), + k.match.call(void 0, y.TokenType.lessThan) && ki(); + } + function wy() { + k.eat.call(void 0, y.TokenType._const); + let e = k.eat.call(void 0, y.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); + k.eat.call(void 0, y.TokenType._const), + (e || t) && !k.match.call(void 0, y.TokenType.name) + ? (I.state.tokens[I.state.tokens.length - 1].type = y.TokenType.name) + : be.parseIdentifier.call(void 0), + k.eat.call(void 0, y.TokenType._extends) && ot(), + k.eat.call(void 0, y.TokenType.eq) && ot(); + } + function yi() { + k.match.call(void 0, y.TokenType.lessThan) && To(); + } + De.tsTryParseTypeParameters = yi; + function To() { + let e = k.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) + k.match.call(void 0, y.TokenType.lessThan) || + k.match.call(void 0, y.TokenType.typeParameterStart) + ? k.next.call(void 0) : H.unexpected.call(void 0); - !v.eat.call(void 0, k.TokenType.greaterThan) && !I.state.error; + !k.eat.call(void 0, y.TokenType.greaterThan) && !I.state.error; ) - pT(), v.eat.call(void 0, k.TokenType.comma); - v.popTypeContext.call(void 0, e); + wy(), k.eat.call(void 0, y.TokenType.comma); + k.popTypeContext.call(void 0, e); } - function ml(e) { - let t = e === k.TokenType.arrow; - mi(), - H.expect.call(void 0, k.TokenType.parenL), + function wl(e) { + let t = e === y.TokenType.arrow; + yi(), + H.expect.call(void 0, y.TokenType.parenL), I.state.scopeDepth++, - hT(!1), + Sy(!1), I.state.scopeDepth--, - (t || v.match.call(void 0, e)) && Qi(e); + (t || k.match.call(void 0, e)) && sr(e); } - function hT(e) { - di.parseBindingList.call(void 0, k.TokenType.parenR, e); + function Sy(e) { + Ti.parseBindingList.call(void 0, y.TokenType.parenR, e); } - function co() { - v.eat.call(void 0, k.TokenType.comma) || H.semicolon.call(void 0); + function mo() { + k.eat.call(void 0, y.TokenType.comma) || H.semicolon.call(void 0); } - function kp() { - ml(k.TokenType.colon), co(); + function Pp() { + wl(y.TokenType.colon), mo(); } - function fT() { + function Iy() { let e = I.state.snapshot(); - v.next.call(void 0); + k.next.call(void 0); let t = - v.eat.call(void 0, k.TokenType.name) && - v.match.call(void 0, k.TokenType.colon); + k.eat.call(void 0, y.TokenType.name) && + k.match.call(void 0, y.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); + function Fp() { + if (!(k.match.call(void 0, y.TokenType.bracketL) && Iy())) return !1; + let e = k.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), + H.expect.call(void 0, y.TokenType.bracketL), + be.parseIdentifier.call(void 0), + or(), + H.expect.call(void 0, y.TokenType.bracketR), + rr(), + mo(), + k.popTypeContext.call(void 0, e), !0 ); } - function vp(e) { - v.eat.call(void 0, k.TokenType.question), + function Np(e) { + k.eat.call(void 0, y.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()); + (k.match.call(void 0, y.TokenType.parenL) || + k.match.call(void 0, y.TokenType.lessThan)) + ? (wl(y.TokenType.colon), mo()) + : (rr(), mo()); } - function dT() { + function Ey() { if ( - v.match.call(void 0, k.TokenType.parenL) || - v.match.call(void 0, k.TokenType.lessThan) + k.match.call(void 0, y.TokenType.parenL) || + k.match.call(void 0, y.TokenType.lessThan) ) { - kp(); + Pp(); 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); + if (k.match.call(void 0, y.TokenType._new)) { + k.next.call(void 0), + k.match.call(void 0, y.TokenType.parenL) || + k.match.call(void 0, y.TokenType.lessThan) + ? Pp() + : Np(!1); return; } - let e = !!dl([oe.ContextualKeyword._readonly]); - wp() || + let e = !!Cl([oe.ContextualKeyword._readonly]); + Fp() || ((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)); + Op(), + be.parsePropertyName.call(void 0, -1), + Np(e)); } - function mT() { - Sp(); + function Ay() { + Bp(); } - function Sp() { + function Bp() { for ( - H.expect.call(void 0, k.TokenType.braceL); - !v.eat.call(void 0, k.TokenType.braceR) && !I.state.error; + H.expect.call(void 0, y.TokenType.braceL); + !k.eat.call(void 0, y.TokenType.braceR) && !I.state.error; ) - dT(); + Ey(); } - function yT() { + function Py() { let e = I.state.snapshot(), - t = TT(); + t = Ny(); return I.state.restoreFromSnapshot(e), t; } - function TT() { + function Ny() { return ( - v.next.call(void 0), - v.eat.call(void 0, k.TokenType.plus) || - v.eat.call(void 0, k.TokenType.minus) + k.next.call(void 0), + k.eat.call(void 0, y.TokenType.plus) || + k.eat.call(void 0, y.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()) + k.next.call(void 0), + !k.match.call(void 0, y.TokenType.bracketL) || + (k.next.call(void 0), !xl()) ? !1 - : (v.next.call(void 0), v.match.call(void 0, k.TokenType._in))) + : (k.next.call(void 0), k.match.call(void 0, y.TokenType._in))) ); } - function kT() { - _e.parseIdentifier.call(void 0), - H.expect.call(void 0, k.TokenType._in), - rt(); + function Ry() { + be.parseIdentifier.call(void 0), + H.expect.call(void 0, y.TokenType._in), + ot(); } - 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), + function Ly() { + H.expect.call(void 0, y.TokenType.braceL), + k.match.call(void 0, y.TokenType.plus) || + k.match.call(void 0, y.TokenType.minus) + ? (k.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.expect.call(void 0, y.TokenType.bracketL), + Ry(), + H.eatContextual.call(void 0, oe.ContextualKeyword._as) && ot(), + H.expect.call(void 0, y.TokenType.bracketR), + k.match.call(void 0, y.TokenType.plus) || + k.match.call(void 0, y.TokenType.minus) + ? (k.next.call(void 0), H.expect.call(void 0, y.TokenType.question)) + : k.eat.call(void 0, y.TokenType.question), + Gy(), H.semicolon.call(void 0), - H.expect.call(void 0, k.TokenType.braceR); + H.expect.call(void 0, y.TokenType.braceR); } - function xT() { + function Oy() { for ( - H.expect.call(void 0, k.TokenType.bracketL); - !v.eat.call(void 0, k.TokenType.bracketR) && !I.state.error; + H.expect.call(void 0, y.TokenType.bracketL); + !k.eat.call(void 0, y.TokenType.bracketR) && !I.state.error; ) - gT(), v.eat.call(void 0, k.TokenType.comma); + Dy(), k.eat.call(void 0, y.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 Dy() { + k.eat.call(void 0, y.TokenType.ellipsis) + ? ot() + : (ot(), k.eat.call(void 0, y.TokenType.question)), + k.eat.call(void 0, y.TokenType.colon) && ot(); } - function _T() { - H.expect.call(void 0, k.TokenType.parenL), - rt(), - H.expect.call(void 0, k.TokenType.parenR); + function My() { + H.expect.call(void 0, y.TokenType.parenL), + ot(), + H.expect.call(void 0, y.TokenType.parenR); } - function bT() { + function Fy() { for ( - v.nextTemplateToken.call(void 0), v.nextTemplateToken.call(void 0); - !v.match.call(void 0, k.TokenType.backQuote) && !I.state.error; + k.nextTemplateToken.call(void 0), k.nextTemplateToken.call(void 0); + !k.match.call(void 0, y.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); + H.expect.call(void 0, y.TokenType.dollarBraceL), + ot(), + k.nextTemplateToken.call(void 0), + k.nextTemplateToken.call(void 0); + k.next.call(void 0); } - var hs; + var Ts; (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 && + })(Ts || (Ts = {})); + function vl(e) { + e === Ts.TSAbstractConstructorType && H.expectContextual.call(void 0, oe.ContextualKeyword._abstract), - (e === hs.TSConstructorType || e === hs.TSAbstractConstructorType) && - H.expect.call(void 0, k.TokenType._new); + (e === Ts.TSConstructorType || e === Ts.TSAbstractConstructorType) && + H.expect.call(void 0, y.TokenType._new); let t = I.state.inDisallowConditionalTypesContext; (I.state.inDisallowConditionalTypesContext = !1), - ml(k.TokenType.arrow), + wl(y.TokenType.arrow), (I.state.inDisallowConditionalTypesContext = t); } - function CT() { + function By() { switch (I.state.type) { - case k.TokenType.name: - aT(); + case y.TokenType.name: + gy(); return; - case k.TokenType._void: - case k.TokenType._null: - v.next.call(void 0); + case y.TokenType._void: + case y.TokenType._null: + k.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); + case y.TokenType.string: + case y.TokenType.num: + case y.TokenType.bigint: + case y.TokenType.decimal: + case y.TokenType._true: + case y.TokenType._false: + be.parseLiteral.call(void 0); return; - case k.TokenType.minus: - v.next.call(void 0), _e.parseLiteral.call(void 0); + case y.TokenType.minus: + k.next.call(void 0), be.parseLiteral.call(void 0); return; - case k.TokenType._this: { - cT(), + case y.TokenType._this: { + by(), H.isContextual.call(void 0, oe.ContextualKeyword._is) && !H.hasPrecedingLineBreak.call(void 0) && - lT(); + _y(); return; } - case k.TokenType._typeof: - uT(); + case y.TokenType._typeof: + Cy(); return; - case k.TokenType._import: - Cp(); + case y.TokenType._import: + Mp(); return; - case k.TokenType.braceL: - yT() ? vT() : mT(); + case y.TokenType.braceL: + Py() ? Ly() : Ay(); return; - case k.TokenType.bracketL: - xT(); + case y.TokenType.bracketL: + Oy(); return; - case k.TokenType.parenL: - _T(); + case y.TokenType.parenL: + My(); return; - case k.TokenType.backQuote: - bT(); + case y.TokenType.backQuote: + Fy(); return; default: - if (I.state.type & k.TokenType.IS_KEYWORD) { - v.next.call(void 0), + if (I.state.type & y.TokenType.IS_KEYWORD) { + k.next.call(void 0), (I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType.name); + y.TokenType.name); return; } break; } H.unexpected.call(void 0); } - function wT() { + function Vy() { for ( - CT(); + By(); !H.hasPrecedingLineBreak.call(void 0) && - v.eat.call(void 0, k.TokenType.bracketL); + k.eat.call(void 0, y.TokenType.bracketL); ) - v.eat.call(void 0, k.TokenType.bracketR) || - (rt(), H.expect.call(void 0, k.TokenType.bracketR)); + k.eat.call(void 0, y.TokenType.bracketR) || + (ot(), H.expect.call(void 0, y.TokenType.bracketR)); } - function ST() { + function jy() { if ( (H.expectContextual.call(void 0, oe.ContextualKeyword._infer), - _e.parseIdentifier.call(void 0), - v.match.call(void 0, k.TokenType._extends)) + be.parseIdentifier.call(void 0), + k.match.call(void 0, y.TokenType._extends)) ) { let e = I.state.snapshot(); - H.expect.call(void 0, k.TokenType._extends); + H.expect.call(void 0, y.TokenType._extends); let t = I.state.inDisallowConditionalTypesContext; (I.state.inDisallowConditionalTypesContext = !0), - rt(), + ot(), (I.state.inDisallowConditionalTypesContext = t), (I.state.error || (!I.state.inDisallowConditionalTypesContext && - v.match.call(void 0, k.TokenType.question))) && + k.match.call(void 0, y.TokenType.question))) && I.state.restoreFromSnapshot(e); } } - function pl() { + function gl() { 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(); + k.next.call(void 0), gl(); + else if (H.isContextual.call(void 0, oe.ContextualKeyword._infer)) jy(); else { let e = I.state.inDisallowConditionalTypesContext; (I.state.inDisallowConditionalTypesContext = !1), - wT(), + Vy(), (I.state.inDisallowConditionalTypesContext = e); } } - function xp() { + function Rp() { if ( - (v.eat.call(void 0, k.TokenType.bitwiseAND), - pl(), - v.match.call(void 0, k.TokenType.bitwiseAND)) + (k.eat.call(void 0, y.TokenType.bitwiseAND), + gl(), + k.match.call(void 0, y.TokenType.bitwiseAND)) ) - for (; v.eat.call(void 0, k.TokenType.bitwiseAND); ) pl(); + for (; k.eat.call(void 0, y.TokenType.bitwiseAND); ) gl(); } - function IT() { + function $y() { if ( - (v.eat.call(void 0, k.TokenType.bitwiseOR), - xp(), - v.match.call(void 0, k.TokenType.bitwiseOR)) + (k.eat.call(void 0, y.TokenType.bitwiseOR), + Rp(), + k.match.call(void 0, y.TokenType.bitwiseOR)) ) - for (; v.eat.call(void 0, k.TokenType.bitwiseOR); ) xp(); + for (; k.eat.call(void 0, y.TokenType.bitwiseOR); ) Rp(); } - function ET() { - return v.match.call(void 0, k.TokenType.lessThan) + function Ky() { + return k.match.call(void 0, y.TokenType.lessThan) ? !0 - : v.match.call(void 0, k.TokenType.parenL) && PT(); + : k.match.call(void 0, y.TokenType.parenL) && Uy(); } - function AT() { + function qy() { if ( - v.match.call(void 0, k.TokenType.name) || - v.match.call(void 0, k.TokenType._this) + k.match.call(void 0, y.TokenType.name) || + k.match.call(void 0, y.TokenType._this) ) - return v.next.call(void 0), !0; + return k.next.call(void 0), !0; if ( - v.match.call(void 0, k.TokenType.braceL) || - v.match.call(void 0, k.TokenType.bracketL) + k.match.call(void 0, y.TokenType.braceL) || + k.match.call(void 0, y.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) + for (k.next.call(void 0); e > 0 && !I.state.error; ) + k.match.call(void 0, y.TokenType.braceL) || + k.match.call(void 0, y.TokenType.bracketL) ? e++ - : (v.match.call(void 0, k.TokenType.braceR) || - v.match.call(void 0, k.TokenType.bracketR)) && + : (k.match.call(void 0, y.TokenType.braceR) || + k.match.call(void 0, y.TokenType.bracketR)) && e--, - v.next.call(void 0); + k.next.call(void 0); return !0; } return !1; } - function PT() { + function Uy() { let e = I.state.snapshot(), - t = NT(); + t = Hy(); return I.state.restoreFromSnapshot(e), t; } - function NT() { + function Hy() { return ( - v.next.call(void 0), + k.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))))) + k.match.call(void 0, y.TokenType.parenR) || + k.match.call(void 0, y.TokenType.ellipsis) || + (qy() && + (k.match.call(void 0, y.TokenType.colon) || + k.match.call(void 0, y.TokenType.comma) || + k.match.call(void 0, y.TokenType.question) || + k.match.call(void 0, y.TokenType.eq) || + (k.match.call(void 0, y.TokenType.parenR) && + (k.next.call(void 0), + k.match.call(void 0, y.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 sr(e) { + let t = k.pushTypeContext.call(void 0, 0); + H.expect.call(void 0, e), zy() || ot(), k.popTypeContext.call(void 0, t); } - function RT() { - v.match.call(void 0, k.TokenType.colon) && Qi(k.TokenType.colon); + function Wy() { + k.match.call(void 0, y.TokenType.colon) && sr(y.TokenType.colon); } - function er() { - v.match.call(void 0, k.TokenType.colon) && tr(); + function rr() { + k.match.call(void 0, y.TokenType.colon) && or(); } - Oe.tsTryParseTypeAnnotation = er; - function LT() { - v.eat.call(void 0, k.TokenType.colon) && rt(); + De.tsTryParseTypeAnnotation = rr; + function Gy() { + k.eat.call(void 0, y.TokenType.colon) && ot(); } - function OT() { + function zy() { let e = I.state.snapshot(); return H.isContextual.call(void 0, oe.ContextualKeyword._asserts) - ? (v.next.call(void 0), + ? (k.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(), + ? (ot(), !0) + : xl() || k.match.call(void 0, y.TokenType._this) + ? (k.next.call(void 0), + H.eatContextual.call(void 0, oe.ContextualKeyword._is) && ot(), !0) : (I.state.restoreFromSnapshot(e), !1)) - : ul() || v.match.call(void 0, k.TokenType._this) - ? (v.next.call(void 0), + : xl() || k.match.call(void 0, y.TokenType._this) + ? (k.next.call(void 0), H.isContextual.call(void 0, oe.ContextualKeyword._is) && !H.hasPrecedingLineBreak.call(void 0) - ? (v.next.call(void 0), rt(), !0) + ? (k.next.call(void 0), ot(), !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); + function or() { + let e = k.pushTypeContext.call(void 0, 0); + H.expect.call(void 0, y.TokenType.colon), + ot(), + k.popTypeContext.call(void 0, e); } - Oe.tsParseTypeAnnotation = tr; - function rt() { + De.tsParseTypeAnnotation = or; + function ot() { if ( - (hl(), + (_l(), I.state.inDisallowConditionalTypesContext || H.hasPrecedingLineBreak.call(void 0) || - !v.eat.call(void 0, k.TokenType._extends)) + !k.eat.call(void 0, y.TokenType._extends)) ) return; let e = I.state.inDisallowConditionalTypesContext; (I.state.inDisallowConditionalTypesContext = !0), - hl(), + _l(), (I.state.inDisallowConditionalTypesContext = e), - H.expect.call(void 0, k.TokenType.question), - rt(), - H.expect.call(void 0, k.TokenType.colon), - rt(); + H.expect.call(void 0, y.TokenType.question), + ot(), + H.expect.call(void 0, y.TokenType.colon), + ot(); } - Oe.tsParseType = rt; - function DT() { + De.tsParseType = ot; + function Xy() { return ( H.isContextual.call(void 0, oe.ContextualKeyword._abstract) && - v.lookaheadType.call(void 0) === k.TokenType._new + k.lookaheadType.call(void 0) === y.TokenType._new ); } - function hl() { - if (ET()) { - cl(hs.TSFunctionType); + function _l() { + if (Ky()) { + vl(Ts.TSFunctionType); return; } - if (v.match.call(void 0, k.TokenType._new)) { - cl(hs.TSConstructorType); + if (k.match.call(void 0, y.TokenType._new)) { + vl(Ts.TSConstructorType); return; - } else if (DT()) { - cl(hs.TSAbstractConstructorType); + } else if (Xy()) { + vl(Ts.TSAbstractConstructorType); return; } - IT(); + $y(); } - 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); + De.tsParseNonConditionalType = _l; + function Yy() { + let e = k.pushTypeContext.call(void 0, 1); + ot(), + H.expect.call(void 0, y.TokenType.greaterThan), + k.popTypeContext.call(void 0, e), + be.parseMaybeUnary.call(void 0); } - Oe.tsParseTypeAssertion = MT; - function FT() { - if (v.eat.call(void 0, k.TokenType.jsxTagStart)) { + De.tsParseTypeAssertion = Yy; + function Jy() { + if (k.eat.call(void 0, y.TokenType.jsxTagStart)) { I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType.typeParameterStart; - let e = v.pushTypeContext.call(void 0, 1); + y.TokenType.typeParameterStart; + let e = k.pushTypeContext.call(void 0, 1); for ( ; - !v.match.call(void 0, k.TokenType.greaterThan) && !I.state.error; + !k.match.call(void 0, y.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); + ot(), k.eat.call(void 0, y.TokenType.comma); + vy.nextJSXTagToken.call(void 0), k.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); + De.tsTryParseJSXTypeArgument = Jy; + function Vp() { + for (; !k.match.call(void 0, y.TokenType.braceL) && !I.state.error; ) + Qy(), k.eat.call(void 0, y.TokenType.comma); } - function BT() { - Zi(), v.match.call(void 0, k.TokenType.lessThan) && yi(); + function Qy() { + ir(), k.match.call(void 0, y.TokenType.lessThan) && ki(); } - function VT() { - di.parseBindingIdentifier.call(void 0, !1), - mi(), - v.eat.call(void 0, k.TokenType._extends) && Ip(), - Sp(); + function Zy() { + Ti.parseBindingIdentifier.call(void 0, !1), + yi(), + k.eat.call(void 0, y.TokenType._extends) && Vp(), + Bp(); } - function jT() { - di.parseBindingIdentifier.call(void 0, !1), - mi(), - H.expect.call(void 0, k.TokenType.eq), - rt(), + function ek() { + Ti.parseBindingIdentifier.call(void 0, !1), + yi(), + H.expect.call(void 0, y.TokenType.eq), + ot(), H.semicolon.call(void 0); } - function $T() { + function tk() { 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)) + (k.match.call(void 0, y.TokenType.string) + ? be.parseLiteral.call(void 0) + : be.parseIdentifier.call(void 0), + k.eat.call(void 0, y.TokenType.eq)) ) { let e = I.state.tokens.length - 1; - _e.parseMaybeAssign.call(void 0), + be.parseMaybeAssign.call(void 0), (I.state.tokens[e].rhsEndIndex = I.state.tokens.length); } } - function yl() { + function Sl() { 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; + Ti.parseBindingIdentifier.call(void 0, !1), + H.expect.call(void 0, y.TokenType.braceL); + !k.eat.call(void 0, y.TokenType.braceR) && !I.state.error; ) - $T(), v.eat.call(void 0, k.TokenType.comma); + tk(), k.eat.call(void 0, y.TokenType.comma); } - function Tl() { - H.expect.call(void 0, k.TokenType.braceL), - Rn.parseBlockBody.call(void 0, k.TokenType.braceR); + function Il() { + H.expect.call(void 0, y.TokenType.braceL), + Dn.parseBlockBody.call(void 0, y.TokenType.braceR); } - function fl() { - di.parseBindingIdentifier.call(void 0, !1), - v.eat.call(void 0, k.TokenType.dot) ? fl() : Tl(); + function bl() { + Ti.parseBindingIdentifier.call(void 0, !1), + k.eat.call(void 0, y.TokenType.dot) ? bl() : Il(); } - function Ep() { + function jp() { 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) + ? be.parseIdentifier.call(void 0) + : k.match.call(void 0, y.TokenType.string) + ? be.parseExprAtom.call(void 0) : H.unexpected.call(void 0), - v.match.call(void 0, k.TokenType.braceL) - ? Tl() + k.match.call(void 0, y.TokenType.braceL) + ? Il() : H.semicolon.call(void 0); } - function Ap() { - di.parseImportedIdentifier.call(void 0), - H.expect.call(void 0, k.TokenType.eq), - KT(), + function $p() { + Ti.parseImportedIdentifier.call(void 0), + H.expect.call(void 0, y.TokenType.eq), + sk(), H.semicolon.call(void 0); } - Oe.tsParseImportEqualsDeclaration = Ap; - function qT() { + De.tsParseImportEqualsDeclaration = $p; + function nk() { return ( H.isContextual.call(void 0, oe.ContextualKeyword._require) && - v.lookaheadType.call(void 0) === k.TokenType.parenL + k.lookaheadType.call(void 0) === y.TokenType.parenL ); } - function KT() { - qT() ? UT() : Zi(); + function sk() { + nk() ? ik() : ir(); } - function UT() { + function ik() { 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); + H.expect.call(void 0, y.TokenType.parenL), + k.match.call(void 0, y.TokenType.string) || H.unexpected.call(void 0), + be.parseLiteral.call(void 0), + H.expect.call(void 0, y.TokenType.parenR); } - function HT() { + function rk() { 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); + case y.TokenType._function: { + let e = k.pushTypeContext.call(void 0, 1); + k.next.call(void 0); let t = I.state.start; return ( - Rn.parseFunction.call(void 0, t, !0), - v.popTypeContext.call(void 0, e), + Dn.parseFunction.call(void 0, t, !0), + k.popTypeContext.call(void 0, e), !0 ); } - case k.TokenType._class: { - let e = v.pushTypeContext.call(void 0, 1); + case y.TokenType._class: { + let e = k.pushTypeContext.call(void 0, 1); return ( - Rn.parseClass.call(void 0, !0, !1), - v.popTypeContext.call(void 0, e), + Dn.parseClass.call(void 0, !0, !1), + k.popTypeContext.call(void 0, e), !0 ); } - case k.TokenType._const: + case y.TokenType._const: if ( - v.match.call(void 0, k.TokenType._const) && + k.match.call(void 0, y.TokenType._const) && H.isLookaheadContextual.call(void 0, oe.ContextualKeyword._enum) ) { - let e = v.pushTypeContext.call(void 0, 1); + let e = k.pushTypeContext.call(void 0, 1); return ( - H.expect.call(void 0, k.TokenType._const), + H.expect.call(void 0, y.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), + y.TokenType._enum), + Sl(), + k.popTypeContext.call(void 0, e), !0 ); } - case k.TokenType._var: - case k.TokenType._let: { - let e = v.pushTypeContext.call(void 0, 1); + case y.TokenType._var: + case y.TokenType._let: { + let e = k.pushTypeContext.call(void 0, 1); return ( - Rn.parseVarStatement.call( + Dn.parseVarStatement.call( void 0, - I.state.type !== k.TokenType._var + I.state.type !== y.TokenType._var ), - v.popTypeContext.call(void 0, e), + k.popTypeContext.call(void 0, e), !0 ); } - case k.TokenType.name: { - let e = v.pushTypeContext.call(void 0, 1), + case y.TokenType.name: { + let e = k.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), + ? (jp(), (s = !0)) + : (s = yo(t, !0)), + k.popTypeContext.call(void 0, e), s ); } @@ -18713,71 +18775,71 @@ If you need interactivity, consider converting part of this to a Client Componen return !1; } } - function gp() { - return po(I.state.contextualKeyword, !0); + function Lp() { + return yo(I.state.contextualKeyword, !0); } - function WT(e) { + function ok(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; + if (rk()) return (I.state.tokens[t].type = y.TokenType._declare), !0; break; } case oe.ContextualKeyword._global: - if (v.match.call(void 0, k.TokenType.braceL)) return Tl(), !0; + if (k.match.call(void 0, y.TokenType.braceL)) return Il(), !0; break; default: - return po(e, !1); + return yo(e, !1); } return !1; } - function po(e, t) { + function yo(e, t) { switch (e) { case oe.ContextualKeyword._abstract: - if (fi(t) && v.match.call(void 0, k.TokenType._class)) + if (mi(t) && k.match.call(void 0, y.TokenType._class)) return ( (I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._abstract), - Rn.parseClass.call(void 0, !0, !1), + y.TokenType._abstract), + Dn.parseClass.call(void 0, !0, !1), !0 ); break; case oe.ContextualKeyword._enum: - if (fi(t) && v.match.call(void 0, k.TokenType.name)) + if (mi(t) && k.match.call(void 0, y.TokenType.name)) return ( (I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._enum), - yl(), + y.TokenType._enum), + Sl(), !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; + if (mi(t) && k.match.call(void 0, y.TokenType.name)) { + let s = k.pushTypeContext.call(void 0, t ? 2 : 1); + return Zy(), k.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; + if (mi(t)) { + if (k.match.call(void 0, y.TokenType.string)) { + let s = k.pushTypeContext.call(void 0, t ? 2 : 1); + return jp(), k.popTypeContext.call(void 0, s), !0; + } else if (k.match.call(void 0, y.TokenType.name)) { + let s = k.pushTypeContext.call(void 0, t ? 2 : 1); + return bl(), k.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; + if (mi(t) && k.match.call(void 0, y.TokenType.name)) { + let s = k.pushTypeContext.call(void 0, t ? 2 : 1); + return bl(), k.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; + if (mi(t) && k.match.call(void 0, y.TokenType.name)) { + let s = k.pushTypeContext.call(void 0, t ? 2 : 1); + return ek(), k.popTypeContext.call(void 0, s), !0; } break; default: @@ -18785,38 +18847,38 @@ If you need interactivity, consider converting part of this to a Client Componen } return !1; } - function fi(e) { - return e ? (v.next.call(void 0), !0) : !H.isLineTerminator.call(void 0); + function mi(e) { + return e ? (k.next.call(void 0), !0) : !H.isLineTerminator.call(void 0); } - function GT() { + function ak() { let e = I.state.snapshot(); return ( - uo(), - Rn.parseFunctionParams.call(void 0), - RT(), - H.expect.call(void 0, k.TokenType.arrow), + To(), + Dn.parseFunctionParams.call(void 0), + Wy(), + H.expect.call(void 0, y.TokenType.arrow), I.state.error ? (I.state.restoreFromSnapshot(e), !1) - : (_e.parseFunctionBody.call(void 0, !0), !0) + : (be.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 El() { + I.state.type === y.TokenType.bitShiftL && + ((I.state.pos -= 1), k.finishToken.call(void 0, y.TokenType.lessThan)), + ki(); } - function yi() { - let e = v.pushTypeContext.call(void 0, 0); + function ki() { + let e = k.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; + H.expect.call(void 0, y.TokenType.lessThan); + !k.eat.call(void 0, y.TokenType.greaterThan) && !I.state.error; ) - rt(), v.eat.call(void 0, k.TokenType.comma); - v.popTypeContext.call(void 0, e); + ot(), k.eat.call(void 0, y.TokenType.comma); + k.popTypeContext.call(void 0, e); } - function zT() { - if (v.match.call(void 0, k.TokenType.name)) + function lk() { + if (k.match.call(void 0, y.TokenType.name)) switch (I.state.contextualKeyword) { case oe.ContextualKeyword._abstract: case oe.ContextualKeyword._declare: @@ -18831,11 +18893,11 @@ If you need interactivity, consider converting part of this to a Client Componen } return !1; } - Oe.tsIsDeclarationStart = zT; - function XT(e, t) { + De.tsIsDeclarationStart = lk; + function ck(e, t) { if ( - (v.match.call(void 0, k.TokenType.colon) && Qi(k.TokenType.colon), - !v.match.call(void 0, k.TokenType.braceL) && + (k.match.call(void 0, y.TokenType.colon) && sr(y.TokenType.colon), + !k.match.call(void 0, y.TokenType.braceL) && H.isLineTerminator.call(void 0)) ) { let s = I.state.tokens.length - 1; @@ -18843,42 +18905,42 @@ If you need interactivity, consider converting part of this to a Client Componen ; 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].type === y.TokenType._default || + I.state.tokens[s].type === y.TokenType._export); ) (I.state.tokens[s].isType = !0), s--; return; } - _e.parseFunctionBody.call(void 0, !1, t); + be.parseFunctionBody.call(void 0, !1, t); } - Oe.tsParseFunctionBodyAndFinish = XT; - function YT(e, t, s) { + De.tsParseFunctionBodyAndFinish = ck; + function uk(e, t, s) { if ( !H.hasPrecedingLineBreak.call(void 0) && - v.eat.call(void 0, k.TokenType.bang) + k.eat.call(void 0, y.TokenType.bang) ) { I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType.nonNullAssertion; + y.TokenType.nonNullAssertion; return; } if ( - v.match.call(void 0, k.TokenType.lessThan) || - v.match.call(void 0, k.TokenType.bitShiftL) + k.match.call(void 0, y.TokenType.lessThan) || + k.match.call(void 0, y.TokenType.bitShiftL) ) { let i = I.state.snapshot(); - if (!t && _e.atPossibleAsync.call(void 0) && GT()) return; + if (!t && be.atPossibleAsync.call(void 0) && ak()) return; if ( - (kl(), - !t && v.eat.call(void 0, k.TokenType.parenL) + (El(), + !t && k.eat.call(void 0, y.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 && + be.parseCallExpressionArguments.call(void 0)) + : k.match.call(void 0, y.TokenType.backQuote) + ? be.parseTemplate.call(void 0) + : (I.state.type === y.TokenType.greaterThan || + (I.state.type !== y.TokenType.parenL && + I.state.type & y.TokenType.IS_EXPRESSION_START && !H.hasPrecedingLineBreak.call(void 0))) && H.unexpected.call(void 0), I.state.error) @@ -18887,169 +18949,169 @@ If you need interactivity, consider converting part of this to a Client Componen 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), + k.match.call(void 0, y.TokenType.questionDot) && + k.lookaheadType.call(void 0) === y.TokenType.lessThan && + (k.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)) + ki(), + H.expect.call(void 0, y.TokenType.parenL), + be.parseCallExpressionArguments.call(void 0)); + be.baseParseSubscript.call(void 0, e, t, s); + } + De.tsParseSubscript = uk; + function pk() { + if (k.eat.call(void 0, y.TokenType._import)) return ( H.isContextual.call(void 0, oe.ContextualKeyword._type) && - v.lookaheadType.call(void 0) !== k.TokenType.eq && + k.lookaheadType.call(void 0) !== y.TokenType.eq && H.expectContextual.call(void 0, oe.ContextualKeyword._type), - Ap(), + $p(), !0 ); - if (v.eat.call(void 0, k.TokenType.eq)) - return _e.parseExpression.call(void 0), H.semicolon.call(void 0), !0; + if (k.eat.call(void 0, y.TokenType.eq)) + return be.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), + be.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); + let e = k.lookaheadType.call(void 0); + (e === y.TokenType.braceL || e === y.TokenType.star) && + k.next.call(void 0); } return !1; } - Oe.tsTryParseExport = JT; - function QT() { + De.tsTryParseExport = pk; + function hk() { if ( - (_e.parseIdentifier.call(void 0), - v.match.call(void 0, k.TokenType.comma) || - v.match.call(void 0, k.TokenType.braceR)) + (be.parseIdentifier.call(void 0), + k.match.call(void 0, y.TokenType.comma) || + k.match.call(void 0, y.TokenType.braceR)) ) { I.state.tokens[I.state.tokens.length - 1].identifierRole = - v.IdentifierRole.ImportDeclaration; + k.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)) + (be.parseIdentifier.call(void 0), + k.match.call(void 0, y.TokenType.comma) || + k.match.call(void 0, y.TokenType.braceR)) ) { (I.state.tokens[I.state.tokens.length - 1].identifierRole = - v.IdentifierRole.ImportDeclaration), + k.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)) + (be.parseIdentifier.call(void 0), + k.match.call(void 0, y.TokenType.comma) || + k.match.call(void 0, y.TokenType.braceR)) ) { (I.state.tokens[I.state.tokens.length - 3].identifierRole = - v.IdentifierRole.ImportAccess), + k.IdentifierRole.ImportAccess), (I.state.tokens[I.state.tokens.length - 1].identifierRole = - v.IdentifierRole.ImportDeclaration); + k.IdentifierRole.ImportDeclaration); return; } - _e.parseIdentifier.call(void 0), + be.parseIdentifier.call(void 0), (I.state.tokens[I.state.tokens.length - 3].identifierRole = - v.IdentifierRole.ImportAccess), + k.IdentifierRole.ImportAccess), (I.state.tokens[I.state.tokens.length - 1].identifierRole = - v.IdentifierRole.ImportDeclaration), + k.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() { + De.tsParseImportSpecifier = hk; + function fk() { if ( - (_e.parseIdentifier.call(void 0), - v.match.call(void 0, k.TokenType.comma) || - v.match.call(void 0, k.TokenType.braceR)) + (be.parseIdentifier.call(void 0), + k.match.call(void 0, y.TokenType.comma) || + k.match.call(void 0, y.TokenType.braceR)) ) { I.state.tokens[I.state.tokens.length - 1].identifierRole = - v.IdentifierRole.ExportAccess; + k.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)) + (be.parseIdentifier.call(void 0), + k.match.call(void 0, y.TokenType.comma) || + k.match.call(void 0, y.TokenType.braceR)) ) { (I.state.tokens[I.state.tokens.length - 1].identifierRole = - v.IdentifierRole.ExportAccess), + k.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)) + (be.parseIdentifier.call(void 0), + k.match.call(void 0, y.TokenType.comma) || + k.match.call(void 0, y.TokenType.braceR)) ) { I.state.tokens[I.state.tokens.length - 3].identifierRole = - v.IdentifierRole.ExportAccess; + k.IdentifierRole.ExportAccess; return; } - _e.parseIdentifier.call(void 0), + be.parseIdentifier.call(void 0), (I.state.tokens[I.state.tokens.length - 3].identifierRole = - v.IdentifierRole.ExportAccess), + k.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() { + De.tsParseExportSpecifier = fk; + function dk() { if ( H.isContextual.call(void 0, oe.ContextualKeyword._abstract) && - v.lookaheadType.call(void 0) === k.TokenType._class + k.lookaheadType.call(void 0) === y.TokenType._class ) return ( - (I.state.type = k.TokenType._abstract), - v.next.call(void 0), - Rn.parseClass.call(void 0, !0, !0), + (I.state.type = y.TokenType._abstract), + k.next.call(void 0), + Dn.parseClass.call(void 0, !0, !0), !0 ); if (H.isContextual.call(void 0, oe.ContextualKeyword._interface)) { - let e = v.pushTypeContext.call(void 0, 2); + let e = k.pushTypeContext.call(void 0, 2); return ( - po(oe.ContextualKeyword._interface, !0), - v.popTypeContext.call(void 0, e), + yo(oe.ContextualKeyword._interface, !0), + k.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); + De.tsTryParseExportDefaultExpression = dk; + function mk() { + if (I.state.type === y.TokenType._const) { + let e = k.lookaheadTypeAndKeyword.call(void 0); if ( - e.type === k.TokenType.name && + e.type === y.TokenType.name && e.contextualKeyword === oe.ContextualKeyword._enum ) return ( - H.expect.call(void 0, k.TokenType._const), + H.expect.call(void 0, y.TokenType._const), H.expectContextual.call(void 0, oe.ContextualKeyword._enum), (I.state.tokens[I.state.tokens.length - 1].type = - k.TokenType._enum), - yl(), + y.TokenType._enum), + Sl(), !0 ); } return !1; } - Oe.tsTryParseStatementContent = tk; - function nk(e) { + De.tsTryParseStatementContent = mk; + function Tk(e) { let t = I.state.tokens.length; - bp([ + Dp([ oe.ContextualKeyword._abstract, oe.ContextualKeyword._readonly, oe.ContextualKeyword._declare, @@ -19057,658 +19119,658 @@ If you need interactivity, consider converting part of this to a Client Componen oe.ContextualKeyword._override, ]); let s = I.state.tokens.length; - if (wp()) { + if (Fp()) { 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); + De.tsTryParseClassMemberWithIsStatic = Tk; + function yk(e) { + ok(e) || H.semicolon.call(void 0); } - Oe.tsParseIdentifierStatement = sk; - function ik() { + De.tsParseIdentifierStatement = yk; + function kk() { let e = H.eatContextual.call(void 0, oe.ContextualKeyword._declare); e && - (I.state.tokens[I.state.tokens.length - 1].type = k.TokenType._declare); + (I.state.tokens[I.state.tokens.length - 1].type = y.TokenType._declare); let t = !1; - if (v.match.call(void 0, k.TokenType.name)) + if (k.match.call(void 0, y.TokenType.name)) if (e) { - let s = v.pushTypeContext.call(void 0, 2); - (t = gp()), v.popTypeContext.call(void 0, s); - } else t = gp(); + let s = k.pushTypeContext.call(void 0, 2); + (t = Lp()), k.popTypeContext.call(void 0, s); + } else t = Lp(); 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); + let s = k.pushTypeContext.call(void 0, 2); + Dn.parseStatement.call(void 0, !0), k.popTypeContext.call(void 0, s); + } else Dn.parseStatement.call(void 0, !0); } - Oe.tsParseExportDeclaration = ik; - function rk(e) { + De.tsParseExportDeclaration = kk; + function vk(e) { if ( (e && - (v.match.call(void 0, k.TokenType.lessThan) || - v.match.call(void 0, k.TokenType.bitShiftL)) && - kl(), + (k.match.call(void 0, y.TokenType.lessThan) || + k.match.call(void 0, y.TokenType.bitShiftL)) && + El(), 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); + y.TokenType._implements; + let t = k.pushTypeContext.call(void 0, 1); + Vp(), k.popTypeContext.call(void 0, t); } } - Oe.tsAfterParseClassSuper = rk; - function ok() { - mi(); + De.tsAfterParseClassSuper = vk; + function xk() { + yi(); } - Oe.tsStartParseObjPropValue = ok; - function ak() { - mi(); + De.tsStartParseObjPropValue = xk; + function gk() { + yi(); } - Oe.tsStartParseFunctionParams = ak; - function lk() { - let e = v.pushTypeContext.call(void 0, 0); + De.tsStartParseFunctionParams = gk; + function _k() { + let e = k.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); + k.eat.call(void 0, y.TokenType.bang), + rr(), + k.popTypeContext.call(void 0, e); + } + De.tsAfterParseVarHead = _k; + function bk() { + k.match.call(void 0, y.TokenType.colon) && or(); + } + De.tsStartParseAsyncArrowFromCallExpression = bk; + function Ck(e, t) { + return I.isJSXEnabled ? Kp(e, t) : qp(e, t); + } + De.tsParseMaybeAssign = Ck; + function Kp(e, t) { + if (!k.match.call(void 0, y.TokenType.lessThan)) + return be.baseParseMaybeAssign.call(void 0, e, t); let s = I.state.snapshot(), - i = _e.baseParseMaybeAssign.call(void 0, e, t); + i = be.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.state.type = y.TokenType.typeParameterStart), + To(), + (i = be.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); + De.tsParseMaybeAssignWithJSX = Kp; + function qp(e, t) { + if (!k.match.call(void 0, y.TokenType.lessThan)) + return be.baseParseMaybeAssign.call(void 0, e, t); let s = I.state.snapshot(); - uo(); - let i = _e.baseParseMaybeAssign.call(void 0, e, t); + To(); + let i = be.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); + return be.baseParseMaybeAssign.call(void 0, e, t); } - Oe.tsParseMaybeAssignWithoutJSX = Np; - function pk() { - if (v.match.call(void 0, k.TokenType.colon)) { + De.tsParseMaybeAssignWithoutJSX = qp; + function wk() { + if (k.match.call(void 0, y.TokenType.colon)) { let e = I.state.snapshot(); - Qi(k.TokenType.colon), + sr(y.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), + k.match.call(void 0, y.TokenType.arrow) || H.unexpected.call(void 0), I.state.error && I.state.restoreFromSnapshot(e); } - return v.eat.call(void 0, k.TokenType.arrow); + return k.eat.call(void 0, y.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); + De.tsParseArrow = wk; + function Sk() { + let e = k.pushTypeContext.call(void 0, 0); + k.eat.call(void 0, y.TokenType.question), + rr(), + k.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); + De.tsParseAssignableListItemTypes = Sk; + function Ik() { + (k.match.call(void 0, y.TokenType.lessThan) || + k.match.call(void 0, y.TokenType.bitShiftL)) && + El(), + Dn.baseParseMaybeDecoratorArguments.call(void 0); } - Oe.tsParseMaybeDecoratorArguments = fk; + De.tsParseMaybeDecoratorArguments = Ik; }); - var vl = Z((fo) => { + var Al = Z((vo) => { '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() { + Object.defineProperty(vo, '__esModule', {value: !0}); + var Ie = _t(), + Fe = Ce(), + de = nn(), + ko = Os(), + ys = fs(), + lt = tn(), + Up = ui(), + Ek = di(); + function Ak() { let e = !1, t = !1; for (;;) { - if (fe.state.pos >= fe.input.length) { - fs.unexpected.call(void 0, 'Unterminated JSX contents'); + if (de.state.pos >= de.input.length) { + ys.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); + let s = de.input.charCodeAt(de.state.pos); + if (s === lt.charCodes.lessThan || s === lt.charCodes.leftCurlyBrace) { + if (de.state.pos === de.state.start) { + if (s === lt.charCodes.lessThan) { + de.state.pos++, + Ie.finishToken.call(void 0, Fe.TokenType.jsxTagStart); return; } - Se.getTokenFromCode.call(void 0, s); + Ie.getTokenFromCode.call(void 0, s); return; } e && !t - ? Se.finishToken.call(void 0, Me.TokenType.jsxEmptyText) - : Se.finishToken.call(void 0, Me.TokenType.jsxText); + ? Ie.finishToken.call(void 0, Fe.TokenType.jsxEmptyText) + : Ie.finishToken.call(void 0, Fe.TokenType.jsxText); return; } - s === at.charCodes.lineFeed + s === lt.charCodes.lineFeed ? (e = !0) - : s !== at.charCodes.space && - s !== at.charCodes.carriageReturn && - s !== at.charCodes.tab && + : s !== lt.charCodes.space && + s !== lt.charCodes.carriageReturn && + s !== lt.charCodes.tab && (t = !0), - fe.state.pos++; + de.state.pos++; } } - function yk(e) { - for (fe.state.pos++; ; ) { - if (fe.state.pos >= fe.input.length) { - fs.unexpected.call(void 0, 'Unterminated string constant'); + function Pk(e) { + for (de.state.pos++; ; ) { + if (de.state.pos >= de.input.length) { + ys.unexpected.call(void 0, 'Unterminated string constant'); return; } - if (fe.input.charCodeAt(fe.state.pos) === e) { - fe.state.pos++; + if (de.input.charCodeAt(de.state.pos) === e) { + de.state.pos++; break; } - fe.state.pos++; + de.state.pos++; } - Se.finishToken.call(void 0, Me.TokenType.string); + Ie.finishToken.call(void 0, Fe.TokenType.string); } - function Tk() { + function Nk() { let e; do { - if (fe.state.pos > fe.input.length) { - fs.unexpected.call(void 0, 'Unexpectedly reached the end of input.'); + if (de.state.pos > de.input.length) { + ys.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); + e = de.input.charCodeAt(++de.state.pos); + } while (Up.IS_IDENTIFIER_CHAR[e] || e === lt.charCodes.dash); + Ie.finishToken.call(void 0, Fe.TokenType.jsxName); } - function xl() { - dn(); + function Pl() { + Tn(); } - function Lp(e) { - if ((xl(), !Se.eat.call(void 0, Me.TokenType.colon))) { - fe.state.tokens[fe.state.tokens.length - 1].identifierRole = e; + function Hp(e) { + if ((Pl(), !Ie.eat.call(void 0, Fe.TokenType.colon))) { + de.state.tokens[de.state.tokens.length - 1].identifierRole = e; return; } - xl(); + Pl(); } - function Op() { - let e = fe.state.tokens.length; - Lp(Se.IdentifierRole.Access); + function Wp() { + let e = de.state.tokens.length; + Hp(Ie.IdentifierRole.Access); let t = !1; - for (; Se.match.call(void 0, Me.TokenType.dot); ) (t = !0), dn(), xl(); + for (; Ie.match.call(void 0, Fe.TokenType.dot); ) (t = !0), Tn(), Pl(); if (!t) { - let s = fe.state.tokens[e], - i = fe.input.charCodeAt(s.start); - i >= at.charCodes.lowercaseA && - i <= at.charCodes.lowercaseZ && + let s = de.state.tokens[e], + i = de.input.charCodeAt(s.start); + i >= lt.charCodes.lowercaseA && + i <= lt.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(); + function Rk() { + switch (de.state.type) { + case Fe.TokenType.braceL: + Ie.next.call(void 0), ko.parseExpression.call(void 0), Tn(); return; - case Me.TokenType.jsxTagStart: - Mp(), dn(); + case Fe.TokenType.jsxTagStart: + zp(), Tn(); return; - case Me.TokenType.string: - dn(); + case Fe.TokenType.string: + Tn(); return; default: - fs.unexpected.call( + ys.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 Lk() { + ys.expect.call(void 0, Fe.TokenType.ellipsis), + ko.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); + function Ok(e) { + if (Ie.match.call(void 0, Fe.TokenType.jsxTagEnd)) return !1; + Wp(), de.isTypeScriptEnabled && Ek.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; + !Ie.match.call(void 0, Fe.TokenType.slash) && + !Ie.match.call(void 0, Fe.TokenType.jsxTagEnd) && + !de.state.error; ) { - if (Se.eat.call(void 0, Me.TokenType.braceL)) { + if (Ie.eat.call(void 0, Fe.TokenType.braceL)) { (t = !0), - fs.expect.call(void 0, Me.TokenType.ellipsis), - ho.parseMaybeAssign.call(void 0), - dn(); + ys.expect.call(void 0, Fe.TokenType.ellipsis), + ko.parseMaybeAssign.call(void 0), + Tn(); 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()); + de.state.end - de.state.start === 3 && + de.input.charCodeAt(de.state.start) === lt.charCodes.lowercaseK && + de.input.charCodeAt(de.state.start + 1) === lt.charCodes.lowercaseE && + de.input.charCodeAt(de.state.start + 2) === lt.charCodes.lowercaseY && + (de.state.tokens[e].jsxRole = Ie.JSXRole.KeyAfterPropSpread), + Hp(Ie.IdentifierRole.ObjectKey), + Ie.match.call(void 0, Fe.TokenType.eq) && (Tn(), Rk()); } - let s = Se.match.call(void 0, Me.TokenType.slash); - return s && dn(), s; + let s = Ie.match.call(void 0, Fe.TokenType.slash); + return s && Tn(), s; } - function gk() { - Se.match.call(void 0, Me.TokenType.jsxTagEnd) || Op(); + function Dk() { + Ie.match.call(void 0, Fe.TokenType.jsxTagEnd) || Wp(); } - function Dp() { - let e = fe.state.tokens.length - 1; - fe.state.tokens[e].jsxRole = Se.JSXRole.NoChildren; + function Gp() { + let e = de.state.tokens.length - 1; + de.state.tokens[e].jsxRole = Ie.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 && + if (!Ok(e)) + for (vi(); ; ) + switch (de.state.type) { + case Fe.TokenType.jsxTagStart: + if ((Tn(), Ie.match.call(void 0, Fe.TokenType.slash))) { + Tn(), + Dk(), + de.state.tokens[e].jsxRole !== + Ie.JSXRole.KeyAfterPropSpread && (t === 1 - ? (fe.state.tokens[e].jsxRole = Se.JSXRole.OneChild) + ? (de.state.tokens[e].jsxRole = Ie.JSXRole.OneChild) : t > 1 && - (fe.state.tokens[e].jsxRole = - Se.JSXRole.StaticChildren)); + (de.state.tokens[e].jsxRole = + Ie.JSXRole.StaticChildren)); return; } - t++, Dp(), Ti(); + t++, Gp(), vi(); break; - case Me.TokenType.jsxText: - t++, Ti(); + case Fe.TokenType.jsxText: + t++, vi(); break; - case Me.TokenType.jsxEmptyText: - Ti(); + case Fe.TokenType.jsxEmptyText: + vi(); 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()); + case Fe.TokenType.braceL: + Ie.next.call(void 0), + Ie.match.call(void 0, Fe.TokenType.ellipsis) + ? (Lk(), vi(), (t += 2)) + : (Ie.match.call(void 0, Fe.TokenType.braceR) || + (t++, ko.parseExpression.call(void 0)), + vi()); break; default: - fs.unexpected.call(void 0); + ys.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(); + function zp() { + Tn(), Gp(); + } + vo.jsxParseElement = zp; + function Tn() { + de.state.tokens.push(new Ie.Token()), + Ie.skipSpace.call(void 0), + (de.state.start = de.state.pos); + let e = de.input.charCodeAt(de.state.pos); + if (Up.IS_IDENTIFIER_START[e]) Nk(); else if ( - e === at.charCodes.quotationMark || - e === at.charCodes.apostrophe + e === lt.charCodes.quotationMark || + e === lt.charCodes.apostrophe ) - yk(e); + Pk(e); else - switch ((++fe.state.pos, e)) { - case at.charCodes.greaterThan: - Se.finishToken.call(void 0, Me.TokenType.jsxTagEnd); + switch ((++de.state.pos, e)) { + case lt.charCodes.greaterThan: + Ie.finishToken.call(void 0, Fe.TokenType.jsxTagEnd); break; - case at.charCodes.lessThan: - Se.finishToken.call(void 0, Me.TokenType.jsxTagStart); + case lt.charCodes.lessThan: + Ie.finishToken.call(void 0, Fe.TokenType.jsxTagStart); break; - case at.charCodes.slash: - Se.finishToken.call(void 0, Me.TokenType.slash); + case lt.charCodes.slash: + Ie.finishToken.call(void 0, Fe.TokenType.slash); break; - case at.charCodes.equalsTo: - Se.finishToken.call(void 0, Me.TokenType.eq); + case lt.charCodes.equalsTo: + Ie.finishToken.call(void 0, Fe.TokenType.eq); break; - case at.charCodes.leftCurlyBrace: - Se.finishToken.call(void 0, Me.TokenType.braceL); + case lt.charCodes.leftCurlyBrace: + Ie.finishToken.call(void 0, Fe.TokenType.braceL); break; - case at.charCodes.dot: - Se.finishToken.call(void 0, Me.TokenType.dot); + case lt.charCodes.dot: + Ie.finishToken.call(void 0, Fe.TokenType.dot); break; - case at.charCodes.colon: - Se.finishToken.call(void 0, Me.TokenType.colon); + case lt.charCodes.colon: + Ie.finishToken.call(void 0, Fe.TokenType.colon); break; default: - fs.unexpected.call(void 0); + ys.unexpected.call(void 0); } } - fo.nextJSXTagToken = dn; - function Ti() { - fe.state.tokens.push(new Se.Token()), - (fe.state.start = fe.state.pos), - mk(); + vo.nextJSXTagToken = Tn; + function vi() { + de.state.tokens.push(new Ie.Token()), + (de.state.start = de.state.pos), + Ak(); } }); - var Bp = Z((yo) => { + var Yp = Z((go) => { '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); + Object.defineProperty(go, '__esModule', {value: !0}); + var xo = _t(), + xi = Ce(), + Xp = nn(), + Mk = Os(), + Fk = nr(), + Bk = di(); + function Vk(e) { + if (xo.match.call(void 0, xi.TokenType.question)) { + let t = xo.lookaheadType.call(void 0); if ( - t === ki.TokenType.colon || - t === ki.TokenType.comma || - t === ki.TokenType.parenR + t === xi.TokenType.colon || + t === xi.TokenType.comma || + t === xi.TokenType.parenR ) return; } - _k.baseParseConditional.call(void 0, e); + Mk.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)); + go.typedParseConditional = Vk; + function jk() { + xo.eatTypeToken.call(void 0, xi.TokenType.question), + xo.match.call(void 0, xi.TokenType.colon) && + (Xp.isTypeScriptEnabled + ? Bk.tsParseTypeAnnotation.call(void 0) + : Xp.isFlowEnabled && Fk.flowParseTypeAnnotation.call(void 0)); } - yo.typedParseParenItem = Sk; + go.typedParseParenItem = jk; }); - var Ns = Z((et) => { + var Os = Z((tt) => { '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 { + Object.defineProperty(tt, '__esModule', {value: !0}); + var ts = nr(), + $k = Al(), + Jp = Yp(), + vs = di(), + U = _t(), + Zn = Et(), + Qp = Gr(), + B = Ce(), + Zp = tn(), + Kk = ui(), + j = nn(), + ks = fo(), + _n = ar(), + Ne = fs(), + Co = 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); + tt.StopState = Co; + function lr(e = !1) { + if ((yn(e), U.match.call(void 0, B.TokenType.comma))) + for (; U.eat.call(void 0, B.TokenType.comma); ) yn(e); } - et.parseExpression = sr; - function mn(e = !1, t = !1) { + tt.parseExpression = lr; + function yn(e = !1, t = !1) { return j.isTypeScriptEnabled - ? ms.tsParseMaybeAssign.call(void 0, e, t) + ? vs.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)) && + ? ts.flowParseMaybeAssign.call(void 0, e, t) + : eh(e, t); + } + tt.parseMaybeAssign = yn; + function eh(e, t) { + if (U.match.call(void 0, B.TokenType._yield)) return r0(), !1; + (U.match.call(void 0, B.TokenType.parenL) || + U.match.call(void 0, B.TokenType.name) || + U.match.call(void 0, B.TokenType._yield)) && (j.state.potentialArrowAt = j.state.start); - let s = Ak(e); + let s = qk(e); return ( - t && wl(), + t && Dl(), j.state.type & B.TokenType.IS_ASSIGN - ? (K.next.call(void 0), mn(e), !1) + ? (U.next.call(void 0), yn(e), !1) : s ); } - et.baseParseMaybeAssign = qp; - function Ak(e) { - return Nk(e) ? !0 : (Pk(e), !1); + tt.baseParseMaybeAssign = eh; + function qk(e) { + return Hk(e) ? !0 : (Uk(e), !1); } - function Pk(e) { + function Uk(e) { j.isTypeScriptEnabled || j.isFlowEnabled - ? Vp.typedParseConditional.call(void 0, e) - : Kp(e); + ? Jp.typedParseConditional.call(void 0, e) + : th(e); } - function Kp(e) { - K.eat.call(void 0, B.TokenType.question) && - (mn(), Pe.expect.call(void 0, B.TokenType.colon), mn(e)); + function th(e) { + U.eat.call(void 0, B.TokenType.question) && + (yn(), Ne.expect.call(void 0, B.TokenType.colon), yn(e)); } - et.baseParseConditional = Kp; - function Nk(e) { + tt.baseParseConditional = th; + function Hk(e) { let t = j.state.tokens.length; - return rr() ? !0 : (To(t, -1, e), !1); + return ur() ? !0 : (_o(t, -1, e), !1); } - function To(e, t, s) { + function _o(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)) + !Ne.hasPrecedingLineBreak.call(void 0) && + (Ne.eatContextual.call(void 0, Zn.ContextualKeyword._as) || + Ne.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); + let r = U.pushTypeContext.call(void 0, 1); + vs.tsParseType.call(void 0), + U.popTypeContext.call(void 0, r), + U.rescan_gt.call(void 0), + _o(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) { + if (i > 0 && (!s || !U.match.call(void 0, B.TokenType._in)) && i > t) { let r = j.state.type; - K.next.call(void 0), + U.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), + ur(), + _o(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); + _o(e, t, s); } } - function rr() { + function ur() { if ( j.isTypeScriptEnabled && !j.isJSXEnabled && - K.eat.call(void 0, B.TokenType.lessThan) + U.eat.call(void 0, B.TokenType.lessThan) ) - return ms.tsParseTypeAssertion.call(void 0), !1; + return vs.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) + Ne.isContextual.call(void 0, Zn.ContextualKeyword._module) && + U.lookaheadCharCode.call(void 0) === Zp.charCodes.leftCurlyBrace && + !Ne.hasFollowingLineBreak.call(void 0) ) - return Wk(), !1; + return o0(), !1; if (j.state.type & B.TokenType.IS_PREFIX) - return K.next.call(void 0), rr(), !1; - if (Up()) return !0; + return U.next.call(void 0), ur(), !1; + if (nh()) return !0; for ( ; j.state.type & B.TokenType.IS_POSTFIX && - !Pe.canInsertSemicolon.call(void 0); + !Ne.canInsertSemicolon.call(void 0); ) j.state.type === B.TokenType.preIncDec && (j.state.type = B.TokenType.postIncDec), - K.next.call(void 0); + U.next.call(void 0); return !1; } - et.parseMaybeUnary = rr; - function Up() { + tt.parseMaybeUnary = ur; + function nh() { let e = j.state.tokens.length; - return _o() + return Io() ? !0 - : (bl(e), + : (Ll(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); + tt.parseExprSubscripts = nh; + function Ll(e, t = !1) { + j.isFlowEnabled ? ts.flowParseSubscripts.call(void 0, e, t) : sh(e, t); } - function Hp(e, t = !1) { - let s = new vo(!1); - do Rk(e, t, s); + function sh(e, t = !1) { + let s = new Co(!1); + do Wk(e, t, s); while (!s.stop && !j.state.error); } - et.baseParseSubscripts = Hp; - function Rk(e, t, s) { + tt.baseParseSubscripts = sh; + function Wk(e, t, s) { j.isTypeScriptEnabled - ? ms.tsParseSubscript.call(void 0, e, t, s) + ? vs.tsParseSubscript.call(void 0, e, t, s) : j.isFlowEnabled - ? Yn.flowParseSubscript.call(void 0, e, t, s) - : Wp(e, t, s); + ? ts.flowParseSubscript.call(void 0, e, t, s) + : ih(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)) { + function ih(e, t, s) { + if (!t && U.eat.call(void 0, B.TokenType.doubleColon)) + Ol(), (s.stop = !0), Ll(e, t); + else if (U.match.call(void 0, B.TokenType.questionDot)) { if ( ((j.state.tokens[e].isOptionalChainStart = !0), - t && K.lookaheadType.call(void 0) === B.TokenType.parenL) + t && U.lookaheadType.call(void 0) === B.TokenType.parenL) ) { s.stop = !0; return; } - K.next.call(void 0), + U.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)) + U.eat.call(void 0, B.TokenType.bracketL) + ? (lr(), Ne.expect.call(void 0, B.TokenType.bracketR)) + : U.eat.call(void 0, B.TokenType.parenL) + ? bo() + : wo(); + } else if (U.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)) + wo(); + else if (U.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()) { + lr(), + Ne.expect.call(void 0, B.TokenType.bracketR); + else if (!t && U.match.call(void 0, B.TokenType.parenL)) + if (rh()) { let i = j.state.snapshot(), r = j.state.tokens.length; - K.next.call(void 0), + U.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(), + bo(), (j.state.tokens[j.state.tokens.length - 1].contextId = a), - Lk() && + Gk() && (j.state.restoreFromSnapshot(i), (s.stop = !0), j.state.scopeDepth++, - gn.parseFunctionParams.call(void 0), - Ok(r)); + _n.parseFunctionParams.call(void 0), + zk(r)); } else { - K.next.call(void 0), + U.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(), + bo(), (j.state.tokens[j.state.tokens.length - 1].contextId = i); } - else K.match.call(void 0, B.TokenType.backQuote) ? Sl() : (s.stop = !0); + else U.match.call(void 0, B.TokenType.backQuote) ? Ml() : (s.stop = !0); } - et.baseParseSubscript = Wp; - function Gp() { + tt.baseParseSubscript = ih; + function rh() { return ( j.state.tokens[j.state.tokens.length - 1].contextualKeyword === - zn.ContextualKeyword._async && !Pe.canInsertSemicolon.call(void 0) + Zn.ContextualKeyword._async && !Ne.canInsertSemicolon.call(void 0) ); } - et.atPossibleAsync = Gp; - function ko() { + tt.atPossibleAsync = rh; + function bo() { let e = !0; - for (; !K.eat.call(void 0, B.TokenType.parenR) && !j.state.error; ) { + for (; !U.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)) + (Ne.expect.call(void 0, B.TokenType.comma), + U.eat.call(void 0, B.TokenType.parenR)) ) break; - Zp(!1); + ph(!1); } } - et.parseCallExpressionArguments = ko; - function Lk() { + tt.parseCallExpressionArguments = bo; + function Gk() { return ( - K.match.call(void 0, B.TokenType.colon) || - K.match.call(void 0, B.TokenType.arrow) + U.match.call(void 0, B.TokenType.colon) || + U.match.call(void 0, B.TokenType.arrow) ); } - function Ok(e) { + function zk(e) { j.isTypeScriptEnabled - ? ms.tsStartParseAsyncArrowFromCallExpression.call(void 0) + ? vs.tsStartParseAsyncArrowFromCallExpression.call(void 0) : j.isFlowEnabled && - Yn.flowStartParseAsyncArrowFromCallExpression.call(void 0), - Pe.expect.call(void 0, B.TokenType.arrow), - ir(e); + ts.flowStartParseAsyncArrowFromCallExpression.call(void 0), + Ne.expect.call(void 0, B.TokenType.arrow), + cr(e); } - function Cl() { + function Ol() { let e = j.state.tokens.length; - _o(), bl(e, !0); + Io(), Ll(e, !0); } - function _o() { - if (K.eat.call(void 0, B.TokenType.modulo)) return Xn(), !1; + function Io() { + if (U.eat.call(void 0, B.TokenType.modulo)) return es(), !1; if ( - K.match.call(void 0, B.TokenType.jsxText) || - K.match.call(void 0, B.TokenType.jsxEmptyText) + U.match.call(void 0, B.TokenType.jsxText) || + U.match.call(void 0, B.TokenType.jsxEmptyText) ) - return zp(), !1; - if (K.match.call(void 0, B.TokenType.lessThan) && j.isJSXEnabled) + return oh(), !1; + if (U.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), + $k.jsxParseElement.call(void 0), + U.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); + U.retokenizeSlashAsRegex.call(void 0); case B.TokenType._super: case B.TokenType._this: case B.TokenType.regexp: @@ -19719,15 +19781,15 @@ If you need interactivity, consider converting part of this to a Client Componen case B.TokenType._null: case B.TokenType._true: case B.TokenType._false: - return K.next.call(void 0), !1; + return U.next.call(void 0), !1; case B.TokenType._import: return ( - K.next.call(void 0), - K.match.call(void 0, B.TokenType.dot) && + U.next.call(void 0), + U.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()), + U.next.call(void 0), + es()), !1 ); case B.TokenType.name: { @@ -19735,584 +19797,584 @@ If you need interactivity, consider converting part of this to a Client Componen 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) + es(), + i === Zn.ContextualKeyword._await + ? (i0(), !1) + : i === Zn.ContextualKeyword._async && + U.match.call(void 0, B.TokenType._function) && + !Ne.canInsertSemicolon.call(void 0) + ? (U.next.call(void 0), _n.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) + i === Zn.ContextualKeyword._async && + !Ne.canInsertSemicolon.call(void 0) && + U.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), + ks.parseBindingIdentifier.call(void 0, !1), + Ne.expect.call(void 0, B.TokenType.arrow), + cr(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) + : U.match.call(void 0, B.TokenType._do) && + !Ne.canInsertSemicolon.call(void 0) + ? (U.next.call(void 0), _n.parseBlock.call(void 0), !1) : e && - !Pe.canInsertSemicolon.call(void 0) && - K.match.call(void 0, B.TokenType.arrow) + !Ne.canInsertSemicolon.call(void 0) && + U.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), + ks.markPriorBindingIdentifier.call(void 0, !1), + Ne.expect.call(void 0, B.TokenType.arrow), + cr(t), !0) : ((j.state.tokens[j.state.tokens.length - 1].identifierRole = - K.IdentifierRole.Access), + U.IdentifierRole.Access), !1) ); } case B.TokenType._do: - return K.next.call(void 0), gn.parseBlock.call(void 0), !1; + return U.next.call(void 0), _n.parseBlock.call(void 0), !1; case B.TokenType.parenL: - return Xp(e); + return ah(e); case B.TokenType.bracketL: - return K.next.call(void 0), Qp(B.TokenType.bracketR, !0), !1; + return U.next.call(void 0), uh(B.TokenType.bracketR, !0), !1; case B.TokenType.braceL: - return Yp(!1, !1), !1; + return lh(!1, !1), !1; case B.TokenType._function: - return Dk(), !1; + return Xk(), !1; case B.TokenType.at: - gn.parseDecorators.call(void 0); + _n.parseDecorators.call(void 0); case B.TokenType._class: - return gn.parseClass.call(void 0, !1), !1; + return _n.parseClass.call(void 0, !1), !1; case B.TokenType._new: - return Bk(), !1; + return Qk(), !1; case B.TokenType.backQuote: - return Sl(), !1; + return Ml(), !1; case B.TokenType.doubleColon: - return K.next.call(void 0), Cl(), !1; + return U.next.call(void 0), Ol(), !1; case B.TokenType.hash: { - let t = K.lookaheadCharCode.call(void 0); + let t = U.lookaheadCharCode.call(void 0); return ( - Ek.IS_IDENTIFIER_START[t] || t === $p.charCodes.backslash - ? xo() - : K.next.call(void 0), + Kk.IS_IDENTIFIER_START[t] || t === Zp.charCodes.backslash + ? wo() + : U.next.call(void 0), !1 ); } default: - return Pe.unexpected.call(void 0), !1; + return Ne.unexpected.call(void 0), !1; } } - et.parseExprAtom = _o; - function xo() { - K.eat.call(void 0, B.TokenType.hash), Xn(); + tt.parseExprAtom = Io; + function wo() { + U.eat.call(void 0, B.TokenType.hash), es(); } - function Dk() { + function Xk() { let e = j.state.start; - Xn(), - K.eat.call(void 0, B.TokenType.dot) && Xn(), - gn.parseFunction.call(void 0, e, !1); + es(), + U.eat.call(void 0, B.TokenType.dot) && es(), + _n.parseFunction.call(void 0, e, !1); } - function zp() { - K.next.call(void 0); + function oh() { + U.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); + tt.parseLiteral = oh; + function Yk() { + Ne.expect.call(void 0, B.TokenType.parenL), + lr(), + Ne.expect.call(void 0, B.TokenType.parenR); } - et.parseParenExpression = Mk; - function Xp(e) { + tt.parseParenExpression = Yk; + function ah(e) { let t = j.state.snapshot(), s = j.state.tokens.length; - Pe.expect.call(void 0, B.TokenType.parenL); + Ne.expect.call(void 0, B.TokenType.parenL); let i = !0; - for (; !K.match.call(void 0, B.TokenType.parenR) && !j.state.error; ) { + for (; !U.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)) + (Ne.expect.call(void 0, B.TokenType.comma), + U.match.call(void 0, B.TokenType.parenR)) ) break; - if (K.match.call(void 0, B.TokenType.ellipsis)) { - ds.parseRest.call(void 0, !1), wl(); + if (U.match.call(void 0, B.TokenType.ellipsis)) { + ks.parseRest.call(void 0, !1), Dl(); break; - } else mn(!1, !0); + } else yn(!1, !0); } return ( - Pe.expect.call(void 0, B.TokenType.parenR), - e && Fk() && gl() + Ne.expect.call(void 0, B.TokenType.parenR), + e && Jk() && Nl() ? (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) + _n.parseFunctionParams.call(void 0), + Nl(), + cr(s), + j.state.error ? (j.state.restoreFromSnapshot(t), ah(!1), !1) : !0) : !1 ); } - function Fk() { + function Jk() { return ( - K.match.call(void 0, B.TokenType.colon) || - !Pe.canInsertSemicolon.call(void 0) + U.match.call(void 0, B.TokenType.colon) || + !Ne.canInsertSemicolon.call(void 0) ); } - function gl() { + function Nl() { return j.isTypeScriptEnabled - ? ms.tsParseArrow.call(void 0) + ? vs.tsParseArrow.call(void 0) : j.isFlowEnabled - ? Yn.flowParseArrow.call(void 0) - : K.eat.call(void 0, B.TokenType.arrow); + ? ts.flowParseArrow.call(void 0) + : U.eat.call(void 0, B.TokenType.arrow); } - et.parseArrow = gl; - function wl() { + tt.parseArrow = Nl; + function Dl() { (j.isTypeScriptEnabled || j.isFlowEnabled) && - Vp.typedParseParenItem.call(void 0); + Jp.typedParseParenItem.call(void 0); } - function Bk() { + function Qk() { if ( - (Pe.expect.call(void 0, B.TokenType._new), - K.eat.call(void 0, B.TokenType.dot)) + (Ne.expect.call(void 0, B.TokenType._new), + U.eat.call(void 0, B.TokenType.dot)) ) { - Xn(); + es(); return; } - Vk(), - j.isFlowEnabled && Yn.flowStartParseNewArguments.call(void 0), - K.eat.call(void 0, B.TokenType.parenL) && Qp(B.TokenType.parenR); + Zk(), + j.isFlowEnabled && ts.flowStartParseNewArguments.call(void 0), + U.eat.call(void 0, B.TokenType.parenL) && uh(B.TokenType.parenR); } - function Vk() { - Cl(), K.eat.call(void 0, B.TokenType.questionDot); + function Zk() { + Ol(), U.eat.call(void 0, B.TokenType.questionDot); } - function Sl() { + function Ml() { for ( - K.nextTemplateToken.call(void 0), K.nextTemplateToken.call(void 0); - !K.match.call(void 0, B.TokenType.backQuote) && !j.state.error; + U.nextTemplateToken.call(void 0), U.nextTemplateToken.call(void 0); + !U.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) { + Ne.expect.call(void 0, B.TokenType.dollarBraceL), + lr(), + U.nextTemplateToken.call(void 0), + U.nextTemplateToken.call(void 0); + U.next.call(void 0); + } + tt.parseTemplate = Ml; + function lh(e, t) { let s = j.getNextContextId.call(void 0), i = !0; for ( - K.next.call(void 0), + U.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; + !U.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)) + (Ne.expect.call(void 0, B.TokenType.comma), + U.eat.call(void 0, B.TokenType.braceR)) ) break; let r = !1; - if (K.match.call(void 0, B.TokenType.ellipsis)) { + if (U.match.call(void 0, B.TokenType.ellipsis)) { let a = j.state.tokens.length; if ( - (ds.parseSpread.call(void 0), + (ks.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))) + ks.markPriorBindingIdentifier.call(void 0, t), + U.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); + e || (r = U.eat.call(void 0, B.TokenType.star)), + !e && Ne.isContextual.call(void 0, Zn.ContextualKeyword._async) + ? (r && Ne.unexpected.call(void 0), + es(), + U.match.call(void 0, B.TokenType.colon) || + U.match.call(void 0, B.TokenType.parenL) || + U.match.call(void 0, B.TokenType.braceR) || + U.match.call(void 0, B.TokenType.eq) || + U.match.call(void 0, B.TokenType.comma) || + (U.match.call(void 0, B.TokenType.star) && + (U.next.call(void 0), (r = !0)), + So(s))) + : So(s), + s0(e, t, s); } j.state.tokens[j.state.tokens.length - 1].contextId = s; } - et.parseObj = Yp; - function jk(e) { + tt.parseObj = lh; + function e0(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) || + (U.match.call(void 0, B.TokenType.string) || + U.match.call(void 0, B.TokenType.num) || + U.match.call(void 0, B.TokenType.bracketL) || + U.match.call(void 0, B.TokenType.name) || !!(j.state.type & B.TokenType.IS_KEYWORD)) ); } - function $k(e, t) { + function t0(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) + return U.match.call(void 0, B.TokenType.parenL) + ? (e && Ne.unexpected.call(void 0), Rl(s, !1), !0) + : e0(e) + ? (So(t), Rl(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); + function n0(e, t) { + if (U.eat.call(void 0, B.TokenType.colon)) { + e ? ks.parseMaybeDefault.call(void 0, t) : yn(!1); return; } let s; e ? j.state.scopeDepth === 0 - ? (s = K.IdentifierRole.ObjectShorthandTopLevelDeclaration) + ? (s = U.IdentifierRole.ObjectShorthandTopLevelDeclaration) : t - ? (s = K.IdentifierRole.ObjectShorthandBlockScopedDeclaration) - : (s = K.IdentifierRole.ObjectShorthandFunctionScopedDeclaration) - : (s = K.IdentifierRole.ObjectShorthand), + ? (s = U.IdentifierRole.ObjectShorthandBlockScopedDeclaration) + : (s = U.IdentifierRole.ObjectShorthandFunctionScopedDeclaration) + : (s = U.IdentifierRole.ObjectShorthand), (j.state.tokens[j.state.tokens.length - 1].identifierRole = s), - ds.parseMaybeDefault.call(void 0, t, !0); + ks.parseMaybeDefault.call(void 0, t, !0); } - function Kk(e, t, s) { + function s0(e, t, s) { j.isTypeScriptEnabled - ? ms.tsStartParseObjPropValue.call(void 0) - : j.isFlowEnabled && Yn.flowStartParseObjPropValue.call(void 0), - $k(e, s) || qk(e, t); + ? vs.tsStartParseObjPropValue.call(void 0) + : j.isFlowEnabled && ts.flowStartParseObjPropValue.call(void 0), + t0(e, s) || n0(e, t); } - function go(e) { - j.isFlowEnabled && Yn.flowParseVariance.call(void 0), - K.eat.call(void 0, B.TokenType.bracketL) + function So(e) { + j.isFlowEnabled && ts.flowParseVariance.call(void 0), + U.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), + yn(), + Ne.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(), + : (U.match.call(void 0, B.TokenType.num) || + U.match.call(void 0, B.TokenType.string) || + U.match.call(void 0, B.TokenType.bigint) || + U.match.call(void 0, B.TokenType.decimal) + ? Io() + : wo(), (j.state.tokens[j.state.tokens.length - 1].identifierRole = - K.IdentifierRole.ObjectKey), + U.IdentifierRole.ObjectKey), (j.state.tokens[j.state.tokens.length - 1].contextId = e)); } - et.parsePropertyName = go; - function _l(e, t) { + tt.parsePropertyName = So; + function Rl(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); + _n.parseFunctionParams.call(void 0, r, s), ch(e, s); let a = j.state.tokens.length; - j.state.scopes.push(new jp.Scope(i, a, !0)), j.state.scopeDepth--; + j.state.scopes.push(new Qp.Scope(i, a, !0)), j.state.scopeDepth--; } - et.parseMethod = _l; - function ir(e) { - Il(!0); + tt.parseMethod = Rl; + function cr(e) { + Fl(!0); let t = j.state.tokens.length; - j.state.scopes.push(new jp.Scope(e, t, !0)), j.state.scopeDepth--; + j.state.scopes.push(new Qp.Scope(e, t, !0)), j.state.scopeDepth--; } - et.parseArrowExpression = ir; - function Jp(e, t = 0) { + tt.parseArrowExpression = cr; + function ch(e, t = 0) { j.isTypeScriptEnabled - ? ms.tsParseFunctionBodyAndFinish.call(void 0, e, t) + ? vs.tsParseFunctionBodyAndFinish.call(void 0, e, t) : j.isFlowEnabled - ? Yn.flowParseFunctionBodyAndFinish.call(void 0, t) - : Il(!1, t); + ? ts.flowParseFunctionBodyAndFinish.call(void 0, t) + : Fl(!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); + tt.parseFunctionBodyAndFinish = ch; + function Fl(e, t = 0) { + e && !U.match.call(void 0, B.TokenType.braceL) + ? yn() + : _n.parseBlock.call(void 0, !0, t); } - et.parseFunctionBody = Il; - function Qp(e, t = !1) { + tt.parseFunctionBody = Fl; + function uh(e, t = !1) { let s = !0; - for (; !K.eat.call(void 0, e) && !j.state.error; ) { + for (; !U.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)) + (Ne.expect.call(void 0, B.TokenType.comma), U.eat.call(void 0, e)) ) break; - Zp(t); + ph(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 ph(e) { + (e && U.match.call(void 0, B.TokenType.comma)) || + (U.match.call(void 0, B.TokenType.ellipsis) + ? (ks.parseSpread.call(void 0), Dl()) + : U.match.call(void 0, B.TokenType.question) + ? U.next.call(void 0) + : yn(!1, !0)); } - function Xn() { - K.next.call(void 0), + function es() { + U.next.call(void 0), (j.state.tokens[j.state.tokens.length - 1].type = B.TokenType.name); } - et.parseIdentifier = Xn; - function Uk() { - rr(); + tt.parseIdentifier = es; + function i0() { + ur(); } - 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 r0() { + U.next.call(void 0), + !U.match.call(void 0, B.TokenType.semi) && + !Ne.canInsertSemicolon.call(void 0) && + (U.eat.call(void 0, B.TokenType.star), yn()); } - 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); + function o0() { + Ne.expectContextual.call(void 0, Zn.ContextualKeyword._module), + Ne.expect.call(void 0, B.TokenType.braceL), + _n.parseBlockBody.call(void 0, B.TokenType.braceR); } }); - var Ji = Z((Je) => { + var nr = Z((Qe) => { '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) { + Object.defineProperty(Qe, '__esModule', {value: !0}); + var C = _t(), + ye = Et(), + _ = Ce(), + pe = nn(), + $e = Os(), + xs = ar(), + z = fs(); + function a0(e) { return ( (e.type === _.TokenType.name || !!(e.type & _.TokenType.IS_KEYWORD)) && e.contextualKeyword !== ye.ContextualKeyword._from ); } - function Ln(e) { + function Mn(e) { let t = C.pushTypeContext.call(void 0, 0); z.expect.call(void 0, e || _.TokenType.colon), - Wt(), + Gt(), C.popTypeContext.call(void 0, t); } - function eh() { + function hh() { 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), + ($e.parseExpression.call(void 0), z.expect.call(void 0, _.TokenType.parenR)); } - function Pl() { + function jl() { 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()), + ? hh() + : (Gt(), C.match.call(void 0, _.TokenType.modulo) && hh()), C.popTypeContext.call(void 0, e); } - function zk() { - C.next.call(void 0), Nl(!0); + function l0() { + C.next.call(void 0), $l(!0); } - function Xk() { + function c0() { C.next.call(void 0), - je.parseIdentifier.call(void 0), - C.match.call(void 0, _.TokenType.lessThan) && On(), + $e.parseIdentifier.call(void 0), + C.match.call(void 0, _.TokenType.lessThan) && Fn(), z.expect.call(void 0, _.TokenType.parenL), - Al(), + Vl(), z.expect.call(void 0, _.TokenType.parenR), - Pl(), + jl(), z.semicolon.call(void 0); } - function El() { + function Bl() { C.match.call(void 0, _.TokenType._class) - ? zk() + ? l0() : C.match.call(void 0, _.TokenType._function) - ? Xk() + ? c0() : C.match.call(void 0, _.TokenType._var) - ? Yk() + ? u0() : z.eatContextual.call(void 0, ye.ContextualKeyword._module) ? C.eat.call(void 0, _.TokenType.dot) - ? Zk() - : Jk() + ? f0() + : p0() : z.isContextual.call(void 0, ye.ContextualKeyword._type) - ? e0() + ? d0() : z.isContextual.call(void 0, ye.ContextualKeyword._opaque) - ? t0() + ? m0() : z.isContextual.call(void 0, ye.ContextualKeyword._interface) - ? n0() + ? T0() : C.match.call(void 0, _.TokenType._export) - ? Qk() + ? h0() : z.unexpected.call(void 0); } - function Yk() { - C.next.call(void 0), oh(), z.semicolon.call(void 0); + function u0() { + C.next.call(void 0), kh(), z.semicolon.call(void 0); } - function Jk() { + function p0() { for ( C.match.call(void 0, _.TokenType.string) - ? je.parseExprAtom.call(void 0) - : je.parseIdentifier.call(void 0), + ? $e.parseExprAtom.call(void 0) + : $e.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.braceR) && !pe.state.error; ) C.match.call(void 0, _.TokenType._import) - ? (C.next.call(void 0), ys.parseImport.call(void 0)) + ? (C.next.call(void 0), xs.parseImport.call(void 0)) : z.unexpected.call(void 0); z.expect.call(void 0, _.TokenType.braceR); } - function Qk() { + function h0() { 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)) + ? Bl() + : (Gt(), 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() + ? Bl() : 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) + ? xs.parseExport.call(void 0) : z.unexpected.call(void 0); } - function Zk() { + function f0() { z.expectContextual.call(void 0, ye.ContextualKeyword._exports), - vi(), + gi(), z.semicolon.call(void 0); } - function e0() { - C.next.call(void 0), Ll(); + function d0() { + C.next.call(void 0), ql(); } - function t0() { - C.next.call(void 0), Ol(!0); + function m0() { + C.next.call(void 0), Ul(!0); } - function n0() { - C.next.call(void 0), Nl(); + function T0() { + C.next.call(void 0), $l(); } - function Nl(e = !1) { + function $l(e = !1) { if ( - (So(), - C.match.call(void 0, _.TokenType.lessThan) && On(), + (No(), + C.match.call(void 0, _.TokenType.lessThan) && Fn(), C.eat.call(void 0, _.TokenType._extends)) ) - do bo(); + do Eo(); 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(); + do Eo(); while (C.eat.call(void 0, _.TokenType.comma)); } if (z.isContextual.call(void 0, ye.ContextualKeyword._implements)) { C.next.call(void 0); - do bo(); + do Eo(); while (C.eat.call(void 0, _.TokenType.comma)); } - Co(e, !1, e); + Ao(e, !1, e); } - function bo() { - sh(!1), C.match.call(void 0, _.TokenType.lessThan) && Rs(); + function Eo() { + mh(!1), C.match.call(void 0, _.TokenType.lessThan) && Ds(); } - function Rl() { - Nl(); + function Kl() { + $l(); } - function So() { - je.parseIdentifier.call(void 0); + function No() { + $e.parseIdentifier.call(void 0); } - function Ll() { - So(), - C.match.call(void 0, _.TokenType.lessThan) && On(), - Ln(_.TokenType.eq), + function ql() { + No(), + C.match.call(void 0, _.TokenType.lessThan) && Fn(), + Mn(_.TokenType.eq), z.semicolon.call(void 0); } - function Ol(e) { + function Ul(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), + No(), + C.match.call(void 0, _.TokenType.lessThan) && Fn(), + C.match.call(void 0, _.TokenType.colon) && Mn(_.TokenType.colon), + e || Mn(_.TokenType.eq), z.semicolon.call(void 0); } - function s0() { - Fl(), oh(), C.eat.call(void 0, _.TokenType.eq) && Wt(); + function y0() { + Gl(), kh(), C.eat.call(void 0, _.TokenType.eq) && Gt(); } - function On() { + function Fn() { 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(), + y0(), 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); + while (!C.match.call(void 0, _.TokenType.greaterThan) && !pe.state.error); z.expect.call(void 0, _.TokenType.greaterThan), C.popTypeContext.call(void 0, e); } - Je.flowParseTypeParameterDeclaration = On; - function Rs() { + Qe.flowParseTypeParameterDeclaration = Fn; + function Ds() { 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; + !C.match.call(void 0, _.TokenType.greaterThan) && !pe.state.error; ) - Wt(), + Gt(), 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() { + function k0() { if ( (z.expectContextual.call(void 0, ye.ContextualKeyword._interface), C.eat.call(void 0, _.TokenType._extends)) ) - do bo(); + do Eo(); while (C.eat.call(void 0, _.TokenType.comma)); - Co(!1, !1, !1); + Ao(!1, !1, !1); } - function Dl() { + function Hl() { C.match.call(void 0, _.TokenType.num) || C.match.call(void 0, _.TokenType.string) - ? je.parseExprAtom.call(void 0) - : je.parseIdentifier.call(void 0); + ? $e.parseExprAtom.call(void 0) + : $e.parseIdentifier.call(void 0); } - function r0() { - C.lookaheadType.call(void 0) === _.TokenType.colon ? (Dl(), Ln()) : Wt(), + function v0() { + C.lookaheadType.call(void 0) === _.TokenType.colon ? (Hl(), Mn()) : Gt(), z.expect.call(void 0, _.TokenType.bracketR), - Ln(); + Mn(); } - function o0() { - Dl(), + function x0() { + Hl(), 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()); + ? Wl() + : (C.eat.call(void 0, _.TokenType.question), Mn()); } - function Ml() { + function Wl() { for ( - C.match.call(void 0, _.TokenType.lessThan) && On(), + C.match.call(void 0, _.TokenType.lessThan) && Fn(), z.expect.call(void 0, _.TokenType.parenL); !C.match.call(void 0, _.TokenType.parenR) && !C.match.call(void 0, _.TokenType.ellipsis) && - !ue.state.error; + !pe.state.error; ) - wo(), + Po(), C.match.call(void 0, _.TokenType.parenR) || z.expect.call(void 0, _.TokenType.comma); - C.eat.call(void 0, _.TokenType.ellipsis) && wo(), + C.eat.call(void 0, _.TokenType.ellipsis) && Po(), z.expect.call(void 0, _.TokenType.parenR), - Ln(); + Mn(); } - function a0() { - Ml(); + function g0() { + Wl(); } - function Co(e, t, s) { + function Ao(e, t, s) { let i; for ( t && C.match.call(void 0, _.TokenType.braceBarL) @@ -20320,7 +20382,7 @@ If you need interactivity, consider converting part of this to a Client Componen (i = _.TokenType.braceBarR)) : (z.expect.call(void 0, _.TokenType.braceL), (i = _.TokenType.braceR)); - !C.match.call(void 0, i) && !ue.state.error; + !C.match.call(void 0, i) && !pe.state.error; ) { if (s && z.isContextual.call(void 0, ye.ContextualKeyword._proto)) { @@ -20335,13 +20397,13 @@ If you need interactivity, consider converting part of this to a Client Componen 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(); + if ((Gl(), C.eat.call(void 0, _.TokenType.bracketL))) + C.eat.call(void 0, _.TokenType.bracketL) ? x0() : v0(); else if ( C.match.call(void 0, _.TokenType.parenL) || C.match.call(void 0, _.TokenType.lessThan) ) - a0(); + g0(); else { if ( z.isContextual.call(void 0, ye.ContextualKeyword._get) || @@ -20353,13 +20415,13 @@ If you need interactivity, consider converting part of this to a Client Componen r === _.TokenType.num) && C.next.call(void 0); } - l0(); + _0(); } - c0(); + b0(); } z.expect.call(void 0, i); } - function l0() { + function _0() { if (C.match.call(void 0, _.TokenType.ellipsis)) { if ( (z.expect.call(void 0, _.TokenType.ellipsis), @@ -20368,95 +20430,95 @@ If you need interactivity, consider converting part of this to a Client Componen C.match.call(void 0, _.TokenType.braceR)) ) return; - Wt(); + Gt(); } else - Dl(), + Hl(), C.match.call(void 0, _.TokenType.lessThan) || C.match.call(void 0, _.TokenType.parenL) - ? Ml() - : (C.eat.call(void 0, _.TokenType.question), Ln()); + ? Wl() + : (C.eat.call(void 0, _.TokenType.question), Mn()); } - function c0() { + function b0() { !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) { + function mh(e) { for ( - e || je.parseIdentifier.call(void 0); + e || $e.parseIdentifier.call(void 0); C.eat.call(void 0, _.TokenType.dot); ) - je.parseIdentifier.call(void 0); + $e.parseIdentifier.call(void 0); } - function u0() { - sh(!0), C.match.call(void 0, _.TokenType.lessThan) && Rs(); + function C0() { + mh(!0), C.match.call(void 0, _.TokenType.lessThan) && Ds(); } - function p0() { - z.expect.call(void 0, _.TokenType._typeof), ih(); + function w0() { + z.expect.call(void 0, _.TokenType._typeof), Th(); } - function h0() { + function S0() { for ( z.expect.call(void 0, _.TokenType.bracketL); - ue.state.pos < ue.input.length && + pe.state.pos < pe.input.length && !C.match.call(void 0, _.TokenType.bracketR) && - (Wt(), !C.match.call(void 0, _.TokenType.bracketR)); + (Gt(), !C.match.call(void 0, _.TokenType.bracketR)); ) z.expect.call(void 0, _.TokenType.comma); z.expect.call(void 0, _.TokenType.bracketR); } - function wo() { + function Po() { let e = C.lookaheadType.call(void 0); e === _.TokenType.colon || e === _.TokenType.question - ? (je.parseIdentifier.call(void 0), + ? ($e.parseIdentifier.call(void 0), C.eat.call(void 0, _.TokenType.question), - Ln()) - : Wt(); + Mn()) + : Gt(); } - function Al() { + function Vl() { for ( ; !C.match.call(void 0, _.TokenType.parenR) && !C.match.call(void 0, _.TokenType.ellipsis) && - !ue.state.error; + !pe.state.error; ) - wo(), + Po(), C.match.call(void 0, _.TokenType.parenR) || z.expect.call(void 0, _.TokenType.comma); - C.eat.call(void 0, _.TokenType.ellipsis) && wo(); + C.eat.call(void 0, _.TokenType.ellipsis) && Po(); } - function ih() { + function Th() { let e = !1, - t = ue.state.noAnonFunctionType; - switch (ue.state.type) { + t = pe.state.noAnonFunctionType; + switch (pe.state.type) { case _.TokenType.name: { if (z.isContextual.call(void 0, ye.ContextualKeyword._interface)) { - i0(); + k0(); return; } - je.parseIdentifier.call(void 0), u0(); + $e.parseIdentifier.call(void 0), C0(); return; } case _.TokenType.braceL: - Co(!1, !1, !1); + Ao(!1, !1, !1); return; case _.TokenType.braceBarL: - Co(!1, !0, !1); + Ao(!1, !0, !1); return; case _.TokenType.bracketL: - h0(); + S0(); return; case _.TokenType.lessThan: - On(), + Fn(), z.expect.call(void 0, _.TokenType.parenL), - Al(), + Vl(), z.expect.call(void 0, _.TokenType.parenR), z.expect.call(void 0, _.TokenType.arrow), - Wt(); + Gt(); return; case _.TokenType.parenL: if ( @@ -20470,10 +20532,10 @@ If you need interactivity, consider converting part of this to a Client Componen } else e = !0; if (e) if ( - ((ue.state.noAnonFunctionType = !1), - Wt(), - (ue.state.noAnonFunctionType = t), - ue.state.noAnonFunctionType || + ((pe.state.noAnonFunctionType = !1), + Gt(), + (pe.state.noAnonFunctionType = t), + pe.state.noAnonFunctionType || !( C.match.call(void 0, _.TokenType.comma) || (C.match.call(void 0, _.TokenType.parenR) && @@ -20483,13 +20545,13 @@ If you need interactivity, consider converting part of this to a Client Componen z.expect.call(void 0, _.TokenType.parenR); return; } else C.eat.call(void 0, _.TokenType.comma); - Al(), + Vl(), z.expect.call(void 0, _.TokenType.parenR), z.expect.call(void 0, _.TokenType.arrow), - Wt(); + Gt(); return; case _.TokenType.minus: - C.next.call(void 0), je.parseLiteral.call(void 0); + C.next.call(void 0), $e.parseLiteral.call(void 0); return; case _.TokenType.string: case _.TokenType.num: @@ -20502,21 +20564,21 @@ If you need interactivity, consider converting part of this to a Client Componen C.next.call(void 0); return; default: - if (ue.state.type === _.TokenType._typeof) { - p0(); + if (pe.state.type === _.TokenType._typeof) { + w0(); return; - } else if (ue.state.type & _.TokenType.IS_KEYWORD) { + } else if (pe.state.type & _.TokenType.IS_KEYWORD) { C.next.call(void 0), - (ue.state.tokens[ue.state.tokens.length - 1].type = + (pe.state.tokens[pe.state.tokens.length - 1].type = _.TokenType.name); return; } } z.unexpected.call(void 0); } - function f0() { + function I0() { for ( - ih(); + Th(); !z.canInsertSemicolon.call(void 0) && (C.match.call(void 0, _.TokenType.bracketL) || C.match.call(void 0, _.TokenType.questionDot)); @@ -20525,57 +20587,57 @@ If you need interactivity, consider converting part of this to a Client Componen 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)); + (Gt(), z.expect.call(void 0, _.TokenType.bracketR)); } - function rh() { - C.eat.call(void 0, _.TokenType.question) ? rh() : f0(); + function yh() { + C.eat.call(void 0, _.TokenType.question) ? yh() : I0(); } - function th() { - rh(), - !ue.state.noAnonFunctionType && + function fh() { + yh(), + !pe.state.noAnonFunctionType && C.eat.call(void 0, _.TokenType.arrow) && - Wt(); + Gt(); } - function nh() { + function dh() { for ( - C.eat.call(void 0, _.TokenType.bitwiseAND), th(); + C.eat.call(void 0, _.TokenType.bitwiseAND), fh(); C.eat.call(void 0, _.TokenType.bitwiseAND); ) - th(); + fh(); } - function d0() { + function E0() { for ( - C.eat.call(void 0, _.TokenType.bitwiseOR), nh(); + C.eat.call(void 0, _.TokenType.bitwiseOR), dh(); C.eat.call(void 0, _.TokenType.bitwiseOR); ) - nh(); + dh(); } - function Wt() { - d0(); + function Gt() { + E0(); } - function vi() { - Ln(); + function gi() { + Mn(); } - Je.flowParseTypeAnnotation = vi; - function oh() { - je.parseIdentifier.call(void 0), - C.match.call(void 0, _.TokenType.colon) && vi(); + Qe.flowParseTypeAnnotation = gi; + function kh() { + $e.parseIdentifier.call(void 0), + C.match.call(void 0, _.TokenType.colon) && gi(); } - function Fl() { + function Gl() { (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)); + (pe.state.tokens[pe.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); + Qe.flowParseVariance = Gl; + function A0(e) { + C.match.call(void 0, _.TokenType.colon) && jl(), + $e.parseFunctionBody.call(void 0, !1, e); } - Je.flowParseFunctionBodyAndFinish = m0; - function y0(e, t, s) { + Qe.flowParseFunctionBodyAndFinish = A0; + function P0(e, t, s) { if ( C.match.call(void 0, _.TokenType.questionDot) && C.lookaheadType.call(void 0) === _.TokenType.lessThan @@ -20585,50 +20647,50 @@ If you need interactivity, consider converting part of this to a Client Componen return; } C.next.call(void 0), - Rs(), + Ds(), z.expect.call(void 0, _.TokenType.parenL), - je.parseCallExpressionArguments.call(void 0); + $e.parseCallExpressionArguments.call(void 0); return; } else if (!t && C.match.call(void 0, _.TokenType.lessThan)) { - let i = ue.state.snapshot(); + let i = pe.state.snapshot(); if ( - (Rs(), + (Ds(), z.expect.call(void 0, _.TokenType.parenL), - je.parseCallExpressionArguments.call(void 0), - ue.state.error) + $e.parseCallExpressionArguments.call(void 0), + pe.state.error) ) - ue.state.restoreFromSnapshot(i); + pe.state.restoreFromSnapshot(i); else return; } - je.baseParseSubscript.call(void 0, e, t, s); + $e.baseParseSubscript.call(void 0, e, t, s); } - Je.flowParseSubscript = y0; - function T0() { + Qe.flowParseSubscript = P0; + function N0() { if (C.match.call(void 0, _.TokenType.lessThan)) { - let e = ue.state.snapshot(); - Rs(), ue.state.error && ue.state.restoreFromSnapshot(e); + let e = pe.state.snapshot(); + Ds(), pe.state.error && pe.state.restoreFromSnapshot(e); } } - Je.flowStartParseNewArguments = T0; - function k0() { + Qe.flowStartParseNewArguments = N0; + function R0() { if ( C.match.call(void 0, _.TokenType.name) && - ue.state.contextualKeyword === ye.ContextualKeyword._interface + pe.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; + return C.next.call(void 0), Kl(), C.popTypeContext.call(void 0, e), !0; } else if (z.isContextual.call(void 0, ye.ContextualKeyword._enum)) - return ah(), !0; + return vh(), !0; return !1; } - Je.flowTryParseStatement = k0; - function v0() { + Qe.flowTryParseStatement = R0; + function L0() { return z.isContextual.call(void 0, ye.ContextualKeyword._enum) - ? (ah(), !0) + ? (vh(), !0) : !1; } - Je.flowTryParseExportDefaultExpression = v0; - function x0(e) { + Qe.flowTryParseExportDefaultExpression = L0; + function O0(e) { if (e === ye.ContextualKeyword._declare) { if ( C.match.call(void 0, _.TokenType._class) || @@ -20638,24 +20700,24 @@ If you need interactivity, consider converting part of this to a Client Componen C.match.call(void 0, _.TokenType._export) ) { let t = C.pushTypeContext.call(void 0, 1); - El(), C.popTypeContext.call(void 0, t); + Bl(), 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); + Kl(), 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); + ql(), 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); + Ul(!1), C.popTypeContext.call(void 0, t); } } z.semicolon.call(void 0); } - Je.flowParseIdentifierStatement = x0; - function g0() { + Qe.flowParseIdentifierStatement = O0; + function D0() { return ( z.isContextual.call(void 0, ye.ContextualKeyword._type) || z.isContextual.call(void 0, ye.ContextualKeyword._interface) || @@ -20663,317 +20725,317 @@ If you need interactivity, consider converting part of this to a Client Componen z.isContextual.call(void 0, ye.ContextualKeyword._enum) ); } - Je.flowShouldParseExportDeclaration = g0; - function _0() { + Qe.flowShouldParseExportDeclaration = D0; + function M0() { 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) + (pe.state.contextualKeyword === ye.ContextualKeyword._type || + pe.state.contextualKeyword === ye.ContextualKeyword._interface || + pe.state.contextualKeyword === ye.ContextualKeyword._opaque || + pe.state.contextualKeyword === ye.ContextualKeyword._enum) ); } - Je.flowShouldDisallowExportDefaultSpecifier = _0; - function b0() { + Qe.flowShouldDisallowExportDefaultSpecifier = M0; + function F0() { 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(), + ? (xs.parseExportSpecifiers.call(void 0), + xs.parseExportFrom.call(void 0)) + : ql(), 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); + C.next.call(void 0), Ul(!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); + C.next.call(void 0), Kl(), C.popTypeContext.call(void 0, e); + } else xs.parseStatement.call(void 0, !0); } - Je.flowParseExportDeclaration = b0; - function C0() { + Qe.flowParseExportDeclaration = F0; + function B0() { 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() { + Qe.flowShouldParseExportStar = B0; + function V0() { 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); + xs.baseParseExportStar.call(void 0), C.popTypeContext.call(void 0, e); + } else xs.baseParseExportStar.call(void 0); } - Je.flowParseExportStar = w0; - function S0(e) { + Qe.flowParseExportStar = V0; + function j0(e) { if ( - (e && C.match.call(void 0, _.TokenType.lessThan) && Rs(), + (e && C.match.call(void 0, _.TokenType.lessThan) && Ds(), 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 = + (pe.state.tokens[pe.state.tokens.length - 1].type = _.TokenType._implements); - do So(), C.match.call(void 0, _.TokenType.lessThan) && Rs(); + do No(), C.match.call(void 0, _.TokenType.lessThan) && Ds(); while (C.eat.call(void 0, _.TokenType.comma)); C.popTypeContext.call(void 0, t); } } - Je.flowAfterParseClassSuper = S0; - function I0() { + Qe.flowAfterParseClassSuper = j0; + function $0() { C.match.call(void 0, _.TokenType.lessThan) && - (On(), + (Fn(), C.match.call(void 0, _.TokenType.parenL) || z.unexpected.call(void 0)); } - Je.flowStartParseObjPropValue = I0; - function E0() { + Qe.flowStartParseObjPropValue = $0; + function K0() { let e = C.pushTypeContext.call(void 0, 0); C.eat.call(void 0, _.TokenType.question), - C.match.call(void 0, _.TokenType.colon) && vi(), + C.match.call(void 0, _.TokenType.colon) && gi(), C.popTypeContext.call(void 0, e); } - Je.flowParseAssignableListItemTypes = E0; - function A0() { + Qe.flowParseAssignableListItemTypes = K0; + function q0() { 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) || + (a0(e) || e.type === _.TokenType.braceL || e.type === _.TokenType.star) && C.next.call(void 0); } } - Je.flowStartParseImportSpecifiers = A0; - function P0() { + Qe.flowStartParseImportSpecifiers = q0; + function U0() { let e = - ue.state.contextualKeyword === ye.ContextualKeyword._type || - ue.state.type === _.TokenType._typeof; - e ? C.next.call(void 0) : je.parseIdentifier.call(void 0), + pe.state.contextualKeyword === ye.ContextualKeyword._type || + pe.state.type === _.TokenType._typeof; + e ? C.next.call(void 0) : $e.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.parseIdentifier.call(void 0), (e && !C.match.call(void 0, _.TokenType.name) && - !(ue.state.type & _.TokenType.IS_KEYWORD)) || - je.parseIdentifier.call(void 0)) + !(pe.state.type & _.TokenType.IS_KEYWORD)) || + $e.parseIdentifier.call(void 0)) : (e && (C.match.call(void 0, _.TokenType.name) || - ue.state.type & _.TokenType.IS_KEYWORD) && - je.parseIdentifier.call(void 0), + pe.state.type & _.TokenType.IS_KEYWORD) && + $e.parseIdentifier.call(void 0), z.eatContextual.call(void 0, ye.ContextualKeyword._as) && - je.parseIdentifier.call(void 0)); + $e.parseIdentifier.call(void 0)); } - Je.flowParseImportSpecifier = P0; - function N0() { + Qe.flowParseImportSpecifier = U0; + function H0() { if (C.match.call(void 0, _.TokenType.lessThan)) { let e = C.pushTypeContext.call(void 0, 0); - On(), C.popTypeContext.call(void 0, e); + Fn(), C.popTypeContext.call(void 0, e); } } - Je.flowStartParseFunctionParams = N0; - function R0() { - C.match.call(void 0, _.TokenType.colon) && vi(); + Qe.flowStartParseFunctionParams = H0; + function W0() { + C.match.call(void 0, _.TokenType.colon) && gi(); } - Je.flowAfterParseVarHead = R0; - function L0() { + Qe.flowAfterParseVarHead = W0; + function G0() { if (C.match.call(void 0, _.TokenType.colon)) { - let e = ue.state.noAnonFunctionType; - (ue.state.noAnonFunctionType = !0), - vi(), - (ue.state.noAnonFunctionType = e); + let e = pe.state.noAnonFunctionType; + (pe.state.noAnonFunctionType = !0), + gi(), + (pe.state.noAnonFunctionType = e); } } - Je.flowStartParseAsyncArrowFromCallExpression = L0; - function O0(e, t) { + Qe.flowStartParseAsyncArrowFromCallExpression = G0; + function z0(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); + let s = pe.state.snapshot(), + i = $e.baseParseMaybeAssign.call(void 0, e, t); + if (pe.state.error) + pe.state.restoreFromSnapshot(s), + (pe.state.type = _.TokenType.typeParameterStart); else return i; let r = C.pushTypeContext.call(void 0, 0); if ( - (On(), + (Fn(), C.popTypeContext.call(void 0, r), - (i = je.baseParseMaybeAssign.call(void 0, e, t)), + (i = $e.baseParseMaybeAssign.call(void 0, e, t)), i) ) return !0; z.unexpected.call(void 0); } - return je.baseParseMaybeAssign.call(void 0, e, t); + return $e.baseParseMaybeAssign.call(void 0, e, t); } - Je.flowParseMaybeAssign = O0; - function D0() { + Qe.flowParseMaybeAssign = z0; + function X0() { 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), + t = pe.state.snapshot(), + s = pe.state.noAnonFunctionType; + (pe.state.noAnonFunctionType = !0), + jl(), + (pe.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), + pe.state.error && pe.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) { + Qe.flowParseArrow = X0; + function Y0(e, t = !1) { if ( - ue.state.tokens[ue.state.tokens.length - 1].contextualKeyword === + pe.state.tokens[pe.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); + let s = pe.state.snapshot(); + if (J0() && !pe.state.error) return; + pe.state.restoreFromSnapshot(s); } - je.baseParseSubscripts.call(void 0, e, t); + $e.baseParseSubscripts.call(void 0, e, t); } - Je.flowParseSubscripts = M0; - function F0() { - ue.state.scopeDepth++; - let e = ue.state.tokens.length; + Qe.flowParseSubscripts = Y0; + function J0() { + pe.state.scopeDepth++; + let e = pe.state.tokens.length; return ( - ys.parseFunctionParams.call(void 0), - je.parseArrow.call(void 0) - ? (je.parseArrowExpression.call(void 0, e), !0) + xs.parseFunctionParams.call(void 0), + $e.parseArrow.call(void 0) + ? ($e.parseArrowExpression.call(void 0, e), !0) : !1 ); } - function ah() { + function vh() { 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(); + (pe.state.tokens[pe.state.tokens.length - 1].type = _.TokenType._enum), + $e.parseIdentifier.call(void 0), + Q0(); } - function B0() { + function Q0() { z.eatContextual.call(void 0, ye.ContextualKeyword._of) && C.next.call(void 0), z.expect.call(void 0, _.TokenType.braceL), - V0(), + Z0(), z.expect.call(void 0, _.TokenType.braceR); } - function V0() { + function Z0() { for ( ; !C.match.call(void 0, _.TokenType.braceR) && - !ue.state.error && + !pe.state.error && !C.eat.call(void 0, _.TokenType.ellipsis); ) - j0(), + ev(), C.match.call(void 0, _.TokenType.braceR) || z.expect.call(void 0, _.TokenType.comma); } - function j0() { - je.parseIdentifier.call(void 0), + function ev() { + $e.parseIdentifier.call(void 0), C.eat.call(void 0, _.TokenType.eq) && C.next.call(void 0); } }); - var nr = Z((Tt) => { + var ar = Z((kt) => { '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() { + Object.defineProperty(kt, '__esModule', {value: !0}); + var tv = ec(), + Ft = nr(), + mt = di(), + $ = _t(), + ve = Et(), + gs = Gr(), + D = Ce(), + xh = tn(), + P = nn(), + Me = Os(), + _s = fo(), + ee = fs(); + function nv() { if ( - (ql(D.TokenType.eof), - P.state.scopes.push(new Ts.Scope(0, P.state.tokens.length, !0)), + (Ql(D.TokenType.eof), + P.state.scopes.push(new gs.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); + return new tv.File(P.state.tokens, P.state.scopes); } - Tt.parseTopLevel = q0; - function _n(e) { + kt.parseTopLevel = nv; + function bn(e) { (P.isFlowEnabled && Ft.flowTryParseStatement.call(void 0)) || - ($.match.call(void 0, D.TokenType.at) && $l(), K0(e)); + ($.match.call(void 0, D.TokenType.at) && Jl(), sv(e)); } - Tt.parseStatement = _n; - function K0(e) { - if (P.isTypeScriptEnabled && dt.tsTryParseStatementContent.call(void 0)) + kt.parseStatement = bn; + function sv(e) { + if (P.isTypeScriptEnabled && mt.tsTryParseStatementContent.call(void 0)) return; let t = P.state.type; switch (t) { case D.TokenType._break: case D.TokenType._continue: - H0(); + rv(); return; case D.TokenType._debugger: - W0(); + ov(); return; case D.TokenType._do: - G0(); + av(); return; case D.TokenType._for: - z0(); + lv(); return; case D.TokenType._function: if ($.lookaheadType.call(void 0) === D.TokenType.dot) break; - e || ee.unexpected.call(void 0), J0(); + e || ee.unexpected.call(void 0), pv(); return; case D.TokenType._class: - e || ee.unexpected.call(void 0), Io(!0); + e || ee.unexpected.call(void 0), Ro(!0); return; case D.TokenType._if: - Q0(); + hv(); return; case D.TokenType._return: - Z0(); + fv(); return; case D.TokenType._switch: - ev(); + dv(); return; case D.TokenType._throw: - tv(); + mv(); return; case D.TokenType._try: - sv(); + yv(); return; case D.TokenType._let: case D.TokenType._const: e || ee.unexpected.call(void 0); case D.TokenType._var: - Vl(t !== D.TokenType._var); + Xl(t !== D.TokenType._var); return; case D.TokenType._while: - iv(); + kv(); return; case D.TokenType.braceL: - gi(); + bi(); return; case D.TokenType.semi: - rv(); + vv(); 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(); + $.next.call(void 0), t === D.TokenType._import ? Rh() : Ah(); return; } case D.TokenType.name: - if (P.state.contextualKeyword === ke.ContextualKeyword._async) { + if (P.state.contextualKeyword === ve.ContextualKeyword._async) { let r = P.state.start, a = P.state.snapshot(); if ( @@ -20981,22 +21043,22 @@ If you need interactivity, consider converting part of this to a Client Componen $.match.call(void 0, D.TokenType._function) && !ee.canInsertSemicolon.call(void 0)) ) { - ee.expect.call(void 0, D.TokenType._function), lr(r, !0); + ee.expect.call(void 0, D.TokenType._function), fr(r, !0); return; } else P.state.restoreFromSnapshot(a); } else if ( - P.state.contextualKeyword === ke.ContextualKeyword._using && + P.state.contextualKeyword === ve.ContextualKeyword._using && !ee.hasFollowingLineBreak.call(void 0) && $.lookaheadType.call(void 0) === D.TokenType.name ) { - Vl(!0); + Xl(!0); return; } default: break; } let s = P.state.tokens.length; - De.parseExpression.call(void 0); + Me.parseExpression.call(void 0); let i = null; if (P.state.tokens.length === s + 1) { let r = P.state.tokens[P.state.tokens.length - 1]; @@ -21006,122 +21068,122 @@ If you need interactivity, consider converting part of this to a Client Componen ee.semicolon.call(void 0); return; } - $.eat.call(void 0, D.TokenType.colon) ? ov() : av(i); + $.eat.call(void 0, D.TokenType.colon) ? xv() : gv(i); } - function $l() { - for (; $.match.call(void 0, D.TokenType.at); ) ph(); + function Jl() { + for (; $.match.call(void 0, D.TokenType.at); ) bh(); } - Tt.parseDecorators = $l; - function ph() { + kt.parseDecorators = Jl; + function bh() { if (($.next.call(void 0), $.eat.call(void 0, D.TokenType.parenL))) - De.parseExpression.call(void 0), + Me.parseExpression.call(void 0), ee.expect.call(void 0, D.TokenType.parenR); else { for ( - De.parseIdentifier.call(void 0); + Me.parseIdentifier.call(void 0); $.eat.call(void 0, D.TokenType.dot); ) - De.parseIdentifier.call(void 0); - U0(); + Me.parseIdentifier.call(void 0); + iv(); } } - function U0() { + function iv() { P.isTypeScriptEnabled - ? dt.tsParseMaybeDecoratorArguments.call(void 0) - : hh(); + ? mt.tsParseMaybeDecoratorArguments.call(void 0) + : Ch(); } - function hh() { + function Ch() { $.eat.call(void 0, D.TokenType.parenL) && - De.parseCallExpressionArguments.call(void 0); + Me.parseCallExpressionArguments.call(void 0); } - Tt.baseParseMaybeDecoratorArguments = hh; - function H0() { + kt.baseParseMaybeDecoratorArguments = Ch; + function rv() { $.next.call(void 0), ee.isLineTerminator.call(void 0) || - (De.parseIdentifier.call(void 0), ee.semicolon.call(void 0)); + (Me.parseIdentifier.call(void 0), ee.semicolon.call(void 0)); } - function W0() { + function ov() { $.next.call(void 0), ee.semicolon.call(void 0); } - function G0() { + function av() { $.next.call(void 0), - _n(!1), + bn(!1), ee.expect.call(void 0, D.TokenType._while), - De.parseParenExpression.call(void 0), + Me.parseParenExpression.call(void 0), $.eat.call(void 0, D.TokenType.semi); } - function z0() { + function lv() { P.state.scopeDepth++; let e = P.state.tokens.length; - Y0(); + uv(); let t = P.state.tokens.length; - P.state.scopes.push(new Ts.Scope(e, t, !1)), P.state.scopeDepth--; + P.state.scopes.push(new gs.Scope(e, t, !1)), P.state.scopeDepth--; } - function X0() { + function cv() { return !( - !ee.isContextual.call(void 0, ke.ContextualKeyword._using) || - ee.isLookaheadContextual.call(void 0, ke.ContextualKeyword._of) + !ee.isContextual.call(void 0, ve.ContextualKeyword._using) || + ee.isLookaheadContextual.call(void 0, ve.ContextualKeyword._of) ); } - function Y0() { + function uv() { $.next.call(void 0); let e = !1; if ( - (ee.isContextual.call(void 0, ke.ContextualKeyword._await) && + (ee.isContextual.call(void 0, ve.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(); + e && ee.unexpected.call(void 0), zl(); return; } if ( $.match.call(void 0, D.TokenType._var) || $.match.call(void 0, D.TokenType._let) || $.match.call(void 0, D.TokenType._const) || - X0() + cv() ) { if ( ($.next.call(void 0), - fh(!0, P.state.type !== D.TokenType._var), + wh(!0, P.state.type !== D.TokenType._var), $.match.call(void 0, D.TokenType._in) || - ee.isContextual.call(void 0, ke.ContextualKeyword._of)) + ee.isContextual.call(void 0, ve.ContextualKeyword._of)) ) { - ch(e); + gh(e); return; } - Bl(); + zl(); return; } if ( - (De.parseExpression.call(void 0, !0), + (Me.parseExpression.call(void 0, !0), $.match.call(void 0, D.TokenType._in) || - ee.isContextual.call(void 0, ke.ContextualKeyword._of)) + ee.isContextual.call(void 0, ve.ContextualKeyword._of)) ) { - ch(e); + gh(e); return; } - e && ee.unexpected.call(void 0), Bl(); + e && ee.unexpected.call(void 0), zl(); } - function J0() { + function pv() { let e = P.state.start; - $.next.call(void 0), lr(e, !0); + $.next.call(void 0), fr(e, !0); } - function Q0() { + function hv() { $.next.call(void 0), - De.parseParenExpression.call(void 0), - _n(!1), - $.eat.call(void 0, D.TokenType._else) && _n(!1); + Me.parseParenExpression.call(void 0), + bn(!1), + $.eat.call(void 0, D.TokenType._else) && bn(!1); } - function Z0() { + function fv() { $.next.call(void 0), ee.isLineTerminator.call(void 0) || - (De.parseExpression.call(void 0), ee.semicolon.call(void 0)); + (Me.parseExpression.call(void 0), ee.semicolon.call(void 0)); } - function ev() { + function dv() { $.next.call(void 0), - De.parseParenExpression.call(void 0), + Me.parseParenExpression.call(void 0), P.state.scopeDepth++; let e = P.state.tokens.length; for ( @@ -21135,25 +21197,25 @@ If you need interactivity, consider converting part of this to a Client Componen ) { let s = $.match.call(void 0, D.TokenType._case); $.next.call(void 0), - s && De.parseExpression.call(void 0), + s && Me.parseExpression.call(void 0), ee.expect.call(void 0, D.TokenType.colon); - } else _n(!0); + } else bn(!0); $.next.call(void 0); let t = P.state.tokens.length; - P.state.scopes.push(new Ts.Scope(e, t, !1)), P.state.scopeDepth--; + P.state.scopes.push(new gs.Scope(e, t, !1)), P.state.scopeDepth--; } - function tv() { + function mv() { $.next.call(void 0), - De.parseExpression.call(void 0), + Me.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 Tv() { + _s.parseBindingAtom.call(void 0, !0), + P.isTypeScriptEnabled && mt.tsTryParseTypeAnnotation.call(void 0); } - function sv() { + function yv() { if ( - ($.next.call(void 0), gi(), $.match.call(void 0, D.TokenType._catch)) + ($.next.call(void 0), bi(), $.match.call(void 0, D.TokenType._catch)) ) { $.next.call(void 0); let e = null; @@ -21162,87 +21224,87 @@ If you need interactivity, consider converting part of this to a Client Componen (P.state.scopeDepth++, (e = P.state.tokens.length), ee.expect.call(void 0, D.TokenType.parenL), - nv(), + Tv(), ee.expect.call(void 0, D.TokenType.parenR)), - gi(), + bi(), e != null) ) { let t = P.state.tokens.length; - P.state.scopes.push(new Ts.Scope(e, t, !1)), P.state.scopeDepth--; + P.state.scopes.push(new gs.Scope(e, t, !1)), P.state.scopeDepth--; } } - $.eat.call(void 0, D.TokenType._finally) && gi(); + $.eat.call(void 0, D.TokenType._finally) && bi(); } - function Vl(e) { - $.next.call(void 0), fh(!1, e), ee.semicolon.call(void 0); + function Xl(e) { + $.next.call(void 0), wh(!1, e), ee.semicolon.call(void 0); } - Tt.parseVarStatement = Vl; - function iv() { - $.next.call(void 0), De.parseParenExpression.call(void 0), _n(!1); + kt.parseVarStatement = Xl; + function kv() { + $.next.call(void 0), Me.parseParenExpression.call(void 0), bn(!1); } - function rv() { + function vv() { $.next.call(void 0); } - function ov() { - _n(!0); + function xv() { + bn(!0); } - function av(e) { + function gv(e) { P.isTypeScriptEnabled - ? dt.tsParseIdentifierStatement.call(void 0, e) + ? mt.tsParseIdentifierStatement.call(void 0, e) : P.isFlowEnabled ? Ft.flowParseIdentifierStatement.call(void 0, e) : ee.semicolon.call(void 0); } - function gi(e = !1, t = 0) { + function bi(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), + 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--; + P.state.scopes.push(new gs.Scope(s, i, e)), P.state.scopeDepth--; } - Tt.parseBlock = gi; - function ql(e) { - for (; !$.eat.call(void 0, e) && !P.state.error; ) _n(!0); + kt.parseBlock = bi; + function Ql(e) { + for (; !$.eat.call(void 0, e) && !P.state.error; ) bn(!0); } - Tt.parseBlockBody = ql; - function Bl() { + kt.parseBlockBody = Ql; + function zl() { ee.expect.call(void 0, D.TokenType.semi), $.match.call(void 0, D.TokenType.semi) || - De.parseExpression.call(void 0), + Me.parseExpression.call(void 0), ee.expect.call(void 0, D.TokenType.semi), $.match.call(void 0, D.TokenType.parenR) || - De.parseExpression.call(void 0), + Me.parseExpression.call(void 0), ee.expect.call(void 0, D.TokenType.parenR), - _n(!1); + bn(!1); } - function ch(e) { + function gh(e) { e - ? ee.eatContextual.call(void 0, ke.ContextualKeyword._of) + ? ee.eatContextual.call(void 0, ve.ContextualKeyword._of) : $.next.call(void 0), - De.parseExpression.call(void 0), + Me.parseExpression.call(void 0), ee.expect.call(void 0, D.TokenType.parenR), - _n(!1); + bn(!1); } - function fh(e, t) { + function wh(e, t) { for (;;) { - if ((lv(t), $.eat.call(void 0, D.TokenType.eq))) { + if ((_v(t), $.eat.call(void 0, D.TokenType.eq))) { let s = P.state.tokens.length - 1; - De.parseMaybeAssign.call(void 0, e), + Me.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), + function _v(e) { + _s.parseBindingAtom.call(void 0, e), P.isTypeScriptEnabled - ? dt.tsAfterParseVarHead.call(void 0) + ? mt.tsAfterParseVarHead.call(void 0) : P.isFlowEnabled && Ft.flowAfterParseVarHead.call(void 0); } - function lr(e, t, s = !1) { + function fr(e, t, s = !1) { $.match.call(void 0, D.TokenType.star) && $.next.call(void 0), t && !s && @@ -21252,47 +21314,47 @@ If you need interactivity, consider converting part of this to a Client Componen 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)); + _s.parseBindingIdentifier.call(void 0, !1)); let r = P.state.tokens.length; - P.state.scopeDepth++, dh(), De.parseFunctionBodyAndFinish.call(void 0, e); + P.state.scopeDepth++, Sh(), Me.parseFunctionBodyAndFinish.call(void 0, e); let a = P.state.tokens.length; - P.state.scopes.push(new Ts.Scope(r, a, !0)), + P.state.scopes.push(new gs.Scope(r, a, !0)), P.state.scopeDepth--, i !== null && - (P.state.scopes.push(new Ts.Scope(i, a, !0)), P.state.scopeDepth--); + (P.state.scopes.push(new gs.Scope(i, a, !0)), P.state.scopeDepth--); } - Tt.parseFunction = lr; - function dh(e = !1, t = 0) { + kt.parseFunction = fr; + function Sh(e = !1, t = 0) { P.isTypeScriptEnabled - ? dt.tsStartParseFunctionParams.call(void 0) + ? mt.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), + _s.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) { + kt.parseFunctionParams = Sh; + function Ro(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(); + e || ((i = P.state.tokens.length), P.state.scopeDepth++), Sv(e, t), Iv(); let r = P.state.tokens.length; if ( - (cv(s), + (bv(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--; + P.state.scopes.push(new gs.Scope(i, a, !1)), P.state.scopeDepth--; } } - Tt.parseClass = Io; - function mh() { + kt.parseClass = Ro; + function Ih() { return ( $.match.call(void 0, D.TokenType.eq) || $.match.call(void 0, D.TokenType.semi) || @@ -21301,13 +21363,13 @@ If you need interactivity, consider converting part of this to a Client Componen $.match.call(void 0, D.TokenType.colon) ); } - function yh() { + function Eh() { return ( $.match.call(void 0, D.TokenType.parenL) || $.match.call(void 0, D.TokenType.lessThan) ); } - function cv(e) { + function bv(e) { for ( ee.expect.call(void 0, D.TokenType.braceL); !$.eat.call(void 0, D.TokenType.braceR) && !P.state.error; @@ -21315,32 +21377,32 @@ If you need interactivity, consider converting part of this to a Client Componen ) { if ($.eat.call(void 0, D.TokenType.semi)) continue; if ($.match.call(void 0, D.TokenType.at)) { - ph(); + bh(); continue; } let t = P.state.start; - uv(t, e); + Cv(t, e); } } - function uv(e, t) { + function Cv(e, t) { P.isTypeScriptEnabled && - dt.tsParseModifiers.call(void 0, [ - ke.ContextualKeyword._declare, - ke.ContextualKeyword._public, - ke.ContextualKeyword._protected, - ke.ContextualKeyword._private, - ke.ContextualKeyword._override, + mt.tsParseModifiers.call(void 0, [ + ve.ContextualKeyword._declare, + ve.ContextualKeyword._public, + ve.ContextualKeyword._protected, + ve.ContextualKeyword._private, + ve.ContextualKeyword._override, ]); let s = !1; if ( $.match.call(void 0, D.TokenType.name) && - P.state.contextualKeyword === ke.ContextualKeyword._static + P.state.contextualKeyword === ve.ContextualKeyword._static ) { - if ((De.parseIdentifier.call(void 0), yh())) { - or(e, !1); + if ((Me.parseIdentifier.call(void 0), Eh())) { + pr(e, !1); return; - } else if (mh()) { - ar(); + } else if (Ih()) { + hr(); return; } if ( @@ -21349,84 +21411,84 @@ If you need interactivity, consider converting part of this to a Client Componen (s = !0), $.match.call(void 0, D.TokenType.braceL)) ) { - (P.state.tokens[P.state.tokens.length - 1].contextId = t), gi(); + (P.state.tokens[P.state.tokens.length - 1].contextId = t), bi(); return; } } - pv(e, s, t); + wv(e, s, t); } - function pv(e, t, s) { + function wv(e, t, s) { if ( P.isTypeScriptEnabled && - dt.tsTryParseClassMemberWithIsStatic.call(void 0, t) + mt.tsTryParseClassMemberWithIsStatic.call(void 0, t) ) return; if ($.eat.call(void 0, D.TokenType.star)) { - xi(s), or(e, !1); + _i(s), pr(e, !1); return; } - xi(s); + _i(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 && + r.contextualKeyword === ve.ContextualKeyword._constructor && (i = !0), + Yl(), + Eh() + ? pr(e, i) + : Ih() + ? hr() + : r.contextualKeyword === ve.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) && + _i(s), + Yl(), + pr(e, !1)) + : (r.contextualKeyword === ve.ContextualKeyword._get || + r.contextualKeyword === ve.ContextualKeyword._set) && !( ee.isLineTerminator.call(void 0) && $.match.call(void 0, D.TokenType.star) ) - ? (r.contextualKeyword === ke.ContextualKeyword._get + ? (r.contextualKeyword === ve.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 && + _i(s), + pr(e, !1)) + : r.contextualKeyword === ve.ContextualKeyword._accessor && !ee.isLineTerminator.call(void 0) - ? (xi(s), ar()) + ? (_i(s), hr()) : ee.isLineTerminator.call(void 0) - ? ar() + ? hr() : ee.unexpected.call(void 0); } - function or(e, t) { + function pr(e, t) { P.isTypeScriptEnabled - ? dt.tsTryParseTypeParameters.call(void 0) + ? mt.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); + Me.parseMethod.call(void 0, e, t); } - function xi(e) { - De.parsePropertyName.call(void 0, e); + function _i(e) { + Me.parsePropertyName.call(void 0, e); } - Tt.parseClassPropertyName = xi; - function jl() { + kt.parseClassPropertyName = _i; + function Yl() { 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() { + kt.parsePostMemberNameModifiers = Yl; + function hr() { if ( (P.isTypeScriptEnabled ? ($.eatTypeToken.call(void 0, D.TokenType.bang), - dt.tsTryParseTypeAnnotation.call(void 0)) + mt.tsTryParseTypeAnnotation.call(void 0)) : P.isFlowEnabled && $.match.call(void 0, D.TokenType.colon) && Ft.flowParseTypeAnnotation.call(void 0), @@ -21434,86 +21496,86 @@ If you need interactivity, consider converting part of this to a Client Componen ) { let e = P.state.tokens.length; $.next.call(void 0), - De.parseMaybeAssign.call(void 0), + Me.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) { + kt.parseClassProperty = hr; + function Sv(e, t = !1) { (P.isTypeScriptEnabled && (!e || t) && - ee.isContextual.call(void 0, ke.ContextualKeyword._implements)) || + ee.isContextual.call(void 0, ve.ContextualKeyword._implements)) || ($.match.call(void 0, D.TokenType.name) && - ks.parseBindingIdentifier.call(void 0, !0), + _s.parseBindingIdentifier.call(void 0, !0), P.isTypeScriptEnabled - ? dt.tsTryParseTypeParameters.call(void 0) + ? mt.tsTryParseTypeParameters.call(void 0) : P.isFlowEnabled && $.match.call(void 0, D.TokenType.lessThan) && Ft.flowParseTypeParameterDeclaration.call(void 0)); } - function fv() { + function Iv() { let e = !1; $.eat.call(void 0, D.TokenType._extends) - ? (De.parseExprSubscripts.call(void 0), (e = !0)) + ? (Me.parseExprSubscripts.call(void 0), (e = !0)) : (e = !1), P.isTypeScriptEnabled - ? dt.tsAfterParseClassSuper.call(void 0, e) + ? mt.tsAfterParseClassSuper.call(void 0, e) : P.isFlowEnabled && Ft.flowAfterParseClassSuper.call(void 0, e); } - function Th() { + function Ah() { let e = P.state.tokens.length - 1; - (P.isTypeScriptEnabled && dt.tsTryParseExport.call(void 0)) || - (Tv() - ? kv() - : yv() - ? (De.parseIdentifier.call(void 0), + (P.isTypeScriptEnabled && mt.tsTryParseExport.call(void 0)) || + (Nv() + ? Rv() + : Pv() + ? (Me.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()) + ee.expectContextual.call(void 0, ve.ContextualKeyword._as), + Me.parseIdentifier.call(void 0)) + : Ph(), + dr()) : $.eat.call(void 0, D.TokenType._default) - ? dv() - : xv() - ? mv() - : (Kl(), cr()), + ? Ev() + : Ov() + ? Av() + : (Zl(), dr()), (P.state.tokens[e].rhsEndIndex = P.state.tokens.length)); } - Tt.parseExport = Th; - function dv() { + kt.parseExport = Ah; + function Ev() { if ( (P.isTypeScriptEnabled && - dt.tsTryParseExportDefaultExpression.call(void 0)) || + mt.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) && + ? fr(e, !0, !0) + : ee.isContextual.call(void 0, ve.ContextualKeyword._async) && $.lookaheadType.call(void 0) === D.TokenType._function - ? (ee.eatContextual.call(void 0, ke.ContextualKeyword._async), + ? (ee.eatContextual.call(void 0, ve.ContextualKeyword._async), $.eat.call(void 0, D.TokenType._function), - lr(e, !0, !0)) + fr(e, !0, !0)) : $.match.call(void 0, D.TokenType._class) - ? Io(!0, !0) + ? Ro(!0, !0) : $.match.call(void 0, D.TokenType.at) - ? ($l(), Io(!0, !0)) - : (De.parseMaybeAssign.call(void 0), ee.semicolon.call(void 0)); + ? (Jl(), Ro(!0, !0)) + : (Me.parseMaybeAssign.call(void 0), ee.semicolon.call(void 0)); } - function mv() { + function Av() { P.isTypeScriptEnabled - ? dt.tsParseExportDeclaration.call(void 0) + ? mt.tsParseExportDeclaration.call(void 0) : P.isFlowEnabled ? Ft.flowParseExportDeclaration.call(void 0) - : _n(!0); + : bn(!0); } - function yv() { - if (P.isTypeScriptEnabled && dt.tsIsDeclarationStart.call(void 0)) + function Pv() { + if (P.isTypeScriptEnabled && mt.tsIsDeclarationStart.call(void 0)) return !1; if ( P.isFlowEnabled && @@ -21521,65 +21583,65 @@ If you need interactivity, consider converting part of this to a Client Componen ) return !1; if ($.match.call(void 0, D.TokenType.name)) - return P.state.contextualKeyword !== ke.ContextualKeyword._async; + return P.state.contextualKeyword !== ve.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; + t.contextualKeyword === ve.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 + i === xh.charCodes.quotationMark || i === xh.charCodes.apostrophe ); } return !1; } - function kh() { - $.eat.call(void 0, D.TokenType.comma) && Kl(); + function Ph() { + $.eat.call(void 0, D.TokenType.comma) && Zl(); } - function cr() { - ee.eatContextual.call(void 0, ke.ContextualKeyword._from) && - (De.parseExprAtom.call(void 0), gh()), + function dr() { + ee.eatContextual.call(void 0, ve.ContextualKeyword._from) && + (Me.parseExprAtom.call(void 0), Lh()), ee.semicolon.call(void 0); } - Tt.parseExportFrom = cr; - function Tv() { + kt.parseExportFrom = dr; + function Nv() { 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 Rv() { + P.isFlowEnabled ? Ft.flowParseExportStar.call(void 0) : Nh(); } - function vh() { + function Nh() { ee.expect.call(void 0, D.TokenType.star), - ee.isContextual.call(void 0, ke.ContextualKeyword._as) ? vv() : cr(); + ee.isContextual.call(void 0, ve.ContextualKeyword._as) ? Lv() : dr(); } - Tt.baseParseExportStar = vh; - function vv() { + kt.baseParseExportStar = Nh; + function Lv() { $.next.call(void 0), (P.state.tokens[P.state.tokens.length - 1].type = D.TokenType._as), - De.parseIdentifier.call(void 0), - kh(), - cr(); + Me.parseIdentifier.call(void 0), + Ph(), + dr(); } - function xv() { + function Ov() { return ( - (P.isTypeScriptEnabled && dt.tsIsDeclarationStart.call(void 0)) || + (P.isTypeScriptEnabled && mt.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) || + ee.isContextual.call(void 0, ve.ContextualKeyword._async) || $.match.call(void 0, D.TokenType.at) ); } - function Kl() { + function Zl() { let e = !0; for ( ee.expect.call(void 0, D.TokenType.braceL); @@ -21592,27 +21654,27 @@ If you need interactivity, consider converting part of this to a Client Componen $.eat.call(void 0, D.TokenType.braceR)) ) break; - gv(); + Dv(); } } - Tt.parseExportSpecifiers = Kl; - function gv() { + kt.parseExportSpecifiers = Zl; + function Dv() { if (P.isTypeScriptEnabled) { - dt.tsParseExportSpecifier.call(void 0); + mt.tsParseExportSpecifier.call(void 0); return; } - De.parseIdentifier.call(void 0), + Me.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); + ee.eatContextual.call(void 0, ve.ContextualKeyword._as) && + Me.parseIdentifier.call(void 0); } - function _v() { + function Mv() { 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) + ee.expectContextual.call(void 0, ve.ContextualKeyword._module), + ee.eatContextual.call(void 0, ve.ContextualKeyword._from) + ? ee.isContextual.call(void 0, ve.ContextualKeyword._from) ? (P.state.restoreFromSnapshot(e), !0) : (P.state.restoreFromSnapshot(e), !1) : $.match.call(void 0, D.TokenType.comma) @@ -21620,63 +21682,63 @@ If you need interactivity, consider converting part of this to a Client Componen : (P.state.restoreFromSnapshot(e), !0) ); } - function bv() { - ee.isContextual.call(void 0, ke.ContextualKeyword._module) && - _v() && + function Fv() { + ee.isContextual.call(void 0, ve.ContextualKeyword._module) && + Mv() && $.next.call(void 0); } - function xh() { + function Rh() { if ( P.isTypeScriptEnabled && $.match.call(void 0, D.TokenType.name) && $.lookaheadType.call(void 0) === D.TokenType.eq ) { - dt.tsParseImportEqualsDeclaration.call(void 0); + mt.tsParseImportEqualsDeclaration.call(void 0); return; } if ( P.isTypeScriptEnabled && - ee.isContextual.call(void 0, ke.ContextualKeyword._type) + ee.isContextual.call(void 0, ve.ContextualKeyword._type) ) { let e = $.lookaheadTypeAndKeyword.call(void 0); if ( e.type === D.TokenType.name && - e.contextualKeyword !== ke.ContextualKeyword._from + e.contextualKeyword !== ve.ContextualKeyword._from ) { if ( - (ee.expectContextual.call(void 0, ke.ContextualKeyword._type), + (ee.expectContextual.call(void 0, ve.ContextualKeyword._type), $.lookaheadType.call(void 0) === D.TokenType.eq) ) { - dt.tsParseImportEqualsDeclaration.call(void 0); + mt.tsParseImportEqualsDeclaration.call(void 0); return; } } else (e.type === D.TokenType.star || e.type === D.TokenType.braceL) && - ee.expectContextual.call(void 0, ke.ContextualKeyword._type); + ee.expectContextual.call(void 0, ve.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(), + (Fv(), + Vv(), + ee.expectContextual.call(void 0, ve.ContextualKeyword._from)), + Me.parseExprAtom.call(void 0), + Lh(), ee.semicolon.call(void 0); } - Tt.parseImport = xh; - function Cv() { + kt.parseImport = Rh; + function Bv() { return $.match.call(void 0, D.TokenType.name); } - function uh() { - ks.parseImportedIdentifier.call(void 0); + function _h() { + _s.parseImportedIdentifier.call(void 0); } - function wv() { + function Vv() { P.isFlowEnabled && Ft.flowStartParseImportSpecifiers.call(void 0); let e = !0; - if (!(Cv() && (uh(), !$.eat.call(void 0, D.TokenType.comma)))) { + if (!(Bv() && (_h(), !$.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(); + ee.expectContextual.call(void 0, ve.ContextualKeyword._as), + _h(); return; } for ( @@ -21695,77 +21757,77 @@ If you need interactivity, consider converting part of this to a Client Componen $.eat.call(void 0, D.TokenType.braceR)) ) break; - Sv(); + jv(); } } } - function Sv() { + function jv() { if (P.isTypeScriptEnabled) { - dt.tsParseImportSpecifier.call(void 0); + mt.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) && + _s.parseImportedIdentifier.call(void 0), + ee.isContextual.call(void 0, ve.ContextualKeyword._as) && ((P.state.tokens[P.state.tokens.length - 1].identifierRole = $.IdentifierRole.ImportAccess), $.next.call(void 0), - ks.parseImportedIdentifier.call(void 0)); + _s.parseImportedIdentifier.call(void 0)); } - function gh() { - ee.isContextual.call(void 0, ke.ContextualKeyword._assert) && + function Lh() { + ee.isContextual.call(void 0, ve.ContextualKeyword._assert) && !ee.hasPrecedingLineBreak.call(void 0) && - ($.next.call(void 0), De.parseObj.call(void 0, !1, !1)); + ($.next.call(void 0), Me.parseObj.call(void 0, !1, !1)); } }); - var Ch = Z((Wl) => { + var Mh = Z((nc) => { 'use strict'; - Object.defineProperty(Wl, '__esModule', {value: !0}); - var _h = xt(), - bh = Qt(), - Hl = Zt(), - Iv = nr(); - function Ev() { + Object.defineProperty(nc, '__esModule', {value: !0}); + var Oh = _t(), + Dh = tn(), + tc = nn(), + $v = ar(); + function Kv() { 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) + tc.state.pos === 0 && + tc.input.charCodeAt(0) === Dh.charCodes.numberSign && + tc.input.charCodeAt(1) === Dh.charCodes.exclamationMark && + Oh.skipLineComment.call(void 0, 2), + Oh.nextToken.call(void 0), + $v.parseTopLevel.call(void 0) ); } - Wl.parseFile = Ev; + nc.parseFile = Kv; }); - var Ul = Z((Ao) => { + var ec = Z((Oo) => { 'use strict'; - Object.defineProperty(Ao, '__esModule', {value: !0}); - var Eo = Zt(), - Av = Ch(), - Gl = class { + Object.defineProperty(Oo, '__esModule', {value: !0}); + var Lo = nn(), + qv = Mh(), + sc = class { constructor(t, s) { (this.tokens = t), (this.scopes = s); } }; - Ao.File = Gl; - function Pv(e, t, s, i) { + Oo.File = sc; + function Uv(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); + Lo.initParser.call(void 0, e, t, s, i); + let r = qv.parseFile.call(void 0); + if (Lo.state.error) throw Lo.augmentError.call(void 0, Lo.state.error); return r; } - Ao.parse = Pv; + Oo.parse = Uv; }); - var wh = Z((zl) => { + var Fh = Z((ic) => { 'use strict'; - Object.defineProperty(zl, '__esModule', {value: !0}); - var Nv = It(); - function Rv(e) { + Object.defineProperty(ic, '__esModule', {value: !0}); + var Hv = Et(); + function Wv(e) { let t = e.currentIndex(), s = 0, i = e.currentToken(); @@ -21776,7 +21838,7 @@ If you need interactivity, consider converting part of this to a Client Componen r.isOptionalChainEnd && s--, (s += r.numNullishCoalesceStarts), (s -= r.numNullishCoalesceEnds), - r.contextualKeyword === Nv.ContextualKeyword._await && + r.contextualKeyword === Hv.ContextualKeyword._await && r.identifierRole == null && r.scopeDepth === i.scopeDepth) ) @@ -21785,18 +21847,18 @@ If you need interactivity, consider converting part of this to a Client Componen } while (s > 0 && t < e.tokens.length); return !1; } - zl.default = Rv; + ic.default = Wv; }); - var Sh = Z((Yl) => { + var Bh = Z((oc) => { 'use strict'; - Object.defineProperty(Yl, '__esModule', {value: !0}); - function Lv(e) { + Object.defineProperty(oc, '__esModule', {value: !0}); + function Gv(e) { return e && e.__esModule ? e : {default: e}; } - var Po = be(), - Ov = wh(), - Dv = Lv(Ov), - Xl = class e { + var Do = Ce(), + zv = Fh(), + Xv = Gv(zv), + rc = class e { __init() { this.resultCode = ''; } @@ -21833,7 +21895,7 @@ If you need interactivity, consider converting part of this to a Client Componen } matchesContextualAtIndex(t, s) { return ( - this.matches1AtIndex(t, Po.TokenType.name) && + this.matches1AtIndex(t, Do.TokenType.name) && this.tokens[t].contextualKeyword === s ); } @@ -21950,8 +22012,8 @@ If you need interactivity, consider converting part of this to a Client Componen removeBalancedCode() { let t = 0; for (; !this.isAtEnd(); ) { - if (this.matches1(Po.TokenType.braceL)) t++; - else if (this.matches1(Po.TokenType.braceR)) { + if (this.matches1(Do.TokenType.braceL)) t++; + else if (this.matches1(Do.TokenType.braceR)) { if (t === 0) return; t--; } @@ -21990,7 +22052,7 @@ If you need interactivity, consider converting part of this to a Client Componen let t = this.currentToken(); if ( ((t.numNullishCoalesceStarts || t.isOptionalChainStart) && - (t.isAsyncOperation = Dv.default.call(void 0, this)), + (t.isAsyncOperation = Xv.default.call(void 0, this)), !this.disableESTransforms) ) { if (t.numNullishCoalesceStarts) @@ -22006,7 +22068,7 @@ If you need interactivity, consider converting part of this to a Client Componen t.isOptionalChainStart && (t.isAsyncOperation && (this.resultCode += 'await '), this.tokenIndex > 0 && - this.tokenAtRelativeIndex(-1).type === Po.TokenType._delete + this.tokenAtRelativeIndex(-1).type === Do.TokenType._delete ? t.isAsyncOperation ? (this.resultCode += this.helperManager.getHelperName( 'asyncOptionalChainDelete' @@ -22071,35 +22133,35 @@ If you need interactivity, consider converting part of this to a Client Componen return this.tokenIndex === this.tokens.length; } }; - Yl.default = Xl; + oc.default = rc; }); - var Ah = Z((Ql) => { + var $h = Z((lc) => { 'use strict'; - Object.defineProperty(Ql, '__esModule', {value: !0}); - var Ih = It(), - Ne = be(); - function Mv(e, t, s, i) { + Object.defineProperty(lc, '__esModule', {value: !0}); + var Vh = Et(), + Re = Ce(); + function Yv(e, t, s, i) { let r = t.snapshot(), - a = Fv(t), + a = Jv(t), u = [], d = [], - y = [], + v = [], g = null, - L = [], + O = [], p = [], - h = t.currentToken().contextId; - if (h == null) + f = t.currentToken().contextId; + if (f == null) throw new Error( 'Expected non-null class context ID on class open-brace.' ); - for (t.nextToken(); !t.matchesContextIdAndLabel(Ne.TokenType.braceR, h); ) + for (t.nextToken(); !t.matchesContextIdAndLabel(Re.TokenType.braceR, f); ) if ( - t.matchesContextual(Ih.ContextualKeyword._constructor) && + t.matchesContextual(Vh.ContextualKeyword._constructor) && !t.currentToken().isType ) ({constructorInitializerStatements: u, constructorInsertPos: g} = - Eh(t)); - else if (t.matches1(Ne.TokenType.semi)) + jh(t)); + else if (t.matches1(Re.TokenType.semi)) i || p.push({start: t.currentIndex(), end: t.currentIndex() + 1}), t.nextToken(); else if (t.currentToken().isType) t.nextToken(); @@ -22108,41 +22170,41 @@ If you need interactivity, consider converting part of this to a Client Componen 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)) && + for (; Mo(t.currentToken()); ) + t.matches1(Re.TokenType._static) && (x = !0), + t.matches1(Re.TokenType.hash) && (w = !0), + (t.matches1(Re.TokenType._declare) || + t.matches1(Re.TokenType._abstract)) && (S = !0), t.nextToken(); - if (x && t.matches1(Ne.TokenType.braceL)) { - Jl(t, h); + if (x && t.matches1(Re.TokenType.braceL)) { + ac(t, f); continue; } if (w) { - Jl(t, h); + ac(t, f); continue; } if ( - t.matchesContextual(Ih.ContextualKeyword._constructor) && + t.matchesContextual(Vh.ContextualKeyword._constructor) && !t.currentToken().isType ) { ({constructorInitializerStatements: u, constructorInsertPos: g} = - Eh(t)); + jh(t)); continue; } let A = t.currentIndex(); if ( - (Bv(t), - t.matches1(Ne.TokenType.lessThan) || - t.matches1(Ne.TokenType.parenL)) + (Qv(t), + t.matches1(Re.TokenType.lessThan) || + t.matches1(Re.TokenType.parenL)) ) { - Jl(t, h); + ac(t, f); continue; } for (; t.currentToken().isType; ) t.nextToken(); - if (t.matches1(Ne.TokenType.eq)) { - let U = t.currentIndex(), + if (t.matches1(Re.TokenType.eq)) { + let q = t.currentIndex(), M = t.currentToken().rhsEndIndex; if (M == null) throw new Error( @@ -22151,11 +22213,11 @@ If you need interactivity, consider converting part of this to a Client Componen for (t.nextToken(); t.currentIndex() < M; ) e.processToken(); let c; x - ? ((c = s.claimFreeName('__initStatic')), y.push(c)) + ? ((c = s.claimFreeName('__initStatic')), v.push(c)) : ((c = s.claimFreeName('__init')), d.push(c)), - L.push({ + O.push({ initializerName: c, - equalsIndex: U, + equalsIndex: q, start: A, end: t.currentIndex(), }); @@ -22177,19 +22239,19 @@ If you need interactivity, consider converting part of this to a Client Componen headerInfo: a, constructorInitializerStatements: u, instanceInitializerNames: d, - staticInitializerNames: y, + staticInitializerNames: v, constructorInsertPos: g, - fields: L, + fields: O, rangesToRemove: p, } ); } - Ql.default = Mv; - function Jl(e, t) { + lc.default = Yv; + function ac(e, t) { for (e.nextToken(); e.currentToken().contextId !== t; ) e.nextToken(); - for (; No(e.tokenAtRelativeIndex(-1)); ) e.previousToken(); + for (; Mo(e.tokenAtRelativeIndex(-1)); ) e.previousToken(); } - function Fv(e) { + function Jv(e) { let t = e.currentToken(), s = t.contextId; if (s == null) throw new Error('Expected context ID on class token.'); @@ -22199,17 +22261,17 @@ If you need interactivity, consider converting part of this to a Client Componen a = !1; for ( e.nextToken(), - e.matches1(Ne.TokenType.name) && (r = e.identifierName()); - !e.matchesContextIdAndLabel(Ne.TokenType.braceL, s); + e.matches1(Re.TokenType.name) && (r = e.identifierName()); + !e.matchesContextIdAndLabel(Re.TokenType.braceL, s); ) - e.matches1(Ne.TokenType._extends) && + e.matches1(Re.TokenType._extends) && !e.currentToken().isType && (a = !0), e.nextToken(); return {isExpression: i, className: r, hasSuperclass: a}; } - function Eh(e) { + function jh(e) { let t = []; e.nextToken(); let s = e.currentToken().contextId; @@ -22217,12 +22279,12 @@ If you need interactivity, consider converting part of this to a Client Componen throw new Error( 'Expected context ID on open-paren starting constructor params.' ); - for (; !e.matchesContextIdAndLabel(Ne.TokenType.parenR, s); ) + for (; !e.matchesContextIdAndLabel(Re.TokenType.parenR, s); ) if (e.currentToken().contextId === s) { - if ((e.nextToken(), No(e.currentToken()))) { - for (e.nextToken(); No(e.currentToken()); ) e.nextToken(); + if ((e.nextToken(), Mo(e.currentToken()))) { + for (e.nextToken(); Mo(e.currentToken()); ) e.nextToken(); let a = e.currentToken(); - if (a.type !== Ne.TokenType.name) + if (a.type !== Re.TokenType.name) throw new Error( 'Expected identifier after access modifiers in constructor arg.' ); @@ -22233,13 +22295,13 @@ If you need interactivity, consider converting part of this to a Client Componen 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)) { + for (; !e.matchesContextIdAndLabel(Re.TokenType.braceR, s); ) { + if (!r && e.matches2(Re.TokenType._super, Re.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); ) + for (; !e.matchesContextIdAndLabel(Re.TokenType.parenR, a); ) e.nextToken(); (i = e.currentIndex()), (r = !0); } @@ -22250,98 +22312,98 @@ If you need interactivity, consider converting part of this to a Client Componen {constructorInitializerStatements: t, constructorInsertPos: i} ); } - function No(e) { + function Mo(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, + Re.TokenType._async, + Re.TokenType._get, + Re.TokenType._set, + Re.TokenType.plus, + Re.TokenType.minus, + Re.TokenType._readonly, + Re.TokenType._static, + Re.TokenType._public, + Re.TokenType._private, + Re.TokenType._protected, + Re.TokenType._override, + Re.TokenType._abstract, + Re.TokenType.star, + Re.TokenType._declare, + Re.TokenType.hash, ].includes(e.type); } - function Bv(e) { - if (e.matches1(Ne.TokenType.bracketL)) { + function Qv(e) { + if (e.matches1(Re.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); ) + for (; !e.matchesContextIdAndLabel(Re.TokenType.bracketR, s); ) e.nextToken(); e.nextToken(); } else e.nextToken(); } }); - var ec = Z((Zl) => { + var uc = Z((cc) => { 'use strict'; - Object.defineProperty(Zl, '__esModule', {value: !0}); - var Ph = be(); - function Vv(e) { + Object.defineProperty(cc, '__esModule', {value: !0}); + var Kh = Ce(); + function Zv(e) { if ( (e.removeInitialToken(), e.removeToken(), e.removeToken(), e.removeToken(), - e.matches1(Ph.TokenType.parenL)) + e.matches1(Kh.TokenType.parenL)) ) e.removeToken(), e.removeToken(), e.removeToken(); else - for (; e.matches1(Ph.TokenType.dot); ) e.removeToken(), e.removeToken(); + for (; e.matches1(Kh.TokenType.dot); ) e.removeToken(), e.removeToken(); } - Zl.default = Vv; + cc.default = Zv; }); - var tc = Z((Ro) => { + var pc = Z((Fo) => { '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) { + Object.defineProperty(Fo, '__esModule', {value: !0}); + var ex = _t(), + tx = Ce(), + nx = {typeDeclarations: new Set(), valueDeclarations: new Set()}; + Fo.EMPTY_DECLARATION_INFO = nx; + function sx(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.type === tx.TokenType.name && + ex.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; + Fo.default = sx; }); - var sc = Z((nc) => { + var fc = Z((hc) => { '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) && + Object.defineProperty(hc, '__esModule', {value: !0}); + var ix = Et(), + qh = Ce(); + function rx(e) { + e.matches2(qh.TokenType.name, qh.TokenType.braceL) && + e.matchesContextual(ix.ContextualKeyword._assert) && (e.removeToken(), e.removeToken(), e.removeBalancedCode(), e.removeToken()); } - nc.removeMaybeImportAssertion = Hv; + hc.removeMaybeImportAssertion = rx; }); - var rc = Z((ic) => { + var mc = Z((dc) => { 'use strict'; - Object.defineProperty(ic, '__esModule', {value: !0}); - var Rh = be(); - function Wv(e, t, s) { + Object.defineProperty(dc, '__esModule', {value: !0}); + var Uh = Ce(); + function ox(e, t, s) { if (!e) return !1; let i = t.currentToken(); if (i.rhsEndIndex == null) @@ -22349,37 +22411,37 @@ If you need interactivity, consider converting part of this to a Client Componen let r = i.rhsEndIndex - t.currentIndex(); if ( r !== 3 && - !(r === 4 && t.matches1AtIndex(i.rhsEndIndex - 1, Rh.TokenType.semi)) + !(r === 4 && t.matches1AtIndex(i.rhsEndIndex - 1, Uh.TokenType.semi)) ) return !1; let a = t.tokenAtRelativeIndex(2); - if (a.type !== Rh.TokenType.name) return !1; + if (a.type !== Uh.TokenType.name) return !1; let u = t.identifierNameForToken(a); return s.typeDeclarations.has(u) && !s.valueDeclarations.has(u); } - ic.default = Wv; + dc.default = ox; }); - var Oh = Z((ac) => { + var Wh = Z((yc) => { 'use strict'; - Object.defineProperty(ac, '__esModule', {value: !0}); - function ur(e) { + Object.defineProperty(yc, '__esModule', {value: !0}); + function mr(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 { + var Bo = _t(), + Ms = Et(), + N = Ce(), + ax = uc(), + lx = mr(ax), + Hh = pc(), + cx = mr(Hh), + ux = Ji(), + px = mr(ux), + Vo = fc(), + hx = mc(), + fx = mr(hx), + dx = dn(), + mx = mr(dx), + Tc = class e extends mx.default { __init() { this.hadExport = !1; } @@ -22389,7 +22451,7 @@ If you need interactivity, consider converting part of this to a Client Componen __init3() { this.hadDefaultExport = !1; } - constructor(t, s, i, r, a, u, d, y, g, L) { + constructor(t, s, i, r, a, u, d, v, g, O) { super(), (this.rootTransformer = t), (this.tokens = s), @@ -22398,15 +22460,15 @@ If you need interactivity, consider converting part of this to a Client Componen (this.helperManager = a), (this.reactHotLoaderTransformer = u), (this.enableLegacyBabel5ModuleInterop = d), - (this.enableLegacyTypeScriptModuleInterop = y), + (this.enableLegacyTypeScriptModuleInterop = v), (this.isTypeScriptTransformEnabled = g), - (this.preserveDynamicImport = L), + (this.preserveDynamicImport = O), 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); + ? cx.default.call(void 0, s) + : Hh.EMPTY_DECLARATION_INFO); } getPrefixCode() { let t = ''; @@ -22460,7 +22522,7 @@ module.exports = exports.default; ); return ( this.importProcessor.isTypeName(t) - ? zv.default.call(void 0, this.tokens) + ? lx.default.call(void 0, this.tokens) : this.tokens.replaceToken('const'), !0 ); @@ -22501,20 +22563,20 @@ module.exports = exports.default; ), this.tokens.appendCode(this.importProcessor.claimImportCode(s)); } - Oo.removeMaybeImportAssertion.call(void 0, this.tokens), + Vo.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.matchesContextual(Ms.ContextualKeyword._type) && !this.tokens.matches1AtIndex( this.tokens.currentIndex() + 1, N.TokenType.comma ) && !this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 1, - Ls.ContextualKeyword._from + Ms.ContextualKeyword._from )) ) return this.removeRemainingImport(), !0; @@ -22554,9 +22616,9 @@ module.exports = exports.default; processIdentifier() { let t = this.tokens.currentToken(); if (t.shadowsGlobal) return !1; - if (t.identifierRole === Lo.IdentifierRole.ObjectShorthand) + if (t.identifierRole === Bo.IdentifierRole.ObjectShorthand) return this.processObjectShorthand(); - if (t.identifierRole !== Lo.IdentifierRole.Access) return !1; + if (t.identifierRole !== Bo.IdentifierRole.Access) return !1; let s = this.importProcessor.getIdentifierReplacement( this.tokens.identifierNameForToken(t) ); @@ -22643,7 +22705,7 @@ module.exports = exports.default; this.tokens.matches2(N.TokenType._export, N.TokenType.name) && this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 1, - Ls.ContextualKeyword._type + Ms.ContextualKeyword._type ) ) { if ( @@ -22659,14 +22721,14 @@ module.exports = exports.default; this.tokens.matches1(N.TokenType._as) && (this.tokens.removeToken(), this.tokens.removeToken()); return ( - this.tokens.matchesContextual(Ls.ContextualKeyword._from) && + this.tokens.matchesContextual(Ms.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)), + Vo.removeMaybeImportAssertion.call(void 0, this.tokens)), !0 ); } else throw new Error('Unrecognized export syntax.'); @@ -22765,7 +22827,7 @@ module.exports = exports.default; ) && this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 2, - Ls.ContextualKeyword._async + Ms.ContextualKeyword._async )) ) { this.tokens.removeInitialToken(), this.tokens.removeToken(); @@ -22799,7 +22861,7 @@ module.exports = exports.default; let t = this.rootTransformer.processNamedClass(); this.tokens.appendCode(` exports.default = ${t};`); } else if ( - Zv.default.call( + fx.default.call( void 0, this.isTypeScriptTransformEnabled, this.tokens, @@ -22903,14 +22965,14 @@ module.exports = exports.default; this.rootTransformer.processToken(); } else { let i = this.tokens.currentToken(); - if (Lo.isDeclaration.call(void 0, i)) { + if (Bo.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) && + Bo.isObjectShorthandDeclaration.call(void 0, i) && (a = `${r}: ${a}`), this.tokens.replaceToken(a); } else this.rootTransformer.processToken(); @@ -22936,7 +22998,7 @@ module.exports = exports.default; else if ( this.tokens.matches2(N.TokenType.name, N.TokenType._function) ) { - if (!this.tokens.matchesContextual(Ls.ContextualKeyword._async)) + if (!this.tokens.matchesContextual(Ms.ContextualKeyword._async)) throw new Error('Expected async keyword in function export.'); this.tokens.copyToken(), this.tokens.copyToken(); } @@ -22980,7 +23042,7 @@ module.exports = exports.default; this.tokens.removeToken(); break; } - let s = Jv.default.call(void 0, this.tokens); + let s = px.default.call(void 0, this.tokens); for (; this.tokens.currentIndex() < s.endIndex; ) this.tokens.removeToken(); if (!s.isType && !this.shouldElideExportedIdentifier(s.leftName)) { @@ -23005,13 +23067,13 @@ module.exports = exports.default; )}` ); } - if (this.tokens.matchesContextual(Ls.ContextualKeyword._from)) { + if (this.tokens.matchesContextual(Ms.ContextualKeyword._from)) { this.tokens.removeToken(); let s = this.tokens.stringValue(); this.tokens.replaceTokenTrimmingLeftWhitespace( this.importProcessor.claimImportCode(s) ), - Oo.removeMaybeImportAssertion.call(void 0, this.tokens); + Vo.removeMaybeImportAssertion.call(void 0, this.tokens); } else this.tokens.appendCode(t.join(' ')); this.tokens.matches1(N.TokenType.semi) && this.tokens.removeToken(); } @@ -23026,7 +23088,7 @@ module.exports = exports.default; this.tokens.replaceTokenTrimmingLeftWhitespace( this.importProcessor.claimImportCode(t) ), - Oo.removeMaybeImportAssertion.call(void 0, this.tokens), + Vo.removeMaybeImportAssertion.call(void 0, this.tokens), this.tokens.matches1(N.TokenType.semi) && this.tokens.removeToken(); } shouldElideExportedIdentifier(t) { @@ -23036,29 +23098,29 @@ module.exports = exports.default; ); } }; - ac.default = oc; + yc.default = Tc; }); - var Bh = Z((cc) => { + var Yh = Z((vc) => { 'use strict'; - Object.defineProperty(cc, '__esModule', {value: !0}); - function pr(e) { + Object.defineProperty(vc, '__esModule', {value: !0}); + function Tr(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 { + var ns = Et(), + se = Ce(), + Tx = uc(), + yx = Tr(Tx), + Xh = pc(), + kx = Tr(Xh), + vx = Ji(), + Gh = Tr(vx), + xx = Ga(), + zh = fc(), + gx = mc(), + _x = Tr(gx), + bx = dn(), + Cx = Tr(bx), + kc = class extends Cx.default { constructor(t, s, i, r, a, u) { super(), (this.tokens = t), @@ -23067,11 +23129,11 @@ module.exports = exports.default; (this.reactHotLoaderTransformer = r), (this.isTypeScriptTransformEnabled = a), (this.nonTypeIdentifiers = a - ? ox.getNonTypeIdentifiers.call(void 0, t, u) + ? xx.getNonTypeIdentifiers.call(void 0, t, u) : new Set()), (this.declarationInfo = a - ? ix.default.call(void 0, t) - : Fh.EMPTY_DECLARATION_INFO), + ? kx.default.call(void 0, t) + : Xh.EMPTY_DECLARATION_INFO), (this.injectCreateRequireForImportRequire = !!u.injectCreateRequireForImportRequire); } @@ -23093,7 +23155,7 @@ module.exports = exports.default; ) && this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 1, - Jn.ContextualKeyword._type + ns.ContextualKeyword._type ) ) { this.tokens.removeInitialToken(); @@ -23112,7 +23174,7 @@ module.exports = exports.default; ) && this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 2, - Jn.ContextualKeyword._type + ns.ContextualKeyword._type ) ) { this.tokens.removeInitialToken(); @@ -23129,7 +23191,7 @@ module.exports = exports.default; this.tokens.matches2(se.TokenType._export, se.TokenType.name) && this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 1, - Jn.ContextualKeyword._type + ns.ContextualKeyword._type ) ) { if ( @@ -23145,14 +23207,14 @@ module.exports = exports.default; this.tokens.matches1(se.TokenType._as) && (this.tokens.removeToken(), this.tokens.removeToken()); return ( - this.tokens.matchesContextual(Jn.ContextualKeyword._from) && + this.tokens.matchesContextual(ns.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)), + zh.removeMaybeImportAssertion.call(void 0, this.tokens)), !0 ); } @@ -23164,7 +23226,7 @@ module.exports = exports.default; ); return ( this.isTypeName(t) - ? sx.default.call(void 0, this.tokens) + ? yx.default.call(void 0, this.tokens) : this.injectCreateRequireForImportRequire ? (this.tokens.replaceToken('const'), this.tokens.copyToken(), @@ -23188,7 +23250,7 @@ module.exports = exports.default; ) this.tokens.removeToken(); this.tokens.removeToken(), - Mh.removeMaybeImportAssertion.call(void 0, this.tokens), + zh.removeMaybeImportAssertion.call(void 0, this.tokens), this.tokens.matches1(se.TokenType.semi) && this.tokens.removeToken(); } @@ -23197,23 +23259,23 @@ module.exports = exports.default; removeImportTypeBindings() { if ( (this.tokens.copyExpectedToken(se.TokenType._import), - this.tokens.matchesContextual(Jn.ContextualKeyword._type) && + this.tokens.matchesContextual(ns.ContextualKeyword._type) && !this.tokens.matches1AtIndex( this.tokens.currentIndex() + 1, se.TokenType.comma ) && !this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 1, - Jn.ContextualKeyword._from + ns.ContextualKeyword._from )) ) return !0; if (this.tokens.matches1(se.TokenType.string)) return this.tokens.copyToken(), !1; - this.tokens.matchesContextual(Jn.ContextualKeyword._module) && + this.tokens.matchesContextual(ns.ContextualKeyword._module) && this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 2, - Jn.ContextualKeyword._from + ns.ContextualKeyword._from ) && this.tokens.copyToken(); let t = !1, @@ -23245,7 +23307,7 @@ module.exports = exports.default; !this.tokens.matches1(se.TokenType.braceR); ) { - let i = Dh.default.call(void 0, this.tokens); + let i = Gh.default.call(void 0, this.tokens); if (i.isType || this.isTypeName(i.rightName)) { for (; this.tokens.currentIndex() < i.endIndex; ) this.tokens.removeToken(); @@ -23269,7 +23331,7 @@ module.exports = exports.default; } processExportDefault() { if ( - lx.default.call( + _x.default.call( void 0, this.isTypeScriptTransformEnabled, this.tokens, @@ -23299,7 +23361,7 @@ module.exports = exports.default; ) && this.tokens.matchesContextualAtIndex( this.tokens.currentIndex() + 2, - Jn.ContextualKeyword._async + ns.ContextualKeyword._async )) || this.tokens.matches4( se.TokenType._export, @@ -23336,7 +23398,7 @@ module.exports = exports.default; !this.tokens.matches1(se.TokenType.braceR); ) { - let t = Dh.default.call(void 0, this.tokens); + let t = Gh.default.call(void 0, this.tokens); if (t.isType || this.shouldElideExportedName(t.leftName)) { for (; this.tokens.currentIndex() < t.endIndex; ) this.tokens.removeToken(); @@ -23359,19 +23421,19 @@ module.exports = exports.default; ); } }; - cc.default = lc; + vc.default = kc; }); - var jh = Z((pc) => { + var Qh = Z((gc) => { 'use strict'; - Object.defineProperty(pc, '__esModule', {value: !0}); - function px(e) { + Object.defineProperty(gc, '__esModule', {value: !0}); + function wx(e) { return e && e.__esModule ? e : {default: e}; } - var Vh = It(), - sn = be(), - hx = hn(), - fx = px(hx), - uc = class extends fx.default { + var Jh = Et(), + an = Ce(), + Sx = dn(), + Ix = wx(Sx), + xc = class extends Ix.default { constructor(t, s, i) { super(), (this.rootTransformer = t), @@ -23383,14 +23445,14 @@ module.exports = exports.default; this.rootTransformer.processPossibleAsyncArrowWithTypeParams() || this.rootTransformer.processPossibleTypeRange() ? !0 - : this.tokens.matches1(sn.TokenType._enum) + : this.tokens.matches1(an.TokenType._enum) ? (this.processEnum(), !0) - : this.tokens.matches2(sn.TokenType._export, sn.TokenType._enum) + : this.tokens.matches2(an.TokenType._export, an.TokenType._enum) ? (this.processNamedExportEnum(), !0) : this.tokens.matches3( - sn.TokenType._export, - sn.TokenType._default, - sn.TokenType._enum + an.TokenType._export, + an.TokenType._default, + an.TokenType._enum ) ? (this.processDefaultExportEnum(), !0) : !1; @@ -23412,16 +23474,16 @@ module.exports = exports.default; } processEnum() { this.tokens.replaceToken('const'), - this.tokens.copyExpectedToken(sn.TokenType.name); + this.tokens.copyExpectedToken(an.TokenType.name); let t = !1; - this.tokens.matchesContextual(Vh.ContextualKeyword._of) && + this.tokens.matchesContextual(Jh.ContextualKeyword._of) && (this.tokens.removeToken(), - (t = this.tokens.matchesContextual(Vh.ContextualKeyword._symbol)), + (t = this.tokens.matchesContextual(Jh.ContextualKeyword._symbol)), this.tokens.removeToken()); let s = this.tokens.matches3( - sn.TokenType.braceL, - sn.TokenType.name, - sn.TokenType.eq + an.TokenType.braceL, + an.TokenType.name, + an.TokenType.eq ); this.tokens.appendCode(' = require("flow-enums-runtime")'); let i = !t && !s; @@ -23429,15 +23491,15 @@ module.exports = exports.default; this.tokens.replaceTokenTrimmingLeftWhitespace( i ? '.Mirrored([' : '({' ); - !this.tokens.matches1(sn.TokenType.braceR); + !this.tokens.matches1(an.TokenType.braceR); ) { - if (this.tokens.matches1(sn.TokenType.ellipsis)) { + if (this.tokens.matches1(an.TokenType.ellipsis)) { this.tokens.removeToken(); break; } this.processEnumElement(t, s), - this.tokens.matches1(sn.TokenType.comma) && + this.tokens.matches1(an.TokenType.comma) && this.tokens.copyToken(); } this.tokens.replaceToken(i ? ']);' : '});'); @@ -23454,15 +23516,15 @@ module.exports = exports.default; : this.tokens.replaceToken(`"${this.tokens.identifierName()}"`); } }; - pc.default = uc; + gc.default = xc; }); - var $h = Z((fc) => { + var Zh = Z((bc) => { 'use strict'; - Object.defineProperty(fc, '__esModule', {value: !0}); - function dx(e) { + Object.defineProperty(bc, '__esModule', {value: !0}); + function Ex(e) { return e && e.__esModule ? e : {default: e}; } - function mx(e) { + function Ax(e) { let t, s = e[0], i = 1; @@ -23481,12 +23543,12 @@ module.exports = exports.default; } return s; } - var Qn = be(), - yx = hn(), - Tx = dx(yx), - Do = 'jest', - kx = ['mock', 'unmock', 'enableAutomock', 'disableAutomock'], - hc = class e extends Tx.default { + var ss = Ce(), + Px = dn(), + Nx = Ex(Px), + jo = 'jest', + Rx = ['mock', 'unmock', 'enableAutomock', 'disableAutomock'], + _c = class e extends Nx.default { __init() { this.hoistedFunctionNames = []; } @@ -23501,13 +23563,13 @@ module.exports = exports.default; process() { return this.tokens.currentToken().scopeDepth === 0 && this.tokens.matches4( - Qn.TokenType.name, - Qn.TokenType.dot, - Qn.TokenType.name, - Qn.TokenType.parenL + ss.TokenType.name, + ss.TokenType.dot, + ss.TokenType.name, + ss.TokenType.parenL ) && - this.tokens.identifierName() === Do - ? mx([ + this.tokens.identifierName() === jo + ? Ax([ this, 'access', (t) => t.importProcessor, @@ -23518,7 +23580,7 @@ module.exports = exports.default; 'optionalAccess', (t) => t.has, 'call', - (t) => t(Do), + (t) => t(jo), ]) ? !1 : this.extractHoistedCalls() @@ -23535,53 +23597,53 @@ module.exports = exports.default; for ( ; this.tokens.matches3( - Qn.TokenType.dot, - Qn.TokenType.name, - Qn.TokenType.parenL + ss.TokenType.dot, + ss.TokenType.name, + ss.TokenType.parenL ); ) { let s = this.tokens.identifierNameAtIndex( this.tokens.currentIndex() + 1 ); - if (kx.includes(s)) { + if (Rx.includes(s)) { let r = this.nameManager.claimFreeName('__jestHoist'); this.hoistedFunctionNames.push(r), - this.tokens.replaceToken(`function ${r}(){${Do}.`), + this.tokens.replaceToken(`function ${r}(){${jo}.`), this.tokens.copyToken(), this.tokens.copyToken(), this.rootTransformer.processBalancedCode(), - this.tokens.copyExpectedToken(Qn.TokenType.parenR), + this.tokens.copyExpectedToken(ss.TokenType.parenR), this.tokens.appendCode(';}'), (t = !1); } else - t ? this.tokens.copyToken() : this.tokens.replaceToken(`${Do}.`), + t ? this.tokens.copyToken() : this.tokens.replaceToken(`${jo}.`), this.tokens.copyToken(), this.tokens.copyToken(), this.rootTransformer.processBalancedCode(), - this.tokens.copyExpectedToken(Qn.TokenType.parenR), + this.tokens.copyExpectedToken(ss.TokenType.parenR), (t = !0); } return !0; } }; - fc.default = hc; + bc.default = _c; }); - var qh = Z((mc) => { + var ef = Z((wc) => { 'use strict'; - Object.defineProperty(mc, '__esModule', {value: !0}); - function vx(e) { + Object.defineProperty(wc, '__esModule', {value: !0}); + function Lx(e) { return e && e.__esModule ? e : {default: e}; } - var xx = be(), - gx = hn(), - _x = vx(gx), - dc = class extends _x.default { + var Ox = Ce(), + Dx = dn(), + Mx = Lx(Dx), + Cc = class extends Mx.default { constructor(t) { super(), (this.tokens = t); } process() { - if (this.tokens.matches1(xx.TokenType.num)) { + if (this.tokens.matches1(Ox.TokenType.num)) { let t = this.tokens.currentTokenCode(); if (t.includes('_')) return this.tokens.replaceToken(t.replace(/_/g, '')), !0; @@ -23589,23 +23651,23 @@ module.exports = exports.default; return !1; } }; - mc.default = dc; + wc.default = Cc; }); - var Uh = Z((Tc) => { + var nf = Z((Ic) => { 'use strict'; - Object.defineProperty(Tc, '__esModule', {value: !0}); - function bx(e) { + Object.defineProperty(Ic, '__esModule', {value: !0}); + function Fx(e) { return e && e.__esModule ? e : {default: e}; } - var Kh = be(), - Cx = hn(), - wx = bx(Cx), - yc = class extends wx.default { + var tf = Ce(), + Bx = dn(), + Vx = Fx(Bx), + Sc = class extends Vx.default { constructor(t, s) { super(), (this.tokens = t), (this.nameManager = s); } process() { - return this.tokens.matches2(Kh.TokenType._catch, Kh.TokenType.braceL) + return this.tokens.matches2(tf.TokenType._catch, tf.TokenType.braceL) ? (this.tokens.copyToken(), this.tokens.appendCode( ` (${this.nameManager.claimFreeName('e')})` @@ -23614,23 +23676,23 @@ module.exports = exports.default; : !1; } }; - Tc.default = yc; + Ic.default = Sc; }); - var Hh = Z((vc) => { + var sf = Z((Ac) => { 'use strict'; - Object.defineProperty(vc, '__esModule', {value: !0}); - function Sx(e) { + Object.defineProperty(Ac, '__esModule', {value: !0}); + function jx(e) { return e && e.__esModule ? e : {default: e}; } - var jt = be(), - Ix = hn(), - Ex = Sx(Ix), - kc = class extends Ex.default { + var Kt = Ce(), + $x = dn(), + Kx = jx($x), + Ec = class extends Kx.default { constructor(t, s) { super(), (this.tokens = t), (this.nameManager = s); } process() { - if (this.tokens.matches1(jt.TokenType.nullishCoalescing)) { + if (this.tokens.matches1(Kt.TokenType.nullishCoalescing)) { let i = this.tokens.currentToken(); return ( this.tokens.tokens[i.nullishStartIndex].isAsyncOperation @@ -23642,7 +23704,7 @@ module.exports = exports.default; ); } if ( - this.tokens.matches1(jt.TokenType._delete) && + this.tokens.matches1(Kt.TokenType._delete) && this.tokens.tokenAtRelativeIndex(1).isOptionalChainStart ) return this.tokens.removeInitialToken(), !0; @@ -23650,24 +23712,24 @@ module.exports = exports.default; if ( s != null && this.tokens.tokens[s].isOptionalChainStart && - this.tokens.tokenAtRelativeIndex(-1).type !== jt.TokenType._super + this.tokens.tokenAtRelativeIndex(-1).type !== Kt.TokenType._super ) { let i = this.nameManager.claimFreeName('_'), r; if ( (s > 0 && - this.tokens.matches1AtIndex(s - 1, jt.TokenType._delete) && + this.tokens.matches1AtIndex(s - 1, Kt.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 + Kt.TokenType.questionDot, + Kt.TokenType.parenL ) || this.tokens.matches2( - jt.TokenType.questionDot, - jt.TokenType.lessThan + Kt.TokenType.questionDot, + Kt.TokenType.lessThan )) ) this.justSkippedSuper() && this.tokens.appendCode('.bind(this)'), @@ -23676,26 +23738,26 @@ module.exports = exports.default; ); else if ( this.tokens.matches2( - jt.TokenType.questionDot, - jt.TokenType.bracketL + Kt.TokenType.questionDot, + Kt.TokenType.bracketL ) ) this.tokens.replaceTokenTrimmingLeftWhitespace( `, 'optionalAccess', ${r}` ); - else if (this.tokens.matches1(jt.TokenType.questionDot)) + else if (this.tokens.matches1(Kt.TokenType.questionDot)) this.tokens.replaceTokenTrimmingLeftWhitespace( `, 'optionalAccess', ${r}.` ); - else if (this.tokens.matches1(jt.TokenType.dot)) + else if (this.tokens.matches1(Kt.TokenType.dot)) this.tokens.replaceTokenTrimmingLeftWhitespace( `, 'access', ${r}.` ); - else if (this.tokens.matches1(jt.TokenType.bracketL)) + else if (this.tokens.matches1(Kt.TokenType.bracketL)) this.tokens.replaceTokenTrimmingLeftWhitespace( `, 'access', ${r}[` ); - else if (this.tokens.matches1(jt.TokenType.parenL)) + else if (this.tokens.matches1(Kt.TokenType.parenL)) this.justSkippedSuper() && this.tokens.appendCode('.bind(this)'), this.tokens.replaceTokenTrimmingLeftWhitespace( `, 'call', ${r}(` @@ -23742,24 +23804,24 @@ module.exports = exports.default; ) return !1; if (t === 0 && this.tokens.tokens[s].subscriptStartIndex != null) - return this.tokens.tokens[s - 1].type === jt.TokenType._super; + return this.tokens.tokens[s - 1].type === Kt.TokenType._super; s--; } } }; - vc.default = kc; + Ac.default = Ec; }); - var Gh = Z((gc) => { + var of = Z((Nc) => { 'use strict'; - Object.defineProperty(gc, '__esModule', {value: !0}); - function Ax(e) { + Object.defineProperty(Nc, '__esModule', {value: !0}); + function qx(e) { return e && e.__esModule ? e : {default: e}; } - var Wh = xt(), - Et = be(), - Px = hn(), - Nx = Ax(Px), - xc = class extends Nx.default { + var rf = _t(), + At = Ce(), + Ux = dn(), + Hx = qx(Ux), + Pc = class extends Hx.default { constructor(t, s, i, r) { super(), (this.rootTransformer = t), @@ -23783,9 +23845,9 @@ module.exports = exports.default; } if ( this.tokens.matches3( - Et.TokenType.name, - Et.TokenType.dot, - Et.TokenType.name + At.TokenType.name, + At.TokenType.dot, + At.TokenType.name ) && this.tokens.identifierName() === 'React' && this.tokens.identifierNameAtIndex( @@ -23814,30 +23876,30 @@ module.exports = exports.default; let s = this.findDisplayName(t); s && this.classNeedsDisplayName() && - (this.tokens.copyExpectedToken(Et.TokenType.parenL), - this.tokens.copyExpectedToken(Et.TokenType.braceL), + (this.tokens.copyExpectedToken(At.TokenType.parenL), + this.tokens.copyExpectedToken(At.TokenType.braceL), this.tokens.appendCode(`displayName: '${s}',`), this.rootTransformer.processBalancedCode(), - this.tokens.copyExpectedToken(Et.TokenType.braceR), - this.tokens.copyExpectedToken(Et.TokenType.parenR)); + this.tokens.copyExpectedToken(At.TokenType.braceR), + this.tokens.copyExpectedToken(At.TokenType.parenR)); } findDisplayName(t) { return t < 2 ? null : this.tokens.matches2AtIndex( t - 2, - Et.TokenType.name, - Et.TokenType.eq + At.TokenType.name, + At.TokenType.eq ) ? this.tokens.identifierNameAtIndex(t - 2) : t >= 2 && this.tokens.tokens[t - 2].identifierRole === - Wh.IdentifierRole.ObjectKey + rf.IdentifierRole.ObjectKey ? this.tokens.identifierNameAtIndex(t - 2) : this.tokens.matches2AtIndex( t - 2, - Et.TokenType._export, - Et.TokenType._default + At.TokenType._export, + At.TokenType._default ) ? this.getDisplayNameFromFilename() : null; @@ -23851,7 +23913,7 @@ module.exports = exports.default; } classNeedsDisplayName() { let t = this.tokens.currentIndex(); - if (!this.tokens.matches2(Et.TokenType.parenL, Et.TokenType.braceL)) + if (!this.tokens.matches2(At.TokenType.parenL, At.TokenType.braceL)) return !1; let s = t + 1, i = this.tokens.tokens[s].contextId; @@ -23861,14 +23923,14 @@ module.exports = exports.default; ); for (; t < this.tokens.tokens.length; t++) { let r = this.tokens.tokens[t]; - if (r.type === Et.TokenType.braceR && r.contextId === i) { + if (r.type === At.TokenType.braceR && r.contextId === i) { t++; break; } if ( this.tokens.identifierNameAtIndex(t) === 'displayName' && this.tokens.tokens[t].identifierRole === - Wh.IdentifierRole.ObjectKey && + rf.IdentifierRole.ObjectKey && r.contextId === i ) return !1; @@ -23878,27 +23940,27 @@ module.exports = exports.default; 'Unexpected end of input when processing React class.' ); return ( - this.tokens.matches1AtIndex(t, Et.TokenType.parenR) || + this.tokens.matches1AtIndex(t, At.TokenType.parenR) || this.tokens.matches2AtIndex( t, - Et.TokenType.comma, - Et.TokenType.parenR + At.TokenType.comma, + At.TokenType.parenR ) ); } }; - gc.default = xc; + Nc.default = Pc; }); - var Xh = Z((bc) => { + var lf = Z((Lc) => { 'use strict'; - Object.defineProperty(bc, '__esModule', {value: !0}); - function Rx(e) { + Object.defineProperty(Lc, '__esModule', {value: !0}); + function Wx(e) { return e && e.__esModule ? e : {default: e}; } - var zh = xt(), - Lx = hn(), - Ox = Rx(Lx), - _c = class e extends Ox.default { + var af = _t(), + Gx = dn(), + zx = Wx(Gx), + Rc = class e extends zx.default { __init() { this.extractedDefaultExportName = null; } @@ -23924,8 +23986,8 @@ module.exports = exports.default; let t = new Set(); for (let i of this.tokens.tokens) !i.isType && - zh.isTopLevelDeclaration.call(void 0, i) && - i.identifierRole !== zh.IdentifierRole.ImportDeclaration && + af.isTopLevelDeclaration.call(void 0, i) && + i.identifierRole !== af.IdentifierRole.ImportDeclaration && t.add(this.tokens.identifierNameForToken(i)); let s = Array.from(t).map((i) => ({ variableName: i, @@ -23959,13 +24021,13 @@ ${s.map( return !1; } }; - bc.default = _c; + Lc.default = Rc; }); - var Jh = Z((Cc) => { + var uf = Z((Oc) => { 'use strict'; - Object.defineProperty(Cc, '__esModule', {value: !0}); - var Yh = li(), - Dx = new Set([ + Object.defineProperty(Oc, '__esModule', {value: !0}); + var cf = ui(), + Xx = new Set([ 'break', 'case', 'catch', @@ -24013,26 +24075,26 @@ ${s.map( 'null', 'true', ]); - function Mx(e) { - if (e.length === 0 || !Yh.IS_IDENTIFIER_START[e.charCodeAt(0)]) return !1; + function Yx(e) { + if (e.length === 0 || !cf.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); + if (!cf.IS_IDENTIFIER_CHAR[e.charCodeAt(t)]) return !1; + return !Xx.has(e); } - Cc.default = Mx; + Oc.default = Yx; }); - var ef = Z((Sc) => { + var ff = Z((Mc) => { 'use strict'; - Object.defineProperty(Sc, '__esModule', {value: !0}); - function Zh(e) { + Object.defineProperty(Mc, '__esModule', {value: !0}); + function hf(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 { + var Ke = Ce(), + Jx = uf(), + pf = hf(Jx), + Qx = dn(), + Zx = hf(Qx), + Dc = class extends Zx.default { constructor(t, s, i) { super(), (this.rootTransformer = t), @@ -24044,22 +24106,22 @@ ${s.map( 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.matches1(Ke.TokenType._public) || + this.tokens.matches1(Ke.TokenType._protected) || + this.tokens.matches1(Ke.TokenType._private) || + this.tokens.matches1(Ke.TokenType._abstract) || + this.tokens.matches1(Ke.TokenType._readonly) || + this.tokens.matches1(Ke.TokenType._override) || + this.tokens.matches1(Ke.TokenType.nonNullAssertion) ? (this.tokens.removeInitialToken(), !0) - : this.tokens.matches1($e.TokenType._enum) || - this.tokens.matches2($e.TokenType._const, $e.TokenType._enum) + : this.tokens.matches1(Ke.TokenType._enum) || + this.tokens.matches2(Ke.TokenType._const, Ke.TokenType._enum) ? (this.processEnum(), !0) - : this.tokens.matches2($e.TokenType._export, $e.TokenType._enum) || + : this.tokens.matches2(Ke.TokenType._export, Ke.TokenType._enum) || this.tokens.matches3( - $e.TokenType._export, - $e.TokenType._const, - $e.TokenType._enum + Ke.TokenType._export, + Ke.TokenType._const, + Ke.TokenType._enum ) ? (this.processEnum(!0), !0) : !1; @@ -24067,8 +24129,8 @@ ${s.map( processEnum(t = !1) { for ( this.tokens.removeInitialToken(); - this.tokens.matches1($e.TokenType._const) || - this.tokens.matches1($e.TokenType._enum); + this.tokens.matches1(Ke.TokenType._const) || + this.tokens.matches1(Ke.TokenType._enum); ) this.tokens.removeToken(); @@ -24078,51 +24140,51 @@ ${s.map( !this.isImportsTransformEnabled && this.tokens.appendCode('export '), this.tokens.appendCode(`var ${s}; (function (${s})`), - this.tokens.copyExpectedToken($e.TokenType.braceL), + this.tokens.copyExpectedToken(Ke.TokenType.braceL), this.processEnumBody(s), - this.tokens.copyExpectedToken($e.TokenType.braceR), + this.tokens.copyExpectedToken(Ke.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); ) { + for (; !this.tokens.matches1(Ke.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 + Ke.TokenType.eq, + Ke.TokenType.string, + Ke.TokenType.comma ) || this.tokens.matches3( - $e.TokenType.eq, - $e.TokenType.string, - $e.TokenType.braceR + Ke.TokenType.eq, + Ke.TokenType.string, + Ke.TokenType.braceR ) ? this.processStringLiteralEnumMember(t, i, r) - : this.tokens.matches1($e.TokenType.eq) + : this.tokens.matches1(Ke.TokenType.eq) ? this.processExplicitValueEnumMember(t, i, r) : this.processImplicitValueEnumMember(t, i, r, s), - this.tokens.matches1($e.TokenType.comma) && + this.tokens.matches1(Ke.TokenType.comma) && this.tokens.removeToken(), r != null ? (s = r) : (s = `${t}[${i}]`); } } extractEnumKeyInfo(t) { - if (t.type === $e.TokenType.name) { + if (t.type === Ke.TokenType.name) { let s = this.tokens.identifierNameForToken(t); return { nameStringCode: `"${s}"`, - variableName: Qh.default.call(void 0, s) ? s : null, + variableName: pf.default.call(void 0, s) ? s : null, }; - } else if (t.type === $e.TokenType.string) { + } else if (t.type === Ke.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, + variableName: pf.default.call(void 0, s) ? s : null, }; } else throw new Error( @@ -24169,41 +24231,41 @@ ${s.map( this.tokens.appendCode(`${t}[${t}[${s}] = ${a}] = ${s};`); } }; - Sc.default = wc; + Mc.default = Dc; }); - var tf = Z((Ec) => { + var df = Z((Bc) => { 'use strict'; - Object.defineProperty(Ec, '__esModule', {value: !0}); - function yn(e) { + Object.defineProperty(Bc, '__esModule', {value: !0}); + function kn(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 { + var eg = Et(), + ct = Ce(), + tg = $h(), + ng = kn(tg), + sg = Wh(), + ig = kn(sg), + rg = Yh(), + og = kn(rg), + ag = Qh(), + lg = kn(ag), + cg = Zh(), + ug = kn(cg), + pg = Ha(), + hg = kn(pg), + fg = ef(), + dg = kn(fg), + mg = nf(), + Tg = kn(mg), + yg = sf(), + kg = kn(yg), + vg = of(), + xg = kn(vg), + gg = lf(), + _g = kn(gg), + bg = ff(), + Cg = kn(bg), + Fc = class e { __init() { this.transformers = []; } @@ -24222,22 +24284,22 @@ ${s.map( 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))), + (this.transformers.push(new kg.default(a, this.nameManager)), + this.transformers.push(new dg.default(a)), + this.transformers.push(new Tg.default(a, this.nameManager))), s.includes('jsx') && (r.jsxRuntime !== 'preserve' && this.transformers.push( - new Qx.default(this, a, u, this.nameManager, r) + new hg.default(this, a, u, this.nameManager, r) ), - this.transformers.push(new og.default(this, a, u, r))); + this.transformers.push(new xg.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); + (d = new _g.default(a, r.filePath)), this.transformers.push(d); } if (s.includes('imports')) { if (u === null) @@ -24245,7 +24307,7 @@ ${s.map( 'Expected non-null importProcessor with imports transform enabled.' ); this.transformers.push( - new Ux.default( + new ig.default( this, a, u, @@ -24260,7 +24322,7 @@ ${s.map( ); } else this.transformers.push( - new Wx.default( + new og.default( a, this.nameManager, this.helperManager, @@ -24271,15 +24333,15 @@ ${s.map( ); s.includes('flow') && this.transformers.push( - new zx.default(this, a, s.includes('imports')) + new lg.default(this, a, s.includes('imports')) ), s.includes('typescript') && this.transformers.push( - new ug.default(this, a, s.includes('imports')) + new Cg.default(this, a, s.includes('imports')) ), s.includes('jest') && this.transformers.push( - new Yx.default(this, a, this.nameManager, u) + new ug.default(this, a, this.nameManager, u) ); } transform() { @@ -24317,16 +24379,16 @@ ${s.map( s = 0; for (; !this.tokens.isAtEnd(); ) { if ( - this.tokens.matches1(lt.TokenType.braceL) || - this.tokens.matches1(lt.TokenType.dollarBraceL) + this.tokens.matches1(ct.TokenType.braceL) || + this.tokens.matches1(ct.TokenType.dollarBraceL) ) t++; - else if (this.tokens.matches1(lt.TokenType.braceR)) { + else if (this.tokens.matches1(ct.TokenType.braceR)) { if (t === 0) return; t--; } - if (this.tokens.matches1(lt.TokenType.parenL)) s++; - else if (this.tokens.matches1(lt.TokenType.parenR)) { + if (this.tokens.matches1(ct.TokenType.parenL)) s++; + else if (this.tokens.matches1(ct.TokenType.parenR)) { if (s === 0) return; s--; } @@ -24334,7 +24396,7 @@ ${s.map( } } processToken() { - if (this.tokens.matches1(lt.TokenType._class)) { + if (this.tokens.matches1(ct.TokenType._class)) { this.processClass(); return; } @@ -24342,7 +24404,7 @@ ${s.map( this.tokens.copyToken(); } processNamedClass() { - if (!this.tokens.matches2(lt.TokenType._class, lt.TokenType.name)) + if (!this.tokens.matches2(ct.TokenType._class, ct.TokenType.name)) throw new Error('Expected identifier for exported class name.'); let t = this.tokens.identifierNameAtIndex( this.tokens.currentIndex() + 1 @@ -24350,7 +24412,7 @@ ${s.map( return this.processClass(), t; } processClass() { - let t = qx.default.call( + let t = ng.default.call( void 0, this, this.tokens, @@ -24371,8 +24433,8 @@ ${s.map( 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.tokens.copyExpectedToken(ct.TokenType._class); + !this.tokens.matchesContextIdAndLabel(ct.TokenType.braceL, a); ) this.processToken(); @@ -24392,20 +24454,20 @@ ${s.map( constructorInitializerStatements: a, fields: u, instanceInitializerNames: d, - rangesToRemove: y, + rangesToRemove: v, } = t, g = 0, - L = 0, + O = 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.tokens.copyExpectedToken(ct.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 f = a.length + d.length > 0; + if (r === null && f) { let T = this.makeConstructorInitCode(a, d, s); if (i.hasSuperclass) { let x = this.nameManager.claimFreeName('args'); @@ -24416,18 +24478,18 @@ ${s.map( } for ( ; - !this.tokens.matchesContextIdAndLabel(lt.TokenType.braceR, p); + !this.tokens.matchesContextIdAndLabel(ct.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.matches1(ct.TokenType.bracketL) ? this.tokens.copyTokenWithPrefix( `${u[g].initializerName}() {this` ) - : this.tokens.matches1(lt.TokenType.string) || - this.tokens.matches1(lt.TokenType.num) + : this.tokens.matches1(ct.TokenType.string) || + this.tokens.matches1(ct.TokenType.num) ? (this.tokens.copyTokenWithPrefix( `${u[g].initializerName}() {this[` ), @@ -24444,27 +24506,27 @@ ${s.map( this.processToken(); this.tokens.appendCode('}'), g++; } else if ( - L < y.length && - this.tokens.currentIndex() >= y[L].start + O < v.length && + this.tokens.currentIndex() >= v[O].start ) { for ( - this.tokens.currentIndex() < y[L].end && + this.tokens.currentIndex() < v[O].end && this.tokens.removeInitialToken(); - this.tokens.currentIndex() < y[L].end; + this.tokens.currentIndex() < v[O].end; ) this.tokens.removeToken(); - L++; + O++; } else this.tokens.currentIndex() === r ? (this.tokens.copyToken(), - h && + f && this.tokens.appendCode( `;${this.makeConstructorInitCode(a, d, s)};` ), this.processToken()) : this.processToken(); - this.tokens.copyExpectedToken(lt.TokenType.braceR); + this.tokens.copyExpectedToken(ct.TokenType.braceR); } makeConstructorInitCode(t, s, i) { return [...t, ...s.map((r) => `${i}.prototype.${r}.call(this)`)].join( @@ -24473,12 +24535,12 @@ ${s.map( } processPossibleArrowParamEnd() { if ( - this.tokens.matches2(lt.TokenType.parenR, lt.TokenType.colon) && + this.tokens.matches2(ct.TokenType.parenR, ct.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)) { + if (this.tokens.matches1AtIndex(t, ct.TokenType.arrow)) { for ( this.tokens.removeInitialToken(); this.tokens.currentIndex() < t; @@ -24492,15 +24554,15 @@ ${s.map( } processPossibleAsyncArrowWithTypeParams() { if ( - !this.tokens.matchesContextual(jx.ContextualKeyword._async) && - !this.tokens.matches1(lt.TokenType._async) + !this.tokens.matchesContextual(eg.ContextualKeyword._async) && + !this.tokens.matches1(ct.TokenType._async) ) return !1; let t = this.tokens.tokenAtRelativeIndex(1); - if (t.type !== lt.TokenType.lessThan || !t.isType) return !1; + if (t.type !== ct.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)) { + if (this.tokens.matches1AtIndex(s, ct.TokenType.parenL)) { for ( this.tokens.replaceToken('async ('), this.tokens.removeInitialToken(); @@ -24537,25 +24599,25 @@ ${s.map( return t; } }; - Ec.default = Ic; + Bc.default = Fc; }); - var rf = Z((hr) => { + var yf = Z((yr) => { 'use strict'; - hr.__esModule = !0; - hr.LinesAndColumns = void 0; - var Mo = ` + yr.__esModule = !0; + yr.LinesAndColumns = void 0; + var $o = ` `, - nf = '\r', - sf = (function () { + mf = '\r', + Tf = (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); + case $o: + (i += $o.length), s.push(i); break; - case nf: - (i += nf.length), t[i] === Mo && (i += Mo.length), s.push(i); + case mf: + (i += mf.length), t[i] === $o && (i += $o.length), s.push(i); break; default: i++; @@ -24591,150 +24653,150 @@ ${s.map( e ); })(); - hr.LinesAndColumns = sf; - hr.default = sf; + yr.LinesAndColumns = Tf; + yr.default = Tf; }); - var of = Z((Ac) => { + var kf = Z((Vc) => { 'use strict'; - Object.defineProperty(Ac, '__esModule', {value: !0}); - function pg(e) { + Object.defineProperty(Vc, '__esModule', {value: !0}); + function wg(e) { return e && e.__esModule ? e : {default: e}; } - var hg = rf(), - fg = pg(hg), - dg = be(); - function mg(e, t) { + var Sg = yf(), + Ig = wg(Sg), + Eg = Ce(); + function Ag(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' + (f) => + f !== 'type' && + f !== 'value' && + f !== 'start' && + f !== 'end' && + f !== 'loc' ), i = Object.keys(t[0].type).filter( - (h) => h !== 'label' && h !== 'keyword' + (f) => f !== 'label' && f !== 'keyword' ), r = ['Location', 'Label', 'Raw', ...s, ...i], - a = new fg.default(e), - u = [r, ...t.map(y)], + a = new Ig.default(e), + u = [r, ...t.map(v)], 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(` + for (let f of u) + for (let T = 0; T < f.length; T++) d[T] = Math.max(d[T], f[T].length); + return u.map((f) => f.map((T, x) => T.padEnd(d[x])).join(' ')).join(` `); - function y(h) { - let T = e.slice(h.start, h.end); + function v(f) { + let T = e.slice(f.start, f.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)), + O(f.start, f.end), + Eg.formatTokenType.call(void 0, f.type), + Pg(String(T), 14), + ...s.map((x) => g(f[x], x)), + ...i.map((x) => g(f.type[x], x)), ]; } - function g(h, T) { - return h === !0 ? T : h === !1 || h === null ? '' : String(h); + function g(f, T) { + return f === !0 ? T : f === !1 || f === null ? '' : String(f); } - function L(h, T) { - return `${p(h)}-${p(T)}`; + function O(f, T) { + return `${p(f)}-${p(T)}`; } - function p(h) { - let T = a.locationForIndex(h); + function p(f) { + let T = a.locationForIndex(f); return T ? `${T.line + 1}:${T.column + 1}` : 'Unknown'; } } - Ac.default = mg; - function yg(e, t) { + Vc.default = Ag; + function Pg(e, t) { return e.length > t ? `${e.slice(0, t - 3)}...` : e; } }); - var af = Z((Pc) => { + var vf = Z((jc) => { 'use strict'; - Object.defineProperty(Pc, '__esModule', {value: !0}); - function Tg(e) { + Object.defineProperty(jc, '__esModule', {value: !0}); + function Ng(e) { return e && e.__esModule ? e : {default: e}; } - var Gt = be(), - kg = Wi(), - vg = Tg(kg); - function xg(e) { + var zt = Ce(), + Rg = Ji(), + Lg = Ng(Rg); + function Og(e) { let t = new Set(); for (let s = 0; s < e.tokens.length; s++) - e.matches1AtIndex(s, Gt.TokenType._import) && + e.matches1AtIndex(s, zt.TokenType._import) && !e.matches3AtIndex( s, - Gt.TokenType._import, - Gt.TokenType.name, - Gt.TokenType.eq + zt.TokenType._import, + zt.TokenType.name, + zt.TokenType.eq ) && - gg(e, s, t); + Dg(e, s, t); return t; } - Pc.default = xg; - function gg(e, t, s) { + jc.default = Og; + function Dg(e, t, s) { t++, - !e.matches1AtIndex(t, Gt.TokenType.parenL) && - (e.matches1AtIndex(t, Gt.TokenType.name) && + !e.matches1AtIndex(t, zt.TokenType.parenL) && + (e.matches1AtIndex(t, zt.TokenType.name) && (s.add(e.identifierNameAtIndex(t)), t++, - e.matches1AtIndex(t, Gt.TokenType.comma) && t++), - e.matches1AtIndex(t, Gt.TokenType.star) && + e.matches1AtIndex(t, zt.TokenType.comma) && t++), + e.matches1AtIndex(t, zt.TokenType.star) && ((t += 2), s.add(e.identifierNameAtIndex(t)), t++), - e.matches1AtIndex(t, Gt.TokenType.braceL) && (t++, _g(e, t, s))); + e.matches1AtIndex(t, zt.TokenType.braceL) && (t++, Mg(e, t, s))); } - function _g(e, t, s) { + function Mg(e, t, s) { for (;;) { - if (e.matches1AtIndex(t, Gt.TokenType.braceR)) return; - let i = vg.default.call(void 0, e, t); + if (e.matches1AtIndex(t, zt.TokenType.braceR)) return; + let i = Lg.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)) + e.matches2AtIndex(t, zt.TokenType.comma, zt.TokenType.braceR)) ) return; - if (e.matches1AtIndex(t, Gt.TokenType.braceR)) return; - if (e.matches1AtIndex(t, Gt.TokenType.comma)) t++; + if (e.matches1AtIndex(t, zt.TokenType.braceR)) return; + if (e.matches1AtIndex(t, zt.TokenType.comma)) t++; else throw new Error(`Unexpected token: ${JSON.stringify(e.tokens[t])}`); } } }); - var uf = Z((fr) => { + var _f = Z((kr) => { 'use strict'; - Object.defineProperty(fr, '__esModule', {value: !0}); - function vs(e) { + Object.defineProperty(kr, '__esModule', {value: !0}); + function bs(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() { + var Fg = q1(), + Bg = bs(Fg), + Vg = Z1(), + jg = bs(Vg), + $g = ep(), + Kg = sp(), + xf = bs(Kg), + qg = rp(), + Ug = bs(qg), + Hg = bp(), + Wg = ec(), + Gg = Bh(), + zg = bs(Gg), + Xg = df(), + Yg = bs(Xg), + Jg = kf(), + Qg = bs(Jg), + Zg = vf(), + e_ = bs(Zg); + function t_() { return '3.32.0'; } - fr.getVersion = $g; - function qg(e, t) { - Ng.validateOptions.call(void 0, t); + kr.getVersion = t_; + function n_(e, t) { + Hg.validateOptions.call(void 0, t); try { - let s = cf(e, t), - r = new Mg.default( + let s = gf(e, t), + r = new Yg.default( s, t.transforms, !!t.enableLegacyBabel5ModuleInterop, @@ -24748,7 +24810,7 @@ ${s.map( ); a = { ...a, - sourceMap: Sg.default.call( + sourceMap: jg.default.call( void 0, r, t.filePath, @@ -24767,59 +24829,59 @@ ${s.map( ); } } - fr.transform = qg; - function Kg(e, t) { - let s = cf(e, t).tokenProcessor.tokens; - return Bg.default.call(void 0, e, s); + kr.transform = n_; + function s_(e, t) { + let s = gf(e, t).tokenProcessor.tokens; + return Qg.default.call(void 0, e, s); } - fr.getFormattedTokens = Kg; - function cf(e, t) { + kr.getFormattedTokens = s_; + function gf(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), + u = Wg.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, + v = u.scopes, + g = new Ug.default(e, d), + O = new $g.HelperManager(g), + p = new zg.default(e, d, r, a, O), + f = !!t.enableLegacyTypeScriptModuleInterop, T = null; return ( t.transforms.includes('imports') - ? ((T = new Cg.default( + ? ((T = new Bg.default( g, p, - h, + f, t, t.transforms.includes('typescript'), - L + O )), T.preprocessTokens(), - lf.default.call(void 0, p, y, T.getGlobalNames()), + xf.default.call(void 0, p, v, 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)), + xf.default.call(void 0, p, v, e_.default.call(void 0, p)), { tokenProcessor: p, - scopes: y, + scopes: v, nameManager: g, importProcessor: T, - helperManager: L, + helperManager: O, } ); } }); - var hf = Z((Fo, pf) => { + var Cf = Z((Ko, bf) => { (function (e, t) { - typeof Fo == 'object' && typeof pf < 'u' - ? t(Fo) + typeof Ko == 'object' && typeof bf < 'u' + ? t(Ko) : typeof define == 'function' && define.amd ? define(['exports'], t) : ((e = typeof globalThis < 'u' ? globalThis : e || self), t((e.acorn = {}))); - })(Fo, function (e) { + })(Ko, 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, @@ -24892,17 +24954,17 @@ ${s.map( '5module': u + ' export import', 6: u + ' const class extends export import super', }, - y = /^in(stanceof)?$/, + v = /^in(stanceof)?$/, g = new RegExp('[' + r + ']'), - L = new RegExp('[' + r + i + ']'); + O = 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; + for (var l = 65536, h = 0; h < o.length; h += 2) { + if (((l += o[h]), l > n)) return !1; + if (((l += o[h + 1]), l >= n)) return !0; } return !1; } - function h(n, o) { + function f(n, o) { return n < 65 ? n === 36 : n < 91 @@ -24931,7 +24993,7 @@ ${s.map( : n < 123 ? !0 : n <= 65535 - ? n >= 170 && L.test(String.fromCharCode(n)) + ? n >= 170 && O.test(String.fromCharCode(n)) : o === !1 ? !1 : p(n, s) || p(n, t); @@ -24954,9 +25016,9 @@ ${s.map( } var S = {beforeExpr: !0}, A = {startsExpr: !0}, - U = {}; + q = {}; function M(n, o) { - return o === void 0 && (o = {}), (o.keyword = n), (U[n] = new x(n, o)); + return o === void 0 && (o = {}), (o.keyword = n), (q[n] = new x(n, o)); } var c = { num: new x('num', A), @@ -25049,63 +25111,63 @@ ${s.map( } function ie(n, o, l) { l === void 0 && (l = n.length); - for (var f = o; f < l; f++) { - var m = n.charCodeAt(f); + for (var h = o; h < l; h++) { + var m = n.charCodeAt(h); if (X(m)) - return f < l - 1 && m === 13 && n.charCodeAt(f + 1) === 10 - ? f + 2 - : f + 1; + return h < l - 1 && m === 13 && n.charCodeAt(h + 1) === 10 + ? h + 2 + : h + 1; } return -1; } - var pe = /[\u1680\u2000-\u200a\u202f\u205f\u3000\ufeff]/, + var he = /[\u1680\u2000-\u200a\u202f\u205f\u3000\ufeff]/, ae = /(?:\s|\/\/.*|\/\*[^]*?\*\/)*/g, - He = Object.prototype, - qe = He.hasOwnProperty, - Bt = He.toString, - mt = + We = Object.prototype, + qe = We.hasOwnProperty, + Bt = We.toString, + Tt = Object.hasOwn || function (n, o) { return qe.call(n, o); }, - kt = + vt = Array.isArray || function (n) { return Bt.call(n) === '[object Array]'; }, - At = Object.create(null); - function tt(n) { + Pt = Object.create(null); + function nt(n) { return ( - At[n] || (At[n] = new RegExp('^(?:' + n.replace(/ /g, '|') + ')$')) + Pt[n] || (Pt[n] = new RegExp('^(?:' + n.replace(/ /g, '|') + ')$')) ); } - function nt(n) { + function st(n) { return n <= 65535 ? String.fromCharCode(n) : ((n -= 65536), String.fromCharCode((n >> 10) + 55296, (n & 1023) + 56320)); } - var _t = + var Ct = /(?:[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/, - ct = function (o, l) { + ut = function (o, l) { (this.line = o), (this.column = l); }; - ct.prototype.offset = function (o) { - return new ct(this.line, this.column + o); + ut.prototype.offset = function (o) { + return new ut(this.line, this.column + o); }; - var wt = function (o, l, f) { + var St = function (o, l, h) { (this.start = l), - (this.end = f), + (this.end = h), 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); + function qt(n, o) { + for (var l = 1, h = 0; ; ) { + var m = ie(n, h, o); + if (m < 0) return new ut(l, o - h); + ++l, (h = m); } } - var Pt = { + var Nt = { ecmaVersion: null, sourceType: 'script', onInsertedSemicolon: null, @@ -25126,18 +25188,18 @@ ${s.map( directSourceFile: null, preserveParens: !1, }, - qt = !1; - function Tn(n) { + Ut = !1; + function vn(n) { var o = {}; - for (var l in Pt) o[l] = n && mt(n, l) ? n[l] : Pt[l]; + for (var l in Nt) o[l] = n && Tt(n, l) ? n[l] : Nt[l]; if ( (o.ecmaVersion === 'latest' ? (o.ecmaVersion = 1e8) : o.ecmaVersion == null - ? (!qt && + ? (!Ut && typeof console == 'object' && console.warn && - ((qt = !0), + ((Ut = !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)) @@ -25145,19 +25207,19 @@ Defaulting to 2020, but this will stop working in the future.`)), o.allowReserved == null && (o.allowReserved = o.ecmaVersion < 5), (!n || n.allowHashBang == null) && (o.allowHashBang = o.ecmaVersion >= 14), - kt(o.onToken)) + vt(o.onToken)) ) { - var f = o.onToken; + var h = o.onToken; o.onToken = function (m) { - return f.push(m); + return h.push(m); }; } - return kt(o.onComment) && (o.onComment = V(o, o.onComment)), o; + return vt(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)), + return function (l, h, m, E, L, Y) { + var Q = {type: l ? 'Block' : 'Line', value: h, start: m, end: E}; + n.locations && (Q.loc = new St(this, L, Y)), n.ranges && (Q.range = [m, E]), o.push(Q); }; @@ -25165,27 +25227,27 @@ Defaulting to 2020, but this will stop working in the future.`)), 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, + xe = 8, + fe = 16, + Ee = 32, + Ae = 64, + Oe = 128, + Ye = 256, + Ge = 512, + Ue = G | J | Ye; + function pt(n, o) { + return J | (n ? re : 0) | (o ? xe : 0); + } + var ht = 0, + wt = 1, yt = 2, - vt = 3, - bn = 4, - Dn = 5, - Ge = function (o, l, f) { - (this.options = o = Tn(o)), + xt = 3, + Cn = 4, + Bn = 5, + ze = function (o, l, h) { + (this.options = o = vn(o)), (this.sourceFile = o.sourceFile), - (this.keywords = tt( + (this.keywords = nt( d[ o.ecmaVersion >= 6 ? 6 @@ -25198,19 +25260,19 @@ Defaulting to 2020, but this will stop working in the future.`)), o.allowReserved !== !0 && ((m = a[o.ecmaVersion >= 6 ? 6 : o.ecmaVersion === 5 ? 5 : 3]), o.sourceType === 'module' && (m += ' await')), - (this.reservedWords = tt(m)); + (this.reservedWords = nt(m)); var E = (m ? m + ' ' : '') + a.strict; - (this.reservedWordsStrict = tt(E)), - (this.reservedWordsStrictBind = tt(E + ' ' + a.strictBind)), + (this.reservedWordsStrict = nt(E)), + (this.reservedWordsStrictBind = nt(E + ' ' + a.strictBind)), (this.input = String(l)), (this.containsEsc = !1), - f - ? ((this.pos = f), + h + ? ((this.pos = h), (this.lineStart = this.input.lastIndexOf( ` `, - f - 1 + h - 1 ) + 1), (this.curLine = this.input .slice(0, this.lineStart) @@ -25240,7 +25302,7 @@ Defaulting to 2020, but this will stop working in the future.`)), (this.regexpState = null), (this.privateNameStack = []); }, - St = { + It = { inFunction: {configurable: !0}, inGenerator: {configurable: !0}, inAsync: {configurable: !0}, @@ -25251,24 +25313,24 @@ Defaulting to 2020, but this will stop working in the future.`)), allowNewDotTarget: {configurable: !0}, inClassStaticBlock: {configurable: !0}, }; - (Ge.prototype.parse = function () { + (ze.prototype.parse = function () { var o = this.options.program || this.startNode(); return this.nextToken(), this.parseTopLevel(o); }), - (St.inFunction.get = function () { + (It.inFunction.get = function () { return (this.currentVarScope().flags & J) > 0; }), - (St.inGenerator.get = function () { - return (this.currentVarScope().flags & ve) > 0; + (It.inGenerator.get = function () { + return (this.currentVarScope().flags & xe) > 0; }), - (St.inAsync.get = function () { + (It.inAsync.get = function () { return (this.currentVarScope().flags & re) > 0; }), - (St.canAwait.get = function () { + (It.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 & (Ye | Ge)) return !1; if (l & J) return (l & re) > 0; } return ( @@ -25276,64 +25338,64 @@ Defaulting to 2020, but this will stop working in the future.`)), this.options.allowAwaitOutsideFunction ); }), - (St.allowSuper.get = function () { + (It.allowSuper.get = function () { var n = this.currentThisScope(), o = n.flags; - return (o & Ee) > 0 || this.options.allowSuperOutsideMethod; + return (o & Ae) > 0 || this.options.allowSuperOutsideMethod; }), - (St.allowDirectSuper.get = function () { - return (this.currentThisScope().flags & Le) > 0; + (It.allowDirectSuper.get = function () { + return (this.currentThisScope().flags & Oe) > 0; }), - (St.treatFunctionsAsVar.get = function () { + (It.treatFunctionsAsVar.get = function () { return this.treatFunctionsAsVarInScope(this.currentScope()); }), - (St.allowNewDotTarget.get = function () { + (It.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; + if (l & (Ye | Ge) || (l & J && !(l & fe))) return !0; } return !1; }), - (St.inClassStaticBlock.get = function () { - return (this.currentVarScope().flags & Xe) > 0; + (It.inClassStaticBlock.get = function () { + return (this.currentVarScope().flags & Ye) > 0; }), - (Ge.extend = function () { + (ze.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; + for (var h = this, m = 0; m < o.length; m++) h = o[m](h); + return h; }), - (Ge.parse = function (o, l) { + (ze.parse = function (o, l) { return new this(l, o).parse(); }), - (Ge.parseExpressionAt = function (o, l, f) { - var m = new this(f, o, l); + (ze.parseExpressionAt = function (o, l, h) { + var m = new this(h, o, l); return m.nextToken(), m.parseExpression(); }), - (Ge.tokenizer = function (o, l) { + (ze.tokenizer = function (o, l) { return new this(l, o); }), - Object.defineProperties(Ge.prototype, St); - var ot = Ge.prototype, - zt = /^(?:'((?:\\[^]|[^'\\])*?)'|"((?:\\[^]|[^"\\])*?)")/; - (ot.strictDirective = function (n) { + Object.defineProperties(ze.prototype, It); + var at = ze.prototype, + Xt = /^(?:'((?:\\[^]|[^'\\])*?)'|"((?:\\[^]|[^"\\])*?)")/; + (at.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)); + var o = Xt.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); + h = l.index + l[0].length, + m = this.input.charAt(h); return ( m === ';' || m === '}' || (R.test(l[0]) && !( /[(`.[+\-/*%<>=,?^&]/.test(m) || - (m === '!' && this.input.charAt(f + 1) === '=') + (m === '!' && this.input.charAt(h + 1) === '=') )) ); } @@ -25343,26 +25405,26 @@ Defaulting to 2020, but this will stop working in the future.`)), this.input[n] === ';' && n++; } }), - (ot.eat = function (n) { + (at.eat = function (n) { return this.type === n ? (this.next(), !0) : !1; }), - (ot.isContextual = function (n) { + (at.isContextual = function (n) { return this.type === c.name && this.value === n && !this.containsEsc; }), - (ot.eatContextual = function (n) { + (at.eatContextual = function (n) { return this.isContextual(n) ? (this.next(), !0) : !1; }), - (ot.expectContextual = function (n) { + (at.expectContextual = function (n) { this.eatContextual(n) || this.unexpected(); }), - (ot.canInsertSemicolon = function () { + (at.canInsertSemicolon = function () { return ( this.type === c.eof || this.type === c.braceR || R.test(this.input.slice(this.lastTokEnd, this.start)) ); }), - (ot.insertSemicolon = function () { + (at.insertSemicolon = function () { if (this.canInsertSemicolon()) return ( this.options.onInsertedSemicolon && @@ -25373,10 +25435,10 @@ Defaulting to 2020, but this will stop working in the future.`)), !0 ); }), - (ot.semicolon = function () { + (at.semicolon = function () { !this.eat(c.semi) && !this.insertSemicolon() && this.unexpected(); }), - (ot.afterTrailingComma = function (n, o) { + (at.afterTrailingComma = function (n, o) { if (this.type === n) return ( this.options.onTrailingComma && @@ -25388,13 +25450,13 @@ Defaulting to 2020, but this will stop working in the future.`)), !0 ); }), - (ot.expect = function (n) { + (at.expect = function (n) { this.eat(n) || this.unexpected(); }), - (ot.unexpected = function (n) { + (at.unexpected = function (n) { this.raise(n ?? this.start, 'Unexpected token'); }); - var Xt = function () { + var Yt = function () { this.shorthandAssign = this.trailingComma = this.parenthesizedAssign = @@ -25402,7 +25464,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.doubleProto = -1; }; - (ot.checkPatternErrors = function (n, o) { + (at.checkPatternErrors = function (n, o) { if (n) { n.trailingComma > -1 && this.raiseRecoverable( @@ -25417,20 +25479,20 @@ Defaulting to 2020, but this will stop working in the future.`)), ); } }), - (ot.checkExpressionErrors = function (n, o) { + (at.checkExpressionErrors = function (n, o) { if (!n) return !1; var l = n.shorthandAssign, - f = n.doubleProto; - if (!o) return l >= 0 || f >= 0; + h = n.doubleProto; + if (!o) return l >= 0 || h >= 0; l >= 0 && this.raise( l, 'Shorthand property assignments are valid only in destructuring patterns' ), - f >= 0 && - this.raiseRecoverable(f, 'Redefinition of __proto__ property'); + h >= 0 && + this.raiseRecoverable(h, 'Redefinition of __proto__ property'); }), - (ot.checkYieldAwaitInDefaultParams = function () { + (at.checkYieldAwaitInDefaultParams = function () { this.yieldPos && (!this.awaitPos || this.yieldPos < this.awaitPos) && this.raise( @@ -25443,12 +25505,12 @@ Defaulting to 2020, but this will stop working in the future.`)), 'Await expression cannot be a default value' ); }), - (ot.isSimpleAssignTarget = function (n) { + (at.isSimpleAssignTarget = function (n) { return n.type === 'ParenthesizedExpression' ? this.isSimpleAssignTarget(n.expression) : n.type === 'Identifier' || n.type === 'MemberExpression'; }); - var te = Ge.prototype; + var te = ze.prototype; te.parseTopLevel = function (n) { var o = Object.create(null); for (n.body || (n.body = []); this.type !== c.eof; ) { @@ -25457,11 +25519,11 @@ Defaulting to 2020, but this will stop working in the future.`)), } if (this.inModule) for ( - var f = 0, m = Object.keys(this.undefinedExports); - f < m.length; - f += 1 + var h = 0, m = Object.keys(this.undefinedExports); + h < m.length; + h += 1 ) { - var E = m[f]; + var E = m[h]; this.raiseRecoverable( this.undefinedExports[E].start, "Export '" + E + "' is not defined" @@ -25474,23 +25536,23 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(n, 'Program') ); }; - var Cn = {kind: 'loop'}, - Zn = {kind: 'switch'}; + var wn = {kind: 'loop'}, + is = {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; + h = this.input.charCodeAt(l); + if (h === 91 || h === 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; + if (h === 123 || (h > 55295 && h < 56320)) return !0; + if (f(h, !0)) { + for (var m = l + 1; T((h = this.input.charCodeAt(m)), !0); ) ++m; + if (h === 92 || (h > 55295 && h < 56320)) return !0; var E = this.input.slice(l, m); - if (!y.test(E)) return !0; + if (!v.test(E)) return !0; } return !1; }), @@ -25519,35 +25581,35 @@ Defaulting to 2020, but this will stop working in the future.`)), 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; + h = this.pos + l[0].length; + if (R.test(this.input.slice(this.pos, h))) return !1; if (n) { - var m = f + 5, + var m = h + 5, E; if ( - this.input.slice(f, m) !== 'using' || + this.input.slice(h, 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; + var L = ae.exec(this.input); + if (L && R.test(this.input.slice(m, m + L[0].length))) return !1; } if (o) { - var Y = f + 2, + var Y = h + 2, Q; if ( - this.input.slice(f, Y) === 'of' && + this.input.slice(h, 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; + var ke = this.input.charCodeAt(h); + return f(ke, !0) || ke === 92; }), (te.isAwaitUsing = function (n) { return this.isUsingKeyword(!0, n); @@ -25556,13 +25618,13 @@ Defaulting to 2020, but this will stop working in the future.`)), return this.isUsingKeyword(!1, n); }), (te.parseStatement = function (n, o, l) { - var f = this.type, + var h = this.type, m = this.startNode(), E; - switch ((this.isLet(n) && ((f = c._var), (E = 'let')), f)) { + switch ((this.isLet(n) && ((h = c._var), (E = 'let')), h)) { case c._break: case c._continue: - return this.parseBreakContinueStatement(m, f.keyword); + return this.parseBreakContinueStatement(m, h.keyword); case c._debugger: return this.parseDebuggerStatement(m); case c._do: @@ -25606,10 +25668,10 @@ Defaulting to 2020, but this will stop working in the future.`)), return this.parseEmptyStatement(m); case c._export: case c._import: - if (this.options.ecmaVersion > 10 && f === c._import) { + if (this.options.ecmaVersion > 10 && h === c._import) { ae.lastIndex = this.pos; - var O = ae.exec(this.input), - Y = this.pos + O[0].length, + var L = ae.exec(this.input), + Y = this.pos + L[0].length, Q = this.input.charCodeAt(Y); if (Q === 40 || Q === 46) return this.parseExpressionStatement( @@ -25629,7 +25691,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.start, "'import' and 'export' may appear only with 'sourceType: module'" )), - f === c._import ? this.parseImport(m) : this.parseExport(m, l) + h === c._import ? this.parseImport(m) : this.parseExport(m, l) ); default: if (this.isAsyncFunction()) @@ -25638,12 +25700,12 @@ Defaulting to 2020, but this will stop working in the future.`)), this.next(), this.parseFunctionStatement(m, !0, !n) ); - var Te = this.isAwaitUsing(!1) + var ke = this.isAwaitUsing(!1) ? 'await using' : this.isUsing(!1) ? 'using' : null; - if (Te) + if (ke) return ( o && this.options.sourceType === 'script' && @@ -25651,7 +25713,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.start, 'Using declaration cannot appear in the top level when source type is `script`' ), - Te === 'await using' && + ke === 'await using' && (this.canAwait || this.raise( this.start, @@ -25659,17 +25721,17 @@ Defaulting to 2020, but this will stop working in the future.`)), ), this.next()), this.next(), - this.parseVar(m, !1, Te), + this.parseVar(m, !1, ke), this.semicolon(), this.finishNode(m, 'VariableDeclaration') ); - var xe = this.value, - Ze = this.parseExpression(); - return f === c.name && - Ze.type === 'Identifier' && + var ge = this.value, + et = this.parseExpression(); + return h === c.name && + et.type === 'Identifier' && this.eat(c.colon) - ? this.parseLabeledStatement(m, xe, Ze, n) - : this.parseExpressionStatement(m, Ze); + ? this.parseLabeledStatement(m, ge, et, n) + : this.parseExpressionStatement(m, et); } }), (te.parseBreakContinueStatement = function (n, o) { @@ -25680,8 +25742,8 @@ Defaulting to 2020, but this will stop working in the future.`)), : 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]; + for (var h = 0; h < this.labels.length; ++h) { + var m = this.labels[h]; if ( (n.label == null || m.name === n.label.name) && ((m.kind != null && (l || m.kind === 'loop')) || (n.label && l)) @@ -25689,7 +25751,7 @@ Defaulting to 2020, but this will stop working in the future.`)), break; } return ( - f === this.labels.length && this.raise(n.start, 'Unsyntactic ' + o), + h === this.labels.length && this.raise(n.start, 'Unsyntactic ' + o), this.finishNode(n, l ? 'BreakStatement' : 'ContinueStatement') ); }), @@ -25703,7 +25765,7 @@ Defaulting to 2020, but this will stop working in the future.`)), (te.parseDoStatement = function (n) { return ( this.next(), - this.labels.push(Cn), + this.labels.push(wn), (n.body = this.parseStatement('do')), this.labels.pop(), this.expect(c._while), @@ -25721,7 +25783,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ? this.lastTokStart : -1; if ( - (this.labels.push(Cn), + (this.labels.push(wn), this.enterScope(0), this.expect(c.parenL), this.type === c.semi) @@ -25729,17 +25791,17 @@ Defaulting to 2020, but this will stop working in the future.`)), 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(), + var h = this.startNode(), m = l ? 'let' : this.value; return ( this.next(), - this.parseVar(f, !0, m), - this.finishNode(f, 'VariableDeclaration'), - this.parseForAfterInit(n, f, o) + this.parseVar(h, !0, m), + this.finishNode(h, 'VariableDeclaration'), + this.parseForAfterInit(n, h, o) ); } var E = this.isContextual('let'), - O = !1, + L = !1, Y = this.isUsing(!0) ? 'using' : this.isAwaitUsing(!0) @@ -25755,37 +25817,37 @@ Defaulting to 2020, but this will stop working in the future.`)), this.parseForAfterInit(n, Q, o) ); } - var Te = this.containsEsc, - xe = new Xt(), - Ze = this.start, - Lt = + var ke = this.containsEsc, + ge = new Yt(), + et = this.start, + Ot = o > -1 - ? this.parseExprSubscripts(xe, 'await') - : this.parseExpression(!0, xe); + ? this.parseExprSubscripts(ge, 'await') + : this.parseExpression(!0, ge); return this.type === c._in || - (O = this.options.ecmaVersion >= 6 && this.isContextual('of')) + (L = this.options.ecmaVersion >= 6 && this.isContextual('of')) ? (o > -1 ? (this.type === c._in && this.unexpected(o), (n.await = !0)) - : O && + : L && this.options.ecmaVersion >= 8 && - (Lt.start === Ze && - !Te && - Lt.type === 'Identifier' && - Lt.name === 'async' + (Ot.start === et && + !ke && + Ot.type === 'Identifier' && + Ot.name === 'async' ? this.unexpected() : this.options.ecmaVersion >= 9 && (n.await = !1)), E && - O && + L && this.raise( - Lt.start, + Ot.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), + this.toAssignable(Ot, !1, ge), + this.checkLValPattern(Ot), + this.parseForIn(n, Ot)) + : (this.checkExpressionErrors(ge, !0), o > -1 && this.unexpected(o), - this.parseFor(n, Lt)); + this.parseFor(n, Ot)); }), (te.parseForAfterInit = function (n, o, l) { return (this.type === c._in || @@ -25799,7 +25861,7 @@ Defaulting to 2020, but this will stop working in the future.`)), : (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); + return this.next(), this.parseFunction(n, Vn | (l ? 0 : Cs), !1, o); }), (te.parseIfStatement = function (n) { return ( @@ -25829,16 +25891,16 @@ Defaulting to 2020, but this will stop working in the future.`)), (n.discriminant = this.parseParenExpression()), (n.cases = []), this.expect(c.braceL), - this.labels.push(Zn), + this.labels.push(is), 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; + var h = this.type === c._case; o && this.finishNode(o, 'SwitchCase'), n.cases.push((o = this.startNode())), (o.consequent = []), this.next(), - f + h ? (o.test = this.parseExpression()) : (l && this.raiseRecoverable( @@ -25869,13 +25931,13 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(n, 'ThrowStatement') ); }); - var _i = []; + var Ci = []; (te.parseCatchClauseParam = function () { var n = this.parseBindingAtom(), o = n.type === 'Identifier'; return ( - this.enterScope(o ? Ie : 0), - this.checkLValPattern(n, o ? bn : yt), + this.enterScope(o ? Ee : 0), + this.checkLValPattern(n, o ? Cn : yt), this.expect(c.parenR), n ); @@ -25918,7 +25980,7 @@ Defaulting to 2020, but this will stop working in the future.`)), return ( this.next(), (n.test = this.parseParenExpression()), - this.labels.push(Cn), + this.labels.push(wn), (n.body = this.parseStatement('while')), this.labels.pop(), this.finishNode(n, 'WhileStatement') @@ -25936,10 +25998,10 @@ Defaulting to 2020, but this will stop working in the future.`)), (te.parseEmptyStatement = function (n) { return this.next(), this.finishNode(n, 'EmptyStatement'); }), - (te.parseLabeledStatement = function (n, o, l, f) { + (te.parseLabeledStatement = function (n, o, l, h) { for (var m = 0, E = this.labels; m < E.length; m += 1) { - var O = E[m]; - O.name === o && + var L = E[m]; + L.name === o && this.raise(l.start, "Label '" + o + "' is already declared"); } for ( @@ -25952,15 +26014,15 @@ Defaulting to 2020, but this will stop working in the future.`)), Q >= 0; Q-- ) { - var Te = this.labels[Q]; - if (Te.statementStart === n.start) - (Te.statementStart = this.start), (Te.kind = Y); + var ke = this.labels[Q]; + if (ke.statementStart === n.start) + (ke.statementStart = this.start), (ke.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' + h ? (h.indexOf('label') === -1 ? h + 'label' : h) : 'label' )), this.labels.pop(), (n.label = l), @@ -25984,8 +26046,8 @@ Defaulting to 2020, but this will stop working in the future.`)), this.type !== c.braceR; ) { - var f = this.parseStatement(null); - o.body.push(f); + var h = this.parseStatement(null); + o.body.push(h); } return ( l && (this.strict = !1), @@ -26033,21 +26095,21 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(n, l ? 'ForInStatement' : 'ForOfStatement') ); }), - (te.parseVar = function (n, o, l, f) { + (te.parseVar = function (n, o, l, h) { 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 && + : !h && l === 'const' && !( this.type === c._in || (this.options.ecmaVersion >= 6 && this.isContextual('of')) ) ? this.unexpected() - : !f && + : !h && (l === 'using' || l === 'await using') && this.options.ecmaVersion >= 17 && this.type !== c._in && @@ -26056,7 +26118,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.lastTokEnd, 'Missing initializer in ' + l + ' declaration' ) - : !f && + : !h && m.id.type !== 'Identifier' && !(o && (this.type === c._in || this.isContextual('of'))) ? this.raise( @@ -26076,47 +26138,47 @@ Defaulting to 2020, but this will stop working in the future.`)), o === 'using' || o === 'await using' ? this.parseIdent() : this.parseBindingAtom()), - this.checkLValPattern(n.id, o === 'var' ? bt : yt, !1); + this.checkLValPattern(n.id, o === 'var' ? wt : yt, !1); }); - var Mn = 1, - xs = 2, - Ds = 4; - (te.parseFunction = function (n, o, l, f, m) { + var Vn = 1, + Cs = 2, + Bs = 4; + (te.parseFunction = function (n, o, l, h, m) { this.initFunction(n), (this.options.ecmaVersion >= 9 || - (this.options.ecmaVersion >= 6 && !f)) && - (this.type === c.star && o & xs && this.unexpected(), + (this.options.ecmaVersion >= 6 && !h)) && + (this.type === c.star && o & Cs && 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()), + this.options.ecmaVersion >= 8 && (n.async = !!h), + o & Vn && + ((n.id = o & Bs && this.type !== c.name ? null : this.parseIdent()), n.id && - !(o & xs) && + !(o & Cs) && this.checkLValSimple( n.id, this.strict || n.generator || n.async ? this.treatFunctionsAsVar - ? bt + ? wt : yt - : vt + : xt )); var E = this.yieldPos, - O = this.awaitPos, + L = 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.enterScope(pt(n.async, n.generator)), + o & Vn || (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.awaitPos = L), (this.awaitIdentPos = Y), this.finishNode( n, - o & Mn ? 'FunctionDeclaration' : 'FunctionExpression' + o & Vn ? 'FunctionDeclaration' : 'FunctionExpression' ) ); }), @@ -26133,26 +26195,26 @@ Defaulting to 2020, but this will stop working in the future.`)), this.next(); var l = this.strict; (this.strict = !0), this.parseClassId(n, o), this.parseClassSuper(n); - var f = this.enterClassBody(), + var h = 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' + var L = this.parseClassElement(n.superClass !== null); + L && + (m.body.push(L), + L.type === 'MethodDefinition' && L.kind === 'constructor' ? (E && this.raiseRecoverable( - O.start, + L.start, 'Duplicate constructor in the same class' ), (E = !0)) - : O.key && - O.key.type === 'PrivateIdentifier' && - bi(f, O) && + : L.key && + L.key.type === 'PrivateIdentifier' && + wi(h, L) && this.raiseRecoverable( - O.key.start, - "Identifier '#" + O.key.name + "' has already been declared" + L.key.start, + "Identifier '#" + L.key.name + "' has already been declared" )); } return ( @@ -26167,56 +26229,56 @@ Defaulting to 2020, but this will stop working in the future.`)), if (this.eat(c.semi)) return null; var o = this.options.ecmaVersion, l = this.startNode(), - f = '', + h = '', m = !1, E = !1, - O = 'method', + L = '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'); + : (h = 'static'); } if ( ((l.static = Y), - !f && + !h && 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) + : (h = 'async')), + !h && (o >= 9 || !E) && this.eat(c.star) && (m = !0), + !h && !E && !m) ) { var Q = this.value; (this.eatContextual('get') || this.eatContextual('set')) && - (this.isClassElementNameStart() ? (O = Q) : (f = Q)); + (this.isClassElementNameStart() ? (L = Q) : (h = Q)); } if ( - (f + (h ? ((l.computed = !1), (l.key = this.startNodeAt( this.lastTokStart, this.lastTokStartLoc )), - (l.key.name = f), + (l.key.name = h), this.finishNode(l.key, 'Identifier')) : this.parseClassElementName(l), - o < 13 || this.type === c.parenL || O !== 'method' || m || E) + o < 13 || this.type === c.parenL || L !== 'method' || m || E) ) { - var Te = !l.static && es(l, 'constructor'), - xe = Te && n; - Te && - O !== 'method' && + var ke = !l.static && rs(l, 'constructor'), + ge = ke && n; + ke && + L !== 'method' && this.raise( l.key.start, "Constructor can't have get/set modifier" ), - (l.kind = Te ? 'constructor' : O), - this.parseClassMethod(l, m, E, xe); + (l.kind = ke ? 'constructor' : L), + this.parseClassMethod(l, m, E, ge); } else this.parseClassField(l); return l; }), @@ -26241,18 +26303,18 @@ Defaulting to 2020, but this will stop working in the future.`)), (n.key = this.parsePrivateIdent())) : this.parsePropertyName(n); }), - (te.parseClassMethod = function (n, o, l, f) { + (te.parseClassMethod = function (n, o, l, h) { 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') && + rs(n, 'prototype') && this.raise( m.start, 'Classes may not have a static property named prototype' ); - var E = (n.value = this.parseMethod(o, l, f)); + var E = (n.value = this.parseMethod(o, l, h)); return ( n.kind === 'get' && E.params.length !== 0 && @@ -26274,19 +26336,19 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (te.parseClassField = function (n) { return ( - es(n, 'constructor') + rs(n, 'constructor') ? this.raise( n.key.start, "Classes can't have a field named 'constructor'" ) : n.static && - es(n, 'prototype') && + rs(n, 'prototype') && this.raise( n.key.start, "Classes can't have a static field named 'prototype'" ), this.eat(c.eq) - ? (this.enterScope(We | Ee), + ? (this.enterScope(Ge | Ae), (n.value = this.parseMaybeAssign()), this.exitScope()) : (n.value = null), @@ -26298,7 +26360,7 @@ Defaulting to 2020, but this will stop working in the future.`)), n.body = []; var o = this.labels; for ( - this.labels = [], this.enterScope(Xe | Ee); + this.labels = [], this.enterScope(Ye | Ae); this.type !== c.braceR; ) { @@ -26333,49 +26395,49 @@ Defaulting to 2020, but this will stop working in the future.`)), l = n.used; if (this.options.checkPrivateFields) for ( - var f = this.privateNameStack.length, - m = f === 0 ? null : this.privateNameStack[f - 1], + var h = this.privateNameStack.length, + m = h === 0 ? null : this.privateNameStack[h - 1], E = 0; E < l.length; ++E ) { - var O = l[E]; - mt(o, O.name) || + var L = l[E]; + Tt(o, L.name) || (m - ? m.used.push(O) + ? m.used.push(L) : this.raiseRecoverable( - O.start, + L.start, "Private field '#" + - O.name + + L.name + "' must be declared in an enclosing class" )); } }); - function bi(n, o) { + function wi(n, o) { var l = o.key.name, - f = n[l], + h = 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') + (h === 'iget' && m === 'iset') || + (h === 'iset' && m === 'iget') || + (h === 'sget' && m === 'sset') || + (h === 'sset' && m === 'sget') ? ((n[l] = 'true'), !1) - : f + : h ? !0 : ((n[l] = m), !1) ); } - function es(n, o) { + function rs(n, o) { var l = n.computed, - f = n.key; + h = n.key; return ( !l && - ((f.type === 'Identifier' && f.name === o) || - (f.type === 'Literal' && f.value === o)) + ((h.type === 'Identifier' && h.name === o) || + (h.type === 'Literal' && h.value === o)) ); } (te.parseExportAllDeclaration = function (n, o) { @@ -26422,8 +26484,8 @@ Defaulting to 2020, but this will stop working in the future.`)), 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]; + for (var l = 0, h = n.specifiers; l < h.length; l += 1) { + var m = h[l]; this.checkUnreserved(m.local), this.checkLocalExport(m.local), m.local.type === 'Literal' && @@ -26449,21 +26511,21 @@ Defaulting to 2020, but this will stop working in the future.`)), return ( this.next(), n && this.next(), - this.parseFunction(o, Mn | Ds, !1, n) + this.parseFunction(o, Vn | Bs, !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; + var h = this.parseMaybeAssign(); + return this.semicolon(), h; } }), (te.checkExport = function (n, o, l) { n && (typeof o != 'string' && (o = o.type === 'Identifier' ? o.name : o.value), - mt(n, o) && + Tt(n, o) && this.raiseRecoverable(l, "Duplicate export '" + o + "'"), (n[o] = !0)); }), @@ -26471,13 +26533,13 @@ Defaulting to 2020, but this will stop working in the future.`)), 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]; + for (var h = 0, m = o.properties; h < m.length; h += 1) { + var E = m[h]; this.checkPatternExport(n, E); } else if (l === 'ArrayPattern') - for (var O = 0, Y = o.elements; O < Y.length; O += 1) { - var Q = Y[O]; + for (var L = 0, Y = o.elements; L < Y.length; L += 1) { + var Q = Y[L]; Q && this.checkPatternExport(n, Q); } else @@ -26489,8 +26551,8 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (te.checkVariableExport = function (n, o) { if (n) - for (var l = 0, f = o; l < f.length; l += 1) { - var m = f[l]; + for (var l = 0, h = o; l < h.length; l += 1) { + var m = h[l]; this.checkPatternExport(n, m.id); } }), @@ -26530,7 +26592,7 @@ Defaulting to 2020, but this will stop working in the future.`)), return ( this.next(), this.type === c.string - ? ((n.specifiers = _i), (n.source = this.parseExprAtom())) + ? ((n.specifiers = Ci), (n.source = this.parseExprAtom())) : ((n.specifiers = this.parseImportSpecifiers()), this.expectContextual('from'), (n.source = @@ -26598,15 +26660,15 @@ Defaulting to 2020, but this will stop working in the future.`)), 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) && + var h = this.parseImportAttribute(), + m = h.key.type === 'Identifier' ? h.key.name : h.key.value; + Tt(o, m) && this.raiseRecoverable( - f.key.start, + h.key.start, "Duplicate attribute key '" + m + "'" ), (o[m] = !0), - n.push(f); + n.push(h); } return n; }), @@ -26627,7 +26689,7 @@ Defaulting to 2020, but this will stop working in the future.`)), if (this.options.ecmaVersion >= 13 && this.type === c.string) { var n = this.parseLiteral(this.value); return ( - _t.test(n.value) && + Ct.test(n.value) && this.raise( n.start, 'An export name cannot include a lone surrogate.' @@ -26650,8 +26712,8 @@ Defaulting to 2020, but this will stop working in the future.`)), (this.input[n.start] === '"' || this.input[n.start] === "'") ); }); - var Nt = Ge.prototype; - (Nt.toAssignable = function (n, o, l) { + var Rt = ze.prototype; + (Rt.toAssignable = function (n, o, l) { if (this.options.ecmaVersion >= 6 && n) switch (n.type) { case 'Identifier': @@ -26669,8 +26731,8 @@ Defaulting to 2020, but this will stop working in the future.`)), 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]; + for (var h = 0, m = n.properties; h < m.length; h += 1) { + var E = m[h]; this.toAssignable(E, o), E.type === 'RestElement' && (E.argument.type === 'ArrayPattern' || @@ -26727,9 +26789,9 @@ Defaulting to 2020, but this will stop working in the future.`)), 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]; + (Rt.toAssignableList = function (n, o) { + for (var l = n.length, h = 0; h < l; h++) { + var m = n[h]; m && this.toAssignable(m, o); } if (l) { @@ -26743,7 +26805,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } return n; }), - (Nt.parseSpread = function (n) { + (Rt.parseSpread = function (n) { var o = this.startNode(); return ( this.next(), @@ -26751,7 +26813,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(o, 'SpreadElement') ); }), - (Nt.parseRestBinding = function () { + (Rt.parseRestBinding = function () { var n = this.startNode(); return ( this.next(), @@ -26762,7 +26824,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(n, 'RestElement') ); }), - (Nt.parseBindingAtom = function () { + (Rt.parseBindingAtom = function () { if (this.options.ecmaVersion >= 6) switch (this.type) { case c.bracketL: @@ -26777,7 +26839,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } return this.parseIdent(); }), - (Nt.parseBindingList = function (n, o, l, f) { + (Rt.parseBindingList = function (n, o, l, h) { for (var m = [], E = !0; !this.eat(n); ) if ( (E ? (E = !1) : this.expect(c.comma), o && this.type === c.comma) @@ -26786,9 +26848,9 @@ Defaulting to 2020, but this will stop working in the future.`)), else { if (l && this.afterTrailingComma(n)) break; if (this.type === c.ellipsis) { - var O = this.parseRestBinding(); - this.parseBindingListItem(O), - m.push(O), + var L = this.parseRestBinding(); + this.parseBindingListItem(L), + m.push(L), this.type === c.comma && this.raiseRecoverable( this.start, @@ -26796,44 +26858,44 @@ Defaulting to 2020, but this will stop working in the future.`)), ), this.expect(n); break; - } else m.push(this.parseAssignableListItem(f)); + } else m.push(this.parseAssignableListItem(h)); } return m; }), - (Nt.parseAssignableListItem = function (n) { + (Rt.parseAssignableListItem = function (n) { var o = this.parseMaybeDefault(this.start, this.startLoc); return this.parseBindingListItem(o), o; }), - (Nt.parseBindingListItem = function (n) { + (Rt.parseBindingListItem = function (n) { return n; }), - (Nt.parseMaybeDefault = function (n, o, l) { + (Rt.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); + var h = this.startNodeAt(n, o); return ( - (f.left = l), - (f.right = this.parseMaybeAssign()), - this.finishNode(f, 'AssignmentPattern') + (h.left = l), + (h.right = this.parseMaybeAssign()), + this.finishNode(h, 'AssignmentPattern') ); }), - (Nt.checkLValSimple = function (n, o, l) { - o === void 0 && (o = pt); - var f = o !== pt; + (Rt.checkLValSimple = function (n, o, l) { + o === void 0 && (o = ht); + var h = o !== ht; switch (n.type) { case 'Identifier': this.strict && this.reservedWordsStrictBind.test(n.name) && this.raiseRecoverable( n.start, - (f ? 'Binding ' : 'Assigning to ') + + (h ? 'Binding ' : 'Assigning to ') + n.name + ' in strict mode' ), - f && + h && (o === yt && n.name === 'let' && this.raiseRecoverable( @@ -26841,10 +26903,10 @@ Defaulting to 2020, but this will stop working in the future.`)), 'let is disallowed as a lexically bound name' ), l && - (mt(l, n.name) && + (Tt(l, n.name) && this.raiseRecoverable(n.start, 'Argument name clash'), (l[n.name] = !0)), - o !== Dn && this.declareName(n.name, o, n.start)); + o !== Bn && this.declareName(n.name, o, n.start)); break; case 'ChainExpression': this.raiseRecoverable( @@ -26853,11 +26915,11 @@ Defaulting to 2020, but this will stop working in the future.`)), ); break; case 'MemberExpression': - f && this.raiseRecoverable(n.start, 'Binding member expression'); + h && this.raiseRecoverable(n.start, 'Binding member expression'); break; case 'ParenthesizedExpression': return ( - f && + h && this.raiseRecoverable( n.start, 'Binding parenthesized expression' @@ -26865,20 +26927,20 @@ Defaulting to 2020, but this will stop working in the future.`)), this.checkLValSimple(n.expression, o, l) ); default: - this.raise(n.start, (f ? 'Binding' : 'Assigning to') + ' rvalue'); + this.raise(n.start, (h ? 'Binding' : 'Assigning to') + ' rvalue'); } }), - (Nt.checkLValPattern = function (n, o, l) { - switch ((o === void 0 && (o = pt), n.type)) { + (Rt.checkLValPattern = function (n, o, l) { + switch ((o === void 0 && (o = ht), n.type)) { case 'ObjectPattern': - for (var f = 0, m = n.properties; f < m.length; f += 1) { - var E = m[f]; + for (var h = 0, m = n.properties; h < m.length; h += 1) { + var E = m[h]; this.checkLValInnerPattern(E, o, l); } break; case 'ArrayPattern': - for (var O = 0, Y = n.elements; O < Y.length; O += 1) { - var Q = Y[O]; + for (var L = 0, Y = n.elements; L < Y.length; L += 1) { + var Q = Y[L]; Q && this.checkLValInnerPattern(Q, o, l); } break; @@ -26886,8 +26948,8 @@ Defaulting to 2020, but this will stop working in the future.`)), this.checkLValSimple(n, o, l); } }), - (Nt.checkLValInnerPattern = function (n, o, l) { - switch ((o === void 0 && (o = pt), n.type)) { + (Rt.checkLValInnerPattern = function (n, o, l) { + switch ((o === void 0 && (o = ht), n.type)) { case 'Property': this.checkLValInnerPattern(n.value, o, l); break; @@ -26901,39 +26963,39 @@ Defaulting to 2020, but this will stop working in the future.`)), this.checkLValPattern(n, o, l); } }); - var Rt = function (o, l, f, m, E) { + var Lt = function (o, l, h, m, E) { (this.token = o), (this.isExpr = !!l), - (this.preserveSpace = !!f), + (this.preserveSpace = !!h), (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) { + He = { + b_stat: new Lt('{', !1), + b_expr: new Lt('{', !0), + b_tmpl: new Lt('${', !1), + p_stat: new Lt('(', !1), + p_expr: new Lt('(', !0), + q_tmpl: new Lt('`', !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), + f_stat: new Lt('function', !1), + f_expr: new Lt('function', !0), + f_expr_gen: new Lt('function', !0, !1, null, !0), + f_gen: new Lt('function', !1, !1, null, !0), }, - wn = Ge.prototype; - (wn.initialContext = function () { - return [Ue.b_stat]; + Sn = ze.prototype; + (Sn.initialContext = function () { + return [He.b_stat]; }), - (wn.curContext = function () { + (Sn.curContext = function () { return this.context[this.context.length - 1]; }), - (wn.braceIsBlock = function (n) { + (Sn.braceIsBlock = function (n) { var o = this.curContext(); - return o === Ue.f_expr || o === Ue.f_stat + return o === He.f_expr || o === He.f_stat ? !0 - : n === c.colon && (o === Ue.b_stat || o === Ue.b_expr) + : n === c.colon && (o === He.b_stat || o === He.b_expr) ? !o.isExpr : n === c._return || (n === c.name && this.exprAllowed) ? R.test(this.input.slice(this.lastTokEnd, this.start)) @@ -26944,19 +27006,19 @@ Defaulting to 2020, but this will stop working in the future.`)), n === c.arrow ? !0 : n === c.braceL - ? o === Ue.b_stat + ? o === He.b_stat : n === c._var || n === c._const || n === c.name ? !1 : !this.exprAllowed; }), - (wn.inGeneratorContext = function () { + (Sn.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) { + (Sn.updateContext = function (n) { var o, l = this.type; l.keyword && n === c.dot @@ -26965,7 +27027,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ? o.call(this, n) : (this.exprAllowed = l.beforeExpr); }), - (wn.overrideContext = function (n) { + (Sn.overrideContext = function (n) { this.curContext() !== n && (this.context[this.context.length - 1] = n); }), @@ -26976,39 +27038,39 @@ Defaulting to 2020, but this will stop working in the future.`)), return; } var n = this.context.pop(); - n === Ue.b_stat && + n === He.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.context.push(this.braceIsBlock(n) ? He.b_stat : He.b_expr), (this.exprAllowed = !0); }), (c.dollarBraceL.updateContext = function () { - this.context.push(Ue.b_tmpl), (this.exprAllowed = !0); + this.context.push(He.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); + this.context.push(o ? He.p_stat : He.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.semi && this.curContext() !== He.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.curContext() === He.b_stat ) - ? this.context.push(Ue.f_expr) - : this.context.push(Ue.f_stat), + ? this.context.push(He.f_expr) + : this.context.push(He.f_stat), (this.exprAllowed = !1); }), (c.colon.updateContext = function () { @@ -27016,17 +27078,17 @@ Defaulting to 2020, but this will stop working in the future.`)), (this.exprAllowed = !0); }), (c.backQuote.updateContext = function () { - this.curContext() === Ue.q_tmpl + this.curContext() === He.q_tmpl ? this.context.pop() - : this.context.push(Ue.q_tmpl), + : this.context.push(He.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.context[o] === He.f_expr + ? (this.context[o] = He.f_expr_gen) + : (this.context[o] = He.f_gen); } this.exprAllowed = !0; }), @@ -27039,8 +27101,8 @@ Defaulting to 2020, but this will stop working in the future.`)), (o = !0), (this.exprAllowed = o); }); - var de = Ge.prototype; - (de.checkPropClash = function (n, o, l) { + var me = ze.prototype; + (me.checkPropClash = function (n, o, l) { if ( !(this.options.ecmaVersion >= 9 && n.type === 'SpreadElement') && !( @@ -27048,14 +27110,14 @@ Defaulting to 2020, but this will stop working in the future.`)), (n.computed || n.method || n.shorthand) ) ) { - var f = n.key, + var h = n.key, m; - switch (f.type) { + switch (h.type) { case 'Identifier': - m = f.name; + m = h.name; break; case 'Literal': - m = String(f.value); + m = String(h.value); break; default: return; @@ -27066,90 +27128,90 @@ Defaulting to 2020, but this will stop working in the future.`)), E === 'init' && (o.proto && (l - ? l.doubleProto < 0 && (l.doubleProto = f.start) + ? l.doubleProto < 0 && (l.doubleProto = h.start) : this.raiseRecoverable( - f.start, + h.start, 'Redefinition of __proto__ property' )), (o.proto = !0)); return; } m = '$' + m; - var O = o[m]; - if (O) { + var L = o[m]; + if (L) { 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; + ? (Y = (this.strict && L.init) || L.get || L.set) + : (Y = L.init || L[E]), + Y && this.raiseRecoverable(h.start, 'Redefinition of property'); + } else L = o[m] = {init: !1, get: !1, set: !1}; + L[E] = !0; } }), - (de.parseExpression = function (n, o) { + (me.parseExpression = function (n, o) { var l = this.start, - f = this.startLoc, + h = this.startLoc, m = this.parseMaybeAssign(n, o); if (this.type === c.comma) { - var E = this.startNodeAt(l, f); + var E = this.startNodeAt(l, h); 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) { + (me.parseMaybeAssign = function (n, o, l) { if (this.isContextual('yield')) { if (this.inGenerator) return this.parseYield(n); this.exprAllowed = !1; } - var f = !1, + var h = !1, m = -1, E = -1, - O = -1; + L = -1; o ? ((m = o.parenthesizedAssign), (E = o.trailingComma), - (O = o.doubleProto), + (L = o.doubleProto), (o.parenthesizedAssign = o.trailingComma = -1)) - : ((o = new Xt()), (f = !0)); + : ((o = new Yt()), (h = !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); + var ke = this.parseMaybeConditional(n, o); + if ((l && (ke = l.call(this, ke, Y, Q)), this.type.isAssign)) { + var ge = this.startNodeAt(Y, Q); return ( - (xe.operator = this.value), - this.type === c.eq && (Te = this.toAssignable(Te, !1, o)), - f || + (ge.operator = this.value), + this.type === c.eq && (ke = this.toAssignable(ke, !1, o)), + h || (o.parenthesizedAssign = o.trailingComma = o.doubleProto = -1), - o.shorthandAssign >= Te.start && (o.shorthandAssign = -1), + o.shorthandAssign >= ke.start && (o.shorthandAssign = -1), this.type === c.eq - ? this.checkLValPattern(Te) - : this.checkLValSimple(Te), - (xe.left = Te), + ? this.checkLValPattern(ke) + : this.checkLValSimple(ke), + (ge.left = ke), this.next(), - (xe.right = this.parseMaybeAssign(n)), - O > -1 && (o.doubleProto = O), - this.finishNode(xe, 'AssignmentExpression') + (ge.right = this.parseMaybeAssign(n)), + L > -1 && (o.doubleProto = L), + this.finishNode(ge, 'AssignmentExpression') ); - } else f && this.checkExpressionErrors(o, !0); + } else h && this.checkExpressionErrors(o, !0); return ( m > -1 && (o.parenthesizedAssign = m), E > -1 && (o.trailingComma = E), - Te + ke ); }), - (de.parseMaybeConditional = function (n, o) { + (me.parseMaybeConditional = function (n, o) { var l = this.start, - f = this.startLoc, + h = this.startLoc, m = this.parseExprOps(n, o); if (this.checkExpressionErrors(o)) return m; if (this.eat(c.question)) { - var E = this.startNodeAt(l, f); + var E = this.startNodeAt(l, h); return ( (E.test = m), (E.consequent = this.parseMaybeAssign()), @@ -27160,111 +27222,111 @@ Defaulting to 2020, but this will stop working in the future.`)), } return m; }), - (de.parseExprOps = function (n, o) { + (me.parseExprOps = function (n, o) { var l = this.start, - f = this.startLoc, + h = 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); + : this.parseExprOp(m, l, h, -1, n); }), - (de.parseExprOp = function (n, o, l, f, m) { + (me.parseExprOp = function (n, o, l, h, 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, + if (E != null && (!m || this.type !== c._in) && E > h) { + var L = 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( + var ke = this.start, + ge = this.startLoc, + et = this.parseExprOp( this.parseMaybeUnary(null, !1, !1, m), - Te, - xe, + ke, + ge, E, m ), - Lt = this.buildBinary(o, l, n, Ze, Q, O || Y); + Ot = this.buildBinary(o, l, n, et, Q, L || Y); return ( - ((O && this.type === c.coalesce) || + ((L && 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) + this.parseExprOp(Ot, o, l, h, m) ); } return n; }), - (de.buildBinary = function (n, o, l, f, m, E) { - f.type === 'PrivateIdentifier' && + (me.buildBinary = function (n, o, l, h, m, E) { + h.type === 'PrivateIdentifier' && this.raise( - f.start, + h.start, 'Private identifier can only be left side of binary expression' ); - var O = this.startNodeAt(n, o); + var L = this.startNodeAt(n, o); return ( - (O.left = l), - (O.operator = m), - (O.right = f), - this.finishNode(O, E ? 'LogicalExpression' : 'BinaryExpression') + (L.left = l), + (L.operator = m), + (L.right = h), + this.finishNode(L, E ? 'LogicalExpression' : 'BinaryExpression') ); }), - (de.parseMaybeUnary = function (n, o, l, f) { + (me.parseMaybeUnary = function (n, o, l, h) { var m = this.start, E = this.startLoc, - O; + L; if (this.isContextual('await') && this.canAwait) - (O = this.parseAwait(f)), (o = !0); + (L = this.parseAwait(h)), (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)), + (Y.argument = this.parseMaybeUnary(null, !0, Q, h)), this.checkExpressionErrors(n, !0), Q ? this.checkLValSimple(Y.argument) - : this.strict && Y.operator === 'delete' && Ms(Y.argument) + : this.strict && Y.operator === 'delete' && Vs(Y.argument) ? this.raiseRecoverable( Y.start, 'Deleting local variable in strict mode' ) - : Y.operator === 'delete' && gs(Y.argument) + : Y.operator === 'delete' && ws(Y.argument) ? this.raiseRecoverable( Y.start, 'Private fields can not be deleted' ) : (o = !0), - (O = this.finishNode( + (L = this.finishNode( Y, Q ? 'UpdateExpression' : 'UnaryExpression' )); } else if (!o && this.type === c.privateId) - (f || this.privateNameStack.length === 0) && + (h || this.privateNameStack.length === 0) && this.options.checkPrivateFields && this.unexpected(), - (O = this.parsePrivateIdent()), + (L = this.parsePrivateIdent()), this.type !== c._in && this.unexpected(); else { if ( - ((O = this.parseExprSubscripts(n, f)), + ((L = this.parseExprSubscripts(n, h)), this.checkExpressionErrors(n)) ) - return O; + return L; 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), + var ke = this.startNodeAt(m, E); + (ke.operator = this.value), + (ke.prefix = !1), + (ke.argument = L), + this.checkLValSimple(L), this.next(), - (O = this.finishNode(Te, 'UpdateExpression')); + (L = this.finishNode(ke, 'UpdateExpression')); } } if (!l && this.eat(c.starstar)) @@ -27273,37 +27335,37 @@ Defaulting to 2020, but this will stop working in the future.`)), return this.buildBinary( m, E, - O, - this.parseMaybeUnary(null, !1, !1, f), + L, + this.parseMaybeUnary(null, !1, !1, h), '**', !1 ); - else return O; + else return L; }); - function Ms(n) { + function Vs(n) { return ( n.type === 'Identifier' || - (n.type === 'ParenthesizedExpression' && Ms(n.expression)) + (n.type === 'ParenthesizedExpression' && Vs(n.expression)) ); } - function gs(n) { + function ws(n) { return ( (n.type === 'MemberExpression' && n.property.type === 'PrivateIdentifier') || - (n.type === 'ChainExpression' && gs(n.expression)) || - (n.type === 'ParenthesizedExpression' && gs(n.expression)) + (n.type === 'ChainExpression' && ws(n.expression)) || + (n.type === 'ParenthesizedExpression' && ws(n.expression)) ); } - (de.parseExprSubscripts = function (n, o) { + (me.parseExprSubscripts = function (n, o) { var l = this.start, - f = this.startLoc, + h = 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); + var E = this.parseSubscripts(m, l, h, !1, o); return ( n && E.type === 'MemberExpression' && @@ -27313,7 +27375,7 @@ Defaulting to 2020, but this will stop working in the future.`)), E ); }), - (de.parseSubscripts = function (n, o, l, f, m) { + (me.parseSubscripts = function (n, o, l, h, m) { for ( var E = this.options.ecmaVersion >= 8 && @@ -27323,16 +27385,16 @@ Defaulting to 2020, but this will stop working in the future.`)), !this.canInsertSemicolon() && n.end - n.start === 5 && this.potentialArrowAt === n.start, - O = !1; + L = !1; ; ) { - var Y = this.parseSubscript(n, o, l, f, E, O, m); + var Y = this.parseSubscript(n, o, l, h, E, L, m); if ( - (Y.optional && (O = !0), + (Y.optional && (L = !0), Y === n || Y.type === 'ArrowFunctionExpression') ) { - if (O) { + if (L) { var Q = this.startNodeAt(o, l); (Q.expression = Y), (Y = this.finishNode(Q, 'ChainExpression')); } @@ -27341,120 +27403,120 @@ Defaulting to 2020, but this will stop working in the future.`)), n = Y; } }), - (de.shouldParseAsyncArrow = function () { + (me.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); + (me.parseSubscriptAsyncArrow = function (n, o, l, h) { + return this.parseArrowExpression(this.startNodeAt(n, o), l, !0, h); }), - (de.parseSubscript = function (n, o, l, f, m, E, O) { + (me.parseSubscript = function (n, o, l, h, m, E, L) { var Y = this.options.ecmaVersion >= 11, Q = Y && this.eat(c.questionDot); - f && + h && Q && this.raise( this.lastTokStart, 'Optional chaining cannot appear in the callee of new expressions' ); - var Te = this.eat(c.bracketL); + var ke = this.eat(c.bracketL); if ( - Te || + ke || (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()), + var ge = this.startNodeAt(o, l); + (ge.object = n), + ke + ? ((ge.property = this.parseExpression()), this.expect(c.bracketR)) : this.type === c.privateId && n.type !== 'Super' - ? (xe.property = this.parsePrivateIdent()) - : (xe.property = this.parseIdent( + ? (ge.property = this.parsePrivateIdent()) + : (ge.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; + (ge.computed = !!ke), + Y && (ge.optional = Q), + (n = this.finishNode(ge, 'MemberExpression')); + } else if (!h && this.eat(c.parenL)) { + var et = new Yt(), + Ot = this.yieldPos, + Oi = this.awaitPos, + Zs = this.awaitIdentPos; (this.yieldPos = 0), (this.awaitPos = 0), (this.awaitIdentPos = 0); - var gr = this.parseExprList( + var Sr = this.parseExprList( c.parenR, this.options.ecmaVersion >= 8, !1, - Ze + et ); if (m && !Q && this.shouldParseAsyncArrow()) return ( - this.checkPatternErrors(Ze, !1), + this.checkPatternErrors(et, !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.yieldPos = Ot), + (this.awaitPos = Oi), + (this.awaitIdentPos = Zs), + this.parseSubscriptAsyncArrow(o, l, Sr, L) ); - 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')); + this.checkExpressionErrors(et, !0), + (this.yieldPos = Ot || this.yieldPos), + (this.awaitPos = Oi || this.awaitPos), + (this.awaitIdentPos = Zs || this.awaitIdentPos); + var ei = this.startNodeAt(o, l); + (ei.callee = n), + (ei.arguments = Sr), + Y && (ei.optional = Q), + (n = this.finishNode(ei, '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')); + var ti = this.startNodeAt(o, l); + (ti.tag = n), + (ti.quasi = this.parseTemplate({isTagged: !0})), + (n = this.finishNode(ti, 'TaggedTemplateExpression')); } return n; }), - (de.parseExprAtom = function (n, o, l) { + (me.parseExprAtom = function (n, o, l) { this.type === c.slash && this.readRegexp(); - var f, + var h, 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()), + (h = this.startNode()), this.next(), this.type === c.parenL && !this.allowDirectSuper && this.raise( - f.start, + h.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') + this.finishNode(h, 'Super') ); case c._this: return ( - (f = this.startNode()), + (h = this.startNode()), this.next(), - this.finishNode(f, 'ThisExpression') + this.finishNode(h, 'ThisExpression') ); case c.name: var E = this.start, - O = this.startLoc, + L = this.startLoc, Y = this.containsEsc, Q = this.parseIdent(!1); if ( @@ -27465,13 +27527,13 @@ Defaulting to 2020, but this will stop working in the future.`)), this.eat(c._function) ) return ( - this.overrideContext(Ue.f_expr), - this.parseFunction(this.startNodeAt(E, O), 0, !1, !0, o) + this.overrideContext(He.f_expr), + this.parseFunction(this.startNodeAt(E, L), 0, !1, !0, o) ); if (m && !this.canInsertSemicolon()) { if (this.eat(c.arrow)) return this.parseArrowExpression( - this.startNodeAt(E, O), + this.startNodeAt(E, L), [Q], !1, o @@ -27490,7 +27552,7 @@ Defaulting to 2020, but this will stop working in the future.`)), (this.canInsertSemicolon() || !this.eat(c.arrow)) && this.unexpected(), this.parseArrowExpression( - this.startNodeAt(E, O), + this.startNodeAt(E, L), [Q], !0, o @@ -27499,11 +27561,11 @@ Defaulting to 2020, but this will stop working in the future.`)), } return Q; case c.regexp: - var Te = this.value; + var ke = this.value; return ( - (f = this.parseLiteral(Te.value)), - (f.regex = {pattern: Te.pattern, flags: Te.flags}), - f + (h = this.parseLiteral(ke.value)), + (h.regex = {pattern: ke.pattern, flags: ke.flags}), + h ); case c.num: case c.string: @@ -27512,36 +27574,36 @@ Defaulting to 2020, but this will stop working in the future.`)), case c._true: case c._false: return ( - (f = this.startNode()), - (f.value = + (h = this.startNode()), + (h.value = this.type === c._null ? null : this.type === c._true), - (f.raw = this.type.keyword), + (h.raw = this.type.keyword), this.next(), - this.finishNode(f, 'Literal') + this.finishNode(h, 'Literal') ); case c.parenL: - var xe = this.start, - Ze = this.parseParenAndDistinguishExpression(m, o); + var ge = this.start, + et = this.parseParenAndDistinguishExpression(m, o); return ( n && (n.parenthesizedAssign < 0 && - !this.isSimpleAssignTarget(Ze) && - (n.parenthesizedAssign = xe), - n.parenthesizedBind < 0 && (n.parenthesizedBind = xe)), - Ze + !this.isSimpleAssignTarget(et) && + (n.parenthesizedAssign = ge), + n.parenthesizedBind < 0 && (n.parenthesizedBind = ge)), + et ); case c.bracketL: return ( - (f = this.startNode()), + (h = this.startNode()), this.next(), - (f.elements = this.parseExprList(c.bracketR, !0, !0, n)), - this.finishNode(f, 'ArrayExpression') + (h.elements = this.parseExprList(c.bracketR, !0, !0, n)), + this.finishNode(h, 'ArrayExpression') ); case c.braceL: - return this.overrideContext(Ue.b_expr), this.parseObj(!1, n); + return this.overrideContext(He.b_expr), this.parseObj(!1, n); case c._function: return ( - (f = this.startNode()), this.next(), this.parseFunction(f, 0) + (h = this.startNode()), this.next(), this.parseFunction(h, 0) ); case c._class: return this.parseClass(this.startNode(), !1); @@ -27557,10 +27619,10 @@ Defaulting to 2020, but this will stop working in the future.`)), return this.parseExprAtomDefault(); } }), - (de.parseExprAtomDefault = function () { + (me.parseExprAtomDefault = function () { this.unexpected(); }), - (de.parseExprImport = function (n) { + (me.parseExprImport = function (n) { var o = this.startNode(); if ( (this.containsEsc && @@ -27581,7 +27643,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ); } else this.unexpected(); }), - (de.parseDynamicImport = function (n) { + (me.parseDynamicImport = function (n) { if ( (this.next(), (n.source = this.parseMaybeAssign()), @@ -27607,7 +27669,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } return this.finishNode(n, 'ImportExpression'); }), - (de.parseImportMeta = function (n) { + (me.parseImportMeta = function (n) { this.next(); var o = this.containsEsc; return ( @@ -27631,7 +27693,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(n, 'MetaProperty') ); }), - (de.parseLiteral = function (n) { + (me.parseLiteral = function (n) { var o = this.startNode(); return ( (o.value = n), @@ -27645,39 +27707,39 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(o, 'Literal') ); }), - (de.parseParenExpression = function () { + (me.parseParenExpression = function () { this.expect(c.parenL); var n = this.parseExpression(); return this.expect(c.parenR), n; }), - (de.shouldParseArrow = function (n) { + (me.shouldParseArrow = function (n) { return !this.canInsertSemicolon(); }), - (de.parseParenAndDistinguishExpression = function (n, o) { + (me.parseParenAndDistinguishExpression = function (n, o) { var l = this.start, - f = this.startLoc, + h = this.startLoc, m, E = this.options.ecmaVersion >= 8; if (this.options.ecmaVersion >= 6) { this.next(); - var O = this.start, + var L = this.start, Y = this.startLoc, Q = [], - Te = !0, - xe = !1, - Ze = new Xt(), - Lt = this.yieldPos, - Ri = this.awaitPos, - Ys; + ke = !0, + ge = !1, + et = new Yt(), + Ot = this.yieldPos, + Oi = this.awaitPos, + Zs; for (this.yieldPos = 0, this.awaitPos = 0; this.type !== c.parenR; ) if ( - (Te ? (Te = !1) : this.expect(c.comma), + (ke ? (ke = !1) : this.expect(c.comma), E && this.afterTrailingComma(c.parenR, !0)) ) { - xe = !0; + ge = !0; break; } else if (this.type === c.ellipsis) { - (Ys = this.start), + (Zs = this.start), Q.push(this.parseParenItem(this.parseRestBinding())), this.type === c.comma && this.raiseRecoverable( @@ -27685,47 +27747,47 @@ Defaulting to 2020, but this will stop working in the future.`)), '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; + } else Q.push(this.parseMaybeAssign(!1, et, this.parseParenItem)); + var Sr = this.lastTokEnd, + ei = this.lastTokEndLoc; if ( (this.expect(c.parenR), n && this.shouldParseArrow(Q) && this.eat(c.arrow)) ) return ( - this.checkPatternErrors(Ze, !1), + this.checkPatternErrors(et, !1), this.checkYieldAwaitInDefaultParams(), - (this.yieldPos = Lt), - (this.awaitPos = Ri), - this.parseParenArrowList(l, f, Q, o) + (this.yieldPos = Ot), + (this.awaitPos = Oi), + this.parseParenArrowList(l, h, 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 || ge) && this.unexpected(this.lastTokStart), + Zs && this.unexpected(Zs), + this.checkExpressionErrors(et, !0), + (this.yieldPos = Ot || this.yieldPos), + (this.awaitPos = Oi || this.awaitPos), Q.length > 1 - ? ((m = this.startNodeAt(O, Y)), + ? ((m = this.startNodeAt(L, Y)), (m.expressions = Q), - this.finishNodeAt(m, 'SequenceExpression', gr, Js)) + this.finishNodeAt(m, 'SequenceExpression', Sr, ei)) : (m = Q[0]); } else m = this.parseParenExpression(); if (this.options.preserveParens) { - var Qs = this.startNodeAt(l, f); + var ti = this.startNodeAt(l, h); return ( - (Qs.expression = m), - this.finishNode(Qs, 'ParenthesizedExpression') + (ti.expression = m), + this.finishNode(ti, 'ParenthesizedExpression') ); } else return m; }), - (de.parseParenItem = function (n) { + (me.parseParenItem = function (n) { return n; }), - (de.parseParenArrowList = function (n, o, l, f) { - return this.parseArrowExpression(this.startNodeAt(n, o), l, !1, f); + (me.parseParenArrowList = function (n, o, l, h) { + return this.parseArrowExpression(this.startNodeAt(n, o), l, !1, h); }); - var Ci = []; - (de.parseNew = function () { + var Si = []; + (me.parseNew = function () { this.containsEsc && this.raiseRecoverable(this.start, 'Escape sequence in keyword new'); var n = this.startNode(); @@ -27757,12 +27819,12 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(n, 'MetaProperty') ); } - var f = this.start, + var h = this.start, m = this.startLoc; return ( (n.callee = this.parseSubscripts( this.parseExprAtom(null, !1, !0), - f, + h, m, !0, !1 @@ -27773,11 +27835,11 @@ Defaulting to 2020, but this will stop working in the future.`)), this.options.ecmaVersion >= 8, !1 )) - : (n.arguments = Ci), + : (n.arguments = Si), this.finishNode(n, 'NewExpression') ); }), - (de.parseTemplateElement = function (n) { + (me.parseTemplateElement = function (n) { var o = n.isTagged, l = this.startNode(); return ( @@ -27808,23 +27870,23 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(l, 'TemplateElement') ); }), - (de.parseTemplate = function (n) { + (me.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; ) + var h = this.parseTemplateElement({isTagged: o}); + for (l.quasis = [h]; !h.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}))); + l.quasis.push((h = this.parseTemplateElement({isTagged: o}))); return this.next(), this.finishNode(l, 'TemplateLiteral'); }), - (de.isAsyncProp = function (n) { + (me.isAsyncProp = function (n) { return ( !n.computed && n.key.type === 'Identifier' && @@ -27838,12 +27900,12 @@ Defaulting to 2020, but this will stop working in the future.`)), !R.test(this.input.slice(this.lastTokEnd, this.start)) ); }), - (de.parseObj = function (n, o) { + (me.parseObj = function (n, o) { var l = this.startNode(), - f = !0, + h = !0, m = {}; for (l.properties = [], this.next(); !this.eat(c.braceR); ) { - if (f) f = !1; + if (h) h = !1; else if ( (this.expect(c.comma), this.options.ecmaVersion >= 5 && @@ -27855,12 +27917,12 @@ Defaulting to 2020, but this will stop working in the future.`)), } return this.finishNode(l, n ? 'ObjectPattern' : 'ObjectExpression'); }), - (de.parseProperty = function (n, o) { + (me.parseProperty = function (n, o) { var l = this.startNode(), - f, + h, m, E, - O; + L; if (this.options.ecmaVersion >= 9 && this.eat(c.ellipsis)) return n ? ((l.argument = this.parseIdent(!1)), @@ -27879,36 +27941,36 @@ Defaulting to 2020, but this will stop working in the future.`)), this.options.ecmaVersion >= 6 && ((l.method = !1), (l.shorthand = !1), - (n || o) && ((E = this.start), (O = this.startLoc)), - n || (f = this.eat(c.star))); + (n || o) && ((E = this.start), (L = this.startLoc)), + n || (h = this.eat(c.star))); var Y = this.containsEsc; return ( this.parsePropertyName(l), !n && !Y && this.options.ecmaVersion >= 8 && - !f && + !h && this.isAsyncProp(l) ? ((m = !0), - (f = this.options.ecmaVersion >= 9 && this.eat(c.star)), + (h = this.options.ecmaVersion >= 9 && this.eat(c.star)), this.parsePropertyName(l)) : (m = !1), - this.parsePropertyValue(l, n, f, m, E, O, o, Y), + this.parsePropertyValue(l, n, h, m, E, L, o, Y), this.finishNode(l, 'Property') ); }), - (de.parseGetterSetter = function (n) { + (me.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; + var h = n.value.start; n.kind === 'get' - ? this.raiseRecoverable(f, 'getter should have no params') + ? this.raiseRecoverable(h, 'getter should have no params') : this.raiseRecoverable( - f, + h, 'setter should have exactly one param' ); } else @@ -27919,17 +27981,17 @@ Defaulting to 2020, but this will stop working in the future.`)), 'Setter cannot use rest params' ); }), - (de.parsePropertyValue = function (n, o, l, f, m, E, O, Y) { - (l || f) && this.type === c.colon && this.unexpected(), + (me.parsePropertyValue = function (n, o, l, h, m, E, L, Y) { + (l || h) && this.type === c.colon && this.unexpected(), this.eat(c.colon) ? ((n.value = o ? this.parseMaybeDefault(this.start, this.startLoc) - : this.parseMaybeAssign(!1, O)), + : this.parseMaybeAssign(!1, L)), (n.kind = 'init')) : this.options.ecmaVersion >= 6 && this.type === c.parenL ? (o && this.unexpected(), (n.method = !0), - (n.value = this.parseMethod(l, f)), + (n.value = this.parseMethod(l, h)), (n.kind = 'init')) : !o && !Y && @@ -27940,11 +28002,11 @@ Defaulting to 2020, but this will stop working in the future.`)), this.type !== c.comma && this.type !== c.braceR && this.type !== c.eq - ? ((l || f) && this.unexpected(), this.parseGetterSetter(n)) + ? ((l || h) && this.unexpected(), this.parseGetterSetter(n)) : this.options.ecmaVersion >= 6 && !n.computed && n.key.type === 'Identifier' - ? ((l || f) && this.unexpected(), + ? ((l || h) && this.unexpected(), this.checkUnreserved(n.key), n.key.name === 'await' && !this.awaitIdentPos && @@ -27955,8 +28017,8 @@ Defaulting to 2020, but this will stop working in the future.`)), E, this.copyNode(n.key) )) - : this.type === c.eq && O - ? (O.shorthandAssign < 0 && (O.shorthandAssign = this.start), + : this.type === c.eq && L + ? (L.shorthandAssign < 0 && (L.shorthandAssign = this.start), (n.value = this.parseMaybeDefault( m, E, @@ -27967,7 +28029,7 @@ Defaulting to 2020, but this will stop working in the future.`)), (n.shorthand = !0)) : this.unexpected(); }), - (de.parsePropertyName = function (n) { + (me.parsePropertyName = function (n) { if (this.options.ecmaVersion >= 6) { if (this.eat(c.bracketL)) return ( @@ -27983,63 +28045,63 @@ Defaulting to 2020, but this will stop working in the future.`)), ? this.parseExprAtom() : this.parseIdent(this.options.allowReserved !== 'never')); }), - (de.initFunction = function (n) { + (me.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(), + (me.parseMethod = function (n, o, l) { + var h = this.startNode(), m = this.yieldPos, E = this.awaitPos, - O = this.awaitIdentPos; + L = this.awaitIdentPos; return ( - this.initFunction(f), - this.options.ecmaVersion >= 6 && (f.generator = n), - this.options.ecmaVersion >= 8 && (f.async = !!o), + this.initFunction(h), + this.options.ecmaVersion >= 6 && (h.generator = n), + this.options.ecmaVersion >= 8 && (h.async = !!o), (this.yieldPos = 0), (this.awaitPos = 0), (this.awaitIdentPos = 0), - this.enterScope(ut(o, f.generator) | Ee | (l ? Le : 0)), + this.enterScope(pt(o, h.generator) | Ae | (l ? Oe : 0)), this.expect(c.parenL), - (f.params = this.parseBindingList( + (h.params = this.parseBindingList( c.parenR, !1, this.options.ecmaVersion >= 8 )), this.checkYieldAwaitInDefaultParams(), - this.parseFunctionBody(f, !1, !0, !1), + this.parseFunctionBody(h, !1, !0, !1), (this.yieldPos = m), (this.awaitPos = E), - (this.awaitIdentPos = O), - this.finishNode(f, 'FunctionExpression') + (this.awaitIdentPos = L), + this.finishNode(h, 'FunctionExpression') ); }), - (de.parseArrowExpression = function (n, o, l, f) { + (me.parseArrowExpression = function (n, o, l, h) { var m = this.yieldPos, E = this.awaitPos, - O = this.awaitIdentPos; + L = this.awaitIdentPos; return ( - this.enterScope(ut(l, !1) | he), + this.enterScope(pt(l, !1) | fe), 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.parseFunctionBody(n, !0, !1, h), (this.yieldPos = m), (this.awaitPos = E), - (this.awaitIdentPos = O), + (this.awaitIdentPos = L), this.finishNode(n, 'ArrowFunctionExpression') ); }), - (de.parseFunctionBody = function (n, o, l, f) { + (me.parseFunctionBody = function (n, o, l, h) { var m = o && this.type !== c.braceL, E = this.strict, - O = !1; + L = !1; if (m) - (n.body = this.parseMaybeAssign(f)), + (n.body = this.parseMaybeAssign(h)), (n.expression = !0), this.checkParams(n, !1); else { @@ -28047,8 +28109,8 @@ Defaulting to 2020, but this will stop working in the future.`)), this.options.ecmaVersion >= 7 && !this.isSimpleParamList(n.params); (!E || Y) && - ((O = this.strictDirective(this.end)), - O && + ((L = this.strictDirective(this.end)), + L && Y && this.raiseRecoverable( n.start, @@ -28056,103 +28118,103 @@ Defaulting to 2020, but this will stop working in the future.`)), )); var Q = this.labels; (this.labels = []), - O && (this.strict = !0), + L && (this.strict = !0), this.checkParams( n, - !E && !O && !o && !l && this.isSimpleParamList(n.params) + !E && !L && !o && !l && this.isSimpleParamList(n.params) ), - this.strict && n.id && this.checkLValSimple(n.id, Dn), - (n.body = this.parseBlock(!1, void 0, O && !E)), + this.strict && n.id && this.checkLValSimple(n.id, Bn), + (n.body = this.parseBlock(!1, void 0, L && !E)), (n.expression = !1), this.adaptDirectivePrologue(n.body.body), (this.labels = Q); } this.exitScope(); }), - (de.isSimpleParamList = function (n) { + (me.isSimpleParamList = function (n) { for (var o = 0, l = n; o < l.length; o += 1) { - var f = l[o]; - if (f.type !== 'Identifier') return !1; + var h = l[o]; + if (h.type !== 'Identifier') return !1; } return !0; }), - (de.checkParams = function (n, o) { + (me.checkParams = function (n, o) { for ( - var l = Object.create(null), f = 0, m = n.params; - f < m.length; - f += 1 + var l = Object.create(null), h = 0, m = n.params; + h < m.length; + h += 1 ) { - var E = m[f]; - this.checkLValInnerPattern(E, bt, o ? null : l); + var E = m[h]; + this.checkLValInnerPattern(E, wt, o ? null : l); } }), - (de.parseExprList = function (n, o, l, f) { + (me.parseExprList = function (n, o, l, h) { 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; + var L = void 0; l && this.type === c.comma - ? (O = null) + ? (L = null) : this.type === c.ellipsis - ? ((O = this.parseSpread(f)), - f && + ? ((L = this.parseSpread(h)), + h && this.type === c.comma && - f.trailingComma < 0 && - (f.trailingComma = this.start)) - : (O = this.parseMaybeAssign(!1, f)), - m.push(O); + h.trailingComma < 0 && + (h.trailingComma = this.start)) + : (L = this.parseMaybeAssign(!1, h)), + m.push(L); } return m; }), - (de.checkUnreserved = function (n) { + (me.checkUnreserved = function (n) { var o = n.start, l = n.end, - f = n.name; + h = n.name; if ( (this.inGenerator && - f === 'yield' && + h === 'yield' && this.raiseRecoverable( o, "Cannot use 'yield' as identifier inside a generator" ), this.inAsync && - f === 'await' && + h === 'await' && this.raiseRecoverable( o, "Cannot use 'await' as identifier inside an async function" ), - !(this.currentThisScope().flags & Ke) && - f === 'arguments' && + !(this.currentThisScope().flags & Ue) && + h === 'arguments' && this.raiseRecoverable( o, "Cannot use 'arguments' in class field initializer" ), this.inClassStaticBlock && - (f === 'arguments' || f === 'await') && + (h === 'arguments' || h === 'await') && this.raise( o, - 'Cannot use ' + f + ' in class static initialization block' + 'Cannot use ' + h + ' in class static initialization block' ), - this.keywords.test(f) && - this.raise(o, "Unexpected keyword '" + f + "'"), + this.keywords.test(h) && + this.raise(o, "Unexpected keyword '" + h + "'"), !( this.options.ecmaVersion < 6 && this.input.slice(o, l).indexOf('\\') !== -1 )) ) { var m = this.strict ? this.reservedWordsStrict : this.reservedWords; - m.test(f) && + m.test(h) && (!this.inAsync && - f === 'await' && + h === 'await' && this.raiseRecoverable( o, "Cannot use keyword 'await' outside an async function" ), - this.raiseRecoverable(o, "The keyword '" + f + "' is reserved")); + this.raiseRecoverable(o, "The keyword '" + h + "' is reserved")); } }), - (de.parseIdent = function (n) { + (me.parseIdent = function (n) { var o = this.parseIdentNode(); return ( this.next(!!n), @@ -28165,7 +28227,7 @@ Defaulting to 2020, but this will stop working in the future.`)), o ); }), - (de.parseIdentNode = function () { + (me.parseIdentNode = function () { var n = this.startNode(); return ( this.type === c.name @@ -28181,7 +28243,7 @@ Defaulting to 2020, but this will stop working in the future.`)), n ); }), - (de.parsePrivateIdent = function () { + (me.parsePrivateIdent = function () { var n = this.startNode(); return ( this.type === c.privateId @@ -28203,7 +28265,7 @@ Defaulting to 2020, but this will stop working in the future.`)), n ); }), - (de.parseYield = function (n) { + (me.parseYield = function (n) { this.yieldPos || (this.yieldPos = this.start); var o = this.startNode(); return ( @@ -28217,7 +28279,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(o, 'YieldExpression') ); }), - (de.parseAwait = function (n) { + (me.parseAwait = function (n) { this.awaitPos || (this.awaitPos = this.start); var o = this.startNode(); return ( @@ -28226,196 +28288,196 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(o, 'AwaitExpression') ); }); - var ts = Ge.prototype; - (ts.raise = function (n, o) { - var l = $t(this.input, n); + var os = ze.prototype; + (os.raise = function (n, o) { + var l = qt(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); + var h = new SyntaxError(o); + throw ((h.pos = n), (h.loc = l), (h.raisedAt = this.pos), h); }), - (ts.raiseRecoverable = ts.raise), - (ts.curPosition = function () { + (os.raiseRecoverable = os.raise), + (os.curPosition = function () { if (this.options.locations) - return new ct(this.curLine, this.pos - this.lineStart); + return new ut(this.curLine, this.pos - this.lineStart); }); - var rn = Ge.prototype, - wi = function (o) { + var ln = ze.prototype, + Ii = function (o) { (this.flags = o), (this.var = []), (this.lexical = []), (this.functions = []); }; - (rn.enterScope = function (n) { - this.scopeStack.push(new wi(n)); + (ln.enterScope = function (n) { + this.scopeStack.push(new Ii(n)); }), - (rn.exitScope = function () { + (ln.exitScope = function () { this.scopeStack.pop(); }), - (rn.treatFunctionsAsVarInScope = function (n) { + (ln.treatFunctionsAsVarInScope = function (n) { return n.flags & J || (!this.inModule && n.flags & G); }), - (rn.declareName = function (n, o, l) { - var f = !1; + (ln.declareName = function (n, o, l) { + var h = !1; if (o === yt) { var m = this.currentScope(); - (f = + (h = 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) { + } else if (o === Cn) { var E = this.currentScope(); E.lexical.push(n); - } else if (o === vt) { - var O = this.currentScope(); + } else if (o === xt) { + var L = 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); + ? (h = L.lexical.indexOf(n) > -1) + : (h = L.lexical.indexOf(n) > -1 || L.var.indexOf(n) > -1), + L.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)) || + !(Q.flags & Ee && Q.lexical[0] === n)) || (!this.treatFunctionsAsVarInScope(Q) && Q.functions.indexOf(n) > -1) ) { - f = !0; + h = !0; break; } if ( (Q.var.push(n), this.inModule && Q.flags & G && delete this.undefinedExports[n], - Q.flags & Ke) + Q.flags & Ue) ) break; } - f && + h && this.raiseRecoverable( l, "Identifier '" + n + "' has already been declared" ); }), - (rn.checkLocalExport = function (n) { + (ln.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 () { + (ln.currentScope = function () { return this.scopeStack[this.scopeStack.length - 1]; }), - (rn.currentVarScope = function () { + (ln.currentVarScope = function () { for (var n = this.scopeStack.length - 1; ; n--) { var o = this.scopeStack[n]; - if (o.flags & (Ke | We | Xe)) return o; + if (o.flags & (Ue | Ge | Ye)) return o; } }), - (rn.currentThisScope = function () { + (ln.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; + if (o.flags & (Ue | Ge | Ye) && !(o.flags & fe)) return o; } }); - var Fn = function (o, l, f) { + var jn = function (o, l, h) { (this.type = ''), (this.start = l), (this.end = 0), - o.options.locations && (this.loc = new wt(o, f)), + o.options.locations && (this.loc = new St(o, h)), 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); + $n = ze.prototype; + ($n.startNode = function () { + return new jn(this, this.start, this.startLoc); }), - (Bn.startNodeAt = function (n, o) { - return new Fn(this, n, o); + ($n.startNodeAt = function (n, o) { + return new jn(this, n, o); }); - function Fs(n, o, l, f) { + function js(n, o, l, h) { return ( (n.type = o), (n.end = l), - this.options.locations && (n.loc.end = f), + this.options.locations && (n.loc.end = h), this.options.ranges && (n.range[1] = l), n ); } - (Bn.finishNode = function (n, o) { - return Fs.call(this, n, o, this.lastTokEnd, this.lastTokEndLoc); + ($n.finishNode = function (n, o) { + return js.call(this, n, o, this.lastTokEnd, this.lastTokEndLoc); }), - (Bn.finishNodeAt = function (n, o, l, f) { - return Fs.call(this, n, o, l, f); + ($n.finishNodeAt = function (n, o, l, h) { + return js.call(this, n, o, l, h); }), - (Bn.copyNode = function (n) { - var o = new Fn(this, n.start, this.startLoc); + ($n.copyNode = function (n) { + var o = new jn(this, n.start, this.startLoc); for (var l in n) o[l] = n[l]; return o; }); - var Si = + var Ei = '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 = + $s = '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 = + Ks = $s + ' Extended_Pictographic', + qs = Ks, + Us = qs + ' EBase EComp EMod EPres ExtPict', + Hs = Us, + Ai = Hs, + Pi = {9: $s, 10: Ks, 11: qs, 12: Us, 13: Hs, 14: Ai}, + Ni = '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 = + Ri = {9: '', 10: '', 11: '', 12: '', 13: '', 14: Ni}, + Ws = '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 = + Gs = '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 + + zs = + Gs + ' Dogra Dogr Gunjala_Gondi Gong Hanifi_Rohingya Rohg Makasar Maka Medefaidrin Medf Old_Sogdian Sogo Sogdian Sogd', - Ws = - Hs + + Xs = + zs + ' Elymaic Elym Nandinagari Nand Nyiakeng_Puachue_Hmong Hmnp Wancho Wcho', - Gs = - Ws + + Ys = + Xs + ' Chorasmian Chrs Diak Dives_Akuru Khitan_Small_Script Kits Yezi Yezidi', - zs = - Gs + + Js = + Ys + ' 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])}, + Ho = Js + ' ' + Ei, + Wo = {9: Gs, 10: zs, 11: Xs, 12: Ys, 13: Js, 14: Ho}, + xr = {}; + function Go(n) { + var o = (xr[n] = { + binary: nt(Pi[n] + ' ' + Ws), + binaryOfStrings: nt(Ri[n]), + nonBinary: {General_Category: nt(Ws), Script: nt(Wo[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); + for (var Li = 0, gr = [9, 10, 11, 12, 13, 14]; Li < gr.length; Li += 1) { + var zo = gr[Li]; + Go(zo); } - var le = Ge.prototype, - Xs = function (o, l) { + var le = ze.prototype, + Qs = function (o, l) { (this.parent = o), (this.base = l || this); }; - (Xs.prototype.separatedFrom = function (o) { + (Qs.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; + for (var h = o; h; h = h.parent) + if (l.base === h.base && l !== h) return !0; return !1; }), - (Xs.prototype.sibling = function () { - return new Xs(this.parent, this.base); + (Qs.prototype.sibling = function () { + return new Qs(this.parent, this.base); }); - var on = function (o) { + var cn = function (o) { (this.parser = o), (this.validFlags = 'gim' + @@ -28424,7 +28486,7 @@ Defaulting to 2020, but this will stop working in the future.`)), (o.options.ecmaVersion >= 13 ? 'd' : '') + (o.options.ecmaVersion >= 15 ? 'v' : '')), (this.unicodeProperties = - mr[o.options.ecmaVersion >= 14 ? 14 : o.options.ecmaVersion]), + xr[o.options.ecmaVersion >= 14 ? 14 : o.options.ecmaVersion]), (this.source = ''), (this.flags = ''), (this.start = 0), @@ -28441,98 +28503,98 @@ Defaulting to 2020, but this will stop working in the future.`)), (this.backReferenceNames = []), (this.branchID = null); }; - (on.prototype.reset = function (o, l, f) { - var m = f.indexOf('v') !== -1, - E = f.indexOf('u') !== -1; + (cn.prototype.reset = function (o, l, h) { + var m = h.indexOf('v') !== -1, + E = h.indexOf('u') !== -1; (this.start = o | 0), (this.source = l + ''), - (this.flags = f), + (this.flags = h), 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) { + (cn.prototype.raise = function (o) { this.parser.raiseRecoverable( this.start, 'Invalid regular expression: /' + this.source + '/: ' + o ); }), - (on.prototype.at = function (o, l) { + (cn.prototype.at = function (o, l) { l === void 0 && (l = !1); - var f = this.source, - m = f.length; + var h = this.source, + m = h.length; if (o >= m) return -1; - var E = f.charCodeAt(o); + var E = h.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; + var L = h.charCodeAt(o + 1); + return L >= 56320 && L <= 57343 ? (E << 10) + L - 56613888 : E; }), - (on.prototype.nextIndex = function (o, l) { + (cn.prototype.nextIndex = function (o, l) { l === void 0 && (l = !1); - var f = this.source, - m = f.length; + var h = this.source, + m = h.length; if (o >= m) return m; - var E = f.charCodeAt(o), - O; + var E = h.charCodeAt(o), + L; return !(l || this.switchU) || E <= 55295 || E >= 57344 || o + 1 >= m || - (O = f.charCodeAt(o + 1)) < 56320 || - O > 57343 + (L = h.charCodeAt(o + 1)) < 56320 || + L > 57343 ? o + 1 : o + 2; }), - (on.prototype.current = function (o) { + (cn.prototype.current = function (o) { return o === void 0 && (o = !1), this.at(this.pos, o); }), - (on.prototype.lookahead = function (o) { + (cn.prototype.lookahead = function (o) { return ( o === void 0 && (o = !1), this.at(this.nextIndex(this.pos, o), o) ); }), - (on.prototype.advance = function (o) { + (cn.prototype.advance = function (o) { o === void 0 && (o = !1), (this.pos = this.nextIndex(this.pos, o)); }), - (on.prototype.eat = function (o, l) { + (cn.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) { + (cn.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); + for (var h = this.pos, m = 0, E = o; m < E.length; m += 1) { + var L = E[m], + Y = this.at(h, l); + if (Y === -1 || Y !== L) return !1; + h = this.nextIndex(h, l); } - return (this.pos = f), !0; + return (this.pos = h), !0; }), (le.validateRegExpFlags = function (n) { for ( - var o = n.validFlags, l = n.flags, f = !1, m = !1, E = 0; + var o = n.validFlags, l = n.flags, h = !1, m = !1, E = 0; E < l.length; E++ ) { - var O = l.charAt(E); - o.indexOf(O) === -1 && + var L = l.charAt(E); + o.indexOf(L) === -1 && this.raise(n.start, 'Invalid regular expression flag'), - l.indexOf(O, E + 1) > -1 && + l.indexOf(L, E + 1) > -1 && this.raise(n.start, 'Duplicate regular expression flag'), - O === 'u' && (f = !0), - O === 'v' && (m = !0); + L === 'u' && (h = !0), + L === 'v' && (m = !0); } this.options.ecmaVersion >= 15 && - f && + h && m && this.raise(n.start, 'Invalid regular expression flag'); }); - function Uo(n) { + function Xo(n) { for (var o in n) return !0; return !1; } @@ -28540,7 +28602,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.regexp_pattern(n), !n.switchN && this.options.ecmaVersion >= 9 && - Uo(n.groupNames) && + Xo(n.groupNames) && ((n.switchN = !0), this.regexp_pattern(n)); }), (le.regexp_pattern = function (n) { @@ -28560,14 +28622,14 @@ Defaulting to 2020, but this will stop working in the future.`)), 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'); + var h = l[o]; + n.groupNames[h] || 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)), + o && (n.branchID = new Qs(n.branchID, null)), this.regexp_alternative(n); n.eat(124); @@ -28636,11 +28698,11 @@ Defaulting to 2020, but this will stop working in the future.`)), (le.regexp_eatBracedQuantifier = function (n, o) { var l = n.pos; if (n.eat(123)) { - var f = 0, + var h = 0, m = -1; if ( this.regexp_eatDecimalDigits(n) && - ((f = n.lastIntValue), + ((h = n.lastIntValue), n.eat(44) && this.regexp_eatDecimalDigits(n) && (m = n.lastIntValue), @@ -28648,7 +28710,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ) return ( m !== -1 && - m < f && + m < h && !o && n.raise('numbers out of order in {} quantifier'), !0 @@ -28681,22 +28743,22 @@ Defaulting to 2020, but this will stop working in the future.`)), if (n.eat(63)) { if (this.options.ecmaVersion >= 16) { var l = this.regexp_eatModifiers(n), - f = n.eat(45); - if (l || f) { + h = n.eat(45); + if (l || h) { 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); + if (h) { + var L = this.regexp_eatModifiers(n); !l && - !O && + !L && 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) && + for (var Y = 0; Y < L.length; Y++) { + var Q = L.charAt(Y); + (L.indexOf(Q, Y + 1) > -1 || l.indexOf(Q) > -1) && n.raise('Duplicate regular expression modifiers'); } } @@ -28726,11 +28788,11 @@ Defaulting to 2020, but this will stop working in the future.`)), return !1; }), (le.regexp_eatModifiers = function (n) { - for (var o = '', l = 0; (l = n.current()) !== -1 && Ho(l); ) - (o += nt(l)), n.advance(); + for (var o = '', l = 0; (l = n.current()) !== -1 && Yo(l); ) + (o += st(l)), n.advance(); return o; }); - function Ho(n) { + function Yo(n) { return n === 105 || n === 109 || n === 115; } (le.regexp_eatExtendedAtom = function (n) { @@ -28753,9 +28815,9 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (le.regexp_eatSyntaxCharacter = function (n) { var o = n.current(); - return Tr(o) ? ((n.lastIntValue = o), n.advance(), !0) : !1; + return _r(o) ? ((n.lastIntValue = o), n.advance(), !0) : !1; }); - function Tr(n) { + function _r(n) { return ( n === 36 || (n >= 40 && n <= 43) || @@ -28766,7 +28828,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ); } (le.regexp_eatPatternCharacters = function (n) { - for (var o = n.pos, l = 0; (l = n.current()) !== -1 && !Tr(l); ) + for (var o = n.pos, l = 0; (l = n.current()) !== -1 && !_r(l); ) n.advance(); return n.pos !== o; }), @@ -28790,8 +28852,8 @@ Defaulting to 2020, but this will stop working in the future.`)), l = n.groupNames[n.lastStringValue]; if (l) if (o) - for (var f = 0, m = l; f < m.length; f += 1) { - var E = m[f]; + for (var h = 0, m = l; h < m.length; h += 1) { + var E = m[h]; E.separatedFrom(n.branchID) || n.raise('Duplicate capture group name'); } @@ -28813,11 +28875,11 @@ Defaulting to 2020, but this will stop working in the future.`)), ((n.lastStringValue = ''), this.regexp_eatRegExpIdentifierStart(n)) ) { for ( - n.lastStringValue += nt(n.lastIntValue); + n.lastStringValue += st(n.lastIntValue); this.regexp_eatRegExpIdentifierPart(n); ) - n.lastStringValue += nt(n.lastIntValue); + n.lastStringValue += st(n.lastIntValue); return !0; } return !1; @@ -28825,31 +28887,31 @@ Defaulting to 2020, but this will stop working in the future.`)), (le.regexp_eatRegExpIdentifierStart = function (n) { var o = n.pos, l = this.options.ecmaVersion >= 11, - f = n.current(l); + h = n.current(l); return ( n.advance(l), - f === 92 && + h === 92 && this.regexp_eatRegExpUnicodeEscapeSequence(n, l) && - (f = n.lastIntValue), - Wo(f) ? ((n.lastIntValue = f), !0) : ((n.pos = o), !1) + (h = n.lastIntValue), + Jo(h) ? ((n.lastIntValue = h), !0) : ((n.pos = o), !1) ); }); - function Wo(n) { - return h(n, !0) || n === 36 || n === 95; + function Jo(n) { + return f(n, !0) || n === 36 || n === 95; } le.regexp_eatRegExpIdentifierPart = function (n) { var o = n.pos, l = this.options.ecmaVersion >= 11, - f = n.current(l); + h = n.current(l); return ( n.advance(l), - f === 92 && + h === 92 && this.regexp_eatRegExpUnicodeEscapeSequence(n, l) && - (f = n.lastIntValue), - Go(f) ? ((n.lastIntValue = f), !0) : ((n.pos = o), !1) + (h = n.lastIntValue), + Qo(h) ? ((n.lastIntValue = h), !0) : ((n.pos = o), !1) ); }; - function Go(n) { + function Qo(n) { return T(n, !0) || n === 36 || n === 95 || n === 8204 || n === 8205; } (le.regexp_eatAtomEscape = function (n) { @@ -28902,7 +28964,7 @@ Defaulting to 2020, but this will stop working in the future.`)), return !1; }), (le.regexp_eatZero = function (n) { - return n.current() === 48 && !vr(n.lookahead()) + return n.current() === 48 && !Cr(n.lookahead()) ? ((n.lastIntValue = 0), n.advance(), !0) : !1; }), @@ -28922,29 +28984,29 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (le.regexp_eatControlLetter = function (n) { var o = n.current(); - return kr(o) ? ((n.lastIntValue = o % 32), n.advance(), !0) : !1; + return br(o) ? ((n.lastIntValue = o % 32), n.advance(), !0) : !1; }); - function kr(n) { + function br(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; + h = o || n.switchU; if (n.eat(117)) { if (this.regexp_eatFixedHexDigits(n, 4)) { var m = n.lastIntValue; - if (f && m >= 55296 && m <= 56319) { + if (h && 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) + var L = n.lastIntValue; + if (L >= 56320 && L <= 57343) return ( - (n.lastIntValue = (m - 55296) * 1024 + (O - 56320) + 65536), + (n.lastIntValue = (m - 55296) * 1024 + (L - 56320) + 65536), !0 ); } @@ -28953,18 +29015,18 @@ Defaulting to 2020, but this will stop working in the future.`)), return !0; } if ( - f && + h && n.eat(123) && this.regexp_eatHexDigits(n) && n.eat(125) && - vf(n.lastIntValue) + Nf(n.lastIntValue) ) return !0; - f && n.raise('Invalid unicode escape'), (n.pos = l); + h && n.raise('Invalid unicode escape'), (n.pos = l); } return !1; }; - function vf(n) { + function Nf(n) { return n >= 0 && n <= 1114111; } (le.regexp_eatIdentityEscape = function (n) { @@ -28989,12 +29051,12 @@ Defaulting to 2020, but this will stop working in the future.`)), } return !1; }); - var Rc = 0, - Vn = 1, - an = 2; + var Kc = 0, + Kn = 1, + un = 2; le.regexp_eatCharacterClassEscape = function (n) { var o = n.current(); - if (xf(o)) return (n.lastIntValue = -1), n.advance(), Vn; + if (Rf(o)) return (n.lastIntValue = -1), n.advance(), Kn; var l = !1; if ( n.switchU && @@ -29002,18 +29064,18 @@ Defaulting to 2020, but this will stop working in the future.`)), ((l = o === 80) || o === 112) ) { (n.lastIntValue = -1), n.advance(); - var f; + var h; if ( n.eat(123) && - (f = this.regexp_eatUnicodePropertyValueExpression(n)) && + (h = this.regexp_eatUnicodePropertyValueExpression(n)) && n.eat(125) ) - return l && f === an && n.raise('Invalid property name'), f; + return l && h === un && n.raise('Invalid property name'), h; n.raise('Invalid property name'); } - return Rc; + return Kc; }; - function xf(n) { + function Rf(n) { return ( n === 100 || n === 68 || @@ -29028,45 +29090,45 @@ Defaulting to 2020, but this will stop working in the future.`)), 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; + var h = n.lastStringValue; + return this.regexp_validateUnicodePropertyNameAndValue(n, l, h), Kn; } } if (((n.pos = o), this.regexp_eatLoneUnicodePropertyNameOrValue(n))) { var m = n.lastStringValue; return this.regexp_validateUnicodePropertyNameOrValue(n, m); } - return Rc; + return Kc; }), (le.regexp_validateUnicodePropertyNameAndValue = function (n, o, l) { - mt(n.unicodeProperties.nonBinary, o) || + Tt(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.unicodeProperties.binary.test(o)) return Kn; if (n.switchV && n.unicodeProperties.binaryOfStrings.test(o)) - return an; + return un; 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(); + for (n.lastStringValue = ''; qc((o = n.current())); ) + (n.lastStringValue += st(o)), n.advance(); return n.lastStringValue !== ''; }); - function Lc(n) { - return kr(n) || n === 95; + function qc(n) { + return br(n) || n === 95; } le.regexp_eatUnicodePropertyValue = function (n) { var o = 0; - for (n.lastStringValue = ''; gf((o = n.current())); ) - (n.lastStringValue += nt(o)), n.advance(); + for (n.lastStringValue = ''; Lf((o = n.current())); ) + (n.lastStringValue += st(o)), n.advance(); return n.lastStringValue !== ''; }; - function gf(n) { - return Lc(n) || vr(n); + function Lf(n) { + return qc(n) || Cr(n); } (le.regexp_eatLoneUnicodePropertyNameOrValue = function (n) { return this.regexp_eatUnicodePropertyValue(n); @@ -29078,7 +29140,7 @@ Defaulting to 2020, but this will stop working in the future.`)), return ( n.eat(93) || n.raise('Unterminated character class'), o && - l === an && + l === un && n.raise('Negated character class may contain strings'), !0 ); @@ -29087,10 +29149,10 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (le.regexp_classContents = function (n) { return n.current() === 93 - ? Vn + ? Kn : n.switchV ? this.regexp_classSetExpression(n) - : (this.regexp_nonEmptyClassRanges(n), Vn); + : (this.regexp_nonEmptyClassRanges(n), Kn); }), (le.regexp_nonEmptyClassRanges = function (n) { for (; this.regexp_eatClassAtom(n); ) { @@ -29113,13 +29175,13 @@ Defaulting to 2020, but this will stop working in the future.`)), if (this.regexp_eatClassEscape(n)) return !0; if (n.switchU) { var l = n.current(); - (l === 99 || Mc(l)) && n.raise('Invalid class escape'), + (l === 99 || Wc(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; + var h = n.current(); + return h !== 93 ? ((n.lastIntValue = h), n.advance(), !0) : !1; }), (le.regexp_eatClassEscape = function (n) { var o = n.pos; @@ -29135,31 +29197,31 @@ Defaulting to 2020, but this will stop working in the future.`)), ); }), (le.regexp_classSetExpression = function (n) { - var o = Vn, + var o = Kn, 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]); ) { + l === un && (o = un); + for (var h = n.pos; n.eatChars([38, 38]); ) { if ( n.current() !== 38 && (l = this.regexp_eatClassSetOperand(n)) ) { - l !== an && (o = Vn); + l !== un && (o = Kn); continue; } n.raise('Invalid character in character class'); } - if (f !== n.pos) return o; + if (h !== 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; + if (h !== 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); + l === un && (o = un); } }), (le.regexp_eatClassSetRange = function (n) { @@ -29167,11 +29229,11 @@ Defaulting to 2020, but this will stop working in the future.`)), if (this.regexp_eatClassSetCharacter(n)) { var l = n.lastIntValue; if (n.eat(45) && this.regexp_eatClassSetCharacter(n)) { - var f = n.lastIntValue; + var h = n.lastIntValue; return ( l !== -1 && - f !== -1 && - l > f && + h !== -1 && + l > h && n.raise('Range out of order in character class'), !0 ); @@ -29182,7 +29244,7 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (le.regexp_eatClassSetOperand = function (n) { return this.regexp_eatClassSetCharacter(n) - ? Vn + ? Kn : this.regexp_eatClassStringDisjunction(n) || this.regexp_eatNestedClass(n); }), @@ -29190,13 +29252,13 @@ Defaulting to 2020, but this will stop working in the future.`)), var o = n.pos; if (n.eat(91)) { var l = n.eat(94), - f = this.regexp_classContents(n); + h = this.regexp_classContents(n); if (n.eat(93)) return ( l && - f === an && + h === un && n.raise('Negated character class may contain strings'), - f + h ); n.pos = o; } @@ -29220,12 +29282,12 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (le.regexp_classStringDisjunctionContents = function (n) { for (var o = this.regexp_classString(n); n.eat(124); ) - this.regexp_classString(n) === an && (o = an); + this.regexp_classString(n) === un && (o = un); return o; }), (le.regexp_classString = function (n) { for (var o = 0; this.regexp_eatClassSetCharacter(n); ) o++; - return o === 1 ? Vn : an; + return o === 1 ? Kn : un; }), (le.regexp_eatClassSetCharacter = function (n) { var o = n.pos; @@ -29237,11 +29299,11 @@ Defaulting to 2020, but this will stop working in the future.`)), ? ((n.lastIntValue = 8), !0) : ((n.pos = o), !1); var l = n.current(); - return l < 0 || (l === n.lookahead() && _f(l)) || bf(l) + return l < 0 || (l === n.lookahead() && Of(l)) || Df(l) ? !1 : (n.advance(), (n.lastIntValue = l), !0); }); - function _f(n) { + function Of(n) { return ( n === 33 || (n >= 35 && n <= 38) || @@ -29253,7 +29315,7 @@ Defaulting to 2020, but this will stop working in the future.`)), n === 126 ); } - function bf(n) { + function Df(n) { return ( n === 40 || n === 41 || @@ -29265,9 +29327,9 @@ Defaulting to 2020, but this will stop working in the future.`)), } le.regexp_eatClassSetReservedPunctuator = function (n) { var o = n.current(); - return Cf(o) ? ((n.lastIntValue = o), n.advance(), !0) : !1; + return Mf(o) ? ((n.lastIntValue = o), n.advance(), !0) : !1; }; - function Cf(n) { + function Mf(n) { return ( n === 33 || n === 35 || @@ -29283,7 +29345,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } (le.regexp_eatClassControlLetter = function (n) { var o = n.current(); - return vr(o) || o === 95 + return Cr(o) || o === 95 ? ((n.lastIntValue = o % 32), n.advance(), !0) : !1; }), @@ -29298,26 +29360,26 @@ Defaulting to 2020, but this will stop working in the future.`)), (le.regexp_eatDecimalDigits = function (n) { var o = n.pos, l = 0; - for (n.lastIntValue = 0; vr((l = n.current())); ) + for (n.lastIntValue = 0; Cr((l = n.current())); ) (n.lastIntValue = 10 * n.lastIntValue + (l - 48)), n.advance(); return n.pos !== o; }); - function vr(n) { + function Cr(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(); + for (n.lastIntValue = 0; Uc((l = n.current())); ) + (n.lastIntValue = 16 * n.lastIntValue + Hc(l)), n.advance(); return n.pos !== o; }; - function Oc(n) { + function Uc(n) { return ( (n >= 48 && n <= 57) || (n >= 65 && n <= 70) || (n >= 97 && n <= 102) ); } - function Dc(n) { + function Hc(n) { return n >= 65 && n <= 70 ? 10 + (n - 65) : n >= 97 && n <= 102 @@ -29339,33 +29401,33 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (le.regexp_eatOctalDigit = function (n) { var o = n.current(); - return Mc(o) + return Wc(o) ? ((n.lastIntValue = o - 48), n.advance(), !0) : ((n.lastIntValue = 0), !1); }); - function Mc(n) { + function Wc(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) { + for (var h = 0; h < o; ++h) { var m = n.current(); - if (!Oc(m)) return (n.pos = l), !1; - (n.lastIntValue = 16 * n.lastIntValue + Dc(m)), n.advance(); + if (!Uc(m)) return (n.pos = l), !1; + (n.lastIntValue = 16 * n.lastIntValue + Hc(m)), n.advance(); } return !0; }; - var xr = function (o) { + var wr = 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.locations && (this.loc = new St(o, o.startLoc, o.endLoc)), o.options.ranges && (this.range = [o.start, o.end]); }, - Ae = Ge.prototype; - (Ae.next = function (n) { + Pe = ze.prototype; + (Pe.next = function (n) { !n && this.type.keyword && this.containsEsc && @@ -29373,18 +29435,18 @@ Defaulting to 2020, but this will stop working in the future.`)), this.start, 'Escape sequence in keyword ' + this.type.keyword ), - this.options.onToken && this.options.onToken(new xr(this)), + this.options.onToken && this.options.onToken(new wr(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); + (Pe.getToken = function () { + return this.next(), new wr(this); }), typeof Symbol < 'u' && - (Ae[Symbol.iterator] = function () { + (Pe[Symbol.iterator] = function () { var n = this; return { next: function () { @@ -29393,7 +29455,7 @@ Defaulting to 2020, but this will stop working in the future.`)), }, }; }), - (Ae.nextToken = function () { + (Pe.nextToken = function () { var n = this.curContext(); if ( ((!n || !n.preserveSpace) && this.skipSpace(), @@ -29405,18 +29467,18 @@ Defaulting to 2020, but this will stop working in the future.`)), if (n.override) return n.override(this); this.readToken(this.fullCharCodeAtPos()); }), - (Ae.readToken = function (n) { - return h(n, this.options.ecmaVersion >= 6) || n === 92 + (Pe.readToken = function (n) { + return f(n, this.options.ecmaVersion >= 6) || n === 92 ? this.readWord() : this.getTokenFromCode(n); }), - (Ae.fullCharCodeAtPos = function () { + (Pe.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 () { + (Pe.skipBlockComment = function () { var n = this.options.onComment && this.curPosition(), o = this.pos, l = this.input.indexOf('*/', (this.pos += 2)); @@ -29426,11 +29488,11 @@ Defaulting to 2020, but this will stop working in the future.`)), this.options.locations) ) for ( - var f = void 0, m = o; - (f = ie(this.input, m, this.pos)) > -1; + var h = void 0, m = o; + (h = ie(this.input, m, this.pos)) > -1; ) - ++this.curLine, (m = this.lineStart = f); + ++this.curLine, (m = this.lineStart = h); this.options.onComment && this.options.onComment( !0, @@ -29441,15 +29503,15 @@ Defaulting to 2020, but this will stop working in the future.`)), this.curPosition() ); }), - (Ae.skipLineComment = function (n) { + (Pe.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); + h = this.input.charCodeAt((this.pos += n)); + this.pos < this.input.length && !X(h); ) - f = this.input.charCodeAt(++this.pos); + h = this.input.charCodeAt(++this.pos); this.options.onComment && this.options.onComment( !1, @@ -29460,7 +29522,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.curPosition() ); }), - (Ae.skipSpace = function () { + (Pe.skipSpace = function () { e: for (; this.pos < this.input.length; ) { var n = this.input.charCodeAt(this.pos); switch (n) { @@ -29492,20 +29554,20 @@ Defaulting to 2020, but this will stop working in the future.`)), default: if ( (n > 8 && n < 14) || - (n >= 5760 && pe.test(String.fromCharCode(n))) + (n >= 5760 && he.test(String.fromCharCode(n))) ) ++this.pos; else break e; } } }), - (Ae.finishToken = function (n, o) { + (Pe.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 () { + (Pe.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); @@ -29513,7 +29575,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ? ((this.pos += 3), this.finishToken(c.ellipsis)) : (++this.pos, this.finishToken(c.dot)); }), - (Ae.readToken_slash = function () { + (Pe.readToken_slash = function () { var n = this.input.charCodeAt(this.pos + 1); return this.exprAllowed ? (++this.pos, this.readRegexp()) @@ -29521,21 +29583,21 @@ Defaulting to 2020, but this will stop working in the future.`)), ? this.finishOp(c.assign, 2) : this.finishOp(c.slash, 1); }), - (Ae.readToken_mult_modulo_exp = function (n) { + (Pe.readToken_mult_modulo_exp = function (n) { var o = this.input.charCodeAt(this.pos + 1), l = 1, - f = n === 42 ? c.star : c.modulo; + h = n === 42 ? c.star : c.modulo; return ( this.options.ecmaVersion >= 7 && n === 42 && o === 42 && (++l, - (f = c.starstar), + (h = c.starstar), (o = this.input.charCodeAt(this.pos + 2))), - o === 61 ? this.finishOp(c.assign, l + 1) : this.finishOp(f, l) + o === 61 ? this.finishOp(c.assign, l + 1) : this.finishOp(h, l) ); }), - (Ae.readToken_pipe_amp = function (n) { + (Pe.readToken_pipe_amp = function (n) { var o = this.input.charCodeAt(this.pos + 1); if (o === n) { if (this.options.ecmaVersion >= 12) { @@ -29548,13 +29610,13 @@ Defaulting to 2020, but this will stop working in the future.`)), ? this.finishOp(c.assign, 2) : this.finishOp(n === 124 ? c.bitwiseOR : c.bitwiseAND, 1); }), - (Ae.readToken_caret = function () { + (Pe.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) { + (Pe.readToken_plus_min = function (n) { var o = this.input.charCodeAt(this.pos + 1); return o === n ? o === 45 && @@ -29568,7 +29630,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ? this.finishOp(c.assign, 2) : this.finishOp(c.plusMin, 1); }), - (Ae.readToken_lt_gt = function (n) { + (Pe.readToken_lt_gt = function (n) { var o = this.input.charCodeAt(this.pos + 1), l = 1; return o === n @@ -29585,7 +29647,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ? (this.skipLineComment(4), this.skipSpace(), this.nextToken()) : (o === 61 && (l = 2), this.finishOp(c.relational, l)); }), - (Ae.readToken_eq_excl = function (n) { + (Pe.readToken_eq_excl = function (n) { var o = this.input.charCodeAt(this.pos + 1); return o === 61 ? this.finishOp( @@ -29596,7 +29658,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ? ((this.pos += 2), this.finishToken(c.arrow)) : this.finishOp(n === 61 ? c.eq : c.prefix, 1); }), - (Ae.readToken_question = function () { + (Pe.readToken_question = function () { var n = this.options.ecmaVersion; if (n >= 11) { var o = this.input.charCodeAt(this.pos + 1); @@ -29606,25 +29668,25 @@ Defaulting to 2020, but this will stop working in the future.`)), } if (o === 63) { if (n >= 12) { - var f = this.input.charCodeAt(this.pos + 2); - if (f === 61) return this.finishOp(c.assign, 3); + var h = this.input.charCodeAt(this.pos + 2); + if (h === 61) return this.finishOp(c.assign, 3); } return this.finishOp(c.coalesce, 2); } } return this.finishOp(c.question, 1); }), - (Ae.readToken_numberSign = function () { + (Pe.readToken_numberSign = function () { var n = this.options.ecmaVersion, o = 35; if ( n >= 13 && - (++this.pos, (o = this.fullCharCodeAtPos()), h(o, !0) || o === 92) + (++this.pos, (o = this.fullCharCodeAtPos()), f(o, !0) || o === 92) ) return this.finishToken(c.privateId, this.readWord1()); - this.raise(this.pos, "Unexpected character '" + nt(o) + "'"); + this.raise(this.pos, "Unexpected character '" + st(o) + "'"); }), - (Ae.getTokenFromCode = function (n) { + (Pe.getTokenFromCode = function (n) { switch (n) { case 46: return this.readToken_dot(); @@ -29695,59 +29757,59 @@ Defaulting to 2020, but this will stop working in the future.`)), case 35: return this.readToken_numberSign(); } - this.raise(this.pos, "Unexpected character '" + nt(n) + "'"); + this.raise(this.pos, "Unexpected character '" + st(n) + "'"); }), - (Ae.finishOp = function (n, o) { + (Pe.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 () { + (Pe.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); + var h = this.input.charAt(this.pos); if ( - (R.test(f) && this.raise(l, 'Unterminated regular expression'), n) + (R.test(h) && 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 === '\\'; + if (h === '[') o = !0; + else if (h === ']' && o) o = !1; + else if (h === '/' && !o) break; + n = h === '\\'; } ++this.pos; } var m = this.input.slice(l, this.pos); ++this.pos; var E = this.pos, - O = this.readWord1(); + L = this.readWord1(); this.containsEsc && this.unexpected(E); - var Y = this.regexpState || (this.regexpState = new on(this)); - Y.reset(l, m, O), + var Y = this.regexpState || (this.regexpState = new cn(this)); + Y.reset(l, m, L), this.validateRegExpFlags(Y), this.validateRegExpPattern(Y); var Q = null; try { - Q = new RegExp(m, O); + Q = new RegExp(m, L); } catch {} - return this.finishToken(c.regexp, {pattern: m, flags: O, value: Q}); + return this.finishToken(c.regexp, {pattern: m, flags: L, value: Q}); }), - (Ae.readInt = function (n, o, l) { + (Pe.readInt = function (n, o, l) { for ( - var f = this.options.ecmaVersion >= 12 && o === void 0, + var h = this.options.ecmaVersion >= 12 && o === void 0, m = l && this.input.charCodeAt(this.pos) === 48, E = this.pos, - O = 0, + L = 0, Y = 0, Q = 0, - Te = o ?? 1 / 0; - Q < Te; + ke = o ?? 1 / 0; + Q < ke; ++Q, ++this.pos ) { - var xe = this.input.charCodeAt(this.pos), - Ze = void 0; - if (f && xe === 95) { + var ge = this.input.charCodeAt(this.pos), + et = void 0; + if (h && ge === 95) { m && this.raiseRecoverable( this.pos, @@ -29763,39 +29825,39 @@ Defaulting to 2020, but this will stop working in the future.`)), this.pos, 'Numeric separator is not allowed at the first of digits' ), - (Y = xe); + (Y = ge); 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) + (ge >= 97 + ? (et = ge - 97 + 10) + : ge >= 65 + ? (et = ge - 65 + 10) + : ge >= 48 && ge <= 57 + ? (et = ge - 48) + : (et = 1 / 0), + et >= n) ) break; - (Y = xe), (O = O * n + Ze); + (Y = ge), (L = L * n + et); } return ( - f && + h && 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 + this.pos === E || (o != null && this.pos - E !== o) ? null : L ); }); - function wf(n, o) { + function Ff(n, o) { return o ? parseInt(n, 8) : parseFloat(n.replace(/_/g, '')); } - function Fc(n) { + function Gc(n) { return typeof BigInt != 'function' ? null : BigInt(n.replace(/_/g, '')); } - (Ae.readRadixNumber = function (n) { + (Pe.readRadixNumber = function (n) { var o = this.pos; this.pos += 2; var l = this.readInt(n); @@ -29804,46 +29866,46 @@ Defaulting to 2020, but this will stop working in the future.`)), 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()) && + ? ((l = Gc(this.input.slice(o, this.pos))), ++this.pos) + : f(this.fullCharCodeAtPos()) && this.raise(this.pos, 'Identifier directly after number'), this.finishToken(c.num, l) ); }), - (Ae.readNumber = function (n) { + (Pe.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)); + var h = this.input.charCodeAt(this.pos); + if (!l && !n && this.options.ecmaVersion >= 11 && h === 110) { + var m = Gc(this.input.slice(o, this.pos)); return ( ++this.pos, - h(this.fullCharCodeAtPos()) && + f(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 && + h === 46 && !l && (++this.pos, this.readInt(10), - (f = this.input.charCodeAt(this.pos))), - (f === 69 || f === 101) && + (h = this.input.charCodeAt(this.pos))), + (h === 69 || h === 101) && !l && - ((f = this.input.charCodeAt(++this.pos)), - (f === 43 || f === 45) && ++this.pos, + ((h = this.input.charCodeAt(++this.pos)), + (h === 43 || h === 45) && ++this.pos, this.readInt(10) === null && this.raise(o, 'Invalid number')), - h(this.fullCharCodeAtPos()) && + f(this.fullCharCodeAtPos()) && this.raise(this.pos, 'Identifier directly after number'); - var E = wf(this.input.slice(o, this.pos), l); + var E = Ff(this.input.slice(o, this.pos), l); return this.finishToken(c.num, E); }), - (Ae.readCodePoint = function () { + (Pe.readCodePoint = function () { var n = this.input.charCodeAt(this.pos), o; if (n === 123) { @@ -29858,23 +29920,23 @@ Defaulting to 2020, but this will stop working in the future.`)), } else o = this.readHexChar(4); return o; }), - (Ae.readString = function (n) { + (Pe.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 + var h = this.input.charCodeAt(this.pos); + if (h === n) break; + h === 92 ? ((o += this.input.slice(l, this.pos)), (o += this.readEscapedChar(!1)), (l = this.pos)) - : f === 8232 || f === 8233 + : h === 8232 || h === 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'), + : (X(h) && this.raise(this.start, 'Unterminated string constant'), ++this.pos); } return ( @@ -29882,22 +29944,22 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishToken(c.string, o) ); }); - var Bc = {}; - (Ae.tryReadTemplateToken = function () { + var zc = {}; + (Pe.tryReadTemplateToken = function () { this.inTemplateElement = !0; try { this.readTmplToken(); } catch (n) { - if (n === Bc) this.readInvalidTemplateToken(); + if (n === zc) this.readInvalidTemplateToken(); else throw n; } this.inTemplateElement = !1; }), - (Ae.invalidStringToken = function (n, o) { - if (this.inTemplateElement && this.options.ecmaVersion >= 9) throw Bc; + (Pe.invalidStringToken = function (n, o) { + if (this.inTemplateElement && this.options.ecmaVersion >= 9) throw zc; this.raise(n, o); }), - (Ae.readTmplToken = function () { + (Pe.readTmplToken = function () { for (var n = '', o = this.pos; ; ) { this.pos >= this.input.length && this.raise(this.start, 'Unterminated template'); @@ -29935,7 +29997,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } else ++this.pos; } }), - (Ae.readInvalidTemplateToken = function () { + (Pe.readInvalidTemplateToken = function () { for (; this.pos < this.input.length; this.pos++) switch (this.input[this.pos]) { case '\\': @@ -29961,7 +30023,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } this.raise(this.start, 'Unterminated template'); }), - (Ae.readEscapedChar = function (n) { + (Pe.readEscapedChar = function (n) { var o = this.input.charCodeAt(++this.pos); switch ((++this.pos, o)) { case 110: @@ -29972,7 +30034,7 @@ Defaulting to 2020, but this will stop working in the future.`)), case 120: return String.fromCharCode(this.readHexChar(2)); case 117: - return nt(this.readCodePoint()); + return st(this.readCodePoint()); case 116: return ' '; case 98: @@ -30007,16 +30069,16 @@ Defaulting to 2020, but this will stop working in the future.`)), } default: if (o >= 48 && o <= 55) { - var f = this.input.substr(this.pos - 1, 3).match(/^[0-7]+/)[0], - m = parseInt(f, 8); + var h = this.input.substr(this.pos - 1, 3).match(/^[0-7]+/)[0], + m = parseInt(h, 8); return ( - m > 255 && ((f = f.slice(0, -1)), (m = parseInt(f, 8))), - (this.pos += f.length - 1), + m > 255 && ((h = h.slice(0, -1)), (m = parseInt(h, 8))), + (this.pos += h.length - 1), (o = this.input.charCodeAt(this.pos)), - (f !== '0' || o === 56 || o === 57) && + (h !== '0' || o === 56 || o === 57) && (this.strict || n) && this.invalidStringToken( - this.pos - 1 - f.length, + this.pos - 1 - h.length, n ? 'Octal literal in template string' : 'Octal literal in strict mode' @@ -30031,7 +30093,7 @@ Defaulting to 2020, but this will stop working in the future.`)), : String.fromCharCode(o); } }), - (Ae.readHexChar = function (n) { + (Pe.readHexChar = function (n) { var o = this.pos, l = this.readInt(16, n); return ( @@ -30040,15 +30102,15 @@ Defaulting to 2020, but this will stop working in the future.`)), l ); }), - (Ae.readWord1 = function () { + (Pe.readWord1 = function () { this.containsEsc = !1; for ( - var n = '', o = !0, l = this.pos, f = this.options.ecmaVersion >= 6; + var n = '', o = !0, l = this.pos, h = this.options.ecmaVersion >= 6; this.pos < this.input.length; ) { var m = this.fullCharCodeAtPos(); - if (T(m, f)) this.pos += m <= 65535 ? 1 : 2; + if (T(m, h)) this.pos += m <= 65535 ? 1 : 2; else if (m === 92) { (this.containsEsc = !0), (n += this.input.slice(l, this.pos)); var E = this.pos; @@ -30058,95 +30120,95 @@ Defaulting to 2020, but this will stop working in the future.`)), 'Expecting Unicode escape sequence \\uXXXX' ), ++this.pos; - var O = this.readCodePoint(); - (o ? h : T)(O, f) || + var L = this.readCodePoint(); + (o ? f : T)(L, h) || this.invalidStringToken(E, 'Invalid Unicode escape'), - (n += nt(O)), + (n += st(L)), (l = this.pos); } else break; o = !1; } return n + this.input.slice(l, this.pos); }), - (Ae.readWord = function () { + (Pe.readWord = function () { var n = this.readWord1(), o = c.name; - return this.keywords.test(n) && (o = U[n]), this.finishToken(o, n); + return this.keywords.test(n) && (o = q[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, + var Xc = '8.15.0'; + ze.acorn = { + Parser: ze, + version: Xc, + defaultOptions: Nt, + Position: ut, + SourceLocation: St, + getLineInfo: qt, + Node: jn, TokenType: x, tokTypes: c, - keywordTypes: U, - TokContext: Rt, - tokContexts: Ue, + keywordTypes: q, + TokContext: Lt, + tokContexts: He, isIdentifierChar: T, - isIdentifierStart: h, - Token: xr, + isIdentifierStart: f, + Token: wr, isNewLine: X, lineBreak: R, lineBreakG: W, - nonASCIIwhitespace: pe, + nonASCIIwhitespace: he, }; - function Sf(n, o) { - return Ge.parse(n, o); + function Bf(n, o) { + return ze.parse(n, o); } - function If(n, o, l) { - return Ge.parseExpressionAt(n, o, l); + function Vf(n, o, l) { + return ze.parseExpressionAt(n, o, l); } - function Ef(n, o) { - return Ge.tokenizer(n, o); + function jf(n, o) { + return ze.tokenizer(n, o); } - (e.Node = Fn), - (e.Parser = Ge), - (e.Position = ct), - (e.SourceLocation = wt), - (e.TokContext = Rt), - (e.Token = xr), + (e.Node = jn), + (e.Parser = ze), + (e.Position = ut), + (e.SourceLocation = St), + (e.TokContext = Lt), + (e.Token = wr), (e.TokenType = x), - (e.defaultOptions = Pt), - (e.getLineInfo = $t), + (e.defaultOptions = Nt), + (e.getLineInfo = qt), (e.isIdentifierChar = T), - (e.isIdentifierStart = h), + (e.isIdentifierStart = f), (e.isNewLine = X), - (e.keywordTypes = U), + (e.keywordTypes = q), (e.lineBreak = R), (e.lineBreakG = W), - (e.nonASCIIwhitespace = pe), - (e.parse = Sf), - (e.parseExpressionAt = If), - (e.tokContexts = Ue), + (e.nonASCIIwhitespace = he), + (e.parse = Bf), + (e.parseExpressionAt = Vf), + (e.tokContexts = He), (e.tokTypes = c), - (e.tokenizer = Ef), - (e.version = Vc); + (e.tokenizer = jf), + (e.version = Xc); }); }); - var df = Z((Bo, ff) => { + var Sf = Z((qo, wf) => { (function (e, t) { - typeof Bo == 'object' && typeof ff < 'u' - ? t(Bo, hf()) + typeof qo == 'object' && typeof wf < 'u' + ? t(qo, Cf()) : 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) { + })(qo, function (e, t) { 'use strict'; var s = '\u2716'; function i(p) { return p.name === s; } function r() {} - var a = function (h, T) { + var a = function (f, T) { if ( (T === void 0 && (T = {}), - (this.toks = this.constructor.BaseParser.tokenizer(h, T)), + (this.toks = this.constructor.BaseParser.tokenizer(f, T)), (this.options = this.toks.options), (this.input = this.toks.input), (this.tok = this.last = {type: t.tokTypes.eof, start: 0, end: 0}), @@ -30178,24 +30240,24 @@ Defaulting to 2020, but this will stop working in the future.`)), ? [this.tok.start, this.tok.loc.start] : this.tok.start; }), - (a.prototype.startNodeAt = function (h) { + (a.prototype.startNodeAt = function (f) { return this.options.locations - ? new t.Node(this.toks, h[0], h[1]) - : new t.Node(this.toks, h); + ? new t.Node(this.toks, f[0], f[1]) + : new t.Node(this.toks, f); }), - (a.prototype.finishNode = function (h, T) { + (a.prototype.finishNode = function (f, 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 + (f.type = T), + (f.end = this.last.end), + this.options.locations && (f.loc.end = this.last.loc.end), + this.options.ranges && (f.range[1] = this.last.end), + f ); }), - (a.prototype.dummyNode = function (h) { + (a.prototype.dummyNode = function (f) { var T = this.startNode(); return ( - (T.type = h), + (T.type = f), (T.end = T.start), this.options.locations && (T.loc.end = T.loc.start), this.options.ranges && (T.range[1] = T.start), @@ -30209,21 +30271,21 @@ Defaulting to 2020, but this will stop working in the future.`)), ); }), (a.prototype.dummyIdent = function () { - var h = this.dummyNode('Identifier'); - return (h.name = s), h; + var f = this.dummyNode('Identifier'); + return (f.name = s), f; }), (a.prototype.dummyString = function () { - var h = this.dummyNode('Literal'); - return (h.value = h.raw = s), h; + var f = this.dummyNode('Literal'); + return (f.value = f.raw = s), f; }), - (a.prototype.eat = function (h) { - return this.tok.type === h ? (this.next(), !0) : !1; + (a.prototype.eat = function (f) { + return this.tok.type === f ? (this.next(), !0) : !1; }), - (a.prototype.isContextual = function (h) { - return this.tok.type === t.tokTypes.name && this.tok.value === h; + (a.prototype.isContextual = function (f) { + return this.tok.type === t.tokTypes.name && this.tok.value === f; }), - (a.prototype.eatContextual = function (h) { - return this.tok.value === h && this.eat(t.tokTypes.name); + (a.prototype.eatContextual = function (f) { + return this.tok.value === f && this.eat(t.tokTypes.name); }), (a.prototype.canInsertSemicolon = function () { return ( @@ -30235,10 +30297,10 @@ Defaulting to 2020, but this will stop working in the future.`)), (a.prototype.semicolon = function () { return this.eat(t.tokTypes.semi); }), - (a.prototype.expect = function (h) { - if (this.eat(h)) return !0; + (a.prototype.expect = function (f) { + if (this.eat(f)) return !0; for (var T = 1; T <= 2; T++) - if (this.lookAhead(T).type === h) { + if (this.lookAhead(T).type === f) { for (var x = 0; x < T; x++) this.next(); return !0; } @@ -30249,25 +30311,25 @@ Defaulting to 2020, but this will stop working in the future.`)), (a.prototype.popCx = function () { this.curIndent = this.context.pop(); }), - (a.prototype.lineEnd = function (h) { + (a.prototype.lineEnd = function (f) { for ( ; - h < this.input.length && !t.isNewLine(this.input.charCodeAt(h)); + f < this.input.length && !t.isNewLine(this.input.charCodeAt(f)); ) - ++h; - return h; + ++f; + return f; }), - (a.prototype.indentationAfter = function (h) { - for (var T = 0; ; ++h) { - var x = this.input.charCodeAt(h); + (a.prototype.indentationAfter = function (f) { + for (var T = 0; ; ++f) { + var x = this.input.charCodeAt(f); 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 + (a.prototype.closes = function (f, T, x, w) { + return this.tok.type === f || this.tok.type === t.tokTypes.eof ? !0 : x !== this.curLineStart && this.curIndent < T && @@ -30277,25 +30339,25 @@ Defaulting to 2020, but this will stop working in the future.`)), 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); + for (var f = this.tok.start - 1; f >= this.curLineStart; --f) { + var T = this.input.charCodeAt(f); if (T !== 9 && T !== 32) return !1; } return !0; }), - (a.prototype.extend = function (h, T) { - this[h] = T(this[h]); + (a.prototype.extend = function (f, T) { + this[f] = T(this[f]); }), (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); + for (var f = [], T = arguments.length; T--; ) f[T] = arguments[T]; + for (var x = this, w = 0; w < f.length; w++) x = f[w](x); return x; }), - (a.parse = function (h, T) { - return new this(h, T).parse(); + (a.parse = function (f, T) { + return new this(f, T).parse(); }), (a.BaseParser = t.Parser); var u = a.prototype; @@ -30330,29 +30392,29 @@ Defaulting to 2020, but this will stop working in the future.`)), } catch (S) { if (!(S instanceof SyntaxError)) throw S; var p = S.message, - h = S.raisedAt, + f = S.raisedAt, T = !0; if (/unterminated/i.test(p)) - if (((h = this.lineEnd(S.pos + 1)), /string/.test(p))) + if (((f = this.lineEnd(S.pos + 1)), /string/.test(p))) T = { start: S.pos, - end: h, + end: f, type: t.tokTypes.string, - value: this.input.slice(S.pos + 1, h), + value: this.input.slice(S.pos + 1, f), }; else if (/regular expr/i.test(p)) { - var x = this.input.slice(S.pos, h); + var x = this.input.slice(S.pos, f); try { x = new RegExp(x); } catch {} - T = {start: S.pos, end: h, type: t.tokTypes.regexp, value: x}; + T = {start: S.pos, end: f, type: t.tokTypes.regexp, value: x}; } else /template/.test(p) ? (T = { start: S.pos, - end: h, + end: f, type: t.tokTypes.template, - value: this.input.slice(S.pos, h), + value: this.input.slice(S.pos, f), }) : (T = !1); else if ( @@ -30360,20 +30422,20 @@ Defaulting to 2020, but this will stop working in the future.`)), p ) ) - for (; h < this.input.length && !d(this.input.charCodeAt(h)); ) - ++h; + for (; f < this.input.length && !d(this.input.charCodeAt(f)); ) + ++f; else if (/character escape|expected hexadecimal/i.test(p)) - for (; h < this.input.length; ) { - var w = this.input.charCodeAt(h++); + for (; f < this.input.length; ) { + var w = this.input.charCodeAt(f++); if (w === 34 || w === 39 || t.isNewLine(w)) break; } - else if (/unexpected character/i.test(p)) h++, (T = !1); + else if (/unexpected character/i.test(p)) f++, (T = !1); else if (/regular expression/i.test(p)) T = !0; else throw S; if ( - (this.resetTo(h), + (this.resetTo(f), T === !0 && - (T = {start: h, end: h, type: t.tokTypes.name, value: s}), + (T = {start: f, end: f, type: t.tokTypes.name, value: s}), T) ) return ( @@ -30389,12 +30451,12 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (u.resetTo = function (p) { (this.toks.pos = p), (this.toks.containsEsc = !1); - var h = this.input.charAt(p - 1); + var f = this.input.charAt(p - 1); if ( ((this.toks.exprAllowed = - !h || - /[[{(,;:?/*=+\-~!|&%^<>]/.test(h) || - (/[enwfd]/.test(h) && + !f || + /[[{(,;:?/*=+\-~!|&%^<>]/.test(f) || + (/[enwfd]/.test(f) && /\b(case|else|return|throw|new|in|(instance|type)?of|delete|void)$/.test( this.input.slice(p - 10, p) ))), @@ -30411,8 +30473,8 @@ Defaulting to 2020, but this will stop working in the future.`)), for (; p > this.ahead.length; ) this.ahead.push(this.readToken()); return this.ahead[p - 1]; }); - var y = a.prototype; - (y.parseTopLevel = function () { + var v = a.prototype; + (v.parseTopLevel = function () { var p = this.startNodeAt( this.options.locations ? [0, t.getLineInfo(this.input, 0)] : 0 ); @@ -30428,9 +30490,9 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'Program') ); }), - (y.parseStatement = function () { + (v.parseStatement = function () { var p = this.tok.type, - h = this.startNode(), + f = this.startNode(), T; switch ( (this.toks.isLet() && ((p = t.tokTypes._var), (T = 'let')), p) @@ -30441,29 +30503,29 @@ Defaulting to 2020, but this will stop working in the future.`)), var x = p === t.tokTypes._break; return ( this.semicolon() || this.canInsertSemicolon() - ? (h.label = null) - : ((h.label = + ? (f.label = null) + : ((f.label = this.tok.type === t.tokTypes.name ? this.parseIdent() : null), this.semicolon()), - this.finishNode(h, x ? 'BreakStatement' : 'ContinueStatement') + this.finishNode(f, x ? 'BreakStatement' : 'ContinueStatement') ); case t.tokTypes._debugger: return ( this.next(), this.semicolon(), - this.finishNode(h, 'DebuggerStatement') + this.finishNode(f, 'DebuggerStatement') ); case t.tokTypes._do: return ( this.next(), - (h.body = this.parseStatement()), - (h.test = this.eat(t.tokTypes._while) + (f.body = this.parseStatement()), + (f.test = this.eat(t.tokTypes._while) ? this.parseParenExpression() : this.dummyIdent()), this.semicolon(), - this.finishNode(h, 'DoWhileStatement') + this.finishNode(f, 'DoWhileStatement') ); case t.tokTypes._for: this.next(); @@ -30474,71 +30536,71 @@ Defaulting to 2020, but this will stop working in the future.`)), this.expect(t.tokTypes.parenL), this.tok.type === t.tokTypes.semi) ) - return this.parseFor(h, null); + return this.parseFor(f, null); var S = this.toks.isLet(), A = this.toks.isAwaitUsing(!0), - U = !A && this.toks.isUsing(!0); + q = !A && this.toks.isUsing(!0); if ( S || this.tok.type === t.tokTypes._var || this.tok.type === t.tokTypes._const || - U || + q || A ) { var M = S ? 'let' - : U + : q ? 'using' : A ? 'await using' : this.tok.value, c = this.startNode(); return ( - U || A + q || 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) + (f.await = w), + this.parseForIn(f, c)) + : this.parseFor(f, 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); + (f.await = w), + this.parseForIn(f, this.toAssignable(R))) + : this.parseFor(f, R); case t.tokTypes._function: - return this.next(), this.parseFunction(h, !0); + return this.next(), this.parseFunction(f, !0); case t.tokTypes._if: return ( this.next(), - (h.test = this.parseParenExpression()), - (h.consequent = this.parseStatement()), - (h.alternate = this.eat(t.tokTypes._else) + (f.test = this.parseParenExpression()), + (f.consequent = this.parseStatement()), + (f.alternate = this.eat(t.tokTypes._else) ? this.parseStatement() : null), - this.finishNode(h, 'IfStatement') + this.finishNode(f, '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') + ? (f.argument = null) + : ((f.argument = this.parseExpression()), this.semicolon()), + this.finishNode(f, 'ReturnStatement') ); case t.tokTypes._switch: var W = this.curIndent, X = this.curLineStart; this.next(), - (h.discriminant = this.parseParenExpression()), - (h.cases = []), + (f.discriminant = this.parseParenExpression()), + (f.cases = []), this.pushCx(), this.expect(t.tokTypes.braceL); for (var ie; !this.closes(t.tokTypes.braceR, W, X, !0); ) @@ -30546,16 +30608,16 @@ Defaulting to 2020, but this will stop working in the future.`)), this.tok.type === t.tokTypes._case || this.tok.type === t.tokTypes._default ) { - var pe = this.tok.type === t.tokTypes._case; + var he = this.tok.type === t.tokTypes._case; ie && this.finishNode(ie, 'SwitchCase'), - h.cases.push((ie = this.startNode())), + f.cases.push((ie = this.startNode())), (ie.consequent = []), this.next(), - pe ? (ie.test = this.parseExpression()) : (ie.test = null), + he ? (ie.test = this.parseExpression()) : (ie.test = null), this.expect(t.tokTypes.colon); } else ie || - (h.cases.push((ie = this.startNode())), + (f.cases.push((ie = this.startNode())), (ie.consequent = []), (ie.test = null)), ie.consequent.push(this.parseStatement()); @@ -30563,20 +30625,20 @@ Defaulting to 2020, but this will stop working in the future.`)), ie && this.finishNode(ie, 'SwitchCase'), this.popCx(), this.eat(t.tokTypes.braceR), - this.finishNode(h, 'SwitchStatement') + this.finishNode(f, 'SwitchStatement') ); case t.tokTypes._throw: return ( this.next(), - (h.argument = this.parseExpression()), + (f.argument = this.parseExpression()), this.semicolon(), - this.finishNode(h, 'ThrowStatement') + this.finishNode(f, 'ThrowStatement') ); case t.tokTypes._try: if ( (this.next(), - (h.block = this.parseBlock()), - (h.handler = null), + (f.block = this.parseBlock()), + (f.handler = null), this.tok.type === t.tokTypes._catch) ) { var ae = this.startNode(); @@ -30586,47 +30648,47 @@ Defaulting to 2020, but this will stop working in the future.`)), this.expect(t.tokTypes.parenR)) : (ae.param = null), (ae.body = this.parseBlock()), - (h.handler = this.finishNode(ae, 'CatchClause')); + (f.handler = this.finishNode(ae, 'CatchClause')); } return ( - (h.finalizer = this.eat(t.tokTypes._finally) + (f.finalizer = this.eat(t.tokTypes._finally) ? this.parseBlock() : null), - !h.handler && !h.finalizer - ? h.block - : this.finishNode(h, 'TryStatement') + !f.handler && !f.finalizer + ? f.block + : this.finishNode(f, 'TryStatement') ); case t.tokTypes._var: case t.tokTypes._const: - return this.parseVar(h, !1, T || this.tok.value); + return this.parseVar(f, !1, T || this.tok.value); case t.tokTypes._while: return ( this.next(), - (h.test = this.parseParenExpression()), - (h.body = this.parseStatement()), - this.finishNode(h, 'WhileStatement') + (f.test = this.parseParenExpression()), + (f.body = this.parseStatement()), + this.finishNode(f, 'WhileStatement') ); case t.tokTypes._with: return ( this.next(), - (h.object = this.parseParenExpression()), - (h.body = this.parseStatement()), - this.finishNode(h, 'WithStatement') + (f.object = this.parseParenExpression()), + (f.body = this.parseStatement()), + this.finishNode(f, 'WithStatement') ); case t.tokTypes.braceL: return this.parseBlock(); case t.tokTypes.semi: - return this.next(), this.finishNode(h, 'EmptyStatement'); + return this.next(), this.finishNode(f, '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) + var We = this.lookAhead(1).type; + if (We === t.tokTypes.parenL || We === t.tokTypes.dot) return ( - (h.expression = this.parseExpression()), + (f.expression = this.parseExpression()), this.semicolon(), - this.finishNode(h, 'ExpressionStatement') + this.finishNode(f, 'ExpressionStatement') ); } return this.parseImport(); @@ -30634,33 +30696,33 @@ Defaulting to 2020, but this will stop working in the future.`)), 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'); + return this.next(), this.next(), this.parseFunction(f, !0, !0); + if (this.toks.isUsing(!1)) return this.parseVar(f, !1, 'using'); if (this.toks.isAwaitUsing(!1)) - return this.next(), this.parseVar(h, !1, 'await using'); + return this.next(), this.parseVar(f, !1, 'await using'); var qe = this.parseExpression(); return i(qe) ? (this.next(), this.tok.type === t.tokTypes.eof - ? this.finishNode(h, 'EmptyStatement') + ? this.finishNode(f, '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), + ? ((f.body = this.parseStatement()), + (f.label = qe), + this.finishNode(f, 'LabeledStatement')) + : ((f.expression = qe), this.semicolon(), - this.finishNode(h, 'ExpressionStatement')); + this.finishNode(f, 'ExpressionStatement')); } }), - (y.parseBlock = function () { + (v.parseBlock = function () { var p = this.startNode(); this.pushCx(), this.expect(t.tokTypes.braceL); - var h = this.curIndent, + var f = this.curIndent, T = this.curLineStart; - for (p.body = []; !this.closes(t.tokTypes.braceR, h, T, !0); ) + for (p.body = []; !this.closes(t.tokTypes.braceR, f, T, !0); ) p.body.push(this.parseStatement()); return ( this.popCx(), @@ -30668,9 +30730,9 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'BlockStatement') ); }), - (y.parseFor = function (p, h) { + (v.parseFor = function (p, f) { return ( - (p.init = h), + (p.init = f), (p.test = p.update = null), this.eat(t.tokTypes.semi) && this.tok.type !== t.tokTypes.semi && @@ -30684,14 +30746,14 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'ForStatement') ); }), - (y.parseForIn = function (p, h) { + (v.parseForIn = function (p, f) { var T = this.tok.type === t.tokTypes._in ? 'ForInStatement' : 'ForOfStatement'; return ( this.next(), - (p.left = h), + (p.left = f), (p.right = this.parseExpression()), this.popCx(), this.expect(t.tokTypes.parenR), @@ -30699,7 +30761,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, T) ); }), - (y.parseVar = function (p, h, T) { + (v.parseVar = function (p, f, T) { (p.kind = T), this.next(), (p.declarations = []); do { var x = this.startNode(); @@ -30708,7 +30770,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ? this.toAssignable(this.parseExprAtom(), !0) : this.parseIdent()), (x.init = this.eat(t.tokTypes.eq) - ? this.parseMaybeAssign(h) + ? this.parseMaybeAssign(f) : null), p.declarations.push(this.finishNode(x, 'VariableDeclarator')); } while (this.eat(t.tokTypes.comma)); @@ -30718,22 +30780,22 @@ Defaulting to 2020, but this will stop working in the future.`)), p.declarations.push(this.finishNode(w, 'VariableDeclarator')); } return ( - h || this.semicolon(), this.finishNode(p, 'VariableDeclaration') + f || this.semicolon(), this.finishNode(p, 'VariableDeclaration') ); }), - (y.parseClass = function (p) { - var h = this.startNode(); + (v.parseClass = function (p) { + var f = this.startNode(); this.next(), this.tok.type === t.tokTypes.name - ? (h.id = this.parseIdent()) + ? (f.id = this.parseIdent()) : p === !0 - ? (h.id = this.dummyIdent()) - : (h.id = null), - (h.superClass = this.eat(t.tokTypes._extends) + ? (f.id = this.dummyIdent()) + : (f.id = null), + (f.superClass = this.eat(t.tokTypes._extends) ? this.parseExpression() : null), - (h.body = this.startNode()), - (h.body.body = []), + (f.body = this.startNode()), + (f.body.body = []), this.pushCx(); var T = this.curIndent + 1, x = this.curLineStart; @@ -30745,7 +30807,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ) { var w = this.parseClassElement(); - w && h.body.body.push(w); + w && f.body.body.push(w); } return ( this.popCx(), @@ -30754,25 +30816,25 @@ Defaulting to 2020, but this will stop working in the future.`)), this.options.locations && (this.last.loc.end = this.tok.loc.start)), this.semicolon(), - this.finishNode(h.body, 'ClassBody'), - this.finishNode(h, p ? 'ClassDeclaration' : 'ClassExpression') + this.finishNode(f.body, 'ClassBody'), + this.finishNode(f, p ? 'ClassDeclaration' : 'ClassExpression') ); }), - (y.parseClassElement = function () { + (v.parseClassElement = function () { if (this.eat(t.tokTypes.semi)) return null; var p = this.options, - h = p.ecmaVersion, + f = p.ecmaVersion, T = p.locations, x = this.curIndent, w = this.curLineStart, S = this.startNode(), A = '', - U = !1, + q = !1, M = !1, c = 'method', R = !1; if (this.eatContextual('static')) { - if (h >= 13 && this.eat(t.tokTypes.braceL)) + if (f >= 13 && this.eat(t.tokTypes.braceL)) return this.parseClassStaticBlock(S), S; this.isClassElementNameStart() || this.toks.type === t.tokTypes.star ? (R = !0) @@ -30781,7 +30843,7 @@ Defaulting to 2020, but this will stop working in the future.`)), if ( ((S.static = R), !A && - h >= 8 && + f >= 8 && this.eatContextual('async') && ((this.isClassElementNameStart() || this.toks.type === t.tokTypes.star) && @@ -30790,7 +30852,7 @@ Defaulting to 2020, but this will stop working in the future.`)), : (A = 'async')), !A) ) { - U = this.eat(t.tokTypes.star); + q = this.eat(t.tokTypes.star); var W = this.toks.value; (this.eatContextual('get') || this.eatContextual('set')) && (this.isClassElementNameStart() ? (c = W) : (A = W)); @@ -30811,22 +30873,22 @@ Defaulting to 2020, but this will stop working in the future.`)), null ); if ( - h < 13 || + f < 13 || this.toks.type === t.tokTypes.parenL || c !== 'method' || - U || + q || M ) { var X = !S.computed && !S.static && - !U && + !q && !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)), + (S.value = this.parseMethod(q, M)), this.finishNode(S, 'MethodDefinition'); } else { if (this.eat(t.tokTypes.eq)) @@ -30838,24 +30900,24 @@ Defaulting to 2020, but this will stop working in the future.`)), S.value = null; else { var ie = this.inAsync, - pe = this.inGenerator; + he = this.inGenerator; (this.inAsync = !1), (this.inGenerator = !1), (S.value = this.parseMaybeAssign()), (this.inAsync = ie), - (this.inGenerator = pe); + (this.inGenerator = he); } else S.value = null; this.semicolon(), this.finishNode(S, 'PropertyDefinition'); } return S; }), - (y.parseClassStaticBlock = function (p) { - var h = this.curIndent, + (v.parseClassStaticBlock = function (p) { + var f = this.curIndent, T = this.curLineStart; for ( p.body = [], this.pushCx(); - !this.closes(t.tokTypes.braceR, h, T, !0); + !this.closes(t.tokTypes.braceR, f, T, !0); ) p.body.push(this.parseStatement()); @@ -30865,15 +30927,15 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'StaticBlock') ); }), - (y.isClassElementNameStart = function () { + (v.isClassElementNameStart = function () { return this.toks.isClassElementNameStart(); }), - (y.parseClassElementName = function (p) { + (v.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) { + (v.parseFunction = function (p, f, T) { var x = this.inAsync, w = this.inGenerator, S = this.inFunction; @@ -30884,7 +30946,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.options.ecmaVersion >= 8 && (p.async = !!T), this.tok.type === t.tokTypes.name ? (p.id = this.parseIdent()) - : h === !0 && (p.id = this.dummyIdent()), + : f === !0 && (p.id = this.dummyIdent()), (this.inAsync = p.async), (this.inGenerator = p.generator), (this.inFunction = !0), @@ -30894,10 +30956,10 @@ Defaulting to 2020, but this will stop working in the future.`)), (this.inAsync = x), (this.inGenerator = w), (this.inFunction = S), - this.finishNode(p, h ? 'FunctionDeclaration' : 'FunctionExpression') + this.finishNode(p, f ? 'FunctionDeclaration' : 'FunctionExpression') ); }), - (y.parseExport = function () { + (v.parseExport = function () { var p = this.startNode(); if ((this.next(), this.eat(t.tokTypes.star))) return ( @@ -30914,15 +30976,15 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'ExportAllDeclaration') ); if (this.eat(t.tokTypes._default)) { - var h; + var f; if ( this.tok.type === t.tokTypes._function || - (h = this.toks.isAsyncFunction()) + (f = this.toks.isAsyncFunction()) ) { var T = this.startNode(); this.next(), - h && this.next(), - (p.declaration = this.parseFunction(T, 'nullableID', h)); + f && this.next(), + (p.declaration = this.parseFunction(T, 'nullableID', f)); } else this.tok.type === t.tokTypes._class ? (p.declaration = this.parseClass('nullableID')) @@ -30947,17 +31009,17 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'ExportNamedDeclaration') ); }), - (y.parseImport = function () { + (v.parseImport = function () { var p = this.startNode(); if ((this.next(), this.tok.type === t.tokTypes.string)) (p.specifiers = []), (p.source = this.parseExprAtom()); else { - var h; + var f; this.tok.type === t.tokTypes.name && this.tok.value !== 'from' && - ((h = this.startNode()), - (h.local = this.parseIdent()), - this.finishNode(h, 'ImportDefaultSpecifier'), + ((f = this.startNode()), + (f.local = this.parseIdent()), + this.finishNode(f, 'ImportDefaultSpecifier'), this.eat(t.tokTypes.comma)), (p.specifiers = this.parseImportSpecifiers()), (p.source = @@ -30965,7 +31027,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.tok.type === t.tokTypes.string ? this.parseExprAtom() : this.dummyString()), - h && p.specifiers.unshift(h); + f && p.specifiers.unshift(f); } return ( this.options.ecmaVersion >= 16 && @@ -30974,15 +31036,15 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'ImportDeclaration') ); }), - (y.parseImportSpecifiers = function () { + (v.parseImportSpecifiers = function () { var p = []; if (this.tok.type === t.tokTypes.star) { - var h = this.startNode(); + var f = this.startNode(); this.next(), - (h.local = this.eatContextual('as') + (f.local = this.eatContextual('as') ? this.parseIdent() : this.dummyIdent()), - p.push(this.finishNode(h, 'ImportNamespaceSpecifier')); + p.push(this.finishNode(f, 'ImportNamespaceSpecifier')); } else { var T = this.curIndent, x = this.curLineStart, @@ -31021,10 +31083,10 @@ Defaulting to 2020, but this will stop working in the future.`)), } return p; }), - (y.parseWithClause = function () { + (v.parseWithClause = function () { var p = []; if (!this.eat(t.tokTypes._with)) return p; - var h = this.curIndent, + var f = this.curIndent, T = this.curLineStart, x = this.nextLineStart; for ( @@ -31033,7 +31095,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.curLineStart > x && (x = this.curLineStart); !this.closes( t.tokTypes.braceR, - h + (this.curLineStart <= x ? 1 : 0), + f + (this.curLineStart <= x ? 1 : 0), T ); @@ -31060,9 +31122,9 @@ Defaulting to 2020, but this will stop working in the future.`)), } return this.eat(t.tokTypes.braceR), this.popCx(), p; }), - (y.parseExportSpecifierList = function () { + (v.parseExportSpecifierList = function () { var p = [], - h = this.curIndent, + f = this.curIndent, T = this.curLineStart, x = this.nextLineStart; for ( @@ -31071,7 +31133,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.curLineStart > x && (x = this.curLineStart); !this.closes( t.tokTypes.braceR, - h + (this.curLineStart <= x ? 1 : 0), + f + (this.curLineStart <= x ? 1 : 0), T ) && !this.isContextual('from'); @@ -31087,7 +31149,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } return this.eat(t.tokTypes.braceR), this.popCx(), p; }), - (y.parseModuleExportName = function () { + (v.parseModuleExportName = function () { return this.options.ecmaVersion >= 13 && this.tok.type === t.tokTypes.string ? this.parseExprAtom() @@ -31107,10 +31169,10 @@ Defaulting to 2020, but this will stop working in the future.`)), } }), (g.parseExpression = function (p) { - var h = this.storeCurrentPos(), + var f = this.storeCurrentPos(), T = this.parseMaybeAssign(p); if (this.tok.type === t.tokTypes.comma) { - var x = this.startNodeAt(h); + var x = this.startNodeAt(f); for (x.expressions = [T]; this.eat(t.tokTypes.comma); ) x.expressions.push(this.parseMaybeAssign(p)); return this.finishNode(x, 'SequenceExpression'); @@ -31124,16 +31186,16 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (g.parseMaybeAssign = function (p) { if (this.inGenerator && this.toks.isContextual('yield')) { - var h = this.startNode(); + var f = 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') + ? ((f.delegate = !1), (f.argument = null)) + : ((f.delegate = this.eat(t.tokTypes.star)), + (f.argument = this.parseMaybeAssign())), + this.finishNode(f, 'YieldExpression') ); } var T = this.storeCurrentPos(), @@ -31154,10 +31216,10 @@ Defaulting to 2020, but this will stop working in the future.`)), return x; }), (g.parseMaybeConditional = function (p) { - var h = this.storeCurrentPos(), + var f = this.storeCurrentPos(), T = this.parseExprOps(p); if (this.eat(t.tokTypes.question)) { - var x = this.startNodeAt(h); + var x = this.startNodeAt(f); return ( (x.test = T), (x.consequent = this.parseMaybeAssign()), @@ -31170,12 +31232,12 @@ Defaulting to 2020, but this will stop working in the future.`)), return T; }), (g.parseExprOps = function (p) { - var h = this.storeCurrentPos(), + var f = this.storeCurrentPos(), T = this.curIndent, x = this.curLineStart; - return this.parseExprOp(this.parseMaybeUnary(!1), h, -1, p, T, x); + return this.parseExprOp(this.parseMaybeUnary(!1), f, -1, p, T, x); }), - (g.parseExprOp = function (p, h, T, x, w, S) { + (g.parseExprOp = function (p, f, T, x, w, S) { if ( this.curLineStart !== S && this.curIndent < w && @@ -31184,19 +31246,19 @@ Defaulting to 2020, but this will stop working in the future.`)), 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); + var q = this.startNodeAt(f); if ( - ((U.left = p), - (U.operator = this.tok.value), + ((q.left = p), + (q.operator = this.tok.value), this.next(), this.curLineStart !== S && this.curIndent < w && this.tokenStartsLine()) ) - U.right = this.dummyIdent(); + q.right = this.dummyIdent(); else { var M = this.storeCurrentPos(); - U.right = this.parseExprOp( + q.right = this.parseExprOp( this.parseMaybeUnary(!1), M, A, @@ -31207,18 +31269,18 @@ Defaulting to 2020, but this will stop working in the future.`)), } return ( this.finishNode( - U, - /&&|\|\||\?\?/.test(U.operator) + q, + /&&|\|\||\?\?/.test(q.operator) ? 'LogicalExpression' : 'BinaryExpression' ), - this.parseExprOp(U, h, T, x, w, S) + this.parseExprOp(q, f, T, x, w, S) ); } return p; }), (g.parseMaybeUnary = function (p) { - var h = this.storeCurrentPos(), + var f = this.storeCurrentPos(), T; if ( this.options.ecmaVersion >= 8 && @@ -31254,7 +31316,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.tok.type.postfix && !this.canInsertSemicolon(); ) { - var A = this.startNodeAt(h); + var A = this.startNodeAt(f); (A.operator = this.tok.value), (A.prefix = !1), (A.argument = this.checkLVal(T)), @@ -31262,12 +31324,12 @@ Defaulting to 2020, but this will stop working in the future.`)), (T = this.finishNode(A, 'UpdateExpression')); } if (!p && this.eat(t.tokTypes.starstar)) { - var U = this.startNodeAt(h); + var q = this.startNodeAt(f); return ( - (U.operator = '**'), - (U.left = T), - (U.right = this.parseMaybeUnary(!1)), - this.finishNode(U, 'BinaryExpression') + (q.operator = '**'), + (q.left = T), + (q.right = this.parseMaybeUnary(!1)), + this.finishNode(q, 'BinaryExpression') ); } return T; @@ -31282,7 +31344,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.curLineStart ); }), - (g.parseSubscripts = function (p, h, T, x, w) { + (g.parseSubscripts = function (p, f, T, x, w) { for (var S = this.options.ecmaVersion >= 11, A = !1; ; ) { if ( this.curLineStart !== w && @@ -31291,7 +31353,7 @@ Defaulting to 2020, but this will stop working in the future.`)), ) if (this.tok.type === t.tokTypes.dot && this.curIndent === x) --x; else break; - var U = + var q = p.type === 'Identifier' && p.name === 'async' && !this.canInsertSemicolon(), @@ -31304,7 +31366,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.tok.type !== t.tokTypes.backQuote) || this.eat(t.tokTypes.dot)) ) { - var c = this.startNodeAt(h); + var c = this.startNodeAt(f); (c.object = p), this.curLineStart !== w && this.curIndent <= x && @@ -31317,7 +31379,7 @@ Defaulting to 2020, but this will stop working in the future.`)), (p = this.finishNode(c, 'MemberExpression')); } else if (this.tok.type === t.tokTypes.bracketL) { this.pushCx(), this.next(); - var R = this.startNodeAt(h); + var R = this.startNodeAt(f); (R.object = p), (R.property = this.parseExpression()), (R.computed = !0), @@ -31327,23 +31389,23 @@ Defaulting to 2020, but this will stop working in the future.`)), (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); + if (q && this.eat(t.tokTypes.arrow)) + return this.parseArrowExpression(this.startNodeAt(f), W, !0); + var X = this.startNodeAt(f); (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); + var ie = this.startNodeAt(f); (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')); + var he = this.startNodeAt(f); + (he.expression = p), (p = this.finishNode(he, 'ChainExpression')); } return p; }), @@ -31352,9 +31414,9 @@ Defaulting to 2020, but this will stop working in the future.`)), switch (this.tok.type) { case t.tokTypes._this: case t.tokTypes._super: - var h = + var f = this.tok.type === t.tokTypes._this ? 'ThisExpression' : 'Super'; - return (p = this.startNode()), this.next(), this.finishNode(p, h); + return (p = this.startNode()), this.next(), this.finishNode(p, f); case t.tokTypes.name: var T = this.storeCurrentPos(), x = this.parseIdent(), @@ -31412,11 +31474,11 @@ Defaulting to 2020, but this will stop working in the future.`)), case t.tokTypes.parenL: var A = this.storeCurrentPos(); this.next(); - var U = this.parseExpression(); + var q = this.parseExpression(); if ( (this.expect(t.tokTypes.parenR), this.eat(t.tokTypes.arrow)) ) { - var M = U.expressions || [U]; + var M = q.expressions || [q]; return ( M.length && i(M[M.length - 1]) && M.pop(), this.parseArrowExpression(this.startNodeAt(A), M) @@ -31424,10 +31486,10 @@ Defaulting to 2020, but this will stop working in the future.`)), } if (this.options.preserveParens) { var c = this.startNodeAt(A); - (c.expression = U), - (U = this.finishNode(c, 'ParenthesizedExpression')); + (c.expression = q), + (q = this.finishNode(c, 'ParenthesizedExpression')); } - return U; + return q; case t.tokTypes.bracketL: return ( (p = this.startNode()), @@ -31458,21 +31520,21 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (g.parseExprImport = function () { var p = this.startNode(), - h = this.parseIdent(!0); + f = 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); + return (p.meta = f), this.parseImportMeta(p); default: return (p.name = 'import'), this.finishNode(p, 'Identifier'); } }), (g.parseDynamicImport = function (p) { - var h = this.parseExprList(t.tokTypes.parenR); + var f = this.parseExprList(t.tokTypes.parenR); return ( - (p.source = h[0] || this.dummyString()), - (p.options = h[1] || null), + (p.source = f[0] || this.dummyString()), + (p.options = f[1] || null), this.finishNode(p, 'ImportExpression') ); }), @@ -31485,7 +31547,7 @@ Defaulting to 2020, but this will stop working in the future.`)), }), (g.parseNew = function () { var p = this.startNode(), - h = this.curIndent, + f = this.curIndent, T = this.curLineStart, x = this.parseIdent(!0); if (this.options.ecmaVersion >= 6 && this.eat(t.tokTypes.dot)) @@ -31500,7 +31562,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.parseExprAtom(), w, !0, - h, + f, T )), this.tok.type === t.tokTypes.parenL @@ -31530,17 +31592,17 @@ Defaulting to 2020, but this will stop working in the future.`)), (g.parseTemplate = function () { var p = this.startNode(); this.next(), (p.expressions = []); - var h = this.parseTemplateElement(); - for (p.quasis = [h]; !h.tail; ) + var f = this.parseTemplateElement(); + for (p.quasis = [f]; !f.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); + ? (f = this.parseTemplateElement()) + : ((f = this.startNode()), + (f.value = {cooked: '', raw: ''}), + (f.tail = !0), + this.finishNode(f, 'TemplateElement')), + p.quasis.push(f); return ( this.expect(t.tokTypes.backQuote), this.finishNode(p, 'TemplateLiteral') @@ -31549,13 +31611,13 @@ Defaulting to 2020, but this will stop working in the future.`)), (g.parseObj = function () { var p = this.startNode(); (p.properties = []), this.pushCx(); - var h = this.curIndent + 1, + var f = 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); + this.curIndent + 1 < f && + ((f = this.curIndent), (T = this.curLineStart)); + !this.closes(t.tokTypes.braceR, f, T); ) { var x = this.startNode(), @@ -31615,11 +31677,11 @@ Defaulting to 2020, but this will stop working in the future.`)), 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')); + var q = this.startNodeAt(A); + (q.operator = '='), + (q.left = x.key), + (q.right = this.parseMaybeAssign()), + (x.value = this.finishNode(q, 'AssignmentExpression')); } else x.value = x.key; else x.value = this.dummyIdent(); x.shorthand = !0; @@ -31644,12 +31706,12 @@ Defaulting to 2020, but this will stop working in the future.`)), this.expect(t.tokTypes.bracketR); return; } else p.computed = !1; - var h = + var f = this.tok.type === t.tokTypes.num || this.tok.type === t.tokTypes.string ? this.parseExprAtom() : this.parseIdent(); - p.key = h || this.dummyIdent(); + p.key = f || this.dummyIdent(); }), (g.parsePropertyAccessor = function () { if (this.tok.type === t.tokTypes.name || this.tok.type.keyword) @@ -31664,8 +31726,8 @@ Defaulting to 2020, but this will stop working in the future.`)), : 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'); + var f = this.startNode(); + return this.next(), (f.name = p), this.finishNode(f, 'Identifier'); }), (g.parsePrivateIdent = function () { var p = this.startNode(); @@ -31682,39 +31744,39 @@ Defaulting to 2020, but this will stop working in the future.`)), ((p.generator = !1), (p.expression = !1)), this.options.ecmaVersion >= 8 && (p.async = !1); }), - (g.toAssignable = function (p, h) { + (g.toAssignable = function (p, f) { if ( !( !p || p.type === 'Identifier' || - (p.type === 'MemberExpression' && !h) + (p.type === 'MemberExpression' && !f) ) ) if (p.type === 'ParenthesizedExpression') - this.toAssignable(p.expression, h); + this.toAssignable(p.expression, f); 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); + this.toAssignable(w, f); } } else if (p.type === 'ArrayExpression') - (p.type = 'ArrayPattern'), this.toAssignableList(p.elements, h); - else if (p.type === 'Property') this.toAssignable(p.value, h); + (p.type = 'ArrayPattern'), this.toAssignableList(p.elements, f); + else if (p.type === 'Property') this.toAssignable(p.value, f); else if (p.type === 'SpreadElement') - (p.type = 'RestElement'), this.toAssignable(p.argument, h); + (p.type = 'RestElement'), this.toAssignable(p.argument, f); else if (p.type === 'AssignmentExpression') (p.type = 'AssignmentPattern'), delete p.operator; else return this.dummyIdent(); } return p; }), - (g.toAssignableList = function (p, h) { + (g.toAssignableList = function (p, f) { for (var T = 0, x = p; T < x.length; T += 1) { var w = x[T]; - this.toAssignable(w, h); + this.toAssignable(w, f); } return p; }), @@ -31724,7 +31786,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.toAssignableList(p, !0) ); }), - (g.parseMethod = function (p, h) { + (g.parseMethod = function (p, f) { var T = this.startNode(), x = this.inAsync, w = this.inGenerator, @@ -31732,7 +31794,7 @@ Defaulting to 2020, but this will stop working in the future.`)), return ( this.initFunction(T), this.options.ecmaVersion >= 6 && (T.generator = !!p), - this.options.ecmaVersion >= 8 && (T.async = !!h), + this.options.ecmaVersion >= 8 && (T.async = !!f), (this.inAsync = T.async), (this.inGenerator = T.generator), (this.inFunction = !0), @@ -31745,7 +31807,7 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(T, 'FunctionExpression') ); }), - (g.parseArrowExpression = function (p, h, T) { + (g.parseArrowExpression = function (p, f, T) { var x = this.inAsync, w = this.inGenerator, S = this.inFunction; @@ -31755,7 +31817,7 @@ Defaulting to 2020, but this will stop working in the future.`)), (this.inAsync = p.async), (this.inGenerator = !1), (this.inFunction = !0), - (p.params = this.toAssignableList(h, !0)), + (p.params = this.toAssignableList(f, !0)), (p.expression = this.tok.type !== t.tokTypes.braceL), p.expression ? (p.body = this.parseMaybeAssign()) @@ -31767,14 +31829,14 @@ Defaulting to 2020, but this will stop working in the future.`)), this.finishNode(p, 'ArrowFunctionExpression') ); }), - (g.parseExprList = function (p, h) { + (g.parseExprList = function (p, f) { 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()); + w.push(f ? null : this.dummyIdent()); continue; } var S = this.parseMaybeAssign(); @@ -31802,19 +31864,19 @@ Defaulting to 2020, but this will stop working in the future.`)), ); }), (t.defaultOptions.tabSize = 4); - function L(p, h) { - return a.parse(p, h); + function O(p, f) { + return a.parse(p, f); } - (e.LooseParser = a), (e.isDummy = i), (e.parse = L); + (e.LooseParser = a), (e.isDummy = i), (e.parse = O); }); }); - var Vo = Li(), - Ug = Jc(), - dr = e1(), - Hg = uf(), - Tf = df(), - Os = null; - function kf() { + var Uo = Di(), + i_ = au(), + vr = h1(), + r_ = _f(), + Af = Sf(), + Fs = null; + function Pf() { return new Proxy( {}, { @@ -31829,17 +31891,17 @@ Defaulting to 2020, but this will stop working in the future.`)), } ); } - var Nc = {}; - function mf(e, t, s) { - var i = dr.registerServerReference(e, t, s), + var $c = {}; + function If(e, t, s) { + var i = vr.registerServerReference(e, t, s), r = t + '#' + s; - return (Nc[r] = e), i; + return ($c[r] = e), i; } - function Wg(e) { + function o_(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; + var t = Af.parse(e, {ecmaVersion: '2024', sourceType: 'source'}).body; } catch { return null; } @@ -31851,11 +31913,11 @@ Defaulting to 2020, but this will stop working in the future.`)), } return null; } - function Gg(e) { + function a_(e) { if (e.indexOf('use server') === -1) return e; var t; try { - t = Tf.parse(e, {ecmaVersion: '2024', sourceType: 'source'}); + t = Af.parse(e, {ecmaVersion: '2024', sourceType: 'source'}); } catch { return e; } @@ -31869,21 +31931,21 @@ Defaulting to 2020, but this will stop working in the future.`)), 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') { + var q = S[A]; + if (q.type !== 'ExpressionStatement') break; + if (q.directive === 'use server') { s.push({ funcStart: T.start, funcEnd: T.end, - dStart: U.start, - dEnd: U.end, + dStart: q.start, + dEnd: q.end, name: T.id ? T.id.name : 'action' + i, isDecl: T.type === 'FunctionDeclaration', }), i++; return; } - if (!U.directive) break; + if (!q.directive) break; } var M = w ? x + 1 : x; for (var c in T) @@ -31908,8 +31970,8 @@ Defaulting to 2020, but this will stop working in the future.`)), }); 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 && + var d = s[u], v = d.dEnd, g = a.charAt(v); + v < a.length && (g === ' ' || g === ` @@ -31918,18 +31980,18 @@ Defaulting to 2020, but this will stop working in the future.`)), 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); + v++, (g = a.charAt(v)); + a = a.slice(0, d.dStart) + a.slice(v); + var O = v - d.dStart, + p = d.funcEnd - O, + f = a.slice(d.funcStart, p); d.isDecl ? (a = a.slice(0, d.funcStart) + 'var ' + d.name + ' = __rsa(' + - h + + f + ", '" + d.name + "');" + @@ -31937,7 +31999,7 @@ Defaulting to 2020, but this will stop working in the future.`)), : (a = a.slice(0, d.funcStart) + '__rsa(' + - h + + f + ", '" + d.name + "')" + @@ -31945,7 +32007,7 @@ Defaulting to 2020, but this will stop working in the future.`)), } return a; } - function zg(e, t) { + function l_(e, t) { if (!t.startsWith('.')) return t; var s = e.split('/'); s.pop(); @@ -31959,31 +32021,31 @@ Defaulting to 2020, but this will stop working in the future.`)), } return s.join('/'); } - function Xg(e) { - Nc = {}; - var t = {react: Vo, 'react/jsx-runtime': Ug}, + function c_(e) { + $c = {}; + var t = {react: Uo, 'react/jsx-runtime': i_}, s = {}, i = null; if ( - (Object.keys(e).forEach(function (h) { + (Object.keys(e).forEach(function (f) { if (!i) try { - s[h] = Hg.transform(e[h], { + s[f] = r_.transform(e[f], { transforms: ['jsx', 'imports'], jsxRuntime: 'automatic', production: !0, }).code; } catch (T) { - i = h + ': ' + (T.message || String(T)); + i = f + ': ' + (T.message || String(T)); } }), i) ) return {type: 'error', error: i}; - function r(h, T) { + function r(f, T) { if (t[T]) return T; if (T.startsWith('.')) { - var x = zg(h, T); + var x = l_(f, 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]; @@ -31994,53 +32056,53 @@ Defaulting to 2020, but this will stop working in the future.`)), } 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]); + function d(f) { + if (t[f]) return t[f]; + if (!s[f]) throw new Error('Module "' + f + '" not found'); + if (a[f]) return a[f].exports; + var T = o_(e[f]); if (T === 'use client') - return (t[h] = dr.createClientModuleProxy(h)), (u[h] = !0), t[h]; + return (t[f] = vr.createClientModuleProxy(f)), (u[f] = !0), t[f]; var x = {exports: {}}; - a[h] = x; + a[f] = x; var w = function (c) { if (c.endsWith('.css')) return {}; - var R = r(h, c); + var R = r(f, c); return t[R] ? t[R] : d(R); }, - S = s[h]; + S = s[f]; if ( - (T !== 'use server' && (S = Gg(S)), + (T !== 'use server' && (S = a_(S)), new Function('module', 'exports', 'require', 'React', '__rsa', S)( x, x.exports, w, - Vo, + Uo, function (c, R) { - return mf(c, h, R); + return If(c, f, R); } ), - (t[h] = x.exports), + (t[f] = 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); + for (var A = Object.keys(x.exports), q = 0; q < A.length; q++) { + var M = A[q]; + typeof x.exports[M] == 'function' && If(x.exports[M], f, M); } - return delete a[h], x.exports; + return delete a[f], 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]); + var v = {exports: {}}; + Object.keys(s).forEach(function (f) { + d(f), + (f === '/src/App.js' || f === './App.js' || f === './src/App.js') && + (v.exports = t[f]); }), - (Os = {module: y.exports}); + (Fs = {module: v.exports}); var g = {}; - function L(h) { - if (!g[h]) { - g[h] = !0; - var T = s[h]; + function O(f) { + if (!g[f]) { + g[f] = !0; + var T = s[f]; if (T) for ( var x = /require\(["']([^"']+)["']\)/g, w; @@ -32056,36 +32118,36 @@ Defaulting to 2020, but this will stop working in the future.`)), S.endsWith('.css') ) ) { - var A = r(h, S); - s[A] && L(A); + var A = r(f, S); + s[A] && O(A); } } } } - Object.keys(u).forEach(function (h) { - L(h); + Object.keys(u).forEach(function (f) { + O(f); }); var p = {}; return ( - Object.keys(g).forEach(function (h) { - p[h] = s[h]; + Object.keys(g).forEach(function (f) { + p[f] = s[f]; }), {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(), { + function u_() { + if (!Fs) throw new Error('No code deployed'); + var e = Fs.module.default || Fs.module, + t = Uo.createElement(e); + return vr.renderToReadableStream(t, Pf(), { 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]; + function p_(e, t) { + if (!Fs) throw new Error('No code deployed'); + var s = $c[e]; if (!s) throw new Error('Action "' + e + '" not found'); var i = t; if (typeof t != 'string' && t && t.__formData) { @@ -32093,23 +32155,23 @@ Defaulting to 2020, but this will stop working in the future.`)), 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) { + return Promise.resolve(vr.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(), + var d = Fs.module.default || Fs.module; + return vr.renderToReadableStream( + {root: Uo.createElement(d), returnValue: u}, + Pf(), { - onError: function (y) { - return console.error('[RSC Server Error]', y), msg; + onError: function (v) { + return console.error('[RSC Server Error]', v), msg; }, } ); }); }); } - function yf(e, t) { + function Ef(e, t) { var s = t.getReader(); function i() { return s.read().then(function (r) { @@ -32134,7 +32196,7 @@ Defaulting to 2020, but this will stop working in the future.`)), var t = e.data; if (t.type === 'deploy') try { - var s = Xg(t.files); + var s = c_(t.files); s && s.type === 'error' ? self.postMessage({type: 'rsc-error', error: s.error}) : s && self.postMessage({type: 'deploy-result', result: s}); @@ -32143,10 +32205,10 @@ Defaulting to 2020, but this will stop working in the future.`)), } else if (t.type === 'render') try { - var i = Yg(); + var i = u_(); Promise.resolve(i) .then(function (r) { - yf(t.requestId, r); + Ef(t.requestId, r); }) .catch(function (r) { self.postMessage({ @@ -32164,9 +32226,9 @@ Defaulting to 2020, but this will stop working in the future.`)), } else if (t.type === 'callAction') try { - Jg(t.actionId, t.encodedArgs) + p_(t.actionId, t.encodedArgs) .then(function (r) { - yf(t.requestId, r); + Ef(t.requestId, r); }) .catch(function (r) { self.postMessage({ diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index fa8c9e486..5f4a8ccd5 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -35,8 +35,8 @@ root.render( eject: 'react-scripts eject', }, dependencies: { - react: '^19.2.1', - 'react-dom': '^19.2.1', + react: '19.3.0-canary-f1f7ed2a-20260904', + 'react-dom': '19.3.0-canary-f1f7ed2a-20260904', 'react-scripts': '^5.0.0', }, }, diff --git a/src/components/MDX/Sandpack/templateRSC.ts b/src/components/MDX/Sandpack/templateRSC.ts index efc4c940c..8073ec409 100644 --- a/src/components/MDX/Sandpack/templateRSC.ts +++ b/src/components/MDX/Sandpack/templateRSC.ts @@ -91,8 +91,8 @@ export const templateRSC: SandpackFiles = { version: '0.0.0', main: '/src/index.js', dependencies: { - react: '19.2.4', - 'react-dom': '19.2.4', + react: '19.3.0-canary-f1f7ed2a-20260904', + 'react-dom': '19.3.0-canary-f1f7ed2a-20260904', }, }, null, diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx index 1d9e7f42d..8e7cbf2f9 100644 --- a/src/components/MDX/SandpackWithHTMLOutput.tsx +++ b/src/components/MDX/SandpackWithHTMLOutput.tsx @@ -56,8 +56,8 @@ export default function formatHTML(markup) { const packageJSON = ` { "dependencies": { - "react": "^19.2.1", - "react-dom": "^19.2.1", + "react": "^19.3.0", + "react-dom": "^19.3.0", "react-scripts": "^5.0.0", "html-format": "^1.1.2" }, diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index 2d0c65537..2716fa2d1 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -23,13 +23,49 @@ interface TeamMemberProps { name: string; title: string; permalink: string; - children: React.ReactNode; + children?: React.ReactNode; photo: string; twitter?: string; threads?: string; bsky?: string; github?: string; personal?: string; + // Comma-separated list of working groups. Suffix a group with `*` to mark + // that the member represents it on the Leadership Council, e.g. "Fiber*, DOM". + group?: string; +} + +function GroupBadges({group}: {group: string}) { + const groups = group + .split(',') + .map((g) => g.trim()) + .filter(Boolean); + if (groups.length === 0) { + return null; + } + return ( + <div className="flex flex-row flex-wrap gap-2 my-3"> + {groups.map((g) => { + const isLead = g.endsWith('*'); + const label = isLead ? g.slice(0, -1).trim() : g; + return ( + <span + key={g} + className="inline-flex items-center rounded-full bg-blue-10 dark:bg-gray-80 text-link dark:text-link-dark px-3 py-1 text-sm font-medium whitespace-nowrap"> + {label} + {isLead && ( + <span + className="ps-1 text-yellow-50" + aria-label="Leadership Council" + title="Leadership Council"> + ★ + </span> + )} + </span> + ); + })} + </div> + ); } // TODO: good alt text for images/links @@ -44,12 +80,11 @@ export function TeamMember({ threads, bsky, personal, + group, }: TeamMemberProps) { - if (name == null || title == null || permalink == null || children == null) { + if (name == null || title == null || permalink == null) { const identifier = name ?? title ?? permalink ?? 'unknown'; - throw new Error( - `Expected name, title, permalink, and children for ${identifier}` - ); + throw new Error(`Expected name, title, and permalink for ${identifier}`); } return ( <div className="pb-6 sm:pb-10"> @@ -69,6 +104,7 @@ export function TeamMember({ {name} </H3> {title && <div>{title}</div>} + {group && <GroupBadges group={group} />} {children} <div className="sm:flex sm:flex-row flex-wrap text-secondary dark:text-secondary-dark"> {twitter && ( diff --git a/src/components/MDX/TocContext.tsx b/src/components/MDX/TocContext.tsx index 924e6e09e..804895369 100644 --- a/src/components/MDX/TocContext.tsx +++ b/src/components/MDX/TocContext.tsx @@ -20,3 +20,6 @@ export type TocItem = { export type Toc = Array<TocItem>; export const TocContext = createContext<Toc>([]); + +// Lets badge components render compactly when inside the table of contents. +export const IsInTocContext = createContext(false); diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index bed24396d..1004523b7 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -51,7 +51,7 @@ Everyone can read the discussions in the [React 18 Working Group repo](https://g Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. -As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues). +As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/react/react/issues). ## How to try React 18 Alpha today {/*how-to-try-react-18-alpha-today*/} diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index 9d34dfaaa..50babfb13 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -13,7 +13,7 @@ March 08, 2022 by [Rick Hanlon](https://twitter.com/rickhanlonii) As we shared in the [release post](/blog/2022/03/29/react-v18), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. -Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18. +Please [report any issues](https://github.com/react/react/issues/new/choose) you encounter while upgrading to React 18. </Intro> @@ -317,8 +317,8 @@ If you need to support Internet Explorer we recommend you stay with React 17. * **Components can now render `undefined`:** React no longer warns if you return `undefined` from a component. This makes the allowed component return values consistent with values that are allowed in the middle of a component tree. We suggest to use a linter to prevent mistakes like forgetting a `return` statement before JSX. * **In tests, `act` warnings are now opt-in:** If you're running end-to-end tests, the `act` warnings are unnecessary. We've introduced an [opt-in](https://github.com/reactwg/react-18/discussions/102) mechanism so you can enable them only for unit tests where they are useful and beneficial. -* **No warning about `setState` on unmounted components:** Previously, React warned about memory leaks when you call `setState` on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've [removed](https://github.com/facebook/react/pull/22114) this warning. -* **No suppression of console logs:** When you use Strict Mode, React renders each component twice to help you find unexpected side effects. In React 17, we've suppressed console logs for one of the two renders to make the logs easier to read. In response to [community feedback](https://github.com/facebook/react/issues/21783) about this being confusing, we've removed the suppression. Instead, if you have React DevTools installed, the second log's renders will be displayed in grey, and there will be an option (off by default) to suppress them completely. +* **No warning about `setState` on unmounted components:** Previously, React warned about memory leaks when you call `setState` on an unmounted component. This warning was added for subscriptions, but people primarily run into it in scenarios where setting state is fine, and workarounds make the code worse. We've [removed](https://github.com/react/react/pull/22114) this warning. +* **No suppression of console logs:** When you use Strict Mode, React renders each component twice to help you find unexpected side effects. In React 17, we've suppressed console logs for one of the two renders to make the logs easier to read. In response to [community feedback](https://github.com/react/react/issues/21783) about this being confusing, we've removed the suppression. Instead, if you have React DevTools installed, the second log's renders will be displayed in grey, and there will be an option (off by default) to suppress them completely. * **Improved memory usage:** React now cleans up more internal fields on unmount, making the impact from unfixed memory leaks that may exist in your application code less severe. ### React DOM Server {/*react-dom-server*/} @@ -328,4 +328,4 @@ If you need to support Internet Explorer we recommend you stay with React 17. ## Changelog {/*changelog*/} -You can view the [full changelog here](https://github.com/facebook/react/blob/main/CHANGELOG.md). +You can view the [full changelog here](https://github.com/react/react/blob/main/CHANGELOG.md). diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index d21eeb1f5..b68ef4e8d 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -270,75 +270,75 @@ See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for st ### React {/*react*/} -* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `useId` for generating unique IDs. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr)) -* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/facebook/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/facebook/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/facebook/react/pull/19322), [#19374](https://github.com/facebook/react/pull/19374), [#19523](https://github.com/facebook/react/pull/19523), [#20625](https://github.com/facebook/react/pull/20625), [#21079](https://github.com/facebook/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan)) -* Make `<StrictMode>` re-run effects to check for restorable state. ([#19523](https://github.com/facebook/react/pull/19523) , [#21418](https://github.com/facebook/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan)) -* Assume Symbols are always available. ([#23348](https://github.com/facebook/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Remove `object-assign` polyfill. ([#23351](https://github.com/facebook/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/facebook/react/pull/20953) by [@acdlite](https://github.com/acdlite)) -* Allow components to render undefined. ([#21869](https://github.com/facebook/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/facebook/react/pull/21150) by [@acdlite](https://github.com/acdlite)) -* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/facebook/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/facebook/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Don't patch console during first render. ([#22308](https://github.com/facebook/react/pull/22308) by [@lunaruan](https://github.com/lunaruan)) -* Improve memory usage. ([#21039](https://github.com/facebook/react/pull/21039) by [@bgirard](https://github.com/bgirard)) -* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/facebook/react/pull/22064) by [@justingrant](https://github.com/justingrant)) -* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/facebook/react/pull/20834) by [@gaearon](https://github.com/gaearon)) -* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/facebook/react/pull/23095) by [@gaearon](https://github.com/gaearon)) -* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) -* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/facebook/react/pull/23111) by [@gaearon](https://github.com/gaearon)) -* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/facebook/react/pull/20617) by [@dimaqq](https://github.com/dimaqq)) -* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB)) -* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/facebook/react/pull/23316) by [@gnoff](https://github.com/gnoff)) -* Fix a warning when a selector returns `NaN`. ([#23333](https://github.com/facebook/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI)) -* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB)) -* Fix the generated license header. ([#23004](https://github.com/facebook/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron)) -* Add `package.json` as one of the entry points. ([#22954](https://github.com/facebook/react/pull/22954) by [@Jack](https://github.com/Jack-Works)) -* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/facebook/react/pull/23267) by [@acdlite](https://github.com/acdlite)) -* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/facebook/react/pull/23319) by [@acdlite](https://github.com/acdlite)) +* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/react/react/pull/10426), [#10715](https://github.com/react/react/pull/10715), [#15593](https://github.com/react/react/pull/15593), [#15272](https://github.com/react/react/pull/15272), [#15578](https://github.com/react/react/pull/15578), [#15769](https://github.com/react/react/pull/15769), [#17058](https://github.com/react/react/pull/17058), [#18796](https://github.com/react/react/pull/18796), [#19121](https://github.com/react/react/pull/19121), [#19703](https://github.com/react/react/pull/19703), [#19719](https://github.com/react/react/pull/19719), [#19724](https://github.com/react/react/pull/19724), [#20672](https://github.com/react/react/pull/20672), [#20976](https://github.com/react/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `useId` for generating unique IDs. ([#17322](https://github.com/react/react/pull/17322), [#18576](https://github.com/react/react/pull/18576), [#22644](https://github.com/react/react/pull/22644), [#22672](https://github.com/react/react/pull/22672), [#21260](https://github.com/react/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/react/react/pull/15022), [#18000](https://github.com/react/react/pull/18000), [#18771](https://github.com/react/react/pull/18771), [#22211](https://github.com/react/react/pull/22211), [#22292](https://github.com/react/react/pull/22292), [#22239](https://github.com/react/react/pull/22239), [#22347](https://github.com/react/react/pull/22347), [#23150](https://github.com/react/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr)) +* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/react/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/react/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/react/react/pull/19322), [#19374](https://github.com/react/react/pull/19374), [#19523](https://github.com/react/react/pull/19523), [#20625](https://github.com/react/react/pull/20625), [#21079](https://github.com/react/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan)) +* Make `<StrictMode>` re-run effects to check for restorable state. ([#19523](https://github.com/react/react/pull/19523) , [#21418](https://github.com/react/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan)) +* Assume Symbols are always available. ([#23348](https://github.com/react/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Remove `object-assign` polyfill. ([#23351](https://github.com/react/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/react/react/pull/20953) by [@acdlite](https://github.com/acdlite)) +* Allow components to render undefined. ([#21869](https://github.com/react/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/react/react/pull/21150) by [@acdlite](https://github.com/acdlite)) +* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/react/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii)) +* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/react/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Don't patch console during first render. ([#22308](https://github.com/react/react/pull/22308) by [@lunaruan](https://github.com/lunaruan)) +* Improve memory usage. ([#21039](https://github.com/react/react/pull/21039) by [@bgirard](https://github.com/bgirard)) +* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/react/react/pull/22064) by [@justingrant](https://github.com/justingrant)) +* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/react/react/pull/20834) by [@gaearon](https://github.com/gaearon)) +* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/react/react/pull/23095) by [@gaearon](https://github.com/gaearon)) +* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/react/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) +* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/react/react/pull/23111) by [@gaearon](https://github.com/gaearon)) +* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/react/react/pull/20617) by [@dimaqq](https://github.com/dimaqq)) +* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/react/react/pull/22695) by [@SimenB](https://github.com/SimenB)) +* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/react/react/pull/23316) by [@gnoff](https://github.com/gnoff)) +* Fix a warning when a selector returns `NaN`. ([#23333](https://github.com/react/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI)) +* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/react/react/pull/22695) by [@SimenB](https://github.com/SimenB)) +* Fix the generated license header. ([#23004](https://github.com/react/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron)) +* Add `package.json` as one of the entry points. ([#22954](https://github.com/react/react/pull/22954) by [@Jack](https://github.com/Jack-Works)) +* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/react/react/pull/23267) by [@acdlite](https://github.com/acdlite)) +* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/react/react/pull/23319) by [@acdlite](https://github.com/acdlite)) ### React DOM {/*react-dom*/} -* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/facebook/react/pull/10239), [#11225](https://github.com/facebook/react/pull/11225), [#12117](https://github.com/facebook/react/pull/12117), [#13732](https://github.com/facebook/react/pull/13732), [#15502](https://github.com/facebook/react/pull/15502), [#15532](https://github.com/facebook/react/pull/15532), [#17035](https://github.com/facebook/react/pull/17035), [#17165](https://github.com/facebook/react/pull/17165), [#20669](https://github.com/facebook/react/pull/20669), [#20748](https://github.com/facebook/react/pull/20748), [#20888](https://github.com/facebook/react/pull/20888), [#21072](https://github.com/facebook/react/pull/21072), [#21417](https://github.com/facebook/react/pull/21417), [#21652](https://github.com/facebook/react/pull/21652), [#21687](https://github.com/facebook/react/pull/21687), [#23207](https://github.com/facebook/react/pull/23207), [#23385](https://github.com/facebook/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add selective hydration. ([#14717](https://github.com/facebook/react/pull/14717), [#14884](https://github.com/facebook/react/pull/14884), [#16725](https://github.com/facebook/react/pull/16725), [#16880](https://github.com/facebook/react/pull/16880), [#17004](https://github.com/facebook/react/pull/17004), [#22416](https://github.com/facebook/react/pull/22416), [#22629](https://github.com/facebook/react/pull/22629), [#22448](https://github.com/facebook/react/pull/22448), [#22856](https://github.com/facebook/react/pull/22856), [#23176](https://github.com/facebook/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/facebook/react/pull/22142) by [@mahyareb](https://github.com/mahyareb)) -* Add `onResize` event to video elements. ([#21973](https://github.com/facebook/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw)) -* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/facebook/react/pull/22550) by [@eps1lon](https://github.com/eps1lon)) -* Allow non-string `<option>` children if `value` is provided. ([#21431](https://github.com/facebook/react/pull/21431) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix `aspectRatio` style not being applied. ([#21100](https://github.com/facebook/react/pull/21100) by [@gaearon](https://github.com/gaearon)) -* Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/facebook/react/pull/23355) by [@acdlite](https://github.com/acdlite)) +* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/react/react/pull/10239), [#11225](https://github.com/react/react/pull/11225), [#12117](https://github.com/react/react/pull/12117), [#13732](https://github.com/react/react/pull/13732), [#15502](https://github.com/react/react/pull/15502), [#15532](https://github.com/react/react/pull/15532), [#17035](https://github.com/react/react/pull/17035), [#17165](https://github.com/react/react/pull/17165), [#20669](https://github.com/react/react/pull/20669), [#20748](https://github.com/react/react/pull/20748), [#20888](https://github.com/react/react/pull/20888), [#21072](https://github.com/react/react/pull/21072), [#21417](https://github.com/react/react/pull/21417), [#21652](https://github.com/react/react/pull/21652), [#21687](https://github.com/react/react/pull/21687), [#23207](https://github.com/react/react/pull/23207), [#23385](https://github.com/react/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add selective hydration. ([#14717](https://github.com/react/react/pull/14717), [#14884](https://github.com/react/react/pull/14884), [#16725](https://github.com/react/react/pull/16725), [#16880](https://github.com/react/react/pull/16880), [#17004](https://github.com/react/react/pull/17004), [#22416](https://github.com/react/react/pull/22416), [#22629](https://github.com/react/react/pull/22629), [#22448](https://github.com/react/react/pull/22448), [#22856](https://github.com/react/react/pull/22856), [#23176](https://github.com/react/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage)) +* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/react/react/pull/22142) by [@mahyareb](https://github.com/mahyareb)) +* Add `onResize` event to video elements. ([#21973](https://github.com/react/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw)) +* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/react/react/pull/22550) by [@eps1lon](https://github.com/eps1lon)) +* Allow non-string `<option>` children if `value` is provided. ([#21431](https://github.com/react/react/pull/21431) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix `aspectRatio` style not being applied. ([#21100](https://github.com/react/react/pull/21100) by [@gaearon](https://github.com/gaearon)) +* Warn if `renderSubtreeIntoContainer` is called. ([#23355](https://github.com/react/react/pull/23355) by [@acdlite](https://github.com/acdlite)) ### React DOM Server {/*react-dom-server-1*/} -* Add the new streaming renderer. ([#14144](https://github.com/facebook/react/pull/14144), [#20970](https://github.com/facebook/react/pull/20970), [#21056](https://github.com/facebook/react/pull/21056), [#21255](https://github.com/facebook/react/pull/21255), [#21200](https://github.com/facebook/react/pull/21200), [#21257](https://github.com/facebook/react/pull/21257), [#21276](https://github.com/facebook/react/pull/21276), [#22443](https://github.com/facebook/react/pull/22443), [#22450](https://github.com/facebook/react/pull/22450), [#23247](https://github.com/facebook/react/pull/23247), [#24025](https://github.com/facebook/react/pull/24025), [#24030](https://github.com/facebook/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/facebook/react/pull/23171) by [@frandiox](https://github.com/frandiox)) -* Revert to client render on text mismatch. ([#23354](https://github.com/facebook/react/pull/23354) by [@acdlite](https://github.com/acdlite)) -* Deprecate `renderToNodeStream`. ([#23359](https://github.com/facebook/react/pull/23359) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/facebook/react/pull/24043) by [@eps1lon](https://github.com/eps1lon)) -* Fix a bug in the new server renderer. ([#22617](https://github.com/facebook/react/pull/22617) by [@shuding](https://github.com/shuding)) -* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/facebook/react/pull/21157) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Add the new streaming renderer. ([#14144](https://github.com/react/react/pull/14144), [#20970](https://github.com/react/react/pull/20970), [#21056](https://github.com/react/react/pull/21056), [#21255](https://github.com/react/react/pull/21255), [#21200](https://github.com/react/react/pull/21200), [#21257](https://github.com/react/react/pull/21257), [#21276](https://github.com/react/react/pull/21276), [#22443](https://github.com/react/react/pull/22443), [#22450](https://github.com/react/react/pull/22450), [#23247](https://github.com/react/react/pull/23247), [#24025](https://github.com/react/react/pull/24025), [#24030](https://github.com/react/react/pull/24030) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix context providers in SSR when handling multiple requests. ([#23171](https://github.com/react/react/pull/23171) by [@frandiox](https://github.com/frandiox)) +* Revert to client render on text mismatch. ([#23354](https://github.com/react/react/pull/23354) by [@acdlite](https://github.com/acdlite)) +* Deprecate `renderToNodeStream`. ([#23359](https://github.com/react/react/pull/23359) by [@sebmarkbage](https://github.com/sebmarkbage)) +* Fix a spurious error log in the new server renderer. ([#24043](https://github.com/react/react/pull/24043) by [@eps1lon](https://github.com/eps1lon)) +* Fix a bug in the new server renderer. ([#22617](https://github.com/react/react/pull/22617) by [@shuding](https://github.com/shuding)) +* Ignore function and symbol values inside custom elements on the server. ([#21157](https://github.com/react/react/pull/21157) by [@sebmarkbage](https://github.com/sebmarkbage)) ### React DOM Test Utils {/*react-dom-test-utils*/} -* Throw when `act` is used in production. ([#21686](https://github.com/facebook/react/pull/21686) by [@acdlite](https://github.com/acdlite)) -* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/facebook/react/pull/22561) by [@acdlite](https://github.com/acdlite)) -* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/facebook/react/pull/22607) by [@acdlite](https://github.com/acdlite)) -* Make `act` batch updates. ([#21797](https://github.com/facebook/react/pull/21797) by [@acdlite](https://github.com/acdlite)) -* Remove warning for dangling passive effects. ([#22609](https://github.com/facebook/react/pull/22609) by [@acdlite](https://github.com/acdlite)) +* Throw when `act` is used in production. ([#21686](https://github.com/react/react/pull/21686) by [@acdlite](https://github.com/acdlite)) +* Support disabling spurious act warnings with `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/react/react/pull/22561) by [@acdlite](https://github.com/acdlite)) +* Expand act warning to cover all APIs that might schedule React work. ([#22607](https://github.com/react/react/pull/22607) by [@acdlite](https://github.com/acdlite)) +* Make `act` batch updates. ([#21797](https://github.com/react/react/pull/21797) by [@acdlite](https://github.com/acdlite)) +* Remove warning for dangling passive effects. ([#22609](https://github.com/react/react/pull/22609) by [@acdlite](https://github.com/acdlite)) ### React Refresh {/*react-refresh*/} -* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/facebook/react/pull/22740) by [@anc95](https://github.com/anc95)) -* Add `exports` field to `package.json`. ([#23087](https://github.com/facebook/react/pull/23087) by [@otakustay](https://github.com/otakustay)) +* Track late-mounted roots in Fast Refresh. ([#22740](https://github.com/react/react/pull/22740) by [@anc95](https://github.com/anc95)) +* Add `exports` field to `package.json`. ([#23087](https://github.com/react/react/pull/23087) by [@otakustay](https://github.com/otakustay)) ### Server Components (Experimental) {/*server-components-experimental*/} -* Add Server Context support. ([#23244](https://github.com/facebook/react/pull/23244) by [@salazarm](https://github.com/salazarm)) -* Add `lazy` support. ([#24068](https://github.com/facebook/react/pull/24068) by [@gnoff](https://github.com/gnoff)) -* Update webpack plugin for webpack 5 ([#22739](https://github.com/facebook/react/pull/22739) by [@michenly](https://github.com/michenly)) -* Fix a mistake in the Node loader. ([#22537](https://github.com/facebook/react/pull/22537) by [@btea](https://github.com/btea)) -* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/facebook/react/pull/22777) by [@huozhi](https://github.com/huozhi)) +* Add Server Context support. ([#23244](https://github.com/react/react/pull/23244) by [@salazarm](https://github.com/salazarm)) +* Add `lazy` support. ([#24068](https://github.com/react/react/pull/24068) by [@gnoff](https://github.com/gnoff)) +* Update webpack plugin for webpack 5 ([#22739](https://github.com/react/react/pull/22739) by [@michenly](https://github.com/michenly)) +* Fix a mistake in the Node loader. ([#22537](https://github.com/react/react/pull/22537) by [@btea](https://github.com/btea)) +* Use `globalThis` instead of `window` for edge environments. ([#22777](https://github.com/react/react/pull/22777) by [@huozhi](https://github.com/huozhi)) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 1aaa94ec1..b021bc3ff 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -69,7 +69,7 @@ Currently, React has two profiling tools. The [original Profiler](https://legacy We’ve realized that developers don’t find knowing about individual slow commits or components out of context that useful. It’s more useful to know about what actually causes the slow commits. And that developers want to be able to track specific interactions (eg a button click, an initial load, or a page navigation) to watch for performance regressions and to understand why an interaction was slow and how to fix it. -We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/facebook/react/pull/20037) because of these issues. +We previously tried to solve this issue by creating an [Interaction Tracing API](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16), but it had some fundamental design flaws that reduced the accuracy of tracking why an interaction was slow and sometimes resulted in interactions never ending. We ended up [removing this API](https://github.com/react/react/pull/20037) because of these issues. We are working on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via `startTransition`) that solves these problems. diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index f971ddafa..96d2a630d 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -279,17 +279,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -317,17 +317,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -365,17 +365,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - importance={9} - name="Space suit" + <Item + importance={9} + name="Space suit" /> - <Item - importance={0} - name="Helmet with a golden leaf" + <Item + importance={0} + name="Helmet with a golden leaf" /> - <Item - importance={6} - name="Photo of Tam" + <Item + importance={6} + name="Photo of Tam" /> </ul> </section> @@ -409,17 +409,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - importance={9} - name="Space suit" + <Item + importance={9} + name="Space suit" /> - <Item - importance={0} - name="Helmet with a golden leaf" + <Item + importance={0} + name="Helmet with a golden leaf" /> - <Item - importance={6} - name="Photo of Tam" + <Item + importance={6} + name="Photo of Tam" /> </ul> </section> 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 c3ab47fad..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 @@ -49,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 `<Calendar onSelect={eventHandler}>` component, consider also exposing a `<Calendar selectAction={action}>` 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. @@ -75,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 [`<form/>`](/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. 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..6f918a2a9 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,11 +20,11 @@ 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. -For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024). +For a list of changes in 18.3 see the [Release Notes](https://github.com/react/react/blob/main/CHANGELOG.md#1830-april-25-2024). </Note> @@ -38,7 +38,7 @@ In this post, we will guide you through the steps for upgrading to React 19: - [TypeScript changes](#typescript-changes) - [Changelog](#changelog) -If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). +If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/react/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). --- ## Installing {/*installing*/} @@ -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. </Note> -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: @@ -256,7 +256,7 @@ class Child extends React.Component { #### Removed: string refs {/*removed-string-refs*/} String refs were deprecated in [March, 2018 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html). -Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/facebook/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand. +Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/react/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand. If you're still using string refs in class components, you'll need to migrate to ref callbacks: @@ -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). </Note> @@ -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` @@ -730,24 +730,24 @@ const reducer = (state: State, action: Action) => state; ### Other breaking changes {/*other-breaking-changes*/} -- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507) -- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222) -- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397) -- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271) -- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271) -- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271) -- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224) +- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/react/react/pull/26507) +- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/react/react/pull/28222) +- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/react/react/pull/26397) +- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/react/react/pull/28271) +- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/react/react/pull/28271) +- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/react/react/pull/28271) +- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/react/react/pull/28224) ### Other notable changes {/*other-notable-changes*/} -- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/facebook/react/pull/25700) -- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/facebook/react/pull/26380) -- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/facebook/react/pull/26625) -- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/facebook/react/pull/26025) -- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/facebook/react/pull/26395) -- **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/facebook/react/pull/28124) +- **react**: Batch sync, default and continuous lanes [#25700](https://github.com/react/react/pull/25700) +- **react**: Don't prerender siblings of suspended component [#26380](https://github.com/react/react/pull/26380) +- **react**: Detect infinite update loops caused by render phase updates [#26625](https://github.com/react/react/pull/26625) +- **react-dom**: Transitions in popstate are now synchronous [#26025](https://github.com/react/react/pull/26025) +- **react-dom**: Remove layout effect warning during SSR [#26395](https://github.com/react/react/pull/26395) +- **react-dom**: Warn and don’t set empty string for src/href (except anchor tags) [#28124](https://github.com/react/react/pull/28124) -For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024). +For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md#1900-december-5-2024). --- 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 e22464010..d0774782a 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 @@ -45,7 +45,7 @@ Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Cl - [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://bsky.app/profile/danabra.mov) - [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds) -Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/facebook/react/pull/29061), and sharing an experimental version of the React Compiler to try out. +Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/react/react/pull/29061), and sharing an experimental version of the React Compiler to try out. For more information on using the Compiler and how it works, check out [the docs](/learn/react-compiler) and these talks: 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 750c0f3b8..5cc5f19ae 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 @@ -92,7 +92,7 @@ Because your code is pre-compiled, users of your library will not need to have t We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release. -From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). +From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/react/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum. @@ -127,7 +127,7 @@ Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https --- -[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. +[^1]: Thanks [@nikeee](https://github.com/react/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/react/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/react/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. [^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 4e9aad8e8..93ac0c360 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,13 +176,13 @@ 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`. <Note> `React.useActionState` was previously called `ReactDOM.useFormState` in the Canary releases, but we've renamed it and deprecated `useFormState`. -See [#28491](https://github.com/facebook/react/pull/28491) for more info. +See [#28491](https://github.com/react/react/pull/28491) for more info. </Note> @@ -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/creating-a-react-app#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). <Note> #### 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. @@ -497,7 +497,7 @@ function App({children}) { <ThemeContext value="dark"> {children} </ThemeContext> - ); + ); } ``` @@ -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`. <Note> @@ -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 ( <Results query={value} /> ); @@ -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 `<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 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 6f3e95d81..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. 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 9b6095f8b..95821fc43 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 @@ -1245,8 +1245,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -2442,8 +2442,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -3670,8 +3670,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -4879,8 +4879,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -6195,8 +6195,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -7493,8 +7493,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -8814,8 +8814,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -10155,8 +10155,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -11441,8 +11441,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -11458,7 +11458,7 @@ root.render( If you're curious to know more about how they work, check out [How Does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs. -_For more background on how we built View Transitions, see: [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._ +_For more background on how we built View Transitions, see: [#31975](https://github.com/react/react/pull/31975), [#32105](https://github.com/react/react/pull/32105), [#32041](https://github.com/react/react/pull/32041), [#32734](https://github.com/react/react/pull/32734), [#32797](https://github.com/react/react/pull/32797) [#31999](https://github.com/react/react/pull/31999), [#32031](https://github.com/react/react/pull/32031), [#32050](https://github.com/react/react/pull/32050), [#32820](https://github.com/react/react/pull/32820), [#32029](https://github.com/react/react/pull/32029), [#32028](https://github.com/react/react/pull/32028), and [#32038](https://github.com/react/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._ --- @@ -12840,8 +12840,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { @@ -14178,8 +14178,8 @@ root.render( ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.3.0-canary-eb8feb71-20260814", + "react-dom": "19.3.0-canary-eb8feb71-20260814", "react-scripts": "latest" }, "scripts": { diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md index 51c30f70a..feee6cdb6 100644 --- a/src/content/blog/2025/10/01/react-19-2.md +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -300,7 +300,7 @@ To continue using the legacy config, you can change to `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). +Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/react/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). --- @@ -315,23 +315,23 @@ The original intent of using a special character that was not valid for CSS sele ## 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) +- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/react/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/react/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). +- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/react/react/pull/33507) +- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/react/react/pull/32821) +- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/react/react/pull/34376) +- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/react/react/pull/33055) +- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/react/react/pull/32900) +- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/react/react/pull/34145) +- `react`: Improve component stacks in various places [#33629](https://github.com/react/react/pull/33629), [#33724](https://github.com/react/react/pull/33724), [#32735](https://github.com/react/react/pull/32735), [#33723](https://github.com/react/react/pull/33723) +- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/react/react/pull/33941) +- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/react/react/pull/34264) +- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/react/react/pull/33467) +- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/react/react/pull/34192) + +For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md). --- diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index 080f3586e..ee5ffa4fd 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -132,7 +132,7 @@ export default defineConfig([ } ``` -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: +To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/react/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). 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 index 310a84116..a669a2c4e 100644 --- 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 @@ -34,7 +34,7 @@ The vulnerability is present in versions 19.0, 19.1.0, 19.1.1, and 19.2.0 of: ## 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. +A fix was introduced in versions [19.0.1](https://github.com/react/react/releases/tag/v19.0.1), [19.1.2](https://github.com/react/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/react/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. @@ -193,7 +193,7 @@ If you are using React Native in a monorepo, you should update _only_ the impact 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. +See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. ## Timeline {/*timeline*/} 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 index dc049c78c..206d49e39 100644 --- 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 @@ -98,7 +98,7 @@ If you are using React Native in a monorepo, you should update _only_ the impact 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. +See [this issue](https://github.com/react/react-native/issues/54772#issuecomment-3617929832) for more information. --- @@ -176,7 +176,7 @@ The patches published today prevent stringifying the Server Function source code 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. +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. diff --git a/src/content/blog/2026/09/09/react-19-3.md b/src/content/blog/2026/09/09/react-19-3.md new file mode 100644 index 000000000..ed6857732 --- /dev/null +++ b/src/content/blog/2026/09/09/react-19-3.md @@ -0,0 +1,1951 @@ +--- +title: "React 19.3" +author: The React Team +date: 2026/09/09 +description: React 19.3 adds new features like View Transitions, Fragment Refs, browser(), Trusted Types, and more. +--- + +September 9, 2026 by [The React Team](/community/team) + +--- + +<Intro> + +React 19.3 is now available on npm! + +</Intro> + + +[Last year](/blog/2025/04/23/react-labs-view-transitions-activity-and-more), we shared View Transitions and Fragment Refs as new experimental APIs coming to React. We're excited to announce that both of these are now stable in React 19.3! + +In this post, we'll go over how they work, and also cover some other notable changes in this release. + +<InlineToc /> + +--- + +## New React Features {/*new-react-features*/} + +### View Transitions {/*view-transition*/} + +The new `<ViewTransition>` component lets you animate elements as they enter, exit, move, or resize using the browser's [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API). We shared it as an experimental API [last year](/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions), and in 19.3 it's stable and ready to use. + +To animate part of your UI, wrap it in `<ViewTransition>`: + +```js +import { ViewTransition } from 'react'; + +{isShowing && ( + <ViewTransition> + <Component /> + </ViewTransition> +)} +``` + +Now, whenever an update marked as a [Transition](/reference/react/useTransition) changes the child component's style, or causes the `ViewTransition` to be mounted or unmounted, React will animate that update. + +{/* +Updates outside of a Transition don't trigger animations, as those are meant to be urgent and reflected immediately in the UI. State updates inside of [startTransition](/reference/react/startTransition), a [`<Suspense>`](/reference/react/Suspense) reveal, or an update from [`useDeferredValue`](/reference/react/useDeferredValue) all cause a View Transition to animate. +*/} + +React chooses which animation to run based on how the tree changed: + +- **enter**: the `<ViewTransition>` is added. +- **exit**: the `<ViewTransition>` is removed. +- **update**: the children of a `<ViewTransition>` change style or content. +- **share**: a named `<ViewTransition>` is removed in one place and added in another. + +Note that updates not marked as Transitions don't trigger animations, as those are meant to be urgent and reflected immediately in the UI. State updates inside of [startTransition](/reference/react/startTransition), a [`<Suspense>`](/reference/react/Suspense) reveal, or an update from [`useDeferredValue`](/reference/react/useDeferredValue) all cause a View Transition to animate. + +Here's a simple example of an enter/exit animation: + +<Sandpack> + +```js src/Video.js hidden +function Thumbnail({video, children}) { + return ( + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + /> + ); +} + +export function Video({video}) { + return ( + <div className="video"> + <div className="link"> + <Thumbnail video={video}></Thumbnail> + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + </div> + ); +} +``` + +```js +import { ViewTransition, useState, startTransition } from 'react'; +import { Video } from './Video'; +import videos from './data'; + +export default function Component() { + const [showItem, setShowItem] = useState(false); + + return ( + <> + <button + onClick={() => { + startTransition(() => { + setShowItem((prev) => !prev); + }); + }}> + {showItem ? '➖' : '➕'} + </button> + + {showItem && ( + <ViewTransition> + <Video video={videos[0]} /> + </ViewTransition> + )} + </> + ); +} +``` + +```js src/data.js hidden +export default [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, +]; +``` + +```css +#root { + display: flex; + flex-direction: column; + align-items: center; + min-height: 200px; +} +button { + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + background-color: #f0f8ff; + color: white; + font-size: 20px; + cursor: pointer; + transition: background-color 0.3s, border 0.3s; +} +button:hover { + border: 2px solid #ccc; + background-color: #e0e8ff; +} +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; + margin-top: 1em; +} +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; + cursor: pointer; +} +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} +.video .info:hover { + text-decoration: underline; +} +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} +.video-description { + color: #5e687e; + font-size: 13px; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +By default, `<ViewTransition>` animates with a smooth cross-fade. You can customize each kind of animation by passing a [View Transition Class](/reference/react/ViewTransition#view-transition-class) and defining the animation in CSS, or you can use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to trigger animations imperatively with the [event props](/reference/react/ViewTransition#view-transition-event) (`onEnter`, `onExit`, `onShare`, `onUpdate`). + +{/* +There are a couple of rules to keep in mind. A `<ViewTransition>` only animates on enter and exit if it's the first thing rendered in its subtree, before any DOM node, and each shared `name` must be unique across your app at any given time. See [Troubleshooting](/reference/react/ViewTransition#troubleshooting) for the details. + */} + +Currently, `<ViewTransition>` only works in the DOM. We're working on support for React Native and other platforms. + +For more, see the [`<ViewTransition>` docs](/reference/react/ViewTransition). + +--- + +#### `addTransitionType` {/*add-transition-type*/} + +Sometimes, you'll want to customize which animation is used for the same state update. For example, navigating a carousel _forward_ to the third slide should animate the slides right-to-left, while navigating it _backward_ should animate them left-to-right, even though both actions set the currentSlide to 3. + +You can customize the animation for a given View Transition by calling `addTransitionType` alongside the state update. This lets you add more information about the _cause_ of a particular transition: + +```js {3,10} +function nextSlide() { + startTransition(() => { + addTransitionType('next'); + setCurrentSlide(c => c + 1); + }); +} + +function previousSlide() { + startTransition(() => { + addTransitionType('previous'); + setCurrentSlide(c => c - 1); + }); +} +``` + +Then, you can specify different animations based on that transition type: + +```js +<ViewTransition + enter={{ + 'next': 'from-right', + 'previous': 'from-left', + }} + exit={{ + 'next': 'to-left', + 'previous': 'to-right', + }} +> + <Page /> +</ViewTransition> +``` + +Here's an example: + +<Sandpack> + +```js src/Video.js hidden +function Thumbnail({video, children}) { + return ( + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + /> + ); +} + +export function Video({video}) { + return ( + <div className="video"> + <div className="link"> + <Thumbnail video={video}></Thumbnail> + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + </div> + ); +} +``` + +```js +import { + ViewTransition, + addTransitionType, + useState, + startTransition, + Fragment +} from 'react'; +import { Video } from './Video'; +import videos from './data'; +import './animations.css'; + +export default function Component() { + const [selected, setSelected] = useState(0) + const video = videos[selected]; + + return ( + <> + <div className="button-container"> + <button + onClick={() => { + startTransition(() => { + addTransitionType('previous'); + setSelected(c => c > 0 ? c - 1 : videos.length - 1 ) + }); + }}> + âŦ…ī¸ + </button> + <button + onClick={() => { + startTransition(() => { + addTransitionType('next'); + setSelected(c => c + 1 < videos.length ? c + 1 : 0) + }); + }}> + ➡ī¸ + </button> + </div> + + <ViewTransition + key={video.id} + enter={{ + 'next': 'from-right', + 'previous': 'from-left' + }} + exit={{ + 'next': 'to-left', + 'previous': 'to-right' + }} + > + <Video video={video} /> + </ViewTransition> + </> + ); +} +``` + +```js src/data.js hidden +export default [ + { + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }, + { + id: '2', + title: 'Second video', + description: 'Video description', + image: 'red', + }, + { + id: '3', + title: 'Third video', + description: 'Video description', + image: 'green', + }, + { + id: '4', + title: 'Fourth video', + description: 'Video description', + image: 'purple', + }, + { + id: '5', + title: 'Fifth video', + description: 'Video description', + image: 'yellow', + }, + { + id: '6', + title: 'Sixth video', + description: 'Video description', + image: 'gray', + }, +]; +``` + +```css src/animations.css +::view-transition-old(*), +::view-transition-new(*) { + animation-duration: 250ms; + animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); +} + +::view-transition-new(.from-right) { + --offset: 100%; + animation-name: slide-in; +} + +::view-transition-new(.from-left) { + --offset: -100%; + animation-name: slide-in; +} + +::view-transition-old(.to-right) { + --offset: 100%; + animation-name: slide-out; +} + +::view-transition-old(.to-left) { + --offset: -100%; + animation-name: slide-out; +} + +@keyframes slide-in { + from { + transform: translateX(var(--offset)); + opacity: 0; + } +} + +@keyframes slide-out { + to { + transform: translateX(var(--offset)); + opacity: 0; + } +} +``` + +```css src/styles.css +#root { + display: flex; + flex-direction: column; + align-items: center; + min-height: 200px; +} +button { + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + background-color: #f0f8ff; + color: white; + font-size: 20px; + cursor: pointer; + transition: background-color 0.3s, border 0.3s; +} +button:hover { + border: 2px solid #ccc; + background-color: #e0e8ff; +} +.button-container { + display: flex; + gap: 8px; +} +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} + +.thumbnail.red { + background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491); +} + +.thumbnail.green { + background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491); +} + +.thumbnail.purple { + background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491); +} + +.thumbnail.yellow { + background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491); +} + +.thumbnail.gray { + background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491); +} + +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; + margin-top: 1em; +} +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; +} +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} +.video-description { + color: #5e687e; + font-size: 13px; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +React also adds every Transition Type to the element as a browser [view transition type](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples), so you can scope animations in CSS with `:active-view-transition-type(...)`. + +To learn more, see the [`addTransitionType` docs](/reference/react/addTransitionType). + +--- + +#### Animating fallbacks, images, and fonts with Suspense {/*animating-fallbacks-images-and-fonts-with-suspense*/} + +One of the most exciting things about View Transitions in React is how they integrate with Suspense. + +You can animate a Suspense boundary as it reveals its children by wrapping it in `<ViewTransition>`: + +```js +<ViewTransition> + <Suspense fallback={<Loading />}> + <Component /> + </Suspense> +</ViewTransition> +``` + +When the children finish loading, React will trigger an **update** animation from the fallback to the final content. + +Here's an example. Try pressing ➕ to render a LazyVideo that suspends the first time it's rendered: + +<Sandpack> + +```js src/Video.js hidden +import { ViewTransition } from 'react'; + +function Thumbnail({video, children}) { + return ( + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + /> + ); +} + +export function Video({video}) { + return ( + <div className="video"> + <div className="link"> + <Thumbnail video={video}></Thumbnail> + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + </div> + ); +} + +export function VideoPlaceholder() { + const video = {image: 'loading'}; + return ( + <div className="video"> + <div className="link"> + <Thumbnail video={video}></Thumbnail> + <div className="info"> + <div className="video-title loading" /> + <div className="video-description loading" /> + </div> + </div> + </div> + ); +} +``` + +```js +import { Suspense, useState, startTransition, use, ViewTransition } from 'react'; +import { Video, VideoPlaceholder } from './Video'; +import { fetchVideo } from './data'; + +export default function Component() { + const [showItem, setShowItem] = useState(false); + + return ( + <> + <button + onClick={() => { + startTransition(() => { + setShowItem((prev) => !prev); + }); + }} + > + {showItem ? '➖' : '➕'} + </button> + + {showItem && ( + <ViewTransition> + <Suspense fallback={<VideoPlaceholder />}> + <LazyVideo /> + </Suspense> + </ViewTransition> + )} + </> + ); +} + +function LazyVideo() { + const video = use(fetchVideo()); + + return <Video video={video} />; +} +``` + + +```js src/data.js hidden +let cache = null; + +export function fetchVideo() { + if (!cache) { + cache = new Promise((resolve) => { + setTimeout(() => { + resolve({ + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }); + }, 1000); + }); + } + return cache; +} +``` + +```css +::view-transition-old(*), +::view-transition-new(*) { + /* animation-duration: 750ms; */ + /* animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); */ +} +#root { + display: flex; + flex-direction: column; + align-items: center; + min-height: 200px; +} +button { + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + background-color: #f0f8ff; + color: white; + font-size: 20px; + cursor: pointer; + transition: background-color 0.3s, border 0.3s; +} +button:hover { + border: 2px solid #ccc; + background-color: #e0e8ff; +} +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} +.loading { + background-image: linear-gradient( + 90deg, + rgba(173, 216, 230, 0.3) 25%, + rgba(135, 206, 250, 0.5) 50%, + rgba(173, 216, 230, 0.3) 75% + ); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + z-index: 999; +} +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; + margin-top: 1em; +} +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; +} +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} +.video-title.loading { + height: 20px; + width: 80px; + border-radius: 0.5rem; +} +.video-description { + color: #5e687e; + font-size: 13px; + border-radius: 0.5rem; +} +.video-description.loading { + height: 15px; + width: 100px; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +While this works, you'll notice that the video also animates in and out on subsequent reveals, even though it's already been loaded. (You might also notice that the fallback fades in the first time it's shown.) + +In general, animations with Suspense work best when they're used sparingly, and avoided for cached UI that would otherwise appear instantly. + +Here are some principles for achieving good UX when animating with Suspense: + +- Fallbacks should appear immediately _without animation_ +- A fallback should update to its final content _with animation_ +- Children that don't suspend should appear immediately _without animation_ + +This keeps your app feeling snappy when things are already loaded, and only uses animation to make the update from fallback to final content more seamless. + +To fix our example above, we can disable all animations other than updates: + +```js {1} +<ViewTransition update="auto" default="none"> + <Suspense fallback={<Fallback />}> + <Component /> + </Suspense> +</ViewTransition> +``` + +Let's see how it behaves now: + +<Sandpack> + +```js src/Video.js hidden +import { ViewTransition } from 'react'; + +function Thumbnail({video, children}) { + return ( + <div + aria-hidden="true" + tabIndex={-1} + className={`thumbnail ${video.image}`} + /> + ); +} + +export function Video({video}) { + return ( + <div className="video"> + <div className="link"> + <Thumbnail video={video}></Thumbnail> + <div className="info"> + <div className="video-title">{video.title}</div> + <div className="video-description">{video.description}</div> + </div> + </div> + </div> + ); +} + +export function VideoPlaceholder() { + const video = {image: 'loading'}; + return ( + <div className="video"> + <div className="link"> + <Thumbnail video={video}></Thumbnail> + <div className="info"> + <div className="video-title loading" /> + <div className="video-description loading" /> + </div> + </div> + </div> + ); +} +``` + +```js +import { Suspense, useState, startTransition, use, ViewTransition } from 'react'; +import { Video, VideoPlaceholder } from './Video'; +import { fetchVideo } from './data'; + +export default function Component() { + const [showItem, setShowItem] = useState(false); + + return ( + <> + <button + onClick={() => { + startTransition(() => { + setShowItem((prev) => !prev); + }); + }} + > + {showItem ? '➖' : '➕'} + </button> + + {showItem && ( + <ViewTransition update="auto" default="none"> + <Suspense fallback={<VideoPlaceholder />}> + <LazyVideo /> + </Suspense> + </ViewTransition> + )} + </> + ); +} + +function LazyVideo() { + const video = use(fetchVideo()); + + return <Video video={video} />; +} +``` + + +```js src/data.js hidden +let cache = null; + +export function fetchVideo() { + if (!cache) { + cache = new Promise((resolve) => { + setTimeout(() => { + resolve({ + id: '1', + title: 'First video', + description: 'Video description', + image: 'blue', + }); + }, 1000); + }); + } + return cache; +} +``` + +```css +::view-transition-old(*), +::view-transition-new(*) { + /* animation-duration: 5000ms; */ + /* animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); */ +} +#root { + display: flex; + flex-direction: column; + align-items: center; + min-height: 200px; +} +button { + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + background-color: #f0f8ff; + color: white; + font-size: 20px; + cursor: pointer; + transition: background-color 0.3s, border 0.3s; +} +button:hover { + border: 2px solid #ccc; + background-color: #e0e8ff; +} +.thumbnail { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + overflow: hidden; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 0.5rem; + outline-offset: 2px; + width: 8rem; + vertical-align: middle; + background-color: #ffffff; + background-size: cover; + user-select: none; +} +.thumbnail.blue { + background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491); +} +.loading { + background-image: linear-gradient( + 90deg, + rgba(173, 216, 230, 0.3) 25%, + rgba(135, 206, 250, 0.5) 50%, + rgba(173, 216, 230, 0.3) 75% + ); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + z-index: 999; +} +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} +.video { + display: flex; + flex-direction: row; + gap: 0.75rem; + align-items: center; + margin-top: 1em; +} +.video .link { + display: flex; + flex-direction: row; + flex: 1 1 0; + gap: 0.125rem; + outline-offset: 4px; +} +.video .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 8px; + gap: 0.125rem; +} +.video-title { + font-size: 15px; + line-height: 1.25; + font-weight: 700; + color: #23272f; +} +.video-title.loading { + height: 20px; + width: 80px; + border-radius: 0.5rem; +} +.video-description { + color: #5e687e; + font-size: 13px; + border-radius: 0.5rem; +} +.video-description.loading { + height: 15px; + width: 100px; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +Notice how the fallback appears immediately when tapping the button, which keeps our UI feeling responsive to user actions. Additionally, once the video has been loaded, toggling it is instant. + +There are other patterns you can use depending on what effect you want to achieve. To learn more, check out the docs on [animating with Suspense](/reference/react/ViewTransition#animating-from-suspense-content). + +--- + +In addition to animating fallbacks, View Transitions act as a way to opt images or fonts into triggering Suspense while they load. + +This lets you avoid the browser's default behavior where images or fonts may flicker in whenever they happen to finish loading, and instead build coordinated loading sequences that consider all of a component's resources. + +Wrap images or fonts inside of `<ViewTransition>` to trigger Suspense while they load: + +```js +<ViewTransition> + <Suspense fallback={<Fallback />}> + <img src={imageSrc} /> + + <style href={fontSrc} precedence="default"> + {`@font-face { + font-family: 'Fancy'; + src: url(${fontSrc}) format('truetype'); + font-display: swap; + }`} + </style> + </Suspense> +</ViewTransition> +``` + +Here's an example of a component that suspends until its data, image, and font have all loaded: + + +<Sandpack> + +```js +import { ViewTransition, Suspense, use, useState, startTransition } from 'react'; +import { fetchQuote } from './data.js'; +import { freshStylesheetUrl, freshImageUrl } from './resources.js'; +import { ProfileCard, ProfileCardLoading } from './ProfileCard.js'; +import { VanillaProfileCard } from './VanillaProfileCard.js'; + +export default function App() { + const [resources, setResources] = useState(null); + return ( + <> + <button + onClick={() => { + startTransition(() => { + setResources({ + quotePromise: fetchQuote(), + stylesheet: freshStylesheetUrl(), + image: freshImageUrl(), + }); + }); + }}> + Show profile + </button> + + {resources && ( + <ViewTransition update='auto' default='none'> + <Suspense fallback={<ProfileCardLoading />}> + <ProfileCard resources={resources} /> + </Suspense> + </ViewTransition> + )} + + <hr /> + + <VanillaProfileCard /> + </> + ); +} +``` + +```js src/ProfileCard.js +import { use } from 'react'; + +export function ProfileCard({ resources }) { + const quote = use(resources.quotePromise); + return ( + <> + <link rel="stylesheet" href={resources.stylesheet} precedence="default" /> + <div className="profile-card"> + <img src={resources.image} alt="Jack Pope" width={80} height={80} /> + <div> + <p className="name">Jack Pope</p> + <p className="bio">{quote}</p> + </div> + </div> + </> + ); +} + +export function ProfileCardLoading() { + return ( + <div className="profile-card"> + <div className="avatar-placeholder" /> + <div> + <p className="name name-placeholder"> </p> + <p className="bio bio-placeholder"> </p> + </div> + </div> + ); +} +``` + + +```js src/VanillaProfileCard.js +import { useRef } from 'react'; +import { fetchQuote } from './data.js'; +import { freshStylesheetUrl, freshImageUrl } from './resources.js'; + +export function VanillaProfileCard() { + const ref = useRef(null); + async function show() { + const quote = await fetchQuote(); + const doc = ref.current.contentWindow.document; + doc.open(); + doc.write(` + <style> + body { margin: 0; font-family: sans-serif; } + img { object-fit: cover; } + .profile-card { display: flex; gap: 12px; align-items: center; } + .profile-card img { border-radius: 50%; background: #dfe3e9; } + .name { margin: 0 0 4px; font-family: 'Caveat', sans-serif; font-size: 22px; line-height: 28px; font-weight: bold; } + .bio { margin: 0; font-family: 'Caveat', sans-serif; font-size: 20px; line-height: 26px; } + </style> + <div class="profile-card"> + <img src="${freshImageUrl()}" alt="Jack Pope" width="80" height="80" /> + <div> + <p class="name">Jack Pope</p> + <p class="bio">${quote}</p> + </div> + </div> + <link rel="stylesheet" href="${freshStylesheetUrl()}"> + `); + doc.close(); + } + return ( + <> + <button onClick={show}>Show profile (without React)</button> + <iframe ref={ref} title="Vanilla profile card" className="vanilla-frame" /> + </> + ); +} +``` + +```js src/resources.js hidden +// Add a unique parameter so the resources aren't cached, +// and every run shows the loading state. +export function freshStylesheetUrl() { + return ( + 'https://fonts.googleapis.com/css2?family=Caveat&display=swap' + + '&t=' + + Date.now() + ); +} + +export function freshImageUrl() { + return 'https://react.dev/images/team/jack-pope.jpg?t=' + Date.now(); +} +``` + +```js src/data.js hidden +// Note: the way you would do data fetching depends on +// the framework that you use together with Suspense. + +export async function fetchQuote() { + // Add a fake delay to make waiting noticeable. + await new Promise((resolve) => { + setTimeout(resolve, 250); + }); + return 'The best way to predict the future is to invent it.'; +} +``` + +```css +#root { + min-height: 320px; +} +button { + margin-right: 8px; +} +hr { + margin: 16px 0; +} +img { + object-fit: cover; +} +.profile-card { + display: flex; + gap: 12px; + align-items: center; + margin-top: 1em; +} +.profile-card img { + border-radius: 50%; + background: #dfe3e9; +} +.name { + margin: 0 0 4px; + font-family: 'Caveat', sans-serif; + font-size: 22px; + line-height: 28px; + font-weight: bold; +} +.bio { + margin: 0; + font-family: 'Caveat', sans-serif; + font-size: 20px; + line-height: 26px; +} +.profile-card img { + display: block; +} +.avatar-placeholder { + width: 80px; + height: 80px; + border-radius: 50%; + background: #dfe3e9; +} +.name-placeholder, +.bio-placeholder { + border-radius: 4px; + background: #dfe3e9; + color: transparent; +} +.name-placeholder { + width: 90px; +} +.bio-placeholder { + width: 220px; +} +.vanilla-frame { + display: block; + margin-top: 1em; + border: none; + width: 100%; + height: 110px; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +To learn more about waiting for images, fonts, or stylesheets to load, see the [Suspense docs](/reference/react/Suspense#waiting-for-a-font-to-load). + +--- + +### Fragment Refs {/*fragment-refs*/} + +When you need lower-level control over a component's DOM nodes—for example to attach an event listener, observe visibility, or move focus—you can usually use a ref. But there are some situations where this is difficult: + +- Components that render a group of siblings with no single parent +- Components that don't pass along their `ref` prop to another element + +```js +function Component() { + // How can we work with the list of DOM nodes rendered by this component? + return ( + {posts.map(post => ( + <Heading key={post.id}> + {post.title} + </Heading> + ))} + ) +} +``` + +Adding a wrapper `<div>` just to hold a ref sometimes works, but it can also interfere with your component's styling or layout. Moreover, if a component doesn't expose a `ref` prop, you would need to modify that component to do so, which might be impossible if it comes from a library you don't control. + +Fragment Refs solve these problems by providing a limited set of commonly used DOM methods that work with any React component, regardless of what it renders. + +In 19.3, you can use them by passing a ref directly to a [`<Fragment>`](/reference/react/Fragment). This ref gives you a `FragmentInstance`, which you can use to work with the Fragment's DOM children: + +```js {2,5-6,10} +function Component() { + const fragmentRef = useRef(null); + + useEffect(() => { + const fragmentInstance = fragmentRef.current; + fragmentInstance.focus(); + }, []); + + return ( + <Fragment ref={fragmentRef}> + {posts.map(post => ( + <Heading key={post.id}> + {post.title} + </Heading> + ))} + </Fragment> + ) +} +``` + +The `FragmentInstance` operates on the children's DOM _as a group_, without changing its structure: + +- `addEventListener`, `removeEventListener`, and `dispatchEvent` manage events for first-level children. +- `focus`, `focusLast`, and `blur` move focus across nested children, depth-first. +- `observeUsing` and `unobserveUsing` connect an `IntersectionObserver` or `ResizeObserver`. +- `getClientRects`, `getRootNode`, `compareDocumentPosition`, and `scrollIntoView` let you measure and scroll to the fragment's first-level children. + +Thus, Fragment Refs let you attach behavior to other components without requiring you to modify those component's internals, or without changing the DOM structure that they already produce. + +This example shows an `InView` component with an `onChange` prop that fires whenever its children enter or exit the viewport: + +<Sandpack> + +```js src/App.js active +import { useState } from 'react'; +import Card from './Card'; +import InView from './InView'; + +export default function App() { + const [isVisible, setIsVisible] = useState(true); + + return ( + <div className={isVisible ? 'page visible' : 'page'}> + <div className="filler">Scroll down</div> + + <InView onChange={setIsVisible}> + <Card title="First section" /> + <Card title="Second section" /> + </InView> + + <div className="filler">Scroll up</div> + </div> + ); +} +``` + +```js src/Card.js +export default function Card({ title }) { + return <div className="card">{title}</div>; +} +``` + +```js src/InView.js +import { + Fragment, + useRef, + useLayoutEffect, +} from 'react'; + +export default function InView({ onChange, children }) { + const fragmentRef = useRef(null); + + useLayoutEffect(() => { + const visibleElements = new Set(); + const observer = new IntersectionObserver( + (entries) => { + entries.forEach(e => { + if (e.isIntersecting) { + visibleElements.add(e.target); + } else { + visibleElements.delete(e.target); + } + }); + onChange(visibleElements.size > 0); + } + ); + const fragmentInstance = fragmentRef.current; + fragmentInstance.observeUsing(observer); + return () => { + fragmentInstance.unobserveUsing(observer); + }; + }, [onChange]); + + return ( + <Fragment ref={fragmentRef}> + {children} + </Fragment> + ); +} +``` + +```css +.page { + transition: background 0.3s; +} + +.page.visible { + background: #d4edda; +} + +.filler { + height: 500px; + display: flex; + align-items: center; + justify-content: center; + color: #aaa; + font-size: 14px; +} + +.card { + padding: 16px; + background: white; + border: 1px solid #ddd; + border-radius: 8px; + margin: 8px 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.08); + font-weight: 600; + font-size: 14px; +} +``` + + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +Notice how `InView` is able to add behavior to its children, even though there's no single parent DOM element, and in spite of `Card` not exposing a `ref` prop. + +To learn more about working with Fragment Refs, see the [`<Fragment>` docs](/reference/react/Fragment). + +--- + +## New React DOM Features {/*new-react-dom-features*/} + +### `browser` {/*browser*/} + +If your app uses server rendering, your components will render in two different environments: + +- On the server, components render to produce the initial HTML +- On the client, components render to enrich that HTML with event handlers + +Most of time, your components should be able to produce HTML that matches their initial client-rendered output, ensuring they hydrate correctly while still letting users see as much content as possible on the initial load. + +But in rare cases, a component may not be able to produce meaningful UI on the server. For example, it might depend on a browser-only API like `localStorage`, or it might read from the browser's local timezone. In these cases, you may want to opt that component out of server rendering altogether. + +Previously, you might do this using some state that you'd update in an effect, or by checking for the presence of browser APIs like `window`: + +```js +function Component() { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true) + }, []) + + // ... +} + +function Component() { + const isBrowser = typeof window !== 'undefined'; + + // ... +} +``` + +In 19.3, React now includes a first-class API for this technique. + +A component can call `use(browser())` to opt out of server-side rendering: + +```js {5} +import { use } from 'react'; +import { browser } from 'react-dom'; + +function Component() { + use(browser()); + + // ... +} +``` + +This will trigger Suspense on the server, but _not_ in the client. During server-side rendering, the nearest Suspense boundary's fallback will show in the HTML. Once the component is hydrated on the client, `use(browser())` does not suspend, allowing the component to continue rendering as normal. + +Here's an example of a component that renders the local time zone from your device. Press **Reload** to see the initial HTML followed by React's first render on the client: + +<Sandpack> + +```js +import { Suspense, use } from 'react'; +import { browser } from 'react-dom'; + +function TimeZone() { + use(browser()); + const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone; + + return <p>{timeZone}</p> +} + +export default function App() { + return ( + <> + <p>Your current time zone is:</p> + <Suspense fallback="Loading..."> + <TimeZone /> + </Suspense> + </> + ); +} +``` + + +```js src/Document.js hidden +import App from './App.js'; + +export default function Document() { + return ( + <html lang="en"> + <head> + <title>Event details + + + + + + + ); +} +``` + +```js src/index.js hidden +import { hydrateRoot } from 'react-dom/client'; +import { renderToReadableStream } from 'react-dom/server'; +import Document from './Document.js'; +import { flushReadableStreamToFrame } from './demo-helpers.js'; +import './styles.css'; + +async function main(frame) { + const stream = await renderToReadableStream(); + await flushReadableStreamToFrame(stream, frame); + + // Wait so both the fallback and hydrated content are visible. + await new Promise(resolve => setTimeout(resolve, 1200)); + hydrateRoot(frame.contentDocument, ); +} + +main(document.getElementById('preview')); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + const reader = readable.getReader(); + + while (true) { + const {done, value} = await reader.read(); + if (done) { + break; + } + doc.write(decoder.decode(value, {stream: true})); + } + + doc.write(decoder.decode()); + doc.close(); +} +``` + +```html public/index.html hidden + + + + + Conditional browser rendering + + + + + +``` + +```css src/styles.css hidden +iframe { + width: 100%; + height: 240px; + border: 0; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + + + +Because TimeZone suspends on the server, the initial HTML includes the Suspense fallback. After a small artificial delay, React hydrates the page, allowing the component to render as normal in the browser. + +Thus, for components that cannot produce meaningful UI during server rendering, `browser` lets you use Suspense for their loading states, allowing them to participate with other components that suspend until they're ready to render. + +--- + +Like other calls to `use`, `use(browser())` can be called inside a conditional statement or after an early return. This lets you write components or custom Hooks that can opt out of server rendering based on a condition, such as the value of a prop. + +Here's the same example from above, except now our TimeZone component accepts an optional default value it can render as part of the initial HTML: + + + +```js +import { Suspense, use } from 'react'; +import { browser } from 'react-dom'; + +function TimeZone({ defaultValue }) { + if (defaultValue) { + return

{defaultValue}

; + } + + use(browser()); + const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone; + + return

{localTimeZone}

+} + +export default function App() { + return ( + <> +
+

The event's time zone is:

+ +
+ +
+ +
+

Your current time zone is:

+ + + +
+ + ); +} +``` + + +```js src/Document.js hidden +import App from './App.js'; + +export default function Document() { + return ( + + + Event details + + + + + + + ); +} +``` + +```js src/index.js hidden +import { hydrateRoot } from 'react-dom/client'; +import { renderToReadableStream } from 'react-dom/server'; +import Document from './Document.js'; +import { flushReadableStreamToFrame } from './demo-helpers.js'; +import './styles.css'; + +async function main(frame) { + const stream = await renderToReadableStream(); + await flushReadableStreamToFrame(stream, frame); + + // Wait so both the fallback and hydrated content are visible. + await new Promise(resolve => setTimeout(resolve, 1200)); + hydrateRoot(frame.contentDocument, ); +} + +main(document.getElementById('preview')); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + const reader = readable.getReader(); + + while (true) { + const {done, value} = await reader.read(); + if (done) { + break; + } + doc.write(decoder.decode(value, {stream: true})); + } + + doc.write(decoder.decode()); + doc.close(); +} +``` + +```html public/index.html hidden + + + + + Conditional browser rendering + + + + + +``` + +```css src/styles.css hidden +iframe { + width: 100%; + height: 240px; + border: 0; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + + + +Notice how TimeZone only suspends in the second case, when no default is provided. + +Another useful example of this pattern is opting a data-fetching Hook like `useQuery` out of server rendering, unless that query's initial data was passed in (for example from a Server Component or framework's loader function): + +```js {3} +function useBrowserQuery(query, options) { + if (options.initialData === undefined) { + use(browser()); + } + + return useQuery(query, options); +} + +function ProductDetails({ productId, initialData }) { + const product = useBrowserQuery(`/api/products/${productId}`, { + initialData, + }); + + return

{product.name}

; +} +``` + +Now, the ProductDetails component can be included in the HTML, provided it receives `initialData` during server rendering. If not, it suspends until it gets rendered in the browser, at which point `useQuery` can fetch the data or read from its cache as normal. + +To learn more about `browser`, [check out the docs](/reference/react-dom/browser). + +--- + +### Trusted Types support {/*trusted-types-support*/} + +React 19.3 integrates with the browser [Trusted Types API](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API), a security feature that helps prevent DOM-based XSS attacks. When a site enforces Trusted Types with `Content-Security-Policy: require-trusted-types-for 'script'`, the browser requires that values passed to injection sinks like `innerHTML` are typed objects (`TrustedHTML`, `TrustedScript`, `TrustedScriptURL`) created through your sanitization policies, rather than raw strings. + +Previously, React always coerced values to strings (via `'' + value`) before passing them to DOM APIs, which turned Trusted Types objects back into plain strings the browser would reject. React now passes these values through without coercion, so the browser can validate them and your Trusted Types policies work as intended. + +--- + +## New React Server Components Features {/*new-react-server-components-features*/} + +### `` can be rendered directly in Server Components {/*context-can-be-rendered-directly-in-server-components*/} + +While Server Components can't _create_ Context, they can _render_ Context by importing it from a `'use client'` module. + +Previously, this required the client module to export a separate wrapper component, often called a Provider: + +```js {7-9} +// user-context.js +'use client'; +import { createContext } from 'react'; + +export const UserContext = createContext(null); + +export function UserProvider({ currentUser, children }) { + return {children}; +} +``` + +```js {8} +// server-component.js +import { UserProvider } from './user-context'; + +export async function Layout({ children }) { + const currentUser = await getCurrentUser(); + + return ( + + {children} + + ) +} +``` + +Notice that in this example, the provider does nothing other than pass the prop from the Server Component directly to the Context. + +In React 19.3, Server Components can import and render Context directly from a `'use client'` module, without an additional wrapping component: + +```js {5} +// user-context.js +'use client'; +import { createContext } from 'react'; + +export const UserContext = createContext(null); +``` + +```js {8} +// server-component.js +import { UserContext } from './user-context'; + +export async function Layout({ children }) { + const currentUser = await getCurrentUser(); + + return ( + + {children} + + ) +} +``` + +This is especially useful for Contexts that solely exist to allow Server Components to share some data with the rest of the client tree. + + +--- + +## Changelog {/*changelog*/} + +Other notable changes +- `react`: Render Transitions independently instead of entangling them into a single render, so a slow Transition no longer holds up unrelated ones [#37290](https://github.com/react/react/pull/37290) +- `react-dom`: Double invoke Effects in Strict Mode during hydration, matching client-rendered roots [#35961](https://github.com/react/react/pull/35961) +- `react`: Add a warning when `use` is used incorrectly in a conditional [#37104](https://github.com/react/react/pull/37104) +- `react`: Rename "form state" to "action state" in `useActionState` error messages [#35790](https://github.com/react/react/pull/35790) +- `react-dom`: Add support for `onFullscreenChange` and `onFullscreenError` events [#34621](https://github.com/react/react/pull/34621) +- `react-dom`: Add support for the `maskType` SVG property [#35921](https://github.com/react/react/pull/35921) +- `react-dom`: Support `fetchPriority` for module resources [#36835](https://github.com/react/react/pull/36835) +- `react-dom`: Fire `onReset` when React automatically resets a form after a Server Action [#35176](https://github.com/react/react/pull/35176) +- `react-dom`: Include the `submitter` in `submit` events [#35590](https://github.com/react/react/pull/35590) +- `react-dom`: Recognize `credentialless` as a boolean attribute on iframes [#36148](https://github.com/react/react/pull/36148) +- `react-dom`: Batch updates from `resize` events until the next frame [#35117](https://github.com/react/react/pull/35117) +- `react-server`: Transport `Error.cause` [#35810](https://github.com/react/react/pull/35810) and `AggregateError.errors` [#36156](https://github.com/react/react/pull/36156) to the client +- `react-server`: Add support for `` in Flight [#34697](https://github.com/react/react/pull/34697) + +Notable bug fixes + +- `react`: Fix `useDeferredValue` getting stuck on an old value [#36134](https://github.com/react/react/pull/36134) +- `react`: Fix context propagation into Suspense fallbacks [#36160](https://github.com/react/react/pull/36160) and through suspended Suspense boundaries [#35839](https://github.com/react/react/pull/35839) +- `react`: Fix a hang when updating a dehydrated Suspense boundary inside a hidden tree [#37135](https://github.com/react/react/pull/37135) +- `react`: Fix `useSyncExternalStore` missing store mutations that happened while an `` tree was hidden [#36947](https://github.com/react/react/pull/36947) +- `react`: Fix `useEffectEvent` to read the latest values in `forwardRef` and `memo` components [#34831](https://github.com/react/react/pull/34831) +- `react`: Fix form status resetting when component state is updated [#34075](https://github.com/react/react/pull/34075) +- `react`: Fix several Fast Refresh bugs with `lazy`, `memo`, and edits that change a component's kind [#36965](https://github.com/react/react/pull/36965), [#36964](https://github.com/react/react/pull/36964), [#36963](https://github.com/react/react/pull/36963), [#36950](https://github.com/react/react/pull/36950) +- `react`: Fix a bug where `` was still hoisted to `<head>` after the `<Activity>` containing the `<title>` changed mode from `visible` to `hidden` [#34983](https://github.com/react/react/pull/34983) +- `react`: Don't let errors escape a hidden `<Activity>` [#35074](https://github.com/react/react/pull/35074) +- `react`: Hide portal contents rendered inside a hidden `<Activity>` [#35091](https://github.com/react/react/pull/35091) +- `react`: Don't reference the internal `<Offscreen>` type in error messages [#35763](https://github.com/react/react/pull/35763) +- `react-dom`: Fix focus for delegated and already-focused elements [#36010](https://github.com/react/react/pull/36010) +- `react-dom`: Fix a `FragmentInstance` listener leak by normalizing capture options per the DOM spec [#36047](https://github.com/react/react/pull/36047) +- `react-dom`: Fix a `<ViewTransition>` crash in Mobile Safari [#35337](https://github.com/react/react/pull/35337) +- `react-dom`: Fix a `<ViewTransition>` crash with `SuspenseList` [#35520](https://github.com/react/react/pull/35520) +- `react-dom`: Update `defaultValue` for `type="number"` inputs to match other input types [#36980](https://github.com/react/react/pull/36980) +- `react-dom`: Avoid setting `innerHTML` when it hasn't changed [#36949](https://github.com/react/react/pull/36949) +- `react-dom`: Fix a false-positive hydration mismatch on `nonce` attributes [#37030](https://github.com/react/react/pull/37030) +- `react-dom`: Fix `react-dom/server` hanging on Deno [#35235](https://github.com/react/react/pull/35235) +- `react-server`: Fix dropped `FormData` entries in `decodeReplyFromBusboy` [#36468](https://github.com/react/react/pull/36468) +- `react-server`: Fix a stack overflow with deep async chains [#35612](https://github.com/react/react/pull/35612) and a `RangeError` from exponential debug info growth [#37481](https://github.com/react/react/pull/37481) + +For a full list of changes, please see the [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md). + +--- + +_Thanks to [Sam Selikoff](https://x.com/samselikoff) for writing this post, and to [Matt Carroll](https://mattcarrollcode.com/), [Dan Abramov](https://bsky.app/profile/danabra.mov), and [Andrew Clark](https://x.com/acdlite) for reviewing this post._ diff --git a/src/content/blog/index.md b/src/content/blog/index.md index c75265fdb..b8b83a3dc 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -12,6 +12,12 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account <div className="sm:-mx-5 flex flex-col gap-5 mt-12"> +<BlogCard title="React 19.3" date="September 9, 2026" url="/blog/2026/09/09/react-19-3"> + +React 19.3 adds new features like View Transitions, Fragment Refs, browser(), Trusted Types, and more. In this post ... + +</BlogCard> + <BlogCard title="The React Foundation: A New Home for React Hosted by the Linux Foundation" date="February 24, 2026" url="/blog/2026/02/24/the-react-foundation"> The React Foundation has officially launched under the Linux Foundation. @@ -150,7 +156,7 @@ The React team is excited to share a few updates: ### All release notes {/*all-release-notes*/} -Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md`](https://github.com/facebook/react/blob/main/CHANGELOG.md) file in the React repository, as well as on the [Releases](https://github.com/facebook/react/releases) page. +Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md`](https://github.com/react/react/blob/main/CHANGELOG.md) file in the React repository, as well as on the [Releases](https://github.com/react/react/releases) page. --- diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index bfe67f55a..7c84285f9 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -4,7 +4,7 @@ title: Acknowledgements <Intro> -React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/facebook/react/graphs/contributors) +React was originally created by [Jordan Walke.](https://github.com/jordwalke) Today, React has a [dedicated full-time team working on it](/community/team), as well as over a thousand [open source contributors.](https://github.com/react/react/graphs/contributors) </Intro> diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index ada81a60b..f3ae269bb 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,22 +10,41 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### React Paris 2026 {/*react-paris-2026*/} -March 26 - 27, 2026. In-person in Paris, France (hybrid event) +### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/} +September 10-11, 2026. In-person in Zurich, Switzerland -[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) +[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 Alicante 2026 {/*react-alicante-2026*/} +Sep 24 - 26, 2026. In-person in Alicante + +[Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante) + +### CityJS Athens 2026 {/*cityjs-athens-2026*/} +October 21-23, 2026. In-person in Athens + +[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + + +## Past Conferences {/*past-conferences*/} + + +### React Conf Japan 2027 {/*react-conf-japan-2027*/} +April 24, 2027. In-person in Tokyo, Japan + +[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp) ### CityJS London 2026 {/*cityjs-london-2026*/} April 14-17, 2026. In-person in London [Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) -### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/} -September 10-11, 2026. In-person in Zurich, Switzerland -[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 Paris 2026 {/*react-paris-2026*/} +March 26 - 27, 2026. In-person in Paris, France (hybrid event) + +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) -## Past Conferences {/*past-conferences*/} ### CityJS New Delhi 2026 {/*cityjs-newdelhi-2026*/} February 12-13, 2026. In-person in New Delhi, India @@ -219,7 +238,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) @@ -261,7 +280,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 @@ -284,7 +303,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 cf8f9323b..9bd0d09cf 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -10,7 +10,7 @@ React has a community of millions of developers. On this page we've listed some ## Code of Conduct {/*code-of-conduct*/} -Before participating in React's communities, [please read our Code of Conduct.](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. +Before participating in React's communities, [please read our Code of Conduct.](https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. ## Stack Overflow {/*stack-overflow*/} diff --git a/src/content/community/team.md b/src/content/community/team.md index da4ce0791..4e307463d 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -4,100 +4,144 @@ title: "Meet the Team" <Intro> -React development is led by a dedicated team working full time at Meta. It also receives contributions from people all over the world. +React development is led by contributors from companies and communities all over the world. </Intro> -## React Core {/*react-core*/} +React work is organized into working groups, each responsible for an area of the project such as Server, DOM, Fiber, Docs & Community, Compiler, DevX, and React Native. Each working group is represented on the React Leadership Council, which coordinates direction across the project. -The React Core team members work full time on the core component APIs, the engine that powers React DOM and React Native, React DevTools, and the React documentation website. +## Leadership Council {/*leadership-council*/} -Current members of the React team are listed in alphabetical order below. - -<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" threads="acdlite" title="Engineer at Vercel"> +<TeamMember name="Andrew Clark" permalink="andrew-clark" photo="/images/team/acdlite.jpg" github="acdlite" twitter="acdlite" threads="acdlite" title="Engineer at Vercel" group="Fiber*, DOM"> Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day. </TeamMember> -<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" bsky="danabra.mov" title="Independent Engineer"> - Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbÃĨge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends. +<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta" group="DOM*, Fiber"> + Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX. </TeamMember> -<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="elicwhite" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta"> - Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks. +<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Engineer at Meta" group="Compiler*"> + Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s). </TeamMember> -<TeamMember name="Hendrik Liebau" permalink="hendrik-liebau" photo="/images/team/hendrik.jpg" github="unstubbable" bsky="unstubbable.bsky.social" twitter="unstubbable" title="Engineer at Vercel"> - Hendrik’s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop. -</TeamMember> +<TeamMember name="Moti Zilberman" permalink="moti-zilberman" photo="/images/team/gh-motiz88.jpg" github="motiz88" title="Engineer at Meta" group="DevX*" /> -<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta"> - Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX. +<TeamMember name="Nicola Corti" permalink="nicola-corti" photo="/images/team/gh-cortinico.jpg" github="cortinico" twitter="cortinico" title="Engineer at Meta" group="React Native*, Docs & Community" /> + +<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickyfm" threads="rickhanlonii" bsky="ricky.fm" title="Engineer at Meta" group="Docs & Community*, DOM, Fiber, Server, DevX"> + Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template. </TeamMember> -<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta"> - Jason abandoned embedded C for a career in front-end engineering and never looked back. Armed with esoteric CSS knowledge and a passion for beautiful UI, Jason joined Facebook in 2010, where he now feels privileged to have seen JavaScript development come of age. Though he may not understand how `for...of` loops work, he loves getting to work with brilliant people on projects that enable amazing UX. +<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel" group="Server*, DOM, Fiber, DevX"> + Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community. </TeamMember> -<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" threads="joesavona" title="Engineer at Meta"> - Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family. +## Working Group members {/*working-group-members*/} + +<TeamMember name="Alex Hunt" permalink="alex-hunt" photo="/images/team/gh-huntie.jpg" github="huntie" twitter="huntie" title="Engineer at Meta" group="DevX, React Native" /> + +<TeamMember name="Aurora Scharff" permalink="aurora-scharff" photo="/images/team/gh-aurorascharff.jpg" github="aurorascharff" title="Engineer at Vercel" group="Docs & Community" /> + +<TeamMember name="Bartosz Kaszubowski" permalink="bartosz-kaszubowski" photo="/images/team/gh-simek.png" github="simek" bsky="simek.dev" title="Engineer" group="Docs & Community" /> + +<TeamMember name="Brent Vatne" permalink="brent-vatne" photo="/images/team/gh-brentvatne.jpg" github="brentvatne" title="Engineer at Expo" group="React Native" /> + +<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" bsky="danabra.mov" title="Engineer at Vercel" group="Docs & Community"> + Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbÃĨge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends. </TeamMember> -<TeamMember name="Jordan Brown" permalink="jordan-brown" photo="/images/team/jordan.jpg" github="jbrown215" title="Engineer at Meta"> - Jordan started coding by building iPhone apps, where he was pushing and popping view controllers before he knew that for-loops were a thing. He enjoys working on technology that developers love, which naturally drew him to React. Outside of work he enjoys reading, kiteboarding, and playing guitar. +<TeamMember name="Hendrik Liebau" permalink="hendrik-liebau" photo="/images/team/hendrik.jpg" github="unstubbable" bsky="unstubbable.bsky.social" twitter="unstubbable" title="Engineer at Vercel" group="Server"> + Hendrik’s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop. </TeamMember> -<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel"> +<TeamMember name="Jordan Eldredge" permalink="jordan-eldredge" photo="/images/team/gh-captbaritone.jpg" github="captbaritone" title="Engineer at Meta" group="Server" /> + +<TeamMember name="Josh Story" permalink="josh-story" photo="/images/team/josh.jpg" github="gnoff" bsky="storyhb.com" title="Engineer at Vercel" group="DOM, Fiber, Server"> Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking. </TeamMember> -<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta"> +<TeamMember name="Kevin Gozali" permalink="kevin-gozali" photo="/images/team/gh-fkgozali.jpg" github="fkgozali" title="Engineer at Meta" group="React Native" /> + +<TeamMember name="Khalef Hosany" permalink="khalef-hosany" photo="/images/team/gh-khalef1.jpg" github="Khalef1" title="Engineer at Microsoft" group="React Native" /> + +<TeamMember name="Krzysztof Magiera" permalink="krzysztof-magiera" photo="/images/team/gh-kmagiera.jpg" github="kmagiera" title="Engineer at Software Mansion" group="React Native" /> + +<TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Cursor" group="Compiler"> Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda. </TeamMember> -<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" threads="mattcarrollcode" title="Developer Advocate at Meta"> +<TeamMember name="Matt Carroll" permalink="matt-carroll" photo="/images/team/matt-carroll.png" github="mattcarrollcode" twitter="mattcarrollcode" threads="mattcarrollcode" title="Developer Advocate at Meta" group="Docs & Community"> Matt stumbled into coding, and since then, has become enamored with creating things in communities that can’t be created alone. Prior to React, he worked on YouTube, the Google Assistant, Fuchsia, and Google Cloud AI and Evernote. When he's not trying to make better developer tools he enjoys the mountains, jazz, and spending time with his family. </TeamMember> -<TeamMember name="Mike Vitousek" permalink="mike-vitousek" photo="/images/team/mike.jpg" github="mvitousek" title="Engineer at Meta"> - Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest. -</TeamMember> +<TeamMember name="Michael Leon" permalink="michael-leon" photo="/images/team/gh-fbmal7.jpg" github="fbmal7" title="Engineer at Meta" group="DevX" /> -<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" threads="z_mofei" title="Engineer at Meta"> - Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s). +<TeamMember name="Michał Pierzchała" permalink="michal-pierzchala" photo="/images/team/gh-thymikee.jpg" github="thymikee" title="Engineer at Callstack" group="React Native" /> + +<TeamMember name="Mike Vitousek" permalink="mike-vitousek" photo="/images/team/mike.jpg" github="mvitousek" title="Engineer at Meta" group="Compiler"> + Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on JavaScript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest. </TeamMember> -<TeamMember name="Pieter Vanderwerff" permalink="pieter-vanderwerff" photo="/images/team/pieter.jpg" github="pieterv" threads="pietervanderwerff" title="Engineer at Meta"> - Pieter studied building science but after failing to get a job he made himself a website and things escalated from there. At Meta, he enjoys working on performance, languages and now React. When he's not programming you can find him off-road in the mountains. +<TeamMember name="Pieter De Baets" permalink="pieter-de-baets" photo="/images/team/gh-javache.jpg" github="javache" title="Engineer at Meta" group="Compiler, Fiber, React Native" /> + +<TeamMember name="Riccardo Cipolleschi" permalink="riccardo-cipolleschi" photo="/images/team/gh-cipolleschi.png" github="cipolleschi" twitter="CipolleschiR" title="Engineer at Meta" group="Docs & Community, React Native" /> + +<TeamMember name="Rob Hogan" permalink="rob-hogan" photo="/images/team/gh-robhogan.jpg" github="robhogan" twitter="robjhogan" title="Engineer at Meta" group="DevX" /> + +<TeamMember name="RubÊn Norte" permalink="ruben-norte" photo="/images/team/gh-rubennorte.jpg" github="rubennorte" title="Engineer at Meta" group="Fiber, React Native" /> + +<TeamMember name="Ruslan Lesiutin" permalink="ruslan-lesiutin" photo="/images/team/lesiutin.jpg" github="hoxyq" twitter="ruslanlesiutin" threads="lesiutin" title="Engineer at Meta" group="DOM, DevX"> + Ruslan's introduction to UI programming started when he was a kid by manually editing HTML templates for his custom gaming forums. Somehow, he ended up majoring in Computer Science. He enjoys music, games, and memes. Mostly memes. </TeamMember> -<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" bsky="ricky.fm" title="Engineer at Meta"> - Ricky majored in theoretical math and somehow found himself on the React Native team for a couple years before joining the React team. When he's not programming you can find him snowboarding, biking, climbing, golfing, or closing GitHub issues that do not match the issue template. +<TeamMember name="Sam Selikoff" permalink="sam-selikoff" photo="/images/team/gh-samselikoff.jpg" github="samselikoff" title="Engineer at Vercel" group="Docs & Community" /> + +<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" threads="sophiebits" personal="sophiebits.com" title="Independent Engineer" group="Docs & Community, DOM, Fiber"> + Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and “providing value”. </TeamMember> -<TeamMember name="Ruslan Lesiutin" permalink="ruslan-lesiutin" photo="/images/team/lesiutin.jpg" github="hoxyq" twitter="ruslanlesiutin" threads="lesiutin" title="Engineer at Meta"> - Ruslan's introduction to UI programming started when he was a kid by manually editing HTML templates for his custom gaming forums. Somehow, he ended up majoring in Computer Science. He enjoys music, games, and memes. Mostly memes. +<TeamMember name="Steven Moyes" permalink="steven-moyes" photo="/images/team/gh-stmoy.jpg" github="stmoy" title="Engineer at Amazon" group="React Native" /> + +<TeamMember name="Vitali Zaidman" permalink="vitali-zaidman" photo="/images/team/gh-vzaidman.jpg" github="vzaidman" title="Engineer at Meta" group="DevX" /> + +## Advisors {/*advisors*/} + +<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="elicwhite" twitter="Eli_White" threads="elicwhite" title="Engineer at Meta"> + Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks. </TeamMember> -<TeamMember name="Sebastian MarkbÃĨge" permalink="sebastian-markbÃĨge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Engineer at Vercel"> - Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React. +<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta"> + Jason abandoned embedded C for a career in front-end engineering and never looked back. Armed with esoteric CSS knowledge and a passion for beautiful UI, Jason joined Facebook in 2010, where he now feels privileged to have seen JavaScript development come of age. Though he may not understand how `for...of` loops work, he loves getting to work with brilliant people on projects that enable amazing UX. </TeamMember> -<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel"> - Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community. +<TeamMember name="Jimmy Lai" permalink="jimmy-lai" photo="/images/team/jimmy-lai.jpg" github="feedthejim" title="Engineering Director, Next.js at Vercel"> + Like many others, Jimmy started programming with the hopes of being able to work in the gaming industry. Fast forward a few years, he somehow decided that React and JavaScript were pretty fun and that helping other developers build fast experiences was a more interesting life goal. After starting his career at Meta, working on product infrastructure and (briefly) on React Native, Jimmy now works at Vercel, where he helps his team build Next.js. He sadly does not get much time for video games anymore. </TeamMember> -<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" threads="sethwebster" personal="sethwebster.com" title="Engineering Manager at Meta"> +<TeamMember name="Seth Webster" permalink="seth-webster" photo="/images/team/seth.jpg" github="sethwebster" twitter="sethwebster" threads="sethwebster" personal="sethwebster.com" title="Executive Director, React Foundation, Chief Developer Evangelist at Expo"> Seth started programming as a kid growing up in Tucson, AZ. After school, he was bitten by the music bug and was a touring musician for about 10 years before returning to *work*, starting with Intuit. In his spare time, he loves [taking pictures](https://www.sethwebster.com) and flying for animal rescues in the northeastern United States. </TeamMember> -<TeamMember name="Sophie Alpert" permalink="sophie-alpert" photo="/images/team/sophiebits.jpg" github="sophiebits" twitter="sophiebits" threads="sophiebits" personal="sophiebits.com" title="Independent Engineer"> - Four days after React was released, Sophie rewrote the entirety of her then-current project to use it, which she now realizes was perhaps a bit reckless. After she became the project's #1 committer, she wondered why she wasn't getting paid by Facebook like everyone else was and joined the team officially to lead React through its adolescent years. Though she quit that job years ago, somehow she's still in the team's group chats and “providing value”. +## Emeritus {/*emeritus*/} + +<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" threads="joesavona" title="Engineer at Meta"> + Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket.js, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family. +</TeamMember> + +<TeamMember name="Jordan Brown" permalink="jordan-brown" photo="/images/team/jordan.jpg" github="jbrown215" title="Engineer at Meta"> + Jordan started coding by building iPhone apps, where he was pushing and popping view controllers before he knew that for-loops were a thing. He enjoys working on technology that developers love, which naturally drew him to React. Outside of work he enjoys reading, kiteboarding, and playing guitar. +</TeamMember> + +<TeamMember name="Pieter Vanderwerff" permalink="pieter-vanderwerff" photo="/images/team/pieter.jpg" github="pieterv" threads="pietervanderwerff" title="Engineer at Meta"> + Pieter studied building science but after failing to get a job he made himself a website and things escalated from there. At Meta, he enjoys working on performance, languages and now React. When he's not programming you can find him off-road in the mountains. +</TeamMember> + +<TeamMember name="Sebastian MarkbÃĨge" permalink="sebastian-markbÃĨge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" threads="sebmarkbage" title="Engineer at Vercel"> + Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React. </TeamMember> <TeamMember name="Yuzhi Zheng" permalink="yuzhi-zheng" photo="/images/team/yuzhi.jpg" github="yuzhi" twitter="yuzhiz" threads="yuzhiz" title="Engineering Manager at Meta"> Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects. </TeamMember> -## Past contributors {/*past-contributors*/} - You can find the past team members and other people who significantly contributed to React over the years on the [acknowledgements](/community/acknowledgements) page. 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/versioning-policy.md b/src/content/community/versioning-policy.md index a61d19942..2e3edb617 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -136,7 +136,7 @@ If you're the author of a third party React framework, library, developer tool, ``` - Run your test suite against the updated packages. - If everything passes, great! You can expect that your project will work with the next minor React release. -- If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/facebook/react/issues). +- If something breaks unexpectedly, please let us know by [filing an issue](https://github.com/react/react/issues). A project that uses this workflow is Next.js. You can refer to their [CircleCI configuration](https://github.com/zeit/next.js/blob/c0a1c0f93966fe33edd93fb53e5fafb0dcd80a9e/.circleci/config.yml) as an example. @@ -166,4 +166,4 @@ If a feature is not documented, they may be accompanied by an [RFC](https://gith We will post to the [React blog](/blog) when we're ready to announce new experiments, but that doesn't mean we will publicize every experiment. -You can always refer to our public GitHub repository's [history](https://github.com/facebook/react/commits/main) for a comprehensive list of changes. +You can always refer to our public GitHub repository's [history](https://github.com/react/react/commits/main) for a comprehensive list of changes. diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 5c87a3e79..0e84780fa 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -139,73 +139,73 @@ export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; ``` @@ -423,7 +423,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); @@ -531,7 +531,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); 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 8a2142cf9..182ad54bb 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,7 @@ If your app has constraints not well-served by existing frameworks, you prefer t #### Consider using a framework {/*consider-using-a-framework*/} -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. +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. For example, if in the future your app needs support for server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC), you will have to implement those on your own. Similarly, future React features that require integrating at the framework level will have to be implemented on your own if you want to use them. @@ -132,12 +132,12 @@ Since the build tool you select only supports single page apps (SPAs), you'll ne * **React Server Components (RSC)** lets you mix build-time, server-only, and interactive components in a single React tree. RSC can improve performance, but it currently requires deep expertise to set up and maintain. See [Parcel's RSC examples](https://github.com/parcel-bundler/rsc-examples). -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. +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. Using the right rendering strategy for the right routes can decrease the time it takes for the first byte of content to be loaded ([Time to First Byte](https://web.dev/articles/ttfb)), the first piece of content to render ([First Contentful Paint](https://web.dev/articles/fcp)), and the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)). ### And more... {/*and-more*/} -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. +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. +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. diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index f6ed669ab..2533a53d8 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -458,7 +458,7 @@ export default function Menu() { return ( <> - <h2>What's your travel snack?</h2> + <h2>What's your travel snack?</h2> <ul> {items.map((item, index) => ( <li key={item.id}> @@ -804,7 +804,7 @@ export const initialTravelPlan = { }, { id: 48, title: 'Green Hill', - childPlaces: [] + childPlaces: [] }] }] }; @@ -882,7 +882,7 @@ export const initialTravelPlan = { id: 2, title: 'Africa', childIds: [3, 4, 5, 6 , 7, 8, 9] - }, + }, 3: { id: 3, title: 'Botswana', @@ -902,7 +902,7 @@ export const initialTravelPlan = { id: 6, title: 'Madagascar', childIds: [] - }, + }, 7: { id: 7, title: 'Morocco', @@ -921,7 +921,7 @@ export const initialTravelPlan = { 10: { id: 10, title: 'Americas', - childIds: [11, 12, 13, 14, 15, 16, 17, 18], + childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { id: 11, @@ -937,7 +937,7 @@ export const initialTravelPlan = { id: 13, title: 'Barbados', childIds: [] - }, + }, 14: { id: 14, title: 'Canada', @@ -966,7 +966,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, @@ -1001,7 +1001,7 @@ export const initialTravelPlan = { 26: { id: 26, title: 'Europe', - childIds: [27, 28, 29, 30, 31, 32, 33], + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, @@ -1041,7 +1041,7 @@ export const initialTravelPlan = { 34: { id: 34, title: 'Oceania', - childIds: [35, 36, 37, 38, 39, 40, 41], + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, @@ -1218,7 +1218,7 @@ export const initialTravelPlan = { id: 2, title: 'Africa', childIds: [3, 4, 5, 6 , 7, 8, 9] - }, + }, 3: { id: 3, title: 'Botswana', @@ -1238,7 +1238,7 @@ export const initialTravelPlan = { id: 6, title: 'Madagascar', childIds: [] - }, + }, 7: { id: 7, title: 'Morocco', @@ -1257,7 +1257,7 @@ export const initialTravelPlan = { 10: { id: 10, title: 'Americas', - childIds: [11, 12, 13, 14, 15, 16, 17, 18], + childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { id: 11, @@ -1273,7 +1273,7 @@ export const initialTravelPlan = { id: 13, title: 'Barbados', childIds: [] - }, + }, 14: { id: 14, title: 'Canada', @@ -1302,7 +1302,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, @@ -1337,7 +1337,7 @@ export const initialTravelPlan = { 26: { id: 26, title: 'Europe', - childIds: [27, 28, 29, 30, 31, 32, 33], + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, @@ -1377,7 +1377,7 @@ export const initialTravelPlan = { 34: { id: 34, title: 'Oceania', - childIds: [35, 36, 37, 38, 39, 40, 41], + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, @@ -1557,7 +1557,7 @@ export const initialTravelPlan = { id: 2, title: 'Africa', childIds: [3, 4, 5, 6 , 7, 8, 9] - }, + }, 3: { id: 3, title: 'Botswana', @@ -1577,7 +1577,7 @@ export const initialTravelPlan = { id: 6, title: 'Madagascar', childIds: [] - }, + }, 7: { id: 7, title: 'Morocco', @@ -1596,7 +1596,7 @@ export const initialTravelPlan = { 10: { id: 10, title: 'Americas', - childIds: [11, 12, 13, 14, 15, 16, 17, 18], + childIds: [11, 12, 13, 14, 15, 16, 17, 18], }, 11: { id: 11, @@ -1612,7 +1612,7 @@ export const initialTravelPlan = { id: 13, title: 'Barbados', childIds: [] - }, + }, 14: { id: 14, title: 'Canada', @@ -1641,7 +1641,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, @@ -1676,7 +1676,7 @@ export const initialTravelPlan = { 26: { id: 26, title: 'Europe', - childIds: [27, 28, 29, 30, 31, 32, 33], + childIds: [27, 28, 29, 30, 31, 32, 33], }, 27: { id: 27, @@ -1716,7 +1716,7 @@ export const initialTravelPlan = { 34: { id: 34, title: 'Oceania', - childIds: [35, 36, 37, 38, 39, 40, 41], + childIds: [35, 36, 37, 38, 39, 40, 41], }, 35: { id: 35, @@ -1821,7 +1821,7 @@ Sometimes, you can also reduce state nesting by moving some of the nested state <Recap> -* If two state variables always update together, consider merging them into one. +* 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. @@ -2060,7 +2060,7 @@ export default function TravelPlan() { } return ( - <> + <> <AddItem onAddItem={handleAddItem} /> @@ -2195,7 +2195,7 @@ export default function TravelPlan() { } return ( - <> + <> <AddItem onAddItem={handleAddItem} /> @@ -2348,7 +2348,7 @@ export default function Letter({ isHighlighted ? 'highlighted' : '' } onFocus={() => { - onHover(letter); + onHover(letter); }} onPointerMove={() => { onHover(letter); @@ -2457,7 +2457,7 @@ export default function Letter({ isHighlighted ? 'highlighted' : '' } onFocus={() => { - onHover(letter.id); + onHover(letter.id); }} onPointerMove={() => { onHover(letter.id); diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 95be5d2e0..7a75fe021 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -32,17 +32,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -80,17 +80,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -132,17 +132,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -236,17 +236,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -290,17 +290,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -371,17 +371,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -417,17 +417,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -474,17 +474,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -512,17 +512,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - isPacked={true} - name="Space suit" + <Item + isPacked={true} + name="Space suit" /> - <Item - isPacked={true} - name="Helmet with a golden leaf" + <Item + isPacked={true} + name="Helmet with a golden leaf" /> - <Item - isPacked={false} - name="Photo of Tam" + <Item + isPacked={false} + name="Photo of Tam" /> </ul> </section> @@ -560,17 +560,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - importance={9} - name="Space suit" + <Item + importance={9} + name="Space suit" /> - <Item - importance={0} - name="Helmet with a golden leaf" + <Item + importance={0} + name="Helmet with a golden leaf" /> - <Item - importance={6} - name="Photo of Tam" + <Item + importance={6} + name="Photo of Tam" /> </ul> </section> @@ -604,17 +604,17 @@ export default function PackingList() { <section> <h1>Sally Ride's Packing List</h1> <ul> - <Item - importance={9} - name="Space suit" + <Item + importance={9} + name="Space suit" /> - <Item - importance={0} - name="Helmet with a golden leaf" + <Item + importance={0} + name="Helmet with a golden leaf" /> - <Item - importance={6} - name="Photo of Tam" + <Item + importance={6} + name="Photo of Tam" /> </ul> </section> diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md index a65b59f6e..fef66838e 100644 --- a/src/content/learn/creating-a-react-app.md +++ b/src/content/learn/creating-a-react-app.md @@ -104,7 +104,7 @@ Server Components and Suspense are React features rather than Next.js features. If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch. -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. +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. If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/). diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 4ebfa3eb3..9054b8179 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -32,7 +32,7 @@ React āĻ…ā§āĻ¯āĻžāĻĒā§āĻ˛āĻŋāĻ•ā§‡āĻļāĻ¨āĻ—ā§āĻ˛ā§‹ 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() { // This doesn't quite work! <h1>Hedy Lamarr's Todos</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>Hedy Lamarr's Todos</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>{person.name}'s Todos</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' ); @@ -526,9 +526,15 @@ export default function TeaSet() { ## Tree āĻšāĻŋāĻ¸ā§‡āĻŦā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° UI {/*your-ui-as-a-tree*/} +<<<<<<< HEAD React āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻāĻŦāĻ‚ āĻŽāĻĄāĻŋāĻ‰āĻ˛ā§‡āĻ° āĻ­ā§‡āĻ¤āĻ°āĻ•āĻžāĻ° āĻ¸āĻŽā§āĻĒāĻ°ā§āĻ• āĻŽāĻĄā§‡āĻ˛ āĻ•āĻ°āĻŦāĻžāĻ° āĻœāĻ¨ā§āĻ¯ tree āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡āĨ¤ āĻāĻ•āĻŸāĻž React āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻŸā§āĻ°āĻŋ āĻšāĻ˛ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻŽāĻžāĻā§‡ āĻĨāĻžāĻ•āĻž āĻĒā§āĻ¯āĻžāĻ°ā§‡āĻ¨ā§āĻŸ-āĻšāĻžāĻ‡āĻ˛ā§āĻĄ āĻ¸āĻŽā§āĻĒāĻ°ā§āĻ•ā§‡āĻ° āĻāĻ•āĻŸāĻž āĻĒā§āĻ°āĻ¤āĻŋāĻĢāĻ˛āĻ¨āĨ¤ +======= +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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 <Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'."> @@ -538,7 +544,11 @@ React āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻŸā§āĻ°āĻŋā§Ÿā§‡āĻ° āĻāĻ•āĻŸāĻŋ āĻ‰āĻĻāĻžāĻšāĻ° āĻŸā§āĻ°āĻŋ āĻāĻ° āĻļā§€āĻ°ā§āĻˇā§‡āĻ° āĻ•āĻžāĻ›ā§‡ āĻĨāĻžāĻ•āĻž āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ, āĻ¯ā§‡āĻ—ā§āĻ˛ā§‹ āĻ°ā§āĻŸā§‡āĻ°āĻ“ āĻ•āĻžāĻ›ā§‡, āĻ¸ā§‡āĻ—ā§āĻ˛ā§‹āĻ•ā§‡ top-level āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻšāĻŋāĻ¸ā§‡āĻŦā§‡ āĻ§āĻ°āĻž āĻšā§ŸāĨ¤ āĻ¯ā§‡āĻ¸āĻŦ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻ•ā§‹āĻ¨ āĻšāĻžāĻ‡āĻ˛ā§āĻĄ āĻ¨ā§‡āĻ‡ āĻ¸ā§‡āĻ—ā§āĻ˛ā§‹āĻ•ā§‡ leaf āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻŦāĻ˛ā§‡āĨ¤ āĻĻā§‡āĻŸāĻž āĻĢāĻ˛ā§‹ āĻāĻŦāĻ‚ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°āĻŋāĻ‚ āĻĒāĻžāĻ°āĻĢāĻ°āĻŽā§āĻ¯āĻžāĻ¨ā§āĻ¸ āĻŦā§āĻāĻŦāĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻāĻ‡ āĻŦāĻŋāĻ­āĻžāĻœāĻ¨ āĻ•āĻžāĻœā§‡ āĻ˛āĻžāĻ—ā§‡āĨ¤ +<<<<<<< HEAD āĻœāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āĻ°āĻŋāĻĒā§āĻŸ āĻŽāĻĄāĻŋāĻ‰āĻ˛āĻ—ā§āĻ˛ā§‹āĻ° āĻŽāĻ§ā§āĻ¯āĻ•āĻžāĻ° āĻ¸āĻŽā§āĻĒāĻ°ā§āĻ• āĻŽāĻĄā§‡āĻ˛āĻŋāĻ‚ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ…ā§āĻ¯āĻžāĻĒ āĻŦā§āĻāĻŦāĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻ…āĻ¨ā§āĻ¯ āĻāĻ•āĻŸāĻŋ āĻ•āĻžāĻ°ā§āĻ¯āĻ•āĻ° āĻ‰āĻĒāĻžā§ŸāĨ¤ āĻāĻŸāĻžāĻ•ā§‡ āĻ†āĻŽāĻ°āĻž module dependency tree āĻŦāĻ˛ā§‡ āĻ…āĻ­āĻŋāĻšāĻŋāĻ¤ āĻ•āĻ°āĻŋāĨ¤ +======= +Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 <Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'."> @@ -546,7 +556,11 @@ Module dependency tree āĻāĻ° āĻāĻ•āĻŸāĻŋ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĨ¤ </Diagram> +<<<<<<< HEAD āĻāĻ•āĻŸāĻŋ āĻĄāĻŋāĻĒā§‡āĻ¨ā§āĻĄā§‡āĻ¨ā§āĻ¸āĻŋ āĻŸā§āĻ°āĻŋ āĻŦā§‡āĻļāĻŋāĻ°āĻ­āĻžāĻ— āĻ¸āĻŽā§Ÿ āĻŦāĻŋāĻ˛ā§āĻĄ āĻŸā§āĻ˛ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡ āĻ¤ā§ˆāĻ°āĻŋ āĻ•āĻ°āĻž āĻšā§Ÿ, āĻ¯ā§‡āĻ¨ āĻĻāĻ°āĻ•āĻžāĻ°āĻŋ āĻĒā§āĻ°ā§‹ āĻœāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āĻ°āĻŋāĻĒā§āĻŸ āĻ•ā§‹āĻĄ āĻāĻ•āĻ¤ā§āĻ°āĻŋāĻ¤ āĻ•āĻ°ā§‡ āĻ•ā§āĻ˛āĻžā§Ÿā§‡āĻ¨ā§āĻŸ āĻĄāĻžāĻ‰āĻ¨āĻ˛ā§‹āĻĄ āĻāĻŦāĻ‚ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨āĨ¤ React āĻ…ā§āĻ¯āĻžāĻĒā§‡āĻ° āĻ•ā§āĻˇā§‡āĻ¤ā§āĻ°ā§‡ āĻāĻ•āĻŸāĻž āĻŦā§œ āĻŦāĻžāĻ¨ā§āĻĄāĻ˛ āĻ¸āĻžāĻ‡āĻœ user experience āĻ āĻŦāĻŋāĻ˜ā§āĻ¨ āĻ˜āĻŸāĻžā§ŸāĨ¤ āĻāĻ°āĻ•āĻŽ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻž āĻĄāĻŋāĻŦāĻžāĻ— āĻ•āĻ°āĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻŽāĻĄāĻŋāĻ‰āĻ˛ āĻĄāĻŋāĻĒā§‡āĻ¨ā§āĻĄā§‡āĻ¨ā§āĻ¸āĻŋ āĻŸā§āĻ°āĻŋ āĻ•āĻžāĻœā§‡ āĻ˛āĻžāĻ—ā§‡āĨ¤ +======= +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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 <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 fabba9941..f3533c188 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -31,7 +31,11 @@ React āĻ•āĻŽāĻŋāĻ‰āĻ¨āĻŋāĻŸāĻŋāĻ¤ā§‡ āĻŦā§āĻ¯āĻŦāĻšā§ƒāĻ¤ āĻ…āĻ¨ā§āĻ¯ āĻœāĻ¨ ### āĻ˛āĻŋāĻ¨ā§āĻŸāĻŋāĻ‚ {/*linting*/} +<<<<<<< HEAD āĻ•ā§‹āĻĄ āĻ˛āĻŋāĻ¨ā§āĻŸāĻžāĻ° āĻ†āĻĒāĻ¨āĻŋ āĻ•ā§‹āĻĄ āĻ˛āĻŋāĻ–āĻžāĻ° āĻ¸āĻžāĻĨā§‡ āĻ¸āĻžāĻĨā§‡ āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āĻ¨ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻž āĻ§āĻ°āĻ¤ā§‡ āĻāĻŦāĻ‚ āĻ¤āĻž āĻ¤āĻžā§œāĻžāĻ¤āĻžā§œāĻŋ āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨ āĻ•āĻ°āĻ¤ā§‡ āĻ¸āĻžāĻšāĻžāĻ¯ā§āĻ¯ āĻ•āĻ°ā§‡āĨ¤ [ESLint](https://eslint.org/) āĻœāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āĻ°āĻŋāĻĒā§āĻŸā§‡āĻ° āĻāĻ•āĻŸāĻŋ āĻœāĻ¨āĻĒā§āĻ°āĻŋā§Ÿ, āĻ“āĻĒā§‡āĻ¨-āĻ¸ā§‹āĻ°ā§āĻ¸ āĻ˛āĻŋāĻ¨ā§āĻŸāĻžāĻ°āĨ¤ +======= +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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 * [React āĻāĻ° āĻœāĻ¨ā§āĻ¯ āĻĒā§āĻ°āĻ¸ā§āĻ¤āĻžāĻŦāĻŋāĻ¤ āĻ•āĻ¨āĻĢāĻŋāĻ—āĻžāĻ°ā§‡āĻļāĻ¨ āĻ¸āĻš ESLint āĻ‡āĻ¨ā§āĻ¸āĻŸāĻ˛ āĻ•āĻ°ā§āĻ¨](https://www.npmjs.com/package/eslint-config-react-app) (āĻ¨āĻŋāĻļā§āĻšāĻŋāĻ¤ āĻ•āĻ°ā§āĻ¨ āĻ†āĻĒāĻ¨āĻžāĻ° [Node āĻ‡āĻ¨ā§āĻ¸āĻŸāĻ˛ āĻ•āĻ°āĻž āĻ°ā§Ÿā§‡āĻ›ā§‡!](https://nodejs.org/en/download/current/)) * [āĻ…āĻĢāĻŋāĻļāĻŋā§ŸāĻžāĻ˛ āĻāĻ•ā§āĻ¸āĻŸā§‡āĻ¨āĻļāĻ¨ā§‡āĻ° āĻ¸āĻžāĻšāĻžāĻ¯ā§āĻ¯ā§‡ VSCode āĻ ESLint āĻ¸āĻ‚āĻ¯ā§āĻ•ā§āĻ¤ āĻ•āĻ°ā§āĻ¨](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 c09d58d77..076659668 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -227,7 +227,11 @@ function Form() { } ``` +<<<<<<< HEAD āĻ•āĻŋāĻ¨ā§āĻ¤ā§, āĻŦāĻžāĻ‡āĻ°ā§‡āĻ° āĻ¸āĻŋāĻ¸ā§āĻŸā§‡āĻŽā§‡āĻ° āĻ¸āĻžāĻĨā§‡ āĻ¸āĻŋāĻ™ā§āĻ•ā§āĻ°ā§‹āĻ¨āĻžāĻ‡āĻœ āĻ•āĻ°āĻ¤ā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° Effect *āĻ˛āĻžāĻ—āĻŦā§‡āĻ‡*āĨ¤ +======= +However, you *do* need Effects to synchronize with external systems. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 <LearnMore path="/learn/you-might-not-need-an-effect"> @@ -382,7 +386,7 @@ export default function App() { <hr /> <ChatRoom roomId={roomId} - theme={isDark ? 'dark' : 'light'} + theme={isDark ? 'dark' : 'light'} /> </> ); @@ -515,7 +519,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 4f47ea35d..13ec80654 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -28,7 +28,7 @@ title: āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ‡āĻŽā§āĻĒā§‹āĻ°ā§āĻŸ āĻāĻŦāĻ‚ āĻāĻ• 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 @@ img { margin: 0 10px 10px 0; height: 90px; } āĻšā§ŸāĻ¤ā§‹ āĻ†āĻĒāĻ¨āĻŋ āĻāĻŽāĻ¨ āĻ‡āĻŽā§āĻĒā§‹āĻ°ā§āĻŸ āĻĻā§‡āĻ–ā§‡āĻ›ā§‡āĻ¨ āĻ¯ā§‡āĻ–āĻžāĻ¨ā§‡ `.js` āĻĢāĻžāĻ‡āĻ˛ āĻāĻ•ā§āĻ¸āĻŸā§‡āĻ¨āĻļāĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°āĻž āĻšā§Ÿ āĻ¨āĻŋ āĻ¯ā§‡āĻŽāĻ¨āĻƒ -```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 6b90da5bc..5d8e2d06e 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -145,7 +145,7 @@ return ( ```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 736065b03..94b943de0 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,7 @@ export default function Avatar() { </Sandpack> -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +Here, `"https://react.dev/images/docs/scientists/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: @@ -49,7 +49,7 @@ But what if you want to dynamically specify the `src` or `alt` text? You could * ```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 +190,7 @@ export default function TodoList() { <h1>{person.name}'s Todos</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 +266,7 @@ export default function TodoList() { <h1>{person}'s Todos</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 +314,7 @@ export default function TodoList() { <h1>{person.name}'s Todos</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 +358,7 @@ export default function TodoList() { <h1>{person.name}'s Todos</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 +388,7 @@ Move the image URL into a property called `person.imageUrl` and read it from the ```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 +428,7 @@ body > div > div { padding: 20px; } In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension. -We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `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`. Can you fix it? @@ -436,7 +436,7 @@ Can you fix it? ```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 +487,7 @@ You can write it as `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 +564,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 53ea148c9..9780241f5 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -27,6 +27,7 @@ title: āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ•ā§‡ āĻŦāĻŋāĻļā§āĻĻā§āĻ§ āĻ°āĻžāĻ–āĻž āĻāĻ‡ āĻ—āĻŖāĻŋāĻ¤ā§‡āĻ° āĻ¸ā§‚āĻ¤ā§āĻ°āĻŸāĻŋāĻ‡ āĻ§āĻ°ā§āĻ¨āĻƒ <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>. +<<<<<<< HEAD āĻ¯āĻĻāĻŋ <Math><MathI>x</MathI> = 2</Math> āĻšā§Ÿ, āĻ¤āĻžāĻšāĻ˛ā§‡ <Math><MathI>y</MathI> = 4</Math> āĻšāĻŦā§‡āĨ¤ āĻ¸āĻŦāĻ¸āĻŽā§ŸāĨ¤ āĻ¯āĻĻāĻŋ <Math><MathI>x</MathI> = 3</Math> āĻšā§Ÿ, āĻ¤āĻžāĻšāĻ˛ā§‡ <Math><MathI>y</MathI> = 6</Math> āĻšāĻŦā§‡āĨ¤ āĻ¸āĻŦāĻ¸āĻŽā§ŸāĨ¤ @@ -34,6 +35,15 @@ title: āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ•ā§‡ āĻŦāĻŋāĻļā§āĻĻā§āĻ§ āĻ°āĻžāĻ–āĻž āĻ¯āĻĻāĻŋ <Math><MathI>x</MathI> = 3</Math> āĻšā§Ÿ, āĻ¤āĻžāĻšāĻ˛ā§‡ <MathI>y</MathI> āĻ•āĻ–āĻ¨ā§‹ āĻ•āĻ–āĻ¨ā§‹ <Math>9</Math> āĻ…āĻĨāĻŦāĻž <Math>–1</Math> āĻ…āĻĨāĻŦāĻž <Math>2.5</Math> āĻšāĻŦā§‡āĻ¨āĻž, āĻĻāĻŋāĻ¨ā§‡āĻ° āĻ•ā§‹āĻ¨ āĻ¸āĻŽā§Ÿ āĻŦāĻž āĻ¸ā§āĻŸāĻ• āĻŽāĻžāĻ°ā§āĻ•ā§‡āĻŸā§‡āĻ° āĻ…āĻŦāĻ¸ā§āĻĨāĻžāĻ° āĻ‰āĻĒāĻ° āĻ¨āĻŋāĻ°ā§āĻ­āĻ° āĻ•āĻ°ā§‡āĨ¤ āĻ¯āĻĻāĻŋ <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> āĻāĻŦāĻ‚ <Math><MathI>x</MathI> = 3</Math> āĻšā§Ÿ, <MathI>y</MathI> āĻ¤āĻžāĻšāĻ˛ā§‡ _āĻ¸āĻŦāĻ¸āĻŽā§Ÿ_ <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>. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ†āĻŽāĻ°āĻž āĻ¯āĻĻāĻŋ āĻāĻŸāĻŋāĻ•ā§‡ āĻāĻ•āĻŸāĻŋ āĻœāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āĻ°āĻŋāĻĒā§āĻŸ āĻĢāĻžāĻ‚āĻļāĻ¨ā§‡ āĻ°ā§āĻĒ āĻĻā§‡āĻ‡, āĻ¤āĻžāĻšāĻ˛ā§‡ āĻāĻŸāĻŋ āĻāĻŽāĻ¨ āĻĻā§‡āĻ–āĻžāĻŦā§‡āĻƒ @@ -52,7 +62,7 @@ React āĻāĻ‡ āĻ§āĻžāĻ°āĻŖāĻžāĻ° āĻ‰āĻĒāĻ° āĻ­āĻŋāĻ¤ā§āĻ¤āĻŋ āĻ•āĻ°ā§‡āĻ‡ āĻ¤ā§ˆ ```js src/App.js function Recipe({ drinkers }) { return ( - <ol> + <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> @@ -75,11 +85,19 @@ export default function App() { </Sandpack> +<<<<<<< HEAD āĻ†āĻĒāĻ¨āĻŋ āĻ¯āĻ–āĻ¨ `Recipe` āĻ¤ā§‡ `drinkers={2}` āĻĒāĻžāĻ¸ āĻ•āĻ°āĻŦā§‡āĻ¨, āĻāĻŸāĻŋ JSX āĻ°āĻŋāĻŸāĻžāĻ°ā§āĻ¨ āĻ•āĻ°āĻŦā§‡ āĻ¯āĻžāĻ¤ā§‡ `2 cups of water` āĻĨāĻžāĻ•āĻŦā§‡āĨ¤ āĻ¸āĻŦāĻ¸āĻŽā§ŸāĨ¤ +======= +When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻŋ `drinkers={4}` āĻĒāĻžāĻ¸ āĻ•āĻ°ā§‡āĻ¨, āĻāĻŸāĻŋ JSX āĻ°āĻŋāĻŸāĻžāĻ°ā§āĻ¨ āĻ•āĻ°āĻŦā§‡ āĻ¯āĻžāĻ¤ā§‡ `4 cups of water` āĻĨāĻžāĻ•āĻŦā§‡āĨ¤ āĻ¸āĻŦāĻ¸āĻŽā§ŸāĨ¤ +<<<<<<< HEAD āĻ āĻŋāĻ• āĻāĻ•āĻŸāĻŋ āĻ—āĻŖāĻŋāĻ¤ā§‡āĻ° āĻ¸ā§‚āĻ¤ā§āĻ°ā§‡āĻ° āĻŽāĻ¤āĨ¤ +======= +Just like a math formula. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ†āĻĒāĻ¨āĻŋ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ•ā§‡ āĻāĻ•āĻŸāĻŋ āĻ°ā§‡āĻ¸āĻŋāĻĒāĻŋ āĻšāĻŋāĻ¸ā§‡āĻŦā§‡ āĻšāĻŋāĻ¨ā§āĻ¤āĻž āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨āĻƒ āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻŋ āĻāĻ—ā§āĻ˛ā§‹ āĻ…āĻ¨ā§āĻ¸āĻ°āĻŖ āĻ•āĻ°ā§‡āĻ¨ āĻāĻŦāĻ‚ āĻ°āĻžāĻ¨ā§āĻ¨āĻžāĻ° āĻ¸āĻŽā§Ÿā§‡ āĻ¨āĻ¤ā§āĻ¨ āĻ•ā§‹āĻ¨ āĻ‰āĻĒāĻžāĻĻāĻžāĻ¨ āĻ¨āĻž āĻ†āĻ¨ā§‡āĻ¨ āĻ¤āĻžāĻšāĻ˛ā§‡ āĻ†āĻĒāĻ¨āĻŋ āĻ¸āĻŦāĻ¸āĻŽā§Ÿ āĻāĻ•āĻ‡ āĻ–āĻžāĻŦāĻžāĻ° āĻĒāĻžāĻŦā§‡āĻ¨āĨ¤ āĻāĻ‡ "āĻ–āĻžāĻŦāĻžāĻ°" āĻšāĻ˛ JSX āĻ¯āĻž āĻ†āĻĒāĻ¨āĻžāĻ° āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ React āĻ•ā§‡ [āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°](/learn/render-and-commit) āĻ•āĻ°āĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻĒāĻ°āĻŋāĻŦā§‡āĻļāĻ¨ āĻ•āĻ°ā§‡āĨ¤ @@ -217,7 +235,7 @@ Every new React feature we're building takes advantage of purity. From data fetc * 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. + * **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`. @@ -226,7 +244,7 @@ Every new React feature we're building takes advantage of purity. From data fetc </Recap> - + <Challenges> #### Fix a broken clock {/*fix-a-broken-clock*/} @@ -451,7 +469,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 +567,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' diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index 72a2e7755..608db09a0 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -293,7 +293,7 @@ You might be wondering how React knew that your Effect needed to re-synchronize ```js {1,3,8} function ChatRoom({ roomId }) { // The roomId prop may change over time useEffect(() => { - const connection = createConnection(serverUrl, roomId); // This Effect reads roomId + const connection = createConnection(serverUrl, roomId); // This Effect reads roomId connection.connect(); return () => { connection.disconnect(); @@ -969,7 +969,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> The dot is allowed to move </label> @@ -1027,7 +1027,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> The dot is allowed to move </label> @@ -1083,7 +1083,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> The dot is allowed to move </label> @@ -1155,7 +1155,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> The dot is allowed to move </label> @@ -1220,7 +1220,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> The dot is allowed to move </label> @@ -1279,7 +1279,7 @@ export default function App() { <label> <input type="checkbox" checked={canMove} - onChange={e => setCanMove(e.target.checked)} + onChange={e => setCanMove(e.target.checked)} /> The dot is allowed to move </label> @@ -1711,7 +1711,7 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', - name: 'Mars' + name: 'Mars' }]); }, 1000); }); @@ -1735,7 +1735,7 @@ async function fetchPlaces(planetId) { name: 'Spain' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -1746,7 +1746,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 +1879,7 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', - name: 'Mars' + name: 'Mars' }]); }, 1000); }); @@ -1903,7 +1903,7 @@ async function fetchPlaces(planetId) { name: 'Spain' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -1914,7 +1914,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 +2042,7 @@ async function fetchPlanets() { name: 'Venus' }, { id: 'mars', - name: 'Mars' + name: 'Mars' }]); }, 1000); }); @@ -2066,7 +2066,7 @@ async function fetchPlaces(planetId) { name: 'Spain' }, { id: 'vietnam', - name: 'Vietnam' + name: 'Vietnam' }]); } else if (planetId === 'venus') { resolve([{ @@ -2077,7 +2077,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/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index e07e94786..6aeba0244 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -853,12 +853,21 @@ CSS āĻ, āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ­āĻŋāĻ¨ā§āĻ¨ property āĻ¯ā§‡āĻŽāĻ¨ `color` āĻāĻŦāĻ‚ ## āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸā§‡āĻ° āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° {/*use-cases-for-context*/} +<<<<<<< HEAD * **āĻĨāĻŋāĻŽāĻŋāĻ‚:** āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ…ā§āĻ¯āĻžāĻĒ āĻ‡āĻ‰āĻœāĻžāĻ°āĻ•ā§‡ āĻĨāĻŋāĻŽ āĻšā§‡āĻžā§āĻœ āĻ•āĻ°āĻ¤ā§‡ āĻĻā§‡āĻ¯āĻŧ (āĻ¯ā§‡āĻŽāĻ¨, āĻĄāĻžāĻ°ā§āĻ• āĻŽā§‹āĻĄ), āĻ¤āĻ–āĻ¨ āĻ†āĻĒāĻ¨āĻŋ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ…ā§āĻ¯āĻžāĻĒā§‡āĻ° āĻ¸āĻŦāĻžāĻ° āĻ‰āĻĒāĻ°ā§‡āĻ° āĻ¸ā§āĻ¤āĻ°ā§‡ āĻāĻ•āĻŸāĻŋ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻĒā§āĻ°ā§‹āĻ­āĻžāĻ‡āĻĄāĻžāĻ° āĻ°āĻžāĻ–āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨, āĻāĻŦāĻ‚ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸāĻŸāĻŋ āĻāĻ¸āĻ•āĻ˛ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻ­āĻŋāĻ¤āĻ° āĻ‡āĻ‰āĻœ āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨ āĻ¯āĻžāĻĻā§‡āĻ° āĻŦāĻ°ā§āĻŖ āĻĨāĻŋāĻŽā§‡āĻ° āĻ¸āĻžāĻĨā§‡ āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻšāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ * **āĻŦāĻ°ā§āĻ¤āĻŽāĻžāĻ¨ āĻāĻ•āĻžāĻ‰āĻ¨ā§āĻŸ:** āĻŦāĻ°ā§āĻ¤āĻŽāĻžāĻ¨ā§‡ āĻ•ā§‹āĻ¨ āĻ‡āĻ‰āĻœāĻžāĻ° āĻ˛āĻ—āĻĄ āĻ‡āĻ¨ āĻ†āĻ›ā§‡ āĻ¤āĻž āĻ…āĻ¨ā§‡āĻ• āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻœāĻžāĻ¨āĻž āĻĻāĻ°āĻ•āĻžāĻ° āĻšāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ āĻāĻ‡ āĻĄā§‡āĻŸāĻŸāĻŋ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸāĻŋ āĻ°āĻžāĻ–āĻ˛ā§‡ tree āĻāĻ° āĻ¯ā§‡āĻ•ā§‹āĻ¨ā§‹ āĻ¸ā§āĻĨāĻžāĻ¨ā§‡ āĻĄā§‡āĻŸāĻŸāĻŋ āĻ°āĻŋāĻĄ āĻ•āĻ°āĻž āĻ¸ā§āĻŦāĻŋāĻ§āĻžāĻœāĻ¨āĻ• āĻšāĻ¯āĻŧā§‡ āĻ¯āĻžāĻ¯āĻŧāĨ¤ āĻ•āĻŋāĻ›ā§ āĻ…ā§āĻ¯āĻžāĻĒ āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻāĻ•āĻ‡ āĻ¸āĻŽāĻ¯āĻŧā§‡ āĻ•āĻ¯āĻŧā§‡āĻ•āĻŸāĻŋ āĻāĻ•āĻžāĻ‰āĻ¨ā§āĻŸ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°āĻ¤ā§‡ āĻĻā§‡āĻ¯āĻŧ (āĻ¯ā§‡āĻŽāĻ¨, āĻ†āĻ°ā§‡āĻ• āĻ‡āĻ‰āĻœāĻžāĻ° āĻšāĻ¯āĻŧā§‡ āĻ•āĻŽā§‡āĻ¨ā§āĻŸ āĻ•āĻ°āĻ¤ā§‡ āĻĻā§‡āĻ¯āĻŧāĻž)āĨ¤ āĻāĻ¸āĻ•āĻ˛ āĻ•ā§āĻˇā§‡āĻ¤ā§āĻ°ā§‡, UI āĻāĻ° āĻāĻ•āĻŸāĻŋ āĻ…āĻ‚āĻļ, āĻ­āĻŋāĻ¨ā§āĻ¨ current account āĻ­ā§āĻ¯āĻžāĻ˛ā§āĻ° āĻāĻ•āĻŸāĻŋ āĻ¨ā§‡āĻ¸ā§āĻŸā§‡āĻĄ āĻĒā§āĻ°ā§‹āĻ­āĻžāĻ‡āĻĄāĻžāĻ° āĻĻāĻŋāĻ¯āĻŧā§‡ wrap āĻ•āĻ°āĻžāĻŸāĻž āĻ¸āĻšāĻœ āĻšāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ * **āĻ°āĻžāĻ‰āĻŸāĻŋāĻ‚:** āĻ…āĻ§āĻŋāĻ•āĻžāĻ‚āĻļ āĻ°āĻžāĻ‰āĻŸāĻŋāĻ‚ āĻ•āĻ°āĻžāĻ° āĻĒāĻĻā§āĻ§āĻ¤āĻŋāĻ—ā§āĻ˛ā§‹, āĻŦāĻ°ā§āĻ¤āĻŽāĻžāĻ¨ āĻ°āĻžāĻ‰āĻŸ āĻŽāĻ¨ā§‡ āĻ°āĻžāĻ–āĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻ­āĻŋāĻ¤āĻ°ā§‡ āĻ­āĻŋāĻ¤āĻ°ā§‡ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻ‡āĻ‰āĻœ āĻ•āĻ°ā§‡āĨ¤ āĻāĻ­āĻžāĻŦā§‡āĻ‡ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§‡āĻ•āĻŸāĻŋ āĻ˛āĻŋāĻ™ā§āĻ• "āĻœāĻžāĻ¨āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡" āĻ¯ā§‡ āĻ¸ā§‡ active āĻ•āĻŋāĻ¨āĻžāĨ¤ āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻŋ āĻ¨āĻŋāĻœā§‡āĻ‡ āĻ°āĻžāĻ‰āĻŸāĻžāĻ° āĻ¤ā§ˆāĻ°āĻŋ āĻ•āĻ°ā§‡āĻ¨, āĻ†āĻĒāĻ¨āĻŋāĻ“ āĻšāĻ¯āĻŧāĻ¤ā§‹ āĻāĻŽāĻ¨āĻŸāĻžāĻ‡ āĻ•āĻ°āĻ¤ā§‡ āĻšāĻžāĻ‡āĻŦā§‡āĻ¨āĨ¤ * **āĻ¸ā§āĻŸā§‡āĻŸ āĻŽā§āĻ¯āĻžāĻ¨ā§‡āĻœ āĻ•āĻ°āĻž:** āĻ†āĻĒāĻ¨āĻžāĻ° āĻ…ā§āĻ¯āĻžāĻĒ āĻ¯āĻ–āĻ¨ āĻŦāĻĄāĻŧ āĻšāĻ¤ā§‡ āĻĨāĻžāĻ•ā§‡, āĻ†āĻĒāĻ¨āĻŋ āĻāĻŽāĻ¨ āĻĒāĻ°ā§āĻ¯āĻžāĻ¯āĻŧā§‡ āĻšāĻ˛ā§‡ āĻ¯ā§‡āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨ āĻ¯āĻ–āĻ¨ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ…ā§āĻ¯āĻžāĻĒā§‡āĻ° āĻ¸āĻŦāĻžāĻ° āĻ‰āĻĒāĻ°ā§‡āĻ° āĻ¸ā§āĻ¤āĻ°ā§‡āĻ° āĻ–ā§āĻŦ āĻ•āĻžāĻ›ā§‡āĻ‡ āĻ…āĻ¨ā§‡āĻ• āĻ¸ā§āĻŸā§‡āĻŸ āĻāĻ•āĻ¤ā§āĻ° āĻšāĻ¯āĻŧā§‡ āĻ¯āĻžāĻ¯āĻŧāĨ¤ āĻ¯ā§‡āĻ—ā§āĻ˛ā§‹ āĻ¨āĻŋāĻšā§‡āĻ° āĻ…āĻ¨ā§‡āĻ• āĻĻā§‚āĻ°āĻŦāĻ°ā§āĻ¤ā§€ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻ•āĻ°āĻžāĻ° āĻĒā§āĻ°āĻ¯āĻŧā§‹āĻœāĻ¨ āĻĒāĻĄāĻŧāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ āĻŦā§‡āĻļāĻŋ āĻāĻžāĻŽā§‡āĻ˛āĻž āĻ›āĻžāĻĄāĻŧāĻžāĻ‡, āĻœāĻŸāĻŋāĻ˛ āĻ¸ā§āĻŸā§‡āĻŸ āĻŽā§āĻ¯āĻžāĻ¨ā§‡āĻœ āĻāĻŦāĻ‚ āĻ¸ā§‡āĻ—ā§āĻ˛ā§‹āĻ•ā§‡ āĻ¨āĻŋāĻšā§‡āĻ° āĻ…āĻ¨ā§‡āĻ• āĻĻā§‚āĻ°āĻŦāĻ°ā§āĻ¤ā§€ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ¸ā§‡āĻ° āĻ•āĻžāĻ›ā§‡ āĻĒāĻžāĻ¸ āĻ•āĻ°āĻžāĻ° āĻœāĻ¨ā§āĻ¯ [āĻāĻ•āĻŸāĻŋ reducer āĻ•ā§‡ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸā§‡āĻ° āĻ¸āĻžāĻĨā§‡ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°āĻž](/learn/scaling-up-with-reducer-and-context) āĻ–ā§āĻŦāĻ‡ āĻ¸ā§āĻŦāĻžāĻ­āĻžāĻŦāĻŋāĻ•āĨ¤ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻļā§āĻ§ā§ āĻ¸ā§āĻŸā§āĻ¯āĻžāĻŸāĻŋāĻ• āĻ­ā§āĻ¯āĻžāĻ˛ā§āĻ° āĻŽāĻ§ā§āĻ¯ā§‡āĻ‡ āĻ¸ā§€āĻŽāĻžāĻŦāĻĻā§āĻ§ āĻ¨āĻ¯āĻŧāĨ¤ āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻŋ āĻĒāĻ°āĻŦāĻ°ā§āĻ¤ā§€ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°ā§‡ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ­ā§āĻ¯āĻžāĻ˛ā§ āĻĒāĻžāĻ¸ āĻ•āĻ°ā§‡āĻ¨, React āĻ¤āĻ–āĻ¨ āĻāĻ° āĻ¨āĻŋāĻŽā§āĻ¨āĻŦāĻ°ā§āĻ¤ā§€ āĻ¸āĻ•āĻ˛ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ¯ā§‡āĻ—ā§āĻ˛ā§‹ āĻ āĻ­ā§āĻ¯āĻžāĻ˛ā§ āĻ°āĻŋāĻĄ āĻ•āĻ°āĻ›āĻŋāĻ˛ā§‹ āĻ¤āĻžāĻĻā§‡āĻ°āĻ•ā§‡ āĻ†āĻĒāĻĄā§‡āĻŸ āĻ•āĻ°āĻŦā§‡! āĻāĻœāĻ¨ā§āĻ¯āĻ‡ āĻĒā§āĻ°āĻžāĻ¯āĻŧāĻ‡ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻ“ āĻ¸ā§āĻŸā§‡āĻŸ āĻāĻ•āĻ¤ā§āĻ°ā§‡ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°āĻž āĻšāĻ¯āĻŧā§‡ āĻĨāĻžāĻ•ā§‡āĨ¤ +======= +* **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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ­āĻžāĻŦā§‡, āĻ¯āĻĻāĻŋ āĻ•ā§‹āĻ¨ā§‹ āĻ‡āĻ¨āĻĢāĻ°ā§āĻŽā§‡āĻļāĻ¨ tree āĻāĻ° āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āĻ¨ āĻ…āĻ‚āĻļā§‡ āĻĻā§‚āĻ°āĻŦāĻ°ā§āĻ¤ā§€ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ—ā§āĻ˛ā§‹āĻ° āĻĒā§āĻ°āĻ¯āĻŧā§‹āĻœāĻ¨ āĻšā§Ÿ, āĻ¤āĻžāĻšāĻ˛ā§‡ āĻ•āĻ¨āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻ¤āĻ–āĻ¨ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ‰āĻĒāĻ•āĻžāĻ°ā§‡ āĻ†āĻ¸āĻŦā§‡ āĻāĻŸāĻŋ āĻ¤āĻžāĻ° āĻ‰āĻ¤ā§āĻ¤āĻŽ āĻ˛āĻ•ā§āĻˇāĻŖāĨ¤ @@ -963,27 +972,27 @@ export const places = [{ description: 'The tradition of choosing bright colors for houses began in the late 20th century.', imageId: 'K9HVAGH' }, { - id: 1, + 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, + 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, + 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, + id: 4, name: 'Burano, Italy', description: 'The houses are painted following a specific color system dating back to 16th century.', imageId: 'kxsph5C' }, { - id: 5, + 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.', imageId: 'rTqKo46' @@ -998,7 +1007,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 +1016,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,27 +1111,27 @@ export const places = [{ description: 'The tradition of choosing bright colors for houses began in the late 20th century.', imageId: 'K9HVAGH' }, { - id: 1, + 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, + 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, + 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, + id: 4, name: 'Burano, Italy', description: 'The houses are painted following a specific color system dating back to 16th century.', imageId: 'kxsph5C' }, { - id: 5, + 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.', imageId: 'rTqKo46' @@ -1137,7 +1146,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 +1155,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 aae682d14..c0f16be94 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,11 +453,11 @@ export default function Gallery() { /> <ul> <li> - <b>Profession: </b> + <b>Profession: </b> physicist and chemist </li> <li> - <b>Awards: 4 </b> + <b>Awards: 4 </b> (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal) </li> <li> @@ -477,11 +477,11 @@ export default function Gallery() { /> <ul> <li> - <b>Profession: </b> + <b>Profession: </b> geochemist </li> <li> - <b>Awards: 2 </b> + <b>Awards: 2 </b> (Miyake Prize for geochemistry, Tanaka Prize) </li> <li> @@ -498,7 +498,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 +606,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 +703,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 +758,8 @@ export default function Profile() { return ( <Avatar size={40} - person={{ - name: 'Gregorio Y. Zara', + person={{ + name: 'Gregorio Y. Zara', imageId: '7vQD0fP' }} /> @@ -770,7 +770,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 +814,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 +834,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 +878,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 +905,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 +938,7 @@ export default function Profile() { <h1>Photo</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 +1011,7 @@ export default function Profile() { <h1>Photo</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 +1073,7 @@ export default function Profile() { <Card title="Photo"> <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 041fae355..685f63ef4 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -86,7 +86,7 @@ label { </Sandpack> -Here's how these look as a tree: +Here's how these look as a tree: <DiagramGroup> @@ -186,7 +186,7 @@ export default function App() { return ( <div> <Counter /> - {showB && <Counter />} + {showB && <Counter />} <label> <input type="checkbox" @@ -288,9 +288,9 @@ export default function App() { return ( <div> {isFancy ? ( - <Counter isFancy={true} /> + <Counter isFancy={true} /> ) : ( - <Counter isFancy={false} /> + <Counter isFancy={false} /> )} <label> <input @@ -496,9 +496,9 @@ export default function App() { return ( <div> {isPaused ? ( - <p>See you later!</p> + <p>See you later!</p> ) : ( - <Counter /> + <Counter /> )} <label> <input @@ -596,7 +596,7 @@ export default function App() { <div> {isFancy ? ( <div> - <Counter isFancy={true} /> + <Counter isFancy={true} /> </div> ) : ( <section> @@ -1431,7 +1431,7 @@ export default function App() { if (reverse) { return ( <> - <Field label="Last name" /> + <Field label="Last name" /> <Field label="First name" /> {checkbox} </> @@ -1439,11 +1439,11 @@ export default function App() { } else { return ( <> - <Field label="First name" /> + <Field label="First name" /> <Field label="Last name" /> {checkbox} </> - ); + ); } } @@ -1493,7 +1493,7 @@ export default function App() { if (reverse) { return ( <> - <Field key="lastName" label="Last name" /> + <Field key="lastName" label="Last name" /> <Field key="firstName" label="First name" /> {checkbox} </> @@ -1501,11 +1501,11 @@ export default function App() { } else { return ( <> - <Field key="firstName" label="First name" /> + <Field key="firstName" label="First name" /> <Field key="lastName" label="Last name" /> {checkbox} </> - ); + ); } } @@ -1888,25 +1888,25 @@ export default function Gallery() { let images = [{ place: 'Penang, Malaysia', - src: 'https://i.imgur.com/FJeJR8M.jpg' + src: 'https://react.dev/images/docs/scientists/FJeJR8M.jpg' }, { place: 'Lisbon, Portugal', - src: 'https://i.imgur.com/dB2LRbj.jpg' + src: 'https://react.dev/images/docs/scientists/dB2LRbj.jpg' }, { place: 'Bilbao, Spain', - src: 'https://i.imgur.com/z08o2TS.jpg' + src: 'https://react.dev/images/docs/scientists/z08o2TS.jpg' }, { place: 'Valparaíso, Chile', - src: 'https://i.imgur.com/Y3utgTi.jpg' + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' }, { place: 'Schwyz, Switzerland', - src: 'https://i.imgur.com/JBbMpWY.jpg' + src: 'https://react.dev/images/docs/scientists/JBbMpWY.jpg' }, { place: 'Prague, Czechia', - src: 'https://i.imgur.com/QwUKKmF.jpg' + src: 'https://react.dev/images/docs/scientists/QwUKKmF.jpg' }, { place: 'Ljubljana, Slovenia', - src: 'https://i.imgur.com/3aIiwfm.jpg' + src: 'https://react.dev/images/docs/scientists/3aIiwfm.jpg' }]; ``` @@ -1956,25 +1956,25 @@ export default function Gallery() { let images = [{ place: 'Penang, Malaysia', - src: 'https://i.imgur.com/FJeJR8M.jpg' + src: 'https://react.dev/images/docs/scientists/FJeJR8M.jpg' }, { place: 'Lisbon, Portugal', - src: 'https://i.imgur.com/dB2LRbj.jpg' + src: 'https://react.dev/images/docs/scientists/dB2LRbj.jpg' }, { place: 'Bilbao, Spain', - src: 'https://i.imgur.com/z08o2TS.jpg' + src: 'https://react.dev/images/docs/scientists/z08o2TS.jpg' }, { place: 'Valparaíso, Chile', - src: 'https://i.imgur.com/Y3utgTi.jpg' + src: 'https://react.dev/images/docs/scientists/Y3utgTi.jpg' }, { place: 'Schwyz, Switzerland', - src: 'https://i.imgur.com/JBbMpWY.jpg' + src: 'https://react.dev/images/docs/scientists/JBbMpWY.jpg' }, { place: 'Prague, Czechia', - src: 'https://i.imgur.com/QwUKKmF.jpg' + src: 'https://react.dev/images/docs/scientists/QwUKKmF.jpg' }, { place: 'Ljubljana, Slovenia', - src: 'https://i.imgur.com/3aIiwfm.jpg' + src: 'https://react.dev/images/docs/scientists/3aIiwfm.jpg' }]; ``` 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 04fb62219..b4e633ed7 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 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } | "`5` āĻĻāĻŋāĻ¯āĻŧā§‡ āĻĒā§āĻ°āĻ¤āĻŋāĻ¸ā§āĻĨāĻžāĻĒāĻ¨" | `0` (āĻ…āĻŦā§āĻ¯āĻŦāĻšā§ƒāĻ¤) | `5` | | `n => n + 1` | `5` | `5 + 1 = 6` | +<<<<<<< HEAD āĻšā§‚āĻĄāĻŧāĻžāĻ¨ā§āĻ¤ āĻĢāĻ˛āĻžāĻĢāĻ˛ āĻšāĻŋāĻ¸āĻžāĻŦā§‡ React `6` āĻ¸āĻžā§āĻšāĻ¯āĻŧ āĻ•āĻ°ā§‡ āĻāĻŦāĻ‚ `useState` āĻ āĻ°āĻŋāĻŸāĻžāĻ°ā§āĻ¨ āĻ•āĻ°ā§‡āĨ¤ +======= +React stores `6` as the final result and returns it from `useState`. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 <Note> @@ -305,7 +309,7 @@ export default function RequestTracker() { Completed: {completed} </h3> <button onClick={handleClick}> - Buy + Buy </button> </> ); @@ -349,7 +353,7 @@ export default function RequestTracker() { Completed: {completed} </h3> <button onClick={handleClick}> - Buy + Buy </button> </> ); diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index 1883125a6..a2981e094 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -43,7 +43,7 @@ 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: +If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [react/react](https://github.com/react/react/issues) repository with: - The error message - The code that caused the error - Your React and compiler versions @@ -81,7 +81,7 @@ 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)**: +4. **File an [issue](https://github.com/react/react/issues/new?template=compiler_bug_report.yml)**: - React and compiler versions - Minimal reproduction code - Expected vs actual behavior diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 6cce34c6b..b386e866e 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -64,9 +64,32 @@ module.exports = { ### Vite {/*vite*/} -If you use Vite, you can add the plugin to vite-plugin-react: +If you use Vite with version 6.0.0 or later of `@vitejs/plugin-react`, you can use the `reactCompilerPreset`: -```js {3,9} +<TerminalBlock> +npm install -D @rolldown/plugin-babel +</TerminalBlock> + +```js {3-4,9-11} +// vite.config.js +import { defineConfig } from 'vite'; +import react, { reactCompilerPreset } from '@vitejs/plugin-react'; +import babel from '@rolldown/plugin-babel'; + +export default defineConfig({ + plugins: [ + react(), + babel({ + presets: [reactCompilerPreset()] + }), + ], +}); +``` + +<Note> +In `@vitejs/plugin-react@6.0.0`, the inline Babel option was removed. If you're using an older version, you can use: + +```js // vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; @@ -81,26 +104,21 @@ export default defineConfig({ ], }); ``` +</Note> -Alternatively, if you prefer a separate Babel plugin for Vite: - -<TerminalBlock> -npm install -D vite-plugin-babel -</TerminalBlock> +Alternatively, you can use the Babel plugin directly with `@rolldown/plugin-babel`: -```js {2,11} +```js {3,9} // vite.config.js -import babel from 'vite-plugin-babel'; import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import babel from '@rolldown/plugin-babel'; export default defineConfig({ plugins: [ react(), babel({ - babelConfig: { - plugins: ['babel-plugin-react-compiler'], - }, + plugins: ['babel-plugin-react-compiler'], }), ], }); @@ -172,7 +190,7 @@ Install the ESLint plugin: 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. +If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/react/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) diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md index 8c333670f..36dd88248 100644 --- a/src/content/learn/reacting-to-input-with-state.md +++ b/src/content/learn/reacting-to-input-with-state.md @@ -518,7 +518,7 @@ export default function Picture() { <img className="picture" alt="Rainbow houses in Kampung Pelangi, Indonesia" - src="https://i.imgur.com/5qwVYb1.jpeg" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" /> </div> ); @@ -594,7 +594,7 @@ export default function Picture() { }} className={pictureClassName} alt="Rainbow houses in Kampung Pelangi, Indonesia" - src="https://i.imgur.com/5qwVYb1.jpeg" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" /> </div> ); @@ -649,7 +649,7 @@ export default function Picture() { <img className="picture picture--active" alt="Rainbow houses in Kampung Pelangi, Indonesia" - src="https://i.imgur.com/5qwVYb1.jpeg" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" onClick={e => e.stopPropagation()} /> </div> @@ -660,7 +660,7 @@ export default function Picture() { <img className="picture" alt="Rainbow houses in Kampung Pelangi, Indonesia" - src="https://i.imgur.com/5qwVYb1.jpeg" + src="https://react.dev/images/docs/scientists/5qwVYb1.jpeg" 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 61ab4d388..cf4391ad6 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -34,7 +34,7 @@ const ref = useRef(0); `useRef` āĻāĻŽāĻ¨ āĻāĻ•āĻŸāĻŋ āĻ…āĻŦāĻœā§‡āĻ•ā§āĻŸ āĻ°āĻŋāĻŸāĻžāĻ°ā§āĻ¨ āĻ•āĻ°ā§‡āĻƒ ```js -{ +{ current: 0 // The value you passed to useRef } ``` diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 4509b7eb2..d84007bd7 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -412,7 +412,7 @@ function Form() { function handleSubmit() { setSubmitted(true); - } + } // ... } @@ -430,7 +430,7 @@ function Form() { // ✅ āĻ­āĻžāĻ˛ā§‹: Event-specific logic event handler āĻĨā§‡āĻ•ā§‡ āĻ•āĻ˛ āĻ•āĻ°āĻž āĻšāĻ¯āĻŧ post('/api/register'); showNotification('Successfully registered!', theme); - } + } // ... } @@ -882,7 +882,11 @@ const options2 = { serverUrl: 'https://localhost:1234', roomId: 'music' }; console.log(Object.is(options1, options2)); // false ``` +<<<<<<< HEAD **Object āĻāĻŦāĻ‚ function dependency āĻ†āĻĒāĻ¨āĻžāĻ° Effect āĻ•ā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° āĻĒā§āĻ°āĻ¯āĻŧā§‹āĻœāĻ¨ā§‡āĻ° āĻšā§‡āĻ¯āĻŧā§‡ āĻŦā§‡āĻļāĻŋ āĻ˜āĻ¨ āĻ˜āĻ¨ āĻĒā§āĻ¨āĻ°āĻžāĻ¯āĻŧ āĻ¸āĻŋāĻ™ā§āĻ•ā§āĻ°ā§‹āĻ¨āĻžāĻ‡āĻœ āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤** +======= +**Object and function dependencies can make your Effect re-synchronize more often than you need.** +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻāĻ‡ āĻ•āĻžāĻ°āĻŖā§‡āĻ‡, āĻ¯āĻ–āĻ¨āĻ‡ āĻ¸āĻŽā§āĻ­āĻŦ, āĻ†āĻĒāĻ¨āĻžāĻ° Effect āĻāĻ° dependency āĻšāĻŋāĻ¸āĻžāĻŦā§‡ object āĻāĻŦāĻ‚ function āĻāĻĄāĻŧāĻžāĻ¨ā§‹āĻ° āĻšā§‡āĻˇā§āĻŸāĻž āĻ•āĻ°āĻž āĻ‰āĻšāĻŋāĻ¤āĨ¤ āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤ā§‡, āĻ¤āĻžāĻĻā§‡āĻ° component āĻāĻ° āĻŦāĻžāĻ‡āĻ°ā§‡, Effect āĻāĻ° āĻ­āĻŋāĻ¤āĻ°ā§‡ āĻ¸āĻ°āĻžāĻ¨ā§‹āĻ° āĻšā§‡āĻˇā§āĻŸāĻž āĻ•āĻ°ā§āĻ¨, āĻ…āĻĨāĻŦāĻž āĻ¤āĻžāĻĻā§‡āĻ° āĻĨā§‡āĻ•ā§‡ primitive value extract āĻ•āĻ°ā§āĻ¨āĨ¤ diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 1f2773d17..887ffe433 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -54,7 +54,7 @@ root.render(<Image />); export default function Image() { return ( <img - src="https://i.imgur.com/ZF6s192.jpg" + src="https://react.dev/images/docs/scientists/ZF6s192.jpg" alt="'Floralis GenÊrica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals" /> ); @@ -103,7 +103,7 @@ export default function Gallery() { function Image() { return ( <img - src="https://i.imgur.com/ZF6s192.jpg" + src="https://react.dev/images/docs/scientists/ZF6s192.jpg" alt="'Floralis GenÊrica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals" /> ); @@ -124,8 +124,13 @@ img { margin: 0 10px 10px 0; } </Sandpack> +<<<<<<< HEAD * **āĻĒā§āĻ°āĻžāĻĨāĻŽāĻŋāĻ• āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°ā§‡āĻ° āĻ¸āĻŽā§Ÿ,** React `<section>`, `<h1>`, āĻāĻŦāĻ‚ āĻ¤āĻŋāĻ¨āĻŸāĻŋ `<img>` āĻŸā§āĻ¯āĻžāĻ—ā§‡āĻ° āĻœāĻ¨ā§āĻ¯ [DOM āĻ¨ā§‹āĻĄāĻ—ā§āĻ˛ā§‹ āĻ¤ā§ˆāĻ°āĻŋ āĻ•āĻ°āĻŦā§‡](https://developer.mozilla.org/docs/Web/API/Document/createElement)āĨ¤ * **āĻ°āĻŋ-āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°ā§‡āĻ° āĻ¸āĻŽā§Ÿ,** React āĻĒā§‚āĻ°ā§āĻŦāĻŦāĻ°ā§āĻ¤ā§€ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ†āĻ° āĻŦāĻ°ā§āĻ¤āĻŽāĻžāĻ¨ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°ā§‡āĻ° āĻŽāĻ§ā§āĻ¯āĻŦāĻ°ā§āĻ¤ā§€ āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻ•ā§āĻ¯āĻžāĻ˛āĻ•ā§āĻ˛ā§‡āĻŸ āĻ•āĻ°āĻŦā§‡āĨ¤ āĻ•āĻŋāĻ¨ā§āĻ¤ā§ āĻ•āĻŽāĻŋāĻŸ āĻ§āĻžāĻĒā§‡āĻ° āĻ†āĻ— āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤ React āĻāĻ‡ āĻ¤āĻĨā§āĻ¯ āĻĻāĻŋā§Ÿā§‡ āĻ•āĻŋāĻ›ā§āĻ‡ āĻ•āĻ°āĻŦā§‡ āĻ¨āĻžāĨ¤ +======= +* **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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 <Pitfall> diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 32f81c447..8dfdf0b16 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -115,7 +115,7 @@ const people = [{ }, { id: 3, name: 'Percy Lavon Julian', - profession: 'chemist', + profession: 'chemist', }, { id: 4, name: 'Subrahmanyan Chandrasekhar', @@ -223,7 +223,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 +232,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 +353,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 +362,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 +514,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 +629,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 +743,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 +861,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 78474217c..1fb554c5e 100644 --- a/src/content/learn/responding-to-events.md +++ b/src/content/learn/responding-to-events.md @@ -169,7 +169,7 @@ This lets these two buttons show different messages. Try changing the messages p ### Passing event handlers as props {/*passing-event-handlers-as-props*/} -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. +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. To do this, pass a prop the component receives from its parent as the event handler like so: @@ -313,11 +313,11 @@ button { margin-right: 10px; } </Sandpack> 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) - + </Note> ## Event propagation {/*event-propagation*/} @@ -411,7 +411,7 @@ button { margin: 5px; } When you click on a button: -1. React calls the `onClick` handler passed to `<button>`. +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. @@ -433,10 +433,10 @@ In rare cases, you might need to catch all events on child elements, *even if th </div> ``` -Each event propagates in three phases: +Each event propagates in three phases: 1. It travels down, calling all `onClickCapture` handlers. -2. It runs the clicked element's `onClick` handler. +2. It runs the clicked element's `onClick` handler. 3. It travels upwards, calling all `onClick` handlers. Capture events are useful for code like routers or analytics, but you probably won't use them in app code. 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 4556f06f3..7247c79c7 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -801,7 +801,7 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, - }); + }); }}>Add</button> </> ); @@ -1025,7 +1025,7 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, - }); + }); }}>Add</button> </> ); @@ -1244,7 +1244,7 @@ export default function AddTask() { type: 'added', id: nextId++, text: text, - }); + }); }}>Add</button> </> ); diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 52eaf28f8..2fbef8918 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -323,7 +323,7 @@ To see what this feels like in practice with a few more components, read [Thinki #### Synced inputs {/*synced-inputs*/} -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. +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. <Hint> @@ -571,7 +571,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 8b1f266df..ec36ab2ee 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -40,14 +40,14 @@ export default function Gallery() { Next </button> <h2> - <i>{sculpture.name} </i> + <i>{sculpture.name} </i> by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> <p> @@ -63,73 +63,73 @@ export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; ``` @@ -220,14 +220,14 @@ export default function Gallery() { Next </button> <h2> - <i>{sculpture.name} </i> + <i>{sculpture.name} </i> by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> <p> @@ -243,73 +243,73 @@ export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; ``` @@ -360,7 +360,11 @@ const [index, setIndex] = useState(0); </Note> +<<<<<<< HEAD `useState` āĻāĻ° āĻāĻ•āĻŽāĻžāĻ¤ā§āĻ° āĻ†āĻ°ā§āĻ—ā§āĻŽā§‡āĻ¨ā§āĻŸ āĻšāĻšā§āĻ›ā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° state āĻ­ā§āĻ¯āĻžāĻ°āĻŋā§Ÿā§‡āĻŦāĻ˛ā§‡āĻ° **initial value**āĨ¤ āĻāĻ‡ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖā§‡, `index` āĻāĻ° initial value `useState(0)` āĻĻāĻŋā§Ÿā§‡ `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)`. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻĒā§āĻ°āĻ¤āĻŋāĻŦāĻžāĻ° āĻ¯āĻ–āĻ¨ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻšā§Ÿ, `useState` āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻĻā§āĻŸāĻŋ āĻŽāĻžāĻ¨ āĻ¸āĻš āĻāĻ•āĻŸāĻŋ āĻ…ā§āĻ¯āĻžāĻ°ā§‡ āĻĻā§‡ā§ŸāĻƒ @@ -407,18 +411,18 @@ export default function Gallery() { Next </button> <h2> - <i>{sculpture.name} </i> + <i>{sculpture.name} </i> by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> {showMore ? 'Hide' : 'Show'} details </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -431,73 +435,73 @@ export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; ``` @@ -627,73 +631,73 @@ let sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; @@ -772,18 +776,18 @@ export default function Gallery() { Next </button> <h2> - <i>{sculpture.name} </i> + <i>{sculpture.name} </i> by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> {showMore ? 'Hide' : 'Show'} details </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </section> @@ -796,73 +800,73 @@ export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; ``` @@ -943,18 +947,18 @@ export default function Gallery() { Next </button> <h2> - <i>{sculpture.name} </i> + <i>{sculpture.name} </i> by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> {showMore ? 'Hide' : 'Show'} details </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -967,73 +971,73 @@ export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; ``` @@ -1105,18 +1109,18 @@ export default function Gallery() { Next </button> <h2> - <i>{sculpture.name} </i> + <i>{sculpture.name} </i> by {sculpture.artist} </h2> - <h3> + <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> {showMore ? 'Hide' : 'Show'} details </button> {showMore && <p>{sculpture.description}</p>} - <img - src={sculpture.url} + <img + src={sculpture.url} alt={sculpture.alt} /> </> @@ -1129,73 +1133,73 @@ export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', 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://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + 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.' }, { name: 'Floralis GenÊrica', artist: 'Eduardo Catalano', 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://i.imgur.com/ZF6s192m.jpg', + url: 'https://react.dev/images/docs/scientists/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', 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://i.imgur.com/aTtVpES.jpg', + 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://i.imgur.com/RCwLEoQm.jpg', + url: 'https://react.dev/images/docs/scientists/RCwLEoQm.jpg', alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', 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://i.imgur.com/Sd1AgUOm.jpg', + 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.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', 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://i.imgur.com/2heNQDcm.jpg', + 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://i.imgur.com/wIdGuZwm.png', + 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.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', 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://i.imgur.com/AlHTAdDm.jpg', + 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://i.imgur.com/HMFmH6m.jpg', + url: 'https://react.dev/images/docs/scientists/HMFmH6m.jpg', alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', 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://i.imgur.com/rN7hY6om.jpg', + url: 'https://react.dev/images/docs/scientists/rN7hY6om.jpg', alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' }, { name: 'Aureole', artist: 'Ranjani Shettar', 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://i.imgur.com/okTpbHhm.jpg', + 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://i.imgur.com/6o5Vuyu.jpg', + 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.' }]; ``` @@ -1265,7 +1269,7 @@ export default function Form() { } ``` -```css +```css h1 { margin-top: 10px; } ``` @@ -1316,7 +1320,7 @@ export default function Form() { } ``` -```css +```css h1 { margin-top: 10px; } ``` @@ -1445,7 +1449,11 @@ export default function FeedbackForm() { `useState` āĻ•āĻ˛āĻŸāĻŋāĻ° āĻĻā§āĻŦāĻŋāĻ¤ā§€āĻ¯āĻŧ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĻŸāĻŋ `if` āĻ•āĻ¨ā§āĻĄāĻŋāĻļāĻ¨ā§‡āĻ° āĻĒāĻ°ā§‡ āĻ¸āĻ°āĻŋāĻ¯āĻŧā§‡ āĻ¨āĻŋāĻ¯āĻŧā§‡ āĻ¯āĻžāĻ¨ āĻāĻŦāĻ‚ āĻ˛āĻ•ā§āĻˇā§āĻ¯ āĻ•āĻ°ā§āĻ¨ āĻ•ā§€āĻ­āĻžāĻŦā§‡ āĻāĻŸāĻŋ āĻ†āĻŦāĻžāĻ° āĻ­ā§‡āĻ™ā§‡ āĻ¯āĻžāĻ¯āĻŧāĨ¤ +<<<<<<< HEAD āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ˛āĻŋāĻ¨ā§āĻŸāĻžāĻ° [React-āĻāĻ° āĻœāĻ¨ā§āĻ¯ āĻ•āĻ¨āĻĢāĻŋāĻ—āĻžāĻ° āĻ•āĻ°āĻž āĻĨāĻžāĻ•ā§‡](/learn/editor-setup#linting), āĻ¤āĻžāĻšāĻ˛ā§‡ āĻāĻ°āĻ•āĻŽ āĻ­ā§āĻ˛ āĻ•āĻ°āĻ˛ā§‡ āĻ†āĻĒāĻ¨āĻŋ āĻāĻ•āĻŸāĻŋ āĻ˛āĻŋāĻ¨ā§āĻŸ āĻāĻ°āĻ° āĻĻā§‡āĻ–āĻ¤ā§‡ āĻĒāĻžāĻŦā§‡āĻ¨āĨ¤ āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻŋ āĻ˛ā§‹āĻ•āĻžāĻ˛āĻŋ āĻāĻ‡ āĻ­ā§āĻ˛ āĻ•ā§‹āĻĄ āĻšā§‡āĻˇā§āĻŸāĻž āĻ•āĻ°ā§‡ āĻ•ā§‹āĻ¨ā§‹ āĻāĻ°āĻ° āĻ¨āĻž āĻĻā§‡āĻ–ā§‡āĻ¨, āĻ¤āĻžāĻšāĻ˛ā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° āĻĒā§āĻ°āĻœā§‡āĻ•ā§āĻŸā§‡āĻ° āĻœāĻ¨ā§āĻ¯ āĻ˛āĻŋāĻ¨ā§āĻŸāĻŋāĻ‚ āĻ¸ā§‡āĻŸ āĻ†āĻĒ āĻ•āĻ°āĻž āĻĒā§āĻ°āĻ¯āĻŧā§‹āĻœāĻ¨āĨ¤ +======= +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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 </Solution> diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 67a58476c..ca70fc19a 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -37,9 +37,15 @@ React āĻ āĻāĻ•āĻŸāĻŋ UI āĻ‡āĻŽāĻĒā§āĻ˛āĻŋāĻŽā§‡āĻ¨ā§āĻŸ āĻ•āĻ°āĻ¤ā§‡ āĻ†āĻĒ āĻāĻ•āĻŸāĻŋ āĻĄāĻŋāĻœāĻžāĻ‡āĻ¨ā§‡āĻ° āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ—ā§āĻ˛ā§‹āĻ•ā§‡ āĻ†āĻĒāĻ¨āĻŋ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āĻ¨ āĻ­āĻžāĻŦā§‡ āĻ­āĻžāĻ— āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨āĨ¤ āĻ•ā§€āĻ­āĻžāĻŦā§‡ āĻ•āĻ°āĻŦā§‡āĻ¨ āĻ¸ā§‡āĻŸāĻž āĻ¨āĻŋāĻ°ā§āĻ­āĻ° āĻ•āĻ°āĻŦā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ•āĻžāĻœā§‡āĻ° āĻ•ā§āĻˇā§‡āĻ¤ā§āĻ°ā§‡āĻ° āĻ‰āĻĒāĻ°āĨ¤ +<<<<<<< HEAD * **Programming**--āĻāĻ•āĻŸāĻŋ āĻ¨āĻ¤ā§āĻ¨ function āĻŦāĻž object āĻ¤ā§ˆāĻ°ā§€ āĻ•āĻ°āĻŦā§‡āĻ¨ āĻ•āĻŋ āĻ¨āĻž āĻāĻ‡ āĻ¸āĻŋāĻĻā§āĻ§āĻžāĻ¨ā§āĻ¤āĻŸāĻŋ āĻ¯ā§‡āĻ­āĻžāĻŦā§‡ āĻ¨āĻŋāĻ¤ā§‡āĻ¨, āĻ āĻŋāĻ• āĻāĻ•āĻ‡ āĻĒāĻĻā§āĻ§āĻ¤āĻŋāĻ¤ā§‡ āĻ¸āĻŋāĻĻā§āĻ§āĻžāĻ¨ā§āĻ¤ āĻ¨āĻŋāĻ¨āĨ¤ āĻāĻŽāĻ¨ āĻāĻ•āĻŸāĻŋ āĻĒāĻĻā§āĻ§āĻ¤āĻŋ āĻšāĻšā§āĻ›ā§‡ [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), āĻ¯āĻž āĻ…āĻ¨ā§āĻ¸āĻžāĻ°ā§‡, āĻāĻ•āĻŸāĻž āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ†āĻĻāĻ°ā§āĻļāĻ¤ āĻ•ā§‡āĻŦāĻ˛ āĻāĻ•āĻŸāĻŋ āĻ•āĻžāĻœāĻ‡ āĻ•āĻ°āĻŦā§‡āĨ¤ āĻ¯āĻĻāĻŋ āĻ¸ā§‡āĻŸāĻž āĻŦā§œ āĻšā§Ÿā§‡ āĻ¯āĻžā§Ÿ āĻ¤āĻžāĻšāĻ˛ā§‡ āĻ›ā§‹āĻŸ āĻ›ā§‹āĻŸ āĻ¸āĻžāĻŦāĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ āĻ­āĻžāĻ— āĻ•āĻ°ā§‡ āĻĢā§‡āĻ˛āĻ¤ā§‡ āĻšāĻŦā§‡āĨ¤ * **CSS**--āĻ†āĻĒāĻ¨āĻŋ class selector āĻ•ā§€āĻ¸ā§‡āĻ° āĻœāĻ¨ā§āĻ¯ āĻ¤ā§ˆāĻ°ā§€ āĻ•āĻ°āĻ¤ā§‡āĻ¨ āĻ¸ā§‡āĻŸāĻž āĻŦāĻŋāĻŦā§‡āĻšāĻ¨āĻžā§Ÿ āĻ°āĻžāĻ–ā§āĻ¨ (āĻ¯āĻĻāĻŋāĻ“ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ†āĻ°ā§‡āĻ•āĻŸā§ āĻ•āĻŽ granular)āĨ¤ * **Design**--āĻšāĻŋāĻ¨ā§āĻ¤āĻž āĻ•āĻ°ā§āĻ¨ āĻ†āĻĒāĻ¨āĻŋ āĻ†āĻĒāĻ¨āĻžāĻ° āĻĄāĻŋāĻœāĻžāĻ‡āĻ¨ā§‡āĻ° layer āĻ—ā§āĻ˛ā§‹ āĻ•ā§€āĻ­āĻžāĻŦā§‡ āĻŦāĻŋāĻ¨ā§āĻ¯āĻ¸ā§āĻ¤ āĻ•āĻ°āĻ¤ā§‡āĻ¨āĨ¤ +======= +* **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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻžāĻ° JSON āĻ—ā§‹āĻ›āĻžāĻ¨ā§‹ āĻĨāĻžāĻ•ā§‡, āĻ†āĻĒāĻ¨āĻŋ āĻĻā§‡āĻ–āĻŦā§‡āĻ¨ āĻŦā§‡āĻļāĻŋāĻ° āĻ­āĻžāĻ— āĻ¸āĻŽā§Ÿ āĻāĻŸāĻž āĻ¸ā§āĻŦāĻžāĻ­āĻžāĻŦāĻŋāĻ•āĻ¤āĻ‡ āĻ†āĻĒāĻ¨āĻžāĻ° UI āĻāĻ° āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻāĻ° āĻ—āĻ āĻ¨ āĻŦāĻŋāĻ¨ā§āĻ¯āĻžāĻ¸ā§‡āĻ° āĻ¸āĻžāĻĨā§‡ āĻŽāĻŋāĻ˛ā§‡ āĻ¯āĻžāĻŦā§‡āĨ¤ āĻāĻ° āĻ•āĻžāĻ°āĻŖ UI āĻāĻŦāĻ‚ āĻĄā§‡āĻŸāĻž āĻŽāĻĄā§‡āĻ˛āĻ—ā§āĻ˛ā§‹ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ āĻāĻ•āĻ‡ information architecture āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡, āĻ…āĻ°ā§āĻĨāĻžā§Ž āĻāĻ•āĻ‡ āĻ†āĻ•āĻžāĻ°ā§‡ āĻŦāĻŋāĻ¨ā§āĻ¯āĻ¸ā§āĻ¤ āĻšā§ŸāĨ¤ āĻ†āĻĒāĻ¨āĻžāĻ° UI āĻ•ā§‡ āĻāĻŽāĻ¨ āĻ­āĻžāĻŦā§‡ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ āĻ­āĻžāĻ— āĻ•āĻ°ā§āĻ¨ āĻ¯ā§‡āĻ¨ āĻĒā§āĻ°āĻ¤āĻŋāĻŸāĻŋ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ†āĻĒāĻ¨āĻžāĻ° āĻĄā§‡āĻŸāĻž āĻŽāĻĄā§‡āĻ˛ā§‡āĻ° āĻāĻ•āĻŸāĻŋ āĻ…āĻ‚āĻļā§‡āĻ° āĻ¸āĻžāĻĨā§‡ āĻŽāĻŋāĻ˛ā§‡ āĻ¯āĻžā§ŸāĨ¤ @@ -228,10 +234,17 @@ UI interactive āĻ•āĻ°āĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻŦā§āĻ¯āĻŦāĻšāĻž āĻ†āĻŽāĻ°āĻž āĻāĻ•ā§‡ āĻāĻ•ā§‡ āĻ†āĻ°ā§‡āĻ•āĻŦāĻžāĻ° āĻŦā§āĻā§‡ āĻ¨ā§‡āĻ‡āĻƒ +<<<<<<< HEAD 1. āĻĒāĻŖā§āĻ¯ā§‡āĻ° āĻ†āĻ¸āĻ˛ āĻ¤āĻžāĻ˛āĻŋāĻ•āĻž **props āĻšāĻŋāĻ¸ā§‡āĻŦā§‡ āĻšāĻ˛ā§‡ āĻ†āĻ¸ā§‡, āĻ¸ā§āĻ¤āĻ°āĻžāĻ‚ āĻāĻŸāĻž state āĻ¨āĻžāĨ¤** 2. āĻ–ā§āĻāĻœāĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€ āĻ¯ā§‡ āĻ‡āĻ¨āĻĒā§āĻŸ āĻĻāĻŋāĻŦā§‡āĻ¨ āĻ¸ā§‡āĻŸāĻž state āĻšāĻŦāĻžāĻ° āĻ•āĻĨāĻž, āĻ•āĻžāĻ°āĻŖ āĻāĻŸāĻž āĻ¸āĻŽā§Ÿā§‡āĻ° āĻ¸āĻžāĻĨā§‡ āĻ¸āĻžāĻĨā§‡ āĻŦāĻĻāĻ˛ā§‡ āĻ¯āĻžāĻŦā§‡ āĻāĻŦāĻ‚ āĻ•ā§‹āĻ¨ āĻ•āĻŋāĻ›ā§ āĻĨā§‡āĻ•ā§‡ āĻāĻŸāĻž compute āĻ•āĻ°āĻž āĻ¸āĻŽā§āĻ­āĻŦ āĻ¨āĻžāĨ¤ 3. āĻšā§‡āĻ•āĻŦāĻ•ā§āĻ¸ā§‡āĻ° āĻ­ā§āĻ¯āĻžāĻ˛ā§āĻŸāĻžāĻ“ āĻāĻ•āĻŸāĻž state āĻ•āĻžāĻ°āĻŖ āĻāĻŸāĻž āĻ¸āĻŽā§Ÿā§‡āĻ° āĻ¸āĻžāĻĨā§‡ āĻ¸āĻžāĻĨā§‡ āĻŦāĻĻāĻ˛āĻžāĻŦā§‡ āĻāĻŦāĻ‚ āĻ•ā§‹āĻ¨āĻ­āĻžāĻŦā§‡ compute āĻ•āĻ°āĻž āĻ¸āĻŽā§āĻ­āĻŦ āĻ¨āĻžāĨ¤ 4. āĻĒāĻŖā§āĻ¯ āĻŦāĻžāĻ›āĻžāĻ‡ āĻ•āĻ°āĻž āĻ¤āĻžāĻ˛āĻŋāĻ•āĻžāĻŸāĻŋ **state āĻ¨āĻž** āĻ•āĻžāĻ°āĻŖ āĻšā§‡āĻ•āĻŦāĻ•ā§āĻ¸ā§‡āĻ° āĻ­ā§āĻ¯āĻžāĻ˛ā§ āĻāĻŦāĻ‚ āĻĒāĻŖā§āĻ¯ā§‡āĻ° āĻ¤āĻžāĻ˛āĻŋāĻ•āĻž āĻĨā§‡āĻ•ā§‡ āĻ¸āĻžāĻ°ā§āĻš āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻŦāĻžāĻ›āĻžāĻ‡ āĻ•āĻ°āĻžāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§‡ āĻ¤āĻž **compute āĻ•āĻ°āĻž āĻ¸āĻŽā§āĻ­āĻŦ**āĨ¤ +======= +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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ…āĻ°ā§āĻĨāĻžā§Ž, āĻļā§āĻ§ā§āĻŽāĻžāĻ¤ā§āĻ° āĻ¸āĻžāĻ°ā§āĻš āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻāĻŦāĻ‚ āĻšā§‡āĻ•āĻŦāĻ•ā§āĻ¸ā§‡āĻ° āĻ­ā§āĻ¯āĻžāĻ˛ā§ āĻāĻ‡ āĻĻā§āĻ‡āĻŸāĻžāĻ‡ state! āĻ•ā§€ āĻ¸ā§āĻ¨ā§āĻĻāĻ°āĻŽāĻ¤ āĻšā§Ÿā§‡ āĻ—ā§‡āĻ˛! @@ -265,6 +278,7 @@ Props āĻāĻŦāĻ‚ state āĻ†āĻ˛āĻžāĻĻāĻž āĻŦāĻŸā§‡, āĻ¤āĻŦā§‡ āĻāĻ°āĻž āĻāĻ•āĻ‡ āĻāĻ–āĻ¨ āĻ¤āĻžāĻĻā§‡āĻ° āĻœāĻ¨ā§āĻ¯ āĻ†āĻŽāĻžāĻĻā§‡āĻ° āĻĒāĻ°āĻŋāĻ•āĻ˛ā§āĻĒāĻ¨āĻž āĻāĻžāĻ˛āĻžāĻ‡ āĻ•āĻ°ā§‡ āĻ¨āĻŋāĻ‡āĨ¤ +<<<<<<< HEAD 1. **state āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡ āĻāĻŽāĻ¨ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ—ā§āĻ˛ā§‹ āĻšāĻŋāĻšā§āĻ¨āĻŋāĻ¤ āĻ•āĻ°ā§āĻ¨** * `ProductTable`āĻ•ā§‡ āĻ“āĻ‡ state(āĻ¸āĻžāĻ°ā§āĻš āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻāĻŦāĻ‚ āĻšā§‡āĻ•āĻŦāĻ•ā§āĻ¸) āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡ āĻĒāĻŖā§āĻ¯ā§‡āĻ° āĻ¤āĻžāĻ˛āĻŋāĻ•āĻž āĻŦāĻžāĻ›āĻžāĻ‡ āĻ•āĻ°āĻ¤ā§‡ āĻšāĻŦā§‡āĨ¤ * `SearchBar` āĻ•ā§‡ āĻ“āĻ‡ state(āĻ¸āĻžāĻ°ā§āĻš āĻŸā§‡āĻ•ā§āĻ¸āĻŸ āĻāĻŦāĻ‚ āĻšā§‡āĻ•āĻŦāĻ•ā§āĻ¸) āĻĻā§‡āĻ–āĻžāĻ¤ā§‡ āĻšāĻŦā§‡āĨ¤ @@ -272,23 +286,32 @@ Props āĻāĻŦāĻ‚ state āĻ†āĻ˛āĻžāĻĻāĻž āĻŦāĻŸā§‡, āĻ¤āĻŦā§‡ āĻāĻ°āĻž āĻāĻ•āĻ‡ 3. **State āĻ•ā§‹āĻĨāĻžāĻ¯āĻŧ āĻĨāĻžāĻ•āĻŦā§‡ āĻ¸ā§‡āĻŸāĻž āĻ¸āĻŋāĻĻā§āĻ§āĻžāĻ¨ā§āĻ¤ āĻ¨āĻŋāĻ¨**: āĻ†āĻŽāĻ°āĻž āĻŦāĻžāĻ›āĻžāĻ‡ āĻ•āĻ°āĻž text āĻāĻŦāĻ‚ checked state āĻ­ā§āĻ¯āĻžāĻ˛ā§āĻ—ā§āĻ˛ā§‹ `FilterableProductTable` -āĻ¤ā§‡ āĻ°āĻžāĻ–āĻŦāĨ¤ āĻ¸ā§āĻ¤āĻ°āĻžāĻ‚ state āĻ­ā§āĻ¯āĻžāĻ˛ā§āĻ—ā§āĻ˛ā§‹ āĻĨāĻžāĻ•āĻŦā§‡ `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`. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡ [`useState()` Hook.](/reference/react/useState) āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡ state āĻ¯ā§āĻ•ā§āĻ¤ āĻ•āĻ°ā§āĻ¨āĨ¤ Hook āĻšāĻšā§āĻ›ā§‡ āĻŦāĻŋāĻļā§‡āĻˇ āĻĢāĻžāĻ‚āĻļāĻ¨ āĻ¯āĻž āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ Reac† āĻāĻ° "āĻŽāĻžā§ŸāĻžā§Ÿ āĻšāĻžāĻ°āĻžāĻ¤ā§‡" āĻŦāĻžāĻ§ā§āĻ¯ āĻ•āĻ°āĻŦā§‡āĨ¤ `FilterableProductTable` āĻāĻ° āĻāĻ•āĻĻāĻŽ āĻ‰āĻĒāĻ°ā§‡ āĻĻā§āĻŸā§‹ state variable āĻ¯ā§āĻ•ā§āĻ¤ āĻ•āĻ°ā§āĻ¨ āĻāĻŦāĻ‚ āĻ¤āĻžāĻĻā§‡āĻ° āĻĒā§āĻ°āĻžāĻĨāĻŽāĻŋāĻ• state āĻ āĻŋāĻ• āĻ•āĻ°ā§‡ āĻĻāĻŋāĻ¨āĨ¤ ```js function FilterableProductTable({ products }) { const [filterText, setFilterText] = useState(''); - const [inStockOnly, setInStockOnly] = useState(false); + const [inStockOnly, setInStockOnly] = useState(false); ``` Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as 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,13 @@ function ProductTable({ products, filterText, inStockOnly }) { function SearchBar({ filterText, inStockOnly }) { return ( <form> - <input - type="text" - value={filterText} + <input + type="text" + value={filterText} placeholder="Search..."/> <label> - <input - type="checkbox" + <input + type="checkbox" checked={inStockOnly} /> {' '} Only show products in stock @@ -451,9 +474,9 @@ td { function SearchBar({ filterText, inStockOnly }) { return ( <form> - <input - type="text" - value={filterText} + <input + type="text" + value={filterText} placeholder="Search..."/> ``` @@ -462,7 +485,11 @@ function SearchBar({ filterText, inStockOnly }) { ## āĻ§āĻžāĻĒ ā§ĢāĻƒ inverse data flow āĻ¯ā§āĻ•ā§āĻ¤ āĻ•āĻ°ā§āĻ¨ {/*step-5-add-inverse-data-flow*/} +<<<<<<< HEAD āĻāĻ–āĻ¨ hierarchy-āĻ¤ā§‡ props āĻāĻŦāĻ‚ state āĻāĻ° āĻ¤āĻĨā§āĻ¯ āĻ¸āĻ āĻŋāĻ•āĻ­āĻžāĻŦā§‡ āĻ¨āĻŋāĻšā§‡āĻ° āĻĻāĻŋāĻ•ā§‡ āĻĒā§āĻ°āĻŦāĻžāĻšāĻŋāĻ¤ āĻšāĻ“ā§ŸāĻžā§Ÿ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ…ā§āĻ¯āĻžāĻĒ āĻ āĻŋāĻ•āĻ āĻžāĻ• āĻĻā§‡āĻ–āĻž āĻ¯āĻžāĻšā§āĻ›ā§‡āĨ¤ āĻ•āĻŋāĻ¨ā§āĻ¤ā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻĻā§‡āĻ“ā§ŸāĻž āĻ¤āĻĨā§āĻ¯ā§‡āĻ° āĻ­āĻŋāĻ¤ā§āĻ¤āĻŋāĻ¤ā§‡ state āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻ•āĻ°āĻ¤ā§‡ āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻ‰āĻ˛ā§āĻŸā§‹āĻŸāĻŋāĻ•ā§‡ āĻ¤āĻĨā§āĻ¯ āĻĒā§āĻ°āĻŦāĻžāĻšā§‡āĻ° āĻŦā§āĻ¯āĻŦāĻ¸ā§āĻĨāĻž āĻ°āĻžāĻ–āĻ¤ā§‡ āĻšāĻŦā§‡āĻƒ hierarchy-āĻ° āĻ—āĻ­ā§€āĻ°ā§‡ āĻĨāĻžāĻ•āĻž āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ—ā§āĻ˛ā§‹ āĻĻāĻŋā§Ÿā§‡ `FilterableProductTable` āĻ āĻĨāĻžāĻ•āĻž state āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻ•āĻ°āĻŦā§‡ āĻšāĻŦā§‡āĨ¤ +======= +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`. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing `<input value={filterText} />`, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes. @@ -475,8 +502,8 @@ function FilterableProductTable({ products }) { return ( <div> - <SearchBar - filterText={filterText} + <SearchBar + filterText={filterText} inStockOnly={inStockOnly} onFilterTextChange={setFilterText} onInStockOnlyChange={setInStockOnly} /> @@ -519,13 +546,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 +634,14 @@ function SearchBar({ }) { return ( <form> - <input - type="text" - value={filterText} placeholder="Search..." + <input + type="text" + value={filterText} placeholder="Search..." onChange={(e) => onFilterTextChange(e.target.value)} /> <label> - <input - type="checkbox" - checked={inStockOnly} + <input + type="checkbox" + checked={inStockOnly} onChange={(e) => onInStockOnlyChange(e.target.checked)} /> {' '} Only show products in stock diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 989ea9adc..198728702 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -337,7 +337,7 @@ import './styles.css'; import App from './App'; ``` -Lines 1-5 bring all the necessary pieces together: +Lines 1-5 bring all the necessary pieces together: * React * React's library to talk to web browsers (React DOM) @@ -551,7 +551,7 @@ export default function Board() { } ``` -Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. +Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. Let's take a look: @@ -899,19 +899,20 @@ body { ### React Developer Tools {/*react-developer-tools*/} -React DevTools let you check the props and the state of your React components. You can find the React DevTools tab at the bottom of the _browser_ section in CodeSandbox: +React Developer Tools let you check the props and the state of your React components. It is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. -![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png) +After you install it, a new *Components* tab will appear in your browser Developer Tools for sites using React. If you're following along in CodeSandbox, you'd need to first open your sandbox preview in a new tab: -To inspect a particular component on the screen, use the button in the top left corner of React DevTools: +![opening in new tab](../images/tutorial/sandbox-new-tab.png) -![Selecting components on the page with React DevTools](../images/tutorial/devtools-select.gif) +Then, on the preview page, open your browser's DevTools and find the *Components* tab: -<Note> +![components tab](../images/tutorial/components-tab.png) -For local development, React DevTools is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. Install it, and the *Components* tab will appear in your browser Developer Tools for sites using React. +To inspect a particular component on the screen, use the button in the top left corner of the Components tab: + +![inspecting with devtools](../images/tutorial/devtools-inspect.gif) -</Note> ## Completing the game {/*completing-the-game*/} @@ -1094,7 +1095,7 @@ function Square({ value, onSquareClick }) { } ``` -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: +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: ```js {7} export default function Board() { @@ -2073,12 +2074,12 @@ export default function Game() { } ``` -You can see what your code should look like below. Note that you should see an error in the developer tools console that says: +You can see what your code should look like below. Note that you should see an error in the developer tools console that says: <ConsoleBlock level="warning"> Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. </ConsoleBlock> - + You'll fix this error in the next section. <Sandpack> diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index ca6585145..5e04e7ae5 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -199,7 +199,7 @@ setPosition({ Mutation is only a problem when you change *existing* objects that are already in state. Mutating an object you've just created is okay because *no other code references it yet.* Changing it isn't going to accidentally impact something that depends on it. This is called a "local mutation". You can even do local mutation [while rendering.](/learn/keeping-components-pure#local-mutation-your-components-little-secret) Very convenient and completely okay! -</DeepDive> +</DeepDive> ## Copying objects with the spread syntax {/*copying-objects-with-the-spread-syntax*/} @@ -296,7 +296,7 @@ setPerson({ }); ``` -Now the form works! +Now the form works! Notice how you didn't declare a separate state variable for each input field. For large forms, keeping all data grouped in an object is very convenient--as long as you update it correctly! @@ -373,7 +373,7 @@ input { margin-left: 5px; margin-bottom: 5px; } </Sandpack> -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. +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. <DeepDive> @@ -457,7 +457,7 @@ const [person, setPerson] = useState({ artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); ``` @@ -501,7 +501,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); @@ -579,8 +579,8 @@ export default function Form() { <br /> (located in {person.artwork.city}) </p> - <img - src={person.artwork.image} + <img + src={person.artwork.image} alt={person.artwork.title} /> </> @@ -608,7 +608,7 @@ let obj = { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }; ``` @@ -619,7 +619,7 @@ However, "nesting" is an inaccurate way to think about how objects behave. When let obj1 = { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', }; let obj2 = { @@ -634,7 +634,7 @@ The `obj1` object is not "inside" `obj2`. For example, `obj3` could "point" at ` let obj1 = { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', }; let obj2 = { @@ -650,7 +650,7 @@ let obj3 = { If you were to mutate `obj3.artwork.city`, it would affect both `obj2.artwork.city` and `obj1.city`. This is because `obj3.artwork`, `obj2.artwork`, and `obj1` are the same object. This is difficult to see when you think of objects as "nested". Instead, they are separate objects "pointing" at each other with properties. -</DeepDive> +</DeepDive> ### Write concise update logic with Immer {/*write-concise-update-logic-with-immer*/} @@ -690,7 +690,7 @@ export default function Form() { artwork: { title: 'Blue Nana', city: 'Hamburg', - image: 'https://i.imgur.com/Sd1AgUOm.jpg', + image: 'https://react.dev/images/docs/scientists/Sd1AgUOm.jpg', } }); @@ -755,8 +755,8 @@ export default function Form() { <br /> (located in {person.artwork.city}) </p> - <img - src={person.artwork.image} + <img + src={person.artwork.image} alt={person.artwork.title} /> </> diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index f62f74306..3d77083aa 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -70,9 +70,9 @@ JSX āĻāĻŦāĻ‚ React āĻĻā§āĻŸāĻŋ āĻĒā§ƒāĻĨāĻ• āĻœāĻŋāĻ¨āĻŋāĻ¸āĨ¤ āĻāĻ—ā§āĻ˛āĻŋ ```html <h1>Hedy Lamarr's Todos</h1> -<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> @@ -102,9 +102,9 @@ export default function TodoList() { return ( // This doesn't quite work! <h1>Hedy Lamarr's Todos</h1> - <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> @@ -141,9 +141,9 @@ img { height: 90px } ```js {1,11} <div> <h1>Hedy Lamarr's Todos</h1> - <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> @@ -158,9 +158,9 @@ img { height: 90px } ```js {1,11} <> <h1>Hedy Lamarr's Todos</h1> - <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> @@ -187,9 +187,9 @@ Hedy Lamarr āĻāĻ° āĻ›āĻŦāĻŋ āĻāĻŦāĻ‚ āĻ˛āĻŋāĻ¸ā§āĻŸ āĻ†āĻ‡āĻŸā§‡āĻŽāĻ—ā§āĻ˛ ```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> @@ -207,9 +207,9 @@ JSX āĻœāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āĻ°āĻŋāĻĒā§āĻŸā§‡ āĻĒāĻ°āĻŋāĻŖāĻ¤ āĻšāĻ¯āĻŧ āĻāĻŦ āĻāĻ‡ āĻ•āĻžāĻ°āĻŖā§‡āĻ‡, React-āĻ, āĻ…āĻ¨ā§‡āĻ• HTML āĻāĻŦāĻ‚ SVG āĻ…ā§āĻ¯āĻžāĻŸā§āĻ°āĻŋāĻŦāĻŋāĻ‰āĻŸ āĻ•ā§āĻ¯āĻžāĻŽā§‡āĻ˛āĻ•ā§‡āĻ¸ā§‡ āĻ˛ā§‡āĻ–āĻž āĻĨāĻžāĻ•ā§‡āĨ¤ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĻ¸ā§āĻŦāĻ°ā§‚āĻĒ, `stroke-width` āĻāĻ° āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤ā§‡ āĻ†āĻĒāĻ¨āĻŋ `strokeWidth` āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡āĻ¨āĨ¤ āĻ¯ā§‡āĻšā§‡āĻ¤ā§ `class` āĻāĻ•āĻŸāĻŋ āĻ¸āĻ‚āĻ°āĻ•ā§āĻˇāĻŋāĻ¤ āĻļāĻŦā§āĻĻ, āĻ¤āĻžāĻ‡ React-āĻ āĻ†āĻĒāĻ¨āĻŋ āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤ā§‡ `className` āĻ˛āĻŋāĻ–āĻŦā§‡āĻ¨,[āĻ¸āĻ‚āĻļā§āĻ˛āĻŋāĻˇā§āĻŸ DOM āĻĒā§āĻ°āĻĒāĻžāĻ°ā§āĻŸāĻŋ](https://developer.mozilla.org/en-US/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,10 +235,10 @@ export default function TodoList() { return ( <> <h1>Hedy Lamarr's Todos</h1> - <img - src="https://i.imgur.com/yXOvdOSs.jpg" - alt="Hedy Lamarr" - className="photo" + <img + src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg" + alt="Hedy Lamarr" + className="photo" /> <ul> <li>Invent new traffic lights</li> diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 1c38fa655..81744322e 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -63,7 +63,7 @@ Traditionally when creating web pages, web developers marked up their content an 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 @@ The component returns an `<img />` tag with `src` and `alt` attributes. `<img /> Return statements can be written all on one line, as in this component: ```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" />; ``` But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses: @@ -107,7 +107,7 @@ But if your markup isn't all on the same line as the `return` keyword, you must ```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 @@ Now that you've defined your `Profile` component, you can nest it inside other c function Profile() { return ( <img - src="https://i.imgur.com/MK3eW3As.jpg" + src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); @@ -164,9 +164,9 @@ And `Profile` contains even more HTML: `<img />`. In the end, this is what the b ```html <section> <h1>Amazing scientists</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" /> + <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" /> </section> ``` @@ -248,7 +248,7 @@ This sandbox doesn't work because the root component is not exported: 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 +273,7 @@ Add `export default` before the function definition like so: 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 +306,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case, ```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 +324,7 @@ You can fix this component by moving the return statement to one line like so: ```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 +341,9 @@ Or by wrapping the returned JSX markup in parentheses that open right after `ret ```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 +367,7 @@ Something's wrong with how the `Profile` component is declared and used. Can you 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 +403,7 @@ Change `function profile()` to `function Profile()`, and then change every `<pro 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 index dc2912da2..d4757b9ec 100644 --- a/src/content/reference/dev-tools/react-performance-tracks.md +++ b/src/content/reference/dev-tools/react-performance-tracks.md @@ -138,7 +138,7 @@ In development builds, when you click on a component render entry, you can inspe #### 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. +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. 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 index e057e1978..6acffb227 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md @@ -16,7 +16,7 @@ These libraries were designed before React's memoization rules were fully docume ## 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. +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/react/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 @@ -135,4 +135,4 @@ function Component() { } ``` -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. +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/react/react/issues) so we can add it to the linter. diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md new file mode 100644 index 000000000..00c60d37d --- /dev/null +++ b/src/content/reference/react-dom/browser.md @@ -0,0 +1,462 @@ +--- +title: browser +--- + +<Intro> + +`browser` lets you mark a component as browser-only during server rendering. + +```js +use(browser(reason?)) +``` + +</Intro> + +<InlineToc /> + +--- + +## Reference {/*reference*/} + +### `browser(reason?)` {/*browser*/} + +Call `browser` inside [`use`](/reference/react/use) to mark a component as browser-only during server rendering: + +```js +import { use } from 'react'; +import { browser } from 'react-dom'; + +function BrowserOnly() { + use(browser('This component requires browser APIs.')); + return <BrowserContent />; +} +``` + +During server rendering, `use(browser())` stops rendering the component and leaves the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in its place. In the browser, `use(browser())` returns `undefined`, so the component renders normally. + +[See more examples below.](#usage) + +#### Parameters {/*parameters*/} + +* **optional** `reason`: A string or function that explains why the content needs to render in the browser. The string or the function's return value becomes the `cause` of the `Error` passed to [`onBrowserBailout`](#reporting-browser-only-rendering-on-the-server). React calls a reason function each time a server renderer encounters the value returned by `browser`, but does not call it in the browser. If creating the reason is expensive, pass a function such as `() => new Error(...)`. + +#### Returns {/*returns*/} + +`browser` returns an opaque value that you can pass to `use` in a component or use as the reason when [aborting a server render](#aborting-pending-server-rendering-for-the-browser). In the browser, passing this value to `use` returns `undefined`. + +#### Caveats {/*caveats*/} + +* `use(browser())` must be inside a `<Suspense>` boundary during server rendering. Without one, the server render fails. +* In a React Server Components app, `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components). +* Calling `browser()` by itself has no effect. To mark a component as browser-only, pass the value returned by `browser` to `use`. Do not throw it. + +--- + +## Usage {/*usage*/} + +### Rendering content only in the browser {/*rendering-content-only-in-the-browser*/} + +Call `browser` inside `use` in a component that should only render in the browser: + +You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering. + +Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`. + +<Sandpack> + +```js src/App.js active +import { Suspense, use, useState } from 'react'; +import { browser } from 'react-dom'; + +function SavedDraft() { + use(browser('The draft is stored in localStorage.')); + const [draft, setDraft] = useState( + () => localStorage.getItem('draft') ?? '' + ); + + function handleChange(event) { + const nextDraft = event.target.value; + setDraft(nextDraft); + localStorage.setItem('draft', nextDraft); + } + + return ( + <label> + Draft: + <textarea + value={draft} + onChange={handleChange} + rows={4} + cols={30} + /> + </label> + ); +} + +export default function App() { + return ( + <> + <h1>Saved draft</h1> + <Suspense fallback={<p>Loading draft...</p>}> + <SavedDraft /> + </Suspense> + </> + ); +} +``` + +```js src/Document.js hidden +import App from './App.js'; + +export default function Document() { + return ( + <html lang="en"> + <head> + <title>Saved draft + + + + + + + ); +} +``` + +```js src/index.js hidden +import { hydrateRoot } from 'react-dom/client'; +import { renderToReadableStream } from 'react-dom/server'; +import Document from './Document.js'; +import { flushReadableStreamToFrame } from './demo-helpers.js'; +import './styles.css'; + +async function main(frame) { + const stream = await renderToReadableStream(); + await flushReadableStreamToFrame(stream, frame); + + // Wait so both the fallback and hydrated content are visible. + await new Promise(resolve => setTimeout(resolve, 1200)); + hydrateRoot(frame.contentDocument, ); +} + +main(document.getElementById('preview')); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + const reader = readable.getReader(); + + while (true) { + const {done, value} = await reader.read(); + if (done) { + break; + } + doc.write(decoder.decode(value, {stream: true})); + } + + doc.write(decoder.decode()); + doc.close(); +} +``` + +```html public/index.html hidden + + + + + Browser-only rendering + + + + + +``` + +```css src/styles.css hidden +iframe { + width: 100%; + height: 160px; + border: 0; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + + + + + +In a React Server Components app, `use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component: + +```js {1} +'use client'; + +import { use, useState } from 'react'; +import { browser } from 'react-dom'; + +export default function SavedDraft() { + use(browser('The saved draft is stored in localStorage.')); + const [draft] = useState(() => localStorage.getItem('draft') ?? ''); + return ; +} +``` + + + +--- + +### Conditionally rendering on the server {/*conditionally-rendering-on-the-server*/} + +Like other calls to [`use`](/reference/react/use), `use(browser())` can be called inside a conditional statement or after an early return. This lets a Component or custom Hook opt out of server rendering based on a condition, such as the value of a prop. + +For example, this `useTimeZone` Hook accepts an optional default value. When provided, React renders the default value in the initial HTML and in the browser. Without a default value, the Component suspends during server rendering and shows the device's local time zone in the browser. + +Click **Reload** to see the loading fallback before the user's time zone appears. + + + +```js src/App.js +import { Suspense } from 'react'; +import { useTimeZone } from './useTimeZone.js'; + +function TimeZone({label, defaultTimeZone}) { + const timeZone = useTimeZone(defaultTimeZone); + return

{label}: {timeZone}

; +} + +export default function App() { + return ( + <> +

Event details

+ + Loading your time zone...

}> + + + + ); +} +``` + +```js src/useTimeZone.js active +import { use } from 'react'; +import { browser } from 'react-dom'; + +export function useTimeZone(defaultTimeZone) { + if (defaultTimeZone !== undefined) { + return defaultTimeZone; + } + + use(browser('No default time zone was provided.')); + return Intl.DateTimeFormat().resolvedOptions().timeZone; +} +``` + +```js src/Document.js hidden +import App from './App.js'; + +export default function Document() { + return ( + + + Event details + + + + + + + ); +} +``` + +```js src/index.js hidden +import { hydrateRoot } from 'react-dom/client'; +import { renderToReadableStream } from 'react-dom/server'; +import Document from './Document.js'; +import { flushReadableStreamToFrame } from './demo-helpers.js'; +import './styles.css'; + +async function main(frame) { + const stream = await renderToReadableStream(); + await flushReadableStreamToFrame(stream, frame); + + // Wait so both the fallback and hydrated content are visible. + await new Promise(resolve => setTimeout(resolve, 1200)); + hydrateRoot(frame.contentDocument, ); +} + +main(document.getElementById('preview')); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + const reader = readable.getReader(); + + while (true) { + const {done, value} = await reader.read(); + if (done) { + break; + } + doc.write(decoder.decode(value, {stream: true})); + } + + doc.write(decoder.decode()); + doc.close(); +} +``` + +```html public/index.html hidden + + + + + Conditional browser rendering + + + + + +``` + +```css src/styles.css hidden +iframe { + width: 100%; + height: 240px; + border: 0; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} +``` + + + +You can apply a similar pattern to conditionally avoid server rendering when using a Suspense-enabled data-fetching library: + +```js {3} +function useBrowserQuery(query, options) { + if (options.initialData === undefined) { + use(browser('useBrowserQuery: No initial data was provided.')); + } + + return useQuery(query, options); +} + +function ProductDetails({ productId, initialData }) { + const product = useBrowserQuery(`/api/products/${productId}`, { + initialData, + }); + + return

{product.name}

; +} +``` + +With `initialData`, React renders the Component to HTML on the server. Without it, React leaves the closest [``](/reference/react/Suspense) boundary's fallback in the HTML. In the browser, `useQuery` can fetch the data or read it from its client cache as usual. + +--- + +### Reporting browser-only rendering on the server {/*reporting-browser-only-rendering-on-the-server*/} + +Pass an `onBrowserBailout` callback to the server renderer to report browser-only rendering. When React leaves a Suspense fallback for the browser, it does not call the server renderer's `onError` callback or [`hydrateRoot`'s `onRecoverableError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production) callback. This example also passes a reason, which is available as the reported error's `cause`: + +```js +import { Suspense, use, useState } from 'react'; +import { browser } from 'react-dom'; +import { renderToPipeableStream } from 'react-dom/server'; + +function SavedDraft() { + use(browser(() => new Error('The saved draft is stored in localStorage.'))); + const [draft] = useState(() => localStorage.getItem('draft') ?? ''); + return ; +} + +function App() { + return ( + Loading saved draft...

}> + + + ); +} + +const { pipe } = renderToPipeableStream(, { + onShellReady() { + pipe(response); + }, + onBrowserBailout(error, errorInfo) { + logBrowserBailout(error, errorInfo); + } +}); +``` + +`onBrowserBailout` receives two arguments: + +1. An `Error` describing the browser-only render. If you passed a reason to `browser`, it is available as the error's `cause`. +2. An `errorInfo` object with a `componentStack` showing where browser-only rendering occurred. + +The reason function can return any value. Return a new `Error` to give the cause its own stack without creating the `Error` in the browser. React does not serialize the reason into the HTML. + +If there is no Suspense boundary to provide a fallback, the server render fails. React reports the failure through the renderer's usual error callbacks instead of `onBrowserBailout`. + +--- + +### Aborting pending server rendering for the browser {/*aborting-pending-server-rendering-for-the-browser*/} + +If you call a server rendering API directly, you can stop waiting for pending content and let the browser finish rendering it. Pass the value returned by `browser` as the reason when aborting the server render. React then leaves pending Suspense boundaries in their fallback state and renders their content in the browser: + +```js {1,8} +import { browser } from 'react-dom'; +import { renderToPipeableStream } from 'react-dom/server'; + +const { pipe, abort } = renderToPipeableStream(, { + onShellReady() { + pipe(response); + setTimeout(() => { + abort(browser('The server render timed out.')); + }, 10000); + } +}); +``` + +A `browser` abort reason does not trigger the server renderer's `onError` callback or `hydrateRoot`'s `onRecoverableError` callback. Instead, the server renderer reports each recovered Suspense boundary to `onBrowserBailout`. + +For server rendering APIs that accept an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), pass `browser()` as the reason to [`AbortController.abort`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort). diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 7f2677a57..96dbc7322 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -90,8 +90,13 @@ React `root`-āĻ `` āĻĻā§‡āĻ–āĻžāĻŦā§‡, āĻāĻŦāĻ‚ āĻāĻ° āĻŽāĻ§ā§āĻ¯āĻ• * āĻ†āĻĒāĻ¨āĻŋ āĻ¯āĻĻāĻŋ āĻāĻ•āĻŋ āĻ°ā§āĻŸā§‡ āĻāĻ•āĻžāĻ§āĻŋāĻ•āĻŦāĻžāĻ° `render` āĻ•āĻ˛ āĻ•āĻ°ā§‡āĻ¨, āĻ¤āĻžāĻšāĻ˛ā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° āĻĒāĻžāĻ āĻžāĻ¨ā§‹ āĻ¸āĻ°ā§āĻŦāĻļā§‡āĻˇ JSX āĻĻā§‡āĻ–āĻžāĻ¨ā§‹āĻ° āĻ–āĻžāĻ¤āĻŋāĻ°ā§‡ React āĻĒā§āĻ°ā§Ÿā§‹āĻœāĻ¨āĻŽāĻ¤ DOM āĻ†āĻĒāĻĄā§‡āĻŸ āĻ•āĻ°ā§‡ āĻĢā§‡āĻ˛āĻŦā§‡āĨ¤ React āĻ†āĻ—ā§‡āĻ°āĻŦāĻžāĻ° āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻšāĻ“ā§ŸāĻž āĻŸā§āĻ°āĻŋ āĻāĻ° āĻ¸āĻžāĻĨā§‡ ["āĻŽāĻŋāĻ˛āĻŋā§Ÿā§‡ āĻĻā§‡āĻ–āĻŦā§‡"](/learn/preserving-and-resetting-state) āĻāĻŦāĻ‚ āĻ¸āĻŋāĻĻā§āĻ§āĻžāĻ¨ā§āĻ¤ āĻ¨āĻŋāĻŦā§‡ DOM āĻāĻ° āĻ•ā§‹āĻŖ āĻ…āĻ‚āĻļāĻ—ā§āĻ˛ā§‹ āĻĒā§āĻ¨āĻ°ā§āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°āĻž āĻ¯āĻžā§Ÿ āĻ†āĻ° āĻ•ā§‹āĻ¨āĻ—ā§āĻ˛ā§‹ āĻ†āĻŦāĻžāĻ° āĻŦāĻžāĻ¨āĻžāĻ¤ā§‡ āĻšāĻŦā§‡āĨ¤ āĻāĻ•āĻ‡ āĻ°ā§āĻŸā§‡ āĻ†āĻŦāĻžāĻ° `render` āĻ•āĻ˛ āĻ•āĻ°āĻž āĻ°ā§āĻŸ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡ [`set` function](/reference/react/useState#setstate) āĻ•āĻ˛ āĻ•āĻ°āĻžāĻ° āĻŽāĻ¤āĻƒ React āĻ…āĻĒā§āĻ°ā§Ÿā§‹āĻœāĻ¨ā§€ā§Ÿ DOM āĻ†āĻĒāĻĄā§‡āĻŸ āĻā§œāĻžāĻ¨ā§‹āĻ° āĻšā§‡āĻˇā§āĻŸāĻž āĻ•āĻ°ā§‡āĨ¤ +<<<<<<< HEAD * āĻ¯āĻĻāĻŋāĻ“ rendering āĻļā§āĻ°ā§ āĻšāĻ“āĻ¯āĻŧāĻžāĻ° āĻĒāĻ° synchronous, `root.render(...)` synchronous āĻ¨āĻ¯āĻŧāĨ¤ āĻāĻ° āĻŽāĻžāĻ¨ā§‡ āĻšāĻ˛ `root.render()` āĻāĻ° āĻĒāĻ°ā§‡āĻ° āĻ•ā§‹āĻĄ āĻ“āĻ‡ āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻŸ render āĻāĻ° āĻ•ā§‹āĻ¨ effects (`useLayoutEffect`, `useEffect`) fire āĻšāĻ“āĻ¯āĻŧāĻžāĻ° āĻ†āĻ—ā§‡āĻ‡ āĻ°āĻžāĻ¨ āĻšāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ āĻāĻŸāĻž āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ āĻ āĻŋāĻ• āĻ†āĻ›ā§‡ āĻāĻŦāĻ‚ āĻ–ā§āĻŦ āĻ•āĻŽāĻ‡ adjustment āĻĒā§āĻ°āĻ¯āĻŧā§‹āĻœāĻ¨ āĻšāĻ¯āĻŧāĨ¤ āĻŦāĻŋāĻ°āĻ˛ āĻ•ā§āĻˇā§‡āĻ¤ā§āĻ°ā§‡ āĻ¯ā§‡āĻ–āĻžāĻ¨ā§‡ effect timing āĻ—ā§āĻ°ā§āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖ, āĻ†āĻĒāĻ¨āĻŋ `root.render(...)` āĻ•ā§‡ [`flushSync`](https://react.dev/reference/react-dom/client/flushSync) āĻĻāĻŋāĻ¯āĻŧā§‡ wrap āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨ āĻ¯āĻžāĻ¤ā§‡ initial render āĻ¸āĻŽā§āĻĒā§‚āĻ°ā§āĻŖāĻ­āĻžāĻŦā§‡ 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. + +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 ```js const root = createRoot(document.getElementById('root')); root.render(); @@ -113,7 +118,11 @@ root.unmount(); āĻāĻŸāĻž āĻ¸ā§‡ āĻ•ā§āĻˇā§‡āĻ¤ā§āĻ°ā§‡ āĻ¸āĻŦāĻšā§‡ā§Ÿā§‡ āĻ•āĻžāĻœā§‡ āĻ˛āĻžāĻ—ā§‡ āĻ¯āĻĻāĻŋ āĻ…āĻ¨ā§āĻ¯ āĻ•ā§‹āĻ¨ āĻ•ā§‹āĻĄā§‡āĻ° āĻ•āĻžāĻ°āĻŖā§‡ DOM āĻĨā§‡āĻ•ā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° React āĻ°ā§āĻŸā§‡āĻ° DOM āĻ¨ā§‹āĻĄ (āĻŦāĻž āĻŸā§āĻ°āĻŋāĻ¤ā§‡ āĻāĻ° āĻ•ā§‹āĻ¨ āĻĒā§‚āĻ°ā§āĻŦāĻ¸ā§‚āĻ°ā§€) āĻŽā§āĻ›ā§‡ āĻ¯āĻžā§ŸāĨ¤ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĻ¸ā§āĻŦāĻ°ā§‚āĻĒ, āĻ§āĻ°ā§‡āĻ¨ āĻāĻ•āĻŸāĻž jQuery āĻŸā§āĻ¯āĻžāĻŦ āĻĒā§āĻ¯āĻžāĻ¨ā§‡āĻ˛ āĻ†āĻ›ā§‡ āĻ¯āĻž DOM āĻĨā§‡āĻ•ā§‡ āĻ…āĻšāĻ˛ āĻŸā§āĻ¯āĻžāĻŦāĻ—ā§āĻ˛ā§‹āĻ•ā§‡ āĻĢā§‡āĻ˛ā§‡ āĻĻā§‡ā§ŸāĨ¤ āĻ¯āĻĻāĻŋ āĻāĻ•āĻŸāĻž āĻŸā§āĻ¯āĻžāĻŦ āĻĢā§‡āĻ˛ā§‡ āĻĻā§‡āĻ“ā§ŸāĻž āĻšā§Ÿ, āĻ¤āĻžāĻšāĻ˛ā§‡ āĻāĻ‡ āĻŸā§āĻ¯āĻžāĻŦā§‡āĻ° āĻŽāĻ§ā§āĻ¯ā§‡ āĻĨāĻžāĻ•āĻž āĻ¯āĻžāĻŦāĻ¤ā§€ā§Ÿ āĻ¸āĻŦ āĻ•āĻŋāĻ›ā§(āĻ­āĻŋāĻ¤āĻ°āĻ•āĻžāĻ° React āĻ°ā§āĻŸāĻ—ā§āĻ˛ā§‹ āĻ¸āĻš) DOM āĻĨā§‡āĻ•ā§‡ āĻŽā§āĻ›ā§‡ āĻ¯āĻžā§ŸāĨ¤ āĻ¸ā§‡āĻ•ā§āĻˇā§‡āĻ¤ā§āĻ°ā§‡, `root.unmount` āĻ•āĻ˛ āĻ•āĻ°āĻžāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§‡ āĻ†āĻĒāĻ¨āĻžāĻ° React āĻ•ā§‡ āĻŦāĻ˛āĻ¤ā§‡ āĻšāĻŦā§‡ āĻŽā§āĻ›ā§‡ āĻ¯āĻžāĻ“ā§ŸāĻž āĻ°ā§āĻŸā§‡āĻ° āĻ•āĻ¨āĻŸā§‡āĻ¨ā§āĻŸ āĻŽā§āĻ¯āĻžāĻ¨ā§‡āĻœ āĻ•āĻ°āĻž "āĻŦāĻ¨ā§āĻ§" āĻ•āĻ°āĻ¤ā§‡āĨ¤ āĻ¨āĻž āĻšāĻ˛ā§‡, āĻŽā§āĻ›ā§‡ āĻ¯āĻžāĻ“ā§ŸāĻž āĻ°ā§āĻŸā§‡āĻ° āĻ­ā§‡āĻ¤āĻ°āĻ•āĻžāĻ° āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ¸āĻžāĻŦāĻ¸ā§āĻ•ā§āĻ°āĻŋāĻĒāĻļāĻ¨ā§‡āĻ° āĻŽāĻ¤ global resource āĻŽā§āĻ›āĻŦā§‡ āĻ¨āĻž āĻāĻŦāĻ‚ āĻ¸ā§‡āĻ—ā§āĻ˛ā§‹ āĻĢā§āĻ°āĻŋ āĻšāĻŦā§‡ āĻ¨āĻžāĨ¤ +<<<<<<< HEAD `root.unmount` āĻ•āĻ˛ āĻ•āĻ°āĻ˛ā§‡ āĻ°ā§āĻŸā§‡āĻ° āĻ¸āĻŦ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ†āĻ¨āĻŽāĻžāĻ‰āĻ¨ā§āĻŸ āĻšāĻŦā§‡ āĻāĻŦāĻ‚ āĻ°ā§āĻŸ DOM āĻ¨ā§‹āĻĄ āĻĨā§‡āĻ•ā§‡ React "detach" āĻšā§Ÿā§‡ āĻ¯āĻžāĻŦā§‡āĨ¤ āĻāĻ•āĻ‡ āĻ¸āĻžāĻĨā§‡ āĻŸā§āĻ°āĻŋāĻ¤ā§‡ āĻ•ā§‹āĻ¨ āĻ‡āĻ­ā§‡āĻ¨ā§āĻŸ āĻšā§āĻ¯āĻžāĻ¨ā§āĻĄāĻ˛āĻžāĻ° āĻŦāĻž āĻ¸ā§āĻŸā§‡āĻŸ āĻĨāĻžāĻ•āĻ˛ā§‡ āĻ¸ā§‡āĻŸāĻžāĻ“ āĻŽā§āĻ›ā§‡ āĻ¯āĻžāĻŦā§‡āĨ¤ +======= +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. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 #### āĻĒā§āĻ¯āĻžāĻ°āĻžāĻŽāĻŋāĻŸāĻžāĻ° {/*root-unmount-parameters*/} @@ -197,7 +206,11 @@ function Counter() { +<<<<<<< HEAD **āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ…ā§āĻ¯āĻžāĻĒāĻŸāĻŋ āĻ¸āĻŽā§āĻĒā§‚āĻ°ā§āĻŖāĻ°ā§‚āĻĒā§‡ React āĻĻāĻŋā§Ÿā§‡ āĻŦāĻžāĻ¨āĻžāĻ¨ā§‹ āĻšā§Ÿā§‡ āĻĨāĻžāĻ•ā§‡, āĻ†āĻĒāĻ¨āĻžāĻ° āĻ†āĻ° āĻ•ā§‹āĻ¨ āĻ°ā§āĻŸ āĻ¤ā§ˆāĻ°āĻŋāĻ° āĻŦāĻž āĻ†āĻŦāĻžāĻ° [`root.render`](#root-render) āĻ•āĻ˛ āĻ•āĻ°āĻžāĻ° āĻĒā§āĻ°ā§Ÿā§‹āĻœāĻ¨ āĻšāĻŦāĻžāĻ° āĻ•āĻĨāĻž āĻ¨āĻž** +======= +**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻāĻ° āĻĒāĻ° āĻĨā§‡āĻ•ā§‡, React āĻ†āĻĒāĻ¨āĻžāĻ° āĻĒā§āĻ°ā§‹ āĻ…ā§āĻ¯āĻžāĻĒā§‡āĻ° DOM āĻĒāĻ°āĻŋāĻšāĻžāĻ˛āĻ¨āĻž āĻ•āĻ°āĻŦā§‡āĨ¤ āĻ†āĻ°ā§‹ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ¯ā§āĻ•ā§āĻ¤ āĻ•āĻ°āĻŦāĻžāĻ° āĻœāĻ¨ā§āĻ¯ [`App` āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡ āĻ¤āĻžāĻĻā§‡āĻ° nest āĻ•āĻ°ā§āĻ¨āĨ¤](/learn/importing-and-exporting-components) āĻ¯āĻ–āĻ¨ āĻ†āĻĒāĻ¨āĻžāĻ° UI āĻ†āĻĒāĻĄā§‡āĻŸā§‡āĻ° āĻĒā§āĻ°ā§Ÿā§‹āĻœāĻ¨ āĻšāĻŦā§‡, āĻ†āĻĒāĻ¨āĻžāĻ° āĻĒā§āĻ°āĻ¤āĻŋāĻŸāĻŋ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ [āĻ¸ā§āĻŸā§‡āĻŸ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡](/reference/react/useState) āĻ¸ā§‡āĻŸāĻž āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°āĻŦā§‡āĨ¤ āĻ¯āĻ–āĻ¨ āĻ†āĻĒāĻ¨āĻžāĻ° DOM āĻ¨ā§‹āĻĄā§‡āĻ° āĻŦāĻžāĻ‡āĻ°ā§‡ āĻ…āĻ¤āĻŋāĻ°āĻŋāĻ•ā§āĻ¤ āĻ•ā§‹āĻ¨ āĻ•āĻ¨āĻŸā§‡āĻ¨ā§āĻŸ āĻ¯ā§‡āĻŽāĻ¨ āĻāĻ•āĻŸāĻž āĻŽā§‹āĻĄāĻžāĻ˛ āĻŦāĻž āĻŸā§āĻ˛āĻŸāĻŋāĻĒ āĻĻā§‡āĻ–āĻžāĻ¨ā§‹āĻ° āĻĒā§āĻ°ā§Ÿā§‹āĻœāĻ¨ āĻšāĻŦā§‡ āĻ¤āĻ–āĻ¨, [āĻāĻ•āĻŸāĻž āĻĒā§‹āĻ°ā§āĻŸāĻžāĻ˛ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡ āĻ¸ā§‡āĻŸāĻž āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°ā§āĻ¨āĨ¤](/reference/react-dom/createPortal) @@ -249,11 +262,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(); const commentDomNode = document.getElementById('comments'); -const commentRoot = createRoot(commentDomNode); +const commentRoot = createRoot(commentDomNode); commentRoot.render(); ``` @@ -303,7 +316,7 @@ nav ul li { display: inline-block; margin-right: 20px; } ```js const domNode = document.createElement('div'); -const root = createRoot(domNode); +const root = createRoot(domNode); root.render(); document.body.appendChild(domNode); // āĻ†āĻĒāĻ¨āĻŋ āĻĄāĻ•ā§āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻ¯ā§‡āĻ•ā§‹āĻ¨ āĻœāĻžā§ŸāĻ—āĻžā§Ÿ āĻāĻŸāĻž āĻ¯ā§‹āĻ— āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨ ``` @@ -507,8 +520,13 @@ Warning: You passed a second argument to root.render(...) but it only accepts on // 🚩 āĻ­ā§āĻ˛āĻƒ root.render āĻļā§āĻ§ā§āĻŽāĻžāĻ¤ā§āĻ° āĻāĻ•āĻŸāĻŋ argument āĻ¨ā§‡āĻ¯āĻŧāĨ¤ root.render(App, {onUncaughtError}); +<<<<<<< HEAD // ✅ āĻ¸āĻ āĻŋāĻ•āĻƒ options createRoot āĻ āĻĻāĻŋāĻ¨āĨ¤ const root = createRoot(container, {onUncaughtError}); +======= +// ✅ Correct: pass options to createRoot. +const root = createRoot(container, {onUncaughtError}); +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 root.render(); ``` diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 4990652aa..b8d8a464b 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -41,10 +41,18 @@ const root = hydrateRoot(domNode, reactNode); * **optional** `options`: āĻāĻ‡ React root āĻāĻ° āĻœāĻ¨ā§āĻ¯ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āĻ¨ option āĻ¸āĻ‚āĻŦāĻ˛āĻŋāĻ¤ āĻāĻ•āĻŸāĻŋ āĻ…āĻŦāĻœā§‡āĻ•ā§āĻŸāĨ¤ +<<<<<<< HEAD * **optional** `onCaughtError`: Error Boundary āĻ React āĻ•ā§‹āĻ¨ error āĻ§āĻ°āĻ˛ā§‡ āĻ•āĻ˛ āĻšāĻ“āĻ¯āĻŧāĻž callbackāĨ¤ Error Boundary āĻāĻ° āĻ§āĻ°āĻž `error` āĻāĻŦāĻ‚ `componentStack` āĻ¸āĻ‚āĻŦāĻ˛āĻŋāĻ¤ `errorInfo` āĻ…āĻŦā§āĻœā§‡āĻ•ā§āĻŸ āĻĻāĻŋāĻ¯āĻŧā§‡ āĻ•āĻ˛ āĻ•āĻ°āĻž āĻšāĻ¯āĻŧāĨ¤ * **optional** `onUncaughtError`: āĻ•ā§‹āĻ¨ error throw āĻšāĻ¯āĻŧā§‡ Error Boundary āĻāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§‡ āĻ§āĻ°āĻž āĻ¨āĻž āĻšāĻ˛ā§‡ āĻ•āĻ˛ āĻšāĻ“āĻ¯āĻŧāĻž callbackāĨ¤ Throw āĻšāĻ“āĻ¯āĻŧāĻž `error` āĻāĻŦāĻ‚ `componentStack` āĻ¸āĻ‚āĻŦāĻ˛āĻŋāĻ¤ `errorInfo` āĻ…āĻŦā§āĻœā§‡āĻ•ā§āĻŸ āĻĻāĻŋāĻ¯āĻŧā§‡ āĻ•āĻ˛ āĻ•āĻ°āĻž āĻšāĻ¯āĻŧāĨ¤ * **optional** `onRecoverableError`: āĻ¯āĻ–āĻ¨ React āĻ¸ā§āĻŦāĻ¯āĻŧāĻ‚āĻ•ā§āĻ°āĻŋāĻ¯āĻŧāĻ­āĻžāĻŦā§‡ error āĻĨā§‡āĻ•ā§‡ recover āĻ•āĻ°ā§‡ āĻ¤āĻ–āĻ¨ āĻ•āĻ˛ āĻšāĻ“āĻ¯āĻŧāĻž callbackāĨ¤ React āĻāĻ° throw āĻ•āĻ°āĻž `error` āĻāĻŦāĻ‚ `componentStack` āĻ¸āĻ‚āĻŦāĻ˛āĻŋāĻ¤ `errorInfo` āĻ…āĻŦā§āĻœā§‡āĻ•ā§āĻŸ āĻĻāĻŋāĻ¯āĻŧā§‡ āĻ•āĻ˛ āĻ•āĻ°āĻž āĻšāĻ¯āĻŧāĨ¤ āĻ•āĻŋāĻ›ā§ recoverable error āĻāĻ° āĻŽā§‚āĻ˛ āĻ•āĻžāĻ°āĻŖ `error.cause` āĻšāĻŋāĻ¸ā§‡āĻŦā§‡ āĻĨāĻžāĻ•āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ * **optional** `identifierPrefix`: [`useId`](/reference/react/useId) āĻĻāĻŋāĻ¯āĻŧā§‡ āĻ¤ā§ˆāĻ°ā§€ āĻšāĻ“āĻ¯āĻŧāĻž ID āĻ—ā§āĻ˛ā§‹āĻ° āĻœāĻ¨ā§āĻ¯ React āĻ¯ā§‡ string prefix āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡āĨ¤ āĻāĻ•āĻ‡ āĻĒā§‡āĻ‡āĻœā§‡ āĻ¯āĻ–āĻ¨ āĻāĻ•āĻžāĻ§āĻŋāĻ• root āĻĨāĻžāĻ•ā§‡ āĻ¤āĻ–āĻ¨ conflict āĻāĻĄāĻŧāĻžāĻ¤ā§‡ āĻāĻŸāĻž āĻ•āĻžāĻœā§‡ āĻ˛āĻžāĻ—ā§‡āĨ¤ āĻ¸āĻžāĻ°ā§āĻ­āĻžāĻ°ā§‡ āĻŦā§āĻ¯āĻŦāĻšā§ƒāĻ¤ prefix āĻāĻ° āĻ¸āĻžāĻĨā§‡ āĻāĻ•āĻ‡ āĻšāĻ¤ā§‡ āĻšāĻŦā§‡āĨ¤ +======= + * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. + * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`. + * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server. + * **optional** `formState`: The form state from a form submission handled by a [Server Function](/reference/rsc/server-functions). If the page was rendered on the server in response to a submission of a form that uses [`useActionState`](/reference/react/useActionState) with a `permalink`, pass the resulting form state so that `useActionState` returns the submitted state instead of the `initialState`. Must be the same value as the `formState` passed to the [server renderer.](/reference/react-dom/server/renderToPipeableStream#parameters) This is typically passed through by your framework. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 #### āĻ°āĻŋāĻŸāĻžāĻ°ā§āĻ¨ {/*returns*/} @@ -274,7 +282,13 @@ export default function App() { --- +<<<<<<< HEAD ### āĻ•ā§āĻ˛āĻžā§Ÿā§‡āĻ¨ā§āĻŸ āĻāĻŦāĻ‚ āĻ¸āĻžāĻ°ā§āĻ­āĻžāĻ°ā§‡ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ•āĻ¨āĻŸā§‡āĻ¨ā§āĻŸ āĻĒāĻ°āĻŋāĻšāĻžāĻ˛āĻ¨āĻž āĻ•āĻ°āĻ¤ā§‡ āĻšāĻŦā§‡ āĻ¯ā§‡āĻ­āĻžāĻŦā§‡ {/*handling-different-client-and-server-content*/} +======= +{/* TODO: Remove this subsection when browser is available in Stable. */} + +### Handling different client and server content {/*handling-different-client-and-server-content*/} +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 āĻ†āĻĒāĻ¨āĻŋ āĻ¯āĻĻāĻŋ āĻ‡āĻšā§āĻ›āĻžāĻ•ā§ƒāĻ¤āĻ­āĻžāĻŦā§‡ āĻ¸āĻžāĻ°ā§āĻ­āĻžāĻ° āĻāĻŦāĻ‚ āĻ•ā§āĻ˛āĻžā§Ÿā§‡āĻ¨ā§āĻŸā§‡ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ•āĻŋāĻ›ā§ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻ¤ā§‡ āĻšāĻžāĻ¨, āĻ†āĻĒāĻ¨āĻŋ āĻĻā§āĻ‡ āĻĒāĻžāĻ¸ā§‡ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°āĻŋāĻ‚ āĻšāĻžāĻ˛āĻžāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨āĨ¤ āĻ•ā§āĻ˛āĻžā§Ÿā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻ¯ā§‡āĻ¸āĻŦ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ•āĻŋāĻ›ā§āĻŸāĻž āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ­āĻžāĻŦā§‡ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻŦā§‡, āĻ¤āĻžāĻ°āĻž `isClient` āĻāĻ° āĻŽāĻ¤ āĻāĻ•āĻŸāĻŋ [state variable](/reference/react/useState) āĻ°āĻŋāĻĄ āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡, āĻ¯ā§‡āĻŸāĻž āĻ†āĻĒāĻ¨āĻŋ āĻāĻ•āĻŸāĻž [Effect](/reference/react/useEffect) āĻ `true` āĻ¸ā§‡āĻŸ āĻ•āĻ°ā§‡ āĻĻāĻŋāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨āĻƒ @@ -319,6 +333,10 @@ export default function App() { āĻāĻ‡ āĻ­āĻžāĻŦā§‡ āĻĒā§āĻ°āĻžāĻĨāĻŽāĻŋāĻ• āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻĒāĻžāĻ¸ āĻ¸āĻžāĻ°ā§āĻ­āĻžāĻ°ā§‡āĻ° āĻŽāĻ¤ āĻāĻ•āĻ‡ āĻ•āĻ¨āĻŸā§‡āĻ¨ā§āĻŸ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻŦā§‡, āĻ…āĻŽāĻŋāĻ˛ āĻā§œāĻŋā§Ÿā§‡ āĻ—āĻŋā§Ÿā§‡, āĻ•āĻŋāĻ¨ā§āĻ¤ā§ hydration āĻāĻ° āĻ āĻŋāĻ• āĻĒāĻ° āĻ¸āĻŋāĻ‚āĻ•ā§āĻ°ā§‹āĻ¨āĻžāĻ¸āĻ­āĻžāĻŦā§‡ āĻ…āĻ¤āĻŋāĻ°āĻŋāĻ•ā§āĻ¤ āĻāĻ•āĻŸāĻŋ āĻĒāĻžāĻ¸ āĻšāĻŦā§‡āĨ¤ +Use this approach when you want the client-rendered content to be different from the initial server-rendered HTML. + +If a component should render only in the browser, call [`use(browser())`](/reference/react/use#use-browser) instead of waiting for an Effect. + āĻāĻ‡ āĻĒāĻ¨ā§āĻĨāĻžā§Ÿ hydration āĻ§ā§€āĻ° āĻšā§Ÿā§‡ āĻ¯āĻžā§Ÿ āĻ•āĻžāĻ°āĻŖ āĻ†āĻĒāĻ¨āĻžāĻ° āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻĻā§āĻ‡ āĻŦāĻžāĻ° āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻšā§ŸāĨ¤ āĻ¯ā§‡āĻ¸āĻŦ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻ‡āĻ¨ā§āĻŸāĻžāĻ°āĻ¨ā§‡āĻŸ āĻ§ā§€āĻ° āĻ—āĻ¤āĻŋāĻ° āĻ¤āĻžāĻĻā§‡āĻ° āĻāĻŸāĻž āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°ā§‡āĻ° āĻ…āĻ­āĻŋāĻœā§āĻžāĻ¤āĻžāĻ° āĻĻāĻŋāĻ•ā§‡ āĻ–ā§‡ā§ŸāĻžāĻ˛ āĻ°āĻžāĻ–āĻŦā§‡āĻ¨āĨ¤ āĻĒā§āĻ°āĻžāĻĨāĻŽāĻŋāĻ• HTML āĻāĻ° āĻšā§‡ā§Ÿā§‡ āĻœāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āĻ°āĻŋāĻĒā§āĻŸ āĻ‰āĻ˛ā§āĻ˛ā§‡āĻ–āĻœāĻ¨āĻ• āĻ­āĻžāĻŦā§‡ āĻ§ā§€āĻ°ā§‡ āĻ˛ā§‹āĻĄ āĻšāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡, āĻ¸ā§āĻ¤āĻ°āĻžāĻ‚ hydration āĻāĻ° āĻĒāĻ° āĻĒāĻ° āĻ…āĻ¨ā§āĻ¯ āĻ•ā§‹āĻ¨ UI āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻž āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻœāĻ¨ā§āĻ¯ āĻŦāĻŋāĻ°āĻ•ā§āĻ¤āĻŋāĻ•āĻ° āĻšāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index f6e73b7c8..f81788da0 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -28,7 +28,7 @@ These special React props are supported for all built-in components: * `children`: A React node (an element, a string, a number, [a portal,](/reference/react-dom/createPortal) an empty node like `null`, `undefined` and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the `children` prop implicitly by nesting tags like `
`. -* `dangerouslySetInnerHTML`: An object of the form `{ __html: '

some html

' }` with a raw HTML string inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html) +* `dangerouslySetInnerHTML`: An object of the form `{ __html: '

some html

' }` with a raw HTML string or [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML) value inside. Overrides the [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. [Read more about using `dangerouslySetInnerHTML`.](#dangerously-setting-the-inner-html) * `ref`: A ref object from [`useRef`](/reference/react/useRef) or [`createRef`](/reference/react/createRef), or a [`ref` callback function,](#ref-callback) or a string for [legacy refs.](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs) Your ref will be filled with the DOM element for this node. [Read more about manipulating the DOM with refs.](#manipulating-a-dom-node-with-a-ref) @@ -36,7 +36,7 @@ These special React props are supported for all built-in components: * `suppressHydrationWarning`: A boolean. If you use [server rendering,](/reference/react-dom/server) normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. [Read about suppressing hydration errors.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors) -* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles) +* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/react/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles) These standard DOM props are also supported for all built-in components: @@ -84,11 +84,11 @@ These standard DOM props are also supported for all built-in components: * `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. +* [`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. +* [`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. +* [`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) @@ -302,7 +302,7 @@ Some React events do not map directly to the browser's native events. For exampl React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) properties: -* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): A boolean. Returns whether the event bubbles through the DOM. +* [`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. @@ -662,7 +662,7 @@ An event handler type for [touch events.](https://developer.mozilla.org/en-US/do * [`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) - + It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties: * [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail) @@ -795,7 +795,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, }; @@ -924,7 +924,7 @@ For more advanced use cases, the `ref` attribute also accepts a [callback functi ### Dangerously setting the inner HTML {/*dangerously-setting-the-inner-html*/} -You can pass a raw HTML string to an element like so: +You can pass a raw HTML string or a [`TrustedHTML`](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML) value to an element like so: ```js const markup = { __html: '

some raw html

' }; @@ -933,6 +933,8 @@ return
; **This is dangerous. As with the underlying DOM [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability this way.** +If your site enforces [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API), pass a `TrustedHTML` value created by your security policy as `__html`. React passes the value to the browser without converting it to a string, allowing the browser to validate it. Your policy must still ensure that any input used to create the value is trusted and sanitized. + For example, if you use a Markdown library that converts Markdown to HTML, you trust that its parser doesn't contain bugs, and the user only sees their own input, you can display the resulting HTML like this: diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 1043b13a0..10e9c6794 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -48,9 +48,47 @@ To create interactive controls for submitting information, render the [built-in ## Usage {/*usage*/} -### Handle form submission on the client {/*handle-form-submission-on-the-client*/} +### Handle form submission with an event handler {/*handle-form-submission-with-an-event-handler*/} -Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. After the `action` function succeeds, all uncontrolled field elements in the form are reset. +Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page, so call [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to override that behavior. + +This example reads the submitted values with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), which collects every field by its `name`. This keeps the inputs [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). If you instead [control an input with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), read from that state on submit rather than from `FormData`. + + + +```js src/App.js +export default function Search() { + function handleSubmit(e) { + // Prevent the browser from reloading the page + e.preventDefault(); + + // Read the form data + const form = e.target; + const formData = new FormData(form); + const query = formData.get("query"); + alert(`You searched for '${query}'`); + } + + return ( +
+ + +
+ ); +} +``` + + + + + +Reading form data with `onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event), so you can call `e.preventDefault()` and read the data yourself. Passing the function to the `action` prop instead runs the submission in a [Transition](/reference/react/useTransition). React then tracks the pending state, sends thrown errors to the nearest error boundary, and lets the form work with [`useActionState`](/reference/react/useActionState) and [`useOptimistic`](/reference/react/useOptimistic). An `action` can also be a [Server Function](/reference/rsc/server-functions), which `onSubmit` does not support. + + + +### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/} + +Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. Unlike `onSubmit`, an `action` runs in a [Transition](/reference/react/useTransition) and calling `e.preventDefault()` isn't needed. After the `action` function succeeds, all uncontrolled field elements in the form are reset. diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index 6bca8095d..deecbafce 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -205,7 +205,7 @@ root.render(); export class MyElement extends HTMLElement { constructor() { super(); - // The value here will be overwritten by React + // The value here will be overwritten by React // when initialized as an element this.value = undefined; } diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md index 17232ac1d..37ff14d98 100644 --- a/src/content/reference/react-dom/components/input.md +++ b/src/content/reference/react-dom/components/input.md @@ -212,7 +212,7 @@ export default function MyForm() { type="radio" name="myRadio" value="option2" - defaultChecked={true} + defaultChecked={true} /> Option 2 diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index de7bec3cb..6d374807c 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -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 ``. +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 ``. diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md index 20412a32a..35a95c5aa 100644 --- a/src/content/reference/react-dom/components/meta.md +++ b/src/content/reference/react-dom/components/meta.md @@ -34,7 +34,7 @@ To add document metadata, render the [built-in browser `` component](https It should have *exactly one* of the following props: `name`, `httpEquiv`, `charset`, `itemProp`. The `` 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 `` component within the document’s ``, regardless of where in the React tree it is rendered. The `` is the only valid place for `` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `` components itself. +React will always place the DOM element corresponding to the `` component within the document’s ``, regardless of where in the React tree it is rendered. The `` is the only valid place for `` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `` components itself. -There is one exception to this: if `` 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 `` 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 `` 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 `` 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 `` regardless of where in the React tree it is rendered. ```html @@ -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 `` 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 `` but will place them like any other React component. +You can use the `` 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 `` but will place them like any other React component. ```js
diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md index 8733e036f..163781103 100644 --- a/src/content/reference/react-dom/components/option.md +++ b/src/content/reference/react-dom/components/option.md @@ -79,5 +79,5 @@ export default function FruitPicker() { select { margin: 5px; } ``` - + diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md index 6febd8465..06032a893 100644 --- a/src/content/reference/react-dom/components/script.md +++ b/src/content/reference/react-dom/components/script.md @@ -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 f30dc53f4..72033ea0a 100644 --- a/src/content/reference/react-dom/components/select.md +++ b/src/content/reference/react-dom/components/select.md @@ -103,7 +103,7 @@ export default function FruitPicker() { select { margin: 5px; } ``` - + --- @@ -178,7 +178,7 @@ export default function FruitPicker() { select { margin: 5px; } ``` - + diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md index 9c6d85af8..9e4d8e65a 100644 --- a/src/content/reference/react-dom/components/title.md +++ b/src/content/reference/react-dom/components/title.md @@ -36,11 +36,11 @@ To specify the title of the document, render the [built-in browser `` com #### 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/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 0fc83e3e1..7517d8ae2 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -40,7 +40,7 @@ export default function App() { } ``` -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. +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. In the above example, `Submit` uses this information to disable `<button>` presses while the form is submitting. @@ -65,7 +65,7 @@ A `status` object with the following properties: #### Caveats {/*caveats*/} -* The `useFormStatus` Hook must be called from a component that is rendered inside a `<form>`. +* 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. --- @@ -75,7 +75,7 @@ A `status` object with the following properties: ### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/} To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned. -Here, we use the `pending` property to indicate the form is submitting. +Here, we use the `pending` property to indicate the form is submitting. <Sandpack> @@ -110,7 +110,7 @@ export async function submitForm(query) { await new Promise((res) => setTimeout(res, 1000)); } ``` -</Sandpack> +</Sandpack> <Pitfall> @@ -132,7 +132,7 @@ Instead call `useFormStatus` from inside a component that is located inside `<fo ```js function Submit() { // ✅ `pending` will be derived from the form that wraps the Submit component - const { pending } = useFormStatus(); + const { pending } = useFormStatus(); return <button disabled={pending}>...</button>; } @@ -215,7 +215,7 @@ button { ``` -</Sandpack> +</Sandpack> --- @@ -223,7 +223,7 @@ button { ### `status.pending` is never `true` {/*pending-is-never-true*/} -`useFormStatus` will only return status information for a parent `<form>`. +`useFormStatus` will only return status information for a parent `<form>`. If the component that calls `useFormStatus` is not nested in a `<form>`, `status.pending` will always return `false`. Verify `useFormStatus` is called in a component that is a child of a `<form>` element. diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md index 7709db255..c7ab1a00e 100644 --- a/src/content/reference/react-dom/index.md +++ b/src/content/reference/react-dom/index.md @@ -30,6 +30,12 @@ The `react-dom` āĻĒā§āĻ¯āĻžāĻ•ā§‡āĻœā§‡ āĻ¯ā§‡āĻ¸āĻŦ āĻŽā§‡āĻĨāĻĄ āĻ°ā§Ÿā§‡āĻ› * [`preinit`](/reference/react-dom/preinit) āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻāĻ•āĻŸāĻŋ external script fetch āĻāĻŦāĻ‚ evaluate āĻ•āĻ°āĻ¤ā§‡ āĻŦāĻž stylesheet fetch āĻāĻŦāĻ‚ insert āĻ•āĻ°āĻ¤ā§‡ āĻĻā§‡āĻ¯āĻŧāĨ¤ * [`preinitModule`](/reference/react-dom/preinitModule) āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻāĻ•āĻŸāĻŋ ESM module fetch āĻāĻŦāĻ‚ evaluate āĻ•āĻ°āĻ¤ā§‡ āĻĻā§‡āĻ¯āĻŧāĨ¤ +## Server Rendering APIs {/*server-rendering-apis*/} + +This API controls how components render on the server: + +* [`browser`](/reference/react-dom/browser) lets you mark a component as browser-only during server rendering. + --- ## Entry points {/*entry-points*/} diff --git a/src/content/reference/react-dom/preconnect.md b/src/content/reference/react-dom/preconnect.md index 047b1fcac..f28de8776 100644 --- a/src/content/reference/react-dom/preconnect.md +++ b/src/content/reference/react-dom/preconnect.md @@ -34,7 +34,7 @@ function AppRoot() { [See more examples below.](#usage) -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. +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. #### Parameters {/*parameters*/} diff --git a/src/content/reference/react-dom/prefetchDNS.md b/src/content/reference/react-dom/prefetchDNS.md index ef11aa3e5..c9229bba2 100644 --- a/src/content/reference/react-dom/prefetchDNS.md +++ b/src/content/reference/react-dom/prefetchDNS.md @@ -34,7 +34,7 @@ function AppRoot() { [See more examples below.](#usage) -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. +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. #### Parameters {/*parameters*/} diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md index 5dcaaf933..d9f3808c4 100644 --- a/src/content/reference/react-dom/preinit.md +++ b/src/content/reference/react-dom/preinit.md @@ -47,10 +47,10 @@ The `preinit` function provides the browser with a hint that it should start dow * `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`. + * `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. + * `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`. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md index 93a4a730f..72c443291 100644 --- a/src/content/reference/react-dom/preinitModule.md +++ b/src/content/reference/react-dom/preinitModule.md @@ -49,7 +49,7 @@ The `preinitModule` function provides the browser with a hint that it should sta * `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. + * `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. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md index e9d00fc60..5d625d236 100644 --- a/src/content/reference/react-dom/preload.md +++ b/src/content/reference/react-dom/preload.md @@ -51,7 +51,7 @@ The `preload` function provides the browser with a hint that it should start dow * `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. + * `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). diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md index 944d438fc..c26b4878f 100644 --- a/src/content/reference/react-dom/preloadModule.md +++ b/src/content/reference/react-dom/preloadModule.md @@ -49,7 +49,7 @@ The `preloadModule` function provides the browser with a hint that it should sta * `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. + * `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. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md index 0072669c0..bac72f59f 100644 --- a/src/content/reference/react-dom/server/index.md +++ b/src/content/reference/react-dom/server/index.md @@ -12,8 +12,15 @@ title: Server React DOM API [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) āĻ¸āĻš āĻāĻ¨āĻ­āĻžāĻ¯āĻŧāĻ°āĻ¨āĻŽā§‡āĻ¨ā§āĻŸ āĻ—ā§āĻ˛ā§‹āĻ¤ā§‡ (āĻ¯āĻžāĻ° āĻŽāĻ§ā§āĻ¯ā§‡ āĻ°āĻ¯āĻŧā§‡āĻ›ā§‡ āĻŦā§āĻ°āĻžāĻ‰āĻœāĻžāĻ°, Deno āĻāĻŦāĻ‚ āĻ•āĻŋāĻ›ā§ āĻ†āĻ§ā§āĻ¨āĻŋāĻ• Edge runtime) āĻ•ā§‡āĻŦāĻ˛ āĻāĻ‡ āĻŽā§‡āĻĨāĻĄāĻ—ā§āĻ˛ā§‹ āĻĒāĻžāĻ“āĻ¯āĻŧāĻž āĻ¯āĻžāĻŦā§‡āĻƒ +<<<<<<< HEAD * [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) āĻāĻ•āĻŸāĻž React āĻŸā§āĻ°āĻŋāĻ•ā§‡ āĻāĻ•āĻŸāĻž [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). +======= +These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes: + +* [`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/resume) resumes [`prerender`](/reference/react-dom/static/prerender) to a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 <Note> @@ -27,8 +34,13 @@ Node.js also includes these methods for compatibility, but they are not recommen [Node.js Streams](https://nodejs.org/api/stream.html) āĻ¸āĻš āĻāĻ¨āĻ­āĻžāĻ¯āĻŧāĻ°āĻ¨āĻŽā§‡āĻ¨ā§āĻŸ āĻ—ā§āĻ˛ā§‹āĻ¤ā§‡ āĻ•ā§‡āĻŦāĻ˛ āĻāĻ‡ āĻŽā§‡āĻĨāĻĄāĻ—ā§āĻ˛ā§‹ āĻĒāĻžāĻ“āĻ¯āĻŧāĻž āĻ¯āĻžāĻŦā§‡āĻƒ +<<<<<<< HEAD * [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) āĻāĻ•āĻŸāĻž React āĻŸā§āĻ°āĻŋ āĻ•ā§‡ āĻāĻ•āĻŸāĻž 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) +======= +* [`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/resumeToPipeableStream) resumes [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 --- diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 9a460f6c6..3faeda0d6 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -48,6 +48,7 @@ Client-side āĻ, server-generated HTML āĻ•ā§‡ āĻ‡āĻ¨ā§āĻŸāĻžāĻ°â€ā§āĻ¯āĻžāĻ• * `reactNode`: āĻāĻ•āĻŸāĻŋ React āĻ¨ā§‹āĻĄ āĻ¯ā§‡āĻŸāĻŋāĻ•ā§‡ āĻ†āĻĒāĻ¨āĻŋ HTML āĻ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻ¤ā§‡ āĻšāĻžāĻ¨āĨ¤ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĻ¸ā§āĻŦāĻ°ā§‚āĻĒ, `<App />` āĻāĻ° āĻŽāĻ¤ā§‹ āĻāĻ•āĻŸāĻŋ JSX element āĨ¤ āĻāĻŸāĻž āĻĒā§āĻ°āĻ¤ā§āĻ¯āĻžāĻļāĻŋāĻ¤ āĻ¯ā§‡, āĻāĻŸāĻŋ āĻĒā§āĻ°ā§‹ āĻĄāĻ•ā§āĻŽā§‡āĻ¨ā§āĻŸ āĻ•ā§‡ āĻ§āĻžāĻ°āĻŖ āĻ•āĻ°āĻŦā§‡, āĻ¤āĻžāĻ‡ `App` āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻŸāĻŋāĻ° `<html>` āĻŸā§āĻ¯āĻžāĻ— āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻžāĻ° āĻ•āĻĨāĻžāĨ¤ +<<<<<<< HEAD * **optional** `options`: āĻāĻ•āĻŸāĻŋ object āĻ¯āĻžāĻ¤ā§‡ streaming options āĻĨāĻžāĻ•āĻŦā§‡āĨ¤ * **optional** `bootstrapScriptContent`: āĻ¯āĻĻāĻŋ āĻĒā§āĻ°āĻĻāĻžāĻ¨ āĻ•āĻ°āĻž āĻšā§Ÿ, āĻ¤āĻžāĻšāĻ˛ā§‡ āĻāĻ‡ string āĻŸāĻŋ āĻāĻ•āĻŸāĻŋ inline `<script>` tag āĻ āĻĨāĻžāĻ•āĻŦā§‡āĨ¤ * **optional** `bootstrapScripts`: page āĻ emit āĻ•āĻ°āĻžāĻ° āĻœāĻ¨ā§āĻ¯ `<script>` tag āĻāĻ° string URL āĻ—ā§āĻ˛ā§‹āĻ° āĻāĻ•āĻŸāĻŋ arrayāĨ¤ [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) āĻ•āĻ˛ āĻ•āĻ°ā§‡ āĻāĻŽāĻ¨ `<script>` include āĻ•āĻ°āĻ¤ā§‡ āĻāĻŸāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§āĻ¨āĨ¤ āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻŋ client āĻ āĻāĻ•ā§‡āĻŦāĻžāĻ°ā§‡āĻ‡ React āĻ°āĻžāĻ¨ āĻ•āĻ°āĻ¤ā§‡ āĻ¨āĻž āĻšāĻžāĻ¨ āĻ¤āĻžāĻšāĻ˛ā§‡ āĻāĻŸāĻŋ āĻŦāĻžāĻĻ āĻĻāĻŋāĻ¨āĨ¤ @@ -60,6 +61,25 @@ Client-side āĻ, server-generated HTML āĻ•ā§‡ āĻ‡āĻ¨ā§āĻŸāĻžāĻ°â€ā§āĻ¯āĻžāĻ• * **optional** `onShellReady`: āĻāĻ•āĻŸāĻŋ callback āĻ¯ā§‡āĻŸāĻŋ [initial shell](#specifying-what-goes-into-the-shell) render āĻšāĻ“āĻ¯āĻŧāĻžāĻ° āĻ āĻŋāĻ• āĻĒāĻ°ā§‡āĻ‡ āĻĢāĻžā§ŸāĻžāĻ° āĻšāĻ¯āĻŧāĨ¤ āĻ†āĻĒāĻ¨āĻŋ āĻāĻ–āĻžāĻ¨ā§‡ [status code set āĻ•āĻ°āĻ¤ā§‡](#setting-the-status-code) āĻāĻŦāĻ‚ streaming āĻļā§āĻ°ā§ āĻ•āĻ°āĻ¤ā§‡ `pipe` āĻ•āĻ˛ āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨āĨ¤ React shell āĻāĻ° āĻĒāĻ° [āĻ…āĻ¤āĻŋāĻ°āĻŋāĻ•ā§āĻ¤ content stream āĻ•āĻ°āĻŦā§‡](#streaming-more-content-as-it-loads) inline `<script>` tag āĻ¸āĻš āĻ¯ā§‡āĻ—ā§āĻ˛ā§‹ HTML loading fallback āĻ—ā§āĻ˛ā§‹āĻ•ā§‡ content āĻĻāĻŋāĻ¯āĻŧā§‡ replace āĻ•āĻ°ā§‡āĨ¤ * **optional** `onShellError`: āĻāĻ•āĻŸāĻŋ callback āĻ¯ā§‡āĻŸāĻŋ initial shell render āĻ•āĻ°āĻ¤ā§‡ error āĻšāĻ˛ā§‡ āĻĢāĻžā§ŸāĻžāĻ° āĻšāĻ¯āĻŧāĨ¤ āĻāĻŸāĻŋ error āĻ•ā§‡ argument āĻšāĻŋāĻ¸ā§‡āĻŦā§‡ receive āĻ•āĻ°ā§‡āĨ¤ āĻāĻ–āĻ¨ā§‹ stream āĻĨā§‡āĻ•ā§‡ āĻ•ā§‹āĻ¨ā§‹ byte emit āĻšāĻ¯āĻŧāĻ¨āĻŋ, āĻāĻŦāĻ‚ `onShellReady` āĻŦāĻž `onAllReady` āĻ•ā§‹āĻ¨ā§‹āĻŸāĻŋāĻ‡ call āĻšāĻŦā§‡ āĻ¨āĻž, āĻ¤āĻžāĻ‡ āĻ†āĻĒāĻ¨āĻŋ [āĻāĻ•āĻŸāĻŋ fallback HTML shell output āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨](#recovering-from-errors-inside-the-shell)āĨ¤ * **optional** `progressiveChunkSize`: āĻāĻ•āĻŸāĻŋ chunk āĻ byte āĻāĻ° āĻ¸āĻ‚āĻ–ā§āĻ¯āĻžāĨ¤ [default heuristic āĻ¸āĻŽā§āĻĒāĻ°ā§āĻ•ā§‡ āĻ†āĻ°ā§‹ āĻĒāĻĄāĻŧā§āĻ¨āĨ¤](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) +======= +* **optional** `options`: An object with streaming options. + * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag. + * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. + * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. + * **optional** `formState`: The form state from a form submission handled by a [Server Function](/reference/rsc/server-functions). If the page is rendered in response to a submission of a form that uses [`useActionState`](/reference/react/useActionState) with a `permalink`, pass the resulting form state so that React embeds it into the HTML for hydration. The same value must be passed to [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) on the client. This is typically passed through by your framework. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `importMap`: An [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) object with `imports` and `scopes` properties. React emits it as an inline `<script type="importmap">` tag before any module scripts, so that `<script type="module">` tags (for example, from `bootstrapModules`) can use bare module specifiers. <CanaryBadge /> When `nonce` is set, it is also applied to the import map script. + * **optional** `maxHeadersLength`: The maximum total length of the header content passed to `onHeaders`, measured in UTF-16 code units. Defaults to 2000. Once the limit is reached, React stops adding resource hints to the headers. + * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. + * **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). To use different nonces for scripts and styles, pass an object with `script` and `style` properties instead. + * **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the [shell](#specifying-what-goes-into-the-shell) and all additional [content.](#streaming-more-content-as-it-loads) You can use this instead of `onShellReady` [for crawlers and static generation.](#waiting-for-all-content-to-load-for-crawlers-and-static-generation) If you start streaming here, you won't get any progressive loading. The stream will contain the final HTML. + * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) + * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted. + * **optional** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives an object with a `Link` property containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`. + * **optional** `onShellReady`: A callback that fires right after the [initial shell](#specifying-what-goes-into-the-shell) has been rendered. You can [set the status code](#setting-the-status-code) and 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 `<script>` tags that replace the HTML loading fallbacks with the content. + * **optional** `onShellError`: A callback that fires if there was an error rendering the initial shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell.](#recovering-from-errors-inside-the-shell) + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 #### āĻ°āĻŋāĻŸāĻžāĻ°ā§āĻ¨āĻ¸ {/*returns*/} @@ -284,6 +304,7 @@ Streaming āĻāĻ° React āĻ¨āĻŋāĻœā§‡ browser āĻ load āĻšāĻ“āĻ¯āĻŧāĻžāĻ° āĻœāĻ¨ <Note> +<<<<<<< HEAD **āĻļā§āĻ§ā§āĻŽāĻžāĻ¤ā§āĻ° Suspense-enabled āĻĄāĻžāĻŸāĻž āĻ¸ā§‹āĻ°ā§āĻ¸āĻ—ā§āĻ˛ā§‹ Suspense component āĻ•ā§‡ activate āĻ•āĻ°āĻŦā§‡āĨ¤** āĻāĻ—ā§āĻ˛ā§‹āĻ° āĻŽāĻ§ā§āĻ¯ā§‡ āĻ°āĻ¯āĻŧā§‡āĻ›ā§‡: - [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) āĻāĻŦāĻ‚ [Next.js](https://nextjs.org/docs/getting-started/react-essentials) āĻāĻ° āĻŽāĻ¤ā§‹ Suspense-enabled āĻĢā§āĻ°ā§‡āĻŽāĻ“āĻ¯āĻŧāĻžāĻ°ā§āĻ• āĻĻāĻŋā§Ÿā§‡ āĻĄāĻžāĻŸāĻž āĻĢā§‡āĻšāĻŋāĻ‚ @@ -295,6 +316,9 @@ Streaming āĻāĻ° React āĻ¨āĻŋāĻœā§‡ browser āĻ load āĻšāĻ“āĻ¯āĻŧāĻžāĻ° āĻœāĻ¨ āĻ‰āĻĒāĻ°ā§‡āĻ° `Posts` component āĻ āĻ†āĻĒāĻ¨āĻŋ āĻ āĻŋāĻ• āĻ•āĻŋāĻ­āĻžāĻŦā§‡ data load āĻ•āĻ°āĻŦā§‡āĻ¨ āĻ¤āĻž āĻ†āĻĒāĻ¨āĻžāĻ° framework āĻāĻ° āĻ‰āĻĒāĻ° āĻ¨āĻŋāĻ°ā§āĻ­āĻ° āĻ•āĻ°ā§‡āĨ¤ āĻ¯āĻĻāĻŋ āĻ†āĻĒāĻ¨āĻŋ āĻāĻ•āĻŸāĻŋ Suspense-enabled framework āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡āĻ¨, āĻ¤āĻžāĻšāĻ˛ā§‡ āĻ†āĻĒāĻ¨āĻŋ āĻ¤āĻžāĻ° data fetching documentation āĻ āĻŦāĻŋāĻ¸ā§āĻ¤āĻžāĻ°āĻŋāĻ¤ āĻ¤āĻĨā§āĻ¯ āĻĒāĻžāĻŦā§‡āĻ¨āĨ¤ Opinionated framework āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ›āĻžāĻĄāĻŧāĻž Suspense-enabled āĻĄāĻžāĻŸāĻž āĻĢā§‡āĻšāĻŋāĻ‚ āĻāĻ–āĻ¨ā§‹ āĻ¸āĻžāĻĒā§‹āĻ°ā§āĻŸā§‡āĻĄ āĻ¨āĻžāĨ¤ Suspense-enabled āĻĄāĻžāĻŸāĻž āĻ¸ā§‹āĻ°ā§āĻ¸ implement āĻ•āĻ°āĻžāĻ° requirement āĻ—ā§āĻ˛ā§‹ unstable āĻāĻŦāĻ‚ undocumentedāĨ¤ Suspense āĻāĻ° āĻ¸āĻžāĻĨā§‡ āĻĄāĻžāĻŸāĻž āĻ¸ā§‹āĻ°ā§āĻ¸ integrate āĻ•āĻ°āĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻāĻ•āĻŸāĻŋ official API āĻ°āĻŋā§Ÿā§‡āĻ•ā§āĻŸā§‡āĻ° āĻ­āĻŦāĻŋāĻˇā§āĻ¯ā§Ž āĻ­āĻžāĻ°ā§āĻ¸āĻ¨ā§‡ āĻ°āĻŋāĻ˛āĻŋāĻœ āĻšāĻŦā§‡āĨ¤ +======= +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 </Note> @@ -401,7 +425,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Something went wrong</h1>'); + response.send('<h1>Something went wrong</h1>'); }, onError(error) { console.error(error); @@ -460,7 +484,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Something went wrong</h1>'); + response.send('<h1>Something went wrong</h1>'); }, onError(error) { console.error(error); @@ -486,7 +510,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Something went wrong</h1>'); + response.send('<h1>Something went wrong</h1>'); }, onError(error) { didError = true; @@ -530,7 +554,7 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = getStatusCode(); response.setHeader('content-type', 'text/html'); - response.send('<h1>Something went wrong</h1>'); + response.send('<h1>Something went wrong</h1>'); }, onError(error) { didError = true; @@ -570,13 +594,13 @@ const { pipe } = renderToPipeableStream(<App />, { onShellError(error) { response.statusCode = 500; response.setHeader('content-type', 'text/html'); - response.send('<h1>Something went wrong</h1>'); + response.send('<h1>Something went wrong</h1>'); }, 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 f4ed54ce2..1771b1d3b 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -53,11 +53,16 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag. * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. + * **optional** `formState`: The form state from a form submission handled by a [Server Function](/reference/rsc/server-functions). If the page is rendered in response to a submission of a form that uses [`useActionState`](/reference/react/useActionState) with a `permalink`, pass the resulting form state so that React embeds it into the HTML for hydration. The same value must be passed to [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) on the client. This is typically passed through by your framework. * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `importMap`: An [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) object with `imports` and `scopes` properties. React emits it as an inline `<script type="importmap">` tag before any module scripts, so that `<script type="module">` tags (for example, from `bootstrapModules`) can use bare module specifiers. <CanaryBadge /> When `nonce` is set, it is also applied to the import map script. + * **optional** `maxHeadersLength`: The maximum total length of the header content passed to `onHeaders`, measured in UTF-16 code units. Defaults to 2000. Once the limit is reached, React stops adding resource hints to the headers. * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. - * **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** `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). To use different nonces for scripts and styles, pass an object with `script` and `style` properties instead. + * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](#setting-the-status-code) before the shell is emitted. - * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives a [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) instance containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`. + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * **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. @@ -283,17 +288,7 @@ Streaming does not need to wait for React itself to load in the browser, or for <Note> -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. </Note> diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md index 17b48b2ac..012d3823f 100644 --- a/src/content/reference/react-dom/server/resume.md +++ b/src/content/reference/react-dom/server/resume.md @@ -48,6 +48,7 @@ async function handler(request, writable) { * **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** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) * **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`. @@ -75,7 +76,7 @@ The returned stream has an additional property: <Sandpack> -```js src/App.js hidden +```js src/App.js hidden ``` ```html public/index.html @@ -201,10 +202,18 @@ main(document.getElementById("container")); 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); + const reader = readable.getReader(); + + while (true) { + const {done, value} = await reader.read(); + if (done) { + break; + } + const partialHTML = decoder.decode(value, {stream: true}); document.write(partialHTML); } + + document.write(decoder.decode()); } // This doesn't need to be an error. @@ -233,4 +242,4 @@ export function sleep(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 +The [usage section of `prerender`](/reference/react-dom/static/prerender#usage) includes examples of how to use `prerender` specifically. diff --git a/src/content/reference/react-dom/server/resumeToPipeableStream.md b/src/content/reference/react-dom/server/resumeToPipeableStream.md index 48caa3be6..f80cf23fc 100644 --- a/src/content/reference/react-dom/server/resumeToPipeableStream.md +++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md @@ -26,10 +26,10 @@ This API is specific to Node.js. Environments with [Web Streams,](https://develo ### `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) +Call `resumeToPipeableStream` 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 { resumeToPipeableStream } from 'react-dom/server'; import {getPostponedState} from './storage'; async function handler(request, response) { @@ -50,7 +50,8 @@ async function handler(request, response) { * `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** `onAllReady`: A callback that fires when all rendering is complete, including both the shell and all additional content. You can call `pipe` here instead of in `onShellReady` for crawlers and static generation. The stream will contain the final HTML. + * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) * **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 `<script>` tags that replace the HTML loading fallbacks with the content. * **optional** `onShellError`: A callback that fires if there was an error rendering the shell. It receives the error as an argument. No bytes were emitted from the stream yet, and neither `onShellReady` nor `onAllReady` will get called, so you can [output a fallback HTML shell](#recovering-from-errors-inside-the-shell) or use the prelude. @@ -58,7 +59,7 @@ async function handler(request, response) { #### Returns {/*returns*/} -`resume` returns an object with two methods: +`resumeToPipeableStream` returns an object with two methods: * `pipe` outputs the HTML into the provided [Writable Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) Call `pipe` in `onShellReady` if you want to enable streaming, or in `onAllReady` for crawlers and static generation. * `abort` lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md index 31ebc385b..cde1268f6 100644 --- a/src/content/reference/react-dom/static/index.md +++ b/src/content/reference/react-dom/static/index.md @@ -15,7 +15,7 @@ The `react-dom/static` APIs let you generate static HTML for React components. T These methods are only available in the environments with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), which includes browsers, Deno, and some modern edge runtimes: * [`prerender`](/reference/react-dom/static/prerender) renders a React tree to static HTML with a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) -* <ExperimentalBadge /> [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) continues a prerendered React tree to static HTML with a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). +* [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) continues a prerendered React tree to static HTML with a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream). Node.js also includes these methods for compatibility, but they are not recommended due to worse performance. Use the [dedicated Node.js APIs](#static-apis-for-nodejs-streams) instead. @@ -26,5 +26,5 @@ Node.js also includes these methods for compatibility, but they are not recommen These methods are only available in the environments with [Node.js Streams](https://nodejs.org/api/stream.html): * [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) renders a React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html) -* <ExperimentalBadge /> [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) continues a prerendered React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html) +* [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) continues a prerendered React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html) diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 8ad47aa15..1a4258f8f 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -54,9 +54,13 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `importMap`: An [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) object with `imports` and `scopes` properties. React emits it as an inline `<script type="importmap">` tag before any module scripts, so that `<script type="module">` tags (for example, from `bootstrapModules`) can use bare module specifiers. + * **optional** `maxHeadersLength`: The maximum total length of the header content passed to `onHeaders`, measured in UTF-16 code units. Defaults to 2000. Once the limit is reached, React stops adding resource hints to the headers. * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. + * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) * **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`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToReadableStream#setting-the-status-code) before the shell is emitted. - * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives a [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) instance containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`. + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. #### Returns {/*returns*/} @@ -275,17 +279,7 @@ Imagine that `<Posts />` needs to load some data, which takes some time. Ideally <Note> -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. </Note> diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index 7a31f66a1..52a96fef2 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -55,9 +55,13 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all. * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead. * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters) + * **optional** `importMap`: An [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) object with `imports` and `scopes` properties. React emits it as an inline `<script type="importmap">` tag before any module scripts, so that `<script type="module">` tags (for example, from `bootstrapModules`) can use bare module specifiers. + * **optional** `maxHeadersLength`: The maximum total length of the header content passed to `onHeaders`, measured in UTF-16 code units. Defaults to 2000. Once the limit is reached, React stops adding resource hints to the headers. * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML. + * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#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/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted. - * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) + * **optional** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives a [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) instance containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`. + * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225) * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client. #### Returns {/*returns*/} @@ -276,17 +280,7 @@ Imagine that `<Posts />` needs to load some data, which takes some time. Ideally <Note> -**Only Suspense-enabled data sources will activate the Suspense component.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a Promise with [`use`](/reference/react/use) - -Suspense **does not** detect when data is fetched inside an Effect or event handler. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. </Note> diff --git a/src/content/reference/react-dom/static/resumeAndPrerender.md b/src/content/reference/react-dom/static/resumeAndPrerender.md index 10b240dd9..a0191aae3 100644 --- a/src/content/reference/react-dom/static/resumeAndPrerender.md +++ b/src/content/reference/react-dom/static/resumeAndPrerender.md @@ -7,7 +7,7 @@ title: resumeAndPrerender `resumeAndPrerender` continues a prerendered React tree to a static HTML string using a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). ```js -const { prelude,postpone } = await resumeAndPrerender(reactNode, postponedState, options?) +const {prelude, postponed} = await resumeAndPrerender(reactNode, postponedState, options?) ``` </Intro> @@ -53,6 +53,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * `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** `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** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. #### Returns {/*returns*/} diff --git a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md index 4ce3c4736..018fcf6d3 100644 --- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md @@ -49,6 +49,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to * `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** `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** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server) * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. #### Returns {/*returns*/} diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index b79bed9e2..b521970b7 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -43,7 +43,7 @@ In this way, Activity can be thought of as a mechanism for rendering "background #### Props {/*props*/} * `children`: The UI you intend to show and hide. -* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. +* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. #### Caveats {/*caveats*/} @@ -111,7 +111,7 @@ import { useState } from 'react'; export default function Sidebar() { const [isExpanded, setIsExpanded] = useState(false) - + return ( <nav> <button onClick={() => setIsExpanded(!isExpanded)}> @@ -219,7 +219,7 @@ import { useState } from 'react'; export default function Sidebar() { const [isExpanded, setIsExpanded] = useState(false) - + return ( <nav> <button onClick={() => setIsExpanded(!isExpanded)}> @@ -287,7 +287,7 @@ In this example, the Contact tab has a `<textarea>` where the user can enter a m <Sandpack> -```js src/App.js +```js src/App.js import { useState } from 'react'; import TabButton from './TabButton.js'; import Home from './Home.js'; @@ -434,7 +434,7 @@ export default function Home() { } ``` -```js src/Contact.js +```js src/Contact.js export default function Contact() { return ( <div> @@ -755,17 +755,7 @@ Pre-rendering components with hidden Activity boundaries is a powerful way to re <Note> -**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include: - -- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) -- Lazy-loading component code with [`lazy`](/reference/react/lazy) -- Reading the value of a cached Promise with [`use`](/reference/react/use) - -Activity **does not** detect data that is fetched inside an Effect. - -The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation. - -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. +Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), is fetched during pre-rendering. Activity does not detect data fetched inside an Effect. </Note> @@ -903,7 +893,7 @@ function Page() { </Activity> </> ); -} +} ``` --- @@ -975,7 +965,7 @@ export default function Home() { } ``` -```js src/Video.js +```js src/Video.js export default function Video() { return ( <video @@ -1068,7 +1058,7 @@ export default function Home() { } ``` -```js src/Video.js +```js src/Video.js export default function Video() { return ( <video @@ -1185,7 +1175,7 @@ export default function Home() { } ``` -```js src/Video.js +```js src/Video.js import { useRef, useLayoutEffect } from 'react'; export default function Video() { @@ -1238,7 +1228,7 @@ The most common cases of this will be from the following tags: Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted. -To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). +To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). --- @@ -1249,4 +1239,4 @@ When an `<Activity>` is "hidden", all its children's Effects are cleaned up. Con If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead. -To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. +To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index 81a28c5b3..3647b1eed 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -492,7 +492,7 @@ As mentioned earlier, there is no way to get the rendered output of an inner com ### Converting children to an array {/*converting-children-to-an-array*/} -Call `Children.toArray(children)` to turn the `children` data structure into a regular JavaScript array. This lets you manipulate the array with built-in array methods like [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), or [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) +Call `Children.toArray(children)` to turn the `children` data structure into a regular JavaScript array. This lets you manipulate the array with built-in array methods like [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), [`sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), or [`reverse`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) <Sandpack> @@ -861,7 +861,7 @@ export default function App() { return ( <Row isHighlighted={index % 2 === 0}> <p>This is the {id} item.</p> - </Row> + </Row> ); }} /> diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 2509aa759..f6c8cc4bf 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -117,7 +117,7 @@ class Counter extends Component { handleAgeChange = () => { this.setState({ - age: this.state.age + 1 + age: this.state.age + 1 }); }; @@ -724,7 +724,7 @@ Return `false` to tell React that re-rendering can be skipped. #### Caveats {/*shouldcomponentupdate-caveats*/} -- This method *only* exists as a performance optimization. If your component breaks without it, fix that first. +- This method *only* exists as a performance optimization. If your component breaks without it, fix that first. - Consider using [`PureComponent`](/reference/react/PureComponent) instead of writing `shouldComponentUpdate` by hand. `PureComponent` shallowly compares props and state, and reduces the chance that you'll skip a necessary update. @@ -1009,7 +1009,7 @@ Deriving state leads to verbose code and makes your components difficult to thin #### Caveats {/*static-getderivedstatefromprops-caveats*/} -- This method is fired on *every* render, regardless of the cause. This is different from [`UNSAFE_componentWillReceiveProps`](#unsafe_cmoponentwillreceiveprops), which only fires when the parent causes a re-render and not as a result of a local `setState`. +- This method is fired on *every* render, regardless of the cause. This is different from [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops), which only fires when the parent causes a re-render and not as a result of a local `setState`. - This method doesn't have access to the component instance. If you'd like, you can reuse some code between `static getDerivedStateFromProps` and the other class methods by extracting pure functions of the component props and state outside the class definition. @@ -1098,7 +1098,7 @@ export default class Counter extends Component { handleAgeChange = () => { this.setState({ - age: this.state.age + 1 + age: this.state.age + 1 }); }; @@ -1123,7 +1123,7 @@ export default class Counter extends Component { button { display: block; margin-top: 10px; } ``` -</Sandpack> +</Sandpack> <Pitfall> @@ -1207,7 +1207,7 @@ export default class ChatRoom extends Component { this.state.serverUrl, this.props.roomId ); - this.connection.connect(); + this.connection.connect(); } destroyConnection() { @@ -1275,7 +1275,7 @@ By default, if your application throws an error during rendering, React will rem Error boundaries do not catch errors for: - Event handlers [(learn more)](/learn/responding-to-events) -- [Server side rendering](/reference/react-dom/server) +- [Server side rendering](/reference/react-dom/server) - Errors thrown in the error boundary itself (rather than its children) - Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks); an exception is the usage of the [`startTransition`](/reference/react/useTransition#starttransition) function returned by the [`useTransition`](/reference/react/useTransition) Hook. Errors thrown inside the transition function are caught by error boundaries [(learn more)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary) @@ -1439,7 +1439,7 @@ export default class Counter extends Component { handleAgeChange = (e) => { this.setState({ - age: this.state.age + 1 + age: this.state.age + 1 }); }; @@ -1606,7 +1606,7 @@ export default class ChatRoom extends Component { this.state.serverUrl, this.props.roomId ); - this.connection.connect(); + this.connection.connect(); } destroyConnection() { @@ -1795,7 +1795,7 @@ class Panel extends Component { <h1>{this.props.title}</h1> {this.props.children} </section> - ); + ); } } diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 19e4de2a8..0d4c4423d 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,9 +4,13 @@ title: <Fragment> (<>...</>) <Intro> +<<<<<<< HEAD `<Fragment>`, āĻ¯ā§‡āĻŸāĻž āĻŦā§‡āĻļāĻŋāĻ°āĻ­āĻžāĻ— āĻ¸āĻŽā§Ÿ `<>...</>` āĻ¸āĻŋāĻ¨āĻŸā§āĻ¯āĻžāĻ•ā§āĻ¸ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡ āĻĒā§āĻ°āĻ•āĻžāĻļ āĻ•āĻ°āĻž āĻšā§Ÿ, āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻāĻ•āĻŸāĻž wrapper āĻ¨ā§‹āĻĄ āĻ›āĻžā§œāĻžāĻ‡ āĻāĻ˛āĻŋāĻŽā§‡āĻ¨ā§āĻŸ āĻ—ā§āĻ°ā§āĻĒ āĻ•āĻ°āĻžāĻ° āĻ¸ā§āĻŦāĻŋāĻ§āĻž āĻĻā§‡āĻŦā§‡āĨ¤ +======= +`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 -<Canary> Fragments can also accept refs, which enable interacting with underlying DOM nodes without adding wrapper elements. See reference and usage below.</Canary> +Fragments can also accept refs, which enable interacting with underlying DOM nodes without adding wrapper elements. ```js <> @@ -29,6 +33,7 @@ title: <Fragment> (<>...</>) #### Props {/*props*/} +<<<<<<< HEAD - **āĻ…āĻĒāĻļāĻ¨āĻžāĻ˛** `key`: āĻ¯ā§‡āĻ¸āĻŦ āĻĢā§āĻ°ā§āĻ¯āĻžāĻ—āĻŽā§‡āĻ¨ā§āĻŸ āĻ¸ā§āĻĒāĻˇā§āĻŸāĻ­āĻžāĻŦā§‡ `<Fragment>` āĻ¸āĻŋāĻ¨āĻŸā§āĻ¯āĻžāĻ•ā§āĻ¸ āĻĻāĻŋā§Ÿā§‡ āĻĄāĻŋāĻ•ā§āĻ˛ā§‡ā§ŸāĻžāĻ° āĻ•āĻ°āĻž āĻšā§Ÿ āĻ¤āĻžāĻĻā§‡āĻ° [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key) āĻĨāĻžāĻ•āĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĨ¤ - <CanaryBadge /> **optional** `ref`: A ref object (e.g. from [`useRef`](/reference/react/useRef)) or [callback function](/reference/react-dom/components/common#ref-callback). React provides a `FragmentInstance` as the ref value that implements methods for interacting with the DOM nodes wrapped by the Fragment. @@ -57,14 +62,267 @@ When you pass a ref to a fragment, React provides a `FragmentInstance` object wi **Observer methods:** - `observeUsing(observer)`: Starts observing the Fragment's DOM children with an IntersectionObserver or ResizeObserver. - `unobserveUsing(observer)`: Stops observing the Fragment's DOM children with the specified observer. +======= +- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **optional** `ref`: A ref object (e.g. from [`useRef`](/reference/react/useRef)) or [callback function](/reference/react-dom/components/common#ref-callback). React provides a `FragmentInstance` as the ref value that implements methods for interacting with the DOM nodes wrapped by the Fragment. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 #### āĻ¸āĻ¤āĻ°ā§āĻ•āĻ¤āĻž {/*caveats*/} +<<<<<<< HEAD - āĻ†āĻĒāĻ¨āĻŋ āĻ¯āĻĻāĻŋ āĻāĻ•āĻŸāĻž āĻĢā§āĻ°ā§āĻ¯āĻžāĻ—āĻŽā§‡āĻ¨ā§āĻŸā§‡ `key` āĻĒāĻžāĻ¸ āĻ•āĻ°āĻ¤ā§‡ āĻšāĻžāĻ¨, āĻ†āĻĒāĻ¨āĻŋ `<>...</>` āĻ¸āĻŋāĻ¨āĻŸā§āĻ¯āĻžāĻ•ā§āĻ¸ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°āĻŦā§‡āĻ¨ āĻ¨āĻžāĨ¤ āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ āĻ¸ā§āĻĒāĻˇā§āĻŸāĻ­āĻžāĻŦā§‡ `'react'` āĻĨā§‡āĻ•ā§‡ `Fragment` āĻ‡āĻŽāĻĒā§‹āĻ°ā§āĻŸ āĻ•āĻ°āĻ¤ā§‡ āĻšāĻŦā§‡ āĻāĻŦāĻ‚ `<Fragment key={yourKey}>...</Fragment>` āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻ¤ā§‡ āĻšāĻŦā§‡āĨ¤ - āĻ¯āĻ–āĻ¨ āĻ†āĻĒāĻ¨āĻŋ `<><Child /></>` āĻĨā§‡āĻ•ā§‡ `[<Child />]` āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°āĻŋāĻ‚ āĻ āĻšāĻ˛ā§‡ āĻ¯āĻžāĻ¨ āĻŦāĻž āĻĢāĻŋāĻ°ā§‡ āĻ†āĻ¸ā§‡āĻ¨, āĻ…āĻĨāĻŦāĻž `<><Child /></>` āĻĨā§‡āĻ•ā§‡ `<Child />` āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°āĻŋāĻ‚ āĻ āĻ¯āĻžāĻ¨ āĻāĻŦāĻ‚ āĻĢāĻŋāĻ°ā§‡ āĻ†āĻ¸ā§‡āĻ¨ React [state āĻ°āĻŋāĻ¸ā§‡āĻŸ](/learn/preserving-and-resetting-state) āĻ•āĻ°ā§‡ āĻ¨āĻžāĨ¤ āĻāĻŸāĻž āĻļā§āĻ§ā§āĻŽāĻžāĻ¤ā§āĻ° āĻāĻ• āĻ¸ā§āĻ¤āĻ° āĻ—āĻ­ā§€āĻ°ā§‡ āĻ•āĻžāĻœ āĻ•āĻ°ā§‡āĻƒ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĻ¸ā§āĻŦāĻ°ā§‚āĻĒ, `<><><Child /></></>` āĻĨā§‡āĻ•ā§‡ `<Child />` āĻ āĻ—ā§‡āĻ˛ā§‡ state āĻ°āĻŋāĻ¸ā§‡āĻŸ āĻšā§ŸāĨ¤ āĻ¸ā§āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻŸ semantics āĻĻā§‡āĻ–ā§āĻ¨ [āĻāĻ–āĻžāĻ¨ā§‡āĨ¤](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +======= +* If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`. -- <CanaryBadge /> If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment ref={yourRef}>...</Fragment>`. +* React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 + +* If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment ref={yourRef}>...</Fragment>`. + +--- + +### `FragmentInstance` {/*fragmentinstance*/} + +When you pass a `ref` to a Fragment, React provides a `FragmentInstance` object. It implements methods for interacting with the first-level DOM children wrapped by the Fragment. + +* [`addEventListener`](#addeventlistener) and [`removeEventListener`](#removeeventlistener) manage event listeners across all first-level DOM children. +* [`dispatchEvent`](#dispatchevent) dispatches an event on the Fragment, which can bubble to the DOM parent. +* [`focus`](#focus), [`focusLast`](#focuslast), and [`blur`](#blur) manage focus across all nested children depth-first. +* [`observeUsing`](#observeusing) and [`unobserveUsing`](#unobserveusing) attach and detach `IntersectionObserver` or `ResizeObserver` instances. +* [`getClientRects`](#getclientrects) returns bounding rectangles of all first-level DOM children. +* [`getRootNode`](#getrootnode) returns the root node of the Fragment's parent. +* [`compareDocumentPosition`](#comparedocumentposition) compares the Fragment's position with another node. +* [`scrollIntoView`](#scrollintoview) scrolls the Fragment's children into view. + +--- + +#### `addEventListener(type, listener, options?)` {/*addeventlistener*/} + +Adds an event listener to all first-level DOM children of the Fragment. + +```js +fragmentRef.current.addEventListener('click', handleClick); +``` + +##### Parameters {/*addeventlistener-parameters*/} + +* `type`: A string representing the event type to listen for (e.g. `'click'`, `'focus'`). +* `listener`: The event handler function. +* **optional** `options`: An options object or boolean for capture, matching the [DOM `addEventListener` API.](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) + +##### Returns {/*addeventlistener-returns*/} + +`addEventListener` does not return anything (`undefined`). + +--- + +#### `removeEventListener(type, listener, options?)` {/*removeeventlistener*/} + +Removes an event listener from all first-level DOM children of the Fragment. + +```js +fragmentRef.current.removeEventListener('click', handleClick); +``` + +##### Parameters {/*removeeventlistener-parameters*/} + +* `type`: The event type string. +* `listener`: The event handler function to remove. +* **optional** `options`: An options object or boolean, matching the [DOM `removeEventListener` API.](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) + +##### Returns {/*removeeventlistener-returns*/} + +`removeEventListener` does not return anything (`undefined`). + +--- + +#### `dispatchEvent(event)` {/*dispatchevent*/} + +Dispatches an event on the Fragment. Added event listeners are called, and the event can bubble to the Fragment's DOM parent. + +```js +fragmentRef.current.dispatchEvent(new Event('custom', { bubbles: true })); +``` + +##### Parameters {/*dispatchevent-parameters*/} + +* `event`: An [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) object to dispatch. If `bubbles` is `true`, the event bubbles to the Fragment's parent DOM node. + +##### Returns {/*dispatchevent-returns*/} + +`true` if the event was not cancelled, `false` if `preventDefault()` was called. + +--- + +#### `focus(options?)` {/*focus*/} + +Focuses the first focusable DOM node in the Fragment. Unlike calling `element.focus()` on a DOM element, this method searches *all* nested children depth-first until it finds a focusable element—not just the element itself or its direct children. + +```js +fragmentRef.current.focus(); +``` + +##### Parameters {/*focus-parameters*/} + +* **optional** `options`: A [`FocusOptions`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) object (e.g. `{ preventScroll: true }`). + +##### Returns {/*focus-returns*/} + +`focus` does not return anything (`undefined`). + +--- + +#### `focusLast(options?)` {/*focuslast*/} + +Focuses the last focusable DOM node in the Fragment. Searches nested children depth-first, then iterates in reverse. + +```js +fragmentRef.current.focusLast(); +``` + +##### Parameters {/*focuslast-parameters*/} + +* **optional** `options`: A [`FocusOptions`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) object. + +##### Returns {/*focuslast-returns*/} + +`focusLast` does not return anything (`undefined`). + +--- + +#### `blur()` {/*blur*/} + +Removes focus from the active element if it is within the Fragment. If `document.activeElement` is not within the Fragment, `blur` does nothing. + +```js +fragmentRef.current.blur(); +``` + +##### Returns {/*blur-returns*/} + +`blur` does not return anything (`undefined`). + +--- + +#### `observeUsing(observer)` {/*observeusing*/} + +Starts observing all first-level DOM children of the Fragment with the provided observer. + +```js +const observer = new IntersectionObserver(callback, options); +fragmentRef.current.observeUsing(observer); +``` + +##### Parameters {/*observeusing-parameters*/} + +* `observer`: An [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) or [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) instance. + +##### Returns {/*observeusing-returns*/} + +`observeUsing` does not return anything (`undefined`). + +--- + +#### `unobserveUsing(observer)` {/*unobserveusing*/} + +Stops observing the Fragment's DOM children with the specified observer. + +```js +fragmentRef.current.unobserveUsing(observer); +``` + +##### Parameters {/*unobserveusing-parameters*/} + +* `observer`: The same `IntersectionObserver` or `ResizeObserver` instance previously passed to [`observeUsing`](#observeusing). + +##### Returns {/*unobserveusing-returns*/} + +`unobserveUsing` does not return anything (`undefined`). + +--- + +#### `getClientRects()` {/*getclientrects*/} + +Returns a flat array of [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) objects representing the bounding rectangles of all first-level DOM children. + +```js +const rects = fragmentRef.current.getClientRects(); +``` + +##### Returns {/*getclientrects-returns*/} + +An `Array<DOMRect>` containing the bounding rectangles of all children. + +--- + +#### `getRootNode(options?)` {/*getrootnode*/} + +Returns the root node containing the Fragment's parent DOM node, matching the behavior of [`Node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). + +```js +const root = fragmentRef.current.getRootNode(); +``` + +##### Parameters {/*getrootnode-parameters*/} + +* **optional** `options`: An object with a `composed` boolean property, matching the [DOM `getRootNode` API.](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode#options) + +##### Returns {/*getrootnode-returns*/} + +A `Document`, `ShadowRoot`, or the `FragmentInstance` itself if there is no parent DOM node. + +--- + +#### `compareDocumentPosition(otherNode)` {/*comparedocumentposition*/} + +Compares the document position of the Fragment with another node, returning a bitmask matching the behavior of [`Node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition). + +```js +const position = fragmentRef.current.compareDocumentPosition(otherElement); +``` + +##### Parameters {/*comparedocumentposition-parameters*/} + +* `otherNode`: The DOM node to compare against. + +##### Returns {/*comparedocumentposition-returns*/} + +A bitmask of [position flags](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition#return_value). Empty Fragments and Fragments with children rendered through a [portal](/reference/react-dom/createPortal) include `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` in the result. + +--- + +#### `scrollIntoView(alignToTop?)` {/*scrollintoview*/} + +Scrolls the Fragment's children into view. When `alignToTop` is `true` or omitted, scrolls to align the first child with the top of the scrollable ancestor. When `alignToTop` is `false`, scrolls to align the last child with the bottom. + +```js +fragmentRef.current.scrollIntoView(); +``` + +##### Parameters {/*scrollintoview-parameters*/} + +* **optional** `alignToTop`: A boolean. If `true` (the default), scrolls the first child to the top of the scrollable area. If `false`, scrolls the last child to the bottom. Unlike [`Element.scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView), this method does not accept a `ScrollIntoViewOptions` object. + +##### Returns {/*scrollintoview-returns*/} + +`scrollIntoView` does not return anything (`undefined`). + +##### Caveats {/*scrollintoview-caveats*/} + +* `scrollIntoView` does not accept an options object. Passing one throws an error. Use the `alignToTop` boolean instead. +* When the Fragment has no children, `scrollIntoView` scrolls the nearest sibling or parent into view as a fallback. + +--- + +#### `FragmentInstance` Caveats {/*fragmentinstance-caveats*/} + +* Methods that target children (such as `addEventListener`, `observeUsing`, and `getClientRects`) operate on *first-level host (DOM) children* of the Fragment. They do not directly target children nested inside another DOM element. +* `focus` and `focusLast` search nested children depth-first for focusable elements, unlike event and observer methods which only target first-level host children. +* `observeUsing` does not work on text nodes. React logs a warning in development if the Fragment contains only text children. +* React does not apply event listeners added via `addEventListener` to hidden [`<Activity>`](/reference/react/Activity) trees. When an `Activity` boundary switches from hidden to visible, listeners are applied automatically. +* Each first-level DOM child of a Fragment with a `ref` gets a `reactFragments` property—a `Set<FragmentInstance>` containing all Fragment instances that own the element. This enables [caching a shared observer](#caching-global-intersection-observer) across multiple Fragments. --- @@ -242,47 +500,312 @@ function PostBody({ body }) { --- -### <CanaryBadge /> Using Fragment refs for DOM interaction {/*using-fragment-refs-for-dom-interaction*/} +### Adding event listeners without a wrapper element {/*adding-event-listeners-without-wrapper*/} -Fragment refs allow you to interact with the DOM nodes wrapped by a Fragment without adding extra wrapper elements. This is useful for event handling, visibility tracking, focus management, and replacing deprecated patterns like `ReactDOM.findDOMNode()`. +Fragment `ref`s let you add event listeners to a group of elements without adding a wrapper DOM node. Use a [ref callback](/reference/react-dom/components/common#ref-callback) to attach and clean up listeners: + +<Sandpack> ```js -import { Fragment } from 'react'; +import { Fragment, useState, useRef, useEffect } from 'react'; function ClickableFragment({ children, onClick }) { + const fragmentRef = useRef(null); + useEffect(() => { + const fragmentInstance = fragmentRef.current; + if (fragmentInstance === null) { + return; + } + fragmentInstance.addEventListener('click', onClick); + return () => { + fragmentInstance.removeEventListener( + 'click', + onClick + ); + }; + }, [onClick]) return ( - <Fragment ref={fragmentInstance => { - fragmentInstance.addEventListener('click', handleClick); - return () => fragmentInstance.removeEventListener('click', handleClick); - }}> + <Fragment ref={fragmentRef}> {children} </Fragment> ); } + +export default function App() { + const [clicks, setClicks] = useState(0); + + return ( + <> + <p>Total clicks: {clicks}</p> + <ClickableFragment onClick={() => { + setClicks(c => c + 1); + }}> + <button>Button A</button> + <button>Button B</button> + <button>Button C</button> + </ClickableFragment> + </> + ); +} ``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +The `addEventListener` call applies the listener to every first-level DOM child of the Fragment. When children are dynamically added or removed, the `FragmentInstance` automatically adds or removes the listener. + +<DeepDive> + +#### Which children does a Fragment ref target? {/*which-children-does-a-fragment-ref-target*/} + +A `FragmentInstance` targets the **first-level host (DOM) children** of the Fragment. Consider this tree: + +```js +<Fragment ref={ref}> + <div id="A" /> + <Wrapper> + <div id="B"> + <div id="C" /> + </div> + </Wrapper> + <div id="D" /> +</Fragment> +``` + +`Wrapper` is a React component, so the `FragmentInstance` looks through it to find DOM nodes. The targeted children are `A`, `B`, and `D`. `C` is not targeted because it is nested inside the DOM element `B`. + +Methods like `addEventListener`, `observeUsing`, and `getClientRects` operate on these first-level DOM children. `focus` and `focusLast` are different—they search *all* nested children depth-first to find focusable elements. + +</DeepDive> + --- -### <CanaryBadge /> Tracking visibility with Fragment refs {/*tracking-visibility-with-fragment-refs*/} +### Managing focus across a group of elements {/*managing-focus-across-elements*/} -Fragment refs are useful for visibility tracking and intersection observation. This enables you to monitor when content becomes visible without requiring the child Components to expose refs: +Fragment `ref`s provide `focus`, `focusLast`, and `blur` methods that operate across all DOM nodes within the Fragment: -```js {19,21,31-34} -import { Fragment, useRef, useLayoutEffect } from 'react'; +<Sandpack> -function VisibilityObserverFragment({ threshold = 0.5, onVisibilityChange, children }) { +```js +import { Fragment, useRef } from 'react'; + +function FormFields({ children }) { + const fragmentRef = useRef(null); + + return ( + <> + <div className="buttons"> + <button onClick={() => { + fragmentRef.current.focus(); + }}> + Focus first + </button> + <button onClick={() => { + fragmentRef.current.focusLast(); + }}> + Focus last + </button> + <button onClick={() => { + fragmentRef.current.blur(); + }}> + Blur + </button> + </div> + <Fragment ref={fragmentRef}> + {children} + </Fragment> + </> + ); +} + +// Even though the inputs are deeply nested, +// focus() searches depth-first to find them. +export default function App() { + return ( + <FormFields> + <fieldset> + <legend>Shipping</legend> + <label> + Street: <input name="street" /> + </label> + <label> + City: <input name="city" /> + </label> + </fieldset> + </FormFields> + ); +} +``` + +```css +.buttons { + display: flex; + gap: 8px; + margin-bottom: 10px; +} + +label { + display: inline-block; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +Calling `focus()` focuses the `street` input—even though it is nested inside a `<fieldset>` and `<label>`. `focus()` searches depth-first through all nested children, not just direct children of the Fragment. `focusLast()` does the same in reverse, and `blur()` removes focus if the currently focused element is within the Fragment. + +--- + +### Scrolling a group of elements into view {/*scrolling-group-into-view*/} + +Use `scrollIntoView` to scroll a Fragment's children into view without a wrapper element. Pass `true` (or omit the argument) to scroll the first child to the top. Pass `false` to scroll the last child to the bottom: + +<Sandpack> + +```js +import { Fragment, useRef } from 'react'; + +function ScrollableSection({ children }) { + const fragmentRef = useRef(null); + + return ( + <> + <div className="buttons"> + <button onClick={() => { + fragmentRef.current.scrollIntoView(); + }}> + Scroll to top + </button> + <button onClick={() => { + fragmentRef.current.scrollIntoView(false); + }}> + Scroll to bottom + </button> + </div> + <div className="container"> + <Fragment ref={fragmentRef}> + {children} + </Fragment> + </div> + </> + ); +} + +const items = []; +for (let i = 1; i <= 25; i++) { + items.push('Item ' + i); +} + +export default function App() { + return ( + <ScrollableSection> + <h3>Section Start</h3> + {items.map((item) => ( + <p key={item}>{item}</p> + ))} + <h3>Section End</h3> + </ScrollableSection> + ); +} +``` + +```css +.buttons { + display: flex; + gap: 8px; + margin-bottom: 10px; +} + +.container { + height: 200px; + overflow-y: auto; + border: 2px solid #c4c4c4; + border-radius: 4px; + padding: 10px; +} + +h3 { + margin: 4px 0; + /* Padding to handle offset of global sticky nav when scrolling for example */ + padding-top: 4em; + color: #1a73e8; +} + +p { + margin: 4px 0; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +--- + +### Observing visibility without a wrapper element {/*observing-visibility-without-wrapper*/} + +Use `observeUsing` to attach an `IntersectionObserver` to all first-level DOM children of a Fragment. This lets you track visibility without requiring child components to expose `ref`s or adding a wrapper element: + +<Sandpack> + +```js +import { + Fragment, + useRef, + useLayoutEffect, + useState, +} from 'react'; +import Card from './Card'; + +function VisibleGroup({ onVisibilityChange, children }) { const fragmentRef = useRef(null); useLayoutEffect(() => { + const visibleElements = new Set(); const observer = new IntersectionObserver( (entries) => { - onVisibilityChange(entries.some(entry => entry.isIntersecting)) - }, - { threshold } + entries.forEach(e => { + if (e.isIntersecting) { + visibleElements.add(e.target); + } else { + visibleElements.delete(e.target); + } + }); + onVisibilityChange(visibleElements.size > 0); + } ); - - fragmentRef.current.observeUsing(observer); - return () => fragmentRef.current.unobserveUsing(observer); - }, [threshold, onVisibilityChange]); + const fragmentInstance = fragmentRef.current; + fragmentInstance.observeUsing(observer); + return () => { + fragmentInstance.unobserveUsing(observer); + }; + }, [onVisibilityChange]); return ( <Fragment ref={fragmentRef}> @@ -291,38 +814,258 @@ function VisibilityObserverFragment({ threshold = 0.5, onVisibilityChange, child ); } -function MyComponent() { - const handleVisibilityChange = (isVisible) => { - console.log('Component is', isVisible ? 'visible' : 'hidden'); - }; +export default function App() { + const [isVisible, setIsVisible] = useState(true); return ( - <VisibilityObserverFragment onVisibilityChange={handleVisibilityChange}> - <SomeThirdPartyComponent /> - <AnotherComponent /> - </VisibilityObserverFragment> + <div className={isVisible ? 'page visible' : 'page'}> + <div className="filler">Scroll down</div> + <VisibleGroup onVisibilityChange={setIsVisible}> + <Card title="First section" /> + <Card title="Second section" /> + </VisibleGroup> + <div className="filler">Scroll up</div> + </div> ); } ``` -This pattern is an alternative to Effect-based visibility logging, which is an anti-pattern in most cases. Relying on Effects alone does not guarantee that the rendered Component is observable by the user. +```css +.page { + transition: background 0.3s; +} + +.page.visible { + background: #d4edda; +} + +.filler { + height: 500px; + display: flex; + align-items: center; + justify-content: center; + color: #aaa; + font-size: 14px; +} + +.card { + padding: 16px; + background: white; + border: 1px solid #ddd; + border-radius: 8px; + margin: 8px 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.08); + font-weight: 600; + font-size: 14px; +} +``` + +```js src/Card.js hidden +export default function Card({ title }) { + return <div className="card">{title}</div>; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> --- -### <CanaryBadge /> Focus management with Fragment refs {/*focus-management-with-fragment-refs*/} +### Caching a global IntersectionObserver {/*caching-global-intersection-observer*/} -Fragment refs provide focus management methods that work across all DOM nodes within the Fragment: +A common performance optimization for sites with many observers is to share a single IntersectionObserver per config and route its entries to the correct callbacks based on which element intersected. Fragment `ref`s support this same pattern through the `reactFragments` property. -```js -import { Fragment, useRef } from 'react'; +Each first-level DOM child of a Fragment with a `ref` has a `reactFragments` property: a `Set` of `FragmentInstance` objects that contain that element. When the shared observer fires, you can use this property to look up which `FragmentInstance` owns the intersecting element and run the right callbacks. + +<Sandpack> + +```js src/App.js active +import { useState, useCallback } from 'react'; +import ObservedGroup from './ObservedGroup'; +import Card from './Card'; + +export default function App() { + const [bgColor, setBgColor] = useState(null); + + const onGreen = useCallback((entry) => { + if (entry.isIntersecting) { + setBgColor('#d4edda'); + } + }, []); + + const onBlue = useCallback((entry) => { + if (entry.isIntersecting) { + setBgColor('#cce5ff'); + } + }, []); + + return ( + <div className="page" style={{ + background: bgColor || 'white', + }}> + <div className="filler">Scroll down</div> + <ObservedGroup onIntersection={onGreen}> + <Card title="Green section" className="green" /> + </ObservedGroup> + <div className="filler" /> + <ObservedGroup onIntersection={onBlue}> + <Card title="Blue section" className="blue" /> + </ObservedGroup> + <div className="filler">Scroll up</div> + </div> + ); +} +``` + +```js src/ObservedGroup.js +import { + Fragment, + useRef, + useLayoutEffect, +} from 'react'; + +const callbackMap = new WeakMap(); +const observerCache = new Map(); + +function getOptionsKey(options) { + const root = options?.root ?? null; + const rootMargin = options?.rootMargin ?? '0px'; + const threshold = options?.threshold ?? 0; + return `${rootMargin}|${threshold}`; +} + +function getSharedObserver( + fragmentInstance, + onIntersection, + options, +) { + // Register this callback for the + // fragment instance. + const existing = + callbackMap.get(fragmentInstance); + callbackMap.set( + fragmentInstance, + existing + ? [...existing, onIntersection] + : [onIntersection], + ); + + const key = getOptionsKey(options); + if (observerCache.has(key)) { + return observerCache.get(key); + } + + const observer = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + // Look up which FragmentInstances own + // this element. + const fragmentInstances = + entry.target.reactFragments; + if (fragmentInstances) { + for (const inst of fragmentInstances) { + const callbacks = + callbackMap.get(inst) || []; + callbacks.forEach(cb => cb(entry)); + } + } + } + }, + options, + ); + + observerCache.set(key, observer); + return observer; +} + +export default function ObservedGroup({ + onIntersection, + options, + children, +}) { + const fragmentRef = useRef(null); + + useLayoutEffect(() => { + const fragmentInstance = fragmentRef.current; + const observer = getSharedObserver( + fragmentInstance, + onIntersection, + options, + ); + fragmentInstance.observeUsing(observer); + return () => { + fragmentInstance.unobserveUsing(observer); + callbackMap.delete(fragmentInstance); + }; + }, [onIntersection, options]); -function FocusFragment({ children }) { return ( - <Fragment ref={(fragmentInstance) => fragmentInstance?.focus()}> + <Fragment ref={fragmentRef}> {children} </Fragment> ); } ``` -The `focus()` method focuses the first focusable element within the Fragment, while `focusLast()` focuses the last focusable element. +```css +.page { + transition: background 0.3s; +} + +.filler { + height: 500px; + display: flex; + align-items: center; + justify-content: center; + color: #aaa; + font-size: 14px; +} + +.card { + padding: 16px; + background: white; + border: 1px solid #ddd; + border-radius: 8px; + margin: 0 16px; + box-shadow: 0 1px 3px rgba(0,0,0,0.08); + font-weight: 600; + font-size: 14px; +} + +.card.green { + border-left: 3px solid #28a745; +} + +.card.blue { + border-left: 3px solid #007bff; +} +``` + +```js src/Card.js hidden +export default function Card({ title, className }) { + return <div className={'card' + (className ? ' ' + className : '')}>{title}</div>; +} +``` + +```json package.json hidden +{ + "dependencies": { + "react": "19.3.0-canary-f1f7ed2a-20260904", + "react-dom": "19.3.0-canary-f1f7ed2a-20260904", + "react-scripts": "latest" + } +} +``` + +</Sandpack> + +Multiple `ObservedGroup` components with the same options reuse a single `IntersectionObserver`. When either section scrolls into view, the shared observer fires and uses `reactFragments` to route the entry to the correct callback. diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index ac8d378d5..bdf90e805 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -23,12 +23,20 @@ title: <Suspense> ### `<Suspense>` {/*suspense*/} +<<<<<<< HEAD #### āĻĒā§āĻ°āĻĒā§āĻ¸ {/*props*/} * `children`: āĻ†āĻĒāĻ¨āĻŋ āĻ¯ā§‡āĻ‡ āĻĒā§āĻ°āĻ•ā§ƒāĻ¤ UI āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻ¤ā§‡ āĻšāĻžāĻ‡āĻ›ā§‡āĻ¨āĨ¤ `children` āĻ¯āĻĻāĻŋ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°āĻŋāĻ‚ āĻāĻ° āĻ¸āĻŽāĻ¯āĻŧ āĻĨā§‡āĻŽā§‡ āĻ¯āĻžāĻ¯āĻŧ āĻ¤āĻžāĻšāĻ˛ā§‡ Suspense boundary `fallback` āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻŦā§‡āĨ¤ * `fallback`: āĻāĻŸāĻŋ āĻšāĻšā§āĻ›ā§‡, āĻĒā§āĻ°āĻ•ā§ƒāĻ¤ UI āĻĒā§āĻ°ā§‹āĻĒā§āĻ°āĻŋ āĻ˛ā§‹āĻĄ āĻ¨āĻž āĻšāĻ˛ā§‡ āĻ¤āĻžāĻ° āĻ¸ā§āĻĨāĻžāĻ¨ā§‡ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻšāĻ“āĻ¯āĻŧāĻž āĻāĻ•āĻŸāĻŋ āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ UIāĨ¤ āĻ¯ā§‡āĻ•ā§‹āĻ¨ā§‹ āĻŦā§ˆāĻ§ React āĻ¨ā§‹āĻĄāĻ‡ āĻ—ā§ƒāĻšā§€āĻ¤ āĻšāĻ¯āĻŧ, āĻ¯āĻĻāĻŋāĻ“ āĻ•āĻžāĻ°ā§āĻ¯āĻ¤, āĻāĻ•āĻŸāĻŋ fallback āĻšāĻ˛ā§‹ āĻāĻ•āĻŸāĻŋ āĻšāĻžāĻ˛āĻ•āĻž placeholder view, āĻ¯ā§‡āĻŽāĻ¨ āĻāĻ•āĻŸāĻŋ āĻ˛ā§‹āĻĄāĻŋāĻ‚ āĻ¸ā§āĻĒāĻŋāĻ¨āĻžāĻ° āĻŦāĻž āĻ¸ā§āĻ•ā§‡āĻ˛ā§‡āĻŸāĻ¨āĨ¤ Suspense āĻ¸ā§āĻŦāĻ¯āĻŧāĻ‚āĻ•ā§āĻ°āĻŋāĻ¯āĻŧ āĻ­āĻžāĻŦā§‡ `fallback` āĻ āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻŋāĻ¤ āĻšāĻ¯āĻŧā§‡ āĻ¯āĻžāĻŦā§‡ āĻ¯āĻ–āĻ¨ `children` āĻĨā§‡āĻŽā§‡ āĻ¯āĻžāĻŦā§‡ āĻāĻŦāĻ‚ āĻ†āĻŦāĻžāĻ° `children` āĻ āĻĢāĻŋāĻ°ā§‡ āĻ†āĻ¸āĻŦā§‡ āĻ¯āĻ–āĻ¨ āĻĄā§‡āĻŸāĻž āĻ¤ā§ˆāĻ°āĻŋ āĻšāĻ¯āĻŧā§‡ āĻ¯āĻžāĻŦā§‡āĨ¤ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°āĻŋāĻ‚ āĻāĻ° āĻ¸āĻŽāĻ¯āĻŧ āĻ¯āĻĻāĻŋ `fallback` āĻĨā§‡āĻŽā§‡ āĻ¯āĻžāĻ¯āĻŧ, āĻāĻŸāĻŋ āĻ¤āĻžāĻ° āĻ¨āĻŋāĻ•āĻŸāĻ¤āĻŽ āĻĒā§āĻ¯āĻžāĻ°ā§‡āĻ¨ā§āĻŸ Suspense boundary āĻ¸āĻ•ā§āĻ°āĻŋāĻ¯āĻŧ āĻ•āĻ°āĻŦā§‡āĨ¤ +======= +#### Props {/*props*/} +* `children`: The actual UI you intend to render. If `children` suspends while rendering, the Suspense boundary will switch to rendering `fallback`. +* `fallback`: An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton. Suspense will automatically switch to `fallback` when `children` suspends, and back to `children` when the data is ready. If `fallback` suspends while rendering, it will activate the closest parent Suspense boundary. +* <ExperimentalBadge /> **optional** `defer`: A boolean. When `true`, React may show the `fallback` first and render or stream `children` later, even when nothing in them suspends. Use it for content that is expensive to render. Defaults to `false`. +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 #### āĻ¸āĻ¤āĻ°ā§āĻ•āĻ¤āĻž {/*caveats*/} +<<<<<<< HEAD - React āĻĒā§āĻ°āĻĨāĻŽāĻŦāĻžāĻ° āĻŽāĻžāĻ‰āĻ¨ā§āĻŸ āĻšāĻ“āĻ¯āĻŧāĻžāĻ° āĻ†āĻ—ā§‡ āĻĨā§‡āĻŽā§‡ āĻ¯āĻžāĻ“āĻ¯āĻŧāĻž āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ°āĻ—ā§āĻ˛ā§‹āĻ° āĻœāĻ¨ā§āĻ¯ āĻ•ā§‹āĻ¨āĻ“ state āĻ¸āĻ‚āĻ°āĻ•ā§āĻˇāĻŖ āĻ•āĻ°ā§‡ āĻ¨āĻžāĨ¤ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻ˛ā§‹āĻĄ āĻšāĻ˛ā§‡, React āĻĨā§‡āĻŽā§‡ āĻ¯āĻžāĻ“āĻ¯āĻŧāĻž āĻŸā§āĻ°āĻŋ āĻĒā§āĻ¨āĻ°āĻžāĻ¯āĻŧ āĻļā§‚āĻ¨ā§āĻ¯ āĻĨā§‡āĻ•ā§‡ āĻ°ā§‡āĻ¨ā§āĻĄāĻžāĻ° āĻ•āĻ°āĻžāĻ° āĻšā§‡āĻˇā§āĻŸāĻž āĻ•āĻ°āĻŦā§‡āĨ¤ - Suspense āĻ¯āĻĻāĻŋ āĻŸā§āĻ°āĻŋāĻ° āĻœāĻ¨ā§āĻ¯ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ āĻĻā§‡āĻ–āĻžāĻ¤ā§‡ āĻĨāĻžāĻ•ā§‡, āĻ•āĻŋāĻ¨ā§āĻ¤ā§ āĻĒāĻ°ā§‡ āĻ†āĻŦāĻžāĻ° āĻĨā§‡āĻŽā§‡ āĻ¯āĻžāĻ¯āĻŧ, āĻ¤āĻŦā§‡ `fallback` āĻ†āĻŦāĻžāĻ° āĻĻā§‡āĻ–āĻžāĻ¨ā§‹ āĻšāĻŦā§‡ āĻ¯āĻĻāĻŋāĻ¨āĻž āĻāĻ° āĻ†āĻĒāĻĄā§‡āĻŸā§‡āĻ° āĻ•āĻžāĻ°āĻŖ [`startTransition`](/reference/react/startTransition) āĻŦāĻž [`useDeferredValue`](/reference/react/useDeferredValue) āĻĻā§āĻŦāĻžāĻ°āĻž āĻ¸ā§ƒāĻˇā§āĻŸāĻŋ āĻšāĻ¯āĻŧā§‡ āĻĨāĻžāĻ•ā§‡āĨ¤ - āĻ¯āĻĻāĻŋ React āĻĒā§āĻ¨āĻ°āĻžāĻ¯āĻŧ āĻĨā§‡āĻŽā§‡ āĻ¯āĻžāĻ“āĻ¯āĻŧāĻžāĻ° āĻ•āĻžāĻ°āĻŖā§‡ āĻ†āĻ—ā§‡ āĻĻā§‡āĻ–āĻžāĻ¨ā§‹ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ āĻ˛ā§āĻ•āĻžāĻ¨ā§‹āĻ° āĻĒā§āĻ°āĻ¯āĻŧā§‹āĻœāĻ¨ āĻšāĻ¯āĻŧ, āĻ¤āĻŦā§‡ āĻāĻŸāĻŋ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ āĻŸā§āĻ°āĻŋāĻ° [layout Effects](/reference/react/useLayoutEffect) āĻ•ā§‡ āĻĒāĻ°āĻŋāĻˇā§āĻ•āĻžāĻ° āĻ•āĻ°āĻŦā§‡āĨ¤ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ āĻ¯āĻ–āĻ¨ āĻ†āĻŦāĻžāĻ° āĻĻā§‡āĻ–āĻžāĻ¨ā§‹āĻ° āĻœāĻ¨ā§āĻ¯ āĻĒā§āĻ°āĻ¸ā§āĻ¤ā§āĻ¤ āĻšāĻ¯āĻŧā§‡ āĻ¯āĻžāĻ¯āĻŧ, āĻ°āĻŋāĻ¯āĻŧā§‡āĻ•ā§āĻŸ āĻ†āĻŦāĻžāĻ° layout Effects āĻšāĻžāĻ˛āĻžāĻŦā§‡āĨ¤ āĻāĻŸāĻŋ āĻ¨āĻŋāĻļā§āĻšāĻŋāĻ¤ āĻ•āĻ°ā§‡ āĻ¯ā§‡, DOM layout āĻĒāĻ°āĻŋāĻŽāĻžāĻĒ āĻ•āĻ°āĻž āĻ‡āĻĢā§‡āĻ•ā§āĻŸāĻ—ā§āĻ˛ā§‹ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ āĻ˛ā§āĻ•āĻžāĻ¯āĻŧāĻŋāĻ¤ āĻ…āĻŦāĻ¸ā§āĻĨāĻžāĻ¯āĻŧ āĻāĻŸāĻž āĻ•āĻ°āĻžāĻ° āĻšā§‡āĻˇā§āĻŸāĻž āĻ•āĻ°ā§‡ āĻ¨āĻžāĨ¤ @@ -37,6 +45,42 @@ title: <Suspense> --- ## āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻŦāĻŋāĻ§āĻŋ {/*usage*/} +======= +- Suspense does not detect when data is fetched inside an Effect or event handler. It only activates in the [cases listed below.](#what-activates-a-suspense-boundary) +- React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch. +- If Suspense was displaying content for the tree, but then it suspended again, the `fallback` will be shown again unless the update causing it was caused by [`startTransition`](/reference/react/startTransition) or [`useDeferredValue`](/reference/react/useDeferredValue). +- React reveals suspended content at most once every 300ms, measured from the last reveal. Boundaries that become ready within that window are [revealed together](/blog/2025/10/01/react-19-2#batching-suspense-boundaries-for-ssr) rather than one at a time. +- If React needs to hide the already visible content because it suspended again, it will clean up [layout Effects](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don't try to do this while the content is hidden. +- React includes under-the-hood optimizations like *Streaming Server Rendering* and *Selective Hydration* that are integrated with Suspense. Read [an architectural overview](https://github.com/reactwg/react-18/discussions/37) and watch [a technical talk](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more. + +--- + +### What activates a Suspense boundary {/*what-activates-a-suspense-boundary*/} + +A Suspense boundary waits for its content to be ready before revealing it. Any of the following keeps a boundary from revealing its content: + +- Lazy-loading component code with [`lazy`](/reference/react/lazy). +- Reading a Promise with [`use`](/reference/react/use), including data streamed from [Server Components](/reference/rsc/server-components) or loaded through a [Suspense-enabled framework](#suspense-enabled-frameworks). +- Loading a stylesheet rendered with [`<link rel="stylesheet">` and a `precedence` prop.](/reference/react-dom/components/link#special-rendering-behavior) React blocks the boundary until the stylesheet loads, up to a timeout. [See an example below.](#waiting-for-a-stylesheet-to-load) +- Waiting for a large boundary's HTML to arrive during streaming server rendering. Sending HTML takes time, so a boundary with enough content activates even when nothing in it suspends. React reveals the content as the HTML arrives. +- Loading fonts. Suspense doesn't wait for fonts by default, but a [`<ViewTransition>`](/reference/react/ViewTransition) update waits for new fonts to load, up to a timeout, so text doesn't flash with a fallback font. [See an example below.](#waiting-for-a-font-to-load) +- Loading images. Suspense doesn't wait for images by default, but during a [`<ViewTransition>`](/reference/react/ViewTransition) update, React blocks the boundary until the image loads, up to a timeout. Adding an `onLoad` handler opts a specific image out. [See an example below.](#waiting-for-an-image-to-load) +- <ExperimentalBadge /> Performing CPU-bound render work inside a [`<Suspense defer>`](#props) boundary. + +<Note> + +#### Suspense-enabled frameworks {/*suspense-enabled-frameworks*/} + +A *Suspense-enabled framework* gives you a way to read data in your component in a way that activates the closest Suspense boundary. The exact way you load your data depends on your framework, and you'll find the details in its documentation. Under the hood, a Suspense-enabled framework maintains a cache of Promises and calls [`use`](/reference/react/use) to suspend on a Promise. + +Without a framework, you can read a Promise with `use` directly, as long as the Promise is [cached so the same instance is reused across renders.](/reference/react/use#caching-promises-for-client-components) + +</Note> + +--- + +## Usage {/*usage*/} +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 ### āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ āĻ˛ā§‹āĻĄ āĻšāĻ“āĻ¯āĻŧāĻžāĻ° āĻ¸āĻŽāĻ¯āĻŧ āĻāĻ•āĻŸāĻŋ fallback āĻĻā§‡āĻ–āĻžāĻ¨ā§‹ {/*displaying-a-fallback-while-content-is-loading*/} @@ -203,8 +247,9 @@ async function getAlbums() { </Sandpack> -<Note> +By contrast, code that fetches data outside of `use`, such as inside an Effect, does not activate the boundary: +<<<<<<< HEAD **āĻļā§āĻ§ā§āĻŽāĻžāĻ¤ā§āĻ° Suspense-enabled āĻĄā§‡āĻŸāĻž āĻ‰ā§ŽāĻ¸āĻ—ā§āĻ˛ā§‹ Suspense āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸāĻ•ā§‡ āĻ¸āĻ•ā§āĻ°āĻŋāĻ¯āĻŧ āĻ•āĻ°āĻ¤ā§‡ āĻĒāĻžāĻ°āĻŦā§‡āĨ¤** āĻāĻĻā§‡āĻ° āĻŽāĻ§ā§āĻ¯ā§‡ āĻ°āĻ¯āĻŧā§‡āĻ›ā§‡āĻƒ - Suspense-enabled āĻĢā§āĻ°ā§‡āĻŽāĻ“āĻ¯āĻŧāĻžāĻ°ā§āĻ•ā§‡āĻ° āĻ¸āĻžāĻšāĻžāĻ¯ā§āĻ¯ā§‡ āĻĄā§‡āĻŸāĻž āĻ¨āĻŋāĻ¯āĻŧā§‡ āĻ†āĻ¸āĻž āĻ¯ā§‡āĻŽāĻ¨, [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) āĻāĻŦāĻ‚ [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) @@ -214,8 +259,264 @@ async function getAlbums() { āĻ‰āĻĒāĻ°ā§‡āĻ° `Albums` āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸā§‡ āĻ†āĻĒāĻ¨āĻŋ āĻ āĻŋāĻ• āĻ•āĻŋāĻ­āĻžāĻŦā§‡ āĻĄā§‡āĻŸāĻž āĻ˛ā§‹āĻĄ āĻ•āĻ°āĻŦā§‡āĻ¨ āĻ¤āĻž āĻ†āĻĒāĻ¨āĻžāĻ° āĻĢā§āĻ°ā§‡āĻŽāĻ“āĻ¯āĻŧāĻžāĻ°ā§āĻ• āĻāĻ° āĻ‰āĻĒāĻ° āĻ¨āĻŋāĻ°ā§āĻ­āĻ° āĻ•āĻ°ā§‡āĨ¤ āĻ†āĻĒāĻ¨āĻŋ āĻ¯āĻĻāĻŋ Suspense-enabled āĻĢā§āĻ°ā§‡āĻŽāĻ“āĻ¯āĻŧāĻžāĻ°ā§āĻ• āĻŦā§āĻ¯āĻžāĻŦāĻšāĻžāĻ° āĻ•āĻ°ā§‡āĻ¨ āĻ¤āĻžāĻšāĻ˛ā§‡ āĻ†āĻĒāĻ¨āĻŋ āĻāĻ° āĻĄā§‡āĻŸāĻž āĻ¨āĻŋāĻ¯āĻŧā§‡ āĻ†āĻ¸āĻžāĻ° āĻĄāĻ•ā§āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāĻ¨ā§‡ āĻŦāĻŋāĻ¸ā§āĻ¤āĻžāĻ°āĻŋāĻ¤ āĻ¤āĻĨā§āĻ¯ āĻĒāĻžāĻŦā§‡āĻ¨āĨ¤ āĻŽāĻ¤āĻžāĻ¨ā§āĻ¯āĻžāĻ¯āĻŧā§€ āĻ¨āĻŋāĻ°ā§āĻ§āĻžāĻ°āĻŋāĻ¤ āĻĢā§āĻ°ā§‡āĻŽāĻ“āĻ¯āĻŧāĻžāĻ°ā§āĻ• āĻ›āĻžāĻĄāĻŧāĻž Suspense-enabled āĻĄā§‡āĻŸāĻž āĻ¨āĻŋāĻ¯āĻŧā§‡ āĻ†āĻ¸āĻž āĻāĻ–āĻ¨ā§‹ āĻ¸āĻŽāĻ°ā§āĻĨāĻŋāĻ¤ āĻ¨āĻ¯āĻŧāĨ¤ Suspense-enabled āĻĄā§‡āĻŸāĻž āĻ‰ā§ŽāĻ¸ āĻ¸āĻ‚āĻ¯ā§‹āĻœāĻ¨ā§‡āĻ° āĻœāĻ¨ā§āĻ¯ āĻĒā§āĻ°āĻ¯āĻŧā§‹āĻœāĻ¨ā§€āĻ¯āĻŧ āĻŦāĻŋāĻŦāĻ°āĻŖāĻ—ā§āĻ˛ā§‹ āĻ…āĻ¸ā§āĻĨāĻŋāĻ¤āĻŋāĻļā§€āĻ˛ āĻāĻŦāĻ‚ āĻ¨āĻĨāĻŋāĻ­ā§āĻ•ā§āĻ¤ āĻ¨āĻ¯āĻŧāĨ¤ Suspense āĻĻāĻŋāĻ¯āĻŧā§‡ āĻĄā§‡āĻŸāĻž āĻ‰ā§ŽāĻ¸āĻ—ā§āĻ˛ā§‹āĻ° āĻ¸āĻ‚āĻ¯ā§‹āĻœāĻ¨ā§‡āĻ° āĻœāĻ¨ā§āĻ¯ āĻāĻ•āĻŸāĻŋ āĻ…āĻĢāĻŋāĻ¸āĻŋāĻ¯āĻŧāĻžāĻ˛ API āĻĒāĻ°āĻŦāĻ°ā§āĻ¤ā§€ React āĻ¸āĻ‚āĻ¸ā§āĻ•āĻ°āĻŖā§‡ āĻĒā§āĻ°āĻ•āĻžāĻļāĻŋāĻ¤ āĻšāĻŦā§‡āĨ¤ +======= +<Sandpack> -</Note> +```js src/App.js hidden +import { useState } from 'react'; +import ArtistPage from './ArtistPage.js'; + +export default function App() { + const [show, setShow] = useState(false); + if (show) { + return ( + <ArtistPage + artist={{ + id: 'the-beatles', + name: 'The Beatles', + }} + /> + ); + } else { + return ( + <button onClick={() => setShow(true)}> + Open The Beatles artist page + </button> + ); + } +} +``` + +```js src/ArtistPage.js active +import { Suspense } from 'react'; +import EffectAlbums from './EffectAlbums.js'; + +export default function ArtistPage({ artist }) { + return ( + <> + <h1>{artist.name}</h1> + <Suspense fallback={<Loading />}> + <EffectAlbums artistId={artist.id} /> + </Suspense> + </> + ); +} +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 + +function Loading() { + return <h2>🌀 Loading...</h2>; +} +``` + +```js src/EffectAlbums.js +import { useState, useEffect } from 'react'; +import { fetchData } from './data.js'; + +export default function EffectAlbums({ artistId }) { + const [albums, setAlbums] = useState([]); + + useEffect(() => { + let active = true; + fetchData(`/${artistId}/albums`).then(result => { + if (active) { + setAlbums(result); + } + }); + return () => { + active = false; + }; + }, [artistId]); + + // Suspense can't see this fetch, so its fallback never + // shows. The list stays empty until the data arrives. + return ( + <ul> + {albums.map(album => ( + <li key={album.id}> + {album.title} ({album.year}) + </li> + ))} + </ul> + ); +} +``` + +```js src/data.js hidden +// Note: the way you would do data fetching depends on +// the framework that you use together with Suspense. +// Normally, the caching logic would be inside a framework. + +let cache = new Map(); + +export function fetchData(url) { + if (!cache.has(url)) { + cache.set(url, getData(url)); + } + return cache.get(url); +} + +async function getData(url) { + if (url === '/the-beatles/albums') { + return await getAlbums(); + } else { + throw Error('Not implemented'); + } +} + +async function getAlbums() { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 3000); + }); + + return [{ + id: 13, + title: 'Let It Be', + year: 1970 + }, { + id: 12, + title: 'Abbey Road', + year: 1969 + }, { + id: 11, + title: 'Yellow Submarine', + year: 1969 + }, { + id: 10, + title: 'The Beatles', + year: 1968 + }, { + id: 9, + title: 'Magical Mystery Tour', + year: 1967 + }, { + id: 8, + title: 'Sgt. Pepper\'s Lonely Hearts Club Band', + year: 1967 + }, { + id: 7, + title: 'Revolver', + year: 1966 + }, { + id: 6, + title: 'Rubber Soul', + year: 1965 + }, { + id: 5, + title: 'Help!', + year: 1965 + }, { + id: 4, + title: 'Beatles For Sale', + year: 1964 + }, { + id: 3, + title: 'A Hard Day\'s Night', + year: 1964 + }, { + id: 2, + title: 'With The Beatles', + year: 1963 + }, { + id: 1, + title: 'Please Please Me', + year: 1963 + }]; +} +``` + +</Sandpack> + +During streaming server rendering, a boundary also activates while its HTML is still streaming in. With any streaming server rendering API, React sends [the shell](/reference/react-dom/server/renderToPipeableStream#specifying-what-goes-into-the-shell) with the `fallback` first, then streams in each boundary's HTML and swaps out its `fallback` as that content arrives. Press "Render the page" to watch the page stream in: + +<Sandpack> + +```js src/App.js hidden +``` + +```html public/index.html +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>Streaming SSR + + + +

+ + + +``` + +```js src/index.js +import { flushReadableStreamToFrame } from './demo-helpers.js'; +import { Suspense, use } from 'react'; +import { renderToReadableStream } from 'react-dom/server'; + +let posts = null; + +function Posts() { + const text = use(posts.promise); + return

{text}

; +} + +function ProfilePage() { + return ( + + +

Alice

+

Photographer and traveler.

+ ⌛ Loading posts...

}> + + + + + ); +} + +async function main(frame) { + posts = Promise.withResolvers(); + const stream = await renderToReadableStream(); + + // The posts resolve after the shell has streamed, so React + // streams their HTML in and swaps out the fallback. + setTimeout(() => { + posts.resolve( + 'Just got back from two weeks along the coast. The drive ' + + 'was longer than expected, but every stop was worth it. ' + + 'A full write-up and more photos are coming soon.' + ); + }, 1500); + + await flushReadableStreamToFrame(stream, frame); +} + +document.getElementById('render').addEventListener('click', () => { + main(document.getElementById('container')); +}); +``` + +```js src/demo-helpers.js hidden +export async function flushReadableStreamToFrame(readable, frame) { + const doc = frame.contentWindow.document; + const decoder = new TextDecoder(); + const reader = readable.getReader(); + + while (true) { + const {done, value} = await reader.read(); + if (done) { + break; + } + doc.write(decoder.decode(value, {stream: true})); + } + + doc.write(decoder.decode()); + doc.close(); +} +``` + + --- @@ -360,9 +661,9 @@ async function getBio() { setTimeout(resolve, 1500); }); - return `The Beatles were an English rock band, - formed in Liverpool in 1960, that comprised - John Lennon, Paul McCartney, George Harrison + return `The Beatles were an English rock band, + formed in Liverpool in 1960, that comprised + John Lennon, Paul McCartney, George Harrison and Ringo Starr.`; } @@ -622,9 +923,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles were an English rock band, - formed in Liverpool in 1960, that comprised - John Lennon, Paul McCartney, George Harrison + return `The Beatles were an English rock band, + formed in Liverpool in 1960, that comprised + John Lennon, Paul McCartney, George Harrison and Ringo Starr.`; } @@ -875,7 +1176,11 @@ input { margin: 10px; } +<<<<<<< HEAD āĻāĻ•āĻŸāĻŋ āĻĒā§āĻ°āĻšāĻ˛āĻŋāĻ¤ āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ UI āĻĒā§āĻ¯āĻžāĻŸāĻžāĻ°ā§āĻ¨ āĻšāĻ˛ā§‹ āĻ¤āĻžāĻ˛āĻŋāĻ•āĻž āĻ†āĻĒāĻĄā§‡āĻŸāĻ•ā§‡ *āĻŦāĻŋāĻ˛āĻŽā§āĻŦāĻŋāĻ¤ āĻ•āĻ°āĻž(defer)* āĻāĻŦāĻ‚ āĻ¨āĻ¤ā§āĻ¨ āĻĢāĻ˛āĻžāĻĢāĻ˛ āĻ¤ā§ˆāĻ°āĻŋ āĻšāĻ“ā§ŸāĻž āĻĒāĻ°ā§āĻ¯āĻ¨ā§āĻ¤ āĻ†āĻ—ā§‡āĻ° āĻĢāĻ˛āĻžāĻĢāĻ˛āĻ—ā§āĻ˛ā§‹ āĻĻā§‡āĻ–āĻžāĻ¨ā§‹āĨ¤ [`useDeferredValue`](/reference/react/useDeferredValue) āĻšā§āĻ•āĻŸāĻŋ āĻ†āĻĒāĻ¨āĻžāĻ•ā§‡ query āĻ•āĻ°āĻžāĻ° āĻāĻ•āĻŸāĻŋ deferred āĻ­āĻžāĻ°ā§āĻ¸āĻ¨ āĻĒāĻžāĻ āĻžāĻ¨ā§‹āĻ° āĻ¸ā§āĻŦāĻŋāĻ§āĻž āĻĻā§‡ā§ŸāĻƒ +======= +A common alternative UI pattern is to *defer* updating the list and to keep showing the previous results until the new results are ready. The [`useDeferredValue`](/reference/react/useDeferredValue) Hook lets you pass a deferred version of the query down: +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 ```js {3,11} export default function App() { @@ -901,7 +1206,7 @@ export default function App() { ```js {2}
@@ -1249,9 +1554,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles were an English rock band, - formed in Liverpool in 1960, that comprised - John Lennon, Paul McCartney, George Harrison + return `The Beatles were an English rock band, + formed in Liverpool in 1960, that comprised + John Lennon, Paul McCartney, George Harrison and Ringo Starr.`; } @@ -1373,7 +1678,7 @@ function Router() { function navigate(url) { startTransition(() => { - setPage(url); + setPage(url); }); } // ... @@ -1561,9 +1866,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles were an English rock band, - formed in Liverpool in 1960, that comprised - John Lennon, Paul McCartney, George Harrison + return `The Beatles were an English rock band, + formed in Liverpool in 1960, that comprised + John Lennon, Paul McCartney, George Harrison and Ringo Starr.`; } @@ -1872,9 +2177,9 @@ async function getBio() { setTimeout(resolve, 500); }); - return `The Beatles were an English rock band, - formed in Liverpool in 1960, that comprised - John Lennon, Paul McCartney, George Harrison + return `The Beatles were an English rock band, + formed in Liverpool in 1960, that comprised + John Lennon, Paul McCartney, George Harrison and Ringo Starr.`; } @@ -1990,15 +2295,108 @@ main { ### āĻ¨ā§‡āĻ­āĻŋāĻ—ā§‡āĻļāĻ¨ā§‡ Suspense boundary āĻ—ā§āĻ˛ā§‹ āĻ°āĻŋāĻ¸ā§‡āĻŸ āĻ•āĻ°āĻž {/*resetting-suspense-boundaries-on-navigation*/} +<<<<<<< HEAD āĻāĻ•āĻŸāĻŋ āĻŸā§āĻ°āĻžāĻ¨ā§āĻ¸āĻŋāĻļāĻ¨ā§‡āĻ° āĻ¸āĻŽā§Ÿ React āĻ‡āĻ¤āĻŋāĻŽāĻ§ā§āĻ¯ā§‡ āĻĒā§āĻ°āĻ•āĻžāĻļāĻŋāĻ¤ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ āĻ˛ā§āĻ•āĻžāĻ¨ā§‹ āĻĨā§‡āĻ•ā§‡ āĻŦāĻŋāĻ°āĻ¤ āĻĨāĻžāĻ•āĻŦā§‡āĨ¤ āĻ¤āĻŦā§‡, āĻ†āĻĒāĻ¨āĻŋ āĻ¯āĻĻāĻŋ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ•ā§‹āĻ¨ā§‹ āĻĒā§āĻ¯āĻ°āĻžāĻŽāĻŋāĻŸāĻžāĻ° āĻŦāĻŋāĻļāĻŋāĻˇā§āĻŸ āĻ°āĻžāĻ‰āĻŸā§‡ āĻ¨ā§‡āĻ­āĻŋāĻ—ā§‡āĻŸ āĻ•āĻ°ā§‡āĻ¨, āĻ†āĻĒāĻ¨āĻŋ āĻšā§ŸāĻ¤ React āĻ•ā§‡ āĻŦāĻ˛āĻ¤ā§‡ āĻšāĻžāĻ¨ āĻ¯ā§‡ āĻāĻŸāĻŋ *āĻ­āĻŋāĻ¨ā§āĻ¨* āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸāĨ¤ āĻ†āĻĒāĻ¨āĻŋ āĻāĻŸāĻŋ āĻāĻ•āĻŸāĻŋ `key` āĻĻāĻŋā§Ÿā§‡ āĻŦā§āĻāĻžāĻ¤ā§‡ āĻĒāĻžāĻ°ā§‡āĻ¨āĻƒ +======= +During a Transition, React avoids hiding already revealed content. However, when you navigate to *different* content, such as another user's profile, you'll want the boundary to show the fallback instead of the previous content. You can express this with a `key`: +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 ```js ``` +<<<<<<< HEAD āĻ§āĻ°ā§āĻ¨, āĻ†āĻĒāĻ¨āĻŋ āĻāĻ•āĻœāĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻĒā§āĻ°ā§‹āĻĢāĻžāĻ‡āĻ˛ āĻĒā§‡āĻœā§‡āĻ° āĻŽāĻ§ā§āĻ¯ā§‡āĻ‡ āĻ¨ā§‡āĻ­āĻŋāĻ—ā§‡āĻŸ āĻ•āĻ°āĻ›ā§‡āĻ¨ āĻāĻŦāĻ‚ āĻ•āĻŋāĻ›ā§ āĻāĻ•āĻŸāĻž āĻĨā§‡āĻŽā§‡ āĻ—ā§‡āĻ˛āĨ¤ āĻ¯āĻĻāĻŋ āĻ¸ā§‡āĻ‡ āĻ†āĻĒāĻĄā§‡āĻŸāĻŸāĻŋ āĻāĻ•āĻŸāĻŋ āĻŸā§āĻ°āĻžāĻ¨ā§āĻ¸āĻŋāĻļāĻ¨ā§‡āĻ° āĻŽāĻ§ā§āĻ¯ā§‡ āĻĨāĻžāĻ•ā§‡, āĻ¤āĻŦā§‡ āĻāĻŸāĻŋ āĻ‡āĻ¤āĻŋāĻŽāĻ§ā§āĻ¯ā§‡āĻ‡ āĻĒā§āĻ°āĻ•āĻžāĻļāĻŋāĻ¤ āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸā§‡āĻ° āĻœāĻ¨ā§āĻ¯ fallback āĻ•ā§‡ āĻŸā§āĻ°āĻŋāĻ—āĻžāĻ° āĻ•āĻ°āĻŦā§‡ āĻ¨āĻžāĨ¤ āĻāĻ°āĻ•āĻŽāĻŸāĻžāĻ‡ āĻĒā§āĻ°āĻ¤ā§āĻ¯āĻžāĻļāĻŋāĻ¤āĨ¤ āĻ¯āĻžāĻ‡āĻšā§‹āĻ•, āĻāĻ–āĻ¨ āĻ†āĻŦāĻžāĻ° āĻŽāĻ¨ā§‡ āĻ•āĻ°ā§āĻ¨ āĻ†āĻĒāĻ¨āĻŋ āĻĻā§āĻŸāĻŋ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻĒā§āĻ°ā§‹āĻĢāĻžāĻ‡āĻ˛ā§‡āĻ° āĻŽāĻ§ā§āĻ¯ā§‡ āĻ¨ā§‡āĻ­āĻŋāĻ—ā§‡āĻŸ āĻ•āĻ°āĻ›ā§‡āĻ¨āĨ¤ āĻāĻ‡ āĻ•ā§āĻˇā§‡āĻ¤ā§āĻ°ā§‡ fallback āĻŸāĻŋ āĻĻā§‡āĻ–āĻžāĻ¨ā§‹ āĻ¯ā§āĻ•ā§āĻ¤āĻŋāĻ¸āĻ‡āĨ¤ āĻ‰āĻĻāĻžāĻšāĻ°āĻŖāĻ¸ā§āĻŦāĻ°ā§‚āĻĒ, āĻāĻ•āĻœāĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻŸāĻžāĻ‡āĻŽāĻ˛āĻžāĻ‡ āĻ†āĻ°ā§‡āĻ•āĻœāĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻŸāĻžāĻ‡āĻŽāĻ˛āĻžāĻ‡āĻ¨ āĻĨā§‡āĻ•ā§‡ *āĻ†āĻ˛āĻžāĻĻāĻž āĻ•āĻ¨ā§āĻŸā§‡āĻ¨ā§āĻŸ*āĨ¤ āĻāĻ•āĻŸāĻŋ `key` āĻ¨āĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āĻŸ āĻ•āĻ°ā§‡ āĻĻā§‡ā§ŸāĻžāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§‡ āĻ†āĻĒāĻ¨āĻŋ āĻ¨āĻŋāĻļā§āĻšāĻŋāĻ¤ āĻ•āĻ°ā§‡āĻ¨ āĻ¯ā§‡, React āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ°āĻ•āĻžāĻ°ā§€āĻ° āĻĒā§āĻ°ā§‹āĻĢāĻžāĻ‡āĻ˛āĻ•ā§‡ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ­āĻŋāĻ¨ā§āĻ¨ āĻ•āĻŽā§āĻĒā§‹āĻ¨ā§‡āĻ¨ā§āĻŸ āĻšāĻŋāĻ¸āĻžāĻŦā§‡ āĻŦāĻŋāĻŦā§‡āĻšāĻ¨āĻž āĻ•āĻ°ā§‡ āĻāĻŦāĻ‚ āĻ¨ā§‡āĻ­āĻŋāĻ—ā§‡āĻļāĻ¨ā§‡āĻ° āĻ¸āĻŽā§Ÿ Suspense boundary āĻ—ā§āĻ˛ā§‹ āĻ°āĻŋāĻ¸ā§‡āĻŸ āĻ•āĻ°ā§‡āĨ¤ Suspense-integrated āĻ°āĻžāĻ‰āĻŸāĻžāĻ°āĻ—ā§āĻ˛ā§‹ āĻāĻŸāĻŋ āĻ¸ā§āĻŦā§ŸāĻ‚āĻ•ā§āĻ°āĻŋā§ŸāĻ­āĻžāĻŦā§‡āĻ‡ āĻ•āĻ°āĻŦā§‡āĨ¤ +======= +With a different `key`, React treats the profiles as different content and resets the Suspense boundary during navigation. The `key` can go on the boundary itself or on a component above it. Suspense-integrated routers should do this automatically. + +In the example below, opening the profile page loads the first profile. Pressing "Bob" navigates to a different profile, and the `key` resets the boundary, so the fallback shows instead of the previous user's bio. Try removing the `key`: the previous bio stays visible while the next one loads: + + + +```js src/App.js hidden +import { useState } from 'react'; +import ProfilePage from './ProfilePage.js'; + +export default function App() { + const [show, setShow] = useState(false); + if (show) { + return ; + } + return ( + + ); +} +``` + +```js src/ProfilePage.js active +import { Suspense, useState, startTransition } from 'react'; +import Bio from './Bio.js'; +import { fetchBio } from './data.js'; + +export default function ProfilePage() { + const [user, setUser] = useState(() => ({ + id: 'alice', + bioPromise: fetchBio('alice'), + })); + function navigate(id) { + startTransition(() => { + setUser({ id, bioPromise: fetchBio(id) }); + }); + } + return ( + <> + + + ⌛ Loading profile...

}> + + + + ); +} +``` + +```js src/Bio.js +import { use } from 'react'; + +export default function Bio({ bioPromise }) { + const bio = use(bioPromise); + return

{bio}

; +} +``` + +```js src/data.js hidden +// Note: the way you would do data fetching depends on +// the framework that you use together with Suspense. + +export async function fetchBio(userId) { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 1500); + }); + + return userId === 'alice' + ? 'Alice is a photographer and traveler.' + : 'Bob collects vintage synthesizers.'; +} +``` + +```css +button { + margin-right: 8px; +} +``` + + +>>>>>>> 8efce7853d0fc59e615ed1c253799cf1798b8428 --- @@ -2027,7 +2425,1028 @@ function Chat() { --- +<<<<<<< HEAD ## āĻ¸āĻŽāĻ¸ā§āĻ¯āĻžāĻ° āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨ āĻ•āĻ°āĻž {/*troubleshooting*/} +======= +### Providing a fallback for browser-only content {/*providing-a-fallback-for-browser-only-content*/} + +A Suspense boundary can provide a fallback for a browser-only component. Wrap the component in `` and call [`use(browser())`](/reference/react/use#use-browser) inside it. + +Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`. + + + +```js src/App.js active +import { Suspense, use, useState } from 'react'; +import { browser } from 'react-dom'; + +function SavedDraft() { + use(browser('The draft is stored in localStorage.')); + const [draft, setDraft] = useState( + () => localStorage.getItem('draft') ?? '' + ); + + function handleChange(event) { + const nextDraft = event.target.value; + setDraft(nextDraft); + localStorage.setItem('draft', nextDraft); + } + + return ( +