feat: virtualize results (#82)

* feat: improved results api

* spike: virtualize/windowing

* fix: keyboard handling adjusted for virtualized

* poc for tom

* alternative virtualization solution

* cleanup, no need for exposing handlers

* cleanup

* cleanup old apis, KBarResults by default virtualized

example/src/App.tsx

@@ -2,11 +2,11 @@ import "./index.scss";
 import * as React from "react";
 import { KBarAnimator } from "../../src/KBarAnimator";
 import { KBarProvider } from "../../src/KBarContextProvider";
-import { Results, useResultItem } from "../../src/Results";
 import KBarPortal from "../../src/KBarPortal";
 import useMatches, { NO_GROUP } from "../../src/useMatches";
 import KBarPositioner from "../../src/KBarPositioner";
 import KBarSearch from "../../src/KBarSearch";
+import KBarResults from "../../src/KBarResults";
 import { Switch, Route, useHistory, Redirect } from "react-router-dom";
 import Layout from "./Layout";
 import Home from "./Home";
@@ -15,6 +15,7 @@ import SearchDocsActions from "./SearchDocsActions";
 import { createAction } from "../../src/utils";
 import { useAnalytics } from "./utils";
 import { Action } from "../../src";
+import Blog from "./Blog";
 
 const searchStyle = {
   padding: "12px 16px",
@@ -27,11 +28,6 @@ const searchStyle = {
   color: "var(--foreground)",
 };
 
-const resultsStyle = {
-  maxHeight: 400,
-  overflow: "auto",
-};
-
 const animatorStyle = {
   maxWidth: "600px",
   width: "100%",
@@ -147,6 +143,9 @@ const App = () => {
           <Route path="/docs/:slug">
             <Docs />
           </Route>
+          <Route path="/blog">
+            <Blog />
+          </Route>
           <Route path="*">
             <Home />
           </Route>
@@ -158,69 +157,85 @@ const App = () => {
 
 function RenderResults() {
   const groups = useMatches();
+  const flattened = React.useMemo(
+    () =>
+      groups.reduce((acc, curr) => {
+        acc.push(curr.name);
+        acc.push(...curr.actions);
+        return acc;
+      }, []),
+    [groups]
+  );
 
   return (
-    <Results>
-      <div style={resultsStyle}>
-        {groups.map((group) => (
-          <div key={group.name}>
-            {group.name !== NO_GROUP && (
-              <div style={groupNameStyle}>{group.name}</div>
-            )}
-            {group.actions.map((action) => {
-              return <ResultItem key={action.id} action={action} />;
-            })}
-          </div>
-        ))}
-      </div>
-    </Results>
+    <KBarResults
+      items={flattened.filter((i) => i !== NO_GROUP)}
+      onRender={({ item, active }) =>
+        typeof item === "string" ? (
+          <div style={groupNameStyle}>{item}</div>
+        ) : (
+          <ResultItem action={item} active={active} />
+        )
+      }
+    />
   );
 }
 
-function ResultItem({ action }: { action: Action }) {
-  const { active, handlers } = useResultItem({ action });
-
-  return (
-    <div
-      {...handlers}
-      style={{
-        padding: "12px 16px",
-        background: active ? "var(--a1)" : "var(--background)",
-        borderLeft: `2px solid ${active ? "var(--foreground)" : "transparent"}`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        cursor: "pointer",
-      }}
-    >
-      <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
-        {action.icon && action.icon}
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <span>{action.name}</span>
-          {action.subtitle && (
-            <span style={{ fontSize: 12 }}>{action.subtitle}</span>
-          )}
+const ResultItem = React.forwardRef(
+  (
+    {
+      action,
+      active,
+    }: {
+      action: Action;
+      active: boolean;
+    },
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        ref={ref}
+        style={{
+          padding: "12px 16px",
+          background: active ? "var(--a1)" : "var(--background)",
+          borderLeft: `2px solid ${
+            active ? "var(--foreground)" : "transparent"
+          }`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          cursor: "pointer",
+        }}
+      >
+        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+          {action.icon && action.icon}
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            <span>{action.name}</span>
+            {action.subtitle && (
+              <span style={{ fontSize: 12 }}>{action.subtitle}</span>
+            )}
+          </div>
         </div>
+        {action.shortcut?.length ? (
+          <div style={{ display: "grid", gridAutoFlow: "column", gap: "4px" }}>
+            {action.shortcut.map((sc) => (
+              <kbd
+                key={sc}
+                style={{
+                  padding: "4px 6px",
+                  background: "rgba(0 0 0 / .1)",
+                  borderRadius: "4px",
+                }}
+              >
+                {sc}
+              </kbd>
+            ))}
+          </div>
+        ) : null}
       </div>
-      {action.shortcut?.length ? (
-        <div style={{ display: "grid", gridAutoFlow: "column", gap: "4px" }}>
-          {action.shortcut.map((sc) => (
-            <kbd
-              key={sc}
-              style={{
-                padding: "4px 6px",
-                background: "rgba(0 0 0 / .1)",
-                borderRadius: "4px",
-              }}
-            >
-              {sc}
-            </kbd>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}
+    );
+  }
+);
 
 export default App;
 

example/src/Blog.tsx

@@ -1,23 +1,46 @@
 import * as React from "react";
 import useRegisterActions from "../../src/useRegisterActions";
+import { createAction } from "../../src/utils";
 
 export default function Blog() {
-  useRegisterActions([
-    {
-      id: "dynamicAction1",
-      name: "Action only visible in Blog",
-      shortcut: [],
-      keywords: "",
-      perform: () => window.alert("dynamic action"),
-    },
-    {
-      id: "dynamicAction2",
-      name: "Another action only visible in Blog",
-      shortcut: [],
-      keywords: "",
-      perform: () => window.alert("dynamic action"),
-    },
-  ]);
+  const [actions, setActions] = React.useState(
+    Array.from(Array(4)).map((_, i) =>
+      createAction({
+        name: i.toString(),
+        shortcut: [],
+        keywords: "",
+        perform: () => alert(i),
+      })
+    )
+  );
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setActions((actions) => [
+        ...actions,
+        createAction({
+          name: "Surprise",
+          shortcut: [],
+          keywords: "",
+          perform: () => alert("Surprise"),
+        }),
+        createAction({
+          name: "Surprise 2",
+          shortcut: [],
+          keywords: "",
+          perform: () => alert("Surprise 2"),
+        }),
+        createAction({
+          name: "Surprise 3",
+          shortcut: [],
+          keywords: "",
+          perform: () => alert("Surprise 3"),
+        }),
+      ]);
+    }, 2000);
+  }, []);
+
+  useRegisterActions(actions, [actions]);
 
   return <div>Blog</div>;
 }

package.json

@@ -44,7 +44,8 @@
   "dependencies": {
     "@reach/portal": "^0.16.0",
     "fast-equals": "^2.0.3",
-    "match-sorter": "^6.3.0"
+    "match-sorter": "^6.3.0",
+    "react-virtual": "^2.8.2"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0",