@bbki.ng/site 5.6.7 → 5.8.0

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

@@ -0,0 +1,190 @@
+import { IPluginStoreEntry, PluginID } from '#/types/plugin';
+
+import { pluginManager } from './pluginManager';
+import { PluginManifestService } from './pluginManifestService';
+
+export class PluginStore {
+  private static instance: PluginStore;
+
+  private installedSet: Set<PluginID> = new Set();
+
+  private constructor() {
+    this.parse();
+  }
+
+  private checkDep = (id: PluginID): boolean => {
+    const manifest = PluginManifestService.getInstance().getPlugin(id);
+    if (!manifest) {
+      console.warn(`[PluginStore] Manifest not found for plugin: ${id}`);
+      return false;
+    }
+
+    if (!manifest.dependencies || manifest.dependencies.length === 0) {
+      return true;
+    }
+
+    for (const depId of manifest.dependencies) {
+      if (!this.isPluginInstalled(depId)) {
+        console.warn(`[PluginStore] Dependency ${depId} for plugin ${id} is not installed`);
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  private parse = () => {
+    this.installedSet.clear();
+    const installedPluginsStr = localStorage.getItem('installed_plugins');
+    if (installedPluginsStr) {
+      try {
+        const entries = JSON.parse(installedPluginsStr) as Array<PluginID>;
+        entries.forEach(id => this.installedSet.add(id));
+      } catch (e) {
+        console.error('Failed to parse installed plugins from localStorage', e);
+      }
+    }
+
+    try {
+      this.ensureRightOrder(this.installedSet);
+    } catch (error) {
+      console.error('Failed to ensure correct plugin load order:', error);
+    }
+
+    return this.installedSet;
+  };
+
+  private buildDependencyGraph = (ids: Set<PluginID>): Map<PluginID, PluginID[]> => {
+    const graph = new Map<PluginID, PluginID[]>();
+    const manifest = PluginManifestService.getInstance().getAllPlugins();
+
+    ids.forEach(id => {
+      graph.set(id, []);
+    });
+
+    manifest.forEach(plugin => {
+      if (ids.has(plugin.id)) {
+        const deps = plugin.dependencies || [];
+        deps.forEach(dep => {
+          if (ids.has(dep)) {
+            if (!graph.has(dep)) {
+              graph.set(dep, []);
+            }
+            graph.get(dep)!.push(plugin.id);
+          }
+        });
+      }
+    });
+
+    return graph;
+  };
+
+  private topologicalSortKahn = (graph: Map<PluginID, PluginID[]>): PluginID[] => {
+    const inDegree = new Map<PluginID, number>();
+    graph.forEach((deps, plugin) => {
+      if (!inDegree.has(plugin)) {
+        inDegree.set(plugin, 0);
+      }
+      deps.forEach(dep => {
+        inDegree.set(dep, (inDegree.get(dep) || 0) + 1);
+      });
+    });
+
+    const queue: PluginID[] = [];
+    inDegree.forEach((degree, plugin) => {
+      if (degree === 0) {
+        queue.push(plugin);
+      }
+    });
+
+    const loadOrder: PluginID[] = [];
+    while (queue.length > 0) {
+      const current = queue.shift()!;
+      loadOrder.push(current);
+
+      const deps = graph.get(current) || [];
+      deps.forEach(dep => {
+        inDegree.set(dep, inDegree.get(dep)! - 1);
+        if (inDegree.get(dep) === 0) {
+          queue.push(dep);
+        }
+      });
+    }
+
+    if (loadOrder.length !== graph.size) {
+      throw new Error('Circular dependency detected among plugins');
+    }
+
+    return loadOrder;
+  };
+
+  private ensureRightOrder = (ids: Set<PluginID>) => {
+    const graph = this.buildDependencyGraph(ids);
+    const loadOrder = this.topologicalSortKahn(graph);
+
+    // write back to installedSet in the correct order without create a new Set to preserve reference
+    if (loadOrder.length === ids.size) {
+      this.installedSet.clear();
+      loadOrder.forEach(id => this.installedSet.add(id));
+    }
+  };
+
+  private stringify = () => {
+    localStorage.setItem('installed_plugins', JSON.stringify(Array.from(this.installedSet)));
+  };
+
+  getInstalledPlugins: () => Set<PluginID> = () => {
+    return this.parse();
+  };
+
+  async getAllPlugins(): Promise<Array<IPluginStoreEntry>> {
+    const installedPlugins = this.getInstalledPlugins();
+    await PluginManifestService.getInstance().fetch();
+    const manifest = PluginManifestService.getInstance().getAllPlugins();
+    return manifest.map(plugin => ({
+      ...plugin,
+      enabled: installedPlugins.has(plugin.id),
+    }));
+  }
+
+  isPluginInstalled: (id: PluginID) => boolean = id => {
+    return this.getInstalledPlugins().has(id);
+  };
+
+  getPlugin: (id: PluginID) => IPluginStoreEntry | undefined = id => {
+    const manifest = PluginManifestService.getInstance().getPlugin(id);
+    if (!manifest) {
+      return undefined;
+    }
+
+    return {
+      ...manifest,
+      enabled: this.isPluginInstalled(id),
+    };
+  };
+
+  installPlugin: (id: PluginID) => Promise<void> = async id => {
+    if (!this.checkDep(id)) {
+      // throw new Error(`Cannot install plugin ${id} due to missing dependencies`);
+      console.warn(`Cannot install plugin ${id} due to missing dependencies`);
+      return;
+    }
+
+    await pluginManager.loadPlugin(id);
+    this.installedSet.add(id);
+    this.stringify();
+  };
+
+  disablePlugin: (id: PluginID) => Promise<void> = async id => {
+    await pluginManager.disablePlugin(id);
+    this.installedSet.delete(id);
+    this.stringify();
+  };
+
+  static getInstance() {
+    if (!PluginStore.instance) {
+      PluginStore.instance = new PluginStore();
+    }
+    return PluginStore.instance;
+  }
+}

package/src/core/{registry.ts → plugin-system/registry.ts}

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
 
-import { createEventBus } from './utils/eventBus';
+import { createEventBus } from '../utils/eventBus';
 
 export interface ISlotEntry {
   id: string;
@@ -120,5 +120,3 @@ export class Registry {
     return result;
   }
 }
-
-export const registry = new Registry();

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

@@ -0,0 +1,56 @@
+import { Fetcher } from 'swr';
+
+import { getStableDeviceId } from '#/app/utils/fingerprints';
+import { cfApiFetcher } from '#/app/utils';
+import { PluginEvents, PluginID } from '#/types/plugin';
+
+import { ICoreService } from '../../shared-service/contract/ICoreService';
+import { createEventBus } from '../../utils/eventBus';
+
+export class CoreService implements ICoreService {
+  private static instance: CoreService;
+
+  private constructor() {}
+
+  private bus = createEventBus<PluginEvents>();
+
+  getDeviceId = getStableDeviceId;
+
+  getVersionHash() {
+    const hashStr: string = typeof GLOBAL_COMMIT_HASH === 'string' ? GLOBAL_COMMIT_HASH : '0000000';
+    return hashStr;
+  }
+
+  setLoading(id: PluginID, loading: boolean): void {
+    this.bus.emit('plugin:loading:changed', { id, loading });
+  }
+
+  subscribePluginLoading(listener: (payload: PluginEvents['plugin:loading:changed']) => void) {
+    return this.bus.on('plugin:loading:changed', listener);
+  }
+
+  subscribePluginUninstall(listener: (payload: PluginEvents['plugin:uninstall']) => void) {
+    return this.bus.on('plugin:uninstall', listener);
+  }
+
+  notifyPluginUninstall(id: PluginID): void {
+    this.bus.emit('plugin:uninstall', id);
+  }
+
+  subscribeLoadingChange(listener: (payload: boolean) => void): () => void {
+    return this.bus.on('site:loading:changed', listener);
+  }
+
+  setSiteLoading(loading: boolean) {
+    this.bus.emit('site:loading:changed', loading);
+  }
+
+  fetch: Fetcher = cfApiFetcher;
+
+  static getInstance(): CoreService {
+    if (!CoreService.instance) {
+      CoreService.instance = new CoreService();
+    }
+    return CoreService.instance;
+  }
+}

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

@@ -0,0 +1,159 @@
+import React from 'react';
+import { PathRouteProps } from 'react-router-dom';
+import { LinkProps } from '@bbki.ng/ui';
+
+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;
+};
+
+export class SystemUIService implements ISystemUIService {
+  private static instance: SystemUIService;
+
+  private slots = new Map<SystemSlotName, Array<ISlotEntry>>();
+  private middlewares = new Map<SystemDataHookPoint, IMiddlewareEntry<unknown>[]>();
+
+  private bus = createEventBus<RegistryEvents>();
+
+  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();
+    }
+    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;
+
+    this.registerMiddleware(
+      'transformCoverEntry',
+      (entries: Array<LinkProps>) => {
+        return [
+          ...entries,
+          {
+            to: entry.path,
+            children: entry.label,
+          },
+        ];
+      },
+      id,
+      10
+    );
+  };
+
+  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);
+
+    this.bus.emit('system:slots:changed', undefined);
+  };
+
+  unregisterAllByPluginId(pluginId: string) {
+    this.slots.forEach((entries, slotName) => {
+      const filtered = entries.filter(entry => entry.pluginId !== pluginId);
+      this.slots.set(slotName, filtered);
+    });
+
+    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);
+    });
+
+    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;
+    }
+    return result;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { Fetcher } from 'swr';
+
+import { FingerprintData } from '#/app/utils/fingerprints';
+import { PluginID } from '#/types/plugin';
+
+declare module '#/core/shared-service/service-registry' {
+  interface ServiceIdentifierMap {
+    'core:baseService': ICoreService;
+  }
+}
+
+export interface ICoreService {
+  getVersionHash(): Promise<string> | string;
+  getDeviceId(): Promise<{ id: string; fp: FingerprintData }>;
+
+  setLoading(id: string, loading: boolean): void;
+  subscribeLoadingChange(listener: (payload: boolean) => void): () => void;
+
+  subscribePluginUninstall(listener: (payload: PluginID) => void): () => void;
+  notifyPluginUninstall(id: PluginID): void;
+
+  fetch: Fetcher;
+}

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

