feat: SharedData: classifyComponent, openInEditorHost (#575)

* Shared-data: classifyComponent, openInEditorHost

* Fix SharedData on user page refresh

* Change config to `window.VUE_DEVTOOLS_CONFIG`

* Wrap example in dev-only condition

Author: Akryum

docs/open-in-editor.md

@@ -35,3 +35,17 @@ openInEditor('code')
 ## Node.js
 
 You can use the [launch-editor](https://github.com/yyx990803/launch-editor#usage) package to setup an HTTP route with the `/__open-in-editor` path. It will receive `file` as an URL variable.
+
+## Customize request
+
+You can change the request host (default `/`) with the following code in your frontend app:
+
+```js
+if (process.env.NODE_ENV !== 'production')
+  // App served from port 4000
+  // Webpack dev server on port 9000
+  window.VUE_DEVTOOLS_CONFIG = {
+    openInEditorHost: 'http://localhost:9000/'
+  }
+}
+```

shells/dev/target/index.js

@@ -9,6 +9,10 @@ import MyClass from './MyClass.js'
 import Router from './Router.vue'
 import router from './router'
 
+window.VUE_DEVTOOLS_CONFIG = {
+  openInEditorHost: '/'
+}
+
 const items = []
 for (var i = 0; i < 100; i++) {
   items.push({ id: i })

src/backend/config.js

@@ -1,6 +1,6 @@
 import { inDoc, classify } from '../util'
 import { getInstanceName } from './index'
-import { claissifyComponents } from './config'
+import SharedData from 'src/shared-data'
 
 const overlay = document.createElement('div')
 overlay.style.backgroundColor = 'rgba(104, 182, 255, 0.35)'
@@ -32,7 +32,7 @@ export function highlight (instance) {
   if (rect) {
     let content = ''
     let name = getInstanceName(instance)
-    if (claissifyComponents) name = classify(name)
+    if (SharedData.classifyComponents) name = classify(name)
     if (name) content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`
     showOverlay(rect, content)
   }

src/backend/highlighter.js

@@ -7,7 +7,7 @@ import { initEventsBackend } from './events'
 import { findRelatedComponent } from './utils'
 import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
 import ComponentSelector from './component-selector'
-import config from './config'
+import SharedData, { init as initSharedData } from 'src/shared-data'
 
 // hook should have been injected before this executes.
 const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
@@ -32,12 +32,15 @@ export function initBackend (_bridge) {
     hook.once('init', connect)
   }
 
-  config(bridge)
-
   initRightClick()
 }
 
 function connect () {
+  initSharedData({
+    bridge,
+    Vue: hook.Vue
+  })
+
   hook.currentTab = 'components'
   bridge.on('switch-tab', tab => {
     hook.currentTab = tab
@@ -118,6 +121,16 @@ function connect () {
 
   window.__VUE_DEVTOOLS_INSPECT__ = inspectInstance
 
+  // User project devtools config
+  if (window.hasOwnProperty('VUE_DEVTOOLS_CONFIG')) {
+    const config = window.VUE_DEVTOOLS_CONFIG
+
+    // Open in editor
+    if (config.hasOwnProperty('openInEditorHost')) {
+      SharedData.openInEditorHost = config.openInEditorHost
+    }
+  }
+
   bridge.log('backend ready.')
   bridge.send('ready', hook.Vue.version)
   console.log(

src/backend/index.js

@@ -5,6 +5,8 @@ import store from './store'
 import './plugins'
 import { parse } from '../util'
 import { isChrome, initEnv } from './env'
+import SharedData, { init as initSharedData, destroy as destroySharedData } from 'src/shared-data'
+import storage from './storage'
 
 // UI
 
@@ -80,6 +82,23 @@ function initApp (shell) {
   shell.connect(bridge => {
     window.bridge = bridge
 
+    if (Vue.prototype.hasOwnProperty('$shared')) {
+      destroySharedData()
+    } else {
+      Object.defineProperty(Vue.prototype, '$shared', {
+        get: () => SharedData
+      })
+    }
+
+    initSharedData({
+      bridge,
+      Vue,
+      storage,
+      persist: [
+        'classifyComponents'
+      ]
+    })
+
     bridge.once('ready', version => {
       store.commit(
         'SHOW_MESSAGE',
@@ -157,8 +176,6 @@ function initApp (shell) {
         }
       }
     }).$mount('#app')
-
-    store.dispatch('init')
   })
 }
 

src/devtools/index.js

@@ -44,7 +44,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import StateInspector from 'components/StateInspector.vue'
@@ -66,14 +65,11 @@ export default {
     }
   },
   computed: {
-    ...mapState('components', [
-      'classifyComponents'
-    ]),
     hasTarget () {
       return this.target.id != null
     },
     targetName () {
-      return this.classifyComponents ? classify(this.target.name) : this.target.name
+      return this.$shared.classifyComponents ? classify(this.target.name) : this.target.name
     },
     filteredState () {
       return groupBy(sortByKey(this.target.state.filter(el => {

src/devtools/views/components/ComponentInspector.vue

@@ -82,7 +82,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import { classify, scrollIntoView, UNDEFINED } from '../../../util'
 
 export default {
@@ -101,10 +100,6 @@ export default {
   },
 
   computed: {
-    ...mapState('components', [
-      'classifyComponents'
-    ]),
-
     scrollToExpanded () {
       return this.$store.state.components.scrollToExpanded
     },
@@ -126,7 +121,7 @@ export default {
     },
 
     displayName () {
-      return this.classifyComponents ? classify(this.instance.name) : this.instance.name
+      return this.$shared.classifyComponents ? classify(this.instance.name) : this.instance.name
     },
 
     componentHasKey () {

src/devtools/views/components/ComponentInstance.vue

@@ -22,9 +22,9 @@
         <span>Select</span>
       </a>
       <a class="button classify-names"
-         :class="{ active: classifyComponents }"
+         :class="{ active: $shared.classifyComponents }"
          v-tooltip="'Format component names'"
-         @click="toggleClassifyComponents"
+         @click="$shared.classifyComponents = !$shared.classifyComponents"
       >
         <VueIcon icon="text_fields"/>
         <span>Format</span>
@@ -43,8 +43,6 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
-
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import ComponentInstance from './ComponentInstance.vue'
@@ -129,12 +127,6 @@ export default {
     }
   },
 
-  computed: {
-    ...mapState('components', [
-      'classifyComponents'
-    ])
-  },
-
   mounted () {
     bridge.on('instance-selected', () => {
       this.setSelecting(false)
@@ -146,10 +138,6 @@ export default {
   },
 
   methods: {
-    ...mapActions('components', [
-      'toggleClassifyComponents'
-    ]),
-
     filterInstances (e) {
       bridge.send('filter-instances', classify(e.target.value))
     },

src/devtools/views/components/ComponentTree.vue

@@ -1,8 +1,4 @@
 import Vue from 'vue'
-import storage from '../../storage'
-
-const CLASSIFY_COMPONENTS_KEY = 'CLASSIFY_COMPONENTS'
-const classifyComponents = storage.get(CLASSIFY_COMPONENTS_KEY)
 
 const state = {
   selected: null,
@@ -11,8 +7,7 @@ const state = {
   instancesMap: {},
   expansionMap: {},
   events: [],
-  scrollToExpanded: null,
-  classifyComponents: classifyComponents == null ? true : classifyComponents
+  scrollToExpanded: null
 }
 
 const mutations = {
@@ -54,19 +49,10 @@ const mutations = {
   TOGGLE_INSTANCE (state, { id, expanded, scrollTo = null } = {}) {
     Vue.set(state.expansionMap, id, expanded)
     state.scrollToExpanded = scrollTo
-  },
-  CLASSIFY_COMPONENTS (state, value) {
-    state.classifyComponents = value
   }
 }
 
 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,13 +84,6 @@ const actions = {
         })
       }
     }
-  },
-
-  toggleClassifyComponents ({ state, commit }) {
-    const newValue = !state.classifyComponents
-    commit('CLASSIFY_COMPONENTS', newValue)
-    storage.set(CLASSIFY_COMPONENTS_KEY, newValue)
-    bridge.send('config:classifyComponents', newValue)
   }
 }
 

src/devtools/views/components/module.js

@@ -116,10 +116,6 @@ export default {
       'filteredEvents'
     ]),
 
-    ...mapState('components', [
-      'classifyComponents'
-    ]),
-
     filter: {
       get () {
         return this.$store.state.events.filter
@@ -138,7 +134,7 @@ export default {
     }),
 
     displayComponentName (name) {
-      return this.classifyComponents ? classify(name) : name
+      return this.$shared.classifyComponents ? classify(name) : name
     }
   },
 

src/devtools/views/events/EventsHistory.vue

@@ -1,5 +1,6 @@
 import storage from '../../storage'
 import { classify } from 'src/util'
+import SharedData from 'src/shared-data'
 
 const ENABLED_KEY = 'EVENTS_ENABLED'
 const enabled = storage.get(ENABLED_KEY)
@@ -48,7 +49,7 @@ const getters = {
     return state.events[state.inspectedIndex]
   },
   filteredEvents: (state, getters, rootState) => {
-    const classifyComponents = rootState.components.classifyComponents
+    const classifyComponents = SharedData.classifyComponents
     let searchText = state.filter.toLowerCase()
     const searchComponent = /<|>/g.test(searchText)
     if (searchComponent) {