@vc-shell/framework 1.2.3 → 1.2.4-beta.1

package/core/services/menu-service.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from "vitest";
+
+async function loadMenuServiceModule() {
+  vi.resetModules();
+  return import("./menu-service");
+}
+
+describe("menu-service", () => {
+  it("removes item from source state and does not re-add it after rebuild", async () => {
+    const { createMenuService } = await loadMenuServiceModule();
+    const service = createMenuService();
+
+    service.addMenuItem({ title: "A", priority: 1, url: "/a" } as any);
+    service.addMenuItem({ title: "B", priority: 2, url: "/b" } as any);
+
+    const firstItem = service.menuItems.value[0];
+    service.removeMenuItem(firstItem);
+    service.addMenuItem({ title: "C", priority: 3, url: "/c" } as any);
+
+    expect(service.menuItems.value.map((item) => item.title)).toEqual(["B", "C"]);
+  });
+
+  it("keeps runtime state isolated between service instances", async () => {
+    const { createMenuService } = await loadMenuServiceModule();
+    const firstService = createMenuService();
+    const secondService = createMenuService();
+
+    firstService.addMenuItem({ title: "OnlyFirst", priority: 1, url: "/first" } as any);
+
+    expect(firstService.menuItems.value).toHaveLength(1);
+    expect(secondService.menuItems.value).toHaveLength(0);
+  });
+
+  it("groups items by group property", async () => {
+    const { createMenuService } = await loadMenuServiceModule();
+    const service = createMenuService();
+
+    service.addMenuItem({ title: "Item A", priority: 1, group: "Settings", groupIcon: "fas fa-cog" } as any);
+    service.addMenuItem({ title: "Item B", priority: 2, group: "Settings", groupIcon: "fas fa-cog" } as any);
+
+    expect(service.menuItems.value).toHaveLength(1);
+    expect(service.menuItems.value[0].children).toHaveLength(2);
+    expect(service.menuItems.value[0].title).toBe("Settings");
+  });
+
+  it("groups items by groupConfig", async () => {
+    const { createMenuService } = await loadMenuServiceModule();
+    const service = createMenuService();
+
+    service.addMenuItem({
+      title: "Sub-Item 1",
+      priority: 1,
+      groupConfig: { id: "admin-group", title: "Admin", icon: "fas fa-shield", priority: 1 },
+    } as any);
+    service.addMenuItem({
+      title: "Sub-Item 2",
+      priority: 2,
+      groupConfig: { id: "admin-group", title: "Admin" },
+    } as any);
+
+    expect(service.menuItems.value).toHaveLength(1);
+    expect(service.menuItems.value[0].children).toHaveLength(2);
+    expect(service.menuItems.value[0].groupId).toBe("admin-group");
+  });
+
+  it("sorts items by priority", async () => {
+    const { createMenuService } = await loadMenuServiceModule();
+    const service = createMenuService();
+
+    service.addMenuItem({ title: "Z", priority: 3, url: "/z" } as any);
+    service.addMenuItem({ title: "A", priority: 1, url: "/a" } as any);
+    service.addMenuItem({ title: "M", priority: 2, url: "/m" } as any);
+
+    expect(service.menuItems.value.map((i) => i.title)).toEqual(["A", "M", "Z"]);
+  });
+
+  it("badge system: set, get, remove", async () => {
+    const { createMenuService, setMenuBadge, getMenuBadge, removeMenuBadge, getMenuBadges } =
+      await loadMenuServiceModule();
+    const service = createMenuService();
+
+    setMenuBadge("route-1", 5);
+    expect(getMenuBadge("route-1")).toBe(5);
+    expect(service.menuBadges.value.get("route-1")).toBe(5);
+
+    removeMenuBadge("route-1");
+    expect(getMenuBadge("route-1")).toBeUndefined();
+
+    const badges = getMenuBadges();
+    expect(badges.value.size).toBe(0);
+  });
+
+  it("badge getMenuBadge falls back to preregistered badges when no service exists", async () => {
+    const { setMenuBadge, getMenuBadge } = await loadMenuServiceModule();
+
+    setMenuBadge("early-badge", 42);
+    expect(getMenuBadge("early-badge")).toBe(42);
+  });
+
+  it("preregistration deduplicates items", async () => {
+    const { addMenuItem, createMenuService } = await loadMenuServiceModule();
+
+    addMenuItem({ title: "Dup", priority: 1, url: "/dup" } as any);
+    addMenuItem({ title: "Dup", priority: 1, url: "/dup" } as any);
+
+    const service = createMenuService();
+    expect(service.menuItems.value).toHaveLength(1);
+  });
+
+  it("disposes service instance via bus", async () => {
+    const { createMenuService, menuServiceBus } = await loadMenuServiceModule();
+    const service = createMenuService();
+
+    expect(menuServiceBus.instanceCount).toBe(1);
+    menuServiceBus.dispose(service);
+    expect(menuServiceBus.instanceCount).toBe(0);
+  });
+});

package/core/services/menu-service.ts

@@ -2,18 +2,31 @@ import { Component, ref, type Ref } from "vue";
 import * as _ from "lodash-es";
 import type { MenuItem, MenuItemBadgeConfig } from "../types";
 import { createUnrefFn, useArrayFind } from "@vueuse/core";
+import { createPreregistrationBus } from "./_internal";
 
-// Global state for pre-registering menu items
-const preregisteredMenuItems: Ref<MenuItem[]> = ref([]);
+function menuItemKey(item: MenuItem): string {
+  if (item.id !== undefined) return `id:${String(item.id)}`;
+  if (item.routeId) return `route:${item.routeId}`;
+  if (item.url) return `url:${item.url}`;
+  if (item.groupConfig?.id && item.title) return `gc:${item.groupConfig.id}:${item.title}`;
+  if (item.group && item.title) return `g:${item.group}:${item.title}`;
+  return `hash:${JSON.stringify(_.omit(item, "title"))}`;
+}
+
+// Global state for pre-registering badges before the service is available.
+const preregisteredMenuBadges: Ref<Map<string, MenuItemBadgeConfig>> = ref(new Map());
 
-// Badge registry - key is routeId (blade name) or groupId
-const menuBadges: Ref<Map<string, MenuItemBadgeConfig>> = ref(new Map());
+export const menuServiceBus = createPreregistrationBus<MenuItem, MenuService>({
+  name: "menu-service",
+  getKey: menuItemKey,
+  registerIntoService: (service, item) => service.addMenuItem(item),
+});
 
 /**
  * Registers a menu item before the service is initialized
  */
 export function addMenuItem(item: MenuItem): void {
-  preregisteredMenuItems.value.push(item);
+  menuServiceBus.preregister(item);
 }
 
 /**
@@ -23,7 +36,10 @@ export function addMenuItem(item: MenuItem): void {
  * @param badge - Badge configuration (number, ref, function, or full config)
  */
 export function setMenuBadge(id: string, badge: MenuItemBadgeConfig): void {
-  menuBadges.value.set(id, badge);
+  preregisteredMenuBadges.value.set(id, badge);
+  menuServiceBus.broadcast((service) => {
+    service.menuBadges.value.set(id, badge);
+  });
 }
 
 /**
@@ -31,7 +47,12 @@ export function setMenuBadge(id: string, badge: MenuItemBadgeConfig): void {
  * @param id - routeId for menu items, groupId for groups
  */
 export function getMenuBadge(id: string): MenuItemBadgeConfig | undefined {
-  return menuBadges.value.get(id);
+  const service = menuServiceBus.getFirstInstance();
+  if (service) {
+    return service.menuBadges.value.get(id);
+  }
+
+  return preregisteredMenuBadges.value.get(id);
 }
 
 /**
@@ -39,7 +60,10 @@ export function getMenuBadge(id: string): MenuItemBadgeConfig | undefined {
  * @param id - routeId for menu items, groupId for groups
  */
 export function removeMenuBadge(id: string): void {
-  menuBadges.value.delete(id);
+  preregisteredMenuBadges.value.delete(id);
+  menuServiceBus.broadcast((service) => {
+    service.menuBadges.value.delete(id);
+  });
 }
 
 /**
@@ -47,7 +71,8 @@ export function removeMenuBadge(id: string): void {
  * Used internally by menu components to reactively watch for badge changes.
  */
 export function getMenuBadges(): Ref<Map<string, MenuItemBadgeConfig>> {
-  return menuBadges;
+  const service = menuServiceBus.getFirstInstance();
+  return service?.menuBadges ?? preregisteredMenuBadges;
 }
 
 export interface MenuService {
@@ -61,15 +86,39 @@ export interface MenuService {
 const DEFAULT_PRIORITY = Infinity;
 const DEFAULT_GROUP_PRIORITY = Infinity;
 
-// State
-const menuItems: Ref<MenuItem[]> = ref([]);
-const rawMenu: Ref<MenuItem[]> = ref([]);
+function isSameMenuItem(left: MenuItem, right: MenuItem): boolean {
+  if (left.id !== undefined && right.id !== undefined) {
+    return String(left.id) === String(right.id);
+  }
+
+  if (left.routeId && right.routeId) {
+    return left.routeId === right.routeId;
+  }
+
+  if (left.url && right.url) {
+    return left.url === right.url;
+  }
+
+  if (left.groupConfig?.id && right.groupConfig?.id) {
+    return left.groupConfig.id === right.groupConfig.id && left.title === right.title;
+  }
+
+  if (left.group && right.group) {
+    return left.group === right.group && left.title === right.title;
+  }
+
+  return _.isEqual(_.omit(left, "title"), _.omit(right, "title"));
+}
 
 /**
  * Menu service implementation
  * Handles the registration and organization of menu items
  */
 export function createMenuService(): MenuService {
+  const menuItems: Ref<MenuItem[]> = ref([]);
+  const rawMenu: Ref<MenuItem[]> = ref([]);
+  const menuBadges: Ref<Map<string, MenuItemBadgeConfig>> = ref(new Map(preregisteredMenuBadges.value));
+
   /**
    * Add a new menu item to the raw menu and rebuild the menu structure
    * @param item - The menu item to add
@@ -84,9 +133,11 @@ export function createMenuService(): MenuService {
    * @param item - The menu item to remove
    */
   function removeMenuItem(item: MenuItem): void {
-    const index = menuItems.value.indexOf(item);
-    if (index !== -1) {
-      menuItems.value.splice(index, 1);
+    const initialLength = rawMenu.value.length;
+    rawMenu.value = rawMenu.value.filter((existingItem) => !isSameMenuItem(existingItem, item));
+
+    if (rawMenu.value.length !== initialLength) {
+      constructMenu();
     }
   }
 
@@ -246,18 +297,14 @@ export function createMenuService(): MenuService {
     menuItems.value = finalizeMenuItems(constructedMenu.value);
   }
 
-  preregisteredMenuItems.value.forEach((item) => {
-    try {
-      addMenuItem(item);
-    } catch (e) {
-      console.warn(`Failed to register preregistered menu item ${item.id || item.title}:`, e);
-    }
-  });
-
-  return {
+  const service: MenuService = {
     addMenuItem,
     menuItems,
     removeMenuItem,
     menuBadges,
   };
+
+  menuServiceBus.replayInto(service);
+
+  return service;
 }

package/core/services/settings-menu-service.ts

@@ -1,9 +1,10 @@
-import { ref, computed, Component, ComputedRef } from "vue";
+import { ComputedRef } from "vue";
+import { createSimpleMapRegistry, createPreregistrationBus } from "./_internal";
 
 export interface ISettingsMenuItem {
   id: string;
   order?: number;
-  component: Component;
+  component: import("vue").Component;
   props?: Record<string, unknown>;
 }
 
@@ -17,21 +18,17 @@ export interface ISettingsMenuService {
   items: ComputedRef<ISettingsMenuItem[]>;
 }
 
-// Global state for pre-registering settings menu items
-const preregisteredSettingsMenuItems: ISettingsMenuItem[] = [];
-const settingsMenuItems = ref<Map<string, ISettingsMenuItem>>(new Map());
+export const settingsMenuBus = createPreregistrationBus<RegisterSettingsMenuItemOptions, ISettingsMenuService>({
+  name: "settings-menu-service",
+  getKey: (item) => item.id || crypto.randomUUID(),
+  registerIntoService: (service, item) => service.register(item),
+});
 
 /**
  * Registers a settings menu item before the service is initialized
  */
 export function addSettingsMenuItem(item: RegisterSettingsMenuItemOptions): void {
-  const id = item.id || crypto.randomUUID();
-  preregisteredSettingsMenuItems.push({
-    id,
-    order: item.order ?? preregisteredSettingsMenuItems.length,
-    component: item.component,
-    props: item.props,
-  });
+  settingsMenuBus.preregister(item);
 }
 
 /**
@@ -39,37 +36,23 @@ export function addSettingsMenuItem(item: RegisterSettingsMenuItemOptions): void
  * Manages the registration and organization of settings menu items
  */
 export function createSettingsMenuService(): ISettingsMenuService {
-  const register = (options: RegisterSettingsMenuItemOptions): string => {
-    const id = options.id || crypto.randomUUID();
-    settingsMenuItems.value.set(id, {
-      id,
-      order: options.order ?? settingsMenuItems.value.size,
+  const mapRegistry = createSimpleMapRegistry<ISettingsMenuItem, RegisterSettingsMenuItemOptions>({
+    createItem: (options, currentSize) => ({
+      id: options.id || "",
+      order: options.order ?? currentSize,
       component: options.component,
       props: options.props,
-    });
-    return id;
-  };
+    }),
+    getId: (options) => options.id || "",
+  });
 
-  const unregister = (id: string): void => {
-    settingsMenuItems.value.delete(id);
+  const service: ISettingsMenuService = {
+    register: (options) => mapRegistry.register(options),
+    unregister: (id) => mapRegistry.unregister(id),
+    items: mapRegistry.sortedItems,
   };
 
-  const items = computed<ISettingsMenuItem[]>(() => {
-    return Array.from(settingsMenuItems.value.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-  });
+  settingsMenuBus.replayInto(service);
 
-  // Register pre-added settings menu items
-  preregisteredSettingsMenuItems.forEach((item) => {
-    try {
-      register(item);
-    } catch (e) {
-      console.warn(`Failed to register pre-added settings menu item ${item.id}:`, e);
-    }
-  });
-
-  return {
-    register,
-    unregister,
-    items,
-  };
+  return service;
 }

package/core/services/toolbar-service.ts

@@ -1,5 +1,5 @@
-import { reactive, ref, ComputedRef, Ref } from "vue";
 import { IBladeToolbar } from "../types";
+import { createBladeScopedRegistry, createPreregistrationBus } from "./_internal";
 
 export interface IToolbarItem extends IBladeToolbar {
   id: string;
@@ -30,122 +30,82 @@ export interface IToolbarService {
   }) => void;
 }
 
-// Global state for pre-registering toolbar buttons
-const preregisteredToolbarItems: IToolbarRegistration[] = [];
-const preregisteredIds = new Set<string>();
+export const toolbarBus = createPreregistrationBus<IToolbarRegistration, IToolbarService>({
+  name: "toolbar-service",
+  getKey: (reg) => `${reg.bladeId.toLowerCase()}::${reg.toolbarItem.id}`,
+  registerIntoService: (service, reg) => service.registerToolbarItem(reg.toolbarItem, reg.bladeId),
+});
 
 /**
- * Registers a toolbar button before the service is initialized
+ * Registers a toolbar button before the service is initialized.
  */
 export function registerToolbarItem(toolbarItem: IToolbarItem, bladeId: string): void {
   const normalizedBladeId = bladeId.toLowerCase();
-  preregisteredToolbarItems.push({ bladeId: normalizedBladeId, toolbarItem });
-  preregisteredIds.add(toolbarItem.id);
+  toolbarBus.preregister({
+    bladeId: normalizedBladeId,
+    toolbarItem,
+  });
 }
 
 export function createToolbarService(): IToolbarService {
-  const toolbarRegistry = reactive<Record<string, IToolbarItem[]>>({});
-  const registeredToolbarItems = reactive<IToolbarRegistration[]>([]);
-  const registeredIds = reactive(new Set<string>());
+  const bladeRegistry = createBladeScopedRegistry<IToolbarItem, IToolbarRegistration>({
+    createRegistration: (bladeId, item) => ({ bladeId, toolbarItem: item }),
+    getRegistrationBladeId: (r) => r.bladeId,
+    getRegistrationItemId: (r) => r.toolbarItem.id,
+  });
 
   const registerToolbarItem = (toolbarItem: IToolbarItem, bladeId: string): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
-
-    if (!toolbarRegistry[normalizedBladeId]) {
-      toolbarRegistry[normalizedBladeId] = [];
-    }
-
-    const existingIndex = toolbarRegistry[normalizedBladeId].findIndex((t) => t.id === toolbarItem.id);
-    if (existingIndex === -1) {
-      toolbarRegistry[normalizedBladeId].push(reactive(toolbarItem));
-      registeredToolbarItems.push({ bladeId: normalizedBladeId, toolbarItem: reactive(toolbarItem) });
-      registeredIds.add(toolbarItem.id);
-    }
-  };
-
-  const updateToolbarItem = ({
-    id,
-    bladeId,
-    toolbarItem,
-  }: {
-    id: string;
-    bladeId: string;
-    toolbarItem: Partial<IToolbarItem>;
-  }): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
-
-    if (toolbarRegistry[normalizedBladeId]) {
-      const index = toolbarRegistry[normalizedBladeId].findIndex((t) => t.id === id);
-      if (index !== -1) {
-        toolbarRegistry[normalizedBladeId][index] = { ...toolbarRegistry[normalizedBladeId][index], ...toolbarItem };
-      }
-    }
+    bladeRegistry.register(toolbarItem, bladeId);
   };
 
   const unregisterToolbarItem = (toolbarItemId: string, bladeId: string): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
-
-    if (toolbarRegistry[normalizedBladeId]) {
-      const index = toolbarRegistry[normalizedBladeId].findIndex((t) => t.id === toolbarItemId);
-      if (index !== -1) {
-        toolbarRegistry[normalizedBladeId].splice(index, 1);
-        registeredIds.delete(toolbarItemId);
-      }
-    }
-
-    const regIndex = registeredToolbarItems.findIndex(
-      (t) => t.bladeId === normalizedBladeId && t.toolbarItem.id === toolbarItemId,
-    );
-    if (regIndex !== -1) {
-      registeredToolbarItems.splice(regIndex, 1);
-    }
+    bladeRegistry.unregister(toolbarItemId, bladeId);
   };
 
   const getToolbarItems = (bladeId: string): IToolbarItem[] => {
     const normalizedBladeId = bladeId ? bladeId.toLowerCase() : "";
-    return toolbarRegistry[normalizedBladeId] || [];
-  };
+    const bladeItems = bladeRegistry.get(normalizedBladeId);
+    const globalItems = bladeRegistry.get("*");
 
-  const clearBladeToolbarItems = (bladeId: string): void => {
-    const normalizedBladeId = bladeId.toLowerCase();
-
-    if (toolbarRegistry[normalizedBladeId]) {
-      toolbarRegistry[normalizedBladeId].forEach((toolbarItem) => {
-        registeredIds.delete(toolbarItem.id);
-      });
-      delete toolbarRegistry[normalizedBladeId];
-    }
-
-    const indices = registeredToolbarItems
-      .map((t, i) => (t.bladeId === normalizedBladeId ? i : -1))
-      .filter((i) => i !== -1)
-      .reverse();
-
-    indices.forEach((index) => {
-      registeredToolbarItems.splice(index, 1);
+    const result: IToolbarItem[] = [...bladeItems];
+    const existingIds = new Set(result.map((item) => item.id));
+
+    globalItems.forEach((item) => {
+      if (!existingIds.has(item.id)) {
+        result.push(item);
+      }
     });
+
+    return [...result];
   };
 
-  const isToolbarItemRegistered = (id: string): boolean => {
-    return registeredIds.has(id);
+  const clearBladeToolbarItems = (bladeId: string): void => {
+    bladeRegistry.clear(bladeId);
   };
 
-  // Register pre-registered toolbar buttons
-  preregisteredToolbarItems.forEach((item) => {
-    try {
-      registerToolbarItem(item.toolbarItem, item.bladeId);
-    } catch (e) {
-      console.warn(`Failed to register preregistered toolbar item ${item.toolbarItem.id}:`, e);
-    }
-  });
+  const updateToolbarItem = ({
+    id,
+    bladeId,
+    toolbarItem,
+  }: {
+    id: string;
+    bladeId: string;
+    toolbarItem: Partial<IToolbarItem>;
+  }): void => {
+    bladeRegistry.update(id, bladeId, toolbarItem);
+  };
 
-  return {
+  const service: IToolbarService = {
     registerToolbarItem,
     unregisterToolbarItem,
     getToolbarItems,
     clearBladeToolbarItems,
-    registeredToolbarItems,
-    isToolbarItemRegistered,
+    registeredToolbarItems: bladeRegistry.registrations,
+    isToolbarItemRegistered: (id) => bladeRegistry.isRegistered(id),
     updateToolbarItem,
   };
+
+  toolbarBus.replayInto(service);
+
+  return service;
 }