@bbki.ng/site 5.5.15 → 5.5.17

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.5.17
+
+### Patch Changes
+
+- ae8b5c4: add cd plugin
+
+## 5.5.16
+
+### Patch Changes
+
+- 22df0c4: fix global loading
+
 ## 5.5.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.5.15",
+  "version": "5.5.17",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -57,7 +57,7 @@
     "vite-plugin-mdx": "^3.5.8",
     "vite-plugin-pwa": "0.19",
     "workbox-window": "^6.3.0",
-    "@bbki.ng/config": "1.0.6"
+    "@bbki.ng/config": "1.0.7"
   },
   "author": "bbbottle",
   "license": "MIT",

package/src/blog/app.tsx

@@ -1,19 +1,19 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { Outlet, Route, Routes } from 'react-router-dom';
-import { Cover, Streaming } from './pages';
 import { Nav, NotFound, Page, Grid, ErrorBoundary, Container } from '@bbki.ng/ui';
 
+import { usePaths } from '@/hooks';
 import ArticlePage from '@/pages/extensions/txt/article';
 import Txt from '@/pages/extensions/txt';
-
-import { usePaths } from '@/hooks';
-import { SWR } from '@/swr';
 import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 import { BotRedirect } from '@/pages/bot';
 import { BBContext } from '@/context/bbcontext';
+import { Slot } from '#/core/components/SlotComp';
+import { usePlugins } from '#/core/hooks/use_plugins';
+import { SWR } from '@/swr';
+
+import { Cover, Streaming } from './pages';
 import { useDynamicLogo } from './hooks/use_dynamic_logo';
