cleanup

example/src/App.tsx

@@ -99,7 +99,6 @@ const App = () => {
           shortcut: [],
           keywords: "interface color dark light",
           section: "Preferences",
-          children: ["darkTheme", "lightTheme"],
         },
         {
           id: "darkTheme",

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

@@ -178,6 +178,8 @@ function useShortcuts() {
           continue;
         }
         if (action.shortcut.join("") === bufferString) {
+          event.preventDefault();
+
           if (action.children) {
             query.setCurrentRootAction(action.id);
             query.toggle();

src/KBarSearch.tsx

@@ -32,12 +32,6 @@ export default function KBarSearch(
       autoComplete="off"
       onKeyDown={(event) => {
         if (currentRootActionId && !search && event.key === "Backspace") {
-          console.log({
-            current: actions[currentRootActionId],
-            actions,
-            currentRootActionId,
-          });
-
           const parent = actions[currentRootActionId].parent;
           query.setCurrentRootAction(parent);
         }

src/action/ActionImpl.ts

@@ -1,26 +1,8 @@
 import { ReactElement, JSXElementConstructor, ReactNode } from "react";
-
-type ActionId = string;
-
-export interface Action {
-  id: string;
-  name: string;
-  keywords?: string;
-  shortcut?: string[];
-  perform?: () => void;
-  section?: string;
-  parent?: ActionId | null | undefined;
-  children?: ActionImpl[];
-  icon?: string | React.ReactElement | React.ReactNode;
-  subtitle?: string;
-}
-
-interface ActionImplOptions {
-  parent?: string;
-}
+import { Action, ActionId } from "../types";
 
 export class ActionImpl implements Action {
-  id: string;
+  id: ActionId;
   name: string;
   keywords?: string | undefined;
   shortcut?: string[] | undefined;
@@ -31,11 +13,8 @@ export class ActionImpl implements Action {
   icon?: ReactElement<any, string | JSXElementConstructor<any>> | ReactNode;
   subtitle?: string | undefined;
 
-  options: ActionImplOptions;
-
-  constructor(action: Action, options: ActionImplOptions = {}) {
-    this.options = options;
-    this.parent = this.options.parent;
+  constructor(action: Action) {
+    this.parent = action.parent;
     this.validate(action);
 
     this.id = action.id;
@@ -51,7 +30,7 @@ export class ActionImpl implements Action {
   addChild(action: ActionImpl) {
     if (!this.children) this.children = [];
     if (this.children.indexOf(action) > -1) return action;
-    this.children.push(action);
+    this.children.unshift(action);
     action.parent = this.id;
     return action;
   }
@@ -61,7 +40,7 @@ export class ActionImpl implements Action {
     return;
   }
 
-  static fromJSON(obj: Action, options: ActionImplOptions = {}) {
-    return new ActionImpl(obj, options);
+  static fromJSON(obj: Action) {
+    return new ActionImpl(obj);
   }
 }

src/action/ActionInterface.ts

@@ -1,4 +1,5 @@
-import { Action, ActionImpl } from "./ActionImpl";
+import { Action } from "../types";
+import { ActionImpl } from "./ActionImpl";
 
 export type SerializedActions = Action[];
 export type ActionTree = Record<string, ActionImpl>;
@@ -21,15 +22,15 @@ export default class ActionInterface {
     );
 
     rootActions.forEach(
-      (action) => (this.actions[action.id] = new ActionImpl(action))
+      (action) => (this.actions[action.id] = ActionImpl.fromJSON(action))
     );
 
     nestedActions.forEach((a) => {
       const parent = this.actions[a.parent!];
 
       if (!parent) return;
 
-      const action = new ActionImpl(a, { parent: parent.id });
+      const action = ActionImpl.fromJSON(a);
 
       parent.addChild(action);
 

src/index.tsx

@@ -1,7 +1,7 @@
 import KBarPortal from "./KBarPortal";
 import KBarPositioner from "./KBarPositioner";
 import KBarSearch from "./KBarSearch";
-import VirtualResults from "./KBarResults";
+import KBarResults from "./KBarResults";
 import useKBar from "./useKBar";
 import useRegisterActions from "./useRegisterActions";
 import { createAction } from "./utils";
@@ -11,7 +11,7 @@ export {
   KBarPortal,
   KBarPositioner,
   KBarSearch,
-  VirtualResults,
+  KBarResults,
   useKBar,
   useRegisterActions,
   createAction,

src/types.ts

@@ -1,16 +1,17 @@
 import * as React from "react";
+import { ActionImpl } from "./action/ActionImpl";
 
 export type ActionId = string;
 
 export interface Action {
   id: string;
   name: string;
-  shortcut: string[];
-  keywords: string;
+  keywords?: string;
+  shortcut?: string[];
   perform?: () => void;
   section?: string;
   parent?: ActionId | null | undefined;
-  children?: ActionId[];
+  children?: ActionImpl[];
   icon?: string | React.ReactElement | React.ReactNode;
   subtitle?: string;
 }

src/useStore.tsx

@@ -12,24 +12,17 @@ import {
 
 type useStoreProps = KBarProviderProps;
 
-export default function useStore(props: useStoreProps) {
-  if (!props.actions) {
-    throw new Error(
-      "You must define a list of `actions` when calling KBarProvider"
-    );
+export default function useStore(
+  props: useStoreProps = {
+    actions: [],
   }
-
+) {
   const actionsInterfaceRef = React.useRef(new ActionInterface(props.actions));
 
-  // TODO: at this point useReducer might be a better approach to managing state.
   const [state, setState] = React.useState<KBarState>({
     searchQuery: "",
     currentRootActionId: null,
     visualState: VisualState.hidden,
-    // actions: props.actions.reduce((acc, curr) => {
-    //   acc[curr.id] = curr;
-    //   return acc;
-    // }, {}),
     actions: { ...actionsInterfaceRef.current.actions },
   });
 
@@ -53,61 +46,16 @@ export default function useStore(props: useStoreProps) {
   } as KBarOptions);
 
   const registerActions = React.useCallback((actions: Action[]) => {
-    // const actionsByKey: ActionTree = actions.reduce((acc, curr) => {
-    //   acc[curr.id] = curr;
-    //   return acc;
-    // }, {});
-
-    setState((state) => {
-      const updated = actionsInterfaceRef.current.add(actions);
-
-      // actions.forEach((action) => {
-      //   if (action.parent) {
-      //     const parent =
-      //       // parent could have already existed or parent is defined alongside children.
-      //       state.actions[action.parent] || actionsByKey[action.parent];
-
-      //     if (!parent) {
-      //       throw new Error(`Action of id ${action.parent} does not exist.`);
-      //     }
-
-      //     if (!parent.children) parent.children = [];
-      //     if (parent.children.includes(action.id)) return;
-      //     parent.children.push(action.id);
-      //   }
-      // });
-
-      return {
-        ...state,
-        actions: { ...updated },
-      };
-    });
+    setState((state) => ({
+      ...state,
+      actions: { ...actionsInterfaceRef.current.add(actions) },
+    }));
 
     return function unregister() {
-      setState((state) => {
-        const updated = actionsInterfaceRef.current.remove(actions);
-
-        // const allActions = state.actions;
-        // const removeActionIds = actions.map((action) => action.id);
-        // removeActionIds.forEach((actionId) => {
-        //   const action = state.actions[actionId];
-        //   if (action?.parent) {
-        //     const parent = state.actions[action.parent];
-        //     if (!parent?.children) {
-        //       return;
-        //     }
-        //     parent.children = parent.children.filter(
-        //       (child) => child !== actionId
-        //     );
-        //   }
-        //   delete allActions[actionId];
-        // });
-
-        return {
-          ...state,
-          actions: { ...updated },
-        };
-      });
+      setState((state) => ({
+        ...state,
+        actions: { ...actionsInterfaceRef.current.remove(actions) },
+      }));
     };
   }, []);
 

src/utils.ts

@@ -29,7 +29,7 @@ export function randomId() {
   return Math.random().toString(36).substring(2, 9);
 }
 
-export function createAction(params: Omit<Action, "id">): Action {
+export function createAction(params: Omit<Action, "id" | "children">): Action {
   return {
     id: randomId(),
     ...params,