chore: upgrade docusaurus to 2.3.1 & react 18.2

facebook · Mar 15, 2023 · b57521b · b57521b
1 parent 5c41e87
commit b57521b
Show file tree

Hide file tree

Showing 5 changed files with 283 additions and 298 deletions.
diff --git a/website/package.json b/website/package.json
@@ -45,18 +45,18 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.1",
-    "@docusaurus/plugin-pwa": "^2.0.1",
-    "@docusaurus/preset-classic": "^2.0.1",
+    "@docusaurus/core": "^2.3.1",
+    "@docusaurus/plugin-pwa": "^2.3.1",
+    "@docusaurus/preset-classic": "^2.3.1",
     "docusaurus-plugin-sass": "^0.2.2",
     "esbuild-loader": "^2.19.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-github-btn": "^1.3.0",
     "sass": "^1.53.0"
   },
   "devDependencies": {
-    "@docusaurus/types": "^2.0.1",
+    "@docusaurus/types": "^2.3.1",
     "@react-native-website/lint-examples": "0.0.0",
     "alex": "^10.0.0",
     "fs-extra": "^10.1.0",

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
@@ -1217,7 +1217,7 @@ button[class*="tocCollapsibleButton"] {
   --docusaurus-announcement-bar-height: auto !important;
 }
 
-div[class^="announcementBar"][role="banner"] {
+div[class*="announcementBar"][role="banner"] {
   border-bottom-color: var(--deepdark);
 
   button.close {
@@ -1227,7 +1227,7 @@ div[class^="announcementBar"][role="banner"] {
   }
 }
 
-div[class^="announcementBarContent"] {
+div[class*="announcementBarContent"] {
   line-height: 40px;
   font-size: 20px;
   font-weight: bold;
@@ -1245,13 +1245,13 @@ div[class^="announcementBarContent"] {
 }
 
 @media only screen and (max-width: 768px) {
-  div[class^="announcementBarContent"] {
+  div[class*="announcementBarContent"] {
     font-size: 18px;
   }
 }
 
 @media only screen and (max-width: 500px) {
-  div[class^="announcementBarContent"] {
+  div[class*="announcementBarContent"] {
     font-size: 15px;
     line-height: 22px;
     padding: 6px 30px;

diff --git a/website/src/pages/showcase.js b/website/src/pages/showcase.js
@@ -14,13 +14,15 @@ import ThemedImage from '@theme/ThemedImage';
 import {Section} from './index';
 import IconExternalLink from '../theme/Icon/ExternalLink';
 
-const renderApp = (app, i) => {
-  const imgSource = !app.icon.startsWith('http')
-    ? useBaseUrl('img/showcase/' + app.icon)
-    : app.icon;
+const renderApp = (app, i) => <AppBox app={app} key={`app-${app.name}-${i}`} />;
+
+const AppBox = ({app}) => {
+  const imgSource = useBaseUrl(
+    app.icon.startsWith('http') ? app.icon : 'img/showcase/' + app.icon
+  );
 
   return (
-    <div className="showcase" key={`app-${app.name}-${i}`}>
+    <div className="showcase">
       <div className="iconBox">
         <img src={imgSource} alt={app.name} className="iconBackground" />
         <img src={imgSource} alt={app.name} className="icon" />
@@ -71,7 +73,7 @@ const renderLinks = app => {
 };
 
 const randomizeApps = apps =>
-  apps.filter(app => !app.group).sort(() => 0.5 - Math.random());
+  [...apps].filter(app => !app.group).sort(() => 0.5 - Math.random());
 
 const Showcase = () => {
   const {siteConfig} = useDocusaurusContext();

diff --git a/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js b/website/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js
@@ -14,11 +14,12 @@ import {
   useActiveDocContext,
 } from '@docusaurus/plugin-content-docs/client';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
 
 const getVersionMainDoc = version =>
   version.docs.find(doc => doc.id === version.mainDocId);
-
 export default function DocsVersionDropdownNavbarItem({
   mobile,
   docsPluginId,
@@ -27,6 +28,7 @@ export default function DocsVersionDropdownNavbarItem({
   dropdownItemsAfter,
   ...props
 }) {
+  const {search, hash} = useLocation();
   const activeDocContext = useActiveDocContext(docsPluginId);
   const versions = useVersions(docsPluginId);
   const latestVersion = useLatestVersion(docsPluginId);
@@ -41,32 +43,32 @@ export default function DocsVersionDropdownNavbarItem({
   // (CUSTOM) Show only `next` and last 5 versions in the dropdown
   const reducedVersions = versions.slice(0, 6);
 
-  function getItems() {
-    const versionLinks = reducedVersions.map(version => {
-      // We try to link to the same doc, in another version
-      // When not possible, fallback to the "main doc" of the version
-      const versionDoc =
-        activeDocContext?.alternateDocVersions[version.name] ||
-        getVersionMainDoc(version);
-      return {
-        isNavLink: true,
-        label: version.label,
-        to: versionDoc.path,
-        isActive: () => version === activeDocContext?.activeVersion,
-        onClick: () => {
-          savePreferredVersionName(version.name);
-        },
-      };
-    });
-    return [...dropdownItemsBefore, ...versionLinks, ...dropdownItemsAfter];
-  }
+  const versionLinks = reducedVersions.map(version => {
+    // We try to link to the same doc, in another version
+    // When not possible, fallback to the "main doc" of the version
+    const versionDoc =
+      activeDocContext?.alternateDocVersions[version.name] ??
+      getVersionMainDoc(version);
+    return {
+      label: version.label,
+      // preserve ?search#hash suffix on version switches
+      to: `${versionDoc.path}${search}${hash}`,
+      isActive: () => version === activeDocContext?.activeVersion,
+      onClick: () => savePreferredVersionName(version.name),
+    };
+  });
 
-  const items = getItems();
-  const dropdownVersion =
-    activeDocContext.activeVersion ?? preferredVersion ?? latestVersion; // Mobile dropdown is handled a bit differently
+  const items = [
+    ...dropdownItemsBefore,
+    ...versionLinks,
+    ...dropdownItemsAfter,
+  ];
 
+  const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0];
+
+  // Mobile dropdown is handled a bit differently
   const dropdownLabel =
-    mobile && items
+    mobile && items.length > 1
       ? translate({
           id: 'theme.navbar.mobileVersionsDropdown.label',
           message: 'Versions',
@@ -75,8 +77,12 @@ export default function DocsVersionDropdownNavbarItem({
         })
       : dropdownVersion.label;
   const dropdownTo =
-    mobile && items ? undefined : getVersionMainDoc(dropdownVersion).path; // We don't want to render a version dropdown with 0 or 1 item
-  // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
+    mobile && items.length > 1
+      ? undefined
+      : getVersionMainDoc(dropdownVersion).path;
+
+  // We don't want to render a version dropdown with 0 or 1 item. If we build
+  // the site with a single docs version (onlyIncludeVersions: ['1.0.0']),
   // We'd rather render a button instead of a dropdown
 
   if (items.length <= 1) {