@bbki.ng/site 5.8.2 → 5.8.4

package/src/core/plugin-system/services/systemUIService.ts

@@ -1,66 +1,23 @@
-import React from 'react';
-import { PathRouteProps } from 'react-router-dom';
-import { LinkProps } from '@bbki.ng/ui';
-
+import { createUIService } from '#/core/shared-service/factory/createUIService';
+import { createEventBus } from '#/core/utils/eventBus';
 import {
   ISystemUIService,
   SystemDataHookPoint,
   SystemSlotName,
 } from '#/core/shared-service/contract/IUIService';
 import { IPluginEntry, PluginID } from '#/types/plugin';
-import { IComPropsRegisteredToSlot } from '#/types/slots';
-import { createEventBus } from '#/core/utils/eventBus';
-import { buildEntrySlotCom } from '#/utils';
-
-import { IMiddlewareEntry, ISlotEntry } from '../registry';
 
-type RegistryEvents = {
-  'system:slots:changed': void;
-  'system:middleware:changed': SystemDataHookPoint;
-};
+const baseService = createUIService<SystemSlotName, SystemDataHookPoint>('system');
 
 export class SystemUIService implements ISystemUIService {
   private static instance: SystemUIService;
 
-  private slots = new Map<SystemSlotName, Array<ISlotEntry>>();
-  private middlewares = new Map<SystemDataHookPoint, IMiddlewareEntry<unknown>[]>();
+  private pluginEntries = new Map<string, IPluginEntry & { pluginId: PluginID }>();
 
-  private bus = createEventBus<RegistryEvents>();
+  private entryBus = createEventBus<{ pluginEntriesChanged: void }>();
 
   private constructor() {}
 
-  subscribeSlotChange(listener: () => void) {
-    return this.bus.on('system:slots:changed', listener);
-  }
-
-  registerMiddleware: <T>(
-    hookPoint: SystemDataHookPoint,
-    fn: (data: T) => T | Promise<T>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void = <T>(
-    hookPoint: SystemDataHookPoint,
-    fn: (data: T) => T | Promise<T>,
-    pluginId: PluginID,
-    weight = 0
-  ) => {
-    const existing = this.middlewares.get(hookPoint) || [];
-
-    const newEntry: IMiddlewareEntry<T> = {
-      id: `${pluginId}-${hookPoint}-middleware`,
-      pluginId,
-      fn,
-      weight,
-    };
-
-    const updated = [...existing, newEntry as IMiddlewareEntry<unknown>].sort(
-      (a, b) => (b.weight || 0) - (a.weight || 0)
-    );
-    this.middlewares.set(hookPoint, updated);
-
-    this.bus.emit('system:middleware:changed', hookPoint);
-  };
-
   static getInstance(): SystemUIService {
     if (!SystemUIService.instance) {
       SystemUIService.instance = new SystemUIService();
@@ -68,92 +25,40 @@ export class SystemUIService implements ISystemUIService {
     return SystemUIService.instance;
   }
 
-  registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void = (entry, id) => {
-    this.registerMiddleware(
-      'extendedRoutes',
-      (routes: Array<Omit<PathRouteProps, 'element'>>) => {
-        return [
-          ...routes,
-          {
-            path: entry.path,
-          },
-        ];
-      },
-      id,
-      10
-    );
-
-    this.registerSlot('route', buildEntrySlotCom(entry), id);
-
-    if (!entry.label) return;
+  registerSlot = baseService.registerSlot.bind(baseService);
+  registerMiddleware = baseService.registerMiddleware.bind(baseService);
+  getSlotEntries = baseService.getSlotEntries.bind(baseService);
+  getComponents = baseService.getComponents.bind(baseService);
+  subscribeSlotChange = baseService.subscribeSlotChange.bind(baseService);
+  subscribeMiddlewareChange = baseService.subscribeMiddlewareChange.bind(baseService);
+  runMiddlewares = baseService.runMiddlewares.bind(baseService);
 
-    this.registerMiddleware(
-      'transformCoverEntry',
-      (entries: Array<LinkProps>) => {
-        return [
-          ...entries,
-          {
-            to: entry.path,
-            children: entry.label,
-          },
-        ];
-      },
-      id,
-      10
-    );
+  registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void = (entry, id) => {
+    this.pluginEntries.set(entry.path, { ...entry, pluginId: id });
+    this.entryBus.emit('pluginEntriesChanged', undefined);
   };
 
-  registerSlot: (
-    slotName: SystemSlotName,
-    component: React.ComponentType<IComPropsRegisteredToSlot>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void = (slotName, component, pluginId, weight = 0) => {
-    const existing = this.slots.get(slotName) || [];
-
-    const newEntry: ISlotEntry = {
-      id: `${pluginId}-${component.name || 'comp'}`,
-      pluginId,
-      component,
-      weight,
-    };
-
-    // 插入并按权重排序（权重大的在前）
-    const updated = [...existing, newEntry].sort((a, b) => b.weight - a.weight);
-    this.slots.set(slotName, updated);
+  getPluginEntries = (): Array<IPluginEntry & { pluginId: PluginID }> => {
+    return Array.from(this.pluginEntries.values());
+  };
 
-    this.bus.emit('system:slots:changed', undefined);
+  subscribePluginEntryChange = (listener: () => void): (() => void) => {
+    return this.entryBus.on('pluginEntriesChanged', listener);
   };
 
-  unregisterAllByPluginId(pluginId: string) {
-    this.slots.forEach((entries, slotName) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.slots.set(slotName, filtered);
-    });
+  unregisterAllByPluginId: (pluginId: string) => void = pluginId => {
+    baseService.unregisterAllByPluginId(pluginId);
 
-    this.middlewares.forEach((entries, point) => {
-      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
-      this.middlewares.set(point, filtered);
-      this.bus.emit('system:middleware:changed', point);
+    let changed = false;
+    this.pluginEntries.forEach((entry, path) => {
+      if (entry.pluginId === pluginId) {
+        this.pluginEntries.delete(path);
+        changed = true;
+      }
     });
 
-    this.bus.emit('system:slots:changed', undefined);
-  }
-
-  getComponents(slotName: SystemSlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {
-    return (this.slots.get(slotName) || []).map(entry => entry.component);
-  }
-
-  subscribeMiddlewareChange(listener: (point: SystemDataHookPoint) => void) {
-    return this.bus.on('system:middleware:changed', listener);
-  }
-
-  async runMiddlewares<T>(point: SystemDataHookPoint, 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;
+    if (changed) {
+      this.entryBus.emit('pluginEntriesChanged', undefined);
     }
-    return result;
-  }
+  };
 }

package/src/core/shared-service/contract/IUIService.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { ISlotEntry } from '#/core/plugin-system/registry';
 import { IPluginEntry, PluginID } from '#/types/plugin';
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 
@@ -23,27 +24,24 @@ export interface IBaseUIService<T extends string, K extends string> {
     pluginId: PluginID,
     weight?: number
   ) => void;
+
+  unregisterAllByPluginId(pluginId: string): void;
+
+  getSlotEntries(slotName: T): ISlotEntry[];
+
+  getComponents(slotName: T): React.ComponentType<IComPropsRegisteredToSlot>[];
+
+  subscribeSlotChange(listener: () => void): () => void;
+
+  subscribeMiddlewareChange(listener: (point: K) => void): () => void;
+
+  runMiddlewares: <S>(point: K, data: S) => Promise<S>;
 }
 
-export type SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'route' | 'pageFooter';
+export type SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'pageFooter' | 'nav-right';
 
-export type SystemDataHookPoint =
-  | 'extendedRoutes'
-  | 'transformBreadcrumbPath'
-  | 'transformCoverEntry';
+export type SystemDataHookPoint = 'transformBreadcrumbPath' | 'transformEntryLink';
 
 export interface ISystemUIService extends IBaseUIService<SystemSlotName, SystemDataHookPoint> {
-  registerMiddleware: <S>(
-    hookPoint: SystemDataHookPoint,
-    fn: (data: S) => S | Promise<S>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void;
-  registerSlot: (
-    slotName: SystemSlotName,
-    component: React.ComponentType<IComPropsRegisteredToSlot>,
-    pluginId: PluginID,
-    weight?: number
-  ) => void;
   registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void;
 }

package/src/core/shared-service/factory/createUIService.ts

@@ -0,0 +1,121 @@
+import type React from 'react';
+
+import type { IMiddlewareEntry, ISlotEntry } from '#/core/plugin-system/registry';
+import { createEventBus } from '#/core/utils/eventBus';
+import type { PluginID } from '#/types/plugin';
+import type { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export interface IUIService<TSlot extends string, THook extends string> {
+  registerSlot(
+    slotName: TSlot,
+    component: React.ComponentType<IComPropsRegisteredToSlot>,
+    pluginId: PluginID,
+    weight?: number
+  ): void;
+
+  registerMiddleware<T>(
+    hookPoint: THook,
+    fn: (data: T) => T | Promise<T>,
+    pluginId: PluginID,
+    weight?: number
+  ): void;
+
+  unregisterAllByPluginId(pluginId: string): void;
+
+  getSlotEntries(slotName: TSlot): ISlotEntry[];
+
+  getComponents(slotName: TSlot): React.ComponentType<IComPropsRegisteredToSlot>[];
+
+  subscribeSlotChange(listener: () => void): () => void;
+
+  subscribeMiddlewareChange(listener: (point: THook) => void): () => void;
+
+  runMiddlewares<T>(point: THook, data: T): Promise<T>;
+}
+
+export function createUIService<TSlot extends string, THook extends string>(
+  _: string
+): IUIService<TSlot, THook> {
+  const slots = new Map<TSlot, Array<ISlotEntry>>();
+  const middlewares = new Map<THook, Array<IMiddlewareEntry<unknown>>>();
+  const bus = createEventBus<{
+    slotsChanged: void;
+    middlewareChanged: THook;
+  }>();
+
+  return {
+    registerSlot(slotName, component, pluginId, weight = 0) {
+      const existing = slots.get(slotName) || [];
+      const newEntry: ISlotEntry = {
+        id: `${pluginId}-${slotName}-${component.name || 'comp'}`,
+        pluginId,
+        component,
+        weight,
+      };
+      const updated = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+      slots.set(slotName, updated);
+      bus.emit('slotsChanged', undefined);
+    },
+
+    registerMiddleware(hookPoint, fn, pluginId, weight = 0) {
+      const existing = middlewares.get(hookPoint) || [];
+      const newEntry: IMiddlewareEntry<unknown> = {
+        id: `${pluginId}-${hookPoint}-middleware`,
+        pluginId,
+        fn: fn as (data: unknown) => unknown | Promise<unknown>,
+        weight,
+      };
+      const updated = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+      middlewares.set(hookPoint, updated);
+      bus.emit('middlewareChanged', hookPoint);
+    },
+
+    unregisterAllByPluginId(pluginId) {
+      let slotsChanged = false;
+      slots.forEach((entries, slotName) => {
+        const filtered = entries.filter(entry => entry.pluginId !== pluginId);
+        if (filtered.length !== entries.length) {
+          slots.set(slotName, filtered);
+          slotsChanged = true;
+        }
+      });
+
+      middlewares.forEach((entries, point) => {
+        const filtered = entries.filter(entry => entry.pluginId !== pluginId);
+        if (filtered.length !== entries.length) {
+          middlewares.set(point, filtered);
+          bus.emit('middlewareChanged', point);
+        }
+      });
+
+      if (slotsChanged) {
+        bus.emit('slotsChanged', undefined);
+      }
+    },
+
+    getSlotEntries(slotName) {
+      return slots.get(slotName) || [];
+    },
+
+    getComponents(slotName) {
+      return (slots.get(slotName) || []).map(entry => entry.component);
+    },
+
+    subscribeSlotChange(listener) {
+      return bus.on('slotsChanged', listener as (data: unknown) => void);
+    },
+
+    subscribeMiddlewareChange(listener) {
+      return bus.on('middlewareChanged', listener as (data: unknown) => void);
+    },
+
+    async runMiddlewares(point, data) {
+      const fns = (middlewares.get(point) || []).map(entry => entry.fn);
+      let result: unknown = data;
+      for (const fn of fns) {
+        result = await fn(result);
+      }
+      return result as typeof data;
+    },
+  };
+}

package/src/core/shared-service/factory/createUIServiceReactKit.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import type { IComPropsRegisteredToSlot } from '#/types/slots';
+
+import type { IUIService } from './createUIService';
+
+export interface UseMiddlewareRunnerOptions<THook extends string> {
+  hookPoint: THook;
+  onMiddlewareChange?: () => void;
+}
+
+export interface UseMiddlewareRunnerResult<T> {
+  loading: boolean;
+  error: Error | null;
+  run: (inputData: T) => Promise<T>;
+}
+
+export function createSlotHook<TSlot extends string>(service: IUIService<TSlot, string>) {
+  return function useSlotComp(slotName: TSlot) {
+    const [components, setComponents] = useState<React.ComponentType<IComPropsRegisteredToSlot>[]>(
+      () => service.getComponents(slotName)
+    );
+
+    useEffect(() => {
+      setComponents(service.getComponents(slotName));
+
+      const unsubscribe = service.subscribeSlotChange(() => {
+        setComponents(service.getComponents(slotName));
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }, [slotName]);
+
+    return components;
+  };
+}
+
+export function createSlotComponent<TSlot extends string>(service: IUIService<TSlot, string>) {
+  return function Slot({
+    name,
+    data,
+    placeholder,
+  }: {
+    name: TSlot;
+    data?: unknown;
+    placeholder?: React.ReactNode;
+  }) {
+    const [entries, setEntries] = useState(() => service.getSlotEntries(name));
+
+    useEffect(() => {
+      setEntries(service.getSlotEntries(name));
+
+      const unsubscribe = service.subscribeSlotChange(() => {
+        setEntries(service.getSlotEntries(name));
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }, [name]);
+
+    if (entries.length === 0) {
+      return <>{placeholder}</>;
+    }
+
+    return (
+      <>
+        {entries.map(({ id, component: Component }) => (
+          <Component key={id} data={data} />
+        ))}
+      </>
+    );
+  };
+}
+
+export function createMiddlewareRunnerHook<THook extends string>(
+  service: IUIService<string, THook>
+) {
+  return function useMiddlewareRunner<T>({
+    hookPoint,
+    onMiddlewareChange,
+  }: UseMiddlewareRunnerOptions<THook>): UseMiddlewareRunnerResult<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 service.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 = service.subscribeMiddlewareChange(hook => {
+        if (hook === hookPoint) {
+          onMiddlewareChange?.();
+        }
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    }, [hookPoint, onMiddlewareChange]);
+
+    return { loading, error, run };
+  };
+}
+
+export function createMiddlewareTransformedDataHook<THook extends string>(
+  useMiddlewareRunner: <T>(opts: UseMiddlewareRunnerOptions<THook>) => UseMiddlewareRunnerResult<T>
+) {
+  return function useMiddlewareTransformedData<T>(hookPoint: THook, 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,
+    });
+
+    useEffect(() => {
+      runRef.current = run;
+    }, [run]);
+
+    useEffect(() => {
+      run(defaultValue).then(setResult);
+    }, [defaultValue, run]);
+
+    return result;
+  };
+}

package/src/plugins/blog/components/BlogSlotCom.tsx

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

package/src/plugins/blog/hooks/useMiddlewareTransData.ts

@@ -1,79 +1,14 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  createMiddlewareRunnerHook,
+  createMiddlewareTransformedDataHook,
+} from '#/core/shared-service/factory/createUIServiceReactKit';
 
 import { BlogUIService } from '../services/BlogUIService';
-import { BlogDataHookPoint } from '../services/IBlogUIService';
 
-export interface UseMiddlewareTransDataOptions {
-  hookPoint: BlogDataHookPoint;
-  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 BlogUIService.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 = BlogUIService.getInstance().subscribeMiddlewareChange(hook => {
-      if (hook === hookPoint) {
-        onMiddlewareChange?.();
-      }
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [hookPoint, onMiddlewareChange]);
-
-  return { loading, error, run };
-}
-
-export const useMiddlewareTransformedData = <T>(hookPoint: BlogDataHookPoint, 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;
-};
+export const useMiddlewareRunner = createMiddlewareRunnerHook(BlogUIService.getInstance());
+export const useMiddlewareTransformedData =
+  createMiddlewareTransformedDataHook(useMiddlewareRunner);
+export type {
+  UseMiddlewareRunnerOptions,
+  UseMiddlewareRunnerResult as UseMiddlewareTransformedDataResult,
+} from '#/core/shared-service/factory/createUIServiceReactKit';

package/src/plugins/blog/hooks/use_blog_slot_com.ts

@@ -1,27 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { createSlotHook } from '#/core/shared-service/factory/createUIServiceReactKit';
 
-import { IComPropsRegisteredToSlot } from '#/types/slots';
-
-import { BlogSlotName } from '../services/IBlogUIService';
 import { BlogUIService } from '../services/BlogUIService';
 
-export const useBlogSlotComp = (slotName: BlogSlotName) => {
-  const [components, setComponents] = useState<React.ComponentType<IComPropsRegisteredToSlot>[]>(
-    () => BlogUIService.getInstance().getComponents(slotName)
-  );
-
-  useEffect(() => {
-    // setComponents(BlogUIService.getInstance().getComponents(slotName));
-
-    const unsubscribe = BlogUIService.getInstance().subscribeSlotChange(() => {
-      const comps = BlogUIService.getInstance().getComponents(slotName);
-      setComponents(comps);
-    });
-
-    return () => {
-      unsubscribe();
-    };
-  }, [slotName]);
-
-  return components;
-};
+export const useBlogSlotComp = createSlotHook(BlogUIService.getInstance());

package/src/plugins/blog/index.ts

@@ -15,6 +15,8 @@ export class BlogPlugin extends BBPlugin {
 
   private _serviceRegistry?: ServiceRegistry;
 
+  private _unsubscribePluginUninstall?: () => void;
+
   override onInstall = async (ctx: IHostContext) => {
     ctx.service.register('blog:uiService', BlogUIService.getInstance());
 
@@ -28,7 +30,9 @@ export class BlogPlugin extends BBPlugin {
       return;
     }
 
-    coreService.subscribePluginUninstall(this.handlePluginUninstall);
+    this._unsubscribePluginUninstall = coreService.subscribePluginUninstall(
+      this.handlePluginUninstall
+    );
 
     systemUIService?.registerPluginEntry(
       {
@@ -50,6 +54,7 @@ export class BlogPlugin extends BBPlugin {
   override onDestroy?: (() => void) | undefined = () => {
     BlogUIService.getInstance().unregisterAllByPluginId(this.id);
     this._serviceRegistry?.unregister('blog:uiService');
+    this._unsubscribePluginUninstall?.();
   };
 
   private handlePluginUninstall = (payload: PluginID) => {