chore(website): Upgrade to Docusaurus v3.6 - Enable Docusaurus Faster

website/docusaurus.config.js

@@ -24,6 +24,14 @@ const isDeployPreview = process.env.PREVIEW_DEPLOY === 'true';
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
+  future: {
+    // Make Docusaurus build faster - enabled by default
+    // See https://github.com/facebook/docusaurus/issues/10556
+    // See https://github.com/facebook/react-native-website/pull/4268
+    // See https://docusaurus.io/blog/releases/3.6
+    experimental_faster: (process.env.DOCUSAURUS_FASTER ?? 'true') === 'true',
+  },
+
   title: 'React Native',
   tagline: 'A framework for building native apps using React',
   organizationName: 'facebook',
@@ -58,17 +66,6 @@ module.exports = {
     locales: ['en'],
   },
   onBrokenLinks: 'throw',
-  webpack: {
-    jsLoader: isServer => ({
-      loader: require.resolve('esbuild-loader'),
-      options: {
-        loader: 'tsx',
-        format: isServer ? 'cjs' : undefined,
-        target: isServer ? 'node16' : 'es2020',
-        jsx: 'automatic',
-      },
-    }),
-  },
   presets: [
     [
       '@docusaurus/preset-classic',

website/package.json

@@ -49,19 +49,19 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "3.5.2",
-    "@docusaurus/plugin-google-gtag": "3.5.2",
-    "@docusaurus/plugin-pwa": "3.5.2",
-    "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/core": "3.6.0",
+    "@docusaurus/faster": "3.6.0",
+    "@docusaurus/plugin-google-gtag": "3.6.0",
+    "@docusaurus/plugin-pwa": "3.6.0",
+    "@docusaurus/preset-classic": "3.6.0",
     "docusaurus-plugin-sass": "^0.2.5",
-    "esbuild-loader": "^2.21.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0",
     "sass": "1.76.0"
   },
   "devDependencies": {
-    "@docusaurus/types": "3.5.2",
+    "@docusaurus/types": "3.6.0",
     "@react-native-website/lint-examples": "0.0.0",
     "@react-native-website/update-redirects": "0.0.0",
     "alex": "^10.0.0",

website/src/css/customTheme.scss

@@ -1322,6 +1322,12 @@ button[class*="tocCollapsibleButton"] {
   --docusaurus-announcement-bar-height: auto !important;
 }
 
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: auto !important;
+  }
+}
+
 div[class*="announcementBar"][role="banner"] {
   border-bottom-color: var(--deepdark);