diff --git a/README.md b/README.md index 67aba0e80..34f949660 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ 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+** @@ -32,10 +32,10 @@ This is only necessary when you want to build the extension yourself from source 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 diff --git a/package.json b/package.json index 220acb779..37b45e619 100644 --- a/package.json +++ b/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": [ diff --git a/packages/app-frontend/src/components/ActionHeader.vue b/packages/app-frontend/src/components/ActionHeader.vue index 2a86090cd..34f3b0ab6 100644 --- a/packages/app-frontend/src/components/ActionHeader.vue +++ b/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 diff --git a/packages/app-frontend/src/views/routes/RoutesMeta.vue b/packages/app-frontend/src/views/routes/RoutesMeta.vue index 082a3663a..8d9f0050d 100644 --- a/packages/app-frontend/src/views/routes/RoutesMeta.vue +++ b/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) { diff --git a/packages/shell-chrome/manifest.json b/packages/shell-chrome/manifest.json index 905bee0c1..3237aaa5e 100644 --- a/packages/shell-chrome/manifest.json +++ b/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": { diff --git a/packages/shell-chrome/src/devtools-background.js b/packages/shell-chrome/src/devtools-background.js index 17b87ec98..ca7aafb4c 100644 --- a/packages/shell-chrome/src/devtools-background.js +++ b/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}'); })()` diff --git a/packages/shell-electron/package.json b/packages/shell-electron/package.json index 74b463f9a..5ce697f17 100644 --- a/packages/shell-electron/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/packages/shell-electron/types/index.d.ts b/packages/shell-electron/types/index.d.ts index c9b28d466..b0113b795 100644 --- a/packages/shell-electron/types/index.d.ts +++ b/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;