@@ -0,0 +1,49 @@
+import type React from 'react';
+
+import { IPluginEntry, PluginID } from '#/types/plugin';
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+declare module '#/core/shared-service/service-registry' {
+  interface ServiceIdentifierMap {
+    'core:uiService': ISystemUIService;
+  }
+}
+
+export interface IBaseUIService<T extends string, K extends string> {
+  registerMiddleware: <S>(
+    hookPoint: K,
+    fn: (data: S) => Promise<S> | S,
+    pluginId: PluginID,
+    weight?: number
+  ) => void;
+
+  registerSlot: (
+    slotName: T,
+    component: React.ComponentType<IComPropsRegisteredToSlot>,
+    pluginId: PluginID,
+    weight?: number
+  ) => void;
+}
+
+export type SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'route' | 'pageFooter';
+
+export type SystemDataHookPoint =
+  | 'extendedRoutes'
+  | 'transformBreadcrumbPath'
+  | 'transformCoverEntry';
+
+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/service-proxy.ts

@@ -0,0 +1,26 @@
+import { ServiceIdentifierMap, ServiceRegistry } from '#/core/shared-service/service-registry';
+
+// core/ServiceProxy.ts
+export function createServiceProxy<T extends object, K extends keyof ServiceIdentifierMap>(
+  serviceId: K,
+  container: ServiceRegistry
+): T {
+  return new Proxy({} as T, {
+    get(target, prop, receiver) {
+      const actualService = container.getRawInstance(serviceId);
+
+      if (!actualService) {
+        return (..._: unknown[]) => {
+          console.warn(
+            `[System] Service ${serviceId} is currently unavailable. Call to ${String(prop)} ignored.`
+          );
+          return undefined; // 或者返回一个待定 Promise
+        };
+      }
+
+      // 3. 正常转发调用
+      const value = Reflect.get(actualService, prop, receiver);
+      return typeof value === 'function' ? value.bind(actualService) : value;
+    },
+  });
+}

