diff --git a/src/backend/config.js b/src/backend/config.js
new file mode 100644
index 000000000..f319a2b28
--- /dev/null
+++ b/src/backend/config.js
@@ -0,0 +1,7 @@
+export let claissifyComponents = false
+
+export default function (bridge) {
+ bridge.on('config:classifyComponents', value => {
+ claissifyComponents = value
+ })
+}
diff --git a/src/backend/highlighter.js b/src/backend/highlighter.js
index 47a9d9dcc..88214b4c4 100644
--- a/src/backend/highlighter.js
+++ b/src/backend/highlighter.js
@@ -1,5 +1,6 @@
-import { inDoc } from '../util'
+import { inDoc, classify } from '../util'
import { getInstanceName } from './index'
+import { claissifyComponents } from './config'
const overlay = document.createElement('div')
overlay.style.backgroundColor = 'rgba(104, 182, 255, 0.35)'
@@ -30,8 +31,9 @@ export function highlight (instance) {
const rect = getInstanceRect(instance)
if (rect) {
let content = ''
- const name = getInstanceName(instance)
- name && (content = `<${name}>`)
+ let name = getInstanceName(instance)
+ if (claissifyComponents) name = classify(name)
+ if (name) content = `<${name}>`
showOverlay(rect, content)
}
}
diff --git a/src/backend/index.js b/src/backend/index.js
index 0cb3621c9..6a9cd02a7 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -7,6 +7,7 @@ import { initEventsBackend } from './events'
import { stringify, classify, camelize, set, parse } from '../util'
import path from 'path'
import ComponentSelector from './component-selector'
+import config from './config'
// Use a custom basename functions instead of the shimed version
// because it doesn't work on Windows
@@ -39,6 +40,8 @@ export function initBackend (_bridge) {
} else {
hook.once('init', connect)
}
+
+ config(bridge)
}
function connect () {
diff --git a/src/devtools/index.js b/src/devtools/index.js
index 26a7b5276..47d2d2428 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -166,6 +166,8 @@ function initApp (shell) {
}
}
}).$mount('#app')
+
+ store.dispatch('init')
})
}
diff --git a/src/devtools/views/components/module.js b/src/devtools/views/components/module.js
index 62ce8bea3..b88732086 100644
--- a/src/devtools/views/components/module.js
+++ b/src/devtools/views/components/module.js
@@ -61,6 +61,12 @@ const mutations = {
}
const actions = {
+ init: {
+ handler ({ state }) {
+ bridge.send('config:classifyComponents', state.classifyComponents)
+ },
+ root: true
+ },
toggleInstance ({ commit, dispatch, state }, { instance, expanded, recursive, parent = false } = {}) {
const id = instance.id
@@ -98,6 +104,7 @@ const actions = {
const newValue = !state.classifyComponents
commit('CLASSIFY_COMPONENTS', newValue)
storage.set(CLASSIFY_COMPONENTS_KEY, newValue)
+ bridge.send('config:classifyComponents', newValue)
}
}