8 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/assets/breadcrumb-separator.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/ui/components/VueLoadingIndicator.vue:
--------------------------------------------------------------------------------
1 |
2 | Hello named route
9 |
3 |
4 |
6 |
7 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/router/RouteOne.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/router/RouteTwo.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Hello from route 1
10 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/api/src/api/index.ts:
--------------------------------------------------------------------------------
1 | export * from './api.js'
2 | export * from './app.js'
3 | export * from './component.js'
4 | export * from './context.js'
5 | export * from './hooks.js'
6 | export * from './util.js'
7 |
--------------------------------------------------------------------------------
/packages/shell-chrome/popups/not-found.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hello from route 2
10 |5 | Vue.js not detected 6 |
7 | -------------------------------------------------------------------------------- /packages/shell-dev-vue2/src/router/RouteWithAlias.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
8 |
10 |
11 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "npmClient": "yarn",
3 | "useWorkspaces": true,
4 | "version": "6.0.0-beta.2",
5 | "packages": [
6 | "packages/*"
7 | ],
8 | "ignoreChanges": [
9 | "**/*.md"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/cypress/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | 'cypress',
4 | ],
5 | env: {
6 | 'mocha': true,
7 | 'cypress/globals': true,
8 | },
9 | rules: {
10 | strict: 'off',
11 | },
12 | }
13 |
--------------------------------------------------------------------------------
/cypress/utils/suite.js:
--------------------------------------------------------------------------------
1 | export function suite(description, tests) {
2 | describe(description, () => {
3 | before(() => {
4 | cy.visit('/')
5 | cy.vueCheckInit()
6 | })
7 | tests()
8 | })
9 | }
10 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/Hidden.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | Hello from route with alias
9 |I'm hidden in the devtools
11 |
12 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/router/RouteWithBeforeEnter.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/SetupTSScriptProps.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Hello from before enter route
9 |{{ props }}
9 |
10 |
--------------------------------------------------------------------------------
/packages/app-backend-api/src/plugin.ts:
--------------------------------------------------------------------------------
1 | import type { PluginDescriptor, SetupFunction } from '@vue/devtools-api'
2 |
3 | export interface Plugin {
4 | descriptor: PluginDescriptor
5 | setupFn: SetupFunction
6 | error: Error
7 | }
8 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/router/RouteWithQuery.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/shared-utils/src/shell.ts:
--------------------------------------------------------------------------------
1 | import type { Bridge } from './bridge'
2 |
3 | export interface Shell {
4 | connect: (cb: ((bridge: Bridge) => void | PromiseHello from route with query: {{ $route.query }}
9 |{{ someArray }}
13 |
14 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/Ghost.vue:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 | I'm a ghost component that will be not displayed in the devtools
11 |
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | build
4 | /dist/*
5 | *.zip
6 | *.xpi
7 | tests_output
8 | selenium-debug.log
9 | TODOs.md
10 | .idea
11 | .web-extension-id
12 | yarn-error.log
13 |
14 | /packages/*/lib
15 | .amo.env.json
16 | build-node
17 |
--------------------------------------------------------------------------------
/packages/app-backend-vue1/src/index.ts:
--------------------------------------------------------------------------------
1 | import { defineBackend } from '@vue-devtools/app-backend-api'
2 |
3 | export const backend = defineBackend({
4 | frameworkVersion: 1,
5 | features: [],
6 | setup(_api) {
7 | // @TODO
8 | },
9 | })
10 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/router/ParentRoute.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/FormSection.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/shell-host/src/devtools.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import { setupPlugins } from '@front/plugins'
3 | import DevIframe from './DevIframe.vue'
4 |
5 | const app = createApp(DevIframe)
6 | setupPlugins(app)
7 | app.mount('#iframe-target')
8 |
--------------------------------------------------------------------------------
/packages/shell-chrome/src/hook.js:
--------------------------------------------------------------------------------
1 | const script = document.createElement('script')
2 | script.src = chrome.runtime.getURL('build/hook-exec.js')
3 | script.onload = () => {
4 | script.remove()
5 | }
6 | ;(document.head || document.documentElement).appendChild(script)
7 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | const path = require('node:path')
2 |
3 | module.exports = {
4 | plugins: [
5 | require('autoprefixer'),
6 | require('tailwindcss')(path.resolve(__dirname, './tailwind.config.js')),
7 | require('postcss-nested'),
8 | ],
9 | }
10 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/connection/AppDisconnected.vue:
--------------------------------------------------------------------------------
1 |
2 | Parent
10 |
3 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/docs/postcss.config.js:
--------------------------------------------------------------------------------
1 | const path = require('node:path')
2 |
3 | module.exports = {
4 | plugins: [
5 | require('autoprefixer'),
6 | require('tailwindcss')(path.resolve(__dirname, './tailwind.config.cjs')),
7 | require('postcss-nested'),
8 | ],
9 | }
10 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/timeline/composable/index.ts:
--------------------------------------------------------------------------------
1 | export * from './events'
2 | export * from './layers'
3 | export * from './markers'
4 | export * from './reset'
5 | export * from './screenshot'
6 | export * from './setup'
7 | export * from './store'
8 | export * from './time'
9 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/router/RouteWithParams.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/docs/src/.vitepress/theme/custom.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .nav-bar-title .logo {
6 | margin-top: 6px;
7 | }
8 |
9 | .home-hero {
10 | figure {
11 | .image {
12 | max-height: 100px;
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/EventEmit.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Hello from route with params: Username: {{ $route.params.username }}, Id: {{ $route.params.id }}
10 |
9 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/app-backend-core/src/global-hook.ts:
--------------------------------------------------------------------------------
1 | import type { DevtoolsHook } from '@vue-devtools/app-backend-api'
2 | import { target } from '@vue-devtools/shared-utils'
3 |
4 | // hook should have been injected before this executes.
5 | export const hook: DevtoolsHook = target.__VUE_DEVTOOLS_GLOBAL_HOOK__
6 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/Child.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | {{ count }}
16 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/Functional.vue:
--------------------------------------------------------------------------------
1 |
15 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/VModelExample.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/util/shared-data.ts:
--------------------------------------------------------------------------------
1 | import { onUnmounted } from 'vue'
2 | import { watchSharedData } from '@vue-devtools/shared-utils'
3 |
4 | export function onSharedDataChange(prop, handler) {
5 | const off = watchSharedData(prop, handler)
6 |
7 | onUnmounted(() => {
8 | off()
9 | })
10 | }
11 |
--------------------------------------------------------------------------------
/packages/docs/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const path = require('node:path')
2 | const base = require('../../tailwind.config.js')
3 |
4 | base.purge.content.push(
5 | path.resolve(__dirname, './src/**/*.{js,jsx,ts,tsx,vue}'),
6 | )
7 |
8 | base.corePlugins = {
9 | preflight: false,
10 | }
11 |
12 | module.exports = base
13 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/SetupDataLike.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | {{ message }}
16 |
13 |
16 |
17 |
--------------------------------------------------------------------------------
/packages/shell-chrome/popups/disabled.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ msg }}
14 |
15 |
5 | Vue.js is detected on this page.
6 | Devtools inspection is not available because it's in
7 | production mode or explicitly disabled by the author.
8 |
5 | Nuxt + Vue.js is detected on this page.
6 | Devtools inspection is not available because it's in
7 | production mode or explicitly disabled by the author.
8 |
13 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/VuexObject.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
21 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/public/target-iframe.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Vuex Object
14 |{{ object }}
15 |
3 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/timeline/composable/time.ts:
--------------------------------------------------------------------------------
1 | import {
2 | cursorTime,
3 | endTime,
4 | maxTime,
5 | minTime,
6 | startTime,
7 | } from './store'
8 |
9 | export function useTime() {
10 | return {
11 | startTime,
12 | endTime,
13 | minTime,
14 | maxTime,
15 | }
16 | }
17 |
18 | export function useCursor() {
19 | return {
20 | cursorTime,
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/Init.vue:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/router/RouteWithProps.vue:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 | Inited: {{ inited }}
19 |
18 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/SuspenseExample.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 | Hello from route with props: Username: {{ username }}, Id: {{ id }}
19 |{{ msg }}
17 |
18 |
19 |
20 |
21 | App 3
22 | 23 |{{ msg }}
28 | 29 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/plugins/global-refs.ts:
--------------------------------------------------------------------------------
1 | import type { App } from 'vue'
2 |
3 | interface Options {
4 | refs: { [key: string]: any }
5 | }
6 |
7 | export default {
8 | install(app: App, options: Options) {
9 | const { refs } = options
10 | const wrapper = {}
11 | Object.keys(refs).forEach((key) => {
12 | const get = refs[key]
13 | Object.defineProperty(wrapper, key, {
14 | get,
15 | })
16 | })
17 | app.config.globalProperties.$globalRefs = wrapper
18 | },
19 | }
20 |
--------------------------------------------------------------------------------
/packages/docs/src/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | home: true
3 | sidebar: false
4 | heroImage: /logo.svg
5 |
6 | actionText: Install now
7 | actionLink: /guide/installation
8 |
9 | footer: MIT Licensed | Copyright © 2014-present Evan You, Guillaume Chau
10 | ---
11 |
12 | ## Sponsors
13 |
14 | [💚️ Become a Sponsor](https://github.com/sponsors/Akryum)
15 |
16 |
17 |
18 | 
19 |
20 |
11 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/shell-host/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools/shell-host",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "cross-env TAILWIND_MODE=watch webpack serve"
7 | },
8 | "dependencies": {
9 | "@vue-devtools/app-backend-core": "^0.0.0",
10 | "@vue-devtools/app-frontend": "^0.0.0",
11 | "@vue-devtools/shared-utils": "^0.0.0",
12 | "vue": "^3.3.4"
13 | },
14 | "devDependencies": {
15 | "cross-env": "^5.2.0",
16 | "webpack": "^5.90.1",
17 | "webpack-cli": "^5.1.4"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/layout/orientation.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | const orientation = ref('landscape')
4 |
5 | export function useOrientation() {
6 | return {
7 | orientation,
8 | }
9 | }
10 |
11 | const mediaQuery = window.matchMedia('(min-width: 685px)')
12 | switchOrientation(mediaQuery)
13 | mediaQuery.addEventListener('change', switchOrientation)
14 |
15 | function switchOrientation(mediaQueryEvent: MediaQueryListEvent | MediaQueryList) {
16 | orientation.value = mediaQueryEvent.matches ? 'landscape' : 'portrait'
17 | }
18 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/NestedMore.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
24 |
27 |
28 | 16 | {{ count }} 17 |
18 | 19 |-
20 |
- 25 | {{ i }} 26 | 27 |
16 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/shell-host/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('node:path')
2 | const { createConfig } = require('@vue-devtools/build-tools')
3 | const openInEditor = require('launch-editor-middleware')
4 |
5 | module.exports = createConfig({
6 | entry: {
7 | devtools: './src/devtools.js',
8 | },
9 | output: {
10 | path: path.join(__dirname, '/build'),
11 | publicPath: '/build/',
12 | filename: '[name].js',
13 | },
14 | devServer: {
15 | port: 8091,
16 | onBeforeSetupMiddleware({ app }) {
17 | app.use('/__open-in-editor', openInEditor())
18 | },
19 | },
20 | })
21 |
--------------------------------------------------------------------------------
/packages/shell-chrome/popups/enabled.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
20 |
--------------------------------------------------------------------------------
/.github/workflows/create-release.yml:
--------------------------------------------------------------------------------
1 | name: Create release
2 |
3 | on:
4 | push:
5 | tags:
6 | - 'v*'
7 |
8 | jobs:
9 | build:
10 | name: Create Release
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Checkout code
14 | uses: actions/checkout@master
15 | with:
16 | fetch-depth: 0 # Fetch all tags
17 |
18 | - name: Create Release for Tag
19 | id: release_tag
20 | uses: Akryum/release-tag@v4.0.7
21 | env:
22 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
23 | with:
24 | tag_name: ${{ github.ref }}
25 |
--------------------------------------------------------------------------------
/packages/shared-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools/shared-utils",
3 | "version": "0.0.0",
4 | "private": true,
5 | "sideEffects": false,
6 | "main": "./lib/index.js",
7 | "types": "./lib/index.d.ts",
8 | "scripts": {
9 | "build": "rimraf lib && yarn ts",
10 | "build:watch": "yarn ts -w",
11 | "ts": "tsc -p tsconfig.json -d -outDir lib"
12 | },
13 | "dependencies": {
14 | "@vue/devtools-api": "^6.0.0-beta.11"
15 | },
16 | "devDependencies": {
17 | "@types/node": "^20.11.16",
18 | "@types/webpack-env": "^1.15.1",
19 | "typescript": "^5.3.3"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/EventNesting.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
6 | 
7 |
8 |
9 |
7 |
10 |
19 |
11 | Vue.js is detected on this page.
12 | Open DevTools and look for the Vue panel.
13 |
16 | Troubleshooting 17 |
18 |
27 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/app-backend-api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools/app-backend-api",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./lib/index.js",
6 | "types": "./lib/index.d.ts",
7 | "scripts": {
8 | "build": "rimraf lib && yarn ts",
9 | "build:watch": "yarn ts -w",
10 | "ts": "tsc -d -outDir lib"
11 | },
12 | "dependencies": {
13 | "@vue-devtools/shared-utils": "^0.0.0",
14 | "@vue/devtools-api": "^6.0.0-beta.1"
15 | },
16 | "devDependencies": {
17 | "@types/node": "^20.11.16",
18 | "@types/webpack-env": "^1.15.1",
19 | "typescript": "^5.3.3"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/shell-chrome/popups/enabled.nuxt.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
20 |
--------------------------------------------------------------------------------
/packages/app-backend-vue1/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools/app-backend-vue1",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./lib/index.js",
6 | "types": "./lib/index.d.ts",
7 | "scripts": {
8 | "build": "rimraf lib && yarn ts",
9 | "build:watch": "yarn ts -w",
10 | "ts": "tsc -d -outDir lib"
11 | },
12 | "dependencies": {
13 | "@vue-devtools/app-backend-api": "^0.0.0",
14 | "@vue-devtools/shared-utils": "^0.0.0"
15 | },
16 | "devDependencies": {
17 | "@types/node": "^20.11.16",
18 | "@types/webpack-env": "^1.15.1",
19 | "typescript": "^5.3.3"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/util/defer.ts:
--------------------------------------------------------------------------------
1 | import { onMounted, ref } from 'vue'
2 |
3 | export function useDefer(count = 10) {
4 | const displayPriority = ref(0)
5 |
6 | function step() {
7 | requestAnimationFrame(() => {
8 | displayPriority.value++
9 | if (displayPriority.value < count) {
10 | step()
11 | }
12 | })
13 | }
14 |
15 | function runDisplayPriority() {
16 | step()
17 | }
18 |
19 | function defer(priority) {
20 | return displayPriority.value >= priority
21 | }
22 |
23 | onMounted(() => {
24 | runDisplayPriority()
25 | })
26 |
27 | return {
28 | defer,
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/AsyncSetup.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
6 |
7 |
8 |
9 |
7 |
10 |
19 |
11 | Nuxt + Vue.js is detected on this page.
12 | Open DevTools and look for the Vue panel.
13 |
16 | Troubleshooting 17 |
18 |
26 | Async setup:
27 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools/shell-dev-vue2",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "cross-env TAILWIND_MODE=watch PORT=8100 webpack serve"
7 | },
8 | "dependencies": {
9 | "@vue-devtools/shell-host": "^0.0.0",
10 | "vue": "^2.7.10",
11 | "vue-router": "^3.6.5",
12 | "vuex": "^3.6.2"
13 | },
14 | "devDependencies": {
15 | "@vue-devtools/build-tools": "^0.0.0",
16 | "cross-env": "^5.2.0",
17 | "launch-editor-middleware": "^2.2.1",
18 | "vue-loader": "^15.7.1",
19 | "webpack": "^5.90.1",
20 | "webpack-cli": "^5.1.4"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/Form.vue:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/ui/components/VueLoadingBar.vue:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/app-backend-core/src/util/subscriptions.ts:
--------------------------------------------------------------------------------
1 | const activeSubs: Map27 |
{{ message }}
28 |
18 |
37 |
38 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/EventChildCond.vue:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 |
21 |
33 |
34 |
25 |
31 |
27 |
29 |
25 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/api/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2017",
4 | "lib": ["ESNext", "DOM"],
5 | "module": "ESNext",
6 | "moduleResolution": "node",
7 | "resolveJsonModule": true,
8 | "types": ["node", "webpack-env"],
9 | "strictBindCallApply": true,
10 | "strictFunctionTypes": true,
11 | "alwaysStrict": true,
12 | // Strict
13 | "noImplicitAny": false,
14 | "noImplicitThis": true,
15 | "removeComments": false,
16 | "sourceMap": false,
17 | "allowSyntheticDefaultImports": true,
18 | "esModuleInterop": true,
19 | "skipLibCheck": true,
20 | "preserveWatchOutput": true
21 | },
22 | "include": ["src/**/*"],
23 | "exclude": ["node_modules"]
24 | }
25 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/error/index.ts:
--------------------------------------------------------------------------------
1 | import { computed, ref } from 'vue'
2 |
3 | export interface ErrorMessage {
4 | message: string
5 | icon: string
6 | }
7 |
8 | const errors = ref
24 |
27 |
39 |
40 |
--------------------------------------------------------------------------------
/cypress/support/index.js:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/index.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 |
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 |
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools/shell-dev-vue3",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "cross-env TAILWIND_MODE=watch webpack serve"
7 | },
8 | "dependencies": {
9 | "@vue-devtools/shell-host": "^0.0.0",
10 | "@vue/devtools-api": "^6.0.0-beta.1",
11 | "core-js": "^3.6.4",
12 | "vue": "^3.3.4",
13 | "vue-router": "^4.2.5",
14 | "vuex": "^4.0.1"
15 | },
16 | "devDependencies": {
17 | "@vue-devtools/build-tools": "^0.0.0",
18 | "@vue/compiler-sfc": "^3.3.4",
19 | "cross-env": "^5.2.0",
20 | "launch-editor-middleware": "^2.2.1",
21 | "mini-css-extract-plugin": "^1.5.0",
22 | "webpack": "^5.90.1",
23 | "webpack-cli": "^5.1.4"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/shell-electron/webpack.node.config.js:
--------------------------------------------------------------------------------
1 | const path = require('node:path')
2 | const { createConfig } = require('@vue-devtools/build-tools')
3 |
4 | const target = {
5 | chrome: 52,
6 | firefox: 48,
7 | safari: 9,
8 | ie: 11,
9 | }
10 |
11 | module.exports = createConfig({
12 | target: 'node',
13 | externals: {
14 | // from https://socket.io/docs/v4/client-with-bundlers/
15 | 'bufferutil': 'bufferutil',
16 | 'utf-8-validate': 'utf-8-validate',
17 | },
18 | entry: {
19 | devtools: './src/devtools.js',
20 | backend: './src/backend.js',
21 | hook: './src/hook.js',
22 | },
23 | output: {
24 | path: path.join(__dirname, '/build-node'),
25 | publicPath: '/build-node/',
26 | filename: '[name].js',
27 | },
28 | }, target)
29 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/ui/composables/useDisableScroll.ts:
--------------------------------------------------------------------------------
1 | import { onBeforeUnmount, onMounted } from 'vue'
2 |
3 | let count = 0
4 |
5 | function getScrollingElements() {
6 | return document.querySelectorAll('.vue-ui-disable-scroll, body')
7 | }
8 |
9 | function updateScroll() {
10 | if (count === 0) {
11 | getScrollingElements().forEach(el =>
12 | el.classList.remove('vue-ui-no-scroll'),
13 | )
14 | }
15 | else if (count === 1) {
16 | getScrollingElements().forEach(el => el.classList.add('vue-ui-no-scroll'))
17 | }
18 | }
19 |
20 | export function useDisableScroll() {
21 | onMounted(() => {
22 | count++
23 | updateScroll()
24 | })
25 |
26 | onBeforeUnmount(() => {
27 | count--
28 | updateScroll()
29 | })
30 | }
31 |
--------------------------------------------------------------------------------
/packages/shared-utils/src/plugin-permissions.ts:
--------------------------------------------------------------------------------
1 | import { SharedData } from './shared-data'
2 |
3 | export enum PluginPermission {
4 | ENABLED = 'enabled',
5 | COMPONENTS = 'components',
6 | CUSTOM_INSPECTOR = 'custom-inspector',
7 | TIMELINE = 'timeline',
8 | }
9 |
10 | export function hasPluginPermission(pluginId: string, permission: PluginPermission) {
11 | const result = SharedData.pluginPermissions[`${pluginId}:${permission}`]
12 | if (result == null) {
13 | return true
14 | }
15 | return !!result
16 | }
17 |
18 | export function setPluginPermission(pluginId: string, permission: PluginPermission, active: boolean) {
19 | SharedData.pluginPermissions = {
20 | ...SharedData.pluginPermissions,
21 | [`${pluginId}:${permission}`]: active,
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/app-backend-core/src/page-config.ts:
--------------------------------------------------------------------------------
1 | import { SharedData, target } from '@vue-devtools/shared-utils'
2 |
3 | export interface PageConfig {
4 | openInEditorHost?: string
5 | defaultSelectedAppId?: string
6 | customVue2ScanSelector?: string
7 | }
8 |
9 | let config: PageConfig = {}
10 |
11 | export function getPageConfig(): PageConfig {
12 | return config
13 | }
14 |
15 | export function initOnPageConfig() {
16 | // User project devtools config
17 | if (Object.hasOwnProperty.call(target, 'VUE_DEVTOOLS_CONFIG')) {
18 | config = SharedData.pageConfig = target.VUE_DEVTOOLS_CONFIG
19 |
20 | // Open in editor
21 | if (Object.hasOwnProperty.call(config, 'openInEditorHost')) {
22 | SharedData.openInEditorHost = config.openInEditorHost
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/settings/NewTag.vue:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
23 | New
24 |
25 |
26 |
27 |
38 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/components/composable/highlight.ts:
--------------------------------------------------------------------------------
1 | import { getBridge } from '@front/features/bridge'
2 | import { BridgeEvents } from '@vue-devtools/shared-utils'
3 | import type { Ref } from 'vue'
4 | import throttle from 'lodash/throttle'
5 |
6 | const throttledSend = throttle((id?: string) => {
7 | if (id) {
8 | getBridge().send(BridgeEvents.TO_BACK_COMPONENT_MOUSE_OVER, id)
9 | }
10 | else {
11 | getBridge().send(BridgeEvents.TO_BACK_COMPONENT_MOUSE_OUT)
12 | }
13 | }, 200)
14 |
15 | export function useComponentHighlight(id: Ref
34 |
36 |
37 |
38 |
43 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/Nested.vue:
--------------------------------------------------------------------------------
1 |
27 |
28 |
29 | {{ heavy() }}
35 |
30 |
46 |
47 |
--------------------------------------------------------------------------------
/packages/build-tools/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue-devtools/build-tools",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "src/index.js",
6 | "dependencies": {
7 | "@babel/core": "^7.16.0",
8 | "@babel/preset-env": "^7.16.4",
9 | "@vue/compiler-sfc": "^3.3.4",
10 | "babel-loader": "^8.2.3",
11 | "css-loader": "^5.2.4",
12 | "esbuild": "^0.11.20",
13 | "esbuild-loader": "^2.13.0",
14 | "friendly-errors-webpack-plugin": "^1.7.0",
15 | "monaco-editor-webpack-plugin": "^3.1.0",
16 | "path-browserify": "^1.0.1",
17 | "postcss-loader": "^5.2.0",
18 | "style-resources-loader": "^1.2.1",
19 | "stylus": "^0.54.5",
20 | "stylus-loader": "^5.0.0",
21 | "terser-webpack-plugin": "^5.1.1",
22 | "vue-loader": "^17.2.2",
23 | "webpack": "^5.90.1",
24 | "webpack-merge": "^5.10.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/chrome/pane-visibility.ts:
--------------------------------------------------------------------------------
1 | import { isChrome } from '@vue-devtools/shared-utils'
2 |
3 | let panelShown = !isChrome
4 | let pendingAction: (() => void | Promise31 | Nest children 32 |
33 |
39 |
45 | {{ state2 }}
46 |
47 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/Events.vue:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 |
27 |
42 |
43 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2019",
4 | "jsx": "preserve",
5 | "baseUrl": ".",
6 | "moduleResolution": "node",
7 | "paths": {
8 | "@back/*": [
9 | "packages/app-backend-core/src/*"
10 | ],
11 | "@front/*": [
12 | "packages/app-frontend/src/*"
13 | ]
14 | },
15 | "resolveJsonModule": true,
16 | "types": [
17 | "chrome",
18 | "node",
19 | "webpack-env"
20 | ],
21 | "allowJs": true,
22 | "strictBindCallApply": true,
23 | "strictFunctionTypes": true,
24 | "alwaysStrict": true,
25 | // Strict
26 | "noImplicitAny": false,
27 | "noImplicitThis": true,
28 | "outDir": "lib",
29 | "allowSyntheticDefaultImports": true,
30 | "esModuleInterop": true,
31 | "skipLibCheck": true
32 | },
33 | "include": [
34 | "packages/app-frontend/src/**/*",
35 | "packages/shared-utils/src/**/*"
36 | ],
37 | "exclude": [
38 | "node_modules"
39 | ]
40 | }
41 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/error/ErrorOverlay.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 | Events
28 |
25 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/util/reactivity.ts:
--------------------------------------------------------------------------------
1 | import type { Ref } from 'vue'
2 | import { watch } from 'vue'
3 | import { getStorage, setStorage } from '@vue-devtools/shared-utils'
4 |
5 | export function nonReactive
26 |
39 |
31 | {{ error.message }}
32 |
33 |
3 |
13 |
14 |
15 |
44 |
--------------------------------------------------------------------------------
/packages/shell-host/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
4 |
12 |
5 | 
10 |
11 |
10 | Not Vue
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/sign-firefox.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | const path = require('node:path')
4 | const fs = require('node:fs')
5 | const execa = require('execa')
6 |
7 | const credFile = path.resolve(__dirname, '.amo.env.json')
8 |
9 | if (!fs.existsSync(credFile)) {
10 | fs.writeFileSync(credFile, JSON.stringify({
11 | apiKey: '',
12 | apiSecret: '',
13 | }, null, 2), { encoding: 'utf8' })
14 | console.log('Please provide Mozilla API credentials in .amo.env.json\nhttps://addons.mozilla.org/developers/addon/api/key/')
15 | process.exit(1)
16 | }
17 |
18 | const creds = JSON.parse(fs.readFileSync(credFile, {
19 | encoding: 'utf8',
20 | }))
21 |
22 | const child = execa('web-ext', [
23 | 'sign',
24 | '--api-key',
25 | creds.apiKey,
26 | '--api-secret',
27 | creds.apiSecret,
28 | '-s',
29 | 'packages/shell-chrome',
30 | '-a',
31 | 'dist',
32 | '-i',
33 | 'src',
34 | '--id',
35 | '{c087fa6e-b59f-475d-b08d-f03fef34fa7f}',
36 | ], {
37 | shell: true,
38 | stdio: ['inherit', 'inherit', 'inherit'],
39 | })
40 |
41 | child.on('exit', (code) => {
42 | process.exit(code)
43 | })
44 |
--------------------------------------------------------------------------------
/packages/api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue/devtools-api",
3 | "version": "6.6.4",
4 | "description": "Interact with the Vue devtools from the page",
5 | "author": {
6 | "name": "Guillaume Chau"
7 | },
8 | "license": "MIT",
9 | "repository": {
10 | "url": "https://github.com/vuejs/vue-devtools.git",
11 | "type": "git",
12 | "directory": "packages/api"
13 | },
14 | "sideEffects": false,
15 | "main": "lib/cjs/index.js",
16 | "browser": "lib/esm/index.js",
17 | "module": "lib/esm/index.js",
18 | "types": "lib/esm/index.d.ts",
19 | "files": [
20 | "lib/cjs",
21 | "lib/esm"
22 | ],
23 | "publishConfig": {
24 | "access": "public"
25 | },
26 | "scripts": {
27 | "build": "rimraf lib && yarn build:esm && yarn build:cjs",
28 | "build:esm": "tsc --module es2015 --outDir lib/esm -d",
29 | "build:cjs": "tsc --module commonjs --outDir lib/cjs",
30 | "build:watch": "yarn tsc --module es2015 --outDir lib/esm -d -w --sourceMap"
31 | },
32 | "devDependencies": {
33 | "@types/node": "^20.11.16",
34 | "@types/webpack-env": "^1.15.1",
35 | "typescript": "^5.3.3"
36 | }
37 | }
--------------------------------------------------------------------------------
/packages/app-frontend/src/util/keyboard.ts:
--------------------------------------------------------------------------------
1 | import { onMounted, onUnmounted } from 'vue'
2 |
3 | type KeyboardHandler = (event: KeyboardEvent) => boolean | void | Promise
16 |
39 | Create your own Plugin
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/plugin/PluginPermission.vue:
--------------------------------------------------------------------------------
1 |
41 |
42 |
43 |
20 | No plugins found
21 |
22 |
23 |
24 | 
28 |
29 |
33 |
34 |
28 |
29 | 30 | Devtools plugins are added by packages in your application. They can provide new features to the Vue devtools, such as custom inspectors, additional component data or timeline layers. 31 |
32 |
40 |
46 |
47 |
--------------------------------------------------------------------------------
/packages/app-backend-vue2/src/events.ts:
--------------------------------------------------------------------------------
1 | import type { BackendContext } from '@vue-devtools/app-backend-api'
2 | import { HookEvents } from '@vue-devtools/shared-utils'
3 |
4 | const internalRE = /^(?:pre-)?hook:/
5 |
6 | function wrap(app, Vue, method, ctx: BackendContext) {
7 | const original = Vue.prototype[method]
8 | if (original) {
9 | Vue.prototype[method] = function (...args) {
10 | const res = original.apply(this, args)
11 | logEvent(this, method, args[0], args.slice(1))
12 | return res
13 | }
14 | }
15 |
16 | function logEvent(vm, type, eventName, payload) {
17 | // The string check is important for compat with 1.x where the first
18 | // argument may be an object instead of a string.
19 | // this also ensures the event is only logged for direct $emit (source)
20 | // instead of by $dispatch/$broadcast
21 | if (typeof eventName === 'string' && !internalRE.test(eventName)) {
22 | const instance = vm._self || vm
23 | ctx.hook.emit(HookEvents.COMPONENT_EMIT, app, instance, eventName, payload)
24 | }
25 | }
26 | }
27 |
28 | export function wrapVueForEvents(app, Vue, ctx: BackendContext) {
29 | ['$emit', '$broadcast', '$dispatch'].forEach((method) => {
30 | wrap(app, Vue, method, ctx)
31 | })
32 | }
33 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yml:
--------------------------------------------------------------------------------
1 | name: 🚀 New feature proposal
2 | description: Suggest an idea for this project
3 | labels: [':sparkles: feature request']
4 | body:
5 | - type: markdown
6 | attributes:
7 | value: |
8 | **Before You Start...**
9 |
10 | This form is only for submitting feature requests. If you have a usage question
11 | or are unsure if this is really a bug, make sure to:
12 |
13 | - Read the [docs](https://devtools.vuejs.org/)
14 | - Read the [FAQ](https://devtools.vuejs.org/guide/faq.html)
15 | - Ask on [GitHub Discussions](https://github.com/vuejs/devtools/discussions)
16 | - Ask on [Discord Chat](https://chat.vuejs.org/)
17 |
18 | Also try to search for your issue - another user may have already requested something similar!
19 |
20 | - type: textarea
21 | id: problem-description
22 | attributes:
23 | label: What problem does this feature solve?
24 | description: |
25 | Explain your use case, context, and rationale behind this feature request. More importantly, what is the **end user experience** you are trying to build that led to the need for this feature?
26 | placeholder: Problem description
27 | validations:
28 | required: true
29 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ### Description
4 |
5 |
6 |
7 | ### Additional context
8 |
9 |
10 |
11 | ---
12 |
13 | ### What is the purpose of this pull request?
14 |
15 | - [ ] Bug fix
16 | - [ ] New Feature
17 | - [ ] Documentation update
18 | - [ ] Other
19 |
20 | ### Before submitting the PR, please make sure you do the following
21 |
22 | - [ ] Read the [Contributing Guidelines](https://devtools.vuejs.org/guide/contributing.html).
23 | - [ ] Read the [Pull Request Guidelines](https://devtools.vuejs.org/guide/contributing.html#pull-request-guidelines) and follow the [Commit Convention](https://github.com/vuejs/devtools/blob/main/.github/commit-convention.md).
24 | - [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
25 | - [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`).
26 |
27 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/ui/components/VueDisable.vue:
--------------------------------------------------------------------------------
1 |
43 |
44 |
45 |
56 | Other {{ id }}
57 |
59 |
60 |
61 |
65 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/assets/devtools-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
38 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/TransitionExample.vue:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 |
21 |
54 |
55 |
56 |
64 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/features/ui/components/VueSelectButton.vue:
--------------------------------------------------------------------------------
1 |
43 |
44 |
45 |
22 |
25 |
26 |
27 | hello
28 |
29 |
30 |
31 |
32 |
33 |
36 |
39 |
43 |
49 | {{ item }}
50 |
51 |
52 |
53 |
58 | Other {{ id }}
59 |
61 |
62 |
63 |
67 |
--------------------------------------------------------------------------------
/packages/shell-firefox/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Vue.js devtools",
3 | "version": "6.6.4",
4 | "version_name": "6.6.4",
5 | "description": "Browser DevTools extension for debugging Vue.js applications.",
6 | "manifest_version": 2,
7 | "icons": {
8 | "16": "icons/16.png",
9 | "48": "icons/48.png",
10 | "128": "icons/128.png"
11 | },
12 | "browser_action": {
13 | "default_icon": {
14 | "16": "icons/16-gray.png",
15 | "48": "icons/48-gray.png",
16 | "128": "icons/128-gray.png"
17 | },
18 | "default_title": "Vue Devtools",
19 | "default_popup": "popups/not-found.html"
20 | },
21 | "web_accessible_resources": [
22 | "devtools.html",
23 | "devtools-background.html",
24 | "build/backend.js"
25 | ],
26 | "devtools_page": "devtools-background.html",
27 | "background": {
28 | "scripts": [
29 | "build/background.js"
30 | ],
31 | "persistent": true
32 | },
33 | "permissions": [
34 | "
44 |
66 |
67 |
--------------------------------------------------------------------------------
/packages/shell-chrome/src/backend.js:
--------------------------------------------------------------------------------
1 | // this is injected to the app page when the panel is activated.
2 |
3 | import { initBackend } from '@back'
4 | import { Bridge } from '@vue-devtools/shared-utils'
5 |
6 | window.addEventListener('message', handshake)
7 |
8 | function sendListening() {
9 | window.postMessage({
10 | source: 'vue-devtools-backend-injection',
11 | payload: 'listening',
12 | }, '*')
13 | }
14 | sendListening()
15 |
16 | function handshake(e) {
17 | if (e.data.source === 'vue-devtools-proxy' && e.data.payload === 'init') {
18 | window.removeEventListener('message', handshake)
19 |
20 | let listeners = []
21 | const bridge = new Bridge({
22 | listen(fn) {
23 | const listener = (evt) => {
24 | if (evt.data.source === 'vue-devtools-proxy' && evt.data.payload) {
25 | fn(evt.data.payload)
26 | }
27 | }
28 | window.addEventListener('message', listener)
29 | listeners.push(listener)
30 | },
31 | send(data) {
32 | // if (process.env.NODE_ENV !== 'production') {
33 | // console.log('[chrome] backend -> devtools', data)
34 | // }
35 | window.postMessage({
36 | source: 'vue-devtools-backend',
37 | payload: data,
38 | }, '*')
39 | },
40 | })
41 |
42 | bridge.on('shutdown', () => {
43 | listeners.forEach((l) => {
44 | window.removeEventListener('message', l)
45 | })
46 | listeners = []
47 | window.addEventListener('message', handshake)
48 | })
49 |
50 | initBackend(bridge)
51 | }
52 | else {
53 | sendListening()
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/packages/shell-firefox/src/backend.js:
--------------------------------------------------------------------------------
1 | // this is injected to the app page when the panel is activated.
2 |
3 | import { initBackend } from '@back'
4 | import { Bridge } from '@vue-devtools/shared-utils'
5 |
6 | window.addEventListener('message', handshake)
7 |
8 | function sendListening() {
9 | window.postMessage({
10 | source: 'vue-devtools-backend-injection',
11 | payload: 'listening',
12 | }, '*')
13 | }
14 | sendListening()
15 |
16 | function handshake(e) {
17 | if (e.data.source === 'vue-devtools-proxy' && e.data.payload === 'init') {
18 | window.removeEventListener('message', handshake)
19 |
20 | let listeners = []
21 | const bridge = new Bridge({
22 | listen(fn) {
23 | const listener = (evt) => {
24 | if (evt.data.source === 'vue-devtools-proxy' && evt.data.payload) {
25 | fn(evt.data.payload)
26 | }
27 | }
28 | window.addEventListener('message', listener)
29 | listeners.push(listener)
30 | },
31 | send(data) {
32 | // if (process.env.NODE_ENV !== 'production') {
33 | // console.log('[chrome] backend -> devtools', data)
34 | // }
35 | window.postMessage({
36 | source: 'vue-devtools-backend',
37 | payload: data,
38 | }, '*')
39 | },
40 | })
41 |
42 | bridge.on('shutdown', () => {
43 | listeners.forEach((l) => {
44 | window.removeEventListener('message', l)
45 | })
46 | listeners = []
47 | window.addEventListener('message', handshake)
48 | })
49 |
50 | initBackend(bridge)
51 | }
52 | else {
53 | sendListening()
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/packages/app-backend-vue2/src/components/update-tracking.ts:
--------------------------------------------------------------------------------
1 | import type { DevtoolsApi } from '@vue-devtools/app-backend-api'
2 | import { HookEvents, SharedData } from '@vue-devtools/shared-utils'
3 | import throttle from 'lodash/throttle'
4 | import { getUniqueId } from './util.js'
5 |
6 | export function initUpdateTracking(api: DevtoolsApi, Vue) {
7 | // Global mixin
8 | Vue.mixin({
9 | beforeCreate() {
10 | applyTrackingUpdateHook(api, this)
11 | },
12 | })
13 | }
14 |
15 | const COMPONENT_HOOKS = [
16 | 'created',
17 | 'updated',
18 | ]
19 |
20 | export function applyTrackingUpdateHook(api: DevtoolsApi, vm) {
21 | if (vm.$options.$_devtoolsUpdateTrackingHooks) {
22 | return
23 | }
24 | vm.$options.$_devtoolsUpdateTrackingHooks = true
25 |
26 | const handler = throttle(async function (this: any) {
27 | if (SharedData.trackUpdates) {
28 | api.ctx.hook.emit(HookEvents.TRACK_UPDATE, getUniqueId(this), api.ctx)
29 |
30 | const parents = await api.walkComponentParents(this)
31 | for (const parent of parents) {
32 | api.ctx.hook.emit(HookEvents.TRACK_UPDATE, getUniqueId(parent), api.ctx)
33 | }
34 | }
35 |
36 | if (SharedData.flashUpdates) {
37 | api.ctx.hook.emit(HookEvents.FLASH_UPDATE, this, api.backend)
38 | }
39 | }, 100)
40 | for (const hook of COMPONENT_HOOKS) {
41 | const currentValue = vm.$options[hook]
42 | if (Array.isArray(currentValue)) {
43 | vm.$options[hook] = [handler, ...currentValue]
44 | }
45 | else if (typeof currentValue === 'function') {
46 | vm.$options[hook] = [handler, currentValue]
47 | }
48 | else {
49 | vm.$options[hook] = [handler]
50 | }
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue3/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp, h } from 'vue'
2 | import { createRouter, createWebHashHistory } from 'vue-router'
3 | import App from './App.vue'
4 | import App3 from './App3.vue'
5 | import TestPlugin from './devtools-plugin'
6 | import SimplePlugin from './devtools-plugin/simple'
7 | import store from './store'
8 |
9 | // eslint-disable-next-line no-extend-native
10 | Array.prototype.foo = 'bar'
11 |
12 | const router = createRouter({
13 | history: createWebHashHistory(),
14 |
15 | routes: [
16 | {
17 | path: '/p1',
18 | component: import('./router/Page1.vue'),
19 | },
20 | {
21 | path: '/p2',
22 | component: import('./router/Page2.vue'),
23 | },
24 | ],
25 | })
26 |
27 | const app = createApp(App)
28 | app.component('global', {
29 | render: () => 'I\'m a global component',
30 | })
31 | app.use(router)
32 | app.use(store)
33 | app.use(TestPlugin)
34 | app.mount('#app')
35 |
36 | const app2 = createApp({
37 | name: 'App2',
38 | render: () => h('h1', 'App 2'),
39 | })
40 | app2.mount('#app2')
41 |
42 | const app2bis = createApp({
43 | name: 'App2',
44 | render: () => h('h1', 'App 2 Bis'),
45 | })
46 | app2bis.mount('#app2bis')
47 |
48 | createApp(App3).mount('#app3')
49 |
50 | createApp({
51 | render: () => h('button', {
52 | onClick: () => app2.unmount(),
53 | }, 'Remove app 2'),
54 | devtools: {
55 | hide: true,
56 | },
57 | }).mount('#ghost-app')
58 |
59 | setTimeout(() => {
60 | const app = createApp({
61 | name: 'DelayedApp',
62 | render: () => h('h1', 'Delayed app'),
63 | })
64 | app.use(SimplePlugin)
65 | app.mount('#delay-app')
66 | }, 1000)
67 |
68 | window.top.document.title = 'Vue 3 Dev Shell'
69 |
--------------------------------------------------------------------------------
/packages/app-frontend/src/mixins/keyboard.ts:
--------------------------------------------------------------------------------
1 | import { defineComponent } from 'vue'
2 |
3 | export const LEFT = 'ArrowLeft'
4 | export const UP = 'ArrowUp'
5 | export const RIGHT = 'ArrowRight'
6 | export const DOWN = 'ArrowDown'
7 | export const ENTER = 'Enter'
8 | export const DEL = 'Delete'
9 | export const BACKSPACE = 'Backspace'
10 |
11 | const activeInstances = []
12 |
13 | function processEvent(event, type) {
14 | if (
15 | event.target.tagName === 'INPUT'
16 | || event.target.tagName === 'TEXTAREA'
17 | ) {
18 | return
19 | }
20 | const modifiers: string[] = []
21 | if (event.ctrlKey || event.metaKey) {
22 | modifiers.push('ctrl')
23 | }
24 | if (event.shiftKey) {
25 | modifiers.push('shift')
26 | }
27 | if (event.altKey) {
28 | modifiers.push('alt')
29 | }
30 | const info = {
31 | key: event.key,
32 | code: event.code,
33 | modifiers: modifiers.join('+'),
34 | }
35 | let result = true
36 | activeInstances.forEach((opt) => {
37 | if (opt[type]) {
38 | const r = opt[type].call(opt.vm, info)
39 | if (r === false) {
40 | result = false
41 | }
42 | }
43 | })
44 | if (!result) {
45 | event.preventDefault()
46 | }
47 | }
48 |
49 | document.addEventListener('keydown', (event) => {
50 | processEvent(event, 'onKeyDown')
51 | })
52 |
53 | export default function (options) {
54 | return defineComponent({
55 | mounted() {
56 | activeInstances.push({
57 | vm: this,
58 | ...options,
59 | })
60 | },
61 | unmounted() {
62 | const i = activeInstances.findIndex(
63 | o => o.vm === this,
64 | )
65 | if (i >= 0) {
66 | activeInstances.splice(i, 1)
67 | }
68 | },
69 | })
70 | }
71 |
--------------------------------------------------------------------------------
/packages/shell-dev-vue2/src/EventChild.vue:
--------------------------------------------------------------------------------
1 |
45 |
46 |
47 |
45 | ![Plugin logo]()
51 |
56 |
57 |
65 | Provided by {{ plugin ? plugin.label : pluginId }}
58 |
62 |
64 | Plugin ID: {{ plugin.id }}
63 |
48 |
54 |
60 |
66 |
67 |
68 | 69 | 72 | 75 |
76 |
77 |
--------------------------------------------------------------------------------
68 | 69 | 72 | 75 |