docs: load version data dynamically JSON (#56464)

* docs: load version data dynamically via JSON

* update

* update

* Update .dumi/theme/slots/Header/index.tsx

Signed-off-by: lijianan <574980606@qq.com>

* Fix window location check in Header component

Update condition to check for window and location existence.

Signed-off-by: lijianan <574980606@qq.com>

* Refactor Header component for improved logic

Signed-off-by: lijianan <574980606@qq.com>

* Change import path for versions.json file

Signed-off-by: lijianan <574980606@qq.com>

* Refactor fetcher and update VersionItem interface

Signed-off-by: lijianan <574980606@qq.com>

* Fix version URL to use window.location.origin

Signed-off-by: lijianan <574980606@qq.com>

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: liuqiang <qiang.liu@xinjifamily.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: thinkasany <480968828@qq.com>

.dumi/theme/slots/Header/index.tsx

@@ -2,11 +2,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
 import { Alert, Button, Col, ConfigProvider, Popover, Row, Select, Tooltip } from 'antd';
 import { createStyles } from 'antd-style';
+import type { DefaultOptionType } from 'antd/es/select';
 import { clsx } from 'clsx';
 import dayjs from 'dayjs';
 import { useLocation, useSiteData } from 'dumi';
 import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
+import useSWR from 'swr';
 
+import versionsFile from '../../../../public/versions.json';
 import useLocale from '../../../hooks/useLocale';
 import useLocalStorage from '../../../hooks/useLocalStorage';
 import { getBannerData } from '../../../pages/index/components/util';
@@ -14,7 +17,6 @@ import ThemeSwitch from '../../common/ThemeSwitch';
 import DirectionIcon from '../../icons/DirectionIcon';
 import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout';
 import * as utils from '../../utils';
-import { getThemeConfig } from '../../utils';
 import SiteContext from '../SiteContext';
 import type { SharedProps } from './interface';
 import Logo from './Logo';
@@ -149,19 +151,57 @@ interface HeaderState {
   searching: boolean;
 }
 
+interface VersionItem {
+  version: string;
+  url: string;
+  chineseMirrorUrl?: string;
+}
+
+const fetcher = (...args: Parameters<typeof fetch>) => {
+  // eslint-disable-next-line compat/compat
+  return fetch(...args).then((res) => res.json());
+};
+
 // ================================= Header =================================
 const Header: React.FC = () => {
   const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
 
-  const themeConfig = getThemeConfig();
+  const isChineseMirror =
+    typeof window !== 'undefined' && typeof window.location !== 'undefined'
+      ? window.location.hostname.includes('.antgroup.com')
+      : false;
+
+  const { data: versions = [], isLoading } = useSWR<VersionItem[]>(
+    process.env.NODE_ENV === 'production' && typeof window !== 'undefined'
+      ? `${window.location.origin}/versions.json`
+      : null,
+    fetcher,
+    {
+      fallbackData: versionsFile,
+      errorRetryCount: 3,
+    },
+  );
+
+  const versionOptions = useMemo(() => {
+    if (isLoading) {
+      return [];
+    }
+    return versions.map<DefaultOptionType>((item) => {
+      const isMatch = item.version.startsWith(pkg.version[0]);
+      const label = isMatch ? pkg.version : item.version;
+      const value = isChineseMirror && item.chineseMirrorUrl ? item.chineseMirrorUrl : item.url;
+      return { value, label };
+    });
+  }, [versions, isLoading, pkg.version, isChineseMirror]);
 
   const [headerState, setHeaderState] = useState<HeaderState>({
     menuVisible: false,
     windowWidth: 1400,
     searching: false,
   });
+
   const { direction, isMobile, bannerVisible, updateSiteConfig } = React.use(SiteContext);
   const pingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const location = useLocation();
@@ -258,14 +298,6 @@ const Header: React.FC = () => {
   );
 
   const { menuVisible, windowWidth, searching } = headerState;
-  const docVersions: Record<string, string> = {
-    [pkg.version]: pkg.version,
-    ...themeConfig?.docVersions,
-  };
-  const versionOptions = Object.keys(docVersions).map((version) => ({
-    value: docVersions[version],
-    label: version,
-  }));
 
   const isHome = ['', 'index', 'index-cn'].includes(pathname);
   const isZhCN = lang === 'cn';
@@ -308,6 +340,7 @@ const Header: React.FC = () => {
       key="version"
       size="small"
       variant="filled"
+      loading={isLoading}
       className={styles.versionSelect}
       defaultValue={pkg.version}
       onChange={handleVersionChange}

.dumi/theme/themeConfig.ts

@@ -1,6 +1,3 @@
-const chineseMirror =
-  typeof location !== 'undefined' && location.hostname.includes('.antgroup.com');
-
 export default {
   categoryOrder: {
     'Ant Design': 0,
@@ -45,15 +42,4 @@ export default {
     模板文档: 3,
     'Template Document': 3,
   },
-  docVersions: {
-    '5.x': chineseMirror ? 'https://5x-ant-design.antgroup.com' : 'https://5x.ant.design',
-    '4.x': chineseMirror ? 'https://4x-ant-design.antgroup.com' : 'https://4x.ant.design',
-    '3.x': 'https://3x.ant.design',
-    '2.x': 'https://2x.ant.design',
-    '1.x': 'https://1x.ant.design',
-    '0.12.x': 'https://012x.ant.design',
-    '0.11.x': 'https://011x.ant.design',
-    '0.10.x': 'https://010x.ant.design',
-    '0.9.x': 'https://09x.ant.design',
-  },
 };

.dumi/theme/utils/index.ts

@@ -3,7 +3,6 @@ import flattenDeep from 'lodash/flattenDeep';
 import semver from 'semver';
 
 import deprecatedVersions from '../../../BUG_VERSIONS.json';
-import themeConfig from '../themeConfig';
 
 interface Meta {
   skip?: boolean;
@@ -215,5 +214,3 @@ export function isOfficialHost(hostname: string) {
   const officialHostnames = ['ant.design', 'antgroup.com'];
   return officialHostnames.some((official) => hostname.includes(official));
 }
-
-export const getThemeConfig = () => themeConfig;

public/versions.json

@@ -0,0 +1,45 @@
+[
+  {
+    "version": "6.x",
+    "url": "https://ant.design",
+    "chineseMirrorUrl": "https://ant-design.antgroup.com"
+  },
+  {
+    "version": "5.x",
+    "url": "https://5x.ant.design",
+    "chineseMirrorUrl": "https://5x-ant-design.antgroup.com"
+  },
+  {
+    "version": "4.x",
+    "url": "https://4x.ant.design",
+    "chineseMirrorUrl": "https://4x-ant-design.antgroup.com"
+  },
+  {
+    "version": "3.x",
+    "url": "https://3x.ant.design"
+  },
+  {
+    "version": "2.x",
+    "url": "https://2x.ant.design"
+  },
+  {
+    "version": "1.x",
+    "url": "https://1x.ant.design"
+  },
+  {
+    "version": "0.12.x",
+    "url": "https://012x.ant.design"
+  },
+  {
+    "version": "0.11.x",
+    "url": "https://011x.ant.design"
+  },
+  {
+    "version": "0.10.x",
+    "url": "https://010x.ant.design"
+  },
+  {
+    "version": "0.9.x",
+    "url": "https://09x.ant.design"
+  }
+]