-import { Slot } from '../core/components/SlotComp';
-import { usePlugins } from './hooks/use_plugins';
 
 const Layout = () => {
   const paths = usePaths();
@@ -59,7 +59,7 @@ const Layout = () => {
 };
 
 export const App = () => {
-  usePlugins(['sticker', 'fontstyler']);
+  usePlugins(['sticker', 'fontstyler', 'extra-cd']);
 
   return (
     <SWR>

package/src/blog/components/Spinner.tsx

@@ -1,20 +1,10 @@
-import React, { useContext, useEffect } from 'react';
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+import React from 'react';
+import { useGlobalLoading } from '@/hooks';
 
 export const Spinner = (props: { disableDotIndicator?: boolean }) => {
   const { disableDotIndicator } = props;
 
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  useEffect(() => {
-    if (disableDotIndicator) {
-      return;
-    }
-    setIsLoading(true);
-    return () => {
-      setIsLoading(false);
-    };
-  }, []);
+  useGlobalLoading('spinner', !disableDotIndicator);
 
   return <div className="h-full w-full grid place-items-center"></div>;
 };

package/src/blog/components/effect-layer/EffectContextProvider.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, useContext, useMemo } from 'react';
-
 import { EffectLayer, grain, paper, spiral, watermark, Effect } from '@bbki.ng/ui';
 
 import { GlobalLoadingContext } from '@/context/global_loading_state_provider';

package/src/blog/context/bbcontext.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
+
 import { GlobalLoadingStateProvider } from '@/context/global_loading_state_provider';
-import { GlobalRoutesContext, GlobalRoutesProvider } from '@/context/global_routes_provider';
+import { GlobalRoutesProvider } from '@/context/global_routes_provider';
 import { EffectContextProvider } from '@/components/effect-layer/EffectContextProvider';
 
 export const BBContext = (props: { children: ReactNode }) => {

package/src/blog/context/global_loading_state_provider.tsx

@@ -1,29 +1,70 @@
-import React, { createContext, ReactNode, useState, Dispatch, SetStateAction } from 'react';
+import React, { createContext, ReactNode, useState, useCallback, useMemo } from 'react';
+
 import { useFontLoading } from '@/hooks/use_font_loading';
 
+type LoadingStates = Map<string, boolean>;
+
 type LoadingContext = {
   isLoading: boolean;
   isFontLoading: boolean;
-  setIsLoading: Dispatch<SetStateAction<boolean>>;
+  register: (id: string) => void;
+  setLoading: (id: string, loading: boolean) => void;
+  unregister: (id: string) => void;
 };
 
 export const GlobalLoadingContext = createContext<LoadingContext>({
   isFontLoading: false,
   isLoading: false,
-  setIsLoading: () => false,
+  register: () => {},
+  setLoading: () => {},
+  unregister: () => {},
 });
 
 export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [loadingStates, setLoadingStates] = useState<LoadingStates>(new Map());
   const isFontLoading = useFontLoading();
+
+  const register = useCallback((id: string) => {
+    setLoadingStates(prev => {
+      const next = new Map(prev);
+      next.set(id, false);
+      return next;
+    });
+  }, []);
+
+  const setLoading = useCallback((id: string, loading: boolean) => {
+    setLoadingStates(prev => {
+      const next = new Map(prev);
+      next.set(id, loading);
+      return next;
+    });
+  }, []);
+
+  const unregister = useCallback((id: string) => {
+    setLoadingStates(prev => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const isLoading = useMemo(() => {
+    return Array.from(loadingStates.values()).some(Boolean) || isFontLoading;
+  }, [loadingStates, isFontLoading]);
+
+  const contextValue = useMemo(
+    () => ({
+      isLoading,
+      isFontLoading,
+      register,
+      setLoading,
+      unregister,
+    }),
+    [isLoading, isFontLoading, register, setLoading, unregister]
+  );
+
   return (
-    <GlobalLoadingContext.Provider
-      value={{
-        isLoading,
-        setIsLoading,
-        isFontLoading,
-      }}
-    >
+    <GlobalLoadingContext.Provider value={contextValue}>
       {props.children}
     </GlobalLoadingContext.Provider>
   );

package/src/blog/hooks/index.ts

@@ -1,3 +1,4 @@
 export { usePaths } from './use_paths';
 export { useStreaming } from './use_streaming';
 export type { StreamingItem } from './use_streaming';
+export { useGlobalLoading } from './use_loading';

package/src/blog/hooks/use_loading.ts

@@ -0,0 +1,26 @@
+import { useContext, useEffect } from 'react';
+
+import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+
+/**
+ * Hook to register a loading state with the global loading context.
+ * The global loading state is true if ANY registered loading state is true.
+ *
+ * @param id - Unique identifier for this loading state
+ * @param loading - Whether this specific loading state is active
+ */
+export function useGlobalLoading(id: string | undefined, loading: boolean | undefined) {
+  const { register, setLoading, unregister, isLoading } = useContext(GlobalLoadingContext);
+
+  useEffect(() => {
+    if (!id || loading === undefined) return;
+
+    register(id);
+    setLoading(id, loading);
+    return () => {
+      unregister(id);
+    };
+  }, [id, loading]);
+
+  return isLoading;
+}

package/src/blog/hooks/use_posts.ts

@@ -1,18 +1,14 @@
 import useSWR from 'swr';
-import { useContext, useEffect, useState } from 'react';
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+import { useMemo } from 'react';
+
+import { useGlobalLoading } from '@/hooks';
 import { baseFetcher } from '@/utils';
 import { API_ENDPOINT } from '@/constants/routes';
-import { registry } from '#/core/registry';
+import { useMiddlewareTransData } from '#/core/hooks';
 
-// In dev, use /api prefix to leverage Vite proxy to localhost:8787
 const isProd = true;
-// const isProd = typeof window !== 'undefined' && /^https:\/\/bbki\.ng/.test(window.location.href);
 const POSTS_API = !isProd ? '/api/posts' : `${API_ENDPOINT}/posts`;
 
-// Use baseFetcher for full URLs, cfApiFetcher is for relative paths
-const postsFetcher = (resource: string) => baseFetcher(resource);
-
 export interface TitleListItem {
   name: string;
   to: string;
@@ -21,58 +17,46 @@ export interface TitleListItem {
 }
 
 export const usePosts = (name: string = '', suspense?: boolean) => {
-  const { data: response, error } = useSWR(POSTS_API, postsFetcher, {
+  const { data: response, error: swrError } = useSWR(POSTS_API, baseFetcher, {
     revalidateOnFocus: false,
     suspense,
   });
 
-  // Extract posts array from API response { status: "success", data: [...] }
   const data = response?.data;
+  const isDataLoading = !data && !swrError;
+
+  const baseTitleList: TitleListItem[] = useMemo(() => {
+    if (!data || swrError) return [];
+
+    return data.map((p: any) => ({
+      name: p.title,
+      to: p.title,
+      children: p.title,
+    }));
+  }, [data, swrError]);
+
+  // Use middleware hook to transform title list
+  const {
+    data: titleList,
+    loading: isTransforming,
+    error: transformError,
+  } = useMiddlewareTransData({
+    hookPoint: 'transformTitleList',
+    baseData: baseTitleList,
+    immediate: baseTitleList.length > 0,
+  });
 
-  const [titleList, setTitleList] = useState<TitleListItem[]>([]);
-  let isLoading = !data && !error;
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  useEffect(() => {
-    setIsLoading(isLoading);
-  }, [isLoading, setIsLoading]);
-
-  // Apply middleware to transform titleList
-  useEffect(() => {
-    const transformTitleList = async () => {
-      if (isLoading || error || !data) {
-        setTitleList([]);
-        return;
-      }
-
-      const baseTitleList: TitleListItem[] = [
-        ...data.map((p: any) => ({
-          name: p.title,
-          to: p.title,
-          children: p.title,
-        })),
-        {
-          name: 'cd ~',
-          to: '/',
-          children: 'cd ~',
-        },
-      ];
-
-      // Run middleware to allow plugins to transform the title list
-      const transformedList = await registry.runMiddleware('transformTitleList', baseTitleList);
-      setTitleList(transformedList);
-    };
-
-    transformTitleList();
-  }, [data, isLoading, error]);
+  const gLoading = useGlobalLoading('posts', isDataLoading || isTransforming);
 
   const posts =
-    isLoading || name == '' || error || !data ? data : data.find((p: any) => p.title == name);
+    isDataLoading || name === '' || swrError || !data
+      ? data
+      : data.find((p: any) => p.title === name);
 
   return {
-    posts: posts,
-    titleList,
-    isError: error,
-    isLoading: !data && !error,
+    posts,
+    titleList: titleList ?? [],
+    isError: swrError || transformError,
+    isLoading: gLoading,
   };
 };

package/src/blog/hooks/use_streaming.ts

@@ -1,9 +1,10 @@
 import useSWR from 'swr';
-import useSWRInfinite from 'swr/infinite';
-import { baseFetcher, withBBApi } from '@/utils';
+import { useEffect, useState } from 'react';
+
+import { baseFetcher } from '@/utils';
 import { API_ENDPOINT } from '@/constants/routes';
-import { useContext, useEffect, useState, useCallback } from 'react';
-import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
+
+import { useGlobalLoading } from './use_loading';
 
 // In dev, use /api prefix to leverage Vite proxy to localhost:8787
 // const isProd = typeof window !== 'undefined' && /^https:\/\/bbki.ng/.test(window.location.href);
@@ -101,11 +102,7 @@ export function useStreaming(options: UseStreamingOptions = {}) {
     });
   }, []);
 
-  const { setIsLoading } = useContext(GlobalLoadingContext);
-
-  useEffect(() => {
-    setIsLoading(isLoading);
-  }, [isLoading, setIsLoading]);
+  useGlobalLoading('streaming', isLoading);
 
   return {
     streaming: data?.data ?? [],

package/src/core/components/SlotComp.tsx

@@ -4,7 +4,7 @@ import { useSlotComp } from '../hooks/useSlotComp';
 
 export interface ISlotProps {
   name: SlotName;
-  data?: any;
+  data?: unknown;
 }
 
 export const Slot: React.FC<ISlotProps> = ({ name, data }) => {

package/src/core/hooks/index.ts

@@ -0,0 +1,6 @@
+export { useSlotComp } from './useSlotComp';
+export { useMiddlewareTransData } from './useMiddlewareTransData';
+export type {
+  UseMiddlewareTransDataOptions,
+  UseMiddlewareTransDataResult,
+} from './useMiddlewareTransData';

package/src/core/hooks/useMiddlewareTransData.ts

@@ -0,0 +1,68 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+import { registry } from '#/core/registry';
+import type { HookPoint } from '#/types/slots';
+
+export interface UseMiddlewareTransDataOptions<T> {
+  hookPoint: HookPoint;
+  baseData: T;
+  immediate?: boolean;
+}
+
+export interface UseMiddlewareTransDataResult<T> {
+  data: T | undefined;
+  loading: boolean;
+  error: Error | null;
+  run: () => Promise<T>;
+}
+
+export function useMiddlewareTransData<T>({
+  hookPoint,
+  baseData,
+  immediate = true,
+}: UseMiddlewareTransDataOptions<T>): UseMiddlewareTransDataResult<T> {
+  const [data, setData] = useState<T | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const immediateRef = useRef(immediate);
+  immediateRef.current = immediate;
+
+  const run = useCallback(async (): Promise<T> => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await registry.runMiddleware(hookPoint, baseData);
+      setData(result);
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setError(error);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  }, [hookPoint, baseData]);
+
+  useEffect(() => {
+    if (!immediateRef.current) return;
+
+    let cancelled = false;
+
+    run()
+      .then(result => {
+        if (cancelled) return;
+        setData(result);
+      })
+      .catch(() => {
+        // 错误已在 run 中设置到 state
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hookPoint, baseData, run]);
+
+  return { data, loading, error, run };
+}

package/src/core/hooks/useSlotComp.ts

@@ -1,5 +1,7 @@
-import { SlotName } from 'src/types/slots';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { SlotName } from '#/types/slots';
+
 import { registry } from '../registry';
 
 export const useSlotComp = (slotName: SlotName) => {

package/src/{blog → core}/hooks/use_plugins.ts

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
+
 import { pluginManager } from '#/core/pluginManager';
+import { PluginID } from '#/types/plugin';
 
 /**
  * 通用插件管理 hook
@@ -10,7 +12,7 @@ import { pluginManager } from '#/core/pluginManager';
  * @example
  * usePlugins(['sticker', 'fontstyler']);
  */
-export const usePlugins = (pluginIds: string[]) => {
+export const usePlugins = (pluginIds: Array<PluginID>) => {
   useEffect(() => {
     // 加载指定的插件
     pluginIds.forEach(id => {

package/src/core/pluginManager.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { IHostContext } from '#/types/hostApi';
 import { registry } from './registry';
 import type { SlotName, HookPoint } from '#/types/slots';

package/src/plugins/extra-cd/index.ts

@@ -0,0 +1,38 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin } from '#/types/plugin';
+import { TitleListItem } from '#/types/posts';
+
+class ExtraCd implements IPlugin {
+  id: string = 'extra-cd';
+  name: string = 'Extra CD';
+  description: string =
+    'Provides additional change directory functionalities for enhanced user experience.';
+  version: string = '1.0.0';
+  author: string = 'bbki.ng';
+
+  async onInstall(ctx: IHostContext): Promise<void> {
+    // Initialize any required resources or settings
+    ctx.api.registerMiddleware('transformTitleList', this.transformTitleList, this.id, 10);
+  }
+
+  async onDisable(): Promise<void> {
+    // Clean up active operations
+  }
+
+  onDestroy(): void {
+    // Release all resources
+  }
+
+  private transformTitleList = (titleList: Array<TitleListItem>) => {
+    return [
+      ...titleList,
+      {
+        name: 'cd ~',
+        to: '/',
+        children: 'cd ~',
+      },
+    ];
+  };
+}
+
+export default new ExtraCd();

package/src/plugins/manifest.ts

@@ -11,6 +11,13 @@ export const PLUGIN_MANIFEST = [
     version: '0.1.0',
     description: 'A sticker plugin',
   },
+  {
+    name: 'extra-cd',
+    id: 'extra-cd',
+    version: '0.1.0',
+    description:
+      'Provides additional change directory functionalities for enhanced user experience.',
+  },
   {
     name: 'fontstyler',
     id: 'fontstyler',

package/src/plugins/test/index.ts

@@ -1,5 +1,6 @@
 import { IHostContext } from '#/types/hostApi';
 import { IPlugin } from '#/types/plugin';
+
 import { Emoji } from './components/emoji';
 
 class TestPlugin implements IPlugin {

package/src/types/hostApi.ts

@@ -1,12 +1,20 @@
-import { HookPoint, SlotName } from './slots';
+import React from 'react';
+
 import { type FingerprintData } from '@/utils/fingerprints';
 
+import { HookPoint, SlotName } from './slots';
+
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
-  registerMiddleware: (point: HookPoint, fn: Function, pluginId: string, weight?: number) => void;
-  registerSlot: (
+  registerMiddleware: <T>(
+    point: HookPoint,
+    fn: (baseData: T) => T,
+    pluginId: string,
+    weight?: number
+  ) => void;
+  registerSlot: <T>(
     slotName: SlotName,
-    component: React.ComponentType<any>,
+    component: React.ComponentType<T>,
     pluginId: string,
     weight?: number
   ) => void;

package/src/types/plugin.ts

@@ -11,3 +11,5 @@ export interface IPlugin {
   onDisable?: () => Promise<void> | void;
   onDestroy?: () => void;
 }
+
+export type PluginID = 'sticker' | 'fontstyler' | 'extra-cd';

package/src/types/posts.ts

@@ -0,0 +1,6 @@
+export interface TitleListItem {
+  name: string;
+  to: string;
+  children: string;
+  className?: string;
+}

package/tsconfig.json

@@ -5,6 +5,7 @@
     "jsx": "react",
     "noEmit": true,
     "moduleResolution": "bundler",
+    "ignoreDeprecations": "6.0",
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/blog/*"],