@bbki.ng/site 5.8.2 → 5.8.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @bbki.ng/site
 
+## 5.8.4
+
+### Patch Changes
+
+- 5efa382: move store entry to nav
+- Updated dependencies [5efa382]
+  - @bbki.ng/ui@0.2.20
+
+## 5.8.3
+
+### Patch Changes
+
+- b74177a: refactor ui service
+
 ## 5.8.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.8.2",
+  "version": "5.8.4",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -15,7 +15,7 @@
     "react-router-dom": "6",
     "sonner": "^2.0.7",
     "swr": "^2.2.5",
-    "@bbki.ng/ui": "0.2.19"
+    "@bbki.ng/ui": "0.2.20"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/app/app.tsx

@@ -3,7 +3,6 @@ import { Route, Routes } from 'react-router-dom';
 
 import { BotRedirect } from '#/app/components/bot';
 import { BBContext } from '#/app/context/bbcontext';
-import { Slot } from '#/core/components/SlotComp';
 import { usePlugins } from '#/core/hooks/use_plugins';
 import { Cover } from '#/app/components/cover';
 import { SWR } from '#/app/swr';
@@ -20,13 +19,10 @@ const AppRoutes = () => {
       <Route path="/" element={<BaseLayout />}>
         <Route index element={<Cover />} />
         <Route path="bot" element={<BotRedirect />} />
-        {pluginEntries?.map(route => (
-          <Route
-            key={route.path}
-            path={`${route.path}/*`}
-            element={<Slot name="route" data={route} />}
-          />
-        ))}
+        {pluginEntries?.map(route => {
+          const Com = route.pageComponent;
+          return <Route key={route.path} path={`${route.path}/*`} element={<Com data={route} />} />;
+        })}
         <Route path="*" element={null} />
       </Route>
     </Routes>

package/src/app/components/BaseLayout.tsx

@@ -14,9 +14,7 @@ export const BaseLayout = () => {
 
   const nav = useNavigate();
 
-  const defaultLogo = (
-    <Logo className="mr-2 cursor-pointer hover:opacity-80" onClick={() => nav('/')} />
-  );
+  const defaultLogo = <Logo className="cursor-pointer hover:opacity-80" onClick={() => nav('/')} />;
 
   return (
     <>
@@ -31,6 +29,7 @@ export const BaseLayout = () => {
               paddingTop: 'calc(var(--safe-top) + 4px)',
               transition: 'all .2s ease-in-out',
             }}
+            rightElement={<Slot name="nav-right" data={paths} />}
           />
         }
         main={

package/src/app/components/cover/index.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { LinkProps, LinkListProps, LinkList } from '@bbki.ng/ui';
 
-import { useMiddlewareRunner } from '#/core/hooks';
+import { usePluginEntries } from '#/app/hooks/use_plugin_entries';
+import { useMiddlewareTransformedData } from '#/core/hooks/useMiddlewareTransData';
 
 const CenterLinkList = (props: LinkListProps) => {
   return (
@@ -11,25 +12,26 @@ const CenterLinkList = (props: LinkListProps) => {
   );
 };
 
-const baseEntries: Array<LinkProps> = [];
-
 export const Cover = (_: { className?: string }) => {
-  const [entries, setEntries] = React.useState<Array<LinkProps>>(baseEntries);
+  const pluginEntries = usePluginEntries();
 
-  const { run } = useMiddlewareRunner<Array<LinkProps>>({
-    hookPoint: 'transformCoverEntry',
-    onMiddlewareChange: () => {
-      run(baseEntries).then(setEntries);
-    },
-  });
+  const entries: Array<LinkProps> = React.useMemo(() => {
+    return pluginEntries
+      .filter(entry => entry.label)
+      .map(entry => ({
+        to: entry.path,
+        children: entry.label,
+      })) as Array<LinkProps>;
+  }, [pluginEntries]);
 
-  useEffect(() => {
-    run(baseEntries).then(setEntries);
-  }, [run]);
+  const transformedEntries = useMiddlewareTransformedData(
+    'transformEntryLink',
+    entries
+  ) as Array<LinkProps>;
 
   return (
     <>
-      <CenterLinkList className="select-none" links={entries} />
+      <CenterLinkList className="select-none" links={transformedEntries} />
     </>
   );
 };

package/src/app/hooks/use_plugin_entries.ts

@@ -1,39 +1,29 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { type PathRouteProps } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 
-import { useMiddlewareRunner } from '#/core/hooks';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
+import { IPluginEntry } from '#/types/plugin';
 
 const protectedRoutesSet = new Set<string>(['/bot', '/', 'default']);
 
-type PluginRoute = Omit<PathRouteProps, 'element'>;
-
 export const usePluginEntries = () => {
-  const [fullRoutes, setFullRoutes] = useState<Array<PluginRoute>>([]);
-  const runRef = useRef<(input: Array<PluginRoute>) => Promise<Array<PluginRoute>>>(() =>
-    Promise.resolve([])
+  const [entries, setEntries] = useState<Array<IPluginEntry>>(() =>
+    SystemUIService.getInstance().getPluginEntries()
   );
 
-  const onMiddlewareChange = useCallback(() => {
-    runRef.current([]).then(setFullRoutes);
-  }, []);
-
-  const { run } = useMiddlewareRunner<Array<PluginRoute>>({
-    hookPoint: 'extendedRoutes',
-    onMiddlewareChange,
-  });
+  useEffect(() => {
+    const service = SystemUIService.getInstance();
+    setEntries(service.getPluginEntries());
 
-  runRef.current = run;
+    const unsubscribe = service.subscribePluginEntryChange(() => {
+      setEntries(service.getPluginEntries());
+    });
 
-  useEffect(() => {
-    run([]).then(setFullRoutes);
-  }, [run]);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
 
-  const safeRoutes = fullRoutes?.filter(route => {
-    if ('path' in route) {
-      return !protectedRoutesSet.has(route.path);
-    }
-    return false;
-  }) as Array<PluginRoute>;
+  const safeEntries = entries?.filter(entry => !protectedRoutesSet.has(entry.path));
 
-  return safeRoutes ?? [];
+  return safeEntries ?? [];
 };

package/src/core/components/SlotComp.tsx

@@ -1,27 +1,14 @@
 import React from 'react';
 
-import { useSlotComp } from '../hooks/useSlotComp';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
+import { createSlotComponent } from '#/core/shared-service/factory/createUIServiceReactKit';
+
 import { SystemSlotName } from '../shared-service/contract/IUIService';
 
 export interface ISlotProps {
   name: SystemSlotName;
   data?: unknown;
-
   placeholder?: React.ReactNode;
 }
 
-export const Slot: React.FC<ISlotProps> = ({ name, data, placeholder }) => {
-  const components = useSlotComp(name);
-
-  if (components.length === 0) {
-    return <>{placeholder}</>;
-  }
-
-  return (
-    <>
-      {components.map((Component, index) => (
-        <Component key={index} data={data} />
-      ))}
-    </>
-  );
-};
+export const Slot = createSlotComponent<SystemSlotName>(SystemUIService.getInstance());

package/src/core/hooks/index.ts

@@ -1,6 +1,6 @@
 export { useSlotComp } from './useSlotComp';
 export { useMiddlewareRunner } from './useMiddlewareTransData';
 export type {
-  UseMiddlewareTransDataOptions,
-  UseMiddlewareTransDataResult,
+  UseMiddlewareRunnerOptions as UseMiddlewareTransDataOptions,
+  UseMiddlewareRunnerResult as UseMiddlewareTransDataResult,
 } from './useMiddlewareTransData';

package/src/core/hooks/useMiddlewareTransData.ts

@@ -1,82 +1,13 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-
-import { SystemUIService } from '../plugin-system/services/systemUIService';
-import { SystemDataHookPoint } from '../shared-service/contract/IUIService';
-
-export interface UseMiddlewareTransDataOptions {
-  hookPoint: SystemDataHookPoint;
-  onMiddlewareChange?: () => void; // 通知外部，由外部决定是否 run
-}
-
-export interface UseMiddlewareTransDataResult<T> {
-  loading: boolean;
-  error: Error | null;
-  run: (inputData: T) => Promise<T>;
-}
-
-export function useMiddlewareRunner<T>({
-  hookPoint,
-  onMiddlewareChange,
-}: UseMiddlewareTransDataOptions): UseMiddlewareTransDataResult<T> {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const run = useCallback(
-    async (inputData: T) => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await SystemUIService.getInstance().runMiddlewares(hookPoint, inputData);
-        return result;
-      } catch (err) {
-        const error = err instanceof Error ? err : new Error(String(err));
-        setError(error);
-        throw error;
-      } finally {
-        setLoading(false);
-      }
-    },
-    [hookPoint]
-  );
-
-  // 仅通知，不执行
-  useEffect(() => {
-    const unsubscribe = SystemUIService.getInstance().subscribeMiddlewareChange(hook => {
-      if (hook === hookPoint) {
-        onMiddlewareChange?.();
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [hookPoint, onMiddlewareChange]);
-
-  return { loading, error, run };
-}
-
-export const useMiddlewareTransformedData = <T>(
-  hookPoint: SystemDataHookPoint,
-  defaultValue: T
-) => {
-  const [result, setResult] = useState<T>(defaultValue);
-
-  const runRef = useRef<(input: T) => Promise<T>>(() => Promise.resolve(defaultValue));
-
-  const onMiddlewareChange = useCallback(() => {
-    runRef.current(defaultValue).then(setResult);
-  }, [defaultValue]);
-
-  const { run } = useMiddlewareRunner<T>({
-    hookPoint,
-    onMiddlewareChange,
-  });
-
-  runRef.current = run;
-
-  useEffect(() => {
-    run(defaultValue).then(setResult);
-  }, [defaultValue, run]);
-
-  return result;
-};
+import {
+  createMiddlewareRunnerHook,
+  createMiddlewareTransformedDataHook,
+} from '#/core/shared-service/factory/createUIServiceReactKit';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
+
+export const useMiddlewareRunner = createMiddlewareRunnerHook(SystemUIService.getInstance());
+export const useMiddlewareTransformedData =
+  createMiddlewareTransformedDataHook(useMiddlewareRunner);
+export type {
+  UseMiddlewareRunnerOptions,
+  UseMiddlewareRunnerResult,
+} from '#/core/shared-service/factory/createUIServiceReactKit';

package/src/core/hooks/useSlotComp.ts

@@ -1,27 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { createSlotHook } from '#/core/shared-service/factory/createUIServiceReactKit';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
 
-import { IComPropsRegisteredToSlot } from '#/types/slots';
-
-import { SystemUIService } from '../plugin-system/services/systemUIService';
-import { SystemSlotName } from '../shared-service/contract/IUIService';
-
-export const useSlotComp = (slotName: SystemSlotName) => {
-  const [components, setComponents] = useState<React.ComponentType<IComPropsRegisteredToSlot>[]>(
-    () => SystemUIService.getInstance().getComponents(slotName)
-  );
-
-  useEffect(() => {
-    setComponents(SystemUIService.getInstance().getComponents(slotName));
-
-    const unsubscribe = SystemUIService.getInstance().subscribeSlotChange(() => {
-      const comps = SystemUIService.getInstance().getComponents(slotName);
-      setComponents(comps);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [slotName]);
-
-  return components;
-};
+export const useSlotComp = createSlotHook(SystemUIService.getInstance());

package/src/core/hooks/use_plugins.ts

@@ -16,14 +16,15 @@ const usePluginsLoading = () => {
   }, [isLoading]);
 
   useEffect(() => {
-    let unregister: (() => void) | undefined;
+    let unregisters = new Map<string, () => void>();
+
     const unsubscribe = CoreService.getInstance().subscribePluginLoading(payload => {
-      unregister = setGlobalLoading(payload.id, payload.loading);
+      unregisters.set(payload.id, setGlobalLoading(payload.id, payload.loading));
     });
 
     return () => {
       unsubscribe();
-      unregister?.();
+      unregisters.forEach(unregister => unregister());
     };
   }, [setGlobalLoading]);
 };

package/src/core/plugin-system/pluginManager.ts

@@ -78,8 +78,7 @@ class PluginManager {
 
       const perm = p.getMeta().perm || 'guest';
       if (perm === 'admin' && !AdminPluginIDSet.has(pluginId)) {
-        console.error(`Plugin ${pluginId} requires admin permission, but it's not trusted.`);
-        return;
+        throw new Error(`Plugin ${pluginId} requires admin permission, but it's not trusted.`);
       }
 
       const ctx = this.createHostContext(perm);
@@ -108,6 +107,10 @@ class PluginManager {
       await plugin.onDisable();
     }
 
+    if (plugin.onDestroy) {
+      plugin.onDestroy();
+    }
+
     this.activePlugins.delete(pluginId);
 
     SystemUIService.getInstance().unregisterAllByPluginId(plugin.id);

package/src/core/plugin-system/pluginManifestService.ts

@@ -2,7 +2,7 @@ import { cfApiFetcher } from '#/app/utils';
 import { FALLBACK_MANIFEST } from '#/core/plugin-system/manifest';
 import { IPluginManifestEntry, PluginID } from '#/types/plugin';
 
-const KnownPluginIDSet = new Set<string>(FALLBACK_MANIFEST.map(entry => entry.id));
+// const KnownPluginIDSet = new Set<string>(FALLBACK_MANIFEST.map(entry => entry.id));
 
 interface PluginsApiResponse {
   status: string;
@@ -48,22 +48,6 @@ class PluginManifestService {
         if (res.status === 'success' && Array.isArray(res.data)) {
           const validated = res.data
             .map((item): IPluginManifestEntry | null => {
-              if (!KnownPluginIDSet.has(item.id)) {
-                console.warn(`[PluginManifestService] Unknown plugin id from server: ${item.id}`);
-                return null;
-              }
-
-              let dependencies: PluginID[] | undefined;
-              if (item.dependencies) {
-                try {
-                  dependencies = item.dependencies.filter(p => KnownPluginIDSet.has(p));
-                } catch {
-                  console.warn(
-                    `[PluginManifestService] Failed to parse dependencies for plugin: ${item.id}`
-                  );
-                }
-              }
-
               return {
                 id: item.id as PluginID,
                 name: item.name,
@@ -71,7 +55,7 @@ class PluginManifestService {
                 description: item.description,
                 perm: (item.perm as 'guest' | 'admin' | undefined) || 'guest',
                 icon: item.icon,
-                dependencies,
+                dependencies: item.dependencies || [],
               };
             })
             .filter((item): item is IPluginManifestEntry => item !== null);

package/src/core/plugin-system/pluginStore.ts

@@ -12,6 +12,7 @@ export class PluginStore {
     this.parse();
   }
 
+  // TODO: check circular dependency when install plugin, and also check if all dependencies are installed before install a plugin
   private checkDep = (id: PluginID): boolean => {
     const manifest = PluginManifestService.getInstance().getPlugin(id);
     if (!manifest) {

package/src/core/plugin-system/registry.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
-
-import { createEventBus } from '../utils/eventBus';
+import type { IComPropsRegisteredToSlot } from '#/types/slots';
 
 export interface ISlotEntry {
   id: string;
@@ -17,106 +15,3 @@ export interface IMiddlewareEntry<T> {
   pluginId: string;
   weight?: number;
 }
-
-type RegistryEvents = {
-  'components:changed': void;
-  'middleware:changed': HookPoint;
-};
-
-export class Registry {
-  private slots = new Map<SlotName, ISlotEntry[]>();
-
-  private bus = createEventBus<RegistryEvents>();
-
-  private middlewares = new Map<HookPoint, IMiddlewareEntry<unknown>[]>();
-
-  subscribeMiddleware(hookPoint: HookPoint, listener: () => void) {
-    return this.bus.on('middleware:changed', point => {
-      if (point === hookPoint) {
-        listener();
-      }
-    });
-  }
-
-  subscribe(listener: () => void) {
-    return this.bus.on('components:changed', listener);
-  }
-
-  registerComponent(
-    slot: SlotName,
-    component: React.ComponentType<IComPropsRegisteredToSlot>,
-    pluginId: string,
-    weight = 0
-  ) {
-    const existing = this.slots.get(slot) || [];
-
-    const newEntry: ISlotEntry = {
-      id: `${pluginId}-${component.name || 'comp'}`,
-      pluginId,
-      component,
-      weight,
-    };
-
-    // 插入并按权重排序（权重大的在前）
-    const newList = [...existing, newEntry].sort((a, b) => b.weight - a.weight);
-    this.slots.set(slot, newList);
-
-    this.bus.emit('components:changed', undefined);
-  }
-
-  unregisterAllByPluginId(pluginId: string) {
-    // 1. 清理 UI 槽位
-    this.slots.forEach((entries, slotName) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.slots.set(slotName, filtered);
-    });
-
-    // 2. 清理中间件
-    this.middlewares.forEach((entries, point) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.middlewares.set(point, filtered);
-    });
-
-    console.log(`[Registry] All resources for plugin "${pluginId}" have been cleared.`);
-
-    this.bus.emit('components:changed', undefined);
-  }
-
-  registerMiddleware<T>(
-    hookPoint: HookPoint,
-    fn: (data: T) => Promise<T> | T,
-    pluginId: string,
-    weight = 0
-  ) {
-    const existing = this.middlewares.get(hookPoint) || [];
-
-    const newEntry: IMiddlewareEntry<T> = {
-      id: `${pluginId}-${fn.name || 'middleware'}`,
-      pluginId,
-      fn,
-      weight,
-    };
-
-    // 插入并按权重排序（权重大的在前）
-    const newList = [...existing, newEntry as IMiddlewareEntry<unknown>].sort(
-      (a, b) => (b.weight || 0) - (a.weight || 0)
-    );
-
-    this.middlewares.set(hookPoint, newList);
-
-    this.bus.emit('middleware:changed', hookPoint);
-  }
-
-  getComponents(slotName: SlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {
-    return (this.slots.get(slotName) || []).map(entry => entry.component);
-  }
-
-  async runMiddleware<T>(point: HookPoint, data: T): Promise<T> {
-    const fns = (this.middlewares.get(point) || []).map(entry => entry.fn);
-    let result = data;
-    for (const fn of fns) {
-      result = (await fn(result)) as T;
-    }
-    return result;
-  }
-}