;
+}
+```
diff --git a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js
new file mode 100644
index 000000000..250e0a1e5
--- /dev/null
+++ b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+const {ESLint} = require('eslint');
+const plugin = require('..');
+
+const FIXTURES_DIR = path.join(
+ __dirname,
+ 'fixtures',
+ 'src',
+ 'content'
+);
+const PARSER_PATH = path.join(__dirname, '..', 'parser.js');
+
+function createESLint({fix = false} = {}) {
+ return new ESLint({
+ useEslintrc: false,
+ fix,
+ plugins: {
+ 'local-rules': plugin,
+ },
+ overrideConfig: {
+ parser: PARSER_PATH,
+ plugins: ['local-rules'],
+ rules: {
+ 'local-rules/lint-markdown-code-blocks': 'error',
+ },
+ parserOptions: {
+ sourceType: 'module',
+ },
+ },
+ });
+}
+
+function readFixture(name) {
+ return fs.readFileSync(path.join(FIXTURES_DIR, name), 'utf8');
+}
+
+async function lintFixture(name, {fix = false} = {}) {
+ const eslint = createESLint({fix});
+ const filePath = path.join(FIXTURES_DIR, name);
+ const markdown = readFixture(name);
+ const [result] = await eslint.lintText(markdown, {filePath});
+ return result;
+}
+
+async function run() {
+ const basicResult = await lintFixture('basic-error.md');
+ assert.strictEqual(
+ basicResult.messages.length,
+ 1,
+ 'expected one diagnostic'
+ );
+ assert(
+ basicResult.messages[0].message.includes('Calling setState during render'),
+ 'expected message to mention setState during render'
+ );
+
+ const suppressedResult = await lintFixture('suppressed-error.md');
+ assert.strictEqual(
+ suppressedResult.messages.length,
+ 0,
+ 'expected suppression metadata to silence diagnostic'
+ );
+
+ const staleResult = await lintFixture('stale-expected-error.md');
+ assert.strictEqual(
+ staleResult.messages.length,
+ 1,
+ 'expected stale metadata error'
+ );
+ assert.strictEqual(
+ staleResult.messages[0].message,
+ 'React Compiler expected error on line 3 was not triggered'
+ );
+
+ const duplicateResult = await lintFixture('duplicate-metadata.md');
+ assert.strictEqual(
+ duplicateResult.messages.length,
+ 2,
+ 'expected duplicate metadata to surface compiler diagnostic and stale metadata notice'
+ );
+ const duplicateFixed = await lintFixture('duplicate-metadata.md', {
+ fix: true,
+ });
+ assert(
+ duplicateFixed.output.includes(
+ "{expectedErrors: {'react-compiler': [4]}}"
+ ),
+ 'expected duplicates to be rewritten to a single canonical block'
+ );
+ assert(
+ !duplicateFixed.output.includes('[99]'),
+ 'expected stale line numbers to be removed from metadata'
+ );
+
+ const mixedLanguageResult = await lintFixture('mixed-language.md');
+ assert.strictEqual(
+ mixedLanguageResult.messages.length,
+ 0,
+ 'expected non-js code fences to be ignored'
+ );
+
+ const malformedResult = await lintFixture('malformed-metadata.md');
+ assert.strictEqual(
+ malformedResult.messages.length,
+ 1,
+ 'expected malformed metadata to fall back to compiler diagnostics'
+ );
+ const malformedFixed = await lintFixture('malformed-metadata.md', {
+ fix: true,
+ });
+ assert(
+ malformedFixed.output.includes(
+ "{expectedErrors: {'react-compiler': [4]}}"
+ ),
+ 'expected malformed metadata to be replaced with canonical form'
+ );
+}
+
+run().catch(error => {
+ console.error(error);
+ process.exitCode = 1;
+});
diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js
new file mode 100644
index 000000000..b1f747ccb
--- /dev/null
+++ b/eslint-local-rules/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const lintMarkdownCodeBlocks = require('./rules/lint-markdown-code-blocks');
+
+module.exports = {
+ rules: {
+ 'lint-markdown-code-blocks': lintMarkdownCodeBlocks,
+ },
+};
diff --git a/eslint-local-rules/package.json b/eslint-local-rules/package.json
new file mode 100644
index 000000000..9940fee20
--- /dev/null
+++ b/eslint-local-rules/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "eslint-plugin-local-rules",
+ "version": "0.0.0",
+ "main": "index.js",
+ "private": "true",
+ "scripts": {
+ "test": "node __tests__/lint-markdown-code-blocks.test.js"
+ },
+ "devDependencies": {
+ "eslint-mdx": "^2"
+ }
+}
diff --git a/eslint-local-rules/parser.js b/eslint-local-rules/parser.js
new file mode 100644
index 000000000..043f2e520
--- /dev/null
+++ b/eslint-local-rules/parser.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = require('eslint-mdx');
diff --git a/eslint-local-rules/rules/diagnostics.js b/eslint-local-rules/rules/diagnostics.js
new file mode 100644
index 000000000..4e433164b
--- /dev/null
+++ b/eslint-local-rules/rules/diagnostics.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+function getRelativeLine(loc) {
+ return loc?.start?.line ?? loc?.line ?? 1;
+}
+
+function getRelativeColumn(loc) {
+ return loc?.start?.column ?? loc?.column ?? 0;
+}
+
+function getRelativeEndLine(loc, fallbackLine) {
+ if (loc?.end?.line != null) {
+ return loc.end.line;
+ }
+ if (loc?.line != null) {
+ return loc.line;
+ }
+ return fallbackLine;
+}
+
+function getRelativeEndColumn(loc, fallbackColumn) {
+ if (loc?.end?.column != null) {
+ return loc.end.column;
+ }
+ if (loc?.column != null) {
+ return loc.column;
+ }
+ return fallbackColumn;
+}
+
+/**
+ * @param {import('./markdown').MarkdownCodeBlock} block
+ * @param {Array<{detail: any, loc: any, message: string}>} diagnostics
+ * @returns {Array<{detail: any, message: string, relativeStartLine: number, markdownLoc: {start: {line: number, column: number}, end: {line: number, column: number}}}>}
+ */
+function normalizeDiagnostics(block, diagnostics) {
+ return diagnostics.map(({detail, loc, message}) => {
+ const relativeStartLine = Math.max(getRelativeLine(loc), 1);
+ const relativeStartColumn = Math.max(getRelativeColumn(loc), 0);
+ const relativeEndLine = Math.max(
+ getRelativeEndLine(loc, relativeStartLine),
+ relativeStartLine
+ );
+ const relativeEndColumn = Math.max(
+ getRelativeEndColumn(loc, relativeStartColumn),
+ relativeStartColumn
+ );
+
+ const markdownStartLine = block.codeStartLine + relativeStartLine - 1;
+ const markdownEndLine = block.codeStartLine + relativeEndLine - 1;
+
+ return {
+ detail,
+ message,
+ relativeStartLine,
+ markdownLoc: {
+ start: {
+ line: markdownStartLine,
+ column: relativeStartColumn,
+ },
+ end: {
+ line: markdownEndLine,
+ column: relativeEndColumn,
+ },
+ },
+ };
+ });
+}
+
+module.exports = {
+ normalizeDiagnostics,
+};
diff --git a/eslint-local-rules/rules/lint-markdown-code-blocks.js b/eslint-local-rules/rules/lint-markdown-code-blocks.js
new file mode 100644
index 000000000..5ec327947
--- /dev/null
+++ b/eslint-local-rules/rules/lint-markdown-code-blocks.js
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {
+ buildFenceLine,
+ getCompilerExpectedLines,
+ getSortedUniqueNumbers,
+ hasCompilerEntry,
+ metadataEquals,
+ metadataHasExpectedErrorsToken,
+ removeCompilerExpectedLines,
+ setCompilerExpectedLines,
+} = require('./metadata');
+const {normalizeDiagnostics} = require('./diagnostics');
+const {parseMarkdownFile} = require('./markdown');
+const {runReactCompiler} = require('./react-compiler');
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'Run React Compiler on markdown code blocks',
+ category: 'Possible Errors',
+ },
+ fixable: 'code',
+ hasSuggestions: true,
+ schema: [],
+ },
+
+ create(context) {
+ return {
+ Program(node) {
+ const filename = context.getFilename();
+ if (!filename.endsWith('.md') || !filename.includes('src/content')) {
+ return;
+ }
+
+ const sourceCode = context.getSourceCode();
+ const {blocks} = parseMarkdownFile(sourceCode.text, filename);
+ // For each supported code block, run the compiler and reconcile metadata.
+ for (const block of blocks) {
+ const compilerResult = runReactCompiler(
+ block.code,
+ `${filename}#codeblock`
+ );
+
+ const expectedLines = getCompilerExpectedLines(block.metadata);
+ const expectedLineSet = new Set(expectedLines);
+ const diagnostics = normalizeDiagnostics(
+ block,
+ compilerResult.diagnostics
+ );
+
+ const errorLines = new Set();
+ const unexpectedDiagnostics = [];
+
+ for (const diagnostic of diagnostics) {
+ const line = diagnostic.relativeStartLine;
+ errorLines.add(line);
+ if (!expectedLineSet.has(line)) {
+ unexpectedDiagnostics.push(diagnostic);
+ }
+ }
+
+ const normalizedErrorLines = getSortedUniqueNumbers(
+ Array.from(errorLines)
+ );
+ const missingExpectedLines = expectedLines.filter(
+ (line) => !errorLines.has(line)
+ );
+
+ const desiredMetadata = normalizedErrorLines.length
+ ? setCompilerExpectedLines(block.metadata, normalizedErrorLines)
+ : removeCompilerExpectedLines(block.metadata);
+
+ // Compute canonical metadata and attach an autofix when it differs.
+ const metadataChanged = !metadataEquals(
+ block.metadata,
+ desiredMetadata
+ );
+ const replacementLine = buildFenceLine(block.lang, desiredMetadata);
+ const replacementDiffers = block.fence.rawText !== replacementLine;
+ const applyReplacementFix = replacementDiffers
+ ? (fixer) =>
+ fixer.replaceTextRange(block.fence.range, replacementLine)
+ : null;
+
+ const hasDuplicateMetadata =
+ block.metadata.hadDuplicateExpectedErrors;
+ const hasExpectedErrorsMetadata = metadataHasExpectedErrorsToken(
+ block.metadata
+ );
+
+ const shouldFixUnexpected =
+ Boolean(applyReplacementFix) &&
+ normalizedErrorLines.length > 0 &&
+ (metadataChanged ||
+ hasDuplicateMetadata ||
+ !hasExpectedErrorsMetadata);
+
+ let fixAlreadyAttached = false;
+
+ for (const diagnostic of unexpectedDiagnostics) {
+ const reportData = {
+ node,
+ loc: diagnostic.markdownLoc,
+ message: diagnostic.message,
+ };
+
+ if (
+ shouldFixUnexpected &&
+ applyReplacementFix &&
+ !fixAlreadyAttached
+ ) {
+ reportData.fix = applyReplacementFix;
+ reportData.suggest = [
+ {
+ desc: 'Add expectedErrors metadata to suppress these errors',
+ fix: applyReplacementFix,
+ },
+ ];
+ fixAlreadyAttached = true;
+ }
+
+ context.report(reportData);
+ }
+
+ // Assert that expectedErrors is actually needed
+ if (
+ Boolean(applyReplacementFix) &&
+ missingExpectedLines.length > 0 &&
+ hasCompilerEntry(block.metadata)
+ ) {
+ const plural = missingExpectedLines.length > 1;
+ const message = plural
+ ? `React Compiler expected errors on lines ${missingExpectedLines.join(
+ ', '
+ )} were not triggered`
+ : `React Compiler expected error on line ${missingExpectedLines[0]} was not triggered`;
+
+ const reportData = {
+ node,
+ loc: {
+ start: {
+ line: block.position.start.line,
+ column: 0,
+ },
+ end: {
+ line: block.position.start.line,
+ column: block.fence.rawText.length,
+ },
+ },
+ message,
+ };
+
+ if (!fixAlreadyAttached && applyReplacementFix) {
+ reportData.fix = applyReplacementFix;
+ fixAlreadyAttached = true;
+ } else if (applyReplacementFix) {
+ reportData.suggest = [
+ {
+ desc: 'Remove stale expectedErrors metadata',
+ fix: applyReplacementFix,
+ },
+ ];
+ }
+
+ context.report(reportData);
+ }
+ }
+ },
+ };
+ },
+};
diff --git a/eslint-local-rules/rules/markdown.js b/eslint-local-rules/rules/markdown.js
new file mode 100644
index 000000000..d888d1311
--- /dev/null
+++ b/eslint-local-rules/rules/markdown.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const remark = require('remark');
+const {parseFenceMetadata} = require('./metadata');
+
+/**
+ * @typedef {Object} MarkdownCodeBlock
+ * @property {string} code
+ * @property {number} codeStartLine
+ * @property {{start: {line: number, column: number}, end: {line: number, column: number}}} position
+ * @property {{lineIndex: number, rawText: string, metaText: string, range: [number, number]}} fence
+ * @property {string} filePath
+ * @property {string} lang
+ * @property {import('./metadata').FenceMetadata} metadata
+ */
+
+const SUPPORTED_LANGUAGES = new Set([
+ 'js',
+ 'jsx',
+ 'javascript',
+ 'ts',
+ 'tsx',
+ 'typescript',
+]);
+
+function computeLineOffsets(lines) {
+ const offsets = [];
+ let currentOffset = 0;
+
+ for (const line of lines) {
+ offsets.push(currentOffset);
+ currentOffset += line.length + 1;
+ }
+
+ return offsets;
+}
+
+function parseMarkdownFile(content, filePath) {
+ const tree = remark().parse(content);
+ const lines = content.split('\n');
+ const lineOffsets = computeLineOffsets(lines);
+ const blocks = [];
+
+ function traverse(node) {
+ if (!node || typeof node !== 'object') {
+ return;
+ }
+
+ if (node.type === 'code') {
+ const rawLang = node.lang || '';
+ const normalizedLang = rawLang.toLowerCase();
+ if (!normalizedLang || !SUPPORTED_LANGUAGES.has(normalizedLang)) {
+ return;
+ }
+
+ const fenceLineIndex = (node.position?.start?.line ?? 1) - 1;
+ const fenceStartOffset = node.position?.start?.offset ?? 0;
+ const fenceLine = lines[fenceLineIndex] ?? '';
+ const fenceEndOffset = fenceStartOffset + fenceLine.length;
+
+ let metaText = '';
+ if (fenceLine) {
+ const prefixMatch = fenceLine.match(/^`{3,}\s*/);
+ const prefixLength = prefixMatch ? prefixMatch[0].length : 3;
+ metaText = fenceLine.slice(prefixLength + rawLang.length);
+ } else if (node.meta) {
+ metaText = ` ${node.meta}`;
+ }
+
+ const metadata = parseFenceMetadata(metaText);
+
+ blocks.push({
+ lang: rawLang || normalizedLang,
+ metadata,
+ filePath,
+ code: node.value || '',
+ codeStartLine: (node.position?.start?.line ?? 1) + 1,
+ position: {
+ start: {
+ line: fenceLineIndex + 1,
+ column: (node.position?.start?.column ?? 1) - 1,
+ },
+ end: {
+ line: fenceLineIndex + 1,
+ column: (node.position?.start?.column ?? 1) - 1 + fenceLine.length,
+ },
+ },
+ fence: {
+ lineIndex: fenceLineIndex,
+ rawText: fenceLine,
+ metaText,
+ range: [fenceStartOffset, fenceEndOffset],
+ },
+ });
+ return;
+ }
+
+ if ('children' in node && Array.isArray(node.children)) {
+ for (const child of node.children) {
+ traverse(child);
+ }
+ }
+ }
+
+ traverse(tree);
+
+ return {
+ content,
+ blocks,
+ lines,
+ lineOffsets,
+ };
+}
+
+module.exports = {
+ SUPPORTED_LANGUAGES,
+ computeLineOffsets,
+ parseMarkdownFile,
+};
diff --git a/eslint-local-rules/rules/metadata.js b/eslint-local-rules/rules/metadata.js
new file mode 100644
index 000000000..fb58a37c2
--- /dev/null
+++ b/eslint-local-rules/rules/metadata.js
@@ -0,0 +1,377 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @typedef {{type: 'text', raw: string}} TextToken
+ * @typedef {{
+ * type: 'expectedErrors',
+ * entries: Record>,
+ * raw?: string,
+ * }} ExpectedErrorsToken
+ * @typedef {TextToken | ExpectedErrorsToken} MetadataToken
+ *
+ * @typedef {{
+ * leading: string,
+ * trailing: string,
+ * tokens: Array,
+ * parseError: boolean,
+ * hadDuplicateExpectedErrors: boolean,
+ * }} FenceMetadata
+ */
+
+const EXPECTED_ERRORS_BLOCK_REGEX = /\{\s*expectedErrors\s*:/;
+const REACT_COMPILER_KEY = 'react-compiler';
+
+function getSortedUniqueNumbers(values) {
+ return Array.from(new Set(values))
+ .filter((value) => typeof value === 'number' && !Number.isNaN(value))
+ .sort((a, b) => a - b);
+}
+
+function tokenizeMeta(body) {
+ if (!body) {
+ return [];
+ }
+
+ const tokens = [];
+ let current = '';
+ let depth = 0;
+
+ for (let i = 0; i < body.length; i++) {
+ const char = body[i];
+ if (char === '{') {
+ depth++;
+ } else if (char === '}') {
+ depth = Math.max(depth - 1, 0);
+ }
+
+ if (char === ' ' && depth === 0) {
+ if (current) {
+ tokens.push(current);
+ current = '';
+ }
+ continue;
+ }
+
+ current += char;
+ }
+
+ if (current) {
+ tokens.push(current);
+ }
+
+ return tokens;
+}
+
+function normalizeEntryValues(values) {
+ if (!Array.isArray(values)) {
+ return [];
+ }
+ return getSortedUniqueNumbers(values);
+}
+
+function parseExpectedErrorsEntries(rawEntries) {
+ const normalized = rawEntries
+ .replace(/([{,]\s*)([a-zA-Z_$][\w$]*)\s*:/g, '$1"$2":')
+ .replace(/'([^']*)'/g, '"$1"');
+
+ const parsed = JSON.parse(normalized);
+ const entries = {};
+
+ if (parsed && typeof parsed === 'object') {
+ for (const [key, value] of Object.entries(parsed)) {
+ entries[key] = normalizeEntryValues(Array.isArray(value) ? value.flat() : value);
+ }
+ }
+
+ return entries;
+}
+
+function parseExpectedErrorsToken(tokenText) {
+ const match = tokenText.match(/^\{\s*expectedErrors\s*:\s*(\{[\s\S]*\})\s*\}$/);
+ if (!match) {
+ return null;
+ }
+
+ const entriesSource = match[1];
+ let parseError = false;
+ let entries;
+
+ try {
+ entries = parseExpectedErrorsEntries(entriesSource);
+ } catch (error) {
+ parseError = true;
+ entries = {};
+ }
+
+ return {
+ token: {
+ type: 'expectedErrors',
+ entries,
+ raw: tokenText,
+ },
+ parseError,
+ };
+}
+
+function parseFenceMetadata(metaText) {
+ if (!metaText) {
+ return {
+ leading: '',
+ trailing: '',
+ tokens: [],
+ parseError: false,
+ hadDuplicateExpectedErrors: false,
+ };
+ }
+
+ const leading = metaText.match(/^\s*/)?.[0] ?? '';
+ const trailing = metaText.match(/\s*$/)?.[0] ?? '';
+ const bodyStart = leading.length;
+ const bodyEnd = metaText.length - trailing.length;
+ const body = metaText.slice(bodyStart, bodyEnd).trim();
+
+ if (!body) {
+ return {
+ leading,
+ trailing,
+ tokens: [],
+ parseError: false,
+ hadDuplicateExpectedErrors: false,
+ };
+ }
+
+ const tokens = [];
+ let parseError = false;
+ let sawExpectedErrors = false;
+ let hadDuplicateExpectedErrors = false;
+
+ for (const rawToken of tokenizeMeta(body)) {
+ const normalizedToken = rawToken.trim();
+ if (!normalizedToken) {
+ continue;
+ }
+
+ if (EXPECTED_ERRORS_BLOCK_REGEX.test(normalizedToken)) {
+ const parsed = parseExpectedErrorsToken(normalizedToken);
+ if (parsed) {
+ if (sawExpectedErrors) {
+ hadDuplicateExpectedErrors = true;
+ // Drop duplicates. We'll rebuild the canonical block on write.
+ continue;
+ }
+ tokens.push(parsed.token);
+ parseError = parseError || parsed.parseError;
+ sawExpectedErrors = true;
+ continue;
+ }
+ }
+
+ tokens.push({type: 'text', raw: normalizedToken});
+ }
+
+ return {
+ leading,
+ trailing,
+ tokens,
+ parseError,
+ hadDuplicateExpectedErrors,
+ };
+}
+
+function cloneMetadata(metadata) {
+ return {
+ leading: metadata.leading,
+ trailing: metadata.trailing,
+ parseError: metadata.parseError,
+ hadDuplicateExpectedErrors: metadata.hadDuplicateExpectedErrors,
+ tokens: metadata.tokens.map((token) => {
+ if (token.type === 'expectedErrors') {
+ const clonedEntries = {};
+ for (const [key, value] of Object.entries(token.entries)) {
+ clonedEntries[key] = [...value];
+ }
+ return {type: 'expectedErrors', entries: clonedEntries};
+ }
+ return {type: 'text', raw: token.raw};
+ }),
+ };
+}
+
+function findExpectedErrorsToken(metadata) {
+ return metadata.tokens.find((token) => token.type === 'expectedErrors') || null;
+}
+
+function getCompilerExpectedLines(metadata) {
+ const token = findExpectedErrorsToken(metadata);
+ if (!token) {
+ return [];
+ }
+ return getSortedUniqueNumbers(token.entries[REACT_COMPILER_KEY] || []);
+}
+
+function hasCompilerEntry(metadata) {
+ const token = findExpectedErrorsToken(metadata);
+ return Boolean(token && token.entries[REACT_COMPILER_KEY]?.length);
+}
+
+function metadataHasExpectedErrorsToken(metadata) {
+ return Boolean(findExpectedErrorsToken(metadata));
+}
+
+function stringifyExpectedErrorsToken(token) {
+ const entries = token.entries || {};
+ const keys = Object.keys(entries).filter((key) => entries[key].length > 0);
+ if (keys.length === 0) {
+ return '';
+ }
+
+ keys.sort();
+
+ const segments = keys.map((key) => {
+ const values = entries[key];
+ return `'${key}': [${values.join(', ')}]`;
+ });
+
+ return `{expectedErrors: {${segments.join(', ')}}}`;
+}
+
+function stringifyFenceMetadata(metadata) {
+ if (!metadata.tokens.length) {
+ return '';
+ }
+
+ const parts = metadata.tokens
+ .map((token) => {
+ if (token.type === 'expectedErrors') {
+ return stringifyExpectedErrorsToken(token);
+ }
+ return token.raw;
+ })
+ .filter(Boolean);
+
+ if (!parts.length) {
+ return '';
+ }
+
+ const leading = metadata.leading || ' ';
+ const trailing = metadata.trailing ? metadata.trailing.trimEnd() : '';
+ const body = parts.join(' ');
+ return `${leading}${body}${trailing}`;
+}
+
+function buildFenceLine(lang, metadata) {
+ const meta = stringifyFenceMetadata(metadata);
+ return meta ? `\`\`\`${lang}${meta}` : `\`\`\`${lang}`;
+}
+
+function metadataEquals(a, b) {
+ if (a.leading !== b.leading || a.trailing !== b.trailing) {
+ return false;
+ }
+
+ if (a.tokens.length !== b.tokens.length) {
+ return false;
+ }
+
+ for (let i = 0; i < a.tokens.length; i++) {
+ const left = a.tokens[i];
+ const right = b.tokens[i];
+ if (left.type !== right.type) {
+ return false;
+ }
+ if (left.type === 'text') {
+ if (left.raw !== right.raw) {
+ return false;
+ }
+ } else {
+ const leftKeys = Object.keys(left.entries).sort();
+ const rightKeys = Object.keys(right.entries).sort();
+ if (leftKeys.length !== rightKeys.length) {
+ return false;
+ }
+ for (let j = 0; j < leftKeys.length; j++) {
+ if (leftKeys[j] !== rightKeys[j]) {
+ return false;
+ }
+ const lValues = getSortedUniqueNumbers(left.entries[leftKeys[j]]);
+ const rValues = getSortedUniqueNumbers(right.entries[rightKeys[j]]);
+ if (lValues.length !== rValues.length) {
+ return false;
+ }
+ for (let k = 0; k < lValues.length; k++) {
+ if (lValues[k] !== rValues[k]) {
+ return false;
+ }
+ }
+ }
+ }
+ }
+
+ return true;
+}
+
+function normalizeMetadata(metadata) {
+ const normalized = cloneMetadata(metadata);
+ normalized.hadDuplicateExpectedErrors = false;
+ normalized.parseError = false;
+ if (!normalized.tokens.length) {
+ normalized.leading = '';
+ normalized.trailing = '';
+ }
+ return normalized;
+}
+
+function setCompilerExpectedLines(metadata, lines) {
+ const normalizedLines = getSortedUniqueNumbers(lines);
+ if (normalizedLines.length === 0) {
+ return removeCompilerExpectedLines(metadata);
+ }
+
+ const next = cloneMetadata(metadata);
+ let token = findExpectedErrorsToken(next);
+ if (!token) {
+ token = {type: 'expectedErrors', entries: {}};
+ next.tokens = [token, ...next.tokens];
+ }
+
+ token.entries[REACT_COMPILER_KEY] = normalizedLines;
+ return normalizeMetadata(next);
+}
+
+function removeCompilerExpectedLines(metadata) {
+ const next = cloneMetadata(metadata);
+ const token = findExpectedErrorsToken(next);
+ if (!token) {
+ return normalizeMetadata(next);
+ }
+
+ delete token.entries[REACT_COMPILER_KEY];
+
+ const hasEntries = Object.values(token.entries).some(
+ (value) => Array.isArray(value) && value.length > 0
+ );
+
+ if (!hasEntries) {
+ next.tokens = next.tokens.filter((item) => item !== token);
+ }
+
+ return normalizeMetadata(next);
+}
+
+module.exports = {
+ buildFenceLine,
+ getCompilerExpectedLines,
+ getSortedUniqueNumbers,
+ hasCompilerEntry,
+ metadataEquals,
+ metadataHasExpectedErrorsToken,
+ parseFenceMetadata,
+ removeCompilerExpectedLines,
+ setCompilerExpectedLines,
+ stringifyFenceMetadata,
+};
diff --git a/eslint-local-rules/rules/react-compiler.js b/eslint-local-rules/rules/react-compiler.js
new file mode 100644
index 000000000..26d3878ee
--- /dev/null
+++ b/eslint-local-rules/rules/react-compiler.js
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const {transformFromAstSync} = require('@babel/core');
+const {parse: babelParse} = require('@babel/parser');
+const BabelPluginReactCompiler = require('babel-plugin-react-compiler').default;
+const {
+ parsePluginOptions,
+ validateEnvironmentConfig,
+} = require('babel-plugin-react-compiler');
+
+const COMPILER_OPTIONS = {
+ noEmit: true,
+ panicThreshold: 'none',
+ environment: validateEnvironmentConfig({
+ validateRefAccessDuringRender: true,
+ validateNoSetStateInRender: true,
+ validateNoSetStateInEffects: true,
+ validateNoJSXInTryStatements: true,
+ validateNoImpureFunctionsInRender: true,
+ validateStaticComponents: true,
+ validateNoFreezingKnownMutableFunctions: true,
+ validateNoVoidUseMemo: true,
+ validateNoCapitalizedCalls: [],
+ validateHooksUsage: true,
+ validateNoDerivedComputationsInEffects: true,
+ }),
+};
+
+function hasRelevantCode(code) {
+ const functionPattern = /^(export\s+)?(default\s+)?function\s+\w+/m;
+ const arrowPattern =
+ /^(export\s+)?(const|let|var)\s+\w+\s*=\s*(\([^)]*\)|\w+)\s*=>/m;
+ const hasImports = /^import\s+/m.test(code);
+
+ return functionPattern.test(code) || arrowPattern.test(code) || hasImports;
+}
+
+function runReactCompiler(code, filename) {
+ const result = {
+ sourceCode: code,
+ events: [],
+ };
+
+ if (!hasRelevantCode(code)) {
+ return {...result, diagnostics: []};
+ }
+
+ const options = parsePluginOptions({
+ ...COMPILER_OPTIONS,
+ });
+
+ options.logger = {
+ logEvent: (_, event) => {
+ if (event.kind === 'CompileError') {
+ const category = event.detail?.category;
+ if (category === 'Todo' || category === 'Invariant') {
+ return;
+ }
+ result.events.push(event);
+ }
+ },
+ };
+
+ try {
+ const ast = babelParse(code, {
+ sourceFilename: filename,
+ sourceType: 'module',
+ plugins: ['jsx', 'typescript'],
+ });
+
+ transformFromAstSync(ast, code, {
+ filename,
+ highlightCode: false,
+ retainLines: true,
+ plugins: [[BabelPluginReactCompiler, options]],
+ sourceType: 'module',
+ configFile: false,
+ babelrc: false,
+ });
+ } catch (error) {
+ return {...result, diagnostics: []};
+ }
+
+ const diagnostics = [];
+
+ for (const event of result.events) {
+ if (event.kind !== 'CompileError') {
+ continue;
+ }
+
+ const detail = event.detail;
+ if (!detail) {
+ continue;
+ }
+
+ const loc = typeof detail.primaryLocation === 'function'
+ ? detail.primaryLocation()
+ : null;
+
+ if (loc == null || typeof loc === 'symbol') {
+ continue;
+ }
+
+ const message = typeof detail.printErrorMessage === 'function'
+ ? detail.printErrorMessage(result.sourceCode, {eslint: true})
+ : detail.description || 'Unknown React Compiler error';
+
+ diagnostics.push({detail, loc, message});
+ }
+
+ return {...result, diagnostics};
+}
+
+module.exports = {
+ hasRelevantCode,
+ runReactCompiler,
+};
diff --git a/eslint-local-rules/yarn.lock b/eslint-local-rules/yarn.lock
new file mode 100644
index 000000000..5a7cf126d
--- /dev/null
+++ b/eslint-local-rules/yarn.lock
@@ -0,0 +1,1421 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.16.0":
+ version "7.27.1"
+ resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.27.1.tgz#200f715e66d52a23b221a9435534a91cc13ad5be"
+ integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
+ dependencies:
+ "@babel/helper-validator-identifier" "^7.27.1"
+ js-tokens "^4.0.0"
+ picocolors "^1.1.1"
+
+"@babel/helper-validator-identifier@^7.27.1":
+ version "7.27.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
+ integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
+
+"@isaacs/cliui@^8.0.2":
+ version "8.0.2"
+ resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+ integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+ dependencies:
+ string-width "^5.1.2"
+ string-width-cjs "npm:string-width@^4.2.0"
+ strip-ansi "^7.0.1"
+ strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+ wrap-ansi "^8.1.0"
+ wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@npmcli/config@^6.0.0":
+ version "6.4.1"
+ resolved "https://registry.yarnpkg.com/@npmcli/config/-/config-6.4.1.tgz#006409c739635db008e78bf58c92421cc147911d"
+ integrity sha512-uSz+elSGzjCMANWa5IlbGczLYPkNI/LeR+cHrgaTqTrTSh9RHhOFA4daD2eRUz6lMtOW+Fnsb+qv7V2Zz8ML0g==
+ dependencies:
+ "@npmcli/map-workspaces" "^3.0.2"
+ ci-info "^4.0.0"
+ ini "^4.1.0"
+ nopt "^7.0.0"
+ proc-log "^3.0.0"
+ read-package-json-fast "^3.0.2"
+ semver "^7.3.5"
+ walk-up-path "^3.0.1"
+
+"@npmcli/map-workspaces@^3.0.2":
+ version "3.0.6"
+ resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-3.0.6.tgz#27dc06c20c35ef01e45a08909cab9cb3da08cea6"
+ integrity sha512-tkYs0OYnzQm6iIRdfy+LcLBjcKuQCeE5YLb8KnrIlutJfheNaPvPpgoFEyEFgbjzl5PLZ3IA/BWAwRU0eHuQDA==
+ dependencies:
+ "@npmcli/name-from-folder" "^2.0.0"
+ glob "^10.2.2"
+ minimatch "^9.0.0"
+ read-package-json-fast "^3.0.0"
+
+"@npmcli/name-from-folder@^2.0.0":
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/@npmcli/name-from-folder/-/name-from-folder-2.0.0.tgz#c44d3a7c6d5c184bb6036f4d5995eee298945815"
+ integrity sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==
+
+"@pkgjs/parseargs@^0.11.0":
+ version "0.11.0"
+ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+ integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pkgr/core@^0.1.0":
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.2.tgz#1cf95080bb7072fafaa3cb13b442fab4695c3893"
+ integrity sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==
+
+"@types/acorn@^4.0.0":
+ version "4.0.6"
+ resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
+ integrity sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==
+ dependencies:
+ "@types/estree" "*"
+
+"@types/concat-stream@^2.0.0":
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/@types/concat-stream/-/concat-stream-2.0.3.tgz#1f5c2ad26525716c181191f7ed53408f78eb758e"
+ integrity sha512-3qe4oQAPNwVNwK4C9c8u+VJqv9kez+2MR4qJpoPFfXtgxxif1QbFusvXzK0/Wra2VX07smostI2VMmJNSpZjuQ==
+ dependencies:
+ "@types/node" "*"
+
+"@types/debug@^4.0.0":
+ version "4.1.12"
+ resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
+ integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==
+ dependencies:
+ "@types/ms" "*"
+
+"@types/estree-jsx@^1.0.0":
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/@types/estree-jsx/-/estree-jsx-1.0.5.tgz#858a88ea20f34fe65111f005a689fa1ebf70dc18"
+ integrity sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==
+ dependencies:
+ "@types/estree" "*"
+
+"@types/estree@*", "@types/estree@^1.0.0":
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
+ integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+
+"@types/hast@^2.0.0":
+ version "2.3.10"
+ resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643"
+ integrity sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==
+ dependencies:
+ "@types/unist" "^2"
+
+"@types/is-empty@^1.0.0":
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/@types/is-empty/-/is-empty-1.2.3.tgz#a2d55ea8a5ec57bf61e411ba2a9e5132fe4f0899"
+ integrity sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw==
+
+"@types/mdast@^3.0.0":
+ version "3.0.15"
+ resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
+ integrity sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==
+ dependencies:
+ "@types/unist" "^2"
+
+"@types/ms@*":
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/@types/ms/-/ms-2.1.0.tgz#052aa67a48eccc4309d7f0191b7e41434b90bb78"
+ integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
+
+"@types/node@*":
+ version "24.5.1"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-24.5.1.tgz#dab6917c47113eb4502d27d06e89a407ec0eff95"
+ integrity sha512-/SQdmUP2xa+1rdx7VwB9yPq8PaKej8TD5cQ+XfKDPWWC+VDJU4rvVVagXqKUzhKjtFoNA8rXDJAkCxQPAe00+Q==
+ dependencies:
+ undici-types "~7.12.0"
+
+"@types/node@^18.0.0":
+ version "18.19.126"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.126.tgz#b1a9e0bac6338098f465ab242cbd6a8884d79b80"
+ integrity sha512-8AXQlBfrGmtYJEJUPs63F/uZQqVeFiN9o6NUjbDJYfxNxFnArlZufANPw4h6dGhYGKxcyw+TapXFvEsguzIQow==
+ dependencies:
+ undici-types "~5.26.4"
+
+"@types/supports-color@^8.0.0":
+ version "8.1.3"
+ resolved "https://registry.yarnpkg.com/@types/supports-color/-/supports-color-8.1.3.tgz#b769cdce1d1bb1a3fa794e35b62c62acdf93c139"
+ integrity sha512-Hy6UMpxhE3j1tLpl27exp1XqHD7n8chAiNPzWfz16LPZoMMoSc4dzLl6w9qijkEb/r5O1ozdu1CWGA2L83ZeZg==
+
+"@types/unist@^2", "@types/unist@^2.0.0":
+ version "2.0.11"
+ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4"
+ integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==
+
+abbrev@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-2.0.0.tgz#cf59829b8b4f03f89dda2771cb7f3653828c89bf"
+ integrity sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==
+
+acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
+ version "5.3.2"
+ resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+ integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.0.0, acorn@^8.10.0, acorn@^8.9.0:
+ version "8.15.0"
+ resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.15.0.tgz#a360898bc415edaac46c8241f6383975b930b816"
+ integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
+
+ansi-regex@^5.0.1:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+ integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+ version "6.2.2"
+ resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.2.2.tgz#60216eea464d864597ce2832000738a0589650c1"
+ integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
+
+ansi-styles@^4.0.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+ integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+ dependencies:
+ color-convert "^2.0.1"
+
+ansi-styles@^6.1.0:
+ version "6.2.3"
+ resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.3.tgz#c044d5dcc521a076413472597a1acb1f103c4041"
+ integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
+
+bail@^2.0.0:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+ integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
+
+balanced-match@^1.0.0:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+ integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+brace-expansion@^2.0.1:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7"
+ integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
+ dependencies:
+ balanced-match "^1.0.0"
+
+buffer-from@^1.0.0:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+ integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+ccount@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
+ integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
+
+character-entities-html4@^2.0.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
+ integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
+
+character-entities-legacy@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
+ integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
+
+character-entities@^2.0.0:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+ integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
+character-reference-invalid@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
+ integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
+
+ci-info@^4.0.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.3.0.tgz#c39b1013f8fdbd28cd78e62318357d02da160cd7"
+ integrity sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==
+
+color-convert@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+ integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+ dependencies:
+ color-name "~1.1.4"
+
+color-name@~1.1.4:
+ version "1.1.4"
+ resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+ integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+concat-stream@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-2.0.0.tgz#414cf5af790a48c60ab9be4527d56d5e41133cb1"
+ integrity sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==
+ dependencies:
+ buffer-from "^1.0.0"
+ inherits "^2.0.3"
+ readable-stream "^3.0.2"
+ typedarray "^0.0.6"
+
+cross-spawn@^7.0.6:
+ version "7.0.6"
+ resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+ integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+ dependencies:
+ path-key "^3.1.0"
+ shebang-command "^2.0.0"
+ which "^2.0.1"
+
+debug@^4.0.0:
+ version "4.4.3"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.3.tgz#c6ae432d9bd9662582fce08709b038c58e9e3d6a"
+ integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+ dependencies:
+ ms "^2.1.3"
+
+decode-named-character-reference@^1.0.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz#25c32ae6dd5e21889549d40f676030e9514cc0ed"
+ integrity sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==
+ dependencies:
+ character-entities "^2.0.0"
+
+dequal@^2.0.0:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+ integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+diff@^5.0.0:
+ version "5.2.0"
+ resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
+ integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
+
+eastasianwidth@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+ integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+emoji-regex@^8.0.0:
+ version "8.0.0"
+ resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+ integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+ version "9.2.2"
+ resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+ integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+error-ex@^1.3.2:
+ version "1.3.4"
+ resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.4.tgz#b3a8d8bb6f92eecc1629e3e27d3c8607a8a32414"
+ integrity sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==
+ dependencies:
+ is-arrayish "^0.2.1"
+
+eslint-mdx@^2:
+ version "2.3.4"
+ resolved "https://registry.yarnpkg.com/eslint-mdx/-/eslint-mdx-2.3.4.tgz#87a5d95d6fcb27bafd2b15092f16f5aa559e336b"
+ integrity sha512-u4NszEUyoGtR7Q0A4qs0OymsEQdCO6yqWlTzDa9vGWsK7aMotdnW0hqifHTkf6lEtA2vHk2xlkWHTCrhYLyRbw==
+ dependencies:
+ acorn "^8.10.0"
+ acorn-jsx "^5.3.2"
+ espree "^9.6.1"
+ estree-util-visit "^1.2.1"
+ remark-mdx "^2.3.0"
+ remark-parse "^10.0.2"
+ remark-stringify "^10.0.3"
+ synckit "^0.9.0"
+ tslib "^2.6.1"
+ unified "^10.1.2"
+ unified-engine "^10.1.0"
+ unist-util-visit "^4.1.2"
+ uvu "^0.5.6"
+ vfile "^5.3.7"
+
+eslint-visitor-keys@^3.4.1:
+ version "3.4.3"
+ resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+ integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+espree@^9.6.1:
+ version "9.6.1"
+ resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+ integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+ dependencies:
+ acorn "^8.9.0"
+ acorn-jsx "^5.3.2"
+ eslint-visitor-keys "^3.4.1"
+
+estree-util-is-identifier-name@^2.0.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-2.1.0.tgz#fb70a432dcb19045e77b05c8e732f1364b4b49b2"
+ integrity sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==
+
+estree-util-visit@^1.0.0, estree-util-visit@^1.2.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/estree-util-visit/-/estree-util-visit-1.2.1.tgz#8bc2bc09f25b00827294703835aabee1cc9ec69d"
+ integrity sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==
+ dependencies:
+ "@types/estree-jsx" "^1.0.0"
+ "@types/unist" "^2.0.0"
+
+extend@^3.0.0:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+ integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+fault@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+ integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
+ dependencies:
+ format "^0.2.0"
+
+foreground-child@^3.1.0:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.1.tgz#32e8e9ed1b68a3497befb9ac2b6adf92a638576f"
+ integrity sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==
+ dependencies:
+ cross-spawn "^7.0.6"
+ signal-exit "^4.0.1"
+
+format@^0.2.0:
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+ integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
+fs.realpath@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+ integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+glob@^10.2.2:
+ version "10.4.5"
+ resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+ integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+ dependencies:
+ foreground-child "^3.1.0"
+ jackspeak "^3.1.2"
+ minimatch "^9.0.4"
+ minipass "^7.1.2"
+ package-json-from-dist "^1.0.0"
+ path-scurry "^1.11.1"
+
+glob@^8.0.0:
+ version "8.1.0"
+ resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+ integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+ dependencies:
+ fs.realpath "^1.0.0"
+ inflight "^1.0.4"
+ inherits "2"
+ minimatch "^5.0.1"
+ once "^1.3.0"
+
+ignore@^5.0.0:
+ version "5.3.2"
+ resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+ integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+import-meta-resolve@^2.0.0:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/import-meta-resolve/-/import-meta-resolve-2.2.2.tgz#75237301e72d1f0fbd74dbc6cca9324b164c2cc9"
+ integrity sha512-f8KcQ1D80V7RnqVm+/lirO9zkOxjGxhaTC1IPrBGd3MEfNgmNG67tSUO9gTi2F3Blr2Az6g1vocaxzkVnWl9MA==
+
+inflight@^1.0.4:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+ integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+ dependencies:
+ once "^1.3.0"
+ wrappy "1"
+
+inherits@2, inherits@^2.0.3:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+ integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@^4.1.0:
+ version "4.1.3"
+ resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795"
+ integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==
+
+is-alphabetical@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
+ integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
+
+is-alphanumerical@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
+ integrity sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==
+ dependencies:
+ is-alphabetical "^2.0.0"
+ is-decimal "^2.0.0"
+
+is-arrayish@^0.2.1:
+ version "0.2.1"
+ resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+ integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-buffer@^2.0.0:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+ integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
+is-decimal@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
+ integrity sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==
+
+is-empty@^1.0.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-1.2.0.tgz#de9bb5b278738a05a0b09a57e1fb4d4a341a9f6b"
+ integrity sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==
+
+is-fullwidth-code-point@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+ integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-hexadecimal@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
+ integrity sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==
+
+is-plain-obj@^4.0.0:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
+ integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
+
+isexe@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+ integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+jackspeak@^3.1.2:
+ version "3.4.3"
+ resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+ integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+ dependencies:
+ "@isaacs/cliui" "^8.0.2"
+ optionalDependencies:
+ "@pkgjs/parseargs" "^0.11.0"
+
+js-tokens@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+ integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+json-parse-even-better-errors@^2.3.1:
+ version "2.3.1"
+ resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+ integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-parse-even-better-errors@^3.0.0:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz#b43d35e89c0f3be6b5fbbe9dc6c82467b30c28da"
+ integrity sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==
+
+kleur@^4.0.3:
+ version "4.1.5"
+ resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+ integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
+lines-and-columns@^2.0.2:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.4.tgz#d00318855905d2660d8c0822e3f5a4715855fc42"
+ integrity sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==
+
+load-plugin@^5.0.0:
+ version "5.1.0"
+ resolved "https://registry.yarnpkg.com/load-plugin/-/load-plugin-5.1.0.tgz#15600f5191c742b16e058cfc908c227c13db0104"
+ integrity sha512-Lg1CZa1CFj2CbNaxijTL6PCbzd4qGTlZov+iH2p5Xwy/ApcZJh+i6jMN2cYePouTfjJfrNu3nXFdEw8LvbjPFQ==
+ dependencies:
+ "@npmcli/config" "^6.0.0"
+ import-meta-resolve "^2.0.0"
+
+longest-streak@^3.0.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
+ integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==
+
+lru-cache@^10.2.0:
+ version "10.4.3"
+ resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+ integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+mdast-util-from-markdown@^1.0.0, mdast-util-from-markdown@^1.1.0:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
+ integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
+ dependencies:
+ "@types/mdast" "^3.0.0"
+ "@types/unist" "^2.0.0"
+ decode-named-character-reference "^1.0.0"
+ mdast-util-to-string "^3.1.0"
+ micromark "^3.0.0"
+ micromark-util-decode-numeric-character-reference "^1.0.0"
+ micromark-util-decode-string "^1.0.0"
+ micromark-util-normalize-identifier "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ unist-util-stringify-position "^3.0.0"
+ uvu "^0.5.0"
+
+mdast-util-mdx-expression@^1.0.0:
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.3.2.tgz#d027789e67524d541d6de543f36d51ae2586f220"
+ integrity sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==
+ dependencies:
+ "@types/estree-jsx" "^1.0.0"
+ "@types/hast" "^2.0.0"
+ "@types/mdast" "^3.0.0"
+ mdast-util-from-markdown "^1.0.0"
+ mdast-util-to-markdown "^1.0.0"
+
+mdast-util-mdx-jsx@^2.0.0:
+ version "2.1.4"
+ resolved "https://registry.yarnpkg.com/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-2.1.4.tgz#7c1f07f10751a78963cfabee38017cbc8b7786d1"
+ integrity sha512-DtMn9CmVhVzZx3f+optVDF8yFgQVt7FghCRNdlIaS3X5Bnym3hZwPbg/XW86vdpKjlc1PVj26SpnLGeJBXD3JA==
+ dependencies:
+ "@types/estree-jsx" "^1.0.0"
+ "@types/hast" "^2.0.0"
+ "@types/mdast" "^3.0.0"
+ "@types/unist" "^2.0.0"
+ ccount "^2.0.0"
+ mdast-util-from-markdown "^1.1.0"
+ mdast-util-to-markdown "^1.3.0"
+ parse-entities "^4.0.0"
+ stringify-entities "^4.0.0"
+ unist-util-remove-position "^4.0.0"
+ unist-util-stringify-position "^3.0.0"
+ vfile-message "^3.0.0"
+
+mdast-util-mdx@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/mdast-util-mdx/-/mdast-util-mdx-2.0.1.tgz#49b6e70819b99bb615d7223c088d295e53bb810f"
+ integrity sha512-38w5y+r8nyKlGvNjSEqWrhG0w5PmnRA+wnBvm+ulYCct7nsGYhFVb0lljS9bQav4psDAS1eGkP2LMVcZBi/aqw==
+ dependencies:
+ mdast-util-from-markdown "^1.0.0"
+ mdast-util-mdx-expression "^1.0.0"
+ mdast-util-mdx-jsx "^2.0.0"
+ mdast-util-mdxjs-esm "^1.0.0"
+ mdast-util-to-markdown "^1.0.0"
+
+mdast-util-mdxjs-esm@^1.0.0:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-1.3.1.tgz#645d02cd607a227b49721d146fd81796b2e2d15b"
+ integrity sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w==
+ dependencies:
+ "@types/estree-jsx" "^1.0.0"
+ "@types/hast" "^2.0.0"
+ "@types/mdast" "^3.0.0"
+ mdast-util-from-markdown "^1.0.0"
+ mdast-util-to-markdown "^1.0.0"
+
+mdast-util-phrasing@^3.0.0:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz#c7c21d0d435d7fb90956038f02e8702781f95463"
+ integrity sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==
+ dependencies:
+ "@types/mdast" "^3.0.0"
+ unist-util-is "^5.0.0"
+
+mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0:
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz#c13343cb3fc98621911d33b5cd42e7d0731171c6"
+ integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==
+ dependencies:
+ "@types/mdast" "^3.0.0"
+ "@types/unist" "^2.0.0"
+ longest-streak "^3.0.0"
+ mdast-util-phrasing "^3.0.0"
+ mdast-util-to-string "^3.0.0"
+ micromark-util-decode-string "^1.0.0"
+ unist-util-visit "^4.0.0"
+ zwitch "^2.0.0"
+
+mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789"
+ integrity sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==
+ dependencies:
+ "@types/mdast" "^3.0.0"
+
+micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
+ integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==
+ dependencies:
+ decode-named-character-reference "^1.0.0"
+ micromark-factory-destination "^1.0.0"
+ micromark-factory-label "^1.0.0"
+ micromark-factory-space "^1.0.0"
+ micromark-factory-title "^1.0.0"
+ micromark-factory-whitespace "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-chunked "^1.0.0"
+ micromark-util-classify-character "^1.0.0"
+ micromark-util-html-tag-name "^1.0.0"
+ micromark-util-normalize-identifier "^1.0.0"
+ micromark-util-resolve-all "^1.0.0"
+ micromark-util-subtokenize "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.1"
+ uvu "^0.5.0"
+
+micromark-extension-mdx-expression@^1.0.0:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.8.tgz#5bc1f5fd90388e8293b3ef4f7c6f06c24aff6314"
+ integrity sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw==
+ dependencies:
+ "@types/estree" "^1.0.0"
+ micromark-factory-mdx-expression "^1.0.0"
+ micromark-factory-space "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-events-to-acorn "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ uvu "^0.5.0"
+
+micromark-extension-mdx-jsx@^1.0.0:
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-1.0.5.tgz#e72d24b7754a30d20fb797ece11e2c4e2cae9e82"
+ integrity sha512-gPH+9ZdmDflbu19Xkb8+gheqEDqkSpdCEubQyxuz/Hn8DOXiXvrXeikOoBA71+e8Pfi0/UYmU3wW3H58kr7akA==
+ dependencies:
+ "@types/acorn" "^4.0.0"
+ "@types/estree" "^1.0.0"
+ estree-util-is-identifier-name "^2.0.0"
+ micromark-factory-mdx-expression "^1.0.0"
+ micromark-factory-space "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ uvu "^0.5.0"
+ vfile-message "^3.0.0"
+
+micromark-extension-mdx-md@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/micromark-extension-mdx-md/-/micromark-extension-mdx-md-1.0.1.tgz#595d4b2f692b134080dca92c12272ab5b74c6d1a"
+ integrity sha512-7MSuj2S7xjOQXAjjkbjBsHkMtb+mDGVW6uI2dBL9snOBCbZmoNgDAeZ0nSn9j3T42UE/g2xVNMn18PJxZvkBEA==
+ dependencies:
+ micromark-util-types "^1.0.0"
+
+micromark-extension-mdxjs-esm@^1.0.0:
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-1.0.5.tgz#e4f8be9c14c324a80833d8d3a227419e2b25dec1"
+ integrity sha512-xNRBw4aoURcyz/S69B19WnZAkWJMxHMT5hE36GtDAyhoyn/8TuAeqjFJQlwk+MKQsUD7b3l7kFX+vlfVWgcX1w==
+ dependencies:
+ "@types/estree" "^1.0.0"
+ micromark-core-commonmark "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-events-to-acorn "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ unist-util-position-from-estree "^1.1.0"
+ uvu "^0.5.0"
+ vfile-message "^3.0.0"
+
+micromark-extension-mdxjs@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs/-/micromark-extension-mdxjs-1.0.1.tgz#f78d4671678d16395efeda85170c520ee795ded8"
+ integrity sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q==
+ dependencies:
+ acorn "^8.0.0"
+ acorn-jsx "^5.0.0"
+ micromark-extension-mdx-expression "^1.0.0"
+ micromark-extension-mdx-jsx "^1.0.0"
+ micromark-extension-mdx-md "^1.0.0"
+ micromark-extension-mdxjs-esm "^1.0.0"
+ micromark-util-combine-extensions "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-factory-destination@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f"
+ integrity sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==
+ dependencies:
+ micromark-util-character "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-factory-label@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68"
+ integrity sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==
+ dependencies:
+ micromark-util-character "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ uvu "^0.5.0"
+
+micromark-factory-mdx-expression@^1.0.0:
+ version "1.0.9"
+ resolved "https://registry.yarnpkg.com/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-1.0.9.tgz#57ba4571b69a867a1530f34741011c71c73a4976"
+ integrity sha512-jGIWzSmNfdnkJq05c7b0+Wv0Kfz3NJ3N4cBjnbO4zjXIlxJr+f8lk+5ZmwFvqdAbUy2q6B5rCY//g0QAAaXDWA==
+ dependencies:
+ "@types/estree" "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-events-to-acorn "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ unist-util-position-from-estree "^1.0.0"
+ uvu "^0.5.0"
+ vfile-message "^3.0.0"
+
+micromark-factory-space@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf"
+ integrity sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==
+ dependencies:
+ micromark-util-character "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-factory-title@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1"
+ integrity sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==
+ dependencies:
+ micromark-factory-space "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-factory-whitespace@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705"
+ integrity sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==
+ dependencies:
+ micromark-factory-space "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-util-character@^1.0.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc"
+ integrity sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==
+ dependencies:
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-util-chunked@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b"
+ integrity sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==
+ dependencies:
+ micromark-util-symbol "^1.0.0"
+
+micromark-util-classify-character@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d"
+ integrity sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==
+ dependencies:
+ micromark-util-character "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-util-combine-extensions@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84"
+ integrity sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==
+ dependencies:
+ micromark-util-chunked "^1.0.0"
+ micromark-util-types "^1.0.0"
+
+micromark-util-decode-numeric-character-reference@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6"
+ integrity sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==
+ dependencies:
+ micromark-util-symbol "^1.0.0"
+
+micromark-util-decode-string@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c"
+ integrity sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==
+ dependencies:
+ decode-named-character-reference "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-decode-numeric-character-reference "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+
+micromark-util-encode@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5"
+ integrity sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==
+
+micromark-util-events-to-acorn@^1.0.0:
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-1.2.3.tgz#a4ab157f57a380e646670e49ddee97a72b58b557"
+ integrity sha512-ij4X7Wuc4fED6UoLWkmo0xJQhsktfNh1J0m8g4PbIMPlx+ek/4YdW5mvbye8z/aZvAPUoxgXHrwVlXAPKMRp1w==
+ dependencies:
+ "@types/acorn" "^4.0.0"
+ "@types/estree" "^1.0.0"
+ "@types/unist" "^2.0.0"
+ estree-util-visit "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ uvu "^0.5.0"
+ vfile-message "^3.0.0"
+
+micromark-util-html-tag-name@^1.0.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588"
+ integrity sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==
+
+micromark-util-normalize-identifier@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7"
+ integrity sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==
+ dependencies:
+ micromark-util-symbol "^1.0.0"
+
+micromark-util-resolve-all@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188"
+ integrity sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==
+ dependencies:
+ micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d"
+ integrity sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==
+ dependencies:
+ micromark-util-character "^1.0.0"
+ micromark-util-encode "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+
+micromark-util-subtokenize@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1"
+ integrity sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==
+ dependencies:
+ micromark-util-chunked "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.0"
+ uvu "^0.5.0"
+
+micromark-util-symbol@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142"
+ integrity sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.1.0.tgz#e6676a8cae0bb86a2171c498167971886cb7e283"
+ integrity sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==
+
+micromark@^3.0.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9"
+ integrity sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==
+ dependencies:
+ "@types/debug" "^4.0.0"
+ debug "^4.0.0"
+ decode-named-character-reference "^1.0.0"
+ micromark-core-commonmark "^1.0.1"
+ micromark-factory-space "^1.0.0"
+ micromark-util-character "^1.0.0"
+ micromark-util-chunked "^1.0.0"
+ micromark-util-combine-extensions "^1.0.0"
+ micromark-util-decode-numeric-character-reference "^1.0.0"
+ micromark-util-encode "^1.0.0"
+ micromark-util-normalize-identifier "^1.0.0"
+ micromark-util-resolve-all "^1.0.0"
+ micromark-util-sanitize-uri "^1.0.0"
+ micromark-util-subtokenize "^1.0.0"
+ micromark-util-symbol "^1.0.0"
+ micromark-util-types "^1.0.1"
+ uvu "^0.5.0"
+
+minimatch@^5.0.1:
+ version "5.1.6"
+ resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+ integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+ dependencies:
+ brace-expansion "^2.0.1"
+
+minimatch@^9.0.0, minimatch@^9.0.4:
+ version "9.0.5"
+ resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+ integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+ dependencies:
+ brace-expansion "^2.0.1"
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+ version "7.1.2"
+ resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+ integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+mri@^1.1.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+ integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+ms@^2.1.3:
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+ integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nopt@^7.0.0:
+ version "7.2.1"
+ resolved "https://registry.yarnpkg.com/nopt/-/nopt-7.2.1.tgz#1cac0eab9b8e97c9093338446eddd40b2c8ca1e7"
+ integrity sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==
+ dependencies:
+ abbrev "^2.0.0"
+
+npm-normalize-package-bin@^3.0.0:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz#25447e32a9a7de1f51362c61a559233b89947832"
+ integrity sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==
+
+once@^1.3.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+ integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+ dependencies:
+ wrappy "1"
+
+package-json-from-dist@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+ integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+parse-entities@^4.0.0:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.2.tgz#61d46f5ed28e4ee62e9ddc43d6b010188443f159"
+ integrity sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==
+ dependencies:
+ "@types/unist" "^2.0.0"
+ character-entities-legacy "^3.0.0"
+ character-reference-invalid "^2.0.0"
+ decode-named-character-reference "^1.0.0"
+ is-alphanumerical "^2.0.0"
+ is-decimal "^2.0.0"
+ is-hexadecimal "^2.0.0"
+
+parse-json@^6.0.0:
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-6.0.2.tgz#6bf79c201351cc12d5d66eba48d5a097c13dc200"
+ integrity sha512-SA5aMiaIjXkAiBrW/yPgLgQAQg42f7K3ACO+2l/zOvtQBwX58DMUsFJXelW2fx3yMBmWOVkR6j1MGsdSbCA4UA==
+ dependencies:
+ "@babel/code-frame" "^7.16.0"
+ error-ex "^1.3.2"
+ json-parse-even-better-errors "^2.3.1"
+ lines-and-columns "^2.0.2"
+
+path-key@^3.1.0:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+ integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-scurry@^1.11.1:
+ version "1.11.1"
+ resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+ integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+ dependencies:
+ lru-cache "^10.2.0"
+ minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+picocolors@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+ integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+proc-log@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-3.0.0.tgz#fb05ef83ccd64fd7b20bbe9c8c1070fc08338dd8"
+ integrity sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==
+
+read-package-json-fast@^3.0.0, read-package-json-fast@^3.0.2:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz#394908a9725dc7a5f14e70c8e7556dff1d2b1049"
+ integrity sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==
+ dependencies:
+ json-parse-even-better-errors "^3.0.0"
+ npm-normalize-package-bin "^3.0.0"
+
+readable-stream@^3.0.2:
+ version "3.6.2"
+ resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+ integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+ dependencies:
+ inherits "^2.0.3"
+ string_decoder "^1.1.1"
+ util-deprecate "^1.0.1"
+
+remark-mdx@^2.3.0:
+ version "2.3.0"
+ resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-2.3.0.tgz#efe678025a8c2726681bde8bf111af4a93943db4"
+ integrity sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==
+ dependencies:
+ mdast-util-mdx "^2.0.0"
+ micromark-extension-mdxjs "^1.0.0"
+
+remark-parse@^10.0.2:
+ version "10.0.2"
+ resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262"
+ integrity sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==
+ dependencies:
+ "@types/mdast" "^3.0.0"
+ mdast-util-from-markdown "^1.0.0"
+ unified "^10.0.0"
+
+remark-stringify@^10.0.3:
+ version "10.0.3"
+ resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-10.0.3.tgz#83b43f2445c4ffbb35b606f967d121b2b6d69717"
+ integrity sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==
+ dependencies:
+ "@types/mdast" "^3.0.0"
+ mdast-util-to-markdown "^1.0.0"
+ unified "^10.0.0"
+
+sade@^1.7.3:
+ version "1.8.1"
+ resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+ integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+ dependencies:
+ mri "^1.1.0"
+
+safe-buffer@~5.2.0:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+ integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+semver@^7.3.5:
+ version "7.7.2"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
+ integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
+
+shebang-command@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+ integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+ dependencies:
+ shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+ integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^4.0.1:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+ integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+ version "4.2.3"
+ resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+ integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+ dependencies:
+ emoji-regex "^8.0.0"
+ is-fullwidth-code-point "^3.0.0"
+ strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
+ version "4.2.3"
+ resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+ integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+ dependencies:
+ emoji-regex "^8.0.0"
+ is-fullwidth-code-point "^3.0.0"
+ strip-ansi "^6.0.1"
+
+string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+ integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+ dependencies:
+ eastasianwidth "^0.2.0"
+ emoji-regex "^9.2.2"
+ strip-ansi "^7.0.1"
+
+string_decoder@^1.1.1:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+ integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+ dependencies:
+ safe-buffer "~5.2.0"
+
+stringify-entities@^4.0.0:
+ version "4.0.4"
+ resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.4.tgz#b3b79ef5f277cc4ac73caeb0236c5ba939b3a4f3"
+ integrity sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==
+ dependencies:
+ character-entities-html4 "^2.0.0"
+ character-entities-legacy "^3.0.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+ integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+ dependencies:
+ ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+ integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+ dependencies:
+ ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+ version "7.1.2"
+ resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.2.tgz#132875abde678c7ea8d691533f2e7e22bb744dba"
+ integrity sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
+ dependencies:
+ ansi-regex "^6.0.1"
+
+supports-color@^9.0.0:
+ version "9.4.0"
+ resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.4.0.tgz#17bfcf686288f531db3dea3215510621ccb55954"
+ integrity sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==
+
+synckit@^0.9.0:
+ version "0.9.3"
+ resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.3.tgz#1cfd60d9e61f931e07fb7f56f474b5eb31b826a7"
+ integrity sha512-JJoOEKTfL1urb1mDoEblhD9NhEbWmq9jHEMEnxoC4ujUaZ4itA8vKgwkFAyNClgxplLi9tsUKX+EduK0p/l7sg==
+ dependencies:
+ "@pkgr/core" "^0.1.0"
+ tslib "^2.6.2"
+
+to-vfile@^7.0.0:
+ version "7.2.4"
+ resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-7.2.4.tgz#b97ecfcc15905ffe020bc975879053928b671378"
+ integrity sha512-2eQ+rJ2qGbyw3senPI0qjuM7aut8IYXK6AEoOWb+fJx/mQYzviTckm1wDjq91QYHAPBTYzmdJXxMFA6Mk14mdw==
+ dependencies:
+ is-buffer "^2.0.0"
+ vfile "^5.1.0"
+
+trough@^2.0.0:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f"
+ integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==
+
+tslib@^2.6.1, tslib@^2.6.2:
+ version "2.8.1"
+ resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+ integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+typedarray@^0.0.6:
+ version "0.0.6"
+ resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+ integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
+undici-types@~5.26.4:
+ version "5.26.5"
+ resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+ integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
+undici-types@~7.12.0:
+ version "7.12.0"
+ resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-7.12.0.tgz#15c5c7475c2a3ba30659529f5cdb4674b622fafb"
+ integrity sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==
+
+unified-engine@^10.1.0:
+ version "10.1.0"
+ resolved "https://registry.yarnpkg.com/unified-engine/-/unified-engine-10.1.0.tgz#6899f00d1f53ee9af94f7abd0ec21242aae3f56c"
+ integrity sha512-5+JDIs4hqKfHnJcVCxTid1yBoI/++FfF/1PFdSMpaftZZZY+qg2JFruRbf7PaIwa9KgLotXQV3gSjtY0IdcFGQ==
+ dependencies:
+ "@types/concat-stream" "^2.0.0"
+ "@types/debug" "^4.0.0"
+ "@types/is-empty" "^1.0.0"
+ "@types/node" "^18.0.0"
+ "@types/unist" "^2.0.0"
+ concat-stream "^2.0.0"
+ debug "^4.0.0"
+ fault "^2.0.0"
+ glob "^8.0.0"
+ ignore "^5.0.0"
+ is-buffer "^2.0.0"
+ is-empty "^1.0.0"
+ is-plain-obj "^4.0.0"
+ load-plugin "^5.0.0"
+ parse-json "^6.0.0"
+ to-vfile "^7.0.0"
+ trough "^2.0.0"
+ unist-util-inspect "^7.0.0"
+ vfile-message "^3.0.0"
+ vfile-reporter "^7.0.0"
+ vfile-statistics "^2.0.0"
+ yaml "^2.0.0"
+
+unified@^10.0.0, unified@^10.1.2:
+ version "10.1.2"
+ resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
+ integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
+ dependencies:
+ "@types/unist" "^2.0.0"
+ bail "^2.0.0"
+ extend "^3.0.0"
+ is-buffer "^2.0.0"
+ is-plain-obj "^4.0.0"
+ trough "^2.0.0"
+ vfile "^5.0.0"
+
+unist-util-inspect@^7.0.0:
+ version "7.0.2"
+ resolved "https://registry.yarnpkg.com/unist-util-inspect/-/unist-util-inspect-7.0.2.tgz#858e4f02ee4053f7c6ada8bc81662901a0ee1893"
+ integrity sha512-Op0XnmHUl6C2zo/yJCwhXQSm/SmW22eDZdWP2qdf4WpGrgO1ZxFodq+5zFyeRGasFjJotAnLgfuD1jkcKqiH1Q==
+ dependencies:
+ "@types/unist" "^2.0.0"
+
+unist-util-is@^5.0.0:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
+ integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
+ dependencies:
+ "@types/unist" "^2.0.0"
+
+unist-util-position-from-estree@^1.0.0, unist-util-position-from-estree@^1.1.0:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/unist-util-position-from-estree/-/unist-util-position-from-estree-1.1.2.tgz#8ac2480027229de76512079e377afbcabcfcce22"
+ integrity sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==
+ dependencies:
+ "@types/unist" "^2.0.0"
+
+unist-util-remove-position@^4.0.0:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-4.0.2.tgz#a89be6ea72e23b1a402350832b02a91f6a9afe51"
+ integrity sha512-TkBb0HABNmxzAcfLf4qsIbFbaPDvMO6wa3b3j4VcEzFVaw1LBKwnW4/sRJ/atSLSzoIg41JWEdnE7N6DIhGDGQ==
+ dependencies:
+ "@types/unist" "^2.0.0"
+ unist-util-visit "^4.0.0"
+
+unist-util-stringify-position@^3.0.0:
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d"
+ integrity sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==
+ dependencies:
+ "@types/unist" "^2.0.0"
+
+unist-util-visit-parents@^5.1.1:
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
+ integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
+ dependencies:
+ "@types/unist" "^2.0.0"
+ unist-util-is "^5.0.0"
+
+unist-util-visit@^4.0.0, unist-util-visit@^4.1.2:
+ version "4.1.2"
+ resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
+ integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
+ dependencies:
+ "@types/unist" "^2.0.0"
+ unist-util-is "^5.0.0"
+ unist-util-visit-parents "^5.1.1"
+
+util-deprecate@^1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+ integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+uvu@^0.5.0, uvu@^0.5.6:
+ version "0.5.6"
+ resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+ integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+ dependencies:
+ dequal "^2.0.0"
+ diff "^5.0.0"
+ kleur "^4.0.3"
+ sade "^1.7.3"
+
+vfile-message@^3.0.0:
+ version "3.1.4"
+ resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
+ integrity sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==
+ dependencies:
+ "@types/unist" "^2.0.0"
+ unist-util-stringify-position "^3.0.0"
+
+vfile-reporter@^7.0.0:
+ version "7.0.5"
+ resolved "https://registry.yarnpkg.com/vfile-reporter/-/vfile-reporter-7.0.5.tgz#a0cbf3922c08ad428d6db1161ec64a53b5725785"
+ integrity sha512-NdWWXkv6gcd7AZMvDomlQbK3MqFWL1RlGzMn++/O2TI+68+nqxCPTvLugdOtfSzXmjh+xUyhp07HhlrbJjT+mw==
+ dependencies:
+ "@types/supports-color" "^8.0.0"
+ string-width "^5.0.0"
+ supports-color "^9.0.0"
+ unist-util-stringify-position "^3.0.0"
+ vfile "^5.0.0"
+ vfile-message "^3.0.0"
+ vfile-sort "^3.0.0"
+ vfile-statistics "^2.0.0"
+
+vfile-sort@^3.0.0:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/vfile-sort/-/vfile-sort-3.0.1.tgz#4b06ec63e2946749b0bb514e736554cd75e441a2"
+ integrity sha512-1os1733XY6y0D5x0ugqSeaVJm9lYgj0j5qdcZQFyxlZOSy1jYarL77lLyb5gK4Wqr1d5OxmuyflSO3zKyFnTFw==
+ dependencies:
+ vfile "^5.0.0"
+ vfile-message "^3.0.0"
+
+vfile-statistics@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/vfile-statistics/-/vfile-statistics-2.0.1.tgz#2e1adae1cd3a45c1ed4f2a24bd103c3d71e4bce3"
+ integrity sha512-W6dkECZmP32EG/l+dp2jCLdYzmnDBIw6jwiLZSER81oR5AHRcVqL+k3Z+pfH1R73le6ayDkJRMk0sutj1bMVeg==
+ dependencies:
+ vfile "^5.0.0"
+ vfile-message "^3.0.0"
+
+vfile@^5.0.0, vfile@^5.1.0, vfile@^5.3.7:
+ version "5.3.7"
+ resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7"
+ integrity sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==
+ dependencies:
+ "@types/unist" "^2.0.0"
+ is-buffer "^2.0.0"
+ unist-util-stringify-position "^3.0.0"
+ vfile-message "^3.0.0"
+
+walk-up-path@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/walk-up-path/-/walk-up-path-3.0.1.tgz#c8d78d5375b4966c717eb17ada73dbd41490e886"
+ integrity sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==
+
+which@^2.0.1:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+ integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+ dependencies:
+ isexe "^2.0.0"
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+ integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+ dependencies:
+ ansi-styles "^4.0.0"
+ string-width "^4.1.0"
+ strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+ version "8.1.0"
+ resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+ integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+ dependencies:
+ ansi-styles "^6.1.0"
+ string-width "^5.0.1"
+ strip-ansi "^7.0.1"
+
+wrappy@1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+ integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+yaml@^2.0.0:
+ version "2.8.1"
+ resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.8.1.tgz#1870aa02b631f7e8328b93f8bc574fac5d6c4d79"
+ integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==
+
+zwitch@^2.0.0:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
+ integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==
diff --git a/next.config.js b/next.config.js
index 861792c8e..5a5755307 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/package.json b/package.json
index 07e6136e6..0efe373e2 100644
--- a/package.json
+++ b/package.json
@@ -7,30 +7,32 @@
"analyze": "ANALYZE=true next build",
"dev": "next-remote-watch ./src/content",
"build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs",
- "lint": "next lint",
- "lint:fix": "next lint --fix",
+ "lint": "next lint && eslint \"src/content/**/*.md\"",
+ "lint:fix": "next lint --fix && eslint \"src/content/**/*.md\" --fix",
"format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
"nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",
"prettier": "yarn format:source",
"prettier:diff": "yarn nit:source",
"lint-heading-ids": "node scripts/headingIdLinter.js",
"fix-headings": "node scripts/headingIdLinter.js --fix",
- "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
+ "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks",
"tsc": "tsc --noEmit",
"start": "next start",
- "postinstall": "is-ci || husky install .husky",
+ "postinstall": "yarn --cwd eslint-local-rules install && is-ci || husky install .husky",
"check-all": "npm-run-all prettier lint:fix tsc rss",
- "rss": "node scripts/generateRss.js"
+ "rss": "node scripts/generateRss.js",
+ "deadlinks": "node scripts/deadLinkChecker.js",
+ "copyright": "node scripts/copyright.js",
+ "test:eslint-local-rules": "yarn --cwd eslint-local-rules test"
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
- "@docsearch/css": "^3.6.1",
- "@docsearch/react": "^3.6.1",
+ "@docsearch/css": "^3.8.3",
+ "@docsearch/react": "^3.8.3",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
"classnames": "^2.2.6",
- "date-fns": "^2.16.1",
"debounce": "^1.2.1",
"github-slugger": "^1.3.0",
"next": "15.1.0",
@@ -61,13 +63,15 @@
"asyncro": "^3.0.0",
"autoprefixer": "^10.4.2",
"babel-eslint": "10.x",
- "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+ "babel-plugin-react-compiler": "^19.1.0-rc.3",
+ "chalk": "4.1.2",
"eslint": "7.x",
"eslint-config-next": "12.0.3",
"eslint-config-react-app": "^5.2.1",
"eslint-plugin-flowtype": "4.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
+ "eslint-plugin-local-rules": "link:eslint-local-rules",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
"eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
diff --git a/plugins/markdownToHtml.js b/plugins/markdownToHtml.js
index 0d5fe7afb..e9b0c3ec3 100644
--- a/plugins/markdownToHtml.js
+++ b/plugins/markdownToHtml.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
const remark = require('remark');
const externalLinks = require('remark-external-links'); // Add _target and rel to external links
const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n
diff --git a/plugins/remark-header-custom-ids.js b/plugins/remark-header-custom-ids.js
index 356de1bf1..c5430ce8a 100644
--- a/plugins/remark-header-custom-ids.js
+++ b/plugins/remark-header-custom-ids.js
@@ -1,5 +1,8 @@
/**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
*/
/*!
diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js
index 4694ff674..f56f14b61 100644
--- a/plugins/remark-smartypants.js
+++ b/plugins/remark-smartypants.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*!
* Based on 'silvenon/remark-smartypants'
* https://github.com/silvenon/remark-smartypants/pull/80
diff --git a/postcss.config.js b/postcss.config.js
index 427294522..6b55f9277 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -17,4 +24,4 @@ module.exports = {
},
},
},
-}
+};
diff --git a/public/fonts/Source-Code-Pro-Bold.woff2 b/public/fonts/Source-Code-Pro-Bold.woff2
new file mode 100644
index 000000000..220bd5d96
Binary files /dev/null and b/public/fonts/Source-Code-Pro-Bold.woff2 differ
diff --git a/public/fonts/Source-Code-Pro-Regular.woff2 b/public/fonts/Source-Code-Pro-Regular.woff2
index 655cd9e81..fd665c465 100644
Binary files a/public/fonts/Source-Code-Pro-Regular.woff2 and b/public/fonts/Source-Code-Pro-Regular.woff2 differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks.png b/public/images/blog/react-labs-april-2025/perf_tracks.png
new file mode 100644
index 000000000..835a247cf
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks.png differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks.webp b/public/images/blog/react-labs-april-2025/perf_tracks.webp
new file mode 100644
index 000000000..88a7eb792
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks.webp differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks_dark.png b/public/images/blog/react-labs-april-2025/perf_tracks_dark.png
new file mode 100644
index 000000000..07513fe90
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks_dark.png differ
diff --git a/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp b/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp
new file mode 100644
index 000000000..1a0521bf8
Binary files /dev/null and b/public/images/blog/react-labs-april-2025/perf_tracks_dark.webp differ
diff --git a/public/images/team/andrey-lunyov.jpg b/public/images/team/andrey-lunyov.jpg
deleted file mode 100644
index aeaaec06a..000000000
Binary files a/public/images/team/andrey-lunyov.jpg and /dev/null differ
diff --git a/public/images/team/hendrik.jpg b/public/images/team/hendrik.jpg
new file mode 100644
index 000000000..b39ea5be2
Binary files /dev/null and b/public/images/team/hendrik.jpg differ
diff --git a/public/images/team/jordan.jpg b/public/images/team/jordan.jpg
new file mode 100644
index 000000000..d8874a29f
Binary files /dev/null and b/public/images/team/jordan.jpg differ
diff --git a/public/images/team/kathryn-middleton.jpg b/public/images/team/kathryn-middleton.jpg
deleted file mode 100644
index 904c3b134..000000000
Binary files a/public/images/team/kathryn-middleton.jpg and /dev/null differ
diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg
index 26d46bd2f..a8615aa00 100644
Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ
diff --git a/public/images/team/luna-wei.jpg b/public/images/team/luna-wei.jpg
deleted file mode 100644
index cdc4a2b6a..000000000
Binary files a/public/images/team/luna-wei.jpg and /dev/null differ
diff --git a/public/images/team/mike.jpg b/public/images/team/mike.jpg
new file mode 100644
index 000000000..39fe23fea
Binary files /dev/null and b/public/images/team/mike.jpg differ
diff --git a/public/images/team/noahlemen.jpg b/public/images/team/noahlemen.jpg
deleted file mode 100644
index e3f788d89..000000000
Binary files a/public/images/team/noahlemen.jpg and /dev/null differ
diff --git a/public/images/team/pieter.jpg b/public/images/team/pieter.jpg
new file mode 100644
index 000000000..d098e5abe
Binary files /dev/null and b/public/images/team/pieter.jpg differ
diff --git a/public/images/team/sam.jpg b/public/images/team/sam.jpg
deleted file mode 100644
index f73474b91..000000000
Binary files a/public/images/team/sam.jpg and /dev/null differ
diff --git a/public/images/team/sathya.jpg b/public/images/team/sathya.jpg
deleted file mode 100644
index 0f087f4a3..000000000
Binary files a/public/images/team/sathya.jpg and /dev/null differ
diff --git a/public/images/team/tianyu.jpg b/public/images/team/tianyu.jpg
deleted file mode 100644
index aeb6ed9fa..000000000
Binary files a/public/images/team/tianyu.jpg and /dev/null differ
diff --git a/public/images/tutorial/react-starter-code-codesandbox.png b/public/images/tutorial/react-starter-code-codesandbox.png
old mode 100644
new mode 100755
index d65f161bc..b01e18297
Binary files a/public/images/tutorial/react-starter-code-codesandbox.png and b/public/images/tutorial/react-starter-code-codesandbox.png differ
diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js
index 006c79c8a..56133855a 100644
--- a/public/js/jsfiddle-integration-babel.js
+++ b/public/js/jsfiddle-integration-babel.js
@@ -1,15 +1,20 @@
/**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
*/
// Do not delete or move this file.
// Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+ alert(
+ 'Bad JSFiddle configuration, please fork the original React JSFiddle'
+ );
}
tag.setAttribute('type', 'text/babel');
tag.textContent = tag.textContent.replace(/^\/\/ {
+ try {
+ const result = processFile(file);
+ if (result != null) {
+ updatedFiles.set(file, result);
+ }
+ } catch (e) {
+ console.error(e);
+ hasErrors = true;
+ }
+});
+if (hasErrors) {
+ console.error('Update failed');
+ process.exit(1);
+} else {
+ for (const [file, source] of updatedFiles) {
+ fs.writeFileSync(file, source, 'utf8');
+ }
+ console.log('Update complete');
+}
+
+function processFile(file) {
+ if (fs.lstatSync(file).isDirectory()) {
+ return;
+ }
+ let source = fs.readFileSync(file, 'utf8');
+ let shebang = '';
+
+ if (source.startsWith('#!')) {
+ const newlineIndex = source.indexOf('\n');
+ if (newlineIndex === -1) {
+ shebang = `${source}\n`;
+ source = '';
+ } else {
+ shebang = source.slice(0, newlineIndex + 1);
+ source = source.slice(newlineIndex + 1);
+ }
+ }
+
+ if (source.indexOf(META_COPYRIGHT_COMMENT_BLOCK) === 0) {
+ return null;
+ }
+ if (/^\/\*\*/.test(source)) {
+ source = source.replace(/\/\*\*[^\/]+\/\s+/, META_COPYRIGHT_COMMENT_BLOCK);
+ } else {
+ source = `${META_COPYRIGHT_COMMENT_BLOCK}${source}`;
+ }
+
+ if (shebang) {
+ return `${shebang}${source}`;
+ }
+ return source;
+}
diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js
new file mode 100644
index 000000000..46a21cdc9
--- /dev/null
+++ b/scripts/deadLinkChecker.js
@@ -0,0 +1,391 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const globby = require('globby');
+const chalk = require('chalk');
+
+const CONTENT_DIR = path.join(__dirname, '../src/content');
+const PUBLIC_DIR = path.join(__dirname, '../public');
+const fileCache = new Map();
+const anchorMap = new Map(); // Map>
+const contributorMap = new Map(); // Map
+const redirectMap = new Map(); // Map
+let errorCodes = new Set();
+
+async function readFileWithCache(filePath) {
+ if (!fileCache.has(filePath)) {
+ try {
+ const content = await fs.promises.readFile(filePath, 'utf8');
+ fileCache.set(filePath, content);
+ } catch (error) {
+ throw new Error(`Failed to read file ${filePath}: ${error.message}`);
+ }
+ }
+ return fileCache.get(filePath);
+}
+
+async function fileExists(filePath) {
+ try {
+ await fs.promises.access(filePath, fs.constants.R_OK);
+ return true;
+ } catch {
+ return false;
+ }
+}
+
+function getMarkdownFiles() {
+ // Convert Windows paths to POSIX for globby compatibility
+ const baseDir = CONTENT_DIR.replace(/\\/g, '/');
+ const patterns = [
+ path.posix.join(baseDir, '**/*.md'),
+ path.posix.join(baseDir, '**/*.mdx'),
+ ];
+ return globby.sync(patterns);
+}
+
+function extractAnchorsFromContent(content) {
+ const anchors = new Set();
+
+ // MDX-style heading IDs: {/*anchor-id*/}
+ const mdxPattern = /\{\/\*([a-zA-Z0-9-_]+)\*\/\}/g;
+ let match;
+ while ((match = mdxPattern.exec(content)) !== null) {
+ anchors.add(match[1].toLowerCase());
+ }
+
+ // HTML id attributes
+ const htmlIdPattern = /\sid=["']([a-zA-Z0-9-_]+)["']/g;
+ while ((match = htmlIdPattern.exec(content)) !== null) {
+ anchors.add(match[1].toLowerCase());
+ }
+
+ // Markdown heading with explicit ID: ## Heading {#anchor-id}
+ const markdownHeadingPattern = /^#+\s+.*\{#([a-zA-Z0-9-_]+)\}/gm;
+ while ((match = markdownHeadingPattern.exec(content)) !== null) {
+ anchors.add(match[1].toLowerCase());
+ }
+
+ return anchors;
+}
+
+async function buildAnchorMap(files) {
+ for (const filePath of files) {
+ const content = await readFileWithCache(filePath);
+ const anchors = extractAnchorsFromContent(content);
+ if (anchors.size > 0) {
+ anchorMap.set(filePath, anchors);
+ }
+ }
+}
+
+function extractLinksFromContent(content) {
+ const linkPattern = /\[([^\]]*)\]\(([^)]+)\)/g;
+ const links = [];
+ let match;
+
+ while ((match = linkPattern.exec(content)) !== null) {
+ const [, linkText, linkUrl] = match;
+ if (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) {
+ const lines = content.substring(0, match.index).split('\n');
+ const line = lines.length;
+ const lastLineStart =
+ lines.length > 1 ? content.lastIndexOf('\n', match.index - 1) + 1 : 0;
+ const column = match.index - lastLineStart + 1;
+
+ links.push({
+ text: linkText,
+ url: linkUrl,
+ line,
+ column,
+ });
+ }
+ }
+
+ return links;
+}
+
+async function findTargetFile(urlPath) {
+ // Check if it's an image or static asset that might be in the public directory
+ const imageExtensions = [
+ '.png',
+ '.jpg',
+ '.jpeg',
+ '.gif',
+ '.svg',
+ '.ico',
+ '.webp',
+ ];
+ const hasImageExtension = imageExtensions.some((ext) =>
+ urlPath.toLowerCase().endsWith(ext)
+ );
+
+ if (hasImageExtension || urlPath.includes('.')) {
+ // Check in public directory (with and without leading slash)
+ const publicPaths = [
+ path.join(PUBLIC_DIR, urlPath),
+ path.join(PUBLIC_DIR, urlPath.substring(1)),
+ ];
+
+ for (const p of publicPaths) {
+ if (await fileExists(p)) {
+ return p;
+ }
+ }
+ }
+
+ const possiblePaths = [
+ path.join(CONTENT_DIR, urlPath + '.md'),
+ path.join(CONTENT_DIR, urlPath + '.mdx'),
+ path.join(CONTENT_DIR, urlPath, 'index.md'),
+ path.join(CONTENT_DIR, urlPath, 'index.mdx'),
+ // Without leading slash
+ path.join(CONTENT_DIR, urlPath.substring(1) + '.md'),
+ path.join(CONTENT_DIR, urlPath.substring(1) + '.mdx'),
+ path.join(CONTENT_DIR, urlPath.substring(1), 'index.md'),
+ path.join(CONTENT_DIR, urlPath.substring(1), 'index.mdx'),
+ ];
+
+ for (const p of possiblePaths) {
+ if (await fileExists(p)) {
+ return p;
+ }
+ }
+ return null;
+}
+
+async function validateLink(link) {
+ const urlAnchorPattern = /#([a-zA-Z0-9-_]+)$/;
+ const anchorMatch = link.url.match(urlAnchorPattern);
+ const urlWithoutAnchor = link.url.replace(urlAnchorPattern, '');
+
+ if (urlWithoutAnchor === '/') {
+ return {valid: true};
+ }
+
+ // Check for redirects
+ if (redirectMap.has(urlWithoutAnchor)) {
+ const redirectDestination = redirectMap.get(urlWithoutAnchor);
+ if (
+ redirectDestination.startsWith('http://') ||
+ redirectDestination.startsWith('https://')
+ ) {
+ return {valid: true};
+ }
+ const redirectedLink = {
+ ...link,
+ url: redirectDestination + (anchorMatch ? anchorMatch[0] : ''),
+ };
+ return validateLink(redirectedLink);
+ }
+
+ // Check if it's an error code link
+ const errorCodeMatch = urlWithoutAnchor.match(/^\/errors\/(\d+)$/);
+ if (errorCodeMatch) {
+ const code = errorCodeMatch[1];
+ if (!errorCodes.has(code)) {
+ return {
+ valid: false,
+ reason: `Error code ${code} not found in React error codes`,
+ };
+ }
+ return {valid: true};
+ }
+
+ // Check if it's a contributor link on the team or acknowledgements page
+ if (
+ anchorMatch &&
+ (urlWithoutAnchor === '/community/team' ||
+ urlWithoutAnchor === '/community/acknowledgements')
+ ) {
+ const anchorId = anchorMatch[1].toLowerCase();
+ if (contributorMap.has(anchorId)) {
+ const correctUrl = contributorMap.get(anchorId);
+ if (correctUrl !== link.url) {
+ return {
+ valid: false,
+ reason: `Contributor link should be updated to: ${correctUrl}`,
+ };
+ }
+ return {valid: true};
+ } else {
+ return {
+ valid: false,
+ reason: `Contributor link not found`,
+ };
+ }
+ }
+
+ const targetFile = await findTargetFile(urlWithoutAnchor);
+
+ if (!targetFile) {
+ return {
+ valid: false,
+ reason: `Target file not found for: ${urlWithoutAnchor}`,
+ };
+ }
+
+ // Only check anchors for content files, not static assets
+ if (anchorMatch && targetFile.startsWith(CONTENT_DIR)) {
+ const anchorId = anchorMatch[1].toLowerCase();
+
+ // TODO handle more special cases. These are usually from custom MDX components that include
+ // a Heading from src/components/MDX/Heading.tsx which automatically injects an anchor tag.
+ switch (anchorId) {
+ case 'challenges':
+ case 'recap': {
+ return {valid: true};
+ }
+ }
+
+ const fileAnchors = anchorMap.get(targetFile);
+
+ if (!fileAnchors || !fileAnchors.has(anchorId)) {
+ return {
+ valid: false,
+ reason: `Anchor #${anchorMatch[1]} not found in ${path.relative(
+ CONTENT_DIR,
+ targetFile
+ )}`,
+ };
+ }
+ }
+
+ return {valid: true};
+}
+
+async function processFile(filePath) {
+ const content = await readFileWithCache(filePath);
+ const links = extractLinksFromContent(content);
+ const deadLinks = [];
+
+ for (const link of links) {
+ const result = await validateLink(link);
+ if (!result.valid) {
+ deadLinks.push({
+ file: path.relative(process.cwd(), filePath),
+ line: link.line,
+ column: link.column,
+ text: link.text,
+ url: link.url,
+ reason: result.reason,
+ });
+ }
+ }
+
+ return {deadLinks, totalLinks: links.length};
+}
+
+async function buildContributorMap() {
+ const teamFile = path.join(CONTENT_DIR, 'community/team.md');
+ const teamContent = await readFileWithCache(teamFile);
+
+ const teamMemberPattern = /]*permalink=["']([^"']+)["']/g;
+ let match;
+
+ while ((match = teamMemberPattern.exec(teamContent)) !== null) {
+ const permalink = match[1];
+ contributorMap.set(permalink, `/community/team#${permalink}`);
+ }
+
+ const ackFile = path.join(CONTENT_DIR, 'community/acknowledgements.md');
+ const ackContent = await readFileWithCache(ackFile);
+ const contributorPattern = /\*\s*\[([^\]]+)\]\(([^)]+)\)/g;
+
+ while ((match = contributorPattern.exec(ackContent)) !== null) {
+ const name = match[1];
+ const url = match[2];
+ const hyphenatedName = name.toLowerCase().replace(/\s+/g, '-');
+ if (!contributorMap.has(hyphenatedName)) {
+ contributorMap.set(hyphenatedName, url);
+ }
+ }
+}
+
+async function fetchErrorCodes() {
+ try {
+ const response = await fetch(
+ 'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+ );
+ if (!response.ok) {
+ throw new Error(`Failed to fetch error codes: ${response.status}`);
+ }
+ const codes = await response.json();
+ errorCodes = new Set(Object.keys(codes));
+ console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));
+ } catch (error) {
+ throw new Error(`Failed to fetch error codes: ${error.message}`);
+ }
+}
+
+async function buildRedirectsMap() {
+ try {
+ const vercelConfigPath = path.join(__dirname, '../vercel.json');
+ const vercelConfig = JSON.parse(
+ await fs.promises.readFile(vercelConfigPath, 'utf8')
+ );
+
+ if (vercelConfig.redirects) {
+ for (const redirect of vercelConfig.redirects) {
+ redirectMap.set(redirect.source, redirect.destination);
+ }
+ console.log(
+ chalk.gray(`Loaded ${redirectMap.size} redirects from vercel.json`)
+ );
+ }
+ } catch (error) {
+ console.log(
+ chalk.yellow(
+ `Warning: Could not load redirects from vercel.json: ${error.message}\n`
+ )
+ );
+ }
+}
+
+async function main() {
+ const files = getMarkdownFiles();
+ console.log(chalk.gray(`Checking ${files.length} markdown files...`));
+
+ await fetchErrorCodes();
+ await buildRedirectsMap();
+ await buildContributorMap();
+ await buildAnchorMap(files);
+
+ const filePromises = files.map((filePath) => processFile(filePath));
+ const results = await Promise.all(filePromises);
+ const deadLinks = results.flatMap((r) => r.deadLinks);
+ const totalLinks = results.reduce((sum, r) => sum + r.totalLinks, 0);
+
+ if (deadLinks.length > 0) {
+ console.log('\n');
+ for (const link of deadLinks) {
+ console.log(chalk.yellow(`${link.file}:${link.line}:${link.column}`));
+ console.log(chalk.reset(` Link text: ${link.text}`));
+ console.log(chalk.reset(` URL: ${link.url}`));
+ console.log(` ${chalk.red('✗')} ${chalk.red(link.reason)}\n`);
+ }
+
+ console.log(
+ chalk.red(
+ `\nFound ${deadLinks.length} dead link${
+ deadLinks.length > 1 ? 's' : ''
+ } out of ${totalLinks} total links\n`
+ )
+ );
+ process.exit(1);
+ }
+
+ console.log(chalk.green(`\n✓ All ${totalLinks} links are valid!\n`));
+ process.exit(0);
+}
+
+main().catch((error) => {
+ console.log(chalk.red(`Error: ${error.message}`));
+ process.exit(1);
+});
diff --git a/scripts/generateRss.js b/scripts/generateRss.js
index e0f3d5561..3231b1d73 100644
--- a/scripts/generateRss.js
+++ b/scripts/generateRss.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/scripts/headingIDHelpers/generateHeadingIDs.js b/scripts/headingIDHelpers/generateHeadingIDs.js
index 40925d444..79839f513 100644
--- a/scripts/headingIDHelpers/generateHeadingIDs.js
+++ b/scripts/headingIDHelpers/generateHeadingIDs.js
@@ -1,5 +1,8 @@
/**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
*/
// To do: Make this ESM.
diff --git a/scripts/headingIDHelpers/validateHeadingIDs.js b/scripts/headingIDHelpers/validateHeadingIDs.js
index c3cf1ab8c..798a63e12 100644
--- a/scripts/headingIDHelpers/validateHeadingIDs.js
+++ b/scripts/headingIDHelpers/validateHeadingIDs.js
@@ -1,6 +1,10 @@
/**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
*/
+
const fs = require('fs');
const walk = require('./walk');
diff --git a/scripts/headingIDHelpers/walk.js b/scripts/headingIDHelpers/walk.js
index 721274e09..f1ed5e0b3 100644
--- a/scripts/headingIDHelpers/walk.js
+++ b/scripts/headingIDHelpers/walk.js
@@ -1,11 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
const fs = require('fs');
module.exports = function walk(dir) {
let results = [];
- /**
+ /**
* If the param is a directory we can return the file
*/
- if(dir.includes('md')){
+ if (dir.includes('md')) {
return [dir];
}
const list = fs.readdirSync(dir);
diff --git a/scripts/headingIdLinter.js b/scripts/headingIdLinter.js
index 037e4945f..32116752b 100644
--- a/scripts/headingIdLinter.js
+++ b/scripts/headingIdLinter.js
@@ -1,12 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs');
const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs');
-/**
+/**
* yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing
* yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs
* yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file)
* yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file)
-*/
+ */
const markdownPaths = process.argv.slice(2);
if (markdownPaths.includes('--fix')) {
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index e64b486d1..177af2c56 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 65c0151ba..6b79a958f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx
index 23c971756..bd98d5b38 100644
--- a/src/components/ButtonLink.tsx
+++ b/src/components/ButtonLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx
index 5f2330e7e..158a54971 100644
--- a/src/components/DocsFooter.tsx
+++ b/src/components/DocsFooter.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -80,7 +87,7 @@ function FooterLink({
/>
- {type}
+ {type === 'Previous' ? 'Previous' : 'Next'}
{title}
diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx
index 080969efe..77e9ebf7d 100644
--- a/src/components/ErrorDecoderContext.tsx
+++ b/src/components/ErrorDecoderContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
// Error Decoder requires reading pregenerated error message from getStaticProps,
// but MDX component doesn't support props. So we use React Context to populate
// the value without prop-drilling.
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index 13fe6d3a9..ccd91fe9c 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx
index 61e4e52cd..2d0b9fecd 100644
--- a/src/components/Icon/IconArrow.tsx
+++ b/src/components/Icon/IconArrow.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx
index 4a3d3ad02..81301c047 100644
--- a/src/components/Icon/IconArrowSmall.tsx
+++ b/src/components/Icon/IconArrowSmall.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -19,6 +26,7 @@ export const IconArrowSmall = memo<
const classes = cn(className, {
'rotate-180': displayDirection === 'left',
'rotate-180 rtl:rotate-0': displayDirection === 'start',
+ 'rtl:rotate-180': displayDirection === 'end',
'rotate-90': displayDirection === 'down',
});
return (
diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx
index 5d461556f..ec930923d 100644
--- a/src/components/Icon/IconBsky.tsx
+++ b/src/components/Icon/IconBsky.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx
index 7f584fed7..97b9f7cef 100644
--- a/src/components/Icon/IconCanary.tsx
+++ b/src/components/Icon/IconCanary.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconChevron.tsx b/src/components/Icon/IconChevron.tsx
index 4d40330ce..15f34e153 100644
--- a/src/components/Icon/IconChevron.tsx
+++ b/src/components/Icon/IconChevron.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconClose.tsx b/src/components/Icon/IconClose.tsx
index d685fb217..dc4ad7c72 100644
--- a/src/components/Icon/IconClose.tsx
+++ b/src/components/Icon/IconClose.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconCodeBlock.tsx b/src/components/Icon/IconCodeBlock.tsx
index 755a2ae34..ba61f237e 100644
--- a/src/components/Icon/IconCodeBlock.tsx
+++ b/src/components/Icon/IconCodeBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconCopy.tsx b/src/components/Icon/IconCopy.tsx
index 500cd4fda..f62134607 100644
--- a/src/components/Icon/IconCopy.tsx
+++ b/src/components/Icon/IconCopy.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconDeepDive.tsx b/src/components/Icon/IconDeepDive.tsx
index dfe1a928c..121391f33 100644
--- a/src/components/Icon/IconDeepDive.tsx
+++ b/src/components/Icon/IconDeepDive.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconDownload.tsx b/src/components/Icon/IconDownload.tsx
index c0e7f49c2..be551d83e 100644
--- a/src/components/Icon/IconDownload.tsx
+++ b/src/components/Icon/IconDownload.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconError.tsx b/src/components/Icon/IconError.tsx
index f101f62b2..966777fd4 100644
--- a/src/components/Icon/IconError.tsx
+++ b/src/components/Icon/IconError.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconExperimental.tsx b/src/components/Icon/IconExperimental.tsx
new file mode 100644
index 000000000..c0dce97f4
--- /dev/null
+++ b/src/components/Icon/IconExperimental.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconExperimental = memo<
+ JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconExperimental(
+ {className, title, size} = {
+ className: undefined,
+ title: undefined,
+ size: 'md',
+ }
+) {
+ return (
+
+ );
+});
diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx
index 7f1080afa..dea2764d5 100644
--- a/src/components/Icon/IconFacebookCircle.tsx
+++ b/src/components/Icon/IconFacebookCircle.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconGitHub.tsx b/src/components/Icon/IconGitHub.tsx
index 1852f52f1..06c8f1556 100644
--- a/src/components/Icon/IconGitHub.tsx
+++ b/src/components/Icon/IconGitHub.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx
index 8bc90ee0c..5ab29fa37 100644
--- a/src/components/Icon/IconHamburger.tsx
+++ b/src/components/Icon/IconHamburger.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconHint.tsx b/src/components/Icon/IconHint.tsx
index b802bc79c..802382b5d 100644
--- a/src/components/Icon/IconHint.tsx
+++ b/src/components/Icon/IconHint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconInstagram.tsx b/src/components/Icon/IconInstagram.tsx
index 79def08e3..00d25a909 100644
--- a/src/components/Icon/IconInstagram.tsx
+++ b/src/components/Icon/IconInstagram.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconLink.tsx b/src/components/Icon/IconLink.tsx
index e6e716d00..0f7d4dfed 100644
--- a/src/components/Icon/IconLink.tsx
+++ b/src/components/Icon/IconLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconNavArrow.tsx b/src/components/Icon/IconNavArrow.tsx
index f61175e9b..40fde8afe 100644
--- a/src/components/Icon/IconNavArrow.tsx
+++ b/src/components/Icon/IconNavArrow.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconNewPage.tsx b/src/components/Icon/IconNewPage.tsx
index dfa13bac9..aaf3e8157 100644
--- a/src/components/Icon/IconNewPage.tsx
+++ b/src/components/Icon/IconNewPage.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconNote.tsx b/src/components/Icon/IconNote.tsx
index 1510c91c7..82ed947b4 100644
--- a/src/components/Icon/IconNote.tsx
+++ b/src/components/Icon/IconNote.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconPitfall.tsx b/src/components/Icon/IconPitfall.tsx
index ee6247891..a80fc7d68 100644
--- a/src/components/Icon/IconPitfall.tsx
+++ b/src/components/Icon/IconPitfall.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconRestart.tsx b/src/components/Icon/IconRestart.tsx
index b4a6b62f5..976203c65 100644
--- a/src/components/Icon/IconRestart.tsx
+++ b/src/components/Icon/IconRestart.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx
index 457736c7c..c5bb2473a 100644
--- a/src/components/Icon/IconRocket.tsx
+++ b/src/components/Icon/IconRocket.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconRss.tsx b/src/components/Icon/IconRss.tsx
index 6208236f4..13029ec96 100644
--- a/src/components/Icon/IconRss.tsx
+++ b/src/components/Icon/IconRss.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconSearch.tsx b/src/components/Icon/IconSearch.tsx
index 917513561..1dda00eb2 100644
--- a/src/components/Icon/IconSearch.tsx
+++ b/src/components/Icon/IconSearch.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconSolution.tsx b/src/components/Icon/IconSolution.tsx
index 668e41afe..b0f1d44b3 100644
--- a/src/components/Icon/IconSolution.tsx
+++ b/src/components/Icon/IconSolution.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconTerminal.tsx b/src/components/Icon/IconTerminal.tsx
index 7b3a97a8c..66dfd47b7 100644
--- a/src/components/Icon/IconTerminal.tsx
+++ b/src/components/Icon/IconTerminal.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx
index 9ea0bafdf..72ded5201 100644
--- a/src/components/Icon/IconThreads.tsx
+++ b/src/components/Icon/IconThreads.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx
index e84971f4e..01802c253 100644
--- a/src/components/Icon/IconTwitter.tsx
+++ b/src/components/Icon/IconTwitter.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconWarning.tsx b/src/components/Icon/IconWarning.tsx
index 83534ec5f..90b7cd41e 100644
--- a/src/components/Icon/IconWarning.tsx
+++ b/src/components/Icon/IconWarning.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 34db728ce..fe9272517 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 9cdf256fb..d11e1469d 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 72ab36884..3cf7d5c2c 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -755,9 +762,7 @@ function CommunityGallery() {
}, []);
return (
-
}
right={
-
+
-
+
}
/>
);
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 24d379589..89c25f46f 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -8,7 +15,7 @@ import {useRouter} from 'next/router';
import {SidebarNav} from './SidebarNav';
import {Footer} from './Footer';
import {Toc} from './Toc';
-// import SocialBanner from '../SocialBanner';
+import SocialBanner from '../SocialBanner';
import {DocsPageFooter} from 'components/DocsFooter';
import {Seo} from 'components/Seo';
import PageHeading from 'components/PageHeading';
@@ -31,7 +38,7 @@ interface PageProps {
meta: {
title?: string;
titleForTitleTag?: string;
- canary?: boolean;
+ version?: 'experimental' | 'canary';
description?: string;
};
section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
@@ -53,7 +60,7 @@ export function Page({
routeTree
);
const title = meta.title || route?.title || '';
- const canary = meta.canary || false;
+ const version = meta.version;
const description = meta.description || route?.description || '';
const isHomePage = cleanedPath === '/';
const isBlogIndex = cleanedPath === '/blog';
@@ -70,7 +77,7 @@ export function Page({
)}>
-
-
- {children}
-
-
+
+ {children}
+
{!isBlogIndex && (
)}
- {/**/}
+
+ )}
+ {version === 'experimental' && (
+
)}
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 72003df74..863355bfd 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index d0e291547..69664e6bc 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 171270960..77beb4d72 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/SidebarNav/index.tsx b/src/components/Layout/SidebarNav/index.tsx
index b268bbd29..f9680d803 100644
--- a/src/components/Layout/SidebarNav/index.tsx
+++ b/src/components/Layout/SidebarNav/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
index 5308c602c..e2e2169fd 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/TopNav/BrandMenu.tsx b/src/components/Layout/TopNav/BrandMenu.tsx
index 3bd8776f2..218e423ce 100644
--- a/src/components/Layout/TopNav/BrandMenu.tsx
+++ b/src/components/Layout/TopNav/BrandMenu.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
import * as ContextMenu from '@radix-ui/react-context-menu';
import {IconCopy} from 'components/Icon/IconCopy';
import {IconDownload} from 'components/Icon/IconDownload';
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index cc5c654e3..148098933 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -266,7 +273,9 @@ export default function TopNav({
-
+ {
}
export default function ErrorDecoder() {
- const {errorMessage} = useErrorDecoderParams();
+ const {errorMessage, errorCode} = useErrorDecoderParams();
/** error messages that contain %s require reading location.search */
const hasParams = errorMessage?.includes('%s');
const [message, setMessage] = useState(() =>
@@ -82,23 +89,28 @@ export default function ErrorDecoder() {
if (errorMessage == null || !hasParams) {
return;
}
+ const args = parseQueryString(window.location.search);
+ let message = errorMessage;
+ if (errorCode === '418') {
+ // Hydration errors have a %s for the diff, but we don't add that to the args for security reasons.
+ message = message.replace(/%s$/, '');
+
+ // Before React 19.1, the error message didn't have an arg, and was always HTML.
+ if (args.length === 0) {
+ args.push('HTML');
+ } else if (args.length === 1 && args[0] === '') {
+ args[0] = 'HTML';
+ }
+ }
- setMessage(
- urlify(
- replaceArgs(
- errorMessage,
- parseQueryString(window.location.search),
- '[missing argument]'
- )
- )
- );
+ setMessage(urlify(replaceArgs(message, args, '[missing argument]')));
setIsReady(true);
- }, [hasParams, errorMessage]);
+ }, [errorCode, hasParams, errorMessage]);
return (
{message}
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index 5f594063d..ba93d3e27 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -16,6 +23,7 @@ type CalloutVariants =
| 'note'
| 'wip'
| 'canary'
+ | 'experimental'
| 'major'
| 'rsc';
@@ -51,6 +59,15 @@ const variantMap = {
overlayGradient:
'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
},
+ experimental: {
+ title: 'Experimental Feature',
+ Icon: IconCanary,
+ containerClasses:
+ 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
+ textColor: 'text-green-60 dark:text-green-40',
+ overlayGradient:
+ 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
+ },
pitfall: {
title: 'Pitfall',
Icon: IconPitfall,
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index 1e709e483..c11cd6c3c 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index a9f3efc38..5890a3a48 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
index 5759a7c0a..17e4683b9 100644
--- a/src/components/MDX/InlineCode.tsx
+++ b/src/components/MDX/InlineCode.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Intro.tsx b/src/components/MDX/Intro.tsx
index 0522df678..b0bee624d 100644
--- a/src/components/MDX/Intro.tsx
+++ b/src/components/MDX/Intro.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/LanguagesContext.tsx b/src/components/MDX/LanguagesContext.tsx
index 776a11c0d..cd9f88816 100644
--- a/src/components/MDX/LanguagesContext.tsx
+++ b/src/components/MDX/LanguagesContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx
index 7bf041e56..8a47c401f 100644
--- a/src/components/MDX/Link.tsx
+++ b/src/components/MDX/Link.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index f24fac598..7a258370c 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -37,6 +44,7 @@ import {finishedTranslations} from 'utils/finishedTranslations';
import ErrorDecoder from './ErrorDecoder';
import {IconCanary} from '../Icon/IconCanary';
+import {IconExperimental} from 'components/Icon/IconExperimental';
function CodeStep({children, step}: {children: any; step: number}) {
return (
@@ -98,6 +106,10 @@ const Canary = ({children}: {children: React.ReactNode}) => (
{children}
);
+const Experimental = ({children}: {children: React.ReactNode}) => (
+ {children}
+);
+
const NextMajor = ({children}: {children: React.ReactNode}) => (
{children}
);
@@ -120,6 +132,20 @@ const CanaryBadge = ({title}: {title: string}) => (
);
+const ExperimentalBadge = ({title}: {title: string}) => (
+
+
+ Experimental only
+
+);
+
const NextMajorBadge = ({title}: {title: string}) => (
));
return (
-
+
{sequential ? (
@@ -351,7 +377,7 @@ function IllustrationBlock({
)}
-
+
);
}
@@ -508,6 +534,8 @@ export const MDXComponents = {
MathI,
Note,
Canary,
+ Experimental,
+ ExperimentalBadge,
CanaryBadge,
NextMajor,
NextMajorBadge,
diff --git a/src/components/MDX/PackageImport.tsx b/src/components/MDX/PackageImport.tsx
index 5e2da820e..222353ff5 100644
--- a/src/components/MDX/PackageImport.tsx
+++ b/src/components/MDX/PackageImport.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Recap.tsx b/src/components/MDX/Recap.tsx
index d91ed48b4..293304367 100644
--- a/src/components/MDX/Recap.tsx
+++ b/src/components/MDX/Recap.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx
new file mode 100644
index 000000000..be7451ab3
--- /dev/null
+++ b/src/components/MDX/Sandpack/ClearButton.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {IconClose} from '../../Icon/IconClose';
+export interface ClearButtonProps {
+ onClear: () => void;
+}
+
+export function ClearButton({onClear}: ClearButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/components/MDX/Sandpack/Console.tsx b/src/components/MDX/Sandpack/Console.tsx
index b5276fc13..3417e11f1 100644
--- a/src/components/MDX/Sandpack/Console.tsx
+++ b/src/components/MDX/Sandpack/Console.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/CustomPreset.tsx b/src/components/MDX/Sandpack/CustomPreset.tsx
index 7d6e566d2..4a241c87c 100644
--- a/src/components/MDX/Sandpack/CustomPreset.tsx
+++ b/src/components/MDX/Sandpack/CustomPreset.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx
index 94cf13ddc..b51627d89 100644
--- a/src/components/MDX/Sandpack/DownloadButton.tsx
+++ b/src/components/MDX/Sandpack/DownloadButton.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/ErrorMessage.tsx b/src/components/MDX/Sandpack/ErrorMessage.tsx
index 7c67ee461..3dbeb113b 100644
--- a/src/components/MDX/Sandpack/ErrorMessage.tsx
+++ b/src/components/MDX/Sandpack/ErrorMessage.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/LoadingOverlay.tsx b/src/components/MDX/Sandpack/LoadingOverlay.tsx
index de883629c..1945f0c6f 100644
--- a/src/components/MDX/Sandpack/LoadingOverlay.tsx
+++ b/src/components/MDX/Sandpack/LoadingOverlay.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
import {useState} from 'react';
import {
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index bf2c3186c..3fe743a2d 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -17,7 +24,8 @@ import {
useSandpackNavigation,
} from '@codesandbox/sandpack-react/unstyled';
import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
-import {ResetButton} from './ResetButton';
+import {ReloadButton} from './ReloadButton';
+import {ClearButton} from './ClearButton';
import {DownloadButton} from './DownloadButton';
import {IconChevron} from '../../Icon/IconChevron';
import {Listbox} from '@headlessui/react';
@@ -95,7 +103,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
// Note: in a real useEvent, onContainerResize would be omitted.
}, [isMultiFile, onContainerResize]);
- const handleReset = () => {
+ const handleClear = () => {
/**
* resetAllFiles must come first, otherwise
* the previous content will appear for a second
@@ -103,13 +111,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
*
* Plus, it should only prompt if there's any file changes
*/
- if (
- sandpack.editorState === 'dirty' &&
- confirm('Reset all your edits too?')
- ) {
+ if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {
sandpack.resetAllFiles();
}
+ refresh();
+ };
+ const handleReload = () => {
refresh();
};
@@ -188,7 +196,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
className="px-3 flex items-center justify-end text-start"
translate="yes">
-
+
+
{activeFile.endsWith('.tsx') && (
void;
+}
+
+export function ReloadButton({onReload}: ReloadButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
deleted file mode 100644
index 0d1e22c80..000000000
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-import * as React from 'react';
-import {IconRestart} from '../../Icon/IconRestart';
-export interface ResetButtonProps {
- onReset: () => void;
-}
-
-export function ResetButton({onReset}: ResetButtonProps) {
- return (
-
- );
-}
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index 67f40d0b3..48d8daee5 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/Themes.tsx b/src/components/MDX/Sandpack/Themes.tsx
index 3923470ca..8aa34dc95 100644
--- a/src/components/MDX/Sandpack/Themes.tsx
+++ b/src/components/MDX/Sandpack/Themes.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/createFileMap.ts b/src/components/MDX/Sandpack/createFileMap.ts
index 193b07be8..049face93 100644
--- a/src/components/MDX/Sandpack/createFileMap.ts
+++ b/src/components/MDX/Sandpack/createFileMap.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -9,6 +16,66 @@ export const AppJSPath = `/src/App.js`;
export const StylesCSSPath = `/src/styles.css`;
export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
+/**
+ * Tokenize meta attributes while ignoring brace-wrapped metadata (e.g. {expectedErrors: …}).
+ */
+function splitMeta(meta: string): string[] {
+ const tokens: string[] = [];
+ let current = '';
+ let depth = 0;
+ const trimmed = meta.trim();
+
+ for (let ii = 0; ii < trimmed.length; ii++) {
+ const char = trimmed[ii];
+
+ if (char === '{') {
+ if (depth === 0 && current) {
+ tokens.push(current);
+ current = '';
+ }
+ depth += 1;
+ continue;
+ }
+
+ if (char === '}') {
+ if (depth > 0) {
+ depth -= 1;
+ }
+ if (depth === 0) {
+ current = '';
+ }
+ if (depth < 0) {
+ throw new Error(`Unexpected closing brace in meta: ${meta}`);
+ }
+ continue;
+ }
+
+ if (depth > 0) {
+ continue;
+ }
+
+ if (/\s/.test(char)) {
+ if (current) {
+ tokens.push(current);
+ current = '';
+ }
+ continue;
+ }
+
+ current += char;
+ }
+
+ if (current) {
+ tokens.push(current);
+ }
+
+ if (depth !== 0) {
+ throw new Error(`Unclosed brace in meta: ${meta}`);
+ }
+
+ return tokens;
+}
+
export const createFileMap = (codeSnippets: any) => {
return codeSnippets.reduce(
(result: Record, codeSnippet: React.ReactElement) => {
@@ -30,12 +97,17 @@ export const createFileMap = (codeSnippets: any) => {
let fileActive = false; // if the file tab is shown by default
if (props.meta) {
- const [name, ...params] = props.meta.split(' ');
- filePath = '/' + name;
- if (params.includes('hidden')) {
+ const tokens = splitMeta(props.meta);
+ const name = tokens.find(
+ (token) => token.includes('/') || token.includes('.')
+ );
+ if (name) {
+ filePath = name.startsWith('/') ? name : `/${name}`;
+ }
+ if (tokens.includes('hidden')) {
fileHidden = true;
}
- if (params.includes('active')) {
+ if (tokens.includes('active')) {
fileActive = true;
}
} else {
@@ -50,6 +122,18 @@ export const createFileMap = (codeSnippets: any) => {
}
}
+ if (!filePath) {
+ if (props.className === 'language-js') {
+ filePath = AppJSPath;
+ } else if (props.className === 'language-css') {
+ filePath = StylesCSSPath;
+ } else {
+ throw new Error(
+ `Code block is missing a filename: ${props.children}`
+ );
+ }
+ }
+
if (result[filePath]) {
throw new Error(
`File ${filePath} was defined multiple times. Each file snippet should have a unique path name`
diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
index 6755ba8de..08e7dd6f0 100644
--- a/src/components/MDX/Sandpack/index.tsx
+++ b/src/components/MDX/Sandpack/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx
index 5fea2f110..a0b835461 100644
--- a/src/components/MDX/Sandpack/runESLint.tsx
+++ b/src/components/MDX/Sandpack/runESLint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
// @ts-nocheck
import {Linter} from 'eslint/lib/linter/linter';
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
index 42f02f6a6..358c8616e 100644
--- a/src/components/MDX/Sandpack/template.ts
+++ b/src/components/MDX/Sandpack/template.ts
@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
export const template = {
'/src/index.js': {
hidden: true,
- code: `import React, { StrictMode } from "react";
+ code: `import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
@@ -28,8 +35,8 @@ root.render(
eject: 'react-scripts eject',
},
dependencies: {
- react: '19.0.0-rc-3edc000d-20240926',
- 'react-dom': '19.0.0-rc-3edc000d-20240926',
+ react: '^19.1.0',
+ 'react-dom': '^19.1.0',
'react-scripts': '^5.0.0',
},
},
diff --git a/src/components/MDX/Sandpack/useSandpackLint.tsx b/src/components/MDX/Sandpack/useSandpackLint.tsx
index ec05fbe0d..479b53ee0 100644
--- a/src/components/MDX/Sandpack/useSandpackLint.tsx
+++ b/src/components/MDX/Sandpack/useSandpackLint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx
index 51ce28dc1..c5149deb9 100644
--- a/src/components/MDX/SandpackWithHTMLOutput.tsx
+++ b/src/components/MDX/SandpackWithHTMLOutput.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
import {Children, memo} from 'react';
import InlineCode from './InlineCode';
import Sandpack from './Sandpack';
diff --git a/src/components/MDX/SimpleCallout.tsx b/src/components/MDX/SimpleCallout.tsx
index ae259bcf5..0e124baa7 100644
--- a/src/components/MDX/SimpleCallout.tsx
+++ b/src/components/MDX/SimpleCallout.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index a49aa728e..2d0c65537 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
import * as React from 'react';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
import {IconTwitter} from '../Icon/IconTwitter';
import {IconThreads} from '../Icon/IconThreads';
import {IconBsky} from '../Icon/IconBsky';
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 475292716..bdcd8e466 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/TocContext.tsx b/src/components/MDX/TocContext.tsx
index 8aeead370..924e6e09e 100644
--- a/src/components/MDX/TocContext.tsx
+++ b/src/components/MDX/TocContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx
index d46a70277..20fc3b5fe 100644
--- a/src/components/MDX/YouWillLearnCard.tsx
+++ b/src/components/MDX/YouWillLearnCard.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 6000c8e51..760542750 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -8,10 +15,12 @@ import {H1} from './MDX/Heading';
import type {RouteTag, RouteItem} from './Layout/getRouteMeta';
import * as React from 'react';
import {IconCanary} from './Icon/IconCanary';
+import {IconExperimental} from './Icon/IconExperimental';
interface PageHeadingProps {
title: string;
- canary?: boolean;
+ version?: 'experimental' | 'canary';
+ experimental?: boolean;
status?: string;
description?: string;
tags?: RouteTag[];
@@ -21,7 +30,7 @@ interface PageHeadingProps {
function PageHeading({
title,
status,
- canary,
+ version,
tags = [],
breadcrumbs,
}: PageHeadingProps) {
@@ -31,9 +40,15 @@ function PageHeading({
{breadcrumbs ? : null}
{title}
- {canary && (
+ {version === 'canary' && (
+ )}
+ {version === 'experimental' && (
+
)}
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index c7401487b..24b066d70 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index 628085744..906041020 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -124,7 +131,14 @@ export const Seo = withRouter(
)}
+
@@ -113,7 +113,7 @@ This will run the following codemods from `react-codemod`:
- [`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)
-- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript)
+- [`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.
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 f5a870b22..cd49b6eb2 100644
--- a/src/content/blog/2024/10/21/react-compiler-beta-release.md
+++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md
@@ -10,6 +10,14 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes).
---
+
+
+### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/}
+
+Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details.
+
+
+
The React team is excited to share new updates:
@@ -64,11 +72,11 @@ Or, if you're using Yarn:
yarn add -D eslint-plugin-react-compiler@beta
-After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
+After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler/installation#eslint-integration). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
## Backwards Compatibility {/*backwards-compatibility*/}
-React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/reference/react-compiler/configuration#react-17-18).
## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/}
@@ -78,7 +86,7 @@ React Compiler can also be used to compile libraries. Because React Compiler nee
Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
-[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries)
+[You can find more docs on this here.](/reference/react-compiler/compiling-libraries)
## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/}
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 62a6ce464..65bf42757 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -294,7 +294,7 @@ A component was suspended by an uncached promise. Creating promises inside a Cli
-To fix, you need to pass a promise from a suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render.
+To fix, you need to pass a promise from a Suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render.
@@ -410,7 +410,7 @@ New function components will no longer need `forwardRef`, and we will be publish
-`refs` passed to classes are not passed as props since they reference the component instance.
+`ref`s passed to classes are not passed as props since they reference the component instance.
diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
new file mode 100644
index 000000000..9ced6231c
--- /dev/null
+++ b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
@@ -0,0 +1,320 @@
+---
+title: "Sunsetting Create React App"
+author: Matt Carroll and Ricky Hanlon
+date: 2025/02/14
+description: Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch.
+---
+
+February 14, 2025 by [Matt Carroll](https://twitter.com/mattcarrollcode) and [Ricky Hanlon](https://bsky.app/profile/ricky.fm)
+
+---
+
+
+
+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).
+
+
+
+-----
+
+When we released Create React App in 2016, there was no clear way to build a new React app.
+
+To create a React app, you had to install a bunch of tools and wire them up together yourself to support basic features like JSX, linting, and hot reloading. This was very tricky to do correctly, so the [community](https://github.com/react-boilerplate/react-boilerplate) [created](https://github.com/kriasoft/react-starter-kit) [boilerplates](https://github.com/petehunt/react-boilerplate) for [common](https://github.com/gaearon/react-hot-boilerplate) [setups](https://github.com/erikras/react-redux-universal-hot-example). However, boilerplates were difficult to update and fragmentation made it difficult for React to release new features.
+
+Create React App solved these problems by combining several tools into a single recommended configuration. This allowed apps a simple way to upgrade to new tooling features, and allowed the React team to deploy non-trivial tooling changes (Fast Refresh support, React Hooks lint rules) to the broadest possible audience.
+
+This model became so popular that there's an entire category of tools working this way today.
+
+## Deprecating Create React App {/*deprecating-create-react-app*/}
+
+Although Create React App makes it easy to get started, [there are several limitations](#limitations-of-build-tools) that make it difficult to build high performant production apps. In principle, we could solve these problems by essentially evolving it into a [framework](#why-we-recommend-frameworks).
+
+However, since Create React App currently has no active maintainers, and there are many existing frameworks that solve these problems already, we’ve decided to deprecate Create React App.
+
+Starting today, if you install a new app, you will see a deprecation warning:
+
+
+
+
+create-react-app is deprecated.
+{'\n\n'}
+You can find a list of up-to-date React frameworks on react.dev
+For more info see: react.dev/link/cra
+{'\n\n'}
+This error message will only be shown once per install.
+
+
+
+
+We've also added a deprecation notice to the Create React App [website](https://create-react-app.dev/) and GitHub [repo](https://github.com/facebook/create-react-app). Create React App will continue working in maintenance mode, and we've published a new version of Create React App to work with React 19.
+
+## How to Migrate to a Framework {/*how-to-migrate-to-a-framework*/}
+We recommend [creating new React apps](/learn/creating-a-react-app) with a framework. All the frameworks we recommend support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) and single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and can be deployed to a CDN or static hosting service without a server.
+
+For existing apps, these guides will help you migrate to a client-only SPA:
+
+* [Next.js’ Create React App migration guide](https://nextjs.org/docs/app/building-your-application/upgrading/from-create-react-app)
+* [React Router’s framework adoption guide](https://reactrouter.com/upgrading/component-routes).
+* [Expo webpack to Expo Router migration guide](https://docs.expo.dev/router/migrate/from-expo-webpack/)
+
+## How to Migrate to a Build Tool {/*how-to-migrate-to-a-build-tool*/}
+
+If your app has unusual constraints, or you prefer to solve these problems by building your own framework, or you just want to learn how react works from scratch, you can roll your own custom setup with React using Vite, Parcel or Rsbuild.
+
+For existing apps, these guides will help you migrate to a build tool:
+
+* [Vite Create React App migration guide](https://www.robinwieruch.de/vite-create-react-app/)
+* [Parcel Create React App migration guide](https://parceljs.org/migration/cra/)
+* [Rsbuild Create React App migration guide](https://rsbuild.dev/guide/migration/cra)
+
+To help get started with Vite, Parcel or Rsbuild, we've added new docs for [Building a React App from Scratch](/learn/build-a-react-app-from-scratch).
+
+
+
+#### Do I need a framework? {/*do-i-need-a-framework*/}
+
+Most apps would benefit from a framework, but there are valid cases to build a React app from scratch. A good rule of thumb is if your app needs routing, you would probably benefit from a framework.
+
+Just like Svelte has Sveltekit, Vue has Nuxt, and Solid has SolidStart, [React recommends using a framework](#why-we-recommend-frameworks) that fully integrates routing into features like data-fetching and code-splitting out of the box. This avoids the pain of needing to write your own complex configurations and essentially build a framework yourself.
+
+However, you can always [build a React app from scratch](/learn/build-a-react-app-from-scratch) using a build tool like Vite, Parcel, or Rsbuild.
+
+
+
+Continue reading to learn more about the [limitations of build tools](#limitations-of-build-tools) and [why we recommend frameworks](#why-we-recommend-frameworks).
+
+## Limitations of Build Tools {/*limitations-of-build-tools*/}
+
+Create React App and build tools like it make it easy to get started building a React app. After running `npx create-react-app my-app`, you get a fully configured React app with a development server, linting, and a production build.
+
+For example, if you're building an internal admin tool, you can start with a landing page:
+
+```js
+export default function App() {
+ return (
+
+
Welcome to the Admin Tool!
+
+ )
+}
+```
+
+This allows you to immediately start coding in React with features like JSX, default linting rules, and a bundler to run in both development and production. However, this setup is missing the tools you need to build a real production app.
+
+Most production apps need solutions to problems like routing, data fetching, and code splitting.
+
+### Routing {/*routing*/}
+
+Create React App does not include a specific routing solution. If you're just getting started, one option is to use `useState` to switch between routes. But doing this means that you can't share links to your app - every link would go to the same page - and structuring your app becomes difficult over time:
+
+```js
+import {useState} from 'react';
+
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+export default function App() {
+ // ❌ Routing in state does not create URLs
+ const [route, setRoute] = useState('home');
+ return (
+
+ )
+}
+```
+
+This is why most apps that use Create React App solve add routing with a routing library like [React Router](https://reactrouter.com/) or [Tanstack Router](https://tanstack.com/router/latest). With a routing library, you can add additional routes to the app, which provides opinions on the structure of your app, and allows you to start sharing links to routes. For example, with React Router you can define routes:
+
+```js
+import {RouterProvider, createBrowserRouter} from 'react-router';
+
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+// ✅ Each route has it's own URL
+const router = createBrowserRouter([
+ {path: '/', element: },
+ {path: '/dashboard', element: }
+]);
+
+export default function App() {
+ return (
+
+ )
+}
+```
+
+With this change, you can share a link to `/dashboard` and the app will navigate to the dashboard page . Once you have a routing library, you can add additional features like nested routes, route guards, and route transitions, which are difficult to implement without a routing library.
+
+There's a tradeoff being made here: the routing library adds complexity to the app, but it also adds features that are difficult to implement without it.
+
+### Data Fetching {/*data-fetching*/}
+
+Another common problem in Create React App is data fetching. Create React App does not include a specific data fetching solution. If you're just getting started, a common option is to use `fetch` in an effect to load data.
+
+But doing this means that the data is fetched after the component renders, which can cause network waterfalls. Network waterfalls are caused by fetching data when your app renders instead of in parallel while the code is downloading:
+
+```js
+export default function Dashboard() {
+ const [data, setData] = useState(null);
+
+ // ❌ Fetching data in a component causes network waterfalls
+ useEffect(() => {
+ fetch('/api/data')
+ .then(response => response.json())
+ .then(data => setData(data));
+ }, []);
+
+ return (
+
+ {data.map(item =>
{item.name}
)}
+
+ )
+}
+```
+
+Fetching in an effect means the user has to wait longer to see the content, even though the data could have been fetched earlier. To solve this, you can use a data fetching library like [React Query](https://react-query.tanstack.com/), [SWR](https://swr.vercel.app/), [Apollo](https://www.apollographql.com/docs/react), or [Relay](https://relay.dev/) which provide options to prefetch data so the request is started before the component renders.
+
+These libraries work best when integrated with your routing "loader" pattern to specify data dependencies at the route level, which allows the router to optimize your data fetches:
+
+```js
+export async function loader() {
+ const response = await fetch(`/api/data`);
+ const data = await response.json();
+ return data;
+}
+
+// ✅ Fetching data in parallel while the code is downloading
+export default function Dashboard({loaderData}) {
+ return (
+
+ {loaderData.map(item =>
{item.name}
)}
+
+ )
+}
+```
+
+On initial load, the router can fetch the data immediately before the route is rendered. As the user navigates around the app, the router is able to fetch both the data and the route at the same time, parallelizing the fetches. This reduces the time it takes to see the content on the screen, and can improve the user experience.
+
+However, this requires correctly configuring the loaders in your app and trades off complexity for performance.
+
+### Code Splitting {/*code-splitting*/}
+
+Another common problem in Create React App is [code splitting](https://www.patterns.dev/vanilla/bundle-splitting). Create React App does not include a specific code splitting solution. If you're just getting started, you might not consider code splitting at all.
+
+This means your app is shipped as a single bundle:
+
+```txt
+- bundle.js 75kb
+```
+
+But for ideal performance, you should "split" your code into separate bundles so the user only needs to download what they need. This decreases the time the user needs to wait to load your app, by only downloading the code they need to see the page they are on.
+
+```txt
+- core.js 25kb
+- home.js 25kb
+- dashboard.js 25kb
+```
+
+One way to do code-splitting is with `React.lazy`. However, this means that the code is not fetched until the component renders, which can cause network waterfalls. A more optimal solution is to use a router feature that fetches the code in parallel while the code is downloading. For example, React Router provides a `lazy` option to specify that a route should be code split and optimize when it is loaded:
+
+```js
+import Home from './Home';
+import Dashboard from './Dashboard';
+
+// ✅ Routes are downloaded before rendering
+const router = createBrowserRouter([
+ {path: '/', lazy: () => import('./Home')},
+ {path: '/dashboard', lazy: () => import('Dashboard')}
+]);
+```
+
+Optimized code-splitting is tricky to get right, and it's easy to make mistakes that can cause the user to download more code than they need. It works best when integrated with your router and data loading solutions to maximize caching, parallelize fetches, and support ["import on interaction"](https://www.patterns.dev/vanilla/import-on-interaction) patterns.
+
+### And more... {/*and-more*/}
+
+These are just a few examples of the limitations of Create React App.
+
+Once you've integrated routing, data-fetching, and code splitting, you now also need to consider pending states, navigation interruptions, error messages to the user, and revalidation of the data. There are entire categories of problems that users need to solve like:
+
+
+
+
Accessibility
+
Asset loading
+
Authentication
+
Caching
+
+
+
Error handling
+
Mutating data
+
Navigations
+
Optimistic updates
+
+
+
Progressive enhancement
+
Server-side rendering
+
Static site generation
+
Streaming
+
+
+
+All of these work together to create the most optimal [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
+
+Solving each of these problems individually in Create React App can be difficult as each problem is interconnected with the others and can require deep expertise in problem areas users may not be familiar with. In order to solve these problems, users end up building their own bespoke solutions on top of Create React App, which was the problem Create React App originally tried to solve.
+
+## Why we Recommend Frameworks {/*why-we-recommend-frameworks*/}
+
+Although you could solve all these pieces yourself in a build tool like Create React App, Vite, or Parcel, it is hard to do well. Just like when Create React App itself integrated several build tools together, you need a tool to integrate all of these features together to provide the best experience to users.
+
+This category of tools that integrates build tools, rendering, routing, data fetching, and code splitting are known as "frameworks" -- or if you prefer to call React itself a framework, you might call them "metaframeworks".
+
+Frameworks impose some opinions about structuring your app in order to provide a much better user experience, in the same way build tools impose some opinions to make tooling easier. This is why we started recommending frameworks like [Next.js](https://nextjs.org/), [React Router](https://reactrouter.com/), and [Expo](https://expo.dev/) for new projects.
+
+Frameworks provide the same getting started experience as Create React App, but also provide solutions to problems users need to solve anyway in real production apps.
+
+
+
+#### Server rendering is optional {/*server-rendering-is-optional*/}
+
+The frameworks we recommend all provide the option to create a [client-side rendered (CSR)](https://developer.mozilla.org/en-US/docs/Glossary/CSR) app.
+
+In some cases, CSR is the right choice for a page, but many times it's not. Even if most of your app is client-side, there are often individual pages that could benefit from server rendering features like [static-site generation (SSG)](https://developer.mozilla.org/en-US/docs/Glossary/SSG) or [server-side rendering (SSR)](https://developer.mozilla.org/en-US/docs/Glossary/SSR), for example a Terms of Service page, or documentation.
+
+Server rendering generally sends less JavaScript to the client, and a full HTML document which produces a faster [First Contentful Paint (FCP)](https://web.dev/articles/fcp) by reducing [Total Blocking Time (TBD)](https://web.dev/articles/tbt), which can also lower [Interaction to Next Paint (INP)](https://web.dev/articles/inp). This is why the [Chrome team has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance.
+
+There are tradeoffs to using a server, and it is not always the best option for every page. Generating pages on the server incurs additional cost and takes time to generate which can increase [Time to First Byte (TTFB)](https://web.dev/articles/ttfb). The best performing apps are able to pick the right rendering strategy on a per-page basis, based on the tradeoffs of each strategy.
+
+Frameworks provide the option to use a server on any page if you want to, but do not force you to use a server. This allows you to pick the right rendering strategy for each page in your app.
+
+#### What About Server Components {/*server-components*/}
+
+The frameworks we recommend also include support for React Server Components.
+
+Server Components help solve these problems by moving routing and data fetching to the server, and allowing code splitting to be done for client components based on the data you render, instead of just the route rendered, and reducing the amount of JavaScript shipped for the best possible [loading sequence](https://www.patterns.dev/vanilla/loading-sequence).
+
+Server Components do not require a server. They can be run at build time on your CI server to create a static-site generated app (SSG) app, at runtime on a web server for a server-side rendered (SSR) app.
+
+See [Introducing zero-bundle size React Server Components](/blog/2020/12/21/data-fetching-with-react-server-components) and [the docs](/reference/rsc/server-components) for more info.
+
+
+
+
+
+#### Server Rendering is not just for SEO {/*server-rendering-is-not-just-for-seo*/}
+
+A common misunderstanding is that server rendering is only for [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO).
+
+While server rendering can improve SEO, it also improves performance by reducing the amount of JavaScript the user needs to download and parse before they can see the content on the screen.
+
+This is why the Chrome team [has encouraged](https://web.dev/articles/rendering-on-the-web) developers to consider static or server-side render over a full client-side approach to achieve the best possible performance.
+
+
+
+---
+
+_Thank you to [Dan Abramov](https://bsky.app/profile/danabra.mov) for creating Create React App, and [Joe Haddad](https://github.com/Timer), [Ian Schmitz](https://github.com/ianschmitz), [Brody McKee](https://github.com/mrmckeb), and [many others](https://github.com/facebook/create-react-app/graphs/contributors) for maintaining Create React App over the years. Thank you to [Brooks Lybrand](https://bsky.app/profile/brookslybrand.bsky.social), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Devon Govett](https://bsky.app/profile/devongovett.bsky.social), [Eli White](https://x.com/Eli_White), [Jack Herrington](https://bsky.app/profile/jherr.dev), [Joe Savona](https://x.com/en_JS), [Lauren Tan](https://bsky.app/profile/no.lol), [Lee Robinson](https://x.com/leeerob), [Mark Erikson](https://bsky.app/profile/acemarke.dev), [Ryan Florence](https://x.com/ryanflorence), [Sophie Alpert](https://bsky.app/profile/sophiebits.com), [Tanner Linsley](https://bsky.app/profile/tannerlinsley.com), and [Theo Browne](https://x.com/theo) for reviewing and providing feedback on this post._
+
diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md
new file mode 100644
index 000000000..2ebbf3bae
--- /dev/null
+++ b/src/content/blog/2025/04/21/react-compiler-rc.md
@@ -0,0 +1,128 @@
+---
+title: "React Compiler RC"
+author: Lauren Tan and Mofei Zhang
+date: 2025/04/21
+description: We are releasing the compiler's first Release Candidate (RC) today.
+
+---
+
+April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
+
+---
+
+
+
+The React team is excited to share new updates:
+
+
+
+1. We're publishing React Compiler RC today, in preparation of the compiler's stable release.
+2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
+3. We've added support for swc and are working with oxc to support Babel-free builds.
+
+---
+
+[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release.
+
+We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production.
+
+## Use React Compiler RC today {/*use-react-compiler-rc-today*/}
+To install the RC:
+
+npm
+
+{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
+
+
+pnpm
+
+{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
+
+
+yarn
+
+{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
+
+
+As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs.
+
+We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release.
+
+You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
+
+## Feedback {/*feedback*/}
+During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions).
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+
+## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
+If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
+
+To install:
+
+npm
+
+{`npm install --save-dev eslint-plugin-react-hooks@rc`}
+
+
+pnpm
+
+{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
+
+
+yarn
+
+{`yarn add --dev eslint-plugin-react-hooks@rc`}
+
+
+```js
+// eslint.config.js
+import * as reactHooks from 'eslint-plugin-react-hooks';
+
+export default [
+ // Flat Config (eslint 9+)
+ reactHooks.configs.recommended,
+
+ // Legacy Config
+ reactHooks.configs['recommended-latest']
+];
+```
+
+To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration.
+
+The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today.
+
+## swc support (experimental) {/*swc-support-experimental*/}
+React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
+
+In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler).
+
+We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance.
+
+Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate.
+
+## Upgrading React Compiler {/*upgrading-react-compiler*/}
+React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise.
+
+However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing.
+
+In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues.
+
+If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected.
+
+## Roadmap to Stable {/*roadmap-to-stable*/}
+*This is not a final roadmap, and is subject to change.*
+
+After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
+
+* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers.
+* ✅ Public Beta: Available today, for feedback from library authors.
+* ✅ Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
+* General Availability: After final feedback period from the community.
+
+Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
+
+---
+
+Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post.
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
new file mode 100644
index 000000000..c7f740091
--- /dev/null
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -0,0 +1,14366 @@
+---
+title: "React Labs: View Transitions, Activity, and more"
+author: Ricky Hanlon
+date: 2025/04/23
+description: In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+---
+
+April 23, 2025 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
+
+---
+
+
+
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+
+
+
+
+
+
+React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
+
+We're looking for speakers to help us create talks about the features covered in this post. If you're interested in speaking at ReactConf, [please apply here](https://forms.reform.app/react-conf/call-for-speakers/) (no talk proposal required).
+
+For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
+
+
+
+Today, we're excited to release documentation for two new experimental features that are ready for testing:
+
+- [View Transitions](#view-transitions)
+- [Activity](#activity)
+
+We're also sharing updates on new features currently in development:
+- [React Performance Tracks](#react-performance-tracks)
+- [Compiler IDE Extension](#compiler-ide-extension)
+- [Automatic Effect Dependencies](#automatic-effect-dependencies)
+- [Fragment Refs](#fragment-refs)
+- [Concurrent Stores](#concurrent-stores)
+
+---
+
+# New Experimental Features {/*new-experimental-features*/}
+
+View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
+
+You can try them by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+
+Read on to learn how to use these features in your app, or check out the newly published docs:
+
+- [``](/reference/react/ViewTransition): A component that lets you activate an animation for a Transition.
+- [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
+- [``](/reference/react/Activity): A component that lets you hide and show parts of the UI.
+
+## View Transitions {/*view-transitions*/}
+
+React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers.
+
+To opt-in to animating an element, wrap it in the new `` component:
+
+```js
+// "what" to animate.
+
+
animate me
+
+```
+
+This new component lets you declaratively define "what" to animate when an animation is activated.
+
+You can define "when" to animate by using one of these three triggers for a View Transition:
+
+```js
+// "when" to animate.
+
+// Transitions
+startTransition(() => setState(...));
+
+// Deferred Values
+const deferred = useDeferredValue(value);
+
+// Suspense
+}>
+
Loading...
+
+```
+
+By default, these animations use the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (typically a smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, you can use `*` to change the default animation for all transitions:
+
+```
+// "how" to animate.
+::view-transition-old(*) {
+ animation: 300ms ease-out fade-out;
+}
+::view-transition-new(*) {
+ animation: 300ms ease-in fade-in;
+}
+```
+
+When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching to content—React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `` components to activate for the animation. The browser will then run the animation that's defined in CSS.
+
+If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
+
+In this post, let's take a look at a few examples of how to use View Transitions.
+
+We'll start with this app, which doesn't animate any of the following interactions:
+- Click a video to view the details.
+- Click "back" to go back to the feed.
+- Type in the list to filter the videos.
+
+
+
+```js src/App.js active
+import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router';
+
+export default function App() {
+ const {url} = useRouter();
+
+ // 🚩This version doesn't include any animations yet
+ return url === '/' ? : ;
+}
+```
+
+```js src/Details.js
+import { fetchVideo, fetchVideoDetails } from "./data";
+import { Thumbnail, VideoControls } from "./Videos";
+import { useRouter } from "./router";
+import Layout from "./Layout";
+import { use, Suspense } from "react";
+import { ChevronLeft } from "./Icons";
+
+function VideoInfo({ id }) {
+ const details = use(fetchVideoDetails(id));
+ return (
+ <>
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js active
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+
+ );
+}
+
+export function PauseIcon() {
+ return (
+
+ );
+}
+
+export function PlayIcon() {
+ return (
+
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export function IconSearch(props) {
+ return (
+
+ );
+}
+```
+
+```js src/Layout.js active
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animations for Suspense the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+
+
+### Server-Side Rendering with Activity {/*server-side-rendering-with-activity*/}
+
+When using Activity on a page that uses server-side rendering (SSR), there are additional optimizations.
+
+If part of the page is rendered with `mode="hidden"`, then it will not be included in the SSR response. Instead, React will schedule a client render for the content inside Activity while the rest of the page hydrates, prioritizing the visible content on screen.
+
+For parts of the UI rendered with `mode="visible"`, React will de-prioritize hydration of content within Activity, similar to how Suspense content is hydrated at a lower priority. If the user interacts with the page, we'll prioritize hydration within the boundary if needed.
+
+These are advanced use cases, but they show the additional benefits considered with Activity.
+
+### Future modes for Activity {/*future-modes-for-activity*/}
+
+In the future, we may add more modes to Activity.
+
+For example, a common use case is rendering a modal, where the previous "inactive" page is visible behind the "active" modal view. The "hidden" mode does not work for this use case because it's not visible and not included in SSR.
+
+Instead, we're considering a new mode that would keep the content visible—and included in SSR—but keep it unmounted and de-prioritize updates. This mode may also need to "pause" DOM updates, since it can be distracting to see backgrounded content updating while a modal is open.
+
+Another mode we're considering for Activity is the ability to automatically destroy state for hidden Activities if there is too much memory being used. Since the component is already unmounted, it may be preferable to destroy state for the least recently used hidden parts of the app rather than consume too many resources.
+
+These are areas we're still exploring, and we'll share more as we make progress. For more information on what Activity includes today, [check out the docs](/reference/react/Activity).
+
+---
+
+# Features in development {/*features-in-development*/}
+
+We're also developing features to help solve the common problems below.
+
+As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out.
+
+When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind.
+
+As these features progress, we'll announce them on the blog with docs included so you can try them out.
+
+## React Performance Tracks {/*react-performance-tracks*/}
+
+We're working on a new set of custom tracks to performance profilers using browser APIs that [allow adding custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to provide more information about the performance of your React app.
+
+This feature is still in progress, so we're not ready to publish docs to fully release it as an experimental feature yet. You can get a sneak preview when using an experimental version of React, which will automatically add the performance tracks to profiles:
+
+
+
+
+
+
+
+
+
+
+
+
+There are a few known issues we plan to address such as performance, and the scheduler track not always "connecting" work across Suspended trees, so it's not quite ready to try. We're also still collecting feedback from early adopters to improve the design and usability of the tracks.
+
+Once we solve those issues, we'll publish experimental docs and share that it's ready to try.
+
+---
+
+## Automatic Effect Dependencies {/*automatic-effect-dependencies*/}
+
+When we released hooks, we had three motivations:
+
+- **Sharing code between components**: hooks replaced patterns like render props and higher-order components to allow you to reuse stateful logic without changing your component hierarchy.
+- **Think in terms of function, not lifecycles**: hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
+- **Support ahead-of-time compilation**: hooks were designed to support ahead-of-time compilation with less pitfalls causing unintentional de-optimizations caused by lifecycle methods, and limitations of classes.
+
+Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
+
+### Effects can be hard {/*effects-can-be-hard*/}
+
+Unfortunately, some hooks are still hard to think in terms of function instead of lifecycles. Effects specifically are still hard to understand and are the most common pain point we hear from developers. Last year, we spent a significant amount of time researching how Effects were used, and how those use cases could be simplified and easier to understand.
+
+We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles.
+
+We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+
+Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
+
+```js
+useEffect(() => {
+ // Your Effect connected to the room specified with roomId...
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ // ...until it disconnected
+ connection.disconnect();
+ };
+}, [roomId]);
+```
+
+Many users would read this code as "on mount, connect to the roomId. whenever `roomId` changes, disconnect to the old room and re-create the connection". However, this is thinking from the component's lifecycle perspective, which means you will need to think of every component lifecycle state to write the Effect correctly. This can be difficult, so it's understandable that Effects seem harder than class lifecycles when using the component perspective.
+
+### Effects without dependencies {/*effects-without-dependencies*/}
+
+Instead, it's better to think from the Effect's perspective. The Effect doesn't know about the component lifecycles. It only describes how to start synchronization and how to stop it. When users think of Effects in this way, their Effects tend to be easier to write, and more resilient to being started and stopped as many times as is needed.
+
+We spent some time researching why Effects are thought of from the component perspective, and we think one of the reasons is the dependency array. Since you have to write it, it's right there and in your face reminding you of what you're "reacting" to and baiting you into the mental model of 'do this when these values change'.
+
+When we released hooks, we knew we could make them easier to use with ahead-of-time compilation. With the React Compiler, you're now able to avoid writing `useCallback` and `useMemo` yourself in most cases. For Effects, the compiler can insert the dependencies for you:
+
+```js
+useEffect(() => {
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ connection.disconnect();
+ };
+}); // compiler inserted dependencies.
+```
+
+With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/experimental_useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
+
+Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
+
+---
+
+## Compiler IDE Extension {/*compiler-ide-extension*/}
+
+Earlier this week [we shared](/blog/2025/04/21/react-compiler-rc) the React Compiler release candidate, and we're working towards shipping the first SemVer stable version of the compiler in the coming months.
+
+We've also begun exploring ways to use the React Compiler to provide information that can improve understanding and debugging your code. One idea we've started exploring is a new experimental LSP-based React IDE extension powered by React Compiler, similar to the extension used in [Lauren Tan's React Conf talk](https://conf2024.react.dev/talks/5).
+
+Our idea is that we can use the compiler's static analysis to provide more information, suggestions, and optimization opportunities directly in your IDE. For example, we can provide diagnostics for code breaking the Rules of React, hovers to show if components and hooks were optimized by the compiler, or a CodeLens to see [automatically inserted Effect dependencies](#automatic-effect-dependencies).
+
+The IDE extension is still an early exploration, but we'll share our progress in future updates.
+
+---
+
+## Fragment Refs {/*fragment-refs*/}
+
+Many DOM APIs like those for event management, positioning, and focus are difficult to compose when writing with React. This often leads developers to reach for Effects, managing multiple Refs, by using APIs like `findDOMNode` (removed in React 19).
+
+We are exploring adding refs to Fragments that would point to a group of DOM elements, rather than just a single element. Our hope is that this will simplify managing multiple children and make it easier to write composable React code when calling DOM APIs.
+
+Fragment refs are still being researched. We'll share more when we're closer to having the final API finished.
+
+---
+
+## Gesture Animations {/*gesture-animations*/}
+
+We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
+
+Gestures present new challenges for a few reasons:
+
+- **Gestures are continuous**: as you swipe the animation is tied to your finger placement time, rather than triggering and running to completion.
+- **Gestures don't complete**: when you release your finger gesture animations can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go.
+- **Gestures invert old and new**: while you're animating, you want the page you are animating from to stay "alive" and interactive. This inverts the browser View Transition model where the "old" state is a snapshot and the "new" state is the live DOM.
+
+We believe we’ve found an approach that works well and may introduce a new API for triggering gesture transitions. For now, we're focused on shipping ``, and will revisit gestures afterward.
+
+---
+
+## Concurrent Stores {/*concurrent-stores*/}
+
+When we released React 18 with concurrent rendering, we also released `useSyncExternalStore` so external store libraries that did not use React state or context could [support concurrent rendering](https://github.com/reactwg/react-18/discussions/70) by forcing a synchronous render when the store is updated.
+
+Using `useSyncExternalStore` comes at a cost though, since it forces a bail out from concurrent features like transitions, and forces existing content to show Suspense fallbacks.
+
+Now that React 19 has shipped, we're revisiting this problem space to create a primitive to fully support concurrent external stores with the `use` API:
+
+```js
+const value = use(store);
+```
+
+Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
+
+This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
+
+---
+
+_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index cc50b83c0..a7a897634 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -4,12 +4,32 @@ title: React Blog
-This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. You can also follow the [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
+This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.
+
+You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
+
+
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ...
+
+
+
+
+
+We are releasing the compiler's first Release Candidate (RC) today.
+
+
+
+
+
+Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ...
+
+
+
In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md
index 760076d83..bfe67f55a 100644
--- a/src/content/community/acknowledgements.md
+++ b/src/content/community/acknowledgements.md
@@ -36,6 +36,8 @@ We'd like to recognize a few people who have made significant contributions to R
* [Joe Critchley](https://github.com/joecritch)
* [Jeff Morrison](https://github.com/jeffmo)
* [Luna Ruan](https://github.com/lunaruan)
+* [Luna Wei](https://github.com/lunaleaps)
+* [Noah Lemen](https://github.com/noahlemen)
* [Kathryn Middleton](https://github.com/kmiddleton14)
* [Keyan Zhang](https://github.com/keyz)
* [Marco Salazar](https://github.com/salazarm)
@@ -51,9 +53,10 @@ We'd like to recognize a few people who have made significant contributions to R
* [Samuel Susla](https://github.com/sammy-SC)
* [Sander Spies](https://github.com/sanderspies)
* [Sasha Aickin](https://github.com/aickin)
-* [Sean Keegan](https://github.com/seanryankeegan)
+* [Sathya Gunasekaran](https://github.com/gsathya)
* [Sophia Shoemaker](https://github.com/mrscobbler)
* [Sunil Pai](https://github.com/threepointone)
+* [Tianyu Yao](https://github.com/)
* [Tim Yung](https://github.com/yungsters)
* [Xuan Huang](https://github.com/huxpro)
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index ff0803c56..a69ff2ec4 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,25 +10,25 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
## Upcoming Conferences {/*upcoming-conferences*/}
-### React Paris 2025 {/*react-paris-2025*/}
-March 20 - 21, 2024. In-person in Paris, France (hybrid event)
+### React Universe Conf 2025 {/*react-universe-conf-2025*/}
+September 2-4, 2025. Wrocław, Poland.
-[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
-### App.js Conf 2025 {/*appjs-conf-2025*/}
-May 28 - 30, 2025. In-person in Kraków, Poland + remote
+### React Alicante 2025 {/*react-alicante-2025*/}
+October 2-4, 2025. Alicante, Spain.
-[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
-### React Summit 2025 {/*react-summit-2025*/}
-June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
+### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/}
+October 04, 2025. Nairobi, Kenya
-[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
-### React Universe Conf 2025 {/*react-universe-conf-2025*/}
-September 2-4, 2025. Wrocław, Poland.
+### React Conf 2025 {/*react-conf-2025*/}
+October 7-8, 2025. Henderson, Nevada, USA and free livestream
-[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+[Website](https://conf.react.dev/) - [Twitter](https://x.com/reactjs) - [Bluesky](https://bsky.app/profile/react.dev)
### React India 2025 {/*react-india-2025*/}
October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day
@@ -36,8 +36,75 @@ October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15
[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
+November 6-7, 2025. In-person in New Delhi, India
+
+[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Summit US 2025 {/*react-summit-us-2025*/}
+November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit)
+
+### React Advanced London 2025 {/*react-advanced-london-2025*/}
+November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### 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*/}
+
+### React Nexus 2025 {/*react-nexus-2025*/}
+July 03 - 05, 2025. In-person in Bangalore, India
+
+[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### React Summit 2025 {/*react-summit-2025*/}
+June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
+
+### React Norway 2025 {/*react-norway-2025*/}
+June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### CityJS Athens 2025 {/*cityjs-athens*/}
+May 27 - 31, 2025. In-person in Athens, Greece
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### App.js Conf 2025 {/*appjs-conf-2025*/}
+May 28 - 30, 2025. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### CityJS London 2025 {/*cityjs-london*/}
+April 23 - 25, 2025. In-person in London, UK
+
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Paris 2025 {/*react-paris-2025*/}
+March 20 - 21, 2025. In-person in Paris, France (hybrid event)
+
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj)
+
+### React Native Connection 2025 {/*react-native-connection-2025*/}
+April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.
+
+[Website](https://reactnativeconnection.io/) - [X](https://x.com/reactnativeconn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+
+### React Day Berlin 2024 {/*react-day-berlin-2024*/}
+December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+
### React Day Berlin 2024 {/*react-day-berlin-2024*/}
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
diff --git a/src/content/community/index.md b/src/content/community/index.md
index 1e28a27f0..cf8f9323b 100644
--- a/src/content/community/index.md
+++ b/src/content/community/index.md
@@ -29,4 +29,4 @@ Each community consists of many thousands of React users.
## News {/*news*/}
-For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog/) on this website.
+For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 14097aa4d..78d48093a 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -38,7 +38,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Canada {/*canada*/}
* [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
+* [Montreal, QC](https://guild.host/react-montreal/)
* [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
* [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
@@ -47,6 +47,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Colombia {/*colombia*/}
* [Medellin](https://www.meetup.com/React-Medellin/)
+## Czechia {/*czechia*/}
+* [Prague](https://guild.host/react-prague/)
+
## Denmark {/*denmark*/}
* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
@@ -55,8 +58,12 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
* [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/)
* [React Native London](https://guild.host/RNLDN)
+## Finland {/*finland*/}
+* [Helsinki](https://www.meetabit.com/communities/react-helsinki)
+
## France {/*france*/}
* [Lille](https://www.meetup.com/ReactBeerLille/)
* [Paris](https://www.meetup.com/ReactJS-Paris/)
@@ -75,13 +82,14 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
## India {/*india*/}
-* [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
+* [Ahmedabad](https://reactahmedabad.dev/)
* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
* [Chennai](https://www.linkedin.com/company/chennaireact)
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
* [Mumbai](https://reactmumbai.dev)
* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
+* [Rajasthan](https://reactrajasthan.com)
## Indonesia {/*indonesia*/}
* [Indonesia](https://www.meetup.com/reactindonesia/)
@@ -131,11 +139,14 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
## Scotland (UK) {/*scotland-uk*/}
-* [Edinburgh](https://www.meetup.com/React-Scotland/)
+* [Edinburgh](https://www.meetup.com/react-edinburgh/)
## Spain {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
+## Sri Lanka {/*sri-lanka*/}
+* [Colombo](https://www.javascriptcolombo.com/)
+
## Sweden {/*sweden*/}
* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
* [Stockholm](https://www.meetup.com/Stockholm-ReactJS-Meetup/)
@@ -160,6 +171,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
+* [Denver, CO - React Denver](https://reactdenver.com/)
* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
diff --git a/src/content/community/team.md b/src/content/community/team.md
index 94f31f09f..da4ce0791 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -22,10 +22,14 @@ Current members of the React team are listed in alphabetical order below.
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.
-
+
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.
+
+ 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.
+
+
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.
@@ -38,6 +42,10 @@ Current members of the React team are listed in alphabetical order below.
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.
+
+ 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.
+
+
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.
@@ -46,20 +54,20 @@ Current members of the React team are listed in alphabetical order below.
Lauren's programming career peaked when she first discovered the `
+ 
+ 
+ 
+ 
+