Legacy

README.md

@@ -24,18 +24,18 @@ To enable this feature, follow [this guide](./docs/open-in-editor.md).
 
 ### Manual Installation
 
-This is only necessary when you want to build the extension yourself from source to get not-yet-released features.
+This is only necessary when you want to build the extension with the source repo to get not-yet-released features.
 
 **Make sure you are using Node 6+ and NPM 3+**
 
 1. Clone this repo
 2. `cd vue-devtools` the newly created folder
 2. run `yarn install`
 3. then run `yarn run build`
-4. Open the Chrome extension page (currently under Menu > More Tools > Extensions)
+4. Open the Chrome extension page (currently under `Menu` > `More Tools` > `Extensions`)
 5. Check "developer mode" on the top-right corner
 6. Click the "load unpacked" button on the left, and choose the folder: `vue-devtools/packages/shell-chrome/`
-7. Alternatilvely to step 3, you can also use `yarn dev:chrome` to build & watch the unpacked extension
+7. Alternatively to step 3, you can also use `yarn dev:chrome` to build & watch the unpacked extension
 
 ### Development
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devtools",
-  "version": "5.3.3",
+  "version": "5.3.4",
   "description": "devtools for Vue.js!",
   "private": true,
   "workspaces": [

packages/app-frontend/src/components/ActionHeader.vue

@@ -35,6 +35,7 @@
     color #ccc
 
 .vue-ui-icon
+  min-width 16px
   width 16px
   height @width
   margin-right 0

packages/app-frontend/src/views/routes/RoutesMeta.vue

@@ -59,6 +59,9 @@ export default {
       if (routeData.name && routeData.name !== UNDEFINED) {
         data.name = routeData.name
       }
+      if (routeData.meta && !this.isEmptyObject(routeData.meta)) {
+        data.meta = routeData.meta
+      }
       if (routeData.component) {
         const component = {}
         // if (routeData.component.__file) {

packages/shell-chrome/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Vue.js devtools",
-  "version": "5.3.3",
-  "version_name": "5.3.3",
+  "version": "5.3.4",
+  "version_name": "5.3.4",
   "description": "Chrome and Firefox DevTools extension for debugging Vue.js applications.",
   "manifest_version": 2,
   "icons": {

packages/shell-chrome/src/devtools-background.js

@@ -46,7 +46,7 @@ chrome.runtime.onMessage.addListener(request => {
   if (request === 'vue-panel-load') {
     onPanelLoad()
   } else if (request.vueToast) {
-    toast(request.vueToast.message, request.vueToast.type)
+    toast(request.vueToast)
   } else if (request.vueContextMenu) {
     onContextMenu(request.vueContextMenu)
   }
@@ -65,10 +65,10 @@ function onContextMenu ({ id }) {
       if (typeof res !== 'undefined' && res) {
         panelAction(() => {
           chrome.runtime.sendMessage('vue-get-context-menu-target')
-        }, 'Open Vue devtools to see component details')
+        }, 'open-devtools')
       } else {
         pendingAction = null
-        toast('No Vue component was found', 'warn')
+        toast('component-not-found')
       }
     })
   }
@@ -113,7 +113,16 @@ function onPanelHidden () {
 
 // Toasts
 
-function toast (message, type = 'normal') {
+const toastMessages = {
+  'open-devtools': { message: 'Open Vue devtools to see component details', type: 'normal' },
+  'component-not-found': { message: 'No Vue component was found', type: 'warn' }
+}
+
+function toast (id) {
+  if (!Object.keys(toastMessages).includes(id)) return
+
+  const { message, type } = toastMessages[id]
+
   const src = `(function() {
     __VUE_DEVTOOLS_TOAST__(\`${message}\`, '${type}');
   })()`

packages/shell-electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/devtools",
-  "version": "5.3.3",
+  "version": "5.3.4",
   "description": "StandAlone vue-devtools",
   "repository": {
     "url": "https://github.com/vuejs/vue-devtools.git",
@@ -34,7 +34,8 @@
     "@vue-devtools/app-frontend": "^0.0.0",
     "@vue-devtools/build-tools": "^0.0.0",
     "@vue-devtools/shared-utils": "^0.0.0",
+    "vue": "^2.6.12",
     "webpack": "^4.19.0",
     "webpack-cli": "^3.1.0"
   }
-}
+}

packages/shell-electron/types/index.d.ts

@@ -1 +1,15 @@
-export function connect(host?: string, port?: number|string): void
+import type { VueConstructor } from "vue";
+
+interface ConnectOptions {
+  io?: Function;
+  showToast?: Function;
+  app?: VueConstructor | VueConstructor[];
+}
+
+export function connect(
+  host?: string,
+  port?: number | string,
+  options?: ConnectOptions
+): void;
+
+export function init(vue: VueConstructor | VueConstructor[]): void;