Sync 'classifyComponents' settings with backend

src/backend/config.js

@@ -0,0 +1,7 @@
+export let claissifyComponents = false
+
+export default function (bridge) {
+ bridge.on('config:classifyComponents', value => {
+ claissifyComponents = value
+ })
+}

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 = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`)
+ let name = getInstanceName(instance)
+ if (claissifyComponents) name = classify(name)
+ if (name) content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`
  showOverlay(rect, content)
  }
 }

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 () {

src/devtools/index.js

@@ -166,6 +166,8 @@ function initApp (shell) {
  }
  }
  }).$mount('#app')
+
+ store.dispatch('init')
  })
 }
 

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)
  }
 }