- Extended commands by adding arguments

- Added/Updated tests for ImporterRegistry, ThemeProvider, CommandRegistry and Button
- Fixed snippet and node selectors to use createSelector, increasing performance by decreasing re-renders
- Organized few imports

Author: BluePixelDev

src/features/command-palette/CommandRegistry.test.ts

@@ -0,0 +1,45 @@
+import { vitest } from "vitest";
+import { CommandRegistry } from "./CommandRegistry";
+
+describe("Command Registry", () => {
+  let commandRegistry: CommandRegistry;
+  beforeEach(() => {
+    commandRegistry = new CommandRegistry();
+  });
+  it("adds commands properly", () => {
+    commandRegistry.addCommand({
+      id: "Test Command",
+      name: "",
+      description: "",
+      action: () => {},
+    });
+
+    expect(commandRegistry.hasCommand("Test Command"));
+  });
+
+  it("removes command properly", () => {
+    commandRegistry.addCommand({
+      id: "Test Command",
+      name: "",
+      description: "",
+      action: () => {},
+    });
+
+    expect(commandRegistry.hasCommand("Test Command"));
+    commandRegistry.removeCommand("Test Command");
+    expect(!commandRegistry.hasCommand("Test Command"));
+  });
+
+  it("executes command properly", () => {
+    const vn = vitest.fn();
+    commandRegistry.addCommand({
+      id: "Test Command",
+      name: "",
+      description: "",
+      action: vn,
+    });
+
+    commandRegistry.executeCommand("Test Command", []);
+    expect(vn).toHaveBeenCalled();
+  });
+});

src/features/command-palette/CommandRegistry.ts

@@ -35,15 +35,18 @@ export class CommandRegistry implements ICommandRegistry {
     this.listeners.get(event)?.delete(listener);
   }
 
-  async executeCommand(commandId: string): Promise<void> {
+  async executeCommand(commandId: string, args: string[]): Promise<void> {
     const command = this.commands.get(commandId);
     if (!command) {
       throw new Error(`Command with id ${commandId} does not exist.`);
     }
-    await command.action({
-      dispatch: store.dispatch,
-      getState: store.getState,
-    });
+    await command.action(
+      {
+        dispatch: store.dispatch,
+        getState: store.getState,
+      },
+      args
+    );
   }
 
   addCommand(command: Command): void {
@@ -62,6 +65,10 @@ export class CommandRegistry implements ICommandRegistry {
     this.emit("commandRemoved");
   }
 
+  hasCommand(commandId: string): boolean {
+    return this.commands.has(commandId);
+  }
+
   getCommands(): Command[] {
     return Array.from(this.commands.values());
   }

src/features/command-palette/components/CommandList.tsx

@@ -5,7 +5,7 @@ export const CommandList = () => {
   const commands = useCommands();
 
   function executeCommand(id: string) {
-    commandRegistry.executeCommand(id);
+    commandRegistry.executeCommand(id, []);
   }
 
   return (

src/features/command-palette/types.ts

@@ -6,15 +6,19 @@ export interface Command {
   description: string;
   icon?: string;
   shortcut?: string;
-  action: (ctx: {
-    dispatch: AppDispatch;
-    getState: () => RootState;
-  }) => void | Promise<void>;
+  action: (
+    ctx: {
+      dispatch: AppDispatch;
+      getState: () => RootState;
+    },
+    args: string[]
+  ) => void | Promise<void>;
 }
 
 export interface ICommandRegistry {
   addCommand(command: Command): void;
   removeCommand(commandId: string): void;
+  hasCommand(commandId: string): boolean;
   getCommands(): Command[];
-  executeCommand(commandId: string): void;
+  executeCommand(commandId: string, args: string[]): void;
 }

src/features/graph/nodes/components/GraphNode.tsx

@@ -1,15 +1,15 @@
-import "./node.styles.css";
+import { useAppSelector } from "@/store";
 import { useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import InteractiveRect from "./InteractiveRect";
+import { GraphNodePosition, GraphNodeSize } from "../../store";
 import {
   clearAllNodeSelections,
   toggleNodeSelectionStatus,
   updateNode,
 } from "../../store/graphSlice";
 import { isNodeSelected, selectNodeById } from "../../store/selectors";
-import { GraphNodePosition, GraphNodeSize } from "../../store";
-import { useAppSelector } from "@/store";
+import InteractiveRect from "./InteractiveRect";
+import "./node.styles.css";
 
 type GraphNodeProps = {
   nodeId: string;

src/features/graph/nodes/components/InteractiveRect.tsx

@@ -1,14 +1,14 @@
-import "./node.styles.css";
 import React, {
   CSSProperties,
   MouseEventHandler,
   useCallback,
   useMemo,
 } from "react";
-import ResizeHandle from "./ResizeHandle";
 import { useDrag, useResize } from "../../graphview/hooks";
 import { DragDelta } from "../../graphview/hooks/useDrag";
 import { GraphNodePosition, GraphNodeSize } from "../../store";
+import "./node.styles.css";
+import ResizeHandle from "./ResizeHandle";
 
 type InteractiveRectProps = {
   zoom: number;

src/features/graph/store/selectors.ts

@@ -27,10 +27,6 @@ export const selectNodesByLayer = (layerId: string) =>
   createSelector(graphSelectors.selectAll, (nodes) =>
     nodes.filter((node) => node.layerId === layerId)
   );
-export const selectAllNodesOnCurrentLayer = (state: RootState) =>
-  graphSelectors
-    .selectAll(state.graph)
-    .filter((node) => node.layerId === state.layers.selectedLayerId);
 
 export const selectAllLayers = (state: RootState) =>
   layerSelectors.selectAll(state.layers);
@@ -49,3 +45,9 @@ export const selectNodesInCurrentLayer = createSelector(
   (nodes, selectedLayerId) =>
     nodes.filter((node) => node.layerId === selectedLayerId)
 );
+
+export const selectAllNodesOnCurrentLayer = createSelector(
+  [selectAllNodes, selectCurrentLayer],
+  (nodes, currentLayer) =>
+    nodes.filter((node) => node.layerId === currentLayer?.id)
+);

src/features/importing/ImporterRegistry.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { importerRegistry } from "./ImporterRegistry";
+import { ImportEvent, IImporter } from "./types";
+import { RootState } from "@/store";
+
+const mockState = {} as unknown as RootState;
+
+describe("ImporterRegistry", () => {
+  let mockFile: unknown & File;
+  let arrayBufferMock: ArrayBuffer;
+  let importEvent: ImportEvent;
+
+  let mockImporter: IImporter;
+  let fallbackImporter: IImporter;
+
+  beforeEach(() => {
+    arrayBufferMock = new ArrayBuffer(8);
+
+    mockFile = {
+      name: "test.txt",
+      arrayBuffer: vi.fn().mockResolvedValue(arrayBufferMock),
+    } as unknown as File;
+
+    vi.spyOn(mockFile, "arrayBuffer").mockResolvedValue(arrayBufferMock);
+
+    importEvent = {
+      file: mockFile,
+      path: "/mock/path",
+      position: { x: 10, y: 20 },
+      dispatch: vi.fn(),
+      getState: vi.fn(() => mockState),
+    };
+
+    importerRegistry.clearImporters();
+
+    mockImporter = {
+      canHandle: vi.fn().mockResolvedValue(true),
+      importData: vi.fn().mockResolvedValue({
+        success: true,
+        message: "Handled by mockImporter",
+      }),
+    };
+
+    fallbackImporter = {
+      canHandle: vi.fn().mockResolvedValue(false),
+      importData: vi.fn(),
+    };
+  });
+
+  it("registers and sorts importers by priority", () => {
+    importerRegistry.registerImporter(mockImporter, 1);
+    importerRegistry.registerImporter(fallbackImporter, 10);
+
+    const importers = importerRegistry.getImporters();
+    expect(importers.length).toBe(2);
+    expect(importers[0].importer).toBe(fallbackImporter); // highest priority first
+  });
+
+  it("unregisters an importer", () => {
+    importerRegistry.registerImporter(mockImporter, 1);
+    importerRegistry.unregisterImporter(mockImporter);
+
+    const importers = importerRegistry.getImporters();
+    expect(importers.length).toBe(0);
+  });
+
+  it("uses the first importer that can handle the file", async () => {
+    importerRegistry.registerImporter(fallbackImporter, 1);
+    importerRegistry.registerImporter(mockImporter, 5);
+
+    const result = await importerRegistry.import(importEvent);
+
+    expect(mockFile.arrayBuffer).toHaveBeenCalledOnce();
+    expect(mockImporter.canHandle).toHaveBeenCalledWith(
+      mockFile,
+      arrayBufferMock
+    );
+    expect(mockImporter.importData).toHaveBeenCalledWith(importEvent);
+    expect(result).toEqual({
+      success: true,
+      message: "Handled by mockImporter",
+    });
+  });
+
+  it("returns failure when no importer can handle the file", async () => {
+    importerRegistry.registerImporter(fallbackImporter, 1);
+
+    const result = await importerRegistry.import(importEvent);
+
+    expect(result.success).toBe(false);
+    expect(result.message).toBe("No suitable importer found.");
+    expect(fallbackImporter.importData).not.toHaveBeenCalled();
+  });
+});

src/features/importing/ImporterRegistry.ts

@@ -21,6 +21,14 @@ class ImporterRegistry {
     );
   }
 
+  clearImporters() {
+    this.importers = [];
+  }
+
+  getImporters(): ImporterEntry[] {
+    return this.importers;
+  }
+
   async import(event: ImportEvent): Promise<ImportResult> {
     const fileBuffer = await event.file.arrayBuffer();
 

src/features/snippets/snippetSelectors.ts

@@ -1,5 +1,7 @@
 import { RootState } from "@/store";
+import { createSelector } from "reselect";
 
-export function selectEnabledSnippets(state: RootState) {
-  return state.cssSnippets.snippets.filter((snippet) => snippet.enabled);
-}
+export const selectEnabledSnippets = createSelector(
+  (state: RootState) => state.cssSnippets.snippets,
+  (snippets) => snippets.filter((snippet) => snippet.enabled)
+);