Merge pull request #94 from jarle/element-caching-feature

Cache element items on creation
atom · Nov 16, 2017 · 5dfe294 · 5dfe294
2 parents d2fa3ac + 126c6bd
commit 5dfe294
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/lib/command-palette-view.js b/lib/command-palette-view.js
@@ -8,11 +8,22 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus'
 export default class CommandPaletteView {
   constructor () {
     this.keyBindingsForActiveElement = []
+    this.elementCache = new WeakMap()
     this.selectListView = new SelectListView({
       items: [],
       filter: this.filter,
       emptyMessage: 'No matches found',
       elementForItem: (item, {index, selected}) => {
+        const query = this.selectListView.getQuery()
+        const queryKey = `${query}:${selected}`
+        if(this.elementCache.has(item)) {
+          if(this.elementCache.get(item).has(queryKey)) {
+            return this.elementCache.get(item).get(queryKey)
+          }
+        } else {
+          this.elementCache.set(item, new Map())
+        }
+
         const li = document.createElement('li')
         li.classList.add('event', 'two-lines')
         li.dataset.eventName = item.name
@@ -36,7 +47,6 @@ export default class CommandPaletteView {
         titleEl.title = item.name
         leftBlock.appendChild(titleEl)
 
-        const query = this.selectListView.getQuery()
         this.highlightMatchesInElement(item.displayName, query, titleEl)
 
         if (selected) {
@@ -64,6 +74,7 @@ export default class CommandPaletteView {
         }
 
         li.appendChild(leftBlock)
+        this.elementCache.get(item).set(queryKey, li)
         return li
       },
       didConfirmSelection: (keyBinding) => {

diff --git a/test/command-palette-view.test.js b/test/command-palette-view.test.js
@@ -137,6 +137,43 @@ describe('CommandPaletteView', () => {
     })
   })
 
+  describe('element caching', () => {
+    it('caches all items when the query is changed', async () => {
+      const commandPalette = new CommandPaletteView()
+      const spy = sinon.spy(commandPalette.selectListView.props, 'elementForItem')
+      await commandPalette.toggle()
+      commandPalette.selectListView.items.forEach(item => {
+        const selected = commandPalette.selectListView.getSelectedItem() === item
+        assert(spy.calledWithMatch(item))
+        assert(commandPalette.elementCache.has(item))
+        assert(commandPalette.elementCache.get(item).has(`:${selected}`))
+        assert(spy.returned(commandPalette.elementCache.get(item).get(`:${selected}`)))
+      })
+
+      spy.reset()
+      await commandPalette.selectListView.update({query: 'Z'})
+      commandPalette.selectListView.items.forEach(item => {
+        const selected = commandPalette.selectListView.getSelectedItem() === item
+        assert(spy.calledWithMatch(item))
+        assert(commandPalette.elementCache.has(item))
+        assert(commandPalette.elementCache.get(item).has(`Z:${selected}`))
+        assert(spy.returned(commandPalette.elementCache.get(item).get(`Z:${selected}`)))
+      })
+    })
+
+    it('caches items incrementally when state is changed', async () => {
+      const commandPalette = new CommandPaletteView()
+      const spy = sinon.spy(commandPalette.selectListView.props, 'elementForItem')
+      await commandPalette.toggle()
+      commandPalette.selectListView.selectIndex((commandPalette.selectListView.selectionIndex + 1), false)
+      const selectedItem = commandPalette.selectListView.getSelectedItem()
+      assert(!commandPalette.elementCache.get(selectedItem).has(':true'))
+      await commandPalette.selectListView.update()
+      assert(commandPalette.elementCache.get(selectedItem).has(':true'))
+    })
+  })
+
+
   describe('hidden commands', () => {
     it('does not show commands that are marked as `hiddenInCommandPalette` by default, then *only* shows those commands when showHiddenCommands is invoked', async () => {
       const commandsDisposable = atom.commands.add('*', 'foo:hidden-in-command-palette', {