@bbki.ng/site 5.6.2 → 5.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bbki.ng/site
 
+## 5.6.3
+
+### Patch Changes
+
+- 2d1528a: fix fx loading state
+
 ## 5.6.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.6.2",
+  "version": "5.6.3",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",

package/src/core/hooks/use_plugins.ts

@@ -7,7 +7,11 @@ import { PluginID } from '#/types/plugin';
 import { PluginStore } from '../pluginStore';
 
 const usePluginsLoading = () => {
-  const { setGlobalLoading } = useGlobalLoading();
+  const { setGlobalLoading, isLoading } = useGlobalLoading();
+
+  useEffect(() => {
+    pluginManager.notifySiteLoadingChanged(isLoading);
+  }, [isLoading]);
 
   useEffect(() => {
     let unregister: (() => void) | undefined;

package/src/core/pluginManager.ts

@@ -30,6 +30,9 @@ class PluginManager {
         setLoading: (id: PluginID, loading: boolean) => {
           this.bus.emit('plugin:loading:changed', { id, loading });
         },
+        onLoadingChanged: (listener: (payload: PluginEvents['site:loading:changed']) => void) => {
+          return this.bus.on('site:loading:changed', listener);
+        },
         registerMiddleware: <T>(
           point: HookPoint,
           fn: (data: T) => Promise<T> | T,
@@ -58,6 +61,10 @@ class PluginManager {
 
   private loading = new Set<string>();
 
+  notifySiteLoadingChanged(loading: boolean) {
+    this.bus.emit('site:loading:changed', loading);
+  }
+
   subscribePluginLoading(listener: (payload: PluginEvents['plugin:loading:changed']) => void) {
     return this.bus.on('plugin:loading:changed', listener);
   }

package/src/plugins/fx/components/index.tsx

@@ -1,30 +1,39 @@
 import React, { useMemo } from 'react';
-import { EffectLayer, grain, paper, /*spiral,*/ watermark, Effect } from '@bbki.ng/ui';
+import { EffectLayer, grain, paper, spiral, watermark, Effect } from '@bbki.ng/ui';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 
 import { FxContext } from '../context';
 
+const useLoadingState = () => {
+  const ctx = FxContext.useCtx();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    const unsubscribe = ctx.subscribeToLoading(setIsLoading);
+    return () => {
+      unsubscribe();
+    };
+  }, [ctx]);
+
+  return isLoading;
+};
+
 export const FxCom = (_: IComPropsRegisteredToSlot) => {
   const ctx = FxContext.useCtx();
   const hashStr = ctx.versionHash;
   const deviceId = ctx.deviceId;
+  const isLoading = useLoadingState();
 
-  // const { isLoading } = useContext(GlobalLoadingContext);
-  // const { deviceId } = useFingerprint();
+  console.log('is loading', isLoading);
 
   const effects: Effect[] = useMemo(() => {
     const wmLines = [hashStr];
     if (deviceId) wmLines.push(deviceId);
     wmLines.push('hello world');
 
-    return [
-      grain(),
-      paper(),
-      // spiral({ active: isLoading }),
-      watermark({ lines: wmLines }),
-    ];
-  }, [/*isLoading,*/ deviceId, hashStr]);
+    return [grain(), paper(), spiral({ active: isLoading }), watermark({ lines: wmLines })];
+  }, [isLoading, deviceId, hashStr]);
 
   return <EffectLayer effects={effects} />;
 };

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

@@ -1,8 +1,12 @@
 import { createPluginCtx } from '#/core/context';
+import { PluginEvents } from '#/types/plugin';
 
 export interface IFxContext {
   versionHash: string;
   deviceId: string;
+  subscribeToLoading: (
+    listener: (payload: PluginEvents['site:loading:changed']) => void
+  ) => () => void;
 }
 
 export const FxContext = createPluginCtx<IFxContext>();

package/src/plugins/fx/index.ts

@@ -15,6 +15,9 @@ class FxPlugin extends BBPlugin {
         {
           versionHash: await ctx.api.getVersionHash(),
           deviceId: (await ctx.api.getDeviceId()).id,
+          subscribeToLoading: listener => {
+            return ctx.api.onLoadingChanged(listener);
+          },
         },
         FxCom
       ),

package/src/plugins/manifest.ts

@@ -25,14 +25,13 @@ export const PLUGIN_MANIFEST: Array<IPluginManifestEntry> = [
     id: 'extra-cd',
     version: '0.1.0',
     description:
-      '提供额外的快速切换页面的捷径，例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
+      '提供额外的页面跳转链接。例如在标题列表末尾添加一个 "cd ~" 的选项，点击后跳转到主页',
   },
   {
     name: '特效',
     id: 'fx',
     version: '0.1.0',
-    description:
-      '提供一些额外的视觉效果。此外，页面左下角会显示当前版本的哈希值和设备标识哈希水印。',
+    description: '提供一些额外的视觉效果。例如版本、设备信息水印，加载状态螺旋线、背景纹理等',
   },
   // {
   //   name: 'extra-entry',

package/src/plugins/store/components/storePage.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Table } from '@bbki.ng/ui';
+import classNames from 'classnames';
+import { Button, Table, Link } from '@bbki.ng/ui';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 import { IPluginStoreEntry, PluginID } from '#/types/plugin';
@@ -163,13 +164,22 @@ export const StorePage = (_: IComPropsRegisteredToSlot) => {
   }
 
   return (
-    <div className="prose">
-      <Table
-        className="w-full"
-        rowCount={plugins.length}
-        headerRenderer={headerRenderer}
-        rowRenderer={rowRenderer}
-      />
-    </div>
+    <>
+      <div className="prose">
+        <Table
+          className="w-full"
+          rowCount={plugins.length}
+          headerRenderer={headerRenderer}
+          rowRenderer={rowRenderer}
+        />
+      </div>
+      <Link
+        className={classNames('w-fit relative transition-all duration-300 mt-16')}
+        to="/"
+        style={{ left: -4 }}
+      >
+        cd ..
+      </Link>
+    </>
   );
 };

package/src/types/hostApi.ts

@@ -4,12 +4,15 @@ import { type FingerprintData } from '@/utils/fingerprints';
 import { PluginStore } from '#/core/pluginStore';
 
 import { HookPoint, IComPropsRegisteredToSlot, SlotName } from './slots';
-import { PluginID } from './plugin';
+import { PluginEvents, PluginID } from './plugin';
 
 export interface IHostApi {
   getDeviceId: () => Promise<{ id: string; fp: FingerprintData }>;
   getVersionHash: () => Promise<string> | string;
   setLoading: (id: PluginID, loading: boolean) => void;
+  onLoadingChanged: (
+    listener: (payload: PluginEvents['site:loading:changed']) => void
+  ) => () => void;
   registerMiddleware: <T>(
     point: HookPoint,
     fn: (baseData: T) => T,

package/src/types/plugin.ts

@@ -31,6 +31,7 @@ export interface IPluginEntry {
 
 export type PluginEvents = {
   'plugin:loading:changed': IPluginLoadingPayload;
+  'site:loading:changed': boolean;
 };
 
 export interface IPluginLoadingPayload {