feat: RegEx Filter in Events Tab (vuejs#838)

ericnograles · Akryum · commit 118a37f3ff7d · 2019-01-25T18:19:23.000+01:00
* applies similar RegExp lookup to events as we do in Vuex

* instantiates regex once before .filter loop

* ESLint issues

* test(e2e): search event RegEx
diff --git a/cypress/integration/events-tab.js b/cypress/integration/events-tab.js
@@ -28,6 +28,8 @@ suite('events tab', () => {
     cy.get('.history .entry[data-active="true"]').should('have.length', 3)
     cy.get('.left .search input').clear().type('<eventchild1>')
     cy.get('.history .entry[data-active="true"]').should('have.length', 1)
+    cy.get('.left .search input').clear().type('/^event$/')
+    cy.get('.history .entry[data-active="true"]').should('have.length', 1)
     cy.get('.left .search input').clear()
     cy.get('.button.reset').click()
     cy.get('.history .entry[data-active="true"]').should('have.length', 0)
diff --git a/src/devtools/views/events/module.js b/src/devtools/views/events/module.js
@@ -4,6 +4,7 @@ import SharedData from 'src/shared-data'
 
 const ENABLED_KEY = 'EVENTS_ENABLED'
 const enabled = storage.get(ENABLED_KEY)
+const REGEX_RE = /^\/(.*?)\/(\w*)/
 
 const state = {
   enabled: enabled == null ? true : enabled,
@@ -42,20 +43,41 @@ const mutations = {
   }
 }
 
+const matchingEvent = ({ searchText, searchComponent, regEx }) => e => {
+  const classifyComponents = SharedData.classifyComponents
+  let searchTerm = (searchComponent
+    ? (classifyComponents
+      ? classify(e.instanceName) : e.instanceName)
+    : e.eventName)
+
+  if (regEx) {
+    try {
+      return regEx.test(searchTerm)
+    } catch (e) {
+      return searchTerm.toLowerCase().indexOf(searchText) > -1
+    }
+  }
+
+  return searchTerm.toLowerCase().indexOf(searchText) > -1
+}
+
 const getters = {
   activeEvent: (state, getters) => {
     return getters.filteredEvents[state.inspectedIndex]
   },
   filteredEvents: (state, getters, rootState) => {
-    const classifyComponents = SharedData.classifyComponents
     let searchText = state.filter.toLowerCase()
     const searchComponent = /<|>/g.test(searchText)
     if (searchComponent) {
       searchText = searchText.replace(/<|>/g, '')
     }
-    return state.events.filter(
-      e => (searchComponent ? (classifyComponents ? classify(e.instanceName) : e.instanceName) : e.eventName).toLowerCase().indexOf(searchText) > -1
-    )
+    const regExParts = state.filter.match(REGEX_RE)
+    let regEx
+    if (regExParts) {
+      regEx = new RegExp(regExParts[1], regExParts[2])
+    }
+    return state.events
+      .filter(matchingEvent({ searchText, searchComponent, regEx }))
   }
 }
 
