@bbki.ng/site 5.5.18 → 5.5.20

package/src/core/hooks/index.ts

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

package/src/core/hooks/useMiddlewareTransData.ts

@@ -1,68 +1,54 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 import { registry } from '#/core/registry';
 import type { HookPoint } from '#/types/slots';
 
-export interface UseMiddlewareTransDataOptions<T> {
+export interface UseMiddlewareTransDataOptions {
   hookPoint: HookPoint;
-  baseData: T;
-  immediate?: boolean;
+  onMiddlewareChange?: () => void; // 通知外部，由外部决定是否 run
 }
 
 export interface UseMiddlewareTransDataResult<T> {
-  data: T | undefined;
   loading: boolean;
   error: Error | null;
-  run: () => Promise<T>;
+  run: (inputData: T) => Promise<T>;
 }
 
-export function useMiddlewareTransData<T>({
+export function useMiddlewareRunner<T>({
   hookPoint,
-  baseData,
-  immediate = true,
-}: UseMiddlewareTransDataOptions<T>): UseMiddlewareTransDataResult<T> {
-  const [data, setData] = useState<T | undefined>(undefined);
+  onMiddlewareChange,
+}: UseMiddlewareTransDataOptions): UseMiddlewareTransDataResult<T> {
   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]);
-
+  const run = useCallback(
+    async (inputData: T) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await registry.runMiddleware(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(() => {
-    if (!immediateRef.current) return;
-
-    let cancelled = false;
-
-    run()
-      .then(result => {
-        if (cancelled) return;
-        setData(result);
-      })
-      .catch(() => {
-        // 错误已在 run 中设置到 state
-      });
+    const unsubscribe = registry.subscribeMiddleware(hookPoint, () => {
+      onMiddlewareChange?.();
+    });
 
     return () => {
-      cancelled = true;
+      unsubscribe();
     };
-  }, [hookPoint, baseData, run]);
+  }, [hookPoint, onMiddlewareChange]);
 
-  return { data, loading, error, run };
+  return { loading, error, run };
 }

package/src/core/hooks/useSlotComp.ts

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

package/src/core/hooks/use_plugins.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { pluginManager } from '#/core/pluginManager';
 import { PluginID } from '#/types/plugin';
@@ -13,11 +13,20 @@ import { PluginID } from '#/types/plugin';
  * usePlugins(['sticker', 'fontstyler']);
  */
 export const usePlugins = (pluginIds: Array<PluginID>) => {
+  const [done, setDone] = useState(false);
+
+  const loadAllPlugins = useCallback(async () => {
+    try {
+      await Promise.all(pluginIds.map(id => pluginManager.loadPlugin(id)));
+      setDone(true);
+    } catch (error) {
+      console.error('Error loading plugins:', error);
+    }
+  }, [pluginIds]);
+
   useEffect(() => {
     // 加载指定的插件
-    pluginIds.forEach(id => {
-      pluginManager.loadPlugin(id);
-    });
+    loadAllPlugins();
 
     return () => {
       // 卸载所有指定的插件
@@ -25,5 +34,7 @@ export const usePlugins = (pluginIds: Array<PluginID>) => {
         pluginManager.disablePlugin(id);
       });
     };
-  }, [pluginIds]);
+  }, [loadAllPlugins, pluginIds]);
+
+  return done;
 };

package/src/core/pluginManager.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 
 import { IHostContext } from '#/types/hostApi';
-import { registry } from './registry';
-import type { SlotName, HookPoint } from '#/types/slots';
+import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
 import { IPlugin } from '#/types/plugin';
 import { getStableDeviceId } from '@/utils/fingerprints';
