Fetch package versions during build

Author: satya164

docusaurus.config.js

@@ -132,6 +132,7 @@ export default {
     },
   },
   plugins: [
+    './src/plugins/react-navigation-versions.mjs',
     [
       '@docusaurus/plugin-client-redirects',
       {

src/components/Pre.js

@@ -1,79 +1,8 @@
 import { useColorMode } from '@docusaurus/theme-common';
+import { usePluginData } from '@docusaurus/useGlobalData';
 import MDXPre from '@theme-original/MDXComponents/Pre';
 import React from 'react';
 
-const peers = {
-  'react-native-safe-area-context': '*',
-  'react-native-screens': '*',
-};
-
-const versions = {
-  7: {
-    '@react-navigation/bottom-tabs': [
-      '7.0.0-rc.20',
-      {
-        ...peers,
-        '@react-navigation/native': '*',
-      },
-    ],
-    '@react-navigation/core': '7.0.0-rc.10',
-    '@react-navigation/native': '7.0.0-rc.13',
-    '@react-navigation/drawer': [
-      '7.0.0-rc.18',
-      {
-        ...peers,
-        '@react-navigation/native': '*',
-        'react-native-gesture-handler': '*',
-        'react-native-reanimated': '*',
-      },
-    ],
-    '@react-navigation/elements': [
-      '2.0.0-rc.14',
-      {
-        ...peers,
-        '@react-navigation/native': '*',
-      },
-    ],
-    '@react-navigation/material-top-tabs': [
-      '7.0.0-rc.14',
-      {
-        ...peers,
-        '@react-navigation/native': '*',
-        'react-native-pager-view': '*',
-      },
-    ],
-    '@react-navigation/native-stack': [
-      '7.0.0-rc.15',
-      {
-        ...peers,
-        '@react-navigation/native': '*',
-      },
-    ],
-    '@react-navigation/routers': '7.0.0-rc.6',
-    '@react-navigation/stack': [
-      '7.0.0-rc.15',
-      {
-        ...peers,
-        '@react-navigation/native': '*',
-        'react-native-gesture-handler': '*',
-      },
-    ],
-    'react-native-drawer-layout': [
-      '4.0.0-rc.7',
-      {
-        'react-native-gesture-handler': '*',
-        'react-native-reanimated': '*',
-      },
-    ],
-    'react-native-tab-view': [
-      '4.0.0-rc.7',
-      {
-        'react-native-pager-view': '*',
-      },
-    ],
-  },
-};
-
 export default function Pre({
   children,
   'data-name': name,
@@ -84,6 +13,8 @@ export default function Pre({
   ...rest
 }) {
   const { colorMode } = useColorMode();
+  const { versions } = usePluginData('react-navigation-versions');
+
   const child = React.Children.only(children);
 
   // Handle diffs with language

src/plugins/react-navigation-versions.mjs

@@ -0,0 +1,52 @@
+export default function friendsPlugin(context, options) {
+  return {
+    name: 'react-navigation-versions',
+    async contentLoaded({ content, actions }) {
+      const queries = {
+        7: {
+          tag: 'next',
+          packages: [
+            '@react-navigation/bottom-tabs',
+            '@react-navigation/core',
+            '@react-navigation/drawer',
+            '@react-navigation/elements',
+            '@react-navigation/material-top-tabs',
+            '@react-navigation/native-stack',
+            '@react-navigation/native',
+            '@react-navigation/routers',
+            '@react-navigation/stack',
+            'react-native-drawer-layout',
+            'react-native-tab-view',
+          ],
+        },
+      };
+
+      const versions = Object.fromEntries(
+        await Promise.all(
+          Object.entries(queries).map(async ([version, { tag, packages }]) => {
+            const items = await Promise.all(
+              packages.map(async (name) => {
+                const pkg = await fetch(
+                  `https://registry.npmjs.org/${name}/${tag}`
+                ).then((res) => res.json());
+
+                const peers = Object.fromEntries(
+                  Object.entries(pkg.peerDependencies || {}).map(([name]) => [
+                    name,
+                    '*',
+                  ])
+                );
+
+                return [name, [pkg.version, peers]];
+              })
+            );
+
+            return [version, Object.fromEntries(items)];
+          })
+        )
+      );
+
+      actions.setGlobalData({ versions });
+    },
+  };
+}