rework action

example/src/App.tsx

@@ -14,7 +14,7 @@ import Docs from "./Docs";
 import SearchDocsActions from "./SearchDocsActions";
 import { createAction } from "../../src/utils";
 import { useAnalytics } from "./utils";
-import { Action } from "../../src";
+import type { BaseAction } from "../../src/types";
 import Blog from "./Blog";
 
 const searchStyle = {
@@ -99,7 +99,6 @@ const App = () => {
           shortcut: [],
           keywords: "interface color dark light",
           section: "Preferences",
-          children: ["darkTheme", "lightTheme"],
         },
         {
           id: "darkTheme",
@@ -187,7 +186,7 @@ const ResultItem = React.forwardRef(
       action,
       active,
     }: {
-      action: Action;
+      action: BaseAction;
       active: boolean;
     },
     ref: React.Ref<HTMLDivElement>

example/src/SearchDocsActions.tsx

@@ -1,9 +1,15 @@
 import * as React from "react";
 import { useHistory } from "react-router";
 import useRegisterActions from "../../src/useRegisterActions";
+import { createAction } from "../../src/utils";
 import data from "./Docs/data";
 
-const searchId = randomId();
+const rootSearchAction = createAction({
+  name: "Search docs…",
+  shortcut: ["?"],
+  keywords: "find",
+  section: "",
+});
 
 export default function SearchDocsActions() {
   const history = useHistory();
@@ -17,41 +23,23 @@ export default function SearchDocsActions() {
           collectDocs(curr.children);
         }
         if (curr.component) {
-          actions.push({
-            id: randomId(),
-            parent: searchId,
-            name: curr.name,
-            shortcut: [],
-            keywords: "",
-            perform: () => history.push(curr.slug),
-          });
+          actions.push(
+            createAction({
+              parent: rootSearchAction.id,
+              name: curr.name,
+              shortcut: [],
+              keywords: "",
+              perform: () => history.push(curr.slug),
+            })
+          );
         }
       });
       return actions;
     };
     return collectDocs(data);
   }, [history]);
 
-  const rootSearchAction = React.useMemo(
-    () =>
-      searchActions.length
-        ? {
-            id: searchId,
-            name: "Search docs…",
-            shortcut: ["?"],
-            keywords: "find",
-            section: "",
-            children: searchActions.map((action) => action.id),
-          }
-        : null,
-    [searchActions]
-  );
-
   useRegisterActions([rootSearchAction, ...searchActions].filter(Boolean));
 
   return null;
 }
-
-function randomId() {
-  return Math.random().toString(36).substring(2, 9);
-}

src/InternalEvents.tsx

@@ -134,9 +134,11 @@ function useDocumentLock() {
  * performs actions for patterns that match the user defined `shortcut`.
  */
 function useShortcuts() {
-  const { actions, query } = useKBar((state) => ({
-    actions: state.actions,
-  }));
+  const { actions, query } = useKBar((state) => {
+    return {
+      actions: state.actions,
+    };
+  });
 
   React.useEffect(() => {
     const actionsList = Object.keys(actions).map((key) => actions[key]);

src/KBarResults.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { useVirtual } from "react-virtual";
 import { useKBar } from ".";
-import { Action } from "./types";
 import { usePointerMovedSinceMount } from "./utils";
+import type { BaseAction } from "./types";
 
 const START_INDEX = 0;
 
-interface RenderParams<T = Action | string> {
+interface RenderParams<T = BaseAction | string> {
   item: T;
   active: boolean;
 }

src/action/ActionImpl.ts

@@ -0,0 +1,38 @@
+import { ReactElement, JSXElementConstructor, ReactNode } from "react";
+import type { BaseAction, Action, ActionId } from "../types";
+
+export class ActionImpl implements Action {
+  id: ActionId;
+  name: string;
+  keywords?: string | undefined;
+  shortcut?: string[] | undefined;
+  perform?: (() => void) | undefined;
+  section?: string | undefined;
+  parent?: string | null | undefined;
+  children?: ActionImpl[];
+  icon?: ReactElement<any, string | JSXElementConstructor<any>> | ReactNode;
+  subtitle?: string | undefined;
+
+  constructor(action: BaseAction) {
+    this.parent = action.parent;
+    this.id = action.id;
+    this.name = action.name;
+    this.keywords = action.keywords;
+    this.shortcut = action.shortcut;
+    this.perform = action.perform;
+    this.section = action.section;
+    this.icon = action.icon;
+    this.subtitle = action.subtitle;
+  }
+
+  addChild(action: ActionImpl) {
+    if (!this.children) this.children = [];
+    if (this.children.indexOf(action) > -1) return action;
+    this.children.push(action);
+    return action;
+  }
+
+  static fromJSON(obj: Action) {
+    return new ActionImpl(obj);
+  }
+}

src/action/ActionInterface.ts

@@ -0,0 +1,47 @@
+import type { BaseAction, ActionTree } from "../types";
+import { ActionImpl } from "./ActionImpl";
+
+export default class ActionInterface {
+  readonly actions: ActionTree = {};
+
+  constructor(actions: BaseAction[]) {
+    this.actions = this.add(actions);
+  }
+
+  add(actions: BaseAction[]) {
+    const [rootActions, nestedActions] = actions.reduce(
+      (acc, action) => {
+        const index = !action.parent ? 0 : 1;
+        acc[index].push(action);
+        return acc;
+      },
+      [[], []] as BaseAction[][]
+    );
+
+    rootActions.forEach(
+      (action) => (this.actions[action.id] = ActionImpl.fromJSON(action))
+    );
+
+    nestedActions.forEach((a) => {
+      const parent = this.actions[a.parent!];
+      if (!parent) return;
+      const action = ActionImpl.fromJSON(a);
+      parent.addChild(action);
+      this.actions[action.id] = action;
+    });
+
+    return this.actions;
+  }
+
+  remove(actions: BaseAction[]) {
+    actions.forEach((action) => {
+      const actionImpl = this.actions[action.id];
+      delete this.actions[action.id];
+      if (actionImpl?.children) {
+        this.remove(actionImpl.children);
+      }
+    });
+
+    return this.actions;
+  }
+}

src/types.ts

@@ -1,25 +1,29 @@
 import * as React from "react";
+import { ActionImpl } from "./action/ActionImpl";
 
 export type ActionId = string;
 
-export interface Action {
+export interface BaseAction {
   id: string;
   name: string;
-  shortcut: string[];
-  keywords: string;
+  keywords?: string;
+  shortcut?: string[];
   perform?: () => void;
   section?: string;
   parent?: ActionId | null | undefined;
-  children?: ActionId[];
   icon?: string | React.ReactElement | React.ReactNode;
   subtitle?: string;
 }
 
-export type ActionTree = Record<string, Action>;
+export type Action = BaseAction & {
+  children?: ActionImpl[];
+};
+
+export type ActionTree = Record<string, ActionImpl>;
 
 export interface ActionGroup {
   name: string;
-  actions: Action[];
+  actions: BaseAction[];
 }
 
 export interface KBarOptions {
@@ -30,7 +34,7 @@ export interface KBarOptions {
 }
 
 export interface KBarProviderProps {
-  actions: Action[];
+  actions: BaseAction[];
   options?: KBarOptions;
 }
 
@@ -46,7 +50,7 @@ export interface KBarQuery {
   setCurrentRootAction: (actionId: ActionId | null | undefined) => void;
   setVisualState: (cb: ((vs: VisualState) => any) | VisualState) => void;
   setSearch: (search: string) => void;
-  registerActions: (actions: Action[]) => () => void;
+  registerActions: (actions: BaseAction[]) => () => void;
   toggle: () => void;
 }
 

src/useMatches.tsx

@@ -1,6 +1,6 @@
 import { matchSorter } from "match-sorter";
 import * as React from "react";
-import { Action, ActionGroup, ActionTree } from "./types";
+import type { BaseAction, ActionGroup, ActionTree } from "./types";
 import useKBar from "./useKBar";
 
 export const NO_GROUP = "none";
@@ -36,7 +36,7 @@ export default function useMatches() {
       }
       acc[section].push(action);
       return acc;
-    }, {} as Record<string, Action[]>);
+    }, {} as Record<string, BaseAction[]>);
 
     let groups: ActionGroup[] = [];
 

src/useRegisterActions.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Action } from "./types";
+import type { BaseAction } from "./types";
 import useKBar from "./useKBar";
 
 export default function useRegisterActions(
-  actions: Action[],
+  actions: BaseAction[],
   dependencies: React.DependencyList = []
 ) {
   const { query } = useKBar();