+
+import { registry } from './registry';
+
 const pluginModules = import.meta.glob('../plugins/*/index.ts');
 
 class PluginManager {
@@ -13,13 +15,18 @@ class PluginManager {
   private createHostContext(): IHostContext {
     return {
       api: {
-        registerMiddleware: (point: HookPoint, fn: Function, pluginId: string, weight = 0) => {
+        registerMiddleware: <T>(
+          point: HookPoint,
+          fn: (data: T) => Promise<T> | T,
+          pluginId: string,
+          weight = 0
+        ) => {
           registry.registerMiddleware(point, fn, pluginId, weight);
         },
         getDeviceId: getStableDeviceId,
         registerSlot: (
           slotName: SlotName,
-          component: React.ComponentType<any>,
+          component: React.ComponentType<IComPropsRegisteredToSlot>,
           pluginId: string,
           weight = 0
         ) => {
@@ -54,14 +61,16 @@ class PluginManager {
     }
 
     try {
-      const module = await moduleLoader();
+      const module = (await moduleLoader()) as {
+        default: IPlugin;
+      };
 
       const p: IPlugin = module.default;
 
       const ctx = this.createHostContext();
 
       if (p.onInstall) {
-        p.onInstall(ctx);
+        await p.onInstall(ctx);
       }
 
       this.activePlugins.set(pluginId, p);

package/src/core/registry.ts

@@ -1,15 +1,17 @@
-import type { SlotName, HookPoint } from 'src/types/slots';
+import React from 'react';
+
+import type { SlotName, HookPoint, IComPropsRegisteredToSlot } from '#/types/slots';
 
 export interface ISlotEntry {
   id: string;
-  component: React.ComponentType<any>;
+  component: React.ComponentType<IComPropsRegisteredToSlot>;
   pluginId: string;
   weight: number;
 }
 
-export interface IMiddlewareEntry {
+export interface IMiddlewareEntry<T> {
   id: string;
-  fn: Function;
+  fn: (data: T) => Promise<T> | T;
   pluginId: string;
   weight?: number;
 }
@@ -18,19 +20,41 @@ export class Registry {
   private slots = new Map<SlotName, ISlotEntry[]>();
 
   private listeners = new Set<() => void>();
+  private middlewareListenerMap = new Map<HookPoint, Set<() => void>>();
 
-  private middlewares = new Map<HookPoint, IMiddlewareEntry[]>();
+  private middlewares = new Map<HookPoint, IMiddlewareEntry<unknown>[]>();
 
   private broadcastChange() {
     this.listeners.forEach(listener => listener());
   }
 
+  private broadcastMiddlewareChange(point: HookPoint) {
+    const listeners = this.middlewareListenerMap.get(point);
+    if (listeners) {
+      listeners.forEach(listener => listener());
+    }
+  }
+
+  subscribeMiddleware(hookPoint: HookPoint, listener: () => void) {
+    if (!this.middlewareListenerMap.has(hookPoint)) {
+      this.middlewareListenerMap.set(hookPoint, new Set());
+    }
+    const listeners = this.middlewareListenerMap.get(hookPoint)!;
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  }
+
   subscribe(listener: () => void) {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
   }
 
-  registerComponent(slot: SlotName, component: React.ComponentType, pluginId: string, weight = 0) {
+  registerComponent(
+    slot: SlotName,
+    component: React.ComponentType<IComPropsRegisteredToSlot>,
+    pluginId: string,
+    weight = 0
+  ) {
     const existing = this.slots.get(slot) || [];
 
     const newEntry: ISlotEntry = {
@@ -65,10 +89,15 @@ export class Registry {
     this.broadcastChange();
   }
 
-  registerMiddleware(hookPoint: HookPoint, fn: Function, pluginId: string, weight = 0) {
+  registerMiddleware<T>(
+    hookPoint: HookPoint,
+    fn: (data: T) => Promise<T> | T,
+    pluginId: string,
+    weight = 0
+  ) {
     const existing = this.middlewares.get(hookPoint) || [];
 
-    const newEntry: IMiddlewareEntry = {
+    const newEntry: IMiddlewareEntry<T> = {
       id: `${pluginId}-${fn.name || 'middleware'}`,
       pluginId,
       fn,
@@ -76,11 +105,16 @@ export class Registry {
     };
 
     // 插入并按权重排序（权重大的在前）
-    const newList = [...existing, newEntry].sort((a, b) => (b.weight || 0) - (a.weight || 0));
+    const newList = [...existing, newEntry as IMiddlewareEntry<unknown>].sort(
+      (a, b) => (b.weight || 0) - (a.weight || 0)
+    );
+
     this.middlewares.set(hookPoint, newList);
+
+    this.broadcastMiddlewareChange(hookPoint);
   }
 
-  getComponents(slotName: SlotName): React.ComponentType<any>[] {
+  getComponents(slotName: SlotName): React.ComponentType<IComPropsRegisteredToSlot>[] {
     return (this.slots.get(slotName) || []).map(entry => entry.component);
   }
 
@@ -88,7 +122,7 @@ export class Registry {
     const fns = (this.middlewares.get(point) || []).map(entry => entry.fn);
     let result = data;
     for (const fn of fns) {
-      result = await fn(result);
+      result = (await fn(result)) as T;
     }
     return result;
   }

package/src/plugins/extra-entry/components/page.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PathRouteProps } from 'react-router-dom';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export const ExtendedRoutesPage = ({ data }: IComPropsRegisteredToSlot) => {
+  const route = data as Omit<PathRouteProps, 'element'>;
+
+  if (route.path === '/hello') {
+    return <div className="p-4 text-center">Hello from Extra Entry Plugin!</div>;
+  }
+
+  return <></>;
+};

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

@@ -0,0 +1,32 @@
+import { IHostContext } from '#/types/hostApi';
+import { IPlugin } from '#/types/plugin';
+import { buildEntryCreator } from '#/utils';
+
+import { ExtendedRoutesPage } from './components/page';
+
+export class ExtraEntryPlugin implements IPlugin {
+  id: string = 'extra-entry';
+  name: string = 'Extra Entry';
+  description?: string | undefined;
+  version: string = '1.0.0';
+  author?: string | undefined = 'bbki.ng';
+
+  onInstall?: ((ctx: IHostContext) => void | Promise<void>) | undefined = async (
+    ctx: IHostContext
+  ) => {
+    const entryCreator = buildEntryCreator(ctx);
+    entryCreator(
+      {
+        pageComponent: ExtendedRoutesPage,
+        path: '/hello',
+        label: 'cd ./hello',
+      },
+      this.id
+    );
+  };
+
+  onDisable?: (() => Promise<void> | void) | undefined;
+  onDestroy?: (() => void) | undefined;
+}
+
+export default new ExtraEntryPlugin();

package/src/plugins/manifest.ts

@@ -12,6 +12,12 @@ export const PLUGIN_MANIFEST = [
     description:
       'Provides additional change directory functionalities for enhanced user experience.',
   },
+  {
+    name: 'extra-entry',
+    id: 'extra-entry',
+    version: '0.1.0',
+    description: 'Provides extra entries for cover and extended routes.',
+  },
   {
     name: 'xwy',
     id: 'xwy',

package/src/plugins/sticker/components/StickerCom.tsx

@@ -1,23 +1,21 @@
-import { PathObj } from '@bbki.ng/ui';
 import React from 'react';
+import { PathObj } from '@bbki.ng/ui';
 
-import { StickerCtx } from '../context';
+import { IComPropsRegisteredToSlot } from '#/types/slots';
 
-export const StickerCom = ({ data }: { data: PathObj[] }) => {
-  const ctx = StickerCtx.useCtx();
+export const StickerCom = ({ data }: IComPropsRegisteredToSlot) => {
+  const paths = data as PathObj[];
 
-  if (data.length === 0) {
+  if (paths.length === 0) {
     return null;
   }
 
-  const lastPath = data[data.length - 1];
+  const lastPath = paths[paths.length - 1];
 
   if (lastPath.name !== '~') {
     return null;
   }
 
-  console.log(ctx.deviceId);
-
   return (
     <div className="fixed bottom-32 left-16">
       <div className="-rotate-17 inline-flex">

package/src/plugins/xwy/components/logo.tsx

@@ -1,6 +1,8 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { useLocation } from 'react-router-dom';
 
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
 export const Crows = () => {
   return (
     <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -13,9 +15,11 @@ export const Crows = () => {
   );
 };
 
-export const XwyLogo = ({ data: defaultLogo }: { data: ReactNode }) => {
+export const XwyLogo = ({ data }: IComPropsRegisteredToSlot) => {
   const location = useLocation();
 
+  const defaultLogo = data as React.ReactNode;
+
   if (decodeURIComponent(location.pathname).includes('小乌鸦')) {
     return <Crows />;
   }

package/src/plugins/xwy/const/index.ts

@@ -9,7 +9,7 @@ export const FontRules: Array<FontRule> = [
       src: '/fonts/xwy.woff2',
       format: 'woff2',
     },
-    extraCls: 'text-2xl',
+    extraCls: 'text-2xl w-[113px]',
     variant: 'special',
   },
 ];

package/src/types/hostApi.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { type FingerprintData } from '@/utils/fingerprints';
 
-import { HookPoint, SlotName } from './slots';
+import { HookPoint, IComPropsRegisteredToSlot, SlotName } from './slots';
 
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
@@ -12,9 +12,9 @@ export interface IHostApi {
     pluginId: string,
     weight?: number
   ) => void;
-  registerSlot: <T>(
+  registerSlot: (
     slotName: SlotName,
-    component: React.ComponentType<T>,
+    component: React.ComponentType<IComPropsRegisteredToSlot>,
     pluginId: string,
     weight?: number
   ) => void;

package/src/types/plugin.ts

@@ -1,3 +1,7 @@
+import type React from 'react';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
 import { IHostContext } from './hostApi';
 
 export interface IPlugin {
@@ -12,4 +16,10 @@ export interface IPlugin {
   onDestroy?: () => void;
 }
 
-export type PluginID = 'sticker' | 'xwy' | 'extra-cd';
+export type PluginID = 'sticker' | 'xwy' | 'extra-cd' | 'extra-entry';
+
+export interface IPluginEntry {
+  path: string;
+  label?: string;
+  pageComponent: React.ComponentType<IComPropsRegisteredToSlot>;
+}

package/src/types/posts.ts

@@ -5,3 +5,12 @@ export interface TitleListItem {
   className?: string;
   variant?: 'default' | 'special';
 }
+
+export interface IPost {
+  id: string;
+  title: string;
+  content: string;
+  author: string;
+  createdAt: string;
+  updatedAt: string;
+}

package/src/types/slots.ts

@@ -1,2 +1,12 @@
-export type SlotName = 'leftCol' | 'rightCol' | 'articleActionRow' | 'logo';
-export type HookPoint = 'filterPosts' | 'transformPostContent' | 'transformTitleList';
+export type SlotName = 'leftCol' | 'rightCol' | 'articleActionRow' | 'logo' | 'route';
+
+export type HookPoint =
+  | 'filterPosts'
+  | 'transformPostContent'
+  | 'transformTitleList'
+  | 'extendedRoutes'
+  | 'transformCoverEntry';
+
+export interface IComPropsRegisteredToSlot {
+  data: unknown;
+}

package/src/utils/index.tsx

@@ -0,0 +1,52 @@
+import { LinkProps, PathRouteProps } from 'react-router-dom';
+import React from 'react';
+
+import { IHostContext } from '#/types/hostApi';
+import { IPluginEntry } from '#/types/plugin';
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+export const buildEntryCreator = (ctx: IHostContext) => (entry: IPluginEntry, id: string) => {
+  ctx.api.registerMiddleware(
+    'extendedRoutes',
+    (routes: Array<Omit<PathRouteProps, 'element'>>) => {
+      return [
+        ...routes,
+        {
+          path: entry.path,
+        },
+      ];
+    },
+    id,
+    10
+  );
+
+  ctx.api.registerSlot(
+    'route',
+    (props: IComPropsRegisteredToSlot) => {
+      const route = props.data as Omit<PathRouteProps, 'element'>;
+      if (route.path === entry.path) {
+        const Com = entry.pageComponent;
+        return <Com data={props.data} />;
+      }
+      return null;
+    },
+    id
+  );
+
+  if (!entry.label) return;
+
+  ctx.api.registerMiddleware(
+    'transformCoverEntry',
+    (entries: Array<LinkProps>) => {
+      return [
+        ...entries,
+        {
+          to: entry.path,
+          children: entry.label,
+        },
+      ];
+    },
+    id,
+    10
+  );
+};

package/tsconfig.json

@@ -5,11 +5,9 @@
     "jsx": "react",
     "noEmit": true,
     "moduleResolution": "bundler",
-    "ignoreDeprecations": "6.0",
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/blog/*"],
-      "#/*": ["src/*"]
+      "@/*": ["./src/blog/*"],
+      "#/*": ["./src/*"]
     }
   },
   "include": ["./src", "vite.config.js", "index.d.ts"]

package/src/blog/components/Auth.tsx

@@ -1,13 +0,0 @@
-import { Role, useRole } from '@/hooks/use_role';
-import React from 'react';
-import { Navigate } from 'react-router-dom';
-
-export const Auth = (props: { children: any; shouldRedirect?: boolean; role?: Role[] }) => {
-  const myRole = useRole();
-
-  if (props.role && !props.role.includes(myRole)) {
-    return props.shouldRedirect ? <Navigate to={'/login'} /> : null;
-  }
-
-  return props.children;
-};

package/src/blog/components/DelayFadeIn/DelayFadeIn.tsx

@@ -1,28 +0,0 @@
-import React, { useEffect } from 'react';
-import cls from 'classnames';
-
-export type DelayFadeInProps = {
-  children: any;
-  delay: number;
-};
-
-export const DelayFadeIn = (props: DelayFadeInProps) => {
-  const [show, setShow] = React.useState(false);
-
-  useEffect(() => {
-    const id = setTimeout(() => {
-      setShow(true);
-    }, props.delay);
-
-    return () => {
-      clearTimeout(id);
-    };
-  }, []);
-
-  const className = cls('transition-opacity', {
-    'opacity-100': show,
-    'opacity-0': !show,
-  });
-
-  return <div className={className}>{props.children}</div>;
-};

package/src/blog/components/Spinner.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { useGlobalLoading } from '@/hooks';
-
-export const Spinner = (props: { disableDotIndicator?: boolean }) => {
-  const { disableDotIndicator } = props;
-
-  useGlobalLoading('spinner', !disableDotIndicator);
-
-  return <div className="h-full w-full grid place-items-center"></div>;
-};

package/src/blog/components/my_suspense.tsx

@@ -1,11 +0,0 @@
-import React, { ReactElement, ReactNode, Suspense } from 'react';
-import { ErrorBoundary } from '@bbki.ng/ui';
-import { Spinner } from './Spinner';
-
-export const MySuspense = (props: { children: ReactNode; fallback?: ReactElement }) => {
-  return (
-    <ErrorBoundary>
-      <Suspense fallback={<Spinner />}>{props.children}</Suspense>
-    </ErrorBoundary>
-  );
-};