@bbki.ng/site 5.8.3 → 5.8.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @bbki.ng/site
 
+## 5.8.5
+
+### Patch Changes
+
+- 6b14c28: add empty placeholder
+
+## 5.8.4
+
+### Patch Changes
+
+- 5efa382: move store entry to nav
+- Updated dependencies [5efa382]
+  - @bbki.ng/ui@0.2.20
+
 ## 5.8.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.8.3",
+  "version": "5.8.5",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",
@@ -15,7 +15,7 @@
     "react-router-dom": "6",
     "sonner": "^2.0.7",
     "swr": "^2.2.5",
-    "@bbki.ng/ui": "0.2.19"
+    "@bbki.ng/ui": "0.2.20"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.0",

package/src/app/app.tsx

@@ -3,7 +3,6 @@ import { Route, Routes } from 'react-router-dom';
 
 import { BotRedirect } from '#/app/components/bot';
 import { BBContext } from '#/app/context/bbcontext';
-import { Slot } from '#/core/components/SlotComp';
 import { usePlugins } from '#/core/hooks/use_plugins';
 import { Cover } from '#/app/components/cover';
 import { SWR } from '#/app/swr';
@@ -20,13 +19,10 @@ const AppRoutes = () => {
       <Route path="/" element={<BaseLayout />}>
         <Route index element={<Cover />} />
         <Route path="bot" element={<BotRedirect />} />
-        {pluginEntries?.map(route => (
-          <Route
-            key={route.path}
-            path={`${route.path}/*`}
-            element={<Slot name="route" data={route} />}
-          />
-        ))}
+        {pluginEntries?.map(route => {
+          const Com = route.pageComponent;
+          return <Route key={route.path} path={`${route.path}/*`} element={<Com data={route} />} />;
+        })}
         <Route path="*" element={null} />
       </Route>
     </Routes>

package/src/app/components/BaseLayout.tsx

@@ -14,9 +14,7 @@ export const BaseLayout = () => {
 
   const nav = useNavigate();
 
-  const defaultLogo = (
-    <Logo className="mr-2 cursor-pointer hover:opacity-80" onClick={() => nav('/')} />
-  );
+  const defaultLogo = <Logo className="cursor-pointer hover:opacity-80" onClick={() => nav('/')} />;
 
   return (
     <>
@@ -31,6 +29,7 @@ export const BaseLayout = () => {
               paddingTop: 'calc(var(--safe-top) + 4px)',
               transition: 'all .2s ease-in-out',
             }}
+            rightElement={<Slot name="nav-right" data={paths} />}
           />
         }
         main={

package/src/app/components/cover/index.tsx

@@ -1,7 +1,10 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { LinkProps, LinkListProps, LinkList } from '@bbki.ng/ui';
 
-import { useMiddlewareRunner } from '#/core/hooks';
+import { usePluginEntries } from '#/app/hooks/use_plugin_entries';
+import { useMiddlewareTransformedData } from '#/core/hooks/useMiddlewareTransData';
+import { Slot } from '#/core/components/SlotComp';
+import { useGlobalLoading } from '#/app/hooks/use_global_loading';
 
 const CenterLinkList = (props: LinkListProps) => {
   return (
@@ -11,25 +14,30 @@ const CenterLinkList = (props: LinkListProps) => {
   );
 };
 
-const baseEntries: Array<LinkProps> = [];
-
 export const Cover = (_: { className?: string }) => {
-  const [entries, setEntries] = React.useState<Array<LinkProps>>(baseEntries);
+  const pluginEntries = usePluginEntries();
+
+  const entries: Array<LinkProps> = React.useMemo(() => {
+    return pluginEntries
+      .filter(entry => entry.label)
+      .map(entry => ({
+        to: entry.path,
+        children: entry.label,
+      })) as Array<LinkProps>;
+  }, [pluginEntries]);
 
-  const { run } = useMiddlewareRunner<Array<LinkProps>>({
-    hookPoint: 'transformCoverEntry',
-    onMiddlewareChange: () => {
-      run(baseEntries).then(setEntries);
-    },
-  });
+  const transformedEntries = useMiddlewareTransformedData(
+    'transformEntryLink',
+    entries
+  ) as Array<LinkProps>;
 
-  useEffect(() => {
-    run(baseEntries).then(setEntries);
-  }, [run]);
+  const { isLoading } = useGlobalLoading();
+  const hasEntries = pluginEntries.length > 1 && !isLoading;
 
   return (
     <>
-      <CenterLinkList className="select-none" links={entries} />
+      <CenterLinkList className="select-none" links={transformedEntries} />
+      <Slot name="centerEntryArea" data={hasEntries} />
     </>
   );
 };

package/src/app/hooks/use_plugin_entries.ts

@@ -1,39 +1,34 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { type PathRouteProps } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
 
-import { useMiddlewareRunner } from '#/core/hooks';
+import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
+import { IPluginEntry } from '#/types/plugin';
 
 const protectedRoutesSet = new Set<string>(['/bot', '/', 'default']);
 
-type PluginRoute = Omit<PathRouteProps, 'element'>;
+const emptyEntries: Array<IPluginEntry> = [];
 
 export const usePluginEntries = () => {
-  const [fullRoutes, setFullRoutes] = useState<Array<PluginRoute>>([]);
-  const runRef = useRef<(input: Array<PluginRoute>) => Promise<Array<PluginRoute>>>(() =>
-    Promise.resolve([])
+  const [entries, setEntries] = useState<Array<IPluginEntry>>(() =>
+    SystemUIService.getInstance().getPluginEntries()
   );
 
-  const onMiddlewareChange = useCallback(() => {
-    runRef.current([]).then(setFullRoutes);
-  }, []);
-
-  const { run } = useMiddlewareRunner<Array<PluginRoute>>({
-    hookPoint: 'extendedRoutes',
-    onMiddlewareChange,
-  });
+  useEffect(() => {
+    const service = SystemUIService.getInstance();
+    setEntries(service.getPluginEntries());
 
-  runRef.current = run;
+    const unsubscribe = service.subscribePluginEntryChange(() => {
+      setEntries(service.getPluginEntries());
+    });
 
-  useEffect(() => {
-    run([]).then(setFullRoutes);
-  }, [run]);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
 
-  const safeRoutes = fullRoutes?.filter(route => {
-    if ('path' in route) {
-      return !protectedRoutesSet.has(route.path);
-    }
-    return false;
-  }) as Array<PluginRoute>;
+  const safeEntries = useMemo(
+    () => entries?.filter(entry => !protectedRoutesSet.has(entry.path)),
+    [entries]
+  );
 
-  return safeRoutes ?? [];
+  return safeEntries ?? emptyEntries;
 };

package/src/core/hooks/use_plugins.ts

@@ -43,13 +43,23 @@ export const usePlugins = () => {
 
   const installedPlugins = PluginStore.getInstance().getInstalledPlugins();
 
+  const { setGlobalLoading } = useGlobalLoading();
+
   const pluginIds: Array<PluginID> = useMemo(
-    () => ['store', ...Array.from(installedPlugins)],
+    () => [...Array.from(installedPlugins), 'store'],
     [installedPlugins]
   );
 
   usePluginsLoading();
 
+  useEffect(() => {
+    const unregister = setGlobalLoading('plugins', !done);
+
+    return () => {
+      unregister();
+    };
+  }, [done, setGlobalLoading]);
+
   useEffect(() => {
     let cancelled = false;
 

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

@@ -1,8 +1,5 @@
-import { PathRouteProps } from 'react-router-dom';
-import { LinkProps } from '@bbki.ng/ui';
-
-import { buildEntrySlotCom } from '#/utils';
 import { createUIService } from '#/core/shared-service/factory/createUIService';
+import { createEventBus } from '#/core/utils/eventBus';
 import {
   ISystemUIService,
   SystemDataHookPoint,
@@ -15,6 +12,10 @@ const baseService = createUIService<SystemSlotName, SystemDataHookPoint>('system
 export class SystemUIService implements ISystemUIService {
   private static instance: SystemUIService;
 
+  private pluginEntries = new Map<string, IPluginEntry & { pluginId: PluginID }>();
+
+  private entryBus = createEventBus<{ pluginEntriesChanged: void }>();
+
   private constructor() {}
 
   static getInstance(): SystemUIService {
@@ -26,7 +27,6 @@ export class SystemUIService implements ISystemUIService {
 
   registerSlot = baseService.registerSlot.bind(baseService);
   registerMiddleware = baseService.registerMiddleware.bind(baseService);
-  unregisterAllByPluginId = baseService.unregisterAllByPluginId.bind(baseService);
   getSlotEntries = baseService.getSlotEntries.bind(baseService);
   getComponents = baseService.getComponents.bind(baseService);
   subscribeSlotChange = baseService.subscribeSlotChange.bind(baseService);
@@ -34,37 +34,31 @@ export class SystemUIService implements ISystemUIService {
   runMiddlewares = baseService.runMiddlewares.bind(baseService);
 
   registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void = (entry, id) => {
-    this.registerMiddleware(
-      'extendedRoutes',
-      (routes: Array<Omit<PathRouteProps, 'element'>>) => {
-        return [
-          ...routes,
-          {
-            path: entry.path,
-          },
-        ];
-      },
-      id,
-      10
-    );
+    this.pluginEntries.set(entry.path, { ...entry, pluginId: id });
+    this.entryBus.emit('pluginEntriesChanged', undefined);
+  };
 
-    this.registerSlot('route', buildEntrySlotCom(entry), id);
+  getPluginEntries = (): Array<IPluginEntry & { pluginId: PluginID }> => {
+    return Array.from(this.pluginEntries.values());
+  };
 
-    if (!entry.label) return;
+  subscribePluginEntryChange = (listener: () => void): (() => void) => {
+    return this.entryBus.on('pluginEntriesChanged', listener);
+  };
+
+  unregisterAllByPluginId: (pluginId: string) => void = pluginId => {
+    baseService.unregisterAllByPluginId(pluginId);
 
-    this.registerMiddleware(
-      'transformCoverEntry',
-      (entries: Array<LinkProps>) => {
-        return [
-          ...entries,
-          {
-            to: entry.path,
-            children: entry.label,
-          },
-        ];
-      },
-      id,
-      10
-    );
+    let changed = false;
+    this.pluginEntries.forEach((entry, path) => {
+      if (entry.pluginId === pluginId) {
+        this.pluginEntries.delete(path);
+        changed = true;
+      }
+    });
+
+    if (changed) {
+      this.entryBus.emit('pluginEntriesChanged', undefined);
+    }
   };
 }

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

@@ -38,12 +38,15 @@ export interface IBaseUIService<T extends string, K extends string> {
   runMiddlewares: <S>(point: K, data: S) => Promise<S>;
 }
 
-export type SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'route' | 'pageFooter';
-
-export type SystemDataHookPoint =
-  | 'extendedRoutes'
-  | 'transformBreadcrumbPath'
-  | 'transformCoverEntry';
+export type SystemSlotName =
+  | 'leftCol'
+  | 'rightCol'
+  | 'logo'
+  | 'pageFooter'
+  | 'nav-right'
+  | 'centerEntryArea';
+
+export type SystemDataHookPoint = 'transformBreadcrumbPath' | 'transformEntryLink';
 
 export interface ISystemUIService extends IBaseUIService<SystemSlotName, SystemDataHookPoint> {
   registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void;

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+import { ArrowSvg } from './ArrowSvg';
+
+export const ArrowCom: FC<IComPropsRegisteredToSlot> = ({ data }) => {
+  const hasEntry = data as boolean;
+
+  if (hasEntry) {
+    return null;
+  }
+
+  return <ArrowSvg />;
+};