package/src/core/shared-service/service-registry.ts

@@ -0,0 +1,52 @@
+import { createServiceProxy } from './service-proxy';
+
+export interface ServiceIdentifierMap {}
+
+export class ServiceRegistry {
+  private services: Map<string, unknown> = new Map();
+
+  private constructor() {}
+
+  private static instance: ServiceRegistry;
+
+  static getInstance(): ServiceRegistry {
+    if (!ServiceRegistry.instance) {
+      ServiceRegistry.instance = new ServiceRegistry();
+    }
+    return ServiceRegistry.instance;
+  }
+
+  register<T extends keyof ServiceIdentifierMap>(name: T, service: ServiceIdentifierMap[T]): void {
+    if (this.services.has(name)) {
+      console.warn(`Service with name ${name} is already registered. It will be overwritten.`);
+    }
+    this.services.set(name, service);
+  }
+
+  getRawInstance<T extends keyof ServiceIdentifierMap>(
+    name: T
+  ): ServiceIdentifierMap[T] | undefined {
+    const target = this.services.get(name);
+    if (!target) {
+      console.warn(`Service with name ${name} is not registered.`);
+      return undefined;
+    }
+
+    return target as ServiceIdentifierMap[T];
+  }
+
+  get<T extends keyof ServiceIdentifierMap>(name: T): ServiceIdentifierMap[T] | undefined {
+    // const target = this.services.get(name);
+    // if (!target) {
+    //   console.warn(`Service with name ${name} is not registered.`);
+    //   return undefined;
+    // }
+
+    // return target as ServiceIdentifierMap[T];
+    return createServiceProxy(name, this) as ServiceIdentifierMap[T];
+  }
+
+  unregister<T extends keyof ServiceIdentifierMap>(name: T): void {
+    this.services.delete(name);
+  }
+}

package/src/index.tsx

@@ -1,5 +1,5 @@
-import { RenderBlogInto } from './blog';
+import { RenderApp } from './app';
 
-const blogContainer = document.getElementById('blog') as Element;
+const appContainer = document.getElementById('app') as Element;
 
-RenderBlogInto(blogContainer);
+RenderApp(appContainer);

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { useBlogSlotComp } from '../hooks/use_blog_slot_com';
+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} />
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useRoutes } from 'react-router-dom';
+
+import ArticlePage from '#/plugins/blog/pages/extensions/txt/article';
+import Txt from '#/plugins/blog/pages/extensions/txt';
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export const BlogPageApp = (_: IComPropsRegisteredToSlot) => {
+  const element = useRoutes([
+    { path: '/', element: <Txt /> },
+    { path: '/:title', element: <ArticlePage /> },
+  ]);
+
+  return <>{element}</>;
+};

package/src/{blog → plugins/blog}/components/article/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode } from 'react';
 import { Article, Link } from '@bbki.ng/ui';
 import classNames from 'classnames';
 
-import { Slot } from '#/core/components/SlotComp';
+import { Slot } from '../BlogSlotCom';
 
 export type ArticlePageProps = {
   tags?: string[];
@@ -27,7 +27,7 @@ export const ArticlePage = (props: ArticlePageProps) => {
   return (
     <>
       <Article
-        title={<Slot name="articleTitle" data={title} placeholder={<>{title}</>} />}
+        title={<Slot name="blog:articleTitle" data={title} placeholder={<>{title}</>} />}
         date={props.date}
         description={description}
         className={`${props.className || ''}`}

package/src/plugins/blog/constants/index.ts

@@ -0,0 +1 @@
+export const PLUGIN_NAME = 'blog';

package/src/plugins/blog/context/index.ts

@@ -0,0 +1,7 @@
+import { createPluginCtx } from '#/core/context';
+
+export interface IBlogContext {
+  setLoading: (loading: boolean) => void;
+}
+
+export const BlogContext = createPluginCtx<IBlogContext>();