@bbki.ng/site 5.4.55 → 5.5.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @bbki.ng/site
 
+## 5.5.1
+
+### Patch Changes
+
+- 3c2834a: track device activity
+- Updated dependencies [3c2834a]
+  - @bbki.ng/ui@0.2.1
+
+## 5.5.0
+
+### Minor Changes
+
+- 2caf775: add blog plugin
+
+### Patch Changes
+
+- Updated dependencies [2caf775]
+  - @bbki.ng/ui@0.2.0
+
 ## 5.4.55
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.4.55",
+  "version": "5.5.1",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -14,7 +14,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "6",
     "swr": "^2.2.5",
-    "@bbki.ng/ui": "0.1.29"
+    "@bbki.ng/ui": "0.2.1"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/blog/app.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } 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';
@@ -12,6 +12,8 @@ import { GlobalLoadingContext } from '@/context/global_loading_state_provider';
 import { BotRedirect } from '@/pages/bot';
 import { BBContext } from '@/context/bbcontext';
 import { useDynamicLogo } from './hooks/use_dynamic_logo';
+import { Slot } from '../core/components/SlotComp';
+import { pluginManager } from '#/core/pluginManager';
 
 const Layout = () => {
   const paths = usePaths();
@@ -32,7 +34,18 @@ const Layout = () => {
         />
       }
       main={
-        <Grid leftAside={<div />} rightAside={<div />}>
+        <Grid
+          leftAside={
+            <div className="py-32 px-6">
+              <Slot name="leftCol" data={paths} />
+            </div>
+          }
+          rightAside={
+            <div className="py-32 px-6">
+              <Slot name="rightCol" data={paths} />
+            </div>
+          }
+        >
           <Container className="py-32">
             <ErrorBoundary>
               <Outlet />
@@ -45,6 +58,14 @@ const Layout = () => {
 };
 
 export const App = () => {
+  // useEffect(() => {
+  //   pluginManager.loadPlugin('test');
+
+  //   return () => {
+  //     pluginManager.disablePlugin('test');
+  //   };
+  // }, []);
+
   return (
     <SWR>
       <BBContext>

package/src/blog/hooks/use_fingerprint.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
-import { getFingerprint, getStableDeviceId, FingerprintData } from '@/utils/fingerprints';
+import { getStableDeviceId, FingerprintData } from '@/utils/fingerprints';
 
 interface UseFingerprintReturn {
   deviceId: string | null;

package/src/blog/utils/index.ts

@@ -1,5 +1,6 @@
 import { API_ENDPOINT } from '@/constants/routes';
 import { FontType } from '@/types/font';
+import { getFingerprint, getStableDeviceId } from './fingerprints';
 
 type Fetcher = (resource: string, init?: any) => Promise<any>;
 
@@ -7,10 +8,13 @@ export const floatNumberToPercentageString = (num: number): string => {
   return `${num * 100}%`;
 };
 
-export const baseFetcher = (resource: string, init: RequestInit = {}) =>
-  // enable cors
-  fetch(resource, {
+export const baseFetcher = async (resource: string, init: RequestInit = {}) => {
+  const headers = new Headers(init.headers || {});
+  const fp = await getFingerprint();
+  headers.set('X-Device-Fingerprint', fp.hash);
+  return fetch(resource, {
     ...init,
+    headers,
     mode: 'cors',
   }).then(res => {
     if (!res.ok) {
@@ -19,6 +23,7 @@ export const baseFetcher = (resource: string, init: RequestInit = {}) =>
 
     return res.json();
   });
+};
 
 export const withBBApi =
   (fetcher: Fetcher) =>

package/src/core/components/SlotComp.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { SlotName } from 'src/types/slots';
+import { useSlotComp } from '../hooks/useSlotComp';
+
+export interface ISlotProps {
+  name: SlotName;
+  data?: any;
+}
+
+export const Slot: React.FC<ISlotProps> = ({ name, data }) => {
+  const components = useSlotComp(name);
+
+  return (
+    <>
+      {components.map((Component, index) => (
+        <Component key={index} data={data} />
+      ))}
+    </>
+  );
+};

package/src/core/hooks/useSlotComp.ts

@@ -0,0 +1,20 @@
+import { SlotName } from 'src/types/slots';
+import { useEffect, useState } from 'react';
+import { registry } from '../registry';
+
+export const useSlotComp = (slotName: SlotName) => {
+  const [components, setComponents] = useState<React.ComponentType<any>[]>([]);
+
+  useEffect(() => {
+    const unsubscribe = registry.subscribe(() => {
+      const comps = registry.getComponents(slotName);
+      setComponents(comps);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return components;
+};

package/src/core/pluginManager.ts

@@ -0,0 +1,80 @@
+import { IHostContext } from '#/types/hostApi';
+import { registry } from './registry';
+import type { SlotName, HookPoint } from '#/types/slots';
+import { IPlugin } from '#/types/plugin';
+
+class PluginManager {
+  private activePlugins: Map<string, IPlugin> = new Map();
+
+  private createHostContext(): IHostContext {
+    return {
+      api: {
+        registerMiddleware: (point: HookPoint, fn: Function, pluginId: string, weight = 0) => {
+          registry.registerMiddleware(point, fn, pluginId, weight);
+        },
+        registerSlot: (
+          slotName: SlotName,
+          component: React.ComponentType<any>,
+          pluginId: string,
+          weight = 0
+        ) => {
+          registry.registerComponent(slotName, component, pluginId, weight);
+        },
+      },
+    };
+  }
+
+  private loading = new Set<string>();
+
+  // enable abort ctrl
+  async loadPlugin(pluginId: string) {
+    if (this.activePlugins.has(pluginId)) {
+      console.warn(`Plugin ${pluginId} is already loaded.`);
+      return;
+    }
+
+    if (this.loading.has(pluginId)) {
+      console.warn(`Plugin ${pluginId} is loading...`);
+      return;
+    }
+
+    // try load plugin
+    this.loading.add(pluginId);
+
+    try {
+      const module = await import(`../plugins/${pluginId}`);
+
+      const p: IPlugin = module.default;
+
+      const ctx = this.createHostContext();
+
+      if (p.onInstall) {
+        p.onInstall(ctx);
+      }
+
+      this.activePlugins.set(pluginId, p);
+    } catch (error) {
+      console.error(`Failed to load plugin ${pluginId}:`, error);
+    } finally {
+      this.loading.delete(pluginId);
+    }
+  }
+
+  async disablePlugin(pluginId: string) {
+    const plugin = this.activePlugins.get(pluginId);
+    if (!plugin) {
+      console.warn(`Plugin ${pluginId} is not loaded.`);
+      return;
+    }
+
+    if (plugin.onDisable) {
+      await plugin.onDisable();
+    }
+
+    this.activePlugins.delete(pluginId);
+
+    registry.unregisterAllByPluginId(plugin.id);
+  }
+}
+
+export const pluginManager = new PluginManager();

package/src/core/registry.ts

@@ -0,0 +1,97 @@
+import type { SlotName, HookPoint } from 'src/types/slots';
+
+export interface ISlotEntry {
+  id: string;
+  component: React.ComponentType<any>;
+  pluginId: string;
+  weight: number;
+}
+
+export interface IMiddlewareEntry {
+  id: string;
+  fn: Function;
+  pluginId: string;
+  weight?: number;
+}
+
+export class Registry {
+  private slots = new Map<SlotName, ISlotEntry[]>();
+
+  private listeners = new Set<() => void>();
+
+  private middlewares = new Map<HookPoint, IMiddlewareEntry[]>();
+
+  private broadcastChange() {
+    this.listeners.forEach(listener => listener());
+  }
+
+  subscribe(listener: () => void) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  registerComponent(slot: SlotName, component: React.ComponentType, 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.broadcastChange();
+  }
+
+  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.broadcastChange();
+  }
+
+  registerMiddleware(hookPoint: HookPoint, fn: Function, pluginId: string, weight = 0) {
+    const existing = this.middlewares.get(hookPoint) || [];
+
+    const newEntry: IMiddlewareEntry = {
+      id: `${pluginId}-${fn.name || 'middleware'}`,
+      pluginId,
+      fn,
+      weight,
+    };
+
+    // 插入并按权重排序（权重大的在前）
+    const newList = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+    this.middlewares.set(hookPoint, newList);
+  }
+
+  getComponents(slotName: SlotName): React.ComponentType<any>[] {
+    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);
+    }
+    return result;
+  }
+}
+
+export const registry = new Registry();

package/src/plugins/manifest.ts

@@ -0,0 +1,8 @@
+export const PLUGIN_MANIFEST = [
+  {
+    name: 'test',
+    id: 'test',
+    version: '0.1.0',
+    description: 'A test plugin',
+  },
+];

package/src/plugins/test/components/emoji.tsx

@@ -0,0 +1,8 @@
+import { type PathObj } from '@bbki.ng/ui';
+import React from 'react';
+
+export const Emoji = ({ data }: { data: any }) => {
+  const path = data as PathObj[];
+  console.log(path);
+  return <span>😊</span>;
+};

package/src/plugins/test/index.ts

@@ -0,0 +1,22 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin } from '#/types/plugin';
+import { Emoji } from './components/emoji';
+
+class TestPlugin implements IPlugin {
+  id: string = 'test';
+  name: string = 'Test Plugin';
+  description?: string | undefined;
+  version: string = '0.1.0';
+  author?: string | undefined;
+
+  onInstall?: ((ctx: IHostContext) => void) | undefined = (ctx: IHostContext) => {
+    ctx.api.registerSlot('leftCol', Emoji, this.id);
+  };
+
+  onDisable?: (() => Promise<void> | void) | undefined;
+  onDestroy?: (() => void) | undefined;
+}
+
+const testPlugin = new TestPlugin();
+
+export default testPlugin;

package/src/types/hostApi.ts

@@ -0,0 +1,17 @@
+import { HookPoint, SlotName } from './slots';
+
+export interface IHostApi {
+  registerMiddleware: (point: HookPoint, fn: Function, pluginId: string, weight?: number) => void;
+  registerSlot: (
+    slotName: SlotName,
+    component: React.ComponentType<any>,
+    pluginId: string,
+    weight?: number
+  ) => void;
+}
+
+export type PluginInitializer = (api: IHostApi) => void;
+
+export interface IHostContext {
+  api: IHostApi;
+}

package/src/types/plugin.ts

@@ -0,0 +1,13 @@
+import { IHostContext } from './hostApi';
+
+export interface IPlugin {
+  id: string;
+  name: string;
+  description?: string;
+  version: string;
+  author?: string;
+
+  onInstall?: (ctx: IHostContext) => void;
+  onDisable?: () => Promise<void> | void;
+  onDestroy?: () => void;
+}

package/src/types/slots.ts

@@ -0,0 +1,2 @@
+export type SlotName = 'leftCol' | 'rightCol' | 'articleActionRow';
+export type HookPoint = 'filterPosts' | 'transformPostContent';

package/tsconfig.json

@@ -7,7 +7,8 @@
     "moduleResolution": "bundler",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/blog/*"]
+      "@/*": ["src/blog/*"],
+      "#/*": ["src/*"]
     }
   },
   "include": ["./src", "vite.config.js", "index.d.ts"]

package/vite.config.js

@@ -41,6 +41,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src/blog'),
+      '#': path.resolve(__dirname, './src/'),
     },
     // preserveSymlinks: true,
   },