@bbki.ng/site 5.8.3 → 5.8.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @bbki.ng/site
 
+## 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.4",
   "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,8 @@
-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';
 
 const CenterLinkList = (props: LinkListProps) => {
   return (
@@ -11,25 +12,26 @@ 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 { run } = useMiddlewareRunner<Array<LinkProps>>({
-    hookPoint: 'transformCoverEntry',
-    onMiddlewareChange: () => {
-      run(baseEntries).then(setEntries);
-    },
-  });
+  const entries: Array<LinkProps> = React.useMemo(() => {
+    return pluginEntries
+      .filter(entry => entry.label)
+      .map(entry => ({
+        to: entry.path,
+        children: entry.label,
+      })) as Array<LinkProps>;
+  }, [pluginEntries]);
 
-  useEffect(() => {
-    run(baseEntries).then(setEntries);
-  }, [run]);
+  const transformedEntries = useMiddlewareTransformedData(
+    'transformEntryLink',
+    entries
+  ) as Array<LinkProps>;
 
   return (
     <>
-      <CenterLinkList className="select-none" links={entries} />
+      <CenterLinkList className="select-none" links={transformedEntries} />
     </>
   );
 };

package/src/app/hooks/use_plugin_entries.ts

@@ -1,39 +1,29 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { type PathRouteProps } from 'react-router-dom';
+import { useEffect, 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'>;
-
 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 = entries?.filter(entry => !protectedRoutesSet.has(entry.path));
 
-  return safeRoutes ?? [];
+  return safeEntries ?? [];
 };

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,9 @@ 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 SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'pageFooter' | 'nav-right';
 
-export type SystemDataHookPoint =
-  | 'extendedRoutes'
-  | 'transformBreadcrumbPath'
-  | 'transformCoverEntry';
+export type SystemDataHookPoint = 'transformBreadcrumbPath' | 'transformEntryLink';
 
 export interface ISystemUIService extends IBaseUIService<SystemSlotName, SystemDataHookPoint> {
   registerPluginEntry: (entry: IPluginEntry, id: PluginID) => void;

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

@@ -0,0 +1,16 @@
+import { Link } from '@bbki.ng/ui';
+
+const CupIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
+    <path d="M8.75 8h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-.75.75h-6.5a.75.75 0 0 1-.75-.75v-6.5A.75.75 0 0 1 8.75 8Zm.75 6.5h5v-5h-5Z"></path>
+    <path d="M15.25 1a.75.75 0 0 1 .75.75V4h2.25c.966 0 1.75.784 1.75 1.75V8h2.25a.75.75 0 0 1 0 1.5H20v5h2.25a.75.75 0 0 1 0 1.5H20v2.25A1.75 1.75 0 0 1 18.25 20H16v2.25a.75.75 0 0 1-1.5 0V20h-5v2.25a.75.75 0 0 1-1.5 0V20H5.75A1.75 1.75 0 0 1 4 18.25V16H1.75a.75.75 0 0 1 0-1.5H4v-5H1.75a.75.75 0 0 1 0-1.5H4V5.75C4 4.784 4.784 4 5.75 4H8V1.75a.75.75 0 0 1 1.5 0V4h5V1.75a.75.75 0 0 1 .75-.75Zm3 17.5a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H5.75a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25Z"></path>
+  </svg>
+);
+
+export const StoreIcon = () => {
+  return (
+    <Link to="/store" className="flex items-center">
+      <CupIcon />
+    </Link>
+  );
+};

package/src/plugins/store/index.ts

@@ -2,6 +2,7 @@ import { BBPlugin } from '#/core/plugin-system/bbplugin';
 import { IHostContext } from '#/types/hostApi';
 import { PluginID } from '#/types/plugin';
 
+import { StoreIcon } from './components/storeIcon';
 import { StorePage } from './components/storePage';
 import { StoreCtx } from './context';
 
@@ -20,10 +21,11 @@ export class StorePlugin extends BBPlugin {
       return;
     }
 
+    systemUIService.registerSlot('nav-right', StoreIcon, this.id);
+
     systemUIService.registerPluginEntry(
       {
         path: '/store',
-        label: 'cd ./store',
         pageComponent: StoreCtx.withCtx(
           {
             install: ctx.store?.installPlugin || (async () => false),

package/src/types/slots.ts

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

package/src/utils/index.tsx

@@ -1,20 +0,0 @@
-import { PathRouteProps } from 'react-router-dom';
-import React from 'react';
-
-import { IPluginEntry } from '#/types/plugin';
-import { IComPropsRegisteredToSlot } from '#/types/slots';
-
-export const buildEntrySlotCom = (entry: IPluginEntry) => {
-  const Component = (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;
-  };
-
-  Component.displayName = `EntrySlotCom(${entry.path})`;
-
-  return Component;
-};