Merge branch 'feature' into feature

Signed-off-by: yykoypj <[email protected]>

.circleci/config.yml

@@ -7,15 +7,17 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:16.20.0-browsers
+      - image: cimg/node:21.0-browsers
+    environment:
+      NODE_OPTIONS: --openssl-legacy-provider
     steps:
       - checkout
       - run:
           name: Install node_modules
-          command: npm i
+          command: yarn
       - run:
           name: Build dist file
-          command: npm run dist
+          command: npm run dist:esbuild
       - run:
           name: Run image screenshot tests
           command: npm run test-image

.dumi/hooks/use.ts

@@ -0,0 +1,30 @@
+function use<T>(promise: PromiseLike<T>): T {
+  const internal: PromiseLike<T> & {
+    status?: 'pending' | 'fulfilled' | 'rejected';
+    value?: T;
+    reason?: any;
+  } = promise;
+  if (internal.status === 'fulfilled') {
+    return internal.value as T;
+  }
+  if (internal.status === 'rejected') {
+    throw internal.reason;
+  } else if (internal.status === 'pending') {
+    throw internal;
+  } else {
+    internal.status = 'pending';
+    internal.then(
+      (result) => {
+        internal.status = 'fulfilled';
+        internal.value = result;
+      },
+      (reason) => {
+        internal.status = 'rejected';
+        internal.reason = reason;
+      },
+    );
+    throw internal;
+  }
+}
+
+export default use;

.dumi/hooks/useDark.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const DarkContext = React.createContext(false);
+
+export default function useDark() {
+  return React.useContext(DarkContext);
+}

.dumi/hooks/useFetch/cache.ts

@@ -0,0 +1,21 @@
+export default class FetchCache {
+  private cache: Map<string, PromiseLike<any>> = new Map();
+
+  get(key: string) {
+    return this.cache.get(key);
+  }
+
+  set(key: string, value: PromiseLike<any>) {
+    this.cache.set(key, value);
+  }
+
+  promise<T>(key: string, promiseFn: () => PromiseLike<T>): PromiseLike<T> {
+    const cached = this.get(key);
+    if (cached) {
+      return cached;
+    }
+    const promise = promiseFn();
+    this.set(key, promise);
+    return promise;
+  }
+}

.dumi/hooks/useFetch/index.ts

@@ -0,0 +1,20 @@
+import fetch from 'cross-fetch';
+import use from '../use';
+import FetchCache from './cache';
+
+const cache = new FetchCache();
+
+const useFetch = <T>(options: string | { request: () => PromiseLike<T>; key: string }) => {
+  let request;
+  let key;
+  if (typeof options === 'string') {
+    request = () => fetch(options).then((res) => res.json());
+    key = options;
+  } else {
+    request = options.request;
+    key = options.key;
+  }
+  return use(cache.promise<T>(key, request));
+};
+
+export default useFetch;

.dumi/hooks/useLayoutState.ts

@@ -1,6 +1,6 @@
 import { startTransition, useState } from 'react';
 
-const useLayoutState = <S>(
+const useLayoutState: typeof useState = <S>(
   ...args: Parameters<typeof useState<S>>
 ): ReturnType<typeof useState<S>> => {
   const [state, setState] = useState<S>(...args);

.dumi/hooks/useLocale.ts

@@ -5,10 +5,12 @@ export interface LocaleMap<Key extends string> {
   en: Record<Key, string>;
 }
 
-export default function useLocale<Key extends string>(
+function useLocale<Key extends string>(
   localeMap?: LocaleMap<Key>,
 ): [Record<Key, string>, 'cn' | 'en'] {
   const { id } = useDumiLocale();
-  const localeType = id === 'zh-CN' ? 'cn' : 'en';
-  return [localeMap?.[localeType], localeType];
+  const localeType = id === 'zh-CN' ? ('cn' as const) : ('en' as const);
+  return [localeMap?.[localeType]!, localeType];
 }
+
+export default useLocale;

.dumi/hooks/useMenu.tsx

@@ -1,22 +1,21 @@
+import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { Tag, theme } from 'antd';
+import { Tag, version } from 'antd';
 import { useFullSidebarData, useSidebarData } from 'dumi';
-import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
+
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';
 
-export type UseMenuOptions = {
-  before?: ReactNode;
-  after?: ReactNode;
-};
+export interface UseMenuOptions {
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+}
 
 const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {
   const fullData = useFullSidebarData();
   const { pathname, search } = useLocation();
   const sidebarData = useSidebarData();
   const { before, after } = options;
-  const { token } = theme.useToken();
 
   const menuItems = useMemo<MenuProps['items']>(() => {
     const sidebarItems = [...(sidebarData ?? [])];
@@ -33,18 +32,31 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
         key.startsWith('/changelog'),
       )?.[1];
       if (changelogData) {
-        sidebarItems.push(...changelogData);
+        sidebarItems.splice(1, 0, changelogData[0]);
       }
     }
     if (pathname.startsWith('/changelog')) {
       const reactDocData = Object.entries(fullData).find(([key]) =>
         key.startsWith('/docs/react'),
       )?.[1];
       if (reactDocData) {
-        sidebarItems.unshift(...reactDocData);
+        sidebarItems.unshift(reactDocData[0]);
+        sidebarItems.push(...reactDocData.slice(1));
       }
     }
 
+    const getItemTag = (tag: string, show = true) =>
+      tag &&
+      show && (
+        <Tag
+          color={tag === 'New' ? 'success' : 'processing'}
+          bordered={false}
+          style={{ marginInlineStart: 'auto', marginInlineEnd: 0, marginTop: -2 }}
+        >
+          {tag.replace('VERSION', version)}
+        </Tag>
+      );
+
     return (
       sidebarItems?.reduce<Exclude<MenuProps['items'], undefined>>((result, group) => {
         if (group?.title) {
@@ -53,7 +65,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
             const childrenGroup = group.children.reduce<
               Record<string, ReturnType<typeof useSidebarData>[number]['children']>
             >((childrenResult, child) => {
-              const type = (child.frontmatter as any).type ?? 'default';
+              const type = child.frontmatter?.type ?? 'default';
               if (!childrenResult[type]) {
                 childrenResult[type] = [];
               }
@@ -104,17 +116,16 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               key: group?.title,
               children: group.children?.map((item) => ({
                 label: (
-                  <Link to={`${item.link}${search}`}>
+                  <Link
+                    to={`${item.link}${search}`}
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  >
                     {before}
                     <span key="english">{item?.title}</span>
                     <span className="chinese" key="chinese">
-                      {(item.frontmatter as any).subtitle}
+                      {item.frontmatter?.subtitle}
                     </span>
-                    {(item.frontmatter as any).tag && (
-                      <Tag color="warning" style={{ marginInlineStart: token.marginXS }}>
-                        {(item.frontmatter as any).tag}
-                      </Tag>
-                    )}
+                    {getItemTag(item.frontmatter?.tag, !before && !after)}
                     {after}
                   </Link>
                 ),
@@ -126,15 +137,19 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
           const list = group.children || [];
           // 如果有 date 字段，我们就对其进行排序
           if (list.every((info) => info?.frontmatter?.date)) {
-            list.sort((a, b) => (a.frontmatter.date > b.frontmatter.date ? -1 : 1));
+            list.sort((a, b) => (a.frontmatter?.date > b.frontmatter?.date ? -1 : 1));
           }
 
           result.push(
             ...list.map((item) => ({
               label: (
-                <Link to={`${item.link}${search}`}>
+                <Link
+                  to={`${item.link}${search}`}
+                  style={{ display: 'flex', alignItems: 'center' }}
+                >
                   {before}
                   {item?.title}
+                  {getItemTag((item.frontmatter as any).tag, !before && !after)}
                   {after}
                 </Link>
               ),
@@ -145,7 +160,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
         return result;
       }, []) ?? []
     );
-  }, [sidebarData, fullData, pathname, search]);
+  }, [sidebarData, fullData, pathname, search, options]);
 
   return [menuItems, pathname